react-native-image-stitcher 0.1.0

package/dist/camera/CaptureHeader.d.ts

@@ -0,0 +1,62 @@
+/**
+ * CaptureHeader — top-of-screen header for any capture surface.
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │  ‹ Back        Cola Promo End Cap                        │
+ *   │  Photograph the promotional cola end cap.                │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * Two stacked rows — title row (back arrow + centred title) and an
+ * optional guidance line below.  Lives in the SDK so every capture
+ * surface gets identical chrome without re-implementing safe-area
+ * handling, accessibility labels, and contrast on a black preview.
+ *
+ * Theming:
+ *   The host has its own theme system; rather than coupling the SDK
+ *   to it, the component exposes a small set of color props
+ *   (defaulted to white-on-black for visibility against the camera
+ *   preview).  Hosts that want to override pass `colors`.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface CaptureHeaderProps {
+    /** The audit / surface title.  Centred horizontally. */
+    title: string;
+    /**
+     * Called when the back affordance is pressed.  If omitted, the
+     * back button is hidden entirely (use this for surfaces invoked
+     * as a top-level tab where back doesn't make sense).
+     */
+    onBack?: () => void;
+    /** Custom label for the back button.  Defaults to "‹ Back". */
+    backLabel?: string;
+    /**
+     * Called when the gear / settings affordance is pressed.  If
+     * omitted, no settings icon is rendered.  Wire this to the
+     * host's PanoramaSettingsModal `visible` state.
+     */
+    onSettingsPress?: () => void;
+    /**
+     * Optional second-line guidance text shown below the title row.
+     * Renders nothing if absent.
+     */
+    guidance?: string;
+    /**
+     * Top inset in pixels.  Pass `useSafeAreaInsets().top` from
+     * react-native-safe-area-context if your app uses it; otherwise a
+     * sensible default is applied.
+     */
+    topInset?: number;
+    /** Override the default text/background colors. */
+    colors?: {
+        background?: string;
+        title?: string;
+        accent?: string;
+        guidanceBackground?: string;
+        guidanceText?: string;
+    };
+    /** Additional style applied to the outer container. */
+    style?: StyleProp<ViewStyle>;
+}
+export declare function CaptureHeader({ title, onBack, backLabel, onSettingsPress, guidance, topInset, colors, style, }: CaptureHeaderProps): React.JSX.Element;
+//# sourceMappingURL=CaptureHeader.d.ts.map

package/dist/camera/CaptureHeader.js

@@ -0,0 +1,81 @@
+"use strict";
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * CaptureHeader — top-of-screen header for any capture surface.
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │  ‹ Back        Cola Promo End Cap                        │
+ *   │  Photograph the promotional cola end cap.                │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * Two stacked rows — title row (back arrow + centred title) and an
+ * optional guidance line below.  Lives in the SDK so every capture
+ * surface gets identical chrome without re-implementing safe-area
+ * handling, accessibility labels, and contrast on a black preview.
+ *
+ * Theming:
+ *   The host has its own theme system; rather than coupling the SDK
+ *   to it, the component exposes a small set of color props
+ *   (defaulted to white-on-black for visibility against the camera
+ *   preview).  Hosts that want to override pass `colors`.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaptureHeader = CaptureHeader;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+function CaptureHeader({ title, onBack, backLabel = '‹ Back', onSettingsPress, guidance, topInset = 0, colors, style, }) {
+    const bg = colors?.background ?? '#000000';
+    const titleColor = colors?.title ?? '#ffffff';
+    const accent = colors?.accent ?? '#FF9F0A';
+    const guidanceBg = colors?.guidanceBackground ?? 'rgba(255,255,255,0.08)';
+    const guidanceColor = colors?.guidanceText ?? '#ffffff';
+    return (react_1.default.createElement(react_native_1.View, { style: [{ backgroundColor: bg }, style] },
+        react_1.default.createElement(react_native_1.View, { style: [styles.titleRow, { paddingTop: topInset + 8 }] },
+            onBack ? (react_1.default.createElement(react_native_1.Pressable, { onPress: onBack, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: "Go back", style: styles.backButton },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.backText, { color: accent }] }, backLabel))) : (
+            // Empty spacer keeps the title centred even when back is hidden.
+            react_1.default.createElement(react_native_1.View, { style: styles.backButton })),
+            react_1.default.createElement(react_native_1.Text, { style: [styles.title, { color: titleColor }], numberOfLines: 1, accessibilityRole: "header" }, title),
+            onSettingsPress ? (react_1.default.createElement(react_native_1.Pressable, { onPress: onSettingsPress, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: "Open panorama settings", style: styles.backButton },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.gearIcon, { color: accent }] }, "\u2699"))) : (react_1.default.createElement(react_native_1.View, { style: styles.backButton }))),
+        guidance ? (react_1.default.createElement(react_native_1.View, { style: [styles.guidance, { backgroundColor: guidanceBg }], accessibilityRole: "text" },
+            react_1.default.createElement(react_native_1.Text, { style: [styles.guidanceText, { color: guidanceColor }], numberOfLines: 2 }, guidance))) : null));
+}
+const styles = react_native_1.StyleSheet.create({
+    titleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingBottom: 8,
+    },
+    backButton: {
+        minWidth: 64,
+        paddingVertical: 4,
+    },
+    backText: {
+        fontSize: 16,
+        fontWeight: '500',
+    },
+    title: {
+        flex: 1,
+        textAlign: 'center',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    guidance: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+    guidanceText: {
+        fontSize: 13,
+    },
+    gearIcon: {
+        fontSize: 22,
+        textAlign: 'right',
+    },
+});
+//# sourceMappingURL=CaptureHeader.js.map

package/dist/camera/CapturePreview.d.ts

@@ -0,0 +1,70 @@
+/**
+ * CapturePreview — shared full-screen image preview used for BOTH:
+ *   1. Tap-to-preview from <CaptureThumbnailStrip> (existing thumbnails)
+ *   2. Post-stitch confirmation (newly produced panorama)
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │                                              [✕ close]   │
+ *   │            ┌──────────────────────────────┐              │
+ *   │            │     image (resizeMode=        │              │
+ *   │            │              contain)         │              │
+ *   │            └──────────────────────────────┘              │
+ *   │                                                          │
+ *   │      [action 1]   [action 2]   [action 3]                │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * Actions are passed in by the host so a single component can
+ * render the right buttons for each context:
+ *   - Thumbnail tap, unsubmitted capture → [Delete] [Recapture]
+ *   - Thumbnail tap, already-synced capture → [] (just close)
+ *   - Post-stitch → [Discard] [Retry] [Save]
+ *
+ * The component is presentational — it does not know about audit
+ * state, sync state, or any host-domain concept beyond the URI +
+ * dimensions to display and the action callbacks to fire.
+ */
+import React from 'react';
+export type CapturePreviewActionVariant = 'primary' | 'neutral' | 'ghost' | 'destructive';
+export interface CapturePreviewAction {
+    /** Button label (visible text). */
+    label: string;
+    /** Optional leading glyph — usually a unicode arrow / check / cross. */
+    icon?: string;
+    /** Visual variant.  Defaults to "neutral". */
+    variant?: CapturePreviewActionVariant;
+    /** Disabled state — useful while an async action is in flight. */
+    disabled?: boolean;
+    /**
+     * Called when the user presses the button.  Caller decides
+     * whether the preview should close after — call `onClose` from
+     * inside if that's the desired behaviour.
+     */
+    onPress: () => void;
+}
+export interface CapturePreviewProps {
+    /** Whether the modal is shown.  Drive from host state. */
+    visible: boolean;
+    /** file:// or http(s) URI to display. */
+    imageUri: string;
+    /** Image width in px (for aspect-ratio rendering). */
+    imageWidth?: number;
+    /** Image height in px. */
+    imageHeight?: number;
+    /**
+     * Action buttons rendered along the bottom.  Empty array (or
+     * undefined) renders no buttons — only the close affordance is
+     * available.  Up to 3 actions display cleanly across most
+     * widths; more wraps on a typical phone.
+     */
+    actions?: CapturePreviewAction[];
+    /**
+     * Called when the user dismisses the preview without choosing an
+     * action — tap on the close button, tap on the backdrop outside
+     * the image, or hardware back on Android.
+     */
+    onClose: () => void;
+    /** Optional title shown at the top of the modal. */
+    title?: string;
+}
+export declare function CapturePreview({ visible, imageUri, imageWidth, imageHeight, actions, onClose, title, }: CapturePreviewProps): React.JSX.Element;
+//# sourceMappingURL=CapturePreview.d.ts.map

package/dist/camera/CapturePreview.js

@@ -0,0 +1,188 @@
+"use strict";
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * CapturePreview — shared full-screen image preview used for BOTH:
+ *   1. Tap-to-preview from <CaptureThumbnailStrip> (existing thumbnails)
+ *   2. Post-stitch confirmation (newly produced panorama)
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │                                              [✕ close]   │
+ *   │            ┌──────────────────────────────┐              │
+ *   │            │     image (resizeMode=        │              │
+ *   │            │              contain)         │              │
+ *   │            └──────────────────────────────┘              │
+ *   │                                                          │
+ *   │      [action 1]   [action 2]   [action 3]                │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * Actions are passed in by the host so a single component can
+ * render the right buttons for each context:
+ *   - Thumbnail tap, unsubmitted capture → [Delete] [Recapture]
+ *   - Thumbnail tap, already-synced capture → [] (just close)
+ *   - Post-stitch → [Discard] [Retry] [Save]
+ *
+ * The component is presentational — it does not know about audit
+ * state, sync state, or any host-domain concept beyond the URI +
+ * dimensions to display and the action callbacks to fire.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CapturePreview = CapturePreview;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+function CapturePreview({ visible, imageUri, imageWidth, imageHeight, actions, onClose, title, }) {
+    const aspectRatio = imageWidth && imageHeight && imageWidth > 0 && imageHeight > 0
+        ? imageWidth / imageHeight
+        : 16 / 9;
+    const hasActions = actions && actions.length > 0;
+    return (react_1.default.createElement(react_native_1.Modal, { visible: visible, animationType: "fade", transparent: true, statusBarTranslucent: true, onRequestClose: onClose },
+        react_1.default.createElement(react_native_1.View, { style: styles.backdrop },
+            react_1.default.createElement(react_native_1.View, { style: styles.topBar },
+                react_1.default.createElement(react_native_1.View, { style: styles.topBarSpacer }),
+                title ? (react_1.default.createElement(react_native_1.Text, { style: styles.title, accessibilityRole: "header" }, title)) : (react_1.default.createElement(react_native_1.View, { style: styles.topBarSpacer })),
+                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 })),
+            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'),
+                    action.disabled ? styles.buttonDisabled : null,
+                ], accessibilityRole: "button", accessibilityLabel: action.label, accessibilityState: { disabled: action.disabled } },
+                react_1.default.createElement(react_native_1.Text, { style: [
+                        styles.buttonText,
+                        buttonTextStyleFor(action.variant ?? 'neutral'),
+                    ], numberOfLines: 1 },
+                    action.icon ? `${action.icon}  ` : '',
+                    action.label)))))) : null)));
+}
+function buttonStyleFor(variant) {
+    switch (variant) {
+        case 'primary':
+            return styles.buttonPrimary;
+        case 'destructive':
+            return styles.buttonDestructive;
+        case 'ghost':
+            return styles.buttonGhost;
+        case 'neutral':
+        default:
+            return styles.buttonNeutral;
+    }
+}
+function buttonTextStyleFor(variant) {
+    switch (variant) {
+        case 'primary':
+            return styles.buttonTextPrimary;
+        case 'destructive':
+            return styles.buttonTextDestructive;
+        case 'ghost':
+            return styles.buttonTextGhost;
+        case 'neutral':
+        default:
+            return styles.buttonTextNeutral;
+    }
+}
+const styles = react_native_1.StyleSheet.create({
+    backdrop: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.96)',
+        paddingTop: 56,
+        paddingBottom: 32,
+        paddingHorizontal: 16,
+    },
+    topBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    topBarSpacer: {
+        width: 44,
+    },
+    title: {
+        flex: 1,
+        color: '#ffffff',
+        fontSize: 16,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    closeButton: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: 'rgba(255,255,255,0.12)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    closeText: {
+        color: '#ffffff',
+        fontSize: 28,
+        fontWeight: '300',
+        lineHeight: 32,
+        marginTop: -2,
+    },
+    imageWrapper: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    image: {
+        width: '100%',
+        maxHeight: '100%',
+        backgroundColor: '#111',
+        borderRadius: 4,
+    },
+    buttonRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginTop: 16,
+        gap: 12,
+    },
+    button: {
+        flex: 1,
+        paddingVertical: 14,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    buttonDisabled: {
+        opacity: 0.45,
+    },
+    buttonPrimary: {
+        backgroundColor: '#34C759',
+    },
+    buttonNeutral: {
+        backgroundColor: 'rgba(255,255,255,0.12)',
+    },
+    buttonGhost: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.3)',
+    },
+    buttonDestructive: {
+        backgroundColor: '#FF3B30',
+    },
+    buttonText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    buttonTextPrimary: {
+        color: '#ffffff',
+        fontWeight: '700',
+    },
+    buttonTextNeutral: {
+        color: '#ffffff',
+    },
+    buttonTextGhost: {
+        color: '#ffffff',
+        opacity: 0.9,
+        fontWeight: '500',
+    },
+    buttonTextDestructive: {
+        color: '#ffffff',
+        fontWeight: '700',
+    },
+});
+//# sourceMappingURL=CapturePreview.js.map

package/dist/camera/CaptureStatusOverlay.d.ts

@@ -0,0 +1,75 @@
+/**
+ * CaptureStatusOverlay — screen-level visual feedback for the
+ * panorama capture lifecycle.
+ *
+ * Lives in the SDK because the existing shutter-button colour change
+ * is hidden by the user's finger during a hold.  An overlay above
+ * the preview is the only reliable channel for "you ARE recording
+ * right now" feedback.
+ *
+ *   ┌──────────────────────────────────────────────────┐
+ *   │  ● REC  Hold steady, pan slowly…                 │ ← banner
+ *   ├──────────────────────────────────────────────────┤
+ *   │ ┌──────────────────────────────────────────────┐ │
+ *   │ │                                              │ │
+ *   │ │           ⬛  red glow border                 │ │
+ *   │ │           around the preview                 │ │
+ *   │ │                                              │ │
+ *   │ └──────────────────────────────────────────────┘ │
+ *   └──────────────────────────────────────────────────┘
+ *
+ * The component is intentionally pure-presentational: it takes a
+ * `phase` prop and renders the matching UI.  Recording vs stitching
+ * vs idle is the host's source of truth — typically derived from
+ * `useVideoCapture().state` and a local "isStitching" boolean.
+ *
+ * The overlay renders nothing in `idle` so the host can render it
+ * unconditionally without conditional layout shifts.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+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).
+     */
+    phase: CaptureStatusPhase;
+    /**
+     * Optional override for the recording-phase message.  Defaults to
+     * "Hold steady — pan slowly".  Useful if the host wants direction
+     * hints (e.g. "Pan down across the rack") for a specific audit
+     * type.
+     */
+    recordingMessage?: string;
+    /**
+     * Optional override for the stitching-phase message.  Defaults to
+     * "Stitching panorama…".
+     */
+    stitchingMessage?: string;
+    /**
+     * If set, the recording-phase banner shows a live countdown
+     * ("REC 4s left") computed against this value.  Set to the
+     * shutter's `maxHoldMs` so the user can see how long they have
+     * left before the auto-stop fires.  Pair with a fresh value
+     * each time recording starts so the timer resets per capture.
+     *
+     * `recordingStartedAt` is the timestamp (Date.now()) when the
+     * recording phase began — required for the countdown math.
+     */
+    countdownMs?: number;
+    recordingStartedAt?: number;
+    /**
+     * Top inset to offset the banner below the status bar / notch.
+     * Defaults to 0 — host apps using `react-native-safe-area-context`
+     * should pass `insets.top` here so the banner doesn't disappear
+     * behind the notch.
+     */
+    topInset?: number;
+    /** Outer style passthrough. */
+    style?: StyleProp<ViewStyle>;
+}
+export declare function CaptureStatusOverlay({ phase, recordingMessage, stitchingMessage, countdownMs, recordingStartedAt, topInset, style, }: CaptureStatusOverlayProps): React.JSX.Element | null;
+//# sourceMappingURL=CaptureStatusOverlay.d.ts.map