themelia-ui 1.0.0

package/dist/comments-DK-mCVsz.js

@@ -0,0 +1,1130 @@
+import "./css/comments.css";
+import { t as e } from "./cx--CBrhWH0.js";
+import { a as t, i as n, o as r, t as i } from "./typography-vC_wwEBm.js";
+import { p as a } from "./feedback-DHdvxang.js";
+import { c as o } from "./buttons-CabBjPap.js";
+import { i as s, n as c, t as l } from "./tooltip-C6LpEyYB.js";
+import { d as u } from "./display-DTWjv_bB.js";
+import { o as d } from "./structure-es_UqqmD.js";
+import { H as f, I as p, S as m, T as h, h as g, w as _ } from "./primitives-D-cyAv5O.js";
+import { t as v } from "./badge-DwsR_WXN.js";
+import { a as y, c as b, r as x } from "./avatar-y8bQHcPP.js";
+import { c as S, t as C } from "./popover-BpUGuOeI.js";
+import { t as w } from "./spinner-4Z1vjSiH.js";
+import { i as ee, t as te } from "./overlays-BN7GOm51.js";
+import { d as T, i as E, l as D, r as O, t as k } from "./mentions-Dw2DfREO.js";
+import { t as ne } from "./rich-text-editor-DTe5uxVK.js";
+import { AtSignIcon as A, CornerDownRightIcon as re, FileIcon as j, FileTextIcon as M, ImageIcon as N, MessageCircleIcon as P, PaperclipIcon as ie, PencilIcon as F, PinIcon as ae, SendIcon as oe, SmileIcon as I, Trash2Icon as L, XIcon as R } from "lucide-react";
+import { Fragment as z, useCallback as B, useEffect as V, useImperativeHandle as se, useMemo as H, useRef as U, useState as W } from "react";
+import { Fragment as G, jsx as K, jsxs as q } from "react/jsx-runtime";
+//#region src/components/features/comments/comments.strings.ts
+function J(e) {
+	if (e < 1024) return `${e} B`;
+	let t = [
+		"KB",
+		"MB",
+		"GB"
+	], n = e / 1024, r = 0;
+	for (; n >= 1024 && r < t.length - 1;) n /= 1024, r += 1;
+	return `${n >= 10 ? Math.round(n) : n.toFixed(1)} ${t[r]}`;
+}
+var Y = {
+	formatQuoteAttribution: (e) => `\u2014 ${e}`,
+	title: "Comments",
+	subtitle: "",
+	empty: "No comments yet.",
+	emptyHint: "Start the conversation — your team will see it straight away.",
+	composerPlaceholder: "Write a comment…",
+	composerSubmit: "Post comment",
+	composerSubmitting: "Posting…",
+	composerSave: "Save changes",
+	composerCancel: "Cancel",
+	invalidContent: "A comment cannot be empty.",
+	composerEditingEyebrow: "Editing comment",
+	formatReplyingEyebrow: (e) => `Replying to ${e}`,
+	composerAttachmentLabel: "Attach a file",
+	composerReferenceLabel: "Mention or link",
+	fallbackAuthor: "Anonymous",
+	pinned: "Pinned",
+	edited: "edited",
+	deleteLabel: "Delete",
+	editLabel: "Edit",
+	replyLabel: "Reply",
+	pinLabel: "Pin",
+	unpinLabel: "Unpin",
+	confirmDeleteTitle: "Delete this comment?",
+	confirmDeleteDescription: "The comment and its replies are removed for everyone. This cannot be undone.",
+	confirmDeleteLabel: "Delete comment",
+	confirmRemoveAttachmentTitle: "Remove this attachment?",
+	confirmRemoveAttachmentDescription: "The file is detached from the comment for everyone. This cannot be undone.",
+	formatShowReplies: (e) => `Show ${e} ${e === 1 ? "reply" : "replies"}`,
+	hideRepliesLabel: "Hide replies",
+	attachmentFallback: "Attachment",
+	attachmentRemoveLabel: "Remove attachment",
+	attachmentUploadingLabel: "Uploading…",
+	attachmentFailedLabel: "Upload failed",
+	attachmentRetryLabel: "Retry",
+	attachmentDownloadLabel: "Download",
+	formatTooLarge: (e) => `Files must be under ${J(e)}.`,
+	formatTooMany: (e) => `You can attach at most ${e}.`,
+	addReactionLabel: "Add reaction"
+}, X = {
+	root: "comments-module__root___WXYKm",
+	header: "comments-module__header___nvvJk",
+	body: "comments-module__body___A-pcE",
+	timeline: "comments-module__timeline___S1twx",
+	item: "comments-module__item___8x4z4",
+	itemRow: "comments-module__itemRow___3z9E1",
+	itemAvatar: "comments-module__itemAvatar___05yGL",
+	itemBody: "comments-module__itemBody___ZbEgR",
+	itemMeta: "comments-module__itemMeta___UbWan",
+	itemPin: "comments-module__itemPin___PdXkA",
+	itemContent: "comments-module__itemContent___mk4B9",
+	itemChips: "comments-module__itemChips___-xCyT",
+	itemActions: "comments-module__itemActions___NjjMQ",
+	reaction: "comments-module__reaction___pI3Es",
+	reactionEmoji: "comments-module__reactionEmoji___WIUjV",
+	repliesToggle: "comments-module__repliesToggle___QLnRv",
+	replies: "comments-module__replies___q6FPS",
+	composer: "comments-module__composer___w8SQi",
+	composerEditor: "comments-module__composerEditor___Y9IKX",
+	eyebrow: "comments-module__eyebrow___-hmXT",
+	eyebrowClose: "comments-module__eyebrowClose___uqdS6",
+	chip: "comments-module__chip___CRRCp",
+	chipIcon: "comments-module__chipIcon___qCfTK",
+	chipLink: "comments-module__chipLink___lvDDC",
+	chipLabel: "comments-module__chipLabel___cUE1i",
+	chipName: "comments-module__chipName___GJClz",
+	chipMeta: "comments-module__chipMeta___tFBBB",
+	chipProgress: "comments-module__chipProgress___UIXjx",
+	chipProgressFill: "comments-module__chipProgressFill___wmYmP",
+	chipRetry: "comments-module__chipRetry___0chpE",
+	chipRemove: "comments-module__chipRemove___pW7li",
+	plain: "comments-module__plain___qvZs5",
+	richBlocks: "comments-module__richBlocks___PTONh",
+	richList: "comments-module__richList___iN-RO",
+	richListOrdered: "comments-module__richListOrdered___PptYS",
+	richQuote: "comments-module__richQuote___it23C",
+	richCite: "comments-module__richCite___GurIn",
+	richDelimiter: "comments-module__richDelimiter___fDsw1"
+}, Z = {
+	image: N,
+	document: M,
+	file: j,
+	unknown: ie
+};
+function Q(e) {
+	return e ? e.startsWith("image/") ? "image" : e === "application/pdf" || e.startsWith("text/") ? "document" : "file" : "unknown";
+}
+function ce({ mimeType: e, className: t }) {
+	let n = Z[Q(e)];
+	return /* @__PURE__ */ K(n, { className: t });
+}
+function le({ attachment: t, editable: n = !1, onRemove: i, onRetry: a, accessors: s, strings: c, className: l }) {
+	let u = {
+		...Y,
+		...c
+	}, d = s?.getMediaUrl?.(t) ?? t.url, p = s?.getMediaName?.(t) ?? t.name ?? u.attachmentFallback, g = t.status === "uploading", _ = t.status === "failed", v = g ? /* @__PURE__ */ q(f, {
+		size: "xs",
+		className: X.chipMeta,
+		children: [u.attachmentUploadingLabel, typeof t.progress == "number" && /* @__PURE__ */ q(G, { children: [" ", /* @__PURE__ */ K(h, {
+			value: Math.round(t.progress),
+			scaled: !0,
+			size: "xs",
+			type: "secondary"
+		})] })]
+	}) : _ ? /* @__PURE__ */ K(f, {
+		size: "xs",
+		className: X.chipMeta,
+		children: t.error ?? u.attachmentFailedLabel
+	}) : typeof t.size == "number" ? /* @__PURE__ */ K(m, {
+		value: t.size,
+		size: "xs",
+		className: X.chipMeta
+	}) : null, y = /* @__PURE__ */ q("span", {
+		className: X.chipLabel,
+		children: [/* @__PURE__ */ K(r, {
+			tag: "span",
+			size: "xs",
+			weight: "medium",
+			type: _ ? "error" : "main",
+			truncate: !0,
+			children: p
+		}), v]
+	}), b = !!d && !g && !_;
+	return /* @__PURE__ */ q("div", {
+		"data-slot": "comment-attachment",
+		"data-status": t.status,
+		className: e("comment-attachment-chip--component", X.chip, l),
+		children: [
+			g ? /* @__PURE__ */ K(w, {}) : /* @__PURE__ */ K(ce, {
+				mimeType: t.mimeType,
+				className: X.chipIcon
+			}),
+			b ? /* @__PURE__ */ K("a", {
+				href: d,
+				target: "_blank",
+				rel: "noreferrer noopener",
+				"aria-label": u.attachmentDownloadLabel,
+				className: X.chipLink,
+				children: y
+			}) : y,
+			g && typeof t.progress == "number" && /* @__PURE__ */ K("div", {
+				className: X.chipProgress,
+				children: /* @__PURE__ */ K("div", {
+					className: X.chipProgressFill,
+					style: { width: `${Math.min(100, Math.max(0, t.progress))}%` }
+				})
+			}),
+			_ && !!a && /* @__PURE__ */ K(o, {
+				type: "button",
+				tone: "destructive",
+				buttonStyle: "ghost",
+				onClick: () => a(t.id),
+				className: X.chipRetry,
+				children: u.attachmentRetryLabel
+			}),
+			n && !!i && /* @__PURE__ */ K(o, {
+				type: "button",
+				tone: "neutral",
+				buttonStyle: "ghost",
+				iconOnly: !0,
+				onClick: () => i(t.id),
+				"aria-label": u.attachmentRemoveLabel,
+				title: u.attachmentRemoveLabel,
+				className: X.chipRemove,
+				children: /* @__PURE__ */ K(R, {})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/features/comments/use-attachment-upload.ts
+function ue() {
+	return typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `attachment-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function de(e = {}) {
+	let { onUpload: t, maxSize: n, maxFiles: r, disabled: i, initialAttachments: a, onValueChange: o, onReject: s } = e, [c, l] = W(() => a ? [...a] : []), u = U(/* @__PURE__ */ new Map()), d = U(/* @__PURE__ */ new Map()), f = U(o), p = U(s);
+	V(() => {
+		f.current = o, p.current = s;
+	});
+	let m = B((e, t) => {
+		l((n) => n.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n));
+	}, []), h = B((e) => l([...e]), []), g = B((e, n) => {
+		if (!t) return;
+		let r = new AbortController();
+		u.current.set(e, r), m(e, {
+			status: "uploading",
+			progress: 0,
+			error: void 0
+		}), t({
+			file: n,
+			onProgress: (t) => m(e, { progress: t }),
+			signal: r.signal
+		}).then((t) => {
+			u.current.delete(e), m(e, {
+				...t,
+				id: e,
+				status: "uploaded",
+				progress: 100,
+				error: void 0
+			});
+		}).catch((t) => {
+			u.current.delete(e), !r.signal.aborted && m(e, {
+				status: "failed",
+				error: t instanceof Error ? t.message : void 0
+			});
+		});
+	}, [t, m]), _ = B((e) => {
+		if (i || !t) return;
+		let a = Array.from(e);
+		a.length !== 0 && l((e) => {
+			let t = [...e], i = (e) => p.current?.(e);
+			for (let e of a) {
+				if (typeof r == "number" && t.length >= r) {
+					i({
+						code: "too-many",
+						file: e,
+						limit: r
+					});
+					break;
+				}
+				if (typeof n == "number" && e.size > n) {
+					i({
+						code: "too-large",
+						file: e,
+						limit: n
+					});
+					continue;
+				}
+				let a = ue();
+				d.current.set(a, e), t.push({
+					id: a,
+					name: e.name,
+					size: e.size,
+					mimeType: e.type,
+					status: "uploading",
+					progress: 0
+				}), queueMicrotask(() => g(a, e));
+			}
+			return t;
+		});
+	}, [
+		g,
+		i,
+		r,
+		n,
+		t
+	]), v = B((e) => {
+		u.current.get(e)?.abort(), u.current.delete(e), d.current.delete(e), l((t) => t.filter((t) => t.id !== e));
+	}, []), y = B((e) => {
+		let t = d.current.get(e);
+		t && g(e, t);
+	}, [g]), b = B(() => {
+		for (let e of u.current.values()) e.abort();
+		u.current.clear(), d.current.clear(), l([]);
+	}, []);
+	return V(() => {
+		f.current?.(c);
+	}, [c]), V(() => {
+		let e = u.current;
+		return () => {
+			for (let t of e.values()) t.abort();
+		};
+	}, []), {
+		attachments: c,
+		uploadedAttachments: H(() => c.filter((e) => e.status === "uploaded" || !e.status), [c]),
+		isUploading: H(() => c.some((e) => e.status === "uploading"), [c]),
+		addFiles: _,
+		removeAttachment: v,
+		retryAttachment: y,
+		setAttachments: h,
+		reset: b
+	};
+}
+//#endregion
+//#region src/components/features/comments/comment-composer.tsx
+function fe(e) {
+	return typeof e == "string" && e.replace(/<[^>]*>/g, "").trim().length > 0;
+}
+function pe({ label: e, closeLabel: t, onClose: r }) {
+	return /* @__PURE__ */ q("div", {
+		className: X.eyebrow,
+		children: [/* @__PURE__ */ K(n, { children: e }), !!r && /* @__PURE__ */ K(o, {
+			type: "button",
+			tone: "neutral",
+			buttonStyle: "ghost",
+			iconOnly: !0,
+			onClick: r,
+			"aria-label": t,
+			className: X.eyebrowClose,
+			children: /* @__PURE__ */ K(R, {})
+		})]
+	});
+}
+function me({ context: t, canComment: n = !0, submitting: i = !1, errors: a, resetKey: s = 0, onSubmit: c, onCancel: l, editingComment: f, replyingTo: p, strings: m, resources: h, onResourceSearch: g, attachments: _, maxAttachments: v, allowAttachments: y = !0, initialValues: b, autoFocus: x = !1, inlineSubmit: ee = !1, placeholder: te, className: D, ref: re }) {
+	let j = {
+		...Y,
+		...m
+	}, M = U(null), N = U(null), [P, F] = W(b?.content ?? ""), [ae, I] = W(null), L = k({
+		resources: h,
+		onResourceSearch: g,
+		editorRef: M
+	}), [R, z] = W(null), G = de({
+		..._,
+		maxFiles: v ?? _?.maxFiles,
+		initialAttachments: b?.attachments,
+		onReject: (e) => {
+			z(e), _?.onReject?.(e);
+		}
+	}), J = !!f, Z = !J && !!p, Q = B(() => {
+		M.current?.clear(), F(""), L.reset(), G.reset(), I(null), z(null);
+	}, []);
+	V(() => {
+		Q();
+	}, [
+		t.id,
+		t.type,
+		s
+	]), V(() => {
+		f && (M.current?.setHTML(f.content ?? ""), F(f.content ?? ""), L.setMentions(f.references ?? []), G.setAttachments((f.attachments ?? []).filter((e) => !!e)));
+	}, [f?.id]), V(() => {
+		a?.content && I(a.content);
+	}, [a]), se(re, () => ({
+		focus: () => M.current?.focus(),
+		clear: Q,
+		setBody: (e) => {
+			M.current?.setHTML(e), F(e);
+		}
+	}), [Q]);
+	let ce = B((e) => {
+		F(e);
+		let t = T(e), n = t.map((e) => e.id).join("|");
+		L.setMentions((e) => {
+			if (e.map((e) => e.id).join("|") === n) return e;
+			let r = new Map(e.map((e) => [e.id, e]));
+			return t.map((e) => r.get(e.id) ?? e);
+		});
+	}, [L]), ue = B((e) => {
+		if (e?.preventDefault(), i || G.isUploading) return;
+		let n = M.current?.getHTML() ?? P;
+		if (!fe(n)) {
+			I(j.invalidContent);
+			return;
+		}
+		I(null), c({
+			content: n,
+			commentableId: t.id,
+			commentableType: t.type,
+			moduleKey: t.moduleKey,
+			contentType: "html",
+			references: L.mentions,
+			attachments: G.uploadedAttachments,
+			replyToId: p?.commentId ?? b?.replyToId,
+			editingId: f?.id
+		});
+	}, [
+		P,
+		t,
+		j.invalidContent,
+		f?.id,
+		b?.replyToId,
+		L.mentions,
+		c,
+		p?.commentId,
+		i,
+		G.isUploading,
+		G.uploadedAttachments
+	]), me = H(() => {
+		let e = [];
+		return h && Object.keys(h).length > 0 && e.push({
+			id: "reference",
+			icon: A,
+			label: j.composerReferenceLabel,
+			onClick: () => L.setPickerOpen(!0)
+		}), y && _?.onUpload && !_.disabled && e.push({
+			id: "attachment",
+			icon: ie,
+			label: j.composerAttachmentLabel,
+			onClick: () => N.current?.click()
+		}), e;
+	}, [
+		y,
+		_?.disabled,
+		_?.onUpload,
+		j.composerAttachmentLabel,
+		j.composerReferenceLabel,
+		L,
+		h
+	]);
+	if (!n) return null;
+	let $ = i ? j.composerSubmitting : J ? j.composerSave : j.composerSubmit, he = /* @__PURE__ */ q(o, {
+		type: "button",
+		onClick: () => ue(),
+		disabled: i || G.isUploading,
+		children: [K(i ? w : oe, {}), $]
+	}), ge = ee === !1 || J || Z, _e = R ? R.code === "too-large" ? j.formatTooLarge(R.limit) : j.formatTooMany(R.limit) : null, ve = J ? /* @__PURE__ */ K(pe, {
+		label: j.composerEditingEyebrow,
+		closeLabel: j.composerCancel,
+		onClose: l
+	}) : Z ? /* @__PURE__ */ K(pe, {
+		label: j.formatReplyingEyebrow(p.authorName ?? j.fallbackAuthor),
+		closeLabel: j.composerCancel,
+		onClose: l
+	}) : null;
+	return /* @__PURE__ */ q("form", {
+		onSubmit: ue,
+		className: e("comment-composer--component", X.composer, D),
+		children: [
+			ve,
+			/* @__PURE__ */ K("input", {
+				ref: N,
+				type: "file",
+				multiple: !0,
+				hidden: !0,
+				accept: _?.accept,
+				onChange: (e) => {
+					e.target.files && G.addFiles(e.target.files), e.target.value = "";
+				}
+			}),
+			!L.triggerActive && /* @__PURE__ */ q(C, {
+				open: L.pickerOpen,
+				onOpenChange: L.setPickerOpen,
+				children: [/* @__PURE__ */ K(S, { render: /* @__PURE__ */ K(u, { render: /* @__PURE__ */ K("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-hidden": !0
+				}) }) }), /* @__PURE__ */ K(E, {
+					open: L.pickerOpen,
+					activeKind: L.activeKind,
+					setActiveKind: L.setActiveKind,
+					kinds: L.kinds,
+					resources: h,
+					suggestionsByKind: L.suggestionsByKind,
+					query: L.query,
+					setQuery: L.setQuery,
+					suggestions: L.suggestions,
+					loading: L.isLoading,
+					onSelect: L.pickSuggestion
+				})]
+			}),
+			/* @__PURE__ */ q("div", {
+				className: X.composerEditor,
+				children: [/* @__PURE__ */ K(ne, {
+					ref: M,
+					compact: !0,
+					value: P,
+					onValueChange: ce,
+					placeholder: te ?? j.composerPlaceholder,
+					strings: { editorLabel: te ?? j.composerPlaceholder },
+					autoFocus: x || J || Z,
+					hideSourceToggle: !0,
+					extraToolbarItems: me,
+					toolbarTrailing: ge ? void 0 : he,
+					footerSlot: G.attachments.length > 0 ? /* @__PURE__ */ K(d, {
+						direction: "horizontal",
+						wrap: !0,
+						align: "center",
+						gap: "sm",
+						children: G.attachments.map((e) => /* @__PURE__ */ K(le, {
+							attachment: e,
+							editable: !0,
+							onRemove: G.removeAttachment,
+							onRetry: G.retryAttachment,
+							strings: m
+						}, e.id))
+					}) : void 0,
+					onCaretChange: L.handleCaretChange
+				}), /* @__PURE__ */ K(O, {
+					open: L.triggerActive && L.pickerOpen,
+					activeKind: L.activeKind,
+					setActiveKind: L.setActiveKind,
+					onManualKindChange: () => L.setManualKindOverride(!0),
+					kinds: L.kinds,
+					resources: h,
+					query: L.query,
+					suggestions: L.suggestions,
+					suggestionsByKind: L.suggestionsByKind,
+					loading: L.isLoading,
+					onSelect: L.pickSuggestion
+				})]
+			}),
+			!!ae && /* @__PURE__ */ K(r, {
+				size: "xs",
+				type: "error",
+				children: ae
+			}),
+			!!_e && /* @__PURE__ */ K(r, {
+				size: "xs",
+				type: "error",
+				children: _e
+			}),
+			ge && /* @__PURE__ */ q(d, {
+				direction: "horizontal",
+				align: "center",
+				justify: "end",
+				gap: "md",
+				children: [!!l && /* @__PURE__ */ K(o, {
+					type: "button",
+					tone: "neutral",
+					buttonStyle: "ghost",
+					onClick: l,
+					disabled: i,
+					children: j.composerCancel
+				}), he]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/features/comments/comment-content.tsx
+function $(e) {
+	return e.replace(/<[^>]*>/g, "").trim();
+}
+function he(e) {
+	if (typeof e != "string") return "";
+	let t = e.trim();
+	if (t === "" || 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;
+}
+function ge({ block: n, copy: a }) {
+	let o = n.data ?? {};
+	switch (n.type) {
+		case "paragraph": {
+			let e = String(o.text ?? "").trim();
+			return e ? /* @__PURE__ */ K(i, { html: e }) : null;
+		}
+		case "header": {
+			let e = $(String(o.text ?? ""));
+			if (!e) return null;
+			let n = Math.min(Math.max(Number(o.level ?? 3), 1), 6);
+			return /* @__PURE__ */ K(t, {
+				level: n,
+				children: e
+			});
+		}
+		case "list": {
+			let t = (Array.isArray(o.items) ? o.items : []).map((e) => $(String(e ?? ""))).filter((e) => e.length > 0);
+			if (t.length === 0) return null;
+			let n = o.style === "ordered";
+			return /* @__PURE__ */ K(n ? "ol" : "ul", {
+				className: e(X.richList, n && X.richListOrdered),
+				children: t.map((e, t) => /* @__PURE__ */ K("li", { children: /* @__PURE__ */ K(r, {
+					tag: "span",
+					children: e
+				}) }, `${e}-${t}`))
+			});
+		}
+		case "quote": {
+			let e = String(o.text ?? "").trim();
+			if (!e) return null;
+			let t = $(String(o.caption ?? ""));
+			return /* @__PURE__ */ q("blockquote", {
+				className: X.richQuote,
+				children: [/* @__PURE__ */ K(i, {
+					html: e,
+					type: "secondary"
+				}), t.length > 0 && /* @__PURE__ */ K("cite", {
+					className: X.richCite,
+					children: /* @__PURE__ */ K(r, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						children: a.formatQuoteAttribution(t)
+					})
+				})]
+			});
+		}
+		case "delimiter": return /* @__PURE__ */ K("div", {
+			"aria-hidden": !0,
+			className: X.richDelimiter
+		});
+		default: {
+			let e = $(String(o.text ?? ""));
+			return e ? /* @__PURE__ */ K(r, {
+				className: X.plain,
+				children: e
+			}) : null;
+		}
+	}
+}
+function _e({ raw: e, copy: t }) {
+	if (!e) return null;
+	let n;
+	try {
+		let t = JSON.parse(e);
+		n = Array.isArray(t?.blocks) ? t.blocks : [];
+	} catch {
+		return /* @__PURE__ */ K(r, {
+			className: X.plain,
+			children: he(e)
+		});
+	}
+	return n.length === 0 ? null : /* @__PURE__ */ K("div", {
+		className: X.richBlocks,
+		children: n.map((e, n) => /* @__PURE__ */ K(z, { children: /* @__PURE__ */ K(ge, {
+			block: e,
+			copy: t
+		}) }, e.id ?? `${e.type}-${n}`))
+	});
+}
+function ve({ comment: t, resources: n, renderReference: i, sanitizer: a, strings: o, className: s }) {
+	let c = {
+		...Y,
+		...o
+	}, l = e("comment-content--component", s), u = t.contentType ?? "text";
+	return u === "rich" ? /* @__PURE__ */ K("div", {
+		className: l,
+		children: /* @__PURE__ */ K(_e, {
+			raw: t.content,
+			copy: c
+		})
+	}) : u === "html" ? /* @__PURE__ */ K("div", {
+		className: l,
+		children: /* @__PURE__ */ K(D, {
+			html: t.content ?? "",
+			mentions: t.references,
+			resources: n,
+			renderMention: i,
+			sanitizer: a
+		})
+	}) : /* @__PURE__ */ K(r, {
+		className: e(l, X.plain),
+		children: he(t.content)
+	});
+}
+//#endregion
+//#region src/components/features/comments/comment-item.tsx
+var ye = "active";
+function be(e) {
+	let t = e.replace(/_/g, " ");
+	return t.charAt(0).toUpperCase() + t.slice(1);
+}
+function xe({ comment: t, replies: n, canModerate: i, onDelete: a, onAttachmentRemove: u, onEdit: f, onPinToggle: m, onReact: h, onReply: S, allowReactions: C = !0, allowReplies: w = !0, sanitizer: T, strings: E, getMediaUrl: D, getMediaName: O, getStatusLabel: k, resources: ne, renderAttachment: A, renderReference: j, className: M }) {
+	let N = {
+		...Y,
+		...E
+	}, P = t.user?.name ?? N.fallbackAuthor, ie = t.status && t.status !== ye ? k?.(t.status) ?? be(t.status) : null, oe = t.canDelete ?? i === !0, R = t.canEdit ?? i === !0, z = H(() => {
+		let e = t.tagsArray;
+		return Array.isArray(e) ? e.filter((e) => typeof e == "string") : e && typeof e == "object" ? Object.values(e).filter((e) => typeof e == "string") : [];
+	}, [t.tagsArray]), V = H(() => (t.attachments ?? []).filter((e) => !!e && typeof e == "object"), [t.attachments]), se = C ? t.reactions ?? [] : [], U = ee(), [J, Z] = W(null), Q = B((e) => {
+		Z(e), U.show();
+	}, [U]), [ce, ue] = W(!1), de = n?.length ?? 0;
+	return /* @__PURE__ */ q("article", {
+		"data-slot": "comment",
+		"data-comment-id": t.id,
+		"data-pinned": t.isPinned || void 0,
+		className: e("comment-item--component", X.item, M),
+		children: [/* @__PURE__ */ q(d, {
+			direction: "horizontal",
+			align: "start",
+			gap: "lg",
+			className: X.itemRow,
+			children: [
+				/* @__PURE__ */ q(x, {
+					className: X.itemAvatar,
+					children: [!!t.user?.avatar && /* @__PURE__ */ K(b, {
+						src: t.user.avatar,
+						alt: P
+					}), /* @__PURE__ */ K(y, { children: p(P) })]
+				}),
+				/* @__PURE__ */ q("div", {
+					className: X.itemBody,
+					children: [
+						/* @__PURE__ */ q(d, {
+							direction: "horizontal",
+							align: "baseline",
+							gap: "md",
+							wrap: !0,
+							className: X.itemMeta,
+							children: [
+								/* @__PURE__ */ K(r, {
+									tag: "span",
+									weight: "semibold",
+									truncate: !0,
+									children: P
+								}),
+								t.isPinned && /* @__PURE__ */ q(l, { children: [/* @__PURE__ */ K(s, {
+									render: /* @__PURE__ */ K("span", { className: X.itemPin }),
+									children: /* @__PURE__ */ K(ae, { "aria-label": N.pinned })
+								}), /* @__PURE__ */ K(c, { children: N.pinned })] }),
+								/* @__PURE__ */ K(g, {
+									value: t.createdAt,
+									size: "xs",
+									type: "secondary"
+								}),
+								t.isEdited && /* @__PURE__ */ K(r, {
+									tag: "span",
+									size: "xs",
+									type: "secondary",
+									children: N.edited
+								}),
+								!!ie && /* @__PURE__ */ K(v, {
+									tone: "neutral",
+									children: ie
+								})
+							]
+						}),
+						/* @__PURE__ */ K("div", {
+							className: X.itemContent,
+							children: /* @__PURE__ */ K(ve, {
+								comment: t,
+								resources: ne,
+								renderReference: j,
+								sanitizer: T
+							})
+						}),
+						z.length > 0 && /* @__PURE__ */ K("div", {
+							className: X.itemChips,
+							children: z.map((e) => /* @__PURE__ */ K(v, {
+								tone: "neutral",
+								children: e
+							}, e))
+						}),
+						V.length > 0 && /* @__PURE__ */ K("div", {
+							className: X.itemChips,
+							children: V.map((e) => {
+								if (A) return /* @__PURE__ */ K("div", { children: A(e) }, e.id ?? e.name);
+								let t = !!u && !!e.id && oe;
+								return /* @__PURE__ */ K(le, {
+									attachment: e,
+									editable: t,
+									onRemove: t ? () => Q(e.id) : void 0,
+									accessors: {
+										getMediaUrl: D,
+										getMediaName: O
+									},
+									strings: E
+								}, e.id ?? e.name);
+							})
+						}),
+						se.length > 0 && /* @__PURE__ */ K("div", {
+							className: X.itemChips,
+							children: se.map((e) => /* @__PURE__ */ q("button", {
+								type: "button",
+								"data-mine": e.mine || void 0,
+								onClick: () => t.id && h?.(t.id, e.emoji),
+								title: e.users?.join(", "),
+								className: X.reaction,
+								children: [/* @__PURE__ */ K("span", {
+									"aria-hidden": !0,
+									className: X.reactionEmoji,
+									children: e.emoji
+								}), /* @__PURE__ */ K(_, {
+									value: e.count,
+									size: "xs",
+									type: "inherit"
+								})]
+							}, e.emoji))
+						}),
+						de > 0 && /* @__PURE__ */ q(G, { children: [/* @__PURE__ */ K(o, {
+							tone: "neutral",
+							buttonStyle: "ghost",
+							onClick: () => ue((e) => !e),
+							className: X.repliesToggle,
+							children: ce ? N.hideRepliesLabel : N.formatShowReplies(de)
+						}), ce && /* @__PURE__ */ K("div", {
+							className: X.replies,
+							children: n?.map((e) => /* @__PURE__ */ K(xe, {
+								comment: e,
+								canModerate: i,
+								onDelete: a,
+								onAttachmentRemove: u,
+								onEdit: f,
+								onPinToggle: m,
+								onReact: h,
+								onReply: S,
+								allowReactions: C,
+								allowReplies: w,
+								sanitizer: T,
+								strings: E,
+								getMediaUrl: D,
+								getMediaName: O,
+								getStatusLabel: k,
+								resources: ne,
+								renderAttachment: A,
+								renderReference: j
+							}, e.id))
+						})] })
+					]
+				}),
+				/* @__PURE__ */ q("div", {
+					className: X.itemActions,
+					children: [
+						w && !!S && /* @__PURE__ */ K(o, {
+							tone: "neutral",
+							buttonStyle: "ghost",
+							iconOnly: !0,
+							onClick: () => t.id && S(t.id),
+							"aria-label": N.replyLabel,
+							title: N.replyLabel,
+							children: /* @__PURE__ */ K(re, {})
+						}),
+						C && !!h && /* @__PURE__ */ K(o, {
+							tone: "neutral",
+							buttonStyle: "ghost",
+							iconOnly: !0,
+							onClick: () => t.id && h(t.id, "👍"),
+							"aria-label": N.addReactionLabel,
+							title: N.addReactionLabel,
+							children: /* @__PURE__ */ K(I, {})
+						}),
+						!!m && i && /* @__PURE__ */ K(o, {
+							tone: "neutral",
+							buttonStyle: "ghost",
+							iconOnly: !0,
+							onClick: () => m(t),
+							"aria-label": t.isPinned ? N.unpinLabel : N.pinLabel,
+							title: t.isPinned ? N.unpinLabel : N.pinLabel,
+							children: /* @__PURE__ */ K(ae, {})
+						}),
+						R && !!f && !!t.id && /* @__PURE__ */ K(o, {
+							tone: "neutral",
+							buttonStyle: "ghost",
+							iconOnly: !0,
+							onClick: () => f(t),
+							"aria-label": N.editLabel,
+							title: N.editLabel,
+							children: /* @__PURE__ */ K(F, {})
+						}),
+						oe && !!a && !!t.id && /* @__PURE__ */ K(o, {
+							tone: "destructive",
+							buttonStyle: "ghost",
+							iconOnly: !0,
+							onClick: () => a(t.id),
+							"aria-label": N.deleteLabel,
+							title: N.deleteLabel,
+							children: /* @__PURE__ */ K(L, {})
+						})
+					]
+				})
+			]
+		}), !!u && /* @__PURE__ */ K(te, {
+			...U.overlayProps,
+			destructive: !0,
+			title: N.confirmRemoveAttachmentTitle,
+			description: N.confirmRemoveAttachmentDescription,
+			strings: { confirm: N.attachmentRemoveLabel },
+			onConfirm: () => {
+				J && t.id && u(t.id, J);
+			}
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/comments/comment-timeline.tsx
+function Se({ comments: t, canModerate: n, onDelete: r, onAttachmentRemove: i, onEdit: o, onPinToggle: s, onReact: c, onReply: l, allowReactions: u, allowReplies: d, sanitizer: f, strings: p, getMediaUrl: m, getMediaName: h, getStatusLabel: g, resources: _, renderItem: v, renderAttachment: y, renderReference: b, emptySlot: x, className: S }) {
+	let C = {
+		...Y,
+		...p
+	}, { roots: w, repliesByParent: ee } = H(() => {
+		let e = new Set(t.map((e) => e.id).filter(Boolean)), n = /* @__PURE__ */ new Map(), r = [];
+		for (let i of t) if (i.replyToId && e.has(i.replyToId)) {
+			let e = n.get(i.replyToId) ?? [];
+			e.push(i), n.set(i.replyToId, e);
+		} else r.push(i);
+		return {
+			roots: r,
+			repliesByParent: n
+		};
+	}, [t]);
+	return t.length === 0 ? /* @__PURE__ */ K(G, { children: x ?? /* @__PURE__ */ K(a, {
+		padding: "sm",
+		media: /* @__PURE__ */ K(P, {}),
+		mediaVariant: "icon",
+		title: C.empty,
+		description: C.emptyHint
+	}) }) : /* @__PURE__ */ K("div", {
+		"data-slot": "comment-timeline",
+		className: e("comment-timeline--component", X.timeline, S),
+		children: w.map((e, t) => {
+			let a = /* @__PURE__ */ K(xe, {
+				comment: e,
+				replies: d === !1 ? void 0 : ee.get(e.id ?? ""),
+				canModerate: n,
+				onDelete: r,
+				onAttachmentRemove: i,
+				onEdit: o,
+				onPinToggle: s,
+				onReact: c,
+				onReply: l,
+				allowReactions: u,
+				allowReplies: d,
+				sanitizer: f,
+				strings: p,
+				getMediaUrl: m,
+				getMediaName: h,
+				getStatusLabel: g,
+				resources: _,
+				renderAttachment: y,
+				renderReference: b
+			});
+			return /* @__PURE__ */ K("div", { children: v ? v({
+				comment: e,
+				canModerate: n ?? !1,
+				onDelete: r,
+				onAttachmentRemove: i,
+				onEdit: o,
+				defaultItem: a
+			}) : a }, e.id ?? `comment-${t}`);
+		})
+	});
+}
+//#endregion
+//#region src/components/features/comments/use-comments.ts
+function Ce(e = {}) {
+	let { onSubmit: t, onUpdate: n, onDelete: r, onAfterMutate: i, onError: a } = e, [o, s] = W({ kind: "idle" }), [c, l] = W(!1), [u, d] = W({}), [f, p] = W(0), m = U(!1), h = B((e) => {
+		m.current = e, l(e);
+	}, []), g = B(() => {
+		p((e) => e + 1), s({ kind: "idle" }), d({}), h(!1);
+	}, [h]), _ = H(() => ({
+		setErrors: d,
+		reset: g,
+		setSubmitting: h
+	}), [g, h]), v = B((e) => {
+		try {
+			a?.(e);
+		} catch {}
+	}, [a]);
+	return {
+		composerMode: o,
+		isSubmitting: c,
+		formErrors: u,
+		resetKey: f,
+		startReply: B((e) => {
+			e.id && (d({}), s({
+				kind: "replying",
+				commentId: e.id,
+				authorName: e.user?.name
+			}));
+		}, []),
+		startEdit: B((e) => {
+			e.id && (d({}), s({
+				kind: "editing",
+				comment: e
+			}));
+		}, []),
+		cancelComposerMode: B(() => g(), [g]),
+		submit: B(async (e) => {
+			if (m.current) return;
+			let r = o.kind === "editing" ? o.comment : null;
+			if (!(r ? n : t)) return;
+			let a = r ? {
+				...e,
+				editingId: r.id
+			} : o.kind === "replying" ? {
+				...e,
+				replyToId: o.commentId
+			} : e;
+			h(!0), d({});
+			try {
+				r && n ? await n(r.id, a, _) : t && await t(a, _), i?.(r ? "update" : "create", a);
+			} catch (e) {
+				v(e);
+			} finally {
+				h(!1);
+			}
+		}, [
+			o,
+			_,
+			i,
+			t,
+			n,
+			v,
+			h
+		]),
+		deleteComment: B(async (e) => {
+			if (!(!r || !e)) try {
+				await r(e), i?.("delete", { commentId: e });
+			} catch (e) {
+				v(e);
+			}
+		}, [
+			i,
+			r,
+			v
+		]),
+		resetComposer: g,
+		helpers: _
+	};
+}
+//#endregion
+//#region src/components/features/comments/comments.tsx
+function we(t) {
+	let { context: n, comments: i, canComment: a = !0, canModerate: o = !1, composerPosition: s = "top", maxAttachments: c, allowAttachments: l = !0, allowReactions: u = !0, allowReplies: f = !0, bare: p = !1, confirmDelete: m = !0, className: h, strings: g } = t, _ = {
+		...Y,
+		...g
+	}, v = t.title ?? _.title, y = Ce({
+		onSubmit: t.onSubmit,
+		onUpdate: t.onUpdate,
+		onDelete: t.onDelete,
+		onAfterMutate: t.onAfterMutate,
+		onError: t.onError
+	}), b = ee(), [x, S] = W(null), C = B((e) => {
+		if (!m) {
+			y.deleteComment(e);
+			return;
+		}
+		S(e), b.show();
+	}, [
+		m,
+		b,
+		y
+	]), { startReply: w } = y, { onReply: T } = t, E = B((e) => {
+		let t = i.find((t) => t.id === e);
+		t && w(t), T?.(e);
+	}, [
+		i,
+		T,
+		w
+	]), D = y.composerMode.kind === "editing" ? y.composerMode.comment : void 0, O = y.composerMode.kind === "replying" ? {
+		commentId: y.composerMode.commentId,
+		authorName: y.composerMode.authorName
+	} : void 0, k = t.composerSlot ?? (a ? /* @__PURE__ */ K(me, {
+		context: n,
+		canComment: a,
+		submitting: y.isSubmitting,
+		errors: y.formErrors,
+		resetKey: y.resetKey,
+		editingComment: D,
+		replyingTo: O,
+		onCancel: y.composerMode.kind === "idle" ? void 0 : y.cancelComposerMode,
+		onSubmit: y.submit,
+		strings: g,
+		resources: t.resources,
+		onResourceSearch: t.onResourceSearch,
+		attachments: t.attachments,
+		maxAttachments: c,
+		allowAttachments: l
+	}) : null), ne = /* @__PURE__ */ K(Se, {
+		comments: i,
+		canModerate: o,
+		onDelete: t.onDelete ? C : void 0,
+		onAttachmentRemove: t.onAttachmentRemove,
+		onEdit: a && t.onUpdate ? y.startEdit : void 0,
+		onPinToggle: t.onPinToggle,
+		onReact: t.onReact,
+		onReply: a && f ? E : void 0,
+		allowReactions: u,
+		allowReplies: f,
+		sanitizer: t.sanitizer,
+		strings: g,
+		getMediaUrl: t.getMediaUrl,
+		getMediaName: t.getMediaName,
+		getStatusLabel: t.getStatusLabel,
+		resources: t.resources,
+		renderItem: t.renderItem,
+		renderAttachment: t.renderAttachment,
+		renderReference: t.renderReference,
+		emptySlot: t.emptySlot
+	}), A = /* @__PURE__ */ q(d, {
+		gap: "xl",
+		className: X.body,
+		children: [
+			t.headerSlot,
+			s === "top" && k,
+			ne,
+			s === "bottom" && k,
+			t.footerSlot
+		]
+	}), re = !!(m && t.onDelete) && /* @__PURE__ */ K(te, {
+		...b.overlayProps,
+		destructive: !0,
+		title: _.confirmDeleteTitle,
+		description: _.confirmDeleteDescription,
+		strings: { confirm: _.confirmDeleteLabel },
+		onAsyncConfirm: async () => {
+			x && await y.deleteComment(x);
+		},
+		onError: t.onError
+	});
+	return p ? /* @__PURE__ */ q(G, { children: [A, re] }) : /* @__PURE__ */ q("section", {
+		"data-slot": "comments",
+		"aria-label": typeof v == "string" ? v : void 0,
+		className: e("comments--component", X.root, h),
+		children: [
+			v !== !1 && !!(v || _.subtitle) && /* @__PURE__ */ q(d, {
+				gap: "xs",
+				className: X.header,
+				children: [!!v && /* @__PURE__ */ K(r, {
+					weight: "semibold",
+					children: v
+				}), !!_.subtitle && /* @__PURE__ */ K(r, {
+					type: "secondary",
+					children: _.subtitle
+				})]
+			}),
+			A,
+			re
+		]
+	});
+}
+//#endregion
+export { ve as a, le as c, xe as i, Y as l, Ce as n, me as o, Se as r, de as s, we as t };