@burdenoff/microfe-comradecircle 2026.704.1 → 2026.704.2

package/dist/comradecircle/components/Avatar.js

@@ -1,35 +1,47 @@
 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 = {
+}, a = {
 	ONLINE: "bg-status-success-text",
 	AWAY: "bg-status-warning-text",
 	BUSY: "bg-status-error-text",
 	OFFLINE: "bg-text-tertiary"
 };
-function a(e) {
+function o(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 s = ({ name: s, size: c = "md", presence: l, fileId: u, className: d }) => {
+	let f = /* @__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 bg-[var(--color-accent-soft)] font-semibold text-text-primary", i[c]),
+		children: o(s)
+	});
+	return /* @__PURE__ */ r("span", {
+		className: e("relative inline-flex shrink-0", d),
+		children: [/* @__PURE__ */ n("span", {
+			className: e("inline-flex items-center justify-center overflow-hidden rounded-full ring-1 ring-border-seam", i[c]),
+			children: u ? /* @__PURE__ */ n(t, {
+				fileId: u,
+				alt: s ?? "Avatar",
+				className: "h-full w-full rounded-full",
+				fallback: f
+			}) : f
+		}), l && /* @__PURE__ */ n("span", {
+			className: e("absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full ring-2 ring-bg-surface", a[l], l === "ONLINE" && "motion-safe:animate-vc-glow-pulse"),
+			"aria-label": `Presence: ${l.toLowerCase()}`
+		})]
+	});
+};
 //#endregion
-export { o as Avatar };
+export { s 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-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 { FileImage } from './FileImage';\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  /** wspace-files-svc file id — when set + resolvable, renders the image. */\n  fileId?: string | null;\n  className?: string;\n}\n\nexport const Avatar: FC<AvatarProps> = ({ name, size = 'md', presence, fileId, className }) => {\n  const initials = (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        'flex h-full w-full items-center justify-center rounded-full bg-[var(--color-accent-soft)] font-semibold text-text-primary',\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 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 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":";;;;AAgBA,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;;AAYrE,IAAa,KAA2B,EAAE,SAAM,UAAO,MAAM,aAAU,WAAQ,mBAAgB;CAC7F,IAAM,IACJ,kBAAC,QAAD;EACE,eAAY;EACZ,WAAW,EACT,6HACA,EAAU,GACX;YAEA,EAAW,EAAK;EACZ,CAAA;AAGT,QACE,kBAAC,QAAD;EAAM,WAAW,EAAG,iCAAiC,EAAU;YAA/D,CACE,kBAAC,QAAD;GACE,WAAW,EACT,gGACA,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,mFACA,EAAY,IACZ,MAAa,YAAY,oCAC1B;GACD,cAAY,aAAa,EAAS,aAAa;GAC/C,CAAA,CAEC"}

package/dist/comradecircle/components/AvatarUploadField.js

@@ -0,0 +1,80 @@
+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("div", {
+			className: "relative",
+			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"
+			}), x && /* @__PURE__ */ d("span", {
+				className: "absolute inset-0 flex items-center justify-center rounded-full bg-bg-canvas/60",
+				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      <div className=\"relative\">\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        {uploading && (\n          <span className=\"absolute inset-0 flex items-center justify-center rounded-full bg-bg-canvas/60\">\n            <Loader2 className=\"h-5 w-5 animate-spin text-text-primary\" />\n          </span>\n        )}\n      </div>\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,OAAD;GAAK,WAAU;aAAf,CACG,IACC,kBAAC,OAAD;IACE,KAAK;IACL,KAAK,KAAQ;IACb,WAAU;IACV,CAAA,GAEF,kBAAC,GAAD;IAAc;IAAc;IAAQ,MAAK;IAAO,CAAA,EAEjD,KACC,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD,EAAS,WAAU,0CAA2C,CAAA;IACzD,CAAA,CAEL;MACN,kBAAC,OAAD,EAAA,UAAA;GACE,kBAAC,SAAD;IACE,KAAK;IACL,IAAI;IACJ,MAAK;IACL,QAAO;IACP,WAAU;IACV,UAlDa,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;;;;IA8Bf,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

@@ -18,7 +18,8 @@ function h({ circle: h, membership: g, onOpen: _ }) {
 				className: "flex items-start gap-3",
 				children: [/* @__PURE__ */ d(n, {
 					name: h.name,
-					size: "lg"
+					size: "lg",
+					fileId: h.avatar?.id
 				}), /* @__PURE__ */ f("div", {
 					className: "min-w-0 flex-1",
 					children: [

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 { 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\" 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":";;;;;;;;;;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;KAAK,QAAQ,EAAO,QAAQ;KAAM,CAAA,EAClE,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"}

package/dist/comradecircle/components/CreateCircleDialog.js

@@ -4,138 +4,149 @@ import { describeError as t, notify as n } from "../lib/toast.js";
 import { formatEnumLabel as r } from "../utils/formatters.js";
 import { slugify as i } from "../utils/slug.js";
 import { TagInput as a } from "./TagInput.js";
-import { useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Button as l, Input as u, Label as d, ResponsiveDialog as f, ResponsiveDialogContent as p, ResponsiveDialogDescription as m, ResponsiveDialogFooter as h, ResponsiveDialogHeader as g, ResponsiveDialogTitle as _, Select as v, SelectContent as y, SelectItem as b, SelectTrigger as x, SelectValue as S, Textarea as C } from "@burdenoff/fe-libs/ui";
+import { AvatarUploadField as o } from "./AvatarUploadField.js";
+import { useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Button as u, Input as d, Label as f, ResponsiveDialog as p, ResponsiveDialogContent as m, ResponsiveDialogDescription as h, ResponsiveDialogFooter as g, ResponsiveDialogHeader as _, ResponsiveDialogTitle as v, Select as y, SelectContent as b, SelectItem as x, SelectTrigger as S, SelectValue as C, Textarea as w } from "@burdenoff/fe-libs/ui";
 //#region src/comradecircle/components/CreateCircleDialog.tsx
-var w = [
+var T = [
 	"PUBLIC",
 	"PRIVATE",
 	"SECRET"
 ];
-function T({ open: T, onOpenChange: E, onCreated: D }) {
-	let O = e(), [k, A] = o(""), [j, M] = o(""), [N, P] = o(!1), [F, I] = o(""), [L, R] = o(""), [z, B] = o("PUBLIC"), [V, H] = o([]), [U, W] = o(null), G = N ? j : i(k), K = () => {
-		A(""), M(""), P(!1), I(""), R(""), B("PUBLIC"), H([]), W(null);
+function E({ open: E, onOpenChange: D, onCreated: O }) {
+	let k = e(), [A, j] = s(""), [M, N] = s(""), [P, F] = s(!1), [I, L] = s(""), [R, z] = s(""), [B, V] = s("PUBLIC"), [H, U] = s([]), [W, G] = s(null), [K, q] = s(null), J = P ? M : i(A), Y = () => {
+		j(""), N(""), F(!1), L(""), z(""), V("PUBLIC"), U([]), G(null), q(null);
 	};
-	return /* @__PURE__ */ s(f, {
-		open: T,
-		onOpenChange: E,
-		children: /* @__PURE__ */ c(p, {
+	return /* @__PURE__ */ c(p, {
+		open: E,
+		onOpenChange: D,
+		children: /* @__PURE__ */ l(m, {
 			className: "sm:max-w-lg",
 			children: [
-				/* @__PURE__ */ c(g, { children: [/* @__PURE__ */ s(_, { children: "Create a circle" }), /* @__PURE__ */ s(m, { children: "A circle is a community space with its own channels, members, events, and polls." })] }),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ l(_, { children: [/* @__PURE__ */ c(v, { children: "Create a circle" }), /* @__PURE__ */ c(h, { children: "A circle is a community space with its own channels, members, events, and polls." })] }),
+				/* @__PURE__ */ l("div", {
 					className: "flex flex-col gap-4 py-2",
 					children: [
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ l("div", {
 							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ s(d, {
+							children: [/* @__PURE__ */ c(f, { children: "Avatar" }), /* @__PURE__ */ c(o, {
+								fileId: W,
+								name: A || "Circle",
+								onUploaded: G,
+								label: "Upload circle avatar"
+							})]
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "grid gap-1.5",
+							children: [/* @__PURE__ */ c(f, {
 								htmlFor: "circle-name",
 								children: "Name"
-							}), /* @__PURE__ */ s(u, {
+							}), /* @__PURE__ */ c(d, {
 								id: "circle-name",
-								value: k,
-								onChange: (e) => A(e.target.value),
+								value: A,
+								onChange: (e) => j(e.target.value),
 								placeholder: "e.g. Product Guild"
 							})]
 						}),
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ l("div", {
 							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ s(d, {
+							children: [/* @__PURE__ */ c(f, {
 								htmlFor: "circle-slug",
 								children: "URL slug"
-							}), /* @__PURE__ */ s(u, {
+							}), /* @__PURE__ */ c(d, {
 								id: "circle-slug",
-								value: G,
+								value: J,
 								onChange: (e) => {
-									P(!0), M(i(e.target.value));
+									F(!0), N(i(e.target.value));
 								},
 								placeholder: "product-guild"
 							})]
 						}),
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ l("div", {
 							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ s(d, {
+							children: [/* @__PURE__ */ c(f, {
 								htmlFor: "circle-topic",
 								children: "Topic"
-							}), /* @__PURE__ */ s(u, {
+							}), /* @__PURE__ */ c(d, {
 								id: "circle-topic",
-								value: F,
-								onChange: (e) => I(e.target.value),
+								value: I,
+								onChange: (e) => L(e.target.value),
 								placeholder: "A short one-line topic"
 							})]
 						}),
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ l("div", {
 							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ s(d, {
+							children: [/* @__PURE__ */ c(f, {
 								htmlFor: "circle-desc",
 								children: "Description"
-							}), /* @__PURE__ */ s(C, {
+							}), /* @__PURE__ */ c(w, {
 								id: "circle-desc",
-								value: L,
-								onChange: (e) => R(e.target.value),
+								value: R,
+								onChange: (e) => z(e.target.value),
 								placeholder: "What is this circle about?",
 								rows: 3
 							})]
 						}),
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ l("div", {
 							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ s(d, { children: "Visibility" }), /* @__PURE__ */ c(v, {
-								value: z,
-								onValueChange: (e) => B(e),
-								children: [/* @__PURE__ */ s(x, { children: /* @__PURE__ */ s(S, {}) }), /* @__PURE__ */ s(y, { children: w.map((e) => /* @__PURE__ */ s(b, {
+							children: [/* @__PURE__ */ c(f, { children: "Visibility" }), /* @__PURE__ */ l(y, {
+								value: B,
+								onValueChange: (e) => V(e),
+								children: [/* @__PURE__ */ c(S, { children: /* @__PURE__ */ c(C, {}) }), /* @__PURE__ */ c(b, { children: T.map((e) => /* @__PURE__ */ c(x, {
 									value: e,
 									children: r(e)
 								}, e)) })]
 							})]
 						}),
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ l("div", {
 							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ s(d, {
+							children: [/* @__PURE__ */ c(f, {
 								htmlFor: "circle-tags",
 								children: "Tags"
-							}), /* @__PURE__ */ s(a, {
+							}), /* @__PURE__ */ c(a, {
 								id: "circle-tags",
-								value: V,
-								onChange: H,
+								value: H,
+								onChange: U,
 								placeholder: "Add tags…"
 							})]
 						}),
-						U && /* @__PURE__ */ s("p", {
+						K && /* @__PURE__ */ c("p", {
 							className: "text-sm text-status-error-text",
-							children: U
+							children: K
 						})
 					]
 				}),
-				/* @__PURE__ */ c(h, { children: [/* @__PURE__ */ s(l, {
+				/* @__PURE__ */ l(g, { children: [/* @__PURE__ */ c(u, {
 					variant: "outline",
-					onClick: () => E(!1),
+					onClick: () => D(!1),
 					children: "Cancel"
-				}), /* @__PURE__ */ s(l, {
+				}), /* @__PURE__ */ c(u, {
 					onClick: async () => {
-						if (!k.trim()) {
-							W("Circle name is required.");
+						if (!A.trim()) {
+							q("Circle name is required.");
 							return;
 						}
-						if (!G) {
-							W("A URL slug is required.");
+						if (!J) {
+							q("A URL slug is required.");
 							return;
 						}
 						try {
-							let e = await O.mutateAsync({
-								name: k.trim(),
-								slug: G,
-								topic: F.trim() || null,
-								description: L.trim() || null,
-								visibility: z,
-								tags: V.length ? V : null
+							let e = await k.mutateAsync({
+								name: A.trim(),
+								slug: J,
+								topic: I.trim() || null,
+								description: R.trim() || null,
+								visibility: B,
+								avatarFileId: W,
+								tags: H.length ? H : null
 							});
-							n.success("Circle created", `${e.name} is ready.`), E(!1), K(), D?.(e);
+							n.success("Circle created", `${e.name} is ready.`), D(!1), Y(), O?.(e);
 						} catch (e) {
-							W(t(e));
+							q(t(e));
 						}
 					},
-					disabled: O.isPending,
+					disabled: k.isPending,
 					children: "Create circle"
 				})] })
 			]
@@ -143,6 +154,6 @@ function T({ open: T, onOpenChange: E, onCreated: D }) {
 	});
 }
 //#endregion
-export { T as CreateCircleDialog };
+export { E as CreateCircleDialog };
 
 //# sourceMappingURL=CreateCircleDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CreateCircleDialog.js","names":[],"sources":["../../../src/comradecircle/components/CreateCircleDialog.tsx"],"sourcesContent":["/**\n * CreateCircleDialog — create a new community circle.\n * @module comradecircle/components\n *\n * Writes `comCreateCircle`. Slug auto-derives from the name (editable).\n */\n\nimport { useState } from 'react';\nimport {\n  Button,\n  Input,\n  Label,\n  Textarea,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n} from '@burdenoff/fe-libs/ui';\nimport { TagInput } from './TagInput';\nimport { useComCreateCircle } from '../hooks';\nimport { slugify } from '../utils/slug';\nimport { formatEnumLabel } from '../utils/formatters';\nimport { notify, describeError } from '../lib/toast';\nimport type { ComCircle, ComCircleVisibility } from '../types';\n\nconst VISIBILITIES: ComCircleVisibility[] = ['PUBLIC', 'PRIVATE', 'SECRET'];\n\ninterface CreateCircleDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onCreated?: (circle: ComCircle) => void;\n}\n\nexport function CreateCircleDialog({ open, onOpenChange, onCreated }: CreateCircleDialogProps) {\n  const createCircle = useComCreateCircle();\n  const [name, setName] = useState('');\n  const [slug, setSlug] = useState('');\n  const [slugTouched, setSlugTouched] = useState(false);\n  const [topic, setTopic] = useState('');\n  const [description, setDescription] = useState('');\n  const [visibility, setVisibility] = useState<ComCircleVisibility>('PUBLIC');\n  const [tags, setTags] = useState<string[]>([]);\n  const [error, setError] = useState<string | null>(null);\n\n  const effectiveSlug = slugTouched ? slug : slugify(name);\n\n  const reset = () => {\n    setName('');\n    setSlug('');\n    setSlugTouched(false);\n    setTopic('');\n    setDescription('');\n    setVisibility('PUBLIC');\n    setTags([]);\n    setError(null);\n  };\n\n  const submit = async () => {\n    if (!name.trim()) {\n      setError('Circle name is required.');\n      return;\n    }\n    if (!effectiveSlug) {\n      setError('A URL slug is required.');\n      return;\n    }\n    try {\n      const created = await createCircle.mutateAsync({\n        name: name.trim(),\n        slug: effectiveSlug,\n        topic: topic.trim() || null,\n        description: description.trim() || null,\n        visibility,\n        tags: tags.length ? tags : null,\n      });\n      notify.success('Circle created', `${created.name} is ready.`);\n      onOpenChange(false);\n      reset();\n      onCreated?.(created);\n    } catch (err) {\n      setError(describeError(err));\n    }\n  };\n\n  return (\n    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>\n      <ResponsiveDialogContent className=\"sm:max-w-lg\">\n        <ResponsiveDialogHeader>\n          <ResponsiveDialogTitle>Create a circle</ResponsiveDialogTitle>\n          <ResponsiveDialogDescription>\n            A circle is a community space with its own channels, members, events, and polls.\n          </ResponsiveDialogDescription>\n        </ResponsiveDialogHeader>\n\n        <div className=\"flex flex-col gap-4 py-2\">\n          <div className=\"grid gap-1.5\">\n            <Label htmlFor=\"circle-name\">Name</Label>\n            <Input\n              id=\"circle-name\"\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              placeholder=\"e.g. Product Guild\"\n            />\n          </div>\n          <div className=\"grid gap-1.5\">\n            <Label htmlFor=\"circle-slug\">URL slug</Label>\n            <Input\n              id=\"circle-slug\"\n              value={effectiveSlug}\n              onChange={(e) => {\n                setSlugTouched(true);\n                setSlug(slugify(e.target.value));\n              }}\n              placeholder=\"product-guild\"\n            />\n          </div>\n          <div className=\"grid gap-1.5\">\n            <Label htmlFor=\"circle-topic\">Topic</Label>\n            <Input\n              id=\"circle-topic\"\n              value={topic}\n              onChange={(e) => setTopic(e.target.value)}\n              placeholder=\"A short one-line topic\"\n            />\n          </div>\n          <div className=\"grid gap-1.5\">\n            <Label htmlFor=\"circle-desc\">Description</Label>\n            <Textarea\n              id=\"circle-desc\"\n              value={description}\n              onChange={(e) => setDescription(e.target.value)}\n              placeholder=\"What is this circle about?\"\n              rows={3}\n            />\n          </div>\n          <div className=\"grid gap-1.5\">\n            <Label>Visibility</Label>\n            <Select\n              value={visibility}\n              onValueChange={(v) => setVisibility(v as ComCircleVisibility)}\n            >\n              <SelectTrigger>\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {VISIBILITIES.map((v) => (\n                  <SelectItem key={v} value={v}>\n                    {formatEnumLabel(v)}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n          <div className=\"grid gap-1.5\">\n            <Label htmlFor=\"circle-tags\">Tags</Label>\n            <TagInput id=\"circle-tags\" value={tags} onChange={setTags} placeholder=\"Add tags…\" />\n          </div>\n          {error && <p className=\"text-sm text-status-error-text\">{error}</p>}\n        </div>\n\n        <ResponsiveDialogFooter>\n          <Button variant=\"outline\" onClick={() => onOpenChange(false)}>\n            Cancel\n          </Button>\n          <Button onClick={submit} disabled={createCircle.isPending}>\n            Create circle\n          </Button>\n        </ResponsiveDialogFooter>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CreateCircleDialog.js","names":[],"sources":["../../../src/comradecircle/components/CreateCircleDialog.tsx"],"sourcesContent":["/**\n * CreateCircleDialog — create a new community circle.\n * @module comradecircle/components\n *\n * Writes `comCreateCircle`. Slug auto-derives from the name (editable).\n */\n\nimport { useState } from 'react';\nimport {\n  Button,\n  Input,\n  Label,\n  Textarea,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n} from '@burdenoff/fe-libs/ui';\nimport { TagInput } from './TagInput';\nimport { AvatarUploadField } from './AvatarUploadField';\nimport { useComCreateCircle } from '../hooks';\nimport { slugify } from '../utils/slug';\nimport { formatEnumLabel } from '../utils/formatters';\nimport { notify, describeError } from '../lib/toast';\nimport type { ComCircle, ComCircleVisibility } from '../types';\n\nconst VISIBILITIES: ComCircleVisibility[] = ['PUBLIC', 'PRIVATE', 'SECRET'];\n\ninterface CreateCircleDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onCreated?: (circle: ComCircle) => void;\n}\n\nexport function CreateCircleDialog({ open, onOpenChange, onCreated }: CreateCircleDialogProps) {\n  const createCircle = useComCreateCircle();\n  const [name, setName] = useState('');\n  const [slug, setSlug] = useState('');\n  const [slugTouched, setSlugTouched] = useState(false);\n  const [topic, setTopic] = useState('');\n  const [description, setDescription] = useState('');\n  const [visibility, setVisibility] = useState<ComCircleVisibility>('PUBLIC');\n  const [tags, setTags] = useState<string[]>([]);\n  const [avatarFileId, setAvatarFileId] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  const effectiveSlug = slugTouched ? slug : slugify(name);\n\n  const reset = () => {\n    setName('');\n    setSlug('');\n    setSlugTouched(false);\n    setTopic('');\n    setDescription('');\n    setVisibility('PUBLIC');\n    setTags([]);\n    setAvatarFileId(null);\n    setError(null);\n  };\n\n  const submit = async () => {\n    if (!name.trim()) {\n      setError('Circle name is required.');\n      return;\n    }\n    if (!effectiveSlug) {\n      setError('A URL slug is required.');\n      return;\n    }\n    try {\n      const created = await createCircle.mutateAsync({\n        name: name.trim(),\n        slug: effectiveSlug,\n        topic: topic.trim() || null,\n        description: description.trim() || null,\n        visibility,\n        avatarFileId,\n        tags: tags.length ? tags : null,\n      });\n      notify.success('Circle created', `${created.name} is ready.`);\n      onOpenChange(false);\n      reset();\n      onCreated?.(created);\n    } catch (err) {\n      setError(describeError(err));\n    }\n  };\n\n  return (\n    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>\n      <ResponsiveDialogContent className=\"sm:max-w-lg\">\n        <ResponsiveDialogHeader>\n          <ResponsiveDialogTitle>Create a circle</ResponsiveDialogTitle>\n          <ResponsiveDialogDescription>\n            A circle is a community space with its own channels, members, events, and polls.\n          </ResponsiveDialogDescription>\n        </ResponsiveDialogHeader>\n\n        <div className=\"flex flex-col gap-4 py-2\">\n          <div className=\"grid gap-1.5\">\n            <Label>Avatar</Label>\n            <AvatarUploadField\n              fileId={avatarFileId}\n              name={name || 'Circle'}\n              onUploaded={setAvatarFileId}\n              label=\"Upload circle avatar\"\n            />\n          </div>\n          <div className=\"grid gap-1.5\">\n            <Label htmlFor=\"circle-name\">Name</Label>\n            <Input\n              id=\"circle-name\"\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              placeholder=\"e.g. Product Guild\"\n            />\n          </div>\n          <div className=\"grid gap-1.5\">\n            <Label htmlFor=\"circle-slug\">URL slug</Label>\n            <Input\n              id=\"circle-slug\"\n              value={effectiveSlug}\n              onChange={(e) => {\n                setSlugTouched(true);\n                setSlug(slugify(e.target.value));\n              }}\n              placeholder=\"product-guild\"\n            />\n          </div>\n          <div className=\"grid gap-1.5\">\n            <Label htmlFor=\"circle-topic\">Topic</Label>\n            <Input\n              id=\"circle-topic\"\n              value={topic}\n              onChange={(e) => setTopic(e.target.value)}\n              placeholder=\"A short one-line topic\"\n            />\n          </div>\n          <div className=\"grid gap-1.5\">\n            <Label htmlFor=\"circle-desc\">Description</Label>\n            <Textarea\n              id=\"circle-desc\"\n              value={description}\n              onChange={(e) => setDescription(e.target.value)}\n              placeholder=\"What is this circle about?\"\n              rows={3}\n            />\n          </div>\n          <div className=\"grid gap-1.5\">\n            <Label>Visibility</Label>\n            <Select\n              value={visibility}\n              onValueChange={(v) => setVisibility(v as ComCircleVisibility)}\n            >\n              <SelectTrigger>\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {VISIBILITIES.map((v) => (\n                  <SelectItem key={v} value={v}>\n                    {formatEnumLabel(v)}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n          <div className=\"grid gap-1.5\">\n            <Label htmlFor=\"circle-tags\">Tags</Label>\n            <TagInput id=\"circle-tags\" value={tags} onChange={setTags} placeholder=\"Add tags…\" />\n          </div>\n          {error && <p className=\"text-sm text-status-error-text\">{error}</p>}\n        </div>\n\n        <ResponsiveDialogFooter>\n          <Button variant=\"outline\" onClick={() => onOpenChange(false)}>\n            Cancel\n          </Button>\n          <Button onClick={submit} disabled={createCircle.isPending}>\n            Create circle\n          </Button>\n        </ResponsiveDialogFooter>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n"],"mappings":"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"}

package/dist/comradecircle/components/FileImage.js

@@ -0,0 +1,20 @@
+import { cn as e } from "../utils/cn.js";
+import { useFileUrl as t } from "../hooks/useFiles.js";
+import { useState as n } from "react";
+import { Fragment as r, jsx as i } from "react/jsx-runtime";
+import { Skeleton as a } from "@burdenoff/fe-libs/ui";
+//#region src/comradecircle/components/FileImage.tsx
+function o({ fileId: o, alt: s, className: c, fallback: l = null }) {
+	let { data: u, isLoading: d, isError: f } = t(o), [p, m] = n(!1);
+	return o ? d ? /* @__PURE__ */ i(a, { className: e("h-full w-full", c) }) : f || p || !u ? /* @__PURE__ */ i(r, { children: l }) : /* @__PURE__ */ i("img", {
+		src: u,
+		alt: s,
+		loading: "lazy",
+		onError: () => m(!0),
+		className: e("object-cover", c)
+	}) : /* @__PURE__ */ i(r, { children: l });
+}
+//#endregion
+export { o as FileImage };
+
+//# sourceMappingURL=FileImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileImage.js","names":[],"sources":["../../../src/comradecircle/components/FileImage.tsx"],"sourcesContent":["/**\n * FileImage — render a wspace-files-svc file id as an image.\n * @module comradecircle/components\n *\n * Resolves the id to a presigned URL via {@link useFileUrl}. Shows a skeleton\n * while resolving and renders nothing (so the caller's fallback shows) if the id\n * is absent or the URL fails to resolve.\n */\n\nimport { useState } from 'react';\nimport { Skeleton } from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/cn';\nimport { useFileUrl } from '../hooks/useFiles';\n\ninterface FileImageProps {\n  fileId?: string | null;\n  alt: string;\n  className?: string;\n  /** Rendered when there is no fileId, resolution fails, or the image errors. */\n  fallback?: React.ReactNode;\n}\n\nexport function FileImage({ fileId, alt, className, fallback = null }: FileImageProps) {\n  const { data: url, isLoading, isError } = useFileUrl(fileId);\n  const [imgError, setImgError] = useState(false);\n\n  if (!fileId) return <>{fallback}</>;\n  if (isLoading) return <Skeleton className={cn('h-full w-full', className)} />;\n  if (isError || imgError || !url) return <>{fallback}</>;\n\n  return (\n    <img\n      src={url}\n      alt={alt}\n      loading=\"lazy\"\n      onError={() => setImgError(true)}\n      className={cn('object-cover', className)}\n    />\n  );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,EAAU,EAAE,WAAQ,QAAK,cAAW,cAAW,QAAwB;CACrF,IAAM,EAAE,MAAM,GAAK,cAAW,eAAY,EAAW,EAAO,EACtD,CAAC,GAAU,KAAe,EAAS,GAAM;AAM/C,QAJK,IACD,IAAkB,kBAAC,GAAD,EAAU,WAAW,EAAG,iBAAiB,EAAU,EAAI,CAAA,GACzE,KAAW,KAAY,CAAC,IAAY,kBAAA,GAAA,EAAA,UAAG,GAAY,CAAA,GAGrD,kBAAC,OAAD;EACE,KAAK;EACA;EACL,SAAQ;EACR,eAAe,EAAY,GAAK;EAChC,WAAW,EAAG,gBAAgB,EAAU;EACxC,CAAA,GAXgB,kBAAA,GAAA,EAAA,UAAG,GAAY,CAAA"}

package/dist/comradecircle/components/ImageAttachments.js

@@ -0,0 +1,97 @@
+import { cn as e } from "../utils/cn.js";
+import { FILE_FOLDERS as t, uploadImageToFiles as n } from "../hooks/useFiles.js";
+import { FileImage as r } from "./FileImage.js";
+import { describeError as i, notify as a } from "../lib/toast.js";
+import { useRef as o, useState as s } from "react";
+import { ImagePlus as c, Loader2 as l, X as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/comradecircle/components/ImageAttachments.tsx
+var p = 10 * 1024 * 1024, m = 6;
+function h({ fileIds: e, onChange: h, disabled: g = !1 }) {
+	let _ = o(null), [v, y] = s(!1), [b, x] = s({}), S = async (r) => {
+		let o = Array.from(r.target.files ?? []);
+		if (r.target.value = "", o.length === 0) return;
+		let s = m - e.length;
+		if (s <= 0) {
+			a.warning("Attachment limit reached", `Up to ${m} images per post.`);
+			return;
+		}
+		y(!0);
+		try {
+			let r = [], i = {};
+			for (let e of o.slice(0, s)) {
+				if (!e.type.startsWith("image/")) continue;
+				if (e.size > p) {
+					a.error("Image too large", `${e.name} exceeds 10 MB.`);
+					continue;
+				}
+				let o = await n(e, t.posts);
+				r.push(o.id), i[o.id] = o.url;
+			}
+			r.length && (x((e) => ({
+				...e,
+				...i
+			})), h([...e, ...r]));
+		} catch (e) {
+			a.error("Upload failed", i(e));
+		} finally {
+			y(!1);
+		}
+	}, C = (t) => h(e.filter((e) => e !== t));
+	return /* @__PURE__ */ f("div", { children: [
+		e.length > 0 && /* @__PURE__ */ d("div", {
+			className: "mb-2 flex flex-wrap gap-2",
+			children: e.map((e) => /* @__PURE__ */ f("div", {
+				className: "relative h-20 w-20 overflow-hidden rounded-lg ring-1 ring-border-seam",
+				children: [b[e] ? /* @__PURE__ */ d("img", {
+					src: b[e],
+					alt: "attachment",
+					className: "h-full w-full object-cover"
+				}) : /* @__PURE__ */ d(r, {
+					fileId: e,
+					alt: "attachment",
+					className: "h-full w-full"
+				}), /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: () => C(e),
+					"aria-label": "Remove attachment",
+					className: "absolute right-0.5 top-0.5 rounded-full bg-bg-canvas/70 p-0.5 text-text-primary hover:bg-bg-canvas",
+					children: /* @__PURE__ */ d(u, { className: "h-3.5 w-3.5" })
+				})]
+			}, e))
+		}),
+		/* @__PURE__ */ d("input", {
+			ref: _,
+			type: "file",
+			accept: "image/*",
+			multiple: !0,
+			className: "sr-only",
+			onChange: S,
+			disabled: g || v
+		}),
+		/* @__PURE__ */ f("button", {
+			type: "button",
+			onClick: () => _.current?.click(),
+			disabled: g || v || e.length >= m,
+			className: "inline-flex items-center gap-1.5 text-xs font-medium text-text-secondary transition-colors hover:text-text-primary disabled:opacity-50",
+			children: [v ? /* @__PURE__ */ d(l, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ d(c, { className: "h-4 w-4" }), v ? "Uploading…" : "Add images"]
+		})
+	] });
+}
+function g({ fileIds: t, className: n }) {
+	return t.length === 0 ? null : /* @__PURE__ */ d("div", {
+		className: e("mt-3 grid gap-2", t.length === 1 ? "grid-cols-1" : "grid-cols-2 sm:grid-cols-3", n),
+		children: t.map((n) => /* @__PURE__ */ d("div", {
+			className: e("overflow-hidden rounded-xl ring-1 ring-border-seam", t.length === 1 ? "max-h-96" : "aspect-square"),
+			children: /* @__PURE__ */ d(r, {
+				fileId: n,
+				alt: "Post attachment",
+				className: "h-full w-full"
+			})
+		}, n))
+	});
+}
+//#endregion
+export { g as AttachmentGrid, h as AttachmentPicker };
+
+//# sourceMappingURL=ImageAttachments.js.map