@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-theme-manager/index.es.js

@@ -0,0 +1,482 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../badge/index.es.js";
+import { Button as n } from "../button/index.es.js";
+import { Card as r, CardContent as i, CardDescription as a, CardHeader as o, CardTitle as s } from "../card/index.es.js";
+import { Label as c } from "../label/index.es.js";
+import { Input as l } from "../input/index.es.js";
+import { Separator as u } from "../separator/index.es.js";
+import { Textarea as d } from "../textarea/index.es.js";
+import { useTheme as f } from "../../context/theme-provider.es.js";
+import * as p from "react";
+import { useCallback as ee, useEffect as m, useState as h } from "react";
+import { AlertCircle as te, Check as g, CheckCircle as ne, Copy as _, Download as v, ExternalLink as y, Eye as b, Monitor as re, Moon as ie, Palette as x, RefreshCw as ae, Settings as S, Sun as C, Upload as w } from "lucide-react";
+import { cva as T } from "class-variance-authority";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+//#region src/components/waka-theme-manager/index.tsx
+function O() {
+	try {
+		return f();
+	} catch {
+		return null;
+	}
+}
+var k = T("w-full", {
+	variants: { size: {
+		sm: "max-w-2xl",
+		base: "max-w-4xl",
+		lg: "max-w-6xl",
+		full: "max-w-full"
+	} },
+	defaultVariants: { size: "base" }
+}), A = p.forwardRef(({ className: f, size: p, onThemeChange: T, onThemeLoad: A, onThemeSave: oe, initialTheme: se, showPreview: j = !0, showExport: M = !0, showImport: N = !0, allowCustomColors: ce = !0, ...P }, F) => {
+	let I = O(), L = I?.currentTheme, R = I?.themes || [], z = I?.changeTheme, [B, V] = h(se || {
+		name: "Custom Theme",
+		description: "Thème personnalisé",
+		colors: {
+			background: "#ffffff",
+			foreground: "#0a0a0a",
+			card: "#ffffff",
+			cardForeground: "#0a0a0a",
+			popover: "#ffffff",
+			popoverForeground: "#0a0a0a",
+			primary: "#0a0a0a",
+			primaryForeground: "#fafafa",
+			secondary: "#f4f4f5",
+			secondaryForeground: "#0a0a0a",
+			muted: "#f4f4f5",
+			mutedForeground: "#737373",
+			accent: "#f4f4f5",
+			accentForeground: "#0a0a0a",
+			destructive: "#ef4444",
+			destructiveForeground: "#fafafa",
+			border: "#e4e4e7",
+			input: "#e4e4e7",
+			ring: "#0a0a0a"
+		}
+	}), [H, U] = h(!1), [W, G] = h(null), [K, q] = h(null), [J, le] = h(""), [Y, X] = h(!1), [Z, Q] = h("auto"), $ = ee((e) => {
+		let t = document.documentElement;
+		Object.entries(e.colors).forEach(([e, n]) => {
+			let r = `--${e.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+			t.style.setProperty(r, n);
+		}), z && z(e.name.toLowerCase().replace(/\s+/g, "-"));
+	}, [z]), ue = async (e) => {
+		U(!0), G(null), q(null);
+		try {
+			let t = await fetch(e);
+			if (!t.ok) throw Error(`Erreur HTTP: ${t.status}`);
+			let n = await t.json();
+			if (!n.name || !n.colors) throw Error("Format de thème invalide");
+			let r = {
+				name: n.name,
+				description: n.description || "",
+				author: n.author || "",
+				version: n.version || "1.0.0",
+				colors: {
+					background: n.colors.background || "#ffffff",
+					foreground: n.colors.foreground || "#0a0a0a",
+					card: n.colors.card || "#ffffff",
+					cardForeground: n.colors.cardForeground || "#0a0a0a",
+					popover: n.colors.popover || "#ffffff",
+					popoverForeground: n.colors.popoverForeground || "#0a0a0a",
+					primary: n.colors.primary || "#0a0a0a",
+					primaryForeground: n.colors.primaryForeground || "#fafafa",
+					secondary: n.colors.secondary || "#f4f4f5",
+					secondaryForeground: n.colors.secondaryForeground || "#0a0a0a",
+					muted: n.colors.muted || "#f4f4f5",
+					mutedForeground: n.colors.mutedForeground || "#737373",
+					accent: n.colors.accent || "#f4f4f5",
+					accentForeground: n.colors.accentForeground || "#0a0a0a",
+					destructive: n.colors.destructive || "#ef4444",
+					destructiveForeground: n.colors.destructiveForeground || "#fafafa",
+					border: n.colors.border || "#e4e4e7",
+					input: n.colors.input || "#e4e4e7",
+					ring: n.colors.ring || "#0a0a0a",
+					chart1: n.colors.chart1,
+					chart2: n.colors.chart2,
+					chart3: n.colors.chart3,
+					chart4: n.colors.chart4,
+					chart5: n.colors.chart5
+				}
+			};
+			V(r), $(r), A?.(r), q("Thème chargé avec succès !");
+		} catch (e) {
+			G(e instanceof Error ? e.message : "Erreur lors du chargement du thème");
+		} finally {
+			U(!1);
+		}
+	}, de = () => {
+		let e = JSON.stringify(B, null, 2), t = new Blob([e], { type: "application/json" }), n = URL.createObjectURL(t), r = document.createElement("a");
+		r.href = n, r.download = `${B.name.toLowerCase().replace(/\s+/g, "-")}-theme.json`, document.body.appendChild(r), r.click(), document.body.removeChild(r), URL.revokeObjectURL(n);
+	}, fe = async () => {
+		try {
+			await navigator.clipboard.writeText(JSON.stringify(B, null, 2)), X(!0), setTimeout(() => X(!1), 2e3);
+		} catch {
+			G("Impossible de copier le thème");
+		}
+	}, pe = (e, t) => {
+		let n = {
+			...B,
+			colors: {
+				...B.colors,
+				[e]: t
+			}
+		};
+		V(n), $(n), T?.(n);
+	}, me = () => {
+		oe?.(B), q("Thème sauvegardé !");
+	};
+	return m(() => {
+		$(B);
+	}, [B, $]), m(() => {
+		let e = document.documentElement;
+		Z === "dark" ? e.classList.add("dark") : Z === "light" ? e.classList.remove("dark") : window.matchMedia("(prefers-color-scheme: dark)").matches ? e.classList.add("dark") : e.classList.remove("dark");
+	}, [Z]), /* @__PURE__ */ E("div", {
+		ref: F,
+		className: e(k({ size: p }), f),
+		...P,
+		children: /* @__PURE__ */ D("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ D("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("h2", {
+						className: "text-2xl font-bold",
+						children: "Gestionnaire de Thèmes TweakCN"
+					}), /* @__PURE__ */ E("p", {
+						className: "text-muted-foreground",
+						children: "Créez, importez et prévisualisez vos thèmes personnalisés"
+					})] }), /* @__PURE__ */ E("div", {
+						className: "flex items-center gap-2",
+						children: /* @__PURE__ */ D(t, {
+							variant: "outline",
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ E(x, { className: "h-3 w-3" }), B.name]
+						})
+					})]
+				}),
+				W && /* @__PURE__ */ D("div", {
+					className: "flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg text-destructive",
+					children: [/* @__PURE__ */ E(te, { className: "h-4 w-4" }), /* @__PURE__ */ E("span", {
+						className: "text-sm",
+						children: W
+					})]
+				}),
+				K && /* @__PURE__ */ D("div", {
+					className: "flex items-center gap-2 p-3 bg-green-500/10 border border-green-500/20 rounded-lg text-green-600",
+					children: [/* @__PURE__ */ E(ne, { className: "h-4 w-4" }), /* @__PURE__ */ E("span", {
+						className: "text-sm",
+						children: K
+					})]
+				}),
+				/* @__PURE__ */ D("div", {
+					className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
+					children: [/* @__PURE__ */ D("div", {
+						className: "space-y-6",
+						children: [
+							/* @__PURE__ */ D(r, { children: [/* @__PURE__ */ E(o, { children: /* @__PURE__ */ D(s, {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ E(S, { className: "h-5 w-5" }), "Informations du thème"]
+							}) }), /* @__PURE__ */ D(i, {
+								className: "space-y-4",
+								children: [/* @__PURE__ */ D("div", {
+									className: "grid grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E(c, {
+										htmlFor: "theme-name",
+										children: "Nom"
+									}), /* @__PURE__ */ E(l, {
+										id: "theme-name",
+										value: B.name,
+										onChange: (e) => V({
+											...B,
+											name: e.target.value
+										}),
+										placeholder: "Mon thème"
+									})] }), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E(c, {
+										htmlFor: "theme-author",
+										children: "Auteur"
+									}), /* @__PURE__ */ E(l, {
+										id: "theme-author",
+										value: B.author || "",
+										onChange: (e) => V({
+											...B,
+											author: e.target.value
+										}),
+										placeholder: "Votre nom"
+									})] })]
+								}), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E(c, {
+									htmlFor: "theme-description",
+									children: "Description"
+								}), /* @__PURE__ */ E(d, {
+									id: "theme-description",
+									value: B.description || "",
+									onChange: (e) => V({
+										...B,
+										description: e.target.value
+									}),
+									placeholder: "Description du thème...",
+									rows: 3
+								})] })]
+							})] }),
+							(N || M) && /* @__PURE__ */ D(r, { children: [/* @__PURE__ */ E(o, { children: /* @__PURE__ */ D(s, {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ E(w, { className: "h-5 w-5" }), "Import / Export"]
+							}) }), /* @__PURE__ */ D(i, {
+								className: "space-y-4",
+								children: [N && /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E(c, {
+									htmlFor: "import-url",
+									children: "URL du thème JSON"
+								}), /* @__PURE__ */ D("div", {
+									className: "flex gap-2",
+									children: [/* @__PURE__ */ E(l, {
+										id: "import-url",
+										value: J,
+										onChange: (e) => le(e.target.value),
+										placeholder: "https://example.com/theme.json",
+										className: "flex-1"
+									}), /* @__PURE__ */ E(n, {
+										onClick: () => ue(J),
+										disabled: !J || H,
+										size: "sm",
+										children: H ? /* @__PURE__ */ E(ae, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(v, { className: "h-4 w-4" })
+									})]
+								})] }), M && /* @__PURE__ */ D("div", {
+									className: "flex gap-2",
+									children: [/* @__PURE__ */ D(n, {
+										onClick: de,
+										variant: "outline",
+										className: "flex-1",
+										children: [/* @__PURE__ */ E(v, { className: "h-4 w-4 mr-2" }), "Exporter JSON"]
+									}), /* @__PURE__ */ E(n, {
+										onClick: fe,
+										variant: "outline",
+										children: E(Y ? g : _, { className: "h-4 w-4" })
+									})]
+								})]
+							})] }),
+							j && /* @__PURE__ */ D(r, { children: [/* @__PURE__ */ E(o, { children: /* @__PURE__ */ D(s, {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ E(b, { className: "h-5 w-5" }), "Prévisualisation"]
+							}) }), /* @__PURE__ */ E(i, { children: /* @__PURE__ */ D("div", {
+								className: "space-y-4",
+								children: [/* @__PURE__ */ D("div", {
+									className: "flex gap-2",
+									children: [
+										/* @__PURE__ */ D(n, {
+											variant: Z === "light" ? "default" : "outline",
+											size: "sm",
+											onClick: () => Q("light"),
+											children: [/* @__PURE__ */ E(C, { className: "h-4 w-4 mr-2" }), "Clair"]
+										}),
+										/* @__PURE__ */ D(n, {
+											variant: Z === "dark" ? "default" : "outline",
+											size: "sm",
+											onClick: () => Q("dark"),
+											children: [/* @__PURE__ */ E(ie, { className: "h-4 w-4 mr-2" }), "Sombre"]
+										}),
+										/* @__PURE__ */ D(n, {
+											variant: Z === "auto" ? "default" : "outline",
+											size: "sm",
+											onClick: () => Q("auto"),
+											children: [/* @__PURE__ */ E(re, { className: "h-4 w-4 mr-2" }), "Auto"]
+										})
+									]
+								}), L && /* @__PURE__ */ D("div", {
+									className: "text-sm text-muted-foreground",
+									children: [
+										/* @__PURE__ */ D("div", {
+											className: "flex justify-between",
+											children: [/* @__PURE__ */ E("span", { children: "Thème actuel:" }), /* @__PURE__ */ E("span", {
+												className: "font-medium",
+												children: L
+											})]
+										}),
+										/* @__PURE__ */ D("div", {
+											className: "flex justify-between",
+											children: [/* @__PURE__ */ E("span", { children: "Mode sombre:" }), /* @__PURE__ */ E("span", {
+												className: "font-medium",
+												children: "Géré par le système"
+											})]
+										}),
+										/* @__PURE__ */ D("div", {
+											className: "flex justify-between",
+											children: [/* @__PURE__ */ E("span", { children: "Thèmes disponibles:" }), /* @__PURE__ */ E("span", {
+												className: "font-medium",
+												children: R.length
+											})]
+										})
+									]
+								})]
+							}) })] }),
+							/* @__PURE__ */ D("div", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ E(n, {
+									onClick: me,
+									className: "flex-1",
+									children: "Sauvegarder le thème"
+								}), /* @__PURE__ */ D(n, {
+									variant: "outline",
+									onClick: () => window.open("https://tweakcn.com", "_blank"),
+									children: [/* @__PURE__ */ E(y, { className: "h-4 w-4 mr-2" }), "TweakCN"]
+								})]
+							})
+						]
+					}), ce && /* @__PURE__ */ E("div", {
+						className: "space-y-6",
+						children: /* @__PURE__ */ D(r, { children: [/* @__PURE__ */ D(o, { children: [/* @__PURE__ */ D(s, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ E(x, { className: "h-5 w-5" }), "Couleurs du thème"]
+						}), /* @__PURE__ */ E(a, { children: "Cliquez sur une couleur pour la modifier" })] }), /* @__PURE__ */ E(i, { children: /* @__PURE__ */ E("div", {
+							className: "grid grid-cols-2 gap-4",
+							children: Object.entries(B.colors).map(([e, t]) => /* @__PURE__ */ D("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ E(c, {
+									htmlFor: `color-${e}`,
+									className: "text-sm font-medium",
+									children: e.replace(/([A-Z])/g, " $1").replace(/^./, (e) => e.toUpperCase())
+								}), /* @__PURE__ */ D("div", {
+									className: "flex gap-2",
+									children: [/* @__PURE__ */ E("div", {
+										className: "w-10 h-10 rounded border border-border cursor-pointer",
+										style: { backgroundColor: t },
+										onClick: () => {
+											document.getElementById(`color-${e}`)?.click();
+										}
+									}), /* @__PURE__ */ E(l, {
+										id: `color-${e}`,
+										type: "color",
+										value: t,
+										onChange: (t) => pe(e, t.target.value),
+										className: "flex-1 h-10"
+									})]
+								})]
+							}, e))
+						}) })] })
+					})]
+				}),
+				j && /* @__PURE__ */ D(r, { children: [/* @__PURE__ */ E(o, { children: /* @__PURE__ */ D(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ E(b, { className: "h-5 w-5" }), "Prévisualisation en temps réel"]
+				}) }), /* @__PURE__ */ E(i, { children: /* @__PURE__ */ D("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: [
+						/* @__PURE__ */ D("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ E("h4", {
+								className: "font-medium",
+								children: "Boutons"
+							}), /* @__PURE__ */ D("div", {
+								className: "flex flex-wrap gap-2",
+								children: [
+									/* @__PURE__ */ E(n, {
+										size: "sm",
+										children: "Primary"
+									}),
+									/* @__PURE__ */ E(n, {
+										variant: "secondary",
+										size: "sm",
+										children: "Secondary"
+									}),
+									/* @__PURE__ */ E(n, {
+										variant: "outline",
+										size: "sm",
+										children: "Outline"
+									}),
+									/* @__PURE__ */ E(n, {
+										variant: "destructive",
+										size: "sm",
+										children: "Destructive"
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ E("h4", {
+								className: "font-medium",
+								children: "Cards"
+							}), /* @__PURE__ */ D(r, {
+								className: "p-3",
+								children: [/* @__PURE__ */ E(s, {
+									className: "text-sm",
+									children: "Exemple de carte"
+								}), /* @__PURE__ */ E(a, {
+									className: "text-xs",
+									children: "Contenu de la carte avec le nouveau thème"
+								})]
+							})]
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ E("h4", {
+								className: "font-medium",
+								children: "Inputs"
+							}), /* @__PURE__ */ D("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ E(l, { placeholder: "Input normal" }), /* @__PURE__ */ E(l, {
+									placeholder: "Input avec erreur",
+									className: "border-destructive"
+								})]
+							})]
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ E("h4", {
+								className: "font-medium",
+								children: "Badges"
+							}), /* @__PURE__ */ D("div", {
+								className: "flex flex-wrap gap-1",
+								children: [
+									/* @__PURE__ */ E(t, { children: "Default" }),
+									/* @__PURE__ */ E(t, {
+										variant: "secondary",
+										children: "Secondary"
+									}),
+									/* @__PURE__ */ E(t, {
+										variant: "destructive",
+										children: "Destructive"
+									}),
+									/* @__PURE__ */ E(t, {
+										variant: "outline",
+										children: "Outline"
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "space-y-2",
+							children: [
+								/* @__PURE__ */ E("h4", {
+									className: "font-medium",
+									children: "Séparateur"
+								}),
+								/* @__PURE__ */ E(u, {}),
+								/* @__PURE__ */ E("p", {
+									className: "text-sm text-muted-foreground",
+									children: "Texte avec couleur muted"
+								})
+							]
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ E("h4", {
+								className: "font-medium",
+								children: "Progress"
+							}), /* @__PURE__ */ E("div", {
+								className: "w-full bg-muted rounded-full h-2",
+								children: /* @__PURE__ */ E("div", {
+									className: "bg-primary h-2 rounded-full",
+									style: { width: "60%" }
+								})
+							})]
+						})
+					]
+				}) })] })
+			]
+		})
+	});
+});
+A.displayName = "WakaThemeManager";
+//#endregion
+export { A as WakaThemeManager, k as themeManagerVariants };

package/dist/components/waka-thread-view/index.cjs.js

@@ -0,0 +1,18 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);function a(e){let t=Math.floor((new Date().getTime()-e.getTime())/1e3);if(t<60)return`just now`;let n=Math.floor(t/60);if(n<60)return`${n}m ago`;let r=Math.floor(n/60);if(r<24)return`${r}h ago`;let i=Math.floor(r/24);if(i<7)return`${i}d ago`;let a=Math.floor(i/7);return a<4?`${a}w ago`:e.toLocaleDateString()}function o(e){let t=e.replies?.length||0;return e.replies?.forEach(e=>{t+=o(e)}),t}function s(e){return e.split(` `).map(e=>e[0]).join(``).toUpperCase().slice(0,2)}function c({participant:e,size:n=`md`,className:r}){return(0,i.jsx)(`div`,{className:t.cn(`relative flex items-center justify-center rounded-full font-semibold flex-shrink-0`,{sm:`h-6 w-6 text-[10px]`,md:`h-8 w-8 text-xs`,lg:`h-10 w-10 text-sm`}[n],e.avatar?``:`bg-muted text-muted-foreground`,r),children:e.avatar?(0,i.jsx)(`img`,{src:e.avatar,alt:e.name,className:`h-full w-full rounded-full object-cover`}):s(e.name)})}function l({participants:e,max:t=4}){let n=e.slice(0,t),r=e.length-t;return(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(`div`,{className:`flex -space-x-2`,children:n.map(e=>(0,i.jsx)(c,{participant:e,size:`sm`,className:`ring-2 ring-background`},e.id))}),r>0&&(0,i.jsxs)(`span`,{className:`text-xs text-muted-foreground ml-1`,children:[`+`,r,` more`]})]})}function u({count:e,isExpanded:n,onClick:a}){return e===0?null:(0,i.jsxs)(`button`,{onClick:a,className:t.cn(`flex items-center gap-1.5 text-sm font-medium transition-colors`,`text-primary hover:text-primary/80`),children:[n?(0,i.jsx)(r.ChevronUp,{className:`h-4 w-4`}):(0,i.jsx)(r.ChevronDown,{className:`h-4 w-4`}),(0,i.jsxs)(`span`,{children:[e,` `,e===1?`reply`:`replies`]})]})}function d({message:e,depth:n,maxDepth:s,isCollapsed:l,onToggleCollapse:f,onReply:p,showReplyButton:m=!0}){let h=e.replies&&e.replies.length>0,g=h?o(e):0,_=n<s;return(0,i.jsxs)(`div`,{className:`group`,children:[(0,i.jsxs)(`div`,{className:t.cn(`flex gap-3 py-3 transition-colors`,n>0&&`hover:bg-accent/30 rounded-lg px-2 -mx-2`),children:[(0,i.jsx)(c,{participant:e.author,size:n===0?`lg`:`md`}),(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 flex-wrap`,children:[(0,i.jsx)(`span`,{className:`font-medium text-sm`,children:e.author.name}),(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:a(new Date(e.timestamp))}),e.edited&&(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground italic`,children:`(edited)`})]}),(0,i.jsx)(`p`,{className:`mt-1 text-sm text-foreground whitespace-pre-wrap`,children:e.content}),(0,i.jsxs)(`div`,{className:`mt-2 flex items-center gap-4`,children:[m&&p&&(0,i.jsxs)(`button`,{onClick:()=>p(e.id),className:`flex items-center gap-1 text-xs text-muted-foreground hover:text-primary transition-colors`,children:[(0,i.jsx)(r.Reply,{className:`h-3.5 w-3.5`}),(0,i.jsx)(`span`,{children:`Reply`})]}),h&&_&&(0,i.jsx)(u,{count:g,isExpanded:!l,onClick:()=>f(e.id)}),(0,i.jsx)(`button`,{className:`opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground transition-all`,children:(0,i.jsx)(r.MoreHorizontal,{className:`h-4 w-4`})})]})]})]}),h&&!l&&_&&(0,i.jsx)(`div`,{className:t.cn(`ml-4 pl-4 border-l-2 border-border/50`,`animate-thread-expand`),children:e.replies.map(e=>(0,i.jsx)(d,{message:e,depth:n+1,maxDepth:s,isCollapsed:!1,onToggleCollapse:f,onReply:p,showReplyButton:m},e.id))}),h&&!_&&(0,i.jsx)(`div`,{className:`ml-11 mt-1 text-xs text-muted-foreground`,children:(0,i.jsxs)(`span`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(r.MessageSquare,{className:`h-3 w-3`}),g,` nested `,g===1?`reply`:`replies`]})})]})}function f({currentUser:e,onSubmit:a,placeholder:o=`Write a reply...`,disabled:s=!1,replyingTo:l,onCancelReply:u}){let[d,f]=n.useState(``),p=n.useRef(null),m=e=>{e.preventDefault(),d.trim()&&!s&&(a(d.trim()),f(``))};return n.useEffect(()=>{p.current&&(p.current.style.height=`auto`,p.current.style.height=`${Math.min(p.current.scrollHeight,150)}px`)},[d]),(0,i.jsxs)(`form`,{onSubmit:m,className:`flex gap-3`,children:[e&&(0,i.jsx)(c,{participant:e,size:`md`}),(0,i.jsxs)(`div`,{className:`flex-1 relative`,children:[l&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2 text-xs text-muted-foreground mb-1`,children:[(0,i.jsx)(r.Reply,{className:`h-3 w-3`}),(0,i.jsx)(`span`,{children:`Replying to thread`}),(0,i.jsx)(`button`,{type:`button`,onClick:u,className:`hover:text-foreground`,children:`Cancel`})]}),(0,i.jsxs)(`div`,{className:`relative flex items-end gap-2 rounded-lg border bg-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2`,children:[(0,i.jsx)(`textarea`,{ref:p,value:d,onChange:e=>f(e.target.value),onKeyDown:e=>{e.key===`Enter`&&(e.metaKey||e.ctrlKey)&&m(e),e.key===`Escape`&&u&&u()},placeholder:o,disabled:s,rows:1,className:t.cn(`flex-1 resize-none bg-transparent px-3 py-2.5 text-sm`,`placeholder:text-muted-foreground focus:outline-none`,`disabled:cursor-not-allowed disabled:opacity-50`,`min-h-[40px] max-h-[150px]`)}),(0,i.jsx)(`button`,{type:`submit`,disabled:s||!d.trim(),className:t.cn(`flex-shrink-0 p-2.5 rounded-r-lg transition-colors`,`text-muted-foreground hover:text-primary`,`disabled:opacity-50 disabled:cursor-not-allowed`),children:(0,i.jsx)(r.Send,{className:`h-4 w-4`})})]}),(0,i.jsx)(`p`,{className:`mt-1 text-[10px] text-muted-foreground`,children:`Press Cmd+Enter to send`})]})]})}function p({thread:e,showParticipants:n,onFollowToggle:a,onRefresh:o}){return(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-4 pb-4 border-b`,children:[(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[e.title&&(0,i.jsx)(`h2`,{className:`text-lg font-semibold mb-2`,children:e.title}),(0,i.jsxs)(`div`,{className:`flex items-center gap-4 flex-wrap`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 text-sm text-muted-foreground`,children:[(0,i.jsx)(r.MessageSquare,{className:`h-4 w-4`}),(0,i.jsxs)(`span`,{children:[e.replyCount,` `,e.replyCount===1?`reply`:`replies`]})]}),n&&e.participants.length>0&&(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,i.jsx)(r.Users,{className:`h-4 w-4 text-muted-foreground`}),(0,i.jsx)(l,{participants:e.participants,max:4})]}),e.isClosed&&(0,i.jsxs)(`div`,{className:`flex items-center gap-1 text-sm text-muted-foreground`,children:[(0,i.jsx)(r.Lock,{className:`h-3.5 w-3.5`}),(0,i.jsx)(`span`,{children:`Closed`})]})]})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[e.hasNewUpdates&&o&&(0,i.jsxs)(`button`,{onClick:o,className:t.cn(`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm`,`bg-primary/10 text-primary hover:bg-primary/20 transition-colors`,`animate-pulse`),children:[(0,i.jsx)(r.RefreshCw,{className:`h-3.5 w-3.5`}),(0,i.jsx)(`span`,{children:`New updates`})]}),a&&(0,i.jsx)(`button`,{onClick:a,className:t.cn(`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors`,e.isFollowing?`bg-primary text-primary-foreground hover:bg-primary/90`:`bg-muted text-muted-foreground hover:bg-muted/80`),children:e.isFollowing?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.BellOff,{className:`h-3.5 w-3.5`}),(0,i.jsx)(`span`,{children:`Following`})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.Bell,{className:`h-3.5 w-3.5`}),(0,i.jsx)(`span`,{children:`Follow`})]})})]})]})}function m({thread:e,currentUser:a,onReply:o,onLoadMore:s,hasMoreReplies:c=!1,loading:l=!1,onFollowToggle:u,onRefresh:m,maxDepth:h=3,showParticipants:g=!0,enableReplies:_=!0,className:v}){let[y,b]=n.useState(new Set),[x,S]=n.useState(null);return(0,i.jsxs)(`div`,{className:t.cn(`flex flex-col`,v),children:[(0,i.jsx)(p,{thread:e,showParticipants:g,onFollowToggle:u,onRefresh:m}),(0,i.jsx)(`div`,{className:`py-4 border-b`,children:(0,i.jsx)(d,{message:e.parentMessage,depth:0,maxDepth:h,isCollapsed:y.has(e.parentMessage.id),onToggleCollapse:e=>{b(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},onReply:_&&!e.isClosed?e=>{S(e)}:void 0,showReplyButton:_&&!e.isClosed})}),c&&(0,i.jsx)(`div`,{className:`py-3 border-b`,children:(0,i.jsx)(`button`,{onClick:s,disabled:l,className:t.cn(`flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors`,`disabled:opacity-50 disabled:cursor-not-allowed`),children:l?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.Loader2,{className:`h-4 w-4 animate-spin`}),(0,i.jsx)(`span`,{children:`Loading...`})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.ChevronDown,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{children:`Load more replies`})]})})}),l&&!c&&(0,i.jsx)(`div`,{className:`flex items-center justify-center py-8`,children:(0,i.jsx)(r.Loader2,{className:`h-6 w-6 animate-spin text-muted-foreground`})}),_&&!e.isClosed&&(0,i.jsx)(`div`,{className:`pt-4 mt-auto`,children:(0,i.jsx)(f,{currentUser:a,onSubmit:e=>{o?.(e,x||void 0),S(null)},placeholder:x?`Write a reply...`:`Add a comment...`,replyingTo:x||void 0,onCancelReply:x?()=>{S(null)}:void 0})}),e.isClosed&&(0,i.jsxs)(`div`,{className:`flex items-center justify-center gap-2 py-6 text-muted-foreground`,children:[(0,i.jsx)(r.Lock,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{className:`text-sm`,children:`This thread is closed for new replies`})]}),(0,i.jsx)(`style`,{children:`
+        @keyframes thread-expand {
+          0% {
+            opacity: 0;
+            max-height: 0;
+            transform: translateY(-8px);
+          }
+          100% {
+            opacity: 1;
+            max-height: 2000px;
+            transform: translateY(0);
+          }
+        }
+        .animate-thread-expand {
+          animation: thread-expand 0.3s ease-out forwards;
+          overflow: hidden;
+        }
+      `})]})}function h({initialThread:e,maxReplies:t=100}={}){let[r,i]=n.useState(e||null),[a,o]=n.useState(!1),[s,c]=n.useState(new Set),l=n.useCallback(e=>{c(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]),u=n.useCallback(e=>s.has(e),[s]);return{thread:r,loading:a,collapsedThreads:s,toggleCollapse:l,addReply:n.useCallback((e,n)=>{if(!r)return;let a={id:`reply-${Date.now()}`,author:r.participants[0]||{id:`current-user`,name:`You`},content:e,timestamp:new Date,replies:[]},o=(e,n)=>!n||e.id===n?{...e,replies:[...e.replies||[],a].slice(-t)}:e.replies?{...e,replies:e.replies.map(e=>o(e,n))}:e;i(e=>e&&{...e,parentMessage:o(e.parentMessage,n),replyCount:e.replyCount+1})},[r,t]),setThread:n.useCallback(e=>{i(e)},[]),toggleFollow:n.useCallback(()=>{i(e=>e&&{...e,isFollowing:!e.isFollowing})},[]),setHasNewUpdates:n.useCallback(e=>{i(t=>t&&{...t,hasNewUpdates:e})},[]),setLoading:o,isCollapsed:u}}exports.default=m,exports.useThreadView=h;