feat(reader): webtoon reading mode + brightness/contrast/night filters

Phase 4 of the reader redesign (foliate-js ea268df):

- Webtoon mode for comics: continuous vertical scroll of all pages
  (900px centered column on wide screens), lazy-loaded with a 150%
  IntersectionObserver margin, far pages unloaded to bound memory
  with stable aspect-ratio placeholders so the scrollbar never jumps.
  Chosen per book (Paged | Webtoon segmented control in Settings →
  Layout & Display; stored in localStorage per media item since a
  webtoon title and a paged manga volume want different flows).
  Toggling reloads the reader — the renderer is chosen at open time —
  and progress restores from the saved page. Relocate events flow
  through the same pipeline, so the slider, progress saving, back
  stack, tap zones, and edge zones all work unchanged. Zoom/fit/
  magnifier/spread controls hide in webtoon (natural-width scroll).
- Display filters for fixed-layout: brightness (30-130%) and
  contrast (70-130%) sliders with live preview, plus Night Mode
  (invert) — also a quick row in the ⋯ tools menu. One --fx-filter
  CSS var drives everything: ::part(filter) on foliate-view iframes
  (forwarded via the new exportparts attribute) and the webtoon
  page images alike. Persisted as fx_brightness/fx_contrast/fx_invert
  (types + defaults both sides); Restore Defaults resets them.

web/src/reader/reader.ts

@@ -388,6 +388,11 @@ document.addEventListener("alpine:init", () => {
     zoomPercent: 100,
     isFixedLayout: false,
     isPDF: false,
+    isComic: false,
+    comicFlow: "paged" as string,
+    fxBrightness: 1 as number,
+    fxContrast: 1 as number,
+    fxInvert: false as boolean,
     interactionMode: "select" as string,
     magnifierEnabled: false,
     doublePageSpread: true as boolean,
@@ -564,6 +569,14 @@ document.addEventListener("alpine:init", () => {
     }) {
       this.mediaItemId = config.mediaItemId;
       this.bookmarkItems = config.bookmarks ?? [];
+      this.isComic = config.formatGroup === "comic_archive";
+      // Reading flow for comics is a per-book preference (a webtoon title
+      // vs. a paged manga volume); read before the renderer is chosen.
+      this.comicFlow =
+        localStorage.getItem(`bookhoard:comic-flow:${config.mediaItemId}`) ===
+        "webtoon"
+          ? "webtoon"
+          : "paged";
       this.settings = await loadSettings();
       if (this.settings) {
         this.progressMode = this.settings.progress_mode || "pages";
@@ -581,6 +594,9 @@ document.addEventListener("alpine:init", () => {
         if (mode === "pan" || mode === "text" || mode === "select") {
           this.interactionMode = mode;
         }
+        this.fxBrightness = this.settings.fx_brightness || 1;
+        this.fxContrast = this.settings.fx_contrast || 1;
+        this.fxInvert = this.settings.fx_invert ?? false;
         if (this.settings.reading_mode) {
           this.readingMode = this.settings.reading_mode;
         } else {
@@ -592,6 +608,7 @@ document.addEventListener("alpine:init", () => {
       const themeColors =
         this.readingMode === "dark" ? themeSet.dark : themeSet.light;
       viewport.style.backgroundColor = themeColors.bg;
+      this.applyFxFilter();
       this.view = document.getElementById("reader-view") as any;
       await loadFontBlobUrls();
       const resp = await fetch(config.fileUrl, {
@@ -602,6 +619,7 @@ document.addEventListener("alpine:init", () => {
       const file = new File([blob], fileName, { type: blob.type });
       await this.view.open(file, {
         pdf: {},
+        comic: { flow: this.comicFlow },
       });
       this.renderer = this.view.renderer;
       this.book = this.view.book;
@@ -1453,6 +1471,34 @@ document.addEventListener("alpine:init", () => {
       this.renderer.recenter?.();
       this.renderer.dragOffset = { x: 0, y: 0 };
     },
+    // ----- fixed-layout display filters -----
+    // One CSS var drives everything: ::part(filter) on the foliate-view
+    // iframes (comics/PDFs) and the webtoon page images alike.
+    applyFxFilter(save = false) {
+      const viewport = document.getElementById("reader-viewport");
+      if (!viewport) return;
+      const parts = [
+        `brightness(${this.fxBrightness})`,
+        `contrast(${this.fxContrast})`,
+      ];
+      if (this.fxInvert) parts.push("invert(1)");
+      viewport.style.setProperty("--fx-filter", parts.join(" "));
+      if (save) {
+        saveSettings({
+          fx_brightness: this.fxBrightness,
+          fx_contrast: this.fxContrast,
+          fx_invert: this.fxInvert,
+        });
+      }
+    },
+    // Reading flow is chosen before the renderer is created, so toggling
+    // reloads the reader (progress restores from the saved page).
+    setComicFlow(mode: string) {
+      if (mode !== "paged" && mode !== "webtoon") return;
+      if (mode === this.comicFlow) return;
+      localStorage.setItem(`bookhoard:comic-flow:${this.mediaItemId}`, mode);
+      window.location.reload();
+    },
     applyFitMode(mode: string) {
       if (!this.isFixedLayout || !this.renderer) return;
       if (mode === "fit-width" || mode === "fit-page") {
@@ -1919,6 +1965,10 @@ document.addEventListener("alpine:init", () => {
       this.applyChromeBehavior();
       this.interactionMode = "select";
       this.setInteractionMode("select");
+      this.fxBrightness = 1;
+      this.fxContrast = 1;
+      this.fxInvert = false;
+      this.applyFxFilter(true);
       this.applyTheme();
       this.applyFont();
     },

web/src/reader/settings-manager.ts

@@ -80,6 +80,9 @@ export function getDefaultSettings(): ReaderSettings {
     margin_width: 20,
     double_page_spread: true,
     pdf_interaction_mode: "select",
+    fx_brightness: 1,
+    fx_contrast: 1,
+    fx_invert: false,
     tap_zones_enabled: true,
     reading_direction: "ltr",
     hardware_acceleration: true,

web/src/types/reader.d.ts

@@ -209,6 +209,9 @@ interface ReaderSettings {
 
   double_page_spread: boolean;
   pdf_interaction_mode: "select" | "pan" | "text";
+  fx_brightness: number;
+  fx_contrast: number;
+  fx_invert: boolean;
   tap_zones_enabled: boolean;
   reading_direction: "ltr" | "rtl" | "vertical";
   reading_mode: "dark" | "light";

web/static/input.css

@@ -1029,6 +1029,12 @@
     background-color: color-mix(in srgb, currentColor 6%, transparent);
   }
 
+  /* Fixed-layout display filters: one var drives the iframe ::part(filter)
+     (comics/PDFs via foliate-view exportparts) and the webtoon page images. */
+  #reader-view::part(filter) {
+    filter: var(--fx-filter, none);
+  }
+
   /* Page thumbnails grid (contents drawer, fixed-layout) */
   .reader-thumb-grid {
     display: grid;