themelia-react-ui 1.0.1 → 2.0.0

package/dist/{comments-DviPLnwy.js → comments-You0Bzbr.js}

@@ -1,28 +1,31 @@
 "use client";
-import { a as e, o as t } from "./ui-provider-CftIB6TY.js";
+import { a as e, o as t } from "./ui-provider-D2_TeLqw.js";
 import { interpolateString as n, useStrings as r } from "./lib/strings.js";
-import { t as i } from "./utils-C2EKeIw3.js";
-import { c as a, l as o, n as s, o as c, s as l } from "./buttons-Co6GavvM.js";
-import { a as u, r as d, t as f } from "./typography-Cv8MT-82.js";
-import { t as p } from "./structure-MvKVq-oL.js";
-import { i as m, t as h } from "./overlays-B11wZka6.js";
-import { t as g } from "./sanitize-html-BG9FGe-j.js";
-import { t as _ } from "./content-typography-CnwgMJ37.js";
-import { t as v } from "./rich-text-B7sBAdDG.js";
-import { g as y, i as b } from "./primitives-DKPOGVpj.js";
-import { n as x, t as S } from "./number-BNT_BIzJ.js";
-import { i as C } from "./date-BFNMnrS5.js";
-import { i as w, n as T, s as E } from "./avatar-Bpzty83c.js";
-import { t as D } from "./badge-BZXZT9wd.js";
-import { c as O, o as ee } from "./popover-CoLDEg19.js";
-import { l as k } from "./data-display-cWIRdeaf.js";
-import { t as te } from "./rich-text-editor-CoVrTiSv.js";
-import { l as A, n as ne, o as j, r as re, t as M } from "./mentions-B8Ko-fhS.js";
-import { Fragment as N, createElement as ie, forwardRef as P, memo as F, useCallback as I, useEffect as L, useImperativeHandle as ae, useMemo as R, useRef as z, useState as B } from "react";
+import { t as i } from "./utils-Cospvlj1.js";
+import { t as a } from "./buttons-DS0ZIwJ_.js";
+import { a as o, s, t as c } from "./typography-CAr3dQhX.js";
+import { a as l, c as u, o as d, s as f, t as p } from "./button-BS3KDg00.js";
+import { t as m } from "./structure-hzCW-XsV.js";
+import { t as h } from "./row-recipes-DL8n7t_b.js";
+import { i as g, t as _ } from "./overlays-DhZO7N-I.js";
+import { t as v } from "./sanitize-html-BG9FGe-j.js";
+import { t as y } from "./content-typography-CnwgMJ37.js";
+import { t as b } from "./rich-text-j-FGAeZW.js";
+import { g as x, i as S } from "./primitives-BHrwQXFC.js";
+import { n as C, t as w } from "./number-CKRBYmZK.js";
+import { i as ee } from "./date-uf3z37Nm.js";
+import { i as T, n as E, s as D } from "./avatar-djdaaQ_s.js";
+import { t as O } from "./badge-0tATj-tW.js";
+import { t as k } from "./field-affordance-recipes-CkOCdE2y.js";
+import { c as te, o as ne } from "./popover-Dcv_9jxr.js";
+import { l as re } from "./data-display-3xWQUnMA.js";
+import { t as ie } from "./rich-text-editor-CF8QYt5p.js";
+import { l as A, n as ae, o as j, r as oe, t as se } from "./mentions-DwnO1hh4.js";
+import { Fragment as M, createElement as ce, forwardRef as N, memo as P, useCallback as F, useEffect as I, useImperativeHandle as L, useMemo as R, useRef as z, useState as B } from "react";
 import { Fragment as V, jsx as H, jsxs as U } from "react/jsx-runtime";
-import { AtSign as oe, CornerDownRight as se, File as ce, FileText as le, Image as ue, Loader2 as de, MessageCircle as W, Paperclip as fe, Pencil as G, Pin as K, Send as pe, Smile as me, Trash2 as he, X as q } from "lucide-react";
+import { AtSign as le, CornerDownRight as ue, File as W, FileText as de, Image as G, Loader2 as fe, MessageCircle as K, Paperclip as pe, Pencil as q, Pin as J, Smile as me, Trash2 as he, X as Y } from "lucide-react";
 //#region src/components/features/comments/comments.strings.ts
-var J = {
+var X = {
 	title: "Comments",
 	subtitle: "",
 	empty: "No comments yet.",
@@ -70,10 +73,10 @@ var J = {
 };
 //#endregion
 //#region src/components/features/comments/comments-provider.tsx
-function Y(e) {
-	return r(J, e);
-}
 function ge(e) {
+	return r(X, e);
+}
+function _e(e) {
 	let n = t();
 	return R(() => ({
 		getMediaUrl: e?.getMediaUrl,
@@ -84,16 +87,16 @@ function ge(e) {
 }
 //#endregion
 //#region src/components/features/comments/hooks/use-comments.ts
-function X(e = {}) {
-	let { onSubmit: t, onUpdate: n, onDelete: r, onAfterMutate: i, onError: a } = e, [o, s] = B({ kind: "idle" }), [c, l] = B(!1), u = z(!1), [d, f] = B({}), [p, m] = B(0), h = I((e) => {
+function ve(e = {}) {
+	let { onSubmit: t, onUpdate: n, onDelete: r, onAfterMutate: i, onError: a } = e, [o, s] = B({ kind: "idle" }), [c, l] = B(!1), u = z(!1), [d, f] = B({}), [p, m] = B(0), h = F((e) => {
 		u.current = e, l(e);
-	}, []), g = I(() => {
+	}, []), g = F(() => {
 		m((e) => e + 1), s({ kind: "idle" }), f({}), h(!1);
 	}, [h]), _ = R(() => ({
 		setErrors: f,
 		reset: g,
 		setSubmitting: h
-	}), [g, h]), v = I((e) => {
+	}), [g, h]), v = F((e) => {
 		try {
 			a?.(e);
 		} catch {}
@@ -103,23 +106,23 @@ function X(e = {}) {
 		isSubmitting: c,
 		formErrors: d,
 		resetKey: p,
-		startReply: I((e) => {
+		startReply: F((e) => {
 			e.id && (f({}), s({
 				kind: "replying",
 				commentId: e.id,
 				authorName: e.user?.name
 			}));
 		}, []),
-		startEdit: I((e) => {
+		startEdit: F((e) => {
 			e.id && (f({}), s({
 				kind: "editing",
 				comment: e
 			}));
 		}, []),
-		cancelComposerMode: I(() => {
+		cancelComposerMode: F(() => {
 			g();
 		}, [g]),
-		submit: I(async (e) => {
+		submit: F(async (e) => {
 			if (o.kind === "editing" && o.comment.id) {
 				if (!n || u.current) return;
 				let t = {
@@ -158,7 +161,7 @@ function X(e = {}) {
 			v,
 			h
 		]),
-		deleteComment: I(async (e) => {
+		deleteComment: F(async (e) => {
 			if (r && e) try {
 				await r(e), i?.("delete", { commentId: e });
 			} catch (e) {
@@ -175,49 +178,49 @@ function X(e = {}) {
 }
 //#endregion
 //#region src/components/features/comments/partials/comment-attachment-chip.tsx
-function _e(e) {
-	return e.mimeType?.startsWith("image/") ? ue : e.mimeType === "application/pdf" || e.mimeType?.startsWith("text/") ? le : e.mimeType ? ce : fe;
+function ye(e) {
+	return e.mimeType?.startsWith("image/") ? G : e.mimeType === "application/pdf" || e.mimeType?.startsWith("text/") ? de : e.mimeType ? W : pe;
 }
-var ve = ({ attachment: e, editable: t = !1, onRemove: n, onRetry: a, accessors: o, strings: c, compact: l = !1, className: d }) => {
-	let p = r(J, c), m = o?.getMediaUrl?.(e) ?? e.url, h = o?.getMediaName?.(e) ?? e.name ?? p.attachmentFallback, g = _e(e), _ = e.status === "uploading", v = e.status === "failed", S = _ ? /* @__PURE__ */ U(y, {
+var be = ({ attachment: e, editable: t = !1, onRemove: n, onRetry: o, accessors: l, strings: u, compact: d = !1, className: f }) => {
+	let p = r(X, u), m = l?.getMediaUrl?.(e) ?? e.url, g = l?.getMediaName?.(e) ?? e.name ?? p.attachmentFallback, _ = ye(e), v = e.status === "uploading", y = e.status === "failed", b = v ? /* @__PURE__ */ U(x, {
 		size: "xs",
 		className: "shrink-0",
-		children: [p.attachmentUploadingLabel, typeof e.progress == "number" ? /* @__PURE__ */ U(V, { children: [" ", /* @__PURE__ */ H(x, {
+		children: [p.attachmentUploadingLabel, typeof e.progress == "number" ? /* @__PURE__ */ U(V, { children: [" ", /* @__PURE__ */ H(C, {
 			value: Math.round(e.progress),
 			scaled: !0,
 			size: "xs",
 			align: "left",
 			type: "secondary"
 		})] }) : null]
-	}) : v ? /* @__PURE__ */ H(y, {
+	}) : y ? /* @__PURE__ */ H(x, {
 		size: "xs",
 		className: "shrink-0",
 		children: e.error ?? p.attachmentFailedLabel
-	}) : typeof e.size == "number" ? /* @__PURE__ */ H(b, {
+	}) : typeof e.size == "number" ? /* @__PURE__ */ H(S, {
 		value: e.size,
 		size: "xs",
 		className: "shrink-0"
-	}) : null, C = i("comment-attachment-chip--component", "relative inline-flex min-w-0 max-w-[20rem] items-center gap-space-sm rounded-radius-md", "ring-1 ring-inset transition-colors", l ? "px-2 py-1 text-xs" : "px-2.5 py-1 text-xs", v ? "bg-destructive/[0.04] ring-destructive/30 hover:bg-destructive/[0.08]" : "bg-foreground/[0.03] ring-border/60 hover:bg-foreground/[0.06]", d), w = _ ? /* @__PURE__ */ H(de, {
+	}) : null, w = i("comment-attachment-chip--component", "relative inline-flex min-w-0 max-w-[20rem] items-center gap-space-sm rounded-radius", "ring-1 ring-inset transition-colors", d ? "px-control-xs" : "px-control-sm", h.compact, y ? "bg-destructive/[0.04] ring-destructive/30 hover:bg-destructive/[0.08]" : "bg-foreground/[0.03] ring-border/60 hover:bg-foreground/[0.06]", f), ee = v ? /* @__PURE__ */ H(fe, {
 		className: i("shrink-0 animate-spin text-muted-foreground", "size-icon-md"),
 		"aria-hidden": !0
-	}) : /* @__PURE__ */ H(g, {
-		className: i("shrink-0", "size-icon-md", v ? "text-destructive" : "text-muted-foreground"),
+	}) : /* @__PURE__ */ H(_, {
+		className: i("shrink-0", "size-icon-md", y ? "text-destructive" : "text-muted-foreground"),
 		"aria-hidden": !0
 	}), T = /* @__PURE__ */ U("span", {
 		className: "inline-flex min-w-0 items-baseline gap-space-sm",
-		children: [/* @__PURE__ */ H(u, {
+		children: [/* @__PURE__ */ H(s, {
 			tag: "span",
 			size: "xs",
 			weight: "medium",
-			className: i("truncate", v && "text-destructive"),
-			children: h
-		}), S]
+			className: i("truncate", y && "text-destructive"),
+			children: g
+		}), b]
 	});
 	return /* @__PURE__ */ U("div", {
-		className: C,
+		className: w,
 		children: [
-			w,
-			m && !_ && !v ? /* @__PURE__ */ H(f, {
+			ee,
+			m && !v && !y ? /* @__PURE__ */ H(c, {
 				href: m,
 				size: "inherit",
 				underline: !1,
@@ -227,21 +230,19 @@ var ve = ({ attachment: e, editable: t = !1, onRemove: n, onRetry: a, accessors:
 				"aria-label": p.attachmentDownloadLabel,
 				children: T
 			}) : T,
-			_ && typeof e.progress == "number" && /* @__PURE__ */ H("div", {
+			v && typeof e.progress == "number" && /* @__PURE__ */ H("div", {
 				className: "bg-primary/15 absolute bottom-0 left-2 right-2 h-px overflow-hidden rounded-full",
 				children: /* @__PURE__ */ H("div", {
 					className: "bg-primary h-full transition-[width]",
 					style: { width: `${Math.min(100, Math.max(0, e.progress))}%` }
 				})
 			}),
-			v && a && /* @__PURE__ */ H(s, {
+			y && o && /* @__PURE__ */ H(a, {
 				type: "button",
-				tone: "destructive",
-				buttonStyle: "ghost",
 				size: "sm",
-				onClick: () => a(e.id),
-				className: "h-auto shrink-0 rounded px-1.5 py-px ring-1 ring-inset ring-destructive/30 hover:ring-destructive/60",
-				children: /* @__PURE__ */ H(u, {
+				onClick: () => o(e.id),
+				className: "shrink-0 text-destructive decoration-destructive/30 hover:decoration-destructive/60",
+				children: /* @__PURE__ */ H(s, {
 					tag: "span",
 					size: "xs",
 					weight: "medium",
@@ -249,287 +250,308 @@ var ve = ({ attachment: e, editable: t = !1, onRemove: n, onRetry: a, accessors:
 					children: p.attachmentRetryLabel
 				})
 			}),
-			t && n && /* @__PURE__ */ H(s, {
+			t && n && /* @__PURE__ */ H("button", {
 				type: "button",
-				tone: "secondary",
-				buttonStyle: "ghost",
-				size: "sm",
-				iconOnly: !0,
 				onClick: () => n(e.id),
-				className: "-mr-0.5 size-icon shrink-0 rounded p-0 text-muted-foreground hover:bg-foreground/10 hover:text-foreground",
+				className: i(k.target, k.focus, k.toggle),
 				"aria-label": p.attachmentRemoveLabel,
 				title: p.attachmentRemoveLabel,
-				children: /* @__PURE__ */ H(q, { className: "size-icon-sm" })
+				children: /* @__PURE__ */ H(Y, {
+					className: k.icon,
+					"aria-hidden": "true"
+				})
 			})
 		]
 	});
+}, xe = {
+	attachmentTooLargeError: X.attachmentTooLargeError,
+	attachmentTooManyError: X.attachmentTooManyError,
+	attachmentFailedLabel: X.attachmentFailedLabel
 };
-//#endregion
-//#region src/components/features/comments/hooks/use-attachment-upload.ts
-function ye(e = {}) {
-	let { onUpload: t, maxSize: n, maxFiles: r, disabled: i, initialAttachments: a, onValueChange: o, onError: s } = e, [c, l] = B(() => a ? [...a] : []), u = z(/* @__PURE__ */ new Map()), d = z(/* @__PURE__ */ new Map()), f = z(o);
-	f.current = o;
-	let p = I((e, t) => {
-		l((n) => n.map((n) => n.id === e ? {
+function Se(e = {}) {
+	let { onUpload: t, maxSize: n, maxFiles: i, disabled: a, initialAttachments: o, onValueChange: s, onError: c, strings: l } = e, u = r(xe, l), [d, f] = B(() => o ? [...o] : []), p = z(/* @__PURE__ */ new Map()), m = z(/* @__PURE__ */ new Map()), h = z(d), g = F((e) => {
+		let t = [...e];
+		h.current = t, f(t);
+	}, []), _ = z(s);
+	_.current = s;
+	let v = F((e, t) => {
+		g(h.current.map((n) => n.id === e ? {
 			...n,
 			...t
 		} : n));
-	}, []), m = I((e) => {
-		l([...e]);
-	}, []), h = I((e, n) => {
-		if (!t) return;
+	}, [g]), y = F((e) => {
+		g(e);
+	}, [g]), b = F((e, n) => {
+		if (!t || !m.current.has(e)) return;
 		let r = new AbortController();
-		u.current.set(e, { controller: r }), p(e, {
+		p.current.set(e, { controller: r }), v(e, {
 			status: "uploading",
 			progress: 0,
 			error: void 0
 		}), t({
 			file: n,
 			onProgress: (t) => {
-				p(e, { progress: t });
+				r.signal.aborted || v(e, { progress: t });
 			},
 			signal: r.signal
 		}).then((t) => {
-			u.current.delete(e), p(e, {
+			r.signal.aborted || (p.current.delete(e), v(e, {
 				...t,
 				id: e,
 				status: "uploaded",
 				progress: 100,
 				error: void 0
-			});
+			}));
 		}).catch((t) => {
-			if (u.current.delete(e), r.signal.aborted) return;
-			let n = t instanceof Error ? t.message : "Upload failed";
-			p(e, {
+			if (p.current.delete(e), r.signal.aborted) return;
+			let n = t instanceof Error ? t.message : u.attachmentFailedLabel;
+			v(e, {
 				status: "failed",
 				error: n
-			}), s?.(n);
+			}), c?.(n);
 		});
 	}, [
-		s,
+		c,
 		t,
-		p
-	]), g = I((e) => {
-		if (i || !t) return;
-		let a = Array.from(e);
-		a.length !== 0 && l((e) => {
-			let t = [...e];
-			for (let e of a) {
-				if (typeof r == "number" && t.length >= r) {
-					s?.("Too many attachments.");
-					break;
-				}
-				if (typeof n == "number" && e.size > n) {
-					s?.("File is too large.");
-					continue;
-				}
-				let i = typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `att-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-				d.current.set(i, e), t.push({
-					id: i,
-					name: e.name,
-					size: e.size,
-					mimeType: e.type,
-					status: "uploading",
-					progress: 0
-				}), queueMicrotask(() => h(i, e));
+		u.attachmentFailedLabel,
+		v
+	]), x = F((e) => {
+		if (a || !t) return;
+		let r = Array.from(e);
+		if (r.length === 0) return;
+		let o = [...h.current], s = [];
+		for (let e of r) {
+			if (typeof i == "number" && o.length >= i) {
+				c?.(u.attachmentTooManyError);
+				break;
 			}
-			return t;
-		});
+			if (typeof n == "number" && e.size > n) {
+				c?.(u.attachmentTooLargeError);
+				continue;
+			}
+			let t = typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `att-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+			m.current.set(t, e), o.push({
+				id: t,
+				name: e.name,
+				size: e.size,
+				mimeType: e.type,
+				status: "uploading",
+				progress: 0
+			}), s.push({
+				id: t,
+				file: e
+			});
+		}
+		g(o);
+		for (let { id: e, file: t } of s) queueMicrotask(() => b(e, t));
 	}, [
-		h,
+		b,
+		g,
+		a,
 		i,
-		r,
 		n,
-		s,
-		t
-	]), _ = I((e) => {
-		let t = u.current.get(e);
-		t && (t.controller.abort(), u.current.delete(e)), d.current.delete(e), l((t) => t.filter((t) => t.id !== e));
-	}, []), v = I((e) => {
-		let t = d.current.get(e);
-		t && h(e, t);
-	}, [h]), y = I(() => {
-		for (let e of u.current.values()) e.controller.abort();
-		u.current.clear(), d.current.clear(), l([]);
-	}, []);
-	return L(() => {
-		f.current?.(c);
-	}, [c]), L(() => {
-		let e = u.current;
+		c,
+		t,
+		u.attachmentTooLargeError,
+		u.attachmentTooManyError
+	]), S = F((e) => {
+		let t = p.current.get(e);
+		t && (t.controller.abort(), p.current.delete(e)), m.current.delete(e), g(h.current.filter((t) => t.id !== e));
+	}, [g]), C = F((e) => {
+		let t = m.current.get(e);
+		t && b(e, t);
+	}, [b]), w = F(() => {
+		for (let e of p.current.values()) e.controller.abort();
+		p.current.clear(), m.current.clear(), g([]);
+	}, [g]);
+	return I(() => {
+		_.current?.(d);
+	}, [d]), I(() => {
+		let e = p.current, t = m.current;
 		return () => {
 			for (let t of e.values()) t.controller.abort();
+			t.clear();
 		};
 	}, []), {
-		attachments: c,
-		uploadedAttachments: R(() => c.filter((e) => e.status === "uploaded" || !e.status), [c]),
-		isUploading: R(() => c.some((e) => e.status === "uploading"), [c]),
-		addFiles: g,
-		removeAttachment: _,
-		retryAttachment: v,
-		setAttachments: m,
-		reset: y
+		attachments: d,
+		uploadedAttachments: R(() => d.filter((e) => e.status === "uploaded" || !e.status), [d]),
+		isUploading: R(() => d.some((e) => e.status === "uploading"), [d]),
+		addFiles: x,
+		removeAttachment: S,
+		retryAttachment: C,
+		setAttachments: y,
+		reset: w
 	};
 }
 //#endregion
 //#region src/components/features/comments/partials/comment-composer.tsx
-function be(e) {
+function Ce(e) {
 	return !e || typeof e != "string" ? !1 : e.replace(/<[^>]*>/g, "").trim().length > 0;
 }
-var Z = P(function({ context: e, canComment: t = !0, submitting: n = !1, errors: r, resetKey: i = 0, onSubmit: a, onCancel: o, editingComment: c, replyingTo: l, strings: d, resources: f, onResourceSearch: m, attachments: h, maxAttachments: g, allowAttachments: _, initialValues: v, autoFocus: y = !1, inlineSubmit: b = !0, placeholder: x }, S) {
-	let C = Y(d), w = f, T = m, E = _ ?? !0, D = h?.maxFiles ?? g ?? 5, k = R(() => ({
+var Z = N(function({ context: e, canComment: t = !0, submitting: n = !1, errors: r, resetKey: i = 0, onSubmit: a, onCancel: o, editingComment: c, replyingTo: l, strings: u, resources: d, onResourceSearch: f, attachments: h, maxAttachments: g, allowAttachments: _, initialValues: v, autoFocus: y = !1, inlineSubmit: b = !0, placeholder: x }, S) {
+	let C = ge(u), w = d, ee = f, T = _ ?? !0, E = h?.maxFiles ?? g ?? 5, D = R(() => ({
 		...h,
-		maxFiles: D,
-		disabled: h?.disabled === !0 || !E
+		maxFiles: E,
+		disabled: h?.disabled === !0 || !T
 	}), [
-		E,
+		T,
 		h,
-		D
-	]), j = z(null), [N, ie] = B(() => v?.content ?? c?.content ?? ""), [P, F] = B(null), I = A({
+		E
+	]), O = z(null), [k, re] = B(() => v?.content ?? c?.content ?? ""), [j, M] = B(null), [ce, N] = B(null), P = A({
 		resources: w,
-		onResourceSearch: T,
-		editorRef: j,
+		onResourceSearch: ee,
+		editorRef: O,
 		initialMentions: v?.references ?? c?.references
-	}), V = ye({
-		...k,
-		initialAttachments: v?.attachments ?? void 0
-	});
-	ae(S, () => ({
-		focus: () => j.current?.focus(),
+	}), F = Se({
+		...D,
+		initialAttachments: v?.attachments ?? void 0,
+		strings: C,
+		onError: N
+	}), V = () => {
+		F.reset(), N(null), o?.();
+	};
+	L(S, () => ({
+		focus: () => O.current?.focus(),
 		clear: () => {
-			j.current?.clear(), I.reset(), V.reset(), F(null);
+			O.current?.clear(), P.reset(), F.reset(), M(null), N(null);
 		},
 		setBody: (e) => {
-			j.current?.setHTML(e);
+			O.current?.setHTML(e);
 		}
-	}), [V, I]), L(() => {
-		j.current?.setHTML(v?.content ?? ""), I.setMentions(v?.references ?? []), V.setAttachments(v?.attachments ?? []), F(null);
+	}), [F, P]), I(() => {
+		O.current?.setHTML(v?.content ?? ""), P.setMentions(v?.references ?? []), F.reset(), F.setAttachments(v?.attachments ?? []), M(null), N(null);
 	}, [
 		e.id,
 		e.type,
 		i
-	]), L(() => {
+	]), I(() => {
 		if (!c) return;
-		j.current?.setHTML(c.content ?? ""), I.setMentions(c.references ?? []);
+		O.current?.setHTML(c.content ?? ""), P.setMentions(c.references ?? []);
 		let e = (c.attachments ?? []).filter((e) => !!e);
-		V.setAttachments(e);
-	}, [c?.id]), L(() => {
-		r?.content && F(r.content);
+		F.reset(), F.setAttachments(e), N(null);
+	}, [c?.id]), I(() => {
+		r?.content && M(r.content);
 	}, [r]);
-	let se = (t) => {
-		if (t?.preventDefault(), n || V.isUploading) return;
-		let r = j.current?.getHTML() ?? N;
-		if (!be(r)) {
-			F(C.invalidContent);
+	let ue = (t) => {
+		if (t?.preventDefault(), n || F.isUploading) return;
+		let r = O.current?.getHTML() ?? k;
+		if (!Ce(r)) {
+			M(C.invalidContent);
 			return;
 		}
-		F(null), a({
+		M(null), a({
 			content: r,
 			commentableId: e.id,
 			commentableType: e.type,
 			moduleKey: e.moduleKey,
 			contentType: "html",
-			references: I.mentions,
-			attachments: V.uploadedAttachments,
+			references: P.mentions,
+			attachments: F.uploadedAttachments,
 			replyToId: l?.commentId ?? v?.replyToId,
 			editingId: c?.id
 		});
-	}, ce = z(null), le = () => ce.current?.click(), ue = (e) => {
-		e && V.addFiles(e);
-	}, W = V.attachments.length > 0, G = !!c, K = !G && !!l, me = n ? C.composerSubmitting : G ? C.composerSave : C.composerSubmit, he = G ? /* @__PURE__ */ H(xe, {
+	}, W = z(null), de = () => W.current?.click(), G = (e) => {
+		e?.length && (N(null), F.addFiles(e));
+	}, K = F.attachments.length > 0, q = !!c, J = !q && !!l, me = n ? C.composerSubmitting : q ? C.composerSave : C.composerSubmit, he = q ? /* @__PURE__ */ H(we, {
 		label: C.composerEditingEyebrow,
 		closeLabel: C.composerCancel,
-		onClose: o
-	}) : K ? /* @__PURE__ */ H(xe, {
-		label: Se(C.composerReplyingEyebrow, l.authorName),
+		onClose: o ? V : void 0
+	}) : J ? /* @__PURE__ */ H(we, {
+		label: Q(C.composerReplyingEyebrow, l.authorName),
 		closeLabel: C.composerCancel,
-		onClose: o
-	}) : null, q = R(() => {
+		onClose: o ? V : void 0
+	}) : null, Y = R(() => {
 		let e = [];
 		return w && Object.keys(w).length > 0 && e.push({
 			id: "reference",
-			icon: oe,
+			icon: le,
 			label: C.composerReferenceLabel,
-			onClick: () => I.setPickerOpen(!0)
-		}), k?.onUpload && !k.disabled && e.push({
+			onClick: () => P.setPickerOpen(!0)
+		}), D?.onUpload && !D.disabled && e.push({
 			id: "attachment",
-			icon: fe,
+			icon: pe,
 			label: C.composerAttachmentLabel,
-			onClick: le
+			onClick: de
 		}), e;
 	}, [
 		w,
-		k?.onUpload,
-		k?.disabled,
+		D?.onUpload,
+		D?.disabled,
 		C.composerReferenceLabel,
 		C.composerAttachmentLabel
 	]);
 	if (!t) return null;
-	let J = /* @__PURE__ */ H(s, {
+	let X = /* @__PURE__ */ H(p, {
+		tone: "primary",
 		type: "button",
-		onClick: () => se(),
-		disabled: n || V.isUploading,
-		icon: n ? de : pe,
+		onClick: () => ue(),
+		disabled: n || F.isUploading,
+		icon: n ? fe : void 0,
 		children: me
-	}), ge = G || K || o ? /* @__PURE__ */ H(s, {
+	}), _e = q || J || o ? /* @__PURE__ */ H(p, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "ghost",
-		onClick: o,
+		onClick: V,
 		disabled: n,
 		children: C.composerCancel
-	}) : null, X = W ? /* @__PURE__ */ H(p, {
+	}) : null, ve = K ? /* @__PURE__ */ H(m, {
 		direction: "horizontal",
 		wrap: !0,
 		align: "center",
 		gap: "sm",
-		children: V.attachments.map((e) => /* @__PURE__ */ H(ve, {
+		children: F.attachments.map((e) => /* @__PURE__ */ H(be, {
 			attachment: e,
 			editable: !0,
-			onRemove: V.removeAttachment,
-			onRetry: V.retryAttachment,
-			strings: d
+			onRemove: (e) => {
+				N(null), F.removeAttachment(e);
+			},
+			onRetry: (e) => {
+				N(null), F.retryAttachment(e);
+			},
+			strings: u
 		}, e.id))
-	}) : null, _e = W ? X : null, Z = b !== !1 && !G && !K ? J : null, Q = b === !1 || G || K;
-	return /* @__PURE__ */ U(p, {
+	}) : null, ye = K ? ve : null, xe = b !== !1 && !q && !J ? X : null, Z = b === !1 || q || J;
+	return /* @__PURE__ */ U(m, {
 		render: /* @__PURE__ */ H("form", {}),
 		gap: "md",
-		onSubmit: se,
+		onSubmit: ue,
 		className: "comment-composer--component",
 		children: [
 			he,
 			/* @__PURE__ */ H("input", {
-				ref: ce,
+				ref: W,
 				type: "file",
 				multiple: !0,
 				hidden: !0,
-				accept: k?.accept,
+				accept: D?.accept,
 				onChange: (e) => {
-					ue(e.target.files), e.target.value = "";
+					G(e.target.files), e.target.value = "";
 				}
 			}),
-			!I.triggerActive && /* @__PURE__ */ U(ee, {
-				open: I.pickerOpen,
-				onOpenChange: I.setPickerOpen,
-				children: [/* @__PURE__ */ H(O, { render: /* @__PURE__ */ H(s, {
+			!P.triggerActive && /* @__PURE__ */ U(ne, {
+				open: P.pickerOpen,
+				onOpenChange: P.setPickerOpen,
+				children: [/* @__PURE__ */ H(te, { render: /* @__PURE__ */ H(p, {
 					type: "button",
 					tone: "secondary",
 					buttonStyle: "ghost",
 					className: "sr-only",
 					tabIndex: -1,
 					children: C.composerReferenceLabel
-				}) }), /* @__PURE__ */ H(re, {
-					open: I.pickerOpen,
-					activeKind: I.activeKind,
+				}) }), /* @__PURE__ */ H(oe, {
+					open: P.pickerOpen,
+					activeKind: P.activeKind,
 					setActiveKind: (e) => {
-						I.setActiveKind(e), I.setManualKindOverride(!0);
+						P.setActiveKind(e), P.setManualKindOverride(!0);
 					},
-					kinds: I.kinds,
+					kinds: P.kinds,
 					resources: w,
-					query: I.query,
-					setQuery: I.setQuery,
-					suggestions: I.suggestions,
-					loading: I.isLoading,
-					onSelect: I.pickSuggestion,
+					query: P.query,
+					setQuery: P.setQuery,
+					suggestions: P.suggestions,
+					loading: P.isLoading,
+					onSelect: P.pickSuggestion,
 					strings: {
 						title: C.composerReferenceMenuTitle,
 						searchPlaceholder: C.composerReferenceSearchPlaceholder,
@@ -540,38 +562,38 @@ var Z = P(function({ context: e, canComment: t = !0, submitting: n = !1, errors:
 			}),
 			/* @__PURE__ */ U("div", {
 				className: "comment-composer--editor relative",
-				children: [/* @__PURE__ */ H(te, {
-					ref: j,
-					value: N,
+				children: [/* @__PURE__ */ H(ie, {
+					ref: O,
+					value: k,
 					onValueChange: (e) => {
-						ie(e);
-						let t = M(e), n = I.mentions;
+						re(e);
+						let t = se(e), n = P.mentions;
 						if (n.map((e) => e.id).join("|") !== t.map((e) => e.id).join("|")) {
 							let e = new Map(n.map((e) => [e.id, e])), r = t.map((t) => e.get(t.id) ?? t);
-							I.setMentions(r);
+							P.setMentions(r);
 						}
 					},
 					placeholder: x ?? C.composerPlaceholder,
 					strings: { editorLabel: x ?? C.composerPlaceholder },
 					minHeight: "3rem",
-					autoFocus: y || G || K,
-					extraToolbarItems: q,
-					toolbarTrailing: Z,
-					footerSlot: _e,
-					onCaretChange: I.handleCaretChange
-				}), /* @__PURE__ */ H(ne, {
-					open: I.triggerActive && I.pickerOpen,
-					activeKind: I.activeKind,
+					autoFocus: y || q || J,
+					extraToolbarItems: Y,
+					toolbarTrailing: xe,
+					footerSlot: ye,
+					onCaretChange: P.handleCaretChange
+				}), /* @__PURE__ */ H(ae, {
+					open: P.triggerActive && P.pickerOpen,
+					activeKind: P.activeKind,
 					setActiveKind: (e) => {
-						I.setActiveKind(e), I.setManualKindOverride(!0);
+						P.setActiveKind(e), P.setManualKindOverride(!0);
 					},
-					kinds: I.kinds,
+					kinds: P.kinds,
 					resources: w,
-					query: I.query,
-					suggestions: I.suggestions,
-					suggestionsByKind: I.suggestionsByKind,
-					loading: I.isLoading,
-					onSelect: I.pickSuggestion,
+					query: P.query,
+					suggestions: P.suggestions,
+					suggestionsByKind: P.suggestionsByKind,
+					loading: P.isLoading,
+					onSelect: P.pickSuggestion,
 					strings: {
 						title: C.composerReferenceMenuTitle,
 						empty: C.composerReferenceEmpty,
@@ -579,49 +601,55 @@ var Z = P(function({ context: e, canComment: t = !0, submitting: n = !1, errors:
 					}
 				})]
 			}),
-			P && /* @__PURE__ */ H(u, {
+			ce && /* @__PURE__ */ H(s, {
+				role: "alert",
 				size: "xs",
 				type: "error",
-				children: P
+				className: "comment-composer--attachment-error",
+				children: ce
 			}),
-			Q && /* @__PURE__ */ U(p, {
+			j && /* @__PURE__ */ H(s, {
+				size: "xs",
+				type: "error",
+				children: j
+			}),
+			Z && /* @__PURE__ */ U(m, {
 				direction: "horizontal",
 				align: "center",
 				justify: "end",
 				gap: "md",
 				className: "comment-composer--footer-actions",
-				children: [ge, J]
+				children: [_e, X]
 			})
 		]
 	});
 });
-function xe({ label: e, closeLabel: t, onClose: n }) {
+function we({ label: e, closeLabel: t, onClose: n }) {
 	return /* @__PURE__ */ U("div", {
-		className: "bg-muted/40 ring-border/60 flex items-center justify-between rounded px-2.5 py-1.5 ring-1 ring-inset",
-		children: [/* @__PURE__ */ H(d, { children: e }), n ? /* @__PURE__ */ H(s, {
+		className: i("comment-composer--eyebrow bg-muted/40 ring-border/60 flex min-w-0 items-center justify-between gap-space-sm rounded-radius px-row-x ring-1 ring-inset", h.compact),
+		children: [/* @__PURE__ */ H(o, { children: e }), n ? /* @__PURE__ */ H("button", {
 			type: "button",
-			tone: "secondary",
-			buttonStyle: "ghost",
-			size: "sm",
-			iconOnly: !0,
 			onClick: n,
-			className: "size-icon rounded p-0 text-muted-foreground hover:text-foreground",
+			className: i(k.target, k.focus, k.toggle),
 			"aria-label": t,
-			children: /* @__PURE__ */ H(q, { className: "size-icon-sm" })
+			children: /* @__PURE__ */ H(Y, {
+				className: k.icon,
+				"aria-hidden": "true"
+			})
 		}) : null]
 	});
 }
-function Se(e, t) {
+function Q(e, t) {
 	return n(e, { name: t }, { missing: "empty" });
 }
 //#endregion
 //#region src/components/features/comments/partials/comment-empty.tsx
-var Q = ({ strings: e, icon: t, className: n }) => {
-	let r = Y(e);
-	return /* @__PURE__ */ H(k, {
+var $ = ({ strings: e, icon: t, className: n }) => {
+	let r = ge(e);
+	return /* @__PURE__ */ H(re, {
 		title: r.empty,
 		description: r.emptyHint || !1,
-		media: t ?? /* @__PURE__ */ H(W, {
+		media: t ?? /* @__PURE__ */ H(K, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		}),
@@ -632,10 +660,10 @@ var Q = ({ strings: e, icon: t, className: n }) => {
 };
 //#endregion
 //#region src/components/features/comments/partials/comment-content.tsx
-function Ce(e) {
+function Te(e) {
 	let { comment: t, resources: n, renderReference: r, sanitizer: i } = e, a = t.contentType ?? t.content_type ?? "text";
 	if (a === "rich") {
-		let e = we(t.content);
+		let e = Ee(t.content);
 		return e ? /* @__PURE__ */ H("div", {
 			className: "comment-content--component",
 			children: e
@@ -651,48 +679,48 @@ function Ce(e) {
 			sanitizer: i
 		})
 	});
-	let o = Ee(t.content ?? "");
-	return /* @__PURE__ */ H(u, {
+	let o = ke(t.content ?? "");
+	return /* @__PURE__ */ H(s, {
 		className: "comment-content--component whitespace-pre-line",
 		children: o
 	});
 }
-function we(e) {
+function Ee(e) {
 	if (!e) return null;
 	try {
 		let t = JSON.parse(e);
-		return !t || !Array.isArray(t.blocks) || t.blocks.length === 0 ? null : /* @__PURE__ */ H(u, {
+		return !t || !Array.isArray(t.blocks) || t.blocks.length === 0 ? null : /* @__PURE__ */ H(s, {
 			tag: "div",
-			className: _,
-			children: t.blocks.map((e, t) => /* @__PURE__ */ H(N, { children: Te(e) }, e.id ?? `${e.type}-${t}`))
+			className: y,
+			children: t.blocks.map((e, t) => /* @__PURE__ */ H(M, { children: De(e) }, e.id ?? `${e.type}-${t}`))
 		});
 	} catch {
-		let t = Ee(e);
-		return /* @__PURE__ */ H(u, {
+		let t = ke(e);
+		return /* @__PURE__ */ H(s, {
 			className: "whitespace-pre-line",
 			children: t
 		});
 	}
 }
-function Te(e) {
+function De(e) {
 	let t = e.data ?? {};
 	switch (e.type) {
 		case "paragraph": {
 			let e = String(t.text ?? "").trim();
 			if (!e) return null;
-			let n = g(e);
+			let n = v(e);
 			return n ? /* @__PURE__ */ H("p", { dangerouslySetInnerHTML: { __html: n } }) : null;
 		}
 		case "header": {
-			let e = $(String(t.text ?? "")), n = Number(t.level ?? 3);
-			return e ? ie(`h${Math.min(Math.max(n, 1), 6)}`, null, e) : null;
+			let e = Oe(String(t.text ?? "")), n = Number(t.level ?? 3);
+			return e ? ce(`h${Math.min(Math.max(n, 1), 6)}`, null, e) : null;
 		}
 		case "list": {
-			let e = (Array.isArray(t.items) ? t.items : []).map((e) => $(String(e ?? ""))).filter((e) => e.length > 0);
-			return e.length === 0 ? null : t.style === "ordered" ? /* @__PURE__ */ H("ol", { children: e.map((e, t) => /* @__PURE__ */ H("li", { children: /* @__PURE__ */ H(u, {
+			let e = (Array.isArray(t.items) ? t.items : []).map((e) => Oe(String(e ?? ""))).filter((e) => e.length > 0);
+			return e.length === 0 ? null : t.style === "ordered" ? /* @__PURE__ */ H("ol", { children: e.map((e, t) => /* @__PURE__ */ H("li", { children: /* @__PURE__ */ H(s, {
 				tag: "span",
 				children: e
-			}) }, `${e}-${t}`)) }) : /* @__PURE__ */ H("ul", { children: e.map((e) => /* @__PURE__ */ H("li", { children: /* @__PURE__ */ H(u, {
+			}) }, `${e}-${t}`)) }) : /* @__PURE__ */ H("ul", { children: e.map((e) => /* @__PURE__ */ H("li", { children: /* @__PURE__ */ H(s, {
 				tag: "span",
 				children: e
 			}) }, e)) });
@@ -700,16 +728,16 @@ function Te(e) {
 		case "quote": {
 			let e = String(t.text ?? "").trim();
 			if (!e) return null;
-			let n = $(String(t.caption ?? ""));
+			let n = Oe(String(t.caption ?? ""));
 			return /* @__PURE__ */ U("blockquote", {
 				className: "italic",
-				children: [/* @__PURE__ */ H(v, {
+				children: [/* @__PURE__ */ H(b, {
 					tag: "div",
 					html: e,
 					type: "secondary"
 				}), n.length > 0 && /* @__PURE__ */ H("cite", {
 					className: "mt-1 block not-italic",
-					children: /* @__PURE__ */ U(u, {
+					children: /* @__PURE__ */ U(s, {
 						tag: "span",
 						size: "xs",
 						type: "secondary",
@@ -724,7 +752,7 @@ function Te(e) {
 			"aria-hidden": "true"
 		});
 		default: {
-			let e = $(String(t.text ?? ""));
+			let e = Oe(String(t.text ?? ""));
 			return e ? /* @__PURE__ */ H("p", {
 				className: "whitespace-pre-line",
 				children: e
@@ -732,10 +760,10 @@ function Te(e) {
 		}
 	}
 }
-function $(e) {
+function Oe(e) {
 	return e.replace(/<[^>]*>/g, "").trim();
 }
-function Ee(e) {
+function ke(e) {
 	if (typeof e != "string") return "";
 	let t = e.trim();
 	if (t === "") return "";
@@ -748,151 +776,148 @@ function Ee(e) {
 }
 //#endregion
 //#region src/components/features/comments/partials/comment-item.tsx
-var De = "?", Oe = (e) => e?.url, ke = (e) => e?.name, Ae = (e) => e.charAt(0).toUpperCase() + e.slice(1).replace(/_/g, " "), je = F(function({ comment: e, canModerate: t, onDelete: r, onAttachmentRemove: d, onEdit: f, onPinToggle: g, onReact: _, onReply: v, allowReactions: y, allowReplies: b, sanitizer: x, strings: O, getMediaUrl: ee, getMediaName: k, getStatusLabel: te, formatRelativeTime: A, resources: ne, renderAttachment: j, renderReference: re }) {
-	let M = Y(O), N = y ?? !0, ie = b ?? !0, P = ge({
-		getMediaUrl: ee,
-		getMediaName: k,
-		getStatusLabel: te,
-		formatRelativeTime: A
-	}), F = P.getMediaUrl ?? Oe, L = P.getMediaName ?? ke, ae = P.getStatusLabel ?? Ae, z = P.formatRelativeTime, V = e.user?.name ?? M.fallbackAuthor, oe = e.user?.avatar ?? void 0, ce = R(() => {
-		if (!V) return De;
-		let e = V.trim();
-		return e === "" ? De : e.charAt(0).toUpperCase();
-	}, [V]), le = R(() => Array.isArray(e.tagsArray) ? e.tagsArray.filter((e) => typeof e == "string") : e.tagsArray && typeof e.tagsArray == "object" ? Object.values(e.tagsArray).filter((e) => typeof e == "string") : [], [e.tagsArray]), ue = R(() => (e.attachments ?? []).filter((e) => !!e && typeof e == "object"), [e.attachments]), de = N ? e.reactions ?? [] : [], W = e.isPinned === !0, fe = e.isEdited === !0, pe = e.status && e.status !== "active", q = pe && e.status ? ae(e.status) : null, X = e.canDelete === !0 || t === !0, _e = e.canEdit === !0 || t === !0, ye = !!ie && !!v && !!e.id, be = !!N && !!_ && !!e.id, Z = !!g && !!t, xe = !!_e && !!f && !!e.id, Se = !!X && !!r && !!e.id, Q = ye || be || Z || xe || Se, we = m(), [Te, $] = B(null), Ee = I((e) => {
-		$(e), we.show();
-	}, [we]), je = ue.length > 0;
+var Ae = "?", je = (e) => e?.url, Me = (e) => e?.name, Ne = (e) => e.charAt(0).toUpperCase() + e.slice(1).replace(/_/g, " "), Pe = P(function({ comment: e, canModerate: t, onDelete: r, onAttachmentRemove: a, onEdit: o, onPinToggle: c, onReact: h, onReply: v, allowReactions: y, allowReplies: b, sanitizer: x, strings: S, getMediaUrl: C, getMediaName: te, getStatusLabel: ne, formatRelativeTime: re, resources: ie, renderAttachment: A, renderReference: ae }) {
+	let j = ge(S), oe = y ?? !0, se = b ?? !0, M = _e({
+		getMediaUrl: C,
+		getMediaName: te,
+		getStatusLabel: ne,
+		formatRelativeTime: re
+	}), ce = M.getMediaUrl ?? je, N = M.getMediaName ?? Me, P = M.getStatusLabel ?? Ne, I = M.formatRelativeTime, L = e.user?.name ?? j.fallbackAuthor, z = e.user?.avatar ?? void 0, V = R(() => {
+		if (!L) return Ae;
+		let e = L.trim();
+		return e === "" ? Ae : e.charAt(0).toUpperCase();
+	}, [L]), le = R(() => Array.isArray(e.tagsArray) ? e.tagsArray.filter((e) => typeof e == "string") : e.tagsArray && typeof e.tagsArray == "object" ? Object.values(e.tagsArray).filter((e) => typeof e == "string") : [], [e.tagsArray]), W = R(() => (e.attachments ?? []).filter((e) => !!e && typeof e == "object"), [e.attachments]), de = oe ? e.reactions ?? [] : [], G = e.isPinned === !0, fe = e.isEdited === !0, K = e.status && e.status !== "active", pe = K && e.status ? P(e.status) : null, Y = e.canDelete === !0 || t === !0, ve = e.canEdit === !0 || t === !0, ye = !!se && !!v && !!e.id, xe = !!oe && !!h && !!e.id, Se = !!c && !!t, Ce = !!ve && !!o && !!e.id, Z = !!Y && !!r && !!e.id, we = ye || xe || Se || Ce || Z, Q = g(), [$, Ee] = B(null), De = F((e) => {
+		Ee(e), Q.show();
+	}, [Q]), Oe = W.length > 0;
 	return /* @__PURE__ */ U("article", {
-		className: i("comment-item--component group relative overflow-hidden rounded-radius border transition-colors", "border-border/60 bg-card hover:bg-muted/30 px-3 py-2.5"),
+		className: i("comment-item--component group relative overflow-hidden rounded-radius border transition-colors", "border-border/60 bg-card hover:bg-muted/30 p-surface"),
 		"data-comment-id": e.id,
-		children: [/* @__PURE__ */ U(p, {
+		children: [/* @__PURE__ */ U(m, {
 			direction: "horizontal",
 			align: "start",
 			gap: "lg",
 			className: "min-w-0",
-			children: [/* @__PURE__ */ U(T, {
+			children: [/* @__PURE__ */ U(E, {
 				className: "mt-0.5 size-avatar shrink-0",
-				children: [!!oe && /* @__PURE__ */ H(E, {
-					src: oe,
-					alt: V
-				}), /* @__PURE__ */ H(w, {
+				children: [!!z && /* @__PURE__ */ H(D, {
+					src: z,
+					alt: L
+				}), /* @__PURE__ */ H(T, {
 					className: "bg-muted text-muted-foreground text-xs font-medium",
-					children: ce
+					children: V
 				})]
 			}), /* @__PURE__ */ U("div", {
 				className: "comment-item--body min-w-0 flex-1",
 				children: [
-					/* @__PURE__ */ U(p, {
+					/* @__PURE__ */ U(m, {
 						direction: "horizontal",
 						align: "baseline",
 						gap: "md",
 						className: "min-w-0",
 						children: [
-							/* @__PURE__ */ H(u, {
+							/* @__PURE__ */ H(s, {
 								tag: "span",
 								weight: "semibold",
 								className: "truncate",
-								children: V
+								children: L
 							}),
-							!!W && /* @__PURE__ */ H(a, {
+							!!G && /* @__PURE__ */ H(f, {
 								delayDuration: 0,
-								children: /* @__PURE__ */ U(c, { children: [/* @__PURE__ */ H(o, {
+								children: /* @__PURE__ */ U(l, { children: [/* @__PURE__ */ H(u, {
 									render: /* @__PURE__ */ H("span", { className: "inline-flex shrink-0 self-center" }),
-									children: /* @__PURE__ */ H(K, {
-										className: "text-warning size-icon-sm",
+									children: /* @__PURE__ */ H(J, {
+										className: "text-muted-foreground size-icon-sm",
 										"aria-hidden": !0
 									})
-								}), /* @__PURE__ */ H(l, {
+								}), /* @__PURE__ */ H(d, {
 									side: "top",
 									className: "text-xs",
-									children: M.pinned
+									children: j.pinned
 								})] })
 							}),
-							/* @__PURE__ */ H(C, {
+							/* @__PURE__ */ H(ee, {
 								value: e.createdAt,
-								formatRelativeTime: z,
+								formatRelativeTime: I,
 								size: "xs",
 								className: "shrink-0 tabular-nums"
 							}),
-							!!fe && /* @__PURE__ */ H(u, {
+							!!fe && /* @__PURE__ */ H(s, {
 								tag: "span",
 								size: "xs",
 								type: "secondary",
 								className: "shrink-0",
-								children: M.edited
+								children: j.edited
 							}),
-							!!pe && !!q && /* @__PURE__ */ H(D, {
+							!!K && !!pe && /* @__PURE__ */ H(O, {
 								size: "sm",
 								tone: "secondary",
 								className: "self-center",
-								children: q
+								children: pe
 							})
 						]
 					}),
 					/* @__PURE__ */ H("div", {
 						className: "mt-1 leading-relaxed",
-						children: /* @__PURE__ */ H(Ce, {
+						children: /* @__PURE__ */ H(Te, {
 							comment: e,
-							resources: ne,
-							renderReference: re,
+							resources: ie,
+							renderReference: ae,
 							sanitizer: x
 						})
 					}),
 					le.length > 0 && /* @__PURE__ */ H("div", {
 						className: "mt-space-md flex flex-wrap gap-space-sm",
-						children: le.map((e) => /* @__PURE__ */ H(D, {
+						children: le.map((e) => /* @__PURE__ */ H(O, {
 							size: "sm",
 							tone: "secondary",
 							children: e
 						}, e))
 					}),
-					je && /* @__PURE__ */ H("div", {
+					Oe && /* @__PURE__ */ H("div", {
 						className: "mt-space-md flex flex-wrap gap-space-sm",
-						children: ue.map((e) => {
-							if (j) return /* @__PURE__ */ H("div", { children: j(e) }, e.id ?? e.name);
-							let t = !!d && !!e.id && X;
-							return /* @__PURE__ */ H(ve, {
+						children: W.map((e) => {
+							if (A) return /* @__PURE__ */ H("div", { children: A(e) }, e.id ?? e.name);
+							let t = !!a && !!e.id && Y;
+							return /* @__PURE__ */ H(be, {
 								attachment: e,
 								editable: t,
-								onRemove: t ? () => Ee(e.id) : void 0,
+								onRemove: t ? () => De(e.id) : void 0,
 								accessors: {
-									getMediaUrl: F,
-									getMediaName: L
+									getMediaUrl: ce,
+									getMediaName: N
 								},
-								strings: O
+								strings: S
 							}, e.id ?? e.name);
 						})
 					}),
-					de.length > 0 && /* @__PURE__ */ H(p, {
+					de.length > 0 && /* @__PURE__ */ H(m, {
 						direction: "horizontal",
 						wrap: !0,
 						align: "center",
 						gap: "xs",
 						className: "mt-space-md",
-						children: de.map((t) => /* @__PURE__ */ H(s, {
+						children: de.map((t) => /* @__PURE__ */ H("button", {
 							type: "button",
-							"aria-label": n(M.reactionLabel ?? J.reactionLabel, {
+							"aria-label": n(j.reactionLabel ?? X.reactionLabel, {
 								emoji: t.emoji,
 								count: t.count
 							}),
 							"aria-pressed": t.mine ?? !1,
-							tone: "secondary",
-							buttonStyle: "ghost",
-							size: "sm",
-							onClick: () => _ && e.id ? _(e.id, t.emoji) : void 0,
+							onClick: () => h && e.id ? h(e.id, t.emoji) : void 0,
 							title: t.users?.join(", "),
-							className: "h-auto rounded-full p-0",
-							children: /* @__PURE__ */ U(D, {
+							className: i(k.inline, k.focus),
+							children: /* @__PURE__ */ U(O, {
 								size: "sm",
-								tone: t.mine ? "primary" : "secondary",
+								tone: t.mine ? "info" : "secondary",
 								className: "cursor-pointer transition-colors hover:opacity-90",
-								children: [/* @__PURE__ */ H(u, {
+								children: [/* @__PURE__ */ H(s, {
 									tag: "span",
 									size: "inherit",
 									lineHeight: "none",
 									className: "text-inherit",
 									"aria-hidden": !0,
 									children: t.emoji
-								}), /* @__PURE__ */ H(S, {
+								}), /* @__PURE__ */ H(w, {
 									value: t.count,
 									size: "inherit",
 									align: "left",
@@ -901,54 +926,54 @@ var De = "?", Oe = (e) => e?.url, ke = (e) => e?.name, Ae = (e) => e.charAt(0).t
 							})
 						}, t.emoji))
 					}),
-					Q && /* @__PURE__ */ U("div", {
-						className: i("comment-item--actions relative mt-space-md ms-auto w-fit max-w-full flex-wrap opacity-100 transition-opacity", "group-hover:opacity-100 focus-within:opacity-100", "inline-flex items-center gap-space-2xs rounded-radius-md bg-card/95 shadow-sm ring-1 ring-border/70"),
+					we && /* @__PURE__ */ U("div", {
+						className: i("comment-item--actions relative mt-space-md ms-auto w-fit max-w-full flex-wrap opacity-100 transition-opacity", "group-hover:opacity-100 focus-within:opacity-100", "inline-flex items-center gap-space-2xs"),
 						children: [
-							ye && /* @__PURE__ */ H(s, {
+							ye && /* @__PURE__ */ H(p, {
 								type: "button",
 								size: "sm",
 								iconOnly: !0,
 								tone: "secondary",
 								buttonStyle: "ghost",
 								onClick: () => e.id && v(e.id),
-								title: M.replyLabel,
-								"aria-label": M.replyLabel,
-								children: /* @__PURE__ */ H(se, { className: "size-icon-md" })
+								title: j.replyLabel,
+								"aria-label": j.replyLabel,
+								children: /* @__PURE__ */ H(ue, { className: "size-icon-md" })
 							}),
-							be && /* @__PURE__ */ H(s, {
+							xe && /* @__PURE__ */ H(p, {
 								type: "button",
 								size: "sm",
 								iconOnly: !0,
 								tone: "secondary",
 								buttonStyle: "ghost",
-								onClick: () => e.id && _(e.id, "👍"),
-								title: M.addReactionLabel,
-								"aria-label": M.addReactionLabel,
+								onClick: () => e.id && h(e.id, "👍"),
+								title: j.addReactionLabel,
+								"aria-label": j.addReactionLabel,
 								children: /* @__PURE__ */ H(me, { className: "size-icon-md" })
 							}),
-							Z && /* @__PURE__ */ H(s, {
+							Se && /* @__PURE__ */ H(p, {
 								type: "button",
 								size: "sm",
 								iconOnly: !0,
 								tone: "secondary",
 								buttonStyle: "ghost",
-								onClick: () => g(e),
-								title: W ? M.unpinLabel : M.pinLabel,
-								"aria-label": W ? M.unpinLabel : M.pinLabel,
-								children: /* @__PURE__ */ H(K, { className: i("size-icon-md", W && "text-warning") })
+								onClick: () => c(e),
+								title: G ? j.unpinLabel : j.pinLabel,
+								"aria-label": G ? j.unpinLabel : j.pinLabel,
+								children: /* @__PURE__ */ H(J, { className: i("size-icon-md", G && "text-foreground") })
 							}),
-							xe && /* @__PURE__ */ H(s, {
+							Ce && /* @__PURE__ */ H(p, {
 								type: "button",
 								size: "sm",
 								iconOnly: !0,
 								tone: "secondary",
 								buttonStyle: "ghost",
-								title: M.editLabel,
-								"aria-label": M.editLabel,
-								onClick: () => f(e),
-								children: /* @__PURE__ */ H(G, { className: "size-icon-md" })
+								title: j.editLabel,
+								"aria-label": j.editLabel,
+								onClick: () => o(e),
+								children: /* @__PURE__ */ H(q, { className: "size-icon-md" })
 							}),
-							Se && /* @__PURE__ */ H(s, {
+							Z && /* @__PURE__ */ H(p, {
 								type: "button",
 								size: "sm",
 								iconOnly: !0,
@@ -956,31 +981,31 @@ var De = "?", Oe = (e) => e?.url, ke = (e) => e?.name, Ae = (e) => e.charAt(0).t
 								buttonStyle: "ghost",
 								className: "hover:bg-destructive/10 hover:text-destructive",
 								onClick: () => r(e.id),
-								title: M.deleteLabel,
-								"aria-label": M.deleteLabel,
+								title: j.deleteLabel,
+								"aria-label": j.deleteLabel,
 								children: /* @__PURE__ */ H(he, { className: "size-icon-md" })
 							})
 						]
 					})
 				]
 			})]
-		}), !!d && /* @__PURE__ */ H(h, {
-			...we.overlayProps,
+		}), !!a && /* @__PURE__ */ H(_, {
+			...Q.overlayProps,
 			destructive: !0,
-			title: M.confirmRemoveAttachmentTitle,
-			description: M.confirmRemoveAttachmentDescription,
-			strings: { confirm: M.attachmentRemoveLabel },
+			title: j.confirmRemoveAttachmentTitle,
+			description: j.confirmRemoveAttachmentDescription,
+			strings: { confirm: j.attachmentRemoveLabel },
 			onConfirm: () => {
-				Te && e.id && d(e.id, Te);
+				$ && e.id && a(e.id, $);
 			}
 		})]
 	});
-}), Me = function({ comments: e, canModerate: t, onDelete: n, onAttachmentRemove: r, onEdit: i, onPinToggle: a, onReact: o, onReply: s, allowReactions: c, allowReplies: l, sanitizer: u, strings: d, getMediaUrl: f, getMediaName: m, getStatusLabel: h, formatRelativeTime: g, resources: _, renderItem: v, renderAttachment: y, renderReference: b, emptySlot: x }) {
-	return e.length ? /* @__PURE__ */ H(p, {
+}), Fe = function({ comments: e, canModerate: t, onDelete: n, onAttachmentRemove: r, onEdit: i, onPinToggle: a, onReact: o, onReply: s, allowReactions: c, allowReplies: l, sanitizer: u, strings: d, getMediaUrl: f, getMediaName: p, getStatusLabel: h, formatRelativeTime: g, resources: _, renderItem: v, renderAttachment: y, renderReference: b, emptySlot: x }) {
+	return e.length ? /* @__PURE__ */ H(m, {
 		gap: "sm",
 		className: "comment-timeline--component",
-		children: e.map((e, p) => {
-			let x = /* @__PURE__ */ H(je, {
+		children: e.map((e, m) => {
+			let x = /* @__PURE__ */ H(Pe, {
 				comment: e,
 				canModerate: t,
 				onDelete: n,
@@ -994,7 +1019,7 @@ var De = "?", Oe = (e) => e?.url, ke = (e) => e?.name, Ae = (e) => e.charAt(0).t
 				sanitizer: u,
 				strings: d,
 				getMediaUrl: f,
-				getMediaName: m,
+				getMediaName: p,
 				getStatusLabel: h,
 				formatRelativeTime: g,
 				resources: _,
@@ -1008,20 +1033,20 @@ var De = "?", Oe = (e) => e?.url, ke = (e) => e?.name, Ae = (e) => e.charAt(0).t
 				onAttachmentRemove: r,
 				onEdit: i,
 				defaultItem: x
-			}) }, e.id ?? `comment-${p}`) : /* @__PURE__ */ H("div", { children: x }, e.id ?? `comment-${p}`);
+			}) }, e.id ?? `comment-${m}`) : /* @__PURE__ */ H("div", { children: x }, e.id ?? `comment-${m}`);
 		})
-	}) : /* @__PURE__ */ H(V, { children: x ?? /* @__PURE__ */ H(Q, { strings: d }) });
+	}) : /* @__PURE__ */ H(V, { children: x ?? /* @__PURE__ */ H($, { strings: d }) });
 };
 //#endregion
 //#region src/components/features/comments/comments.tsx
-function Ne(t) {
-	let n = e(), r = t.composerPosition ?? n.composerPosition ?? "top", a = t.maxAttachments ?? 5, o = t.allowAttachments ?? !0, s = t.allowReactions ?? !0, c = t.allowReplies ?? !0, l = t.canComment ?? !1, d = t.canModerate ?? !1, f = t.onPinToggle, g = t.resources, _ = t.attachments, v = Y(t.strings), y = t.title === void 0 ? v.title : t.title, b = t.confirmDelete ?? !0, x = m(), [S, C] = B(null), w = X({
+function Ie(t) {
+	let n = e(), r = t.composerPosition ?? n.composerPosition ?? "top", a = t.maxAttachments ?? 5, o = t.allowAttachments ?? !0, c = t.allowReactions ?? !0, l = t.allowReplies ?? !0, u = t.canComment ?? !1, d = t.canModerate ?? !1, f = t.onPinToggle, p = t.resources, h = t.attachments, v = ge(t.strings), y = t.title === void 0 ? v.title : t.title, b = t.confirmDelete ?? !0, x = g(), [S, C] = B(null), w = ve({
 		onSubmit: t.onSubmit,
 		onUpdate: t.onUpdate,
 		onDelete: t.onDelete,
 		onAfterMutate: t.onAfterMutate,
 		onError: t.onError
-	}), T = I((e) => {
+	}), ee = F((e) => {
 		if (!b) {
 			w.deleteComment(e);
 			return;
@@ -1031,19 +1056,19 @@ function Ne(t) {
 		b,
 		w,
 		x
-	]), E = w.startReply, D = t.comments, O = t.onReply, ee = I((e) => {
-		let t = D.find((t) => t.id === e);
-		t && E(t), O?.(e);
+	]), T = w.startReply, E = t.comments, D = t.onReply, O = F((e) => {
+		let t = E.find((t) => t.id === e);
+		t && T(t), D?.(e);
 	}, [
+		E,
 		D,
-		O,
-		E
+		T
 	]), k = w.composerMode.kind === "editing" ? w.composerMode.comment : void 0, te = w.composerMode.kind === "replying" ? {
 		commentId: w.composerMode.commentId,
 		authorName: w.composerMode.authorName
-	} : void 0, A = t.composerSlot ?? (l ? /* @__PURE__ */ H(Z, {
+	} : void 0, ne = t.composerSlot ?? (u ? /* @__PURE__ */ H(Z, {
 		context: t.context,
-		canComment: l,
+		canComment: u,
 		submitting: w.isSubmitting,
 		errors: w.formErrors,
 		resetKey: w.resetKey,
@@ -1052,67 +1077,67 @@ function Ne(t) {
 		onCancel: w.composerMode.kind === "idle" ? void 0 : w.cancelComposerMode,
 		onSubmit: w.submit,
 		strings: t.strings,
-		resources: g,
+		resources: p,
 		onResourceSearch: t.onResourceSearch,
-		attachments: _,
+		attachments: h,
 		maxAttachments: a,
 		allowAttachments: o
-	}) : null), ne = /* @__PURE__ */ H(Me, {
+	}) : null), re = /* @__PURE__ */ H(Fe, {
 		comments: t.comments,
 		canModerate: d,
-		onDelete: t.onDelete ? T : void 0,
+		onDelete: t.onDelete ? ee : void 0,
 		onAttachmentRemove: t.onAttachmentRemove,
-		onEdit: l && t.onUpdate ? w.startEdit : void 0,
+		onEdit: u && t.onUpdate ? w.startEdit : void 0,
 		onPinToggle: f,
 		onReact: t.onReact,
-		onReply: l && c ? ee : void 0,
-		allowReactions: s,
-		allowReplies: c,
+		onReply: u && l ? O : void 0,
+		allowReactions: c,
+		allowReplies: l,
 		sanitizer: t.sanitizer,
 		strings: t.strings,
 		getMediaUrl: t.getMediaUrl,
 		getMediaName: t.getMediaName,
 		getStatusLabel: t.getStatusLabel,
 		formatRelativeTime: t.formatRelativeTime,
-		resources: g,
+		resources: p,
 		renderItem: t.renderItem,
 		renderAttachment: t.renderAttachment,
 		renderReference: t.renderReference,
-		emptySlot: t.emptySlot ?? /* @__PURE__ */ H(Q, { strings: t.strings })
-	}), j = A ? /* @__PURE__ */ H("div", { children: A }) : null, re = /* @__PURE__ */ U(p, {
+		emptySlot: t.emptySlot ?? /* @__PURE__ */ H($, { strings: t.strings })
+	}), ie = ne ? /* @__PURE__ */ H("div", { children: ne }) : null, A = /* @__PURE__ */ U(m, {
 		gap: "xl",
 		className: "comments--body",
 		children: [
 			t.headerSlot,
-			r === "top" && j,
-			ne,
-			r === "bottom" && j,
+			r === "top" && ie,
+			re,
+			r === "bottom" && ie,
 			t.footerSlot
 		]
 	});
-	if (t.bare) return re;
-	let M = typeof y == "string" ? y : void 0;
-	return /* @__PURE__ */ U(p, {
+	if (t.bare) return A;
+	let ae = typeof y == "string" ? y : void 0;
+	return /* @__PURE__ */ U(m, {
 		render: /* @__PURE__ */ H("section", {}),
 		gap: "lg",
 		"data-component": "comments",
 		"data-slot": "comments",
 		className: i("comments--component", t.className),
-		"aria-label": M,
+		"aria-label": ae,
 		children: [
-			!(y === !1 || !y && !v.subtitle) && /* @__PURE__ */ U(p, {
+			!(y === !1 || !y && !v.subtitle) && /* @__PURE__ */ U(m, {
 				gap: "normal",
 				className: "comments--header",
-				children: [!!y && /* @__PURE__ */ H(u, {
+				children: [!!y && /* @__PURE__ */ H(s, {
 					weight: "semibold",
 					children: y
-				}), !!v.subtitle && /* @__PURE__ */ H(u, {
+				}), !!v.subtitle && /* @__PURE__ */ H(s, {
 					type: "secondary",
 					children: v.subtitle
 				})]
 			}),
-			re,
-			!!(b && t.onDelete) && /* @__PURE__ */ H(h, {
+			A,
+			!!(b && t.onDelete) && /* @__PURE__ */ H(_, {
 				...x.overlayProps,
 				destructive: !0,
 				title: v.confirmDeleteTitle,
@@ -1127,6 +1152,6 @@ function Ne(t) {
 	});
 }
 //#endregion
-export { Q as a, ye as c, ge as d, Y as f, Ce as i, ve as l, Me as n, Z as o, J as p, je as r, Se as s, Ne as t, X as u };
+export { $ as a, Se as c, _e as d, ge as f, Te as i, be as l, Fe as n, Z as o, X as p, Pe as r, Q as s, Ie as t, ve as u };
 
-//# sourceMappingURL=comments-DviPLnwy.js.map
+//# sourceMappingURL=comments-You0Bzbr.js.map