@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-LKFC4CS7.js → chunk-SZLI34TA.js}

@@ -1,8 +1,8 @@
-import { Badge } from './chunk-TN2ZNJUI.js';
-import { useSurfaceAnnounce } from './chunk-HJLPZA4X.js';
+import { useSurfaceAnnounce } from './chunk-OCHPK5YV.js';
+import { Badge } from './chunk-LGNTP5XA.js';
 import { NAMED_ROLE } from './chunk-W23G6JLF.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React2 from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -58,13 +58,21 @@ var TONE_ICON = {
   warn: "alert-triangle",
   danger: "alert-circle"
 };
+function BusyWrap({
+  busy,
+  children
+}) {
+  return busy ? /* @__PURE__ */ jsx(View, { "aria-busy": true, children }) : children;
+}
 var ROW_CENTRED = { alignSelf: "center" };
 function ConfidenceBadge({
   value,
   label,
   labels,
   size = "sm",
-  icon = false
+  icon = false,
+  count,
+  motion
 }) {
   const t = useCaptureResultLabels(labels);
   const tone = confidenceTone(value);
@@ -74,10 +82,11 @@ function ConfidenceBadge({
     {
       variant: tone,
       size,
+      motion,
       leadingIcon: icon ? TONE_ICON[tone] : void 0,
-      accessibilityLabel: `${text} ${label ?? t.confidence}`,
+      accessibilityLabel: `${text} ${label ?? t.confidence}${count != null ? ` (${count})` : ""}`,
       style: ROW_CENTRED,
-      children: text
+      children: count != null ? `${text} \xB7 ${count}` : text
     }
   );
 }
@@ -206,10 +215,10 @@ var sharedSheet = createStyleSheet((theme) => ({
   },
   matchName: {
     fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[11],
+    fontSize: theme.fontSize[12],
     fontStyle: "italic",
-    color: theme.color.text3
+    color: theme.color.text2
   }
 }));
 
-export { ConfidenceBadge, MatchRow, NoteBlock, PhaseAnnouncement, useCaptureResultLabels };
+export { BusyWrap, ConfidenceBadge, MatchRow, NoteBlock, PhaseAnnouncement, useCaptureResultLabels };

package/dist/{chunk-NBEF4EPJ.js → chunk-T77WJA74.js}

@@ -1,8 +1,8 @@
 import { NODE_STATE_WORD, NODE_STATE_ICON } from './chunk-YLLCXTMC.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { View, Animated, Text, Easing } from 'react-native';
+import { View, Animated, Text, Easing, ScrollView, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -57,7 +57,12 @@ function TimelineItem({
   isLast = true,
   animatedStyle
 }) {
-  const { density, labels: ctxLabels } = React.useContext(TimelineContext);
+  const {
+    density,
+    orientation = "vertical",
+    labels: ctxLabels
+  } = React.useContext(TimelineContext);
+  const horizontal = orientation === "horizontal";
   const labels = useLabels("timeline", DEFAULT_LABELS, ctxLabels);
   const { styles } = useStyles(sheet, { density });
   const theme = useLoamTheme("timeline");
@@ -119,15 +124,16 @@ function TimelineItem({
         styles.item,
         isLast ? styles.itemLast : null,
         current ? styles.itemCurrent : null,
+        horizontal ? styles.itemH : null,
         style,
         animatedStyle
       ],
       children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.rail, children: [
+        /* @__PURE__ */ jsxs(View, { style: [styles.rail, horizontal ? styles.railH : null], children: [
           /* @__PURE__ */ jsx(View, { style: styles.lineBox, children: node }),
-          isLast ? null : /* @__PURE__ */ jsx(View, { style: styles.connector })
+          isLast ? null : /* @__PURE__ */ jsx(View, { style: [styles.connector, horizontal ? styles.connectorH : null] })
         ] }),
-        /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
+        /* @__PURE__ */ jsxs(View, { style: [styles.content, horizontal ? styles.contentH : null], children: [
           /* @__PURE__ */ jsxs(View, { style: styles.headerRow, children: [
             /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
             time ? /* @__PURE__ */ jsx(Text, { style: styles.time, children: time }) : null
@@ -142,14 +148,40 @@ function Timeline({
   items,
   density = "comfortable",
   motion = "none",
+  orientation = "vertical",
   label,
-  labels,
+  labels: labelsProp,
+  latestPill = false,
+  defaultUnseen = 0,
+  latestLabel: latestLabelProp,
   style,
   children
 }) {
   const { styles } = useStyles(sheet, { density });
   const theme = useLoamTheme("timeline");
   const staggered = motion === "full" && !theme.reduceMotion;
+  const resolvedLabels = useLabels("timeline", DEFAULT_LABELS, labelsProp);
+  const latestLabel = latestLabelProp ?? resolvedLabels.latest;
+  const scrollRef = React.useRef(null);
+  const atTop = React.useRef(true);
+  const firstId = React.useRef(items?.[0]?.id);
+  const [unseen, setUnseen] = React.useState(defaultUnseen);
+  const onScroll = (e) => {
+    atTop.current = e.nativeEvent.contentOffset.y <= theme.space.s2;
+    if (atTop.current) setUnseen(0);
+  };
+  React.useEffect(() => {
+    if (!latestPill || !items) return;
+    const prev = firstId.current;
+    firstId.current = items[0]?.id;
+    if (prev == null || prev === items[0]?.id || atTop.current) return;
+    const added = items.findIndex((e) => e.id === prev);
+    if (added > 0) setUnseen((n) => n + added);
+  }, [items, latestPill]);
+  const jumpToLatest = () => {
+    scrollRef.current?.scrollTo({ y: 0, animated: !theme.reduceMotion });
+    setUnseen(0);
+  };
   const childArray = items ? null : React.Children.toArray(children).filter(React.isValidElement);
   const count = items ? items.length : childArray?.length ?? 0;
   const valuesRef = React.useRef([]);
@@ -160,7 +192,10 @@ function Timeline({
     );
   }
   const values = valuesRef.current;
-  const ctx = React.useMemo(() => ({ density, labels }), [density, labels]);
+  const ctx = React.useMemo(
+    () => ({ density, orientation, labels: labelsProp }),
+    [density, orientation, labelsProp]
+  );
   React.useEffect(() => {
     if (!staggered) {
       values.forEach((v) => v.setValue(1));
@@ -221,10 +256,91 @@ function Timeline({
       })
     );
   }
-  return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(View, { role: "list", accessibilityLabel: label, style: [styles.list, style], children: content }) });
+  const list = /* @__PURE__ */ jsx(
+    View,
+    {
+      role: "list",
+      accessibilityLabel: label,
+      style: [
+        latestPill ? styles.listInner : [styles.list, style],
+        orientation === "horizontal" ? styles.listH : null
+      ],
+      children: content
+    }
+  );
+  if (!latestPill) {
+    return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: ctx, children: list });
+  }
+  return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(View, { style: [styles.list, style], children: [
+    /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        ref: scrollRef,
+        onScroll,
+        scrollEventThrottle: 16,
+        maintainVisibleContentPosition: { minIndexForVisible: 0 },
+        children: list
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "polite", role: "status", style: styles.srOnly, children: unseen > 0 ? latestLabel(unseen) : "" }),
+    unseen > 0 ? /* @__PURE__ */ jsx(View, { pointerEvents: "box-none", style: styles.pillAnchor, children: /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: latestLabel(unseen),
+        onPress: jumpToLatest,
+        hitSlop: (theme.tapMin - theme.ctl.sm) / 2,
+        style: styles.pill,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "arrow-up", size: theme.icon.sm, color: theme.color.surface }),
+          /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: latestLabel(unseen) })
+        ]
+      }
+    ) }) : null
+  ] }) });
 }
 var sheet = createStyleSheet((theme) => ({
   list: { alignSelf: "stretch" },
+  listInner: { alignSelf: "stretch" },
+  listH: { flexDirection: "row" },
+  itemH: { flexDirection: "column", paddingBottom: 0, flex: 1, minWidth: theme.panel.sm / 2 },
+  railH: { flexDirection: "row", alignSelf: "stretch" },
+  connectorH: {
+    width: void 0,
+    height: theme.space[1],
+    marginTop: 0,
+    marginLeft: theme.space.s1,
+    alignSelf: "center"
+  },
+  contentH: { flex: 0 },
+  // Visually hidden but still read: a zero-size, transparent live region.
+  srOnly: { position: "absolute", width: theme.space[1], height: theme.space[1], opacity: 0 },
+  pillAnchor: {
+    position: "absolute",
+    top: theme.space.s2,
+    left: 0,
+    right: 0,
+    alignItems: "center"
+  },
+  // The system jump pill: chip sm 30, 13 / 600, px 12, inverse ink, sh-md;
+  // the hit area grows to the OS minimum (44 iOS, 48 Android) via hitSlop.
+  pill: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    height: theme.ctl.sm,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.text,
+    ...theme.shadow.md
+  },
+  pillLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.surface,
+    fontSize: theme.fontSize[13],
+    letterSpacing: theme.type.footnote.letterSpacing
+  },
   item: {
     flexDirection: "row",
     variants: {
@@ -239,13 +355,12 @@ var sheet = createStyleSheet((theme) => ({
   // The "you are here" band. The negative horizontal margin cancels its own
   // inset so the band bleeds outward and the axis stays on the same vertical
   // line as every other rung — a current rung that shifted sideways would bend
-  // the axis. The soft fill always carries its tone edge: high contrast drops
-  // the tint to the plain surface and the ring is what is left.
+  // the axis. System rule (Final 13, Refinement 12): the state-selected fill
+  // with the ink unchanged; the node and `aria-current` carry it in high
+  // contrast.
   itemCurrent: {
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.accentSoft,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.accent,
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.state.selected,
     paddingHorizontal: theme.space.s2,
     marginHorizontal: -theme.space.s2
   },
@@ -287,7 +402,7 @@ var sheet = createStyleSheet((theme) => ({
   },
   time: {
     fontFamily: theme.font.sans,
-    color: theme.color.text3,
+    color: theme.color.text2,
     fontSize: theme.type.footnote.fontSize,
     lineHeight: theme.type.footnote.lineHeight,
     letterSpacing: theme.type.footnote.letterSpacing