ui: V09 redesign - Control/Program/Console/Settings shell

Replaces the legacy side-menu chrome with a 4-tab top header.

- index.pug: tablet/kiosk fit-to-viewport script, header tab nav,
  estop/state badges in header.
- app.js: route hash to (control|program|console|<settings-family>),
  multi-section settings shell.
- control-view: header DRO, jog grid, MDI/probe/macros panels.
- program-view + program-mixin: file browser + toolpath preview +
  run/pause/stop, replaces the legacy 'macros' tab content.
- console-view: MDI shell, message log, indicators.
- settings-shell-view: rail-driven inner pages (Display & Units,
  Probing, G-code & Motion, Macros, Network, etc.).
- settings-view: filter Svelte SettingsView to one rail section.
- SettingsView.svelte: tag every section with data-sec=… so the
  filter above can hide non-matching ones.
- style.styl: ~2700 lines of V09 layout, DRO, jog grid, status
  strip, and tablet/kiosk variants.

No A-axis / auxiliary-axis content lives on this branch.

src/js/settings-view.js

@@ -1,14 +1,60 @@
+// V09 wraps the legacy Svelte SettingsView and filters its big page
+// down to a single rail section so each rail item shows only the
+// relevant controls. The Svelte component is left untouched (it is
+// shared with the legacy UI) — we just hide the `<h2>` and `<fieldset>`
+// elements whose `data-sec` does not match the active section.
+
 module.exports = {
     template: "#settings-view-template",
 
-    attached: function() {
+    props: {
+        // "display" | "probing" | "gcode". Default is "display" which
+        // keeps the rail's "Display & Units" item working unchanged.
+        section: { default: "display" },
+    },
+
+    attached: function () {
         this.svelteComponent = SvelteComponents.createComponent(
             "SettingsView",
             document.getElementById("settings")
         );
+        // Defer one tick so Svelte has rendered the section markup.
+        setTimeout(() => this.apply_section_filter(), 0);
     },
 
-    detached: function() {
-        this.svelteComponent.$destroy();
-    }
+    detached: function () {
+        if (this.svelteComponent) this.svelteComponent.$destroy();
+    },
+
+    watch: {
+        section: function () {
+            this.apply_section_filter();
+        },
+    },
+
+    methods: {
+        apply_section_filter: function () {
+            const root = document.getElementById("settings");
+            if (!root) return;
+            const want = this.section || "display";
+            // Hide every section block that does not match.
+            root.querySelectorAll("[data-sec]").forEach(el => {
+                el.style.display = el.dataset.sec === want ? "" : "none";
+            });
+            // Hide the global <h1>Settings</h1> on subsections so the
+            // page reads as a focused panel.
+            const h1 = root.querySelector(".settings-view > h1");
+            if (h1) {
+                if (want === "display") {
+                    h1.textContent = "Display & Units";
+                } else if (want === "probing") {
+                    h1.textContent = "Probing";
+                } else if (want === "gcode") {
+                    h1.textContent = "G-code & Motion";
+                } else {
+                    h1.textContent = "Settings";
+                }
+            }
+        },
+    },
 };