@declarion/react 0.106.0 → 0.109.0

package/dist-lib/components/detail-layout/ChildrenCards.js

@@ -2,76 +2,78 @@ import { coerceDisplayString as e } from "../../lib/display-value.js";
 import { fieldDisplayName as t } from "../../types/schema.js";
 import { Pill as n } from "../primitives/Pill.js";
 import { useText as r } from "../../hooks/useText.js";
-import { useChildrenData as i } from "../../hooks/useChildrenData.js";
-import { renderField as a } from "../fields/index.js";
-import { QuickAddForm as o } from "./QuickAddForm.js";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { RetryButton as i } from "../primitives/RetryButton.js";
+import { readDisplayState as a } from "../../lib/read-display-state.js";
+import { useChildrenData as o } from "../../hooks/useChildrenData.js";
+import { renderField as s } from "../fields/index.js";
+import { QuickAddForm as c } from "./QuickAddForm.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/detail-layout/ChildrenCards.tsx
-function l({ config: l, parentEntity: u, parentId: d, schema: f }) {
-	let p = f.entities[l.entity], m = r(), h = r("errors"), { data: g, isLoading: _, isError: v } = i(u, d, l.entity, l.foreign_key, l.sort, l.limit), y = g?.data ?? [], b = g?.$refs, x = l.columns, S = l.cards, C = S?.header_field ?? x[0], w = S?.badge_field, T = S?.columns_count ?? 3;
-	if (!p) return null;
-	let E = {
+function d({ config: d, parentEntity: f, parentId: p, schema: m }) {
+	let h = m.entities[d.entity], g = r(), _ = r("errors"), v = o(f, p, d.entity, d.foreign_key, d.sort, d.limit), y = v.data, b = a(v), x = y?.data ?? [], S = y?.$refs, C = d.columns, w = d.cards, T = w?.header_field ?? C[0], E = w?.badge_field, D = w?.columns_count ?? 3;
+	if (!h) return null;
+	let O = {
 		display: "grid",
-		gridTemplateColumns: `repeat(auto-fill, minmax(${T >= 4 ? 180 : 240}px, 1fr))`,
+		gridTemplateColumns: `repeat(auto-fill, minmax(${D >= 4 ? 180 : 240}px, 1fr))`,
 		gap: 12
-	}, D = /* @__PURE__ */ s(o, {
-		config: l,
-		parentEntity: u,
-		parentId: d,
-		schema: f
+	}, k = /* @__PURE__ */ l(c, {
+		config: d,
+		parentEntity: f,
+		parentId: p,
+		schema: m
 	});
-	if (v) return /* @__PURE__ */ c("div", { children: [D, /* @__PURE__ */ c("div", {
+	if (b.error) return /* @__PURE__ */ u("div", { children: [k, /* @__PURE__ */ u("div", {
 		style: {
 			fontSize: 12.5,
 			color: "var(--danger)",
 			padding: "8px 0"
 		},
 		children: [
-			h("record.related_rows_unreadable", "The related records could not be loaded."),
+			_("record.related_rows_unreadable", "The related records could not be loaded."),
 			" ",
-			m("record.related.try_again", "Try again.")
+			/* @__PURE__ */ l(i, { onRetry: b.retry })
 		]
 	})] });
-	if (_) return /* @__PURE__ */ c("div", { children: [D, /* @__PURE__ */ s("div", {
-		style: E,
+	if (b.loading) return /* @__PURE__ */ u("div", { children: [k, /* @__PURE__ */ l("div", {
+		style: O,
 		children: [
 			0,
 			1,
 			2
-		].map((e) => /* @__PURE__ */ s("div", { style: {
+		].map((e) => /* @__PURE__ */ l("div", { style: {
 			height: 96,
 			background: "var(--surface-3)",
 			borderRadius: "var(--radius-lg)"
 		} }, e))
 	})] });
-	if (y.length === 0) return /* @__PURE__ */ c("div", { children: [D, /* @__PURE__ */ s("div", {
+	if (x.length === 0) return /* @__PURE__ */ u("div", { children: [k, /* @__PURE__ */ l("div", {
 		style: {
 			fontSize: 12.5,
 			color: "var(--text-3)",
 			padding: "12px 0"
 		},
-		children: m("record.related.empty", "No records yet.")
+		children: g("record.related.empty", "No records yet.")
 	})] });
-	let O = x.filter((e) => e !== C && e !== w);
-	return /* @__PURE__ */ c("div", { children: [D, /* @__PURE__ */ s("div", {
-		style: E,
-		children: y.map((r, i) => /* @__PURE__ */ c("div", {
+	let A = C.filter((e) => e !== T && e !== E);
+	return /* @__PURE__ */ u("div", { children: [k, /* @__PURE__ */ l("div", {
+		style: O,
+		children: x.map((r, i) => /* @__PURE__ */ u("div", {
 			style: {
 				background: "var(--surface)",
 				border: "1px solid var(--border)",
 				borderRadius: "var(--radius-lg)",
 				overflow: "hidden"
 			},
-			children: [/* @__PURE__ */ c("div", {
+			children: [/* @__PURE__ */ u("div", {
 				style: {
 					padding: "10px 14px",
 					display: "flex",
 					alignItems: "center",
 					justifyContent: "space-between",
 					gap: 8,
-					borderBottom: O.length > 0 ? "1px solid var(--divider)" : "none"
+					borderBottom: A.length > 0 ? "1px solid var(--divider)" : "none"
 				},
-				children: [/* @__PURE__ */ s("div", {
+				children: [/* @__PURE__ */ l("div", {
 					style: {
 						fontSize: 12.5,
 						fontWeight: 600,
@@ -79,64 +81,64 @@ function l({ config: l, parentEntity: u, parentId: d, schema: f }) {
 						textOverflow: "ellipsis",
 						whiteSpace: "nowrap"
 					},
-					children: C && p.fields.get(C) ? a({
-						field: p.fields.get(C),
-						fieldName: C,
-						value: r[C],
+					children: T && h.fields.get(T) ? s({
+						field: h.fields.get(T),
+						fieldName: T,
+						value: r[T],
 						mode: "display",
 						record: r,
-						refs: b,
-						t: m
-					}) : m("record.related.card_title", "Record {number}", { number: i + 1 })
-				}), w && r[w] != null && /* @__PURE__ */ s(n, {
+						refs: S,
+						t: g
+					}) : g("record.related.card_title", "Record {number}", { number: i + 1 })
+				}), E && r[E] != null && /* @__PURE__ */ l(n, {
 					tone: "slate",
 					size: "xs",
-					children: p.fields.get(w) ? a({
-						field: p.fields.get(w),
-						fieldName: w,
-						value: r[w],
+					children: h.fields.get(E) ? s({
+						field: h.fields.get(E),
+						fieldName: E,
+						value: r[E],
 						mode: "display",
 						record: r,
-						refs: b,
-						t: m
-					}) : e(r[w])
+						refs: S,
+						t: g
+					}) : e(r[E])
 				})]
-			}), O.length > 0 && /* @__PURE__ */ s("div", {
+			}), A.length > 0 && /* @__PURE__ */ l("div", {
 				style: {
 					padding: "10px 14px",
 					display: "flex",
 					flexDirection: "column",
 					gap: 4
 				},
-				children: O.slice(0, 4).map((e) => {
-					let n = p.fields.get(e);
-					return n ? /* @__PURE__ */ c("div", {
+				children: A.slice(0, 4).map((e) => {
+					let n = h.fields.get(e);
+					return n ? /* @__PURE__ */ u("div", {
 						style: {
 							display: "flex",
 							alignItems: "baseline",
 							gap: 8,
 							fontSize: 11.5
 						},
-						children: [/* @__PURE__ */ c("span", {
+						children: [/* @__PURE__ */ u("span", {
 							style: {
 								color: "var(--text-3)",
 								flexShrink: 0
 							},
-							children: [t(m, n, e, f.entities), ":"]
-						}), /* @__PURE__ */ s("span", {
+							children: [t(g, n, e, m.entities), ":"]
+						}), /* @__PURE__ */ l("span", {
 							style: {
 								overflow: "hidden",
 								textOverflow: "ellipsis",
 								whiteSpace: "nowrap"
 							},
-							children: a({
+							children: s({
 								field: n,
 								fieldName: e,
 								value: r[e],
 								mode: "display",
 								record: r,
-								refs: b,
-								t: m
+								refs: S,
+								t: g
 							})
 						})]
 					}, e) : null;
@@ -146,4 +148,4 @@ function l({ config: l, parentEntity: u, parentId: d, schema: f }) {
 	})] });
 }
 //#endregion
-export { l as ChildrenCards };
+export { d as ChildrenCards };

package/dist-lib/components/detail-layout/ChildrenList.js

@@ -1,33 +1,35 @@
 import { coerceDisplayString as e } from "../../lib/display-value.js";
 import { DISPLAY_KEY as t } from "../../types/schema.js";
 import { useText as n } from "../../hooks/useText.js";
-import { useChildrenData as r } from "../../hooks/useChildrenData.js";
-import { renderField as i } from "../fields/index.js";
-import { QuickAddForm as a } from "./QuickAddForm.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { RetryButton as r } from "../primitives/RetryButton.js";
+import { readDisplayState as i } from "../../lib/read-display-state.js";
+import { useChildrenData as a } from "../../hooks/useChildrenData.js";
+import { renderField as o } from "../fields/index.js";
+import { QuickAddForm as s } from "./QuickAddForm.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/detail-layout/ChildrenList.tsx
-function c({ config: c, parentEntity: l, parentId: u, schema: d }) {
-	let f = d.entities[c.entity], p = n(), m = n("errors"), { data: h, isLoading: g, isError: _ } = r(l, u, c.entity, c.foreign_key, c.sort, c.limit), v = h?.data ?? [], y = h?.$refs, b = c.columns;
-	if (!f) return null;
-	let x = /* @__PURE__ */ o(a, {
-		config: c,
-		parentEntity: l,
-		parentId: u,
-		schema: d
+function u({ config: u, parentEntity: d, parentId: f, schema: p }) {
+	let m = p.entities[u.entity], h = n(), g = n("errors"), _ = a(d, f, u.entity, u.foreign_key, u.sort, u.limit), v = _.data, y = i(_), b = v?.data ?? [], x = v?.$refs, S = u.columns;
+	if (!m) return null;
+	let C = /* @__PURE__ */ c(s, {
+		config: u,
+		parentEntity: d,
+		parentId: f,
+		schema: p
 	});
-	if (_) return /* @__PURE__ */ s("div", { children: [x, /* @__PURE__ */ s("div", {
+	if (y.error) return /* @__PURE__ */ l("div", { children: [C, /* @__PURE__ */ l("div", {
 		style: {
 			fontSize: 12.5,
 			color: "var(--danger)",
 			padding: "8px 0"
 		},
 		children: [
-			m("record.related_rows_unreadable", "The related records could not be loaded."),
+			g("record.related_rows_unreadable", "The related records could not be loaded."),
 			" ",
-			p("record.related.try_again", "Try again.")
+			/* @__PURE__ */ c(r, { onRetry: y.retry })
 		]
 	})] });
-	if (g) return /* @__PURE__ */ s("div", { children: [x, /* @__PURE__ */ s("div", {
+	if (y.loading) return /* @__PURE__ */ l("div", { children: [C, /* @__PURE__ */ l("div", {
 		style: {
 			display: "flex",
 			flexDirection: "column",
@@ -35,17 +37,17 @@ function c({ config: c, parentEntity: l, parentId: u, schema: d }) {
 			padding: "8px 0"
 		},
 		children: [
-			/* @__PURE__ */ o("div", { style: {
+			/* @__PURE__ */ c("div", { style: {
 				height: 22,
 				background: "var(--surface-3)",
 				borderRadius: "var(--radius-sm)"
 			} }),
-			/* @__PURE__ */ o("div", { style: {
+			/* @__PURE__ */ c("div", { style: {
 				height: 22,
 				background: "var(--surface-3)",
 				borderRadius: "var(--radius-sm)"
 			} }),
-			/* @__PURE__ */ o("div", { style: {
+			/* @__PURE__ */ c("div", { style: {
 				height: 22,
 				background: "var(--surface-3)",
 				borderRadius: "var(--radius-sm)",
@@ -53,23 +55,23 @@ function c({ config: c, parentEntity: l, parentId: u, schema: d }) {
 			} })
 		]
 	})] });
-	if (v.length === 0) return /* @__PURE__ */ s("div", { children: [x, /* @__PURE__ */ o("div", {
+	if (b.length === 0) return /* @__PURE__ */ l("div", { children: [C, /* @__PURE__ */ c("div", {
 		style: {
 			fontSize: 12.5,
 			color: "var(--text-3)",
 			padding: "12px 0"
 		},
-		children: p("record.related.empty", "No records yet.")
+		children: h("record.related.empty", "No records yet.")
 	})] });
-	let S = b.length > 0 ? f.display.display_field ?? b[0] : f.display.display_field;
-	return /* @__PURE__ */ s("div", { children: [x, /* @__PURE__ */ o("div", {
+	let w = S.length > 0 ? m.display.display_field ?? S[0] : m.display.display_field;
+	return /* @__PURE__ */ l("div", { children: [C, /* @__PURE__ */ c("div", {
 		style: {
 			display: "flex",
 			flexDirection: "column"
 		},
-		children: v.map((n, r) => {
-			let a = typeof n.$display == "string" ? n[t] : "";
-			return /* @__PURE__ */ o("div", {
+		children: b.map((n, r) => {
+			let i = typeof n.$display == "string" ? n[t] : "";
+			return /* @__PURE__ */ c("div", {
 				style: {
 					display: "flex",
 					alignItems: "center",
@@ -77,30 +79,30 @@ function c({ config: c, parentEntity: l, parentId: u, schema: d }) {
 					padding: "8px 4px",
 					borderBottom: "1px solid var(--divider)"
 				},
-				children: /* @__PURE__ */ s("div", {
+				children: /* @__PURE__ */ l("div", {
 					style: {
 						flex: 1,
 						minWidth: 0
 					},
-					children: [/* @__PURE__ */ o("div", {
+					children: [/* @__PURE__ */ c("div", {
 						style: {
 							fontSize: 12.5,
 							overflow: "hidden",
 							textOverflow: "ellipsis",
 							whiteSpace: "nowrap"
 						},
-						children: a || (S && f.fields.get(S) ? i({
-							field: f.fields.get(S),
-							fieldName: S,
-							value: n[S],
+						children: i || (w && m.fields.get(w) ? o({
+							field: m.fields.get(w),
+							fieldName: w,
+							value: n[w],
 							mode: "display",
 							record: n,
-							refs: y,
-							t: p
-						}) : S && n[S] != null ? e(n[S]) : null)
-					}), b.length > 1 && (() => {
-						let e = b.slice(1, 3).filter((e) => n[e] != null);
-						return e.length === 0 ? null : /* @__PURE__ */ o("div", {
+							refs: x,
+							t: h
+						}) : w && n[w] != null ? e(n[w]) : null)
+					}), S.length > 1 && (() => {
+						let e = S.slice(1, 3).filter((e) => n[e] != null);
+						return e.length === 0 ? null : /* @__PURE__ */ c("div", {
 							style: {
 								fontSize: 11.5,
 								color: "var(--text-3)",
@@ -108,14 +110,14 @@ function c({ config: c, parentEntity: l, parentId: u, schema: d }) {
 								textOverflow: "ellipsis",
 								whiteSpace: "nowrap"
 							},
-							children: e.map((e, t) => /* @__PURE__ */ s("span", { children: [t > 0 && " · ", f.fields.get(e) ? i({
-								field: f.fields.get(e),
+							children: e.map((e, t) => /* @__PURE__ */ l("span", { children: [t > 0 && " · ", m.fields.get(e) ? o({
+								field: m.fields.get(e),
 								fieldName: e,
 								value: n[e],
 								mode: "display",
 								record: n,
-								refs: y,
-								t: p
+								refs: x,
+								t: h
 							}) : String(n[e])] }, e))
 						});
 					})()]
@@ -125,4 +127,4 @@ function c({ config: c, parentEntity: l, parentId: u, schema: d }) {
 	})] });
 }
 //#endregion
-export { c as ChildrenList };
+export { u as ChildrenList };

package/dist-lib/components/detail-layout/ChildrenTable.js

@@ -4,54 +4,56 @@ import { Icon as r } from "../primitives/Icons.js";
 import { IconBtn as i } from "../primitives/IconBtn.js";
 import { Pill as a } from "../primitives/Pill.js";
 import { useText as o } from "../../hooks/useText.js";
-import { Spinner as s } from "../primitives/Spinner.js";
-import { useChildrenData as c } from "../../hooks/useChildrenData.js";
-import { useScreenIsLive as l } from "../../stores/realtime.js";
-import { resolveCellRenderer as u } from "../fields/cells/registry.js";
-import { useOwnRefresh as d } from "../shared/useOwnRefresh.js";
-import { dataTableCellStyle as f, dataTableHeadCellStyle as p, dataTableStyle as m } from "../primitives/dataTableStyles.js";
-import { findPrimaryKey as h } from "../../lib/child-config.js";
-import { QuickAddForm as g } from "./QuickAddForm.js";
-import { ManualResizeHandle as _, childLayoutKey as v, useManualColumnResize as y } from "./useManualColumnResize.js";
-import { useMemo as b, useRef as x } from "react";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { RetryButton as s } from "../primitives/RetryButton.js";
+import { Spinner as c } from "../primitives/Spinner.js";
+import { readDisplayState as l } from "../../lib/read-display-state.js";
+import { useChildrenData as u } from "../../hooks/useChildrenData.js";
+import { useScreenIsLive as d } from "../../stores/realtime.js";
+import { resolveCellRenderer as f } from "../fields/cells/registry.js";
+import { useOwnRefresh as p } from "../shared/useOwnRefresh.js";
+import { dataTableCellStyle as m, dataTableHeadCellStyle as h, dataTableStyle as g } from "../primitives/dataTableStyles.js";
+import { findPrimaryKey as _ } from "../../lib/child-config.js";
+import { QuickAddForm as v } from "./QuickAddForm.js";
+import { ManualResizeHandle as y, childLayoutKey as b, useManualColumnResize as x } from "./useManualColumnResize.js";
+import { useMemo as S, useRef as C } from "react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/components/detail-layout/ChildrenTable.tsx
-function w({ config: w, parentEntity: T, parentId: E, schema: D }) {
-	let O = o(), k = o("errors"), A = D.entities[w.entity], j = Array.isArray(w.foreign_key) ? w.foreign_key.join(",") : w.foreign_key, M = y(v(T, w.entity, j)), N = l(A?.realtime, w.entity), { data: P, isLoading: F, isError: I, refetch: L } = c(T, E, w.entity, w.foreign_key, w.sort, w.limit), { refreshing: R, refresh: z } = d(L), B = P?.data ?? [], V = P?.$refs, H = x(V);
-	H.current = V;
-	let U = w.columns, W = w.interaction === "navigate", G = U[0], K = W && A ? n(void 0, A, D.screens) : null, q = A ? h(A) : void 0, J = b(() => {
+function E({ config: E, parentEntity: D, parentId: O, schema: k }) {
+	let A = o(), j = o("errors"), M = k.entities[E.entity], N = Array.isArray(E.foreign_key) ? E.foreign_key.join(",") : E.foreign_key, P = x(b(D, E.entity, N)), F = d(M?.realtime, E.entity), I = u(D, O, E.entity, E.foreign_key, E.sort, E.limit), L = I.data, R = l(I), { refreshing: z, refresh: B } = p(I.refetch), V = L?.data ?? [], H = L?.$refs, U = C(H);
+	U.current = H;
+	let W = E.columns, G = E.interaction === "navigate", K = W[0], q = G && M ? n(void 0, M, k.screens) : null, J = M ? _(M) : void 0, Y = S(() => {
 		let e = /* @__PURE__ */ new Map();
-		if (!A) return e;
-		for (let t of U) {
-			let n = A.fields.get(t);
-			n && e.set(t, u({
+		if (!M) return e;
+		for (let t of W) {
+			let n = M.fields.get(t);
+			n && e.set(t, f({
 				field: n,
 				fieldName: t,
 				surface: "list",
-				entity: A,
-				entityCode: w.entity,
-				entities: D.entities,
-				screens: D.screens,
-				refs: () => H.current,
-				t: O
+				entity: M,
+				entityCode: E.entity,
+				entities: k.entities,
+				screens: k.screens,
+				refs: () => U.current,
+				t: A
 			}));
 		}
 		return e;
 	}, [
-		A,
-		w.entity,
-		U,
-		D.entities,
-		D.screens,
-		O
+		M,
+		E.entity,
+		W,
+		k.entities,
+		k.screens,
+		A
 	]);
-	if (!A) return null;
-	let Y = /* @__PURE__ */ S(g, {
-		config: w,
-		parentEntity: T,
-		parentId: E,
-		schema: D
-	}), X = N ? O("record.related.live", "Live") : O("record.related.paused", "Updates paused"), Z = /* @__PURE__ */ C("div", {
+	if (!M) return null;
+	let X = /* @__PURE__ */ w(v, {
+		config: E,
+		parentEntity: D,
+		parentId: O,
+		schema: k
+	}), Z = F ? A("record.related.live", "Live") : A("record.related.paused", "Updates paused"), Q = /* @__PURE__ */ T("div", {
 		style: {
 			display: "flex",
 			alignItems: "center",
@@ -60,56 +62,56 @@ function w({ config: w, parentEntity: T, parentId: E, schema: D }) {
 			justifyContent: "flex-end"
 		},
 		children: [
-			M.hasWidths && /* @__PURE__ */ S(i, {
-				icon: /* @__PURE__ */ S(r.columns, { size: 13 }),
-				title: O("record.related.reset_widths", "Reset column widths (this device)"),
+			P.hasWidths && /* @__PURE__ */ w(i, {
+				icon: /* @__PURE__ */ w(r.columns, { size: 13 }),
+				title: A("record.related.reset_widths", "Reset column widths (this device)"),
 				size: 24,
-				onClick: M.resetWidths
+				onClick: P.resetWidths
 			}),
-			A.realtime === !0 && /* @__PURE__ */ S("span", {
+			M.realtime === !0 && /* @__PURE__ */ w("span", {
 				"data-testid": "children-live-indicator",
 				role: "status",
-				"aria-label": X,
-				title: N ? O("record.related.live_hint", "This table updates automatically in realtime.") : O("record.related.paused_hint", "Realtime updates are paused. Refresh manually to load the latest data."),
-				children: /* @__PURE__ */ S(a, {
-					tone: N ? "emerald" : "amber",
+				"aria-label": Z,
+				title: F ? A("record.related.live_hint", "This table updates automatically in realtime.") : A("record.related.paused_hint", "Realtime updates are paused. Refresh manually to load the latest data."),
+				children: /* @__PURE__ */ w(a, {
+					tone: F ? "emerald" : "amber",
 					size: "xs",
 					dot: !0,
-					children: X
+					children: Z
 				})
 			}),
-			/* @__PURE__ */ S(i, {
-				icon: R ? /* @__PURE__ */ S("span", {
+			/* @__PURE__ */ w(i, {
+				icon: z ? /* @__PURE__ */ w("span", {
 					"data-testid": "children-refresh-spinner",
 					style: { display: "inline-flex" },
-					children: /* @__PURE__ */ S(s, { size: 13 })
-				}) : /* @__PURE__ */ S(r.refresh, { size: 13 }),
-				title: O("record.related.refresh", "Refresh"),
+					children: /* @__PURE__ */ w(c, { size: 13 })
+				}) : /* @__PURE__ */ w(r.refresh, { size: 13 }),
+				title: A("record.related.refresh", "Refresh"),
 				size: 24,
-				disabled: R,
-				onClick: z
+				disabled: z,
+				onClick: B
 			})
 		]
 	});
-	return I ? /* @__PURE__ */ C("div", { children: [
-		Y,
-		Z,
-		/* @__PURE__ */ C("div", {
+	return R.error ? /* @__PURE__ */ T("div", { children: [
+		X,
+		Q,
+		/* @__PURE__ */ T("div", {
 			style: {
 				fontSize: 12.5,
 				color: "var(--danger)",
 				padding: "8px 0"
 			},
 			children: [
-				k("record.related_rows_unreadable", "The related records could not be loaded."),
+				j("record.related_rows_unreadable", "The related records could not be loaded."),
 				" ",
-				O("record.related.try_again", "Try again.")
+				/* @__PURE__ */ w(s, { onRetry: R.retry })
 			]
 		})
-	] }) : F ? /* @__PURE__ */ C("div", { children: [
-		Y,
-		Z,
-		/* @__PURE__ */ S("div", {
+	] }) : R.loading ? /* @__PURE__ */ T("div", { children: [
+		X,
+		Q,
+		/* @__PURE__ */ w("div", {
 			style: {
 				display: "flex",
 				flexDirection: "column",
@@ -120,47 +122,47 @@ function w({ config: w, parentEntity: T, parentId: E, schema: D }) {
 				0,
 				1,
 				2
-			].map((e) => /* @__PURE__ */ S("div", { style: {
+			].map((e) => /* @__PURE__ */ w("div", { style: {
 				height: 32,
 				background: "var(--surface-3)",
 				borderRadius: "var(--radius-sm)"
 			} }, e))
 		})
-	] }) : B.length === 0 ? /* @__PURE__ */ C("div", { children: [
-		Y,
-		Z,
-		/* @__PURE__ */ S("div", {
+	] }) : V.length === 0 ? /* @__PURE__ */ T("div", { children: [
+		X,
+		Q,
+		/* @__PURE__ */ w("div", {
 			style: {
 				fontSize: 12.5,
 				color: "var(--text-3)",
 				padding: "12px 0"
 			},
-			children: O("record.related.empty", "No records yet.")
+			children: A("record.related.empty", "No records yet.")
 		})
-	] }) : /* @__PURE__ */ C("div", { children: [
-		Y,
-		Z,
-		/* @__PURE__ */ S("div", {
+	] }) : /* @__PURE__ */ T("div", { children: [
+		X,
+		Q,
+		/* @__PURE__ */ w("div", {
 			style: { overflowX: "auto" },
-			children: /* @__PURE__ */ C("table", {
-				style: m,
-				children: [/* @__PURE__ */ S("thead", { children: /* @__PURE__ */ S("tr", { children: U.map((e) => {
-					let n = A.fields.get(e);
-					return /* @__PURE__ */ C("th", {
-						style: M.headerStyle(e, p),
-						children: [n ? t(O, n, e, D.entities) : e, /* @__PURE__ */ S(_, {
+			children: /* @__PURE__ */ T("table", {
+				style: g,
+				children: [/* @__PURE__ */ w("thead", { children: /* @__PURE__ */ w("tr", { children: W.map((e) => {
+					let n = M.fields.get(e);
+					return /* @__PURE__ */ T("th", {
+						style: P.headerStyle(e, h),
+						children: [n ? t(A, n, e, k.entities) : e, /* @__PURE__ */ w(y, {
 							colId: e,
-							onMouseDown: M.onHandleMouseDown
+							onMouseDown: P.onHandleMouseDown
 						})]
 					}, e);
-				}) }) }), /* @__PURE__ */ S("tbody", { children: B.map((t, n) => {
-					let r = q ? e(t[q]) : "", i = W && K && r ? K.replace(/:\w+/, r) : void 0;
-					return /* @__PURE__ */ S("tr", { children: U.map((n) => {
-						let r = n === G, a = J.get(n), o = a ? a(t[n], t) : e(t[n]);
-						return /* @__PURE__ */ S("td", {
+				}) }) }), /* @__PURE__ */ w("tbody", { children: V.map((t, n) => {
+					let r = J ? e(t[J]) : "", i = G && q && r ? q.replace(/:\w+/, r) : void 0;
+					return /* @__PURE__ */ w("tr", { children: W.map((n) => {
+						let r = n === K, a = Y.get(n), o = a ? a(t[n], t) : e(t[n]);
+						return /* @__PURE__ */ w("td", {
 							title: typeof o == "string" ? o : void 0,
-							style: M.cellStyle(n, f),
-							children: r && i ? /* @__PURE__ */ S("a", {
+							style: P.cellStyle(n, m),
+							children: r && i ? /* @__PURE__ */ w("a", {
 								href: i,
 								style: {
 									color: "var(--accent-text)",
@@ -179,4 +181,4 @@ function w({ config: w, parentEntity: T, parentId: E, schema: D }) {
 	] });
 }
 //#endregion
-export { w as ChildrenTable };
+export { E as ChildrenTable };