@pressy-pub/components 0.1.0

package/dist/index.js

@@ -0,0 +1,2618 @@
+// src/Reader.tsx
+import { useState, useEffect as useEffect3, useRef as useRef2, useCallback } from "preact/hooks";
+
+// src/Navigation.tsx
+import { jsx, jsxs } from "preact/jsx-runtime";
+function Navigation({ prev, next }) {
+  if (!prev && !next) return null;
+  return /* @__PURE__ */ jsxs("nav", { class: "pressy-navigation", "aria-label": "Chapter navigation", children: [
+    /* @__PURE__ */ jsxs("div", { class: "pressy-nav-inner", children: [
+      prev ? /* @__PURE__ */ jsxs("a", { href: prev.slug, class: "pressy-nav-link pressy-nav-prev", children: [
+        /* @__PURE__ */ jsx("span", { class: "pressy-nav-direction", children: "Previous" }),
+        /* @__PURE__ */ jsx("span", { class: "pressy-nav-title", children: prev.title })
+      ] }) : /* @__PURE__ */ jsx("div", { class: "pressy-nav-placeholder" }),
+      next ? /* @__PURE__ */ jsxs("a", { href: next.slug, class: "pressy-nav-link pressy-nav-next", children: [
+        /* @__PURE__ */ jsx("span", { class: "pressy-nav-direction", children: "Next" }),
+        /* @__PURE__ */ jsx("span", { class: "pressy-nav-title", children: next.title })
+      ] }) : /* @__PURE__ */ jsx("div", { class: "pressy-nav-placeholder" })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `
+        .pressy-navigation {
+          border-top: 1px solid var(--color-border);
+          padding: 2rem 1.5rem;
+          margin-top: 3rem;
+        }
+
+        .pressy-nav-inner {
+          display: flex;
+          justify-content: space-between;
+          gap: 2rem;
+          max-width: 65ch;
+          margin: 0 auto;
+        }
+
+        .pressy-nav-link {
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+          text-decoration: none;
+          padding: 1rem;
+          border-radius: 0.5rem;
+          transition: background 0.15s;
+          max-width: 45%;
+        }
+
+        .pressy-nav-link:hover {
+          background: var(--color-bg-subtle);
+        }
+
+        .pressy-nav-prev {
+          align-items: flex-start;
+        }
+
+        .pressy-nav-next {
+          align-items: flex-end;
+          text-align: right;
+        }
+
+        .pressy-nav-direction {
+          font-size: var(--font-size-sm);
+          color: var(--color-text-muted);
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+        }
+
+        .pressy-nav-title {
+          color: var(--color-text);
+          font-weight: 500;
+        }
+
+        .pressy-nav-placeholder {
+          flex: 1;
+        }
+
+        @media (max-width: 640px) {
+          .pressy-nav-inner {
+            flex-direction: column;
+            gap: 1rem;
+          }
+
+          .pressy-nav-link {
+            max-width: 100%;
+          }
+
+          .pressy-nav-next {
+            align-items: flex-start;
+            text-align: left;
+          }
+        }
+      ` })
+  ] });
+}
+
+// src/TextShare.tsx
+import { useSignal } from "@preact/signals";
+import { useRef, useEffect } from "preact/hooks";
+import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+function TextShare() {
+  const isVisible = useSignal(false);
+  const position = useSignal({ x: 0, y: 0 });
+  const selectedText = useSignal("");
+  const buttonRef = useRef(null);
+  useEffect(() => {
+    const handleSelectionChange = () => {
+      const selection = window.getSelection();
+      if (!selection || selection.isCollapsed) {
+        isVisible.value = false;
+        return;
+      }
+      const text = selection.toString().trim();
+      if (text.length < 5) {
+        isVisible.value = false;
+        return;
+      }
+      selectedText.value = text;
+      const range = selection.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+      position.value = {
+        x: rect.left + rect.width / 2,
+        y: rect.top - 10
+      };
+      isVisible.value = true;
+    };
+    document.addEventListener("selectionchange", handleSelectionChange);
+    document.addEventListener("mouseup", handleSelectionChange);
+    return () => {
+      document.removeEventListener("selectionchange", handleSelectionChange);
+      document.removeEventListener("mouseup", handleSelectionChange);
+    };
+  }, []);
+  const generateShareUrl = () => {
+    const encodedText = encodeURIComponent(selectedText.value);
+    const url = new URL(window.location.href);
+    url.hash = `:~:text=${encodedText}`;
+    return url.toString();
+  };
+  const handleShare = async () => {
+    const url = generateShareUrl();
+    const text = `"${selectedText.value}"`;
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          text,
+          url
+        });
+        isVisible.value = false;
+        return;
+      } catch (err) {
+      }
+    }
+    try {
+      await navigator.clipboard.writeText(`${text}
+
+${url}`);
+      if (buttonRef.current) {
+        buttonRef.current.classList.add("copied");
+        setTimeout(() => {
+          buttonRef.current?.classList.remove("copied");
+        }, 2e3);
+      }
+    } catch (err) {
+      console.error("Failed to copy to clipboard:", err);
+    }
+  };
+  const handleCopyLink = async () => {
+    const url = generateShareUrl();
+    try {
+      await navigator.clipboard.writeText(url);
+      if (buttonRef.current) {
+        buttonRef.current.classList.add("copied");
+        setTimeout(() => {
+          buttonRef.current?.classList.remove("copied");
+        }, 2e3);
+      }
+    } catch (err) {
+      console.error("Failed to copy link:", err);
+    }
+  };
+  if (!isVisible.value) return null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: buttonRef,
+      class: "pressy-text-share",
+      style: {
+        left: `${position.value.x}px`,
+        top: `${position.value.y}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            class: "pressy-share-btn",
+            onClick: handleShare,
+            "aria-label": "Share selected text",
+            title: "Share quote",
+            children: /* @__PURE__ */ jsx2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            class: "pressy-copy-link-btn",
+            onClick: handleCopyLink,
+            "aria-label": "Copy link to selected text",
+            title: "Copy link",
+            children: /* @__PURE__ */ jsx2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx2("style", { children: `
+        .pressy-text-share {
+          position: fixed;
+          transform: translate(-50%, -100%);
+          display: flex;
+          gap: 0.25rem;
+          background: var(--color-bg);
+          border: 1px solid var(--color-border);
+          border-radius: 0.5rem;
+          padding: 0.25rem;
+          box-shadow: var(--shadow-md);
+          z-index: 1000;
+        }
+
+        .pressy-text-share::after {
+          content: '';
+          position: absolute;
+          bottom: -6px;
+          left: 50%;
+          transform: translateX(-50%);
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-top: 6px solid var(--color-bg);
+        }
+
+        .pressy-share-btn,
+        .pressy-copy-link-btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 2rem;
+          height: 2rem;
+          border: none;
+          background: transparent;
+          color: var(--color-text-muted);
+          cursor: pointer;
+          border-radius: 0.25rem;
+          transition: background 0.15s, color 0.15s;
+        }
+
+        .pressy-share-btn:hover,
+        .pressy-copy-link-btn:hover {
+          background: var(--color-bg-muted);
+          color: var(--color-text);
+        }
+
+        .pressy-text-share.copied .pressy-copy-link-btn {
+          color: var(--color-accent);
+        }
+      ` })
+      ]
+    }
+  );
+}
+
+// src/OfflineIndicator.tsx
+import { useSignal as useSignal2 } from "@preact/signals";
+import { useEffect as useEffect2 } from "preact/hooks";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "preact/jsx-runtime";
+function OfflineIndicator() {
+  const isOffline = useSignal2(!navigator.onLine);
+  const isVisible = useSignal2(false);
+  useEffect2(() => {
+    const handleOnline = () => {
+      isOffline.value = false;
+      isVisible.value = true;
+      setTimeout(() => {
+        isVisible.value = false;
+      }, 3e3);
+    };
+    const handleOffline = () => {
+      isOffline.value = true;
+      isVisible.value = true;
+    };
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+  if (!isVisible.value) return null;
+  return /* @__PURE__ */ jsxs3("div", { class: `pressy-offline-indicator ${isOffline.value ? "offline" : "online"}`, children: [
+    isOffline.value ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zM3.41 1.31L2 2.72l2.05 2.05C1.91 5.76.59 6.82.36 7L12 21.5l3.91-4.87 3.32 3.32 1.41-1.41L3.41 1.31z" }) }),
+      /* @__PURE__ */ jsx3("span", { children: "You're offline" })
+    ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z" }) }),
+      /* @__PURE__ */ jsx3("span", { children: "Back online" })
+    ] }),
+    /* @__PURE__ */ jsx3("style", { children: `
+        .pressy-offline-indicator {
+          position: fixed;
+          bottom: 1.5rem;
+          left: 50%;
+          transform: translateX(-50%);
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.75rem 1rem;
+          border-radius: 2rem;
+          font-size: var(--font-size-sm);
+          font-weight: 500;
+          z-index: 1000;
+          animation: slideUp 0.3s ease;
+        }
+
+        .pressy-offline-indicator.offline {
+          background: #fef2f2;
+          color: #dc2626;
+          border: 1px solid #fecaca;
+        }
+
+        .pressy-offline-indicator.online {
+          background: #f0fdf4;
+          color: #16a34a;
+          border: 1px solid #bbf7d0;
+        }
+
+        @keyframes slideUp {
+          from {
+            opacity: 0;
+            transform: translateX(-50%) translateY(1rem);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(-50%) translateY(0);
+          }
+        }
+
+        @media (prefers-color-scheme: dark) {
+          .pressy-offline-indicator.offline {
+            background: #450a0a;
+            color: #fca5a5;
+            border-color: #7f1d1d;
+          }
+
+          .pressy-offline-indicator.online {
+            background: #052e16;
+            color: #86efac;
+            border-color: #166534;
+          }
+        }
+      ` })
+  ] });
+}
+
+// src/Reader.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "preact/jsx-runtime";
+function Reader({
+  children,
+  bookTitle,
+  prevChapter,
+  nextChapter,
+  showDropCap = true,
+  paginationMode = "scroll",
+  onSaveProgress,
+  onRestoreProgress,
+  bookProgressPercent,
+  initialContent,
+  chapterMapData,
+  currentChapterSlug,
+  allChapters,
+  bookBasePath,
+  onChapterChange,
+  mdxComponents
+}) {
+  if (paginationMode === "paginated") {
+    return /* @__PURE__ */ jsx4(
+      PaginatedReader,
+      {
+        bookTitle,
+        prevChapter,
+        nextChapter,
+        showDropCap,
+        onSaveProgress,
+        onRestoreProgress,
+        bookProgressPercent,
+        initialContent,
+        chapterMapData,
+        currentChapterSlug,
+        allChapters,
+        bookBasePath,
+        onChapterChange,
+        mdxComponents,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    ScrollReader,
+    {
+      prevChapter,
+      nextChapter,
+      showDropCap,
+      onSaveProgress,
+      onRestoreProgress,
+      children
+    }
+  );
+}
+function ScrollReader({
+  children,
+  prevChapter,
+  nextChapter,
+  showDropCap,
+  onSaveProgress,
+  onRestoreProgress
+}) {
+  const saveTimerRef = useRef2(null);
+  useEffect3(() => {
+    if (!onRestoreProgress) return;
+    onRestoreProgress().then((data) => {
+      if (data && data.scrollPosition > 0) {
+        window.scrollTo(0, data.scrollPosition);
+      }
+    });
+  }, []);
+  useEffect3(() => {
+    if (!onSaveProgress) return;
+    const handleScroll = () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = setTimeout(() => {
+        onSaveProgress({
+          page: 0,
+          totalPages: 0,
+          scrollPosition: window.scrollY
+        });
+      }, 500);
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    };
+  }, [onSaveProgress]);
+  useEffect3(() => {
+    if (!onSaveProgress) return;
+    const handleUnload = () => {
+      onSaveProgress({
+        page: 0,
+        totalPages: 0,
+        scrollPosition: window.scrollY
+      });
+    };
+    window.addEventListener("beforeunload", handleUnload);
+    return () => window.removeEventListener("beforeunload", handleUnload);
+  }, [onSaveProgress]);
+  return /* @__PURE__ */ jsxs4("div", { class: "pressy-reader", children: [
+    /* @__PURE__ */ jsx4("main", { class: "pressy-reader-main", children: /* @__PURE__ */ jsx4(
+      "article",
+      {
+        class: `pressy-prose ${showDropCap ? "" : "no-drop-cap"}`,
+        "data-drop-cap": showDropCap,
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx4(TextShare, {}),
+    /* @__PURE__ */ jsx4(Navigation, { prev: prevChapter, next: nextChapter }),
+    /* @__PURE__ */ jsx4(OfflineIndicator, {}),
+    /* @__PURE__ */ jsx4("style", { children: SCROLL_STYLES })
+  ] });
+}
+function ChapterDivider({ title }) {
+  return /* @__PURE__ */ jsx4("div", { class: "pressy-chapter-divider", children: /* @__PURE__ */ jsx4("h2", { class: "pressy-chapter-divider-title", children: title }) });
+}
+function PaginatedReader({
+  children,
+  bookTitle,
+  prevChapter,
+  nextChapter,
+  showDropCap,
+  onSaveProgress,
+  onRestoreProgress,
+  bookProgressPercent,
+  initialContent,
+  chapterMapData,
+  currentChapterSlug,
+  allChapters,
+  bookBasePath,
+  onChapterChange,
+  mdxComponents
+}) {
+  const containerRef = useRef2(null);
+  const viewportRef = useRef2(null);
+  const articleRef = useRef2(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(1);
+  const hasRestoredRef = useRef2(false);
+  const saveTimerRef = useRef2(null);
+  const [loadedChapters, setLoadedChapters] = useState([]);
+  const [chapterRanges, setChapterRanges] = useState([]);
+  const [activeChapterSlug, setActiveChapterSlug] = useState(
+    currentChapterSlug || ""
+  );
+  const preloadingRef = useRef2(/* @__PURE__ */ new Set());
+  const isMultiChapter = !!(chapterMapData && initialContent && currentChapterSlug && allChapters);
+  useEffect3(() => {
+    if (isMultiChapter && initialContent && currentChapterSlug) {
+      const chapterInfo = allChapters.find(
+        (ch) => ch.slug === currentChapterSlug
+      );
+      setLoadedChapters([
+        {
+          slug: currentChapterSlug,
+          title: chapterInfo?.title || currentChapterSlug,
+          Content: initialContent
+        }
+      ]);
+      setActiveChapterSlug(currentChapterSlug);
+    }
+  }, []);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [activeTheme, setActiveTheme] = useState(() => {
+    if (typeof localStorage !== "undefined") {
+      return localStorage.getItem("pressy-theme") || "light";
+    }
+    return "light";
+  });
+  const [fontScale, setFontScale] = useState(() => {
+    if (typeof localStorage !== "undefined") {
+      const saved = localStorage.getItem("pressy-font-size");
+      return saved ? parseFloat(saved) : 1;
+    }
+    return 1;
+  });
+  const applyFontScale = useCallback((scale) => {
+    if (scale === 1) {
+      document.documentElement.style.removeProperty("--font-size-base");
+    } else {
+      document.documentElement.style.setProperty(
+        "--font-size-base",
+        `calc(clamp(1rem, 0.875rem + 0.5vw, 1.25rem) * ${scale})`
+      );
+    }
+  }, []);
+  useEffect3(() => {
+    if (fontScale !== 1) {
+      applyFontScale(fontScale);
+    }
+  }, []);
+  const handleThemeChange = useCallback((theme) => {
+    setActiveTheme(theme);
+    localStorage.setItem("pressy-theme", theme);
+    const resolved = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
+    document.documentElement.setAttribute("data-theme", resolved);
+  }, []);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragOffset, setDragOffset] = useState(0);
+  const [chapterHint, setChapterHint] = useState(null);
+  const touchStartXRef = useRef2(0);
+  const touchStartYRef = useRef2(0);
+  const lastTouchXRef = useRef2(0);
+  const lastTouchTimeRef = useRef2(0);
+  const velocityRef = useRef2(0);
+  const isSwipingRef = useRef2(false);
+  const isDraggingRef = useRef2(false);
+  const updateChapterRanges = useCallback(() => {
+    if (!isMultiChapter) return;
+    const article = articleRef.current;
+    const viewport = viewportRef.current;
+    if (!article || !viewport) return;
+    const viewportWidth = viewport.clientWidth;
+    if (viewportWidth === 0) return;
+    const sections = article.querySelectorAll(".pressy-chapter-section");
+    const ranges = [];
+    sections.forEach((section) => {
+      const slug = section.getAttribute("data-chapter-slug") || "";
+      const sectionLeft = section.offsetLeft;
+      const sectionWidth = section.scrollWidth;
+      const startPage = Math.floor(sectionLeft / viewportWidth);
+      const endPage = Math.max(
+        startPage,
+        Math.ceil((sectionLeft + sectionWidth) / viewportWidth) - 1
+      );
+      ranges.push({ slug, startPage, endPage });
+    });
+    setChapterRanges(ranges);
+  }, [isMultiChapter]);
+  const recalculatePages = useCallback(() => {
+    const article = articleRef.current;
+    const viewport = viewportRef.current;
+    if (!article || !viewport) return;
+    const viewportWidth = viewport.clientWidth;
+    if (viewportWidth === 0) return;
+    article.style.columnWidth = `${viewportWidth}px`;
+    void article.scrollWidth;
+    const total = Math.max(1, Math.round(article.scrollWidth / viewportWidth));
+    setTotalPages(total);
+    setCurrentPage((prev) => Math.min(prev, total - 1));
+    updateChapterRanges();
+  }, [updateChapterRanges]);
+  const handleFontSizeChange = useCallback(
+    (delta) => {
+      setFontScale((prev) => {
+        const next = Math.round(Math.max(0.8, Math.min(1.5, prev + delta)) * 10) / 10;
+        localStorage.setItem("pressy-font-size", String(next));
+        applyFontScale(next);
+        setTimeout(() => recalculatePages(), 100);
+        return next;
+      });
+    },
+    [applyFontScale, recalculatePages]
+  );
+  useEffect3(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const initialTimer = setTimeout(recalculatePages, 50);
+    const observer = new ResizeObserver(() => {
+      recalculatePages();
+    });
+    observer.observe(viewport);
+    return () => {
+      clearTimeout(initialTimer);
+      observer.disconnect();
+    };
+  }, [recalculatePages]);
+  useEffect3(() => {
+    if (loadedChapters.length > 0) {
+      const timer = setTimeout(recalculatePages, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [loadedChapters.length, recalculatePages]);
+  useEffect3(() => {
+    const article = articleRef.current;
+    if (!article) return;
+    const images = article.querySelectorAll("img");
+    if (images.length === 0) return;
+    const onLoad = () => recalculatePages();
+    images.forEach((img) => {
+      if (!img.complete) {
+        img.addEventListener("load", onLoad);
+        img.addEventListener("error", onLoad);
+      }
+    });
+    return () => {
+      images.forEach((img) => {
+        img.removeEventListener("load", onLoad);
+        img.removeEventListener("error", onLoad);
+      });
+    };
+  }, [recalculatePages, loadedChapters.length]);
+  useEffect3(() => {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get("page") === "last" && totalPages > 1) {
+      setCurrentPage(totalPages - 1);
+      hasRestoredRef.current = true;
+      const url = new URL(window.location.href);
+      url.searchParams.delete("page");
+      history.replaceState(null, "", url.pathname);
+    }
+  }, [totalPages]);
+  useEffect3(() => {
+    const article = articleRef.current;
+    const viewport = viewportRef.current;
+    if (!article || !viewport) return;
+    const baseOffset = currentPage * viewport.clientWidth;
+    const totalOffset = baseOffset - dragOffset;
+    if (isDragging) {
+      article.style.transition = "none";
+    } else {
+      article.style.transition = "transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+    }
+    article.style.transform = `translateX(-${totalOffset}px)`;
+  }, [currentPage, dragOffset, isDragging]);
+  useEffect3(() => {
+    const article = articleRef.current;
+    const viewport = viewportRef.current;
+    if (!article || !viewport) return;
+    const viewportRect = viewport.getBoundingClientRect();
+    const focusable = article.querySelectorAll(
+      "a[href], button, input, select, textarea, [tabindex]"
+    );
+    focusable.forEach((el) => {
+      const elRect = el.getBoundingClientRect();
+      const onCurrentPage = elRect.left >= viewportRect.left - 1 && elRect.right <= viewportRect.right + 1;
+      if (onCurrentPage) {
+        const original = el.getAttribute("data-original-tabindex");
+        if (original !== null) {
+          if (original === "") {
+            el.removeAttribute("tabindex");
+          } else {
+            el.setAttribute("tabindex", original);
+          }
+          el.removeAttribute("data-original-tabindex");
+        }
+      } else {
+        if (!el.hasAttribute("data-original-tabindex")) {
+          el.setAttribute(
+            "data-original-tabindex",
+            el.getAttribute("tabindex") || ""
+          );
+        }
+        el.setAttribute("tabindex", "-1");
+      }
+    });
+  }, [currentPage, totalPages]);
+  useEffect3(() => {
+    if (!isMultiChapter || !chapterMapData || chapterRanges.length === 0)
+      return;
+    const activeRange = chapterRanges.find((r) => r.slug === activeChapterSlug);
+    if (!activeRange) return;
+    const pagesFromEnd = activeRange.endPage - currentPage;
+    if (pagesFromEnd > 2) return;
+    const { chapterOrder, chapterMap } = chapterMapData;
+    const lastLoadedSlug = loadedChapters[loadedChapters.length - 1]?.slug;
+    const lastLoadedIdx = chapterOrder.indexOf(lastLoadedSlug);
+    if (lastLoadedIdx === -1 || lastLoadedIdx >= chapterOrder.length - 1)
+      return;
+    const nextSlug = chapterOrder[lastLoadedIdx + 1];
+    if (preloadingRef.current.has(nextSlug)) return;
+    if (loadedChapters.some((ch) => ch.slug === nextSlug)) return;
+    preloadingRef.current.add(nextSlug);
+    const loader = chapterMap[nextSlug];
+    if (!loader) return;
+    loader().then((mod) => {
+      const Content = mod.default;
+      const chapterInfo = allChapters.find((ch) => ch.slug === nextSlug);
+      setLoadedChapters((prev) => {
+        if (prev.some((ch) => ch.slug === nextSlug)) return prev;
+        return [
+          ...prev,
+          {
+            slug: nextSlug,
+            title: chapterInfo?.title || nextSlug,
+            Content
+          }
+        ];
+      });
+    }).catch(() => {
+      preloadingRef.current.delete(nextSlug);
+    });
+  }, [
+    currentPage,
+    activeChapterSlug,
+    chapterRanges,
+    isMultiChapter,
+    chapterMapData,
+    loadedChapters,
+    allChapters
+  ]);
+  useEffect3(() => {
+    if (!isMultiChapter || chapterRanges.length === 0 || !bookBasePath) return;
+    const currentRange = chapterRanges.find(
+      (r) => currentPage >= r.startPage && currentPage <= r.endPage
+    );
+    if (!currentRange || currentRange.slug === activeChapterSlug) return;
+    const prevSlug = activeChapterSlug;
+    setActiveChapterSlug(currentRange.slug);
+    const newPath = `${bookBasePath}/${currentRange.slug}`;
+    history.replaceState(null, "", newPath);
+    const chapterInfo = allChapters?.find(
+      (ch) => ch.slug === currentRange.slug
+    );
+    if (chapterInfo) {
+      document.title = document.title.replace(
+        /^[^|]+/,
+        chapterInfo.title + " "
+      );
+    }
+    if (onChapterChange && prevSlug) {
+      const prevRange = chapterRanges.find((r) => r.slug === prevSlug);
+      if (prevRange) {
+        const prevTotalPages = prevRange.endPage - prevRange.startPage + 1;
+        onChapterChange(prevSlug, prevTotalPages - 1, prevTotalPages);
+      }
+    }
+  }, [
+    currentPage,
+    chapterRanges,
+    activeChapterSlug,
+    isMultiChapter,
+    bookBasePath,
+    allChapters,
+    onChapterChange
+  ]);
+  useEffect3(() => {
+    if (!onSaveProgress || !hasRestoredRef.current) return;
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    saveTimerRef.current = setTimeout(() => {
+      if (isMultiChapter && chapterRanges.length > 0) {
+        const activeRange = chapterRanges.find(
+          (r) => r.slug === activeChapterSlug
+        );
+        if (activeRange) {
+          const chapterPage = currentPage - activeRange.startPage;
+          const chapterTotalPages = activeRange.endPage - activeRange.startPage + 1;
+          onSaveProgress({
+            page: chapterPage,
+            totalPages: chapterTotalPages,
+            scrollPosition: 0
+          });
+        }
+      } else {
+        onSaveProgress({
+          page: currentPage,
+          totalPages,
+          scrollPosition: 0
+        });
+      }
+    }, 300);
+    return () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    };
+  }, [
+    currentPage,
+    totalPages,
+    onSaveProgress,
+    isMultiChapter,
+    chapterRanges,
+    activeChapterSlug
+  ]);
+  useEffect3(() => {
+    if (!onSaveProgress) return;
+    const handleUnload = () => {
+      if (isMultiChapter && chapterRanges.length > 0) {
+        const activeRange = chapterRanges.find(
+          (r) => r.slug === activeChapterSlug
+        );
+        if (activeRange) {
+          const chapterPage = currentPage - activeRange.startPage;
+          const chapterTotalPages = activeRange.endPage - activeRange.startPage + 1;
+          onSaveProgress({
+            page: chapterPage,
+            totalPages: chapterTotalPages,
+            scrollPosition: 0
+          });
+        }
+      } else {
+        onSaveProgress({
+          page: currentPage,
+          totalPages,
+          scrollPosition: 0
+        });
+      }
+    };
+    window.addEventListener("beforeunload", handleUnload);
+    return () => window.removeEventListener("beforeunload", handleUnload);
+  }, [
+    currentPage,
+    totalPages,
+    onSaveProgress,
+    isMultiChapter,
+    chapterRanges,
+    activeChapterSlug
+  ]);
+  const effectiveNextChapter = (() => {
+    if (!isMultiChapter || !chapterMapData) return nextChapter;
+    const { chapterOrder } = chapterMapData;
+    const lastLoadedSlug = loadedChapters[loadedChapters.length - 1]?.slug;
+    const lastLoadedIdx = chapterOrder.indexOf(lastLoadedSlug);
+    if (lastLoadedIdx < chapterOrder.length - 1) return void 0;
+    if (bookBasePath) return { slug: bookBasePath, title: "Table of Contents" };
+    return nextChapter;
+  })();
+  const effectivePrevChapter = (() => {
+    if (!isMultiChapter || !chapterMapData) return prevChapter;
+    const { chapterOrder } = chapterMapData;
+    const firstLoadedSlug = loadedChapters[0]?.slug;
+    const firstLoadedIdx = chapterOrder.indexOf(firstLoadedSlug);
+    if (firstLoadedIdx <= 0) return prevChapter;
+    const prevSlug = chapterOrder[firstLoadedIdx - 1];
+    const prevInfo = allChapters?.find((ch) => ch.slug === prevSlug);
+    return {
+      slug: `${bookBasePath}/${prevSlug}?page=last`,
+      title: prevInfo?.title || prevSlug
+    };
+  })();
+  const goToPage = useCallback(
+    (page) => {
+      const clamped = Math.max(0, Math.min(page, totalPages - 1));
+      setCurrentPage(clamped);
+    },
+    [totalPages]
+  );
+  const goNext = useCallback(() => {
+    if (currentPage >= totalPages - 1) {
+      if (effectiveNextChapter) {
+        window.location.href = effectiveNextChapter.slug;
+      }
+      return;
+    }
+    goToPage(currentPage + 1);
+  }, [currentPage, totalPages, effectiveNextChapter, goToPage]);
+  const goPrev = useCallback(() => {
+    if (currentPage <= 0) {
+      if (effectivePrevChapter) {
+        window.location.href = effectivePrevChapter.slug;
+      }
+      return;
+    }
+    goToPage(currentPage - 1);
+  }, [currentPage, effectivePrevChapter, goToPage]);
+  const [footerVisible, setFooterVisible] = useState(false);
+  const footerTimerRef = useRef2(null);
+  const showFooterTemporarily = useCallback(() => {
+    setFooterVisible(true);
+    if (footerTimerRef.current) clearTimeout(footerTimerRef.current);
+    footerTimerRef.current = setTimeout(() => setFooterVisible(false), 3e3);
+  }, []);
+  const lastMiddleTapRef = useRef2(0);
+  const middleTapTimerRef = useRef2(null);
+  const toggleFullscreen = useCallback(() => {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      document.documentElement.requestFullscreen().catch(() => {
+      });
+    }
+  }, []);
+  const handleContainerClick = useCallback(
+    (e) => {
+      const target = e.target;
+      if (target.closest(".pressy-settings-panel, .pressy-settings-toggle"))
+        return;
+      if (target.closest('a, button, input, select, textarea, [role="button"]'))
+        return;
+      if (settingsOpen) {
+        setSettingsOpen(false);
+        return;
+      }
+      const container = containerRef.current;
+      if (!container) return;
+      const rect = container.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const edgeZone = rect.width * 0.15;
+      if (x < edgeZone) {
+        goPrev();
+      } else if (x > rect.width - edgeZone) {
+        goNext();
+      } else {
+        const now = Date.now();
+        const timeSinceLastTap = now - lastMiddleTapRef.current;
+        lastMiddleTapRef.current = now;
+        if (timeSinceLastTap < 300) {
+          if (middleTapTimerRef.current)
+            clearTimeout(middleTapTimerRef.current);
+          toggleFullscreen();
+        } else {
+          if (middleTapTimerRef.current)
+            clearTimeout(middleTapTimerRef.current);
+          middleTapTimerRef.current = setTimeout(() => {
+            if (footerVisible) {
+              setFooterVisible(false);
+              if (footerTimerRef.current) clearTimeout(footerTimerRef.current);
+            } else {
+              showFooterTemporarily();
+            }
+          }, 300);
+        }
+      }
+    },
+    [
+      goNext,
+      goPrev,
+      footerVisible,
+      settingsOpen,
+      showFooterTemporarily,
+      toggleFullscreen
+    ]
+  );
+  const [hoverZone, setHoverZone] = useState(null);
+  const handleMouseMove = useCallback(
+    (e) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const rect = container.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const third = rect.width / 3;
+      if (x < third) {
+        setHoverZone("left");
+      } else if (x > third * 2) {
+        setHoverZone("right");
+      } else {
+        setHoverZone(null);
+      }
+      if (y > rect.height * 0.75) {
+        setFooterVisible(true);
+        if (footerTimerRef.current) clearTimeout(footerTimerRef.current);
+      } else if (!settingsOpen) {
+        if (footerTimerRef.current) clearTimeout(footerTimerRef.current);
+        footerTimerRef.current = setTimeout(() => setFooterVisible(false), 600);
+      }
+    },
+    [settingsOpen]
+  );
+  const handleMouseLeave = useCallback(() => {
+    setHoverZone(null);
+    if (!settingsOpen) {
+      if (footerTimerRef.current) clearTimeout(footerTimerRef.current);
+      footerTimerRef.current = setTimeout(() => setFooterVisible(false), 600);
+    }
+  }, [settingsOpen]);
+  useEffect3(() => {
+    const handleKeyDown = (e) => {
+      const tag = e.target.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+      if (e.key === "ArrowRight" || e.key === " ") {
+        e.preventDefault();
+        goNext();
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        goPrev();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        goToPage(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        goToPage(totalPages - 1);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [goNext, goPrev, goToPage, totalPages]);
+  useEffect3(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const onTouchStart = (e) => {
+      const touch = e.touches[0];
+      touchStartXRef.current = touch.clientX;
+      touchStartYRef.current = touch.clientY;
+      lastTouchXRef.current = touch.clientX;
+      lastTouchTimeRef.current = performance.now();
+      velocityRef.current = 0;
+      isSwipingRef.current = false;
+      isDraggingRef.current = false;
+    };
+    const onTouchMove = (e) => {
+      const touch = e.touches[0];
+      const dx = touch.clientX - touchStartXRef.current;
+      const dy = touch.clientY - touchStartYRef.current;
+      if (!isSwipingRef.current) {
+        if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 10) {
+          isSwipingRef.current = true;
+        } else if (Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 10) {
+          return;
+        } else {
+          return;
+        }
+      }
+      e.preventDefault();
+      const now = performance.now();
+      const timeDelta = now - lastTouchTimeRef.current;
+      if (timeDelta > 0) {
+        const instantVelocity = (touch.clientX - lastTouchXRef.current) / timeDelta;
+        velocityRef.current = 0.6 * instantVelocity + 0.4 * velocityRef.current;
+      }
+      lastTouchXRef.current = touch.clientX;
+      lastTouchTimeRef.current = now;
+      let offset = dx;
+      const atStart = currentPage === 0;
+      const atEnd = currentPage >= totalPages - 1;
+      if (atStart && dx > 0 || atEnd && dx < 0) {
+        const sign = dx > 0 ? 1 : -1;
+        const absDx = Math.abs(dx);
+        offset = sign * Math.sqrt(absDx) * 5;
+        if (dx > 40 && atStart && effectivePrevChapter) {
+          setChapterHint("prev");
+        } else if (dx < -40 && atEnd && effectiveNextChapter) {
+          setChapterHint("next");
+        } else {
+          setChapterHint(null);
+        }
+      } else {
+        setChapterHint(null);
+      }
+      isDraggingRef.current = true;
+      setIsDragging(true);
+      setDragOffset(offset);
+    };
+    const onTouchEnd = (e) => {
+      if (!isSwipingRef.current || !isDraggingRef.current) {
+        setIsDragging(false);
+        setDragOffset(0);
+        setChapterHint(null);
+        return;
+      }
+      const dx = e.changedTouches[0].clientX - touchStartXRef.current;
+      const velocity = velocityRef.current;
+      const distanceThreshold = 50;
+      const velocityThreshold = 0.3;
+      const chapterThreshold = 80;
+      const atStart = currentPage === 0;
+      const atEnd = currentPage >= totalPages - 1;
+      if (atEnd && dx < -chapterThreshold && effectiveNextChapter) {
+        setIsDragging(false);
+        setDragOffset(0);
+        setChapterHint(null);
+        window.location.href = effectiveNextChapter.slug;
+        return;
+      }
+      if (atStart && dx > chapterThreshold && effectivePrevChapter) {
+        setIsDragging(false);
+        setDragOffset(0);
+        setChapterHint(null);
+        window.location.href = effectivePrevChapter.slug;
+        return;
+      }
+      if (dx < -distanceThreshold || velocity < -velocityThreshold) {
+        goNext();
+      } else if (dx > distanceThreshold || velocity > velocityThreshold) {
+        goPrev();
+      }
+      isDraggingRef.current = false;
+      setIsDragging(false);
+      setDragOffset(0);
+      setChapterHint(null);
+    };
+    const onTouchCancel = () => {
+      isDraggingRef.current = false;
+      setIsDragging(false);
+      setDragOffset(0);
+      setChapterHint(null);
+    };
+    container.addEventListener("touchstart", onTouchStart, { passive: true });
+    container.addEventListener("touchmove", onTouchMove, { passive: false });
+    container.addEventListener("touchend", onTouchEnd, { passive: true });
+    container.addEventListener("touchcancel", onTouchCancel, { passive: true });
+    return () => {
+      container.removeEventListener("touchstart", onTouchStart);
+      container.removeEventListener("touchmove", onTouchMove);
+      container.removeEventListener("touchend", onTouchEnd);
+      container.removeEventListener("touchcancel", onTouchCancel);
+    };
+  }, [
+    currentPage,
+    totalPages,
+    goNext,
+    goPrev,
+    effectiveNextChapter,
+    effectivePrevChapter
+  ]);
+  const chapterPageInfo = (() => {
+    if (!isMultiChapter || chapterRanges.length === 0) {
+      return { chapterPage: currentPage, chapterTotalPages: totalPages };
+    }
+    const activeRange = chapterRanges.find((r) => r.slug === activeChapterSlug);
+    if (!activeRange) {
+      return { chapterPage: currentPage, chapterTotalPages: totalPages };
+    }
+    return {
+      chapterPage: currentPage - activeRange.startPage,
+      chapterTotalPages: activeRange.endPage - activeRange.startPage + 1
+    };
+  })();
+  const progressPercent = (() => {
+    if (!allChapters || allChapters.length === 0) {
+      return totalPages > 1 ? currentPage / (totalPages - 1) * 100 : 100;
+    }
+    const totalWords = allChapters.reduce(
+      (sum, ch) => sum + (ch.wordCount || 0),
+      0
+    );
+    if (totalWords === 0) return 0;
+    const firstLoadedSlug = loadedChapters[0]?.slug || activeChapterSlug;
+    let wordsBeforeLoaded = 0;
+    let loadedWords = 0;
+    let foundFirst = false;
+    for (const ch of allChapters) {
+      if (ch.slug === firstLoadedSlug) foundFirst = true;
+      if (!foundFirst) {
+        wordsBeforeLoaded += ch.wordCount || 0;
+      } else if (loadedChapters.some((lc) => lc.slug === ch.slug)) {
+        loadedWords += ch.wordCount || 0;
+      } else {
+        break;
+      }
+    }
+    const pageFraction = totalPages > 1 ? currentPage / (totalPages - 1) : 0;
+    const wordsInto = wordsBeforeLoaded + pageFraction * loadedWords;
+    return Math.min(100, wordsInto / totalWords * 100);
+  })();
+  const renderContent = () => {
+    if (isMultiChapter && loadedChapters.length > 0) {
+      return loadedChapters.map((ch) => /* @__PURE__ */ jsxs4(
+        "section",
+        {
+          class: "pressy-chapter-section",
+          "data-chapter-slug": ch.slug,
+          children: [
+            /* @__PURE__ */ jsx4(ChapterDivider, { title: ch.title }),
+            /* @__PURE__ */ jsx4(ch.Content, { components: mdxComponents || {} })
+          ]
+        },
+        ch.slug
+      ));
+    }
+    return children;
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      class: "pressy-reader pressy-reader--paginated",
+      ref: containerRef,
+      onClick: handleContainerClick,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsx4("div", { class: "pressy-paginated-viewport", ref: viewportRef, children: /* @__PURE__ */ jsx4(
+          "article",
+          {
+            ref: articleRef,
+            class: `pressy-prose pressy-prose--paginated ${showDropCap ? "" : "no-drop-cap"}`,
+            "data-drop-cap": showDropCap,
+            children: renderContent()
+          }
+        ) }),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            class: `pressy-nav-arrow pressy-nav-arrow--prev ${hoverZone === "left" ? "pressy-nav-arrow--visible" : ""}`,
+            children: /* @__PURE__ */ jsx4(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                children: /* @__PURE__ */ jsx4("polyline", { points: "15 18 9 12 15 6" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            class: `pressy-nav-arrow pressy-nav-arrow--next ${hoverZone === "right" ? "pressy-nav-arrow--visible" : ""}`,
+            children: /* @__PURE__ */ jsx4(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                children: /* @__PURE__ */ jsx4("polyline", { points: "9 6 15 12 9 18" })
+              }
+            )
+          }
+        ),
+        chapterHint === "prev" && effectivePrevChapter && /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            class: "pressy-chapter-hint pressy-chapter-hint--prev",
+            "aria-live": "polite",
+            children: [
+              /* @__PURE__ */ jsx4("span", { class: "pressy-chapter-hint-arrow", children: "\u2190" }),
+              /* @__PURE__ */ jsx4("span", { class: "pressy-chapter-hint-text", children: effectivePrevChapter.title })
+            ]
+          }
+        ),
+        chapterHint === "next" && effectiveNextChapter && /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            class: "pressy-chapter-hint pressy-chapter-hint--next",
+            "aria-live": "polite",
+            children: [
+              /* @__PURE__ */ jsx4("span", { class: "pressy-chapter-hint-text", children: effectiveNextChapter.title }),
+              /* @__PURE__ */ jsx4("span", { class: "pressy-chapter-hint-arrow", children: "\u2192" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            class: `pressy-page-footer ${footerVisible || settingsOpen ? "pressy-page-footer--visible" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx4("div", { class: "pressy-progress-bar", children: /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  class: "pressy-progress-fill",
+                  style: { width: `${progressPercent}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxs4("div", { class: "pressy-footer-row", children: [
+                bookTitle && /* @__PURE__ */ jsx4("span", { class: "pressy-footer-title", children: bookTitle }),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    class: "pressy-settings-toggle",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setSettingsOpen(!settingsOpen);
+                    },
+                    "aria-label": "Settings",
+                    children: /* @__PURE__ */ jsxs4(
+                      "svg",
+                      {
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        "stroke-width": "1.5",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        width: "18",
+                        height: "18",
+                        children: [
+                          /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "3" }),
+                          /* @__PURE__ */ jsx4("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
+                        ]
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  class: `pressy-settings-panel ${settingsOpen ? "pressy-settings-panel--open" : ""}`,
+                  children: [
+                    /* @__PURE__ */ jsxs4("div", { class: "pressy-settings-section", children: [
+                      /* @__PURE__ */ jsx4("div", { class: "pressy-settings-label", children: "Theme" }),
+                      /* @__PURE__ */ jsx4("div", { class: "pressy-theme-options", children: [
+                        {
+                          id: "light",
+                          label: "Light",
+                          icon: /* @__PURE__ */ jsxs4(
+                            "svg",
+                            {
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              stroke: "currentColor",
+                              "stroke-width": "1.5",
+                              width: "16",
+                              height: "16",
+                              children: [
+                                /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "5" }),
+                                /* @__PURE__ */ jsx4("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+                                /* @__PURE__ */ jsx4("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+                                /* @__PURE__ */ jsx4("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+                                /* @__PURE__ */ jsx4("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+                                /* @__PURE__ */ jsx4("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+                                /* @__PURE__ */ jsx4("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+                                /* @__PURE__ */ jsx4("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+                                /* @__PURE__ */ jsx4("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+                              ]
+                            }
+                          )
+                        },
+                        {
+                          id: "dark",
+                          label: "Dark",
+                          icon: /* @__PURE__ */ jsx4(
+                            "svg",
+                            {
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              stroke: "currentColor",
+                              "stroke-width": "1.5",
+                              width: "16",
+                              height: "16",
+                              children: /* @__PURE__ */ jsx4("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+                            }
+                          )
+                        },
+                        {
+                          id: "system",
+                          label: "System",
+                          icon: /* @__PURE__ */ jsxs4(
+                            "svg",
+                            {
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              stroke: "currentColor",
+                              "stroke-width": "1.5",
+                              width: "16",
+                              height: "16",
+                              children: [
+                                /* @__PURE__ */ jsx4(
+                                  "rect",
+                                  {
+                                    x: "2",
+                                    y: "3",
+                                    width: "20",
+                                    height: "14",
+                                    rx: "2",
+                                    ry: "2"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx4("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+                                /* @__PURE__ */ jsx4("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+                              ]
+                            }
+                          )
+                        },
+                        {
+                          id: "sepia",
+                          label: "Sepia",
+                          icon: /* @__PURE__ */ jsxs4(
+                            "svg",
+                            {
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              stroke: "currentColor",
+                              "stroke-width": "1.5",
+                              width: "16",
+                              height: "16",
+                              children: [
+                                /* @__PURE__ */ jsx4("path", { d: "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" }),
+                                /* @__PURE__ */ jsx4("path", { d: "M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" })
+                              ]
+                            }
+                          )
+                        }
+                      ].map((t) => /* @__PURE__ */ jsxs4(
+                        "button",
+                        {
+                          class: `pressy-theme-btn ${activeTheme === t.id ? "pressy-theme-btn--active" : ""}`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleThemeChange(t.id);
+                          },
+                          children: [
+                            t.icon,
+                            /* @__PURE__ */ jsx4("span", { children: t.label })
+                          ]
+                        },
+                        t.id
+                      )) })
+                    ] }),
+                    /* @__PURE__ */ jsxs4("div", { class: "pressy-settings-section", children: [
+                      /* @__PURE__ */ jsx4("div", { class: "pressy-settings-label", children: "Font Size" }),
+                      /* @__PURE__ */ jsxs4("div", { class: "pressy-font-size-controls", children: [
+                        /* @__PURE__ */ jsx4(
+                          "button",
+                          {
+                            class: "pressy-font-size-btn",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleFontSizeChange(-0.1);
+                            },
+                            disabled: fontScale <= 0.8,
+                            "aria-label": "Decrease font size",
+                            children: "A-"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs4("span", { class: "pressy-font-size-value", children: [
+                          Math.round(fontScale * 100),
+                          "%"
+                        ] }),
+                        /* @__PURE__ */ jsx4(
+                          "button",
+                          {
+                            class: "pressy-font-size-btn",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleFontSizeChange(0.1);
+                            },
+                            disabled: fontScale >= 1.5,
+                            "aria-label": "Increase font size",
+                            children: "A+"
+                          }
+                        )
+                      ] })
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4(TextShare, {}),
+        /* @__PURE__ */ jsx4(OfflineIndicator, {}),
+        /* @__PURE__ */ jsx4("style", { children: PAGINATED_STYLES })
+      ]
+    }
+  );
+}
+var SCROLL_STYLES = `
+  .pressy-reader {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pressy-reader-main {
+    flex: 1;
+    padding: 2rem 0;
+  }
+`;
+var PAGINATED_STYLES = `
+  html:has(.pressy-reader--paginated) body {
+    margin: 0;
+  }
+
+  .pressy-reader--paginated {
+    height: 100vh;
+    height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+
+  /* Viewport clips overflow and shows one page at a time.
+     Vertical padding gives consistent top/bottom margins on every page. */
+  .pressy-paginated-viewport {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    min-height: 0;
+    padding-block: 2rem;
+    box-sizing: border-box;
+  }
+
+  /* Article uses CSS multi-column layout for pagination.
+     column-width is set dynamically via JS to match viewport width.
+     Each column = one "page". Content overflows horizontally into new columns.
+     translateX controlled by JS \u2014 transitions set dynamically during drag vs snap. */
+  .pressy-prose--paginated {
+    max-width: none;
+    height: 100%;
+    column-fill: auto;
+    column-gap: 0;
+    overflow: visible;
+    box-sizing: border-box;
+    padding: 0;
+    will-change: transform;
+    /* Transition is set dynamically: none during drag, ease-out on snap */
+  }
+
+  /* Center content elements within each column/page at a readable width */
+  .pressy-prose--paginated > * {
+    max-width: min(65ch, calc(100% - 3rem));
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  /* Preserve vertical margins from prose styles */
+  .pressy-prose--paginated > h1,
+  .pressy-prose--paginated > h2,
+  .pressy-prose--paginated > h3,
+  .pressy-prose--paginated > h4 {
+    max-width: min(65ch, calc(100% - 3rem));
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  /* \u2500\u2500 Navigation arrows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  /* Hover-triggered arrows on left/right edges for desktop navigation */
+  .pressy-nav-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted, #6c757d);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+    z-index: 5;
+  }
+
+  .pressy-nav-arrow svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .pressy-nav-arrow--prev {
+    left: 0.75rem;
+  }
+
+  .pressy-nav-arrow--next {
+    right: 0.75rem;
+  }
+
+  .pressy-nav-arrow--visible {
+    opacity: 0.4;
+  }
+
+  /* Hide on touch devices \u2014 swipe handles navigation there */
+  @media (hover: none) {
+    .pressy-nav-arrow {
+      display: none;
+    }
+  }
+
+  /* \u2500\u2500 Chapter boundary hints \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  /* Shown when overscrolling past first/last page of a chapter */
+  .pressy-chapter-hint {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    background: var(--color-bg-subtle, #f5f5f5);
+    border: 1px solid var(--color-border, #dee2e6);
+    border-radius: 0.75rem;
+    font-family: var(--font-heading, system-ui, -apple-system, sans-serif);
+    font-size: var(--font-size-sm, 0.875rem);
+    color: var(--color-text-muted, #6c757d);
+    z-index: 20;
+    pointer-events: none;
+    animation: pressy-hint-fade-in 0.15s ease-out;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    max-width: 60%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .pressy-chapter-hint--prev {
+    left: 1rem;
+  }
+
+  .pressy-chapter-hint--next {
+    right: 1rem;
+  }
+
+  .pressy-chapter-hint-arrow {
+    flex-shrink: 0;
+    font-size: 1rem;
+    opacity: 0.6;
+  }
+
+  .pressy-chapter-hint-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  @keyframes pressy-hint-fade-in {
+    from { opacity: 0; transform: translateY(-50%) scale(0.95); }
+    to { opacity: 1; transform: translateY(-50%) scale(1); }
+  }
+
+  /* \u2500\u2500 Page footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .pressy-page-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0.5rem 1.5rem 1rem;
+    text-align: center;
+    user-select: none;
+    transform: translateY(100%);
+    opacity: 0;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+    z-index: 15;
+    background: var(--color-bg, #ffffff);
+  }
+
+  .pressy-page-footer--visible {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  /* Progress bar */
+  .pressy-progress-bar {
+    height: 3px;
+    background: var(--color-border, #dee2e6);
+    border-radius: 1.5px;
+    overflow: hidden;
+  }
+
+  .pressy-progress-fill {
+    height: 100%;
+    background: var(--color-accent, #212529);
+    border-radius: 1.5px;
+    transition: width 0.3s ease;
+  }
+
+  /* \u2500\u2500 Footer row (title + gear) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .pressy-footer-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+    gap: 0.5rem;
+  }
+
+  .pressy-footer-title {
+    font-family: var(--font-heading, system-ui, -apple-system, sans-serif);
+    font-size: 0.75rem;
+    color: var(--color-text-muted, #6c757d);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .pressy-settings-toggle {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    background: transparent;
+    color: var(--color-text-muted, #6c757d);
+    cursor: pointer;
+    border-radius: 0.375rem;
+    transition: color 0.15s, background 0.15s;
+    padding: 0;
+  }
+
+  .pressy-settings-toggle:hover {
+    color: var(--color-text, #212529);
+    background: var(--color-bg-subtle, #f8f9fa);
+  }
+
+  /* \u2500\u2500 Settings panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .pressy-settings-panel {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    transition: max-height 0.25s ease, opacity 0.2s ease;
+    border-top: 0 solid var(--color-border, #dee2e6);
+  }
+
+  .pressy-settings-panel--open {
+    max-height: 300px;
+    opacity: 1;
+    border-top-width: 1px;
+    margin-top: 0.5rem;
+    padding-top: 0.75rem;
+  }
+
+  .pressy-settings-section {
+    margin-bottom: 0.75rem;
+  }
+
+  .pressy-settings-section:last-child {
+    margin-bottom: 0;
+  }
+
+  .pressy-settings-label {
+    font-family: var(--font-heading, system-ui, -apple-system, sans-serif);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted, #6c757d);
+    margin-bottom: 0.5rem;
+    text-align: left;
+  }
+
+  .pressy-theme-options {
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  .pressy-theme-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.375rem 0.5rem;
+    border: 1.5px solid var(--color-border, #dee2e6);
+    border-radius: 0.5rem;
+    background: transparent;
+    color: var(--color-text, #212529);
+    font-family: var(--font-heading, system-ui, -apple-system, sans-serif);
+    font-size: 0.6875rem;
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s;
+  }
+
+  .pressy-theme-btn:hover {
+    background: var(--color-bg-subtle, #f8f9fa);
+  }
+
+  .pressy-theme-btn--active {
+    border-color: var(--color-accent, #212529);
+    background: var(--color-bg-subtle, #f8f9fa);
+    font-weight: 600;
+  }
+
+  .pressy-font-size-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+  }
+
+  .pressy-font-size-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: 1.5px solid var(--color-border, #dee2e6);
+    border-radius: 50%;
+    background: transparent;
+    color: var(--color-text, #212529);
+    font-family: var(--font-heading, system-ui, -apple-system, sans-serif);
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s;
+  }
+
+  .pressy-font-size-btn:hover:not(:disabled) {
+    background: var(--color-bg-subtle, #f8f9fa);
+    border-color: var(--color-accent, #212529);
+  }
+
+  .pressy-font-size-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .pressy-font-size-value {
+    font-family: var(--font-heading, system-ui, -apple-system, sans-serif);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--color-text, #212529);
+    min-width: 3ch;
+    text-align: center;
+  }
+
+  /* \u2500\u2500 Chapter sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .pressy-chapter-section + .pressy-chapter-section {
+    break-before: column;
+  }
+
+  .pressy-chapter-divider {
+    text-align: center;
+    padding: 3rem 1.5rem;
+    max-width: min(65ch, calc(100% - 3rem));
+    margin: 0 auto;
+  }
+
+  .pressy-chapter-divider-title {
+    font-size: 1.5rem;
+    font-family: var(--font-heading, system-ui, -apple-system, sans-serif);
+    margin: 0;
+  }
+
+  /* \u2500\u2500 Reduced motion preference \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+     Disable page turn animations for users who prefer reduced motion. */
+  @media (prefers-reduced-motion: reduce) {
+    .pressy-prose--paginated {
+      transition: none !important;
+    }
+    .pressy-progress-fill {
+      transition: none !important;
+    }
+  }
+`;
+
+// src/TableOfContents.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "preact/jsx-runtime";
+function TableOfContents({ items, onNavigate, activeSlug }) {
+  const handleClick = (slug) => {
+    const element = document.getElementById(slug);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+    onNavigate?.();
+  };
+  return /* @__PURE__ */ jsxs5("nav", { class: "pressy-toc", "aria-label": "Table of contents", children: [
+    /* @__PURE__ */ jsx5("h2", { class: "pressy-toc-title", children: "Contents" }),
+    /* @__PURE__ */ jsx5("ul", { class: "pressy-toc-list", children: items.map((item) => /* @__PURE__ */ jsx5(
+      "li",
+      {
+        class: `pressy-toc-item pressy-toc-level-${item.level}`,
+        "data-active": activeSlug === item.slug,
+        children: /* @__PURE__ */ jsx5(
+          "a",
+          {
+            href: `#${item.slug}`,
+            onClick: (e) => {
+              e.preventDefault();
+              handleClick(item.slug);
+            },
+            class: "pressy-toc-link",
+            children: item.text
+          }
+        )
+      },
+      item.slug
+    )) }),
+    /* @__PURE__ */ jsx5("style", { children: `
+        .pressy-toc {
+          font-size: var(--font-size-sm);
+        }
+
+        .pressy-toc-title {
+          font-size: var(--font-size-base);
+          font-weight: 600;
+          margin-bottom: 1rem;
+          color: var(--color-heading);
+        }
+
+        .pressy-toc-list {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+
+        .pressy-toc-item {
+          margin-bottom: 0.5rem;
+        }
+
+        .pressy-toc-level-1 {
+          padding-left: 0;
+        }
+
+        .pressy-toc-level-2 {
+          padding-left: 1rem;
+        }
+
+        .pressy-toc-level-3 {
+          padding-left: 2rem;
+        }
+
+        .pressy-toc-level-4 {
+          padding-left: 3rem;
+        }
+
+        .pressy-toc-link {
+          color: var(--color-text-muted);
+          text-decoration: none;
+          transition: color 0.15s;
+          display: block;
+          padding: 0.25rem 0;
+        }
+
+        .pressy-toc-link:hover {
+          color: var(--color-text);
+        }
+
+        .pressy-toc-item[data-active="true"] .pressy-toc-link {
+          color: var(--color-accent);
+          font-weight: 500;
+        }
+      ` })
+  ] });
+}
+
+// src/Paywall.tsx
+import { useSignal as useSignal3 } from "@preact/signals";
+import { jsx as jsx6, jsxs as jsxs6 } from "preact/jsx-runtime";
+function Paywall({
+  bookSlug,
+  bookTitle,
+  previewChapters,
+  currentChapter,
+  shopifyProductId,
+  mode = "email",
+  onUnlock
+}) {
+  const email = useSignal3("");
+  const isLoading = useSignal3(false);
+  const error = useSignal3("");
+  const isUnlocked = useSignal3(false);
+  if (typeof window !== "undefined") {
+    const unlocked = localStorage.getItem(`pressy-unlocked-${bookSlug}`);
+    if (unlocked) {
+      isUnlocked.value = true;
+    }
+  }
+  if (isUnlocked.value) {
+    return null;
+  }
+  if (currentChapter <= previewChapters) {
+    return null;
+  }
+  const handleEmailSubmit = async (e) => {
+    e.preventDefault();
+    if (!email.value || !email.value.includes("@")) {
+      error.value = "Please enter a valid email address";
+      return;
+    }
+    isLoading.value = true;
+    error.value = "";
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 1e3));
+      localStorage.setItem(`pressy-unlocked-${bookSlug}`, "email");
+      localStorage.setItem(`pressy-email-${bookSlug}`, email.value);
+      isUnlocked.value = true;
+      onUnlock?.();
+    } catch (err) {
+      error.value = "Something went wrong. Please try again.";
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const handleShopifyPurchase = async () => {
+    if (!shopifyProductId) {
+      error.value = "Purchase not available";
+      return;
+    }
+    isLoading.value = true;
+    try {
+      const { createCheckout } = await import("@pressy-pub/shopify");
+      const checkoutUrl = await createCheckout(shopifyProductId);
+      window.location.href = checkoutUrl;
+    } catch (err) {
+      error.value = "Failed to create checkout. Please try again.";
+      isLoading.value = false;
+    }
+  };
+  return /* @__PURE__ */ jsxs6("div", { class: "pressy-paywall", children: [
+    /* @__PURE__ */ jsxs6("div", { class: "pressy-paywall-content", children: [
+      /* @__PURE__ */ jsx6("div", { class: "pressy-paywall-icon", children: /* @__PURE__ */ jsx6("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx6("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" }) }) }),
+      /* @__PURE__ */ jsx6("h2", { class: "pressy-paywall-title", children: "Continue Reading" }),
+      /* @__PURE__ */ jsxs6("p", { class: "pressy-paywall-description", children: [
+        "You've enjoyed the first ",
+        previewChapters,
+        ' chapters of "',
+        bookTitle,
+        '".',
+        mode === "shopify" ? " Purchase the full book to continue reading." : " Enter your email to unlock the full book."
+      ] }),
+      mode === "email" ? /* @__PURE__ */ jsxs6("form", { class: "pressy-paywall-form", onSubmit: handleEmailSubmit, children: [
+        /* @__PURE__ */ jsx6(
+          "input",
+          {
+            type: "email",
+            placeholder: "Enter your email",
+            value: email.value,
+            onInput: (e) => email.value = e.target.value,
+            class: "pressy-paywall-input",
+            disabled: isLoading.value
+          }
+        ),
+        /* @__PURE__ */ jsx6("button", { type: "submit", class: "pressy-paywall-button", disabled: isLoading.value, children: isLoading.value ? "Unlocking..." : "Unlock Full Book" })
+      ] }) : /* @__PURE__ */ jsx6(
+        "button",
+        {
+          class: "pressy-paywall-button pressy-paywall-purchase",
+          onClick: handleShopifyPurchase,
+          disabled: isLoading.value,
+          children: isLoading.value ? "Processing..." : "Purchase Now"
+        }
+      ),
+      error.value && /* @__PURE__ */ jsx6("p", { class: "pressy-paywall-error", children: error.value }),
+      /* @__PURE__ */ jsx6("p", { class: "pressy-paywall-note", children: mode === "email" ? "We'll never share your email with anyone." : "Secure checkout powered by Shopify." })
+    ] }),
+    /* @__PURE__ */ jsx6("style", { children: `
+        .pressy-paywall {
+          position: fixed;
+          inset: 0;
+          background: rgba(0, 0, 0, 0.8);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 1000;
+          padding: 1.5rem;
+        }
+
+        .pressy-paywall-content {
+          background: var(--color-bg);
+          border-radius: 1rem;
+          padding: 2.5rem;
+          max-width: 400px;
+          width: 100%;
+          text-align: center;
+        }
+
+        .pressy-paywall-icon {
+          color: var(--color-accent);
+          margin-bottom: 1.5rem;
+        }
+
+        .pressy-paywall-title {
+          font-size: var(--font-size-xl);
+          font-weight: 600;
+          margin-bottom: 0.75rem;
+          color: var(--color-heading);
+        }
+
+        .pressy-paywall-description {
+          color: var(--color-text-muted);
+          margin-bottom: 1.5rem;
+          line-height: 1.5;
+        }
+
+        .pressy-paywall-form {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+
+        .pressy-paywall-input {
+          width: 100%;
+          padding: 0.875rem 1rem;
+          border: 1px solid var(--color-border);
+          border-radius: 0.5rem;
+          font-size: var(--font-size-base);
+          background: var(--color-bg);
+          color: var(--color-text);
+        }
+
+        .pressy-paywall-input:focus {
+          outline: none;
+          border-color: var(--color-accent);
+          box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+        }
+
+        .pressy-paywall-button {
+          width: 100%;
+          padding: 0.875rem 1rem;
+          border: none;
+          border-radius: 0.5rem;
+          font-size: var(--font-size-base);
+          font-weight: 500;
+          background: var(--color-accent);
+          color: white;
+          cursor: pointer;
+          transition: opacity 0.15s;
+        }
+
+        .pressy-paywall-button:hover:not(:disabled) {
+          opacity: 0.9;
+        }
+
+        .pressy-paywall-button:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        .pressy-paywall-error {
+          color: #dc2626;
+          font-size: var(--font-size-sm);
+          margin-top: 0.75rem;
+        }
+
+        .pressy-paywall-note {
+          font-size: var(--font-size-sm);
+          color: var(--color-text-muted);
+          margin-top: 1.5rem;
+        }
+      ` })
+  ] });
+}
+
+// src/ThemeSwitcher.tsx
+import { useSignal as useSignal4 } from "@preact/signals";
+import { jsx as jsx7, jsxs as jsxs7 } from "preact/jsx-runtime";
+var themes = ["light", "dark", "sepia"];
+function ThemeSwitcher() {
+  const isOpen = useSignal4(false);
+  const currentTheme = useSignal4(
+    (typeof localStorage !== "undefined" ? localStorage.getItem("pressy-theme") : "light") || "light"
+  );
+  const setTheme = (theme) => {
+    currentTheme.value = theme;
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("pressy-theme", theme);
+    isOpen.value = false;
+  };
+  const themeIcons = {
+    light: "\u2600\uFE0F",
+    dark: "\u{1F319}",
+    sepia: "\u{1F4DC}"
+  };
+  const themeLabels = {
+    light: "Light",
+    dark: "Dark",
+    sepia: "Sepia"
+  };
+  return /* @__PURE__ */ jsxs7("div", { class: "pressy-theme-switcher", children: [
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        class: "pressy-theme-toggle",
+        onClick: () => isOpen.value = !isOpen.value,
+        "aria-label": "Change theme",
+        "aria-expanded": isOpen.value,
+        children: /* @__PURE__ */ jsx7("span", { class: "pressy-theme-icon", children: themeIcons[currentTheme.value] })
+      }
+    ),
+    isOpen.value && /* @__PURE__ */ jsx7("div", { class: "pressy-theme-menu", role: "menu", children: themes.map((theme) => /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        class: "pressy-theme-option",
+        onClick: () => setTheme(theme),
+        role: "menuitem",
+        "data-active": currentTheme.value === theme,
+        children: [
+          /* @__PURE__ */ jsx7("span", { class: "pressy-theme-icon", children: themeIcons[theme] }),
+          /* @__PURE__ */ jsx7("span", { class: "pressy-theme-label", children: themeLabels[theme] })
+        ]
+      },
+      theme
+    )) }),
+    /* @__PURE__ */ jsx7("style", { children: `
+        .pressy-theme-switcher {
+          position: relative;
+        }
+
+        .pressy-theme-toggle {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 2.5rem;
+          height: 2.5rem;
+          border: none;
+          background: transparent;
+          cursor: pointer;
+          border-radius: 0.5rem;
+          transition: background 0.15s;
+          font-size: 1.25rem;
+        }
+
+        .pressy-theme-toggle:hover {
+          background: var(--color-bg-muted);
+        }
+
+        .pressy-theme-menu {
+          position: absolute;
+          top: 100%;
+          right: 0;
+          margin-top: 0.5rem;
+          background: var(--color-bg);
+          border: 1px solid var(--color-border);
+          border-radius: 0.5rem;
+          box-shadow: var(--shadow-md);
+          overflow: hidden;
+          z-index: 100;
+        }
+
+        .pressy-theme-option {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border: none;
+          background: transparent;
+          cursor: pointer;
+          text-align: left;
+          color: var(--color-text);
+          transition: background 0.15s;
+        }
+
+        .pressy-theme-option:hover {
+          background: var(--color-bg-subtle);
+        }
+
+        .pressy-theme-option[data-active="true"] {
+          background: var(--color-bg-muted);
+          font-weight: 500;
+        }
+
+        .pressy-theme-label {
+          font-size: var(--font-size-sm);
+        }
+      ` })
+  ] });
+}
+
+// src/DownloadBook.tsx
+import { useSignal as useSignal5 } from "@preact/signals";
+import { useEffect as useEffect4 } from "preact/hooks";
+import { jsx as jsx8, jsxs as jsxs8 } from "preact/jsx-runtime";
+var CACHED_BOOKS_KEY = "pressy-cached-books";
+function readCachedBooks() {
+  try {
+    const stored = localStorage.getItem(CACHED_BOOKS_KEY);
+    if (stored) return new Set(JSON.parse(stored));
+  } catch {
+  }
+  return /* @__PURE__ */ new Set();
+}
+function DownloadBook({
+  bookSlug,
+  chapterUrls,
+  cachedBooks,
+  cacheProgress,
+  onDownload,
+  onRemove
+}) {
+  const isCached = useSignal5(readCachedBooks().has(bookSlug) || cachedBooks.value.has(bookSlug));
+  const isDownloading = useSignal5(cacheProgress.value?.bookSlug === bookSlug);
+  const progress = useSignal5(null);
+  useEffect4(() => {
+    const check = () => {
+      isCached.value = readCachedBooks().has(bookSlug) || cachedBooks.value.has(bookSlug);
+      isDownloading.value = cacheProgress.value?.bookSlug === bookSlug;
+      const p = cacheProgress.value;
+      progress.value = p && p.bookSlug === bookSlug ? Math.round(p.current / p.total * 100) : null;
+    };
+    const interval = setInterval(check, 500);
+    check();
+    return () => clearInterval(interval);
+  }, [bookSlug]);
+  if (isCached.value) {
+    return /* @__PURE__ */ jsxs8("div", { class: "pressy-download-book", children: [
+      /* @__PURE__ */ jsxs8("div", { class: "pressy-download-status", children: [
+        /* @__PURE__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx8("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" }) }),
+        /* @__PURE__ */ jsx8("span", { children: "Available offline" })
+      ] }),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          class: "pressy-download-remove",
+          onClick: () => onRemove(bookSlug),
+          "aria-label": "Remove offline copy",
+          children: "Remove"
+        }
+      ),
+      /* @__PURE__ */ jsx8("style", { children: STYLES })
+    ] });
+  }
+  if (isDownloading.value) {
+    return /* @__PURE__ */ jsxs8("div", { class: "pressy-download-book", children: [
+      /* @__PURE__ */ jsxs8("div", { class: "pressy-download-progress", children: [
+        /* @__PURE__ */ jsx8("div", { class: "pressy-download-bar", children: /* @__PURE__ */ jsx8(
+          "div",
+          {
+            class: "pressy-download-bar-fill",
+            style: { width: `${progress.value || 0}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs8("span", { class: "pressy-download-percent", children: [
+          progress.value || 0,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx8("style", { children: STYLES })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs8("div", { class: "pressy-download-book", children: [
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        class: "pressy-download-btn",
+        onClick: () => onDownload(bookSlug, chapterUrls),
+        "aria-label": "Download for offline reading",
+        children: [
+          /* @__PURE__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx8("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }) }),
+          /* @__PURE__ */ jsx8("span", { children: "Download for offline" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8("style", { children: STYLES })
+  ] });
+}
+var STYLES = `
+  .pressy-download-book {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 0;
+  }
+
+  .pressy-download-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    font-family: inherit;
+    font-size: var(--font-size-sm, 0.875rem);
+    color: var(--color-text, #1a1a1a);
+    background: var(--color-bg-muted, #f5f5f5);
+    border: 1px solid var(--color-border, #e5e5e5);
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+  }
+
+  .pressy-download-btn:hover {
+    background: var(--color-bg-subtle, #eee);
+    border-color: var(--color-text-muted, #999);
+  }
+
+  .pressy-download-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: var(--font-size-sm, 0.875rem);
+    color: #16a34a;
+  }
+
+  .pressy-download-remove {
+    font-family: inherit;
+    font-size: var(--font-size-sm, 0.875rem);
+    color: var(--color-text-muted, #666);
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-decoration: underline;
+    padding: 0;
+  }
+
+  .pressy-download-remove:hover {
+    color: var(--color-text, #1a1a1a);
+  }
+
+  .pressy-download-progress {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex: 1;
+    max-width: 300px;
+  }
+
+  .pressy-download-bar {
+    flex: 1;
+    height: 6px;
+    background: var(--color-bg-muted, #f5f5f5);
+    border-radius: 3px;
+    overflow: hidden;
+  }
+
+  .pressy-download-bar-fill {
+    height: 100%;
+    background: var(--color-text, #1a1a1a);
+    border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  .pressy-download-percent {
+    font-size: var(--font-size-sm, 0.875rem);
+    color: var(--color-text-muted, #666);
+    min-width: 3ch;
+    text-align: right;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .pressy-download-status {
+      color: #86efac;
+    }
+  }
+`;
+
+// src/BookProgress.tsx
+import { useState as useState2, useEffect as useEffect5 } from "preact/hooks";
+import { jsx as jsx9, jsxs as jsxs9 } from "preact/jsx-runtime";
+function BookProgress({
+  chapters,
+  basePath,
+  bookSlug,
+  loadAllProgress
+}) {
+  const [progressMap, setProgressMap] = useState2(/* @__PURE__ */ new Map());
+  useEffect5(() => {
+    loadAllProgress().then((allProgress) => {
+      const chapterSlugs = new Set(chapters.map((ch) => ch.slug));
+      const map = /* @__PURE__ */ new Map();
+      for (const p of allProgress) {
+        if (chapterSlugs.has(p.chapterSlug)) {
+          map.set(p.chapterSlug, { page: p.page, totalPages: p.totalPages });
+        }
+      }
+      setProgressMap(map);
+    });
+  }, [chapters, loadAllProgress]);
+  const totalWords = chapters.reduce((sum, ch) => sum + (ch.wordCount || 0), 0);
+  let wordsRead = 0;
+  let chaptersCompleted = 0;
+  let chaptersStarted = 0;
+  for (const ch of chapters) {
+    const progress = progressMap.get(ch.slug);
+    if (!progress) continue;
+    const chapterWords = ch.wordCount || 0;
+    if (progress.totalPages > 0 && progress.page >= progress.totalPages - 1) {
+      wordsRead += chapterWords;
+      chaptersCompleted++;
+      chaptersStarted++;
+    } else if (progress.page > 0 && progress.totalPages > 0) {
+      wordsRead += progress.page / progress.totalPages * chapterWords;
+      chaptersStarted++;
+    }
+  }
+  const overallPercent = totalWords > 0 ? wordsRead / totalWords * 100 : 0;
+  const hasAnyProgress = chaptersStarted > 0;
+  return /* @__PURE__ */ jsxs9("div", { class: "pressy-book-progress-section", children: [
+    hasAnyProgress && /* @__PURE__ */ jsxs9("div", { class: "pressy-overall-progress", children: [
+      /* @__PURE__ */ jsx9("div", { class: "pressy-overall-progress-bar", children: /* @__PURE__ */ jsx9(
+        "div",
+        {
+          class: "pressy-overall-progress-fill",
+          style: { width: `${overallPercent}%` }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs9("div", { class: "pressy-overall-progress-text", children: [
+        Math.round(overallPercent),
+        "% complete",
+        /* @__PURE__ */ jsxs9("span", { class: "pressy-overall-progress-detail", children: [
+          chaptersCompleted,
+          " of ",
+          chapters.length,
+          " chapters"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9("nav", { class: "pressy-chapter-list", children: chapters.map((ch) => {
+      const progress = progressMap.get(ch.slug);
+      const isCompleted = progress && progress.totalPages > 0 && progress.page >= progress.totalPages - 1;
+      const isStarted = progress && progress.page > 0 && !isCompleted;
+      return /* @__PURE__ */ jsxs9(
+        "a",
+        {
+          href: `${basePath}/books/${bookSlug}/${ch.slug}`,
+          class: `pressy-chapter-link ${isCompleted ? "pressy-chapter--completed" : ""} ${isStarted ? "pressy-chapter--started" : ""}`,
+          children: [
+            /* @__PURE__ */ jsxs9("span", { class: "pressy-chapter-order", children: [
+              ch.order,
+              "."
+            ] }),
+            /* @__PURE__ */ jsx9("span", { class: "pressy-chapter-title", children: ch.title }),
+            isCompleted && /* @__PURE__ */ jsx9("span", { class: "pressy-chapter-badge pressy-chapter-badge--done", children: "Done" }),
+            isStarted && progress && /* @__PURE__ */ jsxs9("span", { class: "pressy-chapter-badge pressy-chapter-badge--reading", children: [
+              "p.",
+              progress.page + 1,
+              "/",
+              progress.totalPages
+            ] })
+          ]
+        }
+      );
+    }) }),
+    /* @__PURE__ */ jsx9("style", { children: BOOK_PROGRESS_STYLES })
+  ] });
+}
+var BOOK_PROGRESS_STYLES = `
+  .pressy-overall-progress {
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background: var(--color-bg-subtle, #f5f5f5);
+    border-radius: 0.5rem;
+  }
+
+  .pressy-overall-progress-bar {
+    height: 4px;
+    background: var(--color-border, #dee2e6);
+    border-radius: 2px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+  }
+
+  .pressy-overall-progress-fill {
+    height: 100%;
+    background: var(--color-accent, #212529);
+    border-radius: 2px;
+    transition: width 0.3s ease;
+  }
+
+  .pressy-overall-progress-text {
+    font-family: var(--font-heading, system-ui, -apple-system, sans-serif);
+    font-size: var(--font-size-sm, 0.875rem);
+    color: var(--color-text-muted, #6c757d);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .pressy-overall-progress-detail {
+    opacity: 0.7;
+  }
+
+  .pressy-chapter-link {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    text-decoration: none;
+    color: var(--color-text, #1a1a1a);
+    border-radius: 0.5rem;
+    transition: background 0.15s;
+  }
+
+  .pressy-chapter-link:hover {
+    background: var(--color-bg-subtle, #f5f5f5);
+  }
+
+  .pressy-chapter--completed {
+    opacity: 0.7;
+  }
+
+  .pressy-chapter-title {
+    flex: 1;
+  }
+
+  .pressy-chapter-badge {
+    font-family: var(--font-heading, system-ui, -apple-system, sans-serif);
+    font-size: 0.75rem;
+    padding: 0.15rem 0.5rem;
+    border-radius: 0.25rem;
+    white-space: nowrap;
+  }
+
+  .pressy-chapter-badge--done {
+    background: var(--color-accent, #212529);
+    color: var(--color-bg, #fff);
+  }
+
+  .pressy-chapter-badge--reading {
+    background: var(--color-bg-subtle, #f5f5f5);
+    color: var(--color-text-muted, #6c757d);
+    border: 1px solid var(--color-border, #dee2e6);
+  }
+`;
+export {
+  BookProgress,
+  DownloadBook,
+  Navigation,
+  OfflineIndicator,
+  Paywall,
+  Reader,
+  TableOfContents,
+  TextShare,
+  ThemeSwitcher
+};
+//# sourceMappingURL=index.js.map