react-native-image-stitcher 0.15.1 → 0.16.0

package/dist/camera/CameraView.js

@@ -57,6 +57,15 @@ exports.CameraView = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_vision_camera_1 = require("react-native-vision-camera");
+const pickCaptureFormat_1 = require("./pickCaptureFormat");
+/**
+ * Cap on the chosen capture format's PHOTO long edge (px).  4032 ≈ 12 MP at
+ * 4:3 ("4K"-ish), matching the 1× lens, so the ultra-wide stops producing a
+ * 48 MP / ~6000 px still.  Set to 2016 for "2K" (~3 MP).  `0` reverts to pure
+ * max-video.  TODO(v0.16): expose as a `<Camera photoMaxLongEdge>` prop once
+ * the 0.5× panorama 8-bit check passes on-device.
+ */
+const PHOTO_LONG_EDGE_CAP = 4032;
 /**
  * A forwardRef'd wrapper that exposes the underlying Camera ref
  * to callers (so ``cameraRef.current.takePhoto()`` keeps working),
@@ -102,10 +111,58 @@ exports.CameraView = (0, react_1.forwardRef)(function CameraView({ device, flash
     // aspect on essentially every phone camera (incl. ultra-wide), so a
     // matching format is virtually always available; `useCameraFormat`
     // returns the closest match and never throws.
-    const format = (0, react_native_vision_camera_1.useCameraFormat)(device ?? undefined, [
-        { photoAspectRatio: 4 / 3 },
-        { videoAspectRatio: 4 / 3 },
-    ]);
+    //
+    // Resolution preference matters too: filtering on aspect ALONE lets
+    // vision-camera settle on whatever 4:3 format sorts first — observed as
+    // a 192×144 VIDEO stream on the iPhone 16 Pro (the photo still uses the
+    // format's full-res photo dims, so you'd get a sharp capture behind a
+    // mush preview).  So we also request the highest video resolution.
+    //
+    // Why `'max'` and not a bounded target like 1920×1440?  We tried the
+    // bounded target and it FAILED on the iPhone 16 Pro: the nearest
+    // 1920×1440 format is a 10-bit format (pixel formats x420 / x422 only —
+    // and it is NOT flagged HDR, so the `videoHdr` filter can't dodge it).
+    // The frame processor + the stitcher's CV pipeline need 8-bit
+    // `420v`/`420f`, so vision-camera raises
+    // `device/pixel-format-not-supported` and silently falls back to a
+    // default pixel format — breaking non-AR stitching.  vision-camera does
+    // NOT expose a format's supported pixel formats to JS (no
+    // `pixelFormats` field; `FormatFilter` has no pixel-format key), so we
+    // can't select an 8-bit format by inspection.  Empirically the device's
+    // MAX 4:3 video format is 8-bit (420v/420f) on the iPhone 16 Pro, and
+    // Android formats are near-universally 8-bit YUV_420_888, so `'max'` is
+    // the robust choice: a sharp preview on a frame-processor-compatible
+    // pipeline.  Trade-off: the max format tends to run at 30 fps (fine for
+    // hold-to-pan) and feeds full-res frames to the non-AR gate — if that
+    // ever shows up as dropped frames we can downscale for the gate
+    // natively while keeping full-res keyframes.  Aspect stays the
+    // top-priority filter, so 4:3 WYSIWYG parity holds on every device.
+    //
+    // Still resolution: a plain `videoResolution:'max'` filter (what we used
+    // before) maximises VIDEO and lets the PHOTO ride along — on the iPhone 16
+    // Pro ULTRA-WIDE that pairs a 48 MP still (8064×6048) with the max-video
+    // format, so a tap photo came out ~6000 px.  `pickCaptureFormat` instead
+    // picks the SHARPEST-video 4:3 format whose photo is within
+    // PHOTO_LONG_EDGE_CAP (verified on-device: the ultra-wide then chooses
+    // 3264×2448 video + 12 MP photo — still a crisp preview, no 48 MP still).
+    // The cap is on the PHOTO; video stays as high as the cap allows, so the
+    // 8-bit/sharp-preview rationale above still holds.
+    //
+    // preferHighFps: a panorama preview must stay SMOOTH while panning.  Video-
+    // resolution-first would pick the 3264×2448 **@30 fps** format over the
+    // 1920×1440 **@60 fps** one — visibly jittery.  Keyframes are clamped to
+    // 640/1280 px before stitching, so the extra video resolution buys nothing
+    // here; a 60 fps stream just looks right.  We opt the panorama camera in.
+    const format = (0, react_1.useMemo)(() => (0, pickCaptureFormat_1.pickCaptureFormat)(device?.formats ?? [], {
+        maxPhotoLongEdge: PHOTO_LONG_EDGE_CAP,
+        aspect: 4 / 3,
+        preferHighFps: true,
+    }), [device]);
+    // Pin the session frame rate to the format's max, capped at 60.  Picking a
+    // 60 fps-capable format is necessary but NOT sufficient — without an explicit
+    // `fps`, vision-camera can leave the session at a lower default, which is the
+    // jitter the user saw.  min(maxFps, 60) is always within the format's range.
+    const fps = (0, react_1.useMemo)(() => (format ? Math.min(format.maxFps ?? 30, 60) : undefined), [format]);
     // Measured size of our container, so we can size the <Camera> view to
     // the largest box of the capture's aspect ratio that fits inside it
     // (the rest becomes the black letterbox).  We deliberately size the
@@ -158,7 +215,7 @@ exports.CameraView = (0, react_1.forwardRef)(function CameraView({ device, flash
             // surrounding bars black.  See the cameraStyle computation above.
             style: cameraStyle, device: device, isActive: isActive, photo: true, video: video, 
             // Pin preview + photo to the same 4:3 format (WYSIWYG capture).
-            format: format, ...(zoom != null ? { zoom } : {}), 
+            format: format, ...(fps != null ? { fps } : {}), ...(zoom != null ? { zoom } : {}), 
             // Bake the device orientation into the captured pixels.
             // Without this, vision-camera writes the file in the camera
             // sensor's native landscape and relies on EXIF metadata to

package/dist/camera/CaptureCountdownOverlay.d.ts

@@ -0,0 +1,70 @@
+/**
+ * CaptureCountdownOverlay — the blinking auto-stop countdown shown at the
+ * user-perceived TOP-LEFT during an in-progress panorama capture (item 5
+ * of the first-time-user GUIDANCE flow).
+ *
+ *   ┌──────────────────────────────────────────────────┐
+ *   │  ● 9                                              │ ← top-left, blinks
+ *   │                                                   │
+ *   │            (camera preview / pan in progress)     │
+ *   │                                                   │
+ *   └──────────────────────────────────────────────────┘
+ *
+ * Why this exists
+ *   The capture auto-finalizes after a fixed window (the parent owns the
+ *   real timer — see Camera's `countdownSecondsFrom`).  Without a visible
+ *   counter the auto-stop feels abrupt ("why did it stop?").  A calm
+ *   blinking "● N" tells the user how many seconds of pan they have left.
+ *
+ * What it does
+ *   - Renders an amber glow dot + a white tabular-nums integer
+ *     (`secondsRemaining`, computed by the parent) using the shared
+ *     {@link GUIDANCE_COUNTDOWN} design tokens.
+ *   - Pins itself to the user-perceived top-left corner across all four
+ *     device orientations.  The app layout is portrait-locked, so — like
+ *     {@link CaptureStatusOverlay} / {@link PanoramaGuidance} — we anchor
+ *     to the matching layout corner and apply a rotation transform so the
+ *     number reads upright in the user's hold.
+ *   - Blinks the WHOLE timer (dot + number) between
+ *     `GUIDANCE_COUNTDOWN.blinkMinOpacity` and `blinkMaxOpacity` over
+ *     `blinkPeriodMs` with an ease-in-out loop on the native driver.
+ *
+ * The displayed number is COSMETIC only — the parent owns the auth­oritative
+ * auto-stop timer and computes `secondsRemaining`.  This component never
+ * fires a stop; it purely visualises the remaining time, so a dropped frame
+ * or a re-render hiccup can never desync from (or pre-empt) the real timer.
+ *
+ * Pure-presentational and `pointerEvents="none"`: it never steals taps from
+ * the camera / shutter beneath it, and renders nothing when `!visible` so
+ * the host can mount it unconditionally without layout shifts.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type DeviceOrientation } from './useDeviceOrientation';
+export interface CaptureCountdownOverlayProps {
+    /**
+     * Show / hide.  Driven by the host while a capture is in progress
+     * (typically `statusPhase === 'recording'`).  Renders nothing when
+     * false so the host can mount it unconditionally.
+     */
+    visible: boolean;
+    /**
+     * Whole seconds of capture remaining, as computed by the parent's
+     * authoritative timer (Camera's `countdownSecondsFrom`).  Displayed
+     * verbatim via `Math.max(0, Math.round(...))` so a fractional or
+     * transiently-negative value never renders as "-0" or "3.0".
+     *
+     * COSMETIC ONLY — this component does not own the auto-stop.
+     */
+    secondsRemaining: number;
+    /**
+     * Physical device orientation (typically from `useDeviceOrientation`).
+     * Drives the corner anchoring + rotation so the number sits at the
+     * user-perceived top-left and reads upright.
+     */
+    orientation: DeviceOrientation;
+    /** Outer style passthrough. */
+    style?: StyleProp<ViewStyle>;
+}
+export declare function CaptureCountdownOverlay({ visible, secondsRemaining, orientation, style, }: CaptureCountdownOverlayProps): React.JSX.Element | null;
+//# sourceMappingURL=CaptureCountdownOverlay.d.ts.map

package/dist/camera/CaptureCountdownOverlay.js

@@ -0,0 +1,239 @@
+"use strict";
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * CaptureCountdownOverlay — the blinking auto-stop countdown shown at the
+ * user-perceived TOP-LEFT during an in-progress panorama capture (item 5
+ * of the first-time-user GUIDANCE flow).
+ *
+ *   ┌──────────────────────────────────────────────────┐
+ *   │  ● 9                                              │ ← top-left, blinks
+ *   │                                                   │
+ *   │            (camera preview / pan in progress)     │
+ *   │                                                   │
+ *   └──────────────────────────────────────────────────┘
+ *
+ * Why this exists
+ *   The capture auto-finalizes after a fixed window (the parent owns the
+ *   real timer — see Camera's `countdownSecondsFrom`).  Without a visible
+ *   counter the auto-stop feels abrupt ("why did it stop?").  A calm
+ *   blinking "● N" tells the user how many seconds of pan they have left.
+ *
+ * What it does
+ *   - Renders an amber glow dot + a white tabular-nums integer
+ *     (`secondsRemaining`, computed by the parent) using the shared
+ *     {@link GUIDANCE_COUNTDOWN} design tokens.
+ *   - Pins itself to the user-perceived top-left corner across all four
+ *     device orientations.  The app layout is portrait-locked, so — like
+ *     {@link CaptureStatusOverlay} / {@link PanoramaGuidance} — we anchor
+ *     to the matching layout corner and apply a rotation transform so the
+ *     number reads upright in the user's hold.
+ *   - Blinks the WHOLE timer (dot + number) between
+ *     `GUIDANCE_COUNTDOWN.blinkMinOpacity` and `blinkMaxOpacity` over
+ *     `blinkPeriodMs` with an ease-in-out loop on the native driver.
+ *
+ * The displayed number is COSMETIC only — the parent owns the auth­oritative
+ * auto-stop timer and computes `secondsRemaining`.  This component never
+ * fires a stop; it purely visualises the remaining time, so a dropped frame
+ * or a re-render hiccup can never desync from (or pre-empt) the real timer.
+ *
+ * Pure-presentational and `pointerEvents="none"`: it never steals taps from
+ * the camera / shutter beneath it, and renders nothing when `!visible` so
+ * the host can mount it unconditionally without 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.CaptureCountdownOverlay = CaptureCountdownOverlay;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const guidanceTokens_1 = require("./guidanceTokens");
+function CaptureCountdownOverlay({ visible, secondsRemaining, orientation, style, }) {
+    // Single Animated.Value looping min→max→min drives the whole-timer
+    // blink.  Cheap (no JS listeners, native driver) and only spins up
+    // while visible; torn down on hide so the loop isn't running the
+    // rest of the time the screen is up.
+    const blink = (0, react_1.useRef)(new react_native_1.Animated.Value(guidanceTokens_1.GUIDANCE_COUNTDOWN.blinkMaxOpacity)).current;
+    (0, react_1.useEffect)(() => {
+        if (!visible) {
+            // Reset to fully-opaque so the next show starts bright rather
+            // than mid-fade.
+            blink.setValue(guidanceTokens_1.GUIDANCE_COUNTDOWN.blinkMaxOpacity);
+            return;
+        }
+        // Symmetric fade down + back up, so a full min→max→min cycle takes
+        // `blinkPeriodMs` (each half-leg is half the period).
+        const halfPeriod = guidanceTokens_1.GUIDANCE_COUNTDOWN.blinkPeriodMs / 2;
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(blink, {
+                toValue: guidanceTokens_1.GUIDANCE_COUNTDOWN.blinkMinOpacity,
+                duration: halfPeriod,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(blink, {
+                toValue: guidanceTokens_1.GUIDANCE_COUNTDOWN.blinkMaxOpacity,
+                duration: halfPeriod,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [visible, blink]);
+    if (!visible)
+        return null;
+    // Clamp to a non-negative integer.  The parent's timer may briefly
+    // report a fractional or sub-zero value at the auto-stop boundary;
+    // we never want to render "-1" or "2.4".
+    const displaySeconds = Math.max(0, Math.round(secondsRemaining));
+    const cornerStyle = countdownStyleForOrientation(orientation);
+    return (react_1.default.createElement(react_native_1.Animated.View, { pointerEvents: "none", style: [styles.root, cornerStyle, { opacity: blink }, style], accessibilityRole: "timer", accessibilityLiveRegion: "polite", accessibilityLabel: `${displaySeconds} seconds remaining` },
+        react_1.default.createElement(react_native_1.View, { style: styles.dot }),
+        react_1.default.createElement(react_native_1.Text, { style: styles.number, numberOfLines: 1, allowFontScaling: false }, displaySeconds)));
+}
+/**
+ * Style placing the countdown at the user-perceived TOP-LEFT corner with
+ * the number reading upright in the user's hold, inset by
+ * `GUIDANCE_COUNTDOWN.inset` from that corner.
+ *
+ * Mirrors the corner-anchor + percentage-translate self-centering of
+ * {@link CaptureStatusOverlay}'s `bannerStyleForOrientation`, but anchored
+ * to the user's top-LEFT instead of top-center.  For each orientation we
+ * anchor the row to the layout corner that maps to the user's top-left,
+ * then rotate the row about its center so it reads upright:
+ *
+ *   portrait              → layout top-left,     0°
+ *   landscape-left        → layout bottom-left, +90°
+ *   landscape-right       → layout top-right,   -90°
+ *   portrait-upside-down  → layout bottom-right, 180°
+ *
+ * The `translate('±50%')` pair pins the row's CENTER a fixed `inset`
+ * from the chosen corner so the post-rotation top-left edge lands at
+ * `inset` regardless of the row's own width/height — the same trick the
+ * banner uses to stay corner-aligned without measuring its content.
+ */
+function countdownStyleForOrientation(orientation) {
+    const { inset } = guidanceTokens_1.GUIDANCE_COUNTDOWN;
+    switch (orientation) {
+        case 'landscape-left':
+            // Device held so user-top runs along the layout LEFT edge; the
+            // user's top-left maps to the layout BOTTOM-left.  +90° makes the
+            // row read upright.
+            return {
+                position: 'absolute',
+                bottom: inset,
+                left: inset,
+                transform: [
+                    { translateX: '50%' },
+                    { translateY: '-50%' },
+                    { rotate: '90deg' },
+                ],
+            };
+        case 'landscape-right':
+            // User-top runs along the layout RIGHT edge; user's top-left maps
+            // to the layout TOP-right.  -90° makes the row read upright.
+            return {
+                position: 'absolute',
+                top: inset,
+                right: inset,
+                transform: [
+                    { translateX: '-50%' },
+                    { translateY: '50%' },
+                    { rotate: '-90deg' },
+                ],
+            };
+        case 'portrait-upside-down':
+            // User-top-left maps to the layout BOTTOM-right; 180° flips the row.
+            return {
+                position: 'absolute',
+                bottom: inset,
+                right: inset,
+                transform: [
+                    { translateX: '-50%' },
+                    { translateY: '-50%' },
+                    { rotate: '180deg' },
+                ],
+            };
+        case 'portrait':
+        default:
+            return {
+                position: 'absolute',
+                top: inset,
+                left: inset,
+                transform: [
+                    { translateX: '50%' },
+                    { translateY: '50%' },
+                ],
+            };
+    }
+}
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        // position: 'absolute' is re-applied by countdownStyleForOrientation
+        // alongside the corner offsets + transform; kept here too so the row
+        // lays out as a self-sized box even before the orientation style
+        // merges in.
+        position: 'absolute',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    dot: {
+        width: guidanceTokens_1.GUIDANCE_COUNTDOWN.dotSize,
+        height: guidanceTokens_1.GUIDANCE_COUNTDOWN.dotSize,
+        borderRadius: guidanceTokens_1.GUIDANCE_COUNTDOWN.dotSize / 2,
+        backgroundColor: guidanceTokens_1.GUIDANCE_TOKENS.amber,
+        marginRight: guidanceTokens_1.GUIDANCE_COUNTDOWN.dotGap,
+        // Amber glow around the dot.  iOS honours all four shadow props;
+        // Android renders the glow via `elevation` (set below) since RN
+        // ignores view shadowColor there.
+        shadowColor: guidanceTokens_1.GUIDANCE_COUNTDOWN.dotGlow,
+        shadowOpacity: 1,
+        shadowRadius: guidanceTokens_1.GUIDANCE_COUNTDOWN.dotSize,
+        shadowOffset: { width: 0, height: 0 },
+        elevation: 6,
+    },
+    number: {
+        color: guidanceTokens_1.GUIDANCE_TOKENS.white,
+        fontSize: guidanceTokens_1.GUIDANCE_COUNTDOWN.fontSize,
+        fontWeight: guidanceTokens_1.GUIDANCE_COUNTDOWN.fontWeight,
+        // Tabular figures keep the glyph box a fixed width so the number
+        // doesn't jitter horizontally as it ticks 9→8→…→0.
+        fontVariant: ['tabular-nums'],
+        // Drop shadow for legibility over a bright/busy preview.
+        textShadowColor: guidanceTokens_1.GUIDANCE_TOKENS.scrim,
+        textShadowOffset: { width: 0, height: 1 },
+        textShadowRadius: 3,
+    },
+});
+//# sourceMappingURL=CaptureCountdownOverlay.js.map

package/dist/camera/CaptureFrameCounterOverlay.d.ts

@@ -0,0 +1,58 @@
+/**
+ * CaptureFrameCounterOverlay — a live "k / n" keyframe counter shown at the
+ * user-perceived TOP-CENTRE during a panorama capture.
+ *
+ *   ┌──────────────────────────────────────────────────┐
+ *   │                     ● 3 / 6                       │ ← top-centre
+ *   │                                                   │
+ *   │            (camera preview / pan in progress)     │
+ *   └──────────────────────────────────────────────────┘
+ *
+ * Replaces the time countdown (item 5) as the primary capture HUD: instead
+ * of "seconds left" it shows how many keyframes have been captured out of
+ * the configured maximum, so the user can see the capture filling up and
+ * understand WHY it auto-finalizes at the cap (the parent stops + stitches
+ * when `framesCaptured` reaches `framesMax`).
+ *
+ * Pure-presentational + `pointerEvents="none"` (never steals taps); renders
+ * nothing when `!visible` so the host can mount it unconditionally.  Pins
+ * itself to the user-perceived TOP-CENTRE across all four orientations: the
+ * app is typically portrait-locked, so we anchor the pill to the layout edge
+ * that maps to the user's top and counter-rotate it to read upright (same
+ * idea as CaptureCountdownOverlay, but centre-anchored instead of corner).
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type DeviceOrientation } from './useDeviceOrientation';
+export interface CaptureFrameCounterOverlayProps {
+    /** Show / hide.  Driven by the host while a capture is recording. */
+    visible: boolean;
+    /** Keyframes accepted so far this capture (the engine's live count). */
+    framesCaptured: number;
+    /** Configured keyframe cap — the capture auto-finalizes when reached. */
+    framesMax: number;
+    /** Physical device orientation (from `useDeviceOrientation`). */
+    orientation: DeviceOrientation;
+    /** Outer style passthrough. */
+    style?: StyleProp<ViewStyle>;
+}
+export declare function CaptureFrameCounterOverlay({ visible, framesCaptured, framesMax, orientation, style, }: CaptureFrameCounterOverlayProps): React.JSX.Element | null;
+/**
+ * Flex alignment that pins content to the user-perceived TOP-CENTRE for a
+ * given device hold, plus the rotation that makes it read upright:
+ *
+ *   portrait              → layout top edge,    centred, 0°
+ *   landscape-left        → layout left edge,   centred, +90°
+ *   landscape-right       → layout right edge,  centred, -90°
+ *   portrait-upside-down  → layout bottom edge, centred, 180°
+ *
+ * `inset` is the distance from the user's top edge (larger values push the
+ * content further down the screen) — exported so other top-anchored overlays
+ * (e.g. the too-fast pill) can stack BELOW the counter by passing a bigger
+ * inset, and stay correctly placed + upright in every orientation.
+ */
+export declare function topCenterForOrientation(orientation: DeviceOrientation, inset: number): {
+    container: ViewStyle;
+    rotate: string;
+};
+//# sourceMappingURL=CaptureFrameCounterOverlay.d.ts.map

package/dist/camera/CaptureFrameCounterOverlay.js

@@ -0,0 +1,142 @@
+"use strict";
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * CaptureFrameCounterOverlay — a live "k / n" keyframe counter shown at the
+ * user-perceived TOP-CENTRE during a panorama capture.
+ *
+ *   ┌──────────────────────────────────────────────────┐
+ *   │                     ● 3 / 6                       │ ← top-centre
+ *   │                                                   │
+ *   │            (camera preview / pan in progress)     │
+ *   └──────────────────────────────────────────────────┘
+ *
+ * Replaces the time countdown (item 5) as the primary capture HUD: instead
+ * of "seconds left" it shows how many keyframes have been captured out of
+ * the configured maximum, so the user can see the capture filling up and
+ * understand WHY it auto-finalizes at the cap (the parent stops + stitches
+ * when `framesCaptured` reaches `framesMax`).
+ *
+ * Pure-presentational + `pointerEvents="none"` (never steals taps); renders
+ * nothing when `!visible` so the host can mount it unconditionally.  Pins
+ * itself to the user-perceived TOP-CENTRE across all four orientations: the
+ * app is typically portrait-locked, so we anchor the pill to the layout edge
+ * that maps to the user's top and counter-rotate it to read upright (same
+ * idea as CaptureCountdownOverlay, but centre-anchored instead of corner).
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaptureFrameCounterOverlay = CaptureFrameCounterOverlay;
+exports.topCenterForOrientation = topCenterForOrientation;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const guidanceTokens_1 = require("./guidanceTokens");
+function CaptureFrameCounterOverlay({ visible, framesCaptured, framesMax, orientation, style, }) {
+    if (!visible || framesMax <= 0)
+        return null;
+    // Clamp the displayed numerator into [0, framesMax] — the engine can
+    // briefly report the cap-th accept before the parent finalizes.
+    const k = Math.max(0, Math.min(framesCaptured, framesMax));
+    const { container, rotate } = topCenterForOrientation(orientation, guidanceTokens_1.GUIDANCE_COUNTDOWN.inset);
+    return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: [styles.layer, container, style] },
+        react_1.default.createElement(react_native_1.View, { style: [styles.pill, { transform: [{ rotate }] }] },
+            react_1.default.createElement(react_native_1.View, { style: styles.dot }),
+            react_1.default.createElement(react_native_1.Text, { style: styles.text, allowFontScaling: false, numberOfLines: 1 },
+                react_1.default.createElement(react_native_1.Text, { style: styles.count }, k),
+                react_1.default.createElement(react_native_1.Text, { style: styles.slash },
+                    " / ",
+                    framesMax)))));
+}
+/**
+ * Flex alignment that pins content to the user-perceived TOP-CENTRE for a
+ * given device hold, plus the rotation that makes it read upright:
+ *
+ *   portrait              → layout top edge,    centred, 0°
+ *   landscape-left        → layout left edge,   centred, +90°
+ *   landscape-right       → layout right edge,  centred, -90°
+ *   portrait-upside-down  → layout bottom edge, centred, 180°
+ *
+ * `inset` is the distance from the user's top edge (larger values push the
+ * content further down the screen) — exported so other top-anchored overlays
+ * (e.g. the too-fast pill) can stack BELOW the counter by passing a bigger
+ * inset, and stay correctly placed + upright in every orientation.
+ */
+function topCenterForOrientation(orientation, inset) {
+    switch (orientation) {
+        case 'landscape-left':
+            return {
+                container: {
+                    justifyContent: 'center',
+                    alignItems: 'flex-start',
+                    paddingLeft: inset,
+                },
+                rotate: '90deg',
+            };
+        case 'landscape-right':
+            return {
+                container: {
+                    justifyContent: 'center',
+                    alignItems: 'flex-end',
+                    paddingRight: inset,
+                },
+                rotate: '-90deg',
+            };
+        case 'portrait-upside-down':
+            return {
+                container: {
+                    justifyContent: 'flex-end',
+                    alignItems: 'center',
+                    paddingBottom: inset,
+                },
+                rotate: '180deg',
+            };
+        case 'portrait':
+        default:
+            return {
+                container: {
+                    justifyContent: 'flex-start',
+                    alignItems: 'center',
+                    paddingTop: inset,
+                },
+                rotate: '0deg',
+            };
+    }
+}
+const styles = react_native_1.StyleSheet.create({
+    // Full-screen, non-interactive layer; the per-orientation flex alignment
+    // places the pill on the correct edge, centred along it.
+    layer: { ...react_native_1.StyleSheet.absoluteFillObject },
+    pill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: guidanceTokens_1.GUIDANCE_PILL.paddingVertical,
+        paddingHorizontal: guidanceTokens_1.GUIDANCE_PILL.paddingHorizontal,
+        borderRadius: guidanceTokens_1.GUIDANCE_PILL.borderRadius,
+        backgroundColor: guidanceTokens_1.GUIDANCE_TOKENS.scrim,
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderColor: guidanceTokens_1.GUIDANCE_TOKENS.hairline,
+    },
+    dot: {
+        width: guidanceTokens_1.GUIDANCE_PILL.dotSize,
+        height: guidanceTokens_1.GUIDANCE_PILL.dotSize,
+        borderRadius: guidanceTokens_1.GUIDANCE_PILL.dotSize / 2,
+        backgroundColor: guidanceTokens_1.GUIDANCE_TOKENS.amber,
+        marginRight: guidanceTokens_1.GUIDANCE_PILL.dotGap,
+    },
+    text: {
+        // Tabular figures keep the counter from jittering as k ticks up.
+        fontVariant: ['tabular-nums'],
+    },
+    count: {
+        color: guidanceTokens_1.GUIDANCE_TOKENS.white,
+        fontSize: 17,
+        fontWeight: '700',
+    },
+    slash: {
+        color: guidanceTokens_1.GUIDANCE_TOKENS.amber,
+        fontSize: 15,
+        fontWeight: '600',
+    },
+});
+//# sourceMappingURL=CaptureFrameCounterOverlay.js.map

package/dist/camera/CaptureMemoryPill.d.ts

@@ -16,6 +16,7 @@
  * polls native every 500 ms and is unwanted in production builds.
  */
 import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
 export interface CaptureMemoryPillProps {
     /** Top inset (status bar / notch).  Pill pinned `topInset + 56`. */
     topInset?: number;
@@ -23,6 +24,13 @@ export interface CaptureMemoryPillProps {
      *  for no visible benefit; higher loses correlation with capture
      *  activity. */
     pollIntervalMs?: number;
+    /**
+     * Optional position override.  When supplied it REPLACES the default
+     * top-right anchor (`top: topInset + 56, right: 12`), so the pill can be
+     * reused on other screens (e.g. the crop/preview surface) without colliding
+     * with their own corner UI.  Pass the full absolute position you want.
+     */
+    style?: StyleProp<ViewStyle>;
 }
-export declare function CaptureMemoryPill({ topInset, pollIntervalMs, }: CaptureMemoryPillProps): React.JSX.Element | null;
+export declare function CaptureMemoryPill({ topInset, pollIntervalMs, style, }: CaptureMemoryPillProps): React.JSX.Element | null;
 //# sourceMappingURL=CaptureMemoryPill.d.ts.map

package/dist/camera/CaptureMemoryPill.js

@@ -55,7 +55,7 @@ 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);
     (0, react_1.useEffect)(() => {
         const native = (0, incremental_1.getIncrementalNativeModule)();
@@ -86,14 +86,14 @@ function CaptureMemoryPill({ topInset = 0, pollIntervalMs = 500, }) {
             : '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,