@funnest/charts-react 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,851 @@
+// src/fn-chart.tsx
+import { createTradingChart } from "@funnest/charts-ui";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+var WidgetContext = createContext(null);
+var FnChart = forwardRef(function FnChart2(props, ref) {
+  const { className, style, onReady, children, ...options } = props;
+  const hostRef = useRef(null);
+  const [widget, setWidget] = useState(null);
+  const latest = useRef(options);
+  latest.current = options;
+  const readyRef = useRef(onReady);
+  readyRef.current = onReady;
+  useImperativeHandle(ref, () => widget, [widget]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const instance = createTradingChart(host, latest.current);
+    setWidget(instance);
+    readyRef.current?.(instance);
+    return () => {
+      setWidget(null);
+      instance.destroy();
+    };
+  }, [options.datafeed]);
+  const { symbol, resolution, locale, theme, colorScheme } = options;
+  useEffect(() => {
+    if (!widget) return;
+    const current = widget.chart.symbolInfo?.symbol;
+    const res = resolution ?? widget.chart.currentResolution ?? void 0;
+    if (current && (current !== symbol || resolution && resolution !== widget.chart.currentResolution)) {
+      void widget.setSymbol(symbol, res);
+    }
+  }, [widget, symbol, resolution]);
+  useEffect(() => {
+    if (widget && locale) widget.setLocale(locale);
+  }, [widget, locale]);
+  useEffect(() => {
+    if (widget && colorScheme) widget.setColorScheme(colorScheme);
+  }, [widget, colorScheme]);
+  const themeKey = JSON.stringify(theme ?? null);
+  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 }) });
+});
+function useFnChart() {
+  return useContext(WidgetContext);
+}
+function useChartEvent(event, handler) {
+  const widget = useFnChart();
+  const handlerRef = useRef(handler);
+  handlerRef.current = 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;
+}
+
+// src/viz/cartesian-chart.tsx
+import {
+  bandScale,
+  extent,
+  linearScale,
+  maxLength,
+  nearestIndex,
+  niceDomain,
+  seriesColor,
+  stack,
+  stackedExtent
+} from "@funnest/charts-viz";
+import {
+  Children,
+  isValidElement,
+  useCallback,
+  useEffect as useEffect2,
+  useId,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// src/viz/context.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var CartesianContext = createContext2(null);
+function useCartesianChart() {
+  const ctx = useContext2(CartesianContext);
+  if (!ctx) throw new Error("Funnest chart components must be rendered inside <CartesianChart> (or LineChart, AreaChart, BarChart).");
+  return ctx;
+}
+var VAR = {
+  text: "var(--fnv-text-muted, color-mix(in srgb, CanvasText 50%, Canvas))",
+  textStrong: "var(--fnv-text, CanvasText)",
+  grid: "var(--fnv-grid, color-mix(in srgb, CanvasText 9%, transparent))",
+  line: "var(--fnv-line, color-mix(in srgb, CanvasText 32%, transparent))",
+  bg: "var(--fnv-bg, Canvas)",
+  font: "var(--fnv-font, inherit)"
+};
+var numberFormat = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 });
+var compactFormat = new Intl.NumberFormat(void 0, { notation: "compact", maximumFractionDigits: 2 });
+var formatNumber = (v) => Math.abs(v) >= 1e5 ? compactFormat.format(v) : numberFormat.format(v);
+function seriesY(ctx, s, i) {
+  const stacked = ctx.stacked?.get(s.id);
+  if (stacked) {
+    const raw = s.data[i];
+    return raw === null || raw === void 0 ? null : ctx.y(stacked.y1[i]);
+  }
+  const v = s.data[i];
+  return v === null || v === void 0 || !Number.isFinite(v) ? null : ctx.y(v);
+}
+
+// src/viz/legend.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Legend({ items, onItemClick, onItemHover, shape = "circle", className, style }) {
+  const swatch = (color) => shape === "line" ? { width: 12, height: 3, borderRadius: 2, background: color } : { width: 8, height: 8, borderRadius: shape === "circle" ? "50%" : 2, background: color };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className,
+      role: onItemClick ? "group" : "list",
+      style: { display: "flex", flexWrap: "wrap", gap: "4px 14px", 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 })
+        ] });
+        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(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": !item.inactive,
+            onClick: () => onItemClick(item.id),
+            ...hover,
+            style: { ...itemStyle, border: 0, padding: 0, background: "none", color: "inherit", font: "inherit", cursor: "pointer" },
+            children: content
+          },
+          item.id
+        ) : /* @__PURE__ */ jsx2("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";
+var DEFAULT_HEIGHT = 240;
+function resolveInset(inset) {
+  const d = typeof inset === "number" ? inset : 8;
+  const o = typeof inset === "object" ? inset : {};
+  return { top: o.top ?? d, right: o.right ?? d, bottom: o.bottom ?? d, left: o.left ?? d };
+}
+function collectAxisSpace(children, acc) {
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const type = child.type;
+    const props = child.props;
+    if (typeof type === "function" || typeof type === "object") {
+      const space = type.axisSpace?.(props);
+      if (space) acc[space.side] = Math.max(acc[space.side], space.size);
+    }
+    if (props.children && !type.axisSpace) collectAxisSpace(props.children, acc);
+  });
+}
+function useElementWidth(fixed) {
+  const ref = useRef2(null);
+  const [width, setWidth] = useState2(fixed ?? 0);
+  useEffect2(() => {
+    if (fixed !== void 0) {
+      setWidth(fixed);
+      return;
+    }
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(([entry]) => {
+      if (entry) setWidth(Math.round(entry.contentRect.width));
+    });
+    ro.observe(el);
+    setWidth(Math.round(el.getBoundingClientRect().width));
+    return () => ro.disconnect();
+  }, [fixed]);
+  return [ref, width];
+}
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function CartesianChart({
+  series,
+  width: fixedWidth,
+  height = DEFAULT_HEIGHT,
+  inset,
+  xAxis,
+  yAxis,
+  stacked = false,
+  enableScrubbing = false,
+  onScrubberPositionChange,
+  animate = true,
+  legend = false,
+  legendValueFormatter,
+  palette,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  children
+}) {
+  const id = `fnv${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const [wrapRef, width] = useElementWidth(fixedWidth);
+  const [scrubIndex, setScrubIndex] = useState2(null);
+  const [motion, setMotion] = useState2(false);
+  useEffect2(() => setMotion(animate && !prefersReducedMotion()), [animate]);
+  const resolved = useMemo(
+    () => series.map((s, index) => ({ ...s, index, color: s.color ?? seriesColor(index, palette) })),
+    [series, palette]
+  );
+  const axisSpace = useMemo(() => {
+    const acc = { top: 0, right: 0, bottom: 0, left: 0 };
+    collectAxisSpace(children, acc);
+    return acc;
+  }, [children]);
+  const ctx = useMemo(() => {
+    const ins = resolveInset(inset);
+    const left = ins.left + axisSpace.left;
+    const top = ins.top + axisSpace.top;
+    const right = Math.max(left, width - ins.right - axisSpace.right);
+    const bottom = Math.max(top, height - ins.bottom - axisSpace.bottom);
+    const plot = { left, top, right, bottom, width: right - left, height: bottom - top };
+    const length = Math.max(maxLength(resolved), xAxis?.data?.length ?? 0);
+    const isBand = xAxis?.scaleType === "band";
+    const band = isBand ? bandScale(length, [left, right], xAxis?.bandPadding ?? 0.25) : null;
+    const xLinear = linearScale([0, Math.max(1, length - 1)], [left, right]);
+    const x = band ? (i) => band.center(i) : (i) => length <= 1 ? (left + right) / 2 : xLinear(i);
+    let stackedMap = null;
+    let [min, max] = extent(resolved) ?? [0, 1];
+    if (stacked) {
+      const st = stack(resolved);
+      stackedMap = new Map(st.map((s) => [s.id, s]));
+      [min, max] = stackedExtent(st);
+    }
+    if (yAxis?.includeZero ?? isBand) {
+      min = Math.min(min, 0);
+      max = Math.max(max, 0);
+    }
+    if (yAxis?.nice) [min, max] = niceDomain(min, max, Math.max(2, Math.round(plot.height / 50)));
+    if (yAxis?.domain?.min !== void 0) min = yAxis.domain.min;
+    if (yAxis?.domain?.max !== void 0) max = yAxis.domain.max;
+    const y = linearScale([min, max], [bottom, top]);
+    const xData = xAxis?.data;
+    const xLabel = (i) => {
+      const v = xData?.[i];
+      return v === void 0 ? String(i) : typeof v === "number" ? formatNumber(v) : v;
+    };
+    return {
+      id,
+      width,
+      height,
+      plot,
+      series: resolved,
+      getSeries: (sid) => resolved.find((s) => s.id === sid),
+      length,
+      x,
+      band,
+      y,
+      stacked: stackedMap,
+      xLabel,
+      xData,
+      scrubIndex,
+      animate: motion
+    };
+  }, [id, width, height, inset, axisSpace, resolved, xAxis, yAxis, stacked, scrubIndex, motion]);
+  const xsRef = useRef2([]);
+  xsRef.current = useMemo(() => Array.from({ length: ctx.length }, (_, i) => ctx.x(i)), [ctx.length, ctx.x]);
+  const updateScrub = useCallback(
+    (next) => {
+      setScrubIndex((prev) => {
+        if (prev !== next) onScrubberPositionChange?.(next);
+        return next;
+      });
+    },
+    [onScrubberPositionChange]
+  );
+  const onPointerMove = (e) => {
+    if (!enableScrubbing) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const px = e.clientX - rect.left;
+    const i = ctx.band ? ctx.band.invert(px) : nearestIndex(xsRef.current, px);
+    updateScrub(i < 0 ? null : i);
+  };
+  const onPointerLeave = () => enableScrubbing && updateScrub(null);
+  const legendPos = legend === true ? "top" : legend === false ? null : legend;
+  const legendEl = legendPos && /* @__PURE__ */ jsx3(
+    Legend,
+    {
+      items: resolved.map((s) => {
+        const v = scrubIndex === null ? null : s.data[scrubIndex];
+        return {
+          id: s.id,
+          label: s.label ?? s.id,
+          color: s.color,
+          value: v === null || v === void 0 ? void 0 : legendValueFormatter ? legendValueFormatter(v, s.id) : formatNumber(v)
+        };
+      })
+    }
+  );
+  return /* @__PURE__ */ jsxs2("div", { ref: wrapRef, className, style: { position: "relative", width: fixedWidth ?? "100%", ...style }, children: [
+    legendPos === "top" && legendEl,
+    /* @__PURE__ */ jsx3(
+      "svg",
+      {
+        width: width || "100%",
+        height,
+        role: "img",
+        "aria-label": ariaLabel,
+        style: { display: "block", overflow: "visible", touchAction: enableScrubbing ? "pan-y" : void 0, userSelect: "none" },
+        onPointerMove: enableScrubbing ? onPointerMove : void 0,
+        onPointerDown: enableScrubbing ? onPointerMove : void 0,
+        onPointerLeave: enableScrubbing ? onPointerLeave : void 0,
+        onPointerCancel: enableScrubbing ? onPointerLeave : void 0,
+        children: width > 0 && /* @__PURE__ */ jsx3(CartesianContext.Provider, { value: ctx, children })
+      }
+    ),
+    legendPos === "bottom" && legendEl
+  ] });
+}
+
+// src/viz/axes.tsx
+import { sampleIndices, ticks as niceTicks } from "@funnest/charts-viz";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function XAxis({
+  position = "bottom",
+  height = 24,
+  ticks,
+  tickLabelFormatter,
+  showLine = false,
+  showTickMarks = false,
+  showGrid = false,
+  minTickSpacing = 80
+}) {
+  const ctx = useCartesianChart();
+  const { plot } = ctx;
+  if (ctx.length === 0) return null;
+  const indices = ticks ?? sampleIndices(ctx.length, Math.max(1, Math.floor(plot.width / minTickSpacing)));
+  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 } }),
+    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 })
+      ] }, i);
+    })
+  ] });
+}
+XAxis.axisSpace = (p) => ({ side: p.position ?? "bottom", size: p.height ?? 24 });
+function YAxis({
+  position = "right",
+  width = 48,
+  ticks,
+  tickLabelFormatter = formatNumber,
+  showGrid = true,
+  showLine = false,
+  minTickSpacing = 32
+}) {
+  const ctx = useCartesianChart();
+  const { plot, y } = ctx;
+  const [d0, d1] = y.domain;
+  const values = (ticks ?? niceTicks(d0, d1, Math.max(2, Math.floor(plot.height / minTickSpacing)))).filter(
+    (v) => v >= Math.min(d0, d1) - 1e-9 && v <= Math.max(d0, d1) + 1e-9
+  );
+  const right = position === "right";
+  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))
+  ] });
+}
+YAxis.axisSpace = (p) => ({ side: p.position ?? "right", size: p.width ?? 48 });
+
+// src/viz/line.tsx
+import { areaPath, linePath, segments } from "@funnest/charts-viz";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function seriesRuns(ctx, s, connectNulls = false) {
+  const st = ctx.stacked?.get(s.id);
+  const top = (i, v) => ctx.y(st ? st.y1[i] : v);
+  const bottom = (i) => st ? ctx.y(st.y0[i]) : null;
+  const runs = connectNulls ? [{ start: 0, values: s.data.map((v, i) => v === null ? null : i).filter((i) => i !== null) }] : segments(s.data).map((r) => ({ start: r.start, values: r.values.map((_, k) => r.start + k) }));
+  return runs.filter((r) => r.values.length > 0).map((r) => {
+    const idx = r.values;
+    const upper = idx.map((i) => ({ x: ctx.x(i), y: top(i, s.data[i]) }));
+    const lower = st ? idx.map((i) => ({ x: ctx.x(i), y: bottom(i) })) : null;
+    return { upper, lower };
+  });
+}
+function baselineY(ctx) {
+  const [d0, d1] = ctx.y.domain;
+  const lo = Math.min(d0, d1);
+  const hi = Math.max(d0, d1);
+  return lo <= 0 && hi >= 0 ? ctx.y(0) : ctx.plot.bottom;
+}
+function Area({ seriesId, curve = "monotone", fill = "gradient", opacity, connectNulls }) {
+  const ctx = useCartesianChart();
+  const s = ctx.getSeries(seriesId);
+  if (!s) return null;
+  const gid = `${ctx.id}-area-${s.index}`;
+  const base = baselineY(ctx);
+  const alpha = opacity ?? (fill === "gradient" ? 0.24 : 0.16);
+  return /* @__PURE__ */ jsxs4("g", { children: [
+    fill === "gradient" && /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs4("linearGradient", { id: gid, x1: "0", y1: ctx.plot.top, x2: "0", y2: base, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx5("stop", { offset: "0", stopOpacity: alpha, style: { stopColor: s.color } }),
+      /* @__PURE__ */ jsx5("stop", { offset: "1", stopOpacity: 0, style: { stopColor: s.color } })
+    ] }) }),
+    seriesRuns(ctx, s, connectNulls).map((run, k) => /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: areaPath(run.upper, run.lower ?? base, curve),
+        fillOpacity: fill === "solid" ? alpha : void 0,
+        stroke: "none",
+        style: { fill: fill === "gradient" ? `url(#${gid})` : s.color },
+        children: ctx.animate && /* @__PURE__ */ jsx5("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.6s", fill: "freeze" })
+      },
+      k
+    ))
+  ] });
+}
+function Line({
+  seriesId,
+  curve = "monotone",
+  strokeWidth = 2,
+  dash,
+  connectNulls,
+  area = "none",
+  areaOpacity,
+  opacity
+}) {
+  const ctx = useCartesianChart();
+  const s = ctx.getSeries(seriesId);
+  if (!s) return null;
+  const drawIn = ctx.animate && !dash;
+  return /* @__PURE__ */ jsxs4("g", { children: [
+    area !== "none" && /* @__PURE__ */ jsx5(Area, { seriesId, curve, fill: area, connectNulls: connectNulls ?? false, ...areaOpacity === void 0 ? {} : { opacity: areaOpacity } }),
+    seriesRuns(ctx, s, connectNulls).map((run, k) => /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: linePath(run.upper, curve),
+        fill: "none",
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: dash ?? (drawIn ? "1" : void 0),
+        strokeOpacity: opacity,
+        pathLength: drawIn ? 1 : void 0,
+        style: { stroke: s.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" })
+      },
+      k
+    ))
+  ] });
+}
+
+// src/viz/bar.tsx
+import { barPath } from "@funnest/charts-viz";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function BarPlot({ seriesIds, radius = 3, groupGap = 2, getBarColor, highlightScrubbed = true }) {
+  const ctx = useCartesianChart();
+  const band = ctx.band;
+  if (!band) return null;
+  const list = seriesIds ? ctx.series.filter((s) => seriesIds.includes(s.id)) : ctx.series;
+  const groups = ctx.stacked ? 1 : Math.max(1, list.length);
+  const barW = Math.max(1, (band.bandwidth - groupGap * (groups - 1)) / groups);
+  const zero = ctx.y(Math.min(Math.max(0, Math.min(...ctx.y.domain)), Math.max(...ctx.y.domain)));
+  const dim = highlightScrubbed && ctx.scrubIndex !== null;
+  return /* @__PURE__ */ jsx6("g", { children: list.map((s, k) => {
+    const st = ctx.stacked?.get(s.id);
+    const offset = ctx.stacked ? 0 : k * (barW + groupGap);
+    const isTopOfStack = (i, v) => !ctx.stacked || !list.slice(k + 1).some((o) => {
+      const ov = o.data[i];
+      return ov !== null && ov !== void 0 && ov !== 0 && Math.sign(ov) === Math.sign(v);
+    });
+    return /* @__PURE__ */ jsx6("g", { children: s.data.map((v, i) => {
+      if (v === null || v === void 0 || !Number.isFinite(v)) return null;
+      const x = band(i) + offset;
+      const y0 = st ? ctx.y(st.y0[i]) : zero;
+      const y1 = st ? ctx.y(st.y1[i]) : ctx.y(v);
+      const color = getBarColor?.(v, i, s.id) ?? s.color;
+      return /* @__PURE__ */ jsx6(
+        "path",
+        {
+          d: barPath(x, barW, y0, y1, isTopOfStack(i, v) ? radius : 0),
+          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" })
+        },
+        i
+      );
+    }) }, s.id);
+  }) });
+}
+
+// src/viz/scrubber.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var TIP_FONT = 12;
+var textWidth = (t) => [...t].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? TIP_FONT : TIP_FONT * 0.6), 0);
+function Scrubber({ label, seriesIds, dimFuture = true, showValues = false, valueFormatter = formatNumber }) {
+  const ctx = useCartesianChart();
+  const i = ctx.scrubIndex;
+  if (i === null || i >= ctx.length) return null;
+  const { plot } = ctx;
+  const x = ctx.x(i);
+  const text = label ? label(i) : ctx.xLabel(i);
+  const list = seriesIds ? ctx.series.filter((s) => seriesIds.includes(s.id)) : ctx.series;
+  const textX = Math.min(Math.max(x, plot.left + 30), plot.right - 30);
+  const rows = showValues ? list.flatMap((s) => {
+    const v = s.data[i];
+    return v === null || v === void 0 || !Number.isFinite(v) ? [] : [{ s, text: valueFormatter(v, s.id) }];
+  }) : [];
+  const tipW = Math.max(0, ...rows.map((r) => textWidth(r.text) + (rows.length > 1 || r.s.label ? textWidth(r.s.label ?? "") + 26 : 18))) + 12;
+  const tipH = rows.length * 18 + 10;
+  const tipRight = x + 12 + tipW <= plot.right;
+  const tipX = tipRight ? x + 12 : x - 12 - tipW;
+  const tipY = plot.top + 4;
+  return /* @__PURE__ */ jsxs5("g", { pointerEvents: "none", children: [
+    dimFuture && !ctx.band && /* @__PURE__ */ jsx7("rect", { x, y: plot.top, width: Math.max(0, plot.right - x + 2), height: plot.height, fillOpacity: 0.55, style: { fill: VAR.bg } }),
+    /* @__PURE__ */ jsx7("line", { x1: x, x2: x, y1: plot.top, y2: plot.bottom, strokeWidth: 1, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
+    text && /* @__PURE__ */ jsx7("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;
+      return /* @__PURE__ */ jsxs5("g", { children: [
+        /* @__PURE__ */ jsx7("circle", { cx: x, cy: y, r: 7, fillOpacity: 0.18, style: { fill: s.color } }),
+        /* @__PURE__ */ jsx7("circle", { cx: x, cy: y, r: 4, strokeWidth: 2, style: { fill: s.color, stroke: VAR.bg } })
+      ] }, s.id);
+    }),
+    rows.length > 0 && /* @__PURE__ */ jsxs5("g", { transform: `translate(${tipX},${tipY})`, children: [
+      /* @__PURE__ */ jsx7("rect", { width: tipW, height: tipH, rx: 8, style: { fill: VAR.bg, stroke: VAR.grid }, strokeWidth: 1 }),
+      rows.map((r, k) => /* @__PURE__ */ jsxs5("g", { transform: `translate(8,${14 + k * 18})`, children: [
+        /* @__PURE__ */ jsx7("circle", { cx: 3, cy: -4, r: 3, style: { fill: r.s.color } }),
+        (rows.length > 1 || r.s.label) && /* @__PURE__ */ jsx7("text", { x: 12, fontSize: TIP_FONT, style: { fill: VAR.text }, children: r.s.label ?? r.s.id }),
+        /* @__PURE__ */ jsx7("text", { x: tipW - 16, textAnchor: "end", 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 jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function ReferenceLine({ dataY, dataX, label, labelPosition, color = VAR.line, dash = "4 4", strokeWidth = 1 }) {
+  const ctx = useCartesianChart();
+  const { plot } = ctx;
+  if (dataY !== void 0) {
+    const y = ctx.y(dataY);
+    if (y < plot.top - 0.5 || y > plot.bottom + 0.5) return null;
+    const pos = labelPosition ?? "right";
+    const tx = pos === "left" ? plot.left + 4 : pos === "center" ? (plot.left + plot.right) / 2 : plot.right - 4;
+    const anchor = pos === "left" ? "start" : pos === "center" ? "middle" : "end";
+    return /* @__PURE__ */ jsxs6("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx8("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__ */ jsx8("text", { x: tx, y: y - 5, textAnchor: anchor, fontSize: 11, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill: color === VAR.line ? VAR.text : color }, children: label })
+    ] });
+  }
+  if (dataX !== void 0) {
+    const x = ctx.x(dataX);
+    const pos = labelPosition ?? "top";
+    return /* @__PURE__ */ jsxs6("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx8("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__ */ jsx8(
+        "text",
+        {
+          x: x + 4,
+          y: pos === "bottom" ? plot.bottom - 4 : plot.top + 11,
+          fontSize: 11,
+          fontWeight: 600,
+          strokeWidth: 3,
+          strokeLinejoin: "round",
+          paintOrder: "stroke",
+          style: { stroke: VAR.bg, fill: color === VAR.line ? VAR.text : color },
+          children: label
+        }
+      )
+    ] });
+  }
+  return null;
+}
+function Point({ dataX, dataY, seriesId, color, radius = 4, label, labelPosition = "top", pulse = false, onClick }) {
+  const ctx = useCartesianChart();
+  const s = seriesId ? ctx.getSeries(seriesId) : void 0;
+  const value = dataY ?? (s ? s.data[dataX] : void 0);
+  if (value === null || value === void 0 || !Number.isFinite(value)) return null;
+  const st = s ? ctx.stacked?.get(s.id) : void 0;
+  const x = ctx.x(dataX);
+  const y = ctx.y(st && dataY === void 0 ? st.y1[dataX] : value);
+  const fill = color ?? s?.color ?? ctx.series[0]?.color ?? "currentColor";
+  const gap = radius + 6;
+  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__ */ jsxs6("g", { style: onClick ? { cursor: "pointer" } : void 0, onClick, pointerEvents: onClick ? "auto" : "none", children: [
+    pulse && /* @__PURE__ */ jsxs6("circle", { cx: x, cy: y, r: radius, fillOpacity: 0.35, style: { fill }, children: [
+      /* @__PURE__ */ jsx8("animate", { attributeName: "r", values: `${radius};${radius * 3.2}`, dur: "1.6s", repeatCount: "indefinite" }),
+      /* @__PURE__ */ jsx8("animate", { attributeName: "fill-opacity", values: "0.35;0", dur: "1.6s", repeatCount: "indefinite" })
+    ] }),
+    /* @__PURE__ */ jsx8("circle", { cx: x, cy: y, r: radius, strokeWidth: 2, style: { fill, stroke: VAR.bg } }),
+    label !== void 0 && /* @__PURE__ */ jsx8("text", { 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 useRef3, useState as useState3 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var DEFAULT_PERIODS = [
+  { id: "1D", label: "1\uC77C" },
+  { id: "1W", label: "1\uC8FC" },
+  { id: "1M", label: "1\uAC1C\uC6D4" },
+  { id: "3M", label: "3\uAC1C\uC6D4" },
+  { id: "1Y", label: "1\uB144" },
+  { id: "ALL", label: "\uC804\uCCB4" }
+];
+function PeriodSelector({
+  periods = DEFAULT_PERIODS,
+  value,
+  onChange,
+  activeColor = "var(--fnv-accent, #6C4DFF)",
+  fullWidth = false,
+  className,
+  style,
+  "aria-label": ariaLabel = "Period"
+}) {
+  const listRef = useRef3(null);
+  const [pill, setPill] = useState3(null);
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    const active = list?.querySelector('[aria-selected="true"]');
+    if (!list || !active) return setPill(null);
+    const measure = () => setPill({ left: active.offsetLeft, width: active.offsetWidth });
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(list);
+    return () => ro.disconnect();
+  }, [value, periods]);
+  const onKeyDown = (e) => {
+    const i = periods.findIndex((p2) => p2.id === value);
+    const next = e.key === "ArrowRight" ? i + 1 : e.key === "ArrowLeft" ? i - 1 : null;
+    if (next === null) return;
+    e.preventDefault();
+    const p = periods[(next + periods.length) % periods.length];
+    if (!p) return;
+    onChange(p.id);
+    listRef.current?.querySelector(`[data-period="${CSS.escape(p.id)}"]`)?.focus();
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      ref: listRef,
+      role: "tablist",
+      "aria-label": ariaLabel,
+      className,
+      onKeyDown,
+      style: { position: "relative", display: fullWidth ? "flex" : "inline-flex", gap: 2, fontFamily: VAR.font, ...style },
+      children: [
+        pill && /* @__PURE__ */ jsx9(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: pill.left,
+              width: pill.width,
+              borderRadius: 999,
+              background: activeColor,
+              opacity: 0.12,
+              transition: "left 0.2s ease, width 0.2s ease"
+            }
+          }
+        ),
+        periods.map((p) => {
+          const active = p.id === value;
+          return /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "data-period": p.id,
+              "aria-selected": active,
+              tabIndex: active ? 0 : -1,
+              onClick: () => onChange(p.id),
+              style: {
+                position: "relative",
+                flex: fullWidth ? 1 : "none",
+                minWidth: 44,
+                height: 32,
+                padding: "0 12px",
+                border: 0,
+                borderRadius: 999,
+                background: "transparent",
+                color: active ? activeColor : VAR.text,
+                font: "inherit",
+                fontSize: 13,
+                fontWeight: active ? 700 : 500,
+                cursor: "pointer"
+              },
+              children: p.label
+            },
+            p.id
+          );
+        })
+      ]
+    }
+  );
+}
+
+// src/viz/charts.tsx
+import { percentages, seriesColor as seriesColor2 } from "@funnest/charts-viz";
+import { useState as useState4 } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var axisProps = (v) => v ? v === true ? {} : v : null;
+var axisElements = (x, y) => [
+  y && /* @__PURE__ */ jsx10(YAxis, { ...y }, "y"),
+  x && /* @__PURE__ */ jsx10(XAxis, { ...x }, "x")
+];
+function LineChart({ showXAxis, showYAxis, scrubber, curve, strokeWidth, area, connectNulls, children, ...chart }) {
+  const sc = axisProps(scrubber);
+  return /* @__PURE__ */ jsxs8(CartesianChart, { enableScrubbing: !!sc, ...chart, children: [
+    axisElements(axisProps(showXAxis), axisProps(showYAxis)),
+    chart.series.map((s) => /* @__PURE__ */ jsx10(
+      Line,
+      {
+        seriesId: s.id,
+        ...curve ? { curve } : {},
+        ...strokeWidth ? { strokeWidth } : {},
+        ...area ? { area } : {},
+        ...connectNulls ? { connectNulls } : {}
+      },
+      s.id
+    )),
+    children,
+    sc && /* @__PURE__ */ jsx10(Scrubber, { ...sc })
+  ] });
+}
+function AreaChart({ showXAxis, showYAxis, scrubber, curve = "monotone", fill = "gradient", showLines = true, strokeWidth = 2, children, ...chart }) {
+  const sc = axisProps(scrubber);
+  return /* @__PURE__ */ jsxs8(CartesianChart, { enableScrubbing: !!sc, ...chart, children: [
+    axisElements(axisProps(showXAxis), axisProps(showYAxis)),
+    chart.series.map((s) => /* @__PURE__ */ jsx10(Area, { seriesId: s.id, curve, fill: chart.stacked ? "solid" : fill, ...chart.stacked ? { opacity: 0.55 } : {} }, `a${s.id}`)),
+    showLines && chart.series.map((s) => /* @__PURE__ */ jsx10(Line, { seriesId: s.id, curve, strokeWidth }, `l${s.id}`)),
+    children,
+    sc && /* @__PURE__ */ jsx10(Scrubber, { ...sc })
+  ] });
+}
+function BarChart({ showXAxis, showYAxis, scrubber, radius, getBarColor, groupGap, xAxis, children, ...chart }) {
+  const sc = axisProps(scrubber);
+  return /* @__PURE__ */ jsxs8(CartesianChart, { enableScrubbing: !!sc, xAxis: { ...xAxis, scaleType: "band" }, ...chart, children: [
+    axisElements(axisProps(showXAxis), axisProps(showYAxis)),
+    /* @__PURE__ */ jsx10(
+      BarPlot,
+      {
+        ...radius === void 0 ? {} : { radius },
+        ...getBarColor ? { getBarColor } : {},
+        ...groupGap === void 0 ? {} : { groupGap },
+        highlightScrubbed: !!sc
+      }
+    ),
+    children,
+    sc && /* @__PURE__ */ jsx10(Scrubber, { ...sc })
+  ] });
+}
+function PercentageBarChart({
+  data,
+  barHeight = 10,
+  gap = 2,
+  showLabels = true,
+  formatLabel = (_item, f) => `${formatNumber(Math.round(f * 1e3) / 10)}%`,
+  palette,
+  className,
+  style,
+  "aria-label": ariaLabel
+}) {
+  const segs = percentages(data);
+  const items = data.map((d, i) => ({ ...d, color: d.color ?? seriesColor2(i, palette), fraction: segs[i].fraction }));
+  const visible = items.filter((i) => i.fraction > 0);
+  const [hovered, setHovered] = useState4(null);
+  return /* @__PURE__ */ jsxs8("div", { className, style: { fontFamily: VAR.font, ...style }, role: "img", "aria-label": ariaLabel ?? items.map((i) => `${i.label} ${formatLabel(i, i.fraction)}`).join(", "), children: [
+    /* @__PURE__ */ jsx10("div", { style: { display: "flex", gap, height: barHeight }, children: visible.map((i, k) => /* @__PURE__ */ jsx10(
+      "span",
+      {
+        title: `${i.label} ${formatLabel(i, i.fraction)}`,
+        onPointerEnter: () => setHovered(i.id),
+        onPointerLeave: () => setHovered(null),
+        style: {
+          opacity: hovered && hovered !== i.id ? 0.3 : 1,
+          flex: `${i.fraction} 1 0`,
+          minWidth: 2,
+          background: i.color,
+          borderRadius: `${k === 0 ? barHeight / 2 : 2}px ${k === visible.length - 1 ? barHeight / 2 : 2}px ${k === visible.length - 1 ? barHeight / 2 : 2}px ${k === 0 ? barHeight / 2 : 2}px`,
+          transition: "flex-grow 0.4s ease, opacity 0.15s",
+          cursor: "default"
+        }
+      },
+      i.id
+    )) }),
+    showLabels && /* @__PURE__ */ jsx10(
+      Legend,
+      {
+        style: { marginTop: 8 },
+        items: items.map((i) => ({ id: i.id, label: i.label, color: i.color, value: formatLabel(i, i.fraction), inactive: !!hovered && hovered !== i.id })),
+        onItemHover: setHovered
+      }
+    )
+  ] });
+}
+export {
+  Area,
+  AreaChart,
+  BarChart,
+  BarPlot,
+  CartesianChart,
+  DEFAULT_PERIODS,
+  FnChart,
+  FnChartSlot,
+  Legend,
+  Line,
+  LineChart,
+  PercentageBarChart,
+  PeriodSelector,
+  Point,
+  ReferenceLine,
+  Scrubber,
+  XAxis,
+  YAxis,
+  formatNumber,
+  useCartesianChart,
+  useChartEvent,
+  useFnChart
+};