waygraph 0.15.27 → 0.15.29

package/dist/runner/inpage/todos.js

@@ -0,0 +1,332 @@
+// In-page installer (runs inside the browser via page.evaluate): must stay self-contained - no module-scope closure.
+// Split out of the former single installOverlay evaluate (see src/ARCHITECTURE.md). Shares state only via window.__wg*.
+/* eslint-disable no-unused-vars */
+export function installTodos({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi }) {
+        // Floating todo dock - lives outside #wg-panel so --mini / Hide never
+        // hide the checklist. Click cycles left <-> right with CSS transform.
+        // Authors set side via ctx.todoPos("left"|"right"); env / --todo-* fallback.
+        // Payload:
+        //   { sync: "clear" }                         -> remove dock
+        //   { sync: "keep" }                          -> leave dock alone (no wipe)
+        //   { sync: "set", dock } / { sync:"set", list } -> render / recreate
+        // Compat: bare array = set list (empty array = clear - legacy only).
+        window.__wgSyncTodos = (payload, pos) => {
+          const syncPayload = payload;
+          let sync = "set";
+          let list = [];
+          let dockState = null;
+          let wantPos =
+            pos === "left" || pos === "right" ? pos : null;
+          if (Array.isArray(payload)) {
+            list = payload;
+            sync = list.length ? "set" : "clear";
+          } else if (payload && typeof payload === "object") {
+            sync = payload.sync === "clear" || payload.sync === "keep" ? payload.sync : "set";
+            dockState = payload.dock || null;
+            if (payload.pos === "left" || payload.pos === "right") wantPos = payload.pos;
+            if (Array.isArray(payload.list)) list = payload.list;
+            else if (dockState && Array.isArray(dockState.groups)) {
+              // Flatten for legacy callers; full dock rendered below when present.
+              list = [];
+              for (const g of dockState.groups) {
+                if (g && Array.isArray(g.items)) list = list.concat(g.items);
+              }
+            }
+          } else {
+            list = [];
+            sync = "clear";
+          }
+
+          let dockKey =
+            (dockState && dockState.id && String(dockState.id).trim()) ||
+            (payload && !Array.isArray(payload) && payload.todoId && String(payload.todoId).trim()) ||
+            "_default";
+
+          // Drop any in-panel leftover (old builds put #wg-todos in .wg-body).
+          document.querySelectorAll("#wg-panel #wg-todos").forEach((el) => el.remove());
+
+          const allDocks = () =>
+            [...document.querySelectorAll(".wg-todo-dock, #wg-todo-dock")].filter(
+              (el, i, arr) => arr.indexOf(el) === i,
+            );
+          const relayoutTodoDocks = () => {
+            const docks = allDocks();
+            let top = 72;
+            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 (
+                document.querySelector('.wg-todo-dock[data-wg-todo-key="_default"]') ||
+                document.getElementById("wg-todo-dock")
+              );
+            }
+            const all = document.querySelectorAll(".wg-todo-dock");
+            for (let i = 0; i < all.length; i++) {
+              if (all[i].getAttribute("data-wg-todo-key") === String(key)) return all[i];
+            }
+            return null;
+          };
+
+          // keep + no new payload: do not remove existing docks (PIA #10).
+          if (sync === "keep") {
+            if (!dockState && !list.length) return;
+            // After navigation the DOM may be gone - recreate from carried dock.
+            sync = "set";
+          }
+          // Default replace=true: one checklist. parallel docks only when replace:false.
+          const replace =
+            !(payload && !Array.isArray(payload) && payload.replace === false) &&
+            !(payload && !Array.isArray(payload) && payload.parallel === true);
+          const hasDock =
+            !!(dockState && Array.isArray(dockState.groups) && dockState.groups.length);
+          // Explicit clear only - never treat "set + dock + empty list" as clear
+          // (that thrash was marks -> blank in a few ms).
+          if (sync === "clear" || (sync === "set" && !hasDock && !list.length)) {
+            const clearId =
+              (payload && !Array.isArray(payload) && payload.todoId && String(payload.todoId).trim()) ||
+              (dockState && dockState.id && String(dockState.id).trim()) ||
+              "";
+            if (clearId && !replace) {
+              const el = findDock(clearId);
+              if (el) el.remove();
+            } else {
+              allDocks().forEach((el) => el.remove());
+            }
+            relayoutTodoDocks();
+            return;
+          }
+
+          if (sync === "set" && replace) {
+            // Drop sibling docks so we never stack duplicates.
+            for (const el of allDocks()) {
+              const key = el.getAttribute("data-wg-todo-key") || "_default";
+              if (key !== dockKey) el.remove();
+            }
+          }
+
+          const POS = ["left", "right"];
+          let dock = findDock(dockKey);
+          if (!dock) {
+            dock = document.createElement("div");
+            dock.className = "wg-todo-dock";
+            dock.setAttribute("data-wg-todo-key", dockKey);
+            if (dockKey === "_default") dock.id = "wg-todo-dock";
+            else dock.id = "wg-todo-dock--" + dockKey.replace(/[^a-zA-Z0-9_-]/g, "-");
+            dock.setAttribute("data-wg-ui", "1");
+            dock.setAttribute("data-wg-modal", "todos");
+            dock.setAttribute("data-wg-ready", "1");
+            let saved = null;
+            try {
+              saved = localStorage.getItem("wg-todo-pos");
+            } catch {
+              /* ignore */
+            }
+            const start =
+              wantPos ||
+              (saved && POS.includes(saved) ? saved : todoPos === "right" ? "right" : "left");
+            dock.dataset.pos = start;
+            dock.title = "Click to move checklist: left / right";
+            dock.addEventListener("click", (e) => {
+              e.stopPropagation();
+              const i = POS.indexOf(dock.dataset.pos || "left");
+              const next = POS[(i + 1) % POS.length];
+              dock.dataset.pos = next;
+              try {
+                localStorage.setItem("wg-todo-pos", next);
+              } catch {
+                /* ignore */
+              }
+            });
+            document.documentElement.appendChild(dock);
+          } else if (wantPos) {
+            dock.dataset.pos = wantPos;
+            try {
+              localStorage.setItem("wg-todo-pos", wantPos);
+            } catch {
+              /* ignore */
+            }
+          }
+
+          const esc = (s) =>
+            String(s)
+              .replace(/&/g, "&amp;")
+              .replace(/</g, "&lt;")
+              .replace(/>/g, "&gt;")
+              .replace(/"/g, "&quot;");
+          const attrId = (raw) => {
+            const id = raw != null && String(raw).trim() ? String(raw).trim() : "";
+            return id ? ' data-wg-todo-item="' + esc(id) + '"' : "";
+          };
+          // Compact + cap: >cap rows folds overflow; hover shows up to expandCap; "+N more" pins expand.
+          const ui = (payload && !Array.isArray(payload) && payload.ui) || window.__wgTodoDockUi || {};
+          const COMPACT_AT = Number(ui.cap) > 0 ? Number(ui.cap) : 5;
+          const WINDOW = COMPACT_AT;
+          const EXPAND_MAX = Number(ui.expandCap) > 0 ? Number(ui.expandCap) : 14;
+          const compactEnabled = ui.compact !== false;
+          const flattenItems = () => {
+            if (dockState && Array.isArray(dockState.groups) && dockState.groups.length) {
+              const out = [];
+              for (const g of dockState.groups) {
+                for (const t of g.items || []) out.push({ ...t, __style: g.style || dockState.style });
+              }
+              return out;
+            }
+            return (list || []).map((t) => ({ ...t, __style: "sequential" }));
+          };
+          const windowBounds = (items, cap) => {
+            const n = items.length;
+            if (n <= cap) return { start: 0, end: n };
+            let cur = items.findIndex((t) => t.current);
+            if (cur < 0) cur = items.findIndex((t) => !t.done);
+            if (cur < 0) cur = 0;
+            let start = Math.max(0, cur - Math.floor((cap - 1) / 2));
+            let end = Math.min(n, start + cap);
+            start = Math.max(0, end - cap);
+            return { start, end };
+          };
+          const renderItems = (items, style, foldMeta, indexOffset) => {
+            const offset = indexOffset || 0;
+            const rawStyle = String(style || "sequential").toLowerCase();
+            const st =
+              rawStyle === "checklist"
+                ? "checklist"
+                : rawStyle === "bullets" ||
+                    rawStyle === "bullet" ||
+                    rawStyle === "list" ||
+                    rawStyle === "ul" ||
+                    rawStyle === "points" ||
+                    rawStyle === "plain"
+                  ? "bullets"
+                  : "sequential";
+            const foldStart = foldMeta ? foldMeta.foldStart : -1;
+            const foldEnd = foldMeta ? foldMeta.foldEnd : -1;
+            const deepStart = foldMeta ? foldMeta.deepStart : -1;
+            const deepEnd = foldMeta ? foldMeta.deepEnd : -1;
+            return (
+              '<ul class="wg-todos-list" data-wg-todo-style="' +
+              st +
+              '">' +
+              (items || [])
+                .map((t, idx) => {
+                  const gi = offset + idx;
+                  const clsBase =
+                    st === "bullets"
+                      ? t.done
+                        ? "wg-todo-done"
+                        : "wg-todo-pending"
+                      : t.current
+                        ? "wg-todo-current"
+                        : t.done
+                          ? "wg-todo-done"
+                          : "wg-todo-pending";
+                  let foldCls = "";
+                  if (foldStart >= 0 && (gi < foldStart || gi >= foldEnd)) foldCls += " wg-todo-fold";
+                  if (deepStart >= 0 && (gi < deepStart || gi >= deepEnd)) foldCls += " wg-todo-fold-deep";
+                  let mark;
+                  if (st === "checklist") {
+                    mark = t.done ? "☑" : "☐";
+                  } else if (st === "bullets") {
+                    mark = "•";
+                  } else {
+                    mark = t.done ? "✓" : t.current ? "→" : "○";
+                  }
+                  const rowId = t.id || t.name || "";
+                  return (
+                    '<li class="' +
+                    clsBase +
+                    foldCls +
+                    '"' +
+                    attrId(rowId) +
+                    '><span class="wg-todo-mark">' +
+                    mark +
+                    "</span><span>" +
+                    esc(t.text || "") +
+                    "</span></li>"
+                  );
+                })
+                .join("") +
+              "</ul>"
+            );
+          };
+
+          if (dockKey !== "_default") dock.setAttribute("data-wg-todo-id", dockKey);
+          else dock.removeAttribute("data-wg-todo-id");
+
+          const flat = flattenItems();
+          const compact = compactEnabled && flat.length > COMPACT_AT;
+          const win = windowBounds(flat, WINDOW);
+          const expand = windowBounds(flat, EXPAND_MAX);
+          const foldMeta = compact
+            ? {
+                foldStart: win.start,
+                foldEnd: win.end,
+                deepStart: expand.start,
+                deepEnd: expand.end,
+              }
+            : null;
+          const hiddenCompact = compact ? flat.length - (win.end - win.start) : 0;
+          const hiddenExpand = compact ? flat.length - (expand.end - expand.start) : 0;
+
+          let html = "";
+          if (dockState && Array.isArray(dockState.groups) && dockState.groups.length) {
+            const dockTitle = dockState.title && String(dockState.title).trim();
+            if (dockTitle) {
+              html += '<div class="wg-todo-dock-title">' + esc(dockTitle) + "</div>";
+            }
+            let globalIdx = 0;
+            for (const g of dockState.groups) {
+              const gTitle = g.title && String(g.title).trim();
+              const gid = g.id || g.name || "";
+              html +=
+                '<div class="wg-todo-group"' +
+                (gid ? ' data-wg-todo-group="' + esc(gid) + '"' : "") +
+                ">";
+              if (gTitle) {
+                html += '<div class="wg-todo-group-title">' + esc(gTitle) + "</div>";
+              }
+              const gItems = g.items || [];
+              html += renderItems(gItems, g.style || dockState.style, foldMeta, globalIdx);
+              html += "</div>";
+              globalIdx += gItems.length;
+            }
+          } else {
+            html = renderItems(list, "sequential", foldMeta, 0);
+          }
+          if (compact && hiddenCompact > 0) {
+            const n = dock.dataset.expanded === "1" ? hiddenExpand : hiddenCompact;
+            if (n > 0) {
+              html +=
+                '<div class="wg-todo-more" data-wg-todo-more="1" title="Click to expand / collapse">' +
+                "+" +
+                n +
+                " more</div>";
+            }
+          }
+          if (compact) dock.dataset.compact = "1";
+          else {
+            delete dock.dataset.compact;
+            delete dock.dataset.expanded;
+          }
+          dock.innerHTML = html;
+          const moreBtn = dock.querySelector("[data-wg-todo-more]");
+          if (moreBtn) {
+            moreBtn.addEventListener("click", (e) => {
+              e.stopPropagation();
+              if (dock.dataset.expanded === "1") delete dock.dataset.expanded;
+              else dock.dataset.expanded = "1";
+              if (window.__wgSyncTodos && dock._wgLastPayload) {
+                window.__wgSyncTodos(dock._wgLastPayload);
+              }
+            });
+          }
+          dock._wgLastPayload = syncPayload;
+          relayoutTodoDocks();
+          if (window.__wgStampModal) {
+            window.__wgStampModal(dock, "todos", { ready: true });
+          }
+        };
+}

package/dist/runner/overlay-css.js

@@ -1,6 +1,8 @@
 // Moved verbatim from the former CHAIN_RUNNER_SCRIPT template string in cli.ts (see src/ARCHITECTURE.md).
 // Runs inside the target project's own waygraph copy - keep it dependency-light and self-contained.
 import { WAYGRAPH_RING_CSS } from "../highlights.js";
+import { cursorCss } from "../ui/components/cursor.js";
+import { SURFACE } from "../ui/tokens.js";
 
 // ---------------------------------------------------------------------------
 // WAYGRAPH_STEP=1 - human-verification overlay: one Block at a time, a
@@ -26,20 +28,7 @@ export const RING_CSS =
   // Travel duration is JS-driven per call via --wg-cursor-ms, same reason
   // the clip engine's own comment gives: a hardcoded CSS duration would
   // make the speed param a no-op.
-  "#wg-cursor{position:fixed;z-index:2147483647;width:24px;height:24px;pointer-events:none;" +
-  "left:0;top:0;opacity:0;margin:0;" +
-  "transition:transform var(--wg-cursor-ms,600ms) cubic-bezier(.22,1,.36,1),opacity .2s ease;" +
-  "filter:drop-shadow(0 2px 4px rgba(12,12,26,.4));}" +
-  "#wg-click-pulse{position:fixed;z-index:2147483647;width:14px;height:14px;" +
-  "margin-left:-7px;margin-top:-7px;border-radius:50%;pointer-events:none;opacity:0;" +
-  "border:2px solid #7C3AED;background:rgba(124,58,237,.25);}" +
-  "#wg-click-pulse[data-tone=auto]{border-color:#9CA3AF;background:rgba(156,163,175,.28);}" +
-  "#wg-click-pulse[data-tone=info]{border-color:#3B82F6;background:rgba(59,130,246,.28);}" +
-  "#wg-click-pulse[data-tone=warning]{border-color:#EAB308;background:rgba(234,179,8,.28);}" +
-  "#wg-click-pulse[data-tone=danger]{border-color:#EF4444;background:rgba(239,68,68,.28);}" +
-  "#wg-click-pulse[data-tone=success]{border-color:#22C55E;background:rgba(34,197,94,.28);}" +
-  "#wg-click-pulse.wg-pulse{animation:wg-pulse .5s ease-out;}" +
-  "@keyframes wg-pulse{0%{opacity:.9;transform:scale(.4);}100%{opacity:0;transform:scale(2.4);}}" +
+  cursorCss() +
   // Spotlight: dim everything except the highlight target (focus: true).
   "#wg-focus-veil{position:fixed;z-index:2147483644;pointer-events:none;" +
   "border-radius:12px;box-shadow:0 0 0 9999px rgba(8,4,20,.62);" +
@@ -62,7 +51,7 @@ export const RING_CSS =
   "#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;" +
-  "background:rgba(20,10,40,.94);color:#fff;border-radius:14px;" +
+  "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
   // EVERY step - fast was the only way to avoid feeling laggy. Now that
@@ -106,7 +95,7 @@ export const RING_CSS =
   // 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:72px;left:14px;" +
   "width:min(280px,42vw);max-height:calc(100vh - 100px);overflow:auto;box-sizing:border-box;" +
-  "padding:10px 12px;background:rgba(20,10,40,.94);color:#fff;border-radius:12px;" +
+  "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);}" +
@@ -147,7 +136,7 @@ export const RING_CSS =
   // Always-on zoom HUD - bottom-right (top-left is crowded: todos + banners).
   "#wg-zoom-badge{position:fixed;z-index:2147483646;bottom:14px;right:14px;" +
   "display:flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;" +
-  "border-radius:999px;background:rgba(20,10,40,.94);color:#f0e8ff;" +
+  "border-radius:999px;background:" + SURFACE + ";color:#f0e8ff;" +
   "border:1px solid rgba(250,204,21,.6);box-shadow:0 6px 18px rgba(0,0,0,.4);" +
   "font:700 12px/1.2 system-ui,sans-serif;pointer-events:none;" +
   "opacity:1;transform:translateY(0);}" +
@@ -255,7 +244,7 @@ export const RING_CSS =
   "#wg-modules .wg-mod-current{background:#7C3AED;color:#fff;}" +
   "#wg-modules .wg-mod-upcoming{background:transparent;color:#5a4a80;border:1px solid #3a2a60;}" +
   "#wg-banner{position:fixed;z-index:2147483647;top:14px;max-width:320px;" +
-  "background:rgba(20,10,40,.94);color:#fff;border-radius:12px;padding:10px 16px;" +
+  "background:" + SURFACE + ";color:#fff;border-radius:12px;padding:10px 16px;" +
   "font:14px/1.4 system-ui,sans-serif;box-shadow:0 8px 20px rgba(0,0,0,.3);" +
   "border:1px solid rgba(124,58,237,.4);cursor:pointer;user-select:none;}" +
   "#wg-banner[data-pos=left]{left:14px;right:auto;transform:none;}" +