dsviz 0.0.0-stage → 2.0.0

package/dist/ds/array.js

@@ -0,0 +1,62 @@
+import { rect, text } from "../scene.js";
+import { V2 } from "../vec.js";
+import { resolveTone, show } from "./common.js";
+function array(values, o = {}) {
+  const id = o.id ?? "arr";
+  const x0 = o.x ?? 0, y0 = o.y ?? 0;
+  const cell = o.cell ?? 48;
+  const gap = o.gap ?? 6;
+  const step = cell + gap;
+  const keys = o.keys ?? values.map((_, i) => i);
+  const size = Math.round(cell * 0.4);
+  const center = (i) => o.vertical ? V2(x0 + cell / 2, y0 + i * step + cell / 2) : V2(x0 + i * step + cell / 2, y0 + cell / 2);
+  const nodes = [];
+  values.forEach((v, i) => {
+    const c = center(i);
+    const key = keys[i];
+    const tone = resolveTone(o.tones, i, v);
+    const enter = o.enterOffset ? { x: c.x + o.enterOffset.x, y: c.y + o.enterOffset.y } : void 0;
+    const exit = o.exitOffset ? { x: c.x + o.exitOffset.x, y: c.y + o.exitOffset.y } : void 0;
+    nodes.push(
+      rect({ id: `${id}:cell:${key}`, x: c.x, y: c.y, w: cell, h: cell, rx: cell * 0.16, tone, enter, exit, interactive: o.interactive, data: { index: i, key, value: v } }),
+      text({ id: `${id}:val:${key}`, x: c.x, y: c.y, text: o.format ? o.format(v, i) : show(v), size, weight: 600, role: "value", tone, enter, exit })
+    );
+  });
+  if (o.showIndices ?? true) {
+    values.forEach((_, i) => {
+      const c = center(i);
+      const p = o.vertical ? V2(c.x - cell / 2 - 10, c.y) : V2(c.x, c.y + cell / 2 + 14);
+      nodes.push(text({ id: `${id}:idx:${i}`, x: p.x, y: p.y, text: String(i), size: 12, role: "index", anchor: o.vertical ? "end" : "middle" }));
+    });
+  }
+  const half = cell / 2;
+  return {
+    nodes,
+    length: values.length,
+    cell,
+    center,
+    top: (i) => V2(center(i).x, center(i).y - half),
+    bottom: (i) => V2(center(i).x, center(i).y + half),
+    left: (i) => V2(center(i).x - half, center(i).y),
+    right: (i) => V2(center(i).x + half, center(i).y),
+    window(lo, hi, w = {}) {
+      if (lo > hi || hi < 0 || lo >= values.length) return null;
+      const pad = w.pad ?? 5;
+      const a = center(Math.max(0, lo)), b = center(Math.min(values.length - 1, hi));
+      return rect({
+        id: w.id ?? `${id}:window`,
+        x: (a.x + b.x) / 2,
+        y: (a.y + b.y) / 2,
+        w: Math.abs(b.x - a.x) + cell + 2 * pad,
+        h: Math.abs(b.y - a.y) + cell + 2 * pad,
+        rx: cell * 0.22,
+        role: "window",
+        tone: w.tone
+      });
+    }
+  };
+}
+export {
+  array
+};
+//# sourceMappingURL=array.js.map

package/dist/ds/array.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ds/array.ts"],
+  "sourcesContent": ["/**\n * Arrays: a row of cells, with index labels underneath.\n *\n * The important design decision is WHAT A CELL'S ID IS:\n *  - the cell box + value text are identified by the element's `key`\n *    (default: its index). Give elements stable keys and a swap becomes two\n *    cells sliding past each other instead of two numbers changing in place.\n *  - the index labels (0, 1, 2\u2026) are identified by POSITION, because index 3\n *    is always index 3 no matter what value sits in it.\n */\nimport { Part, Scene, SceneNode, Tone, rect, text } from '../scene';\nimport { V2, Vec } from '../vec';\nimport { Key, ToneSpec, resolveTone, show } from './common';\n\nexport interface ArrayOptions<T = unknown> {\n  id?: string;\n  /** Top-left corner of the first cell. */\n  x?: number;\n  y?: number;\n  /** Cell size in px. Default 48. */\n  cell?: number;\n  gap?: number;\n  /** Stable identity per element (must be unique). Default: the index. */\n  keys?: Key[];\n  /** Tone per INDEX: `{ 2: 'active' }` or `(i, v) => \u2026`. */\n  tones?: ToneSpec<number, T>;\n  showIndices?: boolean;\n  /** Text to show instead of String(value). */\n  format?: (v: T, i: number) => string;\n  /** Lay the cells out top-to-bottom instead of left-to-right. */\n  vertical?: boolean;\n  /** Where new cells fly in from / old cells fly out to (offset in px). */\n  enterOffset?: Vec;\n  exitOffset?: Vec;\n  interactive?: boolean;\n}\n\nexport interface ArrayDiagram extends Scene {\n  length: number;\n  cell: number;\n  center(i: number): Vec;\n  top(i: number): Vec;\n  bottom(i: number): Vec;\n  left(i: number): Vec;\n  right(i: number): Vec;\n  /** A highlight band behind cells lo..hi (inclusive). Put it BEFORE the array in combine(). */\n  window(lo: number, hi: number, o?: { id?: string; tone?: Tone; pad?: number }): Part;\n}\n\nexport function array<T>(values: readonly T[], o: ArrayOptions<T> = {}): ArrayDiagram {\n  const id = o.id ?? 'arr';\n  const x0 = o.x ?? 0, y0 = o.y ?? 0;\n  const cell = o.cell ?? 48;\n  const gap = o.gap ?? 6;\n  const step = cell + gap;\n  const keys = o.keys ?? values.map((_, i) => i);\n  const size = Math.round(cell * 0.4);\n\n  const center = (i: number) =>\n    o.vertical ? V2(x0 + cell / 2, y0 + i * step + cell / 2) : V2(x0 + i * step + cell / 2, y0 + cell / 2);\n\n  const nodes: SceneNode[] = [];\n  values.forEach((v, i) => {\n    const c = center(i);\n    const key = keys[i];\n    const tone = resolveTone(o.tones, i, v);\n    const enter = o.enterOffset ? { x: c.x + o.enterOffset.x, y: c.y + o.enterOffset.y } : undefined;\n    const exit = o.exitOffset ? { x: c.x + o.exitOffset.x, y: c.y + o.exitOffset.y } : undefined;\n    nodes.push(\n      rect({ id: `${id}:cell:${key}`, x: c.x, y: c.y, w: cell, h: cell, rx: cell * 0.16, tone, enter, exit, interactive: o.interactive, data: { index: i, key, value: v } }),\n      text({ id: `${id}:val:${key}`, x: c.x, y: c.y, text: o.format ? o.format(v, i) : show(v), size, weight: 600, role: 'value', tone, enter, exit }),\n    );\n  });\n  if (o.showIndices ?? true) {\n    values.forEach((_, i) => {\n      const c = center(i);\n      const p = o.vertical ? V2(c.x - cell / 2 - 10, c.y) : V2(c.x, c.y + cell / 2 + 14);\n      nodes.push(text({ id: `${id}:idx:${i}`, x: p.x, y: p.y, text: String(i), size: 12, role: 'index', anchor: o.vertical ? 'end' : 'middle' }));\n    });\n  }\n\n  const half = cell / 2;\n  return {\n    nodes,\n    length: values.length,\n    cell,\n    center,\n    top: (i) => V2(center(i).x, center(i).y - half),\n    bottom: (i) => V2(center(i).x, center(i).y + half),\n    left: (i) => V2(center(i).x - half, center(i).y),\n    right: (i) => V2(center(i).x + half, center(i).y),\n    window(lo, hi, w = {}) {\n      if (lo > hi || hi < 0 || lo >= values.length) return null;\n      const pad = w.pad ?? 5;\n      const a = center(Math.max(0, lo)), b = center(Math.min(values.length - 1, hi));\n      return rect({\n        id: w.id ?? `${id}:window`,\n        x: (a.x + b.x) / 2,\n        y: (a.y + b.y) / 2,\n        w: Math.abs(b.x - a.x) + cell + 2 * pad,\n        h: Math.abs(b.y - a.y) + cell + 2 * pad,\n        rx: cell * 0.22,\n        role: 'window',\n        tone: w.tone,\n      });\n    },\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/ds/common.d.ts

@@ -0,0 +1,9 @@
+import { Tone } from '../scene';
+export type Key = string | number;
+/**
+ * Most layouts accept tones either as a lookup object (`{ 3: 'active' }`)
+ * or a function (`(i, value) => i === mid ? 'active' : undefined`).
+ */
+export type ToneSpec<K, V = unknown> = Partial<Record<string, Tone>> | ((key: K, value: V) => Tone | undefined);
+export declare function resolveTone<K extends Key, V>(spec: ToneSpec<K, V> | undefined, key: K, value: V): Tone | undefined;
+export declare const show: (v: unknown) => string;

package/dist/ds/common.js

@@ -0,0 +1,10 @@
+function resolveTone(spec, key, value) {
+  if (!spec) return void 0;
+  return typeof spec === "function" ? spec(key, value) : spec[String(key)];
+}
+const show = (v) => v === null || v === void 0 ? "" : String(v);
+export {
+  resolveTone,
+  show
+};
+//# sourceMappingURL=common.js.map

package/dist/ds/common.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ds/common.ts"],
+  "sourcesContent": ["import { Tone } from '../scene';\n\nexport type Key = string | number;\n\n/**\n * Most layouts accept tones either as a lookup object (`{ 3: 'active' }`)\n * or a function (`(i, value) => i === mid ? 'active' : undefined`).\n */\nexport type ToneSpec<K, V = unknown> = Partial<Record<string, Tone>> | ((key: K, value: V) => Tone | undefined);\n\nexport function resolveTone<K extends Key, V>(spec: ToneSpec<K, V> | undefined, key: K, value: V): Tone | undefined {\n  if (!spec) return undefined;\n  return typeof spec === 'function' ? spec(key, value) : spec[String(key)];\n}\n\nexport const show = (v: unknown): string => (v === null || v === undefined ? '' : String(v));\n"],
+  "mappings": "AAUO,SAAS,YAA8B,MAAkC,KAAQ,OAA4B;AAClH,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,OAAO,SAAS,aAAa,KAAK,KAAK,KAAK,IAAI,KAAK,OAAO,GAAG,CAAC;AACzE;AAEO,MAAM,OAAO,CAAC,MAAwB,MAAM,QAAQ,MAAM,SAAY,KAAK,OAAO,CAAC;",
+  "names": []
+}

package/dist/ds/graph.d.ts

@@ -0,0 +1,39 @@
+import { Scene, Tone } from '../scene';
+import { Vec } from '../vec';
+import { Key } from './common';
+export interface GraphNodeSpec {
+    id: Key;
+    label?: string | number;
+    x?: number;
+    y?: number;
+    tone?: Tone;
+}
+export interface GraphEdgeSpec {
+    from: Key;
+    to: Key;
+    label?: string | number;
+    tone?: Tone;
+    /** Override the graph-wide `directed` for this edge. */
+    directed?: boolean;
+    /** Force a curve. Antiparallel directed pairs (a→b, b→a) curve automatically. */
+    bend?: number;
+}
+export interface GraphOptions {
+    id?: string;
+    r?: number;
+    directed?: boolean;
+    /** Centre + radius for the circular fallback layout. */
+    cx?: number;
+    cy?: number;
+    radius?: number;
+    draggable?: boolean;
+    interactive?: boolean;
+}
+export interface GraphDiagram extends Scene {
+    pos(id: Key): Vec;
+    top(id: Key): Vec;
+    bottom(id: Key): Vec;
+}
+/** Place n points evenly on a circle, starting at 12 o'clock. */
+export declare function circularPositions(n: number, cx?: number, cy?: number, radius?: number): Vec[];
+export declare function graph(nodes: readonly GraphNodeSpec[], edges: readonly GraphEdgeSpec[], o?: GraphOptions): GraphDiagram;

package/dist/ds/graph.js

@@ -0,0 +1,57 @@
+import { bendControl, pointOnArrow } from "../describe.js";
+import { arrow, circle, text } from "../scene.js";
+import { V2, vnorm, vsub } from "../vec.js";
+import { show } from "./common.js";
+function circularPositions(n, cx = 0, cy = 0, radius = 120) {
+  return Array.from({ length: n }, (_, i) => {
+    const a = -Math.PI / 2 + 2 * Math.PI * i / Math.max(1, n);
+    return V2(cx + radius * Math.cos(a), cy + radius * Math.sin(a));
+  });
+}
+function graph(nodes, edges, o = {}) {
+  const id = o.id ?? "graph";
+  const r = o.r ?? 22;
+  const ring = circularPositions(nodes.length, o.cx ?? 0, o.cy ?? 0, o.radius ?? Math.max(90, nodes.length * 22));
+  const pos = /* @__PURE__ */ new Map();
+  nodes.forEach((n, i) => pos.set(String(n.id), n.x != null && n.y != null ? V2(n.x, n.y) : ring[i]));
+  const P = (k) => pos.get(String(k)) ?? V2(0, 0);
+  const pairs = new Set(edges.map((e) => `${e.from}\u2192${e.to}`));
+  const out = [];
+  const labels = [];
+  for (const e of edges) {
+    const directed = e.directed ?? o.directed ?? false;
+    const a = P(e.from), b = P(e.to);
+    const antiparallel = directed && pairs.has(`${e.to}\u2192${e.from}`);
+    const bend = e.bend ?? (antiparallel ? 22 : 0);
+    const c = bendControl(a, b, bend);
+    const da = vnorm(vsub(Math.abs(bend) > 0.5 ? c : b, a));
+    const db = vnorm(vsub(Math.abs(bend) > 0.5 ? c : a, b));
+    const pad = directed ? 3 : 0;
+    const s = V2(a.x + da.x * r, a.y + da.y * r);
+    const t = V2(b.x + db.x * (r + pad), b.y + db.y * (r + pad));
+    const eid = `${id}:edge:${e.from}-${e.to}`;
+    out.push(arrow({ id: eid, x1: s.x, y1: s.y, x2: t.x, y2: t.y, bend, head: directed, tone: e.tone, data: e }));
+    if (e.label != null) {
+      const m = pointOnArrow(s, t, bend, 0.5);
+      labels.push(text({ id: `${eid}:label`, x: m.x, y: m.y, text: show(e.label), size: 13, role: "edge-label", tone: e.tone }));
+    }
+  }
+  for (const n of nodes) {
+    const p = P(n.id);
+    out.push(
+      circle({ id: `${id}:node:${n.id}`, x: p.x, y: p.y, r, tone: n.tone, draggable: o.draggable, interactive: o.interactive, data: n })
+    );
+    out.push(text({ id: `${id}:label:${n.id}`, x: p.x, y: p.y, text: show(n.label ?? n.id), size: 15, weight: 600, role: "value", tone: n.tone }));
+  }
+  return {
+    nodes: [...out, ...labels],
+    pos: P,
+    top: (k) => V2(P(k).x, P(k).y - r),
+    bottom: (k) => V2(P(k).x, P(k).y + r)
+  };
+}
+export {
+  circularPositions,
+  graph
+};
+//# sourceMappingURL=graph.js.map

package/dist/ds/graph.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ds/graph.ts"],
+  "sourcesContent": ["/**\n * General graphs: nodes as circles, edges as (optionally curved, optionally\n * directed, optionally weighted) lines.\n *\n * Positions are YOUR state. Give nodes x/y (e.g. updated from drag events) or\n * let the layout place unpositioned nodes on a circle. Real force-directed\n * layout is out of scope \u2014 but because positions are just data, you can plug\n * one in (d3-force, or your own) and feed the results back in.\n */\nimport { bendControl, pointOnArrow } from '../describe';\nimport { Scene, SceneNode, Tone, arrow, circle, text } from '../scene';\nimport { V2, Vec, vnorm, vsub } from '../vec';\nimport { Key, show } from './common';\n\nexport interface GraphNodeSpec {\n  id: Key;\n  label?: string | number;\n  x?: number;\n  y?: number;\n  tone?: Tone;\n}\n\nexport interface GraphEdgeSpec {\n  from: Key;\n  to: Key;\n  label?: string | number;\n  tone?: Tone;\n  /** Override the graph-wide `directed` for this edge. */\n  directed?: boolean;\n  /** Force a curve. Antiparallel directed pairs (a\u2192b, b\u2192a) curve automatically. */\n  bend?: number;\n}\n\nexport interface GraphOptions {\n  id?: string;\n  r?: number;\n  directed?: boolean;\n  /** Centre + radius for the circular fallback layout. */\n  cx?: number;\n  cy?: number;\n  radius?: number;\n  draggable?: boolean;\n  interactive?: boolean;\n}\n\nexport interface GraphDiagram extends Scene {\n  pos(id: Key): Vec;\n  top(id: Key): Vec;\n  bottom(id: Key): Vec;\n}\n\n/** Place n points evenly on a circle, starting at 12 o'clock. */\nexport function circularPositions(n: number, cx = 0, cy = 0, radius = 120): Vec[] {\n  return Array.from({ length: n }, (_, i) => {\n    const a = -Math.PI / 2 + (2 * Math.PI * i) / Math.max(1, n);\n    return V2(cx + radius * Math.cos(a), cy + radius * Math.sin(a));\n  });\n}\n\nexport function graph(nodes: readonly GraphNodeSpec[], edges: readonly GraphEdgeSpec[], o: GraphOptions = {}): GraphDiagram {\n  const id = o.id ?? 'graph';\n  const r = o.r ?? 22;\n  const ring = circularPositions(nodes.length, o.cx ?? 0, o.cy ?? 0, o.radius ?? Math.max(90, nodes.length * 22));\n  const pos = new Map<string, Vec>();\n  nodes.forEach((n, i) => pos.set(String(n.id), n.x != null && n.y != null ? V2(n.x, n.y) : ring[i]));\n  const P = (k: Key) => pos.get(String(k)) ?? V2(0, 0);\n\n  const pairs = new Set(edges.map((e) => `${e.from}\u2192${e.to}`));\n  const out: SceneNode[] = [];\n  const labels: SceneNode[] = [];\n\n  for (const e of edges) {\n    const directed = e.directed ?? o.directed ?? false;\n    const a = P(e.from), b = P(e.to);\n    const antiparallel = directed && pairs.has(`${e.to}\u2192${e.from}`);\n    const bend = e.bend ?? (antiparallel ? 22 : 0);\n    // Trim both ends to the circle boundary, along the curve's actual tangent.\n    const c = bendControl(a, b, bend);\n    const da = vnorm(vsub(Math.abs(bend) > 0.5 ? c : b, a));\n    const db = vnorm(vsub(Math.abs(bend) > 0.5 ? c : a, b));\n    const pad = directed ? 3 : 0;\n    const s = V2(a.x + da.x * r, a.y + da.y * r);\n    const t = V2(b.x + db.x * (r + pad), b.y + db.y * (r + pad));\n    const eid = `${id}:edge:${e.from}-${e.to}`;\n    out.push(arrow({ id: eid, x1: s.x, y1: s.y, x2: t.x, y2: t.y, bend, head: directed, tone: e.tone, data: e }));\n    if (e.label != null) {\n      const m = pointOnArrow(s, t, bend, 0.5);\n      labels.push(text({ id: `${eid}:label`, x: m.x, y: m.y, text: show(e.label), size: 13, role: 'edge-label', tone: e.tone }));\n    }\n  }\n  for (const n of nodes) {\n    const p = P(n.id);\n    out.push(\n      circle({ id: `${id}:node:${n.id}`, x: p.x, y: p.y, r, tone: n.tone, draggable: o.draggable, interactive: o.interactive, data: n }),\n    );\n    out.push(text({ id: `${id}:label:${n.id}`, x: p.x, y: p.y, text: show(n.label ?? n.id), size: 15, weight: 600, role: 'value', tone: n.tone }));\n  }\n  return {\n    nodes: [...out, ...labels],\n    pos: P,\n    top: (k) => V2(P(k).x, P(k).y - r),\n    bottom: (k) => V2(P(k).x, P(k).y + r),\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/ds/grid.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 2D grids: DP tables, BFS on a maze, matrices, game boards.
+ * Cells are identified by (row, col), with optional row/column headers
+ * (e.g. the two strings of an LCS / edit-distance table).
+ */
+import { Scene, Tone } from '../scene';
+import { Vec } from '../vec';
+export interface GridOptions<T = unknown> {
+    id?: string;
+    x?: number;
+    y?: number;
+    cell?: number;
+    /** Width and height of a cell when it is not square: a table of words. Default `cell`. */
+    cellWidth?: number;
+    cellHeight?: number;
+    gap?: number;
+    tones?: (r: number, c: number, v: T) => Tone | undefined;
+    rowLabels?: readonly (string | number)[];
+    colLabels?: readonly (string | number)[];
+    format?: (v: T, r: number, c: number) => string;
+    interactive?: boolean;
+}
+export interface GridDiagram extends Scene {
+    center(r: number, c: number): Vec;
+    top(r: number, c: number): Vec;
+    bottom(r: number, c: number): Vec;
+    left(r: number, c: number): Vec;
+    right(r: number, c: number): Vec;
+}
+export declare function grid<T>(rows: readonly (readonly T[])[], o?: GridOptions<T>): GridDiagram;

package/dist/ds/grid.js

@@ -0,0 +1,41 @@
+import { rect, text } from "../scene.js";
+import { V2 } from "../vec.js";
+import { show } from "./common.js";
+function grid(rows, o = {}) {
+  const id = o.id ?? "grid";
+  const cell = o.cell ?? 40, gap = o.gap ?? 4;
+  const cw = o.cellWidth ?? cell, ch = o.cellHeight ?? cell;
+  const x0 = o.x ?? 0, y0 = o.y ?? 0;
+  const center = (r, c) => V2(x0 + c * (cw + gap) + cw / 2, y0 + r * (ch + gap) + ch / 2);
+  const nodes = [];
+  const texts = [];
+  rows.forEach(
+    (row, r) => row.forEach((v, c) => {
+      const p = center(r, c);
+      const tone = o.tones?.(r, c, v);
+      nodes.push(rect({ id: `${id}:cell:${r},${c}`, x: p.x, y: p.y, w: cw, h: ch, rx: 6, tone, interactive: o.interactive, data: { r, c, value: v } }));
+      const s = o.format ? o.format(v, r, c) : show(v);
+      if (s) nodes.push(text({ id: `${id}:val:${r},${c}`, x: p.x, y: p.y, text: s, size: Math.round(Math.min(cw, ch) * 0.38), weight: 600, role: "value", tone }));
+    })
+  );
+  o.colLabels?.forEach((l, c) => {
+    const p = center(0, c);
+    texts.push(text({ id: `${id}:col:${c}`, x: p.x, y: p.y - ch / 2 - 14, text: show(l), size: 13, role: "caption" }));
+  });
+  o.rowLabels?.forEach((l, r) => {
+    const p = center(r, 0);
+    texts.push(text({ id: `${id}:row:${r}`, x: p.x - cw / 2 - 12, y: p.y, text: show(l), size: 13, role: "caption", anchor: "end" }));
+  });
+  return {
+    nodes: [...nodes, ...texts],
+    center,
+    top: (r, c) => V2(center(r, c).x, center(r, c).y - ch / 2),
+    bottom: (r, c) => V2(center(r, c).x, center(r, c).y + ch / 2),
+    left: (r, c) => V2(center(r, c).x - cw / 2, center(r, c).y),
+    right: (r, c) => V2(center(r, c).x + cw / 2, center(r, c).y)
+  };
+}
+export {
+  grid
+};
+//# sourceMappingURL=grid.js.map

package/dist/ds/grid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ds/grid.ts"],
+  "sourcesContent": ["/**\n * 2D grids: DP tables, BFS on a maze, matrices, game boards.\n * Cells are identified by (row, col), with optional row/column headers\n * (e.g. the two strings of an LCS / edit-distance table).\n */\nimport { Scene, SceneNode, Tone, rect, text } from '../scene';\nimport { V2, Vec } from '../vec';\nimport { show } from './common';\n\nexport interface GridOptions<T = unknown> {\n  id?: string;\n  x?: number;\n  y?: number;\n  cell?: number;\n  /** Width and height of a cell when it is not square: a table of words. Default `cell`. */\n  cellWidth?: number;\n  cellHeight?: number;\n  gap?: number;\n  tones?: (r: number, c: number, v: T) => Tone | undefined;\n  rowLabels?: readonly (string | number)[];\n  colLabels?: readonly (string | number)[];\n  format?: (v: T, r: number, c: number) => string;\n  interactive?: boolean;\n}\n\nexport interface GridDiagram extends Scene {\n  center(r: number, c: number): Vec;\n  top(r: number, c: number): Vec;\n  bottom(r: number, c: number): Vec;\n  left(r: number, c: number): Vec;\n  right(r: number, c: number): Vec;\n}\n\nexport function grid<T>(rows: readonly (readonly T[])[], o: GridOptions<T> = {}): GridDiagram {\n  const id = o.id ?? 'grid';\n  const cell = o.cell ?? 40, gap = o.gap ?? 4;\n  const cw = o.cellWidth ?? cell, ch = o.cellHeight ?? cell;\n  const x0 = o.x ?? 0, y0 = o.y ?? 0;\n  const center = (r: number, c: number) => V2(x0 + c * (cw + gap) + cw / 2, y0 + r * (ch + gap) + ch / 2);\n  const nodes: SceneNode[] = [];\n  const texts: SceneNode[] = [];\n\n  rows.forEach((row, r) =>\n    row.forEach((v, c) => {\n      const p = center(r, c);\n      const tone = o.tones?.(r, c, v);\n      nodes.push(rect({ id: `${id}:cell:${r},${c}`, x: p.x, y: p.y, w: cw, h: ch, rx: 6, tone, interactive: o.interactive, data: { r, c, value: v } }));\n      const s = o.format ? o.format(v, r, c) : show(v);\n      // the value goes right after its cell: CSS moves it with the cell (`cell:active + text`)\n      if (s) nodes.push(text({ id: `${id}:val:${r},${c}`, x: p.x, y: p.y, text: s, size: Math.round(Math.min(cw, ch) * 0.38), weight: 600, role: 'value', tone }));\n    }),\n  );\n  o.colLabels?.forEach((l, c) => {\n    const p = center(0, c);\n    texts.push(text({ id: `${id}:col:${c}`, x: p.x, y: p.y - ch / 2 - 14, text: show(l), size: 13, role: 'caption' }));\n  });\n  o.rowLabels?.forEach((l, r) => {\n    const p = center(r, 0);\n    texts.push(text({ id: `${id}:row:${r}`, x: p.x - cw / 2 - 12, y: p.y, text: show(l), size: 13, role: 'caption', anchor: 'end' }));\n  });\n\n  return {\n    nodes: [...nodes, ...texts],\n    center,\n    top: (r, c) => V2(center(r, c).x, center(r, c).y - ch / 2),\n    bottom: (r, c) => V2(center(r, c).x, center(r, c).y + ch / 2),\n    left: (r, c) => V2(center(r, c).x - cw / 2, center(r, c).y),\n    right: (r, c) => V2(center(r, c).x + cw / 2, center(r, c).y),\n  };\n}\n"],
+  "mappings": "AAKA,SAAiC,MAAM,YAAY;AACnD,SAAS,UAAe;AACxB,SAAS,YAAY;AA0Bd,SAAS,KAAQ,MAAiC,IAAoB,CAAC,GAAgB;AAC5F,QAAM,KAAK,EAAE,MAAM;AACnB,QAAM,OAAO,EAAE,QAAQ,IAAI,MAAM,EAAE,OAAO;AAC1C,QAAM,KAAK,EAAE,aAAa,MAAM,KAAK,EAAE,cAAc;AACrD,QAAM,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,KAAK;AACjC,QAAM,SAAS,CAAC,GAAW,MAAc,GAAG,KAAK,KAAK,KAAK,OAAO,KAAK,GAAG,KAAK,KAAK,KAAK,OAAO,KAAK,CAAC;AACtG,QAAM,QAAqB,CAAC;AAC5B,QAAM,QAAqB,CAAC;AAE5B,OAAK;AAAA,IAAQ,CAAC,KAAK,MACjB,IAAI,QAAQ,CAAC,GAAG,MAAM;AACpB,YAAM,IAAI,OAAO,GAAG,CAAC;AACrB,YAAM,OAAO,EAAE,QAAQ,GAAG,GAAG,CAAC;AAC9B,YAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,SAAS,CAAC,IAAI,CAAC,IAAI,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,MAAM,aAAa,EAAE,aAAa,MAAM,EAAE,GAAG,GAAG,OAAO,EAAE,EAAE,CAAC,CAAC;AAChJ,YAAM,IAAI,EAAE,SAAS,EAAE,OAAO,GAAG,GAAG,CAAC,IAAI,KAAK,CAAC;AAE/C,UAAI,EAAG,OAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG,MAAM,KAAK,MAAM,KAAK,IAAI,IAAI,EAAE,IAAI,IAAI,GAAG,QAAQ,KAAK,MAAM,SAAS,KAAK,CAAC,CAAC;AAAA,IAC7J,CAAC;AAAA,EACH;AACA,IAAE,WAAW,QAAQ,CAAC,GAAG,MAAM;AAC7B,UAAM,IAAI,OAAO,GAAG,CAAC;AACrB,UAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,QAAQ,CAAC,IAAI,GAAG,EAAE,GAAG,GAAG,EAAE,IAAI,KAAK,IAAI,IAAI,MAAM,KAAK,CAAC,GAAG,MAAM,IAAI,MAAM,UAAU,CAAC,CAAC;AAAA,EACnH,CAAC;AACD,IAAE,WAAW,QAAQ,CAAC,GAAG,MAAM;AAC7B,UAAM,IAAI,OAAO,GAAG,CAAC;AACrB,UAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,QAAQ,CAAC,IAAI,GAAG,EAAE,IAAI,KAAK,IAAI,IAAI,GAAG,EAAE,GAAG,MAAM,KAAK,CAAC,GAAG,MAAM,IAAI,MAAM,WAAW,QAAQ,MAAM,CAAC,CAAC;AAAA,EAClI,CAAC;AAED,SAAO;AAAA,IACL,OAAO,CAAC,GAAG,OAAO,GAAG,KAAK;AAAA,IAC1B;AAAA,IACA,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,EAAE,GAAG,OAAO,GAAG,CAAC,EAAE,IAAI,KAAK,CAAC;AAAA,IACzD,QAAQ,CAAC,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,EAAE,GAAG,OAAO,GAAG,CAAC,EAAE,IAAI,KAAK,CAAC;AAAA,IAC5D,MAAM,CAAC,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,EAAE,IAAI,KAAK,GAAG,OAAO,GAAG,CAAC,EAAE,CAAC;AAAA,IAC1D,OAAO,CAAC,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,EAAE,IAAI,KAAK,GAAG,OAAO,GAAG,CAAC,EAAE,CAAC;AAAA,EAC7D;AACF;",
+  "names": []
+}

package/dist/ds/index.d.ts

@@ -0,0 +1,8 @@
+export * from './common';
+export * from './array';
+export * from './pointer';
+export * from './linkedList';
+export * from './tree';
+export * from './graph';
+export * from './grid';
+export * from './stackQueue';

package/dist/ds/index.js

@@ -0,0 +1,9 @@
+export * from "./common.js";
+export * from "./array.js";
+export * from "./pointer.js";
+export * from "./linkedList.js";
+export * from "./tree.js";
+export * from "./graph.js";
+export * from "./grid.js";
+export * from "./stackQueue.js";
+//# sourceMappingURL=index.js.map

package/dist/ds/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ds/index.ts"],
+  "sourcesContent": ["export * from './common';\nexport * from './array';\nexport * from './pointer';\nexport * from './linkedList';\nexport * from './tree';\nexport * from './graph';\nexport * from './grid';\nexport * from './stackQueue';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/dist/ds/linkedList.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Singly linked lists drawn as [value|•]──▶ boxes.
+ *
+ * You describe the list as data — each node says who its `next` is — and the
+ * layout draws whatever those pointers say, even mid-algorithm states where the
+ * list is broken in two (that's exactly what you want for "reverse a list").
+ *
+ *  - Boxes are placed left→right in `order` (default: walk from the first node).
+ *  - Each `next` arrow is identified by the node it STARTS from, so when you
+ *    change `a.next` from b to z the arrow swings over instead of popping.
+ *  - Arrows pointing backwards curve underneath the row.
+ */
+import { Scene, Tone } from '../scene';
+import { Vec } from '../vec';
+import { Key } from './common';
+export interface ListNodeSpec {
+    key: Key;
+    value: unknown;
+    next: Key | null;
+    tone?: Tone;
+}
+export interface LinkedListOptions {
+    id?: string;
+    x?: number;
+    y?: number;
+    /** Width of the value part. Default 52. */
+    w?: number;
+    h?: number;
+    /** Horizontal space between boxes (room for the arrow). Default 44. */
+    gap?: number;
+    /** Explicit left→right placement. Default: follow `next` from nodes[0]. */
+    order?: Key[];
+    /** Tone for the next-arrow leaving a node. */
+    arrowTones?: Partial<Record<string, Tone>>;
+}
+export interface LinkedListDiagram extends Scene {
+    /** Centre of a node's value box. */
+    center(key: Key): Vec;
+    top(key: Key): Vec;
+    bottom(key: Key): Vec;
+    /** A point left of slot 0 / right of the last slot (for null pointers). */
+    slot(i: number): Vec;
+}
+/** Convenience: turn [1, 2, 3] into node specs keyed 'n0', 'n1', … */
+export declare function listFromValues(values: readonly unknown[], prefix?: string): ListNodeSpec[];
+export declare function linkedList(list: readonly ListNodeSpec[], o?: LinkedListOptions): LinkedListDiagram;

package/dist/ds/linkedList.js

@@ -0,0 +1,68 @@
+import { arrow, circle, rect, text } from "../scene.js";
+import { V2 } from "../vec.js";
+import { show } from "./common.js";
+function listFromValues(values, prefix = "n") {
+  return values.map((value, i) => ({ key: `${prefix}${i}`, value, next: i + 1 < values.length ? `${prefix}${i + 1}` : null }));
+}
+function linkedList(list, o = {}) {
+  const id = o.id ?? "list";
+  const x0 = o.x ?? 0, y0 = o.y ?? 0;
+  const w = o.w ?? 44, h = o.h ?? 38, gap = o.gap ?? 34;
+  const pw = h * 0.62;
+  const boxW = w + pw;
+  const step = boxW + gap;
+  const byKey = new Map(list.map((n) => [String(n.key), n]));
+  let order = o.order ? [...o.order] : [];
+  if (!o.order && list.length) {
+    const seen = /* @__PURE__ */ new Set();
+    let cur = list[0];
+    while (cur && !seen.has(String(cur.key))) {
+      seen.add(String(cur.key));
+      order.push(cur.key);
+      cur = cur.next == null ? void 0 : byKey.get(String(cur.next));
+    }
+    for (const n of list) if (!seen.has(String(n.key))) order.push(n.key);
+  }
+  const slotOf = new Map(order.map((k, i) => [String(k), i]));
+  const slot = (i) => V2(x0 + i * step + w / 2, y0 + h / 2);
+  const center = (k) => slot(slotOf.get(String(k)) ?? 0);
+  const boxes = [];
+  const arrows = [];
+  for (const n of list) {
+    const c = center(n.key);
+    const pc = V2(c.x + w / 2 + pw / 2, c.y);
+    boxes.push(
+      rect({ id: `${id}:val:${n.key}`, x: c.x, y: c.y, w, h, rx: 6, tone: n.tone, data: n }),
+      text({ id: `${id}:txt:${n.key}`, x: c.x, y: c.y, text: show(n.value), size: 15, role: "value", tone: n.tone }),
+      rect({ id: `${id}:ptr:${n.key}`, x: pc.x, y: pc.y, w: pw, h, rx: 6, tone: n.tone })
+    );
+    const target = n.next == null ? void 0 : byKey.get(String(n.next));
+    if (!target) {
+      boxes.push(text({ id: `${id}:null:${n.key}`, x: pc.x, y: pc.y + 1, text: "\u2205", size: 14, role: "null" }));
+      continue;
+    }
+    boxes.push(circle({ id: `${id}:dot:${n.key}`, x: pc.x, y: pc.y, r: 3.5, role: "dot" }));
+    const t = center(target.key);
+    const tone = o.arrowTones?.[String(n.key)];
+    if (t.x > pc.x) {
+      arrows.push(arrow({ id: `${id}:next:${n.key}`, x1: pc.x, y1: pc.y, x2: t.x - w / 2 - 3, y2: t.y, tone }));
+    } else {
+      const span = Math.abs(t.x - pc.x);
+      arrows.push(
+        arrow({ id: `${id}:next:${n.key}`, x1: pc.x, y1: pc.y + h / 2, x2: t.x, y2: t.y + h / 2 + 3, bend: -(26 + span * 0.18), tone })
+      );
+    }
+  }
+  return {
+    nodes: [...arrows, ...boxes],
+    center,
+    top: (k) => V2(center(k).x + pw / 2, center(k).y - h / 2),
+    bottom: (k) => V2(center(k).x + pw / 2, center(k).y + h / 2),
+    slot
+  };
+}
+export {
+  linkedList,
+  listFromValues
+};
+//# sourceMappingURL=linkedList.js.map

package/dist/ds/linkedList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ds/linkedList.ts"],
+  "sourcesContent": ["/**\n * Singly linked lists drawn as [value|\u2022]\u2500\u2500\u25B6 boxes.\n *\n * You describe the list as data \u2014 each node says who its `next` is \u2014 and the\n * layout draws whatever those pointers say, even mid-algorithm states where the\n * list is broken in two (that's exactly what you want for \"reverse a list\").\n *\n *  - Boxes are placed left\u2192right in `order` (default: walk from the first node).\n *  - Each `next` arrow is identified by the node it STARTS from, so when you\n *    change `a.next` from b to z the arrow swings over instead of popping.\n *  - Arrows pointing backwards curve underneath the row.\n */\nimport { Scene, SceneNode, Tone, arrow, circle, rect, text } from '../scene';\nimport { V2, Vec } from '../vec';\nimport { Key, show } from './common';\n\nexport interface ListNodeSpec {\n  key: Key;\n  value: unknown;\n  next: Key | null;\n  tone?: Tone;\n}\n\nexport interface LinkedListOptions {\n  id?: string;\n  x?: number;\n  y?: number;\n  /** Width of the value part. Default 52. */\n  w?: number;\n  h?: number;\n  /** Horizontal space between boxes (room for the arrow). Default 44. */\n  gap?: number;\n  /** Explicit left\u2192right placement. Default: follow `next` from nodes[0]. */\n  order?: Key[];\n  /** Tone for the next-arrow leaving a node. */\n  arrowTones?: Partial<Record<string, Tone>>;\n}\n\nexport interface LinkedListDiagram extends Scene {\n  /** Centre of a node's value box. */\n  center(key: Key): Vec;\n  top(key: Key): Vec;\n  bottom(key: Key): Vec;\n  /** A point left of slot 0 / right of the last slot (for null pointers). */\n  slot(i: number): Vec;\n}\n\n/** Convenience: turn [1, 2, 3] into node specs keyed 'n0', 'n1', \u2026 */\nexport function listFromValues(values: readonly unknown[], prefix = 'n'): ListNodeSpec[] {\n  return values.map((value, i) => ({ key: `${prefix}${i}`, value, next: i + 1 < values.length ? `${prefix}${i + 1}` : null }));\n}\n\nexport function linkedList(list: readonly ListNodeSpec[], o: LinkedListOptions = {}): LinkedListDiagram {\n  const id = o.id ?? 'list';\n  const x0 = o.x ?? 0, y0 = o.y ?? 0;\n  const w = o.w ?? 44, h = o.h ?? 38, gap = o.gap ?? 34;\n  const pw = h * 0.62; // width of the \"next\" compartment\n  const boxW = w + pw;\n  const step = boxW + gap;\n  const byKey = new Map(list.map((n) => [String(n.key), n]));\n\n  // Placement order: explicit, or walk from the head, then any stragglers.\n  let order: Key[] = o.order ? [...o.order] : [];\n  if (!o.order && list.length) {\n    const seen = new Set<string>();\n    let cur: ListNodeSpec | undefined = list[0];\n    while (cur && !seen.has(String(cur.key))) {\n      seen.add(String(cur.key));\n      order.push(cur.key);\n      cur = cur.next == null ? undefined : byKey.get(String(cur.next));\n    }\n    for (const n of list) if (!seen.has(String(n.key))) order.push(n.key);\n  }\n  const slotOf = new Map(order.map((k, i) => [String(k), i]));\n\n  // Slot i's value box centre; the pointer compartment sits to its right.\n  const slot = (i: number) => V2(x0 + i * step + w / 2, y0 + h / 2);\n  const center = (k: Key) => slot(slotOf.get(String(k)) ?? 0);\n\n  const boxes: SceneNode[] = [];\n  const arrows: SceneNode[] = [];\n  for (const n of list) {\n    const c = center(n.key);\n    const pc = V2(c.x + w / 2 + pw / 2, c.y); // pointer compartment centre\n    boxes.push(\n      rect({ id: `${id}:val:${n.key}`, x: c.x, y: c.y, w, h, rx: 6, tone: n.tone, data: n }),\n      text({ id: `${id}:txt:${n.key}`, x: c.x, y: c.y, text: show(n.value), size: 15, role: 'value', tone: n.tone }),\n      rect({ id: `${id}:ptr:${n.key}`, x: pc.x, y: pc.y, w: pw, h, rx: 6, tone: n.tone }),\n    );\n    const target = n.next == null ? undefined : byKey.get(String(n.next));\n    if (!target) {\n      boxes.push(text({ id: `${id}:null:${n.key}`, x: pc.x, y: pc.y + 1, text: '\u2205', size: 14, role: 'null' }));\n      continue;\n    }\n    boxes.push(circle({ id: `${id}:dot:${n.key}`, x: pc.x, y: pc.y, r: 3.5, role: 'dot' }));\n    const t = center(target.key);\n    const tone = o.arrowTones?.[String(n.key)];\n    if (t.x > pc.x) {\n      // forward: straight across to the target's left edge\n      arrows.push(arrow({ id: `${id}:next:${n.key}`, x1: pc.x, y1: pc.y, x2: t.x - w / 2 - 3, y2: t.y, tone }));\n    } else {\n      // backward (or self): leave from the bottom and curve under the row\n      const span = Math.abs(t.x - pc.x);\n      arrows.push(\n        arrow({ id: `${id}:next:${n.key}`, x1: pc.x, y1: pc.y + h / 2, x2: t.x, y2: t.y + h / 2 + 3, bend: -(26 + span * 0.18), tone }),\n      );\n    }\n  }\n\n  return {\n    nodes: [...arrows, ...boxes],\n    center,\n    top: (k) => V2(center(k).x + pw / 2, center(k).y - h / 2),\n    bottom: (k) => V2(center(k).x + pw / 2, center(k).y + h / 2),\n    slot,\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/ds/pointer.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A labelled pointer arrow (lo / hi / mid / curr / prev …).
+ *
+ * Give each pointer a stable `id` (e.g. 'mid') and just change `at` between
+ * renders — the arrow and its label slide to the new target.
+ */
+import { Scene, Tone } from '../scene';
+import { Vec } from '../vec';
+export interface PointerOptions {
+    id: string;
+    /** The point the arrow tip touches, e.g. `arr.top(i)`. */
+    at: Vec;
+    label?: string;
+    /** Which side the pointer comes from. Default 'top'. */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    length?: number;
+    /** Gap between the tip and the target. Default 4. */
+    gap?: number;
+    /** Stack several pointers at the same spot: level 1 sits one label further out. */
+    level?: number;
+    tone?: Tone;
+}
+export declare function pointer(o: PointerOptions): Scene;

package/dist/ds/pointer.js

@@ -0,0 +1,35 @@
+import { arrow, estimateTextWidth, rect, text } from "../scene.js";
+function pointer(o) {
+  const len = o.length ?? 26;
+  const gap = o.gap ?? 4;
+  const side = o.side ?? "top";
+  const out = (o.level ?? 0) * 18;
+  const dir = { top: [0, -1], bottom: [0, 1], left: [-1, 0], right: [1, 0] }[side];
+  const tip = { x: o.at.x + dir[0] * gap, y: o.at.y + dir[1] * gap };
+  const tail = { x: tip.x + dir[0] * len, y: tip.y + dir[1] * len };
+  const tone = o.tone ?? "accent";
+  const lab = { x: tail.x + dir[0] * (13 + out), y: tail.y + dir[1] * (13 + out) };
+  const nodes = [arrow({ id: `${o.id}:arrow`, x1: tail.x, y1: tail.y, x2: tip.x, y2: tip.y, tone, width: 2 })];
+  if (o.label) {
+    const w = estimateTextWidth(o.label, 13) + 16;
+    const tx = side === "left" ? lab.x - w / 2 : side === "right" ? lab.x + w / 2 : lab.x;
+    nodes.push(rect({ id: `${o.id}:tag`, x: tx, y: lab.y, w, h: 21, rx: 10.5, role: "tag", tone }));
+    nodes.push(
+      text({
+        id: `${o.id}:label`,
+        x: lab.x,
+        y: lab.y,
+        text: o.label,
+        size: 13,
+        role: "pointer-label",
+        tone,
+        anchor: side === "left" ? "end" : side === "right" ? "start" : "middle"
+      })
+    );
+  }
+  return { nodes };
+}
+export {
+  pointer
+};
+//# sourceMappingURL=pointer.js.map

package/dist/ds/pointer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ds/pointer.ts"],
+  "sourcesContent": ["/**\n * A labelled pointer arrow (lo / hi / mid / curr / prev \u2026).\n *\n * Give each pointer a stable `id` (e.g. 'mid') and just change `at` between\n * renders \u2014 the arrow and its label slide to the new target.\n */\nimport { Scene, SceneNode, Tone, arrow, estimateTextWidth, rect, text } from '../scene';\nimport { Vec } from '../vec';\n\nexport interface PointerOptions {\n  id: string;\n  /** The point the arrow tip touches, e.g. `arr.top(i)`. */\n  at: Vec;\n  label?: string;\n  /** Which side the pointer comes from. Default 'top'. */\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  length?: number;\n  /** Gap between the tip and the target. Default 4. */\n  gap?: number;\n  /** Stack several pointers at the same spot: level 1 sits one label further out. */\n  level?: number;\n  tone?: Tone;\n}\n\nexport function pointer(o: PointerOptions): Scene {\n  const len = o.length ?? 26;\n  const gap = o.gap ?? 4;\n  const side = o.side ?? 'top';\n  const out = (o.level ?? 0) * 18; // labels stack outward, arrows stay put\n  const dir = { top: [0, -1], bottom: [0, 1], left: [-1, 0], right: [1, 0] }[side];\n  const tip = { x: o.at.x + dir[0] * gap, y: o.at.y + dir[1] * gap };\n  const tail = { x: tip.x + dir[0] * len, y: tip.y + dir[1] * len };\n  const tone = o.tone ?? 'accent';\n  const lab = { x: tail.x + dir[0] * (13 + out), y: tail.y + dir[1] * (13 + out) };\n  const nodes: SceneNode[] = [arrow({ id: `${o.id}:arrow`, x1: tail.x, y1: tail.y, x2: tip.x, y2: tip.y, tone, width: 2 })];\n  if (o.label) {\n    // A pill behind the label. Hidden by default; apps can show it with `.dv-role-tag { display: inline }`.\n    const w = estimateTextWidth(o.label, 13) + 16;\n    const tx = side === 'left' ? lab.x - w / 2 : side === 'right' ? lab.x + w / 2 : lab.x;\n    nodes.push(rect({ id: `${o.id}:tag`, x: tx, y: lab.y, w, h: 21, rx: 10.5, role: 'tag', tone }));\n    nodes.push(\n      text({\n        id: `${o.id}:label`,\n        x: lab.x,\n        y: lab.y,\n        text: o.label,\n        size: 13,\n        role: 'pointer-label',\n        tone,\n        anchor: side === 'left' ? 'end' : side === 'right' ? 'start' : 'middle',\n      }),\n    );\n  }\n  return { nodes };\n}\n"],
+  "mappings": "AAMA,SAAiC,OAAO,mBAAmB,MAAM,YAAY;AAkBtE,SAAS,QAAQ,GAA0B;AAChD,QAAM,MAAM,EAAE,UAAU;AACxB,QAAM,MAAM,EAAE,OAAO;AACrB,QAAM,OAAO,EAAE,QAAQ;AACvB,QAAM,OAAO,EAAE,SAAS,KAAK;AAC7B,QAAM,MAAM,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI;AAC/E,QAAM,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,IAAI,IAAI;AACjE,QAAM,OAAO,EAAE,GAAG,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI;AAChE,QAAM,OAAO,EAAE,QAAQ;AACvB,QAAM,MAAM,EAAE,GAAG,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK;AAC/E,QAAM,QAAqB,CAAC,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,UAAU,IAAI,KAAK,GAAG,IAAI,KAAK,GAAG,IAAI,IAAI,GAAG,IAAI,IAAI,GAAG,MAAM,OAAO,EAAE,CAAC,CAAC;AACxH,MAAI,EAAE,OAAO;AAEX,UAAM,IAAI,kBAAkB,EAAE,OAAO,EAAE,IAAI;AAC3C,UAAM,KAAK,SAAS,SAAS,IAAI,IAAI,IAAI,IAAI,SAAS,UAAU,IAAI,IAAI,IAAI,IAAI,IAAI;AACpF,UAAM,KAAK,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,IAAI,MAAM,MAAM,OAAO,KAAK,CAAC,CAAC;AAC9F,UAAM;AAAA,MACJ,KAAK;AAAA,QACH,IAAI,GAAG,EAAE,EAAE;AAAA,QACX,GAAG,IAAI;AAAA,QACP,GAAG,IAAI;AAAA,QACP,MAAM,EAAE;AAAA,QACR,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA,QAAQ,SAAS,SAAS,QAAQ,SAAS,UAAU,UAAU;AAAA,MACjE,CAAC;AAAA,IACH;AAAA,EACF;AACA,SAAO,EAAE,MAAM;AACjB;",
+  "names": []
+}

package/dist/ds/stackQueue.d.ts

@@ -0,0 +1,5 @@
+import { ArrayDiagram, ArrayOptions } from './array';
+/** Bottom of the stack is index 0, drawn at the bottom. */
+export declare function stack<T>(values: readonly T[], o?: ArrayOptions<T>): ArrayDiagram;
+/** Front of the queue is index 0, on the left. Enqueue enters right, dequeue exits left. */
+export declare function queue<T>(values: readonly T[], o?: ArrayOptions<T>): ArrayDiagram;

package/dist/ds/stackQueue.js

@@ -0,0 +1,49 @@
+import { V2 } from "../vec.js";
+import { array } from "./array.js";
+import { resolveTone } from "./common.js";
+function stack(values, o = {}) {
+  const cell = o.cell ?? 44;
+  const gap = o.gap ?? 4;
+  const n = values.length;
+  const reversed = [...values].reverse();
+  const keys = (o.keys ?? values.map((_, i) => i)).slice().reverse();
+  const bottomY = o.y ?? 0;
+  const d = array(reversed, {
+    showIndices: false,
+    ...o,
+    id: o.id ?? "stack",
+    cell,
+    gap,
+    keys,
+    vertical: true,
+    y: bottomY - n * (cell + gap) + gap,
+    tones: o.tones ? (i, v) => resolveTone(o.tones, n - 1 - i, v) : void 0,
+    enterOffset: V2(0, -cell * 1.5),
+    exitOffset: V2(0, -cell * 1.5)
+  });
+  const flip = (i) => n - 1 - i;
+  return {
+    ...d,
+    center: (i) => d.center(flip(i)),
+    top: (i) => d.top(flip(i)),
+    bottom: (i) => d.bottom(flip(i)),
+    left: (i) => d.left(flip(i)),
+    right: (i) => d.right(flip(i))
+  };
+}
+function queue(values, o = {}) {
+  const cell = o.cell ?? 44;
+  return array(values, {
+    showIndices: false,
+    ...o,
+    id: o.id ?? "queue",
+    cell,
+    enterOffset: V2(cell * 1.5, 0),
+    exitOffset: V2(-cell * 1.5, 0)
+  });
+}
+export {
+  queue,
+  stack
+};
+//# sourceMappingURL=stackQueue.js.map