@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/chunk-GDKVKNR2.js

@@ -0,0 +1,339 @@
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import * as React from 'react';
+import { Animated, Pressable, Text, Easing, Platform, findNodeHandle, AccessibilityInfo, Modal, View } from 'react-native';
+import { useStyles, createStyleSheet, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+var memoryStore = /* @__PURE__ */ new Map();
+var defaultRememberStorage = {
+  getItem: (key) => memoryStore.get(key) ?? null,
+  setItem: (key, value) => {
+    memoryStore.set(key, value);
+  }
+};
+function measureBox(node) {
+  return new Promise((resolve) => {
+    if (!node?.measureInWindow) return resolve(null);
+    node.measureInWindow((x, y, w, h) => resolve(Number.isFinite(x) && w > 0 && h > 0 ? { x, y, w, h } : null));
+  });
+}
+var DEFAULT_LABELS = {
+  closeDialog: "Close dialog",
+  close: "Close"
+};
+function Dialog({
+  open,
+  defaultOpen = false,
+  onClose,
+  onOpenChange,
+  dismissible = true,
+  remember = false,
+  rememberKey,
+  storage = defaultRememberStorage,
+  title,
+  description,
+  showClose = dismissible,
+  accessibilityLabel,
+  motion = "full",
+  morphFrom,
+  children,
+  labels: labelsProp
+}) {
+  const labels = useLabels("dialog", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("dialog");
+  const { styles } = useStyles(sheet);
+  const controlled = open !== void 0;
+  const persist = remember && rememberKey != null;
+  const reducedMotion = theme.reduceMotion || motion === "reduced";
+  const instantMotion = motion === "none";
+  const [internalOpen, setInternalOpen] = React.useState(() => {
+    if (!controlled && persist) {
+      const v = storage.getItem(rememberKey);
+      if (v === "open") return true;
+      if (v === "closed") return false;
+    }
+    return defaultOpen;
+  });
+  const actualOpen = controlled ? open : internalOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (persist) storage.setItem(rememberKey, next ? "open" : "closed");
+      if (!controlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [persist, rememberKey, storage, controlled, onOpenChange]
+  );
+  const requestDismiss = React.useCallback(() => {
+    if (!dismissible) return;
+    setOpen(false);
+    onClose?.();
+  }, [dismissible, setOpen, onClose]);
+  const [mounted, setMounted] = React.useState(actualOpen);
+  const progress = React.useRef(new Animated.Value(actualOpen ? 1 : 0)).current;
+  const canMorph = !!morphFrom && !reducedMotion && !instantMotion;
+  const rootRef = React.useRef(null);
+  const cardRef = React.useRef(null);
+  const fly = React.useRef(new Animated.Value(1)).current;
+  const [pending, setPending] = React.useState(false);
+  const [flight, setFlight] = React.useState(null);
+  const closingMorph = React.useRef(false);
+  const flightFor = React.useCallback(async () => {
+    const [src, dst, root] = await Promise.all([
+      measureBox(morphFrom?.current),
+      measureBox(cardRef.current),
+      measureBox(rootRef.current)
+    ]);
+    if (!src || !dst) return null;
+    const ox = root?.x ?? 0;
+    const oy = root?.y ?? 0;
+    const radius = Math.abs(src.w - src.h) < 2 ? src.h / 2 : Math.min(src.h / 2, theme.radius.md);
+    return { src: { ...src, x: src.x - ox, y: src.y - oy }, dst: { ...dst, x: dst.x - ox, y: dst.y - oy }, radius };
+  }, [morphFrom, theme.radius.md]);
+  const onCardLayout = React.useCallback(() => {
+    if (!pending) return;
+    void flightFor().then((f) => {
+      setPending(false);
+      if (!f) return;
+      setFlight(f);
+      fly.setValue(0);
+      Animated.timing(fly, {
+        toValue: 1,
+        duration: theme.motion.expand.duration,
+        easing: Easing.bezier(...theme.motion.expand.easing),
+        useNativeDriver: false
+      }).start(() => setFlight(null));
+    });
+  }, [pending, flightFor, fly, theme.motion.expand]);
+  React.useEffect(() => {
+    const easing = Easing.bezier(...theme.easing.base);
+    if (actualOpen) {
+      setMounted(true);
+      closingMorph.current = false;
+      if (canMorph) setPending(true);
+      if (instantMotion) {
+        progress.setValue(1);
+        return;
+      }
+      Animated.timing(progress, {
+        toValue: 1,
+        duration: theme.duration.base,
+        easing,
+        useNativeDriver: true
+      }).start();
+    } else {
+      if (instantMotion) {
+        progress.setValue(0);
+        setMounted(false);
+        return;
+      }
+      if (canMorph) {
+        closingMorph.current = true;
+        setPending(false);
+        void flightFor().then((f) => {
+          if (!closingMorph.current) return;
+          if (!f) {
+            closingMorph.current = false;
+            setMounted(false);
+            return;
+          }
+          setFlight(f);
+          fly.setValue(1);
+          Animated.timing(fly, {
+            toValue: 0,
+            duration: theme.motion.collapse.duration,
+            easing: Easing.bezier(...theme.motion.collapse.easing),
+            useNativeDriver: false
+          }).start(() => {
+            if (!closingMorph.current) return;
+            closingMorph.current = false;
+            setFlight(null);
+            setMounted(false);
+          });
+        });
+      }
+      Animated.timing(progress, {
+        toValue: 0,
+        duration: theme.motion.exit.duration,
+        easing: Easing.bezier(...theme.motion.exit.easing),
+        useNativeDriver: true
+      }).start(({ finished }) => {
+        if (finished && !closingMorph.current) setMounted(false);
+      });
+    }
+  }, [
+    actualOpen,
+    progress,
+    theme.duration.base,
+    theme.easing.base,
+    theme.motion.exit.duration,
+    theme.motion.exit.easing,
+    instantMotion,
+    canMorph,
+    flightFor,
+    fly,
+    theme.motion.collapse
+  ]);
+  const titleRef = React.useRef(null);
+  const cardMounted = mounted;
+  React.useEffect(() => {
+    if (!actualOpen || !cardMounted || Platform.OS === "web") return;
+    const node = titleRef.current;
+    const tag = node ? findNodeHandle(node) : null;
+    if (tag !== null) AccessibilityInfo.setAccessibilityFocus(tag);
+  }, [actualOpen, cardMounted]);
+  if (!mounted) return null;
+  const cardScale = reducedMotion || canMorph ? 1 : progress.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] });
+  const lerp = (a, b) => fly.interpolate({ inputRange: [0, 1], outputRange: [a, b] });
+  const clipStyle = flight ? [
+    styles.clip,
+    {
+      left: lerp(flight.src.x, flight.dst.x),
+      top: lerp(flight.src.y, flight.dst.y),
+      width: lerp(flight.src.w, flight.dst.w),
+      height: lerp(flight.src.h, flight.dst.h),
+      borderRadius: lerp(flight.radius, theme.radius.xl)
+    }
+  ] : styles.rest;
+  const innerStyle = flight ? {
+    position: "absolute",
+    left: lerp(flight.dst.x - flight.src.x, 0),
+    top: lerp(flight.dst.y - flight.src.y, 0),
+    width: flight.dst.w,
+    // The content arrives once the clip is big enough to hold it.
+    opacity: fly.interpolate({ inputRange: [0, 0.4, 1], outputRange: [0, 0, 1] })
+  } : styles.rest;
+  const cardStyle = flight ? [styles.card, styles.flat, { width: flight.dst.w, maxWidth: flight.dst.w }] : [styles.card, { opacity: pending ? 0 : progress, transform: [{ scale: cardScale }] }];
+  return /* @__PURE__ */ jsx(Modal, { transparent: true, visible: mounted, animationType: "none", onRequestClose: requestDismiss, children: /* @__PURE__ */ jsxs(View, { ref: rootRef, collapsable: false, style: styles.root, children: [
+    /* @__PURE__ */ jsx(
+      AnimatedPressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.closeDialog,
+        accessibilityElementsHidden: !dismissible,
+        importantForAccessibility: dismissible ? "auto" : "no-hide-descendants",
+        onPress: dismissible ? requestDismiss : void 0,
+        style: [styles.scrim, { opacity: progress }]
+      }
+    ),
+    /* @__PURE__ */ jsx(Animated.View, { style: clipStyle, children: /* @__PURE__ */ jsx(Animated.View, { style: innerStyle, children: /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        ref: cardRef,
+        role: "dialog",
+        accessibilityViewIsModal: true,
+        accessibilityLabel: accessibilityLabel ?? title,
+        onLayout: onCardLayout,
+        style: cardStyle,
+        children: [
+          showClose ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.close,
+              onPress: requestDismiss,
+              style: styles.close,
+              hitSlop: 8,
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 20, color: theme.color.text3 })
+            }
+          ) : null,
+          title ? /* @__PURE__ */ jsx(DialogTitle, { ref: titleRef, children: title }) : null,
+          description ? /* @__PURE__ */ jsx(DialogDescription, { children: description }) : null,
+          children
+        ]
+      }
+    ) }) })
+  ] }) });
+}
+var DialogTitle = React.forwardRef(
+  function DialogTitle2({ children }, ref) {
+    const { styles } = useStyles(sheet);
+    return /* @__PURE__ */ jsx(Text, { ref, accessibilityRole: "header", style: styles.title, children });
+  }
+);
+function DialogDescription({ children }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(Text, { style: styles.description, children });
+}
+function DialogFooter({ children }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(View, { style: styles.footer, children });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.space.s5
+  },
+  scrim: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: theme.color.scrim
+  },
+  // loam-contrast-ignore — the boundary here is the scrim, not the shadow.
+  // `color.scrim` is a 44% wash and is *not* re-resolved by high contrast, so
+  // this surface is still separated from the page when the elevation zeroes
+  // out. A border would put a hairline around every modal for no gain.
+  card: {
+    width: "100%",
+    // The reference width, which is now a named tier rather than a literal.
+    maxWidth: theme.panel.xl,
+    alignSelf: "center",
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.xl,
+    padding: theme.space.s5,
+    gap: theme.space.s3,
+    ...theme.shadow.lg
+  },
+  // The pass-through wrappers around the card at rest: full width, centring it.
+  rest: {
+    width: "100%",
+    alignItems: "center"
+  },
+  // The travelling clip while the card morphs to or from its source.
+  clip: {
+    position: "absolute",
+    overflow: "hidden",
+    backgroundColor: theme.color.surface
+  },
+  // No shadow in flight: overflow clipping would cut it anyway.
+  flat: {
+    shadowOpacity: 0,
+    elevation: 0
+  },
+  close: {
+    position: "absolute",
+    top: theme.space.s3,
+    right: theme.space.s3,
+    zIndex: 1,
+    padding: theme.space.s1,
+    borderRadius: theme.radius.full
+  },
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: `${theme.font.displayWeight}`,
+    fontSize: theme.fontSize[26],
+    color: theme.color.text
+  },
+  description: {
+    fontFamily: theme.font.sans,
+    // Reference (buildOverlays, Android): font-size:14px — sm token matches exactly.
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.fontSize[14] * 1.5,
+    color: theme.color.text2
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: theme.space.s2,
+    marginTop: theme.space.s2
+  }
+}));
+
+export { Dialog, DialogDescription, DialogFooter, DialogTitle, defaultRememberStorage };

package/dist/chunk-GEIGMWNF.js

@@ -0,0 +1,10 @@
+import { useLabels } from './chunk-APCWFOZW.js';
+import * as React from 'react';
+import { DEFAULT_PAY_LABELS, resolvePayLabels } from '@btndprojects/loam-pay';
+
+function usePayLabels(own) {
+  const merged = useLabels("pay", DEFAULT_PAY_LABELS, own);
+  return React.useMemo(() => resolvePayLabels(merged), [merged]);
+}
+
+export { usePayLabels };

package/dist/{chunk-JUAMLEHX.js → chunk-H7DWSL4O.js}

@@ -1,9 +1,9 @@
+import { useLabels } from './chunk-APCWFOZW.js';
 import * as React from 'react';
 import { View, Animated, Easing, Pressable, I18nManager } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-// src/spotlight/spotlight.tsx
 var NO_INSETS = { top: 0, bottom: 0, left: 0, right: 0 };
 var HostContext = React.createContext(null);
 function TourOverlay({ children }) {
@@ -179,7 +179,7 @@ function Spotlight({
   radius,
   motion = "full"
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("spotlight");
   const { styles } = useStyles(sheet);
   const rect = useAnchorRect(target);
   const fade = React.useRef(new Animated.Value(0)).current;
@@ -221,12 +221,12 @@ function HighlightRing({
   pulse = false,
   motion = "full"
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("spotlight");
   const { styles } = useStyles(sheet);
   const rect = useAnchorRect(target);
   const breathe = React.useRef(new Animated.Value(1)).current;
   React.useEffect(() => {
-    if (!pulse || motion === "none") return;
+    if (!pulse || motion === "none" || theme.reduceMotion) return;
     const loop = Animated.loop(
       Animated.sequence([
         Animated.timing(breathe, {
@@ -245,7 +245,7 @@ function HighlightRing({
     );
     loop.start();
     return () => loop.stop();
-  }, [pulse, motion, breathe, theme.loop.pulse]);
+  }, [pulse, motion, breathe, theme.loop.pulse, theme.reduceMotion]);
   if (!rect) return null;
   return /* @__PURE__ */ jsx(
     Animated.View,
@@ -265,28 +265,38 @@ function HighlightRing({
     }
   );
 }
-function Highlight({ kind = "spotlight", pulse, ...rest }) {
+function Highlight({
+  kind = "spotlight",
+  pulse,
+  ...rest
+}) {
   if (kind === "none") return null;
   if (kind === "spotlight") return /* @__PURE__ */ jsx(Spotlight, { ...rest });
   return /* @__PURE__ */ jsx(HighlightRing, { ...rest, pulse: kind === "pulse" || pulse });
 }
+var DEFAULT_LABELS = {
+  whatsNew: "What\u2019s new here"
+};
 var DOT = 12;
 var OVERHANG = 5;
 function Beacon({
   target,
   corner = "trailing-top",
-  accessibilityLabel = "What\u2019s new here",
+  accessibilityLabel: accessibilityLabelProp,
   pulsing = true,
   onPress,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("spotlight");
+  const labels = useLabels("beacon", DEFAULT_LABELS, labelsProp);
+  const accessibilityLabel = accessibilityLabelProp ?? labels.whatsNew;
   const { styles } = useStyles(sheet);
   const rect = useAnchorRect(target ?? null);
   const ring = React.useRef(new Animated.Value(0)).current;
   const anchored = target != null;
   React.useEffect(() => {
-    if (!pulsing || motion === "none") return;
+    if (!pulsing || motion === "none" || theme.reduceMotion) return;
     const loop = Animated.loop(
       Animated.timing(ring, {
         toValue: 1,
@@ -298,7 +308,7 @@ function Beacon({
     ring.setValue(0);
     loop.start();
     return () => loop.stop();
-  }, [pulsing, motion, ring, theme.loop.beacon]);
+  }, [pulsing, motion, ring, theme.loop.beacon, theme.reduceMotion]);
   if (anchored && !rect) return null;
   let placement;
   if (rect) {
@@ -328,7 +338,9 @@ function Beacon({
               styles.beaconRing,
               {
                 opacity: ring.interpolate({ inputRange: [0, 0.7, 1], outputRange: [0.55, 0, 0] }),
-                transform: [{ scale: ring.interpolate({ inputRange: [0, 1], outputRange: [1, 2.8] }) }]
+                transform: [
+                  { scale: ring.interpolate({ inputRange: [0, 1], outputRange: [1, 2.8] }) }
+                ]
               }
             ]
           }

package/dist/chunk-HJFFOOJ4.js

@@ -0,0 +1 @@
+

package/dist/{chunk-RW6ZL2FQ.js → chunk-HJLPZA4X.js}

@@ -1,10 +1,86 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import * as React3 from 'react';
+import { resolveAnalyzerLabels, localizeProfile, profile, gateHintDisplay } from '@btndprojects/loam-analyzer';
 import { View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { profile, gateHintDisplay } from '@btndprojects/loam-analyzer';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_ANALYZER_UI_LABELS = {
+  uploadPhoto: "Upload a photo",
+  expertControls: "Expert controls",
+  placeholderFeed: "live feed \xB7 placeholder",
+  webcamFront: "webcam \xB7 front",
+  rearCamera: "rear camera",
+  feedLive: (facing, ratio, zoom) => `${facing} \xB7 ${ratio} \xB7 ${zoom}x \xB7 placeholder feed`,
+  feedCaptured: (ratio) => `frozen frame \xB7 ${ratio} \xB7 placeholder`,
+  feedAnalysing: "frozen frame \xB7 analysing",
+  feedFrozen: "frozen frame",
+  feedDone: "captured frame",
+  analysing: "Analysing",
+  resultReady: "Result ready",
+  analysisFailed: "Analysis failed",
+  plate: {
+    plant: "plant subject",
+    document: "document page",
+    barcode: "barcode",
+    car: "vehicle",
+    id: "identity document",
+    generic: "scene"
+  }
+};
+function useAnalyzerLabels(own) {
+  const base = useLabels("analyzer", DEFAULT_ANALYZER_UI_LABELS, own);
+  return React3.useMemo(
+    () => ({ ...base, plate: { ...DEFAULT_ANALYZER_UI_LABELS.plate, ...base.plate } }),
+    [base]
+  );
+}
+var NO_COPY = {};
+function useAnalyzerCopy(own) {
+  const provided = useLabels("analyzerCopy", NO_COPY);
+  const scoped = React3.useContext(AnalyzerCopyScope);
+  return React3.useMemo(() => resolveAnalyzerLabels(provided, scoped, own), [provided, scoped, own]);
+}
+var AnalyzerCopyScope = React3.createContext(void 0);
+var DEFAULT_VIEWFINDER_LABELS = {
+  closeCamera: "Close camera",
+  autoCapturing: "Auto-capturing",
+  capture: "Capture",
+  torch: "Torch",
+  grid: "Grid",
+  flipCamera: "Flip camera",
+  zoom: "Zoom",
+  zoomStop: (stop) => `${stop}x`,
+  capturedPages: "Captured pages",
+  captureSequence: "Capture sequence",
+  stepCaptured: (name) => `${name} \u2014 captured, tap to redo`,
+  expertControls: "Expert controls",
+  expert: "Expert",
+  closeExpert: "Close expert controls",
+  level: "Level",
+  torchLevels: { off: "off", low: "low", high: "high" },
+  formats: { pipeline: "Pipeline-native", full: "Full sensor" },
+  uploadPhoto: "Upload a photo",
+  cameraDevice: "Camera device"
+};
+function useViewfinderLabels(own) {
+  const merged = useLabels("viewfinder", DEFAULT_VIEWFINDER_LABELS, own);
+  const provided = useLabels("viewfinder", NONE);
+  return React3.useMemo(
+    () => ({
+      ...merged,
+      torchLevels: {
+        ...DEFAULT_VIEWFINDER_LABELS.torchLevels,
+        ...provided.torchLevels,
+        ...own?.torchLevels
+      },
+      formats: { ...DEFAULT_VIEWFINDER_LABELS.formats, ...provided.formats, ...own?.formats }
+    }),
+    [merged, provided, own]
+  );
+}
+var NONE = {};
 function camGlass(theme) {
   return {
     backgroundColor: theme.black.a12,
@@ -18,7 +94,9 @@ function camInk(theme) {
 function camMeta(theme) {
   return {
     fontFamily: theme.font.mono,
-    color: theme.white.a10,
+    // `a13`, not `a10`: at 38% the metadata measured 2:1 on the scrim over a
+    // bright feed. 70% still reads as secondary beside the full-white ink.
+    color: theme.white.a13,
     letterSpacing: theme.tracking.wider
   };
 }
@@ -32,10 +110,10 @@ function decorativeProps() {
 function untabbableProps() {
   return { tabIndex: -1 };
 }
-var AnnounceContext = React.createContext(null);
+var AnnounceContext = React3.createContext(null);
 function SurfaceLiveRegion({ children }) {
-  const [message, setMessage] = React.useState("");
-  const announce = React.useCallback((m) => setMessage(m), []);
+  const [message, setMessage] = React3.useState("");
+  const announce = React3.useCallback((m) => setMessage(m), []);
   const { styles } = useStyles(chromeSheet);
   return /* @__PURE__ */ jsxs(AnnounceContext.Provider, { value: announce, children: [
     children,
@@ -52,7 +130,7 @@ function SurfaceLiveRegion({ children }) {
   ] });
 }
 function useSurfaceAnnounce() {
-  return React.useContext(AnnounceContext);
+  return React3.useContext(AnnounceContext);
 }
 function GlassIconButton({
   icon,
@@ -62,7 +140,7 @@ function GlassIconButton({
   radius = "full",
   onPress
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("viewfinder");
   const { styles } = useStyles(chromeSheet, { size, radius, on: on === true });
   const glyph = on ? theme.media.onInk : camInk(theme);
   return /* @__PURE__ */ jsx(
@@ -98,7 +176,7 @@ function GuidanceChip({
   tone = "neutral",
   icon
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("viewfinder");
   const { styles } = useStyles(chromeSheet, { tone });
   const { ink } = chipColours(theme, tone);
   return (
@@ -115,17 +193,22 @@ function GateHint({
   gate = { pass: true, failing: [] },
   countdown = null,
   live = true,
-  throttleMs = GATE_ANNOUNCE_MS
+  throttleMs = GATE_ANNOUNCE_MS,
+  copy
 }) {
-  const resolved = profile(profileProp);
-  const display = gateHintDisplay(resolved, gate, countdown);
+  const words = useAnalyzerCopy(copy);
+  const resolved = React3.useMemo(
+    () => localizeProfile(profile(profileProp), words),
+    [profileProp, words]
+  );
+  const display = gateHintDisplay(resolved, gate, countdown, words);
   const surface = useSurfaceAnnounce();
-  const [own, setOwn] = React.useState("");
+  const [own, setOwn] = React3.useState("");
   const { styles } = useStyles(chromeSheet);
-  const sink = React.useRef(setOwn);
+  const sink = React3.useRef(setOwn);
   sink.current = surface ?? setOwn;
-  const last = React.useRef({ text: "", at: 0 });
-  React.useEffect(() => {
+  const last = React3.useRef({ text: "", at: 0 });
+  React3.useEffect(() => {
     if (!live) return;
     const text = display.text;
     if (text === last.current.text) return;
@@ -159,15 +242,17 @@ function ViewfinderTopBar({
   title,
   subtitle,
   align = "start",
-  closeLabel = "Close camera",
+  closeLabel,
+  labels,
   onClose,
   children
 }) {
-  const theme = useLoamTheme();
+  const t = useViewfinderLabels(labels);
+  const theme = useLoamTheme("viewfinder");
   const { styles } = useStyles(chromeSheet, { align });
   const ink = camInk(theme);
   return /* @__PURE__ */ jsxs(View, { style: styles.topBar, children: [
-    onClose ? /* @__PURE__ */ jsx(GlassIconButton, { icon: "x", label: closeLabel, onPress: onClose }) : null,
+    onClose ? /* @__PURE__ */ jsx(GlassIconButton, { icon: "x", label: closeLabel ?? t.closeCamera, onPress: onClose }) : null,
     /* @__PURE__ */ jsxs(View, { style: styles.titlePlate, children: [
       /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.title, { color: ink }], children: title }),
       subtitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.subtitle, { color: ink }], children: subtitle }) : null
@@ -281,4 +366,4 @@ var chromeSheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { GATE_ANNOUNCE_MS, GateHint, GlassIconButton, GuidanceChip, SurfaceLiveRegion, ViewfinderTopBar, camGlass, camInk, camMeta, decorativeProps, pressedProps, untabbableProps, useSurfaceAnnounce };
+export { AnalyzerCopyScope, GATE_ANNOUNCE_MS, GateHint, GlassIconButton, GuidanceChip, SurfaceLiveRegion, ViewfinderTopBar, camGlass, camInk, camMeta, decorativeProps, pressedProps, untabbableProps, useAnalyzerCopy, useAnalyzerLabels, useSurfaceAnnounce, useViewfinderLabels };