waygraph 0.12.18 → 0.12.19

package/dist/cli.js

@@ -221,6 +221,8 @@ import {
   demoPaceIsBlitz,
   demoPaceIsFast,
   demoPaceIsSlow,
+  formatDemoPaceBadge,
+  formatDemoPaceLabel,
 } from "waygraph";
 
 function walkDir(dir, pattern) {
@@ -491,6 +493,18 @@ const RING_CSS =
   // block chain shows no episode heading at all.
   "#wg-panel .wg-episode{margin:0 0 6px;font:700 15px system-ui,sans-serif;color:#fff;" +
   "padding-bottom:6px;border-bottom:1px solid rgba(124,58,237,.35);}" +
+  // Pace chip - numbers speak in the overlay (2.5x / 4500ms / slow).
+  "#wg-panel .wg-pace{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;" +
+  "padding:6px 10px;border-radius:8px;background:rgba(124,58,237,.22);" +
+  "border:1px solid rgba(124,58,237,.45);font:600 12px/1.35 system-ui,sans-serif;color:#f0e8ff;}" +
+  "#wg-panel .wg-pace-badge{display:inline-block;padding:2px 8px;border-radius:999px;" +
+  "background:#7C3AED;color:#fff;font:800 11px/1.2 system-ui,sans-serif;letter-spacing:.04em;" +
+  "text-transform:uppercase;}" +
+  "#wg-panel .wg-pace[data-pace-kind=slow] .wg-pace-badge," +
+  "#wg-panel .wg-pace[data-pace-kind=num-slow] .wg-pace-badge{background:#EAB308;color:#1c1917;}" +
+  "#wg-panel .wg-pace[data-pace-kind=fast] .wg-pace-badge," +
+  "#wg-panel .wg-pace[data-pace-kind=blitz] .wg-pace-badge{background:#22C55E;color:#052e16;}" +
+  "#wg-panel .wg-pace[data-pace-kind=ms] .wg-pace-badge{background:#3B82F6;color:#fff;}" +
   "#wg-panel .wg-narration{margin:0 0 12px;font:italic 14px/1.4 system-ui,sans-serif;color:#f0e8ff;}" +
   "#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;}" +
@@ -957,9 +971,20 @@ async function renderBeforeStep(page, info) {
       const narrationHtml = info.description
         ? "<div class=\\"wg-narration\\">" + esc(info.description) + "</div>"
         : "";
+      const paceHtml =
+        info.paceBadge || info.paceLabel
+          ? "<div class=\\"wg-pace\\" data-pace-kind=\\"" +
+            esc(info.paceKind || "normal") +
+            "\\"><span class=\\"wg-pace-badge\\">" +
+            esc(info.paceBadge || "1x") +
+            "</span><span>" +
+            esc(info.paceLabel || "") +
+            "</span></div>"
+          : "";
       let html =
         "<div id=\\"wg-progress\\"><div id=\\"wg-progress-bar\\" style=\\"width:" + pct + "%\\"></div></div>" +
         episodesHtml +
+        paceHtml +
         "<div id=\\"wg-modules\\" class=\\"" + modulesClass + "\\">" + modulesHtml + "</div>" +
         "<h3>Step " + (info.index + 1) + " / " + info.total + " - " + info.blockName + "</h3>" +
         narrationHtml;
@@ -995,7 +1020,12 @@ async function renderBeforeStep(page, info) {
       }
       if (window.__wgWirePanelChrome) {
         window.__wgWirePanelChrome(panel, "wg-panel-hidden", "waygraph demo", {
-          stepLabel: (info.index + 1) + " / " + info.total + (info.blockName ? " · " + info.blockName : ""),
+          stepLabel:
+            (info.index + 1) +
+            " / " +
+            info.total +
+            (info.blockName ? " · " + info.blockName : "") +
+            (info.paceBadge ? " · " + info.paceBadge : ""),
           forceCollapsed: info.forceCollapsed === true ? true : info.forceCollapsed === false ? false : undefined,
         });
       }
@@ -1214,9 +1244,20 @@ async function renderAfterStep(page, info) {
             .join("") +
           "</div>"
         : "";
+      const paceHtml =
+        info.paceBadge || info.paceLabel
+          ? "<div class=\\"wg-pace\\" data-pace-kind=\\"" +
+            escA(info.paceKind || "normal") +
+            "\\"><span class=\\"wg-pace-badge\\">" +
+            escA(info.paceBadge || "1x") +
+            "</span><span>" +
+            escA(info.paceLabel || "") +
+            "</span></div>"
+          : "";
       panel.innerHTML =
         "<div id=\\"wg-progress\\"><div id=\\"wg-progress-bar\\" style=\\"width:" + pct + "%\\"></div></div>" +
         episodesHtml +
+        paceHtml +
         "<div id=\\"wg-modules\\" class=\\"" + modulesClass + "\\">" + modulesHtml + "</div>" +
         "<h3>" + heading + "</h3>" +
         resultHtml +
@@ -1227,7 +1268,12 @@ async function renderAfterStep(page, info) {
       }
       if (window.__wgWirePanelChrome) {
         window.__wgWirePanelChrome(panel, "wg-panel-hidden", "waygraph demo", {
-          stepLabel: (info.index + 1) + " / " + info.total + (info.blockName ? " · " + info.blockName : ""),
+          stepLabel:
+            (info.index + 1) +
+            " / " +
+            info.total +
+            (info.blockName ? " · " + info.blockName : "") +
+            (info.paceBadge ? " · " + info.paceBadge : ""),
           forceCollapsed: info.forceCollapsed === true ? true : info.forceCollapsed === false ? false : undefined,
         });
       }
@@ -1329,7 +1375,12 @@ async function renderStepError(page, info) {
       }
       if (window.__wgWirePanelChrome) {
         window.__wgWirePanelChrome(panel, "wg-panel-hidden", "waygraph demo", {
-          stepLabel: (info.index + 1) + " / " + info.total + (info.blockName ? " · " + info.blockName : ""),
+          stepLabel:
+            (info.index + 1) +
+            " / " +
+            info.total +
+            (info.blockName ? " · " + info.blockName : "") +
+            (info.paceBadge ? " · " + info.paceBadge : ""),
           forceCollapsed: info.forceCollapsed === true ? true : info.forceCollapsed === false ? false : undefined,
         });
       }
@@ -1537,14 +1588,13 @@ async function presentSlides(page, slides, _gate, opts) {
   const episodeTitle = (opts && opts.episodeTitle) || "";
   const gatesFast = !!(opts && opts.fast);
   const demoPace = normalizeDemoPace((opts && opts.pace) || (gatesFast ? "fast" : "normal"));
-  const autoplayMs =
+  const baseAutoplay =
     opts && opts.autoplayMs
       ? Number(opts.autoplayMs)
       : process.env.WAYGRAPH_AUTOPLAY_MS
         ? Number(process.env.WAYGRAPH_AUTOPLAY_MS)
-        : demoPace === "slow"
-          ? 3500
-          : 1800;
+        : 1800;
+  const autoplayMs = demoPaceGateMs(demoPace, baseAutoplay);
   for (let i = 0; i < slides.length; i++) {
     const s = slides[i];
     const caption = formatHighlightCaption(s);
@@ -1584,11 +1634,22 @@ async function presentSlides(page, slides, _gate, opts) {
               (info.episodeTitle ? ": " + esc(info.episodeTitle) : "") +
               " · yap slides</div>"
             : "";
+        const paceHtml =
+          info.paceBadge || info.paceLabel
+            ? "<div class=\\"wg-pace\\" data-pace-kind=\\"" +
+              esc(info.paceKind || "normal") +
+              "\\"><span class=\\"wg-pace-badge\\">" +
+              esc(info.paceBadge || "1x") +
+              "</span><span>" +
+              esc(info.paceLabel || "") +
+              "</span></div>"
+            : "";
         panel.innerHTML =
           "<div class=\\"wg-chrome\\"><span class=\\"wg-chrome-title\\">waygraph demo</span>" +
           "<button type=\\"button\\" class=\\"wg-hide-btn\\" data-wg-toggle=\\"1\\">Hide</button></div>" +
           "<div class=\\"wg-body\\">" +
           episodeLine +
+          paceHtml +
           "<h3>Slide " +
           (info.index + 1) +
           " / " +
@@ -1706,6 +1767,9 @@ async function presentSlides(page, slides, _gate, opts) {
         dwellMs,
         episodeNumber: episodeNumber !== undefined ? episodeNumber : null,
         episodeTitle,
+        paceBadge: formatDemoPaceBadge(demoPace, baseAutoplay),
+        paceLabel: formatDemoPaceLabel(demoPace, baseAutoplay),
+        paceKind: demoPaceKind(demoPace),
       },
     );
     const started = Date.now();
@@ -1738,6 +1802,25 @@ async function presentSlides(page, slides, _gate, opts) {
   await hideRing(page);
 }
 
+function demoPaceKind(pace) {
+  const p = normalizeDemoPace(pace);
+  if (typeof p === "number" && p > 20) return "ms";
+  if (typeof p === "number") return demoPaceIsSlow(p) ? "num-slow" : demoPaceIsFast(p) ? "fast" : "normal";
+  if (p === "blitz" || p === "fast" || p === "slow") return p;
+  return "normal";
+}
+
+function paceSpeakFields(pace, baseAutoplayMs) {
+  const p = normalizeDemoPace(pace);
+  const base = Number.isFinite(baseAutoplayMs) && baseAutoplayMs > 0 ? baseAutoplayMs : 1800;
+  return {
+    pace: p,
+    paceBadge: formatDemoPaceBadge(p, base),
+    paceLabel: formatDemoPaceLabel(p, base),
+    paceKind: demoPaceKind(p),
+  };
+}
+
 async function hideRing(page) {
   await page
     .evaluate(() => {
@@ -2302,6 +2385,20 @@ async function runStepMode(engine, start, end, context, page, mem, resolved, slo
       }
       return { name: k.name, value };
     });
+    const paceSpeak = paceSpeakFields(pacing.demoPace, autoplayMs);
+    if (process.env.WAYGRAPH_JSON !== "1") {
+      console.log(
+        "waygraph demo: step " +
+          (i + 1) +
+          "/" +
+          resolved.length +
+          " " +
+          r.block.name +
+          " · " +
+          paceSpeak.paceLabel +
+          (r.episodeNumber ? " · episode " + r.episodeNumber : ""),
+      );
+    }
     await renderBeforeStep(page, {
       index: i,
       total: resolved.length,
@@ -2318,6 +2415,7 @@ async function runStepMode(engine, start, end, context, page, mem, resolved, slo
       episodeTitle: r.episodeTitle,
       stepperMode,
       forceCollapsed,
+      ...paceSpeak,
     });
     const edits = await gate();
     for (const k of requires) {
@@ -2487,6 +2585,7 @@ async function runStepMode(engine, start, end, context, page, mem, resolved, slo
       highlights,
       gatesFast: pacing.gatesFast,
       pace: pacing.demoPace,
+      ...paceSpeakFields(pacing.demoPace, autoplayMs),
       isLast: i === resolved.length - 1,
       allNames: moduleNames,
       allDescriptions: moduleDescriptions,

package/dist/highlights.d.ts

@@ -133,6 +133,16 @@ export declare function demoPaceIsFast(pace: DemoPace): boolean;
 export declare function demoPaceIsSlow(pace: DemoPace): boolean;
 /** Autoplay / Next-gate ms for this pace (base is WAYGRAPH_AUTOPLAY_MS or 1800). */
 export declare function demoPaceGateMs(pace: DemoPace, baseAutoplayMs: number): number;
+/**
+ * Short chip for the demo panel (e.g. `2.5x`, `4500ms`, `slow`).
+ * Always printable - numbers speak in the UI, not only in code.
+ */
+export declare function formatDemoPaceBadge(pace: DemoPace, baseAutoplayMs?: number): string;
+/**
+ * Loud one-line pace description for panel + console
+ * (e.g. `pace 2.5x (~4500ms gates)` / `pace 4500ms gates (~2.25x)`).
+ */
+export declare function formatDemoPaceLabel(pace: DemoPace, baseAutoplayMs?: number): string;
 /**
  * Resolve min dwell ms for any fixture (stub / flow fixture / yap slide),
  * or `null` when duration is unset (caller keeps legacy timing).

package/dist/highlights.js

@@ -162,6 +162,51 @@ export function demoPaceGateMs(pace, baseAutoplayMs) {
     const scale = demoPaceScale(pace);
     return Math.min(30000, Math.max(80, Math.round(baseAutoplayMs * scale)));
 }
+/**
+ * Short chip for the demo panel (e.g. `2.5x`, `4500ms`, `slow`).
+ * Always printable - numbers speak in the UI, not only in code.
+ */
+export function formatDemoPaceBadge(pace, baseAutoplayMs = 1800) {
+    const p = normalizeDemoPace(pace);
+    if (typeof p === "number" && p > 20)
+        return `${Math.round(p)}ms`;
+    if (typeof p === "number") {
+        const s = Number.isInteger(p) ? String(p) : String(Math.round(p * 100) / 100);
+        return `${s}x`;
+    }
+    if (p === "blitz")
+        return "blitz";
+    if (p === "fast")
+        return "fast";
+    if (p === "slow")
+        return "slow";
+    void baseAutoplayMs;
+    return "1x";
+}
+/**
+ * Loud one-line pace description for panel + console
+ * (e.g. `pace 2.5x (~4500ms gates)` / `pace 4500ms gates (~2.25x)`).
+ */
+export function formatDemoPaceLabel(pace, baseAutoplayMs = 1800) {
+    const p = normalizeDemoPace(pace);
+    const gate = demoPaceGateMs(p, baseAutoplayMs);
+    const scale = demoPaceScale(p);
+    const scaleTxt = Number.isInteger(scale) ? String(scale) : (Math.round(scale * 100) / 100).toString();
+    if (typeof p === "number" && p > 20) {
+        return `pace ${Math.round(p)}ms gates (~${scaleTxt}x)`;
+    }
+    if (typeof p === "number") {
+        const s = Number.isInteger(p) ? String(p) : String(Math.round(p * 100) / 100);
+        return `pace ${s}x (~${gate}ms gates)`;
+    }
+    if (p === "blitz")
+        return `pace blitz (~${gate}ms, skip theater)`;
+    if (p === "fast")
+        return `pace fast (~${scaleTxt}x, ~${gate}ms gates)`;
+    if (p === "slow")
+        return `pace slow (~${scaleTxt}x, ~${gate}ms gates)`;
+    return `pace normal (1x, ~${gate}ms gates)`;
+}
 /**
  * Resolve min dwell ms for any fixture (stub / flow fixture / yap slide),
  * or `null` when duration is unset (caller keeps legacy timing).

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { connect, checkpoint } from "./types.js";
 export { MemKey, MemPage, key, keyGroup } from "./mem-page.js";
 export { Trait, urlMatches, textEquals, visible } from "./trait.js";
 export { runGraph, spawnTab, narrate, Engine, start, end, branch, withVerify, modVerify, modVerifyAll, defineBlock, defineNavBlock, defineNavClickBlock, defineMethodBlock, defineActionBlock, definePageBlock, defineEffectBlock, defineMemEffectBlock, defineMemNavBlock, locate, composeBlock, fastForwardComposeBlock, isFastForwardBlock, preflight, withSessionReset, withTitle, withDemoPace, withBlockPace, withHighlightStyle, withExpectedFailure, withHighlightFixtures, chainFlow, } from "./engine.js";
-export { resolveHighlightSlots, resolveSlides, resolveFixtureDwellMs, resolveSlideDwellMs, formatHighlightCaption, hasAuthoredStubAfter, hasAuthoredStubOnError, normalizeHighlightTone, normalizeDemoPace, normalizeHighlightSize, normalizeHighlightWeight, applyHighlightStyleDefaults, toneIconPrefix, resolveStepDemoPace, demoPaceScale, demoPaceIsBlitz, demoPaceIsFast, demoPaceIsSlow, demoPaceGateMs, FIXTURE_DURATION_MS_DEFAULT, FIXTURE_DURATION_FAST_MS_DEFAULT, FIXTURE_DURATION_SLOW_MS_DEFAULT, SLIDE_DURATION_MS_DEFAULT, SLIDE_DURATION_FAST_MS_DEFAULT, } from "./highlights.js";
+export { resolveHighlightSlots, resolveSlides, resolveFixtureDwellMs, resolveSlideDwellMs, formatHighlightCaption, hasAuthoredStubAfter, hasAuthoredStubOnError, normalizeHighlightTone, normalizeDemoPace, normalizeHighlightSize, normalizeHighlightWeight, applyHighlightStyleDefaults, toneIconPrefix, resolveStepDemoPace, demoPaceScale, demoPaceIsBlitz, demoPaceIsFast, demoPaceIsSlow, demoPaceGateMs, formatDemoPaceBadge, formatDemoPaceLabel, FIXTURE_DURATION_MS_DEFAULT, FIXTURE_DURATION_FAST_MS_DEFAULT, FIXTURE_DURATION_SLOW_MS_DEFAULT, SLIDE_DURATION_MS_DEFAULT, SLIDE_DURATION_FAST_MS_DEFAULT, } from "./highlights.js";
 export type { WaygraphHighlightStub, WaygraphHighlightFixture, WaygraphSlide, FixtureDurationFields, HighlightStubPhase, HighlightStubPhaseName, HighlightFixtureMap, ResolvedHighlight, WaygraphHighlight, HighlightTone, HighlightSize, HighlightWeight, HighlightStyleDefaults, DemoPace, DemoPaceName, } from "./highlights.js";
 export type { Flow, EngineConfig, ComposedBlock, FastForwardComposedBlock, RunGraphOptions, BlockInfo, NavBlock, NavBlockOptions, NavClickBlock, NavClickBlockOptions, MethodBlock, ActionBlock, PageBlock, PageBlockOptions, PageMethodEntry, EffectBlock, MemEffectBlock, MemNavBlock, } from "./engine.js";
 export type { ActionPage } from "./types.js";

package/dist/index.js

@@ -2,7 +2,7 @@ export { connect, checkpoint } from "./types.js";
 export { MemKey, MemPage, key, keyGroup } from "./mem-page.js";
 export { Trait, urlMatches, textEquals, visible } from "./trait.js";
 export { runGraph, spawnTab, narrate, Engine, start, end, branch, withVerify, modVerify, modVerifyAll, defineBlock, defineNavBlock, defineNavClickBlock, defineMethodBlock, defineActionBlock, definePageBlock, defineEffectBlock, defineMemEffectBlock, defineMemNavBlock, locate, composeBlock, fastForwardComposeBlock, isFastForwardBlock, preflight, withSessionReset, withTitle, withDemoPace, withBlockPace, withHighlightStyle, withExpectedFailure, withHighlightFixtures, chainFlow, } from "./engine.js";
-export { resolveHighlightSlots, resolveSlides, resolveFixtureDwellMs, resolveSlideDwellMs, formatHighlightCaption, hasAuthoredStubAfter, hasAuthoredStubOnError, normalizeHighlightTone, normalizeDemoPace, normalizeHighlightSize, normalizeHighlightWeight, applyHighlightStyleDefaults, toneIconPrefix, resolveStepDemoPace, demoPaceScale, demoPaceIsBlitz, demoPaceIsFast, demoPaceIsSlow, demoPaceGateMs, FIXTURE_DURATION_MS_DEFAULT, FIXTURE_DURATION_FAST_MS_DEFAULT, FIXTURE_DURATION_SLOW_MS_DEFAULT, SLIDE_DURATION_MS_DEFAULT, SLIDE_DURATION_FAST_MS_DEFAULT, } from "./highlights.js";
+export { resolveHighlightSlots, resolveSlides, resolveFixtureDwellMs, resolveSlideDwellMs, formatHighlightCaption, hasAuthoredStubAfter, hasAuthoredStubOnError, normalizeHighlightTone, normalizeDemoPace, normalizeHighlightSize, normalizeHighlightWeight, applyHighlightStyleDefaults, toneIconPrefix, resolveStepDemoPace, demoPaceScale, demoPaceIsBlitz, demoPaceIsFast, demoPaceIsSlow, demoPaceGateMs, formatDemoPaceBadge, formatDemoPaceLabel, FIXTURE_DURATION_MS_DEFAULT, FIXTURE_DURATION_FAST_MS_DEFAULT, FIXTURE_DURATION_SLOW_MS_DEFAULT, SLIDE_DURATION_MS_DEFAULT, SLIDE_DURATION_FAST_MS_DEFAULT, } from "./highlights.js";
 export { discoverGraph, toMermaid, findOrphanBlocks, findBlockPath } from "./graph.js";
 export { isFileSelectToken, parseBlocksSelect, matchBlocksSelect, globToRegExp, } from "./blocks-select.js";
 export { EdgeLeaseCoordinator } from "./traverse-lease.js";

package/package.json

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