react-native-image-stitcher 0.15.2 → 0.16.0

package/dist/camera/CaptureStatusOverlay.d.ts

@@ -32,9 +32,9 @@ export type CaptureStatusPhase = 'idle' | 'recording' | 'stitching';
 export interface CaptureStatusOverlayProps {
     /**
      * Current phase.  `idle` renders nothing.  `recording` shows the
-     * REC banner + red glowing border.  `stitching` swaps to a neutral
-     * "Stitching..." banner with no border (recording is over; UI
-     * cue should de-escalate).
+     * REC banner + glowing border (GREEN normally, RED when `tooFast`).
+     * `stitching` swaps to a neutral "Stitching..." banner with no border
+     * (recording is over; UI cue should de-escalate).
      */
     phase: CaptureStatusPhase;
     /**
@@ -44,6 +44,13 @@ export interface CaptureStatusOverlayProps {
      * type.
      */
     recordingMessage?: string;
+    /**
+     * v0.16 — speed feedback.  When `false` (default) the recording banner +
+     * border are GREEN ("your pace is fine"); when `true` they turn RED to
+     * signal the pan is too fast.  This consolidates the old always-red border
+     * + separate amber "slow down" pill into one calm-by-default cue.
+     */
+    tooFast?: boolean;
     /**
      * Optional override for the stitching-phase message.  Defaults to
      * "Stitching panorama…".
@@ -71,5 +78,5 @@ export interface CaptureStatusOverlayProps {
     /** Outer style passthrough. */
     style?: StyleProp<ViewStyle>;
 }
-export declare function CaptureStatusOverlay({ phase, recordingMessage, stitchingMessage, countdownMs, recordingStartedAt, topInset, style, }: CaptureStatusOverlayProps): React.JSX.Element | null;
+export declare function CaptureStatusOverlay({ phase, recordingMessage, tooFast, stitchingMessage, countdownMs, recordingStartedAt, topInset, style, }: CaptureStatusOverlayProps): React.JSX.Element | null;
 //# sourceMappingURL=CaptureStatusOverlay.d.ts.map

package/dist/camera/CaptureStatusOverlay.js

@@ -66,7 +66,7 @@ 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, }) {
+function CaptureStatusOverlay({ phase, recordingMessage = 'Hold steady — pan slowly', tooFast = false, 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
@@ -161,10 +161,15 @@ function CaptureStatusOverlay({ phase, recordingMessage = 'Hold steady — pan s
         // 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,
+        showBorder ? (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: [
+                styles.recordBorder,
+                tooFast ? styles.recordBorderTooFast : styles.recordBorderOk,
+            ] })) : null,
         react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: [
                 styles.banner,
-                phase === 'recording' ? styles.bannerRecording : styles.bannerStitching,
+                phase === 'recording'
+                    ? (tooFast ? styles.bannerTooFast : styles.bannerRecording)
+                    : styles.bannerStitching,
                 bannerOrientationStyle,
             ] },
             phase === 'recording' ? (react_1.default.createElement(react_native_1.Animated.View, { style: [
@@ -287,7 +292,12 @@ const styles = react_native_1.StyleSheet.create({
         minHeight: 36,
     },
     bannerRecording: {
-        backgroundColor: 'rgba(255,59,48,0.92)',
+        // Green by default — "you're recording and your pace is fine".
+        backgroundColor: 'rgba(52,199,89,0.92)',
+    },
+    bannerTooFast: {
+        // Red only when the pan is too fast (consolidates the old amber pill).
+        backgroundColor: 'rgba(255,59,48,0.94)',
     },
     bannerStitching: {
         // Neutral grey while we wait for the stitcher; communicates
@@ -320,7 +330,14 @@ const styles = react_native_1.StyleSheet.create({
     recordBorder: {
         ...react_native_1.StyleSheet.absoluteFillObject,
         borderWidth: 4,
-        borderColor: 'rgba(255,59,48,0.9)',
+    },
+    recordBorderOk: {
+        // Green by default (calm — the pan pace is fine).
+        borderColor: 'rgba(52,199,89,0.9)',
+    },
+    recordBorderTooFast: {
+        // Red only when too fast.
+        borderColor: 'rgba(255,59,48,0.95)',
     },
 });
 //# sourceMappingURL=CaptureStatusOverlay.js.map

package/dist/camera/CaptureThumbnailStrip.js

@@ -74,6 +74,7 @@ exports.CaptureThumbnailStrip = CaptureThumbnailStrip;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const CapturePreview_1 = require("./CapturePreview");
+const displayDecodeImageProps_1 = require("./displayDecodeImageProps");
 /// Fixed thumbnail height — width varies with aspect ratio.
 const THUMB_HEIGHT = 60;
 /// Width clamps protect the strip from extreme aspect ratios (very
@@ -136,7 +137,7 @@ function CaptureThumbnailStrip({ items, minPhotos, maxPhotos, backgroundColor =
                     vertical ? styles.thumbWrapperVertical : styles.thumbWrapperHorizontal,
                     { width: thumbWidth(item), height: THUMB_HEIGHT },
                 ] },
-                react_1.default.createElement(react_native_1.Image, { source: { uri: item.uri }, style: [styles.thumbImage, contentRotation], resizeMode: "cover" }))) }),
+                react_1.default.createElement(react_native_1.Image, { source: { uri: item.uri }, style: [styles.thumbImage, contentRotation], resizeMode: "cover", ...displayDecodeImageProps_1.DISPLAY_DECODE_IMAGE_PROPS }))) }),
         countLine,
         react_1.default.createElement(CapturePreview_1.CapturePreview, { visible: previewItem !== null, imageUri: previewItem?.uri ?? '', imageWidth: previewItem?.width, imageHeight: previewItem?.height, onClose: closePreview })));
 }

package/dist/camera/LateralMotionModal.d.ts

@@ -0,0 +1,85 @@
+/**
+ * LateralMotionModal — informational popup shown when the SDK stops an
+ * in-progress capture because the user panned sideways (cross-axis /
+ * lateral drift) instead of holding the single sweep direction
+ * (Mode A: top→bottom; Mode B: left→right).
+ *
+ * ## When this modal appears
+ *
+ * This is the item-6 sibling of `OrientationDriftModal` — the "you
+ * moved sideways" variant.  By the time the modal renders, the capture
+ * has ALREADY been finalized by the parent `<Camera>` (the lateral-stop
+ * effect calls the engine's `stop()` and keeps whatever was captured up
+ * to that point — there is no malformed-output risk, so the copy says
+ * "we stitched what you captured").  The modal exists solely to explain
+ * to the user what happened and how to avoid it next time; the single
+ * dismiss button just clears the latched lateral-stop state so the next
+ * capture can start fresh.
+ *
+ * ## Layer-2 host usage
+ *
+ * Hosts using `CameraView` directly (rather than the flagship
+ * `<Camera>`) can compose this modal with their own lateral-drift
+ * detector for the same finalize-and-explain UX:
+ *
+ *   const lateral = useLateralDrift(captureActive);
+ *   useEffect(() => {
+ *     if (lateral.stopped) {
+ *       // host finalizes capture (engine stop + keep captured output)
+ *       finalizeCapture();
+ *     }
+ *   }, [lateral.stopped]);
+ *
+ *   return <>
+ *     <CameraView ... />
+ *     <LateralMotionModal
+ *       visible={lateral.stopped}
+ *       onDismiss={dismissLateralModal}
+ *     />
+ *   </>;
+ *
+ * ## Copy
+ *
+ * `title` / `body` / `dismissLabel` default to the centralised
+ * `DEFAULT_GUIDANCE_COPY.lateralStop*` strings so hosts can localise or
+ * re-word every guidance message in one place via the `guidanceCopy`
+ * `<Camera>` prop; pass explicit props to override per-instance.
+ *
+ * ## Accessibility
+ *
+ * Modal `role` defaults to RN's native dialog handling.  The dismiss
+ * button carries an `accessibilityRole='button'` + label.  Body text
+ * uses `accessibilityRole='text'` so the guidance is read by VoiceOver
+ * / TalkBack.
+ */
+import React from 'react';
+export interface LateralMotionModalProps {
+    /**
+     * Show / hide.  In the `<Camera>` integration this is driven by the
+     * latched lateral-stop flag (capture already finalized when true).
+     */
+    visible: boolean;
+    /**
+     * Popup title.  Defaults to
+     * `DEFAULT_GUIDANCE_COPY.lateralStopTitle`.
+     */
+    title?: string;
+    /**
+     * Popup body / guidance copy.  Defaults to
+     * `DEFAULT_GUIDANCE_COPY.lateralStopBody`.
+     */
+    body?: string;
+    /**
+     * Dismiss button label.  Defaults to
+     * `DEFAULT_GUIDANCE_COPY.lateralStopDismiss`.
+     */
+    dismissLabel?: string;
+    /**
+     * Tapped when the user dismisses.  By the time the modal renders the
+     * capture is already finalized; this callback exists only to clear
+     * the latched lateral-stop state so the next capture can start fresh.
+     */
+    onDismiss: () => void;
+}
+export declare function LateralMotionModal(props: LateralMotionModalProps): React.JSX.Element;
+//# sourceMappingURL=LateralMotionModal.d.ts.map

package/dist/camera/LateralMotionModal.js

@@ -0,0 +1,134 @@
+"use strict";
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * LateralMotionModal — informational popup shown when the SDK stops an
+ * in-progress capture because the user panned sideways (cross-axis /
+ * lateral drift) instead of holding the single sweep direction
+ * (Mode A: top→bottom; Mode B: left→right).
+ *
+ * ## When this modal appears
+ *
+ * This is the item-6 sibling of `OrientationDriftModal` — the "you
+ * moved sideways" variant.  By the time the modal renders, the capture
+ * has ALREADY been finalized by the parent `<Camera>` (the lateral-stop
+ * effect calls the engine's `stop()` and keeps whatever was captured up
+ * to that point — there is no malformed-output risk, so the copy says
+ * "we stitched what you captured").  The modal exists solely to explain
+ * to the user what happened and how to avoid it next time; the single
+ * dismiss button just clears the latched lateral-stop state so the next
+ * capture can start fresh.
+ *
+ * ## Layer-2 host usage
+ *
+ * Hosts using `CameraView` directly (rather than the flagship
+ * `<Camera>`) can compose this modal with their own lateral-drift
+ * detector for the same finalize-and-explain UX:
+ *
+ *   const lateral = useLateralDrift(captureActive);
+ *   useEffect(() => {
+ *     if (lateral.stopped) {
+ *       // host finalizes capture (engine stop + keep captured output)
+ *       finalizeCapture();
+ *     }
+ *   }, [lateral.stopped]);
+ *
+ *   return <>
+ *     <CameraView ... />
+ *     <LateralMotionModal
+ *       visible={lateral.stopped}
+ *       onDismiss={dismissLateralModal}
+ *     />
+ *   </>;
+ *
+ * ## Copy
+ *
+ * `title` / `body` / `dismissLabel` default to the centralised
+ * `DEFAULT_GUIDANCE_COPY.lateralStop*` strings so hosts can localise or
+ * re-word every guidance message in one place via the `guidanceCopy`
+ * `<Camera>` prop; pass explicit props to override per-instance.
+ *
+ * ## Accessibility
+ *
+ * Modal `role` defaults to RN's native dialog handling.  The dismiss
+ * button carries an `accessibilityRole='button'` + label.  Body text
+ * uses `accessibilityRole='text'` so the guidance is read by VoiceOver
+ * / TalkBack.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LateralMotionModal = LateralMotionModal;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const cameraGuidanceCopy_1 = require("./cameraGuidanceCopy");
+function LateralMotionModal(props) {
+    const { visible, title = cameraGuidanceCopy_1.DEFAULT_GUIDANCE_COPY.lateralStopTitle, body = cameraGuidanceCopy_1.DEFAULT_GUIDANCE_COPY.lateralStopBody, dismissLabel = cameraGuidanceCopy_1.DEFAULT_GUIDANCE_COPY.lateralStopDismiss, onDismiss, } = props;
+    return (react_1.default.createElement(react_native_1.Modal, { visible: visible, transparent: true, animationType: "fade", onRequestClose: onDismiss, accessibilityLabel: "Capture finalized \u2014 moved sideways", 
+        // v0.12.0 — see OrientationDriftModal / PanoramaSettingsModal for
+        // the same prop's rationale.  Declaring all orientations prevents
+        // iOS from force-rotating the window to portrait when this modal
+        // opens mid-rotation, which would otherwise leave the underlying
+        // <Camera>'s ARSession in a stale-orientation state on dismiss.
+        supportedOrientations: [
+            'portrait',
+            'portrait-upside-down',
+            'landscape-left',
+            'landscape-right',
+        ] },
+        react_1.default.createElement(react_native_1.View, { style: styles.backdrop },
+            react_1.default.createElement(react_native_1.View, { style: styles.card },
+                react_1.default.createElement(react_native_1.Text, { style: styles.title, accessibilityRole: "header" }, title),
+                react_1.default.createElement(react_native_1.Text, { style: styles.body, accessibilityRole: "text" }, body),
+                react_1.default.createElement(react_native_1.Pressable, { style: ({ pressed }) => [
+                        styles.button,
+                        pressed && styles.buttonPressed,
+                    ], onPress: onDismiss, accessibilityRole: "button", accessibilityLabel: dismissLabel },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.buttonLabel }, dismissLabel))))));
+}
+const styles = react_native_1.StyleSheet.create({
+    backdrop: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.6)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 32,
+    },
+    card: {
+        backgroundColor: '#1c1c1e',
+        borderRadius: 14,
+        paddingHorizontal: 20,
+        paddingVertical: 24,
+        width: '100%',
+        maxWidth: 340,
+    },
+    title: {
+        color: '#fff',
+        fontSize: 18,
+        fontWeight: '600',
+        marginBottom: 12,
+        textAlign: 'center',
+    },
+    body: {
+        color: '#e5e5ea',
+        fontSize: 15,
+        lineHeight: 21,
+        textAlign: 'center',
+        marginBottom: 20,
+    },
+    button: {
+        backgroundColor: '#0a84ff',
+        borderRadius: 10,
+        paddingVertical: 12,
+        alignItems: 'center',
+    },
+    buttonPressed: {
+        backgroundColor: '#0860c0',
+    },
+    buttonLabel: {
+        color: '#fff',
+        fontSize: 17,
+        fontWeight: '600',
+    },
+});
+//# sourceMappingURL=LateralMotionModal.js.map

package/dist/camera/PanHowToOverlay.d.ts

@@ -0,0 +1,76 @@
+/**
+ * PanHowToOverlay — the "how to pan" coach-mark (guidance item 3).
+ *
+ * Shown briefly at the START of a capture to teach the panning
+ * gesture before the live pan-speed pill (`PanoramaGuidance`) takes
+ * over.  It pairs the code-drawn `PanPhoneGraphic` (white phone +
+ * sweeping amber band) with a code-built bouncing arrow so the
+ * direction reads instantly without any copy.
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │                                                          │
+ *   │                  ┌───────────────┐                       │
+ *   │                  │  PanPhone     │   (240px graphic, the │
+ *   │                  │  Graphic      │    white phone +      │
+ *   │                  └───────────────┘    amber sweep)       │
+ *   │                         ▼  ← amber triangle              │
+ *   │                         ▼     bouncing ~12px along the   │
+ *   │                              pan axis, back and forth    │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * Direction follows the capture mode (derived from the physical
+ * device orientation, sensor-based — works under portrait-lock):
+ *
+ *   Mode A — LANDSCAPE  → pan TOP → BOTTOM → arrow points DOWN.
+ *   Mode B — PORTRAIT   → pan LEFT → RIGHT → arrow points RIGHT.
+ *
+ * Both `landscape-left` and `landscape-right` are valid Mode A.
+ *
+ * ## Visibility & timing
+ *
+ * This component is intentionally pure-presentational: the PARENT
+ * owns `visible` and the brief auto-fade lifecycle (mount → show →
+ * dismiss once recording is under way).  We never self-time;
+ * `visible === false` renders `null` so the host can mount us
+ * unconditionally without layout shift.
+ *
+ * ## Upright under portrait-lock
+ *
+ * The app layout is typically portrait-locked, so when the user
+ * holds the device in landscape (Mode A) the JS framebuffer is NOT
+ * rotated.  We counter-rotate the whole coach-mark with
+ * `useContentRotation()` (same hook the bottom controls use) so the
+ * graphic and arrow read upright relative to gravity.  The arrow's
+ * bounce axis and triangle point are expressed in that upright frame
+ * — i.e. the user's view — so "down" / "right" mean what the user
+ * sees, not the layout's raw axes.
+ *
+ * ## No SVG / no extra deps
+ *
+ * The arrow is a pure CSS border-width triangle (a zero-size View
+ * whose thick coloured border on one edge + transparent borders on
+ * the adjacent edges read as a filled triangle).  Bounce is a single
+ * `Animated.loop` on the native driver — cheap, and only running
+ * while `visible`.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type DeviceOrientation } from './useDeviceOrientation';
+export interface PanHowToOverlayProps {
+    /**
+     * Show / hide.  `false` renders `null`.  The host owns the brief
+     * auto-fade lifecycle — this component never self-times.
+     */
+    visible: boolean;
+    /**
+     * Physical device orientation (sensor-based, from
+     * `useDeviceOrientation`).  Selects the pan mode → arrow
+     * direction: landscape-* → DOWN (Mode A), portrait-* → RIGHT
+     * (Mode B).
+     */
+    orientation: DeviceOrientation;
+    /** Outer style passthrough (positioning / opacity from the host). */
+    style?: StyleProp<ViewStyle>;
+}
+export declare function PanHowToOverlay({ visible, orientation, style, }: PanHowToOverlayProps): React.JSX.Element | null;
+//# sourceMappingURL=PanHowToOverlay.d.ts.map

package/dist/camera/PanHowToOverlay.js

@@ -0,0 +1,222 @@
+"use strict";
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * PanHowToOverlay — the "how to pan" coach-mark (guidance item 3).
+ *
+ * Shown briefly at the START of a capture to teach the panning
+ * gesture before the live pan-speed pill (`PanoramaGuidance`) takes
+ * over.  It pairs the code-drawn `PanPhoneGraphic` (white phone +
+ * sweeping amber band) with a code-built bouncing arrow so the
+ * direction reads instantly without any copy.
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │                                                          │
+ *   │                  ┌───────────────┐                       │
+ *   │                  │  PanPhone     │   (240px graphic, the │
+ *   │                  │  Graphic      │    white phone +      │
+ *   │                  └───────────────┘    amber sweep)       │
+ *   │                         ▼  ← amber triangle              │
+ *   │                         ▼     bouncing ~12px along the   │
+ *   │                              pan axis, back and forth    │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * Direction follows the capture mode (derived from the physical
+ * device orientation, sensor-based — works under portrait-lock):
+ *
+ *   Mode A — LANDSCAPE  → pan TOP → BOTTOM → arrow points DOWN.
+ *   Mode B — PORTRAIT   → pan LEFT → RIGHT → arrow points RIGHT.
+ *
+ * Both `landscape-left` and `landscape-right` are valid Mode A.
+ *
+ * ## Visibility & timing
+ *
+ * This component is intentionally pure-presentational: the PARENT
+ * owns `visible` and the brief auto-fade lifecycle (mount → show →
+ * dismiss once recording is under way).  We never self-time;
+ * `visible === false` renders `null` so the host can mount us
+ * unconditionally without layout shift.
+ *
+ * ## Upright under portrait-lock
+ *
+ * The app layout is typically portrait-locked, so when the user
+ * holds the device in landscape (Mode A) the JS framebuffer is NOT
+ * rotated.  We counter-rotate the whole coach-mark with
+ * `useContentRotation()` (same hook the bottom controls use) so the
+ * graphic and arrow read upright relative to gravity.  The arrow's
+ * bounce axis and triangle point are expressed in that upright frame
+ * — i.e. the user's view — so "down" / "right" mean what the user
+ * sees, not the layout's raw axes.
+ *
+ * ## No SVG / no extra deps
+ *
+ * The arrow is a pure CSS border-width triangle (a zero-size View
+ * whose thick coloured border on one edge + transparent borders on
+ * the adjacent edges read as a filled triangle).  Bounce is a single
+ * `Animated.loop` on the native driver — cheap, and only running
+ * while `visible`.
+ */
+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.PanHowToOverlay = PanHowToOverlay;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const guidanceGraphics_1 = require("./guidanceGraphics");
+const guidanceTokens_1 = require("./guidanceTokens");
+const useContentRotation_1 = require("./useContentRotation");
+/** Distance (px) the arrow travels along the pan axis each bounce. */
+const BOUNCE_DISTANCE = 12;
+/** Half-period of the bounce (out, then back) — ~700 ms each leg. */
+const BOUNCE_DURATION_MS = 700;
+/** Visual size of the CSS-triangle arrow (base width / height in px). */
+const ARROW_SIZE = 18;
+/**
+ * Map a physical orientation to the pan direction the user should
+ * sweep.  Mode A (either landscape) pans top→bottom (DOWN); Mode B
+ * (either portrait variant) pans left→right (RIGHT).  Directions are
+ * in the user's upright view — the content wrapper is counter-rotated
+ * so these read correctly under portrait-lock.
+ */
+function directionForOrientation(orientation) {
+    switch (orientation) {
+        case 'landscape-left':
+        case 'landscape-right':
+            return 'down';
+        case 'portrait':
+        case 'portrait-upside-down':
+        default:
+            return 'right';
+    }
+}
+function PanHowToOverlay({ visible, orientation, style, }) {
+    // Counter-rotation so the GIF + arrow read upright relative to
+    // gravity even when the app is portrait-locked and the device is
+    // held in landscape (Mode A).  Always called so hook order is
+    // stable across the `visible` toggle.
+    const contentRotation = (0, useContentRotation_1.useContentRotation)();
+    // Single Animated value driving the bounce, 0 → 1 → 0.  Native
+    // driver (transform-only), so the loop runs off the JS thread.
+    const bounce = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const direction = directionForOrientation(orientation);
+    (0, react_1.useEffect)(() => {
+        if (!visible) {
+            bounce.setValue(0);
+            return;
+        }
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(bounce, {
+                toValue: 1,
+                duration: BOUNCE_DURATION_MS,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(bounce, {
+                toValue: 0,
+                duration: BOUNCE_DURATION_MS,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [visible, bounce]);
+    // Translate 0→BOUNCE_DISTANCE along the pan axis.  In the upright
+    // (counter-rotated) frame, "down" moves +Y and "right" moves +X.
+    const travel = bounce.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, BOUNCE_DISTANCE],
+    });
+    const arrowTransform = (0, react_1.useMemo)(() => direction === 'down'
+        ? [{ translateY: travel }]
+        : [{ translateX: travel }], [direction, travel]);
+    if (!visible)
+        return null;
+    return (react_1.default.createElement(react_native_1.View
+    // box-none on the root: never intercept taps anywhere on the
+    // full-screen layer.  The inner content is also non-interactive.
+    , { 
+        // box-none on the root: never intercept taps anywhere on the
+        // full-screen layer.  The inner content is also non-interactive.
+        pointerEvents: "none", style: [styles.root, style] },
+        react_1.default.createElement(react_native_1.View, { style: [styles.content, contentRotation] },
+            react_1.default.createElement(guidanceGraphics_1.PanPhoneGraphic, { direction: direction, playing: visible }),
+            react_1.default.createElement(react_native_1.Animated.View, { style: [
+                    styles.arrow,
+                    direction === 'down' ? styles.arrowDown : styles.arrowRight,
+                    { transform: arrowTransform },
+                ] }))));
+}
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    content: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    // CSS-triangle base: a zero-size box whose borders are coloured on
+    // one edge and transparent on the two adjacent edges, producing a
+    // filled triangle pointing away from the coloured edge.  The
+    // direction-specific styles below set which edge is amber.
+    arrow: {
+        width: 0,
+        height: 0,
+        backgroundColor: 'transparent',
+        borderStyle: 'solid',
+        marginTop: 8,
+    },
+    // Triangle pointing DOWN (Mode A): left + right borders transparent,
+    // TOP border amber → apex at the bottom.
+    arrowDown: {
+        borderLeftWidth: ARROW_SIZE / 2,
+        borderRightWidth: ARROW_SIZE / 2,
+        borderTopWidth: ARROW_SIZE,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderTopColor: guidanceTokens_1.GUIDANCE_TOKENS.amber,
+    },
+    // Triangle pointing RIGHT (Mode B): top + bottom borders
+    // transparent, LEFT border amber → apex on the right.
+    arrowRight: {
+        borderTopWidth: ARROW_SIZE / 2,
+        borderBottomWidth: ARROW_SIZE / 2,
+        borderLeftWidth: ARROW_SIZE,
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderLeftColor: guidanceTokens_1.GUIDANCE_TOKENS.amber,
+    },
+});
+//# sourceMappingURL=PanHowToOverlay.js.map

package/dist/camera/PanoramaSettings.d.ts

@@ -168,11 +168,11 @@ export interface FrameSelectionSettings {
     maxKeyframes: number;
     /**
      * Required NEW-content fraction (0..1) for a candidate frame to
-     * be accepted.  Default 0.20 = 20% novel content per accept.
-     * Lower = more frames accepted, larger panoramas.  Higher = fewer
-     * frames, faster captures but more conservative about coverage.
-     * Clamped to `[0.10, 0.80]` natively
-     * (`IncrementalStitcher.swift:962`).
+     * be accepted.  Default 0.15 = 15% novel content per accept (v0.16;
+     * was 0.20).  Lower = more frames accepted, denser overlap, more
+     * robust registration.  Higher = fewer frames, faster captures but
+     * more conservative about coverage.  Clamped to `[0.10, 0.80]`
+     * natively (`IncrementalStitcher.swift:962`) — 0.10 is the floor.
      */
     overlapThreshold: number;
     /**
@@ -182,7 +182,9 @@ export interface FrameSelectionSettings {
      * overlap threshold wasn't met — so a slow or static pan never goes
      * longer than this without a keyframe.  Counts toward `maxKeyframes`
      * (the cap still finalises the capture).  `0` disables it.  Default
-     * `2000` (2 s).  Maps to the native gate's `setMaxKeyframeIntervalMs`.
+     * `1500` (1.5 s) — with `maxKeyframes` 8 this bounds a static/slow
+     * capture to ~8×1.5 ≈ 12 s before the keyframe-count auto-finalize.
+     * Maps to the native gate's `setMaxKeyframeIntervalMs`.
      */
     maxKeyframeIntervalMs: number;
     /**