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/path-viewer.js

@@ -101,6 +101,13 @@ module.exports = {
         Vue.nextTick(this.update);
     },
 
+    beforeDestroy: function() {
+        if (this._sizeWatcher) {
+            this._sizeWatcher.disconnect();
+            this._sizeWatcher = null;
+        }
+    },
+
     methods: {
         update: async function() {
             if (!this.webglAvailable) {
@@ -201,6 +208,12 @@ module.exports = {
             }
 
             const dims = this.get_dims();
+            // Skip layouts where the target has no measurable size.
+            // The render loop guard below will not draw frames until
+            // a real size has been observed at least once.
+            if (!(dims.width > 0 && dims.height > 0)) {
+                return;
+            }
 
             this.camera.aspect = dims.width / dims.height;
             this.camera.updateProjectionMatrix();
@@ -274,12 +287,23 @@ module.exports = {
             }
 
             try {
-                // Renderer
-                this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+                // Renderer. Use an opaque canvas with a clear color
+                // that matches the page-side gradient so the moment
+                // the canvas is appended (and before the first 3D
+                // frame is drawn) the user does not see a flash from
+                // the page background through transparency.
+                this.renderer = new THREE.WebGLRenderer({
+                    antialias: true,
+                    alpha: false,
+                });
                 this.renderer.setPixelRatio(window.devicePixelRatio);
-                this.renderer.setClearColor(0, 0);
+                this.renderer.setClearColor(0x222222, 1);
+                // Same color on the DOM element itself so the very
+                // first paint (before the WebGL context has cleared)
+                // is dark too.
+                this.renderer.domElement.style.background = "#222222";
+                this.renderer.domElement.style.display = "block";
                 this.target.appendChild(this.renderer.domElement);
-
             } catch (e) {
                 console.log("WebGL not supported: ", e);
                 return;
@@ -333,8 +357,46 @@ module.exports = {
             // Events
             window.addEventListener("resize", this.update_view, false);
 
-            // Start it
-            this.render();
+            // Start the render loop only after the target has a real,
+            // stable size. Without this, the first frame paints into
+            // a 0×0 / collapsed-flex canvas and a second frame paints
+            // again at the right size — visible as a flash on the
+            // very first mount of the Program tab.
+            const startRendering = () => {
+                if (this._rendering) return;
+                this._rendering = true;
+                this.update_view();
+                this.render();
+            };
+
+            const dims = this.get_dims();
+            if (dims.width > 0 && dims.height > 0) {
+                startRendering();
+            } else if (typeof ResizeObserver !== "undefined") {
+                this._sizeWatcher = new ResizeObserver(entries => {
+                    for (const entry of entries) {
+                        const r = entry.contentRect;
+                        if (r.width > 0 && r.height > 0) {
+                            this._sizeWatcher.disconnect();
+                            this._sizeWatcher = null;
+                            startRendering();
+                            return;
+                        }
+                    }
+                });
+                this._sizeWatcher.observe(this.target);
+            } else {
+                // Old browser fallback: poll for a non-zero size.
+                const tick = () => {
+                    const d = this.get_dims();
+                    if (d.width > 0 && d.height > 0) {
+                        startRendering();
+                    } else {
+                        requestAnimationFrame(tick);
+                    }
+                };
+                requestAnimationFrame(tick);
+            }
         },
 
         create_surface_material: function() {
@@ -646,6 +708,14 @@ module.exports = {
                 return;
             }
 
+            // Don't paint frames while the target has no size; this
+            // prevents an initial single-frame clear from painting
+            // before the layout has settled (visible as a dark flash).
+            const dims = this.get_dims();
+            if (!(dims.width > 0 && dims.height > 0)) {
+                return;
+            }
+
             if (this.controls.update() || this.dirty) {
                 this.dirty = false;
                 this.renderer.render(this.scene, this.camera);