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

package/dist/index.d.cts

@@ -11,6 +11,7 @@ import { StageToken } from "@embedpdf/react/stage";
 import { SearchToken } from "@embedpdf/react/search";
 import { SelectionToken } from "@embedpdf/react/selection";
 import { FormToken } from "@embedpdf/react/form";
+import { MeasurementCapability, MeasurementConfig, MeasurementToken, ScaleChangeReport } from "@embedpdf/react/measurement";
 import { RedactionToken } from "@embedpdf/react/redaction";
 import { StampToken } from "@embedpdf/react/stamp";
 import { InteractionToken } from "@embedpdf/react/interaction";
@@ -25,6 +26,10 @@ type PathSpec = string | {
   /** Stroke paint: a slot name = that accent color (currentColor when
    *  the accent is absent). */
   stroke?: 'primary' | 'secondary';
+  strokeWidth?: number;
+  strokeDasharray?: string;
+  strokeOpacity?: number;
+  fillOpacity?: number;
 };
 /** A registrable icon: 24×24 stroke path data (Tabler/Lucide-style), exactly
  *  the shape of the built-in set — user icons are not a lesser kind. */
@@ -190,5 +195,5 @@ interface FullViewerProps extends ViewerCustomization {
 }
 declare function FullViewer({ engine, initialDocuments, fallback, commands, icons, strings, locale, disabledCategories, chrome, stamps, signatures, annotations, theme, themeTarget, onViewer }: FullViewerProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { type AddItemSpec, type AnnotationFontSpec, AnnotationToken, type AnnotationsCustomization, type BarChild, type BarGroup, type BarItem, type BarSchema, type BarSections, type CapabilityToken, type ChromeHelpers, type ChromeSchema, type CommandDef, CommandsToken, type CustomItem, type DocInfo, type DocumentsCapability, DocumentsToken, type Engine, type EngineFactory, FormToken, FullViewer, type FullViewerProps, I18nToken, type IconDef, type Importance, type InitialDocument, InteractionToken, type Mark, type MenuSchema, type MenuSection, MetadataToken, type PathSpec, RedactionToken, type ResolvedCommand, type ScopedViewerHandle, SearchToken, SelectionToken, ShellToken, type SignFieldInput, type SignatureMode, SignatureToken, type SignaturesCustomization, type SignerPort, StageToken, StampToken, type StampsCustomization, type ThemeConfig, type ThemeMode, type ThemePreference, type ThemeTokens, type TrustPort, type Unsubscribe, type Variant, type ViewerCustomization, type ViewerHandle, addItem, chromeHelpers, createTestSigner, createViewerHandle, custom, defaultChrome, defaultCommands, ICON_PATHS as defaultIcons, defineChrome, group, indexedDbKeyStore, item, memoryKeyStore, personalSigner, remoteSigner, removeItems, replaceItem, themeConfigOf, validateChrome, webCryptoSigner };
+export { type AddItemSpec, type AnnotationFontSpec, AnnotationToken, type AnnotationsCustomization, type BarChild, type BarGroup, type BarItem, type BarSchema, type BarSections, type CapabilityToken, type ChromeHelpers, type ChromeSchema, type CommandDef, CommandsToken, type CustomItem, type DocInfo, type DocumentsCapability, DocumentsToken, type Engine, type EngineFactory, FormToken, FullViewer, type FullViewerProps, I18nToken, type IconDef, type Importance, type InitialDocument, InteractionToken, type Mark, type MeasurementCapability, type MeasurementConfig, MeasurementToken, type MenuSchema, type MenuSection, MetadataToken, type PathSpec, RedactionToken, type ResolvedCommand, type ScaleChangeReport, type ScopedViewerHandle, SearchToken, SelectionToken, ShellToken, type SignFieldInput, type SignatureMode, SignatureToken, type SignaturesCustomization, type SignerPort, StageToken, StampToken, type StampsCustomization, type ThemeConfig, type ThemeMode, type ThemePreference, type ThemeTokens, type TrustPort, type Unsubscribe, type Variant, type ViewerCustomization, type ViewerHandle, addItem, chromeHelpers, createTestSigner, createViewerHandle, custom, defaultChrome, defaultCommands, ICON_PATHS as defaultIcons, defineChrome, group, indexedDbKeyStore, item, memoryKeyStore, personalSigner, remoteSigner, removeItems, replaceItem, themeConfigOf, validateChrome, webCryptoSigner };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import { InteractionToken } from "@embedpdf/react/interaction";
 import { SelectionToken } from "@embedpdf/react/selection";
 import { AnnotationToken } from "@embedpdf/react/annotation";
 import { StampToken } from "@embedpdf/react/stamp";
+import { MeasurementCapability, MeasurementConfig, MeasurementToken, ScaleChangeReport } from "@embedpdf/react/measurement";
 import { RedactionToken } from "@embedpdf/react/redaction";
 import { FormToken } from "@embedpdf/react/form";
 import { Mark, SignFieldInput, SignatureMode, SignatureMode as SignatureMode$1, SignatureToken, SignerPort, SignerPort as SignerPort$1, TrustPort, TrustPort as TrustPort$1, createTestSigner, indexedDbKeyStore, memoryKeyStore, personalSigner, remoteSigner, webCryptoSigner } from "@embedpdf/react/signature";
@@ -25,6 +26,10 @@ type PathSpec = string | {
   /** Stroke paint: a slot name = that accent color (currentColor when
    *  the accent is absent). */
   stroke?: 'primary' | 'secondary';
+  strokeWidth?: number;
+  strokeDasharray?: string;
+  strokeOpacity?: number;
+  fillOpacity?: number;
 };
 /** A registrable icon: 24×24 stroke path data (Tabler/Lucide-style), exactly
  *  the shape of the built-in set — user icons are not a lesser kind. */
@@ -190,5 +195,5 @@ interface FullViewerProps extends ViewerCustomization {
 }
 declare function FullViewer({ engine, initialDocuments, fallback, commands, icons, strings, locale, disabledCategories, chrome, stamps, signatures, annotations, theme, themeTarget, onViewer }: FullViewerProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { type AddItemSpec, type AnnotationFontSpec, AnnotationToken, type AnnotationsCustomization, type BarChild, type BarGroup, type BarItem, type BarSchema, type BarSections, type CapabilityToken, type ChromeHelpers, type ChromeSchema, type CommandDef, CommandsToken, type CustomItem, type DocInfo, type DocumentsCapability, DocumentsToken, type Engine, type EngineFactory, FormToken, FullViewer, type FullViewerProps, I18nToken, type IconDef, type Importance, type InitialDocument, InteractionToken, type Mark, type MenuSchema, type MenuSection, MetadataToken, type PathSpec, RedactionToken, type ResolvedCommand, type ScopedViewerHandle, SearchToken, SelectionToken, ShellToken, type SignFieldInput, type SignatureMode, SignatureToken, type SignaturesCustomization, type SignerPort, StageToken, StampToken, type StampsCustomization, type ThemeConfig, type ThemeMode, type ThemePreference, type ThemeTokens, type TrustPort, type Unsubscribe, type Variant, type ViewerCustomization, type ViewerHandle, addItem, chromeHelpers, createTestSigner, createViewerHandle, custom, defaultChrome, defaultCommands, ICON_PATHS as defaultIcons, defineChrome, group, indexedDbKeyStore, item, memoryKeyStore, personalSigner, remoteSigner, removeItems, replaceItem, themeConfigOf, validateChrome, webCryptoSigner };
+export { type AddItemSpec, type AnnotationFontSpec, AnnotationToken, type AnnotationsCustomization, type BarChild, type BarGroup, type BarItem, type BarSchema, type BarSections, type CapabilityToken, type ChromeHelpers, type ChromeSchema, type CommandDef, CommandsToken, type CustomItem, type DocInfo, type DocumentsCapability, DocumentsToken, type Engine, type EngineFactory, FormToken, FullViewer, type FullViewerProps, I18nToken, type IconDef, type Importance, type InitialDocument, InteractionToken, type Mark, type MeasurementCapability, type MeasurementConfig, MeasurementToken, type MenuSchema, type MenuSection, MetadataToken, type PathSpec, RedactionToken, type ResolvedCommand, type ScaleChangeReport, type ScopedViewerHandle, SearchToken, SelectionToken, ShellToken, type SignFieldInput, type SignatureMode, SignatureToken, type SignaturesCustomization, type SignerPort, StageToken, StampToken, type StampsCustomization, type ThemeConfig, type ThemeMode, type ThemePreference, type ThemeTokens, type TrustPort, type Unsubscribe, type Variant, type ViewerCustomization, type ViewerHandle, addItem, chromeHelpers, createTestSigner, createViewerHandle, custom, defaultChrome, defaultCommands, ICON_PATHS as defaultIcons, defineChrome, group, indexedDbKeyStore, item, memoryKeyStore, personalSigner, remoteSigner, removeItems, replaceItem, themeConfigOf, validateChrome, webCryptoSigner };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -9,6 +9,7 @@ import { InteractionToken, InteractionToken as InteractionToken$1, feedbackPlugi
 import { SelectionClipboard, SelectionHandles, SelectionLayer, SelectionMenu, SelectionToken, selectionPlugin } from "@embedpdf/react/selection";
 import { AnnotationLayer, AnnotationToken, AnnotationToken as AnnotationToken$1, annotationPlugin, refKey, useAnnotation, useAnnotationDefaults, useAnnotationSelected, useAnnotationSelection, useCommentThreads, useComments, useCommentsHydration, useFilePickerProvider, useSelectionFlags, useSelectionProps } from "@embedpdf/react/annotation";
 import { StampToken, StampToken as StampToken$1, indexedDbByteStore, persistStampLibraries, restoreStampLibraries, stampPlugin, useArmStampAsset, useStamp, useStampAssetPreviewUrl, useStampAssets, useStampLibraries } from "@embedpdf/react/stamp";
+import { MeasurementToken, MeasurementToken as MeasurementToken$1, measurementPlugin, useMeasurement, usePageScale } from "@embedpdf/react/measurement";
 import { RedactionToken, RedactionToken as RedactionToken$1, redactionPlugin, usePendingRedactions, useRedaction } from "@embedpdf/react/redaction";
 import { actionsPlugin, useActionsUiAdapter } from "@embedpdf/react/actions";
 import { FormToken, FormToken as FormToken$1, formPlugin, formWidgetRenderer } from "@embedpdf/react/form";
@@ -81,6 +82,32 @@ const en = {
 	code: "en",
 	name: "English",
 	translations: {
+		measurement: {
+			title: "Measurements",
+			distance: "Distance",
+			perimeter: "Perimeter",
+			area: "Area",
+			areaUnit: "Area unit",
+			resetLabel: "Reset label position",
+			calibrate: "Calibrate scale",
+			scale: "Scale",
+			custom: "Custom",
+			unavailable: "Unavailable",
+			instructions: "Drag to measure a distance, then click to place its dimension line. Click vertices for a perimeter or area and double-click to finish. Area boundaries must not cross; an unavailable preview cannot be finished. Press Escape to cancel. Drag the label itself to move it.",
+			sessionOnly: "This engine keeps page calibration for this session only.",
+			allPages: "Apply to all pages",
+			recalculate: "Recalculate existing measurements",
+			preset: "Scale preset",
+			choosePreset: "Choose a preset",
+			unit: "Unit",
+			precision: "Precision",
+			selection: "Selected measurements",
+			report: "{updated} updated · {skipped} skipped · {failed} failed",
+			knownLength: "Enter the real length represented by the line you just drew.",
+			length: "Known length",
+			apply: "Apply scale",
+			applying: "Applying…"
+		},
 		commands: {
 			zoom: {
 				in: "Zoom In",
@@ -124,6 +151,7 @@ const en = {
 				counterclockwise: "Rotate Counter-Clockwise"
 			},
 			mode: {
+				measure: "Measure",
 				group: "Mode",
 				view: "View",
 				annotate: "Annotate",
@@ -133,6 +161,7 @@ const en = {
 				redact: "Redact"
 			},
 			annotate: {
+				cancelCreation: "Cancel drawing",
 				highlight: "Highlight",
 				strikeout: "Strikeout",
 				underline: "Underline",
@@ -432,7 +461,40 @@ function createViewerHandle(kernel) {
 }
 //#endregion
 //#region src/ui/icons.tsx
+const measurementOutline = [{
+	d: "M5 4H19M20 5V19M19 20H5M4 19V5",
+	stroke: "primary"
+}, {
+	d: "M3.1 3.1h1.8v1.8H3.1zM19.1 3.1h1.8v1.8h-1.8zM3.1 19.1h1.8v1.8H3.1zM19.1 19.1h1.8v1.8h-1.8z",
+	stroke: "primary"
+}];
 const ICON_PATHS = {
+	ruler: ["M3 8h18v8H3z", "M7 8v4M11 8v2M15 8v4M19 8v2"],
+	distance: [{
+		d: "M5 12H19",
+		stroke: "primary",
+		strokeDasharray: "2 2"
+	}, {
+		d: "M3.5 10.5a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3M20.5 10.5a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3",
+		stroke: "primary",
+		fill: "primary",
+		fillOpacity: .25
+	}],
+	perimeter: measurementOutline,
+	area: [
+		{
+			d: "M5 4H19V5H20V19H19V20H5V19H4V5H5Z",
+			fill: "primary",
+			fillOpacity: .08
+		},
+		{
+			d: "M4.5 7.5L7.5 4.5M4.5 10.5L10.5 4.5M4.5 13.5L13.5 4.5M4.5 16.5L16.5 4.5M4.5 19.5L19.5 4.5M7.5 19.5L19.5 7.5M10.5 19.5L19.5 10.5M13.5 19.5L19.5 13.5M16.5 19.5L19.5 16.5",
+			stroke: "primary",
+			strokeWidth: .6,
+			strokeOpacity: .5
+		},
+		...measurementOutline
+	],
 	alertTriangle: ["M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"],
 	alignBottom: [
 		"M3 19v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
@@ -482,6 +544,11 @@ const ICON_PATHS = {
 		"M19 16h-12a2 2 0 0 0 -2 2",
 		"M9 8h6"
 	],
+	calibrate: [
+		"M12 12m-7.5 0a7.5 7.5 0 1 0 15 0a7.5 7.5 0 1 0 -15 0",
+		"M12 2.75V7M12 17V21.25M2.75 12H7M17 12H21.25",
+		"M12 12m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"
+	],
 	callout: [
 		{
 			d: "M20 6v4a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h14a1 1 0 0 1 1 1",
@@ -904,6 +971,11 @@ const ICON_PATHS = {
 	],
 	ungroup: ["M4 5a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z", "M13 14a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z"],
 	unlock: ["M7 11V7a5 5 0 0 1 9.9-1"],
+	updateScale: [
+		"M3.5 13.5L18.5 7.5L21.25 14.5L6.25 20.5L3.5 13.5Z",
+		"M8 12.8L9 15.2M11.5 11.4L12.2 13.2M15 10L16 12.4",
+		"M4 9.39849C4.10585 8.34804 4.487 7.34411 5.10497 6.48809C5.72294 5.63207 6.55584 4.95427 7.51957 4.52312C8.4833 4.09198 9.54373 3.92277 10.5938 4.03257C11.6438 4.14237 12.6463 4.5273 13.5 5.14849M11.5 6.00003L13.5 5.14849L12.7807 2.96999"
+	],
 	vertical: [
 		"M8 7l4 -4l4 4",
 		"M8 17l4 4l4 -4",
@@ -973,7 +1045,11 @@ function Icon({ name, size = 20, strokeWidth = 2, className, title, accent }) {
 			return /* @__PURE__ */ jsx("path", {
 				d: p.d,
 				fill: fill ?? "none",
-				stroke
+				stroke,
+				strokeWidth: p.strokeWidth,
+				strokeDasharray: p.strokeDasharray,
+				strokeOpacity: p.strokeOpacity,
+				fillOpacity: p.fillOpacity
 			}, i);
 		})
 	});
@@ -1007,6 +1083,335 @@ function ThemeProvider({ children, preference = "system", target }) {
 	});
 }
 //#endregion
+//#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";
+const useCurrentPon = () => useSelector(StageToken$1, (c) => c.pages()[c.currentPage()]?.pon ?? -1);
+function MeasurementScaleButton() {
+	const t = useT();
+	const scale = usePageScale(useCurrentPon());
+	const surface = useSurface("measurement");
+	return /* @__PURE__ */ jsxs("button", {
+		className: `${button} inline-flex items-center gap-1.5 whitespace-nowrap`,
+		onClick: () => surface.open({ exclusive: "right" }),
+		title: t("measurement.title"),
+		children: [/* @__PURE__ */ jsx(Icon, {
+			name: "updateScale",
+			size: 20,
+			className: "shrink-0"
+		}), /* @__PURE__ */ jsxs("span", { children: [
+			t("measurement.scale"),
+			":",
+			" ",
+			scale.measure?.subtype === "RL" ? scale.measure.ratio ?? t("measurement.custom") : t("measurement.unavailable")
+		] })]
+	});
+}
+function MeasurementSection() {
+	const t = useT();
+	const pon = useCurrentPon();
+	const measurement = useMeasurement();
+	const scale = usePageScale(pon);
+	const anno = useCapability(AnnotationToken$1);
+	const selected = useSelector(AnnotationToken$1, (c) => c.selection());
+	const resettable = useSelector(AnnotationToken$1, (c) => c.getSelected().filter((annotation) => (annotation.subtype === "polygon" || annotation.subtype === "polyline") && annotation.caption?.center && c.canEdit(annotation.ref) && !annotation.flags.lockedContents), (a, b) => a.length === b.length && a.every((annotation, i) => annotation === b[i]));
+	const readouts = useSelector(MeasurementToken$1, (c) => anno.getSelected().map((d) => c.readout(d.ref)).filter((r) => !("unavailable" in r)), (a, b) => JSON.stringify(a) === JSON.stringify(b));
+	const reports = useSelector(MeasurementToken$1, (c) => c.lastReports());
+	const [allPages, setAllPages] = useState(false);
+	const [recalculate, setRecalculate] = useState(true);
+	const [error, setError] = useState(null);
+	const disabled = measurement.busy || !measurement.canCalibratePage || !scale.ready;
+	const rectilinear = scale.measure?.subtype === "RL" ? scale.measure : null;
+	const options = {
+		allPages,
+		recalculate
+	};
+	const run = async (work) => {
+		setError(null);
+		try {
+			await work();
+		} catch (e) {
+			setError(e instanceof Error ? e.message : String(e));
+		}
+	};
+	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.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: measurement.busy,
+					onChange: (e) => setAllPages(e.target.checked)
+				}), t("measurement.allPages")]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: recalculate,
+					disabled: measurement.busy,
+					onChange: (e) => setRecalculate(e.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: (e) => void run(() => measurement.setPreset(pon, e.target.value, options)),
+				children: [/* @__PURE__ */ jsx("option", {
+					value: "",
+					disabled: true,
+					children: t("measurement.choosePreset")
+				}), measurement.presets().map((p) => /* @__PURE__ */ jsx("option", {
+					value: p.id,
+					children: p.label
+				}, p.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: (e) => void run(() => measurement.setUnit(pon, e.target.value, void 0, options)),
+				children: [!measurement.units().includes(rectilinear?.distance[0]?.unit.trim()) && /* @__PURE__ */ jsx("option", {
+					value: rectilinear?.distance[0]?.unit.trim() ?? "",
+					children: t("measurement.custom")
+				}), measurement.units().map((u) => /* @__PURE__ */ jsx("option", {
+					value: u,
+					children: u
+				}, u))]
+			})] }),
+			/* @__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: (e) => void run(() => measurement.setAreaUnit(pon, e.target.value, options)),
+				children: [!measurement.areaUnits().includes(rectilinear?.area[0]?.unit.trim().replace("²", "2")) && /* @__PURE__ */ jsx("option", {
+					value: rectilinear?.area[0]?.unit.trim().replace("²", "2") ?? "",
+					children: t("measurement.custom")
+				}), measurement.areaUnits().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: (e) => void run(() => measurement.setPrecision(pon, Number(e.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((p) => /* @__PURE__ */ jsx("option", {
+					value: p,
+					children: 1 / p
+				}, p))]
+			})] }),
+			/* @__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: measurement.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,
+								caption: { center: null }
+							});
+						}),
+						children: t("measurement.resetLabel")
+					})
+				]
+			}),
+			reports.length > 0 && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				children: t("measurement.report", { params: {
+					updated: reports.reduce((n, r) => n + r.updated.length, 0),
+					skipped: reports.reduce((n, r) => n + r.skipped.length, 0),
+					failed: reports.reduce((n, r) => n + r.failed.length + (r.scaleError || r.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 request = useSelector(MeasurementToken$1, (c) => c.calibrationRequest());
+	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(request.pon, request.from, request.to, {
+				value: Number(value),
+				unit
+			}, {
+				allPages,
+				recalculate
+			});
+			measurement.dismissCalibration();
+		} catch (e) {
+			setError(e instanceof Error ? e.message : String(e));
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-50 grid place-items-center bg-black/40",
+		onKeyDown: (e) => {
+			if (e.key === "Escape" && !measurement.busy) measurement.dismissCalibration();
+		},
+		children: /* @__PURE__ */ jsxs("form", {
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": "measurement-calibration-title",
+			className: "border-border bg-surface flex w-96 flex-col gap-4 rounded-lg border p-5 shadow-xl",
+			onSubmit: (e) => {
+				e.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: (e) => setValue(e.target.value)
+				})] }),
+				/* @__PURE__ */ jsxs("label", { children: [t("measurement.unit"), /* @__PURE__ */ jsx("select", {
+					className: control,
+					"aria-label": t("measurement.unit"),
+					value: unit,
+					onChange: (e) => setUnit(e.target.value),
+					children: measurement.units().map((u) => /* @__PURE__ */ jsx("option", { children: u }, u))
+				})] }),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex items-center gap-2 text-sm",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: allPages,
+						onChange: (e) => setAllPages(e.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: (e) => setRecalculate(e.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: measurement.busy,
+						onClick: () => measurement.dismissCalibration(),
+						children: t("demo.cancel")
+					}), /* @__PURE__ */ jsx("button", {
+						className: button,
+						type: "submit",
+						disabled: measurement.busy || !measurement.canCalibratePage || !(Number(value) > 0) || !Number.isFinite(Number(value)),
+						children: measurement.busy ? t("measurement.applying") : t("measurement.apply")
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
 //#region src/config/default-stamps.ts
 /**
 * The viewer's BUILT-IN stamp library: `@embedpdf/default-stamps`, the
@@ -1576,6 +1981,7 @@ function AppToolbar({ bar, className }) {
 			run
 		}),
 		renderCustom: {
+			"measurement-scale": () => /* @__PURE__ */ jsx(MeasurementScaleButton, {}),
 			"zoom-controls": (variant) => variant === "inline" ? /* @__PURE__ */ jsx(ZoomControls, {}) : /* @__PURE__ */ jsx(ZoomButton, {}),
 			"quick-stamps": () => /* @__PURE__ */ jsx(QuickStamps, {})
 		},
@@ -2022,7 +2428,13 @@ function iconGlyph(name, accent) {
 		const fill = spec.fill === true ? INK : spec.fill ? accent?.[spec.fill] : void 0;
 		const stroke = spec.stroke ? accent?.[spec.stroke] ?? INK : spec.fill ? "none" : INK;
 		halo.push(`<path d="${spec.d}" fill="none" stroke="${HALO}" stroke-width="3.5"/>`);
-		draw.push(`<path d="${spec.d}" fill="${fill ?? "none"}" stroke="${stroke}"/>`);
+		const decoration = [
+			["stroke-width", spec.strokeWidth],
+			["stroke-dasharray", spec.strokeDasharray],
+			["stroke-opacity", spec.strokeOpacity],
+			["fill-opacity", spec.fillOpacity]
+		].filter(([, value]) => value !== void 0).map(([key, value]) => `${key}="${value}"`).join(" ");
+		draw.push(`<path d="${spec.d}" fill="${fill ?? "none"}" stroke="${stroke}" ${decoration}/>`);
 	}
 	return halo.join("") + draw.join("");
 }
@@ -4431,12 +4843,13 @@ function RightSidebar() {
 	const comment = useSurface("comment");
 	const style = useSurface("annotation-style");
 	const redaction = useSurface("redaction");
+	const measurement = useSurface("measurement");
 	const stamps = useSurface("stamps");
 	const signatures = useSurface("signatures");
-	const active = search.isOpen ? "search" : comment.isOpen ? "comment" : style.isOpen ? "style" : redaction.isOpen ? "redaction" : stamps.isOpen ? "stamps" : signatures.isOpen ? "signatures" : null;
+	const active = measurement.isOpen ? "measurement" : search.isOpen ? "search" : comment.isOpen ? "comment" : style.isOpen ? "style" : redaction.isOpen ? "redaction" : stamps.isOpen ? "stamps" : signatures.isOpen ? "signatures" : null;
 	if (!active) return null;
-	const titleKey = active === "search" ? "demo.searchTitle" : active === "comment" ? "demo.commentsTitle" : active === "redaction" ? "demo.redactionTitle" : active === "stamps" ? "demo.stampsTitle" : active === "signatures" ? "demo.signaturesTitle" : "demo.styleTitle";
-	const close = active === "search" ? search.close : active === "comment" ? comment.close : active === "redaction" ? redaction.close : active === "stamps" ? stamps.close : active === "signatures" ? signatures.close : style.close;
+	const titleKey = active === "measurement" ? "measurement.title" : active === "search" ? "demo.searchTitle" : active === "comment" ? "demo.commentsTitle" : active === "redaction" ? "demo.redactionTitle" : active === "stamps" ? "demo.stampsTitle" : active === "signatures" ? "demo.signaturesTitle" : "demo.styleTitle";
+	const close = active === "measurement" ? measurement.close : active === "search" ? search.close : active === "comment" ? comment.close : active === "redaction" ? redaction.close : active === "stamps" ? stamps.close : active === "signatures" ? signatures.close : style.close;
 	return /* @__PURE__ */ jsxs("aside", {
 		className: "border-border-subtle bg-surface flex w-72 shrink-0 flex-col border-l",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -4453,7 +4866,7 @@ function RightSidebar() {
 					size: 16
 				})
 			})]
-		}), active === "style" ? /* @__PURE__ */ jsx(AnnotationStylePanel, {}) : active === "search" ? /* @__PURE__ */ jsx(SearchPanel, {}, documentId ?? "none") : active === "redaction" ? /* @__PURE__ */ jsx(RedactionPanel, {}) : active === "stamps" ? /* @__PURE__ */ jsx(StampsPanel, {}) : active === "signatures" ? /* @__PURE__ */ jsx(SignaturesPanel, {}) : /* @__PURE__ */ jsx(CommentsPanel, {}, documentId ?? "none")]
+		}), active === "measurement" ? /* @__PURE__ */ jsx(MeasurementSection, {}, documentId ?? "none") : active === "style" ? /* @__PURE__ */ jsx(AnnotationStylePanel, {}) : active === "search" ? /* @__PURE__ */ jsx(SearchPanel, {}, documentId ?? "none") : active === "redaction" ? /* @__PURE__ */ jsx(RedactionPanel, {}) : active === "stamps" ? /* @__PURE__ */ jsx(StampsPanel, {}) : active === "signatures" ? /* @__PURE__ */ jsx(SignaturesPanel, {}) : /* @__PURE__ */ jsx(CommentsPanel, {}, documentId ?? "none")]
 	});
 }
 function PageControls() {
@@ -5506,6 +5919,7 @@ function Shell() {
 					}),
 					/* @__PURE__ */ jsx(RightSidebar, {}),
 					/* @__PURE__ */ jsx(RedactConfirmModal, {}),
+					/* @__PURE__ */ jsx(CalibrationDialog, {}),
 					/* @__PURE__ */ jsx(SignatureBridge, {}),
 					/* @__PURE__ */ jsx(SignDialog, {}),
 					/* @__PURE__ */ jsx(SignatureMakerModal, {})
@@ -5536,7 +5950,7 @@ function Shell() {
 * changing these props on a mounted viewer does not rebuild the workspace.
 */
 /** Lazy built-in packs — a strings override for one of these wraps its loader. */
-const BUILTIN_LOADERS = { es: () => import("./es-sN6uqBgD.js").then((m) => m.es) };
+const BUILTIN_LOADERS = { es: () => import("./es-CLgTsFDS.js").then((m) => m.es) };
 const isDict = (v) => typeof v === "object" && v !== null;
 /**
 * Deep-merge `over` into `base` (immutably), expanding dotted keys —
@@ -5687,6 +6101,7 @@ function FullViewer({ engine, initialDocuments, fallback, commands, icons, strin
 		}),
 		linkPlugin(),
 		redactionPlugin(),
+		measurementPlugin(),
 		searchPlugin(),
 		demoToolsPlugin(),
 		i18nPlugin({
@@ -5718,6 +6133,6 @@ function FullViewer({ engine, initialDocuments, fallback, commands, icons, strin
 	});
 }
 //#endregion
-export { AnnotationToken, CommandsToken, DocumentsToken, FormToken, FullViewer, I18nToken, InteractionToken, MetadataToken, RedactionToken, SearchToken, SelectionToken, ShellToken, SignatureToken, StageToken, StampToken, addItem, chromeHelpers, createTestSigner, createViewerHandle, custom, defaultChrome, defaultCommands, ICON_PATHS as defaultIcons, defineChrome, group, indexedDbKeyStore, item, memoryKeyStore, personalSigner, remoteSigner, removeItems, replaceItem, themeConfigOf, validateChrome, webCryptoSigner };
+export { AnnotationToken, CommandsToken, DocumentsToken, FormToken, FullViewer, I18nToken, InteractionToken, MeasurementToken, MetadataToken, RedactionToken, SearchToken, SelectionToken, ShellToken, SignatureToken, StageToken, StampToken, addItem, chromeHelpers, createTestSigner, createViewerHandle, custom, defaultChrome, defaultCommands, ICON_PATHS as defaultIcons, defineChrome, group, indexedDbKeyStore, item, memoryKeyStore, personalSigner, remoteSigner, removeItems, replaceItem, themeConfigOf, validateChrome, webCryptoSigner };
 
 //# sourceMappingURL=index.js.map