dsviz 0.0.0-stage → 2.0.0

package/dist/geom/shapes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/geom/shapes.ts"],
+  "sourcesContent": ["/**\n * Geometry figure parts. These work directly in PIXELS (y down), the way a\n * compass-and-ruler figure is drawn, so a polygon's vertices are just your state.\n */\nimport { handle } from '../handle';\nimport { Scene, SceneNode, Tone, circle as circleNode, path, text } from '../scene';\nimport { V2, Vec, vadd, vnorm, vscale, vsub } from '../vec';\nimport { angleAt, arcPoints, centroid, toDegrees } from './math';\n\nconst pt = (v: Vec): [number, number] => [v.x, v.y];\n\nexport interface PolygonOptions {\n  id?: string;\n  tone?: Tone;\n  /** Vertex names (A, B, C \u2026) placed just outside each corner. */\n  labels?: string[];\n  /** Give every vertex a drag handle; drag events carry `{ id, index }`. */\n  draggable?: boolean;\n  /** Fill the inside lightly. Default true. */\n  fill?: boolean;\n  width?: number;\n  /** Pulse the drag handles until the learner touches one. */\n  hint?: boolean;\n}\n\n/** A closed polygon with optional vertex labels and drag handles. */\nexport function polygon(points: readonly Vec[], o: PolygonOptions = {}): Scene {\n  const id = o.id ?? 'poly';\n  const nodes: SceneNode[] = [\n    path({ id: `${id}:shape`, points: points.map(pt), closed: true, role: o.fill === false ? 'outline' : 'region', tone: o.tone, width: o.width ?? 1.75 }),\n    path({ id: `${id}:edge`, points: points.map(pt), closed: true, role: 'curve', tone: o.tone, width: o.width ?? 1.75 }),\n  ];\n  const c = centroid(points);\n  points.forEach((p, i) => {\n    if (o.labels?.[i]) {\n      const out = vadd(p, vscale(vnorm(vsub(p, c)), 16));\n      nodes.push(text({ id: `${id}:label:${i}`, x: out.x, y: out.y, text: o.labels[i], size: 15, role: 'math' }));\n    }\n    nodes.push(...handle({ id: `${id}:v:${i}`, x: p.x, y: p.y, r: 5, draggable: !!o.draggable, hint: o.hint, tone: o.tone, data: { id, index: i } }));\n  });\n  return { nodes };\n}\n\nexport interface SegmentOptions {\n  id: string;\n  tone?: Tone;\n  dashed?: boolean;\n  width?: number;\n  /** Equal-length tick marks (1, 2 or 3) across the middle. */\n  ticks?: number;\n  label?: string;\n}\n\n/** A segment, optionally with equal-length tick marks and a label beside its midpoint. */\nexport function segment(a: Vec, b: Vec, o: SegmentOptions): Scene {\n  const nodes: SceneNode[] = [path({ id: o.id, points: [pt(a), pt(b)], role: 'curve', tone: o.tone, dashed: o.dashed, width: o.width ?? 1.75 })];\n  if (o.ticks) nodes.push(...tickMarks(a, b, o.ticks, { id: `${o.id}:ticks`, tone: o.tone }).nodes);\n  if (o.label) {\n    const m = vscale(vadd(a, b), 0.5);\n    const n = vnorm(V2(-(b.y - a.y), b.x - a.x));\n    nodes.push(text({ id: `${o.id}:label`, x: m.x + n.x * 14, y: m.y + n.y * 14, text: o.label, size: 13, role: 'math', tone: o.tone }));\n  }\n  return { nodes };\n}\n\n/** The little hash marks that say \"these sides are equal\". */\nexport function tickMarks(a: Vec, b: Vec, count: number, o: { id: string; tone?: Tone; size?: number }): Scene {\n  const m = vscale(vadd(a, b), 0.5);\n  const d = vnorm(vsub(b, a));\n  const n = V2(-d.y, d.x);\n  const s = o.size ?? 6, gap = 4;\n  return {\n    nodes: Array.from({ length: count }, (_, i) => {\n      const c = vadd(m, vscale(d, (i - (count - 1) / 2) * gap));\n      return path({ id: `${o.id}:${i}`, points: [pt(vadd(c, vscale(n, -s))), pt(vadd(c, vscale(n, s)))], role: 'curve', tone: o.tone, width: 1.5 });\n    }),\n  };\n}\n\nexport interface AngleMarkOptions {\n  id: string;\n  r?: number;\n  tone?: Tone;\n  /** Text at the arc, e.g. '\u03B1', or true to show the measure in degrees. */\n  label?: string | boolean;\n  /** Draw a square for (near) right angles. Default true. */\n  rightSquare?: boolean;\n  /** How many arcs (1\u20133) to mark equal angles. Default 1. */\n  arcs?: number;\n}\n\n/**\n * Mark the angle ABC at vertex B: an arc between rays BA and BC (always the\n * smaller side), or a little square when the angle is 90\u00B0. The arc and the\n * square have the same number of points so they morph into each other as you\n * drag through 90\u00B0.\n */\nexport function angleMark(a: Vec, b: Vec, c: Vec, o: AngleMarkOptions): Scene {\n  const r = o.r ?? 22;\n  const ang = angleAt(a, b, c);\n  const a0 = Math.atan2(a.y - b.y, a.x - b.x);\n  let a1 = Math.atan2(c.y - b.y, c.x - b.x);\n  // sweep the short way round\n  let delta = a1 - a0;\n  while (delta > Math.PI) delta -= 2 * Math.PI;\n  while (delta < -Math.PI) delta += 2 * Math.PI;\n  a1 = a0 + delta;\n  const right = (o.rightSquare ?? true) && Math.abs(toDegrees(ang) - 90) < 0.5;\n  const nodes: SceneNode[] = [];\n  const N = 24;\n  const arcs = o.arcs ?? 1;\n  for (let k = 0; k < arcs; k++) {\n    const rr = r + k * 4;\n    let pts: Array<[number, number]>;\n    if (right) {\n      const s = rr * 0.7;\n      const u = V2(Math.cos(a0), Math.sin(a0)), v = V2(Math.cos(a1), Math.sin(a1));\n      const p1 = vadd(b, vscale(u, s)), p2 = vadd(b, vadd(vscale(u, s), vscale(v, s))), p3 = vadd(b, vscale(v, s));\n      // 3 straight legs resampled to N points so it tweens with the arc\n      pts = Array.from({ length: N }, (_, i) => {\n        const t = (i / (N - 1)) * 2;\n        const q = t < 1 ? vadd(p1, vscale(vsub(p2, p1), t)) : vadd(p2, vscale(vsub(p3, p2), t - 1));\n        return pt(q);\n      });\n    } else pts = arcPoints(b, rr, a0, a1, N);\n    nodes.push(path({ id: `${o.id}:arc:${k}`, points: pts, role: 'curve', tone: o.tone, width: 1.5 }));\n  }\n  // a light wedge fill behind the arc\n  nodes.unshift(path({ id: `${o.id}:wedge`, points: [pt(b), ...arcPoints(b, r, a0, a1, N)], closed: true, role: 'region', tone: o.tone }));\n  if (o.label) {\n    const mid = (a0 + a1) / 2;\n    const lr = r + 12 + (arcs - 1) * 4;\n    const s = o.label === true ? `${Math.round(toDegrees(ang))}\u00B0` : o.label;\n    nodes.push(text({ id: `${o.id}:label`, x: b.x + lr * Math.cos(mid), y: b.y + lr * Math.sin(mid), text: s, size: 14, role: 'math', tone: o.tone }));\n  }\n  return { nodes };\n}\n\n/** A circle outline (and light fill) with an optional centre dot. */\nexport function circle(center: Vec, r: number, o: { id: string; tone?: Tone; dashed?: boolean; fill?: boolean; showCenter?: boolean }): Scene {\n  const nodes: SceneNode[] = [\n    circleNode({ id: o.id, x: center.x, y: center.y, r, tone: o.tone ?? 'ghost', dashed: o.dashed, role: o.fill ? undefined : 'outline' }),\n  ];\n  if (o.showCenter) nodes.push(circleNode({ id: `${o.id}:c`, x: center.x, y: center.y, r: 2.5, role: 'dot', tone: o.tone }));\n  return { nodes };\n}\n\n/** A labelled point. */\nexport function pointLabel(p: Vec, s: string, o: { id: string; tone?: Tone; offset?: Vec; draggable?: boolean; hint?: boolean; data?: unknown }): Scene {\n  const off = o.offset ?? V2(10, -12);\n  return {\n    nodes: [\n      ...handle({ id: o.id, x: p.x, y: p.y, r: 4.5, tone: o.tone, draggable: !!o.draggable, hint: o.hint, data: o.data ?? { id: o.id } }),\n      text({ id: `${o.id}:label`, x: p.x + off.x, y: p.y + off.y, text: s, size: 14, role: 'math', tone: o.tone }),\n    ],\n  };\n}\n\n"],
+  "mappings": "AAIA,SAAS,cAAc;AACvB,SAAiC,UAAU,YAAY,MAAM,YAAY;AACzE,SAAS,IAAS,MAAM,OAAO,QAAQ,YAAY;AACnD,SAAS,SAAS,WAAW,UAAU,iBAAiB;AAExD,MAAM,KAAK,CAAC,MAA6B,CAAC,EAAE,GAAG,EAAE,CAAC;AAiB3C,SAAS,QAAQ,QAAwB,IAAoB,CAAC,GAAU;AAC7E,QAAM,KAAK,EAAE,MAAM;AACnB,QAAM,QAAqB;AAAA,IACzB,KAAK,EAAE,IAAI,GAAG,EAAE,UAAU,QAAQ,OAAO,IAAI,EAAE,GAAG,QAAQ,MAAM,MAAM,EAAE,SAAS,QAAQ,YAAY,UAAU,MAAM,EAAE,MAAM,OAAO,EAAE,SAAS,KAAK,CAAC;AAAA,IACrJ,KAAK,EAAE,IAAI,GAAG,EAAE,SAAS,QAAQ,OAAO,IAAI,EAAE,GAAG,QAAQ,MAAM,MAAM,SAAS,MAAM,EAAE,MAAM,OAAO,EAAE,SAAS,KAAK,CAAC;AAAA,EACtH;AACA,QAAM,IAAI,SAAS,MAAM;AACzB,SAAO,QAAQ,CAAC,GAAG,MAAM;AACvB,QAAI,EAAE,SAAS,CAAC,GAAG;AACjB,YAAM,MAAM,KAAK,GAAG,OAAO,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;AACjD,YAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,UAAU,CAAC,IAAI,GAAG,IAAI,GAAG,GAAG,IAAI,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,IAAI,MAAM,OAAO,CAAC,CAAC;AAAA,IAC5G;AACA,UAAM,KAAK,GAAG,OAAO,EAAE,IAAI,GAAG,EAAE,MAAM,CAAC,IAAI,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,GAAG,GAAG,WAAW,CAAC,CAAC,EAAE,WAAW,MAAM,EAAE,MAAM,MAAM,EAAE,MAAM,MAAM,EAAE,IAAI,OAAO,EAAE,EAAE,CAAC,CAAC;AAAA,EAClJ,CAAC;AACD,SAAO,EAAE,MAAM;AACjB;AAaO,SAAS,QAAQ,GAAQ,GAAQ,GAA0B;AAChE,QAAM,QAAqB,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,MAAM,SAAS,MAAM,EAAE,MAAM,QAAQ,EAAE,QAAQ,OAAO,EAAE,SAAS,KAAK,CAAC,CAAC;AAC7I,MAAI,EAAE,MAAO,OAAM,KAAK,GAAG,UAAU,GAAG,GAAG,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,UAAU,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK;AAChG,MAAI,EAAE,OAAO;AACX,UAAM,IAAI,OAAO,KAAK,GAAG,CAAC,GAAG,GAAG;AAChC,UAAM,IAAI,MAAM,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;AAC3C,UAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,IAAI,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,IAAI,MAAM,EAAE,OAAO,MAAM,IAAI,MAAM,QAAQ,MAAM,EAAE,KAAK,CAAC,CAAC;AAAA,EACrI;AACA,SAAO,EAAE,MAAM;AACjB;AAGO,SAAS,UAAU,GAAQ,GAAQ,OAAe,GAAsD;AAC7G,QAAM,IAAI,OAAO,KAAK,GAAG,CAAC,GAAG,GAAG;AAChC,QAAM,IAAI,MAAM,KAAK,GAAG,CAAC,CAAC;AAC1B,QAAM,IAAI,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC;AACtB,QAAM,IAAI,EAAE,QAAQ,GAAG,MAAM;AAC7B,SAAO;AAAA,IACL,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MAAM;AAC7C,YAAM,IAAI,KAAK,GAAG,OAAO,IAAI,KAAK,QAAQ,KAAK,KAAK,GAAG,CAAC;AACxD,aAAO,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,GAAG,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,SAAS,MAAM,EAAE,MAAM,OAAO,IAAI,CAAC;AAAA,IAC9I,CAAC;AAAA,EACH;AACF;AAoBO,SAAS,UAAU,GAAQ,GAAQ,GAAQ,GAA4B;AAC5E,QAAM,IAAI,EAAE,KAAK;AACjB,QAAM,MAAM,QAAQ,GAAG,GAAG,CAAC;AAC3B,QAAM,KAAK,KAAK,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;AAC1C,MAAI,KAAK,KAAK,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;AAExC,MAAI,QAAQ,KAAK;AACjB,SAAO,QAAQ,KAAK,GAAI,UAAS,IAAI,KAAK;AAC1C,SAAO,QAAQ,CAAC,KAAK,GAAI,UAAS,IAAI,KAAK;AAC3C,OAAK,KAAK;AACV,QAAM,SAAS,EAAE,eAAe,SAAS,KAAK,IAAI,UAAU,GAAG,IAAI,EAAE,IAAI;AACzE,QAAM,QAAqB,CAAC;AAC5B,QAAM,IAAI;AACV,QAAM,OAAO,EAAE,QAAQ;AACvB,WAAS,IAAI,GAAG,IAAI,MAAM,KAAK;AAC7B,UAAM,KAAK,IAAI,IAAI;AACnB,QAAI;AACJ,QAAI,OAAO;AACT,YAAM,IAAI,KAAK;AACf,YAAM,IAAI,GAAG,KAAK,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI,GAAG,KAAK,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC;AAC3E,YAAM,KAAK,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,KAAK,KAAK,GAAG,KAAK,OAAO,GAAG,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC;AAE3G,YAAM,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM;AACxC,cAAM,IAAK,KAAK,IAAI,KAAM;AAC1B,cAAM,IAAI,IAAI,IAAI,KAAK,IAAI,OAAO,KAAK,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,OAAO,KAAK,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC;AAC1F,eAAO,GAAG,CAAC;AAAA,MACb,CAAC;AAAA,IACH,MAAO,OAAM,UAAU,GAAG,IAAI,IAAI,IAAI,CAAC;AACvC,UAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,CAAC,IAAI,QAAQ,KAAK,MAAM,SAAS,MAAM,EAAE,MAAM,OAAO,IAAI,CAAC,CAAC;AAAA,EACnG;AAEA,QAAM,QAAQ,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,UAAU,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,UAAU,GAAG,GAAG,IAAI,IAAI,CAAC,CAAC,GAAG,QAAQ,MAAM,MAAM,UAAU,MAAM,EAAE,KAAK,CAAC,CAAC;AACvI,MAAI,EAAE,OAAO;AACX,UAAM,OAAO,KAAK,MAAM;AACxB,UAAM,KAAK,IAAI,MAAM,OAAO,KAAK;AACjC,UAAM,IAAI,EAAE,UAAU,OAAO,GAAG,KAAK,MAAM,UAAU,GAAG,CAAC,CAAC,SAAM,EAAE;AAClE,UAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,IAAI,KAAK,KAAK,IAAI,GAAG,GAAG,GAAG,EAAE,IAAI,KAAK,KAAK,IAAI,GAAG,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,QAAQ,MAAM,EAAE,KAAK,CAAC,CAAC;AAAA,EACnJ;AACA,SAAO,EAAE,MAAM;AACjB;AAGO,SAAS,OAAO,QAAa,GAAW,GAA+F;AAC5I,QAAM,QAAqB;AAAA,IACzB,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,GAAG,GAAG,OAAO,GAAG,GAAG,MAAM,EAAE,QAAQ,SAAS,QAAQ,EAAE,QAAQ,MAAM,EAAE,OAAO,SAAY,UAAU,CAAC;AAAA,EACvI;AACA,MAAI,EAAE,WAAY,OAAM,KAAK,WAAW,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,GAAG,OAAO,GAAG,GAAG,OAAO,GAAG,GAAG,KAAK,MAAM,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC;AACzH,SAAO,EAAE,MAAM;AACjB;AAGO,SAAS,WAAW,GAAQ,GAAW,GAA0G;AACtJ,QAAM,MAAM,EAAE,UAAU,GAAG,IAAI,GAAG;AAClC,SAAO;AAAA,IACL,OAAO;AAAA,MACL,GAAG,OAAO,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,GAAG,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC,CAAC,EAAE,WAAW,MAAM,EAAE,MAAM,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;AAAA,MAClI,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,IAAI,IAAI,GAAG,GAAG,EAAE,IAAI,IAAI,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,QAAQ,MAAM,EAAE,KAAK,CAAC;AAAA,IAC7G;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/handle.d.ts

@@ -0,0 +1,30 @@
+/**
+ * A draggable handle: the dot you see, plus a larger invisible circle that
+ * actually receives the pointer. Small targets are the #1 reason drag
+ * interactions feel bad (and on touch screens a 5px dot is nearly impossible).
+ *
+ * The hit circle comes FIRST so CSS can say "when the hit area is hovered,
+ * grow the dot that follows it" (`.dv-role-hit:hover + .dv-role-handle`).
+ * Drag events report the hit circle's id and `data`, so put what you need there.
+ */
+import { CircleNode, Tone } from './scene';
+export interface HandleOptions {
+    id: string;
+    x: number;
+    y: number;
+    /** Visible radius. Default 6. */
+    r?: number;
+    /** Hit radius. Default 16. */
+    hit?: number;
+    tone?: Tone;
+    data?: unknown;
+    /** Set false to show a dot that can't be dragged. */
+    draggable?: boolean;
+    /**
+     * Pulse a ring around the handle: "you can drag me". Turn it off once the
+     * learner has touched it (that's what Brilliant does, and it's why people
+     * find the interaction without being told).
+     */
+    hint?: boolean;
+}
+export declare function handle(o: HandleOptions): CircleNode[];

package/dist/handle.js

@@ -0,0 +1,13 @@
+import { circle } from "./scene.js";
+function handle(o) {
+  const draggable = o.draggable ?? true;
+  const dot = circle({ id: `${o.id}:dot`, x: o.x, y: o.y, r: o.r ?? 6, role: "handle", tone: o.tone });
+  if (!draggable) return [dot];
+  const out = [circle({ id: o.id, x: o.x, y: o.y, r: o.hit ?? 16, role: "hit", draggable: true, data: o.data }), dot];
+  if (o.hint) out.unshift(circle({ id: `${o.id}:hint`, x: o.x, y: o.y, r: (o.r ?? 6) + 2, role: "pulse", tone: o.tone }));
+  return out;
+}
+export {
+  handle
+};
+//# sourceMappingURL=handle.js.map

package/dist/handle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/handle.ts"],
+  "sourcesContent": ["/**\n * A draggable handle: the dot you see, plus a larger invisible circle that\n * actually receives the pointer. Small targets are the #1 reason drag\n * interactions feel bad (and on touch screens a 5px dot is nearly impossible).\n *\n * The hit circle comes FIRST so CSS can say \"when the hit area is hovered,\n * grow the dot that follows it\" (`.dv-role-hit:hover + .dv-role-handle`).\n * Drag events report the hit circle's id and `data`, so put what you need there.\n */\nimport { CircleNode, Tone, circle } from './scene';\n\nexport interface HandleOptions {\n  id: string;\n  x: number;\n  y: number;\n  /** Visible radius. Default 6. */\n  r?: number;\n  /** Hit radius. Default 16. */\n  hit?: number;\n  tone?: Tone;\n  data?: unknown;\n  /** Set false to show a dot that can't be dragged. */\n  draggable?: boolean;\n  /**\n   * Pulse a ring around the handle: \"you can drag me\". Turn it off once the\n   * learner has touched it (that's what Brilliant does, and it's why people\n   * find the interaction without being told).\n   */\n  hint?: boolean;\n}\n\nexport function handle(o: HandleOptions): CircleNode[] {\n  const draggable = o.draggable ?? true;\n  const dot = circle({ id: `${o.id}:dot`, x: o.x, y: o.y, r: o.r ?? 6, role: 'handle', tone: o.tone });\n  if (!draggable) return [dot];\n  const out = [circle({ id: o.id, x: o.x, y: o.y, r: o.hit ?? 16, role: 'hit', draggable: true, data: o.data }), dot];\n  // the pulse ring goes first so it sits underneath\n  if (o.hint) out.unshift(circle({ id: `${o.id}:hint`, x: o.x, y: o.y, r: (o.r ?? 6) + 2, role: 'pulse', tone: o.tone }));\n  return out;\n}\n"],
+  "mappings": "AASA,SAA2B,cAAc;AAsBlC,SAAS,OAAO,GAAgC;AACrD,QAAM,YAAY,EAAE,aAAa;AACjC,QAAM,MAAM,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,GAAG,EAAE,KAAK,GAAG,MAAM,UAAU,MAAM,EAAE,KAAK,CAAC;AACnG,MAAI,CAAC,UAAW,QAAO,CAAC,GAAG;AAC3B,QAAM,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,GAAG,EAAE,OAAO,IAAI,MAAM,OAAO,WAAW,MAAM,MAAM,EAAE,KAAK,CAAC,GAAG,GAAG;AAElH,MAAI,EAAE,KAAM,KAAI,QAAQ,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,IAAI,EAAE,KAAK,KAAK,GAAG,MAAM,SAAS,MAAM,EAAE,KAAK,CAAC,CAAC;AACtH,SAAO;AACT;",
+  "names": []
+}

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * dsviz — interactive, animated SVG teaching diagrams.
+ *
+ *   state ──▶ layout functions ──▶ Scene (plain data, stable ids) ──▶ renderer
+ *
+ * Core (primitives, renderer, player) and the data-structure layouts are
+ * exported at the top level. The other families are namespaces, because
+ * several of them have a `segment` or `circle` and the namespace says which:
+ *
+ *   import { plot, prob, geom, sched, mem, uml, sys } from 'dsviz';
+ *   plot.fn(p, Math.sin)   geom.angleMark(A, B, C, …)   sched.simulate(procs, 'rr')
+ */
+export * from './vec';
+export * from './easing';
+export * from './themes';
+export * from './scene';
+export * from './path';
+export * from './mathtext';
+export * from './handle';
+export * from './fx';
+export * from './describe';
+export * from './styles';
+export * from './render';
+export * from './camera';
+export * from './connector';
+export * from './static';
+export * from './player';
+export * from './ds';
+export * as ds from './ds';
+export * as plot from './plot';
+export * as prob from './prob';
+export * as geom from './geom';
+export * as sched from './sched';
+export * as mem from './mem';
+export * as uml from './uml';
+export * as sys from './sys';

package/dist/index.js

@@ -0,0 +1,35 @@
+export * from "./vec.js";
+export * from "./easing.js";
+export * from "./themes.js";
+export * from "./scene.js";
+export * from "./path.js";
+export * from "./mathtext.js";
+export * from "./handle.js";
+export * from "./fx.js";
+export * from "./describe.js";
+export * from "./styles.js";
+export * from "./render.js";
+export * from "./camera.js";
+export * from "./connector.js";
+export * from "./static.js";
+export * from "./player.js";
+export * from "./ds/index.js";
+import * as ds from "./ds/index.js";
+import * as plot from "./plot/index.js";
+import * as prob from "./prob/index.js";
+import * as geom from "./geom/index.js";
+import * as sched from "./sched/index.js";
+import * as mem from "./mem/index.js";
+import * as uml from "./uml/index.js";
+import * as sys from "./sys/index.js";
+export {
+  ds,
+  geom,
+  mem,
+  plot,
+  prob,
+  sched,
+  sys,
+  uml
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["/**\n * dsviz \u2014 interactive, animated SVG teaching diagrams.\n *\n *   state \u2500\u2500\u25B6 layout functions \u2500\u2500\u25B6 Scene (plain data, stable ids) \u2500\u2500\u25B6 renderer\n *\n * Core (primitives, renderer, player) and the data-structure layouts are\n * exported at the top level. The other families are namespaces, because\n * several of them have a `segment` or `circle` and the namespace says which:\n *\n *   import { plot, prob, geom, sched, mem, uml, sys } from 'dsviz';\n *   plot.fn(p, Math.sin)   geom.angleMark(A, B, C, \u2026)   sched.simulate(procs, 'rr')\n */\nexport * from './vec';\nexport * from './easing';\nexport * from './themes';\nexport * from './scene';\nexport * from './path';\nexport * from './mathtext';\nexport * from './handle';\nexport * from './fx';\nexport * from './describe';\nexport * from './styles';\nexport * from './render';\nexport * from './camera';\nexport * from './connector';\nexport * from './static';\nexport * from './player';\nexport * from './ds';\n\nexport * as ds from './ds';\nexport * as plot from './plot';\nexport * as prob from './prob';\nexport * as geom from './geom';\nexport * as sched from './sched';\nexport * as mem from './mem';\nexport * as uml from './uml';\nexport * as sys from './sys';\n"],
+  "mappings": "AAYA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,YAAY,QAAQ;AACpB,YAAY,UAAU;AACtB,YAAY,UAAU;AACtB,YAAY,UAAU;AACtB,YAAY,WAAW;AACvB,YAAY,SAAS;AACrB,YAAY,SAAS;AACrB,YAAY,SAAS;",
+  "names": []
+}

package/dist/mathtext.d.ts

@@ -0,0 +1,29 @@
+/**
+ * TeX-lite: just enough maths typesetting for diagram labels, no KaTeX needed.
+ *
+ *   'a^2 + b^2 = c^2'   'f′(x)'   'P(A \cap B)'   'x_{i+1}'   '\theta = 90°'
+ *
+ * The conventions are the ones every maths textbook uses:
+ *   - single-letter variables are italic          a  x  θ
+ *   - numbers, operators, brackets are upright     2  +  =  (
+ *   - named functions are upright words            sin  log  max
+ *   - binary operators get a little space either side, and '-' becomes a real minus '−'
+ *   - ^ and _ make super- and subscripts, {…} groups them
+ *
+ * parseMath() turns the string into spans; describe() turns spans into SVG
+ * <tspan>s, and <MathText> in dsviz/react turns the same spans into HTML.
+ */
+export interface MathSpan {
+    text: string;
+    italic: boolean;
+    /** 1 = superscript, -1 = subscript. */
+    shift?: 1 | -1;
+}
+export declare function parseMath(src: string): MathSpan[];
+/** Approximate width in px, for bounds (sub/superscripts are smaller). */
+export declare function mathWidth(spans: MathSpan[], size: number): number;
+/**
+ * SVG markup for the spans, as <tspan>s. Super/subscripts move with `dy` in px
+ * (not baseline-shift, which Firefox ignores), and the next span moves back.
+ */
+export declare function mathTspans(spans: MathSpan[], size: number): string;

package/dist/mathtext.js

@@ -0,0 +1,142 @@
+const FUNCTIONS = /* @__PURE__ */ new Set(["sin", "cos", "tan", "log", "ln", "exp", "max", "min", "lim", "det", "gcd", "mod", "proj", "arg", "Pr", "E", "Var"]);
+const COMMANDS = {
+  theta: "\u03B8",
+  alpha: "\u03B1",
+  beta: "\u03B2",
+  gamma: "\u03B3",
+  delta: "\u03B4",
+  epsilon: "\u03B5",
+  lambda: "\u03BB",
+  mu: "\u03BC",
+  pi: "\u03C0",
+  sigma: "\u03C3",
+  phi: "\u03C6",
+  omega: "\u03C9",
+  Delta: "\u0394",
+  Sigma: "\u03A3",
+  Omega: "\u03A9",
+  cap: "\u2229",
+  cup: "\u222A",
+  setminus: "\u2212",
+  triangle: "\u25B3",
+  cdot: "\xB7",
+  times: "\xD7",
+  le: "\u2264",
+  ge: "\u2265",
+  ne: "\u2260",
+  approx: "\u2248",
+  to: "\u2192",
+  in: "\u2208",
+  infty: "\u221E",
+  pm: "\xB1",
+  angle: "\u2220",
+  circ: "\xB0",
+  prime: "\u2032",
+  mid: "\u2223",
+  ldots: "\u2026",
+  sqrt: "\u221A",
+  int: "\u222B",
+  sum: "\u2211"
+};
+const RELATIONS = /* @__PURE__ */ new Set(["=", "<", ">", "\u2264", "\u2265", "\u2260", "\u2248", "\u2192", "\u2208", "\u2223"]);
+const BINARY = /* @__PURE__ */ new Set([...RELATIONS, "+", "\u2212", "\xD7", "\xB7", "\u2229", "\u222A", "\u25B3", "\xB1"]);
+const GREEK_UPRIGHT = /[ΔΣΩ∑∫√]/;
+const MEDIUM = "\u205F";
+const THICK = "\u2005";
+function parseMath(src) {
+  const out = [];
+  const push = (text, italic, shift) => {
+    const last = out[out.length - 1];
+    if (last && last.italic === italic && last.shift === shift) last.text += text;
+    else out.push({ text, italic, ...shift ? { shift } : {} });
+  };
+  const walk = (s, shift) => {
+    let i = 0;
+    while (i < s.length) {
+      const ch = s[i];
+      if (ch === " ") {
+        i++;
+        continue;
+      }
+      if ((ch === "^" || ch === "_") && i + 1 < s.length) {
+        const sh = ch === "^" ? 1 : -1;
+        if (s[i + 1] === "{") {
+          const end = matchBrace(s, i + 1);
+          walk(s.slice(i + 2, end), sh);
+          i = end + 1;
+        } else {
+          walk(s[i + 1], sh);
+          i += 2;
+        }
+        continue;
+      }
+      if (ch === "\\") {
+        const m = /^\\([A-Za-z]+)/.exec(s.slice(i));
+        if (m) {
+          if (m[1] === "text" && s[i + 5] === "{") {
+            const end = matchBrace(s, i + 5);
+            push(s.slice(i + 6, end), false, shift);
+            i = end + 1;
+            continue;
+          }
+          const sym = COMMANDS[m[1]] ?? m[1];
+          emitSymbol(sym, shift);
+          i += m[0].length;
+          continue;
+        }
+      }
+      if (/[A-Za-z]/.test(ch)) {
+        const word = /^[A-Za-z]+/.exec(s.slice(i))[0];
+        if (FUNCTIONS.has(word)) push(word, false, shift);
+        else push(word, true, shift);
+        i += word.length;
+        continue;
+      }
+      emitSymbol(ch === "-" ? "\u2212" : ch === "*" ? "\xB7" : ch === "'" ? "\u2032" : ch, shift);
+      i++;
+    }
+  };
+  function emitSymbol(sym, shift) {
+    if (BINARY.has(sym) && !shift) {
+      const prev = out[out.length - 1]?.text.trimEnd().slice(-1);
+      const unary = sym === "\u2212" && (!prev || BINARY.has(prev) || "([{,".includes(prev));
+      const sp = RELATIONS.has(sym) ? THICK : MEDIUM;
+      push(unary ? sym : `${sp}${sym}${sp}`, false, shift);
+    } else if (/^[α-ωϑϕ]$/.test(sym)) push(sym, true, shift);
+    else push(sym, !GREEK_UPRIGHT.test(sym) && /^\p{L}$/u.test(sym), shift);
+  }
+  walk(src);
+  if (out.length) out[0].text = out[0].text.trimStart(), out[out.length - 1].text = out[out.length - 1].text.trimEnd();
+  return out.filter((s) => s.text);
+}
+function matchBrace(s, open) {
+  let depth = 0;
+  for (let i = open; i < s.length; i++) {
+    if (s[i] === "{") depth++;
+    else if (s[i] === "}" && --depth === 0) return i;
+  }
+  return s.length;
+}
+function mathWidth(spans, size) {
+  return spans.reduce((w, s) => w + [...s.text].length * size * (s.shift ? 0.36 : 0.5), 0);
+}
+const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function mathTspans(spans, size) {
+  let out = "", level = 0;
+  for (const s of spans) {
+    const target = s.shift ? s.shift * size * 0.42 : 0;
+    const dy = level - target;
+    level = target;
+    const attrs = [s.italic ? 'font-style="italic"' : 'font-style="normal"'];
+    if (s.shift) attrs.push(`font-size="${Math.round(size * 0.68 * 10) / 10}"`);
+    if (Math.abs(dy) > 0.01) attrs.push(`dy="${Math.round(dy * 100) / 100}"`);
+    out += `<tspan ${attrs.join(" ")}>${esc(s.text)}</tspan>`;
+  }
+  return out;
+}
+export {
+  mathTspans,
+  mathWidth,
+  parseMath
+};
+//# sourceMappingURL=mathtext.js.map

package/dist/mathtext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/mathtext.ts"],
+  "sourcesContent": ["/**\n * TeX-lite: just enough maths typesetting for diagram labels, no KaTeX needed.\n *\n *   'a^2 + b^2 = c^2'   'f\u2032(x)'   'P(A \\cap B)'   'x_{i+1}'   '\\theta = 90\u00B0'\n *\n * The conventions are the ones every maths textbook uses:\n *   - single-letter variables are italic          a  x  \u03B8\n *   - numbers, operators, brackets are upright     2  +  =  (\n *   - named functions are upright words            sin  log  max\n *   - binary operators get a little space either side, and '-' becomes a real minus '\u2212'\n *   - ^ and _ make super- and subscripts, {\u2026} groups them\n *\n * parseMath() turns the string into spans; describe() turns spans into SVG\n * <tspan>s, and <MathText> in dsviz/react turns the same spans into HTML.\n */\nexport interface MathSpan {\n  text: string;\n  italic: boolean;\n  /** 1 = superscript, -1 = subscript. */\n  shift?: 1 | -1;\n}\n\nconst FUNCTIONS = new Set(['sin', 'cos', 'tan', 'log', 'ln', 'exp', 'max', 'min', 'lim', 'det', 'gcd', 'mod', 'proj', 'arg', 'Pr', 'E', 'Var']);\nconst COMMANDS: Record<string, string> = {\n  theta: '\u03B8', alpha: '\u03B1', beta: '\u03B2', gamma: '\u03B3', delta: '\u03B4', epsilon: '\u03B5', lambda: '\u03BB', mu: '\u03BC', pi: '\u03C0', sigma: '\u03C3', phi: '\u03C6', omega: '\u03C9',\n  Delta: '\u0394', Sigma: '\u03A3', Omega: '\u03A9', cap: '\u2229', cup: '\u222A', setminus: '\u2212', triangle: '\u25B3', cdot: '\u00B7', times: '\u00D7', le: '\u2264', ge: '\u2265', ne: '\u2260',\n  approx: '\u2248', to: '\u2192', in: '\u2208', infty: '\u221E', pm: '\u00B1', angle: '\u2220', circ: '\u00B0', prime: '\u2032', mid: '\u2223', ldots: '\u2026', sqrt: '\u221A', int: '\u222B', sum: '\u2211',\n};\n// TeX's spacing classes: binary operators get a medium space (4/18 em) either\n// side, relations a thick one (5/18 em), which is why \"a + b = c\" reads as\n// (a + b) = (c) at a glance.\nconst RELATIONS = new Set(['=', '<', '>', '\u2264', '\u2265', '\u2260', '\u2248', '\u2192', '\u2208', '\u2223']);\nconst BINARY = new Set([...RELATIONS, '+', '\u2212', '\u00D7', '\u00B7', '\u2229', '\u222A', '\u25B3', '\u00B1']);\nconst GREEK_UPRIGHT = /[\u0394\u03A3\u03A9\u2211\u222B\u221A]/; // capital Greek and big operators stay upright\nconst MEDIUM = '\\u205f'; // medium mathematical space, 4/18 em\nconst THICK = '\\u2005'; // four-per-em space, close to TeX's 5/18 em\n\nexport function parseMath(src: string): MathSpan[] {\n  const out: MathSpan[] = [];\n  const push = (text: string, italic: boolean, shift?: 1 | -1) => {\n    const last = out[out.length - 1];\n    if (last && last.italic === italic && last.shift === shift) last.text += text;\n    else out.push({ text, italic, ...(shift ? { shift } : {}) });\n  };\n\n  const walk = (s: string, shift?: 1 | -1) => {\n    let i = 0;\n    while (i < s.length) {\n      const ch = s[i];\n      if (ch === ' ') { i++; continue; } // spacing is ours to decide\n      if ((ch === '^' || ch === '_') && i + 1 < s.length) {\n        const sh = ch === '^' ? 1 : -1;\n        if (s[i + 1] === '{') {\n          const end = matchBrace(s, i + 1);\n          walk(s.slice(i + 2, end), sh);\n          i = end + 1;\n        } else {\n          walk(s[i + 1], sh);\n          i += 2;\n        }\n        continue;\n      }\n      if (ch === '\\\\') {\n        const m = /^\\\\([A-Za-z]+)/.exec(s.slice(i));\n        if (m) {\n          if (m[1] === 'text' && s[i + 5] === '{') {\n            const end = matchBrace(s, i + 5);\n            push(s.slice(i + 6, end), false, shift);\n            i = end + 1;\n            continue;\n          }\n          const sym = COMMANDS[m[1]] ?? m[1];\n          emitSymbol(sym, shift);\n          i += m[0].length;\n          continue;\n        }\n      }\n      if (/[A-Za-z]/.test(ch)) {\n        const word = /^[A-Za-z]+/.exec(s.slice(i))![0];\n        if (FUNCTIONS.has(word)) push(word, false, shift);\n        else push(word, true, shift); // \"ab\" is a\u00B7b: every letter italic\n        i += word.length;\n        continue;\n      }\n      emitSymbol(ch === '-' ? '\u2212' : ch === '*' ? '\u00B7' : ch === \"'\" ? '\u2032' : ch, shift);\n      i++;\n    }\n  };\n\n  function emitSymbol(sym: string, shift?: 1 | -1) {\n    if (BINARY.has(sym) && !shift) {\n      // unary minus at the start or after an operator / open bracket: no spaces\n      const prev = out[out.length - 1]?.text.trimEnd().slice(-1);\n      const unary = sym === '\u2212' && (!prev || BINARY.has(prev) || '([{,'.includes(prev));\n      const sp = RELATIONS.has(sym) ? THICK : MEDIUM;\n      push(unary ? sym : `${sp}${sym}${sp}`, false, shift);\n    } else if (/^[\u03B1-\u03C9\u03D1\u03D5]$/.test(sym)) push(sym, true, shift);\n    else push(sym, !GREEK_UPRIGHT.test(sym) && /^\\p{L}$/u.test(sym), shift);\n  }\n\n  walk(src);\n  // an operator at either end has nothing to be spaced from (\"P =\" then a number in HTML)\n  if (out.length) out[0].text = out[0].text.trimStart(), (out[out.length - 1].text = out[out.length - 1].text.trimEnd());\n  return out.filter((s) => s.text);\n}\n\nfunction matchBrace(s: string, open: number): number {\n  let depth = 0;\n  for (let i = open; i < s.length; i++) {\n    if (s[i] === '{') depth++;\n    else if (s[i] === '}' && --depth === 0) return i;\n  }\n  return s.length;\n}\n\n/** Approximate width in px, for bounds (sub/superscripts are smaller). */\nexport function mathWidth(spans: MathSpan[], size: number): number {\n  return spans.reduce((w, s) => w + [...s.text].length * size * (s.shift ? 0.36 : 0.5), 0);\n}\n\nconst esc = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n\n/**\n * SVG markup for the spans, as <tspan>s. Super/subscripts move with `dy` in px\n * (not baseline-shift, which Firefox ignores), and the next span moves back.\n */\nexport function mathTspans(spans: MathSpan[], size: number): string {\n  let out = '', level = 0;\n  for (const s of spans) {\n    const target = s.shift ? s.shift * size * 0.42 : 0;\n    const dy = level - target; // y grows downward: up = negative dy\n    level = target;\n    const attrs = [s.italic ? 'font-style=\"italic\"' : 'font-style=\"normal\"'];\n    if (s.shift) attrs.push(`font-size=\"${Math.round(size * 0.68 * 10) / 10}\"`);\n    if (Math.abs(dy) > 0.01) attrs.push(`dy=\"${Math.round(dy * 100) / 100}\"`);\n    out += `<tspan ${attrs.join(' ')}>${esc(s.text)}</tspan>`;\n  }\n  return out;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/mem/index.d.ts

@@ -0,0 +1,2 @@
+export * from './stackHeap';
+export * from './memory';

package/dist/mem/index.js

@@ -0,0 +1,3 @@
+export * from "./stackHeap.js";
+export * from "./memory.js";
+//# sourceMappingURL=index.js.map

package/dist/mem/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/mem/index.ts"],
+  "sourcesContent": ["export * from './stackHeap';\nexport * from './memory';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;",
+  "names": []
+}

package/dist/mem/memory.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Raw memory: a strip of bytes with hex addresses, and typed values laid over
+ * them. This is the picture behind pointer arithmetic: `p + 1` on an `int*`
+ * moves 4 bytes, on a `char*` 1 byte, on a `double*` 8, because the compiler
+ * multiplies by the size of what `p` points at.
+ */
+import { Scene, Tone } from '../scene';
+import { Vec } from '../vec';
+export interface MemoryGroup {
+    /** Stable identity (e.g. 'a[2]'): resizing a group tweens it. */
+    key: string;
+    /** Byte offset from `base`. */
+    offset: number;
+    /** Size in bytes. */
+    size: number;
+    value?: string;
+    tone?: Tone;
+    /** Small label above the group, e.g. 'a[2]'. */
+    label?: string;
+}
+export interface MemoryOptions {
+    id?: string;
+    x?: number;
+    y?: number;
+    /** Address of byte 0. */
+    base?: number;
+    /** Total bytes in the strip. */
+    bytes: number;
+    /** Pixels per byte. Default 14. */
+    byteWidth?: number;
+    height?: number;
+    groups?: readonly MemoryGroup[];
+    /** Hex digits to show in addresses. Default 4 (the low digits). */
+    digits?: number;
+    /** Address under every Nth byte as well as at each group start. Default: groups only. */
+    addressEvery?: number;
+}
+export interface MemoryDiagram extends Scene {
+    xAt(offset: number): number;
+    /** Top-centre of a group (for pointer arrows). */
+    top(key: string): Vec;
+    bottom(key: string): Vec;
+    /** Top of an arbitrary byte. */
+    byteTop(offset: number): Vec;
+}
+export declare const hex: (n: number, digits?: number) => string;
+export declare function memory(o: MemoryOptions): MemoryDiagram;

package/dist/mem/memory.js

@@ -0,0 +1,41 @@
+import { path, rect, text } from "../scene.js";
+import { V2 } from "../vec.js";
+const hex = (n, digits = 4) => "0x" + (n >>> 0).toString(16).padStart(digits, "0").slice(-digits);
+function memory(o) {
+  const id = o.id ?? "memory";
+  const x0 = o.x ?? 0, y0 = o.y ?? 0;
+  const bw = o.byteWidth ?? 14, h = o.height ?? 34;
+  const base = o.base ?? 4096;
+  const digits = o.digits ?? 4;
+  const xAt = (off) => x0 + off * bw;
+  const nodes = [];
+  nodes.push(rect({ id: `${id}:strip`, x: xAt(o.bytes / 2), y: y0 + h / 2, w: o.bytes * bw, h, rx: 3, role: "track" }));
+  for (let b = 1; b < o.bytes; b++) nodes.push(path({ id: `${id}:byte:${b}`, points: [[xAt(b), y0 + h - 6], [xAt(b), y0 + h]], role: "tick", width: 1 }));
+  const groups = /* @__PURE__ */ new Map();
+  const addrAt = /* @__PURE__ */ new Set();
+  for (const g2 of o.groups ?? []) {
+    groups.set(g2.key, g2);
+    addrAt.add(g2.offset);
+    const cx = xAt(g2.offset + g2.size / 2);
+    nodes.push(rect({ id: `${id}:g:${g2.key}`, x: cx, y: y0 + h / 2, w: g2.size * bw - 2, h: h - 4, rx: 4, tone: g2.tone }));
+    if (g2.value !== void 0) nodes.push(text({ id: `${id}:g:${g2.key}:v`, x: cx, y: y0 + h / 2, text: g2.value, size: 12, role: "value", tone: g2.tone }));
+    if (g2.label) nodes.push(text({ id: `${id}:g:${g2.key}:l`, x: cx, y: y0 - 10, text: g2.label, size: 11, role: "caption", tone: g2.tone }));
+  }
+  if (o.addressEvery) for (let b = 0; b <= o.bytes; b += o.addressEvery) addrAt.add(b);
+  for (const b of [...addrAt].sort((a, c) => a - c)) {
+    nodes.push(text({ id: `${id}:addr:${b}`, x: xAt(b), y: y0 + h + 12, text: hex(base + b, digits), size: 9, role: "index", anchor: "start" }));
+  }
+  const g = (k) => groups.get(k) ?? { offset: 0, size: 0 };
+  return {
+    nodes,
+    xAt,
+    top: (k) => V2(xAt(g(k).offset + g(k).size / 2), y0),
+    bottom: (k) => V2(xAt(g(k).offset + g(k).size / 2), y0 + h),
+    byteTop: (b) => V2(xAt(b), y0)
+  };
+}
+export {
+  hex,
+  memory
+};
+//# sourceMappingURL=memory.js.map

package/dist/mem/memory.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/mem/memory.ts"],
+  "sourcesContent": ["/**\n * Raw memory: a strip of bytes with hex addresses, and typed values laid over\n * them. This is the picture behind pointer arithmetic: `p + 1` on an `int*`\n * moves 4 bytes, on a `char*` 1 byte, on a `double*` 8, because the compiler\n * multiplies by the size of what `p` points at.\n */\nimport { Scene, SceneNode, Tone, path, rect, text } from '../scene';\nimport { V2, Vec } from '../vec';\n\nexport interface MemoryGroup {\n  /** Stable identity (e.g. 'a[2]'): resizing a group tweens it. */\n  key: string;\n  /** Byte offset from `base`. */\n  offset: number;\n  /** Size in bytes. */\n  size: number;\n  value?: string;\n  tone?: Tone;\n  /** Small label above the group, e.g. 'a[2]'. */\n  label?: string;\n}\n\nexport interface MemoryOptions {\n  id?: string;\n  x?: number;\n  y?: number;\n  /** Address of byte 0. */\n  base?: number;\n  /** Total bytes in the strip. */\n  bytes: number;\n  /** Pixels per byte. Default 14. */\n  byteWidth?: number;\n  height?: number;\n  groups?: readonly MemoryGroup[];\n  /** Hex digits to show in addresses. Default 4 (the low digits). */\n  digits?: number;\n  /** Address under every Nth byte as well as at each group start. Default: groups only. */\n  addressEvery?: number;\n}\n\nexport interface MemoryDiagram extends Scene {\n  xAt(offset: number): number;\n  /** Top-centre of a group (for pointer arrows). */\n  top(key: string): Vec;\n  bottom(key: string): Vec;\n  /** Top of an arbitrary byte. */\n  byteTop(offset: number): Vec;\n}\n\nexport const hex = (n: number, digits = 4) => '0x' + (n >>> 0).toString(16).padStart(digits, '0').slice(-digits);\n\nexport function memory(o: MemoryOptions): MemoryDiagram {\n  const id = o.id ?? 'memory';\n  const x0 = o.x ?? 0, y0 = o.y ?? 0;\n  const bw = o.byteWidth ?? 14, h = o.height ?? 34;\n  const base = o.base ?? 0x1000;\n  const digits = o.digits ?? 4;\n  const xAt = (off: number) => x0 + off * bw;\n  const nodes: SceneNode[] = [];\n  // the byte strip: one hairline per byte boundary\n  nodes.push(rect({ id: `${id}:strip`, x: xAt(o.bytes / 2), y: y0 + h / 2, w: o.bytes * bw, h, rx: 3, role: 'track' }));\n  for (let b = 1; b < o.bytes; b++) nodes.push(path({ id: `${id}:byte:${b}`, points: [[xAt(b), y0 + h - 6], [xAt(b), y0 + h]], role: 'tick', width: 1 }));\n  const groups = new Map<string, MemoryGroup>();\n  const addrAt = new Set<number>();\n  for (const g of o.groups ?? []) {\n    groups.set(g.key, g);\n    addrAt.add(g.offset);\n    const cx = xAt(g.offset + g.size / 2);\n    nodes.push(rect({ id: `${id}:g:${g.key}`, x: cx, y: y0 + h / 2, w: g.size * bw - 2, h: h - 4, rx: 4, tone: g.tone }));\n    if (g.value !== undefined) nodes.push(text({ id: `${id}:g:${g.key}:v`, x: cx, y: y0 + h / 2, text: g.value, size: 12, role: 'value', tone: g.tone }));\n    if (g.label) nodes.push(text({ id: `${id}:g:${g.key}:l`, x: cx, y: y0 - 10, text: g.label, size: 11, role: 'caption', tone: g.tone }));\n  }\n  if (o.addressEvery) for (let b = 0; b <= o.bytes; b += o.addressEvery) addrAt.add(b);\n  for (const b of [...addrAt].sort((a, c) => a - c)) {\n    nodes.push(text({ id: `${id}:addr:${b}`, x: xAt(b), y: y0 + h + 12, text: hex(base + b, digits), size: 9, role: 'index', anchor: 'start' }));\n  }\n  const g = (k: string) => groups.get(k) ?? { offset: 0, size: 0 };\n  return {\n    nodes,\n    xAt,\n    top: (k) => V2(xAt(g(k).offset + g(k).size / 2), y0),\n    bottom: (k) => V2(xAt(g(k).offset + g(k).size / 2), y0 + h),\n    byteTop: (b) => V2(xAt(b), y0),\n  };\n}\n"],
+  "mappings": "AAMA,SAAiC,MAAM,MAAM,YAAY;AACzD,SAAS,UAAe;AA0CjB,MAAM,MAAM,CAAC,GAAW,SAAS,MAAM,QAAQ,MAAM,GAAG,SAAS,EAAE,EAAE,SAAS,QAAQ,GAAG,EAAE,MAAM,CAAC,MAAM;AAExG,SAAS,OAAO,GAAiC;AACtD,QAAM,KAAK,EAAE,MAAM;AACnB,QAAM,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,KAAK;AACjC,QAAM,KAAK,EAAE,aAAa,IAAI,IAAI,EAAE,UAAU;AAC9C,QAAM,OAAO,EAAE,QAAQ;AACvB,QAAM,SAAS,EAAE,UAAU;AAC3B,QAAM,MAAM,CAAC,QAAgB,KAAK,MAAM;AACxC,QAAM,QAAqB,CAAC;AAE5B,QAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,UAAU,GAAG,IAAI,EAAE,QAAQ,CAAC,GAAG,GAAG,KAAK,IAAI,GAAG,GAAG,EAAE,QAAQ,IAAI,GAAG,IAAI,GAAG,MAAM,QAAQ,CAAC,CAAC;AACpH,WAAS,IAAI,GAAG,IAAI,EAAE,OAAO,IAAK,OAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,SAAS,CAAC,IAAI,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,MAAM,QAAQ,OAAO,EAAE,CAAC,CAAC;AACtJ,QAAM,SAAS,oBAAI,IAAyB;AAC5C,QAAM,SAAS,oBAAI,IAAY;AAC/B,aAAWA,MAAK,EAAE,UAAU,CAAC,GAAG;AAC9B,WAAO,IAAIA,GAAE,KAAKA,EAAC;AACnB,WAAO,IAAIA,GAAE,MAAM;AACnB,UAAM,KAAK,IAAIA,GAAE,SAASA,GAAE,OAAO,CAAC;AACpC,UAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,MAAMA,GAAE,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,IAAI,GAAG,GAAGA,GAAE,OAAO,KAAK,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,MAAMA,GAAE,KAAK,CAAC,CAAC;AACpH,QAAIA,GAAE,UAAU,OAAW,OAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,MAAMA,GAAE,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,IAAI,GAAG,MAAMA,GAAE,OAAO,MAAM,IAAI,MAAM,SAAS,MAAMA,GAAE,KAAK,CAAC,CAAC;AACpJ,QAAIA,GAAE,MAAO,OAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,MAAMA,GAAE,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,IAAI,MAAMA,GAAE,OAAO,MAAM,IAAI,MAAM,WAAW,MAAMA,GAAE,KAAK,CAAC,CAAC;AAAA,EACvI;AACA,MAAI,EAAE,aAAc,UAAS,IAAI,GAAG,KAAK,EAAE,OAAO,KAAK,EAAE,aAAc,QAAO,IAAI,CAAC;AACnF,aAAW,KAAK,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC,GAAG;AACjD,UAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,KAAK,IAAI,IAAI,MAAM,IAAI,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC;AAAA,EAC7I;AACA,QAAM,IAAI,CAAC,MAAc,OAAO,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,EAAE;AAC/D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,KAAK,CAAC,MAAM,GAAG,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,CAAC,GAAG,EAAE;AAAA,IACnD,QAAQ,CAAC,MAAM,GAAG,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC;AAAA,IAC1D,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE;AAAA,EAC/B;AACF;",
+  "names": ["g"]
+}

package/dist/mem/stackHeap.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Python-Tutor-style memory pictures: stack frames on the left, heap objects
+ * on the right, and an arrow for every reference.
+ *
+ * The thing this makes visible is ALIASING. `b = a` doesn't copy a list; it
+ * adds a second arrow to the same object. `b.append(3)` then changes what `a`
+ * points at too, and you can see why.
+ *
+ * Primitives (numbers, strings, None) are drawn inline in their slot. A
+ * `{ ref: 'id' }` value draws a dot in the slot and an arrow to heap object `id`.
+ */
+import { Scene, Tone } from '../scene';
+import { Vec } from '../vec';
+export type MemValue = number | string | boolean | null | {
+    ref: string;
+};
+export interface StackFrame {
+    name: string;
+    vars: ReadonlyArray<{
+        name: string;
+        value: MemValue;
+    }>;
+}
+export interface HeapObject {
+    id: string;
+    /** Shown above the object: 'list', 'tuple', 'dict', a class name… */
+    kind: string;
+    /** Sequence items, or [key, value] pairs for dicts / instances. */
+    items: ReadonlyArray<MemValue> | ReadonlyArray<readonly [string, MemValue]>;
+}
+export interface StackHeapOptions {
+    id?: string;
+    x?: number;
+    y?: number;
+    frameWidth?: number;
+    /** x of the heap column. Default frameWidth + 110. */
+    heapX?: number;
+    rowHeight?: number;
+    /** Tones keyed by `frame.var` (e.g. 'Global.a') or heap object id. */
+    tones?: Record<string, Tone | undefined>;
+    /** Heap layout: explicit positions per object id, relative to (heapX, y). */
+    positions?: Record<string, Vec>;
+}
+export interface StackHeapDiagram extends Scene {
+    slot(frame: string, name: string): Vec;
+    object(id: string): Vec;
+}
+export declare function stackHeap(frames: readonly StackFrame[], heap: readonly HeapObject[], o?: StackHeapOptions): StackHeapDiagram;

package/dist/mem/stackHeap.js

@@ -0,0 +1,76 @@
+import { arrow, circle, estimateTextWidth, rect, text } from "../scene.js";
+import { V2 } from "../vec.js";
+const show = (v) => v === null ? "None" : typeof v === "string" ? `"${v}"` : typeof v === "boolean" ? v ? "True" : "False" : String(v);
+const isRef = (v) => typeof v === "object" && v !== null;
+function stackHeap(frames, heap, o = {}) {
+  const id = o.id ?? "mem";
+  const x0 = o.x ?? 0, y0 = o.y ?? 0;
+  const fw = o.frameWidth ?? 150;
+  const hx = o.heapX ?? x0 + fw + 110;
+  const rh = o.rowHeight ?? 28;
+  const cellW = 40;
+  const nodes = [];
+  const arrows = [];
+  const slots = /* @__PURE__ */ new Map();
+  const objPos = /* @__PURE__ */ new Map();
+  let hy = y0 + 18;
+  for (const obj of heap) {
+    const p = o.positions?.[obj.id];
+    const at = p ? V2(hx + p.x, y0 + p.y) : V2(hx, hy);
+    objPos.set(obj.id, at);
+    if (!p) hy += rh + 40;
+  }
+  let fy = y0;
+  for (const f of frames) {
+    const h = 26 + f.vars.length * rh + 8;
+    nodes.push(rect({ id: `${id}:frame:${f.name}`, x: x0 + fw / 2, y: fy + h / 2, w: fw, h, rx: 6, role: "frame" }));
+    nodes.push(text({ id: `${id}:frame:${f.name}:t`, x: x0 + 10, y: fy + 13, text: f.name, size: 11, role: "caption", anchor: "start" }));
+    f.vars.forEach((v, i) => {
+      const cy = fy + 26 + i * rh + rh / 2;
+      const key = `${f.name}.${v.name}`;
+      const tone = o.tones?.[key];
+      const slotX = x0 + fw - 34;
+      slots.set(key, V2(slotX, cy));
+      nodes.push(text({ id: `${id}:var:${key}`, x: slotX - 26, y: cy, text: v.name, size: 13, role: "value", anchor: "end", tone }));
+      nodes.push(rect({ id: `${id}:slot:${key}`, x: slotX, y: cy, w: 40, h: rh - 6, rx: 4, tone }));
+      if (isRef(v.value)) {
+        nodes.push(circle({ id: `${id}:dot:${key}`, x: slotX, y: cy, r: 3.5, role: "dot", tone }));
+        const t = objPos.get(v.value.ref);
+        if (t) arrows.push(refArrow(`${id}:ref:${key}`, V2(slotX, cy), V2(t.x - 4, t.y), tone));
+      } else {
+        nodes.push(text({ id: `${id}:val:${key}`, x: slotX, y: cy, text: show(v.value), size: 12, role: "value", tone }));
+      }
+    });
+    fy += h + 12;
+  }
+  for (const obj of heap) {
+    const at = objPos.get(obj.id);
+    const tone = o.tones?.[obj.id];
+    nodes.push(text({ id: `${id}:obj:${obj.id}:kind`, x: at.x, y: at.y - rh / 2 - 9, text: obj.kind, size: 11, role: "caption", anchor: "start" }));
+    const pairs = obj.items.length && Array.isArray(obj.items[0]);
+    obj.items.forEach((item, i) => {
+      const [k, v] = pairs ? item : [String(i), item];
+      const w = pairs ? Math.max(cellW, estimateTextWidth(k, 11) + 14) + cellW : cellW;
+      const cx = at.x + i * (pairs ? w : cellW) + (pairs ? w : cellW) / 2;
+      nodes.push(rect({ id: `${id}:obj:${obj.id}:${i}`, x: cx, y: at.y, w: pairs ? w : cellW, h: rh - 4, rx: 3, tone, enter: { x: cx + 20 } }));
+      nodes.push(text({ id: `${id}:obj:${obj.id}:${i}:i`, x: pairs ? cx - w / 2 + 7 : cx, y: pairs ? at.y : at.y + rh / 2 + 7, text: k, size: pairs ? 11 : 9, role: "index", anchor: pairs ? "start" : "middle" }));
+      const vx = pairs ? cx + w / 2 - cellW / 2 : cx;
+      if (isRef(v)) {
+        nodes.push(circle({ id: `${id}:obj:${obj.id}:${i}:dot`, x: vx, y: at.y, r: 3.5, role: "dot" }));
+        const t = objPos.get(v.ref);
+        if (t) arrows.push(refArrow(`${id}:ref:${obj.id}:${i}`, V2(vx, at.y), V2(t.x - 4, t.y), tone, true));
+      } else nodes.push(text({ id: `${id}:obj:${obj.id}:${i}:v`, x: vx, y: at.y, text: show(v), size: 12, role: "value", tone, enter: { x: vx + 20 } }));
+    });
+    if (!obj.items.length) nodes.push(rect({ id: `${id}:obj:${obj.id}:empty`, x: at.x + 14, y: at.y, w: 28, h: rh - 4, rx: 3, tone: "ghost" }));
+  }
+  return { nodes: [...nodes, ...arrows], slot: (f, n) => slots.get(`${f}.${n}`) ?? V2(0, 0), object: (oid) => objPos.get(oid) ?? V2(0, 0) };
+}
+function refArrow(id, from, to, tone, fromHeap = false) {
+  const dy = to.y - from.y;
+  const bend = fromHeap ? -40 : Math.abs(dy) < 4 ? 0 : Math.sign(dy) * -Math.min(30, Math.abs(dy) * 0.25);
+  return arrow({ id, x1: from.x, y1: from.y, x2: to.x, y2: to.y, bend, width: 1.5, tone });
+}
+export {
+  stackHeap
+};
+//# sourceMappingURL=stackHeap.js.map