@caipira/vue-reader 0.0.1

package/dist/services/common/word-decorations.js

@@ -0,0 +1,316 @@
+import { toRaw } from 'vue';
+import { debounce } from 'lodash';
+import { getReaderColors } from '../../src/composables/useReaderSettings';
+import { useReaderDictionary } from '../../src/composables/useReaderDictionary';
+const GROUP_KNOWN = 'known-words-known';
+const GROUP_UNKNOWN = 'known-words-unknown';
+const MAX_VISIBLE_WORDS = 2000;
+const CONTEXT_WINDOW = 18;
+const REFRESH_DELAY_MS = 300;
+const WORD_REGEX = /[a-zA-Z0-9\u00C0-\u00FF]+(?:[’']?[a-zA-Z\u00C0-\u00FF]+)?/g;
+const HAS_ALPHA_REGEX = /[a-zA-Z\u00C0-\u00FF]/;
+const intersectsViewport = (wnd, rect) => {
+    return (rect.bottom > 0 &&
+        rect.right > 0 &&
+        rect.top < wnd.innerHeight &&
+        rect.left < wnd.innerWidth);
+};
+const normalizeWord = (raw) => {
+    return raw
+        .trim()
+        .replace(/’/g, "'")
+        .toLowerCase()
+        .replace(/^[^a-z0-9\u00C0-\u00FF']+|[^a-z0-9\u00C0-\u00FF']+$/gi, '');
+};
+const isHighlightableNode = (parent) => {
+    if (!parent)
+        return false;
+    const tag = parent.tagName.toLowerCase();
+    if (['script', 'style', 'noscript', 'svg', 'math'].includes(tag)) {
+        return false;
+    }
+    const text = parent.textContent?.trim() ?? '';
+    return text.length > 0;
+};
+const selectorForElement = (wnd, element) => {
+    const generator = wnd._readium_cssSelectorGenerator;
+    if (generator?.getCssSelector) {
+        try {
+            return generator.getCssSelector(element, {
+                selectors: ['tag', 'id', 'class', 'nthchild', 'nthoftype', 'attribute'],
+            });
+        }
+        catch { }
+    }
+    if (element.id) {
+        return `#${CSS.escape(element.id)}`;
+    }
+    const parent = element.parentElement;
+    if (!parent) {
+        return undefined;
+    }
+    const idx = Array.from(parent.children).indexOf(element) + 1;
+    return `${parent.tagName.toLowerCase()} > ${element.tagName.toLowerCase()}:nth-child(${idx})`;
+};
+const collectVisibleCandidates = (wnd, chapterHref) => {
+    const doc = wnd.document;
+    const root = doc?.body;
+    if (!root) {
+        return [];
+    }
+    const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const out = [];
+    let textNode = walker.nextNode();
+    let seen = 0;
+    while (textNode && out.length < MAX_VISIBLE_WORDS) {
+        const parent = textNode.parentElement;
+        if (isHighlightableNode(parent)) {
+            const text = textNode.nodeValue ?? '';
+            if (text.trim().length > 0) {
+                const range = doc.createRange();
+                range.selectNodeContents(textNode);
+                const visible = Array.from(range.getClientRects()).some((rect) => intersectsViewport(wnd, rect));
+                if (visible) {
+                    const selector = selectorForElement(wnd, parent);
+                    if (selector) {
+                        WORD_REGEX.lastIndex = 0;
+                        let match;
+                        while ((match = WORD_REGEX.exec(text)) &&
+                            out.length < MAX_VISIBLE_WORDS) {
+                            const highlight = match[0] ?? '';
+                            // Skips tokens without at least one alpha char
+                            if (!HAS_ALPHA_REGEX.test(highlight)) {
+                                continue;
+                            }
+                            const lemma = normalizeWord(highlight);
+                            if (!lemma || lemma.length <= 1) {
+                                continue;
+                            }
+                            const start = match.index;
+                            const end = start + highlight.length;
+                            const beforeRaw = text.slice(Math.max(0, start - CONTEXT_WINDOW), start);
+                            const afterRaw = text.slice(end, Math.min(text.length, end + CONTEXT_WINDOW));
+                            const before = beforeRaw.trimStart();
+                            const after = afterRaw.trimEnd();
+                            const id = `${chapterHref}|${selector}|${start}|${highlight.toLowerCase()}`;
+                            out.push({
+                                id,
+                                lemma,
+                                locator: {
+                                    href: chapterHref,
+                                    type: 'application/xhtml+xml',
+                                    locations: { cssSelector: selector },
+                                    text: {
+                                        before: before.length > 0 ? before : undefined,
+                                        highlight,
+                                        after: after.length > 0 ? after : undefined,
+                                    },
+                                },
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        textNode = walker.nextNode();
+        seen += 1;
+        if (seen > 5000) {
+            break;
+        }
+    }
+    return out;
+};
+export const createReadiumWordDecorationsController = (navigatorRef, languageRef) => {
+    const dictionary = useReaderDictionary();
+    const activeDecorations = new Map();
+    let refreshSeq = 0;
+    let currentWindow = null;
+    let currentChapterHref = '';
+    let destroyed = false;
+    const scheduleRefresh = debounce(() => {
+        void refresh();
+    }, REFRESH_DELAY_MS);
+    const scheduleScrollRefresh = debounce(() => {
+        void refresh();
+    }, REFRESH_DELAY_MS);
+    const postDecorationCommand = (command) => {
+        const nav = toRaw(navigatorRef.value);
+        const frame = nav?._cframes?.find((f) => f?.iframe?.contentWindow === currentWindow) ??
+            nav?._cframes?.[0];
+        const comms = frame?.msg;
+        if (!comms || typeof comms.send !== 'function') {
+            return;
+        }
+        comms.send('decorate', command);
+    };
+    const cleanupFrameListeners = (() => {
+        let offScroll = null;
+        let offResize = null;
+        return {
+            set(wnd) {
+                this.clear();
+                const onScroll = () => {
+                    scheduleScrollRefresh();
+                };
+                const onResize = () => {
+                    scheduleRefresh();
+                };
+                wnd.addEventListener('scroll', onScroll, { passive: true });
+                wnd.addEventListener('resize', onResize, { passive: true });
+                offScroll = () => wnd.removeEventListener('scroll', onScroll);
+                offResize = () => wnd.removeEventListener('resize', onResize);
+            },
+            clear() {
+                offScroll?.();
+                offResize?.();
+                offScroll = null;
+                offResize = null;
+                scheduleScrollRefresh.cancel();
+            },
+        };
+    })();
+    const refresh = async () => {
+        if (destroyed) {
+            return;
+        }
+        refreshSeq += 1;
+        const wnd = currentWindow;
+        const chapterHref = currentChapterHref;
+        const language = languageRef();
+        if (!wnd || !chapterHref || !language) {
+            return;
+        }
+        const candidates = collectVisibleCandidates(wnd, chapterHref);
+        const lemmas = Array.from(new Set(candidates.map((c) => c.lemma)));
+        const statuses = await dictionary.classifyWords(language, lemmas, `${chapterHref}|${language}`);
+        const next = new Map();
+        let knownCount = 0;
+        let unknownCount = 0;
+        for (const candidate of candidates) {
+            const status = statuses.get(candidate.lemma) ?? 'unknown';
+            if (status === 'known') {
+                knownCount += 1;
+            }
+            else {
+                unknownCount += 1;
+            }
+            const tint = status === 'unknown'
+                ? (getReaderColors().highlight ?? undefined)
+                : undefined;
+            const nextGroup = status === 'unknown' ? GROUP_UNKNOWN : GROUP_KNOWN;
+            const decorated = {
+                ...candidate,
+                group: nextGroup,
+                status,
+                tint,
+            };
+            next.set(candidate.id, decorated);
+            const previous = activeDecorations.get(candidate.id);
+            if (!previous) {
+                if (status === 'known') {
+                    continue;
+                }
+                postDecorationCommand({
+                    group: nextGroup,
+                    action: 'add',
+                    decoration: {
+                        id: candidate.id,
+                        locator: decorated.locator,
+                        style: {
+                            tint,
+                            layout: 'boxes',
+                        },
+                    },
+                });
+                continue;
+            }
+            const previousGroup = previous.group ?? GROUP_KNOWN;
+            if (previousGroup !== nextGroup) {
+                if (previousGroup === GROUP_UNKNOWN) {
+                    postDecorationCommand({
+                        group: previousGroup,
+                        action: 'remove',
+                        decoration: { id: candidate.id },
+                    });
+                }
+                if (nextGroup === GROUP_UNKNOWN) {
+                    postDecorationCommand({
+                        group: nextGroup,
+                        action: 'add',
+                        decoration: {
+                            id: candidate.id,
+                            locator: decorated.locator,
+                            style: {
+                                tint,
+                                layout: 'boxes',
+                            },
+                        },
+                    });
+                }
+                continue;
+            }
+            if (nextGroup === GROUP_UNKNOWN &&
+                (previous.tint !== tint || previous.status !== status)) {
+                postDecorationCommand({
+                    group: nextGroup,
+                    action: 'update',
+                    decoration: {
+                        id: candidate.id,
+                        locator: decorated.locator,
+                        style: {
+                            tint,
+                            layout: 'boxes',
+                        },
+                    },
+                });
+            }
+        }
+        for (const [id, value] of activeDecorations) {
+            if (!next.has(id)) {
+                postDecorationCommand({
+                    group: value.group ?? GROUP_KNOWN,
+                    action: 'remove',
+                    decoration: { id },
+                });
+            }
+        }
+        activeDecorations.clear();
+        for (const [id, value] of next) {
+            activeDecorations.set(id, value);
+        }
+    };
+    const onFrameLoaded = (wnd, chapterHref) => {
+        scheduleRefresh.cancel();
+        scheduleScrollRefresh.cancel();
+        currentWindow = wnd;
+        currentChapterHref = chapterHref;
+        cleanupFrameListeners.set(wnd);
+        scheduleRefresh();
+    };
+    const onPositionChanged = (chapterHref) => {
+        if (chapterHref === currentChapterHref) {
+            return;
+        }
+        currentChapterHref = chapterHref;
+        scheduleRefresh();
+    };
+    const destroy = () => {
+        destroyed = true;
+        scheduleRefresh.cancel();
+        scheduleScrollRefresh.cancel();
+        cleanupFrameListeners.clear();
+        if (activeDecorations.size > 0) {
+            postDecorationCommand({ group: GROUP_UNKNOWN, action: 'clear' });
+        }
+        activeDecorations.clear();
+        dictionary.clear();
+        currentWindow = null;
+        currentChapterHref = '';
+    };
+    return {
+        onFrameLoaded,
+        onPositionChanged,
+        refresh,
+        destroy,
+    };
+};

package/dist/services/common/word-lookup.d.ts

@@ -0,0 +1,4 @@
+export declare const createReadiumWordLookupController: (languageRef: () => string | undefined) => {
+    onFrameLoaded: (wnd: Window) => void;
+    destroy: () => void;
+};

package/dist/services/common/word-lookup.js

@@ -0,0 +1,154 @@
+import { useReaderDictionary } from '../../src/composables/useReaderDictionary';
+const EPUB_WORD_REGEX = /[a-zA-Z0-9\u00C0-\u00FF]+(?:[’']?[a-zA-Z\u00C0-\u00FF]+)?/g;
+const normalizeLookupText = (text) => {
+    return text.replace(/\s+/g, ' ').trim();
+};
+const buildContextFromText = (text, start, end) => {
+    const raw = normalizeLookupText(text);
+    if (!raw) {
+        return '';
+    }
+    const safeStart = Math.max(0, Math.min(start, raw.length));
+    const safeEnd = Math.max(safeStart, Math.min(end, raw.length));
+    const left = Math.max(0, safeStart - 80);
+    const right = Math.min(raw.length, safeEnd + 80);
+    return raw.slice(left, right).trim();
+};
+const getTextHitFromPointer = (wnd, event) => {
+    const doc = wnd.document;
+    if (typeof doc.caretRangeFromPoint === 'function') {
+        const range = doc.caretRangeFromPoint(event.clientX, event.clientY);
+        if (range?.startContainer?.nodeType === Node.TEXT_NODE) {
+            return {
+                node: range.startContainer,
+                offset: range.startOffset,
+            };
+        }
+    }
+    if (typeof doc.caretPositionFromPoint === 'function') {
+        const caret = doc.caretPositionFromPoint(event.clientX, event.clientY);
+        if (caret?.offsetNode?.nodeType === Node.TEXT_NODE) {
+            return {
+                node: caret.offsetNode,
+                offset: caret.offset,
+            };
+        }
+    }
+    return null;
+};
+const getLookupPayloadFromEvent = (wnd, event) => {
+    const target = event.target;
+    if (target?.closest('a, button, input, textarea, select, [contenteditable="true"]')) {
+        return null;
+    }
+    const textHit = getTextHitFromPointer(wnd, event);
+    if (!textHit) {
+        return null;
+    }
+    const text = textHit.node.nodeValue ?? '';
+    if (!text) {
+        return null;
+    }
+    EPUB_WORD_REGEX.lastIndex = 0;
+    let match;
+    while ((match = EPUB_WORD_REGEX.exec(text))) {
+        const word = match[0] ?? '';
+        const start = match.index;
+        const end = start + word.length;
+        if (textHit.offset >= start && textHit.offset <= end) {
+            const context = buildContextFromText(text, start, end);
+            return {
+                word,
+                context,
+            };
+        }
+    }
+    return null;
+};
+export const createReadiumWordLookupController = (languageRef) => {
+    const dictionary = useReaderDictionary();
+    let cleanupLookupListener = null;
+    const onFrameLoaded = (wnd) => {
+        cleanupLookupListener?.();
+        cleanupLookupListener = null;
+        let lookupCursorVisible = false;
+        let lastPointerEvent = null;
+        const setLookupCursor = (visible) => {
+            if (lookupCursorVisible === visible) {
+                return;
+            }
+            lookupCursorVisible = visible;
+            wnd.document.body.style.cursor = visible ? 'pointer' : '';
+        };
+        const refreshLookupCursor = (event) => {
+            if (event) {
+                lastPointerEvent = event;
+            }
+            const pointerEvent = event ?? lastPointerEvent;
+            if (!pointerEvent || !(pointerEvent.ctrlKey || pointerEvent.metaKey)) {
+                setLookupCursor(false);
+                return;
+            }
+            const payload = getLookupPayloadFromEvent(wnd, pointerEvent);
+            setLookupCursor(Boolean(payload));
+        };
+        const onPointerClick = (event) => {
+            if (!(event.ctrlKey || event.metaKey)) {
+                return;
+            }
+            const language = languageRef();
+            if (!language) {
+                return;
+            }
+            const payload = getLookupPayloadFromEvent(wnd, event);
+            if (!payload) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            dictionary.onWordLookup?.({
+                language,
+                word: payload.word,
+                context: payload.context,
+            });
+        };
+        const onPointerMove = (event) => {
+            refreshLookupCursor(event);
+        };
+        const onModifierKeyDown = () => {
+            refreshLookupCursor();
+        };
+        const onModifierKeyUp = () => {
+            refreshLookupCursor();
+        };
+        const onPointerLeave = () => {
+            setLookupCursor(false);
+        };
+        const onWindowBlur = () => {
+            setLookupCursor(false);
+        };
+        wnd.document.addEventListener('click', onPointerClick, true);
+        wnd.document.addEventListener('mousemove', onPointerMove, true);
+        wnd.document.addEventListener('keydown', onModifierKeyDown, true);
+        wnd.document.addEventListener('keyup', onModifierKeyUp, true);
+        wnd.document.addEventListener('mouseleave', onPointerLeave, true);
+        wnd.addEventListener('blur', onWindowBlur);
+        cleanupLookupListener = () => {
+            wnd.document.removeEventListener('click', onPointerClick, true);
+            wnd.document.removeEventListener('mousemove', onPointerMove, true);
+            wnd.document.removeEventListener('keydown', onModifierKeyDown, true);
+            wnd.document.removeEventListener('keyup', onModifierKeyUp, true);
+            wnd.document.removeEventListener('mouseleave', onPointerLeave, true);
+            wnd.removeEventListener('blur', onWindowBlur);
+            wnd.document.body.style.cursor = '';
+        };
+    };
+    const destroy = () => {
+        cleanupLookupListener?.();
+        cleanupLookupListener = null;
+    };
+    return {
+        onFrameLoaded,
+        destroy,
+    };
+};

package/dist/services/wasm/frame-document-bridge.d.ts

@@ -0,0 +1 @@
+export declare const installFrameDocumentBridge: () => (() => void);

package/dist/services/wasm/frame-document-bridge.js

@@ -0,0 +1,84 @@
+const FRAME_DOC_CACHE = 'epub-frame-doc-v1';
+const FRAME_DOC_PREFIX = '/epub-streamer/frame-doc/';
+let uninstallBridge = null;
+let bridgeRefCount = 0;
+const isHtmlLikeBlob = (obj) => {
+    if (!(obj instanceof Blob))
+        return false;
+    const type = (obj.type || '').toLowerCase();
+    return (type.includes('text/html') ||
+        type.includes('application/xhtml+xml') ||
+        type.includes('+xml'));
+};
+const cacheFrameDocument = async (url, blob) => {
+    const cache = await caches.open(FRAME_DOC_CACHE);
+    await cache.put(new Request(url), new Response(blob, {
+        headers: {
+            'Content-Type': blob.type || 'application/xhtml+xml',
+            'Cache-Control': 'no-store',
+        },
+    }));
+};
+const deleteFrameDocument = async (url) => {
+    const cache = await caches.open(FRAME_DOC_CACHE);
+    await cache.delete(new Request(url));
+};
+const createFrameDocumentUrl = () => {
+    const id = crypto.randomUUID();
+    return `${window.location.origin}${FRAME_DOC_PREFIX}${id}`;
+};
+export const installFrameDocumentBridge = () => {
+    bridgeRefCount += 1;
+    if (uninstallBridge)
+        return uninstallBridge;
+    const nativeCreate = URL.createObjectURL.bind(URL);
+    const nativeRevoke = URL.revokeObjectURL.bind(URL);
+    const syntheticToNative = new Map();
+    URL.createObjectURL = ((obj) => {
+        if (!isHtmlLikeBlob(obj)) {
+            return nativeCreate(obj);
+        }
+        const syntheticUrl = createFrameDocumentUrl();
+        const nativeUrl = nativeCreate(obj);
+        syntheticToNative.set(syntheticUrl, nativeUrl);
+        void cacheFrameDocument(syntheticUrl, obj).catch((err) => {
+            console.warn('[frame-bridge] failed to cache frame doc', {
+                syntheticUrl,
+                err,
+            });
+        });
+        return syntheticUrl;
+    });
+    URL.revokeObjectURL = ((url) => {
+        const nativeUrl = syntheticToNative.get(url);
+        if (nativeUrl) {
+            syntheticToNative.delete(url);
+            nativeRevoke(nativeUrl);
+            void deleteFrameDocument(url).catch((err) => {
+                console.warn('[frame-bridge] failed to delete cached frame doc', {
+                    url,
+                    err,
+                });
+            });
+            return;
+        }
+        nativeRevoke(url);
+    });
+    uninstallBridge = () => {
+        bridgeRefCount = Math.max(0, bridgeRefCount - 1);
+        if (bridgeRefCount > 0)
+            return;
+        URL.createObjectURL = nativeCreate;
+        URL.revokeObjectURL = nativeRevoke;
+        const urls = Array.from(syntheticToNative.keys());
+        urls.forEach((syntheticUrl) => {
+            const nativeUrl = syntheticToNative.get(syntheticUrl);
+            if (nativeUrl)
+                nativeRevoke(nativeUrl);
+            void deleteFrameDocument(syntheticUrl);
+        });
+        syntheticToNative.clear();
+        uninstallBridge = null;
+    };
+    return uninstallBridge;
+};

package/dist/services/wasm/wasm-streamer.d.ts

@@ -0,0 +1,35 @@
+import type { Publication as RPublicationType } from '@readium/shared';
+type WasmStreamerConfig = {
+    swScope: string;
+    swUrl: string;
+    wasmUrl: string;
+};
+declare const setWasmStreamerConfig: (next: Partial<WasmStreamerConfig>) => void;
+/**
+ * Ensure the Service Worker is registered.
+ *
+ * Register the root-level SW script so it can control the whole page.
+ * The passthrough callback in sw.js ensures only requests under
+ * /epub-streamer/webpub/ reach the Go handler; everything else goes to the
+ * network normally.
+ */
+declare function ensureSW(): Promise<ServiceWorkerRegistration>;
+/**
+ * Tell the Service Worker / WASM module to load a publication from a URL.
+ * The WASM module fetches the EPUB from the given URL, parses it, and
+ * makes it available via the streamer endpoints.
+ */
+declare function loadPublication(bookId: string, epubUrl: string): Promise<void>;
+/**
+ * Create a Readium Publication backed by the WASM streamer.
+ *
+ * The HttpFetcher resolves resource requests against the base URL,
+ * which points into the SW scope. The SW intercepts these and
+ * the Go WASM handler serves them.
+ */
+declare function createPublication(bookId: string): Promise<RPublicationType>;
+/**
+ * Unload a publication from the WASM streamer (cleanup).
+ */
+declare function unloadPublication(bookId: string): Promise<void>;
+export { ensureSW, loadPublication, createPublication, unloadPublication, setWasmStreamerConfig, };