@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-7OVVSVEZ.js → chunk-SG3J4R45.js}

@@ -1,14 +1,17 @@
-import { Stepper } from './chunk-OWAMM2DK.js';
-import { DescriptionList } from './chunk-QIKT7LIB.js';
-import { useCaptureResultLabels, PhaseAnnouncement, ConfidenceBadge, MatchRow, NoteBlock } from './chunk-LKFC4CS7.js';
-import { Card, CardHeader, CardTitle, CardContent, CardFooter } from './chunk-YXOAPXMU.js';
-import { Input } from './chunk-7BUIKDD6.js';
-import { Badge } from './chunk-TN2ZNJUI.js';
-import { PlaceholderFeed } from './chunk-5LAAAXFP.js';
-import { decorativeProps, useAnalyzerCopy, GuidanceChip, camInk } from './chunk-HJLPZA4X.js';
-import { Button } from './chunk-E2E3I5W2.js';
+import { DescriptionList } from './chunk-PFLNFIVB.js';
+import { Stepper } from './chunk-HP6ST2OW.js';
+import { useCaptureResultLabels, BusyWrap, PhaseAnnouncement, ConfidenceBadge, MatchRow, NoteBlock } from './chunk-SZLI34TA.js';
+import { IconTile } from './chunk-XBXUBBJZ.js';
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from './chunk-PWFRDRGS.js';
+import { PlaceholderFeed } from './chunk-RJA3RXO3.js';
+import { decorativeProps, useAnalyzerCopy, GuidanceChip, camInk } from './chunk-OCHPK5YV.js';
+import { measureBox } from './chunk-AQ5FIG74.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { Input } from './chunk-KXLDK6HB.js';
 import { useLoamLocale } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useReducedMotion, useResolvedMotion, springConfig, motionTiming } from './chunk-J64KGCGX.js';
 import * as React5 from 'react';
 import { Animated, View, Text, Pressable, Platform, findNodeHandle, AccessibilityInfo, PanResponder, ScrollView, Easing } from 'react-native';
@@ -18,13 +21,24 @@ import { localizeProfile, profile, pipelineFrom, estimateRange, failure, failure
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { money } from '@btndprojects/loam-pay';
 
-function ScanSweep({ active = true }) {
+function ScanSweep({
+  active = true,
+  tone = "good",
+  size = "md",
+  label: labelProp,
+  motion,
+  loading = false
+}) {
   const theme = useLoamTheme("capture-result");
+  const t = useCaptureResultLabels();
+  const label = labelProp ?? (loading ? t.analysing : void 0);
   const reduced = useReducedMotion();
   const { styles } = useStyles(analysisSheet);
   const [band, setBand] = React5.useState(0);
   const phase = React5.useRef(new Animated.Value(0)).current;
-  const still = reduced || theme.reduceMotion;
+  const level = useResolvedMotion(motion, "capture-result");
+  const still = reduced || theme.reduceMotion || level !== "full" || loading;
+  const hue = theme.color[tone === "info" ? "info" : tone === "accent" ? "accent" : tone];
   React5.useEffect(() => {
     if (!active || still || band === 0) {
       phase.setValue(0);
@@ -46,21 +60,29 @@ function ScanSweep({ active = true }) {
   return /* @__PURE__ */ jsx(
     View,
     {
-      accessible: false,
+      accessible: label ? true : false,
+      role: label ? "img" : void 0,
+      accessibilityLabel: label,
       testID: "loam-scan-sweep",
+      accessibilityState: loading ? { busy: true } : void 0,
+      "aria-busy": loading || void 0,
       style: styles.sweepRoot,
-      ...decorativeProps(),
+      ...label ? null : decorativeProps(),
       children: /* @__PURE__ */ jsx(
         Animated.View,
         {
           testID: still ? "loam-scan-sweep-static" : "loam-scan-sweep-band",
           onLayout,
-          style: [styles.sweepBand, { transform: [{ translateY }] }],
+          style: [
+            styles.sweepBand,
+            size === "sm" ? styles.sweepSm : size === "lg" ? styles.sweepLg : null,
+            { transform: [{ translateY }] }
+          ],
           children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
             /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(LinearGradient, { id: "loam-cam-sweep", x1: "0", y1: "0", x2: "0", y2: "1", 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(Stop, { offset: "0", stopColor: hue, stopOpacity: theme.opacity[0] }),
+              /* @__PURE__ */ jsx(Stop, { offset: "0.5", stopColor: hue, stopOpacity: theme.opacity[100] }),
+              /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: hue, stopOpacity: theme.opacity[0] })
             ] }) }),
             /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-sweep)" })
           ] })
@@ -71,13 +93,14 @@ function ScanSweep({ active = true }) {
 }
 function StageBadge({ where, copy }) {
   const words = useAnalyzerCopy(copy);
-  const locale = useLoamLocale();
   const privacy = where === "device" ? words.pipeline.device : words.pipeline.server;
-  return /* @__PURE__ */ jsx(View, { accessible: false, importantForAccessibility: "no-hide-descendants", ...decorativeProps(), children: /* @__PURE__ */ jsx(Badge, { variant: where === "device" ? "good" : "neutral", size: "sm", children: privacy.toLocaleUpperCase(locale) }) });
+  return /* @__PURE__ */ jsx(View, { accessible: false, importantForAccessibility: "no-hide-descendants", ...decorativeProps(), children: /* @__PURE__ */ jsx(Badge, { variant: where === "device" ? "good" : "neutral", size: "sm", children: privacy }) });
 }
-function DoneCheck() {
+function DoneCheck({ motion }) {
   const theme = useLoamTheme("capture-result");
-  const reduced = useReducedMotion();
+  const reducedOs = useReducedMotion();
+  const lvl = useResolvedMotion(motion, "capture-result");
+  const reduced = reducedOs || lvl !== "full";
   const v = React5.useRef(new Animated.Value(0)).current;
   React5.useEffect(() => {
     if (reduced) {
@@ -101,10 +124,13 @@ function DoneCheck() {
     }
   );
 }
-function StageDot({ status }) {
+function StageDot({
+  status,
+  motion
+}) {
   const theme = useLoamTheme("capture-result");
   const { styles } = useStyles(analysisSheet, { status });
-  if (status === "done") return /* @__PURE__ */ jsx(DoneCheck, {});
+  if (status === "done") return /* @__PURE__ */ jsx(DoneCheck, { motion });
   if (status === "failed") {
     return /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.danger });
   }
@@ -114,7 +140,8 @@ function StageRow({
   stage,
   status = "pending",
   labels,
-  copy
+  copy,
+  motion
 }) {
   const t = useCaptureResultLabels(labels);
   const words = useAnalyzerCopy(copy);
@@ -128,7 +155,7 @@ function StageRow({
       testID: `loam-stage-${status}`,
       style: styles.stageRow,
       children: [
-        /* @__PURE__ */ jsx(StageDot, { status }),
+        /* @__PURE__ */ jsx(StageDot, { status, motion }),
         /* @__PURE__ */ jsx(Text, { style: styles.stageLabel, children: stage.label }),
         /* @__PURE__ */ jsx(StageBadge, { where: stage.where, copy })
       ]
@@ -147,9 +174,15 @@ function AnalysisProgress({
   footer: footerProp,
   announce = true,
   labels,
-  copy
+  copy,
+  tone,
+  size = "md",
+  variant = "elevated",
+  loading = false,
+  motion
 }) {
   const { styles } = useStyles(analysisSheet);
+  const theme = useLoamTheme("capture-result");
   const t = useCaptureResultLabels(labels);
   const words = useAnalyzerCopy(copy);
   const footer = footerProp === void 0 ? words.pipeline.footer : footerProp;
@@ -158,24 +191,45 @@ function AnalysisProgress({
   const heading = title ?? defaultTitle(p, t);
   const active = pipeline.index >= 0 ? pipeline.stages[pipeline.index] : void 0;
   const message = announce ? active ? words.pipeline.stageAria(active.stage.label, words.pipeline[active.stage.where]) : heading : null;
-  return /* @__PURE__ */ jsxs(Card, { variant: "elevated", style: styles.card, children: [
-    /* @__PURE__ */ jsx(PhaseAnnouncement, { message }),
-    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.heading, children: heading }) }) }),
-    /* @__PURE__ */ jsxs(CardContent, { children: [
-      pipeline.stages.length > 0 ? /* @__PURE__ */ jsx(View, { role: "list", style: styles.stageList, children: pipeline.stages.map((s) => /* @__PURE__ */ jsx(
-        StageRow,
-        {
-          stage: s.stage,
-          status: s.status,
-          labels,
-          copy
-        },
-        s.stage.label
-      )) }) : /* @__PURE__ */ jsx(Text, { style: styles.noPipeline, children: words.pipeline.noPipeline(p.label) }),
-      footer ? /* @__PURE__ */ jsx(Text, { style: styles.footer, children: footer }) : null
-    ] }),
-    onCancel && pipeline.cancellable ? /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onCancel, children: cancelLabel ?? t.cancel }) }) : null
-  ] });
+  return /* @__PURE__ */ jsx(BusyWrap, { busy: loading, children: /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant,
+      style: [
+        styles.card,
+        tone ? { borderColor: theme.edge[tone], borderWidth: theme.borderWidth.base } : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(PhaseAnnouncement, { message }),
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            accessibilityRole: "header",
+            style: [
+              styles.heading,
+              size === "sm" ? styles.headingSm : size === "lg" ? styles.headingLg : null
+            ],
+            children: heading
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs(CardContent, { children: [
+          loading ? /* @__PURE__ */ jsx(View, { testID: "loam-analysis-loading", style: styles.stageList, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(Skeleton, { variant: "text" }, i)) }) : pipeline.stages.length > 0 ? /* @__PURE__ */ jsx(View, { role: "list", style: styles.stageList, children: pipeline.stages.map((s) => /* @__PURE__ */ jsx(
+            StageRow,
+            {
+              stage: s.stage,
+              status: s.status,
+              labels,
+              copy,
+              motion
+            },
+            s.stage.label
+          )) }) : /* @__PURE__ */ jsx(Text, { style: styles.noPipeline, children: words.pipeline.noPipeline(p.label) }),
+          footer ? /* @__PURE__ */ jsx(Text, { style: styles.footer, children: footer }) : null
+        ] }),
+        onCancel && pipeline.cancellable ? /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "lg", onPress: onCancel, children: cancelLabel ?? t.cancel }) }) : null
+      ]
+    }
+  ) });
 }
 var analysisSheet = createStyleSheet((theme) => ({
   sweepRoot: {
@@ -194,10 +248,14 @@ var analysisSheet = createStyleSheet((theme) => ({
     top: theme.space[0],
     height: "25%"
   },
+  sweepSm: { height: "15%" },
+  sweepLg: { height: "40%" },
   card: {
     width: "100%",
     maxWidth: theme.panel.lg
   },
+  headingSm: { fontSize: theme.type.headline.fontSize },
+  headingLg: { fontSize: theme.type.title2.fontSize },
   heading: {
     fontFamily: theme.font.sans,
     fontSize: theme.type.title3.fontSize,
@@ -211,7 +269,7 @@ var analysisSheet = createStyleSheet((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space[12],
-    paddingVertical: theme.space[6]
+    minHeight: theme.ctl.lg
   },
   dot: {
     flexGrow: 0,
@@ -237,10 +295,10 @@ var analysisSheet = createStyleSheet((theme) => ({
     flexShrink: 1,
     flexBasis: theme.space[0],
     fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[13],
+    fontSize: theme.fontSize[14],
     variants: {
       status: {
-        pending: { color: theme.color.text3 },
+        pending: { color: theme.color.text2 },
         active: { color: theme.color.text, fontWeight: theme.fontWeight.semibold },
         done: { color: theme.color.text },
         failed: { color: theme.color.text }
@@ -257,7 +315,7 @@ var analysisSheet = createStyleSheet((theme) => ({
     fontFamily: theme.font.sans,
     fontSize: theme.fontSize[12],
     lineHeight: theme.fontSize[12] * theme.lineHeight.relaxed,
-    color: theme.color.text3
+    color: theme.color.text2
   }
 }));
 function Money({
@@ -354,7 +412,7 @@ function PanelsResult({
       return /* @__PURE__ */ jsxs(View, { style: styles.finding, children: [
         /* @__PURE__ */ jsxs(View, { style: styles.findingTop, children: [
           /* @__PURE__ */ jsx(Text, { style: styles.findingPanel, children: f.panel }),
-          /* @__PURE__ */ jsx(Badge, { variant: SEVERITY_VARIANT[f.severity], children: words.result.severity[f.severity] })
+          /* @__PURE__ */ jsx(Badge, { variant: SEVERITY_VARIANT[f.severity], size: "sm", children: words.result.severity[f.severity] })
         ] }),
         /* @__PURE__ */ jsxs(View, { style: styles.findingBottom, children: [
           /* @__PURE__ */ jsx(Text, { style: styles.findingDamage, children: f.damage }),
@@ -386,7 +444,7 @@ function FieldRow({
     /* @__PURE__ */ jsx(View, { style: styles.fieldInput, children: /* @__PURE__ */ jsx(
       Input,
       {
-        size: "sm",
+        size: "md",
         value: field.value,
         editable: !!onChange,
         accessibilityLabel: flagged ? `${field.key}, ${words.result.fieldFlag}` : field.key,
@@ -513,8 +571,8 @@ var bodySheet = createStyleSheet((theme) => ({
   },
   mono: {
     fontFamily: theme.font.mono,
-    fontSize: theme.fontSize[11],
-    color: theme.color.text3
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
   },
   overline: {
     fontFamily: theme.font.sans,
@@ -538,7 +596,7 @@ var bodySheet = createStyleSheet((theme) => ({
     fontFamily: theme.font.sans,
     fontSize: theme.fontSize[12],
     lineHeight: theme.fontSize[12] * theme.lineHeight.relaxed,
-    color: theme.color.text3
+    color: theme.color.text2
   },
   money: {
     fontFamily: theme.font.sans,
@@ -546,7 +604,7 @@ var bodySheet = createStyleSheet((theme) => ({
     color: theme.color.text,
     variants: {
       emphasis: {
-        true: { fontSize: theme.fontSize[20], fontWeight: theme.fontWeight.bold },
+        true: { fontSize: theme.fontSize[20], fontWeight: theme.fontWeight.semibold },
         false: { fontSize: theme.fontSize[13] }
       }
     }
@@ -657,6 +715,7 @@ var bodySheet = createStyleSheet((theme) => ({
     gap: theme.space[12]
   }
 }));
+var NOOP = () => void 0;
 function FailureCard({
   failure: failure$1 = "low_confidence",
   alternates = [],
@@ -667,46 +726,80 @@ function FailureCard({
   manualLabel: manualProp,
   announce = true,
   labels,
-  copy
+  copy,
+  tone = "danger",
+  variant = "elevated",
+  elevation = "default",
+  padding = "md",
+  loading = false,
+  interactive = false,
+  onPress,
+  accessibilityLabel
 }) {
   const t = useCaptureResultLabels(labels);
   const words = useAnalyzerCopy(copy);
   const locale = useLoamLocale();
   const alternatesLabel = alternatesProp ?? t.closestWeGot;
   const manualLabel = manualProp ?? words.failure.enterManually;
-  const theme = useLoamTheme("capture-result");
   const { styles } = useStyles(failureSheet);
+  const theme = useLoamTheme("capture-result");
   const base = failure(failure$1);
   const resolved = { ...base, ...words.failures[base.id] };
   const body = failureBody(resolved.id, words);
   const showAlternates = resolved.id === "low_confidence" && alternates.length > 0;
-  return /* @__PURE__ */ jsxs(Card, { variant: "elevated", style: styles.card, children: [
-    /* @__PURE__ */ jsx(PhaseAnnouncement, { message: announce ? `${resolved.label}. ${body}` : null }),
-    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(View, { style: styles.headRow, children: [
-      /* @__PURE__ */ jsx(View, { accessible: false, style: styles.toneMark, ...decorativeProps(), children: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.sm, color: theme.color.warnOnSoft }) }),
-      /* @__PURE__ */ jsxs(View, { style: styles.headText, children: [
-        /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.heading, children: resolved.label }) }),
-        /* @__PURE__ */ jsx(Text, { style: styles.body, children: body })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
-      /* @__PURE__ */ jsx(NoteBlock, { title: words.failure.offerPrefix, description: resolved.offer }),
-      showAlternates ? /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.overline, children: alternatesLabel.toLocaleUpperCase(locale) }),
-        /* @__PURE__ */ jsx(View, { style: styles.list, children: alternates.map((m) => /* @__PURE__ */ jsx(MatchRow, { match: m, onPick: onPickAlternate, labels }, m.name)) })
-      ] }) : null
-    ] }) }),
-    /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
-      /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", fullWidth: true, onPress: onManualEntry, children: manualLabel }) }),
-      /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", fullWidth: true, onPress: onRetake, children: failurePrimaryLabel(resolved.id, words) }) })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsx(BusyWrap, { busy: loading, children: /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant,
+      onPress: interactive ? onPress ?? NOOP : void 0,
+      accessibilityLabel: interactive ? accessibilityLabel ?? resolved.label : void 0,
+      style: [
+        styles.card,
+        elevation === "flat" ? styles.flat : elevation === "raised" ? styles.raised : null,
+        padding === "lg" ? styles.padLg : null,
+        tone !== "danger" ? { borderColor: theme.edge[tone], borderWidth: theme.borderWidth.base } : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(PhaseAnnouncement, { message: announce ? `${resolved.label}. ${body}` : null }),
+        /* @__PURE__ */ jsxs(CardHeader, { children: [
+          /* @__PURE__ */ jsx(View, { accessible: false, ...decorativeProps(), children: /* @__PURE__ */ jsx(IconTile, { icon: "alert-triangle", tone, size: "lg" }) }),
+          /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.heading, children: resolved.label }) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.body, children: body })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: [
+              styles.stack,
+              padding === "sm" ? styles.stackSm : padding === "lg" ? styles.stackLg : null
+            ],
+            children: [
+              /* @__PURE__ */ jsx(NoteBlock, { title: words.failure.offerPrefix, description: resolved.offer }),
+              showAlternates ? /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+                /* @__PURE__ */ jsx(Text, { style: styles.overline, children: alternatesLabel.toLocaleUpperCase(locale) }),
+                /* @__PURE__ */ jsx(View, { style: styles.list, children: alternates.map((m) => /* @__PURE__ */ jsx(MatchRow, { match: m, onPick: onPickAlternate, labels }, m.name)) })
+              ] }) : null
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+          /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", fullWidth: true, onPress: onManualEntry, children: manualLabel }) }),
+          /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", fullWidth: true, loading, onPress: onRetake, children: failurePrimaryLabel(resolved.id, words) }) })
+        ] }) })
+      ]
+    }
+  ) });
 }
 var failureSheet = createStyleSheet((theme) => ({
   card: {
     width: "100%",
     maxWidth: theme.panel.lg
   },
+  flat: { shadowOpacity: 0, elevation: 0 },
+  raised: { ...theme.shadow.lg },
+  padLg: { padding: theme.space.s2 },
+  stackSm: { gap: theme.space[8] },
+  stackLg: { gap: theme.space[16] },
   headRow: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -793,7 +886,11 @@ function CapturePreview({
   copy,
   tracking,
   announce = true,
-  children
+  size = "md",
+  motion,
+  children,
+  tone,
+  loading = false
 }) {
   const theme = useLoamTheme("capture-result");
   const { styles } = useStyles(reviewSheet);
@@ -801,22 +898,34 @@ function CapturePreview({
   const words = useAnalyzerCopy(copy);
   const pill = pillProp === void 0 ? words.capturedPill : pillProp;
   const stop = SCRIM[scrim];
-  return /* @__PURE__ */ jsxs(View, { testID: `loam-capture-preview-${scrim}`, style: styles.frozen, children: [
-    /* @__PURE__ */ jsx(PhaseAnnouncement, { message: announce && pill ? pill : null }),
-    preview ?? /* @__PURE__ */ jsx(PlaceholderFeed, { label: label ?? t.frozenFrame, drift: false }),
-    stop ? /* @__PURE__ */ jsx(
-      View,
-      {
-        accessible: false,
-        testID: `loam-capture-scrim-${scrim}`,
-        style: [styles.scrim, { backgroundColor: theme.black[stop] }],
-        ...decorativeProps()
-      }
-    ) : null,
-    tracking,
-    pill ? /* @__PURE__ */ jsx(View, { style: styles.pillRow, children: /* @__PURE__ */ jsx(GuidanceChip, { text: pill }) }) : null,
-    children
-  ] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: `loam-capture-preview-${scrim}`,
+      "aria-busy": loading || void 0,
+      style: [
+        styles.frozen,
+        tone ? { borderColor: theme.edge[tone], borderWidth: theme.borderWidth.thick } : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(PhaseAnnouncement, { message: announce && pill ? pill : null }),
+        preview ?? /* @__PURE__ */ jsx(PlaceholderFeed, { label: label ?? t.frozenFrame, drift: false }),
+        stop ? /* @__PURE__ */ jsx(
+          View,
+          {
+            accessible: false,
+            testID: `loam-capture-scrim-${scrim}`,
+            style: [styles.scrim, { backgroundColor: theme.black[stop] }],
+            ...decorativeProps()
+          }
+        ) : null,
+        loading ? /* @__PURE__ */ jsx(View, { testID: "loam-capture-loading", style: styles.loadingPlate, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", motion }) }) : null,
+        tracking,
+        pill ? /* @__PURE__ */ jsx(View, { style: [styles.pillRow, size === "lg" ? styles.pillRowLg : null], children: /* @__PURE__ */ jsx(GuidanceChip, { text: pill, size: size === "sm" ? "sm" : "md", motion }) }) : null,
+        children
+      ]
+    }
+  );
 }
 function RetakeBar({
   analyse = true,
@@ -824,25 +933,51 @@ function RetakeBar({
   acceptLabel,
   labels,
   onRetake,
-  onAccept
+  onAccept,
+  size = "lg",
+  density = "standard",
+  orientation = "horizontal",
+  variant = "glass",
+  tone,
+  loading = false
 }) {
   const t = useCaptureResultLabels(labels);
   const retakeLabel = retakeProp ?? t.retake;
   const theme = useLoamTheme("capture-result");
   const { styles } = useStyles(reviewSheet);
-  return /* @__PURE__ */ jsxs(View, { testID: "loam-retake-bar", style: styles.retakeBar, children: [
-    /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: retakeLabel,
-        style: [styles.retakeSlot, styles.glassAction],
-        onPress: onRetake,
-        children: /* @__PURE__ */ jsx(Text, { style: [styles.glassActionLabel, { color: camInk(theme) }], children: retakeLabel })
-      }
-    ),
-    /* @__PURE__ */ jsx(View, { style: styles.acceptSlot, children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", fullWidth: true, onPress: onAccept, children: acceptLabel ?? (analyse ? t.analyse : t.usePhoto) }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: "loam-retake-bar",
+      "aria-busy": loading || void 0,
+      style: [
+        styles.retakeBar,
+        orientation === "vertical" ? styles.barVertical : null,
+        density === "compact" ? styles.barCompact : density === "comfortable" ? styles.barSpacious : null
+      ],
+      children: [
+        variant === "solid" ? /* @__PURE__ */ jsx(View, { style: [styles.retakeSlot, orientation === "vertical" ? styles.fullWidth : null], children: /* @__PURE__ */ jsx(Button, { variant: "outline", size, fullWidth: true, disabled: loading, onPress: onRetake, children: retakeLabel }) }) : /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: retakeLabel,
+            accessibilityState: { disabled: loading },
+            disabled: loading,
+            style: [
+              styles.retakeSlot,
+              styles.glassAction,
+              { height: theme.ctl[size] },
+              tone ? { borderColor: theme.edge[tone] } : null,
+              orientation === "vertical" ? styles.fullWidth : null
+            ],
+            onPress: onRetake,
+            children: /* @__PURE__ */ jsx(Text, { style: [styles.glassActionLabel, { color: camInk(theme) }], children: retakeLabel })
+          }
+        ),
+        /* @__PURE__ */ jsx(View, { style: [styles.acceptSlot, orientation === "vertical" ? styles.fullWidth : null], children: /* @__PURE__ */ jsx(Button, { variant: "primary", size, fullWidth: true, loading, onPress: onAccept, children: acceptLabel ?? (analyse ? t.analyse : t.usePhoto) }) })
+      ]
+    }
+  );
 }
 var FROZEN_PHASES = [
   "captured",
@@ -868,6 +1003,14 @@ var reviewSheet = createStyleSheet((theme) => ({
     left: theme.space[0],
     right: theme.space[0]
   },
+  loadingPlate: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0]
+  },
   pillRow: {
     pointerEvents: "box-none",
     position: "absolute",
@@ -877,6 +1020,7 @@ var reviewSheet = createStyleSheet((theme) => ({
     alignItems: "center",
     padding: theme.space[8]
   },
+  pillRowLg: { padding: theme.space[16] },
   retakeBar: {
     width: "100%",
     flexDirection: "row",
@@ -884,6 +1028,10 @@ var reviewSheet = createStyleSheet((theme) => ({
     alignItems: "center",
     gap: theme.space[8]
   },
+  barVertical: { flexDirection: "column", alignItems: "stretch" },
+  barCompact: { gap: theme.space[4] },
+  barSpacious: { gap: theme.space[16] },
+  fullWidth: { width: "100%", flexGrow: 0 },
   // Floored at their labels' widths and the bar wraps, so no label breaks
   // inside its button; when both fit, accept keeps the 2:1 share.
   retakeSlot: {
@@ -907,8 +1055,9 @@ var reviewSheet = createStyleSheet((theme) => ({
     borderColor: theme.white.a5
   },
   glassActionLabel: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.ctl.fs.lg
+    // The lg tier's label role, so this plate reads beside the Button (R12).
+    ...theme.ctl.label.lg,
+    fontFamily: theme.font.sans
   }
 }));
 function ResultCard({
@@ -920,35 +1069,103 @@ function ResultCard({
   onPickAlternate,
   onQuantityChange,
   labels,
-  copy
+  copy,
+  tone,
+  variant = "plain",
+  elevation = "default",
+  padding,
+  loading = false,
+  interactive = false,
+  onPress,
+  accessibilityLabel
 }) {
   const stamp = typeof profileProp === "string" ? profileProp : profileProp ? profileProp.id : void 0;
-  return /* @__PURE__ */ jsxs(View, { testID: stamp ? `loam-result-profile-${stamp}` : void 0, children: [
-    result.kind === "species" ? /* @__PURE__ */ jsx(
-      SpeciesResult,
-      {
-        result,
-        onPickAlternate,
-        labels,
-        copy
-      }
-    ) : null,
-    result.kind === "panels" ? /* @__PURE__ */ jsx(PanelsResult, { result, currency, labels, copy }) : null,
-    result.kind === "fields" ? /* @__PURE__ */ jsx(FieldsResult, { result, onFieldChange, labels, copy }) : null,
-    result.kind === "code" ? /* @__PURE__ */ jsx(
-      CodeResult,
-      {
-        result,
-        currency,
-        quantity,
-        onQuantityChange,
-        labels,
-        copy
-      }
-    ) : null,
-    result.kind === "verdict" ? /* @__PURE__ */ jsx(VerdictResult, { result, labels, copy }) : null
-  ] });
+  const { styles } = useStyles(cardSheet);
+  const theme = useLoamTheme("capture-result");
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: stamp ? `loam-result-profile-${stamp}` : void 0,
+      "aria-busy": loading || void 0,
+      "data-interactive": interactive || void 0,
+      style: [
+        interactive ? styles.rel : null,
+        variant !== "plain" ? styles.panel : null,
+        variant === "filled" ? styles.filled : null,
+        elevation === "raised" ? styles.raised : null,
+        padding === "sm" ? styles.padSm : padding === "md" ? styles.padMd : padding === "lg" ? styles.padLg : null,
+        tone ? {
+          borderColor: theme.edge[tone],
+          borderWidth: theme.borderWidth.base,
+          borderRadius: theme.radius.lg
+        } : null
+      ],
+      children: [
+        interactive ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: accessibilityLabel ?? stamp ?? result.kind,
+            testID: "loam-result-press",
+            onPress,
+            style: ({ pressed }) => [styles.pressLayer, pressed ? styles.pressed : null]
+          }
+        ) : null,
+        loading ? /* @__PURE__ */ jsxs(View, { testID: "loam-result-loading", style: styles.loading, children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text" }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text" }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.space[48] })
+        ] }) : null,
+        loading ? null : result.kind === "species" ? /* @__PURE__ */ jsx(
+          SpeciesResult,
+          {
+            result,
+            onPickAlternate,
+            labels,
+            copy
+          }
+        ) : null,
+        !loading && result.kind === "panels" ? /* @__PURE__ */ jsx(PanelsResult, { result, currency, labels, copy }) : null,
+        !loading && result.kind === "fields" ? /* @__PURE__ */ jsx(FieldsResult, { result, onFieldChange, labels, copy }) : null,
+        !loading && result.kind === "code" ? /* @__PURE__ */ jsx(
+          CodeResult,
+          {
+            result,
+            currency,
+            quantity,
+            onQuantityChange,
+            labels,
+            copy
+          }
+        ) : null,
+        !loading && result.kind === "verdict" ? /* @__PURE__ */ jsx(VerdictResult, { result, labels, copy }) : null
+      ]
+    }
+  );
 }
+var cardSheet = createStyleSheet((theme) => ({
+  panel: {
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  filled: { backgroundColor: theme.color.surface },
+  raised: { ...theme.shadow.lg },
+  padSm: { padding: theme.space[8] },
+  padMd: { padding: theme.space[12] },
+  padLg: { padding: theme.space[16] },
+  loading: { gap: theme.space[8] },
+  rel: { position: "relative" },
+  pressLayer: {
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0],
+    borderRadius: theme.radius.lg
+  },
+  pressed: { backgroundColor: theme.color.border, opacity: theme.opacity[38] }
+}));
 function ResultSheet({
   title: titleProp,
   primaryLabel: primaryProp,
@@ -959,9 +1176,15 @@ function ResultSheet({
   onKeep,
   onDismiss,
   autoFocus = true,
-  maxHeight = "82%",
+  maxHeight: maxHeightProp,
+  tone,
+  size = "md",
+  presentation = "overlay",
+  side = "bottom",
+  loading = false,
   dismissRatio = 0.3,
   grabberLabel: grabberProp,
+  morphFrom,
   children
 }) {
   const t = useCaptureResultLabels(labels);
@@ -975,9 +1198,11 @@ function ResultSheet({
   const panel = React5.useRef(null);
   const height = React5.useRef(0);
   const offset = React5.useRef(new Animated.Value(0)).current;
+  const maxHeight = maxHeightProp ?? (size === "sm" ? "60%" : size === "lg" ? "94%" : "82%");
   const level = useResolvedMotion(void 0, "capture-result");
   const enter = React5.useRef(new Animated.Value(0)).current;
   const [sheetH, setSheetH] = React5.useState(600);
+  const [startDy, setStartDy] = React5.useState(null);
   const entered = React5.useRef(false);
   const themeRef = React5.useRef(theme);
   themeRef.current = theme;
@@ -985,6 +1210,9 @@ function ResultSheet({
   levelRef.current = level;
   const dismiss = React5.useRef(onDismiss);
   dismiss.current = onDismiss;
+  const dir = side === "top" ? -1 : 1;
+  const dirRef = React5.useRef(dir);
+  dirRef.current = dir;
   const ratio = React5.useRef(dismissRatio);
   ratio.current = dismissRatio;
   React5.useLayoutEffect(() => {
@@ -1002,17 +1230,20 @@ function ResultSheet({
       onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dy) > 2,
       onPanResponderMove: (_e, g) => {
         if (!dismiss.current) return;
-        offset.setValue(Math.max(0, g.dy));
+        offset.setValue(dirRef.current * Math.max(0, dirRef.current * g.dy));
       },
       onPanResponderRelease: (_e, g) => {
-        if (dismiss.current && height.current > 0 && Math.max(0, g.dy) > height.current * ratio.current) {
+        if (dismiss.current && height.current > 0 && Math.max(0, dirRef.current * g.dy) > height.current * ratio.current) {
           offset.setValue(0);
           dismiss.current();
           return;
         }
         if (levelRef.current === "full") {
           Animated.spring(offset, {
-            ...springConfig(themeRef.current, "ds", { velocity: g.vy, thrown: true }),
+            ...springConfig(themeRef.current, "ds", {
+              velocity: dirRef.current * g.vy,
+              thrown: true
+            }),
             toValue: 0,
             useNativeDriver: true
           }).start();
@@ -1023,6 +1254,19 @@ function ResultSheet({
       onPanResponderTerminate: () => offset.setValue(0)
     })
   ).current;
+  const grabber = onDismiss ? /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: grabberLabel,
+      testID: "loam-result-grabber",
+      hitSlop: { top: grabberSlop, bottom: grabberSlop },
+      style: styles.grabberHit,
+      onPress: onDismiss,
+      ...pan.panHandlers,
+      children: /* @__PURE__ */ jsx(View, { accessible: false, style: styles.grabber })
+    }
+  ) : /* @__PURE__ */ jsx(View, { accessible: false, style: styles.grabberHit, children: /* @__PURE__ */ jsx(View, { style: styles.grabber }) });
   return /* @__PURE__ */ jsxs(
     Animated.View,
     {
@@ -1031,59 +1275,73 @@ function ResultSheet({
       accessibilityViewIsModal: true,
       accessibilityLabel: title,
       testID: "loam-result-sheet",
+      "aria-busy": loading || void 0,
       onLayout: (e) => {
         height.current = e.nativeEvent.layout.height;
         if (entered.current) return;
         entered.current = true;
         setSheetH(height.current);
-        if (level === "none") enter.setValue(1);
-        else if (level === "reduced")
+        const rise = () => {
+          if (level === "none") enter.setValue(1);
+          else if (level === "reduced")
+            Animated.timing(enter, {
+              ...motionTiming(level),
+              toValue: 1,
+              useNativeDriver: true
+            }).start();
+          else
+            Animated.spring(enter, {
+              ...springConfig(theme, "ds"),
+              toValue: 1,
+              useNativeDriver: true
+            }).start();
+        };
+        const node = panel.current;
+        if (!morphFrom?.current || level !== "full" || !node || side === "top") return rise();
+        void Promise.all([measureBox(morphFrom.current), measureBox(node)]).then(([src, dst]) => {
+          if (!src || !dst) return rise();
+          setStartDy(src.y - (dst.y - height.current));
           Animated.timing(enter, {
-            ...motionTiming(level),
-            toValue: 1,
-            useNativeDriver: true
-          }).start();
-        else
-          Animated.spring(enter, {
-            ...springConfig(theme, "ds"),
             toValue: 1,
+            duration: theme.motion.expand.duration,
+            easing: Easing.bezier(...theme.motion.expand.easing),
             useNativeDriver: true
           }).start();
+        });
       },
       style: [
         styles.sheet,
+        side === "top" ? styles.sheetTop : null,
+        presentation === "inline" ? styles.inline : null,
+        tone ? side === "top" ? { borderBottomColor: theme.edge[tone] } : { borderTopColor: theme.edge[tone] } : null,
         {
           maxHeight,
-          opacity: level === "full" ? 1 : enter,
+          opacity: level !== "full" ? enter : startDy === null ? 1 : enter.interpolate({
+            inputRange: [0, 0.3],
+            outputRange: [0, 1],
+            extrapolate: "clamp"
+          }),
           transform: [
             { translateY: offset },
             ...level === "full" ? [
               {
-                translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [sheetH, 0] })
+                translateY: enter.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [startDy ?? dir * sheetH, 0]
+                })
               }
             ] : []
           ]
         }
       ],
       children: [
-        onDismiss ? /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: grabberLabel,
-            testID: "loam-result-grabber",
-            hitSlop: { top: grabberSlop, bottom: grabberSlop },
-            style: styles.grabberHit,
-            onPress: onDismiss,
-            ...pan.panHandlers,
-            children: /* @__PURE__ */ jsx(View, { accessible: false, style: styles.grabber })
-          }
-        ) : /* @__PURE__ */ jsx(View, { accessible: false, style: styles.grabberHit, children: /* @__PURE__ */ jsx(View, { style: styles.grabber }) }),
-        /* @__PURE__ */ jsx(ScrollView, { style: styles.body, contentContainerStyle: styles.bodyContent, children }),
+        side === "top" ? null : grabber,
+        /* @__PURE__ */ jsx(ScrollView, { style: styles.body, contentContainerStyle: styles.bodyContent, focusable: true, children }),
         /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
           /* @__PURE__ */ jsx(View, { style: styles.secondarySlot, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", fullWidth: true, onPress: onScanAnother, children: scanAnotherLabel }) }),
-          /* @__PURE__ */ jsx(View, { style: styles.primarySlot, children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", fullWidth: true, onPress: onKeep, children: primaryLabel }) })
-        ] })
+          /* @__PURE__ */ jsx(View, { style: styles.primarySlot, children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", fullWidth: true, loading, onPress: onKeep, children: primaryLabel }) })
+        ] }),
+        side === "top" ? grabber : null
       ]
     }
   );
@@ -1104,6 +1362,18 @@ var sheetSheet = createStyleSheet((theme) => ({
     backgroundColor: theme.color.surface,
     ...theme.shadow.lg
   },
+  inline: { position: "relative", zIndex: theme.z.base },
+  sheetTop: {
+    bottom: "auto",
+    top: theme.space[0],
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: theme.radius.xl,
+    borderBottomRightRadius: theme.radius.xl,
+    borderTopWidth: 0,
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
   grabberHit: {
     width: "100%",
     height: theme.space[24],
@@ -1121,7 +1391,8 @@ var sheetSheet = createStyleSheet((theme) => ({
   body: {
     flexGrow: 1,
     flexShrink: 1,
-    flexBasis: theme.space[0]
+    // Content-sized up to the sheet's maxHeight, then it scrolls (a zero basis collapses the body in an auto-height sheet).
+    flexBasis: "auto"
   },
   bodyContent: {
     paddingHorizontal: theme.space[16],