react-native-image-stitcher 0.1.0

package/src/camera/PanoramaBandOverlay.tsx

@@ -0,0 +1,498 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * PanoramaBandOverlay — V16 Phase 2 (merged band + strip).
+ *
+ * SINGLE source of truth for the live "progress strip" that sits on
+ * top of the camera preview during a panorama hold.  Replaces what
+ * was previously TWO components rendered side-by-side:
+ *
+ *   1. live per-keyframe thumbnail strip — fed by accepted-frame URIs
+ *                                  (batch-keyframe engine) OR by
+ *                                  periodic vision-camera snapshots.
+ *   2. <PanoramaBandOverlay />   — a single cumulative-panorama
+ *                                  thumbnail with a "fill ratio"
+ *                                  bar growing with the pan.
+ *
+ * The split made the UI visually noisy AND made it differ between
+ * platforms when one side emitted keyframe events and the other
+ * didn't.  V16 Phase 2 collapses them into ONE component that:
+ *
+ *   • Renders a horizontally-scrolling list of per-keyframe
+ *     thumbnails when `frameUris` is non-empty (batch-keyframe
+ *     mode).  Each frame the KeyframeGate accepts shows up as a
+ *     mini-thumb.
+ *
+ *   • Falls back to a SINGLE cumulative-panorama thumbnail (the
+ *     V12.14.9 fill-ratio behaviour) when `frameUris` is empty —
+ *     i.e. the live-stitching engines that don't surface
+ *     per-keyframe paths.  This preserves the existing visual for
+ *     hybrid / firstwins / firstwins-rectilinear engines.
+ *
+ *   • Edge-pinned to the BOTTOM of the camera area in portrait, and
+ *     to the user's RIGHT in landscape (which corresponds to
+ *     JS-bottom under the app's portrait-lock).  Both anchors keep
+ *     the band out of the centre of the scene the operator is
+ *     framing.
+ *
+ *   • Trailing arrow points along the pan axis (→ in portrait, ← in
+ *     landscape-left's user perception).  Arrow always sits at the
+ *     pan-END side, so the LATEST keyframe abuts the arrow.
+ *
+ *   • Auto-scrolls a `<ScrollView>` so the latest keyframe stays
+ *     visible regardless of how many frames have been accumulated.
+ *
+ * Empty-state intentional non-design:
+ *   The KeyframeGate force-accepts the FIRST frame of every capture
+ *   (see C++ `AcceptFirstAnchoredOnPlane` / `AcceptFirstNoPlane` in
+ *   keyframe_gate.cpp).  By the time the operator's perceived "the
+ *   band appeared", we already have at least one thumb/snapshot in
+ *   flight.  We therefore don't render any "no frames yet"
+ *   placeholder — the empty period is sub-perceptual.
+ *
+ * Why this component is in react-native-image-stitcher (not host):
+ *   It's the same JSX shipped to iOS and Android.  Differences in
+ *   what shows up come only from native-emitted data
+ *   (`state.batchKeyframeThumbnailPath` / `state.panoramaPath`),
+ *   not from per-platform component code.  That's exactly the parity
+ *   property the user wants: "the UI should not differ between iOS
+ *   and Android — it's the same UI reused".
+ */
+
+import React, { useCallback, useMemo, useRef } from 'react';
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import type { IncrementalState } from '../stitching/incremental';
+
+
+/**
+ * 2026-05-18 (Issue #3 fix) — 4-way capture orientation classifier.
+ * Replaces the 2-way `state.isLandscape` boolean which couldn't
+ * distinguish landscape-LEFT (home button on user's right) from
+ * landscape-RIGHT (home button on user's left).  Required because
+ * the JS-coordinate mapping to user-perceived directions inverts
+ * between the two landscape rotations — `flexDirection: 'row'`
+ * gives oldest-at-user-top in landscape-LEFT but oldest-at-user-
+ * bottom in landscape-RIGHT, so we need to branch the layout.
+ */
+export type BandCaptureOrientation =
+  | 'portrait'
+  | 'portrait-upside-down'
+  | 'landscape-left'
+  | 'landscape-right';
+
+export interface PanoramaBandOverlayProps {
+  /**
+   * Latest engine state.  Pass `useIncrementalStitcher().state`.
+   * Used for single-thumb fallback URI and fill-ratio when no
+   * per-keyframe URIs are provided.  `state.isLandscape` is now
+   * superseded by `captureOrientation` below for layout selection.
+   */
+  state: IncrementalState | null;
+  /**
+   * Optional list of per-keyframe thumbnail URIs accumulated by the
+   * host as the native batch-keyframe engine emits
+   * `batchKeyframeThumbnailPath` events.  When non-empty, the band
+   * renders these as a scrolling mini-thumb strip.  When empty or
+   * undefined, the band falls back to the single cumulative-panorama
+   * thumbnail (legacy live-engine visual).
+   *
+   * Caller should cap the list length itself if needed (e.g. the
+   * AuditCaptureScreen already trims at 24 entries).  This component
+   * applies an internal hard cap as a safety net so a runaway
+   * emission doesn't blow up the scroll view.
+   */
+  frameUris?: string[];
+  /**
+   * 2026-05-18 (Issue #3) — capture orientation passed from the host.
+   * Drives a 4-way layout switch so the band reads correctly in
+   * either landscape rotation (the 2-way `state.isLandscape` boolean
+   * collapses landscape-LEFT and landscape-RIGHT to the same render
+   * path, which inverts the user's perceived "oldest-top, grows
+   * down" intent in one of them).  Pass
+   * `panoramaSettings.captureOrientation` from the host.  Defaults
+   * to `'portrait'` when omitted (back-compat).
+   */
+  captureOrientation?: BandCaptureOrientation;
+}
+
+
+// ── Layout constants — tuned to read clearly at arm's length ────────
+const BAND_PADDING = 6;
+const BAND_THICKNESS = 64;
+const ARROW_TRACK_LEN = 44;          // fixed slot for the arrow glyph
+const SINGLE_THUMB_INNER = BAND_THICKNESS - BAND_PADDING * 2;
+const SINGLE_THUMB_MAX_PAN_LEN = 240;
+const MULTI_THUMB_LEN = 48;
+const MULTI_THUMB_GAP = 4;
+const MULTI_THUMB_HARD_CAP = 32;     // safety net; host typically caps at 24
+
+
+type LayoutKind = 'portrait' | 'landscape';
+interface Layout {
+  kind: LayoutKind;
+  /** Outer container style — positioning + flexDirection. */
+  band: ViewStyle;
+  /** Direction used by both the outer band AND the scroll content. */
+  flexDirection: 'row' | 'row-reverse';
+  /** Unicode arrow pointing along the user-perceived pan axis. */
+  arrowGlyph: string;
+}
+
+
+/**
+ * Resolve band layout from capture orientation.  2026-05-18 (Issue #3)
+ * — uses the 4-way `BandCaptureOrientation` instead of the 2-way
+ * `state.isLandscape` so we can pick the right flex direction +
+ * arrow glyph in EACH landscape rotation.
+ *
+ * The two landscape rotations require different JS-coordinate setups
+ * because the phone tilts the JS coordinate system relative to the
+ * user differently:
+ *
+ *   LANDSCAPE-LEFT  (Apple: home indicator on user's RIGHT; phone
+ *                    rotated 90° CCW from portrait).
+ *     JS-left  = user-top
+ *     JS-right = user-bottom
+ *     Band at JS-bottom edge appears on user's RIGHT edge.
+ *     For "oldest at user-top, newest at user-bottom":
+ *       flexDirection = 'row' (array[0] at JS-left = user-top).
+ *     For arrow appearing as user-DOWN-arrow:
+ *       glyph `←` (rotated 90° CCW = points user-down).
+ *
+ *   LANDSCAPE-RIGHT (Apple: home indicator on user's LEFT; phone
+ *                    rotated 90° CW from portrait).
+ *     JS-left  = user-bottom
+ *     JS-right = user-top
+ *     Band at JS-TOP edge appears on user's RIGHT edge (so we move
+ *     the band to JS-top here, not JS-bottom).
+ *     For "oldest at user-top, newest at user-bottom":
+ *       flexDirection = 'row-reverse' (array[0] at JS-right = user-top).
+ *     For arrow appearing as user-DOWN-arrow:
+ *       glyph `→` (rotated 90° CW = points user-down).
+ *
+ *   PORTRAIT (and portrait-upside-down — collapsed because the band's
+ *             bottom-anchored position remains sensible either way):
+ *     Band at JS-bottom = user-bottom.  Row left-to-right.  Arrow `→`
+ *     reads as user-right-arrow (pointing along the horizontal pan
+ *     direction).
+ */
+function layoutFor(orientation: BandCaptureOrientation): Layout {
+  const commonInner: ViewStyle = {
+    alignItems: 'center',
+    paddingHorizontal: BAND_PADDING,
+    paddingVertical: BAND_PADDING,
+    backgroundColor: 'rgba(0, 0, 0, 0.55)',
+  };
+  // 2026-05-19 — repositioned tethered to the shutter (no longer
+  // edge-pinned via absolute positioning).  The parent stack in
+  // Camera.tsx now puts this band in a vertical column immediately
+  // above the shutter row.  The SDK's orientation lock holds the UI
+  // in portrait regardless of physical device rotation, so the band
+  // is ALWAYS a horizontal strip in JS coordinates.  In landscape
+  // (physically held), the rendered strip visually appears as a
+  // vertical column on the viewport-side of the shutter.
+  //
+  // What still varies by physical orientation: the order in which
+  // thumbnails should appear so newest is at the user-perceived
+  // "leading edge" of the pan.  That's the flexDirection (row vs
+  // row-reverse) and the arrow glyph.
+  if (orientation === 'landscape-left') {
+    // Phone rotated 90° CCW from portrait (home indicator on the
+    // user's RIGHT).  With UI orientation-locked to portrait:
+    //   JS-left  (band horizontal start) = user-BOTTOM
+    //   JS-right (band horizontal end)   = user-TOP
+    // For the canonical "oldest at user-TOP, growth toward user-
+    // BOTTOM" reading direction the monorepo established, we want:
+    //   array[0] (oldest) at user-TOP = JS-rightmost
+    //   newest        at user-BOTTOM = JS-leftmost
+    //   → flexDirection: 'row-reverse'  (array[0] at JS-rightmost)
+    return {
+      kind: 'landscape',
+      band: {
+        marginHorizontal: 16,
+        marginVertical: 8,
+        height: BAND_THICKNESS,
+        flexDirection: 'row-reverse',
+        ...commonInner,
+      },
+      flexDirection: 'row-reverse',
+      arrowGlyph: '←',
+    };
+  }
+  if (orientation === 'landscape-right') {
+    // Phone rotated 90° CW from portrait (home indicator on the
+    // user's LEFT).  Mirror of landscape-left:
+    //   JS-left  = user-TOP
+    //   JS-right = user-BOTTOM
+    // For "oldest at user-TOP, newest at user-BOTTOM":
+    //   array[0] (oldest) at user-TOP = JS-leftmost
+    //   → flexDirection: 'row'  (array[0] at JS-leftmost)
+    return {
+      kind: 'landscape',
+      band: {
+        marginHorizontal: 16,
+        marginVertical: 8,
+        height: BAND_THICKNESS,
+        flexDirection: 'row',
+        ...commonInner,
+      },
+      flexDirection: 'row',
+      arrowGlyph: '→',
+    };
+  }
+  // portrait / portrait-upside-down / default.  Held portrait, pan
+  // is horizontal left→right (or right→left for left-handed scans;
+  // the band doesn't enforce a direction).  newest at JS-rightmost.
+  return {
+    kind: 'portrait',
+    band: {
+      marginHorizontal: 16,
+      marginVertical: 8,
+      height: BAND_THICKNESS,
+      flexDirection: 'row',
+      ...commonInner,
+    },
+    flexDirection: 'row',
+    arrowGlyph: '→',
+  };
+}
+
+
+export function PanoramaBandOverlay({
+  state,
+  frameUris,
+  captureOrientation,
+}: PanoramaBandOverlayProps): React.JSX.Element | null {
+  // 2026-05-18 (Issue #3 fix) — orientation source priority:
+  //   1. `captureOrientation` prop from the host (4-way; correct
+  //      for landscape-left vs landscape-right disambiguation).
+  //   2. Fallback to `state.isLandscape` (2-way; collapses both
+  //      landscape rotations to landscape-left semantics).
+  //   3. Default `portrait` (the band's bottom-anchor still reads
+  //      sensibly before any orientation info is available).
+  const resolvedOrientation: BandCaptureOrientation =
+    captureOrientation
+    ?? (state?.isLandscape ? 'landscape-left' : 'portrait');
+  const layout = useMemo(
+    () => layoutFor(resolvedOrientation),
+    [resolvedOrientation],
+  );
+
+  const scrollRef = useRef<ScrollView | null>(null);
+
+  // Trim incoming URIs to a hard cap.  The host already caps at 24
+  // (AuditCaptureScreen) but defence-in-depth keeps the ScrollView
+  // bounded if a different host forgets to.  Slice from the END so
+  // we keep the MOST RECENT N — older frames slide off the start.
+  const cappedFrameUris = useMemo(() => {
+    if (!frameUris || frameUris.length === 0) return [];
+    return frameUris.length > MULTI_THUMB_HARD_CAP
+      ? frameUris.slice(frameUris.length - MULTI_THUMB_HARD_CAP)
+      : frameUris;
+  }, [frameUris]);
+
+  const hasMultiThumb = cappedFrameUris.length > 0;
+
+  // Auto-scroll on content-size change.
+  //
+  // 2026-05-18 (Issue #4 fix-b): the direction depends on flex
+  // direction.  In `row` (portrait, landscape-right) the LATEST
+  // item is at JS-rightmost → scrollToEnd shows it.  In
+  // `row-reverse` (landscape-left) the latest is at JS-leftmost →
+  // scrollTo({x: 0}) shows it.  The earlier always-scrollToEnd
+  // behaviour scrolled to OLDEST in row-reverse, which hid the
+  // just-captured frame off-screen at user-bottom.
+  const onContentSizeChange = useCallback(() => {
+    const sv = scrollRef.current;
+    if (!sv) return;
+    if (layout.flexDirection === 'row-reverse') {
+      sv.scrollTo({ x: 0, y: 0, animated: false });
+    } else {
+      sv.scrollToEnd({ animated: false });
+    }
+  }, [layout.flexDirection]);
+
+  // ── Single cumulative thumbnail (live-engine fallback) ──────────
+  //
+  // Same fill-ratio math as V12.14.9.  Kept so live-stitching engines
+  // (hybrid / firstwins / firstwins-rectilinear / firstwins-zoomed)
+  // that don't emit per-keyframe URIs still get a useful
+  // progress-thumbnail UX — the thumb widens proportionally as the
+  // operator pans further.
+  const cumulativeUri = useMemo(() => {
+    if (!state?.panoramaPath) return null;
+    return `file://${state.panoramaPath}?v=${state.acceptedCount}`;
+  }, [state?.panoramaPath, state?.acceptedCount]);
+
+  const fillRatio = useMemo(() => {
+    if (!state?.paintedExtent || !state?.panExtent) return 0;
+    return Math.max(0, Math.min(1, state.paintedExtent / state.panExtent));
+  }, [state?.paintedExtent, state?.panExtent]);
+
+  const singleThumbPanLen = useMemo(() => {
+    return Math.max(SINGLE_THUMB_INNER, SINGLE_THUMB_MAX_PAN_LEN * fillRatio);
+  }, [fillRatio]);
+
+  // V12.14.9 — rotate the panorama image 90° in landscape mode so
+  // the captured scene reads UPRIGHT to the user in landscape head-up
+  // view.  See original comment in the pre-V16 PanoramaBandOverlay for
+  // the full reasoning.  Portrait+horizontal-pan mode (the other
+  // supported mode) doesn't need rotation.
+  //
+  // 2026-05-18 (Issue #3) — derive from `resolvedOrientation` instead
+  // of the deprecated 2-way `isLandscape`.  In landscape-RIGHT we
+  // rotate −90° so the captured scene still reads upright (the
+  // opposite sense from landscape-LEFT).
+  const singleImageStyle = useMemo(
+    () => {
+      if (resolvedOrientation === 'landscape-left') {
+        return [StyleSheet.absoluteFill, { transform: [{ rotate: '90deg' }] }];
+      }
+      if (resolvedOrientation === 'landscape-right') {
+        return [StyleSheet.absoluteFill, { transform: [{ rotate: '-90deg' }] }];
+      }
+      return StyleSheet.absoluteFill;
+    },
+    [resolvedOrientation],
+  );
+
+  return (
+    <View pointerEvents="none" style={[styles.bandBase, layout.band]}>
+      {hasMultiThumb ? (
+        // Multi-thumb path: one image per accepted keyframe, scrolling
+        // horizontally (in JS-coords) within the band.  Content
+        // flex-direction matches the outer band so OLDEST is at the
+        // pan-start side and LATEST sits next to the arrow.
+        //
+        // 2026-05-18 (Issue A — arrow placement) — the arrow is the
+        // LAST child of contentContainer (after the thumbnail map)
+        // so it flows with the scroll content and always sits
+        // adjacent to the newest thumbnail.  Previously it was a
+        // sibling of the ScrollView at the band's far end, which
+        // looked detached when there were only a few thumbnails.
+        <ScrollView
+          ref={scrollRef}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          style={styles.thumbScroll}
+          contentContainerStyle={[
+            styles.thumbScrollContent,
+            { flexDirection: layout.flexDirection },
+          ]}
+          onContentSizeChange={onContentSizeChange}
+        >
+          {cappedFrameUris.map((uri, idx) => (
+            <Image
+              // Composite key: idx prevents collisions if the same path
+              // ever gets re-emitted (shouldn't happen but cheap to be
+              // defensive).  URI segment helps RN's image cache key.
+              key={`${idx}-${uri}`}
+              source={{ uri }}
+              style={styles.multiThumb}
+              resizeMode="cover"
+              fadeDuration={0}
+            />
+          ))}
+          <View style={styles.arrowTrack}>
+            <Text style={styles.arrowGlyph}>{layout.arrowGlyph}</Text>
+          </View>
+        </ScrollView>
+      ) : (
+        <>
+          {/* Single-thumb path: cumulative panorama image, width
+           *  grows with the pan extent.  Visually identical to
+           *  pre-V16 PanoramaBandOverlay so live-engine UX is
+           *  unchanged.  Arrow stays a sibling here so it sits at
+           *  the band's end (the single-thumb View is fixed-width
+           *  so the layout is naturally "thumb + arrow"). */}
+          <View
+            style={[
+              styles.thumbBox,
+              { width: singleThumbPanLen, height: SINGLE_THUMB_INNER },
+            ]}
+          >
+            {cumulativeUri ? (
+              <Image
+                key={state?.acceptedCount ?? 0}
+                source={{ uri: cumulativeUri }}
+                style={singleImageStyle}
+                resizeMode="cover"
+                fadeDuration={0}
+              />
+            ) : null}
+          </View>
+          <View style={styles.arrowTrack}>
+            <Text style={styles.arrowGlyph}>{layout.arrowGlyph}</Text>
+          </View>
+        </>
+      )}
+    </View>
+  );
+}
+
+
+const styles = StyleSheet.create({
+  // Properties common to every layout — uniform border-radius so the
+  // band reads as a single capsule regardless of which edge it's
+  // anchored to.  Orientation-specific values (position, flexDirection,
+  // sizing) come from `layoutFor()`.
+  bandBase: {
+    borderRadius: 12,
+  },
+  thumbScroll: {
+    flex: 1,
+  },
+  thumbScrollContent: {
+    alignItems: 'center',
+    paddingHorizontal: BAND_PADDING,
+    // 2026-05-18 (Issue #4 fix-a): contentContainer must FILL the
+    // ScrollView width so flexDirection aligns items at the correct
+    // end of the viewport.  Without flexGrow, contentContainer
+    // takes the natural width of its items (e.g. 150 px for 3
+    // thumbs) and anchors at JS-leftmost of the ScrollView, leaving
+    // a big empty gap on JS-right.  In landscape-left that gap is
+    // on user-TOP — exactly what the operator reports as "thumbs
+    // clump at the bottom".  flexGrow:1 makes the contentContainer
+    // span the viewport so items align at the END of the row-
+    // direction (JS-right for `row`, JS-left for `row-reverse`).
+    flexGrow: 1,
+  },
+  multiThumb: {
+    width: MULTI_THUMB_LEN,
+    height: MULTI_THUMB_LEN,
+    borderRadius: 4,
+    // marginHorizontal so the gap applies in both `row` and
+    // `row-reverse` directions identically; flex layout collapses
+    // adjacent margins, giving us a single inter-thumb gap.
+    marginHorizontal: MULTI_THUMB_GAP / 2,
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.55)',
+  },
+  thumbBox: {
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.55)',
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  arrowTrack: {
+    width: ARROW_TRACK_LEN,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: BAND_PADDING,
+  },
+  arrowGlyph: {
+    color: 'rgba(255, 255, 255, 0.9)',
+    fontSize: 28,
+    lineHeight: 28,
+    fontWeight: '600',
+  },
+});

package/src/camera/PanoramaConfirmModal.tsx

@@ -0,0 +1,206 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * PanoramaConfirmModal — post-stitch review screen.
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │                                                          │
+ *   │            ┌──────────────────────────────┐              │
+ *   │            │     stitched panorama        │              │
+ *   │            │     (resizeMode=contain)     │              │
+ *   │            └──────────────────────────────┘              │
+ *   │                                                          │
+ *   │      [✕ Discard]    [↺ Retry]    [✓ Save]               │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * Why this exists
+ *   Without it, a panorama lands directly into the audit's
+ *   thumbnail strip — operator only finds out it's bad once they
+ *   tap the thumbnail, or worse, never.  The confirm step is the
+ *   safety net iOS' native panorama UX gives by default.
+ *
+ * Three actions, three callbacks
+ *   - Save:    host persists the panorama (writes Capture row, etc).
+ *   - Retry:   host throws away the panorama and re-enters the
+ *              capture flow.  Good UX is to keep the camera
+ *              ready so the operator can immediately re-pan.
+ *   - Discard: host throws away the panorama and returns to the
+ *              capture flow without re-entering.  Same as Retry
+ *              minus the "ready to record" hint.
+ *
+ * The modal is purely presentational — it doesn't know about
+ * WatermelonDB, file paths, or any host-domain concept beyond the
+ * panorama URI + dimensions to display.
+ */
+
+import React from 'react';
+import {
+  Image,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+
+export interface PanoramaConfirmModalProps {
+  /**
+   * Modal visibility.  When true, the modal animates in over the
+   * current screen.  Drive this from the host's "stitch result is
+   * pending review" state.
+   */
+  visible: boolean;
+  /** file:// URI of the stitched panorama to preview. */
+  panoramaUri: string;
+  /** Pixel width of the panorama (for the preview's aspect ratio). */
+  width: number;
+  /** Pixel height of the panorama. */
+  height: number;
+  /** User confirmed — host should persist the panorama. */
+  onSave: () => void;
+  /** User wants to re-record — host should drop and reopen camera. */
+  onRetry: () => void;
+  /** User wants to discard without re-recording. */
+  onDiscard: () => void;
+  /** Optional override for the title (defaults to "Review panorama"). */
+  title?: string;
+}
+
+
+export function PanoramaConfirmModal({
+  visible,
+  panoramaUri,
+  width,
+  height,
+  onSave,
+  onRetry,
+  onDiscard,
+  title = 'Review panorama',
+}: PanoramaConfirmModalProps): React.JSX.Element {
+  // The aspect-ratio-locked image lets `<Image>` size itself
+  // correctly inside a flexible container without us having to
+  // measure the modal's available area on every layout change.
+  const aspectRatio = width > 0 && height > 0 ? width / height : 16 / 9;
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="fade"
+      transparent
+      statusBarTranslucent
+      onRequestClose={onDiscard}
+    >
+      <View style={styles.backdrop}>
+        <Text style={styles.title} accessibilityRole="header">
+          {title}
+        </Text>
+
+        <View style={styles.imageWrapper}>
+          <Image
+            source={{ uri: panoramaUri }}
+            style={[styles.image, { aspectRatio }]}
+            resizeMode="contain"
+            accessibilityIgnoresInvertColors
+          />
+        </View>
+
+        <View style={styles.buttonRow}>
+          <Pressable
+            onPress={onDiscard}
+            style={[styles.button, styles.buttonGhost]}
+            accessibilityRole="button"
+            accessibilityLabel="Discard panorama"
+          >
+            <Text style={styles.buttonGhostText}>✕  Discard</Text>
+          </Pressable>
+          <Pressable
+            onPress={onRetry}
+            style={[styles.button, styles.buttonNeutral]}
+            accessibilityRole="button"
+            accessibilityLabel="Retry panorama"
+          >
+            <Text style={styles.buttonNeutralText}>↺  Retry</Text>
+          </Pressable>
+          <Pressable
+            onPress={onSave}
+            style={[styles.button, styles.buttonPrimary]}
+            accessibilityRole="button"
+            accessibilityLabel="Save panorama"
+          >
+            <Text style={styles.buttonPrimaryText}>✓  Save</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.96)',
+    paddingTop: 64,
+    paddingBottom: 32,
+    paddingHorizontal: 16,
+  },
+  title: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  imageWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: '100%',
+    maxHeight: '100%',
+    backgroundColor: '#111',
+    borderRadius: 4,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 16,
+    gap: 12,
+  },
+  button: {
+    flex: 1,
+    paddingVertical: 14,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonGhost: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+  },
+  buttonGhostText: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '500',
+    opacity: 0.9,
+  },
+  buttonNeutral: {
+    backgroundColor: 'rgba(255,255,255,0.12)',
+  },
+  buttonNeutralText: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  buttonPrimary: {
+    backgroundColor: '#34C759',
+  },
+  buttonPrimaryText: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+});