@aphrody/m3-reader 3.3.3

package/dist/index.js

@@ -0,0 +1,1478 @@
+'use client';
+// packages/m3-reader/src/MangaReader.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useId,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  BookOpen,
+  ChevronLeft,
+  ChevronRight,
+  Columns2,
+  Maximize2,
+  Minimize2,
+  MoveHorizontal,
+  ScrollText,
+  Square
+} from "lucide-react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Keyboard, Mousewheel, Zoom } from "swiper/modules";
+import"swiper/css";
+import"swiper/css/zoom";
+
+// packages/m3-reader/src/use-reader-core.ts
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+"use client";
+var SHOW_STRIP_MAX = 40;
+function useFullscreen(containerRef) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [fullscreenError, setFullscreenError] = useState(null);
+  const mounted = useRef(false);
+  const operation = useRef(0);
+  const toggleFullscreen = useCallback(async () => {
+    const el = containerRef.current;
+    if (!el)
+      return false;
+    const doc = el.ownerDocument;
+    const current = ++operation.current;
+    if (mounted.current)
+      setFullscreenError(null);
+    try {
+      if (doc.fullscreenElement === el) {
+        if (typeof doc.exitFullscreen !== "function")
+          throw new Error("Fullscreen exit is unavailable");
+        await doc.exitFullscreen();
+      } else {
+        if (typeof el.requestFullscreen !== "function")
+          throw new Error("Fullscreen is unavailable");
+        await el.requestFullscreen();
+      }
+      if (mounted.current && current === operation.current) {
+        setIsFullscreen(Boolean(containerRef.current && doc.fullscreenElement === containerRef.current));
+      }
+      return true;
+    } catch (reason) {
+      if (mounted.current && current === operation.current) {
+        setFullscreenError(reason instanceof Error ? reason : new Error(String(reason)));
+      }
+      return false;
+    }
+  }, [containerRef]);
+  useEffect(() => {
+    const doc = containerRef.current?.ownerDocument;
+    if (!doc)
+      return;
+    mounted.current = true;
+    const onChange = () => setIsFullscreen(Boolean(containerRef.current && doc.fullscreenElement === containerRef.current));
+    onChange();
+    doc.addEventListener("fullscreenchange", onChange);
+    return () => {
+      mounted.current = false;
+      operation.current++;
+      doc.removeEventListener("fullscreenchange", onChange);
+    };
+  }, [containerRef]);
+  return { isFullscreen, fullscreenError, toggleFullscreen };
+}
+function useSwiperSync(setCurrent) {
+  const swiperRef = useRef(null);
+  const handleSwiper = useCallback((sw) => {
+    swiperRef.current = sw;
+    setCurrent(sw.realIndex ?? sw.activeIndex ?? 0);
+  }, [setCurrent]);
+  const handleSlideChange = useCallback((sw) => setCurrent(sw.realIndex ?? sw.activeIndex ?? 0), [setCurrent]);
+  return { swiperRef, handleSwiper, handleSlideChange };
+}
+function useVerticalScrollSync(mode, scrollParentRef, virtualizer, setCurrent) {
+  useEffect(() => {
+    if (mode !== "vertical")
+      return;
+    const el = scrollParentRef.current;
+    if (!el)
+      return;
+    const onScroll = () => {
+      const mid = el.scrollTop + el.clientHeight / 2;
+      const item = virtualizer.getVirtualItems().find((vi) => vi.start <= mid && vi.end >= mid);
+      if (item)
+        setCurrent(item.index);
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    onScroll();
+    return () => el.removeEventListener("scroll", onScroll);
+  }, [mode, scrollParentRef, virtualizer, setCurrent]);
+}
+var virtualRowStyle = (start) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  transform: `translateY(${start}px)`
+});
+
+// packages/m3-reader/src/MangaReader.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+"use client";
+var LG_BREAKPOINT = 1024;
+function useIsLargeScreen() {
+  const [isLarge, setIsLarge] = useState2(false);
+  useEffect2(() => {
+    const mql = window.matchMedia(`(min-width: ${LG_BREAKPOINT}px)`);
+    const sync = () => setIsLarge(mql.matches);
+    sync();
+    mql.addEventListener("change", sync);
+    return () => mql.removeEventListener("change", sync);
+  }, []);
+  return isLarge;
+}
+function MangaReader({
+  pages,
+  title,
+  direction = "rtl",
+  prevHref = null,
+  nextHref = null,
+  prevPages = null,
+  nextPages = null,
+  initialPage = 1,
+  onPageChange,
+  apiPageHref,
+  resolveAssetUrl = (path) => path,
+  resolveMirrorUrl,
+  renderChapterLink
+}) {
+  const containerRef = useRef2(null);
+  const [mode, setMode] = useState2("paged");
+  const [dir, setDir] = useState2(direction);
+  const [spread, setSpread] = useState2(false);
+  const [current, setCurrent] = useState2(() => Math.max(0, Math.min(pages.length - 1, initialPage - 1)));
+  const { isFullscreen, toggleFullscreen } = useFullscreen(containerRef);
+  const { swiperRef, handleSwiper, handleSlideChange } = useSwiperSync(setCurrent);
+  const isLarge = useIsLargeScreen();
+  const useSpread = spread && isLarge && mode === "paged";
+  const activeThumbRef = useRef2(null);
+  useEffect2(() => {
+    if (mode === "paged" && activeThumbRef.current) {
+      activeThumbRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center"
+      });
+    }
+  }, [current, mode]);
+  const urls = useMemo(() => pages.map(resolveAssetUrl), [pages, resolveAssetUrl]);
+  const total = urls.length;
+  const baseId = useId();
+  useEffect2(() => {
+    if (urls.length === 0)
+      return;
+    const indices = [current, current - 1, current + 1, current + 2, current + 3];
+    for (const idx of indices) {
+      if (idx >= 0 && idx < urls.length) {
+        const img = new Image;
+        img.src = urls[idx];
+      }
+    }
+    if (nextPages && nextPages.length > 0) {
+      nextPages.slice(0, 3).forEach((page) => {
+        const img = new Image;
+        img.src = resolveAssetUrl(page);
+      });
+    }
+    if (prevPages && prevPages.length > 0) {
+      prevPages.slice(-3).forEach((page) => {
+        const img = new Image;
+        img.src = resolveAssetUrl(page);
+      });
+    }
+  }, [current, urls, prevPages, nextPages, resolveAssetUrl]);
+  const handleImageError = useCallback2((e) => {
+    const target = e.currentTarget;
+    if (target.dataset.fallbackApplied)
+      return;
+    target.dataset.fallbackApplied = "true";
+    try {
+      const mirror = resolveMirrorUrl?.(target.src);
+      if (mirror)
+        target.src = mirror;
+    } catch {}
+  }, [resolveMirrorUrl]);
+  const scrollParentRef = useRef2(null);
+  const virtualizer = useVirtualizer({
+    count: total,
+    getScrollElement: () => scrollParentRef.current,
+    estimateSize: () => typeof window === "undefined" ? 900 : window.innerHeight,
+    overscan: 3
+  });
+  useVerticalScrollSync(mode, scrollParentRef, virtualizer, setCurrent);
+  useEffect2(() => {
+    onPageChange?.(current + 1);
+  }, [current, onPageChange]);
+  const apiPlanche = apiPageHref?.(current + 1) ?? null;
+  const goPrevPage = useCallback2(() => {
+    if (mode === "paged")
+      swiperRef.current?.slidePrev();
+    else
+      virtualizer.scrollToIndex(Math.max(0, current - 1), { align: "start" });
+  }, [mode, current, virtualizer]);
+  const goNextPage = useCallback2(() => {
+    if (mode === "paged")
+      swiperRef.current?.slideNext();
+    else
+      virtualizer.scrollToIndex(Math.min(total - 1, current + 1), {
+        align: "start"
+      });
+  }, [mode, current, total, virtualizer]);
+  const counter = total ? `${Math.min(current + 1, total)} / ${total}` : "0 / 0";
+  return /* @__PURE__ */ jsxs("div", {
+    ref: containerRef,
+    className: "m3-reader m3-reader-container m3-reader-scroll flex h-[85vh] min-h-[460px] w-full min-w-0 max-w-full flex-col overflow-hidden rounded-xl bg-[var(--reader-surface)] [&:fullscreen]:h-screen [&:fullscreen]:min-h-screen [&:fullscreen]:rounded-none",
+    "data-manga-reader": true,
+    "data-m3-component": "MangaReader",
+    "data-testid": "manga-reader",
+    role: "region",
+    "aria-label": title,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "m3-reader-hud z-10 flex flex-wrap items-center justify-between gap-2 px-3.5 py-2.5",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: "flex items-center gap-2.5 min-w-0",
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                className: "min-w-0 max-w-[32ch] md:max-w-[45ch] truncate font-sans text-[18px] font-extrabold uppercase tracking-wide text-[var(--reader-on-surface)] drop-shadow-[1px_1px_0px_#000]",
+                children: title
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: "m3-reader-badge bg-[var(--reader-accent)] text-[var(--reader-on-accent)] px-2 py-0.5 text-[18px] font-black",
+                children: /* @__PURE__ */ jsx("span", {
+                  children: counter
+                })
+              }),
+              apiPlanche && /* @__PURE__ */ jsx("a", {
+                href: apiPlanche,
+                className: "hidden shrink-0 rounded border border-white/15 px-1.5 py-0.5 font-mono text-[18px] font-bold uppercase tracking-wider text-[var(--reader-on-surface)]/50 transition-colors hover:border-[var(--reader-accent)] hover:text-[var(--reader-accent)] sm:inline-block",
+                title: "Cette planche en JSON (image + transcription)",
+                children: "API"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "flex flex-wrap items-center gap-1.5 ml-auto",
+            children: [
+              /* @__PURE__ */ jsxs("button", {
+                type: "button",
+                className: mode === "paged" ? "m3-reader-btn-active" : "m3-reader-btn",
+                onClick: () => setMode("paged"),
+                "aria-pressed": mode === "paged",
+                "aria-label": "Mode de lecture paginé",
+                title: "Mode paginé",
+                children: [
+                  /* @__PURE__ */ jsx(BookOpen, {
+                    size: 13,
+                    "aria-hidden": true
+                  }),
+                  " Paginé"
+                ]
+              }),
+              /* @__PURE__ */ jsxs("button", {
+                type: "button",
+                className: mode === "vertical" ? "m3-reader-btn-active" : "m3-reader-btn",
+                onClick: () => setMode("vertical"),
+                "aria-pressed": mode === "vertical",
+                "aria-label": "Mode de lecture vertical (webtoon)",
+                title: "Mode vertical (webtoon)",
+                children: [
+                  /* @__PURE__ */ jsx(ScrollText, {
+                    size: 13,
+                    "aria-hidden": true
+                  }),
+                  " Défilement"
+                ]
+              }),
+              /* @__PURE__ */ jsxs("button", {
+                type: "button",
+                className: dir === "rtl" ? "m3-reader-btn-active" : "m3-reader-btn",
+                onClick: () => setDir((d) => d === "rtl" ? "ltr" : "rtl"),
+                "aria-label": dir === "rtl" ? "Sens de lecture manga (droite vers gauche)" : "Sens de lecture BD (gauche vers droite)",
+                title: dir === "rtl" ? "Sens manga (droite→gauche)" : "Sens BD (gauche→droite)",
+                children: [
+                  /* @__PURE__ */ jsx(MoveHorizontal, {
+                    size: 13,
+                    "aria-hidden": true
+                  }),
+                  dir === "rtl" ? "RTL" : "LTR"
+                ]
+              }),
+              /* @__PURE__ */ jsxs("button", {
+                type: "button",
+                className: useSpread ? "m3-reader-btn-active" : "m3-reader-btn",
+                onClick: () => setSpread((s) => !s),
+                disabled: mode !== "paged" || !isLarge,
+                "aria-pressed": useSpread,
+                "aria-label": "Affichage double-page (grand écran)",
+                title: "Double-page (grand écran)",
+                children: [
+                  useSpread ? /* @__PURE__ */ jsx(Columns2, {
+                    size: 13,
+                    "aria-hidden": true
+                  }) : /* @__PURE__ */ jsx(Square, {
+                    size: 13,
+                    "aria-hidden": true
+                  }),
+                  "Double"
+                ]
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                className: "m3-reader-btn",
+                onClick: toggleFullscreen,
+                "aria-label": isFullscreen ? "Quitter le plein écran" : "Activer le plein écran",
+                title: isFullscreen ? "Quitter le plein écran" : "Plein écran",
+                children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, {
+                  size: 13,
+                  "aria-hidden": true
+                }) : /* @__PURE__ */ jsx(Maximize2, {
+                  size: 13,
+                  "aria-hidden": true
+                })
+              }),
+              prevHref ? renderChapterLink ? renderChapterLink({
+                href: prevHref,
+                children: /* @__PURE__ */ jsxs(Fragment, {
+                  children: [
+                    /* @__PURE__ */ jsx(ChevronLeft, {
+                      size: 13,
+                      "aria-hidden": true
+                    }),
+                    " Préc."
+                  ]
+                }),
+                className: "m3-reader-btn",
+                ariaLabel: "Chapitre précédent"
+              }) : /* @__PURE__ */ jsxs("a", {
+                href: prevHref,
+                className: "m3-reader-btn",
+                "aria-label": "Chapitre précédent",
+                title: "Chapitre précédent",
+                children: [
+                  /* @__PURE__ */ jsx(ChevronLeft, {
+                    size: 13,
+                    "aria-hidden": true
+                  }),
+                  " Préc."
+                ]
+              }) : /* @__PURE__ */ jsxs("span", {
+                className: "m3-reader-btn pointer-events-none opacity-40",
+                children: [
+                  /* @__PURE__ */ jsx(ChevronLeft, {
+                    size: 13,
+                    "aria-hidden": true
+                  }),
+                  " Préc."
+                ]
+              }),
+              nextHref ? renderChapterLink ? renderChapterLink({
+                href: nextHref,
+                children: /* @__PURE__ */ jsxs(Fragment, {
+                  children: [
+                    "Suiv. ",
+                    /* @__PURE__ */ jsx(ChevronRight, {
+                      size: 13,
+                      "aria-hidden": true
+                    })
+                  ]
+                }),
+                className: "m3-reader-btn",
+                ariaLabel: "Chapitre suivant"
+              }) : /* @__PURE__ */ jsxs("a", {
+                href: nextHref,
+                className: "m3-reader-btn",
+                "aria-label": "Chapitre suivant",
+                title: "Chapitre suivant",
+                children: [
+                  "Suiv. ",
+                  /* @__PURE__ */ jsx(ChevronRight, {
+                    size: 13,
+                    "aria-hidden": true
+                  })
+                ]
+              }) : /* @__PURE__ */ jsxs("span", {
+                className: "m3-reader-btn pointer-events-none opacity-40",
+                children: [
+                  "Suiv. ",
+                  /* @__PURE__ */ jsx(ChevronRight, {
+                    size: 13,
+                    "aria-hidden": true
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "relative min-h-0 min-w-0 flex-1 overflow-hidden bg-[var(--reader-surface)]",
+        children: total === 0 ? /* @__PURE__ */ jsx("div", {
+          className: "flex h-full items-center justify-center text-[18px] text-[var(--reader-on-surface)]",
+          children: "Aucune planche disponible."
+        }) : mode === "paged" ? /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx(Swiper, {
+              initialSlide: current,
+              dir,
+              modules: [Keyboard, Zoom, Mousewheel],
+              className: "h-full w-full max-w-full",
+              slidesPerView: useSpread ? 2 : 1,
+              spaceBetween: useSpread ? 8 : 0,
+              keyboard: { enabled: true },
+              mousewheel: { forceToAxis: true },
+              zoom: { maxRatio: 3, toggle: true },
+              onSwiper: handleSwiper,
+              onSlideChange: handleSlideChange,
+              children: urls.map((url, i) => /* @__PURE__ */ jsx(SwiperSlide, {
+                zoom: true,
+                className: "flex items-center justify-center",
+                children: /* @__PURE__ */ jsx("div", {
+                  className: "swiper-zoom-container flex h-full w-full max-w-full items-center justify-center",
+                  children: /* @__PURE__ */ jsx("img", {
+                    src: url,
+                    alt: `${title} — page ${i + 1}`,
+                    loading: Math.abs(i - current) <= 1 ? "eager" : "lazy",
+                    draggable: false,
+                    className: "max-h-full max-w-full object-contain pointer-events-none select-none",
+                    onError: handleImageError
+                  })
+                })
+              }, url + i))
+            }, `${dir}-${useSpread ? "spread" : "single"}`),
+            /* @__PURE__ */ jsx("button", {
+              type: "button",
+              "aria-label": "Page précédente",
+              onClick: goPrevPage,
+              className: "absolute top-1/2 left-3 z-10 -translate-y-1/2 rounded-lg border-2 border-[var(--reader-outline)] bg-[var(--reader-surface)]/85 p-2.5 text-[var(--reader-accent)] shadow-[3px_3px_0px_#000] transition-all hover:bg-[var(--reader-accent)] hover:text-[var(--reader-on-accent)] hover:scale-105 active:translate-y-[calc(-50%+1px)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--reader-accent)]",
+              children: dir === "rtl" ? /* @__PURE__ */ jsx(ChevronRight, {
+                size: 22,
+                "aria-hidden": true
+              }) : /* @__PURE__ */ jsx(ChevronLeft, {
+                size: 22,
+                "aria-hidden": true
+              })
+            }),
+            /* @__PURE__ */ jsx("button", {
+              type: "button",
+              "aria-label": "Page suivante",
+              onClick: goNextPage,
+              className: "absolute top-1/2 right-3 z-10 -translate-y-1/2 rounded-lg border-2 border-[var(--reader-outline)] bg-[var(--reader-surface)]/85 p-2.5 text-[var(--reader-accent)] shadow-[3px_3px_0px_#000] transition-all hover:bg-[var(--reader-accent)] hover:text-[var(--reader-on-accent)] hover:scale-105 active:translate-y-[calc(-50%+1px)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--reader-accent)]",
+              children: dir === "rtl" ? /* @__PURE__ */ jsx(ChevronLeft, {
+                size: 22,
+                "aria-hidden": true
+              }) : /* @__PURE__ */ jsx(ChevronRight, {
+                size: 22,
+                "aria-hidden": true
+              })
+            })
+          ]
+        }) : /* @__PURE__ */ jsx("div", {
+          ref: scrollParentRef,
+          tabIndex: 0,
+          className: "h-full w-full overflow-y-auto overflow-x-hidden m3-reader-scroll focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--reader-accent)]",
+          "aria-label": `${title} — lecture verticale`,
+          children: /* @__PURE__ */ jsx("div", {
+            style: {
+              height: virtualizer.getTotalSize(),
+              width: "100%",
+              position: "relative"
+            },
+            children: virtualizer.getVirtualItems().map((vi) => /* @__PURE__ */ jsx("div", {
+              "data-index": vi.index,
+              ref: virtualizer.measureElement,
+              style: virtualRowStyle(vi.start),
+              className: "flex justify-center py-2",
+              children: /* @__PURE__ */ jsx("img", {
+                src: urls[vi.index],
+                alt: `${title} — page ${vi.index + 1}`,
+                loading: Math.abs(vi.index - current) <= 1 ? "eager" : "lazy",
+                draggable: false,
+                className: "h-auto w-full max-w-3xl object-contain border-y md:border-2 border-[var(--reader-outline)]/40 shadow-[0_4px_12px_rgba(0,0,0,0.8)]",
+                onError: handleImageError
+              })
+            }, `${baseId}-${vi.key}`))
+          })
+        })
+      }),
+      mode === "paged" && total > 0 && total <= SHOW_STRIP_MAX && /* @__PURE__ */ jsx("div", {
+        className: "z-10 w-full min-w-0 max-w-full bg-[var(--reader-surface)] border-t-2 border-[var(--reader-outline)] px-4 py-3 flex items-center overflow-x-auto m3-reader-scroll",
+        children: /* @__PURE__ */ jsx("div", {
+          className: "flex gap-2.5 min-w-max mx-auto px-2",
+          children: urls.map((url, idx) => /* @__PURE__ */ jsxs("button", {
+            ref: current === idx ? activeThumbRef : undefined,
+            type: "button",
+            onClick: () => {
+              setCurrent(idx);
+              swiperRef.current?.slideTo(idx);
+            },
+            className: `relative shrink-0 w-12 h-16 rounded-md overflow-hidden border-2 transition-all ${current === idx ? "border-[var(--reader-accent)] scale-105 shadow-[0_0_12px_var(--reader-accent)]" : "border-[var(--reader-outline)] shadow-[2px_2px_0px_#000] hover:border-white/50"}`,
+            children: [
+              /* @__PURE__ */ jsx("img", {
+                src: url,
+                alt: `Page ${idx + 1}`,
+                className: "w-full h-full object-cover select-none pointer-events-none",
+                loading: "lazy"
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: "absolute bottom-0 inset-x-0 bg-[var(--reader-surface)]/85 text-[18px] font-extrabold text-[var(--reader-on-surface)] text-center font-mono py-0.5 border-t border-[var(--reader-outline)]/60",
+                children: idx + 1
+              })
+            ]
+          }, url + "-thumb-" + idx))
+        })
+      }),
+      mode === "paged" && total > SHOW_STRIP_MAX && /* @__PURE__ */ jsxs("form", {
+        className: "z-10 flex items-center justify-center gap-3 border-t-2 border-[var(--reader-outline)] bg-[var(--reader-surface)] px-4 py-3",
+        onSubmit: (e) => {
+          e.preventDefault();
+          const field = e.currentTarget.elements.namedItem("goto");
+          const val = Number(field?.value);
+          if (!Number.isFinite(val))
+            return;
+          const i = Math.min(Math.max(val - 1, 0), total - 1);
+          setCurrent(i);
+          swiperRef.current?.slideTo(i);
+        },
+        children: [
+          /* @__PURE__ */ jsx("label", {
+            htmlFor: `${baseId}-goto`,
+            className: "text-[18px] font-black uppercase tracking-wider text-[var(--reader-on-surface)]",
+            children: "Aller à la planche"
+          }),
+          /* @__PURE__ */ jsx("input", {
+            id: `${baseId}-goto`,
+            name: "goto",
+            type: "number",
+            min: 1,
+            max: total,
+            defaultValue: current + 1,
+            className: "w-20 rounded-md border-2 border-[var(--reader-outline)] bg-[var(--reader-surface)] px-2.5 py-1 text-center text-[18px] font-extrabold tabular-nums text-[var(--reader-accent)] shadow-[2px_2px_0px_#000] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--reader-accent)]"
+          }, current),
+          /* @__PURE__ */ jsxs("span", {
+            className: "text-[18px] font-bold tabular-nums text-[var(--reader-on-surface)]/70",
+            children: [
+              "/ ",
+              total
+            ]
+          }),
+          /* @__PURE__ */ jsx("button", {
+            type: "submit",
+            className: "m3-reader-btn-active !py-1 !px-3.5",
+            children: "OK"
+          })
+        ]
+      })
+    ]
+  });
+}
+// packages/m3-reader/src/DatabookReader.tsx
+import { useCallback as useCallback3, useEffect as useEffect4, useId as useId2, useMemo as useMemo2, useRef as useRef4, useState as useState3 } from "react";
+import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
+
+// packages/m3-reader/src/use-focus-trap.ts
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+"use client";
+var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+var activeTraps = new WeakMap;
+function isTabbable(element) {
+  if (element.tabIndex < 0 || element.matches(":disabled, input[type='hidden']"))
+    return false;
+  if (element.closest("[hidden], [inert]"))
+    return false;
+  const view = element.ownerDocument.defaultView;
+  const visibility = view?.getComputedStyle(element).visibility;
+  if (visibility === "hidden" || visibility === "collapse")
+    return false;
+  for (let ancestor = element;ancestor; ancestor = ancestor.parentElement) {
+    if (view?.getComputedStyle(ancestor).display === "none")
+      return false;
+  }
+  return true;
+}
+function useFocusTrap(panelRef, active, onEscape) {
+  const onEscapeRef = useRef3(onEscape);
+  onEscapeRef.current = onEscape;
+  useEffect3(() => {
+    if (!active)
+      return;
+    const panel = panelRef.current;
+    if (!panel)
+      return;
+    const doc = panel.ownerDocument;
+    let state = activeTraps.get(doc);
+    if (!state) {
+      state = { stack: [], previousOverflow: doc.body.style.overflow };
+      activeTraps.set(doc, state);
+    }
+    const lease = {
+      panel,
+      previousFocused: doc.activeElement,
+      previousTrap: state.stack.at(-1)
+    };
+    state.stack.push(lease);
+    panelRef.current?.focus();
+    const onKey = (e) => {
+      if (state.stack.at(-1) !== lease)
+        return;
+      if (e.key === "Escape") {
+        onEscapeRef.current?.();
+        return;
+      }
+      if (e.key !== "Tab")
+        return;
+      const currentPanel = panelRef.current;
+      if (!currentPanel)
+        return;
+      const items = [...currentPanel.querySelectorAll(FOCUSABLE)].filter(isTabbable);
+      if (items.length === 0) {
+        e.preventDefault();
+        currentPanel.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const current = doc.activeElement;
+      if (!current || !items.includes(current)) {
+        e.preventDefault();
+        (e.shiftKey ? last : first).focus();
+      } else if (e.shiftKey && current === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && current === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    doc.addEventListener("keydown", onKey);
+    doc.body.style.overflow = "hidden";
+    return () => {
+      doc.removeEventListener("keydown", onKey);
+      const wasTop = state.stack.at(-1) === lease;
+      state.stack.splice(state.stack.indexOf(lease), 1);
+      for (const remaining of state.stack) {
+        if (remaining.previousTrap === lease) {
+          remaining.previousTrap = lease.previousTrap;
+          remaining.previousFocused = lease.previousFocused;
+        }
+      }
+      const top = state.stack.at(-1);
+      if (!top) {
+        doc.body.style.overflow = state.previousOverflow;
+        activeTraps.delete(doc);
+      }
+      if (wasTop) {
+        const previous = lease.previousFocused;
+        if (previous?.isConnected && (!top || top.panel.contains(previous)))
+          previous.focus();
+        else
+          top?.panel.focus();
+      }
+    };
+  }, [panelRef, active]);
+}
+
+// packages/m3-reader/src/DatabookReader.tsx
+import {
+  BookOpen as BookOpen2,
+  ChevronLeft as ChevronLeft2,
+  ChevronRight as ChevronRight2,
+  Maximize2 as Maximize22,
+  Minimize2 as Minimize22,
+  ScrollText as ScrollText2,
+  X,
+  ZoomIn
+} from "lucide-react";
+import { Swiper as Swiper2, SwiperSlide as SwiperSlide2 } from "swiper/react";
+import { Mousewheel as Mousewheel2, Virtual, Zoom as Zoom2 } from "swiper/modules";
+import"swiper/css";
+import"swiper/css/zoom";
+import"swiper/css/virtual";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+"use client";
+function pageNumber(p, fallback) {
+  const raw = p.number;
+  if (typeof raw === "number" && Number.isFinite(raw))
+    return Math.trunc(raw);
+  if (typeof raw === "string" && String(raw).trim() && Number.isFinite(Number(raw))) {
+    return Math.trunc(Number(raw));
+  }
+  return fallback;
+}
+function resolvePages(pages, resolveAssetUrl) {
+  const out = [];
+  for (let i = 0;i < pages.length; i++) {
+    const p = pages[i];
+    const img = typeof p.image === "string" && p.image.trim() ? p.image.trim() : null;
+    const text = typeof p.text === "string" && p.text.trim() ? p.text.trim() : null;
+    const aDuTexte = p.aDuTexte === true || text !== null;
+    if (!img && !aDuTexte)
+      continue;
+    out.push({
+      number: pageNumber(p, i + 1),
+      imageUrl: img ? resolveAssetUrl(img) : null,
+      text,
+      aDuTexte,
+      verifiee: p.verifiee === true
+    });
+  }
+  return out;
+}
+var FENETRE_TEXTE = 6;
+function useTextesPlanches(loadTranscriptions, items, current) {
+  const [charges, setCharges] = useState3(() => new Map);
+  const demandes = useRef4(new Set);
+  const manquants = useMemo2(() => {
+    if (!loadTranscriptions)
+      return [];
+    const de = Math.max(0, current - FENETRE_TEXTE);
+    const a = Math.min(items.length, current + FENETRE_TEXTE + 1);
+    const out = [];
+    for (let i = de;i < a; i++) {
+      const it = items[i];
+      if (!it || !it.aDuTexte || it.text !== null)
+        continue;
+      if (charges.has(it.number) || demandes.current.has(it.number))
+        continue;
+      out.push(it.number);
+    }
+    return out;
+  }, [loadTranscriptions, items, current, charges]);
+  useEffect4(() => {
+    if (manquants.length === 0)
+      return;
+    for (const n of manquants)
+      demandes.current.add(n);
+    const stop = new AbortController;
+    loadTranscriptions(manquants, stop.signal).then((textes) => ({ textes })).then((d) => {
+      const recus = Object.entries(d.textes ?? {});
+      if (recus.length === 0)
+        return;
+      setCharges((prec) => {
+        const suiv = new Map(prec);
+        for (const [n, t] of recus)
+          suiv.set(Number(n), t);
+        return suiv;
+      });
+      return;
+    }).catch(() => {});
+    return () => stop.abort();
+  }, [manquants, loadTranscriptions]);
+  return charges;
+}
+function DatabookReader({
+  pages,
+  title,
+  resolveAssetUrl = (path) => path,
+  imageSrc = (url) => url,
+  imageSrcSet = () => null,
+  loadTranscriptions,
+  renderTranscription,
+  preloadCount = 4
+}) {
+  const containerRef = useRef4(null);
+  const lightboxRef = useRef4(null);
+  const baseId = useId2();
+  const items = useMemo2(() => resolvePages(pages, resolveAssetUrl), [pages, resolveAssetUrl]);
+  const total = items.length;
+  const [mode, setMode] = useState3("vertical");
+  const [current, setCurrent] = useState3(0);
+  const { isFullscreen, toggleFullscreen } = useFullscreen(containerRef);
+  const { swiperRef, handleSwiper, handleSlideChange } = useSwiperSync(setCurrent);
+  const [lightbox, setLightbox] = useState3(false);
+  const textesCharges = useTextesPlanches(loadTranscriptions, items, current);
+  const texteDe = useCallback3((p) => p ? p.text ?? textesCharges.get(p.number) ?? null : null, [textesCharges]);
+  useFocusTrap(lightboxRef, lightbox, () => setLightbox(false));
+  useEffect4(() => {
+    if (current >= total && total > 0)
+      setCurrent(total - 1);
+    if (total === 0)
+      setCurrent(0);
+  }, [total, current]);
+  useEffect4(() => {
+    if (total === 0)
+      return;
+    for (const idx of [current - 1, current, current + 1, current + 2]) {
+      const url = items[idx]?.imageUrl;
+      if (!url)
+        continue;
+      const img = new Image;
+      img.src = url;
+    }
+  }, [current, items, total]);
+  const [fullscreenDispo, setFullscreenDispo] = useState3(false);
+  useEffect4(() => {
+    setFullscreenDispo(typeof document !== "undefined" && document.fullscreenEnabled && typeof containerRef.current?.requestFullscreen === "function");
+  }, []);
+  const scrollParentRef = useRef4(null);
+  const virtualizer = useVirtualizer2({
+    count: total,
+    getScrollElement: () => scrollParentRef.current,
+    estimateSize: () => typeof window === "undefined" ? 1100 : Math.round(window.innerHeight * 0.95),
+    overscan: Math.max(2, preloadCount)
+  });
+  const goTo = useCallback3((idx) => {
+    const i = Math.min(Math.max(idx, 0), Math.max(0, total - 1));
+    setCurrent(i);
+    if (mode === "paged")
+      swiperRef.current?.slideTo(i);
+    else
+      virtualizer.scrollToIndex(i, { align: "start" });
+  }, [mode, total, virtualizer]);
+  useVerticalScrollSync(mode, scrollParentRef, virtualizer, setCurrent);
+  useEffect4(() => {
+    const actif = lightbox || mode === "paged";
+    if (!actif)
+      return;
+    const onKey = (e) => {
+      const cible = e.target;
+      const tag = cible?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || cible?.isContentEditable)
+        return;
+      switch (e.key) {
+        case "Escape":
+          if (lightbox)
+            setLightbox(false);
+          return;
+        case "ArrowLeft":
+          e.preventDefault();
+          goTo(current - 1);
+          return;
+        case "ArrowRight":
+          e.preventDefault();
+          goTo(current + 1);
+          return;
+        case "Home":
+          e.preventDefault();
+          goTo(0);
+          return;
+        case "End":
+          e.preventDefault();
+          goTo(total - 1);
+          return;
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [lightbox, mode, total, current, goTo]);
+  const goPrevPage = useCallback3(() => {
+    goTo(current - 1);
+  }, [current, goTo]);
+  const goNextPage = useCallback3(() => {
+    goTo(current + 1);
+  }, [current, goTo]);
+  const openLightbox = useCallback3((idx) => {
+    if (typeof idx === "number")
+      setCurrent(idx);
+    const item = items[typeof idx === "number" ? idx : current];
+    if (item?.imageUrl)
+      setLightbox(true);
+  }, [items, current]);
+  const toucheRef = useRef4(null);
+  const onTouchStart = useCallback3((e) => {
+    const t = e.touches[0];
+    toucheRef.current = t ? { x: t.clientX, y: t.clientY } : null;
+  }, []);
+  const onTouchEnd = useCallback3((e) => {
+    const depart = toucheRef.current;
+    toucheRef.current = null;
+    const t = e.changedTouches[0];
+    if (!depart || !t)
+      return;
+    const dx = t.clientX - depart.x;
+    const dy = t.clientY - depart.y;
+    if (Math.abs(dx) < 48 || Math.abs(dx) < Math.abs(dy))
+      return;
+    goTo(dx < 0 ? current + 1 : current - 1);
+  }, [current, goTo]);
+  const currentItem = items[current];
+  const currentNum = currentItem?.number ?? current + 1;
+  const counter = total ? `n°${currentNum} · ${Math.min(current + 1, total)}/${total}` : "0 / 0";
+  const currentText = texteDe(currentItem);
+  const currentImage = currentItem?.imageUrl ?? null;
+  if (total === 0) {
+    return /* @__PURE__ */ jsx2("div", {
+      className: "m3-reader-frame flex min-h-[200px] items-center justify-center rounded-xl p-8 text-[18px] text-[var(--reader-on-surface)]/50",
+      children: "Aucune page à afficher pour le moment."
+    });
+  }
+  const legendBlock = /* @__PURE__ */ jsxs2("div", {
+    className: "flex h-full min-h-0 flex-col p-4 bg-[var(--reader-surface)] border-t-2 lg:border-t-0 lg:border-l-2 border-[var(--reader-outline)]",
+    children: [
+      /* @__PURE__ */ jsxs2("div", {
+        className: "mb-2 shrink-0 flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            className: "m3-reader-badge bg-[var(--reader-accent)] text-[var(--reader-on-accent)] px-2 py-0.5 text-[18px] font-black",
+            children: /* @__PURE__ */ jsxs2("span", {
+              children: [
+                "PLANCHE ",
+                currentNum
+              ]
+            })
+          }),
+          /* @__PURE__ */ jsxs2("span", {
+            className: "text-[18px] font-bold tabular-nums text-[var(--reader-on-surface)]/60",
+            children: [
+              current + 1,
+              " / ",
+              total
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        className: "min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 m3-reader-scroll",
+        children: currentText ? renderTranscription?.({
+          text: currentText,
+          page: currentNum,
+          verified: currentItem?.verifiee ?? false
+        }) ?? currentText : currentItem?.aDuTexte ? /* @__PURE__ */ jsx2("p", {
+          className: "text-[18px] italic text-[var(--reader-on-surface)]/50",
+          children: "Chargement de la transcription…"
+        }) : /* @__PURE__ */ jsx2("p", {
+          className: "text-[18px] italic text-[var(--reader-on-surface)]/50",
+          children: "Aucune description pour cette page."
+        })
+      })
+    ]
+  });
+  return /* @__PURE__ */ jsxs2("div", {
+    ref: containerRef,
+    className: "m3-reader m3-reader-container m3-reader-scroll flex h-[84svh] min-h-[460px] w-full min-w-0 flex-col overflow-hidden rounded-xl bg-[var(--reader-surface)] [contain:inline-size] [&:fullscreen]:h-screen [&:fullscreen]:min-h-screen [&:fullscreen]:rounded-none",
+    "data-databook-reader": true,
+    "data-m3-component": "DatabookReader",
+    "data-testid": "databook-reader",
+    role: "region",
+    "aria-label": title,
+    children: [
+      /* @__PURE__ */ jsxs2("div", {
+        className: "m3-reader-hud z-10 flex flex-nowrap items-center gap-2 px-3 py-2.5 sm:flex-wrap",
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            className: "mr-1 hidden min-w-0 max-w-[40ch] truncate font-sans text-[18px] font-extrabold uppercase tracking-wide text-[var(--reader-on-surface)] drop-shadow-[1px_1px_0px_#000] sm:block",
+            children: title
+          }),
+          /* @__PURE__ */ jsx2("span", {
+            className: "m3-reader-badge bg-[var(--reader-accent)] text-[var(--reader-on-accent)] px-2 py-0.5 text-[18px] font-black sm:ml-auto",
+            children: /* @__PURE__ */ jsx2("span", {
+              children: counter
+            })
+          }),
+          /* @__PURE__ */ jsxs2("div", {
+            className: "ml-auto flex shrink-0 items-center gap-1.5 sm:ml-0 sm:gap-2",
+            children: [
+              /* @__PURE__ */ jsxs2("button", {
+                type: "button",
+                className: mode === "vertical" ? "m3-reader-btn-active" : "m3-reader-btn",
+                onClick: () => setMode("vertical"),
+                "aria-pressed": mode === "vertical",
+                "aria-label": "Mode vertical (planche + texte)",
+                title: "Mode vertical (planche + texte)",
+                children: [
+                  /* @__PURE__ */ jsx2(ScrollText2, {
+                    size: 14,
+                    "aria-hidden": true
+                  }),
+                  /* @__PURE__ */ jsx2("span", {
+                    className: "hidden sm:inline",
+                    children: "Défilement"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs2("button", {
+                type: "button",
+                className: mode === "paged" ? "m3-reader-btn-active" : "m3-reader-btn",
+                onClick: () => setMode("paged"),
+                "aria-pressed": mode === "paged",
+                "aria-label": "Mode paginé",
+                title: "Mode paginé",
+                children: [
+                  /* @__PURE__ */ jsx2(BookOpen2, {
+                    size: 14,
+                    "aria-hidden": true
+                  }),
+                  /* @__PURE__ */ jsx2("span", {
+                    className: "hidden sm:inline",
+                    children: "Paginé"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                className: "m3-reader-btn",
+                onClick: () => openLightbox(),
+                disabled: !currentImage,
+                "aria-label": "Agrandir la planche",
+                title: "Agrandir la planche",
+                children: /* @__PURE__ */ jsx2(ZoomIn, {
+                  size: 14,
+                  "aria-hidden": true
+                })
+              }),
+              fullscreenDispo && /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                className: "m3-reader-btn",
+                onClick: toggleFullscreen,
+                "aria-label": isFullscreen ? "Quitter le plein écran" : "Activer le plein écran",
+                title: isFullscreen ? "Quitter le plein écran" : "Plein écran",
+                children: isFullscreen ? /* @__PURE__ */ jsx2(Minimize22, {
+                  size: 14,
+                  "aria-hidden": true
+                }) : /* @__PURE__ */ jsx2(Maximize22, {
+                  size: 14,
+                  "aria-hidden": true
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        className: "relative min-h-0 min-w-0 flex-1 overflow-hidden bg-[var(--reader-surface)]",
+        children: mode === "paged" ? /* @__PURE__ */ jsxs2("div", {
+          className: "flex h-full min-h-0 flex-col lg:flex-row",
+          children: [
+            /* @__PURE__ */ jsxs2("div", {
+              className: "relative min-h-[52%] min-w-0 flex-[1.6] lg:h-full lg:min-h-0 lg:flex-[1.15]",
+              children: [
+                /* @__PURE__ */ jsx2(Swiper2, {
+                  initialSlide: current,
+                  dir: "ltr",
+                  modules: [Zoom2, Virtual, Mousewheel2],
+                  className: "h-full w-full",
+                  slidesPerView: 1,
+                  mousewheel: { forceToAxis: true },
+                  zoom: { maxRatio: 3, toggle: true },
+                  virtual: true,
+                  onSwiper: handleSwiper,
+                  onSlideChange: handleSlideChange,
+                  children: items.map((item, i) => /* @__PURE__ */ jsx2(SwiperSlide2, {
+                    virtualIndex: i,
+                    zoom: Boolean(item.imageUrl),
+                    className: "flex items-center justify-center",
+                    children: /* @__PURE__ */ jsx2("div", {
+                      className: "swiper-zoom-container flex h-full w-full items-center justify-center bg-[var(--reader-surface)]",
+                      children: item.imageUrl ? /* @__PURE__ */ jsxs2("button", {
+                        type: "button",
+                        className: "group relative flex h-full w-full cursor-zoom-in items-center justify-center border-0 bg-transparent p-0",
+                        onClick: () => openLightbox(i),
+                        "aria-label": `Agrandir la page ${item.number}`,
+                        children: [
+                          /* @__PURE__ */ jsx2("img", {
+                            src: imageSrc(item.imageUrl, 1080),
+                            srcSet: imageSrcSet(item.imageUrl, [828, 1080, 1920]) || undefined,
+                            sizes: "(min-width: 1024px) 900px, 100vw",
+                            alt: `${title} — page ${item.number}`,
+                            loading: Math.abs(i - current) <= 1 ? "eager" : "lazy",
+                            draggable: false,
+                            className: "max-h-full max-w-full object-contain transition-opacity group-hover:opacity-95"
+                          }),
+                          /* @__PURE__ */ jsx2("span", {
+                            className: "pointer-events-none absolute right-3 bottom-3 rounded-md border border-white/15 bg-[var(--reader-surface)]/60 px-2 py-1 text-[18px] font-bold uppercase tracking-wider text-[var(--reader-on-surface)]/70 opacity-0 transition-opacity group-hover:opacity-100",
+                            children: "Agrandir"
+                          })
+                        ]
+                      }) : /* @__PURE__ */ jsxs2("div", {
+                        className: "px-6 text-center text-[18px] text-[var(--reader-on-surface)]/50",
+                        children: [
+                          "Page ",
+                          item.number,
+                          " — pas d'image"
+                        ]
+                      })
+                    })
+                  }, `db-page-${item.number}-${i}`))
+                }, "databook-ltr"),
+                /* @__PURE__ */ jsx2("button", {
+                  type: "button",
+                  "aria-label": "Page précédente",
+                  onClick: goPrevPage,
+                  disabled: current <= 0,
+                  className: "absolute top-1/2 left-2 z-10 -translate-y-1/2 rounded-full border border-[var(--reader-outline)] bg-[var(--reader-surface)]/60 p-3 text-[var(--reader-on-surface)] transition-colors hover:border-[var(--reader-accent)] hover:text-[var(--reader-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--reader-accent)] disabled:opacity-30",
+                  children: /* @__PURE__ */ jsx2(ChevronLeft2, {
+                    size: 20,
+                    "aria-hidden": true
+                  })
+                }),
+                /* @__PURE__ */ jsx2("button", {
+                  type: "button",
+                  "aria-label": "Page suivante",
+                  onClick: goNextPage,
+                  disabled: current >= total - 1,
+                  className: "absolute top-1/2 right-2 z-10 -translate-y-1/2 rounded-full border border-[var(--reader-outline)] bg-[var(--reader-surface)]/60 p-3 text-[var(--reader-on-surface)] transition-colors hover:border-[var(--reader-accent)] hover:text-[var(--reader-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--reader-accent)] disabled:opacity-30",
+                  children: /* @__PURE__ */ jsx2(ChevronRight2, {
+                    size: 20,
+                    "aria-hidden": true
+                  })
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx2("div", {
+              className: "min-h-0 max-h-[38%] shrink-0 border-t border-[var(--reader-outline)] bg-[var(--reader-surface)]/90 px-3 py-2.5 sm:max-h-[48%] sm:px-5 sm:py-4 lg:max-h-none lg:w-[min(420px,38%)] lg:overflow-hidden lg:border-l lg:border-t-0",
+              children: legendBlock
+            })
+          ]
+        }) : /* @__PURE__ */ jsx2("div", {
+          ref: scrollParentRef,
+          tabIndex: 0,
+          className: "h-full w-full snap-y snap-proximity overflow-y-auto overflow-x-hidden overscroll-y-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--reader-accent)]",
+          "aria-label": `${title} — lecture verticale`,
+          children: /* @__PURE__ */ jsx2("div", {
+            style: {
+              height: virtualizer.getTotalSize(),
+              width: "100%",
+              position: "relative"
+            },
+            children: virtualizer.getVirtualItems().map((vi) => {
+              const item = items[vi.index];
+              if (!item)
+                return null;
+              return /* @__PURE__ */ jsx2("div", {
+                "data-index": vi.index,
+                ref: virtualizer.measureElement,
+                style: virtualRowStyle(vi.start),
+                className: "snap-start snap-always border-b border-white/5 px-2 py-4 sm:px-4 sm:py-6",
+                children: /* @__PURE__ */ jsxs2("div", {
+                  className: "group/planche mx-auto flex w-full max-w-3xl flex-col gap-3",
+                  children: [
+                    /* @__PURE__ */ jsxs2("span", {
+                      className: "text-[18px] font-bold uppercase tracking-[0.2em] text-[var(--reader-accent)]/70",
+                      children: [
+                        "Page ",
+                        item.number
+                      ]
+                    }),
+                    item.imageUrl ? /* @__PURE__ */ jsxs2("button", {
+                      type: "button",
+                      className: "group relative cursor-zoom-in border-0 bg-transparent p-0 text-left focus-visible:outline-none",
+                      onClick: () => openLightbox(vi.index),
+                      "aria-label": `Ouvrir la page ${item.number} en plein écran`,
+                      children: [
+                        /* @__PURE__ */ jsx2("img", {
+                          src: imageSrc(item.imageUrl, 1080),
+                          srcSet: imageSrcSet(item.imageUrl, [828, 1080, 1920]) || undefined,
+                          sizes: "(min-width: 768px) 768px, 100vw",
+                          alt: `${title} — page ${item.number}`,
+                          loading: Math.abs(vi.index - current) <= 3 ? "eager" : "lazy",
+                          fetchPriority: vi.index === current ? "high" : "auto",
+                          decoding: "async",
+                          draggable: false,
+                          className: "h-auto w-full rounded-sm bg-[var(--reader-surface)] object-contain shadow-[0_0_24px_rgba(0,0,0,0.45)] transition-[transform,box-shadow] duration-300 ease-out will-change-transform group-hover:scale-[1.015] group-hover:shadow-[0_0_60px_rgba(0,0,0,0.75)] group-focus-visible:scale-[1.015] motion-reduce:transform-none motion-reduce:transition-none"
+                        }),
+                        /* @__PURE__ */ jsxs2("span", {
+                          className: "pointer-events-none absolute right-3 bottom-3 inline-flex items-center gap-1.5 rounded-md border border-white/15 bg-[var(--reader-surface)]/70 px-2.5 py-1.5 text-[18px] font-bold uppercase tracking-wider text-[var(--reader-on-surface)]/80 opacity-0 backdrop-blur-sm transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100",
+                          children: [
+                            /* @__PURE__ */ jsx2(ZoomIn, {
+                              size: 12,
+                              "aria-hidden": true
+                            }),
+                            "Plein écran"
+                          ]
+                        })
+                      ]
+                    }) : /* @__PURE__ */ jsx2("div", {
+                      className: "flex min-h-[120px] items-center justify-center rounded border border-dashed border-white/10 bg-[var(--reader-surface)]/40 text-[18px] text-[var(--reader-on-surface)]/50",
+                      children: "Pas d'image pour cette page"
+                    }),
+                    texteDe(item) ? /* @__PURE__ */ jsx2("div", {
+                      className: "rounded-md border border-[var(--reader-outline)]/40 bg-[var(--reader-surface)]/50 px-4 py-3",
+                      children: renderTranscription?.({
+                        text: texteDe(item),
+                        page: item.number,
+                        verified: item.verifiee
+                      }) ?? texteDe(item)
+                    }) : null
+                  ]
+                })
+              }, `${baseId}-${vi.key}`);
+            })
+          })
+        })
+      }),
+      mode === "paged" && total > 0 && total <= SHOW_STRIP_MAX && /* @__PURE__ */ jsx2("div", {
+        className: "z-10 flex items-center gap-4 overflow-x-auto border-t border-[var(--reader-outline)] bg-[var(--reader-surface)]/90 px-4 py-3 scrollbar-thin",
+        children: /* @__PURE__ */ jsx2("div", {
+          className: "mx-auto flex gap-2",
+          children: items.map((item, idx) => /* @__PURE__ */ jsxs2("button", {
+            type: "button",
+            onClick: () => goTo(idx),
+            className: `relative h-16 w-12 flex-shrink-0 overflow-hidden rounded border-2 transition-all ${current === idx ? "scale-105 border-[var(--reader-accent)] shadow-[0_0_10px_rgba(255,178,0,0.4)]" : "border-white/10 hover:border-white/30"}`,
+            title: `Page ${item.number}`,
+            "aria-label": `Aller à la page ${item.number}`,
+            "aria-current": current === idx ? "true" : undefined,
+            children: [
+              item.imageUrl ? /* @__PURE__ */ jsx2("img", {
+                src: imageSrc(item.imageUrl, 96),
+                alt: "",
+                className: "h-full w-full object-cover",
+                loading: "lazy"
+              }) : /* @__PURE__ */ jsx2("span", {
+                className: "flex h-full w-full items-center justify-center bg-zinc-900 text-[18px] text-[var(--reader-on-surface)]/50",
+                children: "txt"
+              }),
+              /* @__PURE__ */ jsx2("span", {
+                className: "absolute inset-x-0 bottom-0 bg-[var(--reader-surface)]/70 text-center font-mono text-[18px] font-bold text-[var(--reader-on-surface)]",
+                children: item.number
+              })
+            ]
+          }, `thumb-${item.number}-${idx}`))
+        })
+      }),
+      mode === "paged" && total > SHOW_STRIP_MAX && /* @__PURE__ */ jsxs2("form", {
+        className: "z-10 flex items-center justify-center gap-3 border-t-2 border-[var(--reader-outline)] bg-[var(--reader-surface)] px-4 py-3",
+        onSubmit: (e) => {
+          e.preventDefault();
+          const field = e.currentTarget.elements.namedItem("goto");
+          const wanted = Number(field?.value);
+          if (!Number.isFinite(wanted))
+            return;
+          const byNumber = items.findIndex((it) => it.number === Math.trunc(wanted));
+          if (byNumber >= 0)
+            goTo(byNumber);
+          else
+            goTo(Math.trunc(wanted) - 1);
+        },
+        children: [
+          /* @__PURE__ */ jsx2("label", {
+            htmlFor: `${baseId}-goto`,
+            className: "text-[18px] font-black uppercase tracking-wider text-[var(--reader-on-surface)]",
+            children: "Aller à n°"
+          }),
+          /* @__PURE__ */ jsx2("input", {
+            id: `${baseId}-goto`,
+            name: "goto",
+            type: "number",
+            defaultValue: currentNum,
+            className: "w-20 rounded-md border-2 border-[var(--reader-outline)] bg-[var(--reader-surface)] px-2.5 py-1 text-center text-[18px] font-extrabold tabular-nums text-[var(--reader-accent)] shadow-[2px_2px_0px_#000] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--reader-accent)]"
+          }, currentNum),
+          /* @__PURE__ */ jsx2("button", {
+            type: "submit",
+            className: "m3-reader-btn-active !py-1 !px-3.5",
+            children: "OK"
+          })
+        ]
+      }),
+      lightbox && currentImage && /* @__PURE__ */ jsxs2("div", {
+        ref: lightboxRef,
+        tabIndex: -1,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": `${title} — page ${currentNum} agrandie`,
+        className: "fixed inset-0 z-[100] flex flex-col bg-[var(--reader-surface)]/95",
+        onClick: () => setLightbox(false),
+        children: [
+          /* @__PURE__ */ jsxs2("div", {
+            className: "flex items-center gap-3 border-b-2 border-[var(--reader-outline)] bg-[var(--reader-surface)] px-4 py-3",
+            children: [
+              /* @__PURE__ */ jsx2("span", {
+                className: "min-w-0 flex-1 truncate font-sans text-[18px] font-extrabold uppercase tracking-wide text-[var(--reader-on-surface)]",
+                children: title
+              }),
+              /* @__PURE__ */ jsx2("span", {
+                className: "m3-reader-badge bg-[var(--reader-accent)] text-[var(--reader-on-accent)] px-2 py-0.5 text-[18px] font-black",
+                children: /* @__PURE__ */ jsxs2("span", {
+                  children: [
+                    "n°",
+                    currentNum
+                  ]
+                })
+              }),
+              /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                className: "m3-reader-btn ml-auto",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setLightbox(false);
+                },
+                "aria-label": "Fermer",
+                children: /* @__PURE__ */ jsx2(X, {
+                  size: 16,
+                  "aria-hidden": true
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs2("div", {
+            className: "relative flex min-h-0 flex-1 items-center justify-center p-2 sm:p-4",
+            onClick: (e) => e.stopPropagation(),
+            onTouchStart,
+            onTouchEnd,
+            children: [
+              /* @__PURE__ */ jsx2("img", {
+                src: currentImage,
+                alt: `${title} — page ${currentNum}`,
+                className: "max-h-full max-w-full object-contain",
+                draggable: false
+              }),
+              /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                "aria-label": "Page précédente",
+                onClick: () => goTo(current - 1),
+                disabled: current <= 0,
+                className: "absolute top-1/2 left-4 -translate-y-1/2 rounded-lg border-2 border-[var(--reader-outline)] bg-[var(--reader-surface)]/90 p-3 text-[var(--reader-accent)] shadow-[3px_3px_0px_#000] hover:bg-[var(--reader-accent)] hover:text-[var(--reader-on-accent)] transition-all disabled:opacity-30",
+                children: /* @__PURE__ */ jsx2(ChevronLeft2, {
+                  size: 22,
+                  "aria-hidden": true
+                })
+              }),
+              /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                "aria-label": "Page suivante",
+                onClick: () => goTo(current + 1),
+                disabled: current >= total - 1,
+                className: "absolute top-1/2 right-4 -translate-y-1/2 rounded-lg border-2 border-[var(--reader-outline)] bg-[var(--reader-surface)]/90 p-3 text-[var(--reader-accent)] shadow-[3px_3px_0px_#000] hover:bg-[var(--reader-accent)] hover:text-[var(--reader-on-accent)] transition-all disabled:opacity-30",
+                children: /* @__PURE__ */ jsx2(ChevronRight2, {
+                  size: 22,
+                  "aria-hidden": true
+                })
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+// packages/m3-reader/src/CollectionReader.tsx
+import { useEffect as useEffect5, useId as useId3, useMemo as useMemo3, useState as useState4 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+"use client";
+function CollectionReader({ title, editions, initialEdition, initialChapter, emptyLabel, contentsLabel, previousLabel, nextLabel, onSelectionChange, renderChapter }) {
+  const contentsId = useId3();
+  const available = useMemo3(() => editions.map((edition) => ({ ...edition, chapters: edition.chapters.filter((chapter) => chapter.pageCount > 0) })).filter((edition) => edition.chapters.length > 0), [editions]);
+  const [editionId, setEditionId] = useState4(() => available.find((edition) => edition.id === initialEdition)?.id ?? available[0]?.id ?? "");
+  const edition = available.find((item) => item.id === editionId) ?? available[0];
+  const [chapterIndex, setChapterIndex] = useState4(() => Math.max(0, edition?.chapters.findIndex((chapter) => String(chapter.id) === String(initialChapter)) ?? 0));
+  const [contentsOpen, setContentsOpen] = useState4(false);
+  const safeIndex = Math.min(chapterIndex, Math.max(0, (edition?.chapters.length ?? 0) - 1));
+  const chapter = edition?.chapters[safeIndex];
+  useEffect5(() => {
+    if (edition && chapter)
+      onSelectionChange?.(edition, chapter);
+  }, [edition, chapter, onSelectionChange]);
+  if (!edition || !chapter) {
+    return /* @__PURE__ */ jsx3("p", {
+      className: "m3-reader-collection-empty",
+      "data-m3-component": "CollectionReader",
+      "data-testid": "collection-reader-empty",
+      children: emptyLabel
+    });
+  }
+  return /* @__PURE__ */ jsxs3("section", {
+    className: "m3-reader m3-reader-collection",
+    "aria-label": title,
+    "data-m3-component": "CollectionReader",
+    "data-testid": "collection-reader",
+    children: [
+      /* @__PURE__ */ jsxs3("div", {
+        className: "m3-reader-collection-toolbar",
+        children: [
+          /* @__PURE__ */ jsx3("div", {
+            className: "m3-reader-collection-editions",
+            role: "group",
+            "aria-label": title,
+            children: available.map((item) => /* @__PURE__ */ jsx3("button", {
+              type: "button",
+              className: item.id === edition.id ? "m3-reader-btn-active" : "m3-reader-btn",
+              "aria-pressed": item.id === edition.id,
+              onClick: () => {
+                setEditionId(item.id);
+                setChapterIndex(0);
+                setContentsOpen(false);
+              },
+              children: item.label
+            }, item.id))
+          }),
+          /* @__PURE__ */ jsxs3("button", {
+            type: "button",
+            className: "m3-reader-btn",
+            "aria-expanded": contentsOpen,
+            "aria-controls": contentsOpen ? contentsId : undefined,
+            onClick: () => setContentsOpen((value) => !value),
+            children: [
+              contentsLabel,
+              " (",
+              edition.chapters.length,
+              ")"
+            ]
+          })
+        ]
+      }),
+      contentsOpen && /* @__PURE__ */ jsx3("div", {
+        id: contentsId,
+        className: "m3-reader-collection-contents",
+        role: "group",
+        "aria-label": contentsLabel,
+        children: edition.chapters.map((item, index) => /* @__PURE__ */ jsxs3("button", {
+          type: "button",
+          className: index === safeIndex ? "m3-reader-btn-active" : "m3-reader-btn",
+          "aria-current": index === safeIndex ? "page" : undefined,
+          disabled: item.pageCount === 0,
+          onClick: () => {
+            setChapterIndex(index);
+            setContentsOpen(false);
+          },
+          children: [
+            item.label,
+            " · ",
+            item.pageCount
+          ]
+        }, item.id))
+      }),
+      renderChapter(edition, chapter, safeIndex),
+      /* @__PURE__ */ jsxs3("nav", {
+        className: "m3-reader-collection-navigation",
+        "aria-label": contentsLabel,
+        children: [
+          /* @__PURE__ */ jsx3("button", {
+            type: "button",
+            className: "m3-reader-btn",
+            disabled: safeIndex === 0,
+            onClick: () => setChapterIndex(safeIndex - 1),
+            children: previousLabel
+          }),
+          /* @__PURE__ */ jsxs3("span", {
+            "aria-live": "polite",
+            children: [
+              chapter.label,
+              " (",
+              safeIndex + 1,
+              "/",
+              edition.chapters.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx3("button", {
+            type: "button",
+            className: "m3-reader-btn",
+            disabled: safeIndex >= edition.chapters.length - 1,
+            onClick: () => setChapterIndex(safeIndex + 1),
+            children: nextLabel
+          })
+        ]
+      })
+    ]
+  });
+}
+export {
+  CollectionReader,
+  DatabookReader,
+  MangaReader
+};
+
+//# debugId=F914B781AD4BAB2F64756E2164756E21