@stll/folio-react 0.25.3 → 0.27.0

package/dist/ImagePositionDialog-Cwt6R8iM.js

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