@btndprojects/loam-ui-native 0.0.0-stage → 0.1.1

package/dist/chunk-7O2FMUPT.js

@@ -0,0 +1,755 @@
+import { Skeleton } from './chunk-RIBDXGUG.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React2 from 'react';
+import { PanResponder, View, Text, Pressable, ScrollView } from 'react-native';
+import Svg, { Defs, LinearGradient, Stop, Pattern, Rect, ClipPath, G, Text as Text$1, Circle, Path } from 'react-native-svg';
+import { createValuePalette, FULL_WINDOW, normalizeSpec, resolveHeight, isWholePlot, renderChart, tableModel, describeChart, readoutRows, pick, clampWindow, zoomAt, isZoomed, panBy, toCsv, NARROW_WIDTH, TIGHT_WIDTH, sceneToSvg } from '@btndprojects/loam-charts';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+function nativeChartPalette(theme) {
+  const c = theme.color;
+  const chart = theme.chart;
+  const tokens = {
+    surface: c.surface,
+    "surface-2": c.surface2,
+    "surface-3": c.surface3,
+    text: c.text,
+    "text-2": c.text2,
+    "text-3": c.text3,
+    border: c.border,
+    "border-strong": c.borderStrong,
+    accent: c.accent,
+    "accent-strong": c.accentStrong,
+    "accent-soft": c.accentSoft,
+    good: c.good,
+    warn: c.warn,
+    danger: c.danger,
+    info: c.info,
+    "chart-grid": chart.grid,
+    "chart-axis": chart.axis,
+    "state-hover-strong": theme.state.hoverStrong
+  };
+  return createValuePalette({
+    series: [chart.c1, chart.c2, chart.c3, chart.c4, chart.c5, chart.c6, ...chart.tier],
+    seriesInk: [chart.c1Ink, chart.c2Ink, chart.c3Ink, chart.c4Ink, chart.c5Ink, chart.c6Ink, ...chart.tierInk],
+    seriesEdge: chart.edge,
+    seq: chart.seq,
+    div: chart.div,
+    tokens
+  });
+}
+function fontOf(theme, role) {
+  if (role === "mono") return theme.font.mono;
+  if (role === "display") return theme.font.display;
+  return theme.font.sans;
+}
+function nodeOf(n, key, theme, clipId) {
+  switch (n.k) {
+    case "path":
+      return /* @__PURE__ */ jsx(
+        Path,
+        {
+          d: n.d,
+          fill: n.fill ?? "none",
+          stroke: n.stroke,
+          strokeWidth: n.sw,
+          strokeDasharray: n.dash,
+          strokeLinecap: n.cap,
+          strokeLinejoin: n.join,
+          opacity: n.op
+        },
+        key
+      );
+    case "rect":
+      return /* @__PURE__ */ jsx(
+        Rect,
+        {
+          x: n.x,
+          y: n.y,
+          width: n.w,
+          height: n.h,
+          rx: n.rx,
+          fill: n.fill ?? "none",
+          stroke: n.stroke,
+          strokeWidth: n.sw,
+          opacity: n.op
+        },
+        key
+      );
+    case "circle":
+      return /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: n.cx,
+          cy: n.cy,
+          r: n.r,
+          fill: n.fill ?? "none",
+          stroke: n.stroke,
+          strokeWidth: n.sw,
+          opacity: n.op
+        },
+        key
+      );
+    case "text":
+      return /* @__PURE__ */ jsx(
+        Text$1,
+        {
+          x: n.x,
+          y: n.y,
+          textAnchor: n.anchor,
+          transform: n.transform,
+          fontSize: n.size,
+          fontWeight: n.weight ? String(n.weight) : void 0,
+          fill: n.fill,
+          fontFamily: fontOf(theme, n.font),
+          letterSpacing: n.tracking,
+          opacity: n.op,
+          children: n.text
+        },
+        key
+      );
+    case "group":
+      return /* @__PURE__ */ jsx(G, { clipPath: n.clip === "plot" ? `url(#${clipId})` : void 0, children: n.children.map((c, i) => nodeOf(c, i, theme, clipId)) }, key);
+    default:
+      return null;
+  }
+}
+function SceneNodes({
+  scene,
+  theme,
+  clipId
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: scene.map((n, i) => nodeOf(n, i, theme, clipId)) });
+}
+function patternBody(kind, edge) {
+  switch (kind) {
+    case "diagonal":
+      return /* @__PURE__ */ jsx(Path, { d: "M0,6 l6,-6 M-1.5,1.5 l3,-3 M4.5,7.5 l3,-3", stroke: edge, strokeWidth: 1.6, opacity: 0.9 });
+    case "dots":
+      return /* @__PURE__ */ jsx(Circle, { cx: 3, cy: 3, r: 1.35, fill: edge, opacity: 0.9 });
+    case "cross":
+      return /* @__PURE__ */ jsx(Path, { d: "M0,3 h6 M3,0 v6", stroke: edge, strokeWidth: 1.2, opacity: 0.85 });
+    case "horizontal":
+      return /* @__PURE__ */ jsx(Path, { d: "M0,2 h6 M0,5 h6", stroke: edge, strokeWidth: 1.3, opacity: 0.85 });
+    case "vertical":
+      return /* @__PURE__ */ jsx(Path, { d: "M2,0 v6 M5,0 v6", stroke: edge, strokeWidth: 1.3, opacity: 0.85 });
+    default:
+      return null;
+  }
+}
+function SceneDefsNodes({ defs, clipId }) {
+  return /* @__PURE__ */ jsxs(Defs, { children: [
+    defs.gradients.map((g) => /* @__PURE__ */ jsxs(LinearGradient, { id: g.id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx(Stop, { offset: "0%", stopColor: g.from, stopOpacity: g.fromOpacity }),
+      /* @__PURE__ */ jsx(Stop, { offset: "100%", stopColor: g.to, stopOpacity: g.toOpacity })
+    ] }, g.id)),
+    defs.patterns.map((p) => /* @__PURE__ */ jsxs(Pattern, { id: p.id, width: 6, height: 6, patternUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx(Rect, { width: 6, height: 6, fill: p.color, opacity: 0.5 }),
+      patternBody(p.kind, p.edge)
+    ] }, p.id)),
+    /* @__PURE__ */ jsx(ClipPath, { id: clipId, children: /* @__PURE__ */ jsx(Rect, { x: defs.clip.x, y: defs.clip.y, width: defs.clip.w, height: defs.clip.h }) })
+  ] });
+}
+var UID = 0;
+function svgDocument(frame, uid, width, height, fonts) {
+  const body = sceneToSvg(frame.scene, frame.defs, uid);
+  const rootVars = `--font-sans:${fonts.sans};--font-mono:${fonts.mono}`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" style="${escapeAttr(rootVars)}">${body}</svg>`;
+}
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
+}
+function Chart({
+  style,
+  bare,
+  defaultTableOpen = false,
+  onExportCsv,
+  onExportImage,
+  onVisibilityChange,
+  onZoomChange,
+  ...specInput
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(stylesheet);
+  const uid = React2.useMemo(() => "lc" + ++UID, []);
+  const palette = React2.useMemo(() => nativeChartPalette(theme), [theme]);
+  const [width, setWidth] = React2.useState(0);
+  const [hidden, setHidden] = React2.useState({});
+  const [solo, setSolo] = React2.useState(null);
+  const [pinned, setPinned] = React2.useState(null);
+  const [tableOpen, setTableOpen] = React2.useState(defaultTableOpen);
+  const [zoom, setZoomState] = React2.useState(FULL_WINDOW);
+  const spec = React2.useMemo(() => normalizeSpec(specInput), [specInput]);
+  const measured = width || 360;
+  const narrow = measured < NARROW_WIDTH;
+  const tight = measured < TIGHT_WIDTH;
+  const height = resolveHeight(spec, measured, narrow);
+  const wholePlot = isWholePlot(spec.type);
+  const frame = React2.useMemo(
+    () => renderChart(spec, {
+      width: measured,
+      height,
+      narrow,
+      tight,
+      highlight: pinned,
+      zoom,
+      hidden,
+      solo,
+      palette,
+      uid
+    }),
+    [spec, measured, height, narrow, tight, pinned, zoom, hidden, solo, palette, uid]
+  );
+  const table = React2.useMemo(() => tableModel(frame), [frame]);
+  const description = React2.useMemo(() => describeChart(frame, { keyboardHint: false }), [frame]);
+  const rows = React2.useMemo(
+    () => pinned ? readoutRows(frame, pinned, { itemOnly: spec.tooltip.trigger === "item" && !narrow }) : [],
+    [frame, pinned, narrow, spec.tooltip.trigger]
+  );
+  const frameRef = React2.useRef(frame);
+  frameRef.current = frame;
+  const specRef = React2.useRef(spec);
+  specRef.current = spec;
+  const scaleRef = React2.useRef(1);
+  scaleRef.current = measured / (width || measured);
+  const originRef = React2.useRef({ x: 0, y: 0 });
+  const scrub = React2.useCallback((lx, ly) => {
+    const f = frameRef.current;
+    const s = specRef.current;
+    const k = scaleRef.current;
+    const x = (lx - originRef.current.x) * k;
+    const y = (ly - originRef.current.y) * k;
+    const mode = s.tooltip.trigger === "item" ? "nearest" : "index";
+    const hit = pick(f.items, x, y, isWholePlot(s.type) ? "nearest" : mode, { radius: 56, horizontal: f.horizontal });
+    if (hit) {
+      setPinned({ si: hit.si, di: hit.di, kind: hit.linkKind });
+      s.onSelect?.(hit, s.series[hit.si]);
+    }
+  }, []);
+  const zoomEnabled = !!spec.zoom && !wholePlot;
+  const zoomRef = React2.useRef(zoom);
+  zoomRef.current = zoom;
+  const setZoom = React2.useCallback(
+    (next) => {
+      const win = clampWindow(next, 0.03);
+      setZoomState(win);
+      onZoomChange?.(win);
+    },
+    [onZoomChange]
+  );
+  const resetZoom = React2.useCallback(() => setZoom(FULL_WINDOW), [setZoom]);
+  const pinchRef = React2.useRef(null);
+  const lastTapRef = React2.useRef(0);
+  const pinchGeometry = React2.useCallback((touches) => {
+    const [a, b] = touches;
+    if (!a || !b) return null;
+    const dist = Math.hypot(a.pageX - b.pageX, a.pageY - b.pageY);
+    const f = frameRef.current;
+    const plot = f.plot;
+    const midX = (a.pageX + b.pageX) / 2 - originRef.current.x - plot.x;
+    return { dist, anchor: plot.w ? Math.min(1, Math.max(0, midX / plot.w)) : 0.5 };
+  }, []);
+  const responder = React2.useMemo(
+    () => PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      // Axis intent, and the whole reason a chart can live inside a
+      // ScrollView: a dominantly vertical drag is the page's, and this
+      // responder never claims it. A chart that eats the scroll traps the
+      // reader mid-page; one that claims no touch at all is unreadable.
+      // Two fingers are always ours: nothing else on the page pinches.
+      onMoveShouldSetPanResponder: (e, g) => zoomEnabled && e.nativeEvent.touches.length >= 2 || Math.abs(g.dx) > Math.abs(g.dy) * 1.25 && Math.abs(g.dx) > 6,
+      onPanResponderGrant: (e) => {
+        const now = Date.now();
+        if (zoomEnabled && now - lastTapRef.current < 300 && isZoomed(zoomRef.current)) {
+          lastTapRef.current = 0;
+          resetZoom();
+          return;
+        }
+        lastTapRef.current = now;
+        pinchRef.current = null;
+        scrub(e.nativeEvent.locationX, e.nativeEvent.locationY);
+      },
+      onPanResponderMove: (e) => {
+        const touches = e.nativeEvent.touches;
+        if (zoomEnabled && touches.length >= 2) {
+          const geo = pinchGeometry(touches);
+          if (!geo) return;
+          if (!pinchRef.current) {
+            pinchRef.current = { dist: geo.dist, win: zoomRef.current, anchor: geo.anchor };
+            return;
+          }
+          const start = pinchRef.current;
+          if (start.dist <= 0) return;
+          setZoom(zoomAt(start.win, start.dist / geo.dist, start.anchor, 0.03));
+          return;
+        }
+        pinchRef.current = null;
+        scrub(e.nativeEvent.locationX, e.nativeEvent.locationY);
+      },
+      onPanResponderRelease: () => {
+        pinchRef.current = null;
+      },
+      onPanResponderTerminate: () => {
+        pinchRef.current = null;
+      }
+    }),
+    [scrub, zoomEnabled, resetZoom, setZoom, pinchGeometry]
+  );
+  const legendEntries = React2.useMemo(() => {
+    const itemLegend = ["pie", "donut", "polarArea", "funnel", "pyramid", "radialBar", "waffle"].includes(spec.type);
+    if (wholePlot && !itemLegend) return [];
+    if (wholePlot) {
+      const raw = spec.series[0]?.data || spec.data;
+      return (Array.isArray(raw) ? raw : []).map((d, i) => ({
+        id: "i" + i,
+        label: (d && typeof d === "object" ? d.label : null) || (spec.xAxis.data || [])[i] || "Item " + (i + 1),
+        color: palette.series(i),
+        edge: palette.edge(i),
+        off: false,
+        index: i
+      }));
+    }
+    return spec.series.map((z, i) => ({
+      id: z.id,
+      label: z.label || z.id,
+      color: z.color || palette.series(i),
+      edge: z.color || palette.edge(i),
+      off: !!hidden[z.id] || solo != null && solo !== i || !!z.hidden,
+      index: i
+    }));
+  }, [spec, wholePlot, hidden, solo, palette]);
+  const toggle = (id, index) => {
+    if (wholePlot) {
+      setPinned((p) => p && p.di === index ? null : { si: 0, di: index });
+      return;
+    }
+    setSolo(null);
+    setHidden((h) => {
+      const next = { ...h, [id]: !h[id] };
+      if (!spec.series.some((s) => !next[s.id] && !s.hidden)) return h;
+      onVisibilityChange?.(Object.keys(next).filter((k) => next[k]));
+      return next;
+    });
+  };
+  const onPlotKeyDown = React2.useCallback(
+    (event) => {
+      const n = frame.axisLabels.length;
+      if (!n) return;
+      const cur = { si: pinned?.si ?? 0, di: pinned?.di ?? 0 };
+      let { si, di } = cur;
+      const step = event.shiftKey ? Math.max(1, Math.round(n / 10)) : 1;
+      switch (event.key) {
+        case "ArrowRight":
+          di = Math.min(n - 1, di + step);
+          break;
+        case "ArrowLeft":
+          di = Math.max(0, di - step);
+          break;
+        case "ArrowUp":
+          si = Math.max(0, si - 1);
+          break;
+        case "ArrowDown":
+          si = Math.min(spec.series.length - 1, si + 1);
+          break;
+        case "Home":
+          di = 0;
+          break;
+        case "End":
+          di = n - 1;
+          break;
+        case "Escape":
+          setPinned(null);
+          return;
+        case "t":
+        case "T":
+          setTableOpen((v) => !v);
+          return;
+        // The zoom keys exist only where zooming does, so a key that would do
+        // nothing is never promised.
+        case "+":
+        case "=":
+          if (zoomEnabled) setZoom(zoomAt(zoomRef.current, 1 / 1.3, 0.5, 0.03));
+          return;
+        case "-":
+        case "_":
+          if (zoomEnabled) setZoom(zoomAt(zoomRef.current, 1.3, 0.5, 0.03));
+          return;
+        case "0":
+          if (zoomEnabled) resetZoom();
+          return;
+        case "[":
+          if (zoomEnabled) setZoom(panBy(zoomRef.current, -0.1));
+          return;
+        case "]":
+          if (zoomEnabled) setZoom(panBy(zoomRef.current, 0.1));
+          return;
+        default:
+          return;
+      }
+      event.preventDefault?.();
+      setPinned({ si, di });
+    },
+    [frame.axisLabels.length, pinned, spec.series.length, zoomEnabled, setZoom, resetZoom]
+  );
+  const anyData = spec.series.some((z) => (z.data || z.points || []).length) || spec.value != null || !!spec.data || !!spec.items || !!spec.matrix || !!spec.rows || !!spec.columns || !!spec.categories;
+  const state = spec.state === "loading" || spec.state === "error" ? spec.state : frame.problem ? "error" : !anyData || spec.state === "empty" ? "empty" : "ready";
+  const onPlotLayout = (e) => {
+    const w = e.nativeEvent.layout.width;
+    if (Math.abs(w - width) > 0.5) setWidth(w);
+  };
+  const showReadout = !wholePlot && spec.tooltip.trigger !== "none" && spec.readout !== false;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        bare ? styles.bare : styles.card,
+        !(spec.title || spec.subtitle) && styles.headless,
+        style
+      ],
+      children: [
+        (spec.title || spec.subtitle) && /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.headerText, children: [
+            spec.title ? /* @__PURE__ */ jsx(Text, { style: styles.title, children: spec.title }) : null,
+            spec.subtitle ? /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: spec.subtitle }) : null
+          ] }),
+          /* @__PURE__ */ jsxs(View, { style: styles.toolbar, children: [
+            /* @__PURE__ */ jsx(
+              ToolButton,
+              {
+                icon: "grid",
+                label: tableOpen ? "Hide the data table" : "Show the data table",
+                active: tableOpen,
+                onPress: () => setTableOpen((v) => !v)
+              }
+            ),
+            onExportCsv ? /* @__PURE__ */ jsx(
+              ToolButton,
+              {
+                icon: "download",
+                label: "Export the visible window as CSV",
+                onPress: () => onExportCsv(toCsv(table), (spec.title || "chart").replace(/[^\w.-]+/g, "-") + ".csv")
+              }
+            ) : null,
+            onExportImage ? /* @__PURE__ */ jsx(
+              ToolButton,
+              {
+                icon: "image",
+                label: "Share the chart as an image",
+                onPress: () => onExportImage(
+                  svgDocument(frame, uid, measured, height, {
+                    sans: theme.font.sans,
+                    mono: theme.font.mono
+                  }),
+                  (spec.title || "chart").replace(/[^\w.-]+/g, "-") + ".svg"
+                )
+              }
+            ) : null
+          ] })
+        ] }),
+        showReadout && state === "ready" ? /* @__PURE__ */ jsx(View, { style: styles.readout, accessibilityLiveRegion: "polite", children: rows.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.readoutHint, children: "Drag across the chart to read values." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.readoutBody, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.readoutLabel, children: frame.axisLabels[pinned?.di ?? 0] }),
+            /* @__PURE__ */ jsx(View, { style: styles.readoutRows, children: rows.map((r, i) => /* @__PURE__ */ jsxs(View, { style: styles.readoutRow, children: [
+              /* @__PURE__ */ jsx(View, { style: [styles.swatch, { backgroundColor: r.color, borderColor: r.edge ?? r.color }] }),
+              /* @__PURE__ */ jsxs(Text, { style: styles.readoutName, children: [
+                r.label,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsx(Text, { style: styles.readoutValue, children: r.value })
+            ] }, i)) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: "Clear the reading",
+              style: ({ pressed }) => [styles.readoutClear, pressed && styles.pressed],
+              onPress: () => setPinned(null),
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 15, color: theme.color.text3 })
+            }
+          )
+        ] }) }) : null,
+        legendEntries.length > 1 ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.legend, children: [
+          legendEntries.map((en) => /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityState: { selected: !en.off },
+              accessibilityLabel: en.label,
+              hitSlop: { top: theme.space[6], bottom: theme.space[6], left: theme.space[4], right: theme.space[4] },
+              style: ({ pressed }) => [styles.chip, en.off && styles.chipOff, pressed && styles.pressed],
+              onPress: () => toggle(en.id, en.index),
+              onLongPress: () => setSolo((s) => s === en.index ? null : en.index),
+              children: [
+                /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    style: [
+                      styles.swatch,
+                      // Outlined in the series edge: the pastel fill alone does
+                      // not clear 3:1 on the card.
+                      { backgroundColor: en.color, borderColor: en.edge },
+                      // The web twin greys the chip with `grayscale(1)`; RN has no
+                      // filter, so the muting is the system's own disabled opacity
+                      // rather than a hand-picked number. Only the *swatch* dims —
+                      // see the `chipOff` note for why the label does not.
+                      en.off && { opacity: theme.state.disabledOpacity }
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { style: [styles.chipText, en.off && styles.chipTextOff], children: en.label })
+              ]
+            },
+            en.id
+          )),
+          /* @__PURE__ */ jsx(Text, { style: styles.legendHint, children: "tap to filter \xB7 hold to solo" })
+        ] }) : null,
+        /* @__PURE__ */ jsx(View, { style: styles.plotWrap, children: /* @__PURE__ */ jsxs(View, { onLayout: onPlotLayout, style: styles.plot, children: [
+          state === "loading" ? /* @__PURE__ */ jsx(
+            View,
+            {
+              accessible: true,
+              accessibilityRole: "progressbar",
+              accessibilityLabel: "Loading chart",
+              style: [styles.skeleton, { height }],
+              children: Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { style: { flex: 1, height: 28 + i * 37 % 62 + "%" }, radius: "sm" }, i))
+            }
+          ) : null,
+          state === "empty" || state === "error" ? /* @__PURE__ */ jsxs(View, { style: [styles.message, { minHeight: Math.max(180, height * 0.7) }], children: [
+            /* @__PURE__ */ jsx(View, { style: styles.messageIcon, children: /* @__PURE__ */ jsx(Icon, { name: state === "error" ? "alert-triangle" : "chart-bar", size: 22, color: theme.color.text3 }) }),
+            /* @__PURE__ */ jsx(Text, { style: styles.messageTitle, children: state === "error" ? frame.problem?.title || spec.errorTitle || "That data did not load" : spec.emptyTitle || "No data in this range" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.messageText, children: state === "error" ? frame.problem?.text || spec.errorText || "Nothing was drawn, because a chart of nothing looks exactly like a chart of zero." : spec.emptyText || "The series exist \u2014 the window is empty. Widen the range or clear a filter." }),
+            state === "error" && spec.onRetry ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: spec.onRetry, children: "Try again" }) : null,
+            state === "empty" && spec.onReset ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: spec.onReset, children: "Clear the filter" }) : null
+          ] }) : null,
+          state === "ready" ? /* @__PURE__ */ jsx(
+            View,
+            {
+              ...responder.panHandlers,
+              accessible: true,
+              focusable: zoomEnabled || void 0,
+              accessibilityRole: "image",
+              accessibilityLabel: description,
+              ...{ onKeyDown: onPlotKeyDown },
+              onLayout: (e) => {
+                originRef.current = { x: 0, y: 0 };
+              },
+              children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height, viewBox: `0 0 ${measured} ${height}`, children: [
+                /* @__PURE__ */ jsx(SceneDefsNodes, { defs: frame.defs, clipId: uid + "-clip" }),
+                /* @__PURE__ */ jsx(SceneNodes, { scene: frame.scene, theme, clipId: uid + "-clip" })
+              ] })
+            }
+          ) : null,
+          zoomEnabled && isZoomed(zoom) ? /* @__PURE__ */ jsx(View, { style: styles.zoomPill, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: resetZoom, accessibilityLabel: "Reset the zoom", children: "Reset zoom" }) }) : null
+        ] }) }),
+        (spec.footnote || spec.source) && /* @__PURE__ */ jsx(View, { style: styles.caption, children: /* @__PURE__ */ jsx(Text, { style: styles.captionText, children: [spec.footnote, spec.source && "Source: " + spec.source].filter(Boolean).join("  \xB7  ") }) }),
+        tableOpen ? /* @__PURE__ */ jsx(ChartDataTable, { model: table, title: spec.title }) : null
+      ]
+    }
+  );
+}
+function ToolButton({
+  icon,
+  label,
+  active,
+  onPress
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(stylesheet);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { selected: !!active },
+      style: ({ pressed }) => [styles.toolButton, active && styles.toolButtonActive, pressed && styles.pressed],
+      onPress,
+      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 17, color: active ? theme.color.accentStrong : theme.color.text2 })
+    }
+  );
+}
+function ChartDataTable({ model, title }) {
+  const { styles } = useStyles(stylesheet);
+  return /* @__PURE__ */ jsxs(View, { style: styles.tableWrap, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.tableCaption, children: (title || "Chart data") + " \u2014 " + model.rows.length + " rows" }),
+    /* @__PURE__ */ jsx(ScrollView, { horizontal: true, focusable: true, showsHorizontalScrollIndicator: true, children: /* @__PURE__ */ jsx(ScrollView, { style: styles.tableScroll, focusable: true, nestedScrollEnabled: true, children: /* @__PURE__ */ jsxs(View, { accessibilityRole: "none", children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.tr, styles.thead], children: model.head.map((h, i) => /* @__PURE__ */ jsx(Text, { style: [styles.th, i === 0 && styles.thFirst], children: h }, i)) }),
+      model.rows.map((r, i) => /* @__PURE__ */ jsx(View, { style: [styles.tr, i % 2 ? styles.trAlt : null], children: r.map((c, j) => /* @__PURE__ */ jsx(Text, { style: [styles.td, j === 0 && styles.tdFirst], children: c }, j)) }, i))
+    ] }) }) })
+  ] });
+}
+var stylesheet = createStyleSheet((theme) => ({
+  zoomPill: {
+    alignItems: "flex-end",
+    paddingTop: theme.space[8]
+  },
+  card: {
+    borderRadius: theme.radius.xl,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden"
+  },
+  bare: { backgroundColor: "transparent" },
+  // Without a header nothing else carries the top inset, and the readout or the
+  // legend would sit on the card's edge.
+  headless: { paddingTop: theme.space.s4 },
+  header: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s3,
+    paddingHorizontal: theme.space.s4,
+    paddingTop: theme.space.s4,
+    paddingBottom: theme.space.s3
+  },
+  headerText: { flex: 1, minWidth: 0, gap: theme.space.s1 },
+  title: { fontFamily: theme.font.sans, fontSize: theme.fontSize[15], fontWeight: theme.fontWeight.extrabold, color: theme.color.text },
+  subtitle: { fontFamily: theme.font.sans, fontSize: theme.fontSize[13], color: theme.color.text3, lineHeight: theme.space[18] },
+  toolbar: { flexDirection: "row", gap: theme.space.s2 },
+  toolButton: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface2
+  },
+  // The active edge is a graphical object under SC 1.4.11, so it takes the
+  // *measured* accent rather than the brand input — the same colour the focus
+  // ring uses, for the same reason.
+  toolButtonActive: { borderColor: theme.focus.ringColor, backgroundColor: theme.color.accentSoft },
+  // Press feedback for every chart control. Web leans on the unlayered global
+  // `button:hover { filter: var(--hover-filter) }`; native has no equivalent,
+  // so without this a tap on the toolbar, a legend chip or the readout's clear
+  // does nothing visible. `state.pressed` is a translucent layer, so it
+  // composites over whatever fill the control already carries rather than
+  // replacing it.
+  pressed: { backgroundColor: theme.state.pressed },
+  readout: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.space[46],
+    marginHorizontal: theme.space.s4,
+    marginBottom: theme.space.s3,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s2,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  readoutBody: { flex: 1, minWidth: 0, gap: theme.space.s1 },
+  readoutHint: { fontFamily: theme.font.sans, fontSize: theme.fontSize[13], color: theme.color.text3 },
+  readoutLabel: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[11],
+    letterSpacing: theme.tracking.wide,
+    color: theme.color.text3
+  },
+  readoutRows: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: theme.space.s3,
+    rowGap: theme.space.s1
+  },
+  readoutRow: { flexDirection: "row", alignItems: "center", gap: theme.space[6] },
+  readoutName: { fontFamily: theme.font.sans, fontSize: theme.fontSize[13], color: theme.color.text2 },
+  readoutValue: { fontFamily: theme.font.sans, fontSize: theme.fontSize[13], fontWeight: theme.fontWeight.bold, color: theme.color.text },
+  readoutClear: {
+    width: theme.space[38],
+    height: theme.space[38],
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface
+  },
+  legend: { flexDirection: "row", alignItems: "center", gap: theme.space.s2, paddingHorizontal: theme.space.s4, paddingBottom: theme.space.s3 },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[7],
+    height: theme.space[32],
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface2
+  },
+  // No `opacity` here. An off chip is already carried on three axes — `border` for
+  // `borderStrong`, transparent for `surface2`, and `text3` for `text2` in `chipTextOff`
+  // — and dimming on top of that dims a *measured* ink: `text3` clears AA against the
+  // surface with no headroom, so 60% puts an interactive control under it.
+  chipOff: { borderColor: theme.color.border, backgroundColor: "transparent" },
+  chipText: { fontFamily: theme.font.sans, fontSize: theme.fontSize[13], fontWeight: theme.fontWeight.semibold, color: theme.color.text2 },
+  chipTextOff: { color: theme.color.text3 },
+  legendHint: { fontFamily: theme.font.mono, fontSize: theme.fontSize[11], color: theme.color.text3, paddingLeft: theme.space.s1 },
+  swatch: { width: theme.space[9], height: theme.space[9], borderRadius: theme.radius[3], borderWidth: 1 },
+  // The inset lives on a wrapper so the plot's own `onLayout` width is the
+  // width the scene is drawn at — padding on the measured view would put the
+  // viewBox and the drawn box out of step.
+  plotWrap: { paddingHorizontal: theme.space.s4, paddingBottom: theme.space.s3 },
+  plot: { position: "relative", minWidth: 0 },
+  skeleton: { flexDirection: "row", alignItems: "flex-end", gap: theme.space[8] },
+  message: { alignItems: "center", justifyContent: "center", gap: theme.space.s2, paddingHorizontal: theme.space.s5, paddingVertical: theme.space.s6 },
+  messageIcon: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface2
+  },
+  messageTitle: { fontFamily: theme.font.sans, fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.bold, color: theme.color.text, textAlign: "center" },
+  messageText: { fontFamily: theme.font.sans, fontSize: theme.fontSize[13], lineHeight: theme.space[19], color: theme.color.text3, textAlign: "center" },
+  caption: {
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border,
+    backgroundColor: theme.color.surface2,
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s2
+  },
+  captionText: { fontFamily: theme.font.mono, fontSize: theme.fontSize[11], color: theme.color.text3 },
+  tableWrap: { borderTopWidth: theme.borderWidth.base, borderTopColor: theme.color.border, maxHeight: theme.space[256] },
+  tableScroll: { maxHeight: theme.space[224] },
+  tableCaption: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[11],
+    letterSpacing: theme.tracking.wide,
+    color: theme.color.text3,
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s2
+  },
+  tr: { flexDirection: "row" },
+  trAlt: { backgroundColor: theme.color.surface2 },
+  thead: { backgroundColor: theme.color.surface2 },
+  th: {
+    minWidth: theme.space[96],
+    paddingHorizontal: theme.space[3],
+    paddingVertical: theme.space[2],
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text2,
+    textAlign: "right"
+  },
+  thFirst: { textAlign: "left", minWidth: theme.space[120] },
+  td: {
+    minWidth: theme.space[96],
+    paddingHorizontal: theme.space[3],
+    paddingVertical: theme.space[2],
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text,
+    textAlign: "right"
+  },
+  tdFirst: { textAlign: "left", minWidth: theme.space[120], fontWeight: theme.fontWeight.semibold, color: theme.color.text2 }
+}));
+
+export { Chart, ChartDataTable, SceneDefsNodes, SceneNodes, nativeChartPalette };