themelia-react-ui 1.0.0 → 1.0.2

package/dist/comments-u5L0OGip.js

@@ -0,0 +1,1156 @@
+"use client";
+import { a as e, o as t } from "./ui-provider-DRPn3qNl.js";
+import { interpolateString as n, useStrings as r } from "./lib/strings.js";
+import { t as i } from "./utils-BvH9PSmq.js";
+import { t as a } from "./buttons-D_6KJvEE.js";
+import { a as o, r as s, t as c } from "./typography-BxQgiZyw.js";
+import { a as l, c as u, o as d, s as f, t as p } from "./button-BZDasD04.js";
+import { t as m } from "./structure-CRdqVawd.js";
+import { t as h } from "./row-recipes-DL8n7t_b.js";
+import { i as g, t as _ } from "./overlays-DUbs1KEi.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-DlxDOtf4.js";
+import { g as x, i as S } from "./primitives-C7ff0QaI.js";
+import { n as C, t as w } from "./number-DasMFWEG.js";
+import { i as T } from "./date-DOKhJPu7.js";
+import { i as E, n as D, s as O } from "./avatar-Bu2HhitA.js";
+import { t as k } from "./badge-CzId1Wlm.js";
+import { t as A } from "./field-affordance-recipes-uKY4MsZ_.js";
+import { c as ee, o as te } from "./popover-CghIYdQf.js";
+import { l as ne } from "./data-display-Bihs9Ven.js";
+import { t as re } from "./rich-text-editor-BKyG7rWz.js";
+import { l as j, n as ie, o as M, r as ae, t as oe } from "./mentions-Cl0Kt_Pd.js";
+import { Fragment as N, createElement as se, forwardRef as P, memo as F, useCallback as I, useEffect as L, useImperativeHandle as R, useMemo as z, useRef as B, useState as V } from "react";
+import { Fragment as H, jsx as U, jsxs as W } from "react/jsx-runtime";
+import { AtSign as ce, CornerDownRight as le, File as G, FileText as ue, Image as K, Loader2 as de, MessageCircle as q, Paperclip as fe, Pencil as J, Pin as Y, Send as pe, Smile as me, Trash2 as he, X as ge } from "lucide-react";
+//#region src/components/features/comments/comments.strings.ts
+var X = {
+	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…",
+	fallbackAuthor: "Anonymous",
+	pinned: "Pinned",
+	edited: "edited",
+	deleteLabel: "Delete",
+	editLabel: "Edit",
+	replyLabel: "Reply",
+	pinLabel: "Pin",
+	unpinLabel: "Unpin",
+	moreActionsLabel: "More actions",
+	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.",
+	attachmentRetryLabel: "Retry",
+	attachmentDownloadLabel: "Download",
+	addReactionLabel: "Add reaction",
+	reactionLabel: "Reaction {{emoji}}: {{count}}",
+	showRepliesLabel: "Show replies",
+	hideRepliesLabel: "Hide replies"
+};
+//#endregion
+//#region src/components/features/comments/comments-provider.tsx
+function Z(e) {
+	return r(X, e);
+}
+function _e(e) {
+	let n = t();
+	return z(() => ({
+		getMediaUrl: e?.getMediaUrl,
+		getMediaName: e?.getMediaName,
+		getStatusLabel: e?.getStatusLabel,
+		formatRelativeTime: e?.formatRelativeTime ?? n.formatRelativeTime
+	}), [e, n.formatRelativeTime]);
+}
+//#endregion
+//#region src/components/features/comments/hooks/use-comments.ts
+function Q(e = {}) {
+	let { onSubmit: t, onUpdate: n, onDelete: r, onAfterMutate: i, onError: a } = e, [o, s] = V({ kind: "idle" }), [c, l] = V(!1), u = B(!1), [d, f] = V({}), [p, m] = V(0), h = I((e) => {
+		u.current = e, l(e);
+	}, []), g = I(() => {
+		m((e) => e + 1), s({ kind: "idle" }), f({}), h(!1);
+	}, [h]), _ = z(() => ({
+		setErrors: f,
+		reset: g,
+		setSubmitting: h
+	}), [g, h]), v = I((e) => {
+		try {
+			a?.(e);
+		} catch {}
+	}, [a]);
+	return {
+		composerMode: o,
+		isSubmitting: c,
+		formErrors: d,
+		resetKey: p,
+		startReply: I((e) => {
+			e.id && (f({}), s({
+				kind: "replying",
+				commentId: e.id,
+				authorName: e.user?.name
+			}));
+		}, []),
+		startEdit: I((e) => {
+			e.id && (f({}), s({
+				kind: "editing",
+				comment: e
+			}));
+		}, []),
+		cancelComposerMode: I(() => {
+			g();
+		}, [g]),
+		submit: I(async (e) => {
+			if (o.kind === "editing" && o.comment.id) {
+				if (!n || u.current) return;
+				let t = {
+					...e,
+					editingId: o.comment.id
+				};
+				h(!0), f({});
+				try {
+					await n(o.comment.id, t, _), i?.("update", t);
+				} catch (e) {
+					v(e);
+				} finally {
+					h(!1);
+				}
+				return;
+			}
+			if (!t || u.current) return;
+			let r = o.kind === "replying" ? {
+				...e,
+				replyToId: o.commentId
+			} : e;
+			h(!0), f({});
+			try {
+				await t(r, _), i?.("create", r);
+			} catch (e) {
+				v(e);
+			} finally {
+				h(!1);
+			}
+		}, [
+			o,
+			_,
+			i,
+			t,
+			n,
+			v,
+			h
+		]),
+		deleteComment: I(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/partials/comment-attachment-chip.tsx
+function ve(e) {
+	return e.mimeType?.startsWith("image/") ? K : e.mimeType === "application/pdf" || e.mimeType?.startsWith("text/") ? ue : e.mimeType ? G : fe;
+}
+var ye = ({ attachment: e, editable: t = !1, onRemove: n, onRetry: s, 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, _ = ve(e), v = e.status === "uploading", y = e.status === "failed", b = v ? /* @__PURE__ */ W(x, {
+		size: "xs",
+		className: "shrink-0",
+		children: [p.attachmentUploadingLabel, typeof e.progress == "number" ? /* @__PURE__ */ W(H, { children: [" ", /* @__PURE__ */ U(C, {
+			value: Math.round(e.progress),
+			scaled: !0,
+			size: "xs",
+			align: "left",
+			type: "secondary"
+		})] }) : null]
+	}) : y ? /* @__PURE__ */ U(x, {
+		size: "xs",
+		className: "shrink-0",
+		children: e.error ?? p.attachmentFailedLabel
+	}) : typeof e.size == "number" ? /* @__PURE__ */ U(S, {
+		value: e.size,
+		size: "xs",
+		className: "shrink-0"
+	}) : 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), T = v ? /* @__PURE__ */ U(de, {
+		className: i("shrink-0 animate-spin text-muted-foreground", "size-icon-md"),
+		"aria-hidden": !0
+	}) : /* @__PURE__ */ U(_, {
+		className: i("shrink-0", "size-icon-md", y ? "text-destructive" : "text-muted-foreground"),
+		"aria-hidden": !0
+	}), E = /* @__PURE__ */ W("span", {
+		className: "inline-flex min-w-0 items-baseline gap-space-sm",
+		children: [/* @__PURE__ */ U(o, {
+			tag: "span",
+			size: "xs",
+			weight: "medium",
+			className: i("truncate", y && "text-destructive"),
+			children: g
+		}), b]
+	});
+	return /* @__PURE__ */ W("div", {
+		className: w,
+		children: [
+			T,
+			m && !v && !y ? /* @__PURE__ */ U(c, {
+				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: E
+			}) : E,
+			v && typeof e.progress == "number" && /* @__PURE__ */ U("div", {
+				className: "bg-primary/15 absolute bottom-0 left-2 right-2 h-px overflow-hidden rounded-full",
+				children: /* @__PURE__ */ U("div", {
+					className: "bg-primary h-full transition-[width]",
+					style: { width: `${Math.min(100, Math.max(0, e.progress))}%` }
+				})
+			}),
+			y && s && /* @__PURE__ */ U(a, {
+				type: "button",
+				size: "sm",
+				onClick: () => s(e.id),
+				className: "shrink-0 text-destructive decoration-destructive/30 hover:decoration-destructive/60",
+				children: /* @__PURE__ */ U(o, {
+					tag: "span",
+					size: "xs",
+					weight: "medium",
+					className: "text-inherit",
+					children: p.attachmentRetryLabel
+				})
+			}),
+			t && n && /* @__PURE__ */ U("button", {
+				type: "button",
+				onClick: () => n(e.id),
+				className: i(A.target, A.focus, A.toggle),
+				"aria-label": p.attachmentRemoveLabel,
+				title: p.attachmentRemoveLabel,
+				children: /* @__PURE__ */ U(ge, {
+					className: A.icon,
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}, be = {
+	attachmentTooLargeError: X.attachmentTooLargeError,
+	attachmentTooManyError: X.attachmentTooManyError,
+	attachmentFailedLabel: X.attachmentFailedLabel
+};
+function xe(e = {}) {
+	let { onUpload: t, maxSize: n, maxFiles: i, disabled: a, initialAttachments: o, onValueChange: s, onError: c, strings: l } = e, u = r(be, l), [d, f] = V(() => o ? [...o] : []), p = B(/* @__PURE__ */ new Map()), m = B(/* @__PURE__ */ new Map()), h = B(d), g = I((e) => {
+		let t = [...e];
+		h.current = t, f(t);
+	}, []), _ = B(s);
+	_.current = s;
+	let v = I((e, t) => {
+		g(h.current.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n));
+	}, [g]), y = I((e) => {
+		g(e);
+	}, [g]), b = I((e, n) => {
+		if (!t || !m.current.has(e)) return;
+		let r = new AbortController();
+		p.current.set(e, { controller: r }), v(e, {
+			status: "uploading",
+			progress: 0,
+			error: void 0
+		}), t({
+			file: n,
+			onProgress: (t) => {
+				r.signal.aborted || v(e, { progress: t });
+			},
+			signal: r.signal
+		}).then((t) => {
+			r.signal.aborted || (p.current.delete(e), v(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;
+			v(e, {
+				status: "failed",
+				error: n
+			}), c?.(n);
+		});
+	}, [
+		c,
+		t,
+		u.attachmentFailedLabel,
+		v
+	]), x = I((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;
+			}
+			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));
+	}, [
+		b,
+		g,
+		a,
+		i,
+		n,
+		c,
+		t,
+		u.attachmentTooLargeError,
+		u.attachmentTooManyError
+	]), S = I((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 = I((e) => {
+		let t = m.current.get(e);
+		t && b(e, t);
+	}, [b]), w = I(() => {
+		for (let e of p.current.values()) e.controller.abort();
+		p.current.clear(), m.current.clear(), g([]);
+	}, [g]);
+	return L(() => {
+		_.current?.(d);
+	}, [d]), L(() => {
+		let e = p.current, t = m.current;
+		return () => {
+			for (let t of e.values()) t.controller.abort();
+			t.clear();
+		};
+	}, []), {
+		attachments: d,
+		uploadedAttachments: z(() => d.filter((e) => e.status === "uploaded" || !e.status), [d]),
+		isUploading: z(() => 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 Se(e) {
+	return !e || typeof e != "string" ? !1 : e.replace(/<[^>]*>/g, "").trim().length > 0;
+}
+var Ce = P(function({ context: e, canComment: t = !0, submitting: n = !1, errors: r, resetKey: i = 0, onSubmit: a, onCancel: s, 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 = Z(u), w = d, T = f, E = _ ?? !0, D = h?.maxFiles ?? g ?? 5, O = z(() => ({
+		...h,
+		maxFiles: D,
+		disabled: h?.disabled === !0 || !E
+	}), [
+		E,
+		h,
+		D
+	]), k = B(null), [A, ne] = V(() => v?.content ?? c?.content ?? ""), [M, N] = V(null), [se, P] = V(null), F = j({
+		resources: w,
+		onResourceSearch: T,
+		editorRef: k,
+		initialMentions: v?.references ?? c?.references
+	}), I = xe({
+		...O,
+		initialAttachments: v?.attachments ?? void 0,
+		strings: C,
+		onError: P
+	}), H = () => {
+		I.reset(), P(null), s?.();
+	};
+	R(S, () => ({
+		focus: () => k.current?.focus(),
+		clear: () => {
+			k.current?.clear(), F.reset(), I.reset(), N(null), P(null);
+		},
+		setBody: (e) => {
+			k.current?.setHTML(e);
+		}
+	}), [I, F]), L(() => {
+		k.current?.setHTML(v?.content ?? ""), F.setMentions(v?.references ?? []), I.reset(), I.setAttachments(v?.attachments ?? []), N(null), P(null);
+	}, [
+		e.id,
+		e.type,
+		i
+	]), L(() => {
+		if (!c) return;
+		k.current?.setHTML(c.content ?? ""), F.setMentions(c.references ?? []);
+		let e = (c.attachments ?? []).filter((e) => !!e);
+		I.reset(), I.setAttachments(e), P(null);
+	}, [c?.id]), L(() => {
+		r?.content && N(r.content);
+	}, [r]);
+	let le = (t) => {
+		if (t?.preventDefault(), n || I.isUploading) return;
+		let r = k.current?.getHTML() ?? A;
+		if (!Se(r)) {
+			N(C.invalidContent);
+			return;
+		}
+		N(null), a({
+			content: r,
+			commentableId: e.id,
+			commentableType: e.type,
+			moduleKey: e.moduleKey,
+			contentType: "html",
+			references: F.mentions,
+			attachments: I.uploadedAttachments,
+			replyToId: l?.commentId ?? v?.replyToId,
+			editingId: c?.id
+		});
+	}, G = B(null), ue = () => G.current?.click(), K = (e) => {
+		e?.length && (P(null), I.addFiles(e));
+	}, q = I.attachments.length > 0, J = !!c, Y = !J && !!l, me = n ? C.composerSubmitting : J ? C.composerSave : C.composerSubmit, he = J ? /* @__PURE__ */ U($, {
+		label: C.composerEditingEyebrow,
+		closeLabel: C.composerCancel,
+		onClose: s ? H : void 0
+	}) : Y ? /* @__PURE__ */ U($, {
+		label: we(C.composerReplyingEyebrow, l.authorName),
+		closeLabel: C.composerCancel,
+		onClose: s ? H : void 0
+	}) : null, ge = z(() => {
+		let e = [];
+		return w && Object.keys(w).length > 0 && e.push({
+			id: "reference",
+			icon: ce,
+			label: C.composerReferenceLabel,
+			onClick: () => F.setPickerOpen(!0)
+		}), O?.onUpload && !O.disabled && e.push({
+			id: "attachment",
+			icon: fe,
+			label: C.composerAttachmentLabel,
+			onClick: ue
+		}), e;
+	}, [
+		w,
+		O?.onUpload,
+		O?.disabled,
+		C.composerReferenceLabel,
+		C.composerAttachmentLabel
+	]);
+	if (!t) return null;
+	let X = /* @__PURE__ */ U(p, {
+		type: "button",
+		onClick: () => le(),
+		disabled: n || I.isUploading,
+		icon: n ? de : pe,
+		children: me
+	}), _e = J || Y || s ? /* @__PURE__ */ U(p, {
+		type: "button",
+		tone: "secondary",
+		buttonStyle: "ghost",
+		onClick: H,
+		disabled: n,
+		children: C.composerCancel
+	}) : null, Q = q ? /* @__PURE__ */ U(m, {
+		direction: "horizontal",
+		wrap: !0,
+		align: "center",
+		gap: "sm",
+		children: I.attachments.map((e) => /* @__PURE__ */ U(ye, {
+			attachment: e,
+			editable: !0,
+			onRemove: (e) => {
+				P(null), I.removeAttachment(e);
+			},
+			onRetry: (e) => {
+				P(null), I.retryAttachment(e);
+			},
+			strings: u
+		}, e.id))
+	}) : null, ve = q ? Q : null, be = b !== !1 && !J && !Y ? X : null, Ce = b === !1 || J || Y;
+	return /* @__PURE__ */ W(m, {
+		render: /* @__PURE__ */ U("form", {}),
+		gap: "md",
+		onSubmit: le,
+		className: "comment-composer--component",
+		children: [
+			he,
+			/* @__PURE__ */ U("input", {
+				ref: G,
+				type: "file",
+				multiple: !0,
+				hidden: !0,
+				accept: O?.accept,
+				onChange: (e) => {
+					K(e.target.files), e.target.value = "";
+				}
+			}),
+			!F.triggerActive && /* @__PURE__ */ W(te, {
+				open: F.pickerOpen,
+				onOpenChange: F.setPickerOpen,
+				children: [/* @__PURE__ */ U(ee, { render: /* @__PURE__ */ U(p, {
+					type: "button",
+					tone: "secondary",
+					buttonStyle: "ghost",
+					className: "sr-only",
+					tabIndex: -1,
+					children: C.composerReferenceLabel
+				}) }), /* @__PURE__ */ U(ae, {
+					open: F.pickerOpen,
+					activeKind: F.activeKind,
+					setActiveKind: (e) => {
+						F.setActiveKind(e), F.setManualKindOverride(!0);
+					},
+					kinds: F.kinds,
+					resources: w,
+					query: F.query,
+					setQuery: F.setQuery,
+					suggestions: F.suggestions,
+					loading: F.isLoading,
+					onSelect: F.pickSuggestion,
+					strings: {
+						title: C.composerReferenceMenuTitle,
+						searchPlaceholder: C.composerReferenceSearchPlaceholder,
+						empty: C.composerReferenceEmpty,
+						loading: C.composerReferenceLoading
+					}
+				})]
+			}),
+			/* @__PURE__ */ W("div", {
+				className: "comment-composer--editor relative",
+				children: [/* @__PURE__ */ U(re, {
+					ref: k,
+					value: A,
+					onValueChange: (e) => {
+						ne(e);
+						let t = oe(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: x ?? C.composerPlaceholder,
+					strings: { editorLabel: x ?? C.composerPlaceholder },
+					minHeight: "3rem",
+					autoFocus: y || J || Y,
+					extraToolbarItems: ge,
+					toolbarTrailing: be,
+					footerSlot: ve,
+					onCaretChange: F.handleCaretChange
+				}), /* @__PURE__ */ U(ie, {
+					open: F.triggerActive && F.pickerOpen,
+					activeKind: F.activeKind,
+					setActiveKind: (e) => {
+						F.setActiveKind(e), F.setManualKindOverride(!0);
+					},
+					kinds: F.kinds,
+					resources: w,
+					query: F.query,
+					suggestions: F.suggestions,
+					suggestionsByKind: F.suggestionsByKind,
+					loading: F.isLoading,
+					onSelect: F.pickSuggestion,
+					strings: {
+						title: C.composerReferenceMenuTitle,
+						empty: C.composerReferenceEmpty,
+						loading: C.composerReferenceLoading
+					}
+				})]
+			}),
+			se && /* @__PURE__ */ U(o, {
+				role: "alert",
+				size: "xs",
+				type: "error",
+				className: "comment-composer--attachment-error",
+				children: se
+			}),
+			M && /* @__PURE__ */ U(o, {
+				size: "xs",
+				type: "error",
+				children: M
+			}),
+			Ce && /* @__PURE__ */ W(m, {
+				direction: "horizontal",
+				align: "center",
+				justify: "end",
+				gap: "md",
+				className: "comment-composer--footer-actions",
+				children: [_e, X]
+			})
+		]
+	});
+});
+function $({ label: e, closeLabel: t, onClose: n }) {
+	return /* @__PURE__ */ W("div", {
+		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__ */ U(s, { children: e }), n ? /* @__PURE__ */ U("button", {
+			type: "button",
+			onClick: n,
+			className: i(A.target, A.focus, A.toggle),
+			"aria-label": t,
+			children: /* @__PURE__ */ U(ge, {
+				className: A.icon,
+				"aria-hidden": "true"
+			})
+		}) : null]
+	});
+}
+function we(e, t) {
+	return n(e, { name: t }, { missing: "empty" });
+}
+//#endregion
+//#region src/components/features/comments/partials/comment-empty.tsx
+var Te = ({ strings: e, icon: t, className: n }) => {
+	let r = Z(e);
+	return /* @__PURE__ */ U(ne, {
+		title: r.empty,
+		description: r.emptyHint || !1,
+		media: t ?? /* @__PURE__ */ U(q, {
+			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 Ee(e) {
+	let { comment: t, resources: n, renderReference: r, sanitizer: i } = e, a = t.contentType ?? t.content_type ?? "text";
+	if (a === "rich") {
+		let e = De(t.content);
+		return e ? /* @__PURE__ */ U("div", {
+			className: "comment-content--component",
+			children: e
+		}) : null;
+	}
+	if (a === "html") return /* @__PURE__ */ U("div", {
+		className: "comment-content--component",
+		children: /* @__PURE__ */ U(M, {
+			html: t.content ?? "",
+			mentions: t.references,
+			resources: n,
+			renderMention: r,
+			sanitizer: i
+		})
+	});
+	let s = Ae(t.content ?? "");
+	return /* @__PURE__ */ U(o, {
+		className: "comment-content--component whitespace-pre-line",
+		children: s
+	});
+}
+function De(e) {
+	if (!e) return null;
+	try {
+		let t = JSON.parse(e);
+		return !t || !Array.isArray(t.blocks) || t.blocks.length === 0 ? null : /* @__PURE__ */ U(o, {
+			tag: "div",
+			className: y,
+			children: t.blocks.map((e, t) => /* @__PURE__ */ U(N, { children: Oe(e) }, e.id ?? `${e.type}-${t}`))
+		});
+	} catch {
+		let t = Ae(e);
+		return /* @__PURE__ */ U(o, {
+			className: "whitespace-pre-line",
+			children: t
+		});
+	}
+}
+function Oe(e) {
+	let t = e.data ?? {};
+	switch (e.type) {
+		case "paragraph": {
+			let e = String(t.text ?? "").trim();
+			if (!e) return null;
+			let n = v(e);
+			return n ? /* @__PURE__ */ U("p", { dangerouslySetInnerHTML: { __html: n } }) : null;
+		}
+		case "header": {
+			let e = ke(String(t.text ?? "")), n = Number(t.level ?? 3);
+			return e ? se(`h${Math.min(Math.max(n, 1), 6)}`, null, e) : null;
+		}
+		case "list": {
+			let e = (Array.isArray(t.items) ? t.items : []).map((e) => ke(String(e ?? ""))).filter((e) => e.length > 0);
+			return e.length === 0 ? null : t.style === "ordered" ? /* @__PURE__ */ U("ol", { children: e.map((e, t) => /* @__PURE__ */ U("li", { children: /* @__PURE__ */ U(o, {
+				tag: "span",
+				children: e
+			}) }, `${e}-${t}`)) }) : /* @__PURE__ */ U("ul", { children: e.map((e) => /* @__PURE__ */ U("li", { children: /* @__PURE__ */ U(o, {
+				tag: "span",
+				children: e
+			}) }, e)) });
+		}
+		case "quote": {
+			let e = String(t.text ?? "").trim();
+			if (!e) return null;
+			let n = ke(String(t.caption ?? ""));
+			return /* @__PURE__ */ W("blockquote", {
+				className: "italic",
+				children: [/* @__PURE__ */ U(b, {
+					tag: "div",
+					html: e,
+					type: "secondary"
+				}), n.length > 0 && /* @__PURE__ */ U("cite", {
+					className: "mt-1 block not-italic",
+					children: /* @__PURE__ */ W(o, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						className: "opacity-80",
+						children: ["— ", n]
+					})
+				})]
+			});
+		}
+		case "delimiter": return /* @__PURE__ */ U("hr", {
+			className: "border-dashed",
+			"aria-hidden": "true"
+		});
+		default: {
+			let e = ke(String(t.text ?? ""));
+			return e ? /* @__PURE__ */ U("p", {
+				className: "whitespace-pre-line",
+				children: e
+			}) : null;
+		}
+	}
+}
+function ke(e) {
+	return e.replace(/<[^>]*>/g, "").trim();
+}
+function Ae(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 je = "?", Me = (e) => e?.url, Ne = (e) => e?.name, Pe = (e) => e.charAt(0).toUpperCase() + e.slice(1).replace(/_/g, " "), Fe = F(function({ comment: e, canModerate: t, onDelete: r, onAttachmentRemove: a, onEdit: s, onPinToggle: c, onReact: h, onReply: v, allowReactions: y, allowReplies: b, sanitizer: x, strings: S, getMediaUrl: C, getMediaName: ee, getStatusLabel: te, formatRelativeTime: ne, resources: re, renderAttachment: j, renderReference: ie }) {
+	let M = Z(S), ae = y ?? !0, oe = b ?? !0, N = _e({
+		getMediaUrl: C,
+		getMediaName: ee,
+		getStatusLabel: te,
+		formatRelativeTime: ne
+	}), se = N.getMediaUrl ?? Me, P = N.getMediaName ?? Ne, F = N.getStatusLabel ?? Pe, L = N.formatRelativeTime, R = e.user?.name ?? M.fallbackAuthor, B = e.user?.avatar ?? void 0, H = z(() => {
+		if (!R) return je;
+		let e = R.trim();
+		return e === "" ? je : e.charAt(0).toUpperCase();
+	}, [R]), ce = z(() => 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]), G = z(() => (e.attachments ?? []).filter((e) => !!e && typeof e == "object"), [e.attachments]), ue = ae ? e.reactions ?? [] : [], K = e.isPinned === !0, de = e.isEdited === !0, q = e.status && e.status !== "active", fe = q && e.status ? F(e.status) : null, pe = e.canDelete === !0 || t === !0, ge = e.canEdit === !0 || t === !0, Q = !!oe && !!v && !!e.id, ve = !!ae && !!h && !!e.id, be = !!c && !!t, xe = !!ge && !!s && !!e.id, Se = !!pe && !!r && !!e.id, Ce = Q || ve || be || xe || Se, $ = g(), [we, Te] = V(null), De = I((e) => {
+		Te(e), $.show();
+	}, [$]), Oe = G.length > 0;
+	return /* @__PURE__ */ W("article", {
+		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__ */ W(m, {
+			direction: "horizontal",
+			align: "start",
+			gap: "lg",
+			className: "min-w-0",
+			children: [/* @__PURE__ */ W(D, {
+				className: "mt-0.5 size-avatar shrink-0",
+				children: [!!B && /* @__PURE__ */ U(O, {
+					src: B,
+					alt: R
+				}), /* @__PURE__ */ U(E, {
+					className: "bg-muted text-muted-foreground text-xs font-medium",
+					children: H
+				})]
+			}), /* @__PURE__ */ W("div", {
+				className: "comment-item--body min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ W(m, {
+						direction: "horizontal",
+						align: "baseline",
+						gap: "md",
+						className: "min-w-0",
+						children: [
+							/* @__PURE__ */ U(o, {
+								tag: "span",
+								weight: "semibold",
+								className: "truncate",
+								children: R
+							}),
+							!!K && /* @__PURE__ */ U(f, {
+								delayDuration: 0,
+								children: /* @__PURE__ */ W(l, { children: [/* @__PURE__ */ U(u, {
+									render: /* @__PURE__ */ U("span", { className: "inline-flex shrink-0 self-center" }),
+									children: /* @__PURE__ */ U(Y, {
+										className: "text-warning-accent size-icon-sm",
+										"aria-hidden": !0
+									})
+								}), /* @__PURE__ */ U(d, {
+									side: "top",
+									className: "text-xs",
+									children: M.pinned
+								})] })
+							}),
+							/* @__PURE__ */ U(T, {
+								value: e.createdAt,
+								formatRelativeTime: L,
+								size: "xs",
+								className: "shrink-0 tabular-nums"
+							}),
+							!!de && /* @__PURE__ */ U(o, {
+								tag: "span",
+								size: "xs",
+								type: "secondary",
+								className: "shrink-0",
+								children: M.edited
+							}),
+							!!q && !!fe && /* @__PURE__ */ U(k, {
+								size: "sm",
+								tone: "secondary",
+								className: "self-center",
+								children: fe
+							})
+						]
+					}),
+					/* @__PURE__ */ U("div", {
+						className: "mt-1 leading-relaxed",
+						children: /* @__PURE__ */ U(Ee, {
+							comment: e,
+							resources: re,
+							renderReference: ie,
+							sanitizer: x
+						})
+					}),
+					ce.length > 0 && /* @__PURE__ */ U("div", {
+						className: "mt-space-md flex flex-wrap gap-space-sm",
+						children: ce.map((e) => /* @__PURE__ */ U(k, {
+							size: "sm",
+							tone: "secondary",
+							children: e
+						}, e))
+					}),
+					Oe && /* @__PURE__ */ U("div", {
+						className: "mt-space-md flex flex-wrap gap-space-sm",
+						children: G.map((e) => {
+							if (j) return /* @__PURE__ */ U("div", { children: j(e) }, e.id ?? e.name);
+							let t = !!a && !!e.id && pe;
+							return /* @__PURE__ */ U(ye, {
+								attachment: e,
+								editable: t,
+								onRemove: t ? () => De(e.id) : void 0,
+								accessors: {
+									getMediaUrl: se,
+									getMediaName: P
+								},
+								strings: S
+							}, e.id ?? e.name);
+						})
+					}),
+					ue.length > 0 && /* @__PURE__ */ U(m, {
+						direction: "horizontal",
+						wrap: !0,
+						align: "center",
+						gap: "xs",
+						className: "mt-space-md",
+						children: ue.map((t) => /* @__PURE__ */ U("button", {
+							type: "button",
+							"aria-label": n(M.reactionLabel ?? X.reactionLabel, {
+								emoji: t.emoji,
+								count: t.count
+							}),
+							"aria-pressed": t.mine ?? !1,
+							onClick: () => h && e.id ? h(e.id, t.emoji) : void 0,
+							title: t.users?.join(", "),
+							className: i(A.inline, A.focus),
+							children: /* @__PURE__ */ W(k, {
+								size: "sm",
+								tone: t.mine ? "primary" : "secondary",
+								className: "cursor-pointer transition-colors hover:opacity-90",
+								children: [/* @__PURE__ */ U(o, {
+									tag: "span",
+									size: "inherit",
+									lineHeight: "none",
+									className: "text-inherit",
+									"aria-hidden": !0,
+									children: t.emoji
+								}), /* @__PURE__ */ U(w, {
+									value: t.count,
+									size: "inherit",
+									align: "left",
+									className: "tabular-nums text-current"
+								})]
+							})
+						}, t.emoji))
+					}),
+					Ce && /* @__PURE__ */ W("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 bg-card/95 shadow-sm ring-1 ring-border/70"),
+						children: [
+							Q && /* @__PURE__ */ U(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__ */ U(le, { className: "size-icon-md" })
+							}),
+							ve && /* @__PURE__ */ U(p, {
+								type: "button",
+								size: "sm",
+								iconOnly: !0,
+								tone: "secondary",
+								buttonStyle: "ghost",
+								onClick: () => e.id && h(e.id, "👍"),
+								title: M.addReactionLabel,
+								"aria-label": M.addReactionLabel,
+								children: /* @__PURE__ */ U(me, { className: "size-icon-md" })
+							}),
+							be && /* @__PURE__ */ U(p, {
+								type: "button",
+								size: "sm",
+								iconOnly: !0,
+								tone: "secondary",
+								buttonStyle: "ghost",
+								onClick: () => c(e),
+								title: K ? M.unpinLabel : M.pinLabel,
+								"aria-label": K ? M.unpinLabel : M.pinLabel,
+								children: /* @__PURE__ */ U(Y, { className: i("size-icon-md", K && "text-warning-accent") })
+							}),
+							xe && /* @__PURE__ */ U(p, {
+								type: "button",
+								size: "sm",
+								iconOnly: !0,
+								tone: "secondary",
+								buttonStyle: "ghost",
+								title: M.editLabel,
+								"aria-label": M.editLabel,
+								onClick: () => s(e),
+								children: /* @__PURE__ */ U(J, { className: "size-icon-md" })
+							}),
+							Se && /* @__PURE__ */ U(p, {
+								type: "button",
+								size: "sm",
+								iconOnly: !0,
+								tone: "secondary",
+								buttonStyle: "ghost",
+								className: "hover:bg-destructive/10 hover:text-destructive",
+								onClick: () => r(e.id),
+								title: M.deleteLabel,
+								"aria-label": M.deleteLabel,
+								children: /* @__PURE__ */ U(he, { className: "size-icon-md" })
+							})
+						]
+					})
+				]
+			})]
+		}), !!a && /* @__PURE__ */ U(_, {
+			...$.overlayProps,
+			destructive: !0,
+			title: M.confirmRemoveAttachmentTitle,
+			description: M.confirmRemoveAttachmentDescription,
+			strings: { confirm: M.attachmentRemoveLabel },
+			onConfirm: () => {
+				we && e.id && a(e.id, we);
+			}
+		})]
+	});
+}), Ie = 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__ */ U(m, {
+		gap: "sm",
+		className: "comment-timeline--component",
+		children: e.map((e, m) => {
+			let x = /* @__PURE__ */ U(Fe, {
+				comment: 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: _,
+				renderAttachment: y,
+				renderReference: b
+			});
+			return v ? /* @__PURE__ */ U("div", { children: v({
+				comment: e,
+				canModerate: t ?? !1,
+				onDelete: n,
+				onAttachmentRemove: r,
+				onEdit: i,
+				defaultItem: x
+			}) }, e.id ?? `comment-${m}`) : /* @__PURE__ */ U("div", { children: x }, e.id ?? `comment-${m}`);
+		})
+	}) : /* @__PURE__ */ U(H, { children: x ?? /* @__PURE__ */ U(Te, { strings: d }) });
+};
+//#endregion
+//#region src/components/features/comments/comments.tsx
+function Le(t) {
+	let n = e(), r = t.composerPosition ?? n.composerPosition ?? "top", a = t.maxAttachments ?? 5, s = 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 = Z(t.strings), y = t.title === void 0 ? v.title : t.title, b = t.confirmDelete ?? !0, x = g(), [S, C] = V(null), w = Q({
+		onSubmit: t.onSubmit,
+		onUpdate: t.onUpdate,
+		onDelete: t.onDelete,
+		onAfterMutate: t.onAfterMutate,
+		onError: t.onError
+	}), T = I((e) => {
+		if (!b) {
+			w.deleteComment(e);
+			return;
+		}
+		C(e), x.show();
+	}, [
+		b,
+		w,
+		x
+	]), E = w.startReply, D = t.comments, O = t.onReply, k = I((e) => {
+		let t = D.find((t) => t.id === e);
+		t && E(t), O?.(e);
+	}, [
+		D,
+		O,
+		E
+	]), A = w.composerMode.kind === "editing" ? w.composerMode.comment : void 0, ee = w.composerMode.kind === "replying" ? {
+		commentId: w.composerMode.commentId,
+		authorName: w.composerMode.authorName
+	} : void 0, te = t.composerSlot ?? (u ? /* @__PURE__ */ U(Ce, {
+		context: t.context,
+		canComment: u,
+		submitting: w.isSubmitting,
+		errors: w.formErrors,
+		resetKey: w.resetKey,
+		editingComment: A,
+		replyingTo: ee,
+		onCancel: w.composerMode.kind === "idle" ? void 0 : w.cancelComposerMode,
+		onSubmit: w.submit,
+		strings: t.strings,
+		resources: p,
+		onResourceSearch: t.onResourceSearch,
+		attachments: h,
+		maxAttachments: a,
+		allowAttachments: s
+	}) : null), ne = /* @__PURE__ */ U(Ie, {
+		comments: t.comments,
+		canModerate: d,
+		onDelete: t.onDelete ? T : void 0,
+		onAttachmentRemove: t.onAttachmentRemove,
+		onEdit: u && t.onUpdate ? w.startEdit : void 0,
+		onPinToggle: f,
+		onReact: t.onReact,
+		onReply: u && l ? k : 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: p,
+		renderItem: t.renderItem,
+		renderAttachment: t.renderAttachment,
+		renderReference: t.renderReference,
+		emptySlot: t.emptySlot ?? /* @__PURE__ */ U(Te, { strings: t.strings })
+	}), re = te ? /* @__PURE__ */ U("div", { children: te }) : null, j = /* @__PURE__ */ W(m, {
+		gap: "xl",
+		className: "comments--body",
+		children: [
+			t.headerSlot,
+			r === "top" && re,
+			ne,
+			r === "bottom" && re,
+			t.footerSlot
+		]
+	});
+	if (t.bare) return j;
+	let ie = typeof y == "string" ? y : void 0;
+	return /* @__PURE__ */ W(m, {
+		render: /* @__PURE__ */ U("section", {}),
+		gap: "lg",
+		"data-component": "comments",
+		"data-slot": "comments",
+		className: i("comments--component", t.className),
+		"aria-label": ie,
+		children: [
+			!(y === !1 || !y && !v.subtitle) && /* @__PURE__ */ W(m, {
+				gap: "normal",
+				className: "comments--header",
+				children: [!!y && /* @__PURE__ */ U(o, {
+					weight: "semibold",
+					children: y
+				}), !!v.subtitle && /* @__PURE__ */ U(o, {
+					type: "secondary",
+					children: v.subtitle
+				})]
+			}),
+			j,
+			!!(b && t.onDelete) && /* @__PURE__ */ U(_, {
+				...x.overlayProps,
+				destructive: !0,
+				title: v.confirmDeleteTitle,
+				description: v.confirmDeleteDescription,
+				strings: { confirm: v.confirmDeleteLabel },
+				onAsyncConfirm: async () => {
+					S && await w.deleteComment(S);
+				},
+				onError: t.onError
+			})
+		]
+	});
+}
+//#endregion
+export { Te as a, xe as c, _e as d, Z as f, Ee as i, ye as l, Ie as n, Ce as o, X as p, Fe as r, we as s, Le as t, Q as u };
+
+//# sourceMappingURL=comments-u5L0OGip.js.map