react-native-image-stitcher 0.15.1 → 0.16.0

package/dist/camera/RectCropPreview.js

@@ -0,0 +1,480 @@
+"use strict";
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * RectCropPreview — item-7 of the first-time-user guidance flow: the
+ * post-capture crop editor.
+ *
+ * Shows the full stitched result image (contain-fit, letterboxed) with a
+ * 4-corner quad overlay.  Each corner is INDEPENDENTLY draggable in
+ * on-screen coords via RN-core `PanResponder` (deliberately NO
+ * react-native-gesture-handler dependency — this library ships zero extra
+ * native deps for guidance).  Corner positions are mapped to image-pixel
+ * space through the pure `cropGeometry` letterbox transform.
+ *
+ * ## What it surfaces (and what it does NOT do)
+ *
+ * This component is presentation + gesture only.  On confirm it computes
+ * the 4 image-pixel corners and hands them to `onConfirm` — it does NOT
+ * call any native crop.  The PARENT decides between the cheap axis-aligned
+ * `cropToRect` (when the quad is ~rectangular) and the perspective
+ * `cropToQuad`, using the `perspective` flag in the result:
+ *
+ *   onConfirm({ quad, perspective: perspectiveCorrect && !isAxisAligned })
+ *
+ * Promoted + extended from `example/InscribedRectDebug.tsx`, which already
+ * did the image-px ↔ on-screen contain-fit mapping, a rect overlay, and
+ * the in-place native crop.  This version replaces the single computed
+ * inscribed rect with a user-draggable free quad and the perspective
+ * decision; the letterbox math now lives in the shared `cropGeometry`
+ * module.  Styling is carried over from InscribedRectDebug.
+ *
+ * ## Seeding
+ *
+ * The initial quad comes from `initialRect` (image-pixel coords) when the
+ * host passes one — `<Camera>` passes the panorama's MAX-INSCRIBED rectangle
+ * (the tightest clean rectangle with no black corners; item 2) so the editor
+ * opens on a sensible crop the user drags to taste.  With no `initialRect`
+ * (native inscribed-rect unavailable) it falls back to an 8 %-inset
+ * rectangle.  "Reset" returns to whichever seed was used.
+ */
+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.RectCropPreview = RectCropPreview;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const cameraGuidanceCopy_1 = require("./cameraGuidanceCopy");
+const cropGeometry_1 = require("./cropGeometry");
+const guidanceTokens_1 = require("./guidanceTokens");
+const CaptureMemoryPill_1 = require("./CaptureMemoryPill");
+/** Default inset (fraction of each dimension) for the seed quad. */
+const DEFAULT_INSET_FRACTION = 0.08;
+/** On-screen radius of each draggable corner handle. */
+const HANDLE_RADIUS = 16;
+/** Enlarged hit-slop radius so the small handle is easy to grab. */
+const HANDLE_HIT_RADIUS = 28;
+/**
+ * Build the seed quad in IMAGE-PIXEL coords: the host's `initialRect` if
+ * given, else an inset rectangle of the full image.  Always returned in
+ * [TL, TR, BR, BL] order.
+ */
+function seedImageQuad(imageWidth, imageHeight, initialRect) {
+    if (initialRect) {
+        const { x, y, width, height } = initialRect;
+        return [
+            { x, y },
+            { x: x + width, y },
+            { x: x + width, y: y + height },
+            { x, y: y + height },
+        ];
+    }
+    const ix = imageWidth * DEFAULT_INSET_FRACTION;
+    const iy = imageHeight * DEFAULT_INSET_FRACTION;
+    return [
+        { x: ix, y: iy },
+        { x: imageWidth - ix, y: iy },
+        { x: imageWidth - ix, y: imageHeight - iy },
+        { x: ix, y: imageHeight - iy },
+    ];
+}
+function RectCropPreview(props) {
+    const { imageUri, imageWidth, imageHeight, altImageUri, visible, onConfirm, onUseOriginal, onRetake, warnings, showCropControls = true, initialRect, copy, topInset = 0, bottomInset = 0, debugInfo, onRequestAlt, showMemoryPill, } = props;
+    const resolvedCopy = (0, react_1.useMemo)(() => (0, cameraGuidanceCopy_1.mergeGuidanceCopy)(copy), [copy]);
+    // ── A/B comparison — the PRIMARY (imageUri) is the MANUAL pipeline (the
+    // default output).  The alt is HIGH-LEVEL cv::Stitcher, produced either
+    // EAGERLY (`altImageUri`, legacy) or ON DEMAND (`onRequestAlt`, re-stitched
+    // the first time the user opens the high-level tab).  `altSize` is fetched
+    // once the alt uri exists; when the alt is showing we use its dims for the
+    // contain-fit and hide the crop quad.
+    const [showingAlt, setShowingAlt] = (0, react_1.useState)(false);
+    const [lazyAltUri, setLazyAltUri] = (0, react_1.useState)(null);
+    // The high-level (alt) stitch's OWN DEV-overlay recipe, resolved alongside
+    // its uri from `onRequestAlt`.  Shown in the params pill in place of the
+    // manual primary's `debugInfo` while the high-level tab is being viewed.
+    const [lazyAltDebugInfo, setLazyAltDebugInfo] = (0, react_1.useState)(null);
+    const [altLoading, setAltLoading] = (0, react_1.useState)(false);
+    const [altFailed, setAltFailed] = (0, react_1.useState)(false);
+    const altUri = altImageUri ?? lazyAltUri ?? null;
+    const altOffered = !!altImageUri || !!onRequestAlt;
+    const [altSize, setAltSize] = (0, react_1.useState)(null);
+    react_1.default.useEffect(() => {
+        if (!altUri) {
+            setAltSize(null);
+            return;
+        }
+        react_native_1.Image.getSize(altUri, (w, h) => setAltSize({ w, h }), () => setAltSize(null));
+    }, [altUri]);
+    // Switch to the high-level (alt) view; compute it lazily on first request.
+    const showHighLevel = react_1.default.useCallback(() => {
+        setShowingAlt(true);
+        if (altUri || altLoading || !onRequestAlt)
+            return;
+        setAltFailed(false);
+        setAltLoading(true);
+        onRequestAlt()
+            .then((result) => {
+            if (result) {
+                setLazyAltUri(result.uri);
+                setLazyAltDebugInfo(result.debugInfo);
+            }
+            else {
+                setAltFailed(true);
+            }
+        })
+            .catch(() => setAltFailed(true))
+            .finally(() => setAltLoading(false));
+    }, [altUri, altLoading, onRequestAlt]);
+    const showAlt = showingAlt && !!altUri && !!altSize;
+    const activeUri = showAlt ? altUri : imageUri;
+    const activeW = showAlt ? altSize.w : imageWidth;
+    const activeH = showAlt ? altSize.h : imageHeight;
+    // The 4 corners live in IMAGE-PIXEL space (the source of truth) so they
+    // survive layout-box changes (rotation, keyboard) without drift.  We map
+    // to screen for rendering and back on every drag via cropGeometry.
+    const [imageQuad, setImageQuad] = (0, react_1.useState)(() => seedImageQuad(imageWidth, imageHeight, initialRect));
+    const [box, setBox] = (0, react_1.useState)(null);
+    // Drag bookkeeping kept in refs so the per-move handler doesn't churn
+    // state identity / re-create PanResponders mid-gesture.
+    const boxRef = (0, react_1.useRef)(null);
+    const dragCornerRef = (0, react_1.useRef)(null);
+    // Screen-space corner positions at gesture start, so dx/dy from the
+    // gesture state apply to a stable origin (PanResponder reports
+    // cumulative deltas from touch-down, not per-frame).
+    const dragStartScreenRef = (0, react_1.useRef)(null);
+    const onLayout = (0, react_1.useCallback)((e) => {
+        const { width, height } = e.nativeEvent.layout;
+        const next = { width, height };
+        boxRef.current = next;
+        setBox(next);
+    }, []);
+    const handleConfirm = (0, react_1.useCallback)(() => {
+        const ordered = (0, cropGeometry_1.orderQuadCorners)(imageQuad);
+        // Guard: if the user collapsed the quad to something un-warpable, emit
+        // the original un-cropped panorama rather than hand native a degenerate
+        // quad.
+        if (!(0, cropGeometry_1.isQuadValid)(ordered)) {
+            onUseOriginal();
+            return;
+        }
+        const axisAligned = (0, cropGeometry_1.isAxisAlignedRect)(ordered);
+        // A skewed quad is perspective-rectified; a ~rectangular drag is a plain
+        // axis-aligned crop.  (The former `perspectiveCorrect` opt-out was removed
+        // in v0.16 — the SDK always honours a skewed quad with a warp.)
+        onConfirm({
+            quad: ordered,
+            perspective: !axisAligned,
+        });
+    }, [imageQuad, onConfirm, onUseOriginal]);
+    // One PanResponder per corner.  Built once (the corner index is the
+    // closure key); the move handler reads live box/quad via refs + setState
+    // updater so the responders never need to be rebuilt on drag.
+    const responders = (0, react_1.useMemo)(() => [0, 1, 2, 3].map((corner) => react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: () => {
+            dragCornerRef.current = corner;
+            const layout = boxRef.current;
+            if (!layout)
+                return;
+            // Capture this corner's screen position at touch-down.
+            setImageQuad((q) => {
+                dragStartScreenRef.current = (0, cropGeometry_1.imageToScreen)(q[corner], layout, imageWidth, imageHeight);
+                return q;
+            });
+        },
+        onPanResponderMove: (_e, gesture) => {
+            const layout = boxRef.current;
+            const start = dragStartScreenRef.current;
+            if (!layout || !start)
+                return;
+            const screenPt = {
+                x: start.x + gesture.dx,
+                y: start.y + gesture.dy,
+            };
+            const imgPt = (0, cropGeometry_1.screenToImage)(screenPt, layout, imageWidth, imageHeight);
+            setImageQuad((q) => {
+                const next = [...q];
+                next[corner] = imgPt;
+                return next;
+            });
+        },
+        onPanResponderRelease: () => {
+            dragCornerRef.current = null;
+            dragStartScreenRef.current = null;
+        },
+        onPanResponderTerminate: () => {
+            dragCornerRef.current = null;
+            dragStartScreenRef.current = null;
+        },
+    })), [imageWidth, imageHeight]);
+    // ── Derived screen geometry (recomputed each render from the box) ──
+    // The display box (letterboxed image rect) and the 4 corners projected
+    // into screen space for the overlay + handles.
+    let imageBox = null;
+    let screenCorners = null;
+    if (box) {
+        const fit = (0, cropGeometry_1.containFit)(box, activeW, activeH);
+        if (fit) {
+            imageBox = {
+                left: fit.offX,
+                top: fit.offY,
+                width: activeW * fit.scale,
+                height: activeH * fit.scale,
+            };
+            // Quad corners only apply to the primary (croppable) image — hidden
+            // while the alt (manual) output is shown for comparison.
+            screenCorners = showAlt
+                ? null
+                : imageQuad.map((p) => (0, cropGeometry_1.imageToScreen)(p, box, imageWidth, imageHeight));
+        }
+    }
+    // Outline path (a <View> per edge — RN core has no <Polygon>; this
+    // mirrors InscribedRectDebug's single-rect border treatment, generalised
+    // to 4 free edges).
+    const edges = screenCorners
+        ? screenCorners.map((from, i) => {
+            const to = screenCorners[(i + 1) % screenCorners.length];
+            return edgeStyle(from, to);
+        })
+        : [];
+    return (react_1.default.createElement(react_native_1.Modal, { visible: visible, animationType: "fade", onRequestClose: () => onUseOriginal(), accessibilityLabel: showCropControls
+            ? 'Crop the captured panorama'
+            : 'Review the captured panorama', 
+        // Mirror OrientationDriftModal: declare all 4 orientations so iOS
+        // doesn't force-rotate the window when this opens mid-rotation.
+        supportedOrientations: [
+            'portrait',
+            'portrait-upside-down',
+            'landscape-left',
+            'landscape-right',
+        ] },
+        react_1.default.createElement(react_native_1.View, { style: [styles.root, { paddingTop: topInset }] },
+            showMemoryPill ? (react_1.default.createElement(CaptureMemoryPill_1.CaptureMemoryPill, { style: {
+                    position: 'absolute',
+                    top: topInset + (altOffered ? 76 : 8),
+                    left: 12,
+                    zIndex: 21,
+                } })) : null,
+            (() => {
+                const pillText = showAlt && lazyAltDebugInfo ? lazyAltDebugInfo : debugInfo;
+                return pillText ? (react_1.default.createElement(react_native_1.View, { style: [
+                        styles.debugPill,
+                        { top: topInset + (altImageUri && altSize ? 76 : 8) },
+                    ], pointerEvents: "none", accessibilityRole: "text" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.debugPillText }, pillText))) : null;
+            })(),
+            warnings && warnings.length > 0 && (react_1.default.createElement(react_native_1.View, { style: styles.warningBanner, accessibilityRole: "alert" }, warnings.map((w, i) => (react_1.default.createElement(react_native_1.Text, { key: `warn-${i}`, style: styles.warningText }, w))))),
+            altOffered && (react_1.default.createElement(react_native_1.View, { style: styles.abBar },
+                react_1.default.createElement(react_native_1.Text, { style: styles.abBarLabel }, altLoading
+                    ? 'Stitching high-level… (manual shown meanwhile)'
+                    : altFailed
+                        ? 'High-level stitch failed — showing manual'
+                        : 'Viewing the highlighted pipeline — tap to switch:'),
+                react_1.default.createElement(react_native_1.View, { style: styles.abSegments },
+                    react_1.default.createElement(react_native_1.Pressable, { style: [styles.abSeg, !showAlt && styles.abSegActive], onPress: () => setShowingAlt(false), accessibilityRole: "button", accessibilityState: { selected: !showAlt }, accessibilityLabel: "View manual pipeline (default)" },
+                        react_1.default.createElement(react_native_1.Text, { style: [styles.abSegText, !showAlt && styles.abSegTextActive] }, "Manual")),
+                    react_1.default.createElement(react_native_1.Pressable, { style: [styles.abSeg, showAlt && styles.abSegActive], onPress: showHighLevel, accessibilityRole: "button", accessibilityState: { selected: showAlt, busy: altLoading }, accessibilityLabel: "View high-level pipeline (computed on demand)" }, altLoading ? (react_1.default.createElement(react_native_1.ActivityIndicator, { size: "small", color: "#fff" })) : (react_1.default.createElement(react_native_1.Text, { style: [styles.abSegText, showAlt && styles.abSegTextActive] }, "High-level")))))),
+            react_1.default.createElement(react_native_1.View, { style: styles.canvas, onLayout: onLayout },
+                imageBox && (react_1.default.createElement(react_native_1.Image, { source: { uri: activeUri }, style: [styles.image, imageBox], resizeMode: "stretch" })),
+                showCropControls && !showAlt && (react_1.default.createElement(react_1.default.Fragment, null,
+                    edges.map((e, i) => (react_1.default.createElement(react_native_1.View, { key: `edge-${i}`, style: [styles.edge, e], pointerEvents: "none" }))),
+                    screenCorners
+                        && screenCorners.map((c, i) => (react_1.default.createElement(react_native_1.View, { key: `handle-${i}`, ...responders[i].panHandlers, hitSlop: {
+                                top: HANDLE_HIT_RADIUS,
+                                bottom: HANDLE_HIT_RADIUS,
+                                left: HANDLE_HIT_RADIUS,
+                                right: HANDLE_HIT_RADIUS,
+                            }, accessibilityRole: "adjustable", accessibilityLabel: `Crop corner ${i + 1}`, style: [
+                                styles.handle,
+                                {
+                                    left: c.x - HANDLE_RADIUS,
+                                    top: c.y - HANDLE_RADIUS,
+                                },
+                            ] },
+                            react_1.default.createElement(react_native_1.View, { style: styles.handleDot, pointerEvents: "none" }))))))),
+            react_1.default.createElement(react_native_1.View, { style: [styles.bar, { paddingBottom: 16 + bottomInset }] },
+                react_1.default.createElement(react_native_1.View, { style: styles.buttons },
+                    react_1.default.createElement(react_native_1.Pressable, { style: ({ pressed }) => [styles.btn, pressed && styles.btnPressed], onPress: onRetake, accessibilityRole: "button", accessibilityLabel: resolvedCopy.cropRetake },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.btnText }, resolvedCopy.cropRetake)),
+                    showCropControls && !showAlt && (react_1.default.createElement(react_native_1.Pressable, { style: ({ pressed }) => [styles.btn, pressed && styles.btnPressed], onPress: () => onUseOriginal(), accessibilityRole: "button", accessibilityLabel: resolvedCopy.cropUseOriginal },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.btnText }, resolvedCopy.cropUseOriginal))),
+                    react_1.default.createElement(react_native_1.Pressable, { style: ({ pressed }) => [
+                            styles.btn,
+                            styles.primary,
+                            pressed && styles.btnPressed,
+                        ], onPress: showAlt
+                            ? () => onUseOriginal(activeUri)
+                            : showCropControls
+                                ? handleConfirm
+                                : () => onUseOriginal(), accessibilityRole: "button", accessibilityLabel: showAlt
+                            ? 'Use this output'
+                            : showCropControls
+                                ? resolvedCopy.cropConfirm
+                                : resolvedCopy.previewConfirm },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.btnText }, showAlt
+                            ? 'Use this'
+                            : showCropControls
+                                ? resolvedCopy.cropConfirm
+                                : resolvedCopy.previewConfirm)))))));
+}
+/**
+ * Absolute-positioned style for a 1-px-thick edge line between two
+ * screen points (origin → length + rotation).  RN core has no line
+ * primitive, so we render a thin rotated <View> per quad edge.
+ */
+function edgeStyle(from, to) {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const length = Math.hypot(dx, dy);
+    const angle = Math.atan2(dy, dx);
+    return {
+        left: from.x,
+        top: from.y,
+        width: length,
+        // Rotate about the line's start point (RN rotates about centre, so
+        // translate the midpoint back onto the start first).
+        transform: [
+            { translateX: -length / 2 },
+            { rotate: `${angle}rad` },
+            { translateX: length / 2 },
+        ],
+    };
+}
+const styles = react_native_1.StyleSheet.create({
+    root: { flex: 1, backgroundColor: '#000' },
+    debugPill: {
+        position: 'absolute',
+        right: 8,
+        zIndex: 20,
+        maxWidth: '60%',
+        paddingVertical: 6,
+        paddingHorizontal: 8,
+        borderRadius: 6,
+        backgroundColor: 'rgba(0,0,0,0.66)',
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderColor: 'rgba(120,220,160,0.5)',
+    },
+    debugPillText: {
+        color: '#7fe3a8',
+        fontSize: 10,
+        lineHeight: 14,
+        fontFamily: react_native_1.Platform.select({ ios: 'Menlo', android: 'monospace' }),
+    },
+    warningBanner: {
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        backgroundColor: 'rgba(255,196,98,0.16)',
+        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderBottomColor: guidanceTokens_1.GUIDANCE_TOKENS.amber,
+        gap: 4,
+    },
+    warningText: {
+        color: guidanceTokens_1.GUIDANCE_TOKENS.amber,
+        fontSize: 13,
+        fontWeight: '600',
+    },
+    abBar: {
+        backgroundColor: '#1a1a1a',
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderBottomColor: '#333',
+    },
+    abBarLabel: {
+        color: '#aaa',
+        fontSize: 11,
+        fontWeight: '600',
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    abSegments: {
+        flexDirection: 'row',
+        alignSelf: 'center',
+        backgroundColor: '#000',
+        borderRadius: 9,
+        padding: 3,
+    },
+    abSeg: {
+        paddingVertical: 7,
+        paddingHorizontal: 22,
+        borderRadius: 7,
+    },
+    abSegActive: {
+        backgroundColor: '#0A84FF',
+    },
+    abSegText: {
+        color: '#9aa',
+        fontSize: 14,
+        fontWeight: '700',
+    },
+    abSegTextActive: {
+        color: '#fff',
+    },
+    canvas: { flex: 1 },
+    image: { position: 'absolute' },
+    edge: {
+        position: 'absolute',
+        height: 2,
+        backgroundColor: guidanceTokens_1.GUIDANCE_TOKENS.amber,
+    },
+    handle: {
+        position: 'absolute',
+        width: HANDLE_RADIUS * 2,
+        height: HANDLE_RADIUS * 2,
+        borderRadius: HANDLE_RADIUS,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0,0,0,0.35)',
+        borderWidth: 2,
+        borderColor: guidanceTokens_1.GUIDANCE_TOKENS.white,
+    },
+    handleDot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: guidanceTokens_1.GUIDANCE_TOKENS.amber,
+    },
+    bar: { padding: 16, backgroundColor: '#111', gap: 12 },
+    buttons: { flexDirection: 'row', justifyContent: 'center', gap: 12 },
+    btn: {
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        borderRadius: 10,
+        backgroundColor: '#333',
+    },
+    primary: { backgroundColor: '#0A84FF' },
+    btnPressed: { opacity: 0.6 },
+    btnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
+});
+//# sourceMappingURL=RectCropPreview.js.map

package/dist/camera/RotateToLandscapePrompt.d.ts

@@ -0,0 +1,87 @@
+/**
+ * RotateToLandscapePrompt — full-screen, non-interactive overlay shown
+ * while a Mode-A (landscape, top→bottom pan) capture is waiting for the
+ * user to physically rotate the device to landscape.
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │                  (faint scrim over preview)               │
+ *   │                                                           │
+ *   │                    ┌───────────────┐                      │
+ *   │                    │   ⟳  phone    │  ← code-drawn        │
+ *   │                    │   line-art    │     (240px square)   │
+ *   │                    └───────────────┘                      │
+ *   │                                                           │
+ *   │             ●  Rotate to landscape   ← caption pill       │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * Item 2 of the first-time-user guidance set.  It is the first thing a
+ * user sees after starting a landscape-only capture in portrait — the
+ * GIF demonstrates the rotation gesture and the pill names the goal.
+ *
+ * ## Pure-presentational
+ *
+ * The component owns no orientation/eligibility logic: the host
+ * (`<Camera>`) decides *when* a Mode-A capture is blocked on rotation
+ * and drives `visible`.  When `visible` is false we render `null` so
+ * the host can mount us unconditionally without layout churn — mirrors
+ * `CaptureStatusOverlay`'s `idle` → `null` contract.
+ *
+ * ## Why the WHOLE prompt counter-rotates
+ *
+ * The host app is typically portrait-locked, so when the user tilts to
+ * landscape the OS does NOT rotate the framebuffer and JS-"up" stays at
+ * the device's side edge.  We counter-rotate the entire prompt (graphic
+ * + caption) via `useContentRotation()` — the same hook the bottom
+ * controls use — so it reads upright relative to actual gravity.
+ *
+ * This matters for BOTH children, not just the text:
+ *   - the **caption** is text and must read left-to-right;
+ *   - the **graphic is now directional** — its camera dot starts on one
+ *     edge and rotates to another to demonstrate the gesture, so an
+ *     un-rotated graphic in a landscape hold reads 90° off (the dot
+ *     appears to start "down" and travel "left" instead of "left" →
+ *     "top").  It is therefore counter-rotated with the caption.
+ *   - the column **layout** (caption below the graphic) also only reads
+ *     as a physical column once the wrapper is upright — otherwise
+ *     "below" lands at the physical side edge.
+ *
+ * (An earlier version rotated only the caption, back when the graphic
+ * was a symmetric spinner with no start/end direction.)  In a portrait
+ * hold the hook returns 0° so this is a no-op; once the device reaches
+ * the target orientation the host flips `visible` to false anyway, but
+ * the counter-rotation keeps everything legible during the in-between
+ * tilt.
+ *
+ * ## Accessibility
+ *
+ * `accessibilityRole='alert'` + `accessibilityLiveRegion='polite'` so
+ * VoiceOver / TalkBack announce the rotation instruction when the
+ * prompt appears (and re-announce if the copy changes), matching the
+ * pattern in `PanoramaGuidance`.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface RotateToLandscapePromptProps {
+    /**
+     * Show / hide.  Driven by the host while a Mode-A capture is blocked
+     * on the user rotating to landscape.  `false` renders nothing.
+     */
+    visible: boolean;
+    /**
+     * Caption copy.  Defaults to `DEFAULT_GUIDANCE_COPY.rotateToLandscape`
+     * ("Rotate to landscape").  Hosts localise via the `guidanceCopy`
+     * `<Camera>` prop and pass the resolved string here.  When `target` is
+     * `'portrait'`, pass the rotate-to-portrait copy.
+     */
+    copy?: string;
+    /**
+     * Orientation to rotate TO: `'landscape'` (default, panMode `'vertical'`)
+     * or `'portrait'` (panMode `'horizontal'`).  Drives the rotating-phone
+     * graphic's direction.
+     */
+    target?: 'landscape' | 'portrait';
+    /** Outer style passthrough (applied to the absolute-fill root). */
+    style?: StyleProp<ViewStyle>;
+}
+export declare function RotateToLandscapePrompt({ visible, copy, target, style, }: RotateToLandscapePromptProps): React.JSX.Element | null;
+//# sourceMappingURL=RotateToLandscapePrompt.d.ts.map