react-native-image-stitcher 0.1.0

package/dist/camera/PanoramaBandOverlay.js

@@ -0,0 +1,399 @@
+"use strict";
+// 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".
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanoramaBandOverlay = PanoramaBandOverlay;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// ── 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
+/**
+ * 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) {
+    const commonInner = {
+        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: '→',
+    };
+}
+function PanoramaBandOverlay({ state, frameUris, captureOrientation, }) {
+    // 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 = captureOrientation
+        ?? (state?.isLandscape ? 'landscape-left' : 'portrait');
+    const layout = (0, react_1.useMemo)(() => layoutFor(resolvedOrientation), [resolvedOrientation]);
+    const scrollRef = (0, react_1.useRef)(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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(() => {
+        if (!state?.panoramaPath)
+            return null;
+        return `file://${state.panoramaPath}?v=${state.acceptedCount}`;
+    }, [state?.panoramaPath, state?.acceptedCount]);
+    const fillRatio = (0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(() => {
+        if (resolvedOrientation === 'landscape-left') {
+            return [react_native_1.StyleSheet.absoluteFill, { transform: [{ rotate: '90deg' }] }];
+        }
+        if (resolvedOrientation === 'landscape-right') {
+            return [react_native_1.StyleSheet.absoluteFill, { transform: [{ rotate: '-90deg' }] }];
+        }
+        return react_native_1.StyleSheet.absoluteFill;
+    }, [resolvedOrientation]);
+    return (react_1.default.createElement(react_native_1.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.
+    react_1.default.createElement(react_native_1.ScrollView, { ref: scrollRef, horizontal: true, showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, style: styles.thumbScroll, contentContainerStyle: [
+            styles.thumbScrollContent,
+            { flexDirection: layout.flexDirection },
+        ], onContentSizeChange: onContentSizeChange },
+        cappedFrameUris.map((uri, idx) => (react_1.default.createElement(react_native_1.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.
+        , { 
+            // 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 }))),
+        react_1.default.createElement(react_native_1.View, { style: styles.arrowTrack },
+            react_1.default.createElement(react_native_1.Text, { style: styles.arrowGlyph }, layout.arrowGlyph)))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_native_1.View, { style: [
+                styles.thumbBox,
+                { width: singleThumbPanLen, height: SINGLE_THUMB_INNER },
+            ] }, cumulativeUri ? (react_1.default.createElement(react_native_1.Image, { key: state?.acceptedCount ?? 0, source: { uri: cumulativeUri }, style: singleImageStyle, resizeMode: "cover", fadeDuration: 0 })) : null),
+        react_1.default.createElement(react_native_1.View, { style: styles.arrowTrack },
+            react_1.default.createElement(react_native_1.Text, { style: styles.arrowGlyph }, layout.arrowGlyph))))));
+}
+const styles = react_native_1.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',
+    },
+});
+//# sourceMappingURL=PanoramaBandOverlay.js.map

package/dist/camera/PanoramaConfirmModal.d.ts

@@ -0,0 +1,57 @@
+/**
+ * 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';
+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 declare function PanoramaConfirmModal({ visible, panoramaUri, width, height, onSave, onRetry, onDiscard, title, }: PanoramaConfirmModalProps): React.JSX.Element;
+//# sourceMappingURL=PanoramaConfirmModal.d.ts.map

package/dist/camera/PanoramaConfirmModal.js

@@ -0,0 +1,128 @@
+"use strict";
+// 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.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanoramaConfirmModal = PanoramaConfirmModal;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+function PanoramaConfirmModal({ visible, panoramaUri, width, height, onSave, onRetry, onDiscard, title = 'Review panorama', }) {
+    // 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 (react_1.default.createElement(react_native_1.Modal, { visible: visible, animationType: "fade", transparent: true, statusBarTranslucent: true, onRequestClose: onDiscard },
+        react_1.default.createElement(react_native_1.View, { style: styles.backdrop },
+            react_1.default.createElement(react_native_1.Text, { style: styles.title, accessibilityRole: "header" }, title),
+            react_1.default.createElement(react_native_1.View, { style: styles.imageWrapper },
+                react_1.default.createElement(react_native_1.Image, { source: { uri: panoramaUri }, style: [styles.image, { aspectRatio }], resizeMode: "contain", accessibilityIgnoresInvertColors: true })),
+            react_1.default.createElement(react_native_1.View, { style: styles.buttonRow },
+                react_1.default.createElement(react_native_1.Pressable, { onPress: onDiscard, style: [styles.button, styles.buttonGhost], accessibilityRole: "button", accessibilityLabel: "Discard panorama" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.buttonGhostText }, "\u2715  Discard")),
+                react_1.default.createElement(react_native_1.Pressable, { onPress: onRetry, style: [styles.button, styles.buttonNeutral], accessibilityRole: "button", accessibilityLabel: "Retry panorama" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.buttonNeutralText }, "\u21BA  Retry")),
+                react_1.default.createElement(react_native_1.Pressable, { onPress: onSave, style: [styles.button, styles.buttonPrimary], accessibilityRole: "button", accessibilityLabel: "Save panorama" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.buttonPrimaryText }, "\u2713  Save"))))));
+}
+const styles = react_native_1.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',
+    },
+});
+//# sourceMappingURL=PanoramaConfirmModal.js.map

package/dist/camera/PanoramaGuidance.d.ts

@@ -0,0 +1,79 @@
+/**
+ * PanoramaGuidance — gyroscope-driven pan-speed indicator for the
+ * tap-and-hold panorama flow.
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │            (camera preview)                              │
+ *   │                                                          │
+ *   │            ↓                                             │ ← portrait + landscape pan
+ *   │           green / yellow / red                           │
+ *   │                                                          │
+ *   │           "Pan slowly" / "Slow down" / "Too fast"        │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * Why this exists
+ *   The SCANS-mode stitcher needs ~30–50 % overlap between
+ *   consecutive frames.  At 30 fps, frames are ~33 ms apart, so
+ *   pan rates above roughly 30°/s (≈ 0.5 rad/s) produce frames
+ *   the stitcher can't align — and the user finds out only after
+ *   the post-release "Stitching failed" alert.  Real-time feedback
+ *   prevents that failure mode.
+ *
+ * What it does
+ *   - Subscribes to the device gyroscope (react-native-sensors)
+ *     ONLY while `active` is true; tears down on inactive so the
+ *     sensor isn't running the rest of the time the screen is up.
+ *   - Detects portrait vs landscape from window dimensions; the
+ *     dominant pan axis changes accordingly:
+ *       portrait  → user pans horizontally → we track gyro Y.
+ *       landscape → user pans vertically → we track gyro X.
+ *   - Maps the dominant axis's |rad/s| onto a colour scale and a
+ *     human-readable hint.  Defaults are tuned for SCANS but
+ *     overrideable.
+ *
+ * Performance
+ *   The gyroscope fires ~30 Hz.  We update an Animated.Value (which
+ *   updates the colour interpolation on the native driver) and only
+ *   call setState when the qualitative bucket (good/warn/bad)
+ *   changes — keeps re-render volume low.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type PanoramaSpeedBucket = 'good' | 'warn' | 'bad';
+type PanAxis = 'horizontal' | 'vertical';
+export interface PanoramaGuidanceProps {
+    /**
+     * Subscribe to the gyroscope only while this is true.  Typically
+     * driven by the host's `statusPhase === 'recording'`.
+     */
+    active: boolean;
+    /**
+     * Force the pan axis instead of auto-detecting from window
+     * orientation.  Useful for hosts that lock orientation but want
+     * the user to pan the orthogonal axis.
+     *
+     * Default: undefined → auto-detect ("horizontal" in portrait,
+     * "vertical" in landscape — matches the user's described
+     * "pan top-to-bottom in landscape, left-to-right in portrait").
+     */
+    axis?: PanAxis;
+    /**
+     * Rotation rates in rad/s defining the speed buckets.  Defaults
+     * tuned for cv::Stitcher::SCANS at 30 fps with iPhone FOV ≈ 70°:
+     *   |rate| ≤ goodMax → green ("good")
+     *   |rate| ≤ warnMax → amber ("slow down a bit")
+     *   else            → red   ("too fast")
+     */
+    goodMaxRadPerSec?: number;
+    warnMaxRadPerSec?: number;
+    /** Optional hint message overrides. */
+    messages?: {
+        good?: string;
+        warn?: string;
+        bad?: string;
+    };
+    style?: StyleProp<ViewStyle>;
+}
+export declare function PanoramaGuidance({ active, axis, goodMaxRadPerSec, warnMaxRadPerSec, messages, style, }: PanoramaGuidanceProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=PanoramaGuidance.d.ts.map