themelia-react-ui 0.0.0-stage → 1.0.1

package/dist/comments-DviPLnwy.js

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