@toneflix/flipbook-native 0.0.0-stage → 0.2.0

package/lib/geometry.d.ts

@@ -0,0 +1,44 @@
+import { type ActiveTurn, type TurnFrame } from '@toneflix/flipbook-core';
+import type { ViewStyle } from 'react-native';
+export type Role = 'right' | 'left' | 'turning' | 'flap' | 'spare';
+/** A strip of light or shadow laid along the fold, inside one face. */
+export interface Band {
+    name: 'under' | 'bend' | 'curl';
+    style: ViewStyle;
+    opacity: number;
+}
+/** Where one face sits: a clip window, a frame undoing the window's rotation, and the face itself. */
+export interface FacePlacement {
+    clip: ViewStyle;
+    frame: ViewStyle;
+    face: ViewStyle;
+    bands: Band[];
+}
+/**
+ * Lays out the faces of a book for React Native, which can't clip to a polygon. Coordinates are
+ * page pixels from the top of the spine. A folded page is clipped by a large window rotated to
+ * line up with the fold, inside which the faces are placed back in spine coordinates, so the
+ * same three nested views serve every face whether it's turning or lying still.
+ */
+export declare class FoldLayout {
+    readonly width: number;
+    readonly height: number;
+    readonly turn: ActiveTurn | null;
+    readonly frame: TurnFrame | null;
+    readonly shading: number;
+    private readonly side;
+    private readonly rest;
+    private readonly window;
+    private readonly fold;
+    private readonly dir;
+    private readonly reflection;
+    constructor(width: number, height: number, turn: ActiveTurn | null, frame: TurnFrame | null, shading?: number);
+    /** Spine coordinates of the fold's centre and its normal toward the folded part. */
+    private get line();
+    /** Places a face given its role, which side of the leaf it is, and whether it lies on the left. */
+    place(role: Role, side: 'front' | 'back', onLeft: boolean): FacePlacement;
+    /** Light and shadow along the fold that fall on this face. */
+    private bands;
+    /** A stiff cover swings on the spine instead of folding. */
+    private hinge;
+}

package/lib/geometry.js

@@ -0,0 +1,114 @@
+import { Affine, Fold } from '@toneflix/flipbook-core';
+/** Band widths as shares of the page width. */
+const BAND_WIDTH = { under: 0.3, bend: 0.1, curl: 1 };
+const styleOf = (transform, width, height) => {
+    const { left, top, angle, mirror } = transform.place(width, height);
+    return {
+        position: 'absolute',
+        left,
+        top,
+        width,
+        height,
+        transform: mirror ? [{ rotate: `${angle}rad` }, { scaleX: -1 }] : [{ rotate: `${angle}rad` }],
+    };
+};
+/**
+ * Lays out the faces of a book for React Native, which can't clip to a polygon. Coordinates are
+ * page pixels from the top of the spine. A folded page is clipped by a large window rotated to
+ * line up with the fold, inside which the faces are placed back in spine coordinates, so the
+ * same three nested views serve every face whether it's turning or lying still.
+ */
+export class FoldLayout {
+    width;
+    height;
+    turn;
+    frame;
+    shading;
+    side;
+    rest;
+    window;
+    fold;
+    dir;
+    reflection;
+    constructor(width, height, turn, frame, shading = 1) {
+        this.width = width;
+        this.height = height;
+        this.turn = turn;
+        this.frame = frame;
+        this.shading = shading;
+        this.side = 4 * Math.max(width, height);
+        this.rest = Affine.translate(-2 * width, -height);
+        this.dir = turn?.dir ?? 1;
+        this.fold = turn && frame && !turn.stiff ? new Fold(width, height, frame.origin, frame.point) : null;
+        this.window = this.rest;
+        this.reflection = new Affine();
+        if (!this.fold)
+            return;
+        const { center, normal } = this.fold;
+        const c = { x: this.dir * center.x, y: center.y };
+        const n = { x: this.dir * normal.x, y: normal.y };
+        this.window = Affine.translate(c.x, c.y)
+            .after(Affine.rotate(Math.atan2(n.y, n.x)))
+            .after(Affine.translate(-this.side, -this.side / 2));
+        this.reflection = Affine.reflect(c, n);
+    }
+    /** Spine coordinates of the fold's centre and its normal toward the folded part. */
+    get line() {
+        const { center, normal } = this.fold;
+        return { c: { x: this.dir * center.x, y: center.y }, n: { x: this.dir * normal.x, y: normal.y } };
+    }
+    /** Places a face given its role, which side of the leaf it is, and whether it lies on the left. */
+    place(role, side, onLeft) {
+        const { width, height, fold } = this;
+        const turning = role === 'turning' || role === 'flap';
+        const clipped = !!fold && turning;
+        const window = clipped ? this.window : this.rest;
+        const windowSize = clipped ? { w: this.side, h: this.side } : { w: 4 * width, h: 3 * height };
+        const toFrame = window.invert().after(Affine.translate(-width, 0));
+        let face = Affine.translate(onLeft ? -width : 0, 0);
+        if (fold && role === 'flap') {
+            const leaf = side === 'back' ? new Affine(-1, 0, 0, 1, width, 0) : new Affine();
+            face = this.reflection.after(Affine.scale(this.dir, 1)).after(leaf);
+        }
+        const placement = {
+            clip: { ...styleOf(window, windowSize.w, windowSize.h), overflow: clipped ? 'hidden' : 'visible' },
+            frame: styleOf(toFrame, 2 * width, height),
+            face: { ...styleOf(Affine.translate(width, 0).after(face), width, height), overflow: 'hidden' },
+            bands: [],
+        };
+        if (fold)
+            placement.bands = this.bands(role, face);
+        if (this.turn?.stiff && turning)
+            placement.face = this.hinge(side, placement.face);
+        return placement;
+    }
+    /** Light and shadow along the fold that fall on this face. */
+    bands(role, face) {
+        const strength = this.fold.shade * this.shading;
+        const band = (name, into) => {
+            const { c, n } = this.line;
+            const m = { x: into * n.x, y: into * n.y };
+            const d = { x: -n.y, y: n.x };
+            const width = this.width * BAND_WIDTH[name];
+            const height = this.side;
+            const strip = new Affine(m.x, m.y, d.x, d.y, c.x - (height / 2) * d.x, c.y - (height / 2) * d.y);
+            return { name, style: styleOf(face.invert().after(strip), width, height), opacity: strength };
+        };
+        if (role === 'turning')
+            return [band('bend', -1)];
+        if (role === 'flap')
+            return [band('curl', -1)];
+        const revealed = this.turn && (this.dir === 1 ? role === 'right' : role === 'left');
+        return revealed ? [band('under', 1)] : [];
+    }
+    /** A stiff cover swings on the spine instead of folding. */
+    hinge(side, style) {
+        const { width, frame } = this;
+        const angle = frame ? Fold.hinge(frame.origin, frame.point, this.dir) : 0;
+        const swing = [{ translateX: -width / 2 }, { perspective: Math.max(1800, width * 5) }, { rotateY: `${angle}deg` }];
+        const transform = side === 'front'
+            ? [...swing, { translateX: width / 2 }]
+            : [...swing, { translateX: width }, { rotateY: '180deg' }, { translateX: width / 2 }];
+        return { ...style, transform, backfaceVisibility: 'hidden' };
+    }
+}

package/lib/index.d.ts

@@ -0,0 +1,8 @@
+export * from '@toneflix/flipbook-core';
+export { Flipbook, type FlipbookProps, type FlipbookHandle, type FlipbookPlace } from './Flipbook';
+export { PageView, Paper, CoverView, BackCoverView, TitlePageView, ColophonView, BlankPageView, PAGE_RATIO, type PageViewProps, type CoverViewProps, } from './pages';
+export { PrintedPhoto, type PrintedPhotoProps } from './PrintedPhoto';
+export { BookLookProvider, useBookLook, usePaper, useSerif, ink, PAPERS, type BookLook, type BookFonts, type PaperLook } from './look';
+export { Gradient, type GradientStop } from './Gradient';
+export { FoldLayout } from './geometry';
+export { lockLandscape } from './orientation';

package/lib/index.js

@@ -0,0 +1,8 @@
+export * from '@toneflix/flipbook-core';
+export { Flipbook } from './Flipbook';
+export { PageView, Paper, CoverView, BackCoverView, TitlePageView, ColophonView, BlankPageView, PAGE_RATIO, } from './pages';
+export { PrintedPhoto } from './PrintedPhoto';
+export { BookLookProvider, useBookLook, usePaper, useSerif, ink, PAPERS } from './look';
+export { Gradient } from './Gradient';
+export { FoldLayout } from './geometry';
+export { lockLandscape } from './orientation';

package/lib/look.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import { type ImageSourcePropType } from 'react-native';
+import type { FrameStyle, PaperColor } from '@toneflix/flipbook-core';
+/** How one paper colour prints: its ink, the tints frames mix with it, and its texture tiles. Mirrors the web's .fb-paper-* styles. */
+export interface PaperLook {
+    background: string;
+    /** Ink as r, g, b, so frames can print it at any strength. */
+    ink: [number, number, number];
+    frameTint: string;
+    plateTint: string;
+    plateLow: string;
+    plateHigh: string;
+    texture: ImageSourcePropType;
+    textureOpacity: number;
+    grain: ImageSourcePropType;
+    grainOpacity: number;
+    /** Soft light from the top left, and the darker edges of the sheet. */
+    light: string;
+    vignette: string;
+}
+export declare const PAPERS: Record<PaperColor, PaperLook>;
+/** The ink of a paper at a strength from 0 to 1. */
+export declare const ink: (look: PaperLook, alpha?: number) => string;
+/** Font families for page text. Leave out `serifItalic` to slant `serif` instead. */
+export interface BookFonts {
+    serif?: string;
+    serifItalic?: string;
+    sans?: string;
+}
+export interface BookLook {
+    paper: PaperColor;
+    frame: FrameStyle;
+    fonts: BookFonts;
+}
+/** The paper, default frame and fonts for every page rendered inside. The viewer sets it from the book. */
+export declare function BookLookProvider({ paper, frame, fonts, children }: Partial<BookLook> & {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const useBookLook: () => BookLook;
+export declare const usePaper: () => PaperLook;
+/** Text styles for the book's serif face, upright or italic. */
+export declare function useSerif(): {
+    upright: {
+        fontFamily: string;
+    };
+    italic: {
+        fontFamily: string;
+        fontStyle?: undefined;
+    } | {
+        fontFamily: string;
+        fontStyle: "italic";
+    };
+};

package/lib/look.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { Platform } from 'react-native';
+const fine = { texture: require('../assets/textures/paper-fine@2x.webp'), grain: require('../assets/textures/grain-fine@2x.webp') };
+const ivory = {
+    background: '#fdf9f0',
+    ink: [61, 55, 47],
+    frameTint: 'rgba(255,255,255,0.4)',
+    plateTint: 'rgba(90,70,40,0.03)',
+    plateLow: 'rgba(90,70,40,0.12)',
+    plateHigh: 'rgba(255,255,255,0.6)',
+    ...fine,
+    textureOpacity: 0.35,
+    grainOpacity: 0.45,
+    light: 'rgba(255,255,255,0.5)',
+    vignette: 'rgba(110,90,60,0.08)',
+};
+export const PAPERS = {
+    ivory,
+    white: { ...ivory, background: '#ffffff', frameTint: 'rgba(150,125,90,0.08)' },
+    kraft: {
+        background: '#d8c4a2',
+        ink: [61, 47, 29],
+        frameTint: 'rgba(255,248,235,0.35)',
+        plateTint: 'rgba(90,70,40,0.03)',
+        plateLow: 'rgba(80,50,20,0.16)',
+        plateHigh: 'rgba(255,245,225,0.35)',
+        texture: require('../assets/textures/paper-kraft@2x.webp'),
+        textureOpacity: 0.45,
+        grain: require('../assets/textures/grain-kraft@2x.webp'),
+        grainOpacity: 0.35,
+        light: 'rgba(255,255,255,0.18)',
+        vignette: 'rgba(80,50,20,0.12)',
+    },
+    charcoal: {
+        background: '#2a2826',
+        ink: [232, 226, 214],
+        frameTint: 'rgba(255,255,255,0.07)',
+        plateTint: 'rgba(0,0,0,0.08)',
+        plateLow: 'rgba(0,0,0,0.35)',
+        plateHigh: 'rgba(255,255,255,0.07)',
+        texture: require('../assets/textures/paper-charcoal@2x.webp'),
+        textureOpacity: 0.25,
+        grain: require('../assets/textures/grain-charcoal@2x.webp'),
+        grainOpacity: 0.22,
+        light: 'rgba(255,255,255,0.05)',
+        vignette: 'rgba(0,0,0,0.25)',
+    },
+};
+/** The ink of a paper at a strength from 0 to 1. */
+export const ink = (look, alpha = 1) => `rgba(${look.ink.join(',')},${alpha})`;
+const DEFAULT_SERIF = Platform.select({ ios: 'Georgia', android: 'serif', default: 'Georgia, serif' });
+const BookLookContext = createContext({ paper: 'ivory', frame: 'none', fonts: {} });
+/** The paper, default frame and fonts for every page rendered inside. The viewer sets it from the book. */
+export function BookLookProvider({ paper = 'ivory', frame = 'none', fonts = {}, children }) {
+    return _jsx(BookLookContext.Provider, { value: { paper, frame, fonts }, children: children });
+}
+export const useBookLook = () => useContext(BookLookContext);
+export const usePaper = () => PAPERS[useBookLook().paper] ?? ivory;
+/** Text styles for the book's serif face, upright or italic. */
+export function useSerif() {
+    const { fonts } = useBookLook();
+    const serif = fonts.serif ?? DEFAULT_SERIF;
+    return {
+        upright: { fontFamily: serif },
+        italic: fonts.serifItalic ? { fontFamily: fonts.serifItalic } : { fontFamily: serif, fontStyle: 'italic' },
+    };
+}

package/lib/orientation.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Locks the screen to landscape and resolves to a function that restores the previous lock, or
+ * to null when the screen can't be locked.
+ */
+export declare function lockLandscape(): Promise<(() => void) | null>;

package/lib/orientation.js

@@ -0,0 +1,25 @@
+/** `expo-screen-orientation`, when the app has it installed. */
+const screenOrientation = (() => {
+    try {
+        return require('expo-screen-orientation');
+    }
+    catch {
+        return null;
+    }
+})();
+/**
+ * Locks the screen to landscape and resolves to a function that restores the previous lock, or
+ * to null when the screen can't be locked.
+ */
+export async function lockLandscape() {
+    if (!screenOrientation)
+        return null;
+    try {
+        const previous = await screenOrientation.getOrientationLockAsync();
+        await screenOrientation.lockAsync(screenOrientation.OrientationLock.LANDSCAPE);
+        return () => void screenOrientation.lockAsync(previous).catch(() => { });
+    }
+    catch {
+        return null;
+    }
+}

package/lib/pages.d.ts

@@ -0,0 +1,59 @@
+import { type ReactNode } from 'react';
+import { type ViewStyle } from 'react-native';
+import { type FlipbookBook, type FlipbookPage } from '@toneflix/flipbook-core';
+/** Pages are 3:4, like the web's. */
+export declare const PAGE_RATIO: number;
+type Side = 'left' | 'right';
+export interface PageViewProps {
+    page: FlipbookPage;
+    /** Page width; the height follows the 3:4 page shape. */
+    width: number;
+    number?: number;
+    side?: Side;
+    showImages?: boolean;
+    /** Editor: makes each photo slot pressable. */
+    onSlotPress?: (slot: number) => void;
+    activeSlot?: number | null;
+    /** Editor: colour of the highlighted slot. */
+    accent?: string;
+}
+/**
+ * The inside of one book page, `width` wide. Sizes are in units of 1% of the width, so the same
+ * page looks right as a thumbnail and full screen.
+ */
+export declare function PageView({ page, width, number, side, showImages, onSlotPress, activeSlot, accent }: PageViewProps): import("react").JSX.Element;
+/** A sheet of the book's paper: texture under the content, grain and page light over it. */
+export declare function Paper({ width, side, children, style }: {
+    width: number;
+    side?: Side;
+    children?: ReactNode;
+    style?: ViewStyle;
+}): import("react").JSX.Element;
+export interface CoverViewProps {
+    book: Pick<FlipbookBook, 'title' | 'subtitle' | 'theme' | 'cover' | 'kicker'>;
+    width: number;
+    showImages?: boolean;
+}
+/** The front cover: cloth with the title and an inset photo. */
+export declare function CoverView({ book, width, showImages }: CoverViewProps): import("react").JSX.Element;
+export declare function BackCoverView({ book, width }: {
+    book: Pick<FlipbookBook, 'theme' | 'imprint'>;
+    width: number;
+}): import("react").JSX.Element;
+/** Inside the front cover: a title page. */
+export declare function TitlePageView({ book, width, side, }: {
+    book: Pick<FlipbookBook, 'title' | 'subtitle' | 'author' | 'year'>;
+    width: number;
+    side?: Side;
+}): import("react").JSX.Element;
+/** Inside the back cover, with the book's closing line. */
+export declare function ColophonView({ book, width, side }: {
+    book: Pick<FlipbookBook, 'colophon'>;
+    width: number;
+    side?: Side;
+}): import("react").JSX.Element;
+export declare function BlankPageView({ width, side }: {
+    width: number;
+    side?: Side;
+}): import("react").JSX.Element;
+export {};

package/lib/pages.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import Svg, { Circle, Defs, Path, RadialGradient, Rect, Stop } from 'react-native-svg';
+import { COVER_THEMES, PLACED_LAYOUTS, photoFrame } from '@toneflix/flipbook-core';
+import { Gradient } from './Gradient';
+import { ink, useBookLook, usePaper, useSerif } from './look';
+import { PrintedPhoto } from './PrintedPhoto';
+/** Pages are 3:4, like the web's. */
+export const PAGE_RATIO = 3 / 4;
+/**
+ * The inside of one book page, `width` wide. Sizes are in units of 1% of the width, so the same
+ * page looks right as a thumbnail and full screen.
+ */
+export function PageView({ page, width, number, side, showImages = true, onSlotPress, activeSlot, accent = '#00afff' }) {
+    const look = usePaper();
+    const serif = useSerif();
+    const unit = width / 100;
+    const { layout, caption, photos } = page;
+    const bookFrame = useBookLook().frame;
+    const placed = PLACED_LAYOUTS[layout];
+    const captionStyle = [serif.italic, styles.caption, { fontSize: 3.8 * unit, lineHeight: 5.2 * unit, color: ink(look) }];
+    const slot = (index, style, fit = 'cover') => {
+        const photo = photos[index] ?? null;
+        const frame = photoFrame(page, photo, bookFrame);
+        return (_jsxs(Pressable, { disabled: !onSlotPress, onPress: () => onSlotPress?.(index), role: onSlotPress ? 'button' : undefined, "aria-label": onSlotPress ? `Photo slot ${index + 1}` : undefined, style: [style, fit === 'cover' && styles.clip], children: [photo ? (_jsx(PrintedPhoto, { photo: photo, frame: frame, unit: unit, fit: fit, show: showImages })) : (_jsx(View, { style: [
+                        StyleSheet.absoluteFill,
+                        styles.empty,
+                        { backgroundColor: ink(look, 0.1) },
+                        onSlotPress && { borderWidth: 0.4 * unit, borderColor: ink(look, 0.3) },
+                    ], children: onSlotPress && _jsx(Text, { style: { fontSize: 3.2 * unit, color: ink(look, 0.7) }, children: "Add a photo" }) })), onSlotPress && activeSlot === index && (_jsx(View, { pointerEvents: "none", style: [StyleSheet.absoluteFill, { borderWidth: 0.8 * unit, borderColor: accent }] }))] }, index));
+    };
+    const boxStyle = ({ x, y, width: w, height: h, rotate }) => ({
+        position: 'absolute',
+        left: x * unit,
+        top: y * unit,
+        width: w * unit,
+        height: h * unit,
+        transform: rotate ? [{ rotate: `${rotate}deg` }] : undefined,
+    });
+    const pageCaption = caption ? _jsx(Text, { style: captionStyle, children: caption }) : null;
+    return (_jsxs(Paper, { width: width, side: side, children: [layout === 'single' && (_jsxs(_Fragment, { children: [slot(0, StyleSheet.absoluteFill), caption ? (_jsxs(View, { pointerEvents: "none", style: [styles.overlay, { paddingTop: 14 * unit, paddingHorizontal: 7 * unit, paddingBottom: 7 * unit }], children: [_jsx(Gradient, { to: "top", stops: [
+                                    { offset: 0, color: '#000', opacity: 0.7 },
+                                    { offset: 0.5, color: '#000', opacity: 0.3 },
+                                    { offset: 1, color: '#000', opacity: 0 },
+                                ] }), _jsx(Text, { style: [serif.italic, { fontSize: 4.2 * unit, lineHeight: 5.7 * unit, color: '#fff' }], children: caption })] })) : null] })), layout === 'framed' && (_jsxs(View, { style: [styles.fill, { paddingTop: 10 * unit, paddingHorizontal: 9 * unit, paddingBottom: 6 * unit }], children: [slot(0, styles.flex, 'contain'), _jsx(Text, { style: [captionStyle, { marginTop: 5 * unit, minHeight: 6 * unit, fontSize: 4.2 * unit, lineHeight: 5.7 * unit }], children: caption })] })), layout === 'pair' && (_jsxs(View, { style: [styles.fill, { padding: 7 * unit, gap: 4 * unit }], children: [slot(0, styles.flex), slot(1, styles.flex), pageCaption] })), layout === 'grid' && (_jsxs(View, { style: [styles.fill, { padding: 7 * unit, gap: 3 * unit }], children: [[0, 2].map((first) => (_jsxs(View, { style: [styles.row, { gap: 3 * unit }], children: [slot(first, styles.flex), slot(first + 1, styles.flex)] }, first))), pageCaption] })), layout === 'collage' && (_jsxs(View, { style: [styles.fill, { padding: 7 * unit, gap: 3 * unit }], children: [slot(0, { flex: 1.4 }), _jsxs(View, { style: [styles.row, { gap: 3 * unit }], children: [slot(1, styles.flex), slot(2, styles.flex)] }), pageCaption] })), placed && (_jsxs(_Fragment, { children: [placed.slots.map((box, i) => slot(i, { ...boxStyle(box), ...(placed.loose && styles.loose) })), caption ? (_jsx(View, { pointerEvents: "none", style: [boxStyle(placed.caption), !placed.prose && styles.centered], children: _jsx(Text, { style: placed.prose ? [serif.upright, { fontSize: 4.4 * unit, lineHeight: 6.8 * unit, color: ink(look) }] : captionStyle, children: caption }) })) : null] })), layout === 'text' && (_jsxs(View, { style: [styles.fill, styles.centered, { paddingVertical: 14 * unit, paddingHorizontal: 12 * unit }], children: [_jsx(Text, { style: [serif.upright, { fontSize: 18 * unit, lineHeight: 16 * unit, height: 10 * unit, color: ink(look, 0.3) }], accessible: false, children: "\u201C" }), _jsx(Text, { style: [serif.italic, styles.caption, { marginTop: 4 * unit, fontSize: 6 * unit, lineHeight: 8.4 * unit, color: ink(look) }], children: caption || (onSlotPress ? 'Write something in the caption box below.' : '') })] })), number !== undefined && layout !== 'single' && (_jsx(Text, { style: [
+                    serif.upright,
+                    styles.number,
+                    side === 'left' ? styles.left : styles.right,
+                    { paddingHorizontal: 5 * unit, paddingBottom: 2.6 * unit, fontSize: 2.8 * unit, color: ink(look, 0.6) },
+                ], children: number }))] }));
+}
+/** A sheet of the book's paper: texture under the content, grain and page light over it. */
+export function Paper({ width, side, children, style }) {
+    const look = usePaper();
+    return (_jsxs(View, { style: [styles.page, { width, height: width / PAGE_RATIO, backgroundColor: look.background }, style], children: [_jsx(Image, { source: look.texture, resizeMode: "repeat", style: [StyleSheet.absoluteFill, styles.tile, { opacity: look.textureOpacity }] }), _jsx(PageLight, { look: look }), children, _jsxs(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: [_jsx(Image, { source: look.grain, resizeMode: "repeat", style: [StyleSheet.absoluteFill, styles.tile, { opacity: look.grainOpacity }] }), side && _jsx(Gutter, { side: side })] })] }));
+}
+/** Soft light from the top left and darker edges, like a real sheet. */
+function PageLight({ look }) {
+    const id = useId().replace(/[^a-zA-Z0-9]/g, '');
+    return (_jsxs(Svg, { style: StyleSheet.absoluteFill, width: "100%", height: "100%", pointerEvents: "none", children: [_jsxs(Defs, { children: [_jsxs(RadialGradient, { id: `light${id}`, cx: "30%", cy: "20%", rx: "55%", ry: "55%", children: [_jsx(Stop, { offset: "0", stopColor: look.light }), _jsx(Stop, { offset: "1", stopColor: look.light, stopOpacity: 0 })] }), _jsxs(RadialGradient, { id: `vignette${id}`, cx: "50%", cy: "50%", rx: "70%", ry: "70%", children: [_jsx(Stop, { offset: "0.6", stopColor: look.vignette, stopOpacity: 0 }), _jsx(Stop, { offset: "1", stopColor: look.vignette })] })] }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#light${id})` }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#vignette${id})` })] }));
+}
+/** The page curving into the spine on a spread, and the sheen where it rises. */
+function Gutter({ side }) {
+    const to = side === 'right' ? 'right' : 'left';
+    const shade = (a, offset) => ({ offset, color: 'rgb(20,12,4)', opacity: a });
+    const sheen = (a, offset) => ({ offset, color: 'rgb(255,250,240)', opacity: a });
+    return (_jsxs(_Fragment, { children: [_jsx(Gradient, { to: to, stops: [shade(0.5, 0), shade(0.3, 0.015), shade(0.14, 0.04), shade(0.05, 0.08), shade(0, 0.15), shade(0, 0.94), shade(0.07, 1)] }), _jsx(Gradient, { to: to, stops: [sheen(0, 0.06), sheen(0.07, 0.13), sheen(0.02, 0.26), sheen(0, 0.4)] })] }));
+}
+/** Cloth for a cover, with the hinge shadow along the spine. */
+function Cloth({ book, width, hinge, children }) {
+    const theme = COVER_THEMES[book.theme ?? 'classic'];
+    const id = useId().replace(/[^a-zA-Z0-9]/g, '');
+    const shade = (a, offset) => ({ offset, color: '#000', opacity: a });
+    return (_jsxs(View, { style: [styles.page, { width, height: width / PAGE_RATIO, backgroundColor: theme.cloth }], children: [_jsxs(Svg, { style: StyleSheet.absoluteFill, width: "100%", height: "100%", pointerEvents: "none", children: [_jsx(Defs, { children: _jsxs(RadialGradient, { id: `sheen${id}`, cx: "30%", cy: "20%", rx: "45%", ry: "45%", children: [_jsx(Stop, { offset: "0", stopColor: "#fff", stopOpacity: 0.08 }), _jsx(Stop, { offset: "1", stopColor: "#fff", stopOpacity: 0 })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#sheen${id})` })] }), _jsx(Gradient, { to: hinge === 'left' ? 'right' : 'left', style: [styles.hinge, hinge === 'left' ? styles.left : styles.right, { width: width * 0.04 }], stops: [shade(0.35, 0), shade(0.1, 0.5), shade(0, 1)] }), children] }));
+}
+/** The front cover: cloth with the title and an inset photo. */
+export function CoverView({ book, width, showImages = true }) {
+    const color = COVER_THEMES[book.theme ?? 'classic'].ink;
+    const serif = useSerif();
+    const unit = width / 100;
+    return (_jsx(Cloth, { book: book, width: width, hinge: "left", children: _jsxs(View, { style: [styles.panel, { margin: 6 * unit, paddingVertical: 8 * unit, paddingHorizontal: 6 * unit, borderColor: color }], children: [book.kicker ? (_jsx(Text, { style: [styles.kicker, { fontSize: 2.6 * unit, letterSpacing: 0.78 * unit, color }], children: book.kicker.toUpperCase() })) : null, _jsx(Text, { style: [
+                        serif.upright,
+                        styles.center,
+                        { marginTop: 5 * unit, fontSize: 9 * unit, lineHeight: 9.5 * unit, fontWeight: '500', color },
+                    ], children: book.title }), book.cover ? (_jsx(View, { style: [styles.coverPhoto, { marginTop: 7 * unit, borderWidth: 0.8 * unit, borderColor: color }], children: showImages && (_jsx(Image, { source: { uri: book.cover.src }, style: StyleSheet.absoluteFill, resizeMode: "cover", "aria-label": book.cover.alt ?? undefined })) })) : book.subtitle ? (_jsx(Text, { style: [serif.italic, styles.center, { marginTop: 6 * unit, fontSize: 4 * unit, color, opacity: 0.8 }], children: book.subtitle })) : null] }) }));
+}
+export function BackCoverView({ book, width }) {
+    const color = COVER_THEMES[book.theme ?? 'classic'].ink;
+    const unit = width / 100;
+    return (_jsx(Cloth, { book: book, width: width, hinge: "right", children: _jsxs(View, { style: [styles.imprint, { bottom: 10 * unit }], children: [_jsx(Ornament, { size: 9 * unit, color: color }), book.imprint ? (_jsx(Text, { style: [styles.kicker, { marginTop: 2 * unit, fontSize: 2.4 * unit, letterSpacing: 0.72 * unit, color, opacity: 0.6 }], children: book.imprint.toUpperCase() })) : null] }) }));
+}
+/** Inside the front cover: a title page. */
+export function TitlePageView({ book, width, side, }) {
+    const look = usePaper();
+    const serif = useSerif();
+    const unit = width / 100;
+    const credit = [book.author, book.year].filter(Boolean).join(' · ');
+    return (_jsx(Paper, { width: width, side: side, children: _jsxs(View, { style: [styles.fill, styles.centered, { padding: 12 * unit }], children: [_jsx(Ornament, { size: 9 * unit, color: ink(look) }), _jsx(Text, { style: [serif.upright, styles.center, { marginTop: 6 * unit, fontSize: 7.5 * unit, lineHeight: 8.3 * unit, color: ink(look) }], children: book.title }), book.subtitle ? (_jsx(Text, { style: [serif.italic, styles.center, { marginTop: 4 * unit, fontSize: 4 * unit, lineHeight: 5.8 * unit, color: ink(look) }], children: book.subtitle })) : null, _jsx(View, { style: { marginTop: 7 * unit, height: StyleSheet.hairlineWidth, width: 20 * unit, backgroundColor: ink(look, 0.3) } }), credit ? (_jsx(Text, { style: [styles.kicker, { marginTop: 5 * unit, fontSize: 2.6 * unit, letterSpacing: 0.52 * unit, color: ink(look) }], children: credit.toUpperCase() })) : null] }) }));
+}
+/** Inside the back cover, with the book's closing line. */
+export function ColophonView({ book, width, side }) {
+    const look = usePaper();
+    const serif = useSerif();
+    const unit = width / 100;
+    return (_jsx(Paper, { width: width, side: side, children: _jsx(View, { style: [styles.fill, { alignItems: 'center', justifyContent: 'flex-end', padding: 12 * unit }], children: book.colophon ? (_jsx(Text, { style: [serif.italic, styles.center, { fontSize: 3.6 * unit, color: ink(look, 0.9) }], children: book.colophon })) : null }) }));
+}
+export function BlankPageView({ width, side }) {
+    return _jsx(Paper, { width: width, side: side });
+}
+function Ornament({ size, color }) {
+    return (_jsxs(Svg, { viewBox: "0 0 40 40", width: size, height: size, children: [_jsx(Circle, { cx: "20", cy: "20", r: "18.5", fill: "none", stroke: color, strokeOpacity: 0.6 }), _jsx(Path, { d: "M20 9 L 27 20 L 20 31 L 13 20 Z", fill: "none", stroke: color, strokeWidth: 1.4, strokeLinejoin: "round" }), _jsx(Circle, { cx: "20", cy: "20", r: "2.2", fill: color })] }));
+}
+const styles = StyleSheet.create({
+    page: { overflow: 'hidden' },
+    tile: { width: '100%', height: '100%' },
+    fill: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 },
+    flex: { flex: 1 },
+    row: { flex: 1, flexDirection: 'row' },
+    centered: { alignItems: 'center', justifyContent: 'center' },
+    center: { textAlign: 'center' },
+    clip: { overflow: 'hidden' },
+    loose: { boxShadow: '0 2px 6px rgba(0,0,0,0.25)' },
+    empty: { alignItems: 'center', justifyContent: 'center', borderStyle: 'dashed' },
+    overlay: { position: 'absolute', left: 0, right: 0, bottom: 0 },
+    caption: { textAlign: 'center' },
+    number: { position: 'absolute', bottom: 0 },
+    left: { left: 0 },
+    right: { right: 0 },
+    hinge: { position: 'absolute', top: 0, bottom: 0 },
+    panel: { flex: 1, alignItems: 'center', borderWidth: StyleSheet.hairlineWidth },
+    kicker: { textAlign: 'center', opacity: 0.7 },
+    coverPhoto: { width: '100%', flex: 1, maxHeight: '62%', overflow: 'hidden' },
+    imprint: { position: 'absolute', left: 0, right: 0, alignItems: 'center' },
+});

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@toneflix/flipbook-native",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Bind photos into a page-turning album in React Native and Expo: fingertip page turns, prints set into paper, frames and layouts.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/toneflix/flipbook",
+    "directory": "packages/native"
+  },
+  "keywords": [
+    "flipbook",
+    "page turn",
+    "photo book",
+    "react-native",
+    "expo"
+  ],
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "react-native": "./src/index.ts",
+  "source": "./src/index.ts",
+  "files": [
+    "lib",
+    "src",
+    "assets"
+  ],
+  "dependencies": {
+    "@toneflix/flipbook-core": "^0.2.0"
+  },
+  "peerDependencies": {
+    "expo-screen-orientation": "*",
+    "react": ">=18",
+    "react-native": ">=0.74",
+    "react-native-svg": ">=15"
+  },
+  "peerDependenciesMeta": {
+    "expo-screen-orientation": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "react": "19.3.0",
+    "react-native": "0.88.1",
+    "react-native-svg": "^15.16.1",
+    "typescript": "~6.0.3"
+  },
+  "scripts": {
+    "assets": "mkdir -p assets/textures && for f in ../core/textures/*.webp; do cp \"$f\" \"assets/textures/$(basename \"$f\" .webp)@2x.webp\"; done",
+    "build": "pnpm assets && rm -rf lib && tsc -p tsconfig.build.json",
+    "typecheck": "pnpm assets && tsc --noEmit"
+  }
 }