@voltro/ui 0.52.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 { FORM_KEY_FIELD as c, FORM_REDIRECT_FIELD as l, formActionPath as u, useAgentChat as d, useConnection as f, useDataCopilot as p, useDataTable as m, useFormBinding as h, useFormFlash as g, useFormSkeleton as ee, useQueryField as te, useQueryFilters as ne, useRecord as re, useTableSkeleton as ie, 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)
 		})
 	});
-}, w = (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)
 		})
 	});
 }, T = (e) => {
 	let t = n();
-	return /* @__PURE__ */ o(b, {
+	return /* @__PURE__ */ o(x, {
 		id: t,
 		label: e.label,
 		required: e.required,
@@ -83,180 +86,189 @@ 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)
 		})
 	});
-}, E = {
-	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: w,
-	checkbox: T,
-	switch: T,
-	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>.`
-		})]
-	})
-}, D = e({}), ae = (e) => {
-	let n = t(D), 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(D.Provider, {
+	return /* @__PURE__ */ o(O.Provider, {
 		value: i,
 		children: e.children
 	});
-}, O = (e) => t(D)[e] ?? E[e] ?? E.custom, k = e(null), oe = () => {
-	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;
-}, A = (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 }
 	};
 }, j = ({ name: e, children: t }) => {
-	let n = oe(), r = n.fields.find((t) => t.name === e), i = O(r?.widget ?? "custom");
+	let n = pe(), r = n.fields.find((t) => t.name === e), i = k(r?.widget ?? "custom");
 	if (r === void 0) return null;
-	let a = A(n, r);
+	let a = me(n, r);
 	return t ? t(a) : /* @__PURE__ */ o(i, { ...a });
 };
-function se(e) {
-	let t = e.formKey ?? e.mutation, n = g(t), r = h(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 } : {},
 		...n === void 0 ? {} : { flash: n }
@@ -265,7 +277,7 @@ function se(e) {
 			t !== void 0 && e.onSuccess && e.onSuccess(t);
 		});
 	};
-	return /* @__PURE__ */ o(k.Provider, {
+	return /* @__PURE__ */ o(A.Provider, {
 		value: r,
 		children: /* @__PURE__ */ s("form", {
 			...e.action === !1 ? {} : {
@@ -286,7 +298,10 @@ function se(e) {
 					name: l,
 					value: e.redirectTo
 				}),
-				e.children ? e.children(r) : r.fields.map((e) => /* @__PURE__ */ o(j, { name: e.name }, e.name)),
+				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": "",
@@ -335,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"
@@ -363,7 +395,7 @@ var M = {
 		howToGetToken: "How do I get a token?",
 		loading: "Loading…"
 	}
-}, N = e(M), ce = (e, t) => ({
+}, N = e(M), ge = (e, t) => ({
 	filters: {
 		...e.filters,
 		...t.filters
@@ -388,6 +420,10 @@ var M = {
 		...e.agentChat,
 		...t.agentChat
 	},
+	comments: {
+		...e.comments,
+		...t.comments
+	},
 	appAgent: {
 		...e.appAgent,
 		...t.appAgent
@@ -405,15 +441,15 @@ var M = {
 		...t.connectAccount
 	}
 });
-function le(e) {
-	let n = t(N), i = r(() => ce(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 P = () => t(N), ue = (e) => {
-	let t = te(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 },
@@ -467,48 +503,48 @@ var P = () => t(N), ue = (e) => {
 			})
 		]
 	});
-}, de = (e) => e == null ? "" : typeof e == "boolean" ? e ? "✓" : "✗" : String(e), fe = (e, t) => e ? t === "asc" ? "ascending" : "descending" : "none";
-function pe(e) {
-	let { api: t, query: n, emptyText: r, loadingText: i, loadMoreText: c, renderCell: l, rowActions: u, rowKey: d, ...f } = e, p = P().dataTable, h = m(t, n, f);
-	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": fe(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: p.actions
-		}) : null] }) }), /* @__PURE__ */ o("tbody", { children: h.rows.map((e, t) => /* @__PURE__ */ s("tr", { children: [h.columns.map((t) => /* @__PURE__ */ o("td", {
+		}) : 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) : de(e[t.name])
+			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))) })]
-	}), h.hasMore ? /* @__PURE__ */ o("button", {
+	}), 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 me = (e) => e === "succeeded" ? "✓" : e === "failed" ? "✗" : "…";
-function F(e) {
-	let { api: t, runId: n, loadingText: r, emptyText: i } = e, a = P().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",
@@ -528,7 +564,7 @@ function F(e) {
 				children: [
 					/* @__PURE__ */ o("span", {
 						"aria-hidden": "true",
-						children: me(e.status)
+						children: be(e.status)
 					}),
 					" ",
 					e.stepName,
@@ -553,8 +589,8 @@ function F(e) {
 		})
 	});
 }
-function I(e) {
-	let { api: t, runId: n } = e, r = P().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",
@@ -571,7 +607,7 @@ function I(e) {
 		}) : null]
 	});
 }
-function L(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,
@@ -594,15 +630,15 @@ function L(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 he(e) {
-	let { members: t, max: n = 5, nameOf: r = z, renderAvatar: i } = e, a = P().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",
@@ -613,7 +649,7 @@ function he(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,
@@ -622,33 +658,33 @@ function he(e) {
 		}) : null]
 	});
 }
-var V = (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 ge(e) {
-	let { members: t, selfKey: n, field: r, verb: i = "editing", nameOf: a = z } = e, s = P().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: V(c.map(a), i, s)
+		children: B(c.map(a), i, s)
 	});
 }
 //#endregion
 //#region src/agentChat.tsx
-var H = (e) => typeof e.text == "string" ? e.text : "";
-function _e({ text: e }) {
+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 U({ part: e }) {
+function H({ part: e }) {
 	switch (e.type) {
 		case "text": return /* @__PURE__ */ o("span", {
 			"data-part": "text",
-			children: H(e)
+			children: V(e)
 		});
-		case "reasoning": return /* @__PURE__ */ o(_e, { text: H(e) });
+		case "reasoning": return /* @__PURE__ */ o(Ee, { text: V(e) });
 		case "tool": {
 			let t = e;
 			return /* @__PURE__ */ s("span", {
@@ -688,14 +724,14 @@ function U({ part: e }) {
 		});
 	}
 }
-function W({ 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(U, { 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", {
@@ -705,10 +741,10 @@ function W({ message: e }) {
 		}) : null]
 	});
 }
-function G(e) {
-	let { api: t, agent: n, threadId: r, placeholder: a, sendLabel: c, emptyText: l } = e, u = P().agentChat, f = d(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,
@@ -716,11 +752,11 @@ function G(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: l ?? "No messages yet."
-			}) : f.messages.map((e) => /* @__PURE__ */ o(W, { message: e }, e.id))
+			}) : d.messages.map((e) => /* @__PURE__ */ o(U, { message: e }, e.id))
 		}), /* @__PURE__ */ s("form", {
 			"data-composer": !0,
 			onSubmit: (e) => {
@@ -731,22 +767,22 @@ function G(e) {
 				onChange: (e) => m(e.target.value),
 				placeholder: a ?? u.messagePlaceholder,
 				"aria-label": u.messageLabel,
-				disabled: f.sending
+				disabled: d.sending
 			}), /* @__PURE__ */ o("button", {
 				type: "submit",
-				disabled: f.sending || p.trim().length === 0,
+				disabled: d.sending || p.trim().length === 0,
 				children: c ?? u.send
 			})]
 		})]
 	});
 }
-function ve(e) {
-	let t = d(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 ye(e) {
+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,
@@ -767,17 +803,17 @@ function ye(e) {
 					}) : null
 				]
 			}, e.name)) })]
-		}) : null, /* @__PURE__ */ o(G, { ...r })]
+		}) : null, /* @__PURE__ */ o(W, { ...r })]
 	});
 }
 //#endregion
 //#region src/dataCopilot.tsx
-var be = (e) => e == null ? "" : typeof e == "boolean" ? e ? "✓" : "✗" : typeof e == "object" ? JSON.stringify(e) : String(e), xe = (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 K(e) {
+function G(e) {
 	let { answer: t, emptyText: n } = e;
 	if (t === void 0) return null;
 	if (!t.ok) return /* @__PURE__ */ o("p", {
@@ -789,7 +825,7 @@ function K(e) {
 		"data-voltro-data-copilot-empty": !0,
 		children: n ?? "No rows."
 	});
-	let r = xe(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", {
@@ -797,12 +833,12 @@ function K(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: be(e[t])
+			children: ke(e[t])
 		}, t)) }, String(e.id ?? t))) })]
 	});
 }
-function Se(e) {
-	let { api: t, action: n, placeholder: r, askLabel: a, emptyText: c } = e, l = p(t, n), [u, d] = i(""), f = () => {
+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);
 	};
@@ -828,7 +864,7 @@ function Se(e) {
 			"data-answer": !0,
 			"aria-live": "polite",
 			"aria-busy": l.pending ? "true" : void 0,
-			children: l.error === void 0 ? /* @__PURE__ */ o(K, {
+			children: l.error === void 0 ? /* @__PURE__ */ o(G, {
 				answer: l.answer,
 				...c === void 0 ? {} : { emptyText: c }
 			}) : /* @__PURE__ */ o("p", {
@@ -839,13 +875,13 @@ function Se(e) {
 		})]
 	});
 }
-function Ce(e) {
-	let t = p(e.api, e.action);
+function Me(e) {
+	let t = m(e.api, e.action);
 	return e.children(t);
 }
 //#endregion
 //#region src/skeleton.tsx
-var q = ({ w: e }) => /* @__PURE__ */ o("span", {
+var K = ({ w: e }) => /* @__PURE__ */ o("span", {
 	"data-skeleton-bar": !0,
 	style: {
 		display: "inline-block",
@@ -855,19 +891,29 @@ var q = ({ w: e }) => /* @__PURE__ */ o("span", {
 	},
 	"aria-hidden": "true"
 });
-function we(e) {
-	let t = ee(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(q, { w: "30%" }), /* @__PURE__ */ o(q, {})]
-		}, 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 Te(e) {
+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,
@@ -875,17 +921,17 @@ function Te(e) {
 		"aria-hidden": "true",
 		children: [/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ o("tr", { children: r.map((e) => /* @__PURE__ */ o("th", {
 			scope: "col",
-			children: /* @__PURE__ */ o(q, { 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(q, {}) }, e))
+			children: r.map((e) => /* @__PURE__ */ o("td", { children: /* @__PURE__ */ o(K, {}) }, e))
 		}, t)) })]
 	});
 }
 //#endregion
 //#region src/filters.tsx
-var J = (e) => e == null ? "" : String(e);
-function Y(e) {
+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
@@ -893,7 +939,7 @@ function Y(e) {
 	switch (t.kind) {
 		case "select": return /* @__PURE__ */ s("select", {
 			...a,
-			value: J(n),
+			value: q(n),
 			onChange: (e) => r(e.target.value || void 0),
 			children: [/* @__PURE__ */ o("option", {
 				value: "",
@@ -928,7 +974,7 @@ function Y(e) {
 				children: [/* @__PURE__ */ o("input", {
 					"aria-label": `${t.label} from`,
 					type: e,
-					value: J(i.gte),
+					value: q(i.gte),
 					onChange: (e) => r({
 						...i,
 						gte: e.target.value || void 0
@@ -936,7 +982,7 @@ function Y(e) {
 				}), /* @__PURE__ */ o("input", {
 					"aria-label": `${t.label} to`,
 					type: e,
-					value: J(i.lte),
+					value: q(i.lte),
 					onChange: (e) => r({
 						...i,
 						lte: e.target.value || void 0
@@ -947,13 +993,13 @@ function Y(e) {
 		default: return /* @__PURE__ */ o("input", {
 			...a,
 			type: "text",
-			value: J(n),
+			value: q(n),
 			onChange: (e) => r(e.target.value || void 0)
 		});
 	}
 }
-function Ee(e) {
-	let t = ne(e.api, e.query, e.initial ? { initial: e.initial } : {}), n = P().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", {
@@ -963,7 +1009,7 @@ function Ee(e) {
 			children: [
 				t.filters.map((e) => /* @__PURE__ */ s("label", {
 					"data-filter-label": !0,
-					children: [/* @__PURE__ */ o("span", { children: e.label }), /* @__PURE__ */ o(Y, {
+					children: [/* @__PURE__ */ o("span", { children: e.label }), /* @__PURE__ */ o(Fe, {
 						filter: e,
 						value: t.values[e.name],
 						onChange: (n) => t.setFilter(e.name, n)
@@ -985,25 +1031,25 @@ function Ee(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 De({ name: e, items: t }) {
+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 Oe(e) {
-	let { api: t, query: n, input: r, fields: i, renderField: a, renderRelation: c, loadingText: l, emptyText: u } = e, { record: d, loading: f } = re(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",
@@ -1013,18 +1059,18 @@ function Oe(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(De, {
+			children: [/* @__PURE__ */ o("h3", { children: Y(e) }), c ? c(e, t, d) : /* @__PURE__ */ o(Ie, {
 				name: e,
 				items: t
 			})]
@@ -1033,7 +1079,7 @@ function Oe(e) {
 }
 //#endregion
 //#region src/connectAccount.tsx
-var ke = (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;
@@ -1041,14 +1087,14 @@ var ke = (e, t) => {
 		case "error": return t.errored;
 		default: return t.notConnected;
 	}
-}, Ae = ({ api: e, connectionId: t, ...n }) => {
-	let r = f(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 }) => {
+}, 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", {
@@ -1068,7 +1114,7 @@ var ke = (e, t) => {
 			" — ",
 			/* @__PURE__ */ o("span", {
 				role: e.needsAttention ? "alert" : void 0,
-				children: ke(e, l)
+				children: Re(e, l)
 			})
 		] }), e.connected || e.needsAttention ? /* @__PURE__ */ s(a, { children: [e.needsAttention && e.kind === "oauth2" && /* @__PURE__ */ o("button", {
 			type: "button",
@@ -1124,6 +1170,157 @@ var ke = (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 { G as AgentChat, W as AgentMessageView, U as AgentPartView, ve as AgentStream, ye as AppAgent, L as ApprovalControls, ue as AsyncSelect, se as AutoForm, $ as ConnectAccount, Ae as ConnectAccountFor, Se as DataCopilot, K as DataCopilotAnswer, Ce as DataCopilotStream, pe as DataTable, ge as EditingIndicator, j as Field, we as FormSkeleton, he as PresenceAvatars, Ee as QueryFilters, Oe as RecordView, Te as TableSkeleton, le as UiStringsProvider, ae as WidgetRegistryProvider, F as WorkflowProgress, I as WorkflowStatusBadge, M as defaultUiStrings, E as defaultWidgets, B as initials, V as summarizeEditors, P 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 };