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

package/dist/labels-C6_i87Oj.js

@@ -0,0 +1,16 @@
+import { useT } from "@embedpdf/react/i18n";
+//#region src/ui/labels.ts
+/**
+* The labels the libraries give in English with a translation key beside them: the annotation
+* kinds' style properties and their options, and the form plugin's field settings. The viewer
+* shows each in its language, and the English where a language has no string for the key.
+*/
+/** Reads a {@link Labelled} in the viewer's language. */
+function useLabel() {
+	const t = useT();
+	return (item) => t(item.labelKey, { fallback: item.label });
+}
+//#endregion
+export { useLabel as t };
+
+//# sourceMappingURL=labels-C6_i87Oj.js.map

package/dist/labels-C6_i87Oj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels-C6_i87Oj.js","names":[],"sources":["../src/ui/labels.ts"],"sourcesContent":["/**\n * The labels the libraries give in English with a translation key beside them: the annotation\n * kinds' style properties and their options, and the form plugin's field settings. The viewer\n * shows each in its language, and the English where a language has no string for the key.\n */\nimport { useT } from '@embedpdf/react/i18n';\n\n/** A label as the libraries give it: the English, and its key. */\nexport interface Labelled {\n  readonly label: string;\n  readonly labelKey: string;\n}\n\n/** Reads a {@link Labelled} in the viewer's language. */\nexport function useLabel(): (item: Labelled) => string {\n  const t = useT();\n  return (item) => t(item.labelKey, { fallback: item.label });\n}\n"],"mappings":";;;;;;;;AAcA,SAAgB,WAAuC;CACrD,MAAM,IAAI,KAAK;CACf,QAAQ,SAAS,EAAE,KAAK,UAAU,EAAE,UAAU,KAAK,MAAM,CAAC;AAC5D"}

package/dist/link-editor-CSjqPnj1.cjs

@@ -0,0 +1,125 @@
+const require_icons = require("./icons-x0Tc05bs.cjs");
+let react = require("react");
+let _embedpdf_react_runtime = require("@embedpdf/react/runtime");
+let _embedpdf_react_annotation = require("@embedpdf/react/annotation");
+let _embedpdf_react_i18n = require("@embedpdf/react/i18n");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui/link-editor.tsx
+/**
+* The link editor popover. It rides the same selection anchor as the action
+* strip (`<AnnotationMenu>` solves where), opening from the strip's link icon
+* (`annotation:link` toggles the `link-editor` shell surface) and rendering in
+* place of the strip while open — one anchored card at a time.
+*
+* Reads the selection's current target from selection props (the `linkOf`
+* lens — parents derive from their committed child annotations) and writes
+* through the one `selection.updateLink(target)` path; the plugin's reconciler
+* materializes/retargets the attached children. Links are a verb on the
+* selection, not a style — which is why this is a popover, not a sidebar
+* section.
+*/
+function ModeToggle({ active, title, onClick, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		title,
+		onClick,
+		className: `rounded border px-2.5 py-1 text-xs font-medium transition-colors ${active ? "border-accent bg-accent text-on-accent" : "border-border bg-surface text-fg hover:bg-hover"}`,
+		children
+	});
+}
+function LinkEditorCard({ onClose }) {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const kernel = (0, _embedpdf_react_runtime.useKernel)();
+	const anno = (0, _embedpdf_react_annotation.useAnnotation)();
+	const value = (0, _embedpdf_react_annotation.useAnnotationProperties)().values.link ?? null;
+	const [mode, setMode] = (0, react.useState)(value?.kind === "goto" ? "page" : "uri");
+	const [uri, setUri] = (0, react.useState)(value?.kind === "uri" ? value.uri : "");
+	const [pageNo, setPageNo] = (0, react.useState)("1");
+	const apply = () => {
+		if (mode === "uri") {
+			const trimmed = uri.trim();
+			if (!trimmed) return;
+			anno.selection.updateLink({
+				kind: "uri",
+				uri: trimmed
+			});
+			onClose();
+			return;
+		}
+		const page = kernel.documents.getPage(Math.max(0, Number(pageNo) - 1));
+		if (!page) return;
+		anno.selection.updateLink({
+			kind: "goto",
+			destination: {
+				kind: "fit",
+				page: page.ref
+			}
+		});
+		onClose();
+	};
+	const inputCls = "border-border bg-surface text-fg focus:border-accent w-full rounded border px-2.5 py-1.5 text-sm outline-none";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-border bg-surface w-64 rounded-lg border p-3 shadow-lg",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-2 flex items-center justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-fg text-sm font-semibold",
+					children: t("commands.annotate.link")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: onClose,
+					"aria-label": t("panel.close"),
+					title: t("panel.close"),
+					className: "text-fg-muted hover:bg-hover grid h-6 w-6 place-items-center rounded",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+						name: "x",
+						size: 14
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-2 flex gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModeToggle, {
+					title: t("linkEditor.toUrl"),
+					active: mode === "uri",
+					onClick: () => setMode("uri"),
+					children: t("linkEditor.url")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModeToggle, {
+					title: t("linkEditor.toPage"),
+					active: mode === "page",
+					onClick: () => setMode("page"),
+					children: t("linkEditor.page")
+				})]
+			}),
+			mode === "uri" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "url",
+				className: inputCls,
+				placeholder: t("linkEditor.urlPlaceholder"),
+				autoFocus: true,
+				value: uri,
+				onChange: (event) => setUri(event.target.value),
+				onKeyDown: (event) => event.key === "Enter" && apply()
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "number",
+				min: 1,
+				className: inputCls,
+				placeholder: t("linkEditor.pagePlaceholder"),
+				autoFocus: true,
+				value: pageNo,
+				onChange: (event) => setPageNo(event.target.value),
+				onKeyDown: (event) => event.key === "Enter" && apply()
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "bg-accent text-on-accent mt-2.5 w-full rounded px-2 py-1.5 text-sm font-medium",
+				onClick: apply,
+				children: value == null ? t("linkEditor.add") : t("linkEditor.update")
+			})
+		]
+	});
+}
+//#endregion
+exports.LinkEditorCard = LinkEditorCard;
+
+//# sourceMappingURL=link-editor-CSjqPnj1.cjs.map

package/dist/link-editor-CSjqPnj1.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-editor-CSjqPnj1.cjs","names":["Icon"],"sources":["../src/ui/link-editor.tsx"],"sourcesContent":["/**\n * The link editor popover. It rides the same selection anchor as the action\n * strip (`<AnnotationMenu>` solves where), opening from the strip's link icon\n * (`annotation:link` toggles the `link-editor` shell surface) and rendering in\n * place of the strip while open — one anchored card at a time.\n *\n * Reads the selection's current target from selection props (the `linkOf`\n * lens — parents derive from their committed child annotations) and writes\n * through the one `selection.updateLink(target)` path; the plugin's reconciler\n * materializes/retargets the attached children. Links are a verb on the\n * selection, not a style — which is why this is a popover, not a sidebar\n * section.\n */\nimport { useState, type ReactNode } from 'react';\nimport { useAnnotation, useAnnotationProperties } from '@embedpdf/react/annotation';\nimport type { PdfLinkTarget } from '@embedpdf/react/link';\nimport { useKernel } from '@embedpdf/react/runtime';\nimport { useT } from '@embedpdf/react/i18n';\nimport { Icon } from './icons';\n\nfunction ModeToggle({\n  active,\n  title,\n  onClick,\n  children,\n}: {\n  active: boolean;\n  title: string;\n  onClick: () => void;\n  children: ReactNode;\n}) {\n  return (\n    <button\n      type=\"button\"\n      title={title}\n      onClick={onClick}\n      className={`rounded border px-2.5 py-1 text-xs font-medium transition-colors ${\n        active\n          ? 'border-accent bg-accent text-on-accent'\n          : 'border-border bg-surface text-fg hover:bg-hover'\n      }`}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function LinkEditorCard({ onClose }: { onClose: () => void }) {\n  const t = useT();\n  const kernel = useKernel();\n  const anno = useAnnotation();\n  const props = useAnnotationProperties();\n  const value = (props.values.link ?? null) as PdfLinkTarget | null;\n  const [mode, setMode] = useState<'uri' | 'page'>(value?.kind === 'goto' ? 'page' : 'uri');\n  const [uri, setUri] = useState(value?.kind === 'uri' ? value.uri : '');\n  const [pageNo, setPageNo] = useState('1');\n\n  const apply = () => {\n    if (mode === 'uri') {\n      const trimmed = uri.trim();\n      if (!trimmed) return;\n      anno.selection.updateLink({ kind: 'uri', uri: trimmed });\n      onClose();\n      return;\n    }\n    // Page number (1-based) → the page's object number (stable across moves).\n    const page = kernel.documents.getPage(Math.max(0, Number(pageNo) - 1));\n    if (!page) return;\n    anno.selection.updateLink({ kind: 'goto', destination: { kind: 'fit', page: page.ref } });\n    onClose();\n  };\n\n  const inputCls =\n    'border-border bg-surface text-fg focus:border-accent w-full rounded border px-2.5 py-1.5 text-sm outline-none';\n  return (\n    <div className=\"border-border bg-surface w-64 rounded-lg border p-3 shadow-lg\">\n      <div className=\"mb-2 flex items-center justify-between\">\n        <span className=\"text-fg text-sm font-semibold\">{t('commands.annotate.link')}</span>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          aria-label={t('panel.close')}\n          title={t('panel.close')}\n          className=\"text-fg-muted hover:bg-hover grid h-6 w-6 place-items-center rounded\"\n        >\n          <Icon name=\"x\" size={14} />\n        </button>\n      </div>\n      <div className=\"mb-2 flex gap-1.5\">\n        <ModeToggle\n          title={t('linkEditor.toUrl')}\n          active={mode === 'uri'}\n          onClick={() => setMode('uri')}\n        >\n          {t('linkEditor.url')}\n        </ModeToggle>\n        <ModeToggle\n          title={t('linkEditor.toPage')}\n          active={mode === 'page'}\n          onClick={() => setMode('page')}\n        >\n          {t('linkEditor.page')}\n        </ModeToggle>\n      </div>\n      {mode === 'uri' ? (\n        <input\n          type=\"url\"\n          className={inputCls}\n          placeholder={t('linkEditor.urlPlaceholder')}\n          autoFocus\n          value={uri}\n          onChange={(event) => setUri(event.target.value)}\n          onKeyDown={(event) => event.key === 'Enter' && apply()}\n        />\n      ) : (\n        <input\n          type=\"number\"\n          min={1}\n          className={inputCls}\n          placeholder={t('linkEditor.pagePlaceholder')}\n          autoFocus\n          value={pageNo}\n          onChange={(event) => setPageNo(event.target.value)}\n          onKeyDown={(event) => event.key === 'Enter' && apply()}\n        />\n      )}\n      <button\n        type=\"button\"\n        className=\"bg-accent text-on-accent mt-2.5 w-full rounded px-2 py-1.5 text-sm font-medium\"\n        onClick={apply}\n      >\n        {value == null ? t('linkEditor.add') : t('linkEditor.update')}\n      </button>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/link-editor-SxM1nnJU.js

@@ -0,0 +1,125 @@
+import { n as Icon } from "./icons-BrK5iVL8.js";
+import { useState } from "react";
+import { useKernel } from "@embedpdf/react/runtime";
+import { useAnnotation, useAnnotationProperties } from "@embedpdf/react/annotation";
+import { useT } from "@embedpdf/react/i18n";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/link-editor.tsx
+/**
+* The link editor popover. It rides the same selection anchor as the action
+* strip (`<AnnotationMenu>` solves where), opening from the strip's link icon
+* (`annotation:link` toggles the `link-editor` shell surface) and rendering in
+* place of the strip while open — one anchored card at a time.
+*
+* Reads the selection's current target from selection props (the `linkOf`
+* lens — parents derive from their committed child annotations) and writes
+* through the one `selection.updateLink(target)` path; the plugin's reconciler
+* materializes/retargets the attached children. Links are a verb on the
+* selection, not a style — which is why this is a popover, not a sidebar
+* section.
+*/
+function ModeToggle({ active, title, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title,
+		onClick,
+		className: `rounded border px-2.5 py-1 text-xs font-medium transition-colors ${active ? "border-accent bg-accent text-on-accent" : "border-border bg-surface text-fg hover:bg-hover"}`,
+		children
+	});
+}
+function LinkEditorCard({ onClose }) {
+	const t = useT();
+	const kernel = useKernel();
+	const anno = useAnnotation();
+	const value = useAnnotationProperties().values.link ?? null;
+	const [mode, setMode] = useState(value?.kind === "goto" ? "page" : "uri");
+	const [uri, setUri] = useState(value?.kind === "uri" ? value.uri : "");
+	const [pageNo, setPageNo] = useState("1");
+	const apply = () => {
+		if (mode === "uri") {
+			const trimmed = uri.trim();
+			if (!trimmed) return;
+			anno.selection.updateLink({
+				kind: "uri",
+				uri: trimmed
+			});
+			onClose();
+			return;
+		}
+		const page = kernel.documents.getPage(Math.max(0, Number(pageNo) - 1));
+		if (!page) return;
+		anno.selection.updateLink({
+			kind: "goto",
+			destination: {
+				kind: "fit",
+				page: page.ref
+			}
+		});
+		onClose();
+	};
+	const inputCls = "border-border bg-surface text-fg focus:border-accent w-full rounded border px-2.5 py-1.5 text-sm outline-none";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-border bg-surface w-64 rounded-lg border p-3 shadow-lg",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-fg text-sm font-semibold",
+					children: t("commands.annotate.link")
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onClose,
+					"aria-label": t("panel.close"),
+					title: t("panel.close"),
+					className: "text-fg-muted hover:bg-hover grid h-6 w-6 place-items-center rounded",
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "x",
+						size: 14
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex gap-1.5",
+				children: [/* @__PURE__ */ jsx(ModeToggle, {
+					title: t("linkEditor.toUrl"),
+					active: mode === "uri",
+					onClick: () => setMode("uri"),
+					children: t("linkEditor.url")
+				}), /* @__PURE__ */ jsx(ModeToggle, {
+					title: t("linkEditor.toPage"),
+					active: mode === "page",
+					onClick: () => setMode("page"),
+					children: t("linkEditor.page")
+				})]
+			}),
+			mode === "uri" ? /* @__PURE__ */ jsx("input", {
+				type: "url",
+				className: inputCls,
+				placeholder: t("linkEditor.urlPlaceholder"),
+				autoFocus: true,
+				value: uri,
+				onChange: (event) => setUri(event.target.value),
+				onKeyDown: (event) => event.key === "Enter" && apply()
+			}) : /* @__PURE__ */ jsx("input", {
+				type: "number",
+				min: 1,
+				className: inputCls,
+				placeholder: t("linkEditor.pagePlaceholder"),
+				autoFocus: true,
+				value: pageNo,
+				onChange: (event) => setPageNo(event.target.value),
+				onKeyDown: (event) => event.key === "Enter" && apply()
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "bg-accent text-on-accent mt-2.5 w-full rounded px-2 py-1.5 text-sm font-medium",
+				onClick: apply,
+				children: value == null ? t("linkEditor.add") : t("linkEditor.update")
+			})
+		]
+	});
+}
+//#endregion
+export { LinkEditorCard };
+
+//# sourceMappingURL=link-editor-SxM1nnJU.js.map

package/dist/link-editor-SxM1nnJU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-editor-SxM1nnJU.js","names":[],"sources":["../src/ui/link-editor.tsx"],"sourcesContent":["/**\n * The link editor popover. It rides the same selection anchor as the action\n * strip (`<AnnotationMenu>` solves where), opening from the strip's link icon\n * (`annotation:link` toggles the `link-editor` shell surface) and rendering in\n * place of the strip while open — one anchored card at a time.\n *\n * Reads the selection's current target from selection props (the `linkOf`\n * lens — parents derive from their committed child annotations) and writes\n * through the one `selection.updateLink(target)` path; the plugin's reconciler\n * materializes/retargets the attached children. Links are a verb on the\n * selection, not a style — which is why this is a popover, not a sidebar\n * section.\n */\nimport { useState, type ReactNode } from 'react';\nimport { useAnnotation, useAnnotationProperties } from '@embedpdf/react/annotation';\nimport type { PdfLinkTarget } from '@embedpdf/react/link';\nimport { useKernel } from '@embedpdf/react/runtime';\nimport { useT } from '@embedpdf/react/i18n';\nimport { Icon } from './icons';\n\nfunction ModeToggle({\n  active,\n  title,\n  onClick,\n  children,\n}: {\n  active: boolean;\n  title: string;\n  onClick: () => void;\n  children: ReactNode;\n}) {\n  return (\n    <button\n      type=\"button\"\n      title={title}\n      onClick={onClick}\n      className={`rounded border px-2.5 py-1 text-xs font-medium transition-colors ${\n        active\n          ? 'border-accent bg-accent text-on-accent'\n          : 'border-border bg-surface text-fg hover:bg-hover'\n      }`}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function LinkEditorCard({ onClose }: { onClose: () => void }) {\n  const t = useT();\n  const kernel = useKernel();\n  const anno = useAnnotation();\n  const props = useAnnotationProperties();\n  const value = (props.values.link ?? null) as PdfLinkTarget | null;\n  const [mode, setMode] = useState<'uri' | 'page'>(value?.kind === 'goto' ? 'page' : 'uri');\n  const [uri, setUri] = useState(value?.kind === 'uri' ? value.uri : '');\n  const [pageNo, setPageNo] = useState('1');\n\n  const apply = () => {\n    if (mode === 'uri') {\n      const trimmed = uri.trim();\n      if (!trimmed) return;\n      anno.selection.updateLink({ kind: 'uri', uri: trimmed });\n      onClose();\n      return;\n    }\n    // Page number (1-based) → the page's object number (stable across moves).\n    const page = kernel.documents.getPage(Math.max(0, Number(pageNo) - 1));\n    if (!page) return;\n    anno.selection.updateLink({ kind: 'goto', destination: { kind: 'fit', page: page.ref } });\n    onClose();\n  };\n\n  const inputCls =\n    'border-border bg-surface text-fg focus:border-accent w-full rounded border px-2.5 py-1.5 text-sm outline-none';\n  return (\n    <div className=\"border-border bg-surface w-64 rounded-lg border p-3 shadow-lg\">\n      <div className=\"mb-2 flex items-center justify-between\">\n        <span className=\"text-fg text-sm font-semibold\">{t('commands.annotate.link')}</span>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          aria-label={t('panel.close')}\n          title={t('panel.close')}\n          className=\"text-fg-muted hover:bg-hover grid h-6 w-6 place-items-center rounded\"\n        >\n          <Icon name=\"x\" size={14} />\n        </button>\n      </div>\n      <div className=\"mb-2 flex gap-1.5\">\n        <ModeToggle\n          title={t('linkEditor.toUrl')}\n          active={mode === 'uri'}\n          onClick={() => setMode('uri')}\n        >\n          {t('linkEditor.url')}\n        </ModeToggle>\n        <ModeToggle\n          title={t('linkEditor.toPage')}\n          active={mode === 'page'}\n          onClick={() => setMode('page')}\n        >\n          {t('linkEditor.page')}\n        </ModeToggle>\n      </div>\n      {mode === 'uri' ? (\n        <input\n          type=\"url\"\n          className={inputCls}\n          placeholder={t('linkEditor.urlPlaceholder')}\n          autoFocus\n          value={uri}\n          onChange={(event) => setUri(event.target.value)}\n          onKeyDown={(event) => event.key === 'Enter' && apply()}\n        />\n      ) : (\n        <input\n          type=\"number\"\n          min={1}\n          className={inputCls}\n          placeholder={t('linkEditor.pagePlaceholder')}\n          autoFocus\n          value={pageNo}\n          onChange={(event) => setPageNo(event.target.value)}\n          onKeyDown={(event) => event.key === 'Enter' && apply()}\n        />\n      )}\n      <button\n        type=\"button\"\n        className=\"bg-accent text-on-accent mt-2.5 w-full rounded px-2 py-1.5 text-sm font-medium\"\n        onClick={apply}\n      >\n        {value == null ? t('linkEditor.add') : t('linkEditor.update')}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBA,SAAS,WAAW,EAClB,QACA,OACA,SACA,YAMC;CACD,OACE,oBAAC,UAAD;EACE,MAAK;EACE;EACE;EACT,WAAW,oEACT,SACI,2CACA;EAGL;CACK,CAAA;AAEZ;AAEA,SAAgB,eAAe,EAAE,WAAoC;CACnE,MAAM,IAAI,KAAK;CACf,MAAM,SAAS,UAAU;CACzB,MAAM,OAAO,cAAc;CAE3B,MAAM,QADQ,wBACK,CAAC,CAAC,OAAO,QAAQ;CACpC,MAAM,CAAC,MAAM,WAAW,SAAyB,OAAO,SAAS,SAAS,SAAS,KAAK;CACxF,MAAM,CAAC,KAAK,UAAU,SAAS,OAAO,SAAS,QAAQ,MAAM,MAAM,EAAE;CACrE,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CAExC,MAAM,cAAc;EAClB,IAAI,SAAS,OAAO;GAClB,MAAM,UAAU,IAAI,KAAK;GACzB,IAAI,CAAC,SAAS;GACd,KAAK,UAAU,WAAW;IAAE,MAAM;IAAO,KAAK;GAAQ,CAAC;GACvD,QAAQ;GACR;EACF;EAEA,MAAM,OAAO,OAAO,UAAU,QAAQ,KAAK,IAAI,GAAG,OAAO,MAAM,IAAI,CAAC,CAAC;EACrE,IAAI,CAAC,MAAM;EACX,KAAK,UAAU,WAAW;GAAE,MAAM;GAAQ,aAAa;IAAE,MAAM;IAAO,MAAM,KAAK;GAAI;EAAE,CAAC;EACxF,QAAQ;CACV;CAEA,MAAM,WACJ;CACF,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAAiC,UAAA,EAAE,wBAAwB;IAAQ,CAAA,GACnF,oBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,cAAY,EAAE,aAAa;KAC3B,OAAO,EAAE,aAAa;KACtB,WAAU;KAEV,UAAA,oBAAC,MAAD;MAAM,MAAK;MAAI,MAAM;KAAK,CAAA;IACpB,CAAA,CACL;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,YAAD;KACE,OAAO,EAAE,kBAAkB;KAC3B,QAAQ,SAAS;KACjB,eAAe,QAAQ,KAAK;KAE3B,UAAA,EAAE,gBAAgB;IACT,CAAA,GACZ,oBAAC,YAAD;KACE,OAAO,EAAE,mBAAmB;KAC5B,QAAQ,SAAS;KACjB,eAAe,QAAQ,MAAM;KAE5B,UAAA,EAAE,iBAAiB;IACV,CAAA,CACT;;GACJ,SAAS,QACR,oBAAC,SAAD;IACE,MAAK;IACL,WAAW;IACX,aAAa,EAAE,2BAA2B;IAC1C,WAAA;IACA,OAAO;IACP,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,YAAY,UAAU,MAAM,QAAQ,WAAW,MAAM;GACtD,CAAA,IAED,oBAAC,SAAD;IACE,MAAK;IACL,KAAK;IACL,WAAW;IACX,aAAa,EAAE,4BAA4B;IAC3C,WAAA;IACA,OAAO;IACP,WAAW,UAAU,UAAU,MAAM,OAAO,KAAK;IACjD,YAAY,UAAU,MAAM,QAAQ,WAAW,MAAM;GACtD,CAAA;GAEH,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS;IAER,UAAA,SAAS,OAAO,EAAE,gBAAgB,IAAI,EAAE,mBAAmB;GACtD,CAAA;EACL;;AAET"}

package/dist/measurement-Bs61XWbJ.js

@@ -0,0 +1,325 @@
+import { t as Dialog } from "./dialog-B5GBisKv.js";
+import { useEffect, useRef, useState } from "react";
+import { useCapability, useSelector } from "@embedpdf/react/runtime";
+import { StageToken } from "@embedpdf/react/stage";
+import { AnnotationToken, useAnnotationState } from "@embedpdf/react/annotation";
+import { MeasurementToken, useMeasurement, useMeasurementState, usePageScale } from "@embedpdf/react/measurement";
+import { useT } from "@embedpdf/react/i18n";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/measurement.tsx
+const control = "border-border bg-surface text-fg w-full rounded-md border px-2 py-1.5 text-sm disabled:opacity-50";
+const button = "border-border text-fg hover:bg-hover rounded-md border px-3 py-1.5 text-sm disabled:opacity-50";
+/** The current page's address, or null with no page (empty document). */
+const useCurrentPage = () => useSelector(StageToken, (stage) => stage.getCurrentPage());
+function MeasurementSection() {
+	const t = useT();
+	const page = useCurrentPage();
+	const measurement = useMeasurement();
+	const busy = useMeasurementState((state) => state.busy);
+	const canCalibrate = useSelector(MeasurementToken, (current) => current.canCalibrate());
+	const scale = usePageScale(page);
+	const anno = useCapability(AnnotationToken);
+	const selected = useAnnotationState((state) => state.selected);
+	const resettable = useSelector(AnnotationToken, (annotation) => annotation.selection.list().filter((candidate) => (candidate.subtype === "polygon" || candidate.subtype === "polyline") && candidate.captionCenter && annotation.canUpdate(candidate.ref) && !candidate.lockedContents), (left, right) => left.length === right.length && left.every((annotation, i) => annotation === right[i]));
+	const readouts = useSelector(MeasurementToken, (measurement) => anno.selection.list().map((annotation) => measurement.getReadout(annotation.ref)).filter((readout) => !("unavailable" in readout)), (left, right) => JSON.stringify(left) === JSON.stringify(right));
+	const reports = useMeasurementState((state) => state.lastReports);
+	const [allPages, setAllPages] = useState(false);
+	const [recalculate, setRecalculate] = useState(true);
+	const [error, setError] = useState(null);
+	const disabled = !page || busy || !canCalibrate || !scale?.ready;
+	const rectilinear = scale?.measure?.subtype === "rectilinear" ? scale.measure : null;
+	const target = allPages ? "all" : page;
+	const options = { recalculate };
+	const run = async (work) => {
+		setError(null);
+		try {
+			await work();
+		} catch (error) {
+			setError(error instanceof Error ? error.message : String(error));
+		}
+	};
+	const precision = rectilinear?.distance[rectilinear.distance.length - 1]?.precision ?? 100;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 text-sm",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted",
+				children: t("measurement.instructions")
+			}),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("span", {
+				className: "text-fg-muted",
+				children: [t("measurement.scale"), ": "]
+			}), /* @__PURE__ */ jsx("strong", { children: rectilinear?.ratio ?? t("measurement.unavailable") })] }),
+			scale?.error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-red-600",
+				children: scale.error.message
+			}),
+			scale && !scale.persistent && scale.ready && /* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted",
+				children: t("measurement.sessionOnly")
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: allPages,
+					disabled: busy,
+					onChange: (event) => setAllPages(event.target.checked)
+				}), t("measurement.allPages")]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: recalculate,
+					disabled: busy,
+					onChange: (event) => setRecalculate(event.target.checked)
+				}), t("measurement.recalculate")]
+			}),
+			/* @__PURE__ */ jsxs("label", { children: [t("measurement.preset"), /* @__PURE__ */ jsxs("select", {
+				"aria-label": t("measurement.preset"),
+				className: control,
+				value: "",
+				disabled,
+				onChange: (event) => void run(() => measurement.setPreset(target, event.target.value, options)),
+				children: [/* @__PURE__ */ jsx("option", {
+					value: "",
+					disabled: true,
+					children: t("measurement.choosePreset")
+				}), measurement.listPresets().map((preset) => /* @__PURE__ */ jsx("option", {
+					value: preset.id,
+					children: preset.label
+				}, preset.id))]
+			})] }),
+			/* @__PURE__ */ jsxs("label", { children: [t("measurement.unit"), /* @__PURE__ */ jsxs("select", {
+				"aria-label": t("measurement.unit"),
+				className: control,
+				value: rectilinear?.distance[0]?.unit.trim() ?? "",
+				disabled: disabled || !rectilinear,
+				onChange: (event) => void run(() => measurement.setUnit(target, event.target.value, options)),
+				children: [!measurement.listUnits().includes(rectilinear?.distance[0]?.unit.trim()) && /* @__PURE__ */ jsx("option", {
+					value: rectilinear?.distance[0]?.unit.trim() ?? "",
+					children: t("measurement.custom")
+				}), measurement.listUnits().map((unit) => /* @__PURE__ */ jsx("option", {
+					value: unit,
+					children: unit
+				}, unit))]
+			})] }),
+			/* @__PURE__ */ jsxs("label", { children: [t("measurement.areaUnit"), /* @__PURE__ */ jsxs("select", {
+				"aria-label": t("measurement.areaUnit"),
+				className: control,
+				value: rectilinear?.area[0]?.unit.trim().replace("²", "2") ?? "",
+				disabled: disabled || !rectilinear,
+				onChange: (event) => void run(() => measurement.setAreaUnit(target, event.target.value, options)),
+				children: [!measurement.listAreaUnits().includes(rectilinear?.area[0]?.unit.trim().replace("²", "2")) && /* @__PURE__ */ jsx("option", {
+					value: rectilinear?.area[0]?.unit.trim().replace("²", "2") ?? "",
+					children: t("measurement.custom")
+				}), measurement.listAreaUnits().map((unit) => /* @__PURE__ */ jsx("option", {
+					value: unit,
+					children: unit.replace("2", "²")
+				}, unit))]
+			})] }),
+			/* @__PURE__ */ jsxs("label", { children: [t("measurement.precision"), /* @__PURE__ */ jsxs("select", {
+				"aria-label": t("measurement.precision"),
+				className: control,
+				value: precision,
+				disabled: disabled || !rectilinear,
+				onChange: (event) => void run(() => measurement.setPrecision(target, Number(event.target.value), options)),
+				children: [![
+					1,
+					10,
+					100,
+					1e3,
+					1e4
+				].includes(precision) && /* @__PURE__ */ jsx("option", {
+					value: precision,
+					children: t("measurement.custom")
+				}), [
+					1,
+					10,
+					100,
+					1e3,
+					1e4
+				].map((candidate) => /* @__PURE__ */ jsx("option", {
+					value: candidate,
+					children: 1 / candidate
+				}, candidate))]
+			})] }),
+			/* @__PURE__ */ jsx("button", {
+				className: button,
+				disabled,
+				onClick: () => measurement.startCalibration(),
+				children: t("measurement.calibrate")
+			}),
+			selected.length > 0 && /* @__PURE__ */ jsxs("section", {
+				className: "border-border-subtle border-t pt-3",
+				children: [
+					/* @__PURE__ */ jsx("h3", {
+						className: "mb-1 font-medium",
+						children: t("measurement.selection")
+					}),
+					readouts.length ? readouts.map((readout, i) => /* @__PURE__ */ jsxs("div", {
+						className: "mb-2",
+						children: [/* @__PURE__ */ jsxs("p", { children: [
+							t(`measurement.${readout.kind}`),
+							": ",
+							readout.label
+						] }), readout.perimeter && /* @__PURE__ */ jsxs("p", { children: [
+							t("measurement.perimeter"),
+							": ",
+							readout.perimeter
+						] })]
+					}, i)) : /* @__PURE__ */ jsx("p", {
+						className: "text-fg-muted",
+						children: t("measurement.unavailable")
+					}),
+					resettable.length > 0 && /* @__PURE__ */ jsx("button", {
+						className: button,
+						disabled: busy,
+						onClick: () => void run(async () => {
+							for (const annotation of resettable) if (annotation.subtype === "polygon" || annotation.subtype === "polyline") await anno.update(annotation.ref, {
+								subtype: annotation.subtype,
+								captionCenter: null
+							});
+						}),
+						children: t("measurement.resetLabel")
+					})
+				]
+			}),
+			reports.length > 0 && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				children: t("measurement.report", { params: {
+					updated: reports.reduce((total, report) => total + report.updated.length, 0),
+					skipped: reports.reduce((total, report) => total + report.skipped.length, 0),
+					failed: reports.reduce((total, report) => total + report.failed.length + (report.scaleError || report.error ? 1 : 0), 0)
+				} })
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-red-600",
+				children: error
+			})
+		]
+	});
+}
+function CalibrationDialog() {
+	const t = useT();
+	const measurement = useMeasurement();
+	const { busy, calibrationRequest: request } = useMeasurementState();
+	const canCalibrate = useSelector(MeasurementToken, (current) => current.canCalibrate());
+	const input = useRef(null);
+	const [value, setValue] = useState("");
+	const [unit, setUnit] = useState("m");
+	const [allPages, setAllPages] = useState(false);
+	const [recalculate, setRecalculate] = useState(true);
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		setValue("");
+		setError(null);
+		input.current?.focus();
+	}, [request]);
+	if (!request) return null;
+	const submit = async () => {
+		setError(null);
+		try {
+			await measurement.calibrate({
+				page: request.page,
+				from: request.from,
+				to: request.to,
+				distance: {
+					value: Number(value),
+					unit
+				}
+			}, {
+				recalculate,
+				applyTo: allPages ? "all" : void 0
+			});
+			measurement.dismissCalibration();
+		} catch (error) {
+			setError(error instanceof Error ? error.message : String(error));
+		}
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		labelledBy: "measurement-calibration-title",
+		onClose: () => {
+			if (!busy) measurement.dismissCalibration();
+		},
+		className: "border-border bg-surface w-96 rounded-lg border p-5 shadow-xl",
+		children: /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				submit();
+			},
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					id: "measurement-calibration-title",
+					className: "font-semibold",
+					children: t("measurement.calibrate")
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-fg-muted text-sm",
+					children: t("measurement.knownLength")
+				}),
+				/* @__PURE__ */ jsxs("label", { children: [t("measurement.length"), /* @__PURE__ */ jsx("input", {
+					ref: input,
+					"aria-label": t("measurement.length"),
+					className: control,
+					type: "number",
+					min: "0",
+					step: "any",
+					value,
+					onChange: (event) => setValue(event.target.value)
+				})] }),
+				/* @__PURE__ */ jsxs("label", { children: [t("measurement.unit"), /* @__PURE__ */ jsx("select", {
+					className: control,
+					"aria-label": t("measurement.unit"),
+					value: unit,
+					onChange: (event) => setUnit(event.target.value),
+					children: measurement.listUnits().map((lengthUnit) => /* @__PURE__ */ jsx("option", { children: lengthUnit }, lengthUnit))
+				})] }),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex items-center gap-2 text-sm",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: allPages,
+						onChange: (event) => setAllPages(event.target.checked)
+					}), t("measurement.allPages")]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex items-center gap-2 text-sm",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: recalculate,
+						onChange: (event) => setRecalculate(event.target.checked)
+					}), t("measurement.recalculate")]
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-sm text-red-600",
+					children: error
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: button,
+						disabled: busy,
+						onClick: () => measurement.dismissCalibration(),
+						children: t("demo.cancel")
+					}), /* @__PURE__ */ jsx("button", {
+						className: button,
+						type: "submit",
+						disabled: busy || !canCalibrate || !(Number(value) > 0) || !Number.isFinite(Number(value)),
+						children: busy ? t("measurement.applying") : t("measurement.apply")
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { CalibrationDialog, MeasurementSection };
+
+//# sourceMappingURL=measurement-Bs61XWbJ.js.map