waygraph 0.16.0 → 0.16.1

package/dist/demo/stepper/demo-log.d.ts

@@ -1,5 +1,21 @@
-export declare function demoPaceKind(pace: any): "normal" | "blitz" | "fast" | "slow" | "ms" | "num-slow";
-export declare function paceSpeakFields(pace: any, baseAutoplayMs: any): {
+import type { StubPhaseResult } from "../../engine/stub/stub.js";
+import type { TodoDockState } from "../../engine/stub/todos.js";
+import type { DeviceState } from "../../engine/stub/viewport.js";
+/** What a HIGHLIGHT log line shows: a ring as painted (no selector for a narrated caption). Logged, not checked. */
+type LoggedHighlight = {
+    selector?: string | null | undefined;
+    label?: string | undefined;
+    tone?: string | undefined;
+    color?: string | undefined;
+    focus?: boolean | undefined;
+    zoom?: number | undefined;
+    zoomOut?: boolean | undefined;
+    gesture?: string | undefined;
+    weight?: string | undefined;
+    size?: string | undefined;
+};
+export declare function demoPaceKind(pace: unknown): string;
+export declare function paceSpeakFields(pace: unknown, baseAutoplayMs: number | undefined): {
     pace: import("../../index.js").DemoPace;
     paceBadge: string;
     paceLabel: string;
@@ -19,13 +35,14 @@ export declare const ANSI: {
     magenta: string;
     white: string;
 };
-export declare function ansiPaint(code: any, text: any): string;
-export declare function demoLog(msg: any): void;
+export declare function ansiPaint(code: string, text: unknown): string;
+export declare function demoLog(msg: string): void;
 /** Fixture catch-all: how it was called + value. */
-export declare function demoFixture(kind: any, call: any, value: any): void;
+export declare function demoFixture(kind: string, call: string, value?: unknown): void;
 /** Highlight trigger line: PURPLE · Cart items - Product landed in cart */
-export declare function demoHighlight(h: any, extra: any): void;
-export declare function logStubPhaseFixtures(phaseName: any, phase: any): void;
+export declare function demoHighlight(h: LoggedHighlight | null | undefined, extra?: string): void;
+export declare function logStubPhaseFixtures(phaseName: string, phase: StubPhaseResult | null | undefined): void;
 /** Full todo dump for agents (every group/item id + flags). */
-export declare function logTodoDockFull(dock: any, tag: any): void;
-export declare function summarizeDevice(d: any): string;
+export declare function logTodoDockFull(dock: TodoDockState | null | undefined, tag?: string): void;
+export declare function summarizeDevice(d: DeviceState | null | undefined): string;
+export {};

package/dist/demo/stepper/demo-log.js

@@ -14,7 +14,7 @@ export function demoPaceKind(pace) {
 }
 export function paceSpeakFields(pace, baseAutoplayMs) {
     const p = normalizeDemoPace(pace);
-    const base = Number.isFinite(baseAutoplayMs) && baseAutoplayMs > 0 ? baseAutoplayMs : 1800;
+    const base = baseAutoplayMs !== undefined && Number.isFinite(baseAutoplayMs) && baseAutoplayMs > 0 ? baseAutoplayMs : 1800;
     return {
         pace: p,
         paceBadge: formatDemoPaceBadge(p, base),
@@ -207,12 +207,10 @@ export function logStubPhaseFixtures(phaseName, phase) {
             }
             : phase.todoSync);
     }
-    const rings = phase.highlights || [];
-    for (let i = 0; i < rings.length; i++) {
-        const h = rings[i];
+    phase.highlights.forEach((h, i) => {
         demoFixture(tag, "ctx.ring/highlights[" + i + "]", {
             selector: h.selector,
-            label: h.label || h.caption,
+            label: h.label,
             detail: h.detail,
             tone: h.tone || "planned",
             color: h.color,
@@ -222,10 +220,7 @@ export function logStubPhaseFixtures(phaseName, phase) {
             gesture: h.gesture,
             duration: h.duration,
         });
-    }
-    if (phase.slides && phase.slides.length) {
-        demoFixture(tag, "ctx.slides(...)", { n: phase.slides.length });
-    }
+    });
 }
 function summarizeTodoDock(dock) {
     if (!dock)
@@ -267,8 +262,7 @@ export function logTodoDockFull(dock, tag) {
         demoLog(prefix + "  (no groups)");
         return;
     }
-    for (let gi = 0; gi < groups.length; gi++) {
-        const g = groups[gi];
+    groups.forEach((g, gi) => {
         const gLabel = "group[" +
             gi +
             "]" +
@@ -276,22 +270,11 @@ export function logTodoDockFull(dock, tag) {
             (g.title ? ' title="' + String(g.title).slice(0, 40) + '"' : "") +
             (g.style ? " style=" + g.style : "");
         demoLog(prefix + "  " + gLabel);
-        const items = g.items || [];
-        for (let ti = 0; ti < items.length; ti++) {
-            const t = items[ti];
+        (g.items || []).forEach((t, ti) => {
             const mark = t.done ? "done" : t.current ? "CURRENT" : "pending";
-            demoLog(prefix +
-                "    [" +
-                ti +
-                "] " +
-                mark +
-                (t.id ? " id=" + t.id : "") +
-                ' text="' +
-                String(t.text || "").slice(0, 80) +
-                '"' +
-                (t.detail ? ' detail="' + String(t.detail).slice(0, 40) + '"' : ""));
-        }
-    }
+            demoLog(prefix + "    [" + ti + "] " + mark + (t.id ? " id=" + t.id : "") + ' text="' + String(t.text || "").slice(0, 80) + '"');
+        });
+    });
 }
 export function summarizeDevice(d) {
     if (!d)

package/dist/demo/stepper/interaction-patch.d.ts

@@ -1,3 +1,4 @@
-import type { WgPage } from "../types.js";
+import type { StepperRefs, WgPage } from "../types.js";
+import type { Pacing } from "./pacing.js";
 import type { MemPage } from "../../engine/mem/mem.js";
-export declare function instrumentInteractionHighlighting(page: WgPage, mem: MemPage, slowMo: number, pacing: any, stubBeforeRef: any, todoDockRef: any, deviceRef: any): void;
+export declare function instrumentInteractionHighlighting(page: WgPage, mem: MemPage, slowMo: number, pacing: Pacing, stubBeforeRef: StepperRefs["stubBefore"], todoDockRef: StepperRefs["todoDock"], deviceRef: StepperRefs["device"]): void;

package/dist/demo/stepper/interaction-patch.js

@@ -70,7 +70,7 @@ export function instrumentInteractionHighlighting(page, mem, slowMo, pacing, stu
     const memTrack = { lastKeyName: null, at: 0 };
     const originalGet = mem.get.bind(mem);
     mem.get = (key) => {
-        memTrack.lastKeyName = key && key.name;
+        memTrack.lastKeyName = key.name;
         memTrack.at = Date.now();
         return originalGet(key);
     };
@@ -126,22 +126,22 @@ export function instrumentInteractionHighlighting(page, mem, slowMo, pacing, stu
                     await applyHighlightZoom(page, stub.selector, stub.zoom, stub.zoomOut);
                 }
                 demoHighlight({
-                    selector: stub && stub.selector,
+                    selector: stub?.selector,
                     label: cap.label,
-                    tone: cap.tone || (stub && stub.tone) || "planned",
-                    color: stub && stub.color,
-                    focus: !!(stub && stub.focus),
-                    zoom: stub && stub.zoom,
-                    zoomOut: stub && stub.zoomOut,
-                    gesture: stub && stub.gesture,
+                    tone: cap.tone || (stub?.tone) || "planned",
+                    color: stub?.color,
+                    focus: !!(stub?.focus),
+                    zoom: stub?.zoom,
+                    zoomOut: stub?.zoomOut,
+                    gesture: stub?.gesture,
                     weight: cap.weight,
                     size: cap.size,
                 }, "fill");
                 await showRing(page, box, cap.label, cap.tone, {
                     size: cap.size,
                     weight: cap.weight,
-                    selector: stub && stub.selector ? stub.selector : undefined,
-                    focus: !!(stub && stub.focus),
+                    selector: stub?.selector,
+                    focus: !!(stub?.focus),
                 });
                 await dwellMatchedStub(page, locator, stubs, pacing);
                 await new Promise((res) => setTimeout(res, skipTheater() ? 0 : 200));
@@ -218,22 +218,22 @@ export function instrumentInteractionHighlighting(page, mem, slowMo, pacing, stu
                     await applyHighlightZoom(page, stub.selector, stub.zoom, stub.zoomOut);
                 }
                 demoHighlight({
-                    selector: stub && stub.selector,
+                    selector: stub?.selector,
                     label: cap.label,
-                    tone: cap.tone || (stub && stub.tone) || "planned",
-                    color: stub && stub.color,
-                    focus: !!(stub && stub.focus),
-                    zoom: stub && stub.zoom,
-                    zoomOut: stub && stub.zoomOut,
-                    gesture: stub && stub.gesture,
+                    tone: cap.tone || (stub?.tone) || "planned",
+                    color: stub?.color,
+                    focus: !!(stub?.focus),
+                    zoom: stub?.zoom,
+                    zoomOut: stub?.zoomOut,
+                    gesture: stub?.gesture,
                     weight: cap.weight,
                     size: cap.size,
                 }, "click");
                 await showRing(page, box, cap.label, cap.tone, {
                     size: cap.size,
                     weight: cap.weight,
-                    selector: stub && stub.selector ? stub.selector : undefined,
-                    focus: !!(stub && stub.focus),
+                    selector: stub?.selector,
+                    focus: !!(stub?.focus),
                 });
                 await dwellMatchedStub(page, locator, stubs, pacing);
                 // "pop for a few seconds" - the user's own phrase, matching the

package/dist/demo/stepper/panel-after.d.ts

@@ -0,0 +1,17 @@
+import type { Checkpoint } from "../../engine/checkpoint/checkpoint.js";
+import type { DemoPace } from "../../engine/stub/pace.js";
+import type { ResolvedHighlight } from "../../engine/stub/ring.js";
+import type { TodoDockState } from "../../engine/stub/todos.js";
+import type { Ref, WgPage } from "../types.js";
+import { type PanelTodos, type StepPanelInfo } from "./step-panels.js";
+/** The panel after a step: the Checkpoint it resolved to, the rings to cycle, and whether it was the last step. */
+export interface AfterPanelInfo extends StepPanelInfo, PanelTodos {
+    result: Checkpoint<string>;
+    resultTag: string;
+    highlights: readonly ResolvedHighlight[];
+    gatesFast?: boolean | undefined;
+    isLast: boolean;
+    pace?: DemoPace | undefined;
+    todoDockRef?: Ref<TodoDockState | undefined> | undefined;
+}
+export declare function renderAfterStep(page: WgPage, info: AfterPanelInfo): Promise<void>;

package/dist/demo/stepper/panel-after.js

@@ -0,0 +1,166 @@
+// The demo panel after a step: what it resolved to (pretty / JSON), its rings, and the Next gate.
+import { ignorePageGone } from "../../engine/page-gone.js";
+import { installOverlay } from "../overlay/overlay.js";
+import { cycleHighlightRings } from "../overlay/rings.js";
+import { miniStepLabel } from "./step-panels.js";
+export async function renderAfterStep(page, info) {
+    await installOverlay(page, info.title, info.bannerUi, info.caption, info.networkTabVisible);
+    // Clear any tracker from a previous highlight before cycling through this
+    // step's own.
+    await page
+        .evaluate(() => {
+        if (window.__wgRingTrack) {
+            window.removeEventListener("resize", window.__wgRingTrack);
+            window.removeEventListener("scroll", window.__wgRingTrack, true);
+            window.__wgRingTrack = null;
+        }
+    })
+        .catch(ignorePageGone);
+    const highlights = info.highlights || [];
+    const gatesFast = !!info.gatesFast;
+    // Cycle through EVERY declared/recovered highlight in order, each shown
+    // long enough to actually register - "it highlights something [...] then
+    // it highlights something [else] and next," not just the first one.
+    // duration / fastMode on stubAfter (or flow fixtures) override the default
+    // 900ms / 200ms holds when set.
+    await cycleHighlightRings(page, highlights, gatesFast, {
+        pace: info.pace,
+        stepLabel: miniStepLabel(info),
+        todoDock: info.todoDock,
+        todos: info.todos,
+        todoSync: info.todoSync,
+        todoDockRef: info.todoDockRef,
+        // stubAfter already authored progress - do not re-index by ring 0..n
+        advanceTodos: false,
+    });
+    // After-ring advances may have moved the dock - surface latest for caller.
+    if (info.todoDockRef && info.todoDockRef.current) {
+        info.todoDock = info.todoDockRef.current;
+    }
+    const afterPayload = { ...info, stepLabel: miniStepLabel(info) };
+    await page
+        .evaluate((info) => {
+        // Reused in place - see renderBeforeStep's own comment on this.
+        let panel = __wgById("wg-panel");
+        const isNewPanel = !panel;
+        if (!panel) {
+            panel = document.createElement("div");
+            panel.id = "wg-panel";
+        }
+        const pct = Math.round(((info.index + 1) / info.total) * 100);
+        const heading = info.isLast
+            ? "End of chain - " + info.total + " / " + info.total + " blocks covered - " + info.blockName + " done"
+            : "Step " + (info.index + 1) + " / " + info.total + " - " + info.blockName + " done";
+        const buttonLabel = info.isLast ? "Finish" : "Next \u25B6";
+        const modulesClass = info.stepperMode === "full" ? "wg-modules-full" : "wg-modules-carousel";
+        const modules = info.allNames.map((name, idx) => {
+            const cls = idx <= info.moduleIndex ? "wg-mod-done" : "wg-mod-upcoming";
+            const desc = info.allDescriptions && info.allDescriptions[idx];
+            return __wgEl("span", { class: "wg-mod " + cls, title: desc || undefined }, String(name));
+        });
+        // QA-friendly by default ("LoginSuccess" -> "Login Success") - raw
+        // JSON is one click away for whoever actually wants __state.
+        const stateTag = info.result && info.result.__state ? info.result.__state : "";
+        const prettyText = stateTag
+            .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+            .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2") || info.resultTag;
+        const pretty = window.__wgPretty !== false;
+        let autoNow = false;
+        try {
+            autoNow = localStorage.getItem("wg-autoplay") === "1";
+        }
+        catch {
+            /* private mode / blocked storage - defaults to manual */
+        }
+        const autoplay = __wgEl("input", { id: "wg-autoplay-cb", attrs: { type: "checkbox" } });
+        autoplay.checked = autoNow;
+        const episodes = info.allEpisodes && info.allEpisodes.length > 0
+            ? __wgEl("div", { id: "wg-episodes" }, info.allEpisodes.map((e) => {
+                const cls = e.episodeNumber < (info.episodeNumber ?? 0) ? "wg-ep-done"
+                    : e.episodeNumber === info.episodeNumber ? "wg-ep-current"
+                        : "wg-ep-upcoming";
+                return __wgEl("span", { class: "wg-ep-tab " + cls }, "Episode " + e.episodeNumber + ": " + (e.episodeTitle || ""));
+            }))
+            : null;
+        const pace = info.paceBadge || info.paceLabel
+            ? __wgEl("div", { class: "wg-pace", data: { paceKind: info.paceKind || "normal" } }, __wgEl("span", { class: "wg-pace-badge" }, info.paceBadge || "1x"), __wgEl("span", null, info.paceLabel || ""))
+            : null;
+        // Todos float in #wg-todo-dock via __wgSyncTodos, never in the panel.
+        __wgSet(panel, __wgEl("div", { id: "wg-progress" }, __wgEl("div", { id: "wg-progress-bar", style: "width:" + pct + "%" })), episodes, pace, __wgEl("div", { id: "wg-modules", class: modulesClass }, modules), __wgEl("h3", null, heading), __wgEl("div", { class: "wg-toggle" }, __wgEl("button", { class: "wg-toggle-btn" + (pretty ? " wg-active" : ""), data: { mode: "pretty" } }, "Pretty"), __wgEl("button", { class: "wg-toggle-btn" + (pretty ? "" : " wg-active"), data: { mode: "json" } }, "JSON")), __wgEl("div", { class: "wg-result wg-result-pretty", style: "display:" + (pretty ? "block" : "none") }, String(prettyText)), __wgEl("div", { class: "wg-result wg-result-json", style: "display:" + (pretty ? "none" : "block") }, String(info.resultTag)), __wgEl("div", { class: "wg-autoplay-row" }, __wgEl("label", null, autoplay, " Auto-advance")), __wgEl("div", { id: "wg-gate-manual", style: autoNow ? "display:none" : "" }, __wgEl("button", { id: "wg-run" }, buttonLabel)), __wgEl("div", { id: "wg-gate-auto", class: "wg-auto", style: autoNow ? "" : "display:none" }, "Auto-advancing..."));
+        if (isNewPanel) {
+            __wgAdd(panel);
+            requestAnimationFrame(() => panel.classList.add("wg-in"));
+        }
+        else {
+            panel.classList.add("wg-in");
+        }
+        if (window.__wgWirePanelChrome) {
+            window.__wgWirePanelChrome(panel, "wg-panel-hidden", "waygraph demo", {
+                stepLabel: info.stepLabel || "",
+                forceCollapsed: info.forceCollapsed === true ? true : undefined,
+                fastForward: !!info.fastForward,
+                isApi: !!info.isApi,
+            });
+        }
+        if (window.__wgSyncTodos) {
+            const sync = info.todoSync || (info.todos && info.todos.length ? "set" : "keep");
+            // Prefer dock-only payload. Passing list:[] with a dock used to clear
+            // marks a frame later (empty-list clear path).
+            if (sync === "keep" && !info.todoDock) {
+                /* leave floating dock alone */
+            }
+            else {
+                const payload = {
+                    sync: sync,
+                    dock: info.todoDock || null,
+                    pos: info.todoPos || null,
+                    todoId: info.todoId || (info.todoDock && info.todoDock.id) || null,
+                };
+                if (!info.todoDock && info.todos && info.todos.length) {
+                    payload.list = info.todos;
+                }
+                window.__wgSyncTodos(payload);
+            }
+        }
+        if (window.__wgStampModal) {
+            window.__wgStampModal(panel, "panel", {
+                phase: "after",
+                step: info.index + 1,
+                total: info.total,
+                block: info.blockName || "",
+                ready: true,
+            });
+        }
+        panel.querySelectorAll(".wg-toggle-btn").forEach((btn) => {
+            btn.addEventListener("click", () => {
+                const wantPretty = btn.getAttribute("data-mode") === "pretty";
+                window.__wgPretty = wantPretty;
+                panel.querySelectorAll(".wg-toggle-btn").forEach((b) => b.classList.remove("wg-active"));
+                btn.classList.add("wg-active");
+                panel.querySelector(".wg-result-pretty").style.display = wantPretty ? "block" : "none";
+                panel.querySelector(".wg-result-json").style.display = wantPretty ? "none" : "block";
+            });
+        });
+        const runBtn = __wgById("wg-run");
+        if (runBtn)
+            runBtn.addEventListener("click", () => window.__wgNext({}));
+        const cb = __wgById("wg-autoplay-cb");
+        if (cb) {
+            cb.addEventListener("change", () => {
+                try {
+                    localStorage.setItem("wg-autoplay", cb.checked ? "1" : "0");
+                }
+                catch {
+                    /* private mode / blocked storage - toggle still works this page */
+                }
+                const manual = __wgById("wg-gate-manual");
+                const auto = __wgById("wg-gate-auto");
+                if (manual)
+                    manual.style.display = cb.checked ? "none" : "";
+                if (auto)
+                    auto.style.display = cb.checked ? "" : "none";
+            });
+        }
+    }, afterPayload)
+        .catch(ignorePageGone);
+}

package/dist/demo/stepper/panel-before.d.ts

@@ -0,0 +1,12 @@
+import type { WgPage } from "../types.js";
+import { type PanelTodos, type StepPanelInfo } from "./step-panels.js";
+/** The panel before a step: its description, the mem it reads (editable), and whether its episode just began. */
+export interface BeforePanelInfo extends StepPanelInfo, PanelTodos {
+    description: string;
+    keys: readonly {
+        name: string;
+        value: string;
+    }[];
+    justEnteredEpisode: boolean;
+}
+export declare function renderBeforeStep(page: WgPage, info: BeforePanelInfo): Promise<void>;

package/dist/demo/stepper/panel-before.js

@@ -0,0 +1,241 @@
+// The demo panel before a step: episode and step chips, pace, the mem it reads (editable), and the Run gate.
+import { envFlag, envString } from "../../engine/env.js";
+import { ignorePageGone, ignoreTimeout } from "../../engine/page-gone.js";
+import { installOverlay } from "../overlay/overlay.js";
+import { miniStepLabel } from "./step-panels.js";
+export async function renderBeforeStep(page, info) {
+    await installOverlay(page, info.title, info.bannerUi, info.caption, info.networkTabVisible);
+    // A ring left highlighting the PREVIOUS step's element (and its live
+    // resize/scroll tracker) shouldn't linger once a new step's own panel is
+    // up - only relevant when a Block's act() doesn't navigate away, since a
+    // real navigation already wipes document.documentElement's children.
+    await page
+        .evaluate(() => {
+        if (window.__wgRingTrack) {
+            window.removeEventListener("resize", window.__wgRingTrack);
+            window.removeEventListener("scroll", window.__wgRingTrack, true);
+            window.__wgRingTrack = null;
+        }
+        if (window.__wgHideRing)
+            window.__wgHideRing();
+        if (window.__wgHideCursor)
+            window.__wgHideCursor();
+    })
+        .catch(ignorePageGone);
+    // miniStepLabel / todosHtmlFromInfo are Node-only — browser evaluate has no closure.
+    const payload = { ...info, stepLabel: miniStepLabel(info) };
+    await page
+        .evaluate((info) => {
+        // Reused in place, not removed + recreated, every step - the old
+        // remove()-then-fade-back-in cycle was a real flash on every single
+        // transition (the user: "the appear and disappear... hurts eyes and
+        // dizzy"). Updating one persistent element's content has nothing to
+        // flash - it only ever fades in ONCE, the first time this page
+        // genuinely has no panel yet (a real navigation wiped the whole
+        // document, or this is the very first step).
+        let panel = __wgById("wg-panel");
+        const isNewPanel = !panel;
+        if (!panel) {
+            panel = document.createElement("div");
+            panel.id = "wg-panel";
+        }
+        const pct = Math.round((info.index / info.total) * 100);
+        // A real tab bar, not a single text line - every episode this chain
+        // touches, the current one reading as active (the user: "if episode 1 is
+        // active, the episode 2 tab is inactive"). Absent entirely for an ad
+        // hoc block chain with no named Flows.
+        const episodes = info.allEpisodes && info.allEpisodes.length > 0
+            ? __wgEl("div", { id: "wg-episodes" }, info.allEpisodes.map((e) => {
+                const cls = e.episodeNumber < (info.episodeNumber ?? 0) ? "wg-ep-done"
+                    : e.episodeNumber === info.episodeNumber ? "wg-ep-current"
+                        : "wg-ep-upcoming";
+                // The gentle one-time glow only plays on the tab actually
+                // being entered right now, not on every render of it.
+                const enteredCls = info.justEnteredEpisode && e.episodeNumber === info.episodeNumber
+                    ? " wg-ep-entered"
+                    : "";
+                return __wgEl("span", { class: "wg-ep-tab " + cls + enteredCls }, "Episode " + e.episodeNumber + ": " + (e.episodeTitle || ""));
+            }))
+            : null;
+        // Scoped to THIS episode's own blocks (info.allNames is already the
+        // episode-local subset the caller computed) - moduleIndex is this
+        // step's position WITHIN that subset, not the whole chain's index -
+        // "in episode 2 it shows 2nd to the last... it should start from the
+        // first block" (the user).
+        const modulesClass = info.stepperMode === "full" ? "wg-modules-full" : "wg-modules-carousel";
+        const modules = info.allNames.map((name, idx) => {
+            const cls = idx < info.moduleIndex ? "wg-mod-done" : idx === info.moduleIndex ? "wg-mod-current" : "wg-mod-upcoming";
+            const desc = info.allDescriptions && info.allDescriptions[idx];
+            return __wgEl("span", { class: "wg-mod " + cls, title: desc || undefined }, String(name));
+        });
+        const pace = info.paceBadge || info.paceLabel
+            ? __wgEl("div", { class: "wg-pace", data: { paceKind: info.paceKind || "normal" } }, __wgEl("span", { class: "wg-pace-badge" }, info.paceBadge || "1x"), __wgEl("span", null, info.paceLabel || ""))
+            : null;
+        const keys = info.keys.length === 0
+            ? [__wgEl("div", { class: "wg-key" }, "(no MemKeys required)")]
+            : info.keys.map((k) => {
+                const field = __wgEl("textarea", { data: { key: k.name }, attrs: { rows: 2 } });
+                field.value = k.value;
+                return __wgEl("div", { class: "wg-key" }, __wgEl("label", null, k.name), field, __wgEl("div", { class: "wg-key-pretty", data: { prettyFor: k.name } }));
+            });
+        let autoNow = false;
+        try {
+            autoNow = localStorage.getItem("wg-autoplay") === "1";
+        }
+        catch {
+            /* private mode / blocked storage - defaults to manual */
+        }
+        const autoplay = __wgEl("input", { id: "wg-autoplay-cb", attrs: { type: "checkbox" } });
+        autoplay.checked = autoNow;
+        // Todos render into floating #wg-todo-dock via __wgSyncTodos - never
+        // inside .wg-body (would vanish under --mini / Hide collapse).
+        __wgSet(panel, __wgEl("div", { id: "wg-progress" }, __wgEl("div", { id: "wg-progress-bar", style: "width:" + pct + "%" })), episodes, pace, __wgEl("div", { id: "wg-modules", class: modulesClass }, modules), __wgEl("h3", null, "Step " + (info.index + 1) + " / " + info.total + " - " + info.blockName), info.description ? __wgEl("div", { class: "wg-narration" }, info.description) : null, keys, __wgEl("div", { class: "wg-autoplay-row" }, __wgEl("label", null, autoplay, " Auto-advance")), __wgEl("div", { id: "wg-gate-manual", style: autoNow ? "display:none" : "" }, __wgEl("button", { id: "wg-run" }, "Run this step \u25B6")), __wgEl("div", { id: "wg-gate-auto", class: "wg-auto", style: autoNow ? "" : "display:none" }, "Auto-advancing..."));
+        if (isNewPanel) {
+            __wgAdd(panel);
+            requestAnimationFrame(() => panel.classList.add("wg-in"));
+        }
+        else {
+            panel.classList.add("wg-in");
+        }
+        if (window.__wgWirePanelChrome) {
+            window.__wgWirePanelChrome(panel, "wg-panel-hidden", "waygraph demo", {
+                stepLabel: info.stepLabel || "",
+                forceCollapsed: info.forceCollapsed === true ? true : undefined,
+                fastForward: !!info.fastForward,
+                isApi: !!info.isApi,
+            });
+        }
+        if (window.__wgSyncTodos) {
+            const sync = info.todoSync || (info.todos && info.todos.length ? "set" : "keep");
+            // Prefer dock-only payload. Passing list:[] with a dock used to clear
+            // marks a frame later (empty-list clear path).
+            if (sync === "keep" && !info.todoDock) {
+                /* leave floating dock alone */
+            }
+            else {
+                const payload = {
+                    sync: sync,
+                    dock: info.todoDock || null,
+                    pos: info.todoPos || null,
+                    todoId: info.todoId || (info.todoDock && info.todoDock.id) || null,
+                };
+                if (!info.todoDock && info.todos && info.todos.length) {
+                    payload.list = info.todos;
+                }
+                window.__wgSyncTodos(payload);
+            }
+        }
+        if (window.__wgStampModal) {
+            window.__wgStampModal(panel, "panel", {
+                phase: "before",
+                step: info.index + 1,
+                total: info.total,
+                block: info.blockName || "",
+                ready: true,
+            });
+        }
+        // Live, human-readable preview of what a MemKey's raw JSON will
+        // actually write - object fields become "Field: value" lines
+        // (camelCase split the same way state tags already are); a
+        // non-object payload (a plain string/number/array) is shown as-is.
+        // Hidden entirely in JSON mode - shares the SAME global toggle the
+        // result display's own Pretty/JSON buttons already set, not a
+        // second, separate preference.
+        const prettyMemValue = (raw) => {
+            let parsed;
+            try {
+                parsed = JSON.parse(raw);
+            }
+            catch {
+                return [__wgEl("em", null, "(invalid JSON)")];
+            }
+            if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+                return [JSON.stringify(parsed)];
+            }
+            return Object.entries(parsed).map(([field, value]) => {
+                const label = field.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/^./, (c) => c.toUpperCase());
+                return __wgEl("div", { class: "wg-key-pretty-row" }, __wgEl("span", { class: "wg-key-pretty-label" }, label + ":"), " " + String(value));
+            });
+        };
+        const applyKeyPretty = () => {
+            const prettyOn = window.__wgPretty !== false;
+            panel.querySelectorAll("textarea[data-key]").forEach((ta) => {
+                const previewEl = ta.parentElement?.querySelector(".wg-key-pretty");
+                if (!previewEl)
+                    return;
+                previewEl.style.display = prettyOn ? "" : "none";
+                if (prettyOn)
+                    __wgSet(previewEl, prettyMemValue(ta.value));
+            });
+        };
+        applyKeyPretty();
+        panel.querySelectorAll("textarea[data-key]").forEach((ta) => {
+            ta.addEventListener("input", applyKeyPretty);
+        });
+        const runBtn = __wgById("wg-run");
+        if (runBtn) {
+            runBtn.addEventListener("click", () => {
+                const edits = {};
+                panel.querySelectorAll("textarea[data-key]").forEach((el) => {
+                    edits[el.getAttribute("data-key") ?? ""] = el.value;
+                });
+                window.__wgNext(edits);
+            });
+        }
+        // Live toggle - flips localStorage immediately so an in-flight gate()
+        // poll (on the Node side) picks it up within its next poll slice,
+        // without needing this whole panel to re-render. A manual click
+        // still always wins over an active autoplay wait, whichever the
+        // checkbox says - this is the "hybrid" control: autoplay is a
+        // default, not a lockout.
+        const cb = __wgById("wg-autoplay-cb");
+        if (cb) {
+            cb.addEventListener("change", () => {
+                try {
+                    localStorage.setItem("wg-autoplay", cb.checked ? "1" : "0");
+                }
+                catch {
+                    /* private mode / blocked storage - toggle still works this page */
+                }
+                const manual = __wgById("wg-gate-manual");
+                const auto = __wgById("wg-gate-auto");
+                if (manual)
+                    manual.style.display = cb.checked ? "none" : "";
+                if (auto)
+                    auto.style.display = cb.checked ? "" : "none";
+            });
+        }
+    }, payload)
+        .catch(ignorePageGone);
+    if (envString("WAYGRAPH_PROVE_SHOT") || envFlag("WAYGRAPH_PROVE_EXIT")) {
+        // Default: prove once on first painted panel. PROVE_EVERY=1 re-checks
+        // every step (noisy; useful when hunting a mid-chain blank).
+        const proveEvery = envFlag("WAYGRAPH_PROVE_EVERY");
+        const already = globalThis.__wgProveDone;
+        if (!already || proveEvery || envFlag("WAYGRAPH_PROVE_EXIT")) {
+            await page.waitForTimeout(500).catch(ignoreTimeout);
+            const shot = envString("WAYGRAPH_PROVE_SHOT");
+            if (shot)
+                await page.screenshot({ path: shot }).catch(ignorePageGone);
+            const ok = await page
+                .evaluate(() => {
+                const beacons = typeof window.__wgOverlayBeacon === "function" ? window.__wgOverlayBeacon() : [];
+                const panel = beacons.find((b) => b.modal === "panel" && b.ready && b.visible);
+                const textOk = panel && panel.textLen >= 12;
+                const opacityOk = panel && Number(panel.opacity) > 0.5;
+                return {
+                    ok: !!(panel && textOk && opacityOk),
+                    beacons,
+                    hasRun: !!__wgById("wg-run"),
+                    readyAttr: __wgById("wg-panel")?.getAttribute("data-wg-ready") || null,
+                };
+            })
+                .catch((e) => ({ ok: false, reason: String(e instanceof Error ? e.message : e) }));
+            console.error("WAYGRAPH_PROVE " + JSON.stringify(ok));
+            globalThis.__wgProveDone = true;
+            if (envFlag("WAYGRAPH_PROVE_EXIT")) {
+                process.exit(ok && ok.ok ? 0 : 2);
+            }
+        }
+    }
+}