@embedpdf/react 3.0.0-next.1 → 3.0.0-next.11

package/dist/scrollbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.cjs","names":["StageToken","useSelector","useCapability"],"sources":["../src/scrollbar.tsx"],"sourcesContent":["/**\n * Headless scrollbar for a Stage lens — a pure view of `stage.scrollMetrics()`.\n *\n * The Stage exposes the native scroller contract (scrollTop/scrollHeight/\n * clientHeight, in screen px — see plugin-stage's README); this component turns\n * it into a native-feeling bar: thumb drag with pointer capture and a preserved\n * grab point, track paging with press-and-hold repeat that stops at the\n * pointer, a minimum thumb length on long documents, and macOS-style overlay\n * auto-hide. On an UNBOUNDED stage the metrics already carry the Figma\n * semantics (the range is the union of content and view), so the same bar\n * shrinks toward the edge as you pan away and rides you back — the mapping is\n * FROZEN for the duration of a thumb drag so the thumb never chases itself\n * while the union re-collapses.\n *\n * Headless styling contract: geometry and behavior live here; looks live in\n * your CSS. Style via `className`/`thumbClassName` (or the style props) against\n *   [data-embedpdf-scrollbar][data-axis=\"y\"][data-state=\"visible|hidden\"]\n *   [data-embedpdf-scrollbar][data-dragging]\n *   [data-embedpdf-scrollbar-thumb]\n * The defaults are deliberately minimal: a transparent track pinned to the\n * viewport edge and a `var(--epdf-scrollbar-thumb, …)` pill, so the bar works\n * unstyled and disappears into any theme. Build something else entirely\n * (minimap, progress ring) from `useScrollMetrics()` + `stage.scrollTo()`.\n */\n\nimport * as React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { StageToken } from '@embedpdf/plugin-stage';\nimport type { ScrollMetrics, StageCapability } from '@embedpdf/plugin-stage';\nimport type { CapabilityToken } from '@embedpdf/core';\nimport { useCapability, useSelector } from './runtime';\n\nexport type ScrollbarAxis = 'x' | 'y';\n\n/** Live scroll metrics for a stage lens (reference-stable; see\n *  `StageCapability.scrollMetrics`). The raw material for custom scroll UI. */\nexport function useScrollMetrics(\n  token: CapabilityToken<StageCapability> = StageToken,\n): ScrollMetrics {\n  return useSelector(token, (c) => c.scrollMetrics());\n}\n\nexport interface ScrollbarProps {\n  axis: ScrollbarAxis;\n  /** The stage lens to scroll (default: the main StageToken). */\n  token?: CapabilityToken<StageCapability>;\n  /**\n   * Overlay auto-hide: fade `autoHide` ms after the camera stops moving\n   * (drags and hover pin it visible; a hidden bar ignores the pointer, like\n   * macOS). `false` = always visible. Visibility is published as\n   * `data-state=\"visible|hidden\"` — the default style fades opacity; replace\n   * it in CSS for any other treatment. Default 1200.\n   */\n  autoHide?: number | false;\n  /** Minimum thumb length in px — native bars never vanish on long documents.\n   *  Position stays proportional via the standard travel remap. Default 24. */\n  minThumbSize?: number;\n  /**\n   * Pressing the track: 'page' steps by 90% of a viewport toward the pointer,\n   * repeats while held, and stops when the thumb reaches the pointer (the\n   * native default); 'jump' centers the thumb at the pointer and hands off to\n   * a drag (the macOS option-click / Figma feel). Default 'page'.\n   */\n  trackPress?: 'page' | 'jump';\n  /** Track class/style. The default style pins the bar to the right (y) or\n   *  bottom (x) edge of the nearest positioned ancestor — the Stage container\n   *  when rendered in its `overlay`; override to place it anywhere else. */\n  className?: string;\n  style?: React.CSSProperties;\n  thumbClassName?: string;\n  thumbStyle?: React.CSSProperties;\n}\n\nconst clamp01 = (v: number) => Math.min(1, Math.max(0, v));\n\n/** Best-effort pointer capture: an already-released pointer (pen/touch races,\n *  synthetic events in tests) throws NotFoundError — the press must still work,\n *  just without capture (moves keep arriving while the pointer stays on us). */\nconst capturePointer = (el: Element, pointerId: number) => {\n  try {\n    el.setPointerCapture(pointerId);\n  } catch {\n    /* uncaptured is fine */\n  }\n};\n\n/** Thumb geometry from metrics + a measured track. One formula for render,\n *  drag capture, and paging — they can never disagree. */\nconst geometry = (m: ScrollMetrics, vertical: boolean, trackPx: number, minThumbSize: number) => {\n  const client = vertical ? m.clientHeight : m.clientWidth;\n  const total = vertical ? m.scrollHeight : m.scrollWidth;\n  const offset = vertical ? m.scrollTop : m.scrollLeft;\n  const maxOffset = Math.max(0, total - client);\n  const thumbLen = Math.min(\n    trackPx,\n    Math.max(minThumbSize, total > 0 ? (client / total) * trackPx : 0),\n  );\n  const travel = Math.max(0, trackPx - thumbLen);\n  const thumbPos = maxOffset > 0 ? (offset / maxOffset) * travel : 0;\n  return { client, offset, maxOffset, thumbLen, travel, thumbPos };\n};\n\nexport function Scrollbar({\n  axis,\n  token = StageToken,\n  autoHide = 1200,\n  minThumbSize = 24,\n  trackPress = 'page',\n  className,\n  style,\n  thumbClassName,\n  thumbStyle,\n}: ScrollbarProps) {\n  const stage = useCapability(token);\n  const m = useScrollMetrics(token);\n  const vertical = axis === 'y';\n  const scrollable = vertical ? m.scrollableY : m.scrollableX;\n\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [trackPx, setTrackPx] = useState(0);\n  const [dragging, setDragging] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [active, setActive] = useState(true); // camera moved recently\n\n  const g = geometry(m, vertical, trackPx, minThumbSize);\n\n  // ── overlay auto-hide: any metrics change re-arms the fade timer ──────────\n  const hideAfter = autoHide === false ? 0 : autoHide;\n  useEffect(() => {\n    if (!hideAfter) return;\n    setActive(true);\n    const t = setTimeout(() => setActive(false), hideAfter);\n    return () => clearTimeout(t);\n  }, [m, hideAfter]);\n  const shown = !hideAfter || active || hovered || dragging;\n\n  // ── track measurement (px mapping needs real geometry) ────────────────────\n  useEffect(() => {\n    const el = trackRef.current;\n    if (!el) return;\n    const measure = () => setTrackPx(vertical ? el.clientHeight : el.clientWidth);\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    measure();\n    return () => ro.disconnect();\n  }, [vertical, scrollable]);\n\n  // ── interactions. Drag state is FROZEN at pointer-down (grab point, travel,\n  //    max offset) and applied as relative pans — absolute-feeling in bounded\n  //    mode (the range is static there) and stable in unbounded mode, where\n  //    the live union would otherwise shift under the pointer mid-drag. ──────\n  const dragRef = useRef<{ grab: number; applied: number; max: number; travel: number } | null>(\n    null,\n  );\n  const pageRef = useRef<{ dir: 1 | -1; timer: number } | null>(null);\n  const lastPtr = useRef(0);\n\n  const ptrPos = (e: React.PointerEvent) => {\n    const r = trackRef.current!.getBoundingClientRect();\n    return vertical ? e.clientY - r.top : e.clientX - r.left;\n  };\n  /** Fresh geometry for paging steps — read from the capability, never a stale render. */\n  const liveGeometry = () => geometry(stage.scrollMetrics(), vertical, trackPx, minThumbSize);\n\n  const stopPaging = () => {\n    if (pageRef.current) {\n      clearTimeout(pageRef.current.timer);\n      clearInterval(pageRef.current.timer);\n      pageRef.current = null;\n    }\n  };\n  const endDrag = () => {\n    dragRef.current = null;\n    stopPaging();\n    setDragging(false);\n  };\n\n  const beginDrag = (grab: number, applied: number) => {\n    dragRef.current = { grab, applied, max: g.maxOffset, travel: g.travel };\n    setDragging(true);\n  };\n\n  const onThumbDown = (e: React.PointerEvent) => {\n    if (e.button !== 0) return;\n    e.preventDefault();\n    e.stopPropagation();\n    capturePointer(e.target as Element, e.pointerId);\n    beginDrag(ptrPos(e) - g.thumbPos, g.offset);\n  };\n\n  const onTrackDown = (e: React.PointerEvent) => {\n    if (e.button !== 0 || e.target !== e.currentTarget) return; // thumb handles its own\n    e.preventDefault();\n    capturePointer(e.currentTarget as Element, e.pointerId);\n    const p = (lastPtr.current = ptrPos(e));\n\n    if (trackPress === 'jump') {\n      // land the thumb centered at the pointer, then it's an ordinary drag\n      const want = g.travel > 0 ? clamp01((p - g.thumbLen / 2) / g.travel) * g.maxOffset : 0;\n      stage.scrollTo(vertical ? { top: want } : { left: want });\n      beginDrag(g.thumbLen / 2, want);\n      return;\n    }\n\n    // 'page': step toward the pointer, repeat while held, stop at the pointer\n    const dir: 1 | -1 = p < g.thumbPos ? -1 : 1;\n    const step = () => {\n      const live = liveGeometry();\n      const reached =\n        dir === 1\n          ? lastPtr.current <= live.thumbPos + live.thumbLen\n          : lastPtr.current >= live.thumbPos;\n      if (reached) return stopPaging();\n      stage.scrollBy(\n        vertical ? { top: dir * live.client * 0.9 } : { left: dir * live.client * 0.9 },\n      );\n    };\n    step();\n    // native cadence: a beat before the repeat kicks in, then a steady march\n    const timer = window.setTimeout(() => {\n      if (!pageRef.current) return;\n      pageRef.current.timer = window.setInterval(step, 80);\n    }, 350);\n    pageRef.current = { dir, timer };\n  };\n\n  // Pointer capture retargets to the pressed element and bubbles here — one\n  // move/up pair serves thumb drags, jump-drags, and paging alike.\n  const onMove = (e: React.PointerEvent) => {\n    const d = dragRef.current;\n    if (d) {\n      if (d.travel <= 0) return;\n      const want = clamp01((ptrPos(e) - d.grab) / d.travel) * d.max;\n      const delta = want - d.applied;\n      if (delta) {\n        stage.panBy(vertical ? 0 : -delta, vertical ? -delta : 0);\n        d.applied = want;\n      }\n    } else if (pageRef.current) {\n      lastPtr.current = ptrPos(e);\n    }\n  };\n\n  useEffect(() => endDrag, []); // unmount: no orphaned repeat timers\n\n  if (!scrollable) return null;\n\n  const trackDefaults: React.CSSProperties = vertical\n    ? { position: 'absolute', top: 0, right: 0, bottom: 0, width: 12 }\n    : { position: 'absolute', left: 0, right: 0, bottom: 0, height: 12 };\n  const thumbDefaults: React.CSSProperties = vertical\n    ? { position: 'absolute', left: 2, right: 2, top: g.thumbPos, height: g.thumbLen }\n    : { position: 'absolute', top: 2, bottom: 2, left: g.thumbPos, width: g.thumbLen };\n\n  return (\n    <div\n      ref={trackRef}\n      role=\"scrollbar\"\n      aria-orientation={vertical ? 'vertical' : 'horizontal'}\n      aria-valuemin={0}\n      aria-valuemax={Math.round(g.maxOffset)}\n      aria-valuenow={Math.round(g.offset)}\n      data-embedpdf-scrollbar=\"\"\n      data-axis={axis}\n      data-state={shown ? 'visible' : 'hidden'}\n      data-dragging={dragging ? '' : undefined}\n      className={className}\n      style={{\n        ...trackDefaults,\n        touchAction: 'none',\n        userSelect: 'none',\n        opacity: shown ? 1 : 0,\n        transition: 'opacity 200ms',\n        // a hidden overlay bar must not eat the clicks under it\n        pointerEvents: shown ? 'auto' : 'none',\n        ...style,\n      }}\n      onPointerDown={onTrackDown}\n      onPointerMove={onMove}\n      onPointerUp={endDrag}\n      onPointerCancel={endDrag}\n      onPointerEnter={() => setHovered(true)}\n      onPointerLeave={() => setHovered(false)}\n    >\n      <div\n        data-embedpdf-scrollbar-thumb=\"\"\n        className={thumbClassName}\n        style={{\n          ...thumbDefaults,\n          borderRadius: 6,\n          background: 'var(--epdf-scrollbar-thumb, rgba(0, 0, 0, 0.4))',\n          ...thumbStyle,\n        }}\n        onPointerDown={onThumbDown}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"scrollbar.cjs","names":["StageToken","useSelector","useCapability"],"sources":["../src/scrollbar.tsx"],"sourcesContent":["/**\n * Headless scrollbar for a Stage lens — a pure view of `stage.scrollMetrics()`.\n *\n * The Stage exposes the native scroller contract (scrollTop/scrollHeight/\n * clientHeight, in screen px — see plugin-stage's README); this component turns\n * it into a native-feeling bar: thumb drag with pointer capture and a preserved\n * grab point, track paging with press-and-hold repeat that stops at the\n * pointer, a minimum thumb length on long documents, and macOS-style overlay\n * auto-hide. On an UNBOUNDED stage the metrics already carry the Figma\n * semantics (the range is the union of content and view), so the same bar\n * shrinks toward the edge as you pan away and rides you back — the mapping is\n * FROZEN for the duration of a thumb drag so the thumb never chases itself\n * while the union re-collapses.\n *\n * Headless styling contract: geometry and behavior live here; looks live in\n * your CSS. Style via `className`/`thumbClassName` (or the style props) against\n *   [data-embedpdf-scrollbar][data-axis=\"y\"][data-state=\"visible|hidden\"]\n *   [data-embedpdf-scrollbar][data-dragging]\n *   [data-embedpdf-scrollbar-thumb]\n * The defaults are deliberately minimal: a transparent track pinned to the\n * viewport edge and a `var(--epdf-scrollbar-thumb, …)` pill, so the bar works\n * unstyled and disappears into any theme. Build something else entirely\n * (minimap, progress ring) from `useScrollMetrics()` + `stage.scrollTo()`.\n */\n\nimport * as React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { StageToken } from '@embedpdf/plugin-stage/contract';\nimport type { ScrollMetrics, StageCapability } from '@embedpdf/plugin-stage/contract';\nimport type { CapabilityToken } from '@embedpdf/core';\nimport { useCapability, useSelector } from './runtime';\n\nexport type ScrollbarAxis = 'x' | 'y';\n\n/** Live scroll metrics for a stage lens (reference-stable; see\n *  `StageCapability.scrollMetrics`). The raw material for custom scroll UI. */\nexport function useScrollMetrics(\n  token: CapabilityToken<StageCapability> = StageToken,\n): ScrollMetrics {\n  return useSelector(token, (c) => c.scrollMetrics());\n}\n\nexport interface ScrollbarProps {\n  axis: ScrollbarAxis;\n  /** The stage lens to scroll (default: the main StageToken). */\n  token?: CapabilityToken<StageCapability>;\n  /**\n   * Overlay auto-hide: fade `autoHide` ms after the camera stops moving\n   * (drags and hover pin it visible; a hidden bar ignores the pointer, like\n   * macOS). `false` = always visible. Visibility is published as\n   * `data-state=\"visible|hidden\"` — the default style fades opacity; replace\n   * it in CSS for any other treatment. Default 1200.\n   */\n  autoHide?: number | false;\n  /** Minimum thumb length in px — native bars never vanish on long documents.\n   *  Position stays proportional via the standard travel remap. Default 24. */\n  minThumbSize?: number;\n  /**\n   * Pressing the track: 'page' steps by 90% of a viewport toward the pointer,\n   * repeats while held, and stops when the thumb reaches the pointer (the\n   * native default); 'jump' centers the thumb at the pointer and hands off to\n   * a drag (the macOS option-click / Figma feel). Default 'page'.\n   */\n  trackPress?: 'page' | 'jump';\n  /** Track class/style. The default style pins the bar to the right (y) or\n   *  bottom (x) edge of the nearest positioned ancestor — the Stage container\n   *  when rendered in its `overlay`; override to place it anywhere else. */\n  className?: string;\n  style?: React.CSSProperties;\n  thumbClassName?: string;\n  thumbStyle?: React.CSSProperties;\n}\n\nconst clamp01 = (v: number) => Math.min(1, Math.max(0, v));\n\n/** Best-effort pointer capture: an already-released pointer (pen/touch races,\n *  synthetic events in tests) throws NotFoundError — the press must still work,\n *  just without capture (moves keep arriving while the pointer stays on us). */\nconst capturePointer = (el: Element, pointerId: number) => {\n  try {\n    el.setPointerCapture(pointerId);\n  } catch {\n    /* uncaptured is fine */\n  }\n};\n\n/** Thumb geometry from metrics + a measured track. One formula for render,\n *  drag capture, and paging — they can never disagree. */\nconst geometry = (m: ScrollMetrics, vertical: boolean, trackPx: number, minThumbSize: number) => {\n  const client = vertical ? m.clientHeight : m.clientWidth;\n  const total = vertical ? m.scrollHeight : m.scrollWidth;\n  const offset = vertical ? m.scrollTop : m.scrollLeft;\n  const maxOffset = Math.max(0, total - client);\n  const thumbLen = Math.min(\n    trackPx,\n    Math.max(minThumbSize, total > 0 ? (client / total) * trackPx : 0),\n  );\n  const travel = Math.max(0, trackPx - thumbLen);\n  const thumbPos = maxOffset > 0 ? (offset / maxOffset) * travel : 0;\n  return { client, offset, maxOffset, thumbLen, travel, thumbPos };\n};\n\nexport function Scrollbar({\n  axis,\n  token = StageToken,\n  autoHide = 1200,\n  minThumbSize = 24,\n  trackPress = 'page',\n  className,\n  style,\n  thumbClassName,\n  thumbStyle,\n}: ScrollbarProps) {\n  const stage = useCapability(token);\n  const m = useScrollMetrics(token);\n  const vertical = axis === 'y';\n  const scrollable = vertical ? m.scrollableY : m.scrollableX;\n\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [trackPx, setTrackPx] = useState(0);\n  const [dragging, setDragging] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [active, setActive] = useState(true); // camera moved recently\n\n  const g = geometry(m, vertical, trackPx, minThumbSize);\n\n  // ── overlay auto-hide: any metrics change re-arms the fade timer ──────────\n  const hideAfter = autoHide === false ? 0 : autoHide;\n  useEffect(() => {\n    if (!hideAfter) return;\n    setActive(true);\n    const t = setTimeout(() => setActive(false), hideAfter);\n    return () => clearTimeout(t);\n  }, [m, hideAfter]);\n  const shown = !hideAfter || active || hovered || dragging;\n\n  // ── track measurement (px mapping needs real geometry) ────────────────────\n  useEffect(() => {\n    const el = trackRef.current;\n    if (!el) return;\n    const measure = () => setTrackPx(vertical ? el.clientHeight : el.clientWidth);\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    measure();\n    return () => ro.disconnect();\n  }, [vertical, scrollable]);\n\n  // ── interactions. Drag state is FROZEN at pointer-down (grab point, travel,\n  //    max offset) and applied as relative pans — absolute-feeling in bounded\n  //    mode (the range is static there) and stable in unbounded mode, where\n  //    the live union would otherwise shift under the pointer mid-drag. ──────\n  const dragRef = useRef<{ grab: number; applied: number; max: number; travel: number } | null>(\n    null,\n  );\n  const pageRef = useRef<{ dir: 1 | -1; timer: number } | null>(null);\n  const lastPtr = useRef(0);\n\n  const ptrPos = (e: React.PointerEvent) => {\n    const r = trackRef.current!.getBoundingClientRect();\n    return vertical ? e.clientY - r.top : e.clientX - r.left;\n  };\n  /** Fresh geometry for paging steps — read from the capability, never a stale render. */\n  const liveGeometry = () => geometry(stage.scrollMetrics(), vertical, trackPx, minThumbSize);\n\n  const stopPaging = () => {\n    if (pageRef.current) {\n      clearTimeout(pageRef.current.timer);\n      clearInterval(pageRef.current.timer);\n      pageRef.current = null;\n    }\n  };\n  const endDrag = () => {\n    dragRef.current = null;\n    stopPaging();\n    setDragging(false);\n  };\n\n  const beginDrag = (grab: number, applied: number) => {\n    dragRef.current = { grab, applied, max: g.maxOffset, travel: g.travel };\n    setDragging(true);\n  };\n\n  const onThumbDown = (e: React.PointerEvent) => {\n    if (e.button !== 0) return;\n    e.preventDefault();\n    e.stopPropagation();\n    capturePointer(e.target as Element, e.pointerId);\n    beginDrag(ptrPos(e) - g.thumbPos, g.offset);\n  };\n\n  const onTrackDown = (e: React.PointerEvent) => {\n    if (e.button !== 0 || e.target !== e.currentTarget) return; // thumb handles its own\n    e.preventDefault();\n    capturePointer(e.currentTarget as Element, e.pointerId);\n    const p = (lastPtr.current = ptrPos(e));\n\n    if (trackPress === 'jump') {\n      // land the thumb centered at the pointer, then it's an ordinary drag\n      const want = g.travel > 0 ? clamp01((p - g.thumbLen / 2) / g.travel) * g.maxOffset : 0;\n      stage.scrollTo(vertical ? { top: want } : { left: want });\n      beginDrag(g.thumbLen / 2, want);\n      return;\n    }\n\n    // 'page': step toward the pointer, repeat while held, stop at the pointer\n    const dir: 1 | -1 = p < g.thumbPos ? -1 : 1;\n    const step = () => {\n      const live = liveGeometry();\n      const reached =\n        dir === 1\n          ? lastPtr.current <= live.thumbPos + live.thumbLen\n          : lastPtr.current >= live.thumbPos;\n      if (reached) return stopPaging();\n      stage.scrollBy(\n        vertical ? { top: dir * live.client * 0.9 } : { left: dir * live.client * 0.9 },\n      );\n    };\n    step();\n    // native cadence: a beat before the repeat kicks in, then a steady march\n    const timer = window.setTimeout(() => {\n      if (!pageRef.current) return;\n      pageRef.current.timer = window.setInterval(step, 80);\n    }, 350);\n    pageRef.current = { dir, timer };\n  };\n\n  // Pointer capture retargets to the pressed element and bubbles here — one\n  // move/up pair serves thumb drags, jump-drags, and paging alike.\n  const onMove = (e: React.PointerEvent) => {\n    const d = dragRef.current;\n    if (d) {\n      if (d.travel <= 0) return;\n      const want = clamp01((ptrPos(e) - d.grab) / d.travel) * d.max;\n      const delta = want - d.applied;\n      if (delta) {\n        stage.panBy(vertical ? 0 : -delta, vertical ? -delta : 0);\n        d.applied = want;\n      }\n    } else if (pageRef.current) {\n      lastPtr.current = ptrPos(e);\n    }\n  };\n\n  useEffect(() => endDrag, []); // unmount: no orphaned repeat timers\n\n  if (!scrollable) return null;\n\n  const trackDefaults: React.CSSProperties = vertical\n    ? { position: 'absolute', top: 0, right: 0, bottom: 0, width: 12 }\n    : { position: 'absolute', left: 0, right: 0, bottom: 0, height: 12 };\n  const thumbDefaults: React.CSSProperties = vertical\n    ? { position: 'absolute', left: 2, right: 2, top: g.thumbPos, height: g.thumbLen }\n    : { position: 'absolute', top: 2, bottom: 2, left: g.thumbPos, width: g.thumbLen };\n\n  return (\n    <div\n      ref={trackRef}\n      role=\"scrollbar\"\n      aria-orientation={vertical ? 'vertical' : 'horizontal'}\n      aria-valuemin={0}\n      aria-valuemax={Math.round(g.maxOffset)}\n      aria-valuenow={Math.round(g.offset)}\n      data-embedpdf-scrollbar=\"\"\n      data-axis={axis}\n      data-state={shown ? 'visible' : 'hidden'}\n      data-dragging={dragging ? '' : undefined}\n      className={className}\n      style={{\n        ...trackDefaults,\n        touchAction: 'none',\n        userSelect: 'none',\n        opacity: shown ? 1 : 0,\n        transition: 'opacity 200ms',\n        // a hidden overlay bar must not eat the clicks under it\n        pointerEvents: shown ? 'auto' : 'none',\n        ...style,\n      }}\n      onPointerDown={onTrackDown}\n      onPointerMove={onMove}\n      onPointerUp={endDrag}\n      onPointerCancel={endDrag}\n      onPointerEnter={() => setHovered(true)}\n      onPointerLeave={() => setHovered(false)}\n    >\n      <div\n        data-embedpdf-scrollbar-thumb=\"\"\n        className={thumbClassName}\n        style={{\n          ...thumbDefaults,\n          borderRadius: 6,\n          background: 'var(--epdf-scrollbar-thumb, rgba(0, 0, 0, 0.4))',\n          ...thumbStyle,\n        }}\n        onPointerDown={onThumbDown}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/scrollbar.d.cts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { CapabilityToken } from "@embedpdf/core";
-import { ScrollMetrics, StageCapability } from "@embedpdf/plugin-stage";
+import { ScrollMetrics, StageCapability } from "@embedpdf/plugin-stage/contract";
 //#region src/scrollbar.d.ts
 type ScrollbarAxis = 'x' | 'y';
 /** Live scroll metrics for a stage lens (reference-stable; see

package/dist/scrollbar.d.ts

@@ -1,6 +1,6 @@
 import { CapabilityToken } from "@embedpdf/core";
 import * as React from "react";
-import { ScrollMetrics, StageCapability } from "@embedpdf/plugin-stage";
+import { ScrollMetrics, StageCapability } from "@embedpdf/plugin-stage/contract";
 //#region src/scrollbar.d.ts
 type ScrollbarAxis = 'x' | 'y';
 /** Live scroll metrics for a stage lens (reference-stable; see

package/dist/scrollbar.js

@@ -1,7 +1,7 @@
 import { useCapability, useSelector } from "./runtime.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { StageToken } from "@embedpdf/plugin-stage";
+import { StageToken } from "@embedpdf/plugin-stage/contract";
 //#region src/scrollbar.tsx
 /** Live scroll metrics for a stage lens (reference-stable; see
 *  `StageCapability.scrollMetrics`). The raw material for custom scroll UI. */

package/dist/scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.js","names":[],"sources":["../src/scrollbar.tsx"],"sourcesContent":["/**\n * Headless scrollbar for a Stage lens — a pure view of `stage.scrollMetrics()`.\n *\n * The Stage exposes the native scroller contract (scrollTop/scrollHeight/\n * clientHeight, in screen px — see plugin-stage's README); this component turns\n * it into a native-feeling bar: thumb drag with pointer capture and a preserved\n * grab point, track paging with press-and-hold repeat that stops at the\n * pointer, a minimum thumb length on long documents, and macOS-style overlay\n * auto-hide. On an UNBOUNDED stage the metrics already carry the Figma\n * semantics (the range is the union of content and view), so the same bar\n * shrinks toward the edge as you pan away and rides you back — the mapping is\n * FROZEN for the duration of a thumb drag so the thumb never chases itself\n * while the union re-collapses.\n *\n * Headless styling contract: geometry and behavior live here; looks live in\n * your CSS. Style via `className`/`thumbClassName` (or the style props) against\n *   [data-embedpdf-scrollbar][data-axis=\"y\"][data-state=\"visible|hidden\"]\n *   [data-embedpdf-scrollbar][data-dragging]\n *   [data-embedpdf-scrollbar-thumb]\n * The defaults are deliberately minimal: a transparent track pinned to the\n * viewport edge and a `var(--epdf-scrollbar-thumb, …)` pill, so the bar works\n * unstyled and disappears into any theme. Build something else entirely\n * (minimap, progress ring) from `useScrollMetrics()` + `stage.scrollTo()`.\n */\n\nimport * as React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { StageToken } from '@embedpdf/plugin-stage';\nimport type { ScrollMetrics, StageCapability } from '@embedpdf/plugin-stage';\nimport type { CapabilityToken } from '@embedpdf/core';\nimport { useCapability, useSelector } from './runtime';\n\nexport type ScrollbarAxis = 'x' | 'y';\n\n/** Live scroll metrics for a stage lens (reference-stable; see\n *  `StageCapability.scrollMetrics`). The raw material for custom scroll UI. */\nexport function useScrollMetrics(\n  token: CapabilityToken<StageCapability> = StageToken,\n): ScrollMetrics {\n  return useSelector(token, (c) => c.scrollMetrics());\n}\n\nexport interface ScrollbarProps {\n  axis: ScrollbarAxis;\n  /** The stage lens to scroll (default: the main StageToken). */\n  token?: CapabilityToken<StageCapability>;\n  /**\n   * Overlay auto-hide: fade `autoHide` ms after the camera stops moving\n   * (drags and hover pin it visible; a hidden bar ignores the pointer, like\n   * macOS). `false` = always visible. Visibility is published as\n   * `data-state=\"visible|hidden\"` — the default style fades opacity; replace\n   * it in CSS for any other treatment. Default 1200.\n   */\n  autoHide?: number | false;\n  /** Minimum thumb length in px — native bars never vanish on long documents.\n   *  Position stays proportional via the standard travel remap. Default 24. */\n  minThumbSize?: number;\n  /**\n   * Pressing the track: 'page' steps by 90% of a viewport toward the pointer,\n   * repeats while held, and stops when the thumb reaches the pointer (the\n   * native default); 'jump' centers the thumb at the pointer and hands off to\n   * a drag (the macOS option-click / Figma feel). Default 'page'.\n   */\n  trackPress?: 'page' | 'jump';\n  /** Track class/style. The default style pins the bar to the right (y) or\n   *  bottom (x) edge of the nearest positioned ancestor — the Stage container\n   *  when rendered in its `overlay`; override to place it anywhere else. */\n  className?: string;\n  style?: React.CSSProperties;\n  thumbClassName?: string;\n  thumbStyle?: React.CSSProperties;\n}\n\nconst clamp01 = (v: number) => Math.min(1, Math.max(0, v));\n\n/** Best-effort pointer capture: an already-released pointer (pen/touch races,\n *  synthetic events in tests) throws NotFoundError — the press must still work,\n *  just without capture (moves keep arriving while the pointer stays on us). */\nconst capturePointer = (el: Element, pointerId: number) => {\n  try {\n    el.setPointerCapture(pointerId);\n  } catch {\n    /* uncaptured is fine */\n  }\n};\n\n/** Thumb geometry from metrics + a measured track. One formula for render,\n *  drag capture, and paging — they can never disagree. */\nconst geometry = (m: ScrollMetrics, vertical: boolean, trackPx: number, minThumbSize: number) => {\n  const client = vertical ? m.clientHeight : m.clientWidth;\n  const total = vertical ? m.scrollHeight : m.scrollWidth;\n  const offset = vertical ? m.scrollTop : m.scrollLeft;\n  const maxOffset = Math.max(0, total - client);\n  const thumbLen = Math.min(\n    trackPx,\n    Math.max(minThumbSize, total > 0 ? (client / total) * trackPx : 0),\n  );\n  const travel = Math.max(0, trackPx - thumbLen);\n  const thumbPos = maxOffset > 0 ? (offset / maxOffset) * travel : 0;\n  return { client, offset, maxOffset, thumbLen, travel, thumbPos };\n};\n\nexport function Scrollbar({\n  axis,\n  token = StageToken,\n  autoHide = 1200,\n  minThumbSize = 24,\n  trackPress = 'page',\n  className,\n  style,\n  thumbClassName,\n  thumbStyle,\n}: ScrollbarProps) {\n  const stage = useCapability(token);\n  const m = useScrollMetrics(token);\n  const vertical = axis === 'y';\n  const scrollable = vertical ? m.scrollableY : m.scrollableX;\n\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [trackPx, setTrackPx] = useState(0);\n  const [dragging, setDragging] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [active, setActive] = useState(true); // camera moved recently\n\n  const g = geometry(m, vertical, trackPx, minThumbSize);\n\n  // ── overlay auto-hide: any metrics change re-arms the fade timer ──────────\n  const hideAfter = autoHide === false ? 0 : autoHide;\n  useEffect(() => {\n    if (!hideAfter) return;\n    setActive(true);\n    const t = setTimeout(() => setActive(false), hideAfter);\n    return () => clearTimeout(t);\n  }, [m, hideAfter]);\n  const shown = !hideAfter || active || hovered || dragging;\n\n  // ── track measurement (px mapping needs real geometry) ────────────────────\n  useEffect(() => {\n    const el = trackRef.current;\n    if (!el) return;\n    const measure = () => setTrackPx(vertical ? el.clientHeight : el.clientWidth);\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    measure();\n    return () => ro.disconnect();\n  }, [vertical, scrollable]);\n\n  // ── interactions. Drag state is FROZEN at pointer-down (grab point, travel,\n  //    max offset) and applied as relative pans — absolute-feeling in bounded\n  //    mode (the range is static there) and stable in unbounded mode, where\n  //    the live union would otherwise shift under the pointer mid-drag. ──────\n  const dragRef = useRef<{ grab: number; applied: number; max: number; travel: number } | null>(\n    null,\n  );\n  const pageRef = useRef<{ dir: 1 | -1; timer: number } | null>(null);\n  const lastPtr = useRef(0);\n\n  const ptrPos = (e: React.PointerEvent) => {\n    const r = trackRef.current!.getBoundingClientRect();\n    return vertical ? e.clientY - r.top : e.clientX - r.left;\n  };\n  /** Fresh geometry for paging steps — read from the capability, never a stale render. */\n  const liveGeometry = () => geometry(stage.scrollMetrics(), vertical, trackPx, minThumbSize);\n\n  const stopPaging = () => {\n    if (pageRef.current) {\n      clearTimeout(pageRef.current.timer);\n      clearInterval(pageRef.current.timer);\n      pageRef.current = null;\n    }\n  };\n  const endDrag = () => {\n    dragRef.current = null;\n    stopPaging();\n    setDragging(false);\n  };\n\n  const beginDrag = (grab: number, applied: number) => {\n    dragRef.current = { grab, applied, max: g.maxOffset, travel: g.travel };\n    setDragging(true);\n  };\n\n  const onThumbDown = (e: React.PointerEvent) => {\n    if (e.button !== 0) return;\n    e.preventDefault();\n    e.stopPropagation();\n    capturePointer(e.target as Element, e.pointerId);\n    beginDrag(ptrPos(e) - g.thumbPos, g.offset);\n  };\n\n  const onTrackDown = (e: React.PointerEvent) => {\n    if (e.button !== 0 || e.target !== e.currentTarget) return; // thumb handles its own\n    e.preventDefault();\n    capturePointer(e.currentTarget as Element, e.pointerId);\n    const p = (lastPtr.current = ptrPos(e));\n\n    if (trackPress === 'jump') {\n      // land the thumb centered at the pointer, then it's an ordinary drag\n      const want = g.travel > 0 ? clamp01((p - g.thumbLen / 2) / g.travel) * g.maxOffset : 0;\n      stage.scrollTo(vertical ? { top: want } : { left: want });\n      beginDrag(g.thumbLen / 2, want);\n      return;\n    }\n\n    // 'page': step toward the pointer, repeat while held, stop at the pointer\n    const dir: 1 | -1 = p < g.thumbPos ? -1 : 1;\n    const step = () => {\n      const live = liveGeometry();\n      const reached =\n        dir === 1\n          ? lastPtr.current <= live.thumbPos + live.thumbLen\n          : lastPtr.current >= live.thumbPos;\n      if (reached) return stopPaging();\n      stage.scrollBy(\n        vertical ? { top: dir * live.client * 0.9 } : { left: dir * live.client * 0.9 },\n      );\n    };\n    step();\n    // native cadence: a beat before the repeat kicks in, then a steady march\n    const timer = window.setTimeout(() => {\n      if (!pageRef.current) return;\n      pageRef.current.timer = window.setInterval(step, 80);\n    }, 350);\n    pageRef.current = { dir, timer };\n  };\n\n  // Pointer capture retargets to the pressed element and bubbles here — one\n  // move/up pair serves thumb drags, jump-drags, and paging alike.\n  const onMove = (e: React.PointerEvent) => {\n    const d = dragRef.current;\n    if (d) {\n      if (d.travel <= 0) return;\n      const want = clamp01((ptrPos(e) - d.grab) / d.travel) * d.max;\n      const delta = want - d.applied;\n      if (delta) {\n        stage.panBy(vertical ? 0 : -delta, vertical ? -delta : 0);\n        d.applied = want;\n      }\n    } else if (pageRef.current) {\n      lastPtr.current = ptrPos(e);\n    }\n  };\n\n  useEffect(() => endDrag, []); // unmount: no orphaned repeat timers\n\n  if (!scrollable) return null;\n\n  const trackDefaults: React.CSSProperties = vertical\n    ? { position: 'absolute', top: 0, right: 0, bottom: 0, width: 12 }\n    : { position: 'absolute', left: 0, right: 0, bottom: 0, height: 12 };\n  const thumbDefaults: React.CSSProperties = vertical\n    ? { position: 'absolute', left: 2, right: 2, top: g.thumbPos, height: g.thumbLen }\n    : { position: 'absolute', top: 2, bottom: 2, left: g.thumbPos, width: g.thumbLen };\n\n  return (\n    <div\n      ref={trackRef}\n      role=\"scrollbar\"\n      aria-orientation={vertical ? 'vertical' : 'horizontal'}\n      aria-valuemin={0}\n      aria-valuemax={Math.round(g.maxOffset)}\n      aria-valuenow={Math.round(g.offset)}\n      data-embedpdf-scrollbar=\"\"\n      data-axis={axis}\n      data-state={shown ? 'visible' : 'hidden'}\n      data-dragging={dragging ? '' : undefined}\n      className={className}\n      style={{\n        ...trackDefaults,\n        touchAction: 'none',\n        userSelect: 'none',\n        opacity: shown ? 1 : 0,\n        transition: 'opacity 200ms',\n        // a hidden overlay bar must not eat the clicks under it\n        pointerEvents: shown ? 'auto' : 'none',\n        ...style,\n      }}\n      onPointerDown={onTrackDown}\n      onPointerMove={onMove}\n      onPointerUp={endDrag}\n      onPointerCancel={endDrag}\n      onPointerEnter={() => setHovered(true)}\n      onPointerLeave={() => setHovered(false)}\n    >\n      <div\n        data-embedpdf-scrollbar-thumb=\"\"\n        className={thumbClassName}\n        style={{\n          ...thumbDefaults,\n          borderRadius: 6,\n          background: 'var(--epdf-scrollbar-thumb, rgba(0, 0, 0, 0.4))',\n          ...thumbStyle,\n        }}\n        onPointerDown={onThumbDown}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,iBACd,QAA0C,YAC3B;CACf,OAAO,YAAY,QAAQ,MAAM,EAAE,cAAc,CAAC;AACpD;AAiCA,MAAM,WAAW,MAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,CAAC,CAAC;;;;AAKzD,MAAM,kBAAkB,IAAa,cAAsB;CACzD,IAAI;EACF,GAAG,kBAAkB,SAAS;CAChC,QAAQ,CAER;AACF;;;AAIA,MAAM,YAAY,GAAkB,UAAmB,SAAiB,iBAAyB;CAC/F,MAAM,SAAS,WAAW,EAAE,eAAe,EAAE;CAC7C,MAAM,QAAQ,WAAW,EAAE,eAAe,EAAE;CAC5C,MAAM,SAAS,WAAW,EAAE,YAAY,EAAE;CAC1C,MAAM,YAAY,KAAK,IAAI,GAAG,QAAQ,MAAM;CAC5C,MAAM,WAAW,KAAK,IACpB,SACA,KAAK,IAAI,cAAc,QAAQ,IAAK,SAAS,QAAS,UAAU,CAAC,CACnE;CACA,MAAM,SAAS,KAAK,IAAI,GAAG,UAAU,QAAQ;CAE7C,OAAO;EAAE;EAAQ;EAAQ;EAAW;EAAU;EAAQ,UADrC,YAAY,IAAK,SAAS,YAAa,SAAS;CACF;AACjE;AAEA,SAAgB,UAAU,EACxB,MACA,QAAQ,YACR,WAAW,MACX,eAAe,IACf,aAAa,QACb,WACA,OACA,gBACA,cACiB;CACjB,MAAM,QAAQ,cAAc,KAAK;CACjC,MAAM,IAAI,iBAAiB,KAAK;CAChC,MAAM,WAAW,SAAS;CAC1B,MAAM,aAAa,WAAW,EAAE,cAAc,EAAE;CAEhD,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC;CACxC,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,QAAQ,aAAa,SAAS,IAAI;CAEzC,MAAM,IAAI,SAAS,GAAG,UAAU,SAAS,YAAY;CAGrD,MAAM,YAAY,aAAa,QAAQ,IAAI;CAC3C,gBAAgB;EACd,IAAI,CAAC,WAAW;EAChB,UAAU,IAAI;EACd,MAAM,IAAI,iBAAiB,UAAU,KAAK,GAAG,SAAS;EACtD,aAAa,aAAa,CAAC;CAC7B,GAAG,CAAC,GAAG,SAAS,CAAC;CACjB,MAAM,QAAQ,CAAC,aAAa,UAAU,WAAW;CAGjD,gBAAgB;EACd,MAAM,KAAK,SAAS;EACpB,IAAI,CAAC,IAAI;EACT,MAAM,gBAAgB,WAAW,WAAW,GAAG,eAAe,GAAG,WAAW;EAC5E,MAAM,KAAK,IAAI,eAAe,OAAO;EACrC,GAAG,QAAQ,EAAE;EACb,QAAQ;EACR,aAAa,GAAG,WAAW;CAC7B,GAAG,CAAC,UAAU,UAAU,CAAC;CAMzB,MAAM,UAAU,OACd,IACF;CACA,MAAM,UAAU,OAA8C,IAAI;CAClE,MAAM,UAAU,OAAO,CAAC;CAExB,MAAM,UAAU,MAA0B;EACxC,MAAM,IAAI,SAAS,QAAS,sBAAsB;EAClD,OAAO,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE;CACtD;;CAEA,MAAM,qBAAqB,SAAS,MAAM,cAAc,GAAG,UAAU,SAAS,YAAY;CAE1F,MAAM,mBAAmB;EACvB,IAAI,QAAQ,SAAS;GACnB,aAAa,QAAQ,QAAQ,KAAK;GAClC,cAAc,QAAQ,QAAQ,KAAK;GACnC,QAAQ,UAAU;EACpB;CACF;CACA,MAAM,gBAAgB;EACpB,QAAQ,UAAU;EAClB,WAAW;EACX,YAAY,KAAK;CACnB;CAEA,MAAM,aAAa,MAAc,YAAoB;EACnD,QAAQ,UAAU;GAAE;GAAM;GAAS,KAAK,EAAE;GAAW,QAAQ,EAAE;EAAO;EACtE,YAAY,IAAI;CAClB;CAEA,MAAM,eAAe,MAA0B;EAC7C,IAAI,EAAE,WAAW,GAAG;EACpB,EAAE,eAAe;EACjB,EAAE,gBAAgB;EAClB,eAAe,EAAE,QAAmB,EAAE,SAAS;EAC/C,UAAU,OAAO,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM;CAC5C;CAEA,MAAM,eAAe,MAA0B;EAC7C,IAAI,EAAE,WAAW,KAAK,EAAE,WAAW,EAAE,eAAe;EACpD,EAAE,eAAe;EACjB,eAAe,EAAE,eAA0B,EAAE,SAAS;EACtD,MAAM,IAAK,QAAQ,UAAU,OAAO,CAAC;EAErC,IAAI,eAAe,QAAQ;GAEzB,MAAM,OAAO,EAAE,SAAS,IAAI,SAAS,IAAI,EAAE,WAAW,KAAK,EAAE,MAAM,IAAI,EAAE,YAAY;GACrF,MAAM,SAAS,WAAW,EAAE,KAAK,KAAK,IAAI,EAAE,MAAM,KAAK,CAAC;GACxD,UAAU,EAAE,WAAW,GAAG,IAAI;GAC9B;EACF;EAGA,MAAM,MAAc,IAAI,EAAE,WAAW,KAAK;EAC1C,MAAM,aAAa;GACjB,MAAM,OAAO,aAAa;GAK1B,IAHE,QAAQ,IACJ,QAAQ,WAAW,KAAK,WAAW,KAAK,WACxC,QAAQ,WAAW,KAAK,UACjB,OAAO,WAAW;GAC/B,MAAM,SACJ,WAAW,EAAE,KAAK,MAAM,KAAK,SAAS,GAAI,IAAI,EAAE,MAAM,MAAM,KAAK,SAAS,GAAI,CAChF;EACF;EACA,KAAK;EAEL,MAAM,QAAQ,OAAO,iBAAiB;GACpC,IAAI,CAAC,QAAQ,SAAS;GACtB,QAAQ,QAAQ,QAAQ,OAAO,YAAY,MAAM,EAAE;EACrD,GAAG,GAAG;EACN,QAAQ,UAAU;GAAE;GAAK;EAAM;CACjC;CAIA,MAAM,UAAU,MAA0B;EACxC,MAAM,IAAI,QAAQ;EAClB,IAAI,GAAG;GACL,IAAI,EAAE,UAAU,GAAG;GACnB,MAAM,OAAO,SAAS,OAAO,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE;GAC1D,MAAM,QAAQ,OAAO,EAAE;GACvB,IAAI,OAAO;IACT,MAAM,MAAM,WAAW,IAAI,CAAC,OAAO,WAAW,CAAC,QAAQ,CAAC;IACxD,EAAE,UAAU;GACd;EACF,OAAO,IAAI,QAAQ,SACjB,QAAQ,UAAU,OAAO,CAAC;CAE9B;CAEA,gBAAgB,SAAS,CAAC,CAAC;CAE3B,IAAI,CAAC,YAAY,OAAO;CAExB,MAAM,gBAAqC,WACvC;EAAE,UAAU;EAAY,KAAK;EAAG,OAAO;EAAG,QAAQ;EAAG,OAAO;CAAG,IAC/D;EAAE,UAAU;EAAY,MAAM;EAAG,OAAO;EAAG,QAAQ;EAAG,QAAQ;CAAG;CACrE,MAAM,gBAAqC,WACvC;EAAE,UAAU;EAAY,MAAM;EAAG,OAAO;EAAG,KAAK,EAAE;EAAU,QAAQ,EAAE;CAAS,IAC/E;EAAE,UAAU;EAAY,KAAK;EAAG,QAAQ;EAAG,MAAM,EAAE;EAAU,OAAO,EAAE;CAAS;CAEnF,OACE,oBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,oBAAkB,WAAW,aAAa;EAC1C,iBAAe;EACf,iBAAe,KAAK,MAAM,EAAE,SAAS;EACrC,iBAAe,KAAK,MAAM,EAAE,MAAM;EAClC,2BAAwB;EACxB,aAAW;EACX,cAAY,QAAQ,YAAY;EAChC,iBAAe,WAAW,KAAK,KAAA;EACpB;EACX,OAAO;GACL,GAAG;GACH,aAAa;GACb,YAAY;GACZ,SAAS,QAAQ,IAAI;GACrB,YAAY;GAEZ,eAAe,QAAQ,SAAS;GAChC,GAAG;EACL;EACA,eAAe;EACf,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,sBAAsB,WAAW,IAAI;EACrC,sBAAsB,WAAW,KAAK;EAEtC,UAAA,oBAAC,OAAD;GACE,iCAA8B;GAC9B,WAAW;GACX,OAAO;IACL,GAAG;IACH,cAAc;IACd,YAAY;IACZ,GAAG;GACL;GACA,eAAe;EAChB,CAAA;CACE,CAAA;AAET"}
+{"version":3,"file":"scrollbar.js","names":[],"sources":["../src/scrollbar.tsx"],"sourcesContent":["/**\n * Headless scrollbar for a Stage lens — a pure view of `stage.scrollMetrics()`.\n *\n * The Stage exposes the native scroller contract (scrollTop/scrollHeight/\n * clientHeight, in screen px — see plugin-stage's README); this component turns\n * it into a native-feeling bar: thumb drag with pointer capture and a preserved\n * grab point, track paging with press-and-hold repeat that stops at the\n * pointer, a minimum thumb length on long documents, and macOS-style overlay\n * auto-hide. On an UNBOUNDED stage the metrics already carry the Figma\n * semantics (the range is the union of content and view), so the same bar\n * shrinks toward the edge as you pan away and rides you back — the mapping is\n * FROZEN for the duration of a thumb drag so the thumb never chases itself\n * while the union re-collapses.\n *\n * Headless styling contract: geometry and behavior live here; looks live in\n * your CSS. Style via `className`/`thumbClassName` (or the style props) against\n *   [data-embedpdf-scrollbar][data-axis=\"y\"][data-state=\"visible|hidden\"]\n *   [data-embedpdf-scrollbar][data-dragging]\n *   [data-embedpdf-scrollbar-thumb]\n * The defaults are deliberately minimal: a transparent track pinned to the\n * viewport edge and a `var(--epdf-scrollbar-thumb, …)` pill, so the bar works\n * unstyled and disappears into any theme. Build something else entirely\n * (minimap, progress ring) from `useScrollMetrics()` + `stage.scrollTo()`.\n */\n\nimport * as React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { StageToken } from '@embedpdf/plugin-stage/contract';\nimport type { ScrollMetrics, StageCapability } from '@embedpdf/plugin-stage/contract';\nimport type { CapabilityToken } from '@embedpdf/core';\nimport { useCapability, useSelector } from './runtime';\n\nexport type ScrollbarAxis = 'x' | 'y';\n\n/** Live scroll metrics for a stage lens (reference-stable; see\n *  `StageCapability.scrollMetrics`). The raw material for custom scroll UI. */\nexport function useScrollMetrics(\n  token: CapabilityToken<StageCapability> = StageToken,\n): ScrollMetrics {\n  return useSelector(token, (c) => c.scrollMetrics());\n}\n\nexport interface ScrollbarProps {\n  axis: ScrollbarAxis;\n  /** The stage lens to scroll (default: the main StageToken). */\n  token?: CapabilityToken<StageCapability>;\n  /**\n   * Overlay auto-hide: fade `autoHide` ms after the camera stops moving\n   * (drags and hover pin it visible; a hidden bar ignores the pointer, like\n   * macOS). `false` = always visible. Visibility is published as\n   * `data-state=\"visible|hidden\"` — the default style fades opacity; replace\n   * it in CSS for any other treatment. Default 1200.\n   */\n  autoHide?: number | false;\n  /** Minimum thumb length in px — native bars never vanish on long documents.\n   *  Position stays proportional via the standard travel remap. Default 24. */\n  minThumbSize?: number;\n  /**\n   * Pressing the track: 'page' steps by 90% of a viewport toward the pointer,\n   * repeats while held, and stops when the thumb reaches the pointer (the\n   * native default); 'jump' centers the thumb at the pointer and hands off to\n   * a drag (the macOS option-click / Figma feel). Default 'page'.\n   */\n  trackPress?: 'page' | 'jump';\n  /** Track class/style. The default style pins the bar to the right (y) or\n   *  bottom (x) edge of the nearest positioned ancestor — the Stage container\n   *  when rendered in its `overlay`; override to place it anywhere else. */\n  className?: string;\n  style?: React.CSSProperties;\n  thumbClassName?: string;\n  thumbStyle?: React.CSSProperties;\n}\n\nconst clamp01 = (v: number) => Math.min(1, Math.max(0, v));\n\n/** Best-effort pointer capture: an already-released pointer (pen/touch races,\n *  synthetic events in tests) throws NotFoundError — the press must still work,\n *  just without capture (moves keep arriving while the pointer stays on us). */\nconst capturePointer = (el: Element, pointerId: number) => {\n  try {\n    el.setPointerCapture(pointerId);\n  } catch {\n    /* uncaptured is fine */\n  }\n};\n\n/** Thumb geometry from metrics + a measured track. One formula for render,\n *  drag capture, and paging — they can never disagree. */\nconst geometry = (m: ScrollMetrics, vertical: boolean, trackPx: number, minThumbSize: number) => {\n  const client = vertical ? m.clientHeight : m.clientWidth;\n  const total = vertical ? m.scrollHeight : m.scrollWidth;\n  const offset = vertical ? m.scrollTop : m.scrollLeft;\n  const maxOffset = Math.max(0, total - client);\n  const thumbLen = Math.min(\n    trackPx,\n    Math.max(minThumbSize, total > 0 ? (client / total) * trackPx : 0),\n  );\n  const travel = Math.max(0, trackPx - thumbLen);\n  const thumbPos = maxOffset > 0 ? (offset / maxOffset) * travel : 0;\n  return { client, offset, maxOffset, thumbLen, travel, thumbPos };\n};\n\nexport function Scrollbar({\n  axis,\n  token = StageToken,\n  autoHide = 1200,\n  minThumbSize = 24,\n  trackPress = 'page',\n  className,\n  style,\n  thumbClassName,\n  thumbStyle,\n}: ScrollbarProps) {\n  const stage = useCapability(token);\n  const m = useScrollMetrics(token);\n  const vertical = axis === 'y';\n  const scrollable = vertical ? m.scrollableY : m.scrollableX;\n\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [trackPx, setTrackPx] = useState(0);\n  const [dragging, setDragging] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [active, setActive] = useState(true); // camera moved recently\n\n  const g = geometry(m, vertical, trackPx, minThumbSize);\n\n  // ── overlay auto-hide: any metrics change re-arms the fade timer ──────────\n  const hideAfter = autoHide === false ? 0 : autoHide;\n  useEffect(() => {\n    if (!hideAfter) return;\n    setActive(true);\n    const t = setTimeout(() => setActive(false), hideAfter);\n    return () => clearTimeout(t);\n  }, [m, hideAfter]);\n  const shown = !hideAfter || active || hovered || dragging;\n\n  // ── track measurement (px mapping needs real geometry) ────────────────────\n  useEffect(() => {\n    const el = trackRef.current;\n    if (!el) return;\n    const measure = () => setTrackPx(vertical ? el.clientHeight : el.clientWidth);\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    measure();\n    return () => ro.disconnect();\n  }, [vertical, scrollable]);\n\n  // ── interactions. Drag state is FROZEN at pointer-down (grab point, travel,\n  //    max offset) and applied as relative pans — absolute-feeling in bounded\n  //    mode (the range is static there) and stable in unbounded mode, where\n  //    the live union would otherwise shift under the pointer mid-drag. ──────\n  const dragRef = useRef<{ grab: number; applied: number; max: number; travel: number } | null>(\n    null,\n  );\n  const pageRef = useRef<{ dir: 1 | -1; timer: number } | null>(null);\n  const lastPtr = useRef(0);\n\n  const ptrPos = (e: React.PointerEvent) => {\n    const r = trackRef.current!.getBoundingClientRect();\n    return vertical ? e.clientY - r.top : e.clientX - r.left;\n  };\n  /** Fresh geometry for paging steps — read from the capability, never a stale render. */\n  const liveGeometry = () => geometry(stage.scrollMetrics(), vertical, trackPx, minThumbSize);\n\n  const stopPaging = () => {\n    if (pageRef.current) {\n      clearTimeout(pageRef.current.timer);\n      clearInterval(pageRef.current.timer);\n      pageRef.current = null;\n    }\n  };\n  const endDrag = () => {\n    dragRef.current = null;\n    stopPaging();\n    setDragging(false);\n  };\n\n  const beginDrag = (grab: number, applied: number) => {\n    dragRef.current = { grab, applied, max: g.maxOffset, travel: g.travel };\n    setDragging(true);\n  };\n\n  const onThumbDown = (e: React.PointerEvent) => {\n    if (e.button !== 0) return;\n    e.preventDefault();\n    e.stopPropagation();\n    capturePointer(e.target as Element, e.pointerId);\n    beginDrag(ptrPos(e) - g.thumbPos, g.offset);\n  };\n\n  const onTrackDown = (e: React.PointerEvent) => {\n    if (e.button !== 0 || e.target !== e.currentTarget) return; // thumb handles its own\n    e.preventDefault();\n    capturePointer(e.currentTarget as Element, e.pointerId);\n    const p = (lastPtr.current = ptrPos(e));\n\n    if (trackPress === 'jump') {\n      // land the thumb centered at the pointer, then it's an ordinary drag\n      const want = g.travel > 0 ? clamp01((p - g.thumbLen / 2) / g.travel) * g.maxOffset : 0;\n      stage.scrollTo(vertical ? { top: want } : { left: want });\n      beginDrag(g.thumbLen / 2, want);\n      return;\n    }\n\n    // 'page': step toward the pointer, repeat while held, stop at the pointer\n    const dir: 1 | -1 = p < g.thumbPos ? -1 : 1;\n    const step = () => {\n      const live = liveGeometry();\n      const reached =\n        dir === 1\n          ? lastPtr.current <= live.thumbPos + live.thumbLen\n          : lastPtr.current >= live.thumbPos;\n      if (reached) return stopPaging();\n      stage.scrollBy(\n        vertical ? { top: dir * live.client * 0.9 } : { left: dir * live.client * 0.9 },\n      );\n    };\n    step();\n    // native cadence: a beat before the repeat kicks in, then a steady march\n    const timer = window.setTimeout(() => {\n      if (!pageRef.current) return;\n      pageRef.current.timer = window.setInterval(step, 80);\n    }, 350);\n    pageRef.current = { dir, timer };\n  };\n\n  // Pointer capture retargets to the pressed element and bubbles here — one\n  // move/up pair serves thumb drags, jump-drags, and paging alike.\n  const onMove = (e: React.PointerEvent) => {\n    const d = dragRef.current;\n    if (d) {\n      if (d.travel <= 0) return;\n      const want = clamp01((ptrPos(e) - d.grab) / d.travel) * d.max;\n      const delta = want - d.applied;\n      if (delta) {\n        stage.panBy(vertical ? 0 : -delta, vertical ? -delta : 0);\n        d.applied = want;\n      }\n    } else if (pageRef.current) {\n      lastPtr.current = ptrPos(e);\n    }\n  };\n\n  useEffect(() => endDrag, []); // unmount: no orphaned repeat timers\n\n  if (!scrollable) return null;\n\n  const trackDefaults: React.CSSProperties = vertical\n    ? { position: 'absolute', top: 0, right: 0, bottom: 0, width: 12 }\n    : { position: 'absolute', left: 0, right: 0, bottom: 0, height: 12 };\n  const thumbDefaults: React.CSSProperties = vertical\n    ? { position: 'absolute', left: 2, right: 2, top: g.thumbPos, height: g.thumbLen }\n    : { position: 'absolute', top: 2, bottom: 2, left: g.thumbPos, width: g.thumbLen };\n\n  return (\n    <div\n      ref={trackRef}\n      role=\"scrollbar\"\n      aria-orientation={vertical ? 'vertical' : 'horizontal'}\n      aria-valuemin={0}\n      aria-valuemax={Math.round(g.maxOffset)}\n      aria-valuenow={Math.round(g.offset)}\n      data-embedpdf-scrollbar=\"\"\n      data-axis={axis}\n      data-state={shown ? 'visible' : 'hidden'}\n      data-dragging={dragging ? '' : undefined}\n      className={className}\n      style={{\n        ...trackDefaults,\n        touchAction: 'none',\n        userSelect: 'none',\n        opacity: shown ? 1 : 0,\n        transition: 'opacity 200ms',\n        // a hidden overlay bar must not eat the clicks under it\n        pointerEvents: shown ? 'auto' : 'none',\n        ...style,\n      }}\n      onPointerDown={onTrackDown}\n      onPointerMove={onMove}\n      onPointerUp={endDrag}\n      onPointerCancel={endDrag}\n      onPointerEnter={() => setHovered(true)}\n      onPointerLeave={() => setHovered(false)}\n    >\n      <div\n        data-embedpdf-scrollbar-thumb=\"\"\n        className={thumbClassName}\n        style={{\n          ...thumbDefaults,\n          borderRadius: 6,\n          background: 'var(--epdf-scrollbar-thumb, rgba(0, 0, 0, 0.4))',\n          ...thumbStyle,\n        }}\n        onPointerDown={onThumbDown}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/search.cjs

@@ -17,25 +17,42 @@ function SearchLayer({ color = "#ffd500", activeColor = "#ff9632", blendMode = "
 			inset: 0,
 			pointerEvents: "none"
 		},
-		children: hits.map((hit) => hit.rects.map((r, i) => {
-			const tl = page.transform.pageToContent({
-				x: r.x,
-				y: r.y
-			});
-			const br = page.transform.pageToContent({
-				x: r.x + r.width,
-				y: r.y + r.height
-			});
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-				position: "absolute",
-				left: tl.x,
-				top: tl.y,
-				width: br.x - tl.x,
-				height: br.y - tl.y,
-				background: hit === active ? activeColor : color,
-				mixBlendMode: blendMode,
-				borderRadius: 2
-			} }, `${hit.charStart}:${i}`);
+		children: hits.map((hit) => hit.segments.map(({ quad: q }, i) => {
+			const fill = hit === active ? activeColor : color;
+			if (q.upperStart.y === q.upperEnd.y && q.lowerStart.y === q.lowerEnd.y && q.upperStart.x === q.lowerStart.x) {
+				const tl = page.transform.toPixels(q.upperStart);
+				const br = page.transform.toPixels(q.lowerEnd);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+					position: "absolute",
+					left: tl.x,
+					top: tl.y,
+					width: br.x - tl.x,
+					height: br.y - tl.y,
+					background: fill,
+					mixBlendMode: blendMode,
+					borderRadius: 2
+				} }, `${hit.charStart}:${i}`);
+			}
+			const ring = [
+				q.upperStart,
+				q.upperEnd,
+				q.lowerEnd,
+				q.lowerStart
+			].map((p) => page.transform.toPixels(p));
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				style: {
+					position: "absolute",
+					inset: 0,
+					width: "100%",
+					height: "100%",
+					overflow: "visible",
+					mixBlendMode: blendMode
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+					points: ring.map((p) => `${p.x},${p.y}`).join(" "),
+					fill
+				})
+			}, `${hit.charStart}:${i}`);
 		}))
 	});
 }

package/dist/search.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"search.cjs","names":["usePage","useSelector","SearchToken","shallowArray","useCapability"],"sources":["../src/search.tsx"],"sourcesContent":["/**\n * The React surface for @embedpdf/plugin-search.\n *\n * <SearchLayer> is a dumb renderer, the SelectionLayer's twin: it reads\n * the page's content-space hit rects from the capability and paints them\n * through PageContext.pageToContent. The active hit gets its own colour.\n * No pointer handling, no engine calls — search is driven from app chrome\n * via useSearch().\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-search';\nimport * as React from 'react';\nimport { SearchToken } from '@embedpdf/plugin-search';\nimport type { SearchHit } from '@embedpdf/plugin-search';\nimport { shallowArray, useCapability, usePage, useSelector } from './runtime';\n\nexport interface SearchLayerProps {\n  /** Highlight colour for hits — SOLID (default: highlighter yellow). */\n  color?: string;\n  /** Highlight colour for the ACTIVE hit — SOLID (default: orange). */\n  activeColor?: string;\n  /**\n   * How the highlight composites with the page. `'multiply'` (default) is\n   * the real-highlighter look: text stays crisp black through the colour,\n   * only the paper tints. Pass `'normal'` (with translucent colours) for\n   * dark/scanned documents where multiply-on-dark would vanish.\n   */\n  blendMode?: React.CSSProperties['mixBlendMode'];\n}\n\nexport function SearchLayer({\n  color = '#ffd500',\n  activeColor = '#ff9632',\n  blendMode = 'multiply',\n}: SearchLayerProps) {\n  const page = usePage();\n  const hits = useSelector(SearchToken, (c) => c.hitsForPage(page.pon), shallowArray);\n  const active = useSelector(SearchToken, (c) => c.activeHit());\n\n  if (hits.length === 0) return null;\n\n  return (\n    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n      {hits.map((hit: SearchHit) =>\n        hit.rects.map((r, i) => {\n          const tl = page.transform.pageToContent({ x: r.x, y: r.y });\n          const br = page.transform.pageToContent({ x: r.x + r.width, y: r.y + r.height });\n          return (\n            <div\n              key={`${hit.charStart}:${i}`}\n              style={{\n                position: 'absolute',\n                left: tl.x,\n                top: tl.y,\n                width: br.x - tl.x,\n                height: br.y - tl.y,\n                background: hit === active ? activeColor : color,\n                mixBlendMode: blendMode,\n                borderRadius: 2,\n              }}\n            />\n          );\n        }),\n      )}\n    </div>\n  );\n}\n\n/** The search capability (search/clear/next/prev/…) for app chrome. */\nexport function useSearch() {\n  return useCapability(SearchToken);\n}\n\n/** Reactive search read-model for chrome: the query, status, counts, progress. */\nexport function useSearchState() {\n  const query = useSelector(SearchToken, (c) => c.query());\n  const status = useSelector(SearchToken, (c) => c.status());\n  const hitCount = useSelector(SearchToken, (c) => c.hitCount());\n  const activeIndex = useSelector(SearchToken, (c) => c.activeIndex());\n  const progress = useSelector(\n    SearchToken,\n    (c) => c.progress(),\n    (a, b) => a.scanned === b.scanned && a.total === b.total,\n  );\n  const error = useSelector(SearchToken, (c) => c.errorMessage());\n  return { query, status, hitCount, activeIndex, progress, error };\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgB,YAAY,EAC1B,QAAQ,WACR,cAAc,WACd,YAAY,cACO;CACnB,MAAM,OAAOA,gBAAAA,QAAQ;CACrB,MAAM,OAAOC,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,YAAY,KAAK,GAAG,GAAGC,gBAAAA,YAAY;CAClF,MAAM,SAASF,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,UAAU,CAAC;CAE5D,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,OAAO;GAAE,UAAU;GAAY,OAAO;GAAG,eAAe;EAAO;EACjE,UAAA,KAAK,KAAK,QACT,IAAI,MAAM,KAAK,GAAG,MAAM;GACtB,MAAM,KAAK,KAAK,UAAU,cAAc;IAAE,GAAG,EAAE;IAAG,GAAG,EAAE;GAAE,CAAC;GAC1D,MAAM,KAAK,KAAK,UAAU,cAAc;IAAE,GAAG,EAAE,IAAI,EAAE;IAAO,GAAG,EAAE,IAAI,EAAE;GAAO,CAAC;GAC/E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAEE,OAAO;IACL,UAAU;IACV,MAAM,GAAG;IACT,KAAK,GAAG;IACR,OAAO,GAAG,IAAI,GAAG;IACjB,QAAQ,GAAG,IAAI,GAAG;IAClB,YAAY,QAAQ,SAAS,cAAc;IAC3C,cAAc;IACd,cAAc;GAChB,EACD,GAXM,GAAG,IAAI,UAAU,GAAG,GAW1B;EAEL,CAAC,CACH;CACG,CAAA;AAET;;AAGA,SAAgB,YAAY;CAC1B,OAAOE,gBAAAA,cAAcF,wBAAAA,WAAW;AAClC;;AAGA,SAAgB,iBAAiB;CAW/B,OAAO;EAAE,OAVKD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,MAAM,CAUzC;EAAG,QATDD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,OAAO,CASnC;EAAG,UARPD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,SAAS,CAQ7B;EAAG,aAPdD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,YAAY,CAOtB;EAAG,UAN9BD,gBAAAA,YACfC,wBAAAA,cACC,MAAM,EAAE,SAAS,IACjB,GAAG,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,KAGC;EAAG,OAD3CD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,aAAa,CACA;CAAE;AACjE"}
+{"version":3,"file":"search.cjs","names":["usePage","useSelector","SearchToken","shallowArray","useCapability"],"sources":["../src/search.tsx"],"sourcesContent":["/**\n * The React surface for @embedpdf/plugin-search.\n *\n * <SearchLayer> is a dumb renderer, the SelectionLayer's twin: it reads\n * the page's content-space hit rects from the capability and paints them\n * through PageContext.toPixels. The active hit gets its own colour.\n * No pointer handling, no engine calls — search is driven from app chrome\n * via useSearch().\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-search';\nimport * as React from 'react';\nimport { SearchToken } from '@embedpdf/plugin-search';\nimport type { SearchHit } from '@embedpdf/plugin-search';\nimport { shallowArray, useCapability, usePage, useSelector } from './runtime';\n\nexport interface SearchLayerProps {\n  /** Highlight colour for hits — SOLID (default: highlighter yellow). */\n  color?: string;\n  /** Highlight colour for the ACTIVE hit — SOLID (default: orange). */\n  activeColor?: string;\n  /**\n   * How the highlight composites with the page. `'multiply'` (default) is\n   * the real-highlighter look: text stays crisp black through the colour,\n   * only the paper tints. Pass `'normal'` (with translucent colours) for\n   * dark/scanned documents where multiply-on-dark would vanish.\n   */\n  blendMode?: React.CSSProperties['mixBlendMode'];\n}\n\nexport function SearchLayer({\n  color = '#ffd500',\n  activeColor = '#ff9632',\n  blendMode = 'multiply',\n}: SearchLayerProps) {\n  const page = usePage();\n  const hits = useSelector(SearchToken, (c) => c.hitsForPage(page.pon), shallowArray);\n  const active = useSelector(SearchToken, (c) => c.activeHit());\n\n  if (hits.length === 0) return null;\n\n  return (\n    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n      {hits.map((hit: SearchHit) =>\n        hit.segments.map(({ quad: q }, i) => {\n          const fill = hit === active ? activeColor : color;\n          // Upright hits keep the classic rounded div (pixel-identical to the\n          // pre-orientation layer); rotated hits draw their true oriented cell.\n          const upright =\n            q.upperStart.y === q.upperEnd.y &&\n            q.lowerStart.y === q.lowerEnd.y &&\n            q.upperStart.x === q.lowerStart.x;\n          if (upright) {\n            const tl = page.transform.toPixels(q.upperStart);\n            const br = page.transform.toPixels(q.lowerEnd);\n            return (\n              <div\n                key={`${hit.charStart}:${i}`}\n                style={{\n                  position: 'absolute',\n                  left: tl.x,\n                  top: tl.y,\n                  width: br.x - tl.x,\n                  height: br.y - tl.y,\n                  background: fill,\n                  mixBlendMode: blendMode,\n                  borderRadius: 2,\n                }}\n              />\n            );\n          }\n          const ring = [q.upperStart, q.upperEnd, q.lowerEnd, q.lowerStart].map((p) =>\n            page.transform.toPixels(p),\n          );\n          return (\n            <svg\n              key={`${hit.charStart}:${i}`}\n              style={{\n                position: 'absolute',\n                inset: 0,\n                width: '100%',\n                height: '100%',\n                overflow: 'visible',\n                mixBlendMode: blendMode,\n              }}\n            >\n              <polygon points={ring.map((p) => `${p.x},${p.y}`).join(' ')} fill={fill} />\n            </svg>\n          );\n        }),\n      )}\n    </div>\n  );\n}\n\n/** The search capability (search/clear/next/prev/…) for app chrome. */\nexport function useSearch() {\n  return useCapability(SearchToken);\n}\n\n/** Reactive search read-model for chrome: the query, status, counts, progress. */\nexport function useSearchState() {\n  const query = useSelector(SearchToken, (c) => c.query());\n  const status = useSelector(SearchToken, (c) => c.status());\n  const hitCount = useSelector(SearchToken, (c) => c.hitCount());\n  const activeIndex = useSelector(SearchToken, (c) => c.activeIndex());\n  const progress = useSelector(\n    SearchToken,\n    (c) => c.progress(),\n    (a, b) => a.scanned === b.scanned && a.total === b.total,\n  );\n  const error = useSelector(SearchToken, (c) => c.errorMessage());\n  return { query, status, hitCount, activeIndex, progress, error };\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgB,YAAY,EAC1B,QAAQ,WACR,cAAc,WACd,YAAY,cACO;CACnB,MAAM,OAAOA,gBAAAA,QAAQ;CACrB,MAAM,OAAOC,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,YAAY,KAAK,GAAG,GAAGC,gBAAAA,YAAY;CAClF,MAAM,SAASF,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,UAAU,CAAC;CAE5D,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,OAAO;GAAE,UAAU;GAAY,OAAO;GAAG,eAAe;EAAO;EACjE,UAAA,KAAK,KAAK,QACT,IAAI,SAAS,KAAK,EAAE,MAAM,KAAK,MAAM;GACnC,MAAM,OAAO,QAAQ,SAAS,cAAc;GAO5C,IAHE,EAAE,WAAW,MAAM,EAAE,SAAS,KAC9B,EAAE,WAAW,MAAM,EAAE,SAAS,KAC9B,EAAE,WAAW,MAAM,EAAE,WAAW,GACrB;IACX,MAAM,KAAK,KAAK,UAAU,SAAS,EAAE,UAAU;IAC/C,MAAM,KAAK,KAAK,UAAU,SAAS,EAAE,QAAQ;IAC7C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAEE,OAAO;KACL,UAAU;KACV,MAAM,GAAG;KACT,KAAK,GAAG;KACR,OAAO,GAAG,IAAI,GAAG;KACjB,QAAQ,GAAG,IAAI,GAAG;KAClB,YAAY;KACZ,cAAc;KACd,cAAc;IAChB,EACD,GAXM,GAAG,IAAI,UAAU,GAAG,GAW1B;GAEL;GACA,MAAM,OAAO;IAAC,EAAE;IAAY,EAAE;IAAU,EAAE;IAAU,EAAE;GAAU,CAAC,CAAC,KAAK,MACrE,KAAK,UAAU,SAAS,CAAC,CAC3B;GACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAEE,OAAO;KACL,UAAU;KACV,OAAO;KACP,OAAO;KACP,QAAQ;KACR,UAAU;KACV,cAAc;IAChB;IAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;KAAS,QAAQ,KAAK,KAAK,MAAM,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG;KAAS;IAAO,CAAA;GACvE,GAXE,GAAG,IAAI,UAAU,GAAG,GAWtB;EAET,CAAC,CACH;CACG,CAAA;AAET;;AAGA,SAAgB,YAAY;CAC1B,OAAOE,gBAAAA,cAAcF,wBAAAA,WAAW;AAClC;;AAGA,SAAgB,iBAAiB;CAW/B,OAAO;EAAE,OAVKD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,MAAM,CAUzC;EAAG,QATDD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,OAAO,CASnC;EAAG,UARPD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,SAAS,CAQ7B;EAAG,aAPdD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,YAAY,CAOtB;EAAG,UAN9BD,gBAAAA,YACfC,wBAAAA,cACC,MAAM,EAAE,SAAS,IACjB,GAAG,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,KAGC;EAAG,OAD3CD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,aAAa,CACA;CAAE;AACjE"}

package/dist/search.d.cts

@@ -1,4 +1,4 @@
-import { r as SearchQuery } from "./AnnotationListSnapshot-W0RCsyDE-dWna4TTJ.cjs";
+import { n as SearchQuery } from "./AnnotationListSnapshot-C1U3XUxP-6kGwNoxy.cjs";
 import * as React from "react";
 export * from "@embedpdf/plugin-search";
 //#region src/search.d.ts

package/dist/search.d.ts

@@ -1,4 +1,4 @@
-import { r as SearchQuery } from "./AnnotationListSnapshot-W0RCsyDE-dWna4TTJ.js";
+import { n as SearchQuery } from "./AnnotationListSnapshot-C1U3XUxP-6kGwNoxy.js";
 import * as React from "react";
 export * from "@embedpdf/plugin-search";
 //#region src/search.d.ts

package/dist/search.js

@@ -15,25 +15,42 @@ function SearchLayer({ color = "#ffd500", activeColor = "#ff9632", blendMode = "
 			inset: 0,
 			pointerEvents: "none"
 		},
-		children: hits.map((hit) => hit.rects.map((r, i) => {
-			const tl = page.transform.pageToContent({
-				x: r.x,
-				y: r.y
-			});
-			const br = page.transform.pageToContent({
-				x: r.x + r.width,
-				y: r.y + r.height
-			});
-			return /* @__PURE__ */ jsx("div", { style: {
-				position: "absolute",
-				left: tl.x,
-				top: tl.y,
-				width: br.x - tl.x,
-				height: br.y - tl.y,
-				background: hit === active ? activeColor : color,
-				mixBlendMode: blendMode,
-				borderRadius: 2
-			} }, `${hit.charStart}:${i}`);
+		children: hits.map((hit) => hit.segments.map(({ quad: q }, i) => {
+			const fill = hit === active ? activeColor : color;
+			if (q.upperStart.y === q.upperEnd.y && q.lowerStart.y === q.lowerEnd.y && q.upperStart.x === q.lowerStart.x) {
+				const tl = page.transform.toPixels(q.upperStart);
+				const br = page.transform.toPixels(q.lowerEnd);
+				return /* @__PURE__ */ jsx("div", { style: {
+					position: "absolute",
+					left: tl.x,
+					top: tl.y,
+					width: br.x - tl.x,
+					height: br.y - tl.y,
+					background: fill,
+					mixBlendMode: blendMode,
+					borderRadius: 2
+				} }, `${hit.charStart}:${i}`);
+			}
+			const ring = [
+				q.upperStart,
+				q.upperEnd,
+				q.lowerEnd,
+				q.lowerStart
+			].map((p) => page.transform.toPixels(p));
+			return /* @__PURE__ */ jsx("svg", {
+				style: {
+					position: "absolute",
+					inset: 0,
+					width: "100%",
+					height: "100%",
+					overflow: "visible",
+					mixBlendMode: blendMode
+				},
+				children: /* @__PURE__ */ jsx("polygon", {
+					points: ring.map((p) => `${p.x},${p.y}`).join(" "),
+					fill
+				})
+			}, `${hit.charStart}:${i}`);
 		}))
 	});
 }

package/dist/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","names":[],"sources":["../src/search.tsx"],"sourcesContent":["/**\n * The React surface for @embedpdf/plugin-search.\n *\n * <SearchLayer> is a dumb renderer, the SelectionLayer's twin: it reads\n * the page's content-space hit rects from the capability and paints them\n * through PageContext.pageToContent. The active hit gets its own colour.\n * No pointer handling, no engine calls — search is driven from app chrome\n * via useSearch().\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-search';\nimport * as React from 'react';\nimport { SearchToken } from '@embedpdf/plugin-search';\nimport type { SearchHit } from '@embedpdf/plugin-search';\nimport { shallowArray, useCapability, usePage, useSelector } from './runtime';\n\nexport interface SearchLayerProps {\n  /** Highlight colour for hits — SOLID (default: highlighter yellow). */\n  color?: string;\n  /** Highlight colour for the ACTIVE hit — SOLID (default: orange). */\n  activeColor?: string;\n  /**\n   * How the highlight composites with the page. `'multiply'` (default) is\n   * the real-highlighter look: text stays crisp black through the colour,\n   * only the paper tints. Pass `'normal'` (with translucent colours) for\n   * dark/scanned documents where multiply-on-dark would vanish.\n   */\n  blendMode?: React.CSSProperties['mixBlendMode'];\n}\n\nexport function SearchLayer({\n  color = '#ffd500',\n  activeColor = '#ff9632',\n  blendMode = 'multiply',\n}: SearchLayerProps) {\n  const page = usePage();\n  const hits = useSelector(SearchToken, (c) => c.hitsForPage(page.pon), shallowArray);\n  const active = useSelector(SearchToken, (c) => c.activeHit());\n\n  if (hits.length === 0) return null;\n\n  return (\n    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n      {hits.map((hit: SearchHit) =>\n        hit.rects.map((r, i) => {\n          const tl = page.transform.pageToContent({ x: r.x, y: r.y });\n          const br = page.transform.pageToContent({ x: r.x + r.width, y: r.y + r.height });\n          return (\n            <div\n              key={`${hit.charStart}:${i}`}\n              style={{\n                position: 'absolute',\n                left: tl.x,\n                top: tl.y,\n                width: br.x - tl.x,\n                height: br.y - tl.y,\n                background: hit === active ? activeColor : color,\n                mixBlendMode: blendMode,\n                borderRadius: 2,\n              }}\n            />\n          );\n        }),\n      )}\n    </div>\n  );\n}\n\n/** The search capability (search/clear/next/prev/…) for app chrome. */\nexport function useSearch() {\n  return useCapability(SearchToken);\n}\n\n/** Reactive search read-model for chrome: the query, status, counts, progress. */\nexport function useSearchState() {\n  const query = useSelector(SearchToken, (c) => c.query());\n  const status = useSelector(SearchToken, (c) => c.status());\n  const hitCount = useSelector(SearchToken, (c) => c.hitCount());\n  const activeIndex = useSelector(SearchToken, (c) => c.activeIndex());\n  const progress = useSelector(\n    SearchToken,\n    (c) => c.progress(),\n    (a, b) => a.scanned === b.scanned && a.total === b.total,\n  );\n  const error = useSelector(SearchToken, (c) => c.errorMessage());\n  return { query, status, hitCount, activeIndex, progress, error };\n}\n"],"mappings":";;;;;;AA+BA,SAAgB,YAAY,EAC1B,QAAQ,WACR,cAAc,WACd,YAAY,cACO;CACnB,MAAM,OAAO,QAAQ;CACrB,MAAM,OAAO,YAAY,cAAc,MAAM,EAAE,YAAY,KAAK,GAAG,GAAG,YAAY;CAClF,MAAM,SAAS,YAAY,cAAc,MAAM,EAAE,UAAU,CAAC;CAE5D,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,OACE,oBAAC,OAAD;EAAK,OAAO;GAAE,UAAU;GAAY,OAAO;GAAG,eAAe;EAAO;EACjE,UAAA,KAAK,KAAK,QACT,IAAI,MAAM,KAAK,GAAG,MAAM;GACtB,MAAM,KAAK,KAAK,UAAU,cAAc;IAAE,GAAG,EAAE;IAAG,GAAG,EAAE;GAAE,CAAC;GAC1D,MAAM,KAAK,KAAK,UAAU,cAAc;IAAE,GAAG,EAAE,IAAI,EAAE;IAAO,GAAG,EAAE,IAAI,EAAE;GAAO,CAAC;GAC/E,OACE,oBAAC,OAAD,EAEE,OAAO;IACL,UAAU;IACV,MAAM,GAAG;IACT,KAAK,GAAG;IACR,OAAO,GAAG,IAAI,GAAG;IACjB,QAAQ,GAAG,IAAI,GAAG;IAClB,YAAY,QAAQ,SAAS,cAAc;IAC3C,cAAc;IACd,cAAc;GAChB,EACD,GAXM,GAAG,IAAI,UAAU,GAAG,GAW1B;EAEL,CAAC,CACH;CACG,CAAA;AAET;;AAGA,SAAgB,YAAY;CAC1B,OAAO,cAAc,WAAW;AAClC;;AAGA,SAAgB,iBAAiB;CAW/B,OAAO;EAAE,OAVK,YAAY,cAAc,MAAM,EAAE,MAAM,CAUzC;EAAG,QATD,YAAY,cAAc,MAAM,EAAE,OAAO,CASnC;EAAG,UARP,YAAY,cAAc,MAAM,EAAE,SAAS,CAQ7B;EAAG,aAPd,YAAY,cAAc,MAAM,EAAE,YAAY,CAOtB;EAAG,UAN9B,YACf,cACC,MAAM,EAAE,SAAS,IACjB,GAAG,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,KAGC;EAAG,OAD3C,YAAY,cAAc,MAAM,EAAE,aAAa,CACA;CAAE;AACjE"}
+{"version":3,"file":"search.js","names":[],"sources":["../src/search.tsx"],"sourcesContent":["/**\n * The React surface for @embedpdf/plugin-search.\n *\n * <SearchLayer> is a dumb renderer, the SelectionLayer's twin: it reads\n * the page's content-space hit rects from the capability and paints them\n * through PageContext.toPixels. The active hit gets its own colour.\n * No pointer handling, no engine calls — search is driven from app chrome\n * via useSearch().\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-search';\nimport * as React from 'react';\nimport { SearchToken } from '@embedpdf/plugin-search';\nimport type { SearchHit } from '@embedpdf/plugin-search';\nimport { shallowArray, useCapability, usePage, useSelector } from './runtime';\n\nexport interface SearchLayerProps {\n  /** Highlight colour for hits — SOLID (default: highlighter yellow). */\n  color?: string;\n  /** Highlight colour for the ACTIVE hit — SOLID (default: orange). */\n  activeColor?: string;\n  /**\n   * How the highlight composites with the page. `'multiply'` (default) is\n   * the real-highlighter look: text stays crisp black through the colour,\n   * only the paper tints. Pass `'normal'` (with translucent colours) for\n   * dark/scanned documents where multiply-on-dark would vanish.\n   */\n  blendMode?: React.CSSProperties['mixBlendMode'];\n}\n\nexport function SearchLayer({\n  color = '#ffd500',\n  activeColor = '#ff9632',\n  blendMode = 'multiply',\n}: SearchLayerProps) {\n  const page = usePage();\n  const hits = useSelector(SearchToken, (c) => c.hitsForPage(page.pon), shallowArray);\n  const active = useSelector(SearchToken, (c) => c.activeHit());\n\n  if (hits.length === 0) return null;\n\n  return (\n    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n      {hits.map((hit: SearchHit) =>\n        hit.segments.map(({ quad: q }, i) => {\n          const fill = hit === active ? activeColor : color;\n          // Upright hits keep the classic rounded div (pixel-identical to the\n          // pre-orientation layer); rotated hits draw their true oriented cell.\n          const upright =\n            q.upperStart.y === q.upperEnd.y &&\n            q.lowerStart.y === q.lowerEnd.y &&\n            q.upperStart.x === q.lowerStart.x;\n          if (upright) {\n            const tl = page.transform.toPixels(q.upperStart);\n            const br = page.transform.toPixels(q.lowerEnd);\n            return (\n              <div\n                key={`${hit.charStart}:${i}`}\n                style={{\n                  position: 'absolute',\n                  left: tl.x,\n                  top: tl.y,\n                  width: br.x - tl.x,\n                  height: br.y - tl.y,\n                  background: fill,\n                  mixBlendMode: blendMode,\n                  borderRadius: 2,\n                }}\n              />\n            );\n          }\n          const ring = [q.upperStart, q.upperEnd, q.lowerEnd, q.lowerStart].map((p) =>\n            page.transform.toPixels(p),\n          );\n          return (\n            <svg\n              key={`${hit.charStart}:${i}`}\n              style={{\n                position: 'absolute',\n                inset: 0,\n                width: '100%',\n                height: '100%',\n                overflow: 'visible',\n                mixBlendMode: blendMode,\n              }}\n            >\n              <polygon points={ring.map((p) => `${p.x},${p.y}`).join(' ')} fill={fill} />\n            </svg>\n          );\n        }),\n      )}\n    </div>\n  );\n}\n\n/** The search capability (search/clear/next/prev/…) for app chrome. */\nexport function useSearch() {\n  return useCapability(SearchToken);\n}\n\n/** Reactive search read-model for chrome: the query, status, counts, progress. */\nexport function useSearchState() {\n  const query = useSelector(SearchToken, (c) => c.query());\n  const status = useSelector(SearchToken, (c) => c.status());\n  const hitCount = useSelector(SearchToken, (c) => c.hitCount());\n  const activeIndex = useSelector(SearchToken, (c) => c.activeIndex());\n  const progress = useSelector(\n    SearchToken,\n    (c) => c.progress(),\n    (a, b) => a.scanned === b.scanned && a.total === b.total,\n  );\n  const error = useSelector(SearchToken, (c) => c.errorMessage());\n  return { query, status, hitCount, activeIndex, progress, error };\n}\n"],"mappings":";;;;;;AA+BA,SAAgB,YAAY,EAC1B,QAAQ,WACR,cAAc,WACd,YAAY,cACO;CACnB,MAAM,OAAO,QAAQ;CACrB,MAAM,OAAO,YAAY,cAAc,MAAM,EAAE,YAAY,KAAK,GAAG,GAAG,YAAY;CAClF,MAAM,SAAS,YAAY,cAAc,MAAM,EAAE,UAAU,CAAC;CAE5D,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,OACE,oBAAC,OAAD;EAAK,OAAO;GAAE,UAAU;GAAY,OAAO;GAAG,eAAe;EAAO;EACjE,UAAA,KAAK,KAAK,QACT,IAAI,SAAS,KAAK,EAAE,MAAM,KAAK,MAAM;GACnC,MAAM,OAAO,QAAQ,SAAS,cAAc;GAO5C,IAHE,EAAE,WAAW,MAAM,EAAE,SAAS,KAC9B,EAAE,WAAW,MAAM,EAAE,SAAS,KAC9B,EAAE,WAAW,MAAM,EAAE,WAAW,GACrB;IACX,MAAM,KAAK,KAAK,UAAU,SAAS,EAAE,UAAU;IAC/C,MAAM,KAAK,KAAK,UAAU,SAAS,EAAE,QAAQ;IAC7C,OACE,oBAAC,OAAD,EAEE,OAAO;KACL,UAAU;KACV,MAAM,GAAG;KACT,KAAK,GAAG;KACR,OAAO,GAAG,IAAI,GAAG;KACjB,QAAQ,GAAG,IAAI,GAAG;KAClB,YAAY;KACZ,cAAc;KACd,cAAc;IAChB,EACD,GAXM,GAAG,IAAI,UAAU,GAAG,GAW1B;GAEL;GACA,MAAM,OAAO;IAAC,EAAE;IAAY,EAAE;IAAU,EAAE;IAAU,EAAE;GAAU,CAAC,CAAC,KAAK,MACrE,KAAK,UAAU,SAAS,CAAC,CAC3B;GACA,OACE,oBAAC,OAAD;IAEE,OAAO;KACL,UAAU;KACV,OAAO;KACP,OAAO;KACP,QAAQ;KACR,UAAU;KACV,cAAc;IAChB;IAEA,UAAA,oBAAC,WAAD;KAAS,QAAQ,KAAK,KAAK,MAAM,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG;KAAS;IAAO,CAAA;GACvE,GAXE,GAAG,IAAI,UAAU,GAAG,GAWtB;EAET,CAAC,CACH;CACG,CAAA;AAET;;AAGA,SAAgB,YAAY;CAC1B,OAAO,cAAc,WAAW;AAClC;;AAGA,SAAgB,iBAAiB;CAW/B,OAAO;EAAE,OAVK,YAAY,cAAc,MAAM,EAAE,MAAM,CAUzC;EAAG,QATD,YAAY,cAAc,MAAM,EAAE,OAAO,CASnC;EAAG,UARP,YAAY,cAAc,MAAM,EAAE,SAAS,CAQ7B;EAAG,aAPd,YAAY,cAAc,MAAM,EAAE,YAAY,CAOtB;EAAG,UAN9B,YACf,cACC,MAAM,EAAE,SAAS,IACjB,GAAG,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,KAGC;EAAG,OAD3C,YAAY,cAAc,MAAM,EAAE,aAAa,CACA;CAAE;AACjE"}