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

package/dist/redact-confirm-B6j36TPw.js

@@ -0,0 +1,83 @@
+import { t as Dialog } from "./dialog-B5GBisKv.js";
+import { useId, useState } from "react";
+import { useRedaction } from "@embedpdf/react/redaction";
+import { useT } from "@embedpdf/react/i18n";
+import { useSurface } from "@embedpdf/react/shell";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/redact-confirm.tsx
+/**
+* The apply-all confirm modal (`redact-confirm` shell surface, `exclusive:
+* 'modal'` via the command router). Shows the pending count and the
+* client-side collateral estimate — other annotations the apply will destroy —
+* before anything irreversible happens. The authoritative collateral count
+* comes back on the result. Escape cancels, unless the apply is running.
+*/
+function RedactConfirmModal() {
+	const t = useT();
+	const surface = useSurface("redact-confirm");
+	const redaction = useRedaction();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState(null);
+	const titleId = useId();
+	if (!surface.isOpen) return null;
+	const count = redaction.getPendingCount();
+	const collateral = redaction.estimateCollateral().count;
+	const apply = async () => {
+		setBusy(true);
+		setError(null);
+		try {
+			await redaction.applyAll();
+			surface.close();
+		} catch (error) {
+			setError(error instanceof Error ? error.message : String(error));
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Dialog, {
+		labelledBy: titleId,
+		onClose: () => {
+			if (!busy) surface.close();
+		},
+		className: "border-border bg-surface w-96 rounded-lg border p-4 shadow-xl",
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				id: titleId,
+				className: "text-fg text-base font-semibold",
+				children: t("demo.redactConfirmTitle")
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted mt-2 text-sm",
+				children: t("demo.redactConfirmBody", { params: { count } })
+			}),
+			collateral > 0 ? /* @__PURE__ */ jsx("p", {
+				className: "mt-2 text-sm font-medium text-red-600",
+				children: t("demo.redactConfirmCollateral", { params: { count: collateral } })
+			}) : null,
+			error ? /* @__PURE__ */ jsx("p", {
+				className: "mt-2 text-sm text-red-600",
+				children: error
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-4 flex justify-end gap-2",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: busy,
+					onClick: surface.close,
+					className: "border-border text-fg hover:bg-hover rounded-md border px-3 py-1.5 text-sm",
+					children: t("demo.cancel")
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: busy,
+					onClick: () => void apply(),
+					className: "rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-60",
+					children: busy ? t("demo.redactApplying") : t("demo.redactApply")
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { RedactConfirmModal };
+
+//# sourceMappingURL=redact-confirm-B6j36TPw.js.map

package/dist/redact-confirm-B6j36TPw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"redact-confirm-B6j36TPw.js","names":[],"sources":["../src/ui/redact-confirm.tsx"],"sourcesContent":["import { useId, useState } from 'react';\nimport { useRedaction } from '@embedpdf/react/redaction';\nimport { useSurface } from '@embedpdf/react/shell';\nimport { useT } from '@embedpdf/react/i18n';\nimport { Dialog } from './dialog';\n\n/**\n * The apply-all confirm modal (`redact-confirm` shell surface, `exclusive:\n * 'modal'` via the command router). Shows the pending count and the\n * client-side collateral estimate — other annotations the apply will destroy —\n * before anything irreversible happens. The authoritative collateral count\n * comes back on the result. Escape cancels, unless the apply is running.\n */\nexport function RedactConfirmModal() {\n  const t = useT();\n  const surface = useSurface('redact-confirm');\n  const redaction = useRedaction();\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const titleId = useId();\n\n  if (!surface.isOpen) return null;\n\n  const count = redaction.getPendingCount();\n  const collateral = redaction.estimateCollateral().count;\n\n  const apply = async () => {\n    setBusy(true);\n    setError(null);\n    try {\n      await redaction.applyAll();\n      surface.close();\n    } catch (error) {\n      setError(error instanceof Error ? error.message : String(error));\n    } finally {\n      setBusy(false);\n    }\n  };\n\n  return (\n    <Dialog\n      labelledBy={titleId}\n      onClose={() => {\n        if (!busy) surface.close();\n      }}\n      className=\"border-border bg-surface w-96 rounded-lg border p-4 shadow-xl\"\n    >\n      <h2 id={titleId} className=\"text-fg text-base font-semibold\">\n        {t('demo.redactConfirmTitle')}\n      </h2>\n      <p className=\"text-fg-muted mt-2 text-sm\">\n        {t('demo.redactConfirmBody', { params: { count } })}\n      </p>\n      {collateral > 0 ? (\n        <p className=\"mt-2 text-sm font-medium text-red-600\">\n          {t('demo.redactConfirmCollateral', { params: { count: collateral } })}\n        </p>\n      ) : null}\n      {error ? <p className=\"mt-2 text-sm text-red-600\">{error}</p> : null}\n      <div className=\"mt-4 flex justify-end gap-2\">\n        <button\n          type=\"button\"\n          disabled={busy}\n          onClick={surface.close}\n          className=\"border-border text-fg hover:bg-hover rounded-md border px-3 py-1.5 text-sm\"\n        >\n          {t('demo.cancel')}\n        </button>\n        <button\n          type=\"button\"\n          disabled={busy}\n          onClick={() => void apply()}\n          className=\"rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-60\"\n        >\n          {busy ? t('demo.redactApplying') : t('demo.redactApply')}\n        </button>\n      </div>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,SAAgB,qBAAqB;CACnC,MAAM,IAAI,KAAK;CACf,MAAM,UAAU,WAAW,gBAAgB;CAC3C,MAAM,YAAY,aAAa;CAC/B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CACtD,MAAM,UAAU,MAAM;CAEtB,IAAI,CAAC,QAAQ,QAAQ,OAAO;CAE5B,MAAM,QAAQ,UAAU,gBAAgB;CACxC,MAAM,aAAa,UAAU,mBAAmB,CAAC,CAAC;CAElD,MAAM,QAAQ,YAAY;EACxB,QAAQ,IAAI;EACZ,SAAS,IAAI;EACb,IAAI;GACF,MAAM,UAAU,SAAS;GACzB,QAAQ,MAAM;EAChB,SAAS,OAAO;GACd,SAAS,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,CAAC;EACjE,UAAU;GACR,QAAQ,KAAK;EACf;CACF;CAEA,OACE,qBAAC,QAAD;EACE,YAAY;EACZ,eAAe;GACb,IAAI,CAAC,MAAM,QAAQ,MAAM;EAC3B;EACA,WAAU;EALZ,UAAA;GAOE,oBAAC,MAAD;IAAI,IAAI;IAAS,WAAU;IACxB,UAAA,EAAE,yBAAyB;GAC1B,CAAA;GACJ,oBAAC,KAAD;IAAG,WAAU;IACV,UAAA,EAAE,0BAA0B,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;GACjD,CAAA;GACF,aAAa,IACZ,oBAAC,KAAD;IAAG,WAAU;IACV,UAAA,EAAE,gCAAgC,EAAE,QAAQ,EAAE,OAAO,WAAW,EAAE,CAAC;GACnE,CAAA,IACD;GACH,QAAQ,oBAAC,KAAD;IAAG,WAAU;IAA6B,UAAA;GAAS,CAAA,IAAI;GAChE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,UAAD;KACE,MAAK;KACL,UAAU;KACV,SAAS,QAAQ;KACjB,WAAU;KAET,UAAA,EAAE,aAAa;IACV,CAAA,GACR,oBAAC,UAAD;KACE,MAAK;KACL,UAAU;KACV,eAAe,KAAK,MAAM;KAC1B,WAAU;KAET,UAAA,OAAO,EAAE,qBAAqB,IAAI,EAAE,kBAAkB;IACjD,CAAA,CACL;;EACC;;AAEZ"}

package/dist/redact-confirm-CX_SY2ZN.cjs

@@ -0,0 +1,83 @@
+const require_dialog = require("./dialog-t8F13BL_.cjs");
+let react = require("react");
+let _embedpdf_react_redaction = require("@embedpdf/react/redaction");
+let _embedpdf_react_i18n = require("@embedpdf/react/i18n");
+let _embedpdf_react_shell = require("@embedpdf/react/shell");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui/redact-confirm.tsx
+/**
+* The apply-all confirm modal (`redact-confirm` shell surface, `exclusive:
+* 'modal'` via the command router). Shows the pending count and the
+* client-side collateral estimate — other annotations the apply will destroy —
+* before anything irreversible happens. The authoritative collateral count
+* comes back on the result. Escape cancels, unless the apply is running.
+*/
+function RedactConfirmModal() {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const surface = (0, _embedpdf_react_shell.useSurface)("redact-confirm");
+	const redaction = (0, _embedpdf_react_redaction.useRedaction)();
+	const [busy, setBusy] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	const titleId = (0, react.useId)();
+	if (!surface.isOpen) return null;
+	const count = redaction.getPendingCount();
+	const collateral = redaction.estimateCollateral().count;
+	const apply = async () => {
+		setBusy(true);
+		setError(null);
+		try {
+			await redaction.applyAll();
+			surface.close();
+		} catch (error) {
+			setError(error instanceof Error ? error.message : String(error));
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dialog.Dialog, {
+		labelledBy: titleId,
+		onClose: () => {
+			if (!busy) surface.close();
+		},
+		className: "border-border bg-surface w-96 rounded-lg border p-4 shadow-xl",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				id: titleId,
+				className: "text-fg text-base font-semibold",
+				children: t("demo.redactConfirmTitle")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-fg-muted mt-2 text-sm",
+				children: t("demo.redactConfirmBody", { params: { count } })
+			}),
+			collateral > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-2 text-sm font-medium text-red-600",
+				children: t("demo.redactConfirmCollateral", { params: { count: collateral } })
+			}) : null,
+			error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-2 text-sm text-red-600",
+				children: error
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-4 flex justify-end gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					disabled: busy,
+					onClick: surface.close,
+					className: "border-border text-fg hover:bg-hover rounded-md border px-3 py-1.5 text-sm",
+					children: t("demo.cancel")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					disabled: busy,
+					onClick: () => void apply(),
+					className: "rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-60",
+					children: busy ? t("demo.redactApplying") : t("demo.redactApply")
+				})]
+			})
+		]
+	});
+}
+//#endregion
+exports.RedactConfirmModal = RedactConfirmModal;
+
+//# sourceMappingURL=redact-confirm-CX_SY2ZN.cjs.map

package/dist/redact-confirm-CX_SY2ZN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"redact-confirm-CX_SY2ZN.cjs","names":["Dialog"],"sources":["../src/ui/redact-confirm.tsx"],"sourcesContent":["import { useId, useState } from 'react';\nimport { useRedaction } from '@embedpdf/react/redaction';\nimport { useSurface } from '@embedpdf/react/shell';\nimport { useT } from '@embedpdf/react/i18n';\nimport { Dialog } from './dialog';\n\n/**\n * The apply-all confirm modal (`redact-confirm` shell surface, `exclusive:\n * 'modal'` via the command router). Shows the pending count and the\n * client-side collateral estimate — other annotations the apply will destroy —\n * before anything irreversible happens. The authoritative collateral count\n * comes back on the result. Escape cancels, unless the apply is running.\n */\nexport function RedactConfirmModal() {\n  const t = useT();\n  const surface = useSurface('redact-confirm');\n  const redaction = useRedaction();\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const titleId = useId();\n\n  if (!surface.isOpen) return null;\n\n  const count = redaction.getPendingCount();\n  const collateral = redaction.estimateCollateral().count;\n\n  const apply = async () => {\n    setBusy(true);\n    setError(null);\n    try {\n      await redaction.applyAll();\n      surface.close();\n    } catch (error) {\n      setError(error instanceof Error ? error.message : String(error));\n    } finally {\n      setBusy(false);\n    }\n  };\n\n  return (\n    <Dialog\n      labelledBy={titleId}\n      onClose={() => {\n        if (!busy) surface.close();\n      }}\n      className=\"border-border bg-surface w-96 rounded-lg border p-4 shadow-xl\"\n    >\n      <h2 id={titleId} className=\"text-fg text-base font-semibold\">\n        {t('demo.redactConfirmTitle')}\n      </h2>\n      <p className=\"text-fg-muted mt-2 text-sm\">\n        {t('demo.redactConfirmBody', { params: { count } })}\n      </p>\n      {collateral > 0 ? (\n        <p className=\"mt-2 text-sm font-medium text-red-600\">\n          {t('demo.redactConfirmCollateral', { params: { count: collateral } })}\n        </p>\n      ) : null}\n      {error ? <p className=\"mt-2 text-sm text-red-600\">{error}</p> : null}\n      <div className=\"mt-4 flex justify-end gap-2\">\n        <button\n          type=\"button\"\n          disabled={busy}\n          onClick={surface.close}\n          className=\"border-border text-fg hover:bg-hover rounded-md border px-3 py-1.5 text-sm\"\n        >\n          {t('demo.cancel')}\n        </button>\n        <button\n          type=\"button\"\n          disabled={busy}\n          onClick={() => void apply()}\n          className=\"rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-60\"\n        >\n          {busy ? t('demo.redactApplying') : t('demo.redactApply')}\n        </button>\n      </div>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,SAAgB,qBAAqB;CACnC,MAAM,KAAA,GAAA,qBAAA,KAAA,CAAS;CACf,MAAM,WAAA,GAAA,sBAAA,WAAA,CAAqB,gBAAgB;CAC3C,MAAM,aAAA,GAAA,0BAAA,aAAA,CAAyB;CAC/B,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,SAAA,CAAoB,KAAK;CACtC,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,SAAA,CAAoC,IAAI;CACtD,MAAM,WAAA,GAAA,MAAA,MAAA,CAAgB;CAEtB,IAAI,CAAC,QAAQ,QAAQ,OAAO;CAE5B,MAAM,QAAQ,UAAU,gBAAgB;CACxC,MAAM,aAAa,UAAU,mBAAmB,CAAC,CAAC;CAElD,MAAM,QAAQ,YAAY;EACxB,QAAQ,IAAI;EACZ,SAAS,IAAI;EACb,IAAI;GACF,MAAM,UAAU,SAAS;GACzB,QAAQ,MAAM;EAChB,SAAS,OAAO;GACd,SAAS,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,CAAC;EACjE,UAAU;GACR,QAAQ,KAAK;EACf;CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,eAAAA,QAAD;EACE,YAAY;EACZ,eAAe;GACb,IAAI,CAAC,MAAM,QAAQ,MAAM;EAC3B;EACA,WAAU;EALZ,UAAA;GAOE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IAAI,IAAI;IAAS,WAAU;IACxB,UAAA,EAAE,yBAAyB;GAC1B,CAAA;GACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IAAG,WAAU;IACV,UAAA,EAAE,0BAA0B,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;GACjD,CAAA;GACF,aAAa,IACZ,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IAAG,WAAU;IACV,UAAA,EAAE,gCAAgC,EAAE,QAAQ,EAAE,OAAO,WAAW,EAAE,CAAC;GACnE,CAAA,IACD;GACH,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IAAG,WAAU;IAA6B,UAAA;GAAS,CAAA,IAAI;GAChE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KACE,MAAK;KACL,UAAU;KACV,SAAS,QAAQ;KACjB,WAAU;KAET,UAAA,EAAE,aAAa;IACV,CAAA,GACR,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KACE,MAAK;KACL,UAAU;KACV,eAAe,KAAK,MAAM;KAC1B,WAAU;KAET,UAAA,OAAO,EAAE,qBAAqB,IAAI,EAAE,kBAAkB;IACjD,CAAA,CACL;;EACC;;AAEZ"}

package/dist/redaction-panel-BmoIl-Ll.cjs

@@ -0,0 +1,96 @@
+const require_icons = require("./icons-x0Tc05bs.cjs");
+let _embedpdf_react_runtime = require("@embedpdf/react/runtime");
+let _embedpdf_react_annotation = require("@embedpdf/react/annotation");
+let _embedpdf_react_redaction = require("@embedpdf/react/redaction");
+let _embedpdf_react_i18n = require("@embedpdf/react/i18n");
+let _embedpdf_react_shell = require("@embedpdf/react/shell");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui/redaction-panel.tsx
+/**
+* The pending-redactions review panel (right sidebar). The list is a live view
+* over the annotation plane — deleting a mark here is deleting the annotation.
+* "Apply all" routes through the confirm modal: the apply is irreversible.
+*/
+function RedactionPanel() {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const redaction = (0, _embedpdf_react_redaction.useRedaction)();
+	const applying = (0, _embedpdf_react_redaction.useRedactionState)((state) => state.applying);
+	const pending = (0, _embedpdf_react_redaction.usePendingRedactions)();
+	const anno = (0, _embedpdf_react_runtime.useCapability)(_embedpdf_react_annotation.AnnotationToken);
+	const confirm = (0, _embedpdf_react_shell.useSurface)("redact-confirm");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "min-h-0 flex-1 overflow-y-auto p-2",
+			children: pending.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col items-center gap-3 px-4 py-10 text-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+					name: "redactionSidebar",
+					size: 32,
+					className: "text-fg-muted"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-fg-muted text-sm",
+					children: t("demo.redactionEmpty")
+				})]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "flex flex-col gap-1",
+				children: pending.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					role: "button",
+					tabIndex: 0,
+					onClick: () => anno.selection.set([item.ref]),
+					onKeyDown: (event) => event.key === "Enter" && anno.selection.set([item.ref]),
+					className: "hover:bg-hover group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-start",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+							name: item.kind === "area" ? "redactArea" : "redact",
+							size: 16,
+							className: "text-fg-muted shrink-0"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-fg min-w-0 flex-1 truncate text-sm",
+							children: item.overlayText ?? t(item.kind === "area" ? "demo.redactionArea" : "demo.redactionText")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-fg-muted shrink-0 text-xs",
+							children: t("demo.pageBadge", { params: { page: item.pageIndex >= 0 ? String(item.pageIndex + 1) : "?" } })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: (event) => {
+								event.stopPropagation();
+								anno.delete(item.ref);
+							},
+							className: "text-fg-muted hover:text-fg grid h-6 w-6 shrink-0 place-items-center rounded opacity-0 group-hover:opacity-100",
+							title: t("demo.redactionRemove"),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+								name: "trash",
+								size: 14
+							})
+						})
+					]
+				}) }, (0, _embedpdf_react_annotation.annotationKey)(item.ref)))
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "border-border-subtle flex shrink-0 gap-2 border-t p-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				disabled: pending.length === 0,
+				onClick: () => {
+					for (const item of pending) anno.delete(item.ref);
+				},
+				className: "border-border text-fg hover:bg-hover flex-1 rounded-md border px-3 py-1.5 text-sm disabled:opacity-40",
+				children: t("commands.redact.clearAll")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				disabled: pending.length === 0 || !redaction.canApply() || applying,
+				onClick: () => confirm.open(),
+				className: "flex-1 rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-40",
+				children: t("commands.redact.applyAll")
+			})]
+		})]
+	});
+}
+//#endregion
+exports.RedactionPanel = RedactionPanel;
+
+//# sourceMappingURL=redaction-panel-BmoIl-Ll.cjs.map

package/dist/redaction-panel-BmoIl-Ll.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"redaction-panel-BmoIl-Ll.cjs","names":["AnnotationToken","Icon"],"sources":["../src/ui/redaction-panel.tsx"],"sourcesContent":["import { useCapability } from '@embedpdf/react/runtime';\nimport { AnnotationToken } from '@embedpdf/react/annotation';\nimport { annotationKey } from '@embedpdf/react/annotation';\nimport { usePendingRedactions, useRedaction, useRedactionState } from '@embedpdf/react/redaction';\nimport { useSurface } from '@embedpdf/react/shell';\nimport { useT } from '@embedpdf/react/i18n';\nimport { Icon } from './icons';\n\n/**\n * The pending-redactions review panel (right sidebar). The list is a live view\n * over the annotation plane — deleting a mark here is deleting the annotation.\n * \"Apply all\" routes through the confirm modal: the apply is irreversible.\n */\nexport function RedactionPanel() {\n  const t = useT();\n  const redaction = useRedaction();\n  const applying = useRedactionState((state) => state.applying);\n  const pending = usePendingRedactions();\n  const anno = useCapability(AnnotationToken);\n  const confirm = useSurface('redact-confirm');\n\n  return (\n    <div className=\"flex min-h-0 flex-1 flex-col\">\n      <div className=\"min-h-0 flex-1 overflow-y-auto p-2\">\n        {pending.length === 0 ? (\n          <div className=\"flex flex-col items-center gap-3 px-4 py-10 text-center\">\n            <Icon name=\"redactionSidebar\" size={32} className=\"text-fg-muted\" />\n            <p className=\"text-fg-muted text-sm\">{t('demo.redactionEmpty')}</p>\n          </div>\n        ) : (\n          <ul className=\"flex flex-col gap-1\">\n            {pending.map((item) => (\n              <li key={annotationKey(item.ref)}>\n                <div\n                  role=\"button\"\n                  tabIndex={0}\n                  onClick={() => anno.selection.set([item.ref])}\n                  onKeyDown={(event) => event.key === 'Enter' && anno.selection.set([item.ref])}\n                  className=\"hover:bg-hover group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-start\"\n                >\n                  <Icon\n                    name={item.kind === 'area' ? 'redactArea' : 'redact'}\n                    size={16}\n                    className=\"text-fg-muted shrink-0\"\n                  />\n                  <span className=\"text-fg min-w-0 flex-1 truncate text-sm\">\n                    {item.overlayText ??\n                      t(item.kind === 'area' ? 'demo.redactionArea' : 'demo.redactionText')}\n                  </span>\n                  <span className=\"text-fg-muted shrink-0 text-xs\">\n                    {t('demo.pageBadge', {\n                      params: { page: item.pageIndex >= 0 ? String(item.pageIndex + 1) : '?' },\n                    })}\n                  </span>\n                  <button\n                    type=\"button\"\n                    onClick={(event) => {\n                      event.stopPropagation();\n                      void anno.delete(item.ref);\n                    }}\n                    className=\"text-fg-muted hover:text-fg grid h-6 w-6 shrink-0 place-items-center rounded opacity-0 group-hover:opacity-100\"\n                    title={t('demo.redactionRemove')}\n                  >\n                    <Icon name=\"trash\" size={14} />\n                  </button>\n                </div>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n      <div className=\"border-border-subtle flex shrink-0 gap-2 border-t p-3\">\n        <button\n          type=\"button\"\n          disabled={pending.length === 0}\n          onClick={() => {\n            for (const item of pending) void anno.delete(item.ref);\n          }}\n          className=\"border-border text-fg hover:bg-hover flex-1 rounded-md border px-3 py-1.5 text-sm disabled:opacity-40\"\n        >\n          {t('commands.redact.clearAll')}\n        </button>\n        <button\n          type=\"button\"\n          disabled={pending.length === 0 || !redaction.canApply() || applying}\n          onClick={() => confirm.open()}\n          className=\"flex-1 rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-40\"\n        >\n          {t('commands.redact.applyAll')}\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/redaction-panel-IJDshSJI.js

@@ -0,0 +1,96 @@
+import { n as Icon } from "./icons-BrK5iVL8.js";
+import { useCapability } from "@embedpdf/react/runtime";
+import { AnnotationToken, annotationKey } from "@embedpdf/react/annotation";
+import { usePendingRedactions, useRedaction, useRedactionState } from "@embedpdf/react/redaction";
+import { useT } from "@embedpdf/react/i18n";
+import { useSurface } from "@embedpdf/react/shell";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/redaction-panel.tsx
+/**
+* The pending-redactions review panel (right sidebar). The list is a live view
+* over the annotation plane — deleting a mark here is deleting the annotation.
+* "Apply all" routes through the confirm modal: the apply is irreversible.
+*/
+function RedactionPanel() {
+	const t = useT();
+	const redaction = useRedaction();
+	const applying = useRedactionState((state) => state.applying);
+	const pending = usePendingRedactions();
+	const anno = useCapability(AnnotationToken);
+	const confirm = useSurface("redact-confirm");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-y-auto p-2",
+			children: pending.length === 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-3 px-4 py-10 text-center",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "redactionSidebar",
+					size: 32,
+					className: "text-fg-muted"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-fg-muted text-sm",
+					children: t("demo.redactionEmpty")
+				})]
+			}) : /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-1",
+				children: pending.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", {
+					role: "button",
+					tabIndex: 0,
+					onClick: () => anno.selection.set([item.ref]),
+					onKeyDown: (event) => event.key === "Enter" && anno.selection.set([item.ref]),
+					className: "hover:bg-hover group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-start",
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							name: item.kind === "area" ? "redactArea" : "redact",
+							size: 16,
+							className: "text-fg-muted shrink-0"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-fg min-w-0 flex-1 truncate text-sm",
+							children: item.overlayText ?? t(item.kind === "area" ? "demo.redactionArea" : "demo.redactionText")
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-fg-muted shrink-0 text-xs",
+							children: t("demo.pageBadge", { params: { page: item.pageIndex >= 0 ? String(item.pageIndex + 1) : "?" } })
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: (event) => {
+								event.stopPropagation();
+								anno.delete(item.ref);
+							},
+							className: "text-fg-muted hover:text-fg grid h-6 w-6 shrink-0 place-items-center rounded opacity-0 group-hover:opacity-100",
+							title: t("demo.redactionRemove"),
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "trash",
+								size: 14
+							})
+						})
+					]
+				}) }, annotationKey(item.ref)))
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "border-border-subtle flex shrink-0 gap-2 border-t p-3",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: pending.length === 0,
+				onClick: () => {
+					for (const item of pending) anno.delete(item.ref);
+				},
+				className: "border-border text-fg hover:bg-hover flex-1 rounded-md border px-3 py-1.5 text-sm disabled:opacity-40",
+				children: t("commands.redact.clearAll")
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: pending.length === 0 || !redaction.canApply() || applying,
+				onClick: () => confirm.open(),
+				className: "flex-1 rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-40",
+				children: t("commands.redact.applyAll")
+			})]
+		})]
+	});
+}
+//#endregion
+export { RedactionPanel };
+
+//# sourceMappingURL=redaction-panel-IJDshSJI.js.map

package/dist/redaction-panel-IJDshSJI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"redaction-panel-IJDshSJI.js","names":[],"sources":["../src/ui/redaction-panel.tsx"],"sourcesContent":["import { useCapability } from '@embedpdf/react/runtime';\nimport { AnnotationToken } from '@embedpdf/react/annotation';\nimport { annotationKey } from '@embedpdf/react/annotation';\nimport { usePendingRedactions, useRedaction, useRedactionState } from '@embedpdf/react/redaction';\nimport { useSurface } from '@embedpdf/react/shell';\nimport { useT } from '@embedpdf/react/i18n';\nimport { Icon } from './icons';\n\n/**\n * The pending-redactions review panel (right sidebar). The list is a live view\n * over the annotation plane — deleting a mark here is deleting the annotation.\n * \"Apply all\" routes through the confirm modal: the apply is irreversible.\n */\nexport function RedactionPanel() {\n  const t = useT();\n  const redaction = useRedaction();\n  const applying = useRedactionState((state) => state.applying);\n  const pending = usePendingRedactions();\n  const anno = useCapability(AnnotationToken);\n  const confirm = useSurface('redact-confirm');\n\n  return (\n    <div className=\"flex min-h-0 flex-1 flex-col\">\n      <div className=\"min-h-0 flex-1 overflow-y-auto p-2\">\n        {pending.length === 0 ? (\n          <div className=\"flex flex-col items-center gap-3 px-4 py-10 text-center\">\n            <Icon name=\"redactionSidebar\" size={32} className=\"text-fg-muted\" />\n            <p className=\"text-fg-muted text-sm\">{t('demo.redactionEmpty')}</p>\n          </div>\n        ) : (\n          <ul className=\"flex flex-col gap-1\">\n            {pending.map((item) => (\n              <li key={annotationKey(item.ref)}>\n                <div\n                  role=\"button\"\n                  tabIndex={0}\n                  onClick={() => anno.selection.set([item.ref])}\n                  onKeyDown={(event) => event.key === 'Enter' && anno.selection.set([item.ref])}\n                  className=\"hover:bg-hover group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-start\"\n                >\n                  <Icon\n                    name={item.kind === 'area' ? 'redactArea' : 'redact'}\n                    size={16}\n                    className=\"text-fg-muted shrink-0\"\n                  />\n                  <span className=\"text-fg min-w-0 flex-1 truncate text-sm\">\n                    {item.overlayText ??\n                      t(item.kind === 'area' ? 'demo.redactionArea' : 'demo.redactionText')}\n                  </span>\n                  <span className=\"text-fg-muted shrink-0 text-xs\">\n                    {t('demo.pageBadge', {\n                      params: { page: item.pageIndex >= 0 ? String(item.pageIndex + 1) : '?' },\n                    })}\n                  </span>\n                  <button\n                    type=\"button\"\n                    onClick={(event) => {\n                      event.stopPropagation();\n                      void anno.delete(item.ref);\n                    }}\n                    className=\"text-fg-muted hover:text-fg grid h-6 w-6 shrink-0 place-items-center rounded opacity-0 group-hover:opacity-100\"\n                    title={t('demo.redactionRemove')}\n                  >\n                    <Icon name=\"trash\" size={14} />\n                  </button>\n                </div>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n      <div className=\"border-border-subtle flex shrink-0 gap-2 border-t p-3\">\n        <button\n          type=\"button\"\n          disabled={pending.length === 0}\n          onClick={() => {\n            for (const item of pending) void anno.delete(item.ref);\n          }}\n          className=\"border-border text-fg hover:bg-hover flex-1 rounded-md border px-3 py-1.5 text-sm disabled:opacity-40\"\n        >\n          {t('commands.redact.clearAll')}\n        </button>\n        <button\n          type=\"button\"\n          disabled={pending.length === 0 || !redaction.canApply() || applying}\n          onClick={() => confirm.open()}\n          className=\"flex-1 rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-40\"\n        >\n          {t('commands.redact.applyAll')}\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,SAAgB,iBAAiB;CAC/B,MAAM,IAAI,KAAK;CACf,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,mBAAmB,UAAU,MAAM,QAAQ;CAC5D,MAAM,UAAU,qBAAqB;CACrC,MAAM,OAAO,cAAc,eAAe;CAC1C,MAAM,UAAU,WAAW,gBAAgB;CAE3C,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,QAAQ,WAAW,IAClB,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,MAAD;KAAM,MAAK;KAAmB,MAAM;KAAI,WAAU;IAAiB,CAAA,GACnE,oBAAC,KAAD;KAAG,WAAU;KAAyB,UAAA,EAAE,qBAAqB;IAAK,CAAA,CAC/D;GAEL,CAAA,IAAA,oBAAC,MAAD;IAAI,WAAU;IACX,UAAA,QAAQ,KAAK,SACZ,oBAAC,MAAD,EAAA,UACE,qBAAC,OAAD;KACE,MAAK;KACL,UAAU;KACV,eAAe,KAAK,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC;KAC5C,YAAY,UAAU,MAAM,QAAQ,WAAW,KAAK,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC;KAC5E,WAAU;KALZ,UAAA;MAOE,oBAAC,MAAD;OACE,MAAM,KAAK,SAAS,SAAS,eAAe;OAC5C,MAAM;OACN,WAAU;MACX,CAAA;MACD,oBAAC,QAAD;OAAM,WAAU;OACb,UAAA,KAAK,eACJ,EAAE,KAAK,SAAS,SAAS,uBAAuB,oBAAoB;MAClE,CAAA;MACN,oBAAC,QAAD;OAAM,WAAU;OACb,UAAA,EAAE,kBAAkB,EACnB,QAAQ,EAAE,MAAM,KAAK,aAAa,IAAI,OAAO,KAAK,YAAY,CAAC,IAAI,IAAI,EACzE,CAAC;MACG,CAAA;MACN,oBAAC,UAAD;OACE,MAAK;OACL,UAAU,UAAU;QAClB,MAAM,gBAAgB;QACtB,KAAU,OAAO,KAAK,GAAG;OAC3B;OACA,WAAU;OACV,OAAO,EAAE,sBAAsB;OAE/B,UAAA,oBAAC,MAAD;QAAM,MAAK;QAAQ,MAAM;OAAK,CAAA;MACxB,CAAA;KACL;IACH,CAAA,EAAA,GAlCK,cAAc,KAAK,GAAG,CAkC3B,CACL;GACC,CAAA;EAEH,CAAA,GACL,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,UAAD;IACE,MAAK;IACL,UAAU,QAAQ,WAAW;IAC7B,eAAe;KACb,KAAK,MAAM,QAAQ,SAAS,KAAU,OAAO,KAAK,GAAG;IACvD;IACA,WAAU;IAET,UAAA,EAAE,0BAA0B;GACvB,CAAA,GACR,oBAAC,UAAD;IACE,MAAK;IACL,UAAU,QAAQ,WAAW,KAAK,CAAC,UAAU,SAAS,KAAK;IAC3D,eAAe,QAAQ,KAAK;IAC5B,WAAU;IAET,UAAA,EAAE,0BAA0B;GACvB,CAAA,CACL;EACF,CAAA,CAAA;;AAET"}

package/dist/search-panel-HfIhJm1M.js

@@ -0,0 +1,249 @@
+import { n as Icon } from "./icons-BrK5iVL8.js";
+import { r as buttonClass } from "./toolbar-z9od3tKl.js";
+import { i as useCloseOnPick } from "./sheet-R6XDgyEf.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useSearch, useSearchHits, useSearchState, validateSearchQuery } from "@embedpdf/react/search";
+import { useT } from "@embedpdf/react/i18n";
+import { useSurfaceFocus } from "@embedpdf/react/shell";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/search-panel.tsx
+/**
+* The search panel — the search sidebar on the plugin-search capability. One
+* shape end to end: the flat `SearchQuery` {text, regex, matchCase, wholeWord}
+* is what the engine matches, what the plugin stores (document-scoped,
+* survives the sidebar closing), and what this box renders.
+* The panel keeps only a draft of it for keystroke/debounce echo.
+*
+* Data flow:
+*   type / toggle → validateSearchQuery → (debounced) search(draftQuery)
+*   useSearchState() → query / status / hitCount / activeHitIndex (reactive)
+*   useSearchHits() → the streamed hit list
+*   click a hit / prev / next → goTo/prev/next (capability reveals it on-page)
+*
+* The look: a magnifier input with a clear button, option checkboxes, a
+* results-found counter with prev/next, and a per-page grouped snippet list
+* with the match bolded and the active hit accented, in this app's semantic
+* tokens. matchDiacritics exists in the engine but is deliberately not
+* exposed here.
+*/
+const DEBOUNCE_MS = 300;
+/** Field-wise equality on the flat query — the mount/echo no-op guard. */
+const sameQuery = (left, right) => left != null && left.text === right.text && !!left.regex === !!right.regex && !!left.matchCase === !!right.matchCase && !!left.wholeWord === !!right.wholeWord;
+function Checkbox({ label, checked, onChange }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: "text-fg-secondary flex cursor-pointer select-none items-center gap-2 text-xs font-medium",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "relative flex h-4 w-4 items-center justify-center",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				checked,
+				onChange: (event) => onChange(event.target.checked),
+				className: "border-border bg-surface checked:border-accent checked:bg-accent rounded-xs peer h-4 w-4 shrink-0 appearance-none border transition-colors"
+			}), /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				className: "text-on-accent pointer-events-none absolute h-3 w-3 opacity-0 peer-checked:opacity-100",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 3,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+			})]
+		}), label]
+	});
+}
+function renderSnippet(snippet) {
+	if (!snippet) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		snippet.before,
+		/* @__PURE__ */ jsx("span", {
+			className: "text-accent font-semibold",
+			children: snippet.match
+		}),
+		snippet.after
+	] });
+}
+function HitLine({ hit, active, onClick }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (active) ref.current?.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest"
+		});
+	}, [active]);
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		onClick,
+		className: `w-full rounded border p-2 text-left text-sm transition-colors ${active ? "border-accent bg-accent-light text-fg" : "border-border-subtle bg-surface text-fg-secondary hover:bg-hover"}`,
+		children: /* @__PURE__ */ jsx("span", { children: renderSnippet(hit.snippet) })
+	});
+}
+function SearchPanel() {
+	const t = useT();
+	const search = useSearch();
+	const { query, status, hitCount, activeHitIndex } = useSearchState();
+	const hits = useSearchHits();
+	const closeOnPick = useCloseOnPick();
+	const [draft, setDraft] = useState(() => query?.text ?? "");
+	const [matchCase, setMatchCase] = useState(() => query?.matchCase ?? false);
+	const [wholeWord, setWholeWord] = useState(() => query?.wholeWord ?? false);
+	const [regex, setRegex] = useState(() => query?.regex ?? false);
+	const inputRef = useRef(null);
+	useSurfaceFocus("search", inputRef, { select: true });
+	const draftQuery = {
+		text: draft,
+		regex,
+		matchCase,
+		wholeWord
+	};
+	const validation = draft && regex ? validateSearchQuery(draftQuery) : { ok: true };
+	useEffect(() => {
+		if (!validation.ok || sameQuery(query, draftQuery)) return;
+		if (draft === "" && query === null) return;
+		const id = setTimeout(() => search.search(draftQuery), DEBOUNCE_MS);
+		return () => clearTimeout(id);
+	}, [
+		draft,
+		matchCase,
+		wholeWord,
+		regex,
+		query,
+		validation.ok,
+		search
+	]);
+	const grouped = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		hits.forEach((hit, index) => {
+			const arr = map.get(hit.pageIndex);
+			if (arr) arr.push({
+				hit,
+				index
+			});
+			else map.set(hit.pageIndex, [{
+				hit,
+				index
+			}]);
+		});
+		return [...map.entries()].sort((left, right) => left[0] - right[0]);
+	}, [hits]);
+	const searching = status === "searching";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "p-3",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "text-fg-muted pointer-events-none absolute inset-y-0 start-0 flex items-center ps-2.5",
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "search",
+								size: 16
+							})
+						}),
+						/* @__PURE__ */ jsx("input", {
+							ref: inputRef,
+							type: "text",
+							value: draft,
+							placeholder: t("demo.searchPlaceholder"),
+							onChange: (event) => setDraft(event.target.value),
+							className: `bg-surface text-fg w-full rounded-md border py-1.5 pe-9 ps-8 text-sm outline-none focus:ring-1 ${validation.ok ? "border-border focus:border-accent focus:ring-accent" : "border-red-400 focus:border-red-400 focus:ring-red-400"}`
+						}),
+						draft && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => {
+								setDraft("");
+								inputRef.current?.focus();
+							},
+							className: "text-fg-muted hover:text-fg-secondary absolute inset-y-0 end-0 flex items-center pe-2.5",
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "x",
+								size: 16
+							})
+						})
+					]
+				}),
+				!validation.ok && /* @__PURE__ */ jsx("p", {
+					className: "mt-1.5 text-xs text-red-500",
+					children: validation.message
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-3 flex flex-col gap-2",
+					children: [
+						/* @__PURE__ */ jsx(Checkbox, {
+							label: t("demo.searchCaseSensitive"),
+							checked: matchCase,
+							onChange: setMatchCase
+						}),
+						/* @__PURE__ */ jsx(Checkbox, {
+							label: t("demo.searchWholeWord"),
+							checked: wholeWord,
+							onChange: setWholeWord
+						}),
+						/* @__PURE__ */ jsx(Checkbox, {
+							label: t("demo.searchRegex"),
+							checked: regex,
+							onChange: setRegex
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("hr", { className: "border-border-subtle mb-2 mt-4" }),
+				status !== "idle" && /* @__PURE__ */ jsxs("div", {
+					className: "flex h-8 items-center justify-between",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-fg-muted text-xs",
+						children: hitCount === 0 ? t(searching ? "demo.searchSearching" : "demo.searchNoResults") : t("demo.searchResults", { params: { count: hitCount } })
+					}), hitCount > 1 && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							title: t("demo.searchPrevious"),
+							className: buttonClass(false),
+							onClick: () => search.previousHit(),
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "chevronLeft",
+								size: 20,
+								className: "rtl:-scale-x-100"
+							})
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							title: t("demo.searchNext"),
+							className: buttonClass(false),
+							onClick: () => search.nextHit(),
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "chevronRight",
+								size: 20,
+								className: "rtl:-scale-x-100"
+							})
+						})]
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-3 pb-3",
+			children: grouped.map(([pageIndex, items]) => /* @__PURE__ */ jsxs("div", {
+				className: "mt-2 first:mt-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "bg-surface/80 text-fg-muted py-2 text-xs backdrop-blur",
+					children: t("demo.searchPage", { params: { page: pageIndex + 1 } })
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-2",
+					children: items.map(({ hit, index }) => /* @__PURE__ */ jsx(HitLine, {
+						hit,
+						active: index === activeHitIndex,
+						onClick: () => {
+							search.goToHit(index);
+							closeOnPick();
+						}
+					}, index))
+				})]
+			}, pageIndex))
+		})]
+	});
+}
+//#endregion
+export { SearchPanel };
+
+//# sourceMappingURL=search-panel-HfIhJm1M.js.map