@object-ui/plugin-designer 6.2.0 → 6.2.2

package/dist/index.js

@@ -5294,7 +5294,93 @@ function bn({ schema: e, onChange: t, readOnly: n = !1, className: r, onExport:
 function xn(...e) {
 	return K(G(e));
 }
-var Sn = [
+function Sn(e) {
+	let t = e;
+	return Array.isArray(t.regions) && t.regions.length > 0 ? "regions" : Array.isArray(t.body) && t.body.length > 0 ? "body" : t.children ? "children" : "empty";
+}
+function Cn(e) {
+	let t = e, n = [], r = [];
+	return Array.isArray(t.regions) && t.regions.length > 0 ? (t.regions.forEach((e) => {
+		r.push({
+			name: e.name,
+			type: e.type,
+			width: e.width,
+			className: e.className
+		}), (Array.isArray(e.components) ? e.components : []).forEach((t, r) => {
+			n.push({
+				id: t.id || `${e.name}_${r}_${n.length}`,
+				type: t.type || "grid",
+				label: t.title || t.label || t?.properties?.title || t?.properties?.label || `${t.type || "Component"} ${n.length + 1}`,
+				props: t.properties ?? t.props ?? {},
+				regionName: e.name,
+				shape: "properties"
+			});
+		});
+	}), {
+		components: n,
+		regionMeta: r
+	}) : Array.isArray(t.body) && t.body.length > 0 ? (t.body.forEach((e, t) => {
+		n.push({
+			id: e.id || `body_${t}`,
+			type: e.type || "grid",
+			label: e.title || e.label || e?.properties?.title || `${e.type || "Component"} ${t + 1}`,
+			props: e.properties ?? e.props ?? {},
+			shape: "properties"
+		});
+	}), {
+		components: n,
+		regionMeta: r
+	}) : ((t.children ? Array.isArray(t.children) ? t.children : [t.children] : []).forEach((e, t) => {
+		n.push({
+			id: e.id || `existing_${t}`,
+			type: e.type || "grid",
+			label: e.title || e.label || `Component ${t + 1}`,
+			props: e,
+			shape: "inline"
+		});
+	}), {
+		components: n,
+		regionMeta: r
+	});
+}
+function wn(e) {
+	return e.shape === "properties" ? {
+		type: e.type,
+		id: e.id,
+		properties: e.props ?? {}
+	} : {
+		type: e.type,
+		id: e.id,
+		title: e.label,
+		...e.props
+	};
+}
+function Tn(e, t, n, r) {
+	let i = { ...e };
+	if (delete i.regions, delete i.body, delete i.children, n === "regions") {
+		let e = /* @__PURE__ */ new Map();
+		return r.forEach((t) => e.set(t.name, [])), t.forEach((t) => {
+			let n = t.regionName ?? r[0]?.name ?? "main";
+			e.has(n) || e.set(n, []), e.get(n).push(wn(t));
+		}), i.regions = Array.from(e.entries()).map(([e, t]) => {
+			let n = r.find((t) => t.name === e);
+			return {
+				name: e,
+				...n?.type ? { type: n.type } : {},
+				...n?.width == null ? {} : { width: n.width },
+				...n?.className ? { className: n.className } : {},
+				components: t
+			};
+		}), i;
+	}
+	return n === "body" ? (i.body = t.map(wn), i) : (i.children = t.map((e) => ({
+		type: e.type,
+		id: e.id,
+		title: e.label,
+		...e.props ?? {}
+	})), i);
+}
+var En = [
 	{
 		type: "grid",
 		label: "Data Grid",
@@ -5330,18 +5416,18 @@ var Sn = [
 		label: "Grid Layout",
 		Icon: ie
 	}
-], Cn = [{
+], Dn = [{
 	value: "page",
 	labelKey: "appDesigner.modePage"
 }, {
 	value: "dashboard",
 	labelKey: "appDesigner.modeDashboard"
-}], wn = 0;
-function Tn() {
-	return wn += 1, `component_${Date.now()}_${wn}`;
+}], On = 0;
+function kn() {
+	return On += 1, `component_${Date.now()}_${On}`;
 }
-function En({ component: e, index: t, total: n, selected: r, readOnly: i, onSelect: a, onRemove: o, onMoveUp: s, onMoveDown: c }) {
-	let l = Sn.find((t) => t.type === e.type) || Sn[0];
+function An({ component: e, index: t, total: n, selected: r, readOnly: i, onSelect: a, onRemove: o, onMoveUp: s, onMoveDown: c }) {
+	let l = En.find((t) => t.type === e.type) || En[0];
 	return /* @__PURE__ */ Y("div", {
 		"data-testid": `canvas-component-${e.id}`,
 		onClick: a,
@@ -5397,7 +5483,7 @@ function En({ component: e, index: t, total: n, selected: r, readOnly: i, onSele
 		]
 	});
 }
-function Dn({ component: e, readOnly: t, onChange: n, onClose: r }) {
+function jn({ component: e, readOnly: t, onChange: n, onClose: r }) {
 	let { t: i } = Vt();
 	return /* @__PURE__ */ Y("div", {
 		"data-testid": "component-property-panel",
@@ -5439,7 +5525,7 @@ function Dn({ component: e, readOnly: t, onChange: n, onClose: r }) {
 					children: "Type"
 				}), /* @__PURE__ */ J("div", {
 					className: "rounded-md bg-gray-50 px-2.5 py-1.5 text-sm text-gray-600",
-					children: Sn.find((t) => t.type === e.type)?.label ?? e.type
+					children: En.find((t) => t.type === e.type)?.label ?? e.type
 				})]
 			}),
 			/* @__PURE__ */ Y("div", {
@@ -5455,7 +5541,7 @@ function Dn({ component: e, readOnly: t, onChange: n, onClose: r }) {
 		]
 	});
 }
-function On({ schema: e, components: t }) {
+function Mn({ schema: e, components: t }) {
 	let { t: n } = Vt();
 	return /* @__PURE__ */ Y("div", {
 		"data-testid": "page-preview",
@@ -5469,7 +5555,7 @@ function On({ schema: e, components: t }) {
 		}) : /* @__PURE__ */ J("div", {
 			className: "space-y-2",
 			children: t.map((e) => {
-				let t = Sn.find((t) => t.type === e.type) || Sn[0];
+				let t = En.find((t) => t.type === e.type) || En[0];
 				return /* @__PURE__ */ Y("div", {
 					className: "flex items-center gap-2 rounded-md border border-gray-200 bg-white p-2",
 					children: [
@@ -5488,89 +5574,83 @@ function On({ schema: e, components: t }) {
 		})]
 	});
 }
-function kn({ schema: e, onChange: t, readOnly: n = !1, className: r, onExport: a, onImport: s }) {
-	let { t: u } = Vt(), d = c(null), f = c(null), [p, m] = l(() => (e.children ? Array.isArray(e.children) ? e.children : [e.children] : []).map((e, t) => ({
-		id: e.id || `existing_${t}`,
-		type: e.type || "grid",
-		label: e.title || e.label || `Component ${t + 1}`,
-		props: e
-	}))), [h, g] = l(null), [_, v] = l(!1), [y, b] = l("page"), x = p.find((e) => e.id === h), { canUndo: S, canRedo: C, push: w, undo: T, redo: E } = at(p), D = i((n) => {
-		m(n), w(n), t({
-			...e,
-			children: n.map((e) => ({
-				type: e.type,
-				id: e.id,
-				title: e.label,
-				...e.props
-			}))
-		});
+function Nn({ schema: e, onChange: t, readOnly: r = !1, className: a, onExport: s, onImport: u }) {
+	let { t: d } = Vt(), f = c(null), p = c(null), m = n.useMemo(() => Cn(e), []), [h, g] = l(m.components), _ = c(Sn(e)), v = c(m.regionMeta), y = c(e);
+	o(() => {
+		if (y.current === e) return;
+		y.current = e;
+		let t = Cn(e);
+		_.current = Sn(e), v.current = t.regionMeta, g(t.components);
+	}, [e]);
+	let [b, x] = l(null), [S, C] = l(!1), [w, T] = l("page"), E = h.find((e) => e.id === b), { canUndo: D, canRedo: j, push: M, undo: N, redo: P } = at(h), F = i((n) => {
+		g(n), M(n), t(Tn(e, n, _.current === "empty" ? "children" : _.current, v.current));
 	}, [
 		e,
 		t,
-		w
-	]), j = i((e) => {
-		let t = Tn(), n = {
+		M
+	]), I = i((e) => {
+		let t = kn(), n = {
 			id: t,
 			type: e,
-			label: Sn.find((t) => t.type === e)?.label || e
+			label: En.find((t) => t.type === e)?.label || e
 		};
-		D([...p, n]), g(t);
-	}, [p, D]), M = i((e) => {
-		D(p.filter((t) => t.id !== e)), h === e && g(null);
+		F([...h, n]), x(t);
+	}, [h, F]), L = i((e) => {
+		F(h.filter((t) => t.id !== e)), b === e && x(null);
 	}, [
-		p,
 		h,
-		D
-	]), N = i((e, t) => {
-		let n = p.findIndex((t) => t.id === e);
+		b,
+		F
+	]), R = i((e, t) => {
+		let n = h.findIndex((t) => t.id === e);
 		if (n < 0) return;
 		let r = t === "up" ? n - 1 : n + 1;
-		if (r < 0 || r >= p.length) return;
-		let i = [...p];
-		[i[n], i[r]] = [i[r], i[n]], D(i);
-	}, [p, D]), P = i((e) => {
-		h && D(p.map((t) => t.id === h ? {
+		if (r < 0 || r >= h.length) return;
+		let i = [...h];
+		[i[n], i[r]] = [i[r], i[n]], F(i);
+	}, [h, F]), z = i((e) => {
+		b && F(h.map((t) => t.id === b ? {
 			...t,
 			...e
 		} : t));
 	}, [
-		p,
 		h,
-		D
+		b,
+		F
 	]);
 	o(() => {
-		let e = d.current;
+		let e = f.current;
 		if (!e) return;
 		let t = (e) => {
-			if (!n) {
+			if (!r) {
 				if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
-					e.preventDefault(), T();
+					e.preventDefault(), N();
 					return;
 				}
 				if ((e.ctrlKey || e.metaKey) && (e.key === "y" || e.key === "z" && e.shiftKey)) {
-					e.preventDefault(), E();
+					e.preventDefault(), P();
 					return;
 				}
-				if ((e.key === "Delete" || e.key === "Backspace") && h) {
+				if ((e.key === "Delete" || e.key === "Backspace") && b) {
 					let t = e.target;
 					if (t.tagName === "INPUT" || t.tagName === "SELECT" || t.tagName === "TEXTAREA") return;
-					e.preventDefault(), M(h);
+					e.preventDefault(), L(b);
 				}
 			}
 		};
 		return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
 	}, [
-		n,
-		T,
-		E,
-		h,
-		M
+		r,
+		N,
+		P,
+		b,
+		L
 	]);
-	let F = i(() => {
-		a && a(e);
-	}, [e, a]), I = i(() => {
-		f.current?.click();
-	}, []), L = i((e) => {
+	let B = i(() => {
+		s && s(e);
+	}, [e, s]), V = i(() => {
+		p.current?.click();
+	}, []), H = i((e) => {
 		let n = e.target.files?.[0];
 		if (!n) return;
 		let r = new FileReader();
@@ -5578,34 +5658,29 @@ function kn({ schema: e, onChange: t, readOnly: n = !1, className: r, onExport:
 			try {
 				let e = JSON.parse(r.result);
 				if (e && e.type === "page") {
-					let n = (e.children ? Array.isArray(e.children) ? e.children : [e.children] : []).map((e, t) => ({
-						id: e.id || `imported_${t}`,
-						type: e.type || "grid",
-						label: e.title || e.label || `Component ${t + 1}`,
-						props: e
-					}));
-					m(n), w(n), t(e), s?.(e);
+					let n = Cn(e);
+					_.current = Sn(e), v.current = n.regionMeta, g(n.components), M(n.components), t(e), u?.(e);
 				}
 			} catch {}
 		}, r.readAsText(n), e.target.value = "";
 	}, [
 		t,
-		w,
-		s
+		M,
+		u
 	]);
 	return /* @__PURE__ */ Y("div", {
-		ref: d,
+		ref: f,
 		tabIndex: 0,
 		"data-testid": "page-canvas-editor",
-		className: xn("flex flex-col gap-4 outline-none sm:flex-row", r),
+		className: xn("flex flex-col gap-4 outline-none sm:flex-row", a),
 		children: [
 			/* @__PURE__ */ J("input", {
-				ref: f,
+				ref: p,
 				type: "file",
 				accept: ".json",
 				className: "hidden",
 				"data-testid": "canvas-import-input",
-				onChange: L
+				onChange: H
 			}),
 			/* @__PURE__ */ Y("div", {
 				className: "flex-1 space-y-4",
@@ -5613,14 +5688,14 @@ function kn({ schema: e, onChange: t, readOnly: n = !1, className: r, onExport:
 					/* @__PURE__ */ J("div", {
 						className: "flex items-center gap-2 border-b border-gray-200 pb-2",
 						role: "tablist",
-						children: Cn.map((e) => /* @__PURE__ */ J("button", {
+						children: Dn.map((e) => /* @__PURE__ */ J("button", {
 							type: "button",
 							role: "tab",
 							"data-testid": `canvas-mode-${e.value}`,
-							"aria-selected": y === e.value,
-							onClick: () => b(e.value),
-							className: xn("rounded-t-md px-3 py-1.5 text-xs font-medium transition-colors", y === e.value ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-500 hover:text-gray-700"),
-							children: u(e.labelKey)
+							"aria-selected": w === e.value,
+							onClick: () => T(e.value),
+							className: xn("rounded-t-md px-3 py-1.5 text-xs font-medium transition-colors", w === e.value ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-500 hover:text-gray-700"),
+							children: d(e.labelKey)
 						}, e.value))
 					}),
 					/* @__PURE__ */ Y("div", {
@@ -5629,99 +5704,99 @@ function kn({ schema: e, onChange: t, readOnly: n = !1, className: r, onExport:
 							className: "flex flex-wrap items-center gap-2",
 							children: [/* @__PURE__ */ Y("span", {
 								className: "text-sm font-medium text-gray-700",
-								children: [u("appDesigner.addComponent"), ":"]
-							}), Sn.map(({ type: e, label: t, Icon: r }) => /* @__PURE__ */ Y("button", {
+								children: [d("appDesigner.addComponent"), ":"]
+							}), En.map(({ type: e, label: t, Icon: n }) => /* @__PURE__ */ Y("button", {
 								type: "button",
 								"data-testid": `canvas-add-${e}`,
-								onClick: () => j(e),
-								disabled: n || _,
+								onClick: () => I(e),
+								disabled: r || S,
 								className: "inline-flex items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50",
-								children: [/* @__PURE__ */ J(r, { className: "h-3.5 w-3.5" }), t]
+								children: [/* @__PURE__ */ J(n, { className: "h-3.5 w-3.5" }), t]
 							}, e))]
 						}), /* @__PURE__ */ Y("div", {
 							className: "flex items-center gap-1",
 							children: [
-								!n && /* @__PURE__ */ Y(q, { children: [/* @__PURE__ */ J("button", {
+								!r && /* @__PURE__ */ Y(q, { children: [/* @__PURE__ */ J("button", {
 									type: "button",
 									"data-testid": "canvas-undo",
-									onClick: T,
-									disabled: !S,
+									onClick: N,
+									disabled: !D,
 									className: "rounded p-1.5 text-gray-400 hover:text-gray-700 disabled:opacity-30",
-									"aria-label": u("appDesigner.undo"),
+									"aria-label": d("appDesigner.undo"),
 									children: /* @__PURE__ */ J(ze, { className: "h-4 w-4" })
 								}), /* @__PURE__ */ J("button", {
 									type: "button",
 									"data-testid": "canvas-redo",
-									onClick: E,
-									disabled: !C,
+									onClick: P,
+									disabled: !j,
 									className: "rounded p-1.5 text-gray-400 hover:text-gray-700 disabled:opacity-30",
-									"aria-label": u("appDesigner.redo"),
+									"aria-label": d("appDesigner.redo"),
 									children: /* @__PURE__ */ J(Ee, { className: "h-4 w-4" })
 								})] }),
 								/* @__PURE__ */ J("button", {
 									type: "button",
 									"data-testid": "canvas-export",
-									onClick: F,
+									onClick: B,
 									className: "rounded p-1.5 text-gray-400 hover:text-gray-700",
-									"aria-label": u("appDesigner.navExportSchema"),
+									"aria-label": d("appDesigner.navExportSchema"),
 									children: /* @__PURE__ */ J(O, { className: "h-4 w-4" })
 								}),
-								!n && /* @__PURE__ */ J("button", {
+								!r && /* @__PURE__ */ J("button", {
 									type: "button",
 									"data-testid": "canvas-import",
-									onClick: I,
+									onClick: V,
 									className: "rounded p-1.5 text-gray-400 hover:text-gray-700",
-									"aria-label": u("appDesigner.navImportSchema"),
+									"aria-label": d("appDesigner.navImportSchema"),
 									children: /* @__PURE__ */ J(Be, { className: "h-4 w-4" })
 								}),
 								/* @__PURE__ */ J("button", {
 									type: "button",
 									"data-testid": "canvas-preview-toggle",
-									onClick: () => v((e) => !e),
-									className: xn("rounded p-1.5 transition-colors", _ ? "bg-blue-100 text-blue-600" : "text-gray-400 hover:text-gray-700"),
-									"aria-label": u(_ ? "appDesigner.modeEdit" : "appDesigner.preview"),
-									children: J(_ ? A : k, { className: "h-4 w-4" })
+									onClick: () => C((e) => !e),
+									className: xn("rounded p-1.5 transition-colors", S ? "bg-blue-100 text-blue-600" : "text-gray-400 hover:text-gray-700"),
+									"aria-label": d(S ? "appDesigner.modeEdit" : "appDesigner.preview"),
+									children: J(S ? A : k, { className: "h-4 w-4" })
 								})
 							]
 						})]
 					}),
-					_ ? /* @__PURE__ */ J(On, {
+					S ? /* @__PURE__ */ J(Mn, {
 						schema: e,
-						components: p
-					}) : p.length === 0 ? /* @__PURE__ */ J("div", {
+						components: h
+					}) : h.length === 0 ? /* @__PURE__ */ J("div", {
 						className: "flex h-48 items-center justify-center rounded-lg border-2 border-dashed border-gray-200 text-sm text-gray-400",
-						children: u("appDesigner.emptyPage")
+						children: d("appDesigner.emptyPage")
 					}) : /* @__PURE__ */ J("div", {
 						className: "space-y-2",
-						children: p.map((e, t) => /* @__PURE__ */ J(En, {
+						children: h.map((e, t) => /* @__PURE__ */ J(An, {
 							component: e,
 							index: t,
-							total: p.length,
-							selected: e.id === h,
-							readOnly: n,
-							onSelect: () => g(e.id),
-							onRemove: () => M(e.id),
-							onMoveUp: () => N(e.id, "up"),
-							onMoveDown: () => N(e.id, "down")
+							total: h.length,
+							selected: e.id === b,
+							readOnly: r,
+							onSelect: () => x(e.id),
+							onRemove: () => L(e.id),
+							onMoveUp: () => R(e.id, "up"),
+							onMoveDown: () => R(e.id, "down")
 						}, e.id))
 					})
 				]
 			}),
-			x && !_ && /* @__PURE__ */ J(Dn, {
-				component: x,
-				readOnly: n,
-				onChange: P,
-				onClose: () => g(null)
+			E && !S && /* @__PURE__ */ J(jn, {
+				component: E,
+				readOnly: r,
+				onChange: z,
+				onClose: () => x(null)
 			})
 		]
 	});
 }
 //#endregion
 //#region src/ObjectViewConfigurator.tsx
-function An(...e) {
+function Pn(...e) {
 	return K(G(e));
 }
-var jn = {
+var Fn = {
 	grid: {
 		label: "Grid",
 		Icon: ie
@@ -5750,7 +5825,7 @@ var jn = {
 		label: "Gantt",
 		Icon: F
 	}
-}, Mn = [
+}, In = [
 	{
 		value: "compact",
 		label: "Compact"
@@ -5764,7 +5839,7 @@ var jn = {
 		label: "Tall"
 	}
 ];
-function Nn({ title: e, icon: t, defaultOpen: n = !0, children: r }) {
+function Ln({ title: e, icon: t, defaultOpen: n = !0, children: r }) {
 	let [i, a] = l(n);
 	return /* @__PURE__ */ Y("div", {
 		className: "border-b border-gray-100 pb-3",
@@ -5786,7 +5861,7 @@ function Nn({ title: e, icon: t, defaultOpen: n = !0, children: r }) {
 		})]
 	});
 }
-function Pn({ config: e, onChange: t, availableViewTypes: n = [
+function Rn({ config: e, onChange: t, availableViewTypes: n = [
 	"grid",
 	"kanban",
 	"calendar",
@@ -5813,27 +5888,27 @@ function Pn({ config: e, onChange: t, availableViewTypes: n = [
 	}, [e, o]), u = s(() => e.columns.filter((e) => e.visible).length, [e.columns]);
 	return /* @__PURE__ */ Y("div", {
 		"data-testid": "object-view-configurator",
-		className: An("w-72 space-y-3 rounded-lg border border-gray-200 bg-white p-4", a),
+		className: Pn("w-72 space-y-3 rounded-lg border border-gray-200 bg-white p-4", a),
 		children: [
-			/* @__PURE__ */ J(Nn, {
+			/* @__PURE__ */ J(Ln, {
 				title: "View Type",
 				icon: /* @__PURE__ */ J(ie, { className: "h-3.5 w-3.5 text-gray-500" }),
 				children: /* @__PURE__ */ J("div", {
 					className: "flex flex-wrap gap-1.5",
 					children: n.map((t) => {
-						let { label: n, Icon: i } = jn[t];
+						let { label: n, Icon: i } = Fn[t];
 						return /* @__PURE__ */ Y("button", {
 							type: "button",
 							"data-testid": `view-type-${t}`,
 							onClick: () => o({ viewType: t }),
 							disabled: r,
-							className: An("inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors", e.viewType === t ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:bg-gray-100", r && "cursor-not-allowed opacity-50"),
+							className: Pn("inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors", e.viewType === t ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:bg-gray-100", r && "cursor-not-allowed opacity-50"),
 							children: [/* @__PURE__ */ J(i, { className: "h-3 w-3" }), n]
 						}, t);
 					})
 				})
 			}),
-			/* @__PURE__ */ J(Nn, {
+			/* @__PURE__ */ J(Ln, {
 				title: `Fields (${u}/${e.columns.length})`,
 				icon: /* @__PURE__ */ J(w, { className: "h-3.5 w-3.5 text-gray-500" }),
 				children: e.columns.length === 0 ? /* @__PURE__ */ J("p", {
@@ -5849,7 +5924,7 @@ function Pn({ config: e, onChange: t, availableViewTypes: n = [
 								type: "button",
 								onClick: () => c(t.name),
 								disabled: r,
-								className: An("rounded p-0.5 transition-colors", t.visible ? "text-blue-500" : "text-gray-300"),
+								className: Pn("rounded p-0.5 transition-colors", t.visible ? "text-blue-500" : "text-gray-300"),
 								"aria-label": t.visible ? "Hide field" : "Show field",
 								children: t.visible ? /* @__PURE__ */ J(k, { className: "h-3 w-3" }) : /* @__PURE__ */ J(A, { className: "h-3 w-3" })
 							}),
@@ -5877,7 +5952,7 @@ function Pn({ config: e, onChange: t, availableViewTypes: n = [
 					}, t.name))
 				})
 			}),
-			/* @__PURE__ */ J(Nn, {
+			/* @__PURE__ */ J(Ln, {
 				title: "Toolbar",
 				icon: /* @__PURE__ */ J(M, { className: "h-3.5 w-3.5 text-gray-500" }),
 				children: /* @__PURE__ */ Y("div", {
@@ -5928,7 +6003,7 @@ function Pn({ config: e, onChange: t, availableViewTypes: n = [
 					]
 				})
 			}),
-			/* @__PURE__ */ J(Nn, {
+			/* @__PURE__ */ J(Ln, {
 				title: "Appearance",
 				icon: /* @__PURE__ */ J(ke, { className: "h-3.5 w-3.5 text-gray-500" }),
 				defaultOpen: !1,
@@ -5942,12 +6017,12 @@ function Pn({ config: e, onChange: t, availableViewTypes: n = [
 								children: "Row Height"
 							}), /* @__PURE__ */ J("div", {
 								className: "flex gap-1",
-								children: Mn.map(({ value: t, label: n }) => /* @__PURE__ */ J("button", {
+								children: In.map(({ value: t, label: n }) => /* @__PURE__ */ J("button", {
 									type: "button",
 									"data-testid": `view-row-height-${t}`,
 									onClick: () => o({ rowHeight: t }),
 									disabled: r,
-									className: An("flex-1 rounded px-2 py-1 text-[10px] font-medium transition-colors", e.rowHeight === t ? "bg-blue-100 text-blue-700" : "bg-gray-50 text-gray-500 hover:bg-gray-100"),
+									className: Pn("flex-1 rounded px-2 py-1 text-[10px] font-medium transition-colors", e.rowHeight === t ? "bg-blue-100 text-blue-700" : "bg-gray-50 text-gray-500 hover:bg-gray-100"),
 									children: n
 								}, t))
 							})]
@@ -5991,7 +6066,7 @@ function Pn({ config: e, onChange: t, availableViewTypes: n = [
 function $(...e) {
 	return K(G(e));
 }
-var Fn = [
+var zn = [
 	{
 		hex: "#3b82f6",
 		name: "Blue"
@@ -6056,7 +6131,7 @@ var Fn = [
 		hex: "#0f172a",
 		name: "Navy"
 	}
-], In = [
+], Bn = [
 	"Inter",
 	"Roboto",
 	"Open Sans",
@@ -6067,7 +6142,7 @@ var Fn = [
 	"Noto Sans",
 	"system-ui"
 ];
-function Ln({ branding: e, onChange: t, appTitle: n = "My App", readOnly: r = !1, className: a, onExport: s, onImport: u }) {
+function Vn({ branding: e, onChange: t, appTitle: n = "My App", readOnly: r = !1, className: a, onExport: s, onImport: u }) {
 	let { t: d } = Vt(), [f, p] = l("light"), { current: m, push: h, canUndo: g, canRedo: _, undo: v, redo: y } = at(e), b = c(!0);
 	o(() => {
 		if (b.current) {
@@ -6241,7 +6316,7 @@ function Ln({ branding: e, onChange: t, appTitle: n = "My App", readOnly: r = !1
 								}), /* @__PURE__ */ J("div", {
 									"data-testid": "branding-color-palette",
 									className: "flex flex-wrap gap-1.5",
-									children: Fn.map((e) => /* @__PURE__ */ J("button", {
+									children: zn.map((e) => /* @__PURE__ */ J("button", {
 										"data-testid": `branding-swatch-${e.hex.slice(1)}`,
 										type: "button",
 										onClick: () => !r && x({ primaryColor: e.hex }),
@@ -6292,7 +6367,7 @@ function Ln({ branding: e, onChange: t, appTitle: n = "My App", readOnly: r = !1
 								children: [/* @__PURE__ */ J("option", {
 									value: "",
 									children: d("appDesigner.fontDefault")
-								}), In.map((e) => /* @__PURE__ */ J("option", {
+								}), Bn.map((e) => /* @__PURE__ */ J("option", {
 									value: e,
 									children: e
 								}, e))]
@@ -6437,15 +6512,15 @@ function Ln({ branding: e, onChange: t, appTitle: n = "My App", readOnly: r = !1
 }
 //#endregion
 //#region src/ObjectManager.tsx
-function Rn(...e) {
+function Hn(...e) {
 	return K(G(e));
 }
-var zn = [
+var Un = [
 	"Custom Objects",
 	"System Objects",
 	"Integration",
 	"Analytics"
-], Bn = [
+], Wn = [
 	"Box",
 	"Database",
 	"Users",
@@ -6467,7 +6542,7 @@ var zn = [
 	"Truck",
 	"CreditCard"
 ];
-function Vn({ objects: e, onObjectsChange: n, onSelectObject: r, showSystemObjects: a = !0, readOnly: o = !1, className: c }) {
+function Gn({ objects: e, onObjectsChange: n, onSelectObject: r, showSystemObjects: a = !0, readOnly: o = !1, className: c }) {
 	let { t: u } = Vt(), d = ot(), [f, p] = l(!1), [m, h] = l(null), g = s(() => a ? e : e.filter((e) => !e.isSystem), [e, a]), _ = s(() => new t({ items: g }), [g]), v = s(() => [
 		{
 			field: "name",
@@ -6605,7 +6680,7 @@ function Vn({ objects: e, onObjectsChange: n, onSelectObject: r, showSystemObjec
 				name: "icon",
 				label: u("appDesigner.objectManager.icon"),
 				type: "select",
-				options: Bn.map((e) => ({
+				options: Wn.map((e) => ({
 					label: e,
 					value: e
 				})),
@@ -6615,7 +6690,7 @@ function Vn({ objects: e, onObjectsChange: n, onSelectObject: r, showSystemObjec
 				name: "group",
 				label: u("appDesigner.objectManager.group"),
 				type: "select",
-				options: zn.map((e) => ({
+				options: Un.map((e) => ({
 					label: e,
 					value: e
 				})),
@@ -6657,7 +6732,7 @@ function Vn({ objects: e, onObjectsChange: n, onSelectObject: r, showSystemObjec
 	]);
 	return /* @__PURE__ */ Y("div", {
 		"data-testid": "object-manager",
-		className: Rn("w-full space-y-3", c),
+		className: Hn("w-full space-y-3", c),
 		children: [
 			/* @__PURE__ */ J("div", {
 				className: "flex items-center justify-between",
@@ -6700,10 +6775,10 @@ function Vn({ objects: e, onObjectsChange: n, onSelectObject: r, showSystemObjec
 }
 //#endregion
 //#region src/FieldDesigner.tsx
-function Hn(...e) {
+function Kn(...e) {
 	return K(G(e));
 }
-var Un = {
+var qn = {
 	text: {
 		label: "Text",
 		Icon: Re
@@ -6812,7 +6887,7 @@ var Un = {
 		label: "Slider",
 		Icon: Ae
 	}
-}, Wn = {
+}, Jn = {
 	text: [
 		"text",
 		"textarea",
@@ -6847,7 +6922,7 @@ var Un = {
 		"location",
 		"address"
 	]
-}, Gn = [
+}, Yn = [
 	"text",
 	"number",
 	"date",
@@ -6855,7 +6930,7 @@ var Un = {
 	"relation",
 	"advanced"
 ];
-function Kn({ objectName: e, fields: n, onFieldsChange: r, readOnly: a = !1, className: o }) {
+function Xn({ objectName: e, fields: n, onFieldsChange: r, readOnly: a = !1, className: o }) {
 	let { t: c } = Vt(), u = ot(), [d, f] = l(!1), [p, m] = l(null), [h, g] = l(""), _ = s(() => h ? n.filter((e) => e.type === h) : n, [n, h]), v = s(() => new t({ items: _ }), [_]), y = s(() => [
 		{
 			field: "name",
@@ -6967,11 +7042,11 @@ function Kn({ objectName: e, fields: n, onFieldsChange: r, readOnly: a = !1, cla
 		r
 	]), E = i((e) => {
 		e || (f(!1), m(null));
-	}, []), D = s(() => Gn.map((e) => ({
+	}, []), D = s(() => Yn.map((e) => ({
 		category: e,
 		label: c(`appDesigner.fieldDesigner.typeCategory.${e}`),
-		options: Wn[e].map((e) => ({
-			label: Un[e].label,
+		options: Jn[e].map((e) => ({
+			label: qn[e].label,
 			value: e
 		}))
 	})), [c]), O = s(() => D.flatMap((e) => e.options), [D]), k = s(() => ({
@@ -7157,7 +7232,7 @@ function Kn({ objectName: e, fields: n, onFieldsChange: r, readOnly: a = !1, cla
 	]);
 	return /* @__PURE__ */ Y("div", {
 		"data-testid": "field-designer",
-		className: Hn("w-full space-y-3", o),
+		className: Kn("w-full space-y-3", o),
 		children: [
 			/* @__PURE__ */ Y("div", {
 				className: "flex items-center justify-between",
@@ -7218,12 +7293,12 @@ function Kn({ objectName: e, fields: n, onFieldsChange: r, readOnly: a = !1, cla
 }
 //#endregion
 //#region src/components/VersionHistory.tsx
-function qn(...e) {
+function Zn(...e) {
 	return K(G(e));
 }
-function Jn({ versions: e, onRestore: t, className: n }) {
+function Qn({ versions: e, onRestore: t, className: n }) {
 	return /* @__PURE__ */ Y("div", {
-		className: qn("flex flex-col", n),
+		className: Zn("flex flex-col", n),
 		role: "region",
 		"aria-label": "Version history",
 		children: [/* @__PURE__ */ Y("div", {
@@ -7237,8 +7312,8 @@ function Jn({ versions: e, onRestore: t, className: n }) {
 			}) : /* @__PURE__ */ Y("div", {
 				className: "relative",
 				children: [/* @__PURE__ */ J("div", { className: "absolute left-5 top-0 bottom-0 w-px bg-border" }), e.map((e) => /* @__PURE__ */ Y("div", {
-					className: qn("relative flex items-start gap-3 px-3 py-2 hover:bg-accent/50", e.isCurrent && "bg-accent/30"),
-					children: [/* @__PURE__ */ J("div", { className: qn("relative z-10 mt-1 h-2.5 w-2.5 rounded-full border-2 bg-background", e.isCurrent ? "border-primary" : "border-muted-foreground") }), /* @__PURE__ */ Y("div", {
+					className: Zn("relative flex items-start gap-3 px-3 py-2 hover:bg-accent/50", e.isCurrent && "bg-accent/30"),
+					children: [/* @__PURE__ */ J("div", { className: Zn("relative z-10 mt-1 h-2.5 w-2.5 rounded-full border-2 bg-background", e.isCurrent ? "border-primary" : "border-muted-foreground") }), /* @__PURE__ */ Y("div", {
 						className: "flex-1 min-w-0",
 						children: [
 							/* @__PURE__ */ Y("div", {
@@ -7278,8 +7353,8 @@ function Jn({ versions: e, onRestore: t, className: n }) {
 }
 //#endregion
 //#region src/pages/CreateAppPage.tsx
-var Yn = "objectui-app-wizard-draft";
-function Xn() {
+var $n = "objectui-app-wizard-draft";
+function er() {
 	let e = tt(), { appName: t } = nt(), { objects: n, refresh: r } = Xe(), a = Ye(), o = (n || []).map((e) => ({
 		name: e.name,
 		label: e.label || e.name,
@@ -7287,13 +7362,13 @@ function Xn() {
 		selected: !1
 	})), s = i(() => {
 		try {
-			let e = localStorage.getItem(Yn);
+			let e = localStorage.getItem($n);
 			if (e) return JSON.parse(e);
 		} catch {}
 	}, []), c = i(async (t) => {
 		try {
 			let n = qe(t), i = a?.getClient();
-			i && await i.meta.saveItem("app", t.name, n), localStorage.removeItem(Yn), X.success(`Application "${t.title}" created successfully`), await r?.(), e(`/apps/${t.name}`);
+			i && await i.meta.saveItem("app", t.name, n), localStorage.removeItem($n), X.success(`Application "${t.title}" created successfully`), await r?.(), e(`/apps/${t.name}`);
 		} catch (e) {
 			X.error(e?.message || "Failed to create application");
 		}
@@ -7305,7 +7380,7 @@ function Xn() {
 		e(t ? `/apps/${t}` : "/");
 	}, [e, t]), u = i((e) => {
 		try {
-			localStorage.setItem(Yn, JSON.stringify(e)), X.info("Draft saved");
+			localStorage.setItem($n, JSON.stringify(e)), X.info("Draft saved");
 		} catch {}
 	}, []);
 	return /* @__PURE__ */ J("div", {
@@ -7322,7 +7397,7 @@ function Xn() {
 }
 //#endregion
 //#region src/pages/EditAppPage.tsx
-function Zn() {
+function tr() {
 	let e = tt(), { appName: t, editAppName: n } = nt(), { apps: r, objects: a, refresh: o } = Xe(), c = Ye(), l = n || t, u = r.find((e) => e.name === l), d = (a || []).map((e) => ({
 		name: e.name,
 		label: e.label || e.name,
@@ -7389,7 +7464,7 @@ function Zn() {
 }
 //#endregion
 //#region src/pages/PageDesignPage.tsx
-function Qn() {
+function nr() {
 	let e = tt(), { pageName: t } = nt(), n = Ye(), { pages: r } = Xe(), a = r?.find((e) => e.name === t), [s, u] = l(() => a || {
 		type: "page",
 		name: t ?? "",
@@ -7437,7 +7512,7 @@ function Qn() {
 			})]
 		}), /* @__PURE__ */ J("div", {
 			className: "flex-1 overflow-auto p-4 sm:p-6",
-			children: /* @__PURE__ */ J(kn, {
+			children: /* @__PURE__ */ J(Nn, {
 				schema: s,
 				onChange: m,
 				onExport: h,
@@ -7455,7 +7530,7 @@ function Qn() {
 }
 //#endregion
 //#region src/pages/DashboardDesignPage.tsx
-function $n() {
+function rr() {
 	let e = tt(), { dashboardName: t } = nt(), n = Ye(), { dashboards: r, refresh: a } = Xe(), s = r?.find((e) => e.name === t), [u, f] = l(() => s || {
 		type: "dashboard",
 		name: t ?? "",
@@ -7526,7 +7601,7 @@ function $n() {
 }
 //#endregion
 //#region src/MetadataObjectsPage.tsx
-function er(e) {
+function ir(e) {
 	let t = e.fields && typeof e.fields == "object" ? Object.keys(e.fields).length : 0;
 	return {
 		id: e.name,
@@ -7541,7 +7616,7 @@ function er(e) {
 		fieldCount: t
 	};
 }
-function tr({ client: e, clientConfig: t, hideSystemObjects: n = !1, readOnly: r = !1, onSelectObject: a, className: c }) {
+function ar({ client: e, clientConfig: t, hideSystemObjects: n = !1, readOnly: r = !1, onSelectObject: a, className: c }) {
 	let u = s(() => {
 		if (e) return e;
 		if (!t) throw Error("MetadataObjectsPage: provide either `client` or `clientConfig`.");
@@ -7575,7 +7650,7 @@ function tr({ client: e, clientConfig: t, hideSystemObjects: n = !1, readOnly: r
 	o(() => {
 		p();
 	}, [p]);
-	let m = s(() => Object.values(d.byName).map(er), [d.byName]), h = i(async (e) => {
+	let m = s(() => Object.values(d.byName).map(ir), [d.byName]), h = i(async (e) => {
 		let t = d.byName, n = {};
 		for (let t of e) n[t.name] = t;
 		let r = [];
@@ -7625,7 +7700,7 @@ function tr({ client: e, clientConfig: t, hideSystemObjects: n = !1, readOnly: r
 			"data-testid": "metadata-objects-page-error",
 			className: "mb-2 whitespace-pre-wrap rounded bg-red-50 p-2 text-xs text-red-700",
 			children: d.error
-		}), /* @__PURE__ */ J(Vn, {
+		}), /* @__PURE__ */ J(Gn, {
 			objects: m,
 			onObjectsChange: (e) => {
 				h(e);
@@ -7638,16 +7713,16 @@ function tr({ client: e, clientConfig: t, hideSystemObjects: n = !1, readOnly: r
 }
 //#endregion
 //#region src/MetadataFieldsPage.tsx
-var nr = new Set(/* @__PURE__ */ "text.textarea.number.boolean.date.datetime.time.select.email.phone.url.password.currency.percent.lookup.formula.autonumber.file.image.markdown.html.color.code.location.address.rating.slider".split("."));
-function rr(e) {
-	return e && nr.has(e) ? e : "text";
+var or = new Set(/* @__PURE__ */ "text.textarea.number.boolean.date.datetime.time.select.email.phone.url.password.currency.percent.lookup.formula.autonumber.file.image.markdown.html.color.code.location.address.rating.slider".split("."));
+function sr(e) {
+	return e && or.has(e) ? e : "text";
 }
-function ir(e, t) {
+function cr(e, t) {
 	return {
 		id: e,
 		name: e,
 		label: t.label ?? e,
-		type: rr(t.type),
+		type: sr(t.type),
 		group: t.group,
 		description: t.description,
 		required: t.required,
@@ -7664,7 +7739,7 @@ function ir(e, t) {
 		formula: t.formula
 	};
 }
-function ar(e, t) {
+function lr(e, t) {
 	return {
 		...t ?? {},
 		type: e.type,
@@ -7684,7 +7759,7 @@ function ar(e, t) {
 		formula: e.formula
 	};
 }
-function or({ objectName: e, client: t, clientConfig: n, readOnly: r = !1, className: a }) {
+function ur({ objectName: e, client: t, clientConfig: n, readOnly: r = !1, className: a }) {
 	let c = s(() => {
 		if (t) return t;
 		if (!n) throw Error("MetadataFieldsPage: provide either `client` or `clientConfig`.");
@@ -7725,10 +7800,10 @@ function or({ objectName: e, client: t, clientConfig: n, readOnly: r = !1, class
 	o(() => {
 		f();
 	}, [f]);
-	let p = s(() => u.raw?.fields ? Object.entries(u.raw.fields).map(([e, t]) => ir(e, t)) : [], [u.raw]), m = i(async (t) => {
+	let p = s(() => u.raw?.fields ? Object.entries(u.raw.fields).map(([e, t]) => cr(e, t)) : [], [u.raw]), m = i(async (t) => {
 		if (!u.raw) return;
 		let n = u.raw.fields ?? {}, r = {};
-		for (let e of t) r[e.name] = ar(e, n[e.name]);
+		for (let e of t) r[e.name] = lr(e, n[e.name]);
 		let i = {
 			...u.raw,
 			fields: r
@@ -7758,7 +7833,7 @@ function or({ objectName: e, client: t, clientConfig: n, readOnly: r = !1, class
 			"data-testid": "metadata-fields-page-error",
 			className: "mb-2 whitespace-pre-wrap rounded bg-red-50 p-2 text-xs text-red-700",
 			children: u.error
-		}), /* @__PURE__ */ J(Kn, {
+		}), /* @__PURE__ */ J(Xn, {
 			objectName: e,
 			fields: p,
 			onFieldsChange: (e) => {
@@ -7967,7 +8042,7 @@ e.register("page-designer", Ct, {
 		label: "Read Only",
 		defaultValue: !1
 	}]
-}), e.register("page-canvas-editor", kn, {
+}), e.register("page-canvas-editor", Nn, {
 	namespace: "plugin-designer",
 	label: "Page Canvas Editor",
 	category: "Designer",
@@ -7981,7 +8056,7 @@ e.register("page-designer", Ct, {
 		label: "Read Only",
 		defaultValue: !1
 	}]
-}), e.register("object-view-configurator", Pn, {
+}), e.register("object-view-configurator", Rn, {
 	namespace: "plugin-designer",
 	label: "Object View Configurator",
 	category: "Designer",
@@ -7995,7 +8070,7 @@ e.register("page-designer", Ct, {
 		label: "Read Only",
 		defaultValue: !1
 	}]
-}), e.register("branding-editor", Ln, {
+}), e.register("branding-editor", Vn, {
 	namespace: "plugin-designer",
 	label: "Branding Editor",
 	category: "Designer",
@@ -8017,7 +8092,7 @@ e.register("page-designer", Ct, {
 			defaultValue: !1
 		}
 	]
-}), e.register("object-manager", Vn, {
+}), e.register("object-manager", Gn, {
 	namespace: "plugin-designer",
 	label: "Object Manager",
 	category: "Designer",
@@ -8040,7 +8115,7 @@ e.register("page-designer", Ct, {
 			defaultValue: !1
 		}
 	]
-}), e.register("field-designer", Kn, {
+}), e.register("field-designer", Xn, {
 	namespace: "plugin-designer",
 	label: "Field Designer",
 	category: "Designer",
@@ -8064,4 +8139,4 @@ e.register("page-designer", Ct, {
 	]
 });
 //#endregion
-export { $t as AppCreationWizard, Ln as BrandingEditor, yt as CollaborationProvider, dt as ConfirmDialog, xt as ConnectionStatusIndicator, Xn as CreateAppPage, $n as DashboardDesignPage, bn as DashboardEditor, kt as DataModelDesigner, Zn as EditAppPage, fn as EditorModeToggle, Kn as FieldDesigner, or as MetadataFieldsPage, tr as MetadataObjectsPage, gt as Minimap, ln as NavigationDesigner, Vn as ObjectManager, Pn as ObjectViewConfigurator, kn as PageCanvasEditor, Qn as PageDesignPage, Ct as PageDesigner, Pt as ProcessDesigner, pt as PropertyEditor, Rt as ReportDesigner, Jn as VersionHistory, lt as useCanvasPanZoom, ct as useClipboard, ot as useConfirmDialog, Tt as useDesignerHistory, st as useMultiSelect, at as useUndoRedo };
+export { $t as AppCreationWizard, Vn as BrandingEditor, yt as CollaborationProvider, dt as ConfirmDialog, xt as ConnectionStatusIndicator, er as CreateAppPage, rr as DashboardDesignPage, bn as DashboardEditor, kt as DataModelDesigner, tr as EditAppPage, fn as EditorModeToggle, Xn as FieldDesigner, ur as MetadataFieldsPage, ar as MetadataObjectsPage, gt as Minimap, ln as NavigationDesigner, Gn as ObjectManager, Rn as ObjectViewConfigurator, Nn as PageCanvasEditor, nr as PageDesignPage, Ct as PageDesigner, Pt as ProcessDesigner, pt as PropertyEditor, Rt as ReportDesigner, Qn as VersionHistory, lt as useCanvasPanZoom, ct as useClipboard, ot as useConfirmDialog, Tt as useDesignerHistory, st as useMultiSelect, at as useUndoRedo };