fix: pin foliate-js e16530a — desktop double-click zoom toggle

Bump the linuxhg mirror pin from 1305a52 to e16530a (mirror main is already synced). The fork adds a desktop double-click zoom to the fixed-layout renderer for all fixed-layout content (comics, manga, PDFs, fixed EPUBs): - at fit scale, double-click zooms to 2.5x at the clicked location - zoomed or panned, double-click resets to 100% centered - PDF text-layer spans and annotation links keep native double-click (word selection) in Smart/Text modes; Pan mode zooms anywhere - mirrors the existing touch double-tap; disabled in panel-zoom mode like the other gestures Also closes the gap where node_modules was serving a stale tarball older than the previous 1305a52 pin (missing the toolbar-resize debounce and selection-drag fixes); a fresh install now resolves the full set.
feat(reader): comic treatment for fixed-layout items in comics/manga libraries
2026-09-17 14:37:05 -04:00 · 2026-09-17 14:36:58 -04:00 · 2026-09-17 11:47:25 -04:00 · 2026-09-17 10:55:21 -04:00 · 2026-09-17 10:40:12 -04:00 · 2026-09-17 10:17:34 -04:00
9 changed files with 774 additions and 239 deletions
@@ -15,7 +15,10 @@ RUN --mount=type=cache,target=/root/go/pkg/mod \

 # Copy package files and install npm dependencies (cached unless package.json changes)
 COPY package*.json ./
-RUN --mount=type=cache,target=/root/.npm \
+# npm cache mount renamed from /root/.npm: the old volume held a stale
+# foliate-js tarball (name@version reuse) that --no-cache and builder prune
+# could not evict; a new mount id guarantees a clean fetch.
+RUN --mount=type=cache,target=/root/.npm-cache2 \
  npm install 

 # Copy Go mod files (cached unless go.mod changes)
@@ -102,6 +102,7 @@ func (h *ReaderHandler) ShowReader(c *echo.Context) error {

 	// Determine if panel detection should be enabled
 	enablePanelDetection := shouldEnablePanelDetection(libraryWithType.TypeName, mediaItem.FormatGroup)
+	treatAsComic := ShouldTreatAsComic(libraryWithType.TypeName, mediaItem.FormatGroup)

 	// Get reading progress
 	var progress database.ReadingProgress
@@ -133,6 +134,7 @@ func (h *ReaderHandler) ShowReader(c *echo.Context) error {
 		"progress":               progress,
 		"bookmarks":              bookmarks,
 		"enable_panel_detection": enablePanelDetection,
+		"treat_as_comic":         treatAsComic,
 		"format_group":           mediaItem.FormatGroup,
 		"manga_type":             mediaItem.MangaType,
 		"reading_direction":      mediaItem.ReadingDirection,
@@ -639,6 +641,25 @@ func (h *ReaderHandler) ParseEbook(c *echo.Context) error {
 	})
 }

+// ShouldTreatAsComic reports whether a fixed-layout item that lives in a
+// comics or manga library should get comic reader treatment: bookmarks
+// only — no text-selection highlights, no annotations, no in-book search.
+// Comic archives already behave this way; this flag extends it to fixed-
+// layout PDFs shelved in comic libraries (scanned or official manga PDFs).
+func ShouldTreatAsComic(libraryType string, formatGroup string) bool {
+	comicLibraries := map[string]bool{
+		"manga":  true,
+		"comics": true,
+	}
+
+	fixedFormats := map[string]bool{
+		"fixed_layout":  true,
+		"comic_archive": true,
+	}
+
+	return comicLibraries[libraryType] && fixedFormats[formatGroup]
+}
+
 // shouldEnablePanelDetection determines if panel detection should be enabled
 // based on library type and format group
 func shouldEnablePanelDetection(libraryType string, formatGroup string) bool {
@@ -66,6 +66,13 @@ func registerReaderRoutes(cfg *Config) {
 		if !visible {
 			return renderErrorPage(c, "Access denied", "access_denied")
 		}
+		// Library type decides comic reader treatment: fixed-layout items
+		// (e.g. manga PDFs) shelved in comics/manga libraries are paged
+		// through like comics — bookmarks only, no highlights or search.
+		libraryWithType, err := cfg.Queries.GetLibraryWithType(c.Request().Context(), mediaItem.LibraryID)
+		if err != nil {
+			return renderErrorPage(c, "Failed to get library info", "library_error")
+		}
 		// Convert to template types. Reading state is deliberately NOT
 		// fetched or embedded: the reader pulls position, bookmarks, and
 		// annotations from the APIs at open time so the page can never
@@ -89,6 +96,7 @@ func registerReaderRoutes(cfg *Config) {
 			FileURL:          utils.ResolveMediaURL(mediaItem.LibraryID, pgtype.Text{String: mediaItem.FilePath, Valid: true}),
 			TotalCharacters:  mediaItem.TotalCharacters.Int64,
 			EstimatedPages:   sync.EstimatedPages(mediaItem.TotalCharacters.Int64),
+			TreatAsComic:     handlers.ShouldTreatAsComic(libraryWithType.TypeName, mediaItem.FormatGroup),
 		}
 		// Render template
 		var buf bytes.Buffer
@@ -12,7 +12,7 @@
    "dev": "npm run build:ts:dev && npm run build:css"
  },
  "dependencies": {
-    "@bookhoard/foliate-js": "git+https://github.com/john-okeefe/foliate-js.git#e448d36",
+    "@bookhoard/foliate-js": "git+https://git.linuxhg.com/Bookhoard/foliate-js.git#e16530a",
    "alpinejs": "^3.15.8",
    "chart.js": "^4.5.1",
    "highlight.js": "^11.11.1",
@@ -16,6 +16,7 @@ func readerInitExpr(metadata ReaderMetadata) string {
 		"formatGroup":      metadata.FormatGroup,
 		"readingDirection": metadata.ReadingDirection,
 		"mangaType":        metadata.MangaType,
+		"treatAsComic":     metadata.TreatAsComic,
 	}
 	jsonBytes, _ := json.Marshal(config)
 	return fmt.Sprintf("initReader(%s)", string(jsonBytes))
@@ -23,7 +24,7 @@ func readerInitExpr(metadata ReaderMetadata) string {

 templ Reader(user User, metadata ReaderMetadata) {
 	<!DOCTYPE html>
-	<html lang="en">
+	<html lang="en" class="overscroll-none">
 		<head>
 			<meta charset="UTF-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
@@ -38,7 +39,7 @@ templ Reader(user User, metadata ReaderMetadata) {
 		<body
 			x-data="readerShell"
 			x-init={ readerInitExpr(metadata) }
-			class={ "theme-" + user.Theme + " h-screen overflow-hidden" }
+			class={ "theme-" + user.Theme + " h-screen overflow-hidden overscroll-none" }
 		>
 			<!-- Reading surface: edge-to-edge. Chrome overlays translucently;
 			     drawers and scrim float above everything. -->
@@ -68,9 +69,7 @@ templ Reader(user User, metadata ReaderMetadata) {
 					</svg>
 				</div>
 			</div>
-
 			@ReaderChrome(metadata)
-
 			<!-- Drawer scrim -->
 			<div
 				x-show="tocOpen || settingsOpen || bookmarksOpen || searchOpen"
@@ -79,7 +78,6 @@ templ Reader(user User, metadata ReaderMetadata) {
 				class="drawer-scrim"
 				aria-hidden="true"
 			></div>
-
 			<!-- TOC drawer (left) -->
 			<div
 				id="toc-drawer"
@@ -96,7 +94,6 @@ templ Reader(user User, metadata ReaderMetadata) {
 			>
 				@ReaderTOCDrawer()
 			</div>
-
 			<!-- Settings drawer (right) -->
 			<div
 				id="settings-drawer"
@@ -113,7 +110,6 @@ templ Reader(user User, metadata ReaderMetadata) {
 			>
 				@ReaderSettingsDrawer()
 			</div>
-
 			<!-- Selection popover (highlights) -->
 			<div
 				id="selection-popover"
@@ -139,7 +135,13 @@ templ Reader(user User, metadata ReaderMetadata) {
 							:style="'background-color:' + c"
 							:title="selectionPopover.mode === 'create' ? 'Highlight' : 'Set color'"
 							:aria-label="'Highlight color ' + c"
-							@click="selectionPopover.mode === 'create' ? createHighlight(c) : (selectionPopover.color = c, saveHighlightChanges())"
+							@click="selectionPopover.noteOpen
+							? (selectionPopover.mode === 'create'
+								? (selectionPopover.color = c)
+								: (selectionPopover.color = c, saveHighlightChanges(true)))
+							: (selectionPopover.mode === 'create'
+								? createHighlight(c)
+								: (selectionPopover.color = c, saveHighlightChanges()))"
 						></button>
 					</template>
 					<div class="w-px h-5 reader-sep"></div>
@@ -188,12 +190,11 @@ templ Reader(user User, metadata ReaderMetadata) {
 							type="button"
 							class="flex-1 py-1 text-xs border rounded hover:opacity-80"
 							style="border-color: var(--border);"
-							@click="selectionPopover.noteOpen = false"
+							@click="hideSelectionPopover()"
 						>Cancel</button>
 					</div>
 				</div>
 			</div>
-
 			<!-- Annotations drawer (right): highlights / notes / bookmarks -->
 			<div
 				id="annotations-drawer"
@@ -210,7 +211,6 @@ templ Reader(user User, metadata ReaderMetadata) {
 			>
 				@ReaderAnnotationsDrawer()
 			</div>
-
 			<!-- Search drawer (right, reflowable only) -->
 			<div
 				id="search-drawer"
@@ -227,7 +227,6 @@ templ Reader(user User, metadata ReaderMetadata) {
 			>
 				@ReaderSearchDrawer()
 			</div>
-
 			<!-- Shortcuts & gestures help modal -->
 			<div
 				x-show="helpOpen"
@@ -263,17 +262,14 @@ templ Reader(user User, metadata ReaderMetadata) {
 					<div class="help-row"><span>Settings</span><span class="help-keys"><kbd class="kbd">s</kbd></span></div>
 					<div class="help-row"><span>Add bookmark</span><span class="help-keys"><kbd class="kbd">b</kbd></span></div>
 					<div class="help-row"><span>Close menus / toggle chrome</span><span class="help-keys"><kbd class="kbd">Esc</kbd></span></div>
-
 					<h4 class="reader-help-section" x-show="isFixedLayout">Zoom &amp; pan <span class="help-note">(comics, PDFs)</span></h4>
 					<div class="help-row" x-show="isFixedLayout"><span>Zoom in / out / reset</span><span class="help-keys"><kbd class="kbd">+</kbd><kbd class="kbd">−</kbd><kbd class="kbd">0</kbd> or wheel</span></div>
 					<div class="help-row" x-show="isFixedLayout"><span>Move the page</span><span class="help-keys">drag with the mouse</span></div>
 					<div class="help-row" x-show="isFixedLayout"><span>Recenter <span class="help-note">(keeps zoom)</span></span><span class="help-keys">⊙ button</span></div>
 					<div class="help-row" x-show="isPDF"><span>Select text in a PDF</span><span class="help-keys">Smart mode: drag over text · <kbd class="kbd">Shift</kbd>+drag anywhere · Text mode</span></div>
-
 					<h4 class="reader-help-section">Highlights</h4>
 					<div class="help-row"><span>Create</span><span class="help-keys">select text → pick a color</span></div>
 					<div class="help-row"><span>Edit / delete</span><span class="help-keys">click the highlight</span></div>
-
 					<h4 class="reader-help-section">Touch</h4>
 					<div class="help-row"><span>Page turn</span><span class="help-keys">swipe, or tap outer edges</span></div>
 					<div class="help-row"><span>Toggle chrome</span><span class="help-keys">tap center</span></div>
@@ -295,7 +291,7 @@ templ ReaderChrome(metadata ReaderMetadata) {
 				<h1 class="text-base sm:text-lg font-semibold hidden sm:block sm:truncate">{ metadata.Title }</h1>
 				<div class="flex items-center gap-1">
 					<button @click="addBookmark()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Bookmark this position (b)">🏷️</button>
-					<button x-show="!isFixedLayout || isPDF" @click="toggleSearch()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Search (/)">🔍</button>
+					<button x-show="(!isFixedLayout || isPDF) && !treatAsComic" @click="toggleSearch()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Search (/)">🔍</button>
 					<button @click="toggleBookmarks()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Annotations">📝</button>
 					<button @click="toggleSettings()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Settings (s)">Aa</button>
 					<button @click="toggleHelp()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700 text-sm font-bold" title="Shortcuts & gestures (?)" aria-label="Shortcuts and gestures">?</button>
@@ -338,7 +334,7 @@ templ ReaderChrome(metadata ReaderMetadata) {
 				<div class="flex items-center gap-1">
 					<div class="w-px h-6 reader-sep"></div>
 					<div id="progress-display" @click="cycleProgressMode()" :title="progressTooltip()" class="text-sm min-w-[4rem] max-w-[5rem] sm:max-w-none text-center cursor-pointer truncate whitespace-nowrap overflow-hidden">
-					<span class="hidden sm:inline" x-text="progressLabel"></span><span x-text="progressMain">—</span>
+						<span class="hidden sm:inline" x-text="progressLabel"></span><span x-text="progressMain">—</span>
 					</div>
 					<div class="w-px h-6 reader-sep"></div>
 					<button @click="toggleTOC()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Table of Contents (t)">📖</button>
@@ -348,92 +344,93 @@ templ ReaderChrome(metadata ReaderMetadata) {
 			<div x-show="isFixedLayout">
 				<!-- Full toolbar: desktop/tablet (>= 768px, md). Wraps gracefully in between. -->
 				<div class="hidden md:flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 py-1.5 sm:px-2 sm:py-2 sm:gap-1">
-				<div class="flex items-center gap-0.5">
-					<button @click="goLeft()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Go Left (←)" aria-label="Go left">
+					<div class="flex items-center gap-0.5">
+						<button @click="goLeft()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Go Left (←)" aria-label="Go left">
+							<svg class="reader-icon" width="24" height="24" aria-hidden="true">
+								<path d="M 15 6 L 9 12 L 15 18"></path>
+							</svg>
+						</button>
+						<button x-show="backStack.length > 0" @click="goBackToLocation()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Return to previous location (Alt+←)" aria-label="Return to previous location">
+							<svg class="reader-icon" width="20" height="20" aria-hidden="true">
+								<path d="M 12 21 C 9 18 5 14.4 5 9.5 C 5 6.5 8 4 12 4 C 16 4 19 6.5 19 9.5 C 19 14.4 15 18 12 21 Z"></path>
+								<circle cx="12" cy="9.5" r="2"></circle>
+							</svg>
+						</button>
+					</div>
+					<input
+						id="progress-slider-fx"
+						type="range"
+						min="0"
+						max="1"
+						step="any"
+						@input="goToFraction($event.target.value)"
+						class="grow min-w-[3rem]"
+					/>
+					<button @click="goRight()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Go Right (→)" aria-label="Go right">
 						<svg class="reader-icon" width="24" height="24" aria-hidden="true">
-							<path d="M 15 6 L 9 12 L 15 18"></path>
+							<path d="M 9 6 L 15 12 L 9 18"></path>
 						</svg>
 					</button>
-					<button x-show="backStack.length > 0" @click="goBackToLocation()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Return to previous location (Alt+←)" aria-label="Return to previous location">
+					<div class="w-px h-6 mx-1 reader-sep"></div>
+					<!-- Fit mode + zoom cluster (not applicable in webtoon flow) -->
+					<div class="flex items-center gap-1" x-show="comicFlow !== 'webtoon'">
+						<select
+							@change="applyFitMode($event.target.value)"
+							class="reader-select text-xs px-1.5 py-1 rounded-lg shrink-0"
+							title="Fit mode"
+							aria-label="Fit mode"
+						>
+							<option value="fit-page">Fit Page</option>
+							<option value="fit-width">Fit Width</option>
+						</select>
+						<button @click="zoomOut()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Zoom Out (-)" aria-label="Zoom out">
+							<svg class="reader-icon" width="20" height="20" aria-hidden="true">
+								<path d="M 5 10 L 15 10"></path>
+							</svg>
+						</button>
+						<button @click="resetZoom()" class="text-xs px-1 rounded-lg hover:bg-gray-700 min-w-[3rem]" title="Reset Zoom (0)" aria-label="Reset zoom">
+							<span x-text="zoomPercent + '%'">100%</span>
+						</button>
+						<button @click="zoomIn()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Zoom In (+)" aria-label="Zoom in">
+							<svg class="reader-icon" width="20" height="20" aria-hidden="true">
+								<path d="M 10 5 L 10 15 M 5 10 L 15 10"></path>
+							</svg>
+						</button>
+						<!-- Recenter: reset pan, keep zoom -->
+						<button @click="recenterView()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Recenter page (reset pan, keep zoom)" aria-label="Recenter page">
+							<svg class="reader-icon" width="20" height="20" aria-hidden="true">
+								<circle cx="12" cy="12" r="4"></circle>
+								<path d="M 12 2 V 5 M 12 19 V 22 M 2 12 H 5 M 19 12 H 22"></path>
+							</svg>
+						</button>
+						<!-- Magnifier -->
+						<button @click="toggleMagnifier()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" :class="magnifierEnabled ? 'bg-blue-600 hover:bg-blue-700' : ''" title="Magnifier" aria-label="Toggle magnifier">
+							<svg class="reader-icon" width="20" height="20" aria-hidden="true">
+								<circle cx="9" cy="9" r="5"></circle>
+								<path d="M 13 13 L 18 18"></path>
+							</svg>
+						</button>
+					</div>
+					<!-- Pointer mode (PDF only): Smart / Pan / Text — hidden for
+				     comic-treated PDFs: no text selection, pan only -->
+					<div class="reader-seg shrink-0" x-show="isPDF && !treatAsComic" role="group" aria-label="Pointer mode" title="Smart: drag text to select, drag blank to pan · Pan: drag anywhere to move · Text: selection only. Shift always force-pans.">
+						<button :class="interactionMode === 'select' ? 'active' : ''" @click="setInteractionMode('select')" title="Smart: drag text to select, drag blank to pan">Smart</button>
+						<button :class="interactionMode === 'pan' ? 'active' : ''" @click="setInteractionMode('pan')" title="Pan: drag anywhere to move">Pan</button>
+						<button :class="interactionMode === 'text' ? 'active' : ''" @click="setInteractionMode('text')" title="Text: selection only, never pan (Shift overrides)">Text</button>
+					</div>
+					<!-- Double page spread (not applicable in webtoon flow) -->
+					<button x-show="comicFlow !== 'webtoon'" @click="toggleSpread()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" :class="doublePageSpread ? 'bg-blue-600 hover:bg-blue-700' : ''" title="Double Page Spread" aria-label="Toggle double page spread">
 						<svg class="reader-icon" width="20" height="20" aria-hidden="true">
-							<path d="M 12 21 C 9 18 5 14.4 5 9.5 C 5 6.5 8 4 12 4 C 16 4 19 6.5 19 9.5 C 19 14.4 15 18 12 21 Z"></path>
-							<circle cx="12" cy="9.5" r="2"></circle>
+							<path d="M 3 5 h 6 v 14 h -6 z M 15 5 h 6 v 14 h -6 z"></path>
 						</svg>
 					</button>
-				</div>
-				<input
-					id="progress-slider-fx"
-					type="range"
-					min="0"
-					max="1"
-					step="any"
-					@input="goToFraction($event.target.value)"
-					class="grow min-w-[3rem]"
-				/>
-				<button @click="goRight()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Go Right (→)" aria-label="Go right">
-					<svg class="reader-icon" width="24" height="24" aria-hidden="true">
-						<path d="M 9 6 L 15 12 L 9 18"></path>
-					</svg>
-				</button>
-				<div class="w-px h-6 mx-1 reader-sep"></div>
-				<!-- Fit mode + zoom cluster (not applicable in webtoon flow) -->
-				<div class="flex items-center gap-1" x-show="comicFlow !== 'webtoon'">
-					<select
-						@change="applyFitMode($event.target.value)"
-						class="reader-select text-xs px-1.5 py-1 rounded-lg shrink-0"
-						title="Fit mode"
-						aria-label="Fit mode"
-					>
-						<option value="fit-page">Fit Page</option>
-						<option value="fit-width">Fit Width</option>
-					</select>
-					<button @click="zoomOut()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Zoom Out (-)" aria-label="Zoom out">
-						<svg class="reader-icon" width="20" height="20" aria-hidden="true">
-							<path d="M 5 10 L 15 10"></path>
-						</svg>
-					</button>
-					<button @click="resetZoom()" class="text-xs px-1 rounded-lg hover:bg-gray-700 min-w-[3rem]" title="Reset Zoom (0)" aria-label="Reset zoom">
-						<span x-text="zoomPercent + '%'">100%</span>
-					</button>
-					<button @click="zoomIn()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Zoom In (+)" aria-label="Zoom in">
-						<svg class="reader-icon" width="20" height="20" aria-hidden="true">
-							<path d="M 10 5 L 10 15 M 5 10 L 15 10"></path>
-						</svg>
-					</button>
-					<!-- Recenter: reset pan, keep zoom -->
-					<button @click="recenterView()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Recenter page (reset pan, keep zoom)" aria-label="Recenter page">
-						<svg class="reader-icon" width="20" height="20" aria-hidden="true">
-							<circle cx="12" cy="12" r="4"></circle>
-							<path d="M 12 2 V 5 M 12 19 V 22 M 2 12 H 5 M 19 12 H 22"></path>
-						</svg>
-					</button>
-					<!-- Magnifier -->
-					<button @click="toggleMagnifier()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" :class="magnifierEnabled ? 'bg-blue-600 hover:bg-blue-700' : ''" title="Magnifier" aria-label="Toggle magnifier">
-						<svg class="reader-icon" width="20" height="20" aria-hidden="true">
-							<circle cx="9" cy="9" r="5"></circle>
-							<path d="M 13 13 L 18 18"></path>
-						</svg>
-					</button>
-				</div>
-				<!-- Pointer mode (PDF only): Smart / Pan / Text -->
-				<div class="reader-seg shrink-0" x-show="isPDF" role="group" aria-label="Pointer mode" title="Smart: drag text to select, drag blank to pan · Pan: drag anywhere to move · Text: selection only. Shift always force-pans.">
-					<button :class="interactionMode === 'select' ? 'active' : ''" @click="setInteractionMode('select')" title="Smart: drag text to select, drag blank to pan">Smart</button>
-					<button :class="interactionMode === 'pan' ? 'active' : ''" @click="setInteractionMode('pan')" title="Pan: drag anywhere to move">Pan</button>
-					<button :class="interactionMode === 'text' ? 'active' : ''" @click="setInteractionMode('text')" title="Text: selection only, never pan (Shift overrides)">Text</button>
-				</div>
-				<!-- Double page spread (not applicable in webtoon flow) -->
-				<button x-show="comicFlow !== 'webtoon'" @click="toggleSpread()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" :class="doublePageSpread ? 'bg-blue-600 hover:bg-blue-700' : ''" title="Double Page Spread" aria-label="Toggle double page spread">
-					<svg class="reader-icon" width="20" height="20" aria-hidden="true">
-						<path d="M 3 5 h 6 v 14 h -6 z M 15 5 h 6 v 14 h -6 z"></path>
-					</svg>
-				</button>
-				<!-- Progress + TOC -->
-				<div class="flex items-center gap-1">
-					<div id="progress-display-fx" @click="cycleProgressMode()" :title="progressTooltip()" class="text-sm min-w-[3.5rem] text-center cursor-pointer truncate whitespace-nowrap overflow-hidden">
-						<span x-text="progressMain">—</span>
+					<!-- Progress + TOC -->
+					<div class="flex items-center gap-1">
+						<div id="progress-display-fx" @click="cycleProgressMode()" :title="progressTooltip()" class="text-sm min-w-[3.5rem] text-center cursor-pointer truncate whitespace-nowrap overflow-hidden">
+							<span x-text="progressMain">—</span>
+						</div>
+						<button @click="toggleTOC()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Table of Contents (t)">📖</button>
 					</div>
-					<button @click="toggleTOC()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Table of Contents (t)">📖</button>
-				</div>
 				</div>
 				<!-- Compact row (phone-sized windows): single line + ⋯ overflow.
 				     Standard mobile-reader pattern: paging, slider, progress stay;
@@ -528,7 +525,7 @@ templ ReaderChrome(metadata ReaderMetadata) {
 						<span>Night mode</span>
 						<button @click="fxInvert = !fxInvert; applyFxFilter(true)" class="reader-popover-btn text-xs px-2" :class="fxInvert ? 'text-blue-400' : ''" x-text="fxInvert ? 'On' : 'Off'">Off</button>
 					</div>
-					<div class="reader-tools-row" x-show="isPDF">
+					<div class="reader-tools-row" x-show="isPDF && !treatAsComic">
 						<span>Pointer</span>
 						<div class="reader-seg" role="group" aria-label="Pointer mode">
 							<button :class="interactionMode === 'select' ? 'active' : ''" @click="setInteractionMode('select')">Smart</button>
@@ -700,7 +697,7 @@ templ ReaderAnnotationsDrawer() {
 							@keydown.enter="renameBookmark(bookmark)"
 							@keydown.escape="bookmark.renameOpen = false"
 							placeholder="Bookmark name…"
-						></input>
+						/>
 						<div class="flex gap-2 mt-1">
 							<button @click="renameBookmark(bookmark)" class="flex-1 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700">Save</button>
 							<button @click="bookmark.renameOpen = false" class="flex-1 py-1 text-xs border rounded hover:opacity-80" style="border-color: var(--border);">Cancel</button>
@@ -243,6 +243,9 @@ type ReaderMetadata struct {
 	LibraryID        string `json:"library_id"`
 	TotalCharacters  int64  `json:"total_characters"`
 	EstimatedPages   int    `json:"estimated_pages"`
+	// TreatAsComic: fixed-layout item in a comics/manga library gets
+	// comic reader treatment (bookmarks only — no highlights, no search).
+	TreatAsComic bool `json:"treat_as_comic"`
 }

 type ReadingProgress struct {
@@ -358,6 +358,15 @@ const getCSS = ({
        text-align: ${justify ? "justify" : "start"} !important;
        hyphens: ${hyphenate ? "auto" : "none"};
    }
+    /* Chrome's touch word-selection walks hyphen fragments: dragging from a
+       line-start word re-anchors at the line-end fragment (silently dropping
+       the selected word) and fast drags overshoot into the next column.
+       Coarse pointers get whole words only. */
+    @media (pointer: coarse) {
+        p, li, blockquote, dd {
+            hyphens: ${hyphenate ? "manual" : "none"};
+        }
+    }
    [align="left"] { text-align: left; }
    [align="right"] { text-align: right; }
    [align="center"] { text-align: center; }
@@ -389,6 +398,10 @@ document.addEventListener("alpine:init", () => {
    isFixedLayout: false,
    isPDF: false,
    isComic: false,
+    // Fixed-layout item in a comics/manga library (e.g. a manga PDF):
+    // comic reader treatment — bookmarks only, no text-selection
+    // highlights, no in-book search.
+    treatAsComic: false as boolean,
    comicFlow: "paged" as string,
    fxBrightness: 1 as number,
    fxContrast: 1 as number,
@@ -404,12 +417,20 @@ document.addEventListener("alpine:init", () => {
    pointerFine: true as boolean,
    fxZoomed: false as boolean,
    tapZonesEnabled: true as boolean,
-    tapZoneSize: 30 as number,
+    tapZoneSize: 12 as number,
    tapZoneTimer: null as ReturnType<typeof setTimeout> | null,
    // Any live text selection, host document or content iframe. Fed by
    // selectionchange listeners (touch devices); tap zones stand down
    // while one exists.
    anySelection: false as boolean,
+    // The section document most recently loaded (for clearing its
+    // selection after actions that consume it).
+    currentDoc: null as any,
+    // Timestamp of the last touch press (pointer:coarse surfaces); a
+    // selection appearing during a short press is Chrome's tap-to-select,
+    // not a selection gesture.
+    lastTouchDownT: 0 as number,
+    selPopTimer: null as ReturnType<typeof setTimeout> | null,
    highlightItems: [] as {
      id: string;
      text: string;
@@ -571,8 +592,10 @@ document.addEventListener("alpine:init", () => {
      formatGroup: string;
      readingDirection: string;
      mangaType: string;
+      treatAsComic: boolean;
    }) {
      this.mediaItemId = config.mediaItemId;
+      this.treatAsComic = config.treatAsComic;
      // Reading state (position, bookmarks, annotations) is never baked
      // into the rendered page: the web reader is intrinsically tied to
      // the server, so it reads all of it from the APIs at open time —
@@ -598,7 +621,7 @@ document.addEventListener("alpine:init", () => {
        this.chromeBehavior =
          behavior === "always-visible" ? "always-visible" : "auto-hide";
        this.tapZonesEnabled = this.settings.tap_zones_enabled ?? true;
-        this.tapZoneSize = this.settings.tap_zone_size || 30;
+        this.tapZoneSize = this.settings.tap_zone_size || 12;
        const mode = this.settings.pdf_interaction_mode;
        if (mode === "pan" || mode === "text" || mode === "select") {
          this.interactionMode = mode;
@@ -679,6 +702,7 @@ document.addEventListener("alpine:init", () => {
      }
      this.view.addEventListener("load", (e: any) => {
        const { doc, index } = e.detail;
+        this.currentDoc = doc;
        const link = doc.createElement("link");
        link.rel = "stylesheet";
        link.href = "/static/reader-fonts.css";
@@ -702,64 +726,61 @@ document.addEventListener("alpine:init", () => {
            this.noteSelectionActivity(
              !!sel && !sel.isCollapsed && !!sel.toString(),
            );
+            // The gesture takeover swallows pointerup for touch selection
+            // drags, so the popover's pointerup trigger never fires for
+            // them; a selection that has been stable for a moment is the
+            // settled gesture — open the popover for it.
+            if (
+              this.isFixedLayout &&
+              !this.treatAsComic &&
+              doc.querySelector(".textLayer")
+            )
+              this.schedulePDFSelectionPopover(doc, index);
+            else if (!this.isFixedLayout)
+              this.scheduleSelectionPopover(doc, index);
          });
        }
+        // Clicks in the book dismiss the popover in ANY mode and for ANY
+        // content doc (EPUB sections and fixed-layout pages alike): iframe
+        // events never bubble to the host document (so the host
+        // outside-click dismiss never sees them). Clicking a painted
+        // highlight still works: this hides, then foliate's
+        // show-annotation re-opens it in edit mode.
+        doc.addEventListener(
+          "pointerdown",
+          () => {
+            if (this.selectionPopover.open)
+              this.hideSelectionPopover();
+          },
+          { passive: true },
+        );
        // Text selection → highlight popover (reflowable EPUB only;
        // fixed-layout highlight overlays are a later milestone).
        if (!this.isFixedLayout) {
-          const checkSelection = () => {
+          const checkSelection = (e?: PointerEvent) => {
            const sel = doc.getSelection();
+            // Chrome on touch selects the word under a quick tap — that is
+            // a page-turn tap, not a selection gesture; clear it and show
+            // nothing. Real hold selections never reach this pointerup
+            // (the gesture takeover swallows it) — they open the popover
+            // through the selectionchange debounce below.
+            if (
+              e && e.pointerType === "touch" && this.lastTouchDownT &&
+              Date.now() - this.lastTouchDownT < 300
+            ) {
+              sel?.removeAllRanges();
+              return;
+            }
            if (!sel || sel.isCollapsed || !sel.rangeCount) {
              if (this.selectionPopover.mode === "create")
                this.hideSelectionPopover();
              return;
            }
-            const range = sel.getRangeAt(0);
-            const text = sel.toString().replace(/\s+/g, " ").trim();
-            if (!text) return;
-            let cfi: string;
-            let cfiEnd: string;
-            try {
-              cfi = this.view.getCFI(index, range);
-              // Collapse to the end point for a distinct end anchor —
-              // KOReader sync renders the highlight box from pos0/pos1, and
-              // pos1 == pos0 would be a degenerate (zero-length) range.
-              const endRange = range.cloneRange();
-              endRange.collapse(false);
-              cfiEnd = this.view.getCFI(index, endRange);
-            } catch {
-              return;
-            }
-            const frame = doc.defaultView?.frameElement as HTMLElement | null;
-            const iframeRect = frame?.getBoundingClientRect();
-            const rect = range.getBoundingClientRect();
-            this.openSelectionPopover({
-              mode: "create",
-              x: (iframeRect?.left ?? 0) + rect.left + rect.width / 2,
-              y: (iframeRect?.top ?? 0) + rect.top,
-              text,
-              cfi,
-              cfiEnd,
-            });
+            this.openPopoverForSelection(sel, doc, index);
          };
          doc.addEventListener(
            "pointerup",
-            () => setTimeout(checkSelection, 0),
-            { passive: true },
-          );
-          // Clicks in the book dismiss the popover in ANY mode: iframe
-          // events never bubble to the host document (so the host
-          // outside-click dismiss never sees them), and the collapsed
-          // check above only covers create mode — edit mode had no
-          // outside-click path at all, leaving Esc as the only way out.
-          // Clicking a painted highlight still works: this hides, then
-          // foliate's show-annotation re-opens it in edit mode.
-          doc.addEventListener(
-            "pointerdown",
-            () => {
-              if (this.selectionPopover.open)
-                this.hideSelectionPopover();
-            },
+            (e: PointerEvent) => setTimeout(() => checkSelection(e), 0),
            { passive: true },
          );
          doc.addEventListener(
@@ -774,66 +795,29 @@ document.addEventListener("alpine:init", () => {
        // Detected structurally: renderer.isPDF isn't set until the first
        // spread renders (during view.init), which is after this listener
        // attaches — the stale copy here would always be falsy.
-        if (this.isFixedLayout && doc.querySelector(".textLayer")) {
-          const checkPDFSelection = () => {
-            const sel = doc.getSelection();
-            if (!sel || sel.isCollapsed || !sel.rangeCount) return;
-            const range = sel.getRangeAt(0);
-            const text = sel.toString().replace(/\s+/g, " ").trim();
-            if (!text) return;
-            // Denominator: the element whose post-transform screen rect IS
-            // the visible page. For PDFs that's the rendered canvas — pdf.js
-            // scales <html> by 1/devicePixelRatio, so documentElement's rect
-            // is dpr× too small and would inflate every fraction (highlight
-            // shifted right/oversized on any dpr != 1 display). The canvas's
-            // rect is in the same transform-inclusive space as the textLayer
-            // span rects, so the dpr scaling cancels exactly.
-            const denom =
-              (doc.querySelector("#canvas canvas") as HTMLElement) ||
-              (doc.querySelector("img") as HTMLElement);
-            let dr = denom?.getBoundingClientRect();
-            if (!dr || !dr.width || !dr.height) {
-              const vw = doc.defaultView;
-              dr = {
-                left: 0,
-                top: 0,
-                width: vw?.innerWidth || 1,
-                height: vw?.innerHeight || 1,
-              } as DOMRect;
-            }
-            const rects: number[][] = [];
-            for (const r of range.getClientRects()) {
-              const x = (r.left - dr.left) / dr.width;
-              const y = (r.top - dr.top) / dr.height;
-              const w = r.width / dr.width;
-              const h = r.height / dr.height;
-              if (w > 0 && h > 0) rects.push([x, y, w, h]);
-            }
-            if (!rects.length) return;
-            // Map the first rect to host-space for popover placement.
-            // The canvas's screen rect maps 1:1 onto the host iframe box
-            // (the visible page fills the iframe), so sx/sy are 1 for PDFs;
-            // kept general for the comic img fallback.
-            const frame = doc.defaultView?.frameElement as HTMLElement | null;
-            if (!frame) return;
-            const fr = frame.getBoundingClientRect();
-            const first = range.getBoundingClientRect();
-            const sx = fr.width / dr.width;
-            const sy = fr.height / dr.height;
-            this.pdfSelDoc = doc;
-            this.openSelectionPopover({
-              mode: "create",
-              x: fr.left + first.left * sx + (first.width * sx) / 2,
-              y: fr.top + first.top * sy,
-              text,
-              cfi: "",
-              pdfPage: index,
-              pdfRects: rects,
-            });
-          };
+        // Comic-treated PDFs never attach it: no highlights, like comics.
+        if (
+          this.isFixedLayout &&
+          !this.treatAsComic &&
+          doc.querySelector(".textLayer")
+        ) {
          doc.addEventListener(
            "pointerup",
-            () => setTimeout(checkPDFSelection, 0),
+            (e: PointerEvent) =>
+              setTimeout(() => {
+                // Chrome on touch selects the word under a quick tap —
+                // that is a page-turn tap, not a selection gesture; clear
+                // it and show nothing (same guard as the reflowable path).
+                if (
+                  e.pointerType === "touch" &&
+                  this.lastTouchDownT &&
+                  Date.now() - this.lastTouchDownT < 300
+                ) {
+                  doc.getSelection()?.removeAllRanges();
+                  return;
+                }
+                this.checkPDFSelectionFor(doc, index);
+              }, 0),
            { passive: true },
          );
        }
@@ -885,7 +869,18 @@ document.addEventListener("alpine:init", () => {
      this.view.addEventListener("relocate", (e: any) => {
        const { fraction, location, pageItem, cfi, tocItem, section } =
          e.detail;
-        this.hideSelectionPopover();
+        // Only dismiss the popover on an actual position change — the
+        // paginator also emits no-op relocates (e.g. a tap's page-aligned
+        // anchor), which would otherwise close a just-opened highlight
+        // edit popover. NOTE: detail.section is an object (recreated on
+        // every relocate), so it can't be compared by reference; the
+        // fraction threshold alone covers section changes (any section
+        // boundary moves the whole-book fraction far more than 0.1%).
+        const prev = this.lastRelocateDetail;
+        const moved =
+          !prev ||
+          Math.abs((prev.fraction ?? 0) - (fraction ?? 0)) > 0.001;
+        if (moved) this.hideSelectionPopover();
        this.lastCfi = cfi || "";
        this.lastRelocateDetail = {
          fraction,
@@ -959,6 +954,9 @@ document.addEventListener("alpine:init", () => {
      // Smart|Pan|Text control appear for PDFs.
      this.isPDF = !!this.renderer?.isPDF;
      if (this.isPDF) {
+        // Comic-treated PDFs are paged through like comics: no text
+        // selection, so pointer interactions stay in pan mode.
+        if (this.treatAsComic) this.interactionMode = "pan";
        this.renderer.setAttribute("interaction-mode", this.interactionMode);
      }
      this.fxZoomed = this.isFixedLayout && this.renderer?.zoom != null;
@@ -1006,6 +1004,10 @@ document.addEventListener("alpine:init", () => {
      this.pokeChrome();
    },
    pokeChrome() {
+      // Never raise the chrome while a touch selection is live — the
+      // selection popover owns the screen until the selection is
+      // consumed or dismissed.
+      if (this.anySelection) return;
      this.chromeVisible = true;
      if (this.chromeBehavior !== "auto-hide") return;
      if (this.hideTimer) clearTimeout(this.hideTimer);
@@ -1057,6 +1059,15 @@ document.addEventListener("alpine:init", () => {
        clearTimeout(this.tapZoneTimer);
        this.tapZoneTimer = null;
      }
+      // Hide the chrome the moment a selection appears — it competes
+      // with the selection popover and handles for screen space.
+      if (hasSelection && this.chromeVisible) {
+        this.chromeVisible = false;
+        if (this.hideTimer) {
+          clearTimeout(this.hideTimer);
+          this.hideTimer = null;
+        }
+      }
    },
    attachTapZoneListeners(surface: HTMLElement, isDoc: boolean) {
      let downX = 0;
@@ -1080,6 +1091,7 @@ document.addEventListener("alpine:init", () => {
          downId = e.pointerId;
          moved = false;
          longPressed = false;
+          this.lastTouchDownT = downT;
        },
        { passive: true },
      );
@@ -1129,16 +1141,26 @@ document.addEventListener("alpine:init", () => {
          // No tap actions while a fixed-layout page is zoomed — taps then
          // belong to the content (and double-tap zoom).
          if (this.isFixedLayout && this.renderer?.zoom != null) return;
-          const width =
-            (isDoc
-              ? (surface as any).documentElement.clientWidth
-              : (surface as HTMLElement).getBoundingClientRect().width) || 1;
-          const relX =
-            (e.clientX -
-              (isDoc
-                ? 0
-                : (surface as HTMLElement).getBoundingClientRect().left)) /
-            width;
+          // Content iframes are laid out at the full section width (the
+          // paginator shows one column slice of a much wider document), so
+          // clientX must be mapped into the visible page before it can be
+          // compared against the tap zones — dividing by the iframe's
+          // clientWidth puts every tap in the left zone.
+          let relX: number;
+          if (isDoc) {
+            const r: any = this.renderer;
+            const docWidth = (surface as any).documentElement.clientWidth || 1;
+            if (r && !r.scrolled && r.size) {
+              const base = r.start - r.size;
+              relX = (e.clientX - base) / r.size;
+            } else {
+              relX = e.clientX / docWidth;
+            }
+            if (this.view?.book?.dir === "rtl") relX = 1 - relX;
+          } else {
+            const rect = (surface as HTMLElement).getBoundingClientRect();
+            relX = (e.clientX - rect.left) / (rect.width || 1);
+          }
          this.routeTapDebounced(relX);
        },
        { passive: true },
@@ -1154,6 +1176,13 @@ document.addEventListener("alpine:init", () => {
      }
      this.tapZoneTimer = setTimeout(() => {
        this.tapZoneTimer = null;
+        // Touch pages by swipe only (the paginator's pan + snap); a tap
+        // anywhere just toggles the chrome. The edge zones remain for
+        // mouse-driven taps.
+        if (window.matchMedia("(pointer: coarse)").matches) {
+          this.toggleChromeManually();
+          return;
+        }
        const zone = this.tapZoneSize / 100;
        if (relX < zone) this.goLeft();
        else if (relX > 1 - zone) this.goRight();
@@ -1199,10 +1228,14 @@ document.addEventListener("alpine:init", () => {
      p.noteOpen = !!p.note && opts.mode === "edit";
      p.pdfPage = opts.pdfPage ?? -1;
      p.pdfRects = opts.pdfRects ?? [];
-      // Clamp so the popover stays on screen (it anchors bottom-center).
+      // Clamp so the popover stays on screen (it anchors bottom-center;
+      // the popover is ~240px wide, so the fixed margins must cover half
+      // of it). NOTE: do not mutate the position after opening — touching
+      // the style mid-enter-transition leaves the popover invisible to
+      // compositor hit-testing (taps fall through to the content iframe).
      const w = window.innerWidth;
      const h = window.innerHeight;
-      p.x = Math.min(Math.max(opts.x, 90), w - 90);
+      p.x = Math.min(Math.max(opts.x, 130), w - 130);
      p.y = Math.min(Math.max(opts.y, 60), h - 60);
      p.open = true;
    },
@@ -1210,6 +1243,266 @@ document.addEventListener("alpine:init", () => {
      this.selectionPopover.open = false;
      this.selectionPopover.noteOpen = false;
    },
+    scheduleSelectionPopover(doc: any, index: number) {
+      if (this.selPopTimer) clearTimeout(this.selPopTimer);
+      this.selPopTimer = setTimeout(() => {
+        this.selPopTimer = null;
+        // A tap on a painted highlight re-opens the popover in edit mode
+        // via its own path — never clobber it.
+        if (this.selectionPopover.open && this.selectionPopover.mode === "edit")
+          return;
+        const sel = doc.getSelection();
+        if (!sel || sel.isCollapsed || !sel.rangeCount) {
+          if (
+            this.selectionPopover.open &&
+            this.selectionPopover.mode === "create"
+          )
+            this.hideSelectionPopover();
+          this.hideSelectionHandles();
+          return;
+        }
+        // The browser's selection auto-scroll (drags near a viewport
+        // edge) scrolls the paginated container off the page grid, and
+        // a selection that crosses the page edge keeps its reveal-scroll
+        // chasing the off-page text — the view bounces between pages
+        // forever. Correct the view to the anchor's page and clamp the
+        // selection to the visible page; scrollBy clamps to the current
+        // section, so the correction can never cross sections.
+        const r: any = this.renderer;
+        if (r && !r.scrolled && r.size && this.view?.book?.dir !== "rtl") {
+          try {
+            const anchorProbe = doc.createRange();
+            anchorProbe.setStart(sel.anchorNode, sel.anchorOffset);
+            // collapsed ranges report degenerate (0,0) rects — extend by
+            // one character to get a measurable one
+            if (
+              sel.anchorNode?.nodeType === 3 &&
+              sel.anchorOffset < sel.anchorNode.length
+            )
+              anchorProbe.setEnd(sel.anchorNode, sel.anchorOffset + 1);
+            const rects = anchorProbe.getClientRects();
+            const ar =
+              rects[rects.length - 1] || anchorProbe.getBoundingClientRect();
+            // rect x is already in the iframe's own (content) space,
+            // i.e. scroll-invariant: page = floor(x / column stride)
+            const desired = (Math.floor(ar.x / r.size) + 1) * r.size;
+            const needsScroll = Math.abs(r.start - desired) > r.size * 0.02;
+            if (needsScroll) r.scrollBy(desired - r.start, 0);
+            const clamped = this.clampSelectionToPage(sel, doc, r);
+            if (clamped)
+              // the clamp's selectionchange re-arms this settle; the
+              // next pass finds view and selection in place and opens
+              // the popover
+              return;
+            if (needsScroll) {
+              setTimeout(() => {
+                const s = doc.getSelection();
+                if (s && s.rangeCount && !s.isCollapsed && s.type === "Range")
+                  this.openPopoverForSelection(s, doc, index);
+              }, 350);
+              return;
+            }
+          } catch {
+            /* anchor geometry unavailable */
+          }
+        }
+        this.openPopoverForSelection(sel, doc, index);
+      }, 400);
+    },
+    // PDF mirror of scheduleSelectionPopover: the gesture takeover
+    // swallows pointerup for touch selection drags in the fx iframe too,
+    // so a selection that has been stable for a moment is the settled
+    // gesture — open the popover for it.
+    schedulePDFSelectionPopover(doc: any, index: number) {
+      if (this.selPopTimer) clearTimeout(this.selPopTimer);
+      this.selPopTimer = setTimeout(() => {
+        this.selPopTimer = null;
+        // A tap on a painted highlight re-opens the popover in edit mode
+        // via its own path — never clobber it.
+        if (this.selectionPopover.open && this.selectionPopover.mode === "edit")
+          return;
+        const sel = doc.getSelection();
+        if (!sel || sel.isCollapsed || !sel.rangeCount) {
+          if (
+            this.selectionPopover.open &&
+            this.selectionPopover.mode === "create"
+          )
+            this.hideSelectionPopover();
+          return;
+        }
+        this.checkPDFSelectionFor(doc, index);
+      }, 400);
+    },
+    checkPDFSelectionFor(doc: any, index: number) {
+      const sel = doc.getSelection();
+      if (!sel || sel.isCollapsed || !sel.rangeCount) return;
+      const range = sel.getRangeAt(0);
+      const text = sel.toString().replace(/\s+/g, " ").trim();
+      if (!text) return;
+      // Denominator: the element whose post-transform screen rect IS
+      // the visible page. For PDFs that's the rendered canvas — pdf.js
+      // scales <html> by 1/devicePixelRatio, so documentElement's rect
+      // is dpr× too small and would inflate every fraction (highlight
+      // shifted right/oversized on any dpr != 1 display). The canvas's
+      // rect is in the same transform-inclusive space as the textLayer
+      // span rects, so the dpr scaling cancels exactly.
+      const denom =
+        (doc.querySelector("#canvas canvas") as HTMLElement) ||
+        (doc.querySelector("img") as HTMLElement);
+      let dr = denom?.getBoundingClientRect();
+      if (!dr || !dr.width || !dr.height) {
+        const vw = doc.defaultView;
+        dr = {
+          left: 0,
+          top: 0,
+          width: vw?.innerWidth || 1,
+          height: vw?.innerHeight || 1,
+        } as DOMRect;
+      }
+      const rects: number[][] = [];
+      for (const r of range.getClientRects()) {
+        const x = (r.left - dr.left) / dr.width;
+        const y = (r.top - dr.top) / dr.height;
+        const w = r.width / dr.width;
+        const h = r.height / dr.height;
+        if (w > 0 && h > 0) rects.push([x, y, w, h]);
+      }
+      if (!rects.length) return;
+      // Map the first rect to host-space for popover placement.
+      // The canvas's screen rect maps 1:1 onto the host iframe box
+      // (the visible page fills the iframe), so sx/sy are 1 for PDFs;
+      // kept general for the comic img fallback.
+      const frame = doc.defaultView?.frameElement as HTMLElement | null;
+      if (!frame) return;
+      const fr = frame.getBoundingClientRect();
+      const first = range.getBoundingClientRect();
+      const sx = fr.width / dr.width;
+      const sy = fr.height / dr.height;
+      // On touch the browser's own selection menu attaches ABOVE the
+      // selection and its drag handles sit just below it — place ours
+      // below both (same +90 clearance the reflowable path uses). Fine
+      // pointers (desktop) keep the above-the-selection placement.
+      const coarse = window.matchMedia("(pointer: coarse)").matches;
+      const y = coarse
+        ? fr.top + first.bottom * sy + 90
+        : fr.top + first.top * sy;
+      this.pdfSelDoc = doc;
+      this.openSelectionPopover({
+        mode: "create",
+        x: fr.left + first.left * sx + (first.width * sx) / 2,
+        y,
+        text,
+        cfi: "",
+        pdfPage: index,
+        pdfRects: rects,
+      });
+    },
+    // Trim a touch selection to the visible page. The visible column
+    // occupies content x [start - size, start]; endpoints beyond it are
+    // re-mapped to the page edge on their own line via caretRangeFromPoint.
+    clampSelectionToPage(sel: any, doc: any, r: any): boolean {
+      const left = r.start - r.size;
+      const right = r.start;
+      const TOL = 8;
+      const backwardProbe = doc.createRange();
+      backwardProbe.setStart(sel.anchorNode, sel.anchorOffset);
+      backwardProbe.setEnd(sel.focusNode, sel.focusOffset);
+      const backward = backwardProbe.collapsed;
+      const range = sel.getRangeAt(0);
+      const probeRect = (node: any, offset: number, forward: boolean) => {
+        const p = doc.createRange();
+        p.setStart(node, offset);
+        if (node?.nodeType === 3) {
+          if (forward && offset < node.length)
+            p.setEnd(node, offset + 1);
+          else if (!forward && offset > 0)
+            p.setStart(node, offset - 1);
+        }
+        if (p.collapsed) return null;
+        const rects = p.getClientRects();
+        return rects.length ? rects[forward ? 0 : rects.length - 1] : null;
+      };
+      const caretAt = (x: number, y: number) => {
+        const caret = doc.caretRangeFromPoint?.(x, y)
+          ?? doc.caretPositionFromPoint?.(x, y);
+        if (!caret) return null;
+        return {
+          node: caret.startContainer ?? caret.offsetNode,
+          offset: caret.startOffset ?? caret.offset,
+        };
+      };
+      // selection end beyond the visible page (into the next column):
+      // trim to the last position on the visible page (bottom-right
+      // corner of the column — nearest-text mapping is unambiguous
+      // from the margin)
+      const endRect = probeRect(range.endContainer, range.endOffset, false);
+      if (endRect && endRect.x + endRect.width > right + TOL) {
+        const caret = caretAt(
+          right - 15, doc.documentElement.clientHeight - 40);
+        if (caret && range.isPointInRange(caret.node, caret.offset)) {
+          if (backward)
+            sel.setBaseAndExtent(caret.node, caret.offset,
+              sel.focusNode, sel.focusOffset);
+          else sel.extend(caret.node, caret.offset);
+          return true;
+        }
+      }
+      // selection start before the visible page (previous column):
+      // trim to the first position on the visible page (top-left corner)
+      const startRect = probeRect(range.startContainer, range.startOffset, true);
+      if (startRect && startRect.x < left - TOL) {
+        const caret = caretAt(left + 15, 40);
+        if (caret && range.isPointInRange(caret.node, caret.offset)) {
+          if (backward)
+            sel.extend(caret.node, caret.offset);
+          else
+            sel.setBaseAndExtent(caret.node, caret.offset,
+              sel.focusNode, sel.focusOffset);
+          return true;
+        }
+      }
+      return false;
+    },
+    openPopoverForSelection(sel: any, doc: any, index: number) {
+      const range = sel.getRangeAt(0);
+      const text = sel.toString().replace(/\s+/g, " ").trim();
+      if (!text) return;
+      let cfi: string;
+      let cfiEnd: string;
+      try {
+        cfi = this.view.getCFI(index, range);
+        // Collapse to the end point for a distinct end anchor —
+        // KOReader sync renders the highlight box from pos0/pos1, and
+        // pos1 == pos0 would be a degenerate (zero-length) range.
+        const endRange = range.cloneRange();
+        endRange.collapse(false);
+        cfiEnd = this.view.getCFI(index, endRange);
+      } catch {
+        return;
+      }
+      const frame = doc.defaultView?.frameElement as HTMLElement | null;
+      const iframeRect = frame?.getBoundingClientRect();
+      const rect = range.getBoundingClientRect();
+      // On touch the browser's own selection menu attaches ABOVE the
+      // selection (and paints over page content) — place ours BELOW it
+      // so both are visible. The popover anchors bottom-center at y-10
+      // and is ~44px tall; the drag handles occupy the first 24px below
+      // the selection, so the offset must clear them too.
+      const coarse = window.matchMedia("(pointer: coarse)").matches;
+      const y = coarse
+        ? (iframeRect?.top ?? 0) + rect.bottom + 90
+        : (iframeRect?.top ?? 0) + rect.top;
+      this.openSelectionPopover({
+        mode: "create",
+        x: (iframeRect?.left ?? 0) + rect.left + rect.width / 2,
+        y,
+        text,
+        cfi,
+        cfiEnd,
+      });
+      if (coarse && this.view?.book?.dir !== "rtl")
+        this.showSelectionHandles(doc);
+    },
    renderAllHighlights() {
      for (const hl of this.highlightItems) {
        if (hl.pdfPage >= 0) {
@@ -1332,7 +1625,12 @@ document.addEventListener("alpine:init", () => {
          const rows = await hlResp.json();
          this.highlightItems = (rows as any[])
            .map((r) => this.mapHighlightRow(r))
-            .filter((hl: any) => hl.cfi || hl.pdfPage >= 0);
+            // Comic-treated items show no highlights (bookmarks only),
+            // and previously-created PDF highlights stop rendering.
+            .filter(
+              (hl: any) =>
+                !this.treatAsComic && (hl.cfi || hl.pdfPage >= 0),
+            );
          this.renderAllHighlights();
        }
        if (noteResp.ok) {
@@ -1351,6 +1649,9 @@ document.addEventListener("alpine:init", () => {
      const p = this.selectionPopover;
      const token = getToken();
      if (!token || !this.mediaItemId || (!p.cfi && p.pdfPage < 0)) return;
+      // The note editor writes into p.note live; "Highlight with note"
+      // creates the highlight AND its note in one POST.
+      const note = p.note.trim();
      const pdfAnchor =
        p.pdfPage >= 0
          ? JSON.stringify({ v: 1, page: p.pdfPage, rects: p.pdfRects })
@@ -1371,7 +1672,7 @@ document.addEventListener("alpine:init", () => {
              epubcfi_start: p.pdfPage >= 0 ? pdfAnchor : p.cfi,
              epubcfi_end: p.pdfPage >= 0 ? pdfAnchor : p.cfiEnd,
              color,
-              note_text: "",
+              note_text: note,
              percentage_start: this.lastRelocateDetail?.fraction ?? 0,
            }),
          },
@@ -1400,16 +1701,23 @@ document.addEventListener("alpine:init", () => {
                ? ""
                : this.toRangeCfi(p.cfi, p.cfiEnd, p.text) || p.cfi,
            color,
-            note: "",
+            note,
            id: row.id,
          });
+          // Clear the DOM selection: the gesture is consumed, and it is
+          // what keeps Chrome's native copy/share menu on screen.
+          try {
+            this.currentDoc?.getSelection()?.removeAllRanges();
+          } catch {
+            /* doc may be gone */
+          }
        }
        this.hideSelectionPopover();
      } catch (_e) {
        /* ignore highlight errors */
      }
    },
-    async saveHighlightChanges() {
+    async saveHighlightChanges(keepNoteOpen = false) {
      const p = this.selectionPopover;
      const token = getToken();
      if (!token || !this.mediaItemId || !p.id) return;
@@ -1473,7 +1781,9 @@ document.addEventListener("alpine:init", () => {
            id: p.id,
          });
        }
-        p.noteOpen = false;
+        // Explicit saves (the Save button) close the whole popover; color
+        // tweaks made while the note editor is open keep everything open.
+        if (!keepNoteOpen) this.hideSelectionPopover();
      } catch (_e) {
        /* ignore highlight errors */
      }
@@ -1504,12 +1814,170 @@ document.addEventListener("alpine:init", () => {
      }
    },
    async copySelectionText() {
+      const text = this.selectionPopover.text;
      try {
-        await navigator.clipboard.writeText(this.selectionPopover.text);
-        this.hideSelectionPopover();
-      } catch (_e) {
-        /* clipboard unavailable */
+        if (navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(text);
+          this.finishCopy();
+          return;
+        }
+      } catch {
+        /* fall through to the legacy path */
      }
+      // Plain HTTP (typical LAN access) has no navigator.clipboard;
+      // a transient textarea + execCommand works from this user
+      // gesture on insecure contexts.
+      try {
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.style.position = "fixed";
+        ta.style.opacity = "0";
+        document.body.append(ta);
+        ta.select();
+        document.execCommand("copy");
+        ta.remove();
+        this.finishCopy();
+      } catch {
+        /* ignore clipboard errors */
+      }
+    },
+    finishCopy() {
+      try {
+        this.currentDoc?.getSelection()?.removeAllRanges();
+      } catch {
+        /* doc may be gone */
+      }
+      this.hideSelectionPopover();
+    },
+    // ----- touch selection handles -----
+    // The native selection handles cannot be used (the custom gesture's
+    // touchstart preventDefault disables them along with the rest of the
+    // native controller), so adjustment after lift happens through these.
+    // Purely imperative DOM — position updates run on every drag frame.
+    selectionHandles: {
+      root: null as HTMLElement | null,
+      start: null as HTMLElement | null,
+      end: null as HTMLElement | null,
+      drag: null as "start" | "end" | null,
+      doc: null as any,
+    },
+    ensureSelectionHandles() {
+      const h = this.selectionHandles as any;
+      if (h.root) return;
+      const root = document.createElement("div");
+      root.id = "selection-handles";
+      const make = (which: "start" | "end") => {
+        const el = document.createElement("div");
+        el.className = "sel-handle";
+        el.addEventListener("pointerdown", (e: PointerEvent) => {
+          e.preventDefault();
+          e.stopPropagation();
+          h.drag = which;
+          el.setPointerCapture(e.pointerId);
+        });
+        el.addEventListener("pointermove", (e: PointerEvent) => {
+          if (h.drag !== which) return;
+          e.preventDefault();
+          this.dragSelectionHandle(e);
+        });
+        const release = () => {
+          h.drag = null;
+        };
+        el.addEventListener("pointerup", release);
+        el.addEventListener("pointercancel", release);
+        root.append(el);
+        return el;
+      };
+      h.start = make("start");
+      h.end = make("end");
+      h.root = root;
+      document.body.append(root);
+    },
+    showSelectionHandles(doc: any) {
+      this.ensureSelectionHandles();
+      const h = this.selectionHandles as any;
+      h.doc = doc;
+      h.root!.style.display = "block";
+      this.positionSelectionHandles(doc);
+    },
+    hideSelectionHandles() {
+      const h = this.selectionHandles as any;
+      if (!h.root) return;
+      h.root.style.display = "none";
+      h.drag = null;
+    },
+    // Host-space position of a selection boundary: the left edge of the
+    // start caret or the right edge of the end caret, at the line bottom.
+    caretHostPos(doc: any, node: any, offset: number, forward: boolean) {
+      try {
+        const p = doc.createRange();
+        p.setStart(node, offset);
+        if (node?.nodeType === 3) {
+          if (forward && offset < node.length) p.setEnd(node, offset + 1);
+          else if (!forward && offset > 0) p.setStart(node, offset - 1);
+        }
+        if (p.collapsed) return null;
+        const rects = p.getClientRects();
+        const r = rects[forward ? 0 : rects.length - 1];
+        if (!r) return null;
+        const off = doc.defaultView?.frameElement?.getBoundingClientRect();
+        return {
+          x: (off?.left ?? 0) + (forward ? r.left : r.right),
+          y: (off?.top ?? 0) + r.bottom,
+        };
+      } catch {
+        return null;
+      }
+    },
+    positionSelectionHandles(doc: any) {
+      const h = this.selectionHandles as any;
+      if (!h.root || h.root.style.display === "none") return;
+      const sel = doc.getSelection();
+      if (!sel?.rangeCount || sel.isCollapsed) {
+        this.hideSelectionHandles();
+        return;
+      }
+      const range = sel.getRangeAt(0);
+      const startPos = this.caretHostPos(doc, range.startContainer,
+        range.startOffset, true);
+      const endPos = this.caretHostPos(doc, range.endContainer,
+        range.endOffset, false);
+      if (!startPos || !endPos) {
+        this.hideSelectionHandles();
+        return;
+      }
+      h.start!.style.transform = `translate(${startPos.x - 6}px, ${startPos.y}px)`;
+      h.end!.style.transform = `translate(${endPos.x - 6}px, ${endPos.y}px)`;
+    },
+    dragSelectionHandle(ev: PointerEvent) {
+      const h = this.selectionHandles as any;
+      const doc = h.doc;
+      const r: any = this.renderer;
+      if (!doc || !r || r.scrolled) return;
+      if (this.view?.book?.dir === "rtl") return;
+      const frame = doc.defaultView?.frameElement;
+      if (!frame) return;
+      const off = frame.getBoundingClientRect();
+      // pointer → iframe content space, clamped to the visible page
+      const size = r.size;
+      const left = r.start - size;
+      const right = r.start;
+      const x = Math.min(Math.max(ev.clientX - off.left, left + 2), right - 2);
+      const y = ev.clientY - off.top;
+      const caret = doc.caretRangeFromPoint?.(x, y)
+        ?? doc.caretPositionFromPoint?.(x, y);
+      if (!caret) return;
+      const node = caret.startContainer ?? caret.offsetNode;
+      const offset = caret.startOffset ?? caret.offset;
+      const sel = doc.getSelection();
+      if (!sel?.rangeCount || !node) return;
+      const range = sel.getRangeAt(0);
+      if (h.drag === "start")
+        sel.setBaseAndExtent(node, offset, range.endContainer, range.endOffset);
+      else
+        sel.setBaseAndExtent(range.startContainer, range.startOffset,
+          node, offset);
+      this.positionSelectionHandles(doc);
    },
    goToHighlight(hl: {
      cfi: string;
@@ -1698,6 +2166,8 @@ document.addEventListener("alpine:init", () => {
    },
    setInteractionMode(mode: string) {
      if (!this.isFixedLayout || !this.isPDF) return;
+      // Comic-treated PDFs have no text selection: pan only.
+      if (this.treatAsComic) return;
      if (mode !== "select" && mode !== "pan" && mode !== "text") return;
      this.renderer.setAttribute("interaction-mode", mode);
      this.interactionMode = mode;
@@ -1792,8 +2262,9 @@ document.addEventListener("alpine:init", () => {
    },
    toggleSearch() {
      // Reflowable books use foliate's DOM search; PDFs use extracted text.
-      // Comics have no text at all.
-      if (this.isFixedLayout && !this.isPDF) return;
+      // Comics have no text at all — and comic-treated PDFs (manga scans)
+      // opt out of search to match comic treatment: bookmarks only.
+      if ((this.isFixedLayout && !this.isPDF) || this.treatAsComic) return;
      const opening = !this.searchOpen;
      this.closeDrawers();
      this.searchOpen = opening;
@@ -2201,8 +2672,8 @@ document.addEventListener("alpine:init", () => {
      this.hyphenate = true;
      this.chromeBehavior = "auto-hide";
      this.applyChromeBehavior();
-      this.interactionMode = "select";
-      this.setInteractionMode("select");
+      this.interactionMode = this.treatAsComic ? "pan" : "select";
+      this.setInteractionMode(this.interactionMode);
      this.fxBrightness = 1;
      this.fxContrast = 1;
      this.fxInvert = false;
@@ -1434,3 +1434,34 @@
    }
  }
 }
+
+/* Touch selection handles (custom gesture — the native ones are disabled) */
+#selection-handles {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 55;
+}
+#selection-handles .sel-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 24px;
+  pointer-events: auto;
+  touch-action: none;
+  background: #8ab4f8;
+  border-radius: 6px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+  opacity: 0.95;
+}
+#selection-handles .sel-handle::before {
+  content: "";
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  width: 2px;
+  height: 5px;
+  background: inherit;
+  transform: translateX(-50%);
+}
Author	SHA1	Message	Date
john-okeefe	5329bf35a9	fix: pin foliate-js e16530a — desktop double-click zoom toggle Release / build-and-push (push) Successful in 3m20s Details Bump the linuxhg mirror pin from 1305a52 to e16530a (mirror main is already synced). The fork adds a desktop double-click zoom to the fixed-layout renderer for all fixed-layout content (comics, manga, PDFs, fixed EPUBs): - at fit scale, double-click zooms to 2.5x at the clicked location - zoomed or panned, double-click resets to 100% centered - PDF text-layer spans and annotation links keep native double-click (word selection) in Smart/Text modes; Pan mode zooms anywhere - mirrors the existing touch double-tap; disabled in panel-zoom mode like the other gestures Also closes the gap where node_modules was serving a stale tarball older than the previous 1305a52 pin (missing the toolbar-resize debounce and selection-drag fixes); a fresh install now resolves the full set.	2026-09-17 14:37:05 -04:00
john-okeefe	80e5d5b0d1	feat(reader): comic treatment for fixed-layout items in comics/manga libraries PDFs shelved in comics or manga libraries (scanned manga, official manga PDFs with text layers) now get comic reader treatment: bookmarks only — no text-selection highlights, no annotations, no in-book search. Items in ebooks libraries are completely unaffected, and EPUBs keep their existing behavior everywhere. - handlers: new exported ShouldTreatAsComic(libraryType, formatGroup) — true for fixed_layout/comic_archive in manga/comics libraries; the reader JSON API also exposes it as treat_as_comic - router: the SSR reader page fetches the library type and passes TreatAsComic through ReaderMetadata into the init config - reader: when treatAsComic is set, the PDF textLayer selection listener (mouse and touch paths) never attaches so no highlight popover can open; pointer mode is forced to pan (Smart/Text segment hidden); search button and toggleSearch are disabled; previously-created PDF highlights stop rendering - bookmarks are unchanged (already page-index based for fixed layout), and device sync / OPDS / format classification are untouched since format_group stays fixed_layout	2026-09-17 14:36:58 -04:00
John O'Keefe	b3a429d7e1	fix(reader): Save/Cancel in the note editor closes the whole popover Release / build-and-push (push) Successful in 2m46s Details Cancel only collapsed the editor section, and edit-mode saves only set noteOpen=false — the minimized popover (colors/pencil/copy/delete) stayed up. Explicit Save and Cancel now call hideSelectionPopover; color tweaks with the editor open still keep it open.	2026-09-17 11:47:25 -04:00
John O'Keefe	d8179bb066	fix(reader): popover dismiss on PDF taps; notes save on create; colors don't close editor - The in-book pointerdown dismiss listener lived in the reflowable-only block, so PDF taps never closed the selection popover — hoist it so every content doc (EPUB, PDF, comics) dismisses on tap. - createHighlight hardcoded note_text: '' — 'Highlight with note' saved the highlight but silently dropped the note. Send p.note (and pass it to the EPUB overlayer). - saveHighlightChanges collapsed the note editor on every save; color dots in create mode created a highlight outright. With the editor open, color dots now just recolor (create) or recolor-and-save with the editor kept open (edit).	2026-09-17 10:55:21 -04:00
John O'Keefe	960305dfa9	fix(reader): PDF selection popover shows reliably on touch, below selection Chromium's touch selection takeover swallows pointerup in the fx iframe, so the PDF popover's only trigger never fired on real phones — it only appeared when timing happened to deliver the event. Mirror the EPUB path: a selectionchange debounce (400ms settle) opens the popover, with the pointerup path kept for desktop plus the quick-tap word-select guard. Also place the popover BELOW the selection on coarse pointers (+90px clearing the native selection menu and drag handles), matching the reflowable path; desktop keeps above-placement.	2026-09-17 10:40:12 -04:00
John O'Keefe	16bbeec5a3	fix: fresh npm cache mount id to evict stale foliate-js tarball	2026-09-17 10:17:34 -04:00
John O'Keefe	39f9c39360	fix: pin foliate-js 1305a52 via linuxhg mirror GitHub-pinned builds silently reused a stale foliate-js tarball from Docker's npm cache mount (name@version never changed from 0.0.0); every build since the GitHub pin shipped pre-94bb384 code. Repin to the mirror and bust the cache mount.	2026-09-17 10:13:33 -04:00
John O'Keefe	011b6d14e4	fix: pin foliate-js 1305a52 — fx renderer ignores toolbar resizes during selection The fx renderer re-rendered the PDF on every viewport resize; mobile browser toolbar transitions (7-17% height change) during a text selection drag caused the old canvas to be cleared for re-rendering while the async pdf.js render raced with the next resize, blanking the page. Now gated by the same 25% threshold as the paginator.	2026-09-16 17:30:00 -04:00
John O'Keefe	d4661e7f04	fix: pin foliate-js 94bb384 — PDF selection drags no longer blank the page The fx renderer's gesture classifier only checked whether the touch started on a .textLayer span; Chromium's long-press selects the nearest word even when the finger landed between spans, so the classifier saw a non-selectable target and classified the drag as swipe/pan — preventDefault on the iframe's touchmove then cancelled the native selection extension mid-drag and could blank the PDF canvas. If any frame already has a non-collapsed selection, the drag is now classified as native.	2026-09-16 17:13:24 -04:00
John O'Keefe	27a93ba2ea	fix(reader): hide the chrome when a touch selection starts Release / build-and-push (push) Successful in 2m28s Details pokeChrome's anySelection gate only prevents the chrome from being raised — if it was already visible when the selection began, it stayed up. noteSelectionActivity now actively hides it the moment a selection appears.	2026-09-15 20:20:34 -04:00
John O'Keefe	7afad5dcde	chore: point foliate-js at linuxhg mirror main (8a20399)	2026-09-15 20:13:07 -04:00
John O'Keefe	929a862e74	feat(reader): touch selection handles, copy fallback, highlight tap editing - Custom drag handles (start/end) for post-lift selection adjustment: the native handles are disabled with the rest of the native touch selection controller; these are positioned at the selection's boundary carets and driven through the same clamped caret mapping - Copy button falls back to execCommand via a transient textarea on plain HTTP (navigator.clipboard is unavailable on LAN addresses); both paths clear the selection and dismiss the popover - Only dismiss the selection popover on actual position changes in relocate (detail.section is a fresh object on every relocate, so reference comparison always saw a move); a tap's no-op relocate was closing the just-opened highlight edit popover - Pin foliate-js f872a01 (synthetic click dispatch on quick taps) and 422e8e0 (don't snap taps that never panned)	2026-09-15 19:33:45 -04:00
John O'Keefe	0e55dafb1e	fix(reader): mobile touch reading overhaul - tap zones: map in-iframe taps into the visible page slice (the iframe is laid out at full section width; every tap previously computed as the left margin) and shrink the default zone size to 12% - hyphens: manual on coarse pointers: Chrome's touch word-selection walks hyphen fragments, re-anchoring line-start drags and overshooting line ends into the next column - selection popover: opens for settled touch selections (the gesture takeover swallows pointerup), positioned below the selection with on-screen clamping; creating a highlight clears the selection so the browser's own menu follows - settle-time recovery: return the view to the selection's anchor page and clamp the selection to the visible page after the browser's selection auto-scroll wanders off the page grid - overscroll-behavior: none on the reader page (pull-to-refresh during downward drags)	2026-09-15 08:50:17 -04:00
John O'Keefe	cc8084a713	fix(reader): pin foliate-js 9cfe266 Non-touch gate on selection auto-paging (drag-selecting no longer pages away mid-gesture) and small height-only viewport resizes no longer re-wrap the book (mobile browser toolbar transitions).	2026-09-15 08:50:06 -04:00