+
+ {#if isReady}
+
+
+
+
+
+ (isSidebarOpen = !isSidebarOpen)}
+ disabled={!isReady || toc.length === 0}
+ >
+
+
+
+
+
+ {title || 'Reader'}
+
+
+ {#if isReady}
+
+
+
+
+ {percent}%
+
+ {/if}
+
+
+
+ (isSettingsOpen = true)}
+ disabled={!isReady}
+ >
+
+
+
+
+
+
+ {#if loadError}
+
Chapters
Reading settings
+
+
+ {:else}
+ {#if !isReady}
+
-
Shelves
- book.lists.findIndex((sh) => sh.id === shelf.id) !== -1
diff --git a/frontend/src/lib/components/view/book-actions-menu.svelte b/frontend/src/lib/components/view/book-actions-menu.svelte
new file mode 100644
index 0000000..ebdd3ff
--- /dev/null
+++ b/frontend/src/lib/components/view/book-actions-menu.svelte
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
+
+ {#if book.files.length > 0}
+ openInReader(book.files[0])}>
+
+ bookOps.downloadBookFile(book.id, book.files[0].id, book.files[0].filename)}
+ >
+
+ {
+ bookOps.bookToEdit = book;
+ bookOps.editDialogOpen = true;
+ }}
+ >
+
+
+ {
+ if (!book.progress?.completed) await bookOps.markBooksAsComplete([book.id]);
+ else await bookOps.markBooksAsIncomplete([book.id]);
+ }}
+ >
+
+
+ {
+ bookOps.deleteDialogTitle = `Delete "${book.title}"?`;
+ bookOps.deleteFn = async (deleteFiles: boolean) => {
+ await bookOps.deleteBooks([book.id], deleteFiles);
+ libraryState.activeLibrary!.total!--;
+ bookshelfState.deletedBooks([book]);
+ };
+ bookOps.deleteDialogOpen = true;
+ }}
+ >
+
+
+
+
diff --git a/frontend/src/lib/components/view/book-browser.svelte b/frontend/src/lib/components/view/book-browser.svelte
index 665a744..3658ab0 100644
--- a/frontend/src/lib/components/view/book-browser.svelte
+++ b/frontend/src/lib/components/view/book-browser.svelte
@@ -12,7 +12,9 @@
import FilterButton from './filter-button.svelte';
import SortButton from './sort-button.svelte';
import ViewToggle from './view-toggle.svelte';
+ import PresetChips from './preset-chips.svelte';
import BookTable from './book-table.svelte';
+ import BookRows from './book-rows.svelte';
import BatchOperationsToolbar from './batch-operations-toolbar.svelte';
import { getBookCollectionState } from '$lib/state/bookCollection.svelte';
import { getBookSelectionState } from '$lib/state/bookSelection.svelte';
@@ -22,7 +24,6 @@
const bookCollection = getBookCollectionState();
const bookOps = getBookOperationsState();
- let view = $state('grid');
let sentinel = $state();
let scrollContainer = $state(null);
@@ -66,7 +67,14 @@
@@ -89,7 +89,7 @@
class="absolute right-2 bottom-20 z-50 inline-flex items-center opacity-0 transition-opacity group-hover:opacity-100"
>
{
bookOps.bookToEdit = book;
bookOps.editDialogOpen = true;
diff --git a/frontend/src/lib/components/view/book-list.svelte b/frontend/src/lib/components/view/book-list.svelte
index 022f55f..cffcffc 100644
--- a/frontend/src/lib/components/view/book-list.svelte
+++ b/frontend/src/lib/components/view/book-list.svelte
@@ -23,8 +23,10 @@
// Start observing
resizeObserver.observe(scrollContainer);
- // Initial check with delay
- setTimeout(updateScrollState, 0);
+ // Measure synchronously. Reading scrollWidth/clientWidth forces layout, so
+ // the numbers are already accurate here — deferring to a macrotask just
+ // guaranteed one painted frame with the arrows in the wrong state.
+ updateScrollState();
// Cleanup
return () => {
@@ -33,12 +35,14 @@
});
const scrollLeft = () => {
+ if (!scrollContainer) return;
scrollContainer.scrollBy({ left: -scrollContainer.clientWidth, behavior: 'smooth' });
// Update state after scroll
setTimeout(updateScrollState, 100);
};
const scrollRight = () => {
+ if (!scrollContainer) return;
scrollContainer.scrollBy({ left: scrollContainer.clientWidth, behavior: 'smooth' });
// Update state after scroll
setTimeout(updateScrollState, 100);
@@ -61,29 +65,32 @@
{#if books.length > 0}
-
+
+
+
+
+
+ Reading
+
+ {isFixedLayout
+ ? 'This book has a fixed layout, so its typography is set by the publisher.'
+ : 'Applies to every book you read.'}
+
+
+
+
+
diff --git a/frontend/src/lib/components/reader/reader-toc.svelte b/frontend/src/lib/components/reader/reader-toc.svelte
new file mode 100644
index 0000000..0029884
--- /dev/null
+++ b/frontend/src/lib/components/reader/reader-toc.svelte
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
+
+ {#each toc as chapter (chapter.id)}
+ {#if chapter.subitems?.length}
+
+
+
+ {#each chapter.subitems ?? [] as subchapter (subchapter.id)}
+
+ onnavigate(subchapter.href)}
+ >
+
+ {subchapter.label}
+
+
+
+ {/each}
+
+
+
+ {:else}
+
+ onnavigate(chapter.href)}
+ >
+ {chapter.label}
+
+
+ {/if}
+ {/each}
+
+
+
+
diff --git a/frontend/src/lib/components/ui/avatar/avatar-badge.svelte b/frontend/src/lib/components/ui/avatar/avatar-badge.svelte
new file mode 100644
index 0000000..2df847a
--- /dev/null
+++ b/frontend/src/lib/components/ui/avatar/avatar-badge.svelte
@@ -0,0 +1,26 @@
+
+
+svg]:hidden",
+ "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+ "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+ className
+ )}
+ {...restProps}
+>
+ {@render children?.()}
+
diff --git a/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte b/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
new file mode 100644
index 0000000..62f28d9
--- /dev/null
+++ b/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -0,0 +1,20 @@
+
+
+
diff --git a/frontend/src/lib/components/ui/toggle-group/toggle-group.svelte b/frontend/src/lib/components/ui/toggle-group/toggle-group.svelte
index f69f176..893f67b 100644
--- a/frontend/src/lib/components/ui/toggle-group/toggle-group.svelte
+++ b/frontend/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -23,9 +23,16 @@
...restProps
}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
+ // Getters rather than values: consumers read `ctx.variant` / `ctx.size` as
+ // plain properties, so this stays source-compatible while making the props
+ // actually reactive — passing them by value captured the initial ones.
setToggleGroupCtx({
- variant,
- size
+ get variant() {
+ return variant;
+ },
+ get size() {
+ return size;
+ }
});
diff --git a/frontend/src/lib/components/view/batch-operations-toolbar.svelte b/frontend/src/lib/components/view/batch-operations-toolbar.svelte
index db93256..76e4366 100644
--- a/frontend/src/lib/components/view/batch-operations-toolbar.svelte
+++ b/frontend/src/lib/components/view/batch-operations-toolbar.svelte
@@ -59,8 +59,7 @@
+ {#if file}
+ (loadError = message)}
+ onready={(detail) => {
+ toc = detail.toc;
+ isFixedLayout = detail.isFixedLayout;
+ isReady = true;
+ }}
+ />
+ {/if}
-
{/if}
-
+
-
+
+
+ {#if ready && columns === 2}
+
+
+ {/if}
+
+
+
diff --git a/frontend/src/lib/components/reader/reader-settings.svelte b/frontend/src/lib/components/reader/reader-settings.svelte
new file mode 100644
index 0000000..58de3c7
--- /dev/null
+++ b/frontend/src/lib/components/reader/reader-settings.svelte
@@ -0,0 +1,265 @@
+
+
+
+ {#if !isFixedLayout}
+
+
+
+
+
+
+
+ + Typography +
+ +
+
+ state.set('fontFamily', event.currentTarget.value)}
+ >
+ {#each READER_FONT_OPTIONS as font (font.value)}
+
+ {/each}
+
+
+
+
+
+
+
+
+
+ {state.settings.fontSize}px
+
+
+
+
+
+
+
+
+ {state.settings.fontWeight}
+
+
+
+
+
+
+
+
+ {state.settings.lineHeight.toFixed(2)}
+
+
+
+
+
+
+
+
+ {state.settings.letterSpacing.toFixed(2)}em
+
+
+
+
+ state.set('justify', checked)}
+ />
+
+
+
+
+ state.set('hyphenate', checked)}
+ />
+
+ + Layout +
+ +
+
+ value && state.set('flow', value as ReaderFlow)}
+ class="justify-start"
+ >
+ Pages
+ Scroll
+
+
+
+ {#if !isFixedLayout}
+
+
+ value && state.set('maxColumnCount', Number(value))}
+ class="justify-start"
+ >
+ Single
+ Spread
+
+
+
+ + A spread needs the window to be wide enough for two columns. +
+
+
+
+
+
+
+ {state.settings.maxInlineSize}px
+
+
+
+
+ {/if}
+
+
+
+
+ {state.settings.gap}%
+
+
+
+
+
+
+
+ {state.settings.margin}px
+
+
+ Chapters
+
+
+ onnavigate(chapter.href)}
+ >
+ {chapter.label}
+
+
+
+
+
+ svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 relative flex shrink-0 items-center justify-center ring-2 ring-background",
+ className
+ )}
+ {...restProps}
+>
+ {@render children?.()}
+
diff --git a/frontend/src/lib/components/ui/avatar/avatar-group.svelte b/frontend/src/lib/components/ui/avatar/avatar-group.svelte
new file mode 100644
index 0000000..e558356
--- /dev/null
+++ b/frontend/src/lib/components/ui/avatar/avatar-group.svelte
@@ -0,0 +1,23 @@
+
+
+
+ {@render children?.()}
+
diff --git a/frontend/src/lib/components/ui/avatar/avatar-image.svelte b/frontend/src/lib/components/ui/avatar/avatar-image.svelte
new file mode 100644
index 0000000..f41cf8f
--- /dev/null
+++ b/frontend/src/lib/components/ui/avatar/avatar-image.svelte
@@ -0,0 +1,17 @@
+
+
+
{#if !selectionState.selectionModeActive}
- bookCollection.setView(next)}
+ />
+
+
- {#if view === 'grid'}
+ {#if bookCollection.view === 'grid'}
![Cover of {book.title}]()
(failed = true)}
+ class="h-full w-auto object-contain"
+ style="max-width: {Math.round(height * 0.95)}px;"
+ />
+
+ {#if book.progress?.percentage}
+
+
+
+ {/if}
+
+ {:else}
+
+
+
{#if selectedState.isSelected(book.id)}
@@ -42,7 +42,7 @@
: 'opacity-0'} transition-opacity group-hover:opacity-100"
>
+
-
{title}
- {#if needsScroll} -
-
-
-
- {/if}
+ {title}
+ +
+
+
+
+ import { resolve } from '$app/paths';
+ import BookCover from './book-cover.svelte';
+ import BookActionsMenu from './book-actions-menu.svelte';
+ import * as Tooltip from '$lib/components/ui/tooltip/index';
+ import { Badge, badgeVariants } from '$lib/components/ui/badge/index';
+ import { buttonVariants } from '$lib/components/ui/button/index.js';
+ import { getBookSelectionState } from '$lib/state/bookSelection.svelte';
+ import { getBookOperationsState } from '$lib/state/bookOperations.svelte';
+ import { getLibraryState } from '$lib/state/library.svelte';
+ import { getFileType } from '$lib/utils';
+ import { BookOpenText, Check, Download } from '@lucide/svelte';
+ import type { Book, BookFile } from '$lib/schema';
+
+ let { books }: { books: Book[] } = $props();
+
+ const selectionState = getBookSelectionState();
+ const bookOps = getBookOperationsState();
+ const libraryState = getLibraryState();
+
+ /** At most three, so cards with a heavy tag list stay the same height as the rest. */
+ const TAG_LIMIT = 3;
+
+ function authors(book: Book) {
+ return book.authors.map((a) => a.name).join(', ');
+ }
+
+ function year(book: Book) {
+ return book.published_date ? new Date(book.published_date).getFullYear() : null;
+ }
+
+ function formats(book: Book) {
+ return [...new Set(book.files.map((f) => getFileType(f.filename)))].join(' + ');
+ }
+
+ /**
+ * BookProgressRead does not expose a timestamp yet, though BookProgress
+ * extends BigIntAuditBase so updated_at exists in the database. Reading it
+ * defensively means the date appears on its own once the schema catches up.
+ * See TODO.md.
+ */
+ function finishedOn(book: Book) {
+ const value = (book.progress as { updated_at?: string } | null | undefined)?.updated_at;
+ return value
+ ? new Date(value).toLocaleDateString(undefined, {
+ day: 'numeric',
+ month: 'short',
+ year: 'numeric'
+ })
+ : null;
+ }
+
+ /**
+ * One line where the progress bar used to be — the cover already draws the
+ * bar, so this says something the bar cannot. Unread books report their
+ * length rather than announcing that they are unread.
+ */
+ function readState(book: Book): { text: string; tone: 'done' | 'reading' | 'idle' } {
+ const progress = book.progress;
+ const pages = book.pages ?? null;
+
+ if (progress?.completed) {
+ const on = finishedOn(book);
+ return { text: on ? `Finished ${on}` : 'Finished', tone: 'done' };
+ }
+
+ if (progress?.percentage) {
+ // pdf_page is a real page number when the reader recorded one;
+ // otherwise infer it from the percentage.
+ const current = progress.pdf_page ?? (pages ? Math.round(progress.percentage * pages) : null);
+
+ return {
+ text:
+ pages && current
+ ? `Reading · ${current} of ${pages}`
+ : `Reading · ${Math.round(progress.percentage * 100)}%`,
+ tone: 'reading'
+ };
+ }
+
+ return { text: pages ? `${pages} pages` : '', tone: 'idle' };
+ }
+
+ function openInReader(book: Book, file: BookFile) {
+ const type = getFileType(file.filename);
+ if (type === 'EPUB' || type === 'PDF')
+ window.open(`/book/${book.id}/read/${type.toLowerCase()}/${file.id}`, '_blank', 'noopener');
+ }
+
+ /**
+ * Once a selection exists, selecting is the primary interaction — so the
+ * whole card toggles, not just the checkbox. preventDefault also stops the
+ * links inside from navigating, since the click bubbles through them here.
+ */
+ function handleCardClick(event: MouseEvent, book: Book) {
+ if (!selectionState.selectionModeActive) return;
+ if ((event.target as HTMLElement).closest('[data-row-control]')) return;
+
+ event.preventDefault();
+ selectionState.toggleSelection(book);
+ }
+
+
+
+
-
-
- Cover
- Title
- Authors
- Publisher
- Published Date
- Pages
- Tags
- Identifiers
-
-
-
- {#each books as book (book.id)}
+
-
-
-
- {#snippet child({ props })}
-
-
- {/snippet}
-
-
-
-
-
-
-
-
-
- {#snippet child({ props })}
-
-
- {/snippet}
-
-
-
-
-
+ {
+ // The group emits '' when the active item is pressed again; keep the
+ // current view rather than leaving the browser with nothing to render.
+ if (next) onValueChange(next as BookView);
+ }}
+ class={className}
+>
+ {#each BOOK_VIEWS as view (view)}
+ {@const Icon = ICONS[view]}
+
+
+
+ {#snippet child({ props })}
+
+
+ {/snippet}
+
+
+
+
+
+ {/each}
diff --git a/frontend/src/lib/presets.ts b/frontend/src/lib/presets.ts
new file mode 100644
index 0000000..71d05a0
--- /dev/null
+++ b/frontend/src/lib/presets.ts
@@ -0,0 +1,79 @@
+/**
+ * Built-in views over a library.
+ *
+ * These are navigation, not content — a fixed set of lenses every library has,
+ * as distinct from shelves, which are named collections a user owns. Nothing
+ * here is persisted or user-editable.
+ *
+ * Defined once and consumed twice: the home route renders them as shelves, and
+ * the library view renders them as chips. Previously each home shelf was a
+ * hand-written query string in the loader, which is how `create_at` (missing a
+ * `d`) went unnoticed — that sort silently did nothing.
+ */
+
+export interface BookPreset {
+ id: string;
+ label: string;
+ /** Shown as the shelf heading on the home page. */
+ heading: string;
+ /** Filter values, keyed the way the books endpoint expects them. */
+ filters: Record;
+ /** Backend sort field; omitted means "leave the current ordering alone". */
+ orderBy?: string;
+ /** asc, desc, or random — the API's CustomOrderBy accepts all three. */
+ sortOrder?: string;
+}
+
+export const BOOK_PRESETS: BookPreset[] = [
+ {
+ id: 'continue-reading',
+ label: 'Reading',
+ heading: 'Continue Reading',
+ filters: { progress: ['in_progress'] },
+ orderBy: 'last_accessed',
+ sortOrder: 'desc'
+ },
+ {
+ id: 'recently-added',
+ label: 'Recently added',
+ heading: 'Recently Added',
+ filters: { progress: ['unread'] },
+ orderBy: 'created_at',
+ sortOrder: 'desc'
+ },
+ {
+ id: 'discover',
+ label: 'Discover',
+ heading: 'Discover',
+ filters: { progress: ['unread'] },
+ sortOrder: 'random'
+ },
+ {
+ id: 'read-again',
+ label: 'Read again',
+ heading: 'Read Again',
+ filters: { progress: ['read'] },
+ sortOrder: 'random'
+ }
+];
+
+export function getPreset(id: string) {
+ return BOOK_PRESETS.find((preset) => preset.id === id);
+}
+
+/**
+ * Query string for the books endpoint, used by the home route's loader.
+ */
+export function presetQuery(preset: BookPreset, libraryId: string | number) {
+ const params = new URLSearchParams();
+ params.set('libraries', String(libraryId));
+
+ for (const [key, values] of Object.entries(preset.filters)) {
+ for (const value of values) params.append(key, value);
+ }
+
+ if (preset.orderBy) params.set('orderBy', preset.orderBy);
+ if (preset.sortOrder) params.set('sortOrder', preset.sortOrder);
+
+ return params.toString();
+}
diff --git a/frontend/src/lib/reader/foliate-js.d.ts b/frontend/src/lib/reader/foliate-js.d.ts
new file mode 100644
index 0000000..ae47cdd
--- /dev/null
+++ b/frontend/src/lib/reader/foliate-js.d.ts
@@ -0,0 +1,94 @@
+/**
+ * Hand-written types for the vendored foliate-js (src/lib/vendor/foliate-js).
+ *
+ * `$foliate` is a Vite-only alias, so TypeScript cannot resolve it and this
+ * ambient declaration is the only candidate — which is the point: svelte-check
+ * never walks the untyped vendored JS. Only the surface Chitai calls is typed.
+ * When you start using a new method, add it here rather than casting to `any`.
+ *
+ * The filename must not match a sibling .ts. As foliate.d.ts next to foliate.ts,
+ * TypeScript takes it for that file's emitted declaration and drops it from the
+ * program, and every $foliate import fails with TS2307.
+ */
+declare module '$foliate/view.js' {
+ /** A TOC entry. `id` is assigned by foliate's `assignIDs`, not by the book. */
+ export interface FoliateTocItem {
+ id: number;
+ label: string;
+ href: string;
+ subitems?: FoliateTocItem[];
+ }
+
+ /** `event.detail` of the `relocate` event. Shape from SectionProgress.getProgress. */
+ export interface FoliateRelocateDetail {
+ /** Overall progress through the book, 0–1. Chitai stores this as `percentage`. */
+ fraction: number;
+ section: { current: number; total: number };
+ location: { current: number; next: number; total: number };
+ /** Estimated remaining reading time, in minutes. */
+ time: { section: number; total: number };
+ /** Null when the book has no TOC entry covering this position. */
+ tocItem?: FoliateTocItem | null;
+ pageItem?: { label: string; href: string } | null;
+ cfi: string;
+ range?: Range;
+ }
+
+ /** `event.detail` of the `load` event. `doc` is the section's iframe document. */
+ export interface FoliateLoadDetail {
+ doc: Document;
+ index: number;
+ }
+
+ export interface FoliateRenderer extends HTMLElement {
+ /**
+ * A single string sets the stylesheet appended to , which wins over the
+ * book's own CSS on equal specificity. A [before, after] tuple also sets one
+ * prepended to , which the book's CSS overrides. Re-applied by the
+ * paginator on every section load. Absent on the fixed-layout renderer.
+ */
+ setStyles?(styles: string | [before: string, after: string]): void;
+ getContents(): { doc: Document; index: number }[];
+ destroy(): void;
+ }
+
+ export interface FoliateBook {
+ toc?: FoliateTocItem[];
+ /** 'rtl' for right-to-left books; drives goLeft/goRight. */
+ dir?: string;
+ metadata?: Record;
+ rendition?: { layout?: string };
+ }
+
+ /** Accepted by goTo/select/init: a CFI or href, a spine index, or a fraction. */
+ export type FoliateTarget = string | number | { fraction: number };
+
+ export class View extends HTMLElement {
+ book: FoliateBook;
+ renderer: FoliateRenderer;
+ /** True when the book is pre-paginated; the renderer is then foliate-fxl. */
+ isFixedLayout: boolean;
+ lastLocation: FoliateRelocateDetail | null;
+
+ open(book: File | string | FoliateBook): Promise;
+ close(): void;
+ init(opts: { lastLocation?: FoliateTarget | null; showTextStart?: boolean }): Promise;
+
+ /** Returns undefined on failure — it logs and swallows. Check before relying on it. */
+ resolveNavigation(target: FoliateTarget): { index: number; anchor?: unknown } | undefined;
+ goTo(target: FoliateTarget): Promise<{ index: number } | undefined>;
+ goToFraction(fraction: number): Promise;
+
+ prev(distance?: number): Promise;
+ next(distance?: number): Promise;
+ /** Direction-aware: inverts against prev/next for rtl books. */
+ goLeft(): Promise;
+ goRight(): Promise;
+ }
+
+ export function makeBook(file: File | string): Promise;
+
+ export class ResponseError extends Error {}
+ export class NotFoundError extends Error {}
+ export class UnsupportedTypeError extends Error {}
+}
diff --git a/frontend/src/lib/reader/foliate.ts b/frontend/src/lib/reader/foliate.ts
new file mode 100644
index 0000000..735c71f
--- /dev/null
+++ b/frontend/src/lib/reader/foliate.ts
@@ -0,0 +1,32 @@
+import type { View } from '$foliate/view.js';
+
+let pending: Promise | undefined;
+
+/**
+ * Loads foliate-js and registers its custom elements.
+ *
+ * view.js calls customElements.define() at module scope and subclasses
+ * HTMLElement, and its class fields construct DOM helpers eagerly — so importing
+ * it on the server throws. This module is safe to import anywhere because it
+ * touches nothing at module scope; the vendored code is only pulled in when
+ * loadFoliate() is called, which must be from onMount or a browser guard.
+ *
+ * The promise is cached so concurrent callers share one load. ESM already dedupes
+ * module evaluation; this mainly makes the "define runs once" contract explicit.
+ * Editing a file under src/lib/vendor invalidates the module and re-runs
+ * customElements.define, which throws — hard-refresh after re-vendoring.
+ */
+export function loadFoliate(): Promise {
+ return (pending ??= import('$foliate/view.js').then(() => undefined));
+}
+
+/**
+ * Creates a . Call only after loadFoliate() has resolved.
+ *
+ * Built imperatively rather than written in markup so SSR never emits an unknown
+ * element for Svelte to hydrate, and so svelte-check has no unknown attributes to
+ * complain about.
+ */
+export function createFoliateView(): View {
+ return document.createElement('foliate-view') as View;
+}
diff --git a/frontend/src/lib/reader/legacy-cache.ts b/frontend/src/lib/reader/legacy-cache.ts
new file mode 100644
index 0000000..d609a41
--- /dev/null
+++ b/frontend/src/lib/reader/legacy-cache.ts
@@ -0,0 +1,29 @@
+const PURGED_FLAG = 'chitai:locations-purged';
+
+/** Keys the epub.js reader wrote: `${bookId}-locations`. */
+const LEGACY_KEY = /^\d+-locations$/;
+
+/**
+ * Drops the epub.js locations cache, once per browser.
+ *
+ * foliate computes progress from section byte sizes at open time, so there is no
+ * locations pre-pass and nothing to cache. The old entries are not small — a
+ * few hundred KB of JSON per long book against a 5–10 MB origin quota — and a
+ * heavy reader sitting near the cap would make the new settings write throw
+ * QuotaExceededError.
+ *
+ * Removable once deployments have had a release to run it; see TODO.md.
+ */
+export function purgeLegacyLocationCache() {
+ try {
+ if (localStorage.getItem(PURGED_FLAG)) return;
+
+ for (const key of Object.keys(localStorage)) {
+ if (LEGACY_KEY.test(key)) localStorage.removeItem(key);
+ }
+
+ localStorage.setItem(PURGED_FLAG, '1');
+ } catch (error) {
+ console.warn('Could not purge the legacy locations cache', error);
+ }
+}
diff --git a/frontend/src/lib/reader/progress.ts b/frontend/src/lib/reader/progress.ts
new file mode 100644
index 0000000..db2d44d
--- /dev/null
+++ b/frontend/src/lib/reader/progress.ts
@@ -0,0 +1,114 @@
+interface PendingProgress {
+ percentage: number;
+ epub_cfi: string;
+ completed: boolean;
+}
+
+/** Treat the last stretch as finished: fraction is a float and never lands on 1. */
+const COMPLETE_AT = 0.99;
+
+const SAVE_DEBOUNCE_MS = 3000;
+
+/**
+ * Debounced reading-progress writer.
+ *
+ * Progress goes through the catch-all proxy rather than a remote function. That
+ * looks like a convention violation but is the documented exception: the browser
+ * itself must send this, and the closing write uses sendBeacon, which needs a
+ * plain URL and body rather than a remote command's envelope. The httpOnly
+ * authToken cookie rides along and the proxy attaches the bearer header.
+ */
+export class ProgressReporter {
+ #url: string;
+ #timer: ReturnType | undefined;
+ #pending: PendingProgress | null = null;
+ #listening = false;
+
+ constructor(bookId: string | number) {
+ this.#url = `/api/books/progress/${bookId}`;
+ }
+
+ /**
+ * Starts flushing on the way out.
+ *
+ * pagehide and a hidden visibilitychange, not beforeunload: mobile Safari
+ * fires beforeunload unreliably and it blocks the bfcache.
+ */
+ listen() {
+ if (this.#listening || typeof document === 'undefined') return;
+ document.addEventListener('visibilitychange', this.#onVisibilityChange);
+ window.addEventListener('pagehide', this.#onPageHide);
+ this.#listening = true;
+ }
+
+ record(percentage: number, epubCfi: string) {
+ this.#pending = {
+ percentage,
+ epub_cfi: epubCfi,
+ completed: percentage >= COMPLETE_AT
+ };
+
+ clearTimeout(this.#timer);
+ this.#timer = setTimeout(() => void this.flush(), SAVE_DEBOUNCE_MS);
+ }
+
+ /** Sends anything outstanding and waits for it. */
+ async flush() {
+ const body = this.#take();
+ if (!body) return;
+
+ try {
+ const response = await fetch(this.#url, {
+ method: 'POST',
+ // Without this the browser stamps text/plain and the proxy forwards it
+ // verbatim. Litestar decodes it anyway, which is why it went unnoticed.
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body),
+ keepalive: true
+ });
+
+ // A failed save must not interrupt reading, but should not be silent either.
+ if (!response.ok) console.error('Could not save reading progress', response.status);
+ } catch (error) {
+ console.error('Could not save reading progress', error);
+ }
+ }
+
+ /**
+ * Fire-and-forget flush for teardown.
+ *
+ * The old reader cleared its debounce timer on destroy without flushing, so a
+ * page turn within three seconds of leaving was dropped — and leaving is
+ * exactly when someone turns a last page.
+ */
+ flushSync() {
+ const body = this.#take();
+ if (!body) return;
+
+ const blob = new Blob([JSON.stringify(body)], { type: 'application/json' });
+ if (!navigator.sendBeacon?.(this.#url, blob)) void this.flush();
+ }
+
+ dispose() {
+ this.flushSync();
+ clearTimeout(this.#timer);
+ if (!this.#listening) return;
+ document.removeEventListener('visibilitychange', this.#onVisibilityChange);
+ window.removeEventListener('pagehide', this.#onPageHide);
+ this.#listening = false;
+ }
+
+ /** Claims the pending write so it cannot be sent twice. */
+ #take(): PendingProgress | null {
+ const body = this.#pending;
+ this.#pending = null;
+ clearTimeout(this.#timer);
+ return body;
+ }
+
+ #onVisibilityChange = () => {
+ if (document.visibilityState === 'hidden') this.flushSync();
+ };
+
+ #onPageHide = () => this.flushSync();
+}
diff --git a/frontend/src/lib/reader/settings.ts b/frontend/src/lib/reader/settings.ts
new file mode 100644
index 0000000..48105cc
--- /dev/null
+++ b/frontend/src/lib/reader/settings.ts
@@ -0,0 +1,86 @@
+import { FONT_STACKS } from '$lib/theme/presets';
+import { readerSettingsSchema, type ReaderSettings } from '$lib/schema/reader';
+
+export const READER_SETTINGS_STORAGE_KEY = 'chitai:reader-settings';
+
+/** Georgia — the app's own title face, and a reasonable default for long prose. */
+export const DEFAULT_READER_SETTINGS: ReaderSettings = {
+ fontFamily: FONT_STACKS[1].value,
+ fontSize: 18,
+ fontWeight: 400,
+ lineHeight: 1.6,
+ letterSpacing: 0,
+ margin: 48,
+ gap: 6,
+ // foliate caps the reading area at this times the column count, so 1000 gives
+ // a 2000px spread — enough to fill a large display rather than leaving the
+ // book as a narrow strip. Its own default of 720 is noticeably tight.
+ maxInlineSize: 1000,
+ maxColumnCount: 2,
+ flow: 'paginated',
+ justify: true,
+ hyphenate: true
+};
+
+/** Reused from the app theme: system stacks only, so nothing silently falls back. */
+export const READER_FONT_OPTIONS = FONT_STACKS;
+
+/** Slider bounds, kept next to the schema they mirror. */
+export const READER_BOUNDS = {
+ fontSize: { min: 12, max: 32, step: 1 },
+ fontWeight: { min: 300, max: 700, step: 100 },
+ lineHeight: { min: 1, max: 2.5, step: 0.05 },
+ letterSpacing: { min: -0.05, max: 0.2, step: 0.01 },
+ margin: { min: 0, max: 120, step: 4 },
+ gap: { min: 0, max: 15, step: 1 },
+ maxInlineSize: { min: 400, max: 2400, step: 20 }
+} as const;
+
+/**
+ * Reads stored settings, falling back to defaults on anything unusable.
+ *
+ * Unknown keys are stripped and missing ones filled, so settings added in a
+ * later release do not invalidate what a reader already has stored.
+ */
+export function loadReaderSettings(): ReaderSettings {
+ try {
+ const raw = localStorage.getItem(READER_SETTINGS_STORAGE_KEY);
+ if (!raw) return DEFAULT_READER_SETTINGS;
+ const parsed = readerSettingsSchema.safeParse({
+ ...DEFAULT_READER_SETTINGS,
+ ...JSON.parse(raw)
+ });
+ return parsed.success ? parsed.data : DEFAULT_READER_SETTINGS;
+ } catch {
+ return DEFAULT_READER_SETTINGS;
+ }
+}
+
+export function saveReaderSettings(settings: ReaderSettings) {
+ try {
+ localStorage.setItem(READER_SETTINGS_STORAGE_KEY, JSON.stringify(settings));
+ } catch (error) {
+ // A full quota must not stop anyone reading.
+ console.warn('Could not save reader settings', error);
+ }
+}
+
+/**
+ * The half of the settings that foliate takes as renderer attributes.
+ *
+ * The renderer has no JS property API — these must be set with setAttribute.
+ * Note there is no `margin` shorthand upstream, and no `spread`: on a reflowable
+ * book a two-page spread is max-column-count 2.
+ */
+export function toRendererAttributes(s: ReaderSettings): Record {
+ return {
+ flow: s.flow,
+ gap: `${s.gap}%`,
+ 'margin-top': `${s.margin}px`,
+ 'margin-bottom': `${s.margin}px`,
+ 'margin-left': `${s.margin}px`,
+ 'margin-right': `${s.margin}px`,
+ 'max-inline-size': `${s.maxInlineSize}px`,
+ 'max-column-count': String(s.maxColumnCount)
+ };
+}
diff --git a/frontend/src/lib/reader/stylesheet.ts b/frontend/src/lib/reader/stylesheet.ts
new file mode 100644
index 0000000..857b827
--- /dev/null
+++ b/frontend/src/lib/reader/stylesheet.ts
@@ -0,0 +1,163 @@
+import type { ReaderSettings } from '$lib/schema/reader';
+
+export interface ReaderPalette {
+ bg: string;
+ fg: string;
+ muted: string;
+ link: string;
+ dark: boolean;
+}
+
+/**
+ * Reads the app palette out of the live document.
+ *
+ * The reader route uses a +layout@ breakout, so it never runs (root)/+layout and
+ * cannot reach the theme context. It does not need to: hooks.server.ts inlines
+ *
+ >1|(21845&d)<<1;w=(61680&(w=(52428&w)>>2|(13107&w)<<2))>>4|(3855&w)<<4,c[d]=((65280&w)>>8|(255&w)<<8)>>1}var b=function(r,e,n){for(var i=r.length,t=0,f=new a(e);t>l]=u}else for(o=new a(i),t=0;t>15-r[t]);return o},s=new r(288);for(d=0;d<144;++d)s[d]=8;for(d=144;d<256;++d)s[d]=9;for(d=256;d<280;++d)s[d]=7;for(d=280;d<288;++d)s[d]=8;var h=new r(32);for(d=0;d<32;++d)h[d]=5;var y=b(s,9,1),g=b(h,5,1),p=function(r){for(var a=r[0],e=1;ea&&(a=r[e]);return a},k=function(r,a,e){var n=a/8|0;return(r[n]|r[n+1]<<8)>>(7&a)&e},m=function(r,a){var e=a/8|0;return(r[e]|r[e+1]<<8|r[e+2]<<16)>>(7&a)},x=["unexpected EOF","invalid block type","invalid length/literal","invalid distance","stream finished","no stream handler",,"no callback","invalid UTF-8 data","extra field too long","date not in range 1980-2099","filename too long","stream finishing","invalid zip data"],T=function(r,a,e){var n=new Error(a||x[r]);if(n.code=r,Error.captureStackTrace&&Error.captureStackTrace(n,T),!e)throw n;return n},E=function(a,e,f,o){var l=a.length,c=o?o.length:0;if(!l||e.f&&!e.l)return f||new r(0);var d=!f,w=d||2!=e.i,s=e.i;d&&(f=new r(3*l));var h=function(a){var e=f.length;if(a>e){var n=new r(Math.max(2*e,a));n.set(f),f=n}},x=e.f||0,E=e.p||0,z=e.b||0,A=e.l,U=e.d,D=e.m,F=e.n,M=8*l;do{if(!A){x=k(a,E,1);var S=k(a,E+1,3);if(E+=3,!S){var I=a[(N=4+((E+7)/8|0))-4]|a[N-3]<<8,O=N+I;if(O>l){s&&T(0);break}w&&h(z+I),f.set(a.subarray(N,O),z),e.b=z+=I,e.p=E=8*O,e.f=x;continue}if(1==S)A=y,U=g,D=9,F=5;else if(2==S){var j=k(a,E,31)+257,q=k(a,E+10,15)+4,B=j+k(a,E+5,31)+1;E+=14;for(var C=new r(B),G=new r(19),H=0;H>4)<16)C[H++]=N;else{var Q=0,R=0;for(16==N?(R=3+k(a,E,3),E+=2,Q=C[H-1]):17==N?(R=3+k(a,E,7),E+=3):18==N&&(R=11+k(a,E,127),E+=7);R--;)C[H++]=Q}}var V=C.subarray(0,j),W=C.subarray(j);D=p(V),F=p(W),A=b(V,D,1),U=b(W,F,1)}else T(1);if(E>M){s&&T(0);break}}w&&h(z+131072);for(var X=(1<>4;if((E+=15&Q)>M){s&&T(0);break}if(Q||T(2),$<256)f[z++]=$;else{if(256==$){Z=E,A=null;break}var _=$-254;if($>264){var rr=n[H=$-257];_=k(a,E,(1<>4;ar||T(3),E+=15&ar;W=u[er];if(er>3){rr=i[er];W+=m(a,E)&(1<M){s&&T(0);break}w&&h(z+131072);var nr=z+_;if(za.length)&&(n=a.length),new r(a.subarray(e,n))}(f,0,z):f.subarray(0,z)},z=new r(0);function A(r,a){return E(r.subarray((e=r,n=a&&a.dictionary,(8!=(15&e[0])||e[0]>>4>7||(e[0]<<8|e[1])%31)&&T(6,"invalid zlib data"),(e[1]>>5&1)==+!n&&T(6,"invalid zlib data: "+(32&e[1]?"need":"unexpected")+" dictionary"),2+(e[1]>>3&4)),-4),{i:2},a&&a.out,a&&a.dictionary);var e,n}var U="undefined"!=typeof TextDecoder&&new TextDecoder;try{U.decode(z,{stream:!0})}catch(r){}export{A as unzlibSync};
diff --git a/frontend/src/lib/vendor/foliate-js/vendor/zip.js b/frontend/src/lib/vendor/foliate-js/vendor/zip.js
new file mode 100644
index 0000000..a65fd86
--- /dev/null
+++ b/frontend/src/lib/vendor/foliate-js/vendor/zip.js
@@ -0,0 +1 @@
+const e=-2,t=-3,n=-5,i=[0,1,3,7,15,31,63,127,255,511,1023,2047,4095,8191,16383,32767,65535],r=[96,7,256,0,8,80,0,8,16,84,8,115,82,7,31,0,8,112,0,8,48,0,9,192,80,7,10,0,8,96,0,8,32,0,9,160,0,8,0,0,8,128,0,8,64,0,9,224,80,7,6,0,8,88,0,8,24,0,9,144,83,7,59,0,8,120,0,8,56,0,9,208,81,7,17,0,8,104,0,8,40,0,9,176,0,8,8,0,8,136,0,8,72,0,9,240,80,7,4,0,8,84,0,8,20,85,8,227,83,7,43,0,8,116,0,8,52,0,9,200,81,7,13,0,8,100,0,8,36,0,9,168,0,8,4,0,8,132,0,8,68,0,9,232,80,7,8,0,8,92,0,8,28,0,9,152,84,7,83,0,8,124,0,8,60,0,9,216,82,7,23,0,8,108,0,8,44,0,9,184,0,8,12,0,8,140,0,8,76,0,9,248,80,7,3,0,8,82,0,8,18,85,8,163,83,7,35,0,8,114,0,8,50,0,9,196,81,7,11,0,8,98,0,8,34,0,9,164,0,8,2,0,8,130,0,8,66,0,9,228,80,7,7,0,8,90,0,8,26,0,9,148,84,7,67,0,8,122,0,8,58,0,9,212,82,7,19,0,8,106,0,8,42,0,9,180,0,8,10,0,8,138,0,8,74,0,9,244,80,7,5,0,8,86,0,8,22,192,8,0,83,7,51,0,8,118,0,8,54,0,9,204,81,7,15,0,8,102,0,8,38,0,9,172,0,8,6,0,8,134,0,8,70,0,9,236,80,7,9,0,8,94,0,8,30,0,9,156,84,7,99,0,8,126,0,8,62,0,9,220,82,7,27,0,8,110,0,8,46,0,9,188,0,8,14,0,8,142,0,8,78,0,9,252,96,7,256,0,8,81,0,8,17,85,8,131,82,7,31,0,8,113,0,8,49,0,9,194,80,7,10,0,8,97,0,8,33,0,9,162,0,8,1,0,8,129,0,8,65,0,9,226,80,7,6,0,8,89,0,8,25,0,9,146,83,7,59,0,8,121,0,8,57,0,9,210,81,7,17,0,8,105,0,8,41,0,9,178,0,8,9,0,8,137,0,8,73,0,9,242,80,7,4,0,8,85,0,8,21,80,8,258,83,7,43,0,8,117,0,8,53,0,9,202,81,7,13,0,8,101,0,8,37,0,9,170,0,8,5,0,8,133,0,8,69,0,9,234,80,7,8,0,8,93,0,8,29,0,9,154,84,7,83,0,8,125,0,8,61,0,9,218,82,7,23,0,8,109,0,8,45,0,9,186,0,8,13,0,8,141,0,8,77,0,9,250,80,7,3,0,8,83,0,8,19,85,8,195,83,7,35,0,8,115,0,8,51,0,9,198,81,7,11,0,8,99,0,8,35,0,9,166,0,8,3,0,8,131,0,8,67,0,9,230,80,7,7,0,8,91,0,8,27,0,9,150,84,7,67,0,8,123,0,8,59,0,9,214,82,7,19,0,8,107,0,8,43,0,9,182,0,8,11,0,8,139,0,8,75,0,9,246,80,7,5,0,8,87,0,8,23,192,8,0,83,7,51,0,8,119,0,8,55,0,9,206,81,7,15,0,8,103,0,8,39,0,9,174,0,8,7,0,8,135,0,8,71,0,9,238,80,7,9,0,8,95,0,8,31,0,9,158,84,7,99,0,8,127,0,8,63,0,9,222,82,7,27,0,8,111,0,8,47,0,9,190,0,8,15,0,8,143,0,8,79,0,9,254,96,7,256,0,8,80,0,8,16,84,8,115,82,7,31,0,8,112,0,8,48,0,9,193,80,7,10,0,8,96,0,8,32,0,9,161,0,8,0,0,8,128,0,8,64,0,9,225,80,7,6,0,8,88,0,8,24,0,9,145,83,7,59,0,8,120,0,8,56,0,9,209,81,7,17,0,8,104,0,8,40,0,9,177,0,8,8,0,8,136,0,8,72,0,9,241,80,7,4,0,8,84,0,8,20,85,8,227,83,7,43,0,8,116,0,8,52,0,9,201,81,7,13,0,8,100,0,8,36,0,9,169,0,8,4,0,8,132,0,8,68,0,9,233,80,7,8,0,8,92,0,8,28,0,9,153,84,7,83,0,8,124,0,8,60,0,9,217,82,7,23,0,8,108,0,8,44,0,9,185,0,8,12,0,8,140,0,8,76,0,9,249,80,7,3,0,8,82,0,8,18,85,8,163,83,7,35,0,8,114,0,8,50,0,9,197,81,7,11,0,8,98,0,8,34,0,9,165,0,8,2,0,8,130,0,8,66,0,9,229,80,7,7,0,8,90,0,8,26,0,9,149,84,7,67,0,8,122,0,8,58,0,9,213,82,7,19,0,8,106,0,8,42,0,9,181,0,8,10,0,8,138,0,8,74,0,9,245,80,7,5,0,8,86,0,8,22,192,8,0,83,7,51,0,8,118,0,8,54,0,9,205,81,7,15,0,8,102,0,8,38,0,9,173,0,8,6,0,8,134,0,8,70,0,9,237,80,7,9,0,8,94,0,8,30,0,9,157,84,7,99,0,8,126,0,8,62,0,9,221,82,7,27,0,8,110,0,8,46,0,9,189,0,8,14,0,8,142,0,8,78,0,9,253,96,7,256,0,8,81,0,8,17,85,8,131,82,7,31,0,8,113,0,8,49,0,9,195,80,7,10,0,8,97,0,8,33,0,9,163,0,8,1,0,8,129,0,8,65,0,9,227,80,7,6,0,8,89,0,8,25,0,9,147,83,7,59,0,8,121,0,8,57,0,9,211,81,7,17,0,8,105,0,8,41,0,9,179,0,8,9,0,8,137,0,8,73,0,9,243,80,7,4,0,8,85,0,8,21,80,8,258,83,7,43,0,8,117,0,8,53,0,9,203,81,7,13,0,8,101,0,8,37,0,9,171,0,8,5,0,8,133,0,8,69,0,9,235,80,7,8,0,8,93,0,8,29,0,9,155,84,7,83,0,8,125,0,8,61,0,9,219,82,7,23,0,8,109,0,8,45,0,9,187,0,8,13,0,8,141,0,8,77,0,9,251,80,7,3,0,8,83,0,8,19,85,8,195,83,7,35,0,8,115,0,8,51,0,9,199,81,7,11,0,8,99,0,8,35,0,9,167,0,8,3,0,8,131,0,8,67,0,9,231,80,7,7,0,8,91,0,8,27,0,9,151,84,7,67,0,8,123,0,8,59,0,9,215,82,7,19,0,8,107,0,8,43,0,9,183,0,8,11,0,8,139,0,8,75,0,9,247,80,7,5,0,8,87,0,8,23,192,8,0,83,7,51,0,8,119,0,8,55,0,9,207,81,7,15,0,8,103,0,8,39,0,9,175,0,8,7,0,8,135,0,8,71,0,9,239,80,7,9,0,8,95,0,8,31,0,9,159,84,7,99,0,8,127,0,8,63,0,9,223,82,7,27,0,8,111,0,8,47,0,9,191,0,8,15,0,8,143,0,8,79,0,9,255],a=[80,5,1,87,5,257,83,5,17,91,5,4097,81,5,5,89,5,1025,85,5,65,93,5,16385,80,5,3,88,5,513,84,5,33,92,5,8193,82,5,9,90,5,2049,86,5,129,192,5,24577,80,5,2,87,5,385,83,5,25,91,5,6145,81,5,7,89,5,1537,85,5,97,93,5,24577,80,5,4,88,5,769,84,5,49,92,5,12289,82,5,13,90,5,3073,86,5,193,192,5,24577],s=[3,4,5,6,7,8,9,10,11,13,15,17,19,23,27,31,35,43,51,59,67,83,99,115,131,163,195,227,258,0,0],o=[0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,112,112],l=[1,2,3,4,5,7,9,13,17,25,33,49,65,97,129,193,257,385,513,769,1025,1537,2049,3073,4097,6145,8193,12289,16385,24577],c=[0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13],u=15;function d(){let e,i,r,a,d,f;function h(e,i,s,o,l,c,h,w,_,b,p){let m,g,y,x,k,v,S,z,A,U,D,E,T,F,O;U=0,k=s;do{r[e[i+U]]++,U++,k--}while(0!==k);if(r[0]==s)return h[0]=-1,w[0]=0,0;for(z=w[0],v=1;v<=u&&0===r[v];v++);for(S=v,zk&&(z=k),w[0]=z,F=1<E+z;){if(x++,E+=z,O=y-E,O=O>z?z:O,(g=1<<(v=S-E))>m+1&&(g-=m+1,T=S,v1440)return t;d[x]=D=b[0],b[0]+=O,0!==x?(f[x]=k,a[0]=v,a[1]=z,v=k>>>E-z,a[2]=D-d[x-1]-v,_.set(a,3*(d[x-1]+v))):h[0]=D}for(a[1]=S-E,U>=s?a[0]=192:p[U]>>E;v>>=1)k^=v;for(k^=v,A=(1<257?(g==t?m.msg="oversubscribed distance tree":g==n?(m.msg="incomplete distance tree",g=t):-4!=g&&(m.msg="empty distance tree with lengths",g=t),g):0)}}d.inflate_trees_fixed=function(e,t,n,i){return e[0]=9,t[0]=5,n[0]=r,i[0]=a,0};function f(){const n=this;let r,a,s,o,l=0,c=0,u=0,d=0,f=0,h=0,w=0,_=0,b=0,p=0;function m(e,n,r,a,s,o,l,c){let u,d,f,h,w,_,b,p,m,g,y,x,k,v,S,z;b=c.next_in_index,p=c.avail_in,w=l.bitb,_=l.bitk,m=l.write,g=m>=d[z+1],_-=d[z+1],16&h){for(h&=15,k=d[z+2]+(w&i[h]),w>>=h,_-=h;_<15;)p--,w|=(255&c.read_byte(b++))<<_,_+=8;for(u=w&x,d=s,f=o,z=3*(f+u),h=d[z];;){if(w>>=d[z+1],_-=d[z+1],16&h){for(h&=15;_>=h,_-=h,g-=k,m>=v)S=m-v,m-S>0&&2>m-S?(l.win[m++]=l.win[S++],l.win[m++]=l.win[S++],k-=2):(l.win.set(l.win.subarray(S,S+2),m),m+=2,S+=2,k-=2);else{S=m-v;do{S+=l.end}while(S<0);if(h=l.end-S,k>h){if(k-=h,m-S>0&&h>m-S)do{l.win[m++]=l.win[S++]}while(0!=--h);else l.win.set(l.win.subarray(S,S+h),m),m+=h,S+=h,h=0;S=0}}if(m-S>0&&k>m-S)do{l.win[m++]=l.win[S++]}while(0!=--k);else l.win.set(l.win.subarray(S,S+k),m),m+=k,S+=k,k=0;break}if(64&h)return c.msg="invalid distance code",k=c.avail_in-p,k=_>>3>3:k,p+=k,b-=k,_-=k<<3,l.bitb=w,l.bitk=_,c.avail_in=p,c.total_in+=b-c.next_in_index,c.next_in_index=b,l.write=m,t;u+=d[z+2],u+=w&i[h],z=3*(f+u),h=d[z]}break}if(64&h)return 32&h?(k=c.avail_in-p,k=_>>3>3:k,p+=k,b-=k,_-=k<<3,l.bitb=w,l.bitk=_,c.avail_in=p,c.total_in+=b-c.next_in_index,c.next_in_index=b,l.write=m,1):(c.msg="invalid literal/length code",k=c.avail_in-p,k=_>>3>3:k,p+=k,b-=k,_-=k<<3,l.bitb=w,l.bitk=_,c.avail_in=p,c.total_in+=b-c.next_in_index,c.next_in_index=b,l.write=m,t);if(u+=d[z+2],u+=w&i[h],z=3*(f+u),0===(h=d[z])){w>>=d[z+1],_-=d[z+1],l.win[m++]=d[z+2],g--;break}}else w>>=d[z+1],_-=d[z+1],l.win[m++]=d[z+2],g--}while(g>=258&&p>=10);return k=c.avail_in-p,k=_>>3>3:k,p+=k,b-=k,_-=k<<3,l.bitb=w,l.bitk=_,c.avail_in=p,c.total_in+=b-c.next_in_index,c.next_in_index=b,l.write=m,0}n.init=function(e,t,n,i,l,c){r=0,w=e,_=t,s=n,b=i,o=l,p=c,a=null},n.proc=function(n,g,y){let x,k,v,S,z,A,U,D=0,E=0,T=0;for(T=g.next_in_index,S=g.avail_in,D=n.bitb,E=n.bitk,z=n.write,A=z=258&&S>=10&&(n.bitb=D,n.bitk=E,g.avail_in=S,g.total_in+=T-g.next_in_index,g.next_in_index=T,n.write=z,y=m(w,_,s,b,o,p,n,g),T=g.next_in_index,S=g.avail_in,D=n.bitb,E=n.bitk,z=n.write,A=z>>=a[k+1],E-=a[k+1],v=a[k],0===v){d=a[k+2],r=6;break}if(16&v){f=15&v,l=a[k+2],r=2;break}if(!(64&v)){u=v,c=k/3+a[k+2];break}if(32&v){r=7;break}return r=9,g.msg="invalid literal/length code",y=t,n.bitb=D,n.bitk=E,g.avail_in=S,g.total_in+=T-g.next_in_index,g.next_in_index=T,n.write=z,n.inflate_flush(g,y);case 2:for(x=f;E>=x,E-=x,u=_,a=o,c=p,r=3;case 3:for(x=u;E>=a[k+1],E-=a[k+1],v=a[k],16&v){f=15&v,h=a[k+2],r=4;break}if(!(64&v)){u=v,c=k/3+a[k+2];break}return r=9,g.msg="invalid distance code",y=t,n.bitb=D,n.bitk=E,g.avail_in=S,g.total_in+=T-g.next_in_index,g.next_in_index=T,n.write=z,n.inflate_flush(g,y);case 4:for(x=f;E>=x,E-=x,r=5;case 5:for(U=z-h;U<0;)U+=n.end;for(;0!==l;){if(0===A&&(z==n.end&&0!==n.read&&(z=0,A=z7&&(E-=8,S++,T--),n.write=z,y=n.inflate_flush(g,y),z=n.write,A=ze.avail_out&&(i=e.avail_out),0!==i&&t==n&&(t=0),e.avail_out-=i,e.total_out+=i,e.next_out.set(s.win.subarray(a,a+i),r),r+=i,a+=i,a==s.end&&(a=0,s.write==s.end&&(s.write=0),i=s.write-a,i>e.avail_out&&(i=e.avail_out),0!==i&&t==n&&(t=0),e.avail_out-=i,e.total_out+=i,e.next_out.set(s.win.subarray(a,a+i),r),r+=i,a+=i),e.next_out_index=r,s.read=a,t},s.proc=function(n,r){let a,f,x,k,v,S,z,A;for(k=n.next_in_index,v=n.avail_in,f=s.bitb,x=s.bitk,S=s.write,z=S>>1){case 0:f>>>=3,x-=3,a=7&x,f>>>=a,x-=a,l=1;break;case 1:U=[],D=[],E=[[]],T=[[]],d.inflate_trees_fixed(U,D,E,T),p.init(U[0],D[0],E[0],0,T[0],0),f>>>=3,x-=3,l=6;break;case 2:f>>>=3,x-=3,l=3;break;case 3:return f>>>=3,x-=3,l=9,n.msg="invalid block type",r=t,s.bitb=f,s.bitk=x,n.avail_in=v,n.total_in+=k-n.next_in_index,n.next_in_index=k,s.write=S,s.inflate_flush(n,r)}break;case 1:for(;x<32;){if(0===v)return s.bitb=f,s.bitk=x,n.avail_in=v,n.total_in+=k-n.next_in_index,n.next_in_index=k,s.write=S,s.inflate_flush(n,r);r=0,v--,f|=(255&n.read_byte(k++))<>>16&65535)!=(65535&f))return l=9,n.msg="invalid stored block lengths",r=t,s.bitb=f,s.bitk=x,n.avail_in=v,n.total_in+=k-n.next_in_index,n.next_in_index=k,s.write=S,s.inflate_flush(n,r);c=65535&f,f=x=0,l=0!==c?2:0!==m?7:0;break;case 2:if(0===v)return s.bitb=f,s.bitk=x,n.avail_in=v,n.total_in+=k-n.next_in_index,n.next_in_index=k,s.write=S,s.inflate_flush(n,r);if(0===z&&(S==s.end&&0!==s.read&&(S=0,z=Sv&&(a=v),a>z&&(a=z),s.win.set(n.read_buf(k,a),S),k+=a,v-=a,S+=a,z-=a,0!=(c-=a))break;l=0!==m?7:0;break;case 3:for(;x<14;){if(0===v)return s.bitb=f,s.bitk=x,n.avail_in=v,n.total_in+=k-n.next_in_index,n.next_in_index=k,s.write=S,s.inflate_flush(n,r);r=0,v--,f|=(255&n.read_byte(k++))<29||(a>>5&31)>29)return l=9,n.msg="too many length or distance symbols",r=t,s.bitb=f,s.bitk=x,n.avail_in=v,n.total_in+=k-n.next_in_index,n.next_in_index=k,s.write=S,s.inflate_flush(n,r);if(a=258+(31&a)+(a>>5&31),!o||o.length>>=14,x-=14,w=0,l=4;case 4:for(;w<4+(u>>>10);){for(;x<3;){if(0===v)return s.bitb=f,s.bitk=x,n.avail_in=v,n.total_in+=k-n.next_in_index,n.next_in_index=k,s.write=S,s.inflate_flush(n,r);r=0,v--,f|=(255&n.read_byte(k++))<>>=3,x-=3}for(;w<19;)o[h[w++]]=0;if(_[0]=7,a=y.inflate_trees_bits(o,_,b,g,n),0!=a)return(r=a)==t&&(o=null,l=9),s.bitb=f,s.bitk=x,n.avail_in=v,n.total_in+=k-n.next_in_index,n.next_in_index=k,s.write=S,s.inflate_flush(n,r);w=0,l=5;case 5:for(;a=u,!(w>=258+(31&a)+(a>>5&31));){let e,c;for(a=_[0];x>>=a,x-=a,o[w++]=c;else{for(A=18==c?7:c-14,e=18==c?11:3;x>>=a,x-=a,e+=f&i[A],f>>>=A,x-=A,A=w,a=u,A+e>258+(31&a)+(a>>5&31)||16==c&&A<1)return o=null,l=9,n.msg="invalid bit length repeat",r=t,s.bitb=f,s.bitk=x,n.avail_in=v,n.total_in+=k-n.next_in_index,n.next_in_index=k,s.write=S,s.inflate_flush(n,r);c=16==c?o[A-1]:0;do{o[A++]=c}while(0!=--e);w=A}}if(b[0]=-1,F=[],O=[],C=[],W=[],F[0]=9,O[0]=6,a=u,a=y.inflate_trees_dynamic(257+(31&a),1+(a>>5&31),o,F,O,C,W,g,n),0!=a)return a==t&&(o=null,l=9),r=a,s.bitb=f,s.bitk=x,n.avail_in=v,n.total_in+=k-n.next_in_index,n.next_in_index=k,s.write=S,s.inflate_flush(n,r);p.init(F[0],O[0],g,C[0],g,W[0]),l=6;case 6:if(s.bitb=f,s.bitk=x,n.avail_in=v,n.total_in+=k-n.next_in_index,n.next_in_index=k,s.write=S,1!=(r=p.proc(s,n,r)))return s.inflate_flush(n,r);if(r=0,p.free(n),k=n.next_in_index,v=n.avail_in,f=s.bitb,x=s.bitk,S=s.write,z=S15?(i.inflateEnd(t),e):(i.wbits=n,t.istate.blocks=new w(t,1<>4)>o.wbits){o.mode=_,i.msg="invalid win size",o.marker=5;break}o.mode=1;case 1:if(0===i.avail_in)return a;if(a=r,i.avail_in--,i.total_in++,s=255&i.read_byte(i.next_in_index++),((o.method<<8)+s)%31!=0){o.mode=_,i.msg="incorrect header check",o.marker=5;break}if(!(32&s)){o.mode=7;break}o.mode=2;case 2:if(0===i.avail_in)return a;a=r,i.avail_in--,i.total_in++,o.need=(255&i.read_byte(i.next_in_index++))<<24&4278190080,o.mode=3;case 3:if(0===i.avail_in)return a;a=r,i.avail_in--,i.total_in++,o.need+=(255&i.read_byte(i.next_in_index++))<<16&16711680,o.mode=4;case 4:if(0===i.avail_in)return a;a=r,i.avail_in--,i.total_in++,o.need+=(255&i.read_byte(i.next_in_index++))<<8&65280,o.mode=5;case 5:return 0===i.avail_in?a:(a=r,i.avail_in--,i.total_in++,o.need+=255&i.read_byte(i.next_in_index++),o.mode=6,2);case 6:return o.mode=_,i.msg="need dictionary",o.marker=0,e;case 7:if(a=o.blocks.proc(i,a),a==t){o.mode=_,o.marker=0;break}if(0==a&&(a=r),1!=a)return a;a=r,o.blocks.reset(i,o.was),o.mode=12;case 12:return i.avail_in=0,1;case _:return t;default:return e}},i.inflateSetDictionary=function(t,n,i){let r=0,a=i;if(!t||!t.istate||6!=t.istate.mode)return e;const s=t.istate;return a>=1<>>1^3988292384:t>>>=1;C[e]=t}class W{constructor(e){this.crc=e||-1}append(e){let t=0|this.crc;for(let n=0,i=0|e.length;n>>8^C[255&(t^e[n])];this.crc=t}get(){return~this.crc}}class j extends TransformStream{constructor(){let e;const t=new W;super({transform(e,n){t.append(e),n.enqueue(e)},flush(){const n=new Uint8Array(4);new DataView(n.buffer).setUint32(0,t.get()),e.value=n}}),e=this}}const M={concat(e,t){if(0===e.length||0===t.length)return e.concat(t);const n=e[e.length-1],i=M.getPartial(n);return 32===i?e.concat(t):M._shiftRight(t,i,0|n,e.slice(0,e.length-1))},bitLength(e){const t=e.length;if(0===t)return 0;const n=e[t-1];return 32*(t-1)+M.getPartial(n)},clamp(e,t){if(32*e.length0&&t&&(e[n-1]=M.partial(t,e[n-1]&2147483648>>t-1,1)),e},partial:(e,t,n)=>32===e?t:(n?0|t:t<<32-e)+1099511627776*e,getPartial:e=>Math.round(e/1099511627776)||32,_shiftRight(e,t,n,i){for(void 0===i&&(i=[]);t>=32;t-=32)i.push(n),n=0;if(0===t)return i.concat(e);for(let r=0;r>>t),n=e[r]<<32-t;const r=e.length?e[e.length-1]:0,a=M.getPartial(r);return i.push(M.partial(t+a&31,t+a>32?n:i.pop(),1)),i}},L={bytes:{fromBits(e){const t=M.bitLength(e)/8,n=new Uint8Array(t);let i;for(let r=0;r>>24,i<<=8;return n},toBits(e){const t=[];let n,i=0;for(n=0;n9007199254740991)throw new Error("Cannot hash more than 2^53 - 1 bits");const a=new Uint32Array(n);let s=0;for(let e=t.blockSize+i-(t.blockSize+i&t.blockSize-1);e<=r;e+=t.blockSize)t._block(a.subarray(16*s,16*(s+1))),s+=1;return n.splice(0,16*s),t}finalize(){const e=this;let t=e._buffer;const n=e._h;t=M.concat(t,[M.partial(1,1)]);for(let e=t.length+2;15&e;e++)t.push(0);for(t.push(Math.floor(e._length/4294967296)),t.push(0|e._length);t.length;)e._block(t.splice(0,16));return e.reset(),n}_f(e,t,n,i){return e<=19?t&n|~t&i:e<=39?t^n^i:e<=59?t&n|t&i|n&i:e<=79?t^n^i:void 0}_S(e,t){return t<>>32-e}_block(e){const t=this,n=t._h,i=Array(80);for(let t=0;t<16;t++)i[t]=e[t];let r=n[0],a=n[1],s=n[2],o=n[3],l=n[4];for(let e=0;e<=79;e++){e>=16&&(i[e]=t._S(1,i[e-3]^i[e-8]^i[e-14]^i[e-16]));const n=t._S(5,r)+t._f(e,a,s,o)+l+i[e]+t._key[Math.floor(e/20)]|0;l=o,o=s,s=t._S(30,a),a=r,r=n}n[0]=n[0]+r|0,n[1]=n[1]+a|0,n[2]=n[2]+s|0,n[3]=n[3]+o|0,n[4]=n[4]+l|0}}},R={aes:class{constructor(e){const t=this;t._tables=[[[],[],[],[],[]],[[],[],[],[],[]]],t._tables[0][0][0]||t._precompute();const n=t._tables[0][4],i=t._tables[1],r=e.length;let a,s,o,l=1;if(4!==r&&6!==r&&8!==r)throw new Error("invalid aes key size");for(t._key=[s=e.slice(0),o=[]],a=r;a<4*r+28;a++){let e=s[a-1];(a%r==0||8===r&&a%r==4)&&(e=n[e>>>24]<<24^n[e>>16&255]<<16^n[e>>8&255]<<8^n[255&e],a%r==0&&(e=e<<8^e>>>24^l<<24,l=l<<1^283*(l>>7))),s[a]=s[a-r]^e}for(let e=0;a;e++,a--){const t=s[3&e?a:a-4];o[e]=a<=4||e<4?t:i[0][n[t>>>24]]^i[1][n[t>>16&255]]^i[2][n[t>>8&255]]^i[3][n[255&t]]}}encrypt(e){return this._crypt(e,0)}decrypt(e){return this._crypt(e,1)}_precompute(){const e=this._tables[0],t=this._tables[1],n=e[4],i=t[4],r=[],a=[];let s,o,l,c;for(let e=0;e<256;e++)a[(r[e]=e<<1^283*(e>>7))^e]=e;for(let u=s=0;!n[u];u^=o||1,s=a[s]||1){let a=s^s<<1^s<<2^s<<3^s<<4;a=a>>8^255&a^99,n[u]=a,i[a]=u,c=r[l=r[o=r[u]]];let d=16843009*c^65537*l^257*o^16843008*u,f=257*r[a]^16843008*a;for(let n=0;n<4;n++)e[n][u]=f=f<<24^f>>>8,t[n][a]=d=d<<24^d>>>8}for(let n=0;n<5;n++)e[n]=e[n].slice(0),t[n]=t[n].slice(0)}_crypt(e,t){if(4!==e.length)throw new Error("invalid aes block size");const n=this._key[t],i=n.length/4-2,r=[0,0,0,0],a=this._tables[t],s=a[0],o=a[1],l=a[2],c=a[3],u=a[4];let d,f,h,w=e[0]^n[0],_=e[t?3:1]^n[1],b=e[2]^n[2],p=e[t?1:3]^n[3],m=4;for(let e=0;e>>24]^o[_>>16&255]^l[b>>8&255]^c[255&p]^n[m],f=s[_>>>24]^o[b>>16&255]^l[p>>8&255]^c[255&w]^n[m+1],h=s[b>>>24]^o[p>>16&255]^l[w>>8&255]^c[255&_]^n[m+2],p=s[p>>>24]^o[w>>16&255]^l[_>>8&255]^c[255&b]^n[m+3],m+=4,w=d,_=f,b=h;for(let e=0;e<4;e++)r[t?3&-e:e]=u[w>>>24]<<24^u[_>>16&255]<<16^u[b>>8&255]<<8^u[255&p]^n[m++],d=w,w=_,_=b,b=p,p=d;return r}}},B={getRandomValues(e){const t=new Uint32Array(e.buffer),n=e=>{let t=987654321;const n=4294967295;return function(){t=36969*(65535&t)+(t>>16)&n;return(((t<<16)+(e=18e3*(65535&e)+(e>>16)&n)&n)/4294967296+.5)*(Math.random()>.5?1:-1)}};for(let i,r=0;r>24))e+=1<<24;else{let t=e>>16&255,n=e>>8&255,i=255&e;255===t?(t=0,255===n?(n=0,255===i?i=0:++i):++n):++t,e=0,e+=t<<16,e+=n<<8,e+=i}return e}incCounter(e){0===(e[0]=this.incWord(e[0]))&&(e[1]=this.incWord(e[1]))}calculate(e,t,n){let i;if(!(i=t.length))return[];const r=M.bitLength(t);for(let r=0;rnew N.hmacSha1(L.bytes.toBits(e)),pbkdf2(e,t,n,i){if(n=n||1e4,i<0||n<0)throw new Error("invalid params to pbkdf2");const r=1+(i>>5)<<2;let a,s,o,l,c;const u=new ArrayBuffer(r),d=new DataView(u);let f=0;const h=M;for(t=L.bytes.toBits(t),c=1;f<(r||1);c++){for(a=s=e.encrypt(h.concat(t,[c])),o=1;or&&(e=(new n).update(e).finalize());for(let t=0;tthis.resolveReady=e)),password:be(e,t),signed:n,strength:i-1,pending:new Uint8Array})},async transform(e,t){const n=this,{password:i,strength:a,resolveReady:s,ready:o}=n;i?(await async function(e,t,n,i){const r=await _e(e,t,n,me(i,0,$[t])),a=me(i,$[t]);if(r[0]!=a[0]||r[1]!=a[1])throw new Error(q)}(n,a,i,me(e,0,$[a]+2)),e=me(e,$[a]+2),r?t.error(new Error(K)):s()):await o;const l=new Uint8Array(e.length-te-(e.length-te)%G);t.enqueue(we(n,e,l,0,te,!0))},async flush(e){const{signed:t,ctr:n,hmac:i,pending:r,ready:a}=this;if(i&&n){await a;const s=me(r,0,r.length-te),o=me(r,r.length-te);let l=new Uint8Array;if(s.length){const e=ye(se,s);i.update(e);const t=n.update(e);l=ge(se,t)}if(t){const e=me(ge(se,i.digest()),0,te);for(let t=0;tthis.resolveReady=e)),password:be(e,t),strength:n-1,pending:new Uint8Array})},async transform(e,t){const n=this,{password:i,strength:r,resolveReady:a,ready:s}=n;let o=new Uint8Array;i?(o=await async function(e,t,n){const i=Z(new Uint8Array($[t])),r=await _e(e,t,n,i);return pe(i,r)}(n,r,i),a()):await s;const l=new Uint8Array(o.length+e.length-e.length%G);l.set(o,0),t.enqueue(we(n,e,l,o.length,0))},async flush(e){const{ctr:t,hmac:n,pending:r,ready:a}=this;if(n&&t){await a;let s=new Uint8Array;if(r.length){const e=t.update(ye(se,r));n.update(e),s=ge(se,e)}i.signature=ge(se,n.digest()).slice(0,te),e.enqueue(pe(s,i.signature))}}}),i=this}}function we(e,t,n,i,r,a){const{ctr:s,hmac:o,pending:l}=e,c=t.length-r;let u;for(l.length&&(t=pe(l,t),n=function(e,t){if(t&&t>e.length){const n=e;(e=new Uint8Array(t)).set(n,0)}return e}(n,c-c%G)),u=0;u<=c-G;u+=G){const e=ye(se,me(t,u,u+G));a&&o.update(e);const r=s.update(e);a||o.update(r),n.set(ge(se,r),u+i)}return e.pending=me(t,u),n}async function _e(e,t,n,i){e.password=null;const r=await async function(e,t,n,i,r){if(!ue)return N.importKey(t);try{return await re.importKey(e,t,n,i,r)}catch(e){return ue=!1,N.importKey(t)}}("raw",n,Q,!1,Y),a=await async function(e,t,n){if(!de)return N.pbkdf2(t,e.salt,X.iterations,n);try{return await re.deriveBits(e,t,n)}catch(i){return de=!1,N.pbkdf2(t,e.salt,X.iterations,n)}}(Object.assign({salt:i},X),r,8*(2*ee[t]+2)),s=new Uint8Array(a),o=ye(se,me(s,0,ee[t])),l=ye(se,me(s,ee[t],2*ee[t])),c=me(s,2*ee[t]);return Object.assign(e,{keys:{key:o,authentication:l,passwordVerification:c},ctr:new le(new oe(o),Array.from(ne)),hmac:new ce(l)}),c}function be(e,t){return t===S?function(e){if(typeof TextEncoder==z){e=unescape(encodeURIComponent(e));const t=new Uint8Array(e.length);for(let n=0;n>>24]),r=~e.crcKey2.get(),e.keys=[n,i,r]}function De(e){const t=2|e.keys[2];return Ee(Math.imul(t,1^t)>>>8)}function Ee(e){return 255&e}function Te(e){return 4294967295&e}const Fe="deflate-raw";class Oe extends TransformStream{constructor(e,{chunkSize:t,CompressionStream:n,CompressionStreamNative:i}){super({});const{compressed:r,encrypted:a,useCompressionStream:s,zipCrypto:o,signed:l,level:c}=e,u=this;let d,f,h=We(super.readable);a&&!o||!l||(d=new j,h=Le(h,d)),r&&(h=Me(h,s,{level:c,chunkSize:t},i,n)),a&&(o?h=Le(h,new ve(e)):(f=new he(e),h=Le(h,f))),je(u,h,(()=>{let e;a&&!o&&(e=f.signature),a&&!o||!l||(e=new DataView(d.value.buffer).getUint32(0)),u.signature=e}))}}class Ce extends TransformStream{constructor(e,{chunkSize:t,DecompressionStream:n,DecompressionStreamNative:i}){super({});const{zipCrypto:r,encrypted:a,signed:s,signature:o,compressed:l,useCompressionStream:c}=e;let u,d,f=We(super.readable);a&&(r?f=Le(f,new ke(e)):(d=new fe(e),f=Le(f,d))),l&&(f=Me(f,c,{chunkSize:t},i,n)),a&&!r||!s||(u=new j,f=Le(f,u)),je(this,f,(()=>{if((!a||r)&&s){const e=new DataView(u.value.buffer);if(o!=e.getUint32(0,!1))throw new Error(H)}}))}}function We(e){return Le(e,new TransformStream({transform(e,t){e&&e.length&&t.enqueue(e)}}))}function je(e,t,n){t=Le(t,new TransformStream({flush:n})),Object.defineProperty(e,"readable",{get:()=>t})}function Me(e,t,n,i,r){try{e=Le(e,new(t&&i?i:r)(Fe,n))}catch(i){if(!t)return e;try{e=Le(e,new r(Fe,n))}catch(t){return e}}return e}function Le(e,t){return e.pipeThrough(t)}const Pe="message",Re="start",Be="pull",Ie="data",Ne="close",Ve="inflate";class qe extends TransformStream{constructor(e,t){super({});const n=this,{codecType:i}=e;let r;i.startsWith("deflate")?r=Oe:i.startsWith(Ve)&&(r=Ce);let a=0,s=0;const o=new r(e,t),l=super.readable,c=new TransformStream({transform(e,t){e&&e.length&&(s+=e.length,t.enqueue(e))},flush(){Object.assign(n,{inputSize:s})}}),u=new TransformStream({transform(e,t){e&&e.length&&(a+=e.length,t.enqueue(e))},flush(){const{signature:e}=o;Object.assign(n,{signature:e,outputSize:a,inputSize:s})}});Object.defineProperty(n,"readable",{get:()=>l.pipeThrough(c).pipeThrough(o).pipeThrough(u)})}}class He extends TransformStream{constructor(e){let t;super({transform:function n(i,r){if(t){const e=new Uint8Array(t.length+i.length);e.set(t),e.set(i,t.length),i=e,t=null}i.length>e?(r.enqueue(i.slice(0,e)),n(i.slice(e),r)):t=i},flush(e){t&&t.length&&e.enqueue(t)}})}}let Ke=typeof Worker!=z;class Ze{constructor(e,{readable:t,writable:n},{options:i,config:r,streamOptions:a,useWebWorkers:s,transferStreams:o,scripts:l},c){const{signal:u}=a;return Object.assign(e,{busy:!0,readable:t.pipeThrough(new He(r.chunkSize)).pipeThrough(new Ge(t,a),{signal:u}),writable:n,options:Object.assign({},i),scripts:l,transferStreams:o,terminate:()=>new Promise((t=>{const{worker:n,busy:i}=e;n?(i?e.resolveTerminated=t:(n.terminate(),t()),e.interface=null):t()})),onTaskFinished(){const{resolveTerminated:t}=e;t&&(e.resolveTerminated=null,e.terminated=!0,e.worker.terminate(),t()),e.busy=!1,c(e)}}),(s&&Ke?Xe:Qe)(e,r)}}class Ge extends TransformStream{constructor(e,{onstart:t,onprogress:n,size:i,onend:r}){let a=0;super({async start(){t&&await Je(t,i)},async transform(e,t){a+=e.length,n&&await Je(n,a,i),t.enqueue(e)},async flush(){e.size=a,r&&await Je(r,a)}})}}async function Je(e,...t){try{await e(...t)}catch(e){}}function Qe(e,t){return{run:()=>async function({options:e,readable:t,writable:n,onTaskFinished:i},r){try{const i=new qe(e,r);await t.pipeThrough(i).pipeTo(n,{preventClose:!0,preventAbort:!0});const{signature:a,inputSize:s,outputSize:o}=i;return{signature:a,inputSize:s,outputSize:o}}finally{i()}}(e,t)}}function Xe(e,t){const{baseURL:n,chunkSize:i}=t;if(!e.interface){let r;try{r=function(e,t,n){const i={type:"module"};let r,a;typeof e==A&&(e=e());try{r=new URL(e,t)}catch(t){r=e}if(Ye)try{a=new Worker(r)}catch(e){Ye=!1,a=new Worker(r,i)}else a=new Worker(r,i);return a.addEventListener(Pe,(e=>async function({data:e},t){const{type:n,value:i,messageId:r,result:a,error:s}=e,{reader:o,writer:l,resolveResult:c,rejectResult:u,onTaskFinished:d}=t;try{if(s){const{message:e,stack:t,code:n,name:i}=s,r=new Error(e);Object.assign(r,{stack:t,code:n,name:i}),f(r)}else{if(n==Be){const{value:e,done:n}=await o.read();et({type:Ie,value:e,done:n,messageId:r},t)}n==Ie&&(await l.ready,await l.write(new Uint8Array(i)),et({type:"ack",messageId:r},t)),n==Ne&&f(null,a)}}catch(s){et({type:Ne,messageId:r},t),f(s)}function f(e,t){e?u(e):c(t),l&&l.releaseLock(),d()}}(e,n))),a}(e.scripts[0],n,e)}catch(n){return Ke=!1,Qe(e,t)}Object.assign(e,{worker:r,interface:{run:()=>async function(e,t){let n,i;const r=new Promise(((e,t)=>{n=e,i=t}));Object.assign(e,{reader:null,writer:null,resolveResult:n,rejectResult:i,result:r});const{readable:a,options:s,scripts:o}=e,{writable:l,closed:c}=function(e){let t;const n=new Promise((e=>t=e)),i=new WritableStream({async write(t){const n=e.getWriter();await n.ready,await n.write(t),n.releaseLock()},close(){t()},abort:t=>e.getWriter().abort(t)});return{writable:i,closed:n}}(e.writable),u=et({type:Re,scripts:o.slice(1),options:s,config:t,readable:a,writable:l},e);u||Object.assign(e,{reader:a.getReader(),writer:l.getWriter()});const d=await r;u||await l.getWriter().close();return await c,d}(e,{chunkSize:i})}})}return e.interface}let Ye=!0,$e=!0;function et(e,{worker:t,writer:n,onTaskFinished:i,transferStreams:r}){try{let{value:n,readable:i,writable:a}=e;const s=[];if(n&&(n.byteLength!e.busy));if(n)return at(n),new Ze(n,e,t,w);if(tt.lengthnt.push({resolve:n,stream:e,workerOptions:t})))}()).run();function w(e){if(nt.length){const[{resolve:t,stream:n,workerOptions:i}]=nt.splice(0,1);t(new Ze(e,n,i,w))}else e.worker?(at(e),function(e,t){const{config:n}=t,{terminateWorkerTimeout:i}=n;Number.isFinite(i)&&i>=0&&(e.terminated?e.terminated=!1:e.terminateTimeout=setTimeout((async()=>{tt=tt.filter((t=>t!=e));try{await e.terminate()}catch(e){}}),i))}(e,t)):tt=tt.filter((t=>t!=e))}}function at(e){const{terminateTimeout:t}=e;t&&(clearTimeout(t),e.terminateTimeout=null)}const st=65536,ot="writable";class lt{constructor(){this.size=0}init(){this.initialized=!0}}class ct extends lt{get readable(){const e=this,{chunkSize:t=st}=e,n=new ReadableStream({start(){this.chunkOffset=0},async pull(i){const{offset:r=0,size:a,diskNumberStart:s}=n,{chunkOffset:o}=this;i.enqueue(await pt(e,r+o,Math.min(t,a-o),s)),o+t>a?i.close():this.chunkOffset+=t}});return n}}class ut extends ct{constructor(e){super(),Object.assign(this,{blob:e,size:e.size})}async readUint8Array(e,t){const n=this,i=e+t,r=e||it&&(a=a.slice(e,i)),new Uint8Array(a)}}class dt extends lt{constructor(e){super();const t=new TransformStream,n=[];e&&n.push(["Content-Type",e]),Object.defineProperty(this,ot,{get:()=>t.writable}),this.blob=new Response(t.readable,{headers:n}).blob()}getData(){return this.blob}}class ft extends dt{constructor(e){super(e),Object.assign(this,{encoding:e,utf8:!e||"utf-8"==e.toLowerCase()})}async getData(){const{encoding:e,utf8:t}=this,n=await super.getData();if(n.text&&t)return n.text();{const t=new FileReader;return new Promise(((i,r)=>{Object.assign(t,{onload:({target:e})=>i(e.result),onerror:()=>r(t.error)}),t.readAsText(n,e)}))}}}class ht extends ct{constructor(e){super(),this.readers=e}async init(){const e=this,{readers:t}=e;e.lastDiskNumber=0,e.lastDiskOffset=0,await Promise.all(t.map((async(n,i)=>{await n.init(),i!=t.length-1&&(e.lastDiskOffset+=n.size),e.size+=n.size}))),super.init()}async readUint8Array(e,t,n=0){const i=this,{readers:r}=this;let a,s=n;-1==s&&(s=r.length-1);let o=e;for(;o>=r[s].size;)o-=r[s].size,s++;const l=r[s],c=l.size;if(o+t<=c)a=await pt(l,o,t);else{const r=c-o;a=new Uint8Array(t),a.set(await pt(l,o,r)),a.set(await i.readUint8Array(e+r,t-r,n),r)}return i.lastDiskNumber=Math.max(s,i.lastDiskNumber),a}}class wt extends lt{constructor(e,t=4294967295){super();const n=this;let i,r,a;Object.assign(n,{diskNumber:0,diskOffset:0,size:0,maxSize:t,availableSize:t});const s=new WritableStream({async write(t){const{availableSize:s}=n;if(a)t.length>=s?(await o(t.slice(0,s)),await l(),n.diskOffset+=i.size,n.diskNumber++,a=null,await this.write(t.slice(s))):await o(t);else{const{value:s,done:o}=await e.next();if(o&&!s)throw new Error("Writer iterator completed too soon");i=s,i.size=0,i.maxSize&&(n.maxSize=i.maxSize),n.availableSize=n.maxSize,await _t(i),r=s.writable,a=r.getWriter(),await this.write(t)}},async close(){await a.ready,await l()}});async function o(e){const t=e.length;t&&(await a.ready,await a.write(e),i.size+=t,n.size+=t,n.availableSize-=t)}async function l(){r.size=i.size,await a.close()}Object.defineProperty(n,ot,{get:()=>s})}}async function _t(e,t){if(!e.init||e.initialized)return Promise.resolve();await e.init(t)}function bt(e){return Array.isArray(e)&&(e=new ht(e)),e instanceof ReadableStream&&(e={readable:e}),e}function pt(e,t,n,i){return e.readUint8Array(t,n,i)}const mt="\0☺☻♥♦♣♠•◘○◙♂♀♪♫☼►◄↕‼¶§▬↨↑↓→←∟↔▲▼ !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~⌂ÇüéâäàåçêëèïîìÄÅÉæÆôöòûùÿÖÜ¢£¥₧ƒáíóúñѪº¿⌐¬½¼¡«»░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀αßΓπΣσµτΦΘΩδ∞φε∩≡±≥≤⌠⌡÷≈°∙·√ⁿ²■ ".split(""),gt=256==mt.length;function yt(e,t){return t&&"cp437"==t.trim().toLowerCase()?function(e){if(gt){let t="";for(let n=0;nthis[t]=e[t]))}}const Lt="File format is not recognized",Pt="Zip64 extra field not found",Rt="Compression method not supported",Bt="Split zip file",It="utf-8",Nt="cp437",Vt=[[zt,g],[At,g],[Ut,g],[Dt,y]],qt={[y]:{getValue:tn,bytes:4},[g]:{getValue:nn,bytes:8}};class Ht{constructor(e,t={}){Object.assign(this,{reader:bt(e),options:t,config:T})}async*getEntriesGenerator(e={}){const t=this;let{reader:n}=t;const{config:i}=t;if(await _t(n),n.size!==S&&n.readUint8Array||(n=new ut(await new Response(n.readable).blob()),await _t(n)),n.size=0;e--)if(s[e]==a[0]&&s[e+1]==a[1]&&s[e+2]==a[2]&&s[e+3]==a[3])return{offset:r+e,buffer:s.slice(e,e+i).buffer}}}(n,101010256,n.size,v,1048560);if(!r){throw 134695760==tn(rn(await pt(n,0,4)))?new Error(Bt):new Error("End of central directory not found")}const a=rn(r);let s=tn(a,12),o=tn(a,16);const l=r.offset,c=en(a,20),u=l+v+c;let d=en(a,4);const f=n.lastDiskNumber||0;let h=en(a,6),w=en(a,8),_=0,b=0;if(o==g||s==g||w==y||h==y){const e=rn(await pt(n,r.offset-20,20));if(117853008==tn(e,0)){o=nn(e,8);let t=await pt(n,o,56,-1),i=rn(t);const a=r.offset-20-56;if(tn(i,0)!=k&&o!=a){const e=o;o=a,_=o-e,t=await pt(n,o,56,-1),i=rn(t)}if(tn(i,0)!=k)throw new Error("End of Zip64 central directory locator not found");d==y&&(d=tn(i,16)),h==y&&(h=tn(i,20)),w==y&&(w=nn(i,32)),s==g&&(s=nn(i,40)),o-=s}}if(o>=n.size&&(_=n.size-o-s-v,o=n.size-s-v),f!=d)throw new Error(Bt);if(o<0)throw new Error(Lt);let p=0,m=await pt(n,o,s,h),z=rn(m);if(s){const e=r.offset-s;if(tn(z,p)!=x&&o!=e){const t=o;o=e,_+=o-t,m=await pt(n,o,s,h),z=rn(m)}}const A=r.offset-o-(n.lastDiskOffset||0);if(s!=A&&A>=0&&(s=A,m=await pt(n,o,s,h),z=rn(m)),o<0||o>=n.size)throw new Error(Lt);const U=Qt(t,e,"filenameEncoding"),D=Qt(t,e,"commentEncoding");for(let r=0;ra.getData(e,j,t),p=g;const{onprogress:M}=e;if(M)try{await M(r+1,w,new Mt(a))}catch(e){}yield j}const E=Qt(t,e,"extractPrependedData"),T=Qt(t,e,"extractAppendedData");return E&&(t.prependedData=b>0?await pt(n,0,b):new Uint8Array),t.comment=c?await pt(n,l+v,c):new Uint8Array,T&&(t.appendedData=u>>8&255:d>>>24&255),signature:d,compressed:0!=l&&!g,encrypted:i.encrypted&&!g,useWebWorkers:Qt(i,n,"useWebWorkers"),useCompressionStream:Qt(i,n,"useCompressionStream"),transferStreams:Qt(i,n,"transferStreams"),checkPasswordOnly:D},config:c,streamOptions:{signal:U,size:v,onstart:T,onprogress:F,onend:O}};let W=0;try{({outputSize:W}=await rt({readable:z,writable:E},C))}catch(e){if(!D||e.message!=K)throw e}finally{const e=Qt(i,n,"preventClose");E.size+=W,e||E.locked||await E.getWriter().close()}return D?S:e.getData?e.getData():E}}function Zt(e,t,n){const i=e.rawBitFlag=en(t,n+2),r=!(1&~i),a=tn(t,n+6);Object.assign(e,{encrypted:r,version:en(t,n),bitFlag:{level:(6&i)>>1,dataDescriptor:!(8&~i),languageEncodingFlag:!(2048&~i)},rawLastModDate:a,lastModDate:Xt(a),filenameLength:en(t,n+22),extraFieldLength:en(t,n+24)})}async function Gt(e,t,n,i,r){const{rawExtraField:a}=t,s=t.extraField=new Map,o=rn(new Uint8Array(a));let l=0;try{for(;lt[e]==n));for(let r=0,a=0;r=5&&(a.push(Et),s.push(Tt));let o=1;a.forEach(((n,r)=>{if(e.data.length>=o+4){const a=tn(i,o);t[n]=e[n]=new Date(1e3*a);const l=s[r];e[l]=a}o+=4}))}(_,t,r),t.extraFieldExtendedTimestamp=_);const b=s.get(6534);b&&(t.extraFieldUSDZ=b)}async function Jt(e,t,n,i,r){const a=rn(e.data),s=new W;s.append(r[n]);const o=rn(new Uint8Array(4));o.setUint32(0,s.get(),!0);const l=tn(a,1);Object.assign(e,{version:$t(a,0),[t]:yt(e.data.subarray(5)),valid:!r.bitFlag.languageEncodingFlag&&l==tn(o,0)}),e.valid&&(i[t]=e[t],i[t+"UTF8"]=!0)}function Qt(e,t,n){return t[n]===S?e.options[n]:t[n]}function Xt(e){const t=(4294901760&e)>>16,n=65535&e;try{return new Date(1980+((65024&t)>>9),((480&t)>>5)-1,31&t,(63488&n)>>11,(2016&n)>>5,2*(31&n),0)}catch(e){}}function Yt(e){return new Date(Number(e/BigInt(1e4)-BigInt(116444736e5)))}function $t(e,t){return e.getUint8(t)}function en(e,t){return e.getUint16(t,!0)}function tn(e,t){return e.getUint32(t,!0)}function nn(e,t){return Number(e.getBigUint64(t,!0))}function rn(e){return new DataView(e.buffer)}F({Inflate:function(e){const t=new m,i=e&&e.chunkSize?Math.floor(2*e.chunkSize):131072,r=new Uint8Array(i);let a=!1;t.inflateInit(),t.next_out=r,this.append=function(e,s){const o=[];let l,c,u=0,d=0,f=0;if(0!==e.length){t.next_in_index=0,t.next_in=e,t.avail_in=e.length;do{if(t.next_out_index=0,t.avail_out=i,0!==t.avail_in||a||(t.next_in_index=0,a=!0),l=t.inflate(0),a&&l===n){if(0!==t.avail_in)throw new Error("inflating: bad input")}else if(0!==l&&1!==l)throw new Error("inflating: "+t.msg);if((a||1===l)&&t.avail_in===e.length)throw new Error("inflating: bad input");t.next_out_index&&(t.next_out_index===i?o.push(new Uint8Array(r)):o.push(r.subarray(0,t.next_out_index))),f+=t.next_out_index,s&&t.next_in_index>0&&t.next_in_index!=u&&(s(t.next_in_index),u=t.next_in_index)}while(t.avail_in>0||0===t.avail_out);return o.length>1?(c=new Uint8Array(f),o.forEach((function(e){c.set(e,d),d+=e.length}))):c=o[0]?new Uint8Array(o[0]):new Uint8Array,c}},this.flush=function(){t.inflateEnd()}}});export{ut as BlobReader,dt as BlobWriter,ft as TextWriter,Ht as ZipReader,F as configure};
diff --git a/frontend/src/lib/vendor/foliate-js/view.js b/frontend/src/lib/vendor/foliate-js/view.js
new file mode 100644
index 0000000..2443fa3
--- /dev/null
+++ b/frontend/src/lib/vendor/foliate-js/view.js
@@ -0,0 +1,704 @@
+import * as CFI from './epubcfi.js'
+import { TOCProgress, SectionProgress, PageProgress } from './progress.js'
+import { Overlayer } from './overlayer.js'
+import { textWalker } from './text-walker.js'
+
+const SEARCH_PREFIX = 'foliate-search:'
+
+const NOTE_PREFIX = 'foliate-note:'
+
+const isZip = async file => {
+ const arr = new Uint8Array(await file.slice(0, 4).arrayBuffer())
+ return arr[0] === 0x50 && arr[1] === 0x4b && arr[2] === 0x03 && arr[3] === 0x04
+}
+
+const isPDF = async file => {
+ const arr = new Uint8Array(await file.slice(0, 5).arrayBuffer())
+ return arr[0] === 0x25
+ && arr[1] === 0x50 && arr[2] === 0x44 && arr[3] === 0x46
+ && arr[4] === 0x2d
+}
+
+const isCBZ = ({ name, type }) =>
+ type === 'application/vnd.comicbook+zip' || name.endsWith('.cbz')
+
+const isFB2 = ({ name, type }) =>
+ type === 'application/x-fictionbook+xml' || name.endsWith('.fb2')
+
+const isFBZ = ({ name, type }) =>
+ type === 'application/x-zip-compressed-fb2'
+ || name.endsWith('.fb2.zip') || name.endsWith('.fbz')
+
+const makeZipLoader = async file => {
+ const { configure, ZipReader, BlobReader, TextWriter, BlobWriter } =
+ await import('./vendor/zip.js')
+ configure({ useWebWorkers: false })
+ const reader = new ZipReader(new BlobReader(file))
+ const entries = await reader.getEntries()
+ const map = new Map(entries.map(entry => [entry.filename, entry]))
+ const load = f => (name, ...args) =>
+ map.has(name) ? f(map.get(name), ...args) : null
+ const loadText = load(entry => entry.getData(new TextWriter()))
+ const loadBlob = load((entry, type) => entry.getData(new BlobWriter(type)))
+ const getSize = name => map.get(name)?.uncompressedSize ?? 0
+ return { entries, loadText, loadBlob, getSize }
+}
+
+const getFileEntries = async entry => entry.isFile ? entry
+ : (await Promise.all(Array.from(
+ await new Promise((resolve, reject) => entry.createReader()
+ .readEntries(entries => resolve(entries), error => reject(error))),
+ getFileEntries))).flat()
+
+const makeDirectoryLoader = async entry => {
+ const entries = await getFileEntries(entry)
+ const files = await Promise.all(
+ entries.map(entry => new Promise((resolve, reject) =>
+ entry.file(file => resolve([file, entry.fullPath]),
+ error => reject(error)))))
+ const map = new Map(files.map(([file, path]) =>
+ [path.replace(entry.fullPath + '/', ''), file]))
+ const decoder = new TextDecoder()
+ const decode = x => x ? decoder.decode(x) : null
+ const getBuffer = name => map.get(name)?.arrayBuffer() ?? null
+ const loadText = async name => decode(await getBuffer(name))
+ const loadBlob = name => map.get(name)
+ const getSize = name => map.get(name)?.size ?? 0
+ return { loadText, loadBlob, getSize }
+}
+
+export class ResponseError extends Error {}
+export class NotFoundError extends Error {}
+export class UnsupportedTypeError extends Error {}
+
+const fetchFile = async url => {
+ const res = await fetch(url)
+ if (!res.ok) throw new ResponseError(
+ `${res.status} ${res.statusText}`, { cause: res })
+ return new File([await res.blob()], new URL(res.url).pathname)
+}
+
+export const makeBook = async file => {
+ if (typeof file === 'string') file = await fetchFile(file)
+ let book
+ if (file.isDirectory) {
+ const loader = await makeDirectoryLoader(file)
+ const { EPUB } = await import('./epub.js')
+ book = await new EPUB(loader).init()
+ }
+ else if (!file.size) throw new NotFoundError('File not found')
+ else if (await isZip(file)) {
+ const loader = await makeZipLoader(file)
+ if (isCBZ(file)) {
+ const { makeComicBook } = await import('./comic-book.js')
+ book = makeComicBook(loader, file)
+ }
+ else if (isFBZ(file)) {
+ const { makeFB2 } = await import('./fb2.js')
+ const { entries } = loader
+ const entry = entries.find(entry => entry.filename.endsWith('.fb2'))
+ const blob = await loader.loadBlob((entry ?? entries[0]).filename)
+ book = await makeFB2(blob)
+ }
+ else {
+ const { EPUB } = await import('./epub.js')
+ book = await new EPUB(loader).init()
+ }
+ }
+ else if (await isPDF(file)) {
+ const { makePDF } = await import('./pdf.js')
+ book = await makePDF(file)
+ }
+ else {
+ const { isMOBI, MOBI } = await import('./mobi.js')
+ if (await isMOBI(file)) {
+ const fflate = await import('./vendor/fflate.js')
+ book = await new MOBI({ unzlib: fflate.unzlibSync }).open(file)
+ }
+ else if (isFB2(file)) {
+ const { makeFB2 } = await import('./fb2.js')
+ book = await makeFB2(file)
+ }
+ }
+ if (!book) throw new UnsupportedTypeError('File type not supported')
+ return book
+}
+
+class CursorAutohider {
+ #timeout
+ #el
+ #check
+ #state
+ constructor(el, check, state = {}) {
+ this.#el = el
+ this.#check = check
+ this.#state = state
+ if (this.#state.hidden) this.hide()
+ this.#el.addEventListener('mousemove', ({ screenX, screenY }) => {
+ // check if it actually moved
+ if (screenX === this.#state.x && screenY === this.#state.y) return
+ this.#state.x = screenX, this.#state.y = screenY
+ this.show()
+ if (this.#timeout) clearTimeout(this.#timeout)
+ if (check()) this.#timeout = setTimeout(this.hide.bind(this), 1000)
+ }, false)
+ }
+ cloneFor(el) {
+ return new CursorAutohider(el, this.#check, this.#state)
+ }
+ #hasSelection() {
+ const selection = this.#el.ownerDocument?.getSelection()
+ return selection ? !selection.isCollapsed : false
+ }
+ hide() {
+ // The pointer is what the reader aims a selection with, so leave it
+ // alone while one stands: a paused drag, or a double-click word
+ // select (which fires no mousemove at all), would otherwise blank it.
+ if (this.#hasSelection()) return
+ this.#el.style.cursor = 'none'
+ this.#state.hidden = true
+ }
+ show() {
+ this.#el.style.removeProperty('cursor')
+ this.#state.hidden = false
+ }
+}
+
+class History extends EventTarget {
+ #arr = []
+ #index = -1
+ pushState(x) {
+ const last = this.#arr[this.#index]
+ if (last === x || last?.fraction && last.fraction === x.fraction) return
+ this.#arr[++this.#index] = x
+ this.#arr.length = this.#index + 1
+ this.dispatchEvent(new Event('index-change'))
+ }
+ replaceState(x) {
+ const index = this.#index
+ this.#arr[index] = x
+ }
+ back() {
+ const index = this.#index
+ if (index <= 0) return
+ const detail = { state: this.#arr[index - 1] }
+ this.#index = index - 1
+ this.dispatchEvent(new CustomEvent('popstate', { detail }))
+ this.dispatchEvent(new Event('index-change'))
+ }
+ forward() {
+ const index = this.#index
+ if (index >= this.#arr.length - 1) return
+ const detail = { state: this.#arr[index + 1] }
+ this.#index = index + 1
+ this.dispatchEvent(new CustomEvent('popstate', { detail }))
+ this.dispatchEvent(new Event('index-change'))
+ }
+ get canGoBack() {
+ return this.#index > 0
+ }
+ get canGoForward() {
+ return this.#index < this.#arr.length - 1
+ }
+ clear() {
+ this.#arr = []
+ this.#index = -1
+ }
+}
+
+const languageInfo = lang => {
+ if (!lang) return {}
+ try {
+ const canonical = Intl.getCanonicalLocales(lang)[0]
+ const locale = new Intl.Locale(canonical)
+ const isCJK = ['zh', 'ja', 'kr'].includes(locale.language)
+ const direction = (locale.getTextInfo?.() ?? locale.textInfo)?.direction
+ return { canonical, locale, isCJK, direction }
+ } catch (e) {
+ console.warn(e)
+ return {}
+ }
+}
+
+export class View extends HTMLElement {
+ #root = this.attachShadow({ mode: 'open' })
+ #sectionProgress
+ #tocProgress
+ #pageProgress
+ #cfiProgress
+ #searchResults = new Map()
+ #cursorAutohider = new CursorAutohider(this, () =>
+ this.hasAttribute('autohide-cursor'))
+ isFixedLayout = false
+ lastLocation
+ history = new History()
+ constructor() {
+ super()
+ this.history.addEventListener('popstate', ({ detail }) => {
+ const resolved = this.resolveNavigation(detail.state)
+ this.renderer.goTo(resolved)
+ })
+ }
+ async open(book) {
+ if (typeof book === 'string'
+ || typeof book.arrayBuffer === 'function'
+ || book.isDirectory) book = await makeBook(book)
+ this.book = book
+ this.language = languageInfo(book.metadata?.language)
+
+ if (book.splitTOCHref && book.getTOCFragment) {
+ const ids = book.sections.map(s => s.id)
+ this.#sectionProgress = new SectionProgress(book.sections, 1500, 1600)
+ const splitHref = book.splitTOCHref.bind(book)
+ const getFragment = book.getTOCFragment.bind(book)
+ this.#tocProgress = new TOCProgress()
+ await this.#tocProgress.init({
+ toc: book.toc ?? [], ids, splitHref, getFragment })
+ this.#pageProgress = new TOCProgress()
+ await this.#pageProgress.init({
+ toc: book.pageList ?? [], ids, splitHref, getFragment })
+ }
+ this.#cfiProgress = new PageProgress(book, this.resolveNavigation.bind(this))
+
+ this.isFixedLayout = this.book.rendition?.layout === 'pre-paginated'
+ if (this.isFixedLayout) {
+ await import('./fixed-layout.js')
+ this.renderer = document.createElement('foliate-fxl')
+ } else {
+ await import('./paginator.js')
+ this.renderer = document.createElement('foliate-paginator')
+ }
+ this.renderer.setAttribute('exportparts', 'head,foot,filter,container')
+ this.renderer.addEventListener('load', e => this.#onLoad(e.detail))
+ this.renderer.addEventListener('relocate', e => this.#onRelocate(e.detail))
+ this.renderer.addEventListener('create-overlayer', e =>
+ e.detail.attach(this.#createOverlayer(e.detail)))
+ this.renderer.open(book)
+ this.#root.append(this.renderer)
+
+ if (book.sections.some(section => section.mediaOverlay)) {
+ const activeClass = book.media.activeClass
+ const playbackActiveClass = book.media.playbackActiveClass
+ this.mediaOverlay = book.getMediaOverlay()
+ let lastActive
+ this.mediaOverlay.addEventListener('highlight', e => {
+ const resolved = this.resolveNavigation(e.detail.text)
+ this.renderer.goTo(resolved)
+ .then(() => {
+ const { doc } = this.renderer.getContents()
+ .find(x => x.index = resolved.index)
+ const el = resolved.anchor(doc)
+ el.classList.add(activeClass)
+ if (playbackActiveClass) el.ownerDocument
+ .documentElement.classList.add(playbackActiveClass)
+ lastActive = new WeakRef(el)
+ })
+ })
+ this.mediaOverlay.addEventListener('unhighlight', () => {
+ const el = lastActive?.deref()
+ if (el) {
+ el.classList.remove(activeClass)
+ if (playbackActiveClass) el.ownerDocument
+ .documentElement.classList.remove(playbackActiveClass)
+ }
+ })
+ }
+ }
+ close() {
+ this.renderer?.destroy()
+ this.renderer?.remove()
+ this.#sectionProgress = null
+ this.#tocProgress = null
+ this.#pageProgress = null
+ this.#cfiProgress = null
+ this.#searchResults = new Map()
+ this.lastLocation = null
+ this.history.clear()
+ this.tts = null
+ this.mediaOverlay = null
+ }
+ goToTextStart() {
+ return this.goTo(this.book.landmarks
+ ?.find(m => m.type.includes('bodymatter') || m.type.includes('text'))
+ ?.href ?? this.book.sections.findIndex(s => s.linear !== 'no'))
+ }
+ async init({ lastLocation, showTextStart }) {
+ const resolved = lastLocation ? this.resolveNavigation(lastLocation) : null
+ if (resolved) {
+ await this.renderer.goTo(resolved)
+ this.history.pushState(lastLocation)
+ }
+ else if (showTextStart) await this.goToTextStart()
+ else {
+ this.history.pushState(0)
+ await this.next()
+ }
+ }
+ #emit(name, detail, cancelable) {
+ return this.dispatchEvent(new CustomEvent(name, { detail, cancelable }))
+ }
+ #onRelocate({ reason, range, index, fraction, size }) {
+ const progress = this.#sectionProgress?.getProgress(index, fraction, size) ?? {}
+ const tocItem = this.#tocProgress?.getProgress(index, range)
+ const pageItem = this.#pageProgress?.getProgress(index, range)
+ const cfi = this.getCFI(index, range)
+ this.lastLocation = { ...progress, tocItem, pageItem, cfi, range }
+ if (reason === 'snap' || reason === 'page' || reason === 'scroll')
+ this.history.replaceState(cfi)
+ this.#emit('relocate', this.lastLocation)
+ }
+ #onLoad({ doc, index }) {
+ // set language and dir if not already set
+ doc.documentElement.lang ||= this.language.canonical ?? ''
+ if (!this.language.isCJK)
+ doc.documentElement.dir ||= this.language.direction ?? ''
+
+ this.#handleLinks(doc, index)
+ this.#cursorAutohider.cloneFor(doc.documentElement)
+
+ this.#emit('load', { doc, index })
+ }
+ #handleLinks(doc, index) {
+ const { book } = this
+ const section = book.sections[index]
+ doc.addEventListener('click', e => {
+ const a = e.target.closest('a[href]')
+ if (!a) return
+ e.preventDefault()
+ const href_ = a.getAttribute('href')
+ const href = section?.resolveHref?.(href_) ?? href_
+ if (book?.isExternal?.(href))
+ Promise.resolve(this.#emit('external-link', { a, href }, true))
+ .then(x => x ? globalThis.open(href, '_blank') : null)
+ .catch(e => console.error(e))
+ else {
+ let internalHref = href
+ if (!book.resolveHref(href)) {
+ const hashIndex = href_.indexOf('#')
+ if (hashIndex >= 0) {
+ const hash = href_.slice(hashIndex)
+ internalHref = section?.resolveHref?.(hash) ?? href
+ }
+ }
+ Promise.resolve(this.#emit('link', { a, href: internalHref }, true))
+ .then(x => x ? this.goTo(internalHref) : null)
+ .catch(e => console.error(e))
+ }
+ })
+ }
+ async addAnnotation(annotation, remove) {
+ const { value } = annotation
+ if (value.startsWith(SEARCH_PREFIX)) {
+ const cfi = value.replace(SEARCH_PREFIX, '')
+ const { index, anchor } = await this.resolveNavigation(cfi)
+ const obj = this.#getOverlayer(index)
+ if (obj) {
+ const { overlayer, doc } = obj
+ if (remove) {
+ overlayer.remove(value)
+ return
+ }
+ const range = doc ? anchor(doc) : anchor
+ if (range) overlayer.add(value, range, Overlayer.outline)
+ }
+ return
+ } else if (value.startsWith(NOTE_PREFIX)) {
+ const cfi = value.replace(NOTE_PREFIX, '')
+ const { index, anchor } = await this.resolveNavigation(cfi)
+ const obj = this.#getOverlayer(index)
+ if (obj) {
+ const { overlayer, doc } = obj
+ if (remove) {
+ overlayer.remove(value)
+ return
+ }
+ const range = doc ? anchor(doc) : anchor
+ if (range) {
+ const draw = (func, opts) => overlayer.add(value, range, func, opts)
+ this.#emit('draw-annotation', { draw, annotation, doc, range })
+ }
+ }
+ return
+ }
+ const { index, anchor } = await this.resolveNavigation(value)
+ const obj = this.#getOverlayer(index)
+ if (obj) {
+ const { overlayer, doc } = obj
+ overlayer.remove(value)
+ if (!remove) {
+ const range = doc ? anchor(doc) : anchor
+ if (range) {
+ const draw = (func, opts) => overlayer.add(value, range, func, opts)
+ this.#emit('draw-annotation', { draw, annotation, doc, range })
+ }
+ }
+ }
+ const label = this.#tocProgress?.getProgress(index)?.label ?? ''
+ return { index, label }
+ }
+ deleteAnnotation(annotation) {
+ return this.addAnnotation(annotation, true)
+ }
+ #getOverlayer(index) {
+ return this.renderer.getContents()
+ .find(x => x.index === index && x.overlayer)
+ }
+ #createOverlayer({ doc, index }) {
+ const overlayer = new Overlayer(doc)
+ doc.addEventListener('click', e => {
+ const [value, range, rect] = overlayer.hitTest(e)
+ if (value && !value.startsWith(SEARCH_PREFIX)) {
+ this.#emit('show-annotation', { value, index, range, rect })
+ }
+ }, false)
+
+ let lastHitTestTime = 0
+ const THROTTLE_MS = 200
+ const isAndroid = /Android/i.test(navigator.userAgent)
+
+ doc.addEventListener('mousemove', (e) => {
+ if (isAndroid) return
+ const now = performance.now()
+ if (now - lastHitTestTime < THROTTLE_MS) return
+ lastHitTestTime = now
+ const [value] = overlayer.hitTest(e)
+ if (value && !value.startsWith(SEARCH_PREFIX)) {
+ doc.body.style.cursor = 'pointer'
+ } else {
+ doc.body.style.cursor = ''
+ }
+ })
+
+ const list = this.#searchResults.get(index)
+ if (list) for (const item of list) this.addAnnotation(item)
+
+ this.#emit('create-overlay', { index })
+ return overlayer
+ }
+ async showAnnotation(annotation) {
+ const { value } = annotation
+ const resolved = await this.goTo(value)
+ if (resolved) {
+ const { index, anchor } = resolved
+ const { doc } = this.#getOverlayer(index)
+ const range = anchor(doc)
+ this.#emit('show-annotation', { value, index, range })
+ }
+ }
+ getCFI(index, range) {
+ const baseCFI = this.book.sections[index].cfi ?? CFI.fake.fromIndex(index)
+ if (!range) return baseCFI
+ return CFI.joinIndir(baseCFI, CFI.fromRange(range))
+ }
+ resolveCFI(cfi) {
+ if (this.book.resolveCFI)
+ return this.book.resolveCFI(cfi)
+ else {
+ const parts = CFI.parse(cfi)
+ const index = CFI.fake.toIndex((parts.parent ?? parts).shift())
+ const anchor = doc => CFI.toRange(doc, parts)
+ return { index, anchor }
+ }
+ }
+ resolveNavigation(target) {
+ try {
+ if (typeof target === 'number') return { index: target }
+ if (typeof target.fraction === 'number') {
+ const [index, anchor] = this.#sectionProgress.getSection(target.fraction)
+ return { index, anchor }
+ }
+ if (CFI.isCFI.test(target)) return this.resolveCFI(target)
+ return this.book.resolveHref(target)
+ } catch (e) {
+ console.error(e)
+ console.error(`Could not resolve target ${target}`)
+ }
+ }
+ async goTo(target) {
+ const resolved = this.resolveNavigation(target)
+ try {
+ await this.renderer.goTo(resolved)
+ this.history.pushState(target)
+ return resolved
+ } catch(e) {
+ console.error(e)
+ console.error(`Could not go to ${target}`)
+ }
+ }
+ async goToFraction(frac) {
+ const [index, anchor] = this.#sectionProgress.getSection(frac)
+ await this.renderer.goTo({ index, anchor })
+ this.history.pushState({ fraction: frac })
+ }
+ async select(target) {
+ try {
+ const obj = await this.resolveNavigation(target)
+ await this.renderer.goTo({ ...obj, select: true })
+ this.history.pushState(target)
+ } catch(e) {
+ console.error(e)
+ console.error(`Could not go to ${target}`)
+ }
+ }
+ deselect() {
+ for (const { doc } of this.renderer.getContents())
+ doc.defaultView.getSelection().removeAllRanges()
+ }
+ getSectionFractions() {
+ return (this.#sectionProgress?.sectionFractions ?? [])
+ .map(x => x + Number.EPSILON)
+ }
+ getProgressOf(index, range) {
+ const tocItem = this.#tocProgress?.getProgress(index, range)
+ const pageItem = this.#pageProgress?.getProgress(index, range)
+ return { tocItem, pageItem }
+ }
+ async getCFIProgress(cfi) {
+ const progress = await this.#cfiProgress?.getProgress(cfi)
+ if (!progress || progress.index === -1) return null
+ return this.#sectionProgress?.getProgress(progress.index, progress.fraction)
+ }
+ async getTOCItemOf(target) {
+ try {
+ const { index, anchor } = await this.resolveNavigation(target)
+ const doc = await this.book.sections[index].createDocument()
+ const frag = anchor(doc)
+ const isRange = frag instanceof Range
+ const range = isRange ? frag : doc.createRange()
+ if (!isRange) range.selectNodeContents(frag)
+ return this.#tocProgress?.getProgress(index, range)
+ } catch(e) {
+ console.error(e)
+ console.error(`Could not get ${target}`)
+ }
+ }
+ async prev(distance) {
+ await this.renderer.prev(distance)
+ }
+ async next(distance) {
+ await this.renderer.next(distance)
+ }
+ async pan(dx, dy) {
+ await this.renderer.pan(dx, dy)
+ }
+ isOverflowX() {
+ return this.renderer.isOverflowX
+ }
+ isOverflowY() {
+ return this.renderer.isOverflowY
+ }
+ goLeft() {
+ return this.book.dir === 'rtl' ? this.next() : this.prev()
+ }
+ goRight() {
+ return this.book.dir === 'rtl' ? this.prev() : this.next()
+ }
+ // A matcher result carries a primary `range` (nav/excerpt anchor) and, for
+ // nearby-words, per-word `subRanges` to highlight each matched word.
+ #toSearchMatch(index, { range, excerpt, subRanges }) {
+ const cfi = this.getCFI(index, range)
+ if (subRanges?.length)
+ return { cfi, cfis: subRanges.map(r => this.getCFI(index, r)), excerpt }
+ return { cfi, excerpt }
+ }
+ async * #searchSection(matcher, query, index) {
+ const doc = await this.book.sections[index].createDocument()
+ for (const match of matcher(doc, query))
+ yield this.#toSearchMatch(index, match)
+ }
+ async * #searchBook(matcher, query) {
+ const { sections } = this.book
+ for (const [index, { createDocument }] of sections.entries()) {
+ if (!createDocument) continue
+ const doc = await createDocument()
+ const subitems = Array.from(matcher(doc, query), match => this.#toSearchMatch(index, match))
+ const progress = (index + 1) / sections.length
+ yield { progress }
+ if (subitems.length) yield { index, subitems }
+ }
+ }
+ async * search(opts) {
+ this.clearSearch()
+ const { searchMatcher } = await import('./search.js')
+ const { sections } = this.book
+ const { query, index, results } = opts
+ const matcher = searchMatcher(textWalker,
+ { defaultLocale: this.language, ...opts })
+
+ const iter = results?.length
+ ? (async function* () {
+ for (const result of results) {
+ if (result.subitems) {
+ const progress = (result.index + 1) / sections.length
+ yield { progress }
+ yield { index: result.index, subitems: result.subitems }
+ } else {
+ yield { cfi: result.cfi, cfis: result.cfis, excerpt: result.excerpt }
+ }
+ }
+ })()
+ : index != null
+ ? this.#searchSection(matcher, query, index)
+ : this.#searchBook(matcher, query)
+
+ const list = []
+ const seen = new Set()
+ this.#searchResults.set(index, list)
+ // Add one annotation per unique CFI (a nearby-words match carries several
+ // via `cfis`); dedupe so overlapping CFIs don't collide in #searchResults.
+ const addHighlights = (cfis, sink, sinkSeen) => {
+ for (const cfi of cfis) {
+ if (sinkSeen.has(cfi)) continue
+ sinkSeen.add(cfi)
+ const item = { value: SEARCH_PREFIX + cfi }
+ sink.push(item)
+ this.addAnnotation(item)
+ }
+ }
+
+ for await (const result of iter) {
+ if (result.subitems){
+ const sectionList = []
+ const sectionSeen = new Set()
+ for (const item of result.subitems)
+ addHighlights(item.cfis ?? [item.cfi], sectionList, sectionSeen)
+ this.#searchResults.set(result.index, sectionList)
+ yield {
+ index: result.index,
+ label: this.#tocProgress?.getProgress(result.index)?.label ?? '',
+ subitems: result.subitems,
+ }
+ }
+ else {
+ if (result.cfi) addHighlights(result.cfis ?? [result.cfi], list, seen)
+ yield result
+ }
+ }
+ yield 'done'
+ }
+ clearSearch() {
+ for (const list of this.#searchResults.values())
+ for (const item of list) this.deleteAnnotation(item)
+ this.#searchResults.clear()
+ }
+ async initTTS(granularity = 'word', nodeFilter, highlighter) {
+ const contents = this.renderer.getContents()
+ const primaryIndex = this.renderer.primaryIndex
+ const primary = contents.find(x => x.index === primaryIndex) ?? contents[0]
+ const doc = primary?.doc
+ if (!doc) return
+ if (this.tts && this.tts.doc === doc) return
+ const { TTS } = await import('./tts.js')
+ this.tts = new TTS(doc, textWalker, nodeFilter, highlighter || (range =>
+ this.renderer.scrollToAnchor(range, true)), granularity)
+ }
+ startMediaOverlay() {
+ const contents = this.renderer.getContents()
+ const primaryIndex = this.renderer.primaryIndex
+ const primary = contents.find(x => x.index === primaryIndex) ?? contents[0]
+ const { index } = primary ?? {}
+ return this.mediaOverlay.start(index)
+ }
+}
+
+customElements.define('foliate-view', View)
diff --git a/frontend/src/routes/(root)/(library)/book/[bookId]/+page.svelte b/frontend/src/routes/(root)/(library)/book/[bookId]/+page.svelte
index 3502e99..2c2e1ed 100644
--- a/frontend/src/routes/(root)/(library)/book/[bookId]/+page.svelte
+++ b/frontend/src/routes/(root)/(library)/book/[bookId]/+page.svelte
@@ -1,28 +1,24 @@
-
+ {#each books as book (book.id)}
+ {@const selected = selectionState.isSelected(book.id)}
+ {@const state = readState(book)}
+
+
+
diff --git a/frontend/src/lib/components/view/book-table.svelte b/frontend/src/lib/components/view/book-table.svelte
index fb45508..f0831b0 100644
--- a/frontend/src/lib/components/view/book-table.svelte
+++ b/frontend/src/lib/components/view/book-table.svelte
@@ -1,66 +1,304 @@
-
- handleCardClick(event, book)}
+ class="group flex gap-3.5 rounded-lg border bg-card p-3 transition-colors {selected
+ ? 'border-primary bg-accent'
+ : 'border-border/60 hover:border-border'} {selectionState.selectionModeActive
+ ? 'cursor-pointer'
+ : ''}"
+ >
+
+
+ {/each}
+
+
+
+
+
+
+
+ {book.title}
+
+
+
+
+
+ {authors(book)}
+
+ {#if year(book)}
+
+ {year(book)}
+
+ {/if}
+ {#if book.files.length > 0}
+ {formats(book)}
+ {/if}
+ {#each book.tags.slice(0, TAG_LIMIT) as tag (tag.id)}
+ {tag.name}
+ {/each}
+ {#if book.tags.length > TAG_LIMIT}
+
+ +{book.tags.length - TAG_LIMIT}
+
+ {/if}
+
+
+
+
+
+
+ {#if book.files.length > 0}
+
+
+ openInReader(book, book.files[0])}
+ >
+
+
+
+
+
+
+
+ bookOps.downloadBookFile(book.id, book.files[0].id, book.files[0].filename)}
+ >
+
+
+
+ {/if}
+
+
+
+ {#if state.text}
+
+ {state.text}
+
+ {/if}
+ Read
Download
+
+
+
- selectedState.toggleSelection(book)}
- />
-
- {book.title}
-
- {#each book.authors as author}
- {author.name}
- {/each}
-
- {book.publisher}
- {book.published_date}
- {book.pages}
-
- {#each book.tags as tag}
- {tag.name}
- {/each}
-
-
- {#each Object.entries(book.identifiers) as [name, value] (value)}
- {name}
- {/each}
-
+
+ {
+ if (allSelected) selectionState.deselectAll();
+ else selectionState.selectAll(books);
+ }}
+ />
+
+
+ {#if column.sort}
+
+
+ {:else}
+ {column.label}
+ {/if}
+
+ {/each}
- {/each}
-
-
+
+
+
+ {#each books as book (book.id)}
+ handleRowClick(event, book)}
+ class={selectionState.selectionModeActive ? 'cursor-pointer' : ''}
+ >
+
+ selectionState.toggleSelection(book)}
+ />
+
+
+
+
+ {#each visible as column (column.key)}
+ {#if column.key === 'title'}
+
+ {book.title}
+
+ {:else if column.key === 'authors'}
+
+ {#each book.authors as author (author.id)}
+ {author.name}
+ {/each}
+
+ {:else if column.key === 'series'}
+
+ {book.series ? book.series.title : '—'}
+
+ {:else if column.key === 'publisher'}
+
+ {book.publisher ? book.publisher.name : '—'}
+
+ {:else if column.key === 'published'}
+
+ {book.published_date ? new Date(book.published_date).getFullYear() : '—'}
+
+ {:else if column.key === 'pages'}
+
+ {book.pages ?? '—'}
+
+ {:else if column.key === 'format'}
+ {formats(book)}
+ {:else if column.key === 'size'}
+
+ {formatFileSize(totalSize(book))}
+
+ {:else if column.key === 'added'}
+
+ {addedOn(book)}
+
+ {:else if column.key === 'progress'}
+
+ {#if book.progress?.completed}
+ Finished
+ {:else if book.progress?.percentage}
+
+
+
+
+
+ {Math.round(book.progress.percentage * 100)}%
+
+
+ {:else}
+ Unread
+ {/if}
+
+ {:else if column.key === 'missing'}
+
+ {#each missing(book) as gap (gap)}
+
+ {gap}
+
+ {:else}
+ complete
+ {/each}
+
+ {/if}
+ {/each}
+
+
+
+
+ {/each}
+
+
+
diff --git a/frontend/src/lib/components/view/book-thumbnail.svelte b/frontend/src/lib/components/view/book-thumbnail.svelte
index 2cd3a9b..762d01e 100644
--- a/frontend/src/lib/components/view/book-thumbnail.svelte
+++ b/frontend/src/lib/components/view/book-thumbnail.svelte
@@ -1,11 +1,13 @@
+
+
+
+
+ {books.length} shown
+
+
+
+
+
+
+
+
+
+
+
+ Show columns
+ {
+ if (!column.fixed) column.on = value;
+ }}
+ >
+ {column.label}
+
+ {/each}
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/lib/components/view/preset-chips.svelte b/frontend/src/lib/components/view/preset-chips.svelte
new file mode 100644
index 0000000..a0319d9
--- /dev/null
+++ b/frontend/src/lib/components/view/preset-chips.svelte
@@ -0,0 +1,27 @@
+
+
+
+
+ {book.title}
+ {#if authors}
+
+ {/if}
+
+
+ {#each BOOK_PRESETS as preset (preset.id)}
+ {@const active = bookCollection.isPresetActive(preset)}
+
+ {/each}
+
diff --git a/frontend/src/lib/components/view/sort-button.svelte b/frontend/src/lib/components/view/sort-button.svelte
index 9ba9dfb..5577d93 100644
--- a/frontend/src/lib/components/view/sort-button.svelte
+++ b/frontend/src/lib/components/view/sort-button.svelte
@@ -20,7 +20,7 @@
>
{#if bookCollection.hasActiveSort}
{/if}
Grid view
-List view
-{LABELS[view]}
+
+
+
+
+
+
+ `
+
+ this.#top = this.#root.getElementById('top')
+ this.#background = this.#root.getElementById('background')
+ this.#container = this.#root.getElementById('container')
+ this.#header = this.#root.getElementById('header')
+ this.#footer = this.#root.getElementById('footer')
+
+ this.#observer.observe(this.#container)
+ const debouncedScroll = debounce(() => {
+ if (this.scrolled && !this.#isAnimating) {
+ // Skip entirely while stabilizing — preserve #justAnchored
+ // so the first post-stabilization fire still sees it.
+ if (this.#stabilizing) return
+ if (this.#justAnchored) this.#justAnchored = false
+ else this.#afterScroll('scroll')
+ // Backward preloading is handled eagerly in the (non-debounced)
+ // scroll listener below, mirroring the forward buffer.
+ } else if (!this.scrolled) {
+ this.#afterScroll('container-scroll')
+ }
+ }, 250)
+ this.#container.addEventListener('scroll', () => {
+ if (!this.#isAnimating) this.dispatchEvent(new Event('scroll'))
+ // Keep the per-view backgrounds glued to the content while a swipe
+ // drag scrolls the container (no animation runs then). During the
+ // snap animation #isAnimating is set and the destination background
+ // is already in place, so the rebuild is skipped.
+ if (!this.scrolled && !this.#isAnimating) this.#replaceBackground()
+ // Preload forward when fewer than minPages ahead. Skip while a finger
+ // drag is in progress: loading a section runs columnize/expand on the
+ // main thread, which drops frames mid-swipe (readest#4785). The buffer
+ // is still 4+ pages deep during a one-page drag, and the scroll that
+ // settles the gesture re-fires this with the finger already up, so the
+ // top-up just moves off the active drag instead of being skipped.
+ if (!this.noPreload && !this.noContinuousScroll && !this.#filling
+ && !this.#stabilizing && !this.#touchScrolled) {
+ const minPages = 5
+ const pagesAhead = this.size > 0
+ ? Math.floor((this.#renderedViewSize - this.#renderedEnd) / this.size)
+ : 0
+ if (pagesAhead < minPages) {
+ const sorted = this.#sortedViews
+ const lastIndex = sorted[sorted.length - 1]?.[0]
+ if (lastIndex != null) {
+ const nextIdx = this.#adjacentIndex(1, lastIndex)
+ if (nextIdx != null && !this.#views.has(nextIdx) && this.#isSameDirection(nextIdx)) {
+ this.#filling = true
+ this.#loadAdjacentSection(nextIdx)
+ .finally(() => {
+ this.#filling = false
+ this.dispatchEvent(new Event('stabilized'))
+ })
+ }
+ }
+ }
+ }
+ // Preload backward when fewer than minPages behind, mirroring the
+ // forward buffer so scrolling up never dead-ends at the top with the
+ // previous section unloaded (readest/readest#4112). The
+ // #loadAdjacentSection scroll compensation keeps the viewport
+ // anchored as the section is inserted above.
+ if (this.scrolled && !this.noPreload && !this.noContinuousScroll
+ && !this.#filling && !this.#stabilizing) {
+ const minPages = 5
+ const pagesBehind = this.size > 0
+ ? Math.floor(this.#renderedStart / this.size)
+ : 0
+ if (pagesBehind < minPages) {
+ const sorted = this.#sortedViews
+ const firstIndex = sorted[0]?.[0]
+ if (firstIndex != null) {
+ const prevIdx = this.#adjacentIndex(-1, firstIndex)
+ if (prevIdx != null && !this.#views.has(prevIdx) && this.#isSameDirection(prevIdx)) {
+ this.#filling = true
+ this.#loadAdjacentSection(prevIdx)
+ .finally(() => {
+ this.#filling = false
+ this.dispatchEvent(new Event('stabilized'))
+ })
+ }
+ }
+ }
+ }
+ debouncedScroll()
+ })
+
+ const opts = { passive: false }
+ this.addEventListener('touchstart', this.#onTouchStart.bind(this), opts)
+ this.addEventListener('touchmove', this.#onTouchMove.bind(this), opts)
+ this.addEventListener('touchend', this.#onTouchEnd.bind(this))
+ this.addEventListener('touchcancel', this.#onTouchCancel.bind(this))
+ this.addEventListener('load', ({ detail: { doc } }) => {
+ doc.addEventListener('touchstart', this.#onTouchStart.bind(this), opts)
+ doc.addEventListener('touchmove', this.#onTouchMove.bind(this), opts)
+ doc.addEventListener('touchend', this.#onTouchEnd.bind(this))
+ doc.addEventListener('touchcancel', this.#onTouchCancel.bind(this))
+ })
+
+ this.addEventListener('relocate', ({ detail }) => {
+ if (detail.reason === 'selection') setSelectionTo(this.#anchor, 0)
+ else if (detail.reason === 'navigation') {
+ if (this.#anchor === 1) setSelectionTo(detail.range, 1)
+ else if (typeof this.#anchor === 'number')
+ setSelectionTo(detail.range, -1)
+ else setSelectionTo(this.#anchor, -1)
+ }
+ })
+ const checkPointerSelection = debounce((range, sel) => {
+ if (!sel.rangeCount) return
+ const selRange = sel.getRangeAt(0)
+ const backward = selectionIsBackward(sel)
+ if (backward && selRange.compareBoundaryPoints(Range.START_TO_START, range) < 0)
+ this.prev()
+ else if (!backward && selRange.compareBoundaryPoints(Range.END_TO_END, range) > 0)
+ this.next()
+ }, 700)
+ this.addEventListener('load', ({ detail: { doc } }) => {
+ let isPointerSelecting = false
+ doc.addEventListener('pointerdown', () => isPointerSelecting = true)
+ doc.addEventListener('pointerup', () => isPointerSelecting = false)
+ let isKeyboardSelecting = false
+ doc.addEventListener('keydown', () => isKeyboardSelecting = true)
+ doc.addEventListener('keyup', () => isKeyboardSelecting = false)
+ doc.addEventListener('selectionchange', () => {
+ if (this.scrolled) return
+ const range = this.#lastVisibleRange
+ if (!range) return
+ const sel = doc.getSelection()
+ if (!sel.rangeCount) return
+ // FIXME: this won't work on Android WebView, disable for now
+ if (!isPointerSelecting && isPointerSelecting && sel.type === 'Range')
+ checkPointerSelection(range, sel)
+ else if (isKeyboardSelecting) {
+ const selRange = sel.getRangeAt(0).cloneRange()
+ const backward = selectionIsBackward(sel)
+ if (!backward) selRange.collapse()
+ this.#scrollToAnchor(selRange)
+ }
+ })
+ doc.addEventListener('focusin', e => {
+ if (this.scrolled) return null
+ if (this.#container && this.#container.contains(e.target)) {
+ // NOTE: `requestAnimationFrame` is needed in WebKit
+ requestAnimationFrame(() => this.#scrollToAnchor(e.target))
+ }
+ })
+ })
+
+ this.#mediaQueryListener = () => {
+ const view = this.#primaryView
+ if (!view) return
+ this.#replaceBackground()
+ }
+ this.#mediaQuery.addEventListener('change', this.#mediaQueryListener)
+ }
+ get #primaryView() {
+ return this.#views.get(this.#primaryIndex)
+ }
+ get #sortedViews() {
+ return [...this.#views.entries()].sort(([a], [b]) => a - b)
+ }
+ get primaryIndex() {
+ return this.#primaryIndex
+ }
+ setAttribute(name, value) {
+ // The scrolled-mode scroll handler is debounced, so #anchor and
+ // #primaryIndex can lag behind the user's actual viewport by up to
+ // ~250ms. Toggling out of scrolled mode within that window made
+ // render() restore the stale anchor — reverting the position to a
+ // previously visible section. Flush the pending scroll state here,
+ // before the attribute change so the layout is still in scrolled
+ // mode and `this.scrolled` (which reads the attribute) is still true.
+ if (name === 'flow'
+ && this.scrolled
+ && String(value) !== 'scrolled'
+ && this.#views.size > 0) {
+ this.#flushScrolledState()
+ }
+ super.setAttribute(name, value)
+ }
+ #flushScrolledState() {
+ if (this.#views.size > 1) this.#detectPrimaryView()
+ const result = this.#getVisibleRange()
+ if (result?.range && !result.range.collapsed) this.#anchor = result.range
+ }
+ attributeChangedCallback(name, _, value) {
+ switch (name) {
+ case 'flow':
+ this.render()
+ break
+ case 'gap':
+ case 'margin-top':
+ case 'margin-bottom':
+ case 'margin-left':
+ case 'margin-right':
+ case 'max-block-size':
+ case 'max-column-count':
+ this.#top.style.setProperty('--_' + name, value)
+ this.render()
+ break
+ case 'max-inline-size':
+ // needs explicit `render()` as it doesn't necessarily resize
+ this.#top.style.setProperty('--_' + name, value)
+ this.render()
+ break
+ case 'no-continuous-scroll':
+ if (this.noContinuousScroll) {
+ for (const [i] of this.#views) {
+ if (i !== this.#primaryIndex) this.#destroyView(i)
+ }
+ }
+ break
+ }
+ }
+ open(book) {
+ this.bookDir = book.dir
+ this.sections = book.sections
+ book.transformTarget?.addEventListener('data', ({ detail }) => {
+ if (detail.type !== 'text/css') return
+ detail.data = Promise.resolve(detail.data).then(data => data
+ // unprefix as most of the props are (only) supported unprefixed
+ .replace(/([{\s;])-epub-/gi, '$1')
+ // `page-break-*` unsupported in columns; replace with `column-break-*`
+ .replace(/page-break-(after|before|inside)\s*:/gi, (_, x) =>
+ `-webkit-column-break-${x}:`)
+ .replace(/break-(after|before|inside)\s*:\s*(avoid-)?page/gi, (_, x, y) =>
+ `break-${x}: ${y ?? ''}column`))
+ })
+ }
+ #createView(index) {
+ // Destroy existing view for this index if any
+ const existing = this.#views.get(index)
+ if (existing) {
+ existing.destroy()
+ this.#container.removeChild(existing.element)
+ this.#views.delete(index)
+ }
+ const view = new View({
+ container: this,
+ onExpand: () => {
+ // Only the primary view's resize should adjust scroll;
+ // non-primary views (preloaded/adjacent) must not scroll
+ if (this.#filling || this.#stabilizing || this.scrolled) return
+ if (this.#primaryIndex === index)
+ this.#scrollToAnchor(this.#anchor)
+ },
+ })
+ this.#views.set(index, view)
+ const sorted = this.#sortedViews
+ const myPos = sorted.findIndex(([i]) => i === index)
+ const nextEntry = sorted[myPos + 1]
+ if (nextEntry) this.#container.insertBefore(view.element, nextEntry[1].element)
+ else this.#container.append(view.element)
+ this.#syncA11y()
+ return view
+ }
+ // Hide off-screen pre-loaded views from the accessibility tree so
+ // screen-reader swipe-next does not wander into them (which would land
+ // several pages into the next section instead of its first paragraph).
+ //
+ // Only `aria-hidden` is used — `inert` would also block pointer events
+ // and text selection, which breaks visible non-primary views such as
+ // the right column of a dual-page spread when each column belongs to
+ // a different section (readest/readest#4243, readest/readest#4259).
+ //
+ // Visible non-primary views stay exposed to assistive tech because a
+ // sighted user can read them on the same spread.
+ #syncA11y() {
+ const containerRect = this.#container.getBoundingClientRect()
+ for (const [index, view] of this.#views) {
+ const isPrimary = index === this.#primaryIndex
+ const isVisible = isPrimary
+ || isViewVisibleInContainer(
+ view.element.getBoundingClientRect(), containerRect)
+ if (isVisible) view.element.removeAttribute('aria-hidden')
+ else view.element.setAttribute('aria-hidden', 'true')
+ }
+ }
+ #destroyView(index) {
+ const view = this.#views.get(index)
+ if (!view) return
+ view.destroy()
+ this.#container.removeChild(view.element)
+ this.#views.delete(index)
+ this.sections[index]?.unload?.()
+ }
+ #destroyAllViews() {
+ for (const [index] of this.#views) this.#destroyView(index)
+ }
+ #clearViewsExcept(keepIndices) {
+ for (const [index] of this.#views) {
+ if (!keepIndices.has(index)) this.#destroyView(index)
+ }
+ }
+ // Check if a section has the same writing direction as current primary.
+ // Returns true if same or unknown (not yet cached).
+ #isSameDirection(index) {
+ if (!this.#directionCache.has(index)) return true
+ return this.#directionCache.get(index) === this.#vertical
+ }
+ // Read the theme/texture style off the primary section's and return a
+ // resolver that maps a view's raw background onto the active theme. This is a
+ // forced style read (getComputedStyle), so callers in the animation hot path
+ // do it once via #computePaginatedBgContext rather than every frame.
+ #readBackgroundStyle(doc) {
+ const htmlStyle = doc.defaultView.getComputedStyle(doc.documentElement)
+ const themeBgColor = htmlStyle.getPropertyValue('--theme-bg-color')
+ const overrideColor = htmlStyle.getPropertyValue('--override-color') === 'true'
+ const bgTextureId = htmlStyle.getPropertyValue('--bg-texture-id')
+ const isDarkMode = htmlStyle.getPropertyValue('color-scheme') === 'dark'
+ const fallbackBg = themeBgColor || ''
+ const hasTexture = !!bgTextureId && bgTextureId !== 'none'
+
+ const resolveBackground = (background) => {
+ if (!background) return fallbackBg
+ if (themeBgColor) {
+ const parsed = background.split(/\s(?=(?:url|rgb|hsl|#[0-9a-fA-F]{3,6}))/)
+ if ((isDarkMode || overrideColor) && (bgTextureId === 'none' || !bgTextureId)) {
+ parsed[0] = themeBgColor
+ }
+ return parsed.join(' ')
+ }
+ return background
+ }
+ return { fallbackBg, hasTexture, resolveBackground }
+ }
+ // Snapshot every input #paintPaginatedBackground needs that stays constant for
+ // the duration of a scroll animation: the theme/texture style, the
+ // background+container geometry, and each rendered view's size and resolved
+ // background. Returns null when there is nothing to paint (no primary doc,
+ // backgrounds disabled, or scrolled mode). Built once per animation so the
+ // per-frame repaint never re-runs getComputedStyle or one
+ // getBoundingClientRect per view — those forced reads, multiplied by the views
+ // preloaded at a chapter boundary, are what dropped frames mid-swipe
+ // (readest#4785).
+ #computePaginatedBgContext() {
+ const doc = this.#primaryView?.document
+ if (!doc?.documentElement) return null
+ if (this.noBackground) return null
+ if (this.scrolled) return null
+ const { fallbackBg, hasTexture, resolveBackground } = this.#readBackgroundStyle(doc)
+ const bgRect = this.#background.getBoundingClientRect()
+ const containerRect = this.#container.getBoundingClientRect()
+ const startEdge = this.#vertical ? 'top' : 'left'
+ const bgSize = bgRect[this.sideProp]
+ const inset = containerRect[startEdge] - bgRect[startEdge]
+ const containerSize = containerRect[this.sideProp]
+ const views = this.#sortedViews.map(([, view]) => ({
+ size: view.element.getBoundingClientRect()[this.sideProp],
+ bg: textureAwareBackground(resolveBackground(view.docBackground), hasTexture),
+ }))
+ return { fallbackBg, hasTexture, bgSize, inset, containerSize, views }
+ }
+ // Paint one full-bleed background segment per rendered view from a previously
+ // computed context, positioned so each tracks its content on screen at the
+ // given scroll position. Rebuilding on every scroll keeps the backgrounds
+ // glued to the content during a swipe drag — so when two sections with
+ // different backgrounds are both visible, each half shows its own colour
+ // instead of one flat colour flashing across the viewport. Only writes layout
+ // (no reads), so it is safe to run every animation frame.
+ #paintPaginatedBackground(ctx, atPosition) {
+ // Reset any inline backgrounds left over from a previous mode so the
+ // host's texture isn't occluded after toggling.
+ this.#background.style.background = ''
+ for (const [, view] of this.#sortedViews) {
+ view.element.style.background = ''
+ }
+ const scrollPos = Math.abs(atPosition ?? this.#renderedStart)
+ const segments = computeBackgroundSegments(
+ ctx.views, scrollPos, ctx.bgSize, ctx.inset, ctx.containerSize)
+
+ this.#background.innerHTML = ''
+ this.#background.style.display = ''
+ // Under a texture, leave the container transparent so the host texture
+ // shows through the gaps a transparent page no longer fills (readest#4399).
+ this.#background.style.background = ctx.hasTexture ? '' : ctx.fallbackBg
+
+ const posProp = this.#vertical ? 'top' : 'left'
+ const sizeProp = this.#vertical ? 'height' : 'width'
+ const crossPosProp = this.#vertical ? 'left' : 'top'
+ const crossSizeProp = this.#vertical ? 'width' : 'height'
+ for (const { start, size, bg } of segments) {
+ const seg = document.createElement('div')
+ seg.style.position = 'absolute'
+ seg.style[posProp] = `${start}px`
+ seg.style[sizeProp] = `${size}px`
+ seg.style[crossPosProp] = '0'
+ seg.style[crossSizeProp] = '100%'
+ seg.style.background = bg
+ seg.style.backgroundAttachment = 'initial'
+ this.#background.appendChild(seg)
+ }
+ }
+ // Update the #background grid so each column shows the correct section's
+ // background. Pass atPosition to pre-compute for a destination scroll
+ // position (e.g. before an animation starts). During a scroll animation the
+ // invariant context is snapshotted in #bgAnimContext and reused here so the
+ // per-frame repaint stays read-free.
+ #replaceBackground(atPosition) {
+ const doc = this.#primaryView?.document
+ if (!doc?.documentElement) return
+ if (this.noBackground) return
+
+ if (this.scrolled) {
+ // In scrolled mode, set background directly on each view element
+ // so it scrolls with the content. The static #background provides
+ // the fallback color for margins and gaps between views.
+ const { fallbackBg, hasTexture, resolveBackground } = this.#readBackgroundStyle(doc)
+ this.#background.style.background = ''
+ this.#background.innerHTML = ''
+ this.#background.style.display = ''
+ this.#background.style.background = hasTexture ? '' : fallbackBg
+ for (const [, view] of this.#sortedViews) {
+ const resolved = resolveBackground(view.docBackground)
+ view.element.style.background = textureAwareBackground(resolved, hasTexture)
+ }
+ return
+ }
+
+ const ctx = this.#bgAnimContext ?? this.#computePaginatedBgContext()
+ if (!ctx) return
+ this.#paintPaginatedBackground(ctx, atPosition)
+ }
+ #beforeRender({ vertical, rtl }) {
+ // If writing-mode is about to change, destroy all non-primary
+ // views BEFORE updating global state. This prevents stale views
+ // with the wrong direction from remaining in the container while
+ // flex-direction / scrollProp / sideProp flip.
+ if (this.#rendered && vertical !== this.#vertical) {
+ for (const [i] of this.#views) {
+ if (i !== this.#primaryIndex) this.#destroyView(i)
+ }
+ }
+ this.#vertical = vertical
+ this.#rtl = rtl
+ this.#top.classList.toggle('vertical', vertical)
+ this.#container.classList.toggle('vertical', vertical)
+
+ const style = getComputedStyle(this.#top)
+ const maxInlineSize = parseFloat(style.getPropertyValue('--_max-inline-size'))
+ const maxColumnCount = parseInt(style.getPropertyValue('--_max-column-count-spread'))
+ const marginTop = parseFloat(style.getPropertyValue('--_margin-top'))
+ const marginRight = parseFloat(style.getPropertyValue('--_margin-right'))
+ const marginBottom = parseFloat(style.getPropertyValue('--_margin-bottom'))
+ const marginLeft = parseFloat(style.getPropertyValue('--_margin-left'))
+ this.#marginTop = marginTop
+ this.#marginBottom = marginBottom
+
+ // Compute the column count from the host (Paginator) size rather than
+ // the #container size. The container width depends on --_column-count
+ // via the grid template (the outer 1fr tracks have a non-zero min for
+ // multi-column spreads), so deriving the column count from container
+ // size at threshold widths creates a feedback loop where the layout
+ // oscillates between 1 and 2 columns on resize.
+ const flow = this.getAttribute('flow')
+ const hostRect = this.getBoundingClientRect()
+ const hostSize = vertical ? hostRect.height : hostRect.width
+ const divisor = flow === 'scrolled'
+ ? 1
+ : Math.min(
+ maxColumnCount + (vertical ? 1 : 0),
+ Math.ceil(Math.floor(hostSize) / Math.floor(maxInlineSize)),
+ )
+ // Set --_column-count BEFORE measuring the container so the read
+ // below reflects the grid template that will actually be used.
+ this.#top.style.setProperty('--_column-count', divisor)
+
+ const { width, height } = this.#container.getBoundingClientRect()
+ const size = vertical ? height : width
+
+ const g = parseFloat(style.getPropertyValue('--_gap')) / 100
+ // The gap will be a percentage of the #container, not the whole view.
+ // This means the outer padding will be bigger than the column gap. Let
+ // `a` be the gap percentage. The actual percentage for the column gap
+ // will be (1 - a) * a. Let us call this `b`.
+ //
+ // To make them the same, we start by shrinking the outer padding
+ // setting to `b`, but keep the column gap setting the same at `a`. Then
+ // the actual size for the column gap will be (1 - b) * a. Repeating the
+ // process again and again, we get the sequence
+ // x₁ = (1 - b) * a
+ // x₂ = (1 - x₁) * a
+ // ...
+ // which converges to x = (1 - x) * a. Solving for x, x = a / (1 + a).
+ // So to make the spacing even, we must shrink the outer padding with
+ // f(x) = x / (1 + x).
+ // But we want to keep the outer padding, and make the inner gap bigger.
+ // So we apply the inverse, f⁻¹ = -x / (x - 1) to the column gap.
+ const gap = -g / (g - 1) * size
+
+ if (flow === 'scrolled') {
+ // FIXME: vertical-rl only, not -lr
+ this.setAttribute('dir', vertical ? 'rtl' : 'ltr')
+ this.#top.style.padding = '0'
+ const columnWidth = maxInlineSize
+
+ this.heads = null
+ this.feet = null
+ this.#header.replaceChildren()
+ this.#footer.replaceChildren()
+
+ this.columnCount = 1
+ this.#replaceBackground()
+
+ const layout = { width, height, flow, marginTop, marginRight, marginBottom, marginLeft, gap, columnWidth, columnCount: 1 }
+ this.#lastLayout = layout
+ return layout
+ }
+
+ const columnWidth = vertical
+ ? (size / divisor - marginTop * 1.5 - marginBottom * 1.5)
+ : (size / divisor - gap - marginRight / 2 - marginLeft / 2)
+ // `dir` mirrors the horizontal scroll coordinates (negative scrollLeft
+ // for RTL). Vertical books page along scrollTop, which never flips, so
+ // an RTL writing mode must not reverse the host grid there.
+ this.setAttribute('dir', rtl && !vertical ? 'rtl' : 'ltr')
+
+ // set background to `doc` background
+ // this is needed because the iframe does not fill the whole element
+ this.columnCount = divisor
+ this.#replaceBackground()
+
+ const marginalDivisor = vertical
+ ? Math.min(2, Math.ceil(Math.floor(width) / Math.floor(maxInlineSize)))
+ : divisor
+ const marginalStyle = {
+ gridTemplateColumns: `repeat(${marginalDivisor}, 1fr)`,
+ gap: `${gap}px`,
+ direction: this.bookDir === 'rtl' ? 'rtl' : 'ltr',
+ }
+ Object.assign(this.#header.style, marginalStyle)
+ Object.assign(this.#footer.style, marginalStyle)
+ const heads = makeMarginals(marginalDivisor, 'head')
+ const feet = makeMarginals(marginalDivisor, 'foot')
+ this.heads = heads.map(el => el.children[0])
+ this.feet = feet.map(el => el.children[0])
+ this.#header.replaceChildren(...heads)
+ this.#footer.replaceChildren(...feet)
+
+ const layout = { width, height, marginTop, marginRight, marginBottom, marginLeft, gap, columnWidth, columnCount: divisor }
+ this.#lastLayout = layout
+ return layout
+ }
+ render() {
+ if (this.#views.size === 0) return
+ const primaryView = this.#primaryView
+ if (!primaryView) return
+ this.#stabilizing = true
+ const layout = this.#beforeRender({
+ vertical: this.#vertical,
+ rtl: this.#rtl,
+ })
+ for (const [, view] of this.#views) {
+ if (view.document) view.render(layout)
+ }
+ // Scroll synchronously to prevent visible layout shift during resize.
+ // RAF deferral is only needed for initial display and mode switches
+ // (handled by #display), not for resize re-renders.
+ this.#scrollToAnchor(this.#anchor)
+ this.#stabilizing = false
+ this.dispatchEvent(new Event('stabilized'))
+ }
+ get scrolled() {
+ return this.getAttribute('flow') === 'scrolled'
+ }
+ get noPreload() {
+ return this.hasAttribute('no-preload')
+ }
+ get noBackground() {
+ return this.hasAttribute('no-background')
+ }
+ get noContinuousScroll() {
+ return this.scrolled && this.hasAttribute('no-continuous-scroll')
+ }
+ // The layered turn styles (slide/curl, readest#555) rasterize the outgoing
+ // page with the View Transitions API; when the engine lacks it the caller
+ // falls through to the push/two-phase animations, so old WebViews keep
+ // working page turns.
+ get #layeredTurn() {
+ const style = this.getAttribute('turn-style')
+ return (style === 'slide' || style === 'curl')
+ && typeof document.startViewTransition === 'function'
+ ? style : null
+ }
+ get scrollProp() {
+ const { scrolled } = this
+ return this.#vertical ? (scrolled ? 'scrollLeft' : 'scrollTop')
+ : scrolled ? 'scrollTop' : 'scrollLeft'
+ }
+ get sideProp() {
+ const { scrolled } = this
+ return this.#vertical ? (scrolled ? 'width' : 'height')
+ : scrolled ? 'height' : 'width'
+ }
+ get size() {
+ return this.#container.getBoundingClientRect()[this.sideProp]
+ }
+ get viewSize() {
+ const primaryView = this.#primaryView
+ if (!primaryView) return 0
+ return primaryView.element.getBoundingClientRect()[this.sideProp]
+ }
+ get start() {
+ return this.#renderedStart - this.#getViewOffset(this.#primaryIndex)
+ }
+ get end() {
+ return this.#renderedEnd - this.#getViewOffset(this.#primaryIndex)
+ }
+ get page() {
+ return Math.floor(((this.start + this.end) / 2) / this.size)
+ }
+ get pages() {
+ const primaryView = this.#primaryView
+ if (!primaryView) return 0
+ const viewSize = primaryView.element.getBoundingClientRect()[this.sideProp]
+ return Math.round(viewSize / this.size)
+ }
+ get containerPosition() {
+ return this.#container[this.scrollProp]
+ }
+ get isOverflowX() {
+ return false
+ }
+ get isOverflowY() {
+ return false
+ }
+ get #renderedViewSize() {
+ if (this.#views.size === 0) return 0
+ let total = 0
+ for (const [, view] of this.#views)
+ total += view.element.getBoundingClientRect()[this.sideProp]
+ return total
+ }
+ get #renderedStart() {
+ return Math.abs(this.#container[this.scrollProp])
+ }
+ get #renderedEnd() {
+ return this.#renderedStart + this.size
+ }
+ get #renderedPage() {
+ return Math.floor(((this.#renderedStart + this.#renderedEnd) / 2) / this.size)
+ }
+ get #renderedPages() {
+ return Math.round(this.#renderedViewSize / this.size)
+ }
+ set containerPosition(newVal) {
+ this.#container[this.scrollProp] = newVal
+ }
+ get scrollLocked() {
+ return this.#scrollLocked
+ }
+ set scrollLocked(value) {
+ this.#scrollLocked = value
+ }
+
+ scrollBy(dx, dy) {
+ // #scrollBounds is populated by #scrollToPage and stays unset until
+ // the first page settles. A swipe that lands before that happens
+ // (for example a fast swipe right after the reader mounts, or
+ // before a section has finished loading) would otherwise blow up
+ // on the destructuring below — bail out and let the next settled
+ // scroll re-enable swipe-driven motion.
+ if (!this.#scrollBounds) return
+ const delta = this.#vertical ? dy : dx
+ const [offset, a, b] = this.#scrollBounds
+ // RTL flips the forward/backward allowances only on the horizontal
+ // scroll axis (negative scrollLeft); vertical books page along
+ // scrollTop where forward is always positive.
+ const rtl = this.#rtl && !this.#vertical
+ const min = rtl ? offset - b : offset - a
+ const max = rtl ? offset + a : offset + b
+ this.containerPosition = Math.max(min, Math.min(max,
+ this.containerPosition + delta))
+ }
+
+ // vx, vy: velocity at the end of the swipe (pixels per ms)
+ // dx, dy: total distance swiped
+ // dt: total time of the swipe (ms)
+ snap(vx, vy, dx, dy, dt) {
+ // Same guard as scrollBy: an early swipe whose touchend fires
+ // before the first #scrollToPage seeds #scrollBounds would crash
+ // on the destructuring. Skip the snap; the next settled scroll
+ // populates the bounds and subsequent swipes work normally.
+ if (!this.#scrollBounds) return
+ // Page-turn swipes are horizontal in every writing mode: vertical-rl
+ // books turn pages right-to-left like printed Japanese books
+ // (readest#624), vertical-lr left-to-right. A predominantly vertical
+ // swipe on a vertical book still pages along the block axis so the
+ // legacy gesture keeps working.
+ const horizontal = Math.abs(vx) * 2 > Math.abs(vy)
+ const useHorizontal = horizontal || !this.#vertical
+ const pages = this.#renderedPages
+ let page
+ if (this.#vertical && useHorizontal && !this.#layeredTurn
+ && this.hasAttribute('animated') && !this.hasAttribute('eink')) {
+ // Drag-follow gestures on vertical books (readest#624): the views
+ // tracked the finger, so judge the turn like a paged carousel by
+ // where the drag ended plus the release flick, instead of the
+ // displacement heuristic below (which over-commits once content
+ // visibly follows the finger).
+ const width = this.#container.getBoundingClientRect().width
+ const forwardSign = this.#rtl ? 1 : -1
+ const dragged = this.#dragTranslateX
+ // Flick direction in translate space: a rightward finger (vx < 0)
+ // drags the views right.
+ const flick = Math.abs(vx) > 0.3 ? -Math.sign(vx) : 0
+ let turn
+ if (Math.abs(dragged) > width / 2) {
+ // Past halfway: commit unless flicked back the other way.
+ turn = flick === -Math.sign(dragged) ? 0 : Math.sign(dragged)
+ } else if (flick && (!dragged || flick === Math.sign(dragged))) {
+ turn = flick
+ } else {
+ turn = 0
+ }
+ page = this.#renderedPage + turn * forwardSign
+ } else {
+ const velocity = useHorizontal ? vx : vy
+ const avgVelocity = useHorizontal ? dx / dt : dy / dt
+ // Without drag-follow (eink, animation off, block-axis swipes,
+ // layered turn styles) the scroll position never moves with the
+ // finger; judge the whole gesture by displacement (avgVelocity)
+ // like the eink path.
+ const snapping = this.hasAttribute('animated') && !this.hasAttribute('eink')
+ && !this.#vertical && !this.#layeredTurn
+ // Drag-follow releases are judged by the release flick, so their
+ // alignment uses the flick (last-sample) velocities. Displacement-
+ // judged releases weigh the WHOLE gesture and their alignment must
+ // too: the last-sample ratio is lift-off jitter — a vertical swipe
+ // whose finger hooks sideways in its final milliseconds read as
+ // horizontal, and the displacement heuristic amplified the tiny
+ // net x-drift into a random page turn (layered slide on Android).
+ const aligned = useHorizontal
+ ? (snapping ? horizontal : Math.abs(dx) > Math.abs(dy))
+ : true
+ // Horizontal swipes advance against the page progression (RTL:
+ // next page is to the left); block-axis swipes always advance
+ // with the scroll axis.
+ const sign = useHorizontal && this.#rtl ? -1 : 1
+ const [offset, a, b] = this.#scrollBounds
+ const size = this.size
+ const start = this.#renderedStart
+ const end = this.#renderedEnd
+ const min = Math.abs(offset) - a
+ const max = Math.abs(offset) + b
+ const v = snapping ? velocity : avgVelocity
+ const d = v * sign * size * (aligned ? 1 : 0)
+ const snapOffset = (isNaN(d) ? 0 : snapping ? d * 2 : d * 10)
+ page = Math.floor(Math.max(min, Math.min(max, (start + end) / 2 + snapOffset)) / size)
+ }
+ const dir = page < 0 ? -1 : page >= pages ? 1 : null
+ const doGoTo = () => {
+ if (!dir) return
+ const sorted = this.#sortedViews
+ const edgeIndex = dir < 0
+ ? sorted[0]?.[0] ?? this.#primaryIndex
+ : sorted[sorted.length - 1]?.[0] ?? this.#primaryIndex
+ return this.#goTo({
+ index: this.#adjacentIndex(dir, edgeIndex),
+ anchor: dir < 0 ? () => 1 : () => 0,
+ })
+ }
+ // Out of range — skip animation, go straight to adjacent section
+ if (dir) {
+ if (this.#vertical) {
+ const sorted = this.#sortedViews
+ const edgeIndex = dir < 0
+ ? sorted[0]?.[0] ?? this.#primaryIndex
+ : sorted[sorted.length - 1]?.[0] ?? this.#primaryIndex
+ // Book boundary: nowhere to go, settle the drag back.
+ if (this.#adjacentIndex(dir, edgeIndex) == null) return this.#settleDrag()
+ this.#settleDrag(true)
+ }
+ return doGoTo()
+ }
+ this.#scrollToPage(page, 'snap')
+ }
+ #onTouchStart(e) {
+ const previousState = this.#touchState
+ const replacementTouch = Boolean(previousState?.active)
+ if (replacementTouch) this.#rejectLayeredGesture(previousState)
+ const multiTouch = e.touches.length > 1
+ const touch = e.changedTouches[0]
+ const currentTarget = e.currentTarget
+ const isInnerDocument = currentTarget?.nodeType === 9
+ const bounds = isInnerDocument
+ ? { left: 0, width: currentTarget.documentElement?.clientWidth ?? 0 }
+ : this.getBoundingClientRect()
+ const localX = (touch?.clientX ?? 0) - bounds.left
+ // Hosts can reserve a left-side control strip (for example, a vertical
+ // brightness gesture) without disabling horizontal pagination there.
+ // Only the low-slop fast paths are withheld; the normal fallback stays.
+ const reservedLeftRatio = Math.max(0, Math.min(0.5,
+ Number(this.getAttribute('turn-gesture-left-inset')) || 0))
+ const earlyClaimBlocked = bounds.width > 0
+ && localX <= bounds.width * reservedLeftRatio
+ const edgeDirection = bounds.width > 0
+ ? !earlyClaimBlocked && localX <= bounds.width * LAYERED_EDGE_REGION ? -1
+ : localX >= bounds.width * (1 - LAYERED_EDGE_REGION) ? 1 : 0
+ : 0
+ const blocked = Boolean(multiTouch || this.#vtFinishing || this.#vtProgrammatic)
+ this.#touchState = {
+ x: touch?.screenX, y: touch?.screenY,
+ t: e.timeStamp,
+ vx: 0, xy: 0,
+ dx: 0, dy: 0,
+ dt: 0,
+ releaseSamples: [{ distance: 0, time: e.timeStamp }],
+ lastMovementTime: e.timeStamp,
+ active: true,
+ blocked,
+ layeredGesture: blocked ? 'rejected' : 'pending',
+ layeredEarlyClaimBlocked: earlyClaimBlocked,
+ layeredEdgeDirection: edgeDirection,
+ layeredHorizontalDirection: 0,
+ layeredHorizontalSamples: 0,
+ layeredHorizontalSampleTime: null,
+ }
+ if (replacementTouch || multiTouch) this.#touchScrolled = false
+ // Hint to browser that scrolling will occur for better GPU layer management
+ const pv = this.#primaryView
+ if (pv?.element) {
+ pv.element.style.willChange = 'transform'
+ }
+ // A touch on a vertical book takes over any in-flight page-turn slide
+ // or settle: freeze the views where they are and let the drag continue
+ // from that offset. Also re-syncs the drag offset to the rendered
+ // transform so a stale value can never leak into the next gesture.
+ if (this.#vertical && !this.scrolled && !this.#layeredTurn) {
+ this.#slideTurnId++
+ this.#isAnimating = false
+ const children = [...this.#container.children]
+ const transform = children[0] && getComputedStyle(children[0]).transform
+ const m41 = transform && transform !== 'none' ? new DOMMatrix(transform).m41 : 0
+ this.#dragTranslateX = m41
+ for (const el of children) {
+ if (!m41 && !el.style.transform && !el.style.transition) continue
+ el.style.transition = 'none'
+ el.style.transform = m41 ? `translateX(${m41}px)` : ''
+ }
+ }
+ // Snapshot the invariant background paint inputs for the whole drag. The
+ // layout is settled at the start of a gesture and only the scroll offset
+ // changes while the finger moves, so every per-move #replaceBackground()
+ // reuses this instead of forcing a fresh style+layout read each frame
+ // (readest#4785). Cleared in #onTouchEnd; the snap that follows rebuilds
+ // its own.
+ this.#bgAnimContext = this.scrolled ? null : this.#computePaginatedBgContext()
+ }
+ #onTouchMove(e) {
+ const state = this.#touchState
+ if (!state?.active || state.blocked) return
+ if (e.touches.length > 1) {
+ if (this.#touchScrolled) e.preventDefault()
+ this.#rejectLayeredGesture(state)
+ return
+ }
+ if (state.pinched) {
+ this.#rejectLayeredGesture(state)
+ return
+ }
+ state.pinched = globalThis.visualViewport.scale > 1
+ if (state.pinched) {
+ this.#rejectLayeredGesture(state)
+ return
+ }
+ if (this.scrolled) return
+ // When the host opts out of swipe-to-paginate, let touch events reach
+ // native behavior (text selection, etc.) without us tracking or
+ // pre-empting them.
+ if (this.hasAttribute('no-swipe')) {
+ this.#rejectLayeredGesture(state)
+ return
+ }
+ const doc = this.#primaryView?.document
+ const selection = doc?.getSelection()
+ if (selection && selection.rangeCount > 0 && !selection.isCollapsed) {
+ this.#rejectLayeredGesture(state)
+ return
+ }
+ const touch = e.changedTouches[0]
+ const isStylus = touch.touchType === 'stylus'
+ if (!isStylus) e.preventDefault()
+ if (this.#scrollLocked) {
+ this.#rejectLayeredGesture(state)
+ return
+ }
+ const x = touch.screenX, y = touch.screenY
+ const dx = state.x - x, dy = state.y - y
+ const dt = e.timeStamp - state.t
+ state.x = x
+ state.y = y
+ state.t = e.timeStamp
+ state.vx = dx / dt
+ state.vy = dy / dt
+ state.dx += dx
+ state.dy += dy
+ state.dt += dt
+ updateReleaseSample(state, state.dx, e.timeStamp)
+ this.#touchScrolled = true
+ if (!this.hasAttribute('animated') || this.hasAttribute('eink')) return
+ // Layered turn styles track the finger by scrubbing a paused view
+ // transition: the outgoing snapshot follows the drag over the still
+ // incoming page, then commits or reverses on release.
+ if (this.#layeredTurn) {
+ if (!this.#vtDrag) this.#layeredDragStart(state, dx, dy)
+ const drag = this.#vtDrag
+ if (drag) {
+ // Net finger travel along the forward direction (rtl books
+ // advance with a rightward finger).
+ const along = this.#rtl ? -state.dx : state.dx
+ const totalDistance = drag.forward ? along : -along
+ // Slide begins visually flat at the point where the gesture
+ // arena awards ownership. The consumed recognition distance
+ // still contributes to release intent below, but no longer
+ // appears as a first-frame jump. Curl preserves its existing
+ // touchstart-relative fold.
+ const visualDistance = drag.style === 'slide'
+ ? totalDistance - drag.visualOriginDistance
+ : totalDistance
+ drag.progress = Math.max(0, Math.min(1,
+ visualDistance / drag.width))
+ this.#vtDragScrub()
+ }
+ return
+ }
+ if (!this.#vertical && Math.abs(state.dx) >= Math.abs(state.dy) && !this.hasAttribute('eink') && (!isStylus || Math.abs(dx) > 1)) {
+ this.scrollBy(dx, 0)
+ } else if (this.#vertical && Math.abs(state.dx) >= Math.abs(state.dy) && (!isStylus || Math.abs(dx) > 1)) {
+ // Vertical books track a horizontal finger by translating the
+ // views sideways: their pages stack along the vertical scroll
+ // axis, so the scroll offset itself cannot follow the finger
+ // (readest#624). The turn commits or settles on release in snap().
+ this.#dragBy(dx)
+ }
+ }
+ // Prepare the document for a layered page turn: choreography classes on
+ // the root and the view-transition-name on the turn boundary. The host
+ // app can mark a wider boundary with [data-view-transition-root] (e.g.
+ // a wrapper that also contains its page header and footer, so the
+ // furniture turns with the page in both layers); otherwise the outermost
+ // shadow host in the document tree is named, since shadow-internal names
+ // are tree-scoped away from the document-level pseudo selectors.
+ #vtSetup(style, forward, scrubbing = false) {
+ injectViewTransitionStyles()
+ const html = document.documentElement
+ const side = this.#rtl ? 'right' : 'left'
+ // Which side the curl fold consumes the old page from: the outer
+ // edge going forward, the spine going backward.
+ const eatSide = (forward !== this.#rtl) ? 'right' : 'left'
+ const classes = ['foliate-vt', `foliate-vt-${style}`,
+ forward ? 'foliate-vt-forward' : 'foliate-vt-backward',
+ `foliate-vt-${side}`, `foliate-vt-eat-${eatSide}`]
+ if (scrubbing) classes.push('foliate-vt-scrub')
+ let namedHost = this
+ while (namedHost.getRootNode() instanceof ShadowRoot) {
+ namedHost = namedHost.getRootNode().host
+ }
+ namedHost = namedHost.closest('[data-view-transition-root]') ?? namedHost
+ namedHost.style.viewTransitionName = 'foliate-turn'
+ this.#vtNamedHost = namedHost
+ // Back the turn layers with the page colour: snapshots of books or
+ // themes without an opaque background (e.g. textured themes) would
+ // otherwise blend the two pages instead of occluding.
+ const doc = this.#primaryView?.document
+ const themeBg = doc?.documentElement
+ ? doc.defaultView.getComputedStyle(doc.documentElement)
+ .getPropertyValue('--theme-bg-color').trim()
+ : ''
+ html.style.setProperty('--foliate-vt-bg', themeBg || 'Canvas')
+ html.classList.remove(...VIEW_TRANSITION_CLASSES)
+ html.classList.add(...classes)
+ return namedHost
+ }
+ #vtCleanup() {
+ const html = document.documentElement
+ html.classList.remove(...VIEW_TRANSITION_CLASSES)
+ html.style.removeProperty('--foliate-vt-bg')
+ this.#vtNamedHost?.style.removeProperty('view-transition-name')
+ this.#vtNamedHost = null
+ }
+ // Permanently yield this touch sequence to another gesture owner. If the
+ // layered snapshot already exists, cancel it through the normal lifecycle
+ // instead of letting later samples (or a replacement finger) scrub it.
+ #rejectLayeredGesture(state = this.#touchState) {
+ if (state) {
+ state.layeredGesture = 'rejected'
+ state.layeredHorizontalDirection = 0
+ state.layeredHorizontalSamples = 0
+ state.layeredHorizontalSampleTime = null
+ }
+ const drag = this.#vtDrag
+ if (!drag) return
+ this.#vtDrag = null
+ this.#finishLayeredDrag(drag, false)
+ }
+ // Begin a finger-tracked layered turn (readest#555). Edge-originated
+ // gestures can claim on their first clear inward move. In the middle, two
+ // consecutive horizontal samples can claim after 6px; a vertical gesture
+ // locks out the turn before a landing wobble can become a page animation.
+ // Ambiguous trajectories retain the established 24px + 1.5x fallback.
+ // Once claimed, the existing `before-capture` lifecycle event explicitly
+ // transfers ownership to the layered turn.
+ #layeredDragStart(state, dx, dy) {
+ if (this.#vtDrag || this.#vtFinishing || this.#vtProgrammatic || !this.#scrollBounds) return
+ const style = this.#layeredTurn
+ if (!style) return
+ if (state.layeredGesture !== 'pending') return
+
+ const absDx = Math.abs(state.dx)
+ const absDy = Math.abs(state.dy)
+ if (absDy >= LAYERED_VERTICAL_REJECT_PX && absDy > absDx) {
+ state.layeredGesture = 'rejected'
+ return
+ }
+
+ const direction = Math.sign(dx)
+ const locallyHorizontal = direction !== 0 && Math.abs(dx) > Math.abs(dy)
+ const clearlyHorizontal = locallyHorizontal
+ && Math.abs(dx) >= Math.abs(dy) * LAYERED_FALLBACK_DOMINANCE
+ const cumulativelyHorizontal = absDx
+ >= absDy * LAYERED_FALLBACK_DOMINANCE
+ if (locallyHorizontal && cumulativelyHorizontal) {
+ const recentSample = state.layeredHorizontalSampleTime != null
+ && state.t - state.layeredHorizontalSampleTime
+ <= LAYERED_EARLY_SAMPLE_INTERVAL_MS
+ if (state.layeredHorizontalDirection === direction && recentSample) {
+ state.layeredHorizontalSamples++
+ } else {
+ state.layeredHorizontalDirection = direction
+ state.layeredHorizontalSamples = 1
+ }
+ state.layeredHorizontalSampleTime = state.t
+ } else {
+ state.layeredHorizontalDirection = 0
+ state.layeredHorizontalSamples = 0
+ state.layeredHorizontalSampleTime = null
+ }
+
+ const edgeClaim = state.layeredEdgeDirection !== 0
+ && !state.layeredEarlyClaimBlocked
+ && direction === state.layeredEdgeDirection
+ && Math.sign(state.dx) === state.layeredEdgeDirection
+ && clearlyHorizontal
+ && cumulativelyHorizontal
+ const earlyCenterClaim = state.layeredEdgeDirection === 0
+ && !state.layeredEarlyClaimBlocked
+ && state.layeredHorizontalSamples >= 2
+ && absDx >= LAYERED_EARLY_CLAIM_PX
+ && Math.sign(state.dx) === state.layeredHorizontalDirection
+ const fallbackClaim = absDx >= LAYERED_FALLBACK_CLAIM_PX
+ && absDx >= absDy * LAYERED_FALLBACK_DOMINANCE
+ if (!edgeClaim && !earlyCenterClaim && !fallbackClaim) return
+
+ // Finger travel along the forward direction decides which neighbor
+ // page gets snapshotted.
+ const along = this.#rtl ? -state.dx : state.dx
+ const forward = along > 0
+ state.layeredGesture = 'claimed'
+ // Gesture ownership is independent of whether an adjacent page exists.
+ // At a book boundary the turn cannot start, but the host must still
+ // suppress the browser's synthesized click for this horizontal drag.
+ // Keep this separate from layered-turn-state so the established
+ // snapshot lifecycle remains unchanged.
+ this.dispatchEvent(new CustomEvent('layered-turn-gesture-claimed', {
+ detail: { style, forward },
+ }))
+ const pages = this.#renderedPages
+ const target = this.#renderedPage + (forward ? 1 : -1)
+ if (target < 0 || target >= pages) return
+ const offset = this.size * (this.#rtl && !this.#vertical ? -target : target)
+ ++this.#slideTurnId
+ this.#isAnimating = true
+ this.dispatchEvent(new CustomEvent('layered-turn-state', {
+ detail: { phase: 'before-capture', style, forward },
+ }))
+ const startPosition = this.containerPosition
+ let turnRoot
+ let transition
+ try {
+ turnRoot = this.#vtSetup(style, forward, true)
+ transition = document.startViewTransition(() => {
+ this.containerPosition = offset
+ if (!this.scrolled) {
+ this.#bgAnimContext = null
+ this.#replaceBackground()
+ }
+ // The old snapshot now owns the visible toolbar. Let the host hide
+ // the live copy synchronously before the new snapshot is captured,
+ // so its regular opacity transition cannot run beside the page.
+ this.dispatchEvent(new CustomEvent('layered-turn-state', {
+ detail: { phase: 'covered', style, forward },
+ }))
+ })
+ } catch {
+ // A synchronous setup/capture failure must release both the global
+ // View Transition styling and the host's before-capture ownership.
+ // Reject the rest of this touch so touchend cannot reinterpret it
+ // as a legacy snap after the layered lifecycle has already ended.
+ state.layeredGesture = 'rejected'
+ this.containerPosition = startPosition
+ this.#vtCleanup()
+ this.#isAnimating = false
+ this.dispatchEvent(new CustomEvent('layered-turn-state', {
+ detail: { phase: 'finished', style, forward, committed: false },
+ }))
+ return
+ }
+ const drag = {
+ transition, offset, startPosition, forward,
+ style, progress: 0, anims: null,
+ visualOriginDistance: style === 'slide'
+ ? Math.max(0, forward ? along : -along) : 0,
+ // Progress must use the width of the actual named snapshot. The
+ // inner content container can be narrower because of page margins;
+ // using it makes the sheet gradually outrun the finger.
+ width: turnRoot.getBoundingClientRect().width
+ || this.#container.getBoundingClientRect().width,
+ }
+ this.#vtDrag = drag
+ transition.ready.then(() => {
+ if (this.#vtDrag !== drag && this.#vtFinishing !== drag) return
+ const anims = document.getAnimations().filter(a =>
+ a.effect?.pseudoElement?.includes('(foliate-turn)'))
+ for (const a of anims) {
+ // CSS is authoritative for linear scrubbing. Keep this as a
+ // best-effort fallback for engines that expose mutable pseudo
+ // animation effects.
+ try { a.effect.updateTiming({ easing: 'linear' }) } catch { /* UA animation */ }
+ a.pause()
+ }
+ drag.anims = anims
+ this.#vtDragScrub(drag)
+ this.dispatchEvent(new CustomEvent('layered-turn-state', {
+ detail: { phase: 'ready', style, forward },
+ }))
+ }, () => {
+ // Capture failed or was skipped; release falls back to snap().
+ if (this.#vtDrag === drag || this.#vtFinishing === drag) drag.failed = true
+ })
+ }
+ #vtDragScrub(drag = this.#vtDrag) {
+ if (!drag?.anims) return
+ for (const a of drag.anims) {
+ const duration = a.effect.getTiming().duration
+ a.currentTime = drag.progress * 0.999
+ * (typeof duration === 'number' ? duration : 300)
+ }
+ }
+ // Resolve a finger-tracked layered turn: play the paused animations to
+ // the end to commit, or reverse them and put the live content back to
+ // cancel. The scroll offset already sits on the target page during the
+ // drag (the snapshot hides it), so cancel restores it under the overlay
+ // before the transition is skipped.
+ async #finishLayeredDrag(drag, commit, playbackRate = 1) {
+ if (this.#vtFinishing === drag) return
+ this.#vtFinishing = drag
+ const { transition, offset, startPosition, style, forward } = drag
+ const { size } = this
+ const id = ++this.#slideTurnId
+ this.#isAnimating = true
+ try {
+ // The update callback owns the old/new snapshot boundary. Await it
+ // before any terminal event so `covered` can never arrive after a
+ // very fast release has already announced cancellation.
+ try { await transition.updateCallbackDone } catch { /* skipped */ }
+ try { await transition.ready } catch { /* capture failed */ }
+ if (id !== this.#slideTurnId) return
+
+ const anims = drag.anims
+ if (anims) for (const a of anims) updatePlaybackRate(a, playbackRate)
+ if (commit) {
+ if (anims) for (const a of anims) a.play()
+ try {
+ await transition.finished
+ } catch { /* skipped */ }
+ } else {
+ if (anims) {
+ for (const a of anims) a.reverse()
+ try {
+ await Promise.all(anims.map(a => a.finished))
+ } catch { /* superseded */ }
+ }
+ if (id !== this.#slideTurnId) return
+ // Restore the pre-turn page under the overlay, then drop it.
+ this.containerPosition = startPosition
+ this.dispatchEvent(new CustomEvent('layered-turn-state', {
+ detail: { phase: 'cancelled', style, forward, committed: false },
+ }))
+ // Give the host two rendering opportunities to paint restored
+ // chrome underneath the now-flat snapshot before it is removed.
+ await new Promise(resolve => requestAnimationFrame(() =>
+ requestAnimationFrame(resolve)))
+ if (id !== this.#slideTurnId) return
+ try { transition.skipTransition() } catch { /* already done */ }
+ try {
+ await transition.finished
+ } catch { /* skipped */ }
+ }
+ if (id !== this.#slideTurnId) return
+ this.#vtCleanup()
+ this.#isAnimating = false
+ const finalPosition = commit ? offset : startPosition
+ this.containerPosition = finalPosition
+ this.#scrollBounds = [
+ finalPosition,
+ this.atStart ? 0 : size,
+ this.atEnd ? 0 : size,
+ ]
+ this.#afterScroll('snap')
+ this.dispatchEvent(new CustomEvent('layered-turn-state', {
+ detail: { phase: 'finished', style, forward, committed: commit },
+ }))
+ } finally {
+ if (this.#vtFinishing === drag) this.#vtFinishing = null
+ }
+ }
+ #dragBy(dx) {
+ if (!this.#scrollBounds) return
+ const [, a, b] = this.#scrollBounds
+ const width = this.#container.getBoundingClientRect().width
+ // Exit direction of a forward turn: vertical-rl pages exit right.
+ const forwardSign = this.#rtl ? 1 : -1
+ const max = (forwardSign > 0 ? b : a) > 0 ? width : 0
+ const min = (forwardSign > 0 ? a : b) > 0 ? -width : 0
+ this.#dragTranslateX = Math.max(min, Math.min(max, this.#dragTranslateX - dx))
+ for (const el of this.#container.children) {
+ el.style.transition = 'none'
+ el.style.transform = `translateX(${this.#dragTranslateX}px)`
+ }
+ }
+ // Animate a released drag back to rest when the page did not turn, and
+ // drop the inline drag styles once the views are back in place. Pass
+ // instant=true to drop them without the settle animation.
+ #settleDrag(instant) {
+ const startX = this.#dragTranslateX
+ this.#dragTranslateX = 0
+ const children = [...this.#container.children]
+ if (!children.some(el => el.style.transform)) return
+ const cleanup = () => {
+ for (const el of children) {
+ el.style.willChange = ''
+ el.style.transition = ''
+ el.style.transform = ''
+ }
+ }
+ if (!startX || instant) return cleanup()
+ const id = ++this.#slideTurnId
+ for (const el of children) {
+ el.style.transition = 'transform 150ms ease-out'
+ el.style.transform = 'translateX(0px)'
+ }
+ setTimeout(() => {
+ if (id !== this.#slideTurnId) return
+ cleanup()
+ }, 170)
+ }
+ #onTouchEnd(e) {
+ // Remove will-change hint to free GPU resources
+ // if (this.#view?.element) {
+ // this.#view.element.style.willChange = 'auto'
+ // }
+
+ // The drag is over: drop the drag-time paint snapshot so the snap
+ // animation (or any other repaint) rebuilds a fresh context.
+ this.#bgAnimContext = null
+ const state = this.#touchState
+ if (state) state.active = false
+ if (state?.blocked) {
+ this.#touchScrolled = false
+ return
+ }
+
+ if (!this.#touchScrolled) {
+ // A tap that never dragged may still have taken over a mid-flight
+ // transform in #onTouchStart; put the views back to rest.
+ if (this.#vertical && !this.scrolled && this.#dragTranslateX) this.#settleDrag()
+ return
+ }
+ this.#touchScrolled = false
+ if (this.scrolled) return
+ if (this.hasAttribute('no-swipe')) return
+ const layeredRejected = this.#layeredTurn
+ && state?.layeredGesture === 'rejected'
+ // Horizontal books have no block-axis page gesture to preserve.
+ if (layeredRejected && !this.#vertical) return
+
+ // A finger that rested before lifting has no flick momentum; the
+ // last touchmove velocity is stale by the rest duration.
+ if (state && e && e.timeStamp - state.t > RELEASE_PAUSE_THRESHOLD_MS) {
+ state.vx = 0
+ state.vy = 0
+ }
+ const releaseTouch = e?.changedTouches?.[0]
+ let releaseDx = state?.dx ?? 0
+ let releaseDy = state?.dy ?? 0
+ if (state && releaseTouch) {
+ // A quick lift can carry the final sample only in changedTouches.
+ // Use that point consistently for Slide's velocity, progress, and
+ // whole-gesture horizontal-intent guard.
+ releaseDx += state.x - releaseTouch.screenX
+ releaseDy += state.y - releaseTouch.screenY
+ }
+ // Also stamp an unchanged final position. Besides making a deliberate
+ // pause velocity-free, this is defensive against non-standard UAs
+ // that omit touchend.changedTouches.
+ if (state) updateReleaseSample(state, releaseDx, e.timeStamp)
+
+ // A finger-tracked layered turn resolves here. Slide projects recent
+ // release velocity onto its current progress; Curl keeps the existing
+ // last-move flick-or-halfway rule. A page-turn commit also requires
+ // the WHOLE gesture to be predominantly horizontal: a finger
+ // landing with a sideways wobble can start the drag before any
+ // vertical distance accumulates, and the lift-off flick velocity is
+ // jitter — judged alone they turned the page randomly on vertical
+ // toolbar-toggle swipes (Android WebView report).
+ const drag = this.#vtDrag
+ if (drag) {
+ this.#vtDrag = null
+ // Keep Curl's established whole-gesture guard exactly as-is;
+ // Slide uses the actual lift-off point required by its projection.
+ const gestureDx = drag.style === 'slide' ? releaseDx : (state?.dx ?? 0)
+ const gestureDy = drag.style === 'slide' ? releaseDy : (state?.dy ?? 0)
+ const gestureAligned = state
+ ? Math.abs(gestureDx) > Math.abs(gestureDy) : true
+ const alongV = this.#rtl ? -(state?.vx ?? 0) : (state?.vx ?? 0)
+ const recentVx = state ? getReleaseVelocity(state) : 0
+ const recentAlongV = this.#rtl ? -recentVx : recentVx
+ const progressVelocity = recentAlongV * (drag.forward ? 1 : -1)
+ const releaseAlong = this.#rtl ? -releaseDx : releaseDx
+ const releaseDistance = drag.forward ? releaseAlong : -releaseAlong
+ const releaseProgress = Math.max(0, Math.min(1,
+ releaseDistance / drag.width))
+ const releaseVisualProgress = Math.max(0, Math.min(1,
+ (releaseDistance - drag.visualOriginDistance) / drag.width))
+ const projectedProgress = releaseProgress
+ + progressVelocity * SLIDE_RELEASE_PROJECTION_MS / drag.width
+ const curlFlick = Math.abs(alongV) > 0.3
+ ? Math.sign(alongV) * (drag.forward ? 1 : -1) : 0
+ const commit = gestureAligned && (drag.style === 'slide'
+ ? projectedProgress > 0.5
+ : curlFlick > 0 ? true : curlFlick < 0 ? false : drag.progress > 0.5)
+ // Do not scrub a gesture that ended vertically: flashing its final
+ // horizontal component here would defeat the intent guard. A valid
+ // Slide release settles from the actual lift-off position; Curl's
+ // existing progress and commit mapping remain unchanged.
+ if (gestureAligned && drag.style === 'slide') {
+ drag.progress = releaseVisualProgress
+ this.#vtDragScrub(drag)
+ }
+ const targetDirection = (drag.forward ? 1 : -1) * (commit ? 1 : -1)
+ // Settle pacing uses a short release window; the decision above
+ // uses it for the lighter Slide gesture while Curl keeps its
+ // original last-sample commit rule.
+ const releaseSpeed = recentAlongV * targetDirection
+ const playbackRate = layeredSettlePlaybackRate(drag.style, releaseSpeed)
+ this.#finishLayeredDrag(drag, commit, playbackRate)
+ return
+ }
+
+ // XXX: Firefox seems to report scale as 1... sometimes...?
+ // at this point I'm basically throwing `requestAnimationFrame` at
+ // anything that doesn't work
+ const snapState = state
+ requestAnimationFrame(() => {
+ if (globalThis.visualViewport.scale === 1 && snapState
+ && this.#touchState === snapState) {
+ const { vx, vy, dx, dy, dt } = snapState
+ // Direction ownership is final for this touch sequence. Once
+ // vertical wins the layered arena, discard later horizontal
+ // hooks while preserving block-axis paging in vertical books.
+ this.snap(layeredRejected ? 0 : vx, vy,
+ layeredRejected ? 0 : dx, dy, dt)
+ }
+ })
+ }
+ #onTouchCancel() {
+ this.#bgAnimContext = null
+ const state = this.#touchState
+ if (state) state.active = false
+ if (state?.blocked) {
+ this.#touchScrolled = false
+ return
+ }
+
+ const drag = this.#vtDrag
+ if (drag) {
+ this.#vtDrag = null
+ this.#touchScrolled = false
+ this.#finishLayeredDrag(drag, false)
+ return
+ }
+
+ const wasScrolled = this.#touchScrolled
+ this.#touchScrolled = false
+ if (this.scrolled || this.hasAttribute('no-swipe')) return
+ if (this.#layeredTurn && state?.layeredGesture === 'rejected'
+ && !this.#vertical) return
+ if (this.#vertical) {
+ this.#settleDrag()
+ } else if (wasScrolled && this.#scrollBounds) {
+ this.#scrollTo(this.#scrollBounds[0], 'snap')
+ }
+ }
+ // allows one to process rects as if they were LTR and horizontal
+ #getRectMapper(view) {
+ if (this.scrolled) {
+ const size = view ? view.element.getBoundingClientRect()[this.sideProp] : this.#renderedViewSize
+ const marginTop = this.#marginTop
+ const marginBottom = this.#marginBottom
+ return this.#vertical
+ ? ({ left, right }) =>
+ ({ left: size - right - marginTop, right: size - left - marginBottom })
+ : ({ top, bottom }) => ({ left: top - marginTop, right: bottom - marginBottom })
+ }
+ // For RTL the mapper mirrors a rect within the iframe-local
+ // coordinate space of the *target view* (each view is a separate
+ // document with its own column layout), not across the whole
+ // container. Using `#renderedPages * size` (= total width of all
+ // loaded views) was correct only when a single view was loaded;
+ // once #fillVisibleArea pre-loads adjacent sections the total
+ // width grows but the per-view rect coordinates do not change,
+ // so the mapper would scroll the same anchor to a different
+ // (further-right) container offset on every re-anchor — driving
+ // the page off the user's saved position. Use the supplied
+ // view's width when available, falling back to the primary view.
+ const targetView = view ?? this.#primaryView
+ const viewSize = targetView
+ ? targetView.element.getBoundingClientRect()[this.sideProp]
+ : this.#renderedViewSize
+ // Vertical books map the block axis (top/bottom) onto the scroll
+ // axis regardless of page progression: vertical-rl is RTL but its
+ // scrollTop still grows forward, so the RTL mirror below only
+ // applies to horizontal writing.
+ return this.#vertical
+ ? ({ top, bottom }) => ({ left: top, right: bottom })
+ : this.#rtl
+ ? ({ left, right }) =>
+ ({ left: viewSize - right, right: viewSize - left })
+ : f => f
+ }
+ async #scrollToRect(rect, reason) {
+ if (this.scrolled) {
+ // rect is in iframe-local coordinates; add view offset
+ // to convert to container scroll coordinates
+ const localOffset = this.#getRectMapper()(rect).left - 3
+ const viewOffset = this.#getViewOffset(this.#primaryIndex)
+ return this.#scrollTo(viewOffset + localOffset, reason)
+ }
+ // rect is in iframe-local coordinates. Convert to container
+ // coordinates by adding the primary view's offset.
+ const localOffset = this.#getRectMapper()(rect).left
+ const viewOffset = this.#getViewOffset(this.#primaryIndex)
+ const containerOffset = viewOffset + localOffset
+ return this.#scrollToPage(Math.floor(containerOffset / this.size + 0.01), reason)
+ }
+ async #scrollTo(offset, reason, smooth) {
+ const { size } = this
+ // Near-equality, not exact: on fractional device-pixel-ratio screens
+ // (e.g. 2.75) the container scroll rests a sub-pixel off the page
+ // offset, and an exact check made every same-page settle miss this
+ // short-circuit and run a full animation — with the layered turn
+ // styles, a visible full-page view-transition flash on every
+ // vertical toolbar-toggle swipe.
+ if (Math.abs(this.containerPosition - offset) < 1) {
+ this.#scrollBounds = [offset, this.atStart ? 0 : size, this.atEnd ? 0 : size]
+ // A released drag that stays on the same page settles back to rest.
+ if (this.#vertical && !this.scrolled) this.#settleDrag()
+ this.#afterScroll(reason)
+ return
+ }
+ // FIXME: vertical-rl only, not -lr
+ if (this.scrolled && this.#vertical) offset = -offset
+ if ((reason === 'snap' || smooth) && this.hasAttribute('animated') && !this.hasAttribute('eink')) {
+ // Layered turn styles: snapshot the outgoing page and animate it
+ // over the live, stationary incoming page (readest#555). Works
+ // for every writing mode since the snapshot is axis-agnostic —
+ // but only for actual page changes: a sub-page settle must not
+ // snapshot and re-slide the page it is already resting on.
+ const turning = Math.abs(offset - this.containerPosition) > size / 2
+ const layered = !this.scrolled && turning ? this.#layeredTurn : null
+ if (layered) return this.#viewTransitionTurn(offset, reason, layered)
+ const startPosition = this.containerPosition
+ this.#isAnimating = true
+ // Vertical paginated books page along scrollTop but read
+ // horizontally, so a scroll-axis slide would move perpendicular to
+ // the page turn. Run the two-phase horizontal slide instead:
+ // vertical-rl turns forward exit to the right (page progression),
+ // vertical-lr to the left (readest#624).
+ if (!this.scrolled && this.#vertical) {
+ this.#bgAnimContext = null
+ // Oversized sections would composite as one giant layer to
+ // animate the transform (the freeze rafAnimateScroll exists to
+ // avoid), and a native scroll animation cannot move
+ // horizontally here, so swap instantly.
+ if (!this.hasAttribute('gpu-composite')
+ && this.#renderedViewSize > RAF_ANIMATE_SCROLL_THRESHOLD) {
+ this.#isAnimating = false
+ this.#settleDrag(true)
+ this.containerPosition = offset
+ this.#scrollBounds = [offset, this.atStart ? 0 : size, this.atEnd ? 0 : size]
+ this.#afterScroll(reason)
+ return
+ }
+ const id = ++this.#slideTurnId
+ const forward = offset > startPosition
+ const exitSign = (this.#rtl ? 1 : -1) * (forward ? 1 : -1)
+ const width = this.#container.getBoundingClientRect().width
+ // Continue from a finger drag already in progress.
+ const dragStartX = this.#dragTranslateX
+ this.#dragTranslateX = 0
+ return slideTurnAnimation(
+ this.#container, this.scrollProp, offset, exitSign, width, 300,
+ () => id !== this.#slideTurnId,
+ // Reposition the background segments for the new scroll
+ // offset while both pages are off-screen.
+ () => this.#replaceBackground(),
+ dragStartX,
+ ).then(() => {
+ if (id !== this.#slideTurnId) return
+ this.#isAnimating = false
+ this.#scrollBounds = [offset, this.atStart ? 0 : size, this.atEnd ? 0 : size]
+ this.#afterScroll(reason)
+ })
+ }
+ // Snapshot the invariant paint inputs once; every per-frame
+ // #replaceBackground below reuses this instead of forcing a fresh
+ // style+layout read each frame (readest#4785).
+ this.#bgAnimContext = this.scrolled ? null : this.#computePaginatedBgContext()
+ // For a large section the CSS-transform animation blocks the UI while
+ // Blink composites the oversized layer; animate the native scroll
+ // offset instead (incremental/tiled, like a swipe), keeping the
+ // per-page backgrounds synced each frame. Hosts that composite large
+ // layers without that freeze (Apple WebKit, via the gpu-composite
+ // opt-in) skip this main-thread fallback and keep the smooth GPU
+ // cssAnimateScroll path even for large sections (readest#4768).
+ if (!this.hasAttribute('gpu-composite')
+ && this.#renderedViewSize > RAF_ANIMATE_SCROLL_THRESHOLD) {
+ return rafAnimateScroll(startPosition, offset, 300, easeOutQuad, x => {
+ this.#container[this.scrollProp] = x
+ if (!this.scrolled) this.#replaceBackground()
+ }).then(() => {
+ this.#isAnimating = false
+ this.#bgAnimContext = null
+ this.#scrollBounds = [offset, this.atStart ? 0 : size, this.atEnd ? 0 : size]
+ this.#afterScroll(reason)
+ })
+ }
+ // Slide the per-view backgrounds in lockstep with the content. The
+ // content animates via a transform on each view; we re-sync the
+ // backgrounds to that animated offset every frame so each page's
+ // colour stays glued to its content as it slides. Pre-setting the
+ // destination instead made the outgoing page lose its background the
+ // instant the animation started, flashing the wrong colour across
+ // the part of the screen it still covered until it slid off.
+ if (!this.scrolled) {
+ this.#replaceBackground(startPosition)
+ const child = this.#container.children[0]
+ const syncBackground = () => {
+ if (!this.#isAnimating) return
+ const transform = child && getComputedStyle(child).transform
+ const tx = transform && transform !== 'none'
+ ? new DOMMatrix(transform)[this.#vertical ? 'm42' : 'm41'] : 0
+ this.#replaceBackground(startPosition - tx)
+ requestAnimationFrame(syncBackground)
+ }
+ requestAnimationFrame(syncBackground)
+ }
+ // Use GPU-accelerated scroll animation for smoother experience on high refresh rate screens
+ return cssAnimateScroll(
+ this.#container,
+ this.scrollProp,
+ startPosition,
+ offset,
+ 300,
+ ).then(() => {
+ this.#isAnimating = false
+ this.#bgAnimContext = null
+ this.#scrollBounds = [offset, this.atStart ? 0 : size, this.atEnd ? 0 : size]
+ this.#afterScroll(reason)
+ })
+ } else {
+ if (this.#vertical && !this.scrolled) this.#settleDrag(true)
+ this.containerPosition = offset
+ this.#scrollBounds = [offset, this.atStart ? 0 : size, this.atEnd ? 0 : size]
+ this.#afterScroll(reason)
+ }
+ }
+ // Turn the page with a View Transitions snapshot (readest#555): the live
+ // content jumps to the destination inside the transition callback, then
+ // the rasterized outgoing page slides away or curls open ON TOP of it, so
+ // the incoming page stays perfectly still underneath (Apple Books style).
+ // Forward turns move the old snapshot out; backward turns bring the new
+ // snapshot in over the still page. The choreography is selected with
+ // classes on the document root, where the ::view-transition pseudo tree
+ // lives.
+ async #viewTransitionTurn(offset, reason, style) {
+ // A layered transition has exclusive ownership of the document-level
+ // pseudo tree. Ignore overlapping navigation until its lifecycle has
+ // reached cleanup; otherwise the newer generation strands the older
+ // turn before it can dispatch `finished`.
+ if (this.#vtDrag || this.#vtFinishing || this.#vtProgrammatic) return
+ // An accepted keyboard/tap turn owns navigation for the remainder of
+ // any finger that is still down. Permanently reject a pending arena
+ // candidate so its later move cannot reuse the pre-turn start point
+ // and launch a second layered turn after this transition finishes.
+ if (this.#touchState?.active) this.#rejectLayeredGesture(this.#touchState)
+ const { size } = this
+ const startPosition = this.containerPosition
+ // RTL horizontal scroll coordinates are negative; compare magnitudes.
+ const forward = Math.abs(offset) > Math.abs(startPosition)
+ const id = ++this.#slideTurnId
+ this.#isAnimating = true
+ this.#settleDrag(true)
+ this.#vtSetup(style, forward)
+ const transition = document.startViewTransition(() => {
+ this.containerPosition = offset
+ if (!this.scrolled) {
+ this.#bgAnimContext = null
+ this.#replaceBackground()
+ }
+ })
+ const active = { transition, id }
+ this.#vtProgrammatic = active
+ try {
+ try {
+ await transition.finished
+ } catch {
+ // Interrupted or skipped; the newer turn owns the cleanup.
+ }
+ if (id !== this.#slideTurnId) return
+ this.#vtCleanup()
+ this.#isAnimating = false
+ // A neighbor view finishing its load mid-transition re-anchors the
+ // container to the stale pre-turn anchor; re-assert the destination
+ // like the push animation does at its end.
+ this.containerPosition = offset
+ this.#scrollBounds = [offset, this.atStart ? 0 : size, this.atEnd ? 0 : size]
+ this.#afterScroll(reason)
+ } finally {
+ if (this.#vtProgrammatic === active) this.#vtProgrammatic = null
+ }
+ }
+ async #scrollToPage(page, reason, smooth) {
+ // Negative offsets are an artifact of RTL horizontal scroll
+ // coordinates; vertical books page along scrollTop, always positive.
+ const offset = this.size * (this.#rtl && !this.#vertical ? -page : page)
+ return this.#scrollTo(offset, reason, smooth)
+ }
+ async scrollToAnchor(anchor, select, smooth) {
+ return this.#scrollToAnchor(anchor, select ? 'selection' : 'navigation', smooth)
+ }
+ async #scrollToAnchor(anchor, reason = 'anchor', smooth = false) {
+ this.#anchor = anchor
+ const rects = uncollapse(anchor)?.getClientRects?.()
+ // if anchor is an element or a range
+ if (rects) {
+ // when the start of the range is immediately after a hyphen in the
+ // previous column, there is an extra zero width rect in that column
+ const rect = Array.from(rects)
+ .find(r => r.width > 0 && r.height > 0 && r.x >= 0 && r.y >= 0) || rects[0]
+ // An anchor can have no client rects at all: a range over content
+ // that is entirely absolutely positioned (e.g. a Duokan fullscreen
+ // cover pins its only image) has no in-flow boxes. Bailing without
+ // scrolling would leave #scrollBounds unseeded, and scrollBy/snap
+ // then silently drop every swipe on the page (#5263). Settle on
+ // the primary section's start instead.
+ if (!rect) return this.scrolled
+ ? this.#scrollTo(this.#getViewOffset(this.#primaryIndex), reason)
+ : this.#scrollToPage(this.#getPagesBeforeView(this.#primaryIndex), reason)
+ await this.#scrollToRect(rect, reason)
+ // focus the element when navigating with keyboard or screen reader
+ if (reason === 'navigation') {
+ let node = anchor.focus ? anchor : undefined
+ if (!node && anchor.startContainer) {
+ node = anchor.startContainer
+ if (node.nodeType === Node.TEXT_NODE) {
+ node = node.parentElement
+ }
+ }
+ if (node && node.focus) {
+ node.tabIndex = -1
+ node.style.outline = 'none'
+ node.focus({ preventScroll: true })
+ }
+ }
+ return
+ }
+ // if anchor is a fraction
+ if (this.scrolled) {
+ // In scrolled mode with multi-view, offset to the primary view's position
+ const primaryOffset = this.#getViewOffset(this.#primaryIndex)
+ const primaryView = this.#primaryView
+ const primarySize = primaryView
+ ? primaryView.element.getBoundingClientRect()[this.sideProp] : this.#renderedViewSize
+ await this.#scrollTo(primaryOffset + anchor * primarySize, reason, smooth)
+ return
+ }
+ // In paginated mode, account for pages before the primary section
+ const primaryView = this.#primaryView
+ if (!primaryView) return
+ const pagesBeforePrimary = this.#getPagesBeforeView(this.#primaryIndex)
+ const textPages = primaryView.contentPages
+ // Same as the rect-less bail above: a section that measured zero
+ // content pages must still settle so #scrollBounds gets seeded.
+ if (!textPages) return this.#scrollToPage(pagesBeforePrimary, reason)
+ // textPages is in column units; convert to spread page for scrolling
+ const newColumn = Math.round(anchor * (textPages - 1))
+ const newSpreadPage = Math.floor(newColumn / this.columnCount)
+ await this.#scrollToPage(pagesBeforePrimary + newSpreadPage, reason, smooth)
+ }
+ // Get the pixel offset of a view within the container
+ #getViewOffset(index) {
+ let offset = 0
+ for (const [i, view] of this.#sortedViews) {
+ if (i === index) return offset
+ offset += view.element.getBoundingClientRect()[this.sideProp]
+ }
+ return offset
+ }
+ // Get number of full pages (spreads) before a given view.
+ // Uses floor so the view's first column is always on or after
+ // the returned page — never rounded past it. The 0.01 tolerance
+ // absorbs sub-pixel drift on fractional-DPR devices where
+ // getBoundingClientRect() accumulates ~0.0001px errors.
+ #getPagesBeforeView(index) {
+ return Math.floor(this.#getViewOffset(index) / this.size + 0.01)
+ }
+ #getVisibleRange() {
+ const targetView = this.#primaryView
+ if (!targetView?.document) return
+ const viewOffset = this.#getViewOffset(this.#primaryIndex)
+ if (this.scrolled) {
+ // In scrolled mode several sections can share the viewport at a
+ // section boundary, and the primary view may even be scrolled out
+ // of view. Prefer the view that covers the viewport centre — that
+ // is the section the reader is actually reading, so its title is
+ // the one to show. Falling back to the first overlapping view (the
+ // old behaviour) would report a thin sliver at the top edge, whose
+ // chapter title no longer matches the dominant content
+ // (readest#4436). Keep that first valid range as a fallback for
+ // when no loaded view covers the centre (e.g. at the very top or
+ // bottom of the book).
+ const center = this.#renderedStart + this.size / 2
+ let fallback
+ for (const [index, v] of this.#sortedViews) {
+ if (!v.document) continue
+ const off = this.#getViewOffset(index)
+ const vSize = v.element.getBoundingClientRect()[this.sideProp]
+ // Skip views entirely outside the viewport
+ if (off + vSize <= this.#renderedStart || off >= this.#renderedEnd) continue
+ const range = getVisibleRange(v.document,
+ this.#renderedStart - off, this.#renderedEnd - off,
+ this.#getRectMapper(v))
+ if (!range || range.collapsed) continue
+ if (center >= off && center < off + vSize) return { range, index }
+ fallback ??= { range, index }
+ }
+ return fallback
+ }
+ const range = getVisibleRange(targetView.document,
+ this.#renderedStart - viewOffset,
+ this.#renderedEnd - viewOffset,
+ this.#getRectMapper(targetView))
+ return range ? { range, index: this.#primaryIndex } : undefined
+ }
+ // Determine which view is primary based on scroll position
+ #detectPrimaryView() {
+ if (this.#views.size <= 1) return
+ const visibleStart = this.#renderedStart
+ let offset = 0
+ for (const [index, view] of this.#sortedViews) {
+ const viewSize = view.element.getBoundingClientRect()[this.sideProp]
+ if (visibleStart < offset + viewSize - 1) {
+ if (index !== this.#primaryIndex) {
+ this.#primaryIndex = index
+ this.#syncA11y()
+ this.#trimDistantViews()
+ this.#replaceBackground()
+ this.#fillPromise = this.#preloadNext()
+ }
+ return
+ }
+ offset += viewSize
+ }
+ }
+ // Pre-load adjacent sections from the current primary so the
+ // next/prev sections are ready when the user paginates.
+ // Does NOT re-scroll to avoid fighting with the user's current
+ // scroll position.
+ async #preloadNext() {
+ if (this.noPreload || this.noContinuousScroll) return
+ this.#filling = true
+ try {
+ const { size } = this
+ const minPages = 5
+ const maxSections = 8
+ // Load forward sections until we have enough pages ahead
+ let iterations = 0
+ while (this.#views.size < maxSections && iterations < maxSections) {
+ iterations++
+ const pagesAhead = size > 0
+ ? Math.floor((this.#renderedViewSize - this.#renderedEnd) / size)
+ : 0
+ if (pagesAhead >= minPages) break
+ const sorted = this.#sortedViews
+ const lastIndex = sorted[sorted.length - 1]?.[0]
+ if (lastIndex == null) break
+ const nextIdx = this.#adjacentIndex(1, lastIndex)
+ if (nextIdx == null) break
+ // Stop preloading at writing-mode boundaries
+ if (!this.#isSameDirection(nextIdx)) break
+ await this.#loadAdjacentSection(nextIdx)
+ if (!this.#views.has(nextIdx)) break
+ }
+ // Wait a frame so ResizeObserver callbacks fire while
+ // #filling is still true, preventing onExpand from
+ // re-scrolling to a stale anchor position.
+ await new Promise(r => requestAnimationFrame(r))
+ } finally {
+ this.#filling = false
+ this.dispatchEvent(new Event('stabilized'))
+ }
+ }
+ #afterScroll(reason) {
+ // In multi-view, detect which section is primary
+ if (this.#views.size > 1 && reason !== 'anchor' && reason !== 'navigation') {
+ this.#detectPrimaryView()
+ // Scrolling can bring a previously off-screen view into the
+ // viewport (e.g. the next section's first column joining the
+ // current section's last column in a dual-page spread) without
+ // changing which view is primary. Re-sync a11y attributes so
+ // a newly visible view stops being aria-hidden.
+ this.#syncA11y()
+ }
+ const { range, index: visibleIndex } = this.#getVisibleRange() || {}
+ if (!range) return
+ this.#lastVisibleRange = range
+ // don't set new anchor if relocation was to scroll to anchor
+ if (reason !== 'selection' && reason !== 'navigation' && reason !== 'anchor')
+ this.#anchor = range
+ else this.#justAnchored = true
+
+ const index = visibleIndex ?? this.#primaryIndex
+ const primaryView = this.#primaryView
+ const detail = { reason, range, index }
+ if (this.scrolled) {
+ // The relocated index may differ from #primaryIndex (the centre of
+ // the viewport can sit in a different view than its top edge), so
+ // size the fraction against the relocated view to keep it in sync.
+ const indexView = this.#views.get(index) ?? primaryView
+ const primaryOffset = this.#getViewOffset(index)
+ const primarySize = indexView
+ ? indexView.element.getBoundingClientRect()[this.sideProp] : this.#renderedViewSize
+ detail.fraction = primarySize > 0
+ ? Math.max(0, Math.min(1, (this.#renderedStart - primaryOffset) / primarySize)) : 0
+ } else if (this.#renderedPages > 0 && primaryView) {
+ const page = this.#renderedPage
+ const pagesBeforePrimary = this.#getPagesBeforeView(index)
+ const textPages = primaryView.contentPages
+ this.#header.style.visibility = page > 0 ? 'visible' : 'hidden'
+ // page is in spread units, textPages is in column units
+ const localPage = page - pagesBeforePrimary
+ const localColumn = localPage * this.columnCount
+ detail.fraction = textPages > 0 ? Math.max(0, Math.min(1, localColumn / textPages)) : 0
+ detail.size = textPages > 0 ? this.columnCount / textPages : 1
+ if (reason === 'container-scroll' && localPage === 0) return
+ }
+ // Update per-column backgrounds for the current scroll position
+ if (!this.scrolled) this.#replaceBackground()
+ this.dispatchEvent(new CustomEvent('relocate', { detail }))
+ }
+ async #display(promise) {
+ this.#stabilizing = true
+ this.#container.style.opacity = '0'
+ const { index, src, data, anchor, onLoad, select } = await promise
+ this.#primaryIndex = index
+ this.#syncA11y()
+ const hasFocus = this.#primaryView?.document?.hasFocus()
+ if (src) {
+ const view = this.#createView(index)
+ const afterLoad = doc => {
+ if (doc.head) {
+ const $styleBefore = doc.createElement('style')
+ doc.head.prepend($styleBefore)
+ const $style = doc.createElement('style')
+ doc.head.append($style)
+ this.sections[index].spineProperties?.forEach(
+ prop => doc.documentElement.setAttribute('data-' + prop, ''))
+ this.#styleMap.set(doc, [$styleBefore, $style])
+ }
+ onLoad?.({ doc, index })
+ }
+ const beforeRender = this.#beforeRender.bind(this)
+ await view.load(src, data, afterLoad, beforeRender)
+ if (!view.document?.documentElement || !view.document.body) {
+ this.#destroyView(index)
+ this.#primaryIndex = this.#sortedViews[0]?.[0] ?? -1
+ this.#container.style.opacity = '1'
+ this.#stabilizing = false
+ this.dispatchEvent(new Event('stabilized'))
+ return
+ }
+ // Cache direction for future preload boundary checks
+ if (view.document) {
+ const dir = getDirection(view.document)
+ this.#directionCache.set(index, dir.vertical)
+ }
+ this.dispatchEvent(new CustomEvent('create-overlayer', {
+ detail: {
+ doc: view.document, index,
+ attach: overlayer => view.overlayer = overlayer,
+ },
+ }))
+ }
+ // Pre-load previous section when needed:
+ // - Short primary alignment (section shorter than one spread)
+ // - Scrolled mode with anchor in top half — so the user can
+ // scroll backward into the previous section immediately
+ const primaryView = this.#primaryView
+ if (!this.noPreload && !this.noContinuousScroll && primaryView) {
+ const needsPrev = (primaryView.contentPages > 0 && primaryView.contentPages < this.columnCount)
+ if (needsPrev || this.scrolled) {
+ const sorted = this.#sortedViews
+ const firstIndex = sorted[0]?.[0]
+ if (firstIndex != null) {
+ const prevIdx = this.#adjacentIndex(-1, firstIndex)
+ if (prevIdx != null && this.#isSameDirection(prevIdx)) {
+ await this.#loadAdjacentSection(prevIdx)
+ }
+ }
+ }
+ }
+ const resolvedAnchor = (typeof anchor === 'function'
+ ? anchor(primaryView.document) : anchor) ?? 0
+ await this.scrollToAnchor(resolvedAnchor, select)
+ if (hasFocus) this.focusView()
+ // Reveal content now that primary section is positioned
+ this.#container.style.opacity = '1'
+ this.#rendered = true
+ // Emit stabilized so listeners can react, but keep #stabilizing
+ // true until fill completes to prevent the debounced scroll
+ // handler from loading backward sections during rapid DOM changes.
+ this.dispatchEvent(new Event('stabilized'))
+ // Load remaining adjacent sections progressively (non-blocking).
+ // In scrolled mode, skip reanchor — browser scroll anchoring
+ // preserves position when content is added above/below.
+ this.#fillPromise = this.#fillVisibleArea(
+ { reanchor: !this.scrolled })
+ this.#fillPromise.then(() => { this.#stabilizing = false })
+ }
+ // Load an adjacent section without changing primary index
+ async #loadAdjacentSection(index) {
+ if (this.#views.has(index) || !this.#canGoToIndex(index)) return
+ const section = this.sections[index]
+ if (!section || section.linear === 'no') return
+ // Detect a prepend: a section being inserted *above* every currently
+ // loaded view in scrolled mode. The browser suppresses scroll
+ // anchoring while scrollTop is 0, so the inserted section would push
+ // the visible content down and the viewport would drift into the
+ // previous section (readest/readest#4112). Capture the scroll position
+ // before the insertion so it can be restored once the view renders.
+ const firstIndex = this.#sortedViews[0]?.[0]
+ const isPrepend = this.scrolled && firstIndex != null && index < firstIndex
+ const startBefore = isPrepend ? this.#renderedStart : 0
+ try {
+ const src = await section.load()
+ const data = await section.loadContent?.()
+ const view = this.#createView(index)
+ const afterLoad = doc => {
+ if (doc.head) {
+ const $styleBefore = doc.createElement('style')
+ doc.head.prepend($styleBefore)
+ const $style = doc.createElement('style')
+ doc.head.append($style)
+ section.spineProperties?.forEach(
+ prop => doc.documentElement.setAttribute('data-' + prop, ''))
+ this.#styleMap.set(doc, [$styleBefore, $style])
+ }
+ this.setStyles(this.#styles)
+ this.dispatchEvent(new CustomEvent('load', { detail: { doc, index } }))
+ }
+ // Adjacent sections reuse the primary view's cached layout
+ // — they must NOT call #beforeRender, which would modify
+ // global state (direction, CSS classes, dir attribute, etc.).
+ const cachedLayout = this.#lastLayout
+ const beforeRender = () => cachedLayout
+ await view.load(src, data, afterLoad, beforeRender)
+ if (!view.document?.documentElement || !view.document.body) {
+ this.#destroyView(index)
+ return
+ }
+ // Cache direction for future preload boundary checks
+ if (view.document) {
+ const dir = getDirection(view.document)
+ this.#directionCache.set(index, dir.vertical)
+ // Destroy views with a different writing-mode immediately.
+ // Mixed-direction views corrupt scroll/page calculations.
+ if (dir.vertical !== this.#vertical) {
+ this.#destroyView(index)
+ return
+ }
+ }
+ // Keep the previously visible content anchored: the new view added
+ // `addedSize` px above it, so the scroll position must grow by the
+ // same amount. This corrects the browser's scroll-anchoring
+ // suppression at scrollTop 0 and is a no-op when anchoring already
+ // handled the shift (correction ≈ 0).
+ if (isPrepend) {
+ const addedSize = view.element.getBoundingClientRect()[this.sideProp]
+ const correction = startBefore + addedSize - this.#renderedStart
+ if (Math.abs(correction) > 0.5)
+ this.containerPosition += (this.#vertical ? -1 : 1) * correction
+ }
+ this.dispatchEvent(new CustomEvent('create-overlayer', {
+ detail: {
+ doc: view.document, index,
+ attach: overlayer => view.overlayer = overlayer,
+ },
+ }))
+ } catch (e) {
+ console.warn(e)
+ console.warn(new Error(`Failed to load adjacent section ${index}`))
+ }
+ }
+ // Fill adjacent sections until at least `minPages` pages exist
+ // beyond the current viewport in each direction (forward always,
+ // backward only when the primary section is short).
+ // When reanchor is false (background pre-loading), skip re-scrolling
+ // to avoid fighting with the user's current scroll position.
+ async #fillVisibleArea({ reanchor = true } = {}) {
+ if (this.noPreload || this.noContinuousScroll || this.#filling) return
+ this.#filling = true
+ try {
+ const { size } = this
+ if (!size) return
+ const minPages = 5
+ const maxSections = 8
+
+ // If the primary section is shorter than one spread and
+ // there's no section already loaded before it, load the
+ // previous section to fill the leading columns
+ const primaryView = this.#primaryView
+ if (primaryView && primaryView.contentPages > 0
+ && primaryView.contentPages < this.columnCount) {
+ const sorted = this.#sortedViews
+ const firstIndex = sorted[0]?.[0]
+ if (firstIndex != null && firstIndex >= this.#primaryIndex) {
+ const prevIdx = this.#adjacentIndex(-1, firstIndex)
+ if (prevIdx != null && this.#isSameDirection(prevIdx)) {
+ await this.#loadAdjacentSection(prevIdx)
+ }
+ }
+ }
+
+ // Load forward sections until we have enough pages ahead
+ let iterations = 0
+ while (this.#views.size < maxSections && iterations < maxSections) {
+ iterations++
+ const pagesAhead = Math.floor(
+ (this.#renderedViewSize - this.#renderedEnd) / size)
+ if (pagesAhead >= minPages) break
+ const sorted = this.#sortedViews
+ const lastIndex = sorted[sorted.length - 1]?.[0]
+ if (lastIndex == null) break
+ const nextIdx = this.#adjacentIndex(1, lastIndex)
+ if (nextIdx == null) break
+ // Stop at writing-mode boundaries
+ if (!this.#isSameDirection(nextIdx)) break
+ await this.#loadAdjacentSection(nextIdx)
+ if (!this.#views.has(nextIdx)) break
+ }
+ if (reanchor) this.#scrollToAnchor(this.#anchor)
+ } finally {
+ this.#filling = false
+ // Emit stabilized so post-layout processing (e.g. warichu)
+ // runs for newly loaded adjacent sections.
+ this.dispatchEvent(new Event('stabilized'))
+ }
+ }
+ // Trim views whose content is entirely more than 10 pages away
+ // from the current viewport. Only removes views AFTER the primary
+ // — removing views before would shift scroll position.
+ #trimDistantViews() {
+ const { size } = this
+ if (!size) return
+ const maxDistance = size * 10
+ const viewportEnd = this.#renderedEnd
+ for (const [index, view] of this.#sortedViews) {
+ if (index <= this.#primaryIndex) continue
+ const offset = this.#getViewOffset(index)
+ if (offset - viewportEnd > maxDistance) {
+ this.#destroyView(index)
+ }
+ }
+ }
+ #canGoToIndex(index) {
+ return index >= 0 && index <= this.sections.length - 1
+ }
+ async #goTo({ index, anchor, select }) {
+ const section = this.sections[index]
+ if (!section) return
+ // Check if the target section has a different writing-mode.
+ // If direction changes, we must destroy all views and do a full
+ // rebuild via #display — mixed-direction views cannot coexist.
+ let directionChanged = false
+ if (this.#views.has(index)) {
+ const view = this.#views.get(index)
+ if (view?.document) {
+ const { vertical } = getDirection(view.document)
+ directionChanged = vertical !== this.#vertical
+ }
+ } else if (this.#directionCache.has(index)) {
+ directionChanged = this.#directionCache.get(index) !== this.#vertical
+ }
+ // When direction is unknown (not cached), #beforeRender will
+ // detect and clean up stale views if a change actually occurs.
+
+ if (this.#views.has(index) && !directionChanged) {
+ // View already loaded — reuse it without
+ // clearing/reloading. Just change primary and scroll.
+ this.#stabilizing = true
+ // Continuous scrolled mode keeps the target view rendered, so we
+ // scroll straight to it without fading the container — fading
+ // produced a hard blank-screen flash on adjacent navigation
+ // (readest/readest#4112 follow-up). Paginated mode and discrete
+ // no-continuous-scroll still fade to hide the page reposition.
+ const blank = !this.scrolled || this.noContinuousScroll
+ if (blank) this.#container.style.opacity = '0'
+ const hasFocus = this.#primaryView?.document?.hasFocus()
+ this.#primaryIndex = index
+ this.#syncA11y()
+ this.#trimDistantViews()
+ // In noContinuousScroll mode, destroy all non-primary views
+ if (this.noContinuousScroll) {
+ for (const [i] of this.#views) {
+ if (i !== index) this.#destroyView(i)
+ }
+ }
+ const primaryView = this.#primaryView
+ const resolvedAnchor = (typeof anchor === 'function'
+ ? anchor(primaryView.document) : anchor) ?? 0
+ // Pre-load the previous section so the user can move backward right
+ // away: a short paginated primary needs it to fill the leading
+ // columns; scrolled mode needs it so scrolling up reveals the
+ // previous section instead of dead-ending at the top (the debounced
+ // backward-preload can't cover this — it bails while navigation is
+ // stabilizing). Paginated must load it before revealing; scrolled
+ // mode loads it after the scroll so the transition stays instant,
+ // with #loadAdjacentSection compensation keeping the viewport
+ // anchored as the section is inserted above.
+ const needsPrev = primaryView && primaryView.contentPages > 0
+ && primaryView.contentPages < this.columnCount
+ const loadPrev = async () => {
+ if (this.noPreload || this.noContinuousScroll) return
+ if (!(needsPrev || this.scrolled)) return
+ const firstIndex = this.#sortedViews[0]?.[0]
+ if (firstIndex == null) return
+ const prevIdx = this.#adjacentIndex(-1, firstIndex)
+ if (prevIdx != null && this.#isSameDirection(prevIdx))
+ await this.#loadAdjacentSection(prevIdx)
+ }
+ if (!this.scrolled) await loadPrev()
+ await this.scrollToAnchor(resolvedAnchor, select)
+ if (this.scrolled) await loadPrev()
+ if (blank) this.#container.style.opacity = '1'
+ if (hasFocus) this.focusView()
+ // Load remaining adjacent sections progressively;
+ // keep #stabilizing true until fill completes
+ this.#fillPromise = this.#fillVisibleArea()
+ this.#fillPromise.then(() => { this.#stabilizing = false })
+ } else {
+ // When direction changes, clear ALL views — no reuse possible
+ // across writing-mode boundaries. When direction is unknown
+ // (not yet cached), keep nearby views; #beforeRender will
+ // clean up if the loaded section turns out to differ.
+ if (directionChanged) {
+ this.#destroyAllViews()
+ } else {
+ const keep = new Set([index])
+ if (!this.noContinuousScroll) {
+ for (const [i] of this.#views) {
+ if (Math.abs(i - index) <= 2) keep.add(i)
+ }
+ }
+ this.#clearViewsExcept(keep)
+ }
+ const oldIndex = this.#primaryIndex
+ const onLoad = detail => {
+ if (oldIndex >= 0 && !this.#views.has(oldIndex))
+ this.sections[oldIndex]?.unload?.()
+ this.setStyles(this.#styles)
+ this.dispatchEvent(new CustomEvent('load', { detail }))
+ }
+ await this.#display(Promise.resolve(section.load())
+ .then(async src => {
+ const data = await section.loadContent?.()
+ return { index, src, data, anchor, onLoad, select }
+ }).catch(e => {
+ console.warn(e)
+ console.warn(new Error(`Failed to load section ${index}`))
+ return {}
+ }))
+ }
+ }
+ async goTo(target) {
+ if (this.#locked) return
+ const resolved = await target
+ if (this.#canGoToIndex(resolved.index)) return this.#goTo(resolved)
+ }
+ #scrollPrev(distance) {
+ if (this.#views.size === 0) return true
+ if (this.scrolled) {
+ if (this.#renderedStart > 0) return this.#scrollTo(
+ Math.max(0, this.#renderedStart - (distance ?? this.size)), null, true)
+ return !this.atStart
+ }
+ if (this.atStart) return
+ const page = this.#renderedPage - 1
+ // Out of range — skip animation, go straight to previous section
+ if (page < 0) return true
+ return this.#scrollToPage(page, 'page', true)
+ }
+ #scrollNext(distance) {
+ if (this.#views.size === 0) return true
+ if (this.scrolled) {
+ if (this.#renderedViewSize - this.#renderedEnd > 2) return this.#scrollTo(
+ Math.min(this.#renderedViewSize, distance ? this.#renderedStart + distance : this.#renderedEnd), null, true)
+ return !this.atEnd
+ }
+ if (this.atEnd) return
+ const page = this.#renderedPage + 1
+ const pages = this.#renderedPages
+ // Out of range — skip animation, go straight to next section
+ if (page >= pages) return true
+ return this.#scrollToPage(page, 'page', true)
+ }
+ get atStart() {
+ const sorted = this.#sortedViews
+ const firstIndex = sorted[0]?.[0] ?? this.#primaryIndex
+ if (this.scrolled) return this.#adjacentIndex(-1, firstIndex) == null && this.#renderedStart <= 0
+ return this.#adjacentIndex(-1, firstIndex) == null && this.#renderedPage <= 0
+ }
+ get atEnd() {
+ const sorted = this.#sortedViews
+ const lastIndex = sorted[sorted.length - 1]?.[0] ?? this.#primaryIndex
+ if (this.scrolled) return this.#adjacentIndex(1, lastIndex) == null && this.#renderedViewSize - this.#renderedEnd <= 2
+ return this.#adjacentIndex(1, lastIndex) == null && this.#renderedPage >= this.#renderedPages - 1
+ }
+ #adjacentIndex(dir, fromIndex) {
+ if (fromIndex === undefined) fromIndex = this.#primaryIndex
+ for (let index = fromIndex + dir; this.#canGoToIndex(index); index += dir)
+ if (this.sections[index]?.linear !== 'no') return index
+ }
+ async #turnPage(dir, distance) {
+ if (this.#locked) return
+ this.#locked = true
+ const prev = dir === -1
+ const shouldGo = await (prev ? this.#scrollPrev(distance) : this.#scrollNext(distance))
+ if (shouldGo) {
+ // Wait for any in-progress background pre-loading to complete —
+ // it may already be loading the section we need, so awaiting
+ // it lets #goTo reuse the view instead of loading from scratch
+ if (this.#fillPromise) await this.#fillPromise
+ const sorted = this.#sortedViews
+ const edgeIndex = prev
+ ? sorted[0]?.[0] ?? this.#primaryIndex
+ : sorted[sorted.length - 1]?.[0] ?? this.#primaryIndex
+ await this.#goTo({
+ index: this.#adjacentIndex(dir, edgeIndex),
+ anchor: prev ? () => 1 : () => 0,
+ })
+ }
+ if (shouldGo || !this.hasAttribute('animated')) await wait(100)
+ this.#locked = false
+ }
+ async prev(distance) {
+ return await this.#turnPage(-1, distance)
+ }
+ async next(distance) {
+ return await this.#turnPage(1, distance)
+ }
+ async pan(dx, dy) {
+ if (this.#locked) return
+ this.#locked = true
+ this.scrollBy(dx, dy)
+ this.#locked = false
+ }
+ prevSection() {
+ return this.goTo({ index: this.#adjacentIndex(-1) })
+ }
+ nextSection() {
+ return this.goTo({ index: this.#adjacentIndex(1) })
+ }
+ firstSection() {
+ const index = this.sections.findIndex(section => section.linear !== 'no')
+ return this.goTo({ index })
+ }
+ lastSection() {
+ const index = this.sections.findLastIndex(section => section.linear !== 'no')
+ return this.goTo({ index })
+ }
+ getContents() {
+ const contents = []
+ for (const [index, view] of this.#sortedViews) {
+ if (view.document) contents.push({
+ index,
+ overlayer: view.overlayer,
+ doc: view.document,
+ })
+ }
+ return contents
+ }
+ setStyles(styles) {
+ this.#styles = styles
+ for (const [, view] of this.#views) {
+ const $$styles = this.#styleMap.get(view.document)
+ if (!$$styles) continue
+ const [$beforeStyle, $style] = $$styles
+ if (Array.isArray(styles)) {
+ const [beforeStyle, style] = styles
+ $beforeStyle.textContent = beforeStyle
+ $style.textContent = style
+ } else $style.textContent = styles
+
+ // needed because the resize observer doesn't work in Firefox
+ view.document?.fonts?.ready?.then(() => view.expand())
+ }
+
+ // NOTE: needs `requestAnimationFrame` in Chromium
+ const primaryView = this.#primaryView
+ if (primaryView) {
+ requestAnimationFrame(() => this.#replaceBackground())
+ }
+ }
+ focusView() {
+ this.#primaryView?.document?.defaultView?.focus()
+ }
+ showLoupe(winX, winY, { isVertical, color, gap, margin, radius, magnification }) {
+ this.#primaryView?.showLoupe(winX, winY, { isVertical, color, gap, margin, radius, magnification })
+ }
+ hideLoupe() {
+ this.#primaryView?.hideLoupe()
+ }
+ destroyLoupe() {
+ this.#primaryView?.destroyLoupe()
+ }
+ destroy() {
+ const transition = (this.#vtDrag ?? this.#vtFinishing)?.transition
+ ?? this.#vtProgrammatic?.transition
+ this.#vtDrag = null
+ this.#vtFinishing = null
+ this.#vtProgrammatic = null
+ this.#slideTurnId++
+ if (transition || this.#vtNamedHost) {
+ transition?.ready?.catch(() => {})
+ transition?.updateCallbackDone?.catch(() => {})
+ try { transition?.skipTransition() } catch { /* already done */ }
+ this.#vtCleanup()
+ this.#isAnimating = false
+ }
+ this.#observer.unobserve(this)
+ this.#destroyAllViews()
+ this.#mediaQuery.removeEventListener('change', this.#mediaQueryListener)
+ }
+}
+
+customElements.define('foliate-paginator', Paginator)
diff --git a/frontend/src/lib/vendor/foliate-js/pdf.js b/frontend/src/lib/vendor/foliate-js/pdf.js
new file mode 100644
index 0000000..09e2dee
--- /dev/null
+++ b/frontend/src/lib/vendor/foliate-js/pdf.js
@@ -0,0 +1,11 @@
+// NOT upstream foliate-js. See README.chitai.md.
+//
+// Chitai renders PDFs with the pdf.js viewer vendored at static/pdfjs/, so
+// foliate's PDF backend is not vendored. view.js still references this module
+// from makeBook via a static-string dynamic import, which Rollup resolves at
+// build time regardless of whether it executes — so the file has to exist.
+//
+// Throwing at module scope surfaces a legible message in the reader's error
+// card if a PDF is ever routed to the EPUB reader by mistake, rather than a
+// TypeError from `globalThis.pdfjsLib` being undefined.
+throw new Error('foliate-js PDF rendering is not enabled in Chitai');
diff --git a/frontend/src/lib/vendor/foliate-js/progress.js b/frontend/src/lib/vendor/foliate-js/progress.js
new file mode 100644
index 0000000..ab0edc1
--- /dev/null
+++ b/frontend/src/lib/vendor/foliate-js/progress.js
@@ -0,0 +1,224 @@
+// assign a unique ID for each TOC item
+const assignIDs = toc => {
+ let id = 0
+ const assignID = item => {
+ item.id = id++
+ if (item.subitems) for (const subitem of item.subitems) assignID(subitem)
+ }
+ for (const item of toc) assignID(item)
+ return toc
+}
+
+const flatten = items => items
+ .map(item => item.subitems?.length
+ ? [item, flatten(item.subitems)].flat()
+ : item)
+ .flat()
+
+export class TOCProgress {
+ async init({ toc, ids, splitHref, getFragment }) {
+ assignIDs(toc)
+ const items = flatten(toc)
+ const grouped = new Map()
+ for (const [i, item] of items.entries()) {
+ const [id, fragment] = await splitHref(item?.href) ?? []
+ const value = { fragment, item }
+ if (grouped.has(id)) grouped.get(id).items.push(value)
+ else grouped.set(id, { prev: items[i - 1], items: [value] })
+ }
+ const map = new Map()
+ for (const [i, id] of ids.entries()) {
+ if (grouped.has(id)) map.set(id, grouped.get(id))
+ else map.set(id, map.get(ids[i - 1]))
+ }
+ this.ids = ids
+ this.map = map
+ this.getFragment = getFragment
+ }
+ getProgress(index, range) {
+ if (!this.ids) return
+ const id = this.ids[index]
+ const obj = this.map.get(id)
+ if (!obj) return null
+ const { prev, items } = obj
+ if (!items) return prev
+ if (!range || items.length === 1 && !items[0].fragment) return items[0].item
+
+ const doc = range.startContainer.getRootNode()
+ for (const [i, { fragment }] of items.entries()) {
+ const el = this.getFragment(doc, fragment)
+ if (!el) continue
+ if (range.comparePoint(el, 0) > 0)
+ return (items[i - 1]?.item ?? prev)
+ }
+ return items[items.length - 1].item
+ }
+}
+
+export class PageProgress {
+ #book
+ #cache = new Map()
+ #resolveNavigation
+
+ constructor(book, resolveNavigation) {
+ this.#book = book
+ this.#resolveNavigation = resolveNavigation
+ }
+
+ async #getCache(index) {
+ let cached = this.#cache.get(index)
+ if (cached) return cached
+
+ const section = this.#book.sections[index]
+ if (!section?.createDocument) return null
+
+ const doc = await section.createDocument()
+ const root = doc.body ?? doc.documentElement
+ const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT)
+ const nodes = []
+ const offsets = []
+ let total = 0
+ for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+ const len = node.nodeValue?.length ?? 0
+ nodes.push(node)
+ offsets.push(total)
+ total += len
+ }
+
+ cached = { doc, nodes, offsets, total }
+ this.#cache.set(index, cached)
+ return cached
+ }
+
+ async getProgress(cfi) {
+ try {
+ const nav = this.#resolveNavigation(cfi)
+ if (!nav) return null
+
+ const { index, anchor } = nav
+ if (index == null || !anchor) return null
+
+ const cached = await this.#getCache(index)
+ if (!cached) return null
+
+ const { doc, nodes, offsets, total } = cached
+ const frag = anchor(doc)
+ if (!frag) return null
+
+ const isRange = frag instanceof Range
+ const range = isRange ? frag : doc.createRange()
+ if (!isRange) range.selectNodeContents(frag)
+
+ const offset = this.#findOffset(range, nodes, offsets, total)
+ return {
+ fraction: total > 0 ? offset / total : 0,
+ index,
+ }
+ } catch (e) {
+ console.error(e)
+ return null
+ }
+ }
+
+ #findOffset(range, nodes, offsets, total) {
+ if (!nodes.length) return 0
+ const container = range.startContainer
+ // fast path: startContainer is a text node in the index
+ if (container.nodeType === Node.TEXT_NODE) {
+ const i = this.#bsearchNode(container, nodes)
+ if (i >= 0) return offsets[i] + range.startOffset
+ }
+ // element container: collapse to start and binary search
+ const collapsed = range.cloneRange()
+ collapsed.collapse(true)
+ const i = this.#bsearchCollapsed(collapsed, nodes)
+ return i >= 0 ? offsets[i] : total
+ }
+
+ // binary search for an exact text node by document position
+ #bsearchNode(target, nodes) {
+ let low = 0, high = nodes.length - 1
+ while (low <= high) {
+ const mid = (low + high) >> 1
+ const node = nodes[mid]
+ if (node === target) return mid
+ const pos = node.compareDocumentPosition(target)
+ if (pos & Node.DOCUMENT_POSITION_FOLLOWING) low = mid + 1
+ else high = mid - 1
+ }
+ return -1
+ }
+
+ // binary search for the first text node at or after a collapsed range point
+ // collapsed.comparePoint returns: -1 = node is before, 1 = node is at/after
+ #bsearchCollapsed(collapsed, nodes) {
+ let low = 0, high = nodes.length - 1, result = -1
+ while (low <= high) {
+ const mid = (low + high) >> 1
+ if (collapsed.comparePoint(nodes[mid], 0) > 0) {
+ result = mid
+ high = mid - 1
+ } else {
+ low = mid + 1
+ }
+ }
+ return result
+ }
+}
+
+export class SectionProgress {
+ constructor(sections, sizePerLoc, sizePerTimeUnit) {
+ this.sizes = sections.map(s => s.linear != 'no' && s.size > 0 ? s.size : 0)
+ this.sizePerLoc = sizePerLoc
+ this.sizePerTimeUnit = sizePerTimeUnit
+ this.sizeTotal = this.sizes.reduce((a, b) => a + b, 0)
+ this.sectionFractions = this.#getSectionFractions()
+ }
+ #getSectionFractions() {
+ const { sizeTotal } = this
+ const results = [0]
+ let sum = 0
+ for (const size of this.sizes) results.push((sum += size) / sizeTotal)
+ return results
+ }
+ // get progress given index of and fractions within a section
+ getProgress(index, fractionInSection, pageFraction = 0) {
+ const { sizes, sizePerLoc, sizePerTimeUnit, sizeTotal } = this
+ const sizeInSection = sizes[index] ?? 0
+ const sizeBefore = sizes.slice(0, index).reduce((a, b) => a + b, 0)
+ const size = sizeBefore + fractionInSection * sizeInSection
+ const nextSize = size + pageFraction * sizeInSection
+ const remainingTotal = sizeTotal - size
+ const remainingSection = (1 - fractionInSection) * sizeInSection
+ return {
+ fraction: nextSize / sizeTotal,
+ section: {
+ current: index,
+ total: sizes.length,
+ },
+ location: {
+ current: Math.floor(size / sizePerLoc),
+ next: Math.floor(nextSize / sizePerLoc),
+ total: Math.ceil(sizeTotal / sizePerLoc),
+ },
+ time: {
+ section: remainingSection / sizePerTimeUnit,
+ total: remainingTotal / sizePerTimeUnit,
+ },
+ }
+ }
+ // the inverse of `getProgress`
+ // get index of and fraction in section based on total fraction
+ getSection(fraction) {
+ if (fraction <= 0) return [0, 0]
+ if (fraction >= 1) return [this.sizes.length - 1, 1]
+ fraction = fraction + Number.EPSILON
+ const { sizeTotal } = this
+ let index = this.sectionFractions.findIndex(x => x > fraction) - 1
+ if (index < 0) return [0, 0]
+ while (!this.sizes[index]) index++
+ const fractionInSection = (fraction - this.sectionFractions[index])
+ / (this.sizes[index] / sizeTotal)
+ return [index, fractionInSection]
+ }
+}
diff --git a/frontend/src/lib/vendor/foliate-js/search.js b/frontend/src/lib/vendor/foliate-js/search.js
new file mode 100644
index 0000000..affc9bc
--- /dev/null
+++ b/frontend/src/lib/vendor/foliate-js/search.js
@@ -0,0 +1,317 @@
+// length for context in excerpts
+const CONTEXT_LENGTH = 50
+
+const normalizeWhitespace = str => str.replace(/\s+/g, ' ')
+
+// Gather context preceding the match by walking back across text nodes until we
+// have enough for the excerpt. A match can sit in its own text node (e.g. a word
+// wrapped in //), leaving no context within the start node itself.
+const collectBefore = (strs, index, offset) => {
+ let str = strs[index].slice(0, offset)
+ for (let i = index - 1; i >= 0 && normalizeWhitespace(str).trim().length < CONTEXT_LENGTH; i--)
+ str = strs[i] + str
+ return str
+}
+
+const collectAfter = (strs, index, offset) => {
+ let str = strs[index].slice(offset)
+ for (let i = index + 1; i < strs.length && normalizeWhitespace(str).trim().length < CONTEXT_LENGTH; i++)
+ str += strs[i]
+ return str
+}
+
+const makeExcerpt = (strs, { startIndex, startOffset, endIndex, endOffset }) => {
+ const start = strs[startIndex]
+ const end = strs[endIndex]
+ const match = startIndex === endIndex
+ ? start.slice(startOffset, endOffset)
+ : start.slice(startOffset)
+ + strs.slice(startIndex + 1, endIndex).join('')
+ + end.slice(0, endOffset)
+ const trimmedStart = normalizeWhitespace(collectBefore(strs, startIndex, startOffset)).trimStart()
+ const trimmedEnd = normalizeWhitespace(collectAfter(strs, endIndex, endOffset)).trimEnd()
+ const ellipsisPre = trimmedStart.length < CONTEXT_LENGTH ? '' : '…'
+ const ellipsisPost = trimmedEnd.length < CONTEXT_LENGTH ? '' : '…'
+ const pre = `${ellipsisPre}${trimmedStart.slice(-CONTEXT_LENGTH)}`
+ const post = `${trimmedEnd.slice(0, CONTEXT_LENGTH)}${ellipsisPost}`
+ return { pre, match, post }
+}
+
+// Cumulative character offsets of the joined `strs`, so a flat offset into
+// `strs.join('')` can be mapped back to a (node index, in-node offset) pair.
+const buildCum = strs => {
+ const cum = [0]
+ for (let i = 0; i < strs.length; i++) cum.push(cum[i] + strs[i].length)
+ return cum
+}
+
+// Largest node i with cum[i] <= offset; clamps the end-of-text offset to the
+// last node's end. Works for both range start and (exclusive) end positions.
+const nodeAt = (cum, offset) => {
+ let lo = 0, hi = cum.length - 2
+ if (hi < 0) return { index: 0, offset: 0 }
+ while (lo < hi) {
+ const mid = (lo + hi + 1) >> 1
+ if (cum[mid] <= offset) lo = mid
+ else hi = mid - 1
+ }
+ return { index: lo, offset: offset - cum[lo] }
+}
+
+const rangeFromFlat = (cum, start, end) => {
+ const s = nodeAt(cum, start)
+ const e = nodeAt(cum, end)
+ return { startIndex: s.index, startOffset: s.offset, endIndex: e.index, endOffset: e.offset }
+}
+
+const simpleSearch = function* (strs, query, options = {}) {
+ const { locales = 'en', sensitivity } = options
+ const matchCase = sensitivity === 'variant'
+ const haystack = strs.join('')
+ const lowerHaystack = matchCase ? haystack : haystack.toLocaleLowerCase(locales)
+ const needle = matchCase ? query : query.toLocaleLowerCase(locales)
+ const needleLength = needle.length
+ let index = -1
+ let strIndex = -1
+ let sum = 0
+ do {
+ index = lowerHaystack.indexOf(needle, index + 1)
+ if (index > -1) {
+ while (sum <= index) sum += strs[++strIndex].length
+ const startIndex = strIndex
+ const startOffset = index - (sum - strs[strIndex].length)
+ const end = index + needleLength
+ while (sum <= end) sum += strs[++strIndex].length
+ const endIndex = strIndex
+ const endOffset = end - (sum - strs[strIndex].length)
+ const range = { startIndex, startOffset, endIndex, endOffset }
+ yield { range, excerpt: makeExcerpt(strs, range) }
+ }
+ } while (index > -1)
+}
+
+const segmenterSearch = function* (strs, query, options = {}) {
+ const { locales = 'en', granularity = 'word', sensitivity = 'base' } = options
+ let segmenter, collator
+ try {
+ segmenter = new Intl.Segmenter(locales, { usage: 'search', granularity })
+ collator = new Intl.Collator(locales, { sensitivity })
+ } catch (e) {
+ console.warn(e)
+ segmenter = new Intl.Segmenter('en', { usage: 'search', granularity })
+ collator = new Intl.Collator('en', { sensitivity })
+ }
+ const queryLength = Array.from(segmenter.segment(query)).length
+
+ const substrArr = []
+ let strIndex = 0
+ let segments = segmenter.segment(strs[strIndex])[Symbol.iterator]()
+ main: while (strIndex < strs.length) {
+ while (substrArr.length < queryLength) {
+ const { done, value } = segments.next()
+ if (done) {
+ // the current string is exhausted
+ // move on to the next string
+ strIndex++
+ if (strIndex < strs.length) {
+ segments = segmenter.segment(strs[strIndex])[Symbol.iterator]()
+ continue
+ } else break main
+ }
+ const { index, segment } = value
+ // ignore formatting characters
+ if (!/[^\p{Format}]/u.test(segment)) continue
+ // normalize whitespace
+ if (/\s/u.test(segment)) {
+ if (!/\s/u.test(substrArr[substrArr.length - 1]?.segment))
+ substrArr.push({ strIndex, index, segment: ' ' })
+ continue
+ }
+ value.strIndex = strIndex
+ substrArr.push(value)
+ }
+ const substr = substrArr.map(x => x.segment).join('')
+ if (collator.compare(query, substr) === 0) {
+ const endIndex = strIndex
+ const lastSeg = substrArr[substrArr.length - 1]
+ const endOffset = lastSeg.index + lastSeg.segment.length
+ const startIndex = substrArr[0].strIndex
+ const startOffset = substrArr[0].index
+ const range = { startIndex, startOffset, endIndex, endOffset }
+ yield { range, excerpt: makeExcerpt(strs, range) }
+ }
+ substrArr.shift()
+ }
+}
+
+// Calibre-parity regex mode (#4560). Runs a JS RegExp over the joined text and
+// maps each match back to a node range. Note: RegExp.exec is synchronous, so a
+// catastrophic pattern can still stall this pass — true interruption (a Web
+// Worker) is left to a follow-up; here we only cap match count and reject
+// invalid patterns. The caller surfaces INVALID_REGEX as a calm inline error.
+const MAX_REGEX_MATCHES = 10000
+const regexSearch = function* (strs, query, options = {}) {
+ const { matchCase } = options
+ const flags = matchCase ? 'g' : 'gi'
+ let re
+ try {
+ re = new RegExp(query, flags + 'u')
+ } catch {
+ // Some patterns are valid only without the unicode flag; fall back.
+ try {
+ re = new RegExp(query, flags)
+ } catch (e) {
+ const err = new Error(`Invalid regular expression: ${e.message}`)
+ err.code = 'INVALID_REGEX'
+ throw err
+ }
+ }
+ const haystack = strs.join('')
+ const cum = buildCum(strs)
+ let count = 0
+ let m
+ while ((m = re.exec(haystack)) !== null) {
+ if (m[0].length === 0) {
+ // zero-width match: advance to avoid an infinite loop
+ re.lastIndex = m.index + 1
+ continue
+ }
+ const range = rangeFromFlat(cum, m.index, m.index + m[0].length)
+ yield { range, excerpt: makeExcerpt(strs, range) }
+ if (++count >= MAX_REGEX_MATCHES) break
+ }
+}
+
+// Segmented excerpt for nearby-words: emphasizes only the matched words inside
+// the cluster window, leaving the gap text un-emphasized. `pre`/`match`/`post`
+// stay populated for consumers that don't render segments.
+const makeNearbyExcerpt = (haystack, matched) => {
+ const clusterStart = matched[0].start
+ const clusterEnd = matched[matched.length - 1].end
+ const trimmedStart = normalizeWhitespace(haystack.slice(0, clusterStart)).trimStart()
+ const trimmedEnd = normalizeWhitespace(haystack.slice(clusterEnd)).trimEnd()
+ const ellipsisPre = trimmedStart.length < CONTEXT_LENGTH ? '' : '…'
+ const ellipsisPost = trimmedEnd.length < CONTEXT_LENGTH ? '' : '…'
+ const pre = `${ellipsisPre}${trimmedStart.slice(-CONTEXT_LENGTH)}`
+ const post = `${trimmedEnd.slice(0, CONTEXT_LENGTH)}${ellipsisPost}`
+ const segments = []
+ let cursor = clusterStart
+ for (const o of matched) {
+ if (o.start > cursor) {
+ const gap = normalizeWhitespace(haystack.slice(cursor, o.start))
+ if (gap) segments.push({ text: gap, emphasized: false })
+ }
+ segments.push({ text: normalizeWhitespace(haystack.slice(o.start, o.end)), emphasized: true })
+ cursor = o.end
+ }
+ const match = normalizeWhitespace(haystack.slice(clusterStart, clusterEnd))
+ return { pre, match, post, segments }
+}
+
+// Calibre-parity nearby-words mode (#4560): matches places where all of the
+// query's distinct whole words occur within `nearbyWords` words of each other.
+// Distance is measured in words (not characters) and comes from the option, not
+// from the query string, so trailing numbers stay literal search words.
+const nearbyWordsSearch = function* (strs, query, options = {}) {
+ const { locales = 'en', sensitivity = 'base', nearbyWords = 10 } = options
+ const queryWords = []
+ for (const w of query.split(/\s+/).filter(Boolean)) if (!queryWords.includes(w)) queryWords.push(w)
+ if (queryWords.length < 2) {
+ const err = new Error('Nearby words search needs at least two words')
+ err.code = 'NEARBY_NEEDS_TWO_WORDS'
+ throw err
+ }
+ let segmenter, collator
+ try {
+ segmenter = new Intl.Segmenter(locales, { usage: 'search', granularity: 'word' })
+ collator = new Intl.Collator(locales, { sensitivity })
+ } catch (e) {
+ console.warn(e)
+ segmenter = new Intl.Segmenter('en', { usage: 'search', granularity: 'word' })
+ collator = new Intl.Collator('en', { sensitivity })
+ }
+ const haystack = strs.join('')
+ const cum = buildCum(strs)
+ const K = queryWords.length
+
+ // Word occurrences of any query word, tagged with a global word index.
+ const occ = []
+ let wordIndex = -1
+ for (const seg of segmenter.segment(haystack)) {
+ if (!seg.isWordLike) continue
+ wordIndex++
+ for (let q = 0; q < K; q++) {
+ if (collator.compare(queryWords[q], seg.segment) === 0) {
+ occ.push({ wordIndex, qIdx: q, start: seg.index, end: seg.index + seg.segment.length })
+ break
+ }
+ }
+ }
+
+ // Smallest window covering all K distinct query words, two-pointer scan.
+ const have = new Array(K).fill(0)
+ let distinct = 0
+ let lo = 0
+ const windows = []
+ for (let hi = 0; hi < occ.length; hi++) {
+ if (have[occ[hi].qIdx]++ === 0) distinct++
+ let minimal = null
+ while (distinct === K) {
+ minimal = { lo, hi }
+ if (--have[occ[lo].qIdx] === 0) distinct--
+ lo++
+ }
+ if (minimal && occ[minimal.hi].wordIndex - occ[minimal.lo].wordIndex <= nearbyWords)
+ windows.push(minimal)
+ }
+
+ // One cluster per window; suppress windows overlapping an already-emitted one.
+ let lastHi = -1
+ for (const w of windows) {
+ if (w.lo <= lastHi) continue
+ lastHi = w.hi
+ const matched = occ.slice(w.lo, w.hi + 1)
+ const excerpt = makeNearbyExcerpt(haystack, matched)
+ const range = rangeFromFlat(cum, matched[0].start, matched[matched.length - 1].end)
+ const subRanges = matched.map(o => rangeFromFlat(cum, o.start, o.end))
+ yield { range, excerpt, subRanges }
+ }
+}
+
+export const search = (strs, query, options) => {
+ const { mode } = options
+ if (mode === 'regex') return regexSearch(strs, query, options)
+ if (mode === 'nearby-words') return nearbyWordsSearch(strs, query, options)
+ const { granularity = 'grapheme', sensitivity = 'base' } = options
+ if (!Intl?.Segmenter || granularity === 'grapheme'
+ && (sensitivity === 'variant' || sensitivity === 'accent'))
+ return simpleSearch(strs, query, options)
+ return segmenterSearch(strs, query, options)
+}
+
+export const searchMatcher = (textWalker, opts) => {
+ const { defaultLocale, matchCase, matchDiacritics, matchWholeWords, mode, nearbyWords, acceptNode } = opts
+ const effectiveMode = mode ?? (matchWholeWords ? 'whole-words' : 'contains')
+ return function* (doc, query) {
+ const iter = textWalker(doc, function* (strs, makeRange) {
+ for (const result of search(strs, query, {
+ mode: effectiveMode,
+ nearbyWords,
+ matchCase,
+ locales: doc.body.lang || doc.documentElement.lang || defaultLocale || 'en',
+ granularity: effectiveMode === 'whole-words' ? 'word' : 'grapheme',
+ sensitivity: matchDiacritics && matchCase ? 'variant'
+ : matchDiacritics && !matchCase ? 'accent'
+ : !matchDiacritics && matchCase ? 'case'
+ : 'base',
+ })) {
+ const { startIndex, startOffset, endIndex, endOffset } = result.range
+ result.range = makeRange(startIndex, startOffset, endIndex, endOffset)
+ if (result.subRanges) result.subRanges = result.subRanges.map(
+ r => makeRange(r.startIndex, r.startOffset, r.endIndex, r.endOffset))
+ yield result
+ }
+ }, acceptNode)
+ for (const result of iter) yield result
+ }
+}
diff --git a/frontend/src/lib/vendor/foliate-js/text-walker.js b/frontend/src/lib/vendor/foliate-js/text-walker.js
new file mode 100644
index 0000000..c1249b7
--- /dev/null
+++ b/frontend/src/lib/vendor/foliate-js/text-walker.js
@@ -0,0 +1,43 @@
+const walkRange = (range, walker) => {
+ const nodes = []
+ for (let node = walker.currentNode; node; node = walker.nextNode()) {
+ const compare = range.comparePoint(node, 0)
+ if (compare === 0) nodes.push(node)
+ else if (compare > 0) break
+ }
+ return nodes
+}
+
+const walkDocument = (_, walker) => {
+ const nodes = []
+ for (let node = walker.nextNode(); node; node = walker.nextNode())
+ nodes.push(node)
+ return nodes
+}
+
+const filter = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
+ | NodeFilter.SHOW_CDATA_SECTION
+
+const acceptNode = node => {
+ if (node.nodeType === 1) {
+ const name = node.tagName.toLowerCase()
+ if (name === 'script' || name === 'style') return NodeFilter.FILTER_REJECT
+ return NodeFilter.FILTER_SKIP
+ }
+ return NodeFilter.FILTER_ACCEPT
+}
+
+export const textWalker = function* (x, func, filterFunc) {
+ const root = x.commonAncestorContainer ?? x.body ?? x
+ const walker = document.createTreeWalker(root, filter, { acceptNode: filterFunc || acceptNode })
+ const walk = x.commonAncestorContainer ? walkRange : walkDocument
+ const nodes = walk(x, walker)
+ const strs = nodes.map(node => node.nodeValue ?? '')
+ const makeRange = (startIndex, startOffset, endIndex, endOffset) => {
+ const range = document.createRange()
+ range.setStart(nodes[startIndex], startOffset)
+ range.setEnd(nodes[endIndex], endOffset)
+ return range
+ }
+ for (const match of func(strs, makeRange)) yield match
+}
diff --git a/frontend/src/lib/vendor/foliate-js/tts.js b/frontend/src/lib/vendor/foliate-js/tts.js
new file mode 100644
index 0000000..05c9b5d
--- /dev/null
+++ b/frontend/src/lib/vendor/foliate-js/tts.js
@@ -0,0 +1,502 @@
+const NS = {
+ XML: 'http://www.w3.org/XML/1998/namespace',
+ SSML: 'http://www.w3.org/2001/10/synthesis',
+}
+
+const blockTags = new Set([
+ 'article', 'aside', 'audio', 'blockquote', 'caption',
+ 'details', 'dialog', 'div', 'dl', 'dt', 'dd',
+ 'figure', 'footer', 'form', 'figcaption',
+ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'li',
+ 'main', 'math', 'nav', 'ol', 'p', 'pre', 'section', 'tr',
+])
+
+const getLang = el => {
+ const x = el.lang || el?.getAttributeNS?.(NS.XML, 'lang')
+ return x ? x : el.parentElement ? getLang(el.parentElement) : null
+}
+
+const getAlphabet = el => {
+ const x = el?.getAttributeNS?.(NS.XML, 'lang')
+ return x ? x : el.parentElement ? getAlphabet(el.parentElement) : null
+}
+
+const getSegmenter = (lang, granularity = 'word') => {
+ const segmenter = new Intl.Segmenter(lang || undefined, { granularity })
+ const granularityIsWord = granularity === 'word'
+ return function* (strs, makeRange) {
+ const str = strs.join('').replace(/\r\n/g, ' ').replace(/\r/g, ' ').replace(/\n/g, ' ')
+ let name = 0
+ let strIndex = -1
+ let sum = 0
+ const rawSegments = Array.from(segmenter.segment(str))
+ const mergedSegments = []
+ for (let i = 0, j = 0; i < rawSegments.length; i++) {
+ const current = rawSegments[i]
+ const segment = ' ' + current.segment
+ const endsWithAbbr = /\s([A-Z]{1,2}[a-z]{0,5}|[a-z]{1,3})\.\s*$/.test(segment)
+ if (!endsWithAbbr || i >= (rawSegments.length-1)) {
+ const mergedSegment = {
+ index: rawSegments[j].index,
+ segment: '',
+ isWordLike: (i == j) ? current.isWordLike : true,
+ }
+ while (j <= i) {
+ mergedSegment.segment += rawSegments[j++].segment
+ }
+ mergedSegments.push(mergedSegment)
+ }
+ }
+
+ for (const { index, segment, isWordLike } of mergedSegments) {
+ if (granularityIsWord && !isWordLike) continue
+ while (sum <= index) sum += strs[++strIndex].length
+ const startIndex = strIndex
+ const startOffset = index - (sum - strs[strIndex].length)
+ const end = index + segment.length - 1
+ if (end < str.length) while (sum <= end) sum += strs[++strIndex].length
+ const endIndex = strIndex
+ const endOffset = end - (sum - strs[strIndex].length) + 1
+ yield [(name++).toString(),
+ makeRange(startIndex, startOffset, endIndex, endOffset)]
+ }
+ }
+}
+
+const fragmentToSSML = (fragment, nodeFilter, inherited) => {
+ const ssml = document.implementation.createDocument(NS.SSML, 'speak')
+ const { lang } = inherited
+ if (lang) ssml.documentElement.setAttributeNS(NS.XML, 'lang', lang)
+
+ const convert = (node, parent, inheritedAlphabet) => {
+ if (!node) return
+ // Text nodes go through the filter too: the text walker that produces
+ // the marks already honours it, and content that is skipped there (a
+ // bare ruby base inside , say) must not reach the speech either,
+ // or the two disagree about what is being read.
+ if (node.nodeType === 3 || node.nodeType === 4) {
+ if (nodeFilter && nodeFilter(node) === NodeFilter.FILTER_REJECT) return
+ return node.nodeType === 3
+ ? ssml.createTextNode(node.textContent)
+ : ssml.createCDATASection(node.textContent)
+ }
+ if (node.nodeType !== 1 && node.nodeType !== 11) return
+ if (nodeFilter && nodeFilter(node) === NodeFilter.FILTER_REJECT) return
+
+ let el
+ const nodeName = node.nodeName.toLowerCase()
+ if (nodeName === 'foliate-mark') {
+ el = ssml.createElementNS(NS.SSML, 'mark')
+ el.setAttribute('name', node.dataset.name)
+ }
+ else if (nodeName === 'br')
+ el = ssml.createElementNS(NS.SSML, 'break')
+ else if (nodeName === 'em' || nodeName === 'strong')
+ el = ssml.createElementNS(NS.SSML, 'emphasis')
+
+ const lang = node.lang || node.getAttributeNS?.(NS.XML, 'lang')
+ if (lang) {
+ if (!el) el = ssml.createElementNS(NS.SSML, 'lang')
+ el.setAttributeNS(NS.XML, 'lang', lang)
+ }
+
+ const alphabet = node.getAttributeNS?.(NS.SSML, 'alphabet') || inheritedAlphabet
+ if (!el) {
+ const ph = node.getAttributeNS?.(NS.SSML, 'ph')
+ if (ph) {
+ el = ssml.createElementNS(NS.SSML, 'phoneme')
+ if (alphabet) el.setAttribute('alphabet', alphabet)
+ el.setAttribute('ph', ph)
+ }
+ }
+
+ if (!el) el = parent
+
+ let child = node.firstChild
+ while (child) {
+ const childEl = convert(child, el, alphabet)
+ if (childEl && el !== childEl) el.append(childEl)
+ child = child.nextSibling
+ }
+ return el
+ }
+ convert(fragment, ssml.documentElement, inherited.alphabet)
+ return ssml
+}
+
+const getFragmentWithMarks = (range, textWalker, nodeFilter, granularity) => {
+ const lang = getLang(range.commonAncestorContainer)
+ const alphabet = getAlphabet(range.commonAncestorContainer)
+
+ const segmenter = getSegmenter(lang, granularity)
+ const fragment = range.cloneContents()
+
+ // we need ranges on both the original document (for highlighting)
+ // and the document fragment (for inserting marks)
+ // so unfortunately need to do it twice, as you can't copy the ranges
+ const entries = [...textWalker(range, segmenter, nodeFilter)]
+ const fragmentEntries = [...textWalker(fragment, segmenter, nodeFilter)]
+
+ for (const [name, range] of fragmentEntries) {
+ const mark = document.createElement('foliate-mark')
+ mark.dataset.name = name
+ range.insertNode(mark)
+ }
+ const ssml = fragmentToSSML(fragment, nodeFilter, { lang, alphabet })
+ return { entries, ssml }
+}
+
+const rangeIsEmpty = range => !range.toString().trim()
+
+// For PDF text layers, split content into sentence-level blocks so TTS
+// reads one sentence at a time instead of the whole page in one block.
+// Text nodes are split at sentence boundaries so that every block range
+// aligns with node edges — this prevents the text walker from including
+// text outside the sentence in word marks.
+function* getPDFSentenceBlocks(doc, textLayer) {
+ const collectNodes = () => {
+ const w = doc.createTreeWalker(textLayer, NodeFilter.SHOW_TEXT)
+ const res = []
+ for (let n = w.nextNode(); n; n = w.nextNode()) res.push(n)
+ return res
+ }
+
+ let nodes = collectNodes()
+ if (!nodes.length) return
+
+ const fullText = nodes.map(n => n.nodeValue).join('')
+ if (!fullText.trim()) return
+
+ // Find sentence boundary positions
+ const lang = getLang(textLayer) || undefined
+ const segmenter = new Intl.Segmenter(lang, { granularity: 'sentence' })
+ const boundaries = new Set()
+ for (const { index } of segmenter.segment(fullText))
+ if (index > 0) boundaries.add(index)
+
+ // Split text nodes at sentence boundaries so ranges align with node edges.
+ // Process in reverse order to preserve earlier character positions.
+ let cum = 0
+ const nodeStarts = nodes.map(n => { const s = cum; cum += n.nodeValue.length; return s })
+
+ for (const pos of [...boundaries].sort((a, b) => b - a)) {
+ for (let i = 0; i < nodes.length; i++) {
+ const start = nodeStarts[i]
+ const end = start + nodes[i].nodeValue.length
+ if (pos > start && pos < end) {
+ nodes[i].splitText(pos - start)
+ break
+ }
+ }
+ }
+
+ // Re-collect nodes after splits and group into sentence blocks
+ nodes = collectNodes()
+ cum = 0
+ let groupStart = 0
+ let blockCount = 0
+
+ for (let i = 0; i < nodes.length; i++) {
+ cum += nodes[i].nodeValue.length
+ const isEnd = i === nodes.length - 1 || boundaries.has(cum)
+ if (isEnd) {
+ const range = doc.createRange()
+ range.setStart(nodes[groupStart], 0)
+ range.setEnd(nodes[i], nodes[i].nodeValue.length)
+ if (!rangeIsEmpty(range)) {
+ blockCount++
+ yield range
+ }
+ groupStart = i + 1
+ }
+ }
+}
+
+function* getBlocks(doc, nodeFilter) {
+ const root = doc.body
+ ?? doc.querySelector('body')
+ ?? doc.documentElement
+
+ // For PDF text layers, yield sentence-level blocks
+ const textLayer = root.querySelector?.('.textLayer')
+ if (textLayer) {
+ yield* getPDFSentenceBlocks(doc, textLayer)
+ return
+ }
+
+ let last
+ let sawBlock = false
+ let sawSkipped = false
+ const walker = doc.createTreeWalker(root, NodeFilter.SHOW_ELEMENT)
+ let node = walker.nextNode()
+ while (node) {
+ const name = node.tagName.toLowerCase()
+ // A rejected block element (e.g. a footnote/endnote aside) must not be
+ // read: skip its whole subtree and end the preceding block before it
+ // so its text doesn't leak into the adjacent block. Inline rejects are
+ // left to the text walker in getFragmentWithMarks().
+ if (blockTags.has(name)
+ && nodeFilter?.(node) === NodeFilter.FILTER_REJECT) {
+ sawSkipped = true
+ if (last) {
+ last.setEndBefore(node)
+ if (!rangeIsEmpty(last)) yield last
+ last = null
+ }
+ const skipped = node
+ do node = walker.nextNode()
+ while (node && (skipped.compareDocumentPosition(node)
+ & Node.DOCUMENT_POSITION_CONTAINED_BY))
+ continue
+ }
+ if (blockTags.has(name)) {
+ if (last) {
+ last.setEndBefore(node)
+ if (!rangeIsEmpty(last)) yield last
+ }
+ last = doc.createRange()
+ last.setStart(node, 0)
+ sawBlock = true
+ }
+ node = walker.nextNode()
+ }
+ if (last) {
+ last.setEndAfter(root.lastChild ?? root)
+ if (!rangeIsEmpty(last)) yield last
+ } else if (!sawBlock && !sawSkipped) {
+ last = doc.createRange()
+ last.setStart(root.firstChild ?? root, 0)
+ last.setEndAfter(root.lastChild ?? root)
+ if (!rangeIsEmpty(last)) yield last
+ }
+}
+
+// Enumerate every TTS segment of the document in order without touching any
+// TTS instance state. blockIndex/markName match what a TTS instance produces
+// for the same granularity, so callers (e.g. a playback timeline) can
+// correlate the enumeration with live marks and use each range with from().
+export function* getSentences(doc, textWalker, nodeFilter, granularity = 'sentence') {
+ let blockIndex = 0
+ for (const range of getBlocks(doc, nodeFilter)) {
+ const lang = getLang(range.commonAncestorContainer)
+ const segmenter = getSegmenter(lang, granularity)
+ for (const [name, segRange] of textWalker(range, segmenter, nodeFilter))
+ yield { blockIndex, markName: name, range: segRange }
+ blockIndex++
+ }
+}
+
+class ListIterator {
+ #arr = []
+ #iter
+ #index = -1
+ #f
+ constructor(iter, f = x => x) {
+ this.#iter = iter
+ this.#f = f
+ }
+ current() {
+ if (this.#arr[this.#index]) return this.#f(this.#arr[this.#index])
+ }
+ first() {
+ const newIndex = 0
+ if (this.#arr[newIndex]) {
+ this.#index = newIndex
+ return this.#f(this.#arr[newIndex])
+ }
+ }
+ prev() {
+ const newIndex = this.#index - 1
+ if (this.#arr[newIndex]) {
+ this.#index = newIndex
+ return this.#f(this.#arr[newIndex])
+ }
+ }
+ next() {
+ const newIndex = this.#index + 1
+ if (this.#arr[newIndex]) {
+ this.#index = newIndex
+ return this.#f(this.#arr[newIndex])
+ }
+ while (true) {
+ const { done, value } = this.#iter.next()
+ if (done) break
+ this.#arr.push(value)
+ if (this.#arr[newIndex]) {
+ this.#index = newIndex
+ return this.#f(this.#arr[newIndex])
+ }
+ }
+ }
+ find(f) {
+ const index = this.#arr.findIndex(x => f(x))
+ if (index > -1) {
+ this.#index = index
+ return this.#f(this.#arr[index])
+ }
+ while (true) {
+ const { done, value } = this.#iter.next()
+ if (done) break
+ this.#arr.push(value)
+ if (f(value)) {
+ this.#index = this.#arr.length - 1
+ return this.#f(value)
+ }
+ }
+ }
+}
+
+export class TTS {
+ #list
+ #ranges
+ #lastMark
+ #serializer = new XMLSerializer()
+ constructor(doc, textWalker, nodeFilter, highlight, granularity) {
+ this.doc = doc
+ this.highlight = highlight
+ this.#list = new ListIterator(getBlocks(doc, nodeFilter), range => {
+ const { entries, ssml } = getFragmentWithMarks(range, textWalker, nodeFilter, granularity)
+ this.#ranges = new Map(entries)
+ return [ssml, range]
+ })
+ }
+ #getMarkElement(doc, mark) {
+ if (!mark) return null
+ return doc.querySelector(`mark[name="${CSS.escape(mark)}"`)
+ }
+ #speak(doc, getNode) {
+ if (!doc) return
+ if (!getNode) return this.#serializer.serializeToString(doc)
+ const ssml = document.implementation.createDocument(NS.SSML, 'speak')
+ ssml.documentElement.replaceWith(ssml.importNode(doc.documentElement, true))
+ let node = getNode(ssml)?.previousSibling
+ while (node) {
+ const next = node.previousSibling ?? node.parentNode?.previousSibling
+ node.parentNode.removeChild(node)
+ node = next
+ }
+ const ssmlStr = this.#serializer.serializeToString(ssml)
+ return ssmlStr
+ }
+ start() {
+ this.#lastMark = null
+ const [doc] = this.#list.first() ?? []
+ if (!doc) return this.next()
+ return this.#speak(doc, ssml => this.#getMarkElement(ssml, this.#lastMark))
+ }
+ resume() {
+ const [doc] = this.#list.current() ?? []
+ if (!doc) return this.next()
+ return this.#speak(doc, ssml => this.#getMarkElement(ssml, this.#lastMark))
+ }
+ prev(paused) {
+ this.#lastMark = null
+ const [doc, range] = this.#list.prev() ?? []
+ if (paused && range) this.highlight(range.cloneRange())
+ return this.#speak(doc)
+ }
+ next(paused) {
+ this.#lastMark = null
+ const [doc, range] = this.#list.next() ?? []
+ if (paused && range) this.highlight(range.cloneRange())
+ return this.#speak(doc)
+ }
+ prevMark(paused) {
+ const marks = Array.from(this.#ranges.keys())
+ if (marks.length === 0) return
+
+ const currentIndex = this.#lastMark ? marks.indexOf(this.#lastMark) : -1
+ if (currentIndex > 0) {
+ const prevMarkName = marks[currentIndex - 1]
+ const range = this.#ranges.get(prevMarkName)
+ if (range) {
+ this.#lastMark = prevMarkName
+ if (paused) this.highlight(range.cloneRange())
+
+ const [doc] = this.#list.current() ?? []
+ return this.#speak(doc, ssml => this.#getMarkElement(ssml, prevMarkName))
+ }
+ } else {
+ const [doc, range] = this.#list.prev() ?? []
+ if (doc && range) {
+ const prevMarks = Array.from(this.#ranges.keys())
+ if (prevMarks.length > 0) {
+ const lastMarkName = prevMarks[prevMarks.length - 1]
+ const lastMarkRange = this.#ranges.get(lastMarkName)
+ if (lastMarkRange) {
+ this.#lastMark = lastMarkName
+ if (paused) this.highlight(lastMarkRange.cloneRange())
+ return this.#speak(doc, ssml => this.#getMarkElement(ssml, lastMarkName))
+ }
+ } else {
+ this.#lastMark = null
+ if (paused) this.highlight(range.cloneRange())
+ return this.#speak(doc)
+ }
+ }
+ }
+ }
+ nextMark(paused) {
+ const marks = Array.from(this.#ranges.keys())
+ if (marks.length === 0) return
+
+ const currentIndex = this.#lastMark ? marks.indexOf(this.#lastMark) : -1
+ if (currentIndex >= 0 && currentIndex < marks.length - 1) {
+ const nextMarkName = marks[currentIndex + 1]
+ const range = this.#ranges.get(nextMarkName)
+ if (range) {
+ this.#lastMark = nextMarkName
+ if (paused) this.highlight(range.cloneRange())
+ const [doc] = this.#list.current() ?? []
+ return this.#speak(doc, ssml => this.#getMarkElement(ssml, nextMarkName))
+ }
+ } else {
+ const [doc, range] = this.#list.next() ?? []
+ if (doc && range) {
+ const nextMarks = Array.from(this.#ranges.keys())
+ if (nextMarks.length > 0) {
+ const firstMarkName = nextMarks[0]
+ const firstMarkRange = this.#ranges.get(firstMarkName)
+ if (firstMarkRange) {
+ this.#lastMark = firstMarkName
+ if (paused) this.highlight(firstMarkRange.cloneRange())
+ return this.#speak(doc, ssml => this.#getMarkElement(ssml, firstMarkName))
+ }
+ } else {
+ this.#lastMark = null
+ if (paused) this.highlight(range.cloneRange())
+ return this.#speak(doc)
+ }
+ }
+ }
+ }
+ from(range) {
+ this.#lastMark = null
+ const [doc] = this.#list.find(range_ =>
+ range.compareBoundaryPoints(Range.END_TO_START, range_) <= 0)
+ // Pick the mark whose sentence contains the selection: the last mark
+ // that begins at or before it. Taking the first mark beginning at or
+ // after the selection skipped to the next sentence whenever the
+ // selected word was not its sentence's first word.
+ let mark
+ for (const [name, range_] of this.#ranges.entries()) {
+ if (range.compareBoundaryPoints(Range.START_TO_START, range_) < 0) break
+ mark = name
+ }
+ return this.#speak(doc, ssml => this.#getMarkElement(ssml, mark))
+ }
+ getLastRange() {
+ if (this.#lastMark) {
+ const range = this.#ranges.get(this.#lastMark)
+ if (range) return range.cloneRange()
+ }
+ }
+ setMark(mark) {
+ const range = this.#ranges.get(mark)
+ if (range) {
+ this.#lastMark = mark
+ this.highlight(range.cloneRange())
+ return range
+ }
+ }
+}
diff --git a/frontend/src/lib/vendor/foliate-js/vendor/fflate.js b/frontend/src/lib/vendor/foliate-js/vendor/fflate.js
new file mode 100644
index 0000000..f275976
--- /dev/null
+++ b/frontend/src/lib/vendor/foliate-js/vendor/fflate.js
@@ -0,0 +1 @@
+var r=Uint8Array,a=Uint16Array,e=Int32Array,n=new r([0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0]),i=new r([0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0]),t=new r([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),f=function(r,n){for(var i=new a(31),t=0;t<31;++t)i[t]=n+=1<
-
-
-