gds-lens 0.1.0

package/src/mount-target.js

@@ -0,0 +1,23 @@
+// The element the engine mounts into, handed over between <gds-lens>'s
+// connectedCallback and viewer.js.
+//
+// It exists because viewer.js does its work as a module body rather than in a
+// mount function: 172 top-level statements spread through the file, holding
+// the renderer's state in module scope. Wrapping all of that in a function
+// would mean indenting the entire file for no behavioural gain, so the element
+// defers it with a dynamic import instead and leaves the target here for it to
+// pick up. Passing the element rather than having viewer.js query for it also
+// keeps this correct when the <gds-lens> is itself inside someone else's
+// shadow root, where document.querySelector would not find it.
+
+let target = null;
+
+export function setMountTarget(element) {
+    target = element;
+}
+
+export function takeMountTarget() {
+    const element = target;
+    target = null;
+    return element;
+}

package/src/viewer-shell.html

@@ -0,0 +1,105 @@
+<!-- lil-gui mounts its panel here rather than at document.body, so the
+     whole control surface lives inside the shadow root. -->
+<div id="guiHost"></div>
+    <div id="loadingOverlay" role="status" aria-live="polite">
+        <div id="loadingBarTrack"><div id="loadingBarFill"></div></div>
+        <div id="loadingPhase">Loading layout...</div>
+        <div id="loadingPercent"></div>
+    </div>
+    <!-- role="alert" rather than a polite live region: this replaces the
+         view entirely, so it is the only thing left to read. -->
+    <div id="loadError" role="alert"></div>
+    <div id="reloadProgress" class="hidden" role="status" aria-live="polite">
+        <div id="reloadBarTrack"><div id="reloadBarFill"></div></div>
+        <div id="reloadLabel">Reloading...</div>
+    </div>
+    <div id="staleBanner" class="hidden" role="status">
+        <span id="staleText">A newer version of this file is on disk.</span>
+        <button id="staleReloadBtn" type="button">Reload</button>
+        <button id="staleAlwaysBtn" type="button" class="secondary"
+                title="Reload now, and automatically whenever this file changes from now on">Always</button>
+        <button id="staleDismiss" type="button" class="icon-only"
+                aria-label="Dismiss until the next change"
+                title="Dismiss until the next change">✕</button>
+    </div>
+    <!-- tabindex so the keyboard handlers in viewer.js are reachable without
+         a pointer; labelled because a bare <canvas> announces nothing. -->
+    <canvas id="glCanvas" tabindex="0" role="img"
+            aria-label="Layout view. Drag to pan, scroll to zoom."></canvas>
+
+    <!-- Cell hierarchy: rows are built by renderHierarchy in viewer.js from
+         the tree parseGdsToLayers hands back, lazily as branches open. -->
+    <div id="hierarchyPanel" class="hidden">
+        <div id="hierarchyHeader">
+            <span id="hierarchyTitle">Hierarchy</span>
+            <span id="hierarchyCount"></span>
+            <button id="hierarchyHide" type="button" class="icon-only"
+                aria-label="Hide the hierarchy tree"
+                title="Hide the hierarchy tree (H)">✕</button>
+        </div>
+        <!-- Find (see the search block in viewer.js): one box over two
+             haystacks, the design's cell names and its own TEXT labels.
+             Results take the tree's place while a query is up.
+
+             Collapsed by default, and folded away behind one row rather than
+             sitting open above the tree: the panel is here to browse the
+             hierarchy, and two more rows of chrome over it are two fewer rows
+             of the thing being browsed. "/" opens it and lands in the box, so
+             the fold costs nothing to whoever is actually searching. -->
+        <div id="hierarchyFind">
+            <button id="hierarchyFindToggle" type="button"
+                 aria-expanded="false" aria-controls="hierarchySearch"
+                 title="Find a cell by name, or a label by its text (/)">
+                <span id="hierarchyFindTwisty">▸</span>
+                <span id="hierarchyFindLabel">Find</span>
+                <span id="hierarchySearchCount"></span>
+            </button>
+            <div id="hierarchySearch" class="hidden">
+                <input id="hierarchySearchInput" type="text" placeholder="cell name"
+                       spellcheck="false" autocomplete="off"
+                       title="Find a cell by name, or a label by its text (/ focuses this box)">
+                <div id="hierarchyScope">
+                    <button id="hierarchyScopeCells" type="button" aria-pressed="true"
+                            title="Search the design's cell names">Cells</button>
+                    <button id="hierarchyScopeLabels" type="button" aria-pressed="false"
+                            title="Search the layout's own TEXT labels">Labels</button>
+                </div>
+            </div>
+        </div>
+        <div id="hierarchyTree" role="tree" aria-label="Cell hierarchy"></div>
+        <div id="hierarchyResults" class="hidden" role="listbox" aria-label="Search results"></div>
+    </div>
+    <button id="hierarchyShowBtn" type="button" class="hidden"
+            aria-expanded="false" aria-controls="hierarchyPanel"
+            title="Show the design's cell hierarchy (H)">Hierarchy</button>
+
+    <div id="debugPanel" class="hidden">
+        <div id="debugPanelHeader">
+            <span>Debug tools</span>
+            <button id="debugCopyBtn" type="button">Copy log</button>
+        </div>
+        <div id="debugBody">
+            <!-- Engine readout, written from renderer.cpp (set_inner_html("ui", ...)). -->
+            <div id="ui"></div>
+            <div id="debugLog"></div>
+        </div>
+    </div>
+    <button id="debugToggleBtn" type="button"
+            aria-expanded="false" aria-controls="debugPanel">Debug tools</button>
+
+    <div id="viewReadout">
+        <div id="copyToast" class="hidden" role="status" aria-live="polite"></div>
+        <div id="scaleContainer">
+            <div id="scaleLabel">0 μm</div>
+            <div id="scaleBar" style="width: 100px;"></div>
+        </div>
+        <div id="coordReadout" class="hidden"></div>
+    </div>
+
+    <div id="measureLabels"></div>
+
+    <div id="canvasMenu" class="hidden" role="menu">
+        <button id="canvasMenuCopy" type="button" role="menuitem">
+            <span>Copy coordinate</span><span class="menu-value"></span>
+        </button>
+    </div>

package/src/viewer.css

@@ -0,0 +1,469 @@
+        /* ---- Theme tokens ----
+           Every color in this file comes from here, because the viewer follows
+           the embedder's light/dark theme and each one needs a counterpart.
+           Dark is the default: it's what the page paints as before any script
+           runs, and it's the far more common editor theme.
+
+           The light values ride on a single .theme-light class, which viewer.js's
+           theme block sets: it asks the host which theme is current and falls
+           back to the OS preference when the host has no opinion (see
+           applyTheme there). An embedder can also just set the class itself.
+           The canvas is not covered by any of this -- what the renderer draws is
+           themed in renderer.cpp (see setTheme). */
+        :host {
+            --bg: #0c0c0d;
+            --fg: #ffffff;            /* ink over the canvas: scale bar, ruler readout */
+            --fg-dim: #a5a5a5;
+            --fg-faint: #808080;
+            --surface: #2a2a2c;       /* small chrome fills: bar tracks, buttons */
+            --surface-fg: #dddddd;
+            --scrim: rgba(0, 0, 0, 0.88);         /* debug panel, over the canvas */
+            --label-scrim: rgba(0, 0, 0, 0.75);   /* ruler readout, over geometry */
+            --chip-scrim: rgba(12, 12, 13, 0.85); /* reload chip, over geometry */
+            --border: #333333;
+            --border-strong: #555555;
+            --accent: #4a9eff;
+            --accent-fg: #06121f;     /* text on an --accent fill */
+            --accent-text: #cfe6ff;   /* --accent as text, on --chip-scrim */
+            --accent-border: #2a3f57;
+            --danger: #ff4d4d;
+            --danger-dim: #ff9a9a;
+            --select-bg: #5a1f1f;     /* selected marker's row */
+            --select-fg: #ffd9d9;
+            --error-bg: #2a1416;
+            --error-border: #7a2b2b;
+            --error-fg: #ffd9d9;
+            --warn-bg: #4a3410;       /* "newer version on disk" banner */
+            --warn-border: #7a5a1c;
+            --warn-border-strong: #a37a26;
+            --warn-fg: #ffe9c2;
+            --warn-fg-dim: #e5cfa4;
+            --warn-btn-fg: #fff6e5;
+            --log-fg: #7fff7f;
+            --log-err: #ff7f7f;
+            /* lil-gui's own palette (mapped onto its variable names below). */
+            --panel-bg: #1f1f1f;
+            --panel-fg: #ebebeb;
+            --panel-title-bg: #111111;
+            --panel-widget: #424242;
+            --panel-widget-hover: #4f4f4f;
+            --panel-widget-focus: #595959;
+        }
+        :host(.theme-light) {
+            --bg: #fafafb;
+            --fg: #17171a;
+            --fg-dim: #56565c;
+            --fg-faint: #6b6b73;      /* matches the dark side's contrast, not its lightness */
+            --surface: #e4e4e8;
+            --surface-fg: #2c2c2e;
+            --scrim: rgba(250, 250, 251, 0.93);
+            --label-scrim: rgba(255, 255, 255, 0.85);
+            --chip-scrim: rgba(255, 255, 255, 0.9);
+            --border: #d2d2d8;
+            --border-strong: #b4b4bc;
+            --accent: #1f6fd0;
+            --accent-fg: #ffffff;
+            --accent-text: #14538f;
+            --accent-border: #a8c8e8;
+            --danger: #b3261e;
+            --danger-dim: #d0574e;
+            --select-bg: #ffdcdc;
+            --select-fg: #7a1f1f;
+            --error-bg: #fdeceb;
+            --error-border: #dda3a0;
+            --error-fg: #7d201c;
+            --warn-bg: #fdf3d8;
+            --warn-border: #e0c07a;
+            --warn-border-strong: #c9a153;
+            --warn-fg: #5c431a;
+            --warn-fg-dim: #7d6231;
+            --warn-btn-fg: #3f2d0e;
+            --log-fg: #157f2a;
+            --log-err: #b3261e;
+            --panel-bg: #f4f4f6;
+            --panel-fg: #2c2c2e;
+            --panel-title-bg: #e4e4e8;
+            --panel-widget: #d8d8de;
+            --panel-widget-hover: #c8c8d0;
+            --panel-widget-focus: #babac2;
+        }
+        /* lil-gui's palette is its own set of custom properties, so the panel
+           themes by re-pointing those at the --panel-* tokens above rather
+           than by restyling any of its rows. Mapped here on .lil-gui rather
+           than on :root because lil-gui's own .lil-gui rule sets them, and a
+           rule matching the element itself beats an inherited value. (Source
+           order settles the tie: lil-gui inserts its stylesheet *before* the
+           first <style> already in <head> -- i.e. this one -- specifically so
+           page styles outrank its defaults.) */
+        .lil-gui {
+            --background-color: var(--panel-bg);
+            --text-color: var(--panel-fg);
+            --title-background-color: var(--panel-title-bg);
+            --title-text-color: var(--panel-fg);
+            --widget-color: var(--panel-widget);
+            --hover-color: var(--panel-widget-hover);
+            --focus-color: var(--panel-widget-focus);
+            --number-color: var(--accent);
+        }
+        /* A custom element is display:inline by default and would collapse to
+           zero height. The host owns the box; everything inside positions
+           against it rather than against the page. */
+        :host { display: block; position: relative; width: 100%; height: 100%; overflow: hidden;
+                background: var(--bg); user-select: none; color: var(--fg); }
+        canvas { width: 100%; height: 100%; display: block; }
+        /* The engine readout (polygon/label counts + the per-frame #renderStats
+           span, both written from renderer.cpp). It lives inside #debugPanel
+           rather than floating over the canvas on its own: it's debug-only
+           either way, and two separate debug surfaces meant the same command
+           lit up two different corners of the screen. */
+        #ui { width: 320px; flex: none; overflow-y: auto; padding: 6px 8px; border-right: 1px solid var(--border);
+              color: var(--fg-dim); font-family: monospace; font-size: 11px; line-height: 1.5; user-select: text; }
+        /* The debug entry point is hidden until the "GDSLens: Toggle Debug
+           Tools" command adds .debug to <body>. */
+        #debugToggleBtn { display: none; }
+        :host(.debug) #debugToggleBtn { display: block; }
+        /* Bottom-right stack of view readouts: the scale bar, with the
+           pointer's world coordinate under it. One anchored column rather than
+           two separately positioned boxes, so the coordinate row -- whose width
+           varies with the number in it -- can't drift into or away from the bar
+           above it. */
+        #viewReadout { position: absolute; bottom: 20px; right: 20px; z-index: 10; pointer-events: none;
+                       display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
+        #scaleContainer { font-family: monospace; font-size: 11px; color: var(--fg); text-align: center; }
+        /* Pointer coordinate, rewritten by update_coord_readout (renderer.cpp)
+           on every move and every camera change; .hidden while the pointer is
+           off the canvas. Unlike the scale bar it's a run of text over
+           arbitrary geometry, so it carries the same scrim the ruler label
+           does rather than relying on an outline. */
+        #coordReadout { font-family: monospace; font-size: 11px; color: var(--fg); background: var(--label-scrim);
+                        border: 1px solid var(--border-strong); border-radius: 3px; padding: 2px 6px;
+                        white-space: nowrap; }
+        #coordReadout.hidden { display: none; }
+        /* Confirmation that the canvas menu's Copy coordinate reached the
+           clipboard (see the contextmenu handler in viewer.js). Same scrim as
+           the readout it answers for. It sits first in the column on purpose:
+           #viewReadout is anchored by its bottom edge, so a line appearing at
+           the top leaves the scale bar and the coordinate exactly where they
+           were -- one added at the bottom would shove both up mid-read. */
+        #copyToast { font-family: monospace; font-size: 11px; color: var(--fg); background: var(--label-scrim);
+                     border: 1px solid var(--border-strong); border-radius: 3px; padding: 2px 6px;
+                     white-space: nowrap; }
+        #copyToast.hidden { display: none; }
+        /* Right-click menu on the canvas (see the contextmenu handler in
+           viewer.js). VS Code's own webview menu is suppressed for it -- the
+           preload bails out of showing one when the page has already called
+           preventDefault -- so this has to look like a menu on its own. It
+           borrows the panel's palette rather than the readouts' scrim: it sits
+           over the layout but it's chrome, not an annotation of what's under
+           it. Above the debug panel (z 41), since a menu is the most recent
+           thing the user asked for. */
+        #canvasMenu { position: absolute; z-index: 50; min-width: 190px; padding: 4px;
+                      background: var(--panel-bg); color: var(--panel-fg);
+                      border: 1px solid var(--border-strong); border-radius: 4px;
+                      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
+        #canvasMenu.hidden { display: none; }
+        #canvasMenu button { display: flex; align-items: baseline; gap: 14px; width: 100%;
+                             background: none; border: 0; border-radius: 3px; padding: 4px 8px;
+                             font-family: inherit; font-size: 12px; color: inherit;
+                             text-align: left; white-space: nowrap; cursor: pointer; }
+        #canvasMenu button:hover, #canvasMenu button:focus { background: var(--accent); color: var(--accent-fg); outline: none; }
+        /* The coordinate itself, shown in the readout's monospace so it reads as
+           the value being copied rather than as a menu shortcut. */
+        #canvasMenu .menu-value { margin-left: auto; font-family: monospace; font-size: 11px; color: var(--fg-dim); }
+        #canvasMenu button:hover .menu-value, #canvasMenu button:focus .menu-value { color: inherit; }
+        /* The bar is drawn in the ink color over an outline of the background,
+           so it stays readable whichever of the two it happens to sit on top of
+           (it floats over the geometry, not over a panel). */
+        #scaleBar { height: 4px; background: var(--fg); border: 1px solid var(--bg); margin-top: 4px; }
+        /* Ruler readouts: one .measure-label per ruler, created and
+           repositioned to its measurement's midpoint on every redraw by
+           update_measure_labels (renderer.cpp). The translate lifts each one
+           just above its line so it doesn't cover what's being measured.
+           #measureLabels is a plain (unpositioned) container, so the labels
+           inside it still position against the page the way the single one
+           used to. */
+        #measureLabels .measure-label { position: absolute; transform: translate(-50%, -130%); font-family: monospace; font-size: 11px; color: var(--fg); background: var(--label-scrim); border: 1px solid var(--border-strong); border-radius: 3px; padding: 3px 7px; text-align: center; line-height: 1.4; white-space: nowrap; z-index: 15; pointer-events: none; }
+        /* lil-gui floats its own panel only when it appends to document.body,
+           by adding .lil-auto-place (position:fixed, right:15px, z 1001). We
+           pass a container instead so the panel lives inside the shadow root,
+           which skips that class entirely -- so without this the panel is a
+           plain block in normal flow, spanning the full width and pushing the
+           canvas down. Positioning it here also fixes two things lil-gui's own
+           rule got wrong for a component: absolute rather than fixed, so the
+           panel stays inside the component's box instead of pinning itself to
+           the viewport when embedded in a page; and z-index below the loading
+           overlay (30) and debug panel (40) rather than lil-gui's 1001. */
+        #guiHost { position: absolute; top: 0; right: 15px; max-height: 100%; z-index: 20; display: flex; }
+        #guiHost > .lil-gui.lil-root { max-height: 100%; }
+        /* Checkbox rows (layer list + top-level toggles): lil-gui gives the
+           label a 45% min-width and no overflow handling, so a long name like
+           "250/74 – SIN_WG_S" would push into the checkbox column. Widen the
+           label (the checkbox needs nowhere near half the row) and cut it
+           character-level with an ellipsis. */
+        .lil-gui .lil-controller.lil-boolean > .lil-name { min-width: 78%; width: 78%; overflow: hidden; text-overflow: ellipsis; }
+        /* ---- Layer rows (see addLayerRow in viewer.js) ----
+           A layer row carries two more things than the plain boolean above: its
+           shape count and a solo button, both appended after lil-gui's own
+           name/widget pair. .lil-controller is already a flex row, so they only
+           need flex:none to sit at the right edge; the name gives up the width
+           they take (this rule follows the 78% one above deliberately -- same
+           specificity, so source order decides). */
+        .lil-gui .lil-controller.layer-row > .lil-name { min-width: 58%; width: 58%; }
+        .lil-gui .lil-controller.layer-row .layer-count { flex: none; padding-left: 4px;
+                                                          color: var(--fg-faint); font-size: 10px; }
+        .lil-gui .lil-controller.layer-row .layer-solo { flex: none; width: 16px; text-align: center;
+                                                         margin-left: 4px; border-radius: 2px;
+                                                         color: var(--fg-faint); font-size: 10px; cursor: pointer; }
+        .lil-gui .lil-controller.layer-row .layer-solo:hover { color: var(--fg); background: var(--panel-widget-hover); }
+        /* The soloed layer's own row, so it's clear which of the hidden
+           hundred is the one still on screen. */
+        .lil-gui .lil-controller.layer-row.layer-soloed .layer-solo { color: var(--accent-fg); background: var(--accent); }
+        /* Filter box at the top of the Layers folder. lil-gui styles the inputs
+           belonging to its own controllers; this one is hand-built, so it
+           borrows the same widget fill. */
+        .lil-gui .lil-controller.layer-filter-row input { width: 100%; box-sizing: border-box;
+                                                          font-family: inherit; font-size: var(--input-font-size);
+                                                          background: var(--panel-widget); color: var(--panel-fg);
+                                                          border: none; border-radius: var(--widget-border-radius);
+                                                          height: var(--widget-height); padding: 0 6px; }
+        .lil-gui .lil-controller.layer-filter-row input:focus { background: var(--panel-widget-focus); outline: none; }
+        /* Interaction-mode row (Pan | Measure), hand-built in viewer.js since
+           lil-gui has no segmented-control type. Because the row carries
+           lil-gui's own classes, its button theming (widget color, radius,
+           height, :hover/:active) already applies -- all that's left is
+           splitting the widget in two and filling in the selected mode. The
+           name column is narrower than lil-gui's 45% default to leave both
+           buttons a readable width. */
+        .lil-gui .lil-controller.mode-row .lil-name { min-width: 30%; }
+        .lil-gui .lil-controller.mode-row .mode-widget { gap: 4px; }
+        .lil-gui .lil-controller.mode-row .mode-widget button { flex: 1; }
+        /* :hover/:active spelled out too -- lil-gui's own button:hover rule
+           outranks a bare .mode-active, which would grey out the selected
+           mode as soon as the pointer crossed it. */
+        .lil-gui .lil-controller.mode-row .mode-widget button.mode-active,
+        .lil-gui .lil-controller.mode-row .mode-widget button.mode-active:hover,
+        .lil-gui .lil-controller.mode-row .mode-widget button.mode-active:active { background: var(--accent); color: var(--accent-fg); font-weight: bold; }
+        /* Loaded-.lyp chip: the row shows the filename with an ✕ on the right
+           (injected by setLypChip in viewer.js) to unload it. */
+        .lil-gui .lil-controller.lyp-loaded { position: relative; }
+        .lil-gui .lil-controller.lyp-loaded .lil-name { padding-right: 22px; }
+        .lil-gui .lil-controller.lyp-loaded .lyp-unload { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--danger-dim); cursor: pointer; font-size: 12px; z-index: 5; }
+        .lil-gui .lil-controller.lyp-loaded .lyp-unload:hover { color: var(--danger); }
+        /* Saved-view rows (see renderNamedViews in viewer.js): a full-width
+           button that restores the view, with an ✕ on the right that deletes
+           it -- the same shape as the loaded-file chips above, and the same
+           reason for spelling it out separately (lil-gui has no row that
+           carries a second action). */
+        .lil-gui .lil-controller.view-row { position: relative; }
+        .lil-gui .lil-controller.view-row .lil-name { padding-right: 22px; }
+        .lil-gui .lil-controller.view-row .view-delete { position: absolute; right: 8px; top: 50%;
+                                                         transform: translateY(-50%); color: var(--danger-dim);
+                                                         cursor: pointer; font-size: 12px; z-index: 5; }
+        .lil-gui .lil-controller.view-row .view-delete:hover { color: var(--danger); }
+        /* Marker browser (see renderMarkerBrowser in viewer.js): the selected
+           violation's row, and the disabled "… N more" overflow row. The row
+           is a full-width <button> in lil-gui, so tint the button itself
+           (!important also beats lil-gui's :hover/:active backgrounds). */
+        .lil-gui .lil-controller.marker-selected button { background: var(--select-bg) !important; }
+        .lil-gui .lil-controller.marker-selected .lil-name { color: var(--select-fg); }
+        .lil-gui .lil-controller.marker-more-row { opacity: 0.55; pointer-events: none; }
+        /* ---- Hierarchy tree (see renderHierarchy in viewer.js) ----
+           The design's cell tree, down the left edge. Like the lil-gui panel
+           on the right it floats over the canvas rather than taking width
+           from it: the canvas stays the full window, so nothing about the
+           renderer's sizing, hit-testing or camera has to know this panel
+           exists. It outranks both progress UIs (z 25/26) so a reload doesn't
+           draw its hairline bar across the tree, but stays under the
+           full-screen loading overlay (z 30) and the debug panel (z 40). */
+        #hierarchyPanel { position: absolute; top: 0; left: 0; bottom: 0; width: 260px; z-index: 27;
+                          box-sizing: border-box; display: flex; flex-direction: column;
+                          background: var(--scrim); border-right: 1px solid var(--border);
+                          font-family: monospace; font-size: 11px; color: var(--surface-fg); }
+        #hierarchyPanel.hidden { display: none; }
+        #hierarchyHeader { display: flex; align-items: center; gap: 8px; flex: none; padding: 6px 8px;
+                           color: var(--fg-dim); border-bottom: 1px solid var(--border); }
+        #hierarchyTitle { flex: 1; }
+        #hierarchyCount { color: var(--fg-faint); }
+        /* Same icon-only treatment as #staleDismiss: a real button, styled
+           back down to the bare glyph it was before. */
+        #hierarchyHide { background: none; border: 0; font: inherit; color: inherit;
+                         cursor: pointer; opacity: 0.7; padding: 0 2px; }
+        #hierarchyHide:hover { opacity: 1; }
+        #hierarchyTree { flex: 1; overflow: auto; padding: 4px 0 8px; }
+        /* One row per node. The whole row frames its cell on click, so it's
+           the click target; only the left indent varies with depth (set
+           inline, since it's per-row). */
+        .hier-row { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 0;
+                    white-space: nowrap; cursor: pointer; }
+        .hier-row:hover { background: var(--surface); }
+        .hier-row.hier-selected, .hier-row.hier-selected:hover { background: var(--accent); color: var(--accent-fg); }
+        /* A cell with no geometry anywhere under it -- there's nothing to
+           frame, so the row only selects. */
+        .hier-row.hier-boxless { opacity: 0.55; cursor: default; }
+        .hier-twisty { flex: none; width: 12px; text-align: center; color: var(--fg-faint); }
+        /* flex + min-width:0 is what lets a long cell name actually truncate:
+           a flex item's default min-width is its content, and a cell name is
+           one unbreakable word, so without this the row grows and the panel
+           scrolls sideways instead. Taking the leftover width also pins the
+           placement count to the right edge. */
+        .hier-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+        /* Placement count ("×64"), shown only when the cell is placed more
+           than once by its parent. */
+        .hier-count { flex: none; color: var(--fg-faint); }
+        .hier-row.hier-selected .hier-twisty, .hier-row.hier-selected .hier-count { color: var(--accent-fg); }
+        .hier-children.hidden { display: none; }
+        /* ---- Find (see the search block in viewer.js) ----
+           Sits between the header and the tree: it's a way into the same
+           panel, not a second panel. One row while it's closed, which is how
+           it starts -- see the markup below for why -- opening to the box and
+           the scope pair. The pair gets its own row rather than sharing one
+           with the input: at 260px a field narrowed by two buttons is too
+           small to read a cell name in. */
+        #hierarchyFind { flex: none; border-bottom: 1px solid var(--border); }
+        /* The closed row. Styled like a tree row rather than like the panel
+           header, because that's what it is: something you click to open. */
+        #hierarchyFindToggle { display: flex; align-items: center; gap: 4px; padding: 3px 8px;
+                               color: var(--fg-dim); cursor: pointer; white-space: nowrap;
+                               /* A <button> now, for keyboard and screen readers: reset the
+                                  chrome and let it fill the row as the div did. */
+                               width: 100%; background: none; border: 0; font: inherit;
+                               text-align: left; }
+        #hierarchyFindToggle:hover { background: var(--surface); color: var(--fg); }
+        #hierarchyFindTwisty { flex: none; width: 12px; text-align: center; color: var(--fg-faint); }
+        #hierarchyFindLabel { flex: none; }
+        #hierarchySearch { padding: 0 8px 6px; display: flex; flex-direction: column; gap: 5px; }
+        #hierarchySearch.hidden { display: none; }
+        /* user-select is off for the page as a whole (dragging the canvas would
+           otherwise select the chrome over it), and that inherits into a text
+           field -- where it costs you selecting what you typed, and makes the
+           select() behind the "/" shortcut a no-op. */
+        #hierarchySearchInput { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 11px;
+                                background: var(--surface); color: var(--surface-fg);
+                                border: 1px solid var(--border-strong); border-radius: 3px;
+                                padding: 3px 6px; user-select: text; }
+        #hierarchySearchInput:focus { outline: none; border-color: var(--accent); }
+        #hierarchyScope { display: flex; gap: 4px; }
+        #hierarchyScope button { font-family: inherit; font-size: 10px; background: var(--surface);
+                                 color: var(--fg-dim); border: 1px solid var(--border-strong);
+                                 border-radius: 3px; padding: 1px 8px; cursor: pointer; }
+        #hierarchyScope button:hover { color: var(--fg); }
+        #hierarchyScope button.scope-active, #hierarchyScope button.scope-active:hover {
+            background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: bold; }
+        /* A design too large for a cell tree has no cell names on this side at
+           all (see the omitted case in renderHierarchy), so Cells has nothing
+           to search -- the button says so rather than returning nothing. */
+        #hierarchyScope button:disabled { opacity: 0.4; cursor: default; }
+        /* On the toggle row rather than beside the scope pair: it's the result
+           of the search, so it belongs next to the thing you'd click to get
+           back to it. Empty whenever the fold is closed, since closing clears
+           the query. */
+        #hierarchySearchCount { flex: 1; text-align: right; color: var(--fg-faint); overflow: hidden;
+                                text-overflow: ellipsis; }
+        /* Results replace the tree rather than stacking under it, so the panel
+           shows one list at a time; clearing the box brings the tree back with
+           its open branches untouched. */
+        #hierarchyResults { flex: 1; overflow: auto; padding: 4px 0 8px; }
+        #hierarchyResults.hidden, #hierarchyTree.hidden { display: none; }
+        /* A result row is the tree's row with the indent and twisty dropped and
+           a right-hand detail added (a cell's shape count, a label's layer). */
+        .find-row { display: flex; align-items: baseline; gap: 6px; padding: 2px 8px;
+                    white-space: nowrap; cursor: pointer; }
+        .find-row:hover { background: var(--surface); }
+        .find-row.find-active, .find-row.find-active:hover { background: var(--accent); color: var(--accent-fg); }
+        .find-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+        .find-meta { flex: none; color: var(--fg-faint); font-size: 10px; }
+        .find-row.find-active .find-meta { color: var(--accent-fg); }
+        /* A cell no top cell reaches (a reference cycle, or one the tree's own
+           caps left out) has no path to open down to, so its row only says so. */
+        .find-row.find-unreachable { opacity: 0.55; cursor: default; }
+        #hierarchyResults .find-note { padding: 6px 10px; color: var(--fg-faint); white-space: normal; line-height: 1.5; }
+        /* Stand-in for a tree: no cells to show, or too many to describe. */
+        #hierarchyTree .hier-note { padding: 6px 10px; color: var(--fg-faint); white-space: normal; line-height: 1.5; }
+        /* Reopens the panel after it's been hidden; sits where the panel's own
+           header was. Hidden while the panel is open, and while there's no
+           tree to reopen (viewer.js adds .hidden for that). */
+        #hierarchyShowBtn { position: absolute; top: 8px; left: 8px; z-index: 27; font-family: monospace;
+                            font-size: 10px; background: var(--surface); color: var(--fg-dim);
+                            border: 1px solid var(--border-strong); border-radius: 3px; padding: 2px 8px;
+                            cursor: pointer; opacity: 0.6; }
+        #hierarchyShowBtn:hover { opacity: 1; }
+        #hierarchyShowBtn.hidden, :host(.hierarchy-open) #hierarchyShowBtn { display: none; }
+        /* Everything else anchored to the left edge starts after whichever of
+           the two is on screen -- the panel, or just the button that reopens
+           it (.hierarchy-available). The open rule comes second so it wins
+           when both classes are set. */
+        :host(.hierarchy-available) #staleBanner { left: 88px; }
+        :host(.hierarchy-open) #staleBanner { left: 268px; }
+        :host(.hierarchy-open) #debugToggleBtn { left: 268px; }
+        /* "Newer version on disk" header (see the fileChanged handler in
+           viewer.js). Sits above the lil-gui panel (z 20) but below the
+           loading overlay (z 30), since it's hidden while a load runs
+           anyway. */
+        /* Stops short of the right edge so it doesn't cover the lil-gui panel
+           (260px wide, top-right) that it outranks on z-index. */
+        #staleBanner { position: absolute; top: 0; left: 0; right: 276px; box-sizing: border-box; z-index: 25;
+                       display: flex; align-items: center; gap: 12px; padding: 7px 12px;
+                       font-family: monospace; font-size: 12px; color: var(--warn-fg);
+                       background: var(--warn-bg); border-bottom: 1px solid var(--warn-border); }
+        #staleBanner.hidden { display: none; }
+        #staleText { flex: 1; }
+        #staleBanner button { font-family: monospace; font-size: 11px; background: var(--warn-border); color: var(--warn-btn-fg);
+                              border: 1px solid var(--warn-border-strong); border-radius: 3px; padding: 3px 12px; cursor: pointer; }
+        #staleBanner button:hover { background: var(--warn-border-strong); }
+        /* Secondary next to Reload: same action plus a persisted setting, so it
+           reads as the quieter of the two. */
+        #staleBanner button.secondary { background: transparent; border-color: transparent;
+                                        color: var(--warn-fg-dim); padding: 3px 6px; }
+        #staleBanner button.secondary:hover { background: transparent; color: var(--warn-btn-fg); text-decoration: underline; }
+        /* An icon-only control: a real <button> for keyboard and screen
+           readers, styled back down to bare text. The reset is explicit
+           because #staleBanner button above is more specific than an id on its
+           own and would otherwise give this the Reload button's chrome. */
+        #staleBanner button#staleDismiss { background: none; border: 0; border-radius: 0;
+                                           font: inherit; color: inherit; cursor: pointer;
+                                           opacity: 0.7; padding: 0 2px; }
+        #staleBanner button#staleDismiss:hover { background: none; opacity: 1; }
+        #loadingOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-family: monospace; color: var(--fg-dim); background: var(--bg); z-index: 30; }
+        #loadingOverlay.hidden { display: none; }
+        #loadingBarTrack { width: 320px; height: 8px; background: var(--surface); border-radius: 4px; overflow: hidden; }
+        #loadingBarFill { width: 0%; height: 100%; background: var(--accent); transition: width 0.15s ease-out; }
+        #loadingPhase { font-size: 12px; }
+        #loadingPercent { font-size: 11px; color: var(--fg-faint); }
+        /* The reload flavour of the same progress (see beginProgress in
+           viewer.js): a hairline bar along the top edge plus a small chip,
+           over a viewport that keeps showing the geometry already loaded.
+           Restoring the camera across a reload is pointless if the view is
+           blacked out while it happens. pointer-events stay off so a drag
+           that starts under the chip still pans the canvas. */
+        #reloadProgress { position: absolute; top: 0; left: 0; right: 0; z-index: 26; pointer-events: none; }
+        #reloadProgress.hidden { display: none; }
+        #reloadBarTrack { height: 2px; background: var(--surface); }
+        #reloadBarFill { width: 0%; height: 100%; background: var(--accent); transition: width 0.15s ease-out; }
+        #reloadLabel { display: inline-block; margin: 6px 0 0 10px; padding: 3px 8px; font-family: monospace;
+                       font-size: 11px; color: var(--accent-text); background: var(--chip-scrim);
+                       border: 1px solid var(--accent-border); border-radius: 3px; }
+        /* Load failures. This is deliberately NOT part of the debug tools:
+           #ui above is display:none unless the debug command is run, so an
+           error written only there is invisible to a normal user. Empty means
+           no error, so setting/clearing the text is all it takes to show or
+           hide the panel. */
+        #loadError { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 520px; z-index: 35; padding: 16px 20px; background: var(--error-bg); border: 1px solid var(--error-border); border-radius: 5px; font-family: monospace; font-size: 12px; line-height: 1.55; color: var(--error-fg); white-space: pre-line; user-select: text; }
+        #loadError:empty { display: none; }
+        #debugPanel { position: absolute; bottom: 0; left: 0; width: 100%; max-height: 240px; z-index: 40; background: var(--scrim); border-top: 1px solid var(--border); display: flex; flex-direction: column; }
+        #debugPanel.hidden { display: none; }
+        #debugPanelHeader { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; font-family: monospace; font-size: 11px; color: var(--fg-dim); border-bottom: 1px solid var(--border); }
+        #debugPanelHeader button { font-family: monospace; font-size: 10px; background: var(--surface); color: var(--surface-fg); border: 1px solid var(--border-strong); border-radius: 3px; padding: 2px 8px; cursor: pointer; }
+        /* Readout beside the log rather than above it: the panel is capped at
+           240px tall, and stacking them would leave the log a few lines. */
+        #debugBody { display: flex; flex: 1; min-height: 0; }
+        #debugLog { flex: 1; overflow-y: auto; padding: 6px 8px; font-family: monospace; font-size: 10px; color: var(--log-fg); white-space: pre-wrap; word-break: break-all; user-select: text; }
+        #debugLog .err { color: var(--log-err); }
+        #debugToggleBtn { position: absolute; bottom: 8px; left: 8px; z-index: 41; font-family: monospace; font-size: 10px; background: var(--surface); color: var(--fg-dim); border: 1px solid var(--border-strong); border-radius: 3px; padding: 2px 8px; cursor: pointer; opacity: 0.6; }
+        #debugToggleBtn:hover { opacity: 1; }
+
+        /* The progress bars are the only motion in the viewer. Someone who has
+           asked the OS for less of it still needs the bar to show progress --
+           so it still moves, it just stops easing there. */
+        @media (prefers-reduced-motion: reduce) {
+            #loadingBarFill, #reloadBarFill { transition: none; }
+        }

package/src/viewer.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="Content-Security-Policy"
+        content="default-src 'none'; style-src 'unsafe-inline'; script-src 'self' 'wasm-unsafe-eval'; worker-src blob:; connect-src 'self';">
+    <title>GDS Lens</title>
+    <style>
+        /* The page harness only. Everything the viewer itself draws is styled
+           inside its shadow root (see viewer.css), which is why there is so
+           little here: a host page cannot reach in, and this cannot leak out. */
+        html, body { margin: 0; padding: 0; height: 100%; background: #1a1a1a; }
+        gds-lens { display: block; width: 100%; height: 100%; }
+    </style>
+</head>
+<body>
+    <gds-lens></gds-lens>
+
+    <!-- Emscripten's output, loaded as a classic script for the
+         createGdstkModule global it defines. -->
+    <script src="gds-lens-engine.js"></script>
+    <!-- The embedder's ViewerHost. Must precede gds-lens.js, which reads
+         window.gdsLensHost as it starts. Defaults to the plain-page host; a
+         host that needs different services replaces this file, or sets
+         window.gdsLensHost itself and omits it. -->
+    <script src="gds-lens-host.js"></script>
+    <script src="gds-lens.js"></script>
+</body>
+</html>