waygraph 0.15.27 → 0.15.28

package/dist/highlights/css.js

@@ -1,3 +1,4 @@
+import { ringCss } from "../ui/components/ring.js";
 // Split out of the former 2,100-line highlights.ts (see src/ARCHITECTURE.md). Behavior unchanged.
 /**
  * The `#wg-ring` / `#wg-ring-label` CSS (tone/size/weight variants) - the
@@ -12,47 +13,4 @@
  * renders them belongs alongside it for the same reason. `cli.ts` imports
  * this constant instead of keeping its own duplicate copy.
  */
-export const WAYGRAPH_RING_CSS = "#wg-ring{position:fixed;z-index:2147483646;pointer-events:none;opacity:0;" +
-    "border:2.5px solid #7C3AED;border-radius:10px;" +
-    // Opacity fade only - NEVER transition border-color/box-shadow. Tone swaps
-    // (auto gray -> planned purple -> warning yellow) must snap instantly;
-    // color transitions read as a muddy gray/purple/yellow morph on ring 2+.
-    "box-shadow:0 0 0 4px rgba(124,58,237,.16);transition:opacity .3s ease;}" +
-    // Planned (stubs / fixtures / YAP / instruction.highlights) = purple.
-    // Automation (verify fallback, unmatched fill/click) = gray - operators
-    // can ignore engine checks and watch purple + semantic tones.
-    "#wg-ring[data-tone=planned]{border-color:#7C3AED;box-shadow:0 0 0 4px rgba(124,58,237,.16);}" +
-    "#wg-ring[data-tone=auto]{border-color:#9CA3AF;box-shadow:0 0 0 4px rgba(156,163,175,.28);}" +
-    "#wg-ring[data-tone=info]{border-color:#3B82F6;box-shadow:0 0 0 4px rgba(59,130,246,.22);}" +
-    "#wg-ring[data-tone=warning]{border-color:#EAB308;box-shadow:0 0 0 4px rgba(234,179,8,.22);}" +
-    "#wg-ring[data-tone=danger]{border-color:#EF4444;box-shadow:0 0 0 4px rgba(239,68,68,.22);}" +
-    "#wg-ring[data-tone=success]{border-color:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.22);}" +
-    // Real, direct user request: a visible color distinction between a real
-    // Playwright-driven action (auto gray, unchanged) and a pure DOM
-    // inspection (this - orange).
-    "#wg-ring[data-tone=orange]{border-color:#F97316;box-shadow:0 0 0 4px rgba(249,115,22,.22);}" +
-    // A real element, not a ::after pseudo-element - a pseudo-element's
-    // position is CSS-relative to the ring's own box (left:0 always meant
-    // "the ring's own left edge"), so it had no way to be clamped back onto
-    // screen when that box sat near a viewport edge - the label's text just
-    // ran off, invisibly, with no overflow guard at all. A real sibling can
-    // be measured (its actual rendered width) and repositioned in JS -
-    // pushed back onto screen, same width, never shrunk. See
-    // window.__wgPositionRing in cli.ts's own installOverlay.
-    "#wg-ring-label{position:fixed;z-index:2147483646;pointer-events:none;opacity:0;" +
-    "max-width:min(360px,70vw);white-space:normal;padding:6px 10px;border-radius:7px;background:#7C3AED;color:#fff;" +
-    "font:600 12px/1.35 system-ui,sans-serif;transition:opacity .3s ease;}" +
-    "#wg-ring-label[data-tone=planned]{background:#7C3AED;color:#fff;}" +
-    "#wg-ring-label[data-tone=auto]{background:#6B7280;color:#fff;}" +
-    "#wg-ring-label[data-tone=info]{background:#2563EB;color:#fff;}" +
-    "#wg-ring-label[data-tone=warning]{background:#EAB308;color:#1c1917;}" +
-    "#wg-ring-label[data-tone=danger]{background:#DC2626;color:#fff;}" +
-    "#wg-ring-label[data-tone=success]{background:#16A34A;color:#fff;}" +
-    "#wg-ring-label[data-tone=orange]{background:#EA580C;color:#fff;}" +
-    // size: ring pad + label font; weight: label boldness
-    "#wg-ring[data-size=sm]{border-width:1.5px;border-radius:8px;}" +
-    "#wg-ring[data-size=lg]{border-width:4px;border-radius:12px;}" +
-    "#wg-ring-label[data-size=sm]{font-size:10px;line-height:1.25;padding:4px 7px;border-radius:5px;}" +
-    "#wg-ring-label[data-size=lg]{font-size:16px;line-height:1.35;padding:8px 14px;border-radius:9px;max-width:min(480px,85vw);}" +
-    "#wg-ring-label[data-weight=bold]{font-weight:800;}" +
-    "#wg-ring-label[data-weight=normal]{font-weight:600;}";
+export const WAYGRAPH_RING_CSS = ringCss();

package/dist/pilot-overlay.d.ts

@@ -1,21 +1,3 @@
-/**
- * A small, self-contained on-page indicator for a live AutoSession -
- * "this browser is being driven by Waygraph," plus an expandable panel
- * showing the session's own current live menu. Real, direct user request:
- * a headful Pilot session looks like an ordinary browser tab with no
- * indication anything is driving it, which matters once a human might be
- * co-driving the same visible session (see `AutoSession.resync()`'s own
- * doc comment for the related state-desync problem that scenario causes).
- *
- * Deliberately NOT built on `src/cli.ts`'s own demo-panel/banner overlay
- * system, for the same reason `pilot-v1`'s narrate-mode ring renderer
- * wasn't either (see the git history at tag
- * `waygraph-pilot-v1-logs-prettified`): `cli.ts` runs `main().catch(...)`
- * unconditionally at module load with no `import.meta.url` guard, so
- * importing anything from it here would trigger the whole CLI's argument
- * dispatch as a side effect of loading a library module - unsafe. This
- * ships its own small, purpose-built badge + panel instead.
- */
 import type { BrowserContext, Page } from "@playwright/test";
 import type { SessionSnapshot } from "./auto-session.js";
 import { type HighlightTone, type DevicePreset, type DeviceState, type TodoDockUiOpts } from "./highlights.js";

package/dist/pilot-overlay.js

@@ -1,3 +1,23 @@
+/**
+ * A small, self-contained on-page indicator for a live AutoSession -
+ * "this browser is being driven by Waygraph," plus an expandable panel
+ * showing the session's own current live menu. Real, direct user request:
+ * a headful Pilot session looks like an ordinary browser tab with no
+ * indication anything is driving it, which matters once a human might be
+ * co-driving the same visible session (see `AutoSession.resync()`'s own
+ * doc comment for the related state-desync problem that scenario causes).
+ *
+ * Deliberately NOT built on `src/cli.ts`'s own demo-panel/banner overlay
+ * system, for the same reason `pilot-v1`'s narrate-mode ring renderer
+ * wasn't either (see the git history at tag
+ * `waygraph-pilot-v1-logs-prettified`): `cli.ts` runs `main().catch(...)`
+ * unconditionally at module load with no `import.meta.url` guard, so
+ * importing anything from it here would trigger the whole CLI's argument
+ * dispatch as a side effect of loading a library module - unsafe. This
+ * ships its own small, purpose-built badge + panel instead.
+ */
+import { pilotFxRingCss } from "./ui/components/ring.js";
+import { SURFACE } from "./ui/tokens.js";
 import { WAYGRAPH_RING_CSS, normalizeHighlightTone, normalizeHighlightSize, normalizeHighlightWeight, formatHighlightCaption, resolveDeviceState, resolveTodoDockUi, } from "./highlights.js";
 // Real, direct user request: this overlay's own colors were an improvised
 // purple/white scheme (#a78bfa / #1a1033) that didn't match anything else -
@@ -22,7 +42,7 @@ const OVERLAY_CSS = `
 }
 #wg-pilot-panel {
   display: none; margin-top: 6px; max-width: 420px; max-height: 320px;
-  overflow-y: auto; background: rgba(20,10,40,.94); color: #fff; border-radius: 8px;
+  overflow-y: auto; background: ${SURFACE}; color: #fff; border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.25); padding: 8px 10px;
 }
 /* The graph tab renders a real Mermaid flowchart, which needs more room than
@@ -55,42 +75,17 @@ const OVERLAY_CSS = `
 #wg-pilot-activity {
   position: fixed; z-index: 2147483000; bottom: 12px; left: 12px;
   font: 12px/1.4 ui-monospace, "SF Mono", Consolas, monospace;
-  background: rgba(20,10,40,.94); color: #fff; padding: 6px 10px; border-radius: 8px;
+  background: ${SURFACE}; color: #fff; padding: 6px 10px; border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.25); white-space: nowrap; pointer-events: none;
   opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s;
 }
 #wg-pilot-activity.wg-pilot-toast-show { opacity: 1; transform: translateY(0); }
-/* Agent-sent fixture rings share tone/size CSS with #wg-ring (demo language). */
-.wg-pilot-fx-ring{position:fixed;z-index:2147483645;pointer-events:none;opacity:0;
-  border:3px solid #7C3AED;border-radius:10px;box-sizing:border-box;
-  transition:opacity .12s ease,left .12s,top .12s,width .12s,height .12s;}
-.wg-pilot-fx-ring[data-tone=planned]{border-color:#7C3AED;box-shadow:0 0 0 4px rgba(124,58,237,.16);}
-.wg-pilot-fx-ring[data-tone=auto]{border-color:#9CA3AF;box-shadow:0 0 0 4px rgba(156,163,175,.28);}
-.wg-pilot-fx-ring[data-tone=info]{border-color:#3B82F6;box-shadow:0 0 0 4px rgba(59,130,246,.22);}
-.wg-pilot-fx-ring[data-tone=warning]{border-color:#EAB308;box-shadow:0 0 0 4px rgba(234,179,8,.22);}
-.wg-pilot-fx-ring[data-tone=danger]{border-color:#EF4444;box-shadow:0 0 0 4px rgba(239,68,68,.22);}
-.wg-pilot-fx-ring[data-tone=success]{border-color:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.22);}
-.wg-pilot-fx-ring[data-tone=orange]{border-color:#F97316;box-shadow:0 0 0 4px rgba(249,115,22,.22);}
-.wg-pilot-fx-label{position:fixed;z-index:2147483645;pointer-events:none;opacity:0;
-  font:600 12px/1.3 ui-sans-serif,system-ui,sans-serif;padding:5px 9px;border-radius:6px;
-  max-width:min(360px,80vw);box-shadow:0 2px 8px rgba(0,0,0,.25);white-space:nowrap;
-  overflow:hidden;text-overflow:ellipsis;transition:opacity .12s ease;}
-.wg-pilot-fx-label[data-tone=planned]{background:#7C3AED;color:#fff;}
-.wg-pilot-fx-label[data-tone=auto]{background:#6B7280;color:#fff;}
-.wg-pilot-fx-label[data-tone=info]{background:#2563EB;color:#fff;}
-.wg-pilot-fx-label[data-tone=warning]{background:#EAB308;color:#1c1917;}
-.wg-pilot-fx-label[data-tone=danger]{background:#DC2626;color:#fff;}
-.wg-pilot-fx-label[data-tone=success]{background:#16A34A;color:#fff;}
-.wg-pilot-fx-label[data-tone=orange]{background:#EA580C;color:#fff;}
-.wg-pilot-fx-ring[data-size=sm]{border-width:1.5px;border-radius:8px;}
-.wg-pilot-fx-ring[data-size=lg]{border-width:4px;border-radius:12px;}
-.wg-pilot-fx-label[data-size=sm]{font-size:10px;padding:4px 7px;}
-.wg-pilot-fx-label[data-size=lg]{font-size:16px;padding:8px 14px;}
-.wg-pilot-fx-label[data-weight=bold]{font-weight:800;}
+/* Agent-sent fixture rings: generated from ui/tokens (tones shared with #wg-ring). */
+${pilotFxRingCss()}
 #wg-pilot-fx-todos{
   position:fixed;z-index:2147483645;top:72px;max-width:280px;max-height:calc(100vh - 100px);overflow:auto;
   font:12px/1.4 ui-sans-serif,system-ui,sans-serif;color:#fff;
-  background:rgba(20,10,40,.94);border-radius:10px;padding:10px 12px;
+  background:${SURFACE};border-radius:10px;padding:10px 12px;
   box-shadow:0 2px 10px rgba(0,0,0,.3);pointer-events:auto;
   transition:opacity .25s ease;
 }
@@ -113,7 +108,7 @@ const OVERLAY_CSS = `
 /* Zoom HUD (demo parity - badge only; no CSS scale of the page). */
 #wg-pilot-fx-zoom{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;}
 #wg-pilot-fx-zoom .wg-pilot-fx-zoom-ico{width:18px;height:18px;display:flex;align-items:center;justify-content:center;
@@ -122,7 +117,7 @@ const OVERLAY_CSS = `
 #wg-pilot-fx-zoom .wg-pilot-fx-zoom-val{color:#fde68a;font-variant-numeric:tabular-nums;font-weight:800;min-width:3.2em;}
 #wg-pilot-fx-zoom[data-zoomed="1"]{border-color:#fbbf24;}
 #wg-pilot-fx-device{position:fixed;z-index:2147483646;top:14px;right:14px;
-  padding:8px 12px;border-radius:10px;background:rgba(20,10,40,.94);color:#f0e8ff;
+  padding:8px 12px;border-radius:10px;background:${SURFACE};color:#f0e8ff;
   border:1px solid rgba(124,58,237,.55);font:700 12px/1.2 system-ui,sans-serif;
   pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.35);}
 #wg-pilot-fx-device[data-preset=mobile]{border-color:#3B82F6;}

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;}" +

package/dist/step-overlay.js

@@ -1,49 +1,5 @@
-const RING_CSS = "#wg-ring{position:fixed;z-index:2147483646;pointer-events:none;opacity:0;" +
-    "border:2.5px solid #7C3AED;border-radius:10px;box-shadow:0 0 0 4px rgba(124,58,237,.16);" +
-    // Opacity only - tone color must snap (no gray/purple/yellow morph).
-    "transition:opacity .3s ease;}" +
-    // Automation = gray; semantic tones for authored highlights.
-    "#wg-ring[data-tone=planned]{border-color:#7C3AED;box-shadow:0 0 0 4px rgba(124,58,237,.16);}" +
-    "#wg-ring[data-tone=auto]{border-color:#9CA3AF;box-shadow:0 0 0 4px rgba(156,163,175,.28);}" +
-    "#wg-ring[data-tone=info]{border-color:#3B82F6;box-shadow:0 0 0 4px rgba(59,130,246,.22);}" +
-    "#wg-ring[data-tone=warning]{border-color:#EAB308;box-shadow:0 0 0 4px rgba(234,179,8,.22);}" +
-    "#wg-ring[data-tone=danger]{border-color:#EF4444;box-shadow:0 0 0 4px rgba(239,68,68,.22);}" +
-    "#wg-ring[data-tone=success]{border-color:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.22);}" +
-    "#wg-ring-label{position:fixed;z-index:2147483646;pointer-events:none;opacity:0;" +
-    "white-space:nowrap;padding:4px 9px;border-radius:7px;background:#7C3AED;color:#fff;" +
-    "font:600 12px/1.2 system-ui,sans-serif;transition:opacity .3s ease;}" +
-    "#wg-ring-label[data-tone=planned]{background:#7C3AED;color:#fff;}" +
-    "#wg-ring-label[data-tone=auto]{background:#6B7280;color:#fff;}" +
-    "#wg-ring-label[data-tone=info]{background:#2563EB;color:#fff;}" +
-    "#wg-ring-label[data-tone=warning]{background:#EAB308;color:#1c1917;}" +
-    "#wg-ring-label[data-tone=danger]{background:#DC2626;color:#fff;}" +
-    "#wg-ring-label[data-tone=success]{background:#16A34A;color:#fff;}" +
-    "#wg-ring[data-size=sm]{border-width:1.5px;border-radius:8px;}" +
-    "#wg-ring[data-size=lg]{border-width:4px;border-radius:12px;}" +
-    "#wg-ring-label[data-size=sm]{font-size:10px;line-height:1.25;padding:4px 7px;border-radius:5px;}" +
-    "#wg-ring-label[data-size=lg]{font-size:16px;line-height:1.35;padding:8px 14px;border-radius:9px;}" +
-    "#wg-ring-label[data-weight=bold]{font-weight:800;}" +
-    "#wg-ring-label[data-weight=normal]{font-weight:600;}" +
-    "#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);}}" +
-    "#wg-banner{position:fixed;z-index:2147483647;top:14px;left:14px;" +
-    "background:rgba(20,10,40,.94);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);}" +
-    "#wg-banner .wg-banner-tag{display:block;font-size:10px;font-weight:700;color:#c9a6ff;" +
-    "letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px;}";
+import { composeStepOverlay } from "./ui/compose.js";
+const RING_CSS = composeStepOverlay();
 const FAVICON = "data:image/svg+xml," +
     encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='#7C3AED'/></svg>");
 export async function installDemoChrome(page, title = "waygraph auto", options = {}) {

package/dist/ui/components/banner.d.ts

@@ -0,0 +1,2 @@
+/** Top-left demo banner (`#wg-banner`). */
+export declare function bannerCss(): string;

package/dist/ui/components/banner.js

@@ -0,0 +1,10 @@
+import { ACCENT_SOFT, SURFACE } from "../tokens.js";
+/** Top-left demo banner (`#wg-banner`). */
+export function bannerCss() {
+    return ("#wg-banner{position:fixed;z-index:2147483647;top:14px;left:14px;" +
+        `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);}" +
+        `#wg-banner .wg-banner-tag{display:block;font-size:10px;font-weight:700;color:${ACCENT_SOFT};` +
+        "letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px;}");
+}

package/dist/ui/components/cursor.d.ts

@@ -0,0 +1,2 @@
+/** Travelling mouse cursor + click ripple (`#wg-cursor`, `#wg-click-pulse`). */
+export declare function cursorCss(): string;

package/dist/ui/components/cursor.js

@@ -0,0 +1,19 @@
+import { TONES } from "../tokens.js";
+/** Travelling mouse cursor + click ripple (`#wg-cursor`, `#wg-click-pulse`). */
+export function cursorCss() {
+    const p = TONES.planned;
+    const pulseTones = ["auto", "info", "warning", "danger", "success"]
+        .map((n) => `#wg-click-pulse[data-tone=${n}]{border-color:${TONES[n].ring};background:${TONES[n].pulse};}`)
+        .join("");
+    return ("#wg-cursor{position:fixed;z-index:2147483647;width:24px;height:24px;pointer-events:none;" +
+        "left:0;top:0;opacity:0;margin:0;" +
+        // Travel time is JS-driven via --wg-cursor-ms (a hardcoded duration would make speed a no-op).
+        "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 ${p.ring};background:${p.pulse};}` +
+        pulseTones +
+        "#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);}}");
+}

package/dist/ui/components/ring.d.ts

@@ -0,0 +1,4 @@
+/** The highlight ring + its label (`#wg-ring`, `#wg-ring-label`): tone / size / weight variants. */
+export declare function ringCss(): string;
+/** Agent-sent pilot fixture rings/labels (`.wg-pilot-fx-ring|label`), same tones as the demo ring. */
+export declare function pilotFxRingCss(): string;

package/dist/ui/components/ring.js

@@ -0,0 +1,44 @@
+import { TONES } from "../tokens.js";
+const toneNames = Object.keys(TONES);
+/** Tone rules for `sel[data-tone=x]{...}` from the token table. */
+function toneRules(sel, decl, only) {
+    return (only ?? toneNames).map((n) => `${sel}[data-tone=${n}]{${decl(TONES[n])}}`).join("");
+}
+/** The highlight ring + its label (`#wg-ring`, `#wg-ring-label`): tone / size / weight variants. */
+export function ringCss() {
+    const p = TONES.planned;
+    return ("#wg-ring{position:fixed;z-index:2147483646;pointer-events:none;opacity:0;" +
+        `border:2.5px solid ${p.ring};border-radius:10px;` +
+        // Opacity fade only - NEVER transition border-color/box-shadow: tone swaps must snap.
+        `box-shadow:0 0 0 4px ${p.glow};transition:opacity .3s ease;}` +
+        toneRules("#wg-ring", (t) => `border-color:${t.ring};box-shadow:0 0 0 4px ${t.glow};`) +
+        // A real element (not ::after) so JS can measure it and clamp it back onto the screen.
+        "#wg-ring-label{position:fixed;z-index:2147483646;pointer-events:none;opacity:0;" +
+        `max-width:min(360px,70vw);white-space:normal;padding:6px 10px;border-radius:7px;background:${p.labelBg};color:${p.labelFg};` +
+        "font:600 12px/1.35 system-ui,sans-serif;transition:opacity .3s ease;}" +
+        toneRules("#wg-ring-label", (t) => `background:${t.labelBg};color:${t.labelFg};`) +
+        "#wg-ring[data-size=sm]{border-width:1.5px;border-radius:8px;}" +
+        "#wg-ring[data-size=lg]{border-width:4px;border-radius:12px;}" +
+        "#wg-ring-label[data-size=sm]{font-size:10px;line-height:1.25;padding:4px 7px;border-radius:5px;}" +
+        "#wg-ring-label[data-size=lg]{font-size:16px;line-height:1.35;padding:8px 14px;border-radius:9px;max-width:min(480px,85vw);}" +
+        "#wg-ring-label[data-weight=bold]{font-weight:800;}" +
+        "#wg-ring-label[data-weight=normal]{font-weight:600;}");
+}
+/** Agent-sent pilot fixture rings/labels (`.wg-pilot-fx-ring|label`), same tones as the demo ring. */
+export function pilotFxRingCss() {
+    const p = TONES.planned;
+    return (".wg-pilot-fx-ring{position:fixed;z-index:2147483645;pointer-events:none;opacity:0;" +
+        `border:3px solid ${p.ring};border-radius:10px;box-sizing:border-box;` +
+        "transition:opacity .12s ease,left .12s,top .12s,width .12s,height .12s;}" +
+        toneRules(".wg-pilot-fx-ring", (t) => `border-color:${t.ring};box-shadow:0 0 0 4px ${t.glow};`) +
+        ".wg-pilot-fx-label{position:fixed;z-index:2147483645;pointer-events:none;opacity:0;" +
+        "font:600 12px/1.3 ui-sans-serif,system-ui,sans-serif;padding:5px 9px;border-radius:6px;" +
+        "max-width:min(360px,80vw);box-shadow:0 2px 8px rgba(0,0,0,.25);white-space:nowrap;" +
+        "overflow:hidden;text-overflow:ellipsis;transition:opacity .12s ease;}" +
+        toneRules(".wg-pilot-fx-label", (t) => `background:${t.labelBg};color:${t.labelFg};`) +
+        ".wg-pilot-fx-ring[data-size=sm]{border-width:1.5px;border-radius:8px;}" +
+        ".wg-pilot-fx-ring[data-size=lg]{border-width:4px;border-radius:12px;}" +
+        ".wg-pilot-fx-label[data-size=sm]{font-size:10px;padding:4px 7px;}" +
+        ".wg-pilot-fx-label[data-size=lg]{font-size:16px;padding:8px 14px;}" +
+        ".wg-pilot-fx-label[data-weight=bold]{font-weight:800;}");
+}

package/dist/ui/compose.d.ts

@@ -0,0 +1,4 @@
+/** Surface bundles: each surface asks only for the components it paints. */
+export declare const composeRing: () => string;
+export declare const composeStepOverlay: () => string;
+export declare const composePilotFx: () => string;

package/dist/ui/compose.js

@@ -0,0 +1,7 @@
+import { bannerCss } from "./components/banner.js";
+import { cursorCss } from "./components/cursor.js";
+import { pilotFxRingCss, ringCss } from "./components/ring.js";
+/** Surface bundles: each surface asks only for the components it paints. */
+export const composeRing = () => ringCss();
+export const composeStepOverlay = () => ringCss() + cursorCss() + bannerCss();
+export const composePilotFx = () => ringCss() + pilotFxRingCss();

package/dist/ui/tokens.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Design tokens for every waygraph overlay surface (demo stepper, pilot badge/panel,
+ * step overlay). The one place a colour changes: components in ./components build their
+ * CSS from these, so surfaces cannot drift apart.
+ */
+export type ToneName = "planned" | "auto" | "info" | "warning" | "danger" | "success" | "orange";
+export interface Tone {
+    /** Ring border + click-pulse border. */
+    ring: string;
+    /** Ring halo (box-shadow) colour. */
+    glow: string;
+    /** Click-pulse fill. */
+    pulse: string;
+    /** Label background / foreground. */
+    labelBg: string;
+    labelFg: string;
+}
+export declare const TONES: Record<ToneName, Tone>;
+/** Dark surface shared by panels, banner, docks, HUD chips. */
+export declare const SURFACE = "rgba(20,10,40,.94)";
+export declare const ACCENT = "#7C3AED";
+/** Secondary accent used on the dark surface (section titles, kinds). */
+export declare const ACCENT_SOFT = "#c9a6ff";
+/** Stacking order: one scale instead of magic numbers. */
+export declare const Z: {
+    readonly top: 2147483647;
+    readonly ring: 2147483646;
+    readonly fx: 2147483645;
+    readonly focus: 2147483644;
+    readonly dock: 2147483000;
+};

package/dist/ui/tokens.js

@@ -0,0 +1,21 @@
+/**
+ * Design tokens for every waygraph overlay surface (demo stepper, pilot badge/panel,
+ * step overlay). The one place a colour changes: components in ./components build their
+ * CSS from these, so surfaces cannot drift apart.
+ */
+export const TONES = {
+    planned: { ring: "#7C3AED", glow: "rgba(124,58,237,.16)", pulse: "rgba(124,58,237,.25)", labelBg: "#7C3AED", labelFg: "#fff" },
+    auto: { ring: "#9CA3AF", glow: "rgba(156,163,175,.28)", pulse: "rgba(156,163,175,.28)", labelBg: "#6B7280", labelFg: "#fff" },
+    info: { ring: "#3B82F6", glow: "rgba(59,130,246,.22)", pulse: "rgba(59,130,246,.28)", labelBg: "#2563EB", labelFg: "#fff" },
+    warning: { ring: "#EAB308", glow: "rgba(234,179,8,.22)", pulse: "rgba(234,179,8,.28)", labelBg: "#EAB308", labelFg: "#1c1917" },
+    danger: { ring: "#EF4444", glow: "rgba(239,68,68,.22)", pulse: "rgba(239,68,68,.28)", labelBg: "#DC2626", labelFg: "#fff" },
+    success: { ring: "#22C55E", glow: "rgba(34,197,94,.22)", pulse: "rgba(34,197,94,.28)", labelBg: "#16A34A", labelFg: "#fff" },
+    orange: { ring: "#F97316", glow: "rgba(249,115,22,.22)", pulse: "rgba(249,115,22,.28)", labelBg: "#EA580C", labelFg: "#fff" },
+};
+/** Dark surface shared by panels, banner, docks, HUD chips. */
+export const SURFACE = "rgba(20,10,40,.94)";
+export const ACCENT = "#7C3AED";
+/** Secondary accent used on the dark surface (section titles, kinds). */
+export const ACCENT_SOFT = "#c9a6ff";
+/** Stacking order: one scale instead of magic numbers. */
+export const Z = { top: 2147483647, ring: 2147483646, fx: 2147483645, focus: 2147483644, dock: 2147483000 };

package/package.json

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