@declarion/react 0.38.5 → 0.40.0

package/dist-lib/SmartRecordListPage.impl-Cxm7qvlZ.js

@@ -0,0 +1,763 @@
+import { s as e } from "./DynamicIcon-DeRpAaXm.js";
+import { A as t, Cn as n, F as r, Fn as i, Jn as a, Kn as o, N as s, Pn as c, Sn as l, Tn as u, Un as d, X as f, bn as p, er as ee, it as m, jt as h, or as te, q as ne, sr as g } from "./useCurrentScreen-mw8TfE8q.js";
+import { G as _, K as v, U as y, W as b, Y as x, _ as re, a as S, c as C, k as w, q as T, s as E, w as ie } from "./registry-DFtAh6zc.js";
+import { b as D, d as O, f as k, g as A, m as ae, n as j, p as oe, r as M, s as N } from "./useProperties-gMdnhdhO.js";
+import { t as P } from "./LayoutRenderer-D4oTfZhV.js";
+import { useCallback as F, useEffect as I, useMemo as L, useRef as R, useState as se } from "react";
+import { useSearchParams as ce } from "react-router-dom";
+import { Fragment as le, jsx as z, jsxs as B } from "react/jsx-runtime";
+//#region src/components/pages/SmartRecordListPage.impl.tsx
+function V({ screenCode: t }) {
+	let [n, r] = ce(), { data: a } = h(), s = ee(), c = a?.screens[t], p = c?.entity ? a?.entities[c.entity] : void 0, m = c?.entity;
+	ae(c, p, n.toString()), A(c?.route);
+	let g = re(), _ = n.get("selected") ?? null, v = n.get("search") ?? "", y = ne(v, 300), b = n.get("sort") ?? c?.sort_default ?? "", x = L(() => {
+		let e = O(n);
+		return e.length > 0 ? e : void 0;
+	}, [n]), S = L(() => c?.columns ?? p?.fields.names().filter((e) => !p.fields.get(e)?.primary && !p.fields.get(e)?.auto && p.fields.get(e)?.display?.is_listable !== !1).slice(0, 4) ?? [], [c?.columns, p]), w = L(() => {
+		let e = c?.responsive?.[s.category]?.presentation;
+		return s.category === "phone" ? "drilldown" : e === "split" || e === "drilldown" || e === "stacked" ? e : "split";
+	}, [c?.responsive, s.category]), T = L(() => {
+		let e = c?.responsive?.[s.category];
+		return e?.list?.presentation === "table" || e?.list?.presentation === "cards" ? e.list.presentation : e?.presentation === "table" || e?.presentation === "cards" ? e.presentation : s.category === "phone" ? "cards" : "table";
+	}, [c?.responsive, s.category]), ie = c?.responsive?.[s.category]?.layout?.related_records, j = L(() => E({
+		entity: p,
+		screen: c
+	}), [p, c]), M = L(() => C({
+		entity: p,
+		screen: c,
+		presentation: T,
+		visibleColumns: S,
+		card: j,
+		sort: b
+	}), [
+		p,
+		c,
+		T,
+		S,
+		j,
+		b
+	]), P = p?.list_pagination === "cursor", { data: V, isLoading: H } = f(m, {
+		page: 1,
+		per_page: 200,
+		sort: b || void 0,
+		search: y || void 0,
+		filters: x,
+		select: M.selectFields,
+		expand: M.expandFields,
+		preview: !0,
+		screen: c?.fixed_filters ? t : void 0
+	}, !P), U = D(m, {
+		sort: b || void 0,
+		search: y || void 0,
+		filters: x,
+		select: M.selectFields,
+		expand: M.expandFields,
+		preview: !0,
+		screen: c?.fixed_filters ? t : void 0,
+		limit: 200
+	}, P), W = P ? U.rows : V?.data ?? [], K = P ? U.refs : V?.$refs, q = P ? U.isLoading : H, de = L(() => p?.fields.names().find((e) => p.fields.get(e)?.primary) ?? "id", [p]), fe = F((e, t) => {
+		r((t) => {
+			let n = new URLSearchParams(t);
+			return e ? n.set("selected", e) : n.delete("selected"), n;
+		}, { replace: t?.replace ?? !0 });
+	}, [r]), pe = F((e) => {
+		r((t) => {
+			let n = new URLSearchParams(t);
+			return e ? n.set("search", e) : n.delete("search"), n;
+		}, { replace: !0 });
+	}, [r]), me = F((e, t) => {
+		r((n) => {
+			let r = new URLSearchParams(n), i = O(n), a;
+			return a = t && t !== "__all__" ? [...k(i, e), N(e, t)] : k(i, e), oe(a, r), r;
+		}, { replace: !0 });
+	}, [r]), J = (c?.list_resizable ?? !1) && w === "split" && s.category !== "phone" && !s.touch, Y = R(null), [X, Z] = se(null), Q = R(!1), $ = c?.list_width;
+	I(() => {
+		!J || !$?.endsWith("%") || Z(null);
+	}, [
+		J,
+		$,
+		s.width,
+		s.height
+	]), I(() => {
+		if (!J || X !== null) return;
+		let e = Y.current;
+		if (e) if ($ && $.endsWith("%")) {
+			let t = parseFloat($) / 100;
+			Z(Math.round(e.getBoundingClientRect().width * t));
+		} else Z($ && parseInt($, 10) || 320);
+	}, [
+		J,
+		$,
+		X,
+		p
+	]);
+	let he = R(null);
+	I(() => () => {
+		he.current?.();
+	}, []);
+	let ge = F((e) => {
+		e.preventDefault(), Q.current = !0;
+		let t = e.clientX, n = X ?? 320, r = (e) => {
+			if (!Q.current) return;
+			let r = (Y.current?.getBoundingClientRect().width ?? window.innerWidth) - 300, i = Math.max(200, Math.min(r, n + e.clientX - t));
+			Z(i);
+		}, i = () => {
+			Q.current = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i), document.body.style.cursor = "", document.body.style.userSelect = "", he.current = null;
+		};
+		document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", r), document.addEventListener("mouseup", i), he.current = i;
+	}, [X]);
+	if (!a || !c || !p) return null;
+	let _e = x?.length ?? 0, ve = w === "split" || w === "stacked" || !_, ye = w === "split" || w === "stacked" || !!_, be = w !== "split" && _ ? () => fe(null, { replace: !0 }) : void 0, xe = w === "split" ? J && X !== null ? X : c.list_width ?? "320px" : "100%";
+	return /* @__PURE__ */ B("div", {
+		ref: Y,
+		"data-record-list-presentation": w,
+		style: {
+			display: "flex",
+			flexDirection: w === "stacked" ? "column" : "row",
+			height: "100%",
+			minWidth: 0,
+			overflow: "hidden"
+		},
+		children: [
+			ve && /* @__PURE__ */ B("div", {
+				"data-testid": "record-list-panel",
+				style: {
+					flex: w === "split" ? "none" : "1 1 auto",
+					display: "flex",
+					flexDirection: "column",
+					overflow: "hidden",
+					borderRight: w === "split" && !J ? "1px solid var(--divider)" : "none",
+					borderBottom: w === "stacked" ? "1px solid var(--divider)" : "none",
+					width: xe,
+					minWidth: 0,
+					height: w === "stacked" ? "50%" : "100%"
+				},
+				children: [/* @__PURE__ */ B("div", {
+					style: {
+						padding: 12,
+						display: "flex",
+						flexDirection: "column",
+						gap: 8,
+						borderBottom: "1px solid var(--divider)"
+					},
+					children: [
+						g.hasOriginBack && /* @__PURE__ */ B("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 8
+							},
+							children: [/* @__PURE__ */ z(te, {
+								icon: /* @__PURE__ */ z(e.back, { size: 14 }),
+								title: "Back",
+								onClick: g.goBack
+							}), /* @__PURE__ */ z("span", {
+								style: {
+									fontSize: 12.5,
+									fontWeight: 600,
+									color: "var(--text)"
+								},
+								children: u(c.display?.name) || u(p.display.name_plural)
+							})]
+						}),
+						/* @__PURE__ */ z(o, {
+							value: v,
+							onChange: pe,
+							placeholder: `Search ${u(p.display.name_plural)}…`,
+							prefix: /* @__PURE__ */ z(e.search, { size: 13 })
+						}),
+						c.filters && c.filters.length > 0 && /* @__PURE__ */ z("div", {
+							style: {
+								display: "flex",
+								flexWrap: "wrap",
+								gap: 6
+							},
+							children: c.filters.map((e) => {
+								let t = p.fields.get(e);
+								if (!t?.values) return null;
+								let n = x?.find((t) => t.field === e && t.op === "eq")?.value ?? "__all__", r = l(t, e, a.entities);
+								return /* @__PURE__ */ z("div", {
+									style: { minWidth: 120 },
+									children: /* @__PURE__ */ z(d, {
+										value: n,
+										options: [{
+											value: "__all__",
+											label: `All ${r}`
+										}, ...t.values.map((e) => ({
+											value: e.code,
+											label: u(e.name) || e.code
+										}))],
+										onChange: (t) => me(e, t),
+										placeholder: r
+									})
+								}, e);
+							})
+						}),
+						/* @__PURE__ */ B("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "space-between",
+								fontSize: 11,
+								color: "var(--text-3)"
+							},
+							children: [/* @__PURE__ */ z("span", { children: q ? "Loading…" : `${W.length} ${u(p.display.name_plural)}` }), _e > 0 && /* @__PURE__ */ z("button", {
+								onClick: () => r((e) => {
+									let t = new URLSearchParams(e);
+									return t.delete("filters"), t;
+								}, { replace: !0 }),
+								style: {
+									background: "transparent",
+									border: 0,
+									color: "var(--accent)",
+									cursor: "pointer",
+									fontSize: 11,
+									textDecoration: "underline",
+									padding: 0
+								},
+								children: "Clear filters"
+							})]
+						})
+					]
+				}), /* @__PURE__ */ z("div", {
+					style: {
+						flex: 1,
+						overflowY: "auto",
+						padding: T === "cards" ? 10 : 0,
+						display: T === "cards" ? "flex" : "block",
+						flexDirection: "column",
+						gap: T === "cards" ? 10 : void 0
+					},
+					children: q ? /* @__PURE__ */ z("div", {
+						style: {
+							padding: 12,
+							display: "flex",
+							flexDirection: "column",
+							gap: 6
+						},
+						children: Array.from({ length: 8 }).map((e, t) => /* @__PURE__ */ z("div", { style: {
+							height: 48,
+							borderRadius: 6,
+							background: "var(--surface-3)"
+						} }, t))
+					}) : W.length === 0 ? /* @__PURE__ */ z("div", {
+						style: {
+							padding: 28,
+							textAlign: "center",
+							fontSize: 12.5,
+							color: "var(--text-3)"
+						},
+						children: "No records found"
+					}) : /* @__PURE__ */ B(le, { children: [W.map((e) => {
+						let t = i(e[de]);
+						return /* @__PURE__ */ z(ue, {
+							record: e,
+							entity: p,
+							columns: S,
+							card: j,
+							presentation: T,
+							refs: K,
+							isSelected: t === _,
+							onClick: () => fe(t, { replace: w === "split" })
+						}, t);
+					}), P && U.hasMore && /* @__PURE__ */ z("button", {
+						type: "button",
+						"data-testid": "record-list-load-more",
+						onClick: () => void U.fetchNextPage(),
+						disabled: U.isFetchingNextPage,
+						style: {
+							width: "100%",
+							padding: "8px 12px",
+							fontSize: 12,
+							background: "transparent",
+							border: "none",
+							borderTop: "1px solid var(--divider)",
+							color: "var(--text-2)",
+							cursor: U.isFetchingNextPage ? "default" : "pointer"
+						},
+						children: U.isFetchingNextPage ? "Loading…" : "Load more"
+					})] })
+				})]
+			}),
+			J && /* @__PURE__ */ z("div", {
+				"data-testid": "record-list-resize-handle",
+				onMouseDown: ge,
+				style: {
+					flex: "none",
+					width: 1,
+					cursor: "col-resize",
+					background: "var(--divider)",
+					transition: "background-color .12s"
+				},
+				onMouseEnter: (e) => e.currentTarget.style.background = "var(--border-strong)",
+				onMouseLeave: (e) => e.currentTarget.style.background = "var(--divider)"
+			}),
+			ye && /* @__PURE__ */ z("div", {
+				"data-testid": "record-detail-panel",
+				style: {
+					flex: 1,
+					minWidth: 0,
+					overflow: "hidden",
+					height: w === "stacked" ? "50%" : "100%"
+				},
+				children: _ ? /* @__PURE__ */ z(G, {
+					entityCode: m,
+					recordId: _,
+					items: c.items,
+					schema: a,
+					entity: p,
+					onBackToList: be,
+					relatedRecordsPresentation: ie
+				}, _) : /* @__PURE__ */ z("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						height: "100%",
+						color: "var(--text-3)"
+					},
+					children: /* @__PURE__ */ B("p", {
+						style: { fontSize: 12.5 },
+						children: [
+							"Select a ",
+							u(p.display.name),
+							" to view details"
+						]
+					})
+				})
+			})
+		]
+	});
+}
+function ue({ record: e, entity: n, columns: r, card: i, presentation: a, refs: o, isSelected: s, onClick: c }) {
+	let l = t();
+	if (a === "cards") {
+		let t = i.badgeFields.filter((t) => H(n, e, t)), r = i.bodyFields.filter((t) => H(n, e, t)), a = i.metaFields.filter((t) => H(n, e, t));
+		return /* @__PURE__ */ B("button", {
+			type: "button",
+			"data-testid": "record-list-card",
+			"aria-current": s ? "true" : void 0,
+			onClick: c,
+			style: {
+				width: "100%",
+				textAlign: "left",
+				padding: 12,
+				border: "1px solid var(--border)",
+				borderRadius: 8,
+				background: s ? "var(--row-selected-bg)" : "var(--surface)",
+				color: "var(--text)",
+				cursor: "pointer",
+				display: "flex",
+				flexDirection: "column",
+				gap: 8,
+				boxShadow: s ? "inset 3px 0 0 var(--accent)" : "none"
+			},
+			children: [
+				/* @__PURE__ */ z(U, {
+					entity: n,
+					record: e,
+					field: i.titleField,
+					refs: o
+				}),
+				i.subtitleField && /* @__PURE__ */ z("div", {
+					style: {
+						fontSize: 12,
+						color: "var(--text-3)",
+						overflowWrap: "anywhere"
+					},
+					children: T({
+						entity: n,
+						fieldName: i.subtitleField,
+						record: e,
+						mode: "display",
+						refs: o,
+						locale: l
+					})
+				}),
+				t.length > 0 && /* @__PURE__ */ z("div", {
+					style: {
+						display: "flex",
+						flexWrap: "wrap",
+						gap: 6
+					},
+					children: t.map((t) => /* @__PURE__ */ z("span", {
+						style: {
+							border: "1px solid var(--border)",
+							borderRadius: 999,
+							padding: "2px 7px",
+							fontSize: 11,
+							color: "var(--text-2)",
+							maxWidth: "100%",
+							overflowWrap: "anywhere"
+						},
+						children: T({
+							entity: n,
+							fieldName: t,
+							record: e,
+							mode: "display",
+							refs: o,
+							locale: l
+						})
+					}, t))
+				}),
+				r.length > 0 && /* @__PURE__ */ z("dl", {
+					style: {
+						display: "grid",
+						gridTemplateColumns: "minmax(72px, max-content) minmax(0, 1fr)",
+						gap: "5px 10px",
+						margin: 0
+					},
+					children: r.map((t) => /* @__PURE__ */ z(W, {
+						entity: n,
+						record: e,
+						fieldName: t,
+						refs: o,
+						locale: l
+					}, t))
+				}),
+				a.length > 0 && /* @__PURE__ */ z("div", {
+					style: {
+						display: "flex",
+						flexWrap: "wrap",
+						gap: 8,
+						fontSize: 11,
+						color: "var(--text-3)"
+					},
+					children: a.map((t) => /* @__PURE__ */ z("span", {
+						style: {
+							minWidth: 0,
+							overflowWrap: "anywhere"
+						},
+						children: T({
+							entity: n,
+							fieldName: t,
+							record: e,
+							mode: "display",
+							refs: o,
+							locale: l
+						})
+					}, t))
+				})
+			]
+		});
+	}
+	let u = r[0], d = r[1], f = r.slice(2, 4);
+	return /* @__PURE__ */ B("button", {
+		onClick: c,
+		style: {
+			width: "100%",
+			textAlign: "left",
+			padding: "10px 12px",
+			borderBottom: "1px solid var(--divider)",
+			background: s ? "var(--row-selected-bg)" : "transparent",
+			borderLeft: s ? "2px solid var(--accent)" : "2px solid transparent",
+			cursor: "pointer",
+			transition: "background-color .12s",
+			display: "flex",
+			flexDirection: "column",
+			gap: 2,
+			border: "1px solid transparent",
+			borderBottomColor: "var(--divider)"
+		},
+		onMouseEnter: (e) => {
+			s || (e.currentTarget.style.background = "var(--surface-3)");
+		},
+		onMouseLeave: (e) => {
+			s || (e.currentTarget.style.background = "transparent");
+		},
+		children: [u && /* @__PURE__ */ z("div", {
+			style: {
+				fontSize: 12.5,
+				fontWeight: 500,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap",
+				color: "var(--text)"
+			},
+			children: T({
+				entity: n,
+				fieldName: u,
+				record: e,
+				mode: "display",
+				refs: o,
+				locale: l
+			})
+		}), /* @__PURE__ */ B("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 6
+			},
+			children: [d && /* @__PURE__ */ z("div", {
+				style: {
+					fontSize: 11,
+					color: "var(--text-3)",
+					flex: 1,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: T({
+					entity: n,
+					fieldName: d,
+					record: e,
+					mode: "display",
+					refs: o,
+					locale: l
+				})
+			}), /* @__PURE__ */ z("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 4,
+					flexShrink: 0
+				},
+				children: f.map((t) => v(n, e, t) == null ? null : /* @__PURE__ */ z("div", {
+					style: { fontSize: 11 },
+					children: T({
+						entity: n,
+						fieldName: t,
+						record: e,
+						mode: "display",
+						refs: o,
+						locale: l
+					})
+				}, t))
+			})]
+		})]
+	});
+}
+function H(e, t, n) {
+	let r = v(e, t, n);
+	return !(r == null || r === "" || Array.isArray(r) && r.length === 0);
+}
+function U({ entity: e, record: r, field: i, refs: a }) {
+	let o = t(), s = n(r, e);
+	return /* @__PURE__ */ z("div", {
+		style: {
+			fontSize: 13.5,
+			fontWeight: 600,
+			color: "var(--text)",
+			overflowWrap: "anywhere"
+		},
+		children: (i ? T({
+			entity: e,
+			fieldName: i,
+			record: r,
+			mode: "display",
+			refs: a,
+			locale: o
+		}) : s) || u(e.display.name)
+	});
+}
+function W({ entity: e, record: t, fieldName: n, refs: r, locale: i }) {
+	let a = v(e, t, n);
+	if (a == null || a === "") return null;
+	let o = e.fields.get(n);
+	return o ? /* @__PURE__ */ B(le, { children: [/* @__PURE__ */ z("dt", {
+		style: {
+			color: "var(--text-3)",
+			fontSize: 11.5,
+			minWidth: 0,
+			overflowWrap: "anywhere"
+		},
+		children: l(o, n)
+	}), /* @__PURE__ */ z("dd", {
+		style: {
+			margin: 0,
+			color: "var(--text)",
+			fontSize: 12,
+			minWidth: 0,
+			overflowWrap: "anywhere"
+		},
+		children: T({
+			entity: e,
+			fieldName: n,
+			record: t,
+			mode: "display",
+			refs: r,
+			locale: i
+		})
+	})] }) : null;
+}
+function G({ entityCode: e, recordId: t, items: n, schema: r, entity: i, onBackToList: a, relatedRecordsPresentation: o }) {
+	return /* @__PURE__ */ z(s, { children: /* @__PURE__ */ z(K, {
+		entityCode: e,
+		recordId: t,
+		items: n,
+		schema: r,
+		entity: i,
+		onBackToList: a,
+		relatedRecordsPresentation: o
+	}) });
+}
+function K({ entityCode: t, recordId: o, items: s, schema: l, entity: d, onBackToList: f, relatedRecordsPresentation: ee }) {
+	let h = p(d, "update"), { data: ne, isLoading: re } = S(t, L(() => o ? c(d, o) : void 0, [o, d])), C = w(t), T = r(), [E, D] = se(!1), [O, k] = se({}), A = ne?.data, ae = A?.$statuses, oe = A?.$properties, N = M(t, o), I = j(t, o), R = L(() => {
+		let e = /* @__PURE__ */ new Set();
+		for (let [t, n] of d.fields) !n.auto && !n.primary && e.add(t);
+		for (let [t] of d.files ?? []) e.add(t);
+		return e;
+	}, [d]), ce = F(() => {
+		if (A) {
+			let e = {};
+			R.forEach((t) => {
+				let n = v(d, A, t);
+				e[t] = _(d, t) ? n ?? null : n ?? "";
+			}), k(e);
+		}
+		D(!0);
+	}, [
+		A,
+		R,
+		d
+	]), V = F(async () => {
+		await T.flushAllDrafts(), D(!1), k({});
+	}, [T]), ue = F(() => {
+		let e = {}, t = y({
+			entity: d,
+			formData: O,
+			record: A,
+			isNew: !1
+		}), n = b(t);
+		for (let [t, n] of Object.entries(O)) d.files?.has(t) || (e[t] = x(d, t, n));
+		if (Object.keys(t).length > 0 && (e.$files = t), Object.keys(e).length === 0) {
+			D(!1), k({});
+			return;
+		}
+		C.mutate({
+			pkValues: o,
+			data: e
+		}, {
+			onSuccess: () => {
+				n.forEach((e) => T.markCommitted(e)), D(!1), k({}), m.success("Saved");
+			},
+			onError: () => m.error("Failed to save")
+		});
+	}, [
+		T,
+		C,
+		o,
+		d,
+		O,
+		A
+	]), H = F((e, t) => {
+		k((n) => ({
+			...n,
+			[e]: t
+		}));
+	}, []);
+	if (re) return /* @__PURE__ */ z(ie, {});
+	if (!A) return null;
+	let U = n(A, d), W = d.display?.display_field, G = U ? void 0 : W ? A[W] : A[d.fields.names()[0]], K = U || (G != null && typeof G != "object" ? i(G) : u(d.display.name)), q = A?.$refs, de = {
+		schema: l,
+		entity: d,
+		entityCode: t,
+		recordId: o,
+		record: E ? {
+			...A,
+			...O
+		} : A,
+		isNew: !1,
+		mode: E ? "edit" : "display",
+		onFieldChange: E ? H : void 0,
+		refs: q,
+		objectProperties: oe ?? void 0,
+		onSetProperty: h ? (e, t) => I.mutate({
+			propertyCode: e,
+			value: t
+		}) : void 0,
+		isPropertyPending: I.isPending,
+		objectStatuses: ae ?? void 0,
+		onSetStatus: h ? (e, t) => N.mutate({
+			groupCode: e,
+			statusCode: t
+		}) : void 0,
+		isStatusPending: N.isPending,
+		relatedRecordsPresentation: ee
+	};
+	return /* @__PURE__ */ B("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			height: "100%"
+		},
+		children: [/* @__PURE__ */ B("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				padding: "10px 16px",
+				borderBottom: "1px solid var(--divider)",
+				position: "sticky",
+				top: 0,
+				background: "var(--surface)",
+				zIndex: 10
+			},
+			children: [/* @__PURE__ */ z("h2", {
+				style: {
+					margin: 0,
+					fontSize: 13,
+					fontWeight: 600,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+					color: "var(--text)"
+				},
+				children: K
+			}), /* @__PURE__ */ B("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 6
+				},
+				children: [f && /* @__PURE__ */ z(te, {
+					icon: /* @__PURE__ */ z(e.back, { size: 14 }),
+					title: "Back to list",
+					onClick: f
+				}), h && (E ? /* @__PURE__ */ B(le, { children: [/* @__PURE__ */ z(g, {
+					size: "xs",
+					icon: /* @__PURE__ */ z(e.x, { size: 12 }),
+					onClick: V,
+					children: "Cancel"
+				}), /* @__PURE__ */ z(g, {
+					kind: "primary",
+					size: "xs",
+					icon: C.isPending ? /* @__PURE__ */ z(a, { size: 12 }) : /* @__PURE__ */ z(e.save, { size: 12 }),
+					onClick: ue,
+					disabled: C.isPending,
+					children: C.isPending ? "Saving…" : "Save"
+				})] }) : /* @__PURE__ */ z(g, {
+					size: "xs",
+					icon: /* @__PURE__ */ z(e.edit, { size: 12 }),
+					onClick: ce,
+					children: "Edit"
+				}))]
+			})]
+		}), /* @__PURE__ */ z("div", {
+			style: {
+				flex: 1,
+				overflowY: "auto",
+				padding: 16,
+				display: "flex",
+				flexDirection: "column",
+				gap: 12
+			},
+			children: s && s.length > 0 ? /* @__PURE__ */ z(P, {
+				nodes: s,
+				ctx: de
+			}) : /* @__PURE__ */ B("p", {
+				style: {
+					fontSize: 12.5,
+					color: "var(--text-3)"
+				},
+				children: [
+					"No layout configured. Add ",
+					/* @__PURE__ */ z("code", { children: "items:" }),
+					" to the screen definition."
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { V as SmartRecordListPage };