@stll/folio-react 0.5.0 → 0.6.0

package/dist/dialogs-CzvXYJyG.js

@@ -0,0 +1,1080 @@
+import { o as useFolioUI } from "./useFindReplace-BPBpMWS9.js";
+import { useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dialogs/dialogChrome.ts
+const DIALOG_BACKDROP_CLASS = "fixed inset-0 z-[10000] bg-black/50";
+const DIALOG_POPUP_CLASS = "bg-popover fixed start-1/2 top-1/2 z-[10001] w-full max-w-[520px] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl";
+const DIALOG_TITLE_CLASS = "border-b px-5 py-3 text-base font-semibold";
+const DIALOG_BODY_CLASS = "flex flex-col gap-4 px-5 py-4";
+const DIALOG_FOOTER_CLASS = "flex justify-end gap-2 border-t px-5 py-3";
+const DIALOG_LABEL_CLASS = "text-muted-foreground text-[13px]";
+const DIALOG_INPUT_CLASS = "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none";
+const DIALOG_SECONDARY_BUTTON_CLASS = "border-input rounded border px-4 py-1.5 text-[13px]";
+const DIALOG_PRIMARY_BUTTON_CLASS = "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium disabled:cursor-not-allowed disabled:opacity-50";
+//#endregion
+//#region src/components/dialogs/HyperlinkDialog.tsx
+function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, selectedText, bookmarks = [] }) {
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const id = useId();
+	const [targetType, setTargetType] = useState("url");
+	const [url, setUrl] = useState("");
+	const [bookmark, setBookmark] = useState("");
+	const [displayText, setDisplayText] = useState("");
+	const [tooltip, setTooltip] = useState("");
+	const [touched, setTouched] = useState(false);
+	useEffect(() => {
+		if (!isOpen) {
+			setTouched(false);
+			return;
+		}
+		const href = currentData?.href ?? "";
+		if (href.startsWith("#")) {
+			setTargetType("bookmark");
+			setBookmark(href.slice(1));
+			setUrl("");
+		} else {
+			setTargetType("url");
+			setUrl(href);
+			setBookmark("");
+		}
+		setDisplayText(currentData?.displayText ?? selectedText ?? "");
+		setTooltip(currentData?.tooltip ?? "");
+	}, [
+		isOpen,
+		currentData,
+		selectedText
+	]);
+	const urlError = targetType === "url" ? getUrlError(url) : "";
+	const canSubmit = targetType === "bookmark" ? bookmark.trim().length > 0 : url.trim().length > 0 && urlError.length === 0;
+	const isEditing = Boolean(currentData?.href);
+	const fieldIds = {
+		targetType: `${id}-hyperlink-target-type`,
+		url: `${id}-hyperlink-url`,
+		bookmark: `${id}-hyperlink-bookmark`,
+		displayText: `${id}-hyperlink-display-text`,
+		tooltip: `${id}-hyperlink-tooltip`
+	};
+	const handleSubmit = () => {
+		setTouched(true);
+		if (!canSubmit) return;
+		const href = targetType === "bookmark" ? `#${bookmark.trim()}` : normalizeUrl(url);
+		onSubmit({
+			href,
+			displayText: displayText.trim() || href,
+			...tooltip.trim() ? { tooltip: tooltip.trim() } : {}
+		});
+		onClose();
+	};
+	const handleRemove = () => {
+		onRemove?.();
+		onClose();
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS }), /* @__PURE__ */ jsxs(DialogPopup, {
+			className: DIALOG_POPUP_CLASS,
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: DIALOG_TITLE_CLASS,
+					children: isEditing ? "Edit Hyperlink" : "Insert Hyperlink"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: DIALOG_BODY_CLASS,
+					children: [
+						(bookmarks.length > 0 || targetType === "bookmark") && /* @__PURE__ */ jsxs("label", {
+							className: "flex flex-col gap-1",
+							htmlFor: fieldIds.targetType,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground text-[13px]",
+								children: "Link to"
+							}), /* @__PURE__ */ jsxs("select", {
+								className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+								id: fieldIds.targetType,
+								onChange: (e) => setTargetType(toTargetType(e.target.value)),
+								value: targetType,
+								children: [/* @__PURE__ */ jsx("option", {
+									value: "url",
+									children: "Web address"
+								}), /* @__PURE__ */ jsx("option", {
+									value: "bookmark",
+									children: "Bookmark"
+								})]
+							})]
+						}),
+						targetType === "url" && /* @__PURE__ */ jsxs("label", {
+							className: "flex flex-col gap-1",
+							htmlFor: fieldIds.url,
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-[13px]",
+									children: "Address"
+								}),
+								/* @__PURE__ */ jsx("input", {
+									"aria-invalid": touched && urlError.length > 0,
+									className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+									id: fieldIds.url,
+									onBlur: () => setTouched(true),
+									onChange: (e) => setUrl(e.target.value),
+									placeholder: "https://example.com",
+									value: url
+								}),
+								touched && urlError.length > 0 && /* @__PURE__ */ jsx("span", {
+									className: "text-destructive text-xs",
+									children: urlError
+								})
+							]
+						}),
+						targetType === "bookmark" && /* @__PURE__ */ jsxs("label", {
+							className: "flex flex-col gap-1",
+							htmlFor: fieldIds.bookmark,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground text-[13px]",
+								children: "Bookmark"
+							}), /* @__PURE__ */ jsxs("select", {
+								className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+								id: fieldIds.bookmark,
+								onChange: (e) => setBookmark(e.target.value),
+								value: bookmark,
+								children: [/* @__PURE__ */ jsx("option", {
+									value: "",
+									children: "Select a bookmark"
+								}), bookmarks.map((option) => /* @__PURE__ */ jsx("option", {
+									value: option.name,
+									children: option.label ?? option.name
+								}, option.name))]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: "flex flex-col gap-1",
+							htmlFor: fieldIds.displayText,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: DIALOG_LABEL_CLASS,
+								children: "Text to display"
+							}), /* @__PURE__ */ jsx("input", {
+								className: DIALOG_INPUT_CLASS,
+								id: fieldIds.displayText,
+								onChange: (e) => setDisplayText(e.target.value),
+								value: displayText
+							})]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: "flex flex-col gap-1",
+							htmlFor: fieldIds.tooltip,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: DIALOG_LABEL_CLASS,
+								children: "Screen tip"
+							}), /* @__PURE__ */ jsx("input", {
+								className: DIALOG_INPUT_CLASS,
+								id: fieldIds.tooltip,
+								onChange: (e) => setTooltip(e.target.value),
+								value: tooltip
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: DIALOG_FOOTER_CLASS,
+					children: [
+						isEditing && onRemove && /* @__PURE__ */ jsx("button", {
+							className: "text-destructive me-auto rounded px-4 py-1.5 text-[13px]",
+							onClick: handleRemove,
+							type: "button",
+							children: "Remove"
+						}),
+						/* @__PURE__ */ jsx(DialogClose, {
+							className: DIALOG_SECONDARY_BUTTON_CLASS,
+							children: "Cancel"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: DIALOG_PRIMARY_BUTTON_CLASS,
+							disabled: !canSubmit,
+							onClick: handleSubmit,
+							type: "button",
+							children: isEditing ? "Update" : "Insert"
+						})
+					]
+				})
+			]
+		})] })
+	});
+}
+function toTargetType(value) {
+	return value === "bookmark" ? "bookmark" : "url";
+}
+function getUrlError(value) {
+	const trimmed = value.trim();
+	if (!trimmed) return "Enter an address.";
+	if (/^(mailto:|tel:)/iu.test(trimmed)) return trimmed.replace(/^(mailto:|tel:)/iu, "").length > 0 ? "" : "Enter an address.";
+	if (/^ftp:\/\//iu.test(trimmed)) return trimmed.length > 6 ? "" : "Enter an address.";
+	try {
+		const parsed = new URL(/^https?:\/\//iu.test(trimmed) ? trimmed : `https://${trimmed}`);
+		return parsed.protocol === "http:" || parsed.protocol === "https:" ? "" : "Use a web address.";
+	} catch {
+		return "Enter a valid address.";
+	}
+}
+function normalizeUrl(value) {
+	const trimmed = value.trim();
+	if (/^(https?:\/\/|mailto:|tel:|ftp:\/\/)/iu.test(trimmed)) return trimmed;
+	return `https://${trimmed}`;
+}
+//#endregion
+//#region src/components/dialogs/InsertImageDialog.tsx
+function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,image/jpeg,image/gif,image/webp" }) {
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const id = useId();
+	const [file, setFile] = useState(null);
+	const [alt, setAlt] = useState("");
+	const [width, setWidth] = useState("");
+	const [height, setHeight] = useState("");
+	useEffect(() => {
+		if (!isOpen) return;
+		setFile(null);
+		setAlt("");
+		setWidth("");
+		setHeight("");
+	}, [isOpen]);
+	const fieldIds = {
+		file: `${id}-insert-image-file`,
+		alt: `${id}-insert-image-alt`,
+		width: `${id}-insert-image-width`,
+		height: `${id}-insert-image-height`
+	};
+	const handleInsert = () => {
+		if (!file) return;
+		const parsedWidth = toPositiveNumber(width);
+		const parsedHeight = toPositiveNumber(height);
+		onInsert({
+			file,
+			...alt.trim() ? { alt: alt.trim() } : {},
+			...parsedWidth ? { width: parsedWidth } : {},
+			...parsedHeight ? { height: parsedHeight } : {}
+		});
+		onClose();
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS }), /* @__PURE__ */ jsxs(DialogPopup, {
+			className: DIALOG_POPUP_CLASS,
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: DIALOG_TITLE_CLASS,
+					children: "Insert Image"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: DIALOG_BODY_CLASS,
+					children: [
+						/* @__PURE__ */ jsxs("label", {
+							className: "flex flex-col gap-1",
+							htmlFor: fieldIds.file,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: DIALOG_LABEL_CLASS,
+								children: "Image file"
+							}), /* @__PURE__ */ jsx("input", {
+								accept,
+								className: DIALOG_INPUT_CLASS,
+								id: fieldIds.file,
+								onChange: (e) => setFile(e.target.files?.[0] ?? null),
+								type: "file"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: "flex flex-col gap-1",
+							htmlFor: fieldIds.alt,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: DIALOG_LABEL_CLASS,
+								children: "Alt text"
+							}), /* @__PURE__ */ jsx("input", {
+								className: DIALOG_INPUT_CLASS,
+								id: fieldIds.alt,
+								onChange: (e) => setAlt(e.target.value),
+								placeholder: file?.name ?? "",
+								value: alt
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-2 gap-3",
+							children: [/* @__PURE__ */ jsxs("label", {
+								className: "flex flex-col gap-1",
+								htmlFor: fieldIds.width,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: DIALOG_LABEL_CLASS,
+									children: "Width"
+								}), /* @__PURE__ */ jsx("input", {
+									className: DIALOG_INPUT_CLASS,
+									id: fieldIds.width,
+									min: 1,
+									onChange: (e) => setWidth(e.target.value),
+									placeholder: "Auto",
+									type: "number",
+									value: width
+								})]
+							}), /* @__PURE__ */ jsxs("label", {
+								className: "flex flex-col gap-1",
+								htmlFor: fieldIds.height,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: DIALOG_LABEL_CLASS,
+									children: "Height"
+								}), /* @__PURE__ */ jsx("input", {
+									className: DIALOG_INPUT_CLASS,
+									id: fieldIds.height,
+									min: 1,
+									onChange: (e) => setHeight(e.target.value),
+									placeholder: "Auto",
+									type: "number",
+									value: height
+								})]
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: DIALOG_FOOTER_CLASS,
+					children: [/* @__PURE__ */ jsx(DialogClose, {
+						className: DIALOG_SECONDARY_BUTTON_CLASS,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx("button", {
+						className: DIALOG_PRIMARY_BUTTON_CLASS,
+						disabled: !file,
+						onClick: handleInsert,
+						type: "button",
+						children: "Insert"
+					})]
+				})
+			]
+		})] })
+	});
+}
+function toPositiveNumber(value) {
+	const parsed = Number(value);
+	return Number.isFinite(parsed) && parsed > 0 ? parsed : void 0;
+}
+//#endregion
+//#region src/components/dialogs/InsertTableDialog.tsx
+const GRID_ROWS = 8;
+const GRID_COLUMNS = 10;
+const MIN_ROWS = 1;
+const MAX_ROWS = 100;
+const MIN_COLUMNS = 1;
+const MAX_COLUMNS = 20;
+const DEFAULT_STYLE_OPTIONS = [
+	{
+		id: "TableGrid",
+		name: "Table Grid"
+	},
+	{
+		id: "TableNormal",
+		name: "Normal Table"
+	},
+	{
+		id: "TableGridLight",
+		name: "Grid Table Light"
+	}
+];
+function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, defaultColumns = 3, styleOptions = DEFAULT_STYLE_OPTIONS }) {
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const id = useId();
+	const [rows, setRows] = useState(defaultRows);
+	const [columns, setColumns] = useState(defaultColumns);
+	const [hoverRows, setHoverRows] = useState(0);
+	const [hoverColumns, setHoverColumns] = useState(0);
+	const [autofit, setAutofit] = useState(false);
+	const [styleId, setStyleId] = useState("");
+	useEffect(() => {
+		if (!isOpen) return;
+		setRows(defaultRows);
+		setColumns(defaultColumns);
+		setHoverRows(0);
+		setHoverColumns(0);
+		setAutofit(false);
+		setStyleId("");
+	}, [
+		isOpen,
+		defaultRows,
+		defaultColumns
+	]);
+	const normalizedRows = clampInteger$1(rows, MIN_ROWS, MAX_ROWS);
+	const normalizedColumns = clampInteger$1(columns, MIN_COLUMNS, MAX_COLUMNS);
+	const canInsert = Number.isFinite(rows) && Number.isFinite(columns);
+	const fieldIds = {
+		rows: `${id}-insert-table-rows`,
+		columns: `${id}-insert-table-columns`,
+		autofit: `${id}-insert-table-autofit`,
+		style: `${id}-insert-table-style`
+	};
+	const handleInsert = () => {
+		if (!canInsert) return;
+		onInsert({
+			rows: normalizedRows,
+			columns: normalizedColumns,
+			autofit,
+			...styleId ? { styleId } : {}
+		});
+		onClose();
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS }), /* @__PURE__ */ jsxs(DialogPopup, {
+			className: DIALOG_POPUP_CLASS,
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: DIALOG_TITLE_CLASS,
+					children: "Insert Table"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: DIALOG_BODY_CLASS,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "grid w-max grid-cols-10 gap-1",
+							onMouseLeave: () => {
+								setHoverRows(0);
+								setHoverColumns(0);
+							},
+							children: Array.from({ length: GRID_ROWS }).map((_, rowIndex) => Array.from({ length: GRID_COLUMNS }).map((__, columnIndex) => {
+								const row = rowIndex + 1;
+								const column = columnIndex + 1;
+								const active = row <= hoverRows && column <= hoverColumns;
+								return /* @__PURE__ */ jsx("button", {
+									"aria-label": `${row} by ${column} table`,
+									className: `h-5 w-5 rounded-sm border ${active ? "border-primary bg-primary/20" : "border-input bg-background"}`,
+									onClick: () => {
+										setRows(row);
+										setColumns(column);
+									},
+									onMouseEnter: () => {
+										setHoverRows(row);
+										setHoverColumns(column);
+									},
+									type: "button"
+								}, `${row}-${column}`);
+							}))
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "text-muted-foreground text-xs",
+							children: hoverRows > 0 ? `${hoverColumns} columns x ${hoverRows} rows` : `${normalizedColumns} columns x ${normalizedRows} rows`
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-2 gap-3",
+							children: [/* @__PURE__ */ jsxs("label", {
+								className: "flex flex-col gap-1",
+								htmlFor: fieldIds.rows,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: DIALOG_LABEL_CLASS,
+									children: "Rows"
+								}), /* @__PURE__ */ jsx("input", {
+									className: DIALOG_INPUT_CLASS,
+									id: fieldIds.rows,
+									max: MAX_ROWS,
+									min: MIN_ROWS,
+									onChange: (e) => setRows(Number(e.target.value) || MIN_ROWS),
+									type: "number",
+									value: rows
+								})]
+							}), /* @__PURE__ */ jsxs("label", {
+								className: "flex flex-col gap-1",
+								htmlFor: fieldIds.columns,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: DIALOG_LABEL_CLASS,
+									children: "Columns"
+								}), /* @__PURE__ */ jsx("input", {
+									className: DIALOG_INPUT_CLASS,
+									id: fieldIds.columns,
+									max: MAX_COLUMNS,
+									min: MIN_COLUMNS,
+									onChange: (e) => setColumns(Number(e.target.value) || MIN_COLUMNS),
+									type: "number",
+									value: columns
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: "flex items-center gap-2",
+							htmlFor: fieldIds.autofit,
+							children: [/* @__PURE__ */ jsx("input", {
+								checked: autofit,
+								id: fieldIds.autofit,
+								onChange: (e) => setAutofit(e.target.checked),
+								type: "checkbox"
+							}), /* @__PURE__ */ jsx("span", {
+								className: DIALOG_LABEL_CLASS,
+								children: "Autofit to contents"
+							})]
+						}),
+						styleOptions.length > 0 && /* @__PURE__ */ jsxs("label", {
+							className: "flex flex-col gap-1",
+							htmlFor: fieldIds.style,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground text-[13px]",
+								children: "Style"
+							}), /* @__PURE__ */ jsxs("select", {
+								className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+								id: fieldIds.style,
+								onChange: (e) => setStyleId(e.target.value),
+								value: styleId,
+								children: [/* @__PURE__ */ jsx("option", {
+									value: "",
+									children: "Plain table"
+								}), styleOptions.map((style) => /* @__PURE__ */ jsx("option", {
+									value: style.id,
+									children: style.name
+								}, style.id))]
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: DIALOG_FOOTER_CLASS,
+					children: [/* @__PURE__ */ jsx(DialogClose, {
+						className: DIALOG_SECONDARY_BUTTON_CLASS,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx("button", {
+						className: DIALOG_PRIMARY_BUTTON_CLASS,
+						disabled: !canInsert,
+						onClick: handleInsert,
+						type: "button",
+						children: "Insert"
+					})]
+				})
+			]
+		})] })
+	});
+}
+function clampInteger$1(value, min, max) {
+	return Math.min(max, Math.max(min, Math.trunc(value)));
+}
+//#endregion
+//#region src/components/dialogs/PasteSpecialDialog.tsx
+const PASTE_MODES = [
+	{
+		value: "keepFormatting",
+		label: "Keep source formatting",
+		description: "Preserve styles, links, and inline formatting from the clipboard."
+	},
+	{
+		value: "mergeFormatting",
+		label: "Merge formatting",
+		description: "Keep useful inline formatting while matching the destination paragraph."
+	},
+	{
+		value: "plainText",
+		label: "Unformatted text",
+		description: "Paste text only and use the destination formatting."
+	}
+];
+function PasteSpecialDialog({ isOpen, onClose, onPaste, defaultMode = "plainText" }) {
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const id = useId();
+	const [mode, setMode] = useState(defaultMode);
+	useEffect(() => {
+		if (isOpen) setMode(defaultMode);
+	}, [isOpen, defaultMode]);
+	const handlePaste = () => {
+		onPaste(mode);
+		onClose();
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS }), /* @__PURE__ */ jsxs(DialogPopup, {
+			className: DIALOG_POPUP_CLASS,
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: DIALOG_TITLE_CLASS,
+					children: "Paste Special"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: DIALOG_BODY_CLASS,
+					children: /* @__PURE__ */ jsxs("fieldset", {
+						className: "flex flex-col gap-3",
+						children: [/* @__PURE__ */ jsx("legend", {
+							className: DIALOG_LABEL_CLASS,
+							children: "Paste mode"
+						}), PASTE_MODES.map((option) => {
+							const optionId = `${id}-paste-special-${option.value}`;
+							return /* @__PURE__ */ jsxs("label", {
+								className: "flex items-start gap-3",
+								htmlFor: optionId,
+								children: [/* @__PURE__ */ jsx("input", {
+									checked: mode === option.value,
+									id: optionId,
+									onChange: () => setMode(option.value),
+									type: "radio"
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "flex flex-col gap-1",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-foreground text-[13px] font-medium",
+										children: option.label
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-xs",
+										children: option.description
+									})]
+								})]
+							}, option.value);
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: DIALOG_FOOTER_CLASS,
+					children: [/* @__PURE__ */ jsx(DialogClose, {
+						className: DIALOG_SECONDARY_BUTTON_CLASS,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx("button", {
+						className: DIALOG_PRIMARY_BUTTON_CLASS,
+						onClick: handlePaste,
+						type: "button",
+						children: "Paste"
+					})]
+				})
+			]
+		})] })
+	});
+}
+//#endregion
+//#region src/components/dialogs/SplitCellDialog.tsx
+const MIN_PARTS = 1;
+const MAX_PARTS = 63;
+function SplitCellDialog({ isOpen, onClose, onSplit, defaultRows = 1, defaultColumns = 2 }) {
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const id = useId();
+	const [rows, setRows] = useState(defaultRows);
+	const [columns, setColumns] = useState(defaultColumns);
+	const [mergeBeforeSplit, setMergeBeforeSplit] = useState(false);
+	useEffect(() => {
+		if (!isOpen) return;
+		setRows(defaultRows);
+		setColumns(defaultColumns);
+		setMergeBeforeSplit(false);
+	}, [
+		isOpen,
+		defaultRows,
+		defaultColumns
+	]);
+	const normalizedRows = clampInteger(rows);
+	const normalizedColumns = clampInteger(columns);
+	const canSplit = normalizedRows > 1 || normalizedColumns > 1;
+	const fieldIds = {
+		rows: `${id}-split-cell-rows`,
+		columns: `${id}-split-cell-columns`,
+		mergeBeforeSplit: `${id}-split-cell-merge-before-split`
+	};
+	const handleSplit = () => {
+		if (!canSplit) return;
+		onSplit({
+			rows: normalizedRows,
+			columns: normalizedColumns,
+			mergeBeforeSplit
+		});
+		onClose();
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS }), /* @__PURE__ */ jsxs(DialogPopup, {
+			className: DIALOG_POPUP_CLASS,
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: DIALOG_TITLE_CLASS,
+					children: "Split Cell"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: DIALOG_BODY_CLASS,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "grid grid-cols-2 gap-3",
+						children: [/* @__PURE__ */ jsxs("label", {
+							className: "flex flex-col gap-1",
+							htmlFor: fieldIds.columns,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: DIALOG_LABEL_CLASS,
+								children: "Columns"
+							}), /* @__PURE__ */ jsx("input", {
+								className: DIALOG_INPUT_CLASS,
+								id: fieldIds.columns,
+								max: MAX_PARTS,
+								min: MIN_PARTS,
+								onChange: (e) => setColumns(Number(e.target.value) || MIN_PARTS),
+								type: "number",
+								value: columns
+							})]
+						}), /* @__PURE__ */ jsxs("label", {
+							className: "flex flex-col gap-1",
+							htmlFor: fieldIds.rows,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: DIALOG_LABEL_CLASS,
+								children: "Rows"
+							}), /* @__PURE__ */ jsx("input", {
+								className: DIALOG_INPUT_CLASS,
+								id: fieldIds.rows,
+								max: MAX_PARTS,
+								min: MIN_PARTS,
+								onChange: (e) => setRows(Number(e.target.value) || MIN_PARTS),
+								type: "number",
+								value: rows
+							})]
+						})]
+					}), /* @__PURE__ */ jsxs("label", {
+						className: "flex items-center gap-2",
+						htmlFor: fieldIds.mergeBeforeSplit,
+						children: [/* @__PURE__ */ jsx("input", {
+							checked: mergeBeforeSplit,
+							id: fieldIds.mergeBeforeSplit,
+							onChange: (e) => setMergeBeforeSplit(e.target.checked),
+							type: "checkbox"
+						}), /* @__PURE__ */ jsx("span", {
+							className: DIALOG_LABEL_CLASS,
+							children: "Merge selected cells before splitting"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: DIALOG_FOOTER_CLASS,
+					children: [/* @__PURE__ */ jsx(DialogClose, {
+						className: DIALOG_SECONDARY_BUTTON_CLASS,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx("button", {
+						className: DIALOG_PRIMARY_BUTTON_CLASS,
+						disabled: !canSplit,
+						onClick: handleSplit,
+						type: "button",
+						children: "Split"
+					})]
+				})
+			]
+		})] })
+	});
+}
+function clampInteger(value) {
+	return Math.min(MAX_PARTS, Math.max(MIN_PARTS, Math.trunc(value)));
+}
+//#endregion
+//#region src/components/dialogs/WatermarkDialog.tsx
+const DEFAULT_TEXT_COLOR = "#C0C0C0";
+function WatermarkDialog({ isOpen, onClose, onApply, currentWatermark }) {
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const id = useId();
+	const [mode, setMode] = useState("text");
+	const [text, setText] = useState("CONFIDENTIAL");
+	const [font, setFont] = useState("Calibri");
+	const [color, setColor] = useState(DEFAULT_TEXT_COLOR);
+	const [diagonal, setDiagonal] = useState(true);
+	const [opacityPercent, setOpacityPercent] = useState(50);
+	const [imageRId, setImageRId] = useState("");
+	const [imageTarget, setImageTarget] = useState("");
+	const [imageTargetExternal, setImageTargetExternal] = useState(false);
+	const [scalePercent, setScalePercent] = useState(100);
+	const [washout, setWashout] = useState(true);
+	useEffect(() => {
+		if (!isOpen) return;
+		if (!currentWatermark) {
+			setMode("text");
+			setText("CONFIDENTIAL");
+			setFont("Calibri");
+			setColor(DEFAULT_TEXT_COLOR);
+			setDiagonal(true);
+			setOpacityPercent(50);
+			setImageRId("");
+			setImageTarget("");
+			setImageTargetExternal(false);
+			setScalePercent(100);
+			setWashout(true);
+			return;
+		}
+		setMode(currentWatermark.kind);
+		if (currentWatermark.kind === "text") {
+			setText(currentWatermark.text);
+			setFont(currentWatermark.font ?? "Calibri");
+			setColor(toColorInputValue(currentWatermark.color));
+			setDiagonal(currentWatermark.diagonal ?? true);
+			setOpacityPercent(Math.round((currentWatermark.opacity ?? .5) * 100));
+			return;
+		}
+		setImageRId(currentWatermark.imageRId);
+		setImageTarget(currentWatermark.imageTarget ?? "");
+		setImageTargetExternal(currentWatermark.imageTargetExternal ?? false);
+		setScalePercent(Math.round((currentWatermark.scale ?? 1) * 100));
+		setWashout(currentWatermark.washout ?? true);
+	}, [isOpen, currentWatermark]);
+	const fieldIds = {
+		mode: `${id}-watermark-mode`,
+		text: `${id}-watermark-text`,
+		font: `${id}-watermark-font`,
+		color: `${id}-watermark-color`,
+		diagonal: `${id}-watermark-diagonal`,
+		opacity: `${id}-watermark-opacity`,
+		imageRId: `${id}-watermark-image-rid`,
+		imageTarget: `${id}-watermark-image-target`,
+		imageTargetExternal: `${id}-watermark-image-external`,
+		scale: `${id}-watermark-scale`,
+		washout: `${id}-watermark-washout`
+	};
+	const canApply = mode === "none" || mode === "text" && text.trim().length > 0 || mode === "picture" && imageRId.trim().length > 0;
+	const handleApply = () => {
+		if (!canApply) return;
+		if (mode === "none") {
+			onApply(void 0);
+			onClose();
+			return;
+		}
+		if (mode === "text") {
+			onApply({
+				kind: "text",
+				text: text.trim(),
+				...font.trim() ? { font: font.trim() } : {},
+				color: stripHash(color),
+				diagonal,
+				opacity: clampPercent(opacityPercent) / 100
+			});
+			onClose();
+			return;
+		}
+		onApply({
+			kind: "picture",
+			imageRId: imageRId.trim(),
+			...imageTarget.trim() ? { imageTarget: imageTarget.trim() } : {},
+			...imageTarget.trim() ? { imageTargetExternal } : {},
+			scale: clampScalePercent(scalePercent) / 100,
+			washout
+		});
+		onClose();
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS }), /* @__PURE__ */ jsxs(DialogPopup, {
+			className: DIALOG_POPUP_CLASS,
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: DIALOG_TITLE_CLASS,
+					children: "Watermark"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: DIALOG_BODY_CLASS,
+					children: [
+						/* @__PURE__ */ jsxs("label", {
+							className: "flex flex-col gap-1",
+							htmlFor: fieldIds.mode,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: DIALOG_LABEL_CLASS,
+								children: "Type"
+							}), /* @__PURE__ */ jsxs("select", {
+								className: DIALOG_INPUT_CLASS,
+								id: fieldIds.mode,
+								onChange: (e) => setMode(toWatermarkMode(e.target.value)),
+								value: mode,
+								children: [
+									/* @__PURE__ */ jsx("option", {
+										value: "text",
+										children: "Text watermark"
+									}),
+									/* @__PURE__ */ jsx("option", {
+										value: "picture",
+										children: "Picture watermark"
+									}),
+									/* @__PURE__ */ jsx("option", {
+										value: "none",
+										children: "No watermark"
+									})
+								]
+							})]
+						}),
+						mode === "text" && /* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-2 gap-3",
+							children: [
+								/* @__PURE__ */ jsxs("label", {
+									className: "col-span-2 flex flex-col gap-1",
+									htmlFor: fieldIds.text,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-[13px]",
+										children: "Text"
+									}), /* @__PURE__ */ jsx("input", {
+										className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+										id: fieldIds.text,
+										onChange: (e) => setText(e.target.value),
+										value: text
+									})]
+								}),
+								/* @__PURE__ */ jsxs("label", {
+									className: "flex flex-col gap-1",
+									htmlFor: fieldIds.font,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-[13px]",
+										children: "Font"
+									}), /* @__PURE__ */ jsx("input", {
+										className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+										id: fieldIds.font,
+										onChange: (e) => setFont(e.target.value),
+										value: font
+									})]
+								}),
+								/* @__PURE__ */ jsxs("label", {
+									className: "flex flex-col gap-1",
+									htmlFor: fieldIds.color,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-[13px]",
+										children: "Color"
+									}), /* @__PURE__ */ jsx("input", {
+										className: `border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none h-[34px]`,
+										id: fieldIds.color,
+										onChange: (e) => setColor(e.target.value),
+										type: "color",
+										value: color
+									})]
+								}),
+								/* @__PURE__ */ jsxs("label", {
+									className: "flex flex-col gap-1",
+									htmlFor: fieldIds.opacity,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-[13px]",
+										children: "Opacity"
+									}), /* @__PURE__ */ jsx("input", {
+										className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+										id: fieldIds.opacity,
+										max: 100,
+										min: 0,
+										onChange: (e) => setOpacityPercent(Number(e.target.value) || 0),
+										type: "number",
+										value: opacityPercent
+									})]
+								}),
+								/* @__PURE__ */ jsxs("label", {
+									className: "flex items-center gap-2 pt-6",
+									htmlFor: fieldIds.diagonal,
+									children: [/* @__PURE__ */ jsx("input", {
+										checked: diagonal,
+										id: fieldIds.diagonal,
+										onChange: (e) => setDiagonal(e.target.checked),
+										type: "checkbox"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-[13px]",
+										children: "Diagonal"
+									})]
+								})
+							]
+						}),
+						mode === "picture" && /* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-2 gap-3",
+							children: [
+								/* @__PURE__ */ jsxs("label", {
+									className: "col-span-2 flex flex-col gap-1",
+									htmlFor: fieldIds.imageRId,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-[13px]",
+										children: "Header image relationship id"
+									}), /* @__PURE__ */ jsx("input", {
+										className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+										id: fieldIds.imageRId,
+										onChange: (e) => setImageRId(e.target.value),
+										placeholder: "rId12",
+										value: imageRId
+									})]
+								}),
+								/* @__PURE__ */ jsxs("label", {
+									className: "col-span-2 flex flex-col gap-1",
+									htmlFor: fieldIds.imageTarget,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-[13px]",
+										children: "Image target"
+									}), /* @__PURE__ */ jsx("input", {
+										className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+										id: fieldIds.imageTarget,
+										onChange: (e) => setImageTarget(e.target.value),
+										placeholder: "word/media/image1.png",
+										value: imageTarget
+									})]
+								}),
+								/* @__PURE__ */ jsxs("label", {
+									className: "flex flex-col gap-1",
+									htmlFor: fieldIds.scale,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-[13px]",
+										children: "Scale"
+									}), /* @__PURE__ */ jsx("input", {
+										className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+										id: fieldIds.scale,
+										max: 300,
+										min: 1,
+										onChange: (e) => setScalePercent(Number(e.target.value) || 1),
+										type: "number",
+										value: scalePercent
+									})]
+								}),
+								/* @__PURE__ */ jsxs("label", {
+									className: "flex items-center gap-2 pt-6",
+									htmlFor: fieldIds.washout,
+									children: [/* @__PURE__ */ jsx("input", {
+										checked: washout,
+										id: fieldIds.washout,
+										onChange: (e) => setWashout(e.target.checked),
+										type: "checkbox"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-[13px]",
+										children: "Washout"
+									})]
+								}),
+								/* @__PURE__ */ jsxs("label", {
+									className: "col-span-2 flex items-center gap-2",
+									htmlFor: fieldIds.imageTargetExternal,
+									children: [/* @__PURE__ */ jsx("input", {
+										checked: imageTargetExternal,
+										id: fieldIds.imageTargetExternal,
+										onChange: (e) => setImageTargetExternal(e.target.checked),
+										type: "checkbox"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-[13px]",
+										children: "Target is an external URL"
+									})]
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: DIALOG_FOOTER_CLASS,
+					children: [/* @__PURE__ */ jsx(DialogClose, {
+						className: DIALOG_SECONDARY_BUTTON_CLASS,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx("button", {
+						className: DIALOG_PRIMARY_BUTTON_CLASS,
+						disabled: !canApply,
+						onClick: handleApply,
+						type: "button",
+						children: "Apply"
+					})]
+				})
+			]
+		})] })
+	});
+}
+function toWatermarkMode(value) {
+	if (value === "none" || value === "picture" || value === "text") return value;
+	return "text";
+}
+function clampPercent(value) {
+	return Math.min(100, Math.max(0, value));
+}
+function clampScalePercent(value) {
+	return Math.min(300, Math.max(1, value));
+}
+function stripHash(value) {
+	return value.startsWith("#") ? value.slice(1) : value;
+}
+function toColorInputValue(value) {
+	if (!value || value === "auto") return DEFAULT_TEXT_COLOR;
+	return value.startsWith("#") ? value : `#${value}`;
+}
+//#endregion
+export { InsertImageDialog as a, InsertTableDialog as i, SplitCellDialog as n, HyperlinkDialog as o, PasteSpecialDialog as r, WatermarkDialog as t };