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

package/dist/{stamps-panel-B9NYGayn.cjs → stamps-panel-Cv9nJBwx.cjs}

@@ -1,10 +1,11 @@
-const require_icons = require("./icons-x0Tc05bs.cjs");
+const require_icons = require("./icons-1UfLUZ_y.cjs");
 const require_stamp_store = require("./stamp-store-BHvRs-Do.cjs");
 let react = require("react");
 let _embedpdf_react_interaction = require("@embedpdf/react/interaction");
 let _embedpdf_react_stamp = require("@embedpdf/react/stamp");
 let _embedpdf_react_i18n = require("@embedpdf/react/i18n");
 let _embedpdf_react_shell = require("@embedpdf/react/shell");
+let _embedpdf_web = require("@embedpdf/web");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/ui/stamps-panel.tsx
 /**
@@ -80,14 +81,7 @@ function StampsPanel() {
 	*  or another viewer. */
 	const exportPdf = async (libraryId, name) => {
 		const bytes = await stamp.exportLibrary(libraryId).catch(() => null);
-		if (!bytes) return;
-		const blob = new Blob([bytes], { type: "application/pdf" });
-		const url = URL.createObjectURL(blob);
-		const anchor = document.createElement("a");
-		anchor.href = url;
-		anchor.download = `${name || "stamps"}.pdf`;
-		anchor.click();
-		URL.revokeObjectURL(url);
+		if (bytes) (0, _embedpdf_web.saveFile)(bytes, `${name || "stamps"}.pdf`, "application/pdf");
 	};
 	const selectedId = libraries.length === 1 ? libraries[0].id : libraries.some((library) => library.id === picked) ? picked : ALL;
 	const selected = selectedId === ALL ? null : libraries.find((library) => library.id === selectedId) ?? null;
@@ -228,4 +222,4 @@ function StampAssetCell({ asset, armed, onArm }) {
 //#endregion
 exports.StampsPanel = StampsPanel;
 
-//# sourceMappingURL=stamps-panel-B9NYGayn.cjs.map
+//# sourceMappingURL=stamps-panel-Cv9nJBwx.cjs.map

package/dist/stamps-panel-Cv9nJBwx.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stamps-panel-Cv9nJBwx.cjs","names":["useStampSettings","ensureDefaultLibrary","resolveStampsLocale","DEFAULT_LIBRARY_ID","Icon"],"sources":["../src/ui/stamps-panel.tsx"],"sourcesContent":["/**\n * The stamps sidebar (right panel). The stamp plugin owns the libraries, the\n * asset bytes and the cached previews; this panel is the picker over them:\n *\n *   a library <select> (\"All stamps\" + one per library, shown once there\n *   are two) → a two-column grid of thumbnails → click a stamp → `armAsset`\n *   arms the annotation plugin's stamp tool → hovering a page ghosts the\n *   exact placement → each click on a page places one.\n *\n * Deliberately not a file dialog: picking arbitrary image bytes is the Image\n * tool's job (a click-then-pick tool, `tool:image`). The stamp button\n * opens a library; a library is a set of reusable, named assets — the two\n * gestures are different, so they are different controls.\n *\n * The panel stays open while you place, so a stamp can be dropped on several\n * pages and swapped without a round trip through the toolbar. A command can\n * open it on a library (`annotation:stamp-from-selection` → \"My stamps\")\n * through the surface's open props.\n */\nimport { useEffect, useRef, useState } from 'react';\nimport { useInteractionState } from '@embedpdf/react/interaction';\nimport {\n  useStamp,\n  useStampAssetPreviewUrl,\n  useStampAssets,\n  useStampLibraries,\n  type StampAsset,\n} from '@embedpdf/react/stamp';\nimport { useSurface } from '@embedpdf/react/shell';\nimport { useI18nState, useT } from '@embedpdf/react/i18n';\nimport { saveFile } from '@embedpdf/web';\nimport { useStampSettings } from '../config-context';\nimport {\n  DEFAULT_LIBRARY_ID,\n  ensureDefaultLibrary,\n  resolveStampsLocale,\n} from '../config/default-stamps';\nimport { Icon } from './icons';\nimport { restoreStampLibrariesOnce } from './stamp-store';\n\nconst ALL = 'all';\n\nexport function StampsPanel() {\n  const t = useT();\n  const stamp = useStamp();\n  const { standard, sidebar } = useStampSettings();\n  // Which catalogs this sidebar shows (`plugins.stamp.sidebar`): the plain stamps by\n  // default — never the people's marks, which have their own panel.\n  const libraries = useStampLibraries({ kind: sidebar ?? ['stamps'] });\n  const assets = useStampAssets();\n  const { activeToolId } = useInteractionState();\n  const { locale } = useI18nState();\n  const surface = useSurface('stamps');\n  const fileRef = useRef<HTMLInputElement>(null);\n  const [armedId, setArmedId] = useState<string | null>(null);\n  const [busy, setBusy] = useState<'loading' | 'importing' | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [picked, setPicked] = useState<string>(ALL);\n\n  // A command opened the panel on a library (the surface's `libraryId` prop).\n  const openedOn = surface.props?.libraryId;\n  useEffect(() => {\n    if (typeof openedOn === 'string') setPicked(openedOn);\n  }, [openedOn]);\n\n  // First open: the user's stored libraries (the workspace store restores\n  // them; this only awaits it), then the built-in library for this locale —\n  // never at viewer boot, so a viewer whose user never opens this panel pays\n  // nothing for it. A locale change while open swaps the built-in library;\n  // the user's own are untouched.\n  useEffect(() => {\n    let live = true;\n    setBusy('loading');\n    restoreStampLibrariesOnce(stamp)\n      .then(() => ensureDefaultLibrary(stamp, resolveStampsLocale(locale), standard))\n      .catch((error: unknown) => {\n        console.error('[embedpdf] default stamps failed:', error);\n        if (live) setError(t('demo.stampsError'));\n      })\n      .finally(() => live && setBusy(null));\n    return () => {\n      live = false;\n    };\n    // `t` and `standard` are init-stable; only the locale re-runs this.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [stamp, locale]);\n\n  // The interaction hub owns tool state: leaving the stamp tool (picking\n  // another tool, pressing Escape) un-highlights the gallery.\n  useEffect(() => {\n    if (activeToolId !== 'stamp') setArmedId(null);\n  }, [activeToolId]);\n\n  const arm = (asset: StampAsset) => {\n    setError(null);\n    setArmedId(asset.id);\n    void stamp.armAsset(asset.id).catch((error) => {\n      console.error('[embedpdf] arm stamp failed:', error);\n      setArmedId(null);\n      setError(t('demo.stampsArmError'));\n    });\n  };\n\n  const importPdf = (file: File) => {\n    setError(null);\n    setBusy('importing');\n    // The file name is only a fallback: an Acrobat-authored or previously\n    // exported library names itself through its /Title.\n    stamp\n      .importLibrary(file, { name: file.name.replace(/\\.pdf$/i, '') })\n      .then(({ library }) => setPicked(library.id))\n      .catch((error) => {\n        console.error('[embedpdf] stamp library import failed:', error);\n        setError(t('demo.stampsImportError'));\n      })\n      .finally(() => setBusy(null));\n  };\n\n  /** The library as the PDF it is — title, registry, artwork — for Acrobat\n   *  or another viewer. */\n  const exportPdf = async (libraryId: string, name: string) => {\n    const bytes = await stamp.exportLibrary(libraryId).catch(() => null);\n    if (bytes) saveFile(bytes, `${name || 'stamps'}.pdf`, 'application/pdf');\n  };\n\n  // A removed library falls back to \"All\"; the picker never names a ghost.\n  // One library needs no picker: it is simply the selection (so its export\n  // button is reachable).\n  const selectedId =\n    libraries.length === 1\n      ? libraries[0].id\n      : libraries.some((library) => library.id === picked)\n        ? picked\n        : ALL;\n  const selected =\n    selectedId === ALL ? null : (libraries.find((library) => library.id === selectedId) ?? null);\n  const shown =\n    selectedId === ALL ? assets : assets.filter((asset) => asset.libraryId === selectedId);\n  const isDefault = (libraryId: string) => libraryId === DEFAULT_LIBRARY_ID;\n\n  return (\n    <div className=\"flex min-h-0 flex-1 flex-col\">\n      {libraries.length > 0 && (\n        <div className=\"border-border-subtle flex items-center gap-1 border-b p-2\">\n          {libraries.length > 1 ? (\n            <select\n              value={selectedId}\n              onChange={(event) => setPicked(event.target.value)}\n              aria-label={t('panels.stamps')}\n              className=\"border-border bg-surface text-fg min-w-0 flex-1 rounded border px-2 py-1.5 text-sm\"\n            >\n              <option value={ALL}>{t('demo.stampsAll')}</option>\n              {libraries.map((library) => (\n                <option key={library.id} value={library.id}>\n                  {library.name}\n                </option>\n              ))}\n            </select>\n          ) : (\n            <span className=\"text-fg-muted min-w-0 flex-1 truncate px-1 text-xs font-semibold uppercase tracking-wide\">\n              {libraries[0].name}\n            </span>\n          )}\n          {selected && (\n            <>\n              <button\n                type=\"button\"\n                onClick={() => exportPdf(selected.id, selected.name)}\n                title={t('demo.stampsExportLibrary')}\n                className=\"text-fg-muted hover:text-fg grid h-7 w-7 shrink-0 place-items-center rounded\"\n              >\n                <Icon name=\"download\" size={14} />\n              </button>\n              {!isDefault(selected.id) && (\n                <button\n                  type=\"button\"\n                  onClick={() => void stamp.deleteLibrary(selected.id)}\n                  title={t('demo.stampsRemoveLibrary')}\n                  className=\"text-fg-muted hover:text-fg grid h-7 w-7 shrink-0 place-items-center rounded\"\n                >\n                  <Icon name=\"trash\" size={14} />\n                </button>\n              )}\n            </>\n          )}\n        </div>\n      )}\n\n      <div className=\"min-h-0 flex-1 overflow-y-auto p-3\">\n        {busy === 'loading' && shown.length === 0 ? (\n          <div className=\"flex flex-col items-center gap-3 px-4 py-10 text-center\">\n            <div className=\"border-border-subtle border-t-accent h-6 w-6 animate-spin rounded-full border-2\" />\n            <p className=\"text-fg-muted text-sm\">{t('demo.stampsLoading')}</p>\n          </div>\n        ) : shown.length === 0 ? (\n          <div className=\"flex flex-col items-center gap-3 px-4 py-10 text-center\">\n            <Icon name=\"rubberStamp\" size={32} className=\"text-fg-muted\" />\n            <p className=\"text-fg-muted text-sm\">{t('demo.stampsEmpty')}</p>\n          </div>\n        ) : (\n          <ul className=\"grid grid-cols-2 gap-3\">\n            {shown.map((asset) => (\n              <li key={asset.id} className=\"group relative\">\n                <StampAssetCell\n                  asset={asset}\n                  armed={armedId === asset.id}\n                  onArm={() => arm(asset)}\n                />\n                {!isDefault(asset.libraryId) && (\n                  <button\n                    type=\"button\"\n                    onClick={() => void stamp.deleteAsset(asset.id)}\n                    title={t('demo.stampsRemoveStamp')}\n                    className=\"bg-surface border-border text-fg-muted hover:text-fg absolute end-1 top-1 grid h-5 w-5 place-items-center rounded-full border opacity-0 shadow-sm focus:opacity-100 group-hover:opacity-100\"\n                  >\n                    <Icon name=\"x\" size={12} />\n                  </button>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n\n      {(error || armedId) && (\n        <div\n          className={`border-border-subtle shrink-0 border-t px-3 py-2 text-xs ${\n            error ? 'text-red-600' : 'text-fg-muted'\n          }`}\n        >\n          {error ?? t('demo.stampsArmedHint')}\n        </div>\n      )}\n\n      <div className=\"border-border-subtle shrink-0 border-t p-3\">\n        <button\n          type=\"button\"\n          disabled={busy != null}\n          onClick={() => fileRef.current?.click()}\n          title={t('demo.stampsImportHint')}\n          className=\"border-border text-fg hover:bg-hover flex w-full items-center justify-center gap-2 rounded-md border px-3 py-1.5 text-sm disabled:opacity-40\"\n        >\n          <Icon name=\"rubberStampPlus\" size={16} />\n          {busy === 'importing' ? t('demo.stampsImporting') : t('demo.stampsImport')}\n        </button>\n        <input\n          ref={fileRef}\n          type=\"file\"\n          accept=\"application/pdf\"\n          className=\"hidden\"\n          onChange={(event) => {\n            const file = event.currentTarget.files?.[0];\n            event.currentTarget.value = ''; // allow re-picking the same file\n            if (file) importPdf(file);\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n\n/** One grid cell: the plugin's cached preview through the object-URL hook\n *  (the DOM resource's lifetime belongs to the framework layer, not the\n *  store). Image only — the artwork is the label; the label is the\n *  tooltip for the curious. */\nfunction StampAssetCell({\n  asset,\n  armed,\n  onArm,\n}: {\n  asset: StampAsset;\n  armed: boolean;\n  onArm: () => void;\n}) {\n  const url = useStampAssetPreviewUrl(asset.id);\n  return (\n    <button\n      type=\"button\"\n      onClick={onArm}\n      title={asset.label}\n      aria-pressed={armed}\n      className={`flex aspect-square w-full items-center justify-center rounded-md border p-2 ${\n        armed\n          ? 'border-accent bg-accent-light ring-accent ring-2'\n          : 'border-border-subtle hover:border-border hover:bg-hover'\n      }`}\n    >\n      {url ? (\n        <img src={url} alt={asset.label} className=\"max-h-full max-w-full object-contain\" />\n      ) : (\n        <span className=\"text-fg truncate text-sm\">{asset.label}</span>\n      )}\n    </button>\n  );\n}\n"],"mappings":"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"}

package/dist/theme-Be0OZokZ.js

@@ -0,0 +1,97 @@
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/theme.tsx
+/**
+* Light/dark theme — one class, and the CSS variables in styles.css do the
+* rest (both toolbars, sidebars, popovers, and the canvas re-theme from it).
+* The mode follows the embedder's `theme` preference while the viewer runs;
+* `'system'` follows the OS setting, and switches when the user changes it.
+* The class lands on <html> by default; a delivery that must not touch the
+* page (the <embedpdf-viewer> shadow root) passes `target` and the class stays
+* inside its own subtree. The theme's tokens are CSS variables too: a delivery
+* applies {@link themeTokenCss} on the viewer's root.
+*/
+/**
+* The viewer's look, by name: each is the CSS variable `--epdf-<name>`, which the chrome's
+* stylesheet declares with a default for each mode and mixes every other shade from.
+*/
+const THEME_TOKENS = [
+	"accent",
+	"background",
+	"surface",
+	"surface-raised",
+	"text",
+	"text-muted",
+	"border",
+	"hover",
+	"canvas",
+	"radius",
+	"font"
+];
+/** Normalize the shorthand — deliveries use this to read one shape. */
+const themeConfigOf = (theme) => typeof theme === "string" ? { preference: theme } : theme ?? {};
+const isThemeToken = (name) => THEME_TOKENS.includes(name);
+/** The declarations of `tokens` that are tokens with a CSS value; each other entry warns. */
+function tokenDeclarations(tokens) {
+	return Object.entries(tokens).filter(([name, value]) => {
+		if (value === void 0) return false;
+		if (!isThemeToken(name)) {
+			console.warn(`[embedpdf] theme: "${name}" isn't a token, ignored`);
+			return false;
+		}
+		if (typeof value !== "string" || /[{};]/.test(value)) {
+			console.warn(`[embedpdf] theme: ignoring the invalid value of "${name}"`);
+			return false;
+		}
+		return true;
+	}).map(([name, value]) => `--epdf-${name}:var(--embedpdf-host-${name},${value});`).join("");
+}
+/**
+* The CSS that applies a theme's tokens on the viewer's root (`root`, a selector), for a sheet
+* after the chrome's: its tokens win over the defaults in both modes by coming later, and its
+* dark ones win in dark by naming the class too. A value is a default only: the page's own
+* `--epdf-*` variable still wins, read on the host as the chrome's stylesheet does. Empty when
+* the theme sets no token.
+*/
+function themeTokenCss(theme, root) {
+	const { accent, tokens, dark } = themeConfigOf(theme);
+	const both = tokenDeclarations({
+		...accent === void 0 ? null : { accent },
+		...tokens
+	});
+	const darkOnly = dark ? tokenDeclarations(dark) : "";
+	return (both ? `${root}{${both}}` : "") + (darkOnly ? `${root}.dark{${darkOnly}}` : "");
+}
+const ThemeCtx = createContext(null);
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+const systemMode = () => typeof window !== "undefined" && window.matchMedia?.(DARK_QUERY).matches ? "dark" : "light";
+function ThemeProvider({ children, preference = "system", target }) {
+	const [system, setSystem] = useState(systemMode);
+	useEffect(() => {
+		if (preference !== "system" || typeof window === "undefined" || !window.matchMedia) return;
+		const query = window.matchMedia(DARK_QUERY);
+		const follow = () => setSystem(query.matches ? "dark" : "light");
+		follow();
+		query.addEventListener("change", follow);
+		return () => query.removeEventListener("change", follow);
+	}, [preference]);
+	const mode = preference === "system" ? system : preference;
+	useLayoutEffect(() => {
+		(target ?? document.documentElement).classList.toggle("dark", mode === "dark");
+	}, [mode, target]);
+	const value = useMemo(() => ({ mode }), [mode]);
+	return /* @__PURE__ */ jsx(ThemeCtx.Provider, {
+		value,
+		children
+	});
+}
+/** The mode the viewer shows now. */
+function useTheme() {
+	const ctx = useContext(ThemeCtx);
+	if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
+	return ctx;
+}
+//#endregion
+export { useTheme as a, themeTokenCss as i, ThemeProvider as n, themeConfigOf as r, THEME_TOKENS as t };
+
+//# sourceMappingURL=theme-Be0OZokZ.js.map

package/dist/theme-Be0OZokZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-Be0OZokZ.js","names":[],"sources":["../src/ui/theme.tsx"],"sourcesContent":["/**\n * Light/dark theme — one class, and the CSS variables in styles.css do the\n * rest (both toolbars, sidebars, popovers, and the canvas re-theme from it).\n * The mode follows the embedder's `theme` preference while the viewer runs;\n * `'system'` follows the OS setting, and switches when the user changes it.\n * The class lands on <html> by default; a delivery that must not touch the\n * page (the <embedpdf-viewer> shadow root) passes `target` and the class stays\n * inside its own subtree. The theme's tokens are CSS variables too: a delivery\n * applies {@link themeTokenCss} on the viewer's root.\n */\nimport { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';\n\nexport type ThemeMode = 'light' | 'dark';\nexport type ThemePreference = ThemeMode | 'system';\n\n// ── tokens ───────────────────────────────────────────────────────────────────\n\n/**\n * The viewer's look, by name: each is the CSS variable `--epdf-<name>`, which the chrome's\n * stylesheet declares with a default for each mode and mixes every other shade from.\n */\nexport const THEME_TOKENS = [\n  'accent',\n  'background',\n  'surface',\n  'surface-raised',\n  'text',\n  'text-muted',\n  'border',\n  'hover',\n  'canvas',\n  'radius',\n  'font',\n] as const;\n\n/** A token's name: `surface` is the CSS variable `--epdf-surface`. */\nexport type ThemeToken = (typeof THEME_TOKENS)[number];\n\n/** Token values by name, each a CSS value: `{ surface: '#fbfaf7', radius: '2px' }`. */\nexport type ThemeTokens = { readonly [Name in ThemeToken]?: string };\n\nexport interface ThemeConfig {\n  /** 'system' (default) follows the OS. */\n  preference?: ThemePreference;\n  /** The accent color in both modes: the same as `tokens.accent`, which wins when both are set. */\n  accent?: string;\n  /** Token values for both modes, over the viewer's defaults. */\n  tokens?: ThemeTokens;\n  /** Token values for dark mode only, over `tokens`. */\n  dark?: ThemeTokens;\n}\n\n/** Normalize the shorthand — deliveries use this to read one shape. */\nexport const themeConfigOf = (theme: ThemePreference | ThemeConfig | undefined): ThemeConfig =>\n  typeof theme === 'string' ? { preference: theme } : (theme ?? {});\n\nconst isThemeToken = (name: string): name is ThemeToken =>\n  (THEME_TOKENS as readonly string[]).includes(name);\n\n/** The declarations of `tokens` that are tokens with a CSS value; each other entry warns. */\nfunction tokenDeclarations(tokens: ThemeTokens): string {\n  return Object.entries(tokens)\n    .filter(([name, value]) => {\n      if (value === undefined) return false;\n      if (!isThemeToken(name)) {\n        console.warn(`[embedpdf] theme: \"${name}\" isn't a token, ignored`);\n        return false;\n      }\n      if (typeof value !== 'string' || /[{};]/.test(value)) {\n        console.warn(`[embedpdf] theme: ignoring the invalid value of \"${name}\"`);\n        return false;\n      }\n      return true;\n    })\n    .map(([name, value]) => `--epdf-${name}:var(--embedpdf-host-${name},${value});`)\n    .join('');\n}\n\n/**\n * The CSS that applies a theme's tokens on the viewer's root (`root`, a selector), for a sheet\n * after the chrome's: its tokens win over the defaults in both modes by coming later, and its\n * dark ones win in dark by naming the class too. A value is a default only: the page's own\n * `--epdf-*` variable still wins, read on the host as the chrome's stylesheet does. Empty when\n * the theme sets no token.\n */\nexport function themeTokenCss(theme: ThemePreference | ThemeConfig | undefined, root: string) {\n  const { accent, tokens, dark } = themeConfigOf(theme);\n  const both = tokenDeclarations({ ...(accent === undefined ? null : { accent }), ...tokens });\n  const darkOnly = dark ? tokenDeclarations(dark) : '';\n  return (both ? `${root}{${both}}` : '') + (darkOnly ? `${root}.dark{${darkOnly}}` : '');\n}\n\nconst ThemeCtx = createContext<{ mode: ThemeMode } | null>(null);\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\n\nconst systemMode = (): ThemeMode =>\n  typeof window !== 'undefined' && window.matchMedia?.(DARK_QUERY).matches ? 'dark' : 'light';\n\nexport function ThemeProvider({\n  children,\n  preference = 'system',\n  target,\n}: {\n  children: React.ReactNode;\n  /** The mode, or 'system' (default) to follow the OS setting. */\n  preference?: ThemePreference;\n  /** Where the `.dark` class goes. Default: document.documentElement. */\n  target?: HTMLElement | null;\n}) {\n  const [system, setSystem] = useState<ThemeMode>(systemMode);\n  useEffect(() => {\n    if (preference !== 'system' || typeof window === 'undefined' || !window.matchMedia) return;\n    const query = window.matchMedia(DARK_QUERY);\n    const follow = () => setSystem(query.matches ? 'dark' : 'light');\n    follow();\n    query.addEventListener('change', follow);\n    return () => query.removeEventListener('change', follow);\n  }, [preference]);\n  const mode = preference === 'system' ? system : preference;\n  // Before the paint, so the viewer never shows a frame in the other mode.\n  useLayoutEffect(() => {\n    (target ?? document.documentElement).classList.toggle('dark', mode === 'dark');\n  }, [mode, target]);\n  const value = useMemo(() => ({ mode }), [mode]);\n  return <ThemeCtx.Provider value={value}>{children}</ThemeCtx.Provider>;\n}\n\n/** The mode the viewer shows now. */\nexport function useTheme() {\n  const ctx = useContext(ThemeCtx);\n  if (!ctx) throw new Error('useTheme must be used within <ThemeProvider>');\n  return ctx;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;AAoBA,MAAa,iBAAiB,UAC5B,OAAO,UAAU,WAAW,EAAE,YAAY,MAAM,IAAK,SAAS,CAAC;AAEjE,MAAM,gBAAgB,SACnB,aAAmC,SAAS,IAAI;;AAGnD,SAAS,kBAAkB,QAA6B;CACtD,OAAO,OAAO,QAAQ,MAAM,CAAC,CAC1B,QAAQ,CAAC,MAAM,WAAW;EACzB,IAAI,UAAU,KAAA,GAAW,OAAO;EAChC,IAAI,CAAC,aAAa,IAAI,GAAG;GACvB,QAAQ,KAAK,sBAAsB,KAAK,yBAAyB;GACjE,OAAO;EACT;EACA,IAAI,OAAO,UAAU,YAAY,QAAQ,KAAK,KAAK,GAAG;GACpD,QAAQ,KAAK,oDAAoD,KAAK,EAAE;GACxE,OAAO;EACT;EACA,OAAO;CACT,CAAC,CAAC,CACD,KAAK,CAAC,MAAM,WAAW,UAAU,KAAK,uBAAuB,KAAK,GAAG,MAAM,GAAG,CAAC,CAC/E,KAAK,EAAE;AACZ;;;;;;;;AASA,SAAgB,cAAc,OAAkD,MAAc;CAC5F,MAAM,EAAE,QAAQ,QAAQ,SAAS,cAAc,KAAK;CACpD,MAAM,OAAO,kBAAkB;EAAE,GAAI,WAAW,KAAA,IAAY,OAAO,EAAE,OAAO;EAAI,GAAG;CAAO,CAAC;CAC3F,MAAM,WAAW,OAAO,kBAAkB,IAAI,IAAI;CAClD,QAAQ,OAAO,GAAG,KAAK,GAAG,KAAK,KAAK,OAAO,WAAW,GAAG,KAAK,QAAQ,SAAS,KAAK;AACtF;AAEA,MAAM,WAAW,cAA0C,IAAI;AAE/D,MAAM,aAAa;AAEnB,MAAM,mBACJ,OAAO,WAAW,eAAe,OAAO,aAAa,UAAU,CAAC,CAAC,UAAU,SAAS;AAEtF,SAAgB,cAAc,EAC5B,UACA,aAAa,UACb,UAOC;CACD,MAAM,CAAC,QAAQ,aAAa,SAAoB,UAAU;CAC1D,gBAAgB;EACd,IAAI,eAAe,YAAY,OAAO,WAAW,eAAe,CAAC,OAAO,YAAY;EACpF,MAAM,QAAQ,OAAO,WAAW,UAAU;EAC1C,MAAM,eAAe,UAAU,MAAM,UAAU,SAAS,OAAO;EAC/D,OAAO;EACP,MAAM,iBAAiB,UAAU,MAAM;EACvC,aAAa,MAAM,oBAAoB,UAAU,MAAM;CACzD,GAAG,CAAC,UAAU,CAAC;CACf,MAAM,OAAO,eAAe,WAAW,SAAS;CAEhD,sBAAsB;EACpB,CAAC,UAAU,SAAS,gBAAA,CAAiB,UAAU,OAAO,QAAQ,SAAS,MAAM;CAC/E,GAAG,CAAC,MAAM,MAAM,CAAC;CACjB,MAAM,QAAQ,eAAe,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC;CAC9C,OAAO,oBAAC,SAAS,UAAV;EAA0B;EAAQ;CAA4B,CAAA;AACvE;;AAGA,SAAgB,WAAW;CACzB,MAAM,MAAM,WAAW,QAAQ;CAC/B,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,8CAA8C;CACxE,OAAO;AACT"}

package/dist/theme-FR26JI3r.cjs

@@ -0,0 +1,126 @@
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui/theme.tsx
+/**
+* Light/dark theme — one class, and the CSS variables in styles.css do the
+* rest (both toolbars, sidebars, popovers, and the canvas re-theme from it).
+* The mode follows the embedder's `theme` preference while the viewer runs;
+* `'system'` follows the OS setting, and switches when the user changes it.
+* The class lands on <html> by default; a delivery that must not touch the
+* page (the <embedpdf-viewer> shadow root) passes `target` and the class stays
+* inside its own subtree. The theme's tokens are CSS variables too: a delivery
+* applies {@link themeTokenCss} on the viewer's root.
+*/
+/**
+* The viewer's look, by name: each is the CSS variable `--epdf-<name>`, which the chrome's
+* stylesheet declares with a default for each mode and mixes every other shade from.
+*/
+const THEME_TOKENS = [
+	"accent",
+	"background",
+	"surface",
+	"surface-raised",
+	"text",
+	"text-muted",
+	"border",
+	"hover",
+	"canvas",
+	"radius",
+	"font"
+];
+/** Normalize the shorthand — deliveries use this to read one shape. */
+const themeConfigOf = (theme) => typeof theme === "string" ? { preference: theme } : theme ?? {};
+const isThemeToken = (name) => THEME_TOKENS.includes(name);
+/** The declarations of `tokens` that are tokens with a CSS value; each other entry warns. */
+function tokenDeclarations(tokens) {
+	return Object.entries(tokens).filter(([name, value]) => {
+		if (value === void 0) return false;
+		if (!isThemeToken(name)) {
+			console.warn(`[embedpdf] theme: "${name}" isn't a token, ignored`);
+			return false;
+		}
+		if (typeof value !== "string" || /[{};]/.test(value)) {
+			console.warn(`[embedpdf] theme: ignoring the invalid value of "${name}"`);
+			return false;
+		}
+		return true;
+	}).map(([name, value]) => `--epdf-${name}:var(--embedpdf-host-${name},${value});`).join("");
+}
+/**
+* The CSS that applies a theme's tokens on the viewer's root (`root`, a selector), for a sheet
+* after the chrome's: its tokens win over the defaults in both modes by coming later, and its
+* dark ones win in dark by naming the class too. A value is a default only: the page's own
+* `--epdf-*` variable still wins, read on the host as the chrome's stylesheet does. Empty when
+* the theme sets no token.
+*/
+function themeTokenCss(theme, root) {
+	const { accent, tokens, dark } = themeConfigOf(theme);
+	const both = tokenDeclarations({
+		...accent === void 0 ? null : { accent },
+		...tokens
+	});
+	const darkOnly = dark ? tokenDeclarations(dark) : "";
+	return (both ? `${root}{${both}}` : "") + (darkOnly ? `${root}.dark{${darkOnly}}` : "");
+}
+const ThemeCtx = (0, react.createContext)(null);
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+const systemMode = () => typeof window !== "undefined" && window.matchMedia?.(DARK_QUERY).matches ? "dark" : "light";
+function ThemeProvider({ children, preference = "system", target }) {
+	const [system, setSystem] = (0, react.useState)(systemMode);
+	(0, react.useEffect)(() => {
+		if (preference !== "system" || typeof window === "undefined" || !window.matchMedia) return;
+		const query = window.matchMedia(DARK_QUERY);
+		const follow = () => setSystem(query.matches ? "dark" : "light");
+		follow();
+		query.addEventListener("change", follow);
+		return () => query.removeEventListener("change", follow);
+	}, [preference]);
+	const mode = preference === "system" ? system : preference;
+	(0, react.useLayoutEffect)(() => {
+		(target ?? document.documentElement).classList.toggle("dark", mode === "dark");
+	}, [mode, target]);
+	const value = (0, react.useMemo)(() => ({ mode }), [mode]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeCtx.Provider, {
+		value,
+		children
+	});
+}
+/** The mode the viewer shows now. */
+function useTheme() {
+	const ctx = (0, react.useContext)(ThemeCtx);
+	if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
+	return ctx;
+}
+//#endregion
+Object.defineProperty(exports, "THEME_TOKENS", {
+	enumerable: true,
+	get: function() {
+		return THEME_TOKENS;
+	}
+});
+Object.defineProperty(exports, "ThemeProvider", {
+	enumerable: true,
+	get: function() {
+		return ThemeProvider;
+	}
+});
+Object.defineProperty(exports, "themeConfigOf", {
+	enumerable: true,
+	get: function() {
+		return themeConfigOf;
+	}
+});
+Object.defineProperty(exports, "themeTokenCss", {
+	enumerable: true,
+	get: function() {
+		return themeTokenCss;
+	}
+});
+Object.defineProperty(exports, "useTheme", {
+	enumerable: true,
+	get: function() {
+		return useTheme;
+	}
+});
+
+//# sourceMappingURL=theme-FR26JI3r.cjs.map

package/dist/theme-FR26JI3r.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-FR26JI3r.cjs","names":[],"sources":["../src/ui/theme.tsx"],"sourcesContent":["/**\n * Light/dark theme — one class, and the CSS variables in styles.css do the\n * rest (both toolbars, sidebars, popovers, and the canvas re-theme from it).\n * The mode follows the embedder's `theme` preference while the viewer runs;\n * `'system'` follows the OS setting, and switches when the user changes it.\n * The class lands on <html> by default; a delivery that must not touch the\n * page (the <embedpdf-viewer> shadow root) passes `target` and the class stays\n * inside its own subtree. The theme's tokens are CSS variables too: a delivery\n * applies {@link themeTokenCss} on the viewer's root.\n */\nimport { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';\n\nexport type ThemeMode = 'light' | 'dark';\nexport type ThemePreference = ThemeMode | 'system';\n\n// ── tokens ───────────────────────────────────────────────────────────────────\n\n/**\n * The viewer's look, by name: each is the CSS variable `--epdf-<name>`, which the chrome's\n * stylesheet declares with a default for each mode and mixes every other shade from.\n */\nexport const THEME_TOKENS = [\n  'accent',\n  'background',\n  'surface',\n  'surface-raised',\n  'text',\n  'text-muted',\n  'border',\n  'hover',\n  'canvas',\n  'radius',\n  'font',\n] as const;\n\n/** A token's name: `surface` is the CSS variable `--epdf-surface`. */\nexport type ThemeToken = (typeof THEME_TOKENS)[number];\n\n/** Token values by name, each a CSS value: `{ surface: '#fbfaf7', radius: '2px' }`. */\nexport type ThemeTokens = { readonly [Name in ThemeToken]?: string };\n\nexport interface ThemeConfig {\n  /** 'system' (default) follows the OS. */\n  preference?: ThemePreference;\n  /** The accent color in both modes: the same as `tokens.accent`, which wins when both are set. */\n  accent?: string;\n  /** Token values for both modes, over the viewer's defaults. */\n  tokens?: ThemeTokens;\n  /** Token values for dark mode only, over `tokens`. */\n  dark?: ThemeTokens;\n}\n\n/** Normalize the shorthand — deliveries use this to read one shape. */\nexport const themeConfigOf = (theme: ThemePreference | ThemeConfig | undefined): ThemeConfig =>\n  typeof theme === 'string' ? { preference: theme } : (theme ?? {});\n\nconst isThemeToken = (name: string): name is ThemeToken =>\n  (THEME_TOKENS as readonly string[]).includes(name);\n\n/** The declarations of `tokens` that are tokens with a CSS value; each other entry warns. */\nfunction tokenDeclarations(tokens: ThemeTokens): string {\n  return Object.entries(tokens)\n    .filter(([name, value]) => {\n      if (value === undefined) return false;\n      if (!isThemeToken(name)) {\n        console.warn(`[embedpdf] theme: \"${name}\" isn't a token, ignored`);\n        return false;\n      }\n      if (typeof value !== 'string' || /[{};]/.test(value)) {\n        console.warn(`[embedpdf] theme: ignoring the invalid value of \"${name}\"`);\n        return false;\n      }\n      return true;\n    })\n    .map(([name, value]) => `--epdf-${name}:var(--embedpdf-host-${name},${value});`)\n    .join('');\n}\n\n/**\n * The CSS that applies a theme's tokens on the viewer's root (`root`, a selector), for a sheet\n * after the chrome's: its tokens win over the defaults in both modes by coming later, and its\n * dark ones win in dark by naming the class too. A value is a default only: the page's own\n * `--epdf-*` variable still wins, read on the host as the chrome's stylesheet does. Empty when\n * the theme sets no token.\n */\nexport function themeTokenCss(theme: ThemePreference | ThemeConfig | undefined, root: string) {\n  const { accent, tokens, dark } = themeConfigOf(theme);\n  const both = tokenDeclarations({ ...(accent === undefined ? null : { accent }), ...tokens });\n  const darkOnly = dark ? tokenDeclarations(dark) : '';\n  return (both ? `${root}{${both}}` : '') + (darkOnly ? `${root}.dark{${darkOnly}}` : '');\n}\n\nconst ThemeCtx = createContext<{ mode: ThemeMode } | null>(null);\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\n\nconst systemMode = (): ThemeMode =>\n  typeof window !== 'undefined' && window.matchMedia?.(DARK_QUERY).matches ? 'dark' : 'light';\n\nexport function ThemeProvider({\n  children,\n  preference = 'system',\n  target,\n}: {\n  children: React.ReactNode;\n  /** The mode, or 'system' (default) to follow the OS setting. */\n  preference?: ThemePreference;\n  /** Where the `.dark` class goes. Default: document.documentElement. */\n  target?: HTMLElement | null;\n}) {\n  const [system, setSystem] = useState<ThemeMode>(systemMode);\n  useEffect(() => {\n    if (preference !== 'system' || typeof window === 'undefined' || !window.matchMedia) return;\n    const query = window.matchMedia(DARK_QUERY);\n    const follow = () => setSystem(query.matches ? 'dark' : 'light');\n    follow();\n    query.addEventListener('change', follow);\n    return () => query.removeEventListener('change', follow);\n  }, [preference]);\n  const mode = preference === 'system' ? system : preference;\n  // Before the paint, so the viewer never shows a frame in the other mode.\n  useLayoutEffect(() => {\n    (target ?? document.documentElement).classList.toggle('dark', mode === 'dark');\n  }, [mode, target]);\n  const value = useMemo(() => ({ mode }), [mode]);\n  return <ThemeCtx.Provider value={value}>{children}</ThemeCtx.Provider>;\n}\n\n/** The mode the viewer shows now. */\nexport function useTheme() {\n  const ctx = useContext(ThemeCtx);\n  if (!ctx) throw new Error('useTheme must be used within <ThemeProvider>');\n  return ctx;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;AAoBA,MAAa,iBAAiB,UAC5B,OAAO,UAAU,WAAW,EAAE,YAAY,MAAM,IAAK,SAAS,CAAC;AAEjE,MAAM,gBAAgB,SACnB,aAAmC,SAAS,IAAI;;AAGnD,SAAS,kBAAkB,QAA6B;CACtD,OAAO,OAAO,QAAQ,MAAM,CAAC,CAC1B,QAAQ,CAAC,MAAM,WAAW;EACzB,IAAI,UAAU,KAAA,GAAW,OAAO;EAChC,IAAI,CAAC,aAAa,IAAI,GAAG;GACvB,QAAQ,KAAK,sBAAsB,KAAK,yBAAyB;GACjE,OAAO;EACT;EACA,IAAI,OAAO,UAAU,YAAY,QAAQ,KAAK,KAAK,GAAG;GACpD,QAAQ,KAAK,oDAAoD,KAAK,EAAE;GACxE,OAAO;EACT;EACA,OAAO;CACT,CAAC,CAAC,CACD,KAAK,CAAC,MAAM,WAAW,UAAU,KAAK,uBAAuB,KAAK,GAAG,MAAM,GAAG,CAAC,CAC/E,KAAK,EAAE;AACZ;;;;;;;;AASA,SAAgB,cAAc,OAAkD,MAAc;CAC5F,MAAM,EAAE,QAAQ,QAAQ,SAAS,cAAc,KAAK;CACpD,MAAM,OAAO,kBAAkB;EAAE,GAAI,WAAW,KAAA,IAAY,OAAO,EAAE,OAAO;EAAI,GAAG;CAAO,CAAC;CAC3F,MAAM,WAAW,OAAO,kBAAkB,IAAI,IAAI;CAClD,QAAQ,OAAO,GAAG,KAAK,GAAG,KAAK,KAAK,OAAO,WAAW,GAAG,KAAK,QAAQ,SAAS,KAAK;AACtF;AAEA,MAAM,YAAA,GAAA,MAAA,cAAA,CAAqD,IAAI;AAE/D,MAAM,aAAa;AAEnB,MAAM,mBACJ,OAAO,WAAW,eAAe,OAAO,aAAa,UAAU,CAAC,CAAC,UAAU,SAAS;AAEtF,SAAgB,cAAc,EAC5B,UACA,aAAa,UACb,UAOC;CACD,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAiC,UAAU;CAC1D,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,eAAe,YAAY,OAAO,WAAW,eAAe,CAAC,OAAO,YAAY;EACpF,MAAM,QAAQ,OAAO,WAAW,UAAU;EAC1C,MAAM,eAAe,UAAU,MAAM,UAAU,SAAS,OAAO;EAC/D,OAAO;EACP,MAAM,iBAAiB,UAAU,MAAM;EACvC,aAAa,MAAM,oBAAoB,UAAU,MAAM;CACzD,GAAG,CAAC,UAAU,CAAC;CACf,MAAM,OAAO,eAAe,WAAW,SAAS;CAEhD,CAAA,GAAA,MAAA,gBAAA,OAAsB;EACpB,CAAC,UAAU,SAAS,gBAAA,CAAiB,UAAU,OAAO,QAAQ,SAAS,MAAM;CAC/E,GAAG,CAAC,MAAM,MAAM,CAAC;CACjB,MAAM,SAAA,GAAA,MAAA,QAAA,QAAuB,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC;CAC9C,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAS,UAAV;EAA0B;EAAQ;CAA4B,CAAA;AACvE;;AAGA,SAAgB,WAAW;CACzB,MAAM,OAAA,GAAA,MAAA,WAAA,CAAiB,QAAQ;CAC/B,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,8CAA8C;CACxE,OAAO;AACT"}

package/dist/{toolbar-z9od3tKl.js → toolbar-DF361xWY.js}

@@ -1,5 +1,5 @@
-import { _ as useStampSettings, d as useLayoutEnv, n as Icon, p as useMenu } from "./icons-BrK5iVL8.js";
-import { r as Sheet } from "./sheet-R6XDgyEf.js";
+import { _ as useStampSettings, d as useLayoutEnv, n as Icon, p as useMenu } from "./icons-7dB0Y1ct.js";
+import { r as Sheet } from "./sheet-DyjKfAq0.js";
 import { a as quickStampAssetIdOf, i as ensureDefaultLibrary, n as restoreStampLibrariesOnce, o as resolveStampsLocale, r as DEFAULT_LIBRARY_ID } from "./stamp-store-WuF-L3Jj.js";
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useReducer, useRef, useState } from "react";
 import { useDocumentId, useKernelValue, useOptionalCapability, useOptionalSelector, useSelector } from "@embedpdf/react/runtime";
@@ -42,7 +42,7 @@ const FEATURE_PARTS = {
 	text: ["selection", "copy"],
 	search: [],
 	thumbnails: [],
-	outline: [],
+	outline: ["editing"],
 	documents: [
 		"open",
 		"download",
@@ -61,7 +61,8 @@ const READ_ONLY_FEATURES = [
 	"redaction",
 	"measurement",
 	"pages",
-	"attachments.adding"
+	"attachments.adding",
+	"outline.editing"
 ];
 const isInside = (feature, outer) => feature === outer || feature.startsWith(`${outer}.`);
 /**
@@ -247,7 +248,7 @@ function PageNumber() {
 	/** Whether the field closed from the keyboard, so focus goes back to the number. */
 	const refocus = useRef(false);
 	const editing = draft !== null;
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (editing) {
 			field.current?.focus();
 			field.current?.select();
@@ -1561,4 +1562,4 @@ function AppToolbar({ bar, orientation = "horizontal", className }) {
 //#endregion
 export { MenuAnchor as a, SlottedEdgesProvider as c, TOOLBAR_ITEM_CONTEXT_ATTRIBUTES as d, BarEdgeProvider as f, sameByHand as g, disabledSettingsOf as h, buttonPart as i, createSlottedEdges as l, byHandSettingsOf as m, CommandButton as n, MenuItem as o, bothAllow as p, buttonClass as r, MenuPopover as s, AppToolbar as t, useSlottedEdges as u };
 
-//# sourceMappingURL=toolbar-z9od3tKl.js.map
+//# sourceMappingURL=toolbar-DF361xWY.js.map