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

package/dist/index.cjs

@@ -33,6 +33,7 @@ let _embedpdf_react_interaction = require("@embedpdf/react/interaction");
 let _embedpdf_react_selection = require("@embedpdf/react/selection");
 let _embedpdf_react_annotation = require("@embedpdf/react/annotation");
 let _embedpdf_react_stamp = require("@embedpdf/react/stamp");
+let _embedpdf_react_measurement = require("@embedpdf/react/measurement");
 let _embedpdf_react_redaction = require("@embedpdf/react/redaction");
 let _embedpdf_react_actions = require("@embedpdf/react/actions");
 let _embedpdf_react_form = require("@embedpdf/react/form");
@@ -105,6 +106,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",
@@ -148,6 +175,7 @@ const en = {
 				counterclockwise: "Rotate Counter-Clockwise"
 			},
 			mode: {
+				measure: "Measure",
 				group: "Mode",
 				view: "View",
 				annotate: "Annotate",
@@ -157,6 +185,7 @@ const en = {
 				redact: "Redact"
 			},
 			annotate: {
+				cancelCreation: "Cancel drawing",
 				highlight: "Highlight",
 				strikeout: "Strikeout",
 				underline: "Underline",
@@ -472,7 +501,40 @@ function createViewerHandle(kernel) {
 *
 * GENERATED by scratchpad/extract-icons.mjs — 93 icons (slot tags by hand).
 */
+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",
@@ -522,6 +584,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",
@@ -944,6 +1011,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",
@@ -1013,7 +1085,11 @@ function Icon({ name, size = 20, strokeWidth = 2, className, title, accent }) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				d: p.d,
 				fill: fill ?? "none",
-				stroke
+				stroke,
+				strokeWidth: p.strokeWidth,
+				strokeDasharray: p.strokeDasharray,
+				strokeOpacity: p.strokeOpacity,
+				fillOpacity: p.fillOpacity
 			}, i);
 		})
 	});
@@ -1047,6 +1123,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 = () => (0, _embedpdf_react_runtime.useSelector)(_embedpdf_react_stage.StageToken, (c) => c.pages()[c.currentPage()]?.pon ?? -1);
+function MeasurementScaleButton() {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const scale = (0, _embedpdf_react_measurement.usePageScale)(useCurrentPon());
+	const surface = (0, _embedpdf_react_shell.useSurface)("measurement");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		className: `${button} inline-flex items-center gap-1.5 whitespace-nowrap`,
+		onClick: () => surface.open({ exclusive: "right" }),
+		title: t("measurement.title"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			name: "updateScale",
+			size: 20,
+			className: "shrink-0"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+			t("measurement.scale"),
+			":",
+			" ",
+			scale.measure?.subtype === "RL" ? scale.measure.ratio ?? t("measurement.custom") : t("measurement.unavailable")
+		] })]
+	});
+}
+function MeasurementSection() {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const pon = useCurrentPon();
+	const measurement = (0, _embedpdf_react_measurement.useMeasurement)();
+	const scale = (0, _embedpdf_react_measurement.usePageScale)(pon);
+	const anno = (0, _embedpdf_react_runtime.useCapability)(_embedpdf_react_annotation.AnnotationToken);
+	const selected = (0, _embedpdf_react_runtime.useSelector)(_embedpdf_react_annotation.AnnotationToken, (c) => c.selection());
+	const resettable = (0, _embedpdf_react_runtime.useSelector)(_embedpdf_react_annotation.AnnotationToken, (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 = (0, _embedpdf_react_runtime.useSelector)(_embedpdf_react_measurement.MeasurementToken, (c) => anno.getSelected().map((d) => c.readout(d.ref)).filter((r) => !("unavailable" in r)), (a, b) => JSON.stringify(a) === JSON.stringify(b));
+	const reports = (0, _embedpdf_react_runtime.useSelector)(_embedpdf_react_measurement.MeasurementToken, (c) => c.lastReports());
+	const [allPages, setAllPages] = (0, react.useState)(false);
+	const [recalculate, setRecalculate] = (0, react.useState)(true);
+	const [error, setError] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 text-sm",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-fg-muted",
+				children: t("measurement.instructions")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "text-fg-muted",
+				children: [t("measurement.scale"), ": "]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: rectilinear?.ratio ?? t("measurement.unavailable") })] }),
+			scale.error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				role: "alert",
+				className: "text-red-600",
+				children: scale.error.message
+			}),
+			!scale.persistent && scale.ready && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-fg-muted",
+				children: t("measurement.sessionOnly")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "checkbox",
+					checked: allPages,
+					disabled: measurement.busy,
+					onChange: (e) => setAllPages(e.target.checked)
+				}), t("measurement.allPages")]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "checkbox",
+					checked: recalculate,
+					disabled: measurement.busy,
+					onChange: (e) => setRecalculate(e.target.checked)
+				}), t("measurement.recalculate")]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t("measurement.preset"), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+				"aria-label": t("measurement.preset"),
+				className: control,
+				value: "",
+				disabled,
+				onChange: (e) => void run(() => measurement.setPreset(pon, e.target.value, options)),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: "",
+					disabled: true,
+					children: t("measurement.choosePreset")
+				}), measurement.presets().map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: p.id,
+					children: p.label
+				}, p.id))]
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t("measurement.unit"), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: rectilinear?.distance[0]?.unit.trim() ?? "",
+					children: t("measurement.custom")
+				}), measurement.units().map((u) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: u,
+					children: u
+				}, u))]
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t("measurement.areaUnit"), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: rectilinear?.area[0]?.unit.trim().replace("²", "2") ?? "",
+					children: t("measurement.custom")
+				}), measurement.areaUnits().map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: unit,
+					children: unit.replace("2", "²")
+				}, unit))]
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t("measurement.precision"), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: precision,
+					children: t("measurement.custom")
+				}), [
+					1,
+					10,
+					100,
+					1e3,
+					1e4
+				].map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: p,
+					children: 1 / p
+				}, p))]
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				className: button,
+				disabled,
+				onClick: () => measurement.startCalibration(),
+				children: t("measurement.calibrate")
+			}),
+			selected.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "border-border-subtle border-t pt-3",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "mb-1 font-medium",
+						children: t("measurement.selection")
+					}),
+					readouts.length ? readouts.map((readout, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mb-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
+							t(`measurement.${readout.kind}`),
+							": ",
+							readout.label
+						] }), readout.perimeter && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
+							t("measurement.perimeter"),
+							": ",
+							readout.perimeter
+						] })]
+					}, i)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-fg-muted",
+						children: t("measurement.unavailable")
+					}),
+					resettable.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
+				role: "alert",
+				className: "text-red-600",
+				children: error
+			})
+		]
+	});
+}
+function CalibrationDialog() {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const measurement = (0, _embedpdf_react_measurement.useMeasurement)();
+	const request = (0, _embedpdf_react_runtime.useSelector)(_embedpdf_react_measurement.MeasurementToken, (c) => c.calibrationRequest());
+	const input = (0, react.useRef)(null);
+	const [value, setValue] = (0, react.useState)("");
+	const [unit, setUnit] = (0, react.useState)("m");
+	const [allPages, setAllPages] = (0, react.useState)(false);
+	const [recalculate, setRecalculate] = (0, react.useState)(true);
+	const [error, setError] = (0, react.useState)(null);
+	(0, react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("h2", {
+					id: "measurement-calibration-title",
+					className: "font-semibold",
+					children: t("measurement.calibrate")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-fg-muted text-sm",
+					children: t("measurement.knownLength")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t("measurement.length"), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t("measurement.unit"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+					className: control,
+					"aria-label": t("measurement.unit"),
+					value: unit,
+					onChange: (e) => setUnit(e.target.value),
+					children: measurement.units().map((u) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", { children: u }, u))
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: "flex items-center gap-2 text-sm",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "checkbox",
+						checked: allPages,
+						onChange: (e) => setAllPages(e.target.checked)
+					}), t("measurement.allPages")]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: "flex items-center gap-2 text-sm",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "checkbox",
+						checked: recalculate,
+						onChange: (e) => setRecalculate(e.target.checked)
+					}), t("measurement.recalculate")]
+				}),
+				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					role: "alert",
+					className: "text-sm text-red-600",
+					children: error
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex justify-end gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: button,
+						disabled: measurement.busy,
+						onClick: () => measurement.dismissCalibration(),
+						children: t("demo.cancel")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.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
@@ -1616,6 +2021,7 @@ function AppToolbar({ bar, className }) {
 			run
 		}),
 		renderCustom: {
+			"measurement-scale": () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MeasurementScaleButton, {}),
 			"zoom-controls": (variant) => variant === "inline" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomControls, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomButton, {}),
 			"quick-stamps": () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickStamps, {})
 		},
@@ -2062,7 +2468,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("");
 }
@@ -4471,12 +4883,13 @@ function RightSidebar() {
 	const comment = (0, _embedpdf_react_shell.useSurface)("comment");
 	const style = (0, _embedpdf_react_shell.useSurface)("annotation-style");
 	const redaction = (0, _embedpdf_react_shell.useSurface)("redaction");
+	const measurement = (0, _embedpdf_react_shell.useSurface)("measurement");
 	const stamps = (0, _embedpdf_react_shell.useSurface)("stamps");
 	const signatures = (0, _embedpdf_react_shell.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__ */ (0, react_jsx_runtime.jsxs)("aside", {
 		className: "border-border-subtle bg-surface flex w-72 shrink-0 flex-col border-l",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4493,7 +4906,7 @@ function RightSidebar() {
 					size: 16
 				})
 			})]
-		}), active === "style" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationStylePanel, {}) : active === "search" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchPanel, {}, documentId ?? "none") : active === "redaction" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RedactionPanel, {}) : active === "stamps" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StampsPanel, {}) : active === "signatures" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SignaturesPanel, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommentsPanel, {}, documentId ?? "none")]
+		}), active === "measurement" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MeasurementSection, {}, documentId ?? "none") : active === "style" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationStylePanel, {}) : active === "search" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchPanel, {}, documentId ?? "none") : active === "redaction" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RedactionPanel, {}) : active === "stamps" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StampsPanel, {}) : active === "signatures" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SignaturesPanel, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommentsPanel, {}, documentId ?? "none")]
 	});
 }
 function PageControls() {
@@ -5546,6 +5959,7 @@ function Shell() {
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RightSidebar, {}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RedactConfirmModal, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalibrationDialog, {}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SignatureBridge, {}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SignDialog, {}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SignatureMakerModal, {})
@@ -5576,7 +5990,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: () => Promise.resolve().then(() => require("./es-DYwzfxyt.cjs")).then((m) => m.es) };
+const BUILTIN_LOADERS = { es: () => Promise.resolve().then(() => require("./es-BXLlBo2b.cjs")).then((m) => m.es) };
 const isDict = (v) => typeof v === "object" && v !== null;
 /**
 * Deep-merge `over` into `base` (immutably), expanding dotted keys —
@@ -5727,6 +6141,7 @@ function FullViewer({ engine, initialDocuments, fallback, commands, icons, strin
 		}),
 		(0, _embedpdf_react_link.linkPlugin)(),
 		(0, _embedpdf_react_redaction.redactionPlugin)(),
+		(0, _embedpdf_react_measurement.measurementPlugin)(),
 		(0, _embedpdf_react_search.searchPlugin)(),
 		demoToolsPlugin(),
 		(0, _embedpdf_react_i18n.i18nPlugin)({
@@ -5795,6 +6210,12 @@ Object.defineProperty(exports, "InteractionToken", {
 		return _embedpdf_react_interaction.InteractionToken;
 	}
 });
+Object.defineProperty(exports, "MeasurementToken", {
+	enumerable: true,
+	get: function() {
+		return _embedpdf_react_measurement.MeasurementToken;
+	}
+});
 Object.defineProperty(exports, "MetadataToken", {
 	enumerable: true,
 	get: function() {