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

package/dist/measurement-CQdbnIrn.js

@@ -0,0 +1,325 @@
+import { t as Dialog } from "./dialog-BIb373cg.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-CQdbnIrn.js.map

package/dist/measurement-CQdbnIrn.js.map

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