waygraph 0.15.27 → 0.15.29

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.29",
   "type": "module",
   "description": "A typed graph of reusable Blocks for driving a browser through E2E flows.",
   "license": "MIT",