@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-BV3B2HYZ.js

@@ -0,0 +1,1635 @@
+import { camInk, GlassIconButton, decorativeProps, untabbableProps, camMeta, pressedProps } from './chunk-RW6ZL2FQ.js';
+import { useReducedMotion } from './chunk-6N33LFQA.js';
+import { Icon } from './chunk-TKVFVF5D.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 { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { TRACK_BAND_BOTTOM, EXPERT, CONTINUOUS_NOTICE, confidenceTone, TRACKING_MOTION, confidenceLabel, trackCountLabel, trackTone, chipRoom, chipAnchor, chipSlot, visibleChips, MAX_CHIPS, trackingSummaryLabel, 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 = "Auto-capturing"
+}) {
+  const theme = useLoamTheme();
+  const reduced = useReducedMotion();
+  const { styles } = useStyles(controlSheet);
+  const pct2 = Math.min(100, Math.max(0, value));
+  const still = reduced || theme.reduceMotion;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "progressbar",
+      role: "progressbar",
+      accessibilityLabel: label,
+      accessibilityValue: { min: 0, max: 100, now: Math.round(pct2) },
+      style: styles.ringRoot,
+      ...{
+        "aria-valuenow": 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(
+        Circle,
+        {
+          cx: 50,
+          cy: 50,
+          r: RING_R,
+          stroke: theme.color.good,
+          strokeWidth: RING_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 = "Capture",
+  onPress,
+  onBlocked
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(controlSheet, { platform, enabled });
+  const glyphColour = enabled ? theme.media.onInk : camInk(theme);
+  if (mode === "continuous") return null;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { disabled: !enabled },
+      testID: enabled ? "loam-shutter-open" : "loam-shutter-blocked",
+      style: styles.shutter,
+      onPress: () => {
+        if (!enabled) {
+          onBlocked?.(blockedToast ?? "");
+          return;
+        }
+        onPress?.();
+      },
+      children: [
+        /* @__PURE__ */ jsx(View, { style: styles.shutterFill, children: /* @__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 }) : null
+      ]
+    }
+  );
+}
+function ContinuousNotice({
+  text = CONTINUOUS_NOTICE
+}) {
+  const theme = useLoamTheme();
+  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 })
+  ] });
+}
+function TorchToggle({
+  on = false,
+  available = true,
+  label = "Torch",
+  onChange
+}) {
+  if (!available) return null;
+  return /* @__PURE__ */ jsx(
+    GlassIconButton,
+    {
+      icon: "flash",
+      label,
+      on,
+      onPress: () => onChange?.(!on)
+    }
+  );
+}
+function GridToggle({
+  on = false,
+  label = "Grid",
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(GlassIconButton, { icon: "grid", label, on, onPress: () => onChange?.(!on) });
+}
+function FlipButton({
+  label = "Flip camera",
+  onFlip
+}) {
+  return /* @__PURE__ */ jsx(GlassIconButton, { icon: "flip", label, onPress: onFlip });
+}
+function LensStop({
+  stop,
+  on,
+  onPick
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(controlSheet, { on });
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: `${stop}x`,
+      accessibilityState: { selected: on },
+      style: styles.lensStop,
+      hitSlop: Math.max(0, (theme.hit.lg - theme.ctl.md) / 2),
+      onPress: onPick,
+      ...pressedProps(on),
+      children: /* @__PURE__ */ jsx(Text, { style: [styles.lensLabel, { color: on ? theme.media.onInk : camInk(theme) }], children: `${stop}x` })
+    }
+  );
+}
+function LensPicker({
+  stops = [2, 1, 0.5],
+  value = 1,
+  label = "Zoom",
+  onChange
+}) {
+  const { styles } = useStyles(controlSheet);
+  return /* @__PURE__ */ jsx(View, { role: "group", accessibilityLabel: label, style: styles.lensColumn, children: stops.map((stop) => /* @__PURE__ */ jsx(LensStop, { stop, on: stop === value, 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[76], height: theme.space[76], borderRadius: theme.radius.full },
+        android: {
+          width: theme.space[72],
+          height: theme.space[72],
+          borderRadius: theme.radius["2xl"]
+        },
+        web: {
+          width: theme.space[68],
+          height: theme.space[68],
+          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.sm,
+    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[11],
+    fontWeight: theme.fontWeight.medium,
+    fontVariant: ["tabular-nums"]
+  }
+}));
+function ScanLine({ active = true, band, travel }) {
+  const theme = useLoamTheme();
+  const reduced = useReducedMotion();
+  const { styles } = useStyles(overlaySheet);
+  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;
+  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__ */ jsx(
+    View,
+    {
+      accessible: false,
+      testID: still ? "loam-scan-band-static" : "loam-scan-band",
+      style: [styles.scanBand, { height }],
+      ...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)" })
+          ] })
+        }
+      )
+    }
+  );
+}
+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
+}) {
+  const theme = useLoamTheme();
+  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 ? 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],
+      ...decorativeProps(),
+      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 }) }) : 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 GridOverlay({ visible = false }) {
+  const { styles } = useStyles(overlaySheet);
+  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 })
+  ] });
+}
+function FocusPulse({ point }) {
+  const theme = useLoamTheme();
+  const reduced = useReducedMotion();
+  const { styles } = useStyles(overlaySheet);
+  const phase = React3.useRef(new Animated.Value(0)).current;
+  const still = reduced || theme.reduceMotion;
+  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: theme.color.warn,
+          opacity,
+          transform: [{ scale }]
+        }
+      ],
+      ...decorativeProps(),
+      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 })
+      ] })
+    }
+  );
+}
+function FocusIndicator({
+  point = null,
+  pulseKey = 0
+}) {
+  if (!point) return null;
+  return /* @__PURE__ */ jsx(FocusPulse, { point }, pulseKey);
+}
+function FocusTapZone({ onFocusPoint }) {
+  const { styles } = useStyles(overlaySheet);
+  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(),
+      onLayout,
+      style: styles.tapZone,
+      onPress: (e) => {
+        if (!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))
+        });
+      }
+    }
+  );
+}
+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],
+    paddingVertical: theme.space[4],
+    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
+  },
+  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
+}) {
+  const theme = useLoamTheme();
+  const reduced = useReducedMotion();
+  const tone = confidenceTone(conf);
+  const { styles } = useStyles(trackingSheet, { slot, tone, anchor });
+  const still = reduced || theme.reduceMotion || frozen;
+  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}%` }], ...decorativeProps(), children: /* @__PURE__ */ jsxs(
+    Animated.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) })
+      ]
+    }
+  ) });
+}
+function TrackCountPill({ count, label }) {
+  const { styles } = useStyles(trackingSheet);
+  if (count <= 0) return null;
+  return /* @__PURE__ */ jsx(View, { accessible: false, testID: "loam-track-count", style: styles.countPill, ...decorativeProps(), children: /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.countText, children: label ?? trackCountLabel(count) }) });
+}
+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
+}) {
+  const theme = useLoamTheme();
+  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) }],
+      ...decorativeProps(),
+      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
+}) {
+  const { styles } = useStyles(trackingSheet, { dimmed });
+  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) : 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() : {},
+      children: [
+        objects.map((o) => /* @__PURE__ */ jsx(
+          TrackedBox,
+          {
+            object: o,
+            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 SequenceStrip({
+  total = 6,
+  shots = 0,
+  current = 0,
+  angles,
+  mode = "angles",
+  readLabel,
+  onRedo,
+  onRead
+}) {
+  const theme = useLoamTheme();
+  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 ? "Captured pages" : "Capture sequence", style: styles.strip, 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 ? `Page ${i + 1}` : angles?.[i]?.label ?? `Angle ${i + 1}`;
+          const label = done ? `${name} \u2014 captured, tap to redo` : name;
+          if (done) {
+            return /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: label,
+                style: styles.cellDone,
+                hitSlop: (theme.hit.lg - theme.space[32]) / 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.space[32]) / 2,
+          onPress: onRead,
+          children: /* @__PURE__ */ jsx(Text, { style: styles.pinnedLabel, children: readLabel ?? readBatchLabel(shots) })
+        }
+      )
+    ) : null
+  ] });
+}
+var EV_STOPS = Array.from(
+  { length: 13 },
+  (_, i) => Math.round((i - 6) / 3 * 100) / 100
+);
+function evLabel(v) {
+  if (v === 0) return "0";
+  return `${v > 0 ? "+" : ""}${v.toFixed(1)}`;
+}
+var GROUP = {
+  ev: EXPERT[1]?.[0] ?? "EV compensation",
+  torch: EXPERT[3]?.[0] ?? "Torch level",
+  format: EXPERT[4]?.[0] ?? "Resolution and format",
+  ae: EXPERT[0]?.[0] ?? "Exposure lock",
+  af: EXPERT[2]?.[0] ?? "Focus lock",
+  gridLevel: EXPERT[5]?.[0] ?? "Grid and level"
+};
+function Stop2({
+  on,
+  label,
+  onPick
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sequenceSheet, { on });
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { selected: on },
+      style: styles.stop,
+      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 = {},
+  onChange,
+  onClose
+}) {
+  const theme = useLoamTheme();
+  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"],
+    ["Level", level, "level"],
+    ["Grid", grid, "grid"]
+  ];
+  return /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: "Expert controls", style: styles.panel, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.panelHead, children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.panelTitle, { color: camInk(theme) }], children: "Expert" }),
+      /* @__PURE__ */ jsx(View, { style: styles.panelHeadEnd, children: onClose ? /* @__PURE__ */ jsx(GlassIconButton, { icon: "x", label: "Close expert controls", 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.toUpperCase() }),
+      /* @__PURE__ */ jsx(
+        ScrollView,
+        {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          contentContainerStyle: styles.stopRow,
+          children: EV_STOPS.map((stop) => /* @__PURE__ */ jsx(
+            Stop2,
+            {
+              on: stop === ev,
+              label: evLabel(stop),
+              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.toUpperCase() }),
+      /* @__PURE__ */ jsx(View, { style: styles.stopRow, children: ["off", "low", "high"].map((lvl) => /* @__PURE__ */ jsx(
+        Stop2,
+        {
+          on: lvl === torch,
+          label: 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.toUpperCase() }),
+      /* @__PURE__ */ jsx(View, { style: styles.stopRow, children: ["pipeline", "full"].map((f) => /* @__PURE__ */ jsx(
+        Stop2,
+        {
+          on: f === format,
+          label: f === "pipeline" ? "Pipeline-native" : "Full sensor",
+          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.space[32],
+    height: theme.space[32],
+    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.space[32],
+    height: theme.space[32],
+    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.space[32],
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: theme.space[12],
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.media.ink
+  },
+  pinnedLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.media.onInk
+  },
+  panel: {
+    flexDirection: "column",
+    gap: theme.space[16],
+    padding: theme.space[16],
+    borderRadius: theme.radius.md,
+    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[10]
+  },
+  stopRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8]
+  },
+  toggleRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space[8]
+  },
+  stop: {
+    height: theme.ctl.lg,
+    minWidth: theme.ctl.lg,
+    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[11],
+    fontVariant: ["tabular-nums"]
+  }
+}));
+function ShutterTray({
+  platform = "ios",
+  start,
+  primary,
+  end,
+  stack = false
+}) {
+  const { styles } = useStyles(traySheet);
+  const secondaries = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(View, { style: styles.slotStart, children: start }),
+    /* @__PURE__ */ jsx(View, { style: styles.slotPrimary, children: stack ? null : primary }),
+    /* @__PURE__ */ jsx(View, { style: styles.slotEnd, children: end })
+  ] });
+  if (!stack) {
+    return /* @__PURE__ */ jsx(View, { style: styles.tray, testID: `loam-tray-${platform}`, children: secondaries });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: styles.stackedTray, testID: `loam-tray-${platform}`, 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[48],
+    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[48],
+    flexGrow: 0,
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end"
+  }
+}));
+
+export { ContinuousNotice, CountdownRing, EV_STOPS, ExpertPanel, FlipButton, FocusIndicator, FocusTapZone, GridOverlay, GridToggle, GuideOverlay, LensPicker, ScanLine, SequenceStrip, ShutterButton, ShutterTray, TorchToggle, TrackChip, TrackCountPill, TrackedBox, TrackingOverlay };