dsviz 0.0.0-stage → 2.0.0

package/dist/ds/stackQueue.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ds/stackQueue.ts"],
+  "sourcesContent": ["/**\n * Stacks and queues are just arrays with opinions about where things come\n * from and go to. Both are thin wrappers around array() that set\n * enter/exit offsets, so pushes drop in and pops/dequeues slide away.\n *\n * Remember to pass stable `keys` \u2014 otherwise popping the top looks like\n * \"the last cell faded out\", which happens to be right for a stack but is\n * wrong for a queue (dequeue removes index 0, and every key shifts).\n */\nimport { V2 } from '../vec';\nimport { ArrayDiagram, ArrayOptions, array } from './array';\nimport { resolveTone } from './common';\n\n/** Bottom of the stack is index 0, drawn at the bottom. */\nexport function stack<T>(values: readonly T[], o: ArrayOptions<T> = {}): ArrayDiagram {\n  const cell = o.cell ?? 44;\n  const gap = o.gap ?? 4;\n  // Draw top-to-bottom reversed so index 0 is at the bottom; y is the stack's BOTTOM edge.\n  const n = values.length;\n  const reversed = [...values].reverse();\n  const keys = (o.keys ?? values.map((_, i) => i)).slice().reverse();\n  const bottomY = o.y ?? 0;\n  const d = array(reversed, {\n    showIndices: false,\n    ...o,\n    id: o.id ?? 'stack',\n    cell,\n    gap,\n    keys,\n    vertical: true,\n    y: bottomY - n * (cell + gap) + gap,\n    tones: o.tones ? (i, v) => resolveTone(o.tones, n - 1 - i, v) : undefined,\n    enterOffset: V2(0, -cell * 1.5),\n    exitOffset: V2(0, -cell * 1.5),\n  });\n  // Re-index helpers so stack.center(0) is the bottom element.\n  const flip = (i: number) => n - 1 - i;\n  return {\n    ...d,\n    center: (i) => d.center(flip(i)),\n    top: (i) => d.top(flip(i)),\n    bottom: (i) => d.bottom(flip(i)),\n    left: (i) => d.left(flip(i)),\n    right: (i) => d.right(flip(i)),\n  };\n}\n\n/** Front of the queue is index 0, on the left. Enqueue enters right, dequeue exits left. */\nexport function queue<T>(values: readonly T[], o: ArrayOptions<T> = {}): ArrayDiagram {\n  const cell = o.cell ?? 44;\n  return array(values, {\n    showIndices: false,\n    ...o,\n    id: o.id ?? 'queue',\n    cell,\n    enterOffset: V2(cell * 1.5, 0),\n    exitOffset: V2(-cell * 1.5, 0),\n  });\n}\n"],
+  "mappings": "AASA,SAAS,UAAU;AACnB,SAAqC,aAAa;AAClD,SAAS,mBAAmB;AAGrB,SAAS,MAAS,QAAsB,IAAqB,CAAC,GAAiB;AACpF,QAAM,OAAO,EAAE,QAAQ;AACvB,QAAM,MAAM,EAAE,OAAO;AAErB,QAAM,IAAI,OAAO;AACjB,QAAM,WAAW,CAAC,GAAG,MAAM,EAAE,QAAQ;AACrC,QAAM,QAAQ,EAAE,QAAQ,OAAO,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,MAAM,EAAE,QAAQ;AACjE,QAAM,UAAU,EAAE,KAAK;AACvB,QAAM,IAAI,MAAM,UAAU;AAAA,IACxB,aAAa;AAAA,IACb,GAAG;AAAA,IACH,IAAI,EAAE,MAAM;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG,UAAU,KAAK,OAAO,OAAO;AAAA,IAChC,OAAO,EAAE,QAAQ,CAAC,GAAG,MAAM,YAAY,EAAE,OAAO,IAAI,IAAI,GAAG,CAAC,IAAI;AAAA,IAChE,aAAa,GAAG,GAAG,CAAC,OAAO,GAAG;AAAA,IAC9B,YAAY,GAAG,GAAG,CAAC,OAAO,GAAG;AAAA,EAC/B,CAAC;AAED,QAAM,OAAO,CAAC,MAAc,IAAI,IAAI;AACpC,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,CAAC,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC;AAAA,IAC/B,KAAK,CAAC,MAAM,EAAE,IAAI,KAAK,CAAC,CAAC;AAAA,IACzB,QAAQ,CAAC,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC;AAAA,IAC/B,MAAM,CAAC,MAAM,EAAE,KAAK,KAAK,CAAC,CAAC;AAAA,IAC3B,OAAO,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,CAAC;AAAA,EAC/B;AACF;AAGO,SAAS,MAAS,QAAsB,IAAqB,CAAC,GAAiB;AACpF,QAAM,OAAO,EAAE,QAAQ;AACvB,SAAO,MAAM,QAAQ;AAAA,IACnB,aAAa;AAAA,IACb,GAAG;AAAA,IACH,IAAI,EAAE,MAAM;AAAA,IACZ;AAAA,IACA,aAAa,GAAG,OAAO,KAAK,CAAC;AAAA,IAC7B,YAAY,GAAG,CAAC,OAAO,KAAK,CAAC;AAAA,EAC/B,CAAC;AACH;",
+  "names": []
+}

package/dist/ds/tree.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Binary trees.
+ *
+ * Layout algorithm (the simplest one that never overlaps):
+ *   x = the node's position in an IN-ORDER traversal
+ *   y = its depth
+ * For a BST this has a lovely property: nodes are sorted left→right by key,
+ * exactly like the array you'd get from an in-order walk. It's wider than a
+ * "tidy" (Reingold–Tilford) layout — implementing that is a great exercise.
+ *
+ * Ids: a node's circle/label use its key; an edge uses its CHILD's key (every
+ * node has exactly one parent edge), so after a rotation the edge re-attaches.
+ * New nodes grow out of their parent via `enter`.
+ */
+import { Scene } from '../scene';
+import { Vec } from '../vec';
+import { Key, ToneSpec } from './common';
+export interface BinaryTreeNode {
+    key: Key;
+    label?: string | number;
+    left?: BinaryTreeNode | null;
+    right?: BinaryTreeNode | null;
+}
+export interface TreeOptions {
+    id?: string;
+    /** Top-centre of the tree. */
+    x?: number;
+    y?: number;
+    r?: number;
+    /** Horizontal spacing between in-order neighbours. Default 46. */
+    dx?: number;
+    /** Vertical spacing between levels. Default 66. */
+    dy?: number;
+    tones?: ToneSpec<Key, BinaryTreeNode>;
+    /** Tone for the edge INTO a node (keyed by child key). */
+    edgeTones?: ToneSpec<Key, BinaryTreeNode>;
+    interactive?: boolean;
+    /** Show small "null" stubs for missing children. Default false. */
+    showNulls?: boolean;
+}
+export interface TreeDiagram extends Scene {
+    pos(key: Key): Vec | undefined;
+    top(key: Key): Vec;
+    bottom(key: Key): Vec;
+    left(key: Key): Vec;
+    right(key: Key): Vec;
+}
+export declare function binaryTree(root: BinaryTreeNode | null | undefined, o?: TreeOptions): TreeDiagram;
+/**
+ * Build a tree from LeetCode-style level order: [3, 9, 20, null, null, 15, 7].
+ * Keys are the array indices, so the same input always gets the same ids.
+ */
+export declare function treeFromLevelOrder(values: readonly (string | number | null)[]): BinaryTreeNode | null;

package/dist/ds/tree.js

@@ -0,0 +1,87 @@
+import { arrow, circle, circleEdge, text } from "../scene.js";
+import { V2 } from "../vec.js";
+import { resolveTone, show } from "./common.js";
+function binaryTree(root, o = {}) {
+  const id = o.id ?? "tree";
+  const r = o.r ?? 20, dx = o.dx ?? 46, dy = o.dy ?? 66;
+  const x0 = o.x ?? 0, y0 = (o.y ?? 0) + r;
+  const placed = [];
+  let counter = 0;
+  const walk = (n, parent, depth) => {
+    if (!n) return;
+    walk(n.left, n, depth + 1);
+    placed.push({ node: n, parent, order: counter++, depth });
+    walk(n.right, n, depth + 1);
+  };
+  walk(root, null, 0);
+  const pos = /* @__PURE__ */ new Map();
+  for (const p of placed) pos.set(String(p.node.key), V2(x0 + (p.order - (counter - 1) / 2) * dx, y0 + p.depth * dy));
+  const edges = [];
+  const circles = [];
+  const labels = [];
+  for (const { node, parent } of placed) {
+    const p = pos.get(String(node.key));
+    const from = parent ? pos.get(String(parent.key)) : void 0;
+    const enter = from ? { x: from.x, y: from.y } : void 0;
+    const tone = resolveTone(o.tones, node.key, node);
+    circles.push(circle({ id: `${id}:node:${node.key}`, x: p.x, y: p.y, r, tone, enter, interactive: o.interactive, data: node }));
+    circles.push(text({ id: `${id}:label:${node.key}`, x: p.x, y: p.y, text: show(node.label ?? node.key), size: 15, weight: 600, role: "value", tone, enter }));
+    if (from) {
+      const a = circleEdge(from, p, r), b = circleEdge(p, from, r);
+      edges.push(
+        arrow({
+          id: `${id}:edge:${node.key}`,
+          x1: a.x,
+          y1: a.y,
+          x2: b.x,
+          y2: b.y,
+          head: false,
+          tone: resolveTone(o.edgeTones, node.key, node),
+          enter: { x1: a.x, y1: a.y, x2: a.x, y2: a.y }
+          // grows out of the parent
+        })
+      );
+    }
+    if (o.showNulls) {
+      for (const side of ["left", "right"]) {
+        if (node[side]) continue;
+        const q = V2(p.x + (side === "left" ? -1 : 1) * dx * 0.42, p.y + dy * 0.62);
+        const a = circleEdge(p, q, r);
+        edges.push(arrow({ id: `${id}:nulledge:${node.key}:${side}`, x1: a.x, y1: a.y, x2: q.x, y2: q.y - 6, head: false, tone: "muted", dashed: true }));
+        labels.push(text({ id: `${id}:null:${node.key}:${side}`, x: q.x, y: q.y + 4, text: "\u2205", size: 12, role: "null" }));
+      }
+    }
+  }
+  const get = (k) => pos.get(String(k)) ?? V2(x0, y0);
+  return {
+    nodes: [...edges, ...circles, ...labels],
+    pos: (k) => pos.get(String(k)),
+    top: (k) => V2(get(k).x, get(k).y - r),
+    bottom: (k) => V2(get(k).x, get(k).y + r),
+    left: (k) => V2(get(k).x - r, get(k).y),
+    right: (k) => V2(get(k).x + r, get(k).y)
+  };
+}
+function treeFromLevelOrder(values) {
+  if (!values.length || values[0] == null) return null;
+  const mk = (i2) => ({ key: i2, label: values[i2], left: null, right: null });
+  const root = mk(0);
+  const queue = [root];
+  let i = 1;
+  while (queue.length && i < values.length) {
+    const n = queue.shift();
+    for (const side of ["left", "right"]) {
+      if (i < values.length && values[i] != null) {
+        n[side] = mk(i);
+        queue.push(n[side]);
+      }
+      i++;
+    }
+  }
+  return root;
+}
+export {
+  binaryTree,
+  treeFromLevelOrder
+};
+//# sourceMappingURL=tree.js.map

package/dist/ds/tree.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ds/tree.ts"],
+  "sourcesContent": ["/**\n * Binary trees.\n *\n * Layout algorithm (the simplest one that never overlaps):\n *   x = the node's position in an IN-ORDER traversal\n *   y = its depth\n * For a BST this has a lovely property: nodes are sorted left\u2192right by key,\n * exactly like the array you'd get from an in-order walk. It's wider than a\n * \"tidy\" (Reingold\u2013Tilford) layout \u2014 implementing that is a great exercise.\n *\n * Ids: a node's circle/label use its key; an edge uses its CHILD's key (every\n * node has exactly one parent edge), so after a rotation the edge re-attaches.\n * New nodes grow out of their parent via `enter`.\n */\nimport { Scene, SceneNode, arrow, circle, circleEdge, text } from '../scene';\nimport { V2, Vec } from '../vec';\nimport { Key, ToneSpec, resolveTone, show } from './common';\n\nexport interface BinaryTreeNode {\n  key: Key;\n  label?: string | number;\n  left?: BinaryTreeNode | null;\n  right?: BinaryTreeNode | null;\n}\n\nexport interface TreeOptions {\n  id?: string;\n  /** Top-centre of the tree. */\n  x?: number;\n  y?: number;\n  r?: number;\n  /** Horizontal spacing between in-order neighbours. Default 46. */\n  dx?: number;\n  /** Vertical spacing between levels. Default 66. */\n  dy?: number;\n  tones?: ToneSpec<Key, BinaryTreeNode>;\n  /** Tone for the edge INTO a node (keyed by child key). */\n  edgeTones?: ToneSpec<Key, BinaryTreeNode>;\n  interactive?: boolean;\n  /** Show small \"null\" stubs for missing children. Default false. */\n  showNulls?: boolean;\n}\n\nexport interface TreeDiagram extends Scene {\n  pos(key: Key): Vec | undefined;\n  top(key: Key): Vec;\n  bottom(key: Key): Vec;\n  left(key: Key): Vec;\n  right(key: Key): Vec;\n}\n\nexport function binaryTree(root: BinaryTreeNode | null | undefined, o: TreeOptions = {}): TreeDiagram {\n  const id = o.id ?? 'tree';\n  const r = o.r ?? 20, dx = o.dx ?? 46, dy = o.dy ?? 66;\n  const x0 = o.x ?? 0, y0 = (o.y ?? 0) + r;\n\n  // 1. in-order index + depth for every node\n  const placed: { node: BinaryTreeNode; parent: BinaryTreeNode | null; order: number; depth: number }[] = [];\n  let counter = 0;\n  const walk = (n: BinaryTreeNode | null | undefined, parent: BinaryTreeNode | null, depth: number) => {\n    if (!n) return;\n    walk(n.left, n, depth + 1);\n    placed.push({ node: n, parent, order: counter++, depth });\n    walk(n.right, n, depth + 1);\n  };\n  walk(root, null, 0);\n\n  // 2. centre the whole thing horizontally on x0\n  const pos = new Map<string, Vec>();\n  for (const p of placed) pos.set(String(p.node.key), V2(x0 + (p.order - (counter - 1) / 2) * dx, y0 + p.depth * dy));\n\n  // 3. emit nodes: edges first so they sit underneath the circles; each label\n  //    right after its circle, so CSS can move them together\n  const edges: SceneNode[] = [];\n  const circles: SceneNode[] = [];\n  const labels: SceneNode[] = [];\n  for (const { node, parent } of placed) {\n    const p = pos.get(String(node.key))!;\n    const from = parent ? pos.get(String(parent.key))! : undefined;\n    const enter = from ? { x: from.x, y: from.y } : undefined;\n    const tone = resolveTone(o.tones, node.key, node);\n    circles.push(circle({ id: `${id}:node:${node.key}`, x: p.x, y: p.y, r, tone, enter, interactive: o.interactive, data: node }));\n    circles.push(text({ id: `${id}:label:${node.key}`, x: p.x, y: p.y, text: show(node.label ?? node.key), size: 15, weight: 600, role: 'value', tone, enter }));\n    if (from) {\n      const a = circleEdge(from, p, r), b = circleEdge(p, from, r);\n      edges.push(\n        arrow({\n          id: `${id}:edge:${node.key}`,\n          x1: a.x, y1: a.y, x2: b.x, y2: b.y,\n          head: false,\n          tone: resolveTone(o.edgeTones, node.key, node),\n          enter: { x1: a.x, y1: a.y, x2: a.x, y2: a.y }, // grows out of the parent\n        }),\n      );\n    }\n    if (o.showNulls) {\n      for (const side of ['left', 'right'] as const) {\n        if (node[side]) continue;\n        const q = V2(p.x + (side === 'left' ? -1 : 1) * dx * 0.42, p.y + dy * 0.62);\n        const a = circleEdge(p, q, r);\n        edges.push(arrow({ id: `${id}:nulledge:${node.key}:${side}`, x1: a.x, y1: a.y, x2: q.x, y2: q.y - 6, head: false, tone: 'muted', dashed: true }));\n        labels.push(text({ id: `${id}:null:${node.key}:${side}`, x: q.x, y: q.y + 4, text: '\u2205', size: 12, role: 'null' }));\n      }\n    }\n  }\n\n  const get = (k: Key) => pos.get(String(k)) ?? V2(x0, y0);\n  return {\n    nodes: [...edges, ...circles, ...labels],\n    pos: (k) => pos.get(String(k)),\n    top: (k) => V2(get(k).x, get(k).y - r),\n    bottom: (k) => V2(get(k).x, get(k).y + r),\n    left: (k) => V2(get(k).x - r, get(k).y),\n    right: (k) => V2(get(k).x + r, get(k).y),\n  };\n}\n\n/**\n * Build a tree from LeetCode-style level order: [3, 9, 20, null, null, 15, 7].\n * Keys are the array indices, so the same input always gets the same ids.\n */\nexport function treeFromLevelOrder(values: readonly (string | number | null)[]): BinaryTreeNode | null {\n  if (!values.length || values[0] == null) return null;\n  const mk = (i: number): BinaryTreeNode => ({ key: i, label: values[i] as string | number, left: null, right: null });\n  const root = mk(0);\n  const queue = [root];\n  let i = 1;\n  while (queue.length && i < values.length) {\n    const n = queue.shift()!;\n    for (const side of ['left', 'right'] as const) {\n      if (i < values.length && values[i] != null) {\n        n[side] = mk(i);\n        queue.push(n[side]!);\n      }\n      i++;\n    }\n  }\n  return root;\n}\n"],
+  "mappings": "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",
+  "names": ["i"]
+}

package/dist/easing.d.ts

@@ -0,0 +1,14 @@
+/** Easing curves: t in [0, 1] → progress (may overshoot 1 for springy ones). */
+export type Easing = (t: number) => number;
+export declare const linear: Easing;
+export declare const easeOutCubic: Easing;
+export declare const easeInOutCubic: Easing;
+/** Overshoots by ~8% then settles: the "bouncy" feel of playful UIs. */
+export declare const easeOutBack: Easing;
+/**
+ * A soft settle: overshoots by ~4% and comes back. Enough to feel physical
+ * and a little playful, not enough to look bouncy. The default feel of dsviz.
+ */
+export declare const easeOutSoft: Easing;
+/** Speeds up like something falling. Pair with a short duration for gravity. */
+export declare const easeInQuad: Easing;

package/dist/easing.js

@@ -0,0 +1,21 @@
+const linear = (t) => t;
+const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+const easeOutBack = (t) => {
+  const c1 = 1.4, c3 = c1 + 1;
+  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+};
+const easeOutSoft = (t) => {
+  const c1 = 0.9, c3 = c1 + 1;
+  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+};
+const easeInQuad = (t) => t * t;
+export {
+  easeInOutCubic,
+  easeInQuad,
+  easeOutBack,
+  easeOutCubic,
+  easeOutSoft,
+  linear
+};
+//# sourceMappingURL=easing.js.map

package/dist/easing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/easing.ts"],
+  "sourcesContent": ["/** Easing curves: t in [0, 1] \u2192 progress (may overshoot 1 for springy ones). */\nexport type Easing = (t: number) => number;\n\nexport const linear: Easing = (t) => t;\nexport const easeOutCubic: Easing = (t) => 1 - Math.pow(1 - t, 3);\nexport const easeInOutCubic: Easing = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);\n\n/** Overshoots by ~8% then settles: the \"bouncy\" feel of playful UIs. */\nexport const easeOutBack: Easing = (t) => {\n  const c1 = 1.4, c3 = c1 + 1;\n  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);\n};\n\n/**\n * A soft settle: overshoots by ~4% and comes back. Enough to feel physical\n * and a little playful, not enough to look bouncy. The default feel of dsviz.\n */\nexport const easeOutSoft: Easing = (t) => {\n  const c1 = 0.9, c3 = c1 + 1;\n  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);\n};\n\n/** Speeds up like something falling. Pair with a short duration for gravity. */\nexport const easeInQuad: Easing = (t) => t * t;\n"],
+  "mappings": "AAGO,MAAM,SAAiB,CAAC,MAAM;AAC9B,MAAM,eAAuB,CAAC,MAAM,IAAI,KAAK,IAAI,IAAI,GAAG,CAAC;AACzD,MAAM,iBAAyB,CAAC,MAAO,IAAI,MAAM,IAAI,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,GAAG,CAAC,IAAI;AAG/F,MAAM,cAAsB,CAAC,MAAM;AACxC,QAAM,KAAK,KAAK,KAAK,KAAK;AAC1B,SAAO,IAAI,KAAK,KAAK,IAAI,IAAI,GAAG,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,GAAG,CAAC;AAC7D;AAMO,MAAM,cAAsB,CAAC,MAAM;AACxC,QAAM,KAAK,KAAK,KAAK,KAAK;AAC1B,SAAO,IAAI,KAAK,KAAK,IAAI,IAAI,GAAG,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,GAAG,CAAC;AAC7D;AAGO,MAAM,aAAqB,CAAC,MAAM,IAAI;",
+  "names": []
+}

package/dist/fx.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Little celebrations, made from ordinary scene nodes.
+ *
+ * A burst is a ring of particles. Each particle is a circle whose `enter`
+ * says "start at the centre, radius 0", so the renderer flies it outward the
+ * moment it appears. Remove the particles from the scene a beat later and
+ * they fade out on their own (that's the normal exit tween). No special
+ * animation code: the keyed renderer already does everything we need.
+ */
+import { CircleNode, Tone } from './scene';
+export interface BurstOptions {
+    /** Change this for every new burst (e.g. a counter) so the particles are new nodes. */
+    id: string;
+    x: number;
+    y: number;
+    count?: number;
+    /** How far the particles fly. Default 46. */
+    radius?: number;
+    tones?: Tone[];
+}
+export declare function burst(o: BurstOptions): CircleNode[];

package/dist/fx.js

@@ -0,0 +1,27 @@
+import { circle } from "./scene.js";
+const DEFAULT_TONES = ["active", "accent", "success", "visited", "danger"];
+function burst(o) {
+  const n = o.count ?? 14;
+  const R = o.radius ?? 46;
+  const tones = o.tones ?? DEFAULT_TONES;
+  let seed = [...o.id].reduce((h, c) => h * 31 + c.charCodeAt(0) >>> 0, 7);
+  const rand = () => (seed = seed * 1664525 + 1013904223 >>> 0) / 2 ** 32;
+  return Array.from({ length: n }, (_, i) => {
+    const a = 2 * Math.PI * i / n + (rand() - 0.5) * 0.5;
+    const d = R * (0.65 + rand() * 0.5);
+    return circle({
+      id: `${o.id}:p${i}`,
+      x: o.x + Math.cos(a) * d,
+      y: o.y + Math.sin(a) * d,
+      r: 2 + rand() * 2.5,
+      role: "particle",
+      tone: tones[i % tones.length],
+      enter: { x: o.x, y: o.y, r: 0, opacity: 1 },
+      exit: { r: 0 }
+    });
+  });
+}
+export {
+  burst
+};
+//# sourceMappingURL=fx.js.map

package/dist/fx.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/fx.ts"],
+  "sourcesContent": ["/**\n * Little celebrations, made from ordinary scene nodes.\n *\n * A burst is a ring of particles. Each particle is a circle whose `enter`\n * says \"start at the centre, radius 0\", so the renderer flies it outward the\n * moment it appears. Remove the particles from the scene a beat later and\n * they fade out on their own (that's the normal exit tween). No special\n * animation code: the keyed renderer already does everything we need.\n */\nimport { CircleNode, Tone, circle } from './scene';\n\nexport interface BurstOptions {\n  /** Change this for every new burst (e.g. a counter) so the particles are new nodes. */\n  id: string;\n  x: number;\n  y: number;\n  count?: number;\n  /** How far the particles fly. Default 46. */\n  radius?: number;\n  tones?: Tone[];\n}\n\nconst DEFAULT_TONES: Tone[] = ['active', 'accent', 'success', 'visited', 'danger'];\n\nexport function burst(o: BurstOptions): CircleNode[] {\n  const n = o.count ?? 14;\n  const R = o.radius ?? 46;\n  const tones = o.tones ?? DEFAULT_TONES;\n  // deterministic jitter from the id, so the same burst always looks the same\n  let seed = [...o.id].reduce((h, c) => (h * 31 + c.charCodeAt(0)) >>> 0, 7);\n  const rand = () => ((seed = (seed * 1664525 + 1013904223) >>> 0) / 2 ** 32);\n  return Array.from({ length: n }, (_, i) => {\n    const a = (2 * Math.PI * i) / n + (rand() - 0.5) * 0.5;\n    const d = R * (0.65 + rand() * 0.5);\n    return circle({\n      id: `${o.id}:p${i}`,\n      x: o.x + Math.cos(a) * d,\n      y: o.y + Math.sin(a) * d,\n      r: 2 + rand() * 2.5,\n      role: 'particle',\n      tone: tones[i % tones.length],\n      enter: { x: o.x, y: o.y, r: 0, opacity: 1 },\n      exit: { r: 0 },\n    });\n  });\n}\n"],
+  "mappings": "AASA,SAA2B,cAAc;AAazC,MAAM,gBAAwB,CAAC,UAAU,UAAU,WAAW,WAAW,QAAQ;AAE1E,SAAS,MAAM,GAA+B;AACnD,QAAM,IAAI,EAAE,SAAS;AACrB,QAAM,IAAI,EAAE,UAAU;AACtB,QAAM,QAAQ,EAAE,SAAS;AAEzB,MAAI,OAAO,CAAC,GAAG,EAAE,EAAE,EAAE,OAAO,CAAC,GAAG,MAAO,IAAI,KAAK,EAAE,WAAW,CAAC,MAAO,GAAG,CAAC;AACzE,QAAM,OAAO,OAAQ,OAAQ,OAAO,UAAU,eAAgB,KAAK,KAAK;AACxE,SAAO,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM;AACzC,UAAM,IAAK,IAAI,KAAK,KAAK,IAAK,KAAK,KAAK,IAAI,OAAO;AACnD,UAAM,IAAI,KAAK,OAAO,KAAK,IAAI;AAC/B,WAAO,OAAO;AAAA,MACZ,IAAI,GAAG,EAAE,EAAE,KAAK,CAAC;AAAA,MACjB,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,IAAI;AAAA,MACvB,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,IAAI;AAAA,MACvB,GAAG,IAAI,KAAK,IAAI;AAAA,MAChB,MAAM;AAAA,MACN,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA,MAC5B,OAAO,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,GAAG,GAAG,SAAS,EAAE;AAAA,MAC1C,MAAM,EAAE,GAAG,EAAE;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AACH;",
+  "names": []
+}

package/dist/geom/index.d.ts

@@ -0,0 +1,2 @@
+export * from './math';
+export * from './shapes';

package/dist/geom/index.js

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

package/dist/geom/index.js.map

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

package/dist/geom/math.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Plane geometry helpers. All take and return plain {x, y} points and work
+ * the same in pixel or world coordinates (nothing here assumes y up or down,
+ * except `signedArea`'s sign).
+ */
+import { Vec } from '../vec';
+export declare const dot: (a: Vec, b: Vec) => number;
+export declare const cross: (a: Vec, b: Vec) => number;
+/** The (unsigned, ≤ π) angle at vertex B in the triangle A-B-C, in radians. */
+export declare function angleAt(a: Vec, b: Vec, c: Vec): number;
+export declare const toDegrees: (rad: number) => number;
+/** Where the infinite lines AB and CD cross, or null if parallel. */
+export declare function lineIntersection(a: Vec, b: Vec, c: Vec, d: Vec): Vec | null;
+/** Intersection points of two circles: 0, 1 (tangent) or 2 points. */
+export declare function circleIntersections(c1: Vec, r1: number, c2: Vec, r2: number): Vec[];
+/** The foot of the perpendicular from P onto the line AB. */
+export declare function footOfPerpendicular(p: Vec, a: Vec, b: Vec): Vec;
+/** Circle through three points, or null if they are collinear. */
+export declare function circumcircle(a: Vec, b: Vec, c: Vec): {
+    center: Vec;
+    r: number;
+} | null;
+/** Circle tangent to all three sides. */
+export declare function incircle(a: Vec, b: Vec, c: Vec): {
+    center: Vec;
+    r: number;
+};
+export declare const centroid: (pts: readonly Vec[]) => Vec;
+/** Intersection of the altitudes. */
+export declare function orthocenter(a: Vec, b: Vec, c: Vec): Vec | null;
+/** Shoelace formula. Positive when the points go counter-clockwise in a y-up system. */
+export declare function signedArea(pts: readonly Vec[]): number;
+/** Evenly spaced points on a circular arc from angle a0 to a1 (radians, counter-clockwise if a1 > a0). */
+export declare function arcPoints(center: Vec, r: number, a0: number, a1: number, n: number): Array<[number, number]>;

package/dist/geom/math.js

@@ -0,0 +1,74 @@
+import { V2, vadd, vdist, vscale, vsub } from "../vec.js";
+const dot = (a, b) => a.x * b.x + a.y * b.y;
+const cross = (a, b) => a.x * b.y - a.y * b.x;
+function angleAt(a, b, c) {
+  const u = vsub(a, b), v = vsub(c, b);
+  return Math.atan2(Math.abs(cross(u, v)), dot(u, v));
+}
+const toDegrees = (rad) => rad * 180 / Math.PI;
+function lineIntersection(a, b, c, d) {
+  const r = vsub(b, a), s = vsub(d, c);
+  const den = cross(r, s);
+  if (Math.abs(den) < 1e-12) return null;
+  const t = cross(vsub(c, a), s) / den;
+  return vadd(a, vscale(r, t));
+}
+function circleIntersections(c1, r1, c2, r2) {
+  const d = vdist(c1, c2);
+  if (d < 1e-12 || d > r1 + r2 + 1e-9 || d < Math.abs(r1 - r2) - 1e-9) return [];
+  const a = (r1 * r1 - r2 * r2 + d * d) / (2 * d);
+  const h = Math.sqrt(Math.max(0, r1 * r1 - a * a));
+  const ux = (c2.x - c1.x) / d, uy = (c2.y - c1.y) / d;
+  const m = V2(c1.x + a * ux, c1.y + a * uy);
+  if (h < 1e-9) return [m];
+  return [V2(m.x - h * uy, m.y + h * ux), V2(m.x + h * uy, m.y - h * ux)];
+}
+function footOfPerpendicular(p, a, b) {
+  const ab = vsub(b, a);
+  const t = dot(vsub(p, a), ab) / (dot(ab, ab) || 1);
+  return vadd(a, vscale(ab, t));
+}
+function circumcircle(a, b, c) {
+  const d = 2 * (a.x * (b.y - c.y) + b.x * (c.y - a.y) + c.x * (a.y - b.y));
+  if (Math.abs(d) < 1e-12) return null;
+  const a2 = a.x * a.x + a.y * a.y, b2 = b.x * b.x + b.y * b.y, c2 = c.x * c.x + c.y * c.y;
+  const center = V2((a2 * (b.y - c.y) + b2 * (c.y - a.y) + c2 * (a.y - b.y)) / d, (a2 * (c.x - b.x) + b2 * (a.x - c.x) + c2 * (b.x - a.x)) / d);
+  return { center, r: vdist(center, a) };
+}
+function incircle(a, b, c) {
+  const la = vdist(b, c), lb = vdist(a, c), lc = vdist(a, b);
+  const p = la + lb + lc || 1;
+  const center = V2((la * a.x + lb * b.x + lc * c.x) / p, (la * a.y + lb * b.y + lc * c.y) / p);
+  return { center, r: Math.abs(signedArea([a, b, c])) / (p / 2) };
+}
+const centroid = (pts) => vscale(pts.reduce((s, p) => vadd(s, p), V2(0, 0)), 1 / Math.max(1, pts.length));
+function orthocenter(a, b, c) {
+  return lineIntersection(a, footOfPerpendicular(a, b, c), b, footOfPerpendicular(b, a, c));
+}
+function signedArea(pts) {
+  let s = 0;
+  for (let i = 0; i < pts.length; i++) s += cross(pts[i], pts[(i + 1) % pts.length]);
+  return s / 2;
+}
+function arcPoints(center, r, a0, a1, n) {
+  return Array.from({ length: n }, (_, i) => {
+    const t = a0 + (a1 - a0) * i / Math.max(1, n - 1);
+    return [center.x + r * Math.cos(t), center.y + r * Math.sin(t)];
+  });
+}
+export {
+  angleAt,
+  arcPoints,
+  centroid,
+  circleIntersections,
+  circumcircle,
+  cross,
+  dot,
+  footOfPerpendicular,
+  incircle,
+  lineIntersection,
+  orthocenter,
+  signedArea,
+  toDegrees
+};
+//# sourceMappingURL=math.js.map

package/dist/geom/math.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/geom/math.ts"],
+  "sourcesContent": ["/**\n * Plane geometry helpers. All take and return plain {x, y} points and work\n * the same in pixel or world coordinates (nothing here assumes y up or down,\n * except `signedArea`'s sign).\n */\nimport { V2, Vec, vadd, vdist, vscale, vsub } from '../vec';\n\nexport const dot = (a: Vec, b: Vec) => a.x * b.x + a.y * b.y;\nexport const cross = (a: Vec, b: Vec) => a.x * b.y - a.y * b.x;\n\n/** The (unsigned, \u2264 \u03C0) angle at vertex B in the triangle A-B-C, in radians. */\nexport function angleAt(a: Vec, b: Vec, c: Vec): number {\n  const u = vsub(a, b), v = vsub(c, b);\n  return Math.atan2(Math.abs(cross(u, v)), dot(u, v));\n}\n\nexport const toDegrees = (rad: number) => (rad * 180) / Math.PI;\n\n/** Where the infinite lines AB and CD cross, or null if parallel. */\nexport function lineIntersection(a: Vec, b: Vec, c: Vec, d: Vec): Vec | null {\n  const r = vsub(b, a), s = vsub(d, c);\n  const den = cross(r, s);\n  if (Math.abs(den) < 1e-12) return null;\n  const t = cross(vsub(c, a), s) / den;\n  return vadd(a, vscale(r, t));\n}\n\n/** Intersection points of two circles: 0, 1 (tangent) or 2 points. */\nexport function circleIntersections(c1: Vec, r1: number, c2: Vec, r2: number): Vec[] {\n  const d = vdist(c1, c2);\n  if (d < 1e-12 || d > r1 + r2 + 1e-9 || d < Math.abs(r1 - r2) - 1e-9) return [];\n  const a = (r1 * r1 - r2 * r2 + d * d) / (2 * d);\n  const h = Math.sqrt(Math.max(0, r1 * r1 - a * a));\n  const ux = (c2.x - c1.x) / d, uy = (c2.y - c1.y) / d;\n  const m = V2(c1.x + a * ux, c1.y + a * uy);\n  if (h < 1e-9) return [m];\n  return [V2(m.x - h * uy, m.y + h * ux), V2(m.x + h * uy, m.y - h * ux)];\n}\n\n/** The foot of the perpendicular from P onto the line AB. */\nexport function footOfPerpendicular(p: Vec, a: Vec, b: Vec): Vec {\n  const ab = vsub(b, a);\n  const t = dot(vsub(p, a), ab) / (dot(ab, ab) || 1);\n  return vadd(a, vscale(ab, t));\n}\n\n/** Circle through three points, or null if they are collinear. */\nexport function circumcircle(a: Vec, b: Vec, c: Vec): { center: Vec; r: number } | null {\n  const d = 2 * (a.x * (b.y - c.y) + b.x * (c.y - a.y) + c.x * (a.y - b.y));\n  if (Math.abs(d) < 1e-12) return null;\n  const a2 = a.x * a.x + a.y * a.y, b2 = b.x * b.x + b.y * b.y, c2 = c.x * c.x + c.y * c.y;\n  const center = V2((a2 * (b.y - c.y) + b2 * (c.y - a.y) + c2 * (a.y - b.y)) / d, (a2 * (c.x - b.x) + b2 * (a.x - c.x) + c2 * (b.x - a.x)) / d);\n  return { center, r: vdist(center, a) };\n}\n\n/** Circle tangent to all three sides. */\nexport function incircle(a: Vec, b: Vec, c: Vec): { center: Vec; r: number } {\n  const la = vdist(b, c), lb = vdist(a, c), lc = vdist(a, b);\n  const p = la + lb + lc || 1;\n  const center = V2((la * a.x + lb * b.x + lc * c.x) / p, (la * a.y + lb * b.y + lc * c.y) / p);\n  return { center, r: Math.abs(signedArea([a, b, c])) / (p / 2) };\n}\n\nexport const centroid = (pts: readonly Vec[]): Vec =>\n  vscale(pts.reduce((s, p) => vadd(s, p), V2(0, 0)), 1 / Math.max(1, pts.length));\n\n/** Intersection of the altitudes. */\nexport function orthocenter(a: Vec, b: Vec, c: Vec): Vec | null {\n  return lineIntersection(a, footOfPerpendicular(a, b, c), b, footOfPerpendicular(b, a, c));\n}\n\n/** Shoelace formula. Positive when the points go counter-clockwise in a y-up system. */\nexport function signedArea(pts: readonly Vec[]): number {\n  let s = 0;\n  for (let i = 0; i < pts.length; i++) s += cross(pts[i], pts[(i + 1) % pts.length]);\n  return s / 2;\n}\n\n/** Evenly spaced points on a circular arc from angle a0 to a1 (radians, counter-clockwise if a1 > a0). */\nexport function arcPoints(center: Vec, r: number, a0: number, a1: number, n: number): Array<[number, number]> {\n  return Array.from({ length: n }, (_, i) => {\n    const t = a0 + ((a1 - a0) * i) / Math.max(1, n - 1);\n    return [center.x + r * Math.cos(t), center.y + r * Math.sin(t)] as [number, number];\n  });\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/geom/shapes.d.ts

@@ -0,0 +1,69 @@
+import { Scene, Tone } from '../scene';
+import { Vec } from '../vec';
+export interface PolygonOptions {
+    id?: string;
+    tone?: Tone;
+    /** Vertex names (A, B, C …) placed just outside each corner. */
+    labels?: string[];
+    /** Give every vertex a drag handle; drag events carry `{ id, index }`. */
+    draggable?: boolean;
+    /** Fill the inside lightly. Default true. */
+    fill?: boolean;
+    width?: number;
+    /** Pulse the drag handles until the learner touches one. */
+    hint?: boolean;
+}
+/** A closed polygon with optional vertex labels and drag handles. */
+export declare function polygon(points: readonly Vec[], o?: PolygonOptions): Scene;
+export interface SegmentOptions {
+    id: string;
+    tone?: Tone;
+    dashed?: boolean;
+    width?: number;
+    /** Equal-length tick marks (1, 2 or 3) across the middle. */
+    ticks?: number;
+    label?: string;
+}
+/** A segment, optionally with equal-length tick marks and a label beside its midpoint. */
+export declare function segment(a: Vec, b: Vec, o: SegmentOptions): Scene;
+/** The little hash marks that say "these sides are equal". */
+export declare function tickMarks(a: Vec, b: Vec, count: number, o: {
+    id: string;
+    tone?: Tone;
+    size?: number;
+}): Scene;
+export interface AngleMarkOptions {
+    id: string;
+    r?: number;
+    tone?: Tone;
+    /** Text at the arc, e.g. 'α', or true to show the measure in degrees. */
+    label?: string | boolean;
+    /** Draw a square for (near) right angles. Default true. */
+    rightSquare?: boolean;
+    /** How many arcs (1–3) to mark equal angles. Default 1. */
+    arcs?: number;
+}
+/**
+ * Mark the angle ABC at vertex B: an arc between rays BA and BC (always the
+ * smaller side), or a little square when the angle is 90°. The arc and the
+ * square have the same number of points so they morph into each other as you
+ * drag through 90°.
+ */
+export declare function angleMark(a: Vec, b: Vec, c: Vec, o: AngleMarkOptions): Scene;
+/** A circle outline (and light fill) with an optional centre dot. */
+export declare function circle(center: Vec, r: number, o: {
+    id: string;
+    tone?: Tone;
+    dashed?: boolean;
+    fill?: boolean;
+    showCenter?: boolean;
+}): Scene;
+/** A labelled point. */
+export declare function pointLabel(p: Vec, s: string, o: {
+    id: string;
+    tone?: Tone;
+    offset?: Vec;
+    draggable?: boolean;
+    hint?: boolean;
+    data?: unknown;
+}): Scene;

package/dist/geom/shapes.js

@@ -0,0 +1,105 @@
+import { handle } from "../handle.js";
+import { circle as circleNode, path, text } from "../scene.js";
+import { V2, vadd, vnorm, vscale, vsub } from "../vec.js";
+import { angleAt, arcPoints, centroid, toDegrees } from "./math.js";
+const pt = (v) => [v.x, v.y];
+function polygon(points, o = {}) {
+  const id = o.id ?? "poly";
+  const nodes = [
+    path({ id: `${id}:shape`, points: points.map(pt), closed: true, role: o.fill === false ? "outline" : "region", tone: o.tone, width: o.width ?? 1.75 }),
+    path({ id: `${id}:edge`, points: points.map(pt), closed: true, role: "curve", tone: o.tone, width: o.width ?? 1.75 })
+  ];
+  const c = centroid(points);
+  points.forEach((p, i) => {
+    if (o.labels?.[i]) {
+      const out = vadd(p, vscale(vnorm(vsub(p, c)), 16));
+      nodes.push(text({ id: `${id}:label:${i}`, x: out.x, y: out.y, text: o.labels[i], size: 15, role: "math" }));
+    }
+    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 } }));
+  });
+  return { nodes };
+}
+function segment(a, b, o) {
+  const nodes = [path({ id: o.id, points: [pt(a), pt(b)], role: "curve", tone: o.tone, dashed: o.dashed, width: o.width ?? 1.75 })];
+  if (o.ticks) nodes.push(...tickMarks(a, b, o.ticks, { id: `${o.id}:ticks`, tone: o.tone }).nodes);
+  if (o.label) {
+    const m = vscale(vadd(a, b), 0.5);
+    const n = vnorm(V2(-(b.y - a.y), b.x - a.x));
+    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 }));
+  }
+  return { nodes };
+}
+function tickMarks(a, b, count, o) {
+  const m = vscale(vadd(a, b), 0.5);
+  const d = vnorm(vsub(b, a));
+  const n = V2(-d.y, d.x);
+  const s = o.size ?? 6, gap = 4;
+  return {
+    nodes: Array.from({ length: count }, (_, i) => {
+      const c = vadd(m, vscale(d, (i - (count - 1) / 2) * gap));
+      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 });
+    })
+  };
+}
+function angleMark(a, b, c, o) {
+  const r = o.r ?? 22;
+  const ang = angleAt(a, b, c);
+  const a0 = Math.atan2(a.y - b.y, a.x - b.x);
+  let a1 = Math.atan2(c.y - b.y, c.x - b.x);
+  let delta = a1 - a0;
+  while (delta > Math.PI) delta -= 2 * Math.PI;
+  while (delta < -Math.PI) delta += 2 * Math.PI;
+  a1 = a0 + delta;
+  const right = (o.rightSquare ?? true) && Math.abs(toDegrees(ang) - 90) < 0.5;
+  const nodes = [];
+  const N = 24;
+  const arcs = o.arcs ?? 1;
+  for (let k = 0; k < arcs; k++) {
+    const rr = r + k * 4;
+    let pts;
+    if (right) {
+      const s = rr * 0.7;
+      const u = V2(Math.cos(a0), Math.sin(a0)), v = V2(Math.cos(a1), Math.sin(a1));
+      const p1 = vadd(b, vscale(u, s)), p2 = vadd(b, vadd(vscale(u, s), vscale(v, s))), p3 = vadd(b, vscale(v, s));
+      pts = Array.from({ length: N }, (_, i) => {
+        const t = i / (N - 1) * 2;
+        const q = t < 1 ? vadd(p1, vscale(vsub(p2, p1), t)) : vadd(p2, vscale(vsub(p3, p2), t - 1));
+        return pt(q);
+      });
+    } else pts = arcPoints(b, rr, a0, a1, N);
+    nodes.push(path({ id: `${o.id}:arc:${k}`, points: pts, role: "curve", tone: o.tone, width: 1.5 }));
+  }
+  nodes.unshift(path({ id: `${o.id}:wedge`, points: [pt(b), ...arcPoints(b, r, a0, a1, N)], closed: true, role: "region", tone: o.tone }));
+  if (o.label) {
+    const mid = (a0 + a1) / 2;
+    const lr = r + 12 + (arcs - 1) * 4;
+    const s = o.label === true ? `${Math.round(toDegrees(ang))}\xB0` : o.label;
+    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 }));
+  }
+  return { nodes };
+}
+function circle(center, r, o) {
+  const nodes = [
+    circleNode({ id: o.id, x: center.x, y: center.y, r, tone: o.tone ?? "ghost", dashed: o.dashed, role: o.fill ? void 0 : "outline" })
+  ];
+  if (o.showCenter) nodes.push(circleNode({ id: `${o.id}:c`, x: center.x, y: center.y, r: 2.5, role: "dot", tone: o.tone }));
+  return { nodes };
+}
+function pointLabel(p, s, o) {
+  const off = o.offset ?? V2(10, -12);
+  return {
+    nodes: [
+      ...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 } }),
+      text({ id: `${o.id}:label`, x: p.x + off.x, y: p.y + off.y, text: s, size: 14, role: "math", tone: o.tone })
+    ]
+  };
+}
+export {
+  angleMark,
+  circle,
+  pointLabel,
+  polygon,
+  segment,
+  tickMarks
+};
+//# sourceMappingURL=shapes.js.map