@jfrader/ui 0.5.1 → 0.6.0

package/dist/comment-thread-BnUHxviq.js

@@ -0,0 +1,772 @@
+'use client';
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./visually-hidden-DgVO3NaB.js";
+import { t as ee } from "./renderable-DzcIj1Lo.js";
+import { t as s } from "./button-C6OV0C7J.js";
+import { t as c } from "./part-id-D0zksy32.js";
+import { t as l } from "./card-C008OQCp.js";
+import { a as u, c as d, d as f, f as te, g as p, h as m, i as ne, l as re, n as ie, o as ae, p as oe, r as se, s as ce, t as le, u as ue } from "./thread-parts-DfZNz70v.js";
+import { useEffect as de, useId as fe, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
+import { vars as y } from "@jfrader/tokens/vars";
+import { Fragment as pe, jsx as b, jsxs as x } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as me } from "@floating-ui/react";
+//#region src/components/comment-thread/comment-thread.tsx
+var S = "comment-thread", C = "root", he = [
+	"👍",
+	"❤️",
+	"🎉",
+	"👀",
+	"🚀",
+	"✅"
+], w = 2, ge = 3, _e = [], ve = [], ye = {
+	replyTo: null,
+	editing: null,
+	confirming: null,
+	picker: null,
+	drafts: {},
+	pending: {}
+}, be = "@container (max-width: 28rem)", T = (e) => `reply:${e}`, E = (e) => `edit:${e}`, xe = () => crypto.randomUUID(), Se = (e) => JSON.stringify([...new Set(e)].sort());
+function D(e, t) {
+	if (!(t in e)) return e;
+	let { [t]: n, ...r } = e;
+	return r;
+}
+function O(e, t) {
+	return {
+		...e,
+		drafts: D(e.drafts, t),
+		pending: D(e.pending, t),
+		replyTo: e.replyTo !== null && t === T(e.replyTo) ? null : e.replyTo,
+		editing: e.editing !== null && t === E(e.editing) ? null : e.editing
+	};
+}
+function Ce(e, t) {
+	let n = e;
+	for (let [r, i] of Object.entries(e.pending)) {
+		let e = t.entries.get(i.id);
+		(i.kind === "add" ? e !== void 0 : !e || e.comment.deleted || e.comment.body === i.body) && (n = O(n, r));
+	}
+	let r = (e) => e === null || k(t, e);
+	return r(n.replyTo) || (n = O(n, T(n.replyTo))), r(n.editing) || (n = O(n, E(n.editing))), r(n.confirming) || (n = {
+		...n,
+		confirming: null
+	}), r(n.picker) || (n = {
+		...n,
+		picker: null
+	}), n;
+}
+function k(e, t) {
+	let n = e.entries.get(t);
+	return n !== void 0 && !n.comment.deleted;
+}
+function we(e) {
+	return e.order.filter((t) => (e.entries.get(t).comment.replies?.length ?? 0) > 0);
+}
+function Te(e) {
+	let t = (t, n, r) => d(e, t, n, r);
+	return {
+		thread: "Comments",
+		composer: "Add a comment",
+		placeholder: "Write a comment",
+		resolve: "Resolve",
+		resolved: "Resolved",
+		reopen: "Reopen",
+		empty: "No comments yet",
+		reply: "Reply",
+		edit: "Edit",
+		delete: "Delete",
+		cancel: "Cancel",
+		send: "Send",
+		save: "Save",
+		edited: "Edited",
+		editComment: "Edit comment",
+		deleteConfirm: "Delete this comment?",
+		deletedText: "This comment was deleted.",
+		deletedComment: "Deleted comment",
+		hideReplies: "Hide replies",
+		cancelReply: "Cancel",
+		addReaction: "Add reaction",
+		closeReactions: "Close reactions",
+		reactions: "Reactions",
+		mentions: "People",
+		invalidTime: "Unknown time",
+		replyingTo: (e) => `Reply to ${e}`,
+		showReplies: (e) => `Show ${t(e, "reply", "replies")}`,
+		commentCount: (e) => t(e, "comment", "comments"),
+		peopleCount: (e) => t(e, "person", "people"),
+		newComments: (e) => t(e, "new comment", "new comments"),
+		reactWith: (e) => `React with ${e}`,
+		reactionCount: (e, n, r) => r ? `${e} ${t(n, "reaction", "reactions")}, including you` : `${e} ${t(n, "reaction", "reactions")}`
+	};
+}
+var Ee = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), De = t({
+	minInlineSize: 0,
+	containerType: "inline-size",
+	fontFamily: y.font.sans,
+	fontSize: y.textSize.sm,
+	lineHeight: y.lineHeight.base,
+	color: y.color.text
+}), Oe = {
+	sm: t({
+		"--comment-thread-gap": y.space[3],
+		"--comment-thread-indent": y.space[4]
+	}),
+	md: t({
+		"--comment-thread-gap": y.space[4],
+		"--comment-thread-indent": y.space[6]
+	})
+}, ke = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: y.space[2]
+}), Ae = t({
+	display: "grid",
+	gap: y.space[1],
+	minInlineSize: 0
+}), je = t({ overflowWrap: "anywhere" }), Me = t({
+	margin: 0,
+	fontSize: y.textSize.xs,
+	color: y.color.textMuted
+}), Ne = t({ "&[hidden]": { display: "none" } }), Pe = t({
+	display: "grid",
+	rowGap: "var(--comment-thread-gap)",
+	listStyle: "none",
+	margin: 0,
+	padding: 0
+}), Fe = t({
+	display: "grid",
+	rowGap: y.space[2],
+	minInlineSize: 0,
+	"&[data-new]": {
+		animationName: Ee,
+		animationDuration: y.motion.duration.base,
+		animationTimingFunction: y.motion.easeStandard
+	},
+	[r]: { "&[data-new]": { animation: "none" } }
+}), Ie = t({
+	margin: 0,
+	whiteSpace: "pre-wrap",
+	overflowWrap: "anywhere",
+	lineHeight: y.lineHeight.relaxed,
+	color: y.color.text,
+	"&[data-deleted]": {
+		color: y.color.textMuted,
+		fontStyle: "italic"
+	}
+}), Le = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: y.space[1]
+}), Re = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: y.space[2],
+	paddingBlock: y.space[2],
+	paddingInline: y.space[3],
+	border: `1px solid ${y.color.dangerBorder}`,
+	borderRadius: y.radius.md,
+	[n]: { borderColor: "CanvasText" }
+}), ze = t({
+	flex: "1 1 auto",
+	fontWeight: y.fontWeight.medium
+}), Be = t({
+	marginInlineStart: "calc(var(--thread-avatar) + var(--thread-column-gap))",
+	[be]: { marginInlineStart: 0 }
+}), Ve = t({ justifySelf: "start" }), He = t({
+	display: "grid",
+	rowGap: "var(--comment-thread-gap)",
+	listStyle: "none",
+	margin: 0,
+	marginInlineStart: "calc(var(--thread-avatar) / 2 - 1px)",
+	padding: 0,
+	paddingInlineStart: "var(--comment-thread-indent)",
+	borderInlineStart: `2px solid ${y.color.border}`,
+	"&[hidden]": { display: "none" },
+	"&[data-capped]": {
+		marginInlineStart: 0,
+		paddingInlineStart: 0,
+		borderInlineStart: 0
+	},
+	[be]: { paddingInlineStart: y.space[3] },
+	[n]: { borderInlineStartColor: "GrayText" }
+}), Ue = t({
+	margin: 0,
+	paddingBlock: y.space[4],
+	color: y.color.textMuted
+}), We = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: y.space[3]
+}), Ge = t({
+	flex: "1 1 12rem",
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: y.space[2],
+	margin: 0,
+	color: y.color.textMuted,
+	overflowWrap: "anywhere"
+}), Ke = t({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: y.space[1],
+	minBlockSize: y.space[6],
+	paddingInline: y.space[2],
+	border: `1px solid ${y.color.borderStrong}`,
+	borderRadius: y.radius.full,
+	fontWeight: y.fontWeight.medium,
+	color: y.color.text,
+	[n]: { borderColor: "CanvasText" }
+}), qe = t({
+	display: "block",
+	inlineSize: "1em",
+	blockSize: "1em"
+}), Je = /* @__PURE__ */ b("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	css: qe,
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ b("path", {
+		d: "M3 8.5l3 3 7-7",
+		strokeLinecap: "round"
+	})
+});
+function A({ ref: e, value: t, defaultValue: n, onValueChange: r, currentUser: d, people: y, resolvedValue: be, defaultResolvedValue: Ee, onResolvedValueChange: qe, expandedValue: A, defaultExpandedValue: Ye, onExpandedValueChange: Xe, title: j, headingLevel: Ze = 3, reactions: Qe = he, maxDepth: M = w, now: N, locale: $e, timeZone: et = "UTC", getNewId: tt = xe, placeholder: nt, composerLabel: rt, disabled: P = !1, readOnly: F = !1, size: I = "md", labels: it, slotProps: L, className: at, sx: ot, onFocus: st, onBlur: ct, "aria-label": lt, "aria-labelledby": ut, "aria-describedby": dt, ...ft }) {
+	let R = fe(), z = _(null), pt = me([e, z]), { formatters: B, problems: mt } = g(() => f("CommentThread", $e, et), [$e, et]), V = {
+		...Te(B),
+		...it
+	}, H = p(N) ? N : null, ht = Number.isInteger(M) && M >= 0, gt = ht ? M : w, _t = g(() => m(Qe, (e) => e), [Qe]), vt = _(null), [U = _e, yt] = a(t, n ?? _e, (e) => r?.([...e], vt.current)), W = g(() => re(U), [U]), G = (e, t) => {
+		e !== U && (vt.current = t, yt(e));
+	}, [K = !1, bt] = a(be, Ee ?? !1, qe), q = _(null);
+	h(() => {
+		q.current = null;
+	}, [K]);
+	let [xt] = v(() => Ye ?? we(W)), [J = ve, St] = a(A, xt, (e) => Xe?.([...e])), Ct = new Set(J), wt = Se(J), Tt = _(null);
+	h(() => {
+		Tt.current = null;
+	}, [wt]);
+	let Et = (e) => {
+		let t = Se(e);
+		t !== wt && t !== Tt.current && (Tt.current = t, St(e));
+	}, [Dt, Y] = v(ye), X = Ce(Dt, W);
+	X !== Dt && Y(X);
+	let Ot = g(() => m(y ?? [...W.order.map((e) => W.entries.get(e).comment.author), d], (e) => e.id), [
+		y,
+		W,
+		d
+	]), Z = _(null), Q = _(null), kt = _(W.order), At = _(null), jt = _(/* @__PURE__ */ new Set()), [Mt, Nt] = v({
+		text: "",
+		key: 0
+	}), Pt = g(() => {
+		let e = At.current;
+		return new Set(e ? W.order.filter((t) => !e.has(t)) : []);
+	}, [W]), Ft = (e) => z.current?.querySelector(`[data-ui="${S}-item"][data-comment-id="${CSS.escape(e)}"]`), $ = (e, t) => Ft(e)?.querySelector(`:scope > article [data-action="${t}"]`), It = (e) => {
+		let t = Ft(e);
+		return [
+			":scope > article [data-action=\"reply\"]:not(:disabled)",
+			":scope > article [data-action]:not(:disabled)",
+			":scope > [data-part=\"toggle\"]"
+		].map((e) => t?.querySelector(e)).find(Boolean);
+	}, Lt = () => z.current?.querySelector(`[data-composer="${C}"] textarea:not(:disabled)`), Rt = (e) => {
+		let t = kt.current, n = e === null ? -1 : t.indexOf(e), r = e === null ? null : It(e);
+		if (r) r.focus();
+		else {
+			for (let e = 1; n !== -1 && e < t.length; e++) {
+				let r = [t[n + e], t[n - e]].filter((e) => e !== void 0).map(It).find(Boolean);
+				if (r) {
+					r.focus();
+					return;
+				}
+			}
+			Lt()?.focus();
+		}
+	};
+	h(() => {
+		let e = z.current;
+		if (!e) return;
+		let t = e.ownerDocument, n = t.activeElement, r = !n || n === t.body, i = Z.current;
+		if (i && !i.invoker.isConnected) {
+			if (Z.current = null, r) {
+				let e = i.target();
+				e ? e.focus() : Rt(i.commentId);
+			}
+		} else if (r && Q.current && !Q.current.element.isConnected) {
+			let { commentId: e } = Q.current;
+			Q.current = null, Rt(e);
+		}
+		let a = Q.current?.element;
+		if (a?.isConnected && (r || n === a)) {
+			let t = `[data-ui="${S}-replies"][hidden]`, n = null;
+			for (let e = a.closest(t); e; e = e.parentElement.closest(t)) n = e;
+			let r = n ? e.querySelector(`[aria-controls="${CSS.escape(n.id)}"]`) : null, i = a.closest(`[data-ui="${S}-content"][hidden]`) ? e.querySelector("[data-action=\"reopen\"]") : null;
+			(r ?? i)?.focus();
+		}
+		kt.current = W.order;
+	}), h(() => {
+		let e = At.current;
+		if (At.current = new Set(W.order), !e) return;
+		let t = W.order.filter((t) => !e.has(t) && !jt.current.has(t));
+		t.length > 0 && Nt((e) => ({
+			text: V.newComments(t.length),
+			key: e.key + 1
+		}));
+	}, [W]);
+	let zt = [
+		...mt,
+		...H === null ? [`CommentThread: now ${String(N)} is not a finite epoch-ms value; showing full dates.`] : [],
+		...ht ? [] : [`CommentThread: maxDepth ${String(M)} is not a nonnegative integer; using ${w}.`],
+		...W.duplicates.length > 0 ? [`CommentThread: duplicate comment ids ${JSON.stringify(W.duplicates)}; showing the first of each.`] : [],
+		...W.cyclic ? ["CommentThread: a comment appears among its own replies; the repeat is not shown."] : []
+	].join("\n");
+	de(() => {
+		process.env.NODE_ENV !== "production" && zt !== "" && console.error(zt);
+	}, [zt]);
+	let Bt = (e) => {
+		st?.(e);
+		let t = e.target.closest(`[data-ui="${S}-item"]`);
+		Q.current = {
+			element: e.target,
+			commentId: t?.dataset.commentId ?? null
+		}, Z.current && !Z.current.invoker.contains(e.target) && (Z.current = null);
+	}, Vt = (e) => {
+		ct?.(e);
+		let { target: t } = e;
+		queueMicrotask(() => {
+			t.isConnected && Q.current?.element === t && (Q.current = null, Z.current = null);
+		});
+	}, Ht = (e, t) => Y((n) => ({
+		...n,
+		drafts: {
+			...n.drafts,
+			[e]: t
+		},
+		pending: D(n.pending, e)
+	})), Ut = (e, t, n, r) => {
+		if (P || F || X.pending[e] || t !== null && !k(W, t)) return;
+		let i = te(W, t, gt);
+		if (i === void 0) return;
+		let a = {
+			id: tt(),
+			author: d,
+			body: n,
+			createdAt: H ?? Date.now(),
+			reactions: []
+		};
+		jt.current.add(a.id), Y((t) => ({
+			...t,
+			pending: {
+				...t.pending,
+				[e]: {
+					kind: "add",
+					id: a.id
+				}
+			}
+		})), t !== null && (Z.current = {
+			invoker: r,
+			target: () => $(t, "reply"),
+			commentId: t
+		}), G(u(U, i, a), {
+			type: "reply",
+			comment: a,
+			parentId: i
+		}), i !== null && !Ct.has(i) && Et([...J, i]);
+	}, Wt = () => Y((e) => e.pending[C] ? {
+		...e,
+		pending: D(e.pending, C)
+	} : O(e, C)), Gt = (e) => Y((t) => ({
+		...t,
+		replyTo: e,
+		confirming: null,
+		picker: null
+	})), Kt = (e, t) => {
+		Z.current = {
+			invoker: t,
+			target: () => $(e, "reply"),
+			commentId: e
+		}, Y((t) => O(t, T(e)));
+	}, qt = (e) => Y((t) => ({
+		...t,
+		editing: e.id,
+		confirming: null,
+		picker: null,
+		drafts: {
+			...t.drafts,
+			[E(e.id)]: e.body
+		}
+	})), Jt = (e, t) => {
+		Z.current = {
+			invoker: t,
+			target: () => $(e, "edit"),
+			commentId: e
+		}, Y((t) => O(t, E(e)));
+	}, Yt = (e, t, n) => {
+		let r = E(e.id);
+		P || F || X.pending[r] || !k(W, e.id) || (t === e.body ? Jt(e.id, n) : (Z.current = {
+			invoker: n,
+			target: () => $(e.id, "edit"),
+			commentId: e.id
+		}, Y((n) => ({
+			...n,
+			pending: {
+				...n.pending,
+				[r]: {
+					kind: "edit",
+					id: e.id,
+					body: t
+				}
+			}
+		})), G(ce(U, e.id, t), {
+			type: "edit",
+			id: e.id,
+			body: t
+		})));
+	}, Xt = (e, t) => {
+		Z.current = {
+			invoker: t,
+			target: () => $(e, "delete"),
+			commentId: e
+		}, Y((e) => ({
+			...e,
+			confirming: null
+		}));
+	}, Zt = (e, t) => {
+		Xt(e, t), !(P || F) && G(ae(U, e), {
+			type: "delete",
+			id: e
+		});
+	}, Qt = (e, t) => {
+		if (P || F) return;
+		let { comments: n, added: r } = ue(U, e, t, d.id);
+		G(n, {
+			type: "react",
+			id: e,
+			emoji: t,
+			added: r
+		});
+	}, $t = (e, t) => {
+		if (P || F || e === q.current) return;
+		q.current = e;
+		let n = e ? "reopen" : "resolve";
+		Z.current = {
+			invoker: t.currentTarget,
+			target: () => z.current?.querySelector(`[data-action="${n}"]`),
+			commentId: null
+		}, bt(e);
+	}, en = (e) => Et(Ct.has(e) ? J.filter((t) => t !== e) : [...J, e]), tn = W.order.filter((e) => k(W, e)), nn = m(tn.map((e) => W.entries.get(e).comment.author), (e) => e.id), rn = V.commentCount(tn.length), an = tn.length > 0 ? B.facts.format([rn, V.peopleCount(nn.length)]) : rn, on = W.order.length === 0, sn = `${R}-empty`, cn = `${R}-title`, ln = ee(j) && j !== "", un = [ut, ln ? cn : void 0].filter(Boolean).join(" ") || void 0, dn = [dt, on ? sn : void 0].filter(Boolean).join(" ") || void 0, fn = {
+		ui: S,
+		mentionsLabel: V.mentions,
+		people: Ot,
+		locale: $e,
+		disabled: P,
+		size: I,
+		textareaProps: L?.textarea,
+		submitProps: L?.send
+	}, pn = (e, t, n) => {
+		if (n.has(e) || W.entries.get(e.id)?.comment !== e) return null;
+		let { id: r } = e, i = e.deleted === !0, a = e.author.id === d.id, o = X.editing === r && !i, ee = X.confirming === r && !i, l = e.replies ?? _e, u = c(R, "replies", r), f = Ct.has(r), te = new Set(n).add(e), p = c(R, "confirm", r), m = (e) => {
+			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), Xt(r, e.currentTarget));
+		};
+		return /* @__PURE__ */ x("li", {
+			"data-ui": `${S}-item`,
+			"data-comment-id": r,
+			"data-depth": t,
+			"data-deleted": i ? "" : void 0,
+			"data-new": Pt.has(r) ? "" : void 0,
+			className: L?.item?.className,
+			css: [Fe, L?.item?.css],
+			children: [
+				/* @__PURE__ */ x(ie, {
+					ui: S,
+					author: e.author,
+					label: i ? V.deletedComment : void 0,
+					epoch: oe(e.createdAt),
+					now: H,
+					formatters: B,
+					invalidTimeLabel: V.invalidTime,
+					meta: e.edited && !i ? V.edited : null,
+					size: I,
+					baseId: R,
+					messageId: r,
+					slots: {
+						article: L?.article,
+						time: L?.time
+					},
+					children: [
+						o ? /* @__PURE__ */ b(le, {
+							...fn,
+							kind: "edit",
+							draft: X.drafts[E(r)] ?? e.body,
+							onDraftChange: (e) => Ht(E(r), e),
+							onSubmit: (t, n) => Yt(e, t, n),
+							onCancel: (e) => Jt(r, e),
+							cancelable: !0,
+							label: V.editComment,
+							submitLabel: V.save,
+							cancelLabel: V.cancel,
+							pending: X.pending[E(r)] !== void 0,
+							autoFocus: !0,
+							part: L?.composer
+						}) : /* @__PURE__ */ b("p", {
+							"data-ui": `${S}-body`,
+							"data-deleted": i ? "" : void 0,
+							className: L?.body?.className,
+							css: [Ie, L?.body?.css],
+							children: i ? V.deletedText : e.body
+						}),
+						i || o ? null : /* @__PURE__ */ b(se, {
+							ui: S,
+							reactions: e.reactions ?? [],
+							offered: _t,
+							currentUserId: d.id,
+							formatters: B,
+							labels: V,
+							readOnly: F,
+							disabled: P,
+							pickerOpen: X.picker === r,
+							onPickerOpenChange: (e) => Y((t) => ({
+								...t,
+								picker: e ? r : null,
+								confirming: null
+							})),
+							onToggle: (e) => Qt(r, e),
+							pickerId: c(R, "picker", r),
+							part: L?.reaction
+						}),
+						i || o || F ? null : ee ? /* @__PURE__ */ x("div", {
+							role: "group",
+							"aria-labelledby": p,
+							"data-ui": `${S}-confirm`,
+							onKeyDown: m,
+							css: Re,
+							children: [
+								/* @__PURE__ */ b("span", {
+									id: p,
+									css: ze,
+									children: V.deleteConfirm
+								}),
+								/* @__PURE__ */ b(s, {
+									variant: "ghost",
+									size: "sm",
+									autoFocus: !0,
+									onClick: (e) => Xt(r, e.currentTarget.parentElement),
+									children: V.cancel
+								}),
+								/* @__PURE__ */ b(s, {
+									variant: "solid",
+									tone: "danger",
+									size: "sm",
+									disabled: P,
+									onClick: (e) => Zt(r, e.currentTarget.parentElement),
+									children: V.delete
+								})
+							]
+						}, "confirm") : /* @__PURE__ */ x("div", {
+							"data-ui": `${S}-actions`,
+							className: L?.actions?.className,
+							css: [Le, L?.actions?.css],
+							children: [/* @__PURE__ */ b(s, {
+								variant: "ghost",
+								size: "sm",
+								"data-action": "reply",
+								"aria-expanded": X.replyTo === r,
+								disabled: P,
+								onClick: () => Gt(r),
+								children: V.reply
+							}), a ? /* @__PURE__ */ x(pe, { children: [/* @__PURE__ */ b(s, {
+								variant: "ghost",
+								size: "sm",
+								"data-action": "edit",
+								disabled: P,
+								onClick: () => qt(e),
+								children: V.edit
+							}), /* @__PURE__ */ b(s, {
+								variant: "ghost",
+								size: "sm",
+								tone: "danger",
+								"data-action": "delete",
+								disabled: P,
+								onClick: () => Y((e) => ({
+									...e,
+									confirming: r,
+									picker: null
+								})),
+								children: V.delete
+							})] }) : null]
+						}, "actions")
+					]
+				}),
+				X.replyTo === r && !i && !F ? /* @__PURE__ */ b("div", {
+					css: Be,
+					children: /* @__PURE__ */ b(le, {
+						...fn,
+						kind: "reply",
+						draft: X.drafts[T(r)] ?? "",
+						onDraftChange: (e) => Ht(T(r), e),
+						onSubmit: (e, t) => Ut(T(r), r, e, t),
+						onCancel: (e) => Kt(r, e),
+						cancelable: !0,
+						label: V.replyingTo(e.author.name),
+						placeholder: nt ?? V.placeholder,
+						submitLabel: V.send,
+						cancelLabel: V.cancelReply,
+						pending: X.pending[T(r)] !== void 0,
+						autoFocus: !0,
+						part: L?.composer
+					})
+				}) : null,
+				l.length > 0 ? /* @__PURE__ */ x(pe, { children: [/* @__PURE__ */ b(s, {
+					variant: "ghost",
+					size: "sm",
+					"data-part": "toggle",
+					"aria-expanded": f,
+					"aria-controls": u,
+					onClick: () => en(r),
+					css: [Ve, Be],
+					children: f ? V.hideReplies : V.showReplies(l.length)
+				}), /* @__PURE__ */ b("ul", {
+					role: "list",
+					id: u,
+					hidden: !f,
+					"data-ui": `${S}-replies`,
+					"data-capped": t + 1 > ge ? "" : void 0,
+					className: L?.replies?.className,
+					css: [He, L?.replies?.css],
+					children: l.map((e) => pn(e, t + 1, te))
+				})] }) : null
+			]
+		}, r);
+	};
+	return /* @__PURE__ */ b(i, {
+		className: at,
+		styles: [
+			De,
+			ne[I],
+			Oe[I]
+		],
+		sx: ot,
+		children: (e) => /* @__PURE__ */ x("section", {
+			...ft,
+			ref: pt,
+			"aria-label": lt ?? (un ? void 0 : V.thread),
+			"aria-labelledby": un,
+			"aria-describedby": dn,
+			"data-ui": S,
+			"data-size": I,
+			"data-state": K ? "resolved" : "open",
+			onFocus: Bt,
+			onBlur: Vt,
+			className: e,
+			children: [/* @__PURE__ */ x(l, { children: [
+				/* @__PURE__ */ x(l.Header, {
+					className: L?.header?.className,
+					css: [ke, L?.header?.css],
+					children: [/* @__PURE__ */ x("div", {
+						css: Ae,
+						children: [ln ? /* @__PURE__ */ b(l.Title, {
+							id: cn,
+							level: Ze,
+							className: L?.title?.className,
+							css: [je, L?.title?.css],
+							children: j
+						}) : null, /* @__PURE__ */ b("p", {
+							"data-ui": `${S}-count`,
+							css: Me,
+							children: an
+						})]
+					}), !K && !F ? /* @__PURE__ */ b(s, {
+						variant: "outline",
+						size: "sm",
+						"data-action": "resolve",
+						disabled: P,
+						startIcon: Je,
+						onClick: (e) => $t(!0, e),
+						children: V.resolve
+					}) : null]
+				}),
+				/* @__PURE__ */ x(l.Content, { children: [/* @__PURE__ */ b("div", {
+					"data-ui": `${S}-content`,
+					hidden: K,
+					css: Ne,
+					children: on ? /* @__PURE__ */ b("p", {
+						id: sn,
+						"data-ui": `${S}-empty`,
+						css: Ue,
+						children: V.empty
+					}) : /* @__PURE__ */ b("ul", {
+						role: "list",
+						"data-ui": `${S}-list`,
+						className: L?.list?.className,
+						css: [Pe, L?.list?.css],
+						children: U.map((e) => pn(e, 0, /* @__PURE__ */ new Set()))
+					})
+				}), K ? /* @__PURE__ */ x("div", {
+					"data-ui": `${S}-resolved`,
+					className: L?.resolved?.className,
+					css: [We, L?.resolved?.css],
+					children: [/* @__PURE__ */ x("p", {
+						css: Ge,
+						children: [
+							/* @__PURE__ */ x("span", {
+								css: Ke,
+								children: [Je, V.resolved]
+							}),
+							/* @__PURE__ */ b("span", { children: rn }),
+							nn.length > 0 ? /* @__PURE__ */ b("span", { children: B.people.format(nn.map((e) => e.name)) }) : null
+						]
+					}), F ? null : /* @__PURE__ */ b(s, {
+						variant: "outline",
+						size: "sm",
+						"data-action": "reopen",
+						disabled: P,
+						onClick: (e) => $t(!1, e),
+						children: V.reopen
+					})]
+				}) : null] }),
+				F ? null : /* @__PURE__ */ b(l.Footer, {
+					hidden: K,
+					css: Ne,
+					children: /* @__PURE__ */ b(le, {
+						...fn,
+						kind: C,
+						draft: X.drafts[C] ?? "",
+						onDraftChange: (e) => Ht(C, e),
+						onSubmit: (e, t) => Ut(C, null, e, t),
+						onCancel: Wt,
+						cancelOnEscape: !1,
+						cancelable: (X.drafts[C] ?? "") !== "" || X.pending[C] !== void 0,
+						label: rt ?? V.composer,
+						placeholder: nt ?? V.placeholder,
+						submitLabel: V.send,
+						cancelLabel: V.cancel,
+						pending: X.pending[C] !== void 0,
+						author: d,
+						part: L?.composer
+					})
+				})
+			] }), /* @__PURE__ */ b("div", {
+				role: "status",
+				"aria-atomic": "true",
+				"data-ui": `${S}-status`,
+				className: L?.status?.className,
+				css: [o, L?.status?.css],
+				children: Mt.text ? /* @__PURE__ */ b("span", { children: Mt.text }, Mt.key) : null
+			})]
+		})
+	});
+}
+A.displayName = "CommentThread";
+//#endregion
+export { A as t };