waygraph 0.16.1 → 0.16.4

package/dist/demo/narration/stub-ctx.js

@@ -25,136 +25,138 @@ export function createStubCtx(bag, opts) {
         mem: opts.mem,
         out: opts.out,
         error: opts.error,
-        highlights(slots) {
-            bag.highlights = { ...(slots || {}) };
-        },
-        ring(id, stub) {
-            bag.highlights = { ...bag.highlights, [id]: stub };
-        },
-        todos(id, items, opts = {}) {
-            setDock(id, opts);
-            bag.todos = items;
-            if (opts.index != null)
-                bag.todoIndex = Number(opts.index);
-            if (!items.length)
+        ui: {
+            ring(id, stub) {
+                bag.highlights = { ...bag.highlights, [id]: stub };
+            },
+            todos(id, items, opts = {}) {
+                setDock(id, opts);
+                bag.todos = items;
+                if (opts.index != null)
+                    bag.todoIndex = Number(opts.index);
+                if (!items.length)
+                    bag.hideTodos = true;
+            },
+            todoIndex(n) {
+                bag.todoIndex = n;
+            },
+            todoGroups(id, groups, opts = {}) {
+                setDock(id, opts);
+                bag.todoGroups = groups;
+                if (!groups.length)
+                    bag.hideTodos = true;
+            },
+            hideTodos() {
+                bag.todoTouched = true;
                 bag.hideTodos = true;
-        },
-        todoIndex(n) {
-            bag.todoIndex = n;
-        },
-        todoGroups(id, groups, opts = {}) {
-            setDock(id, opts);
-            bag.todoGroups = groups;
-            if (!groups.length)
-                bag.hideTodos = true;
-        },
-        hideTodos() {
-            bag.todoTouched = true;
-            bag.hideTodos = true;
-            bag.todos = [];
-            delete bag.todoGroups;
-        },
-        device(preset) {
-            bag.deviceTouched = true;
-            bag.hideDevice = false;
-            const resolved = resolveDeviceState(preset, bag.touchOverride, bag.orientationOverride);
-            if (resolved) {
-                bag.device = resolved;
-                if (resolved.preset === "desktop" && !resolved.touchMode) {
-                    bag.hideDevice = true;
+                bag.todos = [];
+                delete bag.todoGroups;
+            },
+            device(preset) {
+                bag.deviceTouched = true;
+                bag.hideDevice = false;
+                const resolved = resolveDeviceState(preset, bag.touchOverride, bag.orientationOverride);
+                if (resolved) {
+                    bag.device = resolved;
+                    if (resolved.preset === "desktop" && !resolved.touchMode) {
+                        bag.hideDevice = true;
+                    }
                 }
-            }
-        },
-        viewport(box) {
-            bag.deviceTouched = true;
-            bag.hideDevice = false;
-            const resolved = resolveDeviceState(box, bag.touchOverride, bag.orientationOverride);
-            if (resolved)
-                bag.device = resolved;
-        },
-        touch(on) {
-            bag.deviceTouched = true;
-            const enabled = on === undefined ? true : !!on;
-            bag.touchOverride = enabled;
-            if (enabled)
+            },
+            viewport(box) {
+                bag.deviceTouched = true;
                 bag.hideDevice = false;
-            if (bag.device) {
-                bag.device = {
-                    ...bag.device,
-                    touchMode: enabled,
-                    hasTouch: bag.device.hasTouch || enabled,
-                };
+                const resolved = resolveDeviceState(box, bag.touchOverride, bag.orientationOverride);
+                if (resolved)
+                    bag.device = resolved;
+            },
+            touch(on) {
+                bag.deviceTouched = true;
+                const enabled = on === undefined ? true : !!on;
+                bag.touchOverride = enabled;
                 if (enabled)
                     bag.hideDevice = false;
-            }
-            else if (enabled) {
-                const base = resolveDeviceState("desktop", true, bag.orientationOverride);
+                if (bag.device) {
+                    bag.device = {
+                        ...bag.device,
+                        touchMode: enabled,
+                        hasTouch: bag.device.hasTouch || enabled,
+                    };
+                    if (enabled)
+                        bag.hideDevice = false;
+                }
+                else if (enabled) {
+                    const base = resolveDeviceState("desktop", true, bag.orientationOverride);
+                    if (base)
+                        bag.device = { ...base, touchMode: true, hasTouch: true };
+                }
+            },
+            orientation(o) {
+                const want = normalizeDeviceOrientation(o);
+                if (!want)
+                    return;
+                bag.deviceTouched = true;
+                bag.hideDevice = false;
+                bag.orientationOverride = want;
+                const base = bag.device ||
+                    resolveDeviceState("mobile", bag.touchOverride) ||
+                    resolveDeviceState("mobile");
                 if (base)
-                    bag.device = { ...base, touchMode: true, hasTouch: true };
-            }
-        },
-        orientation(o) {
-            const want = normalizeDeviceOrientation(o);
-            if (!want)
-                return;
-            bag.deviceTouched = true;
-            bag.hideDevice = false;
-            bag.orientationOverride = want;
-            const base = bag.device ||
-                resolveDeviceState("mobile", bag.touchOverride) ||
-                resolveDeviceState("mobile");
-            if (base)
-                bag.device = applyOrientation(base, want);
-        },
-        hideDevice() {
-            bag.deviceTouched = true;
-            bag.hideDevice = true;
-            bag.device = resolveDeviceState("desktop", false);
-            bag.touchOverride = false;
-            bag.orientationOverride = undefined;
-        },
-        zoom(n) {
-            if (Number.isFinite(n) && n > 0)
-                bag.zoom = n;
-        },
-        zoomOut(keep) {
-            bag.zoomOut = !!keep;
-        },
-        title(text, opts) {
-            bag.title = String(text ?? "");
-            const p = normalizeBannerPos(opts?.pos);
-            if (p)
-                bag.titlePos = p;
-        },
-        titlePos(side) {
-            const p = normalizeBannerPos(side);
-            if (p)
-                bag.titlePos = p;
-        },
-        caption(text) {
-            bag.caption = String(text ?? "");
-        },
-        hideCaption() {
-            bag.caption = "";
-        },
-        showNetworkTab() {
-            bag.networkTabVisible = true;
-        },
-        hideNetworkTab() {
-            bag.networkTabVisible = false;
-        },
-        bannerUi(opts) {
-            if (!opts || typeof opts !== "object")
-                return;
-            bag.bannerUi = { ...(bag.bannerUi || {}), ...opts };
-        },
-        hideBanner() {
-            bag.bannerUi = { ...(bag.bannerUi || {}), hidden: true };
-        },
-        todoDockUi(opts) {
-            if (!opts || typeof opts !== "object")
-                return;
-            bag.todoDockUi = { ...(bag.todoDockUi || {}), ...opts };
+                    bag.device = applyOrientation(base, want);
+            },
+            hideDevice() {
+                bag.deviceTouched = true;
+                bag.hideDevice = true;
+                bag.device = resolveDeviceState("desktop", false);
+                bag.touchOverride = false;
+                bag.orientationOverride = undefined;
+            },
+            zoom(n) {
+                if (Number.isFinite(n) && n > 0)
+                    bag.zoom = n;
+            },
+            zoomOut(keep) {
+                bag.zoomOut = !!keep;
+            },
+            title(text, opts) {
+                bag.title = String(text ?? "");
+                const p = normalizeBannerPos(opts?.pos);
+                if (p)
+                    bag.titlePos = p;
+            },
+            titlePos(side) {
+                const p = normalizeBannerPos(side);
+                if (p)
+                    bag.titlePos = p;
+            },
+            caption(text) {
+                bag.caption = String(text ?? "");
+            },
+            slides(slides) {
+                bag.slides = slides;
+            },
+            hideCaption() {
+                bag.caption = "";
+            },
+            showNetworkTab() {
+                bag.networkTabVisible = true;
+            },
+            hideNetworkTab() {
+                bag.networkTabVisible = false;
+            },
+            bannerUi(opts) {
+                if (!opts || typeof opts !== "object")
+                    return;
+                bag.bannerUi = { ...(bag.bannerUi || {}), ...opts };
+            },
+            hideBanner() {
+                bag.bannerUi = { ...(bag.bannerUi || {}), hidden: true };
+            },
+            todoDockUi(opts) {
+                if (!opts || typeof opts !== "object")
+                    return;
+                bag.todoDockUi = { ...(bag.todoDockUi || {}), ...opts };
+            },
         },
     };
 }

package/dist/demo/overlay/cursor.js

@@ -51,7 +51,7 @@ export async function playSwipeTrail(page, opts) {
         layer.id = "wg-swipe-layer";
         layer.setAttribute("data-wg-ui", "1");
         layer.style.cssText =
-            "position:fixed;inset:0;z-index:2147483646;pointer-events:none;overflow:hidden;";
+            "position:fixed;inset:0;z-index:var(--wg-z-cursor,2147483646);pointer-events:none;overflow:hidden;";
         const finger = document.createElement("div");
         finger.style.cssText =
             "position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;" +

package/dist/demo/overlay/inpage/banner.js

@@ -2,6 +2,7 @@ export function installBanner({ title, favicon, bannerPos, bannerUi, tag: banner
     const POSITIONS = ["left", "center", "right"];
     const applyPos = (el, pos) => {
         el.dataset.pos = pos;
+        __wgAdd(el);
         el.dataset.home = pos;
         try {
             localStorage.setItem("wg-banner-pos", pos);
@@ -79,6 +80,7 @@ export function installBanner({ title, favicon, bannerPos, bannerUi, tag: banner
     if (bannerEl) {
         if (bui.pos && POSITIONS.includes(bui.pos) && bannerEl.dataset.home !== bui.pos) {
             bannerEl.dataset.pos = bui.pos;
+            __wgAdd(bannerEl);
             bannerEl.dataset.home = bui.pos;
             bannerEl.dataset.authored = "1";
         }
@@ -108,6 +110,7 @@ export function installBanner({ title, favicon, bannerPos, bannerUi, tag: banner
                 (window.__wgBannerLog = window.__wgBannerLog || []).push(line);
         };
         b.dataset.pos = home;
+        __wgAdd(b);
         if (!hits()) {
             delete b.dataset.moved;
             log("clear");
@@ -115,6 +118,7 @@ export function installBanner({ title, favicon, bannerPos, bannerUi, tag: banner
         }
         for (const cand of POSITIONS.filter((p) => p !== home)) {
             b.dataset.pos = cand;
+            __wgAdd(b);
             if (!hits()) {
                 b.dataset.moved = home + ">" + cand;
                 log("moved:" + cand, "moved " + home + " -> " + cand + " (ring overlap)");
@@ -122,6 +126,7 @@ export function installBanner({ title, favicon, bannerPos, bannerUi, tag: banner
             }
         }
         b.dataset.pos = home;
+        __wgAdd(b);
         b.dataset.moved = "none-free";
         log("none-free", "overlap at every position (kept " + home + ")");
     };

package/dist/demo/overlay/inpage/core.js

@@ -209,6 +209,7 @@ export function installCore({ envAutoplay, todoDockUi }) {
                 continue;
             const cur = dock.dataset.pos === "right" ? "right" : "left";
             dock.dataset.pos = cur === "right" ? "left" : "right";
+            __wgAdd(dock);
             try {
                 localStorage.setItem("wg-todo-pos", dock.dataset.pos);
             }
@@ -275,12 +276,6 @@ export function installCore({ envAutoplay, todoDockUi }) {
         pulse.classList.add("wg-pulse");
     };
     window.__wgHideRing = (opts) => {
-        // While a narrate() call owns the ring (mid multi-step action),
-        // the auto-highlight click/fill patches' own end-of-step hide is
-        // a no-op - narrate() itself clears it once the WHOLE wrapped
-        // action finishes, not just its first sub-step.
-        if (window.__wgNarrateOwnsRing)
-            return;
         if (window.__wgStopRingFollow)
             window.__wgStopRingFollow();
         const ring = __wgById("wg-ring");

package/dist/demo/overlay/inpage/network.js

@@ -145,7 +145,7 @@ export function addNetworkEntry(entry) {
     const countEl = panel.querySelector(".wg-net-count");
     if (countEl)
         countEl.textContent = String(w.__wgNetworkEntries.length);
-    // Always captured, only shown when explicitly turned on (ctx.showNetworkTab(); default hidden -
+    // Always captured, only shown when explicitly turned on (ctx.ui.showNetworkTab(); default hidden -
     // see StubCtx's own doc comment) - the DOM/row still gets built either way, so toggling visible
     // later shows the full history immediately, not just entries captured after that point.
     if (w.__wgNetworkTabVisible) {

package/dist/demo/overlay/inpage/todos.js

@@ -38,19 +38,6 @@ export function installTodos({ todoPos }) {
         // Drop any in-panel leftover (old builds put #wg-todos in .wg-body).
         __wgQA("#wg-panel #wg-todos").forEach((el) => el.remove());
         const allDocks = () => [...__wgQA(".wg-todo-dock, #wg-todo-dock")].filter((el, i, arr) => arr.indexOf(el) === i);
-        const relayoutTodoDocks = () => {
-            const docks = allDocks();
-            // Must match .wg-todo-dock/#wg-todo-dock's own CSS `top` (demo/overlay/overlay-css.ts,
-            // ui/css/dock.css) - this inline style OVERRIDES that CSS the instant more than one
-            // dock exists (multi-todo stacking), so a CSS-only change here is silently underwater;
-            // real bug this was: the CSS top was bumped 72 -> 104 for banner clearance, but this
-            // hardcoded 72 kept winning at runtime and nothing actually moved.
-            let top = 104;
-            for (const el of docks) {
-                el.style.top = top + "px";
-                top += Math.max(48, el.getBoundingClientRect().height) + 10;
-            }
-        };
         const findDock = (key) => {
             if (key === "_default") {
                 return (__wgQ('.wg-todo-dock[data-wg-todo-key="_default"]') ||
@@ -88,7 +75,6 @@ export function installTodos({ todoPos }) {
             else {
                 allDocks().forEach((el) => el.remove());
             }
-            relayoutTodoDocks();
             return;
         }
         if (sync === "set" && replace) {
@@ -285,7 +271,6 @@ export function installTodos({ todoPos }) {
             });
         }
         dock._wgLastPayload = syncPayload;
-        relayoutTodoDocks();
         if (window.__wgStampModal) {
             window.__wgStampModal(dock, "todos", { ready: true });
         }

package/dist/demo/overlay/network-capture.js

@@ -55,6 +55,8 @@ export async function restoreNetworkHistory(page) {
     }
 }
 export function installNetworkCapture(page) {
+    // defineApiBlock reports its calls through the engine's hook; show them in the same panel.
+    setApiCallRecorder((p, entry) => recordNetworkEntry(p, entry));
     if (page.__wgNetworkCaptureInstalled)
         return;
     page.__wgNetworkCaptureInstalled = true;
@@ -123,5 +125,3 @@ export function installNetworkCapture(page) {
         });
     });
 }
-// defineApiBlock reports its calls through core's hook; show them in the same panel.
-setApiCallRecorder((page, entry) => recordNetworkEntry(page, entry));

package/dist/demo/overlay/overlay-css.js

@@ -1,7 +1,7 @@
 // CSS for the runner-only chrome (step panel, chips) and for the host page (device stage), next to the shared bundle in ui/css.
 import { SURFACE } from "./ui/tokens.js";
 // ---------------------------------------------------------------------------
-// WAYGRAPH_STEP=1 - human-verification overlay: one Block at a time, a
+// The demo stepper (waygraph demo) - human-verification overlay: one Block at a time, a
 // browser-injected panel showing/editing that Block's MemKeys, a "Run this
 // step" gate, then a highlight ring over whatever its own verify Traits just
 // confirmed, then a "Next" gate before moving on. Ring CSS borrowed from
@@ -15,12 +15,12 @@ import { SURFACE } from "./ui/tokens.js";
 // never collides with that bundle.
 export const RUNNER_EXTRA_CSS = 
 // Spotlight: dim everything except the highlight target (focus: true).
-"#wg-focus-veil{position:fixed;z-index:2147483644;pointer-events:none;" +
+"#wg-focus-veil{position:fixed;z-index:var(--wg-z-focus);pointer-events:none;" +
     "border-radius:12px;box-shadow:0 0 0 9999px rgba(8,4,20,.62);" +
     "opacity:0;transition:opacity .3s ease,left .3s ease,top .3s ease,width .3s ease,height .3s ease;}" +
     "#wg-focus-veil.wg-in{opacity:1;}" +
     // Touch swipe trail (mobile/tablet orientation + device theater).
-    "#wg-swipe-layer{position:fixed;inset:0;z-index:2147483646;pointer-events:none;" +
+    "#wg-swipe-layer{position:fixed;inset:0;z-index:var(--wg-z-cursor);pointer-events:none;" +
     "overflow:hidden;}" +
     "#wg-swipe-layer .wg-swipe-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;" +
     "border-radius:50%;background:rgba(147,197,253,.55);border:2px solid rgba(255,255,255,.85);" +
@@ -34,8 +34,8 @@ export const RUNNER_EXTRA_CSS =
     "border:1px solid rgba(56,189,248,.55);font:700 12px/1.2 system-ui,sans-serif;" +
     "letter-spacing:.04em;text-transform:uppercase;opacity:0;transition:opacity .25s ease;}" +
     "#wg-swipe-layer.wg-in .wg-swipe-label{opacity:1;}" +
-    "#wg-panel{position:fixed;z-index:2147483647;left:50%;bottom:12px;transform:translateX(-50%);" +
-    "max-width:min(92vw,640px);max-height:calc(100vh - 24px);overflow-y:auto;box-sizing:border-box;" +
+    "#wg-panel{z-index:var(--wg-z-top);" +
+    "width:min(92vw,640px);overflow-y:auto;box-sizing:border-box;" +
     "background:" + SURFACE + ";color:#fff;border-radius:14px;" +
     "padding:16px 20px;font:14px/1.4 system-ui,sans-serif;box-shadow:0 12px 30px rgba(0,0,0,.35);" +
     // .06s was tuned back when the panel was removed and recreated on
@@ -78,16 +78,14 @@ export const RUNNER_EXTRA_CSS =
     // Todo checklist(s) float outside #wg-panel so --mini / Hide never hide them.
     // Multiple docks (one per todoId) are supported - stacked on the same side.
     // Click a dock to slide left <-> right (WAYGRAPH_TODO_POS / --todo-left|right).
-    ".wg-todo-dock,#wg-todo-dock{position:fixed;z-index:2147483646;top:104px;left:14px;" +
-    "width:min(280px,42vw);max-height:calc(100vh - 100px);overflow:auto;box-sizing:border-box;" +
+    ".wg-todo-dock,#wg-todo-dock{z-index:var(--wg-z-dock);" +
+    "width:min(280px,42vw);overflow:auto;box-sizing:border-box;" +
     "padding:10px 12px;background:" + SURFACE + ";color:#fff;border-radius:12px;" +
     "border:1px solid rgba(124,58,237,.45);box-shadow:0 8px 24px rgba(0,0,0,.35);" +
     "pointer-events:auto;cursor:pointer;" +
-    "transition:transform .4s cubic-bezier(.22,1,.36,1),top .35s ease,opacity .25s ease,z-index 0s;transform:translateX(0);}" +
-    ".wg-todo-dock[data-pos=right],#wg-todo-dock[data-pos=right]{transform:translateX(calc(100vw - 100% - 28px));}" +
-    ".wg-todo-dock[data-pos=left],#wg-todo-dock[data-pos=left]{transform:translateX(0);}" +
+    "transition:opacity .25s ease,z-index 0s;}" +
     /* While a highlight ring is up: sit under the ring so captions stay readable. */
-    ".wg-todo-dock.wg-todo-behind,#wg-todo-dock.wg-todo-behind{z-index:2147483643;opacity:.42;}" +
+    ".wg-todo-dock.wg-todo-behind,#wg-todo-dock.wg-todo-behind{z-index:var(--wg-z-focus);opacity:.42;}" +
     /* Collision tuck: shrink so a mid-page ring can still breathe. */
     ".wg-todo-dock[data-tucked=\"1\"],#wg-todo-dock[data-tucked=\"1\"]{max-height:min(28vh,220px);}" +
     /* Compact + cap: fold overflow rows; hover / data-expanded reveals more. */
@@ -103,7 +101,7 @@ export const RUNNER_EXTRA_CSS =
     // Always-on zoom HUD - bottom-right (top-left is crowded: todos + banners). Violet, matching the
     // rest of the overlay's design tokens - this used to be a lone amber/yellow badge, the one
     // surface that never got pulled into the shared palette when everything else did.
-    "#wg-zoom-badge{position:fixed;z-index:2147483646;bottom:14px;right:14px;" +
+    "#wg-zoom-badge{z-index:var(--wg-z-chrome);" +
     "display:flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;" +
     "border-radius:999px;background:" + SURFACE + ";color:#f0e8ff;" +
     "border:1px solid rgba(124,58,237,.55);box-shadow:0 6px 18px rgba(0,0,0,.4);" +
@@ -114,71 +112,17 @@ export const RUNNER_EXTRA_CSS =
     "#wg-zoom-badge .wg-zoom-ico svg{width:14px;height:14px;display:block;}" +
     "#wg-zoom-badge .wg-zoom-val{color:#c9a6ff;font-variant-numeric:tabular-nums;font-weight:800;min-width:3.2em;}" +
     "#wg-zoom-badge[data-zoomed=\"1\"]{border-color:#7C3AED;}" +
-    // Network-tab overlay (real page traffic via network-capture.js + defineApiBlock's own
-    // page.request calls) - bottom-left, the one corner free of the zoom HUD (bottom-right) and the
-    // typing chip (bottom-center). Persistent (does not auto-fade) once any entry exists - this is a
-    // real Postman/DevTools-style inspector meant to be reviewed, not a flash-and-gone toast.
-    "#wg-network-log{position:fixed;z-index:2147483646;bottom:14px;left:14px;min-width:260px;" +
-    "max-width:min(92vw,420px);max-height:min(60vh,420px);display:flex;flex-direction:column;" +
-    "border-radius:10px;background:" + SURFACE + ";color:#f0e8ff;border:1px solid rgba(124,58,237,.45);" +
-    "box-shadow:0 8px 22px rgba(0,0,0,.4);font:12px/1.4 ui-monospace,\"SF Mono\",Consolas,monospace;" +
-    "opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;overflow:hidden;}" +
-    "#wg-network-log.wg-in{opacity:1;transform:translateY(0);}" +
-    "#wg-network-log.wg-net-collapsed .wg-net-list{display:none;}" +
-    "#wg-network-log .wg-net-header{display:flex;align-items:center;gap:6px;padding:8px 10px;" +
-    "border-bottom:1px solid rgba(124,58,237,.25);cursor:default;flex:0 0 auto;}" +
-    "#wg-network-log .wg-net-title{font:700 10px/1.2 system-ui,sans-serif;color:#c9a6ff;" +
-    "letter-spacing:.06em;text-transform:uppercase;flex:1 1 auto;}" +
-    "#wg-network-log .wg-net-count{font:700 10px/1.2 system-ui,sans-serif;color:#9CA3AF;" +
-    "background:rgba(124,58,237,.22);border-radius:999px;padding:1px 7px;}" +
-    "#wg-network-log .wg-net-collapse{flex:0 0 auto;width:18px;height:18px;border-radius:5px;border:none;" +
-    "background:rgba(124,58,237,.28);color:#e8dcff;font:700 13px/1 system-ui,sans-serif;cursor:pointer;" +
-    "pointer-events:auto;}" +
-    "#wg-network-log .wg-net-collapse:hover{background:rgba(124,58,237,.42);}" +
-    "#wg-network-log .wg-net-list{list-style:none;margin:0;padding:6px 8px;display:flex;" +
-    "flex-direction:column;gap:2px;overflow-y:auto;pointer-events:auto;}" +
-    "#wg-network-log .wg-net-row{display:flex;align-items:baseline;gap:7px;opacity:0;padding:3px 4px;" +
-    "border-radius:5px;cursor:pointer;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease;}" +
-    "#wg-network-log .wg-net-row:hover,#wg-network-log .wg-net-row.wg-net-open{background:rgba(124,58,237,.18);}" +
-    "#wg-network-log .wg-net-row.wg-in{opacity:1;transform:translateX(0);}" +
-    "#wg-network-log .wg-net-method{flex:0 0 auto;font-weight:800;font-size:10px;min-width:38px;}" +
-    "#wg-network-log .wg-net-method-get{color:#3B82F6;}" +
-    "#wg-network-log .wg-net-method-post{color:#22C55E;}" +
-    "#wg-network-log .wg-net-method-put{color:#F97316;}" +
-    "#wg-network-log .wg-net-method-delete{color:#EF4444;}" +
-    "#wg-network-log .wg-net-method-other{color:#9CA3AF;}" +
-    "#wg-network-log .wg-net-path{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;" +
-    "white-space:nowrap;color:#e0e0f0;}" +
-    "#wg-network-log .wg-net-status{flex:0 0 auto;font-weight:700;color:#22C55E;}" +
-    "#wg-network-log .wg-net-row[data-ok=\"0\"] .wg-net-status{color:#EF4444;}" +
-    "#wg-network-log .wg-net-ms{flex:0 0 auto;color:#9CA3AF;font-size:10px;}" +
-    "#wg-network-log .wg-net-detail{list-style:none;background:rgba(0,0,0,.28);border-radius:6px;" +
-    "padding:8px;margin:2px 0 6px;}" +
-    "#wg-network-log .wg-net-detail-section{margin-bottom:8px;}" +
-    "#wg-network-log .wg-net-detail-section:last-child{margin-bottom:0;}" +
-    "#wg-network-log .wg-net-detail-section h4{margin:0 0 4px;font:700 9px/1.2 system-ui,sans-serif;" +
-    "color:#9CA3AF;letter-spacing:.06em;text-transform:uppercase;}" +
-    "#wg-network-log .wg-net-headers{width:100%;border-collapse:collapse;font-size:11px;}" +
-    "#wg-network-log .wg-net-headers td{padding:1px 6px 1px 0;vertical-align:top;word-break:break-all;}" +
-    "#wg-network-log .wg-net-headers td:first-child{color:#c9a6ff;white-space:nowrap;}" +
-    "#wg-network-log .wg-net-body{margin:0;font-size:11px;white-space:pre-wrap;word-break:break-all;" +
-    "max-height:160px;overflow-y:auto;color:#e0e0f0;}" +
-    "#wg-network-log .wg-net-curl{color:#7dd3fc;}" +
-    "#wg-network-log .wg-net-empty{font-size:11px;color:#6b7280;font-style:italic;}" +
-    "#wg-network-log .wg-net-copy{margin-top:5px;padding:3px 9px;border-radius:5px;border:1px solid rgba(124,58,237,.5);" +
-    "background:rgba(124,58,237,.22);color:#e8dcff;font:700 10px system-ui,sans-serif;cursor:pointer;}" +
-    "#wg-network-log .wg-net-copy:hover{background:rgba(124,58,237,.38);}" +
     // Typing chip (method fills: username / password / etc.)
-    "#wg-typing-badge{position:fixed;z-index:2147483646;bottom:88px;left:50%;transform:translateX(-50%);" +
+    "#wg-typing-badge{z-index:var(--wg-z-chrome);" +
     "display:flex;align-items:center;gap:8px;padding:8px 14px;" +
     "border-radius:999px;background:rgba(20,10,40,.95);color:#e0f2fe;" +
     "border:1px solid rgba(56,189,248,.55);box-shadow:0 8px 22px rgba(0,0,0,.4);" +
     "font:700 12px/1.2 system-ui,sans-serif;pointer-events:none;" +
-    "opacity:0;transition:opacity .2s ease;}" +
+    "opacity:0;transition-duration:.2s;}" +
     "#wg-typing-badge.wg-in{opacity:1;}" +
     "#wg-typing-badge .wg-ty-dots{letter-spacing:.15em;color:#7dd3fc;}" +
     // Device toast + chip (0.13.2+) - icon toast on fixture change, then compact chip.
-    "#wg-device-toast{position:fixed;z-index:2147483647;top:14px;right:14px;" +
+    "#wg-device-toast{z-index:var(--wg-z-toast);" +
     "display:flex;align-items:center;gap:10px;min-width:200px;max-width:min(92vw,320px);" +
     "padding:12px 14px;border-radius:14px;background:rgba(20,10,40,.96);color:#f0e8ff;" +
     "border:1px solid rgba(124,58,237,.55);box-shadow:0 10px 28px rgba(0,0,0,.4);" +
@@ -200,20 +144,21 @@ export const RUNNER_EXTRA_CSS =
     "#wg-device-toast .wg-dev-title{font:800 13px/1.2 system-ui,sans-serif;color:#fff;}" +
     "#wg-device-toast .wg-dev-sub{margin-top:3px;font:600 11px/1.3 system-ui,sans-serif;" +
     "color:#c9a6ff;letter-spacing:.02em;}" +
-    "#wg-device-badge{position:fixed;z-index:2147483646;top:14px;right:14px;" +
+    "#wg-device-badge{z-index:var(--wg-z-chrome);" +
     "display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;" +
     "border-radius:999px;background:rgba(20,10,40,.92);color:#f0e8ff;" +
     "border:1px solid rgba(124,58,237,.5);font:700 11px/1.2 system-ui,sans-serif;" +
     "letter-spacing:.04em;text-transform:uppercase;pointer-events:none;" +
     "box-shadow:0 4px 14px rgba(0,0,0,.3);opacity:0;transform:translateY(-4px);" +
-    "transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1);}" +
+    "transition-duration:.35s;transition-timing-function:cubic-bezier(.22,1,.36,1);}" +
     "#wg-device-badge.wg-in{opacity:1;transform:translateY(0);}" +
     "#wg-device-badge[data-preset=mobile]{border-color:#3B82F6;}" +
     "#wg-device-badge[data-preset=tablet]{border-color:#22C55E;}" +
     "#wg-device-badge[data-preset=desktop]{border-color:#9CA3AF;}" +
     "#wg-device-badge .wg-dev-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;}" +
     "#wg-device-badge .wg-dev-icon svg{width:14px;height:14px;display:block;}" +
-    "#wg-device-badge .wg-dev-label{white-space:nowrap;}" +
+    "#wg-device-badge{overflow:hidden;}" +
+    "#wg-device-badge .wg-dev-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}" +
     "#wg-cursor[data-touch=1]{width:28px;height:28px;}" +
     "#wg-todos,.wg-todos-list{list-style:none;margin:0 0 12px;padding:8px 10px;background:#0f0620;border-radius:8px;" +
     "border:1px solid #3a2a60;}" +
@@ -324,16 +269,14 @@ export const RUNNER_EXTRA_CSS =
     "#wg-panel button.wg-mini-next{background:#2a9d6f;border-color:#22855e;color:#fff;display:none;}" +
     "#wg-panel button.wg-mini-next:hover{background:#22855e;}" +
     "#wg-panel button.wg-mini-next:disabled{opacity:.55;cursor:default;}" +
-    "#wg-panel.wg-collapsed{width:auto;max-width:92vw;padding:8px 12px;max-height:none;overflow:hidden;}" +
+    "#wg-panel.wg-collapsed{width:auto;padding:8px 12px;overflow:hidden;}" +
     "#wg-panel.wg-collapsed .wg-body{display:none;}" +
     "#wg-panel.wg-collapsed .wg-chrome{margin:0;}" +
     "#wg-panel.wg-collapsed .wg-chrome-title{font:700 13px/1.25 system-ui,sans-serif;color:#fff;" +
     "letter-spacing:0;text-transform:none;}" +
     "#wg-panel.wg-collapsed button.wg-mini-next.wg-mini-next-show{display:inline-block;}" +
     "@media (max-width:640px){" +
-    "#wg-panel{left:8px;right:8px;bottom:8px;transform:none;max-width:none;width:auto;" +
-    "max-height:min(55vh,calc(100vh - 16px));padding:12px 14px;border-radius:12px;}" +
-    "#wg-panel.wg-collapsed{left:50%;right:auto;transform:translateX(-50%);width:auto;}" +
+    "#wg-panel{width:auto;padding:12px 14px;border-radius:12px;}" +
     "#wg-episodes{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;}" +
     "#wg-panel .wg-narration{font-size:13px;}" +
     "#wg-panel button{width:100%;}" +

package/dist/demo/overlay/overlay-stage.js

@@ -49,7 +49,7 @@ export function createOverlayStage(page, { todoDockRef, deviceRef }) {
         if (!docks.length) {
             // Empty registry: do NOT clear the DOM. renderBefore/After may have
             // just painted from lastTodoDock (keep). Clearing here made todos
-            // vanish until the next ctx.todos() set (PIA #15).
+            // vanish until the next ctx.ui.todos() set (PIA #15).
             return;
         }
         await page

package/dist/demo/overlay/overlay.js

@@ -25,6 +25,9 @@ import { ignorePageGone } from "../../engine/page-gone.js";
 export async function installOverlay(page, title, ui, caption, networkTabVisible) {
     // ring/cursor/banner/dock come from the ONE shared bundle every surface installs (ui/css/*.css).
     await ensureShadowRoot(page);
+    // Runner-only chrome (step panel, zoom/typing/device chips) - separate key, no collision. First, so nothing below
+    // builds chrome ahead of its CSS (an element painted unstyled for a moment, then restyled).
+    await page.evaluate(([css, key]) => __wgCss(css, key), [RUNNER_EXTRA_CSS, "wg-runner-css"]).catch(ignorePageGone);
     // Idempotent (guarded on page.__wgNetworkCaptureInstalled) - safe to call every step even though
     // installOverlay itself runs every step; the page.on() listeners this installs are attached to
     // the Page object, not any one document, so they already survive navigations on their own.
@@ -46,8 +49,6 @@ export async function installOverlay(page, title, ui, caption, networkTabVisible
     if (networkTabVisible !== undefined) {
         await page.evaluate(setNetworkTabVisible, networkTabVisible).catch(ignorePageGone);
     }
-    // Runner-only chrome (step panel, zoom/typing/device chips) - separate key, no collision.
-    await page.evaluate(([css, key]) => __wgCss(css, key), [RUNNER_EXTRA_CSS, "wg-runner-css"]).catch(ignorePageGone);
     await page.addStyleTag({ content: HOST_CSS }).catch(ignorePageGone);
     // Default top-left; override with WAYGRAPH_TITLE_POS=left|center|right.
     // Click cycles left -> center -> right (persisted in localStorage so a

package/dist/demo/overlay/phase-fixtures.js

@@ -43,17 +43,17 @@ export function phaseToOverlayFixtures(phase, holdMs = 6000) {
 export function describeOverlayFixtures(tag, f) {
     const out = [];
     if (f.title)
-        out.push(`${tag} ctx.title(${JSON.stringify(f.title)})${f.titlePos ? ` pos=${f.titlePos}` : ""}`);
+        out.push(`${tag} ctx.ui.title(${JSON.stringify(f.title)})${f.titlePos ? ` pos=${f.titlePos}` : ""}`);
     if (f.bannerUi)
-        out.push(`${tag} ctx.bannerUi(${JSON.stringify(f.bannerUi)})`);
+        out.push(`${tag} ctx.ui.bannerUi(${JSON.stringify(f.bannerUi)})`);
     if (f.todos?.length)
-        out.push(`${tag} ctx.todos n=${f.todos.length} index=${f.todoIndex ?? 0}${f.todoPos ? ` pos=${f.todoPos}` : ""}`);
+        out.push(`${tag} ctx.ui.todos n=${f.todos.length} index=${f.todoIndex ?? 0}${f.todoPos ? ` pos=${f.todoPos}` : ""}`);
     if (f.todoUi)
         out.push(`${tag} todoUi ${JSON.stringify(f.todoUi)}`);
     if (f.device)
-        out.push(`${tag} ctx.device(${typeof f.device === "string" ? f.device : f.device.preset ?? "custom"})`);
+        out.push(`${tag} ctx.ui.device(${typeof f.device === "string" ? f.device : f.device.preset ?? "custom"})`);
     if (f.zoom)
-        out.push(`${tag} ctx.zoom(${f.zoom})`);
+        out.push(`${tag} ctx.ui.zoom(${f.zoom})`);
     for (const r of f.rings ?? [])
         out.push(`${tag} ring ${r.selector} tone=${r.tone ?? "planned"} label=${JSON.stringify(r.label)}`);
     return out;