@declarion/react 0.65.1 → 0.66.1

package/dist-lib/{DraggableChildrenTable-Dd5SeuF6.js → components/detail-layout/DraggableChildrenTable.js}

@@ -1,16 +1,19 @@
-import { on as e, wn as t, wt as n } from "./useCurrentScreen-BZOHBGQZ.js";
-import { t as r } from "./Icons-lt-7lhYR.js";
-import { n as i, r as a } from "./CopyButton-DRIT_f0k.js";
-import { f as o } from "./PropertyGridEditor-XrP6TZ5s.js";
-import { n as s, r as c, t as l } from "./dataTableStyles-vwD1mVOP.js";
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { fieldDisplayName as t } from "../../types/schema.js";
+import { Icon as n } from "../primitives/Icons.js";
+import { Btn as r } from "../primitives/Btn.js";
+import { IconBtn as i } from "../primitives/IconBtn.js";
+import { useText as a } from "../../hooks/useText.js";
+import { renderField as o } from "../fields/index.js";
+import { dataTableCellStyle as s, dataTableHeadCellStyle as c, dataTableStyle as l } from "../primitives/dataTableStyles.js";
 import { useCallback as u, useMemo as d, useRef as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { DndContext as h, PointerSensor as g, closestCenter as _, useSensor as v, useSensors as y } from "@dnd-kit/core";
 import { SortableContext as b, useSortable as x, verticalListSortingStrategy as S } from "@dnd-kit/sortable";
 import { CSS as C } from "@dnd-kit/utilities";
 //#region src/components/detail-layout/DraggableChildrenTable.tsx
-function w({ config: t, childEntity: i, schema: o, rows: l, onChange: x, validationErrors: C, refs: w }) {
-	let E = n(), D = f(null), O = t.position_field, k = t.columns, A = y(v(g, { activationConstraint: { distance: 5 } })), j = new Set(Array.isArray(t.foreign_key) ? t.foreign_key : [t.foreign_key]), M = k.filter((e) => {
+function w({ config: e, childEntity: i, schema: o, rows: s, onChange: x, validationErrors: C, refs: w }) {
+	let E = a(), D = f(null), O = e.position_field, k = e.columns, A = y(v(g, { activationConstraint: { distance: 5 } })), j = new Set(Array.isArray(e.foreign_key) ? e.foreign_key : [e.foreign_key]), M = k.filter((e) => {
 		if (j.has(e) || e === O) return !1;
 		let t = i.fields.get(e);
 		return !(!t || t.auto || t.primary || t.source);
@@ -18,56 +21,56 @@ function w({ config: t, childEntity: i, schema: o, rows: l, onChange: x, validat
 		if (e === O) return !0;
 		let t = i.fields.get(e);
 		return t && (t.auto || t.primary || t.source);
-	})), P = k.filter((e) => e !== O), F = d(() => l.filter((e) => !e._deleted).map((e) => e._key), [l]), I = u((e, t, n) => {
-		x(l.map((r) => r._key === e ? {
+	})), P = k.filter((e) => e !== O), F = d(() => s.filter((e) => !e._deleted).map((e) => e._key), [s]), I = u((e, t, n) => {
+		x(s.map((r) => r._key === e ? {
 			...r,
 			[t]: n,
 			_dirty: !0
 		} : r));
-	}, [l, x]), L = u(() => {
-		let e = l.filter((e) => !e._deleted).reduce((e, t) => {
+	}, [s, x]), L = u(() => {
+		let t = s.filter((e) => !e._deleted).reduce((e, t) => {
 			let n = typeof t[O] == "number" ? t[O] : -1;
 			return Math.max(e, n);
 		}, -1), n = {
 			_key: crypto.randomUUID(),
 			_dirty: !0,
-			[O]: e + 1
-		}, r = t.quick_add?.defaults ?? {};
+			[O]: t + 1
+		}, r = e.quick_add?.defaults ?? {};
 		for (let e of M) {
 			let t = i.fields.get(e);
 			t && (r[e] === void 0 ? t.default === void 0 ? t.type === "bool" && (n[e] = !1) : n[e] = t.default : n[e] = r[e]);
 		}
-		x([...l, n]);
+		x([...s, n]);
 	}, [
-		l,
+		s,
 		x,
 		M,
 		i,
-		t.quick_add?.defaults,
+		e.quick_add?.defaults,
 		O
 	]), R = u((e) => {
-		x(l.map((t) => t._key === e ? {
+		x(s.map((t) => t._key === e ? {
 			...t,
 			_deleted: !0
 		} : t));
-	}, [l, x]), z = u((e) => {
-		x(l.map((t) => t._key === e ? {
+	}, [s, x]), z = u((e) => {
+		x(s.map((t) => t._key === e ? {
 			...t,
 			_deleted: !1
 		} : t));
-	}, [l, x]), B = u((e) => {
+	}, [s, x]), B = u((e) => {
 		let { active: t, over: n } = e;
 		if (!n || t.id === n.id) return;
-		let r = l.filter((e) => !e._deleted), i = l.filter((e) => e._deleted), a = r.findIndex((e) => e._key === String(t.id)), o = r.findIndex((e) => e._key === String(n.id));
+		let r = s.filter((e) => !e._deleted), i = s.filter((e) => e._deleted), a = r.findIndex((e) => e._key === String(t.id)), o = r.findIndex((e) => e._key === String(n.id));
 		if (a === -1 || o === -1) return;
-		let s = [...r], [c] = s.splice(a, 1);
-		s.splice(o, 0, c), x([...s.map((e, t) => ({
+		let c = [...r], [l] = c.splice(a, 1);
+		c.splice(o, 0, l), x([...c.map((e, t) => ({
 			...e,
 			[O]: t,
 			_dirty: e[O] !== t || e._dirty
 		})), ...i]);
 	}, [
-		l,
+		s,
 		x,
 		O
 	]), V = u((e) => {
@@ -102,7 +105,7 @@ function w({ config: t, childEntity: i, schema: o, rows: l, onChange: x, validat
 				}
 			});
 		} else e.key === "Escape" && t.blur?.();
-	}, [L]), H = s;
+	}, [L]), H = c;
 	return /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("div", {
 		style: { overflowX: "auto" },
 		children: /* @__PURE__ */ p(h, {
@@ -111,7 +114,7 @@ function w({ config: t, childEntity: i, schema: o, rows: l, onChange: x, validat
 			onDragEnd: B,
 			children: /* @__PURE__ */ m("table", {
 				ref: D,
-				style: c,
+				style: l,
 				onKeyDown: V,
 				children: [/* @__PURE__ */ p("thead", { children: /* @__PURE__ */ m("tr", { children: [
 					/* @__PURE__ */ p("th", { style: {
@@ -119,12 +122,12 @@ function w({ config: t, childEntity: i, schema: o, rows: l, onChange: x, validat
 						width: 32,
 						padding: "0 4px"
 					} }),
-					P.map((t) => {
-						let n = i.fields.get(t);
+					P.map((e) => {
+						let n = i.fields.get(e);
 						return /* @__PURE__ */ p("th", {
 							style: H,
-							children: n ? e(E, n, t, o.entities) : t
-						}, t);
+							children: n ? t(E, n, e, o.entities) : e
+						}, e);
 					}),
 					/* @__PURE__ */ p("th", { style: {
 						...H,
@@ -133,7 +136,7 @@ function w({ config: t, childEntity: i, schema: o, rows: l, onChange: x, validat
 				] }) }), /* @__PURE__ */ p(b, {
 					items: F,
 					strategy: S,
-					children: /* @__PURE__ */ p("tbody", { children: l.map((e) => /* @__PURE__ */ p(T, {
+					children: /* @__PURE__ */ p("tbody", { children: s.map((e) => /* @__PURE__ */ p(T, {
 						row: e,
 						columns: P,
 						editableColumns: M,
@@ -150,25 +153,25 @@ function w({ config: t, childEntity: i, schema: o, rows: l, onChange: x, validat
 		})
 	}), /* @__PURE__ */ p("div", {
 		style: { marginTop: 8 },
-		children: /* @__PURE__ */ p(a, {
+		children: /* @__PURE__ */ p(r, {
 			kind: "ghost",
 			size: "xs",
-			icon: /* @__PURE__ */ p(r.plus, { size: 12 }),
+			icon: /* @__PURE__ */ p(n.plus, { size: 12 }),
 			onClick: L,
 			children: E("record.row.add", "Add row")
 		})
 	})] });
 }
-function T({ row: e, columns: a, editableColumns: s, displayOnlyColumns: c, childEntity: u, validationErrors: d, refs: f, onCellChange: h, onDelete: g, onUndoDelete: _ }) {
-	let v = n(), y = !!e._deleted, b = d?.[e._key], { attributes: S, listeners: w, setNodeRef: T, transform: E, transition: D, isDragging: O } = x({
-		id: e._key,
+function T({ row: t, columns: r, editableColumns: c, displayOnlyColumns: l, childEntity: u, validationErrors: d, refs: f, onCellChange: h, onDelete: g, onUndoDelete: _ }) {
+	let v = a(), y = !!t._deleted, b = d?.[t._key], { attributes: S, listeners: w, setNodeRef: T, transform: E, transition: D, isDragging: O } = x({
+		id: t._key,
 		disabled: y
 	}), k = {
 		transform: C.Translate.toString(E),
 		transition: D,
 		zIndex: O ? 10 : void 0,
 		opacity: O ? .5 : void 0
-	}, A = l, j = {
+	}, A = s, j = {
 		padding: "4px 4px",
 		borderBottom: "1px solid var(--divider)",
 		verticalAlign: "middle"
@@ -199,12 +202,12 @@ function T({ row: e, columns: a, editableColumns: s, displayOnlyColumns: c, chil
 					},
 					...S,
 					...w,
-					children: /* @__PURE__ */ p(r.grid, { size: 14 })
+					children: /* @__PURE__ */ p(n.grid, { size: 14 })
 				})
 			}),
-			a.map((n) => {
-				let r = u.fields.get(n), i = b?.includes(n), a = c.has(n), l = s.includes(n);
-				return y || a || !l ? /* @__PURE__ */ p("td", {
+			r.map((n) => {
+				let r = u.fields.get(n), i = b?.includes(n), a = l.has(n), s = c.includes(n);
+				return y || a || !s ? /* @__PURE__ */ p("td", {
 					style: {
 						...A,
 						textDecoration: y ? "line-through" : "none"
@@ -212,30 +215,30 @@ function T({ row: e, columns: a, editableColumns: s, displayOnlyColumns: c, chil
 					children: r ? o({
 						field: r,
 						fieldName: n,
-						value: e[n],
+						value: t[n],
 						mode: "display",
-						record: e,
+						record: t,
 						refs: f,
 						t: v
-					}) : t(e[n])
+					}) : e(t[n])
 				}, n) : /* @__PURE__ */ p("td", {
 					style: {
 						...j,
 						outline: i ? "1px solid var(--danger)" : "none",
 						outlineOffset: -1,
-						borderRadius: i ? 4 : 0
+						borderRadius: i ? "var(--radius-sm)" : 0
 					},
 					title: i ? v("record.row.field_required", "{field} is required", { field: n }) : void 0,
 					children: r ? o({
 						field: r,
 						fieldName: n,
-						value: e[n],
+						value: t[n],
 						mode: "edit",
-						onChange: (t) => h(e._key, n, t),
-						record: e,
+						onChange: (e) => h(t._key, n, e),
+						record: t,
 						refs: f,
 						t: v
-					}) : t(e[n])
+					}) : e(t[n])
 				}, n);
 			}),
 			/* @__PURE__ */ p("td", {
@@ -246,13 +249,13 @@ function T({ row: e, columns: a, editableColumns: s, displayOnlyColumns: c, chil
 				},
 				children: y ? /* @__PURE__ */ p(i, {
 					size: 24,
-					icon: /* @__PURE__ */ p(r.refresh, { size: 12 }),
-					onClick: () => _(e._key),
+					icon: /* @__PURE__ */ p(n.refresh, { size: 12 }),
+					onClick: () => _(t._key),
 					title: v("record.row.undo_delete", "Undo delete")
 				}) : /* @__PURE__ */ p(i, {
 					size: 24,
-					icon: /* @__PURE__ */ p(r.trash, { size: 12 }),
-					onClick: () => g(e._key),
+					icon: /* @__PURE__ */ p(n.trash, { size: 12 }),
+					onClick: () => g(t._key),
 					title: v("record.row.delete", "Delete row")
 				})
 			})

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

@@ -0,0 +1,341 @@
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { fieldDisplayName as t } from "../../types/schema.js";
+import { Icon as n } from "../primitives/Icons.js";
+import { Btn as r } from "../primitives/Btn.js";
+import { IconBtn as i } from "../primitives/IconBtn.js";
+import { useText as a } from "../../hooks/useText.js";
+import { useResponsiveMode as o } from "../../hooks/useResponsiveMode.js";
+import { renderField as s } from "../fields/index.js";
+import { dataTableHeadCellStyle as c, dataTableStyle as l } from "../primitives/dataTableStyles.js";
+import { useCallback as u, useRef as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/detail-layout/EditableChildrenTable.tsx
+function h({ config: h, childEntity: g, schema: _, rows: v, onChange: y, validationErrors: b, refs: x, forceTablePresentation: S = !1 }) {
+	let C = a(), w = o(), T = d(null), E = h.columns, D = h.position_field, O = new Set(Array.isArray(h.foreign_key) ? h.foreign_key : [h.foreign_key]), k = E.filter((e) => {
+		if (O.has(e) || h.position_field && e === h.position_field) return !1;
+		let t = g.fields.get(e);
+		return !(!t || t.auto || t.primary || t.source);
+	}), A = new Set(E.filter((e) => {
+		if (h.position_field && e === h.position_field) return !0;
+		let t = g.fields.get(e);
+		return t && (t.auto || t.primary || t.source);
+	})), j = u((e, t, n) => {
+		y(v.map((r) => r._key === e ? {
+			...r,
+			[t]: n,
+			_dirty: !0
+		} : r));
+	}, [v, y]), M = u(() => {
+		let e = {
+			_key: crypto.randomUUID(),
+			_dirty: !0
+		};
+		if (D) {
+			let t = v.filter((e) => !e._deleted).reduce((e, t) => {
+				let n = typeof t[D] == "number" ? t[D] : -1;
+				return Math.max(e, n);
+			}, -1);
+			e[D] = t + 1;
+		}
+		let t = h.quick_add?.defaults ?? {};
+		for (let n of k) {
+			let r = g.fields.get(n);
+			r && (t[n] === void 0 ? r.default === void 0 ? r.type === "bool" && (e[n] = !1) : e[n] = r.default : e[n] = t[n]);
+		}
+		y([...v, e]);
+	}, [
+		v,
+		y,
+		k,
+		g,
+		h.quick_add?.defaults,
+		D
+	]), N = u((e) => {
+		y(v.map((t) => t._key === e ? {
+			...t,
+			_deleted: !0
+		} : t));
+	}, [v, y]), P = u((e) => {
+		y(v.map((t) => t._key === e ? {
+			...t,
+			_deleted: !1
+		} : t));
+	}, [v, y]), F = u((e, t) => {
+		if (!D) return;
+		let n = v.filter((e) => !e._deleted), r = v.filter((e) => e._deleted), i = n.findIndex((t) => t._key === e), a = i + t;
+		if (i < 0 || a < 0 || a >= n.length) return;
+		let o = [...n], [s] = o.splice(i, 1);
+		o.splice(a, 0, s), y([...o.map((e, t) => ({
+			...e,
+			[D]: t,
+			_dirty: e[D] !== t || e._dirty
+		})), ...r]);
+	}, [
+		v,
+		y,
+		D
+	]), I = u((e) => {
+		let t = e.target, n = t.closest("td");
+		if (!n) return;
+		let r = n.closest("tr");
+		if (!r) return;
+		let i = r.closest("tbody");
+		if (!i) return;
+		let a = Array.from(r.cells).indexOf(n), o = Array.from(i.rows).indexOf(r);
+		if (e.key === "Tab") {
+			let t = e.shiftKey ? -1 : 1, n = Array.from(i.rows), r = o, s = a + t;
+			for (; r >= 0 && r < n.length;) if (s >= 0 && s < n[r].cells.length) {
+				let i = n[r].cells[s].querySelector("input, select, textarea, [tabindex]");
+				if (i) {
+					e.preventDefault(), i.focus();
+					return;
+				}
+				s += t;
+			} else r += t, s = t > 0 ? 0 : (n[r]?.cells.length ?? 1) - 1;
+		} else if (e.key === "Enter") {
+			e.preventDefault();
+			let t = Array.from(i.rows);
+			if (o < t.length - 1) {
+				let e = t[o + 1].cells[a]?.querySelector("input, select, textarea, [tabindex]");
+				e && e.focus();
+			} else M(), requestAnimationFrame(() => {
+				let e = i.querySelectorAll("tr"), t = e[e.length - 1];
+				if (t) {
+					let e = t.querySelector("input, select, textarea, [tabindex]");
+					e && e.focus();
+				}
+			});
+		} else e.key === "Escape" && t.blur?.();
+	}, [M]), L = c;
+	return w.isPhone && !S ? /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 10
+		},
+		children: v.map((r, a) => {
+			let o = !!r._deleted, c = b?.[r._key], l = D ? v.filter((e) => !e._deleted) : [], u = D ? l.findIndex((e) => e._key === r._key) : -1;
+			return /* @__PURE__ */ m("div", {
+				style: {
+					border: "1px solid var(--border)",
+					borderRadius: "var(--radius-md)",
+					background: "var(--surface)",
+					opacity: o ? .58 : 1,
+					overflow: "hidden"
+				},
+				children: [/* @__PURE__ */ m("div", {
+					style: {
+						minHeight: 38,
+						padding: "8px 10px",
+						borderBottom: "1px solid var(--divider)",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						gap: 8
+					},
+					children: [/* @__PURE__ */ p("div", {
+						style: {
+							fontSize: 12,
+							fontWeight: 600,
+							color: "var(--text-2)"
+						},
+						children: C("record.row.number", "Row {number}", { number: a + 1 })
+					}), /* @__PURE__ */ m("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 4
+						},
+						children: [D && !o && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(i, {
+							size: 32,
+							icon: /* @__PURE__ */ p(n.up, { size: 14 }),
+							onClick: () => F(r._key, -1),
+							disabled: u <= 0,
+							title: C("record.row.move_up", "Move row up")
+						}), /* @__PURE__ */ p(i, {
+							size: 32,
+							icon: /* @__PURE__ */ p(n.down, { size: 14 }),
+							onClick: () => F(r._key, 1),
+							disabled: u === -1 || u >= l.length - 1,
+							title: C("record.row.move_down", "Move row down")
+						})] }), o ? /* @__PURE__ */ p(i, {
+							size: 32,
+							icon: /* @__PURE__ */ p(n.refresh, { size: 14 }),
+							onClick: () => P(r._key),
+							title: C("record.row.undo_delete", "Undo delete")
+						}) : /* @__PURE__ */ p(i, {
+							size: 32,
+							icon: /* @__PURE__ */ p(n.trash, { size: 14 }),
+							onClick: () => N(r._key),
+							title: C("record.row.delete", "Delete row")
+						})]
+					})]
+				}), /* @__PURE__ */ p("div", {
+					style: {
+						padding: 10,
+						display: "flex",
+						flexDirection: "column",
+						gap: 12
+					},
+					children: E.map((n) => {
+						let i = g.fields.get(n), a = c?.includes(n), l = A.has(n), u = i ? t(C, i, n, _.entities) : n, d = `child-${r._key}-${n}`, f = `${d}-label`, h = {
+							outline: a ? "1px solid var(--danger)" : "none",
+							outlineOffset: 3,
+							borderRadius: a ? "var(--radius-sm)" : 0
+						}, v = {
+							fontSize: 11.5,
+							fontWeight: 600,
+							color: "var(--text-3)"
+						}, y = !o && !l && !!i;
+						return /* @__PURE__ */ m("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 5,
+								minWidth: 0,
+								textDecoration: o ? "line-through" : "none"
+							},
+							title: a ? C("record.row.field_required", "{field} is required", { field: n }) : void 0,
+							children: [y ? /* @__PURE__ */ p("label", {
+								id: f,
+								htmlFor: d,
+								style: v,
+								children: u
+							}) : /* @__PURE__ */ p("div", {
+								id: f,
+								style: v,
+								children: u
+							}), /* @__PURE__ */ p("div", {
+								style: h,
+								children: o || l ? i ? s({
+									field: i,
+									fieldName: n,
+									value: r[n],
+									mode: "display",
+									record: r,
+									refs: x,
+									fieldId: d,
+									labelId: f,
+									t: C
+								}) : e(r[n]) : i ? s({
+									field: i,
+									fieldName: n,
+									value: r[n],
+									mode: "edit",
+									onChange: (e) => j(r._key, n, e),
+									record: r,
+									refs: x,
+									compact: !0,
+									fieldId: d,
+									labelId: f,
+									t: C
+								}) : e(r[n])
+							})]
+						}, n);
+					})
+				})]
+			}, r._key);
+		})
+	}), /* @__PURE__ */ p("div", {
+		style: { marginTop: 10 },
+		children: /* @__PURE__ */ p(r, {
+			kind: "ghost",
+			size: "sm",
+			icon: /* @__PURE__ */ p(n.plus, { size: 14 }),
+			onClick: M,
+			children: C("record.row.add", "Add row")
+		})
+	})] }) : /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("div", {
+		style: { overflowX: "auto" },
+		children: /* @__PURE__ */ m("table", {
+			ref: T,
+			style: l,
+			onKeyDown: I,
+			children: [/* @__PURE__ */ p("thead", { children: /* @__PURE__ */ m("tr", { children: [E.map((e) => {
+				let n = g.fields.get(e);
+				return /* @__PURE__ */ p("th", {
+					style: L,
+					children: n ? t(C, n, e, _.entities) : e
+				}, e);
+			}), /* @__PURE__ */ p("th", { style: {
+				...L,
+				width: 40
+			} })] }) }), /* @__PURE__ */ p("tbody", { children: v.map((t) => {
+				let r = !!t._deleted, a = b?.[t._key];
+				return /* @__PURE__ */ m("tr", {
+					style: { opacity: r ? .5 : 1 },
+					children: [E.map((n) => {
+						let i = g.fields.get(n), o = a?.includes(n), c = A.has(n);
+						return r || c ? /* @__PURE__ */ p("td", {
+							style: {
+								padding: "6px 12px",
+								borderBottom: "1px solid var(--divider)",
+								verticalAlign: "middle",
+								textDecoration: r ? "line-through" : "none",
+								color: "var(--text-2)"
+							},
+							children: i ? s({
+								field: i,
+								fieldName: n,
+								value: t[n],
+								mode: "display",
+								record: t,
+								refs: x,
+								t: C
+							}) : e(t[n])
+						}, n) : /* @__PURE__ */ p("td", {
+							style: {
+								padding: "4px 4px",
+								borderBottom: "1px solid var(--divider)",
+								verticalAlign: "middle",
+								outline: o ? "1px solid var(--danger)" : "none",
+								outlineOffset: -1,
+								borderRadius: o ? "var(--radius-sm)" : 0
+							},
+							title: o ? C("record.row.field_required", "{field} is required", { field: n }) : void 0,
+							children: i ? s({
+								field: i,
+								fieldName: n,
+								value: t[n],
+								mode: "edit",
+								onChange: (e) => j(t._key, n, e),
+								record: t,
+								refs: x,
+								compact: !0,
+								t: C
+							}) : e(t[n])
+						}, n);
+					}), /* @__PURE__ */ p("td", {
+						style: {
+							padding: "4px 8px",
+							borderBottom: "1px solid var(--divider)",
+							verticalAlign: "middle"
+						},
+						children: r ? /* @__PURE__ */ p(i, {
+							size: 24,
+							icon: /* @__PURE__ */ p(n.refresh, { size: 12 }),
+							onClick: () => P(t._key),
+							title: C("record.row.undo_delete", "Undo delete")
+						}) : /* @__PURE__ */ p(i, {
+							size: 24,
+							icon: /* @__PURE__ */ p(n.trash, { size: 12 }),
+							onClick: () => N(t._key),
+							title: C("record.row.delete", "Delete row")
+						})
+					})]
+				}, t._key);
+			}) })]
+		})
+	}), /* @__PURE__ */ p("div", {
+		style: { marginTop: 8 },
+		children: /* @__PURE__ */ p(r, {
+			kind: "ghost",
+			size: "xs",
+			icon: /* @__PURE__ */ p(n.plus, { size: 12 }),
+			onClick: M,
+			children: C("record.row.add", "Add row")
+		})
+	})] });
+}
+//#endregion
+export { h as EditableChildrenTable };

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

@@ -0,0 +1,89 @@
+import { pluralText as e } from "../../lib/language.js";
+import { Icon as t } from "../primitives/Icons.js";
+import { useText as n } from "../../hooks/useText.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/detail-layout/ErrorSummary.tsx
+function a({ errors: a, onJump: o }) {
+	let s = n();
+	return a.length === 0 ? null : /* @__PURE__ */ i("div", {
+		role: "alert",
+		style: {
+			display: "flex",
+			gap: 10,
+			padding: "10px 12px",
+			marginBottom: 12,
+			borderRadius: "var(--radius-md)",
+			background: "var(--danger-soft)",
+			border: "1px solid var(--danger-border)",
+			color: "var(--text)"
+		},
+		children: [/* @__PURE__ */ r("span", {
+			style: {
+				color: "var(--danger)",
+				marginTop: 1,
+				display: "flex"
+			},
+			children: /* @__PURE__ */ r(t.warning, { size: 14 })
+		}), /* @__PURE__ */ i("div", {
+			style: {
+				flex: 1,
+				minWidth: 0
+			},
+			children: [/* @__PURE__ */ r("div", {
+				style: {
+					fontSize: 12.5,
+					fontWeight: 600,
+					marginBottom: 4
+				},
+				children: e(s, "record.errors.summary", a.length, {
+					one: "{count} field needs attention",
+					other: "{count} fields need attention"
+				})
+			}), /* @__PURE__ */ r("ul", {
+				style: {
+					margin: 0,
+					padding: 0,
+					listStyle: "none",
+					display: "flex",
+					flexDirection: "column",
+					gap: 2
+				},
+				children: a.map((e) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ i("button", {
+					type: "button",
+					onClick: o ? () => o(e.name) : void 0,
+					style: {
+						background: "transparent",
+						border: 0,
+						padding: 0,
+						cursor: o ? "pointer" : "default",
+						fontSize: 12,
+						textAlign: "left",
+						fontFamily: "inherit"
+					},
+					children: [
+						/* @__PURE__ */ r("span", {
+							style: {
+								color: "var(--danger)",
+								marginRight: 6
+							},
+							children: "•"
+						}),
+						/* @__PURE__ */ r("span", {
+							style: {
+								fontWeight: 500,
+								color: "var(--text-2)"
+							},
+							children: e.label
+						}),
+						/* @__PURE__ */ i("span", {
+							style: { color: "var(--text-3)" },
+							children: [" - ", e.message]
+						})
+					]
+				}) }, e.name))
+			})]
+		})]
+	});
+}
+//#endregion
+export { a as ErrorSummary };