@voltro/ui 0.51.0 → 0.53.0

package/dist/index.js

@@ -1,16 +1,17 @@
 import { createContext as e, useContext as t, useId as n, useMemo as r, useState as i } from "react";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useAgentChat as c, useConnection as l, useDataCopilot as u, useDataTable as d, useFormBinding as f, useFormSkeleton as p, useQueryField as m, useQueryFilters as h, useRecord as ee, useTableSkeleton as g, useWorkflowRunState as _ } from "@voltro/client";
+import { FORM_KEY_FIELD as c, FORM_REDIRECT_FIELD as l, formActionPath as u, formSections as d, useAgentChat as f, useConnection as p, useDataCopilot as m, useDataTable as h, useFormBinding as g, useFormFlash as ee, useFormSkeleton as te, useQueryField as ne, useQueryFilters as re, useRecord as _, useTableSkeleton as ie, useWorkflowRunState as v } from "@voltro/client";
+import { useComments as ae } from "@voltro/plugin-comments/web";
 //#region src/widgets.tsx
-var v = (e) => e == null ? "" : String(e), y = ({ required: e }) => e ? /* @__PURE__ */ o("span", {
+var y = (e) => e == null ? "" : String(e), b = ({ required: e }) => e ? /* @__PURE__ */ o("span", {
 	"aria-hidden": "true",
 	children: " *"
-}) : null, b = (e) => /* @__PURE__ */ s("div", {
+}) : null, x = (e) => /* @__PURE__ */ s("div", {
 	"data-voltro-field": !0,
 	children: [
 		/* @__PURE__ */ s("label", {
 			htmlFor: e.id,
-			children: [e.label, /* @__PURE__ */ o(y, { required: e.required })]
+			children: [e.label, /* @__PURE__ */ o(b, { required: e.required })]
 		}),
 		e.description === void 0 ? null : /* @__PURE__ */ o("p", {
 			id: `${e.id}-desc`,
@@ -24,12 +25,12 @@ var v = (e) => e == null ? "" : String(e), y = ({ required: e }) => e ? /* @__PU
 			children: e.error
 		})
 	]
-}), x = (e, t, n) => {
+}), S = (e, t, n) => {
 	let r = [t === void 0 ? "" : `${e}-desc`, n === void 0 ? "" : `${e}-error`].filter(Boolean);
 	return r.length > 0 ? r.join(" ") : void 0;
-}, S = (e) => e ? !0 : void 0, C = (e, t) => (r) => {
+}, C = (e) => e ? !0 : void 0, w = (e, t) => (r) => {
 	let i = n();
-	return /* @__PURE__ */ o(b, {
+	return /* @__PURE__ */ o(x, {
 		id: i,
 		label: r.label,
 		required: r.required,
@@ -39,18 +40,19 @@ var v = (e) => e == null ? "" : String(e), y = ({ required: e }) => e ? /* @__PU
 			id: i,
 			type: e,
 			name: r.name,
-			value: v(r.value),
+			value: y(r.value),
 			onChange: (e) => r.onChange(t(e.target.value)),
+			onBlur: r.onBlur,
 			disabled: r.disabled,
 			required: r.required,
-			"aria-required": S(r.required),
+			"aria-required": C(r.required),
 			"aria-invalid": r.error !== void 0,
-			"aria-describedby": x(i, r.description, r.error)
+			"aria-describedby": S(i, r.description, r.error)
 		})
 	});
-}, te = (e) => {
+}, oe = (e) => {
 	let t = n();
-	return /* @__PURE__ */ o(b, {
+	return /* @__PURE__ */ o(x, {
 		id: t,
 		label: e.label,
 		required: e.required,
@@ -59,18 +61,19 @@ var v = (e) => e == null ? "" : String(e), y = ({ required: e }) => e ? /* @__PU
 		children: /* @__PURE__ */ o("textarea", {
 			id: t,
 			name: e.name,
-			value: v(e.value),
+			value: y(e.value),
 			onChange: (t) => e.onChange(t.target.value),
 			disabled: e.disabled,
+			onBlur: e.onBlur,
 			required: e.required,
-			"aria-required": S(e.required),
+			"aria-required": C(e.required),
 			"aria-invalid": e.error !== void 0,
-			"aria-describedby": x(t, e.description, e.error)
+			"aria-describedby": S(t, e.description, e.error)
 		})
 	});
-}, w = (e) => {
+}, T = (e) => {
 	let t = n();
-	return /* @__PURE__ */ o(b, {
+	return /* @__PURE__ */ o(x, {
 		id: t,
 		label: e.label,
 		required: e.required,
@@ -83,198 +86,233 @@ var v = (e) => e == null ? "" : String(e), y = ({ required: e }) => e ? /* @__PU
 			checked: e.value === !0,
 			onChange: (t) => e.onChange(t.target.checked),
 			disabled: e.disabled,
-			"aria-required": S(e.required),
+			onBlur: e.onBlur,
+			"aria-required": C(e.required),
 			"aria-invalid": e.error !== void 0,
-			"aria-describedby": x(t, e.description, e.error)
+			"aria-describedby": S(t, e.description, e.error)
 		})
 	});
-}, T = {
-	text: C("text", (e) => e),
-	number: C("number", (e) => e === "" ? void 0 : Number(e)),
-	date: C("date", (e) => e),
-	datetime: C("datetime-local", (e) => e),
-	daterange: C("text", (e) => e),
-	file: (e) => {
-		let t = n();
-		return /* @__PURE__ */ o(b, {
+}, se = (e) => {
+	let t = n();
+	return /* @__PURE__ */ o(x, {
+		id: t,
+		label: e.label,
+		required: e.required,
+		description: e.description,
+		error: e.error,
+		children: /* @__PURE__ */ s("select", {
 			id: t,
-			label: e.label,
+			name: e.name,
+			value: y(e.value),
+			onChange: (t) => e.onChange(t.target.value),
+			disabled: e.disabled,
+			onBlur: e.onBlur,
 			required: e.required,
-			description: e.description,
-			error: e.error,
-			children: /* @__PURE__ */ o("input", {
-				id: t,
-				type: "file",
-				name: e.name,
-				onChange: (t) => e.onChange(t.target.files?.[0] ?? null),
-				disabled: e.disabled,
-				required: e.required,
-				"aria-required": S(e.required),
-				"aria-invalid": e.error !== void 0,
-				"aria-describedby": x(t, e.description, e.error)
+			"aria-required": C(e.required),
+			"aria-invalid": e.error !== void 0,
+			"aria-describedby": S(t, e.description, e.error),
+			children: [/* @__PURE__ */ o("option", {
+				value: "",
+				children: "—"
+			}), (e.options ?? []).map((e) => /* @__PURE__ */ o("option", {
+				value: e.value,
+				children: e.label
+			}, e.value))]
+		})
+	});
+}, ce = (e) => {
+	let t = n();
+	return /* @__PURE__ */ s("fieldset", {
+		"data-voltro-field": !0,
+		"aria-invalid": e.error !== void 0,
+		"aria-required": C(e.required),
+		"aria-describedby": S(t, e.description, e.error),
+		children: [
+			/* @__PURE__ */ s("legend", { children: [e.label, /* @__PURE__ */ o(b, { required: e.required })] }),
+			e.description === void 0 ? null : /* @__PURE__ */ o("p", {
+				id: `${t}-desc`,
+				"data-voltro-field-hint": !0,
+				children: e.description
+			}),
+			(e.options ?? []).map((n) => {
+				let r = `${t}-${n.value}`;
+				return /* @__PURE__ */ s("span", { children: [/* @__PURE__ */ o("input", {
+					id: r,
+					type: "radio",
+					name: e.name,
+					value: n.value,
+					checked: y(e.value) === n.value,
+					onChange: () => e.onChange(n.value),
+					disabled: e.disabled,
+					onBlur: e.onBlur
+				}), /* @__PURE__ */ o("label", {
+					htmlFor: r,
+					children: n.label
+				})] }, n.value);
+			}),
+			e.error === void 0 ? null : /* @__PURE__ */ o("p", {
+				id: `${t}-error`,
+				role: "alert",
+				children: e.error
 			})
-		});
-	},
-	"async-select": C("text", (e) => e),
-	textarea: te,
-	checkbox: w,
-	switch: w,
-	select: (e) => {
-		let t = n();
-		return /* @__PURE__ */ o(b, {
+		]
+	});
+}, le = (e) => {
+	let t = n(), r = Array.isArray(e.value) ? e.value.map(String) : [];
+	return /* @__PURE__ */ o(x, {
+		id: t,
+		label: e.label,
+		required: e.required,
+		description: e.description,
+		error: e.error,
+		children: /* @__PURE__ */ o("select", {
 			id: t,
-			label: e.label,
-			required: e.required,
-			description: e.description,
-			error: e.error,
-			children: /* @__PURE__ */ s("select", {
-				id: t,
-				name: e.name,
-				value: v(e.value),
-				onChange: (t) => e.onChange(t.target.value),
-				disabled: e.disabled,
-				required: e.required,
-				"aria-required": S(e.required),
-				"aria-invalid": e.error !== void 0,
-				"aria-describedby": x(t, e.description, e.error),
-				children: [/* @__PURE__ */ o("option", {
-					value: "",
-					children: "—"
-				}), (e.options ?? []).map((e) => /* @__PURE__ */ o("option", {
-					value: e.value,
-					children: e.label
-				}, e.value))]
-			})
-		});
-	},
-	radio: (e) => {
-		let t = n();
-		return /* @__PURE__ */ s("fieldset", {
-			"data-voltro-field": !0,
+			name: e.name,
+			multiple: !0,
+			value: r,
+			onChange: (t) => e.onChange(Array.from(t.target.selectedOptions, (e) => e.value)),
+			disabled: e.disabled,
+			onBlur: e.onBlur,
+			"aria-required": C(e.required),
 			"aria-invalid": e.error !== void 0,
-			"aria-required": S(e.required),
-			"aria-describedby": x(t, e.description, e.error),
-			children: [
-				/* @__PURE__ */ s("legend", { children: [e.label, /* @__PURE__ */ o(y, { required: e.required })] }),
-				e.description === void 0 ? null : /* @__PURE__ */ o("p", {
-					id: `${t}-desc`,
-					"data-voltro-field-hint": !0,
-					children: e.description
-				}),
-				(e.options ?? []).map((n) => {
-					let r = `${t}-${n.value}`;
-					return /* @__PURE__ */ s("span", { children: [/* @__PURE__ */ o("input", {
-						id: r,
-						type: "radio",
-						name: e.name,
-						value: n.value,
-						checked: v(e.value) === n.value,
-						onChange: () => e.onChange(n.value),
-						disabled: e.disabled
-					}), /* @__PURE__ */ o("label", {
-						htmlFor: r,
-						children: n.label
-					})] }, n.value);
-				}),
-				e.error === void 0 ? null : /* @__PURE__ */ o("p", {
-					id: `${t}-error`,
-					role: "alert",
-					children: e.error
-				})
-			]
-		});
-	},
-	"multi-select": (e) => {
-		let t = n(), r = Array.isArray(e.value) ? e.value.map(String) : [];
-		return /* @__PURE__ */ o(b, {
+			"aria-describedby": S(t, e.description, e.error),
+			children: (e.options ?? []).map((e) => /* @__PURE__ */ o("option", {
+				value: e.value,
+				children: e.label
+			}, e.value))
+		})
+	});
+}, ue = (e) => /* @__PURE__ */ o("input", {
+	type: "hidden",
+	name: e.name,
+	value: y(e.value),
+	readOnly: !0
+}), de = (e) => {
+	let t = n();
+	return /* @__PURE__ */ o(x, {
+		id: t,
+		label: e.label,
+		required: e.required,
+		description: e.description,
+		error: e.error,
+		children: /* @__PURE__ */ o("input", {
 			id: t,
-			label: e.label,
+			type: "file",
+			name: e.name,
+			onChange: (t) => e.onChange(t.target.files?.[0] ?? null),
+			disabled: e.disabled,
+			onBlur: e.onBlur,
 			required: e.required,
-			description: e.description,
-			error: e.error,
-			children: /* @__PURE__ */ o("select", {
-				id: t,
-				name: e.name,
-				multiple: !0,
-				value: r,
-				onChange: (t) => e.onChange(Array.from(t.target.selectedOptions, (e) => e.value)),
-				disabled: e.disabled,
-				"aria-required": S(e.required),
-				"aria-invalid": e.error !== void 0,
-				"aria-describedby": x(t, e.description, e.error),
-				children: (e.options ?? []).map((e) => /* @__PURE__ */ o("option", {
-					value: e.value,
-					children: e.label
-				}, e.value))
-			})
-		});
-	},
-	hidden: (e) => /* @__PURE__ */ o("input", {
-		type: "hidden",
-		name: e.name,
-		value: v(e.value),
-		readOnly: !0
-	}),
-	custom: (e) => /* @__PURE__ */ s("div", {
-		"data-voltro-field": !0,
-		"data-voltro-custom": !0,
-		children: [/* @__PURE__ */ s("label", { children: [e.label, /* @__PURE__ */ o(y, { required: e.required })] }), /* @__PURE__ */ o("p", {
-			role: "note",
-			children: `No default widget for "${e.name}" — provide a render-prop via <Field>.`
-		})]
-	})
-}, E = e({}), D = (e) => {
-	let n = t(E), i = r(() => ({
+			"aria-required": C(e.required),
+			"aria-invalid": e.error !== void 0,
+			"aria-describedby": S(t, e.description, e.error)
+		})
+	});
+}, E = (e) => /* @__PURE__ */ s("div", {
+	"data-voltro-field": !0,
+	"data-voltro-custom": !0,
+	children: [/* @__PURE__ */ s("label", { children: [e.label, /* @__PURE__ */ o(b, { required: e.required })] }), /* @__PURE__ */ o("p", {
+		role: "note",
+		children: `No default widget for "${e.name}" — provide a render-prop via <Field>.`
+	})]
+}), D = {
+	text: w("text", (e) => e),
+	number: w("number", (e) => e === "" ? void 0 : Number(e)),
+	date: w("date", (e) => e),
+	datetime: w("datetime-local", (e) => e),
+	daterange: w("text", (e) => e),
+	file: de,
+	"async-select": w("text", (e) => e),
+	textarea: oe,
+	checkbox: T,
+	switch: T,
+	select: se,
+	radio: ce,
+	"multi-select": le,
+	hidden: ue,
+	array: E,
+	reference: E,
+	custom: E
+}, O = e({}), fe = (e) => {
+	let n = t(O), i = r(() => ({
 		...n,
 		...e.widgets
 	}), [n, e.widgets]);
-	return /* @__PURE__ */ o(E.Provider, {
+	return /* @__PURE__ */ o(O.Provider, {
 		value: i,
 		children: e.children
 	});
-}, O = (e) => t(E)[e] ?? T[e] ?? T.custom, k = e(null), ne = () => {
-	let e = t(k);
+}, k = (e) => t(O)[e] ?? D[e] ?? D.custom, A = e(null), pe = () => {
+	let e = t(A);
 	if (e === null) throw Error("<Field> must be rendered inside <AutoForm>");
 	return e;
-}, re = (e, t) => {
-	let n = e.errors[t.name], r = t.jsonSchema.description;
+}, me = (e, t) => {
+	let n = e.field(t.name);
 	return {
 		name: t.name,
 		label: t.label,
-		value: e.values[t.name],
-		onChange: (n) => e.setValue(t.name, n),
+		value: n.value,
+		onChange: n.setValue,
+		onBlur: n.onBlur,
 		required: t.required,
 		disabled: e.pending,
-		...n === void 0 ? {} : { error: n },
+		...n.error === void 0 ? {} : { error: n.error },
 		...t.options ? { options: t.options } : {},
-		...typeof r == "string" && r.length > 0 ? { description: r } : {}
+		...n.description === void 0 ? {} : { description: n.description },
+		...t.reference === void 0 ? {} : { reference: t.reference }
 	};
-}, A = ({ name: e, children: t }) => {
-	let n = ne(), r = n.fields.find((t) => t.name === e), i = O(r?.widget ?? "custom");
+}, j = ({ name: e, children: t }) => {
+	let n = pe(), r = n.fields.find((t) => t.name === e), i = k(r?.widget ?? "custom");
 	if (r === void 0) return null;
-	let a = re(n, r);
+	let a = me(n, r);
 	return t ? t(a) : /* @__PURE__ */ o(i, { ...a });
 };
-function j(e) {
-	let t = f(e.api, e.mutation, {
+function he(e) {
+	let t = e.formKey ?? e.mutation, n = ee(t), r = g(e.api, e.mutation, {
 		...e.schema ? { schema: e.schema } : {},
-		...e.defaults ? { defaults: e.defaults } : {}
-	});
-	return /* @__PURE__ */ o(k.Provider, {
-		value: t,
+		...e.defaults ? { defaults: e.defaults } : {},
+		...n === void 0 ? {} : { flash: n }
+	}), i = (t) => {
+		t.preventDefault(), r.submit().then((t) => {
+			t !== void 0 && e.onSuccess && e.onSuccess(t);
+		});
+	};
+	return /* @__PURE__ */ o(A.Provider, {
+		value: r,
 		children: /* @__PURE__ */ s("form", {
-			onSubmit: (n) => {
-				n.preventDefault(), t.submit().then((t) => {
-					t !== void 0 && e.onSuccess && e.onSuccess(t);
-				});
+			...e.action === !1 ? {} : {
+				action: u(e.mutation),
+				method: "post"
 			},
+			onSubmit: i,
 			noValidate: !0,
 			"data-voltro-autoform": e.mutation,
-			children: [e.children ? e.children(t) : t.fields.map((e) => /* @__PURE__ */ o(A, { name: e.name }, e.name)), /* @__PURE__ */ o("button", {
-				type: "submit",
-				disabled: t.pending,
-				children: e.submitLabel ?? "Submit"
-			})]
+			children: [
+				e.action === !1 ? null : /* @__PURE__ */ o("input", {
+					type: "hidden",
+					name: c,
+					value: t
+				}),
+				e.action === !1 || e.redirectTo === void 0 ? null : /* @__PURE__ */ o("input", {
+					type: "hidden",
+					name: l,
+					value: e.redirectTo
+				}),
+				e.children ? e.children(r) : d(r.fields).map((e, t) => e.name === void 0 ? e.fields.map((e) => /* @__PURE__ */ o(j, { name: e.name }, e.name)) : /* @__PURE__ */ s("fieldset", {
+					"data-voltro-section": e.name,
+					children: [/* @__PURE__ */ o("legend", { children: e.label ?? e.name }), e.fields.map((e) => /* @__PURE__ */ o(j, { name: e.name }, e.name))]
+				}, e.name)),
+				r.formError === void 0 ? null : /* @__PURE__ */ o("p", {
+					role: "alert",
+					"data-voltro-form-error": "",
+					children: r.formError
+				}),
+				/* @__PURE__ */ o("button", {
+					type: "submit",
+					disabled: r.pending,
+					children: e.submitLabel ?? "Submit"
+				})
+			]
 		})
 	});
 }
@@ -312,6 +350,23 @@ var M = {
 		messageLabel: "Message",
 		send: "Send"
 	},
+	comments: {
+		comment: "Comment",
+		reply: "Reply",
+		replyPlaceholder: "Reply… (@name to mention)",
+		replyLabel: "Reply",
+		newPlaceholder: "Start a discussion… (@name to mention)",
+		newLabel: "New comment",
+		resolve: "Resolve",
+		reopen: "Reopen",
+		markRead: "Mark read",
+		edit: "Edit",
+		edited: "edited",
+		editLabel: "Edit comment",
+		save: "Save",
+		remove: "Delete",
+		react: "React"
+	},
 	appAgent: {
 		toolsSummary: (e) => `${e} tools · acts as you`,
 		needsConfirm: "needs confirm"
@@ -340,7 +395,7 @@ var M = {
 		howToGetToken: "How do I get a token?",
 		loading: "Loading…"
 	}
-}, N = e(M), P = (e, t) => ({
+}, N = e(M), ge = (e, t) => ({
 	filters: {
 		...e.filters,
 		...t.filters
@@ -365,6 +420,10 @@ var M = {
 		...e.agentChat,
 		...t.agentChat
 	},
+	comments: {
+		...e.comments,
+		...t.comments
+	},
 	appAgent: {
 		...e.appAgent,
 		...t.appAgent
@@ -382,21 +441,21 @@ var M = {
 		...t.connectAccount
 	}
 });
-function F(e) {
-	let n = t(N), i = r(() => P(n, e.strings), [n, e.strings]);
+function _e(e) {
+	let n = t(N), i = r(() => ge(n, e.strings), [n, e.strings]);
 	return /* @__PURE__ */ o(N.Provider, {
 		value: i,
 		children: e.children
 	});
 }
-var I = () => t(N), ie = (e) => {
-	let t = m(e.api, e.source, {
+var P = () => t(N), F = (e) => {
+	let t = ne(e.api, e.source, {
 		skipUntilTerm: !0,
 		...e.labelField === void 0 ? {} : { labelField: e.labelField },
 		...e.valueField === void 0 ? {} : { valueField: e.valueField },
 		...e.input === void 0 ? {} : { input: e.input },
 		...e.debounceMs === void 0 ? {} : { debounceMs: e.debounceMs }
-	}), r = I().asyncSelect, i = n(), a = e.value === void 0 || e.value === null ? "" : String(e.value), c = a !== "" && t.options.some((e) => e.value === a), l = `${i}-error`;
+	}), r = P().asyncSelect, i = n(), a = e.value === void 0 || e.value === null ? "" : String(e.value), c = a !== "" && t.options.some((e) => e.value === a), l = `${i}-error`;
 	return /* @__PURE__ */ s("div", {
 		"data-voltro-field": !0,
 		"data-voltro-async-select": !0,
@@ -444,48 +503,48 @@ var I = () => t(N), ie = (e) => {
 			})
 		]
 	});
-}, ae = (e) => e == null ? "" : typeof e == "boolean" ? e ? "✓" : "✗" : String(e), oe = (e, t) => e ? t === "asc" ? "ascending" : "descending" : "none";
-function L(e) {
-	let { api: t, query: n, emptyText: r, loadingText: i, loadMoreText: c, renderCell: l, rowActions: u, rowKey: f, ...p } = e, m = I().dataTable, h = d(t, n, p);
-	return h.loading ? /* @__PURE__ */ o("p", {
+}, I = (e) => e == null ? "" : typeof e == "boolean" ? e ? "✓" : "✗" : String(e), ve = (e, t) => e ? t === "asc" ? "ascending" : "descending" : "none";
+function ye(e) {
+	let { api: t, query: n, emptyText: r, loadingText: i, loadMoreText: c, renderCell: l, rowActions: u, rowKey: d, ...f } = e, p = P().dataTable, m = h(t, n, f);
+	return m.loading ? /* @__PURE__ */ o("p", {
 		"data-voltro-datatable-loading": !0,
 		"aria-busy": "true",
 		children: i ?? "Loading…"
-	}) : h.rows.length === 0 ? /* @__PURE__ */ o("p", {
+	}) : m.rows.length === 0 ? /* @__PURE__ */ o("p", {
 		"data-voltro-datatable-empty": !0,
 		children: r ?? "No rows."
 	}) : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s("table", {
 		"data-voltro-datatable": n,
-		children: [/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ s("tr", { children: [h.columns.map((e) => {
-			let t = h.sort?.column === e.name, n = h.sort?.direction ?? "asc";
+		children: [/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ s("tr", { children: [m.columns.map((e) => {
+			let t = m.sort?.column === e.name, n = m.sort?.direction ?? "asc";
 			return /* @__PURE__ */ o("th", {
-				"aria-sort": oe(t, n),
+				"aria-sort": ve(t, n),
 				scope: "col",
 				children: /* @__PURE__ */ s("button", {
 					type: "button",
-					onClick: () => h.toggleSort(e.name),
+					onClick: () => m.toggleSort(e.name),
 					children: [e.label, t ? n === "asc" ? " ▲" : " ▼" : ""]
 				})
 			}, e.name);
 		}), u ? /* @__PURE__ */ o("th", {
 			scope: "col",
-			children: m.actions
-		}) : null] }) }), /* @__PURE__ */ o("tbody", { children: h.rows.map((e, t) => /* @__PURE__ */ s("tr", { children: [h.columns.map((t) => /* @__PURE__ */ o("td", {
+			children: p.actions
+		}) : null] }) }), /* @__PURE__ */ o("tbody", { children: m.rows.map((e, t) => /* @__PURE__ */ s("tr", { children: [m.columns.map((t) => /* @__PURE__ */ o("td", {
 			"data-column": t.name,
-			children: l ? l(e, t) : ae(e[t.name])
-		}, t.name)), u ? /* @__PURE__ */ o("td", { children: u(e) }) : null] }, f ? f(e) : String(e.id ?? t))) })]
-	}), h.hasMore ? /* @__PURE__ */ o("button", {
+			children: l ? l(e, t) : I(e[t.name])
+		}, t.name)), u ? /* @__PURE__ */ o("td", { children: u(e) }) : null] }, d ? d(e) : String(e.id ?? t))) })]
+	}), m.hasMore ? /* @__PURE__ */ o("button", {
 		type: "button",
 		"data-voltro-datatable-more": !0,
-		onClick: () => h.loadMore(),
+		onClick: () => m.loadMore(),
 		children: c ?? "Load more"
 	}) : null] });
 }
 //#endregion
 //#region src/workflow.tsx
-var se = (e) => e === "succeeded" ? "✓" : e === "failed" ? "✗" : "…";
-function ce(e) {
-	let { api: t, runId: n, loadingText: r, emptyText: i } = e, a = I().workflow, c = _(t, n);
+var be = (e) => e === "succeeded" ? "✓" : e === "failed" ? "✗" : "…";
+function xe(e) {
+	let { api: t, runId: n, loadingText: r, emptyText: i } = e, a = P().workflow, c = v(t, n);
 	return c.loading ? /* @__PURE__ */ o("p", {
 		"data-voltro-workflow-loading": !0,
 		"aria-busy": "true",
@@ -505,7 +564,7 @@ function ce(e) {
 				children: [
 					/* @__PURE__ */ o("span", {
 						"aria-hidden": "true",
-						children: se(e.status)
+						children: be(e.status)
 					}),
 					" ",
 					e.stepName,
@@ -530,8 +589,8 @@ function ce(e) {
 		})
 	});
 }
-function le(e) {
-	let { api: t, runId: n } = e, r = I().workflow, i = _(t, n);
+function Se(e) {
+	let { api: t, runId: n } = e, r = P().workflow, i = v(t, n);
 	if (i.loading || i.status === void 0) return /* @__PURE__ */ o("span", {
 		"data-voltro-workflow-badge": !0,
 		"data-status": "loading",
@@ -548,7 +607,7 @@ function le(e) {
 		}) : null]
 	});
 }
-function ue(e) {
+function Ce(e) {
 	let { when: t, onApprove: n, onReject: r, approveLabel: i, rejectLabel: a, pending: c } = e;
 	return t ? /* @__PURE__ */ s("div", {
 		"data-voltro-approval-controls": !0,
@@ -571,15 +630,15 @@ function ue(e) {
 }
 //#endregion
 //#region src/presence.tsx
-var R = (e, t) => {
+var L = (e, t) => {
 	let n = e.meta?.[t];
 	return typeof n == "string" ? n : void 0;
-}, z = (e) => R(e, "name") ?? R(e, "displayName") ?? e.key, B = (e) => {
+}, R = (e) => L(e, "name") ?? L(e, "displayName") ?? e.key, z = (e) => {
 	let t = e.trim().split(/\s+/).filter(Boolean);
 	return t.length === 0 ? "?" : t.length === 1 ? t[0].slice(0, 2).toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
 };
-function V(e) {
-	let { members: t, max: n = 5, nameOf: r = z, renderAvatar: i } = e, a = I().presence, c = t.slice(0, n), l = t.length - c.length;
+function we(e) {
+	let { members: t, max: n = 5, nameOf: r = R, renderAvatar: i } = e, a = P().presence, c = t.slice(0, n), l = t.length - c.length;
 	return /* @__PURE__ */ s("div", {
 		"data-voltro-presence-avatars": !0,
 		role: "group",
@@ -590,7 +649,7 @@ function V(e) {
 				"data-avatar": !0,
 				title: t,
 				"aria-label": t,
-				children: B(t)
+				children: z(t)
 			}, e.key);
 		}), l > 0 ? /* @__PURE__ */ s("span", {
 			"data-avatar-overflow": !0,
@@ -599,33 +658,33 @@ function V(e) {
 		}) : null]
 	});
 }
-var H = (e, t, n = M.presence) => e.length === 0 ? "" : e.length === 1 ? n.editingOne(e[0], t) : e.length === 2 ? n.editingTwo(e[0], e[1], t) : n.editingMany(e[0], e.length - 1, t);
-function de(e) {
-	let { members: t, selfKey: n, field: r, verb: i = "editing", nameOf: a = z } = e, s = I().presence, c = t.filter((e) => !(n !== void 0 && e.key === n || r !== void 0 && R(e, "field") !== r));
+var B = (e, t, n = M.presence) => e.length === 0 ? "" : e.length === 1 ? n.editingOne(e[0], t) : e.length === 2 ? n.editingTwo(e[0], e[1], t) : n.editingMany(e[0], e.length - 1, t);
+function Te(e) {
+	let { members: t, selfKey: n, field: r, verb: i = "editing", nameOf: a = R } = e, s = P().presence, c = t.filter((e) => !(n !== void 0 && e.key === n || r !== void 0 && L(e, "field") !== r));
 	return c.length === 0 ? null : /* @__PURE__ */ o("span", {
 		"data-voltro-editing-indicator": !0,
 		"data-field": r,
 		role: "status",
-		children: H(c.map(a), i, s)
+		children: B(c.map(a), i, s)
 	});
 }
 //#endregion
 //#region src/agentChat.tsx
-var U = (e) => typeof e.text == "string" ? e.text : "";
-function fe({ text: e }) {
-	let t = I().agentChat;
+var V = (e) => typeof e.text == "string" ? e.text : "";
+function Ee({ text: e }) {
+	let t = P().agentChat;
 	return /* @__PURE__ */ s("details", {
 		"data-part": "reasoning",
 		children: [/* @__PURE__ */ o("summary", { children: t.reasoning }), /* @__PURE__ */ o("span", { children: e })]
 	});
 }
-function W({ part: e }) {
+function H({ part: e }) {
 	switch (e.type) {
 		case "text": return /* @__PURE__ */ o("span", {
 			"data-part": "text",
-			children: U(e)
+			children: V(e)
 		});
-		case "reasoning": return /* @__PURE__ */ o(fe, { text: U(e) });
+		case "reasoning": return /* @__PURE__ */ o(Ee, { text: V(e) });
 		case "tool": {
 			let t = e;
 			return /* @__PURE__ */ s("span", {
@@ -665,14 +724,14 @@ function W({ part: e }) {
 		});
 	}
 }
-function G({ message: e }) {
+function U({ message: e }) {
 	let t = e.parts ?? [];
 	return /* @__PURE__ */ s("div", {
 		"data-voltro-agent-message": !0,
 		"data-role": e.role,
 		"data-streaming": e.streaming ? "true" : void 0,
 		"aria-busy": e.streaming ? "true" : void 0,
-		children: [t.length > 0 ? t.map((e, t) => /* @__PURE__ */ o(W, { part: e }, t)) : /* @__PURE__ */ o("span", {
+		children: [t.length > 0 ? t.map((e, t) => /* @__PURE__ */ o(H, { part: e }, t)) : /* @__PURE__ */ o("span", {
 			"data-part": "text",
 			children: e.content
 		}), e.streaming ? /* @__PURE__ */ o("span", {
@@ -682,10 +741,10 @@ function G({ message: e }) {
 		}) : null]
 	});
 }
-function K(e) {
-	let { api: t, agent: n, threadId: r, placeholder: a, sendLabel: l, emptyText: u } = e, d = I().agentChat, f = c(t, n, { threadId: r }), [p, m] = i(""), h = () => {
+function W(e) {
+	let { api: t, agent: n, threadId: r, placeholder: a, sendLabel: c, emptyText: l } = e, u = P().agentChat, d = f(t, n, { threadId: r }), [p, m] = i(""), h = () => {
 		let e = p.trim();
-		e.length === 0 || f.sending || (m(""), f.send(e));
+		e.length === 0 || d.sending || (m(""), d.send(e));
 	};
 	return /* @__PURE__ */ s("div", {
 		"data-voltro-agent-chat": n,
@@ -693,11 +752,11 @@ function K(e) {
 			"data-messages": !0,
 			role: "log",
 			"aria-live": "polite",
-			"aria-busy": f.streaming ? "true" : void 0,
-			children: f.messages.length === 0 && !f.loading ? /* @__PURE__ */ o("p", {
+			"aria-busy": d.streaming ? "true" : void 0,
+			children: d.messages.length === 0 && !d.loading ? /* @__PURE__ */ o("p", {
 				"data-empty": !0,
-				children: u ?? "No messages yet."
-			}) : f.messages.map((e) => /* @__PURE__ */ o(G, { message: e }, e.id))
+				children: l ?? "No messages yet."
+			}) : d.messages.map((e) => /* @__PURE__ */ o(U, { message: e }, e.id))
 		}), /* @__PURE__ */ s("form", {
 			"data-composer": !0,
 			onSubmit: (e) => {
@@ -706,25 +765,25 @@ function K(e) {
 			children: [/* @__PURE__ */ o("input", {
 				value: p,
 				onChange: (e) => m(e.target.value),
-				placeholder: a ?? d.messagePlaceholder,
-				"aria-label": d.messageLabel,
-				disabled: f.sending
+				placeholder: a ?? u.messagePlaceholder,
+				"aria-label": u.messageLabel,
+				disabled: d.sending
 			}), /* @__PURE__ */ o("button", {
 				type: "submit",
-				disabled: f.sending || p.trim().length === 0,
-				children: l ?? d.send
+				disabled: d.sending || p.trim().length === 0,
+				children: c ?? u.send
 			})]
 		})]
 	});
 }
-function pe(e) {
-	let t = c(e.api, e.agent, { threadId: e.threadId });
+function De(e) {
+	let t = f(e.api, e.agent, { threadId: e.threadId });
 	return e.children(t);
 }
 //#endregion
 //#region src/appAgent.tsx
-function me(e) {
-	let { tools: t, showTools: n, ...r } = e, i = I().appAgent, a = (n ?? (t !== void 0 && t.length > 0)) && t && t.length > 0;
+function Oe(e) {
+	let { tools: t, showTools: n, ...r } = e, i = P().appAgent, a = (n ?? (t !== void 0 && t.length > 0)) && t && t.length > 0;
 	return /* @__PURE__ */ s("div", {
 		"data-voltro-app-agent": r.agent,
 		children: [a ? /* @__PURE__ */ s("details", {
@@ -744,17 +803,17 @@ function me(e) {
 					}) : null
 				]
 			}, e.name)) })]
-		}) : null, /* @__PURE__ */ o(K, { ...r })]
+		}) : null, /* @__PURE__ */ o(W, { ...r })]
 	});
 }
 //#endregion
 //#region src/dataCopilot.tsx
-var he = (e) => e == null ? "" : typeof e == "boolean" ? e ? "✓" : "✗" : typeof e == "object" ? JSON.stringify(e) : String(e), ge = (e) => {
+var ke = (e) => e == null ? "" : typeof e == "boolean" ? e ? "✓" : "✗" : typeof e == "object" ? JSON.stringify(e) : String(e), Ae = (e) => {
 	let t = /* @__PURE__ */ new Set(), n = [];
 	for (let r of e) for (let e of Object.keys(r)) t.has(e) || (t.add(e), n.push(e));
 	return n;
 };
-function q(e) {
+function G(e) {
 	let { answer: t, emptyText: n } = e;
 	if (t === void 0) return null;
 	if (!t.ok) return /* @__PURE__ */ o("p", {
@@ -766,7 +825,7 @@ function q(e) {
 		"data-voltro-data-copilot-empty": !0,
 		children: n ?? "No rows."
 	});
-	let r = ge(t.rows);
+	let r = Ae(t.rows);
 	return /* @__PURE__ */ s("table", {
 		"data-voltro-data-copilot-results": !0,
 		children: [/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ o("tr", { children: r.map((e) => /* @__PURE__ */ o("th", {
@@ -774,13 +833,13 @@ function q(e) {
 			children: e
 		}, e)) }) }), /* @__PURE__ */ o("tbody", { children: t.rows.map((e, t) => /* @__PURE__ */ o("tr", { children: r.map((t) => /* @__PURE__ */ o("td", {
 			"data-column": t,
-			children: he(e[t])
+			children: ke(e[t])
 		}, t)) }, String(e.id ?? t))) })]
 	});
 }
-function _e(e) {
-	let { api: t, action: n, placeholder: r, askLabel: a, emptyText: c } = e, l = u(t, n), [d, f] = i(""), p = () => {
-		let e = d.trim();
+function je(e) {
+	let { api: t, action: n, placeholder: r, askLabel: a, emptyText: c } = e, l = m(t, n), [u, d] = i(""), f = () => {
+		let e = u.trim();
 		e.length === 0 || l.pending || l.ask(e);
 	};
 	return /* @__PURE__ */ s("div", {
@@ -788,24 +847,24 @@ function _e(e) {
 		children: [/* @__PURE__ */ s("form", {
 			"data-composer": !0,
 			onSubmit: (e) => {
-				e.preventDefault(), p();
+				e.preventDefault(), f();
 			},
 			children: [/* @__PURE__ */ o("input", {
-				value: d,
-				onChange: (e) => f(e.target.value),
+				value: u,
+				onChange: (e) => d(e.target.value),
 				placeholder: r ?? "Ask about your data…",
 				"aria-label": "Ask about your data",
 				disabled: l.pending
 			}), /* @__PURE__ */ o("button", {
 				type: "submit",
-				disabled: l.pending || d.trim().length === 0,
+				disabled: l.pending || u.trim().length === 0,
 				children: a ?? "Ask"
 			})]
 		}), /* @__PURE__ */ o("div", {
 			"data-answer": !0,
 			"aria-live": "polite",
 			"aria-busy": l.pending ? "true" : void 0,
-			children: l.error === void 0 ? /* @__PURE__ */ o(q, {
+			children: l.error === void 0 ? /* @__PURE__ */ o(G, {
 				answer: l.answer,
 				...c === void 0 ? {} : { emptyText: c }
 			}) : /* @__PURE__ */ o("p", {
@@ -816,13 +875,13 @@ function _e(e) {
 		})]
 	});
 }
-function ve(e) {
-	let t = u(e.api, e.action);
+function Me(e) {
+	let t = m(e.api, e.action);
 	return e.children(t);
 }
 //#endregion
 //#region src/skeleton.tsx
-var J = ({ w: e }) => /* @__PURE__ */ o("span", {
+var K = ({ w: e }) => /* @__PURE__ */ o("span", {
 	"data-skeleton-bar": !0,
 	style: {
 		display: "inline-block",
@@ -832,45 +891,55 @@ var J = ({ w: e }) => /* @__PURE__ */ o("span", {
 	},
 	"aria-hidden": "true"
 });
-function ye(e) {
-	let t = p(e.api, e.mutation), n = t.length > 0 ? t.length : e.fallbackFields ?? 3, r = t.length > 0 ? t.map((e) => e.name) : Array.from({ length: n }, (e, t) => `f${t}`);
+function Ne(e) {
+	let t = te(e.api, e.mutation), n = t.length > 0 ? t.length : e.fallbackFields ?? 3, r = t.length > 0 ? d(t) : [{
+		name: void 0,
+		label: void 0,
+		fields: Array.from({ length: n }, (e, t) => ({ name: `f${t}` }))
+	}];
 	return /* @__PURE__ */ o("div", {
 		"data-voltro-form-skeleton": e.mutation,
 		"aria-busy": "true",
 		"aria-hidden": "true",
-		children: r.map((e) => /* @__PURE__ */ s("div", {
-			"data-skeleton-field": !0,
-			children: [/* @__PURE__ */ o(J, { w: "30%" }), /* @__PURE__ */ o(J, {})]
-		}, e))
+		children: r.map((e, t) => /* @__PURE__ */ s("div", {
+			...e.name === void 0 ? {} : { "data-skeleton-section": e.name },
+			children: [e.name !== void 0 && /* @__PURE__ */ o("div", {
+				"data-skeleton-section-title": !0,
+				children: /* @__PURE__ */ o(K, { w: "40%" })
+			}), e.fields.map((e) => /* @__PURE__ */ s("div", {
+				"data-skeleton-field": !0,
+				children: [/* @__PURE__ */ o(K, { w: "30%" }), /* @__PURE__ */ o(K, {})]
+			}, e.name))]
+		}, e.name ?? `_${t}`))
 	});
 }
-function be(e) {
-	let t = g(e.api, e.query), n = t.length > 0 ? t.length : e.fallbackColumns ?? 4, r = t.length > 0 ? t.map((e) => e.name) : Array.from({ length: n }, (e, t) => `c${t}`), i = e.rows ?? 5;
+function Pe(e) {
+	let t = ie(e.api, e.query), n = t.length > 0 ? t.length : e.fallbackColumns ?? 4, r = t.length > 0 ? t.map((e) => e.name) : Array.from({ length: n }, (e, t) => `c${t}`), i = e.rows ?? 5;
 	return /* @__PURE__ */ s("table", {
 		"data-voltro-table-skeleton": e.query,
 		"aria-busy": "true",
 		"aria-hidden": "true",
 		children: [/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ o("tr", { children: r.map((e) => /* @__PURE__ */ o("th", {
 			scope: "col",
-			children: /* @__PURE__ */ o(J, { w: "60%" })
+			children: /* @__PURE__ */ o(K, { w: "60%" })
 		}, e)) }) }), /* @__PURE__ */ o("tbody", { children: Array.from({ length: i }, (e, t) => /* @__PURE__ */ o("tr", {
 			"data-skeleton-row": !0,
-			children: r.map((e) => /* @__PURE__ */ o("td", { children: /* @__PURE__ */ o(J, {}) }, e))
+			children: r.map((e) => /* @__PURE__ */ o("td", { children: /* @__PURE__ */ o(K, {}) }, e))
 		}, t)) })]
 	});
 }
 //#endregion
 //#region src/filters.tsx
-var Y = (e) => e == null ? "" : String(e);
-function xe(e) {
-	let { filter: t, value: n, onChange: r } = e, i = I().filters, a = {
+var q = (e) => e == null ? "" : String(e);
+function Fe(e) {
+	let { filter: t, value: n, onChange: r } = e, i = P().filters, a = {
 		"data-filter": t.name,
 		"aria-label": t.label
 	};
 	switch (t.kind) {
 		case "select": return /* @__PURE__ */ s("select", {
 			...a,
-			value: Y(n),
+			value: q(n),
 			onChange: (e) => r(e.target.value || void 0),
 			children: [/* @__PURE__ */ o("option", {
 				value: "",
@@ -905,7 +974,7 @@ function xe(e) {
 				children: [/* @__PURE__ */ o("input", {
 					"aria-label": `${t.label} from`,
 					type: e,
-					value: Y(i.gte),
+					value: q(i.gte),
 					onChange: (e) => r({
 						...i,
 						gte: e.target.value || void 0
@@ -913,7 +982,7 @@ function xe(e) {
 				}), /* @__PURE__ */ o("input", {
 					"aria-label": `${t.label} to`,
 					type: e,
-					value: Y(i.lte),
+					value: q(i.lte),
 					onChange: (e) => r({
 						...i,
 						lte: e.target.value || void 0
@@ -924,13 +993,13 @@ function xe(e) {
 		default: return /* @__PURE__ */ o("input", {
 			...a,
 			type: "text",
-			value: Y(n),
+			value: q(n),
 			onChange: (e) => r(e.target.value || void 0)
 		});
 	}
 }
-function Se(e) {
-	let t = h(e.api, e.query, e.initial ? { initial: e.initial } : {}), n = I().filters;
+function J(e) {
+	let t = re(e.api, e.query, e.initial ? { initial: e.initial } : {}), n = P().filters;
 	return /* @__PURE__ */ s("div", {
 		"data-voltro-query-filters": e.query,
 		children: [/* @__PURE__ */ s("div", {
@@ -940,7 +1009,7 @@ function Se(e) {
 			children: [
 				t.filters.map((e) => /* @__PURE__ */ s("label", {
 					"data-filter-label": !0,
-					children: [/* @__PURE__ */ o("span", { children: e.label }), /* @__PURE__ */ o(xe, {
+					children: [/* @__PURE__ */ o("span", { children: e.label }), /* @__PURE__ */ o(Fe, {
 						filter: e,
 						value: t.values[e.name],
 						onChange: (n) => t.setFilter(e.name, n)
@@ -962,25 +1031,25 @@ function Se(e) {
 }
 //#endregion
 //#region src/recordView.tsx
-var X = (e) => e.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/\s+/g, " ").trim().replace(/^./, (e) => e.toUpperCase()), Z = (e) => Array.isArray(e) && e.every((e) => typeof e == "object" && !!e), Q = (e) => e == null ? "—" : typeof e == "boolean" ? e ? "✓" : "✗" : String(e);
-function Ce({ name: e, items: t }) {
-	let n = I().recordView;
+var Y = (e) => e.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/\s+/g, " ").trim().replace(/^./, (e) => e.toUpperCase()), X = (e) => Array.isArray(e) && e.every((e) => typeof e == "object" && !!e), Z = (e) => e == null ? "—" : typeof e == "boolean" ? e ? "✓" : "✗" : String(e);
+function Ie({ name: e, items: t }) {
+	let n = P().recordView;
 	if (t.length === 0) return /* @__PURE__ */ o("p", {
 		"data-relation": e,
 		"data-empty": !0,
-		children: n.emptyRelation(X(e).toLowerCase())
+		children: n.emptyRelation(Y(e).toLowerCase())
 	});
 	let r = Object.keys(t[0]);
 	return /* @__PURE__ */ s("table", {
 		"data-relation": e,
 		children: [/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ o("tr", { children: r.map((e) => /* @__PURE__ */ o("th", {
 			scope: "col",
-			children: X(e)
-		}, e)) }) }), /* @__PURE__ */ o("tbody", { children: t.map((e, t) => /* @__PURE__ */ o("tr", { children: r.map((t) => /* @__PURE__ */ o("td", { children: Q(e[t]) }, t)) }, String(e.id ?? t))) })]
+			children: Y(e)
+		}, e)) }) }), /* @__PURE__ */ o("tbody", { children: t.map((e, t) => /* @__PURE__ */ o("tr", { children: r.map((t) => /* @__PURE__ */ o("td", { children: Z(e[t]) }, t)) }, String(e.id ?? t))) })]
 	});
 }
-function we(e) {
-	let { api: t, query: n, input: r, fields: i, renderField: a, renderRelation: c, loadingText: l, emptyText: u } = e, { record: d, loading: f } = ee(t, n, r ?? {});
+function Le(e) {
+	let { api: t, query: n, input: r, fields: i, renderField: a, renderRelation: c, loadingText: l, emptyText: u } = e, { record: d, loading: f } = _(t, n, r ?? {});
 	if (f) return /* @__PURE__ */ o("p", {
 		"data-voltro-record-loading": !0,
 		"aria-busy": "true",
@@ -990,18 +1059,18 @@ function we(e) {
 		"data-voltro-record-empty": !0,
 		children: u ?? "Not found."
 	});
-	let p = Object.entries(d), m = p.filter(([e, t]) => !Z(t) && (i === void 0 || i.includes(e))), h = p.filter(([, e]) => Z(e)), g = i === void 0 ? m : i.map((e) => [e, d[e]]).filter(([, e]) => !Z(e));
+	let p = Object.entries(d), m = p.filter(([e, t]) => !X(t) && (i === void 0 || i.includes(e))), h = p.filter(([, e]) => X(e)), g = i === void 0 ? m : i.map((e) => [e, d[e]]).filter(([, e]) => !X(e));
 	return /* @__PURE__ */ s("div", {
 		"data-voltro-record-view": n,
 		children: [/* @__PURE__ */ o("dl", {
 			"data-record-fields": !0,
 			children: g.map(([e, t]) => /* @__PURE__ */ s("div", {
 				"data-field": e,
-				children: [/* @__PURE__ */ o("dt", { children: X(e) }), /* @__PURE__ */ o("dd", { children: a ? a(e, t, d) : Q(t) })]
+				children: [/* @__PURE__ */ o("dt", { children: Y(e) }), /* @__PURE__ */ o("dd", { children: a ? a(e, t, d) : Z(t) })]
 			}, e))
 		}), h.map(([e, t]) => /* @__PURE__ */ s("section", {
 			"data-record-relation": e,
-			children: [/* @__PURE__ */ o("h3", { children: X(e) }), c ? c(e, t, d) : /* @__PURE__ */ o(Ce, {
+			children: [/* @__PURE__ */ o("h3", { children: Y(e) }), c ? c(e, t, d) : /* @__PURE__ */ o(Ie, {
 				name: e,
 				items: t
 			})]
@@ -1010,7 +1079,7 @@ function we(e) {
 }
 //#endregion
 //#region src/connectAccount.tsx
-var Te = (e, t) => {
+var Re = (e, t) => {
 	switch (e.status) {
 		case "connected": return e.accountLabel === null ? t.connected : t.connectedAs(e.accountLabel);
 		case "expired": return t.expired;
@@ -1018,15 +1087,15 @@ var Te = (e, t) => {
 		case "error": return t.errored;
 		default: return t.notConnected;
 	}
-}, Ee = ({ api: e, connectionId: t, ...n }) => {
-	let r = l(e, t);
-	return /* @__PURE__ */ o($, {
+}, ze = ({ api: e, connectionId: t, ...n }) => {
+	let r = p(e, t);
+	return /* @__PURE__ */ o(Q, {
 		connection: r,
 		loading: r.loading,
 		...n
 	});
-}, $ = ({ connection: e, instructionsUrl: t, loading: n = !1, children: r, className: c }) => {
-	let l = I().connectAccount, [u, d] = i("");
+}, Q = ({ connection: e, instructionsUrl: t, loading: n = !1, children: r, className: c }) => {
+	let l = P().connectAccount, [u, d] = i("");
 	if (r !== void 0) return r(e);
 	if (n) return /* @__PURE__ */ o("div", {
 		className: c,
@@ -1045,7 +1114,7 @@ var Te = (e, t) => {
 			" — ",
 			/* @__PURE__ */ o("span", {
 				role: e.needsAttention ? "alert" : void 0,
-				children: Te(e, l)
+				children: Re(e, l)
 			})
 		] }), e.connected || e.needsAttention ? /* @__PURE__ */ s(a, { children: [e.needsAttention && e.kind === "oauth2" && /* @__PURE__ */ o("button", {
 			type: "button",
@@ -1101,6 +1170,157 @@ var Te = (e, t) => {
 			]
 		})]
 	});
-};
+}, $ = (e) => [...e.matchAll(/@([\w.-]+)/g)].map((e) => e[1]);
+function Be({ comment: e, onReact: t, onRemove: n, onEdit: r }) {
+	let a = P().comments, [c, l] = i(!1), [u, d] = i(e.body);
+	return /* @__PURE__ */ s("li", {
+		"data-comment": e.id,
+		"data-author": e.authorSubjectId,
+		children: [
+			/* @__PURE__ */ o("span", {
+				"data-comment-author": !0,
+				children: e.authorSubjectId
+			}),
+			c ? /* @__PURE__ */ s("form", {
+				"data-comment-edit": !0,
+				onSubmit: (e) => {
+					e.preventDefault(), r(u), l(!1);
+				},
+				children: [/* @__PURE__ */ o("input", {
+					value: u,
+					onChange: (e) => d(e.target.value),
+					"aria-label": a.editLabel
+				}), /* @__PURE__ */ o("button", {
+					type: "submit",
+					children: a.save
+				})]
+			}) : /* @__PURE__ */ s("p", {
+				"data-comment-body": !0,
+				children: [e.body, e.editedAt ? /* @__PURE__ */ s("em", {
+					"data-comment-edited": !0,
+					children: [
+						" (",
+						a.edited,
+						")"
+					]
+				}) : null]
+			}),
+			/* @__PURE__ */ s("span", {
+				"data-comment-reactions": !0,
+				children: [e.reactions.map((e) => /* @__PURE__ */ s("button", {
+					type: "button",
+					"data-reaction": e.emoji,
+					"data-mine": e.mine || void 0,
+					onClick: () => t(e.emoji),
+					children: [
+						e.emoji,
+						" ",
+						e.count
+					]
+				}, e.emoji)), /* @__PURE__ */ o("button", {
+					type: "button",
+					"data-reaction-add": !0,
+					onClick: () => t("👍"),
+					"aria-label": a.react,
+					children: "+👍"
+				})]
+			}),
+			/* @__PURE__ */ s("span", {
+				"data-comment-actions": !0,
+				children: [/* @__PURE__ */ o("button", {
+					type: "button",
+					onClick: () => l((e) => !e),
+					children: a.edit
+				}), /* @__PURE__ */ o("button", {
+					type: "button",
+					onClick: n,
+					children: a.remove
+				})]
+			})
+		]
+	});
+}
+function Ve({ thread: e, api: t }) {
+	let n = P().comments, [r, a] = i("");
+	return /* @__PURE__ */ s("section", {
+		"data-thread": e.id,
+		"data-status": e.status,
+		children: [
+			/* @__PURE__ */ s("header", {
+				"data-thread-header": !0,
+				children: [
+					e.unreadCount > 0 ? /* @__PURE__ */ o("span", {
+						"data-thread-unread": !0,
+						children: e.unreadCount
+					}) : null,
+					/* @__PURE__ */ o("button", {
+						type: "button",
+						"data-thread-resolve": !0,
+						onClick: () => void t.resolve(e.id, e.status !== "resolved"),
+						children: e.status === "resolved" ? n.reopen : n.resolve
+					}),
+					/* @__PURE__ */ o("button", {
+						type: "button",
+						"data-thread-markread": !0,
+						onClick: () => void t.markRead(e.id),
+						children: n.markRead
+					})
+				]
+			}),
+			/* @__PURE__ */ o("ul", {
+				"data-thread-comments": !0,
+				children: e.comments.map((e) => /* @__PURE__ */ o(Be, {
+					comment: e,
+					onReact: (n) => void t.react(e.id, n),
+					onRemove: () => void t.remove(e.id),
+					onEdit: (n) => void t.edit(e.id, n)
+				}, e.id))
+			}),
+			/* @__PURE__ */ s("form", {
+				"data-thread-reply": !0,
+				onSubmit: (n) => {
+					n.preventDefault(), r.trim() !== "" && (t.create(r, {
+						threadId: e.id,
+						mentions: $(r)
+					}), a(""));
+				},
+				children: [/* @__PURE__ */ o("input", {
+					value: r,
+					onChange: (e) => a(e.target.value),
+					placeholder: n.replyPlaceholder,
+					"aria-label": n.replyLabel
+				}), /* @__PURE__ */ o("button", {
+					type: "submit",
+					children: n.reply
+				})]
+			})
+		]
+	});
+}
+function He({ anchor: e, api: t = "app" }) {
+	let n = P().comments, r = ae(e, t), [a, c] = i("");
+	return /* @__PURE__ */ s("div", {
+		"data-comments": !0,
+		"data-anchor": e,
+		children: [r.threads.map((e) => /* @__PURE__ */ o(Ve, {
+			thread: e,
+			api: r
+		}, e.id)), /* @__PURE__ */ s("form", {
+			"data-comments-new": !0,
+			onSubmit: (e) => {
+				e.preventDefault(), a.trim() !== "" && (r.create(a, { mentions: $(a) }), c(""));
+			},
+			children: [/* @__PURE__ */ o("input", {
+				value: a,
+				onChange: (e) => c(e.target.value),
+				placeholder: n.newPlaceholder,
+				"aria-label": n.newLabel
+			}), /* @__PURE__ */ o("button", {
+				type: "submit",
+				children: n.comment
+			})]
+		})]
+	});
+}
 //#endregion
-export { K as AgentChat, G as AgentMessageView, W as AgentPartView, pe as AgentStream, me as AppAgent, ue as ApprovalControls, ie as AsyncSelect, j as AutoForm, $ as ConnectAccount, Ee as ConnectAccountFor, _e as DataCopilot, q as DataCopilotAnswer, ve as DataCopilotStream, L as DataTable, de as EditingIndicator, A as Field, ye as FormSkeleton, V as PresenceAvatars, Se as QueryFilters, we as RecordView, be as TableSkeleton, F as UiStringsProvider, D as WidgetRegistryProvider, ce as WorkflowProgress, le as WorkflowStatusBadge, M as defaultUiStrings, T as defaultWidgets, B as initials, H as summarizeEditors, I as useUiStrings, O as useWidget };
+export { W as AgentChat, U as AgentMessageView, H as AgentPartView, De as AgentStream, Oe as AppAgent, Ce as ApprovalControls, F as AsyncSelect, he as AutoForm, He as CommentsThread, Q as ConnectAccount, ze as ConnectAccountFor, je as DataCopilot, G as DataCopilotAnswer, Me as DataCopilotStream, ye as DataTable, Te as EditingIndicator, j as Field, Ne as FormSkeleton, we as PresenceAvatars, J as QueryFilters, Le as RecordView, Pe as TableSkeleton, _e as UiStringsProvider, fe as WidgetRegistryProvider, xe as WorkflowProgress, Se as WorkflowStatusBadge, M as defaultUiStrings, D as defaultWidgets, z as initials, B as summarizeEditors, P as useUiStrings, k as useWidget };