@burdenoff/microfe-comradecircle 2026.704.1 → 2026.704.3

package/dist/comradecircle/components/Avatar.js

@@ -1,35 +1,70 @@
 import { cn as e } from "../utils/cn.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { FileImage as t } from "./FileImage.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/comradecircle/components/Avatar.tsx
-var r = {
+var i = {
 	xs: "h-6 w-6 text-[0.6rem]",
 	sm: "h-8 w-8 text-xs",
 	md: "h-10 w-10 text-sm",
 	lg: "h-14 w-14 text-lg",
-	xl: "h-20 w-20 text-2xl"
-}, i = {
+	xl: "h-20 w-20 text-2xl",
+	"2xl": "h-28 w-28 text-4xl"
+}, a = {
 	ONLINE: "bg-status-success-text",
 	AWAY: "bg-status-warning-text",
 	BUSY: "bg-status-error-text",
 	OFFLINE: "bg-text-tertiary"
-};
-function a(e) {
+}, o = {
+	xs: "h-2 w-2",
+	sm: "h-2.5 w-2.5",
+	md: "h-2.5 w-2.5",
+	lg: "h-3 w-3",
+	xl: "h-3.5 w-3.5",
+	"2xl": "h-4 w-4"
+}, s = [
+	"bg-blue-500/20 text-blue-700 dark:text-blue-200",
+	"bg-violet-500/20 text-violet-700 dark:text-violet-200",
+	"bg-emerald-500/20 text-emerald-700 dark:text-emerald-200",
+	"bg-amber-500/20 text-amber-700 dark:text-amber-100",
+	"bg-rose-500/20 text-rose-700 dark:text-rose-200",
+	"bg-cyan-500/20 text-cyan-700 dark:text-cyan-200",
+	"bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-200",
+	"bg-teal-500/20 text-teal-700 dark:text-teal-200"
+];
+function c(e) {
+	if (!e) return s[0];
+	let t = 0;
+	for (let n = 0; n < e.length; n += 1) t = t * 31 + e.charCodeAt(n) | 0;
+	return s[Math.abs(t) % s.length];
+}
+function l(e) {
 	if (!e) return "?";
 	let t = e.trim().split(/\s+/).filter(Boolean);
 	return t.length === 0 ? "?" : t.length === 1 ? t[0].slice(0, 2).toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
 }
-var o = ({ name: o, size: s = "md", presence: c, className: l }) => /* @__PURE__ */ n("span", {
-	className: e("relative inline-flex shrink-0", l),
-	children: [/* @__PURE__ */ t("span", {
+var u = ({ name: s, size: u = "md", presence: d, fileId: f, seed: p, ring: m = !1, className: h }) => {
+	let g = /* @__PURE__ */ n("span", {
 		"aria-hidden": "true",
-		className: e("inline-flex items-center justify-center rounded-full bg-[var(--color-accent-soft)] font-semibold text-text-primary ring-1 ring-border-seam", r[s]),
-		children: a(o)
-	}), c && /* @__PURE__ */ t("span", {
-		className: e("absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full ring-2 ring-bg-surface", i[c], c === "ONLINE" && "motion-safe:animate-vc-glow-pulse"),
-		"aria-label": `Presence: ${c.toLowerCase()}`
-	})]
-});
+		className: e("flex h-full w-full items-center justify-center rounded-full font-semibold", c(p ?? s), i[u]),
+		children: l(s)
+	});
+	return /* @__PURE__ */ r("span", {
+		className: e("relative inline-flex shrink-0", h),
+		children: [/* @__PURE__ */ n("span", {
+			className: e("inline-flex items-center justify-center overflow-hidden rounded-full", m ? "ring-2 ring-[var(--color-accent-soft)] shadow-[0_0_0_4px_var(--color-accent-soft)]" : "ring-1 ring-border-seam", i[u]),
+			children: f ? /* @__PURE__ */ n(t, {
+				fileId: f,
+				alt: s ?? "Avatar",
+				className: "h-full w-full rounded-full",
+				fallback: g
+			}) : g
+		}), d && /* @__PURE__ */ n("span", {
+			className: e("absolute -bottom-0.5 -right-0.5 rounded-full ring-2 ring-bg-surface", o[u], a[d], d === "ONLINE" && "motion-safe:animate-vc-glow-pulse"),
+			"aria-label": `Presence: ${d.toLowerCase()}`
+		})]
+	});
+};
 //#endregion
-export { o as Avatar };
+export { u as Avatar };
 
 //# sourceMappingURL=Avatar.js.map

package/dist/comradecircle/components/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/comradecircle/components/Avatar.tsx"],"sourcesContent":["/**\n * Avatar — initials-based, token-only avatar with an optional presence dot.\n * @module comradecircle/components\n *\n * File-backed avatars are not rendered here: in this subgraph `File` resolves\n * `id` only (no URL), so we render deterministic initials on the brand\n * accent-soft tint. Clean, theme-aware, and never a broken image.\n */\n\nimport type { FC } from 'react';\nimport { cn } from '../utils/cn';\nimport type { ComPresence } from '../types';\n\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst sizeClass: Record<AvatarSize, string> = {\n  xs: 'h-6 w-6 text-[0.6rem]',\n  sm: 'h-8 w-8 text-xs',\n  md: 'h-10 w-10 text-sm',\n  lg: 'h-14 w-14 text-lg',\n  xl: 'h-20 w-20 text-2xl',\n};\n\nconst presenceDot: Record<ComPresence, string> = {\n  ONLINE: 'bg-status-success-text',\n  AWAY: 'bg-status-warning-text',\n  BUSY: 'bg-status-error-text',\n  OFFLINE: 'bg-text-tertiary',\n};\n\nexport function initialsOf(name: string | null | undefined): string {\n  if (!name) return '?';\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return '?';\n  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase();\n  return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase();\n}\n\ninterface AvatarProps {\n  name?: string | null;\n  size?: AvatarSize;\n  presence?: ComPresence | null;\n  className?: string;\n}\n\nexport const Avatar: FC<AvatarProps> = ({ name, size = 'md', presence, className }) => {\n  return (\n    <span className={cn('relative inline-flex shrink-0', className)}>\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'inline-flex items-center justify-center rounded-full bg-[var(--color-accent-soft)] font-semibold text-text-primary ring-1 ring-border-seam',\n          sizeClass[size]\n        )}\n      >\n        {initialsOf(name)}\n      </span>\n      {presence && (\n        <span\n          className={cn(\n            'absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full ring-2 ring-bg-surface',\n            presenceDot[presence],\n            presence === 'ONLINE' && 'motion-safe:animate-vc-glow-pulse'\n          )}\n          aria-label={`Presence: ${presence.toLowerCase()}`}\n        />\n      )}\n    </span>\n  );\n};\n"],"mappings":";;;AAeA,IAAM,IAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAA2C;CAC/C,QAAQ;CACR,MAAM;CACN,MAAM;CACN,SAAS;CACV;AAED,SAAgB,EAAW,GAAyC;AAClE,KAAI,CAAC,EAAM,QAAO;CAClB,IAAM,IAAQ,EAAK,MAAM,CAAC,MAAM,MAAM,CAAC,OAAO,QAAQ;AAGtD,QAFI,EAAM,WAAW,IAAU,MAC3B,EAAM,WAAW,IAAU,EAAM,GAAI,MAAM,GAAG,EAAE,CAAC,aAAa,IAC1D,EAAM,GAAI,KAAM,EAAM,EAAM,SAAS,GAAI,IAAK,aAAa;;AAUrE,IAAa,KAA2B,EAAE,SAAM,UAAO,MAAM,aAAU,mBAEnE,kBAAC,QAAD;CAAM,WAAW,EAAG,iCAAiC,EAAU;WAA/D,CACE,kBAAC,QAAD;EACE,eAAY;EACZ,WAAW,EACT,8IACA,EAAU,GACX;YAEA,EAAW,EAAK;EACZ,CAAA,EACN,KACC,kBAAC,QAAD;EACE,WAAW,EACT,mFACA,EAAY,IACZ,MAAa,YAAY,oCAC1B;EACD,cAAY,aAAa,EAAS,aAAa;EAC/C,CAAA,CAEC"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/comradecircle/components/Avatar.tsx"],"sourcesContent":["/**\n * Avatar — initials or image avatar with a deterministic tint + presence dot.\n * @module comradecircle/components\n *\n * When a wspace-files-svc `fileId` is present the image is rendered; otherwise\n * we show initials on a per-identity tint (hashed from the name) so grids of\n * avatars read as distinct, colourful, and alive — while staying theme-aware\n * (each tint ships a light + dark text pairing). An optional presence dot and a\n * soft accent ring round out the treatment.\n */\n\nimport type { FC } from 'react';\nimport { cn } from '../utils/cn';\nimport { FileImage } from './FileImage';\nimport type { ComPresence } from '../types';\n\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nconst sizeClass: Record<AvatarSize, string> = {\n  xs: 'h-6 w-6 text-[0.6rem]',\n  sm: 'h-8 w-8 text-xs',\n  md: 'h-10 w-10 text-sm',\n  lg: 'h-14 w-14 text-lg',\n  xl: 'h-20 w-20 text-2xl',\n  '2xl': 'h-28 w-28 text-4xl',\n};\n\nconst presenceDot: Record<ComPresence, string> = {\n  ONLINE: 'bg-status-success-text',\n  AWAY: 'bg-status-warning-text',\n  BUSY: 'bg-status-error-text',\n  OFFLINE: 'bg-text-tertiary',\n};\n\nconst presenceDotSize: Record<AvatarSize, string> = {\n  xs: 'h-2 w-2',\n  sm: 'h-2.5 w-2.5',\n  md: 'h-2.5 w-2.5',\n  lg: 'h-3 w-3',\n  xl: 'h-3.5 w-3.5',\n  '2xl': 'h-4 w-4',\n};\n\n// Decorative per-identity tints. Not semantic status — just a stable, colourful\n// identity cue. Each ships a dark-mode and light-mode readable text pairing so\n// initials stay legible under either theme.\nconst TINTS = [\n  'bg-blue-500/20 text-blue-700 dark:text-blue-200',\n  'bg-violet-500/20 text-violet-700 dark:text-violet-200',\n  'bg-emerald-500/20 text-emerald-700 dark:text-emerald-200',\n  'bg-amber-500/20 text-amber-700 dark:text-amber-100',\n  'bg-rose-500/20 text-rose-700 dark:text-rose-200',\n  'bg-cyan-500/20 text-cyan-700 dark:text-cyan-200',\n  'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-200',\n  'bg-teal-500/20 text-teal-700 dark:text-teal-200',\n] as const;\n\nfunction tintFor(seed: string | null | undefined): string {\n  if (!seed) return TINTS[0]!;\n  let hash = 0;\n  for (let i = 0; i < seed.length; i += 1) hash = (hash * 31 + seed.charCodeAt(i)) | 0;\n  return TINTS[Math.abs(hash) % TINTS.length]!;\n}\n\nexport function initialsOf(name: string | null | undefined): string {\n  if (!name) return '?';\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return '?';\n  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase();\n  return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase();\n}\n\ninterface AvatarProps {\n  name?: string | null;\n  size?: AvatarSize;\n  presence?: ComPresence | null;\n  /** wspace-files-svc file id — when set + resolvable, renders the image. */\n  fileId?: string | null;\n  /** Stable seed for the tint (defaults to name). Pass an id for stability. */\n  seed?: string | null;\n  /** Add a soft accent ring + glow (hero/profile treatment). */\n  ring?: boolean;\n  className?: string;\n}\n\nexport const Avatar: FC<AvatarProps> = ({\n  name,\n  size = 'md',\n  presence,\n  fileId,\n  seed,\n  ring = false,\n  className,\n}) => {\n  const initials = (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        'flex h-full w-full items-center justify-center rounded-full font-semibold',\n        tintFor(seed ?? name),\n        sizeClass[size]\n      )}\n    >\n      {initialsOf(name)}\n    </span>\n  );\n\n  return (\n    <span className={cn('relative inline-flex shrink-0', className)}>\n      <span\n        className={cn(\n          'inline-flex items-center justify-center overflow-hidden rounded-full',\n          ring\n            ? 'ring-2 ring-[var(--color-accent-soft)] shadow-[0_0_0_4px_var(--color-accent-soft)]'\n            : 'ring-1 ring-border-seam',\n          sizeClass[size]\n        )}\n      >\n        {fileId ? (\n          <FileImage\n            fileId={fileId}\n            alt={name ?? 'Avatar'}\n            className=\"h-full w-full rounded-full\"\n            fallback={initials}\n          />\n        ) : (\n          initials\n        )}\n      </span>\n      {presence && (\n        <span\n          className={cn(\n            'absolute -bottom-0.5 -right-0.5 rounded-full ring-2 ring-bg-surface',\n            presenceDotSize[size],\n            presenceDot[presence],\n            presence === 'ONLINE' && 'motion-safe:animate-vc-glow-pulse'\n          )}\n          aria-label={`Presence: ${presence.toLowerCase()}`}\n        />\n      )}\n    </span>\n  );\n};\n"],"mappings":";;;;AAkBA,IAAM,IAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACR,EAEK,IAA2C;CAC/C,QAAQ;CACR,MAAM;CACN,MAAM;CACN,SAAS;CACV,EAEK,IAA8C;CAClD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACR,EAKK,IAAQ;CACZ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,EAAQ,GAAyC;AACxD,KAAI,CAAC,EAAM,QAAO,EAAM;CACxB,IAAI,IAAO;AACX,MAAK,IAAI,IAAI,GAAG,IAAI,EAAK,QAAQ,KAAK,EAAG,KAAQ,IAAO,KAAK,EAAK,WAAW,EAAE,GAAI;AACnF,QAAO,EAAM,KAAK,IAAI,EAAK,GAAG,EAAM;;AAGtC,SAAgB,EAAW,GAAyC;AAClE,KAAI,CAAC,EAAM,QAAO;CAClB,IAAM,IAAQ,EAAK,MAAM,CAAC,MAAM,MAAM,CAAC,OAAO,QAAQ;AAGtD,QAFI,EAAM,WAAW,IAAU,MAC3B,EAAM,WAAW,IAAU,EAAM,GAAI,MAAM,GAAG,EAAE,CAAC,aAAa,IAC1D,EAAM,GAAI,KAAM,EAAM,EAAM,SAAS,GAAI,IAAK,aAAa;;AAgBrE,IAAa,KAA2B,EACtC,SACA,UAAO,MACP,aACA,WACA,SACA,UAAO,IACP,mBACI;CACJ,IAAM,IACJ,kBAAC,QAAD;EACE,eAAY;EACZ,WAAW,EACT,6EACA,EAAQ,KAAQ,EAAK,EACrB,EAAU,GACX;YAEA,EAAW,EAAK;EACZ,CAAA;AAGT,QACE,kBAAC,QAAD;EAAM,WAAW,EAAG,iCAAiC,EAAU;YAA/D,CACE,kBAAC,QAAD;GACE,WAAW,EACT,wEACA,IACI,uFACA,2BACJ,EAAU,GACX;aAEA,IACC,kBAAC,GAAD;IACU;IACR,KAAK,KAAQ;IACb,WAAU;IACV,UAAU;IACV,CAAA,GAEF;GAEG,CAAA,EACN,KACC,kBAAC,QAAD;GACE,WAAW,EACT,uEACA,EAAgB,IAChB,EAAY,IACZ,MAAa,YAAY,oCAC1B;GACD,cAAY,aAAa,EAAS,aAAa;GAC/C,CAAA,CAEC"}

package/dist/comradecircle/components/AvatarUploadField.js

@@ -0,0 +1,91 @@
+import { cn as e } from "../utils/cn.js";
+import { FILE_FOLDERS as t, uploadImageToFiles as n } from "../hooks/useFiles.js";
+import { Avatar as r } from "./Avatar.js";
+import { describeError as i, notify as a } from "../lib/toast.js";
+import { useId as o, useRef as s, useState as c } from "react";
+import { Camera as l, Loader2 as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/comradecircle/components/AvatarUploadField.tsx
+var p = 5 * 1024 * 1024;
+function m({ fileId: m, name: h, onUploaded: g, label: _ = "Upload avatar", disabled: v = !1 }) {
+	let y = s(null), b = o(), [x, S] = c(!1), [C, w] = c(null);
+	return /* @__PURE__ */ f("div", {
+		className: "flex items-center gap-4",
+		children: [/* @__PURE__ */ f("button", {
+			type: "button",
+			onClick: () => y.current?.click(),
+			disabled: v || x,
+			"aria-label": _,
+			className: "group relative h-16 w-16 shrink-0 rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:cursor-not-allowed",
+			children: [
+				C ? /* @__PURE__ */ d("img", {
+					src: C,
+					alt: h ?? "Avatar",
+					className: "h-16 w-16 rounded-full object-cover ring-1 ring-border-seam"
+				}) : /* @__PURE__ */ d(r, {
+					name: h,
+					fileId: m,
+					size: "lg"
+				}),
+				/* @__PURE__ */ d("span", {
+					className: "absolute inset-0 flex items-center justify-center rounded-full bg-bg-canvas/60 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100",
+					children: /* @__PURE__ */ d(l, { className: "h-5 w-5 text-text-primary" })
+				}),
+				x && /* @__PURE__ */ d("span", {
+					className: "absolute inset-0 flex items-center justify-center rounded-full bg-bg-canvas/70",
+					children: /* @__PURE__ */ d(u, { className: "h-5 w-5 animate-spin text-text-primary" })
+				})
+			]
+		}), /* @__PURE__ */ f("div", { children: [
+			/* @__PURE__ */ d("input", {
+				ref: y,
+				id: b,
+				type: "file",
+				accept: "image/*",
+				className: "sr-only",
+				onChange: async (e) => {
+					let r = e.target.files?.[0];
+					if (e.target.value = "", r) {
+						if (!r.type.startsWith("image/")) {
+							a.error("Unsupported file", "Please choose an image.");
+							return;
+						}
+						if (r.size > p) {
+							a.error("Image too large", "Please choose an image under 5 MB.");
+							return;
+						}
+						S(!0);
+						try {
+							let e = await n(r, t.avatars);
+							w(e.url), g(e.id), a.success("Avatar updated");
+						} catch (e) {
+							a.error("Upload failed", i(e));
+						} finally {
+							S(!1);
+						}
+					}
+				},
+				disabled: v || x
+			}),
+			/* @__PURE__ */ f("button", {
+				type: "button",
+				onClick: () => y.current?.click(),
+				disabled: v || x,
+				className: e("inline-flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken", (v || x) && "cursor-not-allowed opacity-60"),
+				children: [
+					/* @__PURE__ */ d(l, { className: "h-4 w-4" }),
+					" ",
+					_
+				]
+			}),
+			/* @__PURE__ */ d("p", {
+				className: "mt-1 text-xs text-text-tertiary",
+				children: "PNG or JPG, up to 5 MB."
+			})
+		] })]
+	});
+}
+//#endregion
+export { m as AvatarUploadField };
+
+//# sourceMappingURL=AvatarUploadField.js.map

package/dist/comradecircle/components/AvatarUploadField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarUploadField.js","names":[],"sources":["../../../src/comradecircle/components/AvatarUploadField.tsx"],"sourcesContent":["/**\n * AvatarUploadField — upload a circular avatar image to wspace-files-svc.\n * @module comradecircle/components\n *\n * On select, uploads via {@link uploadImageToFiles} and hands the resulting file\n * id back to the caller (persisted as avatarFileId). Shows the current avatar\n * (by file id) or the freshly-uploaded preview; falls back to initials.\n */\n\nimport { useId, useRef, useState } from 'react';\nimport { Camera, Loader2 } from 'lucide-react';\nimport { cn } from '../utils/cn';\nimport { Avatar } from './Avatar';\nimport { uploadImageToFiles, FILE_FOLDERS } from '../hooks/useFiles';\nimport { notify, describeError } from '../lib/toast';\n\ninterface AvatarUploadFieldProps {\n  /** Current avatar file id (persisted). */\n  fileId?: string | null;\n  /** Name used for the initials fallback. */\n  name?: string | null;\n  /** Called with the new file id after a successful upload. */\n  onUploaded: (fileId: string) => void;\n  label?: string;\n  disabled?: boolean;\n}\n\nconst MAX_BYTES = 5 * 1024 * 1024;\n\nexport function AvatarUploadField({\n  fileId,\n  name,\n  onUploaded,\n  label = 'Upload avatar',\n  disabled = false,\n}: AvatarUploadFieldProps) {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const inputId = useId();\n  const [uploading, setUploading] = useState(false);\n  const [previewUrl, setPreviewUrl] = useState<string | null>(null);\n\n  const handleSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    event.target.value = '';\n    if (!file) return;\n    if (!file.type.startsWith('image/')) {\n      notify.error('Unsupported file', 'Please choose an image.');\n      return;\n    }\n    if (file.size > MAX_BYTES) {\n      notify.error('Image too large', 'Please choose an image under 5 MB.');\n      return;\n    }\n    setUploading(true);\n    try {\n      const uploaded = await uploadImageToFiles(file, FILE_FOLDERS.avatars);\n      setPreviewUrl(uploaded.url);\n      onUploaded(uploaded.id);\n      notify.success('Avatar updated');\n    } catch (err) {\n      notify.error('Upload failed', describeError(err));\n    } finally {\n      setUploading(false);\n    }\n  };\n\n  return (\n    <div className=\"flex items-center gap-4\">\n      <button\n        type=\"button\"\n        onClick={() => inputRef.current?.click()}\n        disabled={disabled || uploading}\n        aria-label={label}\n        className=\"group relative h-16 w-16 shrink-0 rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:cursor-not-allowed\"\n      >\n        {previewUrl ? (\n          <img\n            src={previewUrl}\n            alt={name ?? 'Avatar'}\n            className=\"h-16 w-16 rounded-full object-cover ring-1 ring-border-seam\"\n          />\n        ) : (\n          <Avatar name={name} fileId={fileId} size=\"lg\" />\n        )}\n        {/* Hover overlay: click the image directly to change it. */}\n        <span className=\"absolute inset-0 flex items-center justify-center rounded-full bg-bg-canvas/60 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100\">\n          <Camera className=\"h-5 w-5 text-text-primary\" />\n        </span>\n        {uploading && (\n          <span className=\"absolute inset-0 flex items-center justify-center rounded-full bg-bg-canvas/70\">\n            <Loader2 className=\"h-5 w-5 animate-spin text-text-primary\" />\n          </span>\n        )}\n      </button>\n      <div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          accept=\"image/*\"\n          className=\"sr-only\"\n          onChange={handleSelect}\n          disabled={disabled || uploading}\n        />\n        <button\n          type=\"button\"\n          onClick={() => inputRef.current?.click()}\n          disabled={disabled || uploading}\n          className={cn(\n            'inline-flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken',\n            (disabled || uploading) && 'cursor-not-allowed opacity-60'\n          )}\n        >\n          <Camera className=\"h-4 w-4\" /> {label}\n        </button>\n        <p className=\"mt-1 text-xs text-text-tertiary\">PNG or JPG, up to 5 MB.</p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AA2BA,IAAM,IAAY,IAAI,OAAO;AAE7B,SAAgB,EAAkB,EAChC,WACA,SACA,eACA,WAAQ,iBACR,cAAW,MACc;CACzB,IAAM,IAAW,EAAgC,KAAK,EAChD,IAAU,GAAO,EACjB,CAAC,GAAW,KAAgB,EAAS,GAAM,EAC3C,CAAC,GAAY,KAAiB,EAAwB,KAAK;AA2BjE,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAS,SAAS,OAAO;GACxC,UAAU,KAAY;GACtB,cAAY;GACZ,WAAU;aALZ;IAOG,IACC,kBAAC,OAAD;KACE,KAAK;KACL,KAAK,KAAQ;KACb,WAAU;KACV,CAAA,GAEF,kBAAC,GAAD;KAAc;KAAc;KAAQ,MAAK;KAAO,CAAA;IAGlD,kBAAC,QAAD;KAAM,WAAU;eACd,kBAAC,GAAD,EAAQ,WAAU,6BAA8B,CAAA;KAC3C,CAAA;IACN,KACC,kBAAC,QAAD;KAAM,WAAU;eACd,kBAAC,GAAD,EAAS,WAAU,0CAA2C,CAAA;KACzD,CAAA;IAEF;MACT,kBAAC,OAAD,EAAA,UAAA;GACE,kBAAC,SAAD;IACE,KAAK;IACL,IAAI;IACJ,MAAK;IACL,QAAO;IACP,WAAU;IACV,UA5Da,OAAO,MAA+C;KACzE,IAAM,IAAO,EAAM,OAAO,QAAQ;AAClC,WAAM,OAAO,QAAQ,IAChB,GACL;UAAI,CAAC,EAAK,KAAK,WAAW,SAAS,EAAE;AACnC,SAAO,MAAM,oBAAoB,0BAA0B;AAC3D;;AAEF,UAAI,EAAK,OAAO,GAAW;AACzB,SAAO,MAAM,mBAAmB,qCAAqC;AACrE;;AAEF,QAAa,GAAK;AAClB,UAAI;OACF,IAAM,IAAW,MAAM,EAAmB,GAAM,EAAa,QAAQ;AAGrE,OAFA,EAAc,EAAS,IAAI,EAC3B,EAAW,EAAS,GAAG,EACvB,EAAO,QAAQ,iBAAiB;eACzB,GAAK;AACZ,SAAO,MAAM,iBAAiB,EAAc,EAAI,CAAC;gBACzC;AACR,SAAa,GAAM;;;;IAwCf,UAAU,KAAY;IACtB,CAAA;GACF,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAS,SAAS,OAAO;IACxC,UAAU,KAAY;IACtB,WAAW,EACT,6KACC,KAAY,MAAc,gCAC5B;cAPH;KASE,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;;KAAE;KACzB;;GACT,kBAAC,KAAD;IAAG,WAAU;cAAkC;IAA2B,CAAA;GACtE,EAAA,CAAA,CACF"}

package/dist/comradecircle/components/CircleCard.js

@@ -1,110 +1,113 @@
-import { useComJoinCircle as e, useComLeaveCircle as t } from "../hooks/useComradeCircleApi.js";
+import { cn as e } from "../utils/cn.js";
+import { useComJoinCircle as t, useComLeaveCircle as n } from "../hooks/useComradeCircleApi.js";
 import "../hooks/index.js";
-import { Avatar as n } from "./Avatar.js";
-import { describeError as r, notify as i } from "../lib/toast.js";
-import { formatEnumLabel as a, formatNumber as o } from "../utils/formatters.js";
-import { StatusBadge as s } from "./StatusBadge.js";
-import { Hash as c, Users as l } from "lucide-react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Button as p, GlassCard as m } from "@burdenoff/fe-libs/ui";
+import { Avatar as r } from "./Avatar.js";
+import { describeError as i, notify as a } from "../lib/toast.js";
+import { formatEnumLabel as o, formatNumber as s } from "../utils/formatters.js";
+import { StatusBadge as c } from "./StatusBadge.js";
+import { Hash as l, Users as u } from "lucide-react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Button as m, GlassCard as h } from "@burdenoff/fe-libs/ui";
 //#region src/comradecircle/components/CircleCard.tsx
-function h({ circle: h, membership: g, onOpen: _ }) {
-	let v = e(), y = t(), b = g?.status === "ACTIVE";
-	return /* @__PURE__ */ f(m, {
+function g({ circle: g, membership: _, onOpen: v }) {
+	let y = t(), b = n(), x = _?.status === "ACTIVE";
+	return /* @__PURE__ */ p(h, {
 		treatment: "plain",
-		className: "flex flex-col p-5",
+		className: e("flex flex-col p-5 transition-all duration-200 motion-safe:hover:-translate-y-0.5 hover:border-[var(--color-accent-soft)]", (_?.role === "OWNER" || _?.role === "ADMIN") && "ring-1 ring-[var(--color-accent-soft)]"),
 		children: [
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				className: "flex items-start gap-3",
-				children: [/* @__PURE__ */ d(n, {
-					name: h.name,
-					size: "lg"
-				}), /* @__PURE__ */ f("div", {
+				children: [/* @__PURE__ */ f(r, {
+					name: g.name,
+					seed: g.id,
+					size: "lg",
+					fileId: g.avatar?.id
+				}), /* @__PURE__ */ p("div", {
 					className: "min-w-0 flex-1",
 					children: [
-						/* @__PURE__ */ d("button", {
+						/* @__PURE__ */ f("button", {
 							type: "button",
-							onClick: _,
+							onClick: v,
 							className: "truncate text-left text-base font-semibold text-text-primary hover:underline",
-							children: h.name
+							children: g.name
 						}),
-						h.topic && /* @__PURE__ */ d("p", {
+						g.topic && /* @__PURE__ */ f("p", {
 							className: "truncate text-sm text-text-secondary",
-							children: h.topic
+							children: g.topic
 						}),
-						/* @__PURE__ */ f("div", {
+						/* @__PURE__ */ p("div", {
 							className: "mt-1.5 flex flex-wrap items-center gap-1.5",
 							children: [
-								/* @__PURE__ */ d(s, { status: h.visibility }),
-								h.status !== "ACTIVE" && /* @__PURE__ */ d(s, { status: h.status }),
-								b && g && /* @__PURE__ */ d(s, { status: g.role })
+								/* @__PURE__ */ f(c, { status: g.visibility }),
+								g.status !== "ACTIVE" && /* @__PURE__ */ f(c, { status: g.status }),
+								x && _ && /* @__PURE__ */ f(c, { status: _.role })
 							]
 						})
 					]
 				})]
 			}),
-			h.description && /* @__PURE__ */ d("p", {
+			g.description && /* @__PURE__ */ f("p", {
 				className: "mt-3 line-clamp-2 text-sm text-text-secondary",
-				children: h.description
+				children: g.description
 			}),
-			h.tags.length > 0 && /* @__PURE__ */ d("div", {
+			g.tags.length > 0 && /* @__PURE__ */ f("div", {
 				className: "mt-3 flex flex-wrap gap-1.5",
-				children: h.tags.slice(0, 4).map((e) => /* @__PURE__ */ f("span", {
+				children: g.tags.slice(0, 4).map((e) => /* @__PURE__ */ p("span", {
 					className: "rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
 					children: ["#", e]
 				}, e))
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				className: "mt-4 flex items-center justify-between gap-3 border-t border-border-seam pt-3",
-				children: [/* @__PURE__ */ f("div", {
+				children: [/* @__PURE__ */ p("div", {
 					className: "flex items-center gap-3 text-xs text-text-tertiary",
-					children: [/* @__PURE__ */ f("span", {
+					children: [/* @__PURE__ */ p("span", {
 						className: "inline-flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ d(l, { className: "h-3.5 w-3.5" }),
+							/* @__PURE__ */ f(u, { className: "h-3.5 w-3.5" }),
 							" ",
-							o(h.memberCount)
+							s(g.memberCount)
 						]
-					}), /* @__PURE__ */ f("span", {
+					}), /* @__PURE__ */ p("span", {
 						className: "inline-flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ d(c, { className: "h-3.5 w-3.5" }),
+							/* @__PURE__ */ f(l, { className: "h-3.5 w-3.5" }),
 							" ",
-							h.channels?.length ?? 0
+							g.channels?.length ?? 0
 						]
 					})]
-				}), /* @__PURE__ */ d("div", {
+				}), /* @__PURE__ */ f("div", {
 					className: "flex items-center gap-2",
-					children: b ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(p, {
+					children: x ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(m, {
 						size: "sm",
 						variant: "outline",
 						onClick: async () => {
 							try {
-								await y.mutateAsync(h.id), i.success("Left circle", `You have left ${h.name}.`);
+								await b.mutateAsync(g.id), a.success("Left circle", `You have left ${g.name}.`);
 							} catch (e) {
-								i.error("Could not leave", r(e));
+								a.error("Could not leave", i(e));
 							}
 						},
-						disabled: y.isPending,
+						disabled: b.isPending,
 						children: "Leave"
-					}), /* @__PURE__ */ d(p, {
+					}), /* @__PURE__ */ f(m, {
 						size: "sm",
-						onClick: _,
+						onClick: v,
 						children: "Open"
-					})] }) : h.status === "ACTIVE" ? /* @__PURE__ */ d(p, {
+					})] }) : g.status === "ACTIVE" ? /* @__PURE__ */ f(m, {
 						size: "sm",
 						onClick: async () => {
 							try {
-								await v.mutateAsync(h.id), i.success("Joined circle", `You are now a member of ${h.name}.`);
+								await y.mutateAsync(g.id), a.success("Joined circle", `You are now a member of ${g.name}.`);
 							} catch (e) {
-								i.error("Could not join", r(e));
+								a.error("Could not join", i(e));
 							}
 						},
-						disabled: v.isPending,
+						disabled: y.isPending,
 						children: "Join"
-					}) : /* @__PURE__ */ d("span", {
+					}) : /* @__PURE__ */ f("span", {
 						className: "text-xs text-text-tertiary",
-						children: a(h.status)
+						children: o(g.status)
 					})
 				})]
 			})
@@ -112,6 +115,6 @@ function h({ circle: h, membership: g, onOpen: _ }) {
 	});
 }
 //#endregion
-export { h as CircleCard };
+export { g as CircleCard };
 
 //# sourceMappingURL=CircleCard.js.map

package/dist/comradecircle/components/CircleCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircleCard.js","names":[],"sources":["../../../src/comradecircle/components/CircleCard.tsx"],"sourcesContent":["/**\n * CircleCard — a discovery/overview tile for a community circle.\n * @module comradecircle/components\n *\n * Writes `comJoinCircle` / `comLeaveCircle`. When the caller already belongs to\n * the circle the card shows their role and an Open action; otherwise a Join\n * action. Membership is supplied by the parent (which knows the caller's set).\n */\n\nimport { Users, Hash } from 'lucide-react';\nimport { GlassCard, Button } from '@burdenoff/fe-libs/ui';\nimport { Avatar } from './Avatar';\nimport { StatusBadge } from './StatusBadge';\nimport { useComJoinCircle, useComLeaveCircle } from '../hooks';\nimport { formatEnumLabel, formatNumber } from '../utils/formatters';\nimport { notify, describeError } from '../lib/toast';\nimport type { ComCircle, ComMembership } from '../types';\n\ninterface CircleCardProps {\n  circle: ComCircle;\n  membership?: ComMembership | null;\n  onOpen: () => void;\n}\n\nexport function CircleCard({ circle, membership, onOpen }: CircleCardProps) {\n  const join = useComJoinCircle();\n  const leave = useComLeaveCircle();\n  const isMember = membership?.status === 'ACTIVE';\n\n  const handleJoin = async () => {\n    try {\n      await join.mutateAsync(circle.id);\n      notify.success('Joined circle', `You are now a member of ${circle.name}.`);\n    } catch (err) {\n      notify.error('Could not join', describeError(err));\n    }\n  };\n\n  const handleLeave = async () => {\n    try {\n      await leave.mutateAsync(circle.id);\n      notify.success('Left circle', `You have left ${circle.name}.`);\n    } catch (err) {\n      notify.error('Could not leave', describeError(err));\n    }\n  };\n\n  return (\n    <GlassCard treatment=\"plain\" className=\"flex flex-col p-5\">\n      <div className=\"flex items-start gap-3\">\n        <Avatar name={circle.name} size=\"lg\" />\n        <div className=\"min-w-0 flex-1\">\n          <button\n            type=\"button\"\n            onClick={onOpen}\n            className=\"truncate text-left text-base font-semibold text-text-primary hover:underline\"\n          >\n            {circle.name}\n          </button>\n          {circle.topic && <p className=\"truncate text-sm text-text-secondary\">{circle.topic}</p>}\n          <div className=\"mt-1.5 flex flex-wrap items-center gap-1.5\">\n            <StatusBadge status={circle.visibility} />\n            {circle.status !== 'ACTIVE' && <StatusBadge status={circle.status} />}\n            {isMember && membership && <StatusBadge status={membership.role} />}\n          </div>\n        </div>\n      </div>\n\n      {circle.description && (\n        <p className=\"mt-3 line-clamp-2 text-sm text-text-secondary\">{circle.description}</p>\n      )}\n\n      {circle.tags.length > 0 && (\n        <div className=\"mt-3 flex flex-wrap gap-1.5\">\n          {circle.tags.slice(0, 4).map((tag) => (\n            <span\n              key={tag}\n              className=\"rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\"\n            >\n              #{tag}\n            </span>\n          ))}\n        </div>\n      )}\n\n      <div className=\"mt-4 flex items-center justify-between gap-3 border-t border-border-seam pt-3\">\n        <div className=\"flex items-center gap-3 text-xs text-text-tertiary\">\n          <span className=\"inline-flex items-center gap-1\">\n            <Users className=\"h-3.5 w-3.5\" /> {formatNumber(circle.memberCount)}\n          </span>\n          <span className=\"inline-flex items-center gap-1\">\n            <Hash className=\"h-3.5 w-3.5\" /> {circle.channels?.length ?? 0}\n          </span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {isMember ? (\n            <>\n              <Button size=\"sm\" variant=\"outline\" onClick={handleLeave} disabled={leave.isPending}>\n                Leave\n              </Button>\n              <Button size=\"sm\" onClick={onOpen}>\n                Open\n              </Button>\n            </>\n          ) : circle.status === 'ACTIVE' ? (\n            <Button size=\"sm\" onClick={handleJoin} disabled={join.isPending}>\n              Join\n            </Button>\n          ) : (\n            <span className=\"text-xs text-text-tertiary\">{formatEnumLabel(circle.status)}</span>\n          )}\n        </div>\n      </div>\n    </GlassCard>\n  );\n}\n"],"mappings":";;;;;;;;;;AAwBA,SAAgB,EAAW,EAAE,WAAQ,eAAY,aAA2B;CAC1E,IAAM,IAAO,GAAkB,EACzB,IAAQ,GAAmB,EAC3B,IAAW,GAAY,WAAW;AAoBxC,QACE,kBAAC,GAAD;EAAW,WAAU;EAAQ,WAAU;YAAvC;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAQ,MAAM,EAAO;KAAM,MAAK;KAAO,CAAA,EACvC,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;iBAET,EAAO;OACD,CAAA;MACR,EAAO,SAAS,kBAAC,KAAD;OAAG,WAAU;iBAAwC,EAAO;OAAU,CAAA;MACvF,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,GAAD,EAAa,QAAQ,EAAO,YAAc,CAAA;QACzC,EAAO,WAAW,YAAY,kBAAC,GAAD,EAAa,QAAQ,EAAO,QAAU,CAAA;QACpE,KAAY,KAAc,kBAAC,GAAD,EAAa,QAAQ,EAAW,MAAQ,CAAA;QAC/D;;MACF;OACF;;GAEL,EAAO,eACN,kBAAC,KAAD;IAAG,WAAU;cAAiD,EAAO;IAAgB,CAAA;GAGtF,EAAO,KAAK,SAAS,KACpB,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAO,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK,MAC5B,kBAAC,QAAD;KAEE,WAAU;eAFZ,CAGC,KACG,EACG;OAJA,EAIA,CACP;IACE,CAAA;GAGR,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAO,WAAU,eAAgB,CAAA;;OAAE,EAAa,EAAO,YAAY;OAC9D;SACP,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAM,WAAU,eAAgB,CAAA;;OAAE,EAAO,UAAU,UAAU;OACxD;QACH;QACN,kBAAC,OAAD;KAAK,WAAU;eACZ,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;MAAQ,MAAK;MAAK,SAAQ;MAAU,SA3D5B,YAAY;AAC9B,WAAI;AAEF,QADA,MAAM,EAAM,YAAY,EAAO,GAAG,EAClC,EAAO,QAAQ,eAAe,iBAAiB,EAAO,KAAK,GAAG;gBACvD,GAAK;AACZ,UAAO,MAAM,mBAAmB,EAAc,EAAI,CAAC;;;MAsDe,UAAU,EAAM;gBAAW;MAE5E,CAAA,EACT,kBAAC,GAAD;MAAQ,MAAK;MAAK,SAAS;gBAAQ;MAE1B,CAAA,CACR,EAAA,CAAA,GACD,EAAO,WAAW,WACpB,kBAAC,GAAD;MAAQ,MAAK;MAAK,SA5ET,YAAY;AAC7B,WAAI;AAEF,QADA,MAAM,EAAK,YAAY,EAAO,GAAG,EACjC,EAAO,QAAQ,iBAAiB,2BAA2B,EAAO,KAAK,GAAG;gBACnE,GAAK;AACZ,UAAO,MAAM,kBAAkB,EAAc,EAAI,CAAC;;;MAuEL,UAAU,EAAK;gBAAW;MAExD,CAAA,GAET,kBAAC,QAAD;MAAM,WAAU;gBAA8B,EAAgB,EAAO,OAAO;MAAQ,CAAA;KAElF,CAAA,CACF;;GACI"}
+{"version":3,"file":"CircleCard.js","names":[],"sources":["../../../src/comradecircle/components/CircleCard.tsx"],"sourcesContent":["/**\n * CircleCard — a discovery/overview tile for a community circle.\n * @module comradecircle/components\n *\n * Writes `comJoinCircle` / `comLeaveCircle`. When the caller already belongs to\n * the circle the card shows their role and an Open action; otherwise a Join\n * action. Membership is supplied by the parent (which knows the caller's set).\n */\n\nimport { Users, Hash } from 'lucide-react';\nimport { GlassCard, Button } from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/cn';\nimport { Avatar } from './Avatar';\nimport { StatusBadge } from './StatusBadge';\nimport { useComJoinCircle, useComLeaveCircle } from '../hooks';\nimport { formatEnumLabel, formatNumber } from '../utils/formatters';\nimport { notify, describeError } from '../lib/toast';\nimport type { ComCircle, ComMembership } from '../types';\n\ninterface CircleCardProps {\n  circle: ComCircle;\n  membership?: ComMembership | null;\n  onOpen: () => void;\n}\n\nexport function CircleCard({ circle, membership, onOpen }: CircleCardProps) {\n  const join = useComJoinCircle();\n  const leave = useComLeaveCircle();\n  const isMember = membership?.status === 'ACTIVE';\n\n  const handleJoin = async () => {\n    try {\n      await join.mutateAsync(circle.id);\n      notify.success('Joined circle', `You are now a member of ${circle.name}.`);\n    } catch (err) {\n      notify.error('Could not join', describeError(err));\n    }\n  };\n\n  const handleLeave = async () => {\n    try {\n      await leave.mutateAsync(circle.id);\n      notify.success('Left circle', `You have left ${circle.name}.`);\n    } catch (err) {\n      notify.error('Could not leave', describeError(err));\n    }\n  };\n\n  const isOwner = membership?.role === 'OWNER' || membership?.role === 'ADMIN';\n\n  return (\n    <GlassCard\n      treatment=\"plain\"\n      className={cn(\n        'flex flex-col p-5 transition-all duration-200 motion-safe:hover:-translate-y-0.5 hover:border-[var(--color-accent-soft)]',\n        isOwner && 'ring-1 ring-[var(--color-accent-soft)]'\n      )}\n    >\n      <div className=\"flex items-start gap-3\">\n        <Avatar name={circle.name} seed={circle.id} size=\"lg\" fileId={circle.avatar?.id} />\n        <div className=\"min-w-0 flex-1\">\n          <button\n            type=\"button\"\n            onClick={onOpen}\n            className=\"truncate text-left text-base font-semibold text-text-primary hover:underline\"\n          >\n            {circle.name}\n          </button>\n          {circle.topic && <p className=\"truncate text-sm text-text-secondary\">{circle.topic}</p>}\n          <div className=\"mt-1.5 flex flex-wrap items-center gap-1.5\">\n            <StatusBadge status={circle.visibility} />\n            {circle.status !== 'ACTIVE' && <StatusBadge status={circle.status} />}\n            {isMember && membership && <StatusBadge status={membership.role} />}\n          </div>\n        </div>\n      </div>\n\n      {circle.description && (\n        <p className=\"mt-3 line-clamp-2 text-sm text-text-secondary\">{circle.description}</p>\n      )}\n\n      {circle.tags.length > 0 && (\n        <div className=\"mt-3 flex flex-wrap gap-1.5\">\n          {circle.tags.slice(0, 4).map((tag) => (\n            <span\n              key={tag}\n              className=\"rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\"\n            >\n              #{tag}\n            </span>\n          ))}\n        </div>\n      )}\n\n      <div className=\"mt-4 flex items-center justify-between gap-3 border-t border-border-seam pt-3\">\n        <div className=\"flex items-center gap-3 text-xs text-text-tertiary\">\n          <span className=\"inline-flex items-center gap-1\">\n            <Users className=\"h-3.5 w-3.5\" /> {formatNumber(circle.memberCount)}\n          </span>\n          <span className=\"inline-flex items-center gap-1\">\n            <Hash className=\"h-3.5 w-3.5\" /> {circle.channels?.length ?? 0}\n          </span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {isMember ? (\n            <>\n              <Button size=\"sm\" variant=\"outline\" onClick={handleLeave} disabled={leave.isPending}>\n                Leave\n              </Button>\n              <Button size=\"sm\" onClick={onOpen}>\n                Open\n              </Button>\n            </>\n          ) : circle.status === 'ACTIVE' ? (\n            <Button size=\"sm\" onClick={handleJoin} disabled={join.isPending}>\n              Join\n            </Button>\n          ) : (\n            <span className=\"text-xs text-text-tertiary\">{formatEnumLabel(circle.status)}</span>\n          )}\n        </div>\n      </div>\n    </GlassCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAyBA,SAAgB,EAAW,EAAE,WAAQ,eAAY,aAA2B;CAC1E,IAAM,IAAO,GAAkB,EACzB,IAAQ,GAAmB,EAC3B,IAAW,GAAY,WAAW;AAsBxC,QACE,kBAAC,GAAD;EACE,WAAU;EACV,WAAW,EACT,6HANU,GAAY,SAAS,WAAW,GAAY,SAAS,YAOpD,yCACZ;YALH;GAOE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAQ,MAAM,EAAO;KAAM,MAAM,EAAO;KAAI,MAAK;KAAK,QAAQ,EAAO,QAAQ;KAAM,CAAA,EACnF,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;iBAET,EAAO;OACD,CAAA;MACR,EAAO,SAAS,kBAAC,KAAD;OAAG,WAAU;iBAAwC,EAAO;OAAU,CAAA;MACvF,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,GAAD,EAAa,QAAQ,EAAO,YAAc,CAAA;QACzC,EAAO,WAAW,YAAY,kBAAC,GAAD,EAAa,QAAQ,EAAO,QAAU,CAAA;QACpE,KAAY,KAAc,kBAAC,GAAD,EAAa,QAAQ,EAAW,MAAQ,CAAA;QAC/D;;MACF;OACF;;GAEL,EAAO,eACN,kBAAC,KAAD;IAAG,WAAU;cAAiD,EAAO;IAAgB,CAAA;GAGtF,EAAO,KAAK,SAAS,KACpB,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAO,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK,MAC5B,kBAAC,QAAD;KAEE,WAAU;eAFZ,CAGC,KACG,EACG;OAJA,EAIA,CACP;IACE,CAAA;GAGR,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAO,WAAU,eAAgB,CAAA;;OAAE,EAAa,EAAO,YAAY;OAC9D;SACP,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAM,WAAU,eAAgB,CAAA;;OAAE,EAAO,UAAU,UAAU;OACxD;QACH;QACN,kBAAC,OAAD;KAAK,WAAU;eACZ,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;MAAQ,MAAK;MAAK,SAAQ;MAAU,SAnE5B,YAAY;AAC9B,WAAI;AAEF,QADA,MAAM,EAAM,YAAY,EAAO,GAAG,EAClC,EAAO,QAAQ,eAAe,iBAAiB,EAAO,KAAK,GAAG;gBACvD,GAAK;AACZ,UAAO,MAAM,mBAAmB,EAAc,EAAI,CAAC;;;MA8De,UAAU,EAAM;gBAAW;MAE5E,CAAA,EACT,kBAAC,GAAD;MAAQ,MAAK;MAAK,SAAS;gBAAQ;MAE1B,CAAA,CACR,EAAA,CAAA,GACD,EAAO,WAAW,WACpB,kBAAC,GAAD;MAAQ,MAAK;MAAK,SApFT,YAAY;AAC7B,WAAI;AAEF,QADA,MAAM,EAAK,YAAY,EAAO,GAAG,EACjC,EAAO,QAAQ,iBAAiB,2BAA2B,EAAO,KAAK,GAAG;gBACnE,GAAK;AACZ,UAAO,MAAM,kBAAkB,EAAc,EAAI,CAAC;;;MA+EL,UAAU,EAAK;gBAAW;MAExD,CAAA,GAET,kBAAC,QAAD;MAAM,WAAU;gBAA8B,EAAgB,EAAO,OAAO;MAAQ,CAAA;KAElF,CAAA,CACF;;GACI"}

package/dist/comradecircle/components/CommentThread.js

@@ -1,17 +1,20 @@
-import { cn as e } from "../utils/cn.js";
-import { useComAddComment as t, useComComments as n } from "../hooks/useComradeCircleApi.js";
+import { useComradeCircle as e } from "../context/ComradeCircleContext.js";
+import { cn as t } from "../utils/cn.js";
+import "../context/index.js";
+import { useComAddComment as n, useComComments as r } from "../hooks/useComradeCircleApi.js";
 import "../hooks/index.js";
-import { MemberIdentity as r } from "./MemberIdentity.js";
-import { describeError as i, notify as a } from "../lib/toast.js";
-import { formatRelativeTime as o } from "../utils/formatters.js";
-import { useMemo as s, useState as c } from "react";
-import { CornerDownRight as l, Send as u } from "lucide-react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Button as p, Spinner as m, Textarea as h } from "@burdenoff/fe-libs/ui";
+import { Avatar as i } from "./Avatar.js";
+import { MemberIdentity as a } from "./MemberIdentity.js";
+import { describeError as o, notify as s } from "../lib/toast.js";
+import { formatRelativeTime as c } from "../utils/formatters.js";
+import { useMemo as l, useState as u } from "react";
+import { CornerDownRight as d, MessageCircle as f, Send as p } from "lucide-react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Button as g, Spinner as _, Textarea as v } from "@burdenoff/fe-libs/ui";
 //#region src/comradecircle/components/CommentThread.tsx
-function g({ postId: g }) {
-	let { data: _, isLoading: v } = n(g), y = t(), [b, x] = c(""), [S, C] = c(null), { roots: w, repliesByParent: T } = s(() => {
-		let e = _ ?? [], t = /* @__PURE__ */ new Map(), n = [];
+function y({ postId: y }) {
+	let { currentUser: b } = e(), { data: x, isLoading: S } = r(y), C = n(), [w, T] = u(""), [E, D] = u(null), { roots: O, repliesByParent: k } = l(() => {
+		let e = x ?? [], t = /* @__PURE__ */ new Map(), n = [];
 		for (let r of e) if (r.parentId) {
 			let e = t.get(r.parentId) ?? [];
 			e.push(r), t.set(r.parentId, e);
@@ -20,86 +23,99 @@ function g({ postId: g }) {
 			roots: n,
 			repliesByParent: t
 		};
-	}, [_]), E = async () => {
-		let e = b.trim();
+	}, [x]), A = async () => {
+		let e = w.trim();
 		if (e) try {
-			await y.mutateAsync({
-				postId: g,
+			await C.mutateAsync({
+				postId: y,
 				body: e,
-				parentId: S?.id ?? null
-			}), x(""), C(null);
+				parentId: E?.id ?? null
+			}), T(""), D(null);
 		} catch (e) {
-			a.error("Could not add comment", i(e));
+			s.error("Could not add comment", o(e));
 		}
-	}, D = (t, n = !1) => /* @__PURE__ */ f("div", {
-		className: e("flex flex-col gap-1", n && "ml-8"),
-		children: [/* @__PURE__ */ f("div", {
+	}, j = (e, n = !1) => /* @__PURE__ */ h("div", {
+		className: t("flex flex-col gap-1", n && "ml-8"),
+		children: [/* @__PURE__ */ h("div", {
 			className: "rounded-xl bg-bg-sunken/60 px-3 py-2",
-			children: [/* @__PURE__ */ f("div", {
+			children: [/* @__PURE__ */ h("div", {
 				className: "flex items-center justify-between gap-2",
-				children: [/* @__PURE__ */ d(r, {
-					memberId: t.authorId,
+				children: [/* @__PURE__ */ m(a, {
+					memberId: e.authorId,
 					size: "xs",
-					suffix: o(t.createdAt)
-				}), !n && /* @__PURE__ */ f("button", {
+					suffix: c(e.createdAt)
+				}), !n && /* @__PURE__ */ h("button", {
 					type: "button",
-					onClick: () => C(t),
+					onClick: () => D(e),
 					className: "inline-flex items-center gap-1 text-xs text-text-tertiary transition-colors hover:text-text-primary",
-					children: [/* @__PURE__ */ d(l, { className: "h-3 w-3" }), " Reply"]
+					children: [/* @__PURE__ */ m(d, { className: "h-3 w-3" }), " Reply"]
 				})]
-			}), /* @__PURE__ */ d("p", {
+			}), /* @__PURE__ */ m("p", {
 				className: "mt-1 whitespace-pre-wrap break-words text-sm text-text-primary",
-				children: t.body
+				children: e.body
 			})]
-		}), (T.get(t.id) ?? []).map((e) => D(e, !0))]
-	}, t.id);
-	return /* @__PURE__ */ f("div", {
+		}), (k.get(e.id) ?? []).map((e) => j(e, !0))]
+	}, e.id);
+	return /* @__PURE__ */ h("div", {
 		className: "mt-3 border-t border-border-seam pt-3",
-		children: [v ? /* @__PURE__ */ d("div", {
+		children: [S ? /* @__PURE__ */ m("div", {
 			className: "flex justify-center py-4",
-			children: /* @__PURE__ */ d(m, { size: "sm" })
-		}) : w.length === 0 ? /* @__PURE__ */ d("p", {
-			className: "py-2 text-center text-sm text-text-tertiary",
-			children: "No comments yet. Start the conversation."
-		}) : /* @__PURE__ */ d("div", {
+			children: /* @__PURE__ */ m(_, { size: "sm" })
+		}) : O.length === 0 ? /* @__PURE__ */ h("div", {
+			className: "flex flex-col items-center gap-1.5 py-4 text-center",
+			children: [/* @__PURE__ */ m(f, { className: "h-6 w-6 text-text-tertiary opacity-60" }), /* @__PURE__ */ m("p", {
+				className: "text-sm text-text-tertiary",
+				children: "No comments yet — start the conversation."
+			})]
+		}) : /* @__PURE__ */ m("div", {
 			className: "flex flex-col gap-3",
-			children: w.map((e) => D(e))
-		}), /* @__PURE__ */ f("div", {
+			children: O.map((e) => j(e))
+		}), /* @__PURE__ */ h("div", {
 			className: "mt-3 flex flex-col gap-2",
-			children: [S && /* @__PURE__ */ f("div", {
+			children: [E && /* @__PURE__ */ h("div", {
 				className: "flex items-center justify-between rounded-lg bg-bg-sunken px-3 py-1.5 text-xs text-text-secondary",
-				children: [/* @__PURE__ */ d("span", {
+				children: [/* @__PURE__ */ m("span", {
 					className: "truncate",
 					children: "Replying to a comment"
-				}), /* @__PURE__ */ d("button", {
+				}), /* @__PURE__ */ m("button", {
 					type: "button",
-					onClick: () => C(null),
+					onClick: () => D(null),
 					className: "text-text-tertiary hover:text-text-primary",
 					children: "Cancel"
 				})]
-			}), /* @__PURE__ */ f("div", {
+			}), /* @__PURE__ */ h("div", {
 				className: "flex items-end gap-2",
-				children: [/* @__PURE__ */ d(h, {
-					value: b,
-					onChange: (e) => x(e.target.value),
-					placeholder: "Add a comment…",
-					rows: 1,
-					className: "min-h-[40px] resize-none",
-					onKeyDown: (e) => {
-						e.key === "Enter" && (e.metaKey || e.ctrlKey) && (e.preventDefault(), E());
-					}
-				}), /* @__PURE__ */ d(p, {
-					size: "sm",
-					onClick: E,
-					disabled: !b.trim() || y.isPending,
-					"aria-label": "Post comment",
-					children: /* @__PURE__ */ d(u, { className: "h-4 w-4" })
-				})]
+				children: [
+					/* @__PURE__ */ m(i, {
+						name: b?.name ?? b?.email ?? "You",
+						seed: b?.id,
+						size: "sm",
+						className: "mb-1"
+					}),
+					/* @__PURE__ */ m(v, {
+						value: w,
+						onChange: (e) => T(e.target.value),
+						placeholder: "Add a comment…",
+						rows: 1,
+						className: "min-h-[40px] resize-none",
+						onKeyDown: (e) => {
+							e.key === "Enter" && (e.metaKey || e.ctrlKey) && (e.preventDefault(), A());
+						}
+					}),
+					/* @__PURE__ */ m(g, {
+						size: "icon",
+						onClick: A,
+						disabled: !w.trim() || C.isPending,
+						"aria-label": "Post comment",
+						className: "shrink-0 rounded-full",
+						children: /* @__PURE__ */ m(p, { className: "h-4 w-4" })
+					})
+				]
 			})]
 		})]
 	});
 }
 //#endregion
-export { g as CommentThread };
+export { y as CommentThread };
 
 //# sourceMappingURL=CommentThread.js.map