kiosk: pi-friendly compact mode + chromium 72 fallbacks

- Detect kiosk mode (localhost / ?kiosk=1) and add html.kiosk-mode
- Suppress 3D path-viewer in kiosk mode (Pi 3B too slow)
- Compact 1366x768 layout: 56px header, smaller jog grid, 4-col macros
  2-col status, 540px jog column
- Flex-gap fallbacks for Chromium 72 (header tabs, sys-btn, state-badge,
  ktab, sp-row, etc.) using "> * + *" margin-* rules
- Path-viewer: opaque WebGL canvas, ResizeObserver-gated render loop,
  no first-frame size flash
- Path-viewer renderer cleared properly on component teardown
- W axis row: W- | W+ | Probe XYZ | Probe Z (was W-|HomeW|W+|Probe)
- Running panel only for actual program execution (not jogging)
- Settings sectioned (Display+Units / Probing / G-code+Motion)
- Routed component now keep-alive across tab swaps
- FA4 -> FA6 webfonts

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";
+                }
+            }
+        },
+    },
 };