@embedpdf/viewer-react 3.0.0-next.13 → 3.0.0-next.15

package/dist/parts-BNOPi71I.js

@@ -0,0 +1,315 @@
+import { KernelProvider } from "@embedpdf/react/runtime";
+import { createContext, createElement, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useCommand } from "@embedpdf/react/commands";
+//#region src/hooks.ts
+/** The `viewer` the components inside a <PDFViewer> belong to. */
+const ViewerContext = createContext(null);
+/**
+* The `viewer`, in a component inside <PDFViewer>: `get(name)`, `documents`, `commands`,
+* `watch` and `forDocument`. Your components mount once the viewer is live, so it is always
+* there. Outside the viewer, keep the one `onReady` gives you; called there, this throws.
+*/
+function usePDFViewer() {
+	const viewer = useContext(ViewerContext);
+	if (!viewer) throw new Error("[embedpdf] usePDFViewer() works in a component inside <PDFViewer>. Outside the viewer, keep the viewer its onReady gives you.");
+	return viewer;
+}
+//#endregion
+//#region src/component.ts
+/**
+* <PDFViewer> — the React face of the <embedpdf-viewer> custom element, and
+* deliberately engine-blind: this module imports the viewer for types only, so
+* it holds no runtime edge to any engine. Which engine ships is decided by the
+* entry that re-exports it:
+*
+*   ./index.ts → `@embedpdf/viewer`      — local PDFium engine, registered as
+*                                          the default (the zero-config door)
+*   ./core.ts  → `@embedpdf/viewer/core` — no default engine; you inject one,
+*                                          and PDFium is structurally absent
+*
+* That side-effect import is the entire difference between the two doors, and
+* it lives only in those two files. A runtime import here would weld PDFium
+* into every consumer's bundle — cloud builds included — so an import-boundary
+* lint rule (see eslint.config.js) holds this module to `import type`.
+*
+* ```tsx
+* <PDFViewer src="/report.pdf" style={{ height: '100vh' }}>
+*   <ToolbarItem id="doc-picker"><DocPicker /></ToolbarItem>   // ← slot="item:doc-picker"
+* </PDFViewer>
+* ```
+*
+* The wrapper is deliberately thin: it renders the <embedpdf-viewer> custom
+* element, hands it the config before its deferred first mount, and passes
+* children straight through as light DOM — the browser projects a child with
+* `slot="item:<id>"` into the chrome's matching `custom()` socket while the child
+* stays in the host React tree, so its context, state, and page CSS all keep
+* working. There is no reactSlot()
+* bridge because none is needed: a slot is a child. The children mount once
+* the viewer is ready, inside its kernel, so the headless hooks of
+* `@embedpdf/react` in them read this viewer, and `usePDFViewer()` gives
+* them its `viewer`. When the viewer goes (an unmount, or a new one with a
+* new config) they unmount with it, and mount again inside the next one.
+*
+* On the server it renders the empty element, and the viewer starts in the
+* browser: nothing here, or in the viewer it imports, touches the DOM when
+* imported.
+*
+* `src`, `theme`, `locale`, `disable` and `readOnly` follow their props: the
+* element changes them in place. `onReady`, `onDocumentChange` and
+* `onPanelResize` call the latest prop. Every other prop is read once, when the viewer starts; a later
+* change is ignored (development warns), and a new `key` mounts a new viewer
+* with it.
+*/
+/** Layout effects in the browser; on the server, where effects never run, the plain kind. */
+const useBrowserLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+/** Where the viewer keeps its kernel (`createViewer` in `@embedpdf/viewer-chrome`). */
+const VIEWER_KERNEL = Symbol.for("@embedpdf/viewer/kernel");
+const kernelOf = (viewer) => viewer[VIEWER_KERNEL] ?? null;
+/** A key for each viewer, so the children mount again inside a new one. */
+const viewerKeys = /* @__PURE__ */ new WeakMap();
+let nextViewerKey = 0;
+const keyOf = (viewer) => {
+	let key = viewerKeys.get(viewer);
+	if (key === void 0) viewerKeys.set(viewer, key = nextViewerKey++);
+	return key;
+};
+/** The children inside the viewer: its kernel for the headless hooks, and the `viewer`. */
+function inViewer(viewer, children) {
+	const key = keyOf(viewer);
+	const inside = createElement(ViewerContext.Provider, {
+		key,
+		value: viewer
+	}, children);
+	const kernel = kernelOf(viewer);
+	return kernel ? createElement(KernelProvider, {
+		key,
+		kernel
+	}, inside) : inside;
+}
+/** The props the element follows while it runs; the wrapper hands their changes on. */
+const LIVE_PROPS = {
+	src: true,
+	theme: true,
+	locale: true,
+	disable: true,
+	readOnly: true
+};
+/** Every other prop is read once: a changed one is ignored, and development warns once. */
+const warnConfigChange = (initial, next) => {
+	const keys = /* @__PURE__ */ new Set([...Object.keys(initial), ...Object.keys(next)]);
+	for (const key of keys) {
+		if (key in LIVE_PROPS) continue;
+		if (!Object.is(initial[key], next[key])) {
+			console.warn(`[embedpdf] <PDFViewer>: \`${key}\` is read once, when the viewer starts, so the change is ignored. Pass a stable value (module scope, useState, useMemo), or give the viewer a new \`key\` to mount a new one with it.`);
+			return true;
+		}
+	}
+	return false;
+};
+function PDFViewer({ className, style, children, elementRef, onReady, onDocumentChange, onPanelResize, ...config }) {
+	const ref = useRef(null);
+	const [viewer, setViewer] = useState(null);
+	const configRef = useRef(config);
+	configRef.current = config;
+	const onReadyRef = useRef(onReady);
+	onReadyRef.current = onReady;
+	const onDocumentChangeRef = useRef(onDocumentChange);
+	onDocumentChangeRef.current = onDocumentChange;
+	const onPanelResizeRef = useRef(onPanelResize);
+	onPanelResizeRef.current = onPanelResize;
+	const callbacks = useRef({
+		onReady: (live) => onReadyRef.current?.(live),
+		onDocumentChange: (documentId) => onDocumentChangeRef.current?.(documentId),
+		onPanelResize: (event) => onPanelResizeRef.current?.(event)
+	});
+	const initialConfig = useRef(null);
+	const warned = useRef(false);
+	if (process.env.NODE_ENV !== "production") {
+		if (initialConfig.current === null) initialConfig.current = config;
+		else if (!warned.current) warned.current = warnConfigChange(initialConfig.current, config);
+	}
+	useBrowserLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const onEvent = () => setViewer(element.viewer);
+		element.addEventListener("epdf:ready", onEvent);
+		element.config = {
+			...configRef.current,
+			...callbacks.current
+		};
+		if (element.viewer) onEvent();
+		return () => element.removeEventListener("epdf:ready", onEvent);
+	}, []);
+	useBrowserLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		element.src = config.src;
+		element.theme = config.theme;
+		element.locale = config.locale;
+		element.disable = config.disable;
+		element.readOnly = config.readOnly;
+	});
+	return createElement("embedpdf-viewer", {
+		ref: (element) => {
+			ref.current = element;
+			if (typeof elementRef === "function") elementRef(element);
+			else if (elementRef) elementRef.current = element;
+		},
+		...className === void 0 ? {} : { class: className },
+		style,
+		"data-epdf-wrapped": ""
+	}, viewer ? inViewer(viewer, children) : null);
+}
+//#endregion
+//#region src/slots.ts
+/** The element around what you put in a place adds no box: your component lays out there. */
+const CONTENTS = { display: "contents" };
+const EDGES = [
+	"top",
+	"bottom",
+	"start",
+	"end",
+	"float",
+	"selection"
+];
+const SIZES = [
+	"compact",
+	"medium",
+	"expanded"
+];
+/** Before the viewer says where the item is: the main bar's place. */
+const AT_THE_TOP = {
+	orientation: "horizontal",
+	edge: "top",
+	variant: null,
+	size: "expanded"
+};
+const ATTRIBUTES = [
+	"data-orientation",
+	"data-edge",
+	"data-variant",
+	"data-size"
+];
+/** Where the item whose element is `element` sits, as the viewer wrote it there. */
+function toolbarItemContextOf(element) {
+	const edge = element.getAttribute("data-edge");
+	const size = element.getAttribute("data-size");
+	return {
+		orientation: element.getAttribute("data-orientation") === "vertical" ? "vertical" : "horizontal",
+		edge: edge && EDGES.includes(edge) ? edge : AT_THE_TOP.edge,
+		variant: element.getAttribute("data-variant"),
+		size: size && SIZES.includes(size) ? size : AT_THE_TOP.size
+	};
+}
+const sameContext = (left, right) => left.orientation === right.orientation && left.edge === right.edge && left.variant === right.variant && left.size === right.size;
+const ToolbarItemCtx = createContext(null);
+/** What the viewer says on the element `element` holds, as a store: the same object until it changes. */
+function contextStoreOf(element) {
+	let current = AT_THE_TOP;
+	return {
+		subscribe(onChange) {
+			const target = element.current;
+			if (!target) return () => {};
+			const observer = new MutationObserver(onChange);
+			observer.observe(target, {
+				attributes: true,
+				attributeFilter: ATTRIBUTES
+			});
+			return () => observer.disconnect();
+		},
+		read() {
+			const target = element.current;
+			const next = target ? toolbarItemContextOf(target) : current;
+			if (!sameContext(current, next)) current = next;
+			return current;
+		}
+	};
+}
+const atTheTop = () => AT_THE_TOP;
+/** Your component in the toolbar, where the layout's `{ custom: id }` makes room for it. */
+function ToolbarItem({ id, children }) {
+	const element = useRef(null);
+	const [store] = useState(() => contextStoreOf(element));
+	const context = useSyncExternalStore(store.subscribe, store.read, atTheTop);
+	return createElement(ToolbarItemCtx.Provider, { value: context }, createElement("div", {
+		ref: element,
+		slot: `item:${id}`,
+		style: CONTENTS
+	}, children));
+}
+/**
+* Where the toolbar item this component is in sits: which way its bar runs (`orientation`), the
+* bar's place (`edge`), which of the item's `variants` the toolbar picked (`variant`), and the
+* viewer's size (`size`). Works inside a `ToolbarItem`.
+*/
+function useToolbarItem() {
+	const context = useContext(ToolbarItemCtx);
+	if (!context) throw new Error("[embedpdf] useToolbarItem() works inside a <ToolbarItem>: it says where that item sits.");
+	return context;
+}
+/** What goes inside a panel: the viewer draws its frame, header and the way it opens. */
+function Panel({ id, children }) {
+	return createElement("div", {
+		slot: `panel:${id}`,
+		style: CONTENTS
+	}, children);
+}
+/** Your component in one of the viewer's regions. */
+function Region({ name, children }) {
+	return createElement("div", {
+		slot: name,
+		style: CONTENTS
+	}, children);
+}
+//#endregion
+//#region src/viewer-components.ts
+/**
+* The viewer's own components, for yours: `Button`, `Menu` and `MenuItem`
+* render the viewer's `<epdf-button>`, `<epdf-menu>` and `<epdf-menu-item>`
+* elements, which the viewer draws like its own toolbar buttons and menus.
+* Use them inside the viewer: in a `ToolbarItem`, a `Panel` or a `Region`.
+* The elements come with the viewer, so this module imports nothing from it.
+*/
+/** A toolbar button, the viewer's own. */
+function Button({ command, icon, label, onClick, className, style }) {
+	return createElement("epdf-button", {
+		command,
+		icon,
+		label,
+		onClick,
+		style,
+		...className === void 0 ? {} : { class: className }
+	});
+}
+/**
+* A button that opens a menu of `MenuItem`s, the way the viewer's menus open: away from its bar,
+* flipped when there's no room, and up from the bottom on a phone.
+*/
+function Menu({ icon, label, children }) {
+	return createElement("epdf-menu", {
+		icon,
+		label
+	}, children);
+}
+/** A row in a `Menu`. */
+function MenuItem({ command, icon, onSelect, children }) {
+	const element = useRef(null);
+	const select = useRef(onSelect);
+	select.current = onSelect;
+	useEffect(() => {
+		const target = element.current;
+		if (!target) return;
+		const onPicked = () => select.current?.();
+		target.addEventListener("select", onPicked);
+		return () => target.removeEventListener("select", onPicked);
+	}, []);
+	return createElement("epdf-menu-item", {
+		ref: element,
+		command,
+		icon
+	}, children);
+}
+//#endregion
+export { Region as a, PDFViewer as c, Panel as i, useCommand as l, Menu as n, ToolbarItem as o, MenuItem as r, useToolbarItem as s, Button as t, usePDFViewer as u };
+
+//# sourceMappingURL=parts-BNOPi71I.js.map

package/dist/parts-BNOPi71I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts-BNOPi71I.js","names":[],"sources":["../src/hooks.ts","../src/component.ts","../src/slots.ts","../src/viewer-components.ts"],"sourcesContent":["'use client';\n/**\n * The hooks for components inside <PDFViewer>: the `viewer`, and a command as a button needs it.\n * They work in the components you give the viewer, which mount once it's live, inside it. The\n * headless hooks of `@embedpdf/react` work there too, for any plugin's API and state.\n */\n// Types only, so this module holds no runtime edge to any engine (see ./component).\nimport type { Viewer } from '@embedpdf/viewer/core';\nimport { createContext, useContext } from 'react';\n\n/**\n * A command as a button needs it, for the active document: its `label`, `icon` and `shortcut`,\n * whether it's `enabled`, `active` and `visible`, and `run()`. The headless hook, which reads the\n * kernel <PDFViewer> gives its children: an id the viewer doesn't have is neither visible nor\n * enabled.\n */\nexport { useCommand } from '@embedpdf/react/commands';\n\n/** The `viewer` the components inside a <PDFViewer> belong to. */\nexport const ViewerContext = createContext<Viewer | null>(null);\n\n/**\n * The `viewer`, in a component inside <PDFViewer>: `get(name)`, `documents`, `commands`,\n * `watch` and `forDocument`. Your components mount once the viewer is live, so it is always\n * there. Outside the viewer, keep the one `onReady` gives you; called there, this throws.\n */\nexport function usePDFViewer(): Viewer {\n  const viewer = useContext(ViewerContext);\n  if (!viewer) {\n    throw new Error(\n      '[embedpdf] usePDFViewer() works in a component inside <PDFViewer>. Outside the viewer, ' +\n        'keep the viewer its onReady gives you.',\n    );\n  }\n  return viewer;\n}\n","'use client';\n/**\n * <PDFViewer> — the React face of the <embedpdf-viewer> custom element, and\n * deliberately engine-blind: this module imports the viewer for types only, so\n * it holds no runtime edge to any engine. Which engine ships is decided by the\n * entry that re-exports it:\n *\n *   ./index.ts → `@embedpdf/viewer`      — local PDFium engine, registered as\n *                                          the default (the zero-config door)\n *   ./core.ts  → `@embedpdf/viewer/core` — no default engine; you inject one,\n *                                          and PDFium is structurally absent\n *\n * That side-effect import is the entire difference between the two doors, and\n * it lives only in those two files. A runtime import here would weld PDFium\n * into every consumer's bundle — cloud builds included — so an import-boundary\n * lint rule (see eslint.config.js) holds this module to `import type`.\n *\n * ```tsx\n * <PDFViewer src=\"/report.pdf\" style={{ height: '100vh' }}>\n *   <ToolbarItem id=\"doc-picker\"><DocPicker /></ToolbarItem>   // ← slot=\"item:doc-picker\"\n * </PDFViewer>\n * ```\n *\n * The wrapper is deliberately thin: it renders the <embedpdf-viewer> custom\n * element, hands it the config before its deferred first mount, and passes\n * children straight through as light DOM — the browser projects a child with\n * `slot=\"item:<id>\"` into the chrome's matching `custom()` socket while the child\n * stays in the host React tree, so its context, state, and page CSS all keep\n * working. There is no reactSlot()\n * bridge because none is needed: a slot is a child. The children mount once\n * the viewer is ready, inside its kernel, so the headless hooks of\n * `@embedpdf/react` in them read this viewer, and `usePDFViewer()` gives\n * them its `viewer`. When the viewer goes (an unmount, or a new one with a\n * new config) they unmount with it, and mount again inside the next one.\n *\n * On the server it renders the empty element, and the viewer starts in the\n * browser: nothing here, or in the viewer it imports, touches the DOM when\n * imported.\n *\n * `src`, `theme`, `locale`, `disable` and `readOnly` follow their props: the\n * element changes them in place. `onReady`, `onDocumentChange` and\n * `onPanelResize` call the latest prop. Every other prop is read once, when the viewer starts; a later\n * change is ignored (development warns), and a new `key` mounts a new viewer\n * with it.\n */\n// The headless runtime carries no engine: it gives the children the viewer's kernel.\nimport { KernelProvider, type Kernel } from '@embedpdf/react/runtime';\n// `ElementConfig` is the kernel's config — the widest of all, with the engine\n// seam left `unknown` — so the shared implementation sits above every door and\n// each entry re-types it narrower by plain assignment (parameter types are\n// contravariant, so this direction needs no cast). Every import from the\n// viewer is type-only, which is what keeps this module engine-blind.\nimport type {\n  ElementConfig,\n  EmbedPdfViewerElement,\n  LiveConfigKey,\n  Viewer,\n} from '@embedpdf/viewer/core';\nimport {\n  createElement,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type MutableRefObject,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { ViewerContext } from './hooks';\n\n/** The framework-side props — everything that is not viewer config. */\nexport interface PDFViewerExtras {\n  className?: string;\n  style?: CSSProperties;\n  /** Light-DOM children, shown where their slot says: `<ToolbarItem>`, `<Panel>`, `<Region>`. */\n  children?: ReactNode;\n  /** The underlying element, if you need the imperative surface. */\n  elementRef?: Ref<EmbedPdfViewerElement>;\n}\n\n/** Layout effects in the browser; on the server, where effects never run, the plain kind. */\nconst useBrowserLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;\n\n/** Where the viewer keeps its kernel (`createViewer` in `@embedpdf/viewer-chrome`). */\nconst VIEWER_KERNEL = Symbol.for('@embedpdf/viewer/kernel');\nconst kernelOf = (viewer: Viewer): Kernel | null =>\n  (viewer as unknown as Partial<Record<symbol, Kernel>>)[VIEWER_KERNEL] ?? null;\n\n/** A key for each viewer, so the children mount again inside a new one. */\nconst viewerKeys = new WeakMap<Viewer, number>();\nlet nextViewerKey = 0;\nconst keyOf = (viewer: Viewer): number => {\n  let key = viewerKeys.get(viewer);\n  if (key === undefined) viewerKeys.set(viewer, (key = nextViewerKey++));\n  return key;\n};\n\n/** The children inside the viewer: its kernel for the headless hooks, and the `viewer`. */\nfunction inViewer(viewer: Viewer, children: ReactNode): ReactNode {\n  const key = keyOf(viewer);\n  const inside = createElement(ViewerContext.Provider, { key, value: viewer }, children);\n  const kernel = kernelOf(viewer);\n  return kernel ? createElement(KernelProvider, { key, kernel }, inside) : inside;\n}\n\n/** The props the element follows while it runs; the wrapper hands their changes on. */\nconst LIVE_PROPS: Readonly<Record<LiveConfigKey, true>> = {\n  src: true,\n  theme: true,\n  locale: true,\n  disable: true,\n  readOnly: true,\n};\n\n/** Every other prop is read once: a changed one is ignored, and development warns once. */\nconst warnConfigChange = (initial: ElementConfig, next: ElementConfig): boolean => {\n  const keys = new Set([...Object.keys(initial), ...Object.keys(next)]);\n  for (const key of keys) {\n    if (key in LIVE_PROPS) continue;\n    if (\n      !Object.is((initial as Record<string, unknown>)[key], (next as Record<string, unknown>)[key])\n    ) {\n      console.warn(\n        `[embedpdf] <PDFViewer>: \\`${key}\\` is read once, when the viewer starts, so the change is ` +\n          'ignored. Pass a stable value (module scope, useState, useMemo), or give the viewer a new ' +\n          '`key` to mount a new one with it.',\n      );\n      return true;\n    }\n  }\n  return false;\n};\n\n/**\n * Props for the shared implementation. Each entry re-exports <PDFViewer>\n * narrowed to its door's config — see `PDFViewerProps` in ./index.ts (engine\n * optional) and ./core.ts (engine required).\n */\nexport type PDFViewerImplProps = ElementConfig & PDFViewerExtras;\n\nexport function PDFViewer({\n  className,\n  style,\n  children,\n  elementRef,\n  onReady,\n  onDocumentChange,\n  onPanelResize,\n  ...config\n}: PDFViewerImplProps) {\n  const ref = useRef<EmbedPdfViewerElement | null>(null);\n  // The viewer once it's ready: the children render inside its kernel, so the headless hooks in\n  // them read this viewer. Before that the viewer has no sockets to show them in.\n  const [viewer, setViewer] = useState<Viewer | null>(null);\n  const configRef = useRef(config);\n  configRef.current = config;\n  const onReadyRef = useRef(onReady);\n  onReadyRef.current = onReady;\n  const onDocumentChangeRef = useRef(onDocumentChange);\n  onDocumentChangeRef.current = onDocumentChange;\n  const onPanelResizeRef = useRef(onPanelResize);\n  onPanelResizeRef.current = onPanelResize;\n  // The callbacks reach the element once, as functions that call the latest prop: an inline\n  // callback is a new function every render, and that changes nothing.\n  const callbacks = useRef<Pick<ElementConfig, 'onReady' | 'onDocumentChange' | 'onPanelResize'>>({\n    onReady: (live) => onReadyRef.current?.(live),\n    onDocumentChange: (documentId) => onDocumentChangeRef.current?.(documentId),\n    onPanelResize: (event) => onPanelResizeRef.current?.(event),\n  });\n  // Read once, like <Viewer engine/plugins>: the element boots once with the\n  // first config. A later change to anything but the live props cannot mean\n  // \"rebuild\" without dropping every open document, so it is ignored — loudly,\n  // in development.\n  const initialConfig = useRef<ElementConfig | null>(null);\n  const warned = useRef(false);\n  if (process.env.NODE_ENV !== 'production') {\n    if (initialConfig.current === null) initialConfig.current = config;\n    else if (!warned.current) warned.current = warnConfigChange(initialConfig.current, config);\n  }\n\n  // Layout effects run in the insertion task, before the element's deferred\n  // (microtask) declarative mount — so the viewer boots exactly once, with\n  // this config, and the ready listener is in place before it can fire.\n  // Empty deps: config is init-only by contract.\n  useBrowserLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    // Each mount of the element brings a new viewer: a config change that isn't live, or the\n    // element taken out and put back.\n    const onEvent = () => setViewer(element.viewer);\n    element.addEventListener('epdf:ready', onEvent);\n    element.config = { ...configRef.current, ...callbacks.current };\n    // A remount-with-key that reuses a live element cannot miss the event.\n    if (element.viewer) onEvent();\n    return () => element.removeEventListener('epdf:ready', onEvent);\n  }, []);\n\n  // The live props, after every render: the element compares them by value, so an unchanged\n  // one (an inline `disable={['forms']}` too) changes nothing.\n  useBrowserLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    element.src = config.src;\n    element.theme = config.theme;\n    element.locale = config.locale;\n    element.disable = config.disable;\n    element.readOnly = config.readOnly;\n  });\n\n  return createElement(\n    'embedpdf-viewer',\n    {\n      ref: (element: EmbedPdfViewerElement | null) => {\n        ref.current = element;\n        if (typeof elementRef === 'function') elementRef(element);\n        else if (elementRef)\n          (elementRef as MutableRefObject<EmbedPdfViewerElement | null>).current = element;\n      },\n      // A custom element's class is its `class` attribute: React 18 writes `className` on one\n      // as an attribute of that name, in the browser and on the server.\n      ...(className === undefined ? {} : { class: className }),\n      style,\n      // The element waits for the config this sets, also over the server's HTML before hydration.\n      'data-epdf-wrapped': '',\n    },\n    viewer ? inViewer(viewer, children) : null,\n  );\n}\n","/**\n * Your own components in the viewer: `ToolbarItem`, `Panel` and `Region` put\n * your component in the place the viewer makes for it (`item:<id>`,\n * `panel:<id>`, or a region's name). It renders as a child of the\n * `<embedpdf-viewer>` element, so it stays in your React tree, with your\n * context, your state and your CSS; the browser shows it in that place.\n *\n * `useToolbarItem()` tells a component inside a `ToolbarItem` where it sits.\n * The viewer keeps that on the item's element as `data-orientation`,\n * `data-edge`, `data-variant` and `data-size`; `ToolbarItem` reads them, live,\n * into a context for the hook, and redraws before the browser lays the bar out\n * (an external store's change renders at once), so the toolbar measures your\n * component in the variant it picked. Types only from the viewer, as in\n * `./component`: this module is shared by both doors.\n */\nimport type { ToolbarItemContext, ToolbarItemEdge, ViewerSize } from '@embedpdf/viewer/core';\nimport {\n  createContext,\n  createElement,\n  useContext,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ReactNode,\n  type RefObject,\n} from 'react';\n\n/** The element around what you put in a place adds no box: your component lays out there. */\nconst CONTENTS = { display: 'contents' } as const;\n\n// ── a toolbar item ───────────────────────────────────────────────────────────\n\nconst EDGES: readonly ToolbarItemEdge[] = ['top', 'bottom', 'start', 'end', 'float', 'selection'];\nconst SIZES: readonly ViewerSize[] = ['compact', 'medium', 'expanded'];\n\n/** Before the viewer says where the item is: the main bar's place. */\nconst AT_THE_TOP: ToolbarItemContext = {\n  orientation: 'horizontal',\n  edge: 'top',\n  variant: null,\n  size: 'expanded',\n};\n\nconst ATTRIBUTES = ['data-orientation', 'data-edge', 'data-variant', 'data-size'];\n\n/** Where the item whose element is `element` sits, as the viewer wrote it there. */\nfunction toolbarItemContextOf(element: Element): ToolbarItemContext {\n  const edge = element.getAttribute('data-edge') as ToolbarItemEdge | null;\n  const size = element.getAttribute('data-size') as ViewerSize | null;\n  return {\n    orientation:\n      element.getAttribute('data-orientation') === 'vertical' ? 'vertical' : 'horizontal',\n    edge: edge && EDGES.includes(edge) ? edge : AT_THE_TOP.edge,\n    variant: element.getAttribute('data-variant'),\n    size: size && SIZES.includes(size) ? size : AT_THE_TOP.size,\n  };\n}\n\nconst sameContext = (left: ToolbarItemContext, right: ToolbarItemContext): boolean =>\n  left.orientation === right.orientation &&\n  left.edge === right.edge &&\n  left.variant === right.variant &&\n  left.size === right.size;\n\nconst ToolbarItemCtx = createContext<ToolbarItemContext | null>(null);\n\nexport interface ToolbarItemProps {\n  /** The item's id: `{ custom: id }` in the layout. */\n  id: string;\n  children?: ReactNode;\n}\n\n/** What the viewer says on the element `element` holds, as a store: the same object until it changes. */\nfunction contextStoreOf(element: RefObject<Element | null>) {\n  let current = AT_THE_TOP;\n  return {\n    subscribe(onChange: () => void): () => void {\n      const target = element.current;\n      if (!target) return () => {};\n      const observer = new MutationObserver(onChange);\n      observer.observe(target, { attributes: true, attributeFilter: ATTRIBUTES });\n      return () => observer.disconnect();\n    },\n    read(): ToolbarItemContext {\n      const target = element.current;\n      const next = target ? toolbarItemContextOf(target) : current;\n      if (!sameContext(current, next)) current = next;\n      return current;\n    },\n  };\n}\n\nconst atTheTop = () => AT_THE_TOP;\n\n/** Your component in the toolbar, where the layout's `{ custom: id }` makes room for it. */\nexport function ToolbarItem({ id, children }: ToolbarItemProps) {\n  const element = useRef<HTMLDivElement | null>(null);\n  const [store] = useState(() => contextStoreOf(element));\n  const context = useSyncExternalStore(store.subscribe, store.read, atTheTop);\n  return createElement(\n    ToolbarItemCtx.Provider,\n    { value: context },\n    createElement('div', { ref: element, slot: `item:${id}`, style: CONTENTS }, children),\n  );\n}\n\n/**\n * Where the toolbar item this component is in sits: which way its bar runs (`orientation`), the\n * bar's place (`edge`), which of the item's `variants` the toolbar picked (`variant`), and the\n * viewer's size (`size`). Works inside a `ToolbarItem`.\n */\nexport function useToolbarItem(): ToolbarItemContext {\n  const context = useContext(ToolbarItemCtx);\n  if (!context) {\n    throw new Error(\n      '[embedpdf] useToolbarItem() works inside a <ToolbarItem>: it says where that item sits.',\n    );\n  }\n  return context;\n}\n\n// ── a panel, a region ────────────────────────────────────────────────────────\n\nexport interface PanelProps {\n  /** The panel's id, as `addPanel(id, …)` names it in the layout. */\n  id: string;\n  children?: ReactNode;\n}\n\n/** What goes inside a panel: the viewer draws its frame, header and the way it opens. */\nexport function Panel({ id, children }: PanelProps) {\n  return createElement('div', { slot: `panel:${id}`, style: CONTENTS }, children);\n}\n\n/**\n * A place around the viewer for your own components: `header` above everything, `footer` below\n * everything, `tabs` in place of the document tabs, `empty` over the pages while no document is\n * open.\n */\nexport type RegionName = 'header' | 'footer' | 'tabs' | 'empty';\n\nexport interface RegionProps {\n  name: RegionName;\n  children?: ReactNode;\n}\n\n/** Your component in one of the viewer's regions. */\nexport function Region({ name, children }: RegionProps) {\n  return createElement('div', { slot: name, style: CONTENTS }, children);\n}\n","/**\n * The viewer's own components, for yours: `Button`, `Menu` and `MenuItem`\n * render the viewer's `<epdf-button>`, `<epdf-menu>` and `<epdf-menu-item>`\n * elements, which the viewer draws like its own toolbar buttons and menus.\n * Use them inside the viewer: in a `ToolbarItem`, a `Panel` or a `Region`.\n * The elements come with the viewer, so this module imports nothing from it.\n */\nimport {\n  createElement,\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\n\nexport interface ButtonProps {\n  /** Makes it this command's button: its icon, tooltip and state, and it runs it. */\n  command?: string;\n  /** An icon by name, the viewer's or yours, for a button of your own. */\n  icon?: string;\n  /** The name of a button of your own, for its tooltip and screen readers. */\n  label?: string;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** A toolbar button, the viewer's own. */\nexport function Button({ command, icon, label, onClick, className, style }: ButtonProps) {\n  return createElement('epdf-button', {\n    command,\n    icon,\n    label,\n    onClick,\n    style,\n    // A custom element's class is its `class` attribute: React 18 writes `className` as it is.\n    ...(className === undefined ? {} : { class: className }),\n  });\n}\n\nexport interface MenuProps {\n  /** The icon of the button that opens it, by name. */\n  icon?: string;\n  /** Its name, for the button's tooltip and screen readers. */\n  label: string;\n  /** Its rows: `MenuItem`s. */\n  children?: ReactNode;\n}\n\n/**\n * A button that opens a menu of `MenuItem`s, the way the viewer's menus open: away from its bar,\n * flipped when there's no room, and up from the bottom on a phone.\n */\nexport function Menu({ icon, label, children }: MenuProps) {\n  return createElement('epdf-menu', { icon, label }, children);\n}\n\nexport interface MenuItemProps {\n  /** Makes it this command's row: its icon, label and state, and picking it runs it. */\n  command?: string;\n  /** An icon by name, the viewer's or yours. */\n  icon?: string;\n  /** Called when the row is picked. */\n  onSelect?: () => void;\n  /** Its text. */\n  children?: ReactNode;\n}\n\n/** A row in a `Menu`. */\nexport function MenuItem({ command, icon, onSelect, children }: MenuItemProps) {\n  const element = useRef<HTMLElement | null>(null);\n  const select = useRef(onSelect);\n  select.current = onSelect;\n  // The element's `select` event: React passes no handler to a custom element's own events.\n  useEffect(() => {\n    const target = element.current;\n    if (!target) return;\n    const onPicked = () => select.current?.();\n    target.addEventListener('select', onPicked);\n    return () => target.removeEventListener('select', onPicked);\n  }, []);\n  return createElement('epdf-menu-item', { ref: element, command, icon }, children);\n}\n"],"mappings":"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"}

package/dist/parts-CDiQnn2K.d.cts

@@ -0,0 +1,134 @@
+import { ElementConfig, EmbedPdfViewerElement, ToolbarItemContext, Viewer } from "@embedpdf/viewer/core";
+import { CSSProperties, MouseEvent, ReactNode, Ref } from "react";
+import { useCommand } from "@embedpdf/react/commands";
+//#region src/component.d.ts
+/** The framework-side props — everything that is not viewer config. */
+interface PDFViewerExtras {
+  className?: string;
+  style?: CSSProperties;
+  /** Light-DOM children, shown where their slot says: `<ToolbarItem>`, `<Panel>`, `<Region>`. */
+  children?: ReactNode;
+  /** The underlying element, if you need the imperative surface. */
+  elementRef?: Ref<EmbedPdfViewerElement>;
+}
+/**
+ * Props for the shared implementation. Each entry re-exports <PDFViewer>
+ * narrowed to its door's config — see `PDFViewerProps` in ./index.ts (engine
+ * optional) and ./core.ts (engine required).
+ */
+type PDFViewerImplProps = ElementConfig & PDFViewerExtras;
+declare function PDFViewer({ className, style, children, elementRef, onReady, onDocumentChange, onPanelResize, ...config }: PDFViewerImplProps): import("react").ReactElement<{
+  style: CSSProperties | undefined;
+  'data-epdf-wrapped': string;
+  class?: string | undefined;
+  ref: (element: EmbedPdfViewerElement | null) => void;
+}, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/hooks.d.ts
+/**
+ * The `viewer`, in a component inside <PDFViewer>: `get(name)`, `documents`, `commands`,
+ * `watch` and `forDocument`. Your components mount once the viewer is live, so it is always
+ * there. Outside the viewer, keep the one `onReady` gives you; called there, this throws.
+ */
+declare function usePDFViewer(): Viewer;
+//#endregion
+//#region src/slots.d.ts
+interface ToolbarItemProps {
+  /** The item's id: `{ custom: id }` in the layout. */
+  id: string;
+  children?: ReactNode;
+}
+/** Your component in the toolbar, where the layout's `{ custom: id }` makes room for it. */
+declare function ToolbarItem({ id, children }: ToolbarItemProps): import("react").FunctionComponentElement<import("react").ProviderProps<ToolbarItemContext | null>>;
+/**
+ * Where the toolbar item this component is in sits: which way its bar runs (`orientation`), the
+ * bar's place (`edge`), which of the item's `variants` the toolbar picked (`variant`), and the
+ * viewer's size (`size`). Works inside a `ToolbarItem`.
+ */
+declare function useToolbarItem(): ToolbarItemContext;
+interface PanelProps {
+  /** The panel's id, as `addPanel(id, …)` names it in the layout. */
+  id: string;
+  children?: ReactNode;
+}
+/** What goes inside a panel: the viewer draws its frame, header and the way it opens. */
+declare function Panel({ id, children }: PanelProps): import("react").DetailedReactHTMLElement<{
+  slot: string;
+  style: {
+    readonly display: "contents";
+  };
+}, HTMLElement>;
+/**
+ * A place around the viewer for your own components: `header` above everything, `footer` below
+ * everything, `tabs` in place of the document tabs, `empty` over the pages while no document is
+ * open.
+ */
+type RegionName = 'header' | 'footer' | 'tabs' | 'empty';
+interface RegionProps {
+  name: RegionName;
+  children?: ReactNode;
+}
+/** Your component in one of the viewer's regions. */
+declare function Region({ name, children }: RegionProps): import("react").DetailedReactHTMLElement<{
+  slot: RegionName;
+  style: {
+    readonly display: "contents";
+  };
+}, HTMLElement>;
+//#endregion
+//#region src/viewer-components.d.ts
+interface ButtonProps {
+  /** Makes it this command's button: its icon, tooltip and state, and it runs it. */
+  command?: string;
+  /** An icon by name, the viewer's or yours, for a button of your own. */
+  icon?: string;
+  /** The name of a button of your own, for its tooltip and screen readers. */
+  label?: string;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+/** A toolbar button, the viewer's own. */
+declare function Button({ command, icon, label, onClick, className, style }: ButtonProps): import("react").DOMElement<{
+  class?: string | undefined;
+  command: string | undefined;
+  icon: string | undefined;
+  label: string | undefined;
+  onClick: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+  style: CSSProperties | undefined;
+}, Element>;
+interface MenuProps {
+  /** The icon of the button that opens it, by name. */
+  icon?: string;
+  /** Its name, for the button's tooltip and screen readers. */
+  label: string;
+  /** Its rows: `MenuItem`s. */
+  children?: ReactNode;
+}
+/**
+ * A button that opens a menu of `MenuItem`s, the way the viewer's menus open: away from its bar,
+ * flipped when there's no room, and up from the bottom on a phone.
+ */
+declare function Menu({ icon, label, children }: MenuProps): import("react").ReactElement<{
+  icon: string | undefined;
+  label: string;
+}, string | import("react").JSXElementConstructor<any>>;
+interface MenuItemProps {
+  /** Makes it this command's row: its icon, label and state, and picking it runs it. */
+  command?: string;
+  /** An icon by name, the viewer's or yours. */
+  icon?: string;
+  /** Called when the row is picked. */
+  onSelect?: () => void;
+  /** Its text. */
+  children?: ReactNode;
+}
+/** A row in a `Menu`. */
+declare function MenuItem({ command, icon, onSelect, children }: MenuItemProps): import("react").ReactElement<{
+  ref: import("react").MutableRefObject<HTMLElement | null>;
+  command: string | undefined;
+  icon: string | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { PDFViewer as _, MenuItemProps as a, PanelProps as c, RegionProps as d, ToolbarItem as f, usePDFViewer as g, useCommand as h, MenuItem as i, Region as l, useToolbarItem as m, ButtonProps as n, MenuProps as o, ToolbarItemProps as p, Menu as r, Panel as s, Button as t, RegionName as u, PDFViewerExtras as v, PDFViewerImplProps as y };
+//# sourceMappingURL=parts-CDiQnn2K.d.cts.map