@squinch/core 0.1.0

package/dist/render/html/runtime.js

@@ -0,0 +1,362 @@
+// The viewer that ships inside an exported diagram.
+//
+// This is the one place in the project where we ship JavaScript to a reader.
+// It is a *sibling* of the SVGs, never inside one: every embedded SVG in the
+// document is byte-comparable to `squinch render -o x.svg`, and the entry view
+// is inline in the markup, so a reader whose browser (or wiki sanitizer) drops
+// this script still sees a correct static diagram. That is the whole shape of
+// the exception recorded in CLAUDE.md.
+//
+// It imports `../../view/dive.js` and `../../view/navigate.js` directly and is
+// bundled by `scripts/gen-html-runtime.ts`, which is what makes "the export
+// performs the same motion as the playground" a fact about the build rather
+// than a comment nobody can check.
+import { diveTransforms } from "../../view/dive.js";
+import { hop, upView, viewForPath } from "../../view/navigate.js";
+const $ = (sel) => document.querySelector(sel);
+function boot() {
+    const data = JSON.parse($("#sq-data").textContent || "{}");
+    const live = $("#sq-live");
+    const ghost = $("#sq-ghost");
+    const stage = $("#sq-stage");
+    const reduced = () => matchMedia("(prefers-reduced-motion: reduce)").matches;
+    let view = data.entry;
+    let theme = data.themes[0];
+    let step = 0;
+    let presenting = false;
+    // The reader's own preference wins over the author's, when the file carries
+    // a palette that matches it — the same rule an adaptive SVG follows.
+    if (data.themes.length > 1 && matchMedia("(prefers-color-scheme: dark)").matches) {
+        const dark = data.themes.find((t) => t.includes("dark"));
+        if (dark)
+            theme = dark;
+    }
+    // The entry view is inline rather than in a <template>, so that a reader
+    // whose browser never runs this script still sees a diagram. That means it is
+    // the one body with no template to clone from — captured here at boot, before
+    // anything can replace it, or switching *back* to the entry palette would
+    // silently find nothing.
+    const inlineKey = `${data.entry}|${data.themes[0]}`;
+    const inlineBody = live.firstElementChild?.cloneNode(true) ?? null;
+    /** `step` 0 is the whole flow at once — the authoring frame, and what a view
+     *  without a flow always shows. 1..N are the walked ones. */
+    const bodyFor = (v, th, step = 0) => {
+        const key = step ? `${v}|${th}|${step}` : `${v}|${th}`;
+        if (key === inlineKey)
+            return inlineBody?.cloneNode(true) ?? null;
+        const tpl = document.querySelector(`template[data-key="${CSS.escape(key)}"]`);
+        return tpl ? tpl.content.cloneNode(true) : null;
+    };
+    const scopeOf = (v) => data.views.find((x) => x.name === v)?.scope;
+    const boxOf = (el) => {
+        const r = el.getBoundingClientRect(), s = stage.getBoundingClientRect();
+        return { x: r.left - s.left, y: r.top - s.top, w: r.width, h: r.height };
+    };
+    function paintChrome() {
+        document.title = data.views.find((v) => v.name === view)?.title ?? document.title;
+        // The view tabs are the deck's one navigation surface — every view by
+        // name, the active one on a plate, exactly the SPA's picker. They replaced
+        // both the breadcrumb and the dots: the tabs already name where you are
+        // and where you can go, so two more spellings of the same facts were
+        // chrome without capability.
+        const tabs = document.querySelector("#sq-tabs");
+        if (tabs) {
+            tabs.replaceChildren();
+            for (const v of data.views) {
+                const b = document.createElement("button");
+                b.type = "button";
+                b.className = v.name === view ? "on" : "";
+                b.textContent = v.name;
+                b.title = v.title ?? v.name;
+                b.onclick = () => go(v.name);
+                tabs.append(b);
+            }
+            // keep the active tab reachable when the deck outgrows the bar
+            tabs.querySelector(".on")?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+        }
+        // Mark the cards that actually lead somewhere. Only the runtime can know:
+        // it depends on which views this file carries and which one you are in.
+        // Without it every card wore a zoom cursor and the ones with no view were
+        // a dead click — the bug this whole pass came from.
+        for (const el of live.querySelectorAll("[data-path]")) {
+            const p = el.getAttribute("data-path");
+            el.classList.toggle("sq-zoom", !!(p && viewForPath(data.views, view, p)));
+        }
+        const counter = document.querySelector("#sq-step");
+        const hops = data.flows[view] ?? 0;
+        if (counter)
+            counter.textContent = presenting && hops ? `${step || 1} / ${hops}` : "";
+    }
+    /** Swap the body, then animate the two layers about the card they share.
+     *  The playground splits this in two ("arm, then fire") because compiling the
+     *  next view is async; here every body is already in the document, so the
+     *  swap is synchronous and the whole dance is one function. */
+    function go(target, enterAtEnd = false) {
+        if (!target || target === view)
+            return;
+        // A slide opens on its first hop — unless you reversed into it, in which
+        // case you arrive where you left and can keep unwinding.
+        const want = presenting && data.flows[target] ? (enterAtEnd ? data.flows[target] : 1) : 0;
+        const next = bodyFor(target, theme, want);
+        if (!next)
+            return;
+        step = want;
+        const { dir, anchor: anchorPath } = hop(data.views, view, target);
+        const ghostBox = boxOf(live);
+        const prev = live.firstElementChild;
+        if (reduced() || !prev) {
+            live.replaceChildren(next);
+            view = target;
+            paintChrome();
+            return;
+        }
+        ghost.replaceChildren(prev.cloneNode(true));
+        ghost.style.cssText =
+            `position:absolute;left:${ghostBox.x}px;top:${ghostBox.y}px;` +
+                `width:${ghostBox.w}px;height:${ghostBox.h}px;z-index:1;pointer-events:none`;
+        live.replaceChildren(next);
+        view = target;
+        paintChrome();
+        const liveBox = boxOf(live);
+        // Going down, the shared card is in the layer we just left; coming up it is
+        // in the one that just arrived. Both layers are on screen either way, which
+        // is why one lookup covers both.
+        const from = dir === "in" ? ghost : live;
+        const el = anchorPath ? from.querySelector(`[data-path="${CSS.escape(anchorPath)}"]`) : null;
+        const t = diveTransforms({
+            view: { x: 0, y: 0, w: stage.clientWidth, h: stage.clientHeight },
+            ghostBox, liveBox, anchor: el ? boxOf(el) : undefined, dir,
+        });
+        const g = ghost.style, l = live.style;
+        g.transition = "none";
+        g.transformOrigin = t.gOrigin;
+        g.transform = "none";
+        g.opacity = "1";
+        l.transition = "none";
+        l.transformOrigin = t.lOrigin;
+        l.transform = t.lStart;
+        l.opacity = "0";
+        void live.offsetHeight; // commit the start state before transitioning off it
+        g.transition = `transform ${t.ms}ms ${t.ease}, opacity ${Math.round(t.ms * 0.55)}ms ${t.ease}`;
+        l.transition =
+            `transform ${t.ms}ms ${t.ease}, opacity ${Math.round(t.ms * 0.6)}ms ${t.ease} ${Math.round(t.ms * 0.25)}ms`;
+        g.transform = t.gEnd;
+        g.opacity = "0";
+        l.transform = "none";
+        l.opacity = "1";
+        // Clean up when the dive actually lands, not on a wall-clock guess. The
+        // old timer fired t.ms after the *click*, but the transition cannot start
+        // until the browser paints the swapped-in body — a heavy first layout of
+        // a large view delayed that by hundreds of ms, the timer stripped the
+        // transition mid-flight, and the diagram visibly snapped into place a
+        // beat after the zoom. Watch the observable fact instead of an event:
+        // live's computed transform reads as interpolated matrices while the
+        // transition runs and becomes the literal "none" only when it has truly
+        // finished — one cheap read per frame for under half a second, immune to
+        // the transitionend quirks headless engines showed when this was
+        // event-driven. The timer is only a net for a hidden tab, where rAF
+        // stops; by then the motion is long over and cleanup is invisible.
+        let settled = false;
+        let raf = 0;
+        const settle = () => {
+            if (settled)
+                return;
+            settled = true;
+            cancelAnimationFrame(raf);
+            ghost.replaceChildren();
+            ghost.removeAttribute("style");
+            live.removeAttribute("style");
+        };
+        const watch = () => {
+            if (getComputedStyle(live).transform === "none")
+                settle();
+            else
+                raf = requestAnimationFrame(watch);
+        };
+        raf = requestAnimationFrame(watch);
+        setTimeout(settle, t.ms + 1000);
+    }
+    function setTheme(name) {
+        const body = name === theme ? null : bodyFor(view, name, step);
+        if (!body)
+            return;
+        theme = name;
+        document.documentElement.dataset.theme = name;
+        live.replaceChildren(body);
+    }
+    /** Walking a flow and walking the deck are one axis: keep stepping hops
+     *  until the story runs out, then move to the next view. The playground
+     *  merges them the same way, and for the same reason — one arrow key tells
+     *  the whole story rather than two that each tell half. */
+    function step_(by) {
+        const hops = data.flows[view] ?? 0;
+        const next = step + by;
+        if (hops && next >= 1 && next <= hops) {
+            const body = bodyFor(view, theme, next);
+            if (body) {
+                step = next;
+                live.replaceChildren(body);
+                paintChrome();
+            }
+            return;
+        }
+        const at = data.views.findIndex((v) => v.name === view);
+        const to = data.views[at + by];
+        if (to)
+            go(to.name, by < 0);
+    }
+    live.addEventListener("click", (e) => {
+        const el = e.target.closest?.("[data-path]");
+        const path = el?.getAttribute("data-path");
+        if (path) {
+            const target = viewForPath(data.views, view, path);
+            if (target)
+                return go(target.name);
+        }
+        // clicking the canvas itself climbs, which is the gesture the playground
+        // gives the backdrop
+        if (!path) {
+            const up = upView(data.views, view, scopeOf(view));
+            if (up)
+                go(up);
+        }
+    });
+    const themeBtn = document.querySelector("#sq-theme");
+    if (themeBtn)
+        themeBtn.onclick = () => setTheme(data.themes[(data.themes.indexOf(theme) + 1) % data.themes.length]);
+    /** Full-bleed deck. The declared views in declaration order *are* the slides —
+     *  nothing is authored twice (DESIGN §11). Fullscreen is requested on the
+     *  gesture that turns it on, which is also the only time a browser allows it;
+     *  the playground can ask on mount because entering is already a gesture
+     *  there, but a file opens as a document. */
+    function present(on) {
+        if (on === presenting)
+            return;
+        presenting = on;
+        document.body.classList.toggle("presenting", on);
+        if (on) {
+            document.documentElement.requestFullscreen?.().catch(() => { });
+            const hops = data.flows[view] ?? 0;
+            if (hops && !step) {
+                const body = bodyFor(view, theme, 1);
+                if (body) {
+                    step = 1;
+                    live.replaceChildren(body);
+                }
+            }
+        }
+        else {
+            if (document.fullscreenElement)
+                document.exitFullscreen?.().catch(() => { });
+            if (step) {
+                const body = bodyFor(view, theme, 0);
+                if (body) {
+                    step = 0;
+                    live.replaceChildren(body);
+                }
+            }
+        }
+        paintChrome();
+    }
+    // Chrome gets out of the way while nothing is happening, and comes back on
+    // the first movement — a deck that keeps its furniture on screen is a
+    // screenshot of an app, not a presentation.
+    let idle;
+    const wake = () => {
+        document.body.classList.remove("idle");
+        clearTimeout(idle);
+        if (presenting)
+            idle = setTimeout(() => document.body.classList.add("idle"), 3500);
+    };
+    addEventListener("mousemove", wake);
+    addEventListener("keydown", wake);
+    const cycleTheme = () => setTheme(data.themes[(data.themes.indexOf(theme) + 1) % data.themes.length]);
+    addEventListener("keydown", (e) => {
+        if (e.metaKey || e.ctrlKey || e.altKey)
+            return;
+        switch (e.key) {
+            case "ArrowRight":
+            case "PageDown":
+            case " ":
+            case "Enter":
+                e.preventDefault();
+                step_(1);
+                break;
+            case "ArrowLeft":
+            case "PageUp":
+                e.preventDefault();
+                step_(-1);
+                break;
+            // climbing an altitude is a *different* move from stepping the deck, and
+            // gets its own keys
+            case "ArrowUp":
+            case "Backspace": {
+                const up = upView(data.views, view, scopeOf(view));
+                if (up) {
+                    e.preventDefault();
+                    go(up);
+                }
+                break;
+            }
+            case "Home":
+                e.preventDefault();
+                go(data.views[0].name);
+                break;
+            case "End":
+                e.preventDefault();
+                go(data.views[data.views.length - 1].name, true);
+                break;
+            case "Escape":
+                if (presenting) {
+                    e.preventDefault();
+                    present(false);
+                }
+                break;
+            case "p":
+            case "P":
+                present(!presenting);
+                break;
+            case "f":
+            case "F":
+                if (document.fullscreenElement)
+                    document.exitFullscreen?.().catch(() => { });
+                else
+                    document.documentElement.requestFullscreen?.().catch(() => { });
+                break;
+            case "t":
+            case "T":
+                if (data.themes.length > 1)
+                    cycleTheme();
+                break;
+        }
+    });
+    // leaving fullscreen by the browser's own affordance should leave the deck
+    addEventListener("fullscreenchange", () => {
+        if (!document.fullscreenElement && presenting)
+            present(false);
+    });
+    const presentBtn = document.querySelector("#sq-present");
+    if (presentBtn)
+        presentBtn.onclick = () => present(!presenting);
+    // A deep link opens on that view — what makes the file shareable by more than
+    // its filename. Kept in sync so the reader's back button and a copied URL
+    // both do what they look like they do.
+    const fromHash = () => {
+        const want = decodeURIComponent(location.hash.slice(1));
+        if (want && want !== view && data.views.some((v) => v.name === want))
+            go(want);
+    };
+    addEventListener("hashchange", fromHash);
+    document.documentElement.dataset.theme = theme;
+    if (theme !== data.themes[0]) {
+        const body = bodyFor(view, theme);
+        if (body)
+            live.replaceChildren(body);
+    }
+    paintChrome();
+    fromHash();
+}
+if (document.readyState === "loading")
+    addEventListener("DOMContentLoaded", boot);
+else
+    boot();

package/dist/render/html.d.ts

@@ -0,0 +1,39 @@
+import { type ProjectFile } from "../model/build.js";
+import type { Diagnostic } from "../model/types.js";
+export interface HTMLExportOpts {
+    /** Which view opens. Default: the first declared one. */
+    view?: string;
+    /** Palettes to bundle; the first is the entry. Default: the project's theme
+     *  and its `pairsWith` counterpart, so the file follows the reader's OS. */
+    themes?: string[];
+    /** `all` (default) includes the auto view every container gets, so every card
+     *  that zooms in the playground zooms here too. `declared` trims it to the
+     *  views an author wrote, which is smaller but leaves any container without
+     *  one as a dead card — it was the default until a `Storefront` card in
+     *  `examples/microservices` did nothing when clicked, because it is the one
+     *  system there with no declared view of its own. `--sync` makes the opposite
+     *  call for a good reason that does not apply here: an auto view costs it a
+     *  *file* nobody asked for, where it costs this a few KB. */
+    views?: "declared" | "all";
+    /** Document title. Default: the entry view's title, or the project name. */
+    title?: string;
+    /** Pre-render one frame per hop of a `show flow`, so presentation mode can
+     *  walk the story. Default true; only views that declare a flow cost
+     *  anything, and a frame is the same 3–9 KB as any other body. */
+    flowSteps?: boolean;
+}
+export interface HTMLExportResult {
+    html?: string;
+    diagnostics: Diagnostic[];
+    ok: boolean;
+    /** What went in — the CLI prints it, the tests assert on it. */
+    manifest: {
+        views: string[];
+        themes: string[];
+        renders: number;
+        bytes: number;
+        /** view name → hops that render at that altitude, for the ones with a flow */
+        flows: Record<string, number>;
+    };
+}
+export declare function exportHTML(files: ProjectFile[], opts?: HTMLExportOpts): Promise<HTMLExportResult>;

package/dist/render/html.js

@@ -0,0 +1,235 @@
+// One self-contained HTML file carrying every view of a project, and a viewer
+// that dives between them.
+//
+// Squinch's whole idea is that views are altitudes over one model and that
+// moving between them is navigation (DESIGN §11). Until this, that experience
+// existed only in the playground: everything you could hand someone else — an
+// SVG, a PNG, an adaptive pair — was one frozen altitude. This is the artifact
+// that travels.
+//
+// THE EXCEPTION, STATED. CLAUDE.md's rule is that an exported *SVG* never
+// contains JS. That still holds without qualification, including for the SVGs
+// in here: each one is what `render -o x.svg` produces (minus the defs this
+// document shares), and the script is their sibling, never their content. The
+// entry view is inline rather than in a <template>, so a reader whose browser
+// or wiki sanitizer drops the script still gets a correct static diagram.
+//
+// WHY IT IS SMALL. Every view repeats the same two things: ~33 KB of base64
+// font and 17–27 KB of icon <symbol>s. Fragment references resolve
+// document-wide in HTML, so one definition serves all of them — `collectDefs`
+// hands them out instead of emitting them, and they land once in a hidden
+// sprite. Measured on `examples/microservices`: six views go from 362 KB
+// concatenated to ~105 KB. The actual drawing is 3–9 KB per view, which is the
+// right shape for the file to have.
+import { buildProject } from "../model/build.js";
+import { themes } from "../themes/index.js";
+import { fontFaceCSS, allFaces } from "./svg.js";
+import { RUNTIME_JS } from "./html/runtime.generated.js";
+const EMPTY = { views: [], themes: [], renders: 0, bytes: 0, flows: {} };
+/** `</script>` inside a JSON island would end the island. Escaping the `<`
+ *  keeps the payload inert wherever it lands. */
+const jsonIsland = (v) => JSON.stringify(v).replace(/</g, "\\u003c");
+const attr = (s) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+const text = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;");
+export async function exportHTML(files, opts = {}) {
+    // imported lazily: html.ts is part of the render layer and api.ts imports it,
+    // so taking renderProject the other way round would be a cycle
+    const { renderProject } = await import("../api.js");
+    const built = buildProject(files);
+    if (!built.ok)
+        return { diagnostics: built.diagnostics, ok: false, manifest: EMPTY };
+    const all = built.model.views;
+    const list = (opts.views === "declared" ? all.filter((v) => !v.auto) : all).map((v) => ({ name: v.name, scope: v.scope, title: v.title, auto: v.auto }));
+    if (!list.length)
+        return {
+            diagnostics: [...built.diagnostics, {
+                    severity: "error",
+                    message: "nothing to export — this project declares no views",
+                    fix: "add a `view` block, or pass views: \"all\" to include the automatic ones",
+                    loc: { from: 0, to: 0, line: 1, col: 1 },
+                }],
+            ok: false,
+            manifest: EMPTY,
+        };
+    const entry = opts.view ?? list[0].name;
+    if (!list.some((v) => v.name === entry))
+        return {
+            diagnostics: [...built.diagnostics, {
+                    severity: "error",
+                    message: `unknown view \`${entry}\``,
+                    fix: `views in this export: ${list.map((v) => v.name).join(", ")}`,
+                    loc: { from: 0, to: 0, line: 1, col: 1 },
+                }],
+            ok: false,
+            manifest: EMPTY,
+        };
+    // A document has one palette at a time and a button to change it, so the
+    // theme is the document's rather than each view's — a per-view `theme` is
+    // deliberately overridden here, the way `--theme` overrides it elsewhere.
+    const base = opts.themes?.[0] ?? built.model.fileTheme ?? "light";
+    const palette = opts.themes ?? [base, themes[base]?.pairsWith].filter(Boolean);
+    for (const name of palette)
+        if (!themes[name])
+            return {
+                diagnostics: [...built.diagnostics, {
+                        severity: "error",
+                        message: `unknown theme \`${name}\``,
+                        fix: `available: ${Object.keys(themes).join(", ")}`,
+                        loc: { from: 0, to: 0, line: 1, col: 1 },
+                    }],
+                ok: false,
+                manifest: EMPTY,
+            };
+    const defs = new Map();
+    const bodies = new Map();
+    const flows = {};
+    const diagnostics = [...built.diagnostics];
+    const draw = async (view, th, flowStep) => {
+        const r = await renderProject(files, {
+            view, theme: th, embedFonts: false, collectDefs: defs,
+            // the one theme-dependent def (`sq-hatch`) needs a distinct id per
+            // palette, or a dark view would draw with the light texture
+            defsScope: `-${th}`,
+            ...(flowStep === undefined ? {} : { flowStep }),
+        });
+        diagnostics.push(...r.diagnostics.filter((d) => d.severity === "error"));
+        return r;
+    };
+    for (const th of palette)
+        for (const v of list) {
+            // the whole flow at once is the authoring frame, and the one the file
+            // opens on; the walked frames are extra
+            const r = await draw(v.name, th);
+            if (!r.ok || !r.svg)
+                return { diagnostics, ok: false, manifest: EMPTY };
+            bodies.set(`${v.name}|${th}`, r.svg.trim());
+            // `flow.steps` counts hops that render *at this altitude*, which is
+            // exactly the number of frames a presenter can reach
+            if (!r.flow || opts.flowSteps === false)
+                continue;
+            flows[v.name] = r.flow.steps;
+            for (let step = 1; step <= r.flow.steps; step++) {
+                const f = await draw(v.name, th, step);
+                if (!f.ok || !f.svg)
+                    return { diagnostics, ok: false, manifest: EMPTY };
+                bodies.set(`${v.name}|${th}|${step}`, f.svg.trim());
+            }
+        }
+    // Every face, not the union of what these views happened to draw: the
+    // viewer swaps views (and palettes) client-side from bodies it already
+    // holds, so a set trimmed to the entry view would leave a later one's title
+    // block falling back to a face with different metrics.
+    const fonts = [...new Set(palette.map((n) => fontFaceCSS(themes[n], allFaces())))].join("");
+    const sprite = [...defs.keys()].sort().map((k) => defs.get(k)).join("");
+    const title = opts.title ?? list.find((v) => v.name === entry)?.title ?? files[0]?.name.replace(/\.squinch$/, "") ?? "diagram";
+    const html = document({
+        title,
+        fonts,
+        sprite,
+        palette: palette.map((n) => themes[n]),
+        entry,
+        entryBody: bodies.get(`${entry}|${palette[0]}`),
+        bodies,
+        views: list,
+        flows,
+    });
+    return {
+        html,
+        diagnostics,
+        ok: true,
+        manifest: {
+            views: list.map((v) => v.name),
+            themes: palette,
+            renders: bodies.size,
+            bytes: html.length,
+            flows,
+        },
+    };
+}
+function document(a) {
+    // chrome colours come from the same theme tokens the diagram draws with, so
+    // the frame around a dark diagram is dark (DESIGN §10)
+    const vars = (t, sel) => `${sel}{--sq-canvas:${t.canvas};--sq-ink:${t.ink};--sq-muted:${t.muted};--sq-border:${t.border};--sq-surface:${t.surface}}`;
+    const themeVars = a.palette
+        .map((t, i) => vars(t, i === 0 ? ":root,:root[data-theme=\"" + t.name + "\"]" : `:root[data-theme="${t.name}"]`))
+        .join("");
+    const L = [];
+    L.push("<!doctype html>");
+    L.push(`<html lang="en" data-theme="${attr(a.palette[0].name)}">`);
+    L.push("<head>");
+    L.push('<meta charset="utf-8">');
+    L.push('<meta name="viewport" content="width=device-width,initial-scale=1">');
+    L.push(`<title>${text(a.title)}</title>`);
+    L.push(`<style>${a.fonts}${themeVars}${CHROME_CSS}</style>`);
+    L.push("</head>");
+    L.push("<body>");
+    // never display:none — some engines stop resolving <use> into a hidden tree
+    L.push(`<svg id="sq-defs" aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden">` +
+        `<defs>${a.sprite}</defs></svg>`);
+    // No breadcrumb: the view tabs in the footer name where you are and where
+    // you can go, so the header keeps only the document-level controls.
+    L.push('<header id="sq-bar"><span id="sq-step"></span>' +
+        (a.palette.length > 1 ? '<button id="sq-theme" type="button" title="Change palette (t)">◐</button>' : "") +
+        (a.views.length > 1 ? '<button id="sq-present" type="button" title="Present (p)">Present</button>' : "") +
+        "</header>");
+    L.push('<main id="sq-stage"><div id="sq-ghost" aria-hidden="true"></div><div id="sq-live">');
+    L.push(a.entryBody);
+    L.push("</div></main>");
+    if (a.views.length > 1)
+        L.push('<footer id="sq-foot"><nav id="sq-tabs" aria-label="Views"></nav></footer>');
+    for (const [key, svg] of a.bodies) {
+        if (key === `${a.entry}|${a.palette[0].name}`)
+            continue; // already inline
+        L.push(`<template data-key="${attr(key)}">${svg}</template>`);
+    }
+    L.push(`<script type="application/json" id="sq-data">` +
+        jsonIsland({
+            views: a.views, entry: a.entry, themes: a.palette.map((t) => t.name), flows: a.flows,
+        }) +
+        `</script>`);
+    L.push(`<script>${RUNTIME_JS}</script>`);
+    L.push("</body>");
+    L.push("</html>");
+    return L.join("\n") + "\n";
+}
+const CHROME_CSS = "*{box-sizing:border-box}" +
+    "body{margin:0;background:var(--sq-canvas);color:var(--sq-ink);" +
+    "font:13px/1.5 system-ui,-apple-system,sans-serif;height:100vh;display:flex;flex-direction:column}" +
+    "#sq-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:10px 16px;flex:none}" +
+    "#sq-theme{font:inherit;background:var(--sq-surface);color:var(--sq-muted);cursor:pointer;" +
+    "border:1px solid var(--sq-border);border-radius:6px;padding:2px 8px;flex:none}" +
+    "#sq-stage{position:relative;flex:1;min-height:0;overflow:auto;display:grid;place-items:center}" +
+    // out of flow ALWAYS, not just while a dive's inline styles are on it. As a
+    // grid child the empty ghost owned a row, and default align-content:normal
+    // stretches auto rows — so the moment cleanup returned it to flow, the live
+    // layer's row moved down and the whole diagram jumped a beat after the
+    // zoom landed. The dive sets left/top/size inline per flight; this base
+    // rule is what holds between flights.
+    "#sq-ghost{position:absolute;left:0;top:0;pointer-events:none}" +
+    "#sq-live svg,#sq-ghost svg{max-width:100%;height:auto;display:block}" +
+    // a card that leads somewhere says so — and only one that does. The class is
+    // applied by the runtime, which is the only thing that knows whether a path
+    // resolves to a view; styling every card invited a click that did nothing.
+    "#sq-live .sq-zoom{cursor:zoom-in}" +
+    "#sq-step{color:var(--sq-muted);font-variant-numeric:tabular-nums;flex:none}" +
+    "#sq-present{font:inherit;background:var(--sq-surface);color:var(--sq-muted);cursor:pointer;" +
+    "border:1px solid var(--sq-border);border-radius:6px;padding:2px 10px;flex:none}" +
+    "#sq-foot{display:flex;justify-content:center;padding:10px;flex:none;min-width:0}" +
+    // the SPA's view picker, verbatim in spirit: a quiet bar of view names, the
+    // active one on a plate. Scrolls sideways rather than wrapping when a deck
+    // outgrows it — a two-row bar reads as two bars.
+    "#sq-tabs{display:flex;gap:2px;padding:3px;max-width:calc(100% - 16px);overflow-x:auto;" +
+    "border:1px solid var(--sq-border);border-radius:8px;background:var(--sq-surface)}" +
+    "#sq-tabs button{font:inherit;font-size:12px;white-space:nowrap;padding:3px 10px;border-radius:5px;" +
+    "border:0;background:none;color:var(--sq-muted);cursor:pointer}" +
+    "#sq-tabs button:hover{color:var(--sq-ink)}" +
+    "#sq-tabs button.on{background:var(--sq-canvas);color:var(--sq-ink);" +
+    "box-shadow:inset 0 0 0 1px var(--sq-border)}" +
+    // presenting: full bleed, chrome floats over the canvas and fades when idle
+    "body.presenting #sq-bar,body.presenting #sq-foot{position:fixed;left:0;right:0;z-index:2;" +
+    "transition:opacity .3s;background:transparent}" +
+    "body.presenting #sq-bar{top:0}body.presenting #sq-foot{bottom:0}" +
+    "body.presenting #sq-stage{padding:0}" +
+    "body.presenting.idle #sq-bar,body.presenting.idle #sq-foot{opacity:0;pointer-events:none}" +
+    "body.presenting.idle{cursor:none}" +
+    "@media (prefers-reduced-motion:reduce){#sq-live,#sq-ghost{transition:none!important}}";