@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-7O2FMUPT.js → chunk-VQKPBYW6.js}

@@ -1,10 +1,16 @@
-import { Skeleton } from './chunk-RIBDXGUG.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { EmptyState } from './chunk-QJMMM4RC.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { springConfig } from './chunk-J64KGCGX.js';
 import * as React2 from 'react';
-import { PanResponder, View, Text, Pressable, ScrollView } from 'react-native';
+import { Animated, 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 { DEFAULT_CHART_LABELS, 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';
 
@@ -152,6 +158,28 @@ function SceneDefsNodes({ defs, clipId }) {
     /* @__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 DEFAULT_CHART_UI_LABELS = {
+  ...DEFAULT_CHART_LABELS,
+  hideTable: "Hide the data table",
+  showTable: "Show the data table",
+  exportCsv: "Export the visible window as CSV",
+  shareImage: "Share the chart as an image",
+  readoutPlaceholder: "Drag across the chart to read values.",
+  clearReading: "Clear the reading",
+  legendHint: "tap to filter \xB7 hold to solo",
+  loading: "Loading chart",
+  emptyTitle: "No data in this range",
+  emptyText: "The series exist \u2014 the window is empty. Widen the range or clear a filter.",
+  clearFilter: "Clear the filter",
+  errorTitle: "That data did not load",
+  errorText: "Nothing was drawn, because a chart of nothing looks exactly like a chart of zero.",
+  tryAgain: "Try again",
+  resetZoomA11y: "Reset the zoom",
+  resetZoom: "Reset zoom",
+  source: (source) => "Source: " + source,
+  dataCaption: "Chart data",
+  tableRows: (caption, count) => caption + " \u2014 " + count + " rows"
+};
 var UID = 0;
 function svgDocument(frame, uid, width, height, fonts) {
   const body = sceneToSvg(frame.scene, frame.defs, uid);
@@ -161,17 +189,23 @@ function svgDocument(frame, uid, width, height, fonts) {
 function escapeAttr(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
 }
+var LINE_KEY_TYPES = ["line", "radialLine", "bump", "slope", "parallel"];
 function Chart({
   style,
   bare,
+  size = "md",
+  tone,
   defaultTableOpen = false,
   onExportCsv,
   onExportImage,
   onVisibilityChange,
   onZoomChange,
+  copy,
   ...specInput
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("chart", DEFAULT_CHART_UI_LABELS, copy);
+  const providerLocale = useLoamLocale();
+  const theme = useLoamTheme("chart");
   const { styles } = useStyles(stylesheet);
   const uid = React2.useMemo(() => "lc" + ++UID, []);
   const palette = React2.useMemo(() => nativeChartPalette(theme), [theme]);
@@ -181,8 +215,41 @@ function Chart({
   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 spec = React2.useMemo(() => {
+    const input = specInput;
+    const toneInk = tone ? tone === "neutral" ? theme.color.text3 : theme.color[tone] : void 0;
+    const sized = input.height === void 0 && size !== "md" ? { height: size === "sm" ? theme.space[224] : theme.space[256] + theme.space[128] } : null;
+    const toned = toneInk && input.series?.length === 1 && input.series[0]?.color === void 0 ? { series: [{ ...input.series[0], color: toneInk }] } : null;
+    return normalizeSpec({
+      ...input,
+      ...sized,
+      ...toned,
+      locale: specInput.locale ?? providerLocale,
+      copy: { ...labels, ...specInput.copy }
+    });
+  }, [specInput, labels, providerLocale, size, tone, theme]);
   const measured = width || 360;
+  const entry = React2.useRef(
+    new Animated.Value(spec.animate && !theme.reduceMotion ? 0 : 1)
+  ).current;
+  const entered = React2.useRef(false);
+  React2.useEffect(() => {
+    if (!width || entered.current) return;
+    entered.current = true;
+    if (!spec.animate || theme.reduceMotion) {
+      entry.setValue(1);
+      return;
+    }
+    Animated.spring(entry, {
+      ...springConfig(theme, "ds"),
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, [width, spec.animate, theme, entry]);
+  const entryStyle = {
+    opacity: entry.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: "clamp" }),
+    transform: [{ translateY: entry.interpolate({ inputRange: [0, 1], outputRange: [8, 0] }) }]
+  };
   const narrow = measured < NARROW_WIDTH;
   const tight = measured < TIGHT_WIDTH;
   const height = resolveHeight(spec, measured, narrow);
@@ -215,6 +282,7 @@ function Chart({
   const scaleRef = React2.useRef(1);
   scaleRef.current = measured / (width || measured);
   const originRef = React2.useRef({ x: 0, y: 0 });
+  const lastReadRef = React2.useRef(null);
   const scrub = React2.useCallback((lx, ly) => {
     const f = frameRef.current;
     const s = specRef.current;
@@ -222,8 +290,16 @@ function Chart({
     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 });
+    const hit = pick(f.items, x, y, isWholePlot(s.type) ? "nearest" : mode, {
+      radius: 56,
+      horizontal: f.horizontal
+    });
     if (hit) {
+      const key = hit.si + ":" + hit.di;
+      if (key !== lastReadRef.current) {
+        lastReadRef.current = key;
+        haptics.selection();
+      }
       setPinned({ si: hit.si, di: hit.di, kind: hit.linkKind });
       s.onSelect?.(hit, s.series[hit.si]);
     }
@@ -242,15 +318,18 @@ function Chart({
   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 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,
@@ -298,16 +377,25 @@ function Chart({
     [scrub, zoomEnabled, resetZoom, setZoom, pinchGeometry]
   );
   const legendEntries = React2.useMemo(() => {
-    const itemLegend = ["pie", "donut", "polarArea", "funnel", "pyramid", "radialBar", "waffle"].includes(spec.type);
+    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),
+        label: (d && typeof d === "object" ? d.label : null) || (spec.xAxis.data || [])[i] || spec.copy.itemN(i + 1),
         color: palette.series(i),
         edge: palette.edge(i),
         off: false,
+        line: false,
         index: i
       }));
     }
@@ -317,6 +405,7 @@ function Chart({
       color: z.color || palette.series(i),
       edge: z.color || palette.edge(i),
       off: !!hidden[z.id] || solo != null && solo !== i || !!z.hidden,
+      line: LINE_KEY_TYPES.includes(z.type ?? spec.type),
       index: i
     }));
   }, [spec, wholePlot, hidden, solo, palette]);
@@ -399,6 +488,7 @@ function Chart({
     const w = e.nativeEvent.layout.width;
     if (Math.abs(w - width) > 0.5) setWidth(w);
   };
+  const android = isAndroidIdiom(theme);
   const showReadout = !wholePlot && spec.tooltip.trigger !== "none" && spec.readout !== false;
   return /* @__PURE__ */ jsxs(
     View,
@@ -411,7 +501,10 @@ function Chart({
       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.title ? (
+              // F50: the OS surface title, not the web card's 15 / 600.
+              /* @__PURE__ */ jsx(Text, { style: [styles.title, resolveTextRole(theme, "surfaceTitle", android)], children: spec.title })
+            ) : null,
             spec.subtitle ? /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: spec.subtitle }) : null
           ] }),
           /* @__PURE__ */ jsxs(View, { style: styles.toolbar, children: [
@@ -419,7 +512,7 @@ function Chart({
               ToolButton,
               {
                 icon: "grid",
-                label: tableOpen ? "Hide the data table" : "Show the data table",
+                label: tableOpen ? labels.hideTable : labels.showTable,
                 active: tableOpen,
                 onPress: () => setTableOpen((v) => !v)
               }
@@ -428,15 +521,18 @@ function Chart({
               ToolButton,
               {
                 icon: "download",
-                label: "Export the visible window as CSV",
-                onPress: () => onExportCsv(toCsv(table), (spec.title || "chart").replace(/[^\w.-]+/g, "-") + ".csv")
+                label: labels.exportCsv,
+                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",
+                label: labels.shareImage,
                 onPress: () => onExportImage(
                   svgDocument(frame, uid, measured, height, {
                     sans: theme.font.sans,
@@ -448,11 +544,19 @@ function Chart({
             ) : 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: [
+        showReadout && state === "ready" ? /* @__PURE__ */ jsx(View, { style: styles.readout, accessibilityLiveRegion: "polite", children: rows.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.readoutHint, children: labels.readoutPlaceholder }) : /* @__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(Text, { style: [styles.readoutLabel, resolveTextRole(theme, "overline", android)], 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__ */ jsx(
+                View,
+                {
+                  style: [
+                    styles.swatch,
+                    { backgroundColor: r.color, borderColor: r.edge ?? r.color }
+                  ]
+                }
+              ),
               /* @__PURE__ */ jsxs(Text, { style: styles.readoutName, children: [
                 r.label,
                 ":"
@@ -464,47 +568,75 @@ function Chart({
             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 })
+              accessibilityLabel: labels.clearReading,
+              hitSlop: (theme.hit.md - theme.ctl.md) / 2,
+              style: ({ pressed }) => [styles.iconBox, pressed && styles.pressed],
+              onPress: () => {
+                lastReadRef.current = null;
+                setPinned(null);
+              },
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.ctl.icon.md, color: theme.color.text2 })
             }
           )
         ] }) }) : null,
-        legendEntries.length > 1 ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.legend, children: [
+        legendEntries.length > 1 ? /* @__PURE__ */ jsxs(LegendRow, { wrap: wholePlot, 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],
+              hitSlop: {
+                top: (theme.hit.sm - theme.ctl.sm) / 2,
+                bottom: (theme.hit.sm - theme.ctl.sm) / 2
+              },
+              style: ({ pressed }) => [styles.key, pressed && styles.pressed],
               onPress: () => toggle(en.id, en.index),
               onLongPress: () => setSolo((s) => s === en.index ? null : en.index),
               children: [
+                en.line ? (
+                  // A line series: a 14 × 2 rule with a 6 ring, hollow when off.
+                  /* @__PURE__ */ jsxs(View, { style: styles.lineKey, children: [
+                    /* @__PURE__ */ jsx(View, { style: [styles.lineRule, { backgroundColor: en.edge }] }),
+                    /* @__PURE__ */ jsx(
+                      View,
+                      {
+                        style: [
+                          styles.lineRing,
+                          { borderColor: en.edge },
+                          !en.off && { backgroundColor: en.edge }
+                        ]
+                      }
+                    )
+                  ] })
+                ) : (
+                  // Off hollows the swatch: the fill drops, the series edge
+                  // stays, so a hidden series never reads as a fourth grey one.
+                  /* @__PURE__ */ jsx(
+                    View,
+                    {
+                      style: [
+                        styles.swatch,
+                        { backgroundColor: en.off ? "transparent" : en.color, borderColor: en.edge }
+                      ]
+                    }
+                  )
+                ),
                 /* @__PURE__ */ jsx(
-                  View,
+                  Text,
                   {
                     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 }
-                    ]
+                      styles.keyText,
+                      en.off && (android ? styles.keyTextOff : styles.keyTextOffIos)
+                    ],
+                    children: en.label
                   }
-                ),
-                /* @__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" })
+          /* @__PURE__ */ jsx(Text, { style: styles.legendHint, children: labels.legendHint })
         ] }) : null,
         /* @__PURE__ */ jsx(View, { style: styles.plotWrap, children: /* @__PURE__ */ jsxs(View, { onLayout: onPlotLayout, style: styles.plot, children: [
           state === "loading" ? /* @__PURE__ */ jsx(
@@ -512,18 +644,30 @@ function Chart({
             {
               accessible: true,
               accessibilityRole: "progressbar",
-              accessibilityLabel: "Loading chart",
+              accessibilityLabel: labels.loading,
               style: [styles.skeleton, { height }],
-              children: Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { style: { flex: 1, height: 28 + i * 37 % 62 + "%" }, radius: "sm" }, i))
+              children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  style: { flex: 1, height: 28 + i * 37 % 62 + "%" },
+                  radius: "sm",
+                  decorative: true
+                },
+                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 === "empty" || state === "error" ? /* @__PURE__ */ jsx(View, { style: [styles.message, { minHeight: Math.max(180, height * 0.7) }], children: /* @__PURE__ */ jsx(
+            EmptyState,
+            {
+              variant: state === "error" ? "error" : "empty",
+              icon: state === "error" ? "alert-triangle" : "chart-bar",
+              title: state === "error" ? frame.problem?.title || spec.errorTitle || labels.errorTitle : spec.emptyTitle || labels.emptyTitle,
+              description: state === "error" ? frame.problem?.text || spec.errorText || labels.errorText : spec.emptyText || labels.emptyText,
+              actionLabel: state === "error" && spec.onRetry ? labels.tryAgain : state === "empty" && spec.onReset ? labels.clearFilter : void 0,
+              onAction: state === "error" ? spec.onRetry : spec.onReset
+            }
+          ) }) : null,
           state === "ready" ? /* @__PURE__ */ jsx(
             View,
             {
@@ -536,27 +680,52 @@ function Chart({
               onLayout: (e) => {
                 originRef.current = { x: 0, y: 0 };
               },
-              children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height, viewBox: `0 0 ${measured} ${height}`, children: [
+              children: /* @__PURE__ */ jsx(Animated.View, { style: entryStyle, 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
+          zoomEnabled && isZoomed(zoom) ? /* @__PURE__ */ jsx(View, { style: styles.zoomPill, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onPress: resetZoom,
+              accessibilityLabel: labels.resetZoomA11y,
+              children: labels.resetZoom
+            }
+          ) }) : 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
+        (spec.footnote || spec.source) && /* @__PURE__ */ jsx(View, { style: styles.caption, children: /* @__PURE__ */ jsx(Text, { style: styles.captionText, children: [spec.footnote, spec.source && labels.source(spec.source)].filter(Boolean).join("  \xB7  ") }) }),
+        tableOpen ? /* @__PURE__ */ jsx(ChartDataTable, { model: table, title: spec.title, labels }) : null
       ]
     }
   );
 }
+function LegendRow({
+  wrap,
+  children
+}) {
+  const { styles } = useStyles(stylesheet);
+  if (wrap) return /* @__PURE__ */ jsx(View, { style: [styles.legend, styles.legendWrap], children });
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: styles.legend,
+      children
+    }
+  );
+}
 function ToolButton({
   icon,
   label,
   active,
   onPress
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("chart");
   const { styles } = useStyles(stylesheet);
   return /* @__PURE__ */ jsx(
     Pressable,
@@ -564,16 +733,47 @@ function ToolButton({
       accessibilityRole: "button",
       accessibilityLabel: label,
       accessibilityState: { selected: !!active },
-      style: ({ pressed }) => [styles.toolButton, active && styles.toolButtonActive, pressed && styles.pressed],
+      hitSlop: (theme.hit.md - theme.ctl.md) / 2,
+      style: ({ pressed }) => [
+        styles.iconBox,
+        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 })
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: icon,
+          size: theme.ctl.icon.md,
+          color: active ? theme.color.accentOnSoft : theme.color.text
+        }
+      )
     }
   );
 }
-function ChartDataTable({ model, title }) {
+function ChartDataTable({
+  model,
+  title,
+  labels: labelsProp
+}) {
+  const labels = useLabels("chart", DEFAULT_CHART_UI_LABELS, labelsProp);
+  const theme = useLoamTheme("chart");
+  const android = isAndroidIdiom(theme);
   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__ */ jsxs(
+      View,
+      {
+        style: styles.tableCaption,
+        accessible: true,
+        accessibilityLabel: labels.tableRows(title || labels.dataCaption, model.rows.length),
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.tableCaptionText, resolveTextRole(theme, "overline", android)], children: title || labels.dataCaption }),
+          /* @__PURE__ */ jsx(Text, { style: styles.tableCount, children: model.rows.length })
+        ]
+      }
+    ),
     /* @__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))
@@ -586,7 +786,7 @@ var stylesheet = createStyleSheet((theme) => ({
     paddingTop: theme.space[8]
   },
   card: {
-    borderRadius: theme.radius.xl,
+    borderRadius: theme.radius.lg,
     borderWidth: theme.borderWidth.base,
     borderColor: theme.color.border,
     backgroundColor: theme.color.surface,
@@ -605,23 +805,36 @@ var stylesheet = createStyleSheet((theme) => ({
     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,
+  title: {
+    fontFamily: theme.font.sans,
+    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.s1 },
+  // The md 36 icon box every chart control shares — the Button md tier, square.
+  iconBox: {
+    width: theme.ctl.md,
+    height: theme.ctl.md,
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radius.sm,
+    borderRadius: theme.ctl.r.md
+  },
+  // Button outline: the strong 1.5 pressable edge on no ground (R3).
+  toolButton: {
+    borderWidth: theme.borderWidth.strong,
+    borderColor: theme.color.borderStrong
+  },
+  // Pressed = tonal, as on web: the soft accent ground and its edge.
+  toolButtonActive: {
     borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.borderStrong,
-    backgroundColor: theme.color.surface2
+    borderColor: theme.edge.accent,
+    backgroundColor: theme.color.accentSoft
   },
-  // 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
@@ -633,7 +846,7 @@ var stylesheet = createStyleSheet((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space.s3,
-    minHeight: theme.space[46],
+    minHeight: theme.tapMin,
     marginHorizontal: theme.space.s4,
     marginBottom: theme.space.s3,
     paddingHorizontal: theme.space.s3,
@@ -644,11 +857,13 @@ var stylesheet = createStyleSheet((theme) => ({
     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 },
+  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,
+    fontFamily: theme.font.sans,
     color: theme.color.text3
   },
   readoutRows: {
@@ -658,56 +873,80 @@ var stylesheet = createStyleSheet((theme) => ({
     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],
+  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.semibold,
+    color: theme.color.text
+  },
+  legendWrap: { flexWrap: "wrap" },
+  legend: {
+    flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.radius.sm,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.borderStrong,
-    backgroundColor: theme.color.surface
+    gap: theme.space.s1,
+    paddingHorizontal: theme.space.s4,
+    paddingBottom: theme.space.s3
   },
-  legend: { flexDirection: "row", alignItems: "center", gap: theme.space.s2, paddingHorizontal: theme.space.s4, paddingBottom: theme.space.s3 },
-  chip: {
+  // Legend key: a ghost toggle on the sm 30 tier, r-sm 8 (Refinement 37 F50,
+  // Final 10 iOS "Chip sm 30", which supersede the md 36 of Refinement 18/19) — no
+  // border or ground at rest, so a row of keys matches the icon Buttons.
+  // On stays neutral (R1 exception): the swatch carries on and off.
+  key: {
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.space[7],
-    height: theme.space[32],
-    paddingHorizontal: theme.space.s3,
+    gap: theme.space[8],
+    height: theme.ctl.sm,
+    paddingHorizontal: theme.space[10],
+    borderRadius: theme.ctl.r.sm
+  },
+  keyText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text
+  },
+  // Hidden series: Android text-3, iOS text-2 (Final 10 platform rows).
+  keyTextOff: { color: theme.color.text3 },
+  keyTextOffIos: { color: theme.color.text2 },
+  legendHint: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3,
+    paddingLeft: theme.space.s1
+  },
+  // One swatch: 10 × 10, r 3, a 1 px series edge.
+  swatch: {
+    width: theme.space[10],
+    height: theme.space[10],
+    borderRadius: theme.radius[3],
+    borderWidth: 1
+  },
+  lineKey: {
+    width: theme.space[14],
+    height: theme.space[10],
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  lineRule: { position: "absolute", left: 0, right: 0, height: theme.space[2] },
+  lineRing: {
+    width: theme.space[6],
+    height: theme.space[6],
     borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.borderStrong,
-    backgroundColor: theme.color.surface2
+    borderWidth: theme.borderWidth.strong,
+    backgroundColor: theme.color.surface
   },
-  // 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" },
+  message: { justifyContent: "center" },
   caption: {
     borderTopWidth: theme.borderWidth.base,
     borderTopColor: theme.color.border,
@@ -715,41 +954,63 @@ var stylesheet = createStyleSheet((theme) => ({
     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] },
+  // Footnote and source are prose: sans 12 / 1.5 text-2 (R18).
+  captionText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.space[18],
+    color: theme.color.text2
+  },
+  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,
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: theme.space[8],
     paddingHorizontal: theme.space.s4,
     paddingVertical: theme.space.s2
   },
-  tr: { flexDirection: "row" },
+  tableCaptionText: { fontFamily: theme.font.sans, color: theme.color.text3 },
+  // The count style: mono 12 / 500 text-2.
+  tableCount: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2
+  },
+  tr: { flexDirection: "row", height: theme.space[38], alignItems: "center" },
   trAlt: { backgroundColor: theme.color.surface2 },
   thead: { backgroundColor: theme.color.surface2 },
   th: {
     minWidth: theme.space[96],
-    paddingHorizontal: theme.space[3],
-    paddingVertical: theme.space[2],
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s2,
+    ...theme.type.footnote,
     fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[13],
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.platform === "Android" ? theme.fontWeight.medium : theme.fontWeight.semibold,
     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],
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s2,
+    ...theme.type.subheadline,
     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 }
+  tdFirst: {
+    textAlign: "left",
+    minWidth: theme.space[120],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text2
+  }
 }));
 
 export { Chart, ChartDataTable, SceneDefsNodes, SceneNodes, nativeChartPalette };