@btndprojects/loam-ui-native 0.1.1 → 0.3.1

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

@@ -1,24 +1,80 @@
-import { Badge } from './chunk-SBMNWWBV.js';
-import { useSurfaceAnnounce } from './chunk-RW6ZL2FQ.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
+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-PCEFCOLN.js';
+import * as React2 from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { confidenceTone, confidenceLabel } from '@btndprojects/loam-analyzer';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+var DEFAULT_CAPTURE_RESULT_LABELS = {
+  result: "Result",
+  scanAnother: "Scan another",
+  dismissResult: "Dismiss result",
+  frozenFrame: "frozen frame \xB7 placeholder",
+  retake: "Retake",
+  analyse: "Analyse",
+  usePhoto: "Use photo",
+  lastCapture: "Last capture",
+  noCapture: "No capture yet",
+  confidence: "confidence",
+  orPossibly: "Or possibly",
+  closestWeGot: "The closest we got",
+  estimate: "Estimate",
+  quantity: "Quantity",
+  noProduct: "No product matched this code.",
+  severity: { none: "no damage", minor: "minor", moderate: "moderate" },
+  analysing: "Analysing",
+  readingAngles: "Reading six angles",
+  cancel: "Cancel",
+  stageStatus: { pending: "pending", active: "active", done: "done", failed: "failed" },
+  stageNote: (status, where) => `, ${status}, runs on ${where}`
+};
+var NONE = {};
+function useCaptureResultLabels(own) {
+  const merged = useLabels("captureResult", DEFAULT_CAPTURE_RESULT_LABELS, own);
+  const provided = useLabels("captureResult", NONE);
+  return React2.useMemo(
+    () => ({
+      ...merged,
+      severity: {
+        ...DEFAULT_CAPTURE_RESULT_LABELS.severity,
+        ...provided.severity,
+        ...own?.severity
+      },
+      stageStatus: {
+        ...DEFAULT_CAPTURE_RESULT_LABELS.stageStatus,
+        ...provided.stageStatus,
+        ...own?.stageStatus
+      }
+    }),
+    [merged, provided, own]
+  );
+}
 var TONE_ICON = {
   good: "check-circle",
   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 = "confidence",
+  label,
+  labels,
   size = "sm",
-  icon = false
+  icon = false,
+  count,
+  motion
 }) {
+  const t = useCaptureResultLabels(labels);
   const tone = confidenceTone(value);
   const text = confidenceLabel(value);
   return /* @__PURE__ */ jsx(
@@ -26,22 +82,21 @@ function ConfidenceBadge({
     {
       variant: tone,
       size,
+      motion,
       leadingIcon: icon ? TONE_ICON[tone] : void 0,
-      accessibilityLabel: `${text} ${label}`,
+      accessibilityLabel: `${text} ${label ?? t.confidence}${count != null ? ` (${count})` : ""}`,
       style: ROW_CENTRED,
-      children: text
+      children: count != null ? `${text} \xB7 ${count}` : text
     }
   );
 }
-function PhaseAnnouncement({
-  message
-}) {
+function PhaseAnnouncement({ message }) {
   const surface = useSurfaceAnnounce();
-  const [own, setOwn] = React.useState("");
+  const [own, setOwn] = React2.useState("");
   const { styles } = useStyles(sharedSheet);
-  const sink = React.useRef(setOwn);
+  const sink = React2.useRef(setOwn);
   sink.current = surface ?? setOwn;
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (message) sink.current(message);
   }, [message]);
   if (surface) return null;
@@ -57,31 +112,41 @@ function PhaseAnnouncement({
   );
 }
 function NoteBlock({ title, description }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("capture-result");
   const { styles } = useStyles(sharedSheet);
-  return /* @__PURE__ */ jsxs(View, { accessible: true, accessibilityLabel: `${title} ${description}`, style: styles.note, children: [
-    /* @__PURE__ */ jsx(Icon, { name: "info", size: theme.icon.sm, color: theme.color.infoOnSoft }),
-    /* @__PURE__ */ jsxs(View, { style: styles.noteText, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.noteTitle, children: title }),
-      /* @__PURE__ */ jsx(Text, { style: styles.noteBody, children: description })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessible: true,
+      accessibilityRole: NAMED_ROLE,
+      accessibilityLabel: `${title} ${description}`,
+      style: styles.note,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "info", size: theme.icon.sm, color: theme.color.infoOnSoft }),
+        /* @__PURE__ */ jsxs(View, { style: styles.noteText, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.noteTitle, children: title }),
+          /* @__PURE__ */ jsx(Text, { style: styles.noteBody, children: description })
+        ] })
+      ]
+    }
+  );
 }
-function MatchRow({ match, onPick }) {
+function MatchRow({ match, onPick, labels }) {
+  const t = useCaptureResultLabels(labels);
   const { styles } = useStyles(sharedSheet);
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(View, { style: styles.matchText, children: [
       /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.matchCommon, children: match.common }),
       /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.matchName, children: match.name })
     ] }),
-    /* @__PURE__ */ jsx(ConfidenceBadge, { value: match.confidence })
+    /* @__PURE__ */ jsx(ConfidenceBadge, { value: match.confidence, labels })
   ] });
   if (!onPick) return /* @__PURE__ */ jsx(View, { style: styles.matchRow, children: inner });
   return /* @__PURE__ */ jsx(
     Pressable,
     {
       accessibilityRole: "button",
-      accessibilityLabel: `${match.common}, ${match.name}, ${confidenceLabel(match.confidence)} confidence`,
+      accessibilityLabel: `${match.common}, ${match.name}, ${confidenceLabel(match.confidence)} ${t.confidence}`,
       style: styles.matchRow,
       onPress: () => onPick(match),
       children: inner
@@ -150,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 };
+export { BusyWrap, ConfidenceBadge, MatchRow, NoteBlock, PhaseAnnouncement, useCaptureResultLabels };

package/dist/{chunk-4GBOGOTV.js → chunk-T77WJA74.js}

@@ -1,10 +1,15 @@
-import { NODE_STATE_ICON } from './chunk-YLLCXTMC.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { NODE_STATE_WORD, NODE_STATE_ICON } from './chunk-YLLCXTMC.js';
+import { useLabels } from './chunk-APCWFOZW.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';
 
+var DEFAULT_LABELS = {
+  states: { ...NODE_STATE_WORD },
+  latest: (count) => `${count} new`
+};
 function toneSkin(theme, tone) {
   switch (tone) {
     case "accent":
@@ -52,9 +57,15 @@ function TimelineItem({
   isLast = true,
   animatedStyle
 }) {
-  const { density } = 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();
+  const theme = useLoamTheme("timeline");
   const g = GEOMETRY[density];
   const nodeIcon = icon ?? (state ? NODE_STATE_ICON[state] : void 0);
   const skin = tone ? toneSkin(theme, tone) : state ? {
@@ -72,6 +83,9 @@ function TimelineItem({
       View,
       {
         testID: state ? `timeline-node-${state}` : `timeline-node-tone-${tone}`,
+        accessible: state ? true : void 0,
+        role: state ? "img" : void 0,
+        accessibilityLabel: state ? labels.states[state] : void 0,
         style: {
           width: g.node,
           height: g.node,
@@ -110,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
@@ -133,13 +148,40 @@ function Timeline({
   items,
   density = "comfortable",
   motion = "none",
+  orientation = "vertical",
   label,
+  labels: labelsProp,
+  latestPill = false,
+  defaultUnseen = 0,
+  latestLabel: latestLabelProp,
   style,
   children
 }) {
   const { styles } = useStyles(sheet, { density });
-  const theme = useLoamTheme();
+  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([]);
@@ -150,7 +192,10 @@ function Timeline({
     );
   }
   const values = valuesRef.current;
-  const ctx = React.useMemo(() => ({ density }), [density]);
+  const ctx = React.useMemo(
+    () => ({ density, orientation, labels: labelsProp }),
+    [density, orientation, labelsProp]
+  );
   React.useEffect(() => {
     if (!staggered) {
       values.forEach((v) => v.setValue(1));
@@ -211,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: {
@@ -229,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
   },
@@ -277,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