Merge develop into main: release v1.8.2

Release v1.8.2

Author: Gnathonic

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [1.8.2] - 2026-07-09
+
+### Fixed
+
+- Fixed Yomitan sentence capture stopping at OCR line breaks (#254)
+
+### Changed
+
+- Refreshed cloud provider descriptions (Drive quota and auto re-auth)
+
 ## [1.8.1] - 2026-07-06
 
 ### Fixed

CLAUDE.md

@@ -62,8 +62,10 @@ src/
 │   ├── util/            # Utilities
 │   │   └── sync/        # Multi-provider cloud sync
 │   │       └── providers/
+│   │           ├── filesystem/
 │   │           ├── google-drive/
 │   │           ├── mega/
+│   │           ├── onedrive/
 │   │           └── webdav/
 │   ├── views/           # Top-level view components
 │   └── workers/         # Web Workers for background tasks
@@ -89,11 +91,13 @@ src/
 
 Located in `src/lib/util/sync/`, the app supports multiple cloud storage providers:
 
-| Provider     | Auth Method          | Status       |
-| ------------ | -------------------- | ------------ |
-| Google Drive | OAuth2 implicit flow | Full support |
-| MEGA         | Email/password       | Full support |
-| WebDAV       | URL + credentials    | Full support |
+| Provider     | Auth Method                     | Status                |
+| ------------ | ------------------------------- | --------------------- |
+| Google Drive | OAuth2 implicit flow            | Full support          |
+| MEGA         | Email/password (+ optional 2FA) | Full support          |
+| WebDAV       | URL + credentials               | Full support          |
+| OneDrive     | MSAL (OAuth2 auth code + PKCE)  | Full support          |
+| Local Folder | Directory picker (no account)   | Desktop Chromium only |
 
 **Architecture:**
 

README.md

@@ -31,9 +31,10 @@ https://github.com/Gnathonic/mokuro-reader/assets/39561296/45a214a8-3f69-461c-87
 ### ☁️ Cloud Integration
 
 - **Google Drive Sync** - Full integration with automatic token refresh and reconnection
-- **MEGA Support** - Alternative cloud storage option
+- **MEGA, OneDrive & WebDAV Support** - More cloud options, including self-hosted WebDAV servers
+- **Local Folder Access** - Bulk import/export through a folder on your device (desktop Chromium)
 - **Automatic Progress Sync** - Seamlessly sync read progress and stats across devices
-- **Easy Backup** - Backup your entire library to Google Drive, MEGA, or WebDAV
+- **Easy Backup** - Backup your entire library to any connected provider
 - **Smart Placeholder System** - Backed up volumes appear as downloadable placeholders in your catalog
 - **One-Tap Downloads** - Download cloud volumes directly from your catalog on your other devices
 - **Cross-Device Continuity** - Pick up exactly where you left off on any device
@@ -119,7 +120,7 @@ pip install mokuro
 
 ### Cloud Sync Setup
 
-Connect to **Google Drive**, **MEGA**, or **WebDAV** from the Cloud page in settings. All three providers support:
+Connect to **Google Drive**, **MEGA**, **OneDrive**, or **WebDAV** from the Cloud page in settings (a **Local Folder** option is also available on desktop Chromium browsers). All providers support:
 
 - Automatic progress and profile sync across devices
 - Volume backup with one-tap restore on other devices

docs/superpowers/specs/2026-07-09-per-line-yomitan-continuity-design.md

@@ -0,0 +1,136 @@
+# Per-line layout: restore Yomitan/Migaku text continuity (issue #254)
+
+## Problem
+
+Issue #254: since v1.7.5, Yomitan can no longer scan a word that spans two
+lines of an OCR text box, and mining to Anki captures only one line in the
+Sentence field. The same class of bug was previously #124.
+
+### Root cause
+
+The per-line auto layout shipped in v1.7.5 (PR #243) renders each OCR line as
+its own `position: absolute` span (`.positionedLine` in `TextBoxes.svelte`).
+
+Yomitan's DOM text scanner (`ext/js/dom/dom-text-scanner.js#getElementSeekInfo`)
+decides line/sentence boundaries **entirely from computed CSS + DOM traversal
+order — never from geometry** — and it inspects `style.position` _before_
+`display`:
+
+```js
+switch (style.position) {
+  case 'absolute':
+  case 'fixed':
+  case 'sticky':
+    newlines = 2; // hard paragraph break
+}
+```
+
+So every per-line span boundary injects `\n\n`. That newline (a) caps the
+forward term match, so a word split across lines can't be matched, and (b)
+terminates sentence extraction at the first line (`sentenceTerminateAtNewlines`,
+default on). These are exactly the two reported symptoms.
+
+Two facts established from Yomitan source that shape the fix:
+
+- The `.textBox` `::after { content: '\A' }` "continuity trick" never affected
+  Yomitan. Yomitan walks only real text nodes and ignores generated content;
+  the `\A` is purely the human-visible newline in a revealed box. Legacy auto
+  mode stayed continuous because its line spans were plain `display: inline`
+  (no `position`), so Yomitan read them as one run.
+- The **block-level** `position: absolute` on `.textBox` (one per OCR block) is
+  correct and must stay: it makes separate speech bubbles separate sentences.
+  The regression is the _second_, per-line layer of `absolute` inside the block.
+
+`inline-block`, `transform`, and `position: relative` are all confirmed against
+Yomitan source to keep text continuous (`inline-block` truncates to `inline` in
+`doesCSSDisplayChangeLayout`; `transform` is never read; `relative` is not in
+the `position` switch).
+
+## Goal
+
+Keep the per-line placement improvement (each line rendered at its detected
+`lines_coords` quad with a geometry-fitted font size, the no-overlap invariant,
+per-line sizing) **and** restore Yomitan/Migaku continuity within a block.
+
+## Approach — transform-repositioned inline lines
+
+Stop giving line spans `position: absolute`. Render each line as
+`display: inline-block` in normal flow, then snap it onto its quad with a
+per-line `transform: translate(dx, dy)` computed from a measured natural
+position. Exactly one `position: absolute` per block (`.textBox`) remains.
+
+There is no way to get exact placement _and_ inline continuity without
+measuring: inline elements inherently advance the flow, and every zero-advance
+trick (absolute, float) re-blockifies and re-breaks Yomitan. Measurement is the
+price of keeping both, and it has direct precedent in the reader's zoom
+architecture (measurement-based correction).
+
+### DOM / CSS changes (`TextBoxes.svelte` only)
+
+- `.positionedLine`: drop `position: absolute` → `display: inline-block`. The
+  `left`/`top` inline styles are replaced by `transform: translate(dx, dy)`
+  set by the measurement action (below).
+- Wrapped lines keep explicit `width`/`height` + `white-space: normal`
+  (inline-block honors both).
+- Drop the `::after { content: '\A' }` rule in per-line mode — each line is now
+  positioned explicitly, so the visible newline is unnecessary, and Yomitan
+  never saw it anyway.
+- `layoutLines` and `LineLayout { left, top, fontSize, wrap, width, height,
+hidden }` are **unchanged**. `left`/`top` are already the target quad origin
+  relative to the block box. `enforceNoOverlap`, block dedupe, and per-line
+  sizing are all untouched.
+
+### Measurement mechanism (the new part)
+
+A Svelte action on `.textBox` performs a **batched read-then-write** pass:
+
+1. Read every line span's natural in-flow origin (`offsetLeft`/`offsetTop`
+   relative to `.textBox`, which is the offsetParent because the box is
+   `position: absolute`). These are layout px = image px and **zoom-invariant**
+   — the reader applies zoom as an ancestor transform, so the box's internal
+   coordinate space stays in image px; no dividing by scale.
+2. Apply every transform: `translate(LineLayout.left − offsetLeft,
+LineLayout.top − offsetTop)`.
+
+Reading all before writing avoids layout thrash and is correct: transforms are
+paint-only and do not re-layout, so natural positions are stable once read.
+
+**When it runs:** on mount when the box has layout (`displayOCR` on), re-run if
+the box toggles out of `display:none`. It runs while the box is still
+`visibility:hidden`, so glyphs are already on their quads before hover reveals
+them (no visible jump). Reveal is also when Yomitan needs hit-testable glyphs,
+and `transform` participates in hit-testing, so `caretRangeFromPoint` lands on
+the correct glyph.
+
+### Edge cases
+
+- Hidden lines (intra-block overlap dupes) stay omitted from the DOM; their text
+  is subsumed by a kept line, so continuity is unaffected.
+- Interleaved split-ruby DOM order is a pre-existing data-order quirk (identical
+  to legacy) — out of scope.
+- `lineLayouts === null` (pre-`lines_coords` / image-only imports) → unchanged
+  legacy hover-fit path.
+- `offsetLeft/Top` round to integer px. If that proves visibly coarser than the
+  current fractional placement, fall back to `getBoundingClientRect()` ÷
+  measured zoom scale. Decide empirically during verification.
+
+## Testing / verification
+
+- jsdom has no real layout (`offsetLeft`/`getBoundingClientRect` return 0), so
+  the measurement itself can't be unit-tested there.
+- Regression guard (cheap): assert per-line spans are **not**
+  `position: absolute`.
+- Playwright (real browser layout): each line's painted rect lands on its quad;
+  no rendered rects overlap.
+- Acceptance test (real Yomitan): hover a word split across two lines → it
+  scans; mine to Anki → Sentence field contains the whole block. Run via the
+  `verify` skill / browser automation with Yomitan installed before declaring
+  the issue fixed.
+
+## Scope
+
+- `src/lib/components/Reader/TextBoxes.svelte`: per-line render + new
+  measurement action + CSS.
+- New/updated tests as above.
+- The pure `line-coords-layout.ts` module is untouched.
+- Branch: `fix/254-yomitan-line-continuity` off `develop`.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mokuro-reader",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "private": true,
   "scripts": {
     "dev": "vite dev",

package.json

@@ -342,6 +342,64 @@
     };
   }
 
+  // Auto (per-line) mode: each line renders as an inline-block kept in normal
+  // flow, so DOM text scanners (Yomitan/Migaku) read the whole block as one
+  // continuous run — a per-line `position: absolute` would inject a hard break
+  // at every line and split words/sentences across lines (issue #254). We then
+  // translate each line onto its lines_coords quad. Measurement is required:
+  // an inline element's natural flow position is only knowable after layout.
+  //
+  // offsetLeft/offsetTop are measured against the .textBox (the span's
+  // offsetParent, since the box is position:absolute) and are in image px —
+  // zoom is applied as an ancestor transform, so this coordinate space is
+  // zoom-invariant. Both offsetLeft and the target `left` reference the box's
+  // padding edge, so `target - offsetLeft` is the exact translate.
+  function positionPerLine(container: HTMLDivElement, _signature: string) {
+    let raf = 0;
+
+    const apply = () => {
+      const spans = container.querySelectorAll<HTMLElement>('.positionedLine');
+      if (spans.length === 0) return;
+      // display:none box (OCR hidden) → no offsetParent; measurement would read
+      // 0. Skip and re-run on reveal (mouseenter/touchstart) or update.
+      if (spans[0].offsetParent === null) return;
+
+      // Read every natural origin first (one layout), then write every
+      // transform (compositor-only, no reflow) — avoids layout thrash.
+      const naturals: Array<[number, number]> = [];
+      for (const span of spans) naturals.push([span.offsetLeft, span.offsetTop]);
+
+      spans.forEach((span, i) => {
+        const targetLeft = Number(span.dataset.targetLeft);
+        const targetTop = Number(span.dataset.targetTop);
+        if (!Number.isFinite(targetLeft) || !Number.isFinite(targetTop)) return;
+        span.style.transform = `translate(${targetLeft - naturals[i][0]}px, ${targetTop - naturals[i][1]}px)`;
+      });
+    };
+
+    const schedule = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(apply);
+    };
+
+    schedule();
+    // Fonts change glyph advance → re-measure once the real font is ready.
+    document.fonts?.ready?.then(schedule);
+    // Box may have been display:none at mount; catch first reveal.
+    container.addEventListener('mouseenter', schedule);
+    container.addEventListener('touchstart', schedule, { passive: true });
+
+    return {
+      // _signature changes on displayOCR toggle or font-size setting change.
+      update: schedule,
+      destroy() {
+        cancelAnimationFrame(raf);
+        container.removeEventListener('mouseenter', schedule);
+        container.removeEventListener('touchstart', schedule);
+      }
+    };
+  }
+
   function getImageUrlFromElement(element: HTMLElement): string | null {
     // Traverse up to find the MangaPage div with background-image
     let current: HTMLElement | null = element;
@@ -555,6 +613,7 @@
   {@const usePerLine = lineLayouts !== null}
   <div
     use:handleTextBoxHover={[index, fontSize]}
+    use:positionPerLine={`${display}|${$settings.fontSize}`}
     class="textBox"
     class:originalMode={isOriginalMode}
     class:perLine={usePerLine}
@@ -582,8 +641,8 @@
         {#each lines as line, lineIndex}{#if !lineLayouts[lineIndex].hidden}<span
               class="ocr-line positionedLine"
               class:wrappedLine={lineLayouts[lineIndex].wrap}
-              style:left={`${lineLayouts[lineIndex].left}px`}
-              style:top={`${lineLayouts[lineIndex].top}px`}
+              data-target-left={lineLayouts[lineIndex].left}
+              data-target-top={lineLayouts[lineIndex].top}
               style:width={lineLayouts[lineIndex].wrap
                 ? `${lineLayouts[lineIndex].width}px`
                 : undefined}
@@ -668,15 +727,19 @@
     white-space: nowrap;
   }
 
-  /* Original mode with lines_coords: each line is placed at its detected quad
-     with a geometry-derived font size. line-height 1 keeps the column/row no
-     thicker than the font size; letter-spacing 0 because the print's tracking
-     is already baked into the quad length the size was fitted to. */
+  /* Auto mode with lines_coords: each line is placed at its detected quad with
+     a geometry-derived font size. The line stays inline-block IN NORMAL FLOW
+     (not position:absolute) so DOM text scanners read the block as one
+     continuous run (#254); a measurement action then translates it onto the
+     quad. line-height 1 keeps the column/row no thicker than the font size;
+     letter-spacing 0 because the print's tracking is already baked into the
+     quad length the size was fitted to. */
   .textBox.perLine .ocr-line.positionedLine {
-    position: absolute;
+    display: inline-block;
     line-height: 1;
     letter-spacing: 0;
     white-space: nowrap;
+    /* transform (translate onto the quad) is set by positionPerLine */
   }
 
   /* A quad that captured multiple print columns (base text + furigana):
@@ -687,10 +750,12 @@
     line-break: anywhere;
   }
 
-  /* Use CSS-generated newline instead of <br/> so DOM walkers
-     (Migaku/Yomitan) see one continuous text node per textbox
-     and don't treat line breaks as sentence boundaries. */
-  .textBox .ocr-line:not(:last-child)::after {
+  /* Legacy/manual modes: use a CSS-generated newline instead of <br/> so DOM
+     walkers (Migaku/Yomitan) see one continuous text run per textbox and don't
+     treat line breaks as sentence boundaries. Per-line (auto) mode positions
+     each line explicitly and needs no visible newline; the generated content
+     was never seen by Yomitan anyway. */
+  .textBox:not(.perLine) .ocr-line:not(:last-child)::after {
     content: '\A';
     white-space: pre;
   }