dsviz 0.0.0-stage → 2.0.0

package/dist/prob/venn.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/prob/venn.ts"],
+  "sourcesContent": ["/**\n * Two-set Venn diagrams with regions you can highlight and click.\n *\n * Two circles are easy to draw. The hard part is the REGIONS: \"A only\", \"B\n * only\" and the lens \"A and B\" are not circles, they're shapes bounded by\n * arcs of both circles. We find where the circles cross, then walk around each\n * region's boundary arc by arc:\n *\n *   lens   = A's arc inside B,  then B's arc inside A\n *   A only = A's arc outside B, then B's arc inside A (walked backwards)\n *   B only = B's arc outside A, then A's arc inside B (walked backwards)\n *\n * Each region is a closed `path` with a fixed number of points, so when you\n * drag a circle the regions morph smoothly.\n */\nimport { circleIntersections } from '../geom/math';\nimport { handle } from '../handle';\nimport { Scene, SceneNode, Tone, circle, path, text } from '../scene';\nimport { Vec, vdist } from '../vec';\n\nexport interface Disc {\n  x: number;\n  y: number;\n  r: number;\n}\n\nexport type VennRegion = 'aOnly' | 'bOnly' | 'both' | 'neither';\n\ntype Pt = [number, number];\nconst N = 64; // points per region boundary\n\nfunction arc(c: Disc, a0: number, a1: number, n: number): Pt[] {\n  return Array.from({ length: n }, (_, i) => {\n    const t = a0 + ((a1 - a0) * i) / (n - 1);\n    return [c.x + c.r * Math.cos(t), c.y + c.r * Math.sin(t)] as Pt;\n  });\n}\n\n/** Boundary points of each region (empty array for an empty region). */\nexport function vennRegions(a: Disc, b: Disc): Record<'aOnly' | 'bOnly' | 'both', Pt[]> {\n  const d = vdist(a, b);\n  const full = (c: Disc) => arc(c, 0, 2 * Math.PI * (1 - 1 / N), N);\n  if (d >= a.r + b.r) return { aOnly: full(a), bOnly: full(b), both: [] }; // apart\n  if (d <= Math.abs(a.r - b.r)) {\n    // one inside the other: the inner disc is the lens; the outer's \"only\" part is a ring,\n    // which a single closed path can't express, so we draw the outer disc (the inner one sits on top)\n    const [inner, outer] = a.r <= b.r ? [a, b] : [b, a];\n    const ring = full(outer);\n    return a === outer ? { aOnly: ring, bOnly: [], both: full(inner) } : { aOnly: [], bOnly: ring, both: full(inner) };\n  }\n  const phi = Math.atan2(b.y - a.y, b.x - a.x); // direction A \u2192 B\n  const alpha = Math.acos((a.r * a.r + d * d - b.r * b.r) / (2 * a.r * d)); // half-angle of A's arc inside B\n  const psi = phi + Math.PI; // direction B \u2192 A\n  const beta = Math.acos((b.r * b.r + d * d - a.r * a.r) / (2 * b.r * d));\n  const h = N / 2;\n  const aIn = arc(a, phi - alpha, phi + alpha, h);\n  const bIn = arc(b, psi - beta, psi + beta, h);\n  const aOut = arc(a, phi + alpha, phi - alpha + 2 * Math.PI, h);\n  const bOut = arc(b, psi + beta, psi - beta + 2 * Math.PI, h);\n  return {\n    both: [...aIn, ...bIn],\n    aOnly: [...aOut, ...[...bIn].reverse()],\n    bOnly: [...bOut, ...[...aIn].reverse()],\n  };\n}\n\n/** Areas of each region (same units as r\u00B2). */\nexport function vennAreas(a: Disc, b: Disc): { a: number; b: number; both: number; aOnly: number; bOnly: number } {\n  const d = vdist(a, b);\n  const A = Math.PI * a.r * a.r, B = Math.PI * b.r * b.r;\n  let both: number;\n  if (d >= a.r + b.r) both = 0;\n  else if (d <= Math.abs(a.r - b.r)) both = Math.PI * Math.min(a.r, b.r) ** 2;\n  else {\n    const r1 = a.r, r2 = b.r;\n    both =\n      r1 * r1 * Math.acos((d * d + r1 * r1 - r2 * r2) / (2 * d * r1)) +\n      r2 * r2 * Math.acos((d * d + r2 * r2 - r1 * r1) / (2 * d * r2)) -\n      0.5 * Math.sqrt((-d + r1 + r2) * (d + r1 - r2) * (d - r1 + r2) * (d + r1 + r2));\n  }\n  return { a: A, b: B, both, aOnly: A - both, bOnly: B - both };\n}\n\n/** Which region a point falls in. */\nexport function vennRegionAt(p: Vec, a: Disc, b: Disc): VennRegion {\n  const inA = vdist(p, a) <= a.r, inB = vdist(p, b) <= b.r;\n  return inA && inB ? 'both' : inA ? 'aOnly' : inB ? 'bOnly' : 'neither';\n}\n\nexport interface VennOptions {\n  id?: string;\n  labels?: [string, string];\n  /** Regions to shade. */\n  highlight?: readonly VennRegion[];\n  tone?: Tone;\n  /** The universe rectangle around both circles (for \"neither\"), as [x, y, w, h]. */\n  universe?: [number, number, number, number];\n  /** Region paths emit clicks with `{ region }` in data. */\n  interactive?: boolean;\n  /** Give each circle a drag handle at its centre; drag data is `{ set: 'a' | 'b' }`. */\n  draggable?: boolean;\n  /** Pulse the drag handles until the reader first touches one. */\n  hint?: boolean;\n}\n\nexport function venn2(a: Disc, b: Disc, o: VennOptions = {}): Scene {\n  const id = o.id ?? 'venn';\n  const hl = new Set(o.highlight ?? []);\n  const regions = vennRegions(a, b);\n  const tone = o.tone ?? 'accent';\n  const nodes: SceneNode[] = [];\n  if (o.universe) {\n    const [ux, uy, uw, uh] = o.universe;\n    nodes.push({ kind: 'rect', id: `${id}:U`, x: ux + uw / 2, y: uy + uh / 2, w: uw, h: uh, rx: 8, role: 'universe', tone: hl.has('neither') ? tone : undefined, interactive: o.interactive, data: { region: 'neither' } });\n    nodes.push(text({ id: `${id}:U:label`, x: ux + 12, y: uy + 14, text: 'U', size: 13, role: 'math', anchor: 'start' }));\n  }\n  // regions keep their ids even when empty, so they can fade back in\n  for (const r of ['aOnly', 'bOnly', 'both'] as const) {\n    const pts = regions[r];\n    if (!pts.length) continue;\n    nodes.push(path({ id: `${id}:${r}`, points: pts, closed: true, role: 'region', tone: hl.has(r) ? tone : 'muted', interactive: o.interactive, data: { region: r } }));\n  }\n  nodes.push(\n    circle({ id: `${id}:A`, x: a.x, y: a.y, r: a.r, role: 'outline' }),\n    circle({ id: `${id}:B`, x: b.x, y: b.y, r: b.r, role: 'outline' }),\n  );\n  const [la, lb] = o.labels ?? ['A', 'B'];\n  // labels sit outside each circle, away from the other one\n  const dir = Math.atan2(b.y - a.y, b.x - a.x);\n  const lab = (c: Disc, away: number, s: string, k: string) =>\n    text({ id: `${id}:${k}:label`, x: c.x + Math.cos(away) * c.r * 0.72 - Math.sin(away) * 0, y: c.y - c.r * 0.82, text: s, size: 16, role: 'math' });\n  nodes.push(lab(a, dir + Math.PI, la, 'A'), lab(b, dir, lb, 'B'));\n  if (o.draggable) {\n    // A small VISIBLE handle at each centre. (An invisible drag zone over the\n    // regions would make the same spot mean \"drag\" or \"click\" depending on\n    // where exactly you pressed, with nothing on screen to say which.)\n    nodes.push(\n      ...handle({ id: `${id}:A:drag`, x: a.x, y: a.y, hint: o.hint, data: { set: 'a' } }),\n      ...handle({ id: `${id}:B:drag`, x: b.x, y: b.y, hint: o.hint, data: { set: 'b' } }),\n    );\n  }\n  return { nodes };\n}\n\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/react/Diagram.d.ts

@@ -0,0 +1,47 @@
+import { ViewEvent } from '../render';
+import { Scene } from '../scene';
+import type { Easing } from '../easing';
+export interface DiagramProps {
+    scene: Scene;
+    /**
+     * 'natural' (default): drawn at 1 scene unit = 1px (× `scale`), centred, and
+     * shrunk only when the container is narrower. Every diagram gets the same text
+     * size and line weight. 'fill': stretch to the container (width 100%, `height`).
+     */
+    size?: 'natural' | 'fill';
+    /** Pixels per scene unit in natural mode. Default 1. */
+    scale?: number;
+    /** CSS height in 'fill' mode. Default 240. */
+    height?: number | string;
+    /**
+     * The camera. A fixed [x, y, w, h] never moves: use it for plots, anything
+     * draggable, and step-through diagrams (`fitViewBox(allFrames)`). 'auto'
+     * (default) grows to fit and otherwise stays still; see `camera`.
+     */
+    viewBox?: 'auto' | [number, number, number, number];
+    /** How an 'auto' camera follows the scene: 'grow' (default) or 'fit'. */
+    camera?: 'grow' | 'fit';
+    padding?: number;
+    /** Animation length in ms (default 420). */
+    duration?: number;
+    /** Easing curve (default easeOutSoft). Try easeInQuad for falling things. */
+    ease?: Easing;
+    onClick?: (e: ViewEvent) => void;
+    onDragStart?: (e: ViewEvent) => void;
+    onDrag?: (e: ViewEvent) => void;
+    onDragEnd?: (e: ViewEvent) => void;
+    className?: string;
+    /** Accessible description of what the diagram shows. */
+    label?: string;
+}
+/**
+ * React wrapper around createView().
+ *
+ * The idea: React owns *when* to render (props changed), the view owns *how*
+ * (keyed diff + tweening directly on DOM nodes, outside React's reconciler).
+ * Two consequences worth knowing:
+ *  - We never put SVG children in JSX; the view manages them, so React can't fight it.
+ *  - Event handlers are read through a ref, so passing a fresh inline `onDrag`
+ *    every render doesn't tear down and rebuild the view's listeners.
+ */
+export declare function Diagram({ scene, size, scale, height, viewBox, camera, padding, duration, ease, onClick, onDragStart, onDrag, onDragEnd, className, label }: DiagramProps): import("react").JSX.Element;

package/dist/react/Diagram.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { createView } from "../render.js";
+function Diagram({ scene, size = "natural", scale, height = 240, viewBox = "auto", camera, padding, duration, ease, onClick, onDragStart, onDrag, onDragEnd, className, label }) {
+  const svgRef = useRef(null);
+  const viewRef = useRef(null);
+  const dragging = useRef(null);
+  const sceneRef = useRef(scene);
+  sceneRef.current = scene;
+  const handlers = useRef({ onClick, onDragStart, onDrag, onDragEnd });
+  handlers.current = { onClick, onDragStart, onDrag, onDragEnd };
+  useEffect(() => {
+    const view = createView(svgRef.current, { viewBox, camera, padding, duration, ease, size, scale });
+    viewRef.current = view;
+    const offs = [
+      view.on("click", (e) => handlers.current.onClick?.(e)),
+      view.on("dragstart", (e) => (dragging.current = e.keyboard ? "key" : "pointer", handlers.current.onDragStart?.(e))),
+      view.on("drag", (e) => handlers.current.onDrag?.(e)),
+      view.on("dragend", (e) => (dragging.current = null, handlers.current.onDragEnd?.(e)))
+    ];
+    view.render(sceneRef.current);
+    return () => {
+      offs.forEach((off) => off());
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [padding, duration, ease, size, scale, camera]);
+  useEffect(() => {
+    viewRef.current?.setViewBox(viewBox);
+  }, [Array.isArray(viewBox) ? viewBox.join(",") : viewBox]);
+  useEffect(() => {
+    const d = dragging.current;
+    viewRef.current?.render(scene, d ? { duration: d === "key" ? 120 : 0, camera: false } : void 0);
+  }, [scene]);
+  const style = size === "natural" ? { display: "block", maxWidth: "100%", height: "auto", margin: "0 auto" } : { width: "100%", height, display: "block" };
+  return /* @__PURE__ */ jsx("svg", { ref: svgRef, className, style, role: "img", "aria-label": label });
+}
+export {
+  Diagram
+};
+//# sourceMappingURL=Diagram.js.map

package/dist/react/Diagram.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/Diagram.tsx"],
+  "sourcesContent": ["import { useEffect, useRef } from 'react';\nimport { View, ViewEvent, createView } from '../render';\nimport { Scene } from '../scene';\nimport type { Easing } from '../easing';\n\nexport interface DiagramProps {\n  scene: Scene;\n  /**\n   * 'natural' (default): drawn at 1 scene unit = 1px (\u00D7 `scale`), centred, and\n   * shrunk only when the container is narrower. Every diagram gets the same text\n   * size and line weight. 'fill': stretch to the container (width 100%, `height`).\n   */\n  size?: 'natural' | 'fill';\n  /** Pixels per scene unit in natural mode. Default 1. */\n  scale?: number;\n  /** CSS height in 'fill' mode. Default 240. */\n  height?: number | string;\n  /**\n   * The camera. A fixed [x, y, w, h] never moves: use it for plots, anything\n   * draggable, and step-through diagrams (`fitViewBox(allFrames)`). 'auto'\n   * (default) grows to fit and otherwise stays still; see `camera`.\n   */\n  viewBox?: 'auto' | [number, number, number, number];\n  /** How an 'auto' camera follows the scene: 'grow' (default) or 'fit'. */\n  camera?: 'grow' | 'fit';\n  padding?: number;\n  /** Animation length in ms (default 420). */\n  duration?: number;\n  /** Easing curve (default easeOutSoft). Try easeInQuad for falling things. */\n  ease?: Easing;\n  onClick?: (e: ViewEvent) => void;\n  onDragStart?: (e: ViewEvent) => void;\n  onDrag?: (e: ViewEvent) => void;\n  onDragEnd?: (e: ViewEvent) => void;\n  className?: string;\n  /** Accessible description of what the diagram shows. */\n  label?: string;\n}\n\n/**\n * React wrapper around createView().\n *\n * The idea: React owns *when* to render (props changed), the view owns *how*\n * (keyed diff + tweening directly on DOM nodes, outside React's reconciler).\n * Two consequences worth knowing:\n *  - We never put SVG children in JSX; the view manages them, so React can't fight it.\n *  - Event handlers are read through a ref, so passing a fresh inline `onDrag`\n *    every render doesn't tear down and rebuild the view's listeners.\n */\nexport function Diagram({ scene, size = 'natural', scale, height = 240, viewBox = 'auto', camera, padding, duration, ease, onClick, onDragStart, onDrag, onDragEnd, className, label }: DiagramProps) {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const viewRef = useRef<View | null>(null);\n  const dragging = useRef<null | 'pointer' | 'key'>(null);\n  const sceneRef = useRef(scene);\n  sceneRef.current = scene;\n  const handlers = useRef({ onClick, onDragStart, onDrag, onDragEnd });\n  handlers.current = { onClick, onDragStart, onDrag, onDragEnd };\n\n  // Create / destroy the view. `viewBox`, `padding`, `duration` are creation options.\n  useEffect(() => {\n    const view = createView(svgRef.current!, { viewBox, camera, padding, duration, ease, size, scale });\n    viewRef.current = view;\n    const offs = [\n      view.on('click', (e) => handlers.current.onClick?.(e)),\n      view.on('dragstart', (e) => ((dragging.current = e.keyboard ? 'key' : 'pointer'), handlers.current.onDragStart?.(e))),\n      view.on('drag', (e) => handlers.current.onDrag?.(e)),\n      view.on('dragend', (e) => ((dragging.current = null), handlers.current.onDragEnd?.(e))),\n    ];\n    view.render(sceneRef.current);\n    return () => {\n      offs.forEach((off) => off());\n      view.destroy();\n      viewRef.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [padding, duration, ease, size, scale, camera]);\n\n  // Camera changes don't need a new view.\n  useEffect(() => {\n    viewRef.current?.setViewBox(viewBox);\n    // a fixed camera is a new array each render; compare by value\n  }, [Array.isArray(viewBox) ? viewBox.join(',') : viewBox]);\n\n  // Every scene change: render. While the user drags, skip tweening AND freeze\n  // the camera, so the thing under the cursor stays glued to it.\n  useEffect(() => {\n    // (A pointer drag follows the finger with no tween; an arrow-key press is a\n    // discrete jump, so it gets a short one.)\n    const d = dragging.current;\n    viewRef.current?.render(scene, d ? { duration: d === 'key' ? 120 : 0, camera: false } : undefined);\n  }, [scene]);\n\n  const style = size === 'natural'\n    ? { display: 'block', maxWidth: '100%', height: 'auto', margin: '0 auto' } // overflow comes from the stylesheet: visible, or clipped for a fixed viewBox\n    : { width: '100%', height, display: 'block' };\n  return <svg ref={svgRef} className={className} style={style} role=\"img\" aria-label={label} />;\n}\n"],
+  "mappings": "AA+FS;AA/FT,SAAS,WAAW,cAAc;AAClC,SAA0B,kBAAkB;AAgDrC,SAAS,QAAQ,EAAE,OAAO,OAAO,WAAW,OAAO,SAAS,KAAK,UAAU,QAAQ,QAAQ,SAAS,UAAU,MAAM,SAAS,aAAa,QAAQ,WAAW,WAAW,MAAM,GAAiB;AACpM,QAAM,SAAS,OAAsB,IAAI;AACzC,QAAM,UAAU,OAAoB,IAAI;AACxC,QAAM,WAAW,OAAiC,IAAI;AACtD,QAAM,WAAW,OAAO,KAAK;AAC7B,WAAS,UAAU;AACnB,QAAM,WAAW,OAAO,EAAE,SAAS,aAAa,QAAQ,UAAU,CAAC;AACnE,WAAS,UAAU,EAAE,SAAS,aAAa,QAAQ,UAAU;AAG7D,YAAU,MAAM;AACd,UAAM,OAAO,WAAW,OAAO,SAAU,EAAE,SAAS,QAAQ,SAAS,UAAU,MAAM,MAAM,MAAM,CAAC;AAClG,YAAQ,UAAU;AAClB,UAAM,OAAO;AAAA,MACX,KAAK,GAAG,SAAS,CAAC,MAAM,SAAS,QAAQ,UAAU,CAAC,CAAC;AAAA,MACrD,KAAK,GAAG,aAAa,CAAC,OAAQ,SAAS,UAAU,EAAE,WAAW,QAAQ,WAAY,SAAS,QAAQ,cAAc,CAAC,EAAE;AAAA,MACpH,KAAK,GAAG,QAAQ,CAAC,MAAM,SAAS,QAAQ,SAAS,CAAC,CAAC;AAAA,MACnD,KAAK,GAAG,WAAW,CAAC,OAAQ,SAAS,UAAU,MAAO,SAAS,QAAQ,YAAY,CAAC,EAAE;AAAA,IACxF;AACA,SAAK,OAAO,SAAS,OAAO;AAC5B,WAAO,MAAM;AACX,WAAK,QAAQ,CAAC,QAAQ,IAAI,CAAC;AAC3B,WAAK,QAAQ;AACb,cAAQ,UAAU;AAAA,IACpB;AAAA,EAEF,GAAG,CAAC,SAAS,UAAU,MAAM,MAAM,OAAO,MAAM,CAAC;AAGjD,YAAU,MAAM;AACd,YAAQ,SAAS,WAAW,OAAO;AAAA,EAErC,GAAG,CAAC,MAAM,QAAQ,OAAO,IAAI,QAAQ,KAAK,GAAG,IAAI,OAAO,CAAC;AAIzD,YAAU,MAAM;AAGd,UAAM,IAAI,SAAS;AACnB,YAAQ,SAAS,OAAO,OAAO,IAAI,EAAE,UAAU,MAAM,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI,MAAS;AAAA,EACnG,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,QAAQ,SAAS,YACnB,EAAE,SAAS,SAAS,UAAU,QAAQ,QAAQ,QAAQ,QAAQ,SAAS,IACvE,EAAE,OAAO,QAAQ,QAAQ,SAAS,QAAQ;AAC9C,SAAO,oBAAC,SAAI,KAAK,QAAQ,WAAsB,OAAc,MAAK,OAAM,cAAY,OAAO;AAC7F;",
+  "names": []
+}

package/dist/react/MathText.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The same TeX-lite typesetting as a diagram's maths labels, for the HTML
+ * around it, so a status line and a label set "x²" the same way.
+ *
+ *   <MathText tex="a^2 + b^2 = c^2" />
+ */
+export declare function MathText({ tex }: {
+    tex: string;
+}): import("react").JSX.Element;

package/dist/react/MathText.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { parseMath } from "../mathtext.js";
+import { injectControlStyles } from "./controls-styles.js";
+function MathText({ tex }) {
+  injectControlStyles();
+  return /* @__PURE__ */ jsx("span", { className: "dvc-math", children: parseMath(tex).map((s, i) => {
+    const inner = s.italic ? /* @__PURE__ */ jsx("i", { children: s.text }) : /* @__PURE__ */ jsx(Fragment, { children: s.text });
+    return s.shift === 1 ? /* @__PURE__ */ jsx("sup", { children: inner }, i) : s.shift === -1 ? /* @__PURE__ */ jsx("sub", { children: inner }, i) : /* @__PURE__ */ jsx(Fragment, { children: inner }, i);
+  }) });
+}
+export {
+  MathText
+};
+//# sourceMappingURL=MathText.js.map

package/dist/react/MathText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/MathText.tsx"],
+  "sourcesContent": ["import { Fragment } from 'react';\nimport { parseMath } from '../mathtext';\nimport { injectControlStyles } from './controls-styles';\n\n/**\n * The same TeX-lite typesetting as a diagram's maths labels, for the HTML\n * around it, so a status line and a label set \"x\u00B2\" the same way.\n *\n *   <MathText tex=\"a^2 + b^2 = c^2\" />\n */\nexport function MathText({ tex }: { tex: string }) {\n  injectControlStyles();\n  return (\n    <span className=\"dvc-math\">\n      {parseMath(tex).map((s, i) => {\n        const inner = s.italic ? <i>{s.text}</i> : <Fragment>{s.text}</Fragment>;\n        return s.shift === 1 ? <sup key={i}>{inner}</sup> : s.shift === -1 ? <sub key={i}>{inner}</sub> : <Fragment key={i}>{inner}</Fragment>;\n      })}\n    </span>\n  );\n}\n"],
+  "mappings": "AAeiC;AAfjC,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AAQ7B,SAAS,SAAS,EAAE,IAAI,GAAoB;AACjD,sBAAoB;AACpB,SACE,oBAAC,UAAK,WAAU,YACb,oBAAU,GAAG,EAAE,IAAI,CAAC,GAAG,MAAM;AAC5B,UAAM,QAAQ,EAAE,SAAS,oBAAC,OAAG,YAAE,MAAK,IAAO,oBAAC,YAAU,YAAE,MAAK;AAC7D,WAAO,EAAE,UAAU,IAAI,oBAAC,SAAa,mBAAJ,CAAU,IAAS,EAAE,UAAU,KAAK,oBAAC,SAAa,mBAAJ,CAAU,IAAS,oBAAC,YAAkB,mBAAJ,CAAU;AAAA,EAC7H,CAAC,GACH;AAEJ;",
+  "names": []
+}

package/dist/react/controls-styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * CSS for the controls. Deliberately quiet: small, flat, neutral greys with one
+ * blue accent, so the diagram is the thing you look at. They read the same
+ * --dv-* variables as the diagrams (defined on `.dvc`), so a host app restyles
+ * both from one place, or swaps the controls for its own entirely.
+ */
+export declare const CONTROLS_CSS = "\n.dvc {\n  --dvc-ink: var(--dv-fg); --dvc-sub: #6b6b6b; --dvc-line: #d9d9d9; --dvc-track: #ececec; --dvc-bg: #fff; --dvc-soft: #f5f5f5;\n  --dvc-accent: #456dff; --dvc-strong: #1a1a1a; --dvc-strong-ink: #fff; --dvc-hl: #fdf3d3; --dvc-hl-bar: #f7c325;\n  font-family: var(--dv-font); color: var(--dvc-ink);\n}\n:root[data-theme=\"dark\"] .dvc, .dark .dvc {\n  --dvc-sub: #a3a3a3; --dvc-line: #3d3d3d; --dvc-track: #333; --dvc-bg: #1e1e1e; --dvc-soft: #262626;\n  --dvc-accent: #7491ff; --dvc-strong: #f2f2f2; --dvc-strong-ink: #141414; --dvc-hl: #3d3100; --dvc-hl-bar: #d7a613;\n}\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme=\"light\"]):not(.light) .dvc {\n    --dvc-sub: #a3a3a3; --dvc-line: #3d3d3d; --dvc-track: #333; --dvc-bg: #1e1e1e; --dvc-soft: #262626;\n    --dvc-accent: #7491ff; --dvc-strong: #f2f2f2; --dvc-strong-ink: #141414; --dvc-hl: #3d3100; --dvc-hl-bar: #d7a613;\n  }\n}\n.dvc-field { display: flex; align-items: center; gap: 10px; font-size: 13px; }\n.dvc-label { color: var(--dvc-sub); white-space: nowrap; }\n.dvc-readout { display: inline-grid; justify-items: end; font-variant-numeric: tabular-nums; font-kerning: none; font-weight: 600; white-space: nowrap; min-width: 3ch; flex: none; }\n.dvc-readout > * { grid-area: 1 / 1; }\n.dvc-readout-sizer { visibility: hidden; }\n\n.dvc-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; cursor: pointer; font: 500 13px var(--dv-font); color: var(--dvc-ink); background: var(--dvc-bg); border: 1px solid var(--dvc-line); transition: background .12s, border-color .12s; }\n.dvc-btn:hover:not(:disabled) { background: var(--dvc-soft); }\n.dvc-btn:active:not(:disabled) { transform: translateY(1px); }\n.dvc-btn:focus-visible { outline: 2px solid var(--dvc-accent); outline-offset: 1px; }\n.dvc-btn:disabled { opacity: .4; cursor: default; }\n.dvc-btn.is-primary { background: var(--dvc-strong); color: var(--dvc-strong-ink); border-color: var(--dvc-strong); }\n.dvc-btn.is-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--dvc-strong) 85%, #888); }\n\n.dvc-slider { position: relative; display: flex; align-items: center; flex: 1; height: 22px; touch-action: none; user-select: none; min-width: 90px; }\n.dvc-track { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--dvc-track); }\n.dvc-range { position: absolute; height: 100%; border-radius: 4px; background: var(--dvc-accent); }\n.dvc-slider { --dvc-thumb: 18px; }\n/* notches: dots inside the track, in a layer inset by half a thumb so they line up with its centre */\n.dvc-ticks { position: absolute; top: 0; bottom: 0; left: calc(var(--dvc-thumb) / 2); right: calc(var(--dvc-thumb) / 2); pointer-events: none; }\n.dvc-tick { position: absolute; top: 50%; width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, -50%); background: color-mix(in srgb, var(--dvc-sub) 45%, transparent); }\n.dvc-tick.is-on { background: rgb(255 255 255 / .75); }\n.dvc-thumb { box-sizing: border-box; display: block; width: var(--dvc-thumb); height: var(--dvc-thumb); border-radius: 50%; background: var(--dvc-bg); border: 2px solid var(--dvc-accent); box-shadow: 0 1px 2px rgb(0 0 0 / .2); cursor: grab; }\n.dvc-thumb:hover { box-shadow: 0 0 0 5px color-mix(in srgb, var(--dvc-accent) 18%, transparent); }\n.dvc-thumb:focus-visible { outline: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--dvc-accent) 35%, transparent); }\n.dvc-thumb:active { cursor: grabbing; }\n\n.dvc-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--dvc-track); }\n.dvc-seg-item { all: unset; box-sizing: border-box; padding: 4px 11px; border-radius: 6px; cursor: pointer; font: 500 13px var(--dv-font); color: var(--dvc-sub); }\n.dvc-seg-item:hover { color: var(--dvc-ink); }\n.dvc-seg-item[data-state=\"on\"] { background: var(--dvc-bg); color: var(--dvc-ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }\n.dvc-seg-item:focus-visible { outline: 2px solid var(--dvc-accent); outline-offset: 1px; }\n\n.dvc-select { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 7px; cursor: pointer; font: 500 13px var(--dv-font); border: 1px solid var(--dvc-line); background: var(--dvc-bg); }\n.dvc-select:focus-visible { outline: 2px solid var(--dvc-accent); }\n.dvc-caret { color: var(--dvc-sub); }\n.dvc-menu { z-index: 50; padding: 4px; border-radius: 9px; background: var(--dvc-bg); border: 1px solid var(--dvc-line); box-shadow: 0 6px 20px rgb(0 0 0 / .1); font: 13px var(--dv-font); }\n.dvc-menu-item { padding: 6px 10px; border-radius: 6px; cursor: pointer; outline: none; }\n.dvc-menu-item[data-highlighted] { background: var(--dvc-soft); }\n\n.dvc-switch { all: unset; box-sizing: border-box; width: 30px; height: 18px; border-radius: 9px; cursor: pointer; background: var(--dvc-line); position: relative; transition: background .15s; }\n.dvc-switch[data-state=\"checked\"] { background: var(--dvc-accent); }\n.dvc-switch:focus-visible { outline: 2px solid var(--dvc-accent); outline-offset: 2px; }\n.dvc-switch-thumb { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translateX(2px); transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .25); }\n.dvc-switch-thumb[data-state=\"checked\"] { transform: translateX(14px); }\n\n.dvc-stepper { display: inline-flex; align-items: stretch; height: 30px; border-radius: 7px; border: 1px solid var(--dvc-line); overflow: hidden; background: var(--dvc-bg); }\n.dvc-stepper button { all: unset; box-sizing: border-box; width: 28px; text-align: center; cursor: pointer; color: var(--dvc-sub); font-size: 15px; }\n.dvc-stepper button:hover:not(:disabled) { background: var(--dvc-soft); color: var(--dvc-ink); }\n.dvc-stepper button:disabled { opacity: .35; cursor: default; }\n.dvc-stepper button:focus-visible { outline: 2px solid var(--dvc-accent); outline-offset: -2px; }\n.dvc-stepper output { min-width: 36px; padding: 0 4px; display: grid; place-items: center; font: 600 13px var(--dv-font); font-variant-numeric: tabular-nums; border-inline: 1px solid var(--dvc-line); }\n\n.dvc-transport { display: flex; align-items: center; gap: 4px; font-size: 13px; }\n.dvc-transport button { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: var(--dvc-sub); }\n.dvc-transport button:hover:not(:disabled) { background: var(--dvc-soft); color: var(--dvc-ink); }\n.dvc-transport button.is-play { background: var(--dvc-accent); color: #fff; }\n.dvc-transport button.is-play:hover { background: color-mix(in srgb, var(--dvc-accent) 85%, #000); color: #fff; }\n.dvc-transport button:focus-visible { outline: 2px solid var(--dvc-accent); }\n.dvc-transport button:disabled { opacity: .3; cursor: default; }\n.dvc-scrub { margin: 0 8px; }\n\n.dvc-input { all: unset; box-sizing: border-box; height: 30px; padding: 0 9px; border-radius: 7px; font: 500 13px var(--dv-mono); color: var(--dvc-ink); border: 1px solid var(--dvc-line); background: var(--dvc-bg); }\n.dvc-input:focus { border-color: var(--dvc-accent); }\n\n.dvc-code { margin: 0; padding: 8px 4px; border-radius: 8px; background: var(--dvc-soft); font: 12.5px/1.7 var(--dv-mono); color: var(--dvc-sub); overflow-x: auto; }\n.dvc-code-line { white-space: pre; padding: 0 10px; border-radius: 4px; transition: background .2s, color .2s; }\n.dvc-code-line.is-active { color: var(--dvc-ink); background: var(--dvc-hl); box-shadow: inset 2px 0 0 var(--dvc-hl-bar); }\n/* maths in HTML: same font and rules as the diagram's maths labels */\n.dvc-math { font-family: var(--dv-math-font, \"STIX Two Text\", \"Times New Roman\", serif); font-size: 1.12em; white-space: nowrap; }\n.dvc-math i { font-style: italic; }\n.dvc-math sup, .dvc-math sub { font-size: .7em; line-height: 0; }\n@media (prefers-reduced-motion: reduce) { .dvc, .dvc * { transition: none !important; } }\n";
+/** Idempotent; cheap enough to call from every control's render. */
+export declare function injectControlStyles(): void;

package/dist/react/controls-styles.js

@@ -0,0 +1,109 @@
+import { injectStyles } from "../styles.js";
+const CONTROLS_CSS = (
+  /* css */
+  `
+.dvc {
+  --dvc-ink: var(--dv-fg); --dvc-sub: #6b6b6b; --dvc-line: #d9d9d9; --dvc-track: #ececec; --dvc-bg: #fff; --dvc-soft: #f5f5f5;
+  --dvc-accent: #456dff; --dvc-strong: #1a1a1a; --dvc-strong-ink: #fff; --dvc-hl: #fdf3d3; --dvc-hl-bar: #f7c325;
+  font-family: var(--dv-font); color: var(--dvc-ink);
+}
+:root[data-theme="dark"] .dvc, .dark .dvc {
+  --dvc-sub: #a3a3a3; --dvc-line: #3d3d3d; --dvc-track: #333; --dvc-bg: #1e1e1e; --dvc-soft: #262626;
+  --dvc-accent: #7491ff; --dvc-strong: #f2f2f2; --dvc-strong-ink: #141414; --dvc-hl: #3d3100; --dvc-hl-bar: #d7a613;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) .dvc {
+    --dvc-sub: #a3a3a3; --dvc-line: #3d3d3d; --dvc-track: #333; --dvc-bg: #1e1e1e; --dvc-soft: #262626;
+    --dvc-accent: #7491ff; --dvc-strong: #f2f2f2; --dvc-strong-ink: #141414; --dvc-hl: #3d3100; --dvc-hl-bar: #d7a613;
+  }
+}
+.dvc-field { display: flex; align-items: center; gap: 10px; font-size: 13px; }
+.dvc-label { color: var(--dvc-sub); white-space: nowrap; }
+.dvc-readout { display: inline-grid; justify-items: end; font-variant-numeric: tabular-nums; font-kerning: none; font-weight: 600; white-space: nowrap; min-width: 3ch; flex: none; }
+.dvc-readout > * { grid-area: 1 / 1; }
+.dvc-readout-sizer { visibility: hidden; }
+
+.dvc-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; cursor: pointer; font: 500 13px var(--dv-font); color: var(--dvc-ink); background: var(--dvc-bg); border: 1px solid var(--dvc-line); transition: background .12s, border-color .12s; }
+.dvc-btn:hover:not(:disabled) { background: var(--dvc-soft); }
+.dvc-btn:active:not(:disabled) { transform: translateY(1px); }
+.dvc-btn:focus-visible { outline: 2px solid var(--dvc-accent); outline-offset: 1px; }
+.dvc-btn:disabled { opacity: .4; cursor: default; }
+.dvc-btn.is-primary { background: var(--dvc-strong); color: var(--dvc-strong-ink); border-color: var(--dvc-strong); }
+.dvc-btn.is-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--dvc-strong) 85%, #888); }
+
+.dvc-slider { position: relative; display: flex; align-items: center; flex: 1; height: 22px; touch-action: none; user-select: none; min-width: 90px; }
+.dvc-track { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--dvc-track); }
+.dvc-range { position: absolute; height: 100%; border-radius: 4px; background: var(--dvc-accent); }
+.dvc-slider { --dvc-thumb: 18px; }
+/* notches: dots inside the track, in a layer inset by half a thumb so they line up with its centre */
+.dvc-ticks { position: absolute; top: 0; bottom: 0; left: calc(var(--dvc-thumb) / 2); right: calc(var(--dvc-thumb) / 2); pointer-events: none; }
+.dvc-tick { position: absolute; top: 50%; width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, -50%); background: color-mix(in srgb, var(--dvc-sub) 45%, transparent); }
+.dvc-tick.is-on { background: rgb(255 255 255 / .75); }
+.dvc-thumb { box-sizing: border-box; display: block; width: var(--dvc-thumb); height: var(--dvc-thumb); border-radius: 50%; background: var(--dvc-bg); border: 2px solid var(--dvc-accent); box-shadow: 0 1px 2px rgb(0 0 0 / .2); cursor: grab; }
+.dvc-thumb:hover { box-shadow: 0 0 0 5px color-mix(in srgb, var(--dvc-accent) 18%, transparent); }
+.dvc-thumb:focus-visible { outline: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--dvc-accent) 35%, transparent); }
+.dvc-thumb:active { cursor: grabbing; }
+
+.dvc-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--dvc-track); }
+.dvc-seg-item { all: unset; box-sizing: border-box; padding: 4px 11px; border-radius: 6px; cursor: pointer; font: 500 13px var(--dv-font); color: var(--dvc-sub); }
+.dvc-seg-item:hover { color: var(--dvc-ink); }
+.dvc-seg-item[data-state="on"] { background: var(--dvc-bg); color: var(--dvc-ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
+.dvc-seg-item:focus-visible { outline: 2px solid var(--dvc-accent); outline-offset: 1px; }
+
+.dvc-select { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 7px; cursor: pointer; font: 500 13px var(--dv-font); border: 1px solid var(--dvc-line); background: var(--dvc-bg); }
+.dvc-select:focus-visible { outline: 2px solid var(--dvc-accent); }
+.dvc-caret { color: var(--dvc-sub); }
+.dvc-menu { z-index: 50; padding: 4px; border-radius: 9px; background: var(--dvc-bg); border: 1px solid var(--dvc-line); box-shadow: 0 6px 20px rgb(0 0 0 / .1); font: 13px var(--dv-font); }
+.dvc-menu-item { padding: 6px 10px; border-radius: 6px; cursor: pointer; outline: none; }
+.dvc-menu-item[data-highlighted] { background: var(--dvc-soft); }
+
+.dvc-switch { all: unset; box-sizing: border-box; width: 30px; height: 18px; border-radius: 9px; cursor: pointer; background: var(--dvc-line); position: relative; transition: background .15s; }
+.dvc-switch[data-state="checked"] { background: var(--dvc-accent); }
+.dvc-switch:focus-visible { outline: 2px solid var(--dvc-accent); outline-offset: 2px; }
+.dvc-switch-thumb { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translateX(2px); transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
+.dvc-switch-thumb[data-state="checked"] { transform: translateX(14px); }
+
+.dvc-stepper { display: inline-flex; align-items: stretch; height: 30px; border-radius: 7px; border: 1px solid var(--dvc-line); overflow: hidden; background: var(--dvc-bg); }
+.dvc-stepper button { all: unset; box-sizing: border-box; width: 28px; text-align: center; cursor: pointer; color: var(--dvc-sub); font-size: 15px; }
+.dvc-stepper button:hover:not(:disabled) { background: var(--dvc-soft); color: var(--dvc-ink); }
+.dvc-stepper button:disabled { opacity: .35; cursor: default; }
+.dvc-stepper button:focus-visible { outline: 2px solid var(--dvc-accent); outline-offset: -2px; }
+.dvc-stepper output { min-width: 36px; padding: 0 4px; display: grid; place-items: center; font: 600 13px var(--dv-font); font-variant-numeric: tabular-nums; border-inline: 1px solid var(--dvc-line); }
+
+.dvc-transport { display: flex; align-items: center; gap: 4px; font-size: 13px; }
+.dvc-transport button { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: var(--dvc-sub); }
+.dvc-transport button:hover:not(:disabled) { background: var(--dvc-soft); color: var(--dvc-ink); }
+.dvc-transport button.is-play { background: var(--dvc-accent); color: #fff; }
+.dvc-transport button.is-play:hover { background: color-mix(in srgb, var(--dvc-accent) 85%, #000); color: #fff; }
+.dvc-transport button:focus-visible { outline: 2px solid var(--dvc-accent); }
+.dvc-transport button:disabled { opacity: .3; cursor: default; }
+.dvc-scrub { margin: 0 8px; }
+
+.dvc-input { all: unset; box-sizing: border-box; height: 30px; padding: 0 9px; border-radius: 7px; font: 500 13px var(--dv-mono); color: var(--dvc-ink); border: 1px solid var(--dvc-line); background: var(--dvc-bg); }
+.dvc-input:focus { border-color: var(--dvc-accent); }
+
+.dvc-code { margin: 0; padding: 8px 4px; border-radius: 8px; background: var(--dvc-soft); font: 12.5px/1.7 var(--dv-mono); color: var(--dvc-sub); overflow-x: auto; }
+.dvc-code-line { white-space: pre; padding: 0 10px; border-radius: 4px; transition: background .2s, color .2s; }
+.dvc-code-line.is-active { color: var(--dvc-ink); background: var(--dvc-hl); box-shadow: inset 2px 0 0 var(--dvc-hl-bar); }
+/* maths in HTML: same font and rules as the diagram's maths labels */
+.dvc-math { font-family: var(--dv-math-font, "STIX Two Text", "Times New Roman", serif); font-size: 1.12em; white-space: nowrap; }
+.dvc-math i { font-style: italic; }
+.dvc-math sup, .dvc-math sub { font-size: .7em; line-height: 0; }
+@media (prefers-reduced-motion: reduce) { .dvc, .dvc * { transition: none !important; } }
+`
+);
+const ID = "dsviz-control-styles";
+function injectControlStyles() {
+  if (typeof document === "undefined") return;
+  injectStyles();
+  if (document.getElementById(ID)) return;
+  const el = document.createElement("style");
+  el.id = ID;
+  el.textContent = CONTROLS_CSS;
+  document.head.appendChild(el);
+}
+export {
+  CONTROLS_CSS,
+  injectControlStyles
+};
+//# sourceMappingURL=controls-styles.js.map

package/dist/react/controls-styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/controls-styles.ts"],
+  "sourcesContent": ["import { injectStyles } from '../styles';\n\n/**\n * CSS for the controls. Deliberately quiet: small, flat, neutral greys with one\n * blue accent, so the diagram is the thing you look at. They read the same\n * --dv-* variables as the diagrams (defined on `.dvc`), so a host app restyles\n * both from one place, or swaps the controls for its own entirely.\n */\nexport const CONTROLS_CSS = /* css */ `\n.dvc {\n  --dvc-ink: var(--dv-fg); --dvc-sub: #6b6b6b; --dvc-line: #d9d9d9; --dvc-track: #ececec; --dvc-bg: #fff; --dvc-soft: #f5f5f5;\n  --dvc-accent: #456dff; --dvc-strong: #1a1a1a; --dvc-strong-ink: #fff; --dvc-hl: #fdf3d3; --dvc-hl-bar: #f7c325;\n  font-family: var(--dv-font); color: var(--dvc-ink);\n}\n:root[data-theme=\"dark\"] .dvc, .dark .dvc {\n  --dvc-sub: #a3a3a3; --dvc-line: #3d3d3d; --dvc-track: #333; --dvc-bg: #1e1e1e; --dvc-soft: #262626;\n  --dvc-accent: #7491ff; --dvc-strong: #f2f2f2; --dvc-strong-ink: #141414; --dvc-hl: #3d3100; --dvc-hl-bar: #d7a613;\n}\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme=\"light\"]):not(.light) .dvc {\n    --dvc-sub: #a3a3a3; --dvc-line: #3d3d3d; --dvc-track: #333; --dvc-bg: #1e1e1e; --dvc-soft: #262626;\n    --dvc-accent: #7491ff; --dvc-strong: #f2f2f2; --dvc-strong-ink: #141414; --dvc-hl: #3d3100; --dvc-hl-bar: #d7a613;\n  }\n}\n.dvc-field { display: flex; align-items: center; gap: 10px; font-size: 13px; }\n.dvc-label { color: var(--dvc-sub); white-space: nowrap; }\n.dvc-readout { display: inline-grid; justify-items: end; font-variant-numeric: tabular-nums; font-kerning: none; font-weight: 600; white-space: nowrap; min-width: 3ch; flex: none; }\n.dvc-readout > * { grid-area: 1 / 1; }\n.dvc-readout-sizer { visibility: hidden; }\n\n.dvc-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; cursor: pointer; font: 500 13px var(--dv-font); color: var(--dvc-ink); background: var(--dvc-bg); border: 1px solid var(--dvc-line); transition: background .12s, border-color .12s; }\n.dvc-btn:hover:not(:disabled) { background: var(--dvc-soft); }\n.dvc-btn:active:not(:disabled) { transform: translateY(1px); }\n.dvc-btn:focus-visible { outline: 2px solid var(--dvc-accent); outline-offset: 1px; }\n.dvc-btn:disabled { opacity: .4; cursor: default; }\n.dvc-btn.is-primary { background: var(--dvc-strong); color: var(--dvc-strong-ink); border-color: var(--dvc-strong); }\n.dvc-btn.is-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--dvc-strong) 85%, #888); }\n\n.dvc-slider { position: relative; display: flex; align-items: center; flex: 1; height: 22px; touch-action: none; user-select: none; min-width: 90px; }\n.dvc-track { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--dvc-track); }\n.dvc-range { position: absolute; height: 100%; border-radius: 4px; background: var(--dvc-accent); }\n.dvc-slider { --dvc-thumb: 18px; }\n/* notches: dots inside the track, in a layer inset by half a thumb so they line up with its centre */\n.dvc-ticks { position: absolute; top: 0; bottom: 0; left: calc(var(--dvc-thumb) / 2); right: calc(var(--dvc-thumb) / 2); pointer-events: none; }\n.dvc-tick { position: absolute; top: 50%; width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, -50%); background: color-mix(in srgb, var(--dvc-sub) 45%, transparent); }\n.dvc-tick.is-on { background: rgb(255 255 255 / .75); }\n.dvc-thumb { box-sizing: border-box; display: block; width: var(--dvc-thumb); height: var(--dvc-thumb); border-radius: 50%; background: var(--dvc-bg); border: 2px solid var(--dvc-accent); box-shadow: 0 1px 2px rgb(0 0 0 / .2); cursor: grab; }\n.dvc-thumb:hover { box-shadow: 0 0 0 5px color-mix(in srgb, var(--dvc-accent) 18%, transparent); }\n.dvc-thumb:focus-visible { outline: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--dvc-accent) 35%, transparent); }\n.dvc-thumb:active { cursor: grabbing; }\n\n.dvc-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--dvc-track); }\n.dvc-seg-item { all: unset; box-sizing: border-box; padding: 4px 11px; border-radius: 6px; cursor: pointer; font: 500 13px var(--dv-font); color: var(--dvc-sub); }\n.dvc-seg-item:hover { color: var(--dvc-ink); }\n.dvc-seg-item[data-state=\"on\"] { background: var(--dvc-bg); color: var(--dvc-ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }\n.dvc-seg-item:focus-visible { outline: 2px solid var(--dvc-accent); outline-offset: 1px; }\n\n.dvc-select { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 7px; cursor: pointer; font: 500 13px var(--dv-font); border: 1px solid var(--dvc-line); background: var(--dvc-bg); }\n.dvc-select:focus-visible { outline: 2px solid var(--dvc-accent); }\n.dvc-caret { color: var(--dvc-sub); }\n.dvc-menu { z-index: 50; padding: 4px; border-radius: 9px; background: var(--dvc-bg); border: 1px solid var(--dvc-line); box-shadow: 0 6px 20px rgb(0 0 0 / .1); font: 13px var(--dv-font); }\n.dvc-menu-item { padding: 6px 10px; border-radius: 6px; cursor: pointer; outline: none; }\n.dvc-menu-item[data-highlighted] { background: var(--dvc-soft); }\n\n.dvc-switch { all: unset; box-sizing: border-box; width: 30px; height: 18px; border-radius: 9px; cursor: pointer; background: var(--dvc-line); position: relative; transition: background .15s; }\n.dvc-switch[data-state=\"checked\"] { background: var(--dvc-accent); }\n.dvc-switch:focus-visible { outline: 2px solid var(--dvc-accent); outline-offset: 2px; }\n.dvc-switch-thumb { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translateX(2px); transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .25); }\n.dvc-switch-thumb[data-state=\"checked\"] { transform: translateX(14px); }\n\n.dvc-stepper { display: inline-flex; align-items: stretch; height: 30px; border-radius: 7px; border: 1px solid var(--dvc-line); overflow: hidden; background: var(--dvc-bg); }\n.dvc-stepper button { all: unset; box-sizing: border-box; width: 28px; text-align: center; cursor: pointer; color: var(--dvc-sub); font-size: 15px; }\n.dvc-stepper button:hover:not(:disabled) { background: var(--dvc-soft); color: var(--dvc-ink); }\n.dvc-stepper button:disabled { opacity: .35; cursor: default; }\n.dvc-stepper button:focus-visible { outline: 2px solid var(--dvc-accent); outline-offset: -2px; }\n.dvc-stepper output { min-width: 36px; padding: 0 4px; display: grid; place-items: center; font: 600 13px var(--dv-font); font-variant-numeric: tabular-nums; border-inline: 1px solid var(--dvc-line); }\n\n.dvc-transport { display: flex; align-items: center; gap: 4px; font-size: 13px; }\n.dvc-transport button { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: var(--dvc-sub); }\n.dvc-transport button:hover:not(:disabled) { background: var(--dvc-soft); color: var(--dvc-ink); }\n.dvc-transport button.is-play { background: var(--dvc-accent); color: #fff; }\n.dvc-transport button.is-play:hover { background: color-mix(in srgb, var(--dvc-accent) 85%, #000); color: #fff; }\n.dvc-transport button:focus-visible { outline: 2px solid var(--dvc-accent); }\n.dvc-transport button:disabled { opacity: .3; cursor: default; }\n.dvc-scrub { margin: 0 8px; }\n\n.dvc-input { all: unset; box-sizing: border-box; height: 30px; padding: 0 9px; border-radius: 7px; font: 500 13px var(--dv-mono); color: var(--dvc-ink); border: 1px solid var(--dvc-line); background: var(--dvc-bg); }\n.dvc-input:focus { border-color: var(--dvc-accent); }\n\n.dvc-code { margin: 0; padding: 8px 4px; border-radius: 8px; background: var(--dvc-soft); font: 12.5px/1.7 var(--dv-mono); color: var(--dvc-sub); overflow-x: auto; }\n.dvc-code-line { white-space: pre; padding: 0 10px; border-radius: 4px; transition: background .2s, color .2s; }\n.dvc-code-line.is-active { color: var(--dvc-ink); background: var(--dvc-hl); box-shadow: inset 2px 0 0 var(--dvc-hl-bar); }\n/* maths in HTML: same font and rules as the diagram's maths labels */\n.dvc-math { font-family: var(--dv-math-font, \"STIX Two Text\", \"Times New Roman\", serif); font-size: 1.12em; white-space: nowrap; }\n.dvc-math i { font-style: italic; }\n.dvc-math sup, .dvc-math sub { font-size: .7em; line-height: 0; }\n@media (prefers-reduced-motion: reduce) { .dvc, .dvc * { transition: none !important; } }\n`;\n\nconst ID = 'dsviz-control-styles';\n\n/** Idempotent; cheap enough to call from every control's render. */\nexport function injectControlStyles(): void {\n  if (typeof document === 'undefined') return;\n  injectStyles(); // the --dv-* variables the controls read live in the core stylesheet\n  if (document.getElementById(ID)) return;\n  const el = document.createElement('style');\n  el.id = ID;\n  el.textContent = CONTROLS_CSS;\n  document.head.appendChild(el);\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAQtB,MAAM;AAAA;AAAA,EAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2FtC,MAAM,KAAK;AAGJ,SAAS,sBAA4B;AAC1C,MAAI,OAAO,aAAa,YAAa;AACrC,eAAa;AACb,MAAI,SAAS,eAAe,EAAE,EAAG;AACjC,QAAM,KAAK,SAAS,cAAc,OAAO;AACzC,KAAG,KAAK;AACR,KAAG,cAAc;AACjB,WAAS,KAAK,YAAY,EAAE;AAC9B;",
+  "names": []
+}

package/dist/react/controls.d.ts

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+import type { PlayerState } from './hooks';
+export interface SliderProps {
+    value: number;
+    onChange: (v: number) => void;
+    min: number;
+    max: number;
+    step?: number;
+    label?: string;
+    /** Right-hand readout, e.g. `n = 64`. */
+    format?: (v: number) => ReactNode;
+    /** Draw a tick at each of these values. */
+    ticks?: number[];
+    className?: string;
+}
+export declare function Slider({ value, onChange, min, max, step, label, format, ticks, className }: SliderProps): import("react").JSX.Element;
+export interface SegmentedProps<T extends string> {
+    value: T;
+    onChange: (v: T) => void;
+    options: ReadonlyArray<T | {
+        value: T;
+        label: ReactNode;
+    }>;
+    label?: string;
+}
+/** Use instead of a dropdown when there are 2–4 options: every choice stays visible, one click. */
+export declare function Segmented<T extends string>({ value, onChange, options, label }: SegmentedProps<T>): import("react").JSX.Element;
+export interface SelectProps<T extends string> {
+    value: T;
+    onChange: (v: T) => void;
+    options: ReadonlyArray<T | {
+        value: T;
+        label: ReactNode;
+    }>;
+    label?: string;
+}
+export declare function Select<T extends string>({ value, onChange, options, label }: SelectProps<T>): import("react").JSX.Element;
+export declare function Switch({ checked, onChange, label }: {
+    checked: boolean;
+    onChange: (v: boolean) => void;
+    label?: string;
+}): import("react").JSX.Element;
+export interface NumberStepperProps {
+    value: number;
+    onChange: (v: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+}
+/** − n + : for small integers where dragging a slider would be fiddly (a search target). */
+export declare function NumberStepper({ value, onChange, min, max, step, label }: NumberStepperProps): import("react").JSX.Element;
+export interface TransportProps {
+    /** What usePlayer() returns. */
+    player: Pick<PlayerState<unknown>, 'index' | 'count' | 'playing' | 'first' | 'prev' | 'toggle' | 'next' | 'seek'>;
+}
+/** first / prev / play / next, a scrubber with a tick per step, and "Step i / n". `<Transport player={usePlayer(...)} />` */
+export declare function Transport({ player: p }: TransportProps): import("react").JSX.Element;
+/**
+ * A panel of source lines with the active one(s) highlighted. Feed it `frame.line`
+ * from a generator that yields `{ ..., line }`. Indentation is preserved.
+ */
+export declare function CodeTrace({ lines, active }: {
+    lines: readonly string[];
+    active?: number | readonly number[] | null;
+}): import("react").JSX.Element;
+export interface ButtonProps {
+    children: ReactNode;
+    onClick: () => void;
+    /** primary = filled, ghost = outlined. */
+    variant?: 'primary' | 'ghost';
+    disabled?: boolean;
+    title?: string;
+}
+export declare function Button({ children, onClick, variant, disabled, title }: ButtonProps): import("react").JSX.Element;
+export interface TextInputProps {
+    value: string;
+    /** Called on Enter or blur (not every keystroke), so half-typed input doesn't re-run a diagram. */
+    onCommit: (v: string) => void;
+    label?: string;
+    width?: number | string;
+    placeholder?: string;
+}
+export declare function TextInput({ value, onCommit, label, width, placeholder }: TextInputProps): import("react").JSX.Element;

package/dist/react/controls.js

@@ -0,0 +1,146 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RSelect from "@radix-ui/react-select";
+import * as RSlider from "@radix-ui/react-slider";
+import * as RSwitch from "@radix-ui/react-switch";
+import * as RToggle from "@radix-ui/react-toggle-group";
+import { useEffect, useId, useRef, useState } from "react";
+import { injectControlStyles } from "./controls-styles.js";
+const cx = (...c) => c.filter(Boolean).join(" ");
+function Readout({ children, widest }) {
+  return /* @__PURE__ */ jsxs("span", { className: "dvc-readout", children: [
+    widest && /* @__PURE__ */ jsx("span", { className: "dvc-readout-sizer", "aria-hidden": true, children: widest }),
+    /* @__PURE__ */ jsx("span", { children })
+  ] });
+}
+function Field({ label, readout, widest, children, id }) {
+  return /* @__PURE__ */ jsxs("div", { className: "dvc dvc-field", children: [
+    label && /* @__PURE__ */ jsx("label", { className: "dvc-label", htmlFor: id, children: label }),
+    children,
+    readout !== void 0 && /* @__PURE__ */ jsx(Readout, { widest, children: readout })
+  ] });
+}
+function useWidth() {
+  const ref = useRef(null);
+  const [w, setW] = useState(0);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(([e]) => setW(e.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return [ref, w];
+}
+function Ticks({ fractions, on, width }) {
+  if (fractions.length < 2 || !width || width / (fractions.length - 1) < 10) return null;
+  return /* @__PURE__ */ jsx("span", { className: "dvc-ticks", "aria-hidden": true, children: fractions.map((f, i) => /* @__PURE__ */ jsx("span", { className: cx("dvc-tick", on(i) && "is-on"), style: { left: `${f * 100}%` } }, i)) });
+}
+const widestOf = (format, min, max, step) => {
+  if (!format) return void 0;
+  const xs = [min, max, min + step, max - step].map((v) => format(v)).filter((x) => typeof x === "string" || typeof x === "number");
+  return xs.map(String).sort((a, b) => b.length - a.length)[0];
+};
+function Slider({ value, onChange, min, max, step = 1, label, format, ticks, className }) {
+  injectControlStyles();
+  const id = useId();
+  const [ref, width] = useWidth();
+  return /* @__PURE__ */ jsx(Field, { label, id, readout: format ? format(value) : void 0, widest: widestOf(format, min, max, step), children: /* @__PURE__ */ jsxs(RSlider.Root, { ref, id, className: cx("dvc-slider", className), value: [value], min, max, step, onValueChange: ([v]) => onChange(v), children: [
+    /* @__PURE__ */ jsx(RSlider.Track, { className: "dvc-track", children: /* @__PURE__ */ jsx(RSlider.Range, { className: "dvc-range" }) }),
+    ticks && /* @__PURE__ */ jsx(Ticks, { fractions: ticks.map((t) => (t - min) / (max - min)), on: (i) => ticks[i] <= value, width }),
+    /* @__PURE__ */ jsx(RSlider.Thumb, { className: "dvc-thumb", "aria-label": label ?? "value" })
+  ] }) });
+}
+function Segmented({ value, onChange, options, label }) {
+  injectControlStyles();
+  return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(RToggle.Root, { type: "single", className: "dvc-seg", value, onValueChange: (v) => v && onChange(v), "aria-label": label, children: options.map((o) => {
+    const v = typeof o === "string" ? o : o.value;
+    return /* @__PURE__ */ jsx(RToggle.Item, { value: v, className: "dvc-seg-item", children: typeof o === "string" ? o : o.label }, v);
+  }) }) });
+}
+function Select({ value, onChange, options, label }) {
+  injectControlStyles();
+  const norm = options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
+  return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsxs(RSelect.Root, { value, onValueChange: (v) => onChange(v), children: [
+    /* @__PURE__ */ jsxs(RSelect.Trigger, { className: "dvc-select", "aria-label": label, children: [
+      /* @__PURE__ */ jsx(RSelect.Value, {}),
+      /* @__PURE__ */ jsx(RSelect.Icon, { className: "dvc-caret", children: "\u25BE" })
+    ] }),
+    /* @__PURE__ */ jsx(RSelect.Portal, { children: /* @__PURE__ */ jsx(RSelect.Content, { className: "dvc dvc-menu", position: "popper", sideOffset: 4, children: /* @__PURE__ */ jsx(RSelect.Viewport, { children: norm.map((o) => /* @__PURE__ */ jsx(RSelect.Item, { value: o.value, className: "dvc-menu-item", children: /* @__PURE__ */ jsx(RSelect.ItemText, { children: o.label }) }, o.value)) }) }) })
+  ] }) });
+}
+function Switch({ checked, onChange, label }) {
+  injectControlStyles();
+  const id = useId();
+  return /* @__PURE__ */ jsx(Field, { label, id, children: /* @__PURE__ */ jsx(RSwitch.Root, { id, className: "dvc-switch", checked, onCheckedChange: onChange, children: /* @__PURE__ */ jsx(RSwitch.Thumb, { className: "dvc-switch-thumb" }) }) });
+}
+function NumberStepper({ value, onChange, min = -Infinity, max = Infinity, step = 1, label }) {
+  injectControlStyles();
+  const set = (v) => onChange(Math.min(max, Math.max(min, v)));
+  return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsxs("div", { className: "dvc dvc-stepper", role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => set(value - step), disabled: value <= min, "aria-label": "decrease", children: "\u2212" }),
+    /* @__PURE__ */ jsx("output", { children: value }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => set(value + step), disabled: value >= max, "aria-label": "increase", children: "+" })
+  ] }) });
+}
+const Icon = ({ d }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d, fill: "currentColor" }) });
+function Transport({ player: p }) {
+  injectControlStyles();
+  const last = Math.max(0, p.count - 1);
+  const [ref, width] = useWidth();
+  return /* @__PURE__ */ jsxs("div", { className: "dvc dvc-transport", children: [
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: p.first, disabled: p.index === 0, "aria-label": "First step", children: /* @__PURE__ */ jsx(Icon, { d: "M3 3h2v10H3zM13 3v10L6 8z" }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: p.prev, disabled: p.index === 0, "aria-label": "Previous step", children: /* @__PURE__ */ jsx(Icon, { d: "M12 3v10L5 8z" }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "is-play", onClick: p.toggle, "aria-label": p.playing ? "Pause" : "Play", children: /* @__PURE__ */ jsx(Icon, { d: p.playing ? "M4 3h3v10H4zM9 3h3v10H9z" : "M4 3l9 5-9 5z" }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: p.next, disabled: p.index >= last, "aria-label": "Next step", children: /* @__PURE__ */ jsx(Icon, { d: "M4 3v10l7-5zM11 3h2v10h-2z" }) }),
+    /* @__PURE__ */ jsxs(RSlider.Root, { ref, className: "dvc-slider dvc-scrub", value: [p.index], min: 0, max: last, step: 1, onValueChange: ([v]) => p.seek(v), children: [
+      /* @__PURE__ */ jsx(RSlider.Track, { className: "dvc-track", children: /* @__PURE__ */ jsx(RSlider.Range, { className: "dvc-range" }) }),
+      /* @__PURE__ */ jsx(Ticks, { fractions: Array.from({ length: p.count }, (_, i) => last ? i / last : 0), on: (i) => i <= p.index, width }),
+      /* @__PURE__ */ jsx(RSlider.Thumb, { className: "dvc-thumb", "aria-label": "Step" })
+    ] }),
+    /* @__PURE__ */ jsxs(Readout, { widest: `Step ${last} / ${last}`, children: [
+      "Step ",
+      p.index,
+      " / ",
+      last
+    ] })
+  ] });
+}
+function CodeTrace({ lines, active }) {
+  injectControlStyles();
+  const on = new Set(active == null ? [] : typeof active === "number" ? [active] : active);
+  return /* @__PURE__ */ jsx("pre", { className: "dvc dvc-code", "aria-label": "Algorithm steps", children: lines.map((l, i) => /* @__PURE__ */ jsx("div", { className: cx("dvc-code-line", on.has(i) && "is-active"), "aria-current": on.has(i) ? "step" : void 0, children: l || " " }, i)) });
+}
+function Button({ children, onClick, variant = "ghost", disabled, title }) {
+  injectControlStyles();
+  return /* @__PURE__ */ jsx("button", { type: "button", className: cx("dvc dvc-btn", variant === "primary" && "is-primary"), onClick, disabled, title, children });
+}
+function TextInput({ value, onCommit, label, width = "10ch", placeholder }) {
+  injectControlStyles();
+  const id = useId();
+  return /* @__PURE__ */ jsx(Field, { label, id, children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      id,
+      className: "dvc-input",
+      defaultValue: value,
+      placeholder,
+      spellCheck: false,
+      style: { width },
+      onKeyDown: (e) => e.key === "Enter" && onCommit(e.target.value),
+      onBlur: (e) => e.target.value !== value && onCommit(e.target.value)
+    },
+    value
+  ) });
+}
+export {
+  Button,
+  CodeTrace,
+  NumberStepper,
+  Segmented,
+  Select,
+  Slider,
+  Switch,
+  TextInput,
+  Transport
+};
+//# sourceMappingURL=controls.js.map