@funnest/charts-react 0.1.1 → 0.2.1

package/dist/index.js

@@ -72,6 +72,7 @@ import {
   bandScale,
   extent,
   linearScale,
+  logScale,
   maxLength,
   nearestIndex,
   niceDomain,
@@ -92,6 +93,7 @@ import {
 
 // src/viz/context.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
+var nearScrub = (ctx, x, within = 56) => ctx.scrubIndex !== null && Math.abs(ctx.x(ctx.scrubIndex) - x) < within;
 var CartesianContext = createContext2(null);
 function useCartesianChart() {
   const ctx = useContext2(CartesianContext);
@@ -104,8 +106,11 @@ var VAR = {
   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)"
+  font: "var(--fnv-font, inherit)",
+  accentRing: "color-mix(in srgb, var(--fnv-accent, #6C4DFF) 55%, transparent)"
 };
+var DIM_OPACITY = 0.22;
+var dashFor = (style, width) => style === "dashed" ? `${width * 3} ${width * 2.5}` : style === "dotted" ? `0.1 ${width * 2.6}` : void 0;
 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);
@@ -113,22 +118,36 @@ 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]);
+    return raw === null || raw === void 0 ? null : s.scale(stacked.y1[i]);
   }
   const v = s.data[i];
-  return v === null || v === void 0 || !Number.isFinite(v) ? null : ctx.y(v);
+  return v === null || v === void 0 || !Number.isFinite(v) ? null : s.scale(v);
 }
+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";
-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 };
+function Legend({ items, onItemClick, onItemHover, shape = "circle", direction = "row", justify = "flex-start", className, style }) {
+  const swatch = (color) => {
+    switch (shape) {
+      case "line":
+        return { width: 12, height: 3, borderRadius: 2, background: color };
+      case "pill":
+        return { width: 14, height: 6, borderRadius: 3, background: color };
+      case "square":
+        return { width: 8, height: 8, borderRadius: 1, background: color };
+      case "squircle":
+        return { width: 9, height: 9, borderRadius: 3, background: color };
+      default:
+        return { width: 8, height: 8, borderRadius: "50%", 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 },
+      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) } }),
@@ -157,6 +176,7 @@ function Legend({ items, onItemClick, onItemHover, shape = "circle", className,
 // src/viz/cartesian-chart.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var DEFAULT_HEIGHT = 240;
+var DEFAULT_AXIS = "default";
 function resolveInset(inset) {
   const d = typeof inset === "number" ? inset : 8;
   const o = typeof inset === "object" ? inset : {};
@@ -196,6 +216,7 @@ function useElementWidth(fixed) {
 function prefersReducedMotion() {
   return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
 }
+var normalizeLegend = (legend) => legend === true ? { position: "top" } : legend === false || legend === void 0 ? null : typeof legend === "string" ? { position: legend } : legend;
 function CartesianChart({
   series,
   width: fixedWidth,
@@ -206,9 +227,11 @@ function CartesianChart({
   stacked = false,
   enableScrubbing = false,
   onScrubberPositionChange,
+  getScrubberAccessibilityLabel,
   animate = true,
   legend = false,
   legendValueFormatter,
+  emptyState,
   palette,
   className,
   style,
@@ -218,11 +241,30 @@ 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 resolved = useMemo(
-    () => series.map((s, index) => ({ ...s, index, color: s.color ?? seriesColor(index, palette) })),
-    [series, palette]
+  const legendCfg = normalizeLegend(legend);
+  const axes = useMemo(() => {
+    const list = Array.isArray(yAxis) ? yAxis : [yAxis ?? {}];
+    return (list.length ? list : [{}]).map((a, i) => ({ ...a, id: a.id ?? (i === 0 ? DEFAULT_AXIS : `axis${i}`) }));
+  }, [yAxis]);
+  const firstAxis = axes[0].id;
+  const all = useMemo(
+    () => series.map((s, index) => {
+      const hasRange = s.data.some((v) => Array.isArray(v));
+      const high = s.data.map((v) => Array.isArray(v) ? Math.max(v[0], v[1]) : v);
+      const low = hasRange ? s.data.map((v) => Array.isArray(v) ? Math.min(v[0], v[1]) : v) : null;
+      return { ...s, data: high, low, index, color: s.color ?? seriesColor(index, palette), dimmed: false, axisId: s.yAxisId ?? firstAxis };
+    }),
+    [series, palette, firstAxis]
+  );
+  const visible = useMemo(
+    () => all.filter((s) => !hidden.includes(s.id)).map((s) => ({ ...s, dimmed: emphasis !== null && emphasis !== s.id })),
+    [all, hidden, emphasis]
   );
   const axisSpace = useMemo(() => {
     const acc = { top: 0, right: 0, bottom: 0, left: 0 };
@@ -236,26 +278,33 @@ function CartesianChart({
     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 length = Math.max(maxLength(all), 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);
+    let stackedMap = stacked ? /* @__PURE__ */ new Map() : null;
+    const yScales = {};
+    for (const axis of axes) {
+      const on = all.filter((s) => s.axisId === axis.id);
+      let [min, max] = extent([...on, ...on.flatMap((s) => s.low ? [{ id: `${s.id}~low`, data: s.low }] : [])]) ?? [0, 1];
+      if (stacked) {
+        for (const st of stack(visible.filter((s) => s.axisId === axis.id))) stackedMap.set(st.id, st);
+        if (on.length) [min, max] = stackedExtent(stack(on));
+      }
+      const log = axis.scaleType === "log";
+      if (!log && (axis.includeZero ?? isBand)) {
+        min = Math.min(min, 0);
+        max = Math.max(max, 0);
+      }
+      if (axis.nice && !log) [min, max] = niceDomain(min, max, Math.max(2, Math.round(plot.height / 50)));
+      if (axis.domain?.min !== void 0) min = axis.domain.min;
+      if (axis.domain?.max !== void 0) max = axis.domain.max;
+      yScales[axis.id] = log ? logScale([Math.max(min, Number.MIN_VALUE), max], [bottom, top]) : linearScale([min, max], [bottom, top]);
     }
-    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]);
+    if (stackedMap && stackedMap.size === 0) stackedMap = null;
+    const y = yScales[firstAxis];
+    const resolved = visible.map(({ axisId, ...s }) => ({ ...s, scale: yScales[axisId] ?? y }));
     const xData = xAxis?.data;
     const xLabel = (i) => {
       const v = xData?.[i];
@@ -272,13 +321,17 @@ function CartesianChart({
       x,
       band,
       y,
+      yScales,
       stacked: stackedMap,
       xLabel,
       xData,
       scrubIndex,
-      animate: motion
+      focused,
+      animate: motion,
+      futureMask: dimFuture && !band && scrubIndex !== null && scrubIndex < length ? `url(#${id}-future)` : void 0,
+      setDimFuture
     };
-  }, [id, width, height, inset, axisSpace, resolved, xAxis, yAxis, stacked, scrubIndex, motion]);
+  }, [id, width, height, inset, axisSpace, all, visible, axes, firstAxis, xAxis, stacked, scrubIndex, focused, motion, dimFuture]);
   const xsRef = useRef2([]);
   xsRef.current = useMemo(() => Array.from({ length: ctx.length }, (_, i) => ctx.x(i)), [ctx.length, ctx.x]);
   const updateScrub = useCallback(
@@ -291,51 +344,116 @@ function CartesianChart({
     [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(
+  const onPointerLeave = () => {
+    if (!focused) updateScrub(null);
+  };
+  const onKeyDown = (e) => {
+    const last = ctx.length - 1;
+    if (last < 0) return;
+    const step = e.shiftKey ? 10 : 1;
+    const cur = scrubIndex ?? last;
+    let next;
+    if (e.key === "ArrowLeft") next = Math.max(0, (scrubIndex === null ? last + 1 : cur) - step);
+    else if (e.key === "ArrowRight") next = Math.min(last, (scrubIndex === null ? -1 : cur) + step);
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = last;
+    else if (e.key === "Escape") next = null;
+    if (next === void 0) return;
+    e.preventDefault();
+    updateScrub(next);
+  };
+  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(
     Legend,
     {
-      items: resolved.map((s) => {
+      direction: legendCfg.position === "left" || legendCfg.position === "right" ? "column" : "row",
+      ...legendCfg.shape ? { shape: legendCfg.shape } : {},
+      items: all.map((s) => {
         const v = scrubIndex === null ? null : s.data[scrubIndex];
         return {
           id: s.id,
           label: s.label ?? s.id,
           color: s.color,
+          inactive: hidden.includes(s.id) || emphasis !== null && emphasis !== s.id,
           value: v === null || v === void 0 ? void 0 : legendValueFormatter ? legendValueFormatter(v, s.id) : formatNumber(v)
         };
-      })
+      }),
+      ...legendCfg.interactive ? {
+        onItemClick: (sid) => setHidden((h) => h.includes(sid) ? h.filter((x) => x !== sid) : [...h, sid]),
+        onItemHover: (sid) => setEmphasis(sid && !hidden.includes(sid) ? sid : null)
+      } : {}
+    }
+  );
+  const side = legendCfg?.position === "left" || legendCfg?.position === "right";
+  const svg = /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width: width || "100%",
+      height,
+      role: "img",
+      "aria-label": ariaLabel,
+      tabIndex: enableScrubbing && hasData ? 0 : void 0,
+      style: {
+        display: "block",
+        overflow: "visible",
+        touchAction: enableScrubbing ? "pan-y" : void 0,
+        userSelect: "none",
+        outline: "none",
+        borderRadius: 6,
+        boxShadow: focused ? `0 0 0 2px ${VAR.accentRing}` : void 0
+      },
+      onPointerMove: enableScrubbing ? onPointerMove : void 0,
+      onPointerDown: enableScrubbing ? onPointerMove : void 0,
+      onPointerLeave: enableScrubbing ? onPointerLeave : void 0,
+      onPointerCancel: enableScrubbing ? onPointerLeave : void 0,
+      onKeyDown: enableScrubbing ? onKeyDown : void 0,
+      onFocus: enableScrubbing ? () => setFocused(true) : void 0,
+      onBlur: enableScrubbing ? () => {
+        setFocused(false);
+        updateScrub(null);
+      } : void 0,
+      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 })
+        ] }),
+        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 })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: wrapRef,
+      className,
+      style: {
+        position: "relative",
+        width: fixedWidth ?? "100%",
+        ...side ? { display: "flex", alignItems: "center", gap: 16, flexDirection: legendCfg?.position === "left" ? "row-reverse" : "row" } : {},
+        ...style
+      },
+      children: [
+        legendCfg?.position === "top" || legendCfg && !legendCfg.position ? legendEl : null,
+        side ? /* @__PURE__ */ jsx3("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) : "" })
+      ]
     }
   );
-  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 { logTicks, sampleIndices, ticks as niceTicks } from "@funnest/charts-viz";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function XAxis({
   position = "bottom",
@@ -373,14 +491,17 @@ function YAxis({
   width = 48,
   ticks,
   tickLabelFormatter = formatNumber,
+  axisId,
   showGrid = true,
   showLine = false,
   minTickSpacing = 32
 }) {
   const ctx = useCartesianChart();
-  const { plot, y } = ctx;
+  const { plot } = ctx;
+  const y = scaleFor(ctx, axisId);
   const [d0, d1] = y.domain;
-  const values = (ticks ?? niceTicks(d0, d1, Math.max(2, Math.floor(plot.height / minTickSpacing)))).filter(
+  const count = Math.max(2, Math.floor(plot.height / minTickSpacing));
+  const values = (ticks ?? (y.kind === "log" ? logTicks(d0, d1, count) : niceTicks(d0, d1, count))).filter(
     (v) => v >= Math.min(d0, d1) - 1e-9 && v <= Math.max(d0, d1) + 1e-9
   );
   const right = position === "right";
@@ -396,114 +517,230 @@ 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";
+import { Fragment as Fragment2, 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 y = s.scale;
+  const top = (i, v) => y(st ? st.y1[i] : v);
+  const bottom = (i) => st ? y(st.y0[i]) : s.low ? y(s.low[i] ?? s.data[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;
+    const lower = st || s.low ? idx.map((i) => ({ x: ctx.x(i), y: bottom(i) })) : null;
     return { upper, lower };
   });
 }
-function baselineY(ctx) {
-  const [d0, d1] = ctx.y.domain;
+function baselineY(ctx, scale, baseline) {
+  const { top, bottom } = ctx.plot;
+  if (baseline !== void 0) return Math.min(bottom, Math.max(top, scale(baseline)));
+  const [d0, d1] = scale.domain;
   const lo = Math.min(d0, d1);
   const hi = Math.max(d0, d1);
-  return lo <= 0 && hi >= 0 ? ctx.y(0) : ctx.plot.bottom;
+  return scale.kind === "linear" && lo <= 0 && hi >= 0 ? scale(0) : bottom;
+}
+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) }) })
+  ] });
 }
-function Area({ seriesId, curve = "monotone", fill = "gradient", opacity, connectNulls }) {
+function Area({ seriesId, curve = "monotone", fill = "gradient", opacity, connectNulls, baseline, splitColors, gradientStops }) {
   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
-    ))
-  ] });
+  const base = baselineY(ctx, s.scale, baseline);
+  const alpha = opacity ?? (fill === "gradient" ? 0.24 : fill === "dotted" ? 0.5 : 0.16);
+  const runs = seriesRuns(ctx, s, connectNulls);
+  const dim = s.dimmed ? DIM_OPACITY : 1;
+  const paint = (key, color, from, clip) => {
+    const fillId = `${gid}-paint-${key}`;
+    const stops = gradientStops ?? [
+      { offset: 0, opacity: alpha },
+      { offset: 1, opacity: 0 }
+    ];
+    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 } }) })
+      ] }),
+      runs.map((run, k) => /* @__PURE__ */ jsx5(
+        "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" })
+        },
+        k
+      ))
+    ] }, key);
+  };
+  if (splitColors && baseline !== void 0 && !run0IsStacked(ctx, s)) {
+    return /* @__PURE__ */ jsxs4("g", { mask: ctx.futureMask, children: [
+      /* @__PURE__ */ jsx5(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) });
 }
+var run0IsStacked = (ctx, s) => !!ctx.stacked?.get(s.id);
 function Line({
   seriesId,
   curve = "monotone",
   strokeWidth = 2,
+  lineStyle,
   dash,
   connectNulls,
   area = "none",
   areaOpacity,
-  opacity
+  opacity,
+  points,
+  baseline,
+  splitColors
 }) {
   const ctx = useCartesianChart();
   const s = ctx.getSeries(seriesId);
   if (!s) return null;
-  const drawIn = ctx.animate && !dash;
+  const style = lineStyle ?? s.lineStyle ?? "solid";
+  const dashArray = dash ?? dashFor(style, strokeWidth);
+  const drawIn = ctx.animate && !dashArray;
+  const runs = seriesRuns(ctx, s, connectNulls);
+  const split = splitColors && baseline !== void 0;
+  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(
+    "path",
+    {
+      d: linePath(run.upper, curve),
+      fill: "none",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeDasharray: dashArray ?? (drawIn ? "1" : void 0),
+      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" })
+    },
+    k
+  )) });
+  const dots = [];
+  if (points) {
+    const st = ctx.stacked?.get(s.id);
+    s.data.forEach((v, i) => {
+      if (v === null || v === void 0 || !Number.isFinite(v)) return;
+      const spec = points === true ? true : points(i, v);
+      if (!spec) return;
+      const p = spec === true ? {} : spec;
+      const x = ctx.x(i);
+      const y = s.scale(st ? st.y1[i] : v);
+      const color = p.color ?? (split ? v >= baseline ? splitColors.above : splitColors.below : s.color);
+      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(
+            "text",
+            {
+              opacity: nearScrub(ctx, x) ? 0 : 1,
+              x,
+              y: p.labelPosition === "bottom" ? y + r + 13 : y - r - 6,
+              textAnchor: "middle",
+              fontSize: 11,
+              fontWeight: 600,
+              strokeWidth: 3,
+              strokeLinejoin: "round",
+              paintOrder: "stroke",
+              style: { fill: color, stroke: VAR.bg },
+              children: p.label
+            }
+          )
+        ] }, i)
+      );
+    });
+  }
   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",
+    area !== "none" && /* @__PURE__ */ jsx5(
+      Area,
       {
-        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
-    ))
+        seriesId,
+        curve,
+        fill: area,
+        connectNulls: connectNulls ?? false,
+        ...areaOpacity === void 0 ? {} : { opacity: areaOpacity },
+        ...baseline === void 0 ? {} : { baseline },
+        ...splitColors ? { splitColors } : {}
+      }
+    ),
+    split ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(SplitClips, { id: gid, y: baseY, ctx }),
+      strokes(splitColors.above, `${gid}-above`),
+      strokes(splitColors.below, `${gid}-below`)
+    ] }) : strokes(s.color),
+    dots
   ] });
 }
 
 // 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 }) {
+function BarPlot({
+  seriesIds,
+  radius = 3,
+  roundBaseline = false,
+  groupGap = 2,
+  stackGap = 0,
+  minSize = 0,
+  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 zeroOf = (scale) => {
+    const [d0, d1] = scale.domain;
+    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) => {
     const st = ctx.stacked?.get(s.id);
+    const y = s.scale;
+    const zero = zeroOf(y);
     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;
+    return /* @__PURE__ */ jsx6("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 y0 = st ? ctx.y(st.y0[i]) : zero;
-      const y1 = st ? ctx.y(st.y1[i]) : ctx.y(v);
+      const low = s.low?.[i];
+      let y0 = st ? y(st.y0[i]) : low !== null && low !== void 0 && s.low ? y(low) : zero;
+      let y1 = st ? y(st.y1[i]) : y(v);
+      const dir = Math.sign(y1 - y0) || -1;
+      const top = isTopOfStack(i, v);
+      const atBase = Math.abs(y0 - zero) <= 0.5 || !!s.low;
+      if (st && stackGap > 0) {
+        if (!atBase) y0 += dir * stackGap / 2;
+        if (!top) y1 -= dir * stackGap / 2;
+      }
+      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(
         "path",
         {
-          d: barPath(x, barW, y0, y1, isTopOfStack(i, v) ? radius : 0),
+          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" })
@@ -514,116 +751,360 @@ function BarPlot({ seriesIds, radius = 3, groupGap = 2, getBarColor, highlightSc
   }) });
 }
 
+// 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";
+var textWidth = (t, size = 12) => [...t].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? size : size * 0.6), 0);
+function HorizontalBarChart({
+  series,
+  categories,
+  width: fixedWidth,
+  height,
+  stacked = false,
+  radius = 3,
+  groupGap = 2,
+  stackGap = 0,
+  bandPadding = 0.3,
+  getBarColor,
+  showValueAxis = true,
+  showCategoryAxis = true,
+  valueFormatter = formatNumber,
+  enableScrubbing = true,
+  legend = false,
+  palette,
+  className,
+  style,
+  "aria-label": ariaLabel
+}) {
+  const wrapRef = useRef3(null);
+  const [measured, setMeasured] = useState3(fixedWidth ?? 0);
+  const [hover, setHover] = useState3(null);
+  useEffect3(() => {
+    if (fixedWidth !== void 0) return setMeasured(fixedWidth);
+    const el = wrapRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(([e]) => e && setMeasured(Math.round(e.contentRect.width)));
+    ro.observe(el);
+    setMeasured(Math.round(el.getBoundingClientRect().width));
+    return () => ro.disconnect();
+  }, [fixedWidth]);
+  const resolved = useMemo2(
+    () => series.map((s, index) => ({
+      ...s,
+      color: s.color ?? seriesColor2(index, palette),
+      high: s.data.map((v) => Array.isArray(v) ? Math.max(v[0], v[1]) : v),
+      low: s.data.some((v) => Array.isArray(v)) ? s.data.map((v) => Array.isArray(v) ? Math.min(v[0], v[1]) : v) : null
+    })),
+    [series, palette]
+  );
+  const rows = Math.max(categories?.length ?? 0, ...resolved.map((s) => s.high.length));
+  const h = height ?? rows * 34 + (showValueAxis ? 26 : 8);
+  const w = measured;
+  const labelW = showCategoryAxis ? Math.min(140, Math.max(0, ...(categories ?? []).map((c) => textWidth(c))) + 12) : 0;
+  const left = labelW + 4;
+  const right = Math.max(left + 10, w - 12);
+  const top = 4;
+  const bottom = h - (showValueAxis ? 24 : 4);
+  const stackedMap = stacked ? new Map(stack2(resolved.map((s) => ({ id: s.id, data: s.high }))).map((st) => [st.id, st])) : null;
+  let [min, max] = stacked ? stackedExtent2([...stackedMap.values()]) : extent2([...resolved.map((s) => ({ id: s.id, data: s.high })), ...resolved.flatMap((s) => s.low ? [{ id: `${s.id}~`, data: s.low }] : [])]) ?? [0, 1];
+  min = Math.min(min, 0);
+  max = Math.max(max, 0);
+  const xs = linearScale2([min, max], [left, right]);
+  const band = bandScale2(rows, [top, bottom], bandPadding);
+  const zero = xs(0);
+  const groups = stacked ? 1 : Math.max(1, resolved.length);
+  const barH = Math.max(1, (band.bandwidth - groupGap * (groups - 1)) / groups);
+  const tickValues = niceTicks2(min, max, Math.max(2, Math.floor((right - left) / 80)));
+  const onMove = (e) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    setHover(band.invert(e.clientY - r.top));
+  };
+  const tipRows = hover === null ? [] : resolved.flatMap((s) => {
+    const v = s.high[hover];
+    if (v === null || v === void 0) return [];
+    const lo = s.low?.[hover];
+    return [{ s, color: getBarColor?.(v, hover, s.id) ?? s.color, text: lo !== null && lo !== void 0 && lo !== v ? `${valueFormatter(lo)} \u2013 ${valueFormatter(v)}` : valueFormatter(v) }];
+  });
+  const tipW = Math.max(0, ...tipRows.map((r) => textWidth(r.text) + textWidth(r.s.label ?? r.s.id) + 30)) + 8;
+  const tipH = tipRows.length * 18 + 14;
+  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,
+      {
+        ...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(
+      "svg",
+      {
+        width: w || "100%",
+        height: h,
+        role: "img",
+        "aria-label": ariaLabel,
+        style: { display: "block", overflow: "visible", userSelect: "none" },
+        onPointerMove: enableScrubbing ? onMove : void 0,
+        onPointerLeave: enableScrubbing ? () => 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 } }),
+          resolved.map((s, k) => {
+            const st = stackedMap?.get(s.id);
+            return /* @__PURE__ */ jsx7("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];
+              let x0 = st ? xs(st.y0[i]) : lo !== null && lo !== void 0 && s.low ? xs(lo) : zero;
+              let x1 = st ? xs(st.y1[i]) : xs(v);
+              const isTop = !stacked || !resolved.slice(k + 1).some((o) => (o.high[i] ?? 0) !== 0 && Math.sign(o.high[i]) === Math.sign(v));
+              const dir = Math.sign(x1 - x0) || 1;
+              if (st && stackGap > 0) {
+                if (Math.abs(x0 - zero) > 0.5) x0 += dir * stackGap / 2;
+                if (!isTop) x1 -= dir * stackGap / 2;
+              }
+              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(
+                "path",
+                {
+                  d,
+                  transform: `matrix(0 1 1 0 0 0)`,
+                  opacity: hover !== null && hover !== i ? DIM_OPACITY * 2 : 1,
+                  style: { fill: color }
+                },
+                i
+              );
+            }) }, 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)),
+          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 } }),
+            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 })
+            ] }, r.s.id))
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
 // src/viz/scrubber.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect4 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var TIP_FONT = 12;
 var ROW = 18;
 var TIP_PAD = 7;
-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 }) {
+var textWidth2 = (t) => [...t].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? TIP_FONT : TIP_FONT * 0.6), 0);
+function Scrubber({
+  label,
+  seriesIds,
+  dimFuture = true,
+  hideOverlay = false,
+  idlePulse = false,
+  beaconLabels = false,
+  beaconColor,
+  showValues = false,
+  valueFormatter = formatNumber
+}) {
   const ctx = useCartesianChart();
   const i = ctx.scrubIndex;
-  if (i === null || i >= ctx.length) return null;
+  const { setDimFuture } = ctx;
+  const fade = dimFuture && !hideOverlay;
+  useEffect4(() => {
+    setDimFuture(fade);
+    return () => setDimFuture(false);
+  }, [fade, setDimFuture]);
+  const pick = seriesIds ? ctx.series.filter((s) => seriesIds.includes(s.id)) : ctx.series;
+  const colorOf = (s, v) => beaconColor?.(v, s.id) ?? s.color;
+  if (i === null || i >= ctx.length) {
+    if (!idlePulse || ctx.band) return null;
+    return /* @__PURE__ */ jsx8("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;
+      const y = seriesY(ctx, s, last);
+      if (y === null) return null;
+      const x2 = ctx.x(last);
+      const color = colorOf(s, s.data[last]);
+      return /* @__PURE__ */ jsxs6("g", { children: [
+        /* @__PURE__ */ jsxs6("circle", { cx: x2, cy: y, r: 4, fillOpacity: 0.35, style: { fill: color }, children: [
+          /* @__PURE__ */ jsx8("animate", { attributeName: "r", values: "4;13", dur: "1.6s", repeatCount: "indefinite" }),
+          /* @__PURE__ */ jsx8("animate", { attributeName: "fill-opacity", values: "0.35;0", dur: "1.6s", repeatCount: "indefinite" })
+        ] }),
+        /* @__PURE__ */ jsx8("circle", { cx: x2, cy: y, r: 4, strokeWidth: 2, style: { fill: color, stroke: VAR.bg } })
+      ] }, s.id);
+    }) });
+  }
   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 list = pick;
   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) }];
+    if (v === null || v === void 0 || !Number.isFinite(v)) return [];
+    const lo = s.low?.[i];
+    const text2 = lo !== null && lo !== void 0 && lo !== v ? `${valueFormatter(lo, s.id)} \u2013 ${valueFormatter(v, s.id)}` : valueFormatter(v, s.id);
+    return [{ s, text: text2 }];
   }) : [];
-  const tipW = Math.max(0, ...rows.map((r) => textWidth(r.text) + (rows.length > 1 || r.s.label ? textWidth(r.s.label ?? "") + 26 : 18))) + 16;
+  const tipW = Math.max(0, ...rows.map((r) => textWidth2(r.text) + (rows.length > 1 || r.s.label ? textWidth2(r.s.label ?? "") + 26 : 18))) + 16;
   const tipH = rows.length * ROW + TIP_PAD * 2;
   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 }),
+  return /* @__PURE__ */ jsxs6("g", { pointerEvents: "none", children: [
+    /* @__PURE__ */ jsx8("line", { x1: x, x2: x, y1: plot.top, y2: plot.bottom, strokeWidth: 1, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
+    text && /* @__PURE__ */ jsx8("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 } })
+      const v = s.data[i];
+      const color = colorOf(s, v);
+      const text2 = beaconLabels ? typeof beaconLabels === "function" ? beaconLabels(v, s.id) : valueFormatter(v, s.id) : "";
+      const right = x + 12 + textWidth2(text2) <= plot.right;
+      return /* @__PURE__ */ jsxs6("g", { children: [
+        /* @__PURE__ */ jsx8("circle", { cx: x, cy: y, r: 7, fillOpacity: 0.18, style: { fill: color } }),
+        /* @__PURE__ */ jsx8("circle", { cx: x, cy: y, r: 4, strokeWidth: 2, style: { fill: color, stroke: VAR.bg } }),
+        text2 && /* @__PURE__ */ jsx8(
+          "text",
+          {
+            x: right ? x + 10 : x - 10,
+            y,
+            textAnchor: right ? "start" : "end",
+            dominantBaseline: "central",
+            fontSize: TIP_FONT,
+            fontWeight: 700,
+            strokeWidth: 3,
+            strokeLinejoin: "round",
+            paintOrder: "stroke",
+            style: { fill: color, stroke: VAR.bg, fontVariantNumeric: "tabular-nums" },
+            children: text2
+          }
+        )
       ] }, 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(10,${TIP_PAD + ROW / 2 + k * ROW})`, children: [
-        /* @__PURE__ */ jsx7("circle", { cx: 3, cy: 0, r: 3, style: { fill: r.s.color } }),
-        (rows.length > 1 || r.s.label) && /* @__PURE__ */ jsx7("text", { x: 12, dominantBaseline: "central", fontSize: TIP_FONT, style: { fill: VAR.text }, children: r.s.label ?? r.s.id }),
-        /* @__PURE__ */ jsx7("text", { x: tipW - 20, textAnchor: "end", dominantBaseline: "central", fontSize: TIP_FONT, fontWeight: 700, style: { fill: VAR.textStrong, fontVariantNumeric: "tabular-nums" }, children: r.text })
+    rows.length > 0 && /* @__PURE__ */ jsxs6("g", { transform: `translate(${tipX},${tipY})`, children: [
+      /* @__PURE__ */ jsx8("rect", { width: tipW, height: tipH, rx: 8, style: { fill: VAR.bg, stroke: VAR.grid }, strokeWidth: 1 }),
+      rows.map((r, k) => /* @__PURE__ */ jsxs6("g", { transform: `translate(10,${TIP_PAD + ROW / 2 + k * ROW})`, children: [
+        /* @__PURE__ */ jsx8("circle", { cx: 3, cy: 0, r: 3, style: { fill: r.s.color } }),
+        (rows.length > 1 || r.s.label) && /* @__PURE__ */ jsx8("text", { x: 12, dominantBaseline: "central", fontSize: TIP_FONT, style: { fill: VAR.text }, children: r.s.label ?? r.s.id }),
+        /* @__PURE__ */ jsx8("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 jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function ReferenceLine({ dataY, dataX, label, labelPosition, color = VAR.line, dash = "4 4", strokeWidth = 1 }) {
+import { jsx as jsx9, jsxs as jsxs7 } 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__ */ jsx9("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__ */ jsxs7("g", { children: [
+    /* @__PURE__ */ jsx9("rect", { x: left, y: y - 10, width: w, height: 20, rx: 10, style: { fill: color === VAR.line ? VAR.textStrong : color } }),
+    /* @__PURE__ */ jsx9("text", { x: left + w / 2, y, textAnchor: "middle", dominantBaseline: "central", fontSize: LABEL_FONT, fontWeight: 700, style: { fill: VAR.bg }, children: text })
+  ] });
+}
+function ReferenceLine({
+  dataY,
+  dataX,
+  yAxisId,
+  label,
+  labelPosition,
+  labelAlign = "above",
+  labelStyle = "text",
+  labelDx = 0,
+  labelDy = 0,
+  color = VAR.line,
+  dash = "4 4",
+  strokeWidth = 1
+}) {
   const ctx = useCartesianChart();
   const { plot } = ctx;
+  const pill = labelStyle === "pill";
   if (dataY !== void 0) {
-    const y = ctx.y(dataY);
+    const y = scaleFor(ctx, yAxisId)(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 })
+    const off = pill ? 13 : 9;
+    const ly = labelAlign === "center" ? y : labelAlign === "below" ? y + off : y - off;
+    return /* @__PURE__ */ jsxs7("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx9("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__ */ jsx9(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__ */ 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",
+    return /* @__PURE__ */ jsxs7("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx9("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__ */ jsx9(
+        LineLabel,
         {
-          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
+          x: x + (pill ? 0 : 4) + labelDx,
+          y: (pos === "bottom" ? plot.bottom - 10 : plot.top + 10) + labelDy,
+          text: label,
+          anchor: pill ? "middle" : "start",
+          color,
+          pill
         }
       )
     ] });
   }
   return null;
 }
-function Point({ dataX, dataY, seriesId, color, radius = 4, label, labelPosition = "top", pulse = false, onClick }) {
+function Point({ dataX, dataY, seriesId, yAxisId, 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 y = (s?.scale ?? scaleFor(ctx, yAxisId))(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" })
+  return /* @__PURE__ */ jsxs7("g", { style: onClick ? { cursor: "pointer" } : void 0, onClick, pointerEvents: onClick ? "auto" : "none", children: [
+    pulse && /* @__PURE__ */ jsxs7("circle", { cx: x, cy: y, r: radius, fillOpacity: 0.35, style: { fill }, children: [
+      /* @__PURE__ */ jsx9("animate", { attributeName: "r", values: `${radius};${radius * 3.2}`, dur: "1.6s", repeatCount: "indefinite" }),
+      /* @__PURE__ */ jsx9("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 })
+    /* @__PURE__ */ jsx9("circle", { cx: x, cy: y, r: radius, strokeWidth: 2, style: { fill, stroke: VAR.bg } }),
+    label !== void 0 && /* @__PURE__ */ jsx9("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 useRef3, useState as useState3 } from "react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useLayoutEffect, useRef as useRef4, useState as useState4 } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function LiveTabLabel({ label, color = "var(--fnv-live, #F04452)" }) {
+  return /* @__PURE__ */ jsxs8("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ jsxs8("span", { "aria-hidden": "true", style: { position: "relative", width: 7, height: 7 }, children: [
+      /* @__PURE__ */ jsx10("span", { style: { position: "absolute", inset: 0, borderRadius: "50%", background: color } }),
+      /* @__PURE__ */ jsx10("svg", { width: "7", height: "7", viewBox: "0 0 7 7", style: { position: "absolute", inset: 0, overflow: "visible" }, children: /* @__PURE__ */ jsxs8("circle", { cx: "3.5", cy: "3.5", r: "3.5", style: { fill: color }, fillOpacity: 0.45, children: [
+        /* @__PURE__ */ jsx10("animate", { attributeName: "r", values: "3.5;8", dur: "1.6s", repeatCount: "indefinite" }),
+        /* @__PURE__ */ jsx10("animate", { attributeName: "fill-opacity", values: "0.45;0", dur: "1.6s", repeatCount: "indefinite" })
+      ] }) })
+    ] }),
+    label
+  ] });
+}
 var DEFAULT_PERIODS = [
   { id: "1D", label: "1\uC77C" },
   { id: "1W", label: "1\uC8FC" },
@@ -637,13 +1118,16 @@ function PeriodSelector({
   value,
   onChange,
   activeColor = "var(--fnv-accent, #6C4DFF)",
+  liveColor = "var(--fnv-live, #F04452)",
   fullWidth = false,
   className,
   style,
   "aria-label": ariaLabel = "Period"
 }) {
-  const listRef = useRef3(null);
-  const [pill, setPill] = useState3(null);
+  const activeIsLive = periods.find((p) => p.id === value)?.live ?? false;
+  const pillColor = activeIsLive ? liveColor : activeColor;
+  const listRef = useRef4(null);
+  const [pill, setPill] = useState4(null);
   useLayoutEffect(() => {
     const list = listRef.current;
     const active = list?.querySelector('[aria-selected="true"]');
@@ -665,7 +1149,7 @@ function PeriodSelector({
     onChange(p.id);
     listRef.current?.querySelector(`[data-period="${CSS.escape(p.id)}"]`)?.focus();
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       ref: listRef,
@@ -675,7 +1159,7 @@ function PeriodSelector({
       onKeyDown,
       style: { position: "relative", display: fullWidth ? "flex" : "inline-flex", gap: 2, fontFamily: VAR.font, ...style },
       children: [
-        pill && /* @__PURE__ */ jsx9(
+        pill && /* @__PURE__ */ jsx10(
           "span",
           {
             "aria-hidden": "true",
@@ -686,7 +1170,7 @@ function PeriodSelector({
               left: pill.left,
               width: pill.width,
               borderRadius: 999,
-              background: activeColor,
+              background: pillColor,
               opacity: 0.12,
               transition: "left 0.2s ease, width 0.2s ease"
             }
@@ -694,7 +1178,7 @@ function PeriodSelector({
         ),
         periods.map((p) => {
           const active = p.id === value;
-          return /* @__PURE__ */ jsx9(
+          return /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
@@ -712,13 +1196,13 @@ function PeriodSelector({
                 border: 0,
                 borderRadius: 999,
                 background: "transparent",
-                color: active ? activeColor : VAR.text,
+                color: active ? p.live ? liveColor : activeColor : VAR.text,
                 font: "inherit",
                 fontSize: 13,
                 fontWeight: active ? 700 : 500,
                 cursor: "pointer"
               },
-              children: p.label
+              children: p.live ? /* @__PURE__ */ jsx10(LiveTabLabel, { label: p.label, color: liveColor }) : p.label
             },
             p.id
           );
@@ -729,103 +1213,253 @@ function PeriodSelector({
 }
 
 // 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";
+import { percentages, seriesColor as seriesColor3 } from "@funnest/charts-viz";
+import { useState as useState5 } from "react";
+import { jsx as jsx11, jsxs as jsxs9 } 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")
+  y && /* @__PURE__ */ jsx11(YAxis, { ...y }, "y"),
+  x && /* @__PURE__ */ jsx11(XAxis, { ...x }, "x")
 ];
-function LineChart({ showXAxis, showYAxis, scrubber, curve, strokeWidth, area, connectNulls, children, ...chart }) {
+var defined = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => v !== void 0));
+var KR_SPLIT = { above: "#F04452", below: "#3182F6" };
+function LineChart({
+  showXAxis,
+  showYAxis,
+  scrubber,
+  curve,
+  strokeWidth,
+  lineStyle,
+  area,
+  connectNulls,
+  points,
+  baseline,
+  splitColors,
+  children,
+  ...chart
+}) {
   const sc = axisProps(scrubber);
-  return /* @__PURE__ */ jsxs8(CartesianChart, { enableScrubbing: !!sc, ...chart, children: [
+  const split = baseline !== void 0 ? splitColors ?? KR_SPLIT : void 0;
+  return /* @__PURE__ */ jsxs9(CartesianChart, { enableScrubbing: !!sc, ...chart, children: [
     axisElements(axisProps(showXAxis), axisProps(showYAxis)),
-    chart.series.map((s) => /* @__PURE__ */ jsx10(
+    chart.series.map((s) => /* @__PURE__ */ jsx11(
       Line,
       {
         seriesId: s.id,
-        ...curve ? { curve } : {},
-        ...strokeWidth ? { strokeWidth } : {},
-        ...area ? { area } : {},
-        ...connectNulls ? { connectNulls } : {}
+        ...defined({ curve, strokeWidth, lineStyle, connectNulls, points, baseline, splitColors: split }),
+        ...s.areaStyle ?? area ? { area: s.areaStyle ?? area } : {}
       },
       s.id
     )),
     children,
-    sc && /* @__PURE__ */ jsx10(Scrubber, { ...sc })
+    sc && /* @__PURE__ */ jsx11(
+      Scrubber,
+      {
+        ...split && baseline !== void 0 ? { beaconColor: (v) => v >= baseline ? split.above : split.below } : {},
+        ...sc
+      }
+    )
   ] });
 }
-function AreaChart({ showXAxis, showYAxis, scrubber, curve = "monotone", fill = "gradient", showLines = true, strokeWidth = 2, children, ...chart }) {
+function AreaChart({
+  showXAxis,
+  showYAxis,
+  scrubber,
+  curve = "monotone",
+  fill = "gradient",
+  showLines = true,
+  strokeWidth = 2,
+  lineStyle,
+  baseline,
+  splitColors,
+  gradientStops,
+  fillOpacity,
+  children,
+  ...chart
+}) {
   const sc = axisProps(scrubber);
-  return /* @__PURE__ */ jsxs8(CartesianChart, { enableScrubbing: !!sc, ...chart, children: [
+  return /* @__PURE__ */ jsxs9(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}`)),
+    chart.series.map((s) => {
+      const own = s.areaStyle === "none" ? null : s.areaStyle ?? (chart.stacked && fill === "gradient" ? "solid" : fill);
+      return own ? /* @__PURE__ */ jsx11(
+        Area,
+        {
+          seriesId: s.id,
+          curve,
+          fill: own,
+          ...defined({ baseline, splitColors, gradientStops, opacity: fillOpacity ?? (chart.stacked && own === "solid" ? 0.3 : void 0) })
+        },
+        `a${s.id}`
+      ) : null;
+    }),
+    showLines && chart.series.map((s) => /* @__PURE__ */ jsx11(Line, { seriesId: s.id, curve, strokeWidth, ...defined({ lineStyle, baseline, splitColors }) }, `l${s.id}`)),
     children,
-    sc && /* @__PURE__ */ jsx10(Scrubber, { ...sc })
+    sc && /* @__PURE__ */ jsx11(Scrubber, { ...sc })
   ] });
 }
-function BarChart({ showXAxis, showYAxis, scrubber, radius, getBarColor, groupGap, xAxis, children, ...chart }) {
+function BarChart({ showXAxis, showYAxis, scrubber, radius, getBarColor, groupGap, stackGap, roundBaseline, barMinSize, layout = "vertical", 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,
+  if (layout === "horizontal") {
+    const yAx = axisProps(showYAxis);
+    return /* @__PURE__ */ jsx11(
+      HorizontalBarChart,
       {
-        ...radius === void 0 ? {} : { radius },
-        ...getBarColor ? { getBarColor } : {},
-        ...groupGap === void 0 ? {} : { groupGap },
-        highlightScrubbed: !!sc
+        series: chart.series,
+        categories: (xAxis?.data ?? []).map(String),
+        showValueAxis: !!showYAxis,
+        showCategoryAxis: showXAxis !== false,
+        enableScrubbing: !!sc || chart.enableScrubbing === true,
+        legend: !!chart.legend,
+        ...defined({
+          width: chart.width,
+          height: chart.height,
+          stacked: chart.stacked,
+          radius,
+          getBarColor,
+          groupGap,
+          stackGap,
+          bandPadding: xAxis?.bandPadding,
+          valueFormatter: yAx?.tickLabelFormatter,
+          palette: chart.palette,
+          className: chart.className,
+          style: chart.style,
+          "aria-label": chart["aria-label"]
+        })
       }
-    ),
+    );
+  }
+  return /* @__PURE__ */ jsxs9(CartesianChart, { enableScrubbing: !!sc, xAxis: { ...xAxis, scaleType: "band" }, ...chart, children: [
+    axisElements(axisProps(showXAxis), axisProps(showYAxis)),
+    /* @__PURE__ */ jsx11(BarPlot, { ...defined({ radius, getBarColor, groupGap, stackGap, roundBaseline, minSize: barMinSize }), highlightScrubbed: !!sc }),
     children,
-    sc && /* @__PURE__ */ jsx10(Scrubber, { ...sc })
+    sc && /* @__PURE__ */ jsx11(Scrubber, { ...sc })
   ] });
 }
+var pct = (_item, f) => `${formatNumber(Math.round(f * 1e3) / 10)}%`;
 function PercentageBarChart({
   data,
-  barHeight = 10,
+  rows,
+  layout = "horizontal",
+  barHeight,
+  barLength = 160,
   gap = 2,
+  radius,
   showLabels = true,
-  formatLabel = (_item, f) => `${formatNumber(Math.round(f * 1e3) / 10)}%`,
+  legendPosition,
+  legendShape,
+  formatLabel = pct,
   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",
+  const vertical = layout === "vertical";
+  const thick = barHeight ?? (vertical ? 28 : 10);
+  const end = radius ?? (vertical ? Math.min(6, thick / 2) : thick / 2);
+  const inner = Math.min(2, end);
+  const legendAt = legendPosition ?? (vertical ? "right" : "bottom");
+  const allRows = rows ?? [{ id: "row", data: data ?? [] }];
+  const multi = allRows.length > 1 || !!rows;
+  const colorOf = /* @__PURE__ */ new Map();
+  const legendItems = [];
+  for (const r of allRows)
+    for (const d of r.data)
+      if (!colorOf.has(d.id)) {
+        colorOf.set(d.id, d.color ?? seriesColor3(colorOf.size, palette));
+        legendItems.push(d);
+      }
+  const [hovered, setHovered] = useState5(null);
+  const [hoverRow, setHoverRow] = useState5(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 })) };
+  });
+  const renderBar = (items, rowId) => {
+    const visible = items.filter((i) => i.fraction > 0);
+    const ordered = vertical ? [...visible].reverse() : visible;
+    return /* @__PURE__ */ jsx11(
+      "div",
       {
-        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
+          display: "flex",
+          flexDirection: vertical ? "column" : "row",
+          gap,
+          ...vertical ? { width: thick, height: barLength } : { height: thick, flex: 1, minWidth: 0 }
+        },
+        children: ordered.map((i, k) => {
+          const a = k === 0 ? end : inner;
+          const b = k === ordered.length - 1 ? end : inner;
+          return /* @__PURE__ */ jsx11(
+            "span",
+            {
+              title: `${i.label} ${formatLabel(i, i.fraction)}`,
+              onPointerEnter: () => {
+                setHovered(i.id);
+                setHoverRow(rowId);
+              },
+              onPointerLeave: () => {
+                setHovered(null);
+                setHoverRow(null);
+              },
+              style: {
+                opacity: hovered && hovered !== i.id ? 0.3 : 1,
+                flex: `${i.fraction} 1 0`,
+                [vertical ? "minHeight" : "minWidth"]: 2,
+                background: i.color,
+                borderRadius: vertical ? `${a}px ${a}px ${b}px ${b}px` : `${a}px ${b}px ${b}px ${a}px`,
+                transition: "flex-grow 0.4s ease, opacity 0.15s",
+                cursor: "default"
+              }
+            },
+            i.id
+          );
+        })
       }
-    )
-  ] });
+    );
+  };
+  const legendRow = multi ? rowSegs.find((r) => r.row.id === hoverRow) : rowSegs[0];
+  const legend = showLabels && /* @__PURE__ */ jsx11(
+    Legend,
+    {
+      style: legendAt === "top" ? { marginBottom: 10 } : legendAt === "bottom" ? { marginTop: 10 } : {},
+      direction: legendAt === "right" ? "column" : "row",
+      ...legendShape ? { shape: legendShape } : {},
+      items: legendItems.map((d) => {
+        const it = legendRow?.items.find((x) => x.id === d.id);
+        return {
+          id: d.id,
+          label: d.label,
+          color: colorOf.get(d.id),
+          ...it ? { value: formatLabel(it, it.fraction) } : {},
+          inactive: !!hovered && hovered !== d.id
+        };
+      }),
+      onItemHover: setHovered
+    }
+  );
+  const label = (r) => multi && r.label ? /* @__PURE__ */ jsx11("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__ */ jsx11("div", { style: { display: "flex", gap: 14, alignItems: "flex-end" }, children: rowSegs.map(({ row, items }) => /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }, children: [
+    renderBar(items, row.id),
+    label(row)
+  ] }, row.id)) }) : multi ? /* @__PURE__ */ jsx11("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__ */ jsxs9("div", { style: { display: "contents" }, children: [
+    label(row) ?? /* @__PURE__ */ jsx11("span", {}),
+    renderBar(items, row.id)
+  ] }, row.id)) }) : /* @__PURE__ */ jsx11("div", { style: { display: "flex", flex: legendAt === "right" ? 1 : void 0 }, children: renderBar(rowSegs[0].items, rowSegs[0].row.id) });
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className,
+      style: { fontFamily: VAR.font, ...legendAt === "right" ? { display: "flex", alignItems: "center", gap: 16 } : {}, ...style },
+      role: "img",
+      "aria-label": ariaLabel ?? rowSegs.map(({ row, items }) => `${row.label ? `${row.label}: ` : ""}${items.map((i) => `${i.label} ${formatLabel(i, i.fraction)}`).join(", ")}`).join("; "),
+      children: [
+        legendAt === "top" && legend,
+        bars,
+        legendAt !== "top" && legend
+      ]
+    }
+  );
 }
 export {
   Area,
@@ -836,9 +1470,11 @@ export {
   DEFAULT_PERIODS,
   FnChart,
   FnChartSlot,
+  HorizontalBarChart,
   Legend,
   Line,
   LineChart,
+  LiveTabLabel,
   PercentageBarChart,
   PeriodSelector,
   Point,