aksos-react-native-epub-reader 0.0.0-stage → 0.1.0

package/lib/themes.d.ts

@@ -0,0 +1,56 @@
+import type { HighlightColor, ReaderFont, ReaderSettings, ReaderTheme, ThemeColors } from './types';
+export declare const THEMES: ReaderTheme[];
+/** Font stacks. iOS ships most of these, on Android the stacks fall back to the system serif / sans. */
+export declare const FONTS: ReaderFont[];
+export declare const HIGHLIGHT_COLORS: Record<HighlightColor, string>;
+export declare const DEFAULT_SETTINGS: ReaderSettings;
+export declare const getTheme: (id: string) => ReaderTheme;
+export declare const getFont: (id: string) => ReaderFont;
+export declare const serifFont: string;
+export declare function isDark(settings: ReaderSettings, systemDark: boolean): boolean;
+export declare function themeColors(settings: ReaderSettings, systemDark: boolean): ThemeColors;
+/** Settings object understood by the WebView engine. */
+export declare function toEngineSettings(settings: ReaderSettings, systemDark: boolean, insets: {
+    top: number;
+    bottom: number;
+}): {
+    bg: string;
+    fg: string;
+    link: string;
+    bold: boolean;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+    letterSpacing: number;
+    wordSpacing: number;
+    marginX: number;
+    columns: import("./types").ColumnsSetting;
+    justify: boolean;
+    mode: import("./types").PageTurn;
+    direction: "auto" | "ltr" | "rtl";
+    insets: {
+        top: number;
+        bottom: number;
+    };
+};
+export interface ChromeColors {
+    /** translucent control background (pills, circles), tinted with the page colour */
+    glass: string;
+    glassBorder: string;
+    /** solid sheet colour and a translucent one for sheets that float over the book */
+    sheet: string;
+    sheetGlass: string;
+    /** rows / cards inside a sheet: a neutral wash that works on any theme */
+    card: string;
+    text: string;
+    subtext: string;
+    separator: string;
+    /** highlight for the current chapter / selected items */
+    accent: string;
+    dark: boolean;
+}
+/**
+ * Chrome (buttons, menus, sheets) is frosted glass tinted with the page colour, so a Calm page gets warm glass and a
+ * black page gets dark glass. Text and icons use the neutral text colour of the light / dark variant.
+ */
+export declare function chromeColors(colors: ThemeColors, dark: boolean): ChromeColors;

package/lib/themes.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serifFont = exports.getFont = exports.getTheme = exports.DEFAULT_SETTINGS = exports.HIGHLIGHT_COLORS = exports.FONTS = exports.THEMES = void 0;
+exports.isDark = isDark;
+exports.themeColors = themeColors;
+exports.toEngineSettings = toEngineSettings;
+exports.chromeColors = chromeColors;
+const react_native_1 = require("react-native");
+exports.THEMES = [
+    {
+        id: 'original',
+        name: 'Original',
+        light: { bg: '#ffffff', fg: '#1c1c1e', link: '#0a60ff' },
+        dark: { bg: '#000000', fg: '#f2f2f7', link: '#64a8ff' }
+    },
+    {
+        id: 'quiet',
+        name: 'Quiet',
+        light: { bg: '#e8e8ea', fg: '#58585c', link: '#3a6ea5' },
+        dark: { bg: '#121212', fg: '#8e8e93', link: '#6c9bd1' }
+    },
+    {
+        id: 'paper',
+        name: 'Paper',
+        light: { bg: '#f6f0e1', fg: '#3b3226', link: '#8a5a2b' },
+        dark: { bg: '#1d1d1f', fg: '#e9e0cd', link: '#d6a86a' }
+    },
+    {
+        id: 'bold',
+        name: 'Bold',
+        bold: true,
+        light: { bg: '#ffffff', fg: '#000000', link: '#0a60ff' },
+        dark: { bg: '#000000', fg: '#ffffff', link: '#64a8ff' }
+    },
+    {
+        id: 'calm',
+        name: 'Calm',
+        light: { bg: '#ece1c9', fg: '#4a3f2c', link: '#7a5a1f' },
+        dark: { bg: '#3d372d', fg: '#f0e7d3', link: '#e0b66f' }
+    },
+    {
+        id: 'focus',
+        name: 'Focus',
+        light: { bg: '#f3efe2', fg: '#2d2a24', link: '#9a4b1c' },
+        dark: { bg: '#1a1913', fg: '#e8e2d0', link: '#d98f5a' }
+    }
+];
+const SERIF = react_native_1.Platform.OS === 'ios' ? 'Georgia' : 'serif';
+/** Font stacks. iOS ships most of these, on Android the stacks fall back to the system serif / sans. */
+exports.FONTS = [
+    { id: 'original', name: 'Original', css: 'original' },
+    { id: 'system', name: 'System', css: "-apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif" },
+    { id: 'newyork', name: 'New York', css: "ui-serif, 'New York', Georgia, serif" },
+    { id: 'athelas', name: 'Athelas', css: "Athelas, Georgia, serif" },
+    { id: 'charter', name: 'Charter', css: "Charter, 'Bitstream Charter', Georgia, serif" },
+    { id: 'georgia', name: 'Georgia', css: "Georgia, 'Times New Roman', serif" },
+    { id: 'iowan', name: 'Iowan', css: "'Iowan Old Style', Georgia, serif" },
+    { id: 'palatino', name: 'Palatino', css: "Palatino, 'Palatino Linotype', 'Book Antiqua', serif" },
+    { id: 'seravek', name: 'Seravek', css: "Seravek, 'Avenir Next', -apple-system, sans-serif" },
+    { id: 'times', name: 'Times New Roman', css: "'Times New Roman', Times, serif" },
+    { id: 'naskh', name: 'Naskh (عربي / پښتو)', css: "'Noto Naskh Arabic', 'Geeza Pro', 'Droid Arabic Naskh', 'Scheherazade New', serif" }
+];
+exports.HIGHLIGHT_COLORS = {
+    yellow: '#ffd60a',
+    green: '#34c759',
+    blue: '#0a84ff',
+    pink: '#ff375f',
+    purple: '#bf5af2'
+};
+exports.DEFAULT_SETTINGS = {
+    themeId: 'original',
+    appearance: 'device',
+    fontId: 'original',
+    fontSize: 19,
+    bold: false,
+    customize: false,
+    lineHeight: 1.5,
+    letterSpacing: 0,
+    wordSpacing: 0,
+    margins: 0,
+    columns: 'auto',
+    justify: false,
+    pageTurn: 'slide',
+    pageSound: true,
+    brightness: 1,
+    direction: 'auto'
+};
+const getTheme = (id) => exports.THEMES.find((t) => t.id === id) || exports.THEMES[0];
+exports.getTheme = getTheme;
+const getFont = (id) => exports.FONTS.find((f) => f.id === id) || exports.FONTS[0];
+exports.getFont = getFont;
+exports.serifFont = SERIF;
+function isDark(settings, systemDark) {
+    return settings.appearance === 'device' ? systemDark : settings.appearance === 'dark';
+}
+function themeColors(settings, systemDark) {
+    const t = (0, exports.getTheme)(settings.themeId);
+    return isDark(settings, systemDark) ? t.dark : t.light;
+}
+const BASE_MARGIN = 28;
+/** Settings object understood by the WebView engine. */
+function toEngineSettings(settings, systemDark, insets) {
+    const theme = (0, exports.getTheme)(settings.themeId);
+    const c = themeColors(settings, systemDark);
+    const custom = settings.customize;
+    return {
+        bg: c.bg,
+        fg: c.fg,
+        link: c.link,
+        bold: !!theme.bold || settings.bold,
+        fontFamily: (0, exports.getFont)(settings.fontId).css,
+        fontSize: settings.fontSize,
+        lineHeight: custom ? settings.lineHeight : 1.5,
+        letterSpacing: custom ? (settings.letterSpacing / 100) * 0.25 : 0,
+        wordSpacing: custom ? (settings.wordSpacing / 100) * 0.5 : 0,
+        marginX: Math.round(BASE_MARGIN * (1 + (custom ? settings.margins : 0) / 100)),
+        columns: settings.columns,
+        justify: settings.justify,
+        mode: settings.pageTurn,
+        direction: settings.direction,
+        insets: { top: insets.top + 40, bottom: insets.bottom + 40 }
+    };
+}
+function mix(hex, other, amount) {
+    const p = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
+    const a = p(hex);
+    const b = p(other);
+    const m = a.map((v, i) => Math.round(v + (b[i] - v) * amount));
+    return '#' + m.map((v) => v.toString(16).padStart(2, '0')).join('');
+}
+function rgba(hex, alpha) {
+    const v = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+    return `rgba(${v[0]},${v[1]},${v[2]},${alpha})`;
+}
+/**
+ * Chrome (buttons, menus, sheets) is frosted glass tinted with the page colour, so a Calm page gets warm glass and a
+ * black page gets dark glass. Text and icons use the neutral text colour of the light / dark variant.
+ */
+function chromeColors(colors, dark) {
+    if (dark) {
+        return {
+            glass: rgba(mix(colors.bg, '#ffffff', 0.22), 0.4),
+            glassBorder: 'rgba(255,255,255,0.16)',
+            sheet: mix(colors.bg, '#ffffff', 0.1),
+            sheetGlass: rgba(mix(colors.bg, '#ffffff', 0.1), 0.84),
+            card: 'rgba(255,255,255,0.1)',
+            text: '#ffffff',
+            subtext: '#a09d96',
+            separator: 'rgba(255,255,255,0.14)',
+            accent: '#ffb340',
+            dark
+        };
+    }
+    return {
+        glass: rgba(mix(colors.bg, '#ffffff', 0.55), 0.5),
+        glassBorder: 'rgba(0,0,0,0.1)',
+        sheet: mix(colors.bg, '#ffffff', 0.5),
+        sheetGlass: rgba(mix(colors.bg, '#ffffff', 0.5), 0.86),
+        card: 'rgba(0,0,0,0.06)',
+        text: '#000000',
+        subtext: '#6c6c70',
+        separator: 'rgba(0,0,0,0.14)',
+        accent: '#ff9500',
+        dark
+    };
+}

package/lib/types.d.ts

@@ -0,0 +1,133 @@
+export type HighlightColor = 'yellow' | 'green' | 'blue' | 'pink' | 'purple';
+export type HighlightStyle = 'highlight' | 'underline';
+/** Position in the book. Offsets are text-character offsets inside the spine item, so they survive font/size changes. */
+export interface BookLocation {
+    spine: number;
+    offset: number;
+}
+export interface Highlight {
+    id: string;
+    spine: number;
+    start: number;
+    end: number;
+    text: string;
+    color: HighlightColor;
+    style?: HighlightStyle;
+    note?: string;
+    chapter?: string;
+    createdAt: number;
+}
+export interface Bookmark {
+    id: string;
+    spine: number;
+    offset: number;
+    chapter: string;
+    excerpt: string;
+    progress: number;
+    createdAt: number;
+}
+export interface TocItem {
+    label: string;
+    spine: number;
+    fragment: string;
+    level: number;
+}
+export interface BookMetadata {
+    title: string;
+    author: string;
+    language: string;
+    publisher: string;
+}
+export interface RelocateEvent {
+    spine: number;
+    /** offset of the first character on the page */
+    offset: number;
+    /** offset just past the last character on the page */
+    end: number;
+    page: number;
+    pageCount: number;
+    spineCount: number;
+    /** number of characters in this spine item */
+    textLength: number;
+    /** 0..1 across the whole book (exact once `indexed` is true) */
+    progress: number;
+    chapter: string;
+    excerpt: string;
+    indexed: boolean;
+}
+export interface SelectionEvent {
+    spine: number;
+    start: number;
+    end: number;
+    text: string;
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+export interface SearchResult {
+    spine: number;
+    offset: number;
+    length: number;
+    chapter: string;
+    before: string;
+    match: string;
+    after: string;
+}
+export interface ThemeColors {
+    /** page background */
+    bg: string;
+    /** body text */
+    fg: string;
+    link: string;
+}
+/** A theme has a light and a dark variant, like the themes in Apple Books. */
+export interface ReaderTheme {
+    id: string;
+    name: string;
+    light: ThemeColors;
+    dark: ThemeColors;
+    bold?: boolean;
+}
+export type Appearance = 'light' | 'dark' | 'device';
+export type PageTurn = 'slide' | 'curl' | 'fade' | 'scroll';
+export type ColumnsSetting = 'auto' | 1 | 2;
+export interface ReaderFont {
+    id: string;
+    name: string;
+    /** CSS font-family, or 'original' to keep the book's own fonts */
+    css: string;
+}
+export interface ReaderSettings {
+    themeId: string;
+    appearance: Appearance;
+    fontId: string;
+    fontSize: number;
+    /** extra bold weight on top of the theme's own */
+    bold: boolean;
+    /** when false the spacing values below are ignored (defaults are used) */
+    customize: boolean;
+    lineHeight: number;
+    /** percent, 0 = default */
+    letterSpacing: number;
+    /** percent, 0 = default */
+    wordSpacing: number;
+    /** percent change of the side margins, 0 = default */
+    margins: number;
+    columns: ColumnsSetting;
+    justify: boolean;
+    pageTurn: PageTurn;
+    /** paper sound when a page is turned (Curl) */
+    pageSound: boolean;
+    /** 0.3 .. 1, dims the page like the Books brightness slider */
+    brightness: number;
+    /** 'auto' follows the book's page-progression-direction / language */
+    direction: 'auto' | 'ltr' | 'rtl';
+}
+export type EpubSource = {
+    uri: string;
+} | {
+    base64: string;
+};

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ui/AppearanceSheet.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ChromeColors } from '../themes';
+import type { ReaderSettings } from '../types';
+interface Props {
+    visible: boolean;
+    colors: ChromeColors;
+    settings: ReaderSettings;
+    systemDark: boolean;
+    onChange: (patch: Partial<ReaderSettings>) => void;
+    onCustomize: () => void;
+    onClose: () => void;
+}
+/** "Themes & Settings" sheet. */
+export declare function AppearanceSheet({ visible, colors, settings: s, systemDark, onChange, onCustomize, onClose }: Props): React.JSX.Element;
+export {};

package/lib/ui/AppearanceSheet.js

@@ -0,0 +1,127 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppearanceSheet = AppearanceSheet;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const themes_1 = require("../themes");
+const Icons_1 = require("./Icons");
+const Sheet_1 = require("./Sheet");
+const Slider_1 = require("./Slider");
+const SIZE = { min: 12, max: 40, step: 2 };
+const TURNS = [
+    { id: 'slide', label: 'Slide', icon: 'pageSlide' },
+    { id: 'curl', label: 'Curl', icon: 'pageCurl' },
+    { id: 'fade', label: 'Fast Fade', icon: 'pageFade' },
+    { id: 'scroll', label: 'Scroll', icon: 'pageScroll' }
+];
+const APPEARANCES = [
+    { id: 'light', label: 'Light', icon: 'sun', key: 'light' },
+    { id: 'dark', label: 'Dark', icon: 'moon', key: 'dark' },
+    { id: 'device', label: 'Match Device', icon: 'contrast', key: 'device' },
+    { id: 'device', label: 'Match Surroundings', icon: 'sunLow', key: 'surroundings' }
+];
+/** Icon of the current appearance choice: the button always shows the state it is in. */
+const appearanceIcon = (a) => (a === 'light' ? 'sun' : a === 'dark' ? 'moon' : 'contrast');
+/** "Themes & Settings" sheet. */
+function AppearanceSheet({ visible, colors, settings: s, systemDark, onChange, onCustomize, onClose }) {
+    const [menu, setMenu] = (0, react_1.useState)(null);
+    const dark = (0, themes_1.isDark)(s, systemDark);
+    const turn = TURNS.find((t) => t.id === s.pageTurn) || TURNS[0];
+    const menuView = menu && (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_native_1.Pressable, { style: react_native_1.StyleSheet.absoluteFill, onPress: () => setMenu(null) }),
+        react_1.default.createElement(react_native_1.View, { style: [styles.menu, { backgroundColor: colors.dark ? '#4a4742' : '#ffffff', borderColor: colors.glassBorder }] }, menu === 'turn'
+            ? TURNS.map((t) => (react_1.default.createElement(react_native_1.Pressable, { key: t.id, style: styles.menuItem, onPress: () => {
+                    onChange({ pageTurn: t.id });
+                    setMenu(null);
+                } },
+                react_1.default.createElement(react_native_1.View, { style: styles.check }, s.pageTurn === t.id && react_1.default.createElement(Icons_1.Icon, { name: "check", color: colors.text, size: 20 })),
+                react_1.default.createElement(Icons_1.Icon, { name: t.icon, color: colors.text, size: 24 }),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.menuText, { color: colors.text }] }, t.label))))
+            : APPEARANCES.map((a) => (react_1.default.createElement(react_native_1.Pressable, { key: a.key, style: styles.menuItem, onPress: () => {
+                    onChange({ appearance: a.id });
+                    setMenu(null);
+                } },
+                react_1.default.createElement(react_native_1.View, { style: styles.check }, s.appearance === a.id && a.key !== 'surroundings' && react_1.default.createElement(Icons_1.Icon, { name: "check", color: colors.text, size: 20 })),
+                react_1.default.createElement(Icons_1.Icon, { name: a.icon, color: colors.text, size: 24 }),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.menuText, { color: colors.text }] }, a.label)))))));
+    return (react_1.default.createElement(Sheet_1.Sheet, { visible: visible, colors: colors, onClose: onClose, title: "Themes & Settings", height: "auto", overlay: menuView || undefined },
+        react_1.default.createElement(react_native_1.View, { style: styles.body },
+            react_1.default.createElement(react_native_1.View, { style: styles.row },
+                react_1.default.createElement(react_native_1.View, { style: [styles.pill, { flex: 1, backgroundColor: colors.card }] },
+                    react_1.default.createElement(react_native_1.Pressable, { style: styles.half, onPress: () => onChange({ fontSize: Math.max(SIZE.min, s.fontSize - SIZE.step) }), accessibilityLabel: "Smaller text" },
+                        react_1.default.createElement(react_native_1.Text, { style: { color: colors.text, fontSize: 15, fontWeight: '500' } }, "A")),
+                    react_1.default.createElement(react_native_1.View, { style: [styles.divider, { backgroundColor: colors.separator }] }),
+                    react_1.default.createElement(react_native_1.Pressable, { style: styles.half, onPress: () => onChange({ fontSize: Math.min(SIZE.max, s.fontSize + SIZE.step) }), accessibilityLabel: "Larger text" },
+                        react_1.default.createElement(react_native_1.Text, { style: { color: colors.text, fontSize: 26, fontWeight: '500' } }, "A"))),
+                react_1.default.createElement(react_native_1.View, { style: [styles.pill, { width: 150, backgroundColor: colors.card }] },
+                    react_1.default.createElement(react_native_1.Pressable, { style: [styles.half, menu === 'turn' && { backgroundColor: colors.separator }], onPress: () => setMenu(menu === 'turn' ? null : 'turn'), accessibilityLabel: `Page turn style: ${turn.label}` },
+                        react_1.default.createElement(Icons_1.Icon, { name: turn.icon, color: colors.text, size: 26 })),
+                    react_1.default.createElement(react_native_1.Pressable, { style: [styles.half, menu === 'appearance' && { backgroundColor: colors.separator }], onPress: () => setMenu(menu === 'appearance' ? null : 'appearance'), accessibilityLabel: "Appearance" },
+                        react_1.default.createElement(Icons_1.Icon, { name: appearanceIcon(s.appearance), color: colors.text, size: 26 })))),
+            react_1.default.createElement(react_native_1.View, { style: styles.brightness },
+                react_1.default.createElement(Icons_1.Icon, { name: "sunLow", color: colors.subtext, size: 20 }),
+                react_1.default.createElement(react_native_1.View, { style: { flex: 1, marginHorizontal: 10 } },
+                    react_1.default.createElement(Slider_1.Slider, { value: s.brightness, min: 0.3, max: 1, step: 0.01, onChange: (v) => onChange({ brightness: v }), color: colors.text, track: colors.separator, thumbColor: "#ffffff" })),
+                react_1.default.createElement(Icons_1.Icon, { name: "sun", color: colors.subtext, size: 26 })),
+            react_1.default.createElement(react_native_1.View, { style: styles.grid }, themes_1.THEMES.map((t) => {
+                const c = dark ? t.dark : t.light;
+                const on = t.id === s.themeId;
+                return (react_1.default.createElement(react_native_1.Pressable, { key: t.id, onPress: () => onChange({ themeId: t.id }), style: [styles.tile, { backgroundColor: c.bg, borderColor: on ? colors.text : colors.separator, borderWidth: on ? 3 : react_native_1.StyleSheet.hairlineWidth }], accessibilityRole: "radio", accessibilityState: { selected: on } },
+                    react_1.default.createElement(react_native_1.Text, { style: { color: c.fg, fontSize: 30, fontFamily: themes_1.serifFont, fontWeight: t.bold ? '800' : '400' } }, "Aa"),
+                    react_1.default.createElement(react_native_1.Text, { style: { color: c.fg, fontSize: 15, fontFamily: themes_1.serifFont, fontWeight: t.bold ? '700' : '400' } }, t.name)));
+            })),
+            react_1.default.createElement(react_native_1.Pressable, { onPress: onCustomize, style: [styles.customize, { backgroundColor: colors.card }], accessibilityRole: "button" },
+                react_1.default.createElement(Icons_1.Icon, { name: "sliders", color: colors.text, size: 22 }),
+                react_1.default.createElement(react_native_1.Text, { style: { color: colors.text, fontSize: 18, fontWeight: '600', marginStart: 10 } }, "Customize")))));
+}
+const styles = react_native_1.StyleSheet.create({
+    body: { paddingHorizontal: 16, paddingBottom: 28 },
+    row: { flexDirection: 'row', gap: 10 },
+    pill: { height: 58, borderRadius: 29, flexDirection: 'row', alignItems: 'center', overflow: 'hidden' },
+    half: { flex: 1, height: '100%', alignItems: 'center', justifyContent: 'center' },
+    divider: { width: react_native_1.StyleSheet.hairlineWidth, height: 24 },
+    brightness: { flexDirection: 'row', alignItems: 'center', marginTop: 14, marginBottom: 8, paddingHorizontal: 4 },
+    grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 10, marginTop: 6 },
+    tile: { width: '31.6%', height: 92, borderRadius: 22, alignItems: 'center', justifyContent: 'center' },
+    customize: { marginTop: 12, height: 58, borderRadius: 29, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
+    menu: {
+        position: 'absolute', top: 80, right: 16, width: 250, borderRadius: 24, paddingVertical: 8, borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 16, shadowOffset: { width: 0, height: 6 }, elevation: 12
+    },
+    menuItem: { flexDirection: 'row', alignItems: 'center', paddingVertical: 12, paddingHorizontal: 14 },
+    check: { width: 26, alignItems: 'center' },
+    menuText: { fontSize: 18, marginStart: 14, flexShrink: 1 }
+});

package/lib/ui/ContentsSheet.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { ChromeColors } from '../themes';
+import type { Bookmark, Highlight, TocItem } from '../types';
+export type ContentsTab = 'contents' | 'bookmarks' | 'notes';
+interface Props {
+    visible: boolean;
+    colors: ChromeColors;
+    title: string;
+    /** e.g. "Page 100 of 219" */
+    subtitle: string;
+    toc: TocItem[];
+    currentSpine: number;
+    /** estimated page number in the whole book for a spine item + character offset */
+    pageOf: (spine: number, offset: number) => number;
+    bookmarks: Bookmark[];
+    highlights: Highlight[];
+    initialTab?: ContentsTab;
+    onClose: () => void;
+    onGoToc: (item: TocItem) => void;
+    onGoBookmark: (b: Bookmark) => void;
+    onGoHighlight: (h: Highlight) => void;
+    onDeleteBookmark: (id: string) => void;
+    onDeleteHighlight: (id: string) => void;
+}
+/** Contents sheet: Chapters | Bookmarks | Highlights, each row with its page number. */
+export declare function ContentsSheet(p: Props): React.JSX.Element;
+export {};

package/lib/ui/ContentsSheet.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentsSheet = ContentsSheet;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const themes_1 = require("../themes");
+const Sheet_1 = require("./Sheet");
+const TABS = [
+    { id: 'contents', label: 'Chapters' },
+    { id: 'bookmarks', label: 'Bookmarks' },
+    { id: 'notes', label: 'Highlights' }
+];
+/** Contents sheet: Chapters | Bookmarks | Highlights, each row with its page number. */
+function ContentsSheet(p) {
+    const { colors } = p;
+    const [tab, setTab] = (0, react_1.useState)(p.initialTab || 'contents');
+    const confirmDelete = (what, fn) => react_native_1.Alert.alert(`Delete ${what}?`, undefined, [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'Delete', style: 'destructive', onPress: fn }
+    ]);
+    const empty = (text) => react_1.default.createElement(react_native_1.Text, { style: [styles.empty, { color: colors.subtext }] }, text);
+    const rowBorder = { borderColor: colors.separator };
+    return (react_1.default.createElement(Sheet_1.Sheet, { visible: p.visible, colors: colors, onClose: p.onClose, closeIcon: "check", title: p.title, subtitle: p.subtitle, height: "90%" },
+        react_1.default.createElement(react_native_1.View, { style: [styles.segment, { backgroundColor: colors.card }] }, TABS.map((t) => (react_1.default.createElement(react_native_1.Pressable, { key: t.id, onPress: () => setTab(t.id), style: [styles.segItem, tab === t.id && { backgroundColor: colors.dark ? 'rgba(255,255,255,0.22)' : '#ffffff' }], accessibilityRole: "tab", accessibilityState: { selected: tab === t.id } },
+            react_1.default.createElement(react_native_1.Text, { style: { color: colors.text, fontWeight: tab === t.id ? '600' : '400', fontSize: 16 } }, t.label))))),
+        tab === 'contents' && (react_1.default.createElement(react_native_1.FlatList, { data: p.toc, keyExtractor: (_, i) => String(i), ListEmptyComponent: empty('No table of contents'), renderItem: ({ item }) => {
+                const active = item.spine === p.currentSpine && !item.fragment;
+                return (react_1.default.createElement(react_native_1.Pressable, { onPress: () => p.onGoToc(item), style: [styles.row, rowBorder, { paddingStart: 20 + item.level * 18 }] },
+                    react_1.default.createElement(react_native_1.Text, { style: [styles.rowText, { color: active ? colors.accent : colors.text, flex: 1 }], numberOfLines: 2 }, item.label),
+                    react_1.default.createElement(react_native_1.Text, { style: [styles.page, { color: colors.subtext }] }, p.pageOf(item.spine, 0))));
+            } })),
+        tab === 'bookmarks' && (react_1.default.createElement(react_native_1.FlatList, { data: p.bookmarks.slice().sort((a, b) => a.progress - b.progress), keyExtractor: (b) => b.id, ListEmptyComponent: empty('No bookmarks yet. Tap the bookmark button while reading.'), renderItem: ({ item }) => (react_1.default.createElement(react_native_1.Pressable, { onPress: () => p.onGoBookmark(item), onLongPress: () => confirmDelete('bookmark', () => p.onDeleteBookmark(item.id)), style: [styles.row, rowBorder] },
+                react_1.default.createElement(react_native_1.View, { style: { flex: 1 } },
+                    react_1.default.createElement(react_native_1.Text, { style: [styles.meta, { color: colors.accent }] }, item.chapter),
+                    react_1.default.createElement(react_native_1.Text, { style: [styles.rowText, { color: colors.text }], numberOfLines: 2 }, item.excerpt)),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.page, { color: colors.subtext }] }, p.pageOf(item.spine, item.offset)))) })),
+        tab === 'notes' && (react_1.default.createElement(react_native_1.FlatList, { data: p.highlights.slice().sort((a, b) => a.spine - b.spine || a.start - b.start), keyExtractor: (h) => h.id, ListEmptyComponent: empty('No highlights or notes yet. Select text to add one.'), renderItem: ({ item }) => (react_1.default.createElement(react_native_1.Pressable, { onPress: () => p.onGoHighlight(item), onLongPress: () => confirmDelete('highlight', () => p.onDeleteHighlight(item.id)), style: [styles.row, rowBorder] },
+                react_1.default.createElement(react_native_1.View, { style: [styles.bar, { backgroundColor: themes_1.HIGHLIGHT_COLORS[item.color] }] }),
+                react_1.default.createElement(react_native_1.View, { style: { flex: 1 } },
+                    !!item.note && react_1.default.createElement(react_native_1.Text, { style: [styles.rowText, { color: colors.text, fontWeight: '600' }] }, item.note),
+                    react_1.default.createElement(react_native_1.Text, { style: [styles.rowText, { color: item.note ? colors.subtext : colors.text }], numberOfLines: 3 }, item.text),
+                    !!item.chapter && react_1.default.createElement(react_native_1.Text, { style: [styles.meta, { color: colors.subtext }] }, item.chapter)),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.page, { color: colors.subtext }] }, p.pageOf(item.spine, item.start)))) }))));
+}
+const styles = react_native_1.StyleSheet.create({
+    segment: { flexDirection: 'row', marginHorizontal: 16, marginTop: 34, marginBottom: 6, borderRadius: 18, padding: 3 },
+    segItem: { flex: 1, alignItems: 'center', paddingVertical: 8, borderRadius: 15 },
+    row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 17, paddingHorizontal: 20, marginHorizontal: 0, borderBottomWidth: react_native_1.StyleSheet.hairlineWidth },
+    rowText: { fontSize: 18, lineHeight: 24 },
+    page: { fontSize: 18, marginStart: 12, minWidth: 34, textAlign: 'right' },
+    meta: { fontSize: 13, marginBottom: 2, fontWeight: '600' },
+    bar: { width: 3, alignSelf: 'stretch', borderRadius: 2, marginEnd: 12 },
+    empty: { textAlign: 'center', padding: 32, fontSize: 16 }
+});

package/lib/ui/CustomizeSheet.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ChromeColors } from '../themes';
+import type { ReaderSettings, ThemeColors } from '../types';
+interface Props {
+    visible: boolean;
+    colors: ChromeColors;
+    page: ThemeColors;
+    settings: ReaderSettings;
+    sample: string;
+    onChange: (patch: Partial<ReaderSettings>) => void;
+    onReset: () => void;
+    onClose: () => void;
+}
+/** "Customize Theme" sheet: font, bold, spacing, margins, columns, justify, sound. */
+export declare function CustomizeSheet({ visible, colors, page, settings: s, sample, onChange, onReset, onClose }: Props): React.JSX.Element;
+export {};