@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-VMHGBUGS.js

@@ -0,0 +1,35 @@
+import 'react';
+import { View } from 'react-native';
+import { useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx } from 'react/jsx-runtime';
+
+// src/divider/divider.tsx
+function Divider({
+  inset = "full",
+  vertical = false,
+  align = "start",
+  style,
+  testID
+}) {
+  const theme = useLoamTheme("divider");
+  const start = inset === "full" ? 0 : inset === 16 ? theme.space[16] : theme.space[16] + theme.space[22] + theme.space[12];
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      "aria-hidden": true,
+      style: [
+        vertical ? { width: theme.borderWidth.thin, alignSelf: "stretch" } : {
+          height: theme.borderWidth.thin,
+          ...align === "end" ? { marginEnd: start } : { marginStart: start }
+        },
+        { backgroundColor: theme.color.border },
+        style
+      ]
+    }
+  );
+}
+
+export { Divider };

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

@@ -1,7 +1,11 @@
-import { Skeleton } from './chunk-PNF3NKB5.js';
-import { Button } from './chunk-E2E3I5W2.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-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { springConfig } from './chunk-J64KGCGX.js';
 import * as React2 from 'react';
 import { Animated, PanResponder, View, Text, Pressable, ScrollView } from 'react-native';
@@ -185,9 +189,12 @@ 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,
@@ -208,14 +215,19 @@ 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,
+  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]
-  );
+    });
+  }, [specInput, labels, providerLocale, size, tone, theme]);
   const measured = width || 360;
   const entry = React2.useRef(
     new Animated.Value(spec.animate && !theme.reduceMotion ? 0 : 1)
@@ -270,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;
@@ -282,6 +295,11 @@ function Chart({
       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]);
     }
@@ -377,6 +395,7 @@ function Chart({
         color: palette.series(i),
         edge: palette.edge(i),
         off: false,
+        line: false,
         index: i
       }));
     }
@@ -386,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]);
@@ -468,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,
@@ -480,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: [
@@ -522,7 +546,7 @@ function Chart({
         ] }),
         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,
@@ -545,64 +569,75 @@ function Chart({
             {
               accessibilityRole: "button",
               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 })
+              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.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: [
+        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.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.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.lineRing,
+                          { borderColor: en.edge },
+                          !en.off && { backgroundColor: en.edge }
                         ]
                       }
-                    ),
-                    /* @__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,
+                    )
+                  ] })
+                ) : (
+                  // 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(
+                  Text,
+                  {
+                    style: [
+                      styles.keyText,
+                      en.off && (android ? styles.keyTextOff : styles.keyTextOffIos)
+                    ],
+                    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,
@@ -611,7 +646,7 @@ function Chart({
               accessibilityRole: "progressbar",
               accessibilityLabel: labels.loading,
               style: [styles.skeleton, { height }],
-              children: Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ jsx(
+              children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsx(
                 Skeleton,
                 {
                   style: { flex: 1, height: 28 + i * 37 % 62 + "%" },
@@ -622,20 +657,17 @@ function Chart({
               ))
             }
           ) : 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 || 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 === "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,
             {
@@ -671,6 +703,22 @@ function Chart({
     }
   );
 }
+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,
@@ -685,13 +733,22 @@ function ToolButton({
       accessibilityRole: "button",
       accessibilityLabel: label,
       accessibilityState: { selected: !!active },
+      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
+        }
+      )
     }
   );
 }
@@ -701,9 +758,22 @@ function ChartDataTable({
   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: labels.tableRows(title || labels.dataCaption, model.rows.length) }),
+    /* @__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))
@@ -716,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,
@@ -737,8 +807,6 @@ var stylesheet = createStyleSheet((theme) => ({
   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: {
@@ -747,21 +815,26 @@ var stylesheet = createStyleSheet((theme) => ({
     color: theme.color.text3,
     lineHeight: theme.space[18]
   },
-  toolbar: { flexDirection: "row", gap: theme.space.s2 },
-  toolButton: {
-    width: theme.tapMin,
-    height: theme.tapMin,
+  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
@@ -773,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,
@@ -790,9 +863,7 @@ var stylesheet = createStyleSheet((theme) => ({
     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: {
@@ -810,96 +881,72 @@ var stylesheet = createStyleSheet((theme) => ({
   readoutValue: {
     fontFamily: theme.font.sans,
     fontSize: theme.fontSize[13],
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.fontWeight.semibold,
     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
-  },
+  legendWrap: { flexWrap: "wrap" },
   legend: {
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.space.s2,
+    gap: theme.space.s1,
     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,
-    borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.borderStrong,
-    backgroundColor: theme.color.surface2
+    gap: theme.space[8],
+    height: theme.ctl.sm,
+    paddingHorizontal: theme.space[10],
+    borderRadius: theme.ctl.r.sm
   },
-  // 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: {
+  keyText: {
     fontFamily: theme.font.sans,
     fontSize: theme.fontSize[13],
-    fontWeight: theme.fontWeight.semibold,
-    color: theme.color.text2
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text
   },
-  chipTextOff: { color: theme.color.text3 },
+  // 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.mono,
-    fontSize: theme.fontSize[11],
+    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[9],
-    height: theme.space[9],
+    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.strong,
+    backgroundColor: theme.color.surface
+  },
   // 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,
@@ -907,10 +954,12 @@ var stylesheet = createStyleSheet((theme) => ({
     paddingHorizontal: theme.space.s4,
     paddingVertical: theme.space.s2
   },
+  // Footnote and source are prose: sans 12 / 1.5 text-2 (R18).
   captionText: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.fontSize[11],
-    color: theme.color.text3
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.space[18],
+    color: theme.color.text2
   },
   tableWrap: {
     borderTopWidth: theme.borderWidth.base,
@@ -919,33 +968,40 @@ var stylesheet = createStyleSheet((theme) => ({
   },
   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"
   },