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

package/dist/annotation-style--rPIZsuP.js

@@ -0,0 +1,879 @@
+import { n as Icon } from "./icons-BrK5iVL8.js";
+import { n as useAnnotationFonts } from "./annotation-fonts-BqoLZ4Mp.js";
+import { t as useLabel } from "./labels-C6_i87Oj.js";
+import { useEffect, useRef, useState } from "react";
+import { useDocumentId, useKernelValue, useOptionalCapability } from "@embedpdf/react/runtime";
+import { useInteractionState } from "@embedpdf/react/interaction";
+import { annotationKey, useAnnotation, useAnnotationDefaults, useAnnotationProperties, useAnnotationState } from "@embedpdf/react/annotation";
+import { RedactionToken } from "@embedpdf/react/redaction";
+import { useT } from "@embedpdf/react/i18n";
+import { useCommands } from "@embedpdf/react/commands";
+import { observeOutsidePress } from "@embedpdf/web";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/annotation-flags.tsx
+/**
+* The annotation flags section: a live test surface for `/F` (ISO 32000
+* Table 167). Select any annotation(s) and toggle flags. Flags are
+* properties like any other: the reads come from `useAnnotationProperties()`
+* (a flag the selection disagrees on is `mixed`, an indeterminate checkbox),
+* each named as the schema names it, and the writes go through
+* `selection.update({ locked: true })`. The hint under each is the viewer's.
+*
+* Things to try:
+*   - `locked`: the selection keeps its outline but loses handles/knob; move,
+*     restyle and delete are refused; unchecking it here still works.
+*   - `hidden` / `noView`: the annotation disappears (it stays selected, so
+*     this panel can bring it back).
+*   - `readOnly`: visible but no longer clickable — deselect and try.
+*   - `noZoom` / `noRotate`: zoom or rotate the page; the body keeps its
+*     screen size / stays upright, anchored at its top-left corner.
+*   - `print`: flip it off and print/flatten elsewhere — the annotation is
+*     excluded (viewer rendering is unaffected).
+*/
+/** What each flag does, in a few words under its name: the hint's key. */
+const FLAG_HINTS = {
+	print: "annotationFlags.print",
+	hidden: "annotationFlags.hidden",
+	noView: "annotationFlags.noView",
+	toggleNoView: "annotationFlags.toggleNoView",
+	readOnly: "annotationFlags.readOnly",
+	locked: "annotationFlags.locked",
+	lockedContents: "annotationFlags.lockedContents",
+	noZoom: "annotationFlags.noZoom",
+	noRotate: "annotationFlags.noRotate",
+	invisible: "annotationFlags.invisible"
+};
+function FlagRow({ label, hint, value, onToggle }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (ref.current) ref.current.indeterminate = value === null;
+	}, [value]);
+	return /* @__PURE__ */ jsxs("label", {
+		className: "hover:bg-hover flex cursor-pointer items-start gap-2.5 rounded px-1.5 py-1.5",
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			type: "checkbox",
+			className: "accent-accent mt-0.5",
+			checked: value === true,
+			onChange: () => onToggle(value !== true)
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-fg block text-sm leading-tight",
+				children: label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-fg-muted block text-xs leading-tight",
+				children: hint
+			})]
+		})]
+	});
+}
+/** The `/F` flags of the current selection, live-editable. Renders nothing
+*  when nothing is selected (the style panel shows its tool defaults then). */
+function AnnotationFlagsSection() {
+	const t = useT();
+	const label = useLabel();
+	const annotation = useAnnotation();
+	const { properties, values, mixed } = useAnnotationProperties();
+	const flags = properties.filter((property) => property.control === "flag");
+	if (!flags.length) return null;
+	const valueOf = (key) => mixed.includes(key) ? null : values[key] === true;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "border-border mt-2 border-t pt-4",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-fg-muted mb-2 text-[11px] font-semibold uppercase tracking-wide",
+			children: t("annotationFlags.title")
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children: flags.map((flag) => /* @__PURE__ */ jsx(FlagRow, {
+				label: label(flag),
+				hint: t(FLAG_HINTS[flag.key]),
+				value: valueOf(flag.key),
+				onToggle: (next) => void annotation.selection.update({ [flag.key]: next })
+			}, flag.key))
+		})]
+	});
+}
+//#endregion
+//#region src/ui/annotation-style.tsx
+/**
+* The annotation style panel. The plugin owns the schema and the state; this
+* file owns only how each property renders and the engine fields it writes
+* back. There is no per-subtype branching here: a new annotation kind that
+* declares its properties in the kind table gets a working style panel for free.
+*
+* Data flow (mirrors examples/react's AnnotationSidebar):
+*   selection present → useAnnotationProperties(), write selection.update()
+*   nothing selected  → useAnnotationProperties(tool), write tools.updateDefaults(tool, …)
+*
+* The look: a six-column swatch grid, range slider, SVG stroke / line-ending
+* dropdowns, font-size combo and align toggles, styled with this app's
+* semantic tokens (bg-surface / text-fg / border-border …).
+*/
+const PRESET_COLORS = [
+	"#000000",
+	"#5f6368",
+	"#e44234",
+	"#ff8b00",
+	"#ffd500",
+	"#00cc66",
+	"#00b8d9",
+	"#4a90e2",
+	"#9b51e0",
+	"#f272c8",
+	"#a0522d",
+	"#ffffff"
+];
+/** The standard fonts the picker offers, of the schema's; the registered fonts follow them. */
+const OFFERED_FONTS = [
+	"helvetica",
+	"helvetica-bold",
+	"times-roman",
+	"courier"
+];
+const FONT_SIZES = [
+	8,
+	9,
+	10,
+	11,
+	12,
+	14,
+	16,
+	18,
+	24,
+	36,
+	48,
+	72
+];
+/** The borders the picker offers: the schema's styles, a dash or a cloud in a few sizes. */
+const BORDER_OPTS = [
+	{
+		key: "solid",
+		make: () => ({ kind: "solid" })
+	},
+	{
+		key: "dashed-6-2",
+		make: () => ({
+			kind: "dashed",
+			dash: [6, 2]
+		})
+	},
+	{
+		key: "dashed-3-3",
+		make: () => ({
+			kind: "dashed",
+			dash: [3, 3]
+		})
+	},
+	{
+		key: "dashed-1-2",
+		make: () => ({
+			kind: "dashed",
+			dash: [1, 2]
+		})
+	},
+	{
+		key: "cloudy-1",
+		make: () => ({
+			kind: "cloudy",
+			intensity: 1
+		})
+	},
+	{
+		key: "cloudy-2",
+		make: () => ({
+			kind: "cloudy",
+			intensity: 2
+		})
+	}
+];
+const borderKey = (border) => border.kind === "cloudy" ? `cloudy-${border.intensity >= 2 ? 2 : 1}` : border.kind === "dashed" ? `dashed-${border.dash.join("-")}` : "solid";
+/** The border the three engine fields describe: a cloud wins over the style under it. */
+const borderOf = (values) => {
+	const intensity = values.cloudyIntensity;
+	if (intensity) return {
+		kind: "cloudy",
+		intensity
+	};
+	const dash = values.dashArray;
+	return values.borderStyle === "dashed" ? {
+		kind: "dashed",
+		dash: dash?.length ? dash : [3, 3]
+	} : { kind: "solid" };
+};
+/** The engine fields that state a border, every one of them (a patch replaces each whole). */
+const borderFields = (border) => ({
+	borderStyle: border.kind === "dashed" ? "dashed" : "solid",
+	dashArray: border.kind === "dashed" ? border.dash : null,
+	cloudyIntensity: border.kind === "cloudy" ? border.intensity : null
+});
+/** The option of a choice with this value, for its label. */
+const optionOf = (options, value) => options.find((option) => option.value === value);
+function Field({ label, mixed, children }) {
+	const t = useT();
+	return /* @__PURE__ */ jsxs("section", {
+		className: "mb-5",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "text-fg mb-2 block text-sm font-medium",
+			children: [label, mixed && /* @__PURE__ */ jsx("span", {
+				className: "text-fg-muted ms-1.5 text-xs font-normal",
+				children: t("stylePanel.mixed")
+			})]
+		}), children]
+	});
+}
+const isTransparent = (color) => color == null || color === "transparent" || /^#([0-9a-f]{8})$/i.test(color) && color.slice(-2).toLowerCase() === "00";
+function Swatch({ color, active, onSelect }) {
+	const t = useT();
+	const style = isTransparent(color) ? {
+		backgroundColor: "#fff",
+		backgroundImage: "linear-gradient(45deg, transparent 40%, #ef4444 40%, #ef4444 60%, transparent 60%)",
+		backgroundSize: "100% 100%"
+	} : { backgroundColor: color };
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title: isTransparent(color) ? t("stylePanel.transparent") : color,
+		onClick: () => onSelect(color),
+		className: `border-border-strong h-5 w-5 rounded-full border ${active ? "outline-accent outline outline-2 outline-offset-2" : ""}`,
+		style
+	});
+}
+function SwatchGrid({ value, onSelect, allowTransparent }) {
+	const active = (color) => color.toLowerCase() === (value ?? "").toLowerCase();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-6 gap-x-1 gap-y-3",
+		children: [PRESET_COLORS.map((color) => /* @__PURE__ */ jsx(Swatch, {
+			color,
+			active: active(color),
+			onSelect
+		}, color)), allowTransparent && /* @__PURE__ */ jsx(Swatch, {
+			color: "transparent",
+			active: isTransparent(value ?? null),
+			onSelect
+		})]
+	});
+}
+function RangeSlider({ value, min, max, step, onChange }) {
+	return /* @__PURE__ */ jsx("input", {
+		type: "range",
+		className: "accent-accent mb-1.5 h-1 w-full cursor-pointer",
+		value,
+		min,
+		max,
+		step,
+		onChange: (event) => onChange(parseFloat(event.target.value))
+	});
+}
+/** Close an open dropdown on a press outside it; the root holds its trigger too. */
+function useOutsideClose(open, close) {
+	const rootRef = useRef(null);
+	useEffect(() => {
+		const root = rootRef.current;
+		return open && root ? observeOutsidePress(root, close) : void 0;
+	}, [open, close]);
+	return rootRef;
+}
+function DropdownShell({ trigger, children }) {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: useOutsideClose(open, () => setOpen(false)),
+		className: "relative w-full",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setOpen((previous) => !previous),
+			className: "border-border bg-surface text-fg flex w-full items-center justify-between gap-2 rounded border px-3 py-1.5",
+			children: [trigger, /* @__PURE__ */ jsx(Icon, {
+				name: "chevronDown",
+				size: 16,
+				className: "text-fg-secondary shrink-0"
+			})]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "border-border bg-elevated absolute z-10 mt-1 max-h-60 w-full overflow-y-auto rounded border p-1 shadow-lg",
+			children: children(() => setOpen(false))
+		})]
+	});
+}
+function OptionRow({ selected, title, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title,
+		"aria-label": title,
+		onClick,
+		className: `hover:bg-hover flex w-full items-center rounded px-2 py-1.5 text-start text-sm ${selected ? "bg-selected text-accent" : "text-fg"}`,
+		children
+	});
+}
+function borderSvg(border) {
+	if (border.kind === "cloudy") {
+		const radius = border.intensity >= 2 ? 5 : 3;
+		const bumps = Math.ceil(80 / (radius * 2));
+		const step = 80 / bumps;
+		const baseline = radius + 1;
+		const viewH = radius * 2 + 2;
+		const parts = [`M 0 ${baseline}`];
+		for (let i = 0; i < bumps; i++) parts.push(`A ${radius} ${radius} 0 0 1 ${step * (i + 1)} ${baseline}`);
+		return /* @__PURE__ */ jsx("svg", {
+			width: "80",
+			height: viewH,
+			viewBox: `0 0 80 ${viewH}`,
+			children: /* @__PURE__ */ jsx("path", {
+				d: parts.join(" "),
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinejoin: "round",
+				strokeLinecap: "round"
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("svg", {
+		width: "80",
+		height: "8",
+		viewBox: "0 0 80 8",
+		children: /* @__PURE__ */ jsx("line", {
+			x1: "0",
+			y1: "4",
+			x2: "80",
+			y2: "4",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeDasharray: border.kind === "dashed" ? border.dash.join(" ") : void 0
+		})
+	});
+}
+function BorderSelect({ value, styles, onChange }) {
+	const label = useLabel();
+	const options = BORDER_OPTS.filter((option) => optionOf(styles, option.make().kind));
+	return /* @__PURE__ */ jsx(DropdownShell, {
+		trigger: /* @__PURE__ */ jsx("span", {
+			className: "text-fg-secondary",
+			children: borderSvg(value)
+		}),
+		children: (close) => options.map((option) => {
+			const border = option.make();
+			return /* @__PURE__ */ jsx(OptionRow, {
+				selected: borderKey(value) === option.key,
+				title: label(optionOf(styles, border.kind)),
+				onClick: () => {
+					onChange(border);
+					close();
+				},
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-fg-secondary",
+					children: borderSvg(border)
+				})
+			}, option.key);
+		})
+	});
+}
+const LE_MARKERS = {
+	square: /* @__PURE__ */ jsx("path", { d: "M68 -4 L76 -4 L76 4 L68 4 Z" }),
+	circle: /* @__PURE__ */ jsx("circle", {
+		cx: "72",
+		cy: "0",
+		r: "4"
+	}),
+	diamond: /* @__PURE__ */ jsx("path", { d: "M72 -5 L77 0 L72 5 L67 0 Z" }),
+	"open-arrow": /* @__PURE__ */ jsx("path", {
+		d: "M67 -5 L77 0 L67 5",
+		fill: "none"
+	}),
+	"closed-arrow": /* @__PURE__ */ jsx("path", { d: "M67 -5 L77 0 L67 5 Z" }),
+	"r-open-arrow": /* @__PURE__ */ jsx("path", {
+		d: "M77 -5 L67 0 L77 5",
+		fill: "none"
+	}),
+	"r-closed-arrow": /* @__PURE__ */ jsx("path", { d: "M77 -5 L67 0 L77 5 Z" }),
+	butt: /* @__PURE__ */ jsx("path", {
+		d: "M72 -5 L72 5",
+		fill: "none"
+	}),
+	slash: /* @__PURE__ */ jsx("path", {
+		d: "M67 -5 L77 5",
+		fill: "none"
+	})
+};
+const LE_LINE_END = {
+	square: 68,
+	circle: 68,
+	diamond: 67,
+	"open-arrow": 76,
+	"closed-arrow": 67,
+	"r-open-arrow": 67,
+	"r-closed-arrow": 67,
+	butt: 72,
+	slash: 72
+};
+function LineEndingPreview({ name, side }) {
+	const marker = LE_MARKERS[name];
+	const lineEndX = LE_LINE_END[name] ?? 77;
+	return /* @__PURE__ */ jsx("svg", {
+		width: "80",
+		height: "20",
+		viewBox: "0 0 80 20",
+		className: "text-fg",
+		children: /* @__PURE__ */ jsxs("g", {
+			transform: side === "start" ? "rotate(180 40 10)" : void 0,
+			children: [/* @__PURE__ */ jsx("line", {
+				x1: "4",
+				y1: "10",
+				x2: lineEndX,
+				y2: "10",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}), marker && /* @__PURE__ */ jsx("g", {
+				transform: "translate(0, 10)",
+				fill: "currentColor",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				children: marker
+			})]
+		})
+	});
+}
+function LineEndingSelect({ side, value, options, onChange }) {
+	const label = useLabel();
+	return /* @__PURE__ */ jsx(DropdownShell, {
+		trigger: /* @__PURE__ */ jsx(LineEndingPreview, {
+			name: value,
+			side
+		}),
+		children: (close) => options.map((option) => /* @__PURE__ */ jsx(OptionRow, {
+			selected: value === option.value,
+			title: label(option),
+			onClick: () => {
+				onChange(option.value);
+				close();
+			},
+			children: /* @__PURE__ */ jsx(LineEndingPreview, {
+				name: option.value,
+				side
+			})
+		}, option.value))
+	});
+}
+function FontFamilySelect({ value, standard, onChange }) {
+	const label = useLabel();
+	const configured = useAnnotationFonts();
+	const options = [...standard.filter((option) => OFFERED_FONTS.includes(option.value)).map((option) => ({
+		value: option.value,
+		label: label(option)
+	})), ...configured.map((font) => ({
+		value: font.key,
+		label: font.label
+	}))];
+	const named = optionOf(standard, value);
+	return /* @__PURE__ */ jsx(DropdownShell, {
+		trigger: /* @__PURE__ */ jsx("span", {
+			className: "text-fg text-sm",
+			children: options.find((option) => option.value === value)?.label ?? (named ? label(named) : value)
+		}),
+		children: (close) => options.map((option) => /* @__PURE__ */ jsx(OptionRow, {
+			selected: option.value === value,
+			onClick: () => {
+				onChange(option.value);
+				close();
+			},
+			children: option.label
+		}, option.value))
+	});
+}
+function FontSizeCombo({ value, onChange }) {
+	const [open, setOpen] = useState(false);
+	const rootRef = useOutsideClose(open, () => setOpen(false));
+	const [draft, setDraft] = useState(null);
+	const commit = () => {
+		if (draft === null) return;
+		const size = parseInt(draft, 10);
+		setDraft(null);
+		if (Number.isFinite(size) && size > 0 && size !== value) onChange(size);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: "relative w-full",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "number",
+				min: 1,
+				value: draft ?? value,
+				onChange: (event) => setDraft(event.target.value),
+				onBlur: commit,
+				onKeyDown: (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						commit();
+						setOpen(false);
+					} else if (event.key === "Escape") {
+						setDraft(null);
+						setOpen(false);
+					}
+				},
+				onClick: () => setOpen(true),
+				className: "border-border bg-surface text-fg w-full rounded border px-2 py-1.5 pe-7 text-sm"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				tabIndex: -1,
+				onClick: () => setOpen((previous) => !previous),
+				className: "absolute inset-y-0 end-1 flex items-center",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "chevronDown",
+					size: 16,
+					className: "text-fg-secondary"
+				})
+			}),
+			open && /* @__PURE__ */ jsx("div", {
+				className: "border-border bg-elevated absolute z-10 mt-1 max-h-48 w-full overflow-y-auto rounded border p-1 shadow-lg",
+				children: FONT_SIZES.map((sz) => /* @__PURE__ */ jsx(OptionRow, {
+					selected: sz === value,
+					onClick: () => {
+						setDraft(null);
+						onChange(sz);
+						setOpen(false);
+					},
+					children: sz
+				}, sz))
+			})
+		]
+	});
+}
+function BlendModeSelect({ value, options, name, onChange }) {
+	const label = useLabel();
+	return /* @__PURE__ */ jsx("select", {
+		value,
+		"aria-label": name,
+		onChange: (event) => onChange(event.target.value),
+		className: "border-border bg-surface text-fg w-full rounded border px-3 py-1.5 text-sm",
+		children: options.map((mode) => /* @__PURE__ */ jsx("option", {
+			value: mode.value,
+			children: label(mode)
+		}, mode.value))
+	});
+}
+function Toggle({ active, title, onClick, keepFocus, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title,
+		onClick,
+		onMouseDown: keepFocus ? (event) => event.preventDefault() : void 0,
+		className: `flex h-9 w-9 items-center justify-center rounded border transition-colors ${active ? "border-accent bg-accent text-on-accent" : "border-border bg-surface text-fg hover:bg-hover"}`,
+		children
+	});
+}
+const isFormatSpec = (spec) => spec.key === "bold" || spec.key === "italic" || spec.key === "underline";
+/**
+* The format toggles a free-text kind declares, in one row. While the text
+* editor holds a range they read and write that range's runs (the plugin
+* routes `toggleTextFormat`); otherwise the annotation's body. The buttons
+* keep focus in the editor so the range survives the click.
+*/
+function FormatToggles({ specs, values, mixed, onToggle }) {
+	const t = useT();
+	const label = useLabel();
+	return /* @__PURE__ */ jsx(Field, {
+		label: t("demo.formatLabel"),
+		mixed: specs.some((spec) => mixed.includes(spec.key)),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex gap-2",
+			children: specs.map((spec) => {
+				const active = values[spec.key] === true && !mixed.includes(spec.key);
+				return /* @__PURE__ */ jsx(Toggle, {
+					title: label(spec),
+					active,
+					keepFocus: true,
+					onClick: () => onToggle(spec.key, !active),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: spec.key,
+						size: 18
+					})
+				}, spec.key);
+			})
+		})
+	});
+}
+function FieldControl({ spec, values, mixed, onChange, onChangeEach }) {
+	const t = useT();
+	const label = useLabel();
+	const value = values[spec.key];
+	switch (spec.key) {
+		case "color":
+		case "fontColor": return /* @__PURE__ */ jsx(Field, {
+			label: label(spec),
+			mixed,
+			children: /* @__PURE__ */ jsx(SwatchGrid, {
+				value,
+				onSelect: (color) => onChange({ [spec.key]: color })
+			})
+		});
+		case "interiorColor": return /* @__PURE__ */ jsx(Field, {
+			label: label(spec),
+			mixed,
+			children: /* @__PURE__ */ jsx(SwatchGrid, {
+				value,
+				allowTransparent: true,
+				onSelect: (color) => onChange({ interiorColor: color === "transparent" ? null : color })
+			})
+		});
+		case "opacity": {
+			const opacity = value ?? 1;
+			return /* @__PURE__ */ jsxs(Field, {
+				label: label(spec),
+				mixed,
+				children: [/* @__PURE__ */ jsx(RangeSlider, {
+					value: opacity,
+					min: spec.min,
+					max: spec.max,
+					step: spec.step,
+					onChange: (next) => onChange({ opacity: next })
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-fg-muted text-xs",
+					children: [Math.round(opacity * 100), "%"]
+				})]
+			});
+		}
+		case "strokeWidth": {
+			const strokeWidth = value ?? spec.min;
+			return /* @__PURE__ */ jsxs(Field, {
+				label: label(spec),
+				mixed,
+				children: [/* @__PURE__ */ jsx(RangeSlider, {
+					value: strokeWidth,
+					min: spec.min,
+					max: spec.max,
+					step: spec.step,
+					onChange: (next) => onChange({ strokeWidth: next })
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-fg-muted text-xs",
+					children: `${strokeWidth}px`
+				})]
+			});
+		}
+		case "fontSize": return /* @__PURE__ */ jsx(Field, {
+			label: label(spec),
+			mixed,
+			children: /* @__PURE__ */ jsx(FontSizeCombo, {
+				value: value ?? 12,
+				onChange: (next) => onChange({ fontSize: next })
+			})
+		});
+		case "borderStyle": return /* @__PURE__ */ jsx(Field, {
+			label: label(spec),
+			mixed,
+			children: /* @__PURE__ */ jsx(BorderSelect, {
+				value: borderOf(values),
+				styles: spec.options,
+				onChange: (border) => onChange(borderFields(border))
+			})
+		});
+		case "lineEndings": {
+			const le = value ?? {
+				start: "none",
+				end: "none"
+			};
+			return /* @__PURE__ */ jsx(Field, {
+				label: label(spec),
+				mixed,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 gap-3",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+						className: "text-fg-muted mb-1.5 text-xs",
+						children: t("stylePanel.lineStart")
+					}), /* @__PURE__ */ jsx(LineEndingSelect, {
+						side: "start",
+						value: le.start,
+						options: spec.options,
+						onChange: (ending) => onChangeEach((current) => ({ lineEndings: {
+							...current.lineEndings,
+							start: ending
+						} }))
+					})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+						className: "text-fg-muted mb-1.5 text-xs",
+						children: t("stylePanel.lineEnd")
+					}), /* @__PURE__ */ jsx(LineEndingSelect, {
+						side: "end",
+						value: le.end,
+						options: spec.options,
+						onChange: (ending) => onChangeEach((current) => ({ lineEndings: {
+							...current.lineEndings,
+							end: ending
+						} }))
+					})] })]
+				})
+			});
+		}
+		case "fontFamily": return /* @__PURE__ */ jsx(Field, {
+			label: label(spec),
+			mixed,
+			children: /* @__PURE__ */ jsx(FontFamilySelect, {
+				value: value ?? "helvetica",
+				standard: spec.options,
+				onChange: (family) => onChange({ fontFamily: family })
+			})
+		});
+		case "textAlign": {
+			const alignIcon = {
+				left: "alignLeft",
+				center: "alignCenter",
+				right: "alignRight"
+			};
+			return /* @__PURE__ */ jsx(Field, {
+				label: label(spec),
+				mixed,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex gap-2",
+					children: spec.options.map((option) => {
+						const al = option.value;
+						return /* @__PURE__ */ jsx(Toggle, {
+							title: label(option),
+							active: value === al,
+							onClick: () => onChange({ textAlign: al }),
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: alignIcon[al],
+								size: 18
+							})
+						}, al);
+					})
+				})
+			});
+		}
+		case "bold":
+		case "italic":
+		case "underline": return null;
+		case "blendMode": return /* @__PURE__ */ jsx(Field, {
+			label: label(spec),
+			mixed,
+			children: /* @__PURE__ */ jsx(BlendModeSelect, {
+				value: value ?? "normal",
+				options: spec.options,
+				name: label(spec),
+				onChange: (blendMode) => onChange({ blendMode })
+			})
+		});
+		case "link": return null;
+		default: return null;
+	}
+}
+function EmptyState() {
+	const t = useT();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "text-fg-muted flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			name: "palette",
+			size: 40,
+			className: "text-fg-disabled"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "max-w-[180px] text-sm",
+			children: t("stylePanel.empty")
+		})]
+	});
+}
+/** The rich body a format on or off is, merged over a tool's current one. */
+const FORMAT_BODY = {
+	bold: (on) => ({ weight: on ? 700 : 400 }),
+	italic: (on) => ({ italic: on }),
+	underline: (on) => ({ decoration: on ? ["underline"] : [] })
+};
+/**
+* The schema-driven style panel. Rendered inside the right sidebar's
+* `annotation-style` surface (see ui/panels.tsx). Owns its own scroll.
+*/
+function AnnotationStylePanel() {
+	const t = useT();
+	const annotation = useAnnotation();
+	const commands = useCommands();
+	const documentId = useDocumentId() ?? void 0;
+	const activeToolId = useInteractionState((state) => state.activeToolId) ?? "pointer";
+	const selection = useAnnotationProperties();
+	const tool = useAnnotationProperties(activeToolId);
+	const toolDefaults = useAnnotationDefaults(activeToolId);
+	const selected = useAnnotationState((state) => state.selected);
+	const toolLabel = useKernelValue(() => commands.resolveCommand(`tool:${activeToolId}`, documentId)?.label ?? null, Object.is);
+	const hasSel = selection.properties.length > 0;
+	const { properties, values, mixed } = hasSel ? selection : tool;
+	const fields = properties.filter((property) => property.control !== "flag" && property.control !== "text");
+	const write = (patch) => hasSel ? annotation.selection.update(patch) : annotation.tools.updateDefaults(activeToolId, patch);
+	const writeEach = (patchOf) => hasSel ? annotation.selection.update((member) => patchOf(member)) : annotation.tools.updateDefaults(activeToolId, patchOf(toolDefaults));
+	const toggleFormat = (format, on) => {
+		if (hasSel) return void annotation.text.toggleFormat(format);
+		const body = toolDefaults.richText?.body;
+		annotation.tools.updateDefaults(activeToolId, { richText: { body: {
+			...body,
+			...FORMAT_BODY[format](on)
+		} } });
+	};
+	if (fields.length === 0 && selected.length === 0) return /* @__PURE__ */ jsx(EmptyState, {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex-1 overflow-y-auto p-4",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted mb-4 text-[11px] font-semibold uppercase tracking-wide",
+				children: hasSel ? t("stylePanel.selected", { params: { count: selected.length } }) : toolLabel === null ? t("stylePanel.defaults") : t("stylePanel.toolDefaults", { params: { tool: toolLabel } })
+			}),
+			fields.map((spec) => spec.key === "bold" ? /* @__PURE__ */ jsx(FormatToggles, {
+				specs: fields.filter((spec) => isFormatSpec(spec)),
+				values,
+				mixed,
+				onToggle: toggleFormat
+			}, "format") : /* @__PURE__ */ jsx(FieldControl, {
+				spec,
+				values,
+				mixed: mixed.includes(spec.key),
+				onChange: write,
+				onChangeEach: writeEach
+			}, spec.key)),
+			/* @__PURE__ */ jsx(RedactionLabelSection, {}),
+			/* @__PURE__ */ jsx(AnnotationFlagsSection, {})
+		]
+	});
+}
+/**
+* Label editor shown when exactly one redaction mark is selected. The text is
+* what the destructive apply paints over the region (white-on-black by the
+* tool defaults); `repeat` tiles it. Writes ride the annotation update verb
+* via the redaction plugin, which preserves the label's `/DA` styling.
+*/
+function RedactionLabelSection() {
+	const t = useT();
+	const redaction = useOptionalCapability(RedactionToken);
+	const selected = useAnnotationState((state) => state.selected);
+	const mark = selected.length === 1 && selected[0].subtype === "redact" ? selected[0] : null;
+	const [draft, setDraft] = useState(null);
+	useEffect(() => setDraft(null), [mark?.ref && annotationKey(mark.ref)]);
+	if (!redaction || !mark || mark.subtype !== "redact") return null;
+	const value = draft ?? mark.overlayText ?? "";
+	const commit = () => {
+		if (draft === null) return;
+		redaction.updateLabel(mark.ref, { overlayText: draft.length > 0 ? draft : null });
+		setDraft(null);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-border-subtle mt-4 border-t pt-4",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted mb-2 text-[11px] font-semibold uppercase tracking-wide",
+				children: t("demo.redactLabelTitle")
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "text",
+				value,
+				placeholder: t("demo.redactLabelPlaceholder"),
+				onChange: (event) => setDraft(event.target.value),
+				onBlur: commit,
+				onKeyDown: (event) => event.key === "Enter" && commit(),
+				className: "border-border bg-surface text-fg w-full rounded-md border px-2 py-1.5 text-sm"
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "text-fg mt-2 flex items-center gap-2 text-sm",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: mark.repeat,
+					onChange: (event) => void redaction.updateLabel(mark.ref, { repeat: event.target.checked })
+				}), t("demo.redactLabelRepeat")]
+			})
+		]
+	});
+}
+//#endregion
+export { AnnotationStylePanel };
+
+//# sourceMappingURL=annotation-style--rPIZsuP.js.map