@declarion/react 0.65.0 → 0.66.0

package/dist-lib/components/pages/SmartRecordListPage.impl.js

@@ -0,0 +1,818 @@
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { entityAllowsMutation as t, fieldDisplayName as n, getDisplayValue as r, singlePkValues as i } from "../../types/schema.js";
+import { useFirstScreenSettled as a } from "../../lib/capabilityPrefetch.js";
+import { useSchema as o } from "../../hooks/useSchema.js";
+import { textWithNodes as s } from "../../lib/language.js";
+import { Icon as c } from "../primitives/Icons.js";
+import { Btn as l } from "../primitives/Btn.js";
+import { IconBtn as u } from "../primitives/IconBtn.js";
+import { useText as d } from "../../hooks/useText.js";
+import { useResponsiveMode as f } from "../../hooks/useResponsiveMode.js";
+import { Spinner as p } from "../primitives/Spinner.js";
+import { TextInput as m } from "../primitives/Fields.js";
+import { pageInsetX as ee } from "../../lib/page-inset.js";
+import { readableSort as te } from "../../lib/field-classification.js";
+import { stripUnsupportedSortSegments as ne } from "../../lib/sort.js";
+import { useObject as re } from "../../hooks/useObject.js";
+import { useDebounce as ie } from "../../hooks/useDebounce.js";
+import { FileDraftScope as h, useFileDraftScope as ae } from "../file-widgets/draft-scope.js";
+import { getEntityFileField as g, getSchemaFieldValue as _, renderSchemaField as v, schemaFieldHasValue as y, serializeSchemaFieldValue as b } from "../file-widgets/host.js";
+import { buildFilesPayload as x, collectCommittedFileIds as oe } from "../file-widgets/payload.js";
+import { useUpdateObject as se } from "../../hooks/useMutations.js";
+import { useSetStatus as S } from "../../hooks/useObjectStatus.js";
+import { useSetProperty as C } from "../../hooks/useProperties.js";
+import { countActiveFilters as ce, parseFilterURLState as le, removeFilterAtPath as w, setFiltersInURL as T } from "../../lib/filters.js";
+import { useScreenBack as E } from "../../hooks/useScreenBack.js";
+import { useRegisterScreenTab as D } from "../../hooks/useRegisterScreenTab.js";
+import { useTabSearchMirror as O } from "../../hooks/useTabSearchMirror.js";
+import { DetailSkeleton as k } from "../shared/LoadingSkeleton.js";
+import { FilterDrawer as A } from "../filters/FilterDrawer.js";
+import { FilterChips as j } from "../filters/FilterChips.js";
+import { LayoutRenderer as ue } from "../detail-layout/LayoutRenderer.js";
+import { resolveCard as de, resolveListProjection as fe } from "./list/cardProjection.js";
+import { useListFilterPresentation as M } from "./list/useListFilterPresentation.js";
+import { FilterOmittedNotice as N } from "../filters/FilterOmittedNotice.js";
+import { useListQuery as P } from "./list/useListQuery.js";
+import { listLoadErrorDescription as pe } from "./list/ListNoRows.js";
+import { useFilterValueLabels as me } from "./list/use-filter-value-labels.js";
+import { useCallback as F, useEffect as I, useMemo as L, useRef as R, useState as z } from "react";
+import { Fragment as B, jsx as V, jsxs as H } from "react/jsx-runtime";
+import { useSearchParams as he } from "react-router";
+//#region src/components/pages/SmartRecordListPage.impl.tsx
+var ge = 200, _e = "items:";
+function U({ screenCode: t }) {
+	let n = d(), r = d("errors"), [i, s] = he(), { data: p, refetch: re } = o(), h = f(), [ae, g] = z(!1), _ = p?.screens[t], v = _?.entity ? p?.entities[_.entity] : void 0, y = _?.entity;
+	D(_, v, i.toString()), O(_?.route);
+	let b = E(), x = i.get("selected") ?? null, oe = i.get("search") ?? "", se = ie(oe, 300), S = i.get("sort") ?? te(v, _?.sort_default) ?? "", C = L(() => le(i), [i]), { visibleFilterState: k, filterFieldMeta: ue, allFilterFieldMeta: _e, filterFieldName: U } = M(_, v, p?.entities, C.filters), W = k.filters, G = F((e) => {
+		s((t) => {
+			let n = new URLSearchParams(t);
+			return T(e, n), n;
+		}, { replace: !0 });
+	}, [s]), K = L(() => _?.columns ?? v?.fields.names().filter((e) => !v.fields.get(e)?.primary && !v.fields.get(e)?.auto && v.fields.get(e)?.display?.is_listable !== !1).slice(0, 4) ?? [], [_?.columns, v]), q = L(() => {
+		let e = _?.responsive?.[h.category]?.presentation;
+		return h.category === "phone" ? "drilldown" : e === "split" || e === "drilldown" || e === "stacked" ? e : "split";
+	}, [_?.responsive, h.category]), J = L(() => {
+		let e = _?.responsive?.[h.category];
+		return e?.list?.presentation === "table" || e?.list?.presentation === "cards" ? e.list.presentation : e?.presentation === "table" || e?.presentation === "cards" ? e.presentation : h.category === "phone" ? "cards" : "table";
+	}, [_?.responsive, h.category]), be = _?.responsive?.[h.category]?.layout?.related_records, xe = L(() => de({
+		entity: v,
+		screen: _
+	}), [v, _]), Se = L(() => fe({
+		entity: v,
+		screen: _,
+		presentation: J,
+		visibleColumns: K,
+		card: xe,
+		sort: S
+	}), [
+		v,
+		_,
+		J,
+		K,
+		xe,
+		S
+	]), Y = P({
+		entity: v,
+		entityCode: y,
+		screen: _,
+		screenCode: t,
+		page: 1,
+		perPage: ge,
+		sortForRequest: ne(S),
+		debouncedSearch: se,
+		filters: W,
+		includeDeleted: !1,
+		expand: Se.expandFields,
+		select: Se.selectFields,
+		isHeld: !v,
+		retryHeld: () => {
+			re();
+		},
+		runCountQuery: !1,
+		urlKey: `${y ?? ""}|${i.toString()}`
+	}), Ce = Y.rows, we = Y.refs, Te = Y.isLoading;
+	a(!Te);
+	let { labelFor: Ee, refs: De } = me(_e, W, we, p?.entities), Oe = L(() => v?.fields.names().find((e) => v.fields.get(e)?.primary) ?? "id", [v]), ke = F((e, t) => {
+		s((t) => {
+			let n = new URLSearchParams(t);
+			return e ? n.set("selected", e) : n.delete("selected"), n;
+		}, { replace: t?.replace ?? !0 });
+	}, [s]), Ae = F((e) => {
+		s((t) => {
+			let n = new URLSearchParams(t);
+			return e ? n.set("search", e) : n.delete("search"), n;
+		}, { replace: !0 });
+	}, [s]), X = (_?.list_resizable ?? !1) && q === "split" && h.category !== "phone" && !h.touch, je = R(null), [Z, Q] = z(null), Me = R(!1), $ = _?.list_width;
+	I(() => {
+		X && $?.endsWith("%") && Q(null);
+	}, [
+		X,
+		$,
+		h.width,
+		h.height
+	]), I(() => {
+		if (!X || Z !== null) return;
+		let e = je.current;
+		if (e) {
+			if ($ && $.endsWith("%")) {
+				let t = parseFloat($) / 100;
+				Q(Math.round(e.getBoundingClientRect().width * t));
+			} else Q($ && parseInt($, 10) || 320);
+		}
+	}, [
+		X,
+		$,
+		Z,
+		v
+	]);
+	let Ne = R(null);
+	I(() => () => {
+		Ne.current?.();
+	}, []);
+	let Pe = F((e) => {
+		e.preventDefault(), Me.current = !0;
+		let t = e.clientX, n = Z ?? 320, r = (e) => {
+			if (!Me.current) return;
+			let r = (je.current?.getBoundingClientRect().width ?? window.innerWidth) - 300, i = Math.max(200, Math.min(r, n + e.clientX - t));
+			Q(i);
+		}, i = () => {
+			Me.current = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i), document.body.style.cursor = "", document.body.style.userSelect = "", Ne.current = null;
+		};
+		document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", r), document.addEventListener("mouseup", i), Ne.current = i;
+	}, [Z]);
+	if (!p || !_ || !v) return null;
+	let Fe = ce(W), Ie = q === "split" || q === "stacked" || !x, Le = q === "split" || q === "stacked" || !!x, Re = q !== "split" && x ? () => ke(null, { replace: !0 }) : void 0, ze = q === "split" ? X && Z !== null ? Z : _.list_width ?? "320px" : "100%";
+	return /* @__PURE__ */ H("div", {
+		ref: je,
+		"data-record-list-presentation": q,
+		style: {
+			display: "flex",
+			flexDirection: q === "stacked" ? "column" : "row",
+			height: "100%",
+			minWidth: 0,
+			overflow: "hidden"
+		},
+		children: [
+			Ie && /* @__PURE__ */ H("div", {
+				"data-testid": "record-list-panel",
+				style: {
+					flex: q === "split" ? "none" : "1 1 auto",
+					display: "flex",
+					flexDirection: "column",
+					overflow: "hidden",
+					borderRight: q === "split" && !X ? "1px solid var(--divider)" : "none",
+					borderBottom: q === "stacked" ? "1px solid var(--divider)" : "none",
+					width: ze,
+					minWidth: 0,
+					height: q === "stacked" ? "50%" : "100%"
+				},
+				children: [/* @__PURE__ */ H("div", {
+					style: {
+						paddingTop: 12,
+						paddingBottom: 12,
+						...ee(12),
+						display: "flex",
+						flexDirection: "column",
+						gap: 8,
+						borderBottom: "1px solid var(--divider)"
+					},
+					children: [
+						b.hasOriginBack && /* @__PURE__ */ H("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 8
+							},
+							children: [/* @__PURE__ */ V(u, {
+								icon: /* @__PURE__ */ V(c.back, { size: 14 }),
+								title: n("list.header.back", "Back"),
+								onClick: b.goBack
+							}), /* @__PURE__ */ V("span", {
+								style: {
+									fontSize: 12.5,
+									fontWeight: 600,
+									color: "var(--text)"
+								},
+								children: n(_.display?.name) || n(v.display.name_plural)
+							})]
+						}),
+						/* @__PURE__ */ V(m, {
+							value: oe,
+							onChange: Ae,
+							placeholder: n("list.toolbar.search_placeholder", "Search {name}…", { name: n(v.display.name_plural) }),
+							prefix: /* @__PURE__ */ V(c.search, { size: 13 })
+						}),
+						C.error && /* @__PURE__ */ H("div", {
+							role: "alert",
+							"data-testid": "record-list-filter-url-error",
+							style: {
+								padding: "7px 9px",
+								border: "1px solid var(--danger)",
+								borderRadius: "var(--radius-md)",
+								color: "var(--danger)",
+								fontSize: 11.5
+							},
+							children: [
+								r(C.errorCode ?? "", C.error),
+								" ",
+								n("list.filters.invalid_suffix", "Showing this list without URL filters.")
+							]
+						}),
+						/* @__PURE__ */ H(l, {
+							size: "xs",
+							icon: /* @__PURE__ */ V(c.filter, { size: 12 }),
+							onClick: () => g(!0),
+							children: [n("filter.drawer.title", "Filters"), Fe > 0 ? ` (${Fe})` : ""]
+						}),
+						k.omitted && /* @__PURE__ */ V(N, {}),
+						/* @__PURE__ */ V(j, {
+							filters: W,
+							resolveValue: Ee,
+							fieldLabel: U,
+							onRemoveAtPath: (e) => G(w(W, e)),
+							onClearAll: () => G([]),
+							onChipClick: () => g(!0)
+						}),
+						/* @__PURE__ */ V("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "space-between",
+								fontSize: 11,
+								color: "var(--text-3)"
+							},
+							children: /* @__PURE__ */ V("span", { children: Te ? n("list.records.loading", "Loading…") : Y.isError ? r("list.rows_unreadable", "The records could not be loaded.") : n("list.records.count", "{count} {name}", {
+								count: Ce.length,
+								name: n(v.display.name_plural)
+							}) })
+						})
+					]
+				}), /* @__PURE__ */ V("div", {
+					style: {
+						flex: 1,
+						overflowY: "auto",
+						padding: J === "cards" ? 10 : 0,
+						display: J === "cards" ? "flex" : "block",
+						flexDirection: "column",
+						gap: J === "cards" ? 10 : void 0
+					},
+					children: Te ? /* @__PURE__ */ V("div", {
+						style: {
+							padding: 12,
+							display: "flex",
+							flexDirection: "column",
+							gap: 6
+						},
+						children: Array.from({ length: 8 }).map((e, t) => /* @__PURE__ */ V("div", { style: {
+							height: 48,
+							borderRadius: "var(--radius-md)",
+							background: "var(--surface-3)"
+						} }, t))
+					}) : Y.isError ? /* @__PURE__ */ H("div", {
+						role: "alert",
+						style: {
+							padding: 16,
+							color: "var(--text-2)"
+						},
+						children: [pe(n, r, v, Y.error), /* @__PURE__ */ V(l, {
+							size: "xs",
+							onClick: () => {
+								Y.retry();
+							},
+							children: n("list.rows.retry", "Retry")
+						})]
+					}) : Ce.length === 0 ? /* @__PURE__ */ V("div", {
+						style: {
+							padding: 28,
+							textAlign: "center",
+							fontSize: 12.5,
+							color: "var(--text-3)"
+						},
+						children: n("list.records.none", "No records found")
+					}) : /* @__PURE__ */ H(B, { children: [Ce.map((t) => {
+						let n = e(t[Oe]);
+						return /* @__PURE__ */ V(ve, {
+							record: t,
+							entity: v,
+							columns: K,
+							card: xe,
+							presentation: J,
+							refs: we,
+							isSelected: n === x,
+							onClick: () => ke(n, { replace: q === "split" })
+						}, n);
+					}), Y.isCursor && Y.hasMorePages && /* @__PURE__ */ V("button", {
+						type: "button",
+						"data-testid": "record-list-load-more",
+						onClick: Y.fetchNextPage,
+						disabled: Y.isFetchingNextPage,
+						style: {
+							width: "100%",
+							padding: "8px 12px",
+							fontSize: 12,
+							background: "transparent",
+							border: "none",
+							borderTop: "1px solid var(--divider)",
+							color: "var(--text-2)",
+							cursor: Y.isFetchingNextPage ? "default" : "pointer"
+						},
+						children: Y.isFetchingNextPage ? n("list.records.loading", "Loading…") : n("list.footer.load_more", "Load more")
+					})] })
+				})]
+			}),
+			X && /* @__PURE__ */ V("div", {
+				"data-testid": "record-list-resize-handle",
+				onMouseDown: Pe,
+				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)"
+			}),
+			Le && /* @__PURE__ */ H("div", {
+				"data-testid": "record-detail-panel",
+				style: {
+					flex: 1,
+					display: "flex",
+					flexDirection: "column",
+					minWidth: 0,
+					overflow: "hidden",
+					height: q === "stacked" ? "50%" : "100%"
+				},
+				children: [!Ie && k.omitted && /* @__PURE__ */ V(N, { className: "p-4" }), /* @__PURE__ */ V("div", {
+					style: {
+						flex: 1,
+						minHeight: 0
+					},
+					children: x ? /* @__PURE__ */ V(ye, {
+						entityCode: y,
+						recordId: x,
+						items: _.items,
+						schema: p,
+						entity: v,
+						onBackToList: Re,
+						onOpenFilters: Ie ? void 0 : () => g(!0),
+						relatedRecordsPresentation: be
+					}, x) : /* @__PURE__ */ V("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							height: "100%",
+							color: "var(--text-3)"
+						},
+						children: /* @__PURE__ */ V("p", {
+							style: { fontSize: 12.5 },
+							children: n("list.detail.select_prompt", "Select a {name} to view details", { name: n(v.display.name) })
+						})
+					})
+				})]
+			}),
+			/* @__PURE__ */ V(A, {
+				open: ae,
+				onClose: () => g(!1),
+				filters: W,
+				onApply: G,
+				availableFields: ue,
+				allFields: _e,
+				fieldLabel: U,
+				resolveValue: Ee,
+				defaultFilters: _.default_filters,
+				refs: De
+			})
+		]
+	});
+}
+function ve({ record: e, entity: t, columns: n, card: r, presentation: i, refs: a, isSelected: o, onClick: s }) {
+	let c = d();
+	if (i === "cards") {
+		let n = r.badgeFields.filter((n) => y(t, e, n)), i = r.bodyFields.filter((n) => y(t, e, n)), l = r.metaFields.filter((n) => y(t, e, n));
+		return /* @__PURE__ */ H("button", {
+			type: "button",
+			"data-testid": "record-list-card",
+			"aria-current": o ? "true" : void 0,
+			onClick: s,
+			style: {
+				width: "100%",
+				textAlign: "left",
+				padding: 12,
+				border: "1px solid var(--border)",
+				borderRadius: "var(--radius-md)",
+				background: o ? "var(--row-selected-bg)" : "var(--surface)",
+				color: "var(--text)",
+				cursor: "pointer",
+				display: "flex",
+				flexDirection: "column",
+				gap: 8,
+				boxShadow: o ? "inset 3px 0 0 var(--accent)" : "none"
+			},
+			children: [
+				/* @__PURE__ */ V(W, {
+					entity: t,
+					record: e,
+					field: r.titleField,
+					refs: a
+				}),
+				r.subtitleField && /* @__PURE__ */ V("div", {
+					style: {
+						fontSize: 12,
+						color: "var(--text-3)",
+						overflowWrap: "anywhere"
+					},
+					children: v({
+						entity: t,
+						fieldName: r.subtitleField,
+						record: e,
+						mode: "display",
+						refs: a,
+						t: c
+					})
+				}),
+				n.length > 0 && /* @__PURE__ */ V("div", {
+					style: {
+						display: "flex",
+						flexWrap: "wrap",
+						gap: 6
+					},
+					children: n.map((n) => /* @__PURE__ */ V("span", {
+						style: {
+							border: "1px solid var(--border)",
+							borderRadius: 999,
+							padding: "2px 7px",
+							fontSize: 11,
+							color: "var(--text-2)",
+							maxWidth: "100%",
+							overflowWrap: "anywhere"
+						},
+						children: v({
+							entity: t,
+							fieldName: n,
+							record: e,
+							mode: "display",
+							refs: a,
+							t: c
+						})
+					}, n))
+				}),
+				i.length > 0 && /* @__PURE__ */ V("dl", {
+					style: {
+						display: "grid",
+						gridTemplateColumns: "minmax(72px, max-content) minmax(0, 1fr)",
+						gap: "5px 10px",
+						margin: 0
+					},
+					children: i.map((n) => /* @__PURE__ */ V(G, {
+						entity: t,
+						record: e,
+						fieldName: n,
+						refs: a
+					}, n))
+				}),
+				l.length > 0 && /* @__PURE__ */ V("div", {
+					style: {
+						display: "flex",
+						flexWrap: "wrap",
+						gap: 8,
+						fontSize: 11,
+						color: "var(--text-3)"
+					},
+					children: l.map((n) => /* @__PURE__ */ V("span", {
+						style: {
+							minWidth: 0,
+							overflowWrap: "anywhere"
+						},
+						children: v({
+							entity: t,
+							fieldName: n,
+							record: e,
+							mode: "display",
+							refs: a,
+							t: c
+						})
+					}, n))
+				})
+			]
+		});
+	}
+	let l = n[0], u = n[1], f = n.slice(2, 4);
+	return /* @__PURE__ */ H("button", {
+		onClick: s,
+		style: {
+			width: "100%",
+			textAlign: "left",
+			padding: "10px 12px",
+			borderBottom: "1px solid var(--divider)",
+			background: o ? "var(--row-selected-bg)" : "transparent",
+			borderLeft: o ? "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) => {
+			o || (e.currentTarget.style.background = "var(--surface-3)");
+		},
+		onMouseLeave: (e) => {
+			o || (e.currentTarget.style.background = "transparent");
+		},
+		children: [l && /* @__PURE__ */ V("div", {
+			style: {
+				fontSize: 12.5,
+				fontWeight: 500,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap",
+				color: "var(--text)"
+			},
+			children: v({
+				entity: t,
+				fieldName: l,
+				record: e,
+				mode: "display",
+				refs: a,
+				t: c
+			})
+		}), /* @__PURE__ */ H("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 6
+			},
+			children: [u && /* @__PURE__ */ V("div", {
+				style: {
+					fontSize: 11,
+					color: "var(--text-3)",
+					flex: 1,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: v({
+					entity: t,
+					fieldName: u,
+					record: e,
+					mode: "display",
+					refs: a,
+					t: c
+				})
+			}), /* @__PURE__ */ V("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 4,
+					flexShrink: 0
+				},
+				children: f.map((n) => _(t, e, n) == null ? null : /* @__PURE__ */ V("div", {
+					style: { fontSize: 11 },
+					children: v({
+						entity: t,
+						fieldName: n,
+						record: e,
+						mode: "display",
+						refs: a,
+						t: c
+					})
+				}, n))
+			})]
+		})]
+	});
+}
+function W({ entity: e, record: t, field: n, refs: i }) {
+	let a = d(), o = r(a, t, e), s = n ? v({
+		entity: e,
+		fieldName: n,
+		record: t,
+		mode: "display",
+		refs: i,
+		t: a
+	}) : o;
+	return /* @__PURE__ */ V("div", {
+		style: {
+			fontSize: 13.5,
+			fontWeight: 600,
+			color: "var(--text)",
+			overflowWrap: "anywhere"
+		},
+		children: s || a(e.display.name)
+	});
+}
+function G({ entity: e, record: t, fieldName: r, refs: i }) {
+	let a = d(), o = _(e, t, r);
+	if (o == null || o === "") return null;
+	let s = e.fields.get(r);
+	return s ? /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V("dt", {
+		style: {
+			color: "var(--text-3)",
+			fontSize: 11.5,
+			minWidth: 0,
+			overflowWrap: "anywhere"
+		},
+		children: n(a, s, r)
+	}), /* @__PURE__ */ V("dd", {
+		style: {
+			margin: 0,
+			color: "var(--text)",
+			fontSize: 12,
+			minWidth: 0,
+			overflowWrap: "anywhere"
+		},
+		children: v({
+			entity: e,
+			fieldName: r,
+			record: t,
+			mode: "display",
+			refs: i,
+			t: a
+		})
+	})] }) : null;
+}
+function ye({ entityCode: e, recordId: t, items: n, schema: r, entity: i, onBackToList: a, onOpenFilters: o, relatedRecordsPresentation: s }) {
+	return /* @__PURE__ */ V(h, { children: /* @__PURE__ */ V(K, {
+		entityCode: e,
+		recordId: t,
+		items: n,
+		schema: r,
+		entity: i,
+		onBackToList: a,
+		onOpenFilters: o,
+		relatedRecordsPresentation: s
+	}) });
+}
+function K({ entityCode: n, recordId: a, items: o, schema: f, entity: m, onBackToList: te, onOpenFilters: ne, relatedRecordsPresentation: ie }) {
+	let h = d(), v = t(m, "update"), y = L(() => a ? i(m, a) : void 0, [a, m]), { data: ce, isLoading: le } = re(n, y), w = se(n), T = ae(), [E, D] = z(!1), [O, A] = z({}), j = ce?.data, de = j?.$statuses, fe = j?.$properties, M = S(n, a), N = C(n, a), P = L(() => {
+		let e = /* @__PURE__ */ new Set();
+		for (let [t, n] of m.fields) !n.auto && !n.primary && e.add(t);
+		for (let [t] of m.files ?? []) e.add(t);
+		return e;
+	}, [m]), pe = F(() => {
+		if (j) {
+			let e = {};
+			P.forEach((t) => {
+				let n = _(m, j, t);
+				e[t] = g(m, t) ? n ?? null : n ?? "";
+			}), A(e);
+		}
+		D(!0);
+	}, [
+		j,
+		P,
+		m
+	]), me = F(async () => {
+		await T.flushAllDrafts(), D(!1), A({});
+	}, [T]), I = F(() => {
+		let e = {}, t = x({
+			entity: m,
+			formData: O,
+			record: j,
+			isNew: !1
+		}), n = oe(t);
+		for (let [t, n] of Object.entries(O)) m.files?.has(t) || (e[t] = b(m, t, n));
+		Object.keys(t).length > 0 && (e.$files = t), Object.keys(e).length === 0 ? (D(!1), A({})) : w.mutate({
+			pkValues: a,
+			data: e
+		}, { onSuccess: () => {
+			n.forEach((e) => T.markCommitted(e)), D(!1), A({});
+		} });
+	}, [
+		T,
+		w,
+		a,
+		m,
+		O,
+		j
+	]), R = F((e, t) => {
+		A((n) => ({
+			...n,
+			[e]: t
+		}));
+	}, []);
+	if (le) return /* @__PURE__ */ V(k, {});
+	if (!j) return null;
+	let he = r(h, j, m), ge = m.display?.display_field, U = he ? void 0 : ge ? j[ge] : j[m.fields.names()[0]], ve = he || (U != null && typeof U != "object" ? e(U) : h(m.display.name)), W = j?.$refs, G = {
+		schema: f,
+		entity: m,
+		entityCode: n,
+		recordId: a,
+		record: E ? {
+			...j,
+			...O
+		} : j,
+		isNew: !1,
+		mode: E ? "edit" : "display",
+		onFieldChange: E ? R : void 0,
+		refs: W,
+		objectProperties: fe ?? void 0,
+		onSetProperty: v ? (e, t) => N.mutate({
+			propertyCode: e,
+			value: t
+		}) : void 0,
+		isPropertyPending: N.isPending,
+		objectStatuses: de ?? void 0,
+		onSetStatus: v ? (e, t) => M.mutate({
+			groupCode: e,
+			statusCode: t
+		}) : void 0,
+		isStatusPending: M.isPending,
+		relatedRecordsPresentation: ie
+	};
+	return /* @__PURE__ */ H("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			height: "100%"
+		},
+		children: [/* @__PURE__ */ H("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				paddingTop: 10,
+				paddingBottom: 10,
+				...ee(16),
+				borderBottom: "1px solid var(--divider)",
+				position: "sticky",
+				top: 0,
+				background: "var(--surface)",
+				zIndex: 10
+			},
+			children: [/* @__PURE__ */ V("h2", {
+				style: {
+					margin: 0,
+					fontSize: 13,
+					fontWeight: 600,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+					color: "var(--text)"
+				},
+				children: ve
+			}), /* @__PURE__ */ H("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 6
+				},
+				children: [
+					te && /* @__PURE__ */ V(u, {
+						icon: /* @__PURE__ */ V(c.back, { size: 14 }),
+						title: h("list.detail.back_to_list", "Back to list"),
+						onClick: te
+					}),
+					ne && /* @__PURE__ */ V(u, {
+						icon: /* @__PURE__ */ V(c.filter, { size: 14 }),
+						title: h("filter.drawer.title", "Filters"),
+						onClick: ne
+					}),
+					v && (E ? /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V(l, {
+						size: "xs",
+						icon: /* @__PURE__ */ V(c.x, { size: 12 }),
+						onClick: me,
+						children: h("dialog.cancel", "Cancel")
+					}), /* @__PURE__ */ V(l, {
+						kind: "primary",
+						size: "xs",
+						icon: w.isPending ? /* @__PURE__ */ V(p, { size: 12 }) : /* @__PURE__ */ V(c.save, { size: 12 }),
+						onClick: I,
+						disabled: w.isPending,
+						children: w.isPending ? h("dialog.saving", "Saving…") : h("dialog.save", "Save")
+					})] }) : /* @__PURE__ */ V(l, {
+						size: "xs",
+						icon: /* @__PURE__ */ V(c.edit, { size: 12 }),
+						onClick: pe,
+						children: h("list.record.edit", "Edit")
+					}))
+				]
+			})]
+		}), /* @__PURE__ */ V("div", {
+			style: {
+				flex: 1,
+				overflowY: "auto",
+				paddingTop: 16,
+				paddingBottom: 16,
+				...ee(16),
+				display: "flex",
+				flexDirection: "column",
+				gap: 12
+			},
+			children: o && o.length > 0 ? /* @__PURE__ */ V(ue, {
+				nodes: o,
+				ctx: G
+			}) : /* @__PURE__ */ V("p", {
+				style: {
+					fontSize: 12.5,
+					color: "var(--text-3)"
+				},
+				children: s(h("list.detail.no_layout", "No layout configured. Add {key} to the screen definition."), { key: /* @__PURE__ */ V("code", { children: _e }) })
+			})
+		})]
+	});
+}
+//#endregion
+export { U as SmartRecordListPage };