themelia-react-ui 2.0.6 → 3.0.0

package/dist/comments-C2MZyRmh.js

@@ -0,0 +1,1214 @@
+"use client";
+import { d as e, u as t } from "./ui-provider-Bu1S-o96.js";
+import { interpolateString as n, useStrings as r } from "./lib/strings.js";
+import { t as i } from "./utils-BVbAG2J6.js";
+import { c as a, o, t as s } from "./typography-C0dELqYV.js";
+import { n as c, t as l } from "./buttons-pZVgPTZn.js";
+import { i as u, n as d, r as f, t as p } from "./tooltip-yjX-Uv-p.js";
+import { t as m } from "./structure-DElaQwwN.js";
+import { i as h } from "./tone-recipes-BPsRAvhu.js";
+import { t as g } from "./row-recipes-DL8n7t_b.js";
+import { n as _ } from "./composition.recipes-COdiFhxB.js";
+import { i as v, t as y } from "./overlays-D-gAIfPF.js";
+import { t as b } from "./interaction-recipes-DmuS1ase.js";
+import { n as x } from "./rich-text-tree-DdKHIJx4.js";
+import { t as S } from "./content-typography-CnwgMJ37.js";
+import { t as C } from "./rich-text-Cypm9__d.js";
+import { g as w, i as T } from "./primitives-BlC1lXBr.js";
+import { n as E, t as D } from "./number-NFWKIoiK.js";
+import { i as O } from "./date-3qsCE1ID.js";
+import { i as k, n as A, s as ee } from "./avatar-Ca3Ihrq4.js";
+import { t as j } from "./badge-oGiXblW7.js";
+import { n as M } from "./field-affordance-recipes-DfbMadot.js";
+import { c as te, o as ne } from "./popover-BpMxbqEK.js";
+import { s as N } from "./data-display-CWe9SOYh.js";
+import { t as re } from "./rich-text-editor-Z6cQepsA.js";
+import { c as ie, n as P, o as F, r as ae, t as I } from "./mentions-zz0ewNIq.js";
+import { Fragment as L, createElement as R, forwardRef as oe, memo as se, useCallback as z, useEffect as B, useId as ce, useImperativeHandle as le, useMemo as V, useRef as H, useState as U } from "react";
+import { Fragment as W, jsx as G, jsxs as K } from "react/jsx-runtime";
+import { AtSign as ue, CornerDownRight as de, File as q, FileText as J, Image as Y, Loader2 as fe, MessageCircle as pe, Paperclip as me, Pencil as he, Pin as ge, Smile as _e, Trash2 as ve, X } from "lucide-react";
+//#region src/components/features/comments/comments.strings.ts
+var Z = {
+	title: "Comments",
+	subtitle: "",
+	empty: "No comments yet.",
+	emptyHint: "Start the conversation — your team will see it instantly.",
+	composerPlaceholder: "Write a comment…",
+	composerSubmit: "Post comment",
+	composerSubmitting: "Posting…",
+	composerSave: "Save changes",
+	invalidContent: "Comment cannot be empty.",
+	composerCancel: "Cancel",
+	composerEditingEyebrow: "Editing comment",
+	composerReplyingEyebrow: "Replying to {{name}}",
+	composerAttachmentLabel: "Attach file",
+	composerReferenceLabel: "Mention or link",
+	composerReferenceMenuTitle: "Insert reference",
+	composerReferenceSearchPlaceholder: "Search…",
+	composerReferenceEmpty: "No matches.",
+	composerReferenceLoading: "Searching…",
+	composerReferenceError: "Suggestions could not be loaded.",
+	composerReferenceRetry: "Try again",
+	fallbackAuthor: "Anonymous",
+	pinned: "Pinned",
+	edited: "edited",
+	deleteLabel: "Delete",
+	editLabel: "Edit",
+	replyLabel: "Reply",
+	pinLabel: "Pin",
+	unpinLabel: "Unpin",
+	confirmDeleteLabel: "Delete comment",
+	confirmDeleteTitle: "Delete this comment?",
+	confirmRemoveAttachmentTitle: "Remove this attachment?",
+	confirmRemoveAttachmentDescription: "The file is detached from the comment for everyone. This cannot be undone.",
+	confirmDeleteDescription: "The comment and its replies are removed for everyone. This cannot be undone.",
+	attachmentFallback: "Attachment",
+	attachmentRemoveLabel: "Remove attachment",
+	attachmentUploadingLabel: "Uploading…",
+	attachmentFailedLabel: "Upload failed",
+	attachmentTooLargeError: "File is too large.",
+	attachmentTooManyError: "Too many attachments.",
+	attachmentFailedSubmitError: "Remove or retry the failed attachment before posting.",
+	attachmentRetryLabel: "Retry",
+	attachmentDownloadLabel: "Download",
+	addReactionLabel: "Add reaction",
+	reactionLabel: "Reaction {{emoji}}: {{count}}"
+};
+//#endregion
+//#region src/components/features/comments/comments-provider.tsx
+function Q(e) {
+	return r(Z, e);
+}
+function ye(t) {
+	let n = e();
+	return V(() => ({
+		getMediaUrl: t?.getMediaUrl,
+		getMediaName: t?.getMediaName,
+		getStatusLabel: t?.getStatusLabel,
+		formatRelativeTime: t?.formatRelativeTime ?? n.formatRelativeTime
+	}), [t, n.formatRelativeTime]);
+}
+//#endregion
+//#region src/components/features/comments/hooks/use-comments.ts
+function $(e = {}) {
+	let { onSubmit: t, onUpdate: n, onDelete: r, onAfterMutate: i, onError: a } = e, [o, s] = U({ kind: "idle" }), [c, l] = U(!1), u = H(!1), [d, f] = U({}), [p, m] = U(0), [h, g] = U(() => /* @__PURE__ */ new Set()), _ = H(/* @__PURE__ */ new Set()), v = z((e) => {
+		u.current = e, l(e);
+	}, []), y = z(() => {
+		m((e) => e + 1), s({ kind: "idle" }), f({}), v(!1);
+	}, [v]), b = V(() => ({
+		setErrors: f,
+		reset: y,
+		setSubmitting: v
+	}), [y, v]), x = z((e) => {
+		try {
+			a?.(e);
+		} catch {}
+	}, [a]);
+	return {
+		composerMode: o,
+		isSubmitting: c,
+		formErrors: d,
+		resetKey: p,
+		startReply: z((e) => {
+			e.id && (f({}), s({
+				kind: "replying",
+				commentId: e.id,
+				authorName: e.user?.name
+			}));
+		}, []),
+		startEdit: z((e) => {
+			e.id && (f({}), s({
+				kind: "editing",
+				comment: e
+			}));
+		}, []),
+		cancelComposerMode: z(() => {
+			y();
+		}, [y]),
+		submit: z(async (e) => {
+			if (o.kind === "editing" && o.comment.id) {
+				if (!n || u.current) return;
+				let t = {
+					...e,
+					editingId: o.comment.id
+				};
+				v(!0), f({});
+				try {
+					await n(o.comment.id, t, b), i?.("update", t);
+				} catch (e) {
+					x(e);
+				} finally {
+					v(!1);
+				}
+				return;
+			}
+			if (!t || u.current) return;
+			let r = o.kind === "replying" ? {
+				...e,
+				replyToId: o.commentId
+			} : e;
+			v(!0), f({});
+			try {
+				await t(r, b), i?.("create", r);
+			} catch (e) {
+				x(e);
+			} finally {
+				v(!1);
+			}
+		}, [
+			o,
+			b,
+			i,
+			t,
+			n,
+			x,
+			v
+		]),
+		deleteComment: z(async (e) => {
+			if (!r || !e || _.current.has(e)) return !1;
+			_.current.add(e), g(new Set(_.current));
+			try {
+				return await r(e), i?.("delete", { commentId: e }), !0;
+			} catch (e) {
+				return x(e), !1;
+			} finally {
+				_.current.delete(e), g(new Set(_.current));
+			}
+		}, [
+			i,
+			r,
+			x
+		]),
+		pendingDeleteIds: h,
+		resetComposer: y,
+		helpers: b
+	};
+}
+//#endregion
+//#region src/components/features/comments/partials/comment-attachment-chip.tsx
+function be(e) {
+	return e.mimeType?.startsWith("image/") ? Y : e.mimeType === "application/pdf" || e.mimeType?.startsWith("text/") ? J : e.mimeType ? q : me;
+}
+var xe = ({ attachment: e, editable: t = !1, onRemove: n, onRetry: o, accessors: c, strings: u, compact: d = !1, className: f }) => {
+	let p = r(Z, u), m = c?.getMediaUrl?.(e) ?? e.url, _ = c?.getMediaName?.(e) ?? e.name ?? p.attachmentFallback, v = be(e), y = e.status === "uploading", x = e.status === "failed", S = y ? /* @__PURE__ */ K(w, {
+		size: "xs",
+		className: "shrink-0",
+		children: [p.attachmentUploadingLabel, typeof e.progress == "number" ? /* @__PURE__ */ K(W, { children: [" ", /* @__PURE__ */ G(E, {
+			value: Math.round(e.progress),
+			scaled: !0,
+			size: "xs",
+			align: "left",
+			type: "secondary"
+		})] }) : null]
+	}) : x ? /* @__PURE__ */ G(w, {
+		size: "xs",
+		className: "shrink-0",
+		children: e.error ?? p.attachmentFailedLabel
+	}) : typeof e.size == "number" ? /* @__PURE__ */ G(T, {
+		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", "ring-1 ring-inset transition-colors", d ? "px-control-xs" : "px-control-sm", g.compact, x ? `${h.destructive.tint} ${h.destructive.halo}` : `bg-muted ring-border/60 ${b.rowHover}`, f), D = y ? /* @__PURE__ */ G(fe, {
+		className: i("shrink-0 animate-spin text-muted-foreground", "size-icon-md"),
+		"aria-hidden": !0
+	}) : /* @__PURE__ */ G(v, {
+		className: i("shrink-0", "size-icon-md", x ? "text-destructive" : "text-muted-foreground"),
+		"aria-hidden": !0
+	}), O = /* @__PURE__ */ K("span", {
+		className: "inline-flex min-w-0 items-baseline gap-space-sm",
+		children: [/* @__PURE__ */ G(a, {
+			tag: "span",
+			size: "xs",
+			weight: "medium",
+			className: i("truncate", x && "text-destructive"),
+			children: _
+		}), S]
+	});
+	return /* @__PURE__ */ K("div", {
+		className: C,
+		children: [
+			D,
+			m && !y && !x ? /* @__PURE__ */ G(s, {
+				href: m,
+				size: "inherit",
+				underline: !1,
+				target: "_blank",
+				rel: "noreferrer noopener",
+				className: "inline-flex min-w-0 flex-1 items-baseline gap-space-sm hover:underline",
+				"aria-label": p.attachmentDownloadLabel,
+				children: O
+			}) : O,
+			y && typeof e.progress == "number" && /* @__PURE__ */ G("div", {
+				className: i(h.primary.line, "absolute bottom-0 left-2 right-2 h-px overflow-hidden rounded-full"),
+				children: /* @__PURE__ */ G("div", {
+					className: "bg-primary h-full transition-[width]",
+					style: { width: `${Math.min(100, Math.max(0, e.progress))}%` }
+				})
+			}),
+			x && o && /* @__PURE__ */ G(l, {
+				type: "button",
+				size: "sm",
+				onClick: () => o(e.id),
+				className: "shrink-0 text-destructive decoration-destructive/30 hover:decoration-destructive/60",
+				children: /* @__PURE__ */ G(a, {
+					tag: "span",
+					size: "xs",
+					weight: "medium",
+					className: "text-inherit",
+					children: p.attachmentRetryLabel
+				})
+			}),
+			t && n && /* @__PURE__ */ G("button", {
+				type: "button",
+				onClick: () => n(e.id),
+				className: i(M.target, M.focus, M.toggle),
+				"aria-label": p.attachmentRemoveLabel,
+				title: p.attachmentRemoveLabel,
+				children: /* @__PURE__ */ G(X, {
+					className: M.icon,
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}, Se = {
+	attachmentTooLargeError: Z.attachmentTooLargeError,
+	attachmentTooManyError: Z.attachmentTooManyError,
+	attachmentFailedLabel: Z.attachmentFailedLabel
+};
+function Ce(e = {}) {
+	let { onUpload: t, maxSize: n, maxFiles: i, disabled: a, initialAttachments: o, onValueChange: s, onError: c, strings: l } = e, u = r(Se, l), [d, f] = U(() => o ? [...o] : []), p = H(/* @__PURE__ */ new Map()), m = H(/* @__PURE__ */ new Map()), h = H(/* @__PURE__ */ new Map()), g = H(d), _ = z((e) => {
+		let t = [...e];
+		g.current = t, f(t);
+	}, []), v = H(s);
+	v.current = s;
+	let y = z((e, t) => {
+		_(g.current.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n));
+	}, [_]), b = z((e) => {
+		_(e);
+	}, [_]), x = z((e, n) => {
+		if (!t || !m.current.has(e)) return;
+		let r = new AbortController();
+		p.current.set(e, { controller: r }), y(e, {
+			status: "uploading",
+			progress: 0,
+			error: void 0
+		}), t({
+			file: n,
+			onProgress: (t) => {
+				r.signal.aborted || y(e, { progress: t });
+			},
+			signal: r.signal
+		}).then((t) => {
+			r.signal.aborted || (p.current.delete(e), t.id && h.current.set(e, t.id), y(e, {
+				...t,
+				id: e,
+				status: "uploaded",
+				progress: 100,
+				error: void 0
+			}));
+		}).catch((t) => {
+			if (p.current.delete(e), r.signal.aborted) return;
+			let n = t instanceof Error ? t.message : u.attachmentFailedLabel;
+			y(e, {
+				status: "failed",
+				error: n
+			}), c?.(n);
+		});
+	}, [
+		c,
+		t,
+		u.attachmentFailedLabel,
+		y
+	]), S = z((e) => {
+		if (a || !t) return;
+		let r = Array.from(e);
+		if (r.length === 0) return;
+		let o = [...g.current], s = [];
+		for (let e of r) {
+			if (typeof i == "number" && o.length >= i) {
+				c?.(u.attachmentTooManyError);
+				break;
+			}
+			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
+			});
+		}
+		_(o);
+		for (let { id: e, file: t } of s) queueMicrotask(() => x(e, t));
+	}, [
+		x,
+		_,
+		a,
+		i,
+		n,
+		c,
+		t,
+		u.attachmentTooLargeError,
+		u.attachmentTooManyError
+	]), C = z((e) => {
+		let t = p.current.get(e);
+		t && (t.controller.abort(), p.current.delete(e)), m.current.delete(e), h.current.delete(e), _(g.current.filter((t) => t.id !== e));
+	}, [_]), w = z((e) => {
+		let t = m.current.get(e);
+		t && x(e, t);
+	}, [x]), T = z(() => {
+		for (let e of p.current.values()) e.controller.abort();
+		p.current.clear(), m.current.clear(), h.current.clear(), _([]);
+	}, [_]);
+	return B(() => {
+		v.current?.(d);
+	}, [d]), B(() => {
+		let e = p.current, t = m.current;
+		return () => {
+			for (let t of e.values()) t.controller.abort();
+			t.clear();
+		};
+	}, []), {
+		attachments: d,
+		uploadedAttachments: V(() => d.filter((e) => e.status === "uploaded" || !e.status).map((e) => {
+			let t = e.id ? h.current.get(e.id) : void 0;
+			return t && t !== e.id ? {
+				...e,
+				id: t
+			} : e;
+		}), [d]),
+		isUploading: V(() => d.some((e) => e.status === "uploading"), [d]),
+		addFiles: S,
+		removeAttachment: C,
+		retryAttachment: w,
+		setAttachments: b,
+		reset: T
+	};
+}
+//#endregion
+//#region src/components/features/comments/partials/comment-composer.tsx
+function we(e) {
+	return !e || typeof e != "string" ? !1 : e.replace(/<[^>]*>/g, "").trim().length > 0;
+}
+function Te(e) {
+	let t = e.content ?? "";
+	return e.contentType === "html" ? t : t.split(/\r?\n/).map((e) => `<p>${e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")}</p>`).join("");
+}
+var Ee = oe(function({ context: e, canComment: t = !0, submitting: n = !1, errors: r, resetKey: i = 0, onSubmit: o, onCancel: s, editingComment: l, replyingTo: u, strings: d, resources: f, onResourceSearch: p, attachments: h, initialValues: g, autoFocus: v = !1, inlineSubmit: y = !0, placeholder: b }, x) {
+	let S = Q(d), C = f, w = p, T = V(() => ({
+		...h,
+		maxFiles: h?.maxFiles ?? 5,
+		disabled: h?.disabled === !0
+	}), [h]), E = H(null), [D, O] = U(() => g?.content ?? l?.content ?? ""), [k, A] = U(null), ee = ce(), j = ce(), [M, N] = U(null), F = ie({
+		resources: C,
+		onResourceSearch: w,
+		editorRef: E,
+		initialMentions: g?.references ?? l?.references
+	}), L = Ce({
+		...T,
+		initialAttachments: g?.attachments ?? void 0,
+		strings: S,
+		onError: N
+	}), R = () => {
+		L.reset(), N(null), s?.();
+	};
+	le(x, () => ({
+		focus: () => E.current?.focus(),
+		clear: () => {
+			E.current?.clear(), F.reset(), L.reset(), A(null), N(null);
+		},
+		setBody: (e) => {
+			E.current?.setHTML(e);
+		}
+	}), [L, F]), B(() => {
+		E.current?.setHTML(g?.content ?? ""), F.setMentions(g?.references ?? []), L.reset(), L.setAttachments(g?.attachments ?? []), A(null), N(null);
+	}, [
+		e.id,
+		e.type,
+		i
+	]), B(() => {
+		if (!l) return;
+		E.current?.setHTML(Te(l)), F.setMentions(l.references ?? []);
+		let e = (l.attachments ?? []).filter((e) => !!e);
+		L.reset(), L.setAttachments(e), N(null), E.current?.focus();
+	}, [l?.id]);
+	let oe = l ? void 0 : u?.commentId;
+	B(() => {
+		oe && E.current?.focus();
+	}, [oe]), B(() => {
+		r?.content && A(r.content);
+	}, [r]);
+	let se = (t) => {
+		if (t?.preventDefault(), n || L.isUploading) return;
+		let r = E.current?.getHTML() ?? D;
+		if (!we(r)) {
+			A(S.invalidContent);
+			return;
+		}
+		if (A(null), L.attachments.some((e) => e.status === "failed")) {
+			N(S.attachmentFailedSubmitError ?? Z.attachmentFailedSubmitError);
+			return;
+		}
+		o({
+			content: r,
+			commentableId: e.id,
+			commentableType: e.type,
+			moduleKey: e.moduleKey,
+			contentType: "html",
+			references: F.mentions,
+			attachments: L.uploadedAttachments,
+			replyToId: u?.commentId ?? g?.replyToId,
+			editingId: l?.id
+		});
+	}, z = H(null), W = () => z.current?.click(), de = (e) => {
+		e?.length && (N(null), L.addFiles(e));
+	}, q = L.attachments.length > 0, J = !!l, Y = !J && !!u, pe = n ? S.composerSubmitting : J ? S.composerSave : S.composerSubmit, he = J ? /* @__PURE__ */ G(De, {
+		id: j,
+		label: S.composerEditingEyebrow,
+		closeLabel: S.composerCancel,
+		onClose: s ? R : void 0
+	}) : Y ? /* @__PURE__ */ G(De, {
+		id: j,
+		label: Oe(S.composerReplyingEyebrow, u.authorName),
+		closeLabel: S.composerCancel,
+		onClose: s ? R : void 0
+	}) : null, ge = V(() => {
+		let e = [];
+		return C && Object.keys(C).length > 0 && e.push({
+			id: "reference",
+			icon: ue,
+			label: S.composerReferenceLabel,
+			onClick: () => F.setPickerOpen(!0)
+		}), T?.onUpload && !T.disabled && e.push({
+			id: "attachment",
+			icon: me,
+			label: S.composerAttachmentLabel,
+			onClick: W
+		}), e;
+	}, [
+		C,
+		T?.onUpload,
+		T?.disabled,
+		S.composerReferenceLabel,
+		S.composerAttachmentLabel
+	]);
+	if (!t) return null;
+	let _e = F.activeKind ? F.errorsByKind[F.activeKind] : F.error, ve = [J || Y ? j : null, k ? ee : null].filter(Boolean).join(" ") || void 0, X = /* @__PURE__ */ G(c, {
+		tone: "primary",
+		type: "button",
+		onClick: () => se(),
+		disabled: n || L.isUploading,
+		icon: n ? fe : void 0,
+		children: pe
+	}), ye = J || Y || s ? /* @__PURE__ */ G(c, {
+		type: "button",
+		tone: "secondary",
+		buttonStyle: "ghost",
+		onClick: R,
+		disabled: n,
+		children: S.composerCancel
+	}) : null, $ = q ? /* @__PURE__ */ G(m, {
+		direction: "horizontal",
+		wrap: !0,
+		align: "center",
+		gap: "sm",
+		children: L.attachments.map((e) => /* @__PURE__ */ G(xe, {
+			attachment: e,
+			editable: !0,
+			onRemove: (e) => {
+				N(null), L.removeAttachment(e);
+			},
+			onRetry: (e) => {
+				N(null), L.retryAttachment(e);
+			},
+			strings: d
+		}, e.id))
+	}) : null, be = q ? $ : null, Se = y !== !1 && !J && !Y ? X : null, Ee = y === !1 || J || Y;
+	return /* @__PURE__ */ K(m, {
+		render: /* @__PURE__ */ G("form", {}),
+		gap: "md",
+		onSubmit: se,
+		className: "comment-composer--component",
+		children: [
+			he,
+			/* @__PURE__ */ G("input", {
+				ref: z,
+				type: "file",
+				multiple: !0,
+				hidden: !0,
+				accept: T?.accept,
+				onChange: (e) => {
+					de(e.target.files), e.target.value = "";
+				}
+			}),
+			!F.triggerActive && /* @__PURE__ */ K(ne, {
+				open: F.pickerOpen,
+				onOpenChange: F.setPickerOpen,
+				children: [/* @__PURE__ */ G(te, { render: /* @__PURE__ */ G(c, {
+					type: "button",
+					tone: "secondary",
+					buttonStyle: "ghost",
+					className: "sr-only",
+					tabIndex: -1,
+					children: S.composerReferenceLabel
+				}) }), /* @__PURE__ */ G(ae, {
+					open: F.pickerOpen,
+					activeKind: F.activeKind,
+					setActiveKind: (e) => {
+						F.setActiveKind(e), F.setManualKindOverride(!0);
+					},
+					kinds: F.kinds,
+					resources: C,
+					query: F.query,
+					setQuery: F.setQuery,
+					suggestions: F.suggestions,
+					loading: F.isLoading,
+					error: _e,
+					onRetry: F.retry,
+					onSelect: F.pickSuggestion,
+					strings: {
+						title: S.composerReferenceMenuTitle,
+						searchPlaceholder: S.composerReferenceSearchPlaceholder,
+						empty: S.composerReferenceEmpty,
+						loading: S.composerReferenceLoading,
+						error: S.composerReferenceError,
+						retry: S.composerReferenceRetry
+					}
+				})]
+			}),
+			/* @__PURE__ */ K("div", {
+				className: "comment-composer--editor relative",
+				onBlur: F.handleBlur,
+				children: [/* @__PURE__ */ G(re, {
+					ref: E,
+					value: D,
+					onValueChange: (e) => {
+						O(e), k && we(e) && A(null);
+						let t = I(e), n = F.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);
+							F.setMentions(r);
+						}
+					},
+					placeholder: b ?? S.composerPlaceholder,
+					strings: { editorLabel: b ?? S.composerPlaceholder },
+					bodyHeight: "field",
+					invalid: !!k,
+					"aria-describedby": ve,
+					autoFocus: v || J || Y,
+					extraToolbarItems: ge,
+					toolbarTrailing: Se,
+					footerSlot: be,
+					onCaretChange: F.handleCaretChange,
+					onEditorKeyDown: F.handleKeyDown,
+					suggestionPopup: F.suggestionPopup
+				}), /* @__PURE__ */ G(P, {
+					open: F.inlineOpen,
+					listboxId: F.listboxId,
+					activeIndex: F.activeIndex,
+					activeKind: F.activeKind,
+					setActiveKind: (e) => {
+						F.setActiveKind(e), F.setManualKindOverride(!0);
+					},
+					kinds: F.kinds,
+					resources: C,
+					query: F.query,
+					suggestions: F.suggestions,
+					suggestionsByKind: F.suggestionsByKind,
+					loading: F.isLoading,
+					error: _e,
+					onRetry: F.retry,
+					onSelect: F.pickSuggestion,
+					strings: {
+						title: S.composerReferenceMenuTitle,
+						empty: S.composerReferenceEmpty,
+						loading: S.composerReferenceLoading,
+						error: S.composerReferenceError,
+						retry: S.composerReferenceRetry
+					}
+				})]
+			}),
+			M && /* @__PURE__ */ G(a, {
+				role: "alert",
+				size: "xs",
+				type: "error",
+				className: "comment-composer--attachment-error",
+				children: M
+			}),
+			k && /* @__PURE__ */ G(a, {
+				id: ee,
+				role: "alert",
+				size: "xs",
+				type: "error",
+				className: "comment-composer--content-error",
+				children: k
+			}),
+			Ee && /* @__PURE__ */ K(m, {
+				direction: "horizontal",
+				align: "center",
+				justify: "end",
+				gap: _.commands,
+				className: "comment-composer--footer-actions",
+				children: [ye, X]
+			})
+		]
+	});
+});
+function De({ id: e, label: t, closeLabel: n, onClose: r }) {
+	return /* @__PURE__ */ K("div", {
+		className: i("comment-composer--eyebrow bg-muted/30 ring-border/60 flex min-w-0 items-center justify-between gap-space-sm rounded-radius px-row-x ring-1 ring-inset", g.compact),
+		children: [/* @__PURE__ */ G(o, {
+			id: e,
+			children: t
+		}), r ? /* @__PURE__ */ G("button", {
+			type: "button",
+			onClick: r,
+			className: i(M.target, M.focus, M.toggle),
+			"aria-label": n,
+			children: /* @__PURE__ */ G(X, {
+				className: M.icon,
+				"aria-hidden": "true"
+			})
+		}) : null]
+	});
+}
+function Oe(e, t) {
+	return n(e, { name: t }, { missing: "empty" });
+}
+//#endregion
+//#region src/components/features/comments/partials/comment-empty.tsx
+var ke = ({ strings: e, icon: t, className: n }) => {
+	let r = Q(e);
+	return /* @__PURE__ */ G(N, {
+		title: r.empty,
+		description: r.emptyHint || !1,
+		media: t ?? /* @__PURE__ */ G(pe, {
+			className: "size-icon",
+			"aria-hidden": "true"
+		}),
+		mediaVariant: "icon-soft",
+		padding: "md",
+		className: i("comment-empty--component", n)
+	});
+};
+//#endregion
+//#region src/components/features/comments/partials/comment-content.tsx
+function Ae(e) {
+	let { comment: t, resources: n, renderReference: r, sanitizer: i } = e, o = t.contentType ?? "text";
+	if (o === "rich") {
+		let e = je(t.content);
+		return e ? /* @__PURE__ */ G("div", {
+			className: "comment-content--component",
+			children: e
+		}) : null;
+	}
+	if (o === "html") return /* @__PURE__ */ G("div", {
+		className: "comment-content--component",
+		children: /* @__PURE__ */ G(F, {
+			className: "text-inherit",
+			html: t.content ?? "",
+			mentions: t.references,
+			resources: n,
+			renderMention: r,
+			sanitizer: i
+		})
+	});
+	let s = Pe(t.content ?? "");
+	return /* @__PURE__ */ G(a, {
+		type: "inherit",
+		className: "comment-content--component whitespace-pre-line",
+		children: s
+	});
+}
+function je(e) {
+	if (!e) return null;
+	try {
+		let t = JSON.parse(e);
+		return !t || !Array.isArray(t.blocks) || t.blocks.length === 0 ? null : /* @__PURE__ */ G(a, {
+			tag: "div",
+			type: "inherit",
+			className: S,
+			children: t.blocks.map((e, t) => /* @__PURE__ */ G(L, { children: Me(e) }, e.id ?? `${e.type}-${t}`))
+		});
+	} catch {
+		let t = Pe(e);
+		return /* @__PURE__ */ G(a, {
+			type: "inherit",
+			className: "whitespace-pre-line",
+			children: t
+		});
+	}
+}
+function Me(e) {
+	let t = e.data ?? {};
+	switch (e.type) {
+		case "paragraph": {
+			let e = String(t.text ?? "").trim();
+			if (!e) return null;
+			let n = x(e);
+			return n ? /* @__PURE__ */ G("p", { dangerouslySetInnerHTML: { __html: n } }) : null;
+		}
+		case "header": {
+			let e = Ne(String(t.text ?? "")), n = Number(t.level ?? 3);
+			return e ? R(`h${Math.min(Math.max(n, 1), 6)}`, null, e) : null;
+		}
+		case "list": {
+			let e = (Array.isArray(t.items) ? t.items : []).map((e) => Ne(String(e ?? ""))).filter((e) => e.length > 0);
+			return e.length === 0 ? null : t.style === "ordered" ? /* @__PURE__ */ G("ol", { children: e.map((e, t) => /* @__PURE__ */ G("li", { children: /* @__PURE__ */ G(a, {
+				tag: "span",
+				type: "inherit",
+				children: e
+			}) }, `${e}-${t}`)) }) : /* @__PURE__ */ G("ul", { children: e.map((e) => /* @__PURE__ */ G("li", { children: /* @__PURE__ */ G(a, {
+				tag: "span",
+				type: "inherit",
+				children: e
+			}) }, e)) });
+		}
+		case "quote": {
+			let e = String(t.text ?? "").trim();
+			if (!e) return null;
+			let n = Ne(String(t.caption ?? ""));
+			return /* @__PURE__ */ K("blockquote", {
+				className: "italic",
+				children: [/* @__PURE__ */ G(C, {
+					tag: "div",
+					html: e,
+					type: "secondary"
+				}), n.length > 0 && /* @__PURE__ */ G("cite", {
+					className: "mt-1 block not-italic",
+					children: /* @__PURE__ */ K(a, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						children: ["— ", n]
+					})
+				})]
+			});
+		}
+		case "delimiter": return /* @__PURE__ */ G("hr", {
+			className: "border-dashed",
+			"aria-hidden": "true"
+		});
+		default: {
+			let e = Ne(String(t.text ?? ""));
+			return e ? /* @__PURE__ */ G("p", {
+				className: "whitespace-pre-line",
+				children: e
+			}) : null;
+		}
+	}
+}
+function Ne(e) {
+	return e.replace(/<[^>]*>/g, "").trim();
+}
+function Pe(e) {
+	if (typeof e != "string") return "";
+	let t = e.trim();
+	if (t === "") return "";
+	if (t.startsWith("{") || t.startsWith("[")) return t;
+	try {
+		let e = JSON.parse(t);
+		if (typeof e == "string") return e;
+	} catch {}
+	return t.startsWith("\"") && t.endsWith("\"") ? t.slice(1, -1) : t;
+}
+//#endregion
+//#region src/components/features/comments/partials/comment-item.tsx
+var Fe = "?", Ie = (e) => e?.url, Le = (e) => e?.name, Re = (e) => e.charAt(0).toUpperCase() + e.slice(1).replace(/_/g, " "), ze = se(function({ comment: e, canModerate: t, onDelete: r, deleting: o = !1, onAttachmentRemove: s, onError: l, onEdit: h, onPinToggle: g, onReact: _, onReply: b, allowReactions: x, allowReplies: S, sanitizer: C, strings: w, getMediaUrl: T, getMediaName: E, getStatusLabel: te, formatRelativeTime: ne, resources: N, renderAttachment: re, renderReference: ie }) {
+	let P = Q(w), F = x ?? !0, ae = S ?? !0, I = ye({
+		getMediaUrl: T,
+		getMediaName: E,
+		getStatusLabel: te,
+		formatRelativeTime: ne
+	}), L = I.getMediaUrl ?? Ie, R = I.getMediaName ?? Le, oe = I.getStatusLabel ?? Re, se = I.formatRelativeTime, B = e.user?.name ?? P.fallbackAuthor, ce = e.user?.avatar ?? void 0, le = V(() => {
+		if (!B) return Fe;
+		let e = B.trim();
+		return e === "" ? Fe : e.charAt(0).toUpperCase();
+	}, [B]), H = V(() => 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 = V(() => (e.attachments ?? []).filter((e) => !!e && typeof e == "object"), [e.attachments]), ue = F ? e.reactions ?? [] : [], q = e.isPinned === !0, J = e.isEdited === !0, Y = e.status && e.status !== "active", fe = Y && e.status ? oe(e.status) : null, pe = e.canDelete === !0 || t === !0, me = e.canEdit === !0 || t === !0, X = !!ae && !!b && !!e.id, $ = !!F && !!_ && !!e.id, be = !!g && !!t, Se = !!me && !!h && !!e.id && e.contentType !== "rich", Ce = !!pe && !!r && !!e.id, we = X || $ || be || Se || Ce, Te = v(), [Ee, De] = U(null), Oe = z((e) => {
+		De(e), Te.show();
+	}, [Te]), ke = W.length > 0;
+	return /* @__PURE__ */ K("article", {
+		className: i("comment-item--component group relative overflow-hidden rounded-surface border transition-colors", "border-border/60 bg-card text-card-foreground px-surface pt-surface", we ? "pb-surface-xs" : "pb-surface"),
+		"data-comment-id": e.id,
+		children: [/* @__PURE__ */ K(m, {
+			direction: "horizontal",
+			align: "start",
+			gap: "lg",
+			className: "min-w-0",
+			children: [/* @__PURE__ */ K(A, {
+				className: "size-avatar shrink-0",
+				children: [!!ce && /* @__PURE__ */ G(ee, {
+					src: ce,
+					alt: B
+				}), /* @__PURE__ */ G(k, {
+					className: "bg-muted text-muted-foreground text-xs font-medium",
+					children: le
+				})]
+			}), /* @__PURE__ */ K("div", {
+				className: "comment-item--body min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ K(m, {
+						gap: "xs",
+						className: "comment-item--message min-w-0",
+						children: [/* @__PURE__ */ K(m, {
+							direction: "horizontal",
+							align: "baseline",
+							gap: "md",
+							className: "min-w-0",
+							children: [
+								/* @__PURE__ */ G(a, {
+									tag: "span",
+									type: "inherit",
+									weight: "semibold",
+									className: "truncate",
+									children: B
+								}),
+								!!q && /* @__PURE__ */ G(f, {
+									delayDuration: 0,
+									children: /* @__PURE__ */ K(p, { children: [/* @__PURE__ */ K(u, {
+										render: /* @__PURE__ */ G("span", { className: "inline-flex shrink-0 self-center" }),
+										children: [/* @__PURE__ */ G(ge, {
+											className: "text-muted-foreground size-icon-sm",
+											"aria-hidden": !0
+										}), /* @__PURE__ */ G("span", {
+											className: "sr-only",
+											children: P.pinned
+										})]
+									}), /* @__PURE__ */ G(d, {
+										side: "top",
+										className: "text-xs",
+										children: P.pinned
+									})] })
+								}),
+								/* @__PURE__ */ G(O, {
+									value: e.createdAt,
+									formatRelativeTime: se,
+									size: "xs",
+									className: "shrink-0 tabular-nums"
+								}),
+								!!J && /* @__PURE__ */ G(a, {
+									tag: "span",
+									size: "xs",
+									type: "secondary",
+									className: "shrink-0",
+									children: P.edited
+								}),
+								!!Y && !!fe && /* @__PURE__ */ G(j, {
+									size: "sm",
+									tone: "secondary",
+									className: "self-center",
+									children: fe
+								})
+							]
+						}), /* @__PURE__ */ G("div", {
+							className: "leading-relaxed",
+							children: /* @__PURE__ */ G(Ae, {
+								comment: e,
+								resources: N,
+								renderReference: ie,
+								sanitizer: C
+							})
+						})]
+					}),
+					H.length > 0 && /* @__PURE__ */ G("div", {
+						className: "mt-space-md flex flex-wrap gap-space-sm",
+						children: H.map((e) => /* @__PURE__ */ G(j, {
+							size: "sm",
+							tone: "secondary",
+							children: e
+						}, e))
+					}),
+					ke && /* @__PURE__ */ G("div", {
+						className: "mt-space-md flex flex-wrap gap-space-sm",
+						children: W.map((e) => {
+							if (re) return /* @__PURE__ */ G("div", { children: re(e) }, e.id ?? e.name);
+							let t = !!s && !!e.id && pe;
+							return /* @__PURE__ */ G(xe, {
+								attachment: e,
+								editable: t,
+								onRemove: t ? () => Oe(e.id) : void 0,
+								accessors: {
+									getMediaUrl: L,
+									getMediaName: R
+								},
+								strings: w
+							}, e.id ?? e.name);
+						})
+					}),
+					ue.length > 0 && /* @__PURE__ */ G(m, {
+						direction: "horizontal",
+						wrap: !0,
+						align: "center",
+						gap: "xs",
+						className: "mt-space-md",
+						children: ue.map((t) => /* @__PURE__ */ G("button", {
+							type: "button",
+							"aria-label": n(P.reactionLabel ?? Z.reactionLabel, {
+								emoji: t.emoji,
+								count: t.count
+							}),
+							"aria-pressed": t.mine ?? !1,
+							onClick: () => _ && e.id ? _(e.id, t.emoji) : void 0,
+							title: t.users?.join(", "),
+							className: i(M.inline, M.focus),
+							children: /* @__PURE__ */ K(j, {
+								size: "sm",
+								tone: t.mine ? "info" : "secondary",
+								className: "cursor-pointer transition-colors",
+								children: [/* @__PURE__ */ G(a, {
+									tag: "span",
+									size: "inherit",
+									lineHeight: "none",
+									className: "text-inherit",
+									"aria-hidden": !0,
+									children: t.emoji
+								}), /* @__PURE__ */ G(D, {
+									value: t.count,
+									size: "inherit",
+									align: "left",
+									className: "tabular-nums text-current"
+								})]
+							})
+						}, t.emoji))
+					}),
+					we && /* @__PURE__ */ K("div", {
+						className: i("comment-item--actions relative mt-space-xs 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: [
+							X && /* @__PURE__ */ G(c, {
+								type: "button",
+								size: "sm",
+								iconOnly: !0,
+								tone: "secondary",
+								buttonStyle: "ghost",
+								onClick: () => e.id && b(e.id),
+								title: P.replyLabel,
+								"aria-label": P.replyLabel,
+								children: /* @__PURE__ */ G(de, { className: "size-icon-md" })
+							}),
+							$ && /* @__PURE__ */ G(c, {
+								type: "button",
+								size: "sm",
+								iconOnly: !0,
+								tone: "secondary",
+								buttonStyle: "ghost",
+								onClick: () => e.id && _(e.id, "👍"),
+								title: P.addReactionLabel,
+								"aria-label": P.addReactionLabel,
+								children: /* @__PURE__ */ G(_e, { className: "size-icon-md" })
+							}),
+							be && /* @__PURE__ */ G(c, {
+								type: "button",
+								size: "sm",
+								iconOnly: !0,
+								tone: "secondary",
+								buttonStyle: "ghost",
+								onClick: () => g(e),
+								title: q ? P.unpinLabel : P.pinLabel,
+								"aria-label": q ? P.unpinLabel : P.pinLabel,
+								children: /* @__PURE__ */ G(ge, { className: i("size-icon-md", q && "text-foreground") })
+							}),
+							Se && /* @__PURE__ */ G(c, {
+								type: "button",
+								size: "sm",
+								iconOnly: !0,
+								tone: "secondary",
+								buttonStyle: "ghost",
+								title: P.editLabel,
+								"aria-label": P.editLabel,
+								onClick: () => h(e),
+								children: /* @__PURE__ */ G(he, { className: "size-icon-md" })
+							}),
+							Ce && /* @__PURE__ */ G(c, {
+								type: "button",
+								size: "sm",
+								iconOnly: !0,
+								tone: "secondary",
+								buttonStyle: "ghost",
+								className: "hover:text-destructive",
+								disabled: o,
+								onClick: () => r(e.id),
+								title: P.deleteLabel,
+								"aria-label": P.deleteLabel,
+								children: /* @__PURE__ */ G(ve, { className: "size-icon-md" })
+							})
+						]
+					})
+				]
+			})]
+		}), !!s && /* @__PURE__ */ G(y, {
+			...Te.overlayProps,
+			destructive: !0,
+			title: P.confirmRemoveAttachmentTitle,
+			description: P.confirmRemoveAttachmentDescription,
+			strings: { confirm: P.attachmentRemoveLabel },
+			onAsyncConfirm: async () => {
+				Ee && e.id && await s(e.id, Ee);
+			},
+			onError: l
+		})]
+	});
+}), Be = function({ comments: e, canModerate: t, onDelete: n, pendingDeleteIds: r, onAttachmentRemove: i, onError: a, onEdit: o, onPinToggle: s, onReact: c, onReply: l, allowReactions: u, allowReplies: d, sanitizer: f, strings: p, getMediaUrl: h, getMediaName: g, getStatusLabel: _, formatRelativeTime: v, resources: y, renderItem: b, renderAttachment: x, renderReference: S, emptySlot: C }) {
+	return e.length ? /* @__PURE__ */ G(m, {
+		gap: "sm",
+		className: "comment-timeline--component",
+		children: e.map((e, m) => {
+			let C = /* @__PURE__ */ G(ze, {
+				comment: e,
+				canModerate: t,
+				onDelete: n,
+				deleting: !!e.id && r?.has(e.id),
+				onAttachmentRemove: i,
+				onError: a,
+				onEdit: o,
+				onPinToggle: s,
+				onReact: c,
+				onReply: l,
+				allowReactions: u,
+				allowReplies: d,
+				sanitizer: f,
+				strings: p,
+				getMediaUrl: h,
+				getMediaName: g,
+				getStatusLabel: _,
+				formatRelativeTime: v,
+				resources: y,
+				renderAttachment: x,
+				renderReference: S
+			});
+			return b ? /* @__PURE__ */ G("div", { children: b({
+				comment: e,
+				canModerate: t ?? !1,
+				onDelete: n,
+				onAttachmentRemove: i,
+				onEdit: o,
+				defaultItem: C
+			}) }, e.id ?? `comment-${m}`) : /* @__PURE__ */ G("div", { children: C }, e.id ?? `comment-${m}`);
+		})
+	}) : /* @__PURE__ */ G(W, { children: C ?? /* @__PURE__ */ G(ke, { strings: p }) });
+}, Ve = /* @__PURE__ */ Error("Comment delete failed."), He = () => {};
+function Ue(e) {
+	let n = t(), r = e.composerPosition ?? n.composerPosition ?? "top", o = e.allowReactions ?? !0, s = e.allowReplies ?? !0, c = e.canComment ?? !1, l = e.canModerate ?? !1, u = e.onPinToggle, d = e.resources, f = e.attachments, p = Q(e.strings), h = e.title === void 0 ? p.title : e.title, g = e.confirmDelete ?? !0, _ = v(), [b, x] = U(null), S = $({
+		onSubmit: e.onSubmit,
+		onUpdate: e.onUpdate,
+		onDelete: e.onDelete,
+		onAfterMutate: e.onAfterMutate,
+		onError: e.onError
+	}), C = z((e) => {
+		if (!g) {
+			S.deleteComment(e);
+			return;
+		}
+		x(e), _.show();
+	}, [
+		g,
+		S,
+		_
+	]), w = S.startReply, T = e.comments, E = e.onReply, D = z((e) => {
+		let t = T.find((t) => t.id === e);
+		t && w(t), E?.(e);
+	}, [
+		T,
+		E,
+		w
+	]), O = S.composerMode.kind === "editing" ? S.composerMode.comment : void 0, k = S.composerMode.kind === "replying" ? {
+		commentId: S.composerMode.commentId,
+		authorName: S.composerMode.authorName
+	} : void 0, A = e.composerSlot ?? (c ? /* @__PURE__ */ G(Ee, {
+		context: e.context,
+		canComment: c,
+		submitting: S.isSubmitting,
+		errors: S.formErrors,
+		resetKey: S.resetKey,
+		editingComment: O,
+		replyingTo: k,
+		onCancel: S.composerMode.kind === "idle" ? void 0 : S.cancelComposerMode,
+		onSubmit: S.submit,
+		strings: e.strings,
+		resources: d,
+		onResourceSearch: e.onResourceSearch,
+		attachments: f
+	}) : null), ee = /* @__PURE__ */ G(Be, {
+		comments: e.comments,
+		canModerate: l,
+		onDelete: e.onDelete ? C : void 0,
+		pendingDeleteIds: S.pendingDeleteIds,
+		onAttachmentRemove: e.onAttachmentRemove,
+		onError: e.onError,
+		onEdit: c && e.onUpdate ? S.startEdit : void 0,
+		onPinToggle: u,
+		onReact: e.onReact,
+		onReply: c && s ? D : void 0,
+		allowReactions: o,
+		allowReplies: s,
+		sanitizer: e.sanitizer,
+		strings: e.strings,
+		getMediaUrl: e.getMediaUrl,
+		getMediaName: e.getMediaName,
+		getStatusLabel: e.getStatusLabel,
+		formatRelativeTime: e.formatRelativeTime,
+		resources: d,
+		renderItem: e.renderItem,
+		renderAttachment: e.renderAttachment,
+		renderReference: e.renderReference,
+		emptySlot: e.emptySlot ?? /* @__PURE__ */ G(ke, { strings: e.strings })
+	}), j = A ? /* @__PURE__ */ G("div", { children: A }) : null, M = /* @__PURE__ */ K(m, {
+		gap: "xl",
+		className: "comments--body",
+		children: [
+			e.headerSlot,
+			r === "top" && j,
+			ee,
+			r === "bottom" && j,
+			e.footerSlot
+		]
+	}), te = typeof h == "string" ? h : void 0;
+	return /* @__PURE__ */ K(m, {
+		render: /* @__PURE__ */ G("section", {}),
+		gap: "lg",
+		"data-component": "comments",
+		"data-slot": "comments",
+		className: i("comments--component", e.className),
+		"aria-label": te,
+		children: [
+			!(h === !1 || !h && !p.subtitle) && /* @__PURE__ */ K(m, {
+				gap: "normal",
+				className: "comments--header",
+				children: [!!h && /* @__PURE__ */ G(a, {
+					weight: "semibold",
+					children: h
+				}), !!p.subtitle && /* @__PURE__ */ G(a, {
+					type: "secondary",
+					children: p.subtitle
+				})]
+			}),
+			M,
+			!!(g && e.onDelete) && /* @__PURE__ */ G(y, {
+				..._.overlayProps,
+				destructive: !0,
+				title: p.confirmDeleteTitle,
+				description: p.confirmDeleteDescription,
+				strings: { confirm: p.confirmDeleteLabel },
+				onAsyncConfirm: async () => {
+					if (b && !await S.deleteComment(b)) throw Ve;
+				},
+				onError: He
+			})
+		]
+	});
+}
+//#endregion
+export { ke as a, Ce as c, ye as d, Q as f, Ae as i, xe as l, Be as n, Ee as o, Z as p, ze as r, Oe as s, Ue as t, $ as u };
+
+//# sourceMappingURL=comments-C2MZyRmh.js.map