waygraph 0.15.50 → 0.15.52

package/examples/saucedemo/.waygraph-auto/f7ac4d62.log

@@ -1,20 +0,0 @@
-[14:00:36.038] waygraph pilot: stub.before ctx.title("Signing in · mobile")
-[14:00:36.038] waygraph pilot: stub.before ctx.todos n=6 index=0
-[14:00:36.038] waygraph pilot: stub.before ctx.device(mobile)
-[14:00:36.038] waygraph pilot: stub.before ctx.zoom(1.35)
-[14:00:36.039] waygraph pilot: stub.before ring #user-name tone=info label="Username"
-[14:00:37.012] waygraph pilot: stub.after ctx.todos n=6 index=1
-[14:00:38.516] waygraph pilot: stub.before ring #password tone=planned label="Password"
-[14:00:38.588] waygraph pilot: stub.after ctx.todos n=6 index=2
-[14:00:39.825] waygraph pilot: stub.before ring #login-button tone=warning label="Login"
-[14:00:40.139] waygraph pilot: stub.after ctx.title("Inventory · landscape")
-[14:00:40.139] waygraph pilot: stub.after ctx.todos n=6 index=3
-[14:00:40.139] waygraph pilot: stub.after ctx.device(mobile)
-[14:00:40.139] waygraph pilot: stub.after ring .inventory_list tone=success label="Product shelf"
-[14:00:43.111] waygraph pilot: stub.before ctx.title("Open cart · landscape")
-[14:00:43.111] waygraph pilot: stub.before ctx.todos n=6 index=5
-[14:00:43.111] waygraph pilot: stub.before ctx.device(mobile)
-[14:00:43.111] waygraph pilot: stub.before ctx.zoom(1.4)
-[14:00:43.111] waygraph pilot: stub.before ring .shopping_cart_link tone=planned label="Cart"
-[14:00:43.323] waygraph pilot: stub.after ctx.title("Your cart · desktop")
-[14:00:43.323] waygraph pilot: stub.after ring .cart_item tone=success label="Cart items"

package/examples/saucedemo/.waygraph-auto/f92d4c6c.log

@@ -1,22 +0,0 @@
-[18:20:03.075] waygraph pilot: stub.before ctx.title("Signing in · mobile")
-[18:20:03.076] waygraph pilot: stub.before ctx.todos n=6 index=0
-[18:20:03.077] waygraph pilot: stub.before ctx.device(mobile)
-[18:20:03.077] waygraph pilot: stub.before ctx.zoom(1.35)
-[18:20:03.077] waygraph pilot: stub.before ring #user-name tone=info label="Username"
-[18:20:04.426] waygraph pilot: stub.after ctx.todos n=6 index=1
-[18:20:06.573] waygraph pilot: stub.before ring #password tone=planned label="Password"
-[18:20:06.738] waygraph pilot: stub.after ctx.todos n=6 index=2
-[18:20:08.639] waygraph pilot: stub.before ring #login-button tone=warning label="Login"
-[18:20:08.736] waygraph pilot: stub.after ctx.title("Inventory · landscape")
-[18:20:08.736] waygraph pilot: stub.after ctx.todos n=6 index=3
-[18:20:08.736] waygraph pilot: stub.after ctx.device(mobile)
-[18:20:08.736] waygraph pilot: stub.after ring .inventory_list tone=success label="Product shelf"
-[18:20:11.298] waygraph pilot: stub.before ctx.title("Pick a product · tablet")
-[18:20:11.298] waygraph pilot: stub.before ctx.todos n=6 index=3
-[18:20:11.298] waygraph pilot: stub.before ctx.device(tablet)
-[18:20:11.298] waygraph pilot: stub.before ctx.zoom(1.35)
-[18:20:11.298] waygraph pilot: stub.before ring div.inventory_item:has(button[data-test="add-to-cart-sauce-labs-backpack"], button[data-test="remove-sauce-labs-backpack"]) .inventory_item_name tone=info label="Sauce Labs Backpack"
-[18:20:11.298] waygraph pilot: stub.before ring [data-test="add-to-cart-sauce-labs-backpack"] tone=success label="Add to cart"
-[18:20:11.986] waygraph pilot: stub.after ctx.title("In the cart")
-[18:20:11.986] waygraph pilot: stub.after ctx.todos n=6 index=4
-[18:20:11.986] waygraph pilot: stub.after ring .shopping_cart_badge tone=success label="Cart badge"

package/examples/saucedemo/.waygraph-auto/f92faf40.log

@@ -1,5 +0,0 @@
-[17:11:21.484] waygraph pilot: highlight ctx.todos n=3 index=0
-[17:11:21.486] waygraph pilot: highlight ring #user-name tone=planned label="Username"
-[17:11:21.487] waygraph pilot: highlight ring #password tone=info label="Password"
-[17:11:25.138] waygraph pilot: highlight ring #no-such-element-waygraph tone=danger label="Gone"
-[17:11:26.947] waygraph pilot: highlight ring #login-button tone=success label="Login"

package/examples/saucedemo/.waygraph-auto/fa784369.log

@@ -1,21 +0,0 @@
-[18:19:57.299] waygraph pilot: stub.before ctx.title("Signing in · mobile")
-[18:19:57.300] waygraph pilot: stub.before ctx.todos n=6 index=0
-[18:19:57.300] waygraph pilot: stub.before ctx.device(mobile)
-[18:19:57.300] waygraph pilot: stub.before ctx.zoom(1.35)
-[18:19:57.300] waygraph pilot: stub.before ring #user-name tone=info label="Username"
-[18:19:58.498] waygraph pilot: stub.after ctx.todos n=6 index=1
-[18:19:59.896] waygraph pilot: stub.before ring #password tone=planned label="Password"
-[18:20:00.105] waygraph pilot: stub.after ctx.todos n=6 index=2
-[18:20:01.394] waygraph pilot: stub.before ring #login-button tone=warning label="Login"
-[18:20:01.596] waygraph pilot: stub.after ctx.title("Inventory · landscape")
-[18:20:01.597] waygraph pilot: stub.after ctx.todos n=6 index=3
-[18:20:01.597] waygraph pilot: stub.after ctx.device(mobile)
-[18:20:01.597] waygraph pilot: stub.after ring .inventory_list tone=success label="Product shelf"
-[18:20:04.415] waygraph pilot: stub.before ctx.title("Open cart · landscape")
-[18:20:04.415] waygraph pilot: stub.before ctx.todos n=6 index=5
-[18:20:04.415] waygraph pilot: stub.before ctx.device(mobile)
-[18:20:04.415] waygraph pilot: stub.before ctx.zoom(1.4)
-[18:20:04.415] waygraph pilot: stub.before ring .shopping_cart_link tone=planned label="Cart"
-[18:20:04.708] waygraph pilot: stub.after ctx.title("Your cart · desktop")
-[18:20:04.708] waygraph pilot: stub.after ring .cart_item tone=success label="Cart items"
-[18:20:04.740] waygraph pilot: ring not painted - selector matched nothing (or a zero-size element): .cart_item

package/examples/saucedemo/.waygraph-auto/fb55f723.log

@@ -1,20 +0,0 @@
-[16:12:39.604] waygraph pilot: stub.before ctx.title("Signing in · mobile")
-[16:12:39.605] waygraph pilot: stub.before ctx.todos n=6 index=0
-[16:12:39.605] waygraph pilot: stub.before ctx.device(mobile)
-[16:12:39.605] waygraph pilot: stub.before ctx.zoom(1.35)
-[16:12:39.605] waygraph pilot: stub.before ring #user-name tone=info label="Username"
-[16:12:40.582] waygraph pilot: stub.after ctx.todos n=6 index=1
-[16:12:42.304] waygraph pilot: stub.before ring #password tone=planned label="Password"
-[16:12:42.445] waygraph pilot: stub.after ctx.todos n=6 index=2
-[16:12:44.041] waygraph pilot: stub.before ring #login-button tone=warning label="Login"
-[16:12:44.385] waygraph pilot: stub.after ctx.title("Inventory · landscape")
-[16:12:44.385] waygraph pilot: stub.after ctx.todos n=6 index=3
-[16:12:44.385] waygraph pilot: stub.after ctx.device(mobile)
-[16:12:44.385] waygraph pilot: stub.after ring .inventory_list tone=success label="Product shelf"
-[16:12:47.747] waygraph pilot: stub.before ctx.title("Open cart · landscape")
-[16:12:47.747] waygraph pilot: stub.before ctx.todos n=6 index=5
-[16:12:47.747] waygraph pilot: stub.before ctx.device(mobile)
-[16:12:47.747] waygraph pilot: stub.before ctx.zoom(1.4)
-[16:12:47.747] waygraph pilot: stub.before ring .shopping_cart_link tone=planned label="Cart"
-[16:12:48.104] waygraph pilot: stub.after ctx.title("Your cart · desktop")
-[16:12:48.104] waygraph pilot: stub.after ring .cart_item tone=success label="Cart items"

package/examples/saucedemo/.waygraph-auto/ffdf2854.log

@@ -1,6 +0,0 @@
-[16:13:18.032] waygraph pilot: stub.before ctx.title("Signing in · mobile")
-[16:13:18.033] waygraph pilot: stub.before ctx.todos n=6 index=0
-[16:13:18.033] waygraph pilot: stub.before ctx.device(mobile)
-[16:13:18.033] waygraph pilot: stub.before ctx.zoom(1.35)
-[16:13:18.033] waygraph pilot: stub.before ring #user-name tone=info label="Username"
-[16:13:19.279] waygraph pilot: stub.after ctx.todos n=6 index=1

package/examples/saucedemo/scripts/capture-auto-headful.mjs

@@ -1,120 +0,0 @@
-import { chromium } from "@playwright/test";
-import { join, dirname } from "node:path";
-import { fileURLToPath, pathToFileURL } from "node:url";
-import { createRequire } from "node:module";
-
-const require = createRequire(import.meta.url);
-const tsxEsm = require.resolve("tsx/esm");
-await import(tsxEsm);
-
-const { buildExploreContext, buildExploreMenu } = await import(
-  pathToFileURL(join(dirname(fileURLToPath(import.meta.url)), "../../../dist/auto-explore.js")).href
-);
-const { locate } = await import(
-  pathToFileURL(join(dirname(fileURLToPath(import.meta.url)), "../../../dist/index.js")).href
-);
-
-const projectDir = join(dirname(fileURLToPath(import.meta.url)), "..");
-const outDir = join(projectDir, "../../.tmp/waygraph-auto");
-const exe = process.env.CHROME_PATH || process.env.CHROMIUM_PATH;
-
-const PANEL_CSS =
-  "#wg-auto-panel{position:fixed;z-index:2147483647;left:50%;bottom:12px;transform:translateX(-50%);" +
-  "max-width:min(92vw,720px);max-height:calc(100vh - 24px);overflow-y:auto;box-sizing:border-box;" +
-  "background:rgba(20,10,40,.94);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);}" +
-  "#wg-auto-panel h3{margin:0 0 10px;font-size:16px;}" +
-  "#wg-auto-panel .wg-here{color:#c9a6ff;margin-bottom:12px;}" +
-  "#wg-auto-panel .wg-actions{display:flex;flex-direction:column;gap:8px;}" +
-  "#wg-auto-panel button.wg-act{text-align:left;padding:10px 12px;border-radius:10px;border:1px solid #5b3aa8;" +
-  "background:#2a1450;color:#fff;font:13px/1.3 system-ui,sans-serif;cursor:pointer;}" +
-  "#wg-auto-panel .wg-section{margin:12px 0 6px;font-size:11px;font-weight:700;color:#a78bfa;text-transform:uppercase;}" +
-  "#wg-auto-panel .wg-map{margin:8px 0 12px;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.25);font-size:11px;line-height:1.5;}" +
-  "#wg-auto-panel .wg-map .wg-cp{opacity:.55;}#wg-auto-panel .wg-map .wg-cp-here{color:#fff;opacity:1;font-weight:700;}";
-
-function esc(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
-}
-
-function panelHtml(menu, nodeNames, library) {
-  const here = menu.here;
-  const hereLabel = here ?? "Unknown — pick Start here";
-  const chips = nodeNames
-    .map((cp) => {
-      const cls = cp === here ? "wg-cp wg-cp-here" : "wg-cp";
-      return `<span class="${cls}">${esc(cp)}${cp === here ? " (here)" : ""}</span>`;
-    })
-    .join(" · ");
-  let html =
-    `<style>${PANEL_CSS}</style><div id="wg-auto-panel">` +
-    `<h3>waygraph auto</h3><div class="wg-here">You are here: <strong>${esc(hereLabel)}</strong></div>` +
-    `<div class="wg-actions">`;
-  for (const section of menu.sections) {
-    html += `<div class="wg-section">${esc(section.title)}</div>`;
-    for (const c of section.edges) {
-      const entry = library.get(c.block);
-      const desc = entry?.description ? `<br><span style="opacity:.85">${esc(entry.description)}</span>` : "";
-      html +=
-        `<button class="wg-act"><span class="wg-kind">${esc(c.kind)}</span> ` +
-        `<strong>${esc(c.block)}</strong> → ${esc(c.to)}${desc}</button>`;
-    }
-  }
-  html += `</div><div class="wg-map"><strong>Screens:</strong> ${chips}</div></div>`;
-  return html;
-}
-
-async function capture(label, page, menu, nodeNames, library) {
-  await page.evaluate((inner) => {
-    let host = document.getElementById("wg-auto-host");
-    if (!host) {
-      host = document.createElement("div");
-      host.id = "wg-auto-host";
-      document.documentElement.appendChild(host);
-    }
-    host.innerHTML = inner;
-  }, panelHtml(menu, nodeNames, library));
-  const path = join(outDir, `headful-${label}.png`);
-  await page.screenshot({ path, fullPage: false });
-  console.log(path);
-}
-
-const { graph, library } = await buildExploreContext(projectDir);
-const nodeNames = graph.nodes.map((n) => n.checkpoint);
-const navTags = library.navBlocks.map((n) => n.block);
-
-const browser = await chromium.launch({
-  headless: true,
-  ...(exe ? { executablePath: exe, args: ["--no-sandbox", "--disable-dev-shm-usage"] } : {}),
-});
-const context = await browser.newContext({
-  viewport: { width: 1280, height: 900 },
-  baseURL: "https://www.saucedemo.com",
-});
-const page = await context.newPage();
-await page.goto("/", { waitUntil: "load" });
-
-async function hereNow(p) {
-  const path = new URL(p.url()).pathname;
-  if (path.includes("inventory.html") && !path.includes("inventory-item")) return "LoggedIn";
-  if (path.includes("inventory-item.html")) return "ItemDetailPage";
-  if (path.includes("cart.html")) return "CartPage";
-  if (path === "/" || path === "") {
-    if (await p.locator("#login-button").isVisible({ timeout: 500 }).catch(() => false)) return "LoginPage";
-  }
-  return locate(p, navTags, { timeoutMs: 1500 });
-}
-
-const here1 = await hereNow(page);
-const menu1 = await buildExploreMenu(page, graph, library, here1);
-await capture("login", page, menu1, nodeNames, library.byName);
-
-await page.locator("#user-name").fill("standard_user");
-await page.locator("#password").fill("secret_sauce");
-await page.locator("#login-button").click();
-await page.waitForURL(/inventory\.html/);
-
-const here2 = await hereNow(page);
-const menu2 = await buildExploreMenu(page, graph, library, here2);
-await capture("logged-in", page, menu2, nodeNames, library.byName);
-
-await browser.close();

package/examples/saucedemo/scripts/capture-wrong-login.mjs

@@ -1,141 +0,0 @@
-import { chromium } from "@playwright/test";
-import { join, dirname } from "node:path";
-import { fileURLToPath, pathToFileURL } from "node:url";
-import { createRequire } from "node:module";
-
-const require = createRequire(import.meta.url);
-await import(require.resolve("tsx/esm"));
-
-const root = join(dirname(fileURLToPath(import.meta.url)), "..");
-const outDir = join(root, "../../.tmp/waygraph-auto");
-const waygraphDist = join(root, "../../dist");
-
-const { buildExploreContext, buildExploreMenu } = await import(
-  pathToFileURL(join(waygraphDist, "auto-explore.js")).href
-);
-const { Engine, start, end, MemPage } = await import(pathToFileURL(join(waygraphDist, "index.js")).href);
-
-const exe = process.env.CHROME_PATH || process.env.CHROMIUM_PATH;
-
-const PANEL_CSS =
-  "#wg-auto-panel{position:fixed;z-index:2147483647;left:50%;bottom:12px;transform:translateX(-50%);" +
-  "max-width:min(92vw,720px);max-height:calc(100vh - 24px);overflow-y:auto;box-sizing:border-box;" +
-  "background:rgba(20,10,40,.94);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);}" +
-  "#wg-auto-panel h3{margin:0 0 10px;font-size:16px;}" +
-  "#wg-auto-panel .wg-here{color:#c9a6ff;margin-bottom:12px;}" +
-  "#wg-auto-panel .wg-actions{display:flex;flex-direction:column;gap:8px;}" +
-  "#wg-auto-panel button.wg-act{text-align:left;padding:10px 12px;border-radius:10px;border:1px solid #5b3aa8;" +
-  "background:#2a1450;color:#fff;font:13px/1.3 system-ui,sans-serif;cursor:pointer;}" +
-  "#wg-auto-panel .wg-section{margin:12px 0 6px;font-size:11px;font-weight:700;color:#a78bfa;text-transform:uppercase;}" +
-  "#wg-auto-panel .wg-map{margin:8px 0 12px;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.25);font-size:11px;line-height:1.5;}" +
-  "#wg-auto-panel .wg-map .wg-cp{opacity:.55;}#wg-auto-panel .wg-map .wg-cp-here{color:#fff;opacity:1;font-weight:700;}";
-
-function esc(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
-}
-
-function panelHtml(menu, nodeNames, library, note) {
-  const here = menu.here;
-  const hereLabel = here ?? "Unknown";
-  const chips = nodeNames
-    .map((cp) => {
-      const cls = cp === here ? "wg-cp wg-cp-here" : "wg-cp";
-      return `<span class="${cls}">${esc(cp)}${cp === here ? " (here)" : ""}</span>`;
-    })
-    .join(" · ");
-  let html =
-    `<style>${PANEL_CSS}</style><div id="wg-auto-panel">` +
-    `<h3>waygraph auto</h3>` +
-    (note ? `<div style="color:#fca5a5;margin-bottom:8px;font-size:12px">${esc(note)}</div>` : "") +
-    `<div class="wg-here">You are here: <strong>${esc(hereLabel)}</strong></div>` +
-    `<div class="wg-actions">`;
-  for (const section of menu.sections) {
-    html += `<div class="wg-section">${esc(section.title)}</div>`;
-    for (const c of section.edges) {
-      const entry = library.get(c.block);
-      const desc = entry?.description ? `<br><span style="opacity:.85">${esc(entry.description)}</span>` : "";
-      html +=
-        `<button class="wg-act"><span class="wg-kind">${esc(c.kind)}</span> ` +
-        `<strong>${esc(c.block)}</strong> → ${esc(c.to)}${desc}</button>`;
-    }
-  }
-  html += `</div><div class="wg-map"><strong>Screens:</strong> ${chips}</div></div>`;
-  return html;
-}
-
-async function paintPanel(page, menu, nodeNames, library, note) {
-  await page.evaluate((inner) => {
-    let host = document.getElementById("wg-auto-host");
-    if (!host) {
-      host = document.createElement("div");
-      host.id = "wg-auto-host";
-      document.documentElement.appendChild(host);
-    }
-    host.innerHTML = inner;
-  }, panelHtml(menu, nodeNames, library, note));
-}
-
-async function snap(page, name) {
-  const path = join(outDir, name);
-  await page.screenshot({ path, fullPage: false });
-  console.log(path);
-  return path;
-}
-
-const { graph, library } = await buildExploreContext(root);
-const nodeNames = graph.nodes.map((n) => n.checkpoint);
-
-const { NavLoginBlock } = await import(pathToFileURL(join(root, "src/blocks/saucedemo-web/nav-login.block.js")).href);
-const { FillUsernameBlock } = await import(
-  pathToFileURL(join(root, "src/blocks/saucedemo-web/methods/fill-username.method.block.js")).href
-);
-const { FillPasswordBlock } = await import(
-  pathToFileURL(join(root, "src/blocks/saucedemo-web/methods/fill-password.method.block.js")).href
-);
-const { SubmitLoginBlock } = await import(
-  pathToFileURL(join(root, "src/blocks/saucedemo-web/methods/submit-login.method.block.js")).href
-);
-const { LoginCreds } = await import(pathToFileURL(join(root, "src/states/checkout.mem-keys.js")).href);
-
-const browser = await chromium.launch({
-  headless: true,
-  ...(exe ? { executablePath: exe, args: ["--no-sandbox", "--disable-dev-shm-usage"] } : {}),
-});
-const context = await browser.newContext({
-  viewport: { width: 1280, height: 900 },
-  baseURL: "https://www.saucedemo.com",
-});
-const page = await context.newPage();
-const engine = new Engine({ headless: true });
-const mem = new MemPage();
-
-await page.goto("/", { waitUntil: "load" });
-
-const menuBefore = await buildExploreMenu(page, graph, library, "LoginPage");
-await paintPanel(page, menuBefore, nodeNames, library.byName, "Mem: standard_user / wrong-password (intentional)");
-await snap(page, "wrong-login-1-before.png");
-
-mem.set(LoginCreds({ username: "standard_user", password: "wrong-password" }));
-const flow = engine.defineFlow([start, NavLoginBlock, FillUsernameBlock, FillPasswordBlock, SubmitLoginBlock, end]);
-const runOut = await flow.run(context, mem, { page, closeOnFinish: false });
-const result = runOut && typeof runOut === "object" && "result" in runOut ? runOut.result : runOut;
-
-if (result.__state !== "LoginPage") {
-  throw new Error(`expected LoginPage after bad password, got ${result?.__state}`);
-}
-
-await page.locator('[data-test="error"]').waitFor({ state: "visible" });
-
-const menuAfter = await buildExploreMenu(page, graph, library, "LoginPage");
-await paintPanel(
-  page,
-  menuAfter,
-  nodeNames,
-  library.byName,
-  "submit-login finished → LoginPage (branch on auth failure, not LoggedIn)",
-);
-await snap(page, "wrong-login-2-after.png");
-
-console.log("PASS: wrong password stayed on LoginPage with error banner");
-await browser.close();

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

@@ -1,188 +0,0 @@
-/**
- * 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();