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

package/lib/EpubReaderView.js

@@ -0,0 +1,504 @@
+"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.EpubReaderView = EpubReaderView;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const EpubReader_1 = require("./EpubReader");
+const themes_1 = require("./themes");
+const AppearanceSheet_1 = require("./ui/AppearanceSheet");
+const ContentsSheet_1 = require("./ui/ContentsSheet");
+const CustomizeSheet_1 = require("./ui/CustomizeSheet");
+const sound_1 = require("./sound");
+const Glass_1 = require("./ui/Glass");
+const HighlightMenu_1 = require("./ui/HighlightMenu");
+const Icons_1 = require("./ui/Icons");
+const LineGuide_1 = require("./ui/LineGuide");
+const NoteEditor_1 = require("./ui/NoteEditor");
+const SearchSheet_1 = require("./ui/SearchSheet");
+const RESET_THEME = {
+    fontId: 'original',
+    bold: false,
+    customize: false,
+    lineHeight: 1.5,
+    letterSpacing: 0,
+    wordSpacing: 0,
+    margins: 0,
+    columns: 'auto',
+    justify: false
+};
+// expo-screen-orientation is optional (needed for the rotation lock button)
+let ScreenOrientation = null;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    ScreenOrientation = require('expo-screen-orientation');
+}
+catch {
+    ScreenOrientation = null;
+}
+const DIM_LABELS = [
+    { id: 'high', label: 'High' },
+    { id: 'medium', label: 'Medium' },
+    { id: 'low', label: 'Low' },
+    { id: 'none', label: 'None' }
+];
+const SAMPLE = 'The reader turned the page slowly, listening to the wind move across the empty hills.';
+const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+function defaultInsets() {
+    return react_native_1.Platform.OS === 'ios' ? { top: 50, bottom: 30 } : { top: react_native_1.StatusBar.currentHeight || 24, bottom: 0 };
+}
+function EpubReaderView(props) {
+    const safe = props.safeInsets || defaultInsets();
+    const screen = (0, react_native_1.useWindowDimensions)();
+    const systemDark = (0, react_native_1.useColorScheme)() === 'dark';
+    const reader = (0, react_1.useRef)(null);
+    const [settings, setSettings] = (0, react_1.useState)({ ...themes_1.DEFAULT_SETTINGS, ...props.initialSettings });
+    const [highlights, setHighlights] = (0, react_1.useState)(props.initialHighlights || []);
+    const [bookmarks, setBookmarks] = (0, react_1.useState)(props.initialBookmarks || []);
+    const [toc, setToc] = (0, react_1.useState)([]);
+    const [meta, setMeta] = (0, react_1.useState)(null);
+    const [rtl, setRtl] = (0, react_1.useState)(false);
+    const [loc, setLoc] = (0, react_1.useState)(null);
+    const [index, setIndex] = (0, react_1.useState)(null);
+    const [cpp, setCpp] = (0, react_1.useState)(1200); // characters per page, measured from the chapters seen so far
+    // reading starts with nothing but the running header/footer; a tap shows the close button and the menu button
+    const [chrome, setChrome] = (0, react_1.useState)(false);
+    const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
+    const [pillW, setPillW] = (0, react_1.useState)(0);
+    const [lineGuide, setLineGuide] = (0, react_1.useState)(false);
+    const [dimLevel, setDimLevel] = (0, react_1.useState)('high');
+    const [lineMenu, setLineMenu] = (0, react_1.useState)(false);
+    const [rotLocked, setRotLocked] = (0, react_1.useState)(false);
+    const [returnTo, setReturnTo] = (0, react_1.useState)(null);
+    const [sheet, setSheet] = (0, react_1.useState)(null);
+    const [active, setActive] = (0, react_1.useState)(null);
+    const [selection, setSelection] = (0, react_1.useState)(null);
+    const [noteFor, setNoteFor] = (0, react_1.useState)(null);
+    const [results, setResults] = (0, react_1.useState)([]);
+    const [searching, setSearching] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const searchId = (0, react_1.useRef)(0);
+    const seen = (0, react_1.useRef)({});
+    const layoutKey = (0, react_1.useRef)('');
+    const dark = (0, themes_1.isDark)(settings, systemDark);
+    const page = (0, themes_1.themeColors)(settings, systemDark);
+    const colors = (0, react_1.useMemo)(() => (0, themes_1.chromeColors)(page, dark), [page, dark]);
+    // ----- chrome visibility animation
+    const fade = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(fade, { toValue: chrome ? 1 : 0, duration: 180, useNativeDriver: true }).start();
+    }, [chrome, fade]);
+    const fadeOut = fade.interpolate({ inputRange: [0, 1], outputRange: [1, 0] });
+    const menuFade = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(menuFade, { toValue: menuOpen ? 1 : 0, duration: 160, useNativeDriver: true }).start();
+    }, [menuOpen, menuFade]);
+    (0, react_1.useEffect)(() => {
+        if (!chrome)
+            setMenuOpen(false);
+    }, [chrome]);
+    // ----- persistence helpers
+    const updateHighlights = (0, react_1.useCallback)((fn) => {
+        setHighlights((prev) => {
+            const next = fn(prev);
+            props.onHighlightsChange?.(next);
+            return next;
+        });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.onHighlightsChange]);
+    const updateBookmarks = (0, react_1.useCallback)((fn) => {
+        setBookmarks((prev) => {
+            const next = fn(prev);
+            props.onBookmarksChange?.(next);
+            return next;
+        });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.onBookmarksChange]);
+    const changeSettings = (patch) => {
+        const next = { ...settings, ...patch };
+        setSettings(next);
+        props.onSettingsChange?.(next);
+    };
+    // ----- book page numbers (estimated from characters per page)
+    const onRelocate = (e) => {
+        const key = [settings.fontSize, settings.fontId, settings.lineHeight, settings.letterSpacing, settings.wordSpacing, settings.margins, settings.customize, settings.columns, settings.bold, settings.pageTurn === 'scroll'].join('|');
+        if (key !== layoutKey.current) {
+            layoutKey.current = key;
+            seen.current = {};
+        }
+        seen.current[e.spine] = { len: e.textLength, pc: e.pageCount };
+        let len = 0;
+        let pc = 0;
+        Object.values(seen.current).forEach((v) => {
+            len += v.len;
+            pc += v.pc;
+        });
+        const next = pc > 0 && len > 0 ? len / pc : 1200;
+        setCpp((old) => (Math.abs(old - next) / next > 0.01 ? next : old));
+        setLoc(e);
+        setActive(null);
+        props.onLocationChange?.(e);
+    };
+    const pageOf = (0, react_1.useCallback)((spine, offset) => {
+        if (!index)
+            return spine + 1;
+        return Math.round(((index.cum[spine] || 0) + offset) / cpp) + 1;
+    }, [index, cpp]);
+    const totalPages = index ? Math.max(1, Math.round(index.totalLength / cpp)) : loc ? loc.pageCount * loc.spineCount : 1;
+    const curPage = loc ? Math.min(totalPages, pageOf(loc.spine, loc.offset)) : 1;
+    const percent = Math.round((loc?.progress ?? 0) * 100);
+    const pagesLeft = loc ? Math.max(0, loc.pageCount - loc.page - 1) : 0;
+    // header / footer drawn on the page: chapter title + page number, or "N pages left" + "x of y" while the controls are shown
+    (0, react_1.useEffect)(() => {
+        if (!loc)
+            return;
+        const header = chrome ? (pagesLeft === 0 ? 'Last page in chapter' : `${pagesLeft} page${pagesLeft === 1 ? '' : 's'} left in chapter`) : loc.chapter;
+        const footer = chrome ? `${curPage} of ${totalPages}` : `${curPage}`;
+        reader.current?.setLabels(header, footer);
+    }, [chrome, loc, curPage, totalPages, pagesLeft]);
+    // ----- bookmarks
+    const bookmarkHere = (0, react_1.useMemo)(() => (loc ? bookmarks.filter((b) => b.spine === loc.spine && b.offset >= loc.offset && b.offset < Math.max(loc.end, loc.offset + 1)) : []), [bookmarks, loc]);
+    const toggleBookmark = () => {
+        if (!loc)
+            return;
+        if (bookmarkHere.length) {
+            const ids = new Set(bookmarkHere.map((b) => b.id));
+            updateBookmarks((prev) => prev.filter((b) => !ids.has(b.id)));
+        }
+        else {
+            updateBookmarks((prev) => [
+                ...prev,
+                { id: uid(), spine: loc.spine, offset: loc.offset, chapter: loc.chapter, excerpt: loc.excerpt, progress: loc.progress, createdAt: Date.now() }
+            ]);
+        }
+    };
+    // ----- highlights
+    const createHighlight = (sel, withNote) => {
+        setSelection(null);
+        const h = {
+            id: uid(),
+            spine: sel.spine,
+            start: sel.start,
+            end: sel.end,
+            text: sel.text.replace(/\s+/g, ' ').trim(),
+            color: 'yellow',
+            chapter: loc?.chapter,
+            createdAt: Date.now()
+        };
+        updateHighlights((prev) => [...prev, h]);
+        reader.current?.clearSelection();
+        if (withNote)
+            setNoteFor(h.id);
+        else
+            setActive({ id: h.id, rect: sel.rect });
+    };
+    const patchHighlight = (id, patch) => updateHighlights((prev) => prev.map((h) => (h.id === id ? { ...h, ...patch } : h)));
+    const removeHighlight = (id) => {
+        updateHighlights((prev) => prev.filter((h) => h.id !== id));
+        setActive(null);
+    };
+    const activeHighlight = active ? highlights.find((h) => h.id === active.id) : undefined;
+    const noteHighlight = noteFor ? highlights.find((h) => h.id === noteFor) : undefined;
+    // ----- search
+    const runSearch = (q) => {
+        const id = ++searchId.current;
+        setResults([]);
+        if (q.trim().length < 2) {
+            setSearching(false);
+            reader.current?.cancelSearch(id);
+            return;
+        }
+        setSearching(true);
+        reader.current?.search(q, id);
+    };
+    const closeSheet = () => setSheet(null);
+    // remember where we were so the "back" pill can return after a jump (contents, search, bookmark ...)
+    const jump = (to) => {
+        if (loc)
+            setReturnTo({ spine: loc.spine, offset: loc.offset, page: curPage });
+        setChrome(false);
+        reader.current?.goTo(to);
+    };
+    // two modals cannot be presented at once on iOS, so switch sheets after the first one is gone
+    const switchSheet = (to) => {
+        setSheet(null);
+        setTimeout(() => setSheet(to), 380);
+    };
+    const toggleRotationLock = async () => {
+        if (!ScreenOrientation) {
+            react_native_1.Alert.alert('Rotation lock', 'Install expo-screen-orientation to enable the rotation lock.');
+            return;
+        }
+        try {
+            if (rotLocked) {
+                await ScreenOrientation.unlockAsync();
+                setRotLocked(false);
+            }
+            else {
+                const o = await ScreenOrientation.getOrientationAsync();
+                const O = ScreenOrientation.Orientation;
+                const L = ScreenOrientation.OrientationLock;
+                await ScreenOrientation.lockAsync(o === O.LANDSCAPE_LEFT ? L.LANDSCAPE_LEFT : o === O.LANDSCAPE_RIGHT ? L.LANDSCAPE_RIGHT : L.PORTRAIT_UP);
+                setRotLocked(true);
+            }
+        }
+        catch {
+            // not supported on this device
+        }
+    };
+    (0, react_1.useEffect)(() => () => {
+        if (ScreenOrientation)
+            ScreenOrientation.unlockAsync().catch(() => undefined);
+    }, []);
+    const onLineGuideButton = () => {
+        setMenuOpen(false);
+        if (!lineGuide) {
+            setLineGuide(true);
+            setChrome(false);
+        }
+        else
+            setLineMenu(true);
+    };
+    const share = () => {
+        const text = [loc?.excerpt, meta?.title && `— ${meta.title}`].filter(Boolean).join(' ');
+        react_native_1.Share.share({ message: text || meta?.title || '' }).catch(() => undefined);
+    };
+    const progressFill = Math.max(0, Math.min(1, loc?.progress ?? 0));
+    const tx = colors.text;
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.root, { backgroundColor: page.bg }] },
+        react_1.default.createElement(EpubReader_1.EpubReader, { ref: reader, source: props.source, settings: settings, systemDark: systemDark, safeInsets: safe, initialLocation: props.initialLocation, highlights: highlights, onReady: ({ metadata, rtl: isRtl }) => {
+                setMeta(metadata);
+                setRtl(isRtl);
+                props.onMetadata?.(metadata);
+            }, onToc: setToc, onCover: props.onCover, onIndexed: setIndex, onRelocate: onRelocate, onPageTurn: () => {
+                if (settings.pageSound)
+                    (0, sound_1.playPageTurn)();
+            }, onTap: () => {
+                if (active)
+                    setActive(null);
+                else if (menuOpen)
+                    setMenuOpen(false);
+                else
+                    setChrome((c) => !c);
+            }, onHighlightTap: (id, rect) => setActive({ id, rect }), onSelection: (sel) => {
+                setSelection(sel);
+                if (sel) {
+                    setChrome(false);
+                    setActive(null);
+                }
+            }, onLink: (href) => react_native_1.Linking.openURL(href).catch(() => undefined), onSearchResults: (id, found, done) => {
+                if (id !== searchId.current)
+                    return;
+                setResults((prev) => prev.concat(found));
+                if (done)
+                    setSearching(false);
+            }, onError: (m) => {
+                setError(m);
+                props.onError?.(m);
+            } }),
+        react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: [react_native_1.StyleSheet.absoluteFill, { backgroundColor: '#000000', opacity: (1 - settings.brightness) * 0.75 }] }),
+        lineGuide && (react_1.default.createElement(LineGuide_1.LineGuide, { bg: page.bg, dark: dark, dim: dimLevel, lineHeight: settings.fontSize * (settings.customize ? settings.lineHeight : 1.5), minY: safe.top + 30, maxY: screen.height - safe.bottom - 30 })),
+        bookmarkHere.length > 0 && (react_1.default.createElement(react_native_1.Animated.View, { pointerEvents: "none", style: [styles.ribbon, { right: 22, opacity: fadeOut }] },
+            react_1.default.createElement(react_native_1.View, { style: styles.ribbonBody }),
+            react_1.default.createElement(react_native_1.View, { style: styles.ribbonNotch }))),
+        react_1.default.createElement(react_native_1.Animated.View, { pointerEvents: chrome ? 'auto' : 'none', style: [styles.closeWrap, { top: safe.top + 2, opacity: fade }] },
+            react_1.default.createElement(react_native_1.Pressable, { onPress: props.onClose, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Close book" },
+                react_1.default.createElement(Glass_1.Glass, { dark: dark, background: colors.glass, border: colors.glassBorder, style: styles.circle },
+                    react_1.default.createElement(Icons_1.Icon, { name: "close", color: tx, size: 22 })))),
+        returnTo && (react_1.default.createElement(react_native_1.Animated.View, { pointerEvents: chrome ? 'auto' : 'none', style: [styles.returnWrap, { top: safe.top + 2, opacity: fade }] },
+            react_1.default.createElement(react_native_1.Pressable, { onPress: () => {
+                    reader.current?.goTo({ spine: returnTo.spine, offset: returnTo.offset });
+                    setReturnTo(null);
+                }, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `Return to page ${returnTo.page}` },
+                react_1.default.createElement(Glass_1.Glass, { dark: dark, background: colors.glass, border: colors.glassBorder, style: styles.returnPill },
+                    react_1.default.createElement(Icons_1.Icon, { name: "undo", color: tx, size: 22 }),
+                    react_1.default.createElement(react_native_1.Text, { style: { color: tx, fontSize: 20, marginStart: 8 } }, returnTo.page))))),
+        react_1.default.createElement(react_native_1.Animated.View, { pointerEvents: chrome && !menuOpen ? 'auto' : 'none', style: [styles.menuBtnWrap, { bottom: safe.bottom + 14, opacity: react_native_1.Animated.multiply(fade, react_native_1.Animated.subtract(1, menuFade)) }] },
+            react_1.default.createElement(react_native_1.Pressable, { onPress: () => setMenuOpen(true), accessibilityRole: "button", accessibilityLabel: "Reader menu" },
+                react_1.default.createElement(Glass_1.Glass, { dark: dark, background: colors.glass, border: colors.glassBorder, style: styles.menuBtn },
+                    react_1.default.createElement(Icons_1.Icon, { name: "list", color: tx, size: 24 })))),
+        react_1.default.createElement(react_native_1.Animated.View, { pointerEvents: chrome && menuOpen ? 'box-none' : 'none', style: [styles.controls, { bottom: safe.bottom + 44, opacity: menuFade }] },
+            react_1.default.createElement(react_native_1.Pressable, { onPress: () => {
+                    setMenuOpen(false);
+                    setSheet('contents');
+                }, accessibilityRole: "button", accessibilityLabel: "Contents", style: styles.pillWrap },
+                react_1.default.createElement(Glass_1.Glass, { dark: dark, background: colors.glass, border: colors.glassBorder, style: styles.pill },
+                    react_1.default.createElement(react_native_1.View, { style: styles.pillRow, onLayout: (e) => setPillW(e.nativeEvent.layout.width) },
+                        react_1.default.createElement(react_native_1.Text, { style: [styles.pillText, { color: tx }] },
+                            "Contents  \u2022  ",
+                            percent,
+                            "%"),
+                        react_1.default.createElement(Icons_1.Icon, { name: "list", color: tx, size: 24 })),
+                    react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: [styles.fill, { width: progressFill * pillW, backgroundColor: dark ? 'rgba(255,255,255,0.35)' : '#1c1408', [rtl ? 'right' : 'left']: 0 }] },
+                        react_1.default.createElement(react_native_1.View, { style: [styles.pillRow, { position: 'absolute', top: 0, width: pillW, [rtl ? 'right' : 'left']: 0 }] },
+                            react_1.default.createElement(react_native_1.Text, { style: [styles.pillText, { color: dark ? tx : '#ffffff' }] },
+                                "Contents  \u2022  ",
+                                percent,
+                                "%"),
+                            react_1.default.createElement(Icons_1.Icon, { name: "list", color: dark ? tx : '#ffffff', size: 24 }))))),
+            react_1.default.createElement(react_native_1.Pressable, { onPress: () => {
+                    setMenuOpen(false);
+                    setSheet('search');
+                }, accessibilityRole: "button", accessibilityLabel: "Search book", style: styles.pillWrap },
+                react_1.default.createElement(Glass_1.Glass, { dark: dark, background: colors.glass, border: colors.glassBorder, style: styles.pill },
+                    react_1.default.createElement(react_native_1.View, { style: styles.pillRow },
+                        react_1.default.createElement(react_native_1.Text, { style: [styles.pillText, { color: tx }] }, "Search Book"),
+                        react_1.default.createElement(Icons_1.Icon, { name: "search", color: tx, size: 24 })))),
+            react_1.default.createElement(react_native_1.Pressable, { onPress: () => {
+                    setMenuOpen(false);
+                    setSheet('appearance');
+                }, accessibilityRole: "button", accessibilityLabel: "Themes and settings", style: styles.pillWrap },
+                react_1.default.createElement(Glass_1.Glass, { dark: dark, background: colors.glass, border: colors.glassBorder, style: styles.pill },
+                    react_1.default.createElement(react_native_1.View, { style: styles.pillRow },
+                        react_1.default.createElement(react_native_1.Text, { style: [styles.pillText, { color: tx }] }, "Themes & Settings"),
+                        react_1.default.createElement(Icons_1.Icon, { name: "textSize", color: tx, size: 26 })))),
+            react_1.default.createElement(react_native_1.View, { style: styles.roundRow },
+                react_1.default.createElement(react_native_1.Pressable, { onPress: share, style: styles.roundWrap, accessibilityRole: "button", accessibilityLabel: "Share" },
+                    react_1.default.createElement(Glass_1.Glass, { dark: dark, background: colors.glass, border: colors.glassBorder, style: styles.round },
+                        react_1.default.createElement(Icons_1.Icon, { name: "share", color: tx, size: 24 }))),
+                react_1.default.createElement(react_native_1.Pressable, { onPress: toggleRotationLock, style: styles.roundWrap, accessibilityRole: "button", accessibilityLabel: "Rotation lock", accessibilityState: { selected: rotLocked } },
+                    react_1.default.createElement(Glass_1.Glass, { dark: dark, background: rotLocked ? (dark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.18)') : colors.glass, border: colors.glassBorder, style: styles.round },
+                        react_1.default.createElement(Icons_1.Icon, { name: "rotationLock", color: tx, size: 26, active: rotLocked }))),
+                react_1.default.createElement(react_native_1.Pressable, { onPress: onLineGuideButton, style: styles.roundWrap, accessibilityRole: "button", accessibilityLabel: "Line guide", accessibilityState: { selected: lineGuide } },
+                    react_1.default.createElement(Glass_1.Glass, { dark: dark, background: lineGuide ? (dark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.18)') : colors.glass, border: colors.glassBorder, style: styles.round },
+                        react_1.default.createElement(Icons_1.Icon, { name: "lineGuide", color: tx, size: 26, active: lineGuide }))),
+                react_1.default.createElement(react_native_1.Pressable, { onPress: toggleBookmark, style: styles.roundWrap, accessibilityRole: "button", accessibilityLabel: "Bookmark this page", accessibilityState: { selected: bookmarkHere.length > 0 } },
+                    react_1.default.createElement(Glass_1.Glass, { dark: dark, background: colors.glass, border: colors.glassBorder, style: styles.round },
+                        react_1.default.createElement(Icons_1.Icon, { name: "bookmark", color: tx, size: 24, active: bookmarkHere.length > 0 }))))),
+        selection && !active && !noteFor && (() => {
+            const w = 214;
+            const r = selection.rect;
+            const left = Math.max(8, Math.min(screen.width - w - 8, r.x + r.width / 2 - w / 2));
+            // the system callout (Copy / Look Up) sits above the selection, so ours goes below it
+            const below = r.y + r.height + 16;
+            const top = below + 54 > screen.height - safe.bottom ? Math.max(safe.top + 8, r.y - 120) : below;
+            return (react_1.default.createElement(Glass_1.Glass, { dark: dark, background: colors.sheetGlass, border: colors.glassBorder, intensity: 55, style: [styles.selBar, { left, top, width: w }] },
+                react_1.default.createElement(react_native_1.Pressable, { style: styles.selBtn, onPress: () => createHighlight(selection, false), accessibilityRole: "button", accessibilityLabel: "Highlight" },
+                    react_1.default.createElement(Icons_1.Icon, { name: "highlighter", color: tx, size: 22 }),
+                    react_1.default.createElement(react_native_1.Text, { style: [styles.selText, { color: tx }] }, "Highlight")),
+                react_1.default.createElement(react_native_1.View, { style: [styles.selSep, { backgroundColor: colors.separator }] }),
+                react_1.default.createElement(react_native_1.Pressable, { style: styles.selBtn, onPress: () => createHighlight(selection, true), accessibilityRole: "button", accessibilityLabel: "Add note" },
+                    react_1.default.createElement(Icons_1.Icon, { name: "pencil", color: tx, size: 22 }),
+                    react_1.default.createElement(react_native_1.Text, { style: [styles.selText, { color: tx }] }, "Note"))));
+        })(),
+        activeHighlight && active && (react_1.default.createElement(HighlightMenu_1.HighlightMenu, { highlight: activeHighlight, rect: active.rect, screen: screen, colors: colors, onColor: (c) => patchHighlight(activeHighlight.id, { color: c }), onToggleUnderline: () => patchHighlight(activeHighlight.id, { style: activeHighlight.style === 'underline' ? 'highlight' : 'underline' }), onNote: () => {
+                setNoteFor(activeHighlight.id);
+                setActive(null);
+            }, onDelete: () => removeHighlight(activeHighlight.id), onDismiss: () => setActive(null) })),
+        error && (react_1.default.createElement(react_native_1.View, { style: [styles.error, { backgroundColor: colors.sheet }] },
+            react_1.default.createElement(react_native_1.Text, { style: { color: colors.text, fontSize: 15, textAlign: 'center' } }, error),
+            react_1.default.createElement(react_native_1.Pressable, { onPress: () => setError(null), style: { marginTop: 12 } },
+                react_1.default.createElement(react_native_1.Text, { style: { color: colors.accent, fontSize: 16 } }, "OK")))),
+        lineMenu && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_native_1.Pressable, { style: react_native_1.StyleSheet.absoluteFill, onPress: () => setLineMenu(false), accessibilityLabel: "Dismiss" }),
+            react_1.default.createElement(react_native_1.View, { style: [styles.lineMenu, { bottom: safe.bottom + 20, backgroundColor: colors.dark ? '#4a4742' : '#ffffff', borderColor: colors.glassBorder }] },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.lineMenuHead, { color: colors.subtext }] }, "Background Dimming"),
+                DIM_LABELS.map((d) => (react_1.default.createElement(react_native_1.Pressable, { key: d.id, style: styles.lineItem, onPress: () => {
+                        setDimLevel(d.id);
+                        setLineMenu(false);
+                    } },
+                    react_1.default.createElement(react_native_1.View, { style: styles.lineCheck }, dimLevel === d.id && react_1.default.createElement(Icons_1.Icon, { name: "check", color: tx, size: 20 })),
+                    react_1.default.createElement(react_native_1.Text, { style: { color: tx, fontSize: 19 } }, d.label)))),
+                react_1.default.createElement(react_native_1.View, { style: [styles.lineSep, { backgroundColor: colors.separator }] }),
+                react_1.default.createElement(react_native_1.Pressable, { style: styles.lineItem, onPress: () => {
+                        setLineGuide(false);
+                        setLineMenu(false);
+                    } },
+                    react_1.default.createElement(react_native_1.View, { style: styles.lineCheck }),
+                    react_1.default.createElement(react_native_1.Text, { style: { color: tx, fontSize: 19 } }, "Turn Off Line Guide"))))),
+        react_1.default.createElement(ContentsSheet_1.ContentsSheet, { visible: sheet === 'contents', colors: colors, title: meta?.title || props.title || '', subtitle: `Page ${curPage} of ${totalPages}`, toc: toc, currentSpine: loc?.spine ?? 0, pageOf: pageOf, bookmarks: bookmarks, highlights: highlights, onClose: closeSheet, onGoToc: (item) => {
+                closeSheet();
+                jump({ spine: item.spine, fragment: item.fragment });
+            }, onGoBookmark: (b) => {
+                closeSheet();
+                jump({ spine: b.spine, offset: b.offset });
+            }, onGoHighlight: (h) => {
+                closeSheet();
+                jump({ spine: h.spine, offset: h.start });
+            }, onDeleteBookmark: (id) => updateBookmarks((prev) => prev.filter((b) => b.id !== id)), onDeleteHighlight: (id) => updateHighlights((prev) => prev.filter((h) => h.id !== id)) }),
+        react_1.default.createElement(SearchSheet_1.SearchSheet, { visible: sheet === 'search', colors: colors, results: results, searching: searching, onClose: closeSheet, onSearch: runSearch, onPick: (r) => {
+                closeSheet();
+                if (loc)
+                    setReturnTo({ spine: loc.spine, offset: loc.offset, page: curPage });
+                setChrome(false);
+                reader.current?.showSearchResult(r);
+            } }),
+        react_1.default.createElement(AppearanceSheet_1.AppearanceSheet, { visible: sheet === 'appearance', colors: colors, settings: settings, systemDark: systemDark, onChange: changeSettings, onCustomize: () => switchSheet('customize'), onClose: closeSheet }),
+        react_1.default.createElement(CustomizeSheet_1.CustomizeSheet, { visible: sheet === 'customize', colors: colors, page: page, settings: settings, sample: loc?.excerpt || SAMPLE, onChange: changeSettings, onReset: () => changeSettings(RESET_THEME), onClose: () => switchSheet('appearance') }),
+        react_1.default.createElement(NoteEditor_1.NoteEditor, { visible: !!noteHighlight, quote: noteHighlight?.text || '', initial: noteHighlight?.note || '', colors: colors, onCancel: () => setNoteFor(null), onSave: (text) => {
+                if (noteFor)
+                    patchHighlight(noteFor, { note: text || undefined });
+                setNoteFor(null);
+            } })));
+}
+const styles = react_native_1.StyleSheet.create({
+    root: { flex: 1 },
+    closeWrap: { position: 'absolute', right: 16 },
+    circle: { width: 42, height: 42, borderRadius: 21, alignItems: 'center', justifyContent: 'center' },
+    controls: { position: 'absolute', right: 16, width: '68%' },
+    selBar: { position: 'absolute', height: 48, borderRadius: 24, flexDirection: 'row', alignItems: 'center' },
+    selBtn: { flex: 1, height: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6 },
+    selText: { fontSize: 15, fontWeight: '600' },
+    selSep: { width: react_native_1.StyleSheet.hairlineWidth, height: 24 },
+    lineMenu: {
+        position: 'absolute', left: 16, width: 290, borderRadius: 28, paddingVertical: 10, borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 16, shadowOffset: { width: 0, height: 6 }, elevation: 12
+    },
+    lineMenuHead: { fontSize: 15, fontWeight: '600', marginStart: 52, marginTop: 8, marginBottom: 4 },
+    lineItem: { flexDirection: 'row', alignItems: 'center', paddingVertical: 12, paddingHorizontal: 18 },
+    lineCheck: { width: 34 },
+    lineSep: { height: react_native_1.StyleSheet.hairlineWidth, marginVertical: 6, marginHorizontal: 18 },
+    menuBtnWrap: { position: 'absolute', right: 16 },
+    menuBtn: { width: 54, height: 54, borderRadius: 27, alignItems: 'center', justifyContent: 'center' },
+    returnWrap: { position: 'absolute', left: 16 },
+    returnPill: { height: 46, borderRadius: 23, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16 },
+    pillRow: { height: 50, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 22 },
+    pillWrap: { marginBottom: 8 },
+    pill: { height: 50, borderRadius: 25 },
+    pillText: { fontSize: 17, fontWeight: '500' },
+    fill: { position: 'absolute', top: 0, bottom: 0, overflow: 'hidden' },
+    roundRow: { flexDirection: 'row', gap: 8 },
+    roundWrap: { flex: 1 },
+    round: { height: 50, borderRadius: 25, alignItems: 'center', justifyContent: 'center' },
+    ribbon: { position: 'absolute', top: 0, width: 16 },
+    ribbonBody: { height: 26, backgroundColor: '#ff3b30' },
+    ribbonNotch: {
+        width: 0, height: 0, borderLeftWidth: 8, borderRightWidth: 8, borderBottomWidth: 7,
+        borderLeftColor: '#ff3b30', borderRightColor: '#ff3b30', borderBottomColor: 'transparent'
+    },
+    error: { position: 'absolute', left: 24, right: 24, top: '40%', padding: 20, borderRadius: 14, alignItems: 'center', elevation: 10 }
+});

package/lib/engine/html.d.ts

@@ -0,0 +1 @@
+export declare const READER_HTML: string;