@llmnative/react 1.3.0 → 1.4.0

package/dist/index.mjs

@@ -11376,57 +11376,61 @@ function Td({ records: e, selectedKeys: t, onSelectionChange: n, getRecordKey: r
 }
 //#endregion
 //#region src/components/ui/useStableRecordKey.ts
-function Ed(e) {
-	let t = m(/* @__PURE__ */ new WeakMap()), n = m(0);
-	return s((r, i) => {
-		if (r._key) return r[Ia];
-		let a = r, o = t.current.get(a);
-		if (o) return o;
-		let s = `${e}-${n.current++}`;
-		return t.current.set(a, s), s;
-	}, [e]);
+function Ed(e, t) {
+	let n = m(/* @__PURE__ */ new WeakMap()), r = m(0);
+	return s((i, a) => {
+		if (t != null) {
+			let e = typeof t == "function" ? t(i) : i[t];
+			if (e != null && e !== "") return String(e);
+		}
+		if (i._key) return i[Ia];
+		let o = i, s = n.current.get(o);
+		if (s) return s;
+		let c = `${e}-${r.current++}`;
+		return n.current.set(o, c), c;
+	}, [e, t]);
 }
 //#endregion
 //#region src/components/ui/Table.tsx
-function Dd({ columns: e = void 0, records: n = void 0, footer: r = void 0, onRowClick: i = void 0, onReorder: a = void 0, onSelectionChange: o = void 0, selection: c = "multiple", sortable: d = !1, pagination: f = void 0, activeKey: g = void 0, selectedKeys: _ = void 0, groupBy: v = void 0, before: y = void 0, after: b = void 0, wrapperClassName: x = void 0, className: S = void 0, headerClassName: C = void 0, bodyClassName: w = void 0, footerClassName: T = void 0, heightClassName: A = void 0, scrollClassName: j = void 0, selectedClassName: M = void 0, renderCell: N = void 0 }) {
-	let P = Y("table"), F = Mn("table"), I = M || P.Table.selectedClassName, [L, R] = h(n || []), ee = p(() => {
+function Dd({ columns: e = void 0, records: n = void 0, footer: r = void 0, onRowClick: i = void 0, onReorder: a = void 0, onSelectionChange: o = void 0, selection: c = "multiple", sortable: d = !1, pagination: f = void 0, activeKey: g = void 0, selectedKeys: _ = void 0, groupBy: v = void 0, recordId: y = void 0, before: b = void 0, after: x = void 0, wrapperClassName: S = void 0, className: C = void 0, headerClassName: w = void 0, bodyClassName: T = void 0, footerClassName: A = void 0, heightClassName: j = void 0, scrollClassName: M = void 0, selectedClassName: N = void 0, renderCell: P = void 0 }) {
+	let F = Y("table"), I = Mn("table"), L = N || F.Table.selectedClassName, [R, ee] = h(n || []), z = p(() => {
 		if (!(!d || typeof d == "boolean")) return d;
-	}, [typeof d == "object" ? d?.dir : void 0, typeof d == "object" ? d?.field : void 0]), z = d !== !1, [B, V] = h(ee), [H, U] = h(null), [te, ne] = h(null), [W, re] = h(null), [ie, G] = h(null), [ae, oe] = h(null), se = m(!1), ce = s((e) => {
-		e && U(e);
-	}, []), le = u(), ue = !!a, de = z || !!Is.normalize(ee), fe = ue && de, pe = !fe && z, K = fe ? void 0 : ee;
+	}, [typeof d == "object" ? d?.dir : void 0, typeof d == "object" ? d?.field : void 0]), B = d !== !1, [V, H] = h(z), [U, te] = h(null), [ne, W] = h(null), [re, ie] = h(null), [G, ae] = h(null), [oe, se] = h(null), ce = m(!1), le = s((e) => {
+		e && te(e);
+	}, []), ue = u(), de = !!a, fe = B || !!Is.normalize(z), pe = de && fe, K = !pe && B, q = pe ? void 0 : z;
 	l(() => {
-		R(n || []);
+		ee(n || []);
 	}, [n]), l(() => {
-		V(K);
-	}, [K?.field, K?.dir]), l(() => {
-		!fe || se.current || (console.warn("Table: `onReorder` cannot be combined with sortable sorting on the same view. Manual reorder takes precedence and sorting is ignored."), se.current = !0);
-	}, [fe]);
-	let q = Ed("row"), J = s((e, t) => q(e, t), [q]), { activeSelectedKeys: me, selectionState: he, showSelection: ge, updateSelection: _e } = Td({
-		records: L,
+		H(q);
+	}, [q?.field, q?.dir]), l(() => {
+		!pe || ce.current || (console.warn("Table: `onReorder` cannot be combined with sortable sorting on the same view. Manual reorder takes precedence and sorting is ignored."), ce.current = !0);
+	}, [pe]);
+	let J = Ed("row", y), me = s((e, t) => J(e, t), [J]), { activeSelectedKeys: he, selectionState: ge, showSelection: _e, updateSelection: ve } = Td({
+		records: R,
 		selectedKeys: _,
 		onSelectionChange: o,
-		getRecordKey: J
+		getRecordKey: me
 	});
 	l(() => {
-		ae && (L.some((e, t) => J(e, t) === ae) || oe(null));
+		oe && (R.some((e, t) => me(e, t) === oe) || se(null));
 	}, [
-		ae,
-		J,
-		L
+		oe,
+		me,
+		R
 	]), l(() => {
-		if (B || !e?.length || ue) return;
-		let t = e.find((e) => pe && e.sort !== !1);
-		t && V({
+		if (V || !e?.length || de) return;
+		let t = e.find((e) => K && e.sort !== !1);
+		t && H({
 			field: t.key,
 			dir: "asc"
 		});
 	}, [
-		B,
-		pe,
+		V,
+		K,
 		e,
-		ue
+		de
 	]);
-	let ve = p(() => Is.records(L, B) || [], [L, B]), ye = (e, t, n) => {
+	let ye = p(() => Is.records(R, V) || [], [R, V]), be = (e, t, n) => {
 		let r = e.target;
 		for (; r && r.tagName !== "TR";) {
 			if ([
@@ -11437,77 +11441,77 @@ function Dd({ columns: e = void 0, records: n = void 0, footer: r = void 0, onRo
 			].includes(r.tagName)) return;
 			r = r.parentNode;
 		}
-		let a = J(t, n);
-		I && g === void 0 && oe((e) => e === a ? null : a), i?.(t);
-	}, be = (e, n, r) => {
-		if (N) return N(e, n, r);
+		let a = me(t, n);
+		L && g === void 0 && se((e) => e === a ? null : a), i?.(t);
+	}, xe = (e, n, r) => {
+		if (P) return P(e, n, r);
 		let i = e[n], a = typeof i == "object" && i && !Array.isArray(i) ? i : null, o = a?.prompt && a?.value || i;
 		return t.isValidElement(o) || typeof o != "object" || !o ? o : Array.isArray(o) && !o.some((e) => typeof e == "object" && e) ? o.join(", ") : "";
-	}, xe = s((e, t) => {
-		let n = J(e, t), r = me.includes(n) ? me.filter((e) => e !== n) : [...me, n];
-		_e(r);
+	}, Se = s((e, t) => {
+		let n = me(e, t), r = he.includes(n) ? he.filter((e) => e !== n) : [...he, n];
+		ve(r);
 	}, [
+		he,
 		me,
-		J,
-		_e
-	]), Se = s((e, t) => {
-		let n = J(e, t);
-		_e(me.includes(n) ? [] : [n]);
+		ve
+	]), Ce = s((e, t) => {
+		let n = me(e, t);
+		ve(he.includes(n) ? [] : [n]);
 	}, [
+		he,
 		me,
-		J,
-		_e
-	]), Ce = s((e, t) => {
-		if (!te) return;
-		let n = ve.findIndex((e, t) => J(e, t) === te), r = ve.findIndex((n, r) => J(n, r) === J(e, t));
-		re(null), ne(null);
-		let i = ie?.position || "after";
-		if (G(null), n < 0 || r < 0 || n === r) return;
-		let o = [...ve], [s] = o.splice(n, 1), c = n < r ? r + (i === "after" ? 0 : -1) : r + +(i === "after");
-		o.splice(c, 0, s), V(void 0), R(o), a?.(o, {
+		ve
+	]), we = s((e, t) => {
+		if (!ne) return;
+		let n = ye.findIndex((e, t) => me(e, t) === ne), r = ye.findIndex((n, r) => me(n, r) === me(e, t));
+		ie(null), W(null);
+		let i = G?.position || "after";
+		if (ae(null), n < 0 || r < 0 || n === r) return;
+		let o = [...ye], [s] = o.splice(n, 1), c = n < r ? r + (i === "after" ? 0 : -1) : r + +(i === "after");
+		o.splice(c, 0, s), H(void 0), ee(o), a?.(o, {
 			fromIndex: n,
 			toIndex: c,
 			record: s
 		});
 	}, [
-		te,
-		ie?.position,
-		J,
+		ne,
+		G?.position,
+		me,
 		a,
-		ve
+		ye
 	]);
-	if (ve.length === 0) return /* @__PURE__ */ t.createElement("p", { className: "p-4" }, F.noDataFound);
-	let we = e || Object.keys(ve[0]).map((e) => ({
+	if (ye.length === 0) return /* @__PURE__ */ t.createElement("p", { className: "p-4" }, I.noDataFound);
+	let Te = e || Object.keys(ye[0]).map((e) => ({
 		key: e,
 		label: e,
-		sort: z
-	})), Te = [
+		sort: B
+	})), Ee = [
 		"w-full",
-		P.Table.scrollClassName,
-		A ? `${A} overflow-auto` : "",
-		j || ""
-	].filter(Boolean).join(" "), Ee = we.length + +!!ge + +!!ue, De = (e, n, r, i) => !ie || ie.key !== e || ie.position !== n ? null : /* @__PURE__ */ t.createElement("tr", {
+		F.Table.scrollClassName,
+		j ? `${j} overflow-auto` : "",
+		M || ""
+	].filter(Boolean).join(" "), De = Te.length + +!!_e + +!!de, Oe = (e, n, r, i) => !G || G.key !== e || G.position !== n ? null : /* @__PURE__ */ t.createElement("tr", {
 		"aria-hidden": "true",
 		onDragOver: (t) => {
-			ue && (t.preventDefault(), W !== e && re(e), G({
+			de && (t.preventDefault(), re !== e && ie(e), ae({
 				key: e,
 				position: n
 			}));
 		},
 		onDrop: (t) => {
-			ue && (t.preventDefault(), G({
+			de && (t.preventDefault(), ae({
 				key: e,
 				position: n
-			}), Ce(r, i));
+			}), we(r, i));
 		}
 	}, /* @__PURE__ */ t.createElement("td", {
-		colSpan: Ee,
+		colSpan: De,
 		className: "border-0 p-0"
 	}, /* @__PURE__ */ t.createElement("div", { className: "relative h-5 cursor-grab" }, /* @__PURE__ */ t.createElement("div", { className: "absolute inset-x-2 top-1/2 -translate-y-1/2" }, /* @__PURE__ */ t.createElement("div", { className: "h-0 rounded-full border-t-2 border-primary/80" }), /* @__PURE__ */ t.createElement("div", { className: "absolute left-0 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full bg-primary shadow-sm" })))));
-	return /* @__PURE__ */ t.createElement("div", { className: "flex items-stretch gap-3" }, y && /* @__PURE__ */ t.createElement("div", { className: "table-before flex shrink-0 items-center self-stretch" }, y), /* @__PURE__ */ t.createElement("div", {
-		ref: ce,
-		className: "min-w-0 flex-1 overflow-x-auto " + (x || P.Table.wrapperClassName)
-	}, /* @__PURE__ */ t.createElement("div", { className: Te }, /* @__PURE__ */ t.createElement("table", { className: "w-full min-w-full text-left text-sm border-collapse " + (S || P.Table.className) }, /* @__PURE__ */ t.createElement("thead", { className: "border-b " + (C || P.Table.headerClassName) }, /* @__PURE__ */ t.createElement("tr", null, ge && /* @__PURE__ */ t.createElement("th", {
+	return /* @__PURE__ */ t.createElement("div", { className: "flex items-stretch gap-3" }, b && /* @__PURE__ */ t.createElement("div", { className: "table-before flex shrink-0 items-center self-stretch" }, b), /* @__PURE__ */ t.createElement("div", {
+		ref: le,
+		className: "min-w-0 flex-1 overflow-x-auto " + (S || F.Table.wrapperClassName)
+	}, /* @__PURE__ */ t.createElement("div", { className: Ee }, /* @__PURE__ */ t.createElement("table", { className: "w-full min-w-full text-left text-sm border-collapse " + (C || F.Table.className) }, /* @__PURE__ */ t.createElement("thead", { className: "border-b " + (w || F.Table.headerClassName) }, /* @__PURE__ */ t.createElement("tr", null, _e && /* @__PURE__ */ t.createElement("th", {
 		className: "px-3 py-2 font-semibold text-muted-foreground",
 		style: {
 			width: "1%",
@@ -11515,20 +11519,20 @@ function Dd({ columns: e = void 0, records: n = void 0, footer: r = void 0, onRo
 		}
 	}, c === "single" ? /* @__PURE__ */ t.createElement("div", { className: "th-inner py-1" }) : /* @__PURE__ */ t.createElement("div", { className: "th-inner py-1" }, /* @__PURE__ */ t.createElement("input", {
 		type: "checkbox",
-		"aria-label": F.selectAllRows,
-		checked: he.records.length > 0 && he.records.length === L.length,
+		"aria-label": I.selectAllRows,
+		checked: ge.records.length > 0 && ge.records.length === R.length,
 		onChange: (e) => {
-			let t = e.target.checked ? ve.map((e, t) => J(e, t)) : [];
-			_e(t);
+			let t = e.target.checked ? ye.map((e, t) => me(e, t)) : [];
+			ve(t);
 		}
-	}))), ue && /* @__PURE__ */ t.createElement("th", {
+	}))), de && /* @__PURE__ */ t.createElement("th", {
 		className: "px-3 py-2 font-semibold text-muted-foreground",
 		style: {
 			width: "1%",
 			whiteSpace: "nowrap"
 		}
-	}, /* @__PURE__ */ t.createElement("div", { className: "th-inner py-1" })), we.map((e) => e.label ? (() => {
-		let n = pe && e.sort !== !1, r = n && B?.field === e.key, i = r ? B?.dir === "desc" ? "descending" : "ascending" : "none";
+	}, /* @__PURE__ */ t.createElement("div", { className: "th-inner py-1" })), Te.map((e) => e.label ? (() => {
+		let n = K && e.sort !== !1, r = n && V?.field === e.key, i = r ? V?.dir === "desc" ? "descending" : "ascending" : "none";
 		return /* @__PURE__ */ t.createElement("th", {
 			key: e.key,
 			className: "px-3 py-2 font-semibold text-muted-foreground" + (e.className ? " " + e.className : ""),
@@ -11536,16 +11540,16 @@ function Dd({ columns: e = void 0, records: n = void 0, footer: r = void 0, onRo
 		}, n ? /* @__PURE__ */ t.createElement("button", {
 			type: "button",
 			className: "th-inner group inline-flex w-full cursor-pointer items-center gap-2 rounded-sm border-0 bg-transparent px-0 py-1 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 " + (r ? "font-semibold text-foreground" : "text-muted-foreground hover:text-foreground"),
-			onClick: () => V((t) => Is.toggle(t, e.key)),
-			"aria-label": r ? wn(F.sortByCurrent, {
+			onClick: () => H((t) => Is.toggle(t, e.key)),
+			"aria-label": r ? wn(I.sortByCurrent, {
 				label: e.label,
-				direction: B?.dir === "desc" ? "descending" : "ascending"
-			}) : wn(F.sortBy, { label: e.label }),
-			title: r ? `${e.label}: ${B?.dir === "desc" ? "descending" : "ascending"}` : wn(F.sortBy, { label: e.label })
+				direction: V?.dir === "desc" ? "descending" : "ascending"
+			}) : wn(I.sortBy, { label: e.label }),
+			title: r ? `${e.label}: ${V?.dir === "desc" ? "descending" : "ascending"}` : wn(I.sortBy, { label: e.label })
 		}, /* @__PURE__ */ t.createElement("span", {
 			className: "inline-flex h-4 w-4 flex-none items-center justify-center transition-colors " + (r ? "text-primary" : "text-muted-foreground/70 group-hover:text-foreground/80"),
 			"aria-hidden": "true"
-		}, r ? B?.dir === "desc" ? /* @__PURE__ */ t.createElement(E, { size: 14 }) : /* @__PURE__ */ t.createElement(D, { size: 14 }) : /* @__PURE__ */ t.createElement(O, { size: 14 })), /* @__PURE__ */ t.createElement("span", null, e.label)) : /* @__PURE__ */ t.createElement("div", { className: "th-inner py-1" }, e.label));
+		}, r ? V?.dir === "desc" ? /* @__PURE__ */ t.createElement(E, { size: 14 }) : /* @__PURE__ */ t.createElement(D, { size: 14 }) : /* @__PURE__ */ t.createElement(O, { size: 14 })), /* @__PURE__ */ t.createElement("span", null, e.label)) : /* @__PURE__ */ t.createElement("div", { className: "th-inner py-1" }, e.label));
 	})() : /* @__PURE__ */ t.createElement("th", {
 		key: e.key,
 		className: "px-3 py-2 font-semibold text-muted-foreground",
@@ -11553,56 +11557,56 @@ function Dd({ columns: e = void 0, records: n = void 0, footer: r = void 0, onRo
 			width: "1%",
 			whiteSpace: "nowrap"
 		}
-	})))), /* @__PURE__ */ t.createElement("tbody", { className: w || P.Table.bodyClassName }, /* @__PURE__ */ t.createElement(Ep, {
-		records: ve,
-		appendTo: H,
+	})))), /* @__PURE__ */ t.createElement("tbody", { className: T || F.Table.bodyClassName }, /* @__PURE__ */ t.createElement(Ep, {
+		records: ye,
+		appendTo: U,
 		wrapperClassName: "px-3 pt-4 pb-2",
 		...f || {}
 	}, (e, n) => {
 		let r = v ? Array.isArray(v) ? v : [v] : null, a;
 		return e.map((e, o) => {
-			let s = n + o, l = J(e, s), u = r ? r.map((t) => String(e[t] ?? "")).join(" · ") : void 0, d = u !== void 0 && u !== a;
+			let s = n + o, l = me(e, s), u = r ? r.map((t) => String(e[t] ?? "")).join(" · ") : void 0, d = u !== void 0 && u !== a;
 			a = u;
-			let f = me.includes(l), p = W === l, m = te === l, h = I && (g === void 0 ? ae : g) === l;
+			let f = he.includes(l), p = re === l, m = ne === l, h = L && (g === void 0 ? oe : g) === l;
 			return /* @__PURE__ */ t.createElement(t.Fragment, { key: l }, d && /* @__PURE__ */ t.createElement("tr", { "aria-hidden": "true" }, /* @__PURE__ */ t.createElement("td", {
-				colSpan: Ee,
+				colSpan: De,
 				className: "bg-muted/40 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground"
-			}, u)), De(l, "before", e, s), /* @__PURE__ */ t.createElement("tr", {
-				draggable: ue,
+			}, u)), Oe(l, "before", e, s), /* @__PURE__ */ t.createElement("tr", {
+				draggable: de,
 				className: [
 					"odd:bg-muted/30 hover:bg-muted/20 transition-colors",
 					p ? "bg-muted/30" : "",
-					h ? I : ""
+					h ? L : ""
 				].filter(Boolean).join(" ") || void 0,
 				style: {
-					cursor: i ? "pointer" : ue ? "grab" : "default",
+					cursor: i ? "pointer" : de ? "grab" : "default",
 					opacity: m ? .45 : 1
 				},
 				onClick: (t) => {
-					i && ye(t, e, s);
+					i && be(t, e, s);
 				},
 				onDragStart: () => {
-					ne(l);
+					W(l);
 				},
 				onDragOver: (e) => {
-					if (!ue) return;
+					if (!de) return;
 					e.preventDefault();
 					let t = e.currentTarget.getBoundingClientRect(), n = e.clientY < t.top + t.height / 2 ? "before" : "after";
-					W !== l && re(l), te !== l && G((e) => e?.key === l && e.position === n ? e : {
+					re !== l && ie(l), ne !== l && ae((e) => e?.key === l && e.position === n ? e : {
 						key: l,
 						position: n
 					});
 				},
 				onDragLeave: () => {
-					W === l && re(null);
+					re === l && ie(null);
 				},
 				onDragEnd: () => {
-					ne(null), re(null), G(null);
+					W(null), ie(null), ae(null);
 				},
 				onDrop: (t) => {
-					ue && (t.preventDefault(), Ce(e, s));
+					de && (t.preventDefault(), we(e, s));
 				}
-			}, ge && /* @__PURE__ */ t.createElement("td", {
+			}, _e && /* @__PURE__ */ t.createElement("td", {
 				className: "px-3 py-2 border-b border-border/50",
 				style: {
 					width: "1%",
@@ -11610,20 +11614,20 @@ function Dd({ columns: e = void 0, records: n = void 0, footer: r = void 0, onRo
 				}
 			}, /* @__PURE__ */ t.createElement("input", {
 				type: c === "single" ? "radio" : "checkbox",
-				name: c === "single" ? le : void 0,
-				"aria-label": wn(F.selectRow, { key: l }),
+				name: c === "single" ? ue : void 0,
+				"aria-label": wn(I.selectRow, { key: l }),
 				checked: f,
 				onChange: () => {
 					if (c === "single") {
-						Se(e, s);
+						Ce(e, s);
 						return;
 					}
-					xe(e, s);
+					Se(e, s);
 				},
 				onClick: (t) => {
-					t.stopPropagation(), c === "single" && (t.preventDefault(), Se(e, s));
+					t.stopPropagation(), c === "single" && (t.preventDefault(), Ce(e, s));
 				}
-			})), ue && /* @__PURE__ */ t.createElement("td", {
+			})), de && /* @__PURE__ */ t.createElement("td", {
 				className: "px-3 py-2 border-b border-border/50",
 				style: {
 					width: "1%",
@@ -11631,22 +11635,22 @@ function Dd({ columns: e = void 0, records: n = void 0, footer: r = void 0, onRo
 				}
 			}, /* @__PURE__ */ t.createElement("button", {
 				type: "button",
-				draggable: ue,
+				draggable: de,
 				className: "inline-flex cursor-grab items-center justify-center rounded-sm border-0 bg-transparent p-0 text-muted-foreground",
-				"aria-label": wn(F.reorderRow, { key: l }),
+				"aria-label": wn(I.reorderRow, { key: l }),
 				onClick: (e) => e.preventDefault(),
 				onDragStart: (e) => {
-					e.stopPropagation(), ne(l);
+					e.stopPropagation(), W(l);
 				},
 				onDragEnd: (e) => {
-					e.stopPropagation(), ne(null), re(null), G(null);
+					e.stopPropagation(), W(null), ie(null), ae(null);
 				}
-			}, /* @__PURE__ */ t.createElement(k, { size: 14 }))), we.map((n) => /* @__PURE__ */ t.createElement("td", {
+			}, /* @__PURE__ */ t.createElement(k, { size: 14 }))), Te.map((n) => /* @__PURE__ */ t.createElement("td", {
 				key: n.key,
 				className: "px-3 py-2 border-b border-border/50"
-			}, be(e, n.key, s)))), De(l, "after", e, s));
+			}, xe(e, n.key, s)))), Oe(l, "after", e, s));
 		});
-	})), r && /* @__PURE__ */ t.createElement("tfoot", { className: T || P.Table.footerClassName }, r)))), b && /* @__PURE__ */ t.createElement("div", { className: "table-after flex shrink-0 items-center self-stretch" }, b));
+	})), r && /* @__PURE__ */ t.createElement("tfoot", { className: A || F.Table.footerClassName }, r)))), x && /* @__PURE__ */ t.createElement("div", { className: "table-after flex shrink-0 items-center self-stretch" }, x));
 }
 //#endregion
 //#region src/components/ui/LayoutBuilder.tsx
@@ -13461,6 +13465,7 @@ function If({ records: e, recordId: n, columns: r, runAction: i, sortable: a, pa
 			sort: e.sortable
 		})),
 		records: e,
+		recordId: (e) => S(e),
 		sortable: a,
 		pagination: o,
 		renderCell: E,

package/dist/types/src/components/index.d.ts

@@ -38,6 +38,7 @@ export { default as Tab } from './ui/Tab';
 export * from './ui/Tab';
 export { default as Table } from './ui/Table';
 export type { TableProps, TableHeaderProp, TableReorderHandler, TableReorderMeta, TableSelectionChangeHandler, TableSelectionState } from './ui/Table';
+export type { RecordKeyResolver } from './ui/useStableRecordKey';
 export { default as Icon } from './ui/Icon';
 export { LayoutBuilder } from './ui/LayoutBuilder';
 export * from './ui/fields/Input';

package/dist/types/src/components/ui/Table.d.ts

@@ -4,6 +4,7 @@ import { UIProps } from '../';
 import { PaginationParams } from './Pagination';
 import { type OrderConfig } from '../../libs/order';
 import { RecordSelectionState } from './useRecordSelection';
+import { type RecordKeyResolver } from './useStableRecordKey';
 export type TableHeaderProp = {
     key: string;
     label: string;
@@ -34,6 +35,12 @@ export interface TableProps extends UIProps {
     activeKey?: string | null;
     selectedKeys?: string[];
     groupBy?: string | string[];
+    /** Field name (or resolver function) for a stable per-record key — see
+     * useStableRecordKey.ts for why this matters specifically for a Table whose `records` are
+     * re-supplied with new object identities on every edit (e.g. wrapped in a `Form`, one clone
+     * per keystroke): without it, a record with no `_key` falls back to an identity-keyed cache
+     * that treats every clone as a brand-new row, remounting it. Absent = unchanged behavior. */
+    recordId?: RecordKeyResolver<RecordProps>;
     headerClassName?: string;
     bodyClassName?: string;
     footerClassName?: string;
@@ -43,5 +50,5 @@ export interface TableProps extends UIProps {
     /** Custom cell renderer. Receives the record, column key, and absolute row index. */
     renderCell?: (record: RecordProps, key: string, absoluteIndex: number) => React.ReactNode;
 }
-declare function Table({ columns, records, footer, onRowClick, onReorder, onSelectionChange, selection, sortable, pagination, activeKey, selectedKeys, groupBy, before, after, wrapperClassName, className, headerClassName, bodyClassName, footerClassName, heightClassName, scrollClassName, selectedClassName, renderCell }: TableProps): React.JSX.Element;
+declare function Table({ columns, records, footer, onRowClick, onReorder, onSelectionChange, selection, sortable, pagination, activeKey, selectedKeys, groupBy, recordId, before, after, wrapperClassName, className, headerClassName, bodyClassName, footerClassName, heightClassName, scrollClassName, selectedClassName, renderCell }: TableProps): React.JSX.Element;
 export default Table;

package/dist/types/src/components/ui/useStableRecordKey.d.ts

@@ -1,5 +1,18 @@
 type RecordWithOptionalKey = {
     _key?: string;
 };
-export declare function useStableRecordKey<TRecord extends RecordWithOptionalKey>(prefix: string): (record: TRecord, _index?: number) => string;
+/** A field name (read via bracket access) or a function computing the key directly. */
+export type RecordKeyResolver<TRecord> = string | ((record: TRecord) => string);
+export declare function useStableRecordKey<TRecord extends RecordWithOptionalKey>(prefix: string, 
+/** Explicit resolver, checked BEFORE the RECORD_KEY/WeakMap fallback below — trusted even
+ * across the new object identities a caller's own state management may produce on every
+ * edit (e.g. Form.tsx's `cloneContainer`, which clones the touched record on each keystroke
+ * but preserves this field's VALUE unchanged). Without an explicit resolver, a record with no
+ * `RECORD_KEY` gets a key from a WeakMap keyed by object identity — a fresh clone is a cache
+ * miss and gets a brand-new key, which remounts that row (and any interactive element inside
+ * it, e.g. a Form-bound `<Input>`, losing focus) on every single keystroke. Passing a
+ * resolver for a stable id field already present on the record (e.g. `"id"`) sidesteps this
+ * entirely, since the resolved value never changes across a clone. Absent = unchanged
+ * behavior (RECORD_KEY/WeakMap fallback only). */
+recordId?: RecordKeyResolver<TRecord>): (record: TRecord, _index?: number) => string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llmnative/react",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "LLM-native React framework for deterministic UI generation. Data-driven by default, schema-driven optional. Ultra-low token consumption — built for AI agents, not just humans.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",