dsviz 0.0.0-stage → 2.0.0

package/dist/react/controls.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/controls.tsx"],
+  "sourcesContent": ["import * as RSelect from '@radix-ui/react-select';\nimport * as RSlider from '@radix-ui/react-slider';\nimport * as RSwitch from '@radix-ui/react-switch';\nimport * as RToggle from '@radix-ui/react-toggle-group';\nimport { ReactNode, useEffect, useId, useRef, useState } from 'react';\nimport { injectControlStyles } from './controls-styles';\nimport type { PlayerState } from './hooks';\n\n/*\n * Controls. Each is a thin skin over a Radix primitive, so keyboard handling,\n * focus, ARIA and pointer capture are the library's job, not ours. The skin is\n * plain CSS on the same --dv-* variables the SVG uses (controls-styles.ts), which\n * means the diagram and its controls always match, and getbetter can restyle both\n * from one place. In getbetter you can also swap any of these for the app's own\n * shadcn components: they all take simple value/onChange props.\n */\n\nconst cx = (...c: Array<string | false | undefined>) => c.filter(Boolean).join(' ');\n\n/**\n * A readout whose width never changes. The slider track is flex: 1 next to it,\n * so if \"9\" \u2192 \"10\" made the readout wider, the track (and every notch on it)\n * would shift sideways the moment you started sliding. The trick: an invisible\n * copy of the widest text sits in the same grid cell as the real text, so the\n * box is always exactly as wide as the widest value will ever be.\n */\nfunction Readout({ children, widest }: { children: ReactNode; widest?: string }) {\n  return (\n    <span className=\"dvc-readout\">\n      {widest && <span className=\"dvc-readout-sizer\" aria-hidden>{widest}</span>}\n      <span>{children}</span>\n    </span>\n  );\n}\n\nfunction Field({ label, readout, widest, children, id }: { label?: string; readout?: ReactNode; widest?: string; children: ReactNode; id?: string }) {\n  return (\n    <div className=\"dvc dvc-field\">\n      {label && <label className=\"dvc-label\" htmlFor={id}>{label}</label>}\n      {children}\n      {readout !== undefined && <Readout widest={widest}>{readout}</Readout>}\n    </div>\n  );\n}\n\n/** Width of an element, kept up to date. */\nfunction useWidth<T extends HTMLElement>() {\n  const ref = useRef<T>(null);\n  const [w, setW] = useState(0);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n    const ro = new ResizeObserver(([e]) => setW(e.contentRect.width));\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n  return [ref, w] as const;\n}\n\n/**\n * Notches as dots inside the track. They live in a layer inset by half the\n * thumb's width on each side, because Radix keeps the thumb inside the track:\n * its centre at fraction p is r + p\u00B7(W \u2212 2r), not p\u00B7W. Same formula here, so a\n * notch sits exactly under the thumb at its value. Too dense to read \u2192 none.\n */\nfunction Ticks({ fractions, on, width }: { fractions: number[]; on: (i: number) => boolean; width: number }) {\n  if (fractions.length < 2 || !width || width / (fractions.length - 1) < 10) return null;\n  return (\n    <span className=\"dvc-ticks\" aria-hidden>\n      {fractions.map((f, i) => <span key={i} className={cx('dvc-tick', on(i) && 'is-on')} style={{ left: `${f * 100}%` }} />)}\n    </span>\n  );\n}\n\n/** The longest string a formatter produces at the ends of its range (a good guess for the widest). */\nconst widestOf = (format: ((v: number) => ReactNode) | undefined, min: number, max: number, step: number) => {\n  if (!format) return undefined;\n  const xs = [min, max, min + step, max - step].map((v) => format(v)).filter((x): x is string | number => typeof x === 'string' || typeof x === 'number');\n  return xs.map(String).sort((a, b) => b.length - a.length)[0];\n};\n\nexport interface SliderProps {\n  value: number;\n  onChange: (v: number) => void;\n  min: number;\n  max: number;\n  step?: number;\n  label?: string;\n  /** Right-hand readout, e.g. `n = 64`. */\n  format?: (v: number) => ReactNode;\n  /** Draw a tick at each of these values. */\n  ticks?: number[];\n  className?: string;\n}\n\nexport function Slider({ value, onChange, min, max, step = 1, label, format, ticks, className }: SliderProps) {\n  injectControlStyles();\n  const id = useId();\n  const [ref, width] = useWidth<HTMLSpanElement>();\n  return (\n    <Field label={label} id={id} readout={format ? format(value) : undefined} widest={widestOf(format, min, max, step)}>\n      <RSlider.Root ref={ref} id={id} className={cx('dvc-slider', className)} value={[value]} min={min} max={max} step={step} onValueChange={([v]) => onChange(v)}>\n        <RSlider.Track className=\"dvc-track\">\n          <RSlider.Range className=\"dvc-range\" />\n        </RSlider.Track>\n        {ticks && <Ticks fractions={ticks.map((t) => (t - min) / (max - min))} on={(i) => ticks[i] <= value} width={width} />}\n        <RSlider.Thumb className=\"dvc-thumb\" aria-label={label ?? 'value'} />\n      </RSlider.Root>\n    </Field>\n  );\n}\n\nexport interface SegmentedProps<T extends string> {\n  value: T;\n  onChange: (v: T) => void;\n  options: ReadonlyArray<T | { value: T; label: ReactNode }>;\n  label?: string;\n}\n\n/** Use instead of a dropdown when there are 2\u20134 options: every choice stays visible, one click. */\nexport function Segmented<T extends string>({ value, onChange, options, label }: SegmentedProps<T>) {\n  injectControlStyles();\n  return (\n    <Field label={label}>\n      <RToggle.Root type=\"single\" className=\"dvc-seg\" value={value} onValueChange={(v) => v && onChange(v as T)} aria-label={label}>\n        {options.map((o) => {\n          const v = typeof o === 'string' ? o : o.value;\n          return <RToggle.Item key={v} value={v} className=\"dvc-seg-item\">{typeof o === 'string' ? o : o.label}</RToggle.Item>;\n        })}\n      </RToggle.Root>\n    </Field>\n  );\n}\n\nexport interface SelectProps<T extends string> {\n  value: T;\n  onChange: (v: T) => void;\n  options: ReadonlyArray<T | { value: T; label: ReactNode }>;\n  label?: string;\n}\n\nexport function Select<T extends string>({ value, onChange, options, label }: SelectProps<T>) {\n  injectControlStyles();\n  const norm = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));\n  return (\n    <Field label={label}>\n      <RSelect.Root value={value} onValueChange={(v) => onChange(v as T)}>\n        <RSelect.Trigger className=\"dvc-select\" aria-label={label}>\n          <RSelect.Value />\n          <RSelect.Icon className=\"dvc-caret\">\u25BE</RSelect.Icon>\n        </RSelect.Trigger>\n        <RSelect.Portal>\n          <RSelect.Content className=\"dvc dvc-menu\" position=\"popper\" sideOffset={4}>\n            <RSelect.Viewport>\n              {norm.map((o) => (\n                <RSelect.Item key={o.value} value={o.value} className=\"dvc-menu-item\">\n                  <RSelect.ItemText>{o.label}</RSelect.ItemText>\n                </RSelect.Item>\n              ))}\n            </RSelect.Viewport>\n          </RSelect.Content>\n        </RSelect.Portal>\n      </RSelect.Root>\n    </Field>\n  );\n}\n\nexport function Switch({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label?: string }) {\n  injectControlStyles();\n  const id = useId();\n  return (\n    <Field label={label} id={id}>\n      <RSwitch.Root id={id} className=\"dvc-switch\" checked={checked} onCheckedChange={onChange}>\n        <RSwitch.Thumb className=\"dvc-switch-thumb\" />\n      </RSwitch.Root>\n    </Field>\n  );\n}\n\nexport interface NumberStepperProps {\n  value: number;\n  onChange: (v: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n}\n\n/** \u2212 n + : for small integers where dragging a slider would be fiddly (a search target). */\nexport function NumberStepper({ value, onChange, min = -Infinity, max = Infinity, step = 1, label }: NumberStepperProps) {\n  injectControlStyles();\n  const set = (v: number) => onChange(Math.min(max, Math.max(min, v)));\n  return (\n    <Field label={label}>\n      <div className=\"dvc dvc-stepper\" role=\"group\" aria-label={label}>\n        <button type=\"button\" onClick={() => set(value - step)} disabled={value <= min} aria-label=\"decrease\">\u2212</button>\n        <output>{value}</output>\n        <button type=\"button\" onClick={() => set(value + step)} disabled={value >= max} aria-label=\"increase\">+</button>\n      </div>\n    </Field>\n  );\n}\n\nexport interface TransportProps {\n  /** What usePlayer() returns. */\n  player: Pick<PlayerState<unknown>, 'index' | 'count' | 'playing' | 'first' | 'prev' | 'toggle' | 'next' | 'seek'>;\n}\n\nconst Icon = ({ d }: { d: string }) => <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden><path d={d} fill=\"currentColor\" /></svg>;\n\n/** first / prev / play / next, a scrubber with a tick per step, and \"Step i / n\". `<Transport player={usePlayer(...)} />` */\nexport function Transport({ player: p }: TransportProps) {\n  injectControlStyles();\n  const last = Math.max(0, p.count - 1);\n  const [ref, width] = useWidth<HTMLSpanElement>();\n  return (\n    <div className=\"dvc dvc-transport\">\n      <button type=\"button\" onClick={p.first} disabled={p.index === 0} aria-label=\"First step\"><Icon d=\"M3 3h2v10H3zM13 3v10L6 8z\" /></button>\n      <button type=\"button\" onClick={p.prev} disabled={p.index === 0} aria-label=\"Previous step\"><Icon d=\"M12 3v10L5 8z\" /></button>\n      <button type=\"button\" className=\"is-play\" onClick={p.toggle} aria-label={p.playing ? 'Pause' : 'Play'}>\n        <Icon d={p.playing ? 'M4 3h3v10H4zM9 3h3v10H9z' : 'M4 3l9 5-9 5z'} />\n      </button>\n      <button type=\"button\" onClick={p.next} disabled={p.index >= last} aria-label=\"Next step\"><Icon d=\"M4 3v10l7-5zM11 3h2v10h-2z\" /></button>\n      <RSlider.Root ref={ref} className=\"dvc-slider dvc-scrub\" value={[p.index]} min={0} max={last} step={1} onValueChange={([v]) => p.seek(v)}>\n        <RSlider.Track className=\"dvc-track\">\n          <RSlider.Range className=\"dvc-range\" />\n        </RSlider.Track>\n        <Ticks fractions={Array.from({ length: p.count }, (_, i) => (last ? i / last : 0))} on={(i) => i <= p.index} width={width} />\n        <RSlider.Thumb className=\"dvc-thumb\" aria-label=\"Step\" />\n      </RSlider.Root>\n      <Readout widest={`Step ${last} / ${last}`}>Step {p.index} / {last}</Readout>\n    </div>\n  );\n}\n\n/**\n * A panel of source lines with the active one(s) highlighted. Feed it `frame.line`\n * from a generator that yields `{ ..., line }`. Indentation is preserved.\n */\nexport function CodeTrace({ lines, active }: { lines: readonly string[]; active?: number | readonly number[] | null }) {\n  injectControlStyles();\n  const on = new Set(active == null ? [] : typeof active === 'number' ? [active] : active);\n  return (\n    <pre className=\"dvc dvc-code\" aria-label=\"Algorithm steps\">\n      {lines.map((l, i) => (\n        <div key={i} className={cx('dvc-code-line', on.has(i) && 'is-active')} aria-current={on.has(i) ? 'step' : undefined}>{l || ' '}</div>\n      ))}\n    </pre>\n  );\n}\n\nexport interface ButtonProps {\n  children: ReactNode;\n  onClick: () => void;\n  /** primary = filled, ghost = outlined. */\n  variant?: 'primary' | 'ghost';\n  disabled?: boolean;\n  title?: string;\n}\n\nexport function Button({ children, onClick, variant = 'ghost', disabled, title }: ButtonProps) {\n  injectControlStyles();\n  return (\n    <button type=\"button\" className={cx('dvc dvc-btn', variant === 'primary' && 'is-primary')} onClick={onClick} disabled={disabled} title={title}>\n      {children}\n    </button>\n  );\n}\n\nexport interface TextInputProps {\n  value: string;\n  /** Called on Enter or blur (not every keystroke), so half-typed input doesn't re-run a diagram. */\n  onCommit: (v: string) => void;\n  label?: string;\n  width?: number | string;\n  placeholder?: string;\n}\n\nexport function TextInput({ value, onCommit, label, width = '10ch', placeholder }: TextInputProps) {\n  injectControlStyles();\n  const id = useId();\n  return (\n    <Field label={label} id={id}>\n      <input\n        id={id}\n        key={value /* reset the uncontrolled input when the value changes from outside */}\n        className=\"dvc-input\"\n        defaultValue={value}\n        placeholder={placeholder}\n        spellCheck={false}\n        style={{ width }}\n        onKeyDown={(e) => e.key === 'Enter' && onCommit((e.target as HTMLInputElement).value)}\n        onBlur={(e) => e.target.value !== value && onCommit(e.target.value)}\n      />\n    </Field>\n  );\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/react/hooks.d.ts

@@ -0,0 +1,48 @@
+import { DependencyList } from 'react';
+import { SceneNode } from '../scene';
+import { PlayerOptions } from '../player';
+export interface PlayerState<S> {
+    frame: S | undefined;
+    /** Every frame, computed up front. Handy for a fixed camera: `fitViewBox(frames.map(draw))`. */
+    frames: readonly S[];
+    index: number;
+    count: number;
+    playing: boolean;
+    next(): void;
+    prev(): void;
+    first(): void;
+    seek(i: number): void;
+    toggle(): void;
+    play(): void;
+    pause(): void;
+}
+/**
+ * Step through generator frames. `makeFrames` is re-run whenever `deps` change
+ * (new input => new run), which resets to step 0.
+ *
+ *   const p = usePlayer(() => binarySearch(nums, target), [nums, target]);
+ *   p.frame // the current snapshot
+ *
+ * The Player is a plain mutable object, so React needs a nudge to re-render when
+ * it changes: we subscribe and bump a counter (useReducer's cheapest form).
+ */
+export interface UsePlayerOptions<S> extends Omit<PlayerOptions<S>, 'onFrame'> {
+    /** Open on the last frame (show the finished result first, let people rewind). Default 'first'. */
+    start?: 'first' | 'end';
+}
+export declare function usePlayer<S>(makeFrames: () => Iterable<S>, deps: DependencyList, options?: UsePlayerOptions<S>): PlayerState<S>;
+/** A counter that increments every `ms` while `active`. Drives time-based diagrams (a "now" cursor, a sim). */
+export declare function useTicker(ms: number, active?: boolean): number;
+/** Memoise a scene from state. Just `useMemo`, named so the intent reads well at call sites. */
+export declare const useScene: <T>(build: () => T, deps: DependencyList) => T;
+/**
+ * Celebrations inside a diagram. `fire(x, y)` adds a burst of particles at a
+ * scene position; they clear themselves a moment later.
+ *
+ *   const [particles, fire] = useBurst();
+ *   <Diagram scene={combine(stuff, particles)} />
+ */
+export declare function useBurst(lifetime?: number): [SceneNode[], (x: number, y: number, opts?: {
+    count?: number;
+    radius?: number;
+}) => void];

package/dist/react/hooks.js

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { burst } from "../fx.js";
+import { createPlayer } from "../player.js";
+function usePlayer(makeFrames, deps, options) {
+  const [, bump] = useReducer((n) => n + 1, 0);
+  const ref = useRef(null);
+  if (!ref.current) {
+    ref.current = createPlayer(makeFrames(), options);
+    if (options?.start === "end") ref.current.seek(ref.current.frames.length - 1);
+  }
+  const player = ref.current;
+  useEffect(() => {
+    const off = player.subscribe(() => bump());
+    return () => (off(), void 0);
+  }, [player]);
+  const first = useRef(true);
+  useEffect(() => {
+    if (first.current) return void (first.current = false);
+    player.load(makeFrames());
+    if (options?.start === "end") player.seek(player.frames.length - 1);
+  }, deps);
+  useEffect(() => () => player.destroy(), [player]);
+  return {
+    frame: player.frame,
+    frames: player.frames,
+    index: player.index,
+    count: player.frames.length,
+    playing: player.playing,
+    next: player.next,
+    prev: player.prev,
+    first: useCallback(() => player.seek(0), [player]),
+    seek: player.seek,
+    toggle: player.toggle,
+    play: player.play,
+    pause: player.pause
+  };
+}
+function useTicker(ms, active = true) {
+  const [n, setN] = useState(0);
+  useEffect(() => {
+    if (!active) return;
+    const id = setInterval(() => setN((v) => v + 1), ms);
+    return () => clearInterval(id);
+  }, [ms, active]);
+  return n;
+}
+const useScene = (build, deps) => useMemo(build, deps);
+function useBurst(lifetime = 650) {
+  const [nodes, setNodes] = useState([]);
+  const n = useRef(0);
+  const timers = useRef([]);
+  useEffect(() => () => timers.current.forEach(clearTimeout), []);
+  const fire = useCallback((x, y, opts) => {
+    const id = `burst${n.current++}`;
+    const parts = burst({ id, x, y, ...opts });
+    setNodes((cur) => [...cur, ...parts]);
+    timers.current.push(window.setTimeout(() => setNodes((cur) => cur.filter((p) => !p.id.startsWith(`${id}:`))), lifetime));
+  }, [lifetime]);
+  return [nodes, fire];
+}
+export {
+  useBurst,
+  usePlayer,
+  useScene,
+  useTicker
+};
+//# sourceMappingURL=hooks.js.map

package/dist/react/hooks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/hooks.ts"],
+  "sourcesContent": ["import { DependencyList, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';\nimport { burst } from '../fx';\nimport { SceneNode } from '../scene';\nimport { Player, PlayerOptions, createPlayer } from '../player';\n\nexport interface PlayerState<S> {\n  frame: S | undefined;\n  /** Every frame, computed up front. Handy for a fixed camera: `fitViewBox(frames.map(draw))`. */\n  frames: readonly S[];\n  index: number;\n  count: number;\n  playing: boolean;\n  next(): void;\n  prev(): void;\n  first(): void;\n  seek(i: number): void;\n  toggle(): void;\n  play(): void;\n  pause(): void;\n}\n\n/**\n * Step through generator frames. `makeFrames` is re-run whenever `deps` change\n * (new input => new run), which resets to step 0.\n *\n *   const p = usePlayer(() => binarySearch(nums, target), [nums, target]);\n *   p.frame // the current snapshot\n *\n * The Player is a plain mutable object, so React needs a nudge to re-render when\n * it changes: we subscribe and bump a counter (useReducer's cheapest form).\n */\nexport interface UsePlayerOptions<S> extends Omit<PlayerOptions<S>, 'onFrame'> {\n  /** Open on the last frame (show the finished result first, let people rewind). Default 'first'. */\n  start?: 'first' | 'end';\n}\n\nexport function usePlayer<S>(makeFrames: () => Iterable<S>, deps: DependencyList, options?: UsePlayerOptions<S>): PlayerState<S> {\n  const [, bump] = useReducer((n: number) => n + 1, 0);\n  const ref = useRef<Player<S> | null>(null);\n  if (!ref.current) {\n    ref.current = createPlayer<S>(makeFrames(), options);\n    if (options?.start === 'end') ref.current.seek(ref.current.frames.length - 1);\n  }\n  const player = ref.current;\n\n  useEffect(() => {\n    const off = player.subscribe(() => bump());\n    return () => (off(), void 0);\n  }, [player]);\n\n  const first = useRef(true);\n  useEffect(() => {\n    // The first run already loaded frames in createPlayer; only reload on later changes.\n    if (first.current) return void (first.current = false);\n    player.load(makeFrames());\n    if (options?.start === 'end') player.seek(player.frames.length - 1);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  useEffect(() => () => player.destroy(), [player]);\n\n  return {\n    frame: player.frame,\n    frames: player.frames,\n    index: player.index,\n    count: player.frames.length,\n    playing: player.playing,\n    next: player.next,\n    prev: player.prev,\n    first: useCallback(() => player.seek(0), [player]),\n    seek: player.seek,\n    toggle: player.toggle,\n    play: player.play,\n    pause: player.pause,\n  };\n}\n\n/** A counter that increments every `ms` while `active`. Drives time-based diagrams (a \"now\" cursor, a sim). */\nexport function useTicker(ms: number, active = true): number {\n  const [n, setN] = useState(0);\n  useEffect(() => {\n    if (!active) return;\n    const id = setInterval(() => setN((v) => v + 1), ms);\n    return () => clearInterval(id);\n  }, [ms, active]);\n  return n;\n}\n\n/** Memoise a scene from state. Just `useMemo`, named so the intent reads well at call sites. */\nexport const useScene = <T,>(build: () => T, deps: DependencyList): T => useMemo(build, deps);\n\n/**\n * Celebrations inside a diagram. `fire(x, y)` adds a burst of particles at a\n * scene position; they clear themselves a moment later.\n *\n *   const [particles, fire] = useBurst();\n *   <Diagram scene={combine(stuff, particles)} />\n */\nexport function useBurst(lifetime = 650): [SceneNode[], (x: number, y: number, opts?: { count?: number; radius?: number }) => void] {\n  const [nodes, setNodes] = useState<SceneNode[]>([]);\n  const n = useRef(0);\n  const timers = useRef<number[]>([]);\n  useEffect(() => () => timers.current.forEach(clearTimeout), []);\n  const fire = useCallback((x: number, y: number, opts?: { count?: number; radius?: number }) => {\n    const id = `burst${n.current++}`;\n    const parts = burst({ id, x, y, ...opts });\n    setNodes((cur) => [...cur, ...parts]);\n    // removing them from the scene IS the fade-out\n    timers.current.push(window.setTimeout(() => setNodes((cur) => cur.filter((p) => !p.id.startsWith(`${id}:`))), lifetime));\n  }, [lifetime]);\n  return [nodes, fire];\n}\n"],
+  "mappings": "AAAA,SAAyB,aAAa,WAAW,SAAS,YAAY,QAAQ,gBAAgB;AAC9F,SAAS,aAAa;AAEtB,SAAgC,oBAAoB;AAiC7C,SAAS,UAAa,YAA+B,MAAsB,SAA+C;AAC/H,QAAM,CAAC,EAAE,IAAI,IAAI,WAAW,CAAC,MAAc,IAAI,GAAG,CAAC;AACnD,QAAM,MAAM,OAAyB,IAAI;AACzC,MAAI,CAAC,IAAI,SAAS;AAChB,QAAI,UAAU,aAAgB,WAAW,GAAG,OAAO;AACnD,QAAI,SAAS,UAAU,MAAO,KAAI,QAAQ,KAAK,IAAI,QAAQ,OAAO,SAAS,CAAC;AAAA,EAC9E;AACA,QAAM,SAAS,IAAI;AAEnB,YAAU,MAAM;AACd,UAAM,MAAM,OAAO,UAAU,MAAM,KAAK,CAAC;AACzC,WAAO,OAAO,IAAI,GAAG;AAAA,EACvB,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,QAAQ,OAAO,IAAI;AACzB,YAAU,MAAM;AAEd,QAAI,MAAM,QAAS,QAAO,MAAM,MAAM,UAAU;AAChD,WAAO,KAAK,WAAW,CAAC;AACxB,QAAI,SAAS,UAAU,MAAO,QAAO,KAAK,OAAO,OAAO,SAAS,CAAC;AAAA,EAEpE,GAAG,IAAI;AAEP,YAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,CAAC;AAEhD,SAAO;AAAA,IACL,OAAO,OAAO;AAAA,IACd,QAAQ,OAAO;AAAA,IACf,OAAO,OAAO;AAAA,IACd,OAAO,OAAO,OAAO;AAAA,IACrB,SAAS,OAAO;AAAA,IAChB,MAAM,OAAO;AAAA,IACb,MAAM,OAAO;AAAA,IACb,OAAO,YAAY,MAAM,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC;AAAA,IACjD,MAAM,OAAO;AAAA,IACb,QAAQ,OAAO;AAAA,IACf,MAAM,OAAO;AAAA,IACb,OAAO,OAAO;AAAA,EAChB;AACF;AAGO,SAAS,UAAU,IAAY,SAAS,MAAc;AAC3D,QAAM,CAAC,GAAG,IAAI,IAAI,SAAS,CAAC;AAC5B,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,KAAK,YAAY,MAAM,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE;AACnD,WAAO,MAAM,cAAc,EAAE;AAAA,EAC/B,GAAG,CAAC,IAAI,MAAM,CAAC;AACf,SAAO;AACT;AAGO,MAAM,WAAW,CAAK,OAAgB,SAA4B,QAAQ,OAAO,IAAI;AASrF,SAAS,SAAS,WAAW,KAAgG;AAClI,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,CAAC,CAAC;AAClD,QAAM,IAAI,OAAO,CAAC;AAClB,QAAM,SAAS,OAAiB,CAAC,CAAC;AAClC,YAAU,MAAM,MAAM,OAAO,QAAQ,QAAQ,YAAY,GAAG,CAAC,CAAC;AAC9D,QAAM,OAAO,YAAY,CAAC,GAAW,GAAW,SAA+C;AAC7F,UAAM,KAAK,QAAQ,EAAE,SAAS;AAC9B,UAAM,QAAQ,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC;AACzC,aAAS,CAAC,QAAQ,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC;AAEpC,WAAO,QAAQ,KAAK,OAAO,WAAW,MAAM,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,GAAG,WAAW,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC;AAAA,EACzH,GAAG,CAAC,QAAQ,CAAC;AACb,SAAO,CAAC,OAAO,IAAI;AACrB;",
+  "names": []
+}

package/dist/react/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Diagram';
+export * from './hooks';
+export * from './controls';
+export * from './MathText';

package/dist/react/index.js

@@ -0,0 +1,5 @@
+export * from "./Diagram.js";
+export * from "./hooks.js";
+export * from "./controls.js";
+export * from "./MathText.js";
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

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

package/dist/render.d.ts

@@ -0,0 +1,61 @@
+import { Scene, SceneNode } from './scene';
+import { Easing } from './easing';
+import { Vec } from './vec';
+export interface ViewOptions {
+    /** Animation length in ms. Default 380. */
+    duration?: number;
+    ease?: Easing;
+    /** 'auto' fits the viewBox to the scene (and animates it); or pass a fixed [x, y, w, h]. */
+    viewBox?: 'auto' | [number, number, number, number];
+    /**
+     * 'natural' (default): the svg's width/height follow the viewBox, so one scene
+     * unit is one CSS pixel (times `scale`). Text and strokes come out the same
+     * size in every diagram; CSS `max-width: 100%` lets it shrink on small screens.
+     * 'fill': no size attributes; you size the svg with CSS and the drawing stretches.
+     */
+    size?: 'natural' | 'fill';
+    /** Pixels per scene unit in 'natural' mode. Default 1. */
+    scale?: number;
+    /** Padding around the scene in 'auto' mode. Default 24. */
+    padding?: number;
+    /**
+     * How an 'auto' camera follows the scene. 'grow' (default): only grows when
+     * something would fall outside, shrinks only when the content is much smaller.
+     * 'fit': refit on every render. See camera.ts for when to use which.
+     */
+    camera?: 'grow' | 'fit';
+    /** Inject the default stylesheet into <head>. Default true. */
+    injectStyles?: boolean;
+}
+export interface RenderOptions {
+    /** Override the duration for this render only. Use 0 while dragging. */
+    duration?: number;
+    /** Set false to leave the camera exactly where it is for this render (e.g. while dragging). */
+    camera?: boolean;
+}
+export type ViewEventType = 'click' | 'dragstart' | 'drag' | 'dragend';
+export interface ViewEvent {
+    type: ViewEventType;
+    id: string;
+    node: SceneNode;
+    /** Pointer position in scene (world) coordinates. */
+    x: number;
+    y: number;
+    original: Event;
+    /** True when the event came from the arrow keys rather than a pointer. */
+    keyboard?: boolean;
+}
+export interface View {
+    readonly svg: SVGSVGElement;
+    /** The last scene passed to render(). */
+    readonly scene: Scene;
+    render(scene: Scene, opts?: RenderOptions): void;
+    /** Switch between auto-fit and a fixed camera (e.g. a plot whose axes must not move). */
+    setViewBox(viewBox: 'auto' | [number, number, number, number]): void;
+    on(type: ViewEventType, handler: (e: ViewEvent) => void): () => void;
+    /** Convert browser client coords (e.g. event.clientX) into scene coords. */
+    toWorld(clientX: number, clientY: number): Vec;
+    destroy(): void;
+}
+/** Create a view inside an existing <svg> element. */
+export declare function createView(svg: SVGSVGElement, options?: ViewOptions): View;

package/dist/render.js

@@ -0,0 +1,294 @@
+import { resampleProps } from "./path.js";
+import { nextCamera } from "./camera.js";
+import { describe, numericProps, tagFor } from "./describe.js";
+import { bounds } from "./scene.js";
+import { easeInOutCubic } from "./easing.js";
+import { injectStyles } from "./styles.js";
+import { feel, geometry } from "./themes.js";
+import { V2 } from "./vec.js";
+const SVG_NS = "http://www.w3.org/2000/svg";
+const definedOnly = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => v !== void 0));
+const lerp = (a, b, t) => a + (b - a) * t;
+function createView(svg, options = {}) {
+  const opts = { viewBox: "auto", padding: 24, injectStyles: true, ...definedOnly(options) };
+  if (opts.injectStyles && typeof document !== "undefined") injectStyles(svg.ownerDocument);
+  svg.classList.add("dv-root");
+  const exitLayer = document.createElementNS(SVG_NS, "g");
+  const liveLayer = document.createElementNS(SVG_NS, "g");
+  svg.append(exitLayer, liveLayer);
+  const ease = () => opts.ease ?? feel.ease;
+  const duration = () => opts.duration ?? feel.duration;
+  const entries = /* @__PURE__ */ new Map();
+  let current = { nodes: [] };
+  let raf = 0;
+  let vb = { from: [0, 0, 1, 1], to: [0, 0, 1, 1], cur: [0, 0, 1, 1], start: 0, dur: 0 };
+  const natural = (opts.size ?? "natural") === "natural";
+  const scale = opts.scale ?? 1;
+  function setBox(box) {
+    svg.setAttribute("viewBox", box.map((v) => Math.round(v * 100) / 100).join(" "));
+    if (natural) {
+      svg.setAttribute("width", String(Math.round(box[2] * scale)));
+      svg.setAttribute("height", String(Math.round(box[3] * scale)));
+    }
+  }
+  svg.classList.toggle("dv-clip", Array.isArray(opts.viewBox));
+  if (Array.isArray(opts.viewBox)) {
+    vb.cur = vb.to = vb.from = [...opts.viewBox];
+    setBox(vb.cur);
+  }
+  const reducedMotion = () => typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  function paint(e) {
+    const d = describe(e.node, e.cur, geometry);
+    if (e.grabbed) d.attrs.class += " dv-grabbed";
+    for (const k in d.attrs) {
+      if (e.el.getAttribute(k) !== d.attrs[k]) e.el.setAttribute(k, d.attrs[k]);
+    }
+    if (d.text !== void 0 && e.el.textContent !== d.text) e.el.textContent = d.text;
+    if (d.html !== void 0 && e.el._html !== d.html) {
+      e.el._html = d.html;
+      e.el.innerHTML = d.html;
+    }
+  }
+  function frame(now) {
+    let busy = false;
+    for (const [id, e] of entries) {
+      if (e.settled) continue;
+      const t = e.dur <= 0 ? 1 : Math.min(1, Math.max(0, (now - e.start) / e.dur));
+      const k = ease()(t);
+      for (const key2 in e.to) e.cur[key2] = lerp(e.from[key2] ?? e.to[key2], e.to[key2], k);
+      paint(e);
+      if (t < 1) busy = true;
+      else if (e.exiting) {
+        e.el.remove();
+        entries.delete(id);
+      } else e.settled = true;
+    }
+    if (!Array.isArray(opts.viewBox)) {
+      const t = vb.dur <= 0 ? 1 : Math.min(1, (now - vb.start) / vb.dur);
+      const k = easeInOutCubic(t);
+      vb.cur = vb.to.map((v, i) => lerp(vb.from[i], v, k));
+      setBox(vb.cur);
+      if (t < 1) busy = true;
+    }
+    raf = busy ? requestAnimationFrame(frame) : 0;
+  }
+  function render(scene, ro = {}) {
+    const dur = reducedMotion() ? 0 : ro.duration ?? duration();
+    const now = performance.now();
+    current = scene;
+    const next = /* @__PURE__ */ new Map();
+    for (const n of scene.nodes) {
+      if (next.has(n.id)) console.warn(`[dsviz] duplicate node id "${n.id}" \u2014 only the first is drawn`);
+      else next.set(n.id, n);
+    }
+    for (const [id, e] of entries) {
+      if (next.has(id) || e.exiting) continue;
+      e.exiting = true;
+      e.settled = false;
+      e.from = { ...e.cur };
+      e.to = { ...e.cur, opacity: 0, ...e.node.exit ?? {} };
+      e.start = now;
+      e.dur = dur;
+      exitLayer.appendChild(e.el);
+    }
+    let i = 0;
+    for (const node of next.values()) {
+      const to = numericProps(node);
+      let e = entries.get(node.id);
+      if (e && tagFor(e.node.kind) !== tagFor(node.kind)) {
+        e.el.remove();
+        entries.delete(node.id);
+        e = void 0;
+      }
+      if (!e) {
+        const from = { ...to, opacity: 0, ...node.enter ?? {} };
+        e = {
+          node,
+          el: document.createElementNS(SVG_NS, tagFor(node.kind)),
+          from,
+          to,
+          cur: { ...from },
+          start: now,
+          dur,
+          exiting: false,
+          settled: false
+        };
+        e.el.setAttribute("data-id", node.id);
+        entries.set(node.id, e);
+      } else {
+        if (node.kind === "path" && e.node.kind === "path" && e.node.points.length !== node.points.length) {
+          e.cur = { ...e.cur, ...resampleProps(e.cur, e.node.points.length, node.points.length, !!node.closed) };
+        }
+        e.exiting = false;
+        e.from = { ...to, ...e.cur };
+        e.to = to;
+        e.node = node;
+        e.start = now;
+        e.dur = dur;
+        e.settled = false;
+      }
+      const at = liveLayer.childNodes[i] ?? null;
+      if (at !== e.el) liveLayer.insertBefore(e.el, at);
+      i++;
+    }
+    if (!Array.isArray(opts.viewBox) && next.size && ro.camera !== false) {
+      const b = bounds(scene);
+      const p = opts.padding;
+      const first = vb.to[2] === 1 && vb.to[3] === 1;
+      const target = nextCamera(first ? null : vb.to, [b.x - p, b.y - p, b.w + 2 * p, b.h + 2 * p], opts.camera ?? "grow");
+      const moved = target.some((v, k) => v !== vb.to[k]);
+      if (first || moved) vb = { from: first ? target : [...vb.cur], to: target, cur: [...vb.cur], start: now, dur: first ? 0 : dur };
+    }
+    if (raf) cancelAnimationFrame(raf);
+    frame(now);
+  }
+  const handlers = /* @__PURE__ */ new Map();
+  function toWorld(clientX, clientY) {
+    const m = svg.getScreenCTM();
+    if (!m) return V2(clientX, clientY);
+    const p = new DOMPoint(clientX, clientY).matrixTransform(m.inverse());
+    return V2(p.x, p.y);
+  }
+  function emit(type, id, ev, at) {
+    const e = entries.get(id);
+    const set = handlers.get(type);
+    if (!e || !set) return;
+    let w = at ?? toWorld(ev.clientX, ev.clientY);
+    if (type !== "click") w = keepInView(w, e.node);
+    for (const h of set) h({ type, id, node: e.node, x: w.x, y: w.y, original: ev, keyboard: !!at });
+  }
+  function keepInView(w, node) {
+    const [x, y, bw, bh] = vb.to;
+    if (bw <= 1 || bh <= 1) return w;
+    const b = bounds({ nodes: [node] });
+    const mx = Math.min(b.w / 2, bw / 4), my = Math.min(b.h / 2, bh / 4);
+    return V2(Math.max(x + mx, Math.min(x + bw - mx, w.x)), Math.max(y + my, Math.min(y + bh - my, w.y)));
+  }
+  const idOf = (t) => t instanceof Element ? t.closest("[data-id]")?.getAttribute("data-id") ?? null : null;
+  const grab = (id, on) => {
+    const e = entries.get(id);
+    if (e) e.grabbed = on, paint(e);
+  };
+  let drag = null;
+  let swallowClick = false;
+  const onPointerDown = (ev) => {
+    swallowClick = false;
+    const id = idOf(ev.target);
+    const e = id ? entries.get(id) : void 0;
+    if (!id || !e?.node.draggable) return;
+    ev.preventDefault();
+    svg.setPointerCapture(ev.pointerId);
+    key = null;
+    drag = { id, pointer: ev.pointerId, sx: ev.clientX, sy: ev.clientY, moved: false };
+    grab(id, true);
+    svg.classList.add("dv-dragging");
+    emit("dragstart", id, ev);
+  };
+  const onPointerMove = (ev) => {
+    if (!drag || ev.pointerId !== drag.pointer) return;
+    if (Math.hypot(ev.clientX - drag.sx, ev.clientY - drag.sy) > 3) drag.moved = true;
+    emit("drag", drag.id, ev);
+  };
+  const onPointerUp = (ev) => {
+    if (!drag || ev.pointerId !== drag.pointer) return;
+    const cancelled = ev.type === "pointercancel";
+    swallowClick = !cancelled;
+    emit("dragend", drag.id, ev);
+    if (!drag.moved && !cancelled) emit("click", drag.id, ev);
+    grab(drag.id, false);
+    svg.classList.remove("dv-dragging");
+    drag = null;
+  };
+  const onClick = (ev) => {
+    if (swallowClick) {
+      swallowClick = false;
+      return;
+    }
+    const id = idOf(ev.target);
+    if (id) emit("click", id, ev);
+  };
+  let key = null;
+  const STEPS = {
+    ArrowLeft: [-1, 0],
+    ArrowRight: [1, 0],
+    ArrowUp: [0, -1],
+    ArrowDown: [0, 1]
+  };
+  const centre = (n) => {
+    const b = bounds({ nodes: [n] });
+    return V2(b.x + b.w / 2, b.y + b.h / 2);
+  };
+  const onKeyDown = (ev) => {
+    const dir = STEPS[ev.key];
+    const id = idOf(ev.target);
+    const e = id ? entries.get(id) : void 0;
+    if (!dir || !id || !e?.node.draggable) return;
+    ev.preventDefault();
+    if (!key || key.id !== id) key = { id, at: centre(e.node), down: false };
+    const step = Math.max(vb.to[2], vb.to[3]) / 60 * (ev.shiftKey ? 5 : 1);
+    if (!key.down) emit("dragstart", id, ev, key.at), key.down = true;
+    key.at = V2(key.at.x + dir[0] * step, key.at.y + dir[1] * step);
+    emit("drag", id, ev, key.at);
+  };
+  const endKey = (ev) => {
+    if (!key?.down) return;
+    key.down = false;
+    emit("dragend", key.id, ev, key.at);
+  };
+  const onKeyUp = (ev) => STEPS[ev.key] && endKey(ev);
+  const onFocusOut = (ev) => (endKey(ev), key = null);
+  const onTouchStart = (ev) => {
+    const id = idOf(ev.target);
+    if (id && entries.get(id)?.node.draggable) ev.preventDefault();
+  };
+  svg.addEventListener("touchstart", onTouchStart, { passive: false });
+  svg.addEventListener("keydown", onKeyDown);
+  svg.addEventListener("keyup", onKeyUp);
+  svg.addEventListener("focusout", onFocusOut);
+  svg.addEventListener("pointerdown", onPointerDown);
+  svg.addEventListener("pointermove", onPointerMove);
+  svg.addEventListener("pointerup", onPointerUp);
+  svg.addEventListener("pointercancel", onPointerUp);
+  svg.addEventListener("click", onClick);
+  return {
+    svg,
+    get scene() {
+      return current;
+    },
+    render,
+    setViewBox(v) {
+      opts.viewBox = v;
+      svg.classList.toggle("dv-clip", Array.isArray(v));
+      if (Array.isArray(v)) {
+        vb.cur = vb.to = vb.from = [...v];
+        setBox(v);
+      } else render(current, { duration: 0 });
+    },
+    toWorld,
+    on(type, handler) {
+      if (!handlers.has(type)) handlers.set(type, /* @__PURE__ */ new Set());
+      handlers.get(type).add(handler);
+      return () => handlers.get(type)?.delete(handler);
+    },
+    destroy() {
+      if (raf) cancelAnimationFrame(raf);
+      svg.removeEventListener("touchstart", onTouchStart);
+      svg.removeEventListener("keydown", onKeyDown);
+      svg.removeEventListener("keyup", onKeyUp);
+      svg.removeEventListener("focusout", onFocusOut);
+      svg.removeEventListener("pointerdown", onPointerDown);
+      svg.removeEventListener("pointermove", onPointerMove);
+      svg.removeEventListener("pointerup", onPointerUp);
+      svg.removeEventListener("pointercancel", onPointerUp);
+      svg.removeEventListener("click", onClick);
+      exitLayer.remove();
+      liveLayer.remove();
+      entries.clear();
+      handlers.clear();
+    }
+  };
+}
+export {
+  createView
+};
+//# sourceMappingURL=render.js.map

package/dist/render.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/render.ts"],
+  "sourcesContent": ["/**\n * The DOM renderer: a tiny \"keyed reconciler + tween engine\" for SVG.\n *\n * Every call to view.render(scene) does three things:\n *\n *  1. DIFF by id     \u2014 new ids are created, missing ids start exiting,\n *                      surviving ids are updated in place.\n *  2. RETARGET       \u2014 each surviving node tweens from WHERE IT IS RIGHT NOW\n *                      (not where it was last told to go) to its new target.\n *                      That's what makes interrupting an animation look smooth.\n *  3. ANIMATE        \u2014 one requestAnimationFrame loop interpolates every node's\n *                      numeric props and repaints via describe().\n *\n * Colours are NOT tweened here: tones are CSS classes, and CSS transitions\n * handle colour. JS only animates geometry.\n */\nimport { resampleProps } from './path';\nimport { ViewBox, nextCamera } from './camera';\nimport { describe, numericProps, tagFor } from './describe';\nimport { Box, NumericProps, Scene, SceneNode, bounds } from './scene';\nimport { Easing, easeInOutCubic } from './easing';\nimport { injectStyles } from './styles';\nimport { feel, geometry } from './themes';\nimport { V2, Vec } from './vec';\n\nconst SVG_NS = 'http://www.w3.org/2000/svg';\n\nexport interface ViewOptions {\n  /** Animation length in ms. Default 380. */\n  duration?: number;\n  ease?: Easing;\n  /** 'auto' fits the viewBox to the scene (and animates it); or pass a fixed [x, y, w, h]. */\n  viewBox?: 'auto' | [number, number, number, number];\n  /**\n   * 'natural' (default): the svg's width/height follow the viewBox, so one scene\n   * unit is one CSS pixel (times `scale`). Text and strokes come out the same\n   * size in every diagram; CSS `max-width: 100%` lets it shrink on small screens.\n   * 'fill': no size attributes; you size the svg with CSS and the drawing stretches.\n   */\n  size?: 'natural' | 'fill';\n  /** Pixels per scene unit in 'natural' mode. Default 1. */\n  scale?: number;\n  /** Padding around the scene in 'auto' mode. Default 24. */\n  padding?: number;\n  /**\n   * How an 'auto' camera follows the scene. 'grow' (default): only grows when\n   * something would fall outside, shrinks only when the content is much smaller.\n   * 'fit': refit on every render. See camera.ts for when to use which.\n   */\n  camera?: 'grow' | 'fit';\n  /** Inject the default stylesheet into <head>. Default true. */\n  injectStyles?: boolean;\n}\n\nexport interface RenderOptions {\n  /** Override the duration for this render only. Use 0 while dragging. */\n  duration?: number;\n  /** Set false to leave the camera exactly where it is for this render (e.g. while dragging). */\n  camera?: boolean;\n}\n\nexport type ViewEventType = 'click' | 'dragstart' | 'drag' | 'dragend';\n\nexport interface ViewEvent {\n  type: ViewEventType;\n  id: string;\n  node: SceneNode;\n  /** Pointer position in scene (world) coordinates. */\n  x: number;\n  y: number;\n  original: Event;\n  /** True when the event came from the arrow keys rather than a pointer. */\n  keyboard?: boolean;\n}\n\nexport interface View {\n  readonly svg: SVGSVGElement;\n  /** The last scene passed to render(). */\n  readonly scene: Scene;\n  render(scene: Scene, opts?: RenderOptions): void;\n  /** Switch between auto-fit and a fixed camera (e.g. a plot whose axes must not move). */\n  setViewBox(viewBox: 'auto' | [number, number, number, number]): void;\n  on(type: ViewEventType, handler: (e: ViewEvent) => void): () => void;\n  /** Convert browser client coords (e.g. event.clientX) into scene coords. */\n  toWorld(clientX: number, clientY: number): Vec;\n  destroy(): void;\n}\n\n/** Per-node bookkeeping. `cur` is what is on screen this frame. */\ninterface Entry {\n  node: SceneNode;\n  el: SVGElement;\n  from: NumericProps;\n  to: NumericProps;\n  cur: NumericProps;\n  start: number;\n  dur: number;\n  exiting: boolean;\n  settled: boolean;\n  /** Being dragged right now: gets the `dv-grabbed` class (the stylesheet gives it a lifted shadow). */\n  grabbed?: boolean;\n}\n\n/** `{ ...defaults, ...options }` lets an explicit `undefined` erase a default; drop those keys first. */\nconst definedOnly = <T extends object>(o: T): Partial<T> =>\n  Object.fromEntries(Object.entries(o).filter(([, v]) => v !== undefined)) as Partial<T>;\n\nconst lerp = (a: number, b: number, t: number) => a + (b - a) * t;\n\n/** Create a view inside an existing <svg> element. */\nexport function createView(svg: SVGSVGElement, options: ViewOptions = {}): View {\n  const opts = { viewBox: 'auto' as 'auto' | [number, number, number, number], padding: 24, injectStyles: true, ...definedOnly(options) } as Required<Pick<ViewOptions, 'viewBox' | 'padding' | 'injectStyles'>> & ViewOptions;\n  if (opts.injectStyles && typeof document !== 'undefined') injectStyles(svg.ownerDocument);\n  svg.classList.add('dv-root');\n\n  // Two layers: nodes that are leaving fade out *underneath* the live scene.\n  const exitLayer = document.createElementNS(SVG_NS, 'g');\n  const liveLayer = document.createElementNS(SVG_NS, 'g');\n  svg.append(exitLayer, liveLayer);\n\n  const ease = () => opts.ease ?? feel.ease;\n  const duration = () => opts.duration ?? feel.duration;\n\n  const entries = new Map<string, Entry>();\n  let current: Scene = { nodes: [] };\n  let raf = 0;\n\n  // The viewBox is animated exactly like a node: from \u2192 to over a duration.\n  let vb = { from: [0, 0, 1, 1], to: [0, 0, 1, 1], cur: [0, 0, 1, 1], start: 0, dur: 0 };\n  // In natural mode the element's size tracks the viewBox, so 1 unit = `scale` px.\n  const natural = (opts.size ?? 'natural') === 'natural';\n  const scale = opts.scale ?? 1;\n  function setBox(box: number[]) {\n    svg.setAttribute('viewBox', box.map((v) => Math.round(v * 100) / 100).join(' '));\n    if (natural) {\n      svg.setAttribute('width', String(Math.round(box[2] * scale)));\n      svg.setAttribute('height', String(Math.round(box[3] * scale)));\n    }\n  }\n  // A fixed camera IS the figure: clip whatever falls outside it (a huge\n  // circumcircle, a long tangent line) instead of letting it spill over the page.\n  svg.classList.toggle('dv-clip', Array.isArray(opts.viewBox));\n  if (Array.isArray(opts.viewBox)) {\n    vb.cur = vb.to = vb.from = [...opts.viewBox];\n    setBox(vb.cur);\n  }\n\n  const reducedMotion = () =>\n    typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  function paint(e: Entry) {\n    const d = describe(e.node, e.cur, geometry);\n    if (e.grabbed) d.attrs.class += ' dv-grabbed';\n    for (const k in d.attrs) {\n      if (e.el.getAttribute(k) !== d.attrs[k]) e.el.setAttribute(k, d.attrs[k]);\n    }\n    if (d.text !== undefined && e.el.textContent !== d.text) e.el.textContent = d.text;\n    if (d.html !== undefined && (e.el as SVGElement & { _html?: string })._html !== d.html) {\n      (e.el as SVGElement & { _html?: string })._html = d.html; // compare against what we set, not the browser's serialisation\n      e.el.innerHTML = d.html;\n    }\n  }\n\n  function frame(now: number) {\n    let busy = false;\n    for (const [id, e] of entries) {\n      if (e.settled) continue;\n      const t = e.dur <= 0 ? 1 : Math.min(1, Math.max(0, (now - e.start) / e.dur));\n      const k = ease()(t);\n      for (const key in e.to) e.cur[key] = lerp(e.from[key] ?? e.to[key], e.to[key], k);\n      paint(e);\n      if (t < 1) busy = true;\n      else if (e.exiting) {\n        e.el.remove();\n        entries.delete(id);\n      } else e.settled = true;\n    }\n    if (!Array.isArray(opts.viewBox)) {\n      // The camera never bounces, whatever the theme's easing.\n      const t = vb.dur <= 0 ? 1 : Math.min(1, (now - vb.start) / vb.dur);\n      const k = easeInOutCubic(t);\n      vb.cur = vb.to.map((v, i) => lerp(vb.from[i], v, k));\n      setBox(vb.cur);\n      if (t < 1) busy = true;\n    }\n    raf = busy ? requestAnimationFrame(frame) : 0;\n  }\n\n  function render(scene: Scene, ro: RenderOptions = {}) {\n    const dur = reducedMotion() ? 0 : (ro.duration ?? duration());\n    const now = performance.now();\n    current = scene;\n\n    // Dedupe ids (and warn: duplicate ids are the #1 bug with keyed rendering).\n    const next = new Map<string, SceneNode>();\n    for (const n of scene.nodes) {\n      if (next.has(n.id)) console.warn(`[dsviz] duplicate node id \"${n.id}\" \u2014 only the first is drawn`);\n      else next.set(n.id, n);\n    }\n\n    // 1. Exits: anything on screen that is no longer in the scene.\n    for (const [id, e] of entries) {\n      if (next.has(id) || e.exiting) continue;\n      e.exiting = true;\n      e.settled = false;\n      e.from = { ...e.cur };\n      e.to = { ...e.cur, opacity: 0, ...(e.node.exit ?? {}) } as NumericProps;\n      e.start = now;\n      e.dur = dur;\n      exitLayer.appendChild(e.el);\n    }\n\n    // 2. Enters + updates, and put DOM order == scene order (paint order).\n    let i = 0;\n    for (const node of next.values()) {\n      const to = numericProps(node);\n      let e = entries.get(node.id);\n      if (e && tagFor(e.node.kind) !== tagFor(node.kind)) {\n        e.el.remove(); // same id but a different shape type: just replace it\n        entries.delete(node.id);\n        e = undefined;\n      }\n      if (!e) {\n        const from = { ...to, opacity: 0, ...(node.enter ?? {}) } as NumericProps;\n        e = {\n          node,\n          el: document.createElementNS(SVG_NS, tagFor(node.kind)),\n          from,\n          to,\n          cur: { ...from },\n          start: now,\n          dur,\n          exiting: false,\n          settled: false,\n        };\n        // The scene id, so a test, a stylesheet or devtools can find one node.\n        e.el.setAttribute('data-id', node.id);\n        entries.set(node.id, e);\n      } else {\n        // A path whose point count changed: resample what is on screen to the new\n        // count first, so tweening point i -> point i still means something.\n        if (node.kind === 'path' && e.node.kind === 'path' && e.node.points.length !== node.points.length) {\n          e.cur = { ...e.cur, ...resampleProps(e.cur, e.node.points.length, node.points.length, !!node.closed) };\n        }\n        e.exiting = false; // it may have been mid-exit and come back\n        e.from = { ...to, ...e.cur }; // start from what's on screen right now\n        e.to = to;\n        e.node = node;\n        e.start = now;\n        e.dur = dur;\n        e.settled = false;\n      }\n      const at = liveLayer.childNodes[i] ?? null;\n      if (at !== e.el) liveLayer.insertBefore(e.el, at);\n      i++;\n    }\n\n    // 3. Retarget the camera (auto mode only, and not while something is being dragged).\n    if (!Array.isArray(opts.viewBox) && next.size && ro.camera !== false) {\n      const b: Box = bounds(scene);\n      const p = opts.padding;\n      const first = vb.to[2] === 1 && vb.to[3] === 1;\n      const target = nextCamera(first ? null : (vb.to as ViewBox), [b.x - p, b.y - p, b.w + 2 * p, b.h + 2 * p], opts.camera ?? 'grow');\n      const moved = target.some((v, k) => v !== vb.to[k]);\n      if (first || moved) vb = { from: first ? target : [...vb.cur], to: target, cur: [...vb.cur], start: now, dur: first ? 0 : dur };\n    }\n\n    // Paint the first frame synchronously (instant feedback while dragging),\n    // then let requestAnimationFrame take over.\n    if (raf) cancelAnimationFrame(raf);\n    frame(now);\n  }\n\n  // \u2500\u2500 events \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  const handlers = new Map<ViewEventType, Set<(e: ViewEvent) => void>>();\n\n  function toWorld(clientX: number, clientY: number): Vec {\n    const m = svg.getScreenCTM();\n    if (!m) return V2(clientX, clientY);\n    const p = new DOMPoint(clientX, clientY).matrixTransform(m.inverse());\n    return V2(p.x, p.y);\n  }\n\n  function emit(type: ViewEventType, id: string, ev: PointerEvent | MouseEvent | KeyboardEvent, at?: Vec) {\n    const e = entries.get(id);\n    const set = handlers.get(type);\n    if (!e || !set) return;\n    let w = at ?? toWorld((ev as MouseEvent).clientX, (ev as MouseEvent).clientY);\n    if (type !== 'click') w = keepInView(w, e.node);\n    for (const h of set) h({ type, id, node: e.node, x: w.x, y: w.y, original: ev, keyboard: !!at });\n  }\n\n  // A drag can never take something off the canvas: clamp the reported point to\n  // the camera box, inset by the dragged shape's half-size so all of it stays\n  // visible. (The camera is frozen during a drag, so this box doesn't move.)\n  function keepInView(w: Vec, node: SceneNode): Vec {\n    const [x, y, bw, bh] = vb.to;\n    if (bw <= 1 || bh <= 1) return w;\n    const b = bounds({ nodes: [node] });\n    const mx = Math.min(b.w / 2, bw / 4), my = Math.min(b.h / 2, bh / 4);\n    return V2(Math.max(x + mx, Math.min(x + bw - mx, w.x)), Math.max(y + my, Math.min(y + bh - my, w.y)));\n  }\n\n  const idOf = (t: EventTarget | null): string | null =>\n    t instanceof Element ? (t.closest('[data-id]')?.getAttribute('data-id') ?? null) : null;\n\n  const grab = (id: string, on: boolean) => {\n    const e = entries.get(id);\n    if (e) (e.grabbed = on), paint(e);\n  };\n\n  let drag: { id: string; pointer: number; sx: number; sy: number; moved: boolean } | null = null;\n  let swallowClick = false;\n\n  const onPointerDown = (ev: PointerEvent) => {\n    swallowClick = false; // a fresh press: whatever the last one left behind no longer applies\n    const id = idOf(ev.target);\n    const e = id ? entries.get(id) : undefined;\n    if (!id || !e?.node.draggable) return;\n    ev.preventDefault();\n    svg.setPointerCapture(ev.pointerId);\n    key = null;\n    drag = { id, pointer: ev.pointerId, sx: ev.clientX, sy: ev.clientY, moved: false };\n    grab(id, true);\n    svg.classList.add('dv-dragging');\n    emit('dragstart', id, ev);\n  };\n  const onPointerMove = (ev: PointerEvent) => {\n    if (!drag || ev.pointerId !== drag.pointer) return;\n    if (Math.hypot(ev.clientX - drag.sx, ev.clientY - drag.sy) > 3) drag.moved = true;\n    emit('drag', drag.id, ev);\n  };\n  const onPointerUp = (ev: PointerEvent) => {\n    if (!drag || ev.pointerId !== drag.pointer) return;\n    // Pointer capture sends the browser's click to the <svg>, not the node, so\n    // we decide here: a press that didn't move is a click on the node itself.\n    // The native click that follows is swallowed either way.\n    const cancelled = ev.type === 'pointercancel';\n    swallowClick = !cancelled;\n    emit('dragend', drag.id, ev);\n    if (!drag.moved && !cancelled) emit('click', drag.id, ev);\n    grab(drag.id, false);\n    svg.classList.remove('dv-dragging');\n    drag = null;\n  };\n  const onClick = (ev: MouseEvent) => {\n    if (swallowClick) {\n      swallowClick = false;\n      return;\n    }\n    const id = idOf(ev.target);\n    if (id) emit('click', id, ev);\n  };\n\n  // Keyboard dragging. Arrow keys move a VIRTUAL POINTER that starts on the\n  // node and accumulates, and we emit the same dragstart/drag/dragend a mouse\n  // would \u2014 so every drag handler works with the keyboard for free. The pointer\n  // accumulates (rather than restarting from the node each press) so handlers\n  // that snap to a grid still move: three small presses add up to one cell.\n  let key: { id: string; at: Vec; down: boolean } | null = null;\n  const STEPS: Record<string, [number, number]> = {\n    ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1],\n  };\n  const centre = (n: SceneNode) => {\n    const b = bounds({ nodes: [n] });\n    return V2(b.x + b.w / 2, b.y + b.h / 2);\n  };\n  const onKeyDown = (ev: KeyboardEvent) => {\n    const dir = STEPS[ev.key];\n    const id = idOf(ev.target);\n    const e = id ? entries.get(id) : undefined;\n    if (!dir || !id || !e?.node.draggable) return;\n    ev.preventDefault(); // don't scroll the page\n    if (!key || key.id !== id) key = { id, at: centre(e.node), down: false };\n    // One step is a fixed fraction of the view, so it feels the same at any zoom.\n    const step = (Math.max(vb.to[2], vb.to[3]) / 60) * (ev.shiftKey ? 5 : 1);\n    if (!key.down) emit('dragstart', id, ev, key.at), (key.down = true);\n    key.at = V2(key.at.x + dir[0] * step, key.at.y + dir[1] * step);\n    emit('drag', id, ev, key.at);\n  };\n  const endKey = (ev: Event) => {\n    if (!key?.down) return;\n    key.down = false;\n    emit('dragend', key.id, ev as KeyboardEvent, key.at);\n  };\n  const onKeyUp = (ev: KeyboardEvent) => STEPS[ev.key] && endKey(ev);\n  const onFocusOut = (ev: FocusEvent) => (endKey(ev), (key = null));\n\n  // Touch: stop the page scrolling when a finger lands on something draggable.\n  // CSS touch-action is unreliable on elements INSIDE an svg, and once the\n  // browser decides a touch is a scroll it cancels the pointer events (the drag\n  // just dies). A non-passive touchstart that cancels only on draggables keeps\n  // scrolling over the rest of the diagram working.\n  const onTouchStart = (ev: TouchEvent) => {\n    const id = idOf(ev.target);\n    if (id && entries.get(id)?.node.draggable) ev.preventDefault();\n  };\n  svg.addEventListener('touchstart', onTouchStart, { passive: false });\n  svg.addEventListener('keydown', onKeyDown);\n  svg.addEventListener('keyup', onKeyUp);\n  svg.addEventListener('focusout', onFocusOut);\n  svg.addEventListener('pointerdown', onPointerDown);\n  svg.addEventListener('pointermove', onPointerMove);\n  svg.addEventListener('pointerup', onPointerUp);\n  svg.addEventListener('pointercancel', onPointerUp);\n  svg.addEventListener('click', onClick);\n\n  return {\n    svg,\n    get scene() {\n      return current;\n    },\n    render,\n    setViewBox(v) {\n      opts.viewBox = v;\n      svg.classList.toggle('dv-clip', Array.isArray(v));\n      if (Array.isArray(v)) {\n        vb.cur = vb.to = vb.from = [...v];\n        setBox(v);\n      } else render(current, { duration: 0 });\n    },\n    toWorld,\n    on(type, handler) {\n      if (!handlers.has(type)) handlers.set(type, new Set());\n      handlers.get(type)!.add(handler);\n      return () => handlers.get(type)?.delete(handler);\n    },\n    destroy() {\n      if (raf) cancelAnimationFrame(raf);\n      svg.removeEventListener('touchstart', onTouchStart);\n      svg.removeEventListener('keydown', onKeyDown);\n      svg.removeEventListener('keyup', onKeyUp);\n      svg.removeEventListener('focusout', onFocusOut);\n      svg.removeEventListener('pointerdown', onPointerDown);\n      svg.removeEventListener('pointermove', onPointerMove);\n      svg.removeEventListener('pointerup', onPointerUp);\n      svg.removeEventListener('pointercancel', onPointerUp);\n      svg.removeEventListener('click', onClick);\n      exitLayer.remove();\n      liveLayer.remove();\n      entries.clear();\n      handlers.clear();\n    },\n  };\n}\n"],
+  "mappings": "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",
+  "names": ["key"]
+}