Rebuild the editor as a Vue app: sidebar, pages side by side, tile settings in a drawer (0.2.74)

The page is now web/ (Vue 3 + Vite + TypeScript), built into screen_manager/app/static with hashed file names; server.py serves index.html as built and /assets/. The Python API, the data and the firmware are unchanged. Your screens sit in a sidebar, the pages of a screen stand next to each other at the screen's own shape, the library sits on the right, and a tile's settings slide in as a drawer while the mockup stays in view. New screen, Firmware & USB, Alerts, Override YAML and Settings are pages of their own. Fonts moved to web/src/assets; the tests read the source through tests/editor_sources.py. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-18 07:48:45 +02:00
parent 9f5694b9eb
commit 510ebdf885
72 changed files with 5486 additions and 5409 deletions
@@ -0,0 +1,69 @@
+/* Design tokens. Light is the default; dark follows the browser (Home Assistant's "auto" theme does too). */
+:root {
+  color-scheme: light dark;
+  --ground: #f5f6f8;
+  --surface: #ffffff;
+  --surface-2: #f9fafb;
+  --line: #e4e7ec;
+  --line-strong: #d3d8e0;
+  --ink: #16181d;
+  --ink-2: #565d6b;
+  --muted: #7a8290;
+  --accent: #2f63f0;
+  --accent-ink: #ffffff;
+  --accent-soft: #edf2ff;
+  --good: #1e9a5f;
+  --good-soft: #e6f6ee;
+  --warn: #b56d00;
+  --warn-soft: #fff3df;
+  --danger: #c6372e;
+  --danger-soft: #fdecea;
+  --seg: #eef0f3;
+  --shadow: 0 12px 40px rgba(20, 24, 40, 0.12), 0 1px 2px rgba(20, 24, 40, 0.06);
+  --code-bg: #f1f3f6;
+  --ui-font: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ground: #0e1014;
+    --surface: #161a21;
+    --surface-2: #1b2029;
+    --line: #262c37;
+    --line-strong: #333b49;
+    --ink: #e9ecf1;
+    --ink-2: #b4bbc7;
+    --muted: #8a93a3;
+    --accent: #6d93ff;
+    --accent-ink: #0b1633;
+    --accent-soft: #1b2540;
+    --good: #3fbf7f;
+    --good-soft: #14302a;
+    --warn: #e0a03a;
+    --warn-soft: #302610;
+    --danger: #f07167;
+    --danger-soft: #3a1b19;
+    --seg: #222834;
+    --shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
+    --code-bg: #12151b;
+  }
+}
+/* The screens draw Material Design Icons; tile-icons.woff holds the same glyphs. The top bar
+   mockup measures text in the firmware's Roboto. */
+@font-face {
+  font-family: "Tile Icons";
+  src: url("../assets/tile-icons.woff") format("woff");
+  font-display: block;
+}
+@font-face {
+  font-family: "Bar Roboto";
+  font-weight: 400;
+  src: url("../assets/bar-roboto-400.woff") format("woff");
+  font-display: block;
+}
+@font-face {
+  font-family: "Bar Roboto";
+  font-weight: 500;
+  src: url("../assets/bar-roboto-500.woff") format("woff");
+  font-display: block;
+}