@jfrader/ui 0.4.0 → 0.5.1

package/dist/comment-thread-ASaXDcGo.js

@@ -0,0 +1,1410 @@
+'use client';
+import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { n as a } from "./roving-focus-CYlo_Kf8.js";
+import { t as o } from "./use-controlled-state-DpeVQZNR.js";
+import { t as s } from "./visually-hidden-BJdvqqvn.js";
+import { t as c } from "./renderable-DzcIj1Lo.js";
+import { t as l } from "./button-NLY0h6EJ.js";
+import { t as u } from "./avatar-CaGJHy1N.js";
+import { t as d } from "./card-Ca4KQKYQ.js";
+import { n as f, o as p, s as m, t as h } from "./listbox-style-WX-RASp1.js";
+import { t as g } from "./part-id-D0zksy32.js";
+import { t as _ } from "./overlay-portal-C4JZFq2M.js";
+import { t as ee } from "./textarea-3k4Y0QQ3.js";
+import { useEffect as te, useId as ne, useLayoutEffect as v, useMemo as y, useRef as b, useState as x } from "react";
+import { vars as S } from "@jfrader/tokens/vars";
+import { Fragment as re, jsx as C, jsxs as w } from "@emotion/react/jsx-runtime";
+import { autoUpdate as ie, flip as ae, offset as oe, shift as se, useFloating as ce, useMergeRefs as le } from "@floating-ui/react";
+var T = [], ue = 864e13, de = 1e3, fe = 60 * de, E = 60 * fe, D = 24 * E, O = 365.2425 * D, pe = [
+	["year", O],
+	["month", O / 12],
+	["week", 7 * D],
+	["day", D],
+	["hour", E],
+	["minute", fe]
+], k = /^(\d{4})-(\d{2})-(\d{2})T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:\d{2})$/, me = "en-US", A = (e) => Number.isFinite(e) && Math.abs(e) <= ue;
+function he(e) {
+	if (typeof e == "number") return A(e) ? e : null;
+	if (e instanceof Date) return A(e.getTime()) ? e.getTime() : null;
+	if (typeof e != "string") return null;
+	let t = k.exec(e);
+	if (!t) return null;
+	let [n, r, i] = t.slice(1, 4).map(Number), a = new Date(Date.UTC(n, r - 1, i));
+	if (a.getUTCMonth() !== r - 1 || a.getUTCDate() !== i) return null;
+	let o = Date.parse(e);
+	return A(o) ? o : null;
+}
+function j(e, t, n) {
+	let r = e - t;
+	for (let [e, t] of pe) if (Math.abs(r) >= t) return n.format(Math.trunc(r / t), e);
+	return n.format(Math.trunc(r / de), "second");
+}
+function ge(e, t) {
+	return {
+		relative: new Intl.RelativeTimeFormat(e, { numeric: "auto" }),
+		full: new Intl.DateTimeFormat(e, {
+			timeZone: t,
+			dateStyle: "full",
+			timeStyle: "short"
+		}),
+		number: new Intl.NumberFormat(e),
+		plural: new Intl.PluralRules(e),
+		people: new Intl.ListFormat(e, { type: "conjunction" }),
+		facts: new Intl.ListFormat(e, {
+			type: "unit",
+			style: "short"
+		})
+	};
+}
+function _e(e, t, n) {
+	let r = [], i = t;
+	try {
+		Intl.getCanonicalLocales(t);
+	} catch {
+		r.push(`${e}: locale ${JSON.stringify(String(t))} is not a valid language tag; using the default locale.`), i = void 0;
+	}
+	let a = n;
+	try {
+		new Intl.DateTimeFormat(me, { timeZone: n });
+	} catch {
+		r.push(`${e}: timeZone ${JSON.stringify(n)} is not a valid IANA time zone; using UTC.`), a = "UTC";
+	}
+	return {
+		formatters: ge(i, a),
+		problems: r
+	};
+}
+var ve = (e, t, n, r) => `${e.number.format(t)} ${e.plural.select(t) === "one" ? n : r}`;
+function ye(e) {
+	let t = /* @__PURE__ */ new Map(), n = [], r = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), a = !1, o = (e, s, c) => {
+		for (let l of e) i.has(l) ? a = !0 : (t.has(l.id) ? r.add(l.id) : (t.set(l.id, {
+			comment: l,
+			parentId: s,
+			depth: c
+		}), n.push(l.id)), i.add(l), o(l.replies ?? T, l.id, c + 1), i.delete(l));
+	};
+	return o(e, null, 0), {
+		entries: t,
+		order: n,
+		duplicates: [...r],
+		cyclic: a
+	};
+}
+function M(e, t, n, r = /* @__PURE__ */ new Set()) {
+	for (let [i, a] of e.entries()) {
+		if (r.has(a)) continue;
+		if (a.id === t) {
+			let t = n(a);
+			if (t === a) return e;
+			let r = [...e];
+			return t === null ? r.splice(i, 1) : r[i] = t, r;
+		}
+		let o = a.replies;
+		if (!o?.length) continue;
+		let s = M(o, t, n, new Set(r).add(a));
+		if (s !== o) return e.with(i, {
+			...a,
+			replies: s
+		});
+	}
+	return e;
+}
+function be(e, t, n) {
+	if (t === null) return null;
+	let r = e.entries.get(t);
+	if (r) {
+		if (n <= 0) return null;
+		for (; r.depth + 1 > n && r.parentId !== null;) r = e.entries.get(r.parentId);
+		return r.comment.id;
+	}
+}
+function N(e, t, n) {
+	return t === null ? [...e, n] : M(e, t, (e) => ({
+		...e,
+		replies: [...e.replies ?? T, n]
+	}));
+}
+function P(e, t, n) {
+	return M(e, t, (e) => e.deleted || e.body === n ? e : {
+		...e,
+		body: n,
+		edited: !0
+	});
+}
+function F(e, t) {
+	return M(e, t, (e) => e.deleted ? e : e.replies?.length ? {
+		...e,
+		deleted: !0,
+		body: "",
+		reactions: []
+	} : null);
+}
+function I(e, t, n) {
+	let r = e.find((e) => e.emoji === t);
+	if (!r) return {
+		reactions: [...e, {
+			emoji: t,
+			users: [n]
+		}],
+		added: !0
+	};
+	let i = !r.users.includes(n), a = i ? [...r.users, n] : r.users.filter((e) => e !== n);
+	return {
+		reactions: a.length === 0 ? e.filter((e) => e !== r) : e.map((e) => e === r ? {
+			emoji: t,
+			users: a
+		} : e),
+		added: i
+	};
+}
+function xe(e, t, n, r) {
+	let i = !1;
+	return {
+		comments: M(e, t, (e) => {
+			if (e.deleted) return e;
+			let t = I(e.reactions ?? [], n, r);
+			return i = t.added, {
+				...e,
+				reactions: t.reactions
+			};
+		}),
+		added: i
+	};
+}
+function Se(e, t) {
+	let n = /* @__PURE__ */ new Set();
+	return e.filter((e) => {
+		let r = t(e);
+		return !n.has(r) && (n.add(r), !0);
+	});
+}
+//#endregion
+//#region src/components/comment-thread/thread-parts.tsx
+var Ce = "@", we = 8, L = 4, R = 8, Te = /\s/u, z = (e, t) => `${e}-${t}`, Ee = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229, B = {
+	sm: "sm",
+	md: "md"
+}, De = t({
+	fontSize: S.textSize.xs,
+	color: S.color.textMuted,
+	fontVariantNumeric: "tabular-nums",
+	whiteSpace: "nowrap"
+});
+function Oe({ epoch: e, now: t, formatters: n, invalidLabel: r, id: i, fullId: a, ui: o, part: c }) {
+	return e === null ? /* @__PURE__ */ C("span", {
+		id: i,
+		"data-ui": z(o, "time"),
+		className: c?.className,
+		css: [De, c?.css],
+		children: r
+	}) : /* @__PURE__ */ w(re, { children: [/* @__PURE__ */ C("time", {
+		id: i,
+		dateTime: new Date(e).toISOString(),
+		"data-ui": z(o, "time"),
+		className: c?.className,
+		css: [De, c?.css],
+		children: t === null ? n.full.format(e) : j(e, t, n.relative)
+	}), /* @__PURE__ */ C("span", {
+		id: a,
+		css: s,
+		children: n.full.format(e)
+	})] });
+}
+var ke = t({
+	display: "grid",
+	gridTemplateColumns: "auto minmax(0, 1fr)",
+	columnGap: "var(--thread-column-gap)",
+	alignItems: "start"
+}), Ae = t({ display: "inline-flex" }), je = t({
+	display: "grid",
+	rowGap: S.space[1],
+	minInlineSize: 0
+}), V = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "baseline",
+	columnGap: S.space[2],
+	rowGap: S.space[1],
+	minInlineSize: 0
+}), Me = t({
+	fontWeight: S.fontWeight.semibold,
+	color: S.color.text,
+	overflowWrap: "anywhere"
+}), H = t({
+	fontSize: S.textSize.xs,
+	color: S.color.textMuted
+});
+function Ne({ ui: e, author: t, label: n, epoch: r, now: i, formatters: a, invalidTimeLabel: o, meta: s, size: c, baseId: l, messageId: d, children: f, slots: p }) {
+	let m = g(l, "author", d), h = g(l, "time", d), _ = g(l, "when", d);
+	return /* @__PURE__ */ w("article", {
+		"aria-label": n,
+		"aria-labelledby": n === void 0 ? `${m} ${h}` : void 0,
+		"aria-describedby": r === null ? void 0 : _,
+		"data-ui": z(e, "article"),
+		className: p?.article?.className,
+		css: [ke, p?.article?.css],
+		children: [/* @__PURE__ */ C("span", {
+			"aria-hidden": "true",
+			css: Ae,
+			children: /* @__PURE__ */ C(u, {
+				name: t.name,
+				src: t.avatar,
+				size: B[c]
+			})
+		}), /* @__PURE__ */ w("div", {
+			css: je,
+			children: [/* @__PURE__ */ w("div", {
+				css: V,
+				children: [
+					/* @__PURE__ */ C("span", {
+						id: m,
+						"data-ui": z(e, "author"),
+						css: Me,
+						children: t.name
+					}),
+					/* @__PURE__ */ C(Oe, {
+						epoch: r,
+						now: i,
+						formatters: a,
+						invalidLabel: o,
+						id: h,
+						fullId: _,
+						ui: e,
+						part: p?.time
+					}),
+					s ? /* @__PURE__ */ C("span", {
+						css: H,
+						children: s
+					}) : null
+				]
+			}), f]
+		})]
+	});
+}
+var U = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: S.space[1]
+}), W = t({
+	gap: S.space[1],
+	paddingInline: S.space[2],
+	fontVariantNumeric: "tabular-nums",
+	"&[aria-pressed=\"true\"]": {
+		borderWidth: "2px",
+		borderColor: S.color.accentBorder,
+		backgroundColor: S.color.accentSoft,
+		color: S.color.accentText,
+		fontWeight: S.fontWeight.semibold
+	},
+	[r]: { "&[aria-pressed=\"true\"]": { borderColor: "Highlight" } }
+}), Pe = t({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: S.space[1],
+	minBlockSize: S.space[6],
+	paddingInline: S.space[2],
+	border: `1px solid ${S.color.border}`,
+	borderRadius: S.radius.full,
+	fontSize: S.textSize.sm,
+	fontVariantNumeric: "tabular-nums"
+}), Fe = t({ paddingInline: S.space[2] }), Ie = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: S.space[1],
+	padding: S.space[1],
+	border: `1px solid ${S.color.border}`,
+	borderRadius: S.radius.md,
+	backgroundColor: S.color.surface,
+	[r]: { borderColor: "CanvasText" }
+}), G = t({
+	display: "block",
+	inlineSize: "1em",
+	blockSize: "1em"
+}), Le = /* @__PURE__ */ w("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	css: G,
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ C("circle", {
+		cx: "8",
+		cy: "8",
+		r: "6.25"
+	}), /* @__PURE__ */ C("path", {
+		d: "M5.5 9.5c.6.9 1.4 1.3 2.5 1.3s1.9-.4 2.5-1.3M6 6.25h.01M10 6.25h.01",
+		strokeLinecap: "round"
+	})]
+}), Re = /* @__PURE__ */ C("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	css: G,
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ C("path", {
+		d: "M4 4l8 8M12 4l-8 8",
+		strokeLinecap: "round"
+	})
+});
+function ze({ ui: e, reactions: t, offered: n, currentUserId: r, formatters: i, labels: o, readOnly: c, disabled: u, pickerOpen: d, onPickerOpenChange: f, onToggle: p, pickerId: m, part: h }) {
+	let g = b(null), _ = b(!1), [ee, te] = x(0), ne = {
+		itemSelector: "[data-part=\"emoji\"]",
+		ownerSelector: `[data-ui="${z(e, "picker")}"]`
+	}, y = !c && n.length > 0, S = y && d;
+	v(() => {
+		!d && _.current && (_.current = !1, g.current?.focus());
+	}, [d]);
+	let ie = () => {
+		_.current = !0, f(!1);
+	};
+	return t.length === 0 && !y ? null : /* @__PURE__ */ w("div", {
+		"data-ui": z(e, "reactions"),
+		className: h?.className,
+		css: [U, h?.css],
+		children: [
+			t.map(({ emoji: e, users: t }) => {
+				let n = t.includes(r), a = o.reactionCount(e, t.length, n), d = /* @__PURE__ */ w(re, { children: [/* @__PURE__ */ C("span", {
+					"aria-hidden": "true",
+					children: e
+				}), /* @__PURE__ */ C("span", {
+					"aria-hidden": "true",
+					children: i.number.format(t.length)
+				})] });
+				return c ? /* @__PURE__ */ w("span", {
+					"data-part": "reaction",
+					css: Pe,
+					children: [d, /* @__PURE__ */ C("span", {
+						css: s,
+						children: a
+					})]
+				}, e) : /* @__PURE__ */ C(l, {
+					variant: "outline",
+					size: "sm",
+					"data-part": "reaction",
+					"aria-label": a,
+					"aria-pressed": n,
+					disabled: u,
+					onClick: () => p(e),
+					css: W,
+					children: d
+				}, e);
+			}),
+			y ? /* @__PURE__ */ C(l, {
+				ref: g,
+				variant: "ghost",
+				size: "sm",
+				"aria-label": o.addReaction,
+				"aria-expanded": S,
+				"aria-controls": S ? m : void 0,
+				disabled: u,
+				"data-action": "react",
+				onClick: () => f(!d),
+				css: Fe,
+				children: Le
+			}) : null,
+			S ? /* @__PURE__ */ w("div", {
+				id: m,
+				role: "group",
+				"aria-label": o.reactions,
+				"data-ui": z(e, "picker"),
+				onKeyDown: (e) => {
+					e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), ie()) : a(e, e.currentTarget, "horizontal", ne);
+				},
+				css: Ie,
+				children: [n.map((e, t) => /* @__PURE__ */ C(l, {
+					variant: "ghost",
+					size: "sm",
+					"data-part": "emoji",
+					"aria-label": o.reactWith(e),
+					tabIndex: t === Math.min(ee, n.length - 1) ? 0 : -1,
+					autoFocus: t === 0,
+					disabled: u,
+					onFocus: () => te(t),
+					onClick: () => {
+						p(e), ie();
+					},
+					css: Fe,
+					children: /* @__PURE__ */ C("span", {
+						"aria-hidden": "true",
+						children: e
+					})
+				}, e)), /* @__PURE__ */ C(l, {
+					variant: "ghost",
+					size: "sm",
+					"aria-label": o.closeReactions,
+					onClick: ie,
+					css: Fe,
+					children: Re
+				})]
+			}) : null
+		]
+	});
+}
+function Be(e, t) {
+	let n = e.slice(0, t), r = n.lastIndexOf(Ce);
+	if (r === -1 || r > 0 && !Te.test(n[r - 1])) return null;
+	let i = n.slice(r + 1);
+	return Te.test(i) ? null : {
+		start: r,
+		query: i
+	};
+}
+function Ve(e, t, n) {
+	let r = t.toLocaleLowerCase(n);
+	return e.filter((e) => e.name.toLocaleLowerCase(n).split(Te).some((e) => e.startsWith(r))).slice(0, we);
+}
+var He = {
+	ArrowDown: (e, t) => (e + 1) % t,
+	ArrowUp: (e, t) => (e - 1 + t) % t,
+	Home: () => 0,
+	End: (e, t) => t - 1
+}, Ue = t({
+	display: "grid",
+	gridTemplateColumns: "auto minmax(0, 1fr)",
+	columnGap: "var(--thread-column-gap)",
+	alignItems: "start",
+	inlineSize: "100%",
+	"&[data-avatar=\"false\"]": { gridTemplateColumns: "minmax(0, 1fr)" }
+}), K = t({
+	display: "inline-flex",
+	"@container (max-width: 28rem)": { display: "none" }
+}), q = t({
+	display: "grid",
+	rowGap: S.space[2],
+	minInlineSize: 0,
+	"@container (max-width: 28rem)": { gridColumn: "1 / -1" }
+}), We = t({
+	display: "flex",
+	flexWrap: "wrap",
+	justifyContent: "flex-end",
+	gap: S.space[2]
+}), J = t({ gap: S.space[2] }), Y = {
+	sm: "sm",
+	md: "md"
+}, Ge = {
+	sm: 2,
+	md: 3
+}, Ke = {
+	sm: t({
+		"--thread-column-gap": S.space[2],
+		"--thread-avatar": S.space[6]
+	}),
+	md: t({
+		"--thread-column-gap": S.space[3],
+		"--thread-avatar": S.space[8]
+	})
+};
+function qe({ ui: e, draft: t, onDraftChange: n, onSubmit: r, onCancel: i, cancelOnEscape: a = !0, cancelable: o, label: s, placeholder: c, submitLabel: d, cancelLabel: te, mentionsLabel: y, people: S, locale: re, disabled: T, pending: ue, autoFocus: de, size: fe, author: E, textareaProps: D, submitProps: O, part: pe, kind: k }) {
+	let me = ne(), A = b(null), he = b(null), j = b(null), [ge, _e] = x(null), [ve, ye] = x(null), [M, be] = x({
+		query: "",
+		index: 0
+	}), N = ge === null ? null : Be(t, ge), P = N ? Ve(S, N.query, re) : [], F = N !== null && !T && P.length > 0 && ve !== N.start, I = N && M.query === N.query ? Math.min(M.index, P.length - 1) : 0, xe = `${me}-mentions`, Se = (e) => g(me, "person", e.id), { refs: we, floatingStyles: Te } = ce({
+		open: F,
+		placement: "bottom-start",
+		middleware: [
+			oe(L),
+			ae({ padding: R }),
+			se({ padding: R })
+		],
+		whileElementsMounted: ie
+	}), De = le([
+		he,
+		we.setReference,
+		D?.ref
+	]);
+	v(() => {
+		j.current !== null && he.current && (he.current.setSelectionRange(j.current, j.current), j.current = null);
+	});
+	let Oe = (e) => _e(e.selectionStart === e.selectionEnd ? e.selectionStart : null), ke = (e) => {
+		if (!N) return;
+		let r = `${Ce}${e.name} `, i = N.start + 1 + N.query.length, a = t.slice(0, N.start) + r + t.slice(i), o = N.start + r.length;
+		j.current = o, _e(o), n(a);
+	}, je = () => {
+		let e = t.trim();
+		T || ue || e === "" || !A.current || r(e, A.current);
+	}, V = (e) => {
+		D?.onChange?.(e), n(e.currentTarget.value), Oe(e.currentTarget);
+	}, Me = (e) => {
+		D?.onSelect?.(e), Oe(e.currentTarget);
+	}, H = (e) => {
+		D?.onBlur?.(e), N && ye(N.start);
+	}, Ne = (e) => {
+		if (D?.onKeyDown?.(e), e.defaultPrevented || Ee(e)) return;
+		let t = !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
+		if (F && N) {
+			let n = t ? He[e.key] : void 0;
+			if (n) {
+				e.preventDefault(), be({
+					query: N.query,
+					index: n(I, P.length)
+				});
+				return;
+			}
+			if (t && (e.key === "Enter" || e.key === "Tab")) {
+				e.preventDefault(), ke(P[I]);
+				return;
+			}
+			if (e.key === "Escape") {
+				e.preventDefault(), e.stopPropagation(), ye(N.start);
+				return;
+			}
+		}
+		e.key === "Enter" && (e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey ? (e.preventDefault(), je()) : e.key === "Escape" && a && i && A.current && (e.preventDefault(), e.stopPropagation(), i(A.current));
+	}, U = t.trim() === "", W = E !== void 0;
+	return /* @__PURE__ */ w("div", {
+		ref: A,
+		"data-ui": z(e, "composer"),
+		"data-composer": k,
+		"data-avatar": W,
+		className: pe?.className,
+		css: [Ue, pe?.css],
+		children: [
+			W ? /* @__PURE__ */ C("span", {
+				"aria-hidden": "true",
+				css: K,
+				children: /* @__PURE__ */ C(u, {
+					name: E.name,
+					src: E.avatar,
+					size: B[fe]
+				})
+			}) : null,
+			/* @__PURE__ */ w("div", {
+				css: q,
+				children: [/* @__PURE__ */ C(ee, {
+					"aria-label": s,
+					placeholder: c,
+					size: Y[fe],
+					rows: Ge[fe],
+					autoResize: !0,
+					autoFocus: de,
+					...D,
+					ref: De,
+					value: t,
+					disabled: T || D?.disabled,
+					"aria-autocomplete": "list",
+					"aria-controls": F ? xe : D?.["aria-controls"],
+					"aria-activedescendant": F ? Se(P[I]) : void 0,
+					onChange: V,
+					onSelect: Me,
+					onBlur: H,
+					onKeyDown: Ne
+				}), /* @__PURE__ */ w("div", {
+					css: We,
+					children: [o ? /* @__PURE__ */ C(l, {
+						variant: "ghost",
+						size: "sm",
+						disabled: T,
+						onClick: () => A.current && i?.(A.current),
+						children: te
+					}) : null, /* @__PURE__ */ C(l, {
+						variant: "solid",
+						tone: "accent",
+						size: "sm",
+						...O,
+						disabled: T || O?.disabled,
+						"aria-disabled": U ? !0 : O?.["aria-disabled"],
+						loading: ue,
+						"data-action": "submit",
+						onClick: (e) => {
+							O?.onClick?.(e), e.defaultPrevented || je();
+						},
+						children: d
+					})]
+				})]
+			}),
+			F ? /* @__PURE__ */ C(_, { children: /* @__PURE__ */ C("div", {
+				ref: we.setFloating,
+				id: xe,
+				role: "listbox",
+				"aria-label": y,
+				"data-ui": z(e, "mentions"),
+				style: Te,
+				css: [m, p],
+				children: P.map((t, n) => /* @__PURE__ */ w("div", {
+					id: Se(t),
+					role: "option",
+					"aria-selected": n === I,
+					"data-active": n === I ? "" : void 0,
+					"data-ui": z(e, "mention"),
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: () => ke(t),
+					css: [
+						f,
+						h,
+						J
+					],
+					children: [/* @__PURE__ */ C("span", {
+						"aria-hidden": "true",
+						css: Ae,
+						children: /* @__PURE__ */ C(u, {
+							name: t.name,
+							src: t.avatar,
+							size: "sm"
+						})
+					}), t.name]
+				}, t.id))
+			}) }) : null
+		]
+	});
+}
+//#endregion
+//#region src/components/comment-thread/comment-thread.tsx
+var X = "comment-thread", Z = "root", Je = [
+	"👍",
+	"❤️",
+	"🎉",
+	"👀",
+	"🚀",
+	"✅"
+], Ye = 2, Xe = 3, Ze = [], Qe = [], $e = {
+	replyTo: null,
+	editing: null,
+	confirming: null,
+	picker: null,
+	drafts: {},
+	pending: {}
+}, et = "@container (max-width: 28rem)", Q = (e) => `reply:${e}`, $ = (e) => `edit:${e}`, tt = () => crypto.randomUUID(), nt = (e) => JSON.stringify([...new Set(e)].sort());
+function rt(e, t) {
+	if (!(t in e)) return e;
+	let { [t]: n, ...r } = e;
+	return r;
+}
+function it(e, t) {
+	return {
+		...e,
+		drafts: rt(e.drafts, t),
+		pending: rt(e.pending, t),
+		replyTo: e.replyTo !== null && t === Q(e.replyTo) ? null : e.replyTo,
+		editing: e.editing !== null && t === $(e.editing) ? null : e.editing
+	};
+}
+function at(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 = it(n, r));
+	}
+	let r = (e) => e === null || ot(t, e);
+	return r(n.replyTo) || (n = it(n, Q(n.replyTo))), r(n.editing) || (n = it(n, $(n.editing))), r(n.confirming) || (n = {
+		...n,
+		confirming: null
+	}), r(n.picker) || (n = {
+		...n,
+		picker: null
+	}), n;
+}
+function ot(e, t) {
+	let n = e.entries.get(t);
+	return n !== void 0 && !n.comment.deleted;
+}
+function st(e) {
+	return e.order.filter((t) => (e.entries.get(t).comment.replies?.length ?? 0) > 0);
+}
+function ct(e) {
+	let t = (t, n, r) => ve(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 lt = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), ut = t({
+	minInlineSize: 0,
+	containerType: "inline-size",
+	fontFamily: S.font.sans,
+	fontSize: S.textSize.sm,
+	lineHeight: S.lineHeight.base,
+	color: S.color.text
+}), dt = {
+	sm: t({
+		"--comment-thread-gap": S.space[3],
+		"--comment-thread-indent": S.space[4]
+	}),
+	md: t({
+		"--comment-thread-gap": S.space[4],
+		"--comment-thread-indent": S.space[6]
+	})
+}, ft = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: S.space[2]
+}), pt = t({
+	display: "grid",
+	gap: S.space[1],
+	minInlineSize: 0
+}), mt = t({ overflowWrap: "anywhere" }), ht = t({
+	margin: 0,
+	fontSize: S.textSize.xs,
+	color: S.color.textMuted
+}), gt = t({ "&[hidden]": { display: "none" } }), _t = t({
+	display: "grid",
+	rowGap: "var(--comment-thread-gap)",
+	listStyle: "none",
+	margin: 0,
+	padding: 0
+}), vt = t({
+	display: "grid",
+	rowGap: S.space[2],
+	minInlineSize: 0,
+	"&[data-new]": {
+		animationName: lt,
+		animationDuration: S.motion.duration.base,
+		animationTimingFunction: S.motion.easeStandard
+	},
+	[i]: { "&[data-new]": { animation: "none" } }
+}), yt = t({
+	margin: 0,
+	whiteSpace: "pre-wrap",
+	overflowWrap: "anywhere",
+	lineHeight: S.lineHeight.relaxed,
+	color: S.color.text,
+	"&[data-deleted]": {
+		color: S.color.textMuted,
+		fontStyle: "italic"
+	}
+}), bt = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: S.space[1]
+}), xt = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: S.space[2],
+	paddingBlock: S.space[2],
+	paddingInline: S.space[3],
+	border: `1px solid ${S.color.dangerBorder}`,
+	borderRadius: S.radius.md,
+	[r]: { borderColor: "CanvasText" }
+}), St = t({
+	flex: "1 1 auto",
+	fontWeight: S.fontWeight.medium
+}), Ct = t({
+	marginInlineStart: "calc(var(--thread-avatar) + var(--thread-column-gap))",
+	[et]: { marginInlineStart: 0 }
+}), wt = t({ justifySelf: "start" }), Tt = 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 ${S.color.border}`,
+	"&[hidden]": { display: "none" },
+	"&[data-capped]": {
+		marginInlineStart: 0,
+		paddingInlineStart: 0,
+		borderInlineStart: 0
+	},
+	[et]: { paddingInlineStart: S.space[3] },
+	[r]: { borderInlineStartColor: "GrayText" }
+}), Et = t({
+	margin: 0,
+	paddingBlock: S.space[4],
+	color: S.color.textMuted
+}), Dt = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: S.space[3]
+}), Ot = t({
+	flex: "1 1 12rem",
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: S.space[2],
+	margin: 0,
+	color: S.color.textMuted,
+	overflowWrap: "anywhere"
+}), kt = t({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: S.space[1],
+	minBlockSize: S.space[6],
+	paddingInline: S.space[2],
+	border: `1px solid ${S.color.borderStrong}`,
+	borderRadius: S.radius.full,
+	fontWeight: S.fontWeight.medium,
+	color: S.color.text,
+	[r]: { borderColor: "CanvasText" }
+}), At = t({
+	display: "block",
+	inlineSize: "1em",
+	blockSize: "1em"
+}), jt = /* @__PURE__ */ C("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	css: At,
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ C("path", {
+		d: "M3 8.5l3 3 7-7",
+		strokeLinecap: "round"
+	})
+});
+function Mt({ ref: e, value: t, defaultValue: r, onValueChange: i, currentUser: a, people: u, resolvedValue: f, defaultResolvedValue: p, onResolvedValueChange: m, expandedValue: h, defaultExpandedValue: _, onExpandedValueChange: ee, title: S, headingLevel: ie = 3, reactions: ae = Je, maxDepth: oe = Ye, now: se, locale: ce, timeZone: T = "UTC", getNewId: ue = tt, placeholder: de, composerLabel: fe, disabled: E = !1, readOnly: D = !1, size: O = "md", labels: pe, slotProps: k, className: me, sx: j, onFocus: ge, onBlur: ve, "aria-label": M, "aria-labelledby": I, "aria-describedby": Ce, ...we }) {
+	let L = ne(), R = b(null), Te = le([e, R]), { formatters: z, problems: Ee } = y(() => _e("CommentThread", ce, T), [ce, T]), B = {
+		...ct(z),
+		...pe
+	}, De = A(se) ? se : null, Oe = Number.isInteger(oe) && oe >= 0, ke = Oe ? oe : Ye, Ae = y(() => Se(ae, (e) => e), [ae]), je = b(null), [V = Ze, Me] = o(t, r ?? Ze, (e) => i?.([...e], je.current)), H = y(() => ye(V), [V]), U = (e, t) => {
+		e !== V && (je.current = t, Me(e));
+	}, [W = !1, Pe] = o(f, p ?? !1, m), Fe = b(null);
+	v(() => {
+		Fe.current = null;
+	}, [W]);
+	let [Ie] = x(() => _ ?? st(H)), [G = Qe, Le] = o(h, Ie, (e) => ee?.([...e])), Re = new Set(G), Be = nt(G), Ve = b(null);
+	v(() => {
+		Ve.current = null;
+	}, [Be]);
+	let He = (e) => {
+		let t = nt(e);
+		t !== Be && t !== Ve.current && (Ve.current = t, Le(e));
+	}, [Ue, K] = x($e), q = at(Ue, H);
+	q !== Ue && K(q);
+	let We = y(() => Se(u ?? [...H.order.map((e) => H.entries.get(e).comment.author), a], (e) => e.id), [
+		u,
+		H,
+		a
+	]), J = b(null), Y = b(null), Ge = b(H.order), et = b(null), lt = b(/* @__PURE__ */ new Set()), [At, Mt] = x({
+		text: "",
+		key: 0
+	}), Nt = y(() => {
+		let e = et.current;
+		return new Set(e ? H.order.filter((t) => !e.has(t)) : []);
+	}, [H]), Pt = (e) => R.current?.querySelector(`[data-ui="${X}-item"][data-comment-id="${CSS.escape(e)}"]`), Ft = (e, t) => Pt(e)?.querySelector(`:scope > article [data-action="${t}"]`), It = (e) => {
+		let t = Pt(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 = () => R.current?.querySelector(`[data-composer="${Z}"] textarea:not(:disabled)`), Rt = (e) => {
+		let t = Ge.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();
+		}
+	};
+	v(() => {
+		let e = R.current;
+		if (!e) return;
+		let t = e.ownerDocument, n = t.activeElement, r = !n || n === t.body, i = J.current;
+		if (i && !i.invoker.isConnected) {
+			if (J.current = null, r) {
+				let e = i.target();
+				e ? e.focus() : Rt(i.commentId);
+			}
+		} else if (r && Y.current && !Y.current.element.isConnected) {
+			let { commentId: e } = Y.current;
+			Y.current = null, Rt(e);
+		}
+		let a = Y.current?.element;
+		if (a?.isConnected && (r || n === a)) {
+			let t = `[data-ui="${X}-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="${X}-content"][hidden]`) ? e.querySelector("[data-action=\"reopen\"]") : null;
+			(r ?? i)?.focus();
+		}
+		Ge.current = H.order;
+	}), v(() => {
+		let e = et.current;
+		if (et.current = new Set(H.order), !e) return;
+		let t = H.order.filter((t) => !e.has(t) && !lt.current.has(t));
+		t.length > 0 && Mt((e) => ({
+			text: B.newComments(t.length),
+			key: e.key + 1
+		}));
+	}, [H]);
+	let zt = [
+		...Ee,
+		...De === null ? [`CommentThread: now ${String(se)} is not a finite epoch-ms value; showing full dates.`] : [],
+		...Oe ? [] : [`CommentThread: maxDepth ${String(oe)} is not a nonnegative integer; using ${Ye}.`],
+		...H.duplicates.length > 0 ? [`CommentThread: duplicate comment ids ${JSON.stringify(H.duplicates)}; showing the first of each.`] : [],
+		...H.cyclic ? ["CommentThread: a comment appears among its own replies; the repeat is not shown."] : []
+	].join("\n");
+	te(() => {
+		process.env.NODE_ENV !== "production" && zt !== "" && console.error(zt);
+	}, [zt]);
+	let Bt = (e) => {
+		ge?.(e);
+		let t = e.target.closest(`[data-ui="${X}-item"]`);
+		Y.current = {
+			element: e.target,
+			commentId: t?.dataset.commentId ?? null
+		}, J.current && !J.current.invoker.contains(e.target) && (J.current = null);
+	}, Vt = (e) => {
+		ve?.(e);
+		let { target: t } = e;
+		queueMicrotask(() => {
+			t.isConnected && Y.current?.element === t && (Y.current = null, J.current = null);
+		});
+	}, Ht = (e, t) => K((n) => ({
+		...n,
+		drafts: {
+			...n.drafts,
+			[e]: t
+		},
+		pending: rt(n.pending, e)
+	})), Ut = (e, t, n, r) => {
+		if (E || D || q.pending[e] || t !== null && !ot(H, t)) return;
+		let i = be(H, t, ke);
+		if (i === void 0) return;
+		let o = {
+			id: ue(),
+			author: a,
+			body: n,
+			createdAt: De ?? Date.now(),
+			reactions: []
+		};
+		lt.current.add(o.id), K((t) => ({
+			...t,
+			pending: {
+				...t.pending,
+				[e]: {
+					kind: "add",
+					id: o.id
+				}
+			}
+		})), t !== null && (J.current = {
+			invoker: r,
+			target: () => Ft(t, "reply"),
+			commentId: t
+		}), U(N(V, i, o), {
+			type: "reply",
+			comment: o,
+			parentId: i
+		}), i !== null && !Re.has(i) && He([...G, i]);
+	}, Wt = () => K((e) => e.pending[Z] ? {
+		...e,
+		pending: rt(e.pending, Z)
+	} : it(e, Z)), Gt = (e) => K((t) => ({
+		...t,
+		replyTo: e,
+		confirming: null,
+		picker: null
+	})), Kt = (e, t) => {
+		J.current = {
+			invoker: t,
+			target: () => Ft(e, "reply"),
+			commentId: e
+		}, K((t) => it(t, Q(e)));
+	}, qt = (e) => K((t) => ({
+		...t,
+		editing: e.id,
+		confirming: null,
+		picker: null,
+		drafts: {
+			...t.drafts,
+			[$(e.id)]: e.body
+		}
+	})), Jt = (e, t) => {
+		J.current = {
+			invoker: t,
+			target: () => Ft(e, "edit"),
+			commentId: e
+		}, K((t) => it(t, $(e)));
+	}, Yt = (e, t, n) => {
+		let r = $(e.id);
+		E || D || q.pending[r] || !ot(H, e.id) || (t === e.body ? Jt(e.id, n) : (J.current = {
+			invoker: n,
+			target: () => Ft(e.id, "edit"),
+			commentId: e.id
+		}, K((n) => ({
+			...n,
+			pending: {
+				...n.pending,
+				[r]: {
+					kind: "edit",
+					id: e.id,
+					body: t
+				}
+			}
+		})), U(P(V, e.id, t), {
+			type: "edit",
+			id: e.id,
+			body: t
+		})));
+	}, Xt = (e, t) => {
+		J.current = {
+			invoker: t,
+			target: () => Ft(e, "delete"),
+			commentId: e
+		}, K((e) => ({
+			...e,
+			confirming: null
+		}));
+	}, Zt = (e, t) => {
+		Xt(e, t), !(E || D) && U(F(V, e), {
+			type: "delete",
+			id: e
+		});
+	}, Qt = (e, t) => {
+		if (E || D) return;
+		let { comments: n, added: r } = xe(V, e, t, a.id);
+		U(n, {
+			type: "react",
+			id: e,
+			emoji: t,
+			added: r
+		});
+	}, $t = (e, t) => {
+		if (E || D || e === Fe.current) return;
+		Fe.current = e;
+		let n = e ? "reopen" : "resolve";
+		J.current = {
+			invoker: t.currentTarget,
+			target: () => R.current?.querySelector(`[data-action="${n}"]`),
+			commentId: null
+		}, Pe(e);
+	}, en = (e) => He(Re.has(e) ? G.filter((t) => t !== e) : [...G, e]), tn = H.order.filter((e) => ot(H, e)), nn = Se(tn.map((e) => H.entries.get(e).comment.author), (e) => e.id), rn = B.commentCount(tn.length), an = tn.length > 0 ? z.facts.format([rn, B.peopleCount(nn.length)]) : rn, on = H.order.length === 0, sn = `${L}-empty`, cn = `${L}-title`, ln = c(S) && S !== "", un = [I, ln ? cn : void 0].filter(Boolean).join(" ") || void 0, dn = [Ce, on ? sn : void 0].filter(Boolean).join(" ") || void 0, fn = {
+		ui: X,
+		mentionsLabel: B.mentions,
+		people: We,
+		locale: ce,
+		disabled: E,
+		size: O,
+		textareaProps: k?.textarea,
+		submitProps: k?.send
+	}, pn = (e, t, n) => {
+		if (n.has(e) || H.entries.get(e.id)?.comment !== e) return null;
+		let { id: r } = e, i = e.deleted === !0, o = e.author.id === a.id, s = q.editing === r && !i, c = q.confirming === r && !i, u = e.replies ?? Ze, d = g(L, "replies", r), f = Re.has(r), p = new Set(n).add(e), m = g(L, "confirm", r), h = (e) => {
+			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), Xt(r, e.currentTarget));
+		};
+		return /* @__PURE__ */ w("li", {
+			"data-ui": `${X}-item`,
+			"data-comment-id": r,
+			"data-depth": t,
+			"data-deleted": i ? "" : void 0,
+			"data-new": Nt.has(r) ? "" : void 0,
+			className: k?.item?.className,
+			css: [vt, k?.item?.css],
+			children: [
+				/* @__PURE__ */ w(Ne, {
+					ui: X,
+					author: e.author,
+					label: i ? B.deletedComment : void 0,
+					epoch: he(e.createdAt),
+					now: De,
+					formatters: z,
+					invalidTimeLabel: B.invalidTime,
+					meta: e.edited && !i ? B.edited : null,
+					size: O,
+					baseId: L,
+					messageId: r,
+					slots: {
+						article: k?.article,
+						time: k?.time
+					},
+					children: [
+						s ? /* @__PURE__ */ C(qe, {
+							...fn,
+							kind: "edit",
+							draft: q.drafts[$(r)] ?? e.body,
+							onDraftChange: (e) => Ht($(r), e),
+							onSubmit: (t, n) => Yt(e, t, n),
+							onCancel: (e) => Jt(r, e),
+							cancelable: !0,
+							label: B.editComment,
+							submitLabel: B.save,
+							cancelLabel: B.cancel,
+							pending: q.pending[$(r)] !== void 0,
+							autoFocus: !0,
+							part: k?.composer
+						}) : /* @__PURE__ */ C("p", {
+							"data-ui": `${X}-body`,
+							"data-deleted": i ? "" : void 0,
+							className: k?.body?.className,
+							css: [yt, k?.body?.css],
+							children: i ? B.deletedText : e.body
+						}),
+						i || s ? null : /* @__PURE__ */ C(ze, {
+							ui: X,
+							reactions: e.reactions ?? [],
+							offered: Ae,
+							currentUserId: a.id,
+							formatters: z,
+							labels: B,
+							readOnly: D,
+							disabled: E,
+							pickerOpen: q.picker === r,
+							onPickerOpenChange: (e) => K((t) => ({
+								...t,
+								picker: e ? r : null,
+								confirming: null
+							})),
+							onToggle: (e) => Qt(r, e),
+							pickerId: g(L, "picker", r),
+							part: k?.reaction
+						}),
+						i || s || D ? null : c ? /* @__PURE__ */ w("div", {
+							role: "group",
+							"aria-labelledby": m,
+							"data-ui": `${X}-confirm`,
+							onKeyDown: h,
+							css: xt,
+							children: [
+								/* @__PURE__ */ C("span", {
+									id: m,
+									css: St,
+									children: B.deleteConfirm
+								}),
+								/* @__PURE__ */ C(l, {
+									variant: "ghost",
+									size: "sm",
+									autoFocus: !0,
+									onClick: (e) => Xt(r, e.currentTarget.parentElement),
+									children: B.cancel
+								}),
+								/* @__PURE__ */ C(l, {
+									variant: "solid",
+									tone: "danger",
+									size: "sm",
+									disabled: E,
+									onClick: (e) => Zt(r, e.currentTarget.parentElement),
+									children: B.delete
+								})
+							]
+						}, "confirm") : /* @__PURE__ */ w("div", {
+							"data-ui": `${X}-actions`,
+							className: k?.actions?.className,
+							css: [bt, k?.actions?.css],
+							children: [/* @__PURE__ */ C(l, {
+								variant: "ghost",
+								size: "sm",
+								"data-action": "reply",
+								"aria-expanded": q.replyTo === r,
+								disabled: E,
+								onClick: () => Gt(r),
+								children: B.reply
+							}), o ? /* @__PURE__ */ w(re, { children: [/* @__PURE__ */ C(l, {
+								variant: "ghost",
+								size: "sm",
+								"data-action": "edit",
+								disabled: E,
+								onClick: () => qt(e),
+								children: B.edit
+							}), /* @__PURE__ */ C(l, {
+								variant: "ghost",
+								size: "sm",
+								tone: "danger",
+								"data-action": "delete",
+								disabled: E,
+								onClick: () => K((e) => ({
+									...e,
+									confirming: r,
+									picker: null
+								})),
+								children: B.delete
+							})] }) : null]
+						}, "actions")
+					]
+				}),
+				q.replyTo === r && !i && !D ? /* @__PURE__ */ C("div", {
+					css: Ct,
+					children: /* @__PURE__ */ C(qe, {
+						...fn,
+						kind: "reply",
+						draft: q.drafts[Q(r)] ?? "",
+						onDraftChange: (e) => Ht(Q(r), e),
+						onSubmit: (e, t) => Ut(Q(r), r, e, t),
+						onCancel: (e) => Kt(r, e),
+						cancelable: !0,
+						label: B.replyingTo(e.author.name),
+						placeholder: de ?? B.placeholder,
+						submitLabel: B.send,
+						cancelLabel: B.cancelReply,
+						pending: q.pending[Q(r)] !== void 0,
+						autoFocus: !0,
+						part: k?.composer
+					})
+				}) : null,
+				u.length > 0 ? /* @__PURE__ */ w(re, { children: [/* @__PURE__ */ C(l, {
+					variant: "ghost",
+					size: "sm",
+					"data-part": "toggle",
+					"aria-expanded": f,
+					"aria-controls": d,
+					onClick: () => en(r),
+					css: [wt, Ct],
+					children: f ? B.hideReplies : B.showReplies(u.length)
+				}), /* @__PURE__ */ C("ul", {
+					role: "list",
+					id: d,
+					hidden: !f,
+					"data-ui": `${X}-replies`,
+					"data-capped": t + 1 > Xe ? "" : void 0,
+					className: k?.replies?.className,
+					css: [Tt, k?.replies?.css],
+					children: u.map((e) => pn(e, t + 1, p))
+				})] }) : null
+			]
+		}, r);
+	};
+	return /* @__PURE__ */ C(n, {
+		className: me,
+		styles: [
+			ut,
+			Ke[O],
+			dt[O]
+		],
+		sx: j,
+		children: (e) => /* @__PURE__ */ w("section", {
+			...we,
+			ref: Te,
+			"aria-label": M ?? (un ? void 0 : B.thread),
+			"aria-labelledby": un,
+			"aria-describedby": dn,
+			"data-ui": X,
+			"data-size": O,
+			"data-state": W ? "resolved" : "open",
+			onFocus: Bt,
+			onBlur: Vt,
+			className: e,
+			children: [/* @__PURE__ */ w(d, { children: [
+				/* @__PURE__ */ w(d.Header, {
+					className: k?.header?.className,
+					css: [ft, k?.header?.css],
+					children: [/* @__PURE__ */ w("div", {
+						css: pt,
+						children: [ln ? /* @__PURE__ */ C(d.Title, {
+							id: cn,
+							level: ie,
+							className: k?.title?.className,
+							css: [mt, k?.title?.css],
+							children: S
+						}) : null, /* @__PURE__ */ C("p", {
+							"data-ui": `${X}-count`,
+							css: ht,
+							children: an
+						})]
+					}), !W && !D ? /* @__PURE__ */ C(l, {
+						variant: "outline",
+						size: "sm",
+						"data-action": "resolve",
+						disabled: E,
+						startIcon: jt,
+						onClick: (e) => $t(!0, e),
+						children: B.resolve
+					}) : null]
+				}),
+				/* @__PURE__ */ w(d.Content, { children: [/* @__PURE__ */ C("div", {
+					"data-ui": `${X}-content`,
+					hidden: W,
+					css: gt,
+					children: on ? /* @__PURE__ */ C("p", {
+						id: sn,
+						"data-ui": `${X}-empty`,
+						css: Et,
+						children: B.empty
+					}) : /* @__PURE__ */ C("ul", {
+						role: "list",
+						"data-ui": `${X}-list`,
+						className: k?.list?.className,
+						css: [_t, k?.list?.css],
+						children: V.map((e) => pn(e, 0, /* @__PURE__ */ new Set()))
+					})
+				}), W ? /* @__PURE__ */ w("div", {
+					"data-ui": `${X}-resolved`,
+					className: k?.resolved?.className,
+					css: [Dt, k?.resolved?.css],
+					children: [/* @__PURE__ */ w("p", {
+						css: Ot,
+						children: [
+							/* @__PURE__ */ w("span", {
+								css: kt,
+								children: [jt, B.resolved]
+							}),
+							/* @__PURE__ */ C("span", { children: rn }),
+							nn.length > 0 ? /* @__PURE__ */ C("span", { children: z.people.format(nn.map((e) => e.name)) }) : null
+						]
+					}), D ? null : /* @__PURE__ */ C(l, {
+						variant: "outline",
+						size: "sm",
+						"data-action": "reopen",
+						disabled: E,
+						onClick: (e) => $t(!1, e),
+						children: B.reopen
+					})]
+				}) : null] }),
+				D ? null : /* @__PURE__ */ C(d.Footer, {
+					hidden: W,
+					css: gt,
+					children: /* @__PURE__ */ C(qe, {
+						...fn,
+						kind: Z,
+						draft: q.drafts[Z] ?? "",
+						onDraftChange: (e) => Ht(Z, e),
+						onSubmit: (e, t) => Ut(Z, null, e, t),
+						onCancel: Wt,
+						cancelOnEscape: !1,
+						cancelable: (q.drafts[Z] ?? "") !== "" || q.pending[Z] !== void 0,
+						label: fe ?? B.composer,
+						placeholder: de ?? B.placeholder,
+						submitLabel: B.send,
+						cancelLabel: B.cancel,
+						pending: q.pending[Z] !== void 0,
+						author: a,
+						part: k?.composer
+					})
+				})
+			] }), /* @__PURE__ */ C("div", {
+				role: "status",
+				"aria-atomic": "true",
+				"data-ui": `${X}-status`,
+				className: k?.status?.className,
+				css: [s, k?.status?.css],
+				children: At.text ? /* @__PURE__ */ C("span", { children: At.text }, At.key) : null
+			})]
+		})
+	});
+}
+Mt.displayName = "CommentThread";
+//#endregion
+export { Mt as t };