hayao 0.3.0 → 0.4.0

package/dist/index.js

@@ -254,6 +254,32 @@ function invertTransform(m) {
   };
 }
 
+// src/core/projection.ts
+function iso(cfg) {
+  const { tileW, tileH } = cfg;
+  const origin = cfg.origin ? { x: cfg.origin.x, y: cfg.origin.y } : { x: 0, y: 0 };
+  const elevStep = cfg.elevStep ?? tileH;
+  const hw = tileW / 2;
+  const hh = tileH / 2;
+  return {
+    tileW,
+    tileH,
+    origin,
+    elevStep,
+    toScreen(gx, gy, elev = 0) {
+      return {
+        x: origin.x + (gx - gy) * hw,
+        y: origin.y + (gx + gy) * hh - elev * elevStep
+      };
+    },
+    toGrid(sx, sy) {
+      const dx = (sx - origin.x) / hw;
+      const dy = (sy - origin.y) / hh;
+      return { x: (dx + dy) / 2, y: (dy - dx) / 2 };
+    }
+  };
+}
+
 // src/core/rng.ts
 function splitmix32(seed) {
   let a = seed >>> 0;
@@ -347,6 +373,21 @@ var Rng = class _Rng {
     [this.s0, this.s1, this.s2, this.s3] = state.s;
   }
 };
+var __noiseBits = new DataView(new ArrayBuffer(8));
+function hashNoise(...values) {
+  let h = 2654435769 >>> 0;
+  for (const v of values) {
+    __noiseBits.setFloat64(0, v);
+    h = Math.imul(h ^ __noiseBits.getUint32(0), 2246822507) >>> 0;
+    h = (h ^ h >>> 13) >>> 0;
+    h = Math.imul(h ^ __noiseBits.getUint32(4), 3266489909) >>> 0;
+    h = (h ^ h >>> 16) >>> 0;
+  }
+  h = Math.imul(h ^ h >>> 16, 2246822507) >>> 0;
+  h = Math.imul(h ^ h >>> 13, 3266489909) >>> 0;
+  h = (h ^ h >>> 16) >>> 0;
+  return h / 4294967296;
+}
 function hashString(str) {
   let h = 2166136261 >>> 0;
   for (let i = 0; i < str.length; i++) {
@@ -540,6 +581,24 @@ var Node = class {
    * particles, tweened positions) never pollutes the canonical, verifiable state.
    */
   cosmetic = false;
+  /**
+   * Pause behaviour for this subtree (see PauseMode). Serialized only when
+   * non-default, so existing trees keep their pinned hashes.
+   */
+  pauseMode = "inherit";
+  /**
+   * Screen-space overlay: this subtree ignores the camera — its transforms
+   * compose from IDENTITY (design-space coordinates) — and every command it
+   * emits is tagged `layer: 1` so HUD/overlay content always paints above the
+   * world, whatever the z values. Serialized only when true.
+   */
+  screenSpace = false;
+  /**
+   * Optional local anchor: when set, rotation/scale pivot around this point in
+   * local space instead of the node origin (the local transform gains a
+   * trailing translation of −pivot). Serialized only when set.
+   */
+  pivot;
   parent = null;
   children = [];
   world = null;
@@ -562,6 +621,21 @@ var Node = class {
     this.z = config.z ?? 0;
     this.visible = config.visible ?? true;
   }
+  // ── Convenience accessors ─────────────────────────────────────
+  /** Shorthand for `pos.x` — reads and writes the same vector. */
+  get x() {
+    return this.pos.x;
+  }
+  set x(v) {
+    this.pos.x = v;
+  }
+  /** Shorthand for `pos.y` — reads and writes the same vector. */
+  get y() {
+    return this.pos.y;
+  }
+  set y(v) {
+    this.pos.y = v;
+  }
   // ── Tree structure ─────────────────────────────────────────────
   addChild(child) {
     child.parent = this;
@@ -580,6 +654,18 @@ var Node = class {
   free() {
     this.world?.requestFree(this);
   }
+  /**
+   * Immediately exit + detach ALL children. Unlike `free()` this is NOT
+   * deferred — the children are gone when the call returns (safe here because
+   * it iterates a snapshot of the array). Use it to rebuild a container's
+   * contents wholesale; prefer `free()` for removals during an update.
+   */
+  clearChildren() {
+    for (const c of this.children.slice()) {
+      c.exitTree();
+      this.removeChild(c);
+    }
+  }
   /** Depth-first find by name. */
   find(name) {
     if (this.name === name) return this;
@@ -589,6 +675,15 @@ var Node = class {
     }
     return null;
   }
+  /** Depth-first find of the first node (self included) that is an instance of `ctor` — typed. */
+  findOfType(ctor) {
+    if (this instanceof ctor) return this;
+    for (const c of this.children) {
+      const r = c.findOfType(ctor);
+      if (r) return r;
+    }
+    return null;
+  }
   /** All descendants (and self) of a given type tag. */
   query(type, out = []) {
     if (this.type === type) out.push(this);
@@ -623,13 +718,25 @@ var Node = class {
     }
     for (const c of this.children) c.enterTree(world);
   }
-  updateTree(dt) {
+  /**
+   * Advance this subtree. `dt` is the (time-scaled) step delta; `unscaledDt`
+   * and `paused` come from the world, and `parentMode` is the effective pause
+   * mode flowing down the tree. The walk always descends — a paused node just
+   * skips its callbacks — so an `'always'` descendant (pause menu, transition)
+   * keeps running inside a paused parent.
+   */
+  updateTree(dt, unscaledDt = dt, parentMode = "pausable", paused = false) {
     if (this._freed) return;
-    const ctx = this.world;
-    for (const b of this.behaviors) b.update?.(this, dt, ctx);
-    this.onUpdate?.(this, dt, ctx);
-    this.onProcess(dt);
-    for (const c of this.children.slice()) c.updateTree(dt);
+    const mode = this.pauseMode === "inherit" ? parentMode : this.pauseMode;
+    const running = mode === "always" || mode === "pausable" && !paused;
+    if (running) {
+      const ctx = this.world;
+      const useDt = mode === "always" ? unscaledDt : dt;
+      for (const b of this.behaviors) b.update?.(this, useDt, ctx);
+      this.onUpdate?.(this, useDt, ctx);
+      this.onProcess(useDt);
+    }
+    for (const c of this.children.slice()) c.updateTree(dt, unscaledDt, mode, paused);
   }
   exitTree() {
     for (const b of this.behaviors) b.exit?.(this);
@@ -642,7 +749,8 @@ var Node = class {
   }
   // ── Transforms ────────────────────────────────────────────────
   localTransform() {
-    return makeTransform(this.pos, this.rotation, this.scale);
+    const t = makeTransform(this.pos, this.rotation, this.scale);
+    return this.pivot ? composeTransform(t, makeTransform({ x: -this.pivot.x, y: -this.pivot.y }, 0, { x: 1, y: 1 })) : t;
   }
   worldTransform() {
     const local = this.localTransform();
@@ -652,9 +760,16 @@ var Node = class {
   /** Walk the subtree, appending draw commands with computed world transforms. */
   collectDraw(out, parentWorld = IDENTITY) {
     if (!this.visible) return;
-    const world = composeTransform(parentWorld, this.localTransform());
+    const world = composeTransform(this.screenSpace ? IDENTITY : parentWorld, this.localTransform());
+    const start = out.length;
     this.draw(out, world);
     for (const c of this.children) c.collectDraw(out, world);
+    if (this.screenSpace) {
+      for (let i = start; i < out.length; i++) {
+        const cmd = out[i];
+        if ((cmd.layer ?? 0) < 1) cmd.layer = 1;
+      }
+    }
   }
   /** Subclasses emit their own commands here. Base draws nothing. */
   draw(_out, _world) {
@@ -676,7 +791,13 @@ var Node = class {
       scale: { ...this.scale },
       z: this.z,
       visible: this.visible,
-      props: this.serializeProps(),
+      // New base fields only when non-default, so pinned hashes survive.
+      ...this.pivot ? { pivot: { ...this.pivot } } : {},
+      props: {
+        ...this.serializeProps(),
+        ...this.pauseMode !== "inherit" ? { pauseMode: this.pauseMode } : {},
+        ...this.screenSpace ? { screenSpace: true } : {}
+      },
       children: this.children.filter((c) => !c.cosmetic).map((c) => c.serialize())
     };
   }
@@ -690,6 +811,17 @@ var Node = class {
 };
 
 // src/scene/nodes.ts
+function diamondPoints(w, h) {
+  return [0, -h / 2, w / 2, 0, 0, h / 2, -w / 2, 0];
+}
+function regularPolyPoints(sides, r, rotation = 0) {
+  const pts = [];
+  for (let i = 0; i < sides; i++) {
+    const a = rotation - TAU / 4 + TAU * i / sides;
+    pts.push(dcos(a) * r, dsin(a) * r);
+  }
+  return pts;
+}
 var Sprite = class extends Node {
   type = "Sprite";
   shape;
@@ -704,7 +836,8 @@ var Sprite = class extends Node {
       opacity: config.opacity,
       round: config.round,
       gradient: config.gradient,
-      shadow: config.shadow
+      shadow: config.shadow,
+      lineDash: config.lineDash
     };
   }
   draw(out, world) {
@@ -719,6 +852,12 @@ var Sprite = class extends Node {
       case "circle":
         out.push({ kind: "circle", cx: 0, cy: 0, radius: this.shape.radius, ...base });
         break;
+      case "ellipse":
+        out.push({ kind: "ellipse", cx: 0, cy: 0, rx: this.shape.rx, ry: this.shape.ry, ...base });
+        break;
+      case "arc":
+        out.push({ kind: "arc", cx: 0, cy: 0, radius: this.shape.radius, start: this.shape.start, end: this.shape.end, sector: this.shape.sector, ...base });
+        break;
       case "poly":
         out.push({ kind: "poly", points: this.shape.points, closed: this.shape.closed ?? true, ...base });
         break;
@@ -728,6 +867,12 @@ var Sprite = class extends Node {
       case "glyph":
         out.push({ kind: "text", text: this.shape.char, x: 0, y: 0, size: this.shape.size, align: "center", ...base });
         break;
+      case "diamond":
+        out.push({ kind: "poly", points: diamondPoints(this.shape.w, this.shape.h), closed: true, ...base });
+        break;
+      case "regularPoly":
+        out.push({ kind: "poly", points: regularPolyPoints(this.shape.sides, this.shape.r, this.shape.rotation ?? 0), closed: true, ...base });
+        break;
     }
   }
   serializeProps() {
@@ -848,6 +993,85 @@ var Timer = class extends Node {
   }
 };
 
+// src/scene/iso.ts
+function shadeHex(hex, f) {
+  let h = hex.replace("#", "");
+  if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+  if (h.length !== 6) return hex;
+  const ch = (i) => {
+    const v = Math.round(Math.min(255, Math.max(0, parseInt(h.slice(i, i + 2), 16) * f)));
+    return v.toString(16).padStart(2, "0");
+  };
+  return `#${ch(0)}${ch(2)}${ch(4)}`;
+}
+var IsoPrism = class extends Node {
+  type = "IsoPrism";
+  tileW;
+  tileH;
+  height;
+  fill;
+  topPaint;
+  leftPaint;
+  rightPaint;
+  stroke;
+  strokeWidth;
+  opacity;
+  constructor(config) {
+    super(config);
+    this.tileW = config.tileW;
+    this.tileH = config.tileH;
+    this.height = config.height;
+    this.fill = config.fill;
+    this.topPaint = config.top;
+    this.leftPaint = config.left;
+    this.rightPaint = config.right;
+    this.stroke = config.stroke;
+    this.strokeWidth = config.strokeWidth;
+    this.opacity = config.opacity;
+  }
+  draw(out, world) {
+    const w = this.tileW;
+    const h = this.tileH;
+    const H = this.height;
+    const seam = { stroke: this.stroke, strokeWidth: this.strokeWidth, opacity: this.opacity };
+    const top = this.topPaint ?? { fill: this.fill };
+    const left = this.leftPaint ?? { fill: shadeHex(this.fill, 0.65) };
+    const right = this.rightPaint ?? { fill: shadeHex(this.fill, 0.85) };
+    const base = { transform: world, z: this.z };
+    if (H > 0) {
+      out.push({ kind: "poly", closed: true, points: [-w / 2, 0, 0, h / 2, 0, h / 2 - H, -w / 2, -H], ...seam, ...left, ...base });
+      out.push({ kind: "poly", closed: true, points: [0, h / 2, w / 2, 0, w / 2, -H, 0, h / 2 - H], ...seam, ...right, ...base });
+    }
+    const tp = diamondPoints(w, h).map((v, i) => i % 2 === 1 ? v - H : v);
+    out.push({ kind: "poly", closed: true, points: tp, ...seam, ...top, ...base });
+  }
+  serializeProps() {
+    return { tileW: this.tileW, tileH: this.tileH, height: this.height, fill: this.fill };
+  }
+  applyProps(props) {
+    if (typeof props.tileW === "number") this.tileW = props.tileW;
+    if (typeof props.tileH === "number") this.tileH = props.tileH;
+    if (typeof props.height === "number") this.height = props.height;
+    if (typeof props.fill === "string") this.fill = props.fill;
+  }
+};
+var DepthSort = class extends Node {
+  type = "DepthSort";
+  key;
+  depthScale;
+  /** DepthSort is a pure ordering container — its z assignments are view-only. */
+  cosmetic = true;
+  constructor(config) {
+    super(config);
+    this.key = config.key;
+    this.depthScale = config.depthScale ?? 1;
+  }
+  collectDraw(out, parentWorld) {
+    for (const c of this.children) c.z = this.key(c) * this.depthScale;
+    super.collectDraw(out, parentWorld);
+  }
+};
+
 // src/scene/cameraController.ts
 var CameraController = class extends Node {
   type = "CameraController";
@@ -1111,6 +1335,36 @@ var Particles = class extends Node {
   gravity = 0;
   drag = 0;
   shrink = true;
+  // ── Continuous emission ─────────────────────────────────────────
+  // A steady stream (torch smoke, thruster exhaust) on top of the one-shot
+  // burst(): a fractional accumulator over sim dt spawns whole particles
+  // through the same private-Rng burst path, so it stays deterministic and
+  // cosmetic by the same construction.
+  emitRate = 0;
+  emitAcc = 0;
+  emitStyle = null;
+  emitOrigin = { x: 0, y: 0 };
+  emit(rateOrName, styleOrPayload) {
+    if (typeof rateOrName === "string") {
+      super.emit(rateOrName, styleOrPayload);
+      return;
+    }
+    this.emitRate = rateOrName;
+    this.emitAcc = 0;
+    const style = styleOrPayload;
+    if (style) {
+      const { at: at2, ...rest3 } = style;
+      this.emitStyle = rest3;
+      this.emitOrigin = at2 ? { x: at2.x, y: at2.y } : { x: 0, y: 0 };
+    } else if (!this.emitStyle) {
+      this.emitStyle = PARTICLE_PRESETS.burst();
+    }
+  }
+  /** Stop continuous emission. Live particles finish their lives naturally. */
+  stopEmit() {
+    this.emitRate = 0;
+    this.emitAcc = 0;
+  }
   onProcess(dt) {
     const drag = Math.max(0, 1 - this.drag * dt);
     let write = 0;
@@ -1125,6 +1379,14 @@ var Particles = class extends Node {
       this.pool[write++] = p;
     }
     this.pool.length = write;
+    if (this.emitRate > 0 && this.emitStyle) {
+      this.emitAcc += this.emitRate * dt;
+      const spawn = Math.floor(this.emitAcc);
+      if (spawn > 0) {
+        this.emitAcc -= spawn;
+        this.burst(spawn, this.emitOrigin, this.emitStyle);
+      }
+    }
   }
   draw(out, world) {
     for (const p of this.pool) {
@@ -1371,6 +1633,204 @@ var FLOAT_PRESETS = {
   label: (color = "#3d3323") => ({ color, size: 18, weight: 600, rise: 40, gravity: 0, life: 1.2, jitter: 0, fade: 0.5 })
 };
 
+// src/scene/verletChain.ts
+var VerletChain = class extends Node {
+  type = "VerletChain";
+  gravity;
+  damping;
+  iterations;
+  pinTail;
+  stroke;
+  strokeWidth;
+  taper;
+  /**
+   * Where the tail is pinned when `pinTail` is true, in NODE-LOCAL space
+   * (same space as `points`). null leaves the tail free even with pinTail set.
+   */
+  tailTarget = null;
+  segments;
+  /** Rest length of one segment. */
+  segmentLength;
+  // World-space simulation state (flat arrays: allocation-free hot path).
+  px;
+  py;
+  prevx;
+  prevy;
+  /** Node-local mirror of the sim points, updated after each step. */
+  local;
+  initialized = false;
+  // Pending impulse (world px/s), applied to free points on the next step.
+  impX = 0;
+  impY = 0;
+  constructor(config) {
+    super(config);
+    this.cosmetic = true;
+    this.segments = Math.max(1, Math.floor(config.segments));
+    this.segmentLength = config.length / this.segments;
+    this.gravity = config.gravity ? { ...config.gravity } : { x: 0, y: 600 };
+    this.damping = config.damping ?? 0.985;
+    this.iterations = Math.max(1, config.iterations ?? 3);
+    this.pinTail = config.pinTail ?? false;
+    this.stroke = config.stroke ?? "#333";
+    this.strokeWidth = config.strokeWidth ?? 3;
+    this.taper = config.taper ?? false;
+    const n5 = this.segments + 1;
+    this.px = new Float64Array(n5);
+    this.py = new Float64Array(n5);
+    this.prevx = new Float64Array(n5);
+    this.prevy = new Float64Array(n5);
+    this.local = [];
+    for (let i = 0; i < n5; i++) this.local.push({ x: 0, y: i * this.segmentLength });
+  }
+  /**
+   * Chain points in NODE-LOCAL space, head first (`points[0]` ≈ {0,0}).
+   * The Vec2 objects are reused across steps — read, don't retain copies-by-ref.
+   */
+  get points() {
+    return this.local;
+  }
+  /**
+   * Direction of segment i (0..segments-1) in node-local space, radians
+   * (0 = +x, y-down screen convention). Map child sprites to segments with
+   * `sprite.pos = chain.points[i]; sprite.rotation = chain.segmentAngle(i)`.
+   */
+  segmentAngle(i) {
+    const a = this.local[i];
+    const b = this.local[i + 1];
+    return datan2(b.y - a.y, b.x - a.x);
+  }
+  /** Flick the chain: add a velocity (world px/s) to every free point next step. */
+  impulse(v) {
+    this.impX += v.x;
+    this.impY += v.y;
+  }
+  onProcess(dt) {
+    const wt = this.worldTransform();
+    const headX = wt.e;
+    const headY = wt.f;
+    const n5 = this.segments + 1;
+    const px = this.px;
+    const py = this.py;
+    const prevx = this.prevx;
+    const prevy = this.prevy;
+    if (!this.initialized) {
+      for (let i = 0; i < n5; i++) {
+        px[i] = headX;
+        py[i] = headY + i * this.segmentLength;
+        prevx[i] = px[i];
+        prevy[i] = py[i];
+      }
+      this.initialized = true;
+    }
+    const tailPinned = this.pinTail && this.tailTarget !== null;
+    let tailX = 0;
+    let tailY = 0;
+    if (tailPinned) {
+      const t = this.tailTarget;
+      tailX = wt.a * t.x + wt.c * t.y + wt.e;
+      tailY = wt.b * t.x + wt.d * t.y + wt.f;
+    }
+    const gdt2x = this.gravity.x * dt * dt;
+    const gdt2y = this.gravity.y * dt * dt;
+    const impDx = this.impX * dt;
+    const impDy = this.impY * dt;
+    const damp = this.damping;
+    const last = n5 - 1;
+    for (let i = 1; i < n5; i++) {
+      if (tailPinned && i === last) continue;
+      const x = px[i];
+      const y = py[i];
+      px[i] = x + (x - prevx[i]) * damp + gdt2x + impDx;
+      py[i] = y + (y - prevy[i]) * damp + gdt2y + impDy;
+      prevx[i] = x;
+      prevy[i] = y;
+    }
+    this.impX = 0;
+    this.impY = 0;
+    const rest3 = this.segmentLength;
+    for (let k = 0; k < this.iterations; k++) {
+      px[0] = headX;
+      py[0] = headY;
+      if (tailPinned) {
+        px[last] = tailX;
+        py[last] = tailY;
+      }
+      for (let i = 0; i < last; i++) {
+        const dx = px[i + 1] - px[i];
+        const dy = py[i + 1] - py[i];
+        const d = Math.sqrt(dx * dx + dy * dy);
+        if (d === 0) continue;
+        const diff = (d - rest3) / d;
+        const aFixed = i === 0;
+        const bFixed = tailPinned && i + 1 === last;
+        if (aFixed && bFixed) continue;
+        const wA = aFixed ? 0 : bFixed ? 1 : 0.5;
+        const wB = bFixed ? 0 : aFixed ? 1 : 0.5;
+        px[i] += dx * diff * wA;
+        py[i] += dy * diff * wA;
+        px[i + 1] -= dx * diff * wB;
+        py[i + 1] -= dy * diff * wB;
+      }
+    }
+    px[0] = headX;
+    py[0] = headY;
+    if (tailPinned) {
+      px[last] = tailX;
+      py[last] = tailY;
+    }
+    const inv = invertTransform(wt);
+    for (let i = 0; i < n5; i++) {
+      const p = this.local[i];
+      const wx = px[i];
+      const wy = py[i];
+      p.x = inv.a * wx + inv.c * wy + inv.e;
+      p.y = inv.b * wx + inv.d * wy + inv.f;
+    }
+  }
+  /**
+   * Stroked open poly of the chain. `points` are node-local and `world` is the
+   * self-inclusive world transform handed to draw(), so commands emit with it
+   * directly. With `taper`, each segment is its own 2-point poly at a linearly
+   * decreasing width (segments are few, so this stays cheap); otherwise one poly.
+   */
+  draw(out, world) {
+    const n5 = this.local.length;
+    if (n5 < 2) return;
+    if (this.taper) {
+      for (let i = 0; i < n5 - 1; i++) {
+        const a = this.local[i];
+        const b = this.local[i + 1];
+        const t = 1 - i / (n5 - 1);
+        out.push({
+          kind: "poly",
+          points: [a.x, a.y, b.x, b.y],
+          closed: false,
+          stroke: this.stroke,
+          strokeWidth: Math.max(0.5, this.strokeWidth * t),
+          round: true,
+          transform: world,
+          z: this.z,
+          transient: true
+        });
+      }
+      return;
+    }
+    const pts = [];
+    for (const p of this.local) pts.push(p.x, p.y);
+    out.push({
+      kind: "poly",
+      points: pts,
+      closed: false,
+      stroke: this.stroke,
+      strokeWidth: this.strokeWidth,
+      round: true,
+      transform: world,
+      z: this.z,
+      transient: true
+    });
+  }
+};
+
 // src/scene/registry.ts
 var registry = /* @__PURE__ */ new Map();
 function registerNode(type, factory) {
@@ -1392,6 +1852,9 @@ function deserializeNode(data) {
   node.scale = { ...data.scale };
   node.z = data.z;
   node.visible = data.visible;
+  if (data.pivot) node.pivot = { ...data.pivot };
+  if (data.props.pauseMode === "always" || data.props.pauseMode === "stopped") node.pauseMode = data.props.pauseMode;
+  if (data.props.screenSpace === true) node.screenSpace = true;
   node.applyProps(data.props);
   for (const child of data.children) node.addChild(deserializeNode(child));
   return node;
@@ -1401,20 +1864,72 @@ function deserializeNode(data) {
 var InputState = class {
   down = /* @__PURE__ */ new Set();
   prev = /* @__PURE__ */ new Set();
-  /** Analog axes (e.g. from gamepad or pointer), sampled per step. */
+  /**
+   * Analog axes (e.g. from pointer or gamepad), sampled per step. By default
+   * these are LIVE host samples — NOT hashed or logged (see PointerSource).
+   * Axes passed to `beginFrame`'s second argument are the exception: they are
+   * *logged* (enter `getState()` → hash, and the input log), so quantized analog
+   * aim replays bit-exactly. Both live and logged values read back via `axis()`.
+   */
   axes = /* @__PURE__ */ new Map();
-  /** Engine: set which actions are down this step (from live input or replay). */
-  beginFrame(actionsDown) {
+  /** The subset of axes that are part of the deterministic log + hash this frame. */
+  logged = /* @__PURE__ */ new Map();
+  /**
+   * Action names some source has declared it can produce (null until the first
+   * declareActions call). Headless worlds with no sources never declare, so
+   * they never warn — the typo guard only arms once a host wires real input.
+   */
+  declared = null;
+  /** Unknown names already warned about (warn ONCE per name). */
+  warned = /* @__PURE__ */ new Set();
+  /**
+   * Register action names a source (or input map) can produce. The browser
+   * driver declares the keyboard map's actions and the pointer's `mouse.*`
+   * buttons; custom sources should declare theirs too. Once at least one
+   * declaration has happened, querying an undeclared action name via
+   * `isDown`/`justPressed`/`justReleased` logs a console.warn ONCE per name —
+   * catching `isDown('jmup')` typos that would otherwise fail silently.
+   */
+  declareActions(names) {
+    this.declared ??= /* @__PURE__ */ new Set();
+    for (const n5 of names) this.declared.add(n5);
+  }
+  /** Warn-once guard for querying an action no source has declared. O(1). */
+  checkDeclared(action) {
+    if (this.declared === null || this.declared.has(action) || this.warned.has(action)) return;
+    this.warned.add(action);
+    console.warn(
+      `hayao: input action "${action}" is not declared by any input source \u2014 declared actions: ${[...this.declared].sort().join(", ") || "(none)"}`
+    );
+  }
+  /**
+   * Engine: set which actions are down this step (from live input or replay).
+   * `axes` (optional) are QUANTIZED analog values that become part of the log
+   * and hash for this frame — use `snapAxis`/`quantizeAngle` at the host edge so
+   * replay and lockstep netplay reproduce analog aim exactly.
+   */
+  beginFrame(actionsDown, axes) {
     this.prev = new Set(this.down);
     this.down = new Set(actionsDown);
+    if (this.declared !== null) for (const a of this.down) this.declared.add(a);
+    this.logged.clear();
+    if (axes) {
+      for (const k in axes) {
+        this.logged.set(k, axes[k]);
+        this.axes.set(k, axes[k]);
+      }
+    }
   }
   isDown(action) {
+    this.checkDeclared(action);
     return this.down.has(action);
   }
   justPressed(action) {
+    this.checkDeclared(action);
     return this.down.has(action) && !this.prev.has(action);
   }
   justReleased(action) {
+    this.checkDeclared(action);
     return !this.down.has(action) && this.prev.has(action);
   }
   axis(name) {
@@ -1425,13 +1940,33 @@ var InputState = class {
     return [...this.down].sort();
   }
   getState() {
-    return { down: [...this.down].sort(), prev: [...this.prev].sort() };
+    const s = {
+      down: [...this.down].sort(),
+      prev: [...this.prev].sort()
+    };
+    if (this.logged.size > 0) s.axes = [...this.logged].sort((a, b) => a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0);
+    return s;
   }
   setState(s) {
     this.down = new Set(s.down);
     this.prev = new Set(s.prev);
+    this.logged.clear();
+    if (s.axes) for (const [k, v] of s.axes) {
+      this.logged.set(k, v);
+      this.axes.set(k, v);
+    }
   }
 };
+function snapAxis(value, buckets, min = -1, max = 1) {
+  if (buckets < 2 || max === min) return value;
+  const t = Math.min(1, Math.max(0, (value - min) / (max - min)));
+  const b = Math.round(t * (buckets - 1));
+  return min + b / (buckets - 1) * (max - min);
+}
+function quantizeAngle(radians, buckets) {
+  const step = Math.PI * 2 / buckets;
+  return Math.round(radians / step) * step;
+}
 function keysToActions(map, keysDown) {
   const actions = [];
   for (const action in map) {
@@ -1441,19 +1976,32 @@ function keysToActions(map, keysDown) {
 }
 var InputRecorder = class {
   frames = [];
-  record(actionsDown) {
+  axes = [];
+  anyAxes = false;
+  record(actionsDown, axes) {
     this.frames.push(actionsDown.slice().sort());
+    if (axes && Object.keys(axes).length > 0) {
+      this.axes.push({ ...axes });
+      this.anyAxes = true;
+    } else {
+      this.axes.push(void 0);
+    }
   }
   get length() {
     return this.frames.length;
   }
   toLog() {
-    return { frames: this.frames.map((f) => f.slice()) };
+    const log = { frames: this.frames.map((f) => f.slice()) };
+    if (this.anyAxes) log.axes = this.axes.map((a) => a ? { ...a } : void 0);
+    return log;
   }
 };
 function frameActions(log, i) {
   return log.frames[i] ?? [];
 }
+function frameAxes(log, i) {
+  return log.axes?.[i];
+}
 var DEFAULT_INPUT_MAP = {
   up: ["ArrowUp", "KeyW"],
   down: ["ArrowDown", "KeyS"],
@@ -1472,6 +2020,8 @@ var KeyboardSource = class {
   keysDown = /* @__PURE__ */ new Set();
   /** Virtual action taps (from DOM buttons etc.) pending consumption by a step. */
   pressed = /* @__PURE__ */ new Set();
+  /** Sustained virtual actions (held on-screen controls) — persist until released. */
+  held = /* @__PURE__ */ new Set();
   map;
   target;
   onDown;
@@ -1492,12 +2042,18 @@ var KeyboardSource = class {
   }
   /** The actions currently held down, as a stable sorted array. */
   currentActions() {
-    const acts = keysToActions(this.map, this.keysDown);
-    if (this.pressed.size === 0) return acts;
+    const codes = this.held.size === 0 ? this.keysDown : /* @__PURE__ */ new Set([...this.keysDown, ...this.held]);
+    const acts = keysToActions(this.map, codes);
+    if (this.pressed.size === 0 && this.held.size === 0) return acts;
     const merged = new Set(acts);
     for (const a of this.pressed) merged.add(a);
+    for (const a of this.held) merged.add(a);
     return [...merged].sort();
   }
+  /** The action names this source's map can produce (for InputState.declareActions). */
+  actionNames() {
+    return Object.keys(this.map);
+  }
   /**
    * Virtually tap an action (DOM button, touch control). The tap is held until
    * at least one fixed step has sampled it — the driver calls clearPressed()
@@ -1511,6 +2067,27 @@ var KeyboardSource = class {
   clearPressed() {
     this.pressed.clear();
   }
+  /**
+   * Sustain an action for as long as an on-screen control is held. Unlike
+   * `press()` (an edge-shaped tap cleared after one step), a held action models
+   * STATE: it stays in `currentActions()` every step until `setHeld(action,
+   * false)` / `releaseHeld(action)`. This is what a virtual joystick or
+   * hold-to-fire button wants — set it on drag-start, clear it on release, no
+   * re-press-per-frame. Held actions still flow through the same deterministic
+   * action set as keys.
+   */
+  setHeld(action, on = true) {
+    if (on) this.held.add(action);
+    else this.held.delete(action);
+  }
+  /** Release a sustained action (sugar for `setHeld(action, false)`). */
+  releaseHeld(action) {
+    this.held.delete(action);
+  }
+  /** Drop all sustained actions (e.g. on blur / control teardown). */
+  clearHeld() {
+    this.held.clear();
+  }
   setMap(map) {
     this.map = map;
   }
@@ -1520,35 +2097,74 @@ var KeyboardSource = class {
     globalThis.removeEventListener?.("blur", this.onBlur);
   }
 };
+var MOUSE_ACTIONS = ["mouse.left", "mouse.right", "mouse.middle"];
 var PointerSource = class {
   clientX = 0;
   clientY = 0;
   isDown = false;
+  rightDown = false;
+  middleDown = false;
   seen = false;
+  /** Live touches by pointerId (a pressed finger/button); excludes hover-only mouse. */
+  touches = /* @__PURE__ */ new Map();
   target;
   el;
+  keyboard;
   onMove;
   onDown;
   onUp;
-  constructor(target) {
+  onCtx;
+  constructor(target, opts = {}) {
     this.target = target;
     this.el = target.element;
+    this.keyboard = opts.keyboard;
+    const readButtons = (e) => {
+      if (typeof e.buttons !== "number") return false;
+      this.isDown = (e.buttons & 1) !== 0;
+      this.rightDown = (e.buttons & 2) !== 0;
+      this.middleDown = (e.buttons & 4) !== 0;
+      return true;
+    };
     this.onMove = (e) => {
       this.clientX = e.clientX;
       this.clientY = e.clientY;
       this.seen = true;
+      if (typeof e.buttons === "number" && e.buttons !== 0) readButtons(e);
+      const t = this.touches.get(e.pointerId);
+      if (t) {
+        t.clientX = e.clientX;
+        t.clientY = e.clientY;
+      }
     };
     this.onDown = (e) => {
       this.clientX = e.clientX;
       this.clientY = e.clientY;
-      this.isDown = true;
       this.seen = true;
+      if (!readButtons(e)) {
+        if (e.button === 2) this.rightDown = true;
+        else if (e.button === 1) this.middleDown = true;
+        else this.isDown = true;
+      }
+      this.touches.set(e.pointerId, { clientX: e.clientX, clientY: e.clientY });
     };
-    this.onUp = () => {
-      this.isDown = false;
+    this.onUp = (e) => {
+      if (!readButtons(e)) {
+        this.isDown = false;
+        if (e.button === 2) this.rightDown = false;
+        else if (e.button === 1) this.middleDown = false;
+        else {
+          this.rightDown = false;
+          this.middleDown = false;
+        }
+      }
+      this.touches.delete(e?.pointerId);
     };
+    this.onCtx = (e) => e.preventDefault();
     this.el?.addEventListener("pointermove", this.onMove);
     this.el?.addEventListener("pointerdown", this.onDown);
+    this.el?.addEventListener("pointerup", this.onUp);
+    this.el?.addEventListener("pointercancel", this.onUp);
+    if (!opts.contextMenu) this.el?.addEventListener("contextmenu", this.onCtx);
     globalThis.addEventListener?.("pointerup", this.onUp);
     globalThis.addEventListener?.("pointercancel", this.onUp);
   }
@@ -1557,9 +2173,28 @@ var PointerSource = class {
     const p = this.target.toDesign?.(this.clientX, this.clientY) ?? { x: 0, y: 0 };
     return { x: p.x, y: p.y, down: this.isDown, active: this.seen };
   }
+  /**
+   * Every live (pressed) touch in DESIGN space, ordered by ascending id so the
+   * array is stable to iterate. Empty when nothing is pressed. This is the
+   * multitouch channel — a dual-stick game reads `left = touches[0]`, etc., or
+   * partitions by screen half.
+   */
+  readAll() {
+    const ids = [...this.touches.keys()].sort((a, b) => a - b);
+    return ids.map((id) => {
+      const t = this.touches.get(id);
+      const p = this.target.toDesign?.(t.clientX, t.clientY) ?? { x: 0, y: 0 };
+      return { x: p.x, y: p.y, down: true, active: true, id };
+    });
+  }
   /**
    * Write the current sample into an InputState's axes as pointer.x / pointer.y /
-   * pointer.down. Call once per step (the browser driver does this before advance).
+   * pointer.down, plus pointer.right / pointer.middle (0/1) for the secondary
+   * buttons. Call once per step (the browser driver does this before advance).
+   *
+   * When a keyboard is wired (PointerSourceOptions.keyboard), buttons are ALSO
+   * held as actions `mouse.left` / `mouse.right` / `mouse.middle` so they flow
+   * through the same deterministic actionsDown log as keys.
    */
   sample(input) {
     const r = this.read();
@@ -1567,15 +2202,110 @@ var PointerSource = class {
     input.axes.set("pointer.x", q(r.x));
     input.axes.set("pointer.y", q(r.y));
     input.axes.set("pointer.down", r.down ? 1 : 0);
+    input.axes.set("pointer.right", this.rightDown ? 1 : 0);
+    input.axes.set("pointer.middle", this.middleDown ? 1 : 0);
+    if (this.keyboard) {
+      input.declareActions(MOUSE_ACTIONS);
+      this.keyboard.setHeld("mouse.left", this.isDown);
+      this.keyboard.setHeld("mouse.right", this.rightDown);
+      this.keyboard.setHeld("mouse.middle", this.middleDown);
+    }
   }
   dispose() {
+    if (this.keyboard) for (const a of MOUSE_ACTIONS) this.keyboard.releaseHeld(a);
     this.el?.removeEventListener("pointermove", this.onMove);
     this.el?.removeEventListener("pointerdown", this.onDown);
+    this.el?.removeEventListener("pointerup", this.onUp);
+    this.el?.removeEventListener("pointercancel", this.onUp);
+    this.el?.removeEventListener("contextmenu", this.onCtx);
     globalThis.removeEventListener?.("pointerup", this.onUp);
     globalThis.removeEventListener?.("pointercancel", this.onUp);
   }
 };
 
+// src/input/gamepad.ts
+var GamepadSource = class {
+  index;
+  stickBuckets;
+  triggerBuckets;
+  deadzone;
+  buttonMap;
+  keyboard;
+  /** Track which buttons were pressed last frame to detect edge transitions. */
+  prevPressed = /* @__PURE__ */ new Map();
+  constructor(opts = {}) {
+    this.index = opts.index ?? 0;
+    this.stickBuckets = opts.stickBuckets ?? 128;
+    this.triggerBuckets = opts.triggerBuckets ?? 64;
+    this.deadzone = opts.deadzone ?? 0.12;
+    this.buttonMap = opts.buttonMap ?? DEFAULT_GAMEPAD_MAP;
+    this.keyboard = opts.keyboard;
+  }
+  /**
+   * Write the current gamepad state into InputState axes (quantized). Call once
+   * per fixed step, before world.advance() — the browser driver does this via
+   * the `sources` option in RunOptions. See also: runBrowser, GameHandle.
+   */
+  sample(input) {
+    const pad2 = navigator.getGamepads?.()[this.index] ?? null;
+    if (!pad2) return;
+    const applyDeadzone = (x, y) => {
+      const mag = dhypot(x, y);
+      if (mag < this.deadzone) return { x: 0, y: 0 };
+      const scale = (mag - this.deadzone) / (1 - this.deadzone);
+      const clampedMag = Math.min(scale, 1);
+      return { x: x / mag * clampedMag, y: y / mag * clampedMag };
+    };
+    const ls = applyDeadzone(pad2.axes[0] ?? 0, pad2.axes[1] ?? 0);
+    const rs = applyDeadzone(pad2.axes[2] ?? 0, pad2.axes[3] ?? 0);
+    const qs = (v) => snapAxis(v, this.stickBuckets, -1, 1);
+    const qt = (v) => snapAxis(v, this.triggerBuckets, 0, 1);
+    input.axes.set("gamepad.lx", qs(ls.x));
+    input.axes.set("gamepad.ly", qs(ls.y));
+    input.axes.set("gamepad.rx", qs(rs.x));
+    input.axes.set("gamepad.ry", qs(rs.y));
+    input.axes.set("gamepad.lt", qt(pad2.buttons[6]?.value ?? 0));
+    input.axes.set("gamepad.rt", qt(pad2.buttons[7]?.value ?? 0));
+    const du = pad2.buttons[12]?.pressed ? 1 : 0;
+    const dd = pad2.buttons[13]?.pressed ? 1 : 0;
+    const dl = pad2.buttons[14]?.pressed ? 1 : 0;
+    const dr = pad2.buttons[15]?.pressed ? 1 : 0;
+    input.axes.set("gamepad.dpad.x", dr - dl);
+    input.axes.set("gamepad.dpad.y", dd - du);
+    if (this.keyboard) {
+      for (const [btnStr, action] of Object.entries(this.buttonMap)) {
+        const idx = Number(btnStr);
+        const pressed = pad2.buttons[idx]?.pressed ?? false;
+        this.keyboard.setHeld(action, pressed);
+        this.prevPressed.set(idx, pressed);
+      }
+    }
+  }
+  /**
+   * Release all held actions and clean up. Call when removing the source or
+   * switching gamepads.
+   */
+  dispose() {
+    if (this.keyboard) {
+      for (const action of Object.values(this.buttonMap)) {
+        this.keyboard.releaseHeld(action);
+      }
+    }
+    this.prevPressed.clear();
+  }
+};
+var DEFAULT_GAMEPAD_MAP = {
+  0: "confirm",
+  1: "cancel",
+  2: "action2",
+  3: "action",
+  9: "confirm",
+  12: "up",
+  13: "down",
+  14: "left",
+  15: "right"
+};
+
 // src/physics/tilemap.ts
 var TILE = {
   EMPTY: 0,
@@ -2903,7 +3633,7 @@ function rayCastRigid(rw, x0, y0, x1, y1, mask = 65535) {
 
 // src/render/commands.ts
 function sortCommands(cmds) {
-  return cmds.map((c, i) => [c, i]).sort((a, b) => a[0].z - b[0].z || a[1] - b[1]).map(([c]) => c);
+  return cmds.map((c, i) => [c, i]).sort((a, b) => (a[0].layer ?? 0) - (b[0].layer ?? 0) || a[0].z - b[0].z || a[1] - b[1]).map(([c]) => c);
 }
 
 // src/render/paint.ts
@@ -2946,6 +3676,10 @@ function shapeBBox(c) {
       return { x: c.x, y: c.y, w: c.w, h: c.h };
     case "circle":
       return { x: c.cx - c.radius, y: c.cy - c.radius, w: c.radius * 2, h: c.radius * 2 };
+    case "ellipse":
+      return { x: c.cx - c.rx, y: c.cy - c.ry, w: c.rx * 2, h: c.ry * 2 };
+    case "arc":
+      return { x: c.cx - c.radius, y: c.cy - c.radius, w: c.radius * 2, h: c.radius * 2 };
     case "poly": {
       if (c.points.length < 2) return null;
       let minX = c.points[0];
@@ -2964,6 +3698,39 @@ function shapeBBox(c) {
       return null;
   }
 }
+function invalidCommandReason(c) {
+  switch (c.kind) {
+    case "rect":
+      if (!Number.isFinite(c.x) || !Number.isFinite(c.y) || !Number.isFinite(c.w) || !Number.isFinite(c.h))
+        return "non-finite x/y/w/h";
+      return null;
+    case "circle":
+      if (!Number.isFinite(c.cx) || !Number.isFinite(c.cy)) return "non-finite center";
+      if (!Number.isFinite(c.radius)) return "non-finite radius";
+      if (c.radius < 0) return "negative radius";
+      return null;
+    case "ellipse":
+      if (!Number.isFinite(c.cx) || !Number.isFinite(c.cy)) return "non-finite center";
+      if (!Number.isFinite(c.rx) || !Number.isFinite(c.ry)) return "non-finite rx/ry";
+      if (c.rx < 0 || c.ry < 0) return "negative rx/ry";
+      return null;
+    case "arc":
+      if (!Number.isFinite(c.cx) || !Number.isFinite(c.cy)) return "non-finite center";
+      if (!Number.isFinite(c.radius)) return "non-finite radius";
+      if (c.radius < 0) return "negative radius";
+      if (!Number.isFinite(c.start) || !Number.isFinite(c.end)) return "non-finite start/end";
+      return null;
+    default:
+      return null;
+  }
+}
+var warnedCommands = /* @__PURE__ */ new Set();
+function warnCommandOnce(kind, reason, detail) {
+  const key = `${kind}:${reason}`;
+  if (warnedCommands.has(key)) return;
+  warnedCommands.add(key);
+  console.warn(`hayao/render: skipped '${kind}' command \u2014 ${reason}`, detail);
+}
 function canvasGradient(ctx, g, bbox) {
   const px = (u) => bbox.x + u * bbox.w;
   const py = (v) => bbox.y + v * bbox.h;
@@ -2988,6 +3755,16 @@ function clientToDesign(rect, width, height, clientX, clientY) {
     y: (clientY - rect.top - offsetY) / scale
   };
 }
+function fitViewport(rect, width, height) {
+  const scale = Math.min(rect.width / width, rect.height / height) || 1;
+  return {
+    x: (rect.width - width * scale) / 2,
+    y: (rect.height - height * scale) / 2,
+    width: width * scale,
+    height: height * scale,
+    scale
+  };
+}
 
 // src/render/svgString.ts
 var n2 = (v) => Number.isInteger(v) ? String(v) : (Math.round(v * 1e3) / 1e3).toString();
@@ -3001,6 +3778,7 @@ function paintAttrs(p, fillOverride, filterId) {
     parts.push(`stroke="${p.stroke}"`);
     parts.push(`stroke-width="${n2(p.strokeWidth ?? 1)}"`);
     if (p.round) parts.push('stroke-linejoin="round" stroke-linecap="round"');
+    if (p.lineDash && p.lineDash.length) parts.push(`stroke-dasharray="${p.lineDash.map(n2).join(" ")}"`);
   }
   if (p.opacity !== void 0 && p.opacity !== 1) parts.push(`opacity="${n2(p.opacity)}"`);
   if (filterId) parts.push(`filter="url(#${filterId})"`);
@@ -3009,6 +3787,24 @@ function paintAttrs(p, fillOverride, filterId) {
 function escapeText(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function arcPathData(c) {
+  const r = c.radius;
+  const x0 = c.cx + dcos(c.start) * r;
+  const y0 = c.cy + dsin(c.start) * r;
+  const raw = c.end - c.start;
+  let sweep = (raw % TAU + TAU) % TAU;
+  if (sweep === 0 && raw !== 0) sweep = TAU;
+  if (sweep >= TAU - 1e-9) {
+    const xh = c.cx + dcos(c.start + Math.PI) * r;
+    const yh = c.cy + dsin(c.start + Math.PI) * r;
+    return `M ${n2(x0)} ${n2(y0)} A ${n2(r)} ${n2(r)} 0 1 1 ${n2(xh)} ${n2(yh)} A ${n2(r)} ${n2(r)} 0 1 1 ${n2(x0)} ${n2(y0)} Z`;
+  }
+  const x1 = c.cx + dcos(c.start + sweep) * r;
+  const y1 = c.cy + dsin(c.start + sweep) * r;
+  const large = sweep > Math.PI ? 1 : 0;
+  const a = `A ${n2(r)} ${n2(r)} 0 ${large} 1 ${n2(x1)} ${n2(y1)}`;
+  return c.sector ? `M ${n2(c.cx)} ${n2(c.cy)} L ${n2(x0)} ${n2(y0)} ${a} Z` : `M ${n2(x0)} ${n2(y0)} ${a}`;
+}
 function commandToSVG(c, defs, idBase) {
   const tf = `transform="${matrix(c.transform)}"`;
   let fillOverride;
@@ -3028,6 +3824,10 @@ function commandToSVG(c, defs, idBase) {
       return `<rect x="${n2(c.x)}" y="${n2(c.y)}" width="${n2(c.w)}" height="${n2(c.h)}"${c.r ? ` rx="${n2(c.r)}"` : ""} ${tf} ${paint}/>`;
     case "circle":
       return `<circle cx="${n2(c.cx)}" cy="${n2(c.cy)}" r="${n2(c.radius)}" ${tf} ${paint}/>`;
+    case "ellipse":
+      return `<ellipse cx="${n2(c.cx)}" cy="${n2(c.cy)}" rx="${n2(c.rx)}" ry="${n2(c.ry)}" ${tf} ${paint}/>`;
+    case "arc":
+      return `<path d="${arcPathData(c)}" ${tf} ${paint}/>`;
     case "poly": {
       const pts = [];
       for (let i = 0; i < c.points.length; i += 2) pts.push(`${n2(c.points[i])},${n2(c.points[i + 1])}`);
@@ -3054,7 +3854,14 @@ function commandToSVG(c, defs, idBase) {
 }
 function commandsToSVGInner(commands, idPrefix = "h") {
   const defs = [];
-  const body = sortCommands(commands).map((c, i) => commandToSVG(c, defs, `${idPrefix}${i}`)).join("");
+  const body = sortCommands(commands).map((c, i) => {
+    const bad = invalidCommandReason(c);
+    if (bad) {
+      warnCommandOnce(c.kind, bad, c);
+      return "";
+    }
+    return commandToSVG(c, defs, `${idPrefix}${i}`);
+  }).join("");
   return (defs.length ? `<defs>${defs.join("")}</defs>` : "") + body;
 }
 function renderToSVGString(commands, width, height, background = "#ffffff") {
@@ -3107,11 +3914,152 @@ var SvgRenderer = class {
   toDesign(clientX, clientY) {
     return clientToDesign(this.svg.getBoundingClientRect(), this.width, this.height, clientX, clientY);
   }
+  viewport() {
+    return fitViewport(this.svg.getBoundingClientRect(), this.width, this.height);
+  }
   dispose() {
     this.svg.remove();
   }
 };
 
+// src/render/canvas2d-core.ts
+function fillFor(ctx, c) {
+  const p = c;
+  if (p.gradient) {
+    const bbox = shapeBBox(c);
+    if (bbox && bbox.w > 0 && bbox.h > 0) return canvasGradient(ctx, p.gradient, bbox);
+    const stops = p.gradient.stops;
+    return stops.length ? stops[stops.length - 1].color : p.fill;
+  }
+  return p.fill;
+}
+function applyStroke(ctx, c) {
+  const fill = fillFor(ctx, c);
+  if (fill && fill !== "none") {
+    ctx.fillStyle = fill;
+    ctx.fill();
+  }
+  if (c.stroke) {
+    ctx.strokeStyle = c.stroke;
+    ctx.lineWidth = c.strokeWidth ?? 1;
+    if (c.round) {
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
+    }
+    ctx.stroke();
+  }
+}
+function roundRectPath(ctx, x, y, w, h, r) {
+  const rr = Math.min(r, w / 2, h / 2);
+  ctx.moveTo(x + rr, y);
+  ctx.arcTo(x + w, y, x + w, y + h, rr);
+  ctx.arcTo(x + w, y + h, x, y + h, rr);
+  ctx.arcTo(x, y + h, x, y, rr);
+  ctx.arcTo(x, y, x + w, y, rr);
+  ctx.closePath();
+}
+function paintCommand(ctx, c) {
+  switch (c.kind) {
+    case "rect":
+      ctx.beginPath();
+      if (c.r) roundRectPath(ctx, c.x, c.y, c.w, c.h, c.r);
+      else ctx.rect(c.x, c.y, c.w, c.h);
+      applyStroke(ctx, c);
+      break;
+    case "circle":
+      ctx.beginPath();
+      ctx.arc(c.cx, c.cy, c.radius, 0, Math.PI * 2);
+      applyStroke(ctx, c);
+      break;
+    case "ellipse":
+      ctx.beginPath();
+      ctx.ellipse(c.cx, c.cy, c.rx, c.ry, 0, 0, Math.PI * 2);
+      applyStroke(ctx, c);
+      break;
+    case "arc":
+      ctx.beginPath();
+      if (c.sector) ctx.moveTo(c.cx, c.cy);
+      ctx.arc(c.cx, c.cy, c.radius, c.start, c.end);
+      if (c.sector) ctx.closePath();
+      applyStroke(ctx, c);
+      break;
+    case "poly":
+      ctx.beginPath();
+      for (let i = 0; i < c.points.length; i += 2) {
+        if (i === 0) ctx.moveTo(c.points[i], c.points[i + 1]);
+        else ctx.lineTo(c.points[i], c.points[i + 1]);
+      }
+      if (c.closed) ctx.closePath();
+      applyStroke(ctx, c);
+      break;
+    case "path": {
+      const p = new Path2D(c.d);
+      const fill = fillFor(ctx, c);
+      if (fill && fill !== "none") {
+        ctx.fillStyle = fill;
+        ctx.fill(p);
+      }
+      if (c.stroke) {
+        ctx.strokeStyle = c.stroke;
+        ctx.lineWidth = c.strokeWidth ?? 1;
+        if (c.round) {
+          ctx.lineJoin = "round";
+          ctx.lineCap = "round";
+        }
+        ctx.stroke(p);
+      }
+      break;
+    }
+    case "text":
+      ctx.font = `${c.weight ?? 400} ${c.size}px ${c.font ?? "sans-serif"}`;
+      ctx.textAlign = c.align ?? "left";
+      ctx.textBaseline = "middle";
+      if (c.stroke) {
+        ctx.strokeStyle = c.stroke;
+        ctx.lineWidth = c.strokeWidth ?? 1;
+        ctx.lineJoin = "round";
+        ctx.lineCap = "round";
+        ctx.strokeText(c.text, c.x, c.y);
+      }
+      ctx.fillStyle = c.fill ?? "#000";
+      ctx.fillText(c.text, c.x, c.y);
+      break;
+    case "image":
+      break;
+  }
+}
+function drawToCanvas2D(ctx, commands, width, height, background, scale) {
+  ctx.setTransform(scale, 0, 0, scale, 0, 0);
+  ctx.fillStyle = background;
+  ctx.fillRect(0, 0, width, height);
+  for (const c of sortCommands(commands)) {
+    const bad = invalidCommandReason(c);
+    if (bad) {
+      warnCommandOnce(c.kind, bad, c);
+      continue;
+    }
+    ctx.save();
+    try {
+      const t = c.transform;
+      ctx.transform(t.a, t.b, t.c, t.d, t.e, t.f);
+      ctx.globalAlpha = c.opacity ?? 1;
+      const sh = c.shadow;
+      if (sh) {
+        ctx.shadowColor = sh.color;
+        ctx.shadowBlur = sh.blur;
+        ctx.shadowOffsetX = sh.dx ?? 0;
+        ctx.shadowOffsetY = sh.dy ?? 0;
+      }
+      const dash = c.lineDash;
+      if (dash && dash.length) ctx.setLineDash(dash);
+      paintCommand(ctx, c);
+    } catch (err) {
+      warnCommandOnce(c.kind, "paint threw", err);
+    }
+    ctx.restore();
+  }
+}
+
 // src/render/canvas.ts
 var Canvas2DRenderer = class {
   width;
@@ -3144,120 +4092,7 @@ var Canvas2DRenderer = class {
     this.canvas.height = Math.round(this.height * this.dpr);
   }
   draw(commands) {
-    const ctx = this.ctx;
-    ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
-    ctx.fillStyle = this.background;
-    ctx.fillRect(0, 0, this.width, this.height);
-    for (const c of sortCommands(commands)) {
-      ctx.save();
-      const t = c.transform;
-      ctx.transform(t.a, t.b, t.c, t.d, t.e, t.f);
-      ctx.globalAlpha = c.opacity ?? 1;
-      const sh = c.shadow;
-      if (sh) {
-        ctx.shadowColor = sh.color;
-        ctx.shadowBlur = sh.blur;
-        ctx.shadowOffsetX = sh.dx ?? 0;
-        ctx.shadowOffsetY = sh.dy ?? 0;
-      }
-      this.paint(ctx, c);
-      ctx.restore();
-    }
-  }
-  /** Resolve a fill: a gradient (mapped to the shape's bbox) or a solid color. */
-  fillFor(ctx, c) {
-    const p = c;
-    if (p.gradient) {
-      const bbox = shapeBBox(c);
-      if (bbox && bbox.w > 0 && bbox.h > 0) return canvasGradient(ctx, p.gradient, bbox);
-      const stops = p.gradient.stops;
-      return stops.length ? stops[stops.length - 1].color : p.fill;
-    }
-    return p.fill;
-  }
-  stroke(ctx, c) {
-    const fill = this.fillFor(ctx, c);
-    if (fill && fill !== "none") {
-      ctx.fillStyle = fill;
-      ctx.fill();
-    }
-    if (c.stroke) {
-      ctx.strokeStyle = c.stroke;
-      ctx.lineWidth = c.strokeWidth ?? 1;
-      if (c.round) {
-        ctx.lineJoin = "round";
-        ctx.lineCap = "round";
-      }
-      ctx.stroke();
-    }
-  }
-  paint(ctx, c) {
-    switch (c.kind) {
-      case "rect":
-        ctx.beginPath();
-        if (c.r) this.roundRect(ctx, c.x, c.y, c.w, c.h, c.r);
-        else ctx.rect(c.x, c.y, c.w, c.h);
-        this.stroke(ctx, c);
-        break;
-      case "circle":
-        ctx.beginPath();
-        ctx.arc(c.cx, c.cy, c.radius, 0, Math.PI * 2);
-        this.stroke(ctx, c);
-        break;
-      case "poly":
-        ctx.beginPath();
-        for (let i = 0; i < c.points.length; i += 2) {
-          if (i === 0) ctx.moveTo(c.points[i], c.points[i + 1]);
-          else ctx.lineTo(c.points[i], c.points[i + 1]);
-        }
-        if (c.closed) ctx.closePath();
-        this.stroke(ctx, c);
-        break;
-      case "path":
-        {
-          const p = new Path2D(c.d);
-          const fill = this.fillFor(ctx, c);
-          if (fill && fill !== "none") {
-            ctx.fillStyle = fill;
-            ctx.fill(p);
-          }
-          if (c.stroke) {
-            ctx.strokeStyle = c.stroke;
-            ctx.lineWidth = c.strokeWidth ?? 1;
-            if (c.round) {
-              ctx.lineJoin = "round";
-              ctx.lineCap = "round";
-            }
-            ctx.stroke(p);
-          }
-        }
-        break;
-      case "text":
-        ctx.font = `${c.weight ?? 400} ${c.size}px ${c.font ?? "sans-serif"}`;
-        ctx.textAlign = c.align ?? "left";
-        ctx.textBaseline = "middle";
-        if (c.stroke) {
-          ctx.strokeStyle = c.stroke;
-          ctx.lineWidth = c.strokeWidth ?? 1;
-          ctx.lineJoin = "round";
-          ctx.lineCap = "round";
-          ctx.strokeText(c.text, c.x, c.y);
-        }
-        ctx.fillStyle = c.fill ?? "#000";
-        ctx.fillText(c.text, c.x, c.y);
-        break;
-      case "image":
-        break;
-    }
-  }
-  roundRect(ctx, x, y, w, h, r) {
-    const rr = Math.min(r, w / 2, h / 2);
-    ctx.moveTo(x + rr, y);
-    ctx.arcTo(x + w, y, x + w, y + h, rr);
-    ctx.arcTo(x + w, y + h, x, y + h, rr);
-    ctx.arcTo(x, y + h, x, y, rr);
-    ctx.arcTo(x, y, x + w, y, rr);
-    ctx.closePath();
+    drawToCanvas2D(this.ctx, commands, this.width, this.height, this.background, this.dpr);
   }
   get element() {
     return this.canvas;
@@ -3266,11 +4101,517 @@ var Canvas2DRenderer = class {
   toDesign(clientX, clientY) {
     return clientToDesign(this.canvas.getBoundingClientRect(), this.width, this.height, clientX, clientY);
   }
+  viewport() {
+    return fitViewport(this.canvas.getBoundingClientRect(), this.width, this.height);
+  }
   dispose() {
     this.canvas.remove();
   }
 };
 
+// src/render/webgl.ts
+var VERT_SRC = (
+  /* glsl */
+  `#version 300 es
+out vec2 v_uv;
+void main() {
+  const vec2 CORNERS[4] = vec2[](
+    vec2(-1.0, -1.0), vec2(1.0, -1.0),
+    vec2(-1.0,  1.0), vec2(1.0,  1.0)
+  );
+  const vec2 UVS[4] = vec2[](
+    vec2(0.0, 1.0), vec2(1.0, 1.0),
+    vec2(0.0, 0.0), vec2(1.0, 0.0)
+  );
+  v_uv = UVS[gl_VertexID];
+  gl_Position = vec4(CORNERS[gl_VertexID], 0.0, 1.0);
+}`
+);
+var PASSTHROUGH_FRAG = (
+  /* glsl */
+  `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_scene;
+uniform sampler2D u_prev;
+out vec4 fragColor;
+void main() { fragColor = texture(u_prev, v_uv); }`
+);
+var WEBGL_EFFECTS = {
+  /** Passthrough — no effect. */
+  passthrough: PASSTHROUGH_FRAG,
+  /** Pixelate: blockSize in pixels (default 4). setUniform('u_block', N) */
+  pixelate: (
+    /* glsl */
+    `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_prev;
+uniform vec2 u_resolution;
+uniform float u_block;
+out vec4 fragColor;
+void main() {
+  float block = max(1.0, u_block > 0.0 ? u_block : 4.0);
+  vec2 px = floor(v_uv * u_resolution / block) * block / u_resolution;
+  fragColor = texture(u_prev, px);
+}`
+  ),
+  /** Vignette: darkens edges. setUniform('u_vignette', 0.0..1.0, default 0.4) */
+  vignette: (
+    /* glsl */
+    `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_prev;
+uniform float u_vignette;
+out vec4 fragColor;
+void main() {
+  vec4 col = texture(u_prev, v_uv);
+  vec2 uv = v_uv - 0.5;
+  float d = dot(uv, uv);
+  float strength = u_vignette > 0.0 ? u_vignette : 0.4;
+  fragColor = col * (1.0 - d * strength * 4.0);
+}`
+  ),
+  /** CRT scanlines + slight barrel distortion. u_time drives the scan roll. */
+  crt: (
+    /* glsl */
+    `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_prev;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_crt_lines;    // scanline density, default 600
+uniform float u_crt_warp;     // barrel strength, default 0.08
+out vec4 fragColor;
+void main() {
+  float lines = u_crt_lines > 0.0 ? u_crt_lines : 600.0;
+  float warp  = u_crt_warp  > 0.0 ? u_crt_warp  : 0.08;
+  // barrel distortion
+  vec2 uv = v_uv - 0.5;
+  float r2 = dot(uv, uv);
+  uv *= 1.0 + warp * r2;
+  uv += 0.5;
+  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
+    fragColor = vec4(0.0, 0.0, 0.0, 1.0);
+    return;
+  }
+  vec4 col = texture(u_prev, uv);
+  // rolling scanlines
+  float scan = sin((uv.y * lines + u_time * 40.0) * 3.14159) * 0.5 + 0.5;
+  col.rgb *= 0.75 + 0.25 * scan;
+  // slight green phosphor tint
+  col.rgb = mix(col.rgb, col.rgb * vec3(0.9, 1.05, 0.85), 0.3);
+  fragColor = col;
+}`
+  ),
+  /** Chromatic aberration / RGB fringe. setUniform('u_aberration', 0..0.01, default 0.004) */
+  chromaticAberration: (
+    /* glsl */
+    `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_prev;
+uniform float u_aberration;
+out vec4 fragColor;
+void main() {
+  float amt = u_aberration > 0.0 ? u_aberration : 0.004;
+  vec2 dir = v_uv - 0.5;
+  float r = texture(u_prev, v_uv + dir * amt * 2.0).r;
+  float g = texture(u_prev, v_uv).g;
+  float b = texture(u_prev, v_uv - dir * amt * 2.0).b;
+  fragColor = vec4(r, g, b, 1.0);
+}`
+  ),
+  /** Palette-shift / hue rotation. u_hue_shift in radians, driven by u_time for animation. */
+  hueRotate: (
+    /* glsl */
+    `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_prev;
+uniform float u_hue_shift; // radians; if 0 uses u_time
+uniform float u_time;
+out vec4 fragColor;
+void main() {
+  float angle = u_hue_shift != 0.0 ? u_hue_shift : u_time * 0.5;
+  vec4 col = texture(u_prev, v_uv);
+  // Hue rotate via Rodrigues in YIQ-ish space
+  float c = cos(angle), s = sin(angle);
+  mat3 m = mat3(
+    0.299+0.701*c+0.168*s, 0.587-0.587*c+0.330*s, 0.114-0.114*c-0.497*s,
+    0.299-0.299*c-0.328*s, 0.587+0.413*c+0.035*s, 0.114-0.114*c+0.292*s,
+    0.299-0.300*c+1.250*s, 0.587-0.588*c-1.050*s, 0.114+0.886*c-0.203*s
+  );
+  fragColor = vec4(m * col.rgb, col.a);
+}`
+  ),
+  /** Wave distortion (heat haze, underwater). setUniform('u_wave_amp', default 0.003) */
+  wave: (
+    /* glsl */
+    `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_prev;
+uniform float u_time;
+uniform float u_wave_amp;
+uniform float u_wave_freq;
+out vec4 fragColor;
+void main() {
+  float amp  = u_wave_amp  > 0.0 ? u_wave_amp  : 0.003;
+  float freq = u_wave_freq > 0.0 ? u_wave_freq : 8.0;
+  vec2 uv = v_uv;
+  uv.x += sin(uv.y * freq + u_time * 2.5) * amp;
+  uv.y += cos(uv.x * freq + u_time * 2.5) * amp;
+  fragColor = texture(u_prev, clamp(uv, 0.0, 1.0));
+}`
+  ),
+  // ── Multi-pass bloom building blocks ───────────────────────────────────────
+  // Use with setPipeline([brightpass, hblur, vblur, bloomComposite]).
+  /** Bloom pass 1/4: extract bright pixels above threshold (default 0.6). */
+  bloomBrightpass: (
+    /* glsl */
+    `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_prev;
+uniform float u_bloom_threshold;
+out vec4 fragColor;
+void main() {
+  vec4 col = texture(u_prev, v_uv);
+  float lum = dot(col.rgb, vec3(0.2126, 0.7152, 0.0722));
+  float thresh = u_bloom_threshold > 0.0 ? u_bloom_threshold : 0.55;
+  float weight = smoothstep(thresh - 0.05, thresh + 0.05, lum);
+  fragColor = col * weight;
+}`
+  ),
+  /** Bloom pass 2/4: horizontal gaussian blur (13-tap). */
+  bloomHBlur: (
+    /* glsl */
+    `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_prev;
+uniform vec2 u_resolution;
+uniform float u_bloom_spread;
+out vec4 fragColor;
+void main() {
+  float spread = u_bloom_spread > 0.0 ? u_bloom_spread : 1.0;
+  vec2 texel = vec2(spread / u_resolution.x, 0.0);
+  const float W[7] = float[](0.0625, 0.125, 0.1875, 0.25, 0.1875, 0.125, 0.0625);
+  vec4 sum = vec4(0.0);
+  for (int i = 0; i < 7; i++)
+    sum += texture(u_prev, clamp(v_uv + float(i-3) * texel, 0.0, 1.0)) * W[i];
+  fragColor = sum;
+}`
+  ),
+  /** Bloom pass 3/4: vertical gaussian blur (13-tap). */
+  bloomVBlur: (
+    /* glsl */
+    `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_prev;
+uniform vec2 u_resolution;
+uniform float u_bloom_spread;
+out vec4 fragColor;
+void main() {
+  float spread = u_bloom_spread > 0.0 ? u_bloom_spread : 1.0;
+  vec2 texel = vec2(0.0, spread / u_resolution.y);
+  const float W[7] = float[](0.0625, 0.125, 0.1875, 0.25, 0.1875, 0.125, 0.0625);
+  vec4 sum = vec4(0.0);
+  for (int i = 0; i < 7; i++)
+    sum += texture(u_prev, clamp(v_uv + float(i-3) * texel, 0.0, 1.0)) * W[i];
+  fragColor = sum;
+}`
+  ),
+  /** Bloom pass 4/4: composite original + blurred bloom. u_bloom_intensity controls strength. */
+  bloomComposite: (
+    /* glsl */
+    `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_scene;
+uniform sampler2D u_prev;
+uniform float u_bloom_intensity;
+out vec4 fragColor;
+void main() {
+  vec4 scene = texture(u_scene, v_uv);
+  vec4 bloom = texture(u_prev, v_uv);
+  float intensity = u_bloom_intensity > 0.0 ? u_bloom_intensity : 0.8;
+  fragColor = vec4(scene.rgb + bloom.rgb * intensity, scene.a);
+}`
+  )
+};
+var BLOOM_PIPELINE = [
+  { shader: WEBGL_EFFECTS.bloomBrightpass },
+  { shader: WEBGL_EFFECTS.bloomHBlur },
+  { shader: WEBGL_EFFECTS.bloomVBlur },
+  { shader: WEBGL_EFFECTS.bloomComposite }
+];
+function compileShader(gl, type, src) {
+  const sh = gl.createShader(type);
+  if (!sh) throw new Error("hayao/webgl: createShader failed");
+  gl.shaderSource(sh, src);
+  gl.compileShader(sh);
+  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(sh);
+    gl.deleteShader(sh);
+    throw new Error(`hayao/webgl: shader compile error
+${log}`);
+  }
+  return sh;
+}
+function buildProgram(gl, fragSrc) {
+  const vert = compileShader(gl, gl.VERTEX_SHADER, VERT_SRC);
+  const frag = compileShader(gl, gl.FRAGMENT_SHADER, fragSrc);
+  const prog = gl.createProgram();
+  if (!prog) throw new Error("hayao/webgl: createProgram failed");
+  gl.attachShader(prog, vert);
+  gl.attachShader(prog, frag);
+  gl.linkProgram(prog);
+  gl.deleteShader(vert);
+  gl.deleteShader(frag);
+  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(prog);
+    gl.deleteProgram(prog);
+    throw new Error(`hayao/webgl: program link error
+${log}`);
+  }
+  return prog;
+}
+function applyUniform(gl, prog, name, value) {
+  const loc = gl.getUniformLocation(prog, name);
+  if (loc === null) return;
+  if (typeof value === "number") {
+    gl.uniform1f(loc, value);
+  } else if (value.length === 2) {
+    gl.uniform2f(loc, value[0], value[1]);
+  } else if (value.length === 3) {
+    gl.uniform3f(loc, value[0], value[1], value[2]);
+  } else {
+    gl.uniform4f(loc, value[0], value[1], value[2], value[3]);
+  }
+}
+function makeFboSlot(gl, w, h) {
+  const tex = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  const fbo = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return { fbo, tex };
+}
+var WebGL2Renderer = class {
+  width;
+  height;
+  background;
+  glCanvas;
+  gl;
+  offscreen;
+  ctx2d;
+  dpr = 1;
+  /** Original rasterized scene texture. */
+  sceneTex;
+  /** Intermediate pass framebuffers (one per non-final pass). */
+  fbos = [];
+  /** Compiled programs, one per pass. */
+  programs = [];
+  /** Per-pass uniform maps (merged with global uniforms). */
+  passUniforms = [];
+  /** Empty VAO for gl_VertexID-only draws. */
+  vao;
+  /** Frames drawn, driving u_time at a nominal 60 fps (cosmetic, but deterministic). */
+  framesDrawn = 0;
+  /** Global custom uniforms applied to every pass. */
+  uniforms = /* @__PURE__ */ new Map();
+  constructor(config) {
+    this.width = config.width;
+    this.height = config.height;
+    this.background = config.background ?? "#ffffff";
+    this.glCanvas = document.createElement("canvas");
+    this.glCanvas.style.width = "100%";
+    this.glCanvas.style.height = "100%";
+    this.glCanvas.style.objectFit = "contain";
+    this.glCanvas.style.display = "block";
+    const gl = this.glCanvas.getContext("webgl2", { alpha: false, antialias: false, preserveDrawingBuffer: false });
+    if (!gl) throw new Error("hayao/webgl: WebGL2 unavailable \u2014 fall back to Canvas2DRenderer");
+    this.gl = gl;
+    this.offscreen = document.createElement("canvas");
+    const ctx2d = this.offscreen.getContext("2d");
+    if (!ctx2d) throw new Error("hayao/webgl: Canvas2D unavailable for rasterization");
+    this.ctx2d = ctx2d;
+    this.resize();
+    const vao = gl.createVertexArray();
+    if (!vao) throw new Error("hayao/webgl: createVertexArray failed");
+    this.vao = vao;
+    const tex = gl.createTexture();
+    if (!tex) throw new Error("hayao/webgl: createTexture failed");
+    this.sceneTex = tex;
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    this.buildPipeline([{ shader: config.postProcess ?? PASSTHROUGH_FRAG }]);
+  }
+  mount(parent) {
+    parent.appendChild(this.glCanvas);
+    this.resize();
+  }
+  resize() {
+    this.dpr = Math.min(3, globalThis.devicePixelRatio || 1);
+    const w = Math.round(this.width * this.dpr);
+    const h = Math.round(this.height * this.dpr);
+    this.glCanvas.width = w;
+    this.glCanvas.height = h;
+    this.offscreen.width = w;
+    this.offscreen.height = h;
+    this.gl.viewport(0, 0, w, h);
+    for (const slot of this.fbos) {
+      this.gl.bindTexture(this.gl.TEXTURE_2D, slot.tex);
+      this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, w, h, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);
+    }
+  }
+  buildPipeline(passes) {
+    const gl = this.gl;
+    const w = this.glCanvas.width || Math.round(this.width * this.dpr);
+    const h = this.glCanvas.height || Math.round(this.height * this.dpr);
+    for (const p of this.programs) gl.deleteProgram(p);
+    for (const s of this.fbos) {
+      gl.deleteFramebuffer(s.fbo);
+      gl.deleteTexture(s.tex);
+    }
+    this.programs = [];
+    this.fbos = [];
+    this.passUniforms = [];
+    for (const pass of passes) {
+      this.programs.push(buildProgram(gl, pass.shader));
+      this.passUniforms.push(pass.uniforms ?? {});
+    }
+    for (let i = 0; i < passes.length - 1; i++) {
+      this.fbos.push(makeFboSlot(gl, w, h));
+    }
+  }
+  draw(commands) {
+    const gl = this.gl;
+    const n5 = this.programs.length;
+    const t = this.framesDrawn++ / 60;
+    const w = this.glCanvas.width;
+    const h = this.glCanvas.height;
+    drawToCanvas2D(this.ctx2d, commands, this.width, this.height, this.background, this.dpr);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.sceneTex);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.offscreen);
+    gl.bindVertexArray(this.vao);
+    for (let i = 0; i < n5; i++) {
+      const prog = this.programs[i];
+      const isLast = i === n5 - 1;
+      if (isLast) {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.viewport(0, 0, w, h);
+      } else {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.fbos[i].fbo);
+        gl.viewport(0, 0, w, h);
+      }
+      gl.useProgram(prog);
+      gl.uniform1i(gl.getUniformLocation(prog, "u_scene"), 0);
+      gl.activeTexture(gl.TEXTURE1);
+      if (i === 0) {
+        gl.bindTexture(gl.TEXTURE_2D, this.sceneTex);
+      } else {
+        gl.bindTexture(gl.TEXTURE_2D, this.fbos[i - 1].tex);
+      }
+      gl.uniform1i(gl.getUniformLocation(prog, "u_prev"), 1);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.uniform1f(gl.getUniformLocation(prog, "u_time"), t);
+      gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), w, h);
+      for (const [name, val] of this.uniforms) applyUniform(gl, prog, name, val);
+      for (const [name, val] of Object.entries(this.passUniforms[i])) applyUniform(gl, prog, name, val);
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    }
+  }
+  // ── Public control API ────────────────────────────────────────────────────
+  /**
+   * Set a custom uniform applied to every pass. Useful for knob-driven effect
+   * parameters (intensity, scale, colour) without recompiling the shader.
+   * The value is set on every draw() until cleared or overridden.
+   *
+   * ```ts
+   * renderer.setUniform('u_vignette', 0.5);
+   * renderer.setUniform('u_bloom_intensity', [1.0, 0.8]);
+   * ```
+   */
+  setUniform(name, value) {
+    this.uniforms.set(name, value);
+    return this;
+  }
+  /** Remove a custom uniform. */
+  clearUniform(name) {
+    this.uniforms.delete(name);
+    return this;
+  }
+  /**
+   * Replace the post-processing pipeline. Accepts an array of passes; each
+   * pass reads `u_prev` (previous output) and `u_scene` (original frame).
+   * Throws on shader compile error — previous pipeline stays active.
+   *
+   * For single-pass effects, prefer `setPostProcess(shader)`. For the standard
+   * bloom setup, use `setPipeline(BLOOM_PIPELINE)`.
+   *
+   * ```ts
+   * renderer.setPipeline([
+   *   { shader: WEBGL_EFFECTS.bloomBrightpass },
+   *   { shader: WEBGL_EFFECTS.bloomHBlur },
+   *   { shader: WEBGL_EFFECTS.bloomVBlur },
+   *   { shader: WEBGL_EFFECTS.bloomComposite },
+   * ]);
+   * renderer.setUniform('u_bloom_intensity', 1.0);
+   * ```
+   */
+  setPipeline(passes) {
+    this.buildPipeline(passes.length ? passes : [{ shader: PASSTHROUGH_FRAG }]);
+    return this;
+  }
+  /**
+   * Convenience: set a single-pass post-processing shader.
+   * Throws on compile error — previous effect stays active.
+   */
+  setPostProcess(fragmentShader) {
+    return this.setPipeline([{ shader: fragmentShader }]);
+  }
+  /** Restore passthrough (no post-processing). */
+  clearPostProcess() {
+    return this.setPostProcess(PASSTHROUGH_FRAG);
+  }
+  get element() {
+    return this.glCanvas;
+  }
+  toDesign(clientX, clientY) {
+    return clientToDesign(this.glCanvas.getBoundingClientRect(), this.width, this.height, clientX, clientY);
+  }
+  viewport() {
+    return fitViewport(this.glCanvas.getBoundingClientRect(), this.width, this.height);
+  }
+  dispose() {
+    const gl = this.gl;
+    gl.deleteTexture(this.sceneTex);
+    for (const p of this.programs) gl.deleteProgram(p);
+    for (const s of this.fbos) {
+      gl.deleteFramebuffer(s.fbo);
+      gl.deleteTexture(s.tex);
+    }
+    gl.deleteVertexArray(this.vao);
+    this.glCanvas.remove();
+  }
+};
+
 // src/render/headless.ts
 var HeadlessRenderer = class {
   width;
@@ -4541,6 +5882,7 @@ function resolve(s) {
     pitchJumpTime: s.pitchJumpTime ?? 0,
     vibrato: s.vibrato ?? 0,
     vibratoFreq: s.vibratoFreq ?? 6,
+    repeat: Math.max(0, s.repeat ?? 0),
     detune: s.detune ?? 0,
     sub: Math.max(0, s.sub ?? 0),
     noise: s.noise ?? 0,
@@ -4601,9 +5943,10 @@ function renderSound(spec, opts = {}) {
     let env = adsr(t, r);
     if (r.punch > 0) env *= 1 + r.punch * Math.max(0, 1 - t / Math.max(1e-4, r.attack + r.decay));
     if (r.tremolo > 0) env *= 1 - r.tremolo * 0.5 * (1 - dsin(TAU * r.tremoloFreq * t));
-    const prog = body > 0 ? t / body : 0;
+    const pt = r.repeat > 0 ? t - Math.floor(t / r.repeat) * r.repeat : t;
+    const prog = body > 0 ? pt / body : 0;
     let f = r.freq * semis(r.slide * prog + r.slideAccel * prog * prog);
-    if (r.pitchJump !== 0 && t >= r.pitchJumpTime) f *= semis(r.pitchJump);
+    if (r.pitchJump !== 0 && pt >= r.pitchJumpTime) f *= semis(r.pitchJump);
     if (r.vibrato > 0) f *= semis(r.vibrato * dsin(TAU * r.vibratoFreq * t));
     if (r.fm > 0) f += r.fm * dsin(TAU * r.fmFreq * t);
     if (f < 0) f = 0;
@@ -5052,33 +6395,56 @@ var INSTRUMENTS = {
 // src/audio/audio.ts
 var DEFAULT_VOLUMES = { master: 0.7, music: 0.6, sfx: 0.8, muted: false };
 var AudioBus = class {
-  ctx = null;
+  _ctx = null;
   master = null;
   musicGain = null;
   sfxGain = null;
   vol = { ...DEFAULT_VOLUMES };
   padOn = false;
+  /**
+   * The live AudioContext (null until `start()` unlocks audio). External
+   * synths being ported in (bundled ZzFX/ZzFXM, hand-rolled Web Audio) should
+   * create their sources ON this context — never their own — so they inherit
+   * the autoplay unlock the user gesture already paid for.
+   */
+  get ctx() {
+    return this._ctx;
+  }
+  /**
+   * The SFX mix bus (null until `start()`). Connect external one-shot sources
+   * here instead of `ctx.destination` so master/sfx volume and mute apply.
+   */
+  get sfxBus() {
+    return this.sfxGain;
+  }
+  /**
+   * The music mix bus (null until `start()`). Connect external music sources
+   * (e.g. a ZzFXM-rendered buffer) here so master/music volume and mute apply.
+   */
+  get musicBus() {
+    return this.musicGain;
+  }
   get available() {
     return typeof globalThis.AudioContext !== "undefined" || "webkitAudioContext" in globalThis;
   }
   get started() {
-    return !!this.ctx;
+    return !!this._ctx;
   }
   /** Must be called from a user gesture (browser autoplay policy). */
   start() {
-    if (this.ctx) {
-      void this.ctx.resume();
+    if (this._ctx) {
+      void this._ctx.resume();
       return;
     }
     if (!this.available) return;
     const Ctx = globalThis.AudioContext || globalThis.webkitAudioContext;
-    this.ctx = new Ctx();
-    this.master = this.ctx.createGain();
-    this.musicGain = this.ctx.createGain();
-    this.sfxGain = this.ctx.createGain();
+    this._ctx = new Ctx();
+    this.master = this._ctx.createGain();
+    this.musicGain = this._ctx.createGain();
+    this.sfxGain = this._ctx.createGain();
     this.musicGain.connect(this.master);
     this.sfxGain.connect(this.master);
-    this.master.connect(this.ctx.destination);
+    this.master.connect(this._ctx.destination);
     this.applyVolumes();
   }
   setVolumes(v) {
@@ -5089,27 +6455,27 @@ var AudioBus = class {
     return { ...this.vol };
   }
   applyVolumes() {
-    if (!this.ctx || !this.master || !this.musicGain || !this.sfxGain) return;
-    const t = this.ctx.currentTime;
+    if (!this._ctx || !this.master || !this.musicGain || !this.sfxGain) return;
+    const t = this._ctx.currentTime;
     this.master.gain.setTargetAtTime(this.vol.muted ? 0 : this.vol.master, t, 0.04);
     this.musicGain.gain.setTargetAtTime(this.vol.music * 0.5, t, 0.04);
     this.sfxGain.gain.setTargetAtTime(this.vol.sfx, t, 0.04);
   }
   /** Play a single tone (no-op if audio unstarted). */
   tone(spec) {
-    if (!this.ctx || !this.sfxGain) return;
+    if (!this._ctx || !this.sfxGain) return;
     const { freq, duration, type = "sine", gain = 0.2, delay = 0, pan } = spec;
-    const t = this.ctx.currentTime + delay;
-    const osc = this.ctx.createOscillator();
+    const t = this._ctx.currentTime + delay;
+    const osc = this._ctx.createOscillator();
     osc.type = type;
     osc.frequency.value = freq;
-    const g = this.ctx.createGain();
+    const g = this._ctx.createGain();
     g.gain.setValueAtTime(0, t);
     g.gain.linearRampToValueAtTime(gain, t + 8e-3);
     g.gain.exponentialRampToValueAtTime(1e-4, t + duration);
     osc.connect(g);
-    if (pan !== void 0 && typeof this.ctx.createStereoPanner === "function") {
-      const p = this.ctx.createStereoPanner();
+    if (pan !== void 0 && typeof this._ctx.createStereoPanner === "function") {
+      const p = this._ctx.createStereoPanner();
       p.pan.value = Math.max(-1, Math.min(1, pan));
       g.connect(p);
       p.connect(this.sfxGain);
@@ -5139,24 +6505,24 @@ var AudioBus = class {
    * No-op without an AudioContext.
    */
   playSpec(spec, opts = {}) {
-    if (!this.ctx || !this.sfxGain) return;
-    const sig = renderSound(spec, { sampleRate: this.ctx.sampleRate });
-    const buf = this.ctx.createBuffer(1, sig.length, this.ctx.sampleRate);
+    if (!this._ctx || !this.sfxGain) return;
+    const sig = renderSound(spec, { sampleRate: this._ctx.sampleRate });
+    const buf = this._ctx.createBuffer(1, sig.length, this._ctx.sampleRate);
     buf.copyToChannel(new Float32Array(sig), 0);
-    const src = this.ctx.createBufferSource();
+    const src = this._ctx.createBufferSource();
     src.buffer = buf;
-    const g = this.ctx.createGain();
+    const g = this._ctx.createGain();
     g.gain.value = opts.gain ?? 1;
     src.connect(g);
-    if (opts.pan !== void 0 && typeof this.ctx.createStereoPanner === "function") {
-      const p = this.ctx.createStereoPanner();
+    if (opts.pan !== void 0 && typeof this._ctx.createStereoPanner === "function") {
+      const p = this._ctx.createStereoPanner();
       p.pan.value = Math.max(-1, Math.min(1, opts.pan));
       g.connect(p);
       p.connect(this.sfxGain);
     } else {
       g.connect(this.sfxGain);
     }
-    src.start(this.ctx.currentTime + (opts.when ?? 0));
+    src.start(this._ctx.currentTime + (opts.when ?? 0));
   }
   /**
    * Render a Song offline and play it on the music bus. Returns a stop handle.
@@ -5164,13 +6530,13 @@ var AudioBus = class {
    * an AudioContext.
    */
   playSong(song, opts = {}) {
-    if (!this.ctx || !this.musicGain) return () => {
+    if (!this._ctx || !this.musicGain) return () => {
     };
-    const mix2 = renderSong(song, { sampleRate: this.ctx.sampleRate });
-    const buf = this.ctx.createBuffer(2, mix2.left.length, this.ctx.sampleRate);
+    const mix2 = renderSong(song, { sampleRate: this._ctx.sampleRate });
+    const buf = this._ctx.createBuffer(2, mix2.left.length, this._ctx.sampleRate);
     buf.copyToChannel(new Float32Array(mix2.left), 0);
     buf.copyToChannel(new Float32Array(mix2.right), 1);
-    const src = this.ctx.createBufferSource();
+    const src = this._ctx.createBufferSource();
     src.buffer = buf;
     if (opts.loop) {
       src.loop = true;
@@ -5201,26 +6567,26 @@ var AudioBus = class {
   }
   /** Start a soft evolving ambient pad on the music bus. */
   startAmbient(root = 110, voices = [1, 1.5, 2, 2.5]) {
-    if (!this.ctx || !this.musicGain || this.padOn) return;
+    if (!this._ctx || !this.musicGain || this.padOn) return;
     this.padOn = true;
-    const filter = this.ctx.createBiquadFilter();
+    const filter = this._ctx.createBiquadFilter();
     filter.type = "lowpass";
     filter.frequency.value = 900;
     filter.connect(this.musicGain);
-    const bus = this.ctx.createGain();
+    const bus = this._ctx.createGain();
     bus.gain.value = 0;
     bus.connect(filter);
     for (const mult of voices) {
-      const osc = this.ctx.createOscillator();
+      const osc = this._ctx.createOscillator();
       osc.type = "triangle";
       osc.frequency.value = root * mult;
-      const g = this.ctx.createGain();
+      const g = this._ctx.createGain();
       g.gain.value = 0.1 / voices.length;
       osc.connect(g);
       g.connect(bus);
       osc.start();
     }
-    bus.gain.setTargetAtTime(0.9, this.ctx.currentTime, 3);
+    bus.gain.setTargetAtTime(0.9, this._ctx.currentTime, 3);
   }
 };
 var audio = new AudioBus();
@@ -5944,7 +7310,7 @@ function melancholicPiano() {
 }
 function epicOrchestral() {
   const key = noteToMidi("D3");
-  const all = voiceLead(progression(key, "minor", ["i", "VI", "III", "VII", "VI", "VII", "i", "i"]));
+  const all2 = voiceLead(progression(key, "minor", ["i", "VI", "III", "VII", "VI", "VII", "i", "i"]));
   const scale = scaleMidis(noteToMidi("D4"), "minor", 3);
   const deg = (i) => scale[(i % scale.length + scale.length) % scale.length];
   const strings = {
@@ -5952,7 +7318,7 @@ function epicOrchestral() {
     instrument: { ...INSTRUMENTS.strings, volume: 0.24 },
     gain: 0.7,
     pan: -0.15,
-    patterns: all.map((c) => arp([c[0], c[1], c[2], c[0] + 12], 8, 0.5, 0.75)),
+    patterns: all2.map((c) => arp([c[0], c[1], c[2], c[0] + 12], 8, 0.5, 0.75)),
     sequence: [0, 1, 2, 3, 4, 5, 6, 7]
   };
   const themeBars = [
@@ -5980,7 +7346,7 @@ function epicOrchestral() {
     instrument: { ...INSTRUMENTS.choir, volume: 0.18 },
     gain: 0.5,
     pan: 0.05,
-    patterns: all.map((c) => [n3([c[2] + 12, c[0] + 24], 4, 0.6)]),
+    patterns: all2.map((c) => [n3([c[2] + 12, c[0] + 24], 4, 0.6)]),
     sequence: [0, 1, 2, 3, 4, 5, 6, 7]
   };
   const timp = {
@@ -5996,7 +7362,7 @@ function epicOrchestral() {
     gain: 0.32,
     pan: 0.25,
     // sparkles in only from bar 3, with the theme
-    patterns: [restBar, ...all.map((c) => [rest(1), n3(c[2] + 24, 1, 0.55), rest(1), n3(c[1] + 24, 1, 0.5)])],
+    patterns: [restBar, ...all2.map((c) => [rest(1), n3(c[2] + 24, 1, 0.55), rest(1), n3(c[1] + 24, 1, 0.5)])],
     sequence: [0, 0, 3, 4, 5, 6, 7, 8]
   };
   return { bpm: 88, tracks: [timp, strings, brass, choir, glock], humanize: 0.14, velBrightness: 0.5, reverb: { wet: 0.32, roomSize: 0.9, damp: 0.4 }, master: { lowCut: 0.4, presence: 0.32, air: 0.14 } };
@@ -6051,6 +7417,83 @@ function genre(id) {
   return GENRES.find((g) => g.id === id);
 }
 
+// src/audio/zzfx.ts
+var SHAPES = ["sine", "triangle", "saw", "square", "noise"];
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(param, msg) {
+  if (warned.has(param)) return;
+  warned.add(param);
+  console.warn(`[hayao] specFromZzfx: ${param} ${msg}`);
+}
+function resetZzfxWarnings() {
+  warned.clear();
+}
+function specFromZzfx(p) {
+  const volume = p[0] ?? 1;
+  const randomness = p[1] ?? 0.05;
+  const frequency = p[2] ?? 220;
+  const attack = p[3] ?? 0;
+  const sustain = p[4] ?? 0;
+  const release = p[5] ?? 0.1;
+  const shape = p[6] ?? 0;
+  const shapeCurve = p[7] ?? 1;
+  const slide = p[8] ?? 0;
+  const deltaSlide = p[9] ?? 0;
+  const pitchJump = p[10] ?? 0;
+  const pitchJumpTime = p[11] ?? 0;
+  const repeatTime = p[12] ?? 0;
+  const noise = p[13] ?? 0;
+  const modulation = p[14] ?? 0;
+  const bitCrush = p[15] ?? 0;
+  const delay = p[16] ?? 0;
+  const sustainVolume = p[17] ?? 1;
+  const decay = p[18] ?? 0;
+  const tremolo = p[19] ?? 0;
+  const filter = p[20] ?? 0;
+  const body = attack + decay + sustain + release;
+  const spec = {
+    freq: frequency,
+    volume,
+    attack,
+    decay,
+    sustain,
+    release,
+    sustainLevel: sustainVolume
+  };
+  const shapeIdx = Math.max(0, Math.min(SHAPES.length - 1, Math.round(shape)));
+  spec.wave = SHAPES[shapeIdx];
+  if (Math.round(shape) === 3) warnOnce("shape=3 (tan)", "has no hayao wave; approximated as a hard square.");
+  if (shapeCurve !== 1) spec.shapeCurve = shapeCurve;
+  if (randomness !== 0) warnOnce("randomness", "is dropped: hayao specs are deterministic (same spec \u2192 same samples).");
+  if (slide !== 0) spec.slide = slide * body;
+  if (deltaSlide !== 0) spec.slideAccel = deltaSlide * body * body / 2;
+  if (pitchJump !== 0) {
+    const target = frequency + pitchJump;
+    if (target > 0 && frequency > 0) {
+      spec.pitchJump = 12 * dlog2(target / frequency);
+      spec.pitchJumpTime = pitchJumpTime;
+    } else {
+      warnOnce("pitchJump", "would drive frequency to \u2264 0 Hz; dropped.");
+    }
+  }
+  if (repeatTime > 0) spec.repeat = repeatTime;
+  if (noise !== 0) spec.noise = Math.max(0, Math.min(1, noise));
+  if (modulation !== 0) {
+    warnOnce("modulation", "is approximated as vibrato (pitch LFO at |modulation| Hz).");
+    spec.vibrato = 0.6;
+    spec.vibratoFreq = Math.abs(modulation);
+  }
+  if (bitCrush > 0) spec.bitCrush = Math.max(1, Math.round(bitCrush * 100));
+  if (tremolo !== 0) spec.tremolo = Math.max(0, Math.min(1, tremolo));
+  if (delay > 0) {
+    spec.delay = delay;
+    spec.delayFeedback = 0.5;
+  }
+  if (filter > 0) spec.lowpass = filter;
+  else if (filter < 0) spec.highpass = -filter;
+  return spec;
+}
+
 // src/audio/album.ts
 var n4 = (pitch, beats, vel = 1) => ({ pitch, beats, vel });
 var rest2 = (beats) => ({ pitch: null, beats });
@@ -6635,6 +8078,163 @@ var Shell = class {
   }
 };
 
+// src/ui/touch.ts
+var STYLE_ID2 = "hayao-touch-style";
+var CSS2 = `
+.hy-touch{position:absolute;inset:0;z-index:40;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none}
+.hy-stick{position:absolute;bottom:6%;width:120px;height:120px;border-radius:50%;pointer-events:auto;background:rgba(20,16,10,.16);border:2px solid rgba(250,244,230,.35);box-shadow:inset 0 0 20px rgba(0,0,0,.12)}
+.hy-stick.left{left:5%}
+.hy-stick.right{right:5%}
+.hy-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(250,244,230,.6);border:2px solid rgba(20,16,10,.25);transition:transform .04s linear}
+.hy-btns{position:absolute;right:5%;bottom:26%;display:flex;flex-direction:column-reverse;gap:12px;pointer-events:none}
+.hy-btn{pointer-events:auto;width:66px;height:66px;border-radius:50%;font:600 15px/1 var(--hy-serif,Georgia,serif);color:#fbf6ea;background:var(--hy-accent,#a11d3a);border:2px solid rgba(250,244,230,.4);box-shadow:0 4px 12px rgba(30,20,10,.3);display:grid;place-items:center;text-transform:capitalize}
+.hy-btn:active,.hy-btn.on{transform:translateY(2px);filter:brightness(1.15)}
+`;
+function ensureStyle2() {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID2)) return;
+  const s = document.createElement("style");
+  s.id = STYLE_ID2;
+  s.textContent = CSS2;
+  document.head.appendChild(s);
+}
+function normDirs(s) {
+  if (!s.dirs) return void 0;
+  return Array.isArray(s.dirs) ? { up: s.dirs[0], down: s.dirs[1], left: s.dirs[2], right: s.dirs[3] } : s.dirs;
+}
+var TouchControls = class {
+  handle;
+  root;
+  disposers = [];
+  /** Every action this control set can hold — released together on dispose/reset. */
+  owned = /* @__PURE__ */ new Set();
+  constructor(handle, layout) {
+    this.handle = handle;
+    ensureStyle2();
+    const coarse = typeof matchMedia !== "undefined" && matchMedia("(pointer: coarse)").matches;
+    const mount = handle.canvas?.parentElement ?? void 0;
+    this.root = document.createElement("div");
+    this.root.className = "hy-touch";
+    if (mount && (layout.touchOnly === false || coarse)) mount.appendChild(this.root);
+    const left = normStick(layout.left);
+    const right = normStick(layout.right);
+    if (left) this.addStick("left", left);
+    if (right) this.addStick("right", right);
+    if (layout.buttons?.length) this.addButtons(layout.buttons);
+  }
+  addStick(side, spec) {
+    const base = document.createElement("div");
+    base.className = `hy-stick ${side}`;
+    const knob2 = document.createElement("div");
+    knob2.className = "hy-knob";
+    base.appendChild(knob2);
+    this.root.appendChild(base);
+    const dirs = normDirs(spec);
+    const prefix = spec.prefix;
+    const buckets = spec.buckets ?? 32;
+    const dead = spec.deadzone ?? 0.28;
+    let activeId = null;
+    const setAxes = (nx, ny) => {
+      if (!prefix) return;
+      const axes = this.handle.world.input.axes;
+      axes.set(`${prefix}x`, snapAxis(nx, buckets));
+      axes.set(`${prefix}y`, snapAxis(ny, buckets));
+      axes.set(`${prefix}angle`, nx === 0 && ny === 0 ? 0 : quantizeAngle(datan2(ny, nx), buckets));
+    };
+    const release = () => {
+      if (dirs) for (const a of [dirs.up, dirs.down, dirs.left, dirs.right]) this.hold(a, false);
+      setAxes(0, 0);
+      knob2.style.transform = "translate(0,0)";
+      activeId = null;
+    };
+    const apply = (clientX, clientY) => {
+      const r = base.getBoundingClientRect();
+      const rad = r.width / 2;
+      let dx = (clientX - (r.left + rad)) / rad;
+      let dy = (clientY - (r.top + rad)) / rad;
+      const m = dhypot(dx, dy);
+      if (m > 1) {
+        dx /= m;
+        dy /= m;
+      }
+      knob2.style.transform = `translate(${dx * rad * 0.6}px,${dy * rad * 0.6}px)`;
+      const mag = dhypot(dx, dy);
+      if (dirs) {
+        this.hold(dirs.left, dx < -dead);
+        this.hold(dirs.right, dx > dead);
+        this.hold(dirs.up, dy < -dead);
+        this.hold(dirs.down, dy > dead);
+      }
+      setAxes(mag < dead ? 0 : dx, mag < dead ? 0 : dy);
+    };
+    const onDown = (e) => {
+      if (activeId !== null) return;
+      activeId = e.pointerId;
+      base.setPointerCapture?.(e.pointerId);
+      apply(e.clientX, e.clientY);
+      e.preventDefault();
+    };
+    const onMove = (e) => {
+      if (e.pointerId === activeId) apply(e.clientX, e.clientY);
+    };
+    const onUp = (e) => {
+      if (e.pointerId === activeId) release();
+    };
+    base.addEventListener("pointerdown", onDown);
+    base.addEventListener("pointermove", onMove);
+    base.addEventListener("pointerup", onUp);
+    base.addEventListener("pointercancel", onUp);
+    this.disposers.push(() => {
+      release();
+      base.remove();
+    });
+  }
+  addButtons(buttons) {
+    const wrap = document.createElement("div");
+    wrap.className = "hy-btns";
+    this.root.appendChild(wrap);
+    for (const b of buttons) {
+      const el = document.createElement("button");
+      el.className = "hy-btn";
+      el.textContent = b.label ?? b.action;
+      wrap.appendChild(el);
+      const hold2 = b.hold ?? true;
+      const down = (e) => {
+        el.classList.add("on");
+        if (hold2) this.hold(b.action, true);
+        else this.handle.input.press(b.action);
+        el.setPointerCapture?.(e.pointerId);
+        e.preventDefault();
+      };
+      const up = () => {
+        el.classList.remove("on");
+        if (hold2) this.hold(b.action, false);
+      };
+      el.addEventListener("pointerdown", down);
+      el.addEventListener("pointerup", up);
+      el.addEventListener("pointercancel", up);
+      this.disposers.push(() => {
+        up();
+        el.remove();
+      });
+    }
+    this.disposers.push(() => wrap.remove());
+  }
+  hold(action, on) {
+    this.handle.input.setHeld(action, on);
+    if (on) this.owned.add(action);
+  }
+  dispose() {
+    for (const d of this.disposers.splice(0)) d();
+    for (const a of this.owned) this.handle.input.setHeld(a, false);
+    this.owned.clear();
+    this.root.remove();
+  }
+};
+function normStick(s) {
+  if (!s) return void 0;
+  return Array.isArray(s) ? { dirs: s } : s;
+}
+
 // src/ui/transition.ts
 var BAYER4 = [0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5];
 var smoothstep2 = (t) => t * t * (3 - 2 * t);
@@ -6862,7 +8462,7 @@ function replay(makeWorld, log) {
   const world = makeWorld();
   const hashes = [];
   for (let i = 0; i < log.frames.length; i++) {
-    world.step(frameActions(log, i));
+    world.step(frameActions(log, i), frameAxes(log, i));
     hashes.push(world.hash());
   }
   return { finalHash: world.hash(), hashes };
@@ -6895,13 +8495,13 @@ function assertDeterministic(makeWorld, log) {
 }
 function assertSnapshotStable(makeWorld, log, warmup) {
   const original = makeWorld();
-  for (let i = 0; i < warmup; i++) original.step(frameActions(log, i));
+  for (let i = 0; i < warmup; i++) original.step(frameActions(log, i), frameAxes(log, i));
   const snap = original.snapshot();
   const restored = makeWorld();
   restored.restore(snap);
   for (let i = warmup; i < log.frames.length; i++) {
-    original.step(frameActions(log, i));
-    restored.step(frameActions(log, i));
+    original.step(frameActions(log, i), frameAxes(log, i));
+    restored.step(frameActions(log, i), frameAxes(log, i));
   }
   const hashA = original.hash();
   const hashB = restored.hash();
@@ -7572,12 +9172,29 @@ var World = class {
   state = {};
   width;
   height;
+  /**
+   * Pause switch. While true, only `pauseMode: 'always'` subtrees update —
+   * rendering, input sampling, and the clock keep ticking, so a pause menu
+   * (an 'always' subtree) stays live. Sim state: hashed + snapshotted, but
+   * only when true, so pinned hashes of unpaused games are unchanged.
+   */
+  paused = false;
+  /**
+   * Sim-time multiplier: the tree receives `clock.dt * timeScale` (slow-mo /
+   * fast-forward), while `'always'` subtrees get the unscaled dt so UI keeps
+   * realtime feel. The clock itself ticks normally. Hashed/snapshotted only
+   * when ≠ 1.
+   */
+  timeScale = 1;
   root;
   activeCamera = null;
   seed;
   freeQueue = [];
   started = false;
   tuningValues;
+  guardDeterminism;
+  warnedClamp = false;
+  warnedNondet = false;
   constructor(config = {}) {
     this.seed = config.seed ?? 1;
     this.rng = new Rng(this.seed);
@@ -7585,6 +9202,7 @@ var World = class {
     this.width = config.width ?? 1280;
     this.height = config.height ?? 720;
     this.tuningValues = { ...config.tuning ?? {} };
+    this.guardDeterminism = config.guardDeterminism ?? false;
     this.root = new Node({ name: "root" });
   }
   /**
@@ -7597,6 +9215,18 @@ var World = class {
     if (v === void 0) throw new Error(`tune('${key}'): no such knob declared in the game's tuning spec`);
     return v;
   }
+  /**
+   * Read a shared resource by key. Throws on a missing key (listing what IS
+   * available) — a typo here would otherwise silently read `undefined` into
+   * the sim, exactly like an undeclared tuning knob.
+   */
+  resource(key) {
+    if (!this.resources.has(key)) {
+      const available = [...this.resources.keys()].join(", ") || "(none)";
+      throw new Error(`resource('${key}'): not set. Available: ${available}`);
+    }
+    return this.resources.get(key);
+  }
   get time() {
     return this.clock.simTimeSec;
   }
@@ -7622,12 +9252,51 @@ var World = class {
    * Advance exactly one fixed step with the given actions held down.
    * This is THE deterministic transition — call it from Node or the browser loop.
    */
-  step(actionsDown = []) {
+  step(actionsDown = [], axes) {
+    if (typeof actionsDown === "string" || typeof actionsDown[Symbol.iterator] !== "function") {
+      throw new TypeError(`step(actionsDown): pass an array/iterable of action names, got ${typeof actionsDown === "string" ? `the string '${actionsDown}'` : typeof actionsDown}`);
+    }
     this.ensureStarted();
-    this.input.beginFrame(actionsDown);
-    this.root.updateTree(this.clock.dt);
-    this.flushFree();
-    this.clock.tick();
+    const unguard = this.guardDeterminism ? this.installGuard() : null;
+    try {
+      this.input.beginFrame(actionsDown, axes);
+      this.root.updateTree(this.clock.dt * this.timeScale, this.clock.dt, "pausable", this.paused);
+      this.flushFree();
+      this.clock.tick();
+    } finally {
+      unguard?.();
+    }
+  }
+  /**
+   * Wrap `Math.random`/`Date.now` for the duration of a step so a stray call
+   * inside the sim warns ONCE per world (with a stack hint) — the values still
+   * flow through, so nothing breaks mid-frame. Returns the restore function;
+   * properly nested re-entry (a world stepped inside another's step) is safe
+   * because each install restores exactly what it replaced.
+   */
+  installGuard() {
+    const mathObj = globalThis.Math;
+    const realRandom = mathObj.random;
+    const realNow = globalThis.Date.now;
+    const warn = (what) => {
+      if (this.warnedNondet) return;
+      this.warnedNondet = true;
+      const stack = new Error().stack?.split("\n").slice(2, 5).join("\n") ?? "";
+      console.warn(`hayao: ${what} called during step() \u2014 nondeterministic. Use world.rng / ctx.time instead.
+${stack}`);
+    };
+    mathObj.random = () => {
+      warn("Math.random");
+      return realRandom.call(mathObj);
+    };
+    globalThis.Date.now = () => {
+      warn("Date.now");
+      return realNow.call(globalThis.Date);
+    };
+    return () => {
+      mathObj.random = realRandom;
+      globalThis.Date.now = realNow;
+    };
   }
   /**
    * Feed REAL elapsed ms; runs 0+ fixed steps. Returns steps run. This is the
@@ -7636,9 +9305,13 @@ var World = class {
    * not 72. For headless tests/harnesses that want to fast-forward an exact
    * number of steps, use `runSteps(n)` or `step()` — never `advance` with a big ms.
    */
-  advance(realMs, actionsDown = []) {
+  advance(realMs, actionsDown = [], axes) {
+    if (realMs > this.clock.maxFrameMs && !this.warnedClamp) {
+      this.warnedClamp = true;
+      console.warn(`hayao: advance(${realMs}) exceeds maxFrameMs (${this.clock.maxFrameMs}) and is clamped \u2014 a realtime driver must never spiral. To fast-forward an exact number of steps, use runSteps(n).`);
+    }
     const steps = this.clock.advance(realMs);
-    for (let i = 0; i < steps; i++) this.step(actionsDown);
+    for (let i = 0; i < steps; i++) this.step(actionsDown, axes);
     return steps;
   }
   /**
@@ -7646,9 +9319,16 @@ var World = class {
    * headless drivers (unlike `advance`, no realtime clamp). Pass `actionsFor(i)`
    * to script the input per step; omit it to hold nothing down.
    */
-  runSteps(n5, actionsFor) {
-    for (let i = 0; i < n5; i++) this.step(actionsFor ? actionsFor(i) : []);
+  runSteps(n5, actionsFor, axesFor) {
+    for (let i = 0; i < n5; i++) this.step(actionsFor ? actionsFor(i) : [], axesFor?.(i));
   }
+  /**
+   * Run pending frees NOW instead of at the end of the step. `free()` is
+   * deferred (safe during iteration), which means freed nodes survive until
+   * the step ends — during a scene swap that lets old nodes contaminate the
+   * first frame of the new scene. Pattern: `oldRoot.free(); world.flushFree();
+   * buildNewScene()`. Called automatically at the end of every step.
+   */
   flushFree() {
     if (this.freeQueue.length === 0) return;
     const q = this.freeQueue;
@@ -7659,6 +9339,45 @@ var World = class {
       if (this.activeCamera === node) this.activeCamera = null;
     }
   }
+  // ── Tree inspection ──────────────────────────────────────────
+  /** Visit every live node depth-first (root first, child-index order). */
+  walk(fn) {
+    const visit = (n5) => {
+      fn(n5);
+      for (const c of n5.children) visit(c);
+    };
+    visit(this.root);
+  }
+  /** Total live nodes in the tree (root included). */
+  get nodeCount() {
+    let n5 = 0;
+    this.walk(() => n5++);
+    return n5;
+  }
+  /**
+   * One indented line per node — `name (type) [flags] @x,y` — for quick tree
+   * audits in a REPL or test failure message.
+   */
+  debugTree() {
+    const lines = [];
+    const visit = (n5, depth) => {
+      const flags = [];
+      if (n5.cosmetic) flags.push("cosmetic");
+      if (n5.screenSpace) flags.push("screenSpace");
+      if (n5.pauseMode !== "inherit") flags.push(n5.pauseMode);
+      if (!n5.visible) flags.push("!visible");
+      lines.push(`${"  ".repeat(depth)}${n5.name} (${n5.type})${flags.length > 0 ? ` [${flags.join(" ")}]` : ""} @${n5.pos.x},${n5.pos.y}`);
+      for (const c of n5.children) visit(c, depth + 1);
+    };
+    visit(this.root, 0);
+    return lines.join("\n");
+  }
+  /** The active camera's world position + zoom, or null (see WorldContext.camera). */
+  camera() {
+    if (!this.activeCamera) return null;
+    const wt = this.activeCamera.worldTransform();
+    return { pos: { x: wt.e, y: wt.f }, zoom: this.activeCamera.zoom };
+  }
   // ── Rendering ────────────────────────────────────────────────
   /** The view transform (inverse of the active camera), mapping world → screen. */
   viewTransform() {
@@ -7703,7 +9422,10 @@ var World = class {
       state: this.state,
       tree: this.root.serialize(),
       // Only when declared, so games without tuning keep their pinned hashes.
-      ...Object.keys(this.tuningValues).length > 0 ? { tuning: this.tuningValues } : {}
+      ...Object.keys(this.tuningValues).length > 0 ? { tuning: this.tuningValues } : {},
+      // Same guard: only when non-default, so pre-pause pinned hashes survive.
+      ...this.paused ? { paused: true } : {},
+      ...this.timeScale !== 1 ? { timeScale: this.timeScale } : {}
     });
   }
   /** Compact snapshot for undo/time-travel and saves. */
@@ -7715,7 +9437,10 @@ var World = class {
       input: this.input.getState(),
       state: structuredClone(this.state),
       tree: this.root.serialize(),
-      tuning: { ...this.tuningValues }
+      tuning: { ...this.tuningValues },
+      // Only when non-default, so pre-pause snapshots stay byte-identical.
+      ...this.paused ? { paused: true } : {},
+      ...this.timeScale !== 1 ? { timeScale: this.timeScale } : {}
     };
   }
   /** Restore a snapshot. Rebuilds the tree from data (behaviors are re-attached by scene code). */
@@ -7726,6 +9451,8 @@ var World = class {
     this.input.setState(snap.input);
     this.state = structuredClone(snap.state);
     if (snap.tuning) this.tuningValues = { ...snap.tuning };
+    this.paused = snap.paused ?? false;
+    this.timeScale = snap.timeScale ?? 1;
     resetNodeIds(1e6);
     this.setRoot(deserializeNode(snap.tree));
     this.ensureStarted();
@@ -7990,6 +9717,245 @@ function analyzePlaytest(def, session, opts = {}) {
   return report;
 }
 
+// src/app/browser.ts
+function splashCommands(cfg, def, width, height) {
+  const bg = cfg.palette?.bg ?? "#141821";
+  const fg = cfg.palette?.fg ?? (relLuminance(bg) > 0.4 ? "#14171f" : "#f4efe3");
+  const title = cfg.title ?? def.title;
+  const t = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+  return [
+    { kind: "rect", x: 0, y: 0, w: width, h: height, fill: bg, transform: t, z: 0 },
+    { kind: "text", text: title, x: width / 2, y: height / 2, size: Math.round(height * 0.06), align: "center", weight: 700, fill: fg, transform: t, z: 1 },
+    { kind: "text", text: "loading\u2026", x: width / 2, y: height / 2 + height * 0.08, size: Math.round(height * 0.03), align: "center", fill: fg, opacity: 0.7, transform: t, z: 1 }
+  ];
+}
+function runBrowser(def, mount, opts = {}) {
+  const width = def.width ?? 1280;
+  const height = def.height ?? 720;
+  const background = def.background ?? "#f3ecdb";
+  let world = createWorld(def, opts.world);
+  const renderer = opts.renderer === "canvas" ? new Canvas2DRenderer({ width, height, background }) : opts.renderer === "webgl" ? new WebGL2Renderer({ width, height, background }) : new SvgRenderer({ width, height, background });
+  mount.style.position = mount.style.position || "relative";
+  renderer.mount?.(mount);
+  setOverlayHost(mount);
+  const input = new KeyboardSource(def.inputMap ?? {}, document);
+  const pointer = new PointerSource(renderer, { keyboard: input });
+  const extraSources = [...opts.sources ?? []];
+  const capture = isCaptureMode();
+  const declareInputs = () => world.input.declareActions(input.actionNames());
+  declareInputs();
+  const startAudio = () => {
+    audio.start();
+    const s = settings.get();
+    audio.setVolumes(s);
+    window.removeEventListener("pointerdown", startAudio);
+    window.removeEventListener("keydown", startAudio);
+  };
+  window.addEventListener("pointerdown", startAudio);
+  window.addEventListener("keydown", startAudio);
+  const renderFrame = () => renderer.draw(world.render());
+  const restart = () => {
+    world = createWorld(def, opts.world);
+    declareInputs();
+    renderFrame();
+  };
+  const shell = opts.shell === false ? null : new Shell({
+    title: def.title,
+    onRestart: opts.onRestart ?? restart,
+    onPause: (paused) => opts.onPause?.(paused)
+  });
+  const splashCfg = def.splash === false ? null : def.splash ?? {};
+  const splash = splashCfg && !capture ? splashCommands(splashCfg, def, width, height) : null;
+  let booting = !capture;
+  const readyCbs = [];
+  let resolveReady;
+  const ready = new Promise((r) => resolveReady = r);
+  const bootStart = performance.now();
+  let last = performance.now();
+  const finishBoot = () => {
+    if (!booting) return;
+    booting = false;
+    last = performance.now();
+    renderFrame();
+    resolveReady();
+    for (const cb of readyCbs.splice(0)) cb();
+  };
+  const perFrame = (dtMs) => {
+    if (!capture && !shell?.isPaused && !opts.isHeld?.()) {
+      pointer.sample(world.input);
+      for (const s of extraSources) s.sample(world.input);
+      const actions = input.currentActions();
+      const steps = world.advance(dtMs, actions);
+      if (steps > 0) {
+        input.clearPressed();
+        opts.onAdvance?.(world, steps, actions);
+      }
+    }
+    renderFrame();
+  };
+  let raf = 0;
+  let timer;
+  let pendingCb = null;
+  let stopped = false;
+  const HIDDEN_TICK_MS = 16;
+  const clearScheduled = () => {
+    if (raf !== 0) {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    }
+    if (timer !== void 0) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+  };
+  const schedule = (cb) => {
+    if (stopped) return;
+    pendingCb = cb;
+    if (document.hidden) {
+      timer = setTimeout(() => {
+        timer = void 0;
+        pendingCb = null;
+        cb(performance.now());
+      }, HIDDEN_TICK_MS);
+    } else {
+      raf = requestAnimationFrame((now) => {
+        raf = 0;
+        pendingCb = null;
+        cb(now);
+      });
+    }
+  };
+  const onVisibility = () => {
+    const cb = pendingCb;
+    if (cb === null) return;
+    clearScheduled();
+    pendingCb = null;
+    schedule(cb);
+  };
+  document.addEventListener("visibilitychange", onVisibility);
+  const loop = (now) => {
+    if (booting) {
+      if (splash) renderer.draw(splash);
+      schedule(loop);
+      return;
+    }
+    const dt = now - last;
+    last = now;
+    perFrame(dt);
+    schedule(loop);
+  };
+  schedule(loop);
+  if (booting) {
+    const minDur = splashCfg?.minDurationMs ?? 0;
+    const preload = def.preload ? Promise.resolve().then(() => def.preload(world)) : Promise.resolve();
+    const holdSplash = new Promise((r) => setTimeout(r, Math.max(0, minDur - (performance.now() - bootStart))));
+    Promise.all([preload, holdSplash]).then(finishBoot).catch((err) => {
+      console.error("hayao: preload failed \u2014", err);
+      finishBoot();
+    });
+  } else {
+    resolveReady();
+  }
+  const handle = {
+    get world() {
+      return world;
+    },
+    renderer,
+    input,
+    pointer,
+    canvas: renderer.element,
+    toDesign: (clientX, clientY) => renderer.toDesign?.(clientX, clientY) ?? { x: clientX, y: clientY },
+    viewport: () => renderer.viewport?.(),
+    ready,
+    onReady(cb) {
+      if (booting) readyCbs.push(cb);
+      else cb();
+    },
+    addSource(source) {
+      extraSources.push(source);
+      return () => {
+        const i = extraSources.indexOf(source);
+        if (i !== -1) extraSources.splice(i, 1);
+        source.dispose?.();
+      };
+    },
+    tick(dtMs) {
+      perFrame(dtMs ?? world.clock.stepMs);
+    },
+    stop() {
+      stopped = true;
+      pendingCb = null;
+      clearScheduled();
+      document.removeEventListener("visibilitychange", onVisibility);
+      input.dispose();
+      pointer.dispose();
+      for (const s of extraSources) s.dispose?.();
+      extraSources.length = 0;
+      shell?.dispose();
+      renderer.dispose?.();
+    },
+    restart
+  };
+  if (capture) {
+    installCapture({
+      get world() {
+        return world;
+      },
+      stepOnce: (actions = []) => {
+        world.step(actions);
+        renderFrame();
+      },
+      renderSVG: () => renderToSVGString(world.render(), width, height, background),
+      setPaused: () => {
+      }
+    });
+  }
+  return handle;
+}
+
+// src/verify/dom.ts
+function synthPointer(type, x, y, id) {
+  const e = new Event(type, { bubbles: true });
+  e.clientX = x;
+  e.clientY = y;
+  e.pointerId = id;
+  e.button = 0;
+  return e;
+}
+function bootDom(def, mount) {
+  if (typeof document === "undefined") {
+    throw new Error("verify/dom: no DOM found \u2014 set the test's environment to jsdom (// @vitest-environment jsdom).");
+  }
+  const owned = !mount;
+  const host2 = mount ?? document.createElement("div");
+  if (owned) document.body.appendChild(host2);
+  const handle = runBrowser(def, host2, { shell: false, isHeld: () => true });
+  const el = handle.canvas;
+  return {
+    handle,
+    touchDown(x, y, id = 1) {
+      el?.dispatchEvent(synthPointer("pointerdown", x, y, id));
+    },
+    touchMove(x, y, id = 1) {
+      el?.dispatchEvent(synthPointer("pointermove", x, y, id));
+    },
+    touchUp(id = 1) {
+      globalThis.dispatchEvent?.(synthPointer("pointerup", 0, 0, id));
+    },
+    step(n5 = 1, axes) {
+      for (let i = 0; i < n5; i++) {
+        handle.pointer.sample(handle.world.input);
+        handle.world.step(handle.input.currentActions(), axes);
+        handle.input.clearPressed();
+      }
+    },
+    dispose() {
+      handle.stop();
+      if (owned) host2.remove();
+    }
+  };
+}
+
 // src/logic/fsm.ts
 var Fsm = class {
   constructor(states, transitions, initial, ctx) {
@@ -8094,6 +10060,155 @@ var PhaseClock = class {
   }
 };
 
+// src/logic/coroutine.ts
+function sleep(seconds) {
+  return { kind: "sleep", left: seconds };
+}
+function waitFor(cond) {
+  return { kind: "cond", cond };
+}
+function nextStep() {
+  return { kind: "next" };
+}
+function race(...waits) {
+  return { kind: "race", waits };
+}
+function all(...waits) {
+  return { kind: "all", waits };
+}
+var EPS2 = 1e-9;
+function advanceWait(w, dt) {
+  if (isHandle(w)) return w.done ? 0 : -1;
+  switch (w.kind) {
+    case "sleep":
+      w.left -= dt;
+      return w.left <= EPS2 ? 0 : -1;
+    case "cond":
+      if (!w.met && w.cond()) w.met = true;
+      return w.met ? 0 : -1;
+    case "next":
+      w.passed = true;
+      return 0;
+    case "race": {
+      let winner = -1;
+      for (let i = 0; i < w.waits.length; i++) {
+        if (advanceWait(w.waits[i], dt) >= 0 && winner < 0) winner = i;
+      }
+      return winner;
+    }
+    case "all": {
+      let done = true;
+      for (const inner of w.waits) {
+        if (!isDone(inner)) {
+          if (advanceWait(inner, dt) < 0) done = false;
+        }
+      }
+      return done ? 0 : -1;
+    }
+  }
+}
+function isDone(w) {
+  if (isHandle(w)) return w.done;
+  switch (w.kind) {
+    case "sleep":
+      return w.left <= EPS2;
+    case "cond":
+      return w.met === true;
+    case "next":
+      return w.passed === true;
+    case "race":
+      return w.waits.some(isDone);
+    case "all":
+      return w.waits.every(isDone);
+  }
+}
+function isHandle(w) {
+  return w instanceof Runner;
+}
+var Runner = class {
+  name;
+  done = false;
+  /** null until the first resume (which runs the body to its first yield). */
+  wait = null;
+  gen;
+  constructor(factory, name) {
+    this.name = name;
+    this.gen = factory();
+  }
+  /** Resume the generator with a value; a throw kills only this runner. */
+  resume(value) {
+    try {
+      const it = this.gen.next(value);
+      if (it.done) this.done = true;
+      else this.wait = it.value;
+    } catch (err) {
+      this.done = true;
+      console.warn(`[hayao] coroutine "${this.name}" threw and was stopped:`, err);
+    }
+  }
+  stop() {
+    if (this.done) return;
+    this.done = true;
+    try {
+      this.gen.return(void 0);
+    } catch {
+    }
+  }
+};
+var Coroutines = class {
+  runners = [];
+  /** Started since the last step boundary; adopted at the top of the next step. */
+  pending = [];
+  nextId = 0;
+  /**
+   * Register a coroutine. Its body runs (up to the first yield) on the NEXT
+   * `step()` — never immediately, and never mid-step. Pass a `name` so a
+   * thrown generator warns something better than "co3".
+   */
+  start(gen, name) {
+    const r = new Runner(gen, name ?? `co${this.nextId}`);
+    this.nextId++;
+    this.pending.push(r);
+    return r;
+  }
+  /** Advance every live runner by one fixed step, in insertion order. */
+  step(dt) {
+    if (this.pending.length > 0) {
+      this.runners.push(...this.pending);
+      this.pending.length = 0;
+    }
+    for (const r of this.runners) {
+      if (r.done) continue;
+      if (r.wait === null) {
+        r.resume(0);
+        continue;
+      }
+      const result = advanceWait(r.wait, dt);
+      if (result >= 0) {
+        r.wait = null;
+        r.resume(result);
+      }
+    }
+    let write = 0;
+    for (const r of this.runners) if (!r.done) this.runners[write++] = r;
+    this.runners.length = write;
+  }
+  /** Stop every runner (including ones not yet adopted). */
+  stopAll() {
+    for (const r of this.runners) r.stop();
+    for (const r of this.pending) r.stop();
+    this.runners.length = 0;
+    this.pending.length = 0;
+  }
+  /** Live runner count (started-but-not-yet-stepped ones included). */
+  get active() {
+    let n5 = 0;
+    for (const r of this.runners) if (!r.done) n5++;
+    for (const r of this.pending) if (!r.done) n5++;
+    return n5;
+  }
+};
+
 // src/logic/random.ts
 function totalWeight(weights) {
   let sum = 0;
@@ -10189,138 +12304,6 @@ function runBrowserNet(def, mount, opts) {
   };
 }
 
-// src/app/browser.ts
-function splashCommands(cfg, def, width, height) {
-  const bg = cfg.palette?.bg ?? "#141821";
-  const fg = cfg.palette?.fg ?? (relLuminance(bg) > 0.4 ? "#14171f" : "#f4efe3");
-  const title = cfg.title ?? def.title;
-  const t = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
-  return [
-    { kind: "rect", x: 0, y: 0, w: width, h: height, fill: bg, transform: t, z: 0 },
-    { kind: "text", text: title, x: width / 2, y: height / 2, size: Math.round(height * 0.06), align: "center", weight: 700, fill: fg, transform: t, z: 1 },
-    { kind: "text", text: "loading\u2026", x: width / 2, y: height / 2 + height * 0.08, size: Math.round(height * 0.03), align: "center", fill: fg, opacity: 0.7, transform: t, z: 1 }
-  ];
-}
-function runBrowser(def, mount, opts = {}) {
-  const width = def.width ?? 1280;
-  const height = def.height ?? 720;
-  const background = def.background ?? "#f3ecdb";
-  let world = createWorld(def, opts.world);
-  const renderer = opts.renderer === "canvas" ? new Canvas2DRenderer({ width, height, background }) : new SvgRenderer({ width, height, background });
-  mount.style.position = mount.style.position || "relative";
-  renderer.mount?.(mount);
-  setOverlayHost(mount);
-  const input = new KeyboardSource(def.inputMap ?? {}, document);
-  const pointer = new PointerSource(renderer);
-  const capture = isCaptureMode();
-  const startAudio = () => {
-    audio.start();
-    const s = settings.get();
-    audio.setVolumes(s);
-    window.removeEventListener("pointerdown", startAudio);
-    window.removeEventListener("keydown", startAudio);
-  };
-  window.addEventListener("pointerdown", startAudio);
-  window.addEventListener("keydown", startAudio);
-  const renderFrame = () => renderer.draw(world.render());
-  const restart = () => {
-    world = createWorld(def, opts.world);
-    renderFrame();
-  };
-  const shell = opts.shell === false ? null : new Shell({
-    title: def.title,
-    onRestart: opts.onRestart ?? restart,
-    onPause: (paused) => opts.onPause?.(paused)
-  });
-  const splashCfg = def.splash === false ? null : def.splash ?? {};
-  const splash = splashCfg && !capture ? splashCommands(splashCfg, def, width, height) : null;
-  let booting = !capture;
-  const readyCbs = [];
-  let resolveReady;
-  const ready = new Promise((r) => resolveReady = r);
-  const bootStart = performance.now();
-  let raf = 0;
-  let last = performance.now();
-  const finishBoot = () => {
-    if (!booting) return;
-    booting = false;
-    last = performance.now();
-    renderFrame();
-    resolveReady();
-    for (const cb of readyCbs.splice(0)) cb();
-  };
-  const loop = (now) => {
-    if (booting) {
-      if (splash) renderer.draw(splash);
-      raf = requestAnimationFrame(loop);
-      return;
-    }
-    const dt = now - last;
-    last = now;
-    if (!capture && !shell?.isPaused && !opts.isHeld?.()) {
-      pointer.sample(world.input);
-      const actions = input.currentActions();
-      const steps = world.advance(dt, actions);
-      if (steps > 0) {
-        input.clearPressed();
-        opts.onAdvance?.(world, steps, actions);
-      }
-    }
-    renderFrame();
-    raf = requestAnimationFrame(loop);
-  };
-  raf = requestAnimationFrame(loop);
-  if (booting) {
-    const minDur = splashCfg?.minDurationMs ?? 0;
-    const preload = def.preload ? Promise.resolve().then(() => def.preload(world)) : Promise.resolve();
-    const holdSplash = new Promise((r) => setTimeout(r, Math.max(0, minDur - (performance.now() - bootStart))));
-    Promise.all([preload, holdSplash]).then(finishBoot).catch((err) => {
-      console.error("hayao: preload failed \u2014", err);
-      finishBoot();
-    });
-  } else {
-    resolveReady();
-  }
-  const handle = {
-    get world() {
-      return world;
-    },
-    renderer,
-    input,
-    pointer,
-    canvas: renderer.element,
-    toDesign: (clientX, clientY) => renderer.toDesign?.(clientX, clientY) ?? { x: clientX, y: clientY },
-    ready,
-    onReady(cb) {
-      if (booting) readyCbs.push(cb);
-      else cb();
-    },
-    stop() {
-      cancelAnimationFrame(raf);
-      input.dispose();
-      pointer.dispose();
-      shell?.dispose();
-      renderer.dispose?.();
-    },
-    restart
-  };
-  if (capture) {
-    installCapture({
-      get world() {
-        return world;
-      },
-      stepOnce: (actions = []) => {
-        world.step(actions);
-        renderFrame();
-      },
-      renderSVG: () => renderToSVGString(world.render(), width, height, background),
-      setPaused: () => {
-      }
-    });
-  }
-  return handle;
-}
-
 // src/studio/record.ts
 var counter = 0;
 function sessionId(game, startedAt) {
@@ -10774,13 +12757,14 @@ function runStudio(baseDef, mount, opts = {}) {
 }
 
 // src/index.ts
-var VERSION = "0.3.0";
+var VERSION = "0.4.0";
 export {
   ALBUM,
   AMBIENT_PRESETS,
   AmbientField,
   AnimationPlayer,
   AudioBus,
+  BLOOM_PIPELINE,
   BitmapText,
   BroadcastChannelTransport,
   Camera2D,
@@ -10788,11 +12772,14 @@ export {
   Canvas2DRenderer,
   CinematicPlayer,
   Clock,
+  Coroutines,
+  DEFAULT_GAMEPAD_MAP,
   DEFAULT_INPUT_MAP,
   DEFAULT_PLATFORMER,
   DEFAULT_SESSION_CONFIG,
   DEFAULT_TILE_CHARS,
   DUSK,
+  DepthSort,
   EASINGS,
   Edge,
   EventBus,
@@ -10802,12 +12789,14 @@ export {
   Fsm,
   GENRES,
   GENRE_PROFILES,
+  GamepadSource,
   HeadlessRenderer,
   IDENTITY,
   INSTRUMENTS,
   InputBuffer,
   InputRecorder,
   InputState,
+  IsoPrism,
   KENTO,
   KeyboardSource,
   LocalStorageAdapter,
@@ -10816,6 +12805,7 @@ export {
   LoopbackTransport,
   LootTable,
   MEADOW,
+  MOUSE_ACTIONS,
   MemoryStorage,
   NEIGHBORS_4,
   NEIGHBORS_8,
@@ -10857,9 +12847,13 @@ export {
   Text,
   TextureSprite,
   Timer,
+  TouchControls,
   UndoStack,
   VERSION,
+  VerletChain,
+  WEBGL_EFFECTS,
   WangFrame,
+  WebGL2Renderer,
   World,
   abilitiesOf,
   addBody,
@@ -10867,6 +12861,7 @@ export {
   addRevoluteJoint,
   addTransition,
   albumTrack,
+  all,
   analyzePlaytest,
   applyImpulse,
   applyReverb,
@@ -10888,6 +12883,7 @@ export {
   blobPath,
   bodyAABB,
   bodyContains,
+  bootDom,
   cadenceResolves,
   cameraIssues,
   canvasGradient,
@@ -10931,6 +12927,7 @@ export {
   dexp,
   dexp2,
   dhypot,
+  diamondPoints,
   diatonicChord,
   diffLevels,
   distanceGain,
@@ -10953,11 +12950,13 @@ export {
   fft,
   findSoftlocks,
   firstFrame,
+  fitViewport,
   floodFill,
   fluxEnvelope,
   forgivenessIssues,
   fractalNoise,
   frameActions,
+  frameAxes,
   gameInputMap,
   generateCave,
   generateDungeon,
@@ -10975,6 +12974,7 @@ export {
   gridSet,
   gridToTilemap,
   groundAt,
+  hashNoise,
   hashString,
   hashValue,
   hexToHsl,
@@ -10988,10 +12988,12 @@ export {
   inputDensity,
   installCapture,
   invLerp,
+  invalidCommandReason,
   invertTransform,
   isCaptureMode,
   isGround,
   isMonotonic,
+  iso,
   joinRoom,
   jumpAirtime,
   jumpDistance,
@@ -11036,6 +13038,7 @@ export {
   moveRect,
   mutateColor,
   netMessage,
+  nextStep,
   nineSlice,
   normalize,
   noteToMidi,
@@ -11064,6 +13067,8 @@ export {
   proveCompletable,
   proveFullCompletion,
   pump,
+  quantizeAngle,
+  race,
   rad2deg,
   radialGradient,
   rampIssues,
@@ -11077,6 +13082,7 @@ export {
   rectContains,
   rectsOverlap,
   registerNode,
+  regularPolyPoints,
   regularPolygon,
   relLuminance,
   remap,
@@ -11090,6 +13096,7 @@ export {
   replay,
   replaySession,
   resetNodeIds,
+  resetZzfxWarnings,
   resolveTuning,
   rigidStep,
   rleDecode,
@@ -11118,14 +13125,17 @@ export {
   setOverlayHost,
   setScreenObserver,
   settings,
+  shadeHex,
   shadowDef,
   shapeBBox,
   shapeBox,
   showScreen,
   signalHash,
+  sleep,
   smoothClosedPath,
   smoothOpenPath,
   smoothstep,
+  snapAxis,
   softClip,
   softClipInPlace,
   solidNeighbours,
@@ -11135,6 +13145,7 @@ export {
   songDuration,
   sortCommands,
   spatialMix,
+  specFromZzfx,
   spectralCentroid,
   spring,
   springStep,
@@ -11170,8 +13181,10 @@ export {
   vscale,
   vsub,
   wait,
+  waitFor,
   wakeBody,
   wangTile,
+  warnCommandOnce,
   weatherEnvelope,
   weightedIndex,
   weightedPick,