react-native-image-stitcher 0.1.0

package/dist/camera/CaptureStatusOverlay.js

@@ -0,0 +1,326 @@
+"use strict";
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * CaptureStatusOverlay — screen-level visual feedback for the
+ * panorama capture lifecycle.
+ *
+ * Lives in the SDK because the existing shutter-button colour change
+ * is hidden by the user's finger during a hold.  An overlay above
+ * the preview is the only reliable channel for "you ARE recording
+ * right now" feedback.
+ *
+ *   ┌──────────────────────────────────────────────────┐
+ *   │  ● REC  Hold steady, pan slowly…                 │ ← banner
+ *   ├──────────────────────────────────────────────────┤
+ *   │ ┌──────────────────────────────────────────────┐ │
+ *   │ │                                              │ │
+ *   │ │           ⬛  red glow border                 │ │
+ *   │ │           around the preview                 │ │
+ *   │ │                                              │ │
+ *   │ └──────────────────────────────────────────────┘ │
+ *   └──────────────────────────────────────────────────┘
+ *
+ * The component is intentionally pure-presentational: it takes a
+ * `phase` prop and renders the matching UI.  Recording vs stitching
+ * vs idle is the host's source of truth — typically derived from
+ * `useVideoCapture().state` and a local "isStitching" boolean.
+ *
+ * The overlay renders nothing in `idle` so the host can render it
+ * unconditionally without conditional layout shifts.
+ */
+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.CaptureStatusOverlay = CaptureStatusOverlay;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useDeviceOrientation_1 = require("./useDeviceOrientation");
+function CaptureStatusOverlay({ phase, recordingMessage = 'Hold steady — pan slowly', stitchingMessage = 'Stitching panorama…', countdownMs, recordingStartedAt, topInset = 0, style, }) {
+    // Countdown ticker — re-renders every 250 ms while recording so
+    // the "REC 4s left" text stays current without flooding render
+    // calls.  Disabled (no interval) when not in recording phase or
+    // when countdown isn't configured.
+    const [, setTick] = react_1.default.useState(0);
+    react_1.default.useEffect(() => {
+        if (phase !== 'recording' || !countdownMs || !recordingStartedAt)
+            return;
+        const id = setInterval(() => setTick((t) => t + 1), 250);
+        return () => clearInterval(id);
+    }, [phase, countdownMs, recordingStartedAt]);
+    // Pulse animation for the REC dot.  Driven by a single Animated
+    // value that loops 0→1→0.  Cheap (no listeners, runs on the
+    // native driver) and only spins up while recording.
+    const pulse = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        if (phase !== 'recording') {
+            pulse.setValue(0);
+            return;
+        }
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(pulse, {
+                toValue: 1,
+                duration: 600,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(pulse, {
+                toValue: 0,
+                duration: 600,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [phase, pulse]);
+    // Always call the hook — even when phase is 'idle' — so React's
+    // hook-order rule isn't violated.  The accelerometer subscription
+    // is cheap and stays alive for the screen's lifetime.
+    const deviceOrientation = (0, useDeviceOrientation_1.useDeviceOrientation)();
+    if (phase === 'idle')
+        return null;
+    // Interpolate pulse → opacity & scale so the dot breathes 0.6→1.0
+    // opacity and 1.0→1.3 scale.  Subtle; not distracting.
+    const dotOpacity = pulse.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.5, 1],
+    });
+    const dotScale = pulse.interpolate({
+        inputRange: [0, 1],
+        outputRange: [1, 1.3],
+    });
+    // The red border appears only during recording — once the user
+    // releases and we move to stitching the recording is over and a
+    // bright red border would be misleading.
+    const showBorder = phase === 'recording';
+    // Compute remaining seconds for the countdown.  Re-rendered
+    // every 250 ms by the tick interval above.  If countdownMs or
+    // recordingStartedAt are missing we just render the base
+    // message without a "Xs left" suffix.
+    let baseMessage = phase === 'recording' ? recordingMessage : stitchingMessage;
+    if (phase === 'recording'
+        && countdownMs
+        && recordingStartedAt) {
+        const elapsedMs = Date.now() - recordingStartedAt;
+        const remainingMs = Math.max(0, countdownMs - elapsedMs);
+        const remainingSec = Math.ceil(remainingMs / 1000);
+        baseMessage = `${recordingMessage} · ${remainingSec}s left`;
+    }
+    const message = baseMessage;
+    // Orientation-aware banner placement via DIRECT absolute positioning
+    // + percentage transforms.
+    //
+    // Why this instead of a rotated-wrapper approach: the previous
+    // wrapper approach (sized to user-view dims, positioned to align
+    // center, rotated) is geometrically correct on paper but rendered
+    // off-center on device (probably a RN flex+rotation interaction).
+    // Direct absolute positioning of the banner with translateX/Y('-50%')
+    // for self-centering is simpler, doesn't depend on useWindowDimensions,
+    // and uses only well-trodden RN style features.
+    //
+    // Border is rendered separately because it hugs the physical camera
+    // preview (in layout coords) — it must not rotate with the banner.
+    const bannerOrientationStyle = bannerStyleForOrientation(deviceOrientation, topInset);
+    return (react_1.default.createElement(react_native_1.View
+    // pointerEvents=box-none so the overlay never steals taps from
+    // the underlying camera / shutter / preview.  The banner and
+    // border are read-only.
+    , { 
+        // pointerEvents=box-none so the overlay never steals taps from
+        // the underlying camera / shutter / preview.  The banner and
+        // border are read-only.
+        pointerEvents: "box-none", style: [react_native_1.StyleSheet.absoluteFill, style], accessibilityLiveRegion: "polite" },
+        showBorder ? (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: styles.recordBorder })) : null,
+        react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: [
+                styles.banner,
+                phase === 'recording' ? styles.bannerRecording : styles.bannerStitching,
+                bannerOrientationStyle,
+            ] },
+            phase === 'recording' ? (react_1.default.createElement(react_native_1.Animated.View, { style: [
+                    styles.recDot,
+                    { opacity: dotOpacity, transform: [{ scale: dotScale }] },
+                ] })) : (react_1.default.createElement(react_native_1.View, { style: styles.stitchSpinner })),
+            react_1.default.createElement(react_native_1.Text, { style: styles.bannerText, numberOfLines: 1 },
+                phase === 'recording' ? 'REC' : '•••',
+                '  ',
+                message))));
+}
+/**
+ * Compute the style placing the banner at user-perceived top-center
+ * with text reading in the user's view direction.
+ *
+ * Approach: direct absolute positioning + percentage-translate self-
+ * centering (works on the banner's own measured dimensions, so the
+ * banner's text content can be any width).
+ *
+ * For each orientation, anchor the banner to the layout edge that
+ * corresponds to user-perceived top:
+ *
+ *   portrait              → layout-top    + horizontally centered + 0°
+ *   portrait-upside-down  → layout-bottom + horizontally centered + 180°
+ *   landscape-left        → layout-right  + vertically centered   + 90°
+ *   landscape-right       → layout-left   + vertically centered   + -90°
+ *
+ * In landscape, the banner is rotated around its center so its text
+ * (originally horizontal in layout) reads horizontally in the user's
+ * view.  The translateY('-50%') aligns the banner's center with the
+ * layout's vertical center, which maps to user-horizontal-center
+ * post-rotation.
+ *
+ * RN supports `'50%'` for absolute positions and percentage values in
+ * translateX/Y since 0.70 — the percentage in a translate is relative
+ * to the element's OWN dimensions, which is exactly what self-
+ * centering an unknown-width element needs.
+ */
+function bannerStyleForOrientation(orientation, topInset) {
+    switch (orientation) {
+        case 'landscape-left':
+            // 2026-05-18 round 2 — pre-rotation `right: 8` put the
+            // banner's right edge at layout right minus 8; after 90° CW
+            // rotation around banner CENTER, the banner's bbox center
+            // ended up at layout-x = W - 8 - banner_width/2.  The
+            // banner's user-top edge (post-rotation max layout-x) then
+            // landed at user_y = (banner_width - banner_height) / 2 + 8
+            // ≈ 130 px from user-top — way too far down, hence the
+            // "appearing in center vertically" complaint.
+            //
+            // Fix: shift banner's center to layout-x = W - 34 (= 8 +
+            // estimated banner_height/2 ≈ 26).  Achieved by anchoring
+            // at `right: 34` (banner right edge = W-34) and then
+            // `translateX('50%')` (shifts center right by banner_width/
+            // 2 = back to W-34).  Post-rotation max layout-x = W - 34 +
+            // banner_height/2 = W - 8 → user_y = 8 px from user-top.
+            // Works regardless of banner_width because the translateX
+            // percentage cancels the W_b/2 offset.
+            //
+            // Landscape user-top has no notch (the Dynamic Island sits
+            // on user-LEFT in landscape-left, user-RIGHT in landscape-
+            // right), so we don't add topInset here — 8 px is the tight
+            // visual minimum the user asked for.
+            return {
+                position: 'absolute',
+                right: 34,
+                top: '50%',
+                transform: [
+                    { translateY: '-50%' },
+                    { translateX: '50%' },
+                    { rotate: '90deg' },
+                ],
+            };
+        case 'landscape-right':
+            return {
+                position: 'absolute',
+                left: 34,
+                top: '50%',
+                transform: [
+                    { translateY: '-50%' },
+                    { translateX: '-50%' },
+                    { rotate: '-90deg' },
+                ],
+            };
+        case 'portrait-upside-down':
+            return {
+                position: 'absolute',
+                bottom: topInset + 8,
+                left: '50%',
+                transform: [
+                    { translateX: '-50%' },
+                    { rotate: '180deg' },
+                ],
+            };
+        case 'portrait':
+        default:
+            return {
+                position: 'absolute',
+                top: topInset + 8,
+                left: '50%',
+                transform: [
+                    { translateX: '-50%' },
+                ],
+            };
+    }
+}
+const styles = react_native_1.StyleSheet.create({
+    banner: {
+        // position: 'absolute' is added back so the orientation-specific
+        // style (returned by bannerStyleForOrientation) can position the
+        // banner at the layout edge for that orientation using top/right/
+        // bottom/left.  The transform array on the same style does the
+        // self-centering via translateX/Y('-50%') and applies rotation.
+        position: 'absolute',
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 14,
+        paddingVertical: 8,
+        borderRadius: 22,
+        minHeight: 36,
+    },
+    bannerRecording: {
+        backgroundColor: 'rgba(255,59,48,0.92)',
+    },
+    bannerStitching: {
+        // Neutral grey while we wait for the stitcher; communicates
+        // "still working" without the alarming red of active recording.
+        backgroundColor: 'rgba(0,0,0,0.78)',
+    },
+    bannerText: {
+        color: '#ffffff',
+        fontSize: 13,
+        fontWeight: '600',
+        marginLeft: 8,
+    },
+    recDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: '#ffffff',
+    },
+    stitchSpinner: {
+        // Static dot for now — RN's ActivityIndicator is fine here too,
+        // but a calm static dot keeps visual noise low when the user
+        // already gets the spinner via the shutter-button "processing"
+        // state below.
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: '#ffffff',
+        opacity: 0.7,
+    },
+    recordBorder: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        borderWidth: 4,
+        borderColor: 'rgba(255,59,48,0.9)',
+    },
+});
+//# sourceMappingURL=CaptureStatusOverlay.js.map

package/dist/camera/CaptureThumbnailStrip.d.ts

@@ -0,0 +1,87 @@
+/**
+ * CaptureThumbnailStrip — horizontal thumbnail strip with built-in
+ * tap-to-preview modal, designed for the audit capture surface.
+ *
+ *   ┌─────────────────────────────────────────────────────────┐
+ *   │  [thumb 4:3]  [thumb 9:16]  [thumb pano]  …             │
+ *   │  3 / 5 min · 10 max                                     │
+ *   └─────────────────────────────────────────────────────────┘
+ *
+ * Two reasons this lives in the SDK rather than the host:
+ *   1. The thumbnail UX is camera-shaped — tightly coupled to the
+ *      `CaptureResult` dimension fields the SDK introduced for
+ *      aspect-ratio rendering.  Any host that uses `useCapture`
+ *      benefits from the same display logic, so the SDK is the
+ *      right home.
+ *   2. The preview modal is a non-trivial chunk of UI (full-screen
+ *      Image with close affordance + safe-area handling).  Hosts
+ *      were inevitably going to re-implement it with subtly
+ *      different gesture handling; centralising avoids drift.
+ *
+ * The strip is intentionally headless about persistence: it knows
+ * nothing about WatermelonDB, the host's DB schema, or sync state.
+ * Callers pass an array of plain objects with `id`, `uri`, and
+ * optional `width`/`height` and the strip handles the rest.
+ *
+ * Aspect-ratio rendering:
+ *   - Thumbnails are anchored at a fixed height (default 60 px)
+ *     and width is computed from `width / height` * height.
+ *   - Width is clamped to [40, 180] so a tall portrait doesn't
+ *     squish to a sliver and a 5000 px panorama doesn't push
+ *     siblings off-screen.
+ *   - Items missing dimensions (legacy captures saved before the
+ *     SDK exposed them) fall back to square — matches prior
+ *     behaviour and avoids visual jumps when scrolling mixed
+ *     histories.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface CaptureThumbnailItem {
+    /** Stable id for FlatList keying. */
+    id: string;
+    /** `file://` or remote URI of the captured image. */
+    uri: string;
+    /** Image width in pixels.  Optional; falls back to square. */
+    width?: number;
+    /** Image height in pixels.  Optional; falls back to square. */
+    height?: number;
+}
+export interface CaptureThumbnailStripProps {
+    /** Captures to render, in the order they should appear. */
+    items: CaptureThumbnailItem[];
+    /**
+     * Optional minimum-photos hint for the count line.  When `count >=
+     * minPhotos` the count text uses the success colour, otherwise it
+     * uses the warning colour.  Pass undefined to suppress the hint.
+     */
+    minPhotos?: number;
+    /** Optional maximum-photos hint for the count line. */
+    maxPhotos?: number;
+    /** Strip background colour (defaults to translucent black). */
+    backgroundColor?: string;
+    /** Text colour applied to the count line and "No photos" placeholder. */
+    textColor?: string;
+    /** Colour used when count meets `minPhotos`. */
+    successColor?: string;
+    /** Colour used when count is below `minPhotos`. */
+    warningColor?: string;
+    /**
+     * Disable tap-to-preview.  When true, thumbnails are still rendered
+     * but tapping them is a no-op.  Default false (preview enabled).
+     */
+    disablePreview?: boolean;
+    /**
+     * Custom tap handler.  When provided, tapping a thumbnail calls
+     * this instead of opening the strip's built-in preview modal.
+     * Use this when the host wants to show its own preview UI (e.g.
+     * with delete / recapture buttons gated on capture sync state).
+     */
+    onItemPress?: (item: CaptureThumbnailItem) => void;
+    /**
+     * Optional outer style.  Layout-related props (height, padding)
+     * stay under the strip's control to keep the count line consistent.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+export declare function CaptureThumbnailStrip({ items, minPhotos, maxPhotos, backgroundColor, textColor, successColor, warningColor, disablePreview, onItemPress, style, }: CaptureThumbnailStripProps): React.JSX.Element;
+//# sourceMappingURL=CaptureThumbnailStrip.d.ts.map

package/dist/camera/CaptureThumbnailStrip.js

@@ -0,0 +1,177 @@
+"use strict";
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * CaptureThumbnailStrip — horizontal thumbnail strip with built-in
+ * tap-to-preview modal, designed for the audit capture surface.
+ *
+ *   ┌─────────────────────────────────────────────────────────┐
+ *   │  [thumb 4:3]  [thumb 9:16]  [thumb pano]  …             │
+ *   │  3 / 5 min · 10 max                                     │
+ *   └─────────────────────────────────────────────────────────┘
+ *
+ * Two reasons this lives in the SDK rather than the host:
+ *   1. The thumbnail UX is camera-shaped — tightly coupled to the
+ *      `CaptureResult` dimension fields the SDK introduced for
+ *      aspect-ratio rendering.  Any host that uses `useCapture`
+ *      benefits from the same display logic, so the SDK is the
+ *      right home.
+ *   2. The preview modal is a non-trivial chunk of UI (full-screen
+ *      Image with close affordance + safe-area handling).  Hosts
+ *      were inevitably going to re-implement it with subtly
+ *      different gesture handling; centralising avoids drift.
+ *
+ * The strip is intentionally headless about persistence: it knows
+ * nothing about WatermelonDB, the host's DB schema, or sync state.
+ * Callers pass an array of plain objects with `id`, `uri`, and
+ * optional `width`/`height` and the strip handles the rest.
+ *
+ * Aspect-ratio rendering:
+ *   - Thumbnails are anchored at a fixed height (default 60 px)
+ *     and width is computed from `width / height` * height.
+ *   - Width is clamped to [40, 180] so a tall portrait doesn't
+ *     squish to a sliver and a 5000 px panorama doesn't push
+ *     siblings off-screen.
+ *   - Items missing dimensions (legacy captures saved before the
+ *     SDK exposed them) fall back to square — matches prior
+ *     behaviour and avoids visual jumps when scrolling mixed
+ *     histories.
+ */
+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.CaptureThumbnailStrip = CaptureThumbnailStrip;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const CapturePreview_1 = require("./CapturePreview");
+/// Fixed thumbnail height — width varies with aspect ratio.
+const THUMB_HEIGHT = 60;
+/// Width clamps protect the strip from extreme aspect ratios (very
+/// tall portraits squishing to a sliver, very wide panoramas pushing
+/// siblings off-screen).
+const THUMB_MIN_WIDTH = 40;
+const THUMB_MAX_WIDTH = 180;
+function thumbWidth(item) {
+    const { width, height } = item;
+    if (!width || !height || width <= 0 || height <= 0) {
+        // Legacy capture without dimensions — fall back to square.
+        return THUMB_HEIGHT;
+    }
+    const ratio = width / height;
+    const computed = Math.round(THUMB_HEIGHT * ratio);
+    return Math.max(THUMB_MIN_WIDTH, Math.min(THUMB_MAX_WIDTH, computed));
+}
+function CaptureThumbnailStrip({ items, minPhotos, maxPhotos, backgroundColor = 'rgba(0,0,0,0.85)', textColor = '#ffffff', successColor = '#34C759', warningColor = '#FF9F0A', disablePreview = false, onItemPress, style, }) {
+    // Built-in preview state — only used when the host hasn't
+    // provided its own onItemPress handler.  Letting the host pass a
+    // handler is how the AuditCaptureScreen unifies thumbnail
+    // preview with post-stitch confirmation.
+    const [previewItem, setPreviewItem] = (0, react_1.useState)(null);
+    // Memoise so FlatList doesn't see a fresh callback identity every
+    // render and re-render every row.
+    const handleItemPress = (0, react_1.useCallback)((item) => {
+        if (disablePreview)
+            return;
+        if (onItemPress) {
+            onItemPress(item);
+            return;
+        }
+        setPreviewItem(item);
+    }, [disablePreview, onItemPress]);
+    const closePreview = (0, react_1.useCallback)(() => setPreviewItem(null), []);
+    const countLine = (0, react_1.useMemo)(() => {
+        if (minPhotos === undefined && maxPhotos === undefined)
+            return null;
+        const meetsMin = minPhotos === undefined ? true : items.length >= minPhotos;
+        const text = minPhotos !== undefined && maxPhotos !== undefined
+            ? `${items.length} / ${minPhotos} min · ${maxPhotos} max`
+            : minPhotos !== undefined
+                ? `${items.length} / ${minPhotos} min`
+                : `${items.length} / ${maxPhotos} max`;
+        return (react_1.default.createElement(react_native_1.Text, { style: [
+                styles.count,
+                { color: meetsMin ? successColor : warningColor },
+            ], accessibilityLabel: `Captured ${items.length} photos` }, text));
+    }, [items.length, minPhotos, maxPhotos, successColor, warningColor]);
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.root, { backgroundColor }, style] },
+        react_1.default.createElement(react_native_1.FlatList, { data: items, horizontal: true, showsHorizontalScrollIndicator: false, keyExtractor: (item) => item.id, contentContainerStyle: styles.listContent, ListEmptyComponent: react_1.default.createElement(react_native_1.View, { style: [styles.placeholder, { borderColor: textColor }], accessibilityLabel: "No photos captured" },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.placeholderText, { color: textColor }] }, "No photos")), renderItem: ({ item }) => (react_1.default.createElement(react_native_1.Pressable, { onPress: () => handleItemPress(item), disabled: disablePreview, accessibilityRole: "imagebutton", accessibilityLabel: "Open preview", 
+                // Resolve the width per-item — done at render rather than
+                // inside renderItem's style prop so the function isn't
+                // re-created on every parent render.
+                style: [
+                    styles.thumbWrapper,
+                    { width: thumbWidth(item), height: THUMB_HEIGHT },
+                ] },
+                react_1.default.createElement(react_native_1.Image, { source: { uri: item.uri }, style: styles.thumbImage, resizeMode: "cover" }))) }),
+        countLine,
+        react_1.default.createElement(CapturePreview_1.CapturePreview, { visible: previewItem !== null, imageUri: previewItem?.uri ?? '', imageWidth: previewItem?.width, imageHeight: previewItem?.height, onClose: closePreview })));
+}
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        paddingVertical: 8,
+    },
+    listContent: {
+        paddingHorizontal: 12,
+        alignItems: 'center',
+    },
+    thumbWrapper: {
+        marginRight: 8,
+        borderRadius: 4,
+        overflow: 'hidden',
+        backgroundColor: '#222',
+    },
+    thumbImage: {
+        width: '100%',
+        height: '100%',
+    },
+    placeholder: {
+        height: THUMB_HEIGHT,
+        paddingHorizontal: 16,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderStyle: 'dashed',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    placeholderText: {
+        fontSize: 12,
+        opacity: 0.6,
+    },
+    count: {
+        fontSize: 12,
+        paddingHorizontal: 16,
+        paddingTop: 4,
+    },
+});
+//# sourceMappingURL=CaptureThumbnailStrip.js.map

package/dist/camera/IncrementalPanGuide.d.ts

@@ -0,0 +1,83 @@
+/**
+ * IncrementalPanGuide — V12.11 Step 2 (item 2 of the four-step
+ * preview-UX overhaul).
+ *
+ * Apple-pano-style "keep the arrow on the line" pan guide for the
+ * incremental capture flow.
+ *
+ *                  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+ *                                  ▲
+ *                                  ●     ← marker drifts perpendicular
+ *                  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  ← guide line
+ *                                                                (along pan axis)
+ *                  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+ *
+ * The user is told (via the band overlay's caption) to pan along
+ * one axis.  This guide gives them live feedback on how WELL they
+ * are obeying that instruction:
+ *
+ *   • A solid GUIDE LINE runs along the intended pan axis (the
+ *     "ideal" pan path) across the centre of the screen.
+ *   • A circular MARKER sits on the line.  As the user tilts the
+ *     device perpendicular to the pan axis, the marker drifts
+ *     OFF the line by an amount proportional to the integrated
+ *     perpendicular rotation since capture started.
+ *   • The marker's COLOUR signals how far off they've drifted —
+ *     green (on track), amber (slight drift), red (significant
+ *     drift).  Same colour scale as PanoramaGuidance for
+ *     consistency.
+ *
+ * Why integrate perpendicular rotation rather than absolute device
+ * angle?  We don't care about the user's starting orientation (they
+ * may begin a horizontal pan with the phone tilted slightly down
+ * — that's fine).  We care about CHANGE during the pan.  So we
+ * reset the integral to 0 at `active=true` and accumulate the
+ * perpendicular gyro rate from there.  Drift over a typical 5–10 s
+ * capture is well within tolerance (a few degrees max).
+ *
+ * Why not consume ARKit pose?  Two reasons:
+ *   1. The vision-camera (non-AR) capture path doesn't have ARKit
+ *      pose at all — gyro is the only common signal.
+ *   2. We want this guide to work the SAME way regardless of
+ *      whether AR mode is on or off — gyro keeps the UX
+ *      consistent.
+ *
+ * Performance: gyro at 30 Hz, integration is two multiplies per
+ * sample, marker position update via setState.  Negligible.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface IncrementalPanGuideProps {
+    /**
+     * Subscribe to the gyroscope only while this is true.  Typically
+     * driven by the host's `statusPhase === 'recording' &&
+     * useIncrementalPath`.  When this flips false the integral
+     * resets so the next capture starts from a known zero.
+     */
+    active: boolean;
+    /**
+     * Pixels per radian of perpendicular drift.  Higher = more
+     * sensitive (small drifts move the marker more visibly).
+     * Default 600 px/rad gives ~10 px of marker travel for ~1° of
+     * tilt — visible without feeling twitchy.
+     */
+    pixelsPerRad?: number;
+    /**
+     * Maximum marker travel from the line, in pixels.  Beyond this
+     * the marker pins to the edge of its track.  Default 80 px.
+     */
+    maxTravelPx?: number;
+    /**
+     * Drift thresholds for the colour scale, in radians.  Tuned so
+     * "green" covers ±1° (no human-perceptible misalignment),
+     * "amber" up to ±3°, "red" beyond.  Same defaults as
+     * PanoramaGuidance's pan-speed pill for visual consistency.
+     */
+    warnRad?: number;
+    badRad?: number;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function IncrementalPanGuide({ active, pixelsPerRad, maxTravelPx, warnRad, // ≈ 2.9°
+badRad, // ≈ 5.7°
+style, }: IncrementalPanGuideProps): React.JSX.Element | null;
+//# sourceMappingURL=IncrementalPanGuide.d.ts.map