@stll/folio-react 0.0.1-placeholder.0 → 0.1.0

package/dist/FindReplaceDialog-CG1VKA_g.js

@@ -0,0 +1,358 @@
+import { r as useFolioUI } from "./folio-ui-o_rftArH.js";
+import "./useFindReplace-MZ8wi31A.js";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { ChevronDownIcon, ChevronUpIcon, SearchIcon, XIcon } from "lucide-react";
+import { useTranslations } from "use-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "@stll/folio-core/managers/FindReplaceManager";
+//#region src/components/dialogs/findReplaceDialogBehavior.ts
+const getFindDialogOpenBehavior = ({ isOpen, initialSearchText }) => {
+	if (!isOpen) return {
+		type: "closed",
+		shouldClearHighlights: true
+	};
+	return {
+		type: "open",
+		searchText: initialSearchText,
+		shouldFindInitialText: initialSearchText.length > 0
+	};
+};
+const shouldRefreshFindDialogSearch = ({ isOpen, searchText }) => isOpen && searchText.trim().length > 0;
+//#endregion
+//#region src/components/dialogs/findReplaceDialogLayout.ts
+const FIND_REPLACE_DIALOG_TOP = "var(--folio-find-replace-top, 7rem)";
+const FIND_REPLACE_DIALOG_LEFT = "var(--folio-find-replace-left, 5.5rem)";
+const FIND_REPLACE_DIALOG_RIGHT = "var(--folio-find-replace-right, 0px)";
+function getFindReplaceOverlayStyle(style) {
+	return {
+		top: FIND_REPLACE_DIALOG_TOP,
+		left: FIND_REPLACE_DIALOG_LEFT,
+		right: FIND_REPLACE_DIALOG_RIGHT,
+		...style
+	};
+}
+//#endregion
+//#region src/components/dialogs/findReplaceInteraction.ts
+function getFindEnterAction({ searchText, result, shiftKey }) {
+	if (!searchText.trim() || !result || result.totalCount === 0) return "search";
+	return shiftKey ? "previous" : "next";
+}
+//#endregion
+//#region src/components/dialogs/FindReplaceDialog.tsx
+/**
+* Find and Replace Dialog Component
+*
+* Modal dialog for searching and replacing text in the document.
+* Supports find, find next/previous, replace, and replace all operations.
+*
+* Logic and utilities are in separate files:
+* - findReplaceUtils.ts — Pure search/replace functions and types
+* - useFindReplace.ts   — React hook for dialog state management
+*/
+/**
+* FindReplaceDialog component - Modal for finding and replacing text
+*/
+function FindReplaceDialog({ isOpen, onClose, onFind, onFindNext, onFindPrevious, onHighlightMatches, onClearHighlights, initialSearchText = "", currentResult, className, style }) {
+	const id = React.useId();
+	const t = useTranslations("folio");
+	const { Button, Input, Checkbox } = useFolioUI();
+	const [searchText, setSearchText] = useState("");
+	const [matchCase, setMatchCase] = useState(false);
+	const [matchWholeWord, setMatchWholeWord] = useState(false);
+	const [result, setResult] = useState(null);
+	const searchInputRef = useRef(null);
+	const latestFindCallbacksRef = useRef({
+		onFind,
+		onHighlightMatches,
+		onClearHighlights
+	});
+	latestFindCallbacksRef.current = {
+		onFind,
+		onHighlightMatches,
+		onClearHighlights
+	};
+	const latestFindOptionsRef = useRef({
+		matchCase,
+		matchWholeWord
+	});
+	latestFindOptionsRef.current = {
+		matchCase,
+		matchWholeWord
+	};
+	const latestSearchStateRef = useRef({
+		isOpen,
+		searchText
+	});
+	latestSearchStateRef.current = {
+		isOpen,
+		searchText
+	};
+	useEffect(() => {
+		if (currentResult !== void 0) setResult(currentResult);
+	}, [currentResult]);
+	useEffect(() => {
+		const behavior = getFindDialogOpenBehavior({
+			isOpen,
+			initialSearchText
+		});
+		if (behavior.type === "closed") {
+			latestFindCallbacksRef.current.onClearHighlights?.();
+			return;
+		}
+		setSearchText(behavior.searchText);
+		setResult(null);
+		setTimeout(() => {
+			searchInputRef.current?.focus();
+			searchInputRef.current?.select();
+		}, 100);
+		if (behavior.shouldFindInitialText) {
+			const callbacks = latestFindCallbacksRef.current;
+			const options = latestFindOptionsRef.current;
+			const searchResult = callbacks.onFind(behavior.searchText, {
+				matchCase: options.matchCase,
+				matchWholeWord: options.matchWholeWord
+			});
+			setResult(searchResult);
+			if (searchResult?.matches && callbacks.onHighlightMatches) callbacks.onHighlightMatches(searchResult.matches);
+		}
+	}, [isOpen, initialSearchText]);
+	const performSearch = useCallback(() => {
+		if (!searchText.trim()) {
+			setResult(null);
+			if (onClearHighlights) onClearHighlights();
+			return;
+		}
+		const searchResult = onFind(searchText, {
+			matchCase,
+			matchWholeWord
+		});
+		setResult(searchResult);
+		if (searchResult?.matches && onHighlightMatches) onHighlightMatches(searchResult.matches);
+		else if (onClearHighlights) onClearHighlights();
+	}, [
+		searchText,
+		matchCase,
+		matchWholeWord,
+		onFind,
+		onHighlightMatches,
+		onClearHighlights
+	]);
+	const performSearchRef = useRef(performSearch);
+	performSearchRef.current = performSearch;
+	useEffect(() => {
+		if (shouldRefreshFindDialogSearch(latestSearchStateRef.current)) performSearchRef.current();
+	}, [matchCase, matchWholeWord]);
+	useEffect(() => {
+		if (!isOpen) return;
+		if (!searchText.trim()) {
+			setResult(null);
+			onClearHighlights?.();
+			return;
+		}
+		const timeout = setTimeout(performSearch, 120);
+		return () => clearTimeout(timeout);
+	}, [
+		isOpen,
+		searchText,
+		performSearch,
+		onClearHighlights
+	]);
+	const handleSearchChange = useCallback((e) => {
+		setSearchText(e.target.value);
+		setResult(null);
+	}, []);
+	const handleFindNext = useCallback(() => {
+		if (!searchText.trim()) {
+			performSearch();
+			return;
+		}
+		if (!result || result.totalCount === 0) {
+			performSearch();
+			return;
+		}
+		if (onFindNext()) {
+			const newIndex = (result.currentIndex + 1) % result.totalCount;
+			setResult({
+				...result,
+				currentIndex: newIndex
+			});
+		}
+	}, [
+		searchText,
+		result,
+		performSearch,
+		onFindNext
+	]);
+	const handleFindPrevious = useCallback(() => {
+		if (!searchText.trim()) {
+			performSearch();
+			return;
+		}
+		if (!result || result.totalCount === 0) {
+			performSearch();
+			return;
+		}
+		if (onFindPrevious()) {
+			const newIndex = result.currentIndex === 0 ? result.totalCount - 1 : result.currentIndex - 1;
+			setResult({
+				...result,
+				currentIndex: newIndex
+			});
+		}
+	}, [
+		searchText,
+		result,
+		performSearch,
+		onFindPrevious
+	]);
+	const handleSearchKeyDown = useCallback((e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			const action = getFindEnterAction({
+				searchText,
+				result,
+				shiftKey: e.shiftKey
+			});
+			if (action === "search") {
+				performSearch();
+				return;
+			}
+			if (action === "previous") {
+				handleFindPrevious();
+				return;
+			}
+			handleFindNext();
+		} else if (e.key === "Escape") onClose();
+	}, [
+		searchText,
+		result,
+		performSearch,
+		handleFindPrevious,
+		handleFindNext,
+		onClose
+	]);
+	const handleOverlayClick = useCallback((e) => {
+		if (e.target === e.currentTarget) {}
+	}, []);
+	const handleDialogKeyDown = useCallback((e) => {
+		if (e.key === "Escape") onClose();
+	}, [onClose]);
+	if (!isOpen) return null;
+	const hasMatches = result && result.totalCount > 0;
+	const noMatches = result && result.totalCount === 0 && searchText.trim();
+	const overlayStyle = getFindReplaceOverlayStyle(style);
+	const titleId = `${id}-find-replace-dialog-title`;
+	const findTextId = `${id}-find-text`;
+	return /* @__PURE__ */ jsx("div", {
+		role: "presentation",
+		className: `docx-find-replace-dialog-overlay pointer-events-none fixed end-0 bottom-0 z-[10002] flex items-start justify-end bg-transparent ${className || ""}`,
+		style: overlayStyle,
+		"data-slot": "folio-find-replace-overlay",
+		onClick: handleOverlayClick,
+		onKeyDown: handleDialogKeyDown,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "docx-find-replace-dialog bg-popover text-popover-foreground pointer-events-auto me-4 mt-3 w-[min(440px,calc(100vw-var(--folio-find-replace-left,5.5rem)-2rem))] rounded-lg border shadow-xl",
+			"data-testid": "find-replace-dialog",
+			role: "dialog",
+			"aria-modal": "false",
+			"aria-labelledby": titleId,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "bg-muted/30 flex items-center justify-between gap-3 border-b px-3 py-2",
+				children: [/* @__PURE__ */ jsxs("h2", {
+					className: "flex min-w-0 items-center gap-2 text-sm font-medium",
+					id: titleId,
+					children: [/* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground size-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: t("findReplace.find")
+					})]
+				}), /* @__PURE__ */ jsx(Button, {
+					onClick: onClose,
+					"aria-label": t("findReplace.close"),
+					size: "icon-xs",
+					title: t("findReplace.close"),
+					variant: "ghost",
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2 p-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "grid grid-cols-[4.5rem_minmax(0,1fr)_auto] items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("label", {
+								className: "text-muted-foreground text-xs font-medium",
+								htmlFor: findTextId,
+								children: t("findReplace.find")
+							}),
+							/* @__PURE__ */ jsx(Input, {
+								ref: searchInputRef,
+								id: findTextId,
+								nativeInput: true,
+								type: "text",
+								className: "h-8",
+								size: "sm",
+								value: searchText,
+								onChange: handleSearchChange,
+								onKeyDown: handleSearchKeyDown,
+								onBlur: () => {
+									if (searchText.trim() && !result) performSearch();
+								},
+								placeholder: t("findReplace.findPlaceholder"),
+								"aria-label": t("findReplace.findText")
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-0.5",
+								children: [/* @__PURE__ */ jsx(Button, {
+									onClick: handleFindPrevious,
+									disabled: !hasMatches,
+									"aria-label": t("findReplace.previous"),
+									title: t("findReplace.previousShortcut"),
+									size: "icon-xs",
+									variant: "ghost",
+									children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+								}), /* @__PURE__ */ jsx(Button, {
+									onClick: handleFindNext,
+									disabled: !hasMatches,
+									"aria-label": t("findReplace.next"),
+									title: t("findReplace.nextShortcut"),
+									size: "icon-xs",
+									variant: "ghost",
+									children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+								})]
+							})
+						]
+					}),
+					hasMatches && /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground ms-20 text-xs tabular-nums",
+						children: t("findReplace.matchCounter", {
+							current: String(result.currentIndex + 1),
+							total: String(result.totalCount)
+						})
+					}),
+					noMatches && /* @__PURE__ */ jsx("div", {
+						className: "text-destructive ms-20 text-xs",
+						children: t("findReplace.noResults")
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "ms-20 flex flex-wrap items-center gap-x-4 gap-y-2",
+						children: [/* @__PURE__ */ jsxs("label", {
+							className: "text-muted-foreground flex items-center gap-2 text-xs",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
+								checked: matchCase,
+								onCheckedChange: setMatchCase
+							}), t("findReplace.matchCase")]
+						}), /* @__PURE__ */ jsxs("label", {
+							className: "text-muted-foreground flex items-center gap-2 text-xs",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
+								checked: matchWholeWord,
+								onCheckedChange: setMatchWholeWord
+							}), t("findReplace.wholeWords")]
+						})]
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { FindReplaceDialog };

package/dist/FootnotePropertiesDialog-MuW4D3gt.js

@@ -0,0 +1,265 @@
+import { r as useFolioUI } from "./folio-ui-o_rftArH.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dialogs/FootnotePropertiesDialog.tsx
+/**
+* Footnote & Endnote Properties Dialog
+*
+* Edits position, numbering format, start number, and restart rules.
+*/
+const numberFormatOptions = [
+	{
+		value: "decimal",
+		label: "1, 2, 3, ..."
+	},
+	{
+		value: "lowerRoman",
+		label: "i, ii, iii, ..."
+	},
+	{
+		value: "upperRoman",
+		label: "I, II, III, ..."
+	},
+	{
+		value: "lowerLetter",
+		label: "a, b, c, ..."
+	},
+	{
+		value: "upperLetter",
+		label: "A, B, C, ..."
+	},
+	{
+		value: "chicago",
+		label: "*, †, ‡, ..."
+	}
+];
+function FootnotePropertiesDialog({ isOpen, onClose, onApply, footnotePr, endnotePr }) {
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const id = useId();
+	const [fnPosition, setFnPosition] = useState(footnotePr?.position ?? "pageBottom");
+	const [fnNumFmt, setFnNumFmt] = useState(footnotePr?.numFmt ?? "decimal");
+	const [fnNumStart, setFnNumStart] = useState(footnotePr?.numStart ?? 1);
+	const [fnRestart, setFnRestart] = useState(footnotePr?.numRestart ?? "continuous");
+	const [enPosition, setEnPosition] = useState(endnotePr?.position ?? "docEnd");
+	const [enNumFmt, setEnNumFmt] = useState(endnotePr?.numFmt ?? "lowerRoman");
+	const [enNumStart, setEnNumStart] = useState(endnotePr?.numStart ?? 1);
+	const [enRestart, setEnRestart] = useState(endnotePr?.numRestart ?? "continuous");
+	const handleApply = () => {
+		onApply({
+			position: fnPosition,
+			numFmt: fnNumFmt,
+			numStart: fnNumStart,
+			numRestart: fnRestart
+		}, {
+			position: enPosition,
+			numFmt: enNumFmt,
+			numStart: enNumStart,
+			numRestart: enRestart
+		});
+		onClose();
+	};
+	const labelCls = "block text-muted-foreground mb-1 text-xs";
+	const selectCls = "border-input bg-background text-foreground mb-2 w-full rounded border px-2 py-1 text-[13px] outline-none";
+	const inputCls = "border-input bg-background text-foreground w-[60px] rounded border px-2 py-1 text-[13px] outline-none";
+	const sectionCls = "mb-4 rounded border p-3";
+	const fieldIds = {
+		fnPosition: `${id}-fn-position`,
+		fnNumFmt: `${id}-fn-num-fmt`,
+		fnStartAt: `${id}-fn-start-at`,
+		fnNumbering: `${id}-fn-numbering`,
+		enPosition: `${id}-en-position`,
+		enNumFmt: `${id}-en-num-fmt`,
+		enStartAt: `${id}-en-start-at`,
+		enNumbering: `${id}-en-numbering`
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 z-[10000] bg-black/50" }), /* @__PURE__ */ jsxs(DialogPopup, {
+			className: "bg-popover fixed start-1/2 top-1/2 z-[10001] w-full max-w-[500px] min-w-[400px] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl",
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: "border-b px-5 py-3 text-base font-semibold",
+					children: "Footnote & Endnote Properties"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3 px-5 py-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: sectionCls,
+						children: [
+							/* @__PURE__ */ jsx("h4", {
+								className: "mb-2 text-sm font-semibold",
+								children: "Footnotes"
+							}),
+							/* @__PURE__ */ jsx("label", {
+								htmlFor: fieldIds.fnPosition,
+								className: labelCls,
+								children: "Position"
+							}),
+							/* @__PURE__ */ jsxs("select", {
+								id: fieldIds.fnPosition,
+								className: selectCls,
+								value: fnPosition,
+								onChange: (e) => setFnPosition(e.target.value),
+								children: [/* @__PURE__ */ jsx("option", {
+									value: "pageBottom",
+									children: "Bottom of page"
+								}), /* @__PURE__ */ jsx("option", {
+									value: "beneathText",
+									children: "Below text"
+								})]
+							}),
+							/* @__PURE__ */ jsx("label", {
+								htmlFor: fieldIds.fnNumFmt,
+								className: labelCls,
+								children: "Number format"
+							}),
+							/* @__PURE__ */ jsx("select", {
+								id: fieldIds.fnNumFmt,
+								className: selectCls,
+								value: fnNumFmt,
+								onChange: (e) => setFnNumFmt(e.target.value),
+								children: numberFormatOptions.map((o) => /* @__PURE__ */ jsx("option", {
+									value: o.value,
+									children: o.label
+								}, o.value))
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+									htmlFor: fieldIds.fnStartAt,
+									className: labelCls,
+									children: "Start at"
+								}), /* @__PURE__ */ jsx("input", {
+									id: fieldIds.fnStartAt,
+									type: "number",
+									min: 1,
+									className: inputCls,
+									value: fnNumStart,
+									onChange: (e) => setFnNumStart(Number.parseInt(e.target.value, 10) || 1)
+								})] }), /* @__PURE__ */ jsxs("div", {
+									className: "flex-1",
+									children: [/* @__PURE__ */ jsx("label", {
+										htmlFor: fieldIds.fnNumbering,
+										className: labelCls,
+										children: "Numbering"
+									}), /* @__PURE__ */ jsxs("select", {
+										id: fieldIds.fnNumbering,
+										className: selectCls,
+										value: fnRestart,
+										onChange: (e) => setFnRestart(e.target.value),
+										children: [
+											/* @__PURE__ */ jsx("option", {
+												value: "continuous",
+												children: "Continuous"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "eachSect",
+												children: "Restart each section"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "eachPage",
+												children: "Restart each page"
+											})
+										]
+									})]
+								})]
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: sectionCls,
+						children: [
+							/* @__PURE__ */ jsx("h4", {
+								className: "mb-2 text-sm font-semibold",
+								children: "Endnotes"
+							}),
+							/* @__PURE__ */ jsx("label", {
+								htmlFor: fieldIds.enPosition,
+								className: labelCls,
+								children: "Position"
+							}),
+							/* @__PURE__ */ jsxs("select", {
+								id: fieldIds.enPosition,
+								className: selectCls,
+								value: enPosition,
+								onChange: (e) => setEnPosition(e.target.value),
+								children: [/* @__PURE__ */ jsx("option", {
+									value: "docEnd",
+									children: "End of document"
+								}), /* @__PURE__ */ jsx("option", {
+									value: "sectEnd",
+									children: "End of section"
+								})]
+							}),
+							/* @__PURE__ */ jsx("label", {
+								htmlFor: fieldIds.enNumFmt,
+								className: labelCls,
+								children: "Number format"
+							}),
+							/* @__PURE__ */ jsx("select", {
+								id: fieldIds.enNumFmt,
+								className: selectCls,
+								value: enNumFmt,
+								onChange: (e) => setEnNumFmt(e.target.value),
+								children: numberFormatOptions.map((o) => /* @__PURE__ */ jsx("option", {
+									value: o.value,
+									children: o.label
+								}, o.value))
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+									htmlFor: fieldIds.enStartAt,
+									className: labelCls,
+									children: "Start at"
+								}), /* @__PURE__ */ jsx("input", {
+									id: fieldIds.enStartAt,
+									type: "number",
+									min: 1,
+									className: inputCls,
+									value: enNumStart,
+									onChange: (e) => setEnNumStart(Number.parseInt(e.target.value, 10) || 1)
+								})] }), /* @__PURE__ */ jsxs("div", {
+									className: "flex-1",
+									children: [/* @__PURE__ */ jsx("label", {
+										htmlFor: fieldIds.enNumbering,
+										className: labelCls,
+										children: "Numbering"
+									}), /* @__PURE__ */ jsxs("select", {
+										id: fieldIds.enNumbering,
+										className: selectCls,
+										value: enRestart,
+										onChange: (e) => setEnRestart(e.target.value),
+										children: [/* @__PURE__ */ jsx("option", {
+											value: "continuous",
+											children: "Continuous"
+										}), /* @__PURE__ */ jsx("option", {
+											value: "eachSect",
+											children: "Restart each section"
+										})]
+									})]
+								})]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2 border-t px-5 py-3",
+					children: [/* @__PURE__ */ jsx(DialogClose, {
+						className: "border-input rounded border px-4 py-1.5 text-[13px]",
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx("button", {
+						className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
+						onClick: handleApply,
+						type: "button",
+						children: "Apply"
+					})]
+				})
+			]
+		})] })
+	});
+}
+//#endregion
+export { FootnotePropertiesDialog };