@voila.dev/chart 4.0.0

package/dist/react/use-chart-focus.js

@@ -0,0 +1,180 @@
+import * as React from "react";
+function across(stop, order) {
+  return [...stop.points].sort(
+    (left, right) => order === "y" ? left.x - right.x : left.y - right.y
+  );
+}
+const ALONG_KEYS = {
+  x: { next: ["ArrowRight"], previous: ["ArrowLeft"] },
+  y: { next: ["ArrowDown"], previous: ["ArrowUp"] },
+  point: {
+    next: ["ArrowRight", "ArrowDown"],
+    previous: ["ArrowLeft", "ArrowUp"]
+  }
+};
+const ACROSS_KEYS = {
+  x: { next: ["ArrowDown"], previous: ["ArrowUp"] },
+  y: { next: ["ArrowRight"], previous: ["ArrowLeft"] },
+  point: { next: [], previous: [] }
+};
+function useChartFocus({
+  stops,
+  order,
+  hitTest,
+  onFocusChange,
+  onSelect
+}) {
+  const [state, setState] = React.useState(null);
+  const active = React.useMemo(() => {
+    if (state === null) {
+      return null;
+    }
+    const stop = stops.find((candidate) => candidate.key === state.stopKey);
+    const point = stop?.points.find(
+      (candidate) => candidate.key === state.pointKey
+    );
+    return stop && point ? { stop, point, source: state.source, pinned: state.pinned } : null;
+  }, [state, stops]);
+  const activeKey = active?.point.key;
+  const onFocusChangeRef = React.useRef(onFocusChange);
+  onFocusChangeRef.current = onFocusChange;
+  React.useEffect(() => {
+    onFocusChangeRef.current?.(active?.point ?? null);
+  }, [activeKey]);
+  function focusStop(index, source, pointIndex = 0) {
+    const stop = stops[index];
+    if (stop === void 0) {
+      return;
+    }
+    const points = across(stop, order);
+    const point = points[Math.min(pointIndex, points.length - 1)];
+    setState({ stopKey: stop.key, pointKey: point.key, source, pinned: false });
+  }
+  function onKeyDown(event) {
+    if (stops.length === 0) {
+      return;
+    }
+    const stopIndex = active ? stops.indexOf(active.stop) : -1;
+    const along = ALONG_KEYS[order];
+    const crossing = ACROSS_KEYS[order];
+    const { key } = event;
+    let handled = true;
+    if (along.next.includes(key)) {
+      focusStop(
+        stopIndex === -1 ? 0 : Math.min(stops.length - 1, stopIndex + 1),
+        "keyboard"
+      );
+    } else if (along.previous.includes(key)) {
+      focusStop(stopIndex === -1 ? 0 : Math.max(0, stopIndex - 1), "keyboard");
+    } else if (key === "Home") {
+      focusStop(0, "keyboard");
+    } else if (key === "End") {
+      focusStop(stops.length - 1, "keyboard");
+    } else if (active && (crossing.next.includes(key) || crossing.previous.includes(key))) {
+      const points = across(active.stop, order);
+      const current = points.indexOf(active.point);
+      const step = crossing.next.includes(key) ? 1 : -1;
+      const next = points[Math.min(points.length - 1, Math.max(0, current + step))];
+      setState({
+        stopKey: active.stop.key,
+        pointKey: next.key,
+        source: "keyboard",
+        pinned: false
+      });
+    } else if ((key === "Enter" || key === " ") && active) {
+      setState({
+        stopKey: active.stop.key,
+        pointKey: active.point.key,
+        source: "keyboard",
+        pinned: !active.pinned
+      });
+      onSelect?.(active.pinned ? null : active.point);
+    } else if (key === "Escape" && active) {
+      setState(
+        active.pinned ? {
+          stopKey: active.stop.key,
+          pointKey: active.point.key,
+          source: "keyboard",
+          pinned: false
+        } : null
+      );
+    } else {
+      handled = false;
+    }
+    if (handled) {
+      event.preventDefault();
+    }
+  }
+  function localPoint(event) {
+    const box = event.currentTarget.getBoundingClientRect();
+    return { x: event.clientX - box.left, y: event.clientY - box.top };
+  }
+  function onPointerMove(event) {
+    if (active?.pinned) {
+      return;
+    }
+    const { x, y } = localPoint(event);
+    const hit = hitTest(x, y);
+    if (hit === null) {
+      setState(null);
+      return;
+    }
+    const stop = stops[hit.stop];
+    const point = stop.points[hit.point];
+    if (stop.key !== state?.stopKey || point.key !== state?.pointKey) {
+      setState({
+        stopKey: stop.key,
+        pointKey: point.key,
+        source: "pointer",
+        pinned: false
+      });
+    }
+  }
+  function onPointerLeave() {
+    if (!active?.pinned) {
+      setState(null);
+    }
+  }
+  function onClick(event) {
+    const { x, y } = localPoint(event);
+    const hit = hitTest(x, y);
+    if (hit === null) {
+      setState(null);
+      onSelect?.(null);
+      return;
+    }
+    const stop = stops[hit.stop];
+    const point = stop.points[hit.point];
+    const unpin = active?.pinned === true && active.point.key === point.key;
+    setState({
+      stopKey: stop.key,
+      pointKey: point.key,
+      source: "pointer",
+      pinned: !unpin
+    });
+    onSelect?.(unpin ? null : point);
+  }
+  function onFocus(event) {
+    if (state === null && event.currentTarget.matches(":focus-visible")) {
+      focusStop(0, "keyboard");
+    }
+  }
+  function onBlur() {
+    setState(null);
+  }
+  return {
+    active,
+    handlers: {
+      onKeyDown,
+      onPointerMove,
+      onPointerLeave,
+      onClick,
+      onFocus,
+      onBlur
+    }
+  };
+}
+export {
+  useChartFocus
+};
+//# sourceMappingURL=use-chart-focus.js.map

package/dist/react/use-chart-focus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/use-chart-focus.ts"],
+  "sourcesContent": ["import * as React from \"react\";\nimport type { ChartFocusStop, findNearest } from \"#/core/nearest.ts\";\nimport type { ChartFocusOrder, ChartPoint } from \"#/core/types.ts\";\n\n/**\n * Which point the reader is on, by the pointer or the keyboard. Focus is held\n * by key, not index, so it stays on the same datum when the data updates\n * around it, and drops cleanly when that datum goes away.\n */\ninterface FocusState {\n\treadonly stopKey: string;\n\treadonly pointKey: string;\n\treadonly source: \"pointer\" | \"keyboard\";\n\treadonly pinned: boolean;\n}\n\nexport interface ActiveFocus {\n\treadonly stop: ChartFocusStop;\n\treadonly point: ChartPoint;\n\treadonly source: \"pointer\" | \"keyboard\";\n\treadonly pinned: boolean;\n}\n\ninterface Options {\n\treadonly stops: ReadonlyArray<ChartFocusStop>;\n\treadonly order: ChartFocusOrder;\n\treadonly hitTest: (x: number, y: number) => ReturnType<typeof findNearest>;\n\treadonly onFocusChange?: (point: ChartPoint | null) => void;\n\treadonly onSelect?: (point: ChartPoint | null) => void;\n}\n\n/** Points of a stop in screen order across the stop: top to bottom, or left to right. */\nfunction across(\n\tstop: ChartFocusStop,\n\torder: ChartFocusOrder,\n): ReadonlyArray<ChartPoint> {\n\treturn [...stop.points].sort((left, right) =>\n\t\torder === \"y\" ? left.x - right.x : left.y - right.y,\n\t);\n}\n\nconst ALONG_KEYS: Record<\n\tChartFocusOrder,\n\t{ next: string[]; previous: string[] }\n> = {\n\tx: { next: [\"ArrowRight\"], previous: [\"ArrowLeft\"] },\n\ty: { next: [\"ArrowDown\"], previous: [\"ArrowUp\"] },\n\tpoint: {\n\t\tnext: [\"ArrowRight\", \"ArrowDown\"],\n\t\tprevious: [\"ArrowLeft\", \"ArrowUp\"],\n\t},\n};\n\nconst ACROSS_KEYS: Record<\n\tChartFocusOrder,\n\t{ next: string[]; previous: string[] }\n> = {\n\tx: { next: [\"ArrowDown\"], previous: [\"ArrowUp\"] },\n\ty: { next: [\"ArrowRight\"], previous: [\"ArrowLeft\"] },\n\tpoint: { next: [], previous: [] },\n};\n\nexport function useChartFocus({\n\tstops,\n\torder,\n\thitTest,\n\tonFocusChange,\n\tonSelect,\n}: Options) {\n\tconst [state, setState] = React.useState<FocusState | null>(null);\n\n\tconst active = React.useMemo<ActiveFocus | null>(() => {\n\t\tif (state === null) {\n\t\t\treturn null;\n\t\t}\n\t\tconst stop = stops.find((candidate) => candidate.key === state.stopKey);\n\t\tconst point = stop?.points.find(\n\t\t\t(candidate) => candidate.key === state.pointKey,\n\t\t);\n\t\treturn stop && point\n\t\t\t? { stop, point, source: state.source, pinned: state.pinned }\n\t\t\t: null;\n\t}, [state, stops]);\n\n\tconst activeKey = active?.point.key;\n\tconst onFocusChangeRef = React.useRef(onFocusChange);\n\tonFocusChangeRef.current = onFocusChange;\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: fires on a change of point, not on every render\n\tReact.useEffect(() => {\n\t\tonFocusChangeRef.current?.(active?.point ?? null);\n\t}, [activeKey]);\n\n\tfunction focusStop(\n\t\tindex: number,\n\t\tsource: FocusState[\"source\"],\n\t\tpointIndex = 0,\n\t) {\n\t\tconst stop = stops[index];\n\t\tif (stop === undefined) {\n\t\t\treturn;\n\t\t}\n\t\tconst points = across(stop, order);\n\t\tconst point = points[Math.min(pointIndex, points.length - 1)];\n\t\tsetState({ stopKey: stop.key, pointKey: point.key, source, pinned: false });\n\t}\n\n\tfunction onKeyDown(event: React.KeyboardEvent<HTMLElement>) {\n\t\tif (stops.length === 0) {\n\t\t\treturn;\n\t\t}\n\t\tconst stopIndex = active ? stops.indexOf(active.stop) : -1;\n\t\tconst along = ALONG_KEYS[order];\n\t\tconst crossing = ACROSS_KEYS[order];\n\t\tconst { key } = event;\n\t\tlet handled = true;\n\t\tif (along.next.includes(key)) {\n\t\t\tfocusStop(\n\t\t\t\tstopIndex === -1 ? 0 : Math.min(stops.length - 1, stopIndex + 1),\n\t\t\t\t\"keyboard\",\n\t\t\t);\n\t\t} else if (along.previous.includes(key)) {\n\t\t\tfocusStop(stopIndex === -1 ? 0 : Math.max(0, stopIndex - 1), \"keyboard\");\n\t\t} else if (key === \"Home\") {\n\t\t\tfocusStop(0, \"keyboard\");\n\t\t} else if (key === \"End\") {\n\t\t\tfocusStop(stops.length - 1, \"keyboard\");\n\t\t} else if (\n\t\t\tactive &&\n\t\t\t(crossing.next.includes(key) || crossing.previous.includes(key))\n\t\t) {\n\t\t\tconst points = across(active.stop, order);\n\t\t\tconst current = points.indexOf(active.point);\n\t\t\tconst step = crossing.next.includes(key) ? 1 : -1;\n\t\t\tconst next =\n\t\t\t\tpoints[Math.min(points.length - 1, Math.max(0, current + step))];\n\t\t\tsetState({\n\t\t\t\tstopKey: active.stop.key,\n\t\t\t\tpointKey: next.key,\n\t\t\t\tsource: \"keyboard\",\n\t\t\t\tpinned: false,\n\t\t\t});\n\t\t} else if ((key === \"Enter\" || key === \" \") && active) {\n\t\t\tsetState({\n\t\t\t\tstopKey: active.stop.key,\n\t\t\t\tpointKey: active.point.key,\n\t\t\t\tsource: \"keyboard\",\n\t\t\t\tpinned: !active.pinned,\n\t\t\t});\n\t\t\tonSelect?.(active.pinned ? null : active.point);\n\t\t} else if (key === \"Escape\" && active) {\n\t\t\tsetState(\n\t\t\t\tactive.pinned\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tstopKey: active.stop.key,\n\t\t\t\t\t\t\tpointKey: active.point.key,\n\t\t\t\t\t\t\tsource: \"keyboard\",\n\t\t\t\t\t\t\tpinned: false,\n\t\t\t\t\t\t}\n\t\t\t\t\t: null,\n\t\t\t);\n\t\t} else {\n\t\t\thandled = false;\n\t\t}\n\t\tif (handled) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction localPoint(\n\t\tevent: React.PointerEvent<HTMLElement> | React.MouseEvent<HTMLElement>,\n\t) {\n\t\tconst box = event.currentTarget.getBoundingClientRect();\n\t\treturn { x: event.clientX - box.left, y: event.clientY - box.top };\n\t}\n\n\tfunction onPointerMove(event: React.PointerEvent<HTMLElement>) {\n\t\tif (active?.pinned) {\n\t\t\treturn;\n\t\t}\n\t\tconst { x, y } = localPoint(event);\n\t\tconst hit = hitTest(x, y);\n\t\tif (hit === null) {\n\t\t\tsetState(null);\n\t\t\treturn;\n\t\t}\n\t\tconst stop = stops[hit.stop];\n\t\tconst point = stop.points[hit.point];\n\t\tif (stop.key !== state?.stopKey || point.key !== state?.pointKey) {\n\t\t\tsetState({\n\t\t\t\tstopKey: stop.key,\n\t\t\t\tpointKey: point.key,\n\t\t\t\tsource: \"pointer\",\n\t\t\t\tpinned: false,\n\t\t\t});\n\t\t}\n\t}\n\n\tfunction onPointerLeave() {\n\t\tif (!active?.pinned) {\n\t\t\tsetState(null);\n\t\t}\n\t}\n\n\tfunction onClick(event: React.MouseEvent<HTMLElement>) {\n\t\tconst { x, y } = localPoint(event);\n\t\tconst hit = hitTest(x, y);\n\t\tif (hit === null) {\n\t\t\tsetState(null);\n\t\t\tonSelect?.(null);\n\t\t\treturn;\n\t\t}\n\t\tconst stop = stops[hit.stop];\n\t\tconst point = stop.points[hit.point];\n\t\tconst unpin = active?.pinned === true && active.point.key === point.key;\n\t\tsetState({\n\t\t\tstopKey: stop.key,\n\t\t\tpointKey: point.key,\n\t\t\tsource: \"pointer\",\n\t\t\tpinned: !unpin,\n\t\t});\n\t\tonSelect?.(unpin ? null : point);\n\t}\n\n\tfunction onFocus(event: React.FocusEvent<HTMLElement>) {\n\t\tif (state === null && event.currentTarget.matches(\":focus-visible\")) {\n\t\t\tfocusStop(0, \"keyboard\");\n\t\t}\n\t}\n\n\tfunction onBlur() {\n\t\tsetState(null);\n\t}\n\n\treturn {\n\t\tactive,\n\t\thandlers: {\n\t\t\tonKeyDown,\n\t\t\tonPointerMove,\n\t\t\tonPointerLeave,\n\t\t\tonClick,\n\t\t\tonFocus,\n\t\t\tonBlur,\n\t\t},\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/react/use-chart-width.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/**
+ * The container's width. The server and the first client render use
+ * `initialWidth`, so the hydrated markup matches; the real width arrives on
+ * the first observer callback.
+ */
+export declare function useChartWidth(initialWidth: number): {
+    ref: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
+    width: number;
+    node: HTMLDivElement | null;
+};
+//# sourceMappingURL=use-chart-width.d.ts.map

package/dist/react/use-chart-width.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chart-width.d.ts","sourceRoot":"","sources":["../../src/react/use-chart-width.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,MAAM;;;;EAmBjD"}

package/dist/react/use-chart-width.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+function useChartWidth(initialWidth) {
+  const [node, setNode] = React.useState(null);
+  const [width, setWidth] = React.useState(initialWidth);
+  React.useEffect(() => {
+    if (node === null || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const measured = entries[0]?.contentRect.width;
+      if (measured !== void 0 && measured > 0) {
+        setWidth(Math.round(measured));
+      }
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [node]);
+  return { ref: setNode, width, node };
+}
+export {
+  useChartWidth
+};
+//# sourceMappingURL=use-chart-width.js.map

package/dist/react/use-chart-width.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/use-chart-width.ts"],
+  "sourcesContent": ["import * as React from \"react\";\n\n/**\n * The container's width. The server and the first client render use\n * `initialWidth`, so the hydrated markup matches; the real width arrives on\n * the first observer callback.\n */\nexport function useChartWidth(initialWidth: number) {\n\tconst [node, setNode] = React.useState<HTMLDivElement | null>(null);\n\tconst [width, setWidth] = React.useState(initialWidth);\n\n\tReact.useEffect(() => {\n\t\tif (node === null || typeof ResizeObserver === \"undefined\") {\n\t\t\treturn;\n\t\t}\n\t\tconst observer = new ResizeObserver((entries) => {\n\t\t\tconst measured = entries[0]?.contentRect.width;\n\t\t\tif (measured !== undefined && measured > 0) {\n\t\t\t\tsetWidth(Math.round(measured));\n\t\t\t}\n\t\t});\n\t\tobserver.observe(node);\n\t\treturn () => observer.disconnect();\n\t}, [node]);\n\n\treturn { ref: setNode, width, node };\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;AAOhB,SAAS,cAAc,cAAsB;AACnD,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAgC,IAAI;AAClE,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,YAAY;AAErD,QAAM,UAAU,MAAM;AACrB,QAAI,SAAS,QAAQ,OAAO,mBAAmB,aAAa;AAC3D;AAAA,IACD;AACA,UAAM,WAAW,IAAI,eAAe,CAAC,YAAY;AAChD,YAAM,WAAW,QAAQ,CAAC,GAAG,YAAY;AACzC,UAAI,aAAa,UAAa,WAAW,GAAG;AAC3C,iBAAS,KAAK,MAAM,QAAQ,CAAC;AAAA,MAC9B;AAAA,IACD,CAAC;AACD,aAAS,QAAQ,IAAI;AACrB,WAAO,MAAM,SAAS,WAAW;AAAA,EAClC,GAAG,CAAC,IAAI,CAAC;AAET,SAAO,EAAE,KAAK,SAAS,OAAO,KAAK;AACpC;",
+  "names": []
+}

package/dist/react/use-chart-zoom.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The part of a continuous x axis on show. `null` is the whole of it. Zooming
+ * keeps the value under the pointer (or the focused value) where it is on
+ * screen; panning never leaves the data.
+ */
+export declare function useChartZoom(full: readonly [number, number] | undefined, resetKey: unknown): {
+    domain: readonly [number, number] | null;
+    zoomAround: (center: number, factor: number) => void;
+    pan: (delta: number) => void;
+    reset: () => void;
+    span: () => number;
+};
+//# sourceMappingURL=use-chart-zoom.d.ts.map

package/dist/react/use-chart-zoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chart-zoom.d.ts","sourceRoot":"","sources":["../../src/react/use-chart-zoom.ts"],"names":[],"mappings":"AAiBA;;;;GAIG;AACH,wBAAgB,YAAY,CAC3B,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,EAC3C,QAAQ,EAAE,OAAO;;yBAmBW,MAAM,UAAU,MAAM;iBAQ9B,MAAM;;;EAe1B"}

package/dist/react/use-chart-zoom.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+const MAX_ZOOM = 100;
+function clampDomain([from, to], [low, high]) {
+  const span = Math.min(
+    high - low,
+    Math.max((high - low) / MAX_ZOOM, to - from)
+  );
+  const start = Math.min(Math.max(from, low), high - span);
+  return [start, start + span];
+}
+function useChartZoom(full, resetKey) {
+  const [domain, setDomain] = React.useState(
+    null
+  );
+  const keyRef = React.useRef(resetKey);
+  if (keyRef.current !== resetKey) {
+    keyRef.current = resetKey;
+    if (domain !== null) {
+      setDomain(null);
+    }
+  }
+  function apply(next) {
+    if (full === void 0) return;
+    const clamped = clampDomain(next, full);
+    setDomain(clamped[0] <= full[0] && clamped[1] >= full[1] ? null : clamped);
+  }
+  function zoomAround(center, factor) {
+    if (full === void 0) return;
+    const [from, to] = domain ?? full;
+    const share = to === from ? 0.5 : (center - from) / (to - from);
+    const span = (to - from) * factor;
+    apply([center - span * share, center - span * share + span]);
+  }
+  function pan(delta) {
+    if (full === void 0 || domain === null) return;
+    apply([domain[0] + delta, domain[1] + delta]);
+  }
+  return {
+    domain,
+    zoomAround,
+    pan,
+    reset: () => setDomain(null),
+    span: () => {
+      const [from, to] = domain ?? full ?? [0, 1];
+      return to - from;
+    }
+  };
+}
+export {
+  useChartZoom
+};
+//# sourceMappingURL=use-chart-zoom.js.map

package/dist/react/use-chart-zoom.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/use-chart-zoom.ts"],
+  "sourcesContent": ["import * as React from \"react\";\n\n/** The narrowest view: a hundredth of the data. */\nconst MAX_ZOOM = 100;\n\nfunction clampDomain(\n\t[from, to]: readonly [number, number],\n\t[low, high]: readonly [number, number],\n): readonly [number, number] {\n\tconst span = Math.min(\n\t\thigh - low,\n\t\tMath.max((high - low) / MAX_ZOOM, to - from),\n\t);\n\tconst start = Math.min(Math.max(from, low), high - span);\n\treturn [start, start + span];\n}\n\n/**\n * The part of a continuous x axis on show. `null` is the whole of it. Zooming\n * keeps the value under the pointer (or the focused value) where it is on\n * screen; panning never leaves the data.\n */\nexport function useChartZoom(\n\tfull: readonly [number, number] | undefined,\n\tresetKey: unknown,\n) {\n\tconst [domain, setDomain] = React.useState<readonly [number, number] | null>(\n\t\tnull,\n\t);\n\tconst keyRef = React.useRef(resetKey);\n\tif (keyRef.current !== resetKey) {\n\t\tkeyRef.current = resetKey;\n\t\tif (domain !== null) {\n\t\t\tsetDomain(null);\n\t\t}\n\t}\n\n\tfunction apply(next: readonly [number, number]) {\n\t\tif (full === undefined) return;\n\t\tconst clamped = clampDomain(next, full);\n\t\tsetDomain(clamped[0] <= full[0] && clamped[1] >= full[1] ? null : clamped);\n\t}\n\n\tfunction zoomAround(center: number, factor: number) {\n\t\tif (full === undefined) return;\n\t\tconst [from, to] = domain ?? full;\n\t\tconst share = to === from ? 0.5 : (center - from) / (to - from);\n\t\tconst span = (to - from) * factor;\n\t\tapply([center - span * share, center - span * share + span]);\n\t}\n\n\tfunction pan(delta: number) {\n\t\tif (full === undefined || domain === null) return;\n\t\tapply([domain[0] + delta, domain[1] + delta]);\n\t}\n\n\treturn {\n\t\tdomain,\n\t\tzoomAround,\n\t\tpan,\n\t\treset: () => setDomain(null),\n\t\tspan: () => {\n\t\t\tconst [from, to] = domain ?? full ?? [0, 1];\n\t\t\treturn to - from;\n\t\t},\n\t};\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;AAGvB,MAAM,WAAW;AAEjB,SAAS,YACR,CAAC,MAAM,EAAE,GACT,CAAC,KAAK,IAAI,GACkB;AAC5B,QAAM,OAAO,KAAK;AAAA,IACjB,OAAO;AAAA,IACP,KAAK,KAAK,OAAO,OAAO,UAAU,KAAK,IAAI;AAAA,EAC5C;AACA,QAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,GAAG,OAAO,IAAI;AACvD,SAAO,CAAC,OAAO,QAAQ,IAAI;AAC5B;AAOO,SAAS,aACf,MACA,UACC;AACD,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM;AAAA,IACjC;AAAA,EACD;AACA,QAAM,SAAS,MAAM,OAAO,QAAQ;AACpC,MAAI,OAAO,YAAY,UAAU;AAChC,WAAO,UAAU;AACjB,QAAI,WAAW,MAAM;AACpB,gBAAU,IAAI;AAAA,IACf;AAAA,EACD;AAEA,WAAS,MAAM,MAAiC;AAC/C,QAAI,SAAS,OAAW;AACxB,UAAM,UAAU,YAAY,MAAM,IAAI;AACtC,cAAU,QAAQ,CAAC,KAAK,KAAK,CAAC,KAAK,QAAQ,CAAC,KAAK,KAAK,CAAC,IAAI,OAAO,OAAO;AAAA,EAC1E;AAEA,WAAS,WAAW,QAAgB,QAAgB;AACnD,QAAI,SAAS,OAAW;AACxB,UAAM,CAAC,MAAM,EAAE,IAAI,UAAU;AAC7B,UAAM,QAAQ,OAAO,OAAO,OAAO,SAAS,SAAS,KAAK;AAC1D,UAAM,QAAQ,KAAK,QAAQ;AAC3B,UAAM,CAAC,SAAS,OAAO,OAAO,SAAS,OAAO,QAAQ,IAAI,CAAC;AAAA,EAC5D;AAEA,WAAS,IAAI,OAAe;AAC3B,QAAI,SAAS,UAAa,WAAW,KAAM;AAC3C,UAAM,CAAC,OAAO,CAAC,IAAI,OAAO,OAAO,CAAC,IAAI,KAAK,CAAC;AAAA,EAC7C;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM,UAAU,IAAI;AAAA,IAC3B,MAAM,MAAM;AACX,YAAM,CAAC,MAAM,EAAE,IAAI,UAAU,QAAQ,CAAC,GAAG,CAAC;AAC1C,aAAO,KAAK;AAAA,IACb;AAAA,EACD;AACD;",
+  "names": []
+}

package/dist/react/use-text-measurer.d.ts

@@ -0,0 +1,8 @@
+import type { ChartTextMeasurer } from "../core/types.js";
+/**
+ * Real text metrics once mounted. Until then, and on the server, the estimate
+ * — the same on both sides, so hydration never sees a different layout. A web
+ * font that finishes loading later triggers one more measure.
+ */
+export declare function useTextMeasurer(node: HTMLElement | null): ChartTextMeasurer;
+//# sourceMappingURL=use-text-measurer.d.ts.map

package/dist/react/use-text-measurer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-text-measurer.d.ts","sourceRoot":"","sources":["../../src/react/use-text-measurer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,iBAAiB,CAuC3E"}

package/dist/react/use-text-measurer.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { estimateTextWidth } from "../core/text.js";
+function useTextMeasurer(node) {
+  const [measurer, setMeasurer] = React.useState(
+    () => estimateTextWidth
+  );
+  React.useEffect(() => {
+    if (node === null || typeof document === "undefined") {
+      return;
+    }
+    const context = document.createElement("canvas").getContext("2d");
+    if (context === null) {
+      return;
+    }
+    function install() {
+      if (node === null || context === null) {
+        return;
+      }
+      const family = getComputedStyle(node).fontFamily || "sans-serif";
+      const cache = /* @__PURE__ */ new Map();
+      const measure = (text, fontSize, fontWeight = 400) => {
+        const key = `${fontWeight}:${fontSize}:${text}`;
+        const cached = cache.get(key);
+        if (cached !== void 0) {
+          return cached;
+        }
+        context.font = `${fontWeight} ${fontSize}px ${family}`;
+        const width = context.measureText(text).width;
+        cache.set(key, width);
+        return width;
+      };
+      setMeasurer(() => measure);
+    }
+    install();
+    const fonts = document.fonts;
+    fonts?.addEventListener?.("loadingdone", install);
+    return () => fonts?.removeEventListener?.("loadingdone", install);
+  }, [node]);
+  return measurer;
+}
+export {
+  useTextMeasurer
+};
+//# sourceMappingURL=use-text-measurer.js.map

package/dist/react/use-text-measurer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/use-text-measurer.ts"],
+  "sourcesContent": ["import * as React from \"react\";\nimport { estimateTextWidth } from \"#/core/text.ts\";\nimport type { ChartTextMeasurer } from \"#/core/types.ts\";\n\n/**\n * Real text metrics once mounted. Until then, and on the server, the estimate\n * \u2014 the same on both sides, so hydration never sees a different layout. A web\n * font that finishes loading later triggers one more measure.\n */\nexport function useTextMeasurer(node: HTMLElement | null): ChartTextMeasurer {\n\tconst [measurer, setMeasurer] = React.useState<ChartTextMeasurer>(\n\t\t() => estimateTextWidth,\n\t);\n\n\tReact.useEffect(() => {\n\t\tif (node === null || typeof document === \"undefined\") {\n\t\t\treturn;\n\t\t}\n\t\tconst context = document.createElement(\"canvas\").getContext(\"2d\");\n\t\tif (context === null) {\n\t\t\treturn;\n\t\t}\n\t\tfunction install() {\n\t\t\tif (node === null || context === null) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst family = getComputedStyle(node).fontFamily || \"sans-serif\";\n\t\t\tconst cache = new Map<string, number>();\n\t\t\tconst measure: ChartTextMeasurer = (text, fontSize, fontWeight = 400) => {\n\t\t\t\tconst key = `${fontWeight}:${fontSize}:${text}`;\n\t\t\t\tconst cached = cache.get(key);\n\t\t\t\tif (cached !== undefined) {\n\t\t\t\t\treturn cached;\n\t\t\t\t}\n\t\t\t\tcontext.font = `${fontWeight} ${fontSize}px ${family}`;\n\t\t\t\tconst width = context.measureText(text).width;\n\t\t\t\tcache.set(key, width);\n\t\t\t\treturn width;\n\t\t\t};\n\t\t\tsetMeasurer(() => measure);\n\t\t}\n\t\tinstall();\n\t\tconst fonts = document.fonts;\n\t\tfonts?.addEventListener?.(\"loadingdone\", install);\n\t\treturn () => fonts?.removeEventListener?.(\"loadingdone\", install);\n\t}, [node]);\n\n\treturn measurer;\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,SAAS,yBAAyB;AAQ3B,SAAS,gBAAgB,MAA6C;AAC5E,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM;AAAA,IACrC,MAAM;AAAA,EACP;AAEA,QAAM,UAAU,MAAM;AACrB,QAAI,SAAS,QAAQ,OAAO,aAAa,aAAa;AACrD;AAAA,IACD;AACA,UAAM,UAAU,SAAS,cAAc,QAAQ,EAAE,WAAW,IAAI;AAChE,QAAI,YAAY,MAAM;AACrB;AAAA,IACD;AACA,aAAS,UAAU;AAClB,UAAI,SAAS,QAAQ,YAAY,MAAM;AACtC;AAAA,MACD;AACA,YAAM,SAAS,iBAAiB,IAAI,EAAE,cAAc;AACpD,YAAM,QAAQ,oBAAI,IAAoB;AACtC,YAAM,UAA6B,CAAC,MAAM,UAAU,aAAa,QAAQ;AACxE,cAAM,MAAM,GAAG,UAAU,IAAI,QAAQ,IAAI,IAAI;AAC7C,cAAM,SAAS,MAAM,IAAI,GAAG;AAC5B,YAAI,WAAW,QAAW;AACzB,iBAAO;AAAA,QACR;AACA,gBAAQ,OAAO,GAAG,UAAU,IAAI,QAAQ,MAAM,MAAM;AACpD,cAAM,QAAQ,QAAQ,YAAY,IAAI,EAAE;AACxC,cAAM,IAAI,KAAK,KAAK;AACpB,eAAO;AAAA,MACR;AACA,kBAAY,MAAM,OAAO;AAAA,IAC1B;AACA,YAAQ;AACR,UAAM,QAAQ,SAAS;AACvB,WAAO,mBAAmB,eAAe,OAAO;AAChD,WAAO,MAAM,OAAO,sBAAsB,eAAe,OAAO;AAAA,EACjE,GAAG,CAAC,IAAI,CAAC;AAET,SAAO;AACR;",
+  "names": []
+}

package/dist/sankey/index.d.ts

@@ -0,0 +1,2 @@
+export { type SankeyLink, type SankeyNode, type SankeyOptions, sankey, } from "./sankey.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/sankey/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sankey/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,MAAM,GACN,MAAM,oBAAoB,CAAC"}

package/dist/sankey/index.js

@@ -0,0 +1,7 @@
+import {
+  sankey
+} from "./sankey.js";
+export {
+  sankey
+};
+//# sourceMappingURL=index.js.map

package/dist/sankey/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/sankey/index.ts"],
+  "sourcesContent": ["export {\n\ttype SankeyLink,\n\ttype SankeyNode,\n\ttype SankeyOptions,\n\tsankey,\n} from \"#/sankey/sankey.ts\";\n"],
+  "mappings": "AAAA;AAAA,EAIC;AAAA,OACM;",
+  "names": []
+}

package/dist/sankey/sankey.d.ts

@@ -0,0 +1,29 @@
+import type { ChartMark } from "../core/types.js";
+export interface SankeyNode {
+    readonly id: string;
+    /** Display name. Defaults to the id. */
+    readonly label?: string;
+}
+export interface SankeyLink {
+    readonly source: string;
+    readonly target: string;
+    readonly value: number;
+}
+export interface SankeyOptions {
+    readonly id?: string;
+    readonly nodeWidth?: number;
+    readonly nodePadding?: number;
+    /** What the flows are, for the table heading. */
+    readonly label?: string;
+    readonly tip?: boolean;
+}
+/**
+ * Flows between stages: each node as tall as what passes through it, each
+ * link as wide as its flow. Nodes and links are both focusable, so the
+ * keyboard reaches "Inscriptions → Missions: 240" as well as each stage.
+ */
+export declare function sankey(data: {
+    readonly nodes: ReadonlyArray<SankeyNode>;
+    readonly links: ReadonlyArray<SankeyLink>;
+}, options?: SankeyOptions): ChartMark;
+//# sourceMappingURL=sankey.d.ts.map

package/dist/sankey/sankey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sankey.d.ts","sourceRoot":"","sources":["../../src/sankey/sankey.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAyB,MAAM,iBAAiB,CAAC;AAExE,MAAM,WAAW,UAAU;IAC1B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,iDAAiD;IACjD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC;CACvB;AAqBD;;;;GAIG;AACH,wBAAgB,MAAM,CACrB,IAAI,EAAE;IACL,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAC1C,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CAC1C,EACD,OAAO,GAAE,aAAkB,GACzB,SAAS,CA2HX"}

package/dist/sankey/sankey.js

@@ -0,0 +1,127 @@
+import { sankey as sankeyLayout, sankeyLinkHorizontal } from "d3-sankey";
+import { markId } from "../core/marks/shared.js";
+const LABEL_GAP = 6;
+function sankey(data, options = {}) {
+  const names = new Map(
+    data.nodes.map((node) => [node.id, node.label ?? node.id])
+  );
+  return {
+    id: options.id,
+    coordinate: "frame",
+    focusOrder: "point",
+    titles: { value: options.label },
+    channels: {
+      color: { values: data.nodes.map((node) => node.label ?? node.id) }
+    },
+    colorLegend: false,
+    render(context) {
+      const id = markId(options.id, "sankey", context);
+      const { plot, theme, measureText } = context;
+      const widest = Math.max(
+        0,
+        ...[...names.values()].map((name) => measureText(name, theme.fontSize))
+      );
+      const layout = sankeyLayout().nodeId((node) => node.id).nodeWidth(options.nodeWidth ?? 12).nodePadding(options.nodePadding ?? 12).extent([
+        [plot.x, plot.y],
+        [plot.x + plot.width - widest - LABEL_GAP, plot.y + plot.height]
+      ]);
+      const graph = layout({
+        nodes: data.nodes.map((node) => ({ ...node })),
+        links: data.links.map((link) => ({ ...link }))
+      });
+      const path = sankeyLinkHorizontal();
+      const nodes = [];
+      const points = [];
+      for (const [index, link] of graph.links.entries()) {
+        const from = names.get(link.source.id) ?? link.source.id;
+        const to = names.get(link.target.id) ?? link.target.id;
+        nodes.push({
+          kind: "path",
+          key: `${id}:link:${link.source.id}:${link.target.id}`,
+          series: from,
+          role: "mark",
+          d: path(link) ?? "",
+          paint: {
+            fill: "none",
+            stroke: context.colorOf(from),
+            strokeOpacity: 0.35,
+            strokeWidth: Math.max(1, link.width ?? 1)
+          }
+        });
+        if (options.tip !== false) {
+          points.push({
+            key: `${id}:link:${link.source.id}:${link.target.id}`,
+            markId: id,
+            index,
+            datum: link,
+            x: ((link.source.x1 ?? 0) + (link.target.x0 ?? 0)) / 2,
+            y: ((link.y0 ?? 0) + (link.y1 ?? 0)) / 2,
+            xValue: `${from} \u2192 ${to}`,
+            yValue: link.value,
+            seriesLabel: options.label,
+            color: context.colorOf(from),
+            title: `${from} \u2192 ${to}`,
+            value: context.formatY(link.value)
+          });
+        }
+      }
+      for (const [index, node] of graph.nodes.entries()) {
+        const name = names.get(node.id) ?? node.id;
+        const rect = {
+          x: node.x0 ?? 0,
+          y: node.y0 ?? 0,
+          width: (node.x1 ?? 0) - (node.x0 ?? 0),
+          height: Math.max(1, (node.y1 ?? 0) - (node.y0 ?? 0))
+        };
+        nodes.push(
+          {
+            kind: "rect",
+            key: `${id}:node:${node.id}`,
+            series: name,
+            role: "mark",
+            ...rect,
+            paint: { fill: context.colorOf(name) }
+          },
+          {
+            kind: "text",
+            key: `${id}:label:${node.id}`,
+            role: "label",
+            x: rect.x + rect.width + LABEL_GAP,
+            y: rect.y + rect.height / 2,
+            text: name,
+            paint: {
+              fill: theme.foreground,
+              fontSize: theme.fontSize,
+              baseline: "middle"
+            }
+          }
+        );
+        if (options.tip !== false) {
+          points.push({
+            key: `${id}:node:${node.id}`,
+            markId: id,
+            index: graph.links.length + index,
+            datum: node,
+            x: rect.x + rect.width / 2,
+            y: rect.y + rect.height / 2,
+            xValue: name,
+            yValue: node.value ?? 0,
+            seriesLabel: options.label,
+            color: context.colorOf(name),
+            title: name,
+            value: context.formatY(node.value ?? 0),
+            hit: {
+              kind: "rect",
+              rect: { ...rect, x: rect.x - 4, width: rect.width + 8 }
+            }
+          });
+        }
+      }
+      return { nodes, points };
+    }
+  };
+}
+export {
+  sankey
+};
+//# sourceMappingURL=sankey.js.map

package/dist/sankey/sankey.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/sankey/sankey.ts"],
+  "sourcesContent": ["import { sankey as sankeyLayout, sankeyLinkHorizontal } from \"d3-sankey\";\nimport { markId } from \"#/core/marks/shared.ts\";\nimport type { ChartMark, ChartPoint, SceneNode } from \"#/core/types.ts\";\n\nexport interface SankeyNode {\n\treadonly id: string;\n\t/** Display name. Defaults to the id. */\n\treadonly label?: string;\n}\n\nexport interface SankeyLink {\n\treadonly source: string;\n\treadonly target: string;\n\treadonly value: number;\n}\n\nexport interface SankeyOptions {\n\treadonly id?: string;\n\treadonly nodeWidth?: number;\n\treadonly nodePadding?: number;\n\t/** What the flows are, for the table heading. */\n\treadonly label?: string;\n\treadonly tip?: boolean;\n}\n\ninterface LaidNode extends SankeyNode {\n\tx0?: number;\n\tx1?: number;\n\ty0?: number;\n\ty1?: number;\n\tvalue?: number;\n}\n\ninterface LaidLink {\n\tsource: LaidNode;\n\ttarget: LaidNode;\n\tvalue: number;\n\twidth?: number;\n\ty0?: number;\n\ty1?: number;\n}\n\nconst LABEL_GAP = 6;\n\n/**\n * Flows between stages: each node as tall as what passes through it, each\n * link as wide as its flow. Nodes and links are both focusable, so the\n * keyboard reaches \"Inscriptions \u2192 Missions: 240\" as well as each stage.\n */\nexport function sankey(\n\tdata: {\n\t\treadonly nodes: ReadonlyArray<SankeyNode>;\n\t\treadonly links: ReadonlyArray<SankeyLink>;\n\t},\n\toptions: SankeyOptions = {},\n): ChartMark {\n\tconst names = new Map(\n\t\tdata.nodes.map((node) => [node.id, node.label ?? node.id]),\n\t);\n\treturn {\n\t\tid: options.id,\n\t\tcoordinate: \"frame\",\n\t\tfocusOrder: \"point\",\n\t\ttitles: { value: options.label },\n\t\tchannels: {\n\t\t\tcolor: { values: data.nodes.map((node) => node.label ?? node.id) },\n\t\t},\n\t\tcolorLegend: false,\n\t\trender(context) {\n\t\t\tconst id = markId(options.id, \"sankey\", context);\n\t\t\tconst { plot, theme, measureText } = context;\n\t\t\tconst widest = Math.max(\n\t\t\t\t0,\n\t\t\t\t...[...names.values()].map((name) => measureText(name, theme.fontSize)),\n\t\t\t);\n\t\t\tconst layout = sankeyLayout<LaidNode, LaidLink>()\n\t\t\t\t.nodeId((node) => node.id)\n\t\t\t\t.nodeWidth(options.nodeWidth ?? 12)\n\t\t\t\t.nodePadding(options.nodePadding ?? 12)\n\t\t\t\t.extent([\n\t\t\t\t\t[plot.x, plot.y],\n\t\t\t\t\t[plot.x + plot.width - widest - LABEL_GAP, plot.y + plot.height],\n\t\t\t\t]);\n\t\t\tconst graph = layout({\n\t\t\t\tnodes: data.nodes.map((node) => ({ ...node })),\n\t\t\t\tlinks: data.links.map((link) => ({ ...link })) as unknown as LaidLink[],\n\t\t\t});\n\t\t\tconst path = sankeyLinkHorizontal<LaidNode, LaidLink>();\n\t\t\tconst nodes: SceneNode[] = [];\n\t\t\tconst points: ChartPoint[] = [];\n\t\t\tfor (const [index, link] of graph.links.entries()) {\n\t\t\t\tconst from = names.get(link.source.id) ?? link.source.id;\n\t\t\t\tconst to = names.get(link.target.id) ?? link.target.id;\n\t\t\t\tnodes.push({\n\t\t\t\t\tkind: \"path\",\n\t\t\t\t\tkey: `${id}:link:${link.source.id}:${link.target.id}`,\n\t\t\t\t\tseries: from,\n\t\t\t\t\trole: \"mark\",\n\t\t\t\t\td: path(link as never) ?? \"\",\n\t\t\t\t\tpaint: {\n\t\t\t\t\t\tfill: \"none\",\n\t\t\t\t\t\tstroke: context.colorOf(from),\n\t\t\t\t\t\tstrokeOpacity: 0.35,\n\t\t\t\t\t\tstrokeWidth: Math.max(1, link.width ?? 1),\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t\tif (options.tip !== false) {\n\t\t\t\t\tpoints.push({\n\t\t\t\t\t\tkey: `${id}:link:${link.source.id}:${link.target.id}`,\n\t\t\t\t\t\tmarkId: id,\n\t\t\t\t\t\tindex,\n\t\t\t\t\t\tdatum: link,\n\t\t\t\t\t\tx: ((link.source.x1 ?? 0) + (link.target.x0 ?? 0)) / 2,\n\t\t\t\t\t\ty: ((link.y0 ?? 0) + (link.y1 ?? 0)) / 2,\n\t\t\t\t\t\txValue: `${from} \u2192 ${to}`,\n\t\t\t\t\t\tyValue: link.value,\n\t\t\t\t\t\tseriesLabel: options.label,\n\t\t\t\t\t\tcolor: context.colorOf(from),\n\t\t\t\t\t\ttitle: `${from} \u2192 ${to}`,\n\t\t\t\t\t\tvalue: context.formatY(link.value),\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t\tfor (const [index, node] of graph.nodes.entries()) {\n\t\t\t\tconst name = names.get(node.id) ?? node.id;\n\t\t\t\tconst rect = {\n\t\t\t\t\tx: node.x0 ?? 0,\n\t\t\t\t\ty: node.y0 ?? 0,\n\t\t\t\t\twidth: (node.x1 ?? 0) - (node.x0 ?? 0),\n\t\t\t\t\theight: Math.max(1, (node.y1 ?? 0) - (node.y0 ?? 0)),\n\t\t\t\t};\n\t\t\t\tnodes.push(\n\t\t\t\t\t{\n\t\t\t\t\t\tkind: \"rect\",\n\t\t\t\t\t\tkey: `${id}:node:${node.id}`,\n\t\t\t\t\t\tseries: name,\n\t\t\t\t\t\trole: \"mark\",\n\t\t\t\t\t\t...rect,\n\t\t\t\t\t\tpaint: { fill: context.colorOf(name) },\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tkind: \"text\",\n\t\t\t\t\t\tkey: `${id}:label:${node.id}`,\n\t\t\t\t\t\trole: \"label\",\n\t\t\t\t\t\tx: rect.x + rect.width + LABEL_GAP,\n\t\t\t\t\t\ty: rect.y + rect.height / 2,\n\t\t\t\t\t\ttext: name,\n\t\t\t\t\t\tpaint: {\n\t\t\t\t\t\t\tfill: theme.foreground,\n\t\t\t\t\t\t\tfontSize: theme.fontSize,\n\t\t\t\t\t\t\tbaseline: \"middle\",\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t);\n\t\t\t\tif (options.tip !== false) {\n\t\t\t\t\tpoints.push({\n\t\t\t\t\t\tkey: `${id}:node:${node.id}`,\n\t\t\t\t\t\tmarkId: id,\n\t\t\t\t\t\tindex: graph.links.length + index,\n\t\t\t\t\t\tdatum: node,\n\t\t\t\t\t\tx: rect.x + rect.width / 2,\n\t\t\t\t\t\ty: rect.y + rect.height / 2,\n\t\t\t\t\t\txValue: name,\n\t\t\t\t\t\tyValue: node.value ?? 0,\n\t\t\t\t\t\tseriesLabel: options.label,\n\t\t\t\t\t\tcolor: context.colorOf(name),\n\t\t\t\t\t\ttitle: name,\n\t\t\t\t\t\tvalue: context.formatY(node.value ?? 0),\n\t\t\t\t\t\thit: {\n\t\t\t\t\t\t\tkind: \"rect\",\n\t\t\t\t\t\t\trect: { ...rect, x: rect.x - 4, width: rect.width + 8 },\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn { nodes, points };\n\t\t},\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/voronoi/index.d.ts

@@ -0,0 +1,2 @@
+export { type VoronoiOptions, voronoi } from "./voronoi.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/voronoi/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/voronoi/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/voronoi/index.js

@@ -0,0 +1,5 @@
+import { voronoi } from "./voronoi.js";
+export {
+  voronoi
+};
+//# sourceMappingURL=index.js.map

package/dist/voronoi/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/voronoi/index.ts"],
+  "sourcesContent": ["export { type VoronoiOptions, voronoi } from \"#/voronoi/voronoi.ts\";\n"],
+  "mappings": "AAAA,SAA8B,eAAe;",
+  "names": []
+}