waygraph 0.15.49 → 0.15.51

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();

package/examples/saucedemo/scripts/demo-orientation-gestures-video.mjs

@@ -1,262 +0,0 @@
-/**
- * Record a .webm of: portrait/landscape + click / tap / hold theater.
- * Square capture so orientation changes are obvious in the video frame.
- *
- * From examples/saucedemo:
- *   node scripts/demo-orientation-gestures-video.mjs
- */
-import { chromium } from "playwright";
-import { mkdirSync, copyFileSync, readdirSync } 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 CAPTURE = { width: 1080, height: 1080 };
-
-const PRESETS = {
-  mobilePortrait: { w: 390, h: 844, preset: "mobile", orient: "portrait", touch: true },
-  mobileLandscape: { w: 844, h: 390, preset: "mobile", orient: "landscape", touch: true },
-  tabletPortrait: { w: 768, h: 1024, preset: "tablet", orient: "portrait", touch: true },
-  tabletLandscape: { w: 1024, h: 768, preset: "tablet", orient: "landscape", touch: true },
-  desktop: { w: 1280, h: 720, preset: "desktop", orient: "landscape", touch: false },
-};
-
-const CSS = `
-html,body{margin:0;background:#0b1220;}
-#wg-stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
-background:radial-gradient(ellipse at 50% 30%,#1a1030 0%,#0b1220 70%);}
-#wg-frame{position:relative;background:#fff;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55);
-border:3px solid #2a1650;border-radius:18px;transition:width .5s cubic-bezier(.22,1,.36,1),
-height .5s cubic-bezier(.22,1,.36,1),border-radius .4s ease;}
-#wg-frame iframe{border:0;width:100%;height:100%;display:block;}
-#wg-device-toast{position:fixed;z-index:2147483647;top:18px;right:18px;
-display:flex;align-items:center;gap:10px;min-width:220px;max-width:340px;
-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,.45);
-font:600 13px/1.35 system-ui,sans-serif;pointer-events:none;
-opacity:0;transform:translateX(18px);transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1);}
-#wg-device-toast.wg-in{opacity:1;transform:translateX(0);}
-#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{width:36px;height:36px;border-radius:10px;display:flex;
-align-items:center;justify-content:center;background:rgba(124,58,237,.28);}
-#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-gesture-banner{position:fixed;z-index:2147483646;left:18px;bottom:18px;
-padding:10px 14px;border-radius:12px;background:rgba(20,10,40,.94);color:#fff;
-font:700 13px/1.3 system-ui,sans-serif;border:1px solid rgba(124,58,237,.45);}
-#wg-cursor{position:fixed;z-index:2147483647;width:28px;height:28px;pointer-events:none;
-left:0;top:0;opacity:0;margin:0;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .2s;}
-#wg-click-pulse{position:fixed;z-index:2147483647;width:18px;height:18px;margin-left:-9px;
-margin-top:-9px;border-radius:50%;pointer-events:none;opacity:0;border:2px solid #7C3AED;
-background:rgba(124,58,237,.3);}
-#wg-click-pulse.wg-pulse{animation:wg-pulse .55s ease-out;}
-#wg-click-pulse[data-hold=1]{border-color:#EAB308;background:rgba(234,179,8,.35);
-width:28px;height:28px;margin-left:-14px;margin-top:-14px;}
-@keyframes wg-pulse{0%{opacity:.95;transform:scale(.35);}100%{opacity:0;transform:scale(2.6);}}
-`;
-
-const ICONS = {
-  mobile:
-    '<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#fff" stroke-width="1.8"><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" width="22" height="22" fill="none" stroke="#fff" stroke-width="1.8"><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" width="22" height="22" fill="none" stroke="#fff" stroke-width="1.8"><rect x="2.5" y="3.5" width="19" height="12.5" rx="1.5"/><path d="M8 20h8M12 16v4"/></svg>',
-};
-
-const MOUSE =
-  "<svg viewBox='0 0 32 32' width='24' height='24'><path fill='#0C0C1A' stroke='#fff' stroke-width='1.4' d='M6 3.5l1.4 22.5 5.8-5.4 4.2 9.4 3.6-1.6-4.2-9.2H26z'/></svg>";
-const FINGER =
-  "<svg viewBox='0 0 32 32' width='28' height='28'><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>";
-
-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: CAPTURE,
-  recordVideo: { dir: outDir, size: CAPTURE },
-  deviceScaleFactor: 1,
-});
-const page = await context.newPage();
-
-await page.setContent(`<!doctype html><html><head><style>${CSS}</style></head>
-<body>
-<div id="wg-stage"><div id="wg-frame" style="width:390px;height:844px">
-<iframe id="wg-app" src="https://www.saucedemo.com/"></iframe>
-</div></div>
-<div id="wg-gesture-banner">waygraph · orientation + gestures</div>
-<div id="wg-cursor">${FINGER}</div>
-<div id="wg-click-pulse"></div>
-</body></html>`);
-
-await page.waitForTimeout(2500);
-
-async function toast(title, sub, preset) {
-  await page.evaluate(
-    ({ title, sub, preset, icons }) => {
-      let t = document.getElementById("wg-device-toast");
-      if (!t) {
-        t = document.createElement("div");
-        t.id = "wg-device-toast";
-        document.body.appendChild(t);
-      }
-      t.dataset.preset = preset;
-      t.innerHTML =
-        '<span class="wg-dev-icon">' +
-        icons[preset] +
-        '</span><span><div class="wg-dev-title">' +
-        title +
-        '</div><div class="wg-dev-sub">' +
-        sub +
-        "</div></span>";
-      t.classList.remove("wg-in");
-      void t.offsetWidth;
-      t.classList.add("wg-in");
-    },
-    { title, sub, preset, icons: ICONS },
-  );
-}
-
-async function setFrame(key) {
-  const p = PRESETS[key];
-  const title =
-    key.includes("Landscape") || p.orient === "landscape"
-      ? p.preset === "desktop"
-        ? "Back to desktop"
-        : "Rotated to landscape"
-      : key.includes("Portrait") || p.orient === "portrait"
-        ? p.preset === "mobile" && key === "mobilePortrait"
-          ? "Now in mobile mode"
-          : "Rotated to portrait"
-        : "Device updated";
-  // First switch: mobile portrait uses "Now in mobile"
-  const t =
-    key === "mobilePortrait"
-      ? "Now in mobile mode"
-      : key === "desktop"
-        ? "Back to desktop"
-        : key.includes("Landscape")
-          ? "Rotated to landscape"
-          : key.includes("Portrait")
-            ? key.startsWith("tablet")
-              ? "Now in tablet mode"
-              : "Rotated to portrait"
-            : title;
-
-  await page.evaluate(
-    ({ w, h, touch, finger, mouse }) => {
-      const frame = document.getElementById("wg-frame");
-      frame.style.width = w + "px";
-      frame.style.height = h + "px";
-      frame.style.borderRadius = touch ? (w < h ? "28px" : "18px") : "10px";
-      const c = document.getElementById("wg-cursor");
-      c.innerHTML = touch ? finger : mouse;
-    },
-    { w: p.w, h: p.h, touch: p.touch, finger: FINGER, mouse: MOUSE },
-  );
-  await toast(t, `${p.w}×${p.h} · ${p.orient}${p.touch ? " · touch" : " · mouse"}`, p.preset);
-  await page.waitForTimeout(900);
-}
-
-async function banner(text) {
-  await page.evaluate((text) => {
-    const b = document.getElementById("wg-gesture-banner");
-    if (b) b.textContent = text;
-  }, text);
-}
-
-async function gestureAt(kind) {
-  // Aim at center of the device frame (login button-ish on saucedemo).
-  const box = await page.locator("#wg-frame").boundingBox();
-  if (!box) return;
-  const x = box.x + box.width * 0.5;
-  const y = box.y + box.height * 0.58;
-  await banner(
-    kind === "click"
-      ? "Gesture: CLICK (mouse)"
-      : kind === "tap"
-        ? "Gesture: TAP (touch)"
-        : "Gesture: HOLD (long-press)",
-  );
-  await page.evaluate(
-    ({ x, y, kind, ms }) => {
-      const c = document.getElementById("wg-cursor");
-      c.style.setProperty("--wg-cursor-ms", ms + "ms");
-      c.style.opacity = "1";
-      c.style.transform = `translate(${x - 8}px,${y - 8}px)`;
-    },
-    { x, y, kind, ms: 550 },
-  );
-  await page.waitForTimeout(600);
-  await page.evaluate(
-    ({ x, y, kind }) => {
-      const p = document.getElementById("wg-click-pulse");
-      p.style.left = x + "px";
-      p.style.top = y + "px";
-      p.dataset.hold = kind === "hold" ? "1" : "0";
-      p.classList.remove("wg-pulse");
-      void p.offsetWidth;
-      p.classList.add("wg-pulse");
-    },
-    { x, y, kind },
-  );
-  await page.waitForTimeout(kind === "hold" ? 900 : 550);
-}
-
-// Sequence: portrait -> landscape (shows in square video) + gestures
-await setFrame("mobilePortrait");
-await page.waitForTimeout(1200);
-await gestureAt("tap");
-await page.waitForTimeout(700);
-
-await setFrame("mobileLandscape");
-await page.waitForTimeout(1400);
-await gestureAt("hold");
-await page.waitForTimeout(700);
-
-await setFrame("tabletPortrait");
-await page.waitForTimeout(1200);
-await gestureAt("tap");
-await page.waitForTimeout(600);
-
-await setFrame("tabletLandscape");
-await page.waitForTimeout(1400);
-await gestureAt("click");
-await page.waitForTimeout(800);
-
-await setFrame("desktop");
-await page.waitForTimeout(1500);
-
-await banner("waygraph · orientation + gestures · done");
-await page.waitForTimeout(1000);
-
-const vid = page.video();
-await context.close();
-await browser.close();
-
-let saved = null;
-if (vid) {
-  const raw = await vid.path();
-  saved = join(outDir, "orientation-gestures.webm");
-  try {
-    copyFileSync(raw, saved);
-  } catch {
-    saved = raw;
-  }
-}
-console.log("ORIENTATION_GESTURES_VIDEO", saved || outDir);
-console.log(
-  "files",
-  readdirSync(outDir)
-    .filter((f) => f.endsWith(".webm"))
-    .join(", "),
-);

package/examples/saucedemo/scripts/show-add-to-cart-menu.mjs

@@ -1,123 +0,0 @@
-// Headful demo: login, then show the live add-to-cart menu (one row per
-// product still on the page), pick the bike light, prove that item lands in
-// the cart. Browser stays open ~12s at each pause so you can eyeball it.
-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 waygraphDist = join(root, "../../dist");
-
-const { buildExploreContext, buildExploreMenu } = await import(
-  pathToFileURL(join(waygraphDist, "auto-explore.js")).href
-);
-const { MemPage, Engine, start, end } = await import(pathToFileURL(join(waygraphDist, "index.js")).href);
-const { installDemoChrome } = await import(pathToFileURL(join(waygraphDist, "step-overlay.js")).href);
-
-const exe = process.env.CHROME_PATH || process.env.CHROMIUM_PATH;
-const pauseMs = Number(process.env.WG_SHOW_PAUSE_MS ?? 10_000);
-
-async function runBlock(engine, entry, context, page, mem) {
-  const flow = engine.defineFlow([start, entry.block, end]);
-  await flow.run(context, mem, { page, closeOnFinish: false });
-}
-
-function sleep(ms) {
-  return new Promise((r) => setTimeout(r, ms));
-}
-
-async function paintMenu(page, menu) {
-  const lines = [];
-  lines.push(`<style>
-    #wg-show{position:fixed;z-index:2147483647;left:50%;bottom:16px;transform:translateX(-50%);
-      max-width:min(92vw,640px);max-height:70vh;overflow:auto;background:rgba(20,10,40,.95);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,.4)}
-    #wg-show h3{margin:0 0 8px;font-size:16px}
-    #wg-show .here{color:#c9a6ff;margin-bottom:10px}
-    #wg-show .sec{margin:10px 0 6px;font-size:11px;font-weight:700;color:#a78bfa;text-transform:uppercase}
-    #wg-show .row{display:block;margin:6px 0;padding:10px 12px;border-radius:10px;border:1px solid #5b3aa8;
-      background:#2a1450;color:#fff}
-    #wg-show .pick{border-color:#34d399;background:#14532d}
-  </style>`);
-  lines.push(`<div id="wg-show"><h3>waygraph auto — live menu</h3>`);
-  lines.push(`<div class="here">You are here: <strong>${menu.here}</strong></div>`);
-  for (const section of menu.sections) {
-    lines.push(`<div class="sec">${section.title}</div>`);
-    for (const e of section.edges) {
-      const text = e.label ?? `${e.block} → ${e.to}`;
-      const cls = e.block === "add-to-cart" ? "row pick" : "row";
-      lines.push(`<div class="${cls}">${text.replace(/</g, "&lt;")}</div>`);
-    }
-  }
-  lines.push(`</div>`);
-  const html = lines.join("");
-  await page.evaluate((inner) => {
-    let el = document.getElementById("wg-show");
-    if (!el) {
-      el = document.createElement("div");
-      document.documentElement.appendChild(el);
-    }
-    el.outerHTML = inner;
-  }, html);
-}
-
-const { graph, library } = await buildExploreContext(root);
-const mem = new MemPage();
-mem.set(library.byName.get("submit-login").block.requires[0], {
-  username: "standard_user",
-  password: "secret_sauce",
-});
-
-const browser = await chromium.launch({
-  headless: false,
-  slowMo: 200,
-  args: ["--start-maximized"],
-  ...(exe ? { executablePath: exe } : {}),
-});
-const context = await browser.newContext({
-  baseURL: "https://www.saucedemo.com",
-  viewport: null,
-});
-const page = await context.newPage();
-const engine = new Engine({ headless: false, slowMo: 200 });
-
-await page.goto("/", { waitUntil: "load" });
-await installDemoChrome(page, "show add-to-cart menu", { banner: false });
-
-console.error("SHOW: logging in…");
-await runBlock(engine, library.byName.get("submit-login"), context, page, mem);
-await page.waitForURL(/inventory\.html/);
-
-const menu1 = await buildExploreMenu(page, graph, library, "LoggedIn");
-const addRows = menu1.flat.filter((e) => e.block === "add-to-cart");
-console.error(`SHOW: ${addRows.length} add-to-cart rows (one per product still addable):`);
-for (const r of addRows) console.error(`  - ${r.label}`);
-
-await paintMenu(page, menu1);
-console.error(`SHOW: look at the purple panel — pause ${pauseMs / 1000}s`);
-await sleep(pauseMs);
-
-const bike = addRows.find((r) => r.instanceOption?.value?.id === "sauce-labs-bike-light");
-if (!bike) throw new Error("bike light row missing");
-mem.set(bike.instanceOption.key, bike.instanceOption.value);
-console.error(`SHOW: picking → ${bike.label}`);
-await runBlock(engine, library.byName.get("add-to-cart"), context, page, mem);
-
-const menu2 = await buildExploreMenu(page, graph, library, "LoggedIn");
-await paintMenu(page, menu2);
-const stillBike = menu2.flat.some(
-  (e) => e.block === "add-to-cart" && e.instanceOption?.value?.id === "sauce-labs-bike-light",
-);
-console.error(
-  `SHOW: bike light in cart (Remove button visible), menu no longer offers it: ${!stillBike}`,
-);
-console.error(`SHOW: pause ${pauseMs / 1000}s then closing`);
-await sleep(pauseMs);
-
-await browser.close();
-console.error("SHOW: done");

package/examples/saucedemo/scripts/show-auto-menu.mjs

@@ -1,72 +0,0 @@
-// Dump waygraph auto menu sections on inventory (incl. bulk add/remove-all).
-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 waygraphDist = join(root, "../../dist");
-
-const { buildExploreContext, buildExploreMenu } = await import(
-  pathToFileURL(join(waygraphDist, "auto-explore.js")).href
-);
-const { MemPage, Engine, start, end } = await import(
-  pathToFileURL(join(waygraphDist, "index.js")).href
-);
-
-const exe = process.env.CHROME_PATH || process.env.CHROMIUM_PATH;
-
-async function runBlock(engine, entry, context, page, mem) {
-  const flow = engine.defineFlow([start, entry.block, end]);
-  await flow.run(context, mem, { page, closeOnFinish: false });
-}
-
-function dump(title, menu) {
-  console.log(`\n=== ${title} (here=${menu.here}) ===`);
-  for (const sec of menu.sections) {
-    console.log(`\n[${sec.title}]`);
-    for (const e of sec.edges) {
-      const label = e.label ?? `${e.block} -> ${e.to}`;
-      console.log(`  • ${label}`);
-    }
-  }
-}
-
-const { graph, library } = await buildExploreContext(root);
-const mem = new MemPage();
-mem.set(library.byName.get("submit-login").block.requires[0], {
-  username: "standard_user",
-  password: "secret_sauce",
-});
-
-const browser = await chromium.launch({
-  headless: true,
-  ...(exe ? { executablePath: exe, args: ["--no-sandbox"] } : {}),
-});
-const context = await browser.newContext({
-  baseURL: "https://www.saucedemo.com",
-  viewport: { width: 1280, height: 900 },
-});
-const page = await context.newPage();
-const engine = new Engine({ headless: true });
-
-await page.goto("/", { waitUntil: "load" });
-await runBlock(engine, library.byName.get("submit-login"), context, page, mem);
-await page.waitForURL(/inventory\.html/);
-
-const menu1 = await buildExploreMenu(page, graph, library, "LoggedIn");
-dump("AFTER LOGIN — cart empty", menu1);
-
-const bike = menu1.flat.find(
-  (e) => e.block === "add-to-cart" && e.instanceOption?.value?.id === "sauce-labs-bike-light",
-);
-mem.set(bike.instanceOption.key, bike.instanceOption.value);
-await runBlock(engine, library.byName.get("add-to-cart"), context, page, mem);
-
-const menu2 = await buildExploreMenu(page, graph, library, "LoggedIn");
-dump("AFTER ADD BIKE LIGHT — mixed", menu2);
-
-await browser.close();

package/templates/scaffold/scripts/README.md

@@ -1,13 +0,0 @@
-# `scripts/`
-
-- `fixture-server.mjs` - serves the offline `.html` fixture pages under `src/map/` on
-  `127.0.0.1:4177` (override with `WAYGRAPH_FIXTURE_PORT`/`WAYGRAPH_FIXTURE_HOST`). This is
-  what makes `npm test` pass with no network and no real app running.
-- `with-fixture.mjs` - starts `fixture-server.mjs`, runs whatever command you give it
-  (`waygraph auto`, `waygraph demo --blocks ...`), then tears the server down when that command
-  exits. Every `npm run demo*`/`auto*` script in `package.json` goes through this wrapper -
-  don't run `waygraph demo`/`auto` directly against this scaffold's own fixture pages without it.
-
-Pointing this scaffold at a real app instead of the offline fixtures: change `_nav.block.ts`'s
-`url`/`homeOrigin` to the real one and drop `with-fixture.mjs` from the scripts that no longer
-need it.