@declarion/react 0.106.0 → 0.109.0

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

@@ -8,27 +8,29 @@ import { Btn as _ } from "../primitives/Btn.js";
 import { IconBtn as v } from "../primitives/IconBtn.js";
 import { useText as y } from "../../hooks/useText.js";
 import { SectionCard as b } from "../primitives/SectionCard.js";
-import { useResponsiveMode as x } from "../../hooks/useResponsiveMode.js";
-import { Spinner as S } from "../primitives/Spinner.js";
-import { DynamicIcon as C } from "../shared/DynamicIcon.js";
-import { useTabNavigate as w } from "../../hooks/useTabNavigate.js";
-import { applyRowState as T, defaultFlatForSlot as E } from "../../lib/actions.js";
-import { ENTITY_CHILDREN_KEY as D, useChildrenData as O } from "../../hooks/useChildrenData.js";
-import { useActionRunner as k } from "../actions/ActionRunner.js";
-import { renderField as A } from "../fields/index.js";
-import { dispatchAction as j } from "../../lib/action-dispatch.js";
-import { ResponsiveActionBar as M } from "../actions/ResponsiveActionBar.js";
+import { RetryButton as x } from "../primitives/RetryButton.js";
+import { useResponsiveMode as S } from "../../hooks/useResponsiveMode.js";
+import { Spinner as C } from "../primitives/Spinner.js";
+import { readDisplayState as w } from "../../lib/read-display-state.js";
+import { DynamicIcon as T } from "../shared/DynamicIcon.js";
+import { useTabNavigate as E } from "../../hooks/useTabNavigate.js";
+import { applyRowState as D, defaultFlatForSlot as O } from "../../lib/actions.js";
+import { ENTITY_CHILDREN_KEY as k, useChildrenData as A } from "../../hooks/useChildrenData.js";
+import { useActionRunner as j } from "../actions/ActionRunner.js";
+import { renderField as M } from "../fields/index.js";
+import { dispatchAction as N } from "../../lib/action-dispatch.js";
+import { ResponsiveActionBar as P } from "../actions/ResponsiveActionBar.js";
 import { useRowTenant as ee } from "../../hooks/useRowTenant.js";
-import { dataTableCellStyle as N, dataTableHeadCellStyle as te, dataTableStyle as P } from "../primitives/dataTableStyles.js";
-import { ActionButton as ne } from "../actions/ActionButton.js";
-import { useAssociatedData as F } from "../../hooks/useAssociatedData.js";
-import { RowActionsKebab as I } from "../actions/RowActionsKebab.js";
-import { AssociatedToolbar as L } from "./AssociatedToolbar.js";
-import { useCallback as R, useEffect as re, useId as z, useMemo as B, useRef as V, useState as H } from "react";
+import { dataTableCellStyle as F, dataTableHeadCellStyle as te, dataTableStyle as ne } from "../primitives/dataTableStyles.js";
+import { ActionButton as re } from "../actions/ActionButton.js";
+import { useAssociatedData as I } from "../../hooks/useAssociatedData.js";
+import { RowActionsKebab as L } from "../actions/RowActionsKebab.js";
+import { AssociatedToolbar as R } from "./AssociatedToolbar.js";
+import { useCallback as z, useEffect as B, useId as ie, useMemo as V, useRef as ae, useState as H } from "react";
 import { useQueryClient as U } from "@tanstack/react-query";
-import { Fragment as ie, jsx as W, jsxs as G } from "react/jsx-runtime";
+import { Fragment as oe, jsx as W, jsxs as G } from "react/jsx-runtime";
 //#region src/components/detail-layout/AssociatedBlock.tsx
-function ae(e) {
+function se(e) {
 	if (!e) return [];
 	let t = [];
 	for (let [n, r] of Object.entries(e)) (r.visibility ?? []).includes("list_row") && (r.association || r.href || n.startsWith("__") || t.push({
@@ -63,7 +65,7 @@ function K(t, n, r) {
 	}
 	return i;
 }
-function oe(e, t, n) {
+function ce(e, t, n) {
 	let r = e[n];
 	if (!r) return null;
 	let i = e[t], a = i?.children?.find((e) => e.entity === n);
@@ -91,7 +93,7 @@ function q(e, t, n, r, i) {
 	let s = r[o];
 	return typeof s == "string" || typeof s == "number" ? String(s) : "";
 }
-function se(e, t, n) {
+function le(e, t, n) {
 	let r = new Set(a(e));
 	return new Set(t.filter((t) => {
 		if (t === n || r.has(t)) return !1;
@@ -99,14 +101,14 @@ function se(e, t, n) {
 		return i ? o(i) : !1;
 	}));
 }
-function ce(e, t, n) {
+function ue(e, t, n) {
 	return new Set(t.filter((t) => {
 		if (t === n) return !1;
 		let r = e.fields.get(t);
 		return !(!r || r.auto);
 	}));
 }
-function le(e, t, n, r) {
+function de(e, t, n, r) {
 	let i = [];
 	for (let a of t) {
 		let t = n.fields.get(a);
@@ -121,7 +123,7 @@ function J({ node: e, ctx: t }) {
 	if (!r || t.isNew) return null;
 	let i = t.schema.entities[r];
 	if (!i) return null;
-	let a = e.foreign_key ?? oe(t.schema.entities, t.entityCode, r);
+	let a = e.foreign_key ?? ce(t.schema.entities, t.entityCode, r);
 	return a ? /* @__PURE__ */ W(Y, {
 		node: e,
 		ctx: t,
@@ -148,30 +150,30 @@ function Y({ node: e, ctx: t, assocCode: r, assocEntity: i, fkField: a }) {
 		if (e === a) return !1;
 		let t = i.fields.get(e);
 		return !(!t || t.primary || t.display?.is_listable === !1);
-	}), u = n(i, "update"), d = ee(i), f = e.interaction ?? "navigate", m = (f === "inline_edit" || f === "row_edit") && u && e.editable !== !1, h = o(i.display?.name_plural) || o(i.display?.name) || r, v = e.searchable === !0 || e.filters && e.filters.length > 0, x = q(i, a, t.entity, t.record, t.recordId), S = B(() => K(i.actions, a, x), [
+	}), u = n(i, "update"), d = ee(i), f = e.interaction ?? "navigate", m = (f === "inline_edit" || f === "row_edit") && u && e.editable !== !1, h = o(i.display?.name_plural) || o(i.display?.name) || r, v = e.searchable === !0 || e.filters && e.filters.length > 0, x = q(i, a, t.entity, t.record, t.recordId), S = V(() => K(i.actions, a, x), [
 		i.actions,
 		a,
 		x
-	]), D = B(() => {
+	]), C = V(() => {
 		let e = {};
 		for (let { code: t, action: n } of S) e[t] = n;
 		return e;
-	}, [S]), O = B(() => {
+	}, [S]), w = V(() => {
 		let e = i.action_layout ?? null;
-		return T(o, e ?? E(D, "list_toolbar"), D, void 0, {}, [], d);
+		return D(o, e ?? O(C, "list_toolbar"), C, void 0, {}, [], d);
 	}, [
 		o,
 		i.action_layout,
-		D,
+		C,
 		d
-	]), { run: A } = k(), N = w(), te = B(() => ({
+	]), { run: k } = j(), A = E(), M = V(() => ({
 		entity: i,
 		entityCode: r,
 		screenRoute: typeof window < "u" ? window.location.pathname : "",
 		selectedRows: [],
 		selectedIds: [],
 		t: o,
-		tabNavigate: (e, t) => N(e, {
+		tabNavigate: (e, t) => A(e, {
 			title: t?.title,
 			icon: t?.icon,
 			search: t?.search
@@ -181,29 +183,29 @@ function Y({ node: e, ctx: t, assocCode: r, assocEntity: i, fkField: a }) {
 		i,
 		r,
 		o,
-		N
-	]), P = U(), F = R(() => {
-		P.invalidateQueries({ predicate: (e) => {
+		A
+	]), F = U(), te = z(() => {
+		F.invalidateQueries({ predicate: (e) => {
 			let t = e.queryKey;
 			return t[0] === "entity-children" && t[3] === r;
 		} });
-	}, [P, r]), I = R((e, t) => {
-		let n = j(s, e, t, {}, r);
-		if (n !== null) return A({
+	}, [F, r]), ne = z((e, t) => {
+		let n = N(s, e, t, {}, r);
+		if (n !== null) return k({
 			action: t,
 			title: o(t.display?.name) || e,
 			execute: async (e) => {
 				let t = await p(n, l(e, void 0));
-				return F(), t;
+				return te(), t;
 			}
 		});
 	}, [
 		o,
 		s,
-		A,
+		k,
 		r,
-		F
-	]), [L, re] = H(0), z = /* @__PURE__ */ G("div", {
+		te
+	]), [I, L] = H(0), R = /* @__PURE__ */ G("div", {
 		style: {
 			display: "flex",
 			alignItems: "center",
@@ -212,28 +214,28 @@ function Y({ node: e, ctx: t, assocCode: r, assocEntity: i, fkField: a }) {
 			minWidth: 0,
 			justifyContent: "flex-end"
 		},
-		children: [i.action_layout ? O.length > 0 && /* @__PURE__ */ W(M, {
+		children: [i.action_layout ? w.length > 0 && /* @__PURE__ */ W(P, {
 			kind: "toolbar",
-			layout: O,
-			entityActions: D,
-			onRun: I,
-			widgetContext: te,
+			layout: w,
+			entityActions: C,
+			onRun: ne,
+			widgetContext: M,
 			ariaLabel: o("record.associated.toolbar_actions", "{name} toolbar actions", { name: h })
-		}) : S.map(({ code: e, action: t }) => /* @__PURE__ */ W(ne, {
+		}) : S.map(({ code: e, action: t }) => /* @__PURE__ */ W(re, {
 			actionCode: e,
 			action: t,
 			entityCode: r,
 			variant: "ghost",
 			size: "sm",
-			onSuccess: F
+			onSuccess: te
 		}, e)), m && /* @__PURE__ */ W(_, {
 			kind: "ghost",
 			size: "xs",
 			icon: /* @__PURE__ */ W(g.plus, { size: 12 }),
-			onClick: () => re((e) => e + 1),
+			onClick: () => L((e) => e + 1),
 			children: o("record.row.add", "Add row")
 		})]
-	}), V = v ? /* @__PURE__ */ W(X, {
+	}), B = v ? /* @__PURE__ */ W(X, {
 		entityCode: r,
 		entity: i,
 		parentEntity: t.entityCode,
@@ -246,8 +248,8 @@ function Y({ node: e, ctx: t, assocCode: r, assocEntity: i, fkField: a }) {
 		searchable: e.searchable,
 		filterFields: e.filters,
 		sort: e.sort,
-		startDraftSignal: L
-	}) : /* @__PURE__ */ W(ue, {
+		startDraftSignal: I
+	}) : /* @__PURE__ */ W(fe, {
 		entityCode: r,
 		entity: i,
 		parentEntity: t.entityCode,
@@ -258,7 +260,7 @@ function Y({ node: e, ctx: t, assocCode: r, assocEntity: i, fkField: a }) {
 		interaction: f,
 		ctx: t,
 		sort: e.sort,
-		startDraftSignal: L
+		startDraftSignal: I
 	});
 	return t.withinCard ? /* @__PURE__ */ G("div", { children: [/* @__PURE__ */ W("div", {
 		style: {
@@ -266,21 +268,21 @@ function Y({ node: e, ctx: t, assocCode: r, assocEntity: i, fkField: a }) {
 			justifyContent: "flex-end",
 			marginBottom: 8
 		},
-		children: z
-	}), V] }) : /* @__PURE__ */ W(b, {
+		children: R
+	}), B] }) : /* @__PURE__ */ W(b, {
 		title: h,
-		icon: i.display?.icon ? /* @__PURE__ */ W(C, {
+		icon: i.display?.icon ? /* @__PURE__ */ W(T, {
 			name: i.display.icon,
 			size: 14
 		}) : void 0,
-		right: z,
-		children: V
+		right: R,
+		children: B
 	});
 }
-function ue({ entityCode: e, entity: t, parentEntity: n, parentId: r, foreignKey: i, columns: a, editable: o, interaction: s, ctx: c, sort: l, startDraftSignal: u }) {
-	let d = U(), { data: f, isLoading: p, isError: m } = O(n, r, e, i, l), h = f?.data ?? [], g = f?.$refs, _ = R(() => {
+function fe({ entityCode: e, entity: t, parentEntity: n, parentId: r, foreignKey: i, columns: a, editable: o, interaction: s, ctx: c, sort: l, startDraftSignal: u }) {
+	let d = U(), f = A(n, r, e, i, l), p = f.data, m = w(f), h = p?.data ?? [], g = p?.$refs, _ = z(() => {
 		d.invalidateQueries({ queryKey: [
-			D,
+			k,
 			n,
 			r,
 			e
@@ -302,21 +304,22 @@ function ue({ entityCode: e, entity: t, parentEntity: n, parentId: r, foreignKey
 		ctx: c,
 		rows: h,
 		refs: g,
-		isLoading: p,
-		isError: m,
+		isLoading: m.loading,
+		isError: m.error !== null,
+		onRetry: m.retry,
 		invalidateQuery: _,
 		startDraftSignal: u
 	});
 }
 function X({ entityCode: e, entity: t, parentEntity: n, parentId: r, foreignKey: i, columns: a, editable: o, interaction: s, ctx: c, searchable: l, filterFields: u, sort: d, startDraftSignal: f }) {
-	let p = y(), m = U(), [h, g] = H(""), [v, b] = H(""), [x, C] = H({}), w = V(void 0);
-	re(() => (w.current && clearTimeout(w.current), w.current = setTimeout(() => {
+	let p = y(), m = U(), [h, g] = H(""), [v, b] = H(""), [x, S] = H({}), T = ae(void 0);
+	B(() => (T.current && clearTimeout(T.current), T.current = setTimeout(() => {
 		b(h);
 	}, 300), () => {
-		w.current && clearTimeout(w.current);
+		T.current && clearTimeout(T.current);
 	}), [h]);
-	let T = R((e, t) => {
-		C((n) => {
+	let E = z((e, t) => {
+		S((n) => {
 			if (t === "__all__") {
 				let { [e]: t, ...r } = n;
 				return r;
@@ -326,13 +329,13 @@ function X({ entityCode: e, entity: t, parentEntity: n, parentId: r, foreignKey:
 				[e]: t
 			};
 		});
-	}, []), E = B(() => Object.keys(x).length > 0 ? x : void 0, [x]), { data: D, isLoading: O, isError: k, hasNextPage: A, fetchNextPage: j, isFetchingNextPage: M } = F(n, r, e, i, d, void 0, v || void 0, E), { rows: ee, refs: N } = B(() => {
-		if (!D?.pages) return {
+	}, []), D = V(() => Object.keys(x).length > 0 ? x : void 0, [x]), O = I(n, r, e, i, d, void 0, v || void 0, D), { data: k, hasNextPage: A, fetchNextPage: j, isFetchingNextPage: M } = O, N = w(O), { rows: P, refs: ee } = V(() => {
+		if (!k?.pages) return {
 			rows: [],
 			refs: void 0
 		};
 		let e = [], t;
-		for (let n of D.pages) if (e.push(...n.data), n.$refs) {
+		for (let n of k.pages) if (e.push(...n.data), n.$refs) {
 			if (!t) t = { ...n.$refs };
 			else for (let [e, r] of Object.entries(n.$refs)) t[e] = {
 				...t[e],
@@ -343,21 +346,21 @@ function X({ entityCode: e, entity: t, parentEntity: n, parentId: r, foreignKey:
 			rows: e,
 			refs: t
 		};
-	}, [D]), te = R(() => {
+	}, [k]), F = z(() => {
 		m.invalidateQueries({ predicate: (t) => {
 			let n = t.queryKey;
 			return n[0] === "entity-children" && n[3] === e;
 		} });
 	}, [m, e]);
 	return /* @__PURE__ */ G("div", { children: [
-		/* @__PURE__ */ W(L, {
+		/* @__PURE__ */ W(R, {
 			entity: t,
 			searchable: l,
 			filterFields: u,
 			searchValue: h,
 			onSearchChange: g,
 			filters: x,
-			onFilterChange: T,
+			onFilterChange: E,
 			allEntities: c.schema.entities
 		}),
 		/* @__PURE__ */ W(Z, {
@@ -369,11 +372,12 @@ function X({ entityCode: e, entity: t, parentEntity: n, parentId: r, foreignKey:
 			editable: o,
 			interaction: s,
 			ctx: c,
-			rows: ee,
-			refs: N,
-			isLoading: O,
-			isError: k,
-			invalidateQuery: te,
+			rows: P,
+			refs: ee,
+			isLoading: N.loading,
+			isError: N.error !== null,
+			onRetry: N.retry,
+			invalidateQuery: F,
 			startDraftSignal: f
 		}),
 		A && /* @__PURE__ */ W("div", {
@@ -381,7 +385,7 @@ function X({ entityCode: e, entity: t, parentEntity: n, parentId: r, foreignKey:
 			children: /* @__PURE__ */ W(_, {
 				kind: "ghost",
 				size: "xs",
-				icon: M ? /* @__PURE__ */ W(S, { size: 12 }) : void 0,
+				icon: M ? /* @__PURE__ */ W(C, { size: 12 }) : void 0,
 				onClick: () => j(),
 				disabled: M,
 				children: p("record.associated.load_more", "Load more")
@@ -389,44 +393,44 @@ function X({ entityCode: e, entity: t, parentEntity: n, parentId: r, foreignKey:
 		})
 	] });
 }
-function Z({ entityCode: e, entity: t, parentId: n, foreignKey: a, columns: o, editable: l, interaction: p, ctx: g, rows: _, refs: v, isLoading: b, isError: S, invalidateQuery: C, startDraftSignal: w }) {
-	let T = y(), E = y("errors"), D = x(), O = ee(t), A = D.isPhone && g.relatedRecordsPresentation === "table", j = o.find((e) => e !== a), M = B(() => p === "navigate" ? s(void 0, t, g.schema.screens) : null, [
+function Z({ entityCode: e, entity: t, parentId: n, foreignKey: a, columns: o, editable: l, interaction: p, ctx: g, rows: _, refs: v, isLoading: b, isError: C, onRetry: w, invalidateQuery: T, startDraftSignal: E }) {
+	let D = y(), O = y("errors"), k = S(), A = ee(t), M = k.isPhone && g.relatedRecordsPresentation === "table", N = o.find((e) => e !== a), P = V(() => p === "navigate" ? s(void 0, t, g.schema.screens) : null, [
 		p,
 		t,
 		g.schema.screens
-	]), N = B(() => l ? se(t, o, a) : /* @__PURE__ */ new Set(), [
+	]), F = V(() => l ? le(t, o, a) : /* @__PURE__ */ new Set(), [
 		o,
 		a,
 		t,
 		l
-	]), ne = B(() => ce(t, o, a), [
+	]), re = V(() => ue(t, o, a), [
 		o,
 		a,
 		t
-	]), F = B(() => {
+	]), I = V(() => {
 		let e = /* @__PURE__ */ new Map();
 		for (let n of _) {
 			let i = r(t, n);
 			e.set(f(i), i);
 		}
 		return e;
-	}, [_, t]), I = B(() => {
+	}, [_, t]), L = V(() => {
 		let e = /* @__PURE__ */ new Map();
 		for (let n of _) {
 			let i = n.$row_version;
 			typeof i == "string" && i !== "" && e.set(f(r(t, n)), i);
 		}
 		return e;
-	}, [_, t]), L = B(() => ae(t.actions), [t.actions]), [z, U] = H(null), [ie, K] = H(null), [oe, q] = H([]), [J, Y] = H({}), ue = V(J);
-	ue.current = J;
-	let X = V({});
-	re(() => {
+	}, [_, t]), R = V(() => se(t.actions), [t.actions]), [ie, U] = H(null), [oe, K] = H(null), [ce, q] = H([]), [J, Y] = H({}), fe = ae(J);
+	fe.current = J;
+	let X = ae({});
+	B(() => {
 		let e = X.current;
 		return () => {
 			for (let t of Object.values(e)) clearTimeout(t);
 		};
 	}, []);
-	let [Z, Q] = H(null), [pe, $] = H([]), [ge, _e] = H(!1), { run: ve } = k(), [ye, be] = H(/* @__PURE__ */ new Set()), xe = R(async (t, n, r) => {
+	let [Z, Q] = H(null), [he, $] = H([]), [ve, ye] = H(!1), { run: be } = j(), [xe, Se] = H(/* @__PURE__ */ new Set()), Ce = z(async (t, n, r) => {
 		Y((e) => ({
 			...e,
 			[t]: {
@@ -436,11 +440,11 @@ function Z({ entityCode: e, entity: t, parentId: n, foreignKey: a, columns: o, e
 			}
 		}));
 		try {
-			let i = I.get(t), a = i ? {
+			let i = L.get(t), a = i ? {
 				...n,
 				$row_version: i
 			} : n;
-			return await m(e, F.get(t) ?? t, a), Y((e) => {
+			return await m(e, I.get(t) ?? t, a), Y((e) => {
 				let n = e[t];
 				if (!n) return e;
 				if (n.ver > r) return {
@@ -452,9 +456,9 @@ function Z({ entityCode: e, entity: t, parentId: n, foreignKey: a, columns: o, e
 				};
 				let { [t]: i, ...a } = e;
 				return a;
-			}), C(), !0;
+			}), T(), !0;
 		} catch (e) {
-			let n = h(E, e);
+			let n = h(O, e);
 			return Y((e) => ({
 				...e,
 				[t]: {
@@ -466,11 +470,11 @@ function Z({ entityCode: e, entity: t, parentId: n, foreignKey: a, columns: o, e
 		}
 	}, [
 		e,
-		E,
-		C,
-		F,
-		I
-	]), Se = R((e, t, n) => {
+		O,
+		T,
+		I,
+		L
+	]), we = z((e, t, n) => {
 		Y((r) => {
 			let i = r[e] ?? {
 				buffer: {},
@@ -489,10 +493,10 @@ function Z({ entityCode: e, entity: t, parentId: n, foreignKey: a, columns: o, e
 				}
 			};
 		}), p === "inline_edit" && (X.current[e] && clearTimeout(X.current[e]), X.current[e] = setTimeout(() => {
-			let t = ue.current[e];
-			t && Object.keys(t.buffer).length > 0 && xe(e, { ...t.buffer }, t.ver);
+			let t = fe.current[e];
+			t && Object.keys(t.buffer).length > 0 && Ce(e, { ...t.buffer }, t.ver);
 		}, 500));
-	}, [xe, p]), Ce = R(() => {
+	}, [Ce, p]), Te = z(() => {
 		let e = {};
 		e[a] = n;
 		for (let n of o) {
@@ -505,27 +509,27 @@ function Z({ entityCode: e, entity: t, parentId: n, foreignKey: a, columns: o, e
 		n,
 		o,
 		t.fields
-	]), we = V(w);
-	re(() => {
-		w !== void 0 && w !== we.current && (we.current = w, !Z && Ce());
+	]), Ee = ae(E);
+	B(() => {
+		E !== void 0 && E !== Ee.current && (Ee.current = E, !Z && Te());
 	}, [
-		w,
+		E,
 		Z,
-		Ce
+		Te
 	]);
-	let Te = R(async () => {
+	let De = z(async () => {
 		if (!Z) return;
-		let n = le(Z, o, t, a);
+		let n = de(Z, o, t, a);
 		if (n.length > 0) $(n);
 		else {
-			_e(!0);
+			ye(!0);
 			try {
-				await u(e, Z), Q(null), $([]), C();
+				await u(e, Z), Q(null), $([]), T();
 			} catch (e) {
-				let t = h(E, e);
+				let t = h(O, e);
 				$([`_error:${t}`]);
 			} finally {
-				_e(!1);
+				ye(!1);
 			}
 		}
 	}, [
@@ -534,69 +538,73 @@ function Z({ entityCode: e, entity: t, parentId: n, foreignKey: a, columns: o, e
 		t,
 		a,
 		e,
-		E,
-		C
-	]), Ee = R((e) => {
+		O,
+		T
+	]), Oe = z((e) => {
 		Y({}), q([]), K(e);
-	}, []), De = R(async (e) => {
-		let n = ue.current[e], i = n?.buffer ?? {};
+	}, []), ke = z(async (e) => {
+		let n = fe.current[e], i = n?.buffer ?? {};
 		if (Object.keys(i).length === 0) {
 			K(null), q([]);
 			return;
 		}
-		let s = le({
+		let s = de({
 			..._.find((n) => f(r(t, n)) === e) ?? {},
 			...i
 		}, o, t, a);
-		s.length > 0 ? q(s) : await xe(e, { ...i }, n?.ver ?? 0) && (K(null), q([]));
+		s.length > 0 ? q(s) : await Ce(e, { ...i }, n?.ver ?? 0) && (K(null), q([]));
 	}, [
 		_,
 		t,
 		o,
 		a,
-		xe
-	]), Oe = R((e) => {
+		Ce
+	]), Ae = z((e) => {
 		Y((t) => {
 			if (!t[e]) return t;
 			let { [e]: n, ...r } = t;
 			return r;
 		}), q([]), K(null);
-	}, []), ke = R((n, r) => {
-		let i = F.get(n) ?? n;
-		return ve({
+	}, []), je = z((n, r) => {
+		let i = I.get(n) ?? n;
+		return be({
 			action: t.actions?.__delete,
 			destructive: !0,
-			title: T(t.display?.name) || T("record.action.delete", "Delete"),
+			title: D(t.display?.name) || D("record.action.delete", "Delete"),
 			row: r,
 			entity: e,
 			execute: async () => {
-				be((e) => new Set(e).add(n));
+				Se((e) => new Set(e).add(n));
 				try {
 					return await d(e, i);
 				} finally {
-					be((e) => {
+					Se((e) => {
 						let t = new Set(e);
 						return t.delete(n), t;
 					});
 				}
 			},
-			onSuccess: () => C()
+			onSuccess: () => T()
 		});
 	}, [
-		T,
-		ve,
+		D,
+		be,
 		t,
 		e,
-		C,
-		F
+		T,
+		I
 	]);
-	if (S) return /* @__PURE__ */ W("div", {
+	if (C) return /* @__PURE__ */ G("div", {
 		style: {
 			fontSize: 12.5,
 			color: "var(--danger)",
 			padding: "8px 0"
 		},
-		children: E("record.related_rows_unreadable", "The related records could not be loaded.")
+		children: [
+			O("record.related_rows_unreadable", "The related records could not be loaded."),
+			" ",
+			/* @__PURE__ */ W(x, { onRetry: w })
+		]
 	});
 	if (b) return /* @__PURE__ */ G("div", {
 		style: {
@@ -615,138 +623,138 @@ function Z({ entityCode: e, entity: t, parentId: n, foreignKey: a, columns: o, e
 			borderRadius: "var(--radius-md)"
 		} })]
 	});
-	let Ae = _.length === 0 && !Z;
-	return D.isPhone && !A ? /* @__PURE__ */ G("div", { children: [Ae && /* @__PURE__ */ W("div", {
+	let Me = _.length === 0 && !Z;
+	return k.isPhone && !M ? /* @__PURE__ */ G("div", { children: [Me && /* @__PURE__ */ W("div", {
 		style: {
 			fontSize: 12.5,
 			color: "var(--text-3)",
 			padding: "12px 0"
 		},
-		children: T("record.related.empty", "No records yet.")
-	}), !Ae && /* @__PURE__ */ G("div", {
+		children: D("record.related.empty", "No records yet.")
+	}), !Me && /* @__PURE__ */ G("div", {
 		style: {
 			display: "flex",
 			flexDirection: "column",
 			gap: 10
 		},
 		children: [_.map((n) => {
-			let i = f(r(t, n)), a = ye.has(i), s = J[i], u = M && i ? M.replace(/:\w+/, i) : void 0;
-			return /* @__PURE__ */ W(de, {
+			let i = f(r(t, n)), a = xe.has(i), s = J[i], u = P && i ? P.replace(/:\w+/, i) : void 0;
+			return /* @__PURE__ */ W(pe, {
 				rowId: i,
 				row: n,
 				entity: t,
 				entities: g.schema.entities,
 				screens: g.schema.screens,
 				columns: o,
-				editableColumns: N,
-				editable: l && c(t, n, O.tenantId),
+				editableColumns: F,
+				editable: l && c(t, n, A.tenantId),
 				interaction: p,
-				isEditing: ie === i,
-				editErrors: oe,
+				isEditing: oe === i,
+				editErrors: ce,
 				isDeleting: a,
-				activeCell: z,
+				activeCell: ie,
 				setActiveCell: U,
 				rowState: s,
-				onCellChange: Se,
-				onDeleteClick: (e) => void ke(e, n),
-				onStartEdit: Ee,
-				onConfirmEdit: De,
-				onCancelEdit: Oe,
+				onCellChange: we,
+				onDeleteClick: (e) => void je(e, n),
+				onStartEdit: Oe,
+				onConfirmEdit: ke,
+				onCancelEdit: Ae,
 				refs: v,
-				identityCol: j,
+				identityCol: N,
 				href: u,
-				rowActions: L,
+				rowActions: R,
 				entityCode: e,
-				onRowActionSuccess: C
+				onRowActionSuccess: T
 			}, i);
-		}), Z && /* @__PURE__ */ W(he, {
+		}), Z && /* @__PURE__ */ W(_e, {
 			draftRow: Z,
 			entity: t,
 			columns: o,
-			editableColumns: ne,
+			editableColumns: re,
 			foreignKey: a,
-			draftErrors: pe,
-			draftSaving: ge,
+			draftErrors: he,
+			draftSaving: ve,
 			onChange: (e, t) => Q((n) => n && {
 				...n,
 				[e]: t
 			}),
-			onConfirm: Te,
+			onConfirm: De,
 			onCancel: () => {
 				Q(null), $([]);
 			},
 			refs: v
 		})]
-	})] }) : /* @__PURE__ */ G("div", { children: [Ae && /* @__PURE__ */ W("div", {
+	})] }) : /* @__PURE__ */ G("div", { children: [Me && /* @__PURE__ */ W("div", {
 		style: {
 			fontSize: 12.5,
 			color: "var(--text-3)",
 			padding: "12px 0"
 		},
-		children: T("record.related.empty", "No records yet.")
-	}), !Ae && /* @__PURE__ */ W("div", {
+		children: D("record.related.empty", "No records yet.")
+	}), !Me && /* @__PURE__ */ W("div", {
 		style: { overflowX: "auto" },
 		children: /* @__PURE__ */ G("table", {
-			style: P,
+			style: ne,
 			children: [/* @__PURE__ */ W("thead", { children: /* @__PURE__ */ G("tr", { children: [
 				o.map((e) => {
 					let n = t.fields.get(e);
 					return /* @__PURE__ */ W("th", {
 						style: te,
-						children: n ? i(T, n, e, g.schema.entities) : e
+						children: n ? i(D, n, e, g.schema.entities) : e
 					}, e);
 				}),
 				l && /* @__PURE__ */ W("th", { style: {
 					height: 30,
 					width: 72
 				} }),
-				!l && L.length > 0 && /* @__PURE__ */ W("th", { style: {
+				!l && R.length > 0 && /* @__PURE__ */ W("th", { style: {
 					height: 30,
 					width: 40
 				} })
 			] }) }), /* @__PURE__ */ G("tbody", { children: [_.map((n) => {
-				let i = f(r(t, n)), a = ye.has(i), s = J[i], u = M && i ? M.replace(/:\w+/, i) : void 0;
-				return /* @__PURE__ */ W(fe, {
+				let i = f(r(t, n)), a = xe.has(i), s = J[i], u = P && i ? P.replace(/:\w+/, i) : void 0;
+				return /* @__PURE__ */ W(me, {
 					rowId: i,
 					row: n,
 					entity: t,
 					entities: g.schema.entities,
 					screens: g.schema.screens,
 					columns: o,
-					editableColumns: N,
-					editable: l && c(t, n, O.tenantId),
+					editableColumns: F,
+					editable: l && c(t, n, A.tenantId),
 					interaction: p,
-					isEditing: ie === i,
-					editErrors: oe,
+					isEditing: oe === i,
+					editErrors: ce,
 					isDeleting: a,
-					activeCell: z,
+					activeCell: ie,
 					setActiveCell: U,
 					rowState: s,
-					onCellChange: Se,
-					onDeleteClick: (e) => void ke(e, n),
-					onStartEdit: Ee,
-					onConfirmEdit: De,
-					onCancelEdit: Oe,
+					onCellChange: we,
+					onDeleteClick: (e) => void je(e, n),
+					onStartEdit: Oe,
+					onConfirmEdit: ke,
+					onCancelEdit: Ae,
 					refs: v,
-					identityCol: j,
+					identityCol: N,
 					href: u,
-					rowActions: L,
+					rowActions: R,
 					entityCode: e,
-					onRowActionSuccess: C
+					onRowActionSuccess: T
 				}, i);
-			}), Z && /* @__PURE__ */ W(me, {
+			}), Z && /* @__PURE__ */ W(ge, {
 				draftRow: Z,
 				entity: t,
 				columns: o,
-				editableColumns: ne,
+				editableColumns: re,
 				foreignKey: a,
-				draftErrors: pe,
-				draftSaving: ge,
+				draftErrors: he,
+				draftSaving: ve,
 				onChange: (e, t) => Q((n) => n && {
 					...n,
 					[e]: t
 				}),
-				onConfirm: Te,
+				onConfirm: De,
 				onCancel: () => {
 					Q(null), $([]);
 				},
@@ -755,15 +763,15 @@ function Z({ entityCode: e, entity: t, parentId: n, foreignKey: a, columns: o, e
 		})
 	})] });
 }
-function de({ rowId: e, row: n, entity: r, entities: a, screens: o, columns: s, editableColumns: c, editable: l, interaction: u, isEditing: d, editErrors: f, isDeleting: p, rowState: m, onCellChange: h, onDeleteClick: _, onStartEdit: b, onConfirmEdit: x, onCancelEdit: C, refs: w, identityCol: T, href: E, rowActions: D, onRowActionSuccess: O }) {
-	let k = y(), j = z(), M = B(() => !m || Object.keys(m.buffer).length === 0 ? n : {
+function pe({ rowId: e, row: n, entity: r, entities: a, screens: o, columns: s, editableColumns: c, editable: l, interaction: u, isEditing: d, editErrors: f, isDeleting: p, rowState: m, onCellChange: h, onDeleteClick: _, onStartEdit: b, onConfirmEdit: x, onCancelEdit: S, refs: w, identityCol: T, href: E, rowActions: D, onRowActionSuccess: O }) {
+	let k = y(), A = ie(), j = V(() => !m || Object.keys(m.buffer).length === 0 ? n : {
 		...n,
 		...m.buffer
 	}, [n, m]);
 	if (u === "row_edit" && d) {
 		let t = m?.error ? [...f, `_error:${m.error}`] : f;
-		return /* @__PURE__ */ W(pe, {
-			values: M,
+		return /* @__PURE__ */ W(he, {
+			values: j,
 			entity: r,
 			columns: s,
 			editableColumns: c,
@@ -771,7 +779,7 @@ function de({ rowId: e, row: n, entity: r, entities: a, screens: o, columns: s,
 			saving: m?.saving ?? !1,
 			onChange: (t, n) => h(e, t, n),
 			onConfirm: () => x(e),
-			onCancel: () => C(e),
+			onCancel: () => S(e),
 			refs: w
 		});
 	}
@@ -791,17 +799,17 @@ function de({ rowId: e, row: n, entity: r, entities: a, screens: o, columns: s,
 				gap: 12
 			},
 			children: s.map((n) => {
-				let s = r.fields.get(n), d = l && u === "inline_edit" && c.has(n), f = E && n === T, p = s ? i(k, s, n, a) : n, m = `${j}-${e}-${n}`, g = `${m}-label`, _ = {
+				let s = r.fields.get(n), d = l && u === "inline_edit" && c.has(n), f = E && n === T, p = s ? i(k, s, n, a) : n, m = `${A}-${e}-${n}`, g = `${m}-label`, _ = {
 					fontSize: 11.5,
 					fontWeight: 600,
 					color: "var(--text-3)"
-				}, v = s ? A({
+				}, v = s ? M({
 					field: s,
 					fieldName: n,
-					value: M[n],
+					value: j[n],
 					mode: d ? "edit" : "display",
 					onChange: d ? (t) => h(e, n, t) : void 0,
-					record: M,
+					record: j,
 					refs: w,
 					compact: d,
 					entity: r,
@@ -810,7 +818,7 @@ function de({ rowId: e, row: n, entity: r, entities: a, screens: o, columns: s,
 					fieldId: m,
 					labelId: g,
 					t: k
-				}) : t(M[n]);
+				}) : t(j[n]);
 				return /* @__PURE__ */ G("div", {
 					style: {
 						display: "flex",
@@ -851,8 +859,8 @@ function de({ rowId: e, row: n, entity: r, entities: a, screens: o, columns: s,
 				justifyContent: "flex-end",
 				gap: 6
 			},
-			children: [l && /* @__PURE__ */ G(ie, { children: [
-				m?.saving && /* @__PURE__ */ W(S, { size: 12 }),
+			children: [l && /* @__PURE__ */ G(oe, { children: [
+				m?.saving && /* @__PURE__ */ W(C, { size: 12 }),
 				m?.error && /* @__PURE__ */ W("span", {
 					style: {
 						fontSize: 11,
@@ -873,75 +881,75 @@ function de({ rowId: e, row: n, entity: r, entities: a, screens: o, columns: s,
 					onClick: () => _(e),
 					title: k("record.row.delete", "Delete row")
 				})
-			] }), !l && D && D.length > 0 && /* @__PURE__ */ W(I, {
+			] }), !l && D && D.length > 0 && /* @__PURE__ */ W(L, {
 				entity: r,
 				actions: D,
 				objectIds: [e],
-				row: M,
+				row: j,
 				onSuccess: O
 			})]
 		})]
 	});
 }
-function fe({ rowId: e, row: n, entity: r, entities: i, screens: a, columns: o, editableColumns: s, editable: c, interaction: l, isEditing: u, editErrors: d, isDeleting: f, activeCell: p, setActiveCell: m, rowState: h, onCellChange: _, onDeleteClick: b, onStartEdit: x, onConfirmEdit: C, onCancelEdit: w, refs: T, identityCol: E, href: D, rowActions: O, onRowActionSuccess: k }) {
-	let j = y(), M = B(() => !h || Object.keys(h.buffer).length === 0 ? n : {
+function me({ rowId: e, row: n, entity: r, entities: i, screens: a, columns: o, editableColumns: s, editable: c, interaction: l, isEditing: u, editErrors: d, isDeleting: f, activeCell: p, setActiveCell: m, rowState: h, onCellChange: _, onDeleteClick: b, onStartEdit: x, onConfirmEdit: S, onCancelEdit: w, refs: T, identityCol: E, href: D, rowActions: O, onRowActionSuccess: k }) {
+	let A = y(), j = V(() => !h || Object.keys(h.buffer).length === 0 ? n : {
 		...n,
 		...h.buffer
 	}, [n, h]);
 	if (l === "row_edit" && u) {
 		let t = h?.error ? [...d, `_error:${h.error}`] : d;
 		return /* @__PURE__ */ W(Q, {
-			values: M,
+			values: j,
 			entity: r,
 			columns: o,
 			editableColumns: s,
 			errors: t,
 			saving: h?.saving ?? !1,
 			onChange: (t, n) => _(e, t, n),
-			onConfirm: () => C(e),
+			onConfirm: () => S(e),
 			onCancel: () => w(e),
 			refs: T
 		});
 	}
-	let ee = N, te = {
+	let N = F, P = {
 		padding: "4px 4px",
 		borderBottom: "1px solid var(--divider)",
 		verticalAlign: "middle"
-	}, P = l === "inline_edit";
+	}, ee = l === "inline_edit";
 	return /* @__PURE__ */ G("tr", {
 		style: { opacity: f ? .5 : 1 },
 		children: [
 			o.map((n) => {
 				let o = r.fields.get(n), c = s.has(n);
-				if (P && p?.rowId === e && p?.col === n && c) return /* @__PURE__ */ W("td", {
-					style: te,
-					children: o ? A({
+				if (ee && p?.rowId === e && p?.col === n && c) return /* @__PURE__ */ W("td", {
+					style: P,
+					children: o ? M({
 						field: o,
 						fieldName: n,
-						value: M[n],
+						value: j[n],
 						mode: "edit",
 						onChange: (t) => _(e, n, t),
-						record: M,
+						record: j,
 						refs: T,
 						compact: !0,
-						t: j
-					}) : t(M[n])
+						t: A
+					}) : t(j[n])
 				}, n);
-				let l = D && n === E, u = o ? A({
+				let l = D && n === E, u = o ? M({
 					field: o,
 					fieldName: n,
-					value: M[n],
+					value: j[n],
 					mode: "display",
-					record: M,
+					record: j,
 					refs: T,
 					entity: r,
 					entities: i,
 					screens: l ? void 0 : a,
-					t: j
-				}) : t(M[n]), d = P && c && !f;
+					t: A
+				}) : t(j[n]), d = ee && c && !f;
 				return /* @__PURE__ */ W("td", {
 					style: {
-						...ee,
+						...N,
 						cursor: d ? "pointer" : "default"
 					},
 					onClick: d ? () => m({
@@ -974,7 +982,7 @@ function fe({ rowId: e, row: n, entity: r, entities: i, screens: a, columns: o,
 						gap: 4
 					},
 					children: [
-						h?.saving && /* @__PURE__ */ W(S, { size: 12 }),
+						h?.saving && /* @__PURE__ */ W(C, { size: 12 }),
 						h?.error && /* @__PURE__ */ W("span", {
 							style: {
 								fontSize: 11,
@@ -987,13 +995,13 @@ function fe({ rowId: e, row: n, entity: r, entities: i, screens: a, columns: o,
 							size: 24,
 							icon: /* @__PURE__ */ W(g.edit, { size: 12 }),
 							onClick: () => x(e),
-							title: j("record.row.edit", "Edit row")
+							title: A("record.row.edit", "Edit row")
 						}),
 						/* @__PURE__ */ W(v, {
 							size: 24,
 							icon: /* @__PURE__ */ W(g.trash, { size: 12 }),
 							onClick: () => b(e),
-							title: j("record.row.delete", "Delete row")
+							title: A("record.row.delete", "Delete row")
 						})
 					]
 				})
@@ -1004,11 +1012,11 @@ function fe({ rowId: e, row: n, entity: r, entities: i, screens: a, columns: o,
 					borderBottom: "1px solid var(--divider)",
 					verticalAlign: "middle"
 				},
-				children: /* @__PURE__ */ W(I, {
+				children: /* @__PURE__ */ W(L, {
 					entity: r,
 					actions: O,
 					objectIds: [e],
-					row: M,
+					row: j,
 					onSuccess: k
 				})
 			})
@@ -1044,7 +1052,7 @@ function Q({ values: e, entity: n, columns: r, editableColumns: i, errors: a, sa
 				title: c ? f("record.row.field_required", "{field} is required", { field: r }) : void 0,
 				children: /* @__PURE__ */ W("div", {
 					style: _,
-					children: a ? A({
+					children: a ? M({
 						field: a,
 						fieldName: r,
 						value: e[r],
@@ -1083,7 +1091,7 @@ function Q({ values: e, entity: n, columns: r, editableColumns: i, errors: a, sa
 					}),
 					/* @__PURE__ */ W(v, {
 						size: 24,
-						icon: W(o ? S : g.check, { size: 12 }),
+						icon: W(o ? C : g.check, { size: 12 }),
 						onClick: c,
 						title: f("record.row.confirm", "Confirm (Enter)")
 					}),
@@ -1098,8 +1106,8 @@ function Q({ values: e, entity: n, columns: r, editableColumns: i, errors: a, sa
 		})]
 	});
 }
-function pe({ values: e, entity: n, columns: r, editableColumns: a, errors: o, saving: s, onChange: c, onConfirm: l, onCancel: u, refs: d, accent: f }) {
-	let p = y(), m = z(), h = o.find((e) => e.startsWith("_error:")), _ = new Set(o.filter((e) => !e.startsWith("_error:")));
+function he({ values: e, entity: n, columns: r, editableColumns: a, errors: o, saving: s, onChange: c, onConfirm: l, onCancel: u, refs: d, accent: f }) {
+	let p = y(), m = ie(), h = o.find((e) => e.startsWith("_error:")), _ = new Set(o.filter((e) => !e.startsWith("_error:")));
 	return /* @__PURE__ */ G("div", {
 		style: {
 			border: "1px solid var(--border)",
@@ -1148,7 +1156,7 @@ function pe({ values: e, entity: n, columns: r, editableColumns: a, errors: o, s
 							borderRadius: l ? "var(--radius-sm)" : 0
 						},
 						title: l ? p("record.row.field_required", "{field} is required", { field: r }) : void 0,
-						children: s ? o ? A({
+						children: s ? o ? M({
 							field: o,
 							fieldName: r,
 							value: e[r],
@@ -1185,7 +1193,7 @@ function pe({ values: e, entity: n, columns: r, editableColumns: a, errors: o, s
 				}),
 				/* @__PURE__ */ W(v, {
 					size: 32,
-					icon: W(s ? S : g.check, { size: 14 }),
+					icon: W(s ? C : g.check, { size: 14 }),
 					onClick: l,
 					title: p("record.row.confirm", "Confirm (Enter)")
 				}),
@@ -1199,8 +1207,8 @@ function pe({ values: e, entity: n, columns: r, editableColumns: a, errors: o, s
 		})]
 	});
 }
-function me({ draftRow: e, entity: t, columns: n, editableColumns: r, foreignKey: i, draftErrors: a, draftSaving: o, onChange: s, onConfirm: c, onCancel: l, refs: u }) {
-	let d = B(() => {
+function ge({ draftRow: e, entity: t, columns: n, editableColumns: r, foreignKey: i, draftErrors: a, draftSaving: o, onChange: s, onConfirm: c, onCancel: l, refs: u }) {
+	let d = V(() => {
 		let e = new Set(r);
 		return e.delete(i), e;
 	}, [r, i]);
@@ -1218,12 +1226,12 @@ function me({ draftRow: e, entity: t, columns: n, editableColumns: r, foreignKey
 		accent: !0
 	});
 }
-function he({ draftRow: e, entity: t, columns: n, editableColumns: r, foreignKey: i, draftErrors: a, draftSaving: o, onChange: s, onConfirm: c, onCancel: l, refs: u }) {
-	let d = B(() => {
+function _e({ draftRow: e, entity: t, columns: n, editableColumns: r, foreignKey: i, draftErrors: a, draftSaving: o, onChange: s, onConfirm: c, onCancel: l, refs: u }) {
+	let d = V(() => {
 		let e = new Set(r);
 		return e.delete(i), e;
 	}, [r, i]);
-	return /* @__PURE__ */ W(pe, {
+	return /* @__PURE__ */ W(he, {
 		values: e,
 		entity: t,
 		columns: n,
@@ -1238,4 +1246,4 @@ function he({ draftRow: e, entity: t, columns: n, editableColumns: r, foreignKey
 	});
 }
 //#endregion
-export { J as AssociatedBlock, ce as associatedDraftEditableColumns, se as associatedEditableColumns, q as associatedParentValue, le as findMissingRequiredAssociatedFields, oe as resolveAssociatedForeignKey, ae as resolveAssociatedRowActions, K as resolveAssociatedToolbarActions };
+export { J as AssociatedBlock, ue as associatedDraftEditableColumns, le as associatedEditableColumns, q as associatedParentValue, de as findMissingRequiredAssociatedFields, ce as resolveAssociatedForeignKey, se as resolveAssociatedRowActions, K as resolveAssociatedToolbarActions };