waygraph 0.12.30 → 0.12.31

package/dist/cli.js

@@ -527,6 +527,24 @@ const RING_CSS =
   "#wg-todos .wg-todo-done{color:#6ee7b7;text-decoration:line-through;opacity:.85;}" +
   "#wg-todos .wg-todo-current{color:#fff;}" +
   "#wg-todos .wg-todo-pending{color:#9a7ad1;}" +
+  "#wg-todo-modal{position:fixed;z-index:2147483647;left:14px;bottom:14px;min-width:240px;max-width:min(360px,92vw);" +
+  "padding:14px 16px 12px;background:rgba(18,8,36,.94);color:#f0e8ff;" +
+  "border:1px solid rgba(124,58,237,.55);border-radius:12px;" +
+  "box-shadow:0 12px 40px rgba(0,0,0,.45);backdrop-filter:blur(8px);" +
+  "opacity:0;transform:translateY(8px);pointer-events:none;" +
+  "transition:opacity .28s ease,transform .28s ease;}" +
+  "#wg-todo-modal.wg-todo-on{opacity:1;transform:none;pointer-events:auto;}" +
+  "#wg-todo-modal .wg-todo-head{font:700 11px/1.2 system-ui,sans-serif;color:#c9a6ff;" +
+  "letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px;}" +
+  "#wg-todo-modal ul{list-style:none;margin:0;padding:0;}" +
+  "#wg-todo-modal li{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;" +
+  "font:600 14px/1.4 system-ui,sans-serif;}" +
+  "#wg-todo-modal li:last-child{margin-bottom:0;}" +
+  "#wg-todo-modal .wg-todo-mark{flex:0 0 auto;width:1.2em;text-align:center;font-size:15px;}" +
+  "#wg-todo-modal .wg-todo-done{color:#6ee7b7;text-decoration:line-through;opacity:.8;}" +
+  "#wg-todo-modal .wg-todo-current{color:#fff;}" +
+  "#wg-todo-modal .wg-todo-current .wg-todo-mark{color:#c9a6ff;}" +
+  "#wg-todo-modal .wg-todo-pending{color:#9a7ad1;}" +
   "#wg-progress{height:4px;background:#2a1650;border-radius:2px;margin:0 0 12px;overflow:hidden;}" +
   "#wg-progress-bar{height:100%;background:#7C3AED;border-radius:2px;transition:width .3s ease;}" +
   // A real tab bar for episodes - the currently-active episode reads as
@@ -707,11 +725,6 @@ async function installOverlay(page, title) {
             cursor.style.transform = "translate(" + x + "px," + y + "px)";
           }
           cursor.style.opacity = "1";
-          // Screen Studio: pan the zoomed camera with the cursor.
-          const cam = window.__wgCamera;
-          if (cam && cam.scale > 1.001 && window.__wgSetCamera) {
-            window.__wgSetCamera(x, y, cam.scale, instant ? 0 : travel);
-          }
         };
         window.__wgHideCursor = () => {
           const cursor = document.getElementById("wg-cursor");
@@ -801,12 +814,14 @@ async function installOverlay(page, title) {
         };
         // Screen Studio-style camera: scale <body>, keep overlays on <html> fixed.
         window.__wgCamera = { scale: 1, cx: 0, cy: 0 };
-        window.__wgSetCamera = (cx, cy, scale, ms) => {
+        window.__wgSetCamera = (fx, fy, scale, ms) => {
           const body = document.body;
           if (!body) return;
           const s = Math.max(1, Math.min(Number(scale) || 1, 2.75));
-          window.__wgCamera = { scale: s, cx, cy };
-          const dur = ms != null && Number(ms) >= 0 ? Number(ms) : 500;
+          const vw = window.innerWidth;
+          const vh = window.innerHeight;
+          window.__wgCamera = { scale: s, cx: fx, cy: fy };
+          const dur = ms != null && Number(ms) >= 0 ? Number(ms) : 650;
           body.style.transition =
             dur <= 0
               ? "none"
@@ -816,8 +831,51 @@ async function installOverlay(page, title) {
             body.style.transform = "";
             return;
           }
+          // One transform: scale AND bring focus to viewport center.
           body.style.transform =
-            "translate(" + cx + "px," + cy + "px) scale(" + s + ") translate(" + -cx + "px," + -cy + "px)";
+            "translate(" + vw / 2 + "px," + vh / 2 + "px) scale(" + s + ") translate(" + -fx + "px," + -fy + "px)";
+        };
+        window.__wgSetTodos = (todos) => {
+          let modal = document.getElementById("wg-todo-modal");
+          if (!todos || !todos.length) {
+            if (modal) {
+              modal.classList.remove("wg-todo-on");
+              modal.innerHTML = "";
+            }
+            return;
+          }
+          if (!modal) {
+            modal = document.createElement("div");
+            modal.id = "wg-todo-modal";
+            document.documentElement.appendChild(modal);
+          }
+          const esc = (s) =>
+            String(s)
+              .replace(/&/g, "&amp;")
+              .replace(/</g, "&lt;")
+              .replace(/>/g, "&gt;");
+          const rows = todos
+            .map((t) => {
+              const cls = t.current
+                ? "wg-todo-current"
+                : t.done
+                  ? "wg-todo-done"
+                  : "wg-todo-pending";
+              const mark = t.done ? "\u2713" : t.current ? "\u2192" : "\u25CB";
+              return (
+                "<li class=\"" +
+                cls +
+                "\"><span class=\"wg-todo-mark\">" +
+                mark +
+                "</span><span>" +
+                esc(t.text || "") +
+                "</span></li>"
+              );
+            })
+            .join("");
+          modal.innerHTML =
+            "<div class=\"wg-todo-head\">Checklist</div><ul>" + rows + "</ul>";
+          modal.classList.add("wg-todo-on");
         };
         window.__wgResetCamera = () => {
           window.__wgSetCamera(window.innerWidth / 2, window.innerHeight / 2, 1);
@@ -1059,7 +1117,29 @@ async function renderBeforeStep(page, info) {
         "<div id=\\"wg-modules\\" class=\\"" + modulesClass + "\\">" + modulesHtml + "</div>" +
         "<h3>Step " + (info.index + 1) + " / " + info.total + " - " + info.blockName + "</h3>" +
         narrationHtml +
-        todosHtmlFromInfo(info, esc);
+        ((() => {
+          const list = info.todos || [];
+          if (!list.length) return "";
+          return (
+            "<ul id=\"wg-todos\">" +
+            list
+              .map((t) => {
+                const cls = t.current ? "wg-todo-current" : t.done ? "wg-todo-done" : "wg-todo-pending";
+                const mark = t.done ? "\u2713" : t.current ? "\u2192" : "\u25CB";
+                return (
+                  "<li class=\"" +
+                  cls +
+                  "\"><span class=\"wg-todo-mark\">" +
+                  mark +
+                  "</span><span>" +
+                  esc(t.text || "") +
+                  "</span></li>"
+                );
+              })
+              .join("") +
+            "</ul>"
+          );
+        })());
       if (info.keys.length === 0) {
         html += "<div class=\\"wg-key\\">(no MemKeys required)</div>";
       }
@@ -1237,9 +1317,9 @@ async function ensureSelectorInView(page, selector) {
   }
 }
 
-async function applyCameraZoom(page, box, zoom) {
+async function applyCameraZoom(page, box, zoom, ms) {
   const z = zoom != null && Number(zoom) > 1 ? Number(zoom) : 1;
-  if (!box) {
+  if (!box || z <= 1) {
     await page.evaluate(() => {
       if (window.__wgResetCamera) window.__wgResetCamera();
     }).catch(() => {});
@@ -1247,10 +1327,19 @@ async function applyCameraZoom(page, box, zoom) {
   }
   const cx = box.x + box.width / 2;
   const cy = box.y + box.height / 2;
+  const dur = ms != null ? ms : 650;
   await page
-    .evaluate(({ cx, cy, scale }) => {
-      if (window.__wgSetCamera) window.__wgSetCamera(cx, cy, scale);
-    }, { cx, cy, scale: z })
+    .evaluate(({ cx, cy, scale, dur }) => {
+      if (window.__wgSetCamera) window.__wgSetCamera(cx, cy, scale, dur);
+    }, { cx, cy, scale: z, dur })
+    .catch(() => {});
+}
+
+async function setDemoTodos(page, todos) {
+  await page
+    .evaluate((list) => {
+      if (window.__wgSetTodos) window.__wgSetTodos(list || []);
+    }, todos && todos.length ? todos : [])
     .catch(() => {});
 }
 
@@ -1355,15 +1444,27 @@ async function cycleHighlightRings(page, highlights, gatesFast, opts) {
       const box = await page.locator(h.selector).first().boundingBox();
       if (!box) continue;
       await updateHlProgress(i);
-      await applyCameraZoom(page, box, h.zoom);
-      const useCursor = h.cursor !== false;
-      if (useCursor) {
-        const cx = box.x + box.width / 2;
-        const cy = box.y + box.height / 2;
+      if (opts && opts.todos && opts.todos.length) {
+        const rows = opts.todos.map((t, ti) => ({
+          text: t.text,
+          done: ti < i,
+          current: ti === i,
+        }));
+        await setDemoTodos(page, rows);
+      } else if (h.todos && h.todos.length) {
+        await setDemoTodos(page, normalizeTodos(h.todos, h.todoIndex));
+      }
+      const cx = box.x + box.width / 2;
+      const cy = box.y + box.height / 2;
+      const z = h.zoom != null && Number(h.zoom) > 1 ? Number(h.zoom) : 1;
+      const camMs = 700;
+      // One-shot camera: zoom + center together (no zoom-then-align).
+      await applyCameraZoom(page, box, z, camMs);
+      if (h.cursor !== false) {
         await page
-          .evaluate(({ cx, cy }) => {
-            if (window.__wgMoveCursorTo) window.__wgMoveCursorTo(cx, cy, 500, false);
-          }, { cx, cy })
+          .evaluate(({ cx, cy, camMs }) => {
+            if (window.__wgMoveCursorTo) window.__wgMoveCursorTo(cx, cy, camMs, false);
+          }, { cx, cy, camMs })
           .catch(() => {});
       }
       await showRing(page, box, h.label, h.tone || "planned", {
@@ -1372,9 +1473,10 @@ async function cycleHighlightRings(page, highlights, gatesFast, opts) {
         focus: !!h.focus,
         color: h.color || h.labelColor || h.textColor,
       });
-      // Live follow while this ring is up (seamless, not taped).
+      await new Promise((res) => setTimeout(res, camMs));
+      // Live ring track only - camera stays locked (no per-frame re-pan).
       await page
-        .evaluate(({ sel, label, tone, size, weight, focus, color, zoom }) => {
+        .evaluate(({ sel, label, tone, size, weight, focus, color }) => {
           const tick = () => {
             const el = document.querySelector(sel);
             if (!el) {
@@ -1386,26 +1488,10 @@ async function cycleHighlightRings(page, highlights, gatesFast, opts) {
             if (window.__wgPositionRing) {
               window.__wgPositionRing(box, label, tone || "planned", { size, weight, focus, color });
             }
-            if (zoom && zoom > 1 && window.__wgSetCamera) {
-              // Prefer cursor tip when visible (Screen Studio follow-mouse);
-              // else keep the ring target centered.
-              let cx = box.x + box.width / 2;
-              let cy = box.y + box.height / 2;
-              const cur = document.getElementById("wg-cursor");
-              if (cur && cur.style.opacity !== "0") {
-                const m = /translate\(([-\d.]+)px,\s*([-\d.]+)px\)/.exec(cur.style.transform || "");
-                if (m) {
-                  cx = Number(m[1]);
-                  cy = Number(m[2]);
-                }
-              }
-              window.__wgSetCamera(cx, cy, zoom, 0);
-            }
             window.__wgRingRaf = requestAnimationFrame(tick);
           };
           window.__wgRingRaf = requestAnimationFrame(tick);
-          const onScroll = () => {};
-          window.__wgRingTrack = onScroll;
+          window.__wgRingTrack = () => {};
         }, {
           sel: h.selector,
           label: h.label,
@@ -1414,47 +1500,9 @@ async function cycleHighlightRings(page, highlights, gatesFast, opts) {
           weight: h.weight || "normal",
           focus: !!h.focus,
           color: h.color || h.labelColor || h.textColor || "",
-          zoom: h.zoom != null && h.zoom > 1 ? h.zoom : 0,
         })
         .catch(() => {});
 
-      if ((opts && opts.todos && opts.todos.length) || (h.todos && h.todos.length)) {
-        const rows =
-          opts && opts.todos && opts.todos.length
-            ? opts.todos
-            : normalizeTodos(h.todos, h.todoIndex);
-        await page
-          .evaluate((todos) => {
-            const ul = document.getElementById("wg-todos");
-            if (!ul) return;
-            ul.innerHTML = todos
-              .map((t) => {
-                const cls = t.current
-                  ? "wg-todo-current"
-                  : t.done
-                    ? "wg-todo-done"
-                    : "wg-todo-pending";
-                const mark = t.done ? "\\u2713" : t.current ? "\\u2192" : "\\u25CB";
-                const esc = (s) =>
-                  String(s)
-                    .replace(/&/g, "&amp;")
-                    .replace(/</g, "&lt;")
-                    .replace(/>/g, "&gt;");
-                return (
-                  "<li class=\\"" +
-                  cls +
-                  "\\"><span class=\\"wg-todo-mark\\">" +
-                  mark +
-                  "</span><span>" +
-                  esc(t.text || "") +
-                  "</span></li>"
-                );
-              })
-              .join("");
-          }, rows)
-          .catch(() => {});
-      }
-
       // Appear settle
       await new Promise((res) => setTimeout(res, fadeMs));
       const authored = resolveFixtureDwellMs(h, { gatesFast, pace });
@@ -1585,7 +1633,29 @@ async function renderAfterStep(page, info) {
         paceHtml +
         "<div id=\\"wg-modules\\" class=\\"" + modulesClass + "\\">" + modulesHtml + "</div>" +
         "<h3>" + heading + "</h3>" +
-        todosHtmlFromInfo(info, escA) +
+        ((() => {
+          const list = info.todos || [];
+          if (!list.length) return "";
+          return (
+            "<ul id=\"wg-todos\">" +
+            list
+              .map((t) => {
+                const cls = t.current ? "wg-todo-current" : t.done ? "wg-todo-done" : "wg-todo-pending";
+                const mark = t.done ? "\u2713" : t.current ? "\u2192" : "\u25CB";
+                return (
+                  "<li class=\"" +
+                  cls +
+                  "\"><span class=\"wg-todo-mark\">" +
+                  mark +
+                  "</span><span>" +
+                  escA(t.text || "") +
+                  "</span></li>"
+                );
+              })
+              .join("") +
+            "</ul>"
+          );
+        })()) +
         resultHtml +
         gateHtml;
       if (isNewPanel) {
@@ -2173,7 +2243,7 @@ async function teardownOverlay(page) {
         window.__wgRingTrack = null;
       }
       window.__wgNarrateOwnsRing = false;
-      for (const id of ["wg-panel", "wg-ring", "wg-ring-label", "wg-cursor", "wg-click-pulse", "wg-banner"]) {
+      for (const id of ["wg-panel", "wg-ring", "wg-ring-label", "wg-cursor", "wg-click-pulse", "wg-banner", "wg-todo-modal"]) {
         const el = document.getElementById(id);
         if (el) el.remove();
       }
@@ -2747,6 +2817,7 @@ async function runStepMode(engine, start, end, context, page, mem, resolved, slo
       todos: stubBeforeTodos,
       ...paceSpeak,
     });
+    await setDemoTodos(page, stubBeforeTodos);
     const edits = await gate();
     for (const k of requires) {
       if (edits[k.name] !== undefined) {
@@ -2934,6 +3005,7 @@ async function runStepMode(engine, start, end, context, page, mem, resolved, slo
       });
       stubAfterTodos = afterPhase.todos || [];
       await setDemoBannerTitle(page, afterPhase.title);
+      await setDemoTodos(page, afterPhase.todos || []);
       highlights = afterPhase.highlights.map((h) => {
         const styled = applyHighlightStyleDefaults(h, r.highlightStyle);
         return {

package/dist/engine.d.ts

@@ -544,6 +544,57 @@ export declare class Engine {
         Block<K, L>,
         EndMarker
     ]): Flow<L>;
+    defineFlow<B extends Checkpoint<string>, C extends Checkpoint<string>, D extends Checkpoint<string>, E extends Checkpoint<string>, F extends Checkpoint<string>, G extends Checkpoint<string>, H extends Checkpoint<string>, I extends Checkpoint<string>, J extends Checkpoint<string>, K extends Checkpoint<string>, L extends Checkpoint<string>, M extends Checkpoint<string>>(blocks: readonly [
+        StartMarker,
+        Block<S, B>,
+        Block<B, C>,
+        Block<C, D>,
+        Block<D, E>,
+        Block<E, F>,
+        Block<F, G>,
+        Block<G, H>,
+        Block<H, I>,
+        Block<I, J>,
+        Block<J, K>,
+        Block<K, L>,
+        Block<L, M>,
+        EndMarker
+    ]): Flow<M>;
+    defineFlow<B extends Checkpoint<string>, C extends Checkpoint<string>, D extends Checkpoint<string>, E extends Checkpoint<string>, F extends Checkpoint<string>, G extends Checkpoint<string>, H extends Checkpoint<string>, I extends Checkpoint<string>, J extends Checkpoint<string>, K extends Checkpoint<string>, L extends Checkpoint<string>, M extends Checkpoint<string>, N extends Checkpoint<string>>(blocks: readonly [
+        StartMarker,
+        Block<S, B>,
+        Block<B, C>,
+        Block<C, D>,
+        Block<D, E>,
+        Block<E, F>,
+        Block<F, G>,
+        Block<G, H>,
+        Block<H, I>,
+        Block<I, J>,
+        Block<J, K>,
+        Block<K, L>,
+        Block<L, M>,
+        Block<M, N>,
+        EndMarker
+    ]): Flow<N>;
+    defineFlow<B extends Checkpoint<string>, C extends Checkpoint<string>, D extends Checkpoint<string>, E extends Checkpoint<string>, F extends Checkpoint<string>, G extends Checkpoint<string>, H extends Checkpoint<string>, I extends Checkpoint<string>, J extends Checkpoint<string>, K extends Checkpoint<string>, L extends Checkpoint<string>, M extends Checkpoint<string>, N extends Checkpoint<string>, O extends Checkpoint<string>>(blocks: readonly [
+        StartMarker,
+        Block<S, B>,
+        Block<B, C>,
+        Block<C, D>,
+        Block<D, E>,
+        Block<E, F>,
+        Block<F, G>,
+        Block<G, H>,
+        Block<H, I>,
+        Block<I, J>,
+        Block<J, K>,
+        Block<K, L>,
+        Block<L, M>,
+        Block<M, N>,
+        Block<N, O>,
+        EndMarker
+    ]): Flow<O>;
 }
 /**
  * Attaches routing to `block` without touching its act/observe/resolve/verify -

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waygraph",
-  "version": "0.12.30",
+  "version": "0.12.31",
   "type": "module",
   "description": "A typed graph of reusable Blocks for driving a browser through E2E flows.",
   "license": "MIT",