From 365efb7814481cc6af34c0a172a60dbe9dd36779 Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:08:48 +0530
Subject: [PATCH 01/14] feat(docs): demo registry + RAF/motion hooks, modal
 iframe fallback

---
 docs/app/components/demos/index.ts            |  3 ++
 docs/app/components/demos/lib/index.ts        |  2 +
 docs/app/components/demos/lib/use-raf-loop.ts | 29 ++++++++++++
 .../demos/lib/use-reduced-motion.ts           | 23 ++++++++++
 docs/app/components/demos/registry.ts         | 20 +++++++++
 docs/app/components/demos/types.ts            | 15 +++++++
 docs/app/components/landing/demo-modal.tsx    | 44 +++++++++++++------
 7 files changed, 123 insertions(+), 13 deletions(-)
 create mode 100644 docs/app/components/demos/index.ts
 create mode 100644 docs/app/components/demos/lib/index.ts
 create mode 100644 docs/app/components/demos/lib/use-raf-loop.ts
 create mode 100644 docs/app/components/demos/lib/use-reduced-motion.ts
 create mode 100644 docs/app/components/demos/registry.ts
 create mode 100644 docs/app/components/demos/types.ts

diff --git a/docs/app/components/demos/index.ts b/docs/app/components/demos/index.ts
new file mode 100644
index 00000000..99fbcffb
--- /dev/null
+++ b/docs/app/components/demos/index.ts
@@ -0,0 +1,3 @@
+export { useRafLoop, useReducedMotion } from "./lib";
+export { DEMO_COMPONENTS, demoComponent } from "./registry";
+export type { DemoId, DemoProps } from "./types";
diff --git a/docs/app/components/demos/lib/index.ts b/docs/app/components/demos/lib/index.ts
new file mode 100644
index 00000000..6e001513
--- /dev/null
+++ b/docs/app/components/demos/lib/index.ts
@@ -0,0 +1,2 @@
+export { useRafLoop } from "./use-raf-loop";
+export { useReducedMotion } from "./use-reduced-motion";
diff --git a/docs/app/components/demos/lib/use-raf-loop.ts b/docs/app/components/demos/lib/use-raf-loop.ts
new file mode 100644
index 00000000..0b41f648
--- /dev/null
+++ b/docs/app/components/demos/lib/use-raf-loop.ts
@@ -0,0 +1,29 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Run `callback` once per animation frame while `active` is true, passing the
+ * high-resolution timestamp. The loop is fully torn down (no dangling frame)
+ * when `active` flips false or the component unmounts, so a closed demo modal
+ * never leaves a RAF running.
+ *
+ * `callback` is held in a ref, so a demo can pass a fresh closure each render
+ * without restarting the loop.
+ */
+export function useRafLoop(
+  callback: (now: number) => void,
+  active: boolean,
+): void {
+  const cbRef = useRef(callback);
+  cbRef.current = callback;
+
+  useEffect(() => {
+    if (!active) return;
+    let frame = 0;
+    const tick = (now: number) => {
+      cbRef.current(now);
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [active]);
+}
diff --git a/docs/app/components/demos/lib/use-reduced-motion.ts b/docs/app/components/demos/lib/use-reduced-motion.ts
new file mode 100644
index 00000000..4deee75e
--- /dev/null
+++ b/docs/app/components/demos/lib/use-reduced-motion.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+const QUERY = "(prefers-reduced-motion: reduce)";
+
+/**
+ * Reactively tracks the user's reduced-motion preference. Demos use it to render
+ * a single static frame instead of running their animation loop. SSR-safe:
+ * returns `false` until mounted on the client.
+ */
+export function useReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia(QUERY);
+    const update = () => setReduced(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+
+  return reduced;
+}
diff --git a/docs/app/components/demos/registry.ts b/docs/app/components/demos/registry.ts
new file mode 100644
index 00000000..29402bfc
--- /dev/null
+++ b/docs/app/components/demos/registry.ts
@@ -0,0 +1,20 @@
+import type { ComponentType, LazyExoticComponent } from "react";
+import type { DemoId, DemoProps } from "./types";
+
+type LazyDemo = LazyExoticComponent<ComponentType<DemoProps>>;
+
+/**
+ * React ports of the interactive demos, keyed by demo id and lazy-loaded so the
+ * homepage bundle stays small. Ids absent here fall back to the vendored
+ * `interactive.html` iframe in {@link DemoModal} until ported — see
+ * `tasks/react-demos-plan.md`. Once every id is present, the iframe path and
+ * `public/demos/` are removed.
+ */
+export const DEMO_COMPONENTS: Partial<Record<DemoId, LazyDemo>> = {
+  // Populated one entry per demo as each is ported to React.
+};
+
+/** The React port for `id`, or `undefined` if it still uses the iframe. */
+export function demoComponent(id: string): LazyDemo | undefined {
+  return DEMO_COMPONENTS[id as DemoId];
+}
diff --git a/docs/app/components/demos/types.ts b/docs/app/components/demos/types.ts
new file mode 100644
index 00000000..a7ae38ad
--- /dev/null
+++ b/docs/app/components/demos/types.ts
@@ -0,0 +1,15 @@
+/** The interactive demos the homepage scenario finder can open. */
+export type DemoId =
+  | "ratelimit"
+  | "recovery"
+  | "scaling"
+  | "workflow"
+  | "mesh"
+  | "saga"
+  | "worksteal";
+
+/** Props every demo component receives from {@link DemoModal}. */
+export interface DemoProps {
+  /** Active host theme, so a demo can pick palette variants if it needs to. */
+  theme: "light" | "dark";
+}
diff --git a/docs/app/components/landing/demo-modal.tsx b/docs/app/components/landing/demo-modal.tsx
index 30afcd54..b5b0ff7f 100644
--- a/docs/app/components/landing/demo-modal.tsx
+++ b/docs/app/components/landing/demo-modal.tsx
@@ -1,9 +1,10 @@
-import { useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
+import { demoComponent } from "@/components/demos";
 import { useThemeMode } from "@/lib/theme";
 
-/** A live demo the finder can open: the embed id + a human title for the bar. */
+/** A live demo the finder can open: the demo id + a human title for the bar. */
 export interface DemoTarget {
-  /** Demo id understood by `demos/interactive.html?embed=` (e.g. "ratelimit"). */
+  /** Demo id — a React port (see demos/registry) or an iframe fallback id. */
   id: string;
   /** Title shown in the modal bar. */
   title: string;
@@ -135,6 +136,8 @@ export function DemoModal({
 
   if (!current) return null;
 
+  // Prefer the React port; ids not yet ported render the vendored iframe.
+  const Demo = demoComponent(current.id);
   // `import.meta.env.BASE_URL` ends with "/" and respects DOCS_BASE_PATH.
   const src = `${import.meta.env.BASE_URL}demos/interactive.html?embed=${current.id}&theme=${theme}&accent=brand#${current.id}`;
 
@@ -175,16 +178,31 @@ export function DemoModal({
           </div>
         </div>
         <div className="dm-stage">
-          <div className={`dm-loading${loading ? "" : " hide"}`}>
-            <span className="dm-spin" />
-            Loading demo…
-          </div>
-          <iframe
-            className="dm-frame"
-            title={`${current.title} — interactive demo`}
-            src={src}
-            onLoad={() => setLoading(false)}
-          />
+          {Demo ? (
+            <Suspense
+              fallback={
+                <div className="dm-loading">
+                  <span className="dm-spin" />
+                  Loading demo…
+                </div>
+              }
+            >
+              <Demo theme={theme} />
+            </Suspense>
+          ) : (
+            <>
+              <div className={`dm-loading${loading ? "" : " hide"}`}>
+                <span className="dm-spin" />
+                Loading demo…
+              </div>
+              <iframe
+                className="dm-frame"
+                title={`${current.title} — interactive demo`}
+                src={src}
+                onLoad={() => setLoading(false)}
+              />
+            </>
+          )}
         </div>
       </div>
     </div>

From b4ded2b748e7b3e96c76c14cd40296520e0d38d9 Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:16:47 +0530
Subject: [PATCH 02/14] feat(docs): port saga demo to React, drop its iframe

---
 docs/app/app.css                        |   1 +
 docs/app/components/demos/registry.ts   |   4 +-
 docs/app/components/demos/saga-demo.tsx | 561 ++++++++++++++++++++++++
 docs/app/styles/demos.css               | 238 ++++++++++
 4 files changed, 802 insertions(+), 2 deletions(-)
 create mode 100644 docs/app/components/demos/saga-demo.tsx
 create mode 100644 docs/app/styles/demos.css

diff --git a/docs/app/app.css b/docs/app/app.css
index c066aaee..0c542660 100644
--- a/docs/app/app.css
+++ b/docs/app/app.css
@@ -8,5 +8,6 @@
 @import "./styles/changelog.css";
 @import "./styles/diagrams.css";
 @import "./styles/landing.css";
+@import "./styles/demos.css";
 @import "./styles/shiki.css";
 @import "./styles/sdk.css";
diff --git a/docs/app/components/demos/registry.ts b/docs/app/components/demos/registry.ts
index 29402bfc..84e9c7ca 100644
--- a/docs/app/components/demos/registry.ts
+++ b/docs/app/components/demos/registry.ts
@@ -1,4 +1,4 @@
-import type { ComponentType, LazyExoticComponent } from "react";
+import { type ComponentType, type LazyExoticComponent, lazy } from "react";
 import type { DemoId, DemoProps } from "./types";
 
 type LazyDemo = LazyExoticComponent<ComponentType<DemoProps>>;
@@ -11,7 +11,7 @@ type LazyDemo = LazyExoticComponent<ComponentType<DemoProps>>;
  * `public/demos/` are removed.
  */
 export const DEMO_COMPONENTS: Partial<Record<DemoId, LazyDemo>> = {
-  // Populated one entry per demo as each is ported to React.
+  saga: lazy(() => import("./saga-demo")),
 };
 
 /** The React port for `id`, or `undefined` if it still uses the iframe. */
diff --git a/docs/app/components/demos/saga-demo.tsx b/docs/app/components/demos/saga-demo.tsx
new file mode 100644
index 00000000..ff6c3f29
--- /dev/null
+++ b/docs/app/components/demos/saga-demo.tsx
@@ -0,0 +1,561 @@
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { useRafLoop, useReducedMotion } from "./lib";
+
+/*
+ * Saga / compensation demo — a distributed transaction as a chain of steps,
+ * each with a compensating action. Pick where it fails and run it: forward
+ * steps commit, then on failure the compensations unwind in reverse so nothing
+ * is left half-done. React port of the vendored demo-saga.js (SVG + RAF).
+ */
+
+const W = 940;
+const H = 292;
+const FDUR = 720; // forward step duration (ms)
+const CDUR = 620; // compensation step duration (ms)
+const CYC = 104;
+const CW = 178;
+const CH = 88;
+const CX = [143, 361, 579, 797];
+
+interface Step {
+  fwd: string;
+  fn: string;
+  comp: string;
+}
+const STEPS: Step[] = [
+  { fwd: "reserve seat", fn: "reserve_seat.s()", comp: "release seat" },
+  { fwd: "charge card", fn: "charge_card.s()", comp: "refund card" },
+  { fwd: "book hotel", fn: "book_hotel.s()", comp: "cancel hotel" },
+  { fwd: "issue ticket", fn: "issue_ticket.s()", comp: "void ticket" },
+];
+const N = STEPS.length;
+
+type Status = "pending" | "running" | "done" | "failed" | "comp" | "undone";
+type Phase = "idle" | "forward" | "compensate" | "done";
+type Outcome = "" | "committed" | "rolled back";
+
+interface ColorSet {
+  fill: string;
+  stroke: string;
+  pip: string;
+  t: string;
+}
+const COL: Record<Status, ColorSet> = {
+  pending: {
+    fill: "var(--panel2)",
+    stroke: "var(--line2)",
+    pip: "var(--dim)",
+    t: "var(--txt2)",
+  },
+  running: {
+    fill: "color-mix(in oklch,var(--cyan) 15%,transparent)",
+    stroke: "color-mix(in oklch,var(--cyan) 52%,transparent)",
+    pip: "var(--cyan)",
+    t: "var(--txt)",
+  },
+  done: {
+    fill: "color-mix(in oklch,var(--grn) 13%,transparent)",
+    stroke: "color-mix(in oklch,var(--grn) 48%,transparent)",
+    pip: "var(--grn)",
+    t: "var(--txt)",
+  },
+  failed: {
+    fill: "color-mix(in oklch,var(--red) 14%,transparent)",
+    stroke: "color-mix(in oklch,var(--red) 52%,transparent)",
+    pip: "var(--red)",
+    t: "var(--txt)",
+  },
+  comp: {
+    fill: "color-mix(in oklch,var(--amber) 15%,transparent)",
+    stroke: "color-mix(in oklch,var(--amber) 52%,transparent)",
+    pip: "var(--amber)",
+    t: "var(--txt)",
+  },
+  undone: {
+    fill: "var(--panel)",
+    stroke: "var(--line2)",
+    pip: "var(--dim)",
+    t: "var(--dim)",
+  },
+};
+
+interface Sim {
+  st: Status[];
+  phase: Phase;
+  idx: number;
+  stepStart: number;
+  compQueue: number[];
+  outcome: Outcome;
+  dotProg: number;
+  /** Forward edge i committed (green). */
+  fCommitted: boolean[];
+  /** Reverse edge i opacity during compensation. */
+  rOpacity: number[];
+}
+
+function freshSim(): Sim {
+  return {
+    st: STEPS.map(() => "pending"),
+    phase: "idle",
+    idx: 0,
+    stepStart: 0,
+    compQueue: [],
+    outcome: "",
+    dotProg: 0,
+    fCommitted: Array(N - 1).fill(false),
+    rOpacity: Array(N - 1).fill(0),
+  };
+}
+
+/** Final committed/rolled-back frame, without animating (reduced motion). */
+function instantSim(failAt: number): Sim {
+  const sim = freshSim();
+  sim.phase = "done";
+  if (failAt < 0) {
+    sim.st = STEPS.map(() => "done");
+    sim.outcome = "committed";
+    sim.fCommitted = Array(N - 1).fill(true);
+  } else {
+    for (let i = 0; i < failAt; i++) sim.st[i] = "undone";
+    sim.st[failAt] = "failed";
+    sim.outcome = "rolled back";
+  }
+  return sim;
+}
+
+export default function SagaDemo() {
+  const reduced = useReducedMotion();
+  const simRef = useRef<Sim>(freshSim());
+  const [failAt, setFailAt] = useState(1);
+  const [running, setRunning] = useState(false);
+  const [, repaint] = useReducer((n: number) => n + 1, 0);
+
+  const finish = useCallback((outcome: Outcome) => {
+    simRef.current.phase = "done";
+    simRef.current.outcome = outcome;
+    setRunning(false);
+  }, []);
+
+  // One animation frame of the saga state machine.
+  const tick = useCallback(
+    (now: number) => {
+      const sim = simRef.current;
+      if (sim.stepStart === 0) sim.stepStart = now; // lazy-init on first frame
+
+      if (sim.phase === "forward") {
+        const prog = (now - sim.stepStart) / FDUR;
+        sim.dotProg = Math.min(1, prog);
+        if (prog >= 1) {
+          if (sim.idx === failAt) {
+            sim.st[sim.idx] = "failed";
+            sim.compQueue = [];
+            for (let j = sim.idx - 1; j >= 0; j--) {
+              if (sim.st[j] === "done") sim.compQueue.push(j);
+            }
+            if (sim.compQueue.length) {
+              sim.phase = "compensate";
+              const ci = sim.compQueue[0];
+              sim.st[ci] = "comp";
+              sim.stepStart = now;
+              if (ci < N - 1) sim.rOpacity[ci] = 0.9;
+            } else {
+              finish("rolled back");
+            }
+          } else {
+            sim.st[sim.idx] = "done";
+            if (sim.idx < N - 1) {
+              sim.fCommitted[sim.idx] = true;
+              sim.idx += 1;
+              sim.st[sim.idx] = "running";
+              sim.stepStart = now;
+              sim.dotProg = 0;
+            } else {
+              finish("committed");
+            }
+          }
+        }
+      } else if (sim.phase === "compensate") {
+        const ci = sim.compQueue[0];
+        const cp = (now - sim.stepStart) / CDUR;
+        if (cp >= 1) {
+          sim.st[ci] = "undone";
+          sim.compQueue.shift();
+          if (ci < N - 1) sim.rOpacity[ci] = 0;
+          if (ci > 0) sim.rOpacity[ci - 1] = 0.9;
+          if (sim.compQueue.length) {
+            sim.stepStart = now;
+            sim.st[sim.compQueue[0]] = "comp";
+          } else {
+            finish("rolled back");
+          }
+        }
+      }
+      repaint();
+    },
+    [failAt, finish],
+  );
+
+  const run = useCallback(() => {
+    const sim = freshSim();
+    sim.phase = "forward";
+    sim.st[0] = "running";
+    simRef.current = sim;
+    setRunning(true);
+  }, []);
+
+  // Auto-run when the demo mounts; render a static final frame if reduced motion.
+  // Re-runs when the fail point changes or the motion preference flips.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: run/tick are stable callbacks; we intentionally re-seed only on failAt/reduced change.
+  useEffect(() => {
+    if (reduced) {
+      simRef.current = instantSim(failAt);
+      setRunning(false);
+      repaint();
+    } else {
+      run();
+    }
+  }, [failAt, reduced]);
+
+  useRafLoop(tick, running && !reduced);
+
+  const sim = simRef.current;
+  const committed = sim.st.filter((s) => s === "done").length;
+  const compensated = sim.st.filter((s) => s === "undone").length;
+  const stepLabel =
+    sim.phase === "idle"
+      ? "—"
+      : sim.phase === "forward"
+        ? `${sim.idx + 1} / ${N}`
+        : sim.phase === "compensate"
+          ? "unwind"
+          : "done";
+  const dotVisible =
+    sim.phase === "forward" && sim.st[sim.idx] === "running" && sim.idx < N - 1;
+  const dotX = dotVisible
+    ? CX[sim.idx] +
+      CW / 2 +
+      (CX[sim.idx + 1] - CW / 2 - (CX[sim.idx] + CW / 2)) * sim.dotProg
+    : 0;
+
+  return (
+    <div className="dm-frame-react">
+      <div className="demo-bar">
+        <span className="title">
+          <span className="ld" />
+          booking-saga · transaction
+        </span>
+        <div className="demo-controls">
+          {/* biome-ignore lint/a11y/useSemanticElements: segmented toggle of aria-pressed buttons; a fieldset/legend would fight the inline-flex .seg styling */}
+          <div className="seg" role="group" aria-label="Where it fails">
+            {[
+              { v: 1, cls: "bad", label: "charge fails" },
+              { v: 2, cls: "bad", label: "hotel fails" },
+              { v: -1, cls: "good", label: "all succeed" },
+            ].map((opt) => {
+              const on = failAt === opt.v;
+              return (
+                <button
+                  type="button"
+                  key={opt.v}
+                  className={opt.cls}
+                  data-on={on ? "1" : "0"}
+                  aria-pressed={on}
+                  onClick={() => setFailAt(opt.v)}
+                >
+                  <span className="dot" />
+                  {opt.label}
+                </button>
+              );
+            })}
+          </div>
+          <button
+            type="button"
+            className="ctl pri"
+            disabled={running}
+            onClick={run}
+          >
+            {running ? (
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                stroke="none"
+                aria-hidden="true"
+              >
+                <rect x="6" y="5" width="4" height="14" rx="1" />
+                <rect x="14" y="5" width="4" height="14" rx="1" />
+              </svg>
+            ) : (
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                stroke="none"
+                aria-hidden="true"
+              >
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            )}
+            {running ? "Running…" : "Run saga"}
+          </button>
+        </div>
+      </div>
+
+      <div className="stage">
+        <svg
+          viewBox={`0 0 ${W} ${H}`}
+          role="img"
+          aria-label="A booking saga: reserve seat, charge card, book hotel, issue ticket. Each step has a compensating action. When a step fails, taskito runs the compensations of the committed steps in reverse order."
+        >
+          <defs>
+            <marker
+              id="saga-ar-f"
+              viewBox="0 0 10 10"
+              refX="8"
+              refY="5"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto"
+            >
+              <path
+                d="M1 1 L9 5 L1 9"
+                fill="none"
+                stroke="var(--line3)"
+                strokeWidth="1.7"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </marker>
+            <marker
+              id="saga-ar-c"
+              viewBox="0 0 10 10"
+              refX="8"
+              refY="5"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto"
+            >
+              <path
+                d="M1 1 L9 5 L1 9"
+                fill="none"
+                stroke="var(--amber)"
+                strokeWidth="1.7"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </marker>
+          </defs>
+
+          {/* edges */}
+          <g>
+            {STEPS.slice(0, N - 1).map((_, i) => {
+              const x1 = CX[i] + CW / 2;
+              const x2 = CX[i + 1] - CW / 2;
+              return (
+                <path
+                  // biome-ignore lint/suspicious/noArrayIndexKey: fixed edge list
+                  key={`f${i}`}
+                  d={`M${x1} ${CYC - 6} H ${x2}`}
+                  fill="none"
+                  stroke={
+                    sim.fCommitted[i]
+                      ? "color-mix(in oklch,var(--grn) 45%,transparent)"
+                      : "var(--line2)"
+                  }
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  markerEnd="url(#saga-ar-f)"
+                />
+              );
+            })}
+            {STEPS.slice(0, N - 1).map((_, i) => {
+              const x1 = CX[i] + CW / 2;
+              const x2 = CX[i + 1] - CW / 2;
+              return (
+                <path
+                  // biome-ignore lint/suspicious/noArrayIndexKey: fixed edge list
+                  key={`r${i}`}
+                  d={`M${x2} ${CYC + CH / 2 + 30} H ${x1}`}
+                  fill="none"
+                  stroke="color-mix(in oklch,var(--amber) 50%,transparent)"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  markerEnd="url(#saga-ar-c)"
+                  opacity={sim.rOpacity[i]}
+                />
+              );
+            })}
+          </g>
+
+          {/* cards */}
+          <g>
+            {STEPS.map((s, i) => {
+              const status = sim.st[i];
+              const k = COL[status];
+              const x = CX[i] - CW / 2;
+              const y = CYC - CH / 2;
+              const compActive = status === "comp" || status === "undone";
+              return (
+                <g key={s.fwd}>
+                  <rect
+                    x={x}
+                    y={y}
+                    width={CW}
+                    height={CH}
+                    rx="13"
+                    fill={k.fill}
+                    stroke={k.stroke}
+                  />
+                  <text
+                    x={x + 15}
+                    y={y + 22}
+                    fontFamily="var(--mono)"
+                    fontSize="9.5"
+                    letterSpacing=".06em"
+                    fill="var(--dim)"
+                  >
+                    STEP {i + 1}
+                  </text>
+                  <circle cx={x + CW - 16} cy={y + 18} r="4.5" fill={k.pip} />
+                  <text
+                    x={x + 15}
+                    y={y + 45}
+                    fontFamily="var(--sans)"
+                    fontSize="14.5"
+                    fontWeight="600"
+                    fill={k.t}
+                    textDecoration={
+                      status === "undone" ? "line-through" : "none"
+                    }
+                  >
+                    {s.fwd}
+                  </text>
+                  <text
+                    x={x + 15}
+                    y={y + 66}
+                    fontFamily="var(--code)"
+                    fontSize="11"
+                    fill="var(--mut)"
+                  >
+                    {s.fn}
+                  </text>
+                  <rect
+                    x={x + 18}
+                    y={CYC + CH / 2 + 16}
+                    width={CW - 36}
+                    height="28"
+                    rx="8"
+                    fill={
+                      status === "comp"
+                        ? "color-mix(in oklch,var(--amber) 12%,transparent)"
+                        : "var(--panel)"
+                    }
+                    stroke={
+                      status === "comp"
+                        ? "color-mix(in oklch,var(--amber) 52%,transparent)"
+                        : status === "undone"
+                          ? "var(--line3)"
+                          : "var(--line2)"
+                    }
+                    strokeDasharray={compActive ? "" : "3 4"}
+                  />
+                  <path
+                    d={`M${x + 30} ${CYC + CH / 2 + 27} l-5 3 l5 3`}
+                    fill="none"
+                    stroke={
+                      status === "comp"
+                        ? "var(--amber)"
+                        : status === "undone"
+                          ? "var(--txt2)"
+                          : "var(--dim)"
+                    }
+                    strokeWidth="1.6"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <text
+                    x={x + 40}
+                    y={CYC + CH / 2 + 34}
+                    fontFamily="var(--mono)"
+                    fontSize="10.5"
+                    fill={
+                      status === "comp"
+                        ? "var(--amber)"
+                        : status === "undone"
+                          ? "var(--txt2)"
+                          : "var(--dim)"
+                    }
+                  >
+                    {s.comp}
+                  </text>
+                </g>
+              );
+            })}
+          </g>
+
+          {/* forward token */}
+          <g>
+            <circle
+              r="6"
+              fill="var(--cyan)"
+              cx={dotX}
+              cy={CYC - 6}
+              opacity={dotVisible ? 1 : 0}
+            />
+          </g>
+        </svg>
+      </div>
+
+      <div className="legend">
+        <span>
+          <i style={{ background: "var(--cyan)" }} />
+          running
+        </span>
+        <span>
+          <i style={{ background: "var(--grn)" }} />
+          committed
+        </span>
+        <span>
+          <i style={{ background: "var(--red)" }} />
+          failed
+        </span>
+        <span>
+          <i style={{ background: "var(--amber)" }} />
+          compensating
+        </span>
+        <span>
+          <i style={{ background: "var(--dim)" }} />
+          undone
+        </span>
+      </div>
+
+      <div className="readout">
+        <div className="stat">
+          <span className="k">step</span>
+          <span className="v" style={{ fontSize: 16 }}>
+            {stepLabel}
+          </span>
+        </div>
+        <div className="stat">
+          <span className="k">committed</span>
+          <span className="v good" style={{ fontSize: 16 }}>
+            {committed}
+          </span>
+        </div>
+        <div className="stat">
+          <span className="k">compensated</span>
+          <span className="v warn" style={{ fontSize: 16 }}>
+            {compensated}
+          </span>
+        </div>
+        <div className="stat">
+          <span className="k">outcome</span>
+          <span
+            className={`v ${sim.outcome === "committed" ? "good" : sim.outcome === "rolled back" ? "bad" : ""}`}
+            style={{ fontSize: 15 }}
+          >
+            {sim.outcome || "—"}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/styles/demos.css b/docs/app/styles/demos.css
new file mode 100644
index 00000000..19de97d8
--- /dev/null
+++ b/docs/app/styles/demos.css
@@ -0,0 +1,238 @@
+/* Shared chrome for the React-ported interactive demos rendered inside the
+   homepage demo modal. Ported from the vendored public/demos/interactive.css and
+   scoped under .dm-stage so the generic class names never collide with the docs
+   site. Tokens (--cyan/--grn/--panel2/--mono/…) come from tokens.css. */
+
+/* React demo fills the modal stage (the iframe slot) and scrolls if taller. */
+.dm-stage .dm-frame-react {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+  background: var(--bg);
+}
+
+.dm-stage .demo-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 13px 18px;
+  border-bottom: 1px solid var(--line);
+  background: color-mix(in oklch, var(--panel) 60%, #000);
+  flex-wrap: wrap;
+}
+[data-theme="light"] .dm-stage .demo-bar {
+  background: var(--panel2);
+}
+.dm-stage .demo-bar .title {
+  font-family: var(--mono);
+  font-size: 12.5px;
+  color: var(--txt2);
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+.dm-stage .demo-bar .title .ld {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--grn);
+  box-shadow: 0 0 8px var(--grn);
+  animation: blip 1.5s infinite;
+}
+.dm-stage .demo-controls {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* control atoms */
+.dm-stage .ctl {
+  font-family: var(--mono);
+  font-size: 12.5px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 13px;
+  border-radius: 9px;
+  cursor: pointer;
+  border: 1px solid var(--line2);
+  background: var(--panel);
+  color: var(--txt2);
+  transition:
+    border-color 0.15s,
+    color 0.15s,
+    background 0.15s,
+    transform 0.12s;
+}
+.dm-stage .ctl:hover {
+  border-color: var(--line3);
+  color: var(--txt);
+}
+.dm-stage .ctl:active {
+  transform: translateY(1px);
+}
+.dm-stage .ctl svg {
+  width: 14px;
+  height: 14px;
+}
+.dm-stage .ctl.pri {
+  background: linear-gradient(180deg, var(--indigo), var(--indigo-dk));
+  border-color: transparent;
+  color: #fff;
+  box-shadow: 0 8px 18px -12px var(--indigo);
+}
+.dm-stage .ctl.pri:hover {
+  color: #fff;
+  filter: brightness(1.05);
+}
+.dm-stage .ctl[disabled] {
+  opacity: 0.45;
+  cursor: default;
+  pointer-events: none;
+}
+
+/* segmented toggle */
+.dm-stage .seg {
+  display: inline-flex;
+  border: 1px solid var(--line2);
+  border-radius: 9px;
+  overflow: hidden;
+  background: var(--panel);
+}
+.dm-stage .seg button {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--mut);
+  padding: 8px 13px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  transition:
+    color 0.15s,
+    background 0.15s;
+}
+.dm-stage .seg button + button {
+  border-left: 1px solid var(--line2);
+}
+.dm-stage .seg button .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--dim);
+}
+.dm-stage .seg button:hover {
+  color: var(--txt2);
+}
+.dm-stage .seg button[data-on="1"] {
+  color: var(--txt);
+  background: var(--panel3);
+}
+.dm-stage .seg button[data-on="1"].good .dot {
+  background: var(--grn);
+  box-shadow: 0 0 7px var(--grn);
+}
+.dm-stage .seg button[data-on="1"].bad .dot {
+  background: var(--red);
+  box-shadow: 0 0 7px var(--red);
+}
+
+/* viz stage */
+.dm-stage .stage {
+  position: relative;
+  padding: 18px 18px 6px;
+}
+.dm-stage .stage svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+}
+.dm-stage .stage canvas {
+  display: block;
+  width: 100%;
+}
+
+/* readout strip */
+.dm-stage .readout {
+  display: grid;
+  gap: 1px;
+  background: var(--line);
+  border-top: 1px solid var(--line);
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+}
+.dm-stage .stat {
+  background: var(--panel);
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.dm-stage .stat .k {
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+.dm-stage .stat .v {
+  font-family: var(--code);
+  font-size: 21px;
+  font-weight: 600;
+  color: var(--txt);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+}
+.dm-stage .stat .v .u {
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--mut);
+}
+.dm-stage .stat .v.warn {
+  color: var(--amber);
+}
+.dm-stage .stat .v.bad {
+  color: var(--red);
+}
+.dm-stage .stat .v.good {
+  color: var(--grn);
+}
+
+/* legend */
+.dm-stage .legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px 18px;
+  padding: 0 18px 16px;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--mut);
+}
+.dm-stage .legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+.dm-stage .legend i {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  flex: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dm-stage .demo-bar .title .ld {
+    animation: none;
+  }
+}

From e2a0fc169d4fbdb46593ee7f830ca303b15bf86f Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:21:31 +0530
Subject: [PATCH 03/14] feat(docs): port mesh demo to React, drop its iframe

---
 docs/app/components/demos/mesh-demo.tsx | 624 ++++++++++++++++++++++++
 docs/app/components/demos/registry.ts   |   1 +
 docs/app/styles/demos.css               |  24 +
 3 files changed, 649 insertions(+)
 create mode 100644 docs/app/components/demos/mesh-demo.tsx

diff --git a/docs/app/components/demos/mesh-demo.tsx b/docs/app/components/demos/mesh-demo.tsx
new file mode 100644
index 00000000..ed24943a
--- /dev/null
+++ b/docs/app/components/demos/mesh-demo.tsx
@@ -0,0 +1,624 @@
+import { useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import { useRafLoop, useReducedMotion } from "./lib";
+
+/*
+ * Mesh scheduling demo — jobs carry a routing key; the brokerless mesh sends
+ * each to a worker pool built to run it (gpu / default / email). Click a machine
+ * to drop it and watch its work reroute across the pool. React port of the
+ * vendored demo-mesh.js (SVG + RAF token simulation).
+ */
+
+const W = 940;
+const H = 330;
+const DISP = { x: 92, y: 165 };
+const EX = 430; // pool entry x
+const SPEED = 560;
+const NX0 = 560;
+const NSTEP = 128;
+const NW = 104;
+const NH = 46;
+const WEIGHT = { gpu: 0.24, default: 0.52, email: 0.24 };
+const MAX_TOKENS = 34;
+
+interface PoolDef {
+  key: "gpu" | "default" | "email";
+  label: string;
+  col: string;
+  y: number;
+  n: number;
+  dur: number;
+}
+const POOL_DEFS: PoolDef[] = [
+  {
+    key: "gpu",
+    label: "gpu · render",
+    col: "var(--cyan)",
+    y: 60,
+    n: 2,
+    dur: 1650,
+  },
+  {
+    key: "default",
+    label: "default · web",
+    col: "var(--indigo-br)",
+    y: 165,
+    n: 3,
+    dur: 900,
+  },
+  {
+    key: "email",
+    label: "email · notify",
+    col: "var(--amber)",
+    y: 270,
+    n: 2,
+    dur: 720,
+  },
+];
+
+type Phase = "toentry" | "tonode" | "processing" | "waiting" | "done";
+
+interface NodeState {
+  x: number;
+  y: number;
+  busy: Token | null;
+  off: boolean;
+  key: string;
+  idx: number;
+  pool: Pool;
+}
+interface Token {
+  id: number;
+  pool: Pool;
+  x: number;
+  y: number;
+  phase: Phase;
+  tx: number;
+  ty: number;
+  pUntil: number;
+  node: NodeState | null;
+}
+interface Pool extends PoolDef {
+  nodes: NodeState[];
+  wait: Token[];
+}
+interface Sim {
+  pools: Pool[];
+  tokens: Token[];
+  metrics: { routed: number; rerouted: number };
+  emitAcc: number;
+  last: number;
+  ids: number;
+}
+
+/** First online, idle node in a pool, or null when none is free. */
+function freeNode(p: Pool): NodeState | null {
+  return p.nodes.find((nd) => !nd.off && !nd.busy) ?? null;
+}
+
+function freshSim(): Sim {
+  const pools: Pool[] = POOL_DEFS.map((d) => ({ ...d, nodes: [], wait: [] }));
+  for (const p of pools) {
+    for (let i = 0; i < p.n; i++) {
+      p.nodes.push({
+        x: NX0 + i * NSTEP,
+        y: p.y,
+        busy: null,
+        off: false,
+        key: p.key,
+        idx: i,
+        pool: p,
+      });
+    }
+  }
+  return {
+    pools,
+    tokens: [],
+    metrics: { routed: 0, rerouted: 0 },
+    emitAcc: 0,
+    last: 0,
+    ids: 0,
+  };
+}
+
+export default function MeshDemo() {
+  const reduced = useReducedMotion();
+  const simRef = useRef<Sim>(freshSim());
+  const [, repaint] = useReducer((n: number) => n + 1, 0);
+
+  const poolByKey = useCallback(
+    (k: string) => simRef.current.pools.find((p) => p.key === k) as Pool,
+    [],
+  );
+
+  const pickKey = useCallback((): PoolDef["key"] => {
+    const r = Math.random();
+    if (r < WEIGHT.gpu) return "gpu";
+    if (r < WEIGHT.gpu + WEIGHT.default) return "default";
+    return "email";
+  }, []);
+
+  const emit = useCallback(
+    (n: number) => {
+      const sim = simRef.current;
+      for (let i = 0; i < n; i++) {
+        if (sim.tokens.length > MAX_TOKENS) break;
+        const p = poolByKey(pickKey());
+        sim.tokens.push({
+          id: sim.ids++,
+          pool: p,
+          x: DISP.x + 22,
+          y: DISP.y + (Math.random() * 16 - 8),
+          phase: "toentry",
+          tx: EX,
+          ty: p.y,
+          pUntil: 0,
+          node: null,
+        });
+      }
+    },
+    [poolByKey, pickKey],
+  );
+
+  const assignPool = useCallback((p: Pool) => {
+    let nd = freeNode(p);
+    while (p.wait.length && nd) {
+      const t = p.wait.shift() as Token;
+      nd.busy = t;
+      t.node = nd;
+      t.phase = "tonode";
+      t.tx = nd.x;
+      t.ty = nd.y;
+      nd = freeNode(p);
+    }
+  }, []);
+
+  const arriveEntry = useCallback((t: Token) => {
+    const nd = freeNode(t.pool);
+    if (nd) {
+      nd.busy = t;
+      t.node = nd;
+      t.phase = "tonode";
+      t.tx = nd.x;
+      t.ty = nd.y;
+    } else {
+      const idx = t.pool.wait.length;
+      t.phase = "waiting";
+      t.pool.wait.push(t);
+      t.tx = 445;
+      t.ty = t.pool.y - 20 + idx * 13;
+    }
+  }, []);
+
+  const step = useCallback(
+    (now: number, dt: number) => {
+      const sim = simRef.current;
+      if (!reduced) {
+        sim.emitAcc += dt;
+        if (sim.emitAcc > 880) {
+          sim.emitAcc = 0;
+          if (sim.tokens.length < 26) emit(1);
+        }
+      }
+      const move = (SPEED * dt) / 1000;
+      for (const p of sim.pools) {
+        p.wait.forEach((t, i) => {
+          t.tx = 445;
+          t.ty = p.y - 20 + i * 13;
+        });
+        assignPool(p);
+      }
+      for (let i = sim.tokens.length - 1; i >= 0; i--) {
+        const t = sim.tokens[i];
+        const dx = t.tx - t.x;
+        const dy = t.ty - t.y;
+        const d = Math.hypot(dx, dy);
+        if (d > 0.5) {
+          const s = Math.min(move, d);
+          t.x += (dx / d) * s;
+          t.y += (dy / d) * s;
+        }
+        const arrived = d < 2.5;
+        switch (t.phase) {
+          case "toentry":
+            if (arrived) arriveEntry(t);
+            break;
+          case "tonode":
+            if (arrived) {
+              t.phase = "processing";
+              t.pUntil = now + t.pool.dur * (0.82 + Math.random() * 0.4);
+            }
+            break;
+          case "processing":
+            if (now >= t.pUntil) {
+              if (t.node) {
+                t.node.busy = null;
+                assignPool(t.pool);
+              }
+              sim.metrics.routed++;
+              t.phase = "done";
+              t.tx = W + 30;
+              t.ty = t.y;
+            }
+            break;
+          case "done":
+            if (t.x > W + 20) sim.tokens.splice(i, 1);
+            break;
+        }
+      }
+      repaint();
+    },
+    [reduced, emit, assignPool, arriveEntry],
+  );
+
+  const toggleNode = useCallback(
+    (nd: NodeState) => {
+      nd.off = !nd.off;
+      if (nd.off && nd.busy) {
+        const t = nd.busy;
+        nd.busy = null;
+        simRef.current.metrics.rerouted++;
+        t.node = null;
+        t.phase = "waiting";
+        nd.pool.wait.unshift(t);
+        t.tx = 445;
+        t.ty = nd.pool.y - 20;
+      }
+      if (!nd.off) assignPool(nd.pool);
+      repaint();
+    },
+    [assignPool],
+  );
+
+  const tick = useCallback(
+    (now: number) => {
+      const sim = simRef.current;
+      if (!sim.last) sim.last = now;
+      const dt = Math.min(now - sim.last, 60);
+      sim.last = now;
+      step(now, dt);
+    },
+    [step],
+  );
+
+  // Seed on mount: a few in-flight tokens (live) or a static frame (reduced).
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-seed only when motion preference flips; emit/arriveEntry are stable.
+  useEffect(() => {
+    simRef.current = freshSim();
+    if (reduced) {
+      emit(7);
+      for (const t of simRef.current.tokens) {
+        t.x = EX;
+        t.y = t.pool.y;
+        arriveEntry(t);
+      }
+    } else {
+      emit(3);
+    }
+    repaint();
+  }, [reduced]);
+
+  useRafLoop(tick, !reduced);
+
+  const sim = simRef.current;
+
+  // Static wires (dispatcher → entry curves + entry → node lines).
+  const wires = useMemo(() => {
+    const mx = (148 + EX) / 2;
+    const out: { d: string; arrow: boolean }[] = [];
+    for (const p of POOL_DEFS) {
+      out.push({
+        d: `M148 165 C ${mx} 165, ${mx} ${p.y}, ${EX} ${p.y}`,
+        arrow: true,
+      });
+      for (let i = 0; i < p.n; i++) {
+        out.push({
+          d: `M420 ${p.y} H ${NX0 + i * NSTEP - NW / 2}`,
+          arrow: false,
+        });
+      }
+    }
+    return out;
+  }, []);
+
+  // Readout.
+  let online = 0;
+  let total = 0;
+  let busy = 0;
+  let waiting = 0;
+  for (const p of sim.pools) {
+    for (const nd of p.nodes) {
+      total++;
+      if (!nd.off) online++;
+      if (nd.busy) busy++;
+    }
+    waiting += p.wait.length;
+  }
+  const flight = sim.tokens.filter(
+    (t) => t.phase === "toentry" || t.phase === "tonode",
+  ).length;
+
+  return (
+    <div className="dm-frame-react">
+      <div className="demo-bar">
+        <span className="title">
+          <span className="ld" />
+          worker-mesh · live
+        </span>
+        <div className="demo-controls">
+          <span className="mesh-hint">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M12 17v.01M12 13.5a2 2 0 0 0 .914-3.782 1.98 1.98 0 0 0-2.414.483" />
+              <circle cx="12" cy="12" r="9" />
+            </svg>
+            click a machine to drop it
+          </span>
+          <button type="button" className="ctl pri" onClick={() => emit(6)}>
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z" />
+            </svg>
+            Send burst (6)
+          </button>
+        </div>
+      </div>
+
+      <div className="stage">
+        <svg
+          viewBox={`0 0 ${W} ${H}`}
+          role="img"
+          aria-label="Mesh scheduling: jobs leave a dispatcher and route by key to one of three worker pools — gpu, default, and email. Click a worker to take it offline and its jobs reroute to the rest of its pool."
+        >
+          <defs>
+            <marker
+              id="mesh-ar"
+              viewBox="0 0 10 10"
+              refX="8"
+              refY="5"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto"
+            >
+              <path
+                d="M1 1 L9 5 L1 9"
+                fill="none"
+                stroke="var(--line3)"
+                strokeWidth="1.7"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </marker>
+          </defs>
+
+          <g>
+            {wires.map((wire) => (
+              <path
+                key={wire.d}
+                d={wire.d}
+                fill="none"
+                stroke="var(--line2)"
+                strokeWidth="2"
+                strokeDasharray="2 7"
+                strokeLinecap="round"
+                markerEnd={wire.arrow ? "url(#mesh-ar)" : undefined}
+              />
+            ))}
+          </g>
+
+          {/* dispatcher */}
+          <g>
+            <rect
+              x="36"
+              y="133"
+              width="112"
+              height="64"
+              rx="13"
+              fill="var(--panel3)"
+              stroke="var(--line2)"
+            />
+            <text
+              x="92"
+              y="159"
+              textAnchor="middle"
+              fontFamily="var(--mono)"
+              fontSize="11"
+              fill="var(--mut)"
+            >
+              dispatcher
+            </text>
+            <text
+              x="92"
+              y="178"
+              textAnchor="middle"
+              fontFamily="var(--code)"
+              fontSize="11"
+              fontWeight="600"
+              fill="var(--txt2)"
+            >
+              route()
+            </text>
+          </g>
+
+          {/* pool chips + nodes */}
+          <g>
+            {sim.pools.map((p) => (
+              <g key={p.key}>
+                <rect
+                  x="300"
+                  y={p.y - 15}
+                  width="120"
+                  height="30"
+                  rx="9"
+                  fill="var(--panel)"
+                  stroke={p.col}
+                />
+                <rect
+                  x="300"
+                  y={p.y - 15}
+                  width="120"
+                  height="30"
+                  rx="9"
+                  fill="none"
+                  stroke={`color-mix(in oklch,${p.col} 40%,transparent)`}
+                />
+                <circle cx="316" cy={p.y} r="4" fill={p.col} />
+                <text
+                  x="328"
+                  y={p.y + 4}
+                  fontFamily="var(--mono)"
+                  fontSize="11"
+                  fill="var(--txt2)"
+                >
+                  {p.label}
+                </text>
+                {p.nodes.map((nd) => {
+                  const fill = nd.off
+                    ? "var(--panel)"
+                    : nd.busy
+                      ? `color-mix(in oklch,${p.col} 16%,transparent)`
+                      : "var(--panel2)";
+                  const stroke = nd.off
+                    ? "var(--line2)"
+                    : nd.busy
+                      ? `color-mix(in oklch,${p.col} 50%,transparent)`
+                      : "var(--line2)";
+                  return (
+                    // biome-ignore lint/a11y/useSemanticElements: SVG <g> can't be an HTML <button>; role+key handlers give it button semantics
+                    <g
+                      key={`${p.key}-${nd.idx}`}
+                      className="mesh-node"
+                      tabIndex={0}
+                      role="button"
+                      aria-pressed={nd.off}
+                      aria-label={`${p.key} worker — ${nd.off ? "offline, click to bring online" : "online, click to take offline"}`}
+                      style={{ opacity: nd.off ? 0.55 : 1 }}
+                      onClick={() => toggleNode(nd)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          toggleNode(nd);
+                        }
+                      }}
+                    >
+                      <rect
+                        x={nd.x - NW / 2}
+                        y={nd.y - NH / 2}
+                        width={NW}
+                        height={NH}
+                        rx="11"
+                        fill={fill}
+                        stroke={stroke}
+                        strokeDasharray={nd.off ? "3 5" : undefined}
+                      />
+                      <circle
+                        cx={nd.x + NW / 2 - 13}
+                        cy={nd.y - NH / 2 + 13}
+                        r="4"
+                        fill={!nd.off && nd.busy ? "var(--grn)" : "var(--dim)"}
+                      />
+                      <text
+                        x={nd.x - NW / 2 + 12}
+                        y={nd.y + 4}
+                        fontFamily="var(--code)"
+                        fontSize="11"
+                        fontWeight="600"
+                        fill="var(--txt2)"
+                      >
+                        {p.key}-{nd.idx + 1}
+                      </text>
+                      <path
+                        d={`M${nd.x - 9} ${nd.y - 9} l18 18 M${nd.x + 9} ${nd.y - 9} l-18 18`}
+                        stroke="var(--red)"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        opacity={nd.off ? 0.8 : 0}
+                      />
+                    </g>
+                  );
+                })}
+              </g>
+            ))}
+          </g>
+
+          {/* tokens */}
+          <g>
+            {sim.tokens.map((t) => (
+              <circle
+                key={t.id}
+                cx={t.x.toFixed(1)}
+                cy={t.y.toFixed(1)}
+                r={t.phase === "processing" ? 6.5 : 6}
+                fill={t.pool.col}
+                opacity={t.phase === "waiting" ? 0.8 : 1}
+              />
+            ))}
+          </g>
+        </svg>
+      </div>
+
+      <div className="legend">
+        <span>
+          <i style={{ background: "var(--cyan)" }} />
+          gpu job
+        </span>
+        <span>
+          <i style={{ background: "var(--indigo-br)" }} />
+          default job
+        </span>
+        <span>
+          <i style={{ background: "var(--amber)" }} />
+          email job
+        </span>
+        <span>
+          <i style={{ background: "var(--grn)" }} />
+          worker busy
+        </span>
+        <span>
+          <i style={{ background: "var(--dim)" }} />
+          offline
+        </span>
+      </div>
+
+      <div className="readout">
+        <div className="stat">
+          <span className="k">nodes online</span>
+          <span className="v">
+            {online} / {total}
+          </span>
+        </div>
+        <div className="stat">
+          <span className="k">routing</span>
+          <span className="v">{flight + busy}</span>
+        </div>
+        <div className="stat">
+          <span className="k">waiting</span>
+          <span className={`v ${waiting > 0 ? "warn" : ""}`}>{waiting}</span>
+        </div>
+        <div className="stat">
+          <span className="k">routed</span>
+          <span className="v good">{sim.metrics.routed}</span>
+        </div>
+        <div className="stat">
+          <span className="k">rerouted</span>
+          <span className={`v ${sim.metrics.rerouted > 0 ? "bad" : ""}`}>
+            {sim.metrics.rerouted}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/components/demos/registry.ts b/docs/app/components/demos/registry.ts
index 84e9c7ca..240b21b6 100644
--- a/docs/app/components/demos/registry.ts
+++ b/docs/app/components/demos/registry.ts
@@ -11,6 +11,7 @@ type LazyDemo = LazyExoticComponent<ComponentType<DemoProps>>;
  * `public/demos/` are removed.
  */
 export const DEMO_COMPONENTS: Partial<Record<DemoId, LazyDemo>> = {
+  mesh: lazy(() => import("./mesh-demo")),
   saga: lazy(() => import("./saga-demo")),
 };
 
diff --git a/docs/app/styles/demos.css b/docs/app/styles/demos.css
index 19de97d8..2ebedcaf 100644
--- a/docs/app/styles/demos.css
+++ b/docs/app/styles/demos.css
@@ -231,6 +231,30 @@
   flex: none;
 }
 
+/* mesh demo */
+.dm-stage .mesh-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--dim);
+  padding-right: 4px;
+}
+.dm-stage .mesh-hint svg {
+  width: 14px;
+  height: 14px;
+  color: var(--mut);
+}
+.dm-stage .mesh-node {
+  cursor: pointer;
+}
+.dm-stage .mesh-node:focus-visible {
+  outline: 2px solid var(--indigo-line);
+  outline-offset: 2px;
+  border-radius: 12px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .dm-stage .demo-bar .title .ld {
     animation: none;

From 0c85ba65c24f6e2b4018eaa3b099a9c5eb101d8e Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:23:32 +0530
Subject: [PATCH 04/14] chore: add docs lint + typecheck pre-commit hooks

---
 .pre-commit-config.yaml | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 90423d22..6cf8e661 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -70,3 +70,17 @@ repos:
         language: system
         files: ^dashboard/src/
         pass_filenames: false
+
+      - id: docs-lint
+        name: docs lint (biome)
+        entry: bash -c 'cd docs && pnpm exec biome ci app/'
+        language: system
+        files: ^docs/(app/|biome\.json)
+        pass_filenames: false
+
+      - id: docs-typecheck
+        name: docs typecheck (react-router typegen + tsc)
+        entry: bash -c 'cd docs && pnpm run typecheck'
+        language: system
+        files: ^docs/(app/|tsconfig\.json|package\.json)
+        pass_filenames: false

From 0407436b291c3f3a40f3a0327e708873c8d914f1 Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:27:59 +0530
Subject: [PATCH 05/14] feat(docs): port recovery demo to React, drop its
 iframe

---
 docs/app/components/demos/recovery-demo.tsx | 490 ++++++++++++++++++++
 docs/app/components/demos/registry.ts       |   1 +
 docs/app/styles/demos.css                   | 280 +++++++++++
 3 files changed, 771 insertions(+)
 create mode 100644 docs/app/components/demos/recovery-demo.tsx

diff --git a/docs/app/components/demos/recovery-demo.tsx b/docs/app/components/demos/recovery-demo.tsx
new file mode 100644
index 00000000..1205fdc5
--- /dev/null
+++ b/docs/app/components/demos/recovery-demo.tsx
@@ -0,0 +1,490 @@
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { useRafLoop, useReducedMotion } from "./lib";
+
+/*
+ * Failure-recovery demo — a scrubbable timeline of one job's lifecycle. Drag the
+ * playhead across retries; toggle the ending between recovering on the last
+ * retry or exhausting into the DLQ. React port of demo-recovery.js (HTML + RAF).
+ */
+
+interface StateStyle {
+  c: string;
+  soft: string;
+  line: string;
+}
+const STATES: Record<string, StateStyle> = {
+  Queued: {
+    c: "var(--indigo-br)",
+    soft: "var(--indigo-soft)",
+    line: "var(--indigo-line)",
+  },
+  Running: {
+    c: "var(--cyan)",
+    soft: "color-mix(in oklch,var(--cyan) 14%,transparent)",
+    line: "color-mix(in oklch,var(--cyan) 40%,transparent)",
+  },
+  Failed: {
+    c: "var(--red)",
+    soft: "color-mix(in oklch,var(--red) 13%,transparent)",
+    line: "color-mix(in oklch,var(--red) 42%,transparent)",
+  },
+  Retrying: {
+    c: "var(--amber)",
+    soft: "color-mix(in oklch,var(--amber) 14%,transparent)",
+    line: "color-mix(in oklch,var(--amber) 42%,transparent)",
+  },
+  Complete: {
+    c: "var(--grn)",
+    soft: "color-mix(in oklch,var(--grn) 14%,transparent)",
+    line: "color-mix(in oklch,var(--grn) 42%,transparent)",
+  },
+  Dead: { c: "var(--txt2)", soft: "var(--panel3)", line: "var(--line3)" },
+};
+
+interface Event {
+  t: number;
+  state: string;
+  att: number;
+  ttl: string;
+  d: string;
+}
+const TAIL = 1400;
+function base(): Event[] {
+  return [
+    {
+      t: 0,
+      state: "Queued",
+      att: 0,
+      ttl: "Enqueued",
+      d: "Accepted into the queue · status pending",
+    },
+    {
+      t: 800,
+      state: "Running",
+      att: 1,
+      ttl: "Dispatched",
+      d: "Worker picked up the job · attempt 1",
+    },
+    {
+      t: 2600,
+      state: "Failed",
+      att: 1,
+      ttl: "Error",
+      d: "ConnectionError: upstream returned 503",
+    },
+    {
+      t: 3000,
+      state: "Retrying",
+      att: 1,
+      ttl: "Backoff",
+      d: "Waiting 2.0s before retry 2",
+    },
+    {
+      t: 5000,
+      state: "Running",
+      att: 2,
+      ttl: "Dispatched",
+      d: "Worker picked up the job · attempt 2",
+    },
+    {
+      t: 6800,
+      state: "Failed",
+      att: 2,
+      ttl: "Error",
+      d: "ConnectionError: upstream returned 503",
+    },
+    {
+      t: 7200,
+      state: "Retrying",
+      att: 2,
+      ttl: "Backoff",
+      d: "Waiting 4.0s before retry 3",
+    },
+    {
+      t: 11200,
+      state: "Running",
+      att: 3,
+      ttl: "Dispatched",
+      d: "Worker picked up the job · attempt 3",
+    },
+  ];
+}
+const SCEN: Record<string, Event[]> = {
+  recover: base().concat([
+    {
+      t: 12700,
+      state: "Complete",
+      att: 3,
+      ttl: "Success",
+      d: "Returned in 1.5s · result written to store",
+    },
+  ]),
+  dlq: base().concat([
+    {
+      t: 13000,
+      state: "Failed",
+      att: 3,
+      ttl: "Error",
+      d: "ConnectionError: upstream returned 503",
+    },
+    {
+      t: 13300,
+      state: "Dead",
+      att: 3,
+      ttl: "Dead-letter",
+      d: "Max retries (3) exhausted → moved to DLQ",
+    },
+  ]),
+};
+
+const durationOf = (events: Event[]) => events[events.length - 1].t + TAIL;
+
+type AttemptResult = "" | "pending" | "fail" | "ok" | "dead";
+
+export default function RecoveryDemo() {
+  const reduced = useReducedMotion();
+  const [scen, setScen] = useState<"recover" | "dlq">("recover");
+  const [playing, setPlaying] = useState(false);
+  const playRef = useRef(0);
+  const lastT = useRef(0);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const logRef = useRef<HTMLDivElement>(null);
+  const [, repaint] = useReducer((n: number) => n + 1, 0);
+
+  const events = SCEN[scen];
+  const DUR = durationOf(events);
+
+  const stopPlay = useCallback(() => setPlaying(false), []);
+
+  const tick = useCallback(
+    (now: number) => {
+      if (!lastT.current) lastT.current = now;
+      const dt = now - lastT.current;
+      lastT.current = now;
+      playRef.current += dt;
+      if (playRef.current >= DUR) {
+        playRef.current = DUR;
+        setPlaying(false);
+      }
+      repaint();
+    },
+    [DUR],
+  );
+
+  useRafLoop(tick, playing && !reduced);
+
+  const startPlay = useCallback(() => {
+    if (reduced) {
+      playRef.current = DUR;
+      repaint();
+      return;
+    }
+    if (playRef.current >= DUR) playRef.current = 0;
+    lastT.current = 0;
+    setPlaying(true);
+  }, [reduced, DUR]);
+
+  const setFromX = useCallback(
+    (clientX: number) => {
+      const track = trackRef.current;
+      if (!track) return;
+      const r = track.getBoundingClientRect();
+      const ratio = Math.max(0, Math.min(1, (clientX - r.left) / r.width));
+      playRef.current = ratio * DUR;
+      stopPlay();
+      repaint();
+    },
+    [DUR, stopPlay],
+  );
+
+  const dragging = useRef(false);
+
+  // Keep the current log row scrolled into view.
+  const play = playRef.current;
+  let idx = 0;
+  for (let i = 0; i < events.length; i++) {
+    if (events[i].t <= play + 0.001) idx = i;
+    else break;
+  }
+  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll when the active event row changes
+  useEffect(() => {
+    const log = logRef.current;
+    if (!log) return;
+    const cur = log.querySelector<HTMLElement>(".fr-ev.cur");
+    if (cur) {
+      const top = cur.offsetTop - log.clientHeight / 2 + cur.clientHeight / 2;
+      log.scrollTop = Math.max(0, top);
+    }
+  }, [idx, scen]);
+
+  const ev = events[idx];
+  const st = STATES[ev.state];
+  const pct = (play / DUR) * 100;
+
+  // attempt chips
+  const res: Record<number, AttemptResult> = { 1: "", 2: "", 3: "" };
+  for (let i = 0; i <= idx; i++) {
+    const e = events[i];
+    if (e.att >= 1) {
+      if (e.state === "Running" && !res[e.att]) res[e.att] = "pending";
+      if (e.state === "Failed") res[e.att] = "fail";
+      if (e.state === "Complete") res[e.att] = "ok";
+      if (e.state === "Dead") res[e.att] = "dead";
+    }
+  }
+  const attemptGlyph: Record<AttemptResult, string> = {
+    "": "",
+    pending: "",
+    fail: "✕",
+    ok: "✓",
+    dead: "☠",
+  };
+
+  // next-retry / result meta
+  let nxKey = "Next retry";
+  let nxVal = "—";
+  let nxColor = "var(--mut)";
+  if (ev.state === "Retrying") {
+    const nxt = idx + 1 < events.length ? events[idx + 1].t : DUR;
+    nxVal = `${Math.max(0, (nxt - play) / 1000).toFixed(1)}s`;
+    nxColor = "var(--amber)";
+  } else if (ev.state === "Complete") {
+    nxKey = "Result";
+    nxVal = "stored";
+    nxColor = "var(--grn)";
+  } else if (ev.state === "Dead") {
+    nxKey = "Routed to";
+    nxVal = "DLQ";
+    nxColor = "var(--txt2)";
+  } else if (ev.state === "Running") {
+    nxKey = "Worker";
+    nxVal = "busy";
+    nxColor = "var(--cyan)";
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    const stepK = DUR / 40;
+    if (e.key === "ArrowRight") playRef.current = Math.min(DUR, play + stepK);
+    else if (e.key === "ArrowLeft") playRef.current = Math.max(0, play - stepK);
+    else if (e.key === "Home") playRef.current = 0;
+    else if (e.key === "End") playRef.current = DUR;
+    else return;
+    e.preventDefault();
+    stopPlay();
+    repaint();
+  };
+
+  return (
+    <div className="dm-frame-react">
+      <div className="demo-bar">
+        <span className="title">
+          <span className="ld" />
+          job 01J8…f3 · lifecycle
+        </span>
+        <div className="demo-controls">
+          <button
+            type="button"
+            className="ctl"
+            onClick={() => (playing ? stopPlay() : startPlay())}
+          >
+            {playing ? (
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                stroke="none"
+                aria-hidden="true"
+              >
+                <rect x="6" y="5" width="4" height="14" rx="1" />
+                <rect x="14" y="5" width="4" height="14" rx="1" />
+              </svg>
+            ) : (
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                stroke="none"
+                aria-hidden="true"
+              >
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            )}
+            {playing ? "Pause" : "Play"}
+          </button>
+          {/* biome-ignore lint/a11y/useSemanticElements: segmented toggle of aria-pressed buttons; a fieldset/legend would fight the inline-flex .seg styling */}
+          <div className="seg" role="group" aria-label="Outcome">
+            {(
+              [
+                { v: "recover", cls: "good", label: "Recovers" },
+                { v: "dlq", cls: "bad", label: "Dead-letter" },
+              ] as const
+            ).map((opt) => {
+              const on = scen === opt.v;
+              return (
+                <button
+                  type="button"
+                  key={opt.v}
+                  className={opt.cls}
+                  data-on={on ? "1" : "0"}
+                  aria-pressed={on}
+                  onClick={() => {
+                    setScen(opt.v);
+                    playRef.current = Math.min(
+                      playRef.current,
+                      durationOf(SCEN[opt.v]),
+                    );
+                    stopPlay();
+                    repaint();
+                  }}
+                >
+                  <span className="dot" />
+                  {opt.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      <div className="fr-scrubwrap">
+        <div
+          className="fr-track"
+          ref={trackRef}
+          tabIndex={0}
+          role="slider"
+          aria-label="Job timeline scrubber"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={Math.round(pct)}
+          onKeyDown={onKeyDown}
+          onPointerDown={(e) => {
+            dragging.current = true;
+            e.currentTarget.setPointerCapture(e.pointerId);
+            setFromX(e.clientX);
+          }}
+          onPointerMove={(e) => {
+            if (dragging.current) setFromX(e.clientX);
+          }}
+          onPointerUp={() => {
+            dragging.current = false;
+          }}
+          onPointerCancel={() => {
+            dragging.current = false;
+          }}
+        >
+          <div className="fr-rail">
+            {events.map((e, i) => {
+              const a = e.t;
+              const b = i + 1 < events.length ? events[i + 1].t : DUR;
+              return (
+                <div
+                  // biome-ignore lint/suspicious/noArrayIndexKey: fixed event list
+                  key={`seg${i}`}
+                  className="fr-seg"
+                  style={{
+                    left: `${(a / DUR) * 100}%`,
+                    width: `${((b - a) / DUR) * 100}%`,
+                    background: `color-mix(in oklch,${STATES[e.state].c} 30%, transparent)`,
+                  }}
+                />
+              );
+            })}
+          </div>
+          <div className="fr-fill" style={{ width: `${pct}%` }} />
+          {events.map((e, i) =>
+            i > 0 ? (
+              <div
+                // biome-ignore lint/suspicious/noArrayIndexKey: fixed event list
+                key={`tick${i}`}
+                className="fr-tick"
+                style={{
+                  left: `${(e.t / DUR) * 100}%`,
+                  background: STATES[e.state].c,
+                }}
+              />
+            ) : null,
+          )}
+          <div className="fr-handle" style={{ left: `${pct}%` }} />
+        </div>
+        <div className="fr-axis">
+          <span>0.0s</span>
+          <span>{(DUR / 2000).toFixed(1)}s</span>
+          <span>{(DUR / 1000).toFixed(1)}s</span>
+        </div>
+      </div>
+
+      <div className="fr-grid">
+        <div className="fr-state">
+          <span
+            className="fr-pill"
+            style={{ color: st.c, background: st.soft, borderColor: st.line }}
+          >
+            <span className="pd" style={{ background: st.c }} />
+            {ev.state}
+          </span>
+          <div className="big">
+            <b>{ev.ttl}.</b> {ev.d}
+          </div>
+          <div className="fr-meta">
+            <div className="m">
+              <span className="k">Elapsed</span>
+              <span className="v">{(play / 1000).toFixed(1)}s</span>
+            </div>
+            <div className="m">
+              <span className="k">Attempt</span>
+              <span className="v">{ev.att} / 3</span>
+            </div>
+            <div className="m">
+              <span className="k">{nxKey}</span>
+              <span className="v" style={{ color: nxColor }}>
+                {nxVal}
+              </span>
+            </div>
+          </div>
+          <div>
+            <div className="fr-attlabel">Attempts</div>
+            <div className="fr-attempts">
+              {[1, 2, 3].map((a) => {
+                const r = res[a];
+                const cls =
+                  r === "ok"
+                    ? "ok"
+                    : r === "fail"
+                      ? "fail"
+                      : r === "dead"
+                        ? "dead"
+                        : "";
+                return (
+                  <span key={a} style={{ display: "contents" }}>
+                    <div className={`a ${cls}`} title={`attempt ${a}`}>
+                      {attemptGlyph[r] || a}
+                    </div>
+                    {a < 3 ? <span className="sep">›</span> : null}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+        <div className="fr-log" ref={logRef}>
+          {events.map((e, i) => (
+            <div
+              // biome-ignore lint/suspicious/noArrayIndexKey: fixed event list
+              key={`ev${i}`}
+              className={`fr-ev${i <= idx ? " on" : ""}${i === idx ? " cur" : ""}`}
+              style={{ "--c": STATES[e.state].c } as React.CSSProperties}
+            >
+              <div className="dotcol">
+                <span className="ed" />
+                <span className="eline" />
+              </div>
+              <div className="etxt">
+                <span className="et">{e.ttl}</span>
+                <span className="ed2">{e.d}</span>
+              </div>
+              <span className="ets">{(e.t / 1000).toFixed(1)}s</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/components/demos/registry.ts b/docs/app/components/demos/registry.ts
index 240b21b6..a188d11b 100644
--- a/docs/app/components/demos/registry.ts
+++ b/docs/app/components/demos/registry.ts
@@ -12,6 +12,7 @@ type LazyDemo = LazyExoticComponent<ComponentType<DemoProps>>;
  */
 export const DEMO_COMPONENTS: Partial<Record<DemoId, LazyDemo>> = {
   mesh: lazy(() => import("./mesh-demo")),
+  recovery: lazy(() => import("./recovery-demo")),
   saga: lazy(() => import("./saga-demo")),
 };
 
diff --git a/docs/app/styles/demos.css b/docs/app/styles/demos.css
index 2ebedcaf..20ffd2a4 100644
--- a/docs/app/styles/demos.css
+++ b/docs/app/styles/demos.css
@@ -231,6 +231,286 @@
   flex: none;
 }
 
+/* failure-recovery scrubber timeline */
+.dm-stage .fr-scrubwrap {
+  padding: 6px 20px 20px;
+}
+.dm-stage .fr-track {
+  position: relative;
+  height: 34px;
+  margin: 6px 0 2px;
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+}
+.dm-stage .fr-rail {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 8px;
+  transform: translateY(-50%);
+  border-radius: 6px;
+  background: var(--panel3);
+  overflow: hidden;
+  border: 1px solid var(--line);
+}
+.dm-stage .fr-seg {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+.dm-stage .fr-fill {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  height: 8px;
+  transform: translateY(-50%);
+  border-radius: 6px;
+  background: color-mix(in oklch, var(--indigo) 55%, transparent);
+  pointer-events: none;
+  box-shadow: inset 0 0 0 1px var(--indigo-line);
+}
+.dm-stage .fr-tick {
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: 18px;
+  transform: translate(-1px, -50%);
+  background: var(--line3);
+  border-radius: 2px;
+}
+.dm-stage .fr-handle {
+  position: absolute;
+  top: 50%;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--txt);
+  border: 3px solid var(--bg);
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.35),
+    0 0 0 1px var(--line3);
+  pointer-events: none;
+  z-index: 3;
+}
+.dm-stage .fr-handle::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--indigo-br);
+}
+.dm-stage .fr-axis {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--dim);
+  margin-top: 7px;
+}
+.dm-stage .fr-grid {
+  display: grid;
+  grid-template-columns: 1.15fr 1fr;
+  gap: 0;
+  border-top: 1px solid var(--line);
+}
+.dm-stage .fr-state {
+  padding: 22px;
+  border-right: 1px solid var(--line);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.dm-stage .fr-pill {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 600;
+  padding: 7px 14px;
+  border-radius: 100px;
+  border: 1px solid;
+  letter-spacing: 0.01em;
+}
+.dm-stage .fr-pill .pd {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.dm-stage .fr-state .big {
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--txt2);
+}
+.dm-stage .fr-state .big b {
+  color: var(--txt);
+  font-weight: 600;
+}
+.dm-stage .fr-meta {
+  display: flex;
+  gap: 22px;
+  flex-wrap: wrap;
+  margin-top: 2px;
+}
+.dm-stage .fr-meta .m {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.dm-stage .fr-meta .m .k {
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+.dm-stage .fr-meta .m .v {
+  font-family: var(--code);
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--txt);
+  font-variant-numeric: tabular-nums;
+}
+.dm-stage .fr-attlabel {
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--dim);
+  margin-bottom: 7px;
+}
+.dm-stage .fr-attempts {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  margin-top: 2px;
+}
+.dm-stage .fr-attempts .a {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  display: grid;
+  place-items: center;
+  font-family: var(--code);
+  font-size: 12px;
+  font-weight: 600;
+  border: 1px solid var(--line2);
+  background: var(--panel);
+  color: var(--dim);
+}
+.dm-stage .fr-attempts .a.ok {
+  border-color: var(--indigo-line);
+  background: var(--indigo-soft);
+  color: var(--indigo-br);
+}
+.dm-stage .fr-attempts .a.fail {
+  border-color: color-mix(in oklch, var(--red) 40%, transparent);
+  background: color-mix(in oklch, var(--red) 13%, transparent);
+  color: var(--red);
+}
+.dm-stage .fr-attempts .a.dead {
+  border-color: var(--line3);
+  background: var(--panel3);
+  color: var(--txt2);
+}
+.dm-stage .fr-attempts .sep {
+  color: var(--dim);
+  font-size: 11px;
+}
+.dm-stage .fr-log {
+  padding: 14px 6px 14px 0;
+  max-height: 268px;
+  overflow: auto;
+}
+.dm-stage .fr-ev {
+  display: flex;
+  gap: 12px;
+  padding: 8px 18px;
+  align-items: flex-start;
+  position: relative;
+  opacity: 0.38;
+  transition:
+    opacity 0.25s,
+    background 0.25s;
+}
+.dm-stage .fr-ev.on {
+  opacity: 1;
+}
+.dm-stage .fr-ev.cur {
+  background: var(--indigo-soft);
+}
+.dm-stage .fr-ev .dotcol {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: none;
+  padding-top: 3px;
+}
+.dm-stage .fr-ev .ed {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--dim);
+  z-index: 1;
+}
+.dm-stage .fr-ev.on .ed {
+  background: var(--c, var(--indigo));
+}
+.dm-stage .fr-ev .eline {
+  width: 2px;
+  flex: 1;
+  background: var(--line2);
+  margin: 3px 0 -11px;
+}
+.dm-stage .fr-ev:last-child .eline {
+  display: none;
+}
+.dm-stage .fr-ev .etxt {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.dm-stage .fr-ev .et {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--txt2);
+}
+.dm-stage .fr-ev.on .et {
+  color: var(--txt);
+}
+.dm-stage .fr-ev .ed2 {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--mut);
+  line-height: 1.45;
+}
+.dm-stage .fr-ev .ets {
+  margin-left: auto;
+  font-family: var(--code);
+  font-size: 11px;
+  color: var(--dim);
+  flex: none;
+  padding-left: 10px;
+}
+@media (max-width: 860px) {
+  .dm-stage .fr-grid {
+    grid-template-columns: 1fr;
+  }
+  .dm-stage .fr-state {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+}
+
 /* mesh demo */
 .dm-stage .mesh-hint {
   display: inline-flex;

From 4777765ce619712def8320b7d8a046f2d8a7b1ba Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:30:50 +0530
Subject: [PATCH 06/14] feat(docs): port rate-limit demo to React, drop its
 iframe

---
 docs/app/components/demos/ratelimit-demo.tsx | 668 +++++++++++++++++++
 docs/app/components/demos/registry.ts        |   1 +
 2 files changed, 669 insertions(+)
 create mode 100644 docs/app/components/demos/ratelimit-demo.tsx

diff --git a/docs/app/components/demos/ratelimit-demo.tsx b/docs/app/components/demos/ratelimit-demo.tsx
new file mode 100644
index 00000000..3d0713e4
--- /dev/null
+++ b/docs/app/components/demos/ratelimit-demo.tsx
@@ -0,0 +1,668 @@
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { useRafLoop, useReducedMotion } from "./lib";
+
+/*
+ * API rate-limiting demo — requests flow producer → queue → worker pool →
+ * external API. Toggle the API to 429 and watch calls fail and retry with
+ * exponential backoff. React port of demo-ratelimit.js (SVG + RAF pipeline).
+ */
+
+const W = 960;
+const H = 300;
+const CY = 152;
+const NWORK = 5;
+const PROC = 1050;
+const BACKOFF_BASE = 620;
+const MAX_RETRY = 4;
+const SPEED = 560;
+const SPAWN_MS = 1000;
+const QCAP = 12;
+const PRO = { x: 90, y: CY };
+const QBOX = { x: 286, w: 108, y: CY };
+const API = { x: 862, y: CY };
+const SLOTS = Array.from({ length: NWORK }, (_, i) => ({
+  x: 622,
+  y: 86 + i * 38,
+}));
+
+type Phase =
+  | "toqueue"
+  | "queued"
+  | "toworker"
+  | "processing"
+  | "toapi"
+  | "success"
+  | "backoff"
+  | "dead";
+
+interface Token {
+  id: number;
+  x: number;
+  y: number;
+  phase: Phase;
+  retries: number;
+  blocked: boolean;
+  tx: number;
+  ty: number;
+  worker: number | null;
+  pUntil: number;
+  bUntil: number;
+  dead: number;
+}
+interface Slot {
+  x: number;
+  y: number;
+  busy: Token | null;
+}
+interface Sim {
+  tokens: Token[];
+  slots: Slot[];
+  metrics: { retries: number; blocked: number; succeeded: number };
+  spawnAcc: number;
+  last: number;
+  idc: number;
+}
+
+function freshSim(): Sim {
+  return {
+    tokens: [],
+    slots: SLOTS.map((s) => ({ ...s, busy: null })),
+    metrics: { retries: 0, blocked: 0, succeeded: 0 },
+    spawnAcc: 0,
+    last: 0,
+    idc: 0,
+  };
+}
+
+const COL = {
+  queued: "var(--indigo-br)",
+  proc: "var(--cyan)",
+  success: "var(--grn)",
+  block: "var(--red)",
+  backoff: "var(--amber)",
+};
+function colorFor(t: Token): string {
+  if (t.phase === "success") return COL.success;
+  if (t.phase === "backoff") return COL.backoff;
+  if (t.blocked) return COL.block;
+  if (t.phase === "processing" || t.phase === "toworker" || t.phase === "toapi")
+    return COL.proc;
+  return COL.queued;
+}
+const queuedList = (sim: Sim) => sim.tokens.filter((t) => t.phase === "queued");
+
+export default function RateLimitDemo() {
+  const reduced = useReducedMotion();
+  const simRef = useRef<Sim>(freshSim());
+  const [apiOk, setApiOk] = useState(true);
+  const apiOkRef = useRef(true);
+  const [, repaint] = useReducer((n: number) => n + 1, 0);
+
+  const spawn = useCallback((n: number) => {
+    const sim = simRef.current;
+    for (let i = 0; i < n; i++) {
+      if (sim.tokens.length > 40) break;
+      sim.tokens.push({
+        id: ++sim.idc,
+        x: PRO.x,
+        y: PRO.y + (Math.random() * 20 - 10),
+        phase: "toqueue",
+        retries: 0,
+        blocked: false,
+        tx: QBOX.x + 12,
+        ty: CY,
+        worker: null,
+        pUntil: 0,
+        bUntil: 0,
+        dead: 0,
+      });
+    }
+  }, []);
+
+  const assignWorkers = useCallback((sim: Sim) => {
+    const q = queuedList(sim);
+    for (const w of sim.slots) {
+      if (w.busy == null && q.length) {
+        const t = q.shift() as Token;
+        w.busy = t;
+        t.worker = sim.slots.indexOf(w);
+        t.phase = "toworker";
+        t.tx = w.x;
+        t.ty = w.y;
+      }
+    }
+  }, []);
+
+  const resolveAPI = useCallback((sim: Sim, t: Token, now: number) => {
+    const w = t.worker != null ? sim.slots[t.worker] : null;
+    if (apiOkRef.current) {
+      t.phase = "success";
+      t.blocked = false;
+      t.tx = W;
+      t.ty = CY;
+      sim.metrics.succeeded++;
+      if (w) w.busy = null;
+      t.worker = null;
+    } else {
+      sim.metrics.blocked++;
+      t.retries++;
+      t.blocked = true;
+      if (w) w.busy = null;
+      t.worker = null;
+      if (t.retries > MAX_RETRY) {
+        t.phase = "dead";
+        t.dead = now;
+      } else {
+        sim.metrics.retries++;
+        t.phase = "backoff";
+        t.bUntil = now + BACKOFF_BASE * 2 ** (t.retries - 1);
+        t.tx = QBOX.x + QBOX.w / 2;
+        t.ty = CY + 58;
+      }
+    }
+  }, []);
+
+  const step = useCallback(
+    (now: number, dt: number) => {
+      const sim = simRef.current;
+      if (!reduced) {
+        sim.spawnAcc += dt;
+        if (sim.spawnAcc > SPAWN_MS) {
+          sim.spawnAcc = 0;
+          if (queuedList(sim).length < 22) spawn(1);
+        }
+      }
+      assignWorkers(sim);
+      queuedList(sim).forEach((t, i) => {
+        t.tx = 300 + (i % 3) * 34;
+        t.ty = 120 + Math.floor(i / 3) * 30;
+      });
+      const move = (SPEED * dt) / 1000;
+      for (let i = sim.tokens.length - 1; i >= 0; i--) {
+        const t = sim.tokens[i];
+        const dx = t.tx - t.x;
+        const dy = t.ty - t.y;
+        const d = Math.hypot(dx, dy);
+        if (d > 0.5) {
+          const s = Math.min(move, d);
+          t.x += (dx / d) * s;
+          t.y += (dy / d) * s;
+        }
+        const arrived = d < 3;
+        switch (t.phase) {
+          case "toqueue":
+            if (arrived) {
+              t.phase = "queued";
+              t.blocked = false;
+            }
+            break;
+          case "toworker":
+            if (arrived) {
+              t.phase = "processing";
+              t.pUntil = now + PROC * (0.8 + Math.random() * 0.5);
+            }
+            break;
+          case "processing":
+            if (now >= t.pUntil) {
+              t.phase = "toapi";
+              t.tx = API.x - 26;
+              t.ty = CY;
+            }
+            break;
+          case "toapi":
+            if (arrived) resolveAPI(sim, t, now);
+            break;
+          case "backoff":
+            if (now >= t.bUntil) {
+              t.phase = "toqueue";
+              t.tx = QBOX.x + 12;
+              t.ty = CY;
+            }
+            break;
+          case "success":
+            if (t.x >= W - 1) sim.tokens.splice(i, 1);
+            break;
+          case "dead":
+            if (now - t.dead > 900) sim.tokens.splice(i, 1);
+            break;
+        }
+      }
+      repaint();
+    },
+    [reduced, spawn, assignWorkers, resolveAPI],
+  );
+
+  const tick = useCallback(
+    (now: number) => {
+      const sim = simRef.current;
+      if (!sim.last) sim.last = now;
+      const dt = Math.min(now - sim.last, 60);
+      sim.last = now;
+      step(now, dt);
+    },
+    [step],
+  );
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-seed only when motion preference flips; spawn/assignWorkers stable
+  useEffect(() => {
+    const sim = freshSim();
+    simRef.current = sim;
+    if (reduced) {
+      // static seed: some queued, fill workers
+      for (let i = 0; i < 9; i++) {
+        sim.tokens.push({
+          id: ++sim.idc,
+          x: 300 + (i % 3) * 34,
+          y: 120 + Math.floor(i / 3) * 30,
+          phase: "queued",
+          retries: 0,
+          blocked: false,
+          tx: 0,
+          ty: 0,
+          worker: null,
+          pUntil: 0,
+          bUntil: 0,
+          dead: 0,
+        });
+      }
+      assignWorkers(sim);
+      for (const t of sim.tokens) {
+        if (t.worker != null) {
+          t.phase = "processing";
+          t.x = sim.slots[t.worker].x;
+          t.y = sim.slots[t.worker].y;
+        }
+      }
+    } else {
+      spawn(4);
+    }
+    repaint();
+  }, [reduced]);
+
+  useRafLoop(tick, !reduced);
+
+  const toggleApi = (ok: boolean) => {
+    apiOkRef.current = ok;
+    setApiOk(ok);
+    repaint();
+  };
+
+  const sim = simRef.current;
+  const ql = queuedList(sim);
+  const qd = ql.length;
+  const inflight = sim.tokens.filter(
+    (t) =>
+      t.phase === "toworker" || t.phase === "processing" || t.phase === "toapi",
+  ).length;
+  const backoff = sim.tokens.filter((t) => t.phase === "backoff").length;
+  let maxBo = 0;
+  for (const t of sim.tokens) {
+    if (t.phase === "backoff") {
+      const s = (t.bUntil - performance.now()) / 1000;
+      if (s > maxBo) maxBo = s;
+    }
+  }
+  const ovf = qd - QCAP;
+  const retryLane = backoff > 0 || !apiOk;
+
+  return (
+    <div className="dm-frame-react">
+      <div className="demo-bar">
+        <span className="title">
+          <span className="ld" />
+          rate-limit · live
+        </span>
+        <div className="demo-controls">
+          <button type="button" className="ctl pri" onClick={() => spawn(8)}>
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z" />
+            </svg>
+            Send burst (8)
+          </button>
+          {/* biome-ignore lint/a11y/useSemanticElements: segmented toggle of aria-pressed buttons; a fieldset/legend would fight the inline-flex .seg styling */}
+          <div className="seg" role="group" aria-label="External API status">
+            {(
+              [
+                { ok: true, cls: "good", label: "API: 200 OK" },
+                { ok: false, cls: "bad", label: "API: 429" },
+              ] as const
+            ).map((opt) => (
+              <button
+                type="button"
+                key={opt.label}
+                className={opt.cls}
+                data-on={apiOk === opt.ok ? "1" : "0"}
+                aria-pressed={apiOk === opt.ok}
+                onClick={() => toggleApi(opt.ok)}
+              >
+                <span className="dot" />
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="stage">
+        <svg
+          viewBox={`0 0 ${W} ${H}`}
+          role="img"
+          aria-label="Animated pipeline: requests move from your code into a queue, are picked up by a pool of workers, and call an external API. When the API returns 429, calls fail and retry with exponential backoff."
+        >
+          <defs>
+            <marker
+              id="rl-ar"
+              viewBox="0 0 10 10"
+              refX="8"
+              refY="5"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto"
+            >
+              <path
+                d="M1 1 L9 5 L1 9"
+                fill="none"
+                stroke="var(--line3)"
+                strokeWidth="1.7"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </marker>
+          </defs>
+
+          {/* guide wires */}
+          {["M150 152 H286", "M394 152 H560", "M690 152 H800"].map((d) => (
+            <path
+              key={d}
+              d={d}
+              fill="none"
+              stroke="var(--line2)"
+              strokeWidth="2"
+              strokeDasharray="2 7"
+              strokeLinecap="round"
+              markerEnd="url(#rl-ar)"
+            />
+          ))}
+          <path
+            d="M862 196 C 862 270, 340 286, 300 244"
+            fill="none"
+            stroke="color-mix(in oklch,var(--red) 45%,transparent)"
+            strokeWidth="2"
+            strokeDasharray="2 7"
+            strokeLinecap="round"
+            opacity={retryLane ? 0.7 : 0}
+          />
+          <text
+            x="560"
+            y="284"
+            textAnchor="middle"
+            fontFamily="var(--mono)"
+            fontSize="11"
+            fill="var(--red)"
+            opacity={retryLane ? 0.9 : 0}
+          >
+            retry · exponential backoff
+          </text>
+
+          {/* producer */}
+          <g>
+            <rect
+              x="30"
+              y="120"
+              width="120"
+              height="64"
+              rx="13"
+              fill="var(--panel3)"
+              stroke="var(--line2)"
+            />
+            <text
+              x="90"
+              y="146"
+              textAnchor="middle"
+              fontFamily="var(--mono)"
+              fontSize="11"
+              fill="var(--mut)"
+            >
+              your code
+            </text>
+            <text
+              x="90"
+              y="165"
+              textAnchor="middle"
+              fontFamily="var(--code)"
+              fontSize="12"
+              fontWeight="600"
+              fill="var(--txt2)"
+            >
+              .delay()
+            </text>
+          </g>
+
+          {/* queue */}
+          <g>
+            <rect
+              x="280"
+              y="86"
+              width="120"
+              height="132"
+              rx="13"
+              fill="var(--panel)"
+              stroke="var(--line2)"
+            />
+            <text
+              x="340"
+              y="106"
+              textAnchor="middle"
+              fontFamily="var(--mono)"
+              fontSize="11"
+              fill="var(--mut)"
+            >
+              QUEUE
+            </text>
+            <text
+              x="340"
+              y="240"
+              textAnchor="middle"
+              fontFamily="var(--code)"
+              fontSize="11"
+              fill="var(--dim)"
+            >
+              {ovf > 0 ? `+${ovf} more` : ""}
+            </text>
+          </g>
+
+          {/* worker pool */}
+          <g>
+            <rect
+              x="560"
+              y="64"
+              width="124"
+              height="176"
+              rx="13"
+              fill="none"
+              stroke="var(--line2)"
+              strokeDasharray="3 6"
+            />
+            <text
+              x="622"
+              y="58"
+              textAnchor="middle"
+              fontFamily="var(--mono)"
+              fontSize="11"
+              fill="var(--mut)"
+            >
+              WORKERS · {NWORK}
+            </text>
+          </g>
+          {sim.slots.map((w, i) => {
+            const busy = w.busy != null;
+            return (
+              <rect
+                // biome-ignore lint/suspicious/noArrayIndexKey: fixed worker slot list
+                key={`ws${i}`}
+                x={w.x - 22}
+                y={w.y - 15}
+                width="44"
+                height="30"
+                rx="8"
+                fill={
+                  busy
+                    ? apiOk
+                      ? "color-mix(in oklch,var(--cyan) 18%,transparent)"
+                      : "color-mix(in oklch,var(--red) 16%,transparent)"
+                    : "var(--panel2)"
+                }
+                stroke={
+                  busy
+                    ? apiOk
+                      ? "color-mix(in oklch,var(--cyan) 45%,transparent)"
+                      : "color-mix(in oklch,var(--red) 45%,transparent)"
+                    : "var(--line2)"
+                }
+              />
+            );
+          })}
+
+          {/* API */}
+          <g>
+            <rect
+              x="800"
+              y="110"
+              width="128"
+              height="84"
+              rx="13"
+              fill="var(--panel3)"
+              stroke={
+                apiOk
+                  ? "var(--line2)"
+                  : "color-mix(in oklch,var(--red) 40%,transparent)"
+              }
+            />
+            <text
+              x="864"
+              y="138"
+              textAnchor="middle"
+              fontFamily="var(--mono)"
+              fontSize="11"
+              fill="var(--mut)"
+            >
+              external API
+            </text>
+            <g transform="translate(864,162)">
+              <rect
+                x="-34"
+                y="-13"
+                width="68"
+                height="26"
+                rx="13"
+                fill={
+                  apiOk
+                    ? "color-mix(in oklch,var(--grn) 16%,transparent)"
+                    : "color-mix(in oklch,var(--red) 18%,transparent)"
+                }
+                stroke={
+                  apiOk
+                    ? "color-mix(in oklch,var(--grn) 40%,transparent)"
+                    : "color-mix(in oklch,var(--red) 48%,transparent)"
+                }
+              />
+              <text
+                x="0"
+                y="5"
+                textAnchor="middle"
+                fontFamily="var(--code)"
+                fontSize="12"
+                fontWeight="700"
+                fill={apiOk ? "var(--grn)" : "var(--red)"}
+              >
+                {apiOk ? "200" : "429"}
+              </text>
+            </g>
+          </g>
+
+          {/* tokens */}
+          <g>
+            {sim.tokens.map((t) => {
+              let opacity = 1;
+              if (t.phase === "dead") opacity = 0.25;
+              else if (t.phase === "backoff") opacity = 0.85;
+              else if (t.phase === "success")
+                opacity = Math.max(0, 1 - (t.x - API.x) / (W - API.x));
+              return (
+                <circle
+                  key={t.id}
+                  cx={t.x.toFixed(1)}
+                  cy={t.y.toFixed(1)}
+                  r={t.phase === "processing" ? 6.5 : 6}
+                  fill={colorFor(t)}
+                  opacity={opacity}
+                />
+              );
+            })}
+          </g>
+        </svg>
+      </div>
+
+      <div className="legend">
+        <span>
+          <i style={{ background: "var(--indigo-br)" }} />
+          queued
+        </span>
+        <span>
+          <i style={{ background: "var(--cyan)" }} />
+          processing
+        </span>
+        <span>
+          <i style={{ background: "var(--grn)" }} />
+          succeeded
+        </span>
+        <span>
+          <i style={{ background: "var(--red)" }} />
+          429 · retrying
+        </span>
+        <span>
+          <i style={{ background: "var(--amber)" }} />
+          backoff wait
+        </span>
+      </div>
+
+      <div className="readout">
+        <div className="stat">
+          <span className="k">queue depth</span>
+          <span className="v">{qd}</span>
+        </div>
+        <div className="stat">
+          <span className="k">in flight</span>
+          <span className="v">{inflight}</span>
+        </div>
+        <div className="stat">
+          <span className="k">retries</span>
+          <span className="v">{sim.metrics.retries}</span>
+        </div>
+        <div className="stat">
+          <span className="k">429 blocked</span>
+          <span className="v bad">{sim.metrics.blocked}</span>
+        </div>
+        <div className="stat">
+          <span className="k">succeeded</span>
+          <span className="v good">{sim.metrics.succeeded}</span>
+        </div>
+        <div className="stat">
+          <span className="k">backoff</span>
+          <span className={`v ${maxBo > 0 ? "warn" : ""}`}>
+            {maxBo > 0 ? maxBo.toFixed(1) : "0"}
+            <span className="u">s</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/components/demos/registry.ts b/docs/app/components/demos/registry.ts
index a188d11b..f85a98a1 100644
--- a/docs/app/components/demos/registry.ts
+++ b/docs/app/components/demos/registry.ts
@@ -12,6 +12,7 @@ type LazyDemo = LazyExoticComponent<ComponentType<DemoProps>>;
  */
 export const DEMO_COMPONENTS: Partial<Record<DemoId, LazyDemo>> = {
   mesh: lazy(() => import("./mesh-demo")),
+  ratelimit: lazy(() => import("./ratelimit-demo")),
   recovery: lazy(() => import("./recovery-demo")),
   saga: lazy(() => import("./saga-demo")),
 };

From c240b10b0fe73c8010681a5d45d53c8a6761fcb9 Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:34:25 +0530
Subject: [PATCH 07/14] feat(docs): port workflow demo to React, drop its
 iframe

---
 docs/app/components/demos/registry.ts       |   1 +
 docs/app/components/demos/workflow-demo.tsx | 683 ++++++++++++++++++++
 docs/app/styles/demos.css                   | 159 +++++
 3 files changed, 843 insertions(+)
 create mode 100644 docs/app/components/demos/workflow-demo.tsx

diff --git a/docs/app/components/demos/registry.ts b/docs/app/components/demos/registry.ts
index f85a98a1..91a6f241 100644
--- a/docs/app/components/demos/registry.ts
+++ b/docs/app/components/demos/registry.ts
@@ -15,6 +15,7 @@ export const DEMO_COMPONENTS: Partial<Record<DemoId, LazyDemo>> = {
   ratelimit: lazy(() => import("./ratelimit-demo")),
   recovery: lazy(() => import("./recovery-demo")),
   saga: lazy(() => import("./saga-demo")),
+  workflow: lazy(() => import("./workflow-demo")),
 };
 
 /** The React port for `id`, or `undefined` if it still uses the iframe. */
diff --git a/docs/app/components/demos/workflow-demo.tsx b/docs/app/components/demos/workflow-demo.tsx
new file mode 100644
index 00000000..f7230a5a
--- /dev/null
+++ b/docs/app/components/demos/workflow-demo.tsx
@@ -0,0 +1,683 @@
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { useRafLoop, useReducedMotion } from "./lib";
+
+/*
+ * Workflow DAG demo — a real dependency graph (chain → parallel group → chord
+ * join → fan-out). Run it and execution propagates as each task's inputs become
+ * ready; click a node to trace/run a branch. React port of demo-workflow.js
+ * (SVG + RAF scheduler with lit edges + traveling dots).
+ */
+
+const W = 760;
+const H = 372;
+const NW = 120;
+const NH = 46;
+
+interface NodeDef {
+  id: string;
+  label: string;
+  fn: string;
+  type: string;
+  x: number;
+  y: number;
+  dur: number;
+}
+const NODES: NodeDef[] = [
+  {
+    id: "ingest",
+    label: "ingest",
+    fn: "fetch_source()",
+    type: "Source",
+    x: 78,
+    y: 186,
+    dur: 700,
+  },
+  {
+    id: "probe",
+    label: "probe",
+    fn: "inspect.s()",
+    type: "Chain step",
+    x: 222,
+    y: 186,
+    dur: 620,
+  },
+  {
+    id: "t720",
+    label: "transcode 720p",
+    fn: "encode.s(720)",
+    type: "Group · parallel",
+    x: 392,
+    y: 84,
+    dur: 1500,
+  },
+  {
+    id: "t1080",
+    label: "transcode 1080p",
+    fn: "encode.s(1080)",
+    type: "Group · parallel",
+    x: 392,
+    y: 186,
+    dur: 2000,
+  },
+  {
+    id: "audio",
+    label: "extract audio",
+    fn: "audio.s()",
+    type: "Group · parallel",
+    x: 392,
+    y: 288,
+    dur: 1150,
+  },
+  {
+    id: "package",
+    label: "package",
+    fn: "chord(mux.s())",
+    type: "Chord · join",
+    x: 560,
+    y: 186,
+    dur: 950,
+  },
+  {
+    id: "notify",
+    label: "notify",
+    fn: "webhook.s()",
+    type: "Fan-out",
+    x: 704,
+    y: 120,
+    dur: 520,
+  },
+  {
+    id: "cdn",
+    label: "publish CDN",
+    fn: "upload.s()",
+    type: "Fan-out",
+    x: 704,
+    y: 252,
+    dur: 760,
+  },
+];
+const EDGES: [string, string][] = [
+  ["ingest", "probe"],
+  ["probe", "t720"],
+  ["probe", "t1080"],
+  ["probe", "audio"],
+  ["t720", "package"],
+  ["t1080", "package"],
+  ["audio", "package"],
+  ["package", "notify"],
+  ["package", "cdn"],
+];
+
+const byId: Record<string, NodeDef & { deps: string[]; kids: string[] }> = {};
+for (const n of NODES) byId[n.id] = { ...n, deps: [], kids: [] };
+for (const [a, b] of EDGES) {
+  byId[b].deps.push(a);
+  byId[a].kids.push(b);
+}
+
+const CRIT = (() => {
+  const memo: Record<string, number> = {};
+  const cp = (id: string): number => {
+    if (memo[id] != null) return memo[id];
+    let m = 0;
+    for (const k of byId[id].kids) m = Math.max(m, cp(k));
+    memo[id] = byId[id].dur + m;
+    return memo[id];
+  };
+  return Math.max(
+    ...NODES.filter((n) => byId[n.id].deps.length === 0).map((n) => cp(n.id)),
+  );
+})();
+
+const edgeKey = (a: string, b: string) => `${a}>${b}`;
+function edgePath(a: NodeDef, b: NodeDef): string {
+  const x1 = a.x + NW / 2;
+  const y1 = a.y;
+  const x2 = b.x - NW / 2;
+  const y2 = b.y;
+  const mx = (x1 + x2) / 2;
+  return `M${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`;
+}
+
+function branchSet(rootId: string): Set<string> {
+  const set = new Set<string>([rootId]);
+  const stack = [rootId];
+  while (stack.length) {
+    const c = stack.pop() as string;
+    for (const k of byId[c].kids) {
+      if (!set.has(k)) {
+        set.add(k);
+        stack.push(k);
+      }
+    }
+  }
+  return set;
+}
+const inBranch = (rootId: string, id: string) => branchSet(rootId).has(id);
+
+type Status = "idle" | "queued" | "running" | "done";
+const COLOR: Record<
+  Status,
+  { fill: string; stroke: string; pip: string; t1: string }
+> = {
+  idle: {
+    fill: "var(--panel2)",
+    stroke: "var(--line2)",
+    pip: "var(--dim)",
+    t1: "var(--txt2)",
+  },
+  queued: {
+    fill: "var(--indigo-soft)",
+    stroke: "var(--indigo-line)",
+    pip: "var(--indigo-br)",
+    t1: "var(--txt)",
+  },
+  running: {
+    fill: "color-mix(in oklch,var(--cyan) 15%,transparent)",
+    stroke: "color-mix(in oklch,var(--cyan) 55%,transparent)",
+    pip: "var(--cyan)",
+    t1: "var(--txt)",
+  },
+  done: {
+    fill: "color-mix(in oklch,var(--grn) 13%,transparent)",
+    stroke: "color-mix(in oklch,var(--grn) 48%,transparent)",
+    pip: "var(--grn)",
+    t1: "var(--txt)",
+  },
+};
+
+interface Sim {
+  st: Record<string, Status>;
+  finishAt: Record<string, number>;
+  t0: number;
+  elapsed: number;
+  runMask: Set<string> | null;
+  lit: Set<string>;
+}
+function freshSim(): Sim {
+  const st: Record<string, Status> = {};
+  for (const n of NODES) st[n.id] = "idle";
+  return { st, finishAt: {}, t0: 0, elapsed: 0, runMask: null, lit: new Set() };
+}
+
+export default function WorkflowDemo() {
+  const reduced = useReducedMotion();
+  const simRef = useRef<Sim>(freshSim());
+  const lenRef = useRef<Map<string, number>>(new Map());
+  const pathRef = useRef<Map<string, SVGPathElement>>(new Map());
+  const flowRef = useRef<SVGGElement>(null);
+  const [selected, setSelected] = useState<string | null>("ingest");
+  const [running, setRunning] = useState(false);
+  const [, repaint] = useReducer((n: number) => n + 1, 0);
+
+  // Measure each lit edge's length once mounted, then repaint to apply dasharray.
+  useEffect(() => {
+    for (const [a, b] of EDGES) {
+      const p = pathRef.current.get(edgeKey(a, b));
+      if (p) lenRef.current.set(edgeKey(a, b), p.getTotalLength());
+    }
+    repaint();
+  }, []);
+
+  const spawnDot = useCallback((key: string) => {
+    const path = pathRef.current.get(key);
+    const flow = flowRef.current;
+    if (!path || !flow || typeof path.getPointAtLength !== "function") return;
+    const len = path.getTotalLength();
+    const dot = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "circle",
+    );
+    dot.setAttribute("r", "4");
+    dot.setAttribute("fill", "var(--grn)");
+    dot.style.filter = "drop-shadow(0 0 5px var(--grn))";
+    flow.appendChild(dot);
+    const start = performance.now();
+    const DUR = 480;
+    const move = (now: number) => {
+      const p = Math.min(1, (now - start) / DUR);
+      const pt = path.getPointAtLength(len * p);
+      dot.setAttribute("cx", String(pt.x));
+      dot.setAttribute("cy", String(pt.y));
+      dot.style.opacity = String(
+        p < 0.12 ? p / 0.12 : p > 0.85 ? 1 - (p - 0.85) / 0.15 : 1,
+      );
+      if (p < 1) requestAnimationFrame(move);
+      else dot.remove();
+    };
+    requestAnimationFrame(move);
+  }, []);
+
+  const eligible = useCallback((sim: Sim, id: string): boolean => {
+    if (sim.runMask && !sim.runMask.has(id)) return false;
+    if (sim.st[id] !== "idle") return false;
+    return byId[id].deps.every((d) =>
+      sim.runMask && !sim.runMask.has(d) ? true : sim.st[d] === "done",
+    );
+  }, []);
+
+  const litOut = useCallback(
+    (sim: Sim, id: string) => {
+      for (const k of byId[id].kids) {
+        if (sim.runMask && !sim.runMask.has(k)) continue;
+        const key = edgeKey(id, k);
+        if (!sim.lit.has(key)) {
+          sim.lit.add(key);
+          if (!reduced) spawnDot(key);
+        }
+      }
+    },
+    [reduced, spawnDot],
+  );
+
+  const tick = useCallback(
+    (now: number) => {
+      const sim = simRef.current;
+      sim.elapsed = now - sim.t0;
+      for (const n of NODES) {
+        if (eligible(sim, n.id)) {
+          sim.st[n.id] = "running";
+          sim.finishAt[n.id] = now + n.dur;
+        }
+      }
+      for (const n of NODES) {
+        if (sim.st[n.id] === "running" && now >= sim.finishAt[n.id]) {
+          sim.st[n.id] = "done";
+          litOut(sim, n.id);
+        }
+      }
+      const pending = NODES.some((n) => eligible(sim, n.id));
+      const anyRunning = NODES.some((n) => sim.st[n.id] === "running");
+      if (!anyRunning && !pending) setRunning(false);
+      repaint();
+    },
+    [eligible, litOut],
+  );
+
+  useRafLoop(tick, running && !reduced);
+
+  const instantFinish = useCallback((sim: Sim) => {
+    for (const n of NODES) {
+      if (!sim.runMask || sim.runMask.has(n.id)) sim.st[n.id] = "done";
+    }
+    for (const [a, b] of EDGES) {
+      if (!sim.runMask || (sim.runMask.has(a) && sim.runMask.has(b)))
+        sim.lit.add(edgeKey(a, b));
+    }
+    sim.elapsed = CRIT;
+  }, []);
+
+  const start = useCallback(
+    (mask: Set<string> | null) => {
+      const sim = freshSim();
+      sim.runMask = mask;
+      sim.t0 = performance.now();
+      simRef.current = sim;
+      if (reduced) {
+        instantFinish(sim);
+        setRunning(false);
+        repaint();
+      } else {
+        setRunning(true);
+      }
+    },
+    [reduced, instantFinish],
+  );
+
+  const reset = useCallback(() => {
+    simRef.current = freshSim();
+    setRunning(false);
+    setSelected("ingest");
+    repaint();
+  }, []);
+
+  // Auto-run on mount (matches the embed behavior); static-finish if reduced.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: run once per motion preference; start is stable
+  useEffect(() => {
+    setSelected(null);
+    start(null);
+  }, [reduced]);
+
+  const sim = simRef.current;
+  const scope = NODES.filter((n) => !sim.runMask || sim.runMask.has(n.id));
+  const doneCount = scope.filter((n) => sim.st[n.id] === "done").length;
+  const runCount = scope.filter((n) => sim.st[n.id] === "running").length;
+
+  const selNode = byId[selected ?? "ingest"];
+  const selStatus = sim.st[selNode.id] ?? "idle";
+  const selStColor = COLOR[selStatus].pip;
+  const downstream = branchSet(selNode.id).size - 1;
+
+  return (
+    <div className="dm-frame-react">
+      <div className="demo-bar">
+        <span className="title">
+          <span className="ld" />
+          media-pipeline · DAG
+        </span>
+        <div className="demo-controls">
+          <button
+            type="button"
+            className="ctl pri"
+            disabled={running}
+            onClick={() => {
+              setSelected(null);
+              start(null);
+            }}
+          >
+            {running ? (
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                stroke="none"
+                aria-hidden="true"
+              >
+                <rect x="6" y="5" width="4" height="14" rx="1" />
+                <rect x="14" y="5" width="4" height="14" rx="1" />
+              </svg>
+            ) : (
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                stroke="none"
+                aria-hidden="true"
+              >
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            )}
+            {running ? "Running…" : "Run workflow"}
+          </button>
+          <button type="button" className="ctl" onClick={reset}>
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
+              <path d="M3 3v5h5" />
+            </svg>
+            Reset
+          </button>
+        </div>
+      </div>
+
+      <div className="wf-grid">
+        <div className="wf-graph">
+          <svg
+            viewBox={`0 0 ${W} ${H}`}
+            role="img"
+            aria-label="Workflow dependency graph: ingest then probe, fanning out to three parallel transcode tasks, joined by a package step, then publishing to notify and CDN. Run animates execution in dependency order."
+          >
+            <defs>
+              <marker
+                id="wf-ar"
+                viewBox="0 0 10 10"
+                refX="8.5"
+                refY="5"
+                markerWidth="9"
+                markerHeight="9"
+                markerUnits="userSpaceOnUse"
+                orient="auto"
+              >
+                <path d="M1.5 1.5 L9 5 L1.5 8.5 Z" fill="var(--line3)" />
+              </marker>
+              <marker
+                id="wf-ar-on"
+                viewBox="0 0 10 10"
+                refX="8.5"
+                refY="5"
+                markerWidth="9"
+                markerHeight="9"
+                markerUnits="userSpaceOnUse"
+                orient="auto"
+              >
+                <path d="M1.5 1.5 L9 5 L1.5 8.5 Z" fill="var(--grn)" />
+              </marker>
+            </defs>
+
+            {/* base edges */}
+            <g>
+              {EDGES.map(([a, b]) => {
+                const key = edgeKey(a, b);
+                return (
+                  <path
+                    key={key}
+                    d={edgePath(byId[a], byId[b])}
+                    fill="none"
+                    stroke="var(--line2)"
+                    strokeWidth="2"
+                    markerEnd={
+                      sim.lit.has(key) ? "url(#wf-ar-on)" : "url(#wf-ar)"
+                    }
+                  />
+                );
+              })}
+            </g>
+
+            {/* lit edges + traveling dots */}
+            <g ref={flowRef}>
+              {EDGES.map(([a, b]) => {
+                const key = edgeKey(a, b);
+                const len = lenRef.current.get(key) ?? 400;
+                return (
+                  <path
+                    key={key}
+                    ref={(el) => {
+                      if (el) pathRef.current.set(key, el);
+                      else pathRef.current.delete(key);
+                    }}
+                    d={edgePath(byId[a], byId[b])}
+                    fill="none"
+                    stroke="var(--grn)"
+                    strokeWidth="2.4"
+                    strokeLinecap="round"
+                    style={{
+                      strokeDasharray: len,
+                      strokeDashoffset: sim.lit.has(key) ? 0 : len,
+                      transition: "stroke-dashoffset .5s ease",
+                    }}
+                  />
+                );
+              })}
+            </g>
+
+            {/* nodes */}
+            <g>
+              {NODES.map((n) => {
+                const status = sim.st[n.id];
+                const c = COLOR[status];
+                const isSel = selected === n.id;
+                const dim = selected && !running && !inBranch(selected, n.id);
+                return (
+                  // biome-ignore lint/a11y/useSemanticElements: SVG <g> can't be an HTML <button>; role+key handlers give it button semantics
+                  <g
+                    key={n.id}
+                    className="wf-node"
+                    tabIndex={0}
+                    role="button"
+                    aria-label={`${n.label} — ${n.type}`}
+                    style={{ opacity: dim ? 0.4 : 1 }}
+                    onClick={() => setSelected(n.id)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setSelected(n.id);
+                      }
+                    }}
+                  >
+                    <rect
+                      x={n.x - NW / 2}
+                      y={n.y - NH / 2}
+                      width={NW}
+                      height={NH}
+                      rx="11"
+                      fill={c.fill}
+                      stroke={isSel ? "var(--txt2)" : c.stroke}
+                      strokeWidth={isSel ? 2.4 : 1.6}
+                    />
+                    <circle
+                      cx={n.x + NW / 2 - 14}
+                      cy={n.y - NH / 2 + 14}
+                      r="4"
+                      fill={c.pip}
+                    />
+                    <text
+                      x={n.x - NW / 2 + 13}
+                      y={n.y - 3}
+                      fontFamily="var(--sans)"
+                      fontSize="12.5"
+                      fontWeight="600"
+                      fill={c.t1}
+                    >
+                      {n.label}
+                    </text>
+                    <text
+                      x={n.x - NW / 2 + 13}
+                      y={n.y + 13}
+                      fontFamily="var(--code)"
+                      fontSize="10"
+                      fill="var(--dim)"
+                    >
+                      {n.fn}
+                    </text>
+                  </g>
+                );
+              })}
+            </g>
+          </svg>
+        </div>
+
+        <div className="wf-side">
+          <span className="sk">selected task</span>
+          <span className="wf-seltype">
+            <span
+              style={{
+                width: 7,
+                height: 7,
+                borderRadius: 2,
+                background: "currentColor",
+                display: "inline-block",
+              }}
+            />
+            {selNode.type}
+          </span>
+          <div className="wf-selname">
+            {selNode.label}
+            <span className="mono">{selNode.fn}</span>
+          </div>
+          <div className="wf-rows">
+            <div className="wf-row">
+              <span className="k">Status</span>
+              <span className="wf-status">
+                <span className="sd" style={{ background: selStColor }} />
+                {selStatus}
+              </span>
+            </div>
+            <div className="wf-row">
+              <span className="k">Depends on</span>
+              <div className="wf-depchips">
+                {selNode.deps.length ? (
+                  selNode.deps.map((d) => (
+                    <span key={d} className="dc">
+                      {byId[d].label}
+                    </span>
+                  ))
+                ) : (
+                  <span className="dc none">none · root task</span>
+                )}
+              </div>
+            </div>
+            <div className="wf-row">
+              <span className="k">Est. duration</span>
+              <span className="v mono">{(selNode.dur / 1000).toFixed(2)}s</span>
+            </div>
+            <div className="wf-row">
+              <span className="k">Downstream tasks</span>
+              <span className="v mono">{downstream}</span>
+            </div>
+          </div>
+          <div className="wf-runbranch">
+            <button
+              type="button"
+              className="ctl"
+              onClick={() => start(branchSet(selNode.id))}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <path d="M6 3v12" />
+                <circle cx="6" cy="18" r="3" />
+                <circle cx="18" cy="6" r="3" />
+                <path d="M18 9a9 9 0 0 1-9 9" />
+              </svg>
+              Run from here
+            </button>
+            <div className="note">
+              {downstream > 0
+                ? `runs this task + ${downstream} downstream`
+                : "runs just this task"}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="legend">
+        <span>
+          <i style={{ background: "var(--dim)" }} />
+          idle
+        </span>
+        <span>
+          <i style={{ background: "var(--indigo-br)" }} />
+          queued
+        </span>
+        <span>
+          <i style={{ background: "var(--cyan)" }} />
+          running
+        </span>
+        <span>
+          <i style={{ background: "var(--grn)" }} />
+          done
+        </span>
+      </div>
+
+      <div className="readout">
+        <div className="stat">
+          <span className="k">tasks</span>
+          <span className="v">{scope.length}</span>
+        </div>
+        <div className="stat">
+          <span className="k">completed</span>
+          <span className="v good">{doneCount}</span>
+        </div>
+        <div className="stat">
+          <span className="k">running</span>
+          <span className="v">{runCount}</span>
+        </div>
+        <div className="stat">
+          <span className="k">elapsed</span>
+          <span className="v">
+            {(sim.elapsed / 1000).toFixed(1)}
+            <span className="u">s</span>
+          </span>
+        </div>
+        <div className="stat">
+          <span className="k">critical path</span>
+          <span className="v">
+            {(CRIT / 1000).toFixed(1)}
+            <span className="u">s</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/styles/demos.css b/docs/app/styles/demos.css
index 20ffd2a4..89152b91 100644
--- a/docs/app/styles/demos.css
+++ b/docs/app/styles/demos.css
@@ -511,6 +511,165 @@
   }
 }
 
+/* workflow DAG demo */
+.dm-stage .wf-grid {
+  display: grid;
+  grid-template-columns: 1fr 246px;
+  gap: 0;
+}
+.dm-stage .wf-graph {
+  padding: 14px 8px 8px 14px;
+  position: relative;
+}
+.dm-stage .wf-graph svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+.dm-stage .wf-node {
+  cursor: pointer;
+}
+.dm-stage .wf-node rect {
+  transition:
+    fill 0.25s,
+    stroke 0.25s;
+}
+.dm-stage .wf-node:focus-visible {
+  outline: 2px solid var(--indigo-line);
+  outline-offset: 2px;
+}
+.dm-stage .wf-side {
+  border-left: 1px solid var(--line);
+  padding: 18px 18px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.dm-stage .wf-side .sk {
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+.dm-stage .wf-seltype {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  align-self: flex-start;
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 5px 11px;
+  border-radius: 100px;
+  border: 1px solid var(--indigo-line);
+  background: var(--indigo-soft);
+  color: var(--indigo-br);
+}
+.dm-stage .wf-selname {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  color: var(--txt);
+  line-height: 1.15;
+}
+.dm-stage .wf-selname .mono {
+  font-family: var(--code);
+  font-size: 13px;
+  color: var(--mut);
+  display: block;
+  margin-top: 3px;
+  font-weight: 500;
+}
+.dm-stage .wf-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+}
+.dm-stage .wf-row {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.dm-stage .wf-row .k {
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+.dm-stage .wf-row .v {
+  font-size: 13.5px;
+  color: var(--txt2);
+  line-height: 1.45;
+}
+.dm-stage .wf-row .v.mono {
+  font-family: var(--code);
+  font-variant-numeric: tabular-nums;
+}
+.dm-stage .wf-depchips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.dm-stage .wf-depchips .dc {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--txt2);
+  background: var(--panel);
+  border: 1px solid var(--line2);
+  border-radius: 7px;
+  padding: 3px 8px;
+}
+.dm-stage .wf-depchips .dc.none {
+  color: var(--dim);
+  border-style: dashed;
+}
+.dm-stage .wf-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--mono);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.dm-stage .wf-status .sd {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--dim);
+}
+.dm-stage .wf-runbranch {
+  margin-top: auto;
+  border-top: 1px dashed var(--line2);
+  padding-top: 14px;
+}
+.dm-stage .wf-runbranch .ctl {
+  width: 100%;
+  justify-content: center;
+}
+.dm-stage .wf-runbranch .note {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--dim);
+  text-align: center;
+  margin-top: 9px;
+  line-height: 1.5;
+}
+@media (max-width: 860px) {
+  .dm-stage .wf-grid {
+    grid-template-columns: 1fr;
+  }
+  .dm-stage .wf-side {
+    border-left: 0;
+    border-top: 1px solid var(--line);
+  }
+  .dm-stage .wf-runbranch {
+    margin-top: 0;
+  }
+}
+
 /* mesh demo */
 .dm-stage .mesh-hint {
   display: inline-flex;

From 294922e221acad426f3b18fe2e3bdf9d57c97f11 Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:38:00 +0530
Subject: [PATCH 08/14] feat(docs): port work-steal demo to React, drop its
 iframe

---
 docs/app/components/demos/registry.ts        |   1 +
 docs/app/components/demos/worksteal-demo.tsx | 784 +++++++++++++++++++
 2 files changed, 785 insertions(+)
 create mode 100644 docs/app/components/demos/worksteal-demo.tsx

diff --git a/docs/app/components/demos/registry.ts b/docs/app/components/demos/registry.ts
index 91a6f241..f4123b2e 100644
--- a/docs/app/components/demos/registry.ts
+++ b/docs/app/components/demos/registry.ts
@@ -16,6 +16,7 @@ export const DEMO_COMPONENTS: Partial<Record<DemoId, LazyDemo>> = {
   recovery: lazy(() => import("./recovery-demo")),
   saga: lazy(() => import("./saga-demo")),
   workflow: lazy(() => import("./workflow-demo")),
+  worksteal: lazy(() => import("./worksteal-demo")),
 };
 
 /** The React port for `id`, or `undefined` if it still uses the iframe. */
diff --git a/docs/app/components/demos/worksteal-demo.tsx b/docs/app/components/demos/worksteal-demo.tsx
new file mode 100644
index 00000000..6d9dcdae
--- /dev/null
+++ b/docs/app/components/demos/worksteal-demo.tsx
@@ -0,0 +1,784 @@
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { useRafLoop, useReducedMotion } from "./lib";
+
+/*
+ * Multi-region work-stealing demo — taskito runs in several regions that gossip
+ * queue depth; when one backlog spikes, an idle peer steals a batch over HTTP so
+ * load self-balances with no central broker. React port of demo-worksteal.js
+ * (SVG world map + RAF simulation).
+ */
+
+const W = 940;
+const H = 540;
+const JOB_MS = 820;
+const STEAL_INT = 620;
+const HOT = 5;
+const COOL = 2;
+const MAPH = 470;
+const MAPY = 35;
+
+const proj = (lon: number, lat: number): [number, number] => [
+  ((lon + 180) / 360) * W,
+  ((90 - lat) / 180) * MAPH + MAPY,
+];
+
+const CONTINENTS: [number, number][][] = [
+  [
+    [-165, 60],
+    [-150, 70],
+    [-120, 70],
+    [-95, 72],
+    [-80, 68],
+    [-78, 55],
+    [-64, 48],
+    [-70, 42],
+    [-76, 35],
+    [-81, 25],
+    [-92, 18],
+    [-100, 18],
+    [-106, 23],
+    [-114, 31],
+    [-123, 40],
+    [-124, 49],
+    [-133, 55],
+    [-150, 58],
+  ],
+  [
+    [-80, 8],
+    [-72, 11],
+    [-60, 5],
+    [-50, 0],
+    [-44, -2],
+    [-40, -10],
+    [-48, -23],
+    [-58, -34],
+    [-66, -44],
+    [-72, -52],
+    [-75, -48],
+    [-71, -35],
+    [-70, -18],
+    [-76, -12],
+    [-81, -5],
+  ],
+  [
+    [-16, 14],
+    [-12, 28],
+    [-2, 35],
+    [10, 37],
+    [20, 33],
+    [32, 31],
+    [35, 24],
+    [43, 12],
+    [51, 11],
+    [48, 0],
+    [41, -12],
+    [35, -22],
+    [25, -34],
+    [18, -35],
+    [11, -16],
+    [9, 0],
+    [-2, 5],
+    [-12, 8],
+  ],
+  [
+    [-9, 36],
+    [-2, 44],
+    [2, 50],
+    [-4, 58],
+    [5, 62],
+    [14, 66],
+    [28, 71],
+    [55, 70],
+    [75, 73],
+    [100, 73],
+    [130, 71],
+    [155, 68],
+    [170, 66],
+    [165, 60],
+    [150, 58],
+    [142, 50],
+    [133, 43],
+    [123, 40],
+    [122, 31],
+    [112, 21],
+    [103, 14],
+    [97, 8],
+    [93, 20],
+    [88, 21],
+    [80, 7],
+    [76, 8],
+    [70, 18],
+    [63, 24],
+    [56, 26],
+    [48, 30],
+    [42, 37],
+    [30, 36],
+    [22, 40],
+    [14, 45],
+    [4, 43],
+  ],
+  [
+    [-5, 50],
+    [-2, 51],
+    [1, 53],
+    [-2, 56],
+    [-6, 58],
+    [-9, 55],
+    [-10, 52],
+  ],
+  [
+    [133, 32],
+    [138, 34],
+    [143, 39],
+    [145, 43],
+    [143, 45],
+    [139, 43],
+    [136, 39],
+    [133, 36],
+    [131, 33],
+  ],
+  [
+    [114, -22],
+    [122, -18],
+    [131, -12],
+    [137, -11],
+    [143, -11],
+    [147, -20],
+    [150, -37],
+    [141, -38],
+    [131, -32],
+    [120, -34],
+    [114, -26],
+  ],
+];
+const landPath = (pts: [number, number][]) =>
+  `M${pts
+    .map((c) =>
+      proj(c[0], c[1])
+        .map((v) => v.toFixed(1))
+        .join(" "),
+    )
+    .join(" L ")} Z`;
+const LAND_D = CONTINENTS.map(landPath).join(" ");
+
+interface RegionDef {
+  id: string;
+  loc: string;
+  lon: number;
+  lat: number;
+  cardX: number;
+  cardY: number;
+  q0: number;
+  rate: number;
+  gx: number;
+  gy: number;
+}
+const REG: RegionDef[] = [
+  {
+    id: "us-west-2",
+    loc: "Oregon",
+    lon: -120,
+    lat: 45,
+    cardX: 44,
+    cardY: 58,
+    q0: 2,
+    rate: 0.3,
+  },
+  {
+    id: "us-east-1",
+    loc: "N. Virginia",
+    lon: -77,
+    lat: 38,
+    cardX: 120,
+    cardY: 214,
+    q0: 2,
+    rate: 0.3,
+  },
+  {
+    id: "eu-west",
+    loc: "Ireland",
+    lon: -7,
+    lat: 53,
+    cardX: 386,
+    cardY: 44,
+    q0: 2,
+    rate: 1.35,
+  },
+  {
+    id: "ap-south-1",
+    loc: "Mumbai",
+    lon: 73,
+    lat: 19,
+    cardX: 560,
+    cardY: 300,
+    q0: 1,
+    rate: 0.34,
+  },
+  {
+    id: "ap-northeast-1",
+    loc: "Tokyo",
+    lon: 139,
+    lat: 36,
+    cardX: 742,
+    cardY: 66,
+    q0: 2,
+    rate: 0.34,
+  },
+].map((r) => {
+  const [px, py] = proj(r.lon, r.lat);
+  return { ...r, gx: Math.round(px), gy: Math.round(py) };
+});
+
+const LINKS: [string, string, number | null][] = [
+  ["us-west-2", "eu-west", 85],
+  ["eu-west", "ap-northeast-1", 88],
+  ["eu-west", "ap-south-1", 139],
+  ["us-west-2", "us-east-1", null],
+  ["us-east-1", "eu-west", null],
+  ["ap-south-1", "ap-northeast-1", null],
+  ["us-east-1", "ap-south-1", null],
+];
+const regById = (id: string) => REG.find((r) => r.id === id) as RegionDef;
+const labelW = (s: string) => s.length * 7.1 + 4;
+
+interface RegionSim {
+  q: number;
+  busy: [number, number];
+}
+interface StealToken {
+  id: number;
+  ax: number;
+  ay: number;
+  bx: number;
+  by: number;
+  dst: string;
+  batch: number;
+  t0: number;
+  dur: number;
+  done: boolean;
+}
+interface Sim {
+  reg: Record<string, RegionSim>;
+  completed: number;
+  steals: number;
+  moved: number;
+  tokens: StealToken[];
+  linkSolid: number[];
+  stealAcc: number;
+  last: number;
+  ids: number;
+}
+function freshSim(): Sim {
+  const reg: Record<string, RegionSim> = {};
+  for (const r of REG) reg[r.id] = { q: r.q0, busy: [0, 0] };
+  return {
+    reg,
+    completed: 0,
+    steals: 0,
+    moved: 0,
+    tokens: [],
+    linkSolid: LINKS.map(() => 0),
+    stealAcc: 0,
+    last: 0,
+    ids: 0,
+  };
+}
+
+function poisson(m: number): number {
+  if (m <= 0) return 0;
+  const L = Math.exp(-m);
+  let k = 0;
+  let p = 1;
+  do {
+    k++;
+    p *= Math.random();
+  } while (p > L);
+  return k - 1;
+}
+
+export default function WorkStealDemo() {
+  const reduced = useReducedMotion();
+  const simRef = useRef<Sim>(freshSim());
+  const [paused, setPaused] = useState(false);
+  const [, repaint] = useReducer((n: number) => n + 1, 0);
+
+  const stepSim = useCallback((sim: Sim, now: number, dt: number) => {
+    for (const r of REG) {
+      const rs = sim.reg[r.id];
+      rs.q += poisson(r.rate * dt);
+      for (let i = 0; i < 2; i++) {
+        if (rs.busy[i] && now >= rs.busy[i]) {
+          rs.busy[i] = 0;
+          sim.completed++;
+        }
+        if (!rs.busy[i] && rs.q > 0) {
+          rs.q--;
+          rs.busy[i] = now + JOB_MS * (0.8 + Math.random() * 0.5);
+        }
+      }
+    }
+  }, []);
+
+  const trySteal = useCallback((sim: Sim, now: number, dt: number) => {
+    sim.stealAcc += dt * 1000;
+    if (sim.stealAcc < STEAL_INT) return;
+    sim.stealAcc = 0;
+    const hot = [...REG].sort((a, b) => sim.reg[b.id].q - sim.reg[a.id].q)[0];
+    if (sim.reg[hot.id].q < HOT) return;
+    const peers = LINKS.map((L, i) => ({ L, i }))
+      .filter(({ L }) => L[0] === hot.id || L[1] === hot.id)
+      .map(({ L, i }) => ({ peer: L[0] === hot.id ? L[1] : L[0], i }))
+      .filter(
+        ({ peer }) =>
+          sim.reg[peer].q <= COOL && sim.reg[peer].busy.indexOf(0) >= 0,
+      )
+      .sort((a, b) => sim.reg[a.peer].q - sim.reg[b.peer].q);
+    if (!peers.length) return;
+    const dst = peers[0].peer;
+    const batch = Math.max(
+      1,
+      Math.min(4, Math.floor((sim.reg[hot.id].q - sim.reg[dst].q) / 2)),
+    );
+    sim.reg[hot.id].q -= batch;
+    sim.steals++;
+    // mark the link solid + spawn the traveling token
+    const linkIdx = LINKS.findIndex(
+      (L) =>
+        (L[0] === hot.id && L[1] === dst) || (L[0] === dst && L[1] === hot.id),
+    );
+    if (linkIdx >= 0) sim.linkSolid[linkIdx] = now + 700;
+    const a = hot;
+    const b = regById(dst);
+    const dist = Math.hypot(b.gx - a.gx, b.gy - a.gy);
+    sim.tokens.push({
+      id: sim.ids++,
+      ax: a.gx,
+      ay: a.gy,
+      bx: b.gx,
+      by: b.gy,
+      dst,
+      batch,
+      t0: now,
+      dur: Math.max(620, dist * 1.6),
+      done: false,
+    });
+  }, []);
+
+  const moveTokens = useCallback((sim: Sim, now: number) => {
+    for (let i = sim.tokens.length - 1; i >= 0; i--) {
+      const t = sim.tokens[i];
+      const p = Math.min(1, (now - t.t0) / t.dur);
+      if (p >= 1 && !t.done) {
+        t.done = true;
+        sim.reg[t.dst].q += t.batch;
+        sim.moved += t.batch;
+        sim.tokens.splice(i, 1);
+      }
+    }
+  }, []);
+
+  const loop = useCallback(
+    (now: number) => {
+      const sim = simRef.current;
+      if (!sim.last) sim.last = now;
+      const dt = Math.min((now - sim.last) / 1000, 0.05);
+      sim.last = now;
+      stepSim(sim, now, dt);
+      trySteal(sim, now, dt);
+      moveTokens(sim, now);
+      repaint();
+    },
+    [stepSim, trySteal, moveTokens],
+  );
+
+  useEffect(() => {
+    const sim = freshSim();
+    if (reduced) {
+      const now = performance.now();
+      for (const r of REG) sim.reg[r.id].busy = [now + 1, 0];
+    }
+    simRef.current = sim;
+    repaint();
+  }, [reduced]);
+
+  useRafLoop(loop, !paused && !reduced);
+
+  const sim = simRef.current;
+  const now = performance.now();
+  let hotQ = 0;
+  for (const r of REG) {
+    if (sim.reg[r.id].q > hotQ) hotQ = sim.reg[r.id].q;
+  }
+
+  const burst = () => {
+    const hot = [...REG].sort((a, b) => sim.reg[b.id].q - sim.reg[a.id].q)[0];
+    sim.reg[hot.id].q += 7;
+    repaint();
+  };
+  const reset = () => {
+    const fresh = freshSim();
+    if (reduced) {
+      const t = performance.now();
+      for (const r of REG) fresh.reg[r.id].busy = [t + 1, 0];
+    }
+    simRef.current = fresh;
+    repaint();
+  };
+
+  return (
+    <div className="dm-frame-react">
+      <div className="demo-bar">
+        <span className="title">
+          <span className="ld" />
+          region-mesh · gossip
+        </span>
+        <div className="demo-controls">
+          <button type="button" className="ctl pri" onClick={burst}>
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M12 5v14M5 12h14" />
+            </svg>
+            Burst
+          </button>
+          <button type="button" className="ctl" onClick={reset}>
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
+              <path d="M3 3v5h5" />
+            </svg>
+            Reset
+          </button>
+          <button
+            type="button"
+            className="ctl"
+            onClick={() => setPaused((p) => !p)}
+          >
+            {paused ? (
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                stroke="none"
+                aria-hidden="true"
+              >
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            ) : (
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                stroke="none"
+                aria-hidden="true"
+              >
+                <rect x="6" y="5" width="4" height="14" rx="1" />
+                <rect x="14" y="5" width="4" height="14" rx="1" />
+              </svg>
+            )}
+            {paused ? "Resume" : "Pause"}
+          </button>
+        </div>
+      </div>
+
+      <div className="stage">
+        <svg
+          viewBox={`0 0 ${W} ${H}`}
+          role="img"
+          aria-label="A world map with five taskito regions connected by a gossip mesh. When one region's queue spikes, idle regions steal batches of jobs over HTTP so load balances out."
+        >
+          <defs>
+            <pattern
+              id="ws-grid"
+              width="36"
+              height="36"
+              patternUnits="userSpaceOnUse"
+            >
+              <circle cx="1" cy="1" r="1" fill="var(--line)" />
+            </pattern>
+          </defs>
+          <rect width={W} height={H} fill="url(#ws-grid)" opacity="0.7" />
+          <g opacity="0.6">
+            <path
+              d={LAND_D}
+              fill="var(--line)"
+              stroke="var(--line2)"
+              strokeWidth="1"
+              strokeLinejoin="round"
+            />
+          </g>
+
+          {/* links + latency pills */}
+          <g>
+            {LINKS.map((L, i) => {
+              const a = regById(L[0]);
+              const b = regById(L[1]);
+              const on = sim.linkSolid[i] > now;
+              return (
+                <line
+                  // biome-ignore lint/suspicious/noArrayIndexKey: fixed link list
+                  key={`link${i}`}
+                  x1={a.gx}
+                  y1={a.gy}
+                  x2={b.gx}
+                  y2={b.gy}
+                  stroke={
+                    on
+                      ? "var(--cyan)"
+                      : "color-mix(in oklch,var(--grn) 38%,transparent)"
+                  }
+                  strokeWidth={on ? 2.2 : 1.6}
+                  strokeDasharray={on ? undefined : "2 6"}
+                  strokeLinecap="round"
+                />
+              );
+            })}
+            {LINKS.map((L, i) => {
+              if (L[2] == null) return null;
+              const a = regById(L[0]);
+              const b = regById(L[1]);
+              const mx = (a.gx + b.gx) / 2;
+              const my = (a.gy + b.gy) / 2;
+              return (
+                // biome-ignore lint/suspicious/noArrayIndexKey: fixed link list
+                <g key={`lat${i}`}>
+                  <rect
+                    x={mx - 21}
+                    y={my - 11}
+                    width="42"
+                    height="22"
+                    rx="7"
+                    fill="var(--panel)"
+                    stroke="color-mix(in oklch,var(--grn) 32%,transparent)"
+                  />
+                  <text
+                    x={mx}
+                    y={my + 4}
+                    textAnchor="middle"
+                    fontFamily="var(--mono)"
+                    fontSize="10.5"
+                    fill="var(--mut)"
+                  >
+                    {L[2]} ms
+                  </text>
+                </g>
+              );
+            })}
+          </g>
+
+          {/* leader lines + geographic pins */}
+          <g>
+            {REG.map((r) => (
+              <line
+                key={r.id}
+                x1={r.cardX + 78}
+                y1={r.cardY + 40}
+                x2={r.gx}
+                y2={r.gy}
+                stroke="var(--line2)"
+                strokeWidth="1.3"
+                strokeDasharray="1 4"
+                strokeLinecap="round"
+              />
+            ))}
+          </g>
+          <g>
+            {REG.map((r) => (
+              <g key={r.id}>
+                <circle
+                  cx={r.gx}
+                  cy={r.gy}
+                  r="11"
+                  fill="color-mix(in oklch,var(--grn) 13%,transparent)"
+                />
+                <circle
+                  cx={r.gx}
+                  cy={r.gy}
+                  r="4.5"
+                  fill="var(--grn)"
+                  stroke="var(--panel)"
+                  strokeWidth="1.5"
+                />
+              </g>
+            ))}
+          </g>
+
+          {/* steal tokens */}
+          <g>
+            {sim.tokens.map((t) => {
+              const p = Math.min(1, (now - t.t0) / t.dur);
+              const x = t.ax + (t.bx - t.ax) * p;
+              const y = t.ay + (t.by - t.ay) * p;
+              const op =
+                p < 0.1
+                  ? p / 0.1
+                  : p > 0.9
+                    ? (1 - (p - 0.9) / 0.1) * 0.95
+                    : 0.95;
+              return (
+                <g
+                  key={t.id}
+                  transform={`translate(${x.toFixed(1)},${y.toFixed(1)})`}
+                >
+                  <circle r="8" fill="var(--cyan)" opacity={op} />
+                  <text
+                    textAnchor="middle"
+                    y="3.5"
+                    fontFamily="var(--code)"
+                    fontSize="9"
+                    fontWeight="700"
+                    fill="#06281f"
+                  >
+                    {t.batch}
+                  </text>
+                </g>
+              );
+            })}
+          </g>
+
+          {/* region cards */}
+          <g>
+            {REG.map((r) => {
+              const rs = sim.reg[r.id];
+              const hot = rs.q >= HOT;
+              const x = r.cardX;
+              const y = r.cardY;
+              return (
+                <g key={r.id}>
+                  <rect
+                    x={x}
+                    y={y}
+                    width="156"
+                    height="80"
+                    rx="13"
+                    fill={
+                      hot
+                        ? "color-mix(in oklch,var(--amber) 7%,var(--panel))"
+                        : "var(--panel)"
+                    }
+                    stroke={
+                      hot
+                        ? "color-mix(in oklch,var(--amber) 55%,transparent)"
+                        : "var(--line2)"
+                    }
+                  />
+                  <circle cx={x + 16} cy={y + 18} r="5.5" fill="var(--grn)" />
+                  <text
+                    x={x + 30}
+                    y={y + 22}
+                    fontFamily="var(--code)"
+                    fontSize="12.5"
+                    fontWeight="700"
+                    fill="var(--txt)"
+                  >
+                    {r.id}
+                  </text>
+                  <text
+                    x={x + 30 + labelW(r.id)}
+                    y={y + 22}
+                    fontFamily="var(--mono)"
+                    fontSize="10"
+                    fill="var(--dim)"
+                  >
+                    {r.loc}
+                  </text>
+                  {[0, 1].map((i) => {
+                    const wbusy = !!rs.busy[i];
+                    return (
+                      <rect
+                        key={i}
+                        x={x + 16 + i * 18}
+                        y={y + 36}
+                        width="13"
+                        height="13"
+                        rx="3.5"
+                        fill={wbusy ? "var(--grn)" : "var(--panel3)"}
+                        stroke={
+                          wbusy
+                            ? "color-mix(in oklch,var(--grn) 55%,transparent)"
+                            : "var(--line2)"
+                        }
+                      />
+                    );
+                  })}
+                  <text
+                    x={x + 16}
+                    y={y + 70}
+                    fontFamily="var(--mono)"
+                    fontSize="11"
+                    fill="var(--mut)"
+                  >
+                    <tspan fontWeight="600" fill="var(--txt2)">
+                      {rs.q}
+                    </tspan>{" "}
+                    queued
+                  </text>
+                </g>
+              );
+            })}
+          </g>
+        </svg>
+      </div>
+
+      <div className="legend">
+        <span>
+          <i style={{ background: "var(--grn)" }} />
+          region node
+        </span>
+        <span>
+          <i
+            style={{
+              width: 16,
+              height: 0,
+              borderTop:
+                "2px dashed color-mix(in oklch,var(--grn) 50%,transparent)",
+              background: "none",
+            }}
+          />
+          mesh link (gossip)
+        </span>
+        <span>
+          <i
+            style={{
+              width: 16,
+              height: 0,
+              borderTop: "2px solid var(--cyan)",
+              background: "none",
+            }}
+          />
+          work-steal over HTTP
+        </span>
+      </div>
+
+      <div className="readout">
+        <div className="stat">
+          <span className="k">completed</span>
+          <span className="v good">{sim.completed}</span>
+        </div>
+        <div className="stat">
+          <span className="k">steals</span>
+          <span className="v">{sim.steals}</span>
+        </div>
+        <div className="stat">
+          <span className="k">moved · HTTP</span>
+          <span className="v warn">{sim.moved}</span>
+        </div>
+        <div className="stat">
+          <span className="k">busiest queue</span>
+          <span className="v">{hotQ}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

From 274bfe2f01290dfaf5cbe083a9ada28dc1bee322 Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:42:25 +0530
Subject: [PATCH 09/14] feat(docs): port scaling playground to React, drop its
 iframe

---
 docs/app/components/demos/registry.ts      |   1 +
 docs/app/components/demos/scaling-demo.tsx | 463 +++++++++++++++++++++
 docs/app/styles/demos.css                  | 163 ++++++++
 3 files changed, 627 insertions(+)
 create mode 100644 docs/app/components/demos/scaling-demo.tsx

diff --git a/docs/app/components/demos/registry.ts b/docs/app/components/demos/registry.ts
index f4123b2e..495f4856 100644
--- a/docs/app/components/demos/registry.ts
+++ b/docs/app/components/demos/registry.ts
@@ -14,6 +14,7 @@ export const DEMO_COMPONENTS: Partial<Record<DemoId, LazyDemo>> = {
   mesh: lazy(() => import("./mesh-demo")),
   ratelimit: lazy(() => import("./ratelimit-demo")),
   recovery: lazy(() => import("./recovery-demo")),
+  scaling: lazy(() => import("./scaling-demo")),
   saga: lazy(() => import("./saga-demo")),
   workflow: lazy(() => import("./workflow-demo")),
   worksteal: lazy(() => import("./worksteal-demo")),
diff --git a/docs/app/components/demos/scaling-demo.tsx b/docs/app/components/demos/scaling-demo.tsx
new file mode 100644
index 00000000..63305f10
--- /dev/null
+++ b/docs/app/components/demos/scaling-demo.tsx
@@ -0,0 +1,463 @@
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { useRafLoop, useReducedMotion } from "./lib";
+import type { DemoProps } from "./types";
+
+/*
+ * Worker-scaling playground — sliders drive a stochastic M/M/c queue simulation;
+ * throughput, queue-depth and latency charts respond live on Canvas 2D. React
+ * port of demo-playground.js (Canvas + RAF).
+ */
+
+interface Params {
+  workers: number;
+  conc: number;
+  lambda: number;
+  jobMs: number;
+  rate: number;
+}
+const DEFAULTS: Params = {
+  workers: 4,
+  conc: 2,
+  lambda: 18,
+  jobMs: 300,
+  rate: 0,
+};
+
+interface Field {
+  k: keyof Params;
+  n: string;
+  sub: string;
+  min: number;
+  max: number;
+  step: number;
+  fmt: (v: number) => string;
+}
+const FIELDS: Field[] = [
+  {
+    k: "workers",
+    n: "Workers",
+    sub: "pool size",
+    min: 1,
+    max: 12,
+    step: 1,
+    fmt: (v) => `${v}`,
+  },
+  {
+    k: "conc",
+    n: "Concurrency",
+    sub: "per worker",
+    min: 1,
+    max: 8,
+    step: 1,
+    fmt: (v) => `×${v}`,
+  },
+  {
+    k: "lambda",
+    n: "Arrival rate",
+    sub: "jobs / s",
+    min: 1,
+    max: 80,
+    step: 1,
+    fmt: (v) => `${v}/s`,
+  },
+  {
+    k: "jobMs",
+    n: "Avg job time",
+    sub: "milliseconds",
+    min: 50,
+    max: 1200,
+    step: 25,
+    fmt: (v) => `${v}ms`,
+  },
+  {
+    k: "rate",
+    n: "Rate limit",
+    sub: "0 = unlimited",
+    min: 0,
+    max: 60,
+    step: 2,
+    fmt: (v) => (v === 0 ? "off" : `${v}/s`),
+  },
+];
+
+const BUF = 170;
+
+interface Sim {
+  N: number;
+  tokens: number;
+  thrEMA: number;
+  latEMA: number;
+  hThr: number[];
+  hQ: number[];
+  hLat: number[];
+}
+function freshSim(rate: number): Sim {
+  return {
+    N: 0,
+    tokens: rate,
+    thrEMA: 0,
+    latEMA: 0,
+    hThr: new Array(BUF).fill(0),
+    hQ: new Array(BUF).fill(0),
+    hLat: new Array(BUF).fill(0),
+  };
+}
+
+function gauss(): number {
+  const u = Math.random();
+  const v = Math.random();
+  return Math.sqrt(-2 * Math.log(u || 1e-9)) * Math.cos(6.283185 * v);
+}
+function poisson(mean: number): number {
+  if (mean <= 0) return 0;
+  if (mean > 30)
+    return Math.max(0, Math.round(mean + Math.sqrt(mean) * gauss()));
+  const L = Math.exp(-mean);
+  let k = 0;
+  let p = 1;
+  do {
+    k++;
+    p *= Math.random();
+  } while (p > L);
+  return k - 1;
+}
+
+function resolveColor(varExpr: string): string {
+  const s = document.createElement("span");
+  s.style.cssText = "position:absolute;opacity:0;pointer-events:none";
+  s.style.color = varExpr;
+  document.body.appendChild(s);
+  const c = getComputedStyle(s).color;
+  s.remove();
+  return c;
+}
+function withAlpha(rgb: string, a: number): string {
+  const m = rgb.match(/\d+/g);
+  if (!m) return rgb;
+  return `rgba(${m[0]},${m[1]},${m[2]},${a})`;
+}
+
+interface CanvasBox {
+  el: HTMLCanvasElement;
+  w: number;
+  h: number;
+}
+const boxOf = (el: HTMLCanvasElement | null): CanvasBox | null =>
+  el ? { el, w: el.clientWidth, h: el.clientHeight || 84 } : null;
+function sizeCanvas(box: CanvasBox) {
+  const dpr = Math.min(2, window.devicePixelRatio || 1);
+  const w = box.el.clientWidth;
+  const h = box.el.clientHeight || 84;
+  box.w = w;
+  box.h = h;
+  box.el.width = w * dpr;
+  box.el.height = h * dpr;
+  box.el.getContext("2d")?.setTransform(dpr, 0, 0, dpr, 0, 0);
+}
+function drawChart(
+  box: CanvasBox,
+  data: number[],
+  color: string,
+  grid: string,
+  yMaxFloor: number,
+) {
+  const ctx = box.el.getContext("2d");
+  if (!ctx) return;
+  const { w, h } = box;
+  ctx.clearRect(0, 0, w, h);
+  const pad = 6;
+  const gh = h - pad * 2;
+  let max = yMaxFloor;
+  for (const d of data) if (d > max) max = d;
+  max = max * 1.18 + 0.001;
+  ctx.strokeStyle = grid;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(0, h - pad);
+  ctx.lineTo(w, h - pad);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(0, pad);
+  ctx.lineTo(w, pad);
+  ctx.globalAlpha = 0.5;
+  ctx.stroke();
+  ctx.globalAlpha = 1;
+  const n = data.length;
+  const dx = w / (n - 1);
+  const X = (i: number) => i * dx;
+  const Y = (v: number) => pad + gh - (Math.min(v, max) / max) * gh;
+  ctx.beginPath();
+  ctx.moveTo(0, h - pad);
+  for (let i = 0; i < n; i++) ctx.lineTo(X(i), Y(data[i]));
+  ctx.lineTo(w, h - pad);
+  ctx.closePath();
+  const grad = ctx.createLinearGradient(0, pad, 0, h);
+  grad.addColorStop(0, withAlpha(color, 0.3));
+  grad.addColorStop(1, withAlpha(color, 0.02));
+  ctx.fillStyle = grad;
+  ctx.fill();
+  ctx.beginPath();
+  for (let i = 0; i < n; i++) {
+    const x = X(i);
+    const y = Y(data[i]);
+    if (i) ctx.lineTo(x, y);
+    else ctx.moveTo(x, y);
+  }
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2;
+  ctx.lineJoin = "round";
+  ctx.stroke();
+  const hx = X(n - 1);
+  const hy = Y(data[n - 1]);
+  ctx.beginPath();
+  ctx.arc(hx, hy, 3, 0, 6.2832);
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(hx, hy, 5.5, 0, 6.2832);
+  ctx.strokeStyle = withAlpha(color, 0.4);
+  ctx.lineWidth = 1.5;
+  ctx.stroke();
+}
+
+export default function ScalingDemo({ theme }: DemoProps) {
+  const reduced = useReducedMotion();
+  const [params, setParams] = useState<Params>(DEFAULTS);
+  const paramsRef = useRef<Params>(DEFAULTS);
+  paramsRef.current = params;
+  const simRef = useRef<Sim>(freshSim(DEFAULTS.rate));
+  const thrRef = useRef<HTMLCanvasElement>(null);
+  const qRef = useRef<HTMLCanvasElement>(null);
+  const latRef = useRef<HTMLCanvasElement>(null);
+  const colorsRef = useRef({ thr: "", q: "", lat: "", grid: "" });
+  const [, repaint] = useReducer((n: number) => n + 1, 0);
+
+  const stepSim = useCallback((dt: number) => {
+    const P = paramsRef.current;
+    const sim = simRef.current;
+    const C = P.workers * P.conc;
+    sim.N += poisson(P.lambda * dt);
+    const inService = Math.min(sim.N, C);
+    const rl = P.rate > 0;
+    if (rl) sim.tokens = Math.min(P.rate, sim.tokens + P.rate * dt);
+    const svcMean = (inService * dt) / (P.jobMs / 1000);
+    let done = Math.min(poisson(svcMean), sim.N);
+    if (rl) {
+      done = Math.min(done, Math.floor(sim.tokens));
+      sim.tokens -= done;
+    }
+    sim.N -= done;
+    const inst = dt > 0 ? done / dt : 0;
+    sim.thrEMA += (inst - sim.thrEMA) * Math.min(1, dt * 3.2);
+    const q = Math.max(0, sim.N - C);
+    const lat =
+      sim.thrEMA > 0.2 ? (sim.N / sim.thrEMA) * 1000 : sim.N > 0 ? 9000 : 0;
+    sim.latEMA += (lat - sim.latEMA) * Math.min(1, dt * 2.2);
+    sim.hThr.push(sim.thrEMA);
+    sim.hThr.shift();
+    sim.hQ.push(q);
+    sim.hQ.shift();
+    sim.hLat.push(sim.latEMA);
+    sim.hLat.shift();
+  }, []);
+
+  const drawAll = useCallback(() => {
+    const c = colorsRef.current;
+    const sim = simRef.current;
+    const thr = boxOf(thrRef.current);
+    const q = boxOf(qRef.current);
+    const lat = boxOf(latRef.current);
+    if (thr) drawChart(thr, sim.hThr, c.thr, c.grid, 8);
+    if (q) drawChart(q, sim.hQ, c.q, c.grid, 6);
+    if (lat) drawChart(lat, sim.hLat, c.lat, c.grid, 400);
+    repaint();
+  }, []);
+
+  const refreshColors = useCallback(() => {
+    colorsRef.current = {
+      thr: resolveColor("var(--indigo-br)"),
+      q: resolveColor("var(--amber)"),
+      lat: resolveColor("var(--cyan)"),
+      grid: resolveColor("var(--line)"),
+    };
+  }, []);
+
+  const sizeAll = useCallback(() => {
+    for (const el of [thrRef.current, qRef.current, latRef.current]) {
+      const box = boxOf(el);
+      if (box) sizeCanvas(box);
+    }
+  }, []);
+
+  const loop = useCallback(() => {
+    const sub = 2;
+    for (let i = 0; i < sub; i++) stepSim((0.05 / sub) * 1.6);
+    drawAll();
+  }, [stepSim, drawAll]);
+
+  const staticEval = useCallback(() => {
+    simRef.current = freshSim(paramsRef.current.rate);
+    for (let i = 0; i < 260; i++) stepSim(0.1);
+    refreshColors();
+    sizeAll();
+    drawAll();
+  }, [stepSim, refreshColors, sizeAll, drawAll]);
+
+  // Mount + motion-preference changes: size canvases, seed, draw.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-init only on motion preference; helper callbacks are stable
+  useEffect(() => {
+    refreshColors();
+    sizeAll();
+    if (reduced) staticEval();
+    else simRef.current = freshSim(paramsRef.current.rate);
+    drawAll();
+  }, [reduced]);
+
+  // Re-resolve chart colors + redraw when the host theme flips.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: redraw on theme change
+  useEffect(() => {
+    refreshColors();
+    drawAll();
+  }, [theme]);
+
+  // Keep canvases sized to their container.
+  useEffect(() => {
+    const onResize = () => {
+      sizeAll();
+      drawAll();
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [sizeAll, drawAll]);
+
+  useRafLoop(loop, !reduced);
+
+  const onSlide = (k: keyof Params, v: number) => {
+    setParams((prev) => ({ ...prev, [k]: v }));
+    if (reduced) {
+      // staticEval reads paramsRef which updates next render; schedule after state flush
+      requestAnimationFrame(staticEval);
+    }
+  };
+  const reset = () => {
+    setParams(DEFAULTS);
+    paramsRef.current = DEFAULTS;
+    simRef.current = freshSim(DEFAULTS.rate);
+    if (reduced) requestAnimationFrame(staticEval);
+    else drawAll();
+  };
+
+  const sim = simRef.current;
+  const C = params.workers * params.conc;
+  const svcCap = C / (params.jobMs / 1000);
+  const cap = params.rate > 0 ? Math.min(svcCap, params.rate) : svcCap;
+  let verdict = "Overloaded — queue is growing.";
+  let vcls = "bad";
+  if (cap >= params.lambda * 1.12) {
+    verdict = "Keeping up — pool has headroom.";
+    vcls = "good";
+  } else if (cap >= params.lambda * 0.97) {
+    verdict = "Saturated — running near capacity.";
+    vcls = "warn";
+  }
+
+  return (
+    <div className="dm-frame-react">
+      <div className="demo-bar">
+        <span className="title">
+          <span className="ld" />
+          worker-pool · simulation
+        </span>
+        <div className="demo-controls">
+          <button type="button" className="ctl" onClick={reset}>
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
+              <path d="M3 3v5h5" />
+            </svg>
+            Reset
+          </button>
+        </div>
+      </div>
+
+      <div className="wp-grid">
+        <div className="wp-ctl">
+          {FIELDS.map((f) => (
+            <div className="wp-field" key={f.k}>
+              <div className="lab">
+                <span className="n">
+                  {f.n} <small>{f.sub}</small>
+                </span>
+                <span className="val">{f.fmt(params[f.k])}</span>
+              </div>
+              <input
+                type="range"
+                className="wp-range"
+                min={f.min}
+                max={f.max}
+                step={f.step}
+                value={params[f.k]}
+                aria-label={f.n}
+                onChange={(e) => onSlide(f.k, +e.target.value)}
+              />
+            </div>
+          ))}
+          <div className="wp-cap">
+            <b>{C}</b> in-flight slots · capacity <b>≈{cap.toFixed(0)}/s</b> vs
+            demand <b>{params.lambda}/s</b>
+            {params.rate > 0 ? ` · capped at ${params.rate}/s` : ""}
+            <span className={`verdict ${vcls}`}>{verdict}</span>
+          </div>
+        </div>
+        <div className="wp-charts">
+          <div className="wp-chart">
+            <div className="ch-hd">
+              <span className="t">
+                <i style={{ background: "var(--indigo-br)" }} />
+                Throughput
+              </span>
+              <span className="now">
+                {sim.hThr[BUF - 1].toFixed(1)}
+                <span className="u">/s</span>
+              </span>
+            </div>
+            <canvas className="wp-canvas" ref={thrRef} />
+          </div>
+          <div className="wp-chart">
+            <div className="ch-hd">
+              <span className="t">
+                <i style={{ background: "var(--amber)" }} />
+                Queue depth
+              </span>
+              <span className="now">
+                {Math.round(sim.hQ[BUF - 1])}
+                <span className="u">jobs</span>
+              </span>
+            </div>
+            <canvas className="wp-canvas" ref={qRef} />
+          </div>
+          <div className="wp-chart">
+            <div className="ch-hd">
+              <span className="t">
+                <i style={{ background: "var(--cyan)" }} />
+                Latency (p50)
+              </span>
+              <span className="now">
+                {Math.round(sim.hLat[BUF - 1])}
+                <span className="u">ms</span>
+              </span>
+            </div>
+            <canvas className="wp-canvas" ref={latRef} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/styles/demos.css b/docs/app/styles/demos.css
index 89152b91..2baac6a4 100644
--- a/docs/app/styles/demos.css
+++ b/docs/app/styles/demos.css
@@ -511,6 +511,169 @@
   }
 }
 
+/* worker-scaling playground */
+.dm-stage .wp-grid {
+  display: grid;
+  grid-template-columns: 268px 1fr;
+  gap: 0;
+}
+.dm-stage .wp-ctl {
+  padding: 18px 20px;
+  border-right: 1px solid var(--line);
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+.dm-stage .wp-field {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.dm-stage .wp-field .lab {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+.dm-stage .wp-field .lab .n {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--txt2);
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.dm-stage .wp-field .lab .n small {
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--dim);
+}
+.dm-stage .wp-field .lab .val {
+  font-family: var(--code);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--indigo-br);
+  font-variant-numeric: tabular-nums;
+}
+.dm-stage .wp-range {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 5px;
+  background: var(--panel3);
+  outline: none;
+  cursor: pointer;
+  border: 1px solid var(--line);
+}
+.dm-stage .wp-range::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--txt);
+  border: 3px solid var(--panel);
+  box-shadow:
+    0 1px 4px rgba(0, 0, 0, 0.35),
+    0 0 0 1px var(--line3);
+  cursor: pointer;
+}
+.dm-stage .wp-range::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--txt);
+  border: 3px solid var(--panel);
+  box-shadow: 0 0 0 1px var(--line3);
+  cursor: pointer;
+}
+.dm-stage .wp-cap {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--mut);
+  line-height: 1.5;
+  border-top: 1px dashed var(--line2);
+  padding-top: 14px;
+}
+.dm-stage .wp-cap b {
+  color: var(--txt2);
+}
+.dm-stage .wp-cap .verdict {
+  display: block;
+  margin-top: 6px;
+  font-weight: 600;
+}
+.dm-stage .wp-cap .verdict.good {
+  color: var(--grn);
+}
+.dm-stage .wp-cap .verdict.warn {
+  color: var(--amber);
+}
+.dm-stage .wp-cap .verdict.bad {
+  color: var(--red);
+}
+.dm-stage .wp-charts {
+  display: flex;
+  flex-direction: column;
+}
+.dm-stage .wp-chart {
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--line);
+}
+.dm-stage .wp-chart:last-child {
+  border-bottom: 0;
+}
+.dm-stage .wp-chart .ch-hd {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+.dm-stage .wp-chart .ch-hd .t {
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--mut);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.dm-stage .wp-chart .ch-hd .t i {
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+}
+.dm-stage .wp-chart .ch-hd .now {
+  font-family: var(--code);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--txt);
+  font-variant-numeric: tabular-nums;
+}
+.dm-stage .wp-chart .ch-hd .now .u {
+  font-size: 11px;
+  color: var(--mut);
+  font-weight: 500;
+  margin-left: 3px;
+}
+.dm-stage .wp-canvas {
+  width: 100%;
+  height: 84px;
+  display: block;
+}
+@media (max-width: 860px) {
+  .dm-stage .wp-grid {
+    grid-template-columns: 1fr;
+  }
+  .dm-stage .wp-ctl {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+}
+
 /* workflow DAG demo */
 .dm-stage .wf-grid {
   display: grid;

From 472236e09a8ca0a21643b3944c6a2fcb3792ac8e Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:46:26 +0530
Subject: [PATCH 10/14] refactor(docs): delete vendored demos, drop modal
 iframe path

---
 docs/app/components/demos/registry.ts      |  10 +-
 docs/app/components/landing/demo-modal.tsx |  46 +---
 docs/app/styles/landing.css                |   8 -
 docs/public/demos/README.md                |  39 ---
 docs/public/demos/demo-mesh.js             | 238 -----------------
 docs/public/demos/demo-playground.js       | 213 ---------------
 docs/public/demos/demo-ratelimit.js        | 293 ---------------------
 docs/public/demos/demo-recovery.js         | 236 -----------------
 docs/public/demos/demo-saga.js             | 234 ----------------
 docs/public/demos/demo-workflow.js         | 281 --------------------
 docs/public/demos/demo-worksteal.js        | 260 ------------------
 docs/public/demos/favicon.svg              |   1 -
 docs/public/demos/interactive.css          | 261 ------------------
 docs/public/demos/interactive.html         | 283 --------------------
 docs/public/demos/theme.css                | 254 ------------------
 15 files changed, 17 insertions(+), 2640 deletions(-)
 delete mode 100644 docs/public/demos/README.md
 delete mode 100644 docs/public/demos/demo-mesh.js
 delete mode 100644 docs/public/demos/demo-playground.js
 delete mode 100644 docs/public/demos/demo-ratelimit.js
 delete mode 100644 docs/public/demos/demo-recovery.js
 delete mode 100644 docs/public/demos/demo-saga.js
 delete mode 100644 docs/public/demos/demo-workflow.js
 delete mode 100644 docs/public/demos/demo-worksteal.js
 delete mode 100644 docs/public/demos/favicon.svg
 delete mode 100644 docs/public/demos/interactive.css
 delete mode 100644 docs/public/demos/interactive.html
 delete mode 100644 docs/public/demos/theme.css

diff --git a/docs/app/components/demos/registry.ts b/docs/app/components/demos/registry.ts
index 495f4856..fadd066c 100644
--- a/docs/app/components/demos/registry.ts
+++ b/docs/app/components/demos/registry.ts
@@ -5,12 +5,10 @@ type LazyDemo = LazyExoticComponent<ComponentType<DemoProps>>;
 
 /**
  * React ports of the interactive demos, keyed by demo id and lazy-loaded so the
- * homepage bundle stays small. Ids absent here fall back to the vendored
- * `interactive.html` iframe in {@link DemoModal} until ported — see
- * `tasks/react-demos-plan.md`. Once every id is present, the iframe path and
- * `public/demos/` are removed.
+ * homepage bundle stays small. {@link DemoModal} renders the matching component
+ * inside its stage; the type stays partial so an unknown id degrades gracefully.
  */
-export const DEMO_COMPONENTS: Partial<Record<DemoId, LazyDemo>> = {
+export const DEMO_COMPONENTS: Record<DemoId, LazyDemo> = {
   mesh: lazy(() => import("./mesh-demo")),
   ratelimit: lazy(() => import("./ratelimit-demo")),
   recovery: lazy(() => import("./recovery-demo")),
@@ -20,7 +18,7 @@ export const DEMO_COMPONENTS: Partial<Record<DemoId, LazyDemo>> = {
   worksteal: lazy(() => import("./worksteal-demo")),
 };
 
-/** The React port for `id`, or `undefined` if it still uses the iframe. */
+/** The React port for `id`, or `undefined` for an unknown demo id. */
 export function demoComponent(id: string): LazyDemo | undefined {
   return DEMO_COMPONENTS[id as DemoId];
 }
diff --git a/docs/app/components/landing/demo-modal.tsx b/docs/app/components/landing/demo-modal.tsx
index b5b0ff7f..39dd4165 100644
--- a/docs/app/components/landing/demo-modal.tsx
+++ b/docs/app/components/landing/demo-modal.tsx
@@ -46,14 +46,14 @@ const CLOSE_ICON = (
 );
 
 /**
- * Centered overlay that opens a finder scenario's live demo in an `<iframe>`,
- * pointed at the vendored `demos/interactive.html` embed mode (theme inherited
- * from the host). React port of `INTEGRATION-scenario-finder.md` §6: focus moves
- * to the close button on open and restores on close, Escape + backdrop close,
- * background scroll is locked, and the enter transition is motion-aware.
+ * Centered overlay that opens a finder scenario's live demo — a lazy-loaded
+ * React component resolved from the demo registry (theme inherited from the
+ * host). Focus moves to the close button on open and restores on close,
+ * Escape + backdrop close, background scroll is locked, Tab focus is trapped,
+ * and the enter transition is motion-aware.
  *
  * `demo === null` keeps the modal closed; a brief exit transition plays before
- * the iframe unmounts so the demo stops running.
+ * the demo unmounts so its animation loop stops.
  */
 export function DemoModal({
   demo,
@@ -67,7 +67,6 @@ export function DemoModal({
   const [current, setCurrent] = useState<DemoTarget | null>(demo);
   // Drives the `.open` class — toggled a frame after mount so the enter plays.
   const [shown, setShown] = useState(false);
-  const [loading, setLoading] = useState(true);
   const closeRef = useRef<HTMLButtonElement>(null);
   const dialogRef = useRef<HTMLDivElement>(null);
   const restoreRef = useRef<HTMLElement | null>(null);
@@ -76,7 +75,6 @@ export function DemoModal({
     if (demo) {
       restoreRef.current = (document.activeElement as HTMLElement) ?? null;
       setCurrent(demo);
-      setLoading(true);
       const raf = requestAnimationFrame(() => setShown(true));
       return () => cancelAnimationFrame(raf);
     }
@@ -136,10 +134,7 @@ export function DemoModal({
 
   if (!current) return null;
 
-  // Prefer the React port; ids not yet ported render the vendored iframe.
   const Demo = demoComponent(current.id);
-  // `import.meta.env.BASE_URL` ends with "/" and respects DOCS_BASE_PATH.
-  const src = `${import.meta.env.BASE_URL}demos/interactive.html?embed=${current.id}&theme=${theme}&accent=brand#${current.id}`;
 
   return (
     <div className={`dm-overlay${shown ? " open" : ""}`} aria-hidden={!shown}>
@@ -178,31 +173,16 @@ export function DemoModal({
           </div>
         </div>
         <div className="dm-stage">
-          {Demo ? (
-            <Suspense
-              fallback={
-                <div className="dm-loading">
-                  <span className="dm-spin" />
-                  Loading demo…
-                </div>
-              }
-            >
-              <Demo theme={theme} />
-            </Suspense>
-          ) : (
-            <>
-              <div className={`dm-loading${loading ? "" : " hide"}`}>
+          <Suspense
+            fallback={
+              <div className="dm-loading">
                 <span className="dm-spin" />
                 Loading demo…
               </div>
-              <iframe
-                className="dm-frame"
-                title={`${current.title} — interactive demo`}
-                src={src}
-                onLoad={() => setLoading(false)}
-              />
-            </>
-          )}
+            }
+          >
+            {Demo ? <Demo theme={theme} /> : null}
+          </Suspense>
         </div>
       </div>
     </div>
diff --git a/docs/app/styles/landing.css b/docs/app/styles/landing.css
index 82aceb07..c1b462d8 100644
--- a/docs/app/styles/landing.css
+++ b/docs/app/styles/landing.css
@@ -1880,14 +1880,6 @@ main {
   background: var(--bg);
   min-height: 0;
 }
-.dm-frame {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  border: 0;
-  background: var(--bg);
-}
 .dm-loading {
   position: absolute;
   inset: 0;
diff --git a/docs/public/demos/README.md b/docs/public/demos/README.md
deleted file mode 100644
index 530c0474..00000000
--- a/docs/public/demos/README.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# Interactive demos (vendored static micro-app)
-
-These files power the **live demos** the homepage scenario finder opens in a modal
-(`app/components/landing/demo-modal.tsx`). They are a self-contained vanilla
-HTML/CSS/JS micro-app, served verbatim as static assets and loaded into an
-`<iframe>` in **embed mode**:
-
-```text
-/demos/interactive.html?embed=<demoId>&theme=<light|dark>&accent=brand#<demoId>
-```
-
-The modal is the only entry point, so `interactive.html` carries no standalone
-page chrome — it is purely the embed host. The inline bootstrap keeps only the
-requested demo and inherits the host theme.
-
-`demoId` ∈ `ratelimit · recovery · scaling · workflow · mesh · saga · worksteal`.
-
-## Provenance
-
-Copied from the design sign-off package `Taskito docs design 2/taskito/`. **Edits
-on import, all in `interactive.html`:**
-
-1. Removed the `<script src="landing.js">` (nav/theme-toggle) and
-   `<script src="search.js">` (⌘K palette) tags — chrome-only, unused in embed.
-2. Since `landing.js` also ran the scroll-reveal observer, the embed bootstrap now
-   adds `.in` to the shown demo's `.reveal` children directly (they default to
-   `opacity:0`), so the demo is visible without that observer.
-3. Removed the page chrome (nav, hero, CTA, footer, capability probe) — the
-   homepage modal loads this file only in embed mode, so the standalone page was
-   dead weight.
-
-The demo sections and `demo-*.js` are otherwise verbatim. To update a demo,
-re-copy the matching `demo-*.js` from the source package.
-
-## Files
-- `interactive.html` — demo host page + embed-mode bootstrap
-- `theme.css`, `interactive.css` — design tokens + demo styles
-- `demo-{ratelimit,recovery,playground,workflow,mesh,saga,worksteal}.js` — one per demo
-- `favicon.svg`
diff --git a/docs/public/demos/demo-mesh.js b/docs/public/demos/demo-mesh.js
deleted file mode 100644
index 540e847c..00000000
--- a/docs/public/demos/demo-mesh.js
+++ /dev/null
@@ -1,238 +0,0 @@
-/* ============================================================
-   taskito · Demo 05 — Mesh scheduling
-   Jobs carry a routing key; the brokerless mesh sends each to a
-   worker pool built to run it (gpu / default / email). Click a
-   machine to drop it and watch its work reroute across the mesh.
-   Tier-1: SVG + requestAnimationFrame. No WebGL.
-   ============================================================ */
-(function(){
-  var root=document.getElementById('mesh-root');
-  if(!root) return;
-
-  var W=940,H=330;
-  var DISP={x:92,y:165};
-  var EX=430;                 // pool entry x
-  var SPEED=560;
-  var POOLS=[
-    {key:'gpu',     label:'gpu · render',  col:'var(--cyan)',      y:60,  n:2, dur:1650},
-    {key:'default', label:'default · web', col:'var(--indigo-br)', y:165, n:3, dur:900},
-    {key:'email',   label:'email · notify',col:'var(--amber)',     y:270, n:2, dur:720}
-  ];
-  var NX0=560, NSTEP=128, NW=104, NH=46;
-  var WEIGHT={gpu:0.24, default:0.52, email:0.24};
-
-  // build node models
-  POOLS.forEach(function(p){
-    p.nodes=[]; p.wait=[];
-    for(var i=0;i<p.n;i++) p.nodes.push({x:NX0+i*NSTEP, y:p.y, busy:null, off:false, pip:null, rect:null, xg:null, g:null});
-  });
-  var metrics={routed:0, rerouted:0};
-
-  // ---- DOM ----
-  root.innerHTML=
-  '<div class="demo-bar">'+
-    '<span class="title"><span class="ld"></span>worker-mesh · live</span>'+
-    '<div class="demo-controls">'+
-      '<span class="mesh-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17v.01M12 13.5a2 2 0 0 0 .914-3.782 1.98 1.98 0 0 0-2.414.483"/><circle cx="12" cy="12" r="9"/></svg>click a machine to drop it</span>'+
-      '<button class="ctl pri" id="mesh-burst"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>Send burst (6)</button>'+
-    '</div>'+
-  '</div>'+
-  '<div class="stage"><svg id="mesh-svg" viewBox="0 0 '+W+' '+H+'" role="img" aria-label="Mesh scheduling: jobs leave a dispatcher and route by key to one of three worker pools — gpu, default, and email. Click a worker to take it offline and its jobs reroute to the rest of its pool.">'+
-    '<defs><marker id="mesh-ar" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M1 1 L9 5 L1 9" fill="none" stroke="var(--line3)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></marker></defs>'+
-    '<g id="mesh-wires"></g>'+
-    // dispatcher
-    '<g><rect x="36" y="133" width="112" height="64" rx="13" fill="var(--panel3)" stroke="var(--line2)"/>'+
-      '<text x="92" y="159" text-anchor="middle" font-family="var(--mono)" font-size="11" fill="var(--mut)">dispatcher</text>'+
-      '<text x="92" y="178" text-anchor="middle" font-family="var(--code)" font-size="11" font-weight="600" fill="var(--txt2)">route()</text></g>'+
-    '<g id="mesh-pools"></g>'+
-    '<g id="mesh-tokens"></g>'+
-  '</svg></div>'+
-  '<div class="legend">'+
-    '<span><i style="background:var(--cyan)"></i>gpu job</span>'+
-    '<span><i style="background:var(--indigo-br)"></i>default job</span>'+
-    '<span><i style="background:var(--amber)"></i>email job</span>'+
-    '<span><i style="background:var(--grn)"></i>worker busy</span>'+
-    '<span><i style="background:var(--dim)"></i>offline</span>'+
-  '</div>'+
-  '<div class="readout">'+
-    stat('nodes online','mesh-online')+stat('routing','mesh-flight')+stat('waiting','mesh-wait','warn')+
-    stat('routed','mesh-routed','good')+stat('rerouted','mesh-reroute')+
-  '</div>';
-
-  function stat(k,id,cls){ return '<div class="stat"><span class="k">'+k+'</span><span class="v'+(cls?' '+cls:'')+'" id="'+id+'">0</span></div>'; }
-  function el(id){ return document.getElementById(id); }
-  var SVGNS='http://www.w3.org/2000/svg';
-
-  // ---- wires + pools render ----
-  var gWires=el('mesh-wires'), gPools=el('mesh-pools'), gTok=el('mesh-tokens');
-  POOLS.forEach(function(p){
-    // dispatcher → entry
-    var mx=(148+EX)/2;
-    addPath('M148 165 C '+mx+' 165, '+mx+' '+p.y+', '+EX+' '+p.y, 'var(--line2)', true);
-    // pool lane chip
-    var chip=document.createElementNS(SVGNS,'g');
-    chip.innerHTML='<rect x="300" y="'+(p.y-15)+'" width="120" height="30" rx="9" fill="var(--panel)" stroke="'+p.col+'" opacity="1"/>'+
-      '<rect x="300" y="'+(p.y-15)+'" width="120" height="30" rx="9" fill="none" stroke="color-mix(in oklch,'+p.col+' 40%,transparent)"/>'+
-      '<circle cx="316" cy="'+p.y+'" r="4" fill="'+p.col+'"/>'+
-      '<text x="328" y="'+(p.y+4)+'" font-family="var(--mono)" font-size="11" fill="var(--txt2)">'+p.label+'</text>';
-    gPools.appendChild(chip);
-    p.nodes.forEach(function(node){
-      addPath('M420 '+p.y+' H '+(node.x-NW/2), 'var(--line2)', false);
-      var g=document.createElementNS(SVGNS,'g'); g.setAttribute('class','mesh-node'); g.style.cursor='pointer';
-      g.setAttribute('tabindex','0'); g.setAttribute('role','button'); g.setAttribute('aria-pressed','false'); g.setAttribute('aria-label',p.key+' worker — click to toggle offline');
-      var rect=document.createElementNS(SVGNS,'rect');
-      rect.setAttribute('x',node.x-NW/2); rect.setAttribute('y',node.y-NH/2); rect.setAttribute('width',NW); rect.setAttribute('height',NH);
-      rect.setAttribute('rx','11'); rect.setAttribute('fill','var(--panel2)'); rect.setAttribute('stroke','var(--line2)');
-      var pip=document.createElementNS(SVGNS,'circle');
-      pip.setAttribute('cx',node.x+NW/2-13); pip.setAttribute('cy',node.y-NH/2+13); pip.setAttribute('r','4'); pip.setAttribute('fill','var(--dim)');
-      var t=document.createElementNS(SVGNS,'text');
-      t.setAttribute('x',node.x-NW/2+12); t.setAttribute('y',node.y+4); t.setAttribute('font-family','var(--code)'); t.setAttribute('font-size','11');
-      t.setAttribute('font-weight','600'); t.setAttribute('fill','var(--txt2)'); t.textContent=p.key+'-'+(p.nodes.indexOf(node)+1);
-      var xg=document.createElementNS(SVGNS,'path');
-      xg.setAttribute('d','M'+(node.x-9)+' '+(node.y-9)+' l18 18 M'+(node.x+9)+' '+(node.y-9)+' l-18 18');
-      xg.setAttribute('stroke','var(--red)'); xg.setAttribute('stroke-width','2'); xg.setAttribute('stroke-linecap','round'); xg.setAttribute('opacity','0');
-      g.appendChild(rect); g.appendChild(pip); g.appendChild(t); g.appendChild(xg);
-      gPools.appendChild(g);
-      node.rect=rect; node.pip=pip; node.xg=xg; node.g=g; node.pool=p;
-      g.addEventListener('click',function(){ toggleNode(node); });
-      g.addEventListener('keydown',function(e){ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); toggleNode(node); } });
-    });
-  });
-  function addPath(d,stroke,arrow){
-    var pth=document.createElementNS(SVGNS,'path');
-    pth.setAttribute('d',d); pth.setAttribute('fill','none'); pth.setAttribute('stroke',stroke);
-    pth.setAttribute('stroke-width','2'); pth.setAttribute('stroke-dasharray','2 7'); pth.setAttribute('stroke-linecap','round');
-    if(arrow) pth.setAttribute('marker-end','url(#mesh-ar)');
-    gWires.appendChild(pth);
-  }
-
-  // ---- tokens ----
-  var tokens=[];
-  function poolByKey(k){ return POOLS.filter(function(p){return p.key===k;})[0]; }
-  function pickKey(){ var r=Math.random(); if(r<WEIGHT.gpu) return 'gpu'; if(r<WEIGHT.gpu+WEIGHT.default) return 'default'; return 'email'; }
-
-  function emit(n){
-    for(var i=0;i<n;i++){
-      if(tokens.length>34) break;
-      var key=pickKey(), p=poolByKey(key);
-      var t={key:key,pool:p,x:DISP.x+22,y:DISP.y+(Math.random()*16-8),r:6,node:null,phase:'toentry',tx:EX,ty:p.y,pUntil:0};
-      var c=document.createElementNS(SVGNS,'circle'); c.setAttribute('r','6'); c.style.fill=p.col; t.el=c; gTok.appendChild(c);
-      tokens.push(t);
-    }
-  }
-
-  function freeNode(p){ for(var i=0;i<p.nodes.length;i++){ var nd=p.nodes[i]; if(!nd.off && !nd.busy) return nd; } return null; }
-  function assignPool(p){
-    var nd;
-    while(p.wait.length && (nd=freeNode(p))){
-      var t=p.wait.shift(); nd.busy=t; t.node=nd; t.phase='tonode'; t.tx=nd.x; t.ty=nd.y;
-    }
-  }
-  function arriveEntry(t){
-    var nd=freeNode(t.pool);
-    if(nd){ nd.busy=t; t.node=nd; t.phase='tonode'; t.tx=nd.x; t.ty=nd.y; }
-    else { t.phase='waiting'; var idx=t.pool.wait.length; t.pool.wait.push(t); t.tx=445; t.ty=t.pool.y-20+idx*13; }
-  }
-
-  function toggleNode(node){
-    node.off=!node.off;
-    if(node.off && node.busy){
-      var t=node.busy; node.busy=null;
-      // requeue to front, reroute
-      metrics.rerouted++;
-      t.node=null; t.phase='waiting'; node.pool.wait.unshift(t); t.tx=445; t.ty=node.pool.y-20;
-    }
-    paintNode(node);
-    if(!node.off) assignPool(node.pool);
-    if(motionOff()) staticRender();
-  }
-
-  function paintNode(nd){
-    // Mirror online/offline into ARIA: pressed === taken offline.
-    nd.g.setAttribute('aria-pressed', nd.off?'true':'false');
-    nd.g.setAttribute('aria-label', nd.pool.key+' worker — '+(nd.off?'offline, click to bring online':'online, click to take offline'));
-    if(nd.off){
-      nd.rect.setAttribute('fill','var(--panel)'); nd.rect.setAttribute('stroke','var(--line2)');
-      nd.rect.setAttribute('stroke-dasharray','3 5'); nd.pip.setAttribute('fill','var(--dim)'); nd.xg.setAttribute('opacity','.8');
-      nd.g.style.opacity='.55';
-    } else {
-      nd.rect.setAttribute('stroke-dasharray',''); nd.xg.setAttribute('opacity','0'); nd.g.style.opacity='1';
-      if(nd.busy){
-        nd.rect.setAttribute('fill','color-mix(in oklch,'+nd.pool.col+' 16%,transparent)');
-        nd.rect.setAttribute('stroke','color-mix(in oklch,'+nd.pool.col+' 50%,transparent)');
-        nd.pip.setAttribute('fill','var(--grn)');
-      } else {
-        nd.rect.setAttribute('fill','var(--panel2)'); nd.rect.setAttribute('stroke','var(--line2)');
-        nd.pip.setAttribute('fill','var(--dim)');
-      }
-    }
-  }
-
-  function step(now,dt){
-    if(!motionOff()){ emitAcc+=dt; if(emitAcc>880){ emitAcc=0; if(tokens.length<26) emit(1); } }
-    var move=SPEED*dt/1000;
-    // re-stack waiting tokens
-    POOLS.forEach(function(p){ p.wait.forEach(function(t,i){ t.tx=445; t.ty=p.y-20+i*13; }); assignPool(p); });
-    for(var i=tokens.length-1;i>=0;i--){
-      var t=tokens[i], dx=t.tx-t.x, dy=t.ty-t.y, d=Math.hypot(dx,dy);
-      if(d>0.5){ var s=Math.min(move,d); t.x+=dx/d*s; t.y+=dy/d*s; }
-      var arrived=d<2.5;
-      switch(t.phase){
-        case 'toentry': if(arrived) arriveEntry(t); break;
-        case 'tonode': if(arrived){ t.phase='processing'; t.pUntil=now+t.pool.dur*(0.82+Math.random()*0.4); } break;
-        case 'processing':
-          if(now>=t.pUntil){ var nd=t.node; if(nd){ nd.busy=null; paintNode(nd); assignPool(t.pool); } metrics.routed++; t.phase='done'; t.tx=W+30; t.ty=t.y; }
-          break;
-        case 'done': if(t.x>W+20){ rm(t,i); } break;
-      }
-      if(t.el){ t.el.setAttribute('cx',t.x.toFixed(1)); t.el.setAttribute('cy',t.y.toFixed(1));
-        t.el.setAttribute('r', t.phase==='processing'?'6.5':'6');
-        t.el.style.opacity = t.phase==='waiting'?'0.8':'1'; }
-    }
-    POOLS.forEach(function(p){ p.nodes.forEach(paintNode); });
-    paintStats();
-  }
-  function rm(t,i){ if(t.el&&t.el.parentNode) t.el.parentNode.removeChild(t.el); tokens.splice(i,1); }
-
-  function paintStats(){
-    var online=0,total=0,busy=0,waiting=0;
-    POOLS.forEach(function(p){ p.nodes.forEach(function(nd){ total++; if(!nd.off) online++; if(nd.busy) busy++; }); waiting+=p.wait.length; });
-    var flight=tokens.filter(function(t){return t.phase==='toentry'||t.phase==='tonode';}).length;
-    setTxt('mesh-online',online+' / '+total);
-    setTxt('mesh-flight',flight+busy);
-    var w=el('mesh-wait'); w.textContent=waiting; w.className='v '+(waiting>0?'warn':'');
-    setTxt('mesh-routed',metrics.routed);
-    var r=el('mesh-reroute'); r.textContent=metrics.rerouted; r.className='v '+(metrics.rerouted>0?'bad':'');
-  }
-  function setTxt(id,v){ el(id).textContent=v; }
-
-  // ---- controls / motion ----
-  function motionOff(){ return window.__motionOff || (window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches); }
-  el('mesh-burst').addEventListener('click',function(){ emit(6); if(motionOff()) staticRender(); });
-
-  var emitAcc=0,last=0,raf=null;
-  function loop(now){ if(!last) last=now; var dt=Math.min(now-last,60); last=now; step(now,dt); raf=requestAnimationFrame(loop); }
-  function start(){ if(raf) return; last=0; raf=requestAnimationFrame(loop); }
-  function stop(){ if(raf){ cancelAnimationFrame(raf); raf=null; } }
-
-  function staticRender(){
-    POOLS.forEach(function(p){ p.wait.forEach(function(t,i){ t.x=445; t.y=p.y-20+i*13; }); assignPool(p);
-      p.nodes.forEach(function(nd){ if(nd.busy){ nd.busy.x=nd.x; nd.busy.y=nd.y; nd.busy.phase='processing'; } paintNode(nd); }); });
-    tokens.forEach(function(t){ if(t.el){ t.el.setAttribute('cx',t.x.toFixed(1)); t.el.setAttribute('cy',t.y.toFixed(1)); } });
-    paintStats();
-  }
-  function seedStatic(){
-    emit(7);
-    tokens.forEach(function(t){ t.x=EX; t.y=t.pool.y; arriveEntry(t); });
-    staticRender();
-  }
-
-  window.__taskitoDemos=window.__taskitoDemos||{};
-  var pm=window.__taskitoDemos.motion, pr=window.__taskitoDemos.recolor;
-  window.__taskitoDemos.motion=function(off){ if(pm)pm(off); if(off){ stop(); staticRender(); } else { start(); } };
-  window.__taskitoDemos.recolor=function(){ if(pr)pr(); POOLS.forEach(function(p){ p.nodes.forEach(paintNode); }); };
-
-  POOLS.forEach(function(p){ p.nodes.forEach(paintNode); });
-  if(motionOff()){ seedStatic(); }
-  else { emit(3); start(); }
-})();
diff --git a/docs/public/demos/demo-playground.js b/docs/public/demos/demo-playground.js
deleted file mode 100644
index 980e0d7e..00000000
--- a/docs/public/demos/demo-playground.js
+++ /dev/null
@@ -1,213 +0,0 @@
-/* ============================================================
-   taskito · Demo 03 — Worker scaling playground
-   Sliders drive a stochastic queue simulation; throughput,
-   queue-depth and latency charts respond live on Canvas 2D.
-   Tier-1: Canvas 2D + requestAnimationFrame. No WebGL.
-   ============================================================ */
-(function(){
-  var root=document.getElementById('wp-root');
-  if(!root) return;
-
-  var P={ workers:4, conc:2, lambda:18, jobMs:300, rate:0 }; // rate 0 = off
-  var FIELDS=[
-    {k:'workers', n:'Workers', sub:'pool size',     min:1, max:12, step:1, fmt:function(v){return v;}},
-    {k:'conc',    n:'Concurrency', sub:'per worker', min:1, max:8,  step:1, fmt:function(v){return '×'+v;}},
-    {k:'lambda',  n:'Arrival rate', sub:'jobs / s',  min:1, max:80, step:1, fmt:function(v){return v+'/s';}},
-    {k:'jobMs',   n:'Avg job time', sub:'milliseconds',min:50, max:1200, step:25, fmt:function(v){return v+'ms';}},
-    {k:'rate',    n:'Rate limit', sub:'0 = unlimited',min:0, max:60, step:2, fmt:function(v){return v===0?'off':v+'/s';}}
-  ];
-
-  root.innerHTML=
-  '<div class="demo-bar">'+
-    '<span class="title"><span class="ld"></span>worker-pool · simulation</span>'+
-    '<div class="demo-controls">'+
-      '<button class="ctl" id="wp-reset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>Reset</button>'+
-    '</div>'+
-  '</div>'+
-  '<div class="wp-grid">'+
-    '<div class="wp-ctl" id="wp-fields"></div>'+
-    '<div class="wp-charts">'+
-      chart('throughput','Throughput','wp-c-thr','wp-v-thr','/s','var(--indigo-br)')+
-      chart('queue','Queue depth','wp-c-q','wp-v-q','jobs','var(--amber)')+
-      chart('latency','Latency (p50)','wp-c-lat','wp-v-lat','ms','var(--cyan)')+
-    '</div>'+
-  '</div>';
-
-  function chart(id,title,cid,vid,unit,col){
-    return '<div class="wp-chart"><div class="ch-hd"><span class="t"><i style="background:'+col+'"></i>'+title+'</span>'+
-      '<span class="now" id="'+vid+'">0<span class="u">'+unit+'</span></span></div>'+
-      '<canvas class="wp-canvas" id="'+cid+'"></canvas></div>';
-  }
-
-  // ---- build sliders ----
-  var fieldsEl=document.getElementById('wp-fields');
-  FIELDS.forEach(function(f){
-    var wrap=document.createElement('div'); wrap.className='wp-field';
-    wrap.innerHTML='<div class="lab"><span class="n">'+f.n+' <small>'+f.sub+'</small></span><span class="val" id="wp-val-'+f.k+'">'+f.fmt(P[f.k])+'</span></div>'+
-      '<input type="range" class="wp-range" id="wp-rg-'+f.k+'" min="'+f.min+'" max="'+f.max+'" step="'+f.step+'" value="'+P[f.k]+'" aria-label="'+f.n+'">';
-    fieldsEl.appendChild(wrap);
-    var rg=wrap.querySelector('input');
-    rg.addEventListener('input',function(){
-      P[f.k]=+rg.value;
-      document.getElementById('wp-val-'+f.k).textContent=f.fmt(P[f.k]);
-      if(motionOff()) staticEval();
-    });
-  });
-  var capEl=document.createElement('div'); capEl.className='wp-cap'; capEl.id='wp-cap'; fieldsEl.appendChild(capEl);
-
-  document.getElementById('wp-reset').addEventListener('click',function(){
-    P={workers:4,conc:2,lambda:18,jobMs:300,rate:0};
-    FIELDS.forEach(function(f){ var rg=document.getElementById('wp-rg-'+f.k); rg.value=P[f.k]; document.getElementById('wp-val-'+f.k).textContent=f.fmt(P[f.k]); });
-    N=0; reseed(); if(motionOff()) staticEval();
-  });
-
-  // ---- simulation ----
-  var N=0;            // jobs in system
-  var tokens=0;       // rate-limit token bucket
-  var thrEMA=0, latEMA=0;
-  var BUF=170;
-  var hThr=new Array(BUF).fill(0), hQ=new Array(BUF).fill(0), hLat=new Array(BUF).fill(0);
-
-  function poisson(mean){ // small-mean sampler (Knuth)
-    if(mean<=0) return 0;
-    if(mean>30) return Math.max(0,Math.round(mean+Math.sqrt(mean)*gauss()));
-    var L=Math.exp(-mean),k=0,p=1;
-    do{ k++; p*=Math.random(); }while(p>L);
-    return k-1;
-  }
-  function gauss(){ var u=Math.random(),v=Math.random(); return Math.sqrt(-2*Math.log(u||1e-9))*Math.cos(6.283185*v); }
-
-  function stepSim(dt){
-    var C=P.workers*P.conc;
-    var inService=Math.min(N,C);
-    // arrivals
-    var arr=poisson(P.lambda*dt);
-    N+=arr;
-    inService=Math.min(N,C);
-    // rate-limit bucket
-    var rl=P.rate>0;
-    if(rl){ tokens=Math.min(P.rate, tokens+P.rate*dt); }
-    // service completions ~ inService * dt / jobTime
-    var svcMean=inService*dt/(P.jobMs/1000);
-    var done=poisson(svcMean);
-    done=Math.min(done, N);
-    if(rl){ done=Math.min(done, Math.floor(tokens)); tokens-=done; }
-    N-=done;
-    // metrics
-    var inst=dt>0?done/dt:0; // jobs/s this step
-    thrEMA=thrEMA+(inst-thrEMA)*Math.min(1,dt*3.2);
-    var q=Math.max(0,N-C);
-    var lat = thrEMA>0.2 ? (N/thrEMA)*1000 : (N>0? 9000 : 0); // Little's law, ms
-    latEMA=latEMA+(lat-latEMA)*Math.min(1,dt*2.2);
-    push(thrEMA,q,latEMA);
-  }
-  function push(t,q,l){ hThr.push(t);hThr.shift(); hQ.push(q);hQ.shift(); hLat.push(l);hLat.shift(); }
-  function reseed(){ hThr=new Array(BUF).fill(0);hQ=new Array(BUF).fill(0);hLat=new Array(BUF).fill(0);thrEMA=0;latEMA=0;tokens=P.rate; }
-
-  // ---- chart drawing ----
-  var cv={thr:cvs('wp-c-thr'),q:cvs('wp-c-q'),lat:cvs('wp-c-lat')};
-  function cvs(id){ var c=document.getElementById(id); return {c:c,ctx:c.getContext('2d'),w:0,h:0}; }
-  var probe=document.createElement('span'); probe.style.cssText='position:absolute;opacity:0;pointer-events:none'; document.body.appendChild(probe);
-  function rgb(varexpr){ probe.style.color=varexpr; return getComputedStyle(probe).color; }
-  var COLORS={};
-  function refreshColors(){
-    COLORS={ thr:rgb('var(--indigo-br)'), q:rgb('var(--amber)'), lat:rgb('var(--cyan)'),
-             grid:rgb('var(--line)'), txt:rgb('var(--dim)') };
-  }
-  function sizeCanvas(o){
-    var dpr=Math.min(2,window.devicePixelRatio||1);
-    var w=o.c.clientWidth, h=o.c.clientHeight||84;
-    o.w=w; o.h=h; o.c.width=w*dpr; o.c.height=h*dpr; o.ctx.setTransform(dpr,0,0,dpr,0,0);
-  }
-  function sizeAll(){ sizeCanvas(cv.thr);sizeCanvas(cv.q);sizeCanvas(cv.lat); }
-
-  function drawChart(o,data,color,yMin,yMaxFloor){
-    var ctx=o.ctx,w=o.w,h=o.h; ctx.clearRect(0,0,w,h);
-    var pad=6, gh=h-pad*2;
-    var max=yMaxFloor;
-    for(var i=0;i<data.length;i++){ if(data[i]>max) max=data[i]; }
-    max=max*1.18+0.001;
-    // baseline grid
-    ctx.strokeStyle=COLORS.grid; ctx.lineWidth=1;
-    ctx.beginPath(); ctx.moveTo(0,h-pad); ctx.lineTo(w,h-pad); ctx.stroke();
-    ctx.beginPath(); ctx.moveTo(0,pad); ctx.lineTo(w,pad); ctx.globalAlpha=.5; ctx.stroke(); ctx.globalAlpha=1;
-    var n=data.length, dx=w/(n-1);
-    function X(i){return i*dx;} function Y(v){return pad+gh-(Math.min(v,max)/max)*gh;}
-    // fill
-    ctx.beginPath(); ctx.moveTo(0,h-pad);
-    for(var i=0;i<n;i++){ ctx.lineTo(X(i),Y(data[i])); }
-    ctx.lineTo(w,h-pad); ctx.closePath();
-    var grad=ctx.createLinearGradient(0,pad,0,h);
-    grad.addColorStop(0,withAlpha(color,.30)); grad.addColorStop(1,withAlpha(color,.02));
-    ctx.fillStyle=grad; ctx.fill();
-    // line
-    ctx.beginPath();
-    for(var i=0;i<n;i++){ var x=X(i),y=Y(data[i]); i?ctx.lineTo(x,y):ctx.moveTo(x,y); }
-    ctx.strokeStyle=color; ctx.lineWidth=2; ctx.lineJoin='round'; ctx.stroke();
-    // head dot
-    var hx=X(n-1),hy=Y(data[n-1]);
-    ctx.beginPath(); ctx.arc(hx,hy,3,0,6.2832); ctx.fillStyle=color; ctx.fill();
-    ctx.beginPath(); ctx.arc(hx,hy,5.5,0,6.2832); ctx.strokeStyle=withAlpha(color,.4); ctx.lineWidth=1.5; ctx.stroke();
-  }
-  function withAlpha(rgbStr,a){ var m=rgbStr.match(/\d+/g); if(!m) return rgbStr; return 'rgba('+m[0]+','+m[1]+','+m[2]+','+a+')'; }
-
-  function drawAll(){
-    drawChart(cv.thr,hThr,COLORS.thr,0,8);
-    drawChart(cv.q,hQ,COLORS.q,0,6);
-    drawChart(cv.lat,hLat,COLORS.lat,0,400);
-    // readouts
-    setV('wp-v-thr', hThr[BUF-1].toFixed(1), '/s');
-    setV('wp-v-q', Math.round(hQ[BUF-1]), 'jobs');
-    setV('wp-v-lat', Math.round(hLat[BUF-1]), 'ms');
-    paintCap();
-  }
-  function setV(id,val,u){ var e=document.getElementById(id); e.innerHTML=val+'<span class="u">'+u+'</span>'; }
-
-  function paintCap(){
-    var C=P.workers*P.conc;
-    var svcCap=C/(P.jobMs/1000);
-    var cap=P.rate>0?Math.min(svcCap,P.rate):svcCap;
-    var verdict,vcls;
-    if(cap>=P.lambda*1.12){ verdict='Keeping up — pool has headroom.'; vcls='good'; }
-    else if(cap>=P.lambda*0.97){ verdict='Saturated — running near capacity.'; vcls='warn'; }
-    else { verdict='Overloaded — queue is growing.'; vcls='bad'; }
-    capEl.innerHTML='<b>'+C+'</b> in-flight slots · capacity <b>≈'+cap.toFixed(0)+'/s</b> vs demand <b>'+P.lambda+'/s</b>'+
-      (P.rate>0?' · capped at '+P.rate+'/s':'')+
-      '<span class="verdict '+vcls+'">'+verdict+'</span>';
-  }
-
-  // ---- loop ----
-  function motionOff(){ return window.__motionOff || (window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches); }
-  var raf=null,last=0;
-  function loop(now){
-    if(!last) last=now; var dt=Math.min((now-last)/1000,0.05); last=now;
-    var sub=2; for(var i=0;i<sub;i++) stepSim(dt/sub*1.6);
-    drawAll();
-    raf=requestAnimationFrame(loop);
-  }
-  function start(){ if(raf||motionOff()) return; last=0; raf=requestAnimationFrame(loop); }
-  function stop(){ if(raf){cancelAnimationFrame(raf);raf=null;} }
-
-  function staticEval(){
-    // fill buffers with steady-ish snapshot (no animation)
-    reseed();
-    for(var i=0;i<260;i++) stepSim(0.1);
-    refreshColors(); sizeAll(); drawAll();
-  }
-
-  window.addEventListener('resize',function(){ sizeAll(); refreshColors(); drawAll(); });
-
-  window.__taskitoDemos=window.__taskitoDemos||{};
-  var pm=window.__taskitoDemos.motion, pr=window.__taskitoDemos.recolor;
-  window.__taskitoDemos.motion=function(off){ if(pm)pm(off); if(off){ stop(); staticEval(); } else { reseed(); start(); } };
-  window.__taskitoDemos.recolor=function(){ if(pr)pr(); refreshColors(); drawAll(); };
-  // theme flips → recolor
-  new MutationObserver(function(){ refreshColors(); drawAll(); }).observe(document.documentElement,{attributes:true,attributeFilter:['data-theme']});
-
-  // init
-  requestAnimationFrame(function(){
-    sizeAll(); refreshColors();
-    if(motionOff()){ staticEval(); }
-    else { reseed(); tokens=P.rate; start(); }
-  });
-})();
diff --git a/docs/public/demos/demo-ratelimit.js b/docs/public/demos/demo-ratelimit.js
deleted file mode 100644
index e53786d8..00000000
--- a/docs/public/demos/demo-ratelimit.js
+++ /dev/null
@@ -1,293 +0,0 @@
-/* ============================================================
-   taskito · Demo 01 — API rate limiting
-   Request -> Queue -> Workers -> External API, with 429 + backoff.
-   Tier-1: SVG + requestAnimationFrame. No WebGL.
-   ============================================================ */
-(function(){
-  var root=document.getElementById('rl-root');
-  if(!root) return;
-
-  var W=960,H=300,CY=152;
-  var NWORK=5;
-  var PROC=1050, BACKOFF_BASE=620, MAX_RETRY=4, SPEED=560;
-  var SPAWN_MS=1000, QCAP=12;
-
-  // worker slot anchors
-  var slots=[];
-  for(var i=0;i<NWORK;i++){ slots.push({x:622, y:86+i*38, busy:null}); }
-  var PRO={x:90,y:CY}, QBOX={x:286,w:108,y:CY}, API={x:862,y:CY};
-
-  // ---- build DOM ----
-  root.innerHTML =
-  '<div class="demo-bar">'+
-    '<span class="title"><span class="ld"></span>rate-limit · live</span>'+
-    '<div class="demo-controls">'+
-      '<button class="ctl pri" id="rl-burst"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>Send burst (8)</button>'+
-      '<div class="seg" id="rl-api" role="group" aria-label="External API status">'+
-        '<button data-v="ok" class="good" data-on="1"><span class="dot"></span>API: 200 OK</button>'+
-        '<button data-v="429" class="bad" data-on="0"><span class="dot"></span>API: 429</button>'+
-      '</div>'+
-    '</div>'+
-  '</div>'+
-  '<div class="stage"><svg id="rl-svg" viewBox="0 0 '+W+' '+H+'" role="img" aria-label="Animated pipeline: requests move from your code into a queue, are picked up by a pool of workers, and call an external API. When the API returns 429, calls fail and retry with exponential backoff.">'+
-    '<defs>'+
-      '<marker id="rl-ar" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M1 1 L9 5 L1 9" fill="none" stroke="var(--line3)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></marker>'+
-    '</defs>'+
-    // guide wires
-    '<path d="M150 152 H286" fill="none" stroke="var(--line2)" stroke-width="2" stroke-dasharray="2 7" stroke-linecap="round" marker-end="url(#rl-ar)"/>'+
-    '<path d="M394 152 H560" fill="none" stroke="var(--line2)" stroke-width="2" stroke-dasharray="2 7" stroke-linecap="round" marker-end="url(#rl-ar)"/>'+
-    '<path d="M690 152 H800" fill="none" stroke="var(--line2)" stroke-width="2" stroke-dasharray="2 7" stroke-linecap="round" marker-end="url(#rl-ar)"/>'+
-    // retry return curve
-    '<path id="rl-retpath" d="M862 196 C 862 270, 340 286, 300 244" fill="none" stroke="color-mix(in oklch,var(--red) 45%,transparent)" stroke-width="2" stroke-dasharray="2 7" stroke-linecap="round" opacity="0"/>'+
-    '<text x="560" y="284" text-anchor="middle" id="rl-retlbl" font-family="var(--mono)" font-size="11" fill="var(--red)" opacity="0">retry · exponential backoff</text>'+
-    // producer box
-    '<g><rect x="30" y="120" width="120" height="64" rx="13" fill="var(--panel3)" stroke="var(--line2)"/>'+
-      '<text x="90" y="146" text-anchor="middle" font-family="var(--mono)" font-size="11" fill="var(--mut)">your code</text>'+
-      '<text x="90" y="165" text-anchor="middle" font-family="var(--code)" font-size="12" font-weight="600" fill="var(--txt2)">.delay()</text></g>'+
-    // queue box
-    '<g><rect x="280" y="86" width="120" height="132" rx="13" fill="var(--panel)" stroke="var(--line2)"/>'+
-      '<text x="340" y="106" text-anchor="middle" font-family="var(--mono)" font-size="11" fill="var(--mut)">QUEUE</text>'+
-      '<text x="340" y="240" text-anchor="middle" font-family="var(--code)" font-size="11" fill="var(--dim)" id="rl-qovf"></text></g>'+
-    // worker pool frame
-    '<g><rect x="560" y="64" width="124" height="176" rx="13" fill="none" stroke="var(--line2)" stroke-dasharray="3 6"/>'+
-      '<text x="622" y="58" text-anchor="middle" font-family="var(--mono)" font-size="11" fill="var(--mut)">WORKERS · '+NWORK+'</text></g>'+
-    workerSlotsSVG()+
-    // api box
-    '<g id="rl-apibox"><rect x="800" y="110" width="128" height="84" rx="13" fill="var(--panel3)" stroke="var(--line2)" id="rl-apirect"/>'+
-      '<text x="864" y="138" text-anchor="middle" font-family="var(--mono)" font-size="11" fill="var(--mut)">external API</text>'+
-      '<g id="rl-apistat" transform="translate(864,162)"><rect x="-34" y="-13" width="68" height="26" rx="13" fill="color-mix(in oklch,var(--grn) 16%,transparent)" stroke="color-mix(in oklch,var(--grn) 40%,transparent)" id="rl-apipill"/>'+
-        '<text x="0" y="5" text-anchor="middle" font-family="var(--code)" font-size="12" font-weight="700" fill="var(--grn)" id="rl-apitext">200</text></g></g>'+
-    '<g id="rl-tokens"></g>'+
-  '</svg></div>'+
-  '<div class="legend">'+
-    '<span><i style="background:var(--indigo-br)"></i>queued</span>'+
-    '<span><i style="background:var(--cyan)"></i>processing</span>'+
-    '<span><i style="background:var(--grn)"></i>succeeded</span>'+
-    '<span><i style="background:var(--red)"></i>429 · retrying</span>'+
-    '<span><i style="background:var(--amber)"></i>backoff wait</span>'+
-  '</div>'+
-  '<div class="readout">'+
-    stat('queue depth','rl-qd')+stat('in flight','rl-if')+stat('retries','rl-rt')+
-    stat('429 blocked','rl-bk','bad')+stat('succeeded','rl-sc','good')+stat('backoff','rl-bo','warn','s')+
-  '</div>';
-
-  function workerSlotsSVG(){
-    var s='';
-    slots.forEach(function(w,i){
-      s+='<rect x="'+(w.x-22)+'" y="'+(w.y-15)+'" width="44" height="30" rx="8" fill="var(--panel2)" stroke="var(--line2)" id="rl-ws'+i+'"/>';
-    });
-    return s;
-  }
-  function stat(k,id,cls,u){
-    return '<div class="stat"><span class="k">'+k+'</span><span class="v'+(cls?' '+cls:'')+'" id="'+id+'">0'+(u?'<span class="u">'+u+'</span>':'')+'</span></div>';
-  }
-
-  // ---- state ----
-  var tokens=[], idc=0, apiOK=true;
-  var metrics={retries:0, blocked:0, succeeded:0};
-  var gTok=document.getElementById('rl-tokens');
-  var elQd=g('rl-qd'),elIf=g('rl-if'),elRt=g('rl-rt'),elBk=g('rl-bk'),elSc=g('rl-sc'),elBo=g('rl-bo'),elOvf=g('rl-qovf');
-  function g(id){return document.getElementById(id);}
-
-  var COL={queued:'var(--indigo-br)',proc:'var(--cyan)',toapi:'var(--cyan)',success:'var(--grn)',block:'var(--red)',backoff:'var(--amber)'};
-  function colorFor(t){
-    if(t.phase==='success') return COL.success;
-    if(t.phase==='backoff') return COL.backoff;
-    if(t.blocked) return COL.block;
-    if(t.phase==='processing'||t.phase==='toworker'||t.phase==='toapi') return COL.proc;
-    return COL.queued;
-  }
-
-  function spawn(n){
-    for(var i=0;i<n;i++){
-      if(tokens.length>40) break;
-      var t={id:++idc,x:PRO.x,y:PRO.y+(Math.random()*20-10),phase:'toqueue',retries:0,blocked:false,
-        tx:QBOX.x+12,ty:CY,r:6,worker:null,pUntil:0,bUntil:0,born:performance.now()};
-      var el=document.createElementNS('http://www.w3.org/2000/svg','circle');
-      el.setAttribute('r','6'); t.el=el; gTok.appendChild(el);
-      tokens.push(t);
-    }
-  }
-
-  function queuedList(){ return tokens.filter(function(t){return t.phase==='queued';}); }
-
-  function assignWorkers(){
-    var q=queuedList();
-    slots.forEach(function(w){
-      if(w.busy==null && q.length){
-        var t=q.shift();
-        w.busy=t.id; t.worker=slots.indexOf(w);
-        t.phase='toworker'; t.tx=w.x; t.ty=w.y;
-      }
-    });
-  }
-
-  function resolveAPI(t){
-    var w=slots[t.worker];
-    if(apiOK){
-      t.phase='success'; t.blocked=false; t.tx=W; t.ty=CY;
-      metrics.succeeded++;
-      if(w) w.busy=null; t.worker=null;
-    } else {
-      metrics.blocked++; t.retries++; t.blocked=true;
-      if(w) w.busy=null; t.worker=null;
-      if(t.retries>MAX_RETRY){
-        t.phase='dead'; t.tx=t.x; t.ty=t.y+0; t.dead=performance.now();
-      } else {
-        metrics.retries++;
-        t.phase='backoff'; t.bUntil=performance.now()+BACKOFF_BASE*Math.pow(2,t.retries-1);
-        t.tx=QBOX.x+QBOX.w/2; t.ty=CY+58; // park below queue on the return lane
-      }
-    }
-  }
-
-  function step(now,dt){
-    // spawn cadence
-    if(!motionOff()){
-      spawnAcc+=dt;
-      if(spawnAcc>SPAWN_MS){ spawnAcc=0; if(queuedList().length<22) spawn(1); }
-    }
-    assignWorkers();
-
-    // position queued tokens into a packed grid
-    var ql=queuedList();
-    ql.forEach(function(t,i){
-      var col=i%3, rowi=Math.floor(i/3);
-      t.tx=300+col*34; t.ty=120+rowi*30;
-    });
-
-    var move=SPEED*dt/1000;
-    for(var i=tokens.length-1;i>=0;i--){
-      var t=tokens[i];
-      // arrival-driven transitions
-      var dx=t.tx-t.x, dy=t.ty-t.y, d=Math.hypot(dx,dy);
-      if(d>0.5){
-        var s=Math.min(move,d);
-        t.x+=dx/d*s; t.y+=dy/d*s;
-      }
-      var arrived=d<3;
-      switch(t.phase){
-        case 'toqueue': if(arrived){ t.phase='queued'; t.blocked=false; } break;
-        case 'toworker': if(arrived){ t.phase='processing'; t.pUntil=now+PROC*(0.8+Math.random()*0.5); } break;
-        case 'processing': if(now>=t.pUntil){ t.phase='toapi'; t.tx=API.x-26; t.ty=CY; } break;
-        case 'toapi': if(arrived){ resolveAPI(t); } break;
-        case 'backoff': if(now>=t.bUntil){ t.phase='toqueue'; t.tx=QBOX.x+12; t.ty=CY; } break;
-        case 'success': if(t.x>=W-1){ remove(t,i); } break;
-        case 'dead': if(now-t.dead>900){ remove(t,i); } break;
-      }
-      // render
-      if(t.el){
-        t.el.setAttribute('cx',t.x.toFixed(1));
-        t.el.setAttribute('cy',t.y.toFixed(1));
-        t.el.style.fill=colorFor(t);
-        var op = '1';
-        if(t.phase==='dead') op='0.25';
-        else if(t.phase==='backoff') op='0.85';
-        else if(t.phase==='success') op=Math.max(0,1-(t.x-API.x)/(W-API.x)).toFixed(2); // fade out as it exits
-        t.el.style.opacity=op;
-        t.el.setAttribute('r', t.phase==='processing'?'6.5':'6');
-      }
-    }
-    paintWorkers();
-    paintMetrics(ql.length);
-  }
-  function remove(t,i){ if(t.el&&t.el.parentNode) t.el.parentNode.removeChild(t.el); tokens.splice(i,1); }
-
-  function paintWorkers(){
-    slots.forEach(function(w,i){
-      var r=document.getElementById('rl-ws'+i);
-      if(!r) return;
-      var busy=w.busy!=null;
-      r.setAttribute('fill', busy? (apiOK?'color-mix(in oklch,var(--cyan) 18%,transparent)':'color-mix(in oklch,var(--red) 16%,transparent)') : 'var(--panel2)');
-      r.setAttribute('stroke', busy? (apiOK?'color-mix(in oklch,var(--cyan) 45%,transparent)':'color-mix(in oklch,var(--red) 45%,transparent)') : 'var(--line2)');
-    });
-  }
-
-  function paintMetrics(qd){
-    var inflight=tokens.filter(function(t){return t.phase==='toworker'||t.phase==='processing'||t.phase==='toapi';}).length;
-    var backoff=tokens.filter(function(t){return t.phase==='backoff';}).length;
-    var maxBo=0; tokens.forEach(function(t){ if(t.phase==='backoff'){ var s=(t.bUntil-performance.now())/1000; if(s>maxBo)maxBo=s; } });
-    elQd.firstChild ? (elQd.childNodes[0].nodeValue=qd) : (elQd.textContent=qd);
-    setNum(elQd,qd); setNum(elIf,inflight); setNum(elRt,metrics.retries);
-    setNum(elBk,metrics.blocked); setNum(elSc,metrics.succeeded);
-    elBo.innerHTML=(maxBo>0?maxBo.toFixed(1):'0')+'<span class="u">s</span>';
-    elBo.className='v '+(maxBo>0?'warn':'');
-    var ovf=qd-QCAP; elOvf.textContent = ovf>0? '+'+ovf+' more' : '';
-    // retry lane visibility
-    var ret=document.getElementById('rl-retpath'), rl=document.getElementById('rl-retlbl');
-    var on = backoff>0 || !apiOK;
-    ret.setAttribute('opacity', on?'0.7':'0'); rl.setAttribute('opacity', on?'0.9':'0');
-  }
-  function setNum(el,v){ el.childNodes.length>1 ? (el.childNodes[0].nodeValue=v) : (el.textContent=v); }
-
-  function setAPI(ok){
-    apiOK=ok;
-    var pill=document.getElementById('rl-apipill'), txt=document.getElementById('rl-apitext'), rect=document.getElementById('rl-apirect');
-    if(ok){
-      pill.setAttribute('fill','color-mix(in oklch,var(--grn) 16%,transparent)');
-      pill.setAttribute('stroke','color-mix(in oklch,var(--grn) 40%,transparent)');
-      txt.setAttribute('fill','var(--grn)'); txt.textContent='200';
-      rect.setAttribute('stroke','var(--line2)');
-    } else {
-      pill.setAttribute('fill','color-mix(in oklch,var(--red) 18%,transparent)');
-      pill.setAttribute('stroke','color-mix(in oklch,var(--red) 48%,transparent)');
-      txt.setAttribute('fill','var(--red)'); txt.textContent='429';
-      rect.setAttribute('stroke','color-mix(in oklch,var(--red) 40%,transparent)');
-    }
-    var segBtns=document.querySelectorAll('#rl-api button');
-    segBtns.forEach(function(b){ b.setAttribute('data-on', (b.getAttribute('data-v')==='ok')===ok ? '1':'0'); });
-  }
-
-  // ---- controls ----
-  document.getElementById('rl-burst').addEventListener('click',function(){ spawn(8); if(motionOff()) staticRender(); });
-  document.querySelectorAll('#rl-api button').forEach(function(b){
-    b.addEventListener('click',function(){ setAPI(b.getAttribute('data-v')==='ok'); if(motionOff()) staticRender(); });
-  });
-
-  // ---- motion / loop ----
-  function motionOff(){ return window.__motionOff || (window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches); }
-  var spawnAcc=0, last=0, raf=null;
-  function loop(now){
-    if(!last) last=now; var dt=Math.min(now-last,60); last=now;
-    step(now,dt);
-    raf=requestAnimationFrame(loop);
-  }
-  function start(){ if(raf) return; last=0; raf=requestAnimationFrame(loop); }
-  function stop(){ if(raf){ cancelAnimationFrame(raf); raf=null; } }
-
-  function staticRender(){
-    // snapshot frame for reduced motion: snap positions, single step of layout.
-    // Promote in-flight burst tokens (heading for the queue) so they show up in
-    // queue depth instead of stranding at the producer until motion resumes.
-    tokens.forEach(function(t){ if(t.phase==='toqueue'){ t.phase='queued'; t.blocked=false; } });
-    var ql=queuedList();
-    ql.forEach(function(t,i){ var col=i%3,rowi=Math.floor(i/3); t.x=300+col*34; t.y=120+rowi*30; });
-    tokens.forEach(function(t){ if(t.el){ t.el.setAttribute('cx',t.x.toFixed(1)); t.el.setAttribute('cy',t.y.toFixed(1)); t.el.style.fill=colorFor(t);} });
-    assignWorkers(); paintWorkers(); paintMetrics(ql.length);
-  }
-
-  function seedStatic(){
-    spawn(9);
-    // pre-place: some queued, fill workers
-    tokens.forEach(function(t){ t.phase='queued'; });
-    assignWorkers();
-    tokens.forEach(function(t){ if(t.worker!=null){ t.phase='processing'; t.x=slots[t.worker].x; t.y=slots[t.worker].y; } });
-    staticRender();
-  }
-
-  // expose for tweaks
-  window.__taskitoDemos=window.__taskitoDemos||{};
-  var prevMotion=window.__taskitoDemos.motion, prevRecolor=window.__taskitoDemos.recolor;
-  window.__taskitoDemos.motion=function(off){ if(prevMotion)prevMotion(off); if(off){ stop(); staticRender(); } else { start(); } };
-  window.__taskitoDemos.recolor=function(){ if(prevRecolor)prevRecolor(); /* svg uses var() inline, repaints automatically */ };
-
-  setAPI(true);
-  // start when visible (lazy) — but kick a static seed immediately
-  if(motionOff()){ seedStatic(); }
-  else {
-    spawn(4);
-    var io=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ start(); } else { /* keep running */ } }); },{threshold:0.05});
-    io.observe(root);
-    start();
-  }
-})();
diff --git a/docs/public/demos/demo-recovery.js b/docs/public/demos/demo-recovery.js
deleted file mode 100644
index b192f20c..00000000
--- a/docs/public/demos/demo-recovery.js
+++ /dev/null
@@ -1,236 +0,0 @@
-/* ============================================================
-   taskito · Demo 02 — Failure recovery (scrubbable timeline)
-   Drag the playhead across one job's lifecycle. Toggle the
-   ending: recover on the last retry, or exhaust into the DLQ.
-   Tier-1: HTML + CSS + pointer events. No WebGL.
-   ============================================================ */
-(function(){
-  var root=document.getElementById('fr-root');
-  if(!root) return;
-
-  var STATES={
-    Queued:  {c:'var(--indigo-br)', soft:'var(--indigo-soft)', line:'var(--indigo-line)'},
-    Running: {c:'var(--cyan)',  soft:'color-mix(in oklch,var(--cyan) 14%,transparent)', line:'color-mix(in oklch,var(--cyan) 40%,transparent)'},
-    Failed:  {c:'var(--red)',   soft:'color-mix(in oklch,var(--red) 13%,transparent)',  line:'color-mix(in oklch,var(--red) 42%,transparent)'},
-    Retrying:{c:'var(--amber)', soft:'color-mix(in oklch,var(--amber) 14%,transparent)',line:'color-mix(in oklch,var(--amber) 42%,transparent)'},
-    Complete:{c:'var(--grn)',   soft:'color-mix(in oklch,var(--grn) 14%,transparent)',  line:'color-mix(in oklch,var(--grn) 42%,transparent)'},
-    Dead:    {c:'var(--txt2)',  soft:'var(--panel3)', line:'var(--line3)'}
-  };
-
-  function base(){
-    return [
-      {t:0,    state:'Queued',  att:0, ttl:'Enqueued', d:'Accepted into the queue · status pending'},
-      {t:800,  state:'Running', att:1, ttl:'Dispatched', d:'Worker picked up the job · attempt 1'},
-      {t:2600, state:'Failed',  att:1, ttl:'Error', d:'ConnectionError: upstream returned 503'},
-      {t:3000, state:'Retrying',att:1, ttl:'Backoff', d:'Waiting 2.0s before retry 2'},
-      {t:5000, state:'Running', att:2, ttl:'Dispatched', d:'Worker picked up the job · attempt 2'},
-      {t:6800, state:'Failed',  att:2, ttl:'Error', d:'ConnectionError: upstream returned 503'},
-      {t:7200, state:'Retrying',att:2, ttl:'Backoff', d:'Waiting 4.0s before retry 3'},
-      {t:11200,state:'Running', att:3, ttl:'Dispatched', d:'Worker picked up the job · attempt 3'}
-    ];
-  }
-  var SCEN={
-    recover: base().concat([
-      {t:12700, state:'Complete', att:3, ttl:'Success', d:'Returned in 1.5s · result written to store'}
-    ]),
-    dlq: base().concat([
-      {t:13000, state:'Failed', att:3, ttl:'Error', d:'ConnectionError: upstream returned 503'},
-      {t:13300, state:'Dead',  att:3, ttl:'Dead-letter', d:'Max retries (3) exhausted → moved to DLQ'}
-    ])
-  };
-  var TAIL=1400;
-
-  root.innerHTML=
-  '<div class="demo-bar">'+
-    '<span class="title"><span class="ld"></span>job 01J8…f3 · lifecycle</span>'+
-    '<div class="demo-controls">'+
-      '<button class="ctl" id="fr-play"><svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M8 5v14l11-7z"/></svg>Play</button>'+
-      '<div class="seg" id="fr-out" role="group" aria-label="Outcome">'+
-        '<button data-v="recover" data-on="1" aria-pressed="true" class="good"><span class="dot"></span>Recovers</button>'+
-        '<button data-v="dlq" data-on="0" aria-pressed="false" class="bad"><span class="dot"></span>Dead-letter</button>'+
-      '</div>'+
-    '</div>'+
-  '</div>'+
-  '<div class="fr-scrubwrap">'+
-    '<div class="fr-track" id="fr-track" tabindex="0" role="slider" aria-label="Job timeline scrubber" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">'+
-      '<div class="fr-rail" id="fr-rail"></div>'+
-      '<div class="fr-fill" id="fr-fill"></div>'+
-      '<div class="fr-handle" id="fr-handle"></div>'+
-    '</div>'+
-    '<div class="fr-axis"><span>0.0s</span><span id="fr-axmid"></span><span id="fr-axend"></span></div>'+
-  '</div>'+
-  '<div class="fr-grid">'+
-    '<div class="fr-state">'+
-      '<span class="fr-pill" id="fr-pill"><span class="pd"></span><span id="fr-pilltext">Queued</span></span>'+
-      '<div class="big" id="fr-msg"></div>'+
-      '<div class="fr-meta">'+
-        '<div class="m"><span class="k">Elapsed</span><span class="v" id="fr-elapsed">0.0s</span></div>'+
-        '<div class="m"><span class="k">Attempt</span><span class="v" id="fr-att">0 / 3</span></div>'+
-        '<div class="m"><span class="k" id="fr-nxk">Next retry</span><span class="v" id="fr-nx">—</span></div>'+
-      '</div>'+
-      '<div><div class="k" style="font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:7px">Attempts</div>'+
-      '<div class="fr-attempts" id="fr-attempts"></div></div>'+
-    '</div>'+
-    '<div class="fr-log" id="fr-log"></div>'+
-  '</div>';
-
-  var scen='recover', events=SCEN[scen], DUR=dur();
-  function dur(){ return events[events.length-1].t+TAIL; }
-
-  var track=el('fr-track'), rail=el('fr-rail'), fill=el('fr-fill'), handle=el('fr-handle');
-  var elPill=el('fr-pill'), elPillT=el('fr-pilltext'), elMsg=el('fr-msg'),
-      elElapsed=el('fr-elapsed'), elAtt=el('fr-att'), elNxK=el('fr-nxk'), elNx=el('fr-nx'),
-      elAtts=el('fr-attempts'), elLog=el('fr-log');
-  function el(id){return document.getElementById(id);}
-
-  var play=0; // 0..DUR
-
-  function buildRailSegments(){
-    // colored segments + ticks
-    [].slice.call(rail.querySelectorAll('.fr-seg')).forEach(function(n){n.remove();});
-    [].slice.call(track.querySelectorAll('.fr-tick')).forEach(function(n){n.remove();});
-    for(var i=0;i<events.length;i++){
-      var a=events[i].t, b=(i+1<events.length)?events[i+1].t:DUR;
-      var seg=document.createElement('div'); seg.className='fr-seg';
-      seg.style.left=(a/DUR*100)+'%'; seg.style.width=((b-a)/DUR*100)+'%';
-      seg.style.background='color-mix(in oklch,'+STATES[events[i].state].c+' 30%, transparent)';
-      rail.appendChild(seg);
-      if(i>0){
-        var tk=document.createElement('div'); tk.className='fr-tick';
-        tk.style.left=(a/DUR*100)+'%'; tk.style.background=STATES[events[i].state].c;
-        track.appendChild(tk);
-      }
-    }
-    el('fr-axmid').textContent=(DUR/2000).toFixed(1)+'s';
-    el('fr-axend').textContent=(DUR/1000).toFixed(1)+'s';
-  }
-
-  function buildLog(){
-    elLog.innerHTML=events.map(function(e,i){
-      var st=STATES[e.state];
-      return '<div class="fr-ev" data-i="'+i+'" style="--c:'+st.c+'">'+
-        '<div class="dotcol"><span class="ed"></span><span class="eline"></span></div>'+
-        '<div class="etxt"><span class="et">'+e.ttl+'</span><span class="ed2">'+e.d+'</span></div>'+
-        '<span class="ets">'+(e.t/1000).toFixed(1)+'s</span>'+
-      '</div>';
-    }).join('');
-  }
-
-  function curIndex(){
-    var idx=0;
-    for(var i=0;i<events.length;i++){ if(events[i].t<=play+0.001) idx=i; else break; }
-    return idx;
-  }
-
-  function render(){
-    var pct=play/DUR*100;
-    fill.style.width=pct+'%'; handle.style.left=pct+'%';
-    track.setAttribute('aria-valuenow', Math.round(pct));
-    var idx=curIndex(), ev=events[idx], st=STATES[ev.state];
-    // pill
-    elPillT.textContent=ev.state;
-    elPill.style.color=st.c; elPill.style.background=st.soft; elPill.style.borderColor=st.line;
-    elPill.querySelector('.pd').style.background=st.c;
-    elMsg.innerHTML='<b>'+ev.ttl+'.</b> '+ev.d;
-    elElapsed.textContent=(play/1000).toFixed(1)+'s';
-    elAtt.textContent=ev.att+' / 3';
-    // next retry countdown
-    if(ev.state==='Retrying'){
-      var nxt=(idx+1<events.length)?events[idx+1].t:DUR;
-      elNxK.textContent='Next retry'; elNx.textContent=Math.max(0,(nxt-play)/1000).toFixed(1)+'s'; elNx.style.color='var(--amber)';
-    } else if(ev.state==='Complete'){ elNxK.textContent='Result'; elNx.textContent='stored'; elNx.style.color='var(--grn)'; }
-    else if(ev.state==='Dead'){ elNxK.textContent='Routed to'; elNx.textContent='DLQ'; elNx.style.color='var(--txt2)'; }
-    else if(ev.state==='Running'){ elNxK.textContent='Worker'; elNx.textContent='busy'; elNx.style.color='var(--cyan)'; }
-    else { elNxK.textContent='Next retry'; elNx.textContent='—'; elNx.style.color='var(--mut)'; }
-    // attempts chips
-    paintAttempts(idx);
-    // log
-    var evs=elLog.querySelectorAll('.fr-ev');
-    evs.forEach(function(n,i){ n.classList.toggle('on', i<=idx); n.classList.toggle('cur', i===idx); });
-    var curEl=evs[idx];
-    if(curEl){ var top=curEl.offsetTop-elLog.clientHeight/2+curEl.clientHeight/2; elLog.scrollTop=Math.max(0,top); }
-  }
-
-  function paintAttempts(idx){
-    // determine outcome of each attempt up to idx
-    var res={1:'',2:'',3:''};
-    for(var i=0;i<=idx;i++){
-      var e=events[i];
-      if(e.att>=1){
-        if(e.state==='Running'&&!res[e.att]) res[e.att]='pending';
-        if(e.state==='Failed') res[e.att]='fail';
-        if(e.state==='Complete') res[e.att]='ok';
-        if(e.state==='Dead') res[e.att]='dead';
-      }
-    }
-    var html='';
-    for(var a=1;a<=3;a++){
-      var r=res[a], cls='', label=a;
-      if(r==='ok'){cls='ok';label='✓';}
-      else if(r==='fail'){cls='fail';label='✕';}
-      else if(r==='dead'){cls='dead';label='☠';}
-      else if(r==='pending'){cls='';}
-      html+='<div class="a '+cls+'" title="attempt '+a+'">'+label+'</div>';
-      if(a<3) html+='<span style="color:var(--dim);font-size:11px">›</span>';
-    }
-    elAtts.innerHTML=html;
-  }
-
-  // ---- scrub interaction ----
-  var dragging=false;
-  function setFromX(clientX){
-    var r=track.getBoundingClientRect();
-    var ratio=Math.max(0,Math.min(1,(clientX-r.left)/r.width));
-    play=ratio*DUR; stopPlay(); render();
-  }
-  track.addEventListener('pointerdown',function(e){ dragging=true; track.setPointerCapture(e.pointerId); setFromX(e.clientX); });
-  track.addEventListener('pointermove',function(e){ if(dragging) setFromX(e.clientX); });
-  track.addEventListener('pointerup',function(){ dragging=false; });
-  track.addEventListener('pointercancel',function(){ dragging=false; });
-  track.addEventListener('keydown',function(e){
-    var stepK=DUR/40;
-    if(e.key==='ArrowRight'){ play=Math.min(DUR,play+stepK); stopPlay(); render(); e.preventDefault(); }
-    else if(e.key==='ArrowLeft'){ play=Math.max(0,play-stepK); stopPlay(); render(); e.preventDefault(); }
-    else if(e.key==='Home'){ play=0; stopPlay(); render(); e.preventDefault(); }
-    else if(e.key==='End'){ play=DUR; stopPlay(); render(); e.preventDefault(); }
-  });
-
-  // ---- play ----
-  var raf=null, lastT=0;
-  function motionOff(){ return window.__motionOff || (window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches); }
-  function tick(now){
-    if(!lastT) lastT=now; var dt=now-lastT; lastT=now;
-    play+=dt;
-    if(play>=DUR){ play=DUR; render(); stopPlay(); return; }
-    render(); raf=requestAnimationFrame(tick);
-  }
-  function startPlay(){
-    if(motionOff()){ play=DUR; render(); return; }
-    if(play>=DUR) play=0;
-    lastT=0; setPlayBtn(true); raf=requestAnimationFrame(tick);
-  }
-  function stopPlay(){ if(raf){ cancelAnimationFrame(raf); raf=null; } setPlayBtn(false); }
-  function setPlayBtn(on){
-    var b=el('fr-play');
-    b.innerHTML = on
-      ? '<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>Pause'
-      : '<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M8 5v14l11-7z"/></svg>Play';
-  }
-  el('fr-play').addEventListener('click',function(){ if(raf) stopPlay(); else startPlay(); });
-
-  // ---- outcome toggle ----
-  document.querySelectorAll('#fr-out button').forEach(function(b){
-    b.addEventListener('click',function(){
-      scen=b.getAttribute('data-v'); events=SCEN[scen]; DUR=dur();
-      document.querySelectorAll('#fr-out button').forEach(function(x){ var on=x===b; x.setAttribute('data-on', on?'1':'0'); x.setAttribute('aria-pressed', on?'true':'false'); });
-      play=Math.min(play,DUR);
-      buildRailSegments(); buildLog(); render();
-    });
-  });
-
-  window.__taskitoDemos=window.__taskitoDemos||{};
-  var pm=window.__taskitoDemos.motion;
-  window.__taskitoDemos.motion=function(off){ if(pm)pm(off); if(off) stopPlay(); };
-
-  buildRailSegments(); buildLog(); render();
-})();
diff --git a/docs/public/demos/demo-saga.js b/docs/public/demos/demo-saga.js
deleted file mode 100644
index ada3629b..00000000
--- a/docs/public/demos/demo-saga.js
+++ /dev/null
@@ -1,234 +0,0 @@
-/* ============================================================
-   taskito · Demo 06 — Saga / compensation
-   A distributed transaction as a chain of steps, each with a
-   compensating action. Pick where it fails and run it: forward
-   steps commit, then on failure the compensations unwind in
-   reverse so nothing is left half-done.
-   Tier-1: SVG + requestAnimationFrame. No WebGL.
-   ============================================================ */
-(function(){
-  var root=document.getElementById('saga-root');
-  if(!root) return;
-
-  var W=940,H=292, FDUR=720, CDUR=620;
-  var STEPS=[
-    {fwd:'reserve seat', f:'reserve_seat.s()', comp:'release seat', c:'release_seat.s()'},
-    {fwd:'charge card',  f:'charge_card.s()',  comp:'refund card',  c:'refund_card.s()'},
-    {fwd:'book hotel',   f:'book_hotel.s()',   comp:'cancel hotel', c:'cancel_hotel.s()'},
-    {fwd:'issue ticket', f:'issue_ticket.s()', comp:'void ticket',  c:'void_ticket.s()'}
-  ];
-  var N=STEPS.length;
-  var CX=[143,361,579,797], CYC=104, CW=178, CH=88;
-  var SVGNS='http://www.w3.org/2000/svg';
-
-  root.innerHTML=
-  '<div class="demo-bar">'+
-    '<span class="title"><span class="ld"></span>booking-saga · transaction</span>'+
-    '<div class="demo-controls">'+
-      '<div class="seg" id="saga-fail" role="group" aria-label="Where it fails">'+
-        '<button data-v="1" class="bad" data-on="1" aria-pressed="true"><span class="dot"></span>charge fails</button>'+
-        '<button data-v="2" class="bad" data-on="0" aria-pressed="false"><span class="dot"></span>hotel fails</button>'+
-        '<button data-v="-1" class="good" data-on="0" aria-pressed="false"><span class="dot"></span>all succeed</button>'+
-      '</div>'+
-      '<button class="ctl pri" id="saga-run"><svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M8 5v14l11-7z"/></svg>Run saga</button>'+
-      '<button class="ctl" id="saga-reset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>Reset</button>'+
-    '</div>'+
-  '</div>'+
-  '<div class="stage"><svg id="saga-svg" viewBox="0 0 '+W+' '+H+'" role="img" aria-label="A booking saga: reserve seat, charge card, book hotel, issue ticket. Each step has a compensating action. When a step fails, taskito runs the compensations of the committed steps in reverse order.">'+
-    '<g id="saga-edges"></g><g id="saga-cards"></g>'+
-    '<g id="saga-tokenF"><circle r="6" fill="var(--cyan)" opacity="0" id="saga-dotF"/></g>'+
-  '</svg></div>'+
-  '<div class="legend">'+
-    '<span><i style="background:var(--cyan)"></i>running</span>'+
-    '<span><i style="background:var(--grn)"></i>committed</span>'+
-    '<span><i style="background:var(--red)"></i>failed</span>'+
-    '<span><i style="background:var(--amber)"></i>compensating</span>'+
-    '<span><i style="background:var(--dim)"></i>undone</span>'+
-  '</div>'+
-  '<div class="readout">'+
-    stat('step','saga-step')+stat('committed','saga-commit','good')+stat('compensated','saga-comp','warn')+
-    stat('outcome','saga-outcome')+
-  '</div>';
-
-  function stat(k,id,cls){ return '<div class="stat"><span class="k">'+k+'</span><span class="v'+(cls?' '+cls:'')+'" id="'+id+'" style="font-size:16px">—</span></div>'; }
-  function el(id){ return document.getElementById(id); }
-
-  var gEdges=el('saga-edges'), gCards=el('saga-cards'), dotF=el('saga-dotF');
-
-  // ---- forward + reverse edges ----
-  var fEdges=[], rEdges=[];
-  for(var i=0;i<N-1;i++){
-    var x1=CX[i]+CW/2, x2=CX[i+1]-CW/2;
-    var f=mkPath('M'+x1+' '+(CYC-6)+' H '+x2, 'var(--line2)', true, gEdges);
-    fEdges.push(f);
-    var r=mkPath('M'+x2+' '+(CYC+CH/2+30)+' H '+x1, 'color-mix(in oklch,var(--amber) 50%,transparent)', true, gEdges);
-    r.setAttribute('opacity','0'); rEdges.push(r);
-  }
-  function mkPath(d,stroke,arrow,parent){
-    var p=document.createElementNS(SVGNS,'path'); p.setAttribute('d',d); p.setAttribute('fill','none');
-    p.setAttribute('stroke',stroke); p.setAttribute('stroke-width','2'); p.setAttribute('stroke-linecap','round');
-    if(arrow){ p.setAttribute('marker-end','url(#saga-ar-'+(stroke.indexOf('amber')>=0?'c':'f')+')'); }
-    parent.appendChild(p); return p;
-  }
-  // markers
-  var defs=document.createElementNS(SVGNS,'defs');
-  defs.innerHTML='<marker id="saga-ar-f" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M1 1 L9 5 L1 9" fill="none" stroke="var(--line3)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></marker>'+
-    '<marker id="saga-ar-c" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M1 1 L9 5 L1 9" fill="none" stroke="var(--amber)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></marker>';
-  el('saga-svg').insertBefore(defs, gEdges);
-
-  // ---- cards ----
-  var cards=[];
-  STEPS.forEach(function(s,i){
-    var cx=CX[i], x=cx-CW/2, y=CYC-CH/2;
-    var g=document.createElementNS(SVGNS,'g');
-    g.innerHTML=
-      '<rect x="'+x+'" y="'+y+'" width="'+CW+'" height="'+CH+'" rx="13" fill="var(--panel2)" stroke="var(--line2)" data-rect/>'+
-      '<text x="'+(x+15)+'" y="'+(y+22)+'" font-family="var(--mono)" font-size="9.5" letter-spacing=".06em" fill="var(--dim)">STEP '+(i+1)+'</text>'+
-      '<circle cx="'+(x+CW-16)+'" cy="'+(y+18)+'" r="4.5" fill="var(--dim)" data-pip/>'+
-      '<text x="'+(x+15)+'" y="'+(y+45)+'" font-family="var(--sans)" font-size="14.5" font-weight="600" fill="var(--txt2)" data-title>'+s.fwd+'</text>'+
-      '<text x="'+(x+15)+'" y="'+(y+66)+'" font-family="var(--code)" font-size="11" fill="var(--mut)" data-fn>'+s.f+'</text>'+
-      // compensation chip
-      '<rect x="'+(x+18)+'" y="'+(CYC+CH/2+16)+'" width="'+(CW-36)+'" height="28" rx="8" fill="var(--panel)" stroke="var(--line2)" stroke-dasharray="3 4" data-crect/>'+
-      '<path d="M'+(x+30)+' '+(CYC+CH/2+27)+' l-5 3 l5 3" fill="none" stroke="var(--dim)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" data-carrow/>'+
-      '<text x="'+(x+40)+'" y="'+(CYC+CH/2+34)+'" font-family="var(--mono)" font-size="10.5" fill="var(--dim)" data-ctext>'+s.comp+'</text>';
-    gCards.appendChild(g);
-    cards.push({g:g, rect:g.querySelector('[data-rect]'), pip:g.querySelector('[data-pip]'),
-      title:g.querySelector('[data-title]'), crect:g.querySelector('[data-crect]'),
-      ctext:g.querySelector('[data-ctext]'), carrow:g.querySelector('[data-carrow]')});
-  });
-
-  // ---- state ----
-  var st=[], failAt=1, phase='idle', raf=null, t0=0, idx=0, stepStart=0, compQueue=[], outcome='';
-  function reset(){
-    st=STEPS.map(function(){return 'pending';});
-    phase='idle'; idx=0; compQueue=[]; outcome='';
-    fEdges.forEach(function(e){ e.setAttribute('stroke','var(--line2)'); });
-    rEdges.forEach(function(e){ e.setAttribute('opacity','0'); });
-    dotF.setAttribute('opacity','0');
-    cards.forEach(function(_,i){ paint(i); });
-    setStats(); setRunBtn(false);
-  }
-
-  var COL={
-    pending:{fill:'var(--panel2)',stroke:'var(--line2)',pip:'var(--dim)',t:'var(--txt2)'},
-    running:{fill:'color-mix(in oklch,var(--cyan) 15%,transparent)',stroke:'color-mix(in oklch,var(--cyan) 52%,transparent)',pip:'var(--cyan)',t:'var(--txt)'},
-    done:{fill:'color-mix(in oklch,var(--grn) 13%,transparent)',stroke:'color-mix(in oklch,var(--grn) 48%,transparent)',pip:'var(--grn)',t:'var(--txt)'},
-    failed:{fill:'color-mix(in oklch,var(--red) 14%,transparent)',stroke:'color-mix(in oklch,var(--red) 52%,transparent)',pip:'var(--red)',t:'var(--txt)'},
-    comp:{fill:'color-mix(in oklch,var(--amber) 15%,transparent)',stroke:'color-mix(in oklch,var(--amber) 52%,transparent)',pip:'var(--amber)',t:'var(--txt)'},
-    undone:{fill:'var(--panel)',stroke:'var(--line2)',pip:'var(--dim)',t:'var(--dim)'}
-  };
-  function paint(i){
-    var c=cards[i], s=st[i], k=COL[s];
-    c.rect.setAttribute('fill',k.fill); c.rect.setAttribute('stroke',k.stroke);
-    c.pip.setAttribute('fill',k.pip); c.title.setAttribute('fill',k.t);
-    if(s==='undone'){ c.title.setAttribute('text-decoration','line-through'); } else { c.title.setAttribute('text-decoration','none'); }
-    // compensation chip active during comp / undone
-    var active = (s==='comp'||s==='undone');
-    c.crect.setAttribute('stroke', s==='comp'?'color-mix(in oklch,var(--amber) 52%,transparent)':(s==='undone'?'var(--line3)':'var(--line2)'));
-    c.crect.setAttribute('fill', s==='comp'?'color-mix(in oklch,var(--amber) 12%,transparent)':'var(--panel)');
-    c.crect.setAttribute('stroke-dasharray', active?'':'3 4');
-    c.ctext.setAttribute('fill', s==='comp'?'var(--amber)':(s==='undone'?'var(--txt2)':'var(--dim)'));
-    c.carrow.setAttribute('stroke', s==='comp'?'var(--amber)':(s==='undone'?'var(--txt2)':'var(--dim)'));
-  }
-
-  function setStats(){
-    var step = phase==='idle'?'—':(phase==='forward'?(idx+1)+' / '+N:(phase==='compensate'?'unwind':'done'));
-    el('saga-step').textContent=step;
-    el('saga-commit').textContent=st.filter(function(x){return x==='done';}).length;
-    el('saga-comp').textContent=st.filter(function(x){return x==='undone';}).length;
-    var o=el('saga-outcome');
-    o.textContent = outcome || '—';
-    o.className='v '+(outcome==='committed'?'good':(outcome==='rolled back'?'bad':''));
-    o.style.fontSize='15px';
-    o.textContent = outcome? (outcome==='committed'?'committed':'rolled back') : '—';
-  }
-  function setRunBtn(on){
-    var b=el('saga-run');
-    b.innerHTML= on? '<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>Running…'
-      : '<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M8 5v14l11-7z"/></svg>Run saga';
-    b.toggleAttribute('disabled',on);
-  }
-
-  // ---- run ----
-  function motionOff(){ return window.__motionOff || (window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches); }
-  function run(){
-    reset(); phase='forward'; idx=0; setRunBtn(true);
-    if(motionOff()){ instant(); return; }
-    st[0]='running'; paint(0); stepStart=performance.now(); t0=stepStart;
-    if(raf) cancelAnimationFrame(raf); raf=requestAnimationFrame(tick);
-  }
-  function tick(now){
-    if(phase==='forward'){
-      var prog=(now-stepStart)/FDUR;
-      moveDotF(idx,Math.min(1,prog));
-      if(prog>=1){
-        if(idx===failAt){
-          st[idx]='failed'; paint(idx); dotF.setAttribute('opacity','0');
-          // build compensation queue for committed steps (reverse)
-          compQueue=[]; for(var j=idx-1;j>=0;j--){ if(st[j]==='done') compQueue.push(j); }
-          if(compQueue.length){ phase='compensate'; startComp(now); }
-          else { phase='done'; outcome='rolled back'; finish(); }
-        } else {
-          st[idx]='done'; paint(idx);
-          if(idx<N-1){ fEdges[idx].setAttribute('stroke','color-mix(in oklch,var(--grn) 45%,transparent)'); idx++; st[idx]='running'; paint(idx); stepStart=now; }
-          else { phase='done'; outcome='committed'; dotF.setAttribute('opacity','0'); finish(); }
-        }
-        setStats();
-      }
-      raf=requestAnimationFrame(tick);
-    } else if(phase==='compensate'){
-      var ci=compQueue[0];
-      var cp=(now-stepStart)/CDUR;
-      if(cp>=1){
-        st[ci]='undone'; paint(ci); compQueue.shift();
-        // light reverse edge from this step back to previous comp
-        if(ci<N-1) rEdges[ci].setAttribute('opacity','0');
-        if(ci>0) rEdges[ci-1].setAttribute('opacity','0.9');
-        setStats();
-        if(compQueue.length){ stepStart=now; st[compQueue[0]]='comp'; paint(compQueue[0]); }
-        else { phase='done'; outcome='rolled back'; finish(); return; }
-      }
-      raf=requestAnimationFrame(tick);
-    }
-  }
-  function startComp(now){
-    var ci=compQueue[0]; st[ci]='comp'; paint(ci); stepStart=now;
-    if(ci<N-1) rEdges[ci].setAttribute('opacity','0.9');
-  }
-  function moveDotF(i,p){
-    if(i>=N-1){ dotF.setAttribute('opacity','0'); return; }
-    var x1=CX[i]+CW/2, x2=CX[i+1]-CW/2;
-    dotF.setAttribute('opacity', st[i]==='running'?'1':'0');
-    dotF.setAttribute('cx', x1+(x2-x1)*p); dotF.setAttribute('cy', CYC-6);
-  }
-  function finish(){ phase='done'; setRunBtn(false); setStats(); if(raf){ cancelAnimationFrame(raf); raf=null; } }
-
-  function instant(){
-    if(failAt<0){ st=STEPS.map(function(){return 'done';}); outcome='committed'; fEdges.forEach(function(e){e.setAttribute('stroke','color-mix(in oklch,var(--grn) 45%,transparent)');}); }
-    else { for(var i=0;i<failAt;i++) st[i]='undone'; st[failAt]='failed'; for(var j=failAt+1;j<N;j++) st[j]='pending'; outcome='rolled back'; }
-    phase='done'; cards.forEach(function(_,i){ paint(i); }); setRunBtn(false); setStats();
-  }
-
-  // ---- controls ----
-  document.querySelectorAll('#saga-fail button').forEach(function(b){
-    b.addEventListener('click',function(){
-      failAt=parseInt(b.getAttribute('data-v'),10);
-      document.querySelectorAll('#saga-fail button').forEach(function(x){ var on=x===b; x.setAttribute('data-on', on?'1':'0'); x.setAttribute('aria-pressed', on?'true':'false'); });
-      reset();
-    });
-  });
-  el('saga-run').addEventListener('click',function(){ if(phase==='forward'||phase==='compensate') return; run(); });
-  el('saga-reset').addEventListener('click',function(){ if(raf) cancelAnimationFrame(raf); raf=null; reset(); });
-
-  window.__taskitoDemos=window.__taskitoDemos||{};
-  var pm=window.__taskitoDemos.motion;
-  window.__taskitoDemos.motion=function(off){ if(pm)pm(off); if(off && raf){ cancelAnimationFrame(raf); raf=null; instant(); } };
-
-  reset();
-  if(motionOff()){ instant(); }
-  else if(document.body.hasAttribute('data-embed')){ run(); }
-  else {
-    var io=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting && phase==='idle'){ run(); io.disconnect(); } }); },{threshold:0.3});
-    io.observe(root);
-  }
-})();
diff --git a/docs/public/demos/demo-workflow.js b/docs/public/demos/demo-workflow.js
deleted file mode 100644
index 6d63d215..00000000
--- a/docs/public/demos/demo-workflow.js
+++ /dev/null
@@ -1,281 +0,0 @@
-/* ============================================================
-   taskito · Demo 04 — Workflow DAG execution
-   A real dependency graph: chain → group (parallel) → chord
-   (join) → fan-out. Run it and execution propagates as each
-   task's inputs become ready; click a node to trace/run a branch.
-   Tier-1: SVG + requestAnimationFrame. No WebGL.
-   ============================================================ */
-(function(){
-  var root=document.getElementById('wf-root');
-  if(!root) return;
-
-  var W=760,H=372;
-  // node model: center coords on the SVG canvas
-  var NODES=[
-    {id:'ingest',  label:'ingest',    fn:'fetch_source()',    type:'Source',     x:78,  y:186, dur:700},
-    {id:'probe',   label:'probe',     fn:'inspect.s()',       type:'Chain step', x:222, y:186, dur:620},
-    {id:'t720',    label:'transcode 720p', fn:'encode.s(720)',type:'Group · parallel', x:392, y:84,  dur:1500},
-    {id:'t1080',   label:'transcode 1080p',fn:'encode.s(1080)',type:'Group · parallel',x:392, y:186, dur:2000},
-    {id:'audio',   label:'extract audio',  fn:'audio.s()',    type:'Group · parallel', x:392, y:288, dur:1150},
-    {id:'package', label:'package',   fn:'chord(mux.s())',    type:'Chord · join', x:560, y:186, dur:950},
-    {id:'notify',  label:'notify',    fn:'webhook.s()',       type:'Fan-out',    x:704, y:120, dur:520},
-    {id:'cdn',     label:'publish CDN',fn:'upload.s()',       type:'Fan-out',    x:704, y:252, dur:760}
-  ];
-  var EDGES=[
-    ['ingest','probe'],
-    ['probe','t720'],['probe','t1080'],['probe','audio'],
-    ['t720','package'],['t1080','package'],['audio','package'],
-    ['package','notify'],['package','cdn']
-  ];
-  var NW=120, NH=46;
-  var byId={}; NODES.forEach(function(n){ byId[n.id]=n; n.deps=[]; n.kids=[]; });
-  EDGES.forEach(function(e){ byId[e[1]].deps.push(e[0]); byId[e[0]].kids.push(e[1]); });
-
-  // critical path (longest dur sum)
-  (function(){
-    var memo={};
-    function cp(id){ if(memo[id]!=null) return memo[id]; var n=byId[id];
-      var m=0; n.kids.forEach(function(k){ m=Math.max(m,cp(k)); }); return memo[id]=n.dur+m; }
-    window.__wfCrit=Math.max.apply(null,NODES.filter(function(n){return n.deps.length===0;}).map(function(n){return cp(n.id);}));
-  })();
-
-  root.innerHTML=
-  '<div class="demo-bar">'+
-    '<span class="title"><span class="ld"></span>media-pipeline · DAG</span>'+
-    '<div class="demo-controls">'+
-      '<button class="ctl pri" id="wf-run"><svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M8 5v14l11-7z"/></svg>Run workflow</button>'+
-      '<button class="ctl" id="wf-reset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>Reset</button>'+
-    '</div>'+
-  '</div>'+
-  '<div class="wf-grid">'+
-    '<div class="wf-graph"><svg id="wf-svg" viewBox="0 0 '+W+' '+H+'" role="img" aria-label="Workflow dependency graph: ingest then probe, fanning out to three parallel transcode tasks, joined by a package step, then publishing to notify and CDN. Run animates execution in dependency order.">'+
-      '<defs>'+
-        '<marker id="wf-ar" viewBox="0 0 10 10" refX="8.5" refY="5" markerWidth="9" markerHeight="9" markerUnits="userSpaceOnUse" orient="auto"><path d="M1.5 1.5 L9 5 L1.5 8.5 Z" fill="var(--line3)"/></marker>'+
-        '<marker id="wf-ar-on" viewBox="0 0 10 10" refX="8.5" refY="5" markerWidth="9" markerHeight="9" markerUnits="userSpaceOnUse" orient="auto"><path d="M1.5 1.5 L9 5 L1.5 8.5 Z" fill="var(--grn)"/></marker>'+
-      '</defs>'+
-      '<g id="wf-edges"></g><g id="wf-flow"></g><g id="wf-nodes"></g>'+
-    '</svg></div>'+
-    '<div class="wf-side" id="wf-side"></div>'+
-  '</div>'+
-  '<div class="legend">'+
-    '<span><i style="background:var(--dim)"></i>idle</span>'+
-    '<span><i style="background:var(--indigo-br)"></i>queued</span>'+
-    '<span><i style="background:var(--cyan)"></i>running</span>'+
-    '<span><i style="background:var(--grn)"></i>done</span>'+
-  '</div>'+
-  '<div class="readout">'+
-    stat('tasks','wf-total')+stat('completed','wf-done','good')+stat('running','wf-running')+
-    stat('elapsed','wf-elapsed',null,'s')+stat('critical path','wf-crit',null,'s')+
-  '</div>';
-
-  function stat(k,id,cls,u){ return '<div class="stat"><span class="k">'+k+'</span><span class="v'+(cls?' '+cls:'')+'" id="'+id+'">0'+(u?'<span class="u">'+u+'</span>':'')+'</span></div>'; }
-  function g(id){ return document.getElementById(id); }
-
-  var gEdges=g('wf-edges'), gFlow=g('wf-flow'), gNodes=g('wf-nodes'), side=g('wf-side');
-
-  // ---- build edges ----
-  var edgeEls={};
-  EDGES.forEach(function(e){
-    var a=byId[e[0]], b=byId[e[1]];
-    var x1=a.x+NW/2, y1=a.y, x2=b.x-NW/2, y2=b.y;
-    var mx=(x1+x2)/2;
-    var d='M'+x1+' '+y1+' C '+mx+' '+y1+', '+mx+' '+y2+', '+x2+' '+y2;
-    var base=document.createElementNS('http://www.w3.org/2000/svg','path');
-    base.setAttribute('d',d); base.setAttribute('fill','none'); base.setAttribute('stroke','var(--line2)');
-    base.setAttribute('stroke-width','2'); base.setAttribute('marker-end','url(#wf-ar)');
-    gEdges.appendChild(base);
-    var lit=document.createElementNS('http://www.w3.org/2000/svg','path');
-    lit.setAttribute('d',d); lit.setAttribute('fill','none'); lit.setAttribute('stroke','var(--grn)');
-    lit.setAttribute('stroke-width','2.4'); lit.setAttribute('stroke-linecap','round');
-    var len=lit.getTotalLength?lit.getTotalLength():400;
-    lit.style.strokeDasharray=len; lit.style.strokeDashoffset=len; lit.style.transition='stroke-dashoffset .5s ease';
-    gFlow.appendChild(lit);
-    edgeEls[e[0]+'>'+e[1]]={base:base,lit:lit,path:lit,len:len};
-  });
-
-  // ---- build nodes ----
-  var nodeEls={};
-  NODES.forEach(function(n){
-    var grp=document.createElementNS('http://www.w3.org/2000/svg','g');
-    grp.setAttribute('class','wf-node'); grp.setAttribute('tabindex','0'); grp.setAttribute('role','button');
-    grp.setAttribute('aria-label',n.label+' — '+n.type);
-    var rect=document.createElementNS('http://www.w3.org/2000/svg','rect');
-    rect.setAttribute('x',n.x-NW/2); rect.setAttribute('y',n.y-NH/2); rect.setAttribute('width',NW); rect.setAttribute('height',NH);
-    rect.setAttribute('rx','11'); rect.setAttribute('fill','var(--panel2)'); rect.setAttribute('stroke','var(--line2)');
-    var pip=document.createElementNS('http://www.w3.org/2000/svg','circle');
-    pip.setAttribute('cx',n.x+NW/2-14); pip.setAttribute('cy',n.y-NH/2+14); pip.setAttribute('r','4'); pip.setAttribute('fill','var(--dim)');
-    var t1=document.createElementNS('http://www.w3.org/2000/svg','text');
-    t1.setAttribute('x',n.x-NW/2+13); t1.setAttribute('y',n.y-3); t1.setAttribute('font-family','var(--sans)');
-    t1.setAttribute('font-size','12.5'); t1.setAttribute('font-weight','600'); t1.setAttribute('fill','var(--txt2)'); t1.textContent=n.label;
-    var t2=document.createElementNS('http://www.w3.org/2000/svg','text');
-    t2.setAttribute('x',n.x-NW/2+13); t2.setAttribute('y',n.y+13); t2.setAttribute('font-family','var(--code)');
-    t2.setAttribute('font-size','10'); t2.setAttribute('fill','var(--dim)'); t2.textContent=n.fn;
-    grp.appendChild(rect); grp.appendChild(pip); grp.appendChild(t1); grp.appendChild(t2);
-    gNodes.appendChild(grp);
-    nodeEls[n.id]={g:grp,rect:rect,pip:pip,t1:t1,t2:t2};
-    grp.addEventListener('click',function(){ selectNode(n.id); });
-    grp.addEventListener('keydown',function(e){ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); selectNode(n.id); } });
-  });
-
-  // ---- state ----
-  var state={}, started={}, finishAt={}, selected=null, runMask=null, t0=0, raf=null, running=false;
-  function reset(full){
-    // Clear any pending frame so `raf` never lingers as a stale "running" signal.
-    if(raf){ cancelAnimationFrame(raf); raf=null; }
-    NODES.forEach(function(n){ state[n.id]='idle'; started[n.id]=0; finishAt[n.id]=0; });
-    runMask=null; running=false; t0=0;
-    Object.keys(edgeEls).forEach(function(k){ edgeEls[k].lit.style.strokeDashoffset=edgeEls[k].len; edgeEls[k].base.setAttribute('marker-end','url(#wf-ar)'); });
-    [].forEach.call(gFlow.querySelectorAll('circle.wf-dot'),function(d){ d.remove(); });
-    NODES.forEach(paintNode);
-    paintStats();
-    if(full!==false){ selected=selected||'ingest'; renderSide(); }
-  }
-
-  var COLOR={
-    idle:{fill:'var(--panel2)',stroke:'var(--line2)',pip:'var(--dim)',t1:'var(--txt2)'},
-    queued:{fill:'var(--indigo-soft)',stroke:'var(--indigo-line)',pip:'var(--indigo-br)',t1:'var(--txt)'},
-    running:{fill:'color-mix(in oklch,var(--cyan) 15%,transparent)',stroke:'color-mix(in oklch,var(--cyan) 55%,transparent)',pip:'var(--cyan)',t1:'var(--txt)'},
-    done:{fill:'color-mix(in oklch,var(--grn) 13%,transparent)',stroke:'color-mix(in oklch,var(--grn) 48%,transparent)',pip:'var(--grn)',t1:'var(--txt)'}
-  };
-  function paintNode(n){
-    var e=nodeEls[n.id], s=state[n.id], c=COLOR[s];
-    e.rect.setAttribute('fill',c.fill); e.rect.setAttribute('stroke',selected===n.id?'var(--txt2)':c.stroke);
-    e.rect.setAttribute('stroke-width',selected===n.id?'2.4':'1.6');
-    e.pip.setAttribute('fill',c.pip);
-    e.t1.setAttribute('fill',c.t1);
-    // dim non-branch nodes when a node is selected & not running
-    var dim = selected && !running && !inBranch(selected,n.id);
-    e.g.style.opacity = dim ? '0.4' : '1';
-  }
-  function repaintAll(){ NODES.forEach(paintNode); }
-
-  // downstream branch membership (selected node + all descendants)
-  function inBranch(rootId,id){
-    if(rootId===id) return true;
-    var seen={}, stack=[rootId];
-    while(stack.length){ var c=stack.pop(); byId[c].kids.forEach(function(k){ if(!seen[k]){ seen[k]=1; stack.push(k); } }); }
-    return !!seen[id];
-  }
-  function branchSet(rootId){ var set={}; set[rootId]=1; var stack=[rootId];
-    while(stack.length){ var c=stack.pop(); byId[c].kids.forEach(function(k){ if(!set[k]){ set[k]=1; stack.push(k); } }); }
-    return set; }
-
-  // ---- scheduler ----
-  function start(mask){
-    reset(false); runMask=mask||null; running=true; t0=performance.now();
-    setRunBtn(true); repaintAll();
-    if(motionOff()){ instantFinish(); return; }
-    if(raf) cancelAnimationFrame(raf);
-    raf=requestAnimationFrame(tick);
-  }
-  function eligible(id){
-    if(runMask && !runMask[id]) return false;
-    if(state[id]!=='idle') return false;
-    return byId[id].deps.every(function(d){ return (runMask && !runMask[d]) ? true : state[d]==='done'; });
-  }
-  function tick(now){
-    var t=now-t0;
-    // launch eligible
-    NODES.forEach(function(n){ if(eligible(n.id)){ state[n.id]='running'; started[n.id]=now; finishAt[n.id]=now+n.dur; paintNode(n); } });
-    // finish
-    NODES.forEach(function(n){ if(state[n.id]==='running' && now>=finishAt[n.id]){ state[n.id]='done'; paintNode(n); litOut(n); } });
-    paintStats(t);
-    var active=NODES.some(function(n){ return (runMask?runMask[n.id]:true) && state[n.id]!=='done' && state[n.id]!=='idle'; });
-    var pending=NODES.some(function(n){ return eligible(n.id); });
-    var anyRunning=NODES.some(function(n){ return state[n.id]==='running'; });
-    if(anyRunning||pending){ raf=requestAnimationFrame(tick); }
-    else { raf=null; running=false; setRunBtn(false); repaintAll(); renderSide(); }
-  }
-  function litOut(n){
-    n.kids.forEach(function(k){
-      if(runMask && !runMask[k]) return;
-      var ed=edgeEls[n.id+'>'+k]; if(!ed) return;
-      ed.lit.style.strokeDashoffset=0;
-      ed.base.setAttribute('marker-end','url(#wf-ar-on)'); // arrowhead goes green with the edge
-      if(!motionOff()) spawnDot(ed);
-    });
-  }
-  function spawnDot(ed){
-    var dot=document.createElementNS('http://www.w3.org/2000/svg','circle');
-    dot.setAttribute('r','4'); dot.setAttribute('fill','var(--grn)'); dot.setAttribute('class','wf-dot');
-    dot.style.filter='drop-shadow(0 0 5px var(--grn))';
-    gFlow.appendChild(dot);
-    var st=performance.now(), DUR=480, len=ed.len, path=ed.path;
-    (function move(now){
-      var p=Math.min(1,(now-st)/DUR);
-      var pt=path.getPointAtLength(len*p);
-      dot.setAttribute('cx',pt.x); dot.setAttribute('cy',pt.y);
-      dot.style.opacity = p<0.12?(p/0.12):(p>0.85?(1-(p-0.85)/0.15):1);
-      if(p<1) requestAnimationFrame(move); else dot.remove();
-    })(st);
-  }
-  function instantFinish(){
-    NODES.forEach(function(n){ if(!runMask||runMask[n.id]) state[n.id]='done'; });
-    Object.keys(edgeEls).forEach(function(k){ var p=k.split('>'); if(!runMask||(runMask[p[0]]&&runMask[p[1]])){ edgeEls[k].lit.style.strokeDashoffset=0; edgeEls[k].base.setAttribute('marker-end','url(#wf-ar-on)'); } });
-    running=false; setRunBtn(false); repaintAll(); paintStats(window.__wfCrit); renderSide();
-  }
-
-  function paintStats(t){
-    var scope=NODES.filter(function(n){ return !runMask||runMask[n.id]; });
-    var done=scope.filter(function(n){return state[n.id]==='done';}).length;
-    var run=scope.filter(function(n){return state[n.id]==='running';}).length;
-    setNum(g('wf-total'),scope.length);
-    setNum(g('wf-done'),done);
-    setNum(g('wf-running'),run);
-    var el=g('wf-elapsed'); el.innerHTML=((t||0)/1000).toFixed(1)+'<span class="u">s</span>';
-    var cr=g('wf-crit'); cr.innerHTML=(window.__wfCrit/1000).toFixed(1)+'<span class="u">s</span>';
-  }
-  function setNum(el,v){ el.childNodes.length>1?(el.childNodes[0].nodeValue=v):(el.textContent=v); }
-
-  function setRunBtn(on){
-    var b=g('wf-run');
-    b.innerHTML = on
-      ? '<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>Running…'
-      : '<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M8 5v14l11-7z"/></svg>Run workflow';
-    b.toggleAttribute('disabled',on);
-  }
-
-  // ---- side panel ----
-  function selectNode(id){ selected=id; repaintAll(); renderSide(); }
-  function renderSide(){
-    var n=byId[selected||'ingest'];
-    var deps=n.deps.length? n.deps.map(function(d){return '<span class="dc">'+byId[d].label+'</span>';}).join('')
-                          : '<span class="dc none">none · root task</span>';
-    var st=state[n.id]||'idle';
-    var stColor={idle:'var(--dim)',queued:'var(--indigo-br)',running:'var(--cyan)',done:'var(--grn)'}[st];
-    var downstream=Object.keys(branchSet(n.id)).length-1;
-    side.innerHTML=
-      '<span class="sk">selected task</span>'+
-      '<span class="wf-seltype"><span style="width:7px;height:7px;border-radius:2px;background:currentColor;display:inline-block"></span>'+n.type+'</span>'+
-      '<div class="wf-selname">'+n.label+'<span class="mono">'+n.fn+'</span></div>'+
-      '<div class="wf-rows">'+
-        '<div class="wf-row"><span class="k">Status</span><span class="wf-status"><span class="sd" style="background:'+stColor+'"></span>'+st+'</span></div>'+
-        '<div class="wf-row"><span class="k">Depends on</span><div class="wf-depchips">'+deps+'</div></div>'+
-        '<div class="wf-row"><span class="k">Est. duration</span><span class="v mono">'+(n.dur/1000).toFixed(2)+'s</span></div>'+
-        '<div class="wf-row"><span class="k">Downstream tasks</span><span class="v mono">'+downstream+'</span></div>'+
-      '</div>'+
-      '<div class="wf-runbranch">'+
-        '<button class="ctl" id="wf-branch"'+(downstream===0&&n.deps.length===0?'':'')+'><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v12"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>Run from here</button>'+
-        '<div class="note">'+(downstream>0?('runs this task + '+downstream+' downstream'):'runs just this task')+'</div>'+
-      '</div>';
-    g('wf-branch').addEventListener('click',function(){ start(branchSet(n.id)); });
-  }
-
-  // ---- controls / motion ----
-  function motionOff(){ return window.__motionOff || (window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches); }
-  g('wf-run').addEventListener('click',function(){ if(running) return; selected=null; start(null); });
-  g('wf-reset').addEventListener('click',function(){ if(raf) cancelAnimationFrame(raf); reset(true); });
-
-  window.__taskitoDemos=window.__taskitoDemos||{};
-  var pm=window.__taskitoDemos.motion;
-  window.__taskitoDemos.motion=function(off){ if(pm)pm(off); if(off && raf){ cancelAnimationFrame(raf); instantFinish(); } };
-
-  // init
-  reset(true);
-  if(motionOff()){ instantFinish(); }
-  else if(document.body.hasAttribute('data-embed')){ start(null); }
-  else {
-    var io=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting && t0===0){ start(null); io.disconnect(); } }); },{threshold:0.3});
-    io.observe(root);
-  }
-})();
diff --git a/docs/public/demos/demo-worksteal.js b/docs/public/demos/demo-worksteal.js
deleted file mode 100644
index f20154a5..00000000
--- a/docs/public/demos/demo-worksteal.js
+++ /dev/null
@@ -1,260 +0,0 @@
-/* ============================================================
-   taskito · Demo 07 — Multi-region work-stealing mesh
-   taskito runs in several regions that gossip queue depth. When
-   one region's backlog spikes, an idle peer steals a batch over
-   HTTP — load self-balances with no central broker.
-   Tier-1: SVG + requestAnimationFrame. No WebGL.
-   ============================================================ */
-(function(){
-  var root=document.getElementById('worksteal-root');
-  if(!root) return;
-  var W=940,H=540, SVGNS='http://www.w3.org/2000/svg';
-  var JOB_MS=820, STEAL_INT=620, HOT=5, COOL=2;
-
-  // equirectangular world map: lon/lat -> SVG x/y (map band centered in the viewBox)
-  var MAPH=470, MAPY=35;
-  function proj(lon,lat){ return [(lon+180)/360*W, (90-lat)/180*MAPH+MAPY]; }
-  function landPath(pts){ return 'M'+pts.map(function(c){ var p=proj(c[0],c[1]); return p[0].toFixed(1)+' '+p[1].toFixed(1); }).join(' L ')+' Z'; }
-  // simplified continent outlines (lon,lat) — geographically placed, low-poly
-  var CONTINENTS=[
-    [[-165,60],[-150,70],[-120,70],[-95,72],[-80,68],[-78,55],[-64,48],[-70,42],[-76,35],[-81,25],[-92,18],[-100,18],[-106,23],[-114,31],[-123,40],[-124,49],[-133,55],[-150,58]], // North America
-    [[-80,8],[-72,11],[-60,5],[-50,0],[-44,-2],[-40,-10],[-48,-23],[-58,-34],[-66,-44],[-72,-52],[-75,-48],[-71,-35],[-70,-18],[-76,-12],[-81,-5]], // South America
-    [[-16,14],[-12,28],[-2,35],[10,37],[20,33],[32,31],[35,24],[43,12],[51,11],[48,0],[41,-12],[35,-22],[25,-34],[18,-35],[11,-16],[9,0],[-2,5],[-12,8]], // Africa
-    [[-9,36],[-2,44],[2,50],[-4,58],[5,62],[14,66],[28,71],[55,70],[75,73],[100,73],[130,71],[155,68],[170,66],[165,60],[150,58],[142,50],[133,43],[123,40],[122,31],[112,21],[103,14],[97,8],[93,20],[88,21],[80,7],[76,8],[70,18],[63,24],[56,26],[48,30],[42,37],[30,36],[22,40],[14,45],[4,43]], // Eurasia
-    [[-5,50],[-2,51],[1,53],[-2,56],[-6,58],[-9,55],[-10,52]], // British Isles
-    [[133,32],[138,34],[143,39],[145,43],[143,45],[139,43],[136,39],[133,36],[131,33]], // Japan
-    [[114,-22],[122,-18],[131,-12],[137,-11],[143,-11],[147,-20],[150,-37],[141,-38],[131,-32],[120,-34],[114,-26]] // Australia
-  ];
-  var LAND_D=CONTINENTS.map(landPath).join(' ');
-
-  // regions placed at their real lon/lat; cards are spread out and connected to a map pin
-  var REG=[
-    {id:'us-west-2',     loc:'Oregon',     lon:-120, lat:45, cardX:44,  cardY:58,  q:2, rate:0.30},
-    {id:'us-east-1',     loc:'N. Virginia',lon:-77,  lat:38, cardX:120, cardY:214, q:2, rate:0.30},
-    {id:'eu-west',       loc:'Ireland',    lon:-7,   lat:53, cardX:386, cardY:44,  q:2, rate:1.35},
-    {id:'ap-south-1',    loc:'Mumbai',     lon:73,   lat:19, cardX:560, cardY:300, q:1, rate:0.34},
-    {id:'ap-northeast-1',loc:'Tokyo',      lon:139,  lat:36, cardX:742, cardY:66,  q:2, rate:0.34}
-  ];
-  REG.forEach(function(r){ var p=proj(r.lon,r.lat); r.gx=Math.round(p[0]); r.gy=Math.round(p[1]); r.dx=r.gx; r.dy=r.gy; r.busy=[0,0]; });
-  var byId={}; REG.forEach(function(r){ byId[r.id]=r; });
-  var LINKS=[
-    ['us-west-2','eu-west',85],['eu-west','ap-northeast-1',88],['eu-west','ap-south-1',139],
-    ['us-west-2','us-east-1',null],['us-east-1','eu-west',null],['ap-south-1','ap-northeast-1',null],
-    ['us-east-1','ap-south-1',null]
-  ];
-  var HOPS=[];
-
-  root.innerHTML=
-  '<div class="demo-bar">'+
-    '<span class="title"><span class="ld"></span>region-mesh · gossip</span>'+
-    '<div class="demo-controls">'+
-      '<button class="ctl pri" id="ws-burst"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>Burst</button>'+
-      '<button class="ctl" id="ws-reset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>Reset</button>'+
-      '<button class="ctl" id="ws-pause"><svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>Pause</button>'+
-    '</div>'+
-  '</div>'+
-  '<div class="stage"><svg id="ws-svg" viewBox="0 0 '+W+' '+H+'" role="img" aria-label="A world map with five taskito regions connected by a gossip mesh. When one region\'s queue spikes, idle regions steal batches of jobs over HTTP so load balances out.">'+
-    '<defs><pattern id="ws-grid" width="36" height="36" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r="1" fill="var(--line)"/></pattern></defs>'+
-    '<rect width="'+W+'" height="'+H+'" fill="url(#ws-grid)" opacity=".7"/>'+
-    '<g id="ws-land" opacity=".6"><path d="'+LAND_D+'" fill="var(--line)" stroke="var(--line2)" stroke-width="1" stroke-linejoin="round"/></g>'+
-    '<g id="ws-links"></g><g id="ws-leads"></g><g id="ws-pins"></g><g id="ws-hops"></g><g id="ws-tokens"></g><g id="ws-cards"></g>'+
-  '</svg></div>'+
-  '<div class="legend">'+
-    '<span><i style="background:var(--grn)"></i>region node</span>'+
-    '<span><i style="width:16px;height:0;border-top:2px dashed color-mix(in oklch,var(--grn) 50%,transparent);border-radius:0;background:none"></i>mesh link (gossip)</span>'+
-    '<span><i style="width:16px;height:0;border-top:2px solid var(--cyan);border-radius:0;background:none"></i>work-steal over HTTP</span>'+
-  '</div>'+
-  '<div class="readout">'+
-    stat('completed','ws-completed','good')+stat('steals','ws-steals')+stat('moved · HTTP','ws-moved','warn')+
-    stat('busiest queue','ws-hot')+
-  '</div>';
-
-  function stat(k,id,cls){ return '<div class="stat"><span class="k">'+k+'</span><span class="v'+(cls?' '+cls:'')+'" id="'+id+'">0</span></div>'; }
-  function el(id){ return document.getElementById(id); }
-  var gLinks=el('ws-links'), gHops=el('ws-hops'), gTok=el('ws-tokens'), gCards=el('ws-cards');
-
-  // ---- links + latency pills ----
-  var linkEls=[];
-  LINKS.forEach(function(L){
-    var a=byId[L[0]], b=byId[L[1]];
-    var p=document.createElementNS(SVGNS,'line');
-    p.setAttribute('x1',a.dx); p.setAttribute('y1',a.dy); p.setAttribute('x2',b.dx); p.setAttribute('y2',b.dy);
-    p.setAttribute('stroke','color-mix(in oklch,var(--grn) 38%,transparent)'); p.setAttribute('stroke-width','1.6');
-    p.setAttribute('stroke-dasharray','2 6'); p.setAttribute('stroke-linecap','round');
-    gLinks.appendChild(p); linkEls.push({a:a,b:b,line:p,solid:0});
-    if(L[2]!=null){
-      var mx=(a.dx+b.dx)/2, my=(a.dy+b.dy)/2;
-      var g=document.createElementNS(SVGNS,'g');
-      g.innerHTML='<rect x="'+(mx-21)+'" y="'+(my-11)+'" width="42" height="22" rx="7" fill="var(--panel)" stroke="color-mix(in oklch,var(--grn) 32%,transparent)"/>'+
-        '<text x="'+mx+'" y="'+(my+4)+'" text-anchor="middle" font-family="var(--mono)" font-size="10.5" fill="var(--mut)">'+L[2]+' ms</text>';
-      gLinks.appendChild(g);
-    }
-  });
-  HOPS.forEach(function(h){
-    var c=document.createElementNS(SVGNS,'circle');
-    c.setAttribute('cx',h[0]); c.setAttribute('cy',h[1]); c.setAttribute('r','5');
-    c.setAttribute('fill','color-mix(in oklch,var(--cyan) 60%,var(--panel))'); c.setAttribute('opacity','.85');
-    gHops.appendChild(c);
-  });
-
-  // ---- region cards ----
-  REG.forEach(function(r){
-    var x=r.cardX, y=r.cardY, w=156, h=80;
-    var g=document.createElementNS(SVGNS,'g');
-    g.innerHTML=
-      '<rect x="'+x+'" y="'+y+'" width="'+w+'" height="'+h+'" rx="13" fill="var(--panel)" stroke="var(--line2)" data-rect/>'+
-      '<circle cx="'+(x+16)+'" cy="'+(y+18)+'" r="5.5" fill="var(--grn)" data-dot/>'+
-      '<text x="'+(x+30)+'" y="'+(y+22)+'" font-family="var(--code)" font-size="12.5" font-weight="700" fill="var(--txt)">'+r.id+'</text>'+
-      '<text x="'+(x+30+labelW(r.id))+'" y="'+(y+22)+'" font-family="var(--mono)" font-size="10" fill="var(--dim)"> '+r.loc+'</text>'+
-      '<g data-workers transform="translate('+(x+16)+','+(y+36)+')"></g>'+
-      '<text x="'+(x+16)+'" y="'+(y+70)+'" font-family="var(--mono)" font-size="11" fill="var(--mut)"><tspan data-q font-weight="600" fill="var(--txt2)">'+r.q+'</tspan> queued</text>';
-    gCards.appendChild(g);
-    r.g=g; r.rect=g.querySelector('[data-rect]'); r.qEl=g.querySelector('[data-q]'); r.wkEl=g.querySelector('[data-workers]'); r.dot=g.querySelector('[data-dot]');
-    for(var i=0;i<2;i++){
-      var sq=document.createElementNS(SVGNS,'rect');
-      sq.setAttribute('x',i*18); sq.setAttribute('y',0); sq.setAttribute('width',13); sq.setAttribute('height',13); sq.setAttribute('rx',3.5);
-      sq.setAttribute('fill','var(--panel3)'); sq.setAttribute('stroke','var(--line2)'); r.wkEl.appendChild(sq);
-    }
-  });
-  function labelW(s){ return s.length*7.1+4; }
-
-  // ---- geographic pins + leader lines from each card to its real location ----
-  var gLeads=el('ws-leads'), gPins=el('ws-pins');
-  REG.forEach(function(r){
-    var ln=document.createElementNS(SVGNS,'line');
-    ln.setAttribute('x1',r.cardX+78); ln.setAttribute('y1',r.cardY+40);
-    ln.setAttribute('x2',r.gx); ln.setAttribute('y2',r.gy);
-    ln.setAttribute('stroke','var(--line2)'); ln.setAttribute('stroke-width','1.3');
-    ln.setAttribute('stroke-dasharray','1 4'); ln.setAttribute('stroke-linecap','round');
-    gLeads.appendChild(ln);
-    var pin=document.createElementNS(SVGNS,'g');
-    pin.innerHTML='<circle cx="'+r.gx+'" cy="'+r.gy+'" r="11" fill="color-mix(in oklch,var(--grn) 13%,transparent)"/>'+
-      '<circle cx="'+r.gx+'" cy="'+r.gy+'" r="4.5" fill="var(--grn)" stroke="var(--panel)" stroke-width="1.5"/>';
-    gPins.appendChild(pin);
-  });
-
-  // ---- metrics ----
-  var completed=0, steals=0, moved=0, tokens=[];
-
-  function poisson(m){ if(m<=0)return 0; var L=Math.exp(-m),k=0,p=1; do{k++;p*=Math.random();}while(p>L); return k-1; }
-
-  function stepSim(now,dt){
-    REG.forEach(function(r){
-      r.q += poisson(r.rate*dt);
-      for(var i=0;i<2;i++){
-        if(r.busy[i] && now>=r.busy[i]){ r.busy[i]=0; completed++; }
-        if(!r.busy[i] && r.q>0){ r.q--; r.busy[i]=now+JOB_MS*(0.8+Math.random()*0.5); }
-      }
-    });
-  }
-
-  var stealAcc=0;
-  function trySteal(now,dt){
-    stealAcc+=dt*1000; if(stealAcc<STEAL_INT) return; stealAcc=0;
-    // busiest region
-    var hot=REG.slice().sort(function(a,b){return b.q-a.q;})[0];
-    if(hot.q<HOT) return;
-    // an idle linked peer with a free worker
-    var peers=linkEls.filter(function(L){ return L.a===hot||L.b===hot; })
-      .map(function(L){ return L.a===hot?L.b:L.a; })
-      .filter(function(p){ return p.q<=COOL && p.busy.indexOf(0)>=0; })
-      .sort(function(a,b){ return a.q-b.q; });
-    if(!peers.length) return;
-    var dst=peers[0];
-    var batch=Math.max(1,Math.min(4,Math.floor((hot.q-dst.q)/2)));
-    hot.q-=batch;
-    steals++;
-    spawnSteal(hot,dst,batch,now);
-  }
-
-  function spawnSteal(a,b,batch,now){
-    var link=linkEls.filter(function(L){ return (L.a===a&&L.b===b)||(L.a===b&&L.b===a); })[0];
-    if(link) link.solid=now+700;
-    var g=document.createElementNS(SVGNS,'g'); g.setAttribute('class','ws-steal');
-    g.innerHTML='<circle r="8" fill="var(--cyan)" opacity=".95"/><text text-anchor="middle" y="3.5" font-family="var(--code)" font-size="9" font-weight="700" fill="#06281f">'+batch+'</text>';
-    gTok.appendChild(g);
-    var dist=Math.hypot(b.dx-a.dx,b.dy-a.dy);
-    tokens.push({ax:a.dx,ay:a.dy,bx:b.dx,by:b.dy,dst:b,batch:batch,t0:now,dur:Math.max(620,dist*1.6),g:g,done:false});
-  }
-
-  function moveTokens(now){
-    for(var i=tokens.length-1;i>=0;i--){
-      var t=tokens[i], p=Math.min(1,(now-t.t0)/t.dur);
-      var x=t.ax+(t.bx-t.ax)*p, y=t.ay+(t.by-t.ay)*p;
-      t.g.setAttribute('transform','translate('+x.toFixed(1)+','+y.toFixed(1)+')');
-      t.g.firstChild.setAttribute('opacity', (p<0.1?p/0.1:(p>0.9?(1-(p-0.9)/0.1)*0.95:0.95)).toFixed(2));
-      if(p>=1 && !t.done){ t.done=true; t.dst.q+=t.batch; moved+=t.batch; if(t.g.parentNode) t.g.parentNode.removeChild(t.g); tokens.splice(i,1); }
-    }
-  }
-
-  function paint(now){
-    var hotQ=0, hotName='—';
-    REG.forEach(function(r){
-      r.qEl.textContent=r.q;
-      if(r.q>hotQ){ hotQ=r.q; hotName=r.id; }
-      var hot=r.q>=HOT;
-      r.rect.setAttribute('stroke', hot?'color-mix(in oklch,var(--amber) 55%,transparent)':'var(--line2)');
-      r.rect.setAttribute('fill', hot?'color-mix(in oklch,var(--amber) 7%,var(--panel))':'var(--panel)');
-      // worker squares
-      [].forEach.call(r.wkEl.children,function(sq,i){
-        var busy = !!r.busy[i];
-        sq.setAttribute('fill', busy?'var(--grn)':'var(--panel3)');
-        sq.setAttribute('stroke', busy?'color-mix(in oklch,var(--grn) 55%,transparent)':'var(--line2)');
-      });
-    });
-    // link styling: solid teal briefly after a steal
-    linkEls.forEach(function(L){
-      var on = L.solid>now;
-      L.line.setAttribute('stroke', on?'var(--cyan)':'color-mix(in oklch,var(--grn) 38%,transparent)');
-      L.line.setAttribute('stroke-dasharray', on?'':'2 6');
-      L.line.setAttribute('stroke-width', on?'2.2':'1.6');
-    });
-    el('ws-completed').textContent=completed;
-    el('ws-steals').textContent=steals;
-    el('ws-moved').textContent=moved;
-    el('ws-hot').textContent=hotQ;
-  }
-
-  // ---- loop ----
-  function motionOff(){ return window.__motionOff || (window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches); }
-  var raf=null,last=0,paused=false;
-  function loop(now){
-    if(!last) last=now; var dt=Math.min((now-last)/1000,0.05); last=now;
-    stepSim(now,dt); trySteal(now,dt); moveTokens(now); paint(now);
-    raf=requestAnimationFrame(loop);
-  }
-  function start(){ if(raf||paused) return; last=0; raf=requestAnimationFrame(loop); }
-  function stop(){ if(raf){ cancelAnimationFrame(raf); raf=null; } }
-
-  function staticRender(){ var now=performance.now(); REG.forEach(function(r){ r.busy=[now+1,0]; }); paint(now); }
-
-  el('ws-burst').addEventListener('click',function(){
-    // dump load onto the already-busiest region to force a steal
-    var hot=REG.slice().sort(function(a,b){return b.q-a.q;})[0]; hot.q+=7;
-    if(motionOff()) staticRender(); else paint(performance.now());
-  });
-  el('ws-reset').addEventListener('click',function(){
-    completed=0;steals=0;moved=0; tokens.forEach(function(t){ if(t.g.parentNode) t.g.parentNode.removeChild(t.g); }); tokens=[];
-    REG.forEach(function(r){ r.q=r.id==='ap-south-1'?1:2; r.busy=[0,0]; });
-    paint(performance.now());
-  });
-  function syncPauseLabel(){
-    el('ws-pause').innerHTML = paused
-      ? '<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M8 5v14l11-7z"/></svg>Resume'
-      : '<svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>Pause';
-  }
-  el('ws-pause').addEventListener('click',function(){
-    paused=!paused;
-    syncPauseLabel();
-    if(paused) stop(); else start();
-  });
-
-  window.__taskitoDemos=window.__taskitoDemos||{};
-  var pm=window.__taskitoDemos.motion;
-  // Resuming via the motion toggle clears `paused`; keep the button label in sync.
-  window.__taskitoDemos.motion=function(off){ if(pm)pm(off); if(off){ stop(); staticRender(); } else { paused=false; syncPauseLabel(); start(); } };
-
-  paint(performance.now());
-  if(motionOff()){ staticRender(); }
-  else { start(); }
-})();
diff --git a/docs/public/demos/favicon.svg b/docs/public/demos/favicon.svg
deleted file mode 100644
index 0872d295..00000000
--- a/docs/public/demos/favicon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#16a34a"></rect><g stroke="#fff" stroke-width="2.6" stroke-linecap="round"><path d="M8 11 H17"></path><path d="M8 16 H14.5"></path><path d="M8 21 H17"></path></g><path d="M19.5 16 l3 3 l5.5 -6.5" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/docs/public/demos/interactive.css b/docs/public/demos/interactive.css
deleted file mode 100644
index a5a8227e..00000000
--- a/docs/public/demos/interactive.css
+++ /dev/null
@@ -1,261 +0,0 @@
-/* ============================================================
-   taskito · interactive demos
-   Tier-1 universal: SVG + Canvas 2D + CSS only. No WebGL.
-   Honors prefers-reduced-motion and the [data-motion] tweak.
-   ============================================================ */
-
-/* page background fx (lighter than landing) */
-.bgfx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
-.bgfx .grid{position:absolute;inset:0;
-  background-image:radial-gradient(circle at center, var(--line) 1px, transparent 1px);
-  background-size:34px 34px;opacity:.45;
-  -webkit-mask-image:radial-gradient(120% 60% at 60% 0%, #000 26%, transparent 72%);
-          mask-image:radial-gradient(120% 60% at 60% 0%, #000 26%, transparent 72%);}
-main{position:relative;z-index:1}
-
-/* ---------- intro hero ---------- */
-.ihero{max-width:var(--maxw);margin:0 auto;padding:60px 32px 28px;text-align:center}
-.ihero h1{font-size:clamp(38px,4.6vw,60px);line-height:1.0;letter-spacing:-.035em;font-weight:600;margin-top:18px}
-.ihero h1 .grad{background:linear-gradient(96deg,var(--indigo-br),var(--cyan));
-  -webkit-background-clip:text;background-clip:text;color:transparent}
-.ihero .sub{margin:20px auto 0;max-width:620px;font-size:18px;line-height:1.55;color:var(--mut)}
-.ihero .sub code{font-family:var(--mono);color:var(--txt);background:var(--panel2);padding:1px 6px;border-radius:5px;font-size:.85em;border:1px solid var(--line)}
-.capnote{margin:26px auto 0;display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
-  font-family:var(--mono);font-size:12.5px;color:var(--mut);
-  background:var(--panel);border:1px solid var(--line2);border-radius:100px;padding:8px 8px 8px 16px}
-.capnote .lead{display:inline-flex;align-items:center;gap:8px}
-.capnote .lead svg{width:15px;height:15px;color:var(--indigo-br)}
-.capnote .tier{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line);
-  border-radius:100px;padding:5px 11px}
-.capnote .tier .pip{width:7px;height:7px;border-radius:50%}
-.capnote .tier.on .pip{background:var(--grn);box-shadow:0 0 8px var(--grn)}
-.capnote .tier.off .pip{background:var(--dim)}
-.capnote .tier b{color:var(--txt2);font-weight:600}
-.capnote .tier .st{color:var(--dim)}
-
-/* ---------- demo section + card frame ---------- */
-.demo-sec{padding:46px 32px}
-.demo-wrap{max-width:1080px;margin:0 auto}
-.demo-head{max-width:680px;margin:0 0 26px}
-.demo-head .num{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--indigo-br)}
-.demo-head h2{font-size:clamp(25px,2.9vw,34px);line-height:1.08;letter-spacing:-.025em;font-weight:600;margin-top:10px}
-.demo-head p{margin-top:12px;font-size:16.5px;line-height:1.55;color:var(--mut);max-width:600px}
-.demo-head p b{color:var(--txt2);font-weight:600}
-.demo-head p code{font-family:var(--mono);font-size:.84em;background:var(--panel3);padding:1px 6px;border-radius:5px;color:var(--txt2)}
-
-.demo-card{background:linear-gradient(180deg,var(--panel),var(--panel2));
-  border:1px solid var(--line2);border-radius:18px;overflow:hidden;
-  box-shadow:var(--shadow-md),0 0 0 1px var(--line);position:relative}
-.demo-bar{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);
-  background:color-mix(in oklch,var(--panel) 60%,#000);flex-wrap:wrap}
-[data-theme="light"] .demo-bar{background:var(--panel2)}
-.demo-bar .title{font-family:var(--mono);font-size:12.5px;color:var(--txt2);font-weight:500;display:flex;align-items:center;gap:9px}
-.demo-bar .title .ld{width:7px;height:7px;border-radius:50%;background:var(--grn);box-shadow:0 0 8px var(--grn);animation:blip 1.5s infinite}
-.demo-controls{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
-
-/* control atoms */
-.ctl{font-family:var(--mono);font-size:12.5px;font-weight:500;
-  display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:9px;cursor:pointer;
-  border:1px solid var(--line2);background:var(--panel);color:var(--txt2);
-  transition:border-color .15s,color .15s,background .15s,transform .12s}
-.ctl:hover{border-color:var(--line3);color:var(--txt)}
-.ctl:active{transform:translateY(1px)}
-.ctl svg{width:14px;height:14px}
-.ctl.pri{background:linear-gradient(180deg,var(--indigo),var(--indigo-dk));border-color:transparent;color:#fff;
-  box-shadow:0 8px 18px -12px var(--indigo)}
-.ctl.pri:hover{color:#fff;filter:brightness(1.05)}
-.ctl[disabled]{opacity:.45;cursor:default;pointer-events:none}
-
-/* toggle (segmented) */
-.seg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden;background:var(--panel)}
-.seg button{appearance:none;border:0;background:transparent;cursor:pointer;
-  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--mut);padding:8px 13px;
-  display:inline-flex;align-items:center;gap:7px;transition:color .15s,background .15s}
-.seg button + button{border-left:1px solid var(--line2)}
-.seg button .dot{width:7px;height:7px;border-radius:50%;background:var(--dim)}
-.seg button:hover{color:var(--txt2)}
-.seg button[data-on="1"]{color:var(--txt);background:var(--panel3)}
-.seg button[data-on="1"].good .dot{background:var(--grn);box-shadow:0 0 7px var(--grn)}
-.seg button[data-on="1"].bad .dot{background:var(--red);box-shadow:0 0 7px var(--red)}
-
-/* viz stage */
-.stage{position:relative;padding:18px 18px 6px}
-.stage svg{display:block;width:100%;height:auto;overflow:hidden}
-.stage canvas{display:block;width:100%}
-
-/* readout strip */
-.readout{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);
-  grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
-.stat{background:var(--panel);padding:14px 16px;display:flex;flex-direction:column;gap:3px}
-.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
-.stat .v{font-family:var(--code);font-size:21px;font-weight:600;color:var(--txt);line-height:1;
-  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:5px}
-.stat .v .u{font-size:11.5px;font-weight:500;color:var(--mut)}
-.stat .v.warn{color:var(--amber)}.stat .v.bad{color:var(--red)}.stat .v.good{color:var(--grn)}
-
-/* legend */
-.legend{display:flex;flex-wrap:wrap;gap:7px 18px;padding:0 18px 16px;
-  font-family:var(--mono);font-size:11.5px;color:var(--mut)}
-.legend span{display:inline-flex;align-items:center;gap:7px}
-.legend i{width:9px;height:9px;border-radius:50%;flex:none}
-
-/* ---------- failure recovery timeline ---------- */
-.fr-scrubwrap{padding:6px 20px 20px}
-.fr-track{position:relative;height:34px;margin:6px 0 2px;cursor:pointer;user-select:none;touch-action:none}
-.fr-rail{position:absolute;left:0;right:0;top:50%;height:8px;transform:translateY(-50%);
-  border-radius:6px;background:var(--panel3);overflow:hidden;border:1px solid var(--line)}
-.fr-seg{position:absolute;top:0;bottom:0}
-.fr-fill{position:absolute;left:0;top:50%;height:8px;transform:translateY(-50%);border-radius:6px;
-  background:color-mix(in oklch,var(--indigo) 55%,transparent);mix-blend-mode:normal;pointer-events:none;
-  box-shadow:inset 0 0 0 1px var(--indigo-line)}
-.fr-tick{position:absolute;top:50%;width:2px;height:18px;transform:translate(-1px,-50%);background:var(--line3);border-radius:2px}
-.fr-handle{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;
-  transform:translate(-50%,-50%);background:var(--txt);border:3px solid var(--bg);
-  box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 1px var(--line3);pointer-events:none;z-index:3}
-.fr-handle::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
-  transform:translate(-50%,-50%);background:var(--indigo-br)}
-.fr-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:7px}
-
-.fr-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border-top:1px solid var(--line)}
-.fr-state{padding:22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
-.fr-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
-  font-size:13px;font-weight:600;padding:7px 14px;border-radius:100px;border:1px solid;letter-spacing:.01em}
-.fr-pill .pd{width:8px;height:8px;border-radius:50%}
-.fr-state .big{font-size:15px;line-height:1.5;color:var(--txt2)}
-.fr-state .big b{color:var(--txt);font-weight:600}
-.fr-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:2px}
-.fr-meta .m{display:flex;flex-direction:column;gap:3px}
-.fr-meta .m .k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
-.fr-meta .m .v{font-family:var(--code);font-size:17px;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}
-.fr-attempts{display:flex;gap:7px;align-items:center;margin-top:2px}
-.fr-attempts .a{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
-  font-family:var(--code);font-size:12px;font-weight:600;border:1px solid var(--line2);background:var(--panel);color:var(--dim)}
-.fr-attempts .a.ok{border-color:var(--indigo-line);background:var(--indigo-soft);color:var(--indigo-br)}
-.fr-attempts .a.fail{border-color:color-mix(in oklch,var(--red) 40%,transparent);background:color-mix(in oklch,var(--red) 13%,transparent);color:var(--red)}
-.fr-attempts .a.dead{border-color:var(--line3);background:var(--panel3);color:var(--txt2)}
-
-.fr-log{padding:14px 6px 14px 0;max-height:268px;overflow:auto}
-.fr-log::-webkit-scrollbar{width:8px}.fr-log::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
-.fr-ev{display:flex;gap:12px;padding:8px 18px;align-items:flex-start;position:relative;opacity:.38;
-  transition:opacity .25s,background .25s}
-.fr-ev.on{opacity:1}
-.fr-ev.cur{background:var(--indigo-soft)}
-.fr-ev .dotcol{display:flex;flex-direction:column;align-items:center;flex:none;padding-top:3px}
-.fr-ev .ed{width:9px;height:9px;border-radius:50%;background:var(--dim);z-index:1}
-.fr-ev.on .ed{background:var(--c,var(--indigo))}
-.fr-ev .eline{width:2px;flex:1;background:var(--line2);margin:3px 0 -11px}
-.fr-ev:last-child .eline{display:none}
-.fr-ev .etxt{display:flex;flex-direction:column;gap:2px;min-width:0}
-.fr-ev .et{font-size:13.5px;font-weight:600;color:var(--txt2)}
-.fr-ev.on .et{color:var(--txt)}
-.fr-ev .ed2{font-family:var(--mono);font-size:11.5px;color:var(--mut);line-height:1.45}
-.fr-ev .ets{margin-left:auto;font-family:var(--code);font-size:11px;color:var(--dim);flex:none;padding-left:10px}
-
-/* ---------- worker scaling playground ---------- */
-.wp-grid{display:grid;grid-template-columns:268px 1fr;gap:0}
-.wp-ctl{padding:18px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
-.wp-field{display:flex;flex-direction:column;gap:9px}
-.wp-field .lab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
-.wp-field .lab .n{font-size:13px;font-weight:600;color:var(--txt2);display:flex;align-items:center;gap:7px}
-.wp-field .lab .n small{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--dim)}
-.wp-field .lab .val{font-family:var(--code);font-size:14px;font-weight:600;color:var(--indigo-br);font-variant-numeric:tabular-nums}
-.wp-range{appearance:none;-webkit-appearance:none;width:100%;height:6px;border-radius:5px;
-  background:var(--panel3);outline:none;cursor:pointer;border:1px solid var(--line)}
-.wp-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
-  background:var(--txt);border:3px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 1px var(--line3);cursor:pointer}
-.wp-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--txt);
-  border:3px solid var(--panel);box-shadow:0 0 0 1px var(--line3);cursor:pointer}
-.wp-range:disabled{opacity:.5}
-.wp-cap{font-family:var(--mono);font-size:11px;color:var(--mut);line-height:1.5;
-  border-top:1px dashed var(--line2);padding-top:14px}
-.wp-cap b{color:var(--txt2)}
-.wp-cap .verdict{display:block;margin-top:6px;font-weight:600}
-.wp-cap .verdict.good{color:var(--grn)}.wp-cap .verdict.warn{color:var(--amber)}.wp-cap .verdict.bad{color:var(--red)}
-
-.wp-charts{display:flex;flex-direction:column}
-.wp-chart{padding:14px 18px;border-bottom:1px solid var(--line)}
-.wp-chart:last-child{border-bottom:0}
-.wp-chart .ch-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
-.wp-chart .ch-hd .t{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:8px}
-.wp-chart .ch-hd .t i{width:9px;height:9px;border-radius:2px}
-.wp-chart .ch-hd .now{font-family:var(--code);font-size:16px;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}
-.wp-chart .ch-hd .now .u{font-size:11px;color:var(--mut);font-weight:500;margin-left:3px}
-.wp-canvas{width:100%;height:84px;display:block}
-
-/* CTA */
-.icta{max-width:760px;margin:18px auto 0;text-align:center;padding:56px 32px 8px}
-.icta h2{font-size:clamp(26px,3.2vw,38px);line-height:1.1;letter-spacing:-.03em;font-weight:600}
-.icta p{margin:14px auto 0;max-width:500px;font-size:16.5px;color:var(--mut);line-height:1.55}
-.icta .btns{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}
-
-/* reveal (matches landing) */
-.reveal{opacity:0;transform:translateY(18px)}
-.reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
-
-@media (max-width:860px){
-  .fr-grid{grid-template-columns:1fr}
-  .fr-state{border-right:0;border-bottom:1px solid var(--line)}
-  .wp-grid{grid-template-columns:1fr}
-  .wp-ctl{border-right:0;border-bottom:1px solid var(--line)}
-}
-@media (max-width:600px){
-  .demo-sec{padding:38px 18px}
-  .demo-controls{width:100%;margin-left:0}
-}
-
-/* ---------- workflow DAG (demo 04) ---------- */
-.wf-grid{display:grid;grid-template-columns:1fr 246px;gap:0}
-.wf-graph{padding:14px 8px 8px 14px;position:relative}
-.wf-graph svg{display:block;width:100%;height:auto;overflow:visible}
-.wf-node{cursor:pointer}
-.wf-node rect{transition:fill .25s,stroke .25s}
-.wf-side{border-left:1px solid var(--line);padding:18px 18px 16px;display:flex;flex-direction:column;gap:14px}
-.wf-side .sk{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
-.wf-seltype{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-family:var(--mono);
-  font-size:11px;font-weight:600;padding:5px 11px;border-radius:100px;border:1px solid var(--indigo-line);
-  background:var(--indigo-soft);color:var(--indigo-br)}
-.wf-selname{font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--txt);line-height:1.15}
-.wf-selname .mono{font-family:var(--code);font-size:13px;color:var(--mut);display:block;margin-top:3px;font-weight:500}
-.wf-rows{display:flex;flex-direction:column;gap:11px}
-.wf-row{display:flex;flex-direction:column;gap:3px}
-.wf-row .k{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
-.wf-row .v{font-size:13.5px;color:var(--txt2);line-height:1.45}
-.wf-row .v.mono{font-family:var(--code);font-variant-numeric:tabular-nums}
-.wf-depchips{display:flex;flex-wrap:wrap;gap:6px}
-.wf-depchips .dc{font-family:var(--mono);font-size:11px;color:var(--txt2);background:var(--panel);
-  border:1px solid var(--line2);border-radius:7px;padding:3px 8px}
-.wf-depchips .dc.none{color:var(--dim);border-style:dashed}
-.wf-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;font-weight:600}
-.wf-status .sd{width:9px;height:9px;border-radius:50%;background:var(--dim)}
-.wf-runbranch{margin-top:auto;border-top:1px dashed var(--line2);padding-top:14px}
-.wf-runbranch .ctl{width:100%;justify-content:center}
-.wf-runbranch .note{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:center;margin-top:9px;line-height:1.5}
-@media (max-width:860px){
-  .wf-grid{grid-template-columns:1fr}
-  .wf-side{border-left:0;border-top:1px solid var(--line)}
-  .wf-runbranch{margin-top:0}
-}
-
-/* ---------- embed mode (single demo inside homepage modal) ---------- */
-body[data-embed]{background:var(--bg)}
-body[data-embed] .nav,
-body[data-embed] .ihero,
-body[data-embed] .foot,
-body[data-embed] .bgfx,
-body[data-embed] #twkPanel{display:none !important}
-body[data-embed] main{position:static}
-body[data-embed] .demo-sec{display:none}
-body[data-embed] .demo-sec.embed-show{display:block;background:transparent;border:0;padding:22px 22px 30px}
-body[data-embed] .demo-head{margin-bottom:18px}
-body[data-embed] .demo-head h2{font-size:clamp(22px,2.6vw,28px)}
-
-/* ---------- mesh scheduling (demo 05) ---------- */
-.mesh-hint{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--dim);
-  padding-right:4px}
-.mesh-hint svg{width:14px;height:14px;color:var(--mut)}
-.mesh-node:focus-visible rect[data-rect],.mesh-node:focus-visible{outline:none}
-.mesh-node:focus-visible{outline:2px solid var(--indigo-line);outline-offset:2px;border-radius:12px}
-
-/* motion off (tweak or system pref) */
-[data-motion="off"] .demo-bar .title .ld,
-[data-motion="off"] .eyebrow .dot{animation:none}
diff --git a/docs/public/demos/interactive.html b/docs/public/demos/interactive.html
deleted file mode 100644
index db01fa90..00000000
--- a/docs/public/demos/interactive.html
+++ /dev/null
@@ -1,283 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="dark">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Interactive — taskito docs</title>
-<meta name="description" content="Seven runnable simulations — rate limiting, failure recovery, worker scaling, workflows, mesh routing, sagas, and a playground — built on SVG and Canvas 2D. No WebGL required.">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Fira+Code:wght@400;500;600&family=Shantell+Sans:wght@500;600;700&display=optional" rel="stylesheet">
-<link rel="stylesheet" href="theme.css">
-<link rel="stylesheet" href="interactive.css">
-<link rel="icon" type="image/svg+xml" href="favicon.svg">
-</head>
-<body data-page="interactive">
-<div class="bgfx"><div class="grid"></div></div>
-
-<!-- This file is the embed host for the homepage demo modal. It is loaded only
-     as interactive.html?embed=<demoId>; the page chrome (nav/hero/footer) was
-     removed since the modal is the sole entry point. -->
-<main>
-  <!-- DEMO 1 · RATE LIMITING -->
-  <section class="demo-sec" id="ratelimit">
-    <div class="demo-wrap">
-      <div class="demo-head reveal">
-        <div class="num">Rate limiting</div>
-        <h2>What happens when your provider says <span style="color:var(--red)">429</span>?</h2>
-        <p>Requests flow <b>your code → queue → workers → external API</b>. Flip the API to <b>Too Many Requests</b> and watch taskito hold the line: failed calls turn red, retry counters climb, an exponential <code>backoff</code> timer kicks in, and workers keep draining everything else. Nothing is dropped.</p>
-      </div>
-      <div class="demo-card reveal" id="rl-root"></div>
-    </div>
-  </section>
-
-  <!-- DEMO 2 · FAILURE RECOVERY -->
-  <section class="demo-sec" id="recovery" style="background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)">
-    <div class="demo-wrap">
-      <div class="demo-head reveal">
-        <div class="num">Failure recovery</div>
-        <h2>Scrub one job through its whole lifecycle.</h2>
-        <p>Drag the playhead across a single job's timeline — <b>queued → running → failed → retrying → running</b> — and watch the live state, attempt counter, and event log update at every step. Then switch the ending: does it <b>recover</b> on the last retry, or exhaust them and land in the <b>dead-letter queue</b>?</p>
-      </div>
-      <div class="demo-card reveal" id="fr-root"></div>
-    </div>
-  </section>
-
-  <!-- DEMO 3 · WORKER SCALING -->
-  <section class="demo-sec" id="scaling">
-    <div class="demo-wrap">
-      <div class="demo-head reveal">
-        <div class="num">Worker scaling</div>
-        <h2>Tune the pool. Watch throughput, depth, and latency react.</h2>
-        <p>A live discrete-event simulation. Move the sliders for <b>workers</b>, <b>concurrency</b>, <b>arrival rate</b>, and a per-second <b>rate limit</b> — the throughput, queue-depth, and latency charts respond in real time. Find the point where capacity meets demand, and the moment the queue runs away from you.</p>
-      </div>
-      <div class="demo-card reveal" id="wp-root"></div>
-    </div>
-  </section>
-
-  <!-- DEMO 4 · WORKFLOW DAG -->
-  <section class="demo-sec" id="workflow" style="background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)">
-    <div class="demo-wrap">
-      <div class="demo-head reveal">
-        <div class="num">Workflow execution</div>
-        <h2>Fire a DAG and watch execution propagate.</h2>
-        <p>A real dependency graph — <b>chains</b> run in sequence, <b>groups</b> fan out in parallel, a <b>chord</b> joins them back. Hit <b>Run</b> and each task lights up the moment its inputs are ready, or click any node to trace its downstream path and run just that branch.</p>
-      </div>
-      <div class="demo-card reveal" id="wf-root"></div>
-    </div>
-  </section>
-
-  <!-- DEMO 5 · MESH SCHEDULING -->
-  <section class="demo-sec" id="mesh">
-    <div class="demo-wrap">
-      <div class="demo-head reveal">
-        <div class="num">Mesh scheduling</div>
-        <h2>Route every job to the node built to run it.</h2>
-        <p>Because the queue lives in a shared store, any number of worker nodes pull from it — no broker. Each job's <b>routing key</b> sends it to the right pool (<code>gpu</code>, <code>default</code>, <code>email</code>). <b>Click any machine to drop it</b> and watch its work reroute across the rest of the mesh.</p>
-      </div>
-      <div class="demo-card reveal" id="mesh-root"></div>
-    </div>
-  </section>
-
-  <!-- DEMO 6 · SAGA / COMPENSATION -->
-  <section class="demo-sec" id="saga" style="background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)">
-    <div class="demo-wrap">
-      <div class="demo-head reveal">
-        <div class="num">Saga · compensation</div>
-        <h2>When a step fails, unwind the ones that already ran.</h2>
-        <p>A booking modeled as a saga — each step carries a compensating action. Pick where it <b>fails</b> and run it: forward steps commit one by one, then taskito fires the compensations in <b>reverse order</b> so nothing is left half-done. Either it all commits, or it all rolls back.</p>
-      </div>
-      <div class="demo-card reveal" id="saga-root"></div>
-    </div>
-  </section>
-
-  <!-- DEMO 7 · WORK-STEALING MESH -->
-  <section class="demo-sec" id="worksteal">
-    <div class="demo-wrap">
-      <div class="demo-head reveal">
-        <div class="num">Work-stealing</div>
-        <h2>Idle regions steal work from the busy ones.</h2>
-        <p>Run taskito in several regions and they gossip queue depth to each other. When one region's backlog spikes, an <b>idle peer pulls a batch over HTTP</b> and runs it — so no region drowns while another sits idle, and there's still no central broker. Hit <b>Burst</b> to overload a region and watch the mesh rebalance.</p>
-      </div>
-      <div class="demo-card reveal" id="worksteal-root"></div>
-    </div>
-  </section>
-
-</main>
-
-<script>
-/* embed mode: when loaded inside the homepage modal as
-   interactive.html?embed=<demo>&theme=<t>&accent=<hex>, strip the page
-   chrome down to a single demo and inherit the parent's theme + accent.
-   Runs before the demo scripts so only the requested demo mounts. */
-(function(){
-  var sp=new URLSearchParams(location.search);
-  var embed=sp.get('embed');
-  if(!embed) return;
-  var rootEl=document.documentElement;
-  var theme=sp.get('theme'); if(theme==='light'||theme==='dark') rootEl.setAttribute('data-theme',theme);
-  var accent=sp.get('accent');
-  if(accent && accent!=='brand'){
-    var dark=rootEl.getAttribute('data-theme')!=='light';
-    rootEl.style.setProperty('--indigo',accent);
-    rootEl.style.setProperty('--indigo-br','color-mix(in oklch,'+accent+' '+(dark?'82%':'72%')+', white)');
-    rootEl.style.setProperty('--indigo-dk','color-mix(in oklch,'+accent+' 78%, black)');
-    rootEl.style.setProperty('--indigo-soft', dark?'color-mix(in oklch,'+accent+' 15%, transparent)':'color-mix(in oklch,'+accent+' 11%, white)');
-    rootEl.style.setProperty('--indigo-line','color-mix(in oklch,'+accent+' '+(dark?'28%':'26%')+', transparent)');
-  }
-  document.body.setAttribute('data-embed',embed);
-  // keep only the requested demo: remove the other demo roots so their scripts bail
-  var MAP={ratelimit:'rl-root',recovery:'fr-root',scaling:'wp-root',workflow:'wf-root',mesh:'mesh-root',saga:'saga-root',worksteal:'worksteal-root'};
-  Object.keys(MAP).forEach(function(k){ if(k!==embed){ var r=document.getElementById(MAP[k]); if(r) r.remove(); } });
-  var sec=document.getElementById(embed);
-  if(sec){
-    sec.classList.add('embed-show');
-    // landing.js (the scroll-reveal observer) is stripped in embed mode, so
-    // reveal this demo's `.reveal` children directly — they default to opacity:0.
-    [].forEach.call(sec.querySelectorAll('.reveal'), function(el){ el.classList.add('in'); });
-  }
-})();
-</script>
-<script src="demo-ratelimit.js"></script>
-<script src="demo-recovery.js"></script>
-<script src="demo-playground.js"></script>
-<script src="demo-workflow.js"></script>
-<script src="demo-mesh.js"></script>
-<script src="demo-saga.js"></script>
-<script src="demo-worksteal.js"></script>
-
-<!-- ===== Tweaks ===== -->
-<style>
-.twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:252px;
-  display:flex;flex-direction:column;
-  background:color-mix(in oklch,var(--panel) 82%,transparent);color:var(--txt);
-  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
-  border:1px solid var(--line2);border-radius:14px;
-  box-shadow:var(--shadow-lg),0 0 0 1px var(--line);
-  font-family:var(--sans);overflow:hidden}
-.twk-panel[hidden]{display:none}
-.twk-hd{display:flex;align-items:center;justify-content:space-between;padding:11px 9px 11px 15px;user-select:none}
-.twk-hd b{font-size:13px;font-weight:600;letter-spacing:-.01em}
-.twk-x{appearance:none;border:0;background:transparent;color:var(--mut);width:24px;height:24px;
-  border-radius:7px;cursor:pointer;font-size:13px;line-height:1}
-.twk-x:hover{background:var(--panel3);color:var(--txt)}
-.twk-body{padding:2px 15px 16px;display:flex;flex-direction:column;gap:11px}
-.twk-sect{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;
-  text-transform:uppercase;color:var(--dim);padding-top:4px}
-.twk-chips{display:flex;gap:7px}
-.twk-chip{position:relative;appearance:none;flex:1;min-width:0;height:38px;padding:0;border:0;
-  border-radius:9px;cursor:pointer;background:var(--c);
-  box-shadow:0 0 0 1px var(--line2),0 1px 2px rgba(0,0,0,.12);transition:transform .12s,box-shadow .12s}
-.twk-chip:hover{transform:translateY(-1px)}
-.twk-chip[data-on="1"]{box-shadow:0 0 0 2px var(--txt),0 2px 7px rgba(0,0,0,.2)}
-.twk-chip svg{position:absolute;top:50%;left:50%;width:16px;height:16px;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
-.twk-seg2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
-.twk-seg2.three{grid-template-columns:1fr 1fr 1fr}
-.twk-seg2 button{appearance:none;border:1px solid var(--line2);background:var(--panel);color:var(--txt2);
-  border-radius:9px;padding:9px 8px;cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:600;
-  transition:border-color .12s,background .12s,color .12s}
-.twk-seg2 button:hover{border-color:var(--line3)}
-.twk-seg2 button[data-on="1"]{border-color:var(--indigo);background:var(--indigo-soft);color:var(--indigo-br)}
-.twk-hint{font-size:11px;color:var(--dim);line-height:1.45}
-</style>
-<div id="twkPanel" class="twk-panel" data-omelette-chrome hidden>
-  <div class="twk-hd"><b>Tweaks</b><button class="twk-x" id="twkClose" aria-label="Close tweaks">✕</button></div>
-  <div class="twk-body">
-    <div class="twk-sect">Accent</div>
-    <div class="twk-chips" id="twkAccent"></div>
-    <div class="twk-hint">Recolors buttons, links, charts, and flow accents across every demo.</div>
-    <div class="twk-sect">Motion</div>
-    <div class="twk-seg2" id="twkMotion"></div>
-    <div class="twk-hint">“Off” freezes auto-animation — demos still respond to your input and stats stay live.</div>
-    <div class="twk-sect">Density</div>
-    <div class="twk-seg2" id="twkDensity"></div>
-  </div>
-</div>
-<script>
-var TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
-  "accent": "brand",
-  "motion": "on",
-  "density": "spacious"
-}/*EDITMODE-END*/;
-(function(){
-  var root=document.documentElement;
-  var panel=document.getElementById('twkPanel');
-  var PRESETS=[
-    {id:'brand', color:'#1f9d54'},
-    {id:'#0fb5ae', color:'#0fb5ae'},
-    {id:'#3b82f6', color:'#3b82f6'},
-    {id:'#8b5cf6', color:'#8b5cf6'},
-    {id:'#f59e0b', color:'#f59e0b'}
-  ];
-  var ACCENT_VARS=['--indigo','--indigo-br','--indigo-dk','--indigo-soft','--indigo-line'];
-  var CHECK='<svg viewBox="0 0 14 14" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.4 5.8 10 11 4.3"/></svg>';
-  var state={
-    accent:(new URLSearchParams(location.search).get('accent'))||(TWEAK_DEFAULTS&&TWEAK_DEFAULTS.accent)||'brand',
-    motion:(TWEAK_DEFAULTS&&TWEAK_DEFAULTS.motion)||'on',
-    density:(TWEAK_DEFAULTS&&TWEAK_DEFAULTS.density)||'comfortable'
-  };
-  function clearAccent(){ ACCENT_VARS.forEach(function(p){ root.style.removeProperty(p); }); }
-  function applyAccent(hex){
-    var dark=root.getAttribute('data-theme')!=='light';
-    root.style.setProperty('--indigo',hex);
-    root.style.setProperty('--indigo-br','color-mix(in oklch,'+hex+' '+(dark?'82%':'72%')+', white)');
-    root.style.setProperty('--indigo-dk','color-mix(in oklch,'+hex+' 78%, black)');
-    root.style.setProperty('--indigo-soft', dark?'color-mix(in oklch,'+hex+' 15%, transparent)':'color-mix(in oklch,'+hex+' 11%, white)');
-    root.style.setProperty('--indigo-line','color-mix(in oklch,'+hex+' '+(dark?'28%':'26%')+', transparent)');
-  }
-  var chipsEl=document.getElementById('twkAccent');
-  function paintAccent(){
-    if(state.accent==='brand') clearAccent(); else applyAccent(state.accent);
-    [].forEach.call(chipsEl.children,function(b){ b.setAttribute('data-on', b.dataset.id===state.accent?'1':'0'); b.innerHTML=b.dataset.id===state.accent?CHECK:''; });
-    if(window.__taskitoDemos&&window.__taskitoDemos.recolor) window.__taskitoDemos.recolor();
-  }
-  PRESETS.forEach(function(p){
-    var b=document.createElement('button');
-    b.type='button'; b.className='twk-chip'; b.dataset.id=p.id;
-    b.style.setProperty('--c',p.color); b.setAttribute('aria-label',p.id==='brand'?'Brand green':p.id);
-    b.addEventListener('click',function(){ state.accent=p.id; paintAccent(); persist('accent',p.id); });
-    chipsEl.appendChild(b);
-  });
-  // motion
-  var motionEl=document.getElementById('twkMotion');
-  [['on','Animated'],['off','Static']].forEach(function(o){
-    var b=document.createElement('button'); b.type='button'; b.dataset.id=o[0]; b.textContent=o[1];
-    b.addEventListener('click',function(){ state.motion=o[0]; applyMotion(); persist('motion',o[0]); });
-    motionEl.appendChild(b);
-  });
-  function applyMotion(){
-    root.setAttribute('data-motion', state.motion);
-    window.__motionOff = (state.motion==='off');
-    [].forEach.call(motionEl.children,function(b){ b.setAttribute('data-on', b.dataset.id===state.motion?'1':'0'); });
-    if(window.__taskitoDemos&&window.__taskitoDemos.motion) window.__taskitoDemos.motion(state.motion==='off');
-  }
-  // density
-  var densEl=document.getElementById('twkDensity');
-  densEl.classList.add('three');
-  [['compact','Compact'],['comfortable','Cozy'],['spacious','Roomy']].forEach(function(o){
-    var b=document.createElement('button'); b.type='button'; b.dataset.id=o[0]; b.textContent=o[1];
-    b.addEventListener('click',function(){ state.density=o[0]; applyDensity(); persist('density',o[0]); });
-    densEl.appendChild(b);
-  });
-  function applyDensity(){
-    root.setAttribute('data-density', state.density);
-    [].forEach.call(densEl.children,function(b){ b.setAttribute('data-on', b.dataset.id===state.density?'1':'0'); });
-  }
-  // Target the embedding parent's exact origin (from the referrer) instead of
-  // broadcasting to "*", and ignore inbound messages from anywhere else.
-  var parentOrigin=(function(){ try{ return new URL(document.referrer).origin; }catch(_){ return window.location.origin; } })();
-  function persist(key,val){ try{ window.parent.postMessage({type:'__edit_mode_set_keys',edits:(function(){var o={};o[key]=val;return o;})()},parentOrigin); }catch(e){} }
-
-  new MutationObserver(function(){ if(state.accent!=='brand') applyAccent(state.accent); })
-    .observe(root,{attributes:true,attributeFilter:['data-theme']});
-
-  function show(){ panel.hidden=false; } function hide(){ panel.hidden=true; }
-  document.getElementById('twkClose').addEventListener('click',function(){ hide(); try{ window.parent.postMessage({type:'__edit_mode_dismissed'},parentOrigin); }catch(e){} });
-  window.addEventListener('message',function(e){ if(e.origin!==parentOrigin||e.source!==window.parent) return; var t=e&&e.data&&e.data.type; if(t==='__activate_edit_mode') show(); else if(t==='__deactivate_edit_mode') hide(); });
-  try{ window.parent.postMessage({type:'__edit_mode_available'},parentOrigin); }catch(e){}
-
-  paintAccent(); applyMotion(); applyDensity();
-})();
-</script>
-</body>
-</html>
diff --git a/docs/public/demos/theme.css b/docs/public/demos/theme.css
deleted file mode 100644
index dadc97ea..00000000
--- a/docs/public/demos/theme.css
+++ /dev/null
@@ -1,254 +0,0 @@
-/* ============================================================
-   Taskito · Midnight theme
-   Dark-first, electric indigo, IBM Plex. Light mode via [data-theme].
-   ============================================================ */
-
-:root{
-  /* dark (default) */
-  --bg:#08080c;
-  --bg-soft:#0c0c13;
-  --panel:#0f0f17;
-  --panel2:#13131d;
-  --panel3:#181824;
-  --line:rgba(255,255,255,.08);
-  --line2:rgba(255,255,255,.13);
-  --line3:rgba(255,255,255,.20);
-  --txt:#ececf4;
-  --txt2:#c3c2d4;
-  --mut:#8c8ca3;
-  --dim:#5c5c70;
-  --faint:#3a3a48;
-
-  /* Taskito brand green (matches the product/dashboard). Var names kept for compatibility. */
-  --indigo:#1f9d54;
-  --indigo-br:#3bbf72;
-  --indigo-dk:#15803d;
-  --indigo-soft:rgba(31,157,84,.12);
-  --indigo-line:rgba(31,157,84,.26);
-  --cyan:#29b8a8;
-  --grn:#4ec985;
-  --amber:#ffb86b;
-  --red:#ff6b6b;
-
-  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
-  --code:'JetBrains Mono','IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
-  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
-  --hand:'Shantell Sans',cursive;
-
-  --shadow-lg:0 40px 90px -40px rgba(0,0,0,.7);
-  --shadow-md:0 20px 50px -30px rgba(0,0,0,.6);
-  --radius:14px;
-
-  --maxw:1200px;
-}
-
-[data-theme="light"]{
-  /* warm paper light mode — matches the Taskito console */
-  --bg:#f6f4ee;
-  --bg-soft:#fbf9f3;
-  --panel:#ffffff;
-  --panel2:#f2efe7;
-  --panel3:#eae5da;
-  --line:rgba(45,38,18,.10);
-  --line2:rgba(45,38,18,.15);
-  --line3:rgba(45,38,18,.22);
-  --txt:#1b1a15;
-  --txt2:#35332c;
-  --mut:#615d52;
-  --dim:#8b877a;
-  --faint:#bdb9ab;
-
-  --indigo:#10a152;
-  --indigo-br:#13a44e;
-  --indigo-dk:#0a7c3d;
-  --indigo-soft:rgba(16,161,82,.10);
-  --indigo-line:rgba(16,161,82,.26);
-  --cyan:#0d9488;
-  --grn:#15a34a;
-  --amber:#c2410c;
-  --red:#dc2626;
-
-  --shadow-lg:0 40px 90px -45px rgba(60,50,20,.20);
-  --shadow-md:0 24px 50px -34px rgba(60,50,20,.16);
-}
-
-*{box-sizing:border-box;margin:0;padding:0}
-html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
-body{
-  background:var(--bg);
-  color:var(--txt);
-  font-family:var(--sans);
-  -webkit-font-smoothing:antialiased;
-  line-height:1.5;
-  overflow-x:hidden;
-}
-body.no-anim *{animation:none!important;transition:none!important}
-a{color:inherit;text-decoration:none}
-::selection{background:var(--indigo);color:#fff}
-
-/* color theme transition */
-body, .nav, .panel, .card, .btn, .term, .foot, input, .chip{
-  transition:background-color .4s ease, border-color .4s ease, color .4s ease;
-}
-
-/* ---------- shared atoms ---------- */
-.eyebrow{
-  display:inline-flex;align-items:center;gap:9px;
-  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.02em;
-  color:var(--indigo-br);
-  background:var(--indigo-soft);
-  border:1px solid var(--indigo-line);
-  padding:6px 13px;border-radius:100px;
-}
-.eyebrow .dot{
-  width:6px;height:6px;border-radius:50%;background:var(--indigo-br);
-  box-shadow:0 0 0 4px var(--indigo-soft);
-  animation:blip 2.4s ease-in-out infinite;
-}
-@keyframes blip{0%,100%{opacity:.5}50%{opacity:1}}
-
-.btn{
-  font-family:var(--sans);font-size:14.5px;font-weight:600;
-  padding:12px 20px;border-radius:12px;
-  display:inline-flex;align-items:center;gap:8px;
-  border:1px solid transparent;cursor:pointer;
-  transition:transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s;
-  white-space:nowrap;
-}
-.btn svg{width:16px;height:16px}
-.btn.pri{
-  background:linear-gradient(180deg,var(--indigo),var(--indigo-dk));color:#fff;
-  box-shadow:0 10px 22px -14px var(--indigo),inset 0 1px 0 rgba(255,255,255,.16);
-}
-.btn.pri:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px var(--indigo),inset 0 1px 0 rgba(255,255,255,.2)}
-.btn.sec{background:var(--panel);border-color:var(--line2);color:var(--txt)}
-.btn.sec:hover{transform:translateY(-2px);border-color:var(--indigo)}
-.btn.gho{color:var(--mut);background:transparent}
-.btn.gho:hover{color:var(--txt)}
-
-.kicker{
-  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;
-  color:var(--indigo-br);text-transform:uppercase;
-}
-
-/* section scaffolding */
-.section{padding:96px 32px;position:relative}
-.wrap{max-width:var(--maxw);margin:0 auto}
-.section-head{max-width:640px;margin:0 auto 56px;text-align:center}
-.section-head h2{
-  font-size:clamp(30px,3.6vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:600;
-  margin-top:14px;
-}
-.section-head p{margin-top:16px;font-size:18px;line-height:1.55;color:var(--mut)}
-
-/* code tokens */
-.cmt{color:var(--dim)}.kw{color:#c98bff}.def{color:var(--cyan)}.fn{color:var(--indigo-br)}
-.str{color:#9ce08a}.num{color:var(--amber)}.pn{color:var(--mut)}.var{color:var(--txt)}
-[data-theme="light"] .kw{color:#8b3cf0}[data-theme="light"] .str{color:#1a8f3a}
-[data-theme="light"] .def{color:#0e9b91}
-
-/* ---------- nav ---------- */
-.nav{
-  position:sticky;top:0;z-index:50;
-  display:flex;align-items:center;gap:28px;
-  padding:16px 32px;
-  background:color-mix(in oklch,var(--bg) 78%, transparent);
-  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
-  border-bottom:1px solid var(--line);
-}
-.brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;letter-spacing:-.02em;font-size:17px}
-.logo{
-  width:27px;height:27px;border-radius:8px;position:relative;flex:none;
-  background:linear-gradient(135deg,var(--indigo-br),var(--indigo-dk));
-  box-shadow:0 0 0 1px var(--line2),0 6px 18px -6px var(--indigo);
-  display:grid;place-items:center;
-}
-/* real logo mark (tile) */
-.logo-mark{display:inline-flex;align-items:center;flex:none}
-.logo-mark svg{height:26px;width:auto;display:block;border-radius:7px;box-shadow:0 4px 12px -4px color-mix(in oklch,var(--indigo) 55%, transparent)}
-.logo-mark rect{fill:var(--indigo)}
-.brand .bto{color:var(--indigo-br)}
-.navlinks{display:flex;gap:22px;font-size:14px;color:var(--mut);font-weight:500}
-.navlinks a{transition:color .15s;position:relative}
-.navlinks a:hover{color:var(--txt)}
-.navlinks a.active{color:var(--txt)}
-.navright{margin-left:auto;display:flex;align-items:center;gap:12px}
-.kbar{
-  display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line2);
-  border-radius:10px;color:var(--dim);font-size:12.5px;font-family:var(--mono);background:var(--panel);cursor:pointer;
-  transition:border-color .2s;
-}
-.kbar:hover{border-color:var(--line3)}
-.kbar kbd{font-family:var(--mono);border:1px solid var(--line2);border-radius:4px;padding:0 5px;font-size:11px;color:var(--mut)}
-.icon-btn{
-  width:36px;height:36px;border:1px solid var(--line2);border-radius:10px;
-  display:grid;place-items:center;color:var(--mut);background:var(--panel);cursor:pointer;
-  transition:color .2s,border-color .2s;
-}
-.icon-btn:hover{color:var(--txt);border-color:var(--line3)}
-.icon-btn svg{width:17px;height:17px}
-.theme-toggle .sun{display:none}
-[data-theme="light"] .theme-toggle .sun{display:block}
-[data-theme="light"] .theme-toggle .moon{display:none}
-
-/* ---------- footer ---------- */
-.foot{
-  border-top:1px solid var(--line);
-  background:var(--bg-soft);
-  padding:64px 32px 40px;
-}
-.foot-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
-.foot-brand .brand{margin-bottom:14px}
-.foot-brand p{color:var(--mut);font-size:14px;line-height:1.6;max-width:280px}
-.foot-col h4{font-size:13px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin-bottom:16px;font-weight:600}
-.foot-col a{display:block;color:var(--mut);font-size:14px;padding:5px 0;transition:color .15s}
-.foot-col a:hover{color:var(--txt)}
-.foot-bottom{
-  max-width:var(--maxw);margin:48px auto 0;padding-top:24px;border-top:1px solid var(--line);
-  display:flex;align-items:center;justify-content:space-between;color:var(--dim);font-size:13px;font-family:var(--mono);
-}
-
-@media (max-width:880px){
-  .navlinks,.kbar{display:none}
-  .foot-grid{grid-template-columns:1fr 1fr}
-  .section{padding:72px 22px}
-}
-@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}
-
-/* ============================================================
-   ⌘K command palette (shared, all pages)
-   ============================================================ */
-.cmdk{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center}
-.cmdk.show{display:flex}
-.cmdk-backdrop{position:absolute;inset:0;background:color-mix(in oklch,var(--bg) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
-.cmdk-panel{position:relative;margin-top:11vh;width:min(620px,92vw);background:var(--panel);border:1px solid var(--line2);
-  border-radius:16px;box-shadow:0 40px 100px -30px rgba(0,0,0,.6),0 0 0 1px var(--line);overflow:hidden;opacity:1;
-  animation:cmdkpop .18s cubic-bezier(.2,.7,.3,1)}
-@keyframes cmdkpop{from{transform:translateY(-8px) scale(.98)}to{transform:none}}
-.cmdk-inputrow{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--line)}
-.cmdk-ic{width:19px;height:19px;color:var(--mut);flex:none}
-.cmdk-input{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-family:var(--sans);font-size:16.5px}
-.cmdk-input::placeholder{color:var(--dim)}
-.cmdk-esc{font-family:var(--mono);font-size:11px;color:var(--mut);border:1px solid var(--line2);border-radius:5px;padding:2px 7px;cursor:pointer}
-.cmdk-results{max-height:min(420px,56vh);overflow-y:auto;padding:8px}
-.cmdk-results::-webkit-scrollbar{width:8px}.cmdk-results::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
-.cmdk-group{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);
-  padding:12px 12px 6px;font-weight:600}
-.cmdk-item{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:11px;text-decoration:none;cursor:pointer}
-.cmdk-item.active{background:var(--indigo-soft)}
-.cmdk-it-ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
-  background:var(--panel2);border:1px solid var(--line2);color:var(--mut)}
-.cmdk-item.active .cmdk-it-ic{background:var(--panel);border-color:var(--indigo-line);color:var(--indigo-br)}
-.cmdk-it-ic svg{width:17px;height:17px}
-.cmdk-it-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
-.cmdk-it-t{font-size:14.5px;font-weight:600;color:var(--txt);display:flex;align-items:center;gap:8px}
-.cmdk-it-t em{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:500;color:var(--indigo-br);
-  background:var(--indigo-soft);border:1px solid var(--indigo-line);border-radius:5px;padding:1px 6px}
-.cmdk-it-d{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.cmdk-it-go{font-family:var(--mono);font-size:13px;color:var(--dim);opacity:0;flex:none}
-.cmdk-item.active .cmdk-it-go{opacity:1;color:var(--indigo-br)}
-.cmdk-empty{padding:34px 16px;text-align:center;color:var(--mut);font-size:14px}
-.cmdk-foot{display:flex;gap:18px;padding:11px 16px;border-top:1px solid var(--line);color:var(--dim);font-size:11.5px;font-family:var(--mono)}
-.cmdk-foot kbd{font-family:var(--mono);border:1px solid var(--line2);border-radius:4px;padding:0 5px;margin-right:3px;color:var(--mut)}
-.cmdk-foot span{display:flex;align-items:center;gap:3px}
-.kbar,.side-search{cursor:pointer}

From 031dfed54042b73c91c4597b79e2d67e3487f013 Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 15:10:47 +0530
Subject: [PATCH 11/14] fix(docs): guard demo registry lookup to own keys

---
 docs/app/components/demos/registry.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/docs/app/components/demos/registry.ts b/docs/app/components/demos/registry.ts
index fadd066c..0a9e4536 100644
--- a/docs/app/components/demos/registry.ts
+++ b/docs/app/components/demos/registry.ts
@@ -20,5 +20,8 @@ export const DEMO_COMPONENTS: Record<DemoId, LazyDemo> = {
 
 /** The React port for `id`, or `undefined` for an unknown demo id. */
 export function demoComponent(id: string): LazyDemo | undefined {
-  return DEMO_COMPONENTS[id as DemoId];
+  // Own-key check so prototype names (e.g. "__proto__") never resolve.
+  return Object.hasOwn(DEMO_COMPONENTS, id)
+    ? DEMO_COMPONENTS[id as DemoId]
+    : undefined;
 }

From 320ae8be2815d82c89c64317dd1bd4f420f9bb3a Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 15:10:47 +0530
Subject: [PATCH 12/14] fix(docs): accept DemoProps + fix mesh token cap
 off-by-one

---
 docs/app/components/demos/mesh-demo.tsx      | 5 +++--
 docs/app/components/demos/ratelimit-demo.tsx | 3 ++-
 docs/app/components/demos/saga-demo.tsx      | 3 ++-
 docs/app/components/demos/workflow-demo.tsx  | 3 ++-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs/app/components/demos/mesh-demo.tsx b/docs/app/components/demos/mesh-demo.tsx
index ed24943a..b5f37054 100644
--- a/docs/app/components/demos/mesh-demo.tsx
+++ b/docs/app/components/demos/mesh-demo.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { useRafLoop, useReducedMotion } from "./lib";
+import type { DemoProps } from "./types";
 
 /*
  * Mesh scheduling demo — jobs carry a routing key; the brokerless mesh sends
@@ -120,7 +121,7 @@ function freshSim(): Sim {
   };
 }
 
-export default function MeshDemo() {
+export default function MeshDemo(_props: DemoProps) {
   const reduced = useReducedMotion();
   const simRef = useRef<Sim>(freshSim());
   const [, repaint] = useReducer((n: number) => n + 1, 0);
@@ -141,7 +142,7 @@ export default function MeshDemo() {
     (n: number) => {
       const sim = simRef.current;
       for (let i = 0; i < n; i++) {
-        if (sim.tokens.length > MAX_TOKENS) break;
+        if (sim.tokens.length >= MAX_TOKENS) break;
         const p = poolByKey(pickKey());
         sim.tokens.push({
           id: sim.ids++,
diff --git a/docs/app/components/demos/ratelimit-demo.tsx b/docs/app/components/demos/ratelimit-demo.tsx
index 3d0713e4..8bcbe1e0 100644
--- a/docs/app/components/demos/ratelimit-demo.tsx
+++ b/docs/app/components/demos/ratelimit-demo.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { useRafLoop, useReducedMotion } from "./lib";
+import type { DemoProps } from "./types";
 
 /*
  * API rate-limiting demo — requests flow producer → queue → worker pool →
@@ -91,7 +92,7 @@ function colorFor(t: Token): string {
 }
 const queuedList = (sim: Sim) => sim.tokens.filter((t) => t.phase === "queued");
 
-export default function RateLimitDemo() {
+export default function RateLimitDemo(_props: DemoProps) {
   const reduced = useReducedMotion();
   const simRef = useRef<Sim>(freshSim());
   const [apiOk, setApiOk] = useState(true);
diff --git a/docs/app/components/demos/saga-demo.tsx b/docs/app/components/demos/saga-demo.tsx
index ff6c3f29..04c9666f 100644
--- a/docs/app/components/demos/saga-demo.tsx
+++ b/docs/app/components/demos/saga-demo.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { useRafLoop, useReducedMotion } from "./lib";
+import type { DemoProps } from "./types";
 
 /*
  * Saga / compensation demo — a distributed transaction as a chain of steps,
@@ -123,7 +124,7 @@ function instantSim(failAt: number): Sim {
   return sim;
 }
 
-export default function SagaDemo() {
+export default function SagaDemo(_props: DemoProps) {
   const reduced = useReducedMotion();
   const simRef = useRef<Sim>(freshSim());
   const [failAt, setFailAt] = useState(1);
diff --git a/docs/app/components/demos/workflow-demo.tsx b/docs/app/components/demos/workflow-demo.tsx
index f7230a5a..66fb796b 100644
--- a/docs/app/components/demos/workflow-demo.tsx
+++ b/docs/app/components/demos/workflow-demo.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { useRafLoop, useReducedMotion } from "./lib";
+import type { DemoProps } from "./types";
 
 /*
  * Workflow DAG demo — a real dependency graph (chain → parallel group → chord
@@ -200,7 +201,7 @@ function freshSim(): Sim {
   return { st, finishAt: {}, t0: 0, elapsed: 0, runMask: null, lit: new Set() };
 }
 
-export default function WorkflowDemo() {
+export default function WorkflowDemo(_props: DemoProps) {
   const reduced = useReducedMotion();
   const simRef = useRef<Sim>(freshSim());
   const lenRef = useRef<Map<string, number>>(new Map());

From 684644c427570da977043e141371d2e66f88066e Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 15:10:47 +0530
Subject: [PATCH 13/14] fix(docs): sync recovery play state on reduced-motion
 toggle

---
 docs/app/components/demos/recovery-demo.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/docs/app/components/demos/recovery-demo.tsx b/docs/app/components/demos/recovery-demo.tsx
index 1205fdc5..c0fcb816 100644
--- a/docs/app/components/demos/recovery-demo.tsx
+++ b/docs/app/components/demos/recovery-demo.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { useRafLoop, useReducedMotion } from "./lib";
+import type { DemoProps } from "./types";
 
 /*
  * Failure-recovery demo — a scrubbable timeline of one job's lifecycle. Drag the
@@ -141,7 +142,7 @@ const durationOf = (events: Event[]) => events[events.length - 1].t + TAIL;
 
 type AttemptResult = "" | "pending" | "fail" | "ok" | "dead";
 
-export default function RecoveryDemo() {
+export default function RecoveryDemo(_props: DemoProps) {
   const reduced = useReducedMotion();
   const [scen, setScen] = useState<"recover" | "dlq">("recover");
   const [playing, setPlaying] = useState(false);
@@ -173,6 +174,15 @@ export default function RecoveryDemo() {
 
   useRafLoop(tick, playing && !reduced);
 
+  // Reduced motion mid-playback: jump to the end and drop the stale "Pause" state.
+  useEffect(() => {
+    if (reduced && playing) {
+      playRef.current = DUR;
+      setPlaying(false);
+      repaint();
+    }
+  }, [reduced, playing, DUR]);
+
   const startPlay = useCallback(() => {
     if (reduced) {
       playRef.current = DUR;

From 24e5dd1d6abfedf47ecfce673e70b74cdba35de4 Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sun, 21 Jun 2026 15:10:47 +0530
Subject: [PATCH 14/14] fix(docs): freeze work-steal sim on pause via virtual
 clock + aria-pressed

---
 docs/app/components/demos/worksteal-demo.tsx | 33 ++++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/docs/app/components/demos/worksteal-demo.tsx b/docs/app/components/demos/worksteal-demo.tsx
index 6d9dcdae..a3bf047d 100644
--- a/docs/app/components/demos/worksteal-demo.tsx
+++ b/docs/app/components/demos/worksteal-demo.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { useRafLoop, useReducedMotion } from "./lib";
+import type { DemoProps } from "./types";
 
 /*
  * Multi-region work-stealing demo — taskito runs in several regions that gossip
@@ -265,6 +266,9 @@ interface Sim {
   tokens: StealToken[];
   linkSolid: number[];
   stealAcc: number;
+  /** Virtual sim time (ms) — advances only while running, so pause freezes it. */
+  clock: number;
+  /** Last wall-clock RAF timestamp, for computing real dt. */
   last: number;
   ids: number;
 }
@@ -279,6 +283,7 @@ function freshSim(): Sim {
     tokens: [],
     linkSolid: LINKS.map(() => 0),
     stealAcc: 0,
+    clock: 0,
     last: 0,
     ids: 0,
   };
@@ -296,7 +301,7 @@ function poisson(m: number): number {
   return k - 1;
 }
 
-export default function WorkStealDemo() {
+export default function WorkStealDemo(_props: DemoProps) {
   const reduced = useReducedMotion();
   const simRef = useRef<Sim>(freshSim());
   const [paused, setPaused] = useState(false);
@@ -378,14 +383,17 @@ export default function WorkStealDemo() {
   }, []);
 
   const loop = useCallback(
-    (now: number) => {
+    (wall: number) => {
       const sim = simRef.current;
-      if (!sim.last) sim.last = now;
-      const dt = Math.min((now - sim.last) / 1000, 0.05);
-      sim.last = now;
-      stepSim(sim, now, dt);
-      trySteal(sim, now, dt);
-      moveTokens(sim, now);
+      if (!sim.last) sim.last = wall;
+      const dt = Math.min((wall - sim.last) / 1000, 0.05);
+      sim.last = wall;
+      // Advance a virtual clock by real dt only while running, so a pause truly
+      // freezes time — deadlines never expire en masse on resume.
+      sim.clock += dt * 1000;
+      stepSim(sim, sim.clock, dt);
+      trySteal(sim, sim.clock, dt);
+      moveTokens(sim, sim.clock);
       repaint();
     },
     [stepSim, trySteal, moveTokens],
@@ -394,8 +402,7 @@ export default function WorkStealDemo() {
   useEffect(() => {
     const sim = freshSim();
     if (reduced) {
-      const now = performance.now();
-      for (const r of REG) sim.reg[r.id].busy = [now + 1, 0];
+      for (const r of REG) sim.reg[r.id].busy = [1, 0];
     }
     simRef.current = sim;
     repaint();
@@ -404,7 +411,7 @@ export default function WorkStealDemo() {
   useRafLoop(loop, !paused && !reduced);
 
   const sim = simRef.current;
-  const now = performance.now();
+  const now = sim.clock;
   let hotQ = 0;
   for (const r of REG) {
     if (sim.reg[r.id].q > hotQ) hotQ = sim.reg[r.id].q;
@@ -418,8 +425,7 @@ export default function WorkStealDemo() {
   const reset = () => {
     const fresh = freshSim();
     if (reduced) {
-      const t = performance.now();
-      for (const r of REG) fresh.reg[r.id].busy = [t + 1, 0];
+      for (const r of REG) fresh.reg[r.id].busy = [1, 0];
     }
     simRef.current = fresh;
     repaint();
@@ -465,6 +471,7 @@ export default function WorkStealDemo() {
           <button
             type="button"
             className="ctl"
+            aria-pressed={paused}
             onClick={() => setPaused((p) => !p)}
           >
             {paused ? (