@misoto22/design 0.5.0 → 0.6.0

package/dist/charts/lib/brush.js

@@ -0,0 +1,535 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Fragment as Fragment2,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  startTransition
+} from "react";
+import {
+  motion,
+  useMotionValue,
+  useMotionValueEvent,
+  useSpring,
+  useTransform
+} from "motion/react";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  Line,
+  LineChart,
+  ResponsiveContainer
+} from "recharts";
+import { cn } from "../../lib/cn.js";
+import { colorStops } from "./chart.js";
+const Brush = () => null;
+const SPRING = { stiffness: 300, damping: 35, mass: 0.8 };
+function useBrushDrag({
+  range,
+  totalPoints,
+  containerRef,
+  commit
+}) {
+  const drag = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const toIndexDelta = useCallback(
+    (px) => {
+      const width = containerRef.current?.getBoundingClientRect().width ?? 0;
+      if (!width || totalPoints <= 1) return 0;
+      return Math.round(px / width * (totalPoints - 1));
+    },
+    [containerRef, totalPoints]
+  );
+  const onPointerDown = useCallback(
+    (event, kind) => {
+      event.preventDefault();
+      event.target.setPointerCapture(event.pointerId);
+      drag.current = { kind, originX: event.clientX, originRange: { ...range } };
+      setIsDragging(true);
+    },
+    [range]
+  );
+  const onPointerMove = useCallback(
+    (event) => {
+      const state = drag.current;
+      if (!state) return;
+      const delta = toIndexDelta(event.clientX - state.originX);
+      const origin = state.originRange;
+      if (state.kind === "start") {
+        commit({ startIndex: origin.startIndex + delta, endIndex: origin.endIndex }, "start");
+        return;
+      }
+      if (state.kind === "end") {
+        commit({ startIndex: origin.startIndex, endIndex: origin.endIndex + delta }, "end");
+        return;
+      }
+      const span = origin.endIndex - origin.startIndex;
+      let start = origin.startIndex + delta;
+      let end = start + span;
+      if (start < 0) {
+        start = 0;
+        end = span;
+      }
+      if (end > totalPoints - 1) {
+        end = totalPoints - 1;
+        start = Math.max(0, end - span);
+      }
+      commit({ startIndex: start, endIndex: end }, "pan");
+    },
+    [commit, toIndexDelta, totalPoints]
+  );
+  const onPointerUp = useCallback((event) => {
+    ;
+    event.target.releasePointerCapture(event.pointerId);
+    drag.current = null;
+    setIsDragging(false);
+  }, []);
+  const bind = useCallback(
+    (kind) => ({
+      onPointerDown: (event) => onPointerDown(event, kind),
+      onPointerMove,
+      onPointerUp
+    }),
+    [onPointerDown, onPointerMove, onPointerUp]
+  );
+  return { isDragging, bind };
+}
+function ChartBrush({
+  data,
+  config,
+  dataKeys,
+  xDataKey,
+  variant = "area",
+  height = 56,
+  className,
+  stacked = false,
+  strokeVariant = "solid",
+  connectNulls = false,
+  barRadius,
+  startIndex: controlledStart,
+  endIndex: controlledEnd,
+  defaultStartIndex = 0,
+  defaultEndIndex,
+  onChange,
+  formatLabel,
+  curveType = "monotone",
+  minSpan = 2,
+  showLabels = true,
+  label = "Visible range"
+}) {
+  const containerRef = useRef(null);
+  const keys = useMemo(() => dataKeys ?? Object.keys(config), [dataKeys, config]);
+  const totalPoints = data.length;
+  const maxIndex = Math.max(0, totalPoints - 1);
+  const isControlled = controlledStart !== void 0 && controlledEnd !== void 0;
+  const [range, setRange] = useState(() => ({
+    startIndex: Math.max(0, Math.min(defaultStartIndex, maxIndex)),
+    endIndex: Math.max(0, Math.min(defaultEndIndex ?? maxIndex, maxIndex))
+  }));
+  const committed = useRef(range);
+  useEffect(() => {
+    if (isControlled) return;
+    setRange((previous) => {
+      const adjusted = {
+        startIndex: Math.min(previous.startIndex, maxIndex),
+        endIndex: Math.min(previous.endIndex, maxIndex)
+      };
+      committed.current = adjusted;
+      return adjusted;
+    });
+  }, [isControlled, maxIndex]);
+  const clamp = useCallback(
+    (next, kind) => {
+      let startIndex = Math.max(0, Math.min(next.startIndex, maxIndex));
+      let endIndex = Math.max(0, Math.min(next.endIndex, maxIndex));
+      if (kind === "start") {
+        return { startIndex: Math.min(startIndex, Math.max(0, endIndex - minSpan)), endIndex };
+      }
+      if (kind === "end") {
+        return { startIndex, endIndex: Math.max(endIndex, Math.min(maxIndex, startIndex + minSpan)) };
+      }
+      if (endIndex - startIndex < minSpan) {
+        endIndex = Math.min(startIndex + minSpan, maxIndex);
+        if (endIndex - startIndex < minSpan) startIndex = Math.max(0, endIndex - minSpan);
+      }
+      return { startIndex, endIndex };
+    },
+    [maxIndex, minSpan]
+  );
+  const commit = useCallback(
+    (next, kind) => {
+      const clamped = clamp(next, kind);
+      const last = committed.current;
+      if (last.startIndex === clamped.startIndex && last.endIndex === clamped.endIndex) return;
+      committed.current = clamped;
+      setRange(clamped);
+      startTransition(() => onChange?.(clamped));
+    },
+    [clamp, onChange]
+  );
+  const { isDragging, bind } = useBrushDrag({ range, totalPoints, containerRef, commit });
+  useEffect(() => {
+    if (!isControlled || isDragging) return;
+    const synced = { startIndex: controlledStart, endIndex: controlledEnd };
+    setRange(synced);
+    committed.current = synced;
+  }, [controlledEnd, controlledStart, isControlled, isDragging]);
+  const startPercent = maxIndex > 0 ? range.startIndex / maxIndex * 100 : 0;
+  const endPercent = maxIndex > 0 ? range.endIndex / maxIndex * 100 : 100;
+  const startTarget = useMotionValue(startPercent);
+  const endTarget = useMotionValue(endPercent);
+  if (startTarget.get() !== startPercent) startTarget.set(startPercent);
+  if (endTarget.get() !== endPercent) endTarget.set(endPercent);
+  const startSpring = useSpring(startTarget, SPRING);
+  const endSpring = useSpring(endTarget, SPRING);
+  const startEdge = useTransform(startSpring, (value) => `${value}%`);
+  const endEdge = useTransform(endSpring, (value) => `${value}%`);
+  const dimBefore = useTransform(startSpring, (value) => `${value}%`);
+  const dimAfter = useTransform(endSpring, (value) => `${Math.max(0, 100 - value)}%`);
+  const spanWidth = useMotionValue(`${Math.max(0, endPercent - startPercent)}%`);
+  const syncSpan = useCallback(() => {
+    spanWidth.set(`${Math.max(0, endSpring.get() - startSpring.get())}%`);
+  }, [endSpring, spanWidth, startSpring]);
+  useMotionValueEvent(startSpring, "change", syncSpan);
+  useMotionValueEvent(endSpring, "change", syncSpan);
+  const labelAt = useCallback(
+    (index) => {
+      if (!xDataKey) return String(index);
+      const value = data[index]?.[xDataKey];
+      return formatLabel ? formatLabel(value, index) : String(value ?? index);
+    },
+    [data, formatLabel, xDataKey]
+  );
+  const nudge = useCallback(
+    (kind, step) => {
+      const next = kind === "start" ? { startIndex: range.startIndex + step, endIndex: range.endIndex } : { startIndex: range.startIndex, endIndex: range.endIndex + step };
+      commit(next, kind);
+    },
+    [commit, range.endIndex, range.startIndex]
+  );
+  if (totalPoints === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("group relative select-none", className),
+      style: { height },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden rounded-(--radius-sm)", children: /* @__PURE__ */ jsx(
+          BrushStrip,
+          {
+            data,
+            keys,
+            config,
+            variant,
+            curveType,
+            stacked,
+            strokeVariant,
+            connectNulls,
+            barRadius
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-y-0 rounded-(--radius-sm) bg-(--chart-surface)/70 backdrop-blur-[2px]",
+            style: { left: 0, width: dimBefore }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-y-0 rounded-(--radius-sm) bg-(--chart-surface)/70 backdrop-blur-[2px]",
+            style: { right: 0, width: dimAfter }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            "aria-hidden": true,
+            className: "absolute inset-y-0 cursor-grab touch-none rounded-(--radius-sm) border border-(--rule-2) active:cursor-grabbing",
+            style: { left: startEdge, width: spanWidth },
+            ...bind("pan")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BrushHandle,
+          {
+            kind: "start",
+            edge: startEdge,
+            label,
+            valueLabel: labelAt(range.startIndex),
+            showLabel: showLabels,
+            index: range.startIndex,
+            max: maxIndex,
+            bind: bind("start"),
+            onNudge: nudge
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BrushHandle,
+          {
+            kind: "end",
+            edge: endEdge,
+            label,
+            valueLabel: labelAt(range.endIndex),
+            showLabel: showLabels,
+            index: range.endIndex,
+            max: maxIndex,
+            bind: bind("end"),
+            onNudge: nudge
+          }
+        )
+      ]
+    }
+  );
+}
+function BrushHandle({
+  kind,
+  edge,
+  label,
+  valueLabel,
+  showLabel,
+  index,
+  max,
+  bind,
+  onNudge
+}) {
+  const isStart = kind === "start";
+  const onKeyDown = (event) => {
+    const steps = {
+      ArrowLeft: -1,
+      ArrowDown: -1,
+      ArrowRight: 1,
+      ArrowUp: 1,
+      PageDown: -5,
+      PageUp: 5
+    };
+    if (event.key === "Home") {
+      event.preventDefault();
+      onNudge(kind, -max);
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      onNudge(kind, max);
+      return;
+    }
+    const step = steps[event.key];
+    if (step === void 0) return;
+    event.preventDefault();
+    onNudge(kind, step);
+  };
+  return /* @__PURE__ */ jsxs(motion.div, { className: "absolute inset-y-0 z-(--z-rule)", style: { left: edge }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": `${label} \u2014 ${isStart ? "start" : "end"}`,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": index,
+        "aria-valuetext": valueLabel,
+        onKeyDown,
+        className: cn(
+          "group/handle absolute inset-y-0 flex w-3 cursor-ew-resize touch-none items-center justify-center",
+          "after:absolute after:inset-y-0 after:w-11 after:content-['']"
+        ),
+        style: { left: 0, transform: isStart ? void 0 : "translateX(-100%)" },
+        ...bind,
+        children: /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "flex h-4 w-1.5 flex-col items-center justify-center gap-[2px] rounded-(--radius-sm) bg-(--ink-3-aa) transition-colors duration-(--duration-fast) group-hover/handle:bg-(--ink) group-focus-visible/handle:bg-(--ink)",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "size-[2px] rounded-(--radius-pill) bg-(--chart-surface)/70" }),
+              /* @__PURE__ */ jsx("span", { className: "size-[2px] rounded-(--radius-pill) bg-(--chart-surface)/70" }),
+              /* @__PURE__ */ jsx("span", { className: "size-[2px] rounded-(--radius-pill) bg-(--chart-surface)/70" })
+            ]
+          }
+        )
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute -bottom-3 -translate-y-1/2 rounded-[3px] bg-(--ink) px-1 py-px text-[8px] leading-tight font-medium whitespace-nowrap text-(--paper) opacity-0 transition-opacity duration-(--duration-fast) group-hover:opacity-100",
+        style: isStart ? { left: "0.375rem" } : { right: "0.375rem" },
+        children: valueLabel
+      }
+    )
+  ] });
+}
+function BrushStrip({
+  data,
+  keys,
+  config,
+  variant,
+  curveType,
+  stacked,
+  strokeVariant,
+  connectNulls,
+  barRadius
+}) {
+  const id = `brush-${useId().replace(/:/g, "")}`;
+  const series = useMemo(
+    () => Object.entries(config).filter(([key]) => keys.includes(key)).map(([dataKey, entry]) => ({ dataKey, stops: colorStops(entry) })),
+    [config, keys]
+  );
+  const dash = strokeVariant === "dashed" ? "4 4" : void 0;
+  const defs = /* @__PURE__ */ jsxs(Fragment, { children: [
+    variant === "area" && /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-fade`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: 0.15 }),
+      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: 0 })
+    ] }),
+    series.map(({ dataKey, stops }) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+      /* @__PURE__ */ jsx("linearGradient", { id: `${id}-${dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: stops === 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: `var(--color-${dataKey}-0)` }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: `var(--color-${dataKey}-0)` })
+      ] }) : Array.from({ length: stops }, (_, index) => /* @__PURE__ */ jsx(
+        "stop",
+        {
+          offset: `${index / (stops - 1) * 100}%`,
+          stopColor: `var(--color-${dataKey}-${index}, var(--color-${dataKey}-0))`
+        },
+        index
+      )) }),
+      variant === "area" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("mask", { id: `${id}-fill-mask-${dataKey}`, children: /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id}-fade)` }) }),
+        /* @__PURE__ */ jsx(
+          "pattern",
+          {
+            id: `${id}-fill-${dataKey}`,
+            patternUnits: "userSpaceOnUse",
+            width: "100%",
+            height: "100%",
+            children: /* @__PURE__ */ jsx(
+              "rect",
+              {
+                width: "100%",
+                height: "100%",
+                fill: `url(#${id}-${dataKey})`,
+                mask: `url(#${id}-fill-mask-${dataKey})`
+              }
+            )
+          }
+        )
+      ] })
+    ] }, dataKey))
+  ] });
+  if (variant === "line") {
+    return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart, { data, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
+      /* @__PURE__ */ jsx("defs", { children: defs }),
+      keys.map((key) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          type: curveType,
+          dataKey: key,
+          stroke: `url(#${id}-${key})`,
+          strokeWidth: 1,
+          strokeOpacity: 0.5,
+          strokeDasharray: dash,
+          connectNulls,
+          dot: false,
+          activeDot: false,
+          isAnimationActive: false
+        },
+        key
+      ))
+    ] }) });
+  }
+  if (variant === "bar") {
+    const radius = barRadius ?? 3;
+    return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+      BarChart,
+      {
+        data,
+        margin: { top: 2, right: 0, bottom: 0, left: 0 },
+        barGap: 2,
+        barSize: 14,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: defs }),
+          keys.map((key) => /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: key,
+              fill: `url(#${id}-${key})`,
+              fillOpacity: 0.35,
+              stackId: stacked ? "brush-stack" : void 0,
+              isAnimationActive: false,
+              radius: [radius, radius, radius, radius]
+            },
+            key
+          ))
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
+    /* @__PURE__ */ jsx("defs", { children: defs }),
+    keys.map((key) => /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: curveType,
+        dataKey: key,
+        stroke: `url(#${id}-${key})`,
+        fill: `url(#${id}-fill-${key})`,
+        strokeWidth: 1,
+        strokeOpacity: 0.5,
+        strokeDasharray: dash,
+        connectNulls,
+        fillOpacity: 1,
+        stackId: stacked ? "brush-stack" : void 0,
+        dot: false,
+        activeDot: false,
+        isAnimationActive: false
+      },
+      key
+    ))
+  ] }) });
+}
+function useChartBrush({
+  data,
+  defaultStartIndex = 0,
+  defaultEndIndex
+}) {
+  const [range, setRange] = useState({
+    startIndex: defaultStartIndex,
+    endIndex: defaultEndIndex ?? Math.max(0, data.length - 1)
+  });
+  const deferred = useDeferredValue(range);
+  useEffect(() => {
+    setRange({ startIndex: 0, endIndex: Math.max(0, data.length - 1) });
+  }, [data.length]);
+  const visibleData = useMemo(
+    () => data.slice(deferred.startIndex, deferred.endIndex + 1),
+    [data, deferred.endIndex, deferred.startIndex]
+  );
+  return {
+    range,
+    visibleData,
+    brushProps: {
+      startIndex: range.startIndex,
+      endIndex: range.endIndex,
+      onChange: setRange
+    }
+  };
+}
+export {
+  Brush,
+  ChartBrush,
+  useChartBrush
+};
+//# sourceMappingURL=brush.js.map

package/dist/charts/lib/brush.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/brush.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Fragment,\n  useCallback,\n  useDeferredValue,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  startTransition,\n  type ComponentProps,\n  type FC,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type RefObject,\n} from 'react'\nimport {\n  motion,\n  useMotionValue,\n  useMotionValueEvent,\n  useSpring,\n  useTransform,\n  type MotionValue,\n} from 'motion/react'\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n} from 'recharts'\nimport { cn } from '../../lib/cn'\nimport { colorStops, type ChartConfig } from './chart'\n\n/** The slice of the data a brush has selected, as row indexes. */\nexport interface ChartBrushRange {\n  startIndex: number\n  endIndex: number\n}\n\n/** Which mark the miniature strip is drawn with. */\nexport type ChartBrushVariant = 'line' | 'area' | 'bar'\n\nexport interface BrushProps {\n  /** Strip height in pixels. */\n  height?: number\n  /** Turns a row's x value into a handle label. */\n  formatLabel?: (value: unknown, index: number) => string\n  onChange?: (range: ChartBrushRange) => void\n}\n\n/**\n * Declares the zoom brush under a chart.\n *\n * Renders nothing itself — its PRESENCE among the chart's children turns the\n * footer on, and its props configure it. A marker rather than a `showBrush`\n * prop because the brush is composed like every other part, so a consumer does\n * not have to remember which knobs are children and which are props.\n */\nexport const Brush: FC<BrushProps> = () => null\n\n/** How firmly the handles catch up with the pointer. */\nconst SPRING = { stiffness: 300, damping: 35, mass: 0.8 }\n\ntype DragKind = 'start' | 'end' | 'pan'\n\ninterface DragState {\n  kind: DragKind\n  originX: number\n  originRange: ChartBrushRange\n}\n\n/**\n * Pointer-capture dragging for the two handles and the selected span.\n *\n * `setPointerCapture` routes every subsequent move to the element that was\n * pressed, so mouse, touch and pen all work from one code path and there are no\n * window-level listeners to leak.\n */\nfunction useBrushDrag({\n  range,\n  totalPoints,\n  containerRef,\n  commit,\n}: {\n  range: ChartBrushRange\n  totalPoints: number\n  containerRef: RefObject<HTMLDivElement | null>\n  commit: (next: ChartBrushRange, kind?: DragKind) => void\n}) {\n  const drag = useRef<DragState | null>(null)\n  const [isDragging, setIsDragging] = useState(false)\n\n  const toIndexDelta = useCallback(\n    (px: number) => {\n      const width = containerRef.current?.getBoundingClientRect().width ?? 0\n      if (!width || totalPoints <= 1) return 0\n      return Math.round((px / width) * (totalPoints - 1))\n    },\n    [containerRef, totalPoints],\n  )\n\n  const onPointerDown = useCallback(\n    (event: ReactPointerEvent, kind: DragKind) => {\n      event.preventDefault()\n      ;(event.target as HTMLElement).setPointerCapture(event.pointerId)\n      drag.current = { kind, originX: event.clientX, originRange: { ...range } }\n      setIsDragging(true)\n    },\n    [range],\n  )\n\n  const onPointerMove = useCallback(\n    (event: ReactPointerEvent) => {\n      const state = drag.current\n      if (!state) return\n\n      const delta = toIndexDelta(event.clientX - state.originX)\n      const origin = state.originRange\n\n      if (state.kind === 'start') {\n        commit({ startIndex: origin.startIndex + delta, endIndex: origin.endIndex }, 'start')\n        return\n      }\n      if (state.kind === 'end') {\n        commit({ startIndex: origin.startIndex, endIndex: origin.endIndex + delta }, 'end')\n        return\n      }\n\n      const span = origin.endIndex - origin.startIndex\n      let start = origin.startIndex + delta\n      let end = start + span\n      if (start < 0) {\n        start = 0\n        end = span\n      }\n      if (end > totalPoints - 1) {\n        end = totalPoints - 1\n        start = Math.max(0, end - span)\n      }\n      commit({ startIndex: start, endIndex: end }, 'pan')\n    },\n    [commit, toIndexDelta, totalPoints],\n  )\n\n  const onPointerUp = useCallback((event: ReactPointerEvent) => {\n    ;(event.target as HTMLElement).releasePointerCapture(event.pointerId)\n    drag.current = null\n    setIsDragging(false)\n  }, [])\n\n  const bind = useCallback(\n    (kind: DragKind) => ({\n      onPointerDown: (event: ReactPointerEvent) => onPointerDown(event, kind),\n      onPointerMove,\n      onPointerUp,\n    }),\n    [onPointerDown, onPointerMove, onPointerUp],\n  )\n\n  return { isDragging, bind }\n}\n\nexport interface ChartBrushProps {\n  /** The whole dataset. The strip always draws all of it. */\n  data: Record<string, unknown>[]\n  config: ChartConfig\n  /** Which series the strip draws. Defaults to every key in the config. */\n  dataKeys?: string[]\n  /** The row field behind a handle's label. */\n  xDataKey?: string\n  variant?: ChartBrushVariant\n  height?: number\n  className?: string\n  stacked?: boolean\n  strokeVariant?: 'solid' | 'dashed'\n  connectNulls?: boolean\n  barRadius?: number\n  startIndex?: number\n  endIndex?: number\n  defaultStartIndex?: number\n  defaultEndIndex?: number\n  onChange?: (range: ChartBrushRange) => void\n  formatLabel?: (value: unknown, index: number) => string\n  curveType?: ComponentProps<typeof Area>['type']\n  /** The fewest rows that may stay selected. */\n  minSpan?: number\n  showLabels?: boolean\n  /** Names the control for a screen reader. */\n  label?: string\n}\n\n/**\n * The range selector under a chart: a miniature of the whole series, with a lit\n * window over the part the chart above is showing.\n *\n * Both handles are real `slider` controls — focusable, arrow-key driven, with\n * `aria-valuetext` reading out the row they sit on. The shape this was ported\n * from was pointer-only, which made zooming a chart something a keyboard user\n * could watch but not do.\n *\n * Position is written as inline style rather than as `start-`/`end-` classes on\n * purpose. The strip's axis is the DATA's, and Recharts lays a cartesian plot\n * out left-to-right in every writing direction — so mirroring the handles under\n * `dir=\"rtl\"` would put the \"earlier\" handle at the end of a chart that still\n * runs the other way.\n */\nexport function ChartBrush({\n  data,\n  config,\n  dataKeys,\n  xDataKey,\n  variant = 'area',\n  height = 56,\n  className,\n  stacked = false,\n  strokeVariant = 'solid',\n  connectNulls = false,\n  barRadius,\n  startIndex: controlledStart,\n  endIndex: controlledEnd,\n  defaultStartIndex = 0,\n  defaultEndIndex,\n  onChange,\n  formatLabel,\n  curveType = 'monotone',\n  minSpan = 2,\n  showLabels = true,\n  label = 'Visible range',\n}: ChartBrushProps) {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const keys = useMemo(() => dataKeys ?? Object.keys(config), [dataKeys, config])\n  const totalPoints = data.length\n  const maxIndex = Math.max(0, totalPoints - 1)\n\n  const isControlled = controlledStart !== undefined && controlledEnd !== undefined\n\n  const [range, setRange] = useState<ChartBrushRange>(() => ({\n    startIndex: Math.max(0, Math.min(defaultStartIndex, maxIndex)),\n    endIndex: Math.max(0, Math.min(defaultEndIndex ?? maxIndex, maxIndex)),\n  }))\n\n  const committed = useRef<ChartBrushRange>(range)\n\n  useEffect(() => {\n    if (isControlled) return\n    setRange((previous) => {\n      const adjusted = {\n        startIndex: Math.min(previous.startIndex, maxIndex),\n        endIndex: Math.min(previous.endIndex, maxIndex),\n      }\n      committed.current = adjusted\n      return adjusted\n    })\n  }, [isControlled, maxIndex])\n\n  const clamp = useCallback(\n    (next: ChartBrushRange, kind?: DragKind): ChartBrushRange => {\n      let startIndex = Math.max(0, Math.min(next.startIndex, maxIndex))\n      let endIndex = Math.max(0, Math.min(next.endIndex, maxIndex))\n\n      if (kind === 'start') {\n        return { startIndex: Math.min(startIndex, Math.max(0, endIndex - minSpan)), endIndex }\n      }\n      if (kind === 'end') {\n        return { startIndex, endIndex: Math.max(endIndex, Math.min(maxIndex, startIndex + minSpan)) }\n      }\n      if (endIndex - startIndex < minSpan) {\n        endIndex = Math.min(startIndex + minSpan, maxIndex)\n        if (endIndex - startIndex < minSpan) startIndex = Math.max(0, endIndex - minSpan)\n      }\n      return { startIndex, endIndex }\n    },\n    [maxIndex, minSpan],\n  )\n\n  const commit = useCallback(\n    (next: ChartBrushRange, kind?: DragKind) => {\n      const clamped = clamp(next, kind)\n      const last = committed.current\n      if (last.startIndex === clamped.startIndex && last.endIndex === clamped.endIndex) return\n\n      committed.current = clamped\n      setRange(clamped)\n      // The handles have to keep up with the pointer; the chart above does not.\n      // Deferring lets React drop intermediate slices during a fast drag.\n      startTransition(() => onChange?.(clamped))\n    },\n    [clamp, onChange],\n  )\n\n  const { isDragging, bind } = useBrushDrag({ range, totalPoints, containerRef, commit })\n\n  useEffect(() => {\n    if (!isControlled || isDragging) return\n    const synced = { startIndex: controlledStart, endIndex: controlledEnd }\n    setRange(synced)\n    committed.current = synced\n  }, [controlledEnd, controlledStart, isControlled, isDragging])\n\n  const startPercent = maxIndex > 0 ? (range.startIndex / maxIndex) * 100 : 0\n  const endPercent = maxIndex > 0 ? (range.endIndex / maxIndex) * 100 : 100\n\n  const startTarget = useMotionValue(startPercent)\n  const endTarget = useMotionValue(endPercent)\n  if (startTarget.get() !== startPercent) startTarget.set(startPercent)\n  if (endTarget.get() !== endPercent) endTarget.set(endPercent)\n\n  const startSpring = useSpring(startTarget, SPRING)\n  const endSpring = useSpring(endTarget, SPRING)\n  const startEdge = useTransform(startSpring, (value) => `${value}%`)\n  const endEdge = useTransform(endSpring, (value) => `${value}%`)\n  const dimBefore = useTransform(startSpring, (value) => `${value}%`)\n  const dimAfter = useTransform(endSpring, (value) => `${Math.max(0, 100 - value)}%`)\n  const spanWidth = useMotionValue(`${Math.max(0, endPercent - startPercent)}%`)\n\n  const syncSpan = useCallback(() => {\n    spanWidth.set(`${Math.max(0, endSpring.get() - startSpring.get())}%`)\n  }, [endSpring, spanWidth, startSpring])\n\n  useMotionValueEvent(startSpring, 'change', syncSpan)\n  useMotionValueEvent(endSpring, 'change', syncSpan)\n\n  const labelAt = useCallback(\n    (index: number) => {\n      if (!xDataKey) return String(index)\n      const value = data[index]?.[xDataKey]\n      return formatLabel ? formatLabel(value, index) : String(value ?? index)\n    },\n    [data, formatLabel, xDataKey],\n  )\n\n  const nudge = useCallback(\n    (kind: 'start' | 'end', step: number) => {\n      const next =\n        kind === 'start'\n          ? { startIndex: range.startIndex + step, endIndex: range.endIndex }\n          : { startIndex: range.startIndex, endIndex: range.endIndex + step }\n      commit(next, kind)\n    },\n    [commit, range.endIndex, range.startIndex],\n  )\n\n  if (totalPoints === 0) return null\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn('group relative select-none', className)}\n      style={{ height }}\n    >\n      <div className=\"absolute inset-0 overflow-hidden rounded-(--radius-sm)\">\n        <BrushStrip\n          data={data}\n          keys={keys}\n          config={config}\n          variant={variant}\n          curveType={curveType}\n          stacked={stacked}\n          strokeVariant={strokeVariant}\n          connectNulls={connectNulls}\n          barRadius={barRadius}\n        />\n      </div>\n\n      {/* The two dimmed shoulders. A wash rather than an opacity change on the\n          strip: dimming the strip itself would also dim the selected window. */}\n      <motion.div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-y-0 rounded-(--radius-sm) bg-(--chart-surface)/70 backdrop-blur-[2px]\"\n        style={{ left: 0, width: dimBefore }}\n      />\n      <motion.div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-y-0 rounded-(--radius-sm) bg-(--chart-surface)/70 backdrop-blur-[2px]\"\n        style={{ right: 0, width: dimAfter }}\n      />\n\n      <motion.div\n        aria-hidden\n        className=\"absolute inset-y-0 cursor-grab touch-none rounded-(--radius-sm) border border-(--rule-2) active:cursor-grabbing\"\n        style={{ left: startEdge, width: spanWidth }}\n        {...bind('pan')}\n      />\n\n      <BrushHandle\n        kind=\"start\"\n        edge={startEdge}\n        label={label}\n        valueLabel={labelAt(range.startIndex)}\n        showLabel={showLabels}\n        index={range.startIndex}\n        max={maxIndex}\n        bind={bind('start')}\n        onNudge={nudge}\n      />\n      <BrushHandle\n        kind=\"end\"\n        edge={endEdge}\n        label={label}\n        valueLabel={labelAt(range.endIndex)}\n        showLabel={showLabels}\n        index={range.endIndex}\n        max={maxIndex}\n        bind={bind('end')}\n        onNudge={nudge}\n      />\n    </div>\n  )\n}\n\n/**\n * One end of the window.\n *\n * A `slider` rather than a styled div: arrow keys step it, Home and End jump it\n * to the edges, and `aria-valuetext` says which row it is on rather than which\n * index — an index is not what the reader is choosing between.\n */\nfunction BrushHandle({\n  kind,\n  edge,\n  label,\n  valueLabel,\n  showLabel,\n  index,\n  max,\n  bind,\n  onNudge,\n}: {\n  kind: 'start' | 'end'\n  edge: MotionValue<string>\n  label: string\n  valueLabel: string\n  showLabel: boolean\n  index: number\n  max: number\n  bind: {\n    onPointerDown: (event: ReactPointerEvent) => void\n    onPointerMove: (event: ReactPointerEvent) => void\n    onPointerUp: (event: ReactPointerEvent) => void\n  }\n  onNudge: (kind: 'start' | 'end', step: number) => void\n}) {\n  const isStart = kind === 'start'\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const steps: Record<string, number> = {\n      ArrowLeft: -1,\n      ArrowDown: -1,\n      ArrowRight: 1,\n      ArrowUp: 1,\n      PageDown: -5,\n      PageUp: 5,\n    }\n    if (event.key === 'Home') {\n      event.preventDefault()\n      onNudge(kind, -max)\n      return\n    }\n    if (event.key === 'End') {\n      event.preventDefault()\n      onNudge(kind, max)\n      return\n    }\n    const step = steps[event.key]\n    if (step === undefined) return\n    event.preventDefault()\n    onNudge(kind, step)\n  }\n\n  return (\n    <motion.div className=\"absolute inset-y-0 z-(--z-rule)\" style={{ left: edge }}>\n      <div\n        role=\"slider\"\n        tabIndex={0}\n        aria-label={`${label} — ${isStart ? 'start' : 'end'}`}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuenow={index}\n        aria-valuetext={valueLabel}\n        onKeyDown={onKeyDown}\n        // The 44px hit target WCAG 2.5.5 asks for, as a pseudo-element so the\n        // handle itself can stay 6px wide.\n        className={cn(\n          'group/handle absolute inset-y-0 flex w-3 cursor-ew-resize touch-none items-center justify-center',\n          \"after:absolute after:inset-y-0 after:w-11 after:content-['']\",\n        )}\n        // Physical, and deliberately so — see the note on ChartBrush. In a\n        // class this would need an `rtl:` twin that would move the handle off\n        // the edge it belongs to.\n        style={{ left: 0, transform: isStart ? undefined : 'translateX(-100%)' }}\n        {...bind}\n      >\n        <span\n          aria-hidden\n          className=\"flex h-4 w-1.5 flex-col items-center justify-center gap-[2px] rounded-(--radius-sm) bg-(--ink-3-aa) transition-colors duration-(--duration-fast) group-hover/handle:bg-(--ink) group-focus-visible/handle:bg-(--ink)\"\n        >\n          <span className=\"size-[2px] rounded-(--radius-pill) bg-(--chart-surface)/70\" />\n          <span className=\"size-[2px] rounded-(--radius-pill) bg-(--chart-surface)/70\" />\n          <span className=\"size-[2px] rounded-(--radius-pill) bg-(--chart-surface)/70\" />\n        </span>\n      </div>\n\n      {showLabel && (\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute -bottom-3 -translate-y-1/2 rounded-[3px] bg-(--ink) px-1 py-px text-[8px] leading-tight font-medium whitespace-nowrap text-(--paper) opacity-0 transition-opacity duration-(--duration-fast) group-hover:opacity-100\"\n          style={isStart ? { left: '0.375rem' } : { right: '0.375rem' }}\n        >\n          {valueLabel}\n        </span>\n      )}\n    </motion.div>\n  )\n}\n\n/**\n * The miniature series behind the window.\n *\n * Its own gradients rather than the chart's: the strip is a second Recharts\n * tree, and an SVG paint reference cannot cross from one `<svg>` root into\n * another. The custom properties DO cross — they are inherited CSS — which is\n * why the strip needs no config of its own beyond the series list.\n */\nfunction BrushStrip({\n  data,\n  keys,\n  config,\n  variant,\n  curveType,\n  stacked,\n  strokeVariant,\n  connectNulls,\n  barRadius,\n}: {\n  data: Record<string, unknown>[]\n  keys: string[]\n  config: ChartConfig\n  variant: ChartBrushVariant\n  curveType: ComponentProps<typeof Area>['type']\n  stacked: boolean\n  strokeVariant: 'solid' | 'dashed'\n  connectNulls: boolean\n  barRadius?: number\n}) {\n  const id = `brush-${useId().replace(/:/g, '')}`\n  const series = useMemo(\n    () =>\n      Object.entries(config)\n        .filter(([key]) => keys.includes(key))\n        .map(([dataKey, entry]) => ({ dataKey, stops: colorStops(entry) })),\n    [config, keys],\n  )\n\n  const dash = strokeVariant === 'dashed' ? '4 4' : undefined\n\n  const defs = (\n    <>\n      {variant === 'area' && (\n        <linearGradient id={`${id}-fade`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor=\"white\" stopOpacity={0.15} />\n          <stop offset=\"100%\" stopColor=\"white\" stopOpacity={0} />\n        </linearGradient>\n      )}\n      {series.map(({ dataKey, stops }) => (\n        <Fragment key={dataKey}>\n          <linearGradient id={`${id}-${dataKey}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            {stops === 1 ? (\n              <>\n                <stop offset=\"0%\" stopColor={`var(--color-${dataKey}-0)`} />\n                <stop offset=\"100%\" stopColor={`var(--color-${dataKey}-0)`} />\n              </>\n            ) : (\n              Array.from({ length: stops }, (_, index) => (\n                <stop\n                  key={index}\n                  offset={`${(index / (stops - 1)) * 100}%`}\n                  stopColor={`var(--color-${dataKey}-${index}, var(--color-${dataKey}-0))`}\n                />\n              ))\n            )}\n          </linearGradient>\n          {variant === 'area' && (\n            <>\n              <mask id={`${id}-fill-mask-${dataKey}`}>\n                <rect width=\"100%\" height=\"100%\" fill={`url(#${id}-fade)`} />\n              </mask>\n              <pattern\n                id={`${id}-fill-${dataKey}`}\n                patternUnits=\"userSpaceOnUse\"\n                width=\"100%\"\n                height=\"100%\"\n              >\n                <rect\n                  width=\"100%\"\n                  height=\"100%\"\n                  fill={`url(#${id}-${dataKey})`}\n                  mask={`url(#${id}-fill-mask-${dataKey})`}\n                />\n              </pattern>\n            </>\n          )}\n        </Fragment>\n      ))}\n    </>\n  )\n\n  if (variant === 'line') {\n    return (\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <LineChart data={data} margin={{ top: 4, right: 0, bottom: 0, left: 0 }}>\n          <defs>{defs}</defs>\n          {keys.map((key) => (\n            <Line\n              key={key}\n              type={curveType}\n              dataKey={key}\n              stroke={`url(#${id}-${key})`}\n              strokeWidth={1}\n              strokeOpacity={0.5}\n              strokeDasharray={dash}\n              connectNulls={connectNulls}\n              dot={false}\n              activeDot={false}\n              isAnimationActive={false}\n            />\n          ))}\n        </LineChart>\n      </ResponsiveContainer>\n    )\n  }\n\n  if (variant === 'bar') {\n    const radius = barRadius ?? 3\n    return (\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <BarChart\n          data={data}\n          margin={{ top: 2, right: 0, bottom: 0, left: 0 }}\n          barGap={2}\n          barSize={14}\n        >\n          <defs>{defs}</defs>\n          {keys.map((key) => (\n            <Bar\n              key={key}\n              dataKey={key}\n              fill={`url(#${id}-${key})`}\n              fillOpacity={0.35}\n              stackId={stacked ? 'brush-stack' : undefined}\n              isAnimationActive={false}\n              radius={[radius, radius, radius, radius]}\n            />\n          ))}\n        </BarChart>\n      </ResponsiveContainer>\n    )\n  }\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <AreaChart data={data} margin={{ top: 4, right: 0, bottom: 0, left: 0 }}>\n        <defs>{defs}</defs>\n        {keys.map((key) => (\n          <Area\n            key={key}\n            type={curveType}\n            dataKey={key}\n            stroke={`url(#${id}-${key})`}\n            fill={`url(#${id}-fill-${key})`}\n            strokeWidth={1}\n            strokeOpacity={0.5}\n            strokeDasharray={dash}\n            connectNulls={connectNulls}\n            fillOpacity={1}\n            stackId={stacked ? 'brush-stack' : undefined}\n            dot={false}\n            activeDot={false}\n            isAnimationActive={false}\n          />\n        ))}\n      </AreaChart>\n    </ResponsiveContainer>\n  )\n}\n\n/**\n * Holds the brush's range and hands back the rows the chart above should draw.\n *\n * The slicing runs on a deferred copy of the range: the handles move at pointer\n * cadence while the chart re-renders at whatever cadence it can manage, which\n * is what keeps a drag smooth over a few thousand rows.\n */\nexport function useChartBrush<TData extends Record<string, unknown>>({\n  data,\n  defaultStartIndex = 0,\n  defaultEndIndex,\n}: {\n  data: TData[]\n  defaultStartIndex?: number\n  defaultEndIndex?: number\n}) {\n  const [range, setRange] = useState<ChartBrushRange>({\n    startIndex: defaultStartIndex,\n    endIndex: defaultEndIndex ?? Math.max(0, data.length - 1),\n  })\n\n  const deferred = useDeferredValue(range)\n\n  useEffect(() => {\n    setRange({ startIndex: 0, endIndex: Math.max(0, data.length - 1) })\n  }, [data.length])\n\n  const visibleData = useMemo(\n    () => data.slice(deferred.startIndex, deferred.endIndex + 1),\n    [data, deferred.endIndex, deferred.startIndex],\n  )\n\n  return {\n    range,\n    visibleData,\n    brushProps: {\n      startIndex: range.startIndex,\n      endIndex: range.endIndex,\n      onChange: setRange,\n    },\n  }\n}\n"],"mappings":"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","names":["Fragment"]}