zreader 0.0.0-stage → 0.1.0

package/dist/react/index.js

@@ -0,0 +1,2793 @@
+"use client";
+import * as React13 from 'react';
+import { forwardRef, createContext, lazy, useMemo, useState, useEffect, useContext, useSyncExternalStore, useRef, Suspense, useId, useCallback, Component } from 'react';
+import { ThemeProvider, useTheme } from 'next-themes';
+import { DEFAULT_CLIENT_OPTIONS, createReaderStore, createLocalStorageAdapter, TEXT_SIZES, LEADINGS, MEASURES, FONT_FAMILIES, exportBackup, highlightsToMarkdown, requestPersistentStorage, buildTextIndex, resolveAnchor, spanToRange, describeSpan, paintHighlights, expandSpanToSentences, findBlock, BLOCK_ATTR, supportsHighlightApi, highlightToMarkdown, quoteToMarkdown, importBackup, ensureBlockIds, collectToc, IGNORE_ATTR, offsetFromPoint, highlightAtOffset, sentenceSpanAt, selectionSpan } from 'zreader';
+import { cn } from 'cn';
+import { Tooltip as Tooltip$1, Dialog as Dialog$1, Tabs as Tabs$1, Slot, ScrollArea as ScrollArea$1, ToggleGroup as ToggleGroup$1, Label as Label$1, DropdownMenu as DropdownMenu$1, Separator, Popover as Popover$1, Switch as Switch$1, Progress as Progress$1, Toggle as Toggle$1 } from 'radix-ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { CheckCircle2Icon, SearchIcon, Trash2Icon, CopyIcon, QuoteIcon, EllipsisIcon, DownloadIcon, XIcon, TextSelectIcon, MessageSquarePlusIcon, RotateCcwIcon, HardDriveIcon, UploadIcon, ChevronLeftIcon, ListIcon, BookmarkIcon, HighlighterIcon, TypeIcon, NotebookPenIcon, CheckIcon, ArrowLeftIcon, ArrowRightIcon, BookOpenIcon, CircleIcon, LightbulbIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, GripVerticalIcon } from 'lucide-react';
+import { toast, Toaster as Toaster$1 } from 'sonner';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import { usePanelRef, useDefaultLayout } from 'react-resizable-panels';
+import { cva } from 'class-variance-authority';
+import { Drawer as Drawer$1 } from 'vaul';
+
+// src/react/context.tsx
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })
+      ]
+    }
+  ) });
+}
+var DefaultLink = forwardRef(
+  function DefaultLink2(props, ref) {
+    return /* @__PURE__ */ jsx("a", { ref, ...props });
+  }
+);
+function defaultHref(basePath, bookId, chapterId, hash) {
+  const base = basePath.replace(/\/+$/, "");
+  const path = chapterId ? `${base}/${encodeURIComponent(bookId)}/${encodeURIComponent(chapterId)}` : `${base}/${encodeURIComponent(bookId)}`;
+  return hash ? `${path}#${encodeURIComponent(hash)}` : path;
+}
+var Toaster = ({ ...props }) => {
+  const { theme = "system" } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      theme,
+      className: "toaster group",
+      icons: {
+        success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
+        error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
+      },
+      style: {
+        "--normal-bg": "var(--popover)",
+        "--normal-text": "var(--popover-foreground)",
+        "--normal-border": "var(--border)",
+        "--border-radius": "var(--radius)"
+      },
+      ...props
+    }
+  );
+};
+function isPlainObject(x) {
+  if (typeof x !== "object" || x === null || Array.isArray(x)) return false;
+  const proto = Object.getPrototypeOf(x);
+  return proto === Object.prototype || proto === null;
+}
+function mergeOptions(base, ...overrides) {
+  const merge = (a, b) => {
+    if (b === void 0 || b === null) return a;
+    if (isPlainObject(a) && isPlainObject(b)) {
+      const out = { ...a };
+      for (const [k, v] of Object.entries(b)) out[k] = merge(a[k], v);
+      return out;
+    }
+    return b;
+  };
+  return overrides.reduce(merge, base);
+}
+var ReaderContext = createContext(null);
+function ReaderProvider({
+  options,
+  overrides,
+  adapter,
+  store: external,
+  onStorageError,
+  manageTheme = true,
+  toaster = true,
+  books,
+  Link,
+  hrefFor,
+  headerSlot,
+  children
+}) {
+  const key = JSON.stringify([options ?? null, overrides ?? null]);
+  const resolved = useMemo(
+    () => mergeOptions(DEFAULT_CLIENT_OPTIONS, options, overrides),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [key]
+  );
+  const [store] = useState(
+    () => external ?? createReaderStore({ adapter: adapter ?? createLocalStorageAdapter(), options: resolved, onError: onStorageError })
+  );
+  useEffect(() => store.connect(), [store]);
+  const library = useMemo(() => {
+    const list = books ?? [];
+    const byId = new Map(list.map((b) => [b.id, b]));
+    return {
+      books: list,
+      getBook: (id) => byId.get(id),
+      Link: Link ?? DefaultLink,
+      href: hrefFor ?? ((b, c, h) => defaultHref(resolved.basePath, b, c, h)),
+      headerSlot
+    };
+  }, [books, Link, hrefFor, headerSlot, resolved.basePath]);
+  const value = useMemo(() => ({ store, options: resolved, library }), [store, resolved, library]);
+  const tree = /* @__PURE__ */ jsx(ReaderContext.Provider, { value, children: /* @__PURE__ */ jsxs(TooltipProvider, { delayDuration: 400, children: [
+    children,
+    toaster && /* @__PURE__ */ jsx(Toaster, { position: "top-center" })
+  ] }) });
+  if (!manageTheme) return tree;
+  return /* @__PURE__ */ jsx(
+    ThemeProvider,
+    {
+      attribute: "class",
+      themes: resolved.themes.filter((t) => t !== "system"),
+      enableSystem: resolved.themes.includes("system"),
+      defaultTheme: resolved.defaultTheme,
+      storageKey: `${resolved.storagePrefix}:v1:theme`,
+      disableTransitionOnChange: true,
+      children: tree
+    }
+  );
+}
+function useReader() {
+  const ctx = useContext(ReaderContext);
+  if (!ctx) throw new Error("zreader: wrap your tree in <ReaderProvider> (or <ReaderRoot>).");
+  return ctx;
+}
+function useLibrary() {
+  return useReader().library;
+}
+function useBook(book) {
+  const { getBook, books } = useLibrary();
+  if (typeof book !== "string") return book;
+  const found = getBook(book);
+  if (!found) {
+    throw new Error(
+      books.length ? `zreader: no book with id "${book}" in <ReaderProvider books>. Known: ${books.map((b) => b.id).join(", ")}.` : `zreader: <\u2026 book="${book}"> needs the catalogue. Pass books to <ReaderProvider books={\u2026}> (or use <ReaderRoot>, which loads them).`
+    );
+  }
+  return found;
+}
+function useReaderStore() {
+  return useReader().store;
+}
+function useCell(cell, serverValue) {
+  return useSyncExternalStore(cell.subscribe, cell.get, () => serverValue);
+}
+var noopSubscribe = () => () => {
+};
+function useHydrated() {
+  return useSyncExternalStore(
+    noopSubscribe,
+    () => true,
+    () => false
+  );
+}
+function useSettings() {
+  const store = useReaderStore();
+  const settings = useCell(store.settings(), store.server.settings);
+  return [settings, store.updateSettings];
+}
+function useHighlights(bookId, chapterId) {
+  const store = useReaderStore();
+  const all = useCell(store.highlights(bookId), store.server.list);
+  return useMemo(() => chapterId ? all.filter((h) => h.chapterId === chapterId) : all, [all, chapterId]);
+}
+function useBookmarks(bookId) {
+  const store = useReaderStore();
+  return useCell(store.bookmarks(bookId), store.server.list);
+}
+function useProgress(bookId) {
+  const store = useReaderStore();
+  return useCell(store.progress(bookId), store.server.progress(bookId));
+}
+function usePad(scope) {
+  const store = useReaderStore();
+  return useCell(store.pad(scope), store.server.pad);
+}
+function useMediaQuery(query, serverValue = false) {
+  return useSyncExternalStore(
+    (cb) => {
+      if (typeof window === "undefined" || !window.matchMedia) return () => {
+      };
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", cb);
+      return () => mql.removeEventListener("change", cb);
+    },
+    () => typeof window !== "undefined" && window.matchMedia ? window.matchMedia(query).matches : serverValue,
+    () => serverValue
+  );
+}
+function useIsDesktop() {
+  return useMediaQuery("(min-width: 1024px)", false);
+}
+var buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Drawer$1.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-background",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function Progress({
+  className,
+  value,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Progress$1.Root,
+    {
+      "data-slot": "progress",
+      className: cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Progress$1.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: "h-full w-full flex-1 bg-primary transition-all",
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+}
+function ResizablePanelGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Group,
+    {
+      "data-slot": "resizable-panel-group",
+      className: cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ResizablePanel({ ...props }) {
+  return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+}
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Separator,
+    {
+      "data-slot": "resizable-handle",
+      className: cn(
+        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border", children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-2.5" }) })
+    }
+  );
+}
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Toggle$1.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ScrollArea$1.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollArea$1.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollArea$1.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollArea$1.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-full bg-border"
+        }
+      )
+    }
+  );
+}
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "sheet", ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog$1.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+            /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      orientation,
+      className: cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn(tabsListVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none", className),
+      ...props
+    }
+  );
+}
+
+// src/react/parts.ts
+function groupByPart(chapters) {
+  const groups = [];
+  chapters.forEach((chapter, index) => {
+    const part = chapter.part ?? null;
+    const last = groups[groups.length - 1];
+    if (last && last.part === part) last.items.push({ chapter, index });
+    else groups.push({ part, items: [{ chapter, index }] });
+  });
+  return groups;
+}
+function chapterMarker(chapter, index) {
+  return chapter.number ?? (chapter.part || chapter.label ? "" : String(index + 1));
+}
+
+// src/react/tokens.ts
+var TEXT_SIZE_CLASS = {
+  sm: "prose-sm",
+  base: "prose-base",
+  lg: "prose-lg",
+  xl: "prose-xl",
+  "2xl": "prose-2xl"
+};
+var LEADING_CLASS = {
+  tight: "prose-p:leading-snug prose-li:leading-snug",
+  normal: "prose-p:leading-normal prose-li:leading-normal",
+  relaxed: "prose-p:leading-relaxed prose-li:leading-relaxed"
+};
+var MEASURE_CLASS = {
+  narrow: "max-w-[58ch]",
+  normal: "max-w-[68ch]",
+  wide: "max-w-[82ch]"
+};
+var FONT_CLASS = {
+  serif: "font-serif",
+  sans: "font-sans",
+  mono: "font-mono"
+};
+var SWATCH_CLASS = {
+  yellow: "bg-yellow-300 dark:bg-yellow-400/70",
+  green: "bg-green-300 dark:bg-green-400/60",
+  blue: "bg-sky-300 dark:bg-sky-400/60",
+  pink: "bg-pink-300 dark:bg-pink-400/60",
+  purple: "bg-violet-300 dark:bg-violet-400/60",
+  orange: "bg-orange-300 dark:bg-orange-400/60"
+};
+var QUOTE_BORDER_CLASS = {
+  yellow: "border-yellow-400",
+  green: "border-green-400",
+  blue: "border-sky-400",
+  pink: "border-pink-400",
+  purple: "border-violet-400",
+  orange: "border-orange-400"
+};
+function swatchClass(color) {
+  return SWATCH_CLASS[color] ?? SWATCH_CLASS.yellow;
+}
+function quoteBorderClass(color) {
+  return QUOTE_BORDER_CLASS[color] ?? QUOTE_BORDER_CLASS.yellow;
+}
+var PROSE_CLASS = "prose max-w-none text-foreground prose-headings:text-foreground prose-headings:scroll-mt-20 prose-p:text-foreground prose-li:text-foreground prose-strong:text-foreground prose-a:text-primary prose-a:underline-offset-4 prose-blockquote:border-l-border prose-blockquote:text-muted-foreground prose-code:text-foreground prose-pre:bg-muted prose-pre:text-foreground prose-hr:border-border prose-th:text-foreground prose-td:text-foreground prose-figcaption:text-muted-foreground prose-img:rounded-lg prose-table:block prose-table:max-w-full prose-table:overflow-x-auto prose-th:align-bottom prose-td:align-top";
+var dateFmt = (iso) => new Date(iso).toLocaleDateString(void 0, { month: "short", day: "numeric" });
+function ContentsSheet(p) {
+  const { book, chapterId, Link } = p;
+  const store = useReaderStore();
+  const highlights = useHighlights(book.id);
+  const bookmarks = useBookmarks(book.id);
+  const progress = useProgress(book.id);
+  const [query, setQuery] = useState("");
+  const titles = useMemo(() => new Map(book.chapters.map((c) => [c.id, c.title])), [book.chapters]);
+  const order = useMemo(() => new Map(book.chapters.map((c, i) => [c.id, i])), [book.chapters]);
+  const grouped = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const groups = /* @__PURE__ */ new Map();
+    highlights.filter((h) => !q || h.anchor.exact.toLowerCase().includes(q) || h.note?.toLowerCase().includes(q)).sort((a, b) => (order.get(a.chapterId) ?? 0) - (order.get(b.chapterId) ?? 0) || a.anchor.start - b.anchor.start).forEach((h) => groups.set(h.chapterId, [...groups.get(h.chapterId) ?? [], h]));
+    return groups;
+  }, [highlights, query, order]);
+  const sortedBookmarks = useMemo(
+    () => [...bookmarks].sort((a, b) => (order.get(a.chapterId) ?? 0) - (order.get(b.chapterId) ?? 0)),
+    [bookmarks, order]
+  );
+  const close = () => p.onOpenChange(false);
+  const jumpOr = (targetChapter, inPage) => (e) => {
+    if (targetChapter !== chapterId) return close();
+    e.preventDefault();
+    close();
+    inPage();
+  };
+  return /* @__PURE__ */ jsx(Sheet, { open: p.open, onOpenChange: p.onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-[88vw] gap-0 p-0 sm:max-w-sm", children: [
+    /* @__PURE__ */ jsxs(SheetHeader, { className: "border-b", children: [
+      /* @__PURE__ */ jsx(SheetTitle, { className: "line-clamp-2", children: book.title }),
+      book.authors.length > 0 && /* @__PURE__ */ jsx(SheetDescription, { children: book.authors.join(", ") })
+    ] }),
+    /* @__PURE__ */ jsxs(Tabs, { value: p.tab, onValueChange: (v) => p.onTabChange(v), className: "min-h-0 flex-1 gap-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-4 pt-3", children: /* @__PURE__ */ jsxs(TabsList, { className: "w-full", children: [
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "contents", children: "Contents" }),
+        /* @__PURE__ */ jsxs(TabsTrigger, { value: "highlights", children: [
+          "Highlights",
+          highlights.length > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: highlights.length })
+        ] }),
+        /* @__PURE__ */ jsxs(TabsTrigger, { value: "bookmarks", children: [
+          "Bookmarks",
+          bookmarks.length > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: bookmarks.length })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "contents", className: "min-h-0", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 p-2", children: groupByPart(book.chapters).map((group) => /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-0.5", children: [
+        group.part && /* @__PURE__ */ jsx("h3", { className: "px-3 pt-2 pb-1 text-xs font-medium tracking-wide text-muted-foreground uppercase", children: group.part }),
+        /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-0.5", children: group.items.map(({ chapter: c, index: i }) => {
+          const pr = progress.chapters[c.id];
+          const current = c.id === chapterId;
+          return /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(Button, { asChild: true, variant: current ? "secondary" : "ghost", className: "h-auto w-full justify-start gap-3 py-2 text-left whitespace-normal", children: /* @__PURE__ */ jsxs(Link, { href: p.hrefFor(c.id), "aria-current": current ? "page" : void 0, onClick: close, children: [
+              /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0 text-xs text-muted-foreground tabular-nums", children: chapterMarker(c, i) }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: c.title }),
+              pr?.completed ? /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "text-primary", "aria-label": "Completed" }) : pr ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground tabular-nums", children: [
+                Math.round(pr.percent * 100),
+                "%"
+              ] }) : null
+            ] }) }),
+            current && p.toc.length > 0 && /* @__PURE__ */ jsx("ol", { className: "my-1 ml-8 flex flex-col border-l", children: p.toc.map((t) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                asChild: true,
+                variant: "link",
+                size: "sm",
+                className: cn("h-auto w-full justify-start py-1.5 text-left whitespace-normal text-muted-foreground", t.depth > 2 && "pl-6"),
+                children: /* @__PURE__ */ jsx("a", { href: `#${t.id}`, onClick: jumpOr(chapterId, () => p.onJumpHeading(t.id)), children: t.text })
+              }
+            ) }, t.id)) })
+          ] }, c.id);
+        }) })
+      ] }, group.part ?? "_")) }) }) }),
+      /* @__PURE__ */ jsxs(TabsContent, { value: "highlights", className: "flex min-h-0 flex-col", children: [
+        highlights.length > 3 && /* @__PURE__ */ jsx("div", { className: "px-4 pt-3", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(Input, { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search highlights and notes", "aria-label": "Search highlights", className: "pl-8" })
+        ] }) }),
+        /* @__PURE__ */ jsx(ScrollArea, { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+          grouped.size === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: highlights.length ? "No matches." : "Select text \u2014 or turn on highlight mode and tap a sentence \u2014 to highlight it." }),
+          [...grouped].map(([cid, list]) => /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: titles.get(cid) ?? cid }),
+            /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: list.map((h) => /* @__PURE__ */ jsxs("li", { className: "group flex items-start gap-1", children: [
+              /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  href: p.hrefFor(cid, `hl-${h.id}`),
+                  onClick: jumpOr(cid, () => p.onJumpHighlight(h.id)),
+                  className: cn("flex-1 rounded-md border-l-4 bg-muted/40 px-3 py-2 text-sm transition-colors hover:bg-muted", quoteBorderClass(h.color)),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "line-clamp-3 font-serif", children: h.anchor.exact }),
+                    h.note && /* @__PURE__ */ jsx("span", { className: "mt-1 line-clamp-2 block text-muted-foreground", children: h.note }),
+                    /* @__PURE__ */ jsxs("span", { className: "mt-1 flex items-center gap-2 text-xs text-muted-foreground", children: [
+                      dateFmt(h.updatedAt),
+                      cid === chapterId && p.orphanedIds.has(h.id) && /* @__PURE__ */ jsx(Badge, { variant: "outline", title: "The passage changed and this highlight could not be placed", children: "Unplaced" })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Delete highlight", onClick: () => store.removeHighlight(book.id, h.id), children: /* @__PURE__ */ jsx(Trash2Icon, {}) })
+            ] }, h.id)) })
+          ] }, cid))
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "bookmarks", className: "min-h-0", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("ul", { className: "flex flex-col gap-2 p-4", children: [
+        sortedBookmarks.length === 0 && /* @__PURE__ */ jsx("li", { className: "text-sm text-muted-foreground", children: "Use the bookmark button to save your place." }),
+        sortedBookmarks.map((b) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-1", children: [
+          /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: p.hrefFor(b.chapterId, b.blockId ? `b-${b.blockId}` : void 0),
+              onClick: b.blockId ? jumpOr(b.chapterId, () => p.onJumpBlock(b.blockId)) : close,
+              className: "flex-1 rounded-md bg-muted/40 px-3 py-2 text-sm transition-colors hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "block font-medium", children: b.label ?? titles.get(b.chapterId) ?? b.chapterId }),
+                b.excerpt && /* @__PURE__ */ jsx("span", { className: "mt-0.5 line-clamp-2 block text-muted-foreground", children: b.excerpt }),
+                /* @__PURE__ */ jsx("span", { className: "mt-1 block text-xs text-muted-foreground", children: dateFmt(b.createdAt) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Remove bookmark", onClick: () => store.removeBookmark(book.id, b.id), children: /* @__PURE__ */ jsx(Trash2Icon, {}) })
+        ] }, b.id))
+      ] }) }) })
+    ] })
+  ] }) });
+}
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Label$1.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var ToggleGroupContext = React13.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 0
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroup$1.Root,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      "data-spacing": spacing,
+      style: { "--gap": spacing },
+      className: cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React13.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroup$1.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      "data-spacing": context.spacing,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog$1.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            Dialog$1.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Close" }) })
+      ]
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function ResponsivePanel({
+  open,
+  onOpenChange,
+  title,
+  description,
+  desktop = "dialog",
+  hideHeader,
+  footer,
+  className,
+  children
+}) {
+  const isDesktop = useIsDesktop();
+  const headerClass = hideHeader ? "sr-only" : void 0;
+  if (isDesktop && desktop === "dialog") {
+    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: cn("sm:max-w-lg", className), children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { className: headerClass, children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+        description ? /* @__PURE__ */ jsx(DialogDescription, { children: description }) : null
+      ] }),
+      children,
+      footer ? /* @__PURE__ */ jsx(DialogFooter, { children: footer }) : null
+    ] }) });
+  }
+  if (isDesktop) {
+    return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { side: desktop === "sheet-left" ? "left" : "right", className: cn("w-full gap-0 sm:max-w-md", className), children: [
+      /* @__PURE__ */ jsxs(SheetHeader, { className: headerClass, children: [
+        /* @__PURE__ */ jsx(SheetTitle, { children: title }),
+        description ? /* @__PURE__ */ jsx(SheetDescription, { children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsx(ScrollArea, { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children }) }),
+      footer ? /* @__PURE__ */ jsx(SheetFooter, { children: footer }) : null
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DrawerContent, { className: cn("max-h-[92svh]", className), children: [
+    /* @__PURE__ */ jsxs(DrawerHeader, { className: cn("text-left", headerClass), children: [
+      /* @__PURE__ */ jsx(DrawerTitle, { children: title }),
+      description ? /* @__PURE__ */ jsx(DrawerDescription, { children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-4", children }),
+    footer ? /* @__PURE__ */ jsx(DrawerFooter, { className: "pb-[max(1rem,env(safe-area-inset-bottom))]", children: footer }) : null
+  ] }) });
+}
+function HighlightPanel({ highlight, colors, focusNote, onColor, onNote, onDelete, onQuote, onCopy, onClose }) {
+  const [note, setNote] = useState(highlight?.note ?? "");
+  const saved = useRef(highlight?.note ?? "");
+  const textRef = useRef(null);
+  const id = highlight?.id;
+  useEffect(() => {
+    setNote(highlight?.note ?? "");
+    saved.current = highlight?.note ?? "";
+  }, [id]);
+  useEffect(() => {
+    if (note === saved.current) return;
+    const t = setTimeout(() => {
+      saved.current = note;
+      onNote(note);
+    }, 400);
+    return () => clearTimeout(t);
+  }, [note, onNote]);
+  useEffect(() => {
+    if (!focusNote || !id) return;
+    const t = setTimeout(() => textRef.current?.focus(), 250);
+    return () => clearTimeout(t);
+  }, [focusNote, id]);
+  const flush = () => {
+    if (note !== saved.current) {
+      saved.current = note;
+      onNote(note);
+    }
+  };
+  const exact = highlight?.anchor.exact ?? "";
+  return /* @__PURE__ */ jsx(
+    ResponsivePanel,
+    {
+      open: !!highlight,
+      onOpenChange: (open) => {
+        if (!open) {
+          flush();
+          onClose();
+        }
+      },
+      title: "Highlight",
+      description: "Change the colour, add a note, or remove it.",
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        onCopy && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: onCopy, children: [
+          /* @__PURE__ */ jsx(CopyIcon, {}),
+          " Copy"
+        ] }),
+        onQuote && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: onQuote, children: [
+          /* @__PURE__ */ jsx(QuoteIcon, {}),
+          " To scratchpad"
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "destructive", onClick: onDelete, children: [
+          /* @__PURE__ */ jsx(Trash2Icon, {}),
+          " Delete"
+        ] })
+      ] }),
+      children: highlight && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx("blockquote", { className: cn("line-clamp-6 border-l-4 pl-3 font-serif text-sm text-muted-foreground", quoteBorderClass(highlight.color)), children: exact }),
+        /* @__PURE__ */ jsx(
+          ToggleGroup,
+          {
+            type: "single",
+            variant: "outline",
+            value: highlight.color,
+            onValueChange: (v) => v && onColor(v),
+            "aria-label": "Highlight colour",
+            className: "justify-start",
+            children: colors.map((c) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: c, "aria-label": c, children: /* @__PURE__ */ jsx("span", { className: cn("size-4 rounded-full ring-1 ring-foreground/15", swatchClass(c)) }) }, c))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: `zr-note-${highlight.id}`, children: "Note" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              id: `zr-note-${highlight.id}`,
+              ref: textRef,
+              rows: 4,
+              value: note,
+              placeholder: "Add a note\u2026",
+              onChange: (e) => setNote(e.target.value),
+              onBlur: flush
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenu$1.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("animate-pulse rounded-md bg-accent", className),
+      ...props
+    }
+  );
+}
+
+// src/react/download.ts
+function downloadFile(filename, content, type = "application/json") {
+  const url = URL.createObjectURL(new Blob([content], { type }));
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var ScratchpadEditor = lazy(() => import('zreader/editor').then((m) => ({ default: m.ScratchpadEditor })));
+var SCOPE_LABEL = { chapter: "Chapter", book: "Book", global: "All books" };
+function scopeFor(kind, bookId, chapterId) {
+  if (kind === "global") return { kind };
+  if (kind === "book") return { kind, bookId };
+  return { kind, bookId, chapterId };
+}
+function scopeKey(scope) {
+  return scope.kind === "global" ? "global" : scope.kind === "book" ? `book:${scope.bookId}` : `chapter:${scope.bookId}:${scope.chapterId}`;
+}
+var EditorBoundary = class extends Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+};
+function PlainEditor({ scope, onFocus }) {
+  const { store } = useReader();
+  const pad = usePad(scope);
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      value: pad.markdown,
+      onChange: (e) => store.savePad(scope, e.target.value),
+      onFocus,
+      placeholder: "Write in markdown. - [ ] makes a checklist item.",
+      className: "h-full min-h-48 flex-1 resize-none font-mono text-sm",
+      "aria-label": "Scratchpad (markdown)"
+    }
+  );
+}
+function ScratchpadPanel({ bookId, chapterId, kind, onKindChange, onClose, onEditorFocus, title }) {
+  const { store, options } = useReader();
+  const scope = useMemo(() => scopeFor(kind, bookId, chapterId), [kind, bookId, chapterId]);
+  const pad = usePad(scope);
+  const scopes = options.scratchpad.scopes;
+  const stem = `${title ?? bookId}-${kind}-notes`.replace(/[^a-z0-9-]+/gi, "-").toLowerCase();
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-2", children: [
+      scopes.length > 1 ? /* @__PURE__ */ jsx(Tabs, { value: kind, onValueChange: (v) => onKindChange(v), className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(TabsList, { className: "w-full", children: scopes.map((s) => /* @__PURE__ */ jsx(TabsTrigger, { value: s, children: SCOPE_LABEL[s] }, s)) }) }) : /* @__PURE__ */ jsx("h2", { className: "flex-1 text-sm font-medium", children: "Scratchpad" }),
+      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Scratchpad options", children: /* @__PURE__ */ jsx(EllipsisIcon, {}) }) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => downloadFile(`${stem}.md`, pad.markdown, "text/markdown"), disabled: !pad.markdown.trim(), children: [
+            /* @__PURE__ */ jsx(DownloadIcon, {}),
+            " Download .md"
+          ] }),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onSelect: async () => toast(await copyText(pad.markdown) ? "Markdown copied" : "Could not copy"),
+              disabled: !pad.markdown.trim(),
+              children: [
+                /* @__PURE__ */ jsx(CopyIcon, {}),
+                " Copy markdown"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              variant: "destructive",
+              disabled: !pad.markdown.trim(),
+              onSelect: () => {
+                const previous = pad;
+                store.clearPad(scope);
+                toast("Scratchpad cleared", {
+                  action: { label: "Undo", onClick: () => store.savePad(scope, previous.markdown, previous.json) }
+                });
+              },
+              children: [
+                /* @__PURE__ */ jsx(Trash2Icon, {}),
+                " Clear"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      onClose && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Close scratchpad", onClick: onClose, children: /* @__PURE__ */ jsx(XIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx(EditorBoundary, { fallback: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col p-3", children: /* @__PURE__ */ jsx(PlainEditor, { scope, onFocus: onEditorFocus }) }), children: /* @__PURE__ */ jsx(
+      Suspense,
+      {
+        fallback: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" })
+        ] }),
+        children: /* @__PURE__ */ jsx(ScratchpadEditor, { scope, onFocus: onEditorFocus }, scopeKey(scope))
+      }
+    ) }, scopeKey(scope)) })
+  ] });
+}
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function PopoverAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function Separator2({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Action({ label, onSelect, children }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": label, onClick: onSelect, children }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: label })
+  ] });
+}
+function SelectionToolbar({ selection, colors, onHighlight, onNote, onSentence, onQuote, onCopy, onDismiss }) {
+  const isDesktop = useIsDesktop();
+  const last = useRef(null);
+  if (selection) last.current = selection;
+  const current = () => last.current;
+  const anchorRef = useMemo(
+    () => ({
+      current: {
+        getBoundingClientRect: () => {
+          const r = last.current?.rect;
+          return DOMRect.fromRect(r ? { x: r.left, y: r.top, width: r.width, height: r.height } : void 0);
+        }
+      }
+    }),
+    []
+  );
+  const keepSelection = (e) => e.preventDefault();
+  const actions = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", role: "toolbar", "aria-label": "Selection actions", onPointerDown: keepSelection, onMouseDown: keepSelection, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 px-1", children: colors.map((c) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": `Highlight ${c}`,
+        onClick: () => current() && onHighlight(current().span, c),
+        children: /* @__PURE__ */ jsx("span", { className: cn("size-5 rounded-full ring-1 ring-foreground/15", swatchClass(c)) })
+      },
+      c
+    )) }),
+    /* @__PURE__ */ jsx(Separator2, { orientation: "vertical", className: "mx-1 h-6" }),
+    /* @__PURE__ */ jsx(Action, { label: "Whole sentence", onSelect: () => current() && onSentence(current().span), children: /* @__PURE__ */ jsx(TextSelectIcon, {}) }),
+    /* @__PURE__ */ jsx(Action, { label: "Add note", onSelect: () => current() && onNote(current().span), children: /* @__PURE__ */ jsx(MessageSquarePlusIcon, {}) }),
+    onQuote && /* @__PURE__ */ jsx(Action, { label: "Quote to scratchpad", onSelect: () => current() && onQuote(current().span, current().text), children: /* @__PURE__ */ jsx(QuoteIcon, {}) }),
+    onCopy && /* @__PURE__ */ jsx(Action, { label: "Copy", onSelect: () => current() && onCopy(current().text), children: /* @__PURE__ */ jsx(CopyIcon, {}) }),
+    !isDesktop && /* @__PURE__ */ jsx(Action, { label: "Dismiss", onSelect: onDismiss, children: /* @__PURE__ */ jsx(XIcon, {}) })
+  ] });
+  if (isDesktop) {
+    return /* @__PURE__ */ jsxs(Popover, { open: !!selection, modal: false, children: [
+      /* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: anchorRef }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          side: "top",
+          align: "center",
+          sideOffset: 10,
+          className: "w-auto p-1",
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          onEscapeKeyDown: onDismiss,
+          children: actions
+        }
+      )
+    ] });
+  }
+  if (!selection) return null;
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-x-2 bottom-[max(0.75rem,env(safe-area-inset-bottom))] z-40 flex justify-center animate-in fade-in-0 slide-in-from-bottom-2", children: /* @__PURE__ */ jsx("div", { className: "max-w-full overflow-x-auto rounded-xl border bg-popover p-1 text-popover-foreground shadow-lg", children: actions }) });
+}
+var alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Switch$1.Root,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      className: cn(
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Switch$1.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: cn(
+            "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+          )
+        }
+      )
+    }
+  );
+}
+var THEME_LABEL = { system: "Auto", light: "Light", sepia: "Sepia", dark: "Dark" };
+var SIZE_LABEL = { sm: "S", base: "M", lg: "L", xl: "XL", "2xl": "2XL" };
+var LEADING_LABEL = { tight: "Tight", normal: "Normal", relaxed: "Relaxed" };
+var MEASURE_LABEL = { narrow: "Narrow", normal: "Normal", wide: "Wide" };
+var FONT_LABEL = { serif: "Serif", sans: "Sans", mono: "Mono" };
+function Choice({
+  label,
+  value,
+  values,
+  labels,
+  onChange
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ jsx(Label, { id, children: label }),
+    /* @__PURE__ */ jsx(
+      ToggleGroup,
+      {
+        type: "single",
+        variant: "outline",
+        value,
+        onValueChange: (v) => v && onChange(v),
+        "aria-labelledby": id,
+        className: "w-full",
+        children: values.map((v) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: v, className: "flex-1", children: labels[v] }, v))
+      }
+    )
+  ] });
+}
+function SettingsPanel({ open, onOpenChange, book }) {
+  const { store, options } = useReader();
+  const [settings, update] = useSettings();
+  const { theme, setTheme } = useTheme();
+  const hydrated = useHydrated();
+  const highlights = useHighlights(book?.id ?? "");
+  const fileRef = useRef(null);
+  const [replace, setReplace] = useState(false);
+  const modeId = useId();
+  const hlModeId = useId();
+  const stamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const onImport = async (file) => {
+    try {
+      const res = importBackup(store, await file.text(), { mode: replace ? "replace" : "merge" });
+      toast.success(`Imported ${res.imported} record${res.imported === 1 ? "" : "s"}`, {
+        description: res.skipped ? `${res.skipped} skipped` : void 0
+      });
+    } catch (e) {
+      toast.error("Import failed", { description: e.message });
+    }
+  };
+  return /* @__PURE__ */ jsx(ResponsivePanel, { open, onOpenChange, title: "Reading settings", desktop: "sheet-right", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+    hydrated && /* @__PURE__ */ jsx(
+      Choice,
+      {
+        label: "Theme",
+        value: theme ?? options.defaultTheme,
+        values: options.themes,
+        labels: THEME_LABEL,
+        onChange: setTheme
+      }
+    ),
+    /* @__PURE__ */ jsx(Choice, { label: "Text size", value: settings.textSize, values: TEXT_SIZES, labels: SIZE_LABEL, onChange: (textSize) => update({ textSize }) }),
+    /* @__PURE__ */ jsx(Choice, { label: "Line spacing", value: settings.leading, values: LEADINGS, labels: LEADING_LABEL, onChange: (leading) => update({ leading }) }),
+    /* @__PURE__ */ jsx(Choice, { label: "Line width", value: settings.measure, values: MEASURES, labels: MEASURE_LABEL, onChange: (measure) => update({ measure }) }),
+    /* @__PURE__ */ jsx(Choice, { label: "Font", value: settings.fontFamily, values: FONT_FAMILIES, labels: FONT_LABEL, onChange: (fontFamily) => update({ fontFamily }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 rounded-lg border p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: hlModeId, children: "Highlight mode" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Tap any sentence to highlight it." })
+      ] }),
+      /* @__PURE__ */ jsx(Switch, { id: hlModeId, checked: settings.highlightMode, onCheckedChange: (highlightMode) => update({ highlightMode }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "self-start", onClick: () => store.resetSettings(), children: [
+      /* @__PURE__ */ jsx(RotateCcwIcon, {}),
+      " Reset reading settings"
+    ] }),
+    /* @__PURE__ */ jsx(Separator2, {}),
+    /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-3", "aria-labelledby": `${modeId}-title`, children: [
+      /* @__PURE__ */ jsx("h3", { id: `${modeId}-title`, className: "text-sm font-medium", children: "Your data" }),
+      options.backupReminder && /* @__PURE__ */ jsxs(Alert, { children: [
+        /* @__PURE__ */ jsx(HardDriveIcon, {}),
+        /* @__PURE__ */ jsx(AlertTitle, { children: "Stored only in this browser" }),
+        /* @__PURE__ */ jsx(AlertDescription, { children: "Highlights, notes, bookmarks and scratchpads are removed if site data is cleared. Export a backup now and then." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: () => downloadFile(`reader-backup-${stamp}.json`, JSON.stringify(exportBackup(store), null, 2)), children: [
+          /* @__PURE__ */ jsx(DownloadIcon, {}),
+          " Export backup"
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: () => fileRef.current?.click(), children: [
+          /* @__PURE__ */ jsx(UploadIcon, {}),
+          " Import backup"
+        ] }),
+        book && highlights.length > 0 && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: () => {
+              const titles = new Map(book.chapters.map((c) => [c.id, c.title]));
+              downloadFile(`${book.id}-highlights.md`, highlightsToMarkdown(book.title, highlights, (id) => titles.get(id) ?? id), "text/markdown");
+            },
+            children: [
+              /* @__PURE__ */ jsx(DownloadIcon, {}),
+              " Highlights (.md)"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Switch, { id: modeId, checked: replace, onCheckedChange: setReplace }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: modeId, className: "font-normal", children: "Replace existing data on import" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileRef,
+          type: "file",
+          accept: "application/json,.json",
+          className: "hidden",
+          onChange: (e) => {
+            const f = e.target.files?.[0];
+            if (f) void onImport(f);
+            e.target.value = "";
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "link",
+          className: "self-start px-0",
+          onClick: async () => await requestPersistentStorage() ? toast.success("This browser will keep your reader data.") : toast.info("The browser did not grant persistent storage."),
+          children: "Ask the browser to keep this data"
+        }
+      )
+    ] })
+  ] }) });
+}
+var INTERACTIVE = `a,button,input,textarea,select,summary,label,video,audio,iframe,[contenteditable],[${IGNORE_ATTR}]`;
+function prefersReducedMotion() {
+  return typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function createValueStore(initial) {
+  let value = initial;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => value,
+    set(v) {
+      if (Math.abs(v - value) < 1e-3) return;
+      value = v;
+      listeners.forEach((l) => l());
+    },
+    subscribe(l) {
+      listeners.add(l);
+      return () => listeners.delete(l);
+    }
+  };
+}
+function useValueStore(store) {
+  return useSyncExternalStore(store.subscribe, store.get, () => 0);
+}
+function useChapterEngine(opts) {
+  const { bookId, chapterId, contentHash, root: rootEl, scroller: scrollEl = null, topOffset = 64 } = opts;
+  const rootRef = useRef(rootEl);
+  rootRef.current = rootEl;
+  const { store, options } = useReader();
+  const [settings] = useSettings();
+  const highlights = useHighlights(bookId, chapterId);
+  const indexRef = useRef(null);
+  const [version, setVersion] = useState(0);
+  const [selection, setSelection] = useState(null);
+  const [activeId, setActiveId] = useState(null);
+  const [resume, setResume] = useState(null);
+  const [percentStore] = useState(() => createValueStore(0));
+  const [domToc, setDomToc] = useState([]);
+  const onTapRef = useRef(opts.onHighlightTap);
+  onTapRef.current = opts.onHighlightTap;
+  const scroller = useCallback(() => scrollEl, [scrollEl]);
+  const viewportTop = useCallback(() => scroller()?.getBoundingClientRect().top ?? 0, [scroller]);
+  const viewportHeight = useCallback(() => scroller()?.clientHeight ?? window.innerHeight, [scroller]);
+  const scrollTop = useCallback(() => scroller()?.scrollTop ?? window.scrollY, [scroller]);
+  const scrollToY = useCallback(
+    (y, smooth = true) => {
+      const opts2 = { top: Math.max(0, y), behavior: smooth && !prefersReducedMotion() ? "smooth" : "auto" };
+      const el = scroller();
+      if (el) el.scrollTo(opts2);
+      else window.scrollTo(opts2);
+    },
+    [scroller]
+  );
+  const targetFor = useCallback(
+    (rectTop, extra = 8) => scrollTop() + rectTop - viewportTop() - topOffset - extra,
+    [scrollTop, viewportTop, topOffset]
+  );
+  useEffect(() => {
+    const root = rootEl;
+    if (!root) return;
+    const rebuild = () => {
+      ensureBlockIds(root);
+      setDomToc((prev) => {
+        const next = collectToc(root);
+        return JSON.stringify(prev) === JSON.stringify(next) ? prev : next;
+      });
+      indexRef.current = buildTextIndex(root);
+      setVersion((v) => v + 1);
+    };
+    rebuild();
+    let t;
+    const mo = new MutationObserver(() => {
+      clearTimeout(t);
+      t = setTimeout(rebuild, 60);
+    });
+    mo.observe(root, { childList: true, subtree: true, characterData: true });
+    return () => {
+      mo.disconnect();
+      clearTimeout(t);
+    };
+  }, [rootEl, chapterId]);
+  const getIndex = useCallback(() => {
+    const root = rootRef.current;
+    if (root && (!indexRef.current || indexRef.current.root !== root)) indexRef.current = buildTextIndex(root);
+    return indexRef.current;
+  }, []);
+  const { resolved, orphaned } = useMemo(() => {
+    const index = indexRef.current;
+    const ok = [];
+    const lost = [];
+    if (index) {
+      for (const h of highlights) {
+        const span = resolveAnchor(index, h.anchor);
+        const range = span ? spanToRange(index, span) : null;
+        if (span && range) ok.push({ highlight: h, span, range });
+        else lost.push(h);
+      }
+    }
+    return { resolved: ok, orphaned: lost };
+  }, [highlights, version]);
+  const resolvedRef = useRef(resolved);
+  resolvedRef.current = resolved;
+  useEffect(() => {
+    const index = indexRef.current;
+    if (!index) return;
+    for (const r of resolved) {
+      const a = r.highlight.anchor;
+      if (a.start === r.span.start && a.end === r.span.end) continue;
+      const fresh = describeSpan(index, r.span, contentHash);
+      if (fresh) store.updateHighlight(bookId, r.highlight.id, { anchor: fresh });
+    }
+  }, [resolved, bookId, contentHash, store]);
+  useEffect(() => paintHighlights(resolved, { activeId }), [resolved, activeId]);
+  useEffect(() => {
+    let t;
+    const update = () => {
+      const index = getIndex();
+      const sel = document.getSelection();
+      const span = index ? selectionSpan(index, sel) : null;
+      if (!index || !span || !sel || sel.rangeCount === 0) {
+        setSelection(null);
+        return;
+      }
+      const r = sel.getRangeAt(0).getBoundingClientRect();
+      setSelection({
+        span,
+        text: index.text.slice(span.start, span.end),
+        rect: { top: r.top, left: r.left, bottom: r.bottom, right: r.right, width: r.width, height: r.height }
+      });
+    };
+    const onChange = () => {
+      clearTimeout(t);
+      t = setTimeout(update, 120);
+    };
+    document.addEventListener("selectionchange", onChange);
+    return () => {
+      document.removeEventListener("selectionchange", onChange);
+      clearTimeout(t);
+    };
+  }, [getIndex]);
+  const clearSelection = useCallback(() => {
+    document.getSelection()?.removeAllRanges();
+    setSelection(null);
+  }, []);
+  const selectSpan = useCallback(
+    (span) => {
+      const index = getIndex();
+      const range = index && spanToRange(index, span);
+      const sel = document.getSelection();
+      if (!range || !sel) return;
+      sel.removeAllRanges();
+      sel.addRange(range);
+    },
+    [getIndex]
+  );
+  const expandSelectionToSentences = useCallback(
+    (span) => {
+      const index = getIndex();
+      const base = span ?? selection?.span;
+      if (!index || !base) return;
+      selectSpan(expandSpanToSentences(index, base, document.documentElement.lang || void 0));
+    },
+    [getIndex, selection, selectSpan]
+  );
+  const createHighlight = useCallback(
+    (span, color, note) => {
+      const index = getIndex();
+      if (!index) return null;
+      const anchor = describeSpan(index, span, contentHash);
+      if (!anchor) return null;
+      const dup = highlights.find((h) => h.anchor.start === anchor.start && h.anchor.end === anchor.end);
+      if (dup) {
+        if (color && dup.color !== color) store.updateHighlight(bookId, dup.id, { color });
+        return dup;
+      }
+      return store.addHighlight({ bookId, chapterId, anchor, color, note });
+    },
+    [getIndex, contentHash, highlights, store, bookId, chapterId]
+  );
+  const highlightModeRef = useRef(settings.highlightMode);
+  highlightModeRef.current = settings.highlightMode;
+  const createRef = useRef(createHighlight);
+  createRef.current = createHighlight;
+  useEffect(() => {
+    const root = rootEl;
+    if (!root) return;
+    const onClick = (e) => {
+      const sel = document.getSelection();
+      if (sel && !sel.isCollapsed) return;
+      if (e.target.closest?.(INTERACTIVE)) return;
+      const index = getIndex();
+      if (!index) return;
+      const offset = offsetFromPoint(index, e.clientX, e.clientY);
+      if (offset == null) return;
+      const hit = highlightAtOffset(resolvedRef.current, offset);
+      if (hit) {
+        setActiveId(hit.highlight.id);
+        onTapRef.current?.(hit.highlight.id);
+        return;
+      }
+      if (highlightModeRef.current) {
+        const span = sentenceSpanAt(index, offset, document.documentElement.lang || void 0);
+        if (span && createRef.current(span)) navigator.vibrate?.(8);
+      }
+    };
+    root.addEventListener("click", onClick);
+    return () => root.removeEventListener("click", onClick);
+  }, [rootEl, getIndex]);
+  const scrollToSpan = useCallback(
+    (span, smooth = true) => {
+      const index = getIndex();
+      const range = index && spanToRange(index, span);
+      if (!range) return false;
+      scrollToY(targetFor(range.getBoundingClientRect().top, viewportHeight() * 0.15), smooth);
+      return true;
+    },
+    [getIndex, scrollToY, targetFor, viewportHeight]
+  );
+  const scrollToHighlight = useCallback(
+    (id, smooth = true) => {
+      const r = resolvedRef.current.find((x) => x.highlight.id === id);
+      if (!r) return false;
+      setActiveId(id);
+      return scrollToSpan(r.span, smooth);
+    },
+    [scrollToSpan]
+  );
+  const scrollToElement = useCallback(
+    (el, smooth = true) => {
+      if (!el) return false;
+      scrollToY(targetFor(el.getBoundingClientRect().top), smooth);
+      return true;
+    },
+    [scrollToY, targetFor]
+  );
+  const scrollToBlock = useCallback(
+    (blockId, smooth = true) => {
+      const root = rootRef.current;
+      return scrollToElement(root && findBlock(root, blockId), smooth);
+    },
+    [scrollToElement]
+  );
+  const scrollToHeading = useCallback(
+    (id, smooth = true) => scrollToElement(rootRef.current?.ownerDocument.getElementById(id) ?? null, smooth),
+    [scrollToElement]
+  );
+  const scrollToTop = useCallback(() => scrollToY(0), [scrollToY]);
+  const getTopBlock = useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return null;
+    const line = viewportTop() + topOffset + 8;
+    for (const el of Array.from(root.querySelectorAll(`[${BLOCK_ATTR}]`))) {
+      if (el.getBoundingClientRect().bottom > line) return el;
+    }
+    return null;
+  }, [viewportTop, topOffset]);
+  useEffect(() => {
+    const root = rootEl;
+    if (!root) return;
+    const target = scroller() ?? window;
+    let raf = 0;
+    let lastSave = 0;
+    let pending;
+    const compute = () => {
+      const box = root.getBoundingClientRect();
+      const top = box.top - viewportTop();
+      const total = box.height - viewportHeight() + topOffset;
+      const percent = total <= 0 ? 1 : Math.max(0, Math.min(1, (topOffset - top) / total));
+      percentStore.set(percent);
+      return percent;
+    };
+    const save = () => {
+      const percent = compute();
+      const block = getTopBlock();
+      store.recordProgress(bookId, chapterId, { blockId: block?.getAttribute(BLOCK_ATTR) ?? void 0, percent });
+      lastSave = Date.now();
+    };
+    const onScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        compute();
+        clearTimeout(pending);
+        pending = setTimeout(save, Math.max(0, options.progress.saveIntervalMs - (Date.now() - lastSave)));
+      });
+    };
+    compute();
+    target.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll, { passive: true });
+    window.addEventListener("pagehide", save);
+    return () => {
+      target.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      window.removeEventListener("pagehide", save);
+      cancelAnimationFrame(raf);
+      clearTimeout(pending);
+    };
+  }, [rootEl, scroller, viewportTop, viewportHeight, bookId, chapterId, store, options.progress.saveIntervalMs, getTopBlock, topOffset, percentStore]);
+  const latest = useRef({ scrollToHighlight, scrollToBlock, scrollToHeading, scrollTop });
+  latest.current = { scrollToHighlight, scrollToBlock, scrollToHeading, scrollTop };
+  const restoredFor = useRef(null);
+  useEffect(() => {
+    if (!rootEl || version === 0 || restoredFor.current === chapterId) return;
+    restoredFor.current = chapterId;
+    const hash = decodeURIComponent(window.location.hash.slice(1));
+    const run = () => {
+      const l = latest.current;
+      if (hash.startsWith("hl-")) {
+        if (l.scrollToHighlight(hash.slice(3), false)) return;
+      } else if (hash.startsWith("b-")) {
+        if (l.scrollToBlock(hash.slice(2), false)) return;
+      } else if (hash) {
+        l.scrollToHeading(hash, false);
+        return;
+      }
+      const saved = store.progress(bookId).get().chapters[chapterId];
+      if (saved?.blockId && saved.percent > 0.03 && saved.percent < 0.98 && l.scrollTop() < 40) {
+        if (l.scrollToBlock(saved.blockId, false)) setResume({ blockId: saved.blockId, percent: saved.percent });
+      }
+    };
+    const fonts = document.fonts;
+    const go = () => requestAnimationFrame(() => requestAnimationFrame(run));
+    if (fonts?.ready) void fonts.ready.then(go);
+    else go();
+  }, [version, chapterId, bookId, store, rootEl]);
+  const dismissResume = useCallback(() => setResume(null), []);
+  return {
+    highlights,
+    resolved,
+    orphaned,
+    selection,
+    activeId,
+    setActiveId,
+    resume,
+    dismissResume,
+    percentStore,
+    domToc,
+    clearSelection,
+    selectSpan,
+    expandSelectionToSentences,
+    createHighlight,
+    scrollToHighlight,
+    scrollToBlock,
+    scrollToHeading,
+    scrollToTop,
+    getTopBlock,
+    getIndex
+  };
+}
+var ReaderChapterContext = createContext(null);
+function useReaderChapter() {
+  const ctx = useContext(ReaderChapterContext);
+  if (!ctx) throw new Error("zreader: useReaderChapter() must be used inside <Reader>.");
+  return ctx;
+}
+function ReaderTitle({ className }) {
+  const { book, chapter } = useReaderChapter();
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: book.title }),
+    /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: chapter.title })
+  ] });
+}
+function HeaderContent({ slot, book, chapter }) {
+  const content = typeof slot === "function" ? slot({ book, chapter }) : slot;
+  if (content === void 0) return /* @__PURE__ */ jsx(ReaderTitle, {});
+  if (typeof content === "string" || typeof content === "number") {
+    return /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: content });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: content });
+}
+function ReadingProgress({ store, className }) {
+  const value = useValueStore(store);
+  return /* @__PURE__ */ jsx(Progress, { value: Math.round(value * 100), "aria-label": "Chapter progress", className: cn("h-0.5 rounded-none bg-transparent", className) });
+}
+function IconAction({ label, children, ...props }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": label, ...props, children }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: label })
+  ] });
+}
+function IconToggle({ label, children, ...props }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Toggle, { "aria-label": label, ...props, children }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: label })
+  ] });
+}
+function useAutoHide(enabled) {
+  const [hidden, setHidden] = useState(false);
+  useEffect(() => {
+    if (!enabled) {
+      setHidden(false);
+      return;
+    }
+    let last = window.scrollY;
+    let raf = 0;
+    const onScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const y = window.scrollY;
+        if (Math.abs(y - last) < 8) return;
+        setHidden(y > last && y > 80);
+        last = y;
+      });
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      cancelAnimationFrame(raf);
+    };
+  }, [enabled]);
+  return hidden;
+}
+var isEditable = (el) => !!el?.closest("input,textarea,select,[contenteditable='true']");
+function Reader({
+  book: bookArg,
+  chapter: chapterArg,
+  prev: prevArg,
+  next: nextArg,
+  toc: tocProp,
+  contentHash,
+  html,
+  children,
+  Link: LinkProp,
+  hrefFor,
+  header,
+  backHref,
+  className
+}) {
+  const { store, options } = useReader();
+  const library = useLibrary();
+  const book = useBook(bookArg);
+  const chapterIndex = book.chapters.findIndex((c) => c.id === (typeof chapterArg === "string" ? chapterArg : chapterArg.id));
+  const chapter = typeof chapterArg === "string" ? book.chapters[chapterIndex] : chapterArg;
+  if (!chapter) {
+    throw new Error(`zreader: book "${book.id}" has no chapter "${String(chapterArg)}".`);
+  }
+  const prev = prevArg !== void 0 ? prevArg : book.chapters[chapterIndex - 1] ?? null;
+  const next = nextArg !== void 0 ? nextArg : chapterIndex >= 0 ? book.chapters[chapterIndex + 1] ?? null : null;
+  const Link = LinkProp ?? library.Link;
+  const slot = header !== void 0 ? header : library.headerSlot;
+  const chapterCtx = useMemo(() => ({ book, chapter }), [book, chapter]);
+  const [settings, updateSettings] = useSettings();
+  const isDesktop = useIsDesktop();
+  const bookmarks = useBookmarks(book.id);
+  const progress = useProgress(book.id);
+  const build = hrefFor ?? library.href;
+  const href = useCallback((chapterId, hash) => build(book.id, chapterId, hash), [build, book.id]);
+  const [rootEl, setRootEl] = useState(null);
+  const [scrollEl, setScrollEl] = useState(null);
+  const [contentsOpen, setContentsOpen] = useState(false);
+  const [contentsTab, setContentsTab] = useState("contents");
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [padOpen, setPadOpen] = useState(false);
+  const [padKind, setPadKind] = useState(options.scratchpad.scopes[0] ?? "chapter");
+  const [padSnap, setPadSnap] = useState(0.55);
+  const [openHighlightId, setOpenHighlightId] = useState(null);
+  const [focusNote, setFocusNote] = useState(false);
+  const engine = useChapterEngine({
+    bookId: book.id,
+    chapterId: chapter.id,
+    contentHash,
+    root: rootEl,
+    scroller: isDesktop ? scrollEl : null,
+    topOffset: isDesktop ? 16 : 64,
+    onHighlightTap: (id) => {
+      setFocusNote(false);
+      setOpenHighlightId(id);
+    }
+  });
+  const toc = tocProp && tocProp.length > 0 ? tocProp : engine.domToc;
+  const headerHidden = useAutoHide(!isDesktop && !engine.selection);
+  const chapterBookmarks = useMemo(() => bookmarks.filter((b) => b.chapterId === chapter.id), [bookmarks, chapter.id]);
+  const completed = progress.chapters[chapter.id]?.completed ?? false;
+  const openHighlight = engine.highlights.find((h) => h.id === openHighlightId) ?? null;
+  const orphanedIds = useMemo(() => new Set(engine.orphaned.map((h) => h.id)), [engine.orphaned]);
+  const padEnabled = options.scratchpad.enabled;
+  useEffect(() => {
+    if (!supportsHighlightApi()) {
+      toast.info("Highlights can't be drawn in this browser", { description: "They are still saved and listed under Contents \u2192 Highlights." });
+    }
+  }, []);
+  useEffect(() => {
+    if (!engine.resume) return;
+    toast(`Resumed at ${Math.round(engine.resume.percent * 100)}%`, {
+      id: `zr-resume-${chapter.id}`,
+      action: { label: "Start from top", onClick: () => engine.scrollToTop() }
+    });
+    engine.dismissResume();
+  }, [engine.resume, engine, chapter.id]);
+  const openPad = useCallback(() => {
+    setPadOpen(true);
+    setPadSnap(0.55);
+  }, []);
+  const quoteToPad = useCallback(
+    (markdown) => {
+      store.appendToPad(scopeFor(padKind, book.id, chapter.id), markdown);
+      openPad();
+      toast.success("Added to scratchpad");
+    },
+    [store, padKind, book.id, chapter.id, openPad]
+  );
+  const quoteSpan = (span, text) => {
+    const h = engine.createHighlight(span);
+    engine.clearSelection();
+    quoteToPad(h ? highlightToMarkdown(h, href(chapter.id, `hl-${h.id}`)) : quoteToMarkdown(text));
+  };
+  const copy = async (text) => {
+    toast(await copyText(text) ? "Copied" : "Could not copy");
+  };
+  const toggleBookmark = () => {
+    if (chapterBookmarks.length) {
+      const removed = chapterBookmarks;
+      removed.forEach((b) => store.removeBookmark(book.id, b.id));
+      toast("Bookmark removed", {
+        action: {
+          label: "Undo",
+          onClick: () => removed.forEach(
+            (b) => store.addBookmark({ bookId: b.bookId, chapterId: b.chapterId, blockId: b.blockId, label: b.label, excerpt: b.excerpt })
+          )
+        }
+      });
+      return;
+    }
+    const block = engine.getTopBlock();
+    store.addBookmark({
+      bookId: book.id,
+      chapterId: chapter.id,
+      ...block ? { blockId: block.getAttribute(BLOCK_ATTR) ?? void 0, excerpt: block.textContent?.trim().slice(0, 120) } : {},
+      label: chapter.title
+    });
+    toast.success("Bookmarked", { description: "Find it under Contents \u2192 Bookmarks." });
+  };
+  useEffect(() => {
+    const onKey = (e) => {
+      if (!engine.selection || e.metaKey || e.ctrlKey || e.altKey || isEditable(document.activeElement)) return;
+      if (e.key === "h") {
+        e.preventDefault();
+        engine.createHighlight(engine.selection.span);
+        engine.clearSelection();
+      } else if (e.key === "n") {
+        e.preventDefault();
+        const h = engine.createHighlight(engine.selection.span);
+        engine.clearSelection();
+        if (h) {
+          setFocusNote(true);
+          setOpenHighlightId(h.id);
+        }
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [engine]);
+  const topBar = /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "sticky top-0 z-30 border-b bg-background/85 backdrop-blur-md transition-transform duration-200 supports-[backdrop-filter]:bg-background/70",
+        headerHidden && "-translate-y-full"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center gap-1 px-2 pt-[env(safe-area-inset-top)] sm:px-3", children: [
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "ghost", size: "icon", "aria-label": "Back to book", children: /* @__PURE__ */ jsx(Link, { href: backHref ?? href(), children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }) }) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: "Back to book" })
+          ] }),
+          /* @__PURE__ */ jsx(IconAction, { label: "Contents, highlights and bookmarks", onClick: () => setContentsOpen(true), children: /* @__PURE__ */ jsx(ListIcon, {}) }),
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2 px-1", children: /* @__PURE__ */ jsx(HeaderContent, { slot, book, chapter }) }),
+          /* @__PURE__ */ jsx(IconToggle, { label: chapterBookmarks.length ? "Remove bookmark" : "Bookmark this place", pressed: chapterBookmarks.length > 0, onPressedChange: toggleBookmark, className: "data-[state=on]:[&_svg]:fill-current", children: /* @__PURE__ */ jsx(BookmarkIcon, {}) }),
+          /* @__PURE__ */ jsx(IconToggle, { label: "Highlight mode: tap a sentence", pressed: settings.highlightMode, onPressedChange: (highlightMode) => updateSettings({ highlightMode }), children: /* @__PURE__ */ jsx(HighlighterIcon, {}) }),
+          /* @__PURE__ */ jsx(IconAction, { label: "Reading settings", onClick: () => setSettingsOpen(true), children: /* @__PURE__ */ jsx(TypeIcon, {}) }),
+          padEnabled && /* @__PURE__ */ jsx(IconToggle, { label: "Scratchpad", pressed: padOpen, onPressedChange: (open) => open ? openPad() : setPadOpen(false), children: /* @__PURE__ */ jsx(NotebookPenIcon, {}) })
+        ] }),
+        /* @__PURE__ */ jsx(ReadingProgress, { store: engine.percentStore, className: "absolute inset-x-0 bottom-0" })
+      ]
+    }
+  );
+  const body = /* @__PURE__ */ jsxs("div", { className: cn("mx-auto w-full px-5 pt-8 pb-[calc(7rem+env(safe-area-inset-bottom))] sm:px-8 lg:pt-12", MEASURE_CLASS[settings.measure]), children: [
+    /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-center gap-x-2 text-sm text-muted-foreground", children: [
+      chapter.part && /* @__PURE__ */ jsx("span", { children: chapter.part }),
+      chapter.part && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { children: chapter.label ?? `Chapter ${chapterIndex + 1} of ${book.chapters.length}` })
+    ] }),
+    /* @__PURE__ */ jsx("h1", { className: cn("mt-1 text-3xl font-semibold tracking-tight text-balance sm:text-4xl", FONT_CLASS[settings.fontFamily]), children: chapter.title }),
+    /* @__PURE__ */ jsx(
+      "article",
+      {
+        ref: setRootEl,
+        className: cn("mt-8", PROSE_CLASS, TEXT_SIZE_CLASS[settings.textSize], LEADING_CLASS[settings.leading], FONT_CLASS[settings.fontFamily], settings.highlightMode && "cursor-pointer"),
+        "aria-label": chapter.title,
+        children: html !== void 0 ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } }) : children
+      }
+    ),
+    /* @__PURE__ */ jsxs("footer", { className: "mt-16 flex flex-col gap-4 border-t pt-8", children: [
+      !completed && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", className: "self-center", onClick: () => store.markChapterComplete(book.id, chapter.id), children: [
+        /* @__PURE__ */ jsx(CheckIcon, {}),
+        " Mark chapter as read"
+      ] }),
+      /* @__PURE__ */ jsxs("nav", { "aria-label": "Chapters", className: "grid grid-cols-2 gap-3", children: [
+        prev ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "ghost", className: "h-auto flex-col items-start gap-1 py-3 text-left whitespace-normal", children: /* @__PURE__ */ jsxs(Link, { href: href(prev.id), children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+            " Previous"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "line-clamp-2 font-medium", children: prev.title })
+        ] }) }) : /* @__PURE__ */ jsx("span", {}),
+        next ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", className: "col-start-2 h-auto flex-col items-end gap-1 py-3 text-right whitespace-normal", children: /* @__PURE__ */ jsxs(Link, { href: href(next.id), children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+            "Next ",
+            /* @__PURE__ */ jsx(ArrowRightIcon, {})
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "line-clamp-2 font-medium", children: next.title })
+        ] }) }) : null
+      ] })
+    ] })
+  ] });
+  const pad = (onClose) => /* @__PURE__ */ jsx(
+    ScratchpadPanel,
+    {
+      bookId: book.id,
+      chapterId: chapter.id,
+      kind: padKind,
+      onKindChange: setPadKind,
+      onClose,
+      onEditorFocus: () => setPadSnap(0.95),
+      title: book.id
+    }
+  );
+  const padPanelRef = usePanelRef();
+  const layoutStorage = useMemo(
+    () => ({ getItem: (k) => store.adapter.get(k), setItem: (k, v) => store.adapter.set(k, v) }),
+    [store]
+  );
+  const layout = useDefaultLayout({ id: `${options.storagePrefix}:v1:layout`, panelIds: ["content", "pad"], storage: layoutStorage });
+  useEffect(() => {
+    const p = padPanelRef.current;
+    if (!isDesktop || !p) return;
+    if (padOpen && p.isCollapsed()) p.expand();
+    if (!padOpen && !p.isCollapsed()) p.collapse();
+  }, [padOpen, isDesktop, padPanelRef]);
+  return /* @__PURE__ */ jsx(ReaderChapterContext.Provider, { value: chapterCtx, children: /* @__PURE__ */ jsxs("div", { "data-zr-reader": "", className: cn("min-h-svh bg-background text-foreground", isDesktop && "flex h-svh flex-col overflow-hidden", className), children: [
+    topBar,
+    isDesktop ? /* @__PURE__ */ jsxs(ResizablePanelGroup, { orientation: "horizontal", className: "min-h-0 flex-1", defaultLayout: layout.defaultLayout, onLayoutChanged: layout.onLayoutChanged, children: [
+      /* @__PURE__ */ jsx(ResizablePanel, { id: "content", minSize: "40%", children: /* @__PURE__ */ jsx("div", { ref: setScrollEl, className: "h-full overflow-y-auto overscroll-contain", children: body }) }),
+      padEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true, className: cn(!padOpen && "hidden") }),
+        /* @__PURE__ */ jsx(
+          ResizablePanel,
+          {
+            id: "pad",
+            panelRef: padPanelRef,
+            collapsible: true,
+            collapsedSize: "0%",
+            defaultSize: padOpen ? "32%" : "0%",
+            minSize: "22%",
+            maxSize: "55%",
+            onResize: (size) => setPadOpen(size.asPercentage > 0),
+            className: "bg-background",
+            children: padOpen && pad(() => setPadOpen(false))
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsx("main", { children: body }),
+    !isDesktop && padEnabled && /* @__PURE__ */ jsx(Drawer, { open: padOpen, onOpenChange: setPadOpen, snapPoints: [0.55, 0.95], activeSnapPoint: padSnap, setActiveSnapPoint: setPadSnap, repositionInputs: false, children: /* @__PURE__ */ jsxs(DrawerContent, { className: "h-[95svh] max-h-[95svh]", children: [
+      /* @__PURE__ */ jsx(DrawerTitle, { className: "sr-only", children: "Scratchpad" }),
+      /* @__PURE__ */ jsx(DrawerDescription, { className: "sr-only", children: "Notes and checklists saved in this browser." }),
+      /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col pb-[env(safe-area-inset-bottom)]", children: pad(() => setPadOpen(false)) })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      SelectionToolbar,
+      {
+        selection: openHighlightId || settingsOpen || contentsOpen ? null : engine.selection,
+        colors: options.highlightColors,
+        onHighlight: (span, color) => {
+          engine.createHighlight(span, color);
+          engine.clearSelection();
+        },
+        onSentence: (span) => engine.expandSelectionToSentences(span),
+        onNote: (span) => {
+          const h = engine.createHighlight(span);
+          engine.clearSelection();
+          if (h) {
+            setFocusNote(true);
+            setOpenHighlightId(h.id);
+          }
+        },
+        onQuote: padEnabled ? quoteSpan : void 0,
+        onCopy: (text) => {
+          void copy(text);
+          engine.clearSelection();
+        },
+        onDismiss: engine.clearSelection
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HighlightPanel,
+      {
+        highlight: openHighlight,
+        colors: options.highlightColors,
+        focusNote,
+        onColor: (color) => openHighlight && store.updateHighlight(book.id, openHighlight.id, { color }),
+        onNote: (note) => openHighlight && store.updateHighlight(book.id, openHighlight.id, { note }),
+        onDelete: () => {
+          if (!openHighlight) return;
+          const removed = openHighlight;
+          store.removeHighlight(book.id, removed.id);
+          setOpenHighlightId(null);
+          engine.setActiveId(null);
+          toast("Highlight deleted", {
+            action: {
+              label: "Undo",
+              onClick: () => store.addHighlight({ bookId: removed.bookId, chapterId: removed.chapterId, anchor: removed.anchor, color: removed.color, note: removed.note })
+            }
+          });
+        },
+        onQuote: padEnabled && openHighlight ? () => quoteToPad(highlightToMarkdown(openHighlight, href(chapter.id, `hl-${openHighlight.id}`))) : void 0,
+        onCopy: openHighlight ? () => void copy(openHighlight.anchor.exact) : void 0,
+        onClose: () => {
+          setOpenHighlightId(null);
+          setFocusNote(false);
+          engine.setActiveId(null);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ContentsSheet,
+      {
+        open: contentsOpen,
+        onOpenChange: setContentsOpen,
+        tab: contentsTab,
+        onTabChange: setContentsTab,
+        book,
+        chapterId: chapter.id,
+        toc,
+        hrefFor: (c, h) => href(c, h),
+        Link,
+        orphanedIds,
+        onJumpHighlight: (id) => engine.scrollToHighlight(id),
+        onJumpBlock: (id) => engine.scrollToBlock(id),
+        onJumpHeading: (id) => engine.scrollToHeading(id)
+      }
+    ),
+    /* @__PURE__ */ jsx(SettingsPanel, { open: settingsOpen, onOpenChange: setSettingsOpen, book })
+  ] }) });
+}
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+function useNav(bookArg, LinkProp, hrefFor) {
+  const library = useLibrary();
+  const book = useBook(bookArg);
+  const build = hrefFor ?? library.href;
+  return {
+    book,
+    Link: LinkProp ?? library.Link,
+    href: (chapterId, hash) => build(book.id, chapterId, hash)
+  };
+}
+function ContinueReading({ book: bookArg, Link: LinkProp, hrefFor, className }) {
+  const { book, Link, href } = useNav(bookArg, LinkProp, hrefFor);
+  const hydrated = useHydrated();
+  const progress = useProgress(book.id);
+  const highlights = useHighlights(book.id);
+  const bookmarks = useBookmarks(book.id);
+  const first = book.chapters[0];
+  const lastId = progress.last?.chapterId;
+  const last = book.chapters.find((c) => c.id === lastId);
+  const done = book.chapters.filter((c) => progress.chapters[c.id]?.completed).length;
+  const overall = book.chapters.length ? done / book.chapters.length : 0;
+  const lastPct = last ? Math.round((progress.chapters[last.id]?.percent ?? 0) * 100) : 0;
+  if (!first) return null;
+  return /* @__PURE__ */ jsxs(Card, { className: cn("gap-4", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: last ? "Continue reading" : "Start reading" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: !hydrated ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" }) : last ? `${last.title} \xB7 ${lastPct}%` : `${book.chapters.length} chapters` })
+    ] }),
+    hydrated && (done > 0 || highlights.length > 0 || bookmarks.length > 0) && /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(Progress, { value: Math.round(overall * 100), "aria-label": "Book progress" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
+          done,
+          "/",
+          book.chapters.length,
+          " chapters read"
+        ] }),
+        highlights.length > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
+          highlights.length,
+          " highlights"
+        ] }),
+        bookmarks.length > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
+          bookmarks.length,
+          " bookmarks"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { asChild: true, className: "w-full sm:w-auto", children: /* @__PURE__ */ jsxs(Link, { href: last ? href(last.id, progress.last?.blockId ? `b-${progress.last.blockId}` : void 0) : href(first.id), children: [
+      /* @__PURE__ */ jsx(BookOpenIcon, {}),
+      " ",
+      last ? "Continue" : "Start"
+    ] }) }) })
+  ] });
+}
+function ChapterList({ book: bookArg, Link: LinkProp, hrefFor, className }) {
+  const { book, Link, href } = useNav(bookArg, LinkProp, hrefFor);
+  const hydrated = useHydrated();
+  const progress = useProgress(book.id);
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-6", className), children: groupByPart(book.chapters).map((group) => /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", children: [
+    group.part && /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-muted-foreground", children: group.part }),
+    /* @__PURE__ */ jsx("ol", { className: "flex flex-col divide-y overflow-hidden rounded-xl border", children: group.items.map(({ chapter: c, index: i }) => {
+      const pr = hydrated ? progress.chapters[c.id] : void 0;
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "ghost", className: "h-auto w-full justify-start gap-4 rounded-none px-4 py-3 text-left whitespace-normal", children: /* @__PURE__ */ jsxs(Link, { href: href(c.id), children: [
+        /* @__PURE__ */ jsx("span", { className: "w-6 shrink-0 text-sm text-muted-foreground tabular-nums", children: chapterMarker(c, i) }),
+        /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: c.title }),
+          c.description && /* @__PURE__ */ jsx("span", { className: "text-sm font-normal text-muted-foreground", children: c.description })
+        ] }),
+        pr?.completed ? /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "text-primary", "aria-label": "Read" }) : pr ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground tabular-nums", children: [
+          Math.round(pr.percent * 100),
+          "%"
+        ] }) : /* @__PURE__ */ jsx(CircleIcon, { className: "text-muted-foreground/40", "aria-hidden": true })
+      ] }) }) }, c.id);
+    }) })
+  ] }, group.part ?? "_")) });
+}
+function BookShelf({ books: booksProp, Link: LinkProp, hrefFor, title = "Books", description, embedded, className }) {
+  const library = useLibrary();
+  const books = booksProp ?? library.books;
+  const Link = LinkProp ?? library.Link;
+  const build = hrefFor ?? library.href;
+  const hydrated = useHydrated();
+  const grid = books.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No books published yet." }) : /* @__PURE__ */ jsx("ul", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: books.map((book) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(BookCard, { book, Link, href: build(book.id), hydrated }) }, book.id)) });
+  if (embedded) {
+    return /* @__PURE__ */ jsx("div", { "data-zr-reader": "", className: cn("text-foreground", className), children: grid });
+  }
+  return /* @__PURE__ */ jsx("div", { "data-zr-reader": "", className: cn("min-h-svh bg-background text-foreground", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-5xl flex-col gap-8 px-5 py-10 sm:px-8 sm:py-16", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("h1", { className: "font-serif text-3xl font-semibold tracking-tight sm:text-4xl", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "max-w-prose text-muted-foreground", children: description })
+    ] }),
+    grid
+  ] }) });
+}
+function BookCard({ book, Link, href, hydrated }) {
+  const progress = useProgress(book.id);
+  const done = hydrated ? book.chapters.filter((c) => progress.chapters[c.id]?.completed).length : 0;
+  return /* @__PURE__ */ jsxs(Card, { className: "relative h-full gap-4 transition-shadow hover:shadow-md", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "font-serif text-xl", children: /* @__PURE__ */ jsx(Link, { href, className: "after:absolute after:inset-0 focus-visible:outline-none", children: book.title }) }),
+      book.authors.length > 0 && /* @__PURE__ */ jsx(CardDescription, { children: book.authors.join(", ") })
+    ] }),
+    book.description && /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm text-muted-foreground", children: book.description }) }),
+    /* @__PURE__ */ jsxs(CardFooter, { className: "mt-auto flex items-center justify-between gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        book.chapters.length,
+        " chapters"
+      ] }),
+      done > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: done === book.chapters.length ? "Finished" : `${done} read` })
+    ] })
+  ] });
+}
+function BookHome({ book: bookArg, Link: LinkProp, hrefFor, backHref, backLabel = "All books", embedded, className }) {
+  const { book, Link } = useNav(bookArg, LinkProp, hrefFor);
+  if (embedded) {
+    return /* @__PURE__ */ jsxs("div", { "data-zr-reader": "", className: cn("flex flex-col gap-8 text-foreground", className), children: [
+      /* @__PURE__ */ jsx(ContinueReading, { book, Link, hrefFor }),
+      /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-3", "aria-labelledby": "zr-chapters", children: [
+        /* @__PURE__ */ jsx("h2", { id: "zr-chapters", className: "text-sm font-medium tracking-wide text-muted-foreground uppercase", children: "Chapters" }),
+        /* @__PURE__ */ jsx(ChapterList, { book, Link, hrefFor })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { "data-zr-reader": "", className: cn("min-h-svh bg-background text-foreground", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-3xl flex-col gap-8 px-5 py-8 sm:px-8 sm:py-14", children: [
+    backHref && /* @__PURE__ */ jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "self-start", children: /* @__PURE__ */ jsxs(Link, { href: backHref, children: [
+      /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+      " ",
+      backLabel
+    ] }) }),
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx("h1", { className: "font-serif text-3xl font-semibold tracking-tight text-balance sm:text-5xl", children: book.title }),
+      book.subtitle && /* @__PURE__ */ jsx("p", { className: "font-serif text-xl text-balance text-foreground/80 sm:text-2xl", children: book.subtitle }),
+      book.authors.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: book.authors.join(", ") }),
+      book.description && /* @__PURE__ */ jsx("p", { className: "max-w-prose text-lg text-foreground/80", children: book.description })
+    ] }),
+    /* @__PURE__ */ jsx(ContinueReading, { book, Link, hrefFor }),
+    /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-3", "aria-labelledby": "zr-chapters", children: [
+      /* @__PURE__ */ jsx("h2", { id: "zr-chapters", className: "text-sm font-medium tracking-wide text-muted-foreground uppercase", children: "Chapters" }),
+      /* @__PURE__ */ jsx(ChapterList, { book, Link, hrefFor })
+    ] })
+  ] }) });
+}
+var BookContents = BookHome;
+function Callout({ title, children }) {
+  return /* @__PURE__ */ jsxs(Alert, { className: "not-prose my-6", "data-zr-ignore": "", children: [
+    /* @__PURE__ */ jsx(LightbulbIcon, {}),
+    title && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
+    /* @__PURE__ */ jsx(AlertDescription, { children })
+  ] });
+}
+
+export { BookContents, BookHome, BookShelf, Callout, ChapterList, ContentsSheet, ContinueReading, DefaultLink, FONT_CLASS, HighlightPanel, LEADING_CLASS, MEASURE_CLASS, PROSE_CLASS, QUOTE_BORDER_CLASS, Reader, ReaderProvider, ReaderTitle, ResponsivePanel, SWATCH_CLASS, ScratchpadPanel, SelectionToolbar, SettingsPanel, TEXT_SIZE_CLASS, chapterMarker, copyText, defaultHref, downloadFile, groupByPart, mergeOptions, quoteBorderClass, scopeFor, scopeKey, swatchClass, useBook, useBookmarks, useChapterEngine, useHighlights, useHydrated, useIsDesktop, useLibrary, useMediaQuery, usePad, useProgress, useReader, useReaderChapter, useReaderStore, useSettings, useValueStore };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map