@declarion/react 0.65.1 → 0.66.1

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

@@ -0,0 +1,87 @@
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { DISPLAY_KEY as t, fieldDisplayName as n } from "../../types/schema.js";
+import { Icon as r } from "../primitives/Icons.js";
+import { useText as i } from "../../hooks/useText.js";
+import { Select as a, TextInput as o } from "../primitives/Fields.js";
+import { useEntityData as s } from "../../hooks/useEntityData.js";
+import { useEntity as c } from "../../hooks/useEntity.js";
+import { refChoicesEntity as l } from "../../lib/ref-choices.js";
+import { useMemo as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/detail-layout/AssociatedToolbar.tsx
+function p({ entity: e, searchable: t, filterFields: s, searchValue: c, onSearchChange: l, filters: u, onFilterChange: p, allEntities: h }) {
+	let g = i(), _ = t === !0, v = s && s.length > 0;
+	return !_ && !v ? null : /* @__PURE__ */ f("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 6,
+			marginBottom: 8
+		},
+		children: [_ && /* @__PURE__ */ d("div", {
+			style: {
+				flex: 1,
+				maxWidth: 220
+			},
+			children: /* @__PURE__ */ d(o, {
+				value: c,
+				onChange: l,
+				placeholder: g("record.associated.search", "Search…"),
+				prefix: /* @__PURE__ */ d(r.search, { size: 12 })
+			})
+		}), v && s.map((t) => {
+			let r = e.fields.get(t);
+			if (!r) return null;
+			let i = u[t] ?? "__all__", o = n(g, r, t, h);
+			if (r.type === "ref" && r.ref?.entity) return /* @__PURE__ */ d(m, {
+				field: r,
+				label: o,
+				value: i,
+				onChange: (e) => p(t, e)
+			}, t);
+			if (!r.values) return null;
+			let s = [{
+				value: "__all__",
+				label: g("record.associated.filter_all", "All {name}", { name: o })
+			}, ...r.values.map((e) => ({
+				value: e.code,
+				label: g(e.name) || e.code
+			}))];
+			return /* @__PURE__ */ d("div", {
+				style: { width: 160 },
+				children: /* @__PURE__ */ d(a, {
+					value: i,
+					options: s,
+					onChange: (e) => p(t, e),
+					placeholder: o
+				})
+			}, t);
+		})]
+	});
+}
+function m({ field: n, label: r, value: o, onChange: f }) {
+	let p = i(), m = c(l(n.ref?.entity)), h = n.display?.ref_display_field ?? m?.display?.display_field, g = u(() => m ? [...m.fields].find(([, e]) => e.primary)?.[0] ?? "id" : "id", [m]), { data: _ } = s(l(n.ref?.entity), {
+		per_page: 200,
+		sort: h ? `${h}:asc` : void 0
+	}), v = _?.data ?? [], y = (t) => t == null ? "—" : typeof t == "object" && !Array.isArray(t) ? p(t) || "—" : e(t), b = [{
+		value: "__all__",
+		label: p("record.associated.filter_all", "All {name}", { name: r })
+	}, ...v.map((e) => {
+		let n = String(e[g]), r = e[t];
+		return {
+			value: n,
+			label: typeof r == "string" && r !== "" ? r : h ? y(e[h] ?? n) : n
+		};
+	})];
+	return /* @__PURE__ */ d("div", {
+		style: { width: 160 },
+		children: /* @__PURE__ */ d(a, {
+			value: o,
+			options: b,
+			onChange: f,
+			placeholder: r
+		})
+	});
+}
+//#endregion
+export { p as AssociatedToolbar };

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

@@ -0,0 +1,80 @@
+import { entityAllowsMutation as e } from "../../types/schema.js";
+import { useText as t } from "../../hooks/useText.js";
+import { SectionCard as n } from "../primitives/SectionCard.js";
+import { useResponsiveMode as r } from "../../hooks/useResponsiveMode.js";
+import { DynamicIcon as i } from "../shared/DynamicIcon.js";
+import { TableSkeleton as a } from "../shared/LoadingSkeleton.js";
+import { resolveBlockIcon as o, resolveBlockLabel as s } from "./blockMeta.js";
+import { findChildRelation as c, resolveChildConfig as l } from "../../lib/child-config.js";
+import { ChildrenTable as u } from "./ChildrenTable.js";
+import { ChildrenList as d } from "./ChildrenList.js";
+import { ChildrenCards as f } from "./ChildrenCards.js";
+import { ChildrenTimeline as p } from "./ChildrenTimeline.js";
+import { EditableChildrenTable as m } from "./EditableChildrenTable.js";
+import { Suspense as h, lazy as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/detail-layout/ChildrenBlock.tsx
+var y = g(() => import("./DraggableChildrenTable.js").then((e) => ({ default: e.DraggableChildrenTable })));
+function b({ node: g, ctx: b }) {
+	let x = t(), S = t("errors"), C = r(), w = g.children;
+	if (!w) return null;
+	let T = C.isPhone && b.relatedRecordsPresentation === "table";
+	if (b.isNew && b.mode !== "edit") return null;
+	let E = c(b.entity, w);
+	if (!E) return /* @__PURE__ */ v("div", {
+		className: "text-sm text-muted-foreground py-2",
+		children: [
+			S("record.child_relation_unknown", "This record type has no child relation by that name."),
+			" ",
+			/* @__PURE__ */ _("code", { children: w })
+		]
+	});
+	let D = b.schema.entities[E.entity];
+	if (!D) return /* @__PURE__ */ v("div", {
+		className: "text-sm text-muted-foreground py-2",
+		children: [
+			S("record.related_entity_not_found", "The related record type is not declared in this deployment."),
+			" ",
+			/* @__PURE__ */ _("code", { children: E.entity })
+		]
+	});
+	let O = l(E, D, g), k = s(g, b, x), A = o(g, b), j = (e) => O.mode === "timeline" || b.withinCard ? e : /* @__PURE__ */ _(n, {
+		title: k,
+		icon: A ? /* @__PURE__ */ _(i, {
+			name: A,
+			size: 14
+		}) : void 0,
+		children: e
+	});
+	if (b.mode === "edit" && O.editable && O.interaction !== "navigate" && O.interaction !== "readonly" && e(D, "update") && O.mode === "table" && b.pendingChildren !== void 0 && b.onChildrenChange) {
+		let e = b.pendingChildren[w] ?? [], t = b.childValidationErrors?.[w], n = O.position_field ? C.isPhone && !T ? m : y : m;
+		return j(/* @__PURE__ */ _(h, {
+			fallback: /* @__PURE__ */ _(a, {}),
+			children: /* @__PURE__ */ _(n, {
+				config: O,
+				childEntity: D,
+				schema: b.schema,
+				rows: e,
+				onChange: (e) => b.onChildrenChange(w, e),
+				validationErrors: t,
+				refs: b.refs,
+				forceTablePresentation: T
+			})
+		}));
+	}
+	if (b.isNew) return null;
+	let M = {
+		config: O,
+		parentEntity: b.entityCode,
+		parentId: b.recordId,
+		schema: b.schema
+	};
+	switch (O.mode) {
+		case "list": return j(/* @__PURE__ */ _(d, { ...M }));
+		case "cards": return j(/* @__PURE__ */ _(f, { ...M }));
+		case "timeline": return j(/* @__PURE__ */ _(p, { ...M }));
+		default: return C.isPhone && !T ? j(/* @__PURE__ */ _(f, { ...M })) : j(/* @__PURE__ */ _(u, { ...M }));
+	}
+}
+//#endregion
+export { b as ChildrenBlock };

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

@@ -0,0 +1,156 @@
+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";
+//#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 /* @__PURE__ */ s("div", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-3)",
+			padding: "8px 0"
+		},
+		children: h("record.related_entity_not_found", "The related record type is not declared in this deployment.")
+	});
+	let E = {
+		display: "grid",
+		gridTemplateColumns: `repeat(auto-fill, minmax(${T >= 4 ? 180 : 240}px, 1fr))`,
+		gap: 12
+	}, D = /* @__PURE__ */ s(o, {
+		config: l,
+		parentEntity: u,
+		parentId: d,
+		schema: f
+	});
+	if (v) return /* @__PURE__ */ c("div", { children: [D, /* @__PURE__ */ c("div", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--danger)",
+			padding: "8px 0"
+		},
+		children: [
+			h("record.related_rows_unreadable", "The related records could not be loaded."),
+			" ",
+			m("record.related.try_again", "Try again.")
+		]
+	})] });
+	if (_) return /* @__PURE__ */ c("div", { children: [D, /* @__PURE__ */ s("div", {
+		style: E,
+		children: [
+			0,
+			1,
+			2
+		].map((e) => /* @__PURE__ */ s("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", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-3)",
+			padding: "12px 0"
+		},
+		children: m("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", {
+			style: {
+				background: "var(--surface)",
+				border: "1px solid var(--border)",
+				borderRadius: "var(--radius-lg)",
+				overflow: "hidden"
+			},
+			children: [/* @__PURE__ */ c("div", {
+				style: {
+					padding: "10px 14px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					gap: 8,
+					borderBottom: O.length > 0 ? "1px solid var(--divider)" : "none"
+				},
+				children: [/* @__PURE__ */ s("div", {
+					style: {
+						fontSize: 12.5,
+						fontWeight: 600,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap"
+					},
+					children: C && p.fields.get(C) ? a({
+						field: p.fields.get(C),
+						fieldName: C,
+						value: r[C],
+						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, {
+					tone: "slate",
+					size: "xs",
+					children: p.fields.get(w) ? a({
+						field: p.fields.get(w),
+						fieldName: w,
+						value: r[w],
+						mode: "display",
+						record: r,
+						refs: b,
+						t: m
+					}) : e(r[w])
+				})]
+			}), O.length > 0 && /* @__PURE__ */ s("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", {
+						style: {
+							display: "flex",
+							alignItems: "baseline",
+							gap: 8,
+							fontSize: 11.5
+						},
+						children: [/* @__PURE__ */ c("span", {
+							style: {
+								color: "var(--text-3)",
+								flexShrink: 0
+							},
+							children: [t(m, n, e, f.entities), ":"]
+						}), /* @__PURE__ */ s("span", {
+							style: {
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: a({
+								field: n,
+								fieldName: e,
+								value: r[e],
+								mode: "display",
+								record: r,
+								refs: b,
+								t: m
+							})
+						})]
+					}, e) : null;
+				})
+			})]
+		}, e(r.id ?? i)))
+	})] });
+}
+//#endregion
+export { l as ChildrenCards };

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

@@ -0,0 +1,135 @@
+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";
+//#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 /* @__PURE__ */ o("div", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-3)",
+			padding: "8px 0"
+		},
+		children: m("record.related_entity_not_found", "The related record type is not declared in this deployment.")
+	});
+	let x = /* @__PURE__ */ o(a, {
+		config: c,
+		parentEntity: l,
+		parentId: u,
+		schema: d
+	});
+	if (_) return /* @__PURE__ */ s("div", { children: [x, /* @__PURE__ */ s("div", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--danger)",
+			padding: "8px 0"
+		},
+		children: [
+			m("record.related_rows_unreadable", "The related records could not be loaded."),
+			" ",
+			p("record.related.try_again", "Try again.")
+		]
+	})] });
+	if (g) return /* @__PURE__ */ s("div", { children: [x, /* @__PURE__ */ s("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 6,
+			padding: "8px 0"
+		},
+		children: [
+			/* @__PURE__ */ o("div", { style: {
+				height: 22,
+				background: "var(--surface-3)",
+				borderRadius: "var(--radius-sm)"
+			} }),
+			/* @__PURE__ */ o("div", { style: {
+				height: 22,
+				background: "var(--surface-3)",
+				borderRadius: "var(--radius-sm)"
+			} }),
+			/* @__PURE__ */ o("div", { style: {
+				height: 22,
+				background: "var(--surface-3)",
+				borderRadius: "var(--radius-sm)",
+				width: "75%"
+			} })
+		]
+	})] });
+	if (v.length === 0) return /* @__PURE__ */ s("div", { children: [x, /* @__PURE__ */ o("div", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-3)",
+			padding: "12px 0"
+		},
+		children: p("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", {
+		style: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		children: v.map((n, r) => {
+			let a = typeof n.$display == "string" ? n[t] : "";
+			return /* @__PURE__ */ o("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 12,
+					padding: "8px 4px",
+					borderBottom: "1px solid var(--divider)"
+				},
+				children: /* @__PURE__ */ s("div", {
+					style: {
+						flex: 1,
+						minWidth: 0
+					},
+					children: [/* @__PURE__ */ o("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],
+							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", {
+							style: {
+								fontSize: 11.5,
+								color: "var(--text-3)",
+								overflow: "hidden",
+								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),
+								fieldName: e,
+								value: n[e],
+								mode: "display",
+								record: n,
+								refs: y,
+								t: p
+							}) : String(n[e])] }, e))
+						});
+					})()]
+				})
+			}, e(n.id ?? r));
+		})
+	})] });
+}
+//#endregion
+export { c as ChildrenList };

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

@@ -0,0 +1,189 @@
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { fieldDisplayName as t, resolveDetailRoute as n } from "../../types/schema.js";
+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";
+//#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(() => {
+		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({
+				field: n,
+				fieldName: t,
+				surface: "list",
+				entity: A,
+				entityCode: w.entity,
+				entities: D.entities,
+				screens: D.screens,
+				refs: () => H.current,
+				t: O
+			}));
+		}
+		return e;
+	}, [
+		A,
+		w.entity,
+		U,
+		D.entities,
+		D.screens,
+		O
+	]);
+	if (!A) return /* @__PURE__ */ S("div", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-3)",
+			padding: "8px 0"
+		},
+		children: k("record.related_entity_not_found", "The related record type is not declared in this deployment.")
+	});
+	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", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 6,
+			padding: "4px 0",
+			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)"),
+				size: 24,
+				onClick: M.resetWidths
+			}),
+			A.realtime === !0 && /* @__PURE__ */ S("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",
+					size: "xs",
+					dot: !0,
+					children: X
+				})
+			}),
+			/* @__PURE__ */ S(i, {
+				icon: R ? /* @__PURE__ */ S("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"),
+				size: 24,
+				disabled: R,
+				onClick: z
+			})
+		]
+	});
+	return I ? /* @__PURE__ */ C("div", { children: [
+		Y,
+		Z,
+		/* @__PURE__ */ C("div", {
+			style: {
+				fontSize: 12.5,
+				color: "var(--danger)",
+				padding: "8px 0"
+			},
+			children: [
+				k("record.related_rows_unreadable", "The related records could not be loaded."),
+				" ",
+				O("record.related.try_again", "Try again.")
+			]
+		})
+	] }) : F ? /* @__PURE__ */ C("div", { children: [
+		Y,
+		Z,
+		/* @__PURE__ */ S("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 6,
+				padding: "8px 0"
+			},
+			children: [
+				0,
+				1,
+				2
+			].map((e) => /* @__PURE__ */ S("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", {
+			style: {
+				fontSize: 12.5,
+				color: "var(--text-3)",
+				padding: "12px 0"
+			},
+			children: O("record.related.empty", "No records yet.")
+		})
+	] }) : /* @__PURE__ */ C("div", { children: [
+		Y,
+		Z,
+		/* @__PURE__ */ S("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(_, {
+							colId: e,
+							onMouseDown: M.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", {
+							title: typeof o == "string" ? o : void 0,
+							style: M.cellStyle(n, f),
+							children: r && i ? /* @__PURE__ */ S("a", {
+								href: i,
+								style: {
+									color: "var(--accent-text)",
+									textDecoration: "none",
+									fontWeight: 500
+								},
+								onMouseEnter: (e) => e.currentTarget.style.textDecoration = "underline",
+								onMouseLeave: (e) => e.currentTarget.style.textDecoration = "none",
+								children: o
+							}) : o
+						}, n);
+					}) }, e(t.id ?? n));
+				}) })]
+			})
+		})
+	] });
+}
+//#endregion
+export { w as ChildrenTable };