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

package/lib/ui/CustomizeSheet.js

@@ -0,0 +1,139 @@
+"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.CustomizeSheet = CustomizeSheet;
+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 COLUMN_LABEL = { auto: 'Auto Set', '1': 'One', '2': 'Two' };
+const GREEN = { true: '#34c759' };
+function Toggle(props) {
+    return (react_1.default.createElement(react_native_1.View, { style: styles.toggleBox },
+        react_1.default.createElement(react_native_1.Switch, { ...props })));
+}
+/** "Customize Theme" sheet: font, bold, spacing, margins, columns, justify, sound. */
+function CustomizeSheet({ visible, colors, page, settings: s, sample, onChange, onReset, onClose }) {
+    const [fonts, setFonts] = (0, react_1.useState)(false);
+    const [columnsMenu, setColumnsMenu] = (0, react_1.useState)(false);
+    const off = !s.customize;
+    const font = (0, themes_1.getFont)(s.fontId);
+    const previewFont = s.fontId === 'system' ? undefined : themes_1.serifFont;
+    const border = { borderTopWidth: react_native_1.StyleSheet.hairlineWidth, borderColor: colors.separator };
+    const sliderRow = (label, icon, value, min, max, step, show, key) => (react_1.default.createElement(react_native_1.View, { style: [styles.sliderBlock, border, off && styles.dim], pointerEvents: off ? 'none' : 'auto' },
+        react_1.default.createElement(react_native_1.Text, { style: [styles.caption, { color: colors.subtext }] }, label),
+        react_1.default.createElement(react_native_1.View, { style: styles.sliderRow },
+            react_1.default.createElement(Icons_1.Icon, { name: icon, color: colors.text, size: 24 }),
+            react_1.default.createElement(react_native_1.View, { style: { flex: 1, marginHorizontal: 12 } },
+                react_1.default.createElement(Slider_1.Slider, { value: value, min: min, max: max, step: step, onChange: (v) => onChange({ [key]: v }), color: colors.text, track: colors.separator, thumbColor: "#ffffff" })),
+            react_1.default.createElement(react_native_1.Text, { style: [styles.value, { color: colors.subtext }] }, show))));
+    const row = (icon, label, right, onPress, top = true, iconActive = false) => {
+        const content = (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_native_1.View, { style: styles.rowIcon },
+                react_1.default.createElement(Icons_1.Icon, { name: icon, color: colors.text, size: 22, active: iconActive })),
+            react_1.default.createElement(react_native_1.Text, { style: [styles.label, { color: colors.text }] }, label),
+            right));
+        return onPress ? (react_1.default.createElement(react_native_1.Pressable, { style: [styles.line, top && border], onPress: onPress }, content)) : (react_1.default.createElement(react_native_1.View, { style: [styles.line, top && border] }, content));
+    };
+    const close = () => {
+        setFonts(false);
+        setColumnsMenu(false);
+        onClose();
+    };
+    return (react_1.default.createElement(Sheet_1.Sheet, { visible: visible, colors: colors, onClose: close, closeIcon: "check", title: "Customize Theme", height: "92%" },
+        react_1.default.createElement(react_native_1.View, { style: [styles.preview, { backgroundColor: page.bg }] },
+            react_1.default.createElement(react_native_1.Text, { style: [styles.aa, { color: page.fg, fontFamily: previewFont }] }, "Aa"),
+            react_1.default.createElement(react_native_1.Text, { numberOfLines: 4, style: {
+                    color: page.fg, fontFamily: previewFont, fontSize: Math.min(s.fontSize, 22),
+                    lineHeight: Math.min(s.fontSize, 22) * (s.customize ? s.lineHeight : 1.5),
+                    fontWeight: s.bold ? '700' : '400', textAlign: s.justify ? 'justify' : 'auto'
+                } }, sample)),
+        react_1.default.createElement(react_native_1.ScrollView, { contentContainerStyle: styles.pad },
+            react_1.default.createElement(react_native_1.View, { style: [styles.group, { backgroundColor: colors.card }] },
+                row('textSize', 'Font', react_1.default.createElement(react_native_1.View, { style: styles.value2 },
+                    react_1.default.createElement(react_native_1.Text, { style: { color: colors.subtext, fontSize: 17 } }, font.name),
+                    react_1.default.createElement(Icons_1.Icon, { name: fonts ? 'chevronUp' : 'chevronRight', color: colors.subtext, size: 18 })), () => setFonts((v) => !v), false),
+                fonts &&
+                    themes_1.FONTS.map((f) => (react_1.default.createElement(react_native_1.Pressable, { key: f.id, onPress: () => {
+                            onChange({ fontId: f.id });
+                            setFonts(false);
+                        }, style: [styles.line, border] },
+                        react_1.default.createElement(react_native_1.View, { style: styles.check }, s.fontId === f.id && react_1.default.createElement(Icons_1.Icon, { name: "check", color: colors.text, size: 20 })),
+                        react_1.default.createElement(react_native_1.Text, { style: [styles.label, { color: colors.text }] }, f.name)))),
+                row('bold', 'Bold Text', react_1.default.createElement(Toggle, { value: s.bold, onValueChange: (v) => onChange({ bold: v }), trackColor: GREEN }))),
+            react_1.default.createElement(react_native_1.Text, { style: [styles.heading, { color: colors.text }] }, "Accessibility & Layout Options"),
+            react_1.default.createElement(react_native_1.View, { style: [styles.group, { backgroundColor: colors.card }] },
+                row('sliders', 'Customize', react_1.default.createElement(Toggle, { value: s.customize, onValueChange: (v) => onChange({ customize: v }), trackColor: GREEN }), undefined, false),
+                sliderRow('LINE SPACING', 'lineSpacing', s.lineHeight, 1.1, 2.2, 0.05, s.lineHeight.toFixed(2), 'lineHeight'),
+                sliderRow('CHARACTER SPACING', 'charSpacing', s.letterSpacing, -50, 100, 5, `${s.letterSpacing}%`, 'letterSpacing'),
+                sliderRow('WORD SPACING', 'wordSpacing', s.wordSpacing, -50, 100, 5, `${s.wordSpacing}%`, 'wordSpacing'),
+                sliderRow('MARGINS', 'margins', s.margins, -50, 100, 5, `${s.margins}%`, 'margins')),
+            react_1.default.createElement(react_native_1.View, { style: [styles.group, { backgroundColor: colors.card, marginTop: 16 }] },
+                row('columns', 'Columns', react_1.default.createElement(react_native_1.View, { style: styles.value2 },
+                    react_1.default.createElement(react_native_1.Text, { style: { color: colors.subtext, fontSize: 17 } }, COLUMN_LABEL[String(s.columns)]),
+                    react_1.default.createElement(Icons_1.Icon, { name: columnsMenu ? 'chevronUp' : 'chevronDown', color: colors.subtext, size: 18 })), () => setColumnsMenu((v) => !v), false),
+                columnsMenu &&
+                    ['auto', 1, 2].map((c) => (react_1.default.createElement(react_native_1.Pressable, { key: String(c), style: [styles.line, border], onPress: () => {
+                            onChange({ columns: c });
+                            setColumnsMenu(false);
+                        } },
+                        react_1.default.createElement(react_native_1.View, { style: styles.check }, s.columns === c && react_1.default.createElement(Icons_1.Icon, { name: "check", color: colors.text, size: 20 })),
+                        react_1.default.createElement(react_native_1.Text, { style: [styles.label, { color: colors.text }] }, COLUMN_LABEL[String(c)])))),
+                row('justify', 'Justify Text', react_1.default.createElement(Toggle, { value: s.justify, onValueChange: (v) => onChange({ justify: v }), trackColor: GREEN })),
+                row(s.pageSound ? 'sound' : 'soundOff', 'Page Turn Sound', react_1.default.createElement(Toggle, { value: s.pageSound, onValueChange: (v) => onChange({ pageSound: v }), trackColor: GREEN }))),
+            react_1.default.createElement(react_native_1.Pressable, { onPress: onReset, style: [styles.reset, { backgroundColor: colors.card }] },
+                react_1.default.createElement(react_native_1.Text, { style: { color: '#ff3b30', fontSize: 18, fontWeight: '600' } }, "Reset Theme")))));
+}
+const styles = react_native_1.StyleSheet.create({
+    preview: { paddingHorizontal: 22, paddingTop: 12, paddingBottom: 18, marginBottom: 10 },
+    aa: { fontSize: 34, textAlign: 'right', marginBottom: 6 },
+    pad: { paddingHorizontal: 16, paddingBottom: 40 },
+    group: { borderRadius: 24, overflow: 'hidden' },
+    line: { flexDirection: 'row', alignItems: 'center', minHeight: 56, paddingHorizontal: 18 },
+    rowIcon: { width: 34, height: 28, alignItems: 'flex-start', justifyContent: 'center' },
+    toggleBox: { height: 31, minWidth: 51, alignItems: 'center', justifyContent: 'center' },
+    label: { flex: 1, fontSize: 18, lineHeight: 24 },
+    check: { width: 34, height: 24, justifyContent: 'center' },
+    value2: { flexDirection: 'row', alignItems: 'center', gap: 4 },
+    heading: { fontSize: 22, fontWeight: '700', marginTop: 26, marginBottom: 10, marginStart: 4 },
+    sliderBlock: { paddingHorizontal: 18, paddingTop: 10, paddingBottom: 6 },
+    dim: { opacity: 0.45 },
+    caption: { fontSize: 14, marginBottom: 2 },
+    sliderRow: { flexDirection: 'row', alignItems: 'center' },
+    value: { width: 50, textAlign: 'right', fontSize: 17, lineHeight: 22 },
+    reset: { marginTop: 18, height: 58, borderRadius: 29, alignItems: 'center', justifyContent: 'center' }
+});

package/lib/ui/Glass.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+interface Props {
+    style?: StyleProp<ViewStyle>;
+    /** translucent tint drawn over the blur (use ChromeColors.glass or .sheetGlass) */
+    background: string;
+    border?: string;
+    dark: boolean;
+    /** blur strength 0..100 */
+    intensity?: number;
+    children?: React.ReactNode;
+}
+/** Frosted glass surface: blurs the book behind it so reading is not interrupted. */
+export declare function Glass({ style, background, border, dark, intensity, children }: Props): React.JSX.Element;
+export {};

package/lib/ui/Glass.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Glass = Glass;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+// expo-blur is optional: with it the controls are frosted glass, without it they are plain translucent.
+let BlurView = null;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    BlurView = require('expo-blur').BlurView;
+}
+catch {
+    BlurView = null;
+}
+/** Frosted glass surface: blurs the book behind it so reading is not interrupted. */
+function Glass({ style, background, border, dark, intensity = 38, children }) {
+    const base = { overflow: 'hidden', borderWidth: border ? react_native_1.StyleSheet.hairlineWidth : 0, borderColor: border };
+    if (BlurView) {
+        return (react_1.default.createElement(BlurView, { intensity: intensity, tint: dark ? 'dark' : 'light', style: [base, style] },
+            react_1.default.createElement(react_native_1.View, { style: [react_native_1.StyleSheet.absoluteFill, { backgroundColor: background }], pointerEvents: "none" }),
+            children));
+    }
+    return react_1.default.createElement(react_native_1.View, { style: [base, { backgroundColor: background }, style] }, children);
+}

package/lib/ui/HighlightMenu.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { ChromeColors } from '../themes';
+import type { Highlight, HighlightColor } from '../types';
+interface Props {
+    highlight: Highlight;
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    screen: {
+        width: number;
+        height: number;
+    };
+    colors: ChromeColors;
+    onColor: (c: HighlightColor) => void;
+    onToggleUnderline: () => void;
+    onNote: () => void;
+    onDelete: () => void;
+    onDismiss: () => void;
+}
+/** Floating glass palette shown over a highlight, like Apple Books. */
+export declare function HighlightMenu({ highlight, rect, screen, colors, onColor, onToggleUnderline, onNote, onDelete, onDismiss }: Props): React.JSX.Element;
+export {};

package/lib/ui/HighlightMenu.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HighlightMenu = HighlightMenu;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const themes_1 = require("../themes");
+const Glass_1 = require("./Glass");
+const Icons_1 = require("./Icons");
+const W = 316;
+const H = 50;
+/** Floating glass palette shown over a highlight, like Apple Books. */
+function HighlightMenu({ highlight, rect, screen, colors, onColor, onToggleUnderline, onNote, onDelete, onDismiss }) {
+    const left = Math.max(8, Math.min(screen.width - W - 8, rect.x + rect.width / 2 - W / 2));
+    const above = rect.y - H - 10;
+    const top = above > 60 ? above : rect.y + rect.height + 10;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_native_1.Pressable, { style: react_native_1.StyleSheet.absoluteFill, onPress: onDismiss, accessibilityLabel: "Dismiss" }),
+        react_1.default.createElement(Glass_1.Glass, { dark: colors.dark, background: colors.sheetGlass, border: colors.glassBorder, intensity: 55, style: [styles.menu, { left, top }] },
+            Object.keys(themes_1.HIGHLIGHT_COLORS).map((c) => (react_1.default.createElement(react_native_1.Pressable, { key: c, onPress: () => onColor(c), hitSlop: 4, accessibilityLabel: `${c} highlight` },
+                react_1.default.createElement(react_native_1.View, { style: [styles.dot, { backgroundColor: themes_1.HIGHLIGHT_COLORS[c], borderWidth: highlight.color === c ? 2 : 0, borderColor: colors.text }] })))),
+            react_1.default.createElement(react_native_1.Pressable, { onPress: onToggleUnderline, hitSlop: 6, accessibilityLabel: "Underline" },
+                react_1.default.createElement(Icons_1.Icon, { name: "underline", color: colors.text, size: 22, active: highlight.style === 'underline', strokeWidth: highlight.style === 'underline' ? 2.4 : 1.8 })),
+            react_1.default.createElement(react_native_1.Pressable, { onPress: onNote, hitSlop: 6, accessibilityLabel: "Note" },
+                react_1.default.createElement(Icons_1.Icon, { name: "pencil", color: colors.text, size: 22 })),
+            react_1.default.createElement(react_native_1.Pressable, { onPress: onDelete, hitSlop: 6, accessibilityLabel: "Remove highlight" },
+                react_1.default.createElement(Icons_1.Icon, { name: "trash", color: "#ff3b30", size: 22 })))));
+}
+const styles = react_native_1.StyleSheet.create({
+    menu: {
+        position: 'absolute',
+        width: W,
+        height: H,
+        borderRadius: 25,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-around',
+        paddingHorizontal: 12
+    },
+    dot: { width: 26, height: 26, borderRadius: 13 }
+});

package/lib/ui/Icons.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * Vector icon set (24 x 24 grid, rounded strokes). Every icon takes the colour it is drawn in, so it follows the
+ * theme (light / dark / any page colour). Some icons carry state: `active` fills or closes them
+ * (bookmark, rotation lock, line guide).
+ */
+export type IconName = 'close' | 'check' | 'chevronRight' | 'chevronUp' | 'chevronDown' | 'list' | 'search' | 'textSize' | 'share' | 'bookmark' | 'rotationLock' | 'lineGuide' | 'undo' | 'sun' | 'sunLow' | 'moon' | 'contrast' | 'pageSlide' | 'pageCurl' | 'pageFade' | 'pageScroll' | 'sliders' | 'lineSpacing' | 'charSpacing' | 'wordSpacing' | 'margins' | 'columns' | 'bold' | 'justify' | 'trash' | 'pencil' | 'underline' | 'highlighter' | 'sound' | 'soundOff';
+interface Props {
+    name: IconName;
+    color: string;
+    size?: number;
+    /** filled / closed state for bookmark, rotation lock, line guide */
+    active?: boolean;
+    strokeWidth?: number;
+}
+export declare function Icon({ name, color, size, active, strokeWidth }: Props): React.JSX.Element;
+export {};

package/lib/ui/Icons.js

@@ -0,0 +1,193 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = Icon;
+const react_1 = __importDefault(require("react"));
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const RAYS = [0, 45, 90, 135, 180, 225, 270, 315].map((deg) => {
+    const a = (deg * Math.PI) / 180;
+    return { x1: 12 + 6.6 * Math.cos(a), y1: 12 + 6.6 * Math.sin(a), x2: 12 + 9.2 * Math.cos(a), y2: 12 + 9.2 * Math.sin(a) };
+});
+function Icon({ name, color, size = 24, active = false, strokeWidth = 1.8 }) {
+    const p = { stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', fill: 'none' };
+    let body = null;
+    switch (name) {
+        case 'close':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M6 6 L18 18 M18 6 L6 18", ...p });
+            break;
+        case 'check':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M5 12.5 L10 17.5 L19 7", ...p });
+            break;
+        case 'chevronRight':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M9 5.5 L15.5 12 L9 18.5", ...p });
+            break;
+        case 'chevronUp':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M5.5 15 L12 8.5 L18.5 15", ...p });
+            break;
+        case 'chevronDown':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M5.5 9 L12 15.5 L18.5 9", ...p });
+            break;
+        case 'list':
+            body = (react_1.default.createElement(react_native_svg_1.G, null, [7, 12, 17].map((y) => (react_1.default.createElement(react_native_svg_1.G, { key: y },
+                react_1.default.createElement(react_native_svg_1.Circle, { cx: 4.8, cy: y, r: 1.25, fill: color }),
+                react_1.default.createElement(react_native_svg_1.Path, { d: `M9 ${y} H20`, ...p }))))));
+            break;
+        case 'search':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Circle, { cx: 10.8, cy: 10.8, r: 6.3, ...p }),
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M15.6 15.6 L20.5 20.5", ...p })));
+            break;
+        case 'textSize':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M2.8 18 L6.3 9.2 L9.8 18 M4.1 14.9 H8.5", ...p }),
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M11.6 18 L16.6 5.6 L21.6 18 M13.5 13.6 H19.7", ...p })));
+            break;
+        case 'share':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M8.5 10 H7 A1.7 1.7 0 0 0 5.3 11.7 V19 A1.7 1.7 0 0 0 7 20.7 H17 A1.7 1.7 0 0 0 18.7 19 V11.7 A1.7 1.7 0 0 0 17 10 H15.5", ...p }),
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M12 14.5 V3.5 M8.2 7.3 L12 3.5 L15.8 7.3", ...p })));
+            break;
+        case 'bookmark':
+            body = (react_1.default.createElement(react_native_svg_1.Path, { d: "M7.2 3.8 H16.8 A1.2 1.2 0 0 1 18 5 V20.2 L12 16.2 L6 20.2 V5 A1.2 1.2 0 0 1 7.2 3.8 Z", ...p, fill: active ? color : 'none' }));
+            break;
+        case 'rotationLock':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M20.2 13 A8.2 8.2 0 1 1 17 5.9", ...p }),
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M17.2 2.8 V6.2 H13.8", ...p }),
+                react_1.default.createElement(react_native_svg_1.Rect, { x: 9, y: 11.2, width: 6, height: 5, rx: 1.2, ...p, fill: active ? color : 'none' }),
+                react_1.default.createElement(react_native_svg_1.Path, { d: active ? 'M10.4 11.2 V10 A1.6 1.6 0 0 1 13.6 10 V11.2' : 'M10.4 11.2 V9.9 A1.6 1.6 0 0 1 13.6 9.9', ...p })));
+            break;
+        case 'lineGuide':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M4 6.2 H20 M4 17.8 H20", ...p, opacity: 0.5 }),
+                react_1.default.createElement(react_native_svg_1.Rect, { x: 2.8, y: 9.2, width: 18.4, height: 5.6, rx: 2.8, ...p, fill: active ? color : 'none', fillOpacity: active ? 0.28 : 0 })));
+            break;
+        case 'undo':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M8.5 6 L4 10.5 L8.5 15 M4.5 10.5 H14.5 A5 5 0 0 1 14.5 20.5 H11", ...p });
+            break;
+        case 'sun':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Circle, { cx: 12, cy: 12, r: 3.9, ...p }),
+                RAYS.map((r, i) => (react_1.default.createElement(react_native_svg_1.Line, { key: i, x1: r.x1, y1: r.y1, x2: r.x2, y2: r.y2, ...p })))));
+            break;
+        case 'sunLow':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Circle, { cx: 12, cy: 12, r: 2.4, ...p }),
+                RAYS.map((r, i) => (react_1.default.createElement(react_native_svg_1.Line, { key: i, x1: 12 + (r.x1 - 12) * 0.8, y1: 12 + (r.y1 - 12) * 0.8, x2: 12 + (r.x2 - 12) * 0.62, y2: 12 + (r.y2 - 12) * 0.62, ...p })))));
+            break;
+        case 'moon':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M20 14.2 A8.4 8.4 0 1 1 9.8 4 A6.6 6.6 0 0 0 20 14.2 Z", ...p });
+            break;
+        case 'contrast':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Circle, { cx: 12, cy: 12, r: 8.2, ...p }),
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M12 3.8 A8.2 8.2 0 0 1 12 20.2 Z", fill: color, stroke: color, strokeWidth: 1 })));
+            break;
+        case 'pageSlide':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M9 5.2 H5.2 A1.9 1.9 0 0 0 3.3 7.1 V17.9 A1.9 1.9 0 0 0 5.2 19.8 H9", ...p, opacity: 0.55 }),
+                react_1.default.createElement(react_native_svg_1.Rect, { x: 8, y: 3.2, width: 12.7, height: 16.6, rx: 2.4, ...p })));
+            break;
+        case 'pageCurl':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M6.7 3.5 H14.5 L20 9 V18.6 A1.9 1.9 0 0 1 18.1 20.5 H6.7 A1.9 1.9 0 0 1 4.8 18.6 V5.4 A1.9 1.9 0 0 1 6.7 3.5 Z", ...p }),
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M14.5 3.5 V7.4 A1.6 1.6 0 0 0 16.1 9 H20", ...p })));
+            break;
+        case 'pageFade':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M13.2 2.8 L5.2 13.2 H11 L10.2 21.2 L18.8 10.4 H13 Z", ...p });
+            break;
+        case 'pageScroll':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Rect, { x: 5, y: 3, width: 14, height: 18, rx: 2.4, ...p }),
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M9.4 9.6 L12 7 L14.6 9.6 M9.4 14.4 L12 17 L14.6 14.4", ...p })));
+            break;
+        case 'sliders':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M3.5 8 H9.2 M14.8 8 H20.5 M3.5 16 H14.2 M19.8 16 H20.5", ...p }),
+                react_1.default.createElement(react_native_svg_1.Circle, { cx: 12, cy: 8, r: 2.8, ...p }),
+                react_1.default.createElement(react_native_svg_1.Circle, { cx: 17, cy: 16, r: 2.8, ...p })));
+            break;
+        case 'lineSpacing':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M10.5 6.5 H20.5 M10.5 12 H20.5 M10.5 17.5 H20.5 M5 4.5 V19.5 M2.9 6.6 L5 4.5 L7.1 6.6 M2.9 17.4 L5 19.5 L7.1 17.4", ...p });
+            break;
+        case 'charSpacing':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M7.6 13.6 L12 3.8 L16.4 13.6 M9.2 10.4 H14.8 M3.8 19.2 H20.2 M6.2 16.9 L3.8 19.2 L6.2 21.5 M17.8 16.9 L20.2 19.2 L17.8 21.5", ...p });
+            break;
+        case 'wordSpacing':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Rect, { x: 2.8, y: 4.5, width: 7, height: 4.2, rx: 1.2, ...p }),
+                react_1.default.createElement(react_native_svg_1.Rect, { x: 14.2, y: 4.5, width: 7, height: 4.2, rx: 1.2, ...p }),
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M3.8 15.2 H20.2 M6.2 12.9 L3.8 15.2 L6.2 17.5 M17.8 12.9 L20.2 15.2 L17.8 17.5", ...p })));
+            break;
+        case 'margins':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Rect, { x: 3.8, y: 3, width: 16.4, height: 18, rx: 2.4, ...p }),
+                react_1.default.createElement(react_native_svg_1.Path, { d: "M8 7 V17 M16 7 V17", ...p })));
+            break;
+        case 'columns':
+            body = (react_1.default.createElement(react_native_svg_1.G, null,
+                react_1.default.createElement(react_native_svg_1.Rect, { x: 3.5, y: 4, width: 7.6, height: 16, rx: 1.8, ...p }),
+                react_1.default.createElement(react_native_svg_1.Rect, { x: 12.9, y: 4, width: 7.6, height: 16, rx: 1.8, ...p })));
+            break;
+        case 'bold':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M8 4.6 V19.4 M8 4.6 H13 A3.6 3.6 0 0 1 13 11.8 H8 M8 11.8 H14 A3.8 3.8 0 0 1 14 19.4 H8", ...p, strokeWidth: strokeWidth + 0.5 });
+            break;
+        case 'justify':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M4 6 H20 M4 10 H20 M4 14 H20 M4 18 H20", ...p });
+            break;
+        case 'trash':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M4.5 7 H19.5 M9.3 7 V4.6 H14.7 V7 M6.6 7 L7.6 19.6 A1.2 1.2 0 0 0 8.8 20.7 H15.2 A1.2 1.2 0 0 0 16.4 19.6 L17.4 7 M10.2 10.8 V16.4 M13.8 10.8 V16.4", ...p });
+            break;
+        case 'pencil':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M4 20 L5.2 15.2 L16.2 4.2 A2.2 2.2 0 0 1 19.4 7.4 L8.4 18.4 Z M14 6.4 L17.2 9.6", ...p });
+            break;
+        case 'highlighter':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M14.2 4.6 L19.4 9.8 L10.6 18.6 L5.4 13.4 Z M5.4 13.4 L4.2 17.6 L7.6 18.6 M3.5 21 H12.5", ...p });
+            break;
+        case 'underline':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M7.4 4.4 V11 A4.6 4.6 0 0 0 16.6 11 V4.4 M5 20 H19", ...p });
+            break;
+        case 'sound':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M4 9.5 H7.5 L12.5 5.2 V18.8 L7.5 14.5 H4 Z M16 9 A4.2 4.2 0 0 1 16 15 M18.6 6.6 A7.6 7.6 0 0 1 18.6 17.4", ...p });
+            break;
+        case 'soundOff':
+            body = react_1.default.createElement(react_native_svg_1.Path, { d: "M4 9.5 H7.5 L12.5 5.2 V18.8 L7.5 14.5 H4 Z M16.2 9.4 L21 14.6 M21 9.4 L16.2 14.6", ...p });
+            break;
+    }
+    return (react_1.default.createElement(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 24 24" }, body));
+}

package/lib/ui/LineGuide.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export type DimLevel = 'high' | 'medium' | 'low' | 'none';
+/** Opacity of the page-coloured veil over everything except the guide line. */
+export declare const DIM_ALPHA: Record<DimLevel, number>;
+interface Props {
+    /** page background colour (#rrggbb) */
+    bg: string;
+    dark: boolean;
+    dim: DimLevel;
+    /** height of one line of text */
+    lineHeight: number;
+    /** vertical range the guide may move in */
+    minY: number;
+    maxY: number;
+}
+/**
+ * Line Guide: dims the page except for one line that can be dragged up and down.
+ * The veil ignores touches, so page turns and taps still reach the book.
+ */
+export declare function LineGuide({ bg, dark, dim, lineHeight, minY, maxY }: Props): React.JSX.Element;
+export {};

package/lib/ui/LineGuide.js

@@ -0,0 +1,92 @@
+"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.DIM_ALPHA = void 0;
+exports.LineGuide = LineGuide;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+/** Opacity of the page-coloured veil over everything except the guide line. */
+exports.DIM_ALPHA = { high: 0.86, medium: 0.62, low: 0.36, none: 0 };
+function rgba(hex, a) {
+    const v = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+    return `rgba(${v[0]},${v[1]},${v[2]},${a})`;
+}
+/**
+ * Line Guide: dims the page except for one line that can be dragged up and down.
+ * The veil ignores touches, so page turns and taps still reach the book.
+ */
+function LineGuide({ bg, dark, dim, lineHeight, minY, maxY }) {
+    const h = Math.round(lineHeight) + 14;
+    const [y, setY] = (0, react_1.useState)(minY + 40);
+    const state = (0, react_1.useRef)({ start: 0, minY, maxY, h });
+    state.current.minY = minY;
+    state.current.maxY = maxY;
+    state.current.h = h;
+    const yRef = (0, react_1.useRef)(y);
+    yRef.current = y;
+    const pan = (0, react_1.useRef)(react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: () => {
+            state.current.start = yRef.current;
+        },
+        onPanResponderMove: (_e, g) => {
+            const s = state.current;
+            setY(Math.max(s.minY, Math.min(s.maxY - s.h, s.start + g.dy)));
+        }
+    })).current;
+    const veil = rgba(bg, exports.DIM_ALPHA[dim]);
+    return (react_1.default.createElement(react_native_1.View, { style: react_native_1.StyleSheet.absoluteFill, pointerEvents: "box-none" },
+        dim !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: [styles.veil, { top: 0, height: y, backgroundColor: veil }] }),
+            react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: [styles.veil, { top: y + h, bottom: 0, backgroundColor: veil }] }))),
+        react_1.default.createElement(react_native_1.View, { ...pan.panHandlers, style: [
+                styles.band,
+                {
+                    top: y,
+                    height: h,
+                    borderRadius: h / 2,
+                    borderColor: dark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.22)',
+                    backgroundColor: dark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'
+                }
+            ], accessibilityLabel: "Line guide" })));
+}
+const styles = react_native_1.StyleSheet.create({
+    veil: { position: 'absolute', left: 0, right: 0 },
+    band: {
+        position: 'absolute', left: 10, right: 10, borderWidth: react_native_1.StyleSheet.hairlineWidth * 2,
+        shadowColor: '#000', shadowOpacity: 0.35, shadowRadius: 8, shadowOffset: { width: 0, height: 3 }, elevation: 6
+    }
+});

package/lib/ui/NoteEditor.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ChromeColors } from '../themes';
+interface Props {
+    visible: boolean;
+    quote: string;
+    initial: string;
+    colors: ChromeColors;
+    onSave: (note: string) => void;
+    onCancel: () => void;
+}
+export declare function NoteEditor({ visible, quote, initial, colors, onSave, onCancel }: Props): React.JSX.Element;
+export {};