@stll/folio-react 0.6.0 → 0.8.0

package/dist/ImagePositionDialog-DNodkoI2.js

@@ -0,0 +1,1065 @@
+import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
+import { r as useFolioUI } from "./folio-ui-BgDDRsUX.js";
+import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
+import { c } from "react-compiler-runtime";
+import { useEffect, useId, useState } from "react";
+import { useTranslations } from "use-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dialogs/ImagePositionDialog.tsx
+/**
+* Image Position Dialog
+*
+* Modal for editing image positioning settings:
+* - Horizontal: alignment or offset, relative to page/column/margin/paragraph
+* - Vertical: alignment or offset, relative to page/margin/paragraph/line
+* - Distance from text (top/bottom/left/right)
+*/
+var ImagePositionDialog_exports = /* @__PURE__ */ __exportAll({ ImagePositionDialog: () => ImagePositionDialog });
+function ImagePositionDialog(t0) {
+	const $ = c(277);
+	const { isOpen, onClose, onApply, currentData } = t0;
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const handleOpenChange = useCloseOnDialogOpenChange(onClose);
+	const t = useTranslations("folio");
+	const id = useId();
+	const [hMode, setHMode] = useState("align");
+	const [hAlign, setHAlign] = useState("center");
+	const [hRelativeTo, setHRelativeTo] = useState("column");
+	const [hOffset, setHOffset] = useState(0);
+	const [vMode, setVMode] = useState("align");
+	const [vAlign, setVAlign] = useState("top");
+	const [vRelativeTo, setVRelativeTo] = useState("paragraph");
+	const [vOffset, setVOffset] = useState(0);
+	const [distTop, setDistTop] = useState(0);
+	const [distBottom, setDistBottom] = useState(0);
+	const [distLeft, setDistLeft] = useState(0);
+	const [distRight, setDistRight] = useState(0);
+	let t1;
+	if ($[0] !== currentData?.distBottom || $[1] !== currentData?.distLeft || $[2] !== currentData?.distRight || $[3] !== currentData?.distTop || $[4] !== currentData?.horizontal || $[5] !== currentData?.vertical || $[6] !== isOpen) {
+		t1 = () => {
+			if (!isOpen) return;
+			const h = currentData?.horizontal;
+			const v = currentData?.vertical;
+			if (h?.align) {
+				setHMode("align");
+				setHAlign(h.align);
+			} else if (h?.posOffset !== void 0) {
+				setHMode("offset");
+				setHOffset(h.posOffset);
+			}
+			if (h?.relativeTo) setHRelativeTo(h.relativeTo);
+			if (v?.align) {
+				setVMode("align");
+				setVAlign(v.align);
+			} else if (v?.posOffset !== void 0) {
+				setVMode("offset");
+				setVOffset(v.posOffset);
+			}
+			if (v?.relativeTo) setVRelativeTo(v.relativeTo);
+			setDistTop(currentData?.distTop ?? 0);
+			setDistBottom(currentData?.distBottom ?? 0);
+			setDistLeft(currentData?.distLeft ?? 0);
+			setDistRight(currentData?.distRight ?? 0);
+		};
+		$[0] = currentData?.distBottom;
+		$[1] = currentData?.distLeft;
+		$[2] = currentData?.distRight;
+		$[3] = currentData?.distTop;
+		$[4] = currentData?.horizontal;
+		$[5] = currentData?.vertical;
+		$[6] = isOpen;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== currentData || $[9] !== isOpen) {
+		t2 = [isOpen, currentData];
+		$[8] = currentData;
+		$[9] = isOpen;
+		$[10] = t2;
+	} else t2 = $[10];
+	useEffect(t1, t2);
+	let t3;
+	if ($[11] !== distBottom || $[12] !== distLeft || $[13] !== distRight || $[14] !== distTop || $[15] !== hAlign || $[16] !== hMode || $[17] !== hOffset || $[18] !== hRelativeTo || $[19] !== onApply || $[20] !== onClose || $[21] !== vAlign || $[22] !== vMode || $[23] !== vOffset || $[24] !== vRelativeTo) {
+		t3 = () => {
+			const data = {};
+			data.horizontal = {
+				relativeTo: hRelativeTo,
+				...hMode === "align" ? { align: hAlign } : { posOffset: hOffset }
+			};
+			data.vertical = {
+				relativeTo: vRelativeTo,
+				...vMode === "align" ? { align: vAlign } : { posOffset: vOffset }
+			};
+			data.distTop = distTop;
+			data.distBottom = distBottom;
+			data.distLeft = distLeft;
+			data.distRight = distRight;
+			onApply(data);
+			onClose();
+		};
+		$[11] = distBottom;
+		$[12] = distLeft;
+		$[13] = distRight;
+		$[14] = distTop;
+		$[15] = hAlign;
+		$[16] = hMode;
+		$[17] = hOffset;
+		$[18] = hRelativeTo;
+		$[19] = onApply;
+		$[20] = onClose;
+		$[21] = vAlign;
+		$[22] = vMode;
+		$[23] = vOffset;
+		$[24] = vRelativeTo;
+		$[25] = t3;
+	} else t3 = $[25];
+	const handleApply = t3;
+	const t4 = `${id}-img-pos-h-mode`;
+	const t5 = `${id}-img-pos-h-align`;
+	const t6 = `${id}-img-pos-h-offset`;
+	const t7 = `${id}-img-pos-h-rel`;
+	const t8 = `${id}-img-pos-v-mode`;
+	const t9 = `${id}-img-pos-v-align`;
+	const t10 = `${id}-img-pos-v-offset`;
+	const t11 = `${id}-img-pos-v-rel`;
+	const t12 = `${id}-img-pos-dist-top`;
+	const t13 = `${id}-img-pos-dist-bottom`;
+	const t14 = `${id}-img-pos-dist-left`;
+	const t15 = `${id}-img-pos-dist-right`;
+	let t16;
+	if ($[26] !== t10 || $[27] !== t11 || $[28] !== t12 || $[29] !== t13 || $[30] !== t14 || $[31] !== t15 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t7 || $[36] !== t8 || $[37] !== t9) {
+		t16 = {
+			hMode: t4,
+			hAlign: t5,
+			hOffset: t6,
+			hRelativeTo: t7,
+			vMode: t8,
+			vAlign: t9,
+			vOffset: t10,
+			vRelativeTo: t11,
+			distTop: t12,
+			distBottom: t13,
+			distLeft: t14,
+			distRight: t15
+		};
+		$[26] = t10;
+		$[27] = t11;
+		$[28] = t12;
+		$[29] = t13;
+		$[30] = t14;
+		$[31] = t15;
+		$[32] = t4;
+		$[33] = t5;
+		$[34] = t6;
+		$[35] = t7;
+		$[36] = t8;
+		$[37] = t9;
+		$[38] = t16;
+	} else t16 = $[38];
+	const fieldIds = t16;
+	let t17;
+	if ($[39] !== DialogBackdrop) {
+		t17 = /* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 z-[10000] bg-black/50" });
+		$[39] = DialogBackdrop;
+		$[40] = t17;
+	} else t17 = $[40];
+	let t18;
+	if ($[41] !== t) {
+		t18 = t("dialogs.imagePosition.title");
+		$[41] = t;
+		$[42] = t18;
+	} else t18 = $[42];
+	let t19;
+	if ($[43] !== DialogTitle || $[44] !== t18) {
+		t19 = /* @__PURE__ */ jsx(DialogTitle, {
+			className: "border-b px-5 py-3 text-base font-semibold",
+			children: t18
+		});
+		$[43] = DialogTitle;
+		$[44] = t18;
+		$[45] = t19;
+	} else t19 = $[45];
+	let t20;
+	if ($[46] !== t) {
+		t20 = t("dialogs.imagePosition.horizontal");
+		$[46] = t;
+		$[47] = t20;
+	} else t20 = $[47];
+	let t21;
+	if ($[48] !== t20) {
+		t21 = /* @__PURE__ */ jsx("div", {
+			className: "text-foreground text-[13px] font-semibold",
+			children: t20
+		});
+		$[48] = t20;
+		$[49] = t21;
+	} else t21 = $[49];
+	const t22 = fieldIds.hMode;
+	let t23;
+	if ($[50] !== t) {
+		t23 = t("dialogs.imagePosition.position");
+		$[50] = t;
+		$[51] = t23;
+	} else t23 = $[51];
+	let t24;
+	if ($[52] !== fieldIds.hMode || $[53] !== t23) {
+		t24 = /* @__PURE__ */ jsx("label", {
+			className: "w-[75px] text-muted-foreground text-xs",
+			htmlFor: t22,
+			children: t23
+		});
+		$[52] = fieldIds.hMode;
+		$[53] = t23;
+		$[54] = t24;
+	} else t24 = $[54];
+	const t25 = fieldIds.hMode;
+	let t26;
+	if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
+		t26 = (e) => setHMode(e.target.value);
+		$[55] = t26;
+	} else t26 = $[55];
+	let t27;
+	if ($[56] !== t) {
+		t27 = t("dialogs.imagePosition.alignment");
+		$[56] = t;
+		$[57] = t27;
+	} else t27 = $[57];
+	let t28;
+	if ($[58] !== t27) {
+		t28 = /* @__PURE__ */ jsx("option", {
+			value: "align",
+			children: t27
+		});
+		$[58] = t27;
+		$[59] = t28;
+	} else t28 = $[59];
+	let t29;
+	if ($[60] !== t) {
+		t29 = t("dialogs.imagePosition.offset");
+		$[60] = t;
+		$[61] = t29;
+	} else t29 = $[61];
+	let t30;
+	if ($[62] !== t29) {
+		t30 = /* @__PURE__ */ jsx("option", {
+			value: "offset",
+			children: t29
+		});
+		$[62] = t29;
+		$[63] = t30;
+	} else t30 = $[63];
+	let t31;
+	if ($[64] !== fieldIds.hMode || $[65] !== hMode || $[66] !== t28 || $[67] !== t30) {
+		t31 = /* @__PURE__ */ jsxs("select", {
+			className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+			id: t25,
+			value: hMode,
+			onChange: t26,
+			children: [t28, t30]
+		});
+		$[64] = fieldIds.hMode;
+		$[65] = hMode;
+		$[66] = t28;
+		$[67] = t30;
+		$[68] = t31;
+	} else t31 = $[68];
+	let t32;
+	if ($[69] !== t24 || $[70] !== t31) {
+		t32 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t24, t31]
+		});
+		$[69] = t24;
+		$[70] = t31;
+		$[71] = t32;
+	} else t32 = $[71];
+	let t33;
+	if ($[72] !== fieldIds.hAlign || $[73] !== fieldIds.hOffset || $[74] !== hAlign || $[75] !== hMode || $[76] !== hOffset || $[77] !== t) {
+		t33 = hMode === "align" ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("label", {
+				className: "w-[75px] text-muted-foreground text-xs",
+				htmlFor: fieldIds.hAlign,
+				children: t("dialogs.imagePosition.align")
+			}), /* @__PURE__ */ jsxs("select", {
+				className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+				id: fieldIds.hAlign,
+				value: hAlign,
+				onChange: (e_0) => setHAlign(e_0.target.value),
+				children: [
+					/* @__PURE__ */ jsx("option", {
+						value: "left",
+						children: t("dialogs.imagePosition.alignOptions.left")
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "center",
+						children: t("dialogs.imagePosition.alignOptions.center")
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "right",
+						children: t("dialogs.imagePosition.alignOptions.right")
+					})
+				]
+			})]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("label", {
+				className: "w-[75px] text-muted-foreground text-xs",
+				htmlFor: fieldIds.hOffset,
+				children: t("dialogs.imagePosition.offsetPx")
+			}), /* @__PURE__ */ jsx("input", {
+				className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+				id: fieldIds.hOffset,
+				type: "number",
+				value: hOffset,
+				onChange: (e_1) => setHOffset(Number(e_1.target.value) || 0)
+			})]
+		});
+		$[72] = fieldIds.hAlign;
+		$[73] = fieldIds.hOffset;
+		$[74] = hAlign;
+		$[75] = hMode;
+		$[76] = hOffset;
+		$[77] = t;
+		$[78] = t33;
+	} else t33 = $[78];
+	const t34 = fieldIds.hRelativeTo;
+	let t35;
+	if ($[79] !== t) {
+		t35 = t("dialogs.imagePosition.relativeTo");
+		$[79] = t;
+		$[80] = t35;
+	} else t35 = $[80];
+	let t36;
+	if ($[81] !== fieldIds.hRelativeTo || $[82] !== t35) {
+		t36 = /* @__PURE__ */ jsx("label", {
+			className: "w-[75px] text-muted-foreground text-xs",
+			htmlFor: t34,
+			children: t35
+		});
+		$[81] = fieldIds.hRelativeTo;
+		$[82] = t35;
+		$[83] = t36;
+	} else t36 = $[83];
+	const t37 = fieldIds.hRelativeTo;
+	let t38;
+	if ($[84] === Symbol.for("react.memo_cache_sentinel")) {
+		t38 = (e_2) => setHRelativeTo(e_2.target.value);
+		$[84] = t38;
+	} else t38 = $[84];
+	let t39;
+	if ($[85] !== t) {
+		t39 = t("dialogs.imagePosition.relativeOptions.page");
+		$[85] = t;
+		$[86] = t39;
+	} else t39 = $[86];
+	let t40;
+	if ($[87] !== t39) {
+		t40 = /* @__PURE__ */ jsx("option", {
+			value: "page",
+			children: t39
+		});
+		$[87] = t39;
+		$[88] = t40;
+	} else t40 = $[88];
+	let t41;
+	if ($[89] !== t) {
+		t41 = t("dialogs.imagePosition.relativeOptions.column");
+		$[89] = t;
+		$[90] = t41;
+	} else t41 = $[90];
+	let t42;
+	if ($[91] !== t41) {
+		t42 = /* @__PURE__ */ jsx("option", {
+			value: "column",
+			children: t41
+		});
+		$[91] = t41;
+		$[92] = t42;
+	} else t42 = $[92];
+	let t43;
+	if ($[93] !== t) {
+		t43 = t("dialogs.imagePosition.relativeOptions.margin");
+		$[93] = t;
+		$[94] = t43;
+	} else t43 = $[94];
+	let t44;
+	if ($[95] !== t43) {
+		t44 = /* @__PURE__ */ jsx("option", {
+			value: "margin",
+			children: t43
+		});
+		$[95] = t43;
+		$[96] = t44;
+	} else t44 = $[96];
+	let t45;
+	if ($[97] !== t) {
+		t45 = t("dialogs.imagePosition.relativeOptions.character");
+		$[97] = t;
+		$[98] = t45;
+	} else t45 = $[98];
+	let t46;
+	if ($[99] !== t45) {
+		t46 = /* @__PURE__ */ jsx("option", {
+			value: "character",
+			children: t45
+		});
+		$[99] = t45;
+		$[100] = t46;
+	} else t46 = $[100];
+	let t47;
+	if ($[101] !== fieldIds.hRelativeTo || $[102] !== hRelativeTo || $[103] !== t40 || $[104] !== t42 || $[105] !== t44 || $[106] !== t46) {
+		t47 = /* @__PURE__ */ jsxs("select", {
+			className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+			id: t37,
+			value: hRelativeTo,
+			onChange: t38,
+			children: [
+				t40,
+				t42,
+				t44,
+				t46
+			]
+		});
+		$[101] = fieldIds.hRelativeTo;
+		$[102] = hRelativeTo;
+		$[103] = t40;
+		$[104] = t42;
+		$[105] = t44;
+		$[106] = t46;
+		$[107] = t47;
+	} else t47 = $[107];
+	let t48;
+	if ($[108] !== t36 || $[109] !== t47) {
+		t48 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t36, t47]
+		});
+		$[108] = t36;
+		$[109] = t47;
+		$[110] = t48;
+	} else t48 = $[110];
+	let t49;
+	if ($[111] !== t21 || $[112] !== t32 || $[113] !== t33 || $[114] !== t48) {
+		t49 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				t21,
+				t32,
+				t33,
+				t48
+			]
+		});
+		$[111] = t21;
+		$[112] = t32;
+		$[113] = t33;
+		$[114] = t48;
+		$[115] = t49;
+	} else t49 = $[115];
+	let t50;
+	if ($[116] !== t) {
+		t50 = t("dialogs.imagePosition.vertical");
+		$[116] = t;
+		$[117] = t50;
+	} else t50 = $[117];
+	let t51;
+	if ($[118] !== t50) {
+		t51 = /* @__PURE__ */ jsx("div", {
+			className: "text-foreground text-[13px] font-semibold",
+			children: t50
+		});
+		$[118] = t50;
+		$[119] = t51;
+	} else t51 = $[119];
+	const t52 = fieldIds.vMode;
+	let t53;
+	if ($[120] !== t) {
+		t53 = t("dialogs.imagePosition.position");
+		$[120] = t;
+		$[121] = t53;
+	} else t53 = $[121];
+	let t54;
+	if ($[122] !== fieldIds.vMode || $[123] !== t53) {
+		t54 = /* @__PURE__ */ jsx("label", {
+			className: "w-[75px] text-muted-foreground text-xs",
+			htmlFor: t52,
+			children: t53
+		});
+		$[122] = fieldIds.vMode;
+		$[123] = t53;
+		$[124] = t54;
+	} else t54 = $[124];
+	const t55 = fieldIds.vMode;
+	let t56;
+	if ($[125] === Symbol.for("react.memo_cache_sentinel")) {
+		t56 = (e_3) => setVMode(e_3.target.value);
+		$[125] = t56;
+	} else t56 = $[125];
+	let t57;
+	if ($[126] !== t) {
+		t57 = t("dialogs.imagePosition.alignment");
+		$[126] = t;
+		$[127] = t57;
+	} else t57 = $[127];
+	let t58;
+	if ($[128] !== t57) {
+		t58 = /* @__PURE__ */ jsx("option", {
+			value: "align",
+			children: t57
+		});
+		$[128] = t57;
+		$[129] = t58;
+	} else t58 = $[129];
+	let t59;
+	if ($[130] !== t) {
+		t59 = t("dialogs.imagePosition.offset");
+		$[130] = t;
+		$[131] = t59;
+	} else t59 = $[131];
+	let t60;
+	if ($[132] !== t59) {
+		t60 = /* @__PURE__ */ jsx("option", {
+			value: "offset",
+			children: t59
+		});
+		$[132] = t59;
+		$[133] = t60;
+	} else t60 = $[133];
+	let t61;
+	if ($[134] !== fieldIds.vMode || $[135] !== t58 || $[136] !== t60 || $[137] !== vMode) {
+		t61 = /* @__PURE__ */ jsxs("select", {
+			className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+			id: t55,
+			value: vMode,
+			onChange: t56,
+			children: [t58, t60]
+		});
+		$[134] = fieldIds.vMode;
+		$[135] = t58;
+		$[136] = t60;
+		$[137] = vMode;
+		$[138] = t61;
+	} else t61 = $[138];
+	let t62;
+	if ($[139] !== t54 || $[140] !== t61) {
+		t62 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t54, t61]
+		});
+		$[139] = t54;
+		$[140] = t61;
+		$[141] = t62;
+	} else t62 = $[141];
+	let t63;
+	if ($[142] !== fieldIds.vAlign || $[143] !== fieldIds.vOffset || $[144] !== t || $[145] !== vAlign || $[146] !== vMode || $[147] !== vOffset) {
+		t63 = vMode === "align" ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("label", {
+				className: "w-[75px] text-muted-foreground text-xs",
+				htmlFor: fieldIds.vAlign,
+				children: t("dialogs.imagePosition.align")
+			}), /* @__PURE__ */ jsxs("select", {
+				className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+				id: fieldIds.vAlign,
+				value: vAlign,
+				onChange: (e_4) => setVAlign(e_4.target.value),
+				children: [
+					/* @__PURE__ */ jsx("option", {
+						value: "top",
+						children: t("dialogs.imagePosition.alignOptions.top")
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "center",
+						children: t("dialogs.imagePosition.alignOptions.center")
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "bottom",
+						children: t("dialogs.imagePosition.alignOptions.bottom")
+					})
+				]
+			})]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("label", {
+				className: "w-[75px] text-muted-foreground text-xs",
+				htmlFor: fieldIds.vOffset,
+				children: t("dialogs.imagePosition.offsetPx")
+			}), /* @__PURE__ */ jsx("input", {
+				className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+				id: fieldIds.vOffset,
+				type: "number",
+				value: vOffset,
+				onChange: (e_5) => setVOffset(Number(e_5.target.value) || 0)
+			})]
+		});
+		$[142] = fieldIds.vAlign;
+		$[143] = fieldIds.vOffset;
+		$[144] = t;
+		$[145] = vAlign;
+		$[146] = vMode;
+		$[147] = vOffset;
+		$[148] = t63;
+	} else t63 = $[148];
+	const t64 = fieldIds.vRelativeTo;
+	let t65;
+	if ($[149] !== t) {
+		t65 = t("dialogs.imagePosition.relativeTo");
+		$[149] = t;
+		$[150] = t65;
+	} else t65 = $[150];
+	let t66;
+	if ($[151] !== fieldIds.vRelativeTo || $[152] !== t65) {
+		t66 = /* @__PURE__ */ jsx("label", {
+			className: "w-[75px] text-muted-foreground text-xs",
+			htmlFor: t64,
+			children: t65
+		});
+		$[151] = fieldIds.vRelativeTo;
+		$[152] = t65;
+		$[153] = t66;
+	} else t66 = $[153];
+	const t67 = fieldIds.vRelativeTo;
+	let t68;
+	if ($[154] === Symbol.for("react.memo_cache_sentinel")) {
+		t68 = (e_6) => setVRelativeTo(e_6.target.value);
+		$[154] = t68;
+	} else t68 = $[154];
+	let t69;
+	if ($[155] !== t) {
+		t69 = t("dialogs.imagePosition.relativeOptions.page");
+		$[155] = t;
+		$[156] = t69;
+	} else t69 = $[156];
+	let t70;
+	if ($[157] !== t69) {
+		t70 = /* @__PURE__ */ jsx("option", {
+			value: "page",
+			children: t69
+		});
+		$[157] = t69;
+		$[158] = t70;
+	} else t70 = $[158];
+	let t71;
+	if ($[159] !== t) {
+		t71 = t("dialogs.imagePosition.relativeOptions.margin");
+		$[159] = t;
+		$[160] = t71;
+	} else t71 = $[160];
+	let t72;
+	if ($[161] !== t71) {
+		t72 = /* @__PURE__ */ jsx("option", {
+			value: "margin",
+			children: t71
+		});
+		$[161] = t71;
+		$[162] = t72;
+	} else t72 = $[162];
+	let t73;
+	if ($[163] !== t) {
+		t73 = t("dialogs.imagePosition.relativeOptions.paragraph");
+		$[163] = t;
+		$[164] = t73;
+	} else t73 = $[164];
+	let t74;
+	if ($[165] !== t73) {
+		t74 = /* @__PURE__ */ jsx("option", {
+			value: "paragraph",
+			children: t73
+		});
+		$[165] = t73;
+		$[166] = t74;
+	} else t74 = $[166];
+	let t75;
+	if ($[167] !== t) {
+		t75 = t("dialogs.imagePosition.relativeOptions.line");
+		$[167] = t;
+		$[168] = t75;
+	} else t75 = $[168];
+	let t76;
+	if ($[169] !== t75) {
+		t76 = /* @__PURE__ */ jsx("option", {
+			value: "line",
+			children: t75
+		});
+		$[169] = t75;
+		$[170] = t76;
+	} else t76 = $[170];
+	let t77;
+	if ($[171] !== fieldIds.vRelativeTo || $[172] !== t70 || $[173] !== t72 || $[174] !== t74 || $[175] !== t76 || $[176] !== vRelativeTo) {
+		t77 = /* @__PURE__ */ jsxs("select", {
+			className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+			id: t67,
+			value: vRelativeTo,
+			onChange: t68,
+			children: [
+				t70,
+				t72,
+				t74,
+				t76
+			]
+		});
+		$[171] = fieldIds.vRelativeTo;
+		$[172] = t70;
+		$[173] = t72;
+		$[174] = t74;
+		$[175] = t76;
+		$[176] = vRelativeTo;
+		$[177] = t77;
+	} else t77 = $[177];
+	let t78;
+	if ($[178] !== t66 || $[179] !== t77) {
+		t78 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t66, t77]
+		});
+		$[178] = t66;
+		$[179] = t77;
+		$[180] = t78;
+	} else t78 = $[180];
+	let t79;
+	if ($[181] !== t51 || $[182] !== t62 || $[183] !== t63 || $[184] !== t78) {
+		t79 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				t51,
+				t62,
+				t63,
+				t78
+			]
+		});
+		$[181] = t51;
+		$[182] = t62;
+		$[183] = t63;
+		$[184] = t78;
+		$[185] = t79;
+	} else t79 = $[185];
+	let t80;
+	if ($[186] !== t) {
+		t80 = t("dialogs.imagePosition.distanceFromText");
+		$[186] = t;
+		$[187] = t80;
+	} else t80 = $[187];
+	let t81;
+	if ($[188] !== t80) {
+		t81 = /* @__PURE__ */ jsx("div", {
+			className: "text-foreground text-[13px] font-semibold",
+			children: t80
+		});
+		$[188] = t80;
+		$[189] = t81;
+	} else t81 = $[189];
+	const t82 = fieldIds.distTop;
+	let t83;
+	if ($[190] !== t) {
+		t83 = t("dialogs.imagePosition.alignOptions.top");
+		$[190] = t;
+		$[191] = t83;
+	} else t83 = $[191];
+	let t84;
+	if ($[192] !== fieldIds.distTop || $[193] !== t83) {
+		t84 = /* @__PURE__ */ jsx("label", {
+			className: "w-[45px] text-muted-foreground text-xs",
+			htmlFor: t82,
+			children: t83
+		});
+		$[192] = fieldIds.distTop;
+		$[193] = t83;
+		$[194] = t84;
+	} else t84 = $[194];
+	let t85;
+	if ($[195] === Symbol.for("react.memo_cache_sentinel")) {
+		t85 = (e_7) => setDistTop(Number(e_7.target.value) || 0);
+		$[195] = t85;
+	} else t85 = $[195];
+	let t86;
+	if ($[196] !== distTop || $[197] !== fieldIds.distTop) {
+		t86 = /* @__PURE__ */ jsx("input", {
+			className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+			id: fieldIds.distTop,
+			min: 0,
+			type: "number",
+			value: distTop,
+			onChange: t85
+		});
+		$[196] = distTop;
+		$[197] = fieldIds.distTop;
+		$[198] = t86;
+	} else t86 = $[198];
+	let t87;
+	if ($[199] !== t84 || $[200] !== t86) {
+		t87 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t84, t86]
+		});
+		$[199] = t84;
+		$[200] = t86;
+		$[201] = t87;
+	} else t87 = $[201];
+	const t88 = fieldIds.distBottom;
+	let t89;
+	if ($[202] !== t) {
+		t89 = t("dialogs.imagePosition.alignOptions.bottom");
+		$[202] = t;
+		$[203] = t89;
+	} else t89 = $[203];
+	let t90;
+	if ($[204] !== fieldIds.distBottom || $[205] !== t89) {
+		t90 = /* @__PURE__ */ jsx("label", {
+			className: "w-[45px] text-muted-foreground text-xs",
+			htmlFor: t88,
+			children: t89
+		});
+		$[204] = fieldIds.distBottom;
+		$[205] = t89;
+		$[206] = t90;
+	} else t90 = $[206];
+	let t91;
+	if ($[207] === Symbol.for("react.memo_cache_sentinel")) {
+		t91 = (e_8) => setDistBottom(Number(e_8.target.value) || 0);
+		$[207] = t91;
+	} else t91 = $[207];
+	let t92;
+	if ($[208] !== distBottom || $[209] !== fieldIds.distBottom) {
+		t92 = /* @__PURE__ */ jsx("input", {
+			className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+			id: fieldIds.distBottom,
+			min: 0,
+			type: "number",
+			value: distBottom,
+			onChange: t91
+		});
+		$[208] = distBottom;
+		$[209] = fieldIds.distBottom;
+		$[210] = t92;
+	} else t92 = $[210];
+	let t93;
+	if ($[211] !== t90 || $[212] !== t92) {
+		t93 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t90, t92]
+		});
+		$[211] = t90;
+		$[212] = t92;
+		$[213] = t93;
+	} else t93 = $[213];
+	const t94 = fieldIds.distLeft;
+	let t95;
+	if ($[214] !== t) {
+		t95 = t("dialogs.imagePosition.alignOptions.left");
+		$[214] = t;
+		$[215] = t95;
+	} else t95 = $[215];
+	let t96;
+	if ($[216] !== fieldIds.distLeft || $[217] !== t95) {
+		t96 = /* @__PURE__ */ jsx("label", {
+			className: "w-[45px] text-muted-foreground text-xs",
+			htmlFor: t94,
+			children: t95
+		});
+		$[216] = fieldIds.distLeft;
+		$[217] = t95;
+		$[218] = t96;
+	} else t96 = $[218];
+	let t97;
+	if ($[219] === Symbol.for("react.memo_cache_sentinel")) {
+		t97 = (e_9) => setDistLeft(Number(e_9.target.value) || 0);
+		$[219] = t97;
+	} else t97 = $[219];
+	let t98;
+	if ($[220] !== distLeft || $[221] !== fieldIds.distLeft) {
+		t98 = /* @__PURE__ */ jsx("input", {
+			className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+			id: fieldIds.distLeft,
+			min: 0,
+			type: "number",
+			value: distLeft,
+			onChange: t97
+		});
+		$[220] = distLeft;
+		$[221] = fieldIds.distLeft;
+		$[222] = t98;
+	} else t98 = $[222];
+	let t99;
+	if ($[223] !== t96 || $[224] !== t98) {
+		t99 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t96, t98]
+		});
+		$[223] = t96;
+		$[224] = t98;
+		$[225] = t99;
+	} else t99 = $[225];
+	const t100 = fieldIds.distRight;
+	let t101;
+	if ($[226] !== t) {
+		t101 = t("dialogs.imagePosition.alignOptions.right");
+		$[226] = t;
+		$[227] = t101;
+	} else t101 = $[227];
+	let t102;
+	if ($[228] !== fieldIds.distRight || $[229] !== t101) {
+		t102 = /* @__PURE__ */ jsx("label", {
+			className: "w-[45px] text-muted-foreground text-xs",
+			htmlFor: t100,
+			children: t101
+		});
+		$[228] = fieldIds.distRight;
+		$[229] = t101;
+		$[230] = t102;
+	} else t102 = $[230];
+	let t103;
+	if ($[231] === Symbol.for("react.memo_cache_sentinel")) {
+		t103 = (e_10) => setDistRight(Number(e_10.target.value) || 0);
+		$[231] = t103;
+	} else t103 = $[231];
+	let t104;
+	if ($[232] !== distRight || $[233] !== fieldIds.distRight) {
+		t104 = /* @__PURE__ */ jsx("input", {
+			className: "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none",
+			id: fieldIds.distRight,
+			min: 0,
+			type: "number",
+			value: distRight,
+			onChange: t103
+		});
+		$[232] = distRight;
+		$[233] = fieldIds.distRight;
+		$[234] = t104;
+	} else t104 = $[234];
+	let t105;
+	if ($[235] !== t102 || $[236] !== t104) {
+		t105 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t102, t104]
+		});
+		$[235] = t102;
+		$[236] = t104;
+		$[237] = t105;
+	} else t105 = $[237];
+	let t106;
+	if ($[238] !== t105 || $[239] !== t87 || $[240] !== t93 || $[241] !== t99) {
+		t106 = /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-2 gap-2",
+			children: [
+				t87,
+				t93,
+				t99,
+				t105
+			]
+		});
+		$[238] = t105;
+		$[239] = t87;
+		$[240] = t93;
+		$[241] = t99;
+		$[242] = t106;
+	} else t106 = $[242];
+	let t107;
+	if ($[243] !== t106 || $[244] !== t81) {
+		t107 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [t81, t106]
+		});
+		$[243] = t106;
+		$[244] = t81;
+		$[245] = t107;
+	} else t107 = $[245];
+	let t108;
+	if ($[246] !== t107 || $[247] !== t49 || $[248] !== t79) {
+		t108 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 px-5 py-4",
+			children: [
+				t49,
+				t79,
+				t107
+			]
+		});
+		$[246] = t107;
+		$[247] = t49;
+		$[248] = t79;
+		$[249] = t108;
+	} else t108 = $[249];
+	let t109;
+	if ($[250] !== t) {
+		t109 = t("common.cancel");
+		$[250] = t;
+		$[251] = t109;
+	} else t109 = $[251];
+	let t110;
+	if ($[252] !== DialogClose || $[253] !== t109) {
+		t110 = /* @__PURE__ */ jsx(DialogClose, {
+			className: "border-input rounded border px-4 py-1.5 text-[13px]",
+			children: t109
+		});
+		$[252] = DialogClose;
+		$[253] = t109;
+		$[254] = t110;
+	} else t110 = $[254];
+	let t111;
+	if ($[255] !== t) {
+		t111 = t("common.apply");
+		$[255] = t;
+		$[256] = t111;
+	} else t111 = $[256];
+	let t112;
+	if ($[257] !== handleApply || $[258] !== t111) {
+		t112 = /* @__PURE__ */ jsx("button", {
+			className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
+			onClick: handleApply,
+			type: "button",
+			children: t111
+		});
+		$[257] = handleApply;
+		$[258] = t111;
+		$[259] = t112;
+	} else t112 = $[259];
+	let t113;
+	if ($[260] !== t110 || $[261] !== t112) {
+		t113 = /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-end gap-2 border-t px-5 py-3",
+			children: [t110, t112]
+		});
+		$[260] = t110;
+		$[261] = t112;
+		$[262] = t113;
+	} else t113 = $[262];
+	let t114;
+	if ($[263] !== DialogPopup || $[264] !== t108 || $[265] !== t113 || $[266] !== t19) {
+		t114 = /* @__PURE__ */ jsxs(DialogPopup, {
+			className: "bg-popover fixed start-1/2 top-1/2 z-[10001] w-full max-w-[480px] min-w-[400px] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl",
+			children: [
+				t19,
+				t108,
+				t113
+			]
+		});
+		$[263] = DialogPopup;
+		$[264] = t108;
+		$[265] = t113;
+		$[266] = t19;
+		$[267] = t114;
+	} else t114 = $[267];
+	let t115;
+	if ($[268] !== DialogPortal || $[269] !== t114 || $[270] !== t17) {
+		t115 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t17, t114] });
+		$[268] = DialogPortal;
+		$[269] = t114;
+		$[270] = t17;
+		$[271] = t115;
+	} else t115 = $[271];
+	let t116;
+	if ($[272] !== Dialog || $[273] !== handleOpenChange || $[274] !== isOpen || $[275] !== t115) {
+		t116 = /* @__PURE__ */ jsx(Dialog, {
+			open: isOpen,
+			onOpenChange: handleOpenChange,
+			children: t115
+		});
+		$[272] = Dialog;
+		$[273] = handleOpenChange;
+		$[274] = isOpen;
+		$[275] = t115;
+		$[276] = t116;
+	} else t116 = $[276];
+	return t116;
+}
+//#endregion
+export { ImagePositionDialog_exports as n, ImagePositionDialog as t };