react-native-image-stitcher 0.15.2 → 0.16.1

package/dist/camera/CaptureMemoryPill.js

@@ -4,15 +4,23 @@
  * CaptureMemoryPill — top-right diagnostic pill showing native
  * process memory footprint in MB, polled at 500 ms.
  *
- * Color-coded against the iPhone 16 Pro per-process jetsam limit:
+ * Color-coded against the device's per-process memory budget, which is read
+ * once at mount via `getDeviceTotalRamMB()` (RAM-aware):
  *
- *   - green  <1500 MB   (comfortable)
- *   - amber  1500–2200  (approaching pressure)
- *   - red    >2200      (close to limit — capture may be killed)
+ *   budget = max(RAM × 0.42, 900 MB)   (mirrors warp_guard.hpp
+ *                                        perProcessMemoryBudgetMB)
+ *   - green  < 55 % of budget   (comfortable)
+ *   - amber  55–70 % of budget   (approaching pressure)
+ *   - red    > 70 % of budget    (close to limit — capture may be killed)
  *
- * Backed by the existing `getMemoryFootprintMB()` native module
- * (iOS: `task_info phys_footprint`, Android: `Debug.MemoryInfo
- * getTotalPss * 1024`).  Returns -1 if the native call fails.
+ * Why RAM-aware: the old fixed 1500/2200 MB thresholds were tuned for the
+ * iPhone 16 Pro and NEVER tripped on a 4 GB Android phone that jetsams ~1.3 GB
+ * (false comfort exactly where OOM happens).  Falls back to 1500/2200 if the
+ * RAM read is unavailable.
+ *
+ * Backed by the `getMemoryFootprintMB()` native module (iOS: `task_info`
+ * `phys_footprint`; Android: `/proc/self/statm` RSS — the SAME number the C++
+ * `[memstat]` logs report).  Returns -1 if the native call fails.
  *
  * Mount this pill inside a `settings.debug`-gated branch — it
  * polls native every 500 ms and is unwanted in production builds.
@@ -55,13 +63,24 @@ exports.CaptureMemoryPill = CaptureMemoryPill;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const incremental_1 = require("../stitching/incremental");
-function CaptureMemoryPill({ topInset = 0, pollIntervalMs = 500, }) {
+function CaptureMemoryPill({ topInset = 0, pollIntervalMs = 500, style, }) {
     const [memMB, setMemMB] = (0, react_1.useState)(null);
+    // Device total RAM (MB), read once — drives the RAM-aware pressure bands.
+    const [ramMB, setRamMB] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         const native = (0, incremental_1.getIncrementalNativeModule)();
         if (!native?.getMemoryFootprintMB)
             return undefined;
         let cancelled = false;
+        // One-time RAM read for the bands (optional native method — older bridges
+        // without it just keep the fixed-threshold fallback).
+        native
+            .getDeviceTotalRamMB?.()
+            .then((r) => {
+            if (!cancelled && r > 0)
+                setRamMB(r);
+        })
+            .catch(() => { });
         const tick = async () => {
             try {
                 const mb = await native.getMemoryFootprintMB();
@@ -81,19 +100,25 @@ function CaptureMemoryPill({ topInset = 0, pollIntervalMs = 500, }) {
     }, [pollIntervalMs]);
     if (memMB === null || memMB < 0)
         return null;
-    const bg = memMB > 2200 ? 'rgba(239, 68, 68, 0.92)' // red
-        : memMB > 1500 ? 'rgba(245, 158, 11, 0.92)' // amber
+    // RAM-aware bands: budget = max(RAM × 0.42, 900) (mirrors warp_guard.hpp
+    // perProcessMemoryBudgetMB); amber at 55 %, red at 70 %.  Fall back to the
+    // iPhone-tuned fixed thresholds when RAM is unknown.
+    const budget = ramMB != null ? Math.max(ramMB * 0.42, 900) : null;
+    const redAt = budget != null ? budget * 0.7 : 2200;
+    const amberAt = budget != null ? budget * 0.55 : 1500;
+    const bg = memMB > redAt ? 'rgba(239, 68, 68, 0.92)' // red
+        : memMB > amberAt ? 'rgba(245, 158, 11, 0.92)' // amber
             : 'rgba(34, 197, 94, 0.92)'; // green
     return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: [
             styles.container,
-            { top: topInset + 56, backgroundColor: bg },
+            { backgroundColor: bg },
+            style ?? { top: topInset + 56, right: 12 },
         ], accessibilityRole: "alert" },
         react_1.default.createElement(react_native_1.Text, { style: styles.text }, `${Math.round(memMB)} MB`)));
 }
 const styles = react_native_1.StyleSheet.create({
     container: {
         position: 'absolute',
-        right: 12,
         paddingHorizontal: 10,
         paddingVertical: 5,
         borderRadius: 999,

package/dist/camera/CapturePreview.js

@@ -32,6 +32,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CapturePreview = CapturePreview;
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
+const displayDecodeImageProps_1 = require("./displayDecodeImageProps");
 function CapturePreview({ visible, imageUri, imageWidth, imageHeight, actions, onClose, title, }) {
     const aspectRatio = imageWidth && imageHeight && imageWidth > 0 && imageHeight > 0
         ? imageWidth / imageHeight
@@ -57,7 +58,7 @@ function CapturePreview({ visible, imageUri, imageWidth, imageHeight, actions, o
                 react_1.default.createElement(react_native_1.Pressable, { onPress: onClose, hitSlop: 20, style: styles.closeButton, accessibilityRole: "button", accessibilityLabel: "Close preview" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.closeText }, "\u00D7"))),
             react_1.default.createElement(react_native_1.Pressable, { style: styles.imageWrapper, onPress: onClose, accessibilityRole: "button", accessibilityLabel: "Close preview" },
-                react_1.default.createElement(react_native_1.Image, { source: { uri: imageUri }, style: [styles.image, { aspectRatio }], resizeMode: "contain", accessibilityIgnoresInvertColors: true })),
+                react_1.default.createElement(react_native_1.Image, { source: { uri: imageUri }, style: [styles.image, { aspectRatio }], resizeMode: "contain", ...displayDecodeImageProps_1.DISPLAY_DECODE_IMAGE_PROPS, accessibilityIgnoresInvertColors: true })),
             hasActions ? (react_1.default.createElement(react_native_1.View, { style: styles.buttonRow }, actions.map((action, idx) => (react_1.default.createElement(react_native_1.Pressable, { key: `${action.label}-${idx}`, onPress: action.onPress, disabled: action.disabled, style: [
                     styles.button,
                     buttonStyleFor(action.variant ?? 'neutral'),

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