@funnest/charts-react 0.4.0 → 0.5.1

package/dist/fn-chart.d.ts

@@ -1,6 +1,8 @@
 import type { ChartEvents } from '@funnest/charts';
 import { type TradingChart, type TradingChartOptions, type TradingChartSlots } from '@funnest/charts-ui';
 import { type CSSProperties, type ReactNode } from 'react';
+/** Slots of the surrounding <FnChart> or <FnMultiChart>, for <FnChartSlot>. */
+export declare const SlotsContext: import("react").Context<TradingChartSlots | null>;
 export interface FnChartProps extends TradingChartOptions {
     className?: string;
     /** The widget fills its container; give it a height (default 100%). */
@@ -21,7 +23,7 @@ export declare function useFnChart(): TradingChart | null;
 /** Subscribes to a chart event of the surrounding `<FnChart>` for the component's lifetime. */
 export declare function useChartEvent<K extends keyof ChartEvents>(event: K, handler: (payload: ChartEvents[K]) => void): void;
 /**
- * Renders React children into one of the widget's slots ('toolbar', 'belowToolbar', 'footer')
+ * Renders React children into one of the widget's slots ('toolbar', 'toolbarEnd', 'belowToolbar', 'bottom', 'footer')
  * — e.g. a market stats bar or account info — styled with the widget's `--fnc-*` variables.
  */
 export declare function FnChartSlot({ name, children }: {

package/dist/fn-multi-chart.d.ts

@@ -0,0 +1,20 @@
+import { type MultiChart, type MultiChartOptions } from '@funnest/charts-ui';
+import { type CSSProperties, type ReactNode } from 'react';
+export interface FnMultiChartProps extends MultiChartOptions {
+    className?: string;
+    /** The widget fills its container; give it a height (default 100%). */
+    style?: CSSProperties;
+    /** Called once per created widget (also after it's recreated for a new datafeed). */
+    onReady?: (widget: MultiChart) => void;
+    /** `<FnChartSlot>` elements and other children that use `useFnMultiChart()`. */
+    children?: ReactNode;
+}
+/**
+ * React wrapper around `createMultiChart`: split layout of 1–8 linked charts with one toolbar.
+ * `panes`, `layout` and `sync` are read on mount (the user changes them from the toolbar; use
+ * the ref's `setLayout`/`setSync`/`load` to drive them). `locale`, `theme` and `colorScheme`
+ * stay in sync with props; a new `datafeed` recreates the widget.
+ */
+export declare const FnMultiChart: import("react").ForwardRefExoticComponent<FnMultiChartProps & import("react").RefAttributes<MultiChart | null>>;
+/** The surrounding `<FnMultiChart>`'s widget (null until mounted). */
+export declare function useFnMultiChart(): MultiChart | null;

package/dist/index.d.ts

@@ -13,5 +13,7 @@
  */
 export { FnChart, FnChartSlot, useChartEvent, useFnChart } from './fn-chart';
 export type { FnChartProps } from './fn-chart';
-export type { TradingChart, TradingChartOptions, TradingChartSlots } from '@funnest/charts-ui';
+export { FnMultiChart, useFnMultiChart } from './fn-multi-chart';
+export type { FnMultiChartProps } from './fn-multi-chart';
+export type { LayoutId, LayoutSync, MultiChart, MultiChartEvents, MultiChartOptions, MultiChartState, PaneSpec, TradingChart, TradingChartOptions, TradingChartSlots, } from '@funnest/charts-ui';
 export * from './viz';

package/dist/index.js

@@ -12,6 +12,7 @@ import {
 import { createPortal } from "react-dom";
 import { jsx } from "react/jsx-runtime";
 var WidgetContext = createContext(null);
+var SlotsContext = createContext(null);
 var FnChart = forwardRef(function FnChart2(props, ref) {
   const { className, style, onReady, children, ...options } = props;
   const hostRef = useRef(null);
@@ -51,7 +52,7 @@ var FnChart = forwardRef(function FnChart2(props, ref) {
   useEffect(() => {
     if (widget && theme) widget.setTheme(theme);
   }, [widget, themeKey]);
-  return /* @__PURE__ */ jsx("div", { ref: hostRef, className, style: { width: "100%", height: "100%", ...style }, children: /* @__PURE__ */ jsx(WidgetContext.Provider, { value: widget, children }) });
+  return /* @__PURE__ */ jsx("div", { ref: hostRef, className, style: { width: "100%", height: "100%", ...style }, children: /* @__PURE__ */ jsx(WidgetContext.Provider, { value: widget, children: /* @__PURE__ */ jsx(SlotsContext.Provider, { value: widget?.slots ?? null, children }) }) });
 });
 function useFnChart() {
   return useContext(WidgetContext);
@@ -63,8 +64,50 @@ function useChartEvent(event, handler) {
   useEffect(() => widget?.chart.on(event, (payload) => handlerRef.current(payload)), [widget, event]);
 }
 function FnChartSlot({ name, children }) {
-  const widget = useFnChart();
-  return widget ? createPortal(children, widget.slots[name]) : null;
+  const slots = useContext(SlotsContext);
+  return slots ? createPortal(children, slots[name]) : null;
+}
+
+// src/fn-multi-chart.tsx
+import { createMultiChart } from "@funnest/charts-ui";
+import { createContext as createContext2, forwardRef as forwardRef2, useContext as useContext2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MultiContext = createContext2(null);
+var FnMultiChart = forwardRef2(function FnMultiChart2(props, ref) {
+  const { className, style, onReady, children, ...options } = props;
+  const hostRef = useRef2(null);
+  const [widget, setWidget] = useState2(null);
+  const latest = useRef2(options);
+  latest.current = options;
+  const readyRef = useRef2(onReady);
+  readyRef.current = onReady;
+  useImperativeHandle2(ref, () => widget, [widget]);
+  useEffect2(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const instance = createMultiChart(host, latest.current);
+    setWidget(instance);
+    readyRef.current?.(instance);
+    return () => {
+      setWidget(null);
+      instance.destroy();
+    };
+  }, [options.datafeed]);
+  const { locale, theme, colorScheme } = options;
+  useEffect2(() => {
+    if (widget && locale) widget.setLocale(locale);
+  }, [widget, locale]);
+  useEffect2(() => {
+    if (widget && colorScheme) widget.setColorScheme(colorScheme);
+  }, [widget, colorScheme]);
+  const themeKey = JSON.stringify(theme ?? null);
+  useEffect2(() => {
+    if (widget && theme) widget.setTheme(theme);
+  }, [widget, themeKey]);
+  return /* @__PURE__ */ jsx2("div", { ref: hostRef, className, style: { width: "100%", height: "100%", ...style }, children: /* @__PURE__ */ jsx2(MultiContext.Provider, { value: widget, children: /* @__PURE__ */ jsx2(SlotsContext.Provider, { value: widget?.slots ?? null, children }) }) });
+});
+function useFnMultiChart() {
+  return useContext2(MultiContext);
 }
 
 // src/viz/cartesian-chart.tsx
@@ -84,19 +127,19 @@ import {
   Children,
   isValidElement,
   useCallback,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useId,
   useMemo,
-  useRef as useRef2,
-  useState as useState2
+  useRef as useRef3,
+  useState as useState3
 } from "react";
 
 // src/viz/context.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
+import { createContext as createContext3, useContext as useContext3 } from "react";
 var nearScrub = (ctx, x, within = 56) => ctx.scrubIndex !== null && Math.abs(ctx.x(ctx.scrubIndex) - x) < within;
-var CartesianContext = createContext2(null);
+var CartesianContext = createContext3(null);
 function useCartesianChart() {
-  const ctx = useContext2(CartesianContext);
+  const ctx = useContext3(CartesianContext);
   if (!ctx) throw new Error("Funnest chart components must be rendered inside <CartesianChart> (or LineChart, AreaChart, BarChart).");
   return ctx;
 }
@@ -126,7 +169,7 @@ function seriesY(ctx, s, i) {
 var scaleFor = (ctx, axisId) => (axisId ? ctx.yScales[axisId] : void 0) ?? ctx.y;
 
 // src/viz/legend.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 function Legend({ items, onItemClick, onItemHover, shape = "circle", direction = "row", justify = "flex-start", className, style }) {
   const swatch = (color) => {
     switch (shape) {
@@ -142,7 +185,7 @@ function Legend({ items, onItemClick, onItemHover, shape = "circle", direction =
         return { width: 8, height: 8, borderRadius: "50%", background: color };
     }
   };
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       className,
@@ -150,13 +193,13 @@ function Legend({ items, onItemClick, onItemHover, shape = "circle", direction =
       style: { display: "flex", flexDirection: direction, flexWrap: direction === "row" ? "wrap" : "nowrap", justifyContent: justify, gap: direction === "row" ? "4px 14px" : 8, padding: "4px 0", fontSize: 12, color: VAR.text, fontFamily: VAR.font, ...style },
       children: items.map((item) => {
         const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { flex: "none", ...swatch(item.color) } }),
-          /* @__PURE__ */ jsx2("span", { children: item.label }),
-          item.value !== void 0 && /* @__PURE__ */ jsx2("b", { style: { color: VAR.textStrong, fontWeight: 600, fontVariantNumeric: "tabular-nums" }, children: item.value })
+          /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", style: { flex: "none", ...swatch(item.color) } }),
+          /* @__PURE__ */ jsx3("span", { children: item.label }),
+          item.value !== void 0 && /* @__PURE__ */ jsx3("b", { style: { color: VAR.textStrong, fontWeight: 600, fontVariantNumeric: "tabular-nums" }, children: item.value })
         ] });
         const itemStyle = { display: "inline-flex", alignItems: "center", gap: 6, opacity: item.inactive ? 0.4 : 1, transition: "opacity 0.15s" };
         const hover = onItemHover ? { onPointerEnter: () => onItemHover(item.id), onPointerLeave: () => onItemHover(null) } : {};
-        return onItemClick ? /* @__PURE__ */ jsx2(
+        return onItemClick ? /* @__PURE__ */ jsx3(
           "button",
           {
             type: "button",
@@ -167,14 +210,14 @@ function Legend({ items, onItemClick, onItemHover, shape = "circle", direction =
             children: content
           },
           item.id
-        ) : /* @__PURE__ */ jsx2("span", { role: "listitem", style: itemStyle, ...hover, children: content }, item.id);
+        ) : /* @__PURE__ */ jsx3("span", { role: "listitem", style: itemStyle, ...hover, children: content }, item.id);
       })
     }
   );
 }
 
 // src/viz/cartesian-chart.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var DEFAULT_HEIGHT = 240;
 var DEFAULT_AXIS = "default";
 function resolveInset(inset) {
@@ -195,9 +238,9 @@ function collectAxisSpace(children, acc) {
   });
 }
 function useElementWidth(fixed) {
-  const ref = useRef2(null);
-  const [width, setWidth] = useState2(fixed ?? 0);
-  useEffect2(() => {
+  const ref = useRef3(null);
+  const [width, setWidth] = useState3(fixed ?? 0);
+  useEffect3(() => {
     if (fixed !== void 0) {
       setWidth(fixed);
       return;
@@ -240,13 +283,13 @@ function CartesianChart({
 }) {
   const id = `fnv${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const [wrapRef, width] = useElementWidth(fixedWidth);
-  const [scrubIndex, setScrubIndex] = useState2(null);
-  const [focused, setFocused] = useState2(false);
-  const [motion, setMotion] = useState2(false);
-  const [hidden, setHidden] = useState2([]);
-  const [emphasis, setEmphasis] = useState2(null);
-  const [dimFuture, setDimFuture] = useState2(false);
-  useEffect2(() => setMotion(animate && !prefersReducedMotion()), [animate]);
+  const [scrubIndex, setScrubIndex] = useState3(null);
+  const [focused, setFocused] = useState3(false);
+  const [motion, setMotion] = useState3(false);
+  const [hidden, setHidden] = useState3([]);
+  const [emphasis, setEmphasis] = useState3(null);
+  const [dimFuture, setDimFuture] = useState3(false);
+  useEffect3(() => setMotion(animate && !prefersReducedMotion()), [animate]);
   const legendCfg = normalizeLegend(legend);
   const axes = useMemo(() => {
     const list = Array.isArray(yAxis) ? yAxis : [yAxis ?? {}];
@@ -332,7 +375,7 @@ function CartesianChart({
       setDimFuture
     };
   }, [id, width, height, inset, axisSpace, all, visible, axes, firstAxis, xAxis, stacked, scrubIndex, focused, motion, dimFuture]);
-  const xsRef = useRef2([]);
+  const xsRef = useRef3([]);
   xsRef.current = useMemo(() => Array.from({ length: ctx.length }, (_, i) => ctx.x(i)), [ctx.length, ctx.x]);
   const updateScrub = useCallback(
     (next) => {
@@ -369,7 +412,7 @@ function CartesianChart({
   };
   const hasData = all.some((s) => s.data.some((v) => v !== null && Number.isFinite(v)));
   const a11yText = (i) => getScrubberAccessibilityLabel ? getScrubberAccessibilityLabel(i) : [ctx.xLabel(i), ...ctx.series.map((s) => `${s.label ?? s.id} ${s.data[i] === null || s.data[i] === void 0 ? "\u2014" : formatNumber(s.data[i])}`)].join(", ");
-  const legendEl = legendCfg && /* @__PURE__ */ jsx3(
+  const legendEl = legendCfg && /* @__PURE__ */ jsx4(
     Legend,
     {
       direction: legendCfg.position === "left" || legendCfg.position === "right" ? "column" : "row",
@@ -421,11 +464,11 @@ function CartesianChart({
       children: [
         ctx.futureMask && // Fade everything right of the scrubber to 35% (luminance mask: works on any background).
         /* @__PURE__ */ jsxs2("mask", { id: `${id}-future`, maskUnits: "userSpaceOnUse", x: -width, y: -height, width: width * 3, height: height * 3, children: [
-          /* @__PURE__ */ jsx3("rect", { x: -width, y: -height, width: width + ctx.x(scrubIndex), height: height * 3, fill: "#fff" }),
-          /* @__PURE__ */ jsx3("rect", { x: ctx.x(scrubIndex), y: -height, width: width * 2, height: height * 3, fill: "#fff", fillOpacity: 0.35 })
+          /* @__PURE__ */ jsx4("rect", { x: -width, y: -height, width: width + ctx.x(scrubIndex), height: height * 3, fill: "#fff" }),
+          /* @__PURE__ */ jsx4("rect", { x: ctx.x(scrubIndex), y: -height, width: width * 2, height: height * 3, fill: "#fff", fillOpacity: 0.35 })
         ] }),
-        width > 0 && hasData && /* @__PURE__ */ jsx3(CartesianContext.Provider, { value: ctx, children }),
-        width > 0 && !hasData && /* @__PURE__ */ jsx3("text", { x: width / 2, y: height / 2, textAnchor: "middle", dominantBaseline: "central", fontSize: 13, style: { fill: VAR.text, fontFamily: VAR.font }, children: typeof emptyState === "string" || emptyState === void 0 ? emptyState ?? "" : null })
+        width > 0 && hasData && /* @__PURE__ */ jsx4(CartesianContext.Provider, { value: ctx, children }),
+        width > 0 && !hasData && /* @__PURE__ */ jsx4("text", { x: width / 2, y: height / 2, textAnchor: "middle", dominantBaseline: "central", fontSize: 13, style: { fill: VAR.text, fontFamily: VAR.font }, children: typeof emptyState === "string" || emptyState === void 0 ? emptyState ?? "" : null })
       ]
     }
   );
@@ -442,11 +485,11 @@ function CartesianChart({
       },
       children: [
         legendCfg?.position === "top" || legendCfg && !legendCfg.position ? legendEl : null,
-        side ? /* @__PURE__ */ jsx3("div", { style: { flex: 1, minWidth: 0 }, children: svg }) : svg,
+        side ? /* @__PURE__ */ jsx4("div", { style: { flex: 1, minWidth: 0 }, children: svg }) : svg,
         side && legendEl,
         legendCfg?.position === "bottom" && legendEl,
-        !hasData && emptyState !== void 0 && typeof emptyState !== "string" && /* @__PURE__ */ jsx3("div", { style: { position: "absolute", inset: 0, display: "grid", placeItems: "center" }, children: emptyState }),
-        enableScrubbing && /* @__PURE__ */ jsx3("span", { "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: focused && scrubIndex !== null ? a11yText(scrubIndex) : "" })
+        !hasData && emptyState !== void 0 && typeof emptyState !== "string" && /* @__PURE__ */ jsx4("div", { style: { position: "absolute", inset: 0, display: "grid", placeItems: "center" }, children: emptyState }),
+        enableScrubbing && /* @__PURE__ */ jsx4("span", { "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: focused && scrubIndex !== null ? a11yText(scrubIndex) : "" })
       ]
     }
   );
@@ -454,7 +497,7 @@ function CartesianChart({
 
 // src/viz/axes.tsx
 import { logTicks, sampleIndices, ticks as niceTicks } from "@funnest/charts-viz";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function XAxis({
   position = "bottom",
   height = 24,
@@ -472,15 +515,15 @@ function XAxis({
   const lineY = position === "bottom" ? ctx.height - height : height;
   const textY = position === "bottom" ? lineY + height / 2 + 4 : lineY - height / 2 + 4;
   return /* @__PURE__ */ jsxs3("g", { "aria-hidden": "true", style: { fontFamily: VAR.font }, children: [
-    showGrid && indices.map((i) => /* @__PURE__ */ jsx4("line", { x1: ctx.x(i), x2: ctx.x(i), y1: plot.top, y2: plot.bottom, shapeRendering: "crispEdges", style: { stroke: VAR.grid } }, `g${i}`)),
-    showLine && /* @__PURE__ */ jsx4("line", { x1: plot.left, x2: plot.right, y1: lineY, y2: lineY, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
+    showGrid && indices.map((i) => /* @__PURE__ */ jsx5("line", { x1: ctx.x(i), x2: ctx.x(i), y1: plot.top, y2: plot.bottom, shapeRendering: "crispEdges", style: { stroke: VAR.grid } }, `g${i}`)),
+    showLine && /* @__PURE__ */ jsx5("line", { x1: plot.left, x2: plot.right, y1: lineY, y2: lineY, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
     indices.map((i) => {
       const x = ctx.x(i);
       const label = tickLabelFormatter ? tickLabelFormatter(ctx.xData?.[i], i) : ctx.xLabel(i);
       const anchor = x - plot.left < 24 ? "start" : plot.right - x < 24 ? "end" : "middle";
       return /* @__PURE__ */ jsxs3("g", { children: [
-        showTickMarks && /* @__PURE__ */ jsx4("line", { x1: x, x2: x, y1: lineY, y2: position === "bottom" ? lineY + 4 : lineY - 4, style: { stroke: VAR.line } }),
-        /* @__PURE__ */ jsx4("text", { x, y: textY, textAnchor: anchor, fontSize: 11, style: { fill: VAR.text }, children: label })
+        showTickMarks && /* @__PURE__ */ jsx5("line", { x1: x, x2: x, y1: lineY, y2: position === "bottom" ? lineY + 4 : lineY - 4, style: { stroke: VAR.line } }),
+        /* @__PURE__ */ jsx5("text", { x, y: textY, textAnchor: anchor, fontSize: 11, style: { fill: VAR.text }, children: label })
       ] }, i);
     })
   ] });
@@ -508,16 +551,16 @@ function YAxis({
   const textX = right ? ctx.width - width + 8 : width - 8;
   const lineX = right ? ctx.width - width : width;
   return /* @__PURE__ */ jsxs3("g", { "aria-hidden": "true", style: { fontFamily: VAR.font }, children: [
-    showGrid && values.map((v) => /* @__PURE__ */ jsx4("line", { x1: plot.left, x2: plot.right, y1: y(v), y2: y(v), shapeRendering: "crispEdges", style: { stroke: VAR.grid } }, `g${v}`)),
-    showLine && /* @__PURE__ */ jsx4("line", { x1: lineX, x2: lineX, y1: plot.top, y2: plot.bottom, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
-    values.map((v) => /* @__PURE__ */ jsx4("text", { x: textX, y: y(v) + 4, textAnchor: right ? "start" : "end", fontSize: 11, style: { fill: VAR.text }, children: tickLabelFormatter(v) }, v))
+    showGrid && values.map((v) => /* @__PURE__ */ jsx5("line", { x1: plot.left, x2: plot.right, y1: y(v), y2: y(v), shapeRendering: "crispEdges", style: { stroke: VAR.grid } }, `g${v}`)),
+    showLine && /* @__PURE__ */ jsx5("line", { x1: lineX, x2: lineX, y1: plot.top, y2: plot.bottom, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
+    values.map((v) => /* @__PURE__ */ jsx5("text", { x: textX, y: y(v) + 4, textAnchor: right ? "start" : "end", fontSize: 11, style: { fill: VAR.text }, children: tickLabelFormatter(v) }, v))
   ] });
 }
 YAxis.axisSpace = (p) => ({ side: p.position ?? "right", size: p.width ?? 48 });
 
 // src/viz/line.tsx
 import { areaPath, linePath, segments } from "@funnest/charts-viz";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function seriesRuns(ctx, s, connectNulls = false) {
   const st = ctx.stacked?.get(s.id);
   const y = s.scale;
@@ -543,8 +586,8 @@ function SplitClips({ id, y, ctx }) {
   const { left, right, top, bottom } = ctx.plot;
   const pad = 20;
   return /* @__PURE__ */ jsxs4("defs", { children: [
-    /* @__PURE__ */ jsx5("clipPath", { id: `${id}-above`, children: /* @__PURE__ */ jsx5("rect", { x: left - pad, y: top - pad, width: right - left + pad * 2, height: Math.max(0, y - top + pad) }) }),
-    /* @__PURE__ */ jsx5("clipPath", { id: `${id}-below`, children: /* @__PURE__ */ jsx5("rect", { x: left - pad, y, width: right - left + pad * 2, height: Math.max(0, bottom - y + pad) }) })
+    /* @__PURE__ */ jsx6("clipPath", { id: `${id}-above`, children: /* @__PURE__ */ jsx6("rect", { x: left - pad, y: top - pad, width: right - left + pad * 2, height: Math.max(0, y - top + pad) }) }),
+    /* @__PURE__ */ jsx6("clipPath", { id: `${id}-below`, children: /* @__PURE__ */ jsx6("rect", { x: left - pad, y, width: right - left + pad * 2, height: Math.max(0, bottom - y + pad) }) })
   ] });
 }
 function Area({ seriesId, curve = "monotone", fill = "gradient", opacity, connectNulls, baseline, splitColors, gradientStops }) {
@@ -564,17 +607,17 @@ function Area({ seriesId, curve = "monotone", fill = "gradient", opacity, connec
     ];
     return /* @__PURE__ */ jsxs4("g", { clipPath: clip ? `url(#${clip})` : void 0, opacity: dim, children: [
       /* @__PURE__ */ jsxs4("defs", { children: [
-        fill === "gradient" && /* @__PURE__ */ jsx5("linearGradient", { id: fillId, x1: "0", y1: from, x2: "0", y2: base, gradientUnits: "userSpaceOnUse", children: stops.map((st, i) => /* @__PURE__ */ jsx5("stop", { offset: st.offset, stopOpacity: st.opacity, style: { stopColor: st.color ?? color } }, i)) }),
-        fill === "dotted" && /* @__PURE__ */ jsx5("pattern", { id: fillId, width: "6", height: "6", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx5("circle", { cx: "1.5", cy: "1.5", r: "1.1", style: { fill: color } }) })
+        fill === "gradient" && /* @__PURE__ */ jsx6("linearGradient", { id: fillId, x1: "0", y1: from, x2: "0", y2: base, gradientUnits: "userSpaceOnUse", children: stops.map((st, i) => /* @__PURE__ */ jsx6("stop", { offset: st.offset, stopOpacity: st.opacity, style: { stopColor: st.color ?? color } }, i)) }),
+        fill === "dotted" && /* @__PURE__ */ jsx6("pattern", { id: fillId, width: "6", height: "6", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx6("circle", { cx: "1.5", cy: "1.5", r: "1.1", style: { fill: color } }) })
       ] }),
-      runs.map((run, k) => /* @__PURE__ */ jsx5(
+      runs.map((run, k) => /* @__PURE__ */ jsx6(
         "path",
         {
           d: areaPath(run.upper, run.lower ?? base, curve),
           fillOpacity: fill === "gradient" ? void 0 : alpha,
           stroke: "none",
           style: { fill: fill === "solid" ? color : `url(#${fillId})` },
-          children: ctx.animate && /* @__PURE__ */ jsx5("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.6s", fill: "freeze" })
+          children: ctx.animate && /* @__PURE__ */ jsx6("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.6s", fill: "freeze" })
         },
         k
       ))
@@ -582,12 +625,12 @@ function Area({ seriesId, curve = "monotone", fill = "gradient", opacity, connec
   };
   if (splitColors && baseline !== void 0 && !run0IsStacked(ctx, s)) {
     return /* @__PURE__ */ jsxs4("g", { mask: ctx.futureMask, children: [
-      /* @__PURE__ */ jsx5(SplitClips, { id: gid, y: base, ctx }),
+      /* @__PURE__ */ jsx6(SplitClips, { id: gid, y: base, ctx }),
       paint("above", splitColors.above, ctx.plot.top, `${gid}-above`),
       paint("below", splitColors.below, ctx.plot.bottom, `${gid}-below`)
     ] });
   }
-  return /* @__PURE__ */ jsx5("g", { mask: ctx.futureMask, children: paint("fill", s.color, ctx.plot.top) });
+  return /* @__PURE__ */ jsx6("g", { mask: ctx.futureMask, children: paint("fill", s.color, ctx.plot.top) });
 }
 var run0IsStacked = (ctx, s) => !!ctx.stacked?.get(s.id);
 function Line({
@@ -615,7 +658,7 @@ function Line({
   const gid = `${ctx.id}-line-${s.index}`;
   const baseY = baselineY(ctx, s.scale, baseline);
   const strokeOpacity = (opacity ?? 1) * (s.dimmed ? DIM_OPACITY : 1);
-  const strokes = (color, clip) => /* @__PURE__ */ jsx5("g", { clipPath: clip ? `url(#${clip})` : void 0, mask: ctx.futureMask, children: runs.map((run, k) => /* @__PURE__ */ jsx5(
+  const strokes = (color, clip) => /* @__PURE__ */ jsx6("g", { clipPath: clip ? `url(#${clip})` : void 0, mask: ctx.futureMask, children: runs.map((run, k) => /* @__PURE__ */ jsx6(
     "path",
     {
       d: linePath(run.upper, curve),
@@ -627,7 +670,7 @@ function Line({
       strokeOpacity,
       pathLength: drawIn ? 1 : void 0,
       style: { stroke: color },
-      children: drawIn && /* @__PURE__ */ jsx5("animate", { attributeName: "stroke-dashoffset", from: "1", to: "0", dur: "0.8s", fill: "freeze", calcMode: "spline", keySplines: "0.3 0 0.2 1", keyTimes: "0;1" })
+      children: drawIn && /* @__PURE__ */ jsx6("animate", { attributeName: "stroke-dashoffset", from: "1", to: "0", dur: "0.8s", fill: "freeze", calcMode: "spline", keySplines: "0.3 0 0.2 1", keyTimes: "0;1" })
     },
     k
   )) });
@@ -645,8 +688,8 @@ function Line({
       const r = p.radius ?? Math.max(3, strokeWidth + 1);
       dots.push(
         /* @__PURE__ */ jsxs4("g", { opacity: s.dimmed ? DIM_OPACITY : 1, children: [
-          /* @__PURE__ */ jsx5("circle", { cx: x, cy: y, r, strokeWidth: 2, style: { fill: color, stroke: VAR.bg } }),
-          p.label && /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6("circle", { cx: x, cy: y, r, strokeWidth: 2, style: { fill: color, stroke: VAR.bg } }),
+          p.label && /* @__PURE__ */ jsx6(
             "text",
             {
               opacity: nearScrub(ctx, x) ? 0 : 1,
@@ -667,7 +710,7 @@ function Line({
     });
   }
   return /* @__PURE__ */ jsxs4("g", { children: [
-    area !== "none" && /* @__PURE__ */ jsx5(
+    area !== "none" && /* @__PURE__ */ jsx6(
       Area,
       {
         seriesId,
@@ -680,7 +723,7 @@ function Line({
       }
     ),
     split ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx5(SplitClips, { id: gid, y: baseY, ctx }),
+      /* @__PURE__ */ jsx6(SplitClips, { id: gid, y: baseY, ctx }),
       strokes(splitColors.above, `${gid}-above`),
       strokes(splitColors.below, `${gid}-below`)
     ] }) : strokes(s.color),
@@ -690,7 +733,7 @@ function Line({
 
 // src/viz/bar.tsx
 import { barPath } from "@funnest/charts-viz";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function BarPlot({
   seriesIds,
   radius = 3,
@@ -712,7 +755,7 @@ function BarPlot({
     return scale(Math.min(Math.max(0, Math.min(d0, d1)), Math.max(d0, d1)));
   };
   const dim = highlightScrubbed && ctx.scrubIndex !== null;
-  return /* @__PURE__ */ jsx6("g", { children: list.map((s, k) => {
+  return /* @__PURE__ */ jsx7("g", { children: list.map((s, k) => {
     const st = ctx.stacked?.get(s.id);
     const y = s.scale;
     const zero = zeroOf(y);
@@ -721,7 +764,7 @@ function BarPlot({
       const ov = o.data[i];
       return ov !== null && ov !== void 0 && ov !== 0 && Math.sign(ov) === Math.sign(v);
     });
-    return /* @__PURE__ */ jsx6("g", { opacity: s.dimmed ? DIM_OPACITY : 1, children: s.data.map((v, i) => {
+    return /* @__PURE__ */ jsx7("g", { opacity: s.dimmed ? DIM_OPACITY : 1, children: s.data.map((v, i) => {
       if (v === null || v === void 0 || !Number.isFinite(v) || v === 0) return null;
       const x = band(i) + offset;
       const low = s.low?.[i];
@@ -737,13 +780,13 @@ function BarPlot({
       if (minSize > 0 && Math.abs(y1 - y0) < minSize) y1 = y0 + dir * minSize;
       const color = getBarColor?.(v, i, s.id) ?? s.color;
       const r = top ? radius : st && stackGap > 0 ? Math.min(radius, 2) : 0;
-      return /* @__PURE__ */ jsx6(
+      return /* @__PURE__ */ jsx7(
         "path",
         {
           d: barPath(x, barW, y0, y1, s.low ? radius : r, roundBaseline && atBase || !!s.low),
           fillOpacity: dim && ctx.scrubIndex !== i ? 0.45 : 1,
           style: { fill: color },
-          children: ctx.animate && /* @__PURE__ */ jsx6("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.5s", fill: "freeze" })
+          children: ctx.animate && /* @__PURE__ */ jsx7("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.5s", fill: "freeze" })
         },
         i
       );
@@ -753,8 +796,8 @@ function BarPlot({
 
 // src/viz/horizontal-bar.tsx
 import { bandScale as bandScale2, barPath as barPath2, extent as extent2, linearScale as linearScale2, seriesColor as seriesColor2, stack as stack2, stackedExtent as stackedExtent2, ticks as niceTicks2 } from "@funnest/charts-viz";
-import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var textWidth = (t, size = 12) => [...t].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? size : size * 0.6), 0);
 function HorizontalBarChart({
   series,
@@ -777,11 +820,11 @@ function HorizontalBarChart({
   style,
   "aria-label": ariaLabel
 }) {
-  const wrapRef = useRef3(null);
-  const [measured, setMeasured] = useState3(fixedWidth ?? 0);
-  const [hover, setHover] = useState3(null);
-  const [focused, setFocused] = useState3(false);
-  useEffect3(() => {
+  const wrapRef = useRef4(null);
+  const [measured, setMeasured] = useState4(fixedWidth ?? 0);
+  const [hover, setHover] = useState4(null);
+  const [focused, setFocused] = useState4(false);
+  useEffect4(() => {
     if (fixedWidth !== void 0) return setMeasured(fixedWidth);
     const el = wrapRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
@@ -845,14 +888,14 @@ function HorizontalBarChart({
   const rowY = hover === null ? 0 : band.center(hover);
   const tipY = Math.min(Math.max(top, rowY - tipH / 2), bottom - tipH);
   return /* @__PURE__ */ jsxs5("div", { ref: wrapRef, className, style: { position: "relative", width: fixedWidth ?? "100%", fontFamily: VAR.font, ...style }, children: [
-    legend && /* @__PURE__ */ jsx7(
+    legend && /* @__PURE__ */ jsx8(
       Legend,
       {
         ...typeof legend === "object" && legend.shape ? { shape: legend.shape } : {},
         items: resolved.map((s) => ({ id: s.id, label: s.label ?? s.id, color: s.color }))
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "svg",
       {
         width: w || "100%",
@@ -870,12 +913,12 @@ function HorizontalBarChart({
           setHover(null);
         } : void 0,
         children: w > 0 && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-          tickValues.map((t) => /* @__PURE__ */ jsx7("line", { x1: xs(t), x2: xs(t), y1: top, y2: bottom, shapeRendering: "crispEdges", style: { stroke: VAR.grid } }, `g${t}`)),
-          min < 0 && /* @__PURE__ */ jsx7("line", { x1: zero, x2: zero, y1: top, y2: bottom, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
-          hover !== null && /* @__PURE__ */ jsx7("rect", { x: left - 4, y: band.center(hover) - band.step / 2, width: right - left + 8, height: band.step, rx: 6, style: { fill: VAR.grid } }),
+          tickValues.map((t) => /* @__PURE__ */ jsx8("line", { x1: xs(t), x2: xs(t), y1: top, y2: bottom, shapeRendering: "crispEdges", style: { stroke: VAR.grid } }, `g${t}`)),
+          min < 0 && /* @__PURE__ */ jsx8("line", { x1: zero, x2: zero, y1: top, y2: bottom, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
+          hover !== null && /* @__PURE__ */ jsx8("rect", { x: left - 4, y: band.center(hover) - band.step / 2, width: right - left + 8, height: band.step, rx: 6, style: { fill: VAR.grid } }),
           resolved.map((s, k) => {
             const st = stackedMap?.get(s.id);
-            return /* @__PURE__ */ jsx7("g", { children: s.high.map((v, i) => {
+            return /* @__PURE__ */ jsx8("g", { children: s.high.map((v, i) => {
               if (v === null || v === void 0 || !Number.isFinite(v) || v === 0) return null;
               const yTop = band(i) + (stacked ? 0 : k * (barH + groupGap));
               const lo = s.low?.[i];
@@ -889,7 +932,7 @@ function HorizontalBarChart({
               }
               const color = getBarColor?.(v, i, s.id) ?? s.color;
               const d = barPath2(yTop, barH, x0, x1, isTop || s.low ? radius : 0, !!s.low);
-              return /* @__PURE__ */ jsx7(
+              return /* @__PURE__ */ jsx8(
                 "path",
                 {
                   d,
@@ -901,27 +944,27 @@ function HorizontalBarChart({
               );
             }) }, s.id);
           }),
-          showCategoryAxis && (categories ?? []).map((c, i) => /* @__PURE__ */ jsx7("text", { x: labelW, y: band.center(i), textAnchor: "end", dominantBaseline: "central", fontSize: 12, style: { fill: hover === i ? VAR.textStrong : VAR.text, fontWeight: hover === i ? 700 : 500 }, children: c }, c + i)),
-          showValueAxis && tickValues.map((t) => /* @__PURE__ */ jsx7("text", { x: xs(t), y: h - 6, textAnchor: "middle", fontSize: 11, style: { fill: VAR.text }, children: valueFormatter(t) }, t)),
+          showCategoryAxis && (categories ?? []).map((c, i) => /* @__PURE__ */ jsx8("text", { x: labelW, y: band.center(i), textAnchor: "end", dominantBaseline: "central", fontSize: 12, style: { fill: hover === i ? VAR.textStrong : VAR.text, fontWeight: hover === i ? 700 : 500 }, children: c }, c + i)),
+          showValueAxis && tickValues.map((t) => /* @__PURE__ */ jsx8("text", { x: xs(t), y: h - 6, textAnchor: "middle", fontSize: 11, style: { fill: VAR.text }, children: valueFormatter(t) }, t)),
           tipRows.length > 0 && /* @__PURE__ */ jsxs5("g", { transform: `translate(${Math.min(right - tipW, Math.max(left, xs(max) - tipW))},${tipY})`, pointerEvents: "none", children: [
-            /* @__PURE__ */ jsx7("rect", { width: tipW, height: tipH, rx: 8, strokeWidth: 1, style: { fill: VAR.bg, stroke: VAR.grid } }),
+            /* @__PURE__ */ jsx8("rect", { width: tipW, height: tipH, rx: 8, strokeWidth: 1, style: { fill: VAR.bg, stroke: VAR.grid } }),
             tipRows.map((r, k) => /* @__PURE__ */ jsxs5("g", { transform: `translate(10,${7 + 9 + k * 18})`, children: [
-              /* @__PURE__ */ jsx7("circle", { cx: 3, cy: 0, r: 3, style: { fill: r.color } }),
-              /* @__PURE__ */ jsx7("text", { x: 12, dominantBaseline: "central", fontSize: 12, style: { fill: VAR.text }, children: r.s.label ?? r.s.id }),
-              /* @__PURE__ */ jsx7("text", { x: tipW - 20, textAnchor: "end", dominantBaseline: "central", fontSize: 12, fontWeight: 700, style: { fill: VAR.textStrong, fontVariantNumeric: "tabular-nums" }, children: r.text })
+              /* @__PURE__ */ jsx8("circle", { cx: 3, cy: 0, r: 3, style: { fill: r.color } }),
+              /* @__PURE__ */ jsx8("text", { x: 12, dominantBaseline: "central", fontSize: 12, style: { fill: VAR.text }, children: r.s.label ?? r.s.id }),
+              /* @__PURE__ */ jsx8("text", { x: tipW - 20, textAnchor: "end", dominantBaseline: "central", fontSize: 12, fontWeight: 700, style: { fill: VAR.textStrong, fontVariantNumeric: "tabular-nums" }, children: r.text })
             ] }, r.s.id))
           ] })
         ] })
       }
     ),
-    enableScrubbing && /* @__PURE__ */ jsx7("span", { "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: focused && hover !== null ? [categories?.[hover] ?? String(hover), ...tipRows.map((r) => `${r.s.label ?? r.s.id} ${r.text}`)].join(", ") : "" })
+    enableScrubbing && /* @__PURE__ */ jsx8("span", { "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: focused && hover !== null ? [categories?.[hover] ?? String(hover), ...tipRows.map((r) => `${r.s.label ?? r.s.id} ${r.text}`)].join(", ") : "" })
   ] });
 }
 
 // src/viz/donut.tsx
 import { arcPath, arcs, seriesColor as seriesColor3 } from "@funnest/charts-viz";
-import { useId as useId2, useState as useState4 } from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useId as useId2, useState as useState5 } from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var pctText = (f) => `${formatNumber(Math.round(f * 1e3) / 10)}%`;
 var isCenter = (v) => !!v && typeof v === "object" && "value" in v && typeof v.value === "string";
 function DonutChart({
@@ -945,8 +988,8 @@ function DonutChart({
   "aria-label": ariaLabel
 }) {
   const uid = useId2();
-  const [own, setOwn] = useState4(null);
-  const [focused, setFocused] = useState4(false);
+  const [own, setOwn] = useState5(null);
+  const [focused, setFocused] = useState5(false);
   const active = activeId !== void 0 ? activeId : own;
   const setActive = (id) => {
     if (activeId === void 0) setOwn(id);
@@ -999,13 +1042,13 @@ function DonutChart({
       },
       onPointerLeave: () => setActive(null),
       children: [
-        total <= 0 && /* @__PURE__ */ jsx8("circle", { cx: c, cy: c, r: (r + ir) / 2, fill: "none", strokeWidth: Math.max(1, r - ir), style: { stroke: VAR.grid } }),
+        total <= 0 && /* @__PURE__ */ jsx9("circle", { cx: c, cy: c, r: (r + ir) / 2, fill: "none", strokeWidth: Math.max(1, r - ir), style: { stroke: VAR.grid } }),
         visible.map((i) => {
           const on = i.id === active;
           const mid = (i.seg.startAngle + i.seg.endAngle) / 2;
           const dx = on ? Math.sin(mid) * pop : 0;
           const dy = on ? -Math.cos(mid) * pop : 0;
-          return /* @__PURE__ */ jsx8(
+          return /* @__PURE__ */ jsx9(
             "path",
             {
               d: arcPath(c, c, ir, r, i.seg.startAngle, i.seg.endAngle, cornerRadius),
@@ -1013,13 +1056,13 @@ function DonutChart({
               opacity: active && !on ? 0.35 : 1,
               onPointerEnter: () => setActive(i.id),
               style: { fill: i.color, transition: "transform 0.15s ease, opacity 0.15s", cursor: "default" },
-              children: /* @__PURE__ */ jsx8("title", { children: describe(i) })
+              children: /* @__PURE__ */ jsx9("title", { children: describe(i) })
             },
             i.id
           );
         }),
         ir > 24 && centerContent !== null && (isCenter(centerContent) ? /* @__PURE__ */ jsxs6("g", { pointerEvents: "none", style: { fontFamily: VAR.font }, children: [
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "text",
             {
               x: c,
@@ -1032,8 +1075,8 @@ function DonutChart({
               children: centerContent.value
             }
           ),
-          centerContent.label && /* @__PURE__ */ jsx8("text", { x: c, y: c + 13, textAnchor: "middle", dominantBaseline: "central", fontSize: 12, style: { fill: VAR.text }, children: centerContent.label })
-        ] }) : /* @__PURE__ */ jsx8("foreignObject", { x: c - ir * 0.72, y: c - ir * 0.72, width: ir * 1.44, height: ir * 1.44, pointerEvents: "none", children: /* @__PURE__ */ jsx8("div", { style: { width: "100%", height: "100%", display: "grid", placeItems: "center", textAlign: "center" }, children: centerContent }) }))
+          centerContent.label && /* @__PURE__ */ jsx9("text", { x: c, y: c + 13, textAnchor: "middle", dominantBaseline: "central", fontSize: 12, style: { fill: VAR.text }, children: centerContent.label })
+        ] }) : /* @__PURE__ */ jsx9("foreignObject", { x: c - ir * 0.72, y: c - ir * 0.72, width: ir * 1.44, height: ir * 1.44, pointerEvents: "none", children: /* @__PURE__ */ jsx9("div", { style: { width: "100%", height: "100%", display: "grid", placeItems: "center", textAlign: "center" }, children: centerContent }) }))
       ]
     }
   );
@@ -1052,7 +1095,7 @@ function DonutChart({
       },
       children: [
         svg,
-        showLegend && /* @__PURE__ */ jsx8(
+        showLegend && /* @__PURE__ */ jsx9(
           Legend,
           {
             direction: side ? "column" : "row",
@@ -1062,7 +1105,7 @@ function DonutChart({
             onItemHover: setActive
           }
         ),
-        /* @__PURE__ */ jsx8("span", { id: `${uid}-live`, "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: focused && hit ? describe(hit) : "" })
+        /* @__PURE__ */ jsx9("span", { id: `${uid}-live`, "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: focused && hit ? describe(hit) : "" })
       ]
     }
   );
@@ -1070,8 +1113,8 @@ function DonutChart({
 
 // src/viz/treemap.tsx
 import { seriesColor as seriesColor4, treemap } from "@funnest/charts-viz";
-import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef5, useState as useState6 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var hex = (c) => {
   const m = /^#([0-9a-f]{6})$/i.exec(c);
   if (!m) return null;
@@ -1107,11 +1150,11 @@ function TreemapChart({
   style,
   "aria-label": ariaLabel
 }) {
-  const wrapRef = useRef4(null);
-  const [measured, setMeasured] = useState5(fixedWidth ?? 0);
-  const [active, setActive] = useState5(null);
-  const [focused, setFocused] = useState5(false);
-  useEffect4(() => {
+  const wrapRef = useRef5(null);
+  const [measured, setMeasured] = useState6(fixedWidth ?? 0);
+  const [active, setActive] = useState6(null);
+  const [focused, setFocused] = useState6(false);
+  useEffect5(() => {
     if (fixedWidth !== void 0) return setMeasured(fixedWidth);
     const el = wrapRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
@@ -1191,7 +1234,7 @@ function TreemapChart({
             const fitsSub = !!sub && fitsLabel && r.height >= fs * 2 + 14 && r.width >= textWidth2(sub, fs * 0.8) + 10;
             const cy = r.y + r.height / 2;
             return /* @__PURE__ */ jsxs7("g", { onPointerEnter: () => setActive(r.id), onClick: onItemClick ? () => onItemClick(d) : void 0, style: { cursor: onItemClick ? "pointer" : "default" }, children: [
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "rect",
                 {
                   x: r.x,
@@ -1203,7 +1246,7 @@ function TreemapChart({
                   opacity: active && !on ? 0.55 : 1
                 }
               ),
-              on && /* @__PURE__ */ jsx9(
+              on && /* @__PURE__ */ jsx10(
                 "rect",
                 {
                   x: r.x + 1,
@@ -1216,7 +1259,7 @@ function TreemapChart({
                   style: { stroke: "#fff" }
                 }
               ),
-              fitsLabel && /* @__PURE__ */ jsx9(
+              fitsLabel && /* @__PURE__ */ jsx10(
                 "text",
                 {
                   x: r.x + r.width / 2,
@@ -1230,7 +1273,7 @@ function TreemapChart({
                   children: d.label
                 }
               ),
-              fitsSub && /* @__PURE__ */ jsx9(
+              fitsSub && /* @__PURE__ */ jsx10(
                 "text",
                 {
                   x: r.x + r.width / 2,
@@ -1247,10 +1290,10 @@ function TreemapChart({
             ] }, r.id);
           }),
           tip && /* @__PURE__ */ jsxs7("g", { transform: `translate(${tip.x},${tip.y})`, pointerEvents: "none", children: [
-            /* @__PURE__ */ jsx9("rect", { width: tip.w, height: tip.h, rx: 8, strokeWidth: 1, style: { fill: VAR.bg, stroke: VAR.grid } }),
+            /* @__PURE__ */ jsx10("rect", { width: tip.w, height: tip.h, rx: 8, strokeWidth: 1, style: { fill: VAR.bg, stroke: VAR.grid } }),
             tip.rows.map(([a, b], k) => /* @__PURE__ */ jsxs7("g", { transform: `translate(10,${7 + 9 + k * 18})`, children: [
-              /* @__PURE__ */ jsx9("text", { dominantBaseline: "central", fontSize: 12, style: { fill: VAR.text }, children: a }),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10("text", { dominantBaseline: "central", fontSize: 12, style: { fill: VAR.text }, children: a }),
+              /* @__PURE__ */ jsx10(
                 "text",
                 {
                   x: tip.w - 20,
@@ -1267,12 +1310,12 @@ function TreemapChart({
         ]
       }
     ),
-    /* @__PURE__ */ jsx9("span", { "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: focused && hitItem ? describe(hitItem) : "" })
+    /* @__PURE__ */ jsx10("span", { "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: focused && hitItem ? describe(hitItem) : "" })
   ] });
 }
 
 // src/viz/candles.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var KO = { open: "\uC2DC\uAC00", high: "\uACE0\uAC00", low: "\uC800\uAC00", close: "\uC885\uAC00", volume: "\uAC70\uB798\uB7C9" };
 var fade = (color, a) => {
   const m = /^#([0-9a-f]{6})$/i.exec(color);
@@ -1316,12 +1359,12 @@ function CandlePlot({
     const x = band.center(i);
     const right = x + 12 + tw <= ctx.plot.right;
     tip = /* @__PURE__ */ jsxs8("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ jsx10("line", { x1: x, x2: x, y1: ctx.plot.top, y2: ctx.plot.bottom, strokeWidth: 1, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
+      /* @__PURE__ */ jsx11("line", { x1: x, x2: x, y1: ctx.plot.top, y2: ctx.plot.bottom, strokeWidth: 1, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
       /* @__PURE__ */ jsxs8("g", { transform: `translate(${right ? x + 12 : x - 12 - tw},${ctx.plot.top + 4})`, children: [
-        /* @__PURE__ */ jsx10("rect", { width: tw, height: th, rx: 8, strokeWidth: 1, style: { fill: VAR.bg, stroke: VAR.grid } }),
+        /* @__PURE__ */ jsx11("rect", { width: tw, height: th, rx: 8, strokeWidth: 1, style: { fill: VAR.bg, stroke: VAR.grid } }),
         rows.map(([a, b, color], k) => /* @__PURE__ */ jsxs8("g", { transform: `translate(10,${16 + k * 18})`, children: [
-          /* @__PURE__ */ jsx10("text", { dominantBaseline: "central", fontSize: 12, style: { fill: VAR.text }, children: a }),
-          /* @__PURE__ */ jsx10("text", { x: tw - 20, textAnchor: "end", dominantBaseline: "central", fontSize: 12, fontWeight: 700, style: { fill: color ?? VAR.textStrong, fontVariantNumeric: "tabular-nums" }, children: b })
+          /* @__PURE__ */ jsx11("text", { dominantBaseline: "central", fontSize: 12, style: { fill: VAR.text }, children: a }),
+          /* @__PURE__ */ jsx11("text", { x: tw - 20, textAnchor: "end", dominantBaseline: "central", fontSize: 12, fontWeight: 700, style: { fill: color ?? VAR.textStrong, fontVariantNumeric: "tabular-nums" }, children: b })
         ] }, a))
       ] })
     ] });
@@ -1337,8 +1380,8 @@ function CandlePlot({
       const h = Math.max(1, bottom - top);
       const hollow = hollowUp && up && bw >= 4;
       return /* @__PURE__ */ jsxs8("g", { opacity: i !== null && i !== k ? 0.55 : 1, children: [
-        /* @__PURE__ */ jsx10("line", { x1: cx, x2: cx, y1: y(d.high), y2: y(d.low), strokeWidth: 1, style: { stroke: color } }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11("line", { x1: cx, x2: cx, y1: y(d.high), y2: y(d.low), strokeWidth: 1, style: { stroke: color } }),
+        /* @__PURE__ */ jsx11(
           "rect",
           {
             x: cx - bw / 2,
@@ -1406,9 +1449,9 @@ function CandlestickChart({
         return d ? `${l.open} ${valueFormatter(d.open)}, ${l.high} ${valueFormatter(d.high)}, ${l.low} ${valueFormatter(d.low)}, ${l.close} ${valueFormatter(d.close)}` : "";
       }),
       children: [
-        yAx && /* @__PURE__ */ jsx10(YAxis, { tickLabelFormatter: valueFormatter, ...yAx, axisId: "price" }, "y"),
-        xAx && /* @__PURE__ */ jsx10(XAxis, { ...xAx }, "x"),
-        hasVolume && /* @__PURE__ */ jsx10(
+        yAx && /* @__PURE__ */ jsx11(YAxis, { tickLabelFormatter: valueFormatter, ...yAx, axisId: "price" }, "y"),
+        xAx && /* @__PURE__ */ jsx11(XAxis, { ...xAx }, "x"),
+        hasVolume && /* @__PURE__ */ jsx11(
           BarPlot,
           {
             seriesIds: ["volume"],
@@ -1420,7 +1463,7 @@ function CandlestickChart({
             }
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           CandlePlot,
           {
             data,
@@ -1441,8 +1484,8 @@ function CandlestickChart({
 }
 
 // src/viz/scrubber.tsx
-import { useEffect as useEffect5 } from "react";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useEffect as useEffect6 } from "react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var TIP_FONT = 12;
 var ROW = 18;
 var TIP_PAD = 7;
@@ -1462,7 +1505,7 @@ function Scrubber({
   const i = ctx.scrubIndex;
   const { setDimFuture } = ctx;
   const fade2 = dimFuture && !hideOverlay;
-  useEffect5(() => {
+  useEffect6(() => {
     setDimFuture(fade2);
     return () => setDimFuture(false);
   }, [fade2, setDimFuture]);
@@ -1470,7 +1513,7 @@ function Scrubber({
   const colorOf = (s, v) => beaconColor?.(v, s.id) ?? s.color;
   if (i === null || i >= ctx.length) {
     if (!idlePulse || ctx.band) return null;
-    return /* @__PURE__ */ jsx11("g", { pointerEvents: "none", children: pick.map((s) => {
+    return /* @__PURE__ */ jsx12("g", { pointerEvents: "none", children: pick.map((s) => {
       let last = s.data.length - 1;
       while (last >= 0 && (s.data[last] === null || s.data[last] === void 0)) last--;
       if (last < 0) return null;
@@ -1480,10 +1523,10 @@ function Scrubber({
       const color = colorOf(s, s.data[last]);
       return /* @__PURE__ */ jsxs9("g", { children: [
         /* @__PURE__ */ jsxs9("circle", { cx: x2, cy: y, r: 4, fillOpacity: 0.35, style: { fill: color }, children: [
-          /* @__PURE__ */ jsx11("animate", { attributeName: "r", values: "4;13", dur: "1.6s", repeatCount: "indefinite" }),
-          /* @__PURE__ */ jsx11("animate", { attributeName: "fill-opacity", values: "0.35;0", dur: "1.6s", repeatCount: "indefinite" })
+          /* @__PURE__ */ jsx12("animate", { attributeName: "r", values: "4;13", dur: "1.6s", repeatCount: "indefinite" }),
+          /* @__PURE__ */ jsx12("animate", { attributeName: "fill-opacity", values: "0.35;0", dur: "1.6s", repeatCount: "indefinite" })
         ] }),
-        /* @__PURE__ */ jsx11("circle", { cx: x2, cy: y, r: 4, strokeWidth: 2, style: { fill: color, stroke: VAR.bg } })
+        /* @__PURE__ */ jsx12("circle", { cx: x2, cy: y, r: 4, strokeWidth: 2, style: { fill: color, stroke: VAR.bg } })
       ] }, s.id);
     }) });
   }
@@ -1505,8 +1548,8 @@ function Scrubber({
   const tipX = tipRight ? x + 12 : x - 12 - tipW;
   const tipY = plot.top + 4;
   return /* @__PURE__ */ jsxs9("g", { pointerEvents: "none", children: [
-    /* @__PURE__ */ jsx11("line", { x1: x, x2: x, y1: plot.top, y2: plot.bottom, strokeWidth: 1, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
-    text && /* @__PURE__ */ jsx11("text", { x: textX, y: Math.max(11, plot.top - 2), textAnchor: "middle", fontSize: 11, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill: VAR.textStrong }, children: text }),
+    /* @__PURE__ */ jsx12("line", { x1: x, x2: x, y1: plot.top, y2: plot.bottom, strokeWidth: 1, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
+    text && /* @__PURE__ */ jsx12("text", { x: textX, y: Math.max(11, plot.top - 2), textAnchor: "middle", fontSize: 11, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill: VAR.textStrong }, children: text }),
     !ctx.band && list.map((s) => {
       const y = seriesY(ctx, s, i);
       if (y === null) return null;
@@ -1515,9 +1558,9 @@ function Scrubber({
       const text2 = beaconLabels ? typeof beaconLabels === "function" ? beaconLabels(v, s.id) : valueFormatter(v, s.id) : "";
       const right = x + 12 + textWidth3(text2) <= plot.right;
       return /* @__PURE__ */ jsxs9("g", { children: [
-        /* @__PURE__ */ jsx11("circle", { cx: x, cy: y, r: 7, fillOpacity: 0.18, style: { fill: color } }),
-        /* @__PURE__ */ jsx11("circle", { cx: x, cy: y, r: 4, strokeWidth: 2, style: { fill: color, stroke: VAR.bg } }),
-        text2 && /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12("circle", { cx: x, cy: y, r: 7, fillOpacity: 0.18, style: { fill: color } }),
+        /* @__PURE__ */ jsx12("circle", { cx: x, cy: y, r: 4, strokeWidth: 2, style: { fill: color, stroke: VAR.bg } }),
+        text2 && /* @__PURE__ */ jsx12(
           "text",
           {
             x: right ? x + 10 : x - 10,
@@ -1536,31 +1579,31 @@ function Scrubber({
       ] }, s.id);
     }),
     rows.length > 0 && /* @__PURE__ */ jsxs9("g", { transform: `translate(${tipX},${tipY})`, children: [
-      /* @__PURE__ */ jsx11("rect", { width: tipW, height: tipH, rx: 8, style: { fill: VAR.bg, stroke: VAR.grid }, strokeWidth: 1 }),
+      /* @__PURE__ */ jsx12("rect", { width: tipW, height: tipH, rx: 8, style: { fill: VAR.bg, stroke: VAR.grid }, strokeWidth: 1 }),
       rows.map((r, k) => /* @__PURE__ */ jsxs9("g", { transform: `translate(10,${TIP_PAD + ROW / 2 + k * ROW})`, children: [
-        /* @__PURE__ */ jsx11("circle", { cx: 3, cy: 0, r: 3, style: { fill: r.s.color } }),
-        (rows.length > 1 || r.s.label) && /* @__PURE__ */ jsx11("text", { x: 12, dominantBaseline: "central", fontSize: TIP_FONT, style: { fill: VAR.text }, children: r.s.label ?? r.s.id }),
-        /* @__PURE__ */ jsx11("text", { x: tipW - 20, textAnchor: "end", dominantBaseline: "central", fontSize: TIP_FONT, fontWeight: 700, style: { fill: VAR.textStrong, fontVariantNumeric: "tabular-nums" }, children: r.text })
+        /* @__PURE__ */ jsx12("circle", { cx: 3, cy: 0, r: 3, style: { fill: r.s.color } }),
+        (rows.length > 1 || r.s.label) && /* @__PURE__ */ jsx12("text", { x: 12, dominantBaseline: "central", fontSize: TIP_FONT, style: { fill: VAR.text }, children: r.s.label ?? r.s.id }),
+        /* @__PURE__ */ jsx12("text", { x: tipW - 20, textAnchor: "end", dominantBaseline: "central", fontSize: TIP_FONT, fontWeight: 700, style: { fill: VAR.textStrong, fontVariantNumeric: "tabular-nums" }, children: r.text })
       ] }, r.s.id))
     ] })
   ] });
 }
 
 // src/viz/annotations.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var LABEL_FONT = 11;
 var labelWidth = (t) => [...t].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? LABEL_FONT : LABEL_FONT * 0.62), 0);
 function LineLabel(props) {
   const { x, y, text, anchor, color, pill } = props;
   const textColor = color === VAR.line ? VAR.text : color;
   if (!pill) {
-    return /* @__PURE__ */ jsx12("text", { x, y, textAnchor: anchor, dominantBaseline: "central", fontSize: LABEL_FONT, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill: textColor }, children: text });
+    return /* @__PURE__ */ jsx13("text", { x, y, textAnchor: anchor, dominantBaseline: "central", fontSize: LABEL_FONT, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill: textColor }, children: text });
   }
   const w = labelWidth(text) + 14;
   const left = anchor === "start" ? x : anchor === "end" ? x - w : x - w / 2;
   return /* @__PURE__ */ jsxs10("g", { children: [
-    /* @__PURE__ */ jsx12("rect", { x: left, y: y - 10, width: w, height: 20, rx: 10, style: { fill: color === VAR.line ? VAR.textStrong : color } }),
-    /* @__PURE__ */ jsx12("text", { x: left + w / 2, y, textAnchor: "middle", dominantBaseline: "central", fontSize: LABEL_FONT, fontWeight: 700, style: { fill: VAR.bg }, children: text })
+    /* @__PURE__ */ jsx13("rect", { x: left, y: y - 10, width: w, height: 20, rx: 10, style: { fill: color === VAR.line ? VAR.textStrong : color } }),
+    /* @__PURE__ */ jsx13("text", { x: left + w / 2, y, textAnchor: "middle", dominantBaseline: "central", fontSize: LABEL_FONT, fontWeight: 700, style: { fill: VAR.bg }, children: text })
   ] });
 }
 function ReferenceLine({
@@ -1589,16 +1632,16 @@ function ReferenceLine({
     const off = pill ? 13 : 9;
     const ly = labelAlign === "center" ? y : labelAlign === "below" ? y + off : y - off;
     return /* @__PURE__ */ jsxs10("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ jsx12("line", { x1: plot.left, x2: plot.right, y1: y, y2: y, strokeWidth, strokeDasharray: dash || void 0, shapeRendering: "crispEdges", style: { stroke: color } }),
-      label !== void 0 && /* @__PURE__ */ jsx12(LineLabel, { x: tx + labelDx, y: ly + labelDy, text: label, anchor, color, pill })
+      /* @__PURE__ */ jsx13("line", { x1: plot.left, x2: plot.right, y1: y, y2: y, strokeWidth, strokeDasharray: dash || void 0, shapeRendering: "crispEdges", style: { stroke: color } }),
+      label !== void 0 && /* @__PURE__ */ jsx13(LineLabel, { x: tx + labelDx, y: ly + labelDy, text: label, anchor, color, pill })
     ] });
   }
   if (dataX !== void 0) {
     const x = ctx.x(dataX);
     const pos = labelPosition ?? "top";
     return /* @__PURE__ */ jsxs10("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ jsx12("line", { x1: x, x2: x, y1: plot.top, y2: plot.bottom, strokeWidth, strokeDasharray: dash || void 0, shapeRendering: "crispEdges", style: { stroke: color } }),
-      label !== void 0 && /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13("line", { x1: x, x2: x, y1: plot.top, y2: plot.bottom, strokeWidth, strokeDasharray: dash || void 0, shapeRendering: "crispEdges", style: { stroke: color } }),
+      label !== void 0 && /* @__PURE__ */ jsx13(
         LineLabel,
         {
           x: x + (pill ? 0 : 4) + labelDx,
@@ -1626,24 +1669,24 @@ function Point({ dataX, dataY, seriesId, yAxisId, color, radius = 4, label, labe
   const [lx, ly, anchor] = labelPosition === "bottom" ? [x, y + gap + 8, "middle"] : labelPosition === "left" ? [x - gap, y + 4, "end"] : labelPosition === "right" ? [x + gap, y + 4, "start"] : [x, y - gap, "middle"];
   return /* @__PURE__ */ jsxs10("g", { style: onClick ? { cursor: "pointer" } : void 0, onClick, pointerEvents: onClick ? "auto" : "none", children: [
     pulse && /* @__PURE__ */ jsxs10("circle", { cx: x, cy: y, r: radius, fillOpacity: 0.35, style: { fill }, children: [
-      /* @__PURE__ */ jsx12("animate", { attributeName: "r", values: `${radius};${radius * 3.2}`, dur: "1.6s", repeatCount: "indefinite" }),
-      /* @__PURE__ */ jsx12("animate", { attributeName: "fill-opacity", values: "0.35;0", dur: "1.6s", repeatCount: "indefinite" })
+      /* @__PURE__ */ jsx13("animate", { attributeName: "r", values: `${radius};${radius * 3.2}`, dur: "1.6s", repeatCount: "indefinite" }),
+      /* @__PURE__ */ jsx13("animate", { attributeName: "fill-opacity", values: "0.35;0", dur: "1.6s", repeatCount: "indefinite" })
     ] }),
-    /* @__PURE__ */ jsx12("circle", { cx: x, cy: y, r: radius, strokeWidth: 2, style: { fill, stroke: VAR.bg } }),
-    label !== void 0 && /* @__PURE__ */ jsx12("text", { opacity: nearScrub(ctx, x) ? 0 : 1, x: lx, y: ly, textAnchor: anchor, fontSize: 11, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill }, children: label })
+    /* @__PURE__ */ jsx13("circle", { cx: x, cy: y, r: radius, strokeWidth: 2, style: { fill, stroke: VAR.bg } }),
+    label !== void 0 && /* @__PURE__ */ jsx13("text", { opacity: nearScrub(ctx, x) ? 0 : 1, x: lx, y: ly, textAnchor: anchor, fontSize: 11, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill }, children: label })
   ] });
 }
 
 // src/viz/period-selector.tsx
-import { useLayoutEffect, useRef as useRef5, useState as useState6 } from "react";
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useLayoutEffect, useRef as useRef6, useState as useState7 } from "react";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function LiveTabLabel({ label, color = "var(--fnv-live, #F04452)" }) {
   return /* @__PURE__ */ jsxs11("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
     /* @__PURE__ */ jsxs11("span", { "aria-hidden": "true", style: { position: "relative", width: 7, height: 7 }, children: [
-      /* @__PURE__ */ jsx13("span", { style: { position: "absolute", inset: 0, borderRadius: "50%", background: color } }),
-      /* @__PURE__ */ jsx13("svg", { width: "7", height: "7", viewBox: "0 0 7 7", style: { position: "absolute", inset: 0, overflow: "visible" }, children: /* @__PURE__ */ jsxs11("circle", { cx: "3.5", cy: "3.5", r: "3.5", style: { fill: color }, fillOpacity: 0.45, children: [
-        /* @__PURE__ */ jsx13("animate", { attributeName: "r", values: "3.5;8", dur: "1.6s", repeatCount: "indefinite" }),
-        /* @__PURE__ */ jsx13("animate", { attributeName: "fill-opacity", values: "0.45;0", dur: "1.6s", repeatCount: "indefinite" })
+      /* @__PURE__ */ jsx14("span", { style: { position: "absolute", inset: 0, borderRadius: "50%", background: color } }),
+      /* @__PURE__ */ jsx14("svg", { width: "7", height: "7", viewBox: "0 0 7 7", style: { position: "absolute", inset: 0, overflow: "visible" }, children: /* @__PURE__ */ jsxs11("circle", { cx: "3.5", cy: "3.5", r: "3.5", style: { fill: color }, fillOpacity: 0.45, children: [
+        /* @__PURE__ */ jsx14("animate", { attributeName: "r", values: "3.5;8", dur: "1.6s", repeatCount: "indefinite" }),
+        /* @__PURE__ */ jsx14("animate", { attributeName: "fill-opacity", values: "0.45;0", dur: "1.6s", repeatCount: "indefinite" })
       ] }) })
     ] }),
     label
@@ -1670,8 +1713,8 @@ function PeriodSelector({
 }) {
   const activeIsLive = periods.find((p) => p.id === value)?.live ?? false;
   const pillColor = activeIsLive ? liveColor : activeColor;
-  const listRef = useRef5(null);
-  const [pill, setPill] = useState6(null);
+  const listRef = useRef6(null);
+  const [pill, setPill] = useState7(null);
   useLayoutEffect(() => {
     const list = listRef.current;
     const active = list?.querySelector('[aria-selected="true"]');
@@ -1703,7 +1746,7 @@ function PeriodSelector({
       onKeyDown,
       style: { position: "relative", display: fullWidth ? "flex" : "inline-flex", gap: 2, fontFamily: VAR.font, ...style },
       children: [
-        pill && /* @__PURE__ */ jsx13(
+        pill && /* @__PURE__ */ jsx14(
           "span",
           {
             "aria-hidden": "true",
@@ -1722,7 +1765,7 @@ function PeriodSelector({
         ),
         periods.map((p) => {
           const active = p.id === value;
-          return /* @__PURE__ */ jsx13(
+          return /* @__PURE__ */ jsx14(
             "button",
             {
               type: "button",
@@ -1746,7 +1789,7 @@ function PeriodSelector({
                 fontWeight: active ? 700 : 500,
                 cursor: "pointer"
               },
-              children: p.live ? /* @__PURE__ */ jsx13(LiveTabLabel, { label: p.label, color: liveColor }) : p.label
+              children: p.live ? /* @__PURE__ */ jsx14(LiveTabLabel, { label: p.label, color: liveColor }) : p.label
             },
             p.id
           );
@@ -1758,12 +1801,12 @@ function PeriodSelector({
 
 // src/viz/charts.tsx
 import { percentages, seriesColor as seriesColor5 } from "@funnest/charts-viz";
-import { useState as useState7 } from "react";
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var axisProps2 = (v) => v ? v === true ? {} : v : null;
 var axisElements = (x, y) => [
-  y && /* @__PURE__ */ jsx14(YAxis, { ...y }, "y"),
-  x && /* @__PURE__ */ jsx14(XAxis, { ...x }, "x")
+  y && /* @__PURE__ */ jsx15(YAxis, { ...y }, "y"),
+  x && /* @__PURE__ */ jsx15(XAxis, { ...x }, "x")
 ];
 var defined = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => v !== void 0));
 var KR_SPLIT = { above: "#F04452", below: "#3182F6" };
@@ -1786,7 +1829,7 @@ function LineChart({
   const split = baseline !== void 0 ? splitColors ?? KR_SPLIT : void 0;
   return /* @__PURE__ */ jsxs12(CartesianChart, { enableScrubbing: !!sc, ...chart, children: [
     axisElements(axisProps2(showXAxis), axisProps2(showYAxis)),
-    chart.series.map((s) => /* @__PURE__ */ jsx14(
+    chart.series.map((s) => /* @__PURE__ */ jsx15(
       Line,
       {
         seriesId: s.id,
@@ -1796,7 +1839,7 @@ function LineChart({
       s.id
     )),
     children,
-    sc && /* @__PURE__ */ jsx14(
+    sc && /* @__PURE__ */ jsx15(
       Scrubber,
       {
         ...split && baseline !== void 0 ? { beaconColor: (v) => v >= baseline ? split.above : split.below } : {},
@@ -1826,7 +1869,7 @@ function AreaChart({
     axisElements(axisProps2(showXAxis), axisProps2(showYAxis)),
     chart.series.map((s) => {
       const own = s.areaStyle === "none" ? null : s.areaStyle ?? (chart.stacked && fill === "gradient" ? "solid" : fill);
-      return own ? /* @__PURE__ */ jsx14(
+      return own ? /* @__PURE__ */ jsx15(
         Area,
         {
           seriesId: s.id,
@@ -1837,16 +1880,16 @@ function AreaChart({
         `a${s.id}`
       ) : null;
     }),
-    showLines && chart.series.map((s) => /* @__PURE__ */ jsx14(Line, { seriesId: s.id, curve, strokeWidth, ...defined({ lineStyle, baseline, splitColors }) }, `l${s.id}`)),
+    showLines && chart.series.map((s) => /* @__PURE__ */ jsx15(Line, { seriesId: s.id, curve, strokeWidth, ...defined({ lineStyle, baseline, splitColors }) }, `l${s.id}`)),
     children,
-    sc && /* @__PURE__ */ jsx14(Scrubber, { ...sc })
+    sc && /* @__PURE__ */ jsx15(Scrubber, { ...sc })
   ] });
 }
 function BarChart({ showXAxis, showYAxis, scrubber, radius, getBarColor, groupGap, stackGap, roundBaseline, barMinSize, layout = "vertical", xAxis, children, ...chart }) {
   const sc = axisProps2(scrubber);
   if (layout === "horizontal") {
     const yAx = axisProps2(showYAxis);
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       HorizontalBarChart,
       {
         series: chart.series,
@@ -1875,9 +1918,9 @@ function BarChart({ showXAxis, showYAxis, scrubber, radius, getBarColor, groupGa
   }
   return /* @__PURE__ */ jsxs12(CartesianChart, { enableScrubbing: !!sc, xAxis: { ...xAxis, scaleType: "band" }, ...chart, children: [
     axisElements(axisProps2(showXAxis), axisProps2(showYAxis)),
-    /* @__PURE__ */ jsx14(BarPlot, { ...defined({ radius, getBarColor, groupGap, stackGap, roundBaseline, minSize: barMinSize }), highlightScrubbed: !!sc }),
+    /* @__PURE__ */ jsx15(BarPlot, { ...defined({ radius, getBarColor, groupGap, stackGap, roundBaseline, minSize: barMinSize }), highlightScrubbed: !!sc }),
     children,
-    sc && /* @__PURE__ */ jsx14(Scrubber, { ...sc })
+    sc && /* @__PURE__ */ jsx15(Scrubber, { ...sc })
   ] });
 }
 var pct = (_item, f) => `${formatNumber(Math.round(f * 1e3) / 10)}%`;
@@ -1913,8 +1956,8 @@ function PercentageBarChart({
         colorOf.set(d.id, d.color ?? seriesColor5(colorOf.size, palette));
         legendItems.push(d);
       }
-  const [hovered, setHovered] = useState7(null);
-  const [hoverRow, setHoverRow] = useState7(null);
+  const [hovered, setHovered] = useState8(null);
+  const [hoverRow, setHoverRow] = useState8(null);
   const rowSegs = allRows.map((r) => {
     const segs = percentages(r.data);
     return { row: r, items: r.data.map((d, i) => ({ ...d, color: colorOf.get(d.id), fraction: segs[i].fraction })) };
@@ -1922,7 +1965,7 @@ function PercentageBarChart({
   const renderBar = (items, rowId) => {
     const visible = items.filter((i) => i.fraction > 0);
     const ordered = vertical ? [...visible].reverse() : visible;
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       "div",
       {
         style: {
@@ -1934,7 +1977,7 @@ function PercentageBarChart({
         children: ordered.map((i, k) => {
           const a = k === 0 ? end : inner;
           const b = k === ordered.length - 1 ? end : inner;
-          return /* @__PURE__ */ jsx14(
+          return /* @__PURE__ */ jsx15(
             "span",
             {
               title: `${i.label} ${formatLabel(i, i.fraction)}`,
@@ -1963,7 +2006,7 @@ function PercentageBarChart({
     );
   };
   const legendRow = multi ? rowSegs.find((r) => r.row.id === hoverRow) : rowSegs[0];
-  const legend = showLabels && /* @__PURE__ */ jsx14(
+  const legend = showLabels && /* @__PURE__ */ jsx15(
     Legend,
     {
       style: legendAt === "top" ? { marginBottom: 10 } : legendAt === "bottom" ? { marginTop: 10 } : {},
@@ -1982,14 +2025,14 @@ function PercentageBarChart({
       onItemHover: setHovered
     }
   );
-  const label = (r) => multi && r.label ? /* @__PURE__ */ jsx14("span", { style: { fontSize: 12, color: hoverRow === r.id ? VAR.textStrong : VAR.text, fontWeight: hoverRow === r.id ? 700 : 500, whiteSpace: "nowrap" }, children: r.label }) : null;
-  const bars = vertical ? /* @__PURE__ */ jsx14("div", { style: { display: "flex", gap: 14, alignItems: "flex-end" }, children: rowSegs.map(({ row, items }) => /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }, children: [
+  const label = (r) => multi && r.label ? /* @__PURE__ */ jsx15("span", { style: { fontSize: 12, color: hoverRow === r.id ? VAR.textStrong : VAR.text, fontWeight: hoverRow === r.id ? 700 : 500, whiteSpace: "nowrap" }, children: r.label }) : null;
+  const bars = vertical ? /* @__PURE__ */ jsx15("div", { style: { display: "flex", gap: 14, alignItems: "flex-end" }, children: rowSegs.map(({ row, items }) => /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }, children: [
     renderBar(items, row.id),
     label(row)
-  ] }, row.id)) }) : multi ? /* @__PURE__ */ jsx14("div", { style: { display: "grid", gridTemplateColumns: "max-content 1fr", columnGap: 12, rowGap: 10, alignItems: "center", flex: legendAt === "right" ? 1 : void 0 }, children: rowSegs.map(({ row, items }) => /* @__PURE__ */ jsxs12("div", { style: { display: "contents" }, children: [
-    label(row) ?? /* @__PURE__ */ jsx14("span", {}),
+  ] }, row.id)) }) : multi ? /* @__PURE__ */ jsx15("div", { style: { display: "grid", gridTemplateColumns: "max-content 1fr", columnGap: 12, rowGap: 10, alignItems: "center", flex: legendAt === "right" ? 1 : void 0 }, children: rowSegs.map(({ row, items }) => /* @__PURE__ */ jsxs12("div", { style: { display: "contents" }, children: [
+    label(row) ?? /* @__PURE__ */ jsx15("span", {}),
     renderBar(items, row.id)
-  ] }, row.id)) }) : /* @__PURE__ */ jsx14("div", { style: { display: "flex", flex: legendAt === "right" ? 1 : void 0 }, children: renderBar(rowSegs[0].items, rowSegs[0].row.id) });
+  ] }, row.id)) }) : /* @__PURE__ */ jsx15("div", { style: { display: "flex", flex: legendAt === "right" ? 1 : void 0 }, children: renderBar(rowSegs[0].items, rowSegs[0].row.id) });
   return /* @__PURE__ */ jsxs12(
     "div",
     {
@@ -2017,6 +2060,7 @@ export {
   DonutChart,
   FnChart,
   FnChartSlot,
+  FnMultiChart,
   HorizontalBarChart,
   Legend,
   Line,
@@ -2033,5 +2077,6 @@ export {
   formatNumber,
   useCartesianChart,
   useChartEvent,
-  useFnChart
+  useFnChart,
+  useFnMultiChart
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-react",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "React bindings for Funnest Charts: the trading widget plus SVG line, area and bar charts",
   "keywords": [
     "react",
@@ -46,9 +46,9 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@funnest/charts-ui": "0.4.0",
-    "@funnest/charts": "0.4.0",
-    "@funnest/charts-viz": "0.4.0"
+    "@funnest/charts": "0.5.1",
+    "@funnest/charts-viz": "0.5.1",
+    "@funnest/charts-ui": "0.5.1"
   },
   "peerDependencies": {
     "react": ">=18",