@mettascript/grapher 2.0.0

package/dist/node.js

@@ -0,0 +1,1779 @@
+// src/node.ts
+import { ExpressionAtom as ExpressionAtom4, MeTTa } 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());
+}
+
+// src/reduce.ts
+import { E, S, ExpressionAtom } 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(E(S("get-type"), head));
+  const type = types[0];
+  if (type instanceof ExpressionAtom) {
+    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(E(S("eval"), atom));
+  const src = atom.toString();
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const r of results) {
+    if (r instanceof ExpressionAtom) {
+      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 ExpressionAtom) {
+    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 E(...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/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/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/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/layout.ts
+import {
+  ExpressionAtom as ExpressionAtom2,
+  VariableAtom,
+  SymbolAtom,
+  GroundedAtom
+} from "@mettascript/hyperon";
+
+// 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
+  ]);
+}
+
+// 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 SymbolAtom || atom instanceof VariableAtom || atom instanceof GroundedAtom;
+}
+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 VariableAtom) {
+    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 ExpressionAtom2)) {
+    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 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/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 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/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();
+}
+
+// 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 };
+}
+
+// src/atom.ts
+import {
+  SymbolAtom as SymbolAtom2,
+  VariableAtom as VariableAtom2,
+  ExpressionAtom as ExpressionAtom3,
+  GroundedAtom as GroundedAtom2,
+  S as S2,
+  E as E2
+} 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/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/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 atomToGraph(atoms, graph = new Graph()) {
+  for (const atom of atoms) buildNode(graph, atom);
+  layout(graph);
+  return graph;
+}
+function isAtomic(atom) {
+  return atom instanceof SymbolAtom2 || atom instanceof VariableAtom2 || atom instanceof GroundedAtom2;
+}
+function leafName(atom) {
+  return atom.toString();
+}
+function buildNode(graph, atom) {
+  if (atom instanceof ExpressionAtom3) {
+    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/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/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;
+}
+
+// src/render.ts
+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 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 target = toNodes.get(s.key) ?? ancestorTarget(s.key, toNodes);
+    const p = target !== void 0 ? collapsePlacement(s, target, 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 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, target, t) {
+  const startDist = Math.hypot(s.x - target.x, s.y - target.y);
+  const sR = s.radius;
+  const tR = target.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, target.x, t);
+  const y = lerp(s.y, target.y, t);
+  const m = Math.max(0, Math.min(1, 1 - (1 - t) * startDist / (sR + tR)));
+  const points = m <= 0 ? s.points : target.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, target.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/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("");
+}
+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 };
+}
+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/node.ts
+var MAX_DIMENSION = 4096;
+var MAX_FRAMES = 360;
+var MAX_TOTAL_PIXELS = 1e8;
+var MAX_OUTPUT_BYTES = 128 * 1024 * 1024;
+function positiveInteger(name, value, max) {
+  if (!Number.isInteger(value) || value < 1 || value > max)
+    throw new Error(`${name} must be an integer from 1 to ${max}, got ${value}`);
+}
+function validateOptions(opts) {
+  if (opts.view !== void 0 && opts.view !== "blocks" && opts.view !== "graph" && opts.view !== "side-by-side")
+    throw new Error(`view must be "blocks", "graph", or "side-by-side", got ${String(opts.view)}`);
+  if (opts.width !== void 0) positiveInteger("width", opts.width, MAX_DIMENSION);
+  if (opts.framesPerStep !== void 0)
+    positiveInteger("framesPerStep", opts.framesPerStep, MAX_FRAMES);
+  if (opts.maxFrames !== void 0) positiveInteger("maxFrames", opts.maxFrames, MAX_FRAMES);
+  if (opts.maxSteps !== void 0) positiveInteger("maxSteps", opts.maxSteps, 1e4);
+  for (const [name, value] of [
+    ["holdMs", opts.holdMs],
+    ["stepMs", opts.stepMs],
+    ["morphMs", opts.morphMs]
+  ])
+    if (value !== void 0 && (!Number.isFinite(value) || value < 0 || value > 6e4))
+      throw new Error(`${name} must be between 0 and 60000, got ${value}`);
+}
+function inputAtoms(input) {
+  if (typeof input === "string") return parseProgram(input);
+  return Array.isArray(input) ? [...input] : [input];
+}
+function isDefinition(atom) {
+  if (!(atom instanceof ExpressionAtom4)) return false;
+  const head = atom.children()[0]?.toString();
+  return head === "=" || head === ":";
+}
+function traceInput(input, opts) {
+  const atoms = inputAtoms(input);
+  const query = [...atoms].reverse().find((atom) => !isDefinition(atom));
+  if (query === void 0)
+    throw new Error("renderReductionGif: input has no query; add a non-definition atom");
+  const metta = opts.metta ?? new MeTTa();
+  for (const atom of atoms) metta.space().addAtom(atom);
+  const states = reduceTrace(query, metta, opts.maxSteps ?? 300);
+  if (states.length < 2)
+    throw new Error(`renderReductionGif: query does not reduce: ${query.toString()}`);
+  return states;
+}
+function framesFor(states, opts) {
+  switch (opts.view ?? "blocks") {
+    case "blocks":
+      return blockReductionSvgs(states, opts);
+    case "graph":
+      return graphReductionSvgs(states, opts);
+    case "side-by-side":
+      return sideBySideReductionSvgs(states, opts);
+  }
+}
+function validateAnimation(animation, opts) {
+  positiveInteger("rendered width", animation.width, MAX_DIMENSION);
+  positiveInteger("rendered height", animation.height, MAX_DIMENSION);
+  const frameLimit = opts.maxFrames ?? 180;
+  if (animation.frames.length > frameLimit)
+    throw new Error(
+      `renderReductionGif: ${animation.frames.length} frames exceed maxFrames ${frameLimit}`
+    );
+  const pixels = animation.width * animation.height * animation.frames.length;
+  if (!Number.isSafeInteger(pixels) || pixels > MAX_TOTAL_PIXELS)
+    throw new Error(
+      `renderReductionGif: ${pixels} raster pixels exceed the ${MAX_TOTAL_PIXELS} safety limit`
+    );
+}
+async function loadGifEncoder() {
+  try {
+    const loaded = await import("gifenc");
+    const lib = typeof loaded.GIFEncoder === "function" ? loaded : loaded.default;
+    if (lib === void 0 || typeof lib.GIFEncoder !== "function" || typeof lib.quantize !== "function" || typeof lib.applyPalette !== "function")
+      throw new Error("gifenc did not expose GIFEncoder, quantize, and applyPalette");
+    return lib;
+  } catch (error) {
+    throw new Error(
+      "@mettascript/grapher/node requires gifenc; install it with `npm install gifenc sharp`",
+      { cause: error }
+    );
+  }
+}
+async function sharpRasterizer() {
+  let sharp;
+  try {
+    sharp = (await import("sharp")).default;
+  } catch (error) {
+    throw new Error(
+      "@mettascript/grapher/node requires sharp; install it with `npm install sharp gifenc`",
+      { cause: error }
+    );
+  }
+  return async (svg, width, height, background) => {
+    const { data, info } = await sharp(Buffer.from(svg)).resize(width, height, { fit: "fill" }).flatten({ background }).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+    if (info.width !== width || info.height !== height || info.channels !== 4)
+      throw new Error(
+        `sharp returned ${info.width}x${info.height}x${info.channels}; expected ${width}x${height}x4`
+      );
+    return new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+  };
+}
+async function renderReductionGif(input, opts = {}) {
+  validateOptions(opts);
+  const animation = framesFor(traceInput(input, opts), opts);
+  validateAnimation(animation, opts);
+  const [rasterize, encoder] = await Promise.all([sharpRasterizer(), loadGifEncoder()]);
+  const bytes = await encodeSvgAnimation(
+    animation,
+    rasterize,
+    encoder,
+    (opts.view ?? "blocks") === "blocks" ? 256 : 128
+  );
+  if (bytes.byteLength > MAX_OUTPUT_BYTES)
+    throw new Error(
+      `renderReductionGif: ${bytes.byteLength} output bytes exceed the ${MAX_OUTPUT_BYTES} safety limit`
+    );
+  return bytes;
+}
+export {
+  renderReductionGif
+};