@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-BV3B2HYZ.js

@@ -1,1635 +0,0 @@
-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 };