@btndprojects/loam-ui-native 0.1.0 → 0.2.1

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

@@ -1,10 +1,12 @@
-import { Skeleton } from './chunk-RIBDXGUG.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Skeleton } from './chunk-PNF3NKB5.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.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 +154,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);
@@ -169,9 +193,12 @@ function Chart({
   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 +208,36 @@ 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(
+    () => normalizeSpec({
+      ...specInput,
+      locale: specInput.locale ?? providerLocale,
+      copy: { ...labels, ...specInput.copy }
+    }),
+    [specInput, labels, providerLocale]
+  );
   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);
@@ -222,7 +277,10 @@ 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) {
       setPinned({ si: hit.si, di: hit.di, kind: hit.linkKind });
       s.onSelect?.(hit, s.series[hit.si]);
@@ -242,15 +300,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,13 +359,21 @@ 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,
@@ -419,7 +488,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 +497,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 +520,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(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,65 +544,97 @@ function Chart({
             Pressable,
             {
               accessibilityRole: "button",
-              accessibilityLabel: "Clear the reading",
+              accessibilityLabel: labels.clearReading,
               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,
+        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: labels.legendHint })
+            ]
+          }
+        ) : 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",
+              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: 10 }, (_, 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
+            /* @__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 || labels.errorTitle : spec.emptyTitle || labels.emptyTitle }),
+            /* @__PURE__ */ jsx(Text, { style: styles.messageText, children: state === "error" ? frame.problem?.text || spec.errorText || labels.errorText : spec.emptyText || labels.emptyText }),
+            state === "error" && spec.onRetry ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: spec.onRetry, children: labels.tryAgain }) : null,
+            state === "empty" && spec.onReset ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: spec.onReset, children: labels.clearFilter }) : null
           ] }) : null,
           state === "ready" ? /* @__PURE__ */ jsx(
             View,
@@ -536,16 +648,25 @@ 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
       ]
     }
   );
@@ -556,7 +677,7 @@ function ToolButton({
   active,
   onPress
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("chart");
   const { styles } = useStyles(stylesheet);
   return /* @__PURE__ */ jsx(
     Pressable,
@@ -564,16 +685,25 @@ function ToolButton({
       accessibilityRole: "button",
       accessibilityLabel: label,
       accessibilityState: { selected: !!active },
-      style: ({ pressed }) => [styles.toolButton, active && styles.toolButtonActive, pressed && styles.pressed],
+      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 }) {
+function ChartDataTable({
+  model,
+  title,
+  labels: labelsProp
+}) {
+  const labels = useLabels("chart", DEFAULT_CHART_UI_LABELS, labelsProp);
   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(Text, { style: styles.tableCaption, children: labels.tableRows(title || labels.dataCaption, 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))
@@ -605,8 +735,18 @@ 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] },
+  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,
@@ -644,7 +784,11 @@ 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],
@@ -658,8 +802,17 @@ 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 },
+  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],
@@ -670,7 +823,13 @@ var stylesheet = createStyleSheet((theme) => ({
     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 },
+  legend: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    paddingHorizontal: theme.space.s4,
+    paddingBottom: theme.space.s3
+  },
   chip: {
     flexDirection: "row",
     alignItems: "center",
@@ -687,17 +846,38 @@ var stylesheet = createStyleSheet((theme) => ({
   // — 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 },
+  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 },
+  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 },
+  message: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s2,
+    paddingHorizontal: theme.space.s5,
+    paddingVertical: theme.space.s6
+  },
   messageIcon: {
     width: theme.tapMin,
     height: theme.tapMin,
@@ -706,8 +886,20 @@ var stylesheet = createStyleSheet((theme) => ({
     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" },
+  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,
@@ -715,8 +907,16 @@ 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] },
+  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,
@@ -749,7 +949,12 @@ var stylesheet = createStyleSheet((theme) => ({
     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 };

package/dist/{chunk-LAECSR4H.js → chunk-5LAAAXFP.js}

@@ -1,5 +1,6 @@
-import { camMeta, decorativeProps } from './chunk-RW6ZL2FQ.js';
-import { useReducedMotion } from './chunk-6N33LFQA.js';
+import { useAnalyzerLabels, camMeta, decorativeProps } from './chunk-HJLPZA4X.js';
+import { useLoamLocale } from './chunk-APCWFOZW.js';
+import { useReducedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, View, Text, Easing } from 'react-native';
 import Svg, { Defs, Pattern, Line, RadialGradient, Stop, Rect } from 'react-native-svg';
@@ -9,12 +10,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 var PLACEHOLDER_LABEL = "live feed \xB7 placeholder";
 function PlaceholderFeed({
-  label = PLACEHOLDER_LABEL,
+  label,
+  labels,
   drift = true,
   topInset = 0,
   children
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("analyzer");
+  const t = useAnalyzerLabels(labels);
   const reduced = useReducedMotion();
   const { styles } = useStyles(feedSheet);
   const still = reduced || theme.reduceMotion || !drift;
@@ -89,7 +92,7 @@ function PlaceholderFeed({
       /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-vignette-fill)" })
     ] }) }),
     children,
-    /* @__PURE__ */ jsx(Text, { style: [styles.label, camMeta(theme), topInset ? { marginTop: topInset } : null], children: label })
+    /* @__PURE__ */ jsx(Text, { style: [styles.label, camMeta(theme), topInset ? { marginTop: topInset } : null], children: label ?? t.placeholderFeed })
   ] });
 }
 var PLATE = {
@@ -102,10 +105,13 @@ var PLATE = {
 };
 function SubjectPlate({
   profile: profileProp,
-  caption
+  caption,
+  labels
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("analyzer");
   const { styles } = useStyles(feedSheet);
+  const t = useAnalyzerLabels(labels);
+  const locale = useLoamLocale();
   const p = profile(profileProp);
   const plate = PLATE[p.id] ?? PLATE.generic;
   return /* @__PURE__ */ jsx(
@@ -115,7 +121,7 @@ function SubjectPlate({
       testID: `loam-subject-plate-${p.id}`,
       style: [styles.subjectPlate, { width: plate.width, height: plate.height }],
       ...decorativeProps(),
-      children: /* @__PURE__ */ jsx(Text, { style: [styles.subjectCaption, camMeta(theme)], children: (caption ?? plate.caption).toUpperCase() })
+      children: /* @__PURE__ */ jsx(Text, { style: [styles.subjectCaption, camMeta(theme)], children: (caption ?? t.plate[p.id] ?? plate.caption).toLocaleUpperCase(locale) })
     }
   );
 }