@jfrader/ui 0.5.1 → 0.7.0

package/dist/comment-thread-ASaXDcGo.js

@@ -1,1410 +0,0 @@
-'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 };