@stll/folio-react 0.6.0 → 0.7.0

package/dist/ImagePositionDialog-D3MileYL.js

@@ -0,0 +1,842 @@
+import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
+import { r as useFolioUI } from "./folio-ui-C-85DSuK.js";
+import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
+import { c } from "react-compiler-runtime";
+import { useEffect, useId, useState } from "react";
+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(180);
+	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 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] !== DialogTitle) {
+		t18 = /* @__PURE__ */ jsx(DialogTitle, {
+			className: "border-b px-5 py-3 text-base font-semibold",
+			children: "Image Position"
+		});
+		$[41] = DialogTitle;
+		$[42] = t18;
+	} else t18 = $[42];
+	let t19;
+	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx("div", {
+			className: "text-foreground text-[13px] font-semibold",
+			children: "Horizontal"
+		});
+		$[43] = t19;
+	} else t19 = $[43];
+	let t20;
+	if ($[44] !== fieldIds.hMode) {
+		t20 = /* @__PURE__ */ jsx("label", {
+			className: "w-[75px] text-muted-foreground text-xs",
+			htmlFor: fieldIds.hMode,
+			children: "Position"
+		});
+		$[44] = fieldIds.hMode;
+		$[45] = t20;
+	} else t20 = $[45];
+	let t21;
+	let t22;
+	let t23;
+	if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = (e) => setHMode(e.target.value);
+		t22 = /* @__PURE__ */ jsx("option", {
+			value: "align",
+			children: "Alignment"
+		});
+		t23 = /* @__PURE__ */ jsx("option", {
+			value: "offset",
+			children: "Offset"
+		});
+		$[46] = t21;
+		$[47] = t22;
+		$[48] = t23;
+	} else {
+		t21 = $[46];
+		t22 = $[47];
+		t23 = $[48];
+	}
+	let t24;
+	if ($[49] !== fieldIds.hMode || $[50] !== hMode) {
+		t24 = /* @__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.hMode,
+			value: hMode,
+			onChange: t21,
+			children: [t22, t23]
+		});
+		$[49] = fieldIds.hMode;
+		$[50] = hMode;
+		$[51] = t24;
+	} else t24 = $[51];
+	let t25;
+	if ($[52] !== t20 || $[53] !== t24) {
+		t25 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t20, t24]
+		});
+		$[52] = t20;
+		$[53] = t24;
+		$[54] = t25;
+	} else t25 = $[54];
+	let t26;
+	if ($[55] !== fieldIds.hAlign || $[56] !== fieldIds.hOffset || $[57] !== hAlign || $[58] !== hMode || $[59] !== hOffset) {
+		t26 = 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: "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: "Left"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "center",
+						children: "Center"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "right",
+						children: "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: "Offset (px)"
+			}), /* @__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)
+			})]
+		});
+		$[55] = fieldIds.hAlign;
+		$[56] = fieldIds.hOffset;
+		$[57] = hAlign;
+		$[58] = hMode;
+		$[59] = hOffset;
+		$[60] = t26;
+	} else t26 = $[60];
+	let t27;
+	if ($[61] !== fieldIds.hRelativeTo) {
+		t27 = /* @__PURE__ */ jsx("label", {
+			className: "w-[75px] text-muted-foreground text-xs",
+			htmlFor: fieldIds.hRelativeTo,
+			children: "Relative to"
+		});
+		$[61] = fieldIds.hRelativeTo;
+		$[62] = t27;
+	} else t27 = $[62];
+	let t28;
+	let t29;
+	let t30;
+	let t31;
+	let t32;
+	if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
+		t28 = (e_2) => setHRelativeTo(e_2.target.value);
+		t29 = /* @__PURE__ */ jsx("option", {
+			value: "page",
+			children: "Page"
+		});
+		t30 = /* @__PURE__ */ jsx("option", {
+			value: "column",
+			children: "Column"
+		});
+		t31 = /* @__PURE__ */ jsx("option", {
+			value: "margin",
+			children: "Margin"
+		});
+		t32 = /* @__PURE__ */ jsx("option", {
+			value: "character",
+			children: "Character"
+		});
+		$[63] = t28;
+		$[64] = t29;
+		$[65] = t30;
+		$[66] = t31;
+		$[67] = t32;
+	} else {
+		t28 = $[63];
+		t29 = $[64];
+		t30 = $[65];
+		t31 = $[66];
+		t32 = $[67];
+	}
+	let t33;
+	if ($[68] !== fieldIds.hRelativeTo || $[69] !== hRelativeTo) {
+		t33 = /* @__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.hRelativeTo,
+			value: hRelativeTo,
+			onChange: t28,
+			children: [
+				t29,
+				t30,
+				t31,
+				t32
+			]
+		});
+		$[68] = fieldIds.hRelativeTo;
+		$[69] = hRelativeTo;
+		$[70] = t33;
+	} else t33 = $[70];
+	let t34;
+	if ($[71] !== t27 || $[72] !== t33) {
+		t34 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t27, t33]
+		});
+		$[71] = t27;
+		$[72] = t33;
+		$[73] = t34;
+	} else t34 = $[73];
+	let t35;
+	if ($[74] !== t25 || $[75] !== t26 || $[76] !== t34) {
+		t35 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				t19,
+				t25,
+				t26,
+				t34
+			]
+		});
+		$[74] = t25;
+		$[75] = t26;
+		$[76] = t34;
+		$[77] = t35;
+	} else t35 = $[77];
+	let t36;
+	if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
+		t36 = /* @__PURE__ */ jsx("div", {
+			className: "text-foreground text-[13px] font-semibold",
+			children: "Vertical"
+		});
+		$[78] = t36;
+	} else t36 = $[78];
+	let t37;
+	if ($[79] !== fieldIds.vMode) {
+		t37 = /* @__PURE__ */ jsx("label", {
+			className: "w-[75px] text-muted-foreground text-xs",
+			htmlFor: fieldIds.vMode,
+			children: "Position"
+		});
+		$[79] = fieldIds.vMode;
+		$[80] = t37;
+	} else t37 = $[80];
+	let t38;
+	let t39;
+	let t40;
+	if ($[81] === Symbol.for("react.memo_cache_sentinel")) {
+		t38 = (e_3) => setVMode(e_3.target.value);
+		t39 = /* @__PURE__ */ jsx("option", {
+			value: "align",
+			children: "Alignment"
+		});
+		t40 = /* @__PURE__ */ jsx("option", {
+			value: "offset",
+			children: "Offset"
+		});
+		$[81] = t38;
+		$[82] = t39;
+		$[83] = t40;
+	} else {
+		t38 = $[81];
+		t39 = $[82];
+		t40 = $[83];
+	}
+	let t41;
+	if ($[84] !== fieldIds.vMode || $[85] !== vMode) {
+		t41 = /* @__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.vMode,
+			value: vMode,
+			onChange: t38,
+			children: [t39, t40]
+		});
+		$[84] = fieldIds.vMode;
+		$[85] = vMode;
+		$[86] = t41;
+	} else t41 = $[86];
+	let t42;
+	if ($[87] !== t37 || $[88] !== t41) {
+		t42 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t37, t41]
+		});
+		$[87] = t37;
+		$[88] = t41;
+		$[89] = t42;
+	} else t42 = $[89];
+	let t43;
+	if ($[90] !== fieldIds.vAlign || $[91] !== fieldIds.vOffset || $[92] !== vAlign || $[93] !== vMode || $[94] !== vOffset) {
+		t43 = 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: "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: "Top"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "center",
+						children: "Center"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "bottom",
+						children: "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: "Offset (px)"
+			}), /* @__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)
+			})]
+		});
+		$[90] = fieldIds.vAlign;
+		$[91] = fieldIds.vOffset;
+		$[92] = vAlign;
+		$[93] = vMode;
+		$[94] = vOffset;
+		$[95] = t43;
+	} else t43 = $[95];
+	let t44;
+	if ($[96] !== fieldIds.vRelativeTo) {
+		t44 = /* @__PURE__ */ jsx("label", {
+			className: "w-[75px] text-muted-foreground text-xs",
+			htmlFor: fieldIds.vRelativeTo,
+			children: "Relative to"
+		});
+		$[96] = fieldIds.vRelativeTo;
+		$[97] = t44;
+	} else t44 = $[97];
+	let t45;
+	let t46;
+	let t47;
+	let t48;
+	let t49;
+	if ($[98] === Symbol.for("react.memo_cache_sentinel")) {
+		t45 = (e_6) => setVRelativeTo(e_6.target.value);
+		t46 = /* @__PURE__ */ jsx("option", {
+			value: "page",
+			children: "Page"
+		});
+		t47 = /* @__PURE__ */ jsx("option", {
+			value: "margin",
+			children: "Margin"
+		});
+		t48 = /* @__PURE__ */ jsx("option", {
+			value: "paragraph",
+			children: "Paragraph"
+		});
+		t49 = /* @__PURE__ */ jsx("option", {
+			value: "line",
+			children: "Line"
+		});
+		$[98] = t45;
+		$[99] = t46;
+		$[100] = t47;
+		$[101] = t48;
+		$[102] = t49;
+	} else {
+		t45 = $[98];
+		t46 = $[99];
+		t47 = $[100];
+		t48 = $[101];
+		t49 = $[102];
+	}
+	let t50;
+	if ($[103] !== fieldIds.vRelativeTo || $[104] !== vRelativeTo) {
+		t50 = /* @__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.vRelativeTo,
+			value: vRelativeTo,
+			onChange: t45,
+			children: [
+				t46,
+				t47,
+				t48,
+				t49
+			]
+		});
+		$[103] = fieldIds.vRelativeTo;
+		$[104] = vRelativeTo;
+		$[105] = t50;
+	} else t50 = $[105];
+	let t51;
+	if ($[106] !== t44 || $[107] !== t50) {
+		t51 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t44, t50]
+		});
+		$[106] = t44;
+		$[107] = t50;
+		$[108] = t51;
+	} else t51 = $[108];
+	let t52;
+	if ($[109] !== t42 || $[110] !== t43 || $[111] !== t51) {
+		t52 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				t36,
+				t42,
+				t43,
+				t51
+			]
+		});
+		$[109] = t42;
+		$[110] = t43;
+		$[111] = t51;
+		$[112] = t52;
+	} else t52 = $[112];
+	let t53;
+	if ($[113] === Symbol.for("react.memo_cache_sentinel")) {
+		t53 = /* @__PURE__ */ jsx("div", {
+			className: "text-foreground text-[13px] font-semibold",
+			children: "Distance from text (px)"
+		});
+		$[113] = t53;
+	} else t53 = $[113];
+	let t54;
+	if ($[114] !== fieldIds.distTop) {
+		t54 = /* @__PURE__ */ jsx("label", {
+			className: "w-[45px] text-muted-foreground text-xs",
+			htmlFor: fieldIds.distTop,
+			children: "Top"
+		});
+		$[114] = fieldIds.distTop;
+		$[115] = t54;
+	} else t54 = $[115];
+	let t55;
+	if ($[116] === Symbol.for("react.memo_cache_sentinel")) {
+		t55 = (e_7) => setDistTop(Number(e_7.target.value) || 0);
+		$[116] = t55;
+	} else t55 = $[116];
+	let t56;
+	if ($[117] !== distTop || $[118] !== fieldIds.distTop) {
+		t56 = /* @__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: t55
+		});
+		$[117] = distTop;
+		$[118] = fieldIds.distTop;
+		$[119] = t56;
+	} else t56 = $[119];
+	let t57;
+	if ($[120] !== t54 || $[121] !== t56) {
+		t57 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t54, t56]
+		});
+		$[120] = t54;
+		$[121] = t56;
+		$[122] = t57;
+	} else t57 = $[122];
+	let t58;
+	if ($[123] !== fieldIds.distBottom) {
+		t58 = /* @__PURE__ */ jsx("label", {
+			className: "w-[45px] text-muted-foreground text-xs",
+			htmlFor: fieldIds.distBottom,
+			children: "Bottom"
+		});
+		$[123] = fieldIds.distBottom;
+		$[124] = t58;
+	} else t58 = $[124];
+	let t59;
+	if ($[125] === Symbol.for("react.memo_cache_sentinel")) {
+		t59 = (e_8) => setDistBottom(Number(e_8.target.value) || 0);
+		$[125] = t59;
+	} else t59 = $[125];
+	let t60;
+	if ($[126] !== distBottom || $[127] !== fieldIds.distBottom) {
+		t60 = /* @__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: t59
+		});
+		$[126] = distBottom;
+		$[127] = fieldIds.distBottom;
+		$[128] = t60;
+	} else t60 = $[128];
+	let t61;
+	if ($[129] !== t58 || $[130] !== t60) {
+		t61 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t58, t60]
+		});
+		$[129] = t58;
+		$[130] = t60;
+		$[131] = t61;
+	} else t61 = $[131];
+	let t62;
+	if ($[132] !== fieldIds.distLeft) {
+		t62 = /* @__PURE__ */ jsx("label", {
+			className: "w-[45px] text-muted-foreground text-xs",
+			htmlFor: fieldIds.distLeft,
+			children: "Left"
+		});
+		$[132] = fieldIds.distLeft;
+		$[133] = t62;
+	} else t62 = $[133];
+	let t63;
+	if ($[134] === Symbol.for("react.memo_cache_sentinel")) {
+		t63 = (e_9) => setDistLeft(Number(e_9.target.value) || 0);
+		$[134] = t63;
+	} else t63 = $[134];
+	let t64;
+	if ($[135] !== distLeft || $[136] !== fieldIds.distLeft) {
+		t64 = /* @__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: t63
+		});
+		$[135] = distLeft;
+		$[136] = fieldIds.distLeft;
+		$[137] = t64;
+	} else t64 = $[137];
+	let t65;
+	if ($[138] !== t62 || $[139] !== t64) {
+		t65 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t62, t64]
+		});
+		$[138] = t62;
+		$[139] = t64;
+		$[140] = t65;
+	} else t65 = $[140];
+	let t66;
+	if ($[141] !== fieldIds.distRight) {
+		t66 = /* @__PURE__ */ jsx("label", {
+			className: "w-[45px] text-muted-foreground text-xs",
+			htmlFor: fieldIds.distRight,
+			children: "Right"
+		});
+		$[141] = fieldIds.distRight;
+		$[142] = t66;
+	} else t66 = $[142];
+	let t67;
+	if ($[143] === Symbol.for("react.memo_cache_sentinel")) {
+		t67 = (e_10) => setDistRight(Number(e_10.target.value) || 0);
+		$[143] = t67;
+	} else t67 = $[143];
+	let t68;
+	if ($[144] !== distRight || $[145] !== fieldIds.distRight) {
+		t68 = /* @__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: t67
+		});
+		$[144] = distRight;
+		$[145] = fieldIds.distRight;
+		$[146] = t68;
+	} else t68 = $[146];
+	let t69;
+	if ($[147] !== t66 || $[148] !== t68) {
+		t69 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t66, t68]
+		});
+		$[147] = t66;
+		$[148] = t68;
+		$[149] = t69;
+	} else t69 = $[149];
+	let t70;
+	if ($[150] !== t57 || $[151] !== t61 || $[152] !== t65 || $[153] !== t69) {
+		t70 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [t53, /* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-2 gap-2",
+				children: [
+					t57,
+					t61,
+					t65,
+					t69
+				]
+			})]
+		});
+		$[150] = t57;
+		$[151] = t61;
+		$[152] = t65;
+		$[153] = t69;
+		$[154] = t70;
+	} else t70 = $[154];
+	let t71;
+	if ($[155] !== t35 || $[156] !== t52 || $[157] !== t70) {
+		t71 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 px-5 py-4",
+			children: [
+				t35,
+				t52,
+				t70
+			]
+		});
+		$[155] = t35;
+		$[156] = t52;
+		$[157] = t70;
+		$[158] = t71;
+	} else t71 = $[158];
+	let t72;
+	if ($[159] !== DialogClose) {
+		t72 = /* @__PURE__ */ jsx(DialogClose, {
+			className: "border-input rounded border px-4 py-1.5 text-[13px]",
+			children: "Cancel"
+		});
+		$[159] = DialogClose;
+		$[160] = t72;
+	} else t72 = $[160];
+	let t73;
+	if ($[161] !== handleApply) {
+		t73 = /* @__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"
+		});
+		$[161] = handleApply;
+		$[162] = t73;
+	} else t73 = $[162];
+	let t74;
+	if ($[163] !== t72 || $[164] !== t73) {
+		t74 = /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-end gap-2 border-t px-5 py-3",
+			children: [t72, t73]
+		});
+		$[163] = t72;
+		$[164] = t73;
+		$[165] = t74;
+	} else t74 = $[165];
+	let t75;
+	if ($[166] !== DialogPopup || $[167] !== t18 || $[168] !== t71 || $[169] !== t74) {
+		t75 = /* @__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: [
+				t18,
+				t71,
+				t74
+			]
+		});
+		$[166] = DialogPopup;
+		$[167] = t18;
+		$[168] = t71;
+		$[169] = t74;
+		$[170] = t75;
+	} else t75 = $[170];
+	let t76;
+	if ($[171] !== DialogPortal || $[172] !== t17 || $[173] !== t75) {
+		t76 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t17, t75] });
+		$[171] = DialogPortal;
+		$[172] = t17;
+		$[173] = t75;
+		$[174] = t76;
+	} else t76 = $[174];
+	let t77;
+	if ($[175] !== Dialog || $[176] !== handleOpenChange || $[177] !== isOpen || $[178] !== t76) {
+		t77 = /* @__PURE__ */ jsx(Dialog, {
+			open: isOpen,
+			onOpenChange: handleOpenChange,
+			children: t76
+		});
+		$[175] = Dialog;
+		$[176] = handleOpenChange;
+		$[177] = isOpen;
+		$[178] = t76;
+		$[179] = t77;
+	} else t77 = $[179];
+	return t77;
+}
+//#endregion
+export { ImagePositionDialog_exports as n, ImagePositionDialog as t };