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

package/README.md

@@ -32,18 +32,24 @@ Two kinds of surface, two deliberate semantics:
 - **Registries** (`commands`, `icons`, `strings`) are **additive**: your
   entries merge over the defaults by id; a colliding id overrides. Safe,
   order-independent, upgrade-friendly.
-- **Structure** (`chrome`) is a **value you own**: take the default, transform
-  it, or write your own. It is never merged — there is no patch grammar to
-  learn, because the schema is small enough to read.
+- **Structure** (`layout`) is a **value you own**: take the default, edit it,
+  or write your own. It is never merged — the edits are the layout's own
+  methods, and the layout is plain data small enough to read.
 
 ### Remove features
 
 ```tsx
-<FullViewer engine={engine} disabledCategories={['form', 'redaction']} />
+<FullViewer engine={engine} disable={['forms', 'redaction', 'tool:highlight']} />
+<FullViewer engine={engine} readOnly={{ except: ['forms.filling'] }} />
 ```
 
-A disabled category vanishes everywhere at once — toolbar, menus, overflow,
-shortcuts — because every surface is a projection of the same command registry.
+`disable` takes features (`annotations`, or a part such as
+`annotations.highlight`) and single commands (a name with a colon) in one list;
+`readOnly` turns off every feature that changes the document, minus `except`.
+What's off vanishes everywhere at once — toolbar, menus, overflow, shortcuts —
+because every surface is a projection of the same command registry. Both follow
+their props while the viewer runs, and both are only the interface: the
+plugins keep working for your code, and `scope` is what the engine enforces.
 
 ### Add a button
 
@@ -75,89 +81,87 @@ The 90% case, end to end — one command, one icon, one string, one placement:
       },
     },
   ]}
-  chrome={(base, h) =>
-    h.addItem(base, {
-      bar: 'main',
-      section: 'end',
-      group: 'panels',
-      item: 'acme:send',
-    })
-  }
+  layout={(layout) => layout.add('acme:send', { to: 'main', group: 'panels' })}
 />
 ```
 
 That one registration is a button that degrades responsively (`importance` is
 the only responsive knob — there are no breakpoints to edit), drops into the
 derived overflow menu on narrow screens, has a working keyboard shortcut, and
-is localized. Referencing an unknown command or icon logs a dev-mode warning
-naming the exact id.
+is localized. A layout that names an id the viewer doesn't have logs a warning
+with the id and the closest one that exists; an unknown icon logs a dev-mode
+warning naming it.
 
-`chrome` accepts the schema **value** or a **transform** of the default. The
-helpers come in as the second argument so simple edits need no imports:
+`layout` takes a layout, or a **function** that gets the default and the
+viewer's env (`size`, `width`, `touch`, `dir`, measured on the viewer itself)
+and returns yours. It runs again whenever the env changes. Every edit returns a
+new layout, so edits chain and need no imports:
 
 ```tsx
-chrome={(base, h) =>
-  h.removeItems(
-    h.replaceItem(base, 'panel:comment', { command: 'acme:chat', importance: 5 }),
-    ['annotation:add-squiggly'],
-  )
+layout={(layout, env) =>
+  layout
+    .replace('panel:comments', { command: 'acme:chat', importance: 5 })
+    .remove('tool:squiggly', { from: 'annotate' })
+    .place('main', env.size === 'compact' ? 'bottom' : 'top')
 }
 ```
 
-- `h.addItem(schema, { bar, section, group, item, at? })` — `bar` is a bar id
-  (`'main'`, a mode bar like `'annotate'`, or a strip); a new `group` id
-  creates that group at the end of the section.
-- `h.removeItems(schema, ids)` — purges the commands from every bar, mode bar,
-  strip, and menu; emptied groups disappear.
-- `h.replaceItem(schema, id, item)` — swaps a command in place, everywhere.
-- Plus the authoring sugar (`h.item`, `h.group`, `h.custom`, `h.defineChrome`)
-  for building bigger pieces inline.
+- `place(bar, place)` — an edge (`'top'`, `'bottom'`, `'start'`, `'end'`, or
+  `{ edge, before | after }`), `{ float }`, `{ with: bar }` (along another bar,
+  as the mode bars ride `main`) or `{ at: 'selection' | 'annotation' }`.
+- `addBar(id, bar)` / `removeBar(id)` — a bar with a `mode` adds that mode's
+  tab and its `mode:<id>` command; removing it removes the tab.
+- `add(item, { to, section, group, before, after })` — `to` is a bar or a menu;
+  without a position the item starts a new group at the end of `end`.
+- `remove(ids, { from })` — always one place; to leave something out
+  everywhere, use `disable`. A group with nothing left disappears.
+- `replace(id, item)` — swaps an item in place, in every bar and menu.
+- `addMenu(id, sections)`, `addPanel(id, panel)`, `panel(id, changes)`,
+  `removePanel(id)`, `tabs('always' | 'multiple' | 'never')`, and `toJSON()`
+  for the data.
 
 ### Own the structure
 
 For real restructuring, don't patch — write the value. It is the complete
-structural definition of the viewer, and it is small:
+structural definition of the viewer, as plain data, and it is small: groups
+are arrays, items are command ids or small objects.
 
 ```tsx
-import {
-  FullViewer,
-  defineChrome,
-  group,
-  custom,
-  defaultChrome,
-} from '@embedpdf/viewer-chrome';
+import { FullViewer, defaultLayout } from '@embedpdf/viewer-chrome';
 
 // A minimal "reading room": zoom, search, download. Nothing else.
-const chrome = defineChrome({
+const layout = {
   bars: {
     main: {
-      id: 'main',
-      sections: {
-        start: [
-          group('zoom', [
-            custom('zoom-controls', {
-              variants: ['inline', 'button'],
-              terminal: 'zoom:menu',
-            }),
-          ]),
+      place: 'top',
+      start: [
+        [
+          {
+            custom: 'zoom',
+            command: 'menu:zoom',
+            variants: ['inline', 'button'],
+          },
         ],
-        end: [group('actions', ['panel:search', 'document:download'])],
-      },
+      ],
+      end: [['panel:search', 'document:download']],
     },
   },
-  menus: { zoom: defaultChrome.menus.zoom },
-});
+  menus: { zoom: defaultLayout.toJSON().menus!.zoom },
+};
 
-<FullViewer engine={engine} chrome={chrome} />;
+<FullViewer engine={engine} layout={layout} />;
 ```
 
-Adding an entry under `chrome.modeBars` adds a whole mode: the mode tab strip
-is derived from `modeBars` keys, so a custom review workflow is one command
-(the mode surface) plus one bar schema — not a special case.
+A bar with a `mode` adds a whole mode: the mode tabs list every bar with a
+mode, so a custom review workflow is one bar (`{ place: { with: 'main' },
+mode: 'review', title: 'Review', center: [...] }`) — its tab and its
+`mode:review` command come with it. A mode whose bars show nothing has no tab,
+and a bar with nothing visible draws nothing.
 
-Your stability, your choice: pass no `chrome` and you track our default (new
-features appear on upgrade); own the value and your toolbar never moves — new
-EmbedPDF features arrive as new command ids you opt into by adding a line.
+Your stability, your choice: pass no `layout`, or a function of the default,
+and you track our default (new features appear on upgrade); own the value and
+your toolbar never moves — new EmbedPDF features arrive as new command ids you
+opt into by adding a line.
 
 ### Locale
 
@@ -172,55 +176,57 @@ falls back to English for everything you didn't provide.
 
 ### Slots — your component inside the measured toolbar
 
-Reserve a socket in the chrome (`custom()` with a `terminal` command), then —
-through `<embedpdf-viewer>` or any wrapper — supply a child with the matching
-`slot` attribute:
+Reserve a socket in the layout (`{ custom, command }`), then — through
+`<embedpdf-viewer>` or any wrapper — supply a child with the slot
+`item:<id>` (in React, a `<ToolbarItem id>`):
 
 ```tsx
 // @embedpdf/viewer-react
 <PDFViewer
   src="/report.pdf"
   commands={[{ id: 'acme:status', labelKey: 'acme.status', run: () => {} }]}
-  chrome={(base, h) =>
-    h.addItem(base, {
-      bar: 'main',
-      section: 'start',
-      group: 'workspace',
-      item: h.custom('doc-status', { terminal: 'acme:status' }),
-    })
+  layout={(layout) =>
+    layout.add(
+      { custom: 'doc-status', command: 'acme:status' },
+      { to: 'main', group: 'view' },
+    )
   }
 >
-  <DocStatus slot="doc-status" />
+  <ToolbarItem id="doc-status">
+    <DocStatus />
+  </ToolbarItem>
 </PDFViewer>
 ```
 
 The child stays in YOUR world — light DOM, your framework's tree, your page
 CSS — while the browser projects it into the toolbar. The socket is measured
-live, so the solver budgets its true width; when it no longer fits, the
-`terminal` command represents it in the derived overflow menu. An unfilled
-socket displays its terminal command as native slot fallback, so the same
-chrome works with and without the child (and outside shadow DOM entirely —
-this package's own React consumers see the fallback).
-
-Slot names must be unique across the chrome (one `<slot name>` per shadow
-tree wins projection).
+live, so the solver budgets its true width; when it no longer fits, its
+`command` represents it in the derived overflow menu (without one, it never
+leaves the bar). An unfilled socket displays that command as native slot
+fallback, so the same layout works with and without the child (and outside
+shadow DOM entirely — this package's own React consumers see the fallback).
+
+Item ids must be unique across the layout (one `<slot name>` per shadow
+tree wins projection). The slotted element is told where it sits —
+`data-orientation`, `data-edge`, `data-variant`, `data-size` — and the
+viewer's own components (`<epdf-button>`, `<epdf-menu>`) inside it are drawn
+like its own.
 
 ### The frame — regions: arrangement, visibility, replacement
 
-Regions are a FIXED vocabulary (`header`, `tabs`, the toolbar band — each
-carries semantics the shell owns: measurement physics, the document gate,
-aria). Three independent knobs on each:
+Regions are a FIXED vocabulary (`header`, `footer`, `tabs`, `empty`, the bars — each carries
+semantics the shell owns: measurement physics, the document gate, aria). Three
+independent knobs on each:
 
 ```tsx
-// 1. ARRANGE + HIDE — part of the chrome value, because it is structure:
-chrome={(base) => ({
-  ...base,
-  frame: { toolbar: 'bottom', tabs: 'multiple', header: false },
-})}
+// 1. ARRANGE + HIDE — part of the layout, because it is structure:
+layout={(layout) => layout.place('main', 'bottom').tabs('multiple')}
 
 // 2. REPLACE — regions are sockets; the built-in is the slot fallback:
 <PDFViewer documents={docs} onReady={setViewer}>
-  <AcmeTabBar slot="tabs" viewer={viewer} />
+  <Region name="tabs">
+    <AcmeTabBar viewer={viewer} />
+  </Region>
 </PDFViewer>
 ```
 
@@ -230,48 +236,56 @@ not to the PDF. The socket is there so yours can sit inside the frame:
 
 ```tsx
 <PDFViewer documents={docs}>
-  <AcmeHeader slot="header" />
+  <Region name="header">
+    <AcmeHeader />
+  </Region>
 </PDFViewer>
 ```
 
-Left unfilled it renders nothing, and `frame: { header: false }` drops the
-socket entirely. Theme and locale stay under your control as props —
+Left unfilled it renders nothing. Theme and locale stay under your control as props —
 `theme={{ preference, tokens }}` and `locale` (`'auto'` negotiates from the
 browser) — so a switch in your own header is a state change on your side.
 
 A replacement region is fully functional through the handle — the kernel's
 document registry IS the tab model (`viewer.documents.list()/activeId()/
-setActive()/close()` + `viewer.watch`). A region hidden by the frame hides
-its socket too: visibility outranks slotted content. The mode band rides the
-main toolbar's content side (below a top bar, above a bottom bar).
+setActive()/close()` + `viewer.watch`). A region the layout hides (`tabs('never')`)
+hides its socket too: visibility outranks slotted content. The mode bars ride
+the main toolbar's content side (below a top bar, above a bottom bar).
 
 ### Drive — control the viewer from code
 
-The handle (`el.viewer` on the custom element, `onReady` on the wrappers) is a
-thin skin over the kernel: `get(Token)` returns each plugin's **public
-capability lens** verbatim — the same documented API the chrome's own buttons
-use — plus ONE reactivity primitive and the command trio:
+The `viewer` (`el.viewer` on the custom element, `onReady` on the wrappers) is
+a thin skin over the kernel: `get(name)` (or `get(Token)`) returns each plugin's
+**public capability lens** verbatim — the same documented API the chrome's own
+buttons use — `documents` and `commands` are two of them, plus ONE reactivity
+primitive:
 
 ```ts
 el.addEventListener('epdf:ready', () => {
   const viewer = el.viewer;
 
-  viewer.execute('zoom:in'); // commands: UI verbs
-  const annotation = viewer.get(AnnotationToken); // capabilities: the API
+  await viewer.commands.execute('zoom:in'); // commands: UI verbs
+  const annotation = viewer.get('annotation'); // capabilities: the API
   await annotation.create(pon, draft);
 
   viewer.watch(
     // the one primitive
-    () => annotation.getSelectionProps(),
+    () => annotation.getSelectionFields(),
     (props) => myPanel.render(props),
   );
   viewer.documents.list(); // the tab model
 });
 ```
 
+A `viewer` lives as long as the viewer it reaches: once that one unmounts, or
+mounts again with a new config, the listeners added through it stop and its
+calls refuse with `instance-closed` (`createViewer` returns it with its
+`dispose`).
+
 Rule of thumb: **buttons speak commands; code speaks capabilities.** The
-token re-export list in `index.ts` is the public-API act — internal lenses
-(`/internal` entries) are structurally absent from delivery bundles. Coarse
+plugin names (`VIEWER_PLUGINS` in `handle.ts`) and the token re-export list in
+`index.ts` are the public-API act — host lenses
+(`/contract/host` entries) are structurally absent from delivery bundles. Coarse
 DOM events (`epdf:ready`, `epdf:documentchange`) are sugar over `watch`.
 
 ### Theme — match your brand
@@ -279,16 +293,25 @@ DOM events (`epdf:ready`, `epdf:documentchange`) are sugar over `watch`.
 ```tsx
 theme={{
   preference: 'system',
-  tokens: { accent: '#7c3aed', 'accent-hover': '#6d28d9' },  // both modes
-  dark: { accent: '#a78bfa' },                               // dark overrides
+  accent: '#7c3aed',                            // both modes
+  tokens: { surface: '#fdfcff', radius: '4px' }, // both modes
+  dark: { accent: '#a78bfa' },                  // dark only
 }}
 ```
 
-Token names are the `--ep-*` variables in `styles.css` without the prefix —
-the prefix exists because custom properties inherit through shadow boundaries,
-so unprefixed names could collide with the host page. The custom element
-adopts the overrides into its shadow root; direct consumers of this package
-just set the `--ep-*` variables in their own CSS.
+The tokens are `THEME_TOKENS` (`ui/theme.tsx`): `accent`, `background`,
+`surface`, `surface-raised`, `text`, `text-muted`, `border`, `hover`,
+`canvas`, `radius` and `font`, each the CSS variable `--epdf-<name>`.
+`styles.css` declares them on the viewer's root with a default for each mode,
+and every other shade the chrome draws with is mixed from them in its
+`@theme inline` block, so the Tailwind classes (`bg-surface`, `text-fg`,
+`border-border-subtle`, `rounded-md`) follow them. `accent` is the same
+variable the pages read (the headless docs' "Colors & theming"), so it themes
+the pages and the chrome together. A variable the page sets on the element or
+around it wins over the config and the defaults: the sheet reads the page's
+value on the host first. The custom element adopts the config's tokens into
+its shadow root (`themeTokenCss`); direct consumers of this package set the
+variables in their own CSS.
 
 ### Restyle — reshape built-ins with page CSS
 
@@ -303,9 +326,10 @@ embedpdf-viewer::part(tab-active) {
 }
 ```
 
-The v1 part vocabulary — public API, grown by demand, never speculatively:
-`toolbar`, `toolbar-button(-active)`, `mode-tab(-active)`, `tab(-active)`,
-`menu`, `menu-item(-active)`.
+The part vocabulary is public API, grown by demand: `toolbar` (every bar,
+the floating ones' pill and the bars over a selection), `toolbar-button(-active)`,
+`mode-tab(-active)`, `tab(-active)`, `menu`, `menu-item(-active)`, `panel`
+and `panel-header`.
 
 ### Signatures — sign with a mark, through a key you bring
 
@@ -316,30 +340,49 @@ field to sign it — or click anywhere else to drop it as a stamp, as Preview
 does. A "sign here" click on an unsigned field targets it; the next mark
 picked goes in. The Form tab authors signature fields.
 
-What placing a mark on a field does is the `signatures` config:
+What placing a mark on a field does is the signature plugin's settings, in
+`plugins.signature`, next to the two the viewer adds (`kinds`, `fonts`); the
+standard and quick stamps are the viewer's settings in `plugins.stamp`:
 
 ```tsx
-import { FullViewer, personalSigner, indexedDbKeyStore } from '@embedpdf/viewer-chrome';
+import {
+  FullViewer,
+  personalSigner,
+  indexedDbKeyStore,
+} from '@embedpdf/viewer-chrome';
 
 <FullViewer
   engine={engine}
-  signatures={{
-    // The key holder: your own key (`webCryptoSigner`), a signing service
-    // (`remoteSigner`), or one self-signed identity per person kept in the
-    // browser (`personalSigner`). Without a signer the mark is only DRAWN
-    // into the field — nothing is sealed.
-    signer: () => personalSigner({ subject: 'Ada Lovelace', store: indexedDbKeyStore('acme-keys') }),
-    // Anchors a reader trusts; none → "valid, signer not trusted" at best.
-    trust: { anchors: async () => [rootCertificateDer] },
-    // 'sign' (default with a signer) | 'visual' (default without) | 'ask' (a dialog first)
-    mode: 'ask',
-    allowCertify: true, // offer a certification (first signature) in the dialog
-    kinds: ['signature'], // no initials
-    fonts: [{ key: 'great-vibes', url: '/fonts/GreatVibes.ttf', label: 'Great Vibes' }], // typed marks
-  }}
-  stamps={{
-    sidebar: ['stamps'], // library kinds the stamps sidebar lists
-    toolbar: ['embedpdf-standard:Check', 'embedpdf-standard:Cross'], // quick marks in the Insert bar
+  plugins={{
+    signature: {
+      // The key: your own (`webCryptoSigner`), a signing service
+      // (`remoteSigner`), or one self-signed identity per person kept in the
+      // browser (`personalSigner`). Without a key the mark is only drawn
+      // into the field: nothing is sealed.
+      key: () =>
+        personalSigner({
+          subject: 'Ada Lovelace',
+          store: indexedDbKeyStore('acme-keys'),
+        }),
+      // Anchors a reader trusts; none → "valid, signer not trusted" at best.
+      trust: { anchors: async () => [rootCertificateDer] },
+      // 'sign' (default with a key) | 'visual' (default without) | 'ask' (a dialog first)
+      mode: 'ask',
+      allowCertify: true, // offer a certification (first signature) in the dialog
+      kinds: ['signature'], // no initials
+      fonts: [
+        {
+          key: 'great-vibes',
+          url: '/fonts/GreatVibes.ttf',
+          label: 'Great Vibes',
+        },
+      ], // typed marks
+    },
+    stamp: {
+      standard: true, // the standard stamps, from your own build (a URL, or false for none)
+      sidebar: ['stamps'], // library kinds the stamps sidebar lists
+      quick: ['standard:Approved', 'standard:Rejected'], // quick marks in the Insert bar
+    },
   }}
 />;
 ```

package/dist/annotation-fonts-BqoLZ4Mp.js

@@ -0,0 +1,80 @@
+import { l as useConfiguredFonts } from "./icons-BrK5iVL8.js";
+import { createContext, useContext, useEffect, useState } from "react";
+import { isLocalEngine, useKernel } from "@embedpdf/react/runtime";
+import { mountWebFont } from "@embedpdf/web";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/annotation-fonts.tsx
+/**
+* The engine's configured fonts (`engine.fonts`), loaded once per viewer: read
+* the bytes (fetched from `url`, or `data`) → register them on the viewer's
+* engine under the key (what a free-text `fontFamily` carries and what the
+* engine embeds) → mount the same bytes as a `@font-face` for that key (the
+* family the plugin's `cssFontFamily` emits for a registered font, so the live
+* editor renders the face the appearance stream will bake). The style panel
+* lists a font only once both have happened — an offered key always resolves
+* on write.
+*/
+const LoadedFontsContext = createContext([]);
+/** A font's bytes: its `data`, or its file fetched from `url`. */
+async function bytesOf(font) {
+	if (font.data) return new Uint8Array(font.data);
+	if (!font.url) throw new Error("a font needs a url or its data");
+	const response = await fetch(font.url);
+	if (!response.ok) throw new Error(`${font.url}: HTTP ${response.status}`);
+	return new Uint8Array(await response.arrayBuffer());
+}
+function AnnotationFontsProvider({ children }) {
+	const kernel = useKernel();
+	const fonts = useConfiguredFonts();
+	const [loaded, setLoaded] = useState([]);
+	useEffect(() => {
+		if (!fonts.length || !isLocalEngine(kernel.engine)) return;
+		const engineFonts = kernel.engine.fonts;
+		let cancelled = false;
+		const unmounts = [];
+		(async () => {
+			for (const font of fonts) try {
+				const bytes = await bytesOf(font);
+				if (cancelled) return;
+				await engineFonts.register({
+					key: font.key,
+					familyName: font.familyName,
+					weight: font.weight,
+					italic: font.italic,
+					data: bytes
+				});
+				const unmount = await mountWebFont(font.key, bytes, {
+					weight: font.weight,
+					style: font.italic ? "italic" : "normal"
+				});
+				if (cancelled) {
+					unmount();
+					return;
+				}
+				unmounts.push(unmount);
+				setLoaded((previous) => previous.some((existing) => existing.key === font.key) ? previous : [...previous, {
+					key: font.key,
+					label: font.familyName ?? font.key
+				}]);
+			} catch (error) {
+				console.warn(`[embedpdf] engine font "${font.key}" was not loaded:`, error);
+			}
+		})();
+		return () => {
+			cancelled = true;
+			for (const unmount of unmounts) unmount();
+		};
+	}, [kernel, fonts]);
+	return /* @__PURE__ */ jsx(LoadedFontsContext.Provider, {
+		value: loaded,
+		children
+	});
+}
+/** The configured fonts that are registered and mounted, in config order. */
+function useAnnotationFonts() {
+	return useContext(LoadedFontsContext);
+}
+//#endregion
+export { useAnnotationFonts as n, AnnotationFontsProvider as t };
+
+//# sourceMappingURL=annotation-fonts-BqoLZ4Mp.js.map

package/dist/annotation-fonts-BqoLZ4Mp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotation-fonts-BqoLZ4Mp.js","names":[],"sources":["../src/ui/annotation-fonts.tsx"],"sourcesContent":["/**\n * The engine's configured fonts (`engine.fonts`), loaded once per viewer: read\n * the bytes (fetched from `url`, or `data`) → register them on the viewer's\n * engine under the key (what a free-text `fontFamily` carries and what the\n * engine embeds) → mount the same bytes as a `@font-face` for that key (the\n * family the plugin's `cssFontFamily` emits for a registered font, so the live\n * editor renders the face the appearance stream will bake). The style panel\n * lists a font only once both have happened — an offered key always resolves\n * on write.\n */\nimport { createContext, useContext, useEffect, useState, type ReactNode } from 'react';\nimport { isLocalEngine, useKernel } from '@embedpdf/react/runtime';\nimport { mountWebFont } from '@embedpdf/web';\nimport { useConfiguredFonts, type ViewerFont } from '../config-context';\n\nexport interface LoadedAnnotationFont {\n  readonly key: string;\n  readonly label: string;\n}\n\nconst LoadedFontsContext = createContext<readonly LoadedAnnotationFont[]>([]);\n\n/** A font's bytes: its `data`, or its file fetched from `url`. */\nasync function bytesOf(font: ViewerFont): Promise<Uint8Array> {\n  if (font.data) return new Uint8Array(font.data);\n  if (!font.url) throw new Error('a font needs a url or its data');\n  const response = await fetch(font.url);\n  if (!response.ok) throw new Error(`${font.url}: HTTP ${response.status}`);\n  return new Uint8Array(await response.arrayBuffer());\n}\n\nexport function AnnotationFontsProvider({ children }: { children: ReactNode }) {\n  const kernel = useKernel();\n  const fonts = useConfiguredFonts();\n  const [loaded, setLoaded] = useState<readonly LoadedAnnotationFont[]>([]);\n\n  useEffect(() => {\n    // The cloud engine registers no fonts (a server policy), so a key could\n    // never resolve on write: offer nothing rather than a font that fails.\n    if (!fonts.length || !isLocalEngine(kernel.engine)) return;\n    const engineFonts = kernel.engine.fonts;\n    let cancelled = false;\n    const unmounts: Array<() => void> = [];\n    void (async () => {\n      for (const font of fonts) {\n        try {\n          const bytes = await bytesOf(font);\n          if (cancelled) return;\n          await engineFonts.register({\n            key: font.key,\n            familyName: font.familyName,\n            weight: font.weight,\n            italic: font.italic,\n            data: bytes,\n          });\n          const unmount = await mountWebFont(font.key, bytes, {\n            weight: font.weight,\n            style: font.italic ? 'italic' : 'normal',\n          });\n          if (cancelled) {\n            unmount();\n            return;\n          }\n          unmounts.push(unmount);\n          setLoaded((previous) =>\n            previous.some((existing) => existing.key === font.key)\n              ? previous\n              : [...previous, { key: font.key, label: font.familyName ?? font.key }],\n          );\n        } catch (error) {\n          console.warn(`[embedpdf] engine font \"${font.key}\" was not loaded:`, error);\n        }\n      }\n    })();\n    return () => {\n      cancelled = true;\n      for (const unmount of unmounts) unmount();\n    };\n  }, [kernel, fonts]);\n\n  return <LoadedFontsContext.Provider value={loaded}>{children}</LoadedFontsContext.Provider>;\n}\n\n/** The configured fonts that are registered and mounted, in config order. */\nexport function useAnnotationFonts(): readonly LoadedAnnotationFont[] {\n  return useContext(LoadedFontsContext);\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,qBAAqB,cAA+C,CAAC,CAAC;;AAG5E,eAAe,QAAQ,MAAuC;CAC5D,IAAI,KAAK,MAAM,OAAO,IAAI,WAAW,KAAK,IAAI;CAC9C,IAAI,CAAC,KAAK,KAAK,MAAM,IAAI,MAAM,gCAAgC;CAC/D,MAAM,WAAW,MAAM,MAAM,KAAK,GAAG;CACrC,IAAI,CAAC,SAAS,IAAI,MAAM,IAAI,MAAM,GAAG,KAAK,IAAI,SAAS,SAAS,QAAQ;CACxE,OAAO,IAAI,WAAW,MAAM,SAAS,YAAY,CAAC;AACpD;AAEA,SAAgB,wBAAwB,EAAE,YAAqC;CAC7E,MAAM,SAAS,UAAU;CACzB,MAAM,QAAQ,mBAAmB;CACjC,MAAM,CAAC,QAAQ,aAAa,SAA0C,CAAC,CAAC;CAExE,gBAAgB;EAGd,IAAI,CAAC,MAAM,UAAU,CAAC,cAAc,OAAO,MAAM,GAAG;EACpD,MAAM,cAAc,OAAO,OAAO;EAClC,IAAI,YAAY;EAChB,MAAM,WAA8B,CAAC;EACrC,CAAM,YAAY;GAChB,KAAK,MAAM,QAAQ,OACjB,IAAI;IACF,MAAM,QAAQ,MAAM,QAAQ,IAAI;IAChC,IAAI,WAAW;IACf,MAAM,YAAY,SAAS;KACzB,KAAK,KAAK;KACV,YAAY,KAAK;KACjB,QAAQ,KAAK;KACb,QAAQ,KAAK;KACb,MAAM;IACR,CAAC;IACD,MAAM,UAAU,MAAM,aAAa,KAAK,KAAK,OAAO;KAClD,QAAQ,KAAK;KACb,OAAO,KAAK,SAAS,WAAW;IAClC,CAAC;IACD,IAAI,WAAW;KACb,QAAQ;KACR;IACF;IACA,SAAS,KAAK,OAAO;IACrB,WAAW,aACT,SAAS,MAAM,aAAa,SAAS,QAAQ,KAAK,GAAG,IACjD,WACA,CAAC,GAAG,UAAU;KAAE,KAAK,KAAK;KAAK,OAAO,KAAK,cAAc,KAAK;IAAI,CAAC,CACzE;GACF,SAAS,OAAO;IACd,QAAQ,KAAK,2BAA2B,KAAK,IAAI,oBAAoB,KAAK;GAC5E;EAEJ,EAAA,CAAG;EACH,aAAa;GACX,YAAY;GACZ,KAAK,MAAM,WAAW,UAAU,QAAQ;EAC1C;CACF,GAAG,CAAC,QAAQ,KAAK,CAAC;CAElB,OAAO,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;EAAS;CAAsC,CAAA;AAC5F;;AAGA,SAAgB,qBAAsD;CACpE,OAAO,WAAW,kBAAkB;AACtC"}

package/dist/annotation-fonts-Dt0IQXhz.cjs

@@ -0,0 +1,91 @@
+const require_icons = require("./icons-x0Tc05bs.cjs");
+let react = require("react");
+let _embedpdf_react_runtime = require("@embedpdf/react/runtime");
+let _embedpdf_web = require("@embedpdf/web");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui/annotation-fonts.tsx
+/**
+* The engine's configured fonts (`engine.fonts`), loaded once per viewer: read
+* the bytes (fetched from `url`, or `data`) → register them on the viewer's
+* engine under the key (what a free-text `fontFamily` carries and what the
+* engine embeds) → mount the same bytes as a `@font-face` for that key (the
+* family the plugin's `cssFontFamily` emits for a registered font, so the live
+* editor renders the face the appearance stream will bake). The style panel
+* lists a font only once both have happened — an offered key always resolves
+* on write.
+*/
+const LoadedFontsContext = (0, react.createContext)([]);
+/** A font's bytes: its `data`, or its file fetched from `url`. */
+async function bytesOf(font) {
+	if (font.data) return new Uint8Array(font.data);
+	if (!font.url) throw new Error("a font needs a url or its data");
+	const response = await fetch(font.url);
+	if (!response.ok) throw new Error(`${font.url}: HTTP ${response.status}`);
+	return new Uint8Array(await response.arrayBuffer());
+}
+function AnnotationFontsProvider({ children }) {
+	const kernel = (0, _embedpdf_react_runtime.useKernel)();
+	const fonts = require_icons.useConfiguredFonts();
+	const [loaded, setLoaded] = (0, react.useState)([]);
+	(0, react.useEffect)(() => {
+		if (!fonts.length || !(0, _embedpdf_react_runtime.isLocalEngine)(kernel.engine)) return;
+		const engineFonts = kernel.engine.fonts;
+		let cancelled = false;
+		const unmounts = [];
+		(async () => {
+			for (const font of fonts) try {
+				const bytes = await bytesOf(font);
+				if (cancelled) return;
+				await engineFonts.register({
+					key: font.key,
+					familyName: font.familyName,
+					weight: font.weight,
+					italic: font.italic,
+					data: bytes
+				});
+				const unmount = await (0, _embedpdf_web.mountWebFont)(font.key, bytes, {
+					weight: font.weight,
+					style: font.italic ? "italic" : "normal"
+				});
+				if (cancelled) {
+					unmount();
+					return;
+				}
+				unmounts.push(unmount);
+				setLoaded((previous) => previous.some((existing) => existing.key === font.key) ? previous : [...previous, {
+					key: font.key,
+					label: font.familyName ?? font.key
+				}]);
+			} catch (error) {
+				console.warn(`[embedpdf] engine font "${font.key}" was not loaded:`, error);
+			}
+		})();
+		return () => {
+			cancelled = true;
+			for (const unmount of unmounts) unmount();
+		};
+	}, [kernel, fonts]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadedFontsContext.Provider, {
+		value: loaded,
+		children
+	});
+}
+/** The configured fonts that are registered and mounted, in config order. */
+function useAnnotationFonts() {
+	return (0, react.useContext)(LoadedFontsContext);
+}
+//#endregion
+Object.defineProperty(exports, "AnnotationFontsProvider", {
+	enumerable: true,
+	get: function() {
+		return AnnotationFontsProvider;
+	}
+});
+Object.defineProperty(exports, "useAnnotationFonts", {
+	enumerable: true,
+	get: function() {
+		return useAnnotationFonts;
+	}
+});
+
+//# sourceMappingURL=annotation-fonts-Dt0IQXhz.cjs.map

package/dist/annotation-fonts-Dt0IQXhz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotation-fonts-Dt0IQXhz.cjs","names":["useConfiguredFonts"],"sources":["../src/ui/annotation-fonts.tsx"],"sourcesContent":["/**\n * The engine's configured fonts (`engine.fonts`), loaded once per viewer: read\n * the bytes (fetched from `url`, or `data`) → register them on the viewer's\n * engine under the key (what a free-text `fontFamily` carries and what the\n * engine embeds) → mount the same bytes as a `@font-face` for that key (the\n * family the plugin's `cssFontFamily` emits for a registered font, so the live\n * editor renders the face the appearance stream will bake). The style panel\n * lists a font only once both have happened — an offered key always resolves\n * on write.\n */\nimport { createContext, useContext, useEffect, useState, type ReactNode } from 'react';\nimport { isLocalEngine, useKernel } from '@embedpdf/react/runtime';\nimport { mountWebFont } from '@embedpdf/web';\nimport { useConfiguredFonts, type ViewerFont } from '../config-context';\n\nexport interface LoadedAnnotationFont {\n  readonly key: string;\n  readonly label: string;\n}\n\nconst LoadedFontsContext = createContext<readonly LoadedAnnotationFont[]>([]);\n\n/** A font's bytes: its `data`, or its file fetched from `url`. */\nasync function bytesOf(font: ViewerFont): Promise<Uint8Array> {\n  if (font.data) return new Uint8Array(font.data);\n  if (!font.url) throw new Error('a font needs a url or its data');\n  const response = await fetch(font.url);\n  if (!response.ok) throw new Error(`${font.url}: HTTP ${response.status}`);\n  return new Uint8Array(await response.arrayBuffer());\n}\n\nexport function AnnotationFontsProvider({ children }: { children: ReactNode }) {\n  const kernel = useKernel();\n  const fonts = useConfiguredFonts();\n  const [loaded, setLoaded] = useState<readonly LoadedAnnotationFont[]>([]);\n\n  useEffect(() => {\n    // The cloud engine registers no fonts (a server policy), so a key could\n    // never resolve on write: offer nothing rather than a font that fails.\n    if (!fonts.length || !isLocalEngine(kernel.engine)) return;\n    const engineFonts = kernel.engine.fonts;\n    let cancelled = false;\n    const unmounts: Array<() => void> = [];\n    void (async () => {\n      for (const font of fonts) {\n        try {\n          const bytes = await bytesOf(font);\n          if (cancelled) return;\n          await engineFonts.register({\n            key: font.key,\n            familyName: font.familyName,\n            weight: font.weight,\n            italic: font.italic,\n            data: bytes,\n          });\n          const unmount = await mountWebFont(font.key, bytes, {\n            weight: font.weight,\n            style: font.italic ? 'italic' : 'normal',\n          });\n          if (cancelled) {\n            unmount();\n            return;\n          }\n          unmounts.push(unmount);\n          setLoaded((previous) =>\n            previous.some((existing) => existing.key === font.key)\n              ? previous\n              : [...previous, { key: font.key, label: font.familyName ?? font.key }],\n          );\n        } catch (error) {\n          console.warn(`[embedpdf] engine font \"${font.key}\" was not loaded:`, error);\n        }\n      }\n    })();\n    return () => {\n      cancelled = true;\n      for (const unmount of unmounts) unmount();\n    };\n  }, [kernel, fonts]);\n\n  return <LoadedFontsContext.Provider value={loaded}>{children}</LoadedFontsContext.Provider>;\n}\n\n/** The configured fonts that are registered and mounted, in config order. */\nexport function useAnnotationFonts(): readonly LoadedAnnotationFont[] {\n  return useContext(LoadedFontsContext);\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,sBAAA,GAAA,MAAA,cAAA,CAAoE,CAAC,CAAC;;AAG5E,eAAe,QAAQ,MAAuC;CAC5D,IAAI,KAAK,MAAM,OAAO,IAAI,WAAW,KAAK,IAAI;CAC9C,IAAI,CAAC,KAAK,KAAK,MAAM,IAAI,MAAM,gCAAgC;CAC/D,MAAM,WAAW,MAAM,MAAM,KAAK,GAAG;CACrC,IAAI,CAAC,SAAS,IAAI,MAAM,IAAI,MAAM,GAAG,KAAK,IAAI,SAAS,SAAS,QAAQ;CACxE,OAAO,IAAI,WAAW,MAAM,SAAS,YAAY,CAAC;AACpD;AAEA,SAAgB,wBAAwB,EAAE,YAAqC;CAC7E,MAAM,UAAA,GAAA,wBAAA,UAAA,CAAmB;CACzB,MAAM,QAAQA,cAAAA,mBAAmB;CACjC,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAuD,CAAC,CAAC;CAExE,CAAA,GAAA,MAAA,UAAA,OAAgB;EAGd,IAAI,CAAC,MAAM,UAAU,EAAA,GAAA,wBAAA,cAAA,CAAe,OAAO,MAAM,GAAG;EACpD,MAAM,cAAc,OAAO,OAAO;EAClC,IAAI,YAAY;EAChB,MAAM,WAA8B,CAAC;EACrC,CAAM,YAAY;GAChB,KAAK,MAAM,QAAQ,OACjB,IAAI;IACF,MAAM,QAAQ,MAAM,QAAQ,IAAI;IAChC,IAAI,WAAW;IACf,MAAM,YAAY,SAAS;KACzB,KAAK,KAAK;KACV,YAAY,KAAK;KACjB,QAAQ,KAAK;KACb,QAAQ,KAAK;KACb,MAAM;IACR,CAAC;IACD,MAAM,UAAU,OAAA,GAAA,cAAA,aAAA,CAAmB,KAAK,KAAK,OAAO;KAClD,QAAQ,KAAK;KACb,OAAO,KAAK,SAAS,WAAW;IAClC,CAAC;IACD,IAAI,WAAW;KACb,QAAQ;KACR;IACF;IACA,SAAS,KAAK,OAAO;IACrB,WAAW,aACT,SAAS,MAAM,aAAa,SAAS,QAAQ,KAAK,GAAG,IACjD,WACA,CAAC,GAAG,UAAU;KAAE,KAAK,KAAK;KAAK,OAAO,KAAK,cAAc,KAAK;IAAI,CAAC,CACzE;GACF,SAAS,OAAO;IACd,QAAQ,KAAK,2BAA2B,KAAK,IAAI,oBAAoB,KAAK;GAC5E;EAEJ,EAAA,CAAG;EACH,aAAa;GACX,YAAY;GACZ,KAAK,MAAM,WAAW,UAAU,QAAQ;EAC1C;CACF,GAAG,CAAC,QAAQ,KAAK,CAAC;CAElB,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAmB,UAApB;EAA6B,OAAO;EAAS;CAAsC,CAAA;AAC5F;;AAGA,SAAgB,qBAAsD;CACpE,QAAA,GAAA,MAAA,WAAA,CAAkB,kBAAkB;AACtC"}