@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-HHOMFQ7R.js

@@ -0,0 +1,2535 @@
+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-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, 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, 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,
+  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 || 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: loading ? void 0 : { min: 0, max: 100, now: Math.round(pct2) },
+      style: styles.ringRoot,
+      ...{
+        "aria-valuenow": loading ? void 0 : Math.round(pct2),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100
+      },
+      ...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: accent,
+          strokeWidth: stroke,
+          strokeLinecap: "round",
+          strokeDasharray: RING_C,
+          strokeDashoffset: RING_C * (1 - pct2 / 100),
+          fill: "none",
+          transform: "rotate(-90 50 50)"
+        }
+      ) })
+    }
+  );
+}
+function ShutterButton({
+  enabled = true,
+  mode = "manual",
+  platform = "web",
+  countdown = null,
+  blockedToast,
+  label,
+  labels,
+  onPress,
+  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 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;
+  const shutter = /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label ?? t.capture,
+      accessibilityState: { disabled: !enabled },
+      testID: enabled ? "loam-shutter-open" : "loam-shutter-blocked",
+      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;
+        }
+        onPress?.();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            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,
+  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 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,
+  variant,
+  size,
+  disabled,
+  loading,
+  tone
+}) {
+  const t = useViewfinderLabels(labels);
+  if (!available) return null;
+  return /* @__PURE__ */ jsx(
+    GlassIconButton,
+    {
+      icon: "flash",
+      label: label ?? t.torch,
+      on,
+      variant,
+      size,
+      disabled,
+      loading,
+      tone,
+      onPress: () => onChange?.(!on)
+    }
+  );
+}
+function ViewfinderGridToggle({
+  on = false,
+  label,
+  labels,
+  onChange,
+  variant,
+  size,
+  disabled,
+  loading,
+  tone
+}) {
+  const t = useViewfinderLabels(labels);
+  return /* @__PURE__ */ jsx(
+    GlassIconButton,
+    {
+      icon: "grid",
+      label: label ?? t.grid,
+      on,
+      variant,
+      size,
+      disabled,
+      loading,
+      tone,
+      onPress: () => onChange?.(!on)
+    }
+  );
+}
+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: leadingIcon,
+      label: label ?? t.flipCamera,
+      disabled,
+      variant,
+      size,
+      loading,
+      tone,
+      motion,
+      trailingIcon,
+      fullWidth,
+      onPress: onFlip
+    }
+  );
+}
+function LensStop({
+  stop,
+  on,
+  onPick,
+  labels,
+  size = "md",
+  disabled = false
+}) {
+  const t = useViewfinderLabels(labels);
+  const theme = useLoamTheme("viewfinder");
+  const { styles } = useStyles(controlSheet, { on });
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: t.zoomStop(stop),
+      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) })
+    }
+  );
+}
+function LensPicker({
+  stops = [2, 1, 0.5],
+  value = 1,
+  label,
+  labels,
+  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);
+  const blocked = disabled || loading;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      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: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  ringNumber: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    fontVariant: ["tabular-nums"],
+    color: theme.color.good
+  },
+  shutter: {
+    flexGrow: 0,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: theme.borderWidth.strong,
+    variants: {
+      platform: {
+        ios: {
+          width: theme.space[72] + theme.space[2],
+          height: theme.space[72] + theme.space[2],
+          borderRadius: theme.radius.full
+        },
+        android: {
+          width: theme.space[68] + theme.space[2],
+          height: theme.space[68] + theme.space[2],
+          borderRadius: theme.radius["2xl"]
+        },
+        web: {
+          width: theme.space[64] + theme.space[2],
+          height: theme.space[64] + theme.space[2],
+          borderRadius: theme.radius["2xl"]
+        }
+      },
+      enabled: {
+        true: { borderColor: theme.media.ink, opacity: theme.opacity[100] },
+        // Dimmed and inert. Still reachable, still named, still able to say why.
+        false: { borderColor: theme.white.a8, opacity: theme.state.disabledOpacity }
+      }
+    }
+  },
+  shutterFill: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    variants: {
+      enabled: {
+        true: { backgroundColor: theme.media.ink },
+        false: {
+          backgroundColor: theme.black.a12,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.white.a5
+        }
+      }
+    }
+  },
+  notice: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space[8],
+    minHeight: theme.ctl.lg,
+    // A sentence in a control-sized box: it takes the width it is given rather
+    // than hugging its own text, and the padding stays modest so the words get
+    // that width instead of the box.
+    alignSelf: "stretch",
+    paddingHorizontal: theme.space[12],
+    paddingVertical: theme.space[8],
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  noticeText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    lineHeight: theme.fontSize[18],
+    textAlign: "center",
+    flexShrink: 1
+  },
+  lensColumn: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "center",
+    gap: theme.space[2],
+    padding: theme.space[4],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  lensStop: {
+    width: theme.ctl.md,
+    height: theme.ctl.md,
+    flexGrow: 0,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    variants: {
+      on: {
+        true: { backgroundColor: theme.media.ink },
+        false: {}
+      }
+    }
+  },
+  lensLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.semibold,
+    fontVariant: ["tabular-nums"]
+  }
+}));
+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 || loading;
+  React3.useEffect(() => {
+    if (!active || still) {
+      offset.setValue(0);
+      return;
+    }
+    const half = theme.loop.beacon;
+    const leg = (to) => Animated.timing(offset, {
+      toValue: to,
+      duration: half,
+      easing: Easing.bezier(...theme.easing.inOut),
+      useNativeDriver: true
+    });
+    const loop = Animated.loop(Animated.sequence([leg(1), leg(0)]));
+    loop.start();
+    return () => loop.stop();
+  }, [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__ */ jsxs(
+    View,
+    {
+      accessible: false,
+      testID: still ? "loam-scan-band-static" : "loam-scan-band",
+      style: [styles.scanBand, { height }, busyStyle(theme, loading)],
+      ...decorativeProps(),
+      ...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)" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+var GUIDE_BOX = {
+  quad: { width: "78%", heightFlex: 62, hole: false },
+  circle: { width: "62%", square: true, hole: true },
+  line: { width: "84%", hole: true },
+  silhouette: { width: "86%", heightFlex: 38, hole: false }
+};
+function Corners({ colour }) {
+  const { styles } = useStyles(overlaySheet);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(View, { style: [styles.cornerTopStart, { borderColor: colour }] }),
+    /* @__PURE__ */ jsx(View, { style: [styles.cornerTopEnd, { borderColor: colour }] }),
+    /* @__PURE__ */ jsx(View, { style: [styles.cornerBottomStart, { borderColor: colour }] }),
+    /* @__PURE__ */ jsx(View, { style: [styles.cornerBottomEnd, { borderColor: colour }] })
+  ] });
+}
+function GuideOverlay({
+  kind,
+  pass = false,
+  dimmed = false,
+  hint,
+  scanning = true,
+  tone = "neutral",
+  loading = false
+}) {
+  const theme = useLoamTheme("viewfinder");
+  const { styles } = useStyles(overlaySheet, { pass, dimmed });
+  const snap = React3.useRef(new Animated.Value(pass ? 1 : 0)).current;
+  React3.useEffect(() => {
+    Animated.timing(snap, {
+      toValue: pass ? 1 : 0,
+      duration: theme.motion.swap.duration,
+      easing: Easing.bezier(...theme.motion.swap.easing),
+      useNativeDriver: true
+    }).start();
+  }, [pass, snap, theme.motion.swap.duration, theme.motion.swap.easing]);
+  if (kind === "none") return null;
+  const box = GUIDE_BOX[kind];
+  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 };
+  const scale = snap.interpolate({ inputRange: [0, 1], outputRange: [1, 1.015] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessible: false,
+      testID: `loam-guide-${kind}-${pass ? "pass" : "wait"}`,
+      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(
+          View,
+          {
+            style: [
+              styles.guideRow,
+              box.heightFlex === void 0 ? null : { flexGrow: box.heightFlex, flexShrink: 1 }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(View, { style: [styles.scrimSide, scrim ? { backgroundColor: scrim } : null] }),
+              /* @__PURE__ */ jsxs(
+                Animated.View,
+                {
+                  style: [
+                    styles.guideBox,
+                    { width: box.width, transform: [{ scale }] },
+                    box.square ? styles.guideSquare : null,
+                    // A share of the band's height, so the box must take the row's
+                    // height rather than its (absolutely placed) corners' zero.
+                    box.heightFlex === void 0 ? null : styles.guideStretch
+                  ],
+                  children: [
+                    hint ? /* @__PURE__ */ jsx(View, { style: styles.hintWrap, children: /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.hint, children: hint }) }) : null,
+                    kind === "quad" ? /* @__PURE__ */ jsx(Corners, { colour }) : null,
+                    kind === "circle" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        View,
+                        {
+                          testID: "loam-guide-hole-ring",
+                          style: [
+                            styles.holeRing,
+                            {
+                              borderColor: theme.black.a9,
+                              borderWidth: reach,
+                              // Past half the ring's size, so it clamps to a true circle
+                              // and the inner edge (radius minus border) is the guide's.
+                              // `radius.full` (999) is less than the border, which left
+                              // the hole square.
+                              borderRadius: reach * 2,
+                              top: -reach,
+                              left: -reach,
+                              right: -reach,
+                              bottom: -reach
+                            }
+                          ]
+                        }
+                      ),
+                      /* @__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, tone }) }) : null,
+                    kind === "silhouette" ? /* @__PURE__ */ jsxs(Svg2, { viewBox: "0 0 100 44", width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet", children: [
+                      /* @__PURE__ */ jsx(
+                        Path,
+                        {
+                          d: "M4 32 L10 20 Q14 12 24 10 L64 10 Q76 11 82 20 L94 26 Q97 27 97 31 L97 36 Q97 38 94 38 L6 38 Q3 38 3 35 Z",
+                          stroke: colour,
+                          strokeWidth: 1,
+                          strokeDasharray: "5 3",
+                          strokeLinejoin: "round",
+                          fill: "none"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Circle, { cx: 26, cy: 38, r: 6, stroke: colour, strokeWidth: 1, strokeDasharray: "4 3", fill: "none" }),
+                      /* @__PURE__ */ jsx(Circle, { cx: 76, cy: 38, r: 6, stroke: colour, strokeWidth: 1, strokeDasharray: "4 3", fill: "none" })
+                    ] }) : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(View, { style: [styles.scrimSide, scrim ? { backgroundColor: scrim } : null] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(View, { style: [styles.scrimBand, bandGrow, scrim ? { backgroundColor: scrim } : null] })
+      ]
+    }
+  );
+}
+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, 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,
+  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 || loading;
+  const accent = camToneColour(theme, tone) ?? theme.color.warn;
+  React3.useEffect(() => {
+    if (still) {
+      phase.setValue(1);
+      return;
+    }
+    Animated.timing(phase, {
+      toValue: 1,
+      duration: theme.duration.slower,
+      easing: Easing.bezier(...theme.easing.out),
+      useNativeDriver: true
+    }).start();
+  }, [phase, still, theme.duration.slower, theme.easing.out]);
+  const opacity = still ? theme.opacity[100] : phase.interpolate({ inputRange: [0, 0.3, 1], outputRange: [0, 1, 0] });
+  const scale = still ? 1 : phase.interpolate({ inputRange: [0, 0.3, 1], outputRange: [1.015, 1, 1] });
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      accessible: false,
+      testID: "loam-focus-indicator",
+      style: [
+        styles.focusBox,
+        {
+          left: `${point.x * 100}%`,
+          top: `${point.y * 100}%`,
+          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: accent, strokeWidth: 1 }),
+        /* @__PURE__ */ jsx(Line, { x1: 6, y1: 12, x2: 18, y2: 12, stroke: accent, strokeWidth: 1 })
+      ] })
+    }
+  );
+}
+function FocusIndicator({
+  point = null,
+  pulseKey = 0,
+  tone = "neutral",
+  loading = false
+}) {
+  if (!point) return null;
+  return /* @__PURE__ */ jsx(FocusPulse, { point, tone, loading }, pulseKey);
+}
+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 = {
+      width: e.nativeEvent.layout.width,
+      height: e.nativeEvent.layout.height
+    };
+  };
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessible: false,
+      importantForAccessibility: "no-hide-descendants",
+      testID: "loam-focus-zone",
+      ...decorativeProps(),
+      ...untabbableProps(),
+      ...busyProps(loading),
+      onLayout,
+      style: styles.tapZone,
+      onPress: (e) => {
+        if (loading || !onFocusPoint) return;
+        const { width, height } = size.current;
+        if (width === 0 || height === 0) return;
+        const { locationX, locationY } = e.nativeEvent;
+        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
+      ] })
+    }
+  );
+}
+var overlaySheet = createStyleSheet((theme) => ({
+  scanBand: {
+    width: "100%",
+    overflow: "hidden",
+    // In the style object, not as a prop: the prop form is deprecated in
+    // react-native-web and warns on every render.
+    pointerEvents: "none"
+  },
+  scanLine: {
+    position: "absolute",
+    left: theme.space[0],
+    right: theme.space[0],
+    top: theme.space[0]
+  },
+  guideRoot: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0],
+    flexDirection: "column",
+    variants: {
+      // The guide has done its job once a tracker locks; the boxes are the
+      // thing to look at (spec E.4).
+      dimmed: { true: { opacity: theme.opacity[20] }, false: {} },
+      pass: { true: {}, false: {} }
+    }
+  },
+  scrimBand: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: theme.space[0]
+  },
+  // The row's own bands. `alignSelf: 'stretch'` is the load-bearing line: the
+  // row centres its children, and a band with no content and no stretch is
+  // zero points tall — which left the circle's "hole" a full-width strip.
+  scrimSide: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: theme.space[0],
+    alignSelf: "stretch"
+  },
+  holeRing: {
+    position: "absolute"
+  },
+  guideRootBleed: {
+    top: "-100%",
+    bottom: "-100%"
+  },
+  guideRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  guideBox: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  guideStretch: {
+    alignSelf: "stretch"
+  },
+  guideSquare: {
+    aspectRatio: 1
+  },
+  circleGuide: {
+    width: "100%",
+    height: "100%",
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.strong
+  },
+  lineGuide: {
+    width: "100%",
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.strong,
+    overflow: "hidden"
+  },
+  hintWrap: {
+    position: "absolute",
+    bottom: "100%",
+    marginBottom: theme.space[8],
+    alignItems: "center"
+  },
+  // An instruction, so the sans face at full ink — mono with wide tracking is
+  // the metadata treatment (the feed label), and it read as a caption here.
+  hint: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.media.ink,
+    paddingHorizontal: theme.space[12],
+    height: theme.space[24],
+    lineHeight: theme.space[24],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5,
+    overflow: "hidden"
+  },
+  cornerTopStart: {
+    position: "absolute",
+    top: theme.space[0],
+    left: theme.space[0],
+    width: theme.space[32],
+    height: theme.space[32],
+    borderTopWidth: theme.borderWidth.strong,
+    borderLeftWidth: theme.borderWidth.strong,
+    borderTopLeftRadius: theme.radius.sm
+  },
+  cornerTopEnd: {
+    position: "absolute",
+    top: theme.space[0],
+    right: theme.space[0],
+    width: theme.space[32],
+    height: theme.space[32],
+    borderTopWidth: theme.borderWidth.strong,
+    borderRightWidth: theme.borderWidth.strong,
+    borderTopRightRadius: theme.radius.sm
+  },
+  cornerBottomStart: {
+    position: "absolute",
+    bottom: theme.space[0],
+    left: theme.space[0],
+    width: theme.space[32],
+    height: theme.space[32],
+    borderBottomWidth: theme.borderWidth.strong,
+    borderLeftWidth: theme.borderWidth.strong,
+    borderBottomLeftRadius: theme.radius.sm
+  },
+  cornerBottomEnd: {
+    position: "absolute",
+    bottom: theme.space[0],
+    right: theme.space[0],
+    width: theme.space[32],
+    height: theme.space[32],
+    borderBottomWidth: theme.borderWidth.strong,
+    borderRightWidth: theme.borderWidth.strong,
+    borderBottomRightRadius: theme.radius.sm
+  },
+  gridRoot: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0]
+  },
+  gridV1: {
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: "33.333%",
+    width: theme.borderWidth.hair,
+    backgroundColor: theme.white.a5
+  },
+  gridV2: {
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: "66.666%",
+    width: theme.borderWidth.hair,
+    backgroundColor: theme.white.a5
+  },
+  gridH1: {
+    position: "absolute",
+    left: theme.space[0],
+    right: theme.space[0],
+    top: "33.333%",
+    height: theme.borderWidth.hair,
+    backgroundColor: theme.white.a5
+  },
+  gridH2: {
+    position: "absolute",
+    left: theme.space[0],
+    right: theme.space[0],
+    top: "66.666%",
+    height: theme.borderWidth.hair,
+    backgroundColor: theme.white.a5
+  },
+  focusBox: {
+    pointerEvents: "none",
+    position: "absolute",
+    width: theme.space[72],
+    height: theme.space[72],
+    marginLeft: -theme.space[36],
+    marginTop: -theme.space[36],
+    alignItems: "center",
+    justifyContent: "center",
+    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],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0]
+  }
+}));
+var AnimatedPath = Animated.createAnimatedComponent(Path);
+var SEVERITY_DASH = {
+  none: "dotted",
+  minor: "dashed",
+  moderate: "solid"
+};
+function toneStroke(theme, tone) {
+  switch (tone) {
+    case "good":
+      return theme.color.good;
+    case "warn":
+      return theme.color.warn;
+    case "danger":
+      return theme.color.danger;
+    default:
+      return theme.white.a12;
+  }
+}
+function TrackChip({
+  label,
+  conf,
+  slot = "above",
+  anchor = "start",
+  room = 100,
+  staggerIndex = 0,
+  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 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(() => {
+    if (still) {
+      enter.setValue(1);
+      return;
+    }
+    const anim = Animated.timing(enter, {
+      toValue: 1,
+      delay,
+      duration: theme.motion.enter.duration,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    });
+    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}%` }, 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,
+  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;
+  const text = label ?? trackCountLabel(count, words);
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      accessible: false,
+      testID: "loam-track-count",
+      "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
+      ]
+    }
+  );
+}
+var OUTLINE_PATH = {
+  /** A leafy blob — the plant profile's subject. */
+  blob: "M50 6 C72 6 92 22 94 46 C96 70 78 94 50 94 C22 94 4 70 6 46 C8 22 28 6 50 6 Z",
+  /** A car in three-quarter view — the panel profile's subject. */
+  car: "M6 66 L14 40 Q19 26 34 23 L70 23 Q84 25 90 40 L94 54 Q96 58 96 64 L96 74 Q96 78 90 78 L10 78 Q4 78 4 72 Z"
+};
+function pct(v) {
+  return v.interpolate({ inputRange: [0, 100], outputRange: ["0%", "100%"] });
+}
+function TrackedBox({
+  object,
+  locked,
+  tone,
+  chip = true,
+  chipIndex = 0,
+  ease = TRACKING_MOTION.ease,
+  frozen = false,
+  loading = false
+}) {
+  const theme = useLoamTheme("viewfinder");
+  const reduced = useReducedMotion();
+  const [x, y, w, h] = object.box;
+  const isLocked = locked ?? object.locked ?? false;
+  const severity = object.severity;
+  const resolved = tone ?? trackTone({ ...object, locked: isLocked });
+  const dash = severity ? SEVERITY_DASH[severity] : "solid";
+  const { styles } = useStyles(trackingSheet, { dash });
+  const stroke = toneStroke(theme, resolved);
+  const still = reduced || theme.reduceMotion || frozen;
+  const geo = React3.useRef({
+    x: new Animated.Value(x),
+    y: new Animated.Value(y),
+    w: new Animated.Value(w),
+    h: new Animated.Value(h)
+  }).current;
+  const lock = React3.useRef(new Animated.Value(1)).current;
+  const ants = React3.useRef(new Animated.Value(0)).current;
+  const last = React3.useRef(object.box);
+  React3.useEffect(() => {
+    const to = { x, y, w, h };
+    const keys = ["x", "y", "w", "h"];
+    const [px, py, pw, ph] = last.current;
+    const moved = px !== x || py !== y || pw !== w || ph !== h;
+    last.current = [x, y, w, h];
+    if (still) {
+      for (const k of keys) geo[k].setValue(to[k]);
+      return;
+    }
+    if (!moved) return;
+    const anim = Animated.parallel(
+      keys.map(
+        (k) => Animated.timing(geo[k], {
+          toValue: to[k],
+          duration: ease,
+          easing: Easing.bezier(...theme.easing.out),
+          useNativeDriver: false
+        })
+      )
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [x, y, w, h, still, ease, geo, last, theme.easing.out]);
+  React3.useEffect(() => {
+    if (!isLocked || still) {
+      lock.setValue(1);
+      return;
+    }
+    lock.setValue(0);
+    const anim = Animated.timing(lock, {
+      toValue: 1,
+      duration: TRACKING_MOTION.lock,
+      easing: Easing.bezier(...theme.easing.out),
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [isLocked, still, lock, theme.easing.out]);
+  React3.useEffect(() => {
+    if (!object.outline || still) {
+      ants.setValue(0);
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.timing(ants, {
+        toValue: 1,
+        duration: TRACKING_MOTION.ants,
+        easing: Easing.linear,
+        useNativeDriver: false
+      })
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [object.outline, still, ants]);
+  const dashUnit = theme.space[4];
+  const lockScale = lock.interpolate({
+    inputRange: [0, 1],
+    outputRange: [TRACKING_MOTION.lockScale, 1]
+  });
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      accessible: false,
+      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) },
+        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 }] }),
+          /* @__PURE__ */ jsx(View, { style: [styles.armTopEnd, { borderColor: stroke }] }),
+          /* @__PURE__ */ jsx(View, { style: [styles.armBottomStart, { borderColor: stroke }] }),
+          /* @__PURE__ */ jsx(View, { style: [styles.armBottomEnd, { borderColor: stroke }] })
+        ] }),
+        object.outline ? (
+          // A wrapping `View`, not `style` on the `Svg`: the outline has to be an
+          // absolutely positioned layer over the box, and a `View` is the thing
+          // this library positions.
+          /* @__PURE__ */ jsx(View, { testID: "loam-track-outline", style: styles.outline, children: /* @__PURE__ */ jsx(Svg2, { viewBox: "0 0 100 100", width: "100%", height: "100%", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx(
+            AnimatedPath,
+            {
+              d: OUTLINE_PATH[object.outline],
+              stroke,
+              strokeWidth: 1,
+              strokeLinejoin: "round",
+              vectorEffect: "non-scaling-stroke",
+              fill: "none",
+              strokeDasharray: [dashUnit, dashUnit],
+              strokeDashoffset: ants.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, theme.space[8]]
+              })
+            }
+          ) }) })
+        ) : null,
+        isLocked ? (
+          // The lock's non-colour channel. Inside the box's trailing-top corner,
+          // where it cannot collide with a chip in any of the three slots.
+          /* @__PURE__ */ jsx(View, { testID: "loam-track-lock", style: styles.lockGlyph, children: /* @__PURE__ */ jsx(Icon, { name: "lock", size: theme.icon.xs, color: stroke }) })
+        ) : null,
+        chip ? /* @__PURE__ */ jsx(
+          TrackChip,
+          {
+            label: object.label,
+            conf: object.conf,
+            slot: chipSlot(object.box),
+            anchor: chipAnchor(object.box),
+            room: chipRoom(object.box),
+            staggerIndex: chipIndex,
+            frozen
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function TrackingOverlay({
+  objects = [],
+  maxChips = MAX_CHIPS,
+  ease = TRACKING_MOTION.ease,
+  frozen = false,
+  dimmed = false,
+  safeAreaBottom = 0,
+  label,
+  copy,
+  tone,
+  loading = false
+}) {
+  const words = useAnalyzerCopy(copy);
+  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]));
+  const name = label === void 0 ? trackingSummaryLabel(objects, words) : label;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: "loam-tracking-overlay",
+      accessible: name !== null,
+      accessibilityRole: name === null ? void 0 : "image",
+      accessibilityLabel: name ?? void 0,
+      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,
+            frozen
+          },
+          o.id
+        )),
+        overflow > 0 ? /* @__PURE__ */ jsx(View, { style: [styles.countRow, { marginTop: -safeAreaBottom }], children: /* @__PURE__ */ jsx(TrackCountPill, { count: objects.length }) }) : null
+      ]
+    }
+  );
+}
+var trackingSheet = createStyleSheet((theme) => ({
+  overlayRoot: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0],
+    variants: {
+      // `analysing` fades the layer back; every state inside keeps its own
+      // channels, so the opacity is carrying nothing but distance.
+      dimmed: { true: { opacity: theme.opacity[48] }, false: {} }
+    }
+  },
+  box: {
+    pointerEvents: "none",
+    position: "absolute"
+  },
+  bracketLayer: {
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0]
+  },
+  outline: {
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0]
+  },
+  // Arm length is a share of the box, so a 6% box gets small brackets and a
+  // 60% box gets large ones rather than every box getting 32pt.
+  armTopStart: {
+    position: "absolute",
+    top: theme.space[0],
+    left: theme.space[0],
+    width: "25%",
+    height: "25%",
+    maxWidth: theme.space[32],
+    maxHeight: theme.space[32],
+    borderTopWidth: theme.borderWidth.strong,
+    borderLeftWidth: theme.borderWidth.strong,
+    borderTopLeftRadius: theme.radius.xs,
+    variants: {
+      dash: {
+        dotted: { borderStyle: "dotted" },
+        dashed: { borderStyle: "dashed" },
+        solid: { borderStyle: "solid" }
+      }
+    }
+  },
+  armTopEnd: {
+    position: "absolute",
+    top: theme.space[0],
+    right: theme.space[0],
+    width: "25%",
+    height: "25%",
+    maxWidth: theme.space[32],
+    maxHeight: theme.space[32],
+    borderTopWidth: theme.borderWidth.strong,
+    borderRightWidth: theme.borderWidth.strong,
+    borderTopRightRadius: theme.radius.xs,
+    variants: {
+      dash: {
+        dotted: { borderStyle: "dotted" },
+        dashed: { borderStyle: "dashed" },
+        solid: { borderStyle: "solid" }
+      }
+    }
+  },
+  armBottomStart: {
+    position: "absolute",
+    bottom: theme.space[0],
+    left: theme.space[0],
+    width: "25%",
+    height: "25%",
+    maxWidth: theme.space[32],
+    maxHeight: theme.space[32],
+    borderBottomWidth: theme.borderWidth.strong,
+    borderLeftWidth: theme.borderWidth.strong,
+    borderBottomLeftRadius: theme.radius.xs,
+    variants: {
+      dash: {
+        dotted: { borderStyle: "dotted" },
+        dashed: { borderStyle: "dashed" },
+        solid: { borderStyle: "solid" }
+      }
+    }
+  },
+  armBottomEnd: {
+    position: "absolute",
+    bottom: theme.space[0],
+    right: theme.space[0],
+    width: "25%",
+    height: "25%",
+    maxWidth: theme.space[32],
+    maxHeight: theme.space[32],
+    borderBottomWidth: theme.borderWidth.strong,
+    borderRightWidth: theme.borderWidth.strong,
+    borderBottomRightRadius: theme.radius.xs,
+    variants: {
+      dash: {
+        dotted: { borderStyle: "dotted" },
+        dashed: { borderStyle: "dashed" },
+        solid: { borderStyle: "solid" }
+      }
+    }
+  },
+  lockGlyph: {
+    position: "absolute",
+    top: theme.space[0],
+    right: theme.space[0],
+    margin: theme.space[2]
+  },
+  // The lane the chip hugs its content in. An absolute box shrink-wraps to its
+  // containing block, so a chip positioned straight on a 60px wheel box was
+  // capped at 60px: the label collapsed to nothing and the percentage spilled
+  // past the plate. The lane anchors at the edge `chipAnchor()` picks and is as
+  // wide as `chipRoom()` — up to the frame edge, never past a menu's width — and
+  // the chip sizes to its own label inside it.
+  chipLane: {
+    pointerEvents: "none",
+    position: "absolute",
+    maxWidth: theme.panel.xs,
+    flexDirection: "row",
+    variants: {
+      anchor: {
+        start: { left: theme.space[0], justifyContent: "flex-start" },
+        end: { right: theme.space[0], justifyContent: "flex-end" }
+      },
+      slot: {
+        above: { bottom: "100%", marginBottom: theme.space[4] },
+        "inside-top": { top: theme.space[0], marginTop: theme.space[4] },
+        below: { top: "100%", marginTop: theme.space[4] }
+      }
+    }
+  },
+  chip: {
+    flexShrink: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[6],
+    paddingHorizontal: theme.space[8],
+    paddingVertical: theme.space[2],
+    borderRadius: theme.radius.full,
+    // The same plate `viewfinder-chrome.tsx` defines, written out rather than
+    // spread from `camGlass()`: a spread of a function's return type collapses
+    // Unistyles' variant inference for the whole sheet, and the `slot` and
+    // `tone` variants below are what place and colour this chip.
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5,
+    variants: {
+      tone: { good: {}, warn: {}, danger: {} }
+    }
+  },
+  chipDot: {
+    width: theme.space[6],
+    height: theme.space[6],
+    flexGrow: 0,
+    flexShrink: 0,
+    borderRadius: theme.radius.full,
+    variants: {
+      tone: {
+        good: { backgroundColor: theme.color.good },
+        warn: { backgroundColor: theme.color.warn },
+        danger: { backgroundColor: theme.color.danger }
+      },
+      slot: { above: {}, "inside-top": {}, below: {} }
+    }
+  },
+  chipLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[11],
+    color: camInk(theme),
+    flexShrink: 1
+  },
+  chipConf: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[11],
+    color: camInk(theme),
+    flexGrow: 0,
+    flexShrink: 0,
+    fontVariant: ["tabular-nums"]
+  },
+  countRow: {
+    position: "absolute",
+    top: `${TRACK_BAND_BOTTOM}%`,
+    left: theme.space[0],
+    right: theme.space[0],
+    alignItems: "center"
+  },
+  countPill: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: theme.space[12],
+    paddingVertical: theme.space[4],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  countText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[11],
+    color: camInk(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,
+  current = 0,
+  angles,
+  mode = "angles",
+  readLabel,
+  labels,
+  copy,
+  onRedo,
+  onRead,
+  loading = false,
+  tone = "neutral"
+}) {
+  const t = useViewfinderLabels(labels);
+  const words = useAnalyzerCopy(copy);
+  const theme = useLoamTheme("viewfinder");
+  const { styles } = useStyles(sequenceSheet);
+  const batch = mode === "batch";
+  const count = batch ? Math.max(3, shots + 1) : total;
+  const cells = Array.from({ length: count }, (_, i) => i);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: batch ? t.capturedPages : t.captureSequence,
+      style: [styles.strip, camToneEdge(theme, tone), busyStyle(theme, loading)],
+      pointerEvents: loading ? "none" : void 0,
+      ...busyProps(loading),
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            horizontal: true,
+            showsHorizontalScrollIndicator: false,
+            contentContainerStyle: styles.railContent,
+            style: styles.rail,
+            children: cells.map((i) => {
+              const done = i < shots;
+              const isCurrent = !done && i === current;
+              const name = batch ? words.viewfinder.pageN(i + 1) : angles?.[i]?.label ?? words.viewfinder.angleN(i + 1);
+              const label = done ? t.stepCaptured(name) : name;
+              if (done) {
+                return /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: label,
+                    style: styles.cellDone,
+                    hitSlop: (theme.hit.lg - theme.ctl.sm) / 2,
+                    onPress: () => onRedo?.(i),
+                    children: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: "check",
+                        size: theme.icon.sm,
+                        color: theme.color.goodInk,
+                        strokeWidth: theme.icon.strokeBold
+                      }
+                    )
+                  },
+                  i
+                );
+              }
+              return /* @__PURE__ */ jsx(
+                View,
+                {
+                  accessible: true,
+                  accessibilityLabel: label,
+                  style: [styles.cellPending, isCurrent ? styles.cellCurrent : null],
+                  children: /* @__PURE__ */ jsx(Text, { style: styles.cellNumber, accessible: false, children: String(i + 1) })
+                },
+                i
+              );
+            })
+          }
+        ),
+        batch && shots > 0 ? (
+          // Pinned: outside the scroller, so eleven pages cannot push it off the
+          // end of the rail.
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              style: styles.pinned,
+              hitSlop: (theme.hit.lg - theme.ctl.sm) / 2,
+              onPress: onRead,
+              children: /* @__PURE__ */ jsx(Text, { style: styles.pinnedLabel, children: readLabel ?? readBatchLabel(shots, words) })
+            }
+          )
+        ) : null
+      ]
+    }
+  );
+}
+var EV_STOPS = Array.from(
+  { length: 13 },
+  (_, i) => Math.round((i - 6) / 3 * 100) / 100
+);
+function evLabel(v, locale) {
+  if (v === 0) return "0";
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+    signDisplay: "exceptZero"
+  }).format(v);
+}
+function groupNames(expert) {
+  return {
+    ev: expert[1]?.name ?? "EV compensation",
+    torch: expert[3]?.name ?? "Torch level",
+    format: expert[4]?.name ?? "Resolution and format",
+    ae: expert[0]?.name ?? "Exposure lock",
+    af: expert[2]?.name ?? "Focus lock",
+    gridLevel: expert[5]?.name ?? "Grid and level"
+  };
+}
+function Stop2({
+  on,
+  label,
+  onPick
+}) {
+  const theme = useLoamTheme("viewfinder");
+  const { styles } = useStyles(sequenceSheet, { on });
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      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 })
+    }
+  );
+}
+function ExpertPanel({
+  platform = "ios",
+  values = {},
+  labels,
+  copy,
+  onChange,
+  onClose,
+  loading = false,
+  tone = "neutral"
+}) {
+  const t = useViewfinderLabels(labels);
+  const words = useAnalyzerCopy(copy);
+  const locale = useLoamLocale();
+  const GROUP = groupNames(words.expert);
+  const theme = useLoamTheme("viewfinder");
+  const { styles } = useStyles(sequenceSheet);
+  const {
+    ev = 0,
+    torch = "off",
+    format = "pipeline",
+    aeLock = false,
+    afLock = false,
+    level = false,
+    grid = false
+  } = values;
+  const toggles = [
+    [GROUP.ae, aeLock, "aeLock"],
+    [GROUP.af, afLock, "afLock"],
+    [t.level, level, "level"],
+    [t.grid, grid, "grid"]
+  ];
+  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: 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,
+              {
+                on,
+                label,
+                onPick: () => onChange?.({ control, value: !on })
+              },
+              control
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+var sequenceSheet = createStyleSheet((theme) => ({
+  strip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8]
+  },
+  rail: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: theme.space[0]
+  },
+  railContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[6]
+  },
+  cellDone: {
+    width: theme.ctl.sm,
+    height: theme.ctl.sm,
+    flexGrow: 0,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.color.good,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  cellPending: {
+    width: theme.ctl.sm,
+    height: theme.ctl.sm,
+    flexGrow: 0,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  cellCurrent: {
+    borderWidth: theme.borderWidth.strong,
+    borderColor: theme.media.ink
+  },
+  cellNumber: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[11],
+    fontVariant: ["tabular-nums"],
+    color: theme.media.ink
+  },
+  pinned: {
+    flexGrow: 0,
+    flexShrink: 0,
+    height: theme.ctl.sm,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: theme.space[12],
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.media.ink
+  },
+  pinnedLabel: {
+    fontFamily: theme.font.sans,
+    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.lg,
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  panelHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[12]
+  },
+  panelHeadEnd: {
+    marginStart: "auto"
+  },
+  panelTitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13]
+  },
+  group: {
+    flexDirection: "column",
+    gap: theme.space[8]
+  },
+  groupLabel: {
+    fontSize: theme.fontSize[11],
+    fontWeight: theme.fontWeight.bold
+  },
+  stopRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8]
+  },
+  toggleRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space[8]
+  },
+  stop: {
+    height: theme.ctl.md,
+    minWidth: theme.ctl.md,
+    flexGrow: 0,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: theme.space[12],
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5,
+    variants: {
+      on: {
+        true: { backgroundColor: theme.media.ink, borderColor: theme.media.ink },
+        false: { backgroundColor: theme.black.a12 }
+      }
+    }
+  },
+  stopLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    fontWeight: theme.fontWeight.semibold,
+    fontVariant: ["tabular-nums"]
+  }
+}));
+function ShutterTray({
+  platform = "ios",
+  start,
+  primary,
+  end,
+  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, slot], children: start }),
+    /* @__PURE__ */ jsx(View, { style: styles.slotPrimary, children: stack ? null : primary }),
+    /* @__PURE__ */ jsx(View, { style: [styles.slotEnd, slot], children: end })
+  ] });
+  if (!stack) {
+    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, chrome], testID: `loam-tray-${platform}`, ...busyProps(loading), children: [
+    /* @__PURE__ */ jsx(View, { style: styles.stackedPrimary, children: primary }),
+    /* @__PURE__ */ jsx(View, { style: styles.stackedRow, children: secondaries })
+  ] });
+}
+var traySheet = createStyleSheet((theme) => ({
+  // Tight on the block axis: the shutter is the tray's height, and padding
+  // above and below it is preview the user no longer sees.
+  tray: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space[16],
+    paddingHorizontal: theme.space[16],
+    paddingVertical: theme.space[4]
+  },
+  stackedTray: {
+    flexDirection: "column",
+    gap: theme.space[8],
+    paddingHorizontal: theme.space[16],
+    paddingVertical: theme.space[4]
+  },
+  stackedPrimary: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  stackedRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space[16]
+  },
+  slotStart: {
+    width: theme.space[44],
+    flexGrow: 0,
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start"
+  },
+  slotPrimary: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: theme.space[0],
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  slotEnd: {
+    width: theme.space[44],
+    flexGrow: 0,
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end"
+  }
+}));
+
+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 };