@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-XIDTBCBA.js → chunk-HHOMFQ7R.js}

@@ -1,45 +1,59 @@
-import { camInk, useViewfinderLabels, useAnalyzerCopy, GlassIconButton, decorativeProps, untabbableProps, camMeta, pressedProps } from './chunk-HJLPZA4X.js';
+import { camInk, useViewfinderLabels, camToneColour, BusySpinner, busyProps, busyStyle, useAnalyzerCopy, HintTrail, camToneEdge, GlassIconButton, decorativeProps, untabbableProps, PillRemoveButton, disabledProps, useEnterFade, disabledStyle, camGlass, camMeta, pressedProps } from './chunk-OCHPK5YV.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLoamLocale } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useReducedMotion } from './chunk-J64KGCGX.js';
 import * as React3 from 'react';
 import { Animated, View, Text, Pressable, Easing, Dimensions, ScrollView } from 'react-native';
-import Svg2, { Path, Circle, Defs, LinearGradient, Stop, Rect, Line } from 'react-native-svg';
+import Svg2, { Path, Circle, Defs, LinearGradient, Stop, Rect, Mask, Line } from 'react-native-svg';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { TRACK_BAND_BOTTOM, confidenceTone, TRACKING_MOTION, confidenceLabel, trackCountLabel, trackTone, chipRoom, chipAnchor, chipSlot, visibleChips, MAX_CHIPS, trackingSummaryLabel, readBatchLabel } from '@btndprojects/loam-analyzer';
+import { TRACK_BAND_BOTTOM, confidenceTone, TRACKING_MOTION, confidenceLabel, trackCountLabel, trackTone, chipRoom, chipAnchor, chipSlot, visibleChips, MAX_CHIPS, trackingSummaryLabel, highlightWeight, contourPath, boxPath, readBatchLabel } from '@btndprojects/loam-analyzer';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var RING_R = 46;
 var RING_C = 2 * Math.PI * RING_R;
 var RING_STROKE = 6;
-function CountdownRing({ value, label, labels }) {
+function CountdownRing({
+  value,
+  label,
+  labels,
+  tone = "neutral",
+  size = "md",
+  variant = "ring",
+  loading = false,
+  motion = "full"
+}) {
   const t = useViewfinderLabels(labels);
   const theme = useLoamTheme("viewfinder");
   const reduced = useReducedMotion();
   const { styles } = useStyles(controlSheet);
   const pct2 = Math.min(100, Math.max(0, value));
-  const still = reduced || theme.reduceMotion;
+  const still = reduced || theme.reduceMotion || motion !== "full" || variant === "number";
+  const accent = camToneColour(theme, tone) ?? theme.color.good;
+  const stroke = size === "sm" ? RING_STROKE - 2 : size === "lg" ? RING_STROKE + 2 : RING_STROKE;
   return /* @__PURE__ */ jsx(
     View,
     {
       accessibilityRole: "progressbar",
       role: "progressbar",
       accessibilityLabel: label ?? t.autoCapturing,
-      accessibilityValue: { min: 0, max: 100, now: Math.round(pct2) },
+      accessibilityValue: loading ? void 0 : { min: 0, max: 100, now: Math.round(pct2) },
       style: styles.ringRoot,
       ...{
-        "aria-valuenow": Math.round(pct2),
+        "aria-valuenow": loading ? void 0 : Math.round(pct2),
         "aria-valuemin": 0,
         "aria-valuemax": 100
       },
-      children: still ? /* @__PURE__ */ jsx(Text, { style: styles.ringNumber, children: String(Math.round(pct2)) }) : /* @__PURE__ */ jsx(Svg2, { width: "100%", height: "100%", viewBox: "0 0 100 100", children: /* @__PURE__ */ jsx(
+      ...busyProps(loading),
+      children: loading ? /* @__PURE__ */ jsx(BusySpinner, { color: accent }) : still ? /* @__PURE__ */ jsx(Text, { style: [styles.ringNumber, { color: accent }], children: String(Math.round(pct2)) }) : /* @__PURE__ */ jsx(Svg2, { width: "100%", height: "100%", viewBox: "0 0 100 100", children: /* @__PURE__ */ jsx(
         Circle,
         {
           cx: 50,
           cy: 50,
           r: RING_R,
-          stroke: theme.color.good,
-          strokeWidth: RING_STROKE,
+          stroke: accent,
+          strokeWidth: stroke,
           strokeLinecap: "round",
           strokeDasharray: RING_C,
           strokeDashoffset: RING_C * (1 - pct2 / 100),
@@ -59,22 +73,43 @@ function ShutterButton({
   label,
   labels,
   onPress,
-  onBlocked
+  onBlocked,
+  variant = "solid",
+  size = "md",
+  tone = "neutral",
+  motion = "full",
+  loading = false,
+  leading,
+  trailing,
+  fullWidth = false
 }) {
   const t = useViewfinderLabels(labels);
   const theme = useLoamTheme("viewfinder");
   const { styles } = useStyles(controlSheet, { platform, enabled });
-  const glyphColour = enabled ? theme.media.onInk : camInk(theme);
+  const outline = variant === "outline" && enabled;
+  const glyphColour = enabled && !outline ? theme.media.onInk : camInk(theme);
+  const accent = enabled ? camToneColour(theme, tone) : void 0;
+  const base = { ios: theme.space[72], android: theme.space[68], web: theme.space[64] }[platform] + theme.space[2];
+  const diameter = size === "sm" ? base - theme.space[8] : size === "lg" ? base + theme.space[8] : base;
+  const still = motion !== "full" || theme.reduceMotion;
   if (mode === "continuous") return null;
-  return /* @__PURE__ */ jsxs(
+  const shutter = /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "button",
       accessibilityLabel: label ?? t.capture,
       accessibilityState: { disabled: !enabled },
       testID: enabled ? "loam-shutter-open" : "loam-shutter-blocked",
-      style: styles.shutter,
+      style: ({ pressed }) => [
+        styles.shutter,
+        size === "md" ? null : { width: diameter, height: diameter },
+        accent ? { borderColor: accent } : null,
+        pressed && !still && !loading ? { opacity: theme.state.pressedOpacity } : null,
+        busyStyle(theme, loading)
+      ],
+      ...busyProps(loading),
       onPress: () => {
+        if (loading) return;
         if (!enabled) {
           onBlocked?.(blockedToast ?? "");
           return;
@@ -82,35 +117,142 @@ function ShutterButton({
         onPress?.();
       },
       children: [
-        /* @__PURE__ */ jsx(View, { style: styles.shutterFill, children: /* @__PURE__ */ jsx(
-          Icon,
+        /* @__PURE__ */ jsx(
+          View,
           {
-            name: enabled ? "circle" : "lock",
-            size: enabled ? theme.icon.lg : theme.icon.md,
-            color: glyphColour
+            style: [
+              styles.shutterFill,
+              outline ? { backgroundColor: theme.black.a12, borderWidth: theme.borderWidth.base, borderColor: theme.white.a5 } : null
+            ],
+            children: loading ? /* @__PURE__ */ jsx(BusySpinner, { color: glyphColour }) : /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: enabled ? "circle" : "lock",
+                size: enabled ? theme.icon.lg : theme.icon.md,
+                color: glyphColour
+              }
+            )
           }
-        ) }),
+        ),
         typeof countdown === "number" ? /* @__PURE__ */ jsx(CountdownRing, { value: countdown, labels }) : null
       ]
     }
   );
+  if (!leading && !trailing && !fullWidth) return shutter;
+  const side = (name, end) => {
+    if (!name && !fullWidth) return null;
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        "aria-hidden": true,
+        testID: end ? "loam-shutter-trailing" : "loam-shutter-leading",
+        style: fullWidth ? { flex: 1, alignItems: end ? "flex-end" : "flex-start" } : null,
+        children: name ? /* @__PURE__ */ jsx(Icon, { name, size: theme.icon.lg, color: camInk(theme) }) : null
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: "loam-shutter-row",
+      style: [
+        { flexDirection: "row", alignItems: "center", gap: theme.space[16] },
+        fullWidth ? { alignSelf: "stretch", justifyContent: "space-between" } : null
+      ],
+      children: [
+        side(leading, false),
+        shutter,
+        side(trailing, true)
+      ]
+    }
+  );
 }
-function ContinuousNotice({ text, copy }) {
+function ContinuousNotice({
+  text,
+  copy,
+  tone = "neutral",
+  variant = "glass",
+  dismissible = false,
+  onDismiss,
+  action,
+  icon = "barcode",
+  size = "md",
+  motion = "full",
+  loading = false
+}) {
   const words = useAnalyzerCopy(copy);
+  const t = useViewfinderLabels();
   const theme = useLoamTheme("viewfinder");
+  const reduced = useReducedMotion();
   const { styles } = useStyles(controlSheet);
-  const ink = camInk(theme);
-  return /* @__PURE__ */ jsxs(View, { style: styles.notice, children: [
-    /* @__PURE__ */ jsx(Icon, { name: "barcode", size: theme.icon.sm, color: ink }),
-    /* @__PURE__ */ jsx(Text, { style: [styles.noticeText, { color: ink }], children: text ?? words.continuousNotice })
-  ] });
+  const accent = camToneColour(theme, tone);
+  const solid = variant === "solid";
+  const ink = solid ? theme.media.onInk : camInk(theme);
+  const iconColour = solid ? ink : accent ?? ink;
+  const fade = React3.useRef(new Animated.Value(0)).current;
+  const still = motion !== "full" || reduced || theme.reduceMotion;
+  React3.useEffect(() => {
+    if (still) {
+      fade.setValue(1);
+      return;
+    }
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: theme.motion.swap.duration,
+      easing: Easing.bezier(...theme.motion.swap.easing),
+      useNativeDriver: true
+    }).start();
+  }, [still, fade, theme.motion.swap.duration, theme.motion.swap.easing]);
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      testID: "loam-continuous-notice",
+      style: [
+        styles.notice,
+        size === "sm" ? { minHeight: theme.ctl.sm, paddingVertical: theme.space[4] } : null,
+        solid ? { backgroundColor: accent ?? theme.media.ink, borderColor: accent ?? theme.media.ink } : camToneEdge(theme, tone),
+        variant === "outline" ? { backgroundColor: "transparent" } : null,
+        { opacity: still ? 1 : fade },
+        busyStyle(theme, false)
+      ],
+      ...busyProps(loading),
+      children: [
+        loading ? /* @__PURE__ */ jsx(BusySpinner, { color: iconColour }) : icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: iconColour }) : null,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.noticeText,
+              size === "sm" ? { fontSize: theme.fontSize[12] } : null,
+              { color: ink }
+            ],
+            children: text ?? words.continuousNotice
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HintTrail,
+          {
+            action,
+            dismissible: dismissible || onDismiss != null,
+            onDismiss,
+            label: t.dismiss
+          }
+        )
+      ]
+    }
+  );
 }
 function TorchToggle({
   on = false,
   available = true,
   label,
   labels,
-  onChange
+  onChange,
+  variant,
+  size,
+  disabled,
+  loading,
+  tone
 }) {
   const t = useViewfinderLabels(labels);
   if (!available) return null;
@@ -120,6 +262,11 @@ function TorchToggle({
       icon: "flash",
       label: label ?? t.torch,
       on,
+      variant,
+      size,
+      disabled,
+      loading,
+      tone,
       onPress: () => onChange?.(!on)
     }
   );
@@ -128,20 +275,68 @@ function ViewfinderGridToggle({
   on = false,
   label,
   labels,
-  onChange
+  onChange,
+  variant,
+  size,
+  disabled,
+  loading,
+  tone
 }) {
   const t = useViewfinderLabels(labels);
-  return /* @__PURE__ */ jsx(GlassIconButton, { icon: "grid", label: label ?? t.grid, on, onPress: () => onChange?.(!on) });
+  return /* @__PURE__ */ jsx(
+    GlassIconButton,
+    {
+      icon: "grid",
+      label: label ?? t.grid,
+      on,
+      variant,
+      size,
+      disabled,
+      loading,
+      tone,
+      onPress: () => onChange?.(!on)
+    }
+  );
 }
-function FlipButton({ label, labels, onFlip }) {
+function FlipButton({
+  label,
+  labels,
+  disabled = false,
+  onFlip,
+  variant,
+  size,
+  loading,
+  leadingIcon = "flip",
+  tone,
+  motion,
+  trailingIcon,
+  fullWidth
+}) {
   const t = useViewfinderLabels(labels);
-  return /* @__PURE__ */ jsx(GlassIconButton, { icon: "flip", label: label ?? t.flipCamera, onPress: onFlip });
+  return /* @__PURE__ */ jsx(
+    GlassIconButton,
+    {
+      icon: leadingIcon,
+      label: label ?? t.flipCamera,
+      disabled,
+      variant,
+      size,
+      loading,
+      tone,
+      motion,
+      trailingIcon,
+      fullWidth,
+      onPress: onFlip
+    }
+  );
 }
 function LensStop({
   stop,
   on,
   onPick,
-  labels
+  labels,
+  size = "md",
+  disabled = false
 }) {
   const t = useViewfinderLabels(labels);
   const theme = useLoamTheme("viewfinder");
@@ -151,9 +346,10 @@ function LensStop({
     {
       accessibilityRole: "button",
       accessibilityLabel: t.zoomStop(stop),
-      accessibilityState: { selected: on },
-      style: styles.lensStop,
-      hitSlop: Math.max(0, (theme.hit.lg - theme.ctl.md) / 2),
+      accessibilityState: { selected: on, ...disabled ? { disabled: true } : null },
+      disabled,
+      style: [styles.lensStop, { width: theme.ctl[size], height: theme.ctl[size] }],
+      hitSlop: Math.max(0, (theme.hit.lg - theme.ctl[size]) / 2),
       onPress: onPick,
       ...pressedProps(on),
       children: /* @__PURE__ */ jsx(Text, { style: [styles.lensLabel, { color: on ? theme.media.onInk : camInk(theme) }], children: t.zoomStop(stop) })
@@ -165,20 +361,49 @@ function LensPicker({
   value = 1,
   label,
   labels,
-  onChange
+  onChange,
+  size = "md",
+  variant = "glass",
+  disabled = false,
+  loading = false,
+  tone = "neutral",
+  orientation = "horizontal",
+  fullWidth = false,
+  density = "comfortable"
 }) {
   const t = useViewfinderLabels(labels);
+  const theme = useLoamTheme("viewfinder");
   const { styles } = useStyles(controlSheet);
-  return /* @__PURE__ */ jsx(View, { role: "group", accessibilityLabel: label ?? t.zoom, style: styles.lensColumn, children: stops.map((stop) => /* @__PURE__ */ jsx(
-    LensStop,
+  const blocked = disabled || loading;
+  return /* @__PURE__ */ jsx(
+    View,
     {
-      stop,
-      on: stop === value,
-      labels,
-      onPick: () => onChange?.(stop)
-    },
-    stop
-  )) });
+      role: "group",
+      accessibilityLabel: label ?? t.zoom,
+      style: [
+        styles.lensColumn,
+        orientation === "vertical" ? { flexDirection: "column" } : null,
+        density === "compact" ? { padding: theme.space[2], gap: theme.space[0] } : null,
+        fullWidth ? { alignSelf: "stretch", justifyContent: "space-around" } : null,
+        variant === "outline" ? { backgroundColor: "transparent" } : null,
+        camToneEdge(theme, tone),
+        disabled ? { opacity: theme.state.disabledOpacity } : busyStyle(theme, loading)
+      ],
+      ...busyProps(loading),
+      children: stops.map((stop) => /* @__PURE__ */ jsx(
+        LensStop,
+        {
+          stop,
+          on: stop === value,
+          labels,
+          size,
+          disabled: blocked,
+          onPick: () => onChange?.(stop)
+        },
+        stop
+      ))
+    }
+  );
 }
 var controlSheet = createStyleSheet((theme) => ({
   ringRoot: {
@@ -205,15 +430,19 @@ var controlSheet = createStyleSheet((theme) => ({
     borderWidth: theme.borderWidth.strong,
     variants: {
       platform: {
-        ios: { width: theme.space[76], height: theme.space[76], borderRadius: theme.radius.full },
+        ios: {
+          width: theme.space[72] + theme.space[2],
+          height: theme.space[72] + theme.space[2],
+          borderRadius: theme.radius.full
+        },
         android: {
-          width: theme.space[72],
-          height: theme.space[72],
+          width: theme.space[68] + theme.space[2],
+          height: theme.space[68] + theme.space[2],
           borderRadius: theme.radius["2xl"]
         },
         web: {
-          width: theme.space[68],
-          height: theme.space[68],
+          width: theme.space[64] + theme.space[2],
+          height: theme.space[64] + theme.space[2],
           borderRadius: theme.radius["2xl"]
         }
       },
@@ -253,7 +482,7 @@ var controlSheet = createStyleSheet((theme) => ({
     alignSelf: "stretch",
     paddingHorizontal: theme.space[12],
     paddingVertical: theme.space[8],
-    borderRadius: theme.radius.sm,
+    borderRadius: theme.radius.md,
     backgroundColor: theme.black.a12,
     borderWidth: theme.borderWidth.base,
     borderColor: theme.white.a5
@@ -293,20 +522,27 @@ var controlSheet = createStyleSheet((theme) => ({
   },
   lensLabel: {
     fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[11],
-    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.semibold,
     fontVariant: ["tabular-nums"]
   }
 }));
-function ScanLine({ active = true, band, travel }) {
+function ScanLine({
+  active = true,
+  band,
+  travel,
+  tone = "neutral",
+  loading = false
+}) {
   const theme = useLoamTheme("viewfinder");
   const reduced = useReducedMotion();
   const { styles } = useStyles(overlaySheet);
+  const accent = camToneColour(theme, tone) ?? theme.color.good;
   const height = band ?? theme.space[80];
   const thickness = theme.borderWidth.heavy;
   const distance = travel ?? height - thickness;
   const offset = React3.useRef(new Animated.Value(0)).current;
-  const still = reduced || theme.reduceMotion;
+  const still = reduced || theme.reduceMotion || loading;
   React3.useEffect(() => {
     if (!active || still) {
       offset.setValue(0);
@@ -325,27 +561,31 @@ function ScanLine({ active = true, band, travel }) {
   }, [active, still, offset, theme.loop.beacon, theme.easing.inOut]);
   if (!active) return null;
   const translateY = still ? distance / 2 : offset.interpolate({ inputRange: [0, 1], outputRange: [0, distance] });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     View,
     {
       accessible: false,
       testID: still ? "loam-scan-band-static" : "loam-scan-band",
-      style: [styles.scanBand, { height }],
+      style: [styles.scanBand, { height }, busyStyle(theme, loading)],
       ...decorativeProps(),
-      children: /* @__PURE__ */ jsx(
-        Animated.View,
-        {
-          style: [styles.scanLine, { height: thickness, transform: [{ translateY }] }],
-          children: /* @__PURE__ */ jsxs(Svg2, { width: "100%", height: thickness, children: [
-            /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(LinearGradient, { id: "loam-cam-scan", x1: "0", y1: "0", x2: "1", y2: "0", children: [
-              /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: theme.color.good, stopOpacity: theme.opacity[0] }),
-              /* @__PURE__ */ jsx(Stop, { offset: "0.5", stopColor: theme.color.good, stopOpacity: theme.opacity[100] }),
-              /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.color.good, stopOpacity: theme.opacity[0] })
-            ] }) }),
-            /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: thickness, fill: "url(#loam-cam-scan)" })
-          ] })
-        }
-      )
+      ...busyProps(loading),
+      children: [
+        loading ? /* @__PURE__ */ jsx(View, { style: styles.busyCentre, children: /* @__PURE__ */ jsx(BusySpinner, { color: accent }) }) : null,
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [styles.scanLine, { height: thickness, transform: [{ translateY }] }],
+            children: /* @__PURE__ */ jsxs(Svg2, { width: "100%", height: thickness, children: [
+              /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(LinearGradient, { id: "loam-cam-scan", x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: accent, stopOpacity: theme.opacity[0] }),
+                /* @__PURE__ */ jsx(Stop, { offset: "0.5", stopColor: accent, stopOpacity: theme.opacity[100] }),
+                /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: accent, stopOpacity: theme.opacity[0] })
+              ] }) }),
+              /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: thickness, fill: "url(#loam-cam-scan)" })
+            ] })
+          }
+        )
+      ]
     }
   );
 }
@@ -369,7 +609,9 @@ function GuideOverlay({
   pass = false,
   dimmed = false,
   hint,
-  scanning = true
+  scanning = true,
+  tone = "neutral",
+  loading = false
 }) {
   const theme = useLoamTheme("viewfinder");
   const { styles } = useStyles(overlaySheet, { pass, dimmed });
@@ -384,7 +626,7 @@ function GuideOverlay({
   }, [pass, snap, theme.motion.swap.duration, theme.motion.swap.easing]);
   if (kind === "none") return null;
   const box = GUIDE_BOX[kind];
-  const colour = pass ? theme.color.good : theme.white.a12;
+  const colour = pass ? camToneColour(theme, tone) ?? theme.color.good : theme.white.a12;
   const scrim = box.hole && kind !== "circle" ? theme.black.a9 : void 0;
   const reach = Dimensions.get("screen").height;
   const bandGrow = box.heightFlex === void 0 ? null : { flexGrow: (100 - box.heightFlex) / 2 };
@@ -394,8 +636,9 @@ function GuideOverlay({
     {
       accessible: false,
       testID: `loam-guide-${kind}-${pass ? "pass" : "wait"}`,
-      style: [styles.guideRoot, box.hole ? styles.guideRootBleed : null],
+      style: [styles.guideRoot, box.hole ? styles.guideRootBleed : null, busyStyle(theme, loading)],
       ...decorativeProps(),
+      ...busyProps(loading),
       children: [
         /* @__PURE__ */ jsx(View, { style: [styles.scrimBand, bandGrow, scrim ? { backgroundColor: scrim } : null] }),
         /* @__PURE__ */ jsxs(
@@ -446,7 +689,7 @@ function GuideOverlay({
                       ),
                       /* @__PURE__ */ jsx(View, { style: [styles.circleGuide, { borderColor: colour }] })
                     ] }) : null,
-                    kind === "line" ? /* @__PURE__ */ jsx(View, { style: [styles.lineGuide, { borderColor: colour }], children: /* @__PURE__ */ jsx(ScanLine, { active: scanning }) }) : null,
+                    kind === "line" ? /* @__PURE__ */ jsx(View, { style: [styles.lineGuide, { borderColor: colour }], children: /* @__PURE__ */ jsx(ScanLine, { active: scanning, tone }) }) : null,
                     kind === "silhouette" ? /* @__PURE__ */ jsxs(Svg2, { viewBox: "0 0 100 44", width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet", children: [
                       /* @__PURE__ */ jsx(
                         Path,
@@ -474,22 +717,44 @@ function GuideOverlay({
     }
   );
 }
-function ViewfinderGridOverlay({ visible = false }) {
+function ViewfinderGridOverlay({
+  visible = false,
+  tone = "neutral",
+  loading = false
+}) {
   const { styles } = useStyles(overlaySheet);
+  const theme = useLoamTheme("viewfinder");
+  const accent = camToneColour(theme, tone);
+  const tint = accent ? { backgroundColor: accent } : null;
   if (!visible) return null;
-  return /* @__PURE__ */ jsxs(View, { accessible: false, testID: "loam-grid-overlay", style: styles.gridRoot, ...decorativeProps(), children: [
-    /* @__PURE__ */ jsx(View, { style: styles.gridV1 }),
-    /* @__PURE__ */ jsx(View, { style: styles.gridV2 }),
-    /* @__PURE__ */ jsx(View, { style: styles.gridH1 }),
-    /* @__PURE__ */ jsx(View, { style: styles.gridH2 })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessible: false,
+      testID: "loam-grid-overlay",
+      style: [styles.gridRoot, busyStyle(theme, loading)],
+      ...decorativeProps(),
+      ...busyProps(loading),
+      children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.gridV1, tint] }),
+        /* @__PURE__ */ jsx(View, { style: [styles.gridV2, tint] }),
+        /* @__PURE__ */ jsx(View, { style: [styles.gridH1, tint] }),
+        /* @__PURE__ */ jsx(View, { style: [styles.gridH2, tint] })
+      ]
+    }
+  );
 }
-function FocusPulse({ point }) {
+function FocusPulse({
+  point,
+  tone,
+  loading
+}) {
   const theme = useLoamTheme("viewfinder");
   const reduced = useReducedMotion();
   const { styles } = useStyles(overlaySheet);
   const phase = React3.useRef(new Animated.Value(0)).current;
-  const still = reduced || theme.reduceMotion;
+  const still = reduced || theme.reduceMotion || loading;
+  const accent = camToneColour(theme, tone) ?? theme.color.warn;
   React3.useEffect(() => {
     if (still) {
       phase.setValue(1);
@@ -514,28 +779,38 @@ function FocusPulse({ point }) {
         {
           left: `${point.x * 100}%`,
           top: `${point.y * 100}%`,
-          borderColor: theme.color.warn,
+          borderColor: accent,
           opacity,
           transform: [{ scale }]
-        }
+        },
+        busyStyle(theme, loading)
       ],
       ...decorativeProps(),
+      ...busyProps(loading),
       children: /* @__PURE__ */ jsxs(Svg2, { viewBox: "0 0 24 24", width: theme.icon.lg, height: theme.icon.lg, children: [
-        /* @__PURE__ */ jsx(Line, { x1: 12, y1: 6, x2: 12, y2: 18, stroke: theme.color.warn, strokeWidth: 1 }),
-        /* @__PURE__ */ jsx(Line, { x1: 6, y1: 12, x2: 18, y2: 12, stroke: theme.color.warn, strokeWidth: 1 })
+        /* @__PURE__ */ jsx(Line, { x1: 12, y1: 6, x2: 12, y2: 18, stroke: accent, strokeWidth: 1 }),
+        /* @__PURE__ */ jsx(Line, { x1: 6, y1: 12, x2: 18, y2: 12, stroke: accent, strokeWidth: 1 })
       ] })
     }
   );
 }
 function FocusIndicator({
   point = null,
-  pulseKey = 0
+  pulseKey = 0,
+  tone = "neutral",
+  loading = false
 }) {
   if (!point) return null;
-  return /* @__PURE__ */ jsx(FocusPulse, { point }, pulseKey);
+  return /* @__PURE__ */ jsx(FocusPulse, { point, tone, loading }, pulseKey);
 }
-function FocusTapZone({ onFocusPoint }) {
+function FocusTapZone({
+  onFocusPoint,
+  tone = "neutral",
+  loading = false
+}) {
+  const theme = useLoamTheme("viewfinder");
   const { styles } = useStyles(overlaySheet);
+  const accent = camToneColour(theme, tone);
   const size = React3.useRef({ width: 0, height: 0 });
   const onLayout = (e) => {
     size.current = {
@@ -551,10 +826,11 @@ function FocusTapZone({ onFocusPoint }) {
       testID: "loam-focus-zone",
       ...decorativeProps(),
       ...untabbableProps(),
+      ...busyProps(loading),
       onLayout,
       style: styles.tapZone,
       onPress: (e) => {
-        if (!onFocusPoint) return;
+        if (loading || !onFocusPoint) return;
         const { width, height } = size.current;
         if (width === 0 || height === 0) return;
         const { locationX, locationY } = e.nativeEvent;
@@ -562,7 +838,17 @@ function FocusTapZone({ onFocusPoint }) {
           x: Math.min(1, Math.max(0, locationX / width)),
           y: Math.min(1, Math.max(0, locationY / height))
         });
-      }
+      },
+      children: ({ pressed }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        pressed && accent && !loading ? /* @__PURE__ */ jsx(
+          View,
+          {
+            testID: "loam-focus-zone-wash",
+            style: [styles.busyCentre, { backgroundColor: accent, opacity: theme.opacity[20] }]
+          }
+        ) : null,
+        loading ? /* @__PURE__ */ jsx(View, { style: styles.busyCentre, children: /* @__PURE__ */ jsx(BusySpinner, { color: accent ?? camInk(theme) }) }) : null
+      ] })
     }
   );
 }
@@ -656,7 +942,8 @@ var overlaySheet = createStyleSheet((theme) => ({
     fontSize: theme.fontSize[12],
     color: theme.media.ink,
     paddingHorizontal: theme.space[12],
-    paddingVertical: theme.space[4],
+    height: theme.space[24],
+    lineHeight: theme.space[24],
     borderRadius: theme.radius.full,
     backgroundColor: theme.black.a12,
     borderWidth: theme.borderWidth.base,
@@ -755,6 +1042,16 @@ var overlaySheet = createStyleSheet((theme) => ({
     borderRadius: theme.radius.sm,
     borderWidth: theme.borderWidth.strong
   },
+  busyCentre: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0],
+    alignItems: "center",
+    justifyContent: "center"
+  },
   tapZone: {
     position: "absolute",
     top: theme.space[0],
@@ -788,13 +1085,27 @@ function TrackChip({
   anchor = "start",
   room = 100,
   staggerIndex = 0,
-  frozen = false
+  frozen = false,
+  tone: toneProp,
+  size = "md",
+  variant = "glass",
+  selected = false,
+  leading,
+  loading = false,
+  disabled = false,
+  motion = "full",
+  removable = false,
+  onRemove,
+  removeLabel,
+  labels
 }) {
   const theme = useLoamTheme("viewfinder");
+  const t = useViewfinderLabels(labels);
   const reduced = useReducedMotion();
   const tone = confidenceTone(conf);
   const { styles } = useStyles(trackingSheet, { slot, tone, anchor });
-  const still = reduced || theme.reduceMotion || frozen;
+  const dotTone = camToneColour(theme, toneProp);
+  const still = reduced || theme.reduceMotion || frozen || motion !== "full";
   const enter = React3.useRef(new Animated.Value(still ? 1 : 0)).current;
   const delay = React3.useRef(staggerIndex * TRACKING_MOTION.chipStagger).current;
   React3.useEffect(() => {
@@ -812,36 +1123,95 @@ function TrackChip({
     anim.start();
     return () => anim.stop();
   }, [still, enter, delay, theme.motion.enter.duration, theme.motion.enter.easing]);
-  return /* @__PURE__ */ jsx(View, { style: [styles.chipLane, { width: `${room}%` }], ...decorativeProps(), children: /* @__PURE__ */ jsxs(
-    Animated.View,
+  return /* @__PURE__ */ jsx(
+    View,
     {
-      accessible: false,
-      testID: `loam-track-chip-${slot}`,
-      style: [styles.chip, { opacity: enter }],
-      children: [
-        /* @__PURE__ */ jsx(View, { style: styles.chipDot }),
-        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.chipLabel, children: label }),
-        /* @__PURE__ */ jsx(Text, { style: styles.chipConf, children: confidenceLabel(conf) })
-      ]
+      style: [styles.chipLane, { width: `${room}%` }, removable ? { pointerEvents: "box-none" } : null],
+      ...removable ? {} : decorativeProps(),
+      children: /* @__PURE__ */ jsxs(
+        Animated.View,
+        {
+          accessible: false,
+          testID: `loam-track-chip-${slot}`,
+          "aria-current": selected ? true : void 0,
+          style: [
+            styles.chip,
+            size === "sm" ? { paddingHorizontal: theme.space[6], paddingVertical: theme.space[0] } : null,
+            variant === "outline" ? { backgroundColor: "transparent" } : null,
+            selected ? { backgroundColor: theme.white.a5, borderColor: theme.media.ink } : null,
+            busyStyle(theme, loading),
+            { opacity: loading || disabled ? theme.state.disabledOpacity : enter }
+          ],
+          ...busyProps(loading),
+          ...disabledProps(disabled),
+          children: [
+            loading ? /* @__PURE__ */ jsx(BusySpinner, { color: camInk(theme) }) : leading ? /* @__PURE__ */ jsx(Icon, { name: leading, size: theme.icon.xs, color: camInk(theme) }) : /* @__PURE__ */ jsx(View, { style: [styles.chipDot, dotTone ? { backgroundColor: dotTone } : null] }),
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.chipLabel, children: label }),
+            /* @__PURE__ */ jsx(Text, { style: styles.chipConf, children: confidenceLabel(conf) }),
+            removable ? /* @__PURE__ */ jsx(
+              PillRemoveButton,
+              {
+                label: removeLabel ?? t.removeNamed(label),
+                onPress: onRemove,
+                color: camInk(theme),
+                disabled
+              }
+            ) : null
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 function TrackCountPill({
   count,
   label,
-  copy
+  copy,
+  tone = "neutral",
+  size = "md",
+  variant = "glass",
+  leading,
+  loading = false,
+  disabled = false,
+  selected = false,
+  motion,
+  removable = false,
+  onRemove,
+  removeLabel,
+  labels
 }) {
   const words = useAnalyzerCopy(copy);
+  const t = useViewfinderLabels(labels);
+  const enter = useEnterFade(motion);
+  const theme = useLoamTheme("viewfinder");
   const { styles } = useStyles(trackingSheet);
+  const accent = camToneColour(theme, tone);
   if (count <= 0) return null;
-  return /* @__PURE__ */ jsx(
-    View,
+  const text = label ?? trackCountLabel(count, words);
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
     {
       accessible: false,
       testID: "loam-track-count",
-      style: styles.countPill,
-      ...decorativeProps(),
-      children: /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.countText, children: label ?? trackCountLabel(count, words) })
+      "aria-current": selected ? true : void 0,
+      style: [
+        styles.countPill,
+        size === "sm" ? { paddingHorizontal: theme.space[8], paddingVertical: theme.space[2] } : null,
+        variant === "outline" ? { backgroundColor: "transparent" } : null,
+        accent ? { borderColor: accent } : null,
+        selected ? { backgroundColor: theme.white.a5, borderColor: theme.media.ink } : null,
+        motion === void 0 ? null : { opacity: enter },
+        busyStyle(theme, loading),
+        disabledStyle(theme, disabled)
+      ],
+      ...removable ? {} : decorativeProps(),
+      ...busyProps(loading),
+      ...disabledProps(disabled),
+      children: [
+        loading ? /* @__PURE__ */ jsx(BusySpinner, { color: camInk(theme) }) : leading ? /* @__PURE__ */ jsx(Icon, { name: leading, size: theme.icon.xs, color: camInk(theme) }) : null,
+        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.countText, children: text }),
+        removable ? /* @__PURE__ */ jsx(PillRemoveButton, { label: removeLabel ?? t.removeNamed(text), onPress: onRemove, color: camInk(theme), disabled }) : null
+      ]
     }
   );
 }
@@ -861,7 +1231,8 @@ function TrackedBox({
   chip = true,
   chipIndex = 0,
   ease = TRACKING_MOTION.ease,
-  frozen = false
+  frozen = false,
+  loading = false
 }) {
   const theme = useLoamTheme("viewfinder");
   const reduced = useReducedMotion();
@@ -949,9 +1320,11 @@ function TrackedBox({
       testID: `loam-track-box-${object.id}`,
       style: [
         styles.box,
-        { left: pct(geo.x), top: pct(geo.y), width: pct(geo.w), height: pct(geo.h) }
+        { left: pct(geo.x), top: pct(geo.y), width: pct(geo.w), height: pct(geo.h) },
+        busyStyle(theme, loading)
       ],
       ...decorativeProps(),
+      ...busyProps(loading),
       children: [
         /* @__PURE__ */ jsxs(Animated.View, { style: [styles.bracketLayer, { transform: [{ scale: lockScale }] }], children: [
           /* @__PURE__ */ jsx(View, { style: [styles.armTopStart, { borderColor: stroke }] }),
@@ -1009,10 +1382,12 @@ function TrackingOverlay({
   dimmed = false,
   safeAreaBottom = 0,
   label,
-  copy
+  copy,
+  tone,
+  loading = false
 }) {
   const words = useAnalyzerCopy(copy);
-  const { styles } = useStyles(trackingSheet, { dimmed });
+  const { styles } = useStyles(trackingSheet, { dimmed: dimmed || loading });
   const [framePx, setFramePx] = React3.useState(0);
   const { chips, overflow } = visibleChips([...objects], maxChips, framePx || void 0);
   const chipIndex = new Map(chips.map((o, i) => [o.id, i]));
@@ -1027,11 +1402,13 @@ function TrackingOverlay({
       style: styles.overlayRoot,
       onLayout: (e) => setFramePx(e.nativeEvent.layout.width),
       ...name === null ? decorativeProps() : {},
+      ...busyProps(loading),
       children: [
         objects.map((o) => /* @__PURE__ */ jsx(
           TrackedBox,
           {
             object: o,
+            tone,
             chip: chipIndex.has(o.id),
             chipIndex: chipIndex.get(o.id) ?? 0,
             ease,
@@ -1255,6 +1632,423 @@ var trackingSheet = createStyleSheet((theme) => ({
     fontVariant: ["tabular-nums"]
   }
 }));
+function ObjectHighlight({
+  target,
+  phase,
+  locked = true,
+  highContrast = false,
+  tone = "neutral",
+  loading = false
+}) {
+  const theme = useLoamTheme("viewfinder");
+  const { styles } = useStyles(identifySheet);
+  const [size, setSize] = React3.useState({ w: 0, h: 0 });
+  const onLayout = React3.useCallback((e) => {
+    const { width: width2, height } = e.nativeEvent.layout;
+    setSize((s) => s.w === width2 && s.h === height ? s : { w: width2, h: height });
+  }, []);
+  if (!target) return null;
+  const weight = highlightWeight(phase, { lost: !locked, highContrast });
+  const width = {
+    "space-3": theme.space[3],
+    "space-4": theme.space[4],
+    "space-6": theme.space[6],
+    "space-8": theme.space[8],
+    thick: theme.borderWidth.thick,
+    heavy: theme.borderWidth.heavy
+  };
+  const black = {
+    7: theme.black.a7,
+    8: theme.black.a8,
+    10: theme.black.a10,
+    11: theme.black.a11,
+    12: theme.black.a12,
+    13: theme.black.a13,
+    14: theme.black.a14
+  };
+  const { w, h } = size;
+  const d = w > 0 && h > 0 ? target.contour ? contourPath(target.contour, w, h) : boxPath(target.box, w, h, theme.radius.sm) : "";
+  const dash = weight.dashed ? [theme.space[6], theme.space[6]] : void 0;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [styles.root, busyStyle(theme, loading)],
+      onLayout,
+      testID: "loam-object-highlight",
+      ...decorativeProps(),
+      ...busyProps(loading),
+      children: [
+        loading ? /* @__PURE__ */ jsx(View, { style: styles.busyCentre, children: /* @__PURE__ */ jsx(BusySpinner, { color: camToneColour(theme, tone) ?? theme.media.ink }) }) : null,
+        d ? /* @__PURE__ */ jsxs(Svg2, { width: w, height: h, testID: "loam-object-highlight-svg", children: [
+          /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(Mask, { id: "loam-hl-cut", x: "0", y: "0", width: w, height: h, children: [
+            /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: w, height: h, fill: theme.media.ink }),
+            /* @__PURE__ */ jsx(Path, { d, fill: theme.black.a14 })
+          ] }) }),
+          weight.scrim ? /* @__PURE__ */ jsx(
+            Rect,
+            {
+              x: "0",
+              y: "0",
+              width: w,
+              height: h,
+              fill: black[weight.scrim],
+              mask: "url(#loam-hl-cut)"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Path,
+            {
+              d,
+              fill: "none",
+              stroke: black[weight.halo.alpha],
+              strokeWidth: width[weight.halo.width],
+              strokeLinejoin: "round",
+              strokeDasharray: dash
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Path,
+            {
+              d,
+              fill: "none",
+              stroke: camToneColour(theme, tone) ?? (weight.ink.alpha ? theme.white.a12 : theme.media.ink),
+              strokeWidth: width[weight.ink.width],
+              strokeLinejoin: "round",
+              strokeDasharray: dash
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+function ObjectLabel({
+  name,
+  conf = 0,
+  state = "identified",
+  box,
+  onOpen,
+  labels,
+  tone: toneProp
+}) {
+  const theme = useLoamTheme("viewfinder");
+  const t = useViewfinderLabels(labels);
+  const { styles } = useStyles(identifySheet);
+  const tone = toneProp ?? (state === "identified" ? confidenceTone(conf) : "neutral");
+  const pct2 = confidenceLabel(conf);
+  const text = state === "identifying" ? t.identifying : state === "lost" ? t.holdSteady : name;
+  const dot = camToneColour(theme, tone) ?? theme.white.a12;
+  const slot = box ? chipSlot(box) : "above";
+  const [w, setW] = React3.useState(0);
+  const pin = box ? {
+    position: "absolute",
+    left: `${box[0] + box[2] / 2}%`,
+    top: `${slot === "below" ? box[1] + box[3] : box[1]}%`,
+    transform: [
+      { translateX: -w / 2 },
+      { translateY: slot === "above" ? -(theme.ctl.sm + theme.space[4]) : theme.space[4] }
+    ],
+    alignItems: "center"
+  } : null;
+  const pill = /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: styles.label,
+      testID: `loam-object-label-${state}`,
+      onLayout: (e) => setW(e.nativeEvent.layout.width),
+      children: [
+        state === "lost" ? null : /* @__PURE__ */ jsx(View, { style: [styles.dot, { backgroundColor: dot }] }),
+        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.labelText, children: text }),
+        state === "identified" ? /* @__PURE__ */ jsx(Text, { style: styles.labelConf, children: pct2 }) : null
+      ]
+    }
+  );
+  if (state !== "identified") {
+    return /* @__PURE__ */ jsx(View, { style: pin, pointerEvents: "none", ...decorativeProps(), children: pill });
+  }
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: t.openResult(name, pct2),
+      hitSlop: Math.max(0, (theme.hit.lg - theme.ctl.sm) / 2),
+      onPress: onOpen,
+      style: pin ?? void 0,
+      children: pill
+    }
+  );
+}
+function IdentifyCard({
+  name,
+  sub,
+  conf,
+  thumb,
+  platform = "ios",
+  onOpen,
+  labels,
+  loading = false,
+  tone = "neutral",
+  variant = "glass",
+  elevation = "flat",
+  padding = "md"
+}) {
+  const theme = useLoamTheme("viewfinder");
+  const t = useViewfinderLabels(labels);
+  const { styles } = useStyles(identifySheet, { platform });
+  const pct2 = confidenceLabel(conf);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: t.openResult(name, pct2),
+      onPress: loading ? void 0 : onOpen,
+      accessibilityState: loading ? { busy: true } : void 0,
+      testID: `loam-identify-card-${platform}`,
+      style: [
+        styles.card,
+        { paddingHorizontal: theme.space[padding === "sm" ? 8 : padding === "lg" ? 16 : 12] },
+        variant === "solid" ? { backgroundColor: theme.media.ink, borderColor: theme.media.ink } : null,
+        camToneEdge(theme, tone),
+        variant === "outline" ? { backgroundColor: "transparent" } : null,
+        elevation === "default" ? theme.shadow.sm : elevation === "raised" || variant === "elevated" && elevation === "flat" ? theme.shadow.md : null
+      ],
+      ...busyProps(loading),
+      children: [
+        /* @__PURE__ */ jsx(View, { style: styles.thumb, ...decorativeProps(), children: thumb }),
+        /* @__PURE__ */ jsxs(View, { style: styles.cardText, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              numberOfLines: 1,
+              style: [styles.cardName, variant === "solid" ? { color: theme.media.onInk } : null],
+              children: name
+            }
+          ),
+          sub ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              numberOfLines: 1,
+              style: [styles.cardSub, variant === "solid" ? { color: theme.media.onInk } : null],
+              children: sub
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx(View, { ...decorativeProps(), children: loading ? /* @__PURE__ */ jsx(BusySpinner, { color: variant === "solid" ? theme.media.onInk : camInk(theme) }) : /* @__PURE__ */ jsx(Badge, { variant: confidenceTone(conf), size: "sm", children: pct2 }) }),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "chevron-up",
+            size: theme.icon.md,
+            color: variant === "solid" ? theme.media.onInk : camInk(theme)
+          }
+        )
+      ]
+    }
+  );
+}
+var identifySheet = createStyleSheet((theme) => ({
+  root: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0]
+  },
+  busyCentre: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8],
+    height: theme.ctl.sm,
+    paddingHorizontal: theme.space[12],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.black.a13,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  dot: {
+    width: theme.space[8],
+    height: theme.space[8],
+    borderRadius: theme.radius.full
+  },
+  labelText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.semibold,
+    color: camInk(theme),
+    flexShrink: 1
+  },
+  labelConf: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    color: theme.white.a14
+  },
+  card: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[12],
+    paddingHorizontal: theme.space[12],
+    backgroundColor: theme.black.a13,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5,
+    variants: {
+      platform: {
+        ios: { height: theme.space[64], borderRadius: theme.radius.lg },
+        android: { height: theme.space[72], borderRadius: theme.space[20] }
+      }
+    }
+  },
+  thumb: {
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      platform: {
+        ios: { width: theme.space[44], height: theme.space[44], borderRadius: theme.space[10] },
+        android: { width: theme.space[48], height: theme.space[48], borderRadius: theme.radius.md }
+      }
+    }
+  },
+  cardText: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: theme.space[0],
+    gap: theme.space[2]
+  },
+  cardName: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    fontWeight: theme.fontWeight.semibold,
+    color: camInk(theme)
+  },
+  cardSub: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.white.a14
+  }
+}));
+function ViewfinderModes({
+  modes,
+  value,
+  onChange,
+  platform,
+  label = "Mode",
+  testID,
+  tone = "neutral",
+  loading = false,
+  disabled = false,
+  size = "md",
+  variant,
+  orientation = "horizontal",
+  fullWidth = false,
+  density = "comfortable"
+}) {
+  const theme = useLoamTheme("viewfinder");
+  const accent = camToneColour(theme, tone);
+  const blocked = disabled || loading;
+  const chipHeight = size === "sm" ? theme.space[24] : size === "lg" ? theme.ctl.lg : theme.space[32];
+  const { styles } = useStyles(modesSheet);
+  const which = platform ?? (isAndroidIdiom(theme) ? "android" : "ios");
+  const strip = variant ?? (which === "android" ? "glass" : "text");
+  const chips = strip !== "text";
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: label,
+      testID,
+      style: [
+        styles.row,
+        chips ? styles.capsule : styles.strip,
+        chips && strip === "glass" ? camGlass(theme) : null,
+        chips && strip === "plain" ? { borderColor: "transparent" } : null,
+        orientation === "vertical" ? { flexDirection: "column" } : null,
+        density === "compact" ? { gap: chips ? theme.space[0] : theme.space[12] } : null,
+        fullWidth ? { alignSelf: "stretch", justifyContent: "space-around" } : null,
+        disabled ? { opacity: theme.state.disabledOpacity } : busyStyle(theme, loading)
+      ],
+      ...busyProps(loading),
+      children: modes.map((m) => {
+        const on = m.id === value;
+        return /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "radio",
+            accessibilityLabel: m.label,
+            accessibilityState: {
+              checked: on,
+              ...disabled ? { disabled: true } : null,
+              ...loading ? { busy: true } : null
+            },
+            disabled: blocked,
+            onPress: () => onChange?.(m.id),
+            hitSlop: Math.max(0, (theme.hit.lg - (chips ? theme.ctl.sm + 2 : 24)) / 2),
+            style: [
+              chips ? styles.chip : styles.word,
+              chips ? { height: chipHeight } : null,
+              chips && on ? styles.chipOn : null,
+              chips && on && accent ? { backgroundColor: accent } : null
+            ],
+            "aria-checked": on,
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: chips ? [styles.chipText, on ? styles.chipTextOn : styles.chipTextRest] : [
+                  styles.wordText,
+                  on ? styles.wordTextOn : styles.wordTextRest,
+                  on && accent ? { color: accent } : null
+                ],
+                children: chips ? m.label : m.label.toUpperCase()
+              }
+            )
+          },
+          m.id
+        );
+      })
+    }
+  );
+}
+var modesSheet = createStyleSheet((theme) => ({
+  row: { flexDirection: "row", alignItems: "center", justifyContent: "center" },
+  strip: { gap: theme.space[22] },
+  capsule: {
+    alignSelf: "center",
+    gap: theme.space[2],
+    padding: theme.space[2],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  word: { minHeight: theme.space[24], justifyContent: "center" },
+  wordText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.bold,
+    letterSpacing: theme.tracking.wider * theme.fontSize[12]
+  },
+  wordTextOn: { color: theme.media.ink },
+  wordTextRest: { color: theme.white.a13 },
+  chip: {
+    height: theme.space[32],
+    paddingHorizontal: theme.space[14],
+    borderRadius: theme.radius.full,
+    justifyContent: "center"
+  },
+  chipOn: { backgroundColor: theme.media.ink },
+  chipText: { fontFamily: theme.font.sans, fontSize: theme.fontSize[14] },
+  chipTextOn: { color: theme.media.onInk, fontWeight: theme.fontWeight.semibold },
+  chipTextRest: { color: theme.media.ink, fontWeight: theme.fontWeight.medium }
+}));
 function SequenceStrip({
   total = 6,
   shots = 0,
@@ -1265,7 +2059,9 @@ function SequenceStrip({
   labels,
   copy,
   onRedo,
-  onRead
+  onRead,
+  loading = false,
+  tone = "neutral"
 }) {
   const t = useViewfinderLabels(labels);
   const words = useAnalyzerCopy(copy);
@@ -1279,7 +2075,9 @@ function SequenceStrip({
     {
       role: "group",
       accessibilityLabel: batch ? t.capturedPages : t.captureSequence,
-      style: styles.strip,
+      style: [styles.strip, camToneEdge(theme, tone), busyStyle(theme, loading)],
+      pointerEvents: loading ? "none" : void 0,
+      ...busyProps(loading),
       children: [
         /* @__PURE__ */ jsx(
           ScrollView,
@@ -1300,7 +2098,7 @@ function SequenceStrip({
                     accessibilityRole: "button",
                     accessibilityLabel: label,
                     style: styles.cellDone,
-                    hitSlop: (theme.hit.lg - theme.space[32]) / 2,
+                    hitSlop: (theme.hit.lg - theme.ctl.sm) / 2,
                     onPress: () => onRedo?.(i),
                     children: /* @__PURE__ */ jsx(
                       Icon,
@@ -1336,7 +2134,7 @@ function SequenceStrip({
             {
               accessibilityRole: "button",
               style: styles.pinned,
-              hitSlop: (theme.hit.lg - theme.space[32]) / 2,
+              hitSlop: (theme.hit.lg - theme.ctl.sm) / 2,
               onPress: onRead,
               children: /* @__PURE__ */ jsx(Text, { style: styles.pinnedLabel, children: readLabel ?? readBatchLabel(shots, words) })
             }
@@ -1382,6 +2180,7 @@ function Stop2({
       accessibilityLabel: label,
       accessibilityState: { selected: on },
       style: styles.stop,
+      hitSlop: Math.max(0, (theme.hit.lg - theme.ctl.md) / 2),
       onPress: onPick,
       ...pressedProps(on),
       children: /* @__PURE__ */ jsx(Text, { style: [styles.stopLabel, { color: on ? theme.media.onInk : camInk(theme) }], children: label })
@@ -1394,7 +2193,9 @@ function ExpertPanel({
   labels,
   copy,
   onChange,
-  onClose
+  onClose,
+  loading = false,
+  tone = "neutral"
 }) {
   const t = useViewfinderLabels(labels);
   const words = useAnalyzerCopy(copy);
@@ -1417,74 +2218,84 @@ function ExpertPanel({
     [t.level, level, "level"],
     [t.grid, grid, "grid"]
   ];
-  return /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: t.expertControls, style: styles.panel, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.panelHead, children: [
-      /* @__PURE__ */ jsx(Text, { style: [styles.panelTitle, { color: camInk(theme) }], children: t.expert }),
-      /* @__PURE__ */ jsx(View, { style: styles.panelHeadEnd, children: onClose ? /* @__PURE__ */ jsx(GlassIconButton, { icon: "x", label: t.closeExpert, onPress: onClose }) : null })
-    ] }),
-    /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: GROUP.ev, style: styles.group, children: [
-      /* @__PURE__ */ jsx(Text, { style: [styles.groupLabel, camMeta(theme)], children: GROUP.ev.toLocaleUpperCase(locale) }),
-      /* @__PURE__ */ jsx(
-        ScrollView,
-        {
-          horizontal: true,
-          showsHorizontalScrollIndicator: false,
-          contentContainerStyle: styles.stopRow,
-          children: EV_STOPS.map((stop) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: t.expertControls,
+      style: [styles.panel, camToneEdge(theme, tone), busyStyle(theme, loading)],
+      pointerEvents: loading ? "none" : void 0,
+      ...busyProps(loading),
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.panelHead, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.panelTitle, { color: camInk(theme) }], children: t.expert }),
+          /* @__PURE__ */ jsx(View, { style: styles.panelHeadEnd, children: onClose ? /* @__PURE__ */ jsx(GlassIconButton, { icon: "x", label: t.closeExpert, onPress: onClose }) : null })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: GROUP.ev, style: styles.group, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.groupLabel, camMeta(theme)], children: GROUP.ev.toLocaleUpperCase(locale) }),
+          /* @__PURE__ */ jsx(
+            ScrollView,
+            {
+              horizontal: true,
+              showsHorizontalScrollIndicator: false,
+              contentContainerStyle: styles.stopRow,
+              children: EV_STOPS.map((stop) => /* @__PURE__ */ jsx(
+                Stop2,
+                {
+                  on: stop === ev,
+                  label: evLabel(stop, locale),
+                  onPick: () => onChange?.({ control: "ev", value: stop })
+                },
+                stop
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: GROUP.torch, style: styles.group, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.groupLabel, camMeta(theme)], children: GROUP.torch.toLocaleUpperCase(locale) }),
+          /* @__PURE__ */ jsx(View, { style: styles.stopRow, children: ["off", "low", "high"].map((lvl) => /* @__PURE__ */ jsx(
             Stop2,
             {
-              on: stop === ev,
-              label: evLabel(stop, locale),
-              onPick: () => onChange?.({ control: "ev", value: stop })
+              on: lvl === torch,
+              label: t.torchLevels[lvl],
+              onPick: () => onChange?.({ control: "torch", value: lvl })
             },
-            stop
-          ))
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: GROUP.torch, style: styles.group, children: [
-      /* @__PURE__ */ jsx(Text, { style: [styles.groupLabel, camMeta(theme)], children: GROUP.torch.toLocaleUpperCase(locale) }),
-      /* @__PURE__ */ jsx(View, { style: styles.stopRow, children: ["off", "low", "high"].map((lvl) => /* @__PURE__ */ jsx(
-        Stop2,
-        {
-          on: lvl === torch,
-          label: t.torchLevels[lvl],
-          onPick: () => onChange?.({ control: "torch", value: lvl })
-        },
-        lvl
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: GROUP.format, style: styles.group, children: [
-      /* @__PURE__ */ jsx(Text, { style: [styles.groupLabel, camMeta(theme)], children: GROUP.format.toLocaleUpperCase(locale) }),
-      /* @__PURE__ */ jsx(View, { style: styles.stopRow, children: ["pipeline", "full"].map((f) => /* @__PURE__ */ jsx(
-        Stop2,
-        {
-          on: f === format,
-          label: t.formats[f],
-          onPick: () => onChange?.({ control: "format", value: f })
-        },
-        f
-      )) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      View,
-      {
-        role: "group",
-        accessibilityLabel: GROUP.gridLevel,
-        style: styles.toggleRow,
-        testID: `loam-expert-${platform}`,
-        children: toggles.map(([label, on, control]) => /* @__PURE__ */ jsx(
-          Stop2,
+            lvl
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: GROUP.format, style: styles.group, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.groupLabel, camMeta(theme)], children: GROUP.format.toLocaleUpperCase(locale) }),
+          /* @__PURE__ */ jsx(View, { style: styles.stopRow, children: ["pipeline", "full"].map((f) => /* @__PURE__ */ jsx(
+            Stop2,
+            {
+              on: f === format,
+              label: t.formats[f],
+              onPick: () => onChange?.({ control: "format", value: f })
+            },
+            f
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          View,
           {
-            on,
-            label,
-            onPick: () => onChange?.({ control, value: !on })
-          },
-          control
-        ))
-      }
-    )
-  ] });
+            role: "group",
+            accessibilityLabel: GROUP.gridLevel,
+            style: styles.toggleRow,
+            testID: `loam-expert-${platform}`,
+            children: toggles.map(([label, on, control]) => /* @__PURE__ */ jsx(
+              Stop2,
+              {
+                on,
+                label,
+                onPick: () => onChange?.({ control, value: !on })
+              },
+              control
+            ))
+          }
+        )
+      ]
+    }
+  );
 }
 var sequenceSheet = createStyleSheet((theme) => ({
   strip: {
@@ -1503,8 +2314,8 @@ var sequenceSheet = createStyleSheet((theme) => ({
     gap: theme.space[6]
   },
   cellDone: {
-    width: theme.space[32],
-    height: theme.space[32],
+    width: theme.ctl.sm,
+    height: theme.ctl.sm,
     flexGrow: 0,
     flexShrink: 0,
     alignItems: "center",
@@ -1515,8 +2326,8 @@ var sequenceSheet = createStyleSheet((theme) => ({
     borderColor: theme.white.a5
   },
   cellPending: {
-    width: theme.space[32],
-    height: theme.space[32],
+    width: theme.ctl.sm,
+    height: theme.ctl.sm,
     flexGrow: 0,
     flexShrink: 0,
     alignItems: "center",
@@ -1539,7 +2350,7 @@ var sequenceSheet = createStyleSheet((theme) => ({
   pinned: {
     flexGrow: 0,
     flexShrink: 0,
-    height: theme.space[32],
+    height: theme.ctl.sm,
     alignItems: "center",
     justifyContent: "center",
     paddingHorizontal: theme.space[12],
@@ -1548,15 +2359,15 @@ var sequenceSheet = createStyleSheet((theme) => ({
   },
   pinnedLabel: {
     fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[12],
-    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.semibold,
     color: theme.media.onInk
   },
   panel: {
     flexDirection: "column",
     gap: theme.space[16],
     padding: theme.space[16],
-    borderRadius: theme.radius.md,
+    borderRadius: theme.radius.lg,
     backgroundColor: theme.black.a12,
     borderWidth: theme.borderWidth.base,
     borderColor: theme.white.a5
@@ -1578,7 +2389,8 @@ var sequenceSheet = createStyleSheet((theme) => ({
     gap: theme.space[8]
   },
   groupLabel: {
-    fontSize: theme.fontSize[10]
+    fontSize: theme.fontSize[11],
+    fontWeight: theme.fontWeight.bold
   },
   stopRow: {
     flexDirection: "row",
@@ -1592,8 +2404,8 @@ var sequenceSheet = createStyleSheet((theme) => ({
     gap: theme.space[8]
   },
   stop: {
-    height: theme.ctl.lg,
-    minWidth: theme.ctl.lg,
+    height: theme.ctl.md,
+    minWidth: theme.ctl.md,
     flexGrow: 0,
     flexShrink: 0,
     alignItems: "center",
@@ -1611,7 +2423,8 @@ var sequenceSheet = createStyleSheet((theme) => ({
   },
   stopLabel: {
     fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[11],
+    fontSize: theme.fontSize[14],
+    fontWeight: theme.fontWeight.semibold,
     fontVariant: ["tabular-nums"]
   }
 }));
@@ -1620,18 +2433,47 @@ function ShutterTray({
   start,
   primary,
   end,
-  stack = false
+  stack = false,
+  size = "md",
+  density = "comfortable",
+  orientation = "horizontal",
+  variant = "plain",
+  tone = "neutral",
+  loading = false
 }) {
   const { styles } = useStyles(traySheet);
+  const theme = useLoamTheme("viewfinder");
+  const accent = camToneColour(theme, tone);
+  const slot = {
+    width: size === "sm" ? theme.ctl.md : size === "lg" ? theme.space[48] : theme.space[44]
+  };
+  const chrome = [
+    variant === "glass" ? [camGlass(theme), { borderRadius: theme.radius.lg }] : null,
+    accent ? { borderWidth: theme.borderWidth.base, borderColor: accent } : null,
+    density === "compact" ? { gap: theme.space[8], paddingHorizontal: theme.space[8] } : null,
+    busyStyle(theme, loading)
+  ];
   const secondaries = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(View, { style: styles.slotStart, children: start }),
+    /* @__PURE__ */ jsx(View, { style: [styles.slotStart, slot], children: start }),
     /* @__PURE__ */ jsx(View, { style: styles.slotPrimary, children: stack ? null : primary }),
-    /* @__PURE__ */ jsx(View, { style: styles.slotEnd, children: end })
+    /* @__PURE__ */ jsx(View, { style: [styles.slotEnd, slot], children: end })
   ] });
   if (!stack) {
-    return /* @__PURE__ */ jsx(View, { style: styles.tray, testID: `loam-tray-${platform}`, children: secondaries });
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles.tray,
+          orientation === "vertical" ? { flexDirection: "column" } : null,
+          chrome
+        ],
+        testID: `loam-tray-${platform}`,
+        ...busyProps(loading),
+        children: secondaries
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs(View, { style: styles.stackedTray, testID: `loam-tray-${platform}`, children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles.stackedTray, chrome], testID: `loam-tray-${platform}`, ...busyProps(loading), children: [
     /* @__PURE__ */ jsx(View, { style: styles.stackedPrimary, children: primary }),
     /* @__PURE__ */ jsx(View, { style: styles.stackedRow, children: secondaries })
   ] });
@@ -1665,7 +2507,7 @@ var traySheet = createStyleSheet((theme) => ({
     gap: theme.space[16]
   },
   slotStart: {
-    width: theme.space[48],
+    width: theme.space[44],
     flexGrow: 0,
     flexShrink: 0,
     flexDirection: "row",
@@ -1681,7 +2523,7 @@ var traySheet = createStyleSheet((theme) => ({
     justifyContent: "center"
   },
   slotEnd: {
-    width: theme.space[48],
+    width: theme.space[44],
     flexGrow: 0,
     flexShrink: 0,
     flexDirection: "row",
@@ -1690,4 +2532,4 @@ var traySheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { ContinuousNotice, CountdownRing, EV_STOPS, ExpertPanel, FlipButton, FocusIndicator, FocusTapZone, GuideOverlay, LensPicker, ScanLine, SequenceStrip, ShutterButton, ShutterTray, TorchToggle, TrackChip, TrackCountPill, TrackedBox, TrackingOverlay, ViewfinderGridOverlay, ViewfinderGridToggle };
+export { ContinuousNotice, CountdownRing, EV_STOPS, ExpertPanel, FlipButton, FocusIndicator, FocusTapZone, GuideOverlay, IdentifyCard, LensPicker, ObjectHighlight, ObjectLabel, ScanLine, SequenceStrip, ShutterButton, ShutterTray, TorchToggle, TrackChip, TrackCountPill, TrackedBox, TrackingOverlay, ViewfinderGridOverlay, ViewfinderGridToggle, ViewfinderModes };