@toneflix/flipbook-native 0.2.0 → 0.2.2

package/README.md

@@ -1,6 +1,6 @@
 # @toneflix/flipbook-native
 
-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.
+An expressive flipbook for creating personalised and interactive reading and photo viewing experiences, for React Native and Expo.
 
 ```bash
 npx expo install @toneflix/flipbook-native react-native-svg expo-screen-orientation
@@ -21,4 +21,4 @@ export function Book({ book }) {
 }
 ```
 
-See the [documentation](https://toneflix.github.io/flipbook/guide/react-native).
+See the [documentation](https://toneflix.github.io/flipbook/frameworks/react-native).

package/lib/Cover.d.ts

@@ -0,0 +1,13 @@
+import { type FlipbookBook } from '@toneflix/flipbook-core';
+export interface CoverViewProps {
+    book: Pick<FlipbookBook, 'title' | 'subtitle' | 'theme' | 'cover' | 'kicker' | 'coverDesign' | 'coverText'>;
+    width: number;
+    showImages?: boolean;
+}
+/** The front cover, laid out by the book's `coverDesign`. */
+export declare function CoverView({ book, width, showImages }: CoverViewProps): import("react").JSX.Element;
+/** The back cover: the same board, with the imprint. */
+export declare function BackCoverView({ book, width }: {
+    book: Pick<FlipbookBook, 'theme' | 'imprint' | 'coverDesign'>;
+    width: number;
+}): import("react").JSX.Element;

package/lib/Cover.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import Svg, { ClipPath, Defs, Ellipse, Image as SvgImage, Path, RadialGradient, Rect, Stop } from 'react-native-svg';
+import { COVER_THEMES, DECO, FLEURON, coverHasText } from '@toneflix/flipbook-core';
+import { Gradient } from './Gradient';
+import { PAPERS, useSerif } from './look';
+import { Ornament, PAGE_RATIO } from './pages';
+const CORNERS = ['tl', 'tr', 'bl', 'br'];
+const MIRROR = {
+    tl: undefined,
+    tr: [{ scaleX: -1 }],
+    bl: [{ scaleY: -1 }],
+    br: [{ scaleX: -1 }, { scaleY: -1 }],
+};
+function Art({ art, color, style }) {
+    return (_jsxs(Svg, { viewBox: art.viewBox, preserveAspectRatio: "none", style: style, pointerEvents: "none", children: [art.strokes.map(({ d, width, opacity = 1 }) => (_jsx(Path, { d: d, fill: "none", stroke: color, strokeWidth: width, strokeOpacity: opacity }, d))), art.fills.map((d) => (_jsx(Path, { d: d, fill: color }, d)))] }));
+}
+/** Gilt rules and a flourish in each corner. */
+function GiltFrame({ unit, color }) {
+    const size = 18 * unit;
+    const at = 3.6 * unit;
+    const place = {
+        tl: { top: at, left: at },
+        tr: { top: at, right: at },
+        bl: { bottom: at, left: at },
+        br: { bottom: at, right: at },
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(View, { pointerEvents: "none", style: [styles.fill, { margin: 5 * unit, borderWidth: 0.35 * unit, borderColor: color, opacity: 0.85 }] }), _jsx(View, { pointerEvents: "none", style: [styles.fill, { margin: 6.6 * unit, borderWidth: 0.15 * unit, borderColor: color, opacity: 0.85 }] }), CORNERS.map((corner) => (_jsx(Art, { art: FLEURON, color: color, style: { position: 'absolute', width: size, height: size, ...place[corner], transform: MIRROR[corner] } }, corner)))] }));
+}
+/** A photo clipped to an oval or an arch, ruled in the ink. */
+function ShapedPhoto({ photo, shape, width, height, unit, color, show, }) {
+    const id = `c${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+    const r = width / 2;
+    const arch = `M0 ${height}V${r}A${r} ${r} 0 0 1 ${width} ${r}V${height}Z`;
+    const outline = shape === 'oval' ? _jsx(Ellipse, { cx: r, cy: height / 2, rx: r - 0.3 * unit, ry: height / 2 - 0.3 * unit }) : _jsx(Path, { d: arch });
+    return (_jsxs(Svg, { width: width, height: height, children: [_jsx(Defs, { children: _jsx(ClipPath, { id: id, children: outline }) }), show ? (_jsx(SvgImage, { href: { uri: photo.src }, width: width, height: height, preserveAspectRatio: "xMidYMid slice", clipPath: `url(#${id})` })) : (_jsx(Rect, { width: width, height: height, fill: color, fillOpacity: 0.15, clipPath: `url(#${id})` })), shape === 'oval' ? (_jsx(Ellipse, { cx: r, cy: height / 2, rx: r - 0.3 * unit, ry: height / 2 - 0.3 * unit, fill: "none", stroke: color, strokeWidth: 0.6 * unit })) : (_jsx(Path, { d: arch, fill: "none", stroke: color, strokeWidth: 1 * unit }))] }));
+}
+const Photo = ({ photo, show }) => show ? _jsx(Image, { source: { uri: photo.src }, style: StyleSheet.absoluteFill, resizeMode: "cover", "aria-label": photo.alt ?? undefined }) : null;
+/** Cover board: cloth, light, the hinge shadow along the spine and a grain finish. */
+function Board({ 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.board, { width, height: width / PAGE_RATIO, backgroundColor: theme.cloth }], children: [children, _jsxs(Svg, { style: StyleSheet.absoluteFill, width: "100%", height: "100%", pointerEvents: "none", children: [_jsxs(Defs, { children: [_jsxs(RadialGradient, { id: `sheen${id}`, cx: "30%", cy: "20%", rx: "45%", ry: "45%", children: [_jsx(Stop, { offset: "0", stopColor: "#fff", stopOpacity: 0.1 }), _jsx(Stop, { offset: "1", stopColor: "#fff", stopOpacity: 0 })] }), _jsxs(RadialGradient, { id: `edge${id}`, cx: "50%", cy: "50%", rx: "70%", ry: "70%", children: [_jsx(Stop, { offset: "0.6", stopColor: "#000", stopOpacity: 0 }), _jsx(Stop, { offset: "1", stopColor: "#000", stopOpacity: 0.25 })] })] }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#sheen${id})` }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#edge${id})` })] }), _jsx(Image, { source: PAPERS.ivory.grain, resizeMode: "repeat", pointerEvents: "none", style: [StyleSheet.absoluteFill, { opacity: 0.25, mixBlendMode: 'soft-light' }] }), _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)] })] }));
+}
+/** The front cover, laid out by the book's `coverDesign`. */
+export function CoverView({ book, width, showImages = true }) {
+    const color = COVER_THEMES[book.theme ?? 'classic'].ink;
+    const serif = useSerif();
+    const unit = width / 100;
+    const text = coverHasText(book);
+    const stamped = {
+        textShadowColor: 'rgba(0,0,0,0.35)',
+        textShadowOffset: { width: 0, height: 0.15 * unit },
+        textShadowRadius: 0,
+    };
+    const kicker = (ink = color) => book.kicker ? (_jsx(Text, { style: [styles.kicker, { fontSize: 2.6 * unit, letterSpacing: 0.78 * unit, color: ink }], children: book.kicker.toUpperCase() })) : null;
+    const title = (size, ink = color, extra) => (_jsx(Text, { style: [
+            serif.upright,
+            styles.center,
+            stamped,
+            { marginTop: 4 * unit, fontSize: size * unit, lineHeight: size * 1.08 * unit, fontWeight: '500', color: ink },
+            extra,
+        ], children: book.title }));
+    const subtitle = (size = 4, ink = color) => book.subtitle ? (_jsx(Text, { style: [
+            serif.italic,
+            styles.center,
+            { marginTop: 3 * unit, fontSize: size * unit, lineHeight: size * 1.35 * unit, color: ink, opacity: 0.85 },
+        ], children: book.subtitle })) : null;
+    const designs = {
+        classic: () => (_jsxs(View, { style: [styles.panel, { margin: 6 * unit, paddingVertical: 8 * unit, paddingHorizontal: 6 * unit, borderColor: color }], children: [text && kicker(), text && title(9), book.cover ? (_jsx(View, { style: [styles.coverPhoto, { marginTop: 7 * unit, borderWidth: 0.8 * unit, borderColor: color }], children: _jsx(Photo, { photo: book.cover, show: showImages }) })) : (text && subtitle())] })),
+        gilt: () => (_jsxs(_Fragment, { children: [_jsx(GiltFrame, { unit: unit, color: color }), _jsxs(View, { style: [styles.stack, { top: 14 * unit, bottom: 14 * unit, left: 12 * unit, right: 12 * unit }], children: [text && kicker(), text && title(8), book.cover && (_jsx(View, { style: { marginTop: 6 * unit }, children: _jsx(ShapedPhoto, { photo: book.cover, shape: "oval", width: 52 * unit, height: 64 * unit, unit: unit, color: color, show: showImages }) })), text && subtitle()] })] })),
+        window: () => (_jsxs(_Fragment, { children: [_jsxs(View, { style: [styles.window, { top: 10 * unit, left: 12 * unit, right: 12 * unit, height: 76 * unit, borderRadius: 0.6 * unit }], children: [book.cover ? (_jsx(Photo, { photo: book.cover, show: showImages })) : (_jsx(View, { style: [styles.fill, styles.centered], children: _jsx(Ornament, { size: 16 * unit, color: color }) })), _jsx(Gradient, { to: "bottom", style: [styles.edge, { top: 0, height: 4 * unit }], stops: [
+                                { offset: 0, color: '#000', opacity: 0.55 },
+                                { offset: 1, color: '#000', opacity: 0 },
+                            ] }), _jsx(Gradient, { to: "right", style: [styles.edgeV, { left: 0, width: 2 * unit }], stops: [
+                                { offset: 0, color: '#000', opacity: 0.3 },
+                                { offset: 1, color: '#000', opacity: 0 },
+                            ] }), _jsx(Gradient, { to: "left", style: [styles.edgeV, { right: 0, width: 2 * unit }], stops: [
+                                { offset: 0, color: '#000', opacity: 0.25 },
+                                { offset: 1, color: '#000', opacity: 0 },
+                            ] })] }), text && (_jsxs(View, { style: [styles.stack, { top: 90 * unit, bottom: 8 * unit, left: 10 * unit, right: 10 * unit }], children: [kicker(), title(7.5, color, { textShadowColor: 'rgba(0,0,0,0.45)', textShadowOffset: { width: 0, height: -0.15 * unit } }), subtitle(3.4)] }))] })),
+        label: () => (_jsxs(_Fragment, { children: [book.cover && (_jsxs(View, { style: [styles.print, { top: 11 * unit, left: 16 * unit, right: 16 * unit, height: 62 * unit, padding: 2.4 * unit }], children: [_jsx(View, { style: [styles.flex, styles.clip], children: _jsx(Photo, { photo: book.cover, show: showImages }) }), _jsx(Svg, { style: StyleSheet.absoluteFill, viewBox: "0 0 100 100", preserveAspectRatio: "none", pointerEvents: "none", children: _jsx(Path, { d: "M0 0H9L0 9Z M100 0V9L91 0Z M0 100V91L9 100Z M100 100H91L100 91Z", fill: "#1f1b18" }) })] })), text && (_jsxs(View, { style: [styles.label, { top: (book.cover ? 84 : 44) * unit, left: 18 * unit, right: 18 * unit, padding: 4 * unit }], children: [_jsx(View, { pointerEvents: "none", style: [styles.fill, { margin: 1.2 * unit, borderWidth: 0.2 * unit, borderColor: 'rgba(60,45,30,0.5)' }] }), kicker('#3a2f25'), title(6.4, '#3a2f25', { marginTop: 1 * unit, textShadowColor: 'transparent' }), subtitle(3, '#3a2f25')] }))] })),
+        deco: () => (_jsxs(_Fragment, { children: [_jsx(Art, { art: DECO, color: color, style: StyleSheet.absoluteFill }), _jsxs(View, { style: [styles.stack, { top: 17 * unit, bottom: 10 * unit, left: 14 * unit, right: 14 * unit, justifyContent: 'flex-start' }], children: [text && kicker(), book.cover && (_jsx(View, { style: { marginTop: 4 * unit }, children: _jsx(ShapedPhoto, { photo: book.cover, shape: "arch", width: 56 * unit, height: 62 * unit, unit: unit, color: color, show: showImages }) })), text && title(6.6, color, { marginTop: 7 * unit, fontWeight: '400', letterSpacing: 0.8 * unit, textTransform: 'uppercase' }), text && subtitle(3.4)] })] })),
+        image: () => (_jsxs(_Fragment, { children: [book.cover && _jsx(Photo, { photo: book.cover, show: showImages }), book.cover && (_jsx(View, { pointerEvents: "none", style: [StyleSheet.absoluteFill, { backgroundColor: color, opacity: 0.18, mixBlendMode: 'soft-light' }] })), text &&
+                    (book.cover ? (_jsxs(View, { style: [styles.caption, { paddingTop: 26 * unit, paddingHorizontal: 10 * unit, paddingBottom: 10 * unit }], children: [_jsx(Gradient, { to: "top", stops: [
+                                    { offset: 0, color: '#000', opacity: 0.65 },
+                                    { offset: 0.55, color: '#000', opacity: 0.25 },
+                                    { offset: 1, color: '#000', opacity: 0 },
+                                ] }), kicker('#fff'), title(9, '#fff', { textShadowColor: 'rgba(0,0,0,0.5)', textShadowRadius: 1.2 * unit }), subtitle(4, '#fff')] })) : (_jsxs(View, { style: [styles.fill, styles.centered, { padding: 10 * unit }], children: [kicker(), title(9), subtitle()] })))] })),
+    };
+    return (_jsx(Board, { book: book, width: width, hinge: "left", children: designs[book.coverDesign ?? 'classic']() }));
+}
+/** The back cover: the same board, with the imprint. */
+export function BackCoverView({ book, width }) {
+    const color = COVER_THEMES[book.theme ?? 'classic'].ink;
+    const unit = width / 100;
+    return (_jsxs(Board, { book: book, width: width, hinge: "right", children: [book.coverDesign === 'gilt' && _jsx(GiltFrame, { unit: unit, color: color }), _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] })] }));
+}
+const styles = StyleSheet.create({
+    board: { overflow: 'hidden' },
+    fill: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 },
+    flex: { flex: 1 },
+    clip: { overflow: 'hidden' },
+    centered: { alignItems: 'center', justifyContent: 'center' },
+    center: { textAlign: 'center' },
+    hinge: { position: 'absolute', top: 0, bottom: 0 },
+    left: { left: 0 },
+    right: { right: 0 },
+    panel: { flex: 1, alignItems: 'center', borderWidth: StyleSheet.hairlineWidth },
+    kicker: { textAlign: 'center', opacity: 0.7 },
+    coverPhoto: { width: '100%', flex: 1, maxHeight: '62%', overflow: 'hidden' },
+    stack: { position: 'absolute', alignItems: 'center', justifyContent: 'center' },
+    window: { position: 'absolute', overflow: 'hidden', backgroundColor: 'rgba(0,0,0,0.12)' },
+    edge: { position: 'absolute', left: 0, right: 0 },
+    edgeV: { position: 'absolute', top: 0, bottom: 0 },
+    print: { position: 'absolute', backgroundColor: '#f7f2e7', transform: [{ rotate: '-2.5deg' }], boxShadow: '0 3px 8px rgba(0,0,0,0.4)' },
+    label: { position: 'absolute', alignItems: 'center', backgroundColor: '#f4eddc', boxShadow: '0 1px 4px rgba(0,0,0,0.3)' },
+    caption: { position: 'absolute', left: 0, right: 0, bottom: 0, alignItems: 'center' },
+    imprint: { position: 'absolute', left: 0, right: 0, alignItems: 'center' },
+});

package/lib/Flipbook.js

@@ -6,7 +6,8 @@ import { BookLayout, COVER_THEMES, DEFAULT_LABELS, FlipbookReader, } from '@tone
 import { FoldLayout } from './geometry';
 import { Gradient } from './Gradient';
 import { BookLookProvider } from './look';
-import { BackCoverView, BlankPageView, ColophonView, CoverView, PAGE_RATIO, PageView, TitlePageView } from './pages';
+import { BackCoverView, CoverView } from './Cover';
+import { BlankPageView, ColophonView, 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, }) {

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 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 { PageView, Paper, TitlePageView, ColophonView, BlankPageView, PAGE_RATIO, type PageViewProps } from './pages';
+export { CoverView, BackCoverView, type CoverViewProps } from './Cover';
 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';

package/lib/index.js

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

package/lib/look.js

@@ -1,7 +1,7 @@
 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 fine = { texture: require('../assets/textures/paper-fine.webp'), grain: require('../assets/textures/grain-fine.webp') };
 const ivory = {
     background: '#fdf9f0',
     ink: [61, 55, 47],
@@ -25,9 +25,9 @@ export const PAPERS = {
         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'),
+        texture: require('../assets/textures/paper-kraft.webp'),
         textureOpacity: 0.45,
-        grain: require('../assets/textures/grain-kraft@2x.webp'),
+        grain: require('../assets/textures/grain-kraft.webp'),
         grainOpacity: 0.35,
         light: 'rgba(255,255,255,0.18)',
         vignette: 'rgba(80,50,20,0.12)',
@@ -39,9 +39,9 @@ export const PAPERS = {
         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'),
+        texture: require('../assets/textures/paper-charcoal.webp'),
         textureOpacity: 0.25,
-        grain: require('../assets/textures/grain-charcoal@2x.webp'),
+        grain: require('../assets/textures/grain-charcoal.webp'),
         grainOpacity: 0.22,
         light: 'rgba(255,255,255,0.05)',
         vignette: 'rgba(0,0,0,0.25)',

package/lib/pages.d.ts

@@ -29,17 +29,6 @@ export declare function Paper({ width, side, children, style }: {
     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'>;
@@ -56,4 +45,8 @@ export declare function BlankPageView({ width, side }: {
     width: number;
     side?: Side;
 }): import("react").JSX.Element;
+export declare function Ornament({ size, color }: {
+    size: number;
+    color: string;
+}): import("react").JSX.Element;
 export {};

package/lib/pages.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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 { PLACED_LAYOUTS, photoFrame } from '@toneflix/flipbook-core';
 import { Gradient } from './Gradient';
 import { ink, useBookLook, usePaper, useSerif } from './look';
 import { PrintedPhoto } from './PrintedPhoto';
@@ -67,29 +67,6 @@ function Gutter({ side }) {
     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();
@@ -108,7 +85,7 @@ export function ColophonView({ book, width, side }) {
 export function BlankPageView({ width, side }) {
     return _jsx(Paper, { width: width, side: side });
 }
-function Ornament({ size, color }) {
+export 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({

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@toneflix/flipbook-native",
-  "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.",
+  "version": "0.2.2",
+  "description": "An expressive flipbook for creating personalised and interactive reading and photo viewing experiences, for React Native and Expo.",
   "license": "MIT",
+  "homepage": "https://toneflix.github.io/flipbook/frameworks/react-native",
+  "bugs": {
+    "url": "https://github.com/toneflix/flipbook/issues"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/toneflix/flipbook",
@@ -25,7 +29,7 @@
     "assets"
   ],
   "dependencies": {
-    "@toneflix/flipbook-core": "^0.2.0"
+    "@toneflix/flipbook-core": "^0.2.2"
   },
   "peerDependencies": {
     "expo-screen-orientation": "*",

package/src/Cover.tsx

@@ -0,0 +1,416 @@
+import { useId, type ReactNode } from 'react'
+import { Image, StyleSheet, Text, View, type TextStyle, type ViewStyle } from 'react-native'
+import Svg, { ClipPath, Defs, Ellipse, Image as SvgImage, Path, RadialGradient, Rect, Stop } from 'react-native-svg'
+import { COVER_THEMES, DECO, FLEURON, coverHasText, type CoverArt, type FlipbookBook, type FlipbookPhoto } from '@toneflix/flipbook-core'
+import { Gradient } from './Gradient'
+import { PAPERS, useSerif } from './look'
+import { Ornament, PAGE_RATIO } from './pages'
+
+type Side = 'left' | 'right'
+type Corner = 'tl' | 'tr' | 'bl' | 'br'
+
+const CORNERS: Corner[] = ['tl', 'tr', 'bl', 'br']
+const MIRROR: Record<Corner, ViewStyle['transform']> = {
+  tl: undefined,
+  tr: [{ scaleX: -1 }],
+  bl: [{ scaleY: -1 }],
+  br: [{ scaleX: -1 }, { scaleY: -1 }],
+}
+
+function Art({ art, color, style }: { art: CoverArt; color: string; style: ViewStyle }) {
+  return (
+    <Svg viewBox={art.viewBox} preserveAspectRatio="none" style={style} pointerEvents="none">
+      {art.strokes.map(({ d, width, opacity = 1 }) => (
+        <Path key={d} d={d} fill="none" stroke={color} strokeWidth={width} strokeOpacity={opacity} />
+      ))}
+      {art.fills.map((d) => (
+        <Path key={d} d={d} fill={color} />
+      ))}
+    </Svg>
+  )
+}
+
+/** Gilt rules and a flourish in each corner. */
+function GiltFrame({ unit, color }: { unit: number; color: string }) {
+  const size = 18 * unit
+  const at = 3.6 * unit
+  const place: Record<Corner, ViewStyle> = {
+    tl: { top: at, left: at },
+    tr: { top: at, right: at },
+    bl: { bottom: at, left: at },
+    br: { bottom: at, right: at },
+  }
+
+  return (
+    <>
+      <View pointerEvents="none" style={[styles.fill, { margin: 5 * unit, borderWidth: 0.35 * unit, borderColor: color, opacity: 0.85 }]} />
+      <View
+        pointerEvents="none"
+        style={[styles.fill, { margin: 6.6 * unit, borderWidth: 0.15 * unit, borderColor: color, opacity: 0.85 }]}
+      />
+      {CORNERS.map((corner) => (
+        <Art
+          key={corner}
+          art={FLEURON}
+          color={color}
+          style={{ position: 'absolute', width: size, height: size, ...place[corner], transform: MIRROR[corner] }}
+        />
+      ))}
+    </>
+  )
+}
+
+/** A photo clipped to an oval or an arch, ruled in the ink. */
+function ShapedPhoto({
+  photo,
+  shape,
+  width,
+  height,
+  unit,
+  color,
+  show,
+}: {
+  photo: FlipbookPhoto
+  shape: 'oval' | 'arch'
+  width: number
+  height: number
+  unit: number
+  color: string
+  show: boolean
+}) {
+  const id = `c${useId().replace(/[^a-zA-Z0-9]/g, '')}`
+  const r = width / 2
+  const arch = `M0 ${height}V${r}A${r} ${r} 0 0 1 ${width} ${r}V${height}Z`
+  const outline = shape === 'oval' ? <Ellipse cx={r} cy={height / 2} rx={r - 0.3 * unit} ry={height / 2 - 0.3 * unit} /> : <Path d={arch} />
+
+  return (
+    <Svg width={width} height={height}>
+      <Defs>
+        <ClipPath id={id}>{outline}</ClipPath>
+      </Defs>
+      {show ? (
+        <SvgImage href={{ uri: photo.src }} width={width} height={height} preserveAspectRatio="xMidYMid slice" clipPath={`url(#${id})`} />
+      ) : (
+        <Rect width={width} height={height} fill={color} fillOpacity={0.15} clipPath={`url(#${id})`} />
+      )}
+      {shape === 'oval' ? (
+        <Ellipse
+          cx={r}
+          cy={height / 2}
+          rx={r - 0.3 * unit}
+          ry={height / 2 - 0.3 * unit}
+          fill="none"
+          stroke={color}
+          strokeWidth={0.6 * unit}
+        />
+      ) : (
+        <Path d={arch} fill="none" stroke={color} strokeWidth={1 * unit} />
+      )}
+    </Svg>
+  )
+}
+
+const Photo = ({ photo, show }: { photo: FlipbookPhoto; show: boolean }) =>
+  show ? <Image source={{ uri: photo.src }} style={StyleSheet.absoluteFill} resizeMode="cover" aria-label={photo.alt ?? undefined} /> : null
+
+/** Cover board: cloth, light, the hinge shadow along the spine and a grain finish. */
+function Board({ book, width, hinge, children }: { book: Pick<FlipbookBook, 'theme'>; width: number; hinge: Side; children?: ReactNode }) {
+  const theme = COVER_THEMES[book.theme ?? 'classic']
+  const id = useId().replace(/[^a-zA-Z0-9]/g, '')
+  const shade = (a: number, offset: number) => ({ offset, color: '#000', opacity: a })
+
+  return (
+    <View style={[styles.board, { width, height: width / PAGE_RATIO, backgroundColor: theme.cloth }]}>
+      {children}
+      <Svg style={StyleSheet.absoluteFill} width="100%" height="100%" pointerEvents="none">
+        <Defs>
+          <RadialGradient id={`sheen${id}`} cx="30%" cy="20%" rx="45%" ry="45%">
+            <Stop offset="0" stopColor="#fff" stopOpacity={0.1} />
+            <Stop offset="1" stopColor="#fff" stopOpacity={0} />
+          </RadialGradient>
+          <RadialGradient id={`edge${id}`} cx="50%" cy="50%" rx="70%" ry="70%">
+            <Stop offset="0.6" stopColor="#000" stopOpacity={0} />
+            <Stop offset="1" stopColor="#000" stopOpacity={0.25} />
+          </RadialGradient>
+        </Defs>
+        <Rect width="100%" height="100%" fill={`url(#sheen${id})`} />
+        <Rect width="100%" height="100%" fill={`url(#edge${id})`} />
+      </Svg>
+      <Image
+        source={PAPERS.ivory.grain}
+        resizeMode="repeat"
+        pointerEvents="none"
+        style={[StyleSheet.absoluteFill, { opacity: 0.25, mixBlendMode: 'soft-light' }]}
+      />
+      <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)]}
+      />
+    </View>
+  )
+}
+
+export interface CoverViewProps {
+  book: Pick<FlipbookBook, 'title' | 'subtitle' | 'theme' | 'cover' | 'kicker' | 'coverDesign' | 'coverText'>
+  width: number
+  showImages?: boolean
+}
+
+/** The front cover, laid out by the book's `coverDesign`. */
+export function CoverView({ book, width, showImages = true }: CoverViewProps) {
+  const color = COVER_THEMES[book.theme ?? 'classic'].ink
+  const serif = useSerif()
+  const unit = width / 100
+  const text = coverHasText(book)
+  const stamped: TextStyle = {
+    textShadowColor: 'rgba(0,0,0,0.35)',
+    textShadowOffset: { width: 0, height: 0.15 * unit },
+    textShadowRadius: 0,
+  }
+
+  const kicker = (ink = color) =>
+    book.kicker ? (
+      <Text style={[styles.kicker, { fontSize: 2.6 * unit, letterSpacing: 0.78 * unit, color: ink }]}>{book.kicker.toUpperCase()}</Text>
+    ) : null
+  const title = (size: number, ink = color, extra?: TextStyle) => (
+    <Text
+      style={[
+        serif.upright,
+        styles.center,
+        stamped,
+        { marginTop: 4 * unit, fontSize: size * unit, lineHeight: size * 1.08 * unit, fontWeight: '500', color: ink },
+        extra,
+      ]}
+    >
+      {book.title}
+    </Text>
+  )
+  const subtitle = (size = 4, ink = color) =>
+    book.subtitle ? (
+      <Text
+        style={[
+          serif.italic,
+          styles.center,
+          { marginTop: 3 * unit, fontSize: size * unit, lineHeight: size * 1.35 * unit, color: ink, opacity: 0.85 },
+        ]}
+      >
+        {book.subtitle}
+      </Text>
+    ) : null
+
+  const designs = {
+    classic: () => (
+      <View style={[styles.panel, { margin: 6 * unit, paddingVertical: 8 * unit, paddingHorizontal: 6 * unit, borderColor: color }]}>
+        {text && kicker()}
+        {text && title(9)}
+        {book.cover ? (
+          <View style={[styles.coverPhoto, { marginTop: 7 * unit, borderWidth: 0.8 * unit, borderColor: color }]}>
+            <Photo photo={book.cover} show={showImages} />
+          </View>
+        ) : (
+          text && subtitle()
+        )}
+      </View>
+    ),
+    gilt: () => (
+      <>
+        <GiltFrame unit={unit} color={color} />
+        <View style={[styles.stack, { top: 14 * unit, bottom: 14 * unit, left: 12 * unit, right: 12 * unit }]}>
+          {text && kicker()}
+          {text && title(8)}
+          {book.cover && (
+            <View style={{ marginTop: 6 * unit }}>
+              <ShapedPhoto
+                photo={book.cover}
+                shape="oval"
+                width={52 * unit}
+                height={64 * unit}
+                unit={unit}
+                color={color}
+                show={showImages}
+              />
+            </View>
+          )}
+          {text && subtitle()}
+        </View>
+      </>
+    ),
+    window: () => (
+      <>
+        <View style={[styles.window, { top: 10 * unit, left: 12 * unit, right: 12 * unit, height: 76 * unit, borderRadius: 0.6 * unit }]}>
+          {book.cover ? (
+            <Photo photo={book.cover} show={showImages} />
+          ) : (
+            <View style={[styles.fill, styles.centered]}>
+              <Ornament size={16 * unit} color={color} />
+            </View>
+          )}
+          <Gradient
+            to="bottom"
+            style={[styles.edge, { top: 0, height: 4 * unit }]}
+            stops={[
+              { offset: 0, color: '#000', opacity: 0.55 },
+              { offset: 1, color: '#000', opacity: 0 },
+            ]}
+          />
+          <Gradient
+            to="right"
+            style={[styles.edgeV, { left: 0, width: 2 * unit }]}
+            stops={[
+              { offset: 0, color: '#000', opacity: 0.3 },
+              { offset: 1, color: '#000', opacity: 0 },
+            ]}
+          />
+          <Gradient
+            to="left"
+            style={[styles.edgeV, { right: 0, width: 2 * unit }]}
+            stops={[
+              { offset: 0, color: '#000', opacity: 0.25 },
+              { offset: 1, color: '#000', opacity: 0 },
+            ]}
+          />
+        </View>
+        {text && (
+          <View style={[styles.stack, { top: 90 * unit, bottom: 8 * unit, left: 10 * unit, right: 10 * unit }]}>
+            {kicker()}
+            {title(7.5, color, { textShadowColor: 'rgba(0,0,0,0.45)', textShadowOffset: { width: 0, height: -0.15 * unit } })}
+            {subtitle(3.4)}
+          </View>
+        )}
+      </>
+    ),
+    label: () => (
+      <>
+        {book.cover && (
+          <View style={[styles.print, { top: 11 * unit, left: 16 * unit, right: 16 * unit, height: 62 * unit, padding: 2.4 * unit }]}>
+            <View style={[styles.flex, styles.clip]}>
+              <Photo photo={book.cover} show={showImages} />
+            </View>
+            <Svg style={StyleSheet.absoluteFill} viewBox="0 0 100 100" preserveAspectRatio="none" pointerEvents="none">
+              <Path d="M0 0H9L0 9Z M100 0V9L91 0Z M0 100V91L9 100Z M100 100H91L100 91Z" fill="#1f1b18" />
+            </Svg>
+          </View>
+        )}
+        {text && (
+          <View style={[styles.label, { top: (book.cover ? 84 : 44) * unit, left: 18 * unit, right: 18 * unit, padding: 4 * unit }]}>
+            <View
+              pointerEvents="none"
+              style={[styles.fill, { margin: 1.2 * unit, borderWidth: 0.2 * unit, borderColor: 'rgba(60,45,30,0.5)' }]}
+            />
+            {kicker('#3a2f25')}
+            {title(6.4, '#3a2f25', { marginTop: 1 * unit, textShadowColor: 'transparent' })}
+            {subtitle(3, '#3a2f25')}
+          </View>
+        )}
+      </>
+    ),
+    deco: () => (
+      <>
+        <Art art={DECO} color={color} style={StyleSheet.absoluteFill as ViewStyle} />
+        <View
+          style={[styles.stack, { top: 17 * unit, bottom: 10 * unit, left: 14 * unit, right: 14 * unit, justifyContent: 'flex-start' }]}
+        >
+          {text && kicker()}
+          {book.cover && (
+            <View style={{ marginTop: 4 * unit }}>
+              <ShapedPhoto
+                photo={book.cover}
+                shape="arch"
+                width={56 * unit}
+                height={62 * unit}
+                unit={unit}
+                color={color}
+                show={showImages}
+              />
+            </View>
+          )}
+          {text && title(6.6, color, { marginTop: 7 * unit, fontWeight: '400', letterSpacing: 0.8 * unit, textTransform: 'uppercase' })}
+          {text && subtitle(3.4)}
+        </View>
+      </>
+    ),
+    image: () => (
+      <>
+        {book.cover && <Photo photo={book.cover} show={showImages} />}
+        {book.cover && (
+          <View
+            pointerEvents="none"
+            style={[StyleSheet.absoluteFill, { backgroundColor: color, opacity: 0.18, mixBlendMode: 'soft-light' }]}
+          />
+        )}
+        {text &&
+          (book.cover ? (
+            <View style={[styles.caption, { paddingTop: 26 * unit, paddingHorizontal: 10 * unit, paddingBottom: 10 * unit }]}>
+              <Gradient
+                to="top"
+                stops={[
+                  { offset: 0, color: '#000', opacity: 0.65 },
+                  { offset: 0.55, color: '#000', opacity: 0.25 },
+                  { offset: 1, color: '#000', opacity: 0 },
+                ]}
+              />
+              {kicker('#fff')}
+              {title(9, '#fff', { textShadowColor: 'rgba(0,0,0,0.5)', textShadowRadius: 1.2 * unit })}
+              {subtitle(4, '#fff')}
+            </View>
+          ) : (
+            <View style={[styles.fill, styles.centered, { padding: 10 * unit }]}>
+              {kicker()}
+              {title(9)}
+              {subtitle()}
+            </View>
+          ))}
+      </>
+    ),
+  }
+
+  return (
+    <Board book={book} width={width} hinge="left">
+      {designs[book.coverDesign ?? 'classic']()}
+    </Board>
+  )
+}
+
+/** The back cover: the same board, with the imprint. */
+export function BackCoverView({ book, width }: { book: Pick<FlipbookBook, 'theme' | 'imprint' | 'coverDesign'>; width: number }) {
+  const color = COVER_THEMES[book.theme ?? 'classic'].ink
+  const unit = width / 100
+
+  return (
+    <Board book={book} width={width} hinge="right">
+      {book.coverDesign === 'gilt' && <GiltFrame unit={unit} color={color} />}
+      <View style={[styles.imprint, { bottom: 10 * unit }]}>
+        <Ornament size={9 * unit} color={color} />
+        {book.imprint ? (
+          <Text style={[styles.kicker, { marginTop: 2 * unit, fontSize: 2.4 * unit, letterSpacing: 0.72 * unit, color, opacity: 0.6 }]}>
+            {book.imprint.toUpperCase()}
+          </Text>
+        ) : null}
+      </View>
+    </Board>
+  )
+}
+
+const styles = StyleSheet.create({
+  board: { overflow: 'hidden' },
+  fill: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 },
+  flex: { flex: 1 },
+  clip: { overflow: 'hidden' },
+  centered: { alignItems: 'center', justifyContent: 'center' },
+  center: { textAlign: 'center' },
+  hinge: { position: 'absolute', top: 0, bottom: 0 },
+  left: { left: 0 },
+  right: { right: 0 },
+  panel: { flex: 1, alignItems: 'center', borderWidth: StyleSheet.hairlineWidth },
+  kicker: { textAlign: 'center', opacity: 0.7 },
+  coverPhoto: { width: '100%', flex: 1, maxHeight: '62%', overflow: 'hidden' },
+  stack: { position: 'absolute', alignItems: 'center', justifyContent: 'center' },
+  window: { position: 'absolute', overflow: 'hidden', backgroundColor: 'rgba(0,0,0,0.12)' },
+  edge: { position: 'absolute', left: 0, right: 0 },
+  edgeV: { position: 'absolute', top: 0, bottom: 0 },
+  print: { position: 'absolute', backgroundColor: '#f7f2e7', transform: [{ rotate: '-2.5deg' }], boxShadow: '0 3px 8px rgba(0,0,0,0.4)' },
+  label: { position: 'absolute', alignItems: 'center', backgroundColor: '#f4eddc', boxShadow: '0 1px 4px rgba(0,0,0,0.3)' },
+  caption: { position: 'absolute', left: 0, right: 0, bottom: 0, alignItems: 'center' },
+  imprint: { position: 'absolute', left: 0, right: 0, alignItems: 'center' },
+})

package/src/Flipbook.tsx

@@ -41,7 +41,8 @@ import {
 import { FoldLayout, type Band, type Role } from './geometry'
 import { Gradient } from './Gradient'
 import { BookLookProvider, type BookFonts } from './look'
-import { BackCoverView, BlankPageView, ColophonView, CoverView, PAGE_RATIO, PageView, TitlePageView } from './pages'
+import { BackCoverView, CoverView } from './Cover'
+import { BlankPageView, ColophonView, PAGE_RATIO, PageView, TitlePageView } from './pages'
 import { lockLandscape } from './orientation'
 
 export interface FlipbookPlace {

package/src/index.ts

@@ -1,17 +1,7 @@
 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 { PageView, Paper, TitlePageView, ColophonView, BlankPageView, PAGE_RATIO, type PageViewProps } from './pages'
+export { CoverView, BackCoverView, type CoverViewProps } from './Cover'
 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'

package/src/look.tsx

@@ -20,7 +20,7 @@ export interface PaperLook {
   vignette: string
 }
 
-const fine = { texture: require('../assets/textures/paper-fine@2x.webp'), grain: require('../assets/textures/grain-fine@2x.webp') }
+const fine = { texture: require('../assets/textures/paper-fine.webp'), grain: require('../assets/textures/grain-fine.webp') }
 
 const ivory: PaperLook = {
   background: '#fdf9f0',
@@ -46,9 +46,9 @@ export const PAPERS: Record<PaperColor, PaperLook> = {
     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'),
+    texture: require('../assets/textures/paper-kraft.webp'),
     textureOpacity: 0.45,
-    grain: require('../assets/textures/grain-kraft@2x.webp'),
+    grain: require('../assets/textures/grain-kraft.webp'),
     grainOpacity: 0.35,
     light: 'rgba(255,255,255,0.18)',
     vignette: 'rgba(80,50,20,0.12)',
@@ -60,9 +60,9 @@ export const PAPERS: Record<PaperColor, PaperLook> = {
     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'),
+    texture: require('../assets/textures/paper-charcoal.webp'),
     textureOpacity: 0.25,
-    grain: require('../assets/textures/grain-charcoal@2x.webp'),
+    grain: require('../assets/textures/grain-charcoal.webp'),
     grainOpacity: 0.22,
     light: 'rgba(255,255,255,0.05)',
     vignette: 'rgba(0,0,0,0.25)',

package/src/pages.tsx

@@ -1,7 +1,7 @@
 import { useId, type ReactNode } from 'react'
 import { Image, Pressable, StyleSheet, Text, View, type ViewStyle } from 'react-native'
 import Svg, { Circle, Defs, Path, RadialGradient, Rect, Stop } from 'react-native-svg'
-import { COVER_THEMES, PLACED_LAYOUTS, photoFrame, type FlipbookBook, type FlipbookPage, type PageBox } from '@toneflix/flipbook-core'
+import { PLACED_LAYOUTS, photoFrame, type FlipbookBook, type FlipbookPage, type PageBox } from '@toneflix/flipbook-core'
 import { Gradient } from './Gradient'
 import { ink, useBookLook, usePaper, useSerif, type PaperLook } from './look'
 import { PrintedPhoto } from './PrintedPhoto'
@@ -250,99 +250,6 @@ function Gutter({ side }: { side: Side }) {
   )
 }
 
-/** Cloth for a cover, with the hinge shadow along the spine. */
-function Cloth({ book, width, hinge, children }: { book: Pick<FlipbookBook, 'theme'>; width: number; hinge: Side; children?: ReactNode }) {
-  const theme = COVER_THEMES[book.theme ?? 'classic']
-  const id = useId().replace(/[^a-zA-Z0-9]/g, '')
-  const shade = (a: number, offset: number) => ({ offset, color: '#000', opacity: a })
-
-  return (
-    <View style={[styles.page, { width, height: width / PAGE_RATIO, backgroundColor: theme.cloth }]}>
-      <Svg style={StyleSheet.absoluteFill} width="100%" height="100%" pointerEvents="none">
-        <Defs>
-          <RadialGradient id={`sheen${id}`} cx="30%" cy="20%" rx="45%" ry="45%">
-            <Stop offset="0" stopColor="#fff" stopOpacity={0.08} />
-            <Stop offset="1" stopColor="#fff" stopOpacity={0} />
-          </RadialGradient>
-        </Defs>
-        <Rect width="100%" height="100%" fill={`url(#sheen${id})`} />
-      </Svg>
-      <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}
-    </View>
-  )
-}
-
-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 function CoverView({ book, width, showImages = true }: CoverViewProps) {
-  const color = COVER_THEMES[book.theme ?? 'classic'].ink
-  const serif = useSerif()
-  const unit = width / 100
-
-  return (
-    <Cloth book={book} width={width} hinge="left">
-      <View style={[styles.panel, { margin: 6 * unit, paddingVertical: 8 * unit, paddingHorizontal: 6 * unit, borderColor: color }]}>
-        {book.kicker ? (
-          <Text style={[styles.kicker, { fontSize: 2.6 * unit, letterSpacing: 0.78 * unit, color }]}>{book.kicker.toUpperCase()}</Text>
-        ) : null}
-        <Text
-          style={[
-            serif.upright,
-            styles.center,
-            { marginTop: 5 * unit, fontSize: 9 * unit, lineHeight: 9.5 * unit, fontWeight: '500', color },
-          ]}
-        >
-          {book.title}
-        </Text>
-        {book.cover ? (
-          <View style={[styles.coverPhoto, { marginTop: 7 * unit, borderWidth: 0.8 * unit, borderColor: color }]}>
-            {showImages && (
-              <Image
-                source={{ uri: book.cover.src }}
-                style={StyleSheet.absoluteFill}
-                resizeMode="cover"
-                aria-label={book.cover.alt ?? undefined}
-              />
-            )}
-          </View>
-        ) : book.subtitle ? (
-          <Text style={[serif.italic, styles.center, { marginTop: 6 * unit, fontSize: 4 * unit, color, opacity: 0.8 }]}>
-            {book.subtitle}
-          </Text>
-        ) : null}
-      </View>
-    </Cloth>
-  )
-}
-
-export function BackCoverView({ book, width }: { book: Pick<FlipbookBook, 'theme' | 'imprint'>; width: number }) {
-  const color = COVER_THEMES[book.theme ?? 'classic'].ink
-  const unit = width / 100
-
-  return (
-    <Cloth book={book} width={width} hinge="right">
-      <View style={[styles.imprint, { bottom: 10 * unit }]}>
-        <Ornament size={9 * unit} color={color} />
-        {book.imprint ? (
-          <Text style={[styles.kicker, { marginTop: 2 * unit, fontSize: 2.4 * unit, letterSpacing: 0.72 * unit, color, opacity: 0.6 }]}>
-            {book.imprint.toUpperCase()}
-          </Text>
-        ) : null}
-      </View>
-    </Cloth>
-  )
-}
-
 /** Inside the front cover: a title page. */
 export function TitlePageView({
   book,
@@ -406,7 +313,7 @@ export function BlankPageView({ width, side }: { width: number; side?: Side }) {
   return <Paper width={width} side={side} />
 }
 
-function Ornament({ size, color }: { size: number; color: string }) {
+export function Ornament({ size, color }: { size: number; color: string }) {
   return (
     <Svg viewBox="0 0 40 40" width={size} height={size}>
       <Circle cx="20" cy="20" r="18.5" fill="none" stroke={color} strokeOpacity={0.6} />