@toneflix/flipbook-native 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Toneflix
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,24 @@
-# Temporary Holding Version
+# @toneflix/flipbook-native
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Turn any set of photos into an album that bends, settles and feels like paper, in React Native and Expo, with page turns drawn by native views. A page folds exactly where a finger bends it, photos sink into the paper's grain, and phones open the book sideways across two pages.
+
+```bash
+npx expo install @toneflix/flipbook-native react-native-svg expo-screen-orientation
+```
+
+`expo-screen-orientation` is optional: with it, the screen locks to landscape while the book is open; without it, phones held upright are asked to turn sideways.
+
+```tsx
+import { View } from 'react-native'
+import { Flipbook } from '@toneflix/flipbook-native'
+
+export function Book({ book }) {
+  return (
+    <View style={{ flex: 1 }}>
+      <Flipbook book={book} fonts={{ serif: 'Fraunces_400Regular', serifItalic: 'Fraunces_400Regular_Italic' }} />
+    </View>
+  )
+}
+```
+
+See the [documentation](https://toneflix.github.io/flipbook/guide/react-native).

package/lib/Flipbook.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { FlipbookReader, type Face, type FlipbookBook, type FlipbookLabels, type GripOptions, type TurnPhysics } from '@toneflix/flipbook-core';
+import { type BookFonts } from './look';
+export interface FlipbookPlace {
+    /** How many leaves lie on the left: 0 is the closed front cover. */
+    flipped: number;
+    label: string;
+    faces: Face[];
+}
+export interface FlipbookProps {
+    book: FlipbookBook;
+    /** Open at this page (1-based) instead of the cover. */
+    startPage?: number;
+    /** Two pages side by side, one at a time, or whichever fits the space (default). */
+    layout?: 'auto' | 'spread' | 'single';
+    /** Show the top and bottom bars. */
+    controls?: boolean;
+    /** Hide the bars after this many ms without a touch, or never with false. */
+    autoHide?: number | false;
+    thumbnails?: boolean;
+    /**
+     * Read sideways like a real book: locks the screen to landscape while the book is open when
+     * `expo-screen-orientation` is installed, and otherwise asks the reader to turn the phone.
+     */
+    landscape?: boolean;
+    /** Covers swing on the spine like board instead of curling like paper. */
+    stiffCovers?: boolean;
+    physics?: Partial<TurnPhysics>;
+    grip?: Partial<GripOptions>;
+    /** Strength of the light and shadow around a turning page, from 0 to 1 or more. */
+    shading?: number;
+    /** Backdrop colour behind the book. Defaults to a glow tinted by the cover. */
+    background?: string;
+    fonts?: BookFonts;
+    labels?: Partial<FlipbookLabels>;
+    /** Extra controls at the start and end of the top bar, e.g. a close button. */
+    topLeft?: ReactNode;
+    topRight?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    onPageChange?: (place: FlipbookPlace) => void;
+    /** A page started to turn over, e.g. to play a sound. */
+    onFlip?: () => void;
+}
+export interface FlipbookHandle {
+    next(): void;
+    prev(): void;
+    go(flipped: number): void;
+    goToPage(page: number): void;
+    readonly reader: FlipbookReader;
+}
+/** A photo book that opens across two pages, turned by dragging, flicking, tapping or the buttons. */
+export declare const Flipbook: import("react").ForwardRefExoticComponent<FlipbookProps & import("react").RefAttributes<FlipbookHandle>>;

package/lib/Flipbook.js

@@ -0,0 +1,280 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, } from 'react';
+import { AccessibilityInfo, Animated, PanResponder, Pressable, ScrollView, StyleSheet, Text, View, useWindowDimensions, } from 'react-native';
+import Svg, { Defs, Path, RadialGradient, Rect, Stop } from 'react-native-svg';
+import { BookLayout, COVER_THEMES, DEFAULT_LABELS, FlipbookReader, } from '@toneflix/flipbook-core';
+import { FoldLayout } from './geometry';
+import { Gradient } from './Gradient';
+import { BookLookProvider } from './look';
+import { BackCoverView, BlankPageView, ColophonView, CoverView, PAGE_RATIO, PageView, TitlePageView } from './pages';
+import { lockLandscape } from './orientation';
+/** One face's content. Memoised so turning a page only moves its wrappers. */
+const FaceContent = memo(function FaceContent({ face, book, width, side, }) {
+    switch (face.kind) {
+        case 'cover':
+            return _jsx(CoverView, { book: book, width: width });
+        case 'back':
+            return _jsx(BackCoverView, { book: book, width: width });
+        case 'title':
+            return _jsx(TitlePageView, { book: book, width: width, side: side });
+        case 'colophon':
+            return _jsx(ColophonView, { book: book, width: width, side: side });
+        case 'blank':
+            return _jsx(BlankPageView, { width: width, side: side });
+        case 'page':
+            return _jsx(PageView, { page: book.pages[face.index], width: width, number: face.index + 1, side: side });
+    }
+});
+const BAND_STOPS = {
+    under: [
+        { offset: 0, color: '#000', opacity: 0.42 },
+        { offset: 0.17, color: '#000', opacity: 0.2 },
+        { offset: 0.53, color: '#000', opacity: 0.06 },
+        { offset: 1, color: '#000', opacity: 0 },
+    ],
+    bend: [
+        { offset: 0, color: '#000', opacity: 0.16 },
+        { offset: 0.5, color: '#000', opacity: 0.04 },
+        { offset: 1, color: '#000', opacity: 0 },
+    ],
+    curl: [
+        { offset: 0, color: '#000', opacity: 0.3 },
+        { offset: 0.035, color: '#000', opacity: 0.1 },
+        { offset: 0.11, color: '#fff', opacity: 0.2 },
+        { offset: 0.25, color: '#fff', opacity: 0.06 },
+        { offset: 0.6, color: '#000', opacity: 0.05 },
+        { offset: 1, color: '#000', opacity: 0.12 },
+    ],
+};
+/** A photo book that opens across two pages, turned by dragging, flicking, tapping or the buttons. */
+export const Flipbook = forwardRef(function Flipbook(props, ref) {
+    const { book, startPage, layout: layoutMode = 'auto', controls = true, autoHide = 3200, thumbnails = true, landscape = true, stiffCovers = true, physics, grip, shading = 1, background, fonts, topLeft, topRight, style, onPageChange, onFlip, } = props;
+    const labels = { ...DEFAULT_LABELS, ...props.labels };
+    const screen = useWindowDimensions();
+    const [stage, setStage] = useState({ width: 0, height: 0 });
+    const [portraitChoice, setPortraitChoice] = useState('ask');
+    const [locked, setLocked] = useState(false);
+    const [showPages, setShowPages] = useState(false);
+    const [, rerender] = useReducer((n) => n + 1, 0);
+    const reducedMotion = useRef(false);
+    useEffect(() => {
+        AccessibilityInfo.isReduceMotionEnabled?.().then((on) => (reducedMotion.current = on));
+        const subscription = AccessibilityInfo.addEventListener?.('reduceMotionChanged', (on) => (reducedMotion.current = on));
+        return () => subscription?.remove();
+    }, []);
+    useEffect(() => {
+        if (!landscape)
+            return;
+        let release;
+        let cancelled = false;
+        lockLandscape().then((unlock) => {
+            if (cancelled)
+                return unlock?.();
+            release = unlock ?? undefined;
+            setLocked(!!unlock);
+        });
+        return () => {
+            cancelled = true;
+            release?.();
+        };
+    }, [landscape]);
+    // Phones held upright are asked to turn sideways when the screen can't be locked; single pages are the fallback.
+    const portrait = screen.height > screen.width;
+    const showRotatePrompt = landscape && !locked && portrait && portraitChoice === 'ask' && layoutMode !== 'single';
+    const narrow = stage.width > 0 && stage.width / stage.height < 0.95;
+    const spread = layoutMode === 'auto' ? !(portrait && portraitChoice === 'single') && !narrow : layoutMode === 'spread';
+    const pageCount = book.pages.length;
+    const layout = useMemo(() => new BookLayout(pageCount, { spread, stiffCovers }), [pageCount, spread, stiffCovers]);
+    // Page size: as large as fits, keeping the page shape, with room for the controls.
+    const across = spread ? 2 : 1;
+    const marginY = !controls || stage.height < 500 ? 16 : Math.min(150, stage.height * 0.16);
+    const pageW = Math.floor(Math.max(0, Math.min((stage.height - marginY) * PAGE_RATIO, (stage.width - (spread ? 48 : 16)) / across)));
+    const pageH = Math.floor(pageW / PAGE_RATIO);
+    const handlers = useRef({ onFlip });
+    handlers.current = { onFlip };
+    const [reader] = useState(() => new FlipbookReader(layout, { frame: rerender, change: rerender, flip: () => handlers.current.onFlip?.() }, { flipped: layout.flippedForPage(startPage), physics, grip, reducedMotion: () => reducedMotion.current }));
+    useLayoutEffect(() => reader.configure({ layout, width: pageW, height: pageH }), [reader, layout, pageW, pageH]);
+    useEffect(() => {
+        reader.engine.physics = { ...reader.engine.physics, ...physics };
+        reader.grip = { ...reader.grip, ...grip };
+    }, [reader, physics, grip]);
+    useEffect(() => () => reader.destroy(), [reader]);
+    const { flipped, active } = reader;
+    const place = `${layout.spread}:${flipped}`;
+    const onPageChangeRef = useRef(onPageChange);
+    onPageChangeRef.current = onPageChange;
+    useEffect(() => {
+        onPageChangeRef.current?.({ flipped: reader.flipped, label: reader.label, faces: reader.layout.visible(reader.flipped) });
+    }, [place, reader]);
+    useImperativeHandle(ref, () => ({
+        next: () => reader.next(),
+        prev: () => reader.prev(),
+        go: (target) => reader.go(target),
+        goToPage: (page) => reader.go(reader.layout.flippedForPage(page)),
+        reader,
+    }), [reader]);
+    // ------------------------------------------------- Controls that hide while reading
+    const chrome = useRef(new Animated.Value(1)).current;
+    const [chromeShown, setChromeShown] = useState(true);
+    const hideTimer = useRef(undefined);
+    const poke = useCallback(() => {
+        clearTimeout(hideTimer.current);
+        setChromeShown(true);
+        Animated.timing(chrome, { toValue: 1, duration: 200, useNativeDriver: true }).start();
+        if (autoHide === false)
+            return;
+        hideTimer.current = setTimeout(() => {
+            setChromeShown(false);
+            Animated.timing(chrome, { toValue: 0, duration: 300, useNativeDriver: true }).start();
+        }, autoHide);
+    }, [autoHide, chrome]);
+    useEffect(() => {
+        poke();
+        return () => clearTimeout(hideTimer.current);
+    }, [poke]);
+    // ------------------------------------------------- A closed book sits centred
+    const settled = reader.settled;
+    const shift = layout.spread && settled ? (reader.atStart ? -pageW / 2 : reader.atEnd ? pageW / 2 : 0) : 0;
+    const shiftValue = useRef(new Animated.Value(shift)).current;
+    useEffect(() => {
+        Animated.timing(shiftValue, { toValue: shift, duration: 600, useNativeDriver: true }).start();
+    }, [shift, shiftValue]);
+    // ------------------------------------------------- Touch: grab, drag, flick, tap
+    const geometry = useRef({ stage, pageW, pageH, across, spread: layout.spread, shift });
+    geometry.current = { stage, pageW, pageH, across, spread: layout.spread, shift };
+    const grant = useRef({ x: 0, y: 0 });
+    /** A point on the stage measured from the top of the spine. */
+    const toBook = (p) => {
+        const g = geometry.current;
+        const left = (g.stage.width - g.pageW * g.across) / 2 + g.shift;
+        const top = (g.stage.height - g.pageH) / 2;
+        return { x: p.x - left - (g.spread ? g.pageW : 0), y: p.y - top };
+    };
+    const responder = useMemo(() => PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderGrant: (e) => {
+            grant.current = { x: e.nativeEvent.locationX, y: e.nativeEvent.locationY };
+            poke();
+            reader.down(toBook(grant.current), 1);
+        },
+        onPanResponderMove: (_, g) => {
+            reader.move(toBook({ x: grant.current.x + g.dx, y: grant.current.y + g.dy }), 1);
+        },
+        onPanResponderRelease: (_, g) => {
+            const at = { x: grant.current.x + g.dx, y: grant.current.y + g.dy };
+            if (reader.up(toBook(at), 1) !== 'tap')
+                return;
+            // A tap on the outer thirds turns the page.
+            const width = geometry.current.stage.width;
+            if (at.x > (width * 2) / 3)
+                reader.next();
+            else if (at.x < width / 3)
+                reader.prev();
+        },
+        onPanResponderTerminate: () => reader.cancel(),
+    }), [reader, poke]);
+    // ------------------------------------------------- Faces around the opening
+    const fold = new FoldLayout(pageW, pageH, active, active ? reader.engine.frame : null, shading);
+    const leaves = layout.leaves;
+    const turnLeaf = active?.leaf ?? null;
+    const turnDir = active?.dir ?? 1;
+    const rightLeaf = turnLeaf !== null ? turnLeaf + 1 : flipped;
+    const leftLeaf = turnLeaf !== null ? turnLeaf - 1 : flipped - 1;
+    const faces = [];
+    for (let k = Math.max(0, flipped - 2); k <= Math.min(leaves.length - 1, flipped + 1) && pageW > 0; k++) {
+        for (const side of ['front', 'back']) {
+            const facesUp = (side === 'front') === (turnDir === 1);
+            const role = k === turnLeaf
+                ? facesUp
+                    ? 'turning'
+                    : 'flap'
+                : side === 'front'
+                    ? k === rightLeaf
+                        ? 'right'
+                        : 'spare'
+                    : k === leftLeaf && layout.spread
+                        ? 'left'
+                        : 'spare';
+            if (role === 'spare')
+                continue;
+            const onLeft = role === 'left' || (role === 'turning' && turnDir === -1 && !active?.stiff);
+            const placement = fold.place(role, side, onLeft);
+            const z = { right: 1, left: 1, turning: 3, flap: 6 }[role];
+            faces.push(_jsx(View, { style: [placement.clip, { zIndex: z }], pointerEvents: "none", children: _jsx(View, { style: placement.frame, children: _jsxs(View, { style: placement.face, children: [_jsx(FaceContent, { face: side === 'front' ? leaves[k].front : leaves[k].back, book: book, width: pageW, side: side === 'front' ? 'right' : 'left' }), placement.bands.map((band) => (_jsx(View, { style: [band.style, { opacity: band.opacity }], children: _jsx(Gradient, { stops: BAND_STOPS[band.name] }) }, band.name)))] }) }) }, `${k}:${side}`));
+        }
+    }
+    const tint = COVER_THEMES[book.theme ?? 'classic'].stage;
+    return (_jsx(BookLookProvider, { paper: book.paper, frame: book.frame, fonts: fonts, children: _jsxs(View, { style: [styles.root, { backgroundColor: background ?? tint[2] }, style], children: [!background && _jsx(StageGlow, { colors: tint }), _jsx(View, { style: styles.stage, onLayout: (e) => setStage({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height }), pointerEvents: "box-only", ...responder.panHandlers, children: pageW > 0 && (_jsxs(Animated.View, { style: { width: pageW * across, height: pageH, transform: [{ translateX: shiftValue }] }, pointerEvents: "none", children: [_jsx(View, { style: [
+                                    styles.shadow,
+                                    {
+                                        left: layout.spread && reader.atStart && settled ? '52%' : '2%',
+                                        right: layout.spread && reader.atEnd && settled ? '52%' : '2%',
+                                    },
+                                ] }), _jsx(View, { style: [styles.spine, { left: layout.spread ? pageW : 0 }], children: faces })] })) }), controls && (_jsxs(Animated.View, { style: [styles.bar, styles.top, { opacity: chrome }], pointerEvents: chromeShown ? 'box-none' : 'none', children: [_jsx(Gradient, { to: "bottom", stops: [
+                                { offset: 0, color: '#000', opacity: 0.6 },
+                                { offset: 1, color: '#000', opacity: 0 },
+                            ] }), _jsxs(View, { style: styles.group, children: [topLeft, _jsxs(View, { style: styles.heading, children: [_jsx(Text, { style: styles.title, numberOfLines: 1, children: book.title }), book.author ? (_jsx(Text, { style: styles.byline, numberOfLines: 1, children: labels.byline(book.author) })) : null] })] }), _jsx(View, { style: styles.group, children: topRight })] })), showPages && thumbnails && (_jsx(PageStrip, { book: book, layout: layout, flipped: flipped, onPick: (target) => {
+                        reader.go(target);
+                        setShowPages(false);
+                    } })), controls && (_jsxs(Animated.View, { style: [styles.bar, styles.bottom, { opacity: chrome }], pointerEvents: chromeShown ? 'box-none' : 'none', children: [_jsx(Gradient, { to: "top", stops: [
+                                { offset: 0, color: '#000', opacity: 0.6 },
+                                { offset: 1, color: '#000', opacity: 0 },
+                            ] }), _jsx(RoundButton, { label: labels.previous, disabled: reader.atStart, onPress: () => reader.prev(), icon: "M15 6l-6 6 6 6" }), _jsx(Pressable, { onPress: () => thumbnails && setShowPages((s) => !s), style: styles.pages, role: "button", "aria-expanded": thumbnails ? showPages : undefined, children: _jsx(Text, { style: styles.pagesText, children: reader.label }) }), _jsx(RoundButton, { label: labels.next, disabled: reader.atEnd, onPress: () => reader.next(), icon: "M9 6l6 6-6 6" })] })), showRotatePrompt && (_jsxs(View, { style: styles.rotate, children: [_jsxs(Svg, { viewBox: "0 0 64 64", width: 80, height: 80, children: [_jsx(Rect, { x: "20", y: "6", width: "24", height: "52", rx: "4", fill: "none", stroke: "#fff", strokeWidth: 2.5 }), _jsx(Path, { d: "M32 49a2 2 0 1 0 0.01 0", stroke: "#fff", strokeWidth: 4, strokeLinecap: "round" })] }), _jsx(Text, { style: styles.rotateTitle, children: labels.rotateTitle }), _jsx(Text, { style: styles.rotateBody, children: labels.rotateBody }), _jsx(Pressable, { onPress: () => setPortraitChoice('single'), role: "button", children: _jsx(Text, { style: styles.rotateSecondary, children: labels.rotateSingle }) })] }))] }) }));
+});
+/** A soft glow behind the book, tinted by the cover. */
+function StageGlow({ colors }) {
+    return (_jsxs(Svg, { style: StyleSheet.absoluteFill, width: "100%", height: "100%", pointerEvents: "none", children: [_jsx(Defs, { children: _jsxs(RadialGradient, { id: "fbStage", cx: "50%", cy: "40%", rx: "70%", ry: "70%", children: [_jsx(Stop, { offset: "0", stopColor: colors[0] }), _jsx(Stop, { offset: "0.55", stopColor: colors[1] }), _jsx(Stop, { offset: "1", stopColor: colors[2] })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: "url(#fbStage)" })] }));
+}
+/** A strip of every spread (or page) to jump around the book. */
+function PageStrip({ book, layout, flipped, onPick, }) {
+    const width = 54;
+    return (_jsx(View, { style: styles.strip, children: _jsx(ScrollView, { horizontal: true, contentContainerStyle: styles.stripList, showsHorizontalScrollIndicator: false, children: layout.stops().map((stop) => (_jsx(Pressable, { onPress: () => onPick(stop.flipped), role: "button", "aria-label": `Go to ${BookLayout.describe(stop.faces)}`, style: [styles.stop, stop.flipped === flipped && styles.stopCurrent], children: stop.faces.map((face, i) => (_jsx(FaceContent, { face: face, book: book, width: width, side: i === 0 && stop.faces.length > 1 ? 'left' : 'right' }, i))) }, stop.flipped))) }) }));
+}
+function RoundButton({ label, icon, disabled, onPress }) {
+    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, role: "button", "aria-label": label, style: [styles.button, disabled && styles.disabled], children: _jsx(Svg, { viewBox: "0 0 24 24", width: 20, height: 20, children: _jsx(Path, { d: icon, stroke: "#fff", strokeWidth: 2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+const styles = StyleSheet.create({
+    root: { flex: 1, overflow: 'hidden', userSelect: 'none' },
+    stage: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    spine: { position: 'absolute', top: 0, width: 0, height: 0 },
+    shadow: { position: 'absolute', bottom: -10, height: 20, borderRadius: 999, backgroundColor: 'rgba(0,0,0,0.25)' },
+    bar: { position: 'absolute', left: 0, right: 0, flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16 },
+    top: { top: 0, justifyContent: 'space-between', paddingVertical: 12 },
+    bottom: { bottom: 0, justifyContent: 'center', paddingTop: 24, paddingBottom: 16 },
+    group: { flexDirection: 'row', alignItems: 'center', gap: 8, flexShrink: 1 },
+    heading: { flexShrink: 1 },
+    title: { color: '#fff', fontSize: 18 },
+    byline: { color: 'rgba(255,255,255,0.6)', fontSize: 12 },
+    button: { padding: 10, borderRadius: 999, backgroundColor: 'rgba(255,255,255,0.1)' },
+    disabled: { opacity: 0.3 },
+    pages: {
+        minWidth: 160,
+        alignItems: 'center',
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        borderRadius: 999,
+        backgroundColor: 'rgba(255,255,255,0.1)',
+    },
+    pagesText: { color: 'rgba(255,255,255,0.9)', fontSize: 14, fontVariant: ['tabular-nums'] },
+    strip: { position: 'absolute', left: 16, right: 16, bottom: 80, borderRadius: 16, backgroundColor: 'rgba(0,0,0,0.6)' },
+    stripList: { gap: 12, padding: 12 },
+    stop: { flexDirection: 'row', borderWidth: 2, borderColor: 'transparent', opacity: 0.8 },
+    stopCurrent: { borderColor: '#fcd34d', opacity: 1 },
+    rotate: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 16,
+        paddingHorizontal: 32,
+        backgroundColor: 'rgba(0,0,0,0.85)',
+    },
+    rotateTitle: { color: '#fff', fontSize: 24, textAlign: 'center' },
+    rotateBody: { color: 'rgba(255,255,255,0.7)', fontSize: 14, textAlign: 'center' },
+    rotateSecondary: { color: 'rgba(255,255,255,0.8)', fontSize: 14, textDecorationLine: 'underline' },
+});

package/lib/Gradient.d.ts

@@ -0,0 +1,14 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface GradientStop {
+    offset: number;
+    color: string;
+    opacity?: number;
+}
+/** A linear gradient filling its box, drawn with react-native-svg so it needs no other native module. */
+export declare function Gradient({ stops, to, style, }: {
+    stops: GradientStop[];
+    /** Where the last stop lies. */
+    to?: 'right' | 'left' | 'bottom' | 'top';
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+/** Stops for a colour given as `rgba(r,g,b,a)`, split so svg gets the alpha separately. */

package/lib/Gradient.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { StyleSheet } from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+/** A linear gradient filling its box, drawn with react-native-svg so it needs no other native module. */
+export function Gradient({ stops, to = 'right', style = StyleSheet.absoluteFill, }) {
+    const id = `g${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+    const [x1, y1, x2, y2] = { right: [0, 0, 1, 0], left: [1, 0, 0, 0], bottom: [0, 0, 0, 1], top: [0, 1, 0, 0] }[to];
+    return (_jsxs(Svg, { style: style, width: "100%", height: "100%", pointerEvents: "none", children: [_jsx(Defs, { children: _jsx(LinearGradient, { id: id, x1: x1, y1: y1, x2: x2, y2: y2, children: stops.map((stop, i) => (_jsx(Stop, { offset: stop.offset, stopColor: stop.color, stopOpacity: stop.opacity ?? 1 }, i))) }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${id})` })] }));
+}

package/lib/PrintedPhoto.d.ts

@@ -0,0 +1,15 @@
+import { type FlipbookPhoto, type FrameStyle } from '@toneflix/flipbook-core';
+/**
+ * A photo printed on a page inside its frame. It fills its parent, or with `fit="contain"` keeps the
+ * photo's shape and centres it. `unit` is 1% of the page's width, so frames look the same at any size.
+ */
+export interface PrintedPhotoProps {
+    photo: FlipbookPhoto | null;
+    frame: FrameStyle;
+    /** 1% of the page width. */
+    unit: number;
+    fit?: 'cover' | 'contain';
+    /** False draws a placeholder instead of loading the image. */
+    show?: boolean;
+}
+export declare function PrintedPhoto({ photo, frame, unit, fit, show }: PrintedPhotoProps): import("react").JSX.Element;

package/lib/PrintedPhoto.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import Svg, { ClipPath, Defs, Ellipse, G, Image as SvgImage, LinearGradient as SvgGradient, Path, Pattern, Polygon, Rect, Circle, Stop, } from 'react-native-svg';
+import { BANDED_FRAMES } from '@toneflix/flipbook-core';
+import { Gradient } from './Gradient';
+import { ink, usePaper } from './look';
+const BANDS = BANDED_FRAMES;
+/** The space inside the frame line (pad) and the frame line itself, in page units. Mirrors the web's .frame-* styles. */
+function measure(frame, unit) {
+    const band = BANDS[frame];
+    if (band)
+        return { pad: (band + 2.6) * unit, line: 0 };
+    switch (frame) {
+        case 'hairline':
+            return { pad: 1.6 * unit, line: Math.max(1, 0.22 * unit) };
+        case 'double':
+            return { pad: 1.4 * unit, line: Math.max(3, 0.7 * unit) };
+        case 'mat':
+            return { pad: 4.5 * unit, line: Math.max(1, 0.7 * unit) };
+        case 'corners':
+            return { pad: 0.7 * unit, line: 0 };
+        case 'deckle':
+            return { pad: 2.6 * unit, line: 0 };
+        case 'plate':
+            return { pad: 3.2 * unit, line: 0 };
+        case 'oval':
+            return { pad: 1.5 * unit, line: Math.max(1, 0.22 * unit) };
+        case 'botanical':
+            return { pad: 5 * unit, line: 0 };
+        default:
+            return { pad: 0, line: 0 };
+    }
+}
+export function PrintedPhoto({ photo, frame, unit, fit = 'cover', show = true }) {
+    const look = usePaper();
+    const [box, setBox] = useState(null);
+    const { pad, line } = measure(frame, unit);
+    const edge = pad + line;
+    const ratio = photo?.width && photo.height ? photo.width / photo.height : 4 / 3;
+    let width = box?.width ?? 0;
+    let height = box?.height ?? 0;
+    if (box && fit === 'contain') {
+        width = Math.min(box.width, (box.height - 2 * edge) * ratio + 2 * edge);
+        height = (width - 2 * edge) / ratio + 2 * edge;
+    }
+    const inner = { left: edge, top: edge, width: Math.max(0, width - 2 * edge), height: Math.max(0, height - 2 * edge) };
+    return (_jsx(View, { style: styles.box, onLayout: (event) => setBox(event.nativeEvent.layout), children: box && (_jsxs(View, { style: { width, height }, children: [_jsx(Backing, { frame: frame, look: look, unit: unit, width: width, height: height, line: line }), frame === 'oval' ? (_jsx(OvalPhoto, { photo: show ? photo : null, look: look, rect: inner, width: width, height: height, line: line })) : (_jsxs(View, { style: [styles.abs, inner], children: [photo && show ? (_jsx(Image, { source: { uri: photo.src }, style: StyleSheet.absoluteFill, resizeMode: "cover", "aria-label": photo.alt ?? undefined })) : (_jsx(View, { style: [StyleSheet.absoluteFill, { backgroundColor: ink(look, 0.15) }] })), frame === 'feather' && _jsx(Feather, { look: look })] })), _jsx(Trim, { frame: frame, look: look, unit: unit, width: width, height: height, rect: inner })] })) }));
+}
+/** What is printed under the photo: rules, mats, tints and bands. */
+function Backing({ frame, look, unit, width, height, line, }) {
+    const band = BANDS[frame];
+    if (band)
+        return _jsx(Band, { frame: frame, look: look, unit: unit, band: band * unit, width: width, height: height });
+    switch (frame) {
+        case 'hairline':
+            return _jsx(View, { style: [StyleSheet.absoluteFill, { borderWidth: line, borderColor: ink(look, 0.7) }] });
+        case 'double': {
+            const rule = line / 3;
+            const color = ink(look, 0.75);
+            return (_jsxs(_Fragment, { children: [_jsx(View, { style: [StyleSheet.absoluteFill, { borderWidth: rule, borderColor: color }] }), _jsx(View, { style: [
+                            styles.abs,
+                            { top: rule * 2, left: rule * 2, right: rule * 2, bottom: rule * 2, borderWidth: rule, borderColor: color },
+                        ] })] }));
+        }
+        case 'mat':
+            return (_jsx(View, { style: [StyleSheet.absoluteFill, { backgroundColor: look.frameTint, borderWidth: line, borderColor: ink(look, 0.85) }] }));
+        case 'plate': {
+            const press = 0.2 * unit;
+            return (_jsx(View, { style: [
+                    StyleSheet.absoluteFill,
+                    {
+                        backgroundColor: look.plateTint,
+                        borderTopWidth: press,
+                        borderLeftWidth: press,
+                        borderBottomWidth: press,
+                        borderRightWidth: press,
+                        borderTopColor: look.plateLow,
+                        borderLeftColor: look.plateLow,
+                        borderBottomColor: look.plateHigh,
+                        borderRightColor: look.plateHigh,
+                    },
+                ] }));
+        }
+        case 'deckle':
+            return _jsx(Deckle, { look: look, scallop: 1.6 * unit, width: width, height: height });
+        case 'oval':
+            return (_jsx(Svg, { width: width, height: height, style: styles.abs, children: _jsx(Ellipse, { cx: width / 2, cy: height / 2, rx: width / 2 - line / 2, ry: height / 2 - line / 2, stroke: ink(look, 0.7), strokeWidth: line, fill: "none" }) }));
+        default:
+            return null;
+    }
+}
+/** What is printed over or around the photo's edge: keylines, corners and sprigs. */
+function Trim({ frame, look, unit, width, height, rect, }) {
+    if (BANDS[frame])
+        return _jsx(Keyline, { rect: rect, weight: Math.max(1, 0.2 * unit), color: ink(look, 0.22) });
+    switch (frame) {
+        case 'mat':
+            return _jsx(Keyline, { rect: rect, weight: Math.max(1, 0.25 * unit), color: ink(look, 0.18) });
+        case 'botanical':
+            return (_jsxs(_Fragment, { children: [_jsx(Keyline, { rect: rect, weight: Math.max(1, 0.18 * unit), gap: 1.6 * unit, color: ink(look, 0.6) }), _jsx(Sprig, { color: ink(look, 0.8), unit: unit, style: { top: -1.8 * unit, left: 1.4 * unit } }), _jsx(Sprig, { color: ink(look, 0.8), unit: unit, style: { bottom: -1.8 * unit, right: 1.4 * unit, transform: [{ rotate: '180deg' }] } })] }));
+        case 'corners': {
+            const size = 5.5 * unit;
+            return (_jsx(Svg, { width: width, height: height, style: styles.abs, children: _jsxs(G, { fill: ink(look, 0.82), children: [_jsx(Polygon, { points: `0,0 ${size},0 0,${size}` }), _jsx(Polygon, { points: `${width - size},0 ${width},0 ${width},${size}` }), _jsx(Polygon, { points: `0,${height - size} ${size},${height} 0,${height}` }), _jsx(Polygon, { points: `${width},${height - size} ${width},${height} ${width - size},${height}` })] }) }));
+        }
+        default:
+            return null;
+    }
+}
+/** A printed rule just outside the photo, `gap` away from it. */
+function Keyline({ rect, weight, color, gap = 0 }) {
+    const out = gap + weight;
+    return (_jsx(View, { style: [
+            styles.abs,
+            {
+                left: rect.left - out,
+                top: rect.top - out,
+                width: rect.width + out * 2,
+                height: rect.height + out * 2,
+                borderWidth: weight,
+                borderColor: color,
+            },
+        ] }));
+}
+/** A tint with a scalloped edge, like an old deckled print. */
+function Deckle({ look, scallop, width, height }) {
+    const r = scallop / 2;
+    const across = Array.from({ length: Math.ceil(width / scallop) }, (_, i) => r + i * scallop);
+    const down = Array.from({ length: Math.ceil(height / scallop) }, (_, i) => r + i * scallop);
+    return (_jsx(Svg, { width: width, height: height, style: styles.abs, children: _jsxs(G, { opacity: 0.11, fill: ink(look), children: [_jsx(Rect, { x: r, y: r, width: width - scallop, height: height - scallop }), across.map((x) => (_jsxs(G, { children: [_jsx(Circle, { cx: x, cy: r, r: r }), _jsx(Circle, { cx: x, cy: height - r, r: r })] }, `x${x}`))), down.map((y) => (_jsxs(G, { children: [_jsx(Circle, { cx: r, cy: y, r: r }), _jsx(Circle, { cx: width - r, cy: y, r: r })] }, `y${y}`)))] }) }));
+}
+/** A mat with a patterned band printed around it. */
+function Band({ frame, look, unit, band, width, height, }) {
+    const id = useId().replace(/[^a-zA-Z0-9]/g, '');
+    const ring = `M0 0H${width}V${height}H0Z M${band} ${band}V${height - band}H${width - band}V${band}Z`;
+    const gilt = Math.max(1, 0.35 * unit);
+    return (_jsxs(_Fragment, { children: [_jsx(View, { style: [StyleSheet.absoluteFill, { backgroundColor: look.frameTint }] }), _jsxs(Svg, { width: width, height: height, style: styles.abs, children: [_jsxs(Defs, { children: [_jsxs(SvgGradient, { id: `wash${id}`, x1: "0", y1: "0", x2: "1", y2: "1", children: [_jsx(Stop, { offset: "0", stopColor: "#f0a993" }), _jsx(Stop, { offset: "0.3", stopColor: "#f3d27c" }), _jsx(Stop, { offset: "0.62", stopColor: "#9fd3bf" }), _jsx(Stop, { offset: "1", stopColor: "#8fb6e2" })] }), _jsx(Pattern, { id: `arcs${id}`, patternUnits: "userSpaceOnUse", width: 2.4 * unit, height: 1.3 * unit, children: [
+                                    [1.2, '#7ea7d8'],
+                                    [0.9, '#79c2a2'],
+                                    [0.6, '#f2c95c'],
+                                    [0.3, '#e9967a'],
+                                ].map(([radius, color]) => (_jsx(Circle, { cx: 1.2 * unit, cy: 1.3 * unit, r: radius * unit, fill: color }, color))) }), [45, -45].map((angle) => (_jsx(Pattern, { id: `hatch${angle}${id}`, patternUnits: "userSpaceOnUse", width: 0.8 * unit, height: 0.8 * unit, patternTransform: `rotate(${angle})`, children: _jsx(Rect, { width: 0.22 * unit, height: 0.8 * unit, fill: "rgba(180,138,50,0.75)" }) }, angle))), _jsxs(Pattern, { id: `grain${id}`, patternUnits: "userSpaceOnUse", width: 1.5 * unit, height: 4 * unit, patternTransform: "rotate(8)", children: [_jsx(Rect, { width: 0.12 * unit, height: 4 * unit, fill: "rgba(110,70,30,0.4)" }), _jsx(Rect, { x: 0.55 * unit, width: 0.25 * unit, height: 4 * unit, fill: "rgba(110,70,30,0.22)" })] })] }), frame === 'watercolor' && _jsx(Path, { d: ring, fillRule: "evenodd", fill: `url(#wash${id})`, opacity: 0.7 }), frame === 'arcs' && _jsx(Path, { d: ring, fillRule: "evenodd", fill: `url(#arcs${id})`, opacity: 0.8 }), frame === 'gilt' && (_jsxs(_Fragment, { children: [_jsx(Path, { d: ring, fillRule: "evenodd", fill: "rgba(214,178,92,0.45)" }), _jsx(Path, { d: ring, fillRule: "evenodd", fill: `url(#hatch45${id})` }), _jsx(Path, { d: ring, fillRule: "evenodd", fill: `url(#hatch-45${id})` }), _jsx(Rect, { x: gilt / 2, y: gilt / 2, width: width - gilt, height: height - gilt, stroke: "#b48a32", strokeWidth: gilt, fill: "none" })] })), frame === 'woodgrain' && (_jsxs(G, { opacity: 0.85, children: [_jsx(Path, { d: ring, fillRule: "evenodd", fill: "#cfa874" }), _jsx(Path, { d: ring, fillRule: "evenodd", fill: `url(#grain${id})` })] }))] })] }));
+}
+/** The photo cut to an oval. */
+function OvalPhoto({ photo, look, rect, width, height, }) {
+    const id = `oval${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+    return (_jsxs(Svg, { width: width, height: height, style: styles.abs, children: [_jsx(Defs, { children: _jsx(ClipPath, { id: id, children: _jsx(Ellipse, { cx: width / 2, cy: height / 2, rx: rect.width / 2, ry: rect.height / 2 }) }) }), photo ? (_jsx(SvgImage, { href: { uri: photo.src }, x: rect.left, y: rect.top, width: rect.width, height: rect.height, preserveAspectRatio: "xMidYMid slice", clipPath: `url(#${id})` })) : (_jsx(Ellipse, { cx: width / 2, cy: height / 2, rx: rect.width / 2, ry: rect.height / 2, fill: ink(look, 0.15) }))] }));
+}
+/** Fades the photo's edges into the paper. */
+function Feather({ look }) {
+    const stops = [
+        { offset: 0, color: look.background },
+        { offset: 0.08, color: look.background, opacity: 0 },
+        { offset: 0.92, color: look.background, opacity: 0 },
+        { offset: 1, color: look.background },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx(Gradient, { stops: stops, to: "right" }), _jsx(Gradient, { stops: stops, to: "bottom" })] }));
+}
+/** Leaves along a stem, alternating sides and shrinking toward the tip. */
+const LEAVES = [14, 24, 34, 44, 54, 64, 74].map((x, i) => ({ x, angle: i % 2 ? 38 : -38, length: 26 - i * 2 }));
+/** A sprig of leaves drawn in ink like a pen sketch, its stem along the frame rule. */
+function Sprig({ color, unit, style }) {
+    return (_jsxs(Svg, { viewBox: "0 0 100 40", width: 26 * unit, height: 10.4 * unit, style: [styles.abs, style], fill: "none", stroke: color, strokeLinecap: "round", children: [_jsx(Path, { d: "M4 20 Q 50 17, 92 20", strokeWidth: 1.2 }), LEAVES.map(({ x, angle, length }) => (_jsxs(G, { transform: `translate(${x} 20) rotate(${angle}) scale(${length / 20})`, children: [_jsx(Path, { d: "M0 0 C 5 -5, 14 -5, 20 0 C 14 5, 5 5, 0 0 Z", strokeWidth: 1 }), _jsx(Path, { d: "M2 0 L 16 0", strokeWidth: 0.6 })] }, x)))] }));
+}
+const styles = StyleSheet.create({
+    box: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' },
+    abs: { position: 'absolute' },
+});