@mettascript/grapher 2.0.0

package/dist/index.js

@@ -0,0 +1,4014 @@
+// src/editor.ts
+import { MeTTa as MeTTa2, ExpressionAtom as ExpressionAtom7, E as E5 } from "@mettascript/hyperon";
+
+// src/ids.ts
+var counter = 0;
+function nextId() {
+  return `n${++counter}`;
+}
+
+// src/model.ts
+var X_EPSILON = 0.01;
+var Graph = class _Graph {
+  nodes = /* @__PURE__ */ new Map();
+  childIds = /* @__PURE__ */ new Map();
+  // parent -> ordered child ids
+  parentIds = /* @__PURE__ */ new Map();
+  // child -> parent ids
+  /** Add a node. An explicit `id` is preserved (for loading); otherwise a fresh one is minted. Defaults:
+   *  kind `symbol`, position `(0, 0)`. */
+  add(spec) {
+    const node = {
+      id: spec.id ?? nextId(),
+      name: spec.name,
+      kind: spec.kind ?? "symbol",
+      x: spec.x ?? 0,
+      y: spec.y ?? 0
+    };
+    this.nodes.set(node.id, node);
+    return node;
+  }
+  /** Remove a node and every edge touching it. */
+  remove(id) {
+    for (const p of this.parentsOf(id)) this.disconnect(p, id);
+    for (const c of this.childrenOf(id)) this.disconnect(id, c);
+    this.nodes.delete(id);
+    this.childIds.delete(id);
+    this.parentIds.delete(id);
+  }
+  /** Move a node to a new position. */
+  move(id, x, y) {
+    const node = this.nodes.get(id);
+    if (node) {
+      node.x = x;
+      node.y = y;
+    }
+  }
+  /** This node's child ids, in insertion order. */
+  childrenOf(id) {
+    return [...this.childIds.get(id) ?? []];
+  }
+  /** This node's parent ids, in insertion order. */
+  parentsOf(id) {
+    return [...this.parentIds.get(id) ?? []];
+  }
+  /** Whether `parent -> child` would be a legal edge: not a self-loop, a duplicate, an unknown node, or a
+   *  cycle (the parent already sitting below the child). Lets the editor reject a drag before committing it. */
+  canConnect(parentId, childId) {
+    if (parentId === childId) return false;
+    if (!this.nodes.has(parentId) || !this.nodes.has(childId)) return false;
+    if ((this.childIds.get(parentId) ?? []).includes(childId)) return false;
+    if (this.reaches(childId, parentId)) return false;
+    return true;
+  }
+  /** Connect `parent` to `child`. Returns false and does nothing when the edge would be illegal (see
+   *  {@link canConnect}). */
+  connect(parentId, childId) {
+    if (!this.canConnect(parentId, childId)) return false;
+    this.childIds.set(parentId, [...this.childIds.get(parentId) ?? [], childId]);
+    this.parentIds.set(childId, [...this.parentIds.get(childId) ?? [], parentId]);
+    return true;
+  }
+  /** Remove the `parent -> child` edge if present. */
+  disconnect(parentId, childId) {
+    const kids = this.childIds.get(parentId);
+    if (kids)
+      this.childIds.set(
+        parentId,
+        kids.filter((k) => k !== childId)
+      );
+    const parents = this.parentIds.get(childId);
+    if (parents)
+      this.parentIds.set(
+        childId,
+        parents.filter((p) => p !== parentId)
+      );
+  }
+  /** Children of `id` in screen order: by x, ties (within {@link X_EPSILON}) broken by y. This is how
+   *  argument order is read off the canvas. */
+  sortedChildren(id) {
+    const kids = this.childrenOf(id).map((k) => this.nodes.get(k)).filter((n) => n !== void 0);
+    return kids.sort((a, b) => Math.abs(a.x - b.x) < X_EPSILON ? a.y - b.y : a.x - b.x);
+  }
+  /** The roots (parentless nodes) reachable by walking up from `id`. A parentless node is its own head. */
+  findHeads(id) {
+    const heads = /* @__PURE__ */ new Map();
+    const seen = /* @__PURE__ */ new Set();
+    const visit = (cur) => {
+      if (seen.has(cur)) return;
+      seen.add(cur);
+      const parents = this.parentIds.get(cur) ?? [];
+      if (parents.length === 0) {
+        const node = this.nodes.get(cur);
+        if (node) heads.set(cur, node);
+      } else {
+        for (const p of parents) visit(p);
+      }
+    };
+    visit(id);
+    return [...heads.values()];
+  }
+  /** Every root in the graph (nodes with no parents). */
+  heads() {
+    return [...this.nodes.values()].filter((n) => (this.parentIds.get(n.id) ?? []).length === 0);
+  }
+  /** A deep copy: same node ids, positions, and edges. */
+  clone() {
+    const g = new _Graph();
+    for (const n of this.nodes.values()) g.add({ ...n });
+    for (const [p, kids] of this.childIds) for (const c of kids) g.connect(p, c);
+    return g;
+  }
+  /** Can `from` reach `to` by following child edges downward? */
+  reaches(from, to) {
+    const seen = /* @__PURE__ */ new Set();
+    const stack = [from];
+    while (stack.length > 0) {
+      const cur = stack.pop();
+      if (cur === void 0) break;
+      if (cur === to) return true;
+      if (seen.has(cur)) continue;
+      seen.add(cur);
+      for (const c of this.childIds.get(cur) ?? []) stack.push(c);
+    }
+    return false;
+  }
+};
+
+// src/color.ts
+var GLYPHS = {
+  "*": "\xD7",
+  // ×
+  "-": "\u2212",
+  // −
+  "/": "\xF7",
+  // ÷
+  "%": "mod",
+  ">=": "\u2265",
+  // ≥
+  "<=": "\u2264",
+  // ≤
+  "!=": "\u2260",
+  // ≠
+  "->": "\u2192",
+  // →
+  "=": "\u2261",
+  // ≡
+  and: "\u2227",
+  // ∧
+  or: "\u2228",
+  // ∨
+  not: "\xAC",
+  // ¬
+  xor: "\u2295",
+  // ⊕
+  superpose: "\u222A"
+  // ∪
+};
+function displayGlyph(name) {
+  return GLYPHS[name] ?? name;
+}
+var NUMERIC = /^[+-]?(\d+\.?\d*|\.\d+)$/;
+var OPERATORS = /* @__PURE__ */ new Set([
+  "=",
+  ":",
+  "->",
+  "==",
+  "!=",
+  "!",
+  "+",
+  "-",
+  "*",
+  "/",
+  "%",
+  "<",
+  ">",
+  ">=",
+  "<=",
+  "and",
+  "or",
+  "not",
+  "xor"
+]);
+var CONTROL = /* @__PURE__ */ new Set(["if", "case", "cond", "match", "switch", "unify"]);
+var BOOLEANS = /* @__PURE__ */ new Set(["True", "False"]);
+function roleOf(name) {
+  if (name.startsWith("$")) return "variable";
+  if (name.startsWith("&")) return "spaceref";
+  if (name.startsWith("@")) return "at";
+  if (name.startsWith('"')) return "string";
+  if (NUMERIC.test(name)) return "number";
+  if (BOOLEANS.has(name)) return "boolean";
+  if (OPERATORS.has(name)) return "operator";
+  if (CONTROL.has(name)) return "control";
+  return "symbol";
+}
+var DARK = "#0d1117";
+var PALETTE = {
+  // a variable is drawn hollow (a transparent circle), so its fill is used as the outline and its text is
+  // the same color, visible on the canvas rather than dark-on-fill.
+  variable: { fill: "#ffa657", text: "#ffa657" },
+  spaceref: { fill: "#ffa657", text: DARK },
+  at: { fill: "#d2a8ff", text: DARK },
+  number: { fill: "#79c0ff", text: DARK },
+  string: { fill: "#a5d6ff", text: DARK },
+  boolean: { fill: "#39c5cf", text: DARK },
+  operator: { fill: "#ff7b72", text: DARK },
+  control: { fill: "#f2cc60", text: DARK },
+  paren: { fill: "#7ee787", text: DARK },
+  symbol: { fill: "#454c5a", text: "#e6edf3" }
+};
+function colorFor(node) {
+  if (node.kind === "list") return PALETTE.paren;
+  if (node.kind === "dot") return { fill: "#6e7681", text: "#e6edf3" };
+  return PALETTE[roleOf(node.name)];
+}
+var srgbToLinear = (c) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+var linearToSrgb = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+function hexToOklab(hex) {
+  const m = /^#([0-9a-fA-F]{6})$/.exec(hex);
+  if (m === null) return null;
+  const v = parseInt(m[1], 16);
+  const r = srgbToLinear((v >> 16 & 255) / 255);
+  const g = srgbToLinear((v >> 8 & 255) / 255);
+  const b = srgbToLinear((v & 255) / 255);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m2 = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m2 - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m2 + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m2 - 0.808675766 * s
+  ];
+}
+function oklabToHex([L, A, B]) {
+  const l_ = L + 0.3963377774 * A + 0.2158037573 * B;
+  const m_ = L - 0.1055613458 * A - 0.0638541728 * B;
+  const s_ = L - 0.0894841775 * A - 1.291485548 * B;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  const r = linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s);
+  const g = linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s);
+  const b = linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s);
+  const hx = (c) => Math.max(0, Math.min(255, Math.round(c * 255))).toString(16).padStart(2, "0");
+  return `#${hx(r)}${hx(g)}${hx(b)}`;
+}
+function lerpColor(a, b, t) {
+  const ca = hexToOklab(a);
+  const cb = hexToOklab(b);
+  if (ca === null || cb === null) return t < 0.5 ? a : b;
+  return oklabToHex([
+    ca[0] + (cb[0] - ca[0]) * t,
+    ca[1] + (cb[1] - ca[1]) * t,
+    ca[2] + (cb[2] - ca[2]) * t
+  ]);
+}
+function heatColor(t) {
+  const u = Math.max(0, Math.min(1, t));
+  return u < 0.5 ? lerpColor("#3fb950", "#f2cc60", u * 2) : lerpColor("#f2cc60", "#f85149", (u - 0.5) * 2);
+}
+
+// src/measure.ts
+var NODE_H = 22;
+var CHAR_W = 7;
+var PAD_X = 12;
+var MIN_W = 24;
+function displayText(node) {
+  if (node.kind === "list") return "( )";
+  if (node.kind === "dot") return "\u2022";
+  return node.name.length > 0 ? displayGlyph(node.name) : "?";
+}
+function nodeWidth(node) {
+  return Math.max(MIN_W, displayText(node).length * CHAR_W + PAD_X);
+}
+
+// src/variables.ts
+function variableLinks(graph) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes.values()) {
+    if (node.kind !== "symbol" || !node.name.startsWith("$")) continue;
+    const head = graph.findHeads(node.id)[0];
+    if (head === void 0) continue;
+    const key = `${head.id}\0${node.name}`;
+    const arr = groups.get(key);
+    if (arr) arr.push(node.id);
+    else groups.set(key, [node.id]);
+  }
+  const links = [];
+  for (const ids of groups.values()) {
+    if (ids.length < 2) continue;
+    const sorted = ids.map((id) => graph.nodes.get(id)).filter((n) => n !== void 0).sort((a, b) => a.x - b.x || a.y - b.y);
+    for (let i = 0; i + 1 < sorted.length; i++) links.push([sorted[i].id, sorted[i + 1].id]);
+  }
+  return links;
+}
+
+// src/anim.ts
+var lerp = (a, b, t) => a + (b - a) * t;
+function ease(t) {
+  return t * t * t * (t * (t * 6 - 15) + 10);
+}
+var DEFAULT_TRACE_MS = 550;
+function arcPoint(ax, ay, bx, by, t) {
+  const mx = lerp(ax, bx, t);
+  const my = lerp(ay, by, t);
+  const dx = bx - ax;
+  const dy = by - ay;
+  const dist = Math.hypot(dx, dy);
+  if (dist < 1) return { x: mx, y: my };
+  const off = Math.sin(Math.PI * t) * Math.min(dist * 0.16, 36);
+  return { x: mx + -dy / dist * off, y: my + dx / dist * off };
+}
+
+// src/shapes.ts
+var CORNER_SEG = 6;
+function shapePolygon(role, w) {
+  const hw = w / 2;
+  const hh = NODE_H / 2;
+  switch (role) {
+    case "operator":
+    case "control":
+      return [
+        [0, -hh],
+        [hw, 0],
+        [0, hh],
+        [-hw, 0]
+      ];
+    // diamond
+    case "variable":
+      return ellipse(hw, hh);
+    // hollow circle
+    case "number":
+    case "string":
+      return roundedRect(hw, hh, hh);
+    // pill
+    case "boolean":
+      return roundedRect(hw, hh, 3);
+    // square
+    case "list":
+      return [
+        [-hw + 7, -hh],
+        [hw - 7, -hh],
+        [hw, 0],
+        [hw - 7, hh],
+        [-hw + 7, hh],
+        [-hw, 0]
+      ];
+    // hexagon
+    default:
+      return roundedRect(hw, hh, 5);
+  }
+}
+function ellipse(hw, hh) {
+  const n = 24;
+  const out = [];
+  for (let i = 0; i < n; i++) {
+    const a = 2 * Math.PI * i / n;
+    out.push([hw * Math.cos(a), hh * Math.sin(a)]);
+  }
+  return out;
+}
+function roundedRect(hw, hh, r) {
+  const rr = Math.min(r, hw, hh);
+  const out = [];
+  const corners = [
+    [hw - rr, hh - rr, 0],
+    [-(hw - rr), hh - rr, Math.PI / 2],
+    [-(hw - rr), -(hh - rr), Math.PI],
+    [hw - rr, -(hh - rr), 3 * Math.PI / 2]
+  ];
+  for (const [cx, cy, a0] of corners)
+    for (let i = 0; i <= CORNER_SEG; i++) {
+      const a = a0 + i / CORNER_SEG * (Math.PI / 2);
+      out.push([cx + rr * Math.cos(a), cy + rr * Math.sin(a)]);
+    }
+  return out;
+}
+function raycast(poly, ang) {
+  const dx = Math.cos(ang);
+  const dy = Math.sin(ang);
+  let best = Infinity;
+  let hit = [0, 0];
+  for (let i = 0; i < poly.length; i++) {
+    const [x1, y1] = poly[i];
+    const [x2, y2] = poly[(i + 1) % poly.length];
+    const ex = x2 - x1;
+    const ey = y2 - y1;
+    const det = ex * dy - dx * ey;
+    if (Math.abs(det) < 1e-9) continue;
+    const t = (ex * y1 - ey * x1) / det;
+    const s = (dx * y1 - dy * x1) / det;
+    if (t > 0 && s >= -1e-6 && s <= 1 + 1e-6 && t < best) {
+      best = t;
+      hit = [t * dx, t * dy];
+    }
+  }
+  return hit;
+}
+function shapePoints(node, n) {
+  const role = node.kind === "symbol" ? roleOf(node.name) : node.kind;
+  const poly = shapePolygon(role, nodeWidth(node));
+  const out = [];
+  for (let i = 0; i < n; i++) out.push(raycast(poly, 2 * Math.PI * i / n));
+  return out;
+}
+function pointsAttr(points) {
+  return points.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
+}
+
+// src/render.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var PORT_R = 4;
+var TRACE_DURATION = DEFAULT_TRACE_MS;
+var SHAPE_N = 40;
+var CANVAS_BG = "#1b1d23";
+var CSS = `
+.mg-svg { width: 100%; height: 100%; display: block; overflow: clip; background: ${CANVAS_BG}; user-select: none; font-family: ui-monospace, monospace; }
+.mg-edge { stroke-width: 1.6; }
+.mg-var-link { stroke: #ffa657; stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.45; }
+.mg-node text { font-size: 12px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
+.mg-node .box { stroke: #00000055; stroke-width: 1; cursor: grab; }
+.mg-node .var { fill: none; stroke-width: 1.8; cursor: grab; }
+.mg-sel { fill: none; stroke: #38bdf8; stroke-width: 1.5; }
+.mg-sel.primary { stroke: #f59e0b; }
+.mg-port { fill: #cbd5e1; stroke: #1b1d23; stroke-width: 1; cursor: crosshair; }
+.mg-result { font-size: 11px; fill: #9ca3af; }
+.mg-result.error { fill: #f87171; }
+.mg-viz-hi { fill: none; stroke: #f2cc60; stroke-width: 2.5; }
+.mg-viz-label { font-size: 11px; fill: #f2cc60; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
+.mg-overlay { pointer-events: none; }
+`;
+function svgEl(tag, attrs) {
+  const node = document.createElementNS(SVG_NS, tag);
+  for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, String(v));
+  return node;
+}
+function blendEdge(x1, y1, x2, y2, cFrom, cTo, opacity = 1) {
+  const n = 8;
+  const out = [];
+  for (let i = 0; i < n; i++) {
+    const t0 = i / n;
+    const t1 = (i + 1) / n;
+    out.push(
+      svgEl("line", {
+        class: "mg-edge",
+        x1: lerp(x1, x2, t0),
+        y1: lerp(y1, y2, t0),
+        x2: lerp(x1, x2, t1),
+        y2: lerp(y1, y2, t1),
+        stroke: lerpColor(cFrom, cTo, (i + 0.5) / n),
+        opacity
+      })
+    );
+  }
+  return out;
+}
+function nodeShape(node, w, fill) {
+  const hw = w / 2;
+  const hh = NODE_H / 2;
+  const poly = (points) => svgEl("polygon", { class: "box", points, fill });
+  const rect = (rx) => svgEl("rect", { class: "box", x: -hw, y: -hh, width: w, height: NODE_H, rx, fill });
+  const role = node.kind === "symbol" ? roleOf(node.name) : node.kind;
+  switch (role) {
+    case "operator":
+    case "control":
+      return poly(`0,${-hh} ${hw},0 0,${hh} ${-hw},0`);
+    // diamond (a flowchart decision)
+    case "variable":
+      return svgEl("ellipse", { class: "var", cx: 0, cy: 0, rx: hw, ry: hh, stroke: fill });
+    case "number":
+    case "string":
+      return rect(hh);
+    // pill
+    case "boolean":
+      return rect(3);
+    // a square constant box
+    case "list":
+      return poly(
+        `${-hw + 7},${-hh} ${hw - 7},${-hh} ${hw},0 ${hw - 7},${hh} ${-hw + 7},${hh} ${-hw},0`
+      );
+    // hexagon
+    default:
+      return rect(5);
+  }
+}
+var Renderer = class {
+  svg;
+  viewportG;
+  haloG;
+  edgesG;
+  mergeG;
+  nodesG;
+  // The last shown playthrough frame, so the next step can glide from it.
+  tracePrev = null;
+  traceRaf = 0;
+  // How long one step's morph takes, so a slower playback slows the animation itself, not just the pauses.
+  traceDuration = TRACE_DURATION;
+  // The canvas background, so the redex glow can keep enough contrast against whatever theme is set.
+  bg = CANVAS_BG;
+  constructor(container) {
+    this.svg = svgEl("svg", { class: "mg-svg" });
+    const style = document.createElementNS(SVG_NS, "style");
+    style.textContent = CSS;
+    this.svg.appendChild(style);
+    const goo = svgEl("filter", {
+      id: "mg-goo",
+      x: "-50%",
+      y: "-50%",
+      width: "200%",
+      height: "200%"
+    });
+    goo.append(
+      svgEl("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "6", result: "b" }),
+      svgEl("feColorMatrix", {
+        in: "b",
+        type: "matrix",
+        values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -8",
+        result: "goo"
+      }),
+      // A liquid warble on top of the meld: a noise field (feTurbulence) displaces the blob's edge, so it
+      // ripples like a fluid and a wide label like `fact` or `True` loses its rigid box edge instead of
+      // staying a stiff rounded rectangle.
+      svgEl("feTurbulence", {
+        type: "fractalNoise",
+        baseFrequency: "0.018",
+        numOctaves: "2",
+        seed: "7",
+        result: "noise"
+      }),
+      svgEl("feDisplacementMap", {
+        in: "goo",
+        in2: "noise",
+        scale: "14",
+        xChannelSelector: "R",
+        yChannelSelector: "G"
+      })
+    );
+    const defs = svgEl("defs", {});
+    defs.appendChild(goo);
+    this.svg.appendChild(defs);
+    this.viewportG = svgEl("g", { class: "mg-viewport" });
+    this.haloG = svgEl("g", { class: "mg-halo" });
+    this.edgesG = svgEl("g", { class: "mg-edges" });
+    this.mergeG = svgEl("g", { class: "mg-merge", filter: "url(#mg-goo)" });
+    this.nodesG = svgEl("g", { class: "mg-nodes" });
+    this.viewportG.appendChild(this.haloG);
+    this.viewportG.appendChild(this.edgesG);
+    this.viewportG.appendChild(this.mergeG);
+    this.viewportG.appendChild(this.nodesG);
+    this.svg.appendChild(this.viewportG);
+    container.appendChild(this.svg);
+  }
+  /** Set the canvas background. The redex glow re-reads it, so its contrast stays right under any theme. */
+  setBackground(bg) {
+    this.bg = bg;
+    this.svg.style.background = bg;
+  }
+  /** Set how long a step's morph takes (ms), so playback speed slows the animation, not just the pauses. */
+  setTraceDuration(ms) {
+    this.traceDuration = Math.max(1, ms);
+  }
+  /** Redraw the whole frame. */
+  render(state) {
+    const { viewport: v } = state;
+    this.viewportG.setAttribute("transform", `translate(${v.panX} ${v.panY}) scale(${v.scale})`);
+    this.haloG.replaceChildren();
+    this.mergeG.replaceChildren();
+    this.edgesG.replaceChildren(...this.edges(state.graph), ...this.varNet(state.graph));
+    this.nodesG.replaceChildren(...this.nodeGroups(state));
+  }
+  /** Forget the last playthrough frame, so the next one starts without gliding from a stale step. */
+  clearTrace() {
+    if (this.traceRaf !== 0) {
+      cancelAnimationFrame(this.traceRaf);
+      this.traceRaf = 0;
+    }
+    this.tracePrev = null;
+    this.haloG.replaceChildren();
+    this.mergeG.replaceChildren();
+  }
+  /** Show one reduction step. With `animate` and a previous step, shared subterms arc from their old place
+   *  to their new one, the parts that appear or vanish fade, and the viewport eases, the way a math
+   *  animation morphs one expression into the next. Otherwise it paints at once. */
+  showTrace(state, animate) {
+    const next = traceFrame(state.graph, state.viewport);
+    const prev = this.tracePrev;
+    this.tracePrev = next;
+    if (this.traceRaf !== 0) {
+      cancelAnimationFrame(this.traceRaf);
+      this.traceRaf = 0;
+    }
+    if (!animate || prev === null || typeof requestAnimationFrame === "undefined") {
+      this.paintTrace(prev ?? next, next, 1);
+      return;
+    }
+    const start = performance.now();
+    const dur = this.traceDuration;
+    const step = (now) => {
+      const p = Math.min(1, (now - start) / dur);
+      this.paintTrace(prev, next, ease(p));
+      if (p < 1) {
+        this.traceRaf = requestAnimationFrame(step);
+      } else {
+        this.traceRaf = 0;
+        this.paintTrace(next, next, 1);
+      }
+    };
+    this.traceRaf = requestAnimationFrame(step);
+  }
+  /** Paint an interpolated frame between two steps. The interpolation itself is pure ({@link
+   *  interpolateTrace}); this just draws the result. */
+  paintTrace(from, to, t) {
+    const frame = interpolateTrace(from, to, t);
+    const { panX, panY, scale } = frame.viewport;
+    this.viewportG.setAttribute("transform", `translate(${panX} ${panY}) scale(${scale})`);
+    this.haloG.replaceChildren(
+      ...frame.redex !== void 0 && frame.redex.op > 0.01 ? haloEls(frame.redex, this.bg) : []
+    );
+    const mergeEls = [];
+    for (const p of frame.nodes) {
+      if (!p.merging || p.op <= 0.02) continue;
+      mergeEls.push(
+        svgEl("polygon", {
+          points: pointsAttr(p.points),
+          transform: `translate(${p.x.toFixed(1)} ${p.y.toFixed(1)})`,
+          fill: p.fill,
+          opacity: p.op.toFixed(3)
+        })
+      );
+    }
+    this.mergeG.replaceChildren(...mergeEls);
+    const edgeEls = [];
+    for (const e of frame.edges) {
+      if (e.colorA === "")
+        edgeEls.push(
+          svgEl("line", {
+            class: "mg-var-link",
+            x1: e.x1,
+            y1: e.y1,
+            x2: e.x2,
+            y2: e.y2,
+            opacity: e.op
+          })
+        );
+      else edgeEls.push(...blendEdge(e.x1, e.y1, e.x2, e.y2, e.colorA, e.colorB, e.op));
+    }
+    this.edgesG.replaceChildren(...edgeEls);
+    const nodeEls = frame.nodes.map((p) => {
+      const g = svgEl("g", {
+        class: "mg-node",
+        transform: `translate(${p.x} ${p.y})`,
+        opacity: p.op
+      });
+      if (!p.merging)
+        g.appendChild(
+          svgEl("polygon", {
+            points: pointsAttr(p.points),
+            fill: p.fill,
+            "fill-opacity": p.fillOp.toFixed(3),
+            stroke: p.fill,
+            "stroke-opacity": (1 - p.fillOp * 0.7).toFixed(3),
+            "stroke-width": 1.6
+          })
+        );
+      for (const tx of p.texts) {
+        const text = svgEl("text", { x: 0, y: 0, fill: tx.color, opacity: tx.op });
+        text.textContent = tx.text;
+        g.appendChild(text);
+      }
+      return g;
+    });
+    this.nodesG.replaceChildren(...nodeEls);
+  }
+  /** Faint dashed links between the occurrences of each variable within a rule. */
+  varNet(graph) {
+    const out = [];
+    for (const [aId, bId] of variableLinks(graph)) {
+      const a = graph.nodes.get(aId);
+      const b = graph.nodes.get(bId);
+      if (a === void 0 || b === void 0) continue;
+      out.push(svgEl("line", { class: "mg-var-link", x1: a.x, y1: a.y, x2: b.x, y2: b.y }));
+    }
+    return out;
+  }
+  edges(graph) {
+    const out = [];
+    for (const parent of graph.nodes.values()) {
+      const kids = graph.childrenOf(parent.id);
+      if (kids.length === 0) continue;
+      const pColor = colorFor(parent).fill;
+      for (const childId of kids) {
+        const child = graph.nodes.get(childId);
+        if (child === void 0) continue;
+        out.push(...blendEdge(parent.x, parent.y, child.x, child.y, pColor, colorFor(child).fill));
+      }
+    }
+    return out;
+  }
+  nodeGroups(state) {
+    const { graph, selection, labels, primaryId, viz } = state;
+    const groups = [];
+    for (const node of graph.nodes.values()) {
+      const w = nodeWidth(node);
+      const color = colorFor(node);
+      const vz = viz.get(node.id);
+      const g = svgEl("g", {
+        class: "mg-node",
+        "data-id": node.id,
+        transform: vz?.sizeScale !== void 0 ? `translate(${node.x} ${node.y}) scale(${vz.sizeScale.toFixed(3)})` : `translate(${node.x} ${node.y})`
+      });
+      if (selection.has(node.id)) {
+        g.appendChild(
+          svgEl("rect", {
+            class: node.id === primaryId ? "mg-sel primary" : "mg-sel",
+            x: -w / 2 - 3,
+            y: -NODE_H / 2 - 3,
+            width: w + 6,
+            height: NODE_H + 6,
+            rx: 7
+          })
+        );
+      }
+      if (vz?.highlight === true) {
+        g.appendChild(
+          svgEl("rect", {
+            class: "mg-viz-hi",
+            x: -w / 2 - 5,
+            y: -NODE_H / 2 - 5,
+            width: w + 10,
+            height: NODE_H + 10,
+            rx: 9
+          })
+        );
+      }
+      g.appendChild(nodeShape(node, w, vz?.color ?? color.fill));
+      const text = svgEl("text", { x: 0, y: 0 });
+      text.textContent = displayText(node);
+      text.setAttribute("fill", color.text);
+      g.appendChild(text);
+      if (vz?.label !== void 0 && vz.label.length > 0) {
+        const vl = svgEl("text", { class: "mg-viz-label", x: 0, y: -NODE_H / 2 - 10 });
+        vl.textContent = vz.label;
+        g.appendChild(vl);
+      }
+      g.appendChild(
+        svgEl("circle", { class: "mg-port", "data-port": "1", cx: 0, cy: -NODE_H / 2, r: PORT_R })
+      );
+      const label = labels.get(node.id);
+      if (label !== void 0 && label.text.length > 0) {
+        const result = svgEl("text", {
+          class: label.error ? "mg-result error" : "mg-result",
+          x: 0,
+          y: NODE_H / 2 + 13
+        });
+        result.textContent = label.text;
+        g.appendChild(result);
+      }
+      groups.push(g);
+    }
+    return groups;
+  }
+};
+function pointsRadius(points) {
+  let r = 0;
+  for (const [x, y] of points) r = Math.max(r, Math.hypot(x, y));
+  return r;
+}
+function traceKeyMap(graph) {
+  const keys = /* @__PURE__ */ new Map();
+  const walk = (id, path) => {
+    keys.set(id, path);
+    graph.sortedChildren(id).forEach((c, i) => walk(c.id, `${path}.${i}`));
+  };
+  graph.heads().forEach((h, i) => walk(h.id, `h${i}`));
+  return keys;
+}
+function traceFrame(graph, viewport) {
+  const keys = traceKeyMap(graph);
+  const slots = [];
+  for (const n of graph.nodes.values()) {
+    const key = keys.get(n.id);
+    if (key === void 0) continue;
+    const color = colorFor(n);
+    const points = shapePoints(n, SHAPE_N);
+    slots.push({
+      key,
+      leaf: graph.childrenOf(n.id).length === 0,
+      x: n.x,
+      y: n.y,
+      points,
+      radius: pointsRadius(points),
+      fill: color.fill,
+      text: displayText(n),
+      textColor: color.text,
+      hollow: (n.kind === "symbol" ? roleOf(n.name) : n.kind) === "variable"
+    });
+  }
+  const edges = [];
+  for (const parent of graph.nodes.values()) {
+    const pk = keys.get(parent.id);
+    if (pk === void 0) continue;
+    const pColor = colorFor(parent).fill;
+    for (const cid of graph.childrenOf(parent.id)) {
+      const child = graph.nodes.get(cid);
+      const ck = keys.get(cid);
+      if (child !== void 0 && ck !== void 0)
+        edges.push({
+          key: `${pk}>${ck}`,
+          a: pk,
+          b: ck,
+          colorA: pColor,
+          colorB: colorFor(child).fill
+        });
+    }
+  }
+  for (const [aId, bId] of variableLinks(graph)) {
+    const ak = keys.get(aId);
+    const bk = keys.get(bId);
+    if (ak !== void 0 && bk !== void 0)
+      edges.push({ key: `v:${ak}:${bk}`, a: ak, b: bk, colorA: "", colorB: "" });
+  }
+  return { slots, edges, viewport };
+}
+function interpolateTrace(from, to, t) {
+  const fromByKey = new Map(from.slots.map((s) => [s.key, s]));
+  const toNodes = new Map(to.slots.map((s) => [s.key, s]));
+  const used = /* @__PURE__ */ new Set();
+  const matchOf = /* @__PURE__ */ new Map();
+  for (const s of to.slots) {
+    const f2 = fromByKey.get(s.key);
+    if (f2 !== void 0 && !(f2.leaf && !s.leaf)) {
+      matchOf.set(s.key, f2);
+      used.add(f2);
+    }
+  }
+  const byTo = /* @__PURE__ */ new Map();
+  const byFrom = /* @__PURE__ */ new Map();
+  const rendered = [];
+  for (const s of to.slots) {
+    const f2 = matchOf.get(s.key);
+    const p = f2 !== void 0 ? morphPlacement(f2, s, t) : singlePlacement(s, t);
+    byTo.set(s.key, p);
+    if (f2 !== void 0) byFrom.set(f2.key, p);
+    rendered.push(p);
+  }
+  for (const s of from.slots) {
+    if (used.has(s)) continue;
+    const target2 = toNodes.get(s.key) ?? ancestorTarget(s.key, toNodes);
+    const p = target2 !== void 0 ? collapsePlacement(s, target2, t) : singlePlacement(s, 1 - t);
+    byFrom.set(s.key, p);
+    rendered.push(p);
+  }
+  const edges = [];
+  const pushEdge = (e, a, b, pres = 1) => {
+    if (a === void 0 || b === void 0) return;
+    const op = Math.min(a.op, b.op, pres);
+    if (op > 0.02)
+      edges.push({ colorA: e.colorA, colorB: e.colorB, x1: a.x, y1: a.y, x2: b.x, y2: b.y, op });
+  };
+  const toEdgeKeys = new Set(to.edges.map((e) => e.key));
+  const fromEdgeKeys = new Set(from.edges.map((e) => e.key));
+  for (const e of to.edges)
+    pushEdge(e, byTo.get(e.a), byTo.get(e.b), fromEdgeKeys.has(e.key) ? 1 : t);
+  for (const e of from.edges)
+    if (!toEdgeKeys.has(e.key)) pushEdge(e, byFrom.get(e.a), byFrom.get(e.b), 1 - t);
+  const viewport = {
+    panX: lerp(from.viewport.panX, to.viewport.panX, t),
+    panY: lerp(from.viewport.panY, to.viewport.panY, t),
+    scale: lerp(from.viewport.scale, to.viewport.scale, t)
+  };
+  return {
+    nodes: rendered.filter((p) => p.op > 0.02),
+    edges,
+    viewport,
+    redex: findRedex(from, used, toNodes, t)
+  };
+}
+function findRedex(from, used, toNodes, t) {
+  const op = Math.max(0, 1 - t * 1.7);
+  if (op <= 0.01) return void 0;
+  let root;
+  let depth = Infinity;
+  for (const f2 of from.slots) {
+    const toAt = toNodes.get(f2.key);
+    const changed = !used.has(f2) || toAt !== void 0 && toAt.text !== f2.text;
+    const d = f2.key.split(".").length;
+    if (changed && d < depth) {
+      depth = d;
+      root = f2;
+    }
+  }
+  if (root === void 0) return void 0;
+  const prefix = root.key + ".";
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const f2 of from.slots)
+    if (f2.key === root.key || f2.key.startsWith(prefix)) {
+      const ext = f2.radius;
+      minX = Math.min(minX, f2.x - ext);
+      maxX = Math.max(maxX, f2.x + ext);
+      minY = Math.min(minY, f2.y - ext);
+      maxY = Math.max(maxY, f2.y + ext);
+    }
+  return {
+    x: (minX + maxX) / 2,
+    y: (minY + maxY) / 2,
+    rx: (maxX - minX) / 2 + 8,
+    ry: (maxY - minY) / 2 + 8,
+    op,
+    color: root.fill
+    // the raw role color; the glow tints it against the live background at paint time
+  };
+}
+function haloEls(redex, bg) {
+  const color = haloTint(redex.color, bg);
+  const grad = svgEl("radialGradient", { id: "mg-halo" });
+  const stop = (offset, op) => svgEl("stop", { offset, "stop-color": color, "stop-opacity": op });
+  grad.append(stop("0%", "0.5"), stop("55%", "0.2"), stop("100%", "0"));
+  return [
+    grad,
+    svgEl("ellipse", {
+      cx: redex.x.toFixed(2),
+      cy: redex.y.toFixed(2),
+      rx: redex.rx.toFixed(2),
+      ry: redex.ry.toFixed(2),
+      fill: "url(#mg-halo)",
+      opacity: redex.op.toFixed(3)
+    })
+  ];
+}
+function luminance(hex) {
+  const m = /^#([0-9a-fA-F]{6})$/.exec(hex);
+  if (m === null) return null;
+  const v = parseInt(m[1], 16);
+  return 0.299 * (v >> 16 & 255) + 0.587 * (v >> 8 & 255) + 0.114 * (v & 255);
+}
+function haloTint(hex, bg) {
+  const lc = luminance(hex);
+  const lb = luminance(bg);
+  if (lc === null || lb === null || Math.abs(lc - lb) >= 80) return hex;
+  return lerpColor(hex, lb < 128 ? "#ffffff" : "#000000", 0.55);
+}
+function morphPlacement(f2, s, t) {
+  const p = arcPoint(f2.x, f2.y, s.x, s.y, t);
+  const points = s.points.map((pt, i) => {
+    const q = f2.points[i] ?? pt;
+    return [lerp(q[0], pt[0], t), lerp(q[1], pt[1], t)];
+  });
+  const texts = f2.text === s.text ? [{ text: s.text, color: lerpColor(f2.textColor, s.textColor, t), op: 1 }] : [
+    { text: f2.text, color: f2.textColor, op: 1 - t },
+    { text: s.text, color: s.textColor, op: t }
+  ];
+  const fillOp = lerp(f2.hollow ? 0 : 1, s.hollow ? 0 : 1, t);
+  return { x: p.x, y: p.y, op: 1, points, fill: lerpColor(f2.fill, s.fill, t), fillOp, texts };
+}
+function singlePlacement(s, op) {
+  return {
+    x: s.x,
+    y: s.y,
+    op,
+    points: s.points,
+    fill: s.fill,
+    fillOp: s.hollow ? 0 : 1,
+    texts: [{ text: s.text, color: s.textColor, op: 1 }]
+  };
+}
+function ancestorTarget(key, toNodes) {
+  let k = key;
+  for (; ; ) {
+    const dot = k.lastIndexOf(".");
+    if (dot < 0) return void 0;
+    k = k.slice(0, dot);
+    const s = toNodes.get(k);
+    if (s !== void 0) return s;
+  }
+}
+function collapsePlacement(s, target2, t) {
+  const startDist = Math.hypot(s.x - target2.x, s.y - target2.y);
+  const sR = s.radius;
+  const tR = target2.radius;
+  const text = [{ text: s.text, color: s.textColor, op: 1 }];
+  if (startDist < sR + tR)
+    return {
+      x: s.x,
+      y: s.y,
+      op: 1 - t,
+      points: s.points,
+      fill: s.fill,
+      fillOp: s.hollow ? 0 : 1,
+      texts: text
+    };
+  const x = lerp(s.x, target2.x, t);
+  const y = lerp(s.y, target2.y, t);
+  const m = Math.max(0, Math.min(1, 1 - (1 - t) * startDist / (sR + tR)));
+  const points = m <= 0 ? s.points : target2.points.map((pt, i) => {
+    const q = s.points[i] ?? pt;
+    return [lerp(q[0], pt[0], m), lerp(q[1], pt[1], m)];
+  });
+  const op = m < 0.7 ? 1 : (1 - m) / 0.3;
+  return {
+    x,
+    y,
+    op,
+    points,
+    fill: lerpColor(s.fill, target2.fill, m),
+    fillOp: s.hollow ? 0 : 1,
+    texts: text,
+    merging: m > 1e-3
+    // in the gooey layer only once it has reached the result and begun to meld
+  };
+}
+
+// src/viewport.ts
+var MIN_SCALE = 0.1;
+var MAX_SCALE = 4;
+var clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+function initialViewport() {
+  return { panX: 0, panY: 0, scale: 1 };
+}
+function toWorld(v, sx, sy) {
+  return { x: (sx - v.panX) / v.scale, y: (sy - v.panY) / v.scale };
+}
+function toScreen(v, wx, wy) {
+  return { x: wx * v.scale + v.panX, y: wy * v.scale + v.panY };
+}
+function pan(v, dx, dy) {
+  return { scale: v.scale, panX: v.panX + dx, panY: v.panY + dy };
+}
+function zoomAt(v, sx, sy, factor) {
+  const world = toWorld(v, sx, sy);
+  const scale = clamp(v.scale * factor, MIN_SCALE, MAX_SCALE);
+  return { scale, panX: sx - world.x * scale, panY: sy - world.y * scale };
+}
+
+// src/controller.ts
+var ZOOM_STEP = 1.0015;
+var Controller = class {
+  constructor(host) {
+    this.host = host;
+    this.overlay = svgEl("g", { class: "mg-overlay" });
+    host.svg.appendChild(this.overlay);
+    host.container.tabIndex = 0;
+    host.svg.addEventListener("pointerdown", this.onDown);
+    host.svg.addEventListener("pointermove", this.onMove);
+    host.svg.addEventListener("pointerup", this.onUp);
+    host.svg.addEventListener("wheel", this.onWheel, { passive: false });
+    host.svg.addEventListener("dblclick", this.onDblClick);
+    host.svg.addEventListener("contextmenu", this.onContext);
+    host.container.addEventListener("keydown", this.onKeyDown);
+    host.container.addEventListener("keyup", this.onKeyUp);
+  }
+  host;
+  mode = "idle";
+  lastScreen = { x: 0, y: 0 };
+  connectFrom = null;
+  rubberStart = { x: 0, y: 0 };
+  spaceHeld = false;
+  clip = null;
+  overlay;
+  input = null;
+  menu = null;
+  createAt = { x: 0, y: 0 };
+  highlight = -1;
+  onDown = (e) => this.pointerDown(e);
+  onMove = (e) => this.pointerMove(e);
+  onUp = (e) => this.pointerUp(e);
+  onWheel = (e) => this.wheel(e);
+  onDblClick = (e) => this.dblClick(e);
+  onKeyDown = (e) => this.keyDown(e);
+  onKeyUp = (e) => this.keyUp(e);
+  onContext = (e) => e.preventDefault();
+  /** Detach every listener and remove transient UI. */
+  destroy() {
+    this.host.svg.removeEventListener("pointerdown", this.onDown);
+    this.host.svg.removeEventListener("pointermove", this.onMove);
+    this.host.svg.removeEventListener("pointerup", this.onUp);
+    this.host.svg.removeEventListener("wheel", this.onWheel);
+    this.host.svg.removeEventListener("dblclick", this.onDblClick);
+    this.host.svg.removeEventListener("contextmenu", this.onContext);
+    this.host.container.removeEventListener("keydown", this.onKeyDown);
+    this.host.container.removeEventListener("keyup", this.onKeyUp);
+    this.closeInput();
+    this.overlay.remove();
+  }
+  // ---- coordinate helpers ---------------------------------------------------------------------
+  screenOf(e) {
+    const r = this.host.svg.getBoundingClientRect();
+    return { x: e.clientX - r.left, y: e.clientY - r.top };
+  }
+  worldOf(e) {
+    const s = this.screenOf(e);
+    return toWorld(this.host.viewport, s.x, s.y);
+  }
+  nodeIdAt(target2) {
+    const el2 = target2 instanceof Element ? target2.closest("[data-id]") : null;
+    return el2?.getAttribute("data-id") ?? null;
+  }
+  // ---- pointer --------------------------------------------------------------------------------
+  pointerDown(e) {
+    this.host.container.focus({ preventScroll: true });
+    this.host.svg.setPointerCapture(e.pointerId);
+    this.lastScreen = this.screenOf(e);
+    if (this.host.isTracing()) {
+      this.mode = "pan";
+      return;
+    }
+    const onPort = target(e) && target(e).getAttribute("data-port") === "1";
+    const nodeId = this.nodeIdAt(e.target);
+    if (e.button === 2 || this.spaceHeld) {
+      this.mode = "pan";
+      return;
+    }
+    if (onPort && nodeId !== null) {
+      this.mode = "connect";
+      this.connectFrom = nodeId;
+      return;
+    }
+    if (nodeId !== null) {
+      if (e.shiftKey) this.toggle(nodeId);
+      else if (!this.host.selection.has(nodeId)) this.selectOnly(nodeId);
+      this.host.primaryId = nodeId;
+      this.mode = "move";
+      this.host.render();
+      return;
+    }
+    if (!e.shiftKey) this.clearSelection();
+    if (this.host.panOnLeftDrag && !e.shiftKey) {
+      this.mode = "pan";
+      this.host.render();
+      return;
+    }
+    this.mode = "rubber";
+    this.rubberStart = this.worldOf(e);
+    this.host.render();
+  }
+  pointerMove(e) {
+    const screen = this.screenOf(e);
+    const dx = screen.x - this.lastScreen.x;
+    const dy = screen.y - this.lastScreen.y;
+    if (this.mode === "pan") {
+      this.host.viewport = pan(this.host.viewport, dx, dy);
+      this.host.render();
+    } else if (this.mode === "move") {
+      const k = this.host.viewport.scale;
+      for (const id of this.host.selection) {
+        const n = this.host.graph.nodes.get(id);
+        if (n) this.host.graph.move(id, n.x + dx / k, n.y + dy / k);
+      }
+      this.host.render();
+    } else if (this.mode === "connect") {
+      const over = this.nodeIdAt(document.elementFromPoint(e.clientX, e.clientY));
+      this.drawConnectLine(this.worldOf(e), over);
+    } else if (this.mode === "rubber") {
+      this.drawRubber(this.worldOf(e));
+    }
+    this.lastScreen = screen;
+  }
+  pointerUp(e) {
+    if (this.mode === "connect" && this.connectFrom !== null) {
+      const el2 = document.elementFromPoint(e.clientX, e.clientY);
+      const dropped = this.nodeIdAt(el2);
+      if (dropped !== null) {
+        if (this.host.graph.connect(dropped, this.connectFrom)) this.host.changed();
+      } else if (el2 !== null && this.host.svg.contains(el2)) {
+        const parents = this.host.graph.parentsOf(this.connectFrom);
+        for (const p of parents) this.host.graph.disconnect(p, this.connectFrom);
+        if (parents.length > 0) this.host.changed();
+      }
+    } else if (this.mode === "rubber") {
+      this.selectInRubber(this.worldOf(e), e.shiftKey);
+    } else if (this.mode === "move") {
+      this.host.changed();
+    }
+    this.connectFrom = null;
+    this.mode = "idle";
+    this.overlay.replaceChildren();
+    this.host.render();
+  }
+  wheel(e) {
+    if (!e.ctrlKey && !e.metaKey) return;
+    e.preventDefault();
+    const s = this.screenOf(e);
+    this.host.viewport = zoomAt(this.host.viewport, s.x, s.y, ZOOM_STEP ** -e.deltaY);
+    this.host.render();
+  }
+  dblClick(e) {
+    if (this.host.isTracing()) return;
+    const nodeId = this.nodeIdAt(e.target);
+    if (nodeId !== null) this.host.evaluate(nodeId);
+    else this.openInput(e);
+  }
+  // ---- selection ------------------------------------------------------------------------------
+  selectOnly(id) {
+    this.host.selection.clear();
+    this.host.selection.add(id);
+  }
+  toggle(id) {
+    if (this.host.selection.has(id)) this.host.selection.delete(id);
+    else this.host.selection.add(id);
+  }
+  clearSelection() {
+    this.host.selection.clear();
+    this.host.primaryId = null;
+  }
+  selectInRubber(end, additive) {
+    const x1 = Math.min(this.rubberStart.x, end.x);
+    const x2 = Math.max(this.rubberStart.x, end.x);
+    const y1 = Math.min(this.rubberStart.y, end.y);
+    const y2 = Math.max(this.rubberStart.y, end.y);
+    if (!additive) this.host.selection.clear();
+    for (const n of this.host.graph.nodes.values())
+      if (n.x >= x1 && n.x <= x2 && n.y >= y1 && n.y <= y2) this.host.selection.add(n.id);
+  }
+  // ---- overlays -------------------------------------------------------------------------------
+  drawRubber(end) {
+    const a = this.toScreen(this.rubberStart);
+    const b = this.toScreen(end);
+    const rect = svgEl("rect", {
+      fill: "#38bdf822",
+      stroke: "#38bdf8",
+      "stroke-dasharray": "4 3",
+      x: Math.min(a.x, b.x),
+      y: Math.min(a.y, b.y),
+      width: Math.abs(a.x - b.x),
+      height: Math.abs(a.y - b.y)
+    });
+    this.overlay.replaceChildren(rect);
+  }
+  drawConnectLine(end, over) {
+    if (this.connectFrom === null) return;
+    const from = this.host.graph.nodes.get(this.connectFrom);
+    if (from === void 0) return;
+    const a = this.toScreen({ x: from.x, y: from.y - NODE_H / 2 });
+    const b = this.toScreen(end);
+    const color = over === null || over === this.connectFrom ? "#cbd5e1" : this.host.graph.canConnect(over, this.connectFrom) ? "#3fb950" : "#f85149";
+    this.overlay.replaceChildren(
+      svgEl("line", { stroke: color, "stroke-width": 2, x1: a.x, y1: a.y, x2: b.x, y2: b.y })
+    );
+  }
+  toScreen(p) {
+    const v = this.host.viewport;
+    return { x: p.x * v.scale + v.panX, y: p.y * v.scale + v.panY };
+  }
+  // ---- keyboard -------------------------------------------------------------------------------
+  keyDown(e) {
+    if (this.input !== null) return;
+    if (e.key === " ") {
+      this.spaceHeld = true;
+      e.preventDefault();
+      return;
+    }
+    if (this.host.isTracing()) return;
+    if (e.key === "Delete" || e.key === "Backspace") {
+      for (const id of [...this.host.selection]) this.host.graph.remove(id);
+      this.clearSelection();
+      this.host.changed();
+      this.host.render();
+      e.preventDefault();
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "c") {
+      this.copy();
+      e.preventDefault();
+    } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "v") {
+      this.paste();
+      e.preventDefault();
+    } else if (e.key === "Tab" && this.host.primaryId !== null) {
+      this.host.evaluate(this.host.primaryId);
+      e.preventDefault();
+    }
+  }
+  keyUp(e) {
+    if (e.key === " ") this.spaceHeld = false;
+  }
+  // ---- copy and paste -------------------------------------------------------------------------
+  copy() {
+    const ids = new Set(this.host.selection);
+    if (ids.size === 0) return;
+    const nodes = [...ids].map((id) => ({ ...this.host.graph.nodes.get(id) })).filter(Boolean);
+    const edges = [];
+    for (const id of ids)
+      for (const c of this.host.graph.childrenOf(id)) if (ids.has(c)) edges.push([id, c]);
+    this.clip = { nodes, edges };
+  }
+  paste() {
+    if (this.clip === null || this.clip.nodes.length === 0) return;
+    const remap = /* @__PURE__ */ new Map();
+    this.host.selection.clear();
+    for (const n of this.clip.nodes) {
+      const copy = this.host.graph.add({ name: n.name, kind: n.kind, x: n.x + 30, y: n.y + 30 });
+      remap.set(n.id, copy.id);
+      this.host.selection.add(copy.id);
+    }
+    for (const [p, c] of this.clip.edges) {
+      const np = remap.get(p);
+      const nc = remap.get(c);
+      if (np !== void 0 && nc !== void 0) this.host.graph.connect(np, nc);
+    }
+    this.host.changed();
+    this.host.render();
+  }
+  // ---- node creation --------------------------------------------------------------------------
+  openInput(e) {
+    this.closeInput();
+    this.createAt = this.worldOf(e);
+    const s = this.screenOf(e);
+    const input = document.createElement("input");
+    input.className = "mg-input";
+    input.setAttribute(
+      "style",
+      `position:absolute;left:${s.x}px;top:${s.y}px;transform:translate(-50%,-50%);min-width:80px;padding:4px 6px;border:2px solid #38bdf8;border-radius:6px;background:#0f1116;color:#fff;font-family:ui-monospace,monospace;font-size:14px;z-index:10;`
+    );
+    input.placeholder = "name, empty = ( )";
+    input.addEventListener("input", () => this.updateMenu());
+    input.addEventListener("keydown", (ev) => this.inputKey(ev));
+    this.host.container.appendChild(input);
+    this.input = input;
+    input.focus({ preventScroll: true });
+    this.updateMenu();
+  }
+  inputKey(e) {
+    e.stopPropagation();
+    const list = this.host.completions(this.input?.value ?? "");
+    if (e.key === "Escape") {
+      this.closeInput();
+      e.preventDefault();
+    } else if (e.key === "ArrowDown") {
+      this.highlight = Math.min(this.highlight + 1, list.length - 1);
+      this.renderMenu(list);
+      e.preventDefault();
+    } else if (e.key === "ArrowUp") {
+      this.highlight = Math.max(this.highlight - 1, -1);
+      this.renderMenu(list);
+      e.preventDefault();
+    } else if (e.key === "Enter") {
+      const chosen = this.highlight >= 0 ? list[this.highlight] : void 0;
+      this.commit(chosen ?? this.input?.value ?? "");
+      e.preventDefault();
+    }
+  }
+  commit(raw) {
+    const value = raw.trim();
+    const kind = value === "" ? "list" : value === "." ? "dot" : "symbol";
+    const name = kind === "symbol" ? value : "";
+    const node = this.host.graph.add({ name, kind, x: this.createAt.x, y: this.createAt.y });
+    this.selectOnly(node.id);
+    this.host.primaryId = node.id;
+    this.closeInput();
+    this.host.changed();
+    this.host.render();
+  }
+  updateMenu() {
+    this.highlight = -1;
+    this.renderMenu(this.host.completions(this.input?.value ?? ""));
+  }
+  renderMenu(list) {
+    if (this.input === null) return;
+    this.menu?.remove();
+    if (list.length === 0) {
+      this.menu = null;
+      return;
+    }
+    const menu = document.createElement("div");
+    menu.setAttribute(
+      "style",
+      `position:absolute;left:${this.input.style.left};top:calc(${this.input.style.top} + 20px);background:#0f1116;border:1px solid #333;border-radius:6px;z-index:10;font-family:ui-monospace,monospace;font-size:13px;`
+    );
+    list.forEach((name, i) => {
+      const item = document.createElement("div");
+      item.textContent = name;
+      item.setAttribute(
+        "style",
+        `padding:3px 8px;cursor:pointer;color:${i === this.highlight ? "#38bdf8" : "#cbd5e1"};`
+      );
+      item.addEventListener("mousedown", (ev) => {
+        ev.preventDefault();
+        this.commit(name);
+      });
+      menu.appendChild(item);
+    });
+    this.host.container.appendChild(menu);
+    this.menu = menu;
+  }
+  closeInput() {
+    this.input?.remove();
+    this.menu?.remove();
+    this.input = null;
+    this.menu = null;
+    this.highlight = -1;
+  }
+};
+function target(e) {
+  return e.target instanceof Element ? e.target : null;
+}
+
+// src/atom.ts
+import {
+  SymbolAtom,
+  VariableAtom,
+  ExpressionAtom,
+  GroundedAtom,
+  S,
+  E
+} from "@mettascript/hyperon";
+
+// src/parse.ts
+import { SExprParser, standardTokenizer } from "@mettascript/hyperon";
+var sharedTokenizer;
+var tokenizer = () => sharedTokenizer ??= standardTokenizer();
+function parseProgram(src) {
+  return new SExprParser(src).parseAll(tokenizer());
+}
+function parseLeaf(token) {
+  const atoms = parseProgram(token);
+  return atoms.length === 1 ? atoms[0] : void 0;
+}
+
+// src/layout.ts
+var ROW = NODE_H + 26;
+var GAP = 14;
+var HEAD_GAP = 3 * NODE_H;
+function layout(graph, opts) {
+  const originX = opts?.originX ?? 0;
+  const originY = opts?.originY ?? 0;
+  const scaleOf = opts?.scaleOf ?? (() => 1);
+  const visited = /* @__PURE__ */ new Set();
+  let cursorX = originX;
+  const place2 = (id, depth) => {
+    const node = graph.nodes.get(id);
+    if (node === void 0) return cursorX;
+    if (visited.has(id)) return node.x;
+    visited.add(id);
+    node.y = originY + depth * ROW;
+    const kids = graph.childrenOf(id);
+    if (kids.length === 0) {
+      const w = nodeWidth(node) * scaleOf(node);
+      node.x = cursorX + w / 2;
+      cursorX += w + GAP;
+      return node.x;
+    }
+    const xs = kids.map((k) => place2(k, depth + 1));
+    node.x = (Math.min(...xs) + Math.max(...xs)) / 2;
+    return node.x;
+  };
+  for (const root of graph.heads()) {
+    place2(root.id, 0);
+    cursorX += HEAD_GAP;
+  }
+}
+
+// src/atom.ts
+function compose(graph, node) {
+  const kids = graph.sortedChildren(node.id).map((c) => compose(graph, c)).filter((a) => a !== null);
+  switch (node.kind) {
+    case "list":
+      return E(...kids);
+    case "dot":
+      return kids.length === 0 ? null : kids.length === 1 ? kids[0] : E(...kids);
+    case "symbol": {
+      const leaf = parseLeaf(node.name) ?? S(node.name);
+      return kids.length > 0 ? E(leaf, ...kids) : leaf;
+    }
+  }
+}
+function composeAtom(graph, nodeId) {
+  const node = graph.nodes.get(nodeId);
+  return node ? compose(graph, node) : null;
+}
+function graphToAtoms(graph) {
+  return graph.heads().map((h) => compose(graph, h)).filter((a) => a !== null);
+}
+function atomToGraph(atoms, graph = new Graph()) {
+  for (const atom of atoms) buildNode(graph, atom);
+  layout(graph);
+  return graph;
+}
+function isAtomic(atom) {
+  return atom instanceof SymbolAtom || atom instanceof VariableAtom || atom instanceof GroundedAtom;
+}
+function leafName(atom) {
+  return atom.toString();
+}
+function buildNode(graph, atom) {
+  if (atom instanceof ExpressionAtom) {
+    const items = atom.children();
+    const head = items[0];
+    if (items.length >= 2 && head !== void 0 && isAtomic(head)) {
+      const node2 = graph.add({ name: leafName(head), kind: "symbol" });
+      for (const child of items.slice(1)) graph.connect(node2.id, buildNode(graph, child));
+      return node2.id;
+    }
+    const node = graph.add({ name: "", kind: "list" });
+    for (const child of items) graph.connect(node.id, buildNode(graph, child));
+    return node.id;
+  }
+  return graph.add({ name: leafName(atom), kind: "symbol" }).id;
+}
+
+// src/serialize.ts
+function toJson(graph) {
+  const nodes = [...graph.nodes.values()].map((n) => ({ ...n }));
+  const edges = [];
+  for (const n of graph.nodes.values())
+    for (const c of graph.childrenOf(n.id)) edges.push([n.id, c]);
+  return { nodes, edges };
+}
+function fromJson(json) {
+  const graph = new Graph();
+  for (const n of json.nodes) graph.add({ ...n });
+  for (const [parent, child] of json.edges) graph.connect(parent, child);
+  return graph;
+}
+function toSource(graph) {
+  return graphToAtoms(graph).map((a) => a.toString()).join("\n");
+}
+function fromSource(src) {
+  return atomToGraph(parseProgram(src));
+}
+
+// src/evaluate.ts
+import { MeTTa, atomIsError } from "@mettascript/hyperon";
+function loadProgram(graph, metta = new MeTTa()) {
+  const space = metta.space();
+  for (const atom of graphToAtoms(graph)) space.addAtom(atom);
+  return metta;
+}
+var MAX_LABEL = 80;
+function nothing() {
+  return { atoms: [], label: "", error: false };
+}
+function summarize(results) {
+  const text = results.map(String).join(", ");
+  const label = text.length > MAX_LABEL ? `${text.slice(0, MAX_LABEL - 1)}\u2026` : text;
+  return { atoms: results, label, error: results.some(atomIsError) };
+}
+function evaluateHead(graph, headId, metta) {
+  const atom = composeAtom(graph, headId);
+  if (atom === null) return nothing();
+  try {
+    return summarize(metta.evaluateAtom(atom));
+  } catch (e) {
+    return { atoms: [], label: String(e), error: true };
+  }
+}
+async function evaluateHeadAsync(graph, headId, metta) {
+  const atom = composeAtom(graph, headId);
+  if (atom === null) return nothing();
+  try {
+    return summarize(await metta.evaluateAtomAsync(atom));
+  } catch (e) {
+    return { atoms: [], label: String(e), error: true };
+  }
+}
+
+// src/completions.ts
+import { SymbolAtom as SymbolAtom2 } from "@mettascript/hyperon";
+var STDLIB = [
+  "if",
+  "case",
+  "let",
+  "let*",
+  "match",
+  "superpose",
+  "collapse",
+  "empty",
+  "unify",
+  "quote",
+  "sealed",
+  "car-atom",
+  "cdr-atom",
+  "cons-atom",
+  "decons-atom",
+  "get-type",
+  "get-metatype",
+  "assertEqual",
+  "assertAlphaEqual",
+  "add-atom",
+  "remove-atom",
+  "bind!",
+  "new-space",
+  "&self",
+  "+",
+  "-",
+  "*",
+  "/",
+  "%",
+  "==",
+  "!=",
+  "<",
+  ">",
+  "<=",
+  ">=",
+  "and",
+  "or",
+  "not"
+];
+function spaceSymbols(metta) {
+  const names = /* @__PURE__ */ new Set();
+  for (const atom of metta.space().getAtoms())
+    for (const descendant of atom.iterate())
+      if (descendant instanceof SymbolAtom2) names.add(descendant.name());
+  return names;
+}
+function isSubsequence(q, name) {
+  let i = 0;
+  for (const ch of name) if (i < q.length && ch === q[i]) i++;
+  return i === q.length;
+}
+function matchScore(name, q) {
+  if (name === q) return 100;
+  if (name.startsWith(q)) return 80;
+  if (name.includes(q)) return 50;
+  return isSubsequence(q, name) ? 20 : 0;
+}
+function completionsFor(prefix, metta, limit = 9) {
+  const q = prefix.toLowerCase();
+  if (q === "") return [];
+  const pool = new Set(STDLIB);
+  for (const s of spaceSymbols(metta)) pool.add(s);
+  return [...pool].map((name) => ({ name, score: matchScore(name.toLowerCase(), q) })).filter((x) => x.score > 0).sort(
+    (a, b) => b.score - a.score || a.name.length - b.name.length || a.name.localeCompare(b.name)
+  ).slice(0, limit).map((x) => x.name);
+}
+
+// src/reduce.ts
+import { E as E2, S as S2, ExpressionAtom as ExpressionAtom2 } from "@mettascript/hyperon";
+var MAX_WIDTH = 24;
+function lazyPositions(head, metta, cache) {
+  const key = head.toString();
+  const hit = cache.get(key);
+  if (hit !== void 0) return hit;
+  const out = /* @__PURE__ */ new Set();
+  const types = metta.evaluateAtom(E2(S2("get-type"), head));
+  const type = types[0];
+  if (type instanceof ExpressionAtom2) {
+    const items = type.children();
+    if (items[0]?.toString() === "->")
+      for (let i = 1; i < items.length - 1; i++) {
+        const t = items[i].toString();
+        if (t === "Atom" || t === "Expression") out.add(i);
+      }
+  }
+  cache.set(key, out);
+  return out;
+}
+function stepAll(atom, metta) {
+  const results = metta.evaluateAtom(E2(S2("eval"), atom));
+  const src = atom.toString();
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const r of results) {
+    if (r instanceof ExpressionAtom2) {
+      const items = r.children();
+      if (items.length === 2 && items[0].toString() === "eval" && items[1].toString() === src)
+        continue;
+    }
+    const s = r.toString();
+    if (s === src || seen.has(s)) continue;
+    seen.add(s);
+    out.push(r);
+  }
+  return out.length === 0 ? null : out;
+}
+function reduceStep(atom, metta, cache = /* @__PURE__ */ new Map()) {
+  if (atom instanceof ExpressionAtom2) {
+    const items = atom.children();
+    const head = items[0];
+    const lazy = head !== void 0 ? lazyPositions(head, metta, cache) : /* @__PURE__ */ new Set();
+    for (let i = 1; i < items.length; i++) {
+      if (lazy.has(i)) continue;
+      const reduced = reduceStep(items[i], metta, cache);
+      if (reduced !== null)
+        return reduced.map((r) => {
+          const next = [...items];
+          next[i] = r;
+          return E2(...next);
+        });
+    }
+  }
+  return stepAll(atom, metta);
+}
+function sameSet(a, b) {
+  if (a.length !== b.length) return false;
+  const as = a.map(String).sort();
+  const bs = b.map(String).sort();
+  return as.every((s, i) => s === bs[i]);
+}
+function reduceTrace(atom, metta, maxSteps = 300) {
+  const cache = /* @__PURE__ */ new Map();
+  const frontiers = [[atom]];
+  let frontier = [atom];
+  let settled = false;
+  for (let i = 0; i < maxSteps; i++) {
+    const next = [];
+    const seen = /* @__PURE__ */ new Set();
+    let changed = false;
+    for (const term of frontier) {
+      const step = reduceStep(term, metta, cache);
+      if (step !== null) changed = true;
+      for (const s of step ?? [term]) {
+        const key = s.toString();
+        if (!seen.has(key)) {
+          seen.add(key);
+          next.push(s);
+        }
+      }
+    }
+    if (!changed) {
+      settled = true;
+      break;
+    }
+    frontier = next.length > MAX_WIDTH ? next.slice(0, MAX_WIDTH) : next;
+    frontiers.push(frontier);
+  }
+  if (settled) {
+    const result = metta.evaluateAtom(atom);
+    if (result.length > 0 && !sameSet(frontier, result))
+      frontiers.push(result.length > MAX_WIDTH ? result.slice(0, MAX_WIDTH) : result);
+  }
+  return frontiers;
+}
+
+// src/skeleton.ts
+import { E as E3, S as S3, V, ExpressionAtom as ExpressionAtom3, VariableAtom as VariableAtom2 } from "@mettascript/hyperon";
+function withSilhouettes(frontiers, metta) {
+  const out = [];
+  for (let i = 0; i < frontiers.length; i++) {
+    out.push(frontiers[i]);
+    const cur = frontiers[i];
+    const next = frontiers[i + 1];
+    if (next !== void 0 && cur.length === 1 && next.length === 1) {
+      const body = skeletonize(cur[0], next[0], metta);
+      if (body !== null) out.push([body]);
+    }
+  }
+  return out;
+}
+function skeletonize(before, after, metta) {
+  if (before instanceof ExpressionAtom3 && after instanceof ExpressionAtom3) {
+    const b = before.children();
+    const a = after.children();
+    if (b.length === a.length) {
+      const diff = [];
+      for (let i = 0; i < a.length; i++) if (b[i].toString() !== a[i].toString()) diff.push(i);
+      if (diff.length === 1) {
+        const i = diff[0];
+        const sub = skeletonize(b[i], a[i], metta);
+        if (sub === null) return null;
+        const next = [...a];
+        next[i] = sub;
+        return E3(...next);
+      }
+    }
+  }
+  return ruleBody(before, after, metta);
+}
+function ruleBody(redex, reduct, metta) {
+  if (!(redex instanceof ExpressionAtom3)) return null;
+  const kids = redex.children();
+  if (kids.length < 2) return null;
+  const pattern = E3(kids[0], ...kids.slice(1).map((_, i) => V("v" + String(i))));
+  const bodies = metta.evaluateAtom(
+    E3(S3("match"), S3("&self"), E3(S3("="), pattern, V("body")), V("body"))
+  );
+  for (const cand of bodies)
+    if (cand instanceof ExpressionAtom3 && hasVar(cand) && fits(cand, reduct))
+      return cleanVars(cand);
+  return null;
+}
+function fits(pattern, ground) {
+  if (pattern instanceof VariableAtom2) return true;
+  if (pattern instanceof ExpressionAtom3 && ground instanceof ExpressionAtom3) {
+    const p = pattern.children();
+    const g = ground.children();
+    return p.length === g.length && p.every((c, i) => fits(c, g[i]));
+  }
+  return pattern.toString() === ground.toString();
+}
+function hasVar(atom) {
+  if (atom instanceof VariableAtom2) return true;
+  if (atom instanceof ExpressionAtom3) return atom.children().some(hasVar);
+  return false;
+}
+function cleanVars(atom) {
+  if (atom instanceof VariableAtom2) return V(atom.name().replace(/#\d+$/, ""));
+  if (atom instanceof ExpressionAtom3) return E3(...atom.children().map(cleanVars));
+  return atom;
+}
+
+// src/block/view.ts
+import { S as S4 } from "@mettascript/hyperon";
+
+// src/block/settings.ts
+var SITE_PALETTE = {
+  canvas: "#1b1d23",
+  bkgColor: "#21262d",
+  backgroundBlockColor: "#2b313b",
+  outlineBlockColor: "#3d444d",
+  formColor: "#e6edf3",
+  identifierColor: "#e6edf3",
+  literalColor: "#79c0ff",
+  stringColor: "#a5d6ff",
+  operatorColor: "#ff7b72",
+  spacerefColor: "#ffa657",
+  atColor: "#d2a8ff",
+  holeFill: "#ffa657",
+  holeSide: "#ffa657",
+  holeText: "#1b1d23",
+  selectedColor: "#f2cc60",
+  selectedAtomColor: "#1b1d23"
+};
+var TEAL_PALETTE = {
+  canvas: "#002F36",
+  bkgColor: "#002F36",
+  backgroundBlockColor: "#003A42",
+  outlineBlockColor: "#005A65",
+  formColor: "#0082D6",
+  identifierColor: "#30A1B6",
+  literalColor: "#FFC732",
+  stringColor: "#79E7B0",
+  operatorColor: "#0082D6",
+  spacerefColor: "#30A1B6",
+  atColor: "#30A1B6",
+  holeFill: "#FCE13E",
+  holeSide: "#C17317",
+  holeText: "#002F36",
+  selectedColor: "#E60000",
+  selectedAtomColor: "#FFFFFF"
+};
+var CUTOFF = 14;
+function makeSettings(fontSize, unitWidth, palette = SITE_PALETTE) {
+  const unitHeight = Math.round(fontSize * 1.55);
+  const radius = Math.max(2, Math.round(unitHeight / 2) - 1);
+  const radiusAdj = Math.max(2, Math.round(radius * 5 / 7));
+  return { fontSize, unitWidth, unitHeight, radius, radiusAdj, cutoff: CUTOFF, ...palette };
+}
+
+// src/block/layout.ts
+import {
+  ExpressionAtom as ExpressionAtom4,
+  VariableAtom as VariableAtom3,
+  SymbolAtom as SymbolAtom3,
+  GroundedAtom as GroundedAtom2
+} from "@mettascript/hyperon";
+
+// src/block/color.ts
+function glyphColor(name, isHead, s) {
+  switch (roleOf(name)) {
+    case "number":
+      return s.literalColor;
+    case "string":
+      return s.stringColor;
+    case "operator":
+    case "control":
+      return s.operatorColor;
+    case "spaceref":
+      return s.spacerefColor;
+    case "at":
+      return s.atColor;
+    default:
+      return isHead ? s.formColor : s.identifierColor;
+  }
+}
+function blockColors(depth, s) {
+  const fill = depth % 2 === 0 ? s.backgroundBlockColor : s.bkgColor;
+  return { fill, outline: s.outlineBlockColor };
+}
+
+// src/block/layout.ts
+var IF_LIKE = /* @__PURE__ */ new Set(["if", "and", "or"]);
+var LAMBDA_LIKE = /* @__PURE__ */ new Set([
+  "=",
+  "let",
+  "let*",
+  "match",
+  "function",
+  "lambda",
+  "\\",
+  "sealed",
+  "chain"
+]);
+var COND_LIKE = /* @__PURE__ */ new Set(["case", "cond", "superpose", "collapse", "unify"]);
+function classify(head, u) {
+  if (IF_LIKE.has(head))
+    return { headerItems: 2, indent: u, straightLeft: true, headerException: false };
+  if (LAMBDA_LIKE.has(head))
+    return { headerItems: 2, indent: u, straightLeft: true, headerException: true };
+  if (COND_LIKE.has(head))
+    return { headerItems: 1, indent: u, straightLeft: true, headerException: false };
+  return null;
+}
+function isHeaded(atom) {
+  const items = atom.children();
+  const head = items[0];
+  return items.length >= 2 && head !== void 0 && isLeaf(head);
+}
+function isLeaf(atom) {
+  return atom instanceof SymbolAtom3 || atom instanceof VariableAtom3 || atom instanceof GroundedAtom2;
+}
+function needsTail(box) {
+  return box.kind !== "expr";
+}
+function layoutRow(boxes, startX, u) {
+  let x = startX;
+  let h = 0;
+  let right = startX;
+  for (const b of boxes) {
+    b.x = x;
+    b.y = 0;
+    right = x + b.w;
+    h = Math.max(h, b.h);
+    x = right + u;
+  }
+  return { right, h };
+}
+function build(atom, depth, path, isHead, s) {
+  const u = s.unitWidth;
+  if (atom instanceof VariableAtom3) {
+    const text = atom.toString();
+    return {
+      kind: "hole",
+      path,
+      x: 0,
+      y: 0,
+      w: text.length * u + u,
+      // a half unit of breathing room on each side of the name
+      h: s.unitHeight,
+      depth,
+      text
+    };
+  }
+  if (!(atom instanceof ExpressionAtom4)) {
+    const name = atom.toString();
+    const text = displayGlyph(name);
+    return {
+      kind: "atom",
+      path,
+      x: 0,
+      y: 0,
+      w: text.length * u,
+      h: s.unitHeight,
+      depth,
+      text,
+      color: glyphColor(name, isHead, s)
+    };
+  }
+  const items = atom.children();
+  if (items.length === 0) {
+    const { fill: fill2, outline: outline2 } = blockColors(depth, s);
+    const w2 = 3 * u;
+    const h = s.unitHeight;
+    return {
+      kind: "expr",
+      path,
+      x: 0,
+      y: 0,
+      w: w2,
+      h,
+      depth,
+      orient: "h",
+      fill: fill2,
+      outline: outline2,
+      headerException: false,
+      children: [],
+      rightProfile: [{ x: w2, h }],
+      leftProfile: [{ x: 0, h }]
+    };
+  }
+  const headed = isHeaded(atom);
+  const children = items.map((child, k) => {
+    const childIsHead = headed && k === 0;
+    return build(child, childIsHead ? depth : depth + 1, [...path, k], childIsHead, s);
+  });
+  const { fill, outline } = blockColors(depth, s);
+  const totalChars = children.reduce((sum, b) => sum + b.w, 0) / u;
+  const headName = headed ? items[0].toString() : "";
+  const cls = headed && children.length >= 2 ? classify(headName, u) : null;
+  const stacks = cls !== null && totalChars >= s.cutoff && children.length > cls.headerItems;
+  if (!stacks) {
+    const { right, h } = layoutRow(children, u, u);
+    const last = children[children.length - 1];
+    const w2 = right + (last !== void 0 && needsTail(last) ? u : 0);
+    return {
+      kind: "expr",
+      path,
+      x: 0,
+      y: 0,
+      w: w2,
+      h,
+      depth,
+      orient: "h",
+      fill,
+      outline,
+      headerException: false,
+      children,
+      rightProfile: [{ x: w2, h }],
+      leftProfile: [{ x: 0, h }]
+    };
+  }
+  const c = cls;
+  const header = children.slice(0, c.headerItems);
+  const body = children.slice(c.headerItems);
+  const head = layoutRow(header, u, u);
+  const lastHeader = header[header.length - 1];
+  const rightProfile = [
+    { x: head.right + (lastHeader !== void 0 && needsTail(lastHeader) ? u : 0), h: head.h }
+  ];
+  const leftProfile = [{ x: 0, h: head.h }];
+  let yCursor = head.h;
+  for (const b of body) {
+    b.x = c.indent;
+    b.y = yCursor;
+    yCursor += b.h;
+    rightProfile.push({ x: c.indent + b.w + (needsTail(b) ? u : 0), h: b.h });
+    leftProfile.push({ x: c.straightLeft ? 0 : c.indent, h: b.h });
+  }
+  const w = Math.max(...rightProfile.map((r) => r.x));
+  return {
+    kind: "expr",
+    path,
+    x: 0,
+    y: 0,
+    w,
+    h: yCursor,
+    depth,
+    orient: "v",
+    fill,
+    outline,
+    headerException: c.headerException,
+    children,
+    rightProfile,
+    leftProfile
+  };
+}
+function place(box, ox, oy) {
+  box.x += ox;
+  box.y += oy;
+  if (box.kind === "expr") for (const child of box.children) place(child, box.x, box.y);
+}
+function layoutAtom(atom, s, path = []) {
+  const box = build(atom, 0, path, false, s);
+  place(box, 0, 0);
+  return box;
+}
+function placeProgram(atoms, s) {
+  const gap = s.unitHeight;
+  const boxes = [];
+  let y = 0;
+  for (let i = 0; i < atoms.length; i++) {
+    const box = build(atoms[i], 0, [i], false, s);
+    place(box, 0, y);
+    boxes.push(box);
+    y += box.h + gap;
+  }
+  return boxes;
+}
+
+// src/block/geometry.ts
+var T = 0.39;
+function rot(x, y, deg) {
+  const a = deg * Math.PI / 180;
+  const c = Math.cos(a);
+  const s = Math.sin(a);
+  return { x: x * c - y * s, y: x * s + y * c };
+}
+function f(n) {
+  return (Math.round(n * 100) / 100).toString();
+}
+function pulledPointsToPath(points) {
+  const n = points.length;
+  if (n === 0) return "";
+  const first = points[0];
+  let d = `M ${f(first.x)} ${f(first.y)}`;
+  for (let i = 0; i < n; i++) {
+    const prev = points[i];
+    const cur = points[(i + 1) % n];
+    const vx = cur.x - prev.x;
+    const vy = cur.y - prev.y;
+    const r1 = rot(vx, vy, prev.rangle);
+    const c1x = prev.x + prev.rpull * r1.x;
+    const c1y = prev.y + prev.rpull * r1.y;
+    const r2 = rot(-vx, -vy, cur.langle);
+    const c2x = cur.x + cur.lpull * r2.x;
+    const c2y = cur.y + cur.lpull * r2.y;
+    d += ` C ${f(c1x)} ${f(c1y)} ${f(c2x)} ${f(c2y)} ${f(cur.x)} ${f(cur.y)}`;
+  }
+  return d + " Z";
+}
+function roundedRectPoints(width, height, initR) {
+  const r = width < 2 * initR ? Math.floor(width / 2) : Math.round(initR);
+  const sl = Math.max(0, width - 2 * r);
+  const sh = Math.max(0, height - 2 * r);
+  return [
+    { lpull: 0, langle: 0, x: 0, y: r, rpull: T, rangle: -45 },
+    { lpull: T, langle: 45, x: r, y: 0, rpull: 0, rangle: 0 },
+    { lpull: 0, langle: 0, x: r + sl, y: 0, rpull: T, rangle: -45 },
+    { lpull: T, langle: 45, x: 2 * r + sl, y: r, rpull: 0, rangle: 0 },
+    { lpull: 0, langle: 0, x: 2 * r + sl, y: r + sh, rpull: T, rangle: -45 },
+    { lpull: T, langle: 45, x: r + sl, y: 2 * r + sh, rpull: 0, rangle: 0 },
+    { lpull: 0, langle: 0, x: r, y: 2 * r + sh, rpull: T, rangle: -45 },
+    { lpull: T, langle: 45, x: 0, y: r + sh, rpull: T, rangle: 0 }
+  ];
+}
+function roundedRectPath(width, height, r) {
+  return pulledPointsToPath(roundedRectPoints(width, height, r));
+}
+function sign3(a, b, polarity) {
+  if (a > b) return polarity;
+  if (a === b) return 0;
+  return -polarity;
+}
+function augment(polarity, init, rows) {
+  const withLtp = [];
+  let prev = init;
+  for (const row of rows) {
+    withLtp.push({ w: row.x, h: row.h, ltp: sign3(row.x, prev, polarity), ltn: 0 });
+    prev = row.x;
+  }
+  let next = init;
+  for (let i = withLtp.length - 1; i >= 0; i--) {
+    const row = withLtp[i];
+    row.ltn = sign3(row.w, next, polarity);
+    next = row.w;
+  }
+  return withLtp;
+}
+function fourPointRow(p, n, offset, ltp, ltn, initH, finalH, r) {
+  const y1 = 2 * n * r + initH;
+  const y2 = 2 * n * r + p * r + initH;
+  const y3 = 2 * n * r + p * r + finalH;
+  const y4 = 2 * n * r + p * 2 * r + finalH;
+  const x1 = offset + -p * ltp * r;
+  const x2 = offset;
+  const x3 = offset;
+  const x4 = offset + -p * ltn * r;
+  return [
+    { lpull: T, langle: 0, x: x1, y: y1, rpull: T, rangle: ltp * -45 },
+    { lpull: T, langle: ltp * 45, x: x2, y: y2, rpull: T, rangle: 0 },
+    { lpull: T, langle: 0, x: x3, y: y3, rpull: T, rangle: ltn * -45 },
+    { lpull: T, langle: ltn * 45, x: x4, y: y4, rpull: T, rangle: 0 }
+  ];
+}
+function calcRows(p, init, numRows, totalH, rows, headerException, r) {
+  const aug = augment(p, init, rows);
+  if (headerException && aug.length > 0) aug[0].ltn = Math.abs(aug[0].ltn);
+  const points = [];
+  let n = numRows;
+  let h = totalH;
+  for (const row of aug) {
+    points.push(...fourPointRow(p, n, row.w, row.ltp, row.ltn, h, h + p * row.h, r));
+    n = n + p;
+    h = h + p * row.h;
+  }
+  return { points, numRows: n, totalH: h };
+}
+function roundedBackingPoints(rightProfile, leftProfile, r, headerException) {
+  const srcRight = rightProfile.map((row) => ({ x: row.x, h: row.h - 2 * r }));
+  const srcLeft = leftProfile.map((row) => ({ x: row.x, h: row.h - 2 * r }));
+  const right = calcRows(1, 0, 0, 0, srcRight, headerException, r);
+  const left = calcRows(
+    -1,
+    Infinity,
+    right.numRows,
+    right.totalH,
+    [...srcLeft].reverse(),
+    false,
+    r
+  );
+  return [...right.points, ...left.points];
+}
+function roundedBackingPath(rightProfile, leftProfile, r, headerException) {
+  return pulledPointsToPath(roundedBackingPoints(rightProfile, leftProfile, r, headerException));
+}
+
+// src/block/animate.ts
+var backingD = (box, s) => box.orient === "h" ? roundedRectPath(box.w, box.h, s.radius) : roundedBackingPath(box.rightProfile, box.leftProfile, s.radius, box.headerException);
+function boxesToPrims(boxes, s, selectedPath) {
+  const out = [];
+  const draw = (box) => {
+    const pk = JSON.stringify(box.path);
+    if (box.kind === "expr") {
+      out.push({
+        t: "path",
+        key: `b:${pk}`,
+        d: backingD(box, s),
+        tx: box.x,
+        ty: box.y,
+        fill: box.fill,
+        stroke: box.outline,
+        op: 1,
+        dataPath: pk
+      });
+      if (box.children.length === 0)
+        out.push({
+          t: "text",
+          key: `t:${pk}`,
+          x: box.x + box.w / 2,
+          y: box.y + box.h / 2,
+          text: "()",
+          fill: s.identifierColor,
+          size: s.fontSize,
+          weight: false,
+          op: 1
+        });
+      for (const c of box.children) draw(c);
+      return;
+    }
+    if (box.kind === "hole") {
+      const ph = s.fontSize + 6;
+      const py = box.y + (box.h - ph) / 2;
+      out.push({
+        t: "path",
+        key: `b:${pk}`,
+        d: roundedRectPath(box.w, ph, ph / 2),
+        tx: box.x,
+        ty: py,
+        fill: s.holeFill,
+        stroke: "none",
+        op: 1,
+        dataPath: pk
+      });
+      out.push({
+        t: "text",
+        key: `t:${pk}`,
+        x: box.x + box.w / 2,
+        y: box.y + box.h / 2,
+        text: box.text,
+        fill: s.holeText,
+        size: s.fontSize,
+        weight: true,
+        op: 1
+      });
+      return;
+    }
+    out.push({ t: "hit", key: `r:${pk}`, x: box.x, y: box.y, w: box.w, h: box.h, dataPath: pk });
+    out.push({
+      t: "text",
+      key: `t:${pk}`,
+      x: box.x + box.w / 2,
+      y: box.y + box.h / 2,
+      text: box.text,
+      fill: box.color,
+      size: s.fontSize,
+      weight: false,
+      op: 1
+    });
+  };
+  for (const b of boxes) draw(b);
+  if (selectedPath !== null) {
+    const sel = findBox(boxes, selectedPath);
+    if (sel !== null) {
+      const selD = sel.kind === "expr" ? backingD(sel, s) : roundedRectPath(sel.w, sel.h, sel.kind === "hole" ? s.radiusAdj : s.radius);
+      out.push({
+        t: "path",
+        key: "sel",
+        d: selD,
+        tx: sel.x,
+        ty: sel.y,
+        fill: "none",
+        stroke: s.selectedColor,
+        op: 1
+      });
+      const hh = s.unitHeight;
+      const hw = s.unitWidth * 1.8;
+      const hx = sel.x - hw - s.unitWidth * 0.4;
+      const hy = sel.y + sel.h / 2 - hh / 2;
+      out.push({
+        t: "path",
+        key: "hbg",
+        d: roundedRectPath(hw, hh, s.radiusAdj),
+        tx: hx,
+        ty: hy,
+        fill: s.selectedColor,
+        stroke: "none",
+        op: 1
+      });
+      out.push({
+        t: "text",
+        key: "harrow",
+        x: hx + hw / 2,
+        y: hy + hh / 2,
+        text: "\u2192",
+        fill: s.selectedAtomColor,
+        size: s.fontSize,
+        weight: false,
+        op: 1
+      });
+    }
+  }
+  return out;
+}
+function findBox(boxes, path) {
+  const same = (a) => a.length === path.length && a.every((v, i) => v === path[i]);
+  const walk = (b) => {
+    if (same(b.path)) return b;
+    if (b.kind === "expr")
+      for (const c of b.children) {
+        const hit = walk(c);
+        if (hit !== null) return hit;
+      }
+    return null;
+  };
+  for (const b of boxes) {
+    const hit = walk(b);
+    if (hit !== null) return hit;
+  }
+  return null;
+}
+var NUM = /-?\d+(\.\d+)?/g;
+function lerpD(a, b, t) {
+  const na = a.match(NUM);
+  const nb = b.match(NUM);
+  if (na === null || nb === null || na.length !== nb.length) return b;
+  let i = 0;
+  return b.replace(NUM, () => {
+    const v = lerp(Number(na[i]), Number(nb[i]), t);
+    i++;
+    return (Math.round(v * 100) / 100).toString();
+  });
+}
+function compatible(p, n) {
+  if (p.t !== n.t) return false;
+  if (p.t === "path" && n.t === "path")
+    return (p.d.match(NUM)?.length ?? 0) === (n.d.match(NUM)?.length ?? 0);
+  if (p.t === "text" && n.t === "text") return p.text === n.text;
+  return true;
+}
+function faded(p, op) {
+  return p.t === "hit" ? p : { ...p, op };
+}
+function morph(p, n, t) {
+  if (p.t === "path" && n.t === "path")
+    return {
+      ...n,
+      d: lerpD(p.d, n.d, t),
+      tx: lerp(p.tx, n.tx, t),
+      ty: lerp(p.ty, n.ty, t),
+      op: lerp(p.op, n.op, t)
+    };
+  if (p.t === "text" && n.t === "text")
+    return {
+      ...n,
+      x: lerp(p.x, n.x, t),
+      y: lerp(p.y, n.y, t),
+      size: lerp(p.size, n.size, t),
+      op: lerp(p.op, n.op, t)
+    };
+  return n;
+}
+function push(m, k, v) {
+  const arr = m.get(k);
+  if (arr === void 0) m.set(k, [v]);
+  else arr.push(v);
+}
+function interpolate(prev, next, t) {
+  const prevMap = new Map(prev.map((p) => [p.key, p]));
+  const nextKeys = new Set(next.map((n) => n.key));
+  const exitingByText = /* @__PURE__ */ new Map();
+  const enteringByText = /* @__PURE__ */ new Map();
+  for (const p of prev)
+    if (p.t === "text" && !p.weight && !nextKeys.has(p.key)) push(exitingByText, p.text, p);
+  for (const n of next)
+    if (n.t === "text" && !n.weight && !prevMap.has(n.key)) push(enteringByText, n.text, n);
+  const glideFrom = /* @__PURE__ */ new Map();
+  const glided = /* @__PURE__ */ new Set();
+  for (const [txt, ns] of enteringByText) {
+    const ps = exitingByText.get(txt);
+    if (ns.length === 1 && ps !== void 0 && ps.length === 1) {
+      glideFrom.set(ns[0].key, ps[0]);
+      glided.add(ps[0].key);
+    }
+  }
+  const out = [];
+  for (const n of next) {
+    if (n.t === "hit") continue;
+    const p = prevMap.get(n.key) ?? glideFrom.get(n.key);
+    if (p === void 0) {
+      out.push(faded(n, t));
+    } else if (compatible(p, n)) {
+      out.push(morph(p, n, t));
+    } else {
+      out.push(faded(n, t));
+      out.push(faded({ ...p, key: `${p.key}:x` }, 1 - t));
+    }
+  }
+  for (const p of prev) {
+    if (p.t === "hit") continue;
+    if (!nextKeys.has(p.key) && !glided.has(p.key)) out.push(faded(p, 1 - t));
+  }
+  return out;
+}
+
+// src/block/render.ts
+var SVG_NS2 = "http://www.w3.org/2000/svg";
+var DURATION = 320;
+var CSS2 = `
+.blk-svg { width: 100%; height: 100%; display: block; overflow: clip; user-select: none;
+  font-family: Iosevka, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.blk-block { stroke-width: 1; }
+.blk-glyph { text-anchor: middle; dominant-baseline: central; pointer-events: none; }
+.blk-hole-text { text-anchor: middle; dominant-baseline: central; pointer-events: none; font-weight: 600; }
+.blk-hit { fill: transparent; }
+.blk-sel { fill: none; stroke-width: 2; }
+`;
+function el(tag, attrs) {
+  const node = document.createElementNS(SVG_NS2, tag);
+  for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, String(v));
+  return node;
+}
+function measureUnitWidth(fontSize) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (ctx === null) return fontSize * 0.6;
+  ctx.font = `${fontSize}px Iosevka, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`;
+  const w = ctx.measureText("M").width;
+  return w > 0 ? w : fontSize * 0.6;
+}
+function findByPath(boxes, path) {
+  const same = (a) => a.length === path.length && a.every((v, i) => v === path[i]);
+  const walk = (box) => {
+    if (same(box.path)) return box;
+    if (box.kind === "expr")
+      for (const c of box.children) {
+        const hit = walk(c);
+        if (hit !== null) return hit;
+      }
+    return null;
+  };
+  for (const b of boxes) {
+    const hit = walk(b);
+    if (hit !== null) return hit;
+  }
+  return null;
+}
+var BlockRenderer = class {
+  svg;
+  scene;
+  settled = [];
+  pending = null;
+  settledRect = null;
+  raf = 0;
+  // User zoom/pan, layered on top of the auto-fit view box as a transform on the scene group.
+  viewport = { scale: 1, panX: 0, panY: 0 };
+  shownRect = { x: 0, y: 0, w: 1, h: 1 };
+  constructor(container) {
+    this.svg = el("svg", { class: "blk-svg" });
+    const style = document.createElementNS(SVG_NS2, "style");
+    style.textContent = CSS2;
+    this.svg.appendChild(style);
+    this.scene = el("g", { class: "blk-scene" });
+    this.svg.appendChild(this.scene);
+    container.appendChild(this.svg);
+  }
+  /** Redraw the program. When `animate` is set and a previous frame exists, tween into the new one. */
+  render(boxes, s, selectedPath, animate = false) {
+    this.svg.style.background = s.canvas;
+    const next = boxesToPrims(boxes, s, selectedPath);
+    const nextRect = this.rectFor(boxes, s);
+    const canAnimate = animate && this.settled.length > 0 && this.settledRect !== null && typeof requestAnimationFrame !== "undefined";
+    if (!canAnimate) {
+      if (this.raf !== 0) {
+        cancelAnimationFrame(this.raf);
+        this.raf = 0;
+      }
+      this.paint(next);
+      this.setViewBox(nextRect);
+      this.settled = next;
+      this.settledRect = nextRect;
+      this.pending = null;
+      return;
+    }
+    if (this.raf !== 0) {
+      cancelAnimationFrame(this.raf);
+      this.raf = 0;
+      if (this.pending !== null) this.settled = this.pending;
+    }
+    const from = this.settled;
+    const fromRect = this.settledRect ?? nextRect;
+    this.pending = next;
+    const start = performance.now();
+    const step = (now) => {
+      const p = Math.min(1, (now - start) / DURATION);
+      const t = ease(p);
+      this.paint(interpolate(from, next, t));
+      this.setViewBox(lerpRect(fromRect, nextRect, t));
+      if (p < 1) {
+        this.raf = requestAnimationFrame(step);
+      } else {
+        this.raf = 0;
+        this.paint(next);
+        this.setViewBox(nextRect);
+        this.settled = next;
+        this.settledRect = nextRect;
+        this.pending = null;
+      }
+    };
+    this.raf = requestAnimationFrame(step);
+  }
+  paint(prims) {
+    const out = [];
+    for (const p of prims) {
+      if (p.t === "path") {
+        const attrs = {
+          class: p.key === "sel" ? "blk-sel" : "blk-block",
+          d: p.d,
+          transform: `translate(${p.tx} ${p.ty})`,
+          fill: p.fill,
+          stroke: p.stroke,
+          opacity: p.op
+        };
+        if (p.dataPath !== void 0) attrs["data-path"] = p.dataPath;
+        out.push(el("path", attrs));
+      } else if (p.t === "text") {
+        const node = el("text", {
+          class: p.weight ? "blk-hole-text" : "blk-glyph",
+          x: p.x,
+          y: p.y,
+          "font-size": p.size,
+          fill: p.fill,
+          opacity: p.op
+        });
+        node.textContent = p.text;
+        out.push(node);
+      } else {
+        out.push(
+          el("rect", {
+            class: "blk-hit",
+            "data-path": p.dataPath,
+            x: p.x,
+            y: p.y,
+            width: p.w,
+            height: p.h
+          })
+        );
+      }
+    }
+    this.scene.replaceChildren(...out);
+  }
+  setViewBox(r) {
+    this.shownRect = r;
+    this.svg.setAttribute("viewBox", `${r.x} ${r.y} ${r.w} ${r.h}`);
+    this.svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+    this.applyViewport();
+  }
+  /** Apply the user zoom/pan as a transform on the scene group, centered on the shown view box so zoom
+   *  grows toward the middle rather than a corner. Re-applied on every frame (the group survives a repaint
+   *  and keeps its transform), so a zoomed view stays zoomed as the program reduces. */
+  applyViewport() {
+    const { x, y, w, h } = this.shownRect;
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    const { scale, panX, panY } = this.viewport;
+    const tx = cx - cx * scale + panX;
+    const ty = cy - cy * scale + panY;
+    this.scene.setAttribute("transform", `translate(${tx} ${ty}) scale(${scale})`);
+  }
+  /** Zoom in (factor > 1) or out (factor < 1), around the center. */
+  zoomBy(factor) {
+    this.viewport.scale = Math.min(5, Math.max(0.2, this.viewport.scale * factor));
+    this.applyViewport();
+  }
+  /** Pan by a screen-space delta, converted into view-box units through the current fit. */
+  panBy(dx, dy) {
+    const { w, h } = this.shownRect;
+    const sw = this.svg.clientWidth || 800;
+    const sh = this.svg.clientHeight || 440;
+    const fit = Math.min(sw / w, sh / h) || 1;
+    this.viewport.panX += dx / fit;
+    this.viewport.panY += dy / fit;
+    this.applyViewport();
+  }
+  /** Reset zoom/pan so the auto-fit frames the whole program again. */
+  resetViewport() {
+    this.viewport.scale = 1;
+    this.viewport.panX = 0;
+    this.viewport.panY = 0;
+    this.applyViewport();
+  }
+  /** The view box that frames the whole program with padding and room for the selection handle. */
+  rectFor(boxes, s) {
+    if (boxes.length === 0) return { x: 0, y: 0, w: 1, h: 1 };
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const b of boxes) {
+      minX = Math.min(minX, b.x);
+      minY = Math.min(minY, b.y);
+      maxX = Math.max(maxX, b.x + b.w);
+      maxY = Math.max(maxY, b.y + b.h);
+    }
+    const pad = s.unitHeight;
+    const x = minX - pad - s.unitWidth * 2.5;
+    const y = minY - pad;
+    return { x, y, w: maxX - x + pad, h: maxY - y + pad };
+  }
+  destroy() {
+    if (this.raf !== 0) cancelAnimationFrame(this.raf);
+    this.svg.remove();
+  }
+};
+var lerp2 = (a, b, t) => a + (b - a) * t;
+function lerpRect(a, b, t) {
+  return { x: lerp2(a.x, b.x, t), y: lerp2(a.y, b.y, t), w: lerp2(a.w, b.w, t), h: lerp2(a.h, b.h, t) };
+}
+
+// src/block/path.ts
+import { E as E4, ExpressionAtom as ExpressionAtom5 } from "@mettascript/hyperon";
+function atomAtPath(atom, path) {
+  let cur = atom;
+  for (const k of path) {
+    if (!(cur instanceof ExpressionAtom5)) return null;
+    const child = cur.children()[k];
+    if (child === void 0) return null;
+    cur = child;
+  }
+  return cur;
+}
+function replaceAtPath(atom, path, replacement) {
+  if (path.length === 0) return replacement;
+  if (!(atom instanceof ExpressionAtom5)) return atom;
+  const items = atom.children();
+  const [k, ...rest] = path;
+  const child = items[k];
+  if (child === void 0) return atom;
+  const next = [...items];
+  next[k] = replaceAtPath(child, rest, replacement);
+  return E4(...next);
+}
+function reduceAtPath(atom, path, metta) {
+  const target2 = atomAtPath(atom, path);
+  if (target2 === null) return null;
+  const reduced = reduceStep(target2, metta);
+  if (reduced === null) return null;
+  return replaceAtPath(atom, path, reduced[0]);
+}
+
+// src/svg-gif.ts
+async function encodeSvgAnimation(animation, rasterize, lib, maxColors = 128) {
+  const { frames, width, height, background } = animation;
+  if (frames.length === 0) throw new Error("no SVG frames to encode");
+  if (!Number.isInteger(width) || width < 1 || !Number.isInteger(height) || height < 1)
+    throw new Error(`invalid GIF dimensions: ${width}x${height}`);
+  if (!Number.isInteger(maxColors) || maxColors < 2 || maxColors > 256)
+    throw new Error(`maxColors must be an integer from 2 to 256, got ${maxColors}`);
+  const expectedBytes = width * height * 4;
+  const gif = lib.GIFEncoder();
+  for (const frame of frames) {
+    const rgba = await rasterize(frame.svg, width, height, background);
+    if (rgba.byteLength !== expectedBytes)
+      throw new Error(
+        `SVG rasterizer returned ${rgba.byteLength} bytes for ${width}x${height}; expected ${expectedBytes}`
+      );
+    const palette = lib.quantize(rgba, maxColors);
+    gif.writeFrame(lib.applyPalette(rgba, palette), width, height, {
+      palette,
+      delay: frame.delay
+    });
+  }
+  gif.finish();
+  return gif.bytes();
+}
+function browserSvgRasterizer() {
+  let canvas;
+  let context = null;
+  return async (svg, width, height, background) => {
+    if (canvas === void 0) {
+      canvas = document.createElement("canvas");
+      context = canvas.getContext("2d");
+      if (context === null) throw new Error("no 2d canvas context for GIF export");
+    }
+    if (canvas.width !== width) canvas.width = width;
+    if (canvas.height !== height) canvas.height = height;
+    const image = new Image();
+    image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
+    await image.decode();
+    context.fillStyle = background;
+    context.fillRect(0, 0, width, height);
+    context.drawImage(image, 0, 0, width, height);
+    return context.getImageData(0, 0, width, height).data;
+  };
+}
+async function encodeBrowserSvgAnimation(animation, lib, maxColors = 128) {
+  const bytes = await encodeSvgAnimation(animation, browserSvgRasterizer(), lib, maxColors);
+  return new Blob([bytes], { type: "image/gif" });
+}
+
+// src/block/gif.ts
+function framesPerStepFor(opts, transitions) {
+  const wanted = opts.framesPerStep ?? Math.max(1, Math.round((opts.morphMs ?? DEFAULT_TRACE_MS) / (opts.stepMs ?? 40)));
+  return Math.max(
+    1,
+    Math.min(wanted, Math.floor((opts.maxFrames ?? 180) / Math.max(1, transitions)))
+  );
+}
+function boundsOf(boxes, s) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  const walk = (b) => {
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.w);
+    maxY = Math.max(maxY, b.y + b.h);
+    if (b.kind === "expr") for (const c of b.children) walk(c);
+  };
+  for (const b of boxes) walk(b);
+  if (!Number.isFinite(minX)) return { x: 0, y: 0, w: 1, h: 1 };
+  const pad = s.unitHeight;
+  return { x: minX - pad, y: minY - pad, w: maxX - minX + 2 * pad, h: maxY - minY + 2 * pad };
+}
+function union(a, b) {
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  return { x, y, w: Math.max(a.x + a.w, b.x + b.w) - x, h: Math.max(a.y + a.h, b.y + b.h) - y };
+}
+function esc(t) {
+  return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+var round = (n) => Math.round(n * 1e3) / 1e3;
+var FONT = "Iosevka, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+function frameSvg(prims, vb, w, h, bg) {
+  const parts = [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="${round(vb.x)} ${round(vb.y)} ${round(vb.w)} ${round(vb.h)}">`,
+    `<rect x="${round(vb.x)}" y="${round(vb.y)}" width="${round(vb.w)}" height="${round(vb.h)}" fill="${bg}"/>`
+  ];
+  for (const p of prims) {
+    if (p.t === "path") {
+      parts.push(
+        `<path d="${p.d}" transform="translate(${round(p.tx)} ${round(p.ty)})" fill="${p.fill}" stroke="${p.stroke}" stroke-width="1" opacity="${round(p.op)}"/>`
+      );
+    } else if (p.t === "text") {
+      const weight = p.weight ? ' font-weight="600"' : "";
+      parts.push(
+        `<text x="${round(p.x)}" y="${round(p.y)}" font-size="${p.size}" fill="${p.fill}" opacity="${round(p.op)}" text-anchor="middle" dominant-baseline="central" font-family="${FONT}"${weight}>${esc(p.text)}</text>`
+      );
+    }
+  }
+  parts.push("</svg>");
+  return parts.join("");
+}
+function blockReductionSvgsWithSettings(states, s, opts = {}) {
+  if (states.length === 0) throw new Error("no reduction states to export");
+  const width = opts.width ?? 720;
+  const holdMs = opts.holdMs ?? 260;
+  const stepMs = opts.stepMs ?? 40;
+  const framePrims = states.map((frontier) => boxesToPrims(placeProgram(frontier, s), s, null));
+  let vb = boundsOf(placeProgram(states[0], s), s);
+  for (const frontier of states) vb = union(vb, boundsOf(placeProgram(frontier, s), s));
+  const height = Math.max(1, Math.round(width * vb.h / vb.w));
+  const background = opts.background ?? s.canvas;
+  const frames = [];
+  const n = states.length;
+  const perStep = framesPerStepFor(opts, n - 1);
+  frames.push({ svg: frameSvg(framePrims[0], vb, width, height, background), delay: holdMs });
+  for (let i = 1; i < n; i++) {
+    for (let k = 1; k <= perStep; k++) {
+      const prims = interpolate(framePrims[i - 1], framePrims[i], ease(k / perStep));
+      frames.push({
+        svg: frameSvg(prims, vb, width, height, background),
+        delay: k === perStep ? holdMs : stepMs
+      });
+    }
+  }
+  return { frames, width, height, background };
+}
+async function reductionGif(states, s, lib, opts = {}) {
+  return encodeBrowserSvgAnimation(blockReductionSvgsWithSettings(states, s, opts), lib, 256);
+}
+
+// src/sidebyside-gif.ts
+var VP = { scale: 1, panX: 0, panY: 0 };
+var round2 = (n) => Math.round(n * 100) / 100;
+function traceBounds(frame) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const s of frame.slots) {
+    minX = Math.min(minX, s.x - s.radius);
+    minY = Math.min(minY, s.y - s.radius);
+    maxX = Math.max(maxX, s.x + s.radius);
+    maxY = Math.max(maxY, s.y + s.radius);
+  }
+  if (!Number.isFinite(minX)) return { x: 0, y: 0, w: 1, h: 1 };
+  return {
+    x: minX - NODE_H,
+    y: minY - NODE_H,
+    w: maxX - minX + 2 * NODE_H,
+    h: maxY - minY + 2 * NODE_H
+  };
+}
+function graphTraceSvg(trace, vb, w, h, bg) {
+  const parts = [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="${round2(vb.x)} ${round2(vb.y)} ${round2(vb.w)} ${round2(vb.h)}">`,
+    `<rect x="${round2(vb.x)}" y="${round2(vb.y)}" width="${round2(vb.w)}" height="${round2(vb.h)}" fill="${bg}"/>`
+  ];
+  for (const e of trace.edges) {
+    parts.push(
+      `<line x1="${round2(e.x1)}" y1="${round2(e.y1)}" x2="${round2(e.x2)}" y2="${round2(e.y2)}" stroke="${e.colorB || "#6e7681"}" stroke-width="2" stroke-opacity="${round2(e.op)}"/>`
+    );
+  }
+  for (const p of trace.nodes) {
+    const pts = p.points.map(([x, y]) => `${round2(p.x + x)},${round2(p.y + y)}`).join(" ");
+    parts.push(
+      `<polygon points="${pts}" fill="${p.fill}" fill-opacity="${round2(p.fillOp * p.op)}" stroke="${p.fill}" stroke-opacity="${round2((1 - p.fillOp * 0.7) * p.op)}" stroke-width="2"/>`
+    );
+    for (const tx of p.texts) {
+      parts.push(
+        `<text x="${round2(p.x)}" y="${round2(p.y)}" font-size="13" fill="${tx.color}" opacity="${round2(tx.op * p.op)}" text-anchor="middle" dominant-baseline="central" font-family="${FONT}">${esc(tx.text)}</text>`
+      );
+    }
+  }
+  parts.push("</svg>");
+  return parts.join("");
+}
+async function sideBySideReductionGif(states, s, lib, opts = {}) {
+  return encodeBrowserSvgAnimation(sideBySideReductionSvgs(states, opts, s), lib, 128);
+}
+function sideBySideReductionSvgs(states, opts = {}, s = makeSettings(17, 10)) {
+  if (states.length < 2)
+    throw new Error("need at least two reduction states for a side-by-side GIF");
+  const holdMs = opts.holdMs ?? 260;
+  const stepMs = opts.stepMs ?? 40;
+  const blockPrims = states.map((f2) => boxesToPrims(placeProgram(f2, s), s, null));
+  let blockVb = boundsOf(placeProgram(states[0], s), s);
+  for (const f2 of states) blockVb = union(blockVb, boundsOf(placeProgram(f2, s), s));
+  const graphFrames = states.map((f2) => traceFrame(atomToGraph(f2), VP));
+  let graphVb = traceBounds(graphFrames[0]);
+  for (const gf of graphFrames) graphVb = union(graphVb, traceBounds(gf));
+  const cellAspect = Math.sqrt(graphVb.w / graphVb.h * (blockVb.w / blockVb.h));
+  const naturalPanelH = 340;
+  const naturalGap = 28;
+  const naturalLabelH = 30;
+  const naturalCellW = Math.max(1, Math.round(naturalPanelH * cellAspect));
+  const naturalWidth = naturalCellW * 2 + naturalGap;
+  const scale = (opts.width ?? naturalWidth) / naturalWidth;
+  const panelH = Math.max(1, Math.round(naturalPanelH * scale));
+  const gap = Math.max(1, Math.round(naturalGap * scale));
+  const labelH = Math.max(1, Math.round(naturalLabelH * scale));
+  const cellW = Math.max(1, Math.round(naturalCellW * scale));
+  const totalW = cellW + gap + cellW;
+  const totalH = panelH + labelH;
+  const background = opts.background ?? s.canvas;
+  const fontSize = Math.max(8, Math.round(13 * scale));
+  const frames = [];
+  const addFrame = (bp, gt, delay) => {
+    const graph = graphTraceSvg(gt, graphVb, cellW, panelH, background);
+    const blocks = frameSvg(bp, blockVb, cellW, panelH, background);
+    const graphUri = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(graph);
+    const blocksUri = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(blocks);
+    frames.push({
+      delay,
+      svg: `<svg xmlns="http://www.w3.org/2000/svg" width="${totalW}" height="${totalH}" viewBox="0 0 ${totalW} ${totalH}"><rect width="${totalW}" height="${totalH}" fill="${background}"/><text x="${cellW / 2}" y="${labelH / 2}" font-size="${fontSize}" font-weight="600" fill="#8b949e" text-anchor="middle" dominant-baseline="central" font-family="${FONT}">graph</text><text x="${cellW + gap + cellW / 2}" y="${labelH / 2}" font-size="${fontSize}" font-weight="600" fill="#8b949e" text-anchor="middle" dominant-baseline="central" font-family="${FONT}">blocks</text><image href="${graphUri}" x="0" y="${labelH}" width="${cellW}" height="${panelH}"/><image href="${blocksUri}" x="${cellW + gap}" y="${labelH}" width="${cellW}" height="${panelH}"/></svg>`
+    });
+  };
+  const n = states.length;
+  const perStep = framesPerStepFor(opts, n - 1);
+  addFrame(blockPrims[0], interpolateTrace(graphFrames[0], graphFrames[0], 0), holdMs);
+  for (let i = 1; i < n; i++) {
+    for (let k = 1; k <= perStep; k++) {
+      const t = ease(k / perStep);
+      const bp = interpolate(blockPrims[i - 1], blockPrims[i], t);
+      const gt = interpolateTrace(graphFrames[i - 1], graphFrames[i], t);
+      addFrame(bp, gt, k === perStep ? holdMs : stepMs);
+    }
+  }
+  return { frames, width: totalW, height: totalH, background };
+}
+function graphReductionSvgs(states, opts = {}) {
+  if (states.length < 2) throw new Error("need at least two reduction states for a graph GIF");
+  const bg = opts.background ?? CANVAS_BG;
+  const holdMs = opts.holdMs ?? 260;
+  const stepMs = opts.stepMs ?? 40;
+  const width = opts.width ?? 880;
+  const height = Math.round(width * 0.5);
+  const frames = states.map((f2) => {
+    const fr = traceFrame(atomToGraph(f2), VP);
+    const b = traceBounds(fr);
+    const scale = Math.max(0.68, Math.min(Math.min(width / b.w, height / b.h), 1));
+    const viewport = {
+      scale,
+      panX: width / 2 - (b.x + b.w / 2) * scale,
+      panY: height / 2 - (b.y + b.h / 2) * scale
+    };
+    return { ...fr, viewport };
+  });
+  const out = [];
+  const push2 = (gt, delay) => {
+    const v = gt.viewport;
+    const vb = {
+      x: -v.panX / v.scale,
+      y: -v.panY / v.scale,
+      w: width / v.scale,
+      h: height / v.scale
+    };
+    out.push({ svg: graphTraceSvg(gt, vb, width, height, bg), delay });
+  };
+  const n = states.length;
+  const perStep = framesPerStepFor(opts, n - 1);
+  push2(interpolateTrace(frames[0], frames[0], 0), holdMs);
+  for (let i = 1; i < n; i++) {
+    for (let k = 1; k <= perStep; k++) {
+      const t = ease(k / perStep);
+      push2(interpolateTrace(frames[i - 1], frames[i], t), k === perStep ? holdMs : stepMs);
+    }
+  }
+  return { frames: out, width, height, background: bg };
+}
+async function graphReductionGif(states, lib, opts = {}) {
+  return encodeBrowserSvgAnimation(graphReductionSvgs(states, opts), lib, 128);
+}
+function blockReductionSvgs(states, opts = {}) {
+  if (states.length < 2) throw new Error("need at least two reduction states for a block GIF");
+  return blockReductionSvgsWithSettings(states, makeSettings(17, 10), opts);
+}
+
+// src/block/view.ts
+var FONT_SIZE = 17;
+var CARET = "\u258F";
+function samePath(a, b) {
+  return a.length === b.length && a.every((v, i) => v === b[i]);
+}
+var BlockView = class {
+  renderer;
+  getSpace;
+  palette = SITE_PALETTE;
+  settings = null;
+  atoms = [];
+  boxes = [];
+  selectedPath = null;
+  editing = null;
+  readonlyMode = false;
+  history = [];
+  onChange;
+  constructor(container, getSpace, onChange = () => {
+  }) {
+    this.renderer = new BlockRenderer(container);
+    this.getSpace = getSpace;
+    this.onChange = onChange;
+    this.renderer.svg.setAttribute("tabindex", "0");
+    this.renderer.svg.addEventListener("pointerdown", this.onPointerDown);
+    this.renderer.svg.addEventListener("keydown", this.onKeyDown);
+    this.hide();
+  }
+  ensureSettings() {
+    if (this.settings === null)
+      this.settings = makeSettings(FONT_SIZE, measureUnitWidth(FONT_SIZE), this.palette);
+    return this.settings;
+  }
+  /** Recolor the view with a different palette. */
+  setPalette(palette) {
+    this.palette = palette;
+    this.settings = null;
+    this.render();
+  }
+  /** Load a program to edit and reduce interactively. */
+  setAtoms(atoms) {
+    this.atoms = [...atoms];
+    this.history.length = 0;
+    this.selectedPath = null;
+    this.editing = null;
+    this.readonlyMode = false;
+    this.renderer.resetViewport();
+    this.render();
+  }
+  /** Zoom the view in (factor > 1) or out (factor < 1). */
+  zoomBy(factor) {
+    this.renderer.zoomBy(factor);
+  }
+  /** Pan the view by a screen-space delta. */
+  panBy(dx, dy) {
+    this.renderer.panBy(dx, dy);
+  }
+  /** Reset zoom/pan so the whole program is framed again. */
+  fitView() {
+    this.renderer.resetViewport();
+  }
+  /** Frame the given atoms without interaction (used for a step-through playthrough). */
+  showReadonly(atoms) {
+    this.atoms = [...atoms];
+    this.selectedPath = null;
+    this.editing = null;
+    this.readonlyMode = true;
+    this.render(true);
+  }
+  render(animate = false) {
+    const s = this.ensureSettings();
+    let atoms = this.atoms;
+    if (this.editing !== null) {
+      const { path, buffer } = this.editing;
+      const head = path[0];
+      if (head !== void 0 && this.atoms[head] !== void 0)
+        atoms = this.atoms.map(
+          (a, i) => i === head ? replaceAtPath(a, path.slice(1), S4(buffer + CARET)) : a
+        );
+    }
+    this.boxes = placeProgram(atoms, s);
+    this.renderer.render(this.boxes, s, this.editing?.path ?? this.selectedPath, animate);
+  }
+  /** The current program as source, reflecting any edits and reductions. */
+  sourceText() {
+    return this.atoms.map((a) => a.toString()).join("\n");
+  }
+  /** Encode a sequence of reduction states as an animated GIF, using a caller-supplied encoder (gifenc),
+   *  so the package needs no GIF dependency of its own. */
+  async exportGif(states, lib, opts) {
+    return reductionGif(states, this.ensureSettings(), lib, opts);
+  }
+  /** Encode a reduction as one GIF that plays it in both the graph and the block views side by side. Shares
+   *  the block layout settings so the two panels agree on the canvas color and fonts. */
+  async exportSideBySideGif(states, lib, opts) {
+    return sideBySideReductionGif(states, this.ensureSettings(), lib, opts);
+  }
+  show() {
+    this.renderer.svg.style.display = "block";
+    this.render();
+  }
+  hide() {
+    this.renderer.svg.style.display = "none";
+  }
+  destroy() {
+    this.renderer.svg.removeEventListener("pointerdown", this.onPointerDown);
+    this.renderer.svg.removeEventListener("keydown", this.onKeyDown);
+    this.renderer.destroy();
+  }
+  pathFromEvent(e) {
+    const target2 = e.target;
+    if (!(target2 instanceof Element)) return null;
+    const raw = target2.closest("[data-path]")?.getAttribute("data-path");
+    if (raw === null || raw === void 0) return null;
+    try {
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) ? parsed : null;
+    } catch {
+      return null;
+    }
+  }
+  /** The leaf text at `path`, or null when the term is a form (not editable as text). */
+  leafText(path) {
+    const box = findByPath(this.boxes, path);
+    if (box === null) return null;
+    return box.kind === "atom" || box.kind === "hole" ? box.text : null;
+  }
+  lastPath = null;
+  lastClickTime = 0;
+  onPointerDown = (e) => {
+    if (this.readonlyMode) return;
+    const path = this.pathFromEvent(e);
+    const now = performance.now();
+    const isDouble = path !== null && this.lastPath !== null && samePath(path, this.lastPath) && now - this.lastClickTime < 350;
+    this.lastPath = path;
+    this.lastClickTime = now;
+    if (this.editing !== null) this.commitEdit();
+    this.selectedPath = path;
+    this.renderer.svg.focus({ preventScroll: true });
+    if (isDouble && path !== null) {
+      if (this.leafText(path) !== null) this.startEdit(false);
+      else this.reduceSelected();
+      return;
+    }
+    this.render();
+  };
+  /** Begin editing the selected leaf. When `replace` is set the buffer starts empty (typing replaces the
+   *  term); otherwise it starts from the current text (typing extends it). */
+  startEdit(replace, seed = "") {
+    if (this.selectedPath === null) return;
+    const text = this.leafText(this.selectedPath);
+    if (text === null) return;
+    this.editing = { path: this.selectedPath, buffer: replace ? seed : text + seed };
+    this.render();
+  }
+  /** Commit the edit: re-parse the buffer into an atom and splice it back into the program. */
+  commitEdit() {
+    if (this.editing === null) return;
+    const { path, buffer } = this.editing;
+    this.editing = null;
+    const text = buffer.trim();
+    const head = path[0];
+    if (text.length > 0 && head !== void 0 && this.atoms[head] !== void 0) {
+      const parsed = parseLeaf(text) ?? S4(text);
+      this.history.push([...this.atoms]);
+      this.atoms = this.atoms.map(
+        (a, i) => i === head ? replaceAtPath(a, path.slice(1), parsed) : a
+      );
+      this.selectedPath = path;
+      this.onChange();
+    }
+    this.render();
+  }
+  cancelEdit() {
+    this.editing = null;
+    this.render();
+  }
+  /** Reduce the selected term one step in place. Returns whether anything changed. */
+  reduceSelected() {
+    if (this.readonlyMode || this.editing !== null || this.selectedPath === null) return false;
+    const path = this.selectedPath;
+    const head = path[0];
+    if (head === void 0) return false;
+    const target2 = this.atoms[head];
+    if (target2 === void 0) return false;
+    const reduced = reduceAtPath(target2, path.slice(1), this.getSpace());
+    if (reduced === null) return false;
+    this.history.push([...this.atoms]);
+    this.atoms = this.atoms.map((a, i) => i === head ? reduced : a);
+    if (findByPath(placeProgram(this.atoms, this.ensureSettings()), path) === null)
+      this.selectedPath = null;
+    this.render(true);
+    this.onChange();
+    return true;
+  }
+  /** Step back to the program before the last reduction or edit. */
+  back() {
+    const prev = this.history.pop();
+    if (prev === void 0) return false;
+    this.atoms = prev;
+    this.editing = null;
+    this.render(true);
+    this.onChange();
+    return true;
+  }
+  canStepBack() {
+    return this.history.length > 0;
+  }
+  onKeyDown = (e) => {
+    if (this.readonlyMode) return;
+    if (this.editing !== null) {
+      this.onEditKey(e);
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (this.selectedPath !== null && this.leafText(this.selectedPath) !== null)
+        this.startEdit(false);
+      else this.reduceSelected();
+      return;
+    }
+    if (e.key.startsWith("Arrow")) {
+      e.preventDefault();
+      const next = this.navigate(e.key);
+      if (next !== null) {
+        this.selectedPath = next;
+        this.render();
+      }
+      return;
+    }
+    if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      if (this.selectedPath !== null && this.leafText(this.selectedPath) !== null) {
+        e.preventDefault();
+        this.startEdit(true, e.key);
+      }
+    }
+  };
+  onEditKey(e) {
+    if (this.editing === null) return;
+    if (e.key === "Enter") {
+      e.preventDefault();
+      this.commitEdit();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      this.cancelEdit();
+    } else if (e.key === "Backspace") {
+      e.preventDefault();
+      this.editing = { path: this.editing.path, buffer: this.editing.buffer.slice(0, -1) };
+      this.render();
+    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      e.preventDefault();
+      this.editing = { path: this.editing.path, buffer: this.editing.buffer + e.key };
+      this.render();
+    }
+  }
+  /** Every box path in preorder (a term before its children). */
+  preorder() {
+    const out = [];
+    const walk = (b) => {
+      out.push(b.path);
+      if (b.kind === "expr") for (const c of b.children) walk(c);
+    };
+    for (const b of this.boxes) walk(b);
+    return out;
+  }
+  /** Move the cursor: right and left step through the tree in preorder, down enters the first child, up
+   *  returns to the parent. */
+  navigate(key) {
+    if (this.selectedPath === null) return this.boxes[0]?.path ?? null;
+    const path = this.selectedPath;
+    if (key === "ArrowUp") return path.length > 1 ? path.slice(0, -1) : path;
+    if (key === "ArrowDown") {
+      const box = findByPath(this.boxes, path);
+      return box?.kind === "expr" ? box.children[0]?.path ?? path : path;
+    }
+    const list = this.preorder();
+    const i = list.findIndex((p) => samePath(p, path));
+    if (i < 0) return path;
+    if (key === "ArrowRight") return list[i + 1] ?? path;
+    if (key === "ArrowLeft") return list[i - 1] ?? path;
+    return path;
+  }
+};
+
+// src/viz.ts
+import { ExpressionAtom as ExpressionAtom6, atomIsError as atomIsError2 } from "@mettascript/hyperon";
+var VIZ_SPACE = "&grapher";
+function bindVizSpace(space) {
+  space.run(`!(bind! ${VIZ_SPACE} (new-space))`);
+}
+function readViz(space) {
+  const results = space.run(`!(get-atoms ${VIZ_SPACE})`)[0] ?? [];
+  const directives = [];
+  const mappers = [];
+  let background = null;
+  for (const r of results) {
+    if (atomIsError2(r)) continue;
+    const bg = parseBackground(r);
+    if (bg !== null) {
+      background = bg;
+      continue;
+    }
+    const mapper = parseMapper(r);
+    if (mapper !== null) {
+      mappers.push(mapper);
+      continue;
+    }
+    const directive = parseDirective(r);
+    if (directive !== null) directives.push(directive);
+  }
+  return { directives, mappers, background };
+}
+function parseBackground(atom) {
+  if (!(atom instanceof ExpressionAtom6)) return null;
+  const items = atom.children();
+  return items.length === 2 && items[0]?.toString() === "background" && items[1] !== void 0 ? colorOf(items[1]) : null;
+}
+function parseDirective(atom) {
+  if (!(atom instanceof ExpressionAtom6)) return null;
+  const items = atom.children();
+  const head = items[0]?.toString();
+  const target2 = items[1];
+  if (target2 === void 0) return null;
+  if (head === "highlight" && items.length === 2) return { kind: "highlight", target: target2 };
+  if (head === "focus" && items.length === 2) return { kind: "focus", target: target2 };
+  const arg = items[2];
+  if (head === "color" && arg !== void 0) return { kind: "color", target: target2, arg };
+  if (head === "label" && arg !== void 0) return { kind: "label", target: target2, arg };
+  if (head === "size" && arg !== void 0) {
+    const value = numberOf(arg);
+    if (value !== null) return { kind: "size", target: target2, value };
+  }
+  if (head === "shade" && arg !== void 0) {
+    const value = numberOf(arg);
+    if (value !== null) return { kind: "shade", target: target2, value };
+  }
+  return null;
+}
+function parseMapper(atom) {
+  if (!(atom instanceof ExpressionAtom6)) return null;
+  const items = atom.children();
+  const func = items[1];
+  if (items.length !== 2 || func === void 0) return null;
+  const head = items[0]?.toString();
+  if (head === "shade-by") return { property: "shade", func };
+  if (head === "size-by") return { property: "size", func };
+  return null;
+}
+function numberOf(atom) {
+  const n = Number(atom.toString());
+  return Number.isFinite(n) ? n : null;
+}
+var NAMED = {
+  red: "#f85149",
+  green: "#3fb950",
+  blue: "#58a6ff",
+  yellow: "#f2cc60",
+  orange: "#ffa657",
+  purple: "#d2a8ff",
+  cyan: "#39c5cf",
+  pink: "#f778ba",
+  white: "#ffffff",
+  black: "#0d1117",
+  gray: "#8b949e",
+  grey: "#8b949e"
+};
+function colorOf(atom) {
+  const s = atom.toString().replace(/^"|"$/g, "");
+  const named = NAMED[s.toLowerCase()];
+  if (named !== void 0) return named;
+  if (/^#[0-9a-fA-F]{3,8}$/.test(s)) return s;
+  return NAMED.yellow;
+}
+function textOf(atom) {
+  return atom.toString().replace(/^"|"$/g, "");
+}
+function normalizeRange(vals, lo, hi) {
+  if (vals.length === 0) return [];
+  let min = Infinity;
+  let max = -Infinity;
+  for (const [, v] of vals) {
+    if (v < min) min = v;
+    if (v > max) max = v;
+  }
+  const span = max - min;
+  return vals.map(([id, v]) => [
+    id,
+    span === 0 ? (lo + hi) / 2 : lo + (v - min) / span * (hi - lo)
+  ]);
+}
+
+// src/editor.ts
+var NO_VIZ = /* @__PURE__ */ new Map();
+var NO_SELECTION = /* @__PURE__ */ new Set();
+var NO_LABELS = /* @__PURE__ */ new Map();
+function referencesGrapher(a) {
+  if (a.toString() === VIZ_SPACE) return true;
+  return a instanceof ExpressionAtom7 && a.children().some(referencesGrapher);
+}
+function styleBlockDirectives(a) {
+  if (!(a instanceof ExpressionAtom7)) return null;
+  const items = a.children();
+  return items[0]?.toString() === "style" ? items.slice(1) : null;
+}
+function bareDirective(a) {
+  if (a instanceof ExpressionAtom7) {
+    const items = a.children();
+    if (items.length === 3 && items[0]?.toString() === "add-atom" && items[1]?.toString() === VIZ_SPACE)
+      return items[2];
+  }
+  return a;
+}
+function firstNumber(results) {
+  for (const r of results) {
+    const n = numberOf(r);
+    if (n !== null) return n;
+  }
+  return null;
+}
+var MeTTaGrapher = class {
+  container;
+  metta;
+  /** Whether a left-drag on empty canvas pans (part of {@link ControllerHost}). */
+  panOnLeftDrag;
+  graph = new Graph();
+  viewport = initialViewport();
+  selection = /* @__PURE__ */ new Set();
+  primaryId = null;
+  labels = /* @__PURE__ */ new Map();
+  /** Per-node overlays (color, highlight, label) driven by MeTTa directives in the `&grapher` space. */
+  viz = /* @__PURE__ */ new Map();
+  vizFocus = /* @__PURE__ */ new Set();
+  vizBound = false;
+  /** The `&grapher` directives from the last loaded source, kept so `toSource` can round-trip them under a
+   *  comment even though they are not drawn as nodes. */
+  vizDirectives = [];
+  renderer;
+  controller;
+  changeCbs = /* @__PURE__ */ new Set();
+  sharedSpace;
+  program = null;
+  programDirty = true;
+  // Each state is a frontier: the set of terms currently reducing. A nondeterministic step widens it, so
+  // every branch is shown at once. Deterministic traces stay one term wide.
+  trace = null;
+  traceIndex = 0;
+  traceGraph = null;
+  /** Which view is showing: the node graph, or the nested-block ("block") view. */
+  viewMode = "graph";
+  block;
+  /** The rendered SVG element (part of {@link ControllerHost}). */
+  get svg() {
+    return this.renderer.svg;
+  }
+  constructor(container, opts = {}) {
+    this.container = container;
+    if (container.style.position === "") container.style.position = "relative";
+    this.sharedSpace = opts.metta !== void 0;
+    this.metta = opts.metta ?? new MeTTa2();
+    this.panOnLeftDrag = opts.panOnLeftDrag ?? false;
+    this.renderer = new Renderer(container);
+    this.controller = new Controller(this);
+    this.block = new BlockView(
+      container,
+      () => this.evalSpace(),
+      () => this.notifyBlock()
+    );
+    if (opts.source !== void 0) this.graph = fromSource(opts.source);
+    this.render();
+  }
+  /** The space to evaluate against. A provided engine is used as-is (a shared, persistent space);
+   *  otherwise the whole canvas is loaded into a fresh space so its rules and facts are active, rebuilt
+   *  lazily when the graph has changed. */
+  evalSpace() {
+    if (this.sharedSpace) {
+      if (!this.vizBound) {
+        bindVizSpace(this.metta);
+        this.vizBound = true;
+      }
+      return this.metta;
+    }
+    if (this.program === null || this.programDirty) {
+      this.program = loadProgram(this.graph);
+      bindVizSpace(this.program);
+      this.programDirty = false;
+    }
+    return this.program;
+  }
+  /** Redraw from the current state. During a playthrough the reduction graph is shown, without the
+   *  editing selection or evaluation labels. */
+  render() {
+    if (this.viewMode === "block") {
+      this.block.render();
+      return;
+    }
+    if (this.traceGraph !== null) {
+      this.renderer.showTrace(this.traceState(), false);
+      return;
+    }
+    this.renderer.render({
+      graph: this.graph,
+      viewport: this.viewport,
+      selection: this.selection,
+      labels: this.labels,
+      primaryId: this.primaryId,
+      viz: this.viz
+    });
+  }
+  /** The render state for a playthrough step: the reduction graph, without editing chrome. */
+  traceState() {
+    return {
+      graph: this.traceGraph ?? this.graph,
+      viewport: this.viewport,
+      selection: NO_SELECTION,
+      labels: NO_LABELS,
+      primaryId: null,
+      viz: NO_VIZ
+    };
+  }
+  /** Notify onChange subscribers that the graph changed. */
+  changed() {
+    this.programDirty = true;
+    for (const cb of this.changeCbs) cb(this.graph);
+  }
+  /** Completion candidates for the node-creation input, including the program's own defined symbols. */
+  completions(prefix) {
+    return completionsFor(prefix, this.evalSpace());
+  }
+  /** Evaluate every head the node belongs to and label each with its result. */
+  evaluate(nodeId) {
+    const space = this.evalSpace();
+    for (const head of this.graph.findHeads(nodeId)) this.labelHead(head, space);
+    this.applyViz(space);
+    this.render();
+    this.focusViz();
+  }
+  /** Evaluate every head in the graph. */
+  evaluateAll() {
+    const space = this.evalSpace();
+    for (const head of this.graph.heads()) this.labelHead(head, space);
+    this.applyViz(space);
+    this.render();
+    this.focusViz();
+  }
+  /** Read the `&grapher` space's directives and turn them into per-node overlays and a focus set. */
+  applyViz(space) {
+    this.viz.clear();
+    this.vizFocus.clear();
+    const skip = this.directiveNodeIds();
+    const { directives, mappers, background } = readViz(space);
+    const sizeVals = [];
+    const shadeVals = [];
+    for (const d of directives) {
+      for (const id of this.matchNodes(d.target, skip)) {
+        if (d.kind === "color" && d.arg !== void 0) this.mergeViz(id, { color: colorOf(d.arg) });
+        else if (d.kind === "highlight") this.mergeViz(id, { highlight: true });
+        else if (d.kind === "label" && d.arg !== void 0)
+          this.mergeViz(id, { label: textOf(d.arg) });
+        else if (d.kind === "focus") this.vizFocus.add(id);
+        else if (d.kind === "size" && d.value !== void 0) sizeVals.push([id, d.value]);
+        else if (d.kind === "shade" && d.value !== void 0) shadeVals.push([id, d.value]);
+      }
+    }
+    for (const m of mappers) this.applyMapper(space, m);
+    for (const [id, s] of normalizeRange(sizeVals, 0.8, 2)) this.mergeViz(id, { sizeScale: s });
+    for (const [id, t] of normalizeRange(shadeVals, 0, 1))
+      this.mergeViz(id, { color: heatColor(t) });
+    if ([...this.viz.values()].some((o) => o.sizeScale !== void 0))
+      layout(this.graph, { scaleOf: (node) => this.viz.get(node.id)?.sizeScale ?? 1 });
+    this.renderer.setBackground(background ?? CANVAS_BG);
+  }
+  mergeViz(id, patch) {
+    this.viz.set(id, { ...this.viz.get(id), ...patch });
+  }
+  /** Apply one `(shade-by FUNC)` / `(size-by FUNC)` mapper: value each node by evaluating `(FUNC node)`, then
+   *  normalize the values across the graph and colour or size the nodes that produced a number. */
+  applyMapper(space, m) {
+    const vals = [];
+    for (const node of this.graph.nodes.values()) {
+      const atom = composeAtom(this.graph, node.id);
+      if (atom === null) continue;
+      let results;
+      try {
+        results = space.evaluateAtom(E5(m.func, atom));
+      } catch {
+        continue;
+      }
+      const v = firstNumber(results);
+      if (v !== null) vals.push([node.id, v]);
+    }
+    if (m.property === "shade")
+      for (const [id, t] of normalizeRange(vals, 0, 1)) this.mergeViz(id, { color: heatColor(t) });
+    else for (const [id, s] of normalizeRange(vals, 0.8, 2)) this.mergeViz(id, { sizeScale: s });
+  }
+  /** The nodes a directive target names: by node name, else by the atom the node composes to. Nodes that
+   *  are part of a `&grapher` directive expression are skipped, so `(color (fact 5) red)` colors the query
+   *  node and not the `(fact 5)` written inside the directive itself. */
+  matchNodes(target2, skip) {
+    const t = target2.toString();
+    const out = [];
+    for (const node of this.graph.nodes.values()) {
+      if (skip.has(node.id)) continue;
+      if (node.name === t) {
+        out.push(node.id);
+        continue;
+      }
+      const atom = composeAtom(this.graph, node.id);
+      if (atom !== null && atom.toString() === t) out.push(node.id);
+    }
+    return out;
+  }
+  /** Every node inside a head that operates on `&grapher` (`(add-atom &grapher …)` and friends): the
+   *  directives' own plumbing, which should not be matched or colored. */
+  directiveNodeIds() {
+    const skip = /* @__PURE__ */ new Set();
+    const collect = (id) => {
+      if (skip.has(id)) return;
+      skip.add(id);
+      for (const c of this.graph.childrenOf(id)) collect(c);
+    };
+    for (const head of this.graph.heads())
+      if (this.graph.sortedChildren(head.id)[0]?.name === "&grapher") collect(head.id);
+    return skip;
+  }
+  /** Frame the focused nodes (graph view), if any directive asked to focus. */
+  focusViz() {
+    if (this.viewMode !== "graph" || this.vizFocus.size === 0) return;
+    const nodes = [...this.vizFocus].map((id) => this.graph.nodes.get(id)).filter((n) => n !== void 0);
+    if (nodes.length === 0) return;
+    const xs = nodes.map((n) => n.x);
+    const ys = nodes.map((n) => n.y);
+    const minX = Math.min(...xs) - 80;
+    const maxX = Math.max(...xs) + 80;
+    const minY = Math.min(...ys) - 60;
+    const maxY = Math.max(...ys) + 60;
+    const w = this.container.clientWidth || 800;
+    const h = this.container.clientHeight || 440;
+    const pad = 48;
+    const fit = Math.min((w - pad * 2) / (maxX - minX), (h - pad * 2) / (maxY - minY));
+    const scale = Math.min(1.8, Math.max(0.2, fit));
+    this.viewport = {
+      scale,
+      panX: (w - (minX + maxX) * scale) / 2,
+      panY: (h - (minY + maxY) * scale) / 2
+    };
+    this.render();
+  }
+  /** Evaluate one head and store its result label, unless the head is inert: a definition `(= ...)` or any
+   *  atom that reduces to itself (a fact, a type declaration). Only genuine queries get a label. */
+  labelHead(head, space) {
+    if (head.name === "=") return;
+    const atom = composeAtom(this.graph, head.id);
+    if (atom === null) return;
+    const result = evaluateHead(this.graph, head.id, space);
+    if (result.atoms.length === 1 && result.atoms[0].equals(atom)) return;
+    this.labels.set(head.id, { text: result.label, error: result.error });
+  }
+  /** Load a graph from JSON. */
+  load(json) {
+    this.graph = fromJson(json);
+    this.afterLoad();
+  }
+  /** Load a graph by parsing MeTTa source. A top-level `(style ...)` block, and any explicit `(add-atom
+   *  &grapher ...)`, are the stylesheet, not content: their directives are run into the isolated `&grapher`
+   *  space, kept out of the drawn graph, and their overlays painted onto the content. */
+  loadSource(src) {
+    const directives = [];
+    const content = [];
+    for (const a of parseProgram(src)) {
+      const styled = styleBlockDirectives(a);
+      if (styled !== null) directives.push(...styled);
+      else if (referencesGrapher(a)) directives.push(a);
+      else content.push(a);
+    }
+    this.graph = atomToGraph(content);
+    this.afterLoad();
+    if (directives.length === 0) return;
+    this.vizDirectives = directives.map(bareDirective);
+    const space = this.evalSpace();
+    for (const d of directives) {
+      const bare = bareDirective(d);
+      if (bare === d && referencesGrapher(d)) space.run(`!${d.toString()}`);
+      else space.run(`!(add-atom ${VIZ_SPACE} ${bare.toString()})`);
+    }
+    this.applyViz(space);
+    this.render();
+    this.focusViz();
+  }
+  /** Load a program from atoms (for example built with the eDSL), laid out as tidy trees. */
+  loadAtoms(atoms) {
+    this.graph = atomToGraph([...atoms]);
+    this.afterLoad();
+  }
+  /** Recolor the block view with a different palette. */
+  setBlockPalette(palette) {
+    this.block.setPalette(palette);
+  }
+  /** Snapshot the graph to JSON. */
+  save() {
+    return toJson(this.graph);
+  }
+  /** Render the graph as MeTTa source. */
+  toSource() {
+    const program = toSource(this.graph);
+    if (this.vizDirectives.length === 0) return program;
+    const lines = this.vizDirectives.map((d) => `  ${d.toString()}`).join("\n");
+    return `${program}
+
+(style
+${lines})`;
+  }
+  /** Compose the graph's heads into atoms. */
+  atoms() {
+    return graphToAtoms(this.graph);
+  }
+  /** Re-run the tidy tree layout, frame the result, and redraw. */
+  tidy() {
+    layout(this.graph);
+    this.fitView();
+  }
+  /** Zoom around the canvas center by `factor` (above 1 zooms in, below 1 zooms out). Works in both views. */
+  zoomBy(factor) {
+    if (this.viewMode === "block") {
+      this.block.zoomBy(factor);
+      return;
+    }
+    const w = this.container.clientWidth || 800;
+    const h = this.container.clientHeight || 440;
+    this.viewport = zoomAt(this.viewport, w / 2, h / 2, factor);
+    this.render();
+  }
+  /** Pan the view by a screen-space delta (for on-screen pan controls). Works in both views. */
+  panBy(dx, dy) {
+    if (this.viewMode === "block") {
+      this.block.panBy(dx, dy);
+      return;
+    }
+    this.viewport = pan(this.viewport, dx, dy);
+    this.render();
+  }
+  /** Frame the whole program: reset the block view's zoom/pan, or fit the graph. */
+  fitView(padding = 48) {
+    if (this.viewMode === "block") {
+      this.block.fitView();
+      return;
+    }
+    const vp = this.fitViewportFor(this.traceGraph ?? this.graph, padding);
+    if (vp === null) return;
+    this.viewport = vp;
+    this.render();
+  }
+  /** The viewport that frames `graph` in the container, or null when it has no nodes. */
+  fitViewportFor(graph, padding = 48) {
+    const nodes = [...graph.nodes.values()];
+    if (nodes.length === 0) return null;
+    const xs = nodes.map((n) => n.x);
+    const ys = nodes.map((n) => n.y);
+    const minX = Math.min(...xs) - 60;
+    const maxX = Math.max(...xs) + 60;
+    const minY = Math.min(...ys) - 40;
+    const maxY = Math.max(...ys) + 50;
+    const w = this.container.clientWidth || 800;
+    const h = this.container.clientHeight || 440;
+    const fit = Math.min((w - padding * 2) / (maxX - minX), (h - padding * 2) / (maxY - minY));
+    const scale = Math.min(1.5, Math.max(0.2, fit));
+    return {
+      scale,
+      panX: (w - (minX + maxX) * scale) / 2,
+      panY: (h - (minY + maxY) * scale) / 2
+    };
+  }
+  /** Start a step-by-step reduction playthrough of a head (the given node, or the current query target).
+   *  While tracing, the canvas shows each reduction state; step with {@link traceForward} /
+   *  {@link traceBack} and leave with {@link stopTrace}. */
+  playTrace(nodeId) {
+    const targetId = nodeId ?? this.traceTarget();
+    if (targetId === void 0) return;
+    const head = this.graph.findHeads(targetId)[0];
+    if (head === void 0) return;
+    const atom = composeAtom(this.graph, head.id);
+    if (atom === null) return;
+    const space = this.evalSpace();
+    this.trace = withSilhouettes(reduceTrace(atom, space), space);
+    this.traceIndex = 0;
+    this.showTraceStep();
+  }
+  /** The live morph span, mirrored here so the GIF exporters pace their frames off what the screen plays. */
+  traceMs = DEFAULT_TRACE_MS;
+  /** How long each step's morph takes (ms). Lower it to speed the animation up, raise it to slow it down so
+   *  the reduction is easy to follow. The GIF exporters default to the same span. */
+  setTraceDuration(ms) {
+    this.traceMs = Math.max(1, ms);
+    this.renderer.setTraceDuration(ms);
+  }
+  /** Advance the playthrough by one reduction. */
+  traceForward() {
+    if (this.trace === null || this.traceIndex >= this.trace.length - 1) return;
+    this.traceIndex++;
+    this.showTraceStep();
+  }
+  /** Step the playthrough back one reduction. */
+  traceBack() {
+    if (this.trace === null || this.traceIndex <= 0) return;
+    this.traceIndex--;
+    this.showTraceStep();
+  }
+  /** Jump the playthrough back to the first state, to replay it from the start. */
+  traceRestart() {
+    if (this.trace === null) return;
+    this.traceIndex = 0;
+    this.showTraceStep();
+  }
+  /** Leave the playthrough and return to the editable graph (or interactive blocks). */
+  stopTrace() {
+    this.trace = null;
+    this.traceGraph = null;
+    this.renderer.clearTrace();
+    if (this.viewMode === "block") this.block.setAtoms(graphToAtoms(this.graph));
+    else this.fitView();
+    this.notifyView();
+  }
+  /** Whether a playthrough is active (part of {@link ControllerHost}, which pauses editing while true). */
+  isTracing() {
+    return this.trace !== null;
+  }
+  /** The current playthrough position (0-based step and total states), or null when not tracing. */
+  traceInfo() {
+    return this.trace === null ? null : { index: this.traceIndex, total: this.trace.length };
+  }
+  /** A snapshot of the whole view state for the host UI. The editor is the single source of truth: the
+   *  host reads this (and subscribes with {@link onViewChange}) instead of tracking which view is showing
+   *  or whether a playthrough is active on its own, so the two can never disagree. */
+  uiState() {
+    return {
+      viewMode: this.viewMode,
+      tracing: this.traceInfo(),
+      blockCanBack: this.viewMode === "block" && this.block.canStepBack()
+    };
+  }
+  showTraceStep() {
+    if (this.trace === null) return;
+    const frontier = this.trace[this.traceIndex];
+    if (this.viewMode === "block") this.block.showReadonly(frontier);
+    else {
+      this.traceGraph = atomToGraph(frontier);
+      this.viewport = this.fitViewportFor(this.traceGraph) ?? this.viewport;
+      this.renderer.showTrace(this.traceState(), true);
+    }
+    this.notifyView();
+  }
+  /** Switch between the node-graph view and the nested-block view. */
+  setViewMode(mode) {
+    if (mode === this.viewMode) return;
+    this.trace = null;
+    this.traceGraph = null;
+    this.renderer.clearTrace();
+    this.viewMode = mode;
+    if (mode === "block") {
+      this.renderer.svg.style.display = "none";
+      this.block.setAtoms(graphToAtoms(this.graph));
+      this.block.show();
+    } else {
+      this.block.hide();
+      this.renderer.svg.style.display = "block";
+      this.render();
+      this.fitView();
+    }
+    this.notifyView();
+  }
+  /** Reduce the block view's selected term one step in place. */
+  blockReduce() {
+    return this.block.reduceSelected();
+  }
+  /** Step the block view back to before its last in-place reduction. */
+  blockBack() {
+    return this.block.back();
+  }
+  /** Whether the block view can step back. */
+  blockCanStepBack() {
+    return this.block.canStepBack();
+  }
+  /** The block view's program as source, reflecting its edits and reductions. */
+  blockSource() {
+    return this.block.sourceText();
+  }
+  /** The reduction states to animate for a GIF: the active playthrough's if one is running, else those
+   *  computed for the last query. Null when there is nothing (no target, or fewer than two states). */
+  traceStates() {
+    if (this.trace !== null) return this.trace.length < 2 ? null : this.trace;
+    const targetId = this.traceTarget();
+    if (targetId === void 0) return null;
+    const head = this.graph.findHeads(targetId)[0];
+    if (head === void 0) return null;
+    const atom = composeAtom(this.graph, head.id);
+    if (atom === null) return null;
+    const states = reduceTrace(atom, this.evalSpace());
+    return states.length < 2 ? null : states;
+  }
+  /** Encode the current query's reduction as an animated GIF of the block view, using a caller-supplied
+   *  encoder (gifenc) so the package carries no GIF dependency. The morph pacing defaults to the live
+   *  trace duration, so the GIF plays what the screen plays. Returns null when there is no reduction. */
+  async exportReductionGif(lib, opts) {
+    const states = this.traceStates();
+    return states === null ? null : this.block.exportGif(states, lib, { morphMs: this.traceMs, ...opts });
+  }
+  /** Encode the current reduction as a GIF of the node-graph view alone (companion to the block GIF; stack
+   *  the two to show both). Paced like the live view. Returns null when there is nothing to animate. */
+  async exportGraphReductionGif(lib, opts) {
+    const states = this.traceStates();
+    return states === null ? null : graphReductionGif(states, lib, { morphMs: this.traceMs, ...opts });
+  }
+  /** Export the current reduction as one GIF that plays it in the graph and the block views side by side.
+   *  Paced like the live view. Returns null when there is nothing to animate. */
+  async exportSideBySideGif(lib, opts) {
+    const states = this.traceStates();
+    return states === null ? null : this.block.exportSideBySideGif(states, lib, { morphMs: this.traceMs, ...opts });
+  }
+  blockCbs = /* @__PURE__ */ new Set();
+  /** Subscribe to block-view changes (an edit or reduction); returns an unsubscribe function. */
+  onBlockChange(cb) {
+    this.blockCbs.add(cb);
+    return () => this.blockCbs.delete(cb);
+  }
+  notifyBlock() {
+    for (const cb of this.blockCbs) cb();
+  }
+  viewCbs = /* @__PURE__ */ new Set();
+  /** Subscribe to view-state changes: a view switch or any playthrough transition. The host reads
+   *  {@link uiState} in the callback. Returns an unsubscribe function. */
+  onViewChange(cb) {
+    this.viewCbs.add(cb);
+    return () => this.viewCbs.delete(cb);
+  }
+  notifyView() {
+    for (const cb of this.viewCbs) cb();
+  }
+  /** The head to trace: the selected node's head, else the last query head (not a `=`/`:` definition). */
+  traceTarget() {
+    if (this.primaryId !== null) return this.primaryId;
+    const queries = this.graph.heads().filter((h) => h.name !== "=" && h.name !== ":");
+    return queries[queries.length - 1]?.id;
+  }
+  /** Subscribe to graph changes; returns an unsubscribe function. */
+  onChange(cb) {
+    this.changeCbs.add(cb);
+    return () => this.changeCbs.delete(cb);
+  }
+  /** Detach listeners and remove the SVG. */
+  destroy() {
+    this.controller.destroy();
+    this.block.destroy();
+    this.renderer.svg.remove();
+  }
+  afterLoad() {
+    this.trace = null;
+    this.traceGraph = null;
+    this.renderer.clearTrace();
+    this.selection.clear();
+    this.labels.clear();
+    this.viz.clear();
+    this.vizFocus.clear();
+    this.vizDirectives = [];
+    this.primaryId = null;
+    this.programDirty = true;
+    if (this.viewMode === "block") this.block.setAtoms(graphToAtoms(this.graph));
+    else this.render();
+    this.changed();
+    this.notifyView();
+  }
+};
+
+// src/dsl.ts
+import "@mettascript/hyperon";
+function toPalette(p) {
+  if (p === "site") return SITE_PALETTE;
+  if (p === "teal") return TEAL_PALETTE;
+  return p;
+}
+function grapher(target2, opts = {}) {
+  const el2 = typeof target2 === "string" ? document.querySelector(target2) : target2;
+  if (el2 === null) throw new Error(`grapher: no element matches ${JSON.stringify(target2)}`);
+  const g = new MeTTaGrapher(el2, opts);
+  const handle = {
+    grapher: g,
+    load(source) {
+      g.loadSource(source);
+      return handle;
+    },
+    atoms(atoms) {
+      g.loadAtoms(atoms);
+      return handle;
+    },
+    graph() {
+      g.setViewMode("graph");
+      return handle;
+    },
+    blocks() {
+      g.setViewMode("block");
+      return handle;
+    },
+    palette(palette) {
+      g.setBlockPalette(toPalette(palette));
+      return handle;
+    },
+    fit() {
+      g.tidy();
+      return handle;
+    },
+    evaluate() {
+      g.evaluateAll();
+      return handle;
+    },
+    play() {
+      g.playTrace();
+      return handle;
+    },
+    source() {
+      return g.viewMode === "block" ? g.blockSource() : g.toSource();
+    },
+    gif(encoder, opts2) {
+      return g.exportReductionGif(encoder, opts2);
+    },
+    destroy() {
+      g.destroy();
+    }
+  };
+  return handle;
+}
+export {
+  BlockView,
+  CUTOFF,
+  Controller,
+  Graph,
+  MeTTaGrapher,
+  NODE_H,
+  Renderer,
+  SITE_PALETTE,
+  TEAL_PALETTE,
+  VIZ_SPACE,
+  atomToGraph,
+  bindVizSpace,
+  blockReductionSvgs,
+  colorFor,
+  colorOf,
+  completionsFor,
+  composeAtom,
+  displayText,
+  encodeSvgAnimation,
+  evaluateHead,
+  evaluateHeadAsync,
+  fromJson,
+  fromSource,
+  graphReductionGif,
+  graphReductionSvgs,
+  graphToAtoms,
+  grapher,
+  initialViewport,
+  layout,
+  layoutAtom,
+  loadProgram,
+  makeSettings,
+  nodeWidth,
+  pan,
+  parseLeaf,
+  parseProgram,
+  placeProgram,
+  pulledPointsToPath,
+  readViz,
+  reduceStep,
+  reduceTrace,
+  reductionGif,
+  roleOf,
+  roundedBackingPath,
+  roundedRectPath,
+  sideBySideReductionGif,
+  sideBySideReductionSvgs,
+  textOf,
+  toJson,
+  toScreen,
+  toSource,
+  toWorld,
+  variableLinks,
+  zoomAt
+};