waygraph 0.13.0 → 0.13.2

package/dist/cli.js

@@ -532,17 +532,43 @@ const RING_CSS =
   "#wg-todo-dock[data-pos=right]{transform:translateX(calc(100vw - 100% - 28px));}" +
   "#wg-todo-dock[data-pos=left]{transform:translateX(0);}" +
   "#wg-todo-dock #wg-todos{list-style:none;margin:0;padding:0;background:transparent;border:none;}" +
-  // Device / touch badge (0.13+) - shows preset + remain|desktop reset.
+  // 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;" +
+  "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);" +
+  "font:600 13px/1.35 system-ui,sans-serif;pointer-events:none;" +
+  "opacity:0;transform:translateX(18px) scale(.96);" +
+  "transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1);}" +
+  "#wg-device-toast.wg-in{opacity:1;transform:translateX(0) scale(1);}" +
+  "#wg-device-toast.wg-out{opacity:0;transform:translateX(12px) scale(.98);}" +
+  "#wg-device-toast[data-preset=mobile]{border-color:#3B82F6;}" +
+  "#wg-device-toast[data-preset=tablet]{border-color:#22C55E;}" +
+  "#wg-device-toast[data-preset=desktop]{border-color:#9CA3AF;}" +
+  "#wg-device-toast .wg-dev-icon{flex:0 0 auto;width:36px;height:36px;border-radius:10px;" +
+  "display:flex;align-items:center;justify-content:center;background:rgba(124,58,237,.28);}" +
+  "#wg-device-toast[data-preset=mobile] .wg-dev-icon{background:rgba(59,130,246,.28);}" +
+  "#wg-device-toast[data-preset=tablet] .wg-dev-icon{background:rgba(34,197,94,.28);}" +
+  "#wg-device-toast[data-preset=desktop] .wg-dev-icon{background:rgba(156,163,175,.28);}" +
+  "#wg-device-toast .wg-dev-icon svg{width:22px;height:22px;display:block;}" +
+  "#wg-device-toast .wg-dev-copy{flex:1 1 auto;min-width:0;}" +
+  "#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;" +
-  "padding:6px 10px;border-radius:999px;background:rgba(20,10,40,.92);color:#f0e8ff;" +
+  "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;transition:opacity .25s ease;}" +
-  "#wg-device-badge.wg-in{opacity:1;}" +
+  "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);}" +
+  "#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[data-touch=1]::after{content:' · touch';opacity:.85;}" +
+  "#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-cursor[data-touch=1]{width:28px;height:28px;}" +
   "#wg-todos{list-style:none;margin:0 0 12px;padding:8px 10px;background:#0f0620;border-radius:8px;" +
   "border:1px solid #3a2a60;}" +
@@ -552,6 +578,9 @@ 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-todos[data-wg-todo-style=bullets] .wg-todo-pending," +
+  "#wg-todos[data-wg-todo-style=bullets] .wg-todo-current{color:#e8dcff;}" +
+  "#wg-todos[data-wg-todo-style=bullets] .wg-todo-mark{color:#c9a6ff;}" +
   "#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
@@ -1196,21 +1225,39 @@ async function installOverlay(page, title) {
             return id ? ' data-wg-todo-item="' + esc(id) + '"' : "";
           };
           const renderItems = (items, style) => {
-            const st = style === "checklist" ? "checklist" : "sequential";
+            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";
             return (
               '<ul id="wg-todos" data-wg-todo-style="' +
               st +
               '">' +
               (items || [])
                 .map((t) => {
-                  const cls = t.current
-                    ? "wg-todo-current"
-                    : t.done
-                      ? "wg-todo-done"
-                      : "wg-todo-pending";
+                  const cls =
+                    st === "bullets"
+                      ? t.done
+                        ? "wg-todo-done"
+                        : "wg-todo-pending"
+                      : t.current
+                        ? "wg-todo-current"
+                        : t.done
+                          ? "wg-todo-done"
+                          : "wg-todo-pending";
                   let mark;
                   if (st === "checklist") {
                     mark = t.done ? "\u2611" : "\u2610";
+                  } else if (st === "bullets") {
+                    mark = "\u2022";
                   } else {
                     mark = t.done ? "\u2713" : t.current ? "\u2192" : "\u25CB";
                   }
@@ -1266,15 +1313,14 @@ async function installOverlay(page, title) {
             window.__wgStampModal(dock, "todos", { ready: true });
           }
         };
-        // Device / touch badge (0.13+) - mirror todo sync keep/set/clear.
-        // Payload: { sync, device?, remain? }
+        // Device toast + chip (0.13.2+) - announce on set/clear; quiet chip on keep.
+        // Payload: { sync, device?, remain?, announce? }
         window.__wgSyncDevice = (payload) => {
           const sync =
             payload && (payload.sync === "clear" || payload.sync === "keep" || payload.sync === "set")
               ? payload.sync
               : "keep";
           const device = payload && payload.device ? payload.device : null;
-          let badge = document.getElementById("wg-device-badge");
           const cursor = document.getElementById("wg-cursor");
           const MOUSE_SVG =
             "<svg viewBox='0 0 32 32' width='24' height='24'>" +
@@ -1285,43 +1331,158 @@ async function installOverlay(page, title) {
             "<ellipse cx='16' cy='22' rx='7' ry='8' fill='#0C0C1A' stroke='#fff' stroke-width='1.4'/>" +
             "<rect x='12' y='6' width='8' height='16' rx='4' fill='#0C0C1A' stroke='#fff' stroke-width='1.4'/>" +
             "</svg>";
-          if (sync === "keep" && !device) return;
-          if (sync === "clear" || (device && device.preset === "desktop" && !device.touchMode)) {
-            if (badge) badge.remove();
-            if (cursor) {
+          const ICONS = {
+            mobile:
+              '<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' +
+              '<rect x="7" y="2.5" width="10" height="19" rx="2.2"/>' +
+              '<circle cx="12" cy="18.2" r="1.1" fill="#fff" stroke="none"/></svg>',
+            tablet:
+              '<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' +
+              '<rect x="3.5" y="4" width="17" height="16" rx="2"/>' +
+              '<circle cx="12" cy="17.2" r="1" fill="#fff" stroke="none"/></svg>',
+            desktop:
+              '<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' +
+              '<rect x="2.5" y="3.5" width="19" height="12.5" rx="1.5"/>' +
+              '<path d="M8 20h8M12 16v4"/></svg>',
+          };
+          const setCursor = (touch) => {
+            if (!cursor) return;
+            if (touch) {
+              cursor.setAttribute("data-touch", "1");
+              cursor.innerHTML = FINGER_SVG;
+            } else {
               cursor.removeAttribute("data-touch");
               cursor.innerHTML = MOUSE_SVG;
             }
-            if (sync === "clear" && !device) return;
-            // clear with desktop device: still hide badge (back to main)
-            if (device && device.preset === "desktop" && !device.touchMode) return;
+          };
+          const ensureChip = (preset, touch, remain) => {
+            let badge = document.getElementById("wg-device-badge");
+            if (preset === "desktop" && !touch) {
+              if (badge) {
+                badge.classList.remove("wg-in");
+                setTimeout(() => {
+                  const b = document.getElementById("wg-device-badge");
+                  if (b) b.remove();
+                }, 320);
+              }
+              return;
+            }
+            if (!badge) {
+              badge = document.createElement("div");
+              badge.id = "wg-device-badge";
+              badge.setAttribute("data-wg-ui", "1");
+              document.documentElement.appendChild(badge);
+            }
+            badge.dataset.preset = preset;
+            badge.dataset.touch = touch ? "1" : "0";
+            const chipLabel =
+              preset === "desktop" && !touch
+                ? "desktop"
+                : preset + (remain ? " · remain" : "");
+            badge.innerHTML =
+              '<span class="wg-dev-icon">' +
+              (ICONS[preset] || ICONS.desktop) +
+              '</span><span class="wg-dev-label">' +
+              chipLabel +
+              "</span>";
+            void badge.offsetWidth;
+            badge.classList.add("wg-in");
+          };
+          const showToast = (preset, touch, title, sub) => {
+            let toast = document.getElementById("wg-device-toast");
+            if (toast && toast._wgTimer) {
+              clearTimeout(toast._wgTimer);
+              toast._wgTimer = null;
+            }
+            if (!toast) {
+              toast = document.createElement("div");
+              toast.id = "wg-device-toast";
+              toast.setAttribute("data-wg-ui", "1");
+              document.documentElement.appendChild(toast);
+            }
+            // Hide chip while toast is up (same corner).
+            const badge = document.getElementById("wg-device-badge");
+            if (badge) badge.classList.remove("wg-in");
+            toast.dataset.preset = preset;
+            toast.innerHTML =
+              '<span class="wg-dev-icon">' +
+              (ICONS[preset] || ICONS.desktop) +
+              '</span><span class="wg-dev-copy"><div class="wg-dev-title">' +
+              title +
+              '</div><div class="wg-dev-sub">' +
+              sub +
+              "</div></span>";
+            toast.classList.remove("wg-out");
+            void toast.offsetWidth;
+            toast.classList.add("wg-in");
+            toast._wgTimer = setTimeout(() => {
+              toast.classList.add("wg-out");
+              toast.classList.remove("wg-in");
+              setTimeout(() => {
+                const t = document.getElementById("wg-device-toast");
+                if (t) t.remove();
+                if (preset !== "desktop" || touch) {
+                  ensureChip(preset, touch, true);
+                }
+              }, 380);
+            }, 2200);
+          };
+
+          if (sync === "keep" && !device) return;
+
+          const isDesktopClear =
+            sync === "clear" ||
+            (device && device.preset === "desktop" && !device.touchMode);
+          if (isDesktopClear) {
+            setCursor(false);
+            const announce = payload.announce !== false && sync !== "keep";
+            if (announce) {
+              const vp = device && device.viewport ? device.viewport : { width: 1280, height: 720 };
+              showToast(
+                "desktop",
+                false,
+                "Back to desktop",
+                vp.width + "\u00d7" + vp.height + " \u00b7 mouse",
+              );
+              setTimeout(() => {
+                const badge = document.getElementById("wg-device-badge");
+                if (badge) badge.remove();
+              }, 2600);
+            } else {
+              const badge = document.getElementById("wg-device-badge");
+              if (badge) badge.remove();
+              const toast = document.getElementById("wg-device-toast");
+              if (toast) toast.remove();
+            }
+            window.__wgDevicePreset = "desktop";
+            return;
           }
+
           if (!device) return;
           const preset = device.preset || "desktop";
           const touch = !!device.touchMode;
           const remain = payload.remain !== false && sync !== "clear";
-          if (!badge) {
-            badge = document.createElement("div");
-            badge.id = "wg-device-badge";
-            badge.setAttribute("data-wg-ui", "1");
-            document.documentElement.appendChild(badge);
-          }
-          badge.dataset.preset = preset;
-          badge.dataset.touch = touch ? "1" : "0";
-          const label =
-            preset === "desktop" && !touch
-              ? "desktop"
-              : preset + (remain ? " · remain" : " · set");
-          badge.textContent = label;
-          badge.classList.add("wg-in");
-          if (cursor) {
-            if (touch) {
-              cursor.setAttribute("data-touch", "1");
-              cursor.innerHTML = FINGER_SVG;
-            } else {
-              cursor.removeAttribute("data-touch");
-              cursor.innerHTML = MOUSE_SVG;
-            }
+          const prev = window.__wgDevicePreset || "";
+          const changed = prev !== preset || (touch && prev === "desktop");
+          setCursor(touch);
+          window.__wgDevicePreset = preset;
+
+          const announce =
+            payload.announce === true ||
+            (payload.announce !== false && (sync === "set" || sync === "clear") && changed);
+
+          const vp = device.viewport || {};
+          const size =
+            (vp.width || "?") + "\u00d7" + (vp.height || "?") + (touch ? " \u00b7 touch" : "");
+          const titles = {
+            mobile: "Now in mobile mode",
+            tablet: "Now in tablet mode",
+            desktop: "Now in desktop mode",
+          };
+          if (announce) {
+            showToast(preset, touch, titles[preset] || "Device updated", size);
+          } else {
+            ensureChip(preset, touch, remain);
           }
         };
       },
@@ -2755,8 +2916,7 @@ async function clickPulseAt(page, x, y, tone) {
 
 /**
  * Apply authored device fixture to the live page (0.13+).
- * Uses the real setViewportSize (step mode noops block-authored calls).
- * sync keep with no device = no-op; clear / desktop = restore main feel.
+ * Seamless viewport lerp + toast on set/clear (quiet chip recreate on keep).
  */
 async function applyDeviceToPage(page, device, sync) {
   const mode = sync || (device ? "set" : "keep");
@@ -2774,14 +2934,46 @@ async function applyDeviceToPage(page, device, sync) {
     typeof page.__wgRealSetViewportSize === "function"
       ? page.__wgRealSetViewportSize
       : page.setViewportSize.bind(page);
+  const target = {
+    width: Math.max(200, Math.floor(d.viewport.width)),
+    height: Math.max(200, Math.floor(d.viewport.height)),
+  };
+  let from = null;
   try {
-    await realSet({
-      width: d.viewport.width,
-      height: d.viewport.height,
-    });
+    from = page.viewportSize();
   } catch {
-    /* maximized / null viewport hosts may reject - badge still updates */
+    from = null;
   }
+  const announce = mode === "set" || mode === "clear";
+  const shouldAnimate =
+    announce &&
+    from &&
+    from.width > 0 &&
+    from.height > 0 &&
+    (from.width !== target.width || from.height !== target.height);
+
+  try {
+    if (shouldAnimate) {
+      const steps = 14;
+      const ms = Number(process.env.WAYGRAPH_DEVICE_TRANSITION_MS || 520);
+      const stepMs = Math.max(12, Math.floor(ms / steps));
+      for (let i = 1; i <= steps; i++) {
+        const t = i / steps;
+        const e = t * t * (3 - 2 * t); // smoothstep
+        await realSet({
+          width: Math.round(from.width + (target.width - from.width) * e),
+          height: Math.round(from.height + (target.height - from.height) * e),
+        });
+        if (i < steps) await new Promise((r) => setTimeout(r, stepMs));
+      }
+    } else {
+      await realSet(target);
+    }
+  } catch {
+    /* maximized / null viewport hosts may reject - toast still updates */
+  }
+
+  // Fire toast near the end of the lerp so it reads as one seamless beat.
   await page
     .evaluate(
       (payload) => {
@@ -2791,6 +2983,7 @@ async function applyDeviceToPage(page, device, sync) {
         sync: mode,
         device: d,
         remain: mode === "keep" || mode === "set",
+        announce,
       },
     )
     .catch(() => {});

package/dist/highlights.d.ts

@@ -51,8 +51,9 @@ export type WaygraphTodoInput = string | WaygraphTodoItem;
  * Dock list presentation:
  * - `sequential` - arrow on current, strike done (demo walkthrough)
  * - `checklist` - checkbox done/pending only (no current arrow; independent checks)
+ * - `bullets` - flat bullet list (no arrow/checkbox; open notes / trimmed dock)
  */
-export type TodoListStyle = "sequential" | "checklist";
+export type TodoListStyle = "sequential" | "checklist" | "bullets";
 /** One titled group in the floating todo dock (FR / Scenarios / ACs, etc.). */
 export type WaygraphTodoGroupInput = {
     /** Stable group id -> `data-wg-todo-group`. */
@@ -99,7 +100,7 @@ export type StubPhaseFixtures = {
      * (e.g. Mailhog -> back to app and still find the checklist).
      */
     todoId?: string;
-    /** `sequential` (default) or `checklist`. */
+    /** `sequential` (default), `checklist`, or `bullets`. */
     todoStyle?: TodoListStyle;
     /** Multiple titled lists (FR / Scenarios / ACs). Wins over bare todos when set. */
     todoGroups?: readonly WaygraphTodoGroupInput[];
@@ -280,8 +281,8 @@ export type StubCtx<Out extends Checkpoint<string> = Checkpoint<string>> = {
      */
     todoId(id: string): void;
     /**
-     * Dock presentation: `sequential` (arrow walkthrough) or `checklist`
-     * (independent checkboxes, no current arrow).
+     * Dock presentation: `sequential` (arrow walkthrough), `checklist`
+     * (independent checkboxes), or `bullets` (flat • list, no progress marks).
      */
     todoStyle(style: TodoListStyle): void;
     /**
@@ -510,7 +511,8 @@ export declare function normalizeTodoPos(raw: unknown): "left" | "right" | undef
 export declare function normalizeTodoStyle(raw: unknown): TodoListStyle | undefined;
 /**
  * Normalize checklist rows; apply todoIndex for sequential done/current.
- * In checklist mode, todoIndex is ignored unless items omit explicit done.
+ * In checklist / bullets mode, todoIndex is ignored unless items omit explicit done
+ * (bullets never auto-mark current).
  */
 export declare function normalizeTodos(todos: readonly WaygraphTodoInput[] | undefined, todoIndex?: number, style?: TodoListStyle): WaygraphTodoItem[];
 /** Build the floating dock from bag / phase fields. */
@@ -540,13 +542,13 @@ export declare function applyTodoPhase(prev: TodoDockState | undefined, phase: {
     sync: "set" | "clear" | "keep";
 };
 /**
- * Advance every sequential group to `index` (capped). Checklist groups unchanged.
+ * Advance every sequential group to `index` (capped). Checklist / bullets unchanged.
  * Used while cycling rings / fill/click stubs so the walkthrough moves.
  */
 export declare function advanceTodoDock(dock: TodoDockState | undefined, index: number): TodoDockState | undefined;
 /**
  * Mark sequential groups complete (all done, none current) - e.g. end of step.
- * Checklist groups keep explicit done flags.
+ * Checklist / bullets groups keep explicit done flags.
  */
 export declare function completeSequentialTodoDock(dock: TodoDockState | undefined): TodoDockState | undefined;
 /**

package/dist/highlights.js

@@ -495,11 +495,20 @@ export function normalizeTodoStyle(raw) {
         return "sequential";
     if (s === "checklist" || s === "check" || s === "checks" || s === "box")
         return "checklist";
+    if (s === "bullets" ||
+        s === "bullet" ||
+        s === "list" ||
+        s === "ul" ||
+        s === "points" ||
+        s === "plain") {
+        return "bullets";
+    }
     return undefined;
 }
 /**
  * Normalize checklist rows; apply todoIndex for sequential done/current.
- * In checklist mode, todoIndex is ignored unless items omit explicit done.
+ * In checklist / bullets mode, todoIndex is ignored unless items omit explicit done
+ * (bullets never auto-mark current).
  */
 export function normalizeTodos(todos, todoIndex, style = "sequential") {
     if (!todos || todos.length === 0)
@@ -523,6 +532,11 @@ export function normalizeTodos(todos, todoIndex, style = "sequential") {
             item.current = false;
             return item;
         }
+        if (style === "bullets") {
+            // Flat list: no walkthrough current; keep explicit done if authored.
+            item.current = false;
+            return item;
+        }
         if (idx !== undefined) {
             if (item.done === undefined)
                 item.done = i < idx;
@@ -606,7 +620,7 @@ export function applyTodoPhase(prev, phase) {
     return { dock: prev, sync: "keep" };
 }
 /**
- * Advance every sequential group to `index` (capped). Checklist groups unchanged.
+ * Advance every sequential group to `index` (capped). Checklist / bullets unchanged.
  * Used while cycling rings / fill/click stubs so the walkthrough moves.
  */
 export function advanceTodoDock(dock, index) {
@@ -636,7 +650,7 @@ export function advanceTodoDock(dock, index) {
 }
 /**
  * Mark sequential groups complete (all done, none current) - e.g. end of step.
- * Checklist groups keep explicit done flags.
+ * Checklist / bullets groups keep explicit done flags.
  */
 export function completeSequentialTodoDock(dock) {
     if (!dock)

package/examples/saucedemo/scripts/demo-device-presets.mjs

@@ -0,0 +1,188 @@
+/**
+ * Headed visual demo: mobile -> tablet -> desktop with toast + seamless lerp.
+ * Usage (from examples/saucedemo): WG_DEVICE_HOLD_MS=5000 node scripts/demo-device-presets.mjs
+ */
+import { chromium } from "playwright";
+import { mkdirSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const outDir = join(__dirname, "../.tmp/device-demo");
+mkdirSync(outDir, { recursive: true });
+
+const PRESETS = {
+  mobile: {
+    preset: "mobile",
+    viewport: { width: 390, height: 844 },
+    touchMode: true,
+    title: "Now in mobile mode",
+  },
+  tablet: {
+    preset: "tablet",
+    viewport: { width: 768, height: 1024 },
+    touchMode: true,
+    title: "Now in tablet mode",
+  },
+  desktop: {
+    preset: "desktop",
+    viewport: { width: 1280, height: 720 },
+    touchMode: false,
+    title: "Back to desktop",
+  },
+};
+
+const CSS = `
+#wg-device-toast{position:fixed;z-index:2147483647;top:14px;right:14px;
+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);
+font:600 13px/1.35 system-ui,sans-serif;pointer-events:none;
+opacity:0;transform:translateX(18px) scale(.96);
+transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1);}
+#wg-device-toast.wg-in{opacity:1;transform:translateX(0) scale(1);}
+#wg-device-toast.wg-out{opacity:0;transform:translateX(12px) scale(.98);}
+#wg-device-toast[data-preset=mobile]{border-color:#3B82F6;}
+#wg-device-toast[data-preset=tablet]{border-color:#22C55E;}
+#wg-device-toast[data-preset=desktop]{border-color:#9CA3AF;}
+#wg-device-toast .wg-dev-icon{flex:0 0 auto;width:36px;height:36px;border-radius:10px;
+display:flex;align-items:center;justify-content:center;background:rgba(124,58,237,.28);}
+#wg-device-toast[data-preset=mobile] .wg-dev-icon{background:rgba(59,130,246,.28);}
+#wg-device-toast[data-preset=tablet] .wg-dev-icon{background:rgba(34,197,94,.28);}
+#wg-device-toast[data-preset=desktop] .wg-dev-icon{background:rgba(156,163,175,.28);}
+#wg-device-toast .wg-dev-icon svg{width:22px;height:22px;display:block;}
+#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;}
+#wg-device-badge{position:fixed;z-index:2147483646;top:14px;right:14px;
+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;transition:opacity .3s ease;}
+#wg-device-badge.wg-in{opacity:1;}
+#wg-device-badge[data-preset=mobile]{border-color:#3B82F6;}
+#wg-device-badge[data-preset=tablet]{border-color:#22C55E;}
+#wg-device-badge .wg-dev-icon svg{width:14px;height:14px;display:block;}
+`;
+
+const ICONS = {
+  mobile:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="2.5" width="10" height="19" rx="2.2"/><circle cx="12" cy="18.2" r="1.1" fill="#fff" stroke="none"/></svg>',
+  tablet:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4" width="17" height="16" rx="2"/><circle cx="12" cy="17.2" r="1" fill="#fff" stroke="none"/></svg>',
+  desktop:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="19" height="12.5" rx="1.5"/><path d="M8 20h8M12 16v4"/></svg>',
+};
+
+async function lerpViewport(page, to, ms = 520) {
+  const from = page.viewportSize() || { width: 1280, height: 720 };
+  const steps = 14;
+  const stepMs = Math.max(12, Math.floor(ms / steps));
+  for (let i = 1; i <= steps; i++) {
+    const t = i / steps;
+    const e = t * t * (3 - 2 * t);
+    await page.setViewportSize({
+      width: Math.round(from.width + (to.width - from.width) * e),
+      height: Math.round(from.height + (to.height - from.height) * e),
+    });
+    if (i < steps) await page.waitForTimeout(stepMs);
+  }
+}
+
+async function applyPreset(page, key) {
+  const d = PRESETS[key];
+  await lerpViewport(page, d.viewport, 520);
+  await page.evaluate(
+    ({ d, css, icons, key }) => {
+      let style = document.getElementById("wg-device-demo-style");
+      if (!style) {
+        style = document.createElement("style");
+        style.id = "wg-device-demo-style";
+        style.textContent = css;
+        document.documentElement.appendChild(style);
+      }
+      let toast = document.getElementById("wg-device-toast");
+      if (toast && toast._wgTimer) clearTimeout(toast._wgTimer);
+      if (!toast) {
+        toast = document.createElement("div");
+        toast.id = "wg-device-toast";
+        document.documentElement.appendChild(toast);
+      }
+      const badge = document.getElementById("wg-device-badge");
+      if (badge) badge.classList.remove("wg-in");
+      toast.dataset.preset = d.preset;
+      const sub =
+        d.viewport.width +
+        "\u00d7" +
+        d.viewport.height +
+        (d.touchMode ? " \u00b7 touch" : " \u00b7 mouse");
+      toast.innerHTML =
+        '<span class="wg-dev-icon">' +
+        icons[d.preset] +
+        '</span><span class="wg-dev-copy"><div class="wg-dev-title">' +
+        d.title +
+        '</div><div class="wg-dev-sub">' +
+        sub +
+        "</div></span>";
+      toast.classList.remove("wg-out");
+      void toast.offsetWidth;
+      toast.classList.add("wg-in");
+      toast._wgTimer = setTimeout(() => {
+        toast.classList.add("wg-out");
+        toast.classList.remove("wg-in");
+        setTimeout(() => {
+          if (d.preset === "desktop" && !d.touchMode) {
+            const b = document.getElementById("wg-device-badge");
+            if (b) b.remove();
+            return;
+          }
+          let chip = document.getElementById("wg-device-badge");
+          if (!chip) {
+            chip = document.createElement("div");
+            chip.id = "wg-device-badge";
+            document.documentElement.appendChild(chip);
+          }
+          chip.dataset.preset = d.preset;
+          chip.innerHTML =
+            '<span class="wg-dev-icon">' +
+            icons[d.preset] +
+            '</span><span>' +
+            d.preset +
+            " \u00b7 remain</span>";
+          chip.classList.add("wg-in");
+        }, 380);
+      }, 2200);
+    },
+    { d, css: CSS, icons: ICONS, key },
+  );
+}
+
+const holdMs = Number(process.env.WG_DEVICE_HOLD_MS || 4500);
+const executablePath = process.env.CHROME_PATH || process.env.CHROMIUM_PATH || undefined;
+
+const browser = await chromium.launch({
+  headless: false,
+  ...(executablePath ? { executablePath } : {}),
+});
+const context = await browser.newContext({
+  hasTouch: true,
+  viewport: { width: 1280, height: 720 },
+});
+const page = await context.newPage();
+await page.goto("https://www.saucedemo.com/", { waitUntil: "domcontentloaded" });
+
+const shots = [];
+for (const key of ["mobile", "tablet", "desktop"]) {
+  console.log("device demo:", key);
+  await applyPreset(page, key);
+  await page.waitForTimeout(900);
+  const shot = join(outDir, `device-${key}.png`);
+  await page.screenshot({ path: shot, fullPage: false });
+  shots.push(shot);
+  console.log("  shot:", shot);
+  await page.waitForTimeout(holdMs);
+}
+
+console.log("DEVICE_DEMO_DONE", JSON.stringify(shots));
+await page.waitForTimeout(1500);
+await browser.close();

package/examples/saucedemo/src/blocks/saucedemo-web/inventory/inventory.page.block.ts

@@ -1,4 +1,5 @@
 import { definePageBlock, Trait } from "waygraph";
+import type { StubCtx } from "waygraph";
 import type { LoggedIn } from "../../../states/checkout.states.js";
 import { AddToCartBlock } from "./methods/add-to-cart.effect.block.js";
 import { RemoveFromCartBlock } from "./methods/remove-from-cart.effect.block.js";
@@ -27,6 +28,11 @@ export const InventoryPageBlock = definePageBlock<LoggedIn>({
     Trait.url({ pathname: "/inventory.html" }),
     Trait.visible(InventorySel.list),
   ],
+  // Showcase responsive dashboard: tablet after mobile login (toast + lerp).
+  stubBefore: (ctx: StubCtx) => {
+    ctx.title("Inventory · tablet");
+    ctx.device("tablet");
+  },
   methods: {
     addToCart: () => AddToCartBlock,
     removeFromCart: () => RemoveFromCartBlock,

package/package.json

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

package/templates/quickstart/src/blocks/saucedemo-web/inventory/inventory.page.block.ts

@@ -1,4 +1,5 @@
 import { definePageBlock, Trait } from "waygraph";
+import type { StubCtx } from "waygraph";
 import type { LoggedIn } from "../../../states/checkout.states.js";
 import { AddToCartBlock } from "./methods/add-to-cart.effect.block.js";
 import { RemoveFromCartBlock } from "./methods/remove-from-cart.effect.block.js";
@@ -27,6 +28,11 @@ export const InventoryPageBlock = definePageBlock<LoggedIn>({
     Trait.url({ pathname: "/inventory.html" }),
     Trait.visible(InventorySel.list),
   ],
+  // Showcase responsive dashboard: tablet after mobile login (toast + lerp).
+  stubBefore: (ctx: StubCtx) => {
+    ctx.title("Inventory · tablet");
+    ctx.device("tablet");
+  },
   methods: {
     addToCart: () => AddToCartBlock,
     removeFromCart: () => RemoveFromCartBlock,