panelui-native 0.99.0 → 0.101.0

package/lib/module/components/mirror-area-chart/index.js

@@ -0,0 +1,1113 @@
+"use strict";
+
+/**
+ * MirrorAreaChart — two readings of one timeline, one above a baseline and one
+ * below it.
+ *
+ * ```tsx
+ * <MirrorAreaChart data={load} xDataKey="time">
+ *   <MirrorAreaChart.Grid />
+ *   <MirrorAreaChart.Area dataKey="jobs" label="jobs" muted />
+ *   <MirrorAreaChart.Area dataKey="high" label="high priority" />
+ *   <MirrorAreaChart.Area dataKey="share" label="% high" side="bottom" />
+ *   <MirrorAreaChart.Baseline />
+ *   <MirrorAreaChart.Tooltip />
+ * </MirrorAreaChart>
+ * ```
+ *
+ * ## Two scales, one timeline
+ *
+ * Each half has its own scale, because the two readings are usually in
+ * different units — a count above and a percentage below, or requests above
+ * and errors below. Both grow away from the baseline, so a peak in one lines
+ * up with whatever the other did at the same moment, and neither is squeezed
+ * into the other's range.
+ *
+ * Areas on the same side overlay in the order they are declared. Declare the
+ * whole first and the part of it second, so the part is drawn inside the whole.
+ */
+import { Children, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { Easing, cancelAnimation, runOnJS, useAnimatedProps, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import Svg, { Circle, Defs, G, Line as SvgLine, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
+import { useCSSVariable } from 'uniwind';
+import { Text } from "../../primitives/text.js";
+import { ChartAccessibilityData } from "../../primitives/chart-accessibility.js";
+import { finiteChartDomain } from "../../primitives/finite-chart.js";
+import { colorStop, columnValues, compactNumber, dotsPath, segment, useSeriesColor, xOf } from "../../utils/chart.js";
+import { cn } from "../../utils/cn.js";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedLine = Animated.createAnimatedComponent(SvgLine);
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+const PADDING = {
+  top: 12,
+  right: 10,
+  bottom: 30,
+  left: 10
+};
+
+/** Left gutter reserved when a `YAxis` is present. */
+const Y_AXIS_WIDTH = 40;
+
+/** Gap between the value labels and the plot. */
+const Y_AXIS_GUTTER = 6;
+
+/** Box each x label is centred in. */
+const POINT_LABEL_WIDTH = 56;
+
+/** Line height of an `xs` label, for centring one on the line it names. */
+const AXIS_LABEL_HEIGHT = 16;
+
+/** Width of the scrub readout. */
+const READOUT_WIDTH = 168;
+
+/** Diameter of the dot riding the top edge under the crosshair. */
+const DOT = 9;
+const MirrorAreaChartContext = /*#__PURE__*/createContext(null);
+function useChart(component) {
+  const context = useContext(MirrorAreaChartContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <MirrorAreaChart>`);
+  }
+  return context;
+}
+
+/** The row under the crosshair, for a header or a readout outside the chart. */
+export function useMirrorAreaChart() {
+  const {
+    data,
+    activeIndexJS,
+    xDataKey
+  } = useChart('useMirrorAreaChart');
+  return {
+    activeIndex: activeIndexJS,
+    activePoint: activeIndexJS >= 0 ? data[activeIndexJS] ?? null : null,
+    xDataKey
+  };
+}
+
+/**
+ * A series' edge, `grow` of the way out from the baseline. `direction` is `-1`
+ * for the top half and `1` for the bottom. A negative value is drawn on the
+ * baseline: each half only grows away from it.
+ */
+function edgeRuns(values, plot, baseline, height, max, grow, direction) {
+  'worklet';
+
+  const runs = [];
+  let run = [];
+  const span = max > 0 ? max : 1;
+  for (let i = 0; i < values.length; i += 1) {
+    const value = values[i];
+    if (value === null || value === undefined) {
+      if (run.length) runs.push(run);
+      run = [];
+      continue;
+    }
+    const reach = Math.max(value, 0) / span * height * grow;
+    run.push({
+      x: xOf(i, values.length, plot),
+      y: baseline + direction * reach
+    });
+  }
+  if (run.length) runs.push(run);
+  return runs;
+}
+function edgePath(runs, curve) {
+  'worklet';
+
+  let d = '';
+  for (const run of runs) d += `${segment(run, curve)} `;
+  return d;
+}
+function fillPath(runs, curve, baseline) {
+  'worklet';
+
+  let d = '';
+  for (const run of runs) {
+    const edge = segment(run, curve);
+    if (!edge) continue;
+    const first = run[0];
+    const last = run[run.length - 1];
+    d += `${edge} L${last.x},${baseline} L${first.x},${baseline} Z `;
+  }
+  return d;
+}
+
+/** The largest value on one side, padded so a peak does not touch the edge. */
+function sideExtent(data, keys, explicit) {
+  if (explicit) return Math.max(explicit[1], 0) || 1;
+  let max = 0;
+  for (const row of data) {
+    for (const key of keys) {
+      const value = row[key];
+      if (typeof value === 'number' && Number.isFinite(value) && value > max) max = value;
+    }
+  }
+  return max > 0 ? max * 1.08 : 1;
+}
+
+/** Imperative handle: re-run the reveal on demand, for a "replay" control. */
+
+function ChildSlot({
+  children
+}) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+}
+function partition(children) {
+  const svg = [];
+  const series = [];
+  const overlay = [];
+  const header = [];
+  Children.forEach(children, (child, index) => {
+    if (! /*#__PURE__*/isValidElement(child)) return;
+    const layer = child.type.layer ?? 'svg';
+    const slot = /*#__PURE__*/_jsx(ChildSlot, {
+      children: child
+    }, index);
+    const bucket = layer === 'header' ? header : layer === 'overlay' ? overlay : layer === 'series' ? series : svg;
+    bucket.push(slot);
+  });
+  return {
+    svg,
+    series,
+    overlay,
+    header
+  };
+}
+const MirrorAreaChartRoot = /*#__PURE__*/forwardRef(function MirrorAreaChartRoot({
+  className,
+  data,
+  xDataKey = 'date',
+  split = 0.55,
+  topDomain,
+  bottomDomain,
+  curve = 'monotone',
+  status = 'ready',
+  aspectRatio = 1.6,
+  animationDuration = 700,
+  domainDuration = 500,
+  onActiveIndexChange,
+  accessible,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityLabelForDatum,
+  onAccessibilityDatumPress,
+  compact = false,
+  children,
+  ...props
+}, ref) {
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0
+  });
+  const [registered, setRegistered] = useState([]);
+  const [activeIndexJS, setActiveIndexJS] = useState(-1);
+  const grow = useSharedValue(0);
+  const topMax = useSharedValue(0);
+  const bottomMax = useSharedValue(0);
+  const activeIndex = useSharedValue(-1);
+  const reducedMotion = useReducedMotion();
+  const registerSeries = useMemo(() => entry => setRegistered(current => {
+    const existing = current.find(item => item.key === entry.key);
+    if (existing && existing.color === entry.color && existing.label === entry.label && existing.side === entry.side) {
+      return current;
+    }
+    return [...current.filter(item => item.key !== entry.key), entry];
+  }), []);
+  const unregisterSeries = useMemo(() => key => setRegistered(current => current.filter(item => item.key !== key)), []);
+
+  /*
+   * The order the areas were declared in, read from the children rather than
+   * from registration: an area re-registers when its colour resolves, and
+   * appending it again would reorder the legend and the readout.
+   */
+  const {
+    hasYAxis,
+    order
+  } = useMemo(() => {
+    let axis = false;
+    const keys = [];
+    Children.forEach(children, child => {
+      if (! /*#__PURE__*/isValidElement(child)) return;
+      const type = child.type;
+      const childProps = child.props;
+      if (type.axis === 'y') axis = true;
+      if (type.area && typeof childProps.dataKey === 'string') keys.push(childProps.dataKey);
+    });
+    return {
+      hasYAxis: axis,
+      order: keys.join('|')
+    };
+  }, [children]);
+  const series = useMemo(() => {
+    const declared = order ? order.split('|') : [];
+    const position = key => {
+      const index = declared.indexOf(key);
+      return index === -1 ? declared.length : index;
+    };
+    return [...registered].sort((a, b) => position(a.key) - position(b.key));
+  }, [registered, order]);
+  const pad = compact ? {
+    top: 2,
+    right: 1,
+    bottom: 2,
+    left: 1
+  } : {
+    ...PADDING,
+    left: hasYAxis ? Y_AXIS_WIDTH : PADDING.left
+  };
+  const plot = {
+    left: pad.left,
+    top: pad.top,
+    width: Math.max(size.width - pad.left - pad.right, 0),
+    height: Math.max(size.height - pad.top - pad.bottom, 0)
+  };
+  const share = Math.min(Math.max(Number.isFinite(split) ? split : 0.55, 0.1), 0.9);
+  const baseline = plot.top + plot.height * share;
+  const topKeys = series.filter(item => item.side === 'top').map(item => item.key).join('|');
+  const bottomKeys = series.filter(item => item.side === 'bottom').map(item => item.key).join('|');
+  const safeTop = finiteChartDomain(topDomain);
+  const safeBottom = finiteChartDomain(bottomDomain);
+  const topExtent = useMemo(() => sideExtent(data, topKeys ? topKeys.split('|') : [], safeTop),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [data, topKeys, safeTop?.[0], safeTop?.[1]]);
+  const bottomExtent = useMemo(() => sideExtent(data, bottomKeys ? bottomKeys.split('|') : [], safeBottom),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [data, bottomKeys, safeBottom?.[0], safeBottom?.[1]]);
+  const loading = status === 'loading';
+  useEffect(() => {
+    if (loading) return;
+    const first = topMax.value === 0 && bottomMax.value === 0;
+    if (first || reducedMotion) {
+      topMax.value = topExtent;
+      bottomMax.value = bottomExtent;
+      return;
+    }
+    topMax.value = withTiming(topExtent, {
+      duration: domainDuration
+    });
+    bottomMax.value = withTiming(bottomExtent, {
+      duration: domainDuration
+    });
+  }, [topExtent, bottomExtent, loading, reducedMotion, domainDuration, topMax, bottomMax]);
+  const revealed = useRef(false);
+  const playReveal = useMemo(() => () => {
+    if (reducedMotion) {
+      grow.value = 1;
+      return;
+    }
+    grow.value = 0;
+    grow.value = withTiming(1, {
+      duration: animationDuration,
+      easing: Easing.out(Easing.cubic)
+    });
+  }, [reducedMotion, animationDuration, grow]);
+  useEffect(() => {
+    // Going back to `loading` lays the bands flat again, so a refetch grows
+    // them out from the baseline instead of appearing complete.
+    if (loading) {
+      revealed.current = false;
+      cancelAnimation(grow);
+      grow.value = 0;
+      return;
+    }
+    if (revealed.current || plot.width <= 0 || !data.length) return;
+    revealed.current = true;
+    playReveal();
+  }, [loading, plot.width, data.length, playReveal, grow]);
+  useImperativeHandle(ref, () => ({
+    replay: playReveal
+  }), [playReveal]);
+  const handleActiveIndex = useMemo(() => index => {
+    setActiveIndexJS(index);
+    onActiveIndexChange?.(index, index >= 0 ? data[index] ?? null : null);
+  }, [onActiveIndexChange, data]);
+  const onLayout = event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setSize(current => Math.abs(current.width - width) < 1 && Math.abs(current.height - height) < 1 ? current : {
+      width,
+      height
+    });
+    props.onLayout?.(event);
+  };
+  const context = useMemo(() => ({
+    data,
+    xDataKey,
+    plot,
+    pad,
+    baseline,
+    status,
+    curve,
+    series,
+    registerSeries,
+    unregisterSeries,
+    topMax,
+    bottomMax,
+    topExtent,
+    bottomExtent,
+    grow,
+    activeIndex,
+    activeIndexJS,
+    setActiveIndexJS: handleActiveIndex
+  }),
+  // `plot` and `pad` are rebuilt every render from `size`, so they are
+  // compared by value.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [data, xDataKey, plot.width, plot.height, plot.left, plot.top, pad.right, baseline, status, curve, series, registerSeries, unregisterSeries, topMax, bottomMax, topExtent, bottomExtent, grow, activeIndex, activeIndexJS, handleActiveIndex]);
+  const {
+    svg,
+    series: seriesLayer,
+    overlay,
+    header
+  } = partition(children);
+  return /*#__PURE__*/_jsx(MirrorAreaChartContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsxs(View, {
+      ...props,
+      style: props.style,
+      className: cn('w-full', className),
+      children: [header, /*#__PURE__*/_jsx(ChartAccessibilityData, {
+        chart: "Mirror area chart",
+        data: data,
+        disabled: accessible === false || loading,
+        accessibilityLabel: accessibilityLabel,
+        accessibilityHint: accessibilityHint,
+        accessibilityLabelForDatum: accessibilityLabelForDatum,
+        onAccessibilityDatumPress: onAccessibilityDatumPress,
+        valueOf: datum => [[xDataKey, datum[xDataKey]], ...series.map(item => [item.label, datum[item.key]])]
+      }), /*#__PURE__*/_jsx(View, {
+        onLayout: onLayout,
+        style: {
+          aspectRatio
+        },
+        className: "w-full",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: plot.width > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(Svg, {
+            width: "100%",
+            height: "100%",
+            style: StyleSheet.absoluteFill,
+            children: [svg, /*#__PURE__*/_jsx(G, {
+              children: seriesLayer
+            })]
+          }), overlay]
+        }) : null
+      })]
+    })
+  });
+});
+MirrorAreaChartRoot.displayName = 'MirrorAreaChart';
+
+/* -------------------------------------------------------------------------- */
+/* SVG layer                                                                  */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The texture behind the bands. Dots by default, which mark the plot's extent
+ * without drawing lines that compete with the baseline.
+ */
+function MirrorAreaChartGrid({
+  variant = 'dots',
+  spacing,
+  color,
+  opacity = 1
+}) {
+  const {
+    plot,
+    baseline
+  } = useChart('MirrorAreaChart.Grid');
+  const token = useCSSVariable('--color-border');
+  const stroke = color ?? (typeof token === 'string' ? token : 'rgba(0,0,0,0.1)');
+  const dots = useMemo(() => {
+    if (variant !== 'dots') return '';
+    const gap = Math.max(spacing ?? 12, 4);
+    const points = [];
+    const columns = Math.floor(plot.width / gap);
+    const offsetX = plot.left + (plot.width - columns * gap) / 2;
+    // Rows are laid out from the baseline in both directions, so one row
+    // always lies on it and the pattern is symmetrical about it.
+    for (let y = baseline; y >= plot.top - 0.5; y -= gap) {
+      for (let c = 0; c <= columns; c += 1) points.push({
+        x: offsetX + c * gap,
+        y
+      });
+    }
+    for (let y = baseline + gap; y <= plot.top + plot.height + 0.5; y += gap) {
+      for (let c = 0; c <= columns; c += 1) points.push({
+        x: offsetX + c * gap,
+        y
+      });
+    }
+    return dotsPath(points, 0.9);
+  }, [variant, spacing, plot.left, plot.top, plot.width, plot.height, baseline]);
+  if (variant === 'dots') {
+    return /*#__PURE__*/_jsx(Path, {
+      d: dots,
+      fill: stroke,
+      opacity: opacity
+    });
+  }
+  const rules = Math.max(Math.round(spacing ?? 2), 1);
+  const lines = [];
+  for (let i = 1; i <= rules; i += 1) {
+    lines.push(baseline - (baseline - plot.top) * i / rules);
+    lines.push(baseline + (plot.top + plot.height - baseline) * i / rules);
+  }
+  return /*#__PURE__*/_jsx(G, {
+    opacity: opacity,
+    children: lines.map(y => /*#__PURE__*/_jsx(SvgLine, {
+      x1: plot.left,
+      x2: plot.left + plot.width,
+      y1: y,
+      y2: y,
+      stroke: stroke,
+      strokeDasharray: "4,6",
+      strokeWidth: 1
+    }, y))
+  });
+}
+MirrorAreaChartGrid.displayName = 'MirrorAreaChart.Grid';
+MirrorAreaChartGrid.layer = 'svg';
+/**
+ * The line both halves grow away from. Declare it after the areas so it is
+ * drawn over their bases.
+ */
+function MirrorAreaChartBaseline({
+  color,
+  strokeWidth = 1,
+  opacity = 0.5
+}) {
+  const {
+    plot,
+    baseline
+  } = useChart('MirrorAreaChart.Baseline');
+  const token = useCSSVariable('--color-muted-foreground');
+  const stroke = color ?? (typeof token === 'string' ? token : '#737373');
+  return /*#__PURE__*/_jsx(SvgLine, {
+    x1: plot.left,
+    x2: plot.left + plot.width,
+    y1: baseline,
+    y2: baseline,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    opacity: opacity
+  });
+}
+MirrorAreaChartBaseline.displayName = 'MirrorAreaChart.Baseline';
+MirrorAreaChartBaseline.layer = 'series';
+/**
+ * One band, growing away from the baseline on its side. Areas on one side
+ * overlay in declaration order, so a whole declared first is drawn behind a
+ * part of it declared second.
+ */
+function MirrorAreaChartArea({
+  dataKey,
+  side = 'top',
+  label,
+  color,
+  colorIndex = 1,
+  muted = false,
+  fillOpacity,
+  gradientToOpacity,
+  showLine = true,
+  strokeWidth = 1.5
+}) {
+  const {
+    data,
+    plot,
+    baseline,
+    curve,
+    registerSeries,
+    unregisterSeries,
+    topMax,
+    bottomMax,
+    grow
+  } = useChart('MirrorAreaChart.Area');
+  const seriesColor = useSeriesColor(color, colorIndex);
+  const mutedToken = useCSSVariable('--color-muted-foreground');
+  const stroke = muted && !color ? typeof mutedToken === 'string' ? mutedToken : '#737373' : seriesColor;
+  const name = label ?? dataKey;
+  const gradientId = `panelui-mirror-fill-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+  const outer = fillOpacity ?? (muted ? 0.22 : 0.3);
+  const inner = gradientToOpacity ?? outer;
+  useEffect(() => {
+    registerSeries({
+      key: dataKey,
+      color: stroke,
+      label: name,
+      side
+    });
+  }, [dataKey, stroke, name, side, registerSeries]);
+  useEffect(() => () => unregisterSeries(dataKey), [dataKey, unregisterSeries]);
+  const values = useMemo(() => columnValues(data, dataKey), [data, dataKey]);
+  const top = side === 'top';
+  const height = top ? baseline - plot.top : plot.top + plot.height - baseline;
+  const fillProps = useAnimatedProps(() => {
+    const runs = edgeRuns(values, plot, baseline, height, top ? topMax.value : bottomMax.value, grow.value, top ? -1 : 1);
+    return {
+      d: fillPath(runs, curve, baseline)
+    };
+  });
+  const lineProps = useAnimatedProps(() => {
+    const runs = edgeRuns(values, plot, baseline, height, top ? topMax.value : bottomMax.value, grow.value, top ? -1 : 1);
+    // Hidden while the band is flat, or the edge lines of every area are
+    // drawn along the baseline over the skeleton while the chart waits.
+    return {
+      d: edgePath(runs, curve),
+      opacity: grow.value > 0.001 ? 1 : 0
+    };
+  });
+  return /*#__PURE__*/_jsxs(G, {
+    children: [/*#__PURE__*/_jsx(Defs, {
+      children: /*#__PURE__*/_jsxs(LinearGradient, {
+        id: gradientId,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: [/*#__PURE__*/_jsx(Stop, {
+          offset: "0",
+          stopColor: stroke,
+          stopOpacity: top ? outer : inner
+        }), /*#__PURE__*/_jsx(Stop, {
+          offset: "1",
+          stopColor: stroke,
+          stopOpacity: top ? inner : outer
+        })]
+      })
+    }), /*#__PURE__*/_jsx(AnimatedPath, {
+      animatedProps: fillProps,
+      fill: `url(#${gradientId})`
+    }), showLine ? /*#__PURE__*/_jsx(AnimatedPath, {
+      animatedProps: lineProps,
+      stroke: stroke,
+      strokeWidth: strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none"
+    }) : null]
+  });
+}
+MirrorAreaChartArea.displayName = 'MirrorAreaChart.Area';
+MirrorAreaChartArea.layer = 'series';
+// Read by the root, for the order the areas were declared in.
+MirrorAreaChartArea.area = true;
+/**
+ * The loading state: a low band either side of the baseline with a highlight
+ * travelling across it. Flat, so it says where the bands will be and nothing
+ * about their shape.
+ */
+function MirrorAreaChartSkeleton({
+  duration = 1400,
+  color
+}) {
+  const {
+    plot,
+    baseline,
+    status
+  } = useChart('MirrorAreaChart.Skeleton');
+  const token = useCSSVariable('--color-skeleton');
+  const base = color ?? (typeof token === 'string' ? token : 'rgba(128,128,128,0.2)');
+  const highlight = useSeriesColor(undefined, 1);
+  const sweep = useSharedValue(0);
+  const reducedMotion = useReducedMotion();
+  const loading = status === 'loading';
+  useEffect(() => {
+    if (!loading || reducedMotion) {
+      cancelAnimation(sweep);
+      sweep.value = 0;
+      return;
+    }
+    sweep.value = 0;
+    sweep.value = withRepeat(withTiming(1, {
+      duration,
+      easing: Easing.linear
+    }), -1, false);
+    return () => cancelAnimation(sweep);
+  }, [loading, reducedMotion, duration, sweep]);
+  const animatedProps = useAnimatedProps(() => ({
+    x1: `${(sweep.value * 1.4 - 0.4) * 100}%`,
+    x2: `${(sweep.value * 1.4 - 0.4 + 0.4) * 100}%`
+  }));
+  if (!loading) return null;
+  const above = (baseline - plot.top) * 0.18;
+  const below = (plot.top + plot.height - baseline) * 0.18;
+  const gradientId = 'panelui-mirror-skeleton';
+  return /*#__PURE__*/_jsxs(G, {
+    children: [/*#__PURE__*/_jsx(Defs, {
+      children: /*#__PURE__*/_jsxs(AnimatedLinearGradient, {
+        id: gradientId,
+        animatedProps: animatedProps,
+        y1: "0",
+        y2: "0",
+        children: [/*#__PURE__*/_jsx(Stop, {
+          offset: "0",
+          ...colorStop(base)
+        }), /*#__PURE__*/_jsx(Stop, {
+          offset: "0.5",
+          stopColor: highlight,
+          stopOpacity: 0.3
+        }), /*#__PURE__*/_jsx(Stop, {
+          offset: "1",
+          ...colorStop(base)
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Rect, {
+      x: plot.left,
+      y: baseline - above,
+      width: plot.width,
+      height: above + below,
+      fill: `url(#${gradientId})`
+    })]
+  });
+}
+MirrorAreaChartSkeleton.displayName = 'MirrorAreaChart.Skeleton';
+MirrorAreaChartSkeleton.layer = 'svg';
+
+/* -------------------------------------------------------------------------- */
+/* Overlay layer                                                              */
+/* -------------------------------------------------------------------------- */
+
+/** The x labels. Real text, so they follow the theme's font and text scaling. */
+function MirrorAreaChartXAxis({
+  ticks = 4,
+  format,
+  className
+}) {
+  const {
+    data,
+    xDataKey,
+    plot,
+    pad
+  } = useChart('MirrorAreaChart.XAxis');
+  const labels = useMemo(() => {
+    if (!data.length) return [];
+    const count = Math.min(ticks, data.length);
+    const step = count > 1 ? (data.length - 1) / (count - 1) : 0;
+    return Array.from({
+      length: count
+    }, (_unused, index) => {
+      const dataIndex = Math.round(index * step);
+      const datum = data[dataIndex];
+      if (!datum) return null;
+      return {
+        key: dataIndex,
+        text: format ? format(datum, dataIndex) : String(datum[xDataKey] ?? '')
+      };
+    }).filter(label => label !== null);
+  }, [data, ticks, format, xDataKey]);
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      pointerEvents: 'none'
+    },
+    className: cn(className),
+    children: labels.map(label => /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      muted: true,
+      numberOfLines: 1,
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        left: Math.max(0, Math.min(xOf(label.key, data.length, plot) - POINT_LABEL_WIDTH / 2, plot.left + plot.width + pad.right - POINT_LABEL_WIDTH)),
+        width: POINT_LABEL_WIDTH,
+        textAlign: 'center'
+      },
+      children: label.text
+    }, label.key))
+  });
+}
+MirrorAreaChartXAxis.displayName = 'MirrorAreaChart.XAxis';
+MirrorAreaChartXAxis.layer = 'overlay';
+/**
+ * Three labels down the side: the top half's maximum, zero on the baseline,
+ * and the bottom half's maximum. Two scales need two labels, and a column of
+ * evenly spaced numbers would suggest one.
+ */
+function MirrorAreaChartYAxis({
+  formatTop,
+  formatBottom,
+  className
+}) {
+  const {
+    plot,
+    baseline,
+    topExtent,
+    bottomExtent
+  } = useChart('MirrorAreaChart.YAxis');
+  const width = Math.max(plot.left - Y_AXIS_GUTTER, 0);
+  const fmtTop = formatTop ?? compactNumber;
+  const fmtBottom = formatBottom ?? compactNumber;
+  const labels = [{
+    key: 'top',
+    y: plot.top,
+    text: fmtTop(topExtent)
+  }, {
+    key: 'zero',
+    y: baseline,
+    text: '0'
+  }, {
+    key: 'bottom',
+    y: plot.top + plot.height,
+    text: fmtBottom(bottomExtent)
+  }];
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      pointerEvents: 'none'
+    },
+    className: cn(className),
+    children: labels.map(label => /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      muted: true,
+      numberOfLines: 1,
+      style: {
+        position: 'absolute',
+        left: 0,
+        top: label.y - AXIS_LABEL_HEIGHT / 2,
+        width,
+        textAlign: 'right'
+      },
+      children: label.text
+    }, label.key))
+  });
+}
+MirrorAreaChartYAxis.displayName = 'MirrorAreaChart.YAxis';
+MirrorAreaChartYAxis.layer = 'overlay';
+// Read by the root, which leaves room for the labels before laying the plot out.
+MirrorAreaChartYAxis.axis = 'y';
+/**
+ * A dashed crosshair, a dot on the outer edge of the top half, and a readout
+ * beside them. The hit area is the whole plot.
+ */
+function MirrorAreaChartTooltip({
+  color,
+  formatValue,
+  formatX,
+  formatSummary,
+  className
+}) {
+  const {
+    data,
+    xDataKey,
+    plot,
+    baseline,
+    series,
+    topMax,
+    bottomMax,
+    grow,
+    activeIndex,
+    activeIndexJS,
+    setActiveIndexJS,
+    status
+  } = useChart('MirrorAreaChart.Tooltip');
+  const token = useCSSVariable('--color-foreground');
+  const stroke = color ?? (typeof token === 'string' ? token : '#888888');
+  const background = useCSSVariable('--color-background');
+  const ring = typeof background === 'string' ? background : 'white';
+  const total = data.length;
+  const left = plot.left;
+  const width = plot.width;
+
+  // Declared inside the memo, next to its callers: a worklet may only call
+  // another worklet.
+  const pan = useMemo(() => {
+    const resolve = x => {
+      'worklet';
+
+      if (total < 1 || width <= 0) return;
+      const ratio = total < 2 ? 0 : (x - left) / width;
+      const next = Math.round(Math.min(1, Math.max(0, ratio)) * (total - 1));
+      if (next === activeIndex.value) return;
+      activeIndex.value = next;
+      runOnJS(setActiveIndexJS)(next);
+    };
+    return Gesture.Pan().minDistance(0).onBegin(event => {
+      'worklet';
+
+      resolve(event.x);
+    }).onUpdate(event => {
+      'worklet';
+
+      resolve(event.x);
+    }).onFinalize(() => {
+      'worklet';
+
+      activeIndex.value = -1;
+      runOnJS(setActiveIndexJS)(-1);
+    });
+  }, [total, left, width, activeIndex, setActiveIndexJS]);
+
+  /*
+   * The dot sits on the outermost edge on the top half — the largest value of
+   * any top area at that point — or on the bottom half's when there is no top.
+   */
+  const topSeries = series.filter(item => item.side === 'top');
+  const dotSide = topSeries.length ? 'top' : 'bottom';
+  const dotValues = useMemo(() => {
+    const keys = series.filter(item => item.side === dotSide).map(item => item.key);
+    return data.map(row => {
+      let most = null;
+      for (const key of keys) {
+        const value = row[key];
+        if (typeof value === 'number' && Number.isFinite(value) && (most === null || value > most)) {
+          most = value;
+        }
+      }
+      return most;
+    });
+  }, [data, series, dotSide]);
+  const topHeight = baseline - plot.top;
+  const bottomHeight = plot.top + plot.height - baseline;
+  const dotProps = useAnimatedProps(() => {
+    const index = activeIndex.value;
+    const value = index >= 0 ? dotValues[index] : null;
+    if (index < 0 || value === null || value === undefined) return {
+      opacity: 0,
+      cx: 0,
+      cy: 0
+    };
+    const up = dotSide === 'top';
+    const max = up ? topMax.value : bottomMax.value;
+    const reach = Math.max(value, 0) / (max > 0 ? max : 1) * (up ? topHeight : bottomHeight) * grow.value;
+    return {
+      opacity: 1,
+      cx: xOf(index, total, plot),
+      cy: baseline + (up ? -reach : reach)
+    };
+  });
+  const crosshairProps = useAnimatedProps(() => {
+    const index = activeIndex.value;
+    const x = index < 0 ? 0 : xOf(index, total, plot);
+    return {
+      x1: x,
+      x2: x,
+      opacity: index < 0 ? 0 : 0.6
+    };
+  });
+
+  // Beside the crosshair, on whichever side has room, so it never covers the
+  // point it describes.
+  const readoutStyle = useAnimatedStyle(() => {
+    const index = activeIndex.value;
+    if (index < 0) return {
+      opacity: 0
+    };
+    const x = xOf(index, total, plot);
+    // Clear of the dot's radius and its ring, not only of the crosshair.
+    const gap = DOT / 2 + 10;
+    const fitsLeft = x - gap - READOUT_WIDTH >= plot.left;
+    const at = fitsLeft ? x - gap - READOUT_WIDTH : Math.min(x + gap, plot.left + plot.width - READOUT_WIDTH);
+    return {
+      opacity: 1,
+      transform: [{
+        translateX: at
+      }]
+    };
+  });
+  const active = activeIndexJS >= 0 ? data[activeIndexJS] : null;
+  const fmtValue = formatValue ?? (value => compactNumber(value));
+  const fmtX = formatX ?? (datum => String(datum[xDataKey] ?? ''));
+  if (status === 'loading') return null;
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: pan,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: StyleSheet.absoluteFill,
+      children: [/*#__PURE__*/_jsxs(Svg, {
+        width: "100%",
+        height: "100%",
+        style: StyleSheet.absoluteFill,
+        pointerEvents: "none",
+        children: [/*#__PURE__*/_jsx(AnimatedLine, {
+          animatedProps: crosshairProps,
+          y1: plot.top,
+          y2: plot.top + plot.height,
+          stroke: stroke,
+          strokeWidth: 1,
+          strokeDasharray: "3,4"
+        }), /*#__PURE__*/_jsx(AnimatedCircle, {
+          animatedProps: dotProps,
+          r: DOT / 2,
+          fill: stroke,
+          stroke: ring,
+          strokeWidth: 2
+        })]
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [{
+          position: 'absolute',
+          left: 0,
+          top: plot.top,
+          width: READOUT_WIDTH
+        }, readoutStyle],
+        children: active ? /*#__PURE__*/_jsxs(View, {
+          className: cn('gap-0.5 rounded-xl border border-border bg-popover px-2.5 py-1.5 shadow-lg', className),
+          children: [/*#__PURE__*/_jsx(Text, {
+            size: "xs",
+            muted: true,
+            numberOfLines: 1,
+            children: fmtX(active)
+          }), formatSummary ? /*#__PURE__*/_jsx(Text, {
+            size: "xs",
+            weight: "semibold",
+            numberOfLines: 2,
+            children: formatSummary(active)
+          }) : series.map(item => {
+            const value = active[item.key];
+            if (typeof value !== 'number') return null;
+            return /*#__PURE__*/_jsxs(View, {
+              className: "flex-row items-center gap-1.5",
+              children: [/*#__PURE__*/_jsx(View, {
+                style: {
+                  width: 6,
+                  height: 6,
+                  borderRadius: 3,
+                  backgroundColor: item.color
+                }
+              }), /*#__PURE__*/_jsx(Text, {
+                size: "xs",
+                weight: "medium",
+                children: fmtValue(value, item.key)
+              }), /*#__PURE__*/_jsx(Text, {
+                size: "xs",
+                muted: true,
+                numberOfLines: 1,
+                className: "shrink",
+                children: item.label
+              })]
+            }, item.key);
+          })]
+        }) : null
+      })]
+    })
+  });
+}
+MirrorAreaChartTooltip.displayName = 'MirrorAreaChart.Tooltip';
+MirrorAreaChartTooltip.layer = 'overlay';
+/** A swatch and a name per area, top half first. */
+function MirrorAreaChartLegend({
+  className,
+  ...props
+}) {
+  const {
+    series
+  } = useChart('MirrorAreaChart.Legend');
+  if (!series.length) return null;
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    style: [{
+      pointerEvents: 'none'
+    }, props.style],
+    className: cn('absolute right-2 top-0 flex-row flex-wrap gap-3', className),
+    children: sidesInOrder(series).map(item => /*#__PURE__*/_jsx(SeriesSwatch, {
+      color: item.color,
+      label: item.label
+    }, item.key))
+  });
+}
+MirrorAreaChartLegend.displayName = 'MirrorAreaChart.Legend';
+MirrorAreaChartLegend.layer = 'overlay';
+
+/** Top-half areas first, then the bottom half's, each in declaration order. */
+function sidesInOrder(series) {
+  return [...series.filter(item => item.side === 'top'), ...series.filter(item => item.side === 'bottom')];
+}
+
+/** One series' colour and name. Shared by the legend and the header. */
+function SeriesSwatch({
+  color,
+  label
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    className: "flex-row items-center gap-1.5",
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        backgroundColor: color
+      },
+      className: "h-2 w-2 rounded-full"
+    }), /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      muted: true,
+      children: label
+    })]
+  });
+}
+
+/* -------------------------------------------------------------------------- */
+/* Header layer                                                               */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The strip above the plot: what the chart is of and what it currently reads.
+ * The value is not derived here — pass the formatted string, from
+ * `onActiveIndexChange` if it follows the finger.
+ */
+function MirrorAreaChartHeader({
+  className,
+  title,
+  value,
+  caption,
+  legend = false,
+  children,
+  ...props
+}) {
+  const {
+    series
+  } = useChart('MirrorAreaChart.Header');
+  const trailing = children ?? (legend && series.length ? /*#__PURE__*/_jsx(View, {
+    className: "flex-row flex-wrap items-center justify-end gap-x-3 gap-y-1",
+    children: sidesInOrder(series).map(item => /*#__PURE__*/_jsx(SeriesSwatch, {
+      color: item.color,
+      label: item.label
+    }, item.key))
+  }) : null);
+  return /*#__PURE__*/_jsxs(View, {
+    ...props,
+    className: cn('flex-row items-start justify-between gap-3 pb-3', className),
+    children: [/*#__PURE__*/_jsxs(View, {
+      className: "flex-1 gap-0.5",
+      children: [title ? /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        children: title
+      }) : null, value ? /*#__PURE__*/_jsx(Text, {
+        size: "xl",
+        weight: "bold",
+        children: value
+      }) : null, caption ? /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        muted: true,
+        children: caption
+      }) : null]
+    }), trailing ? /*#__PURE__*/_jsx(View, {
+      className: "shrink pt-1",
+      children: trailing
+    }) : null]
+  });
+}
+MirrorAreaChartHeader.displayName = 'MirrorAreaChart.Header';
+MirrorAreaChartHeader.layer = 'header';
+export const MirrorAreaChart = Object.assign(MirrorAreaChartRoot, {
+  Header: MirrorAreaChartHeader,
+  Grid: MirrorAreaChartGrid,
+  Area: MirrorAreaChartArea,
+  Baseline: MirrorAreaChartBaseline,
+  Skeleton: MirrorAreaChartSkeleton,
+  XAxis: MirrorAreaChartXAxis,
+  YAxis: MirrorAreaChartYAxis,
+  Tooltip: MirrorAreaChartTooltip,
+  Legend: MirrorAreaChartLegend
+});
+//# sourceMappingURL=index.js.map