npm - @burdenoff/microfe-comradecircle - Versions diffs - 2026.704.1 → 2026.704.3 - Mend

@burdenoff/microfe-comradecircle 2026.704.1 → 2026.704.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/dist/comradecircle/components/ImageAttachments.js ADDED Viewed

@@ -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

package/dist/comradecircle/components/ImageAttachments.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ImageAttachments.js","names":[],"sources":["../../../src/comradecircle/components/ImageAttachments.tsx"],"sourcesContent":["/**\n * ImageAttachments — attach images to a post + render a post's attachments.\n * @module comradecircle/components\n *\n * Uploads go to wspace-files-svc (reuse, no blob storage here); the composer\n * keeps only file ids, which are persisted as ComPost.attachmentFileIds.\n */\n\nimport { useRef, useState } from 'react';\nimport { ImagePlus, Loader2, X } from 'lucide-react';\nimport { cn } from '../utils/cn';\nimport { FileImage } from './FileImage';\nimport { uploadImageToFiles, FILE_FOLDERS } from '../hooks/useFiles';\nimport { notify, describeError } from '../lib/toast';\n\nconst MAX_BYTES = 10 * 1024 * 1024;\nconst MAX_ATTACHMENTS = 6;\n\n// --- Composer: pick + upload images, expose file ids -----------------------\n\ninterface AttachmentPickerProps {\n fileIds: string[];\n onChange: (fileIds: string[]) => void;\n disabled?: boolean;\n}\n\nexport function AttachmentPicker({ fileIds, onChange, disabled = false }: AttachmentPickerProps) {\n const inputRef = useRef<HTMLInputElement | null>(null);\n const [uploading, setUploading] = useState(false);\n const [previews, setPreviews] = useState<Record<string, string>>({});\n\n const handleSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {\n const files = Array.from(event.target.files ?? []);\n event.target.value = '';\n if (files.length === 0) return;\n const room = MAX_ATTACHMENTS - fileIds.length;\n if (room <= 0) {\n notify.warning('Attachment limit reached', `Up to ${MAX_ATTACHMENTS} images per post.`);\n return;\n }\n setUploading(true);\n try {\n const added: string[] = [];\n const nextPreviews: Record<string, string> = {};\n for (const file of files.slice(0, room)) {\n if (!file.type.startsWith('image/')) continue;\n if (file.size > MAX_BYTES) {\n notify.error('Image too large', `${file.name} exceeds 10 MB.`);\n continue;\n }\n const uploaded = await uploadImageToFiles(file, FILE_FOLDERS.posts);\n added.push(uploaded.id);\n nextPreviews[uploaded.id] = uploaded.url;\n }\n if (added.length) {\n setPreviews((p) => ({ ...p, ...nextPreviews }));\n onChange([...fileIds, ...added]);\n }\n } catch (err) {\n notify.error('Upload failed', describeError(err));\n } finally {\n setUploading(false);\n }\n };\n\n const remove = (id: string) => onChange(fileIds.filter((f) => f !== id));\n\n return (\n <div>\n {fileIds.length > 0 && (\n <div className=\"mb-2 flex flex-wrap gap-2\">\n {fileIds.map((id) => (\n <div\n key={id}\n className=\"relative h-20 w-20 overflow-hidden rounded-lg ring-1 ring-border-seam\"\n >\n {previews[id] ? (\n <img src={previews[id]} alt=\"attachment\" className=\"h-full w-full object-cover\" />\n ) : (\n <FileImage fileId={id} alt=\"attachment\" className=\"h-full w-full\" />\n )}\n <button\n type=\"button\"\n onClick={() => remove(id)}\n aria-label=\"Remove attachment\"\n className=\"absolute right-0.5 top-0.5 rounded-full bg-bg-canvas/70 p-0.5 text-text-primary hover:bg-bg-canvas\"\n >\n <X className=\"h-3.5 w-3.5\" />\n </button>\n </div>\n ))}\n </div>\n )}\n <input\n ref={inputRef}\n type=\"file\"\n accept=\"image/*\"\n multiple\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 || fileIds.length >= MAX_ATTACHMENTS}\n className=\"inline-flex items-center gap-1.5 text-xs font-medium text-text-secondary transition-colors hover:text-text-primary disabled:opacity-50\"\n >\n {uploading ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <ImagePlus className=\"h-4 w-4\" />\n )}\n {uploading ? 'Uploading…' : 'Add images'}\n </button>\n </div>\n );\n}\n\n// --- Reader: render a post's attachment grid -------------------------------\n\ninterface AttachmentGridProps {\n fileIds: string[];\n className?: string;\n}\n\nexport function AttachmentGrid({ fileIds, className }: AttachmentGridProps) {\n if (fileIds.length === 0) return null;\n return (\n <div\n className={cn(\n 'mt-3 grid gap-2',\n fileIds.length === 1 ? 'grid-cols-1' : 'grid-cols-2 sm:grid-cols-3',\n className\n )}\n >\n {fileIds.map((id) => (\n <div\n key={id}\n className={cn(\n 'overflow-hidden rounded-xl ring-1 ring-border-seam',\n fileIds.length === 1 ? 'max-h-96' : 'aspect-square'\n )}\n >\n <FileImage fileId={id} alt=\"Post attachment\" className=\"h-full w-full\" />\n </div>\n ))}\n </div>\n );\n}\n"],"mappings":";;;;;;;;AAeA,IAAM,IAAY,KAAK,OAAO,MACxB,IAAkB;AAUxB,SAAgB,EAAiB,EAAE,YAAS,aAAU,cAAW,MAAgC;CAC/F,IAAM,IAAW,EAAgC,KAAK,EAChD,CAAC,GAAW,KAAgB,EAAS,GAAM,EAC3C,CAAC,GAAU,KAAe,EAAiC,EAAE,CAAC,EAE9D,IAAe,OAAO,MAA+C;EACzE,IAAM,IAAQ,MAAM,KAAK,EAAM,OAAO,SAAS,EAAE,CAAC;AAElD,MADA,EAAM,OAAO,QAAQ,IACjB,EAAM,WAAW,EAAG;EACxB,IAAM,IAAO,IAAkB,EAAQ;AACvC,MAAI,KAAQ,GAAG;AACb,KAAO,QAAQ,4BAA4B,SAAS,EAAgB,mBAAmB;AACvF;;AAEF,IAAa,GAAK;AAClB,MAAI;GACF,IAAM,IAAkB,EAAE,EACpB,IAAuC,EAAE;AAC/C,QAAK,IAAM,KAAQ,EAAM,MAAM,GAAG,EAAK,EAAE;AACvC,QAAI,CAAC,EAAK,KAAK,WAAW,SAAS,CAAE;AACrC,QAAI,EAAK,OAAO,GAAW;AACzB,OAAO,MAAM,mBAAmB,GAAG,EAAK,KAAK,iBAAiB;AAC9D;;IAEF,IAAM,IAAW,MAAM,EAAmB,GAAM,EAAa,MAAM;AAEnE,IADA,EAAM,KAAK,EAAS,GAAG,EACvB,EAAa,EAAS,MAAM,EAAS;;AAEvC,GAAI,EAAM,WACR,GAAa,OAAO;IAAE,GAAG;IAAG,GAAG;IAAc,EAAE,EAC/C,EAAS,CAAC,GAAG,GAAS,GAAG,EAAM,CAAC;WAE3B,GAAK;AACZ,KAAO,MAAM,iBAAiB,EAAc,EAAI,CAAC;YACzC;AACR,KAAa,GAAM;;IAIjB,KAAU,MAAe,EAAS,EAAQ,QAAQ,MAAM,MAAM,EAAG,CAAC;AAExE,QACE,kBAAC,OAAD,EAAA,UAAA;EACG,EAAQ,SAAS,KAChB,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAQ,KAAK,MACZ,kBAAC,OAAD;IAEE,WAAU;cAFZ,CAIG,EAAS,KACR,kBAAC,OAAD;KAAK,KAAK,EAAS;KAAK,KAAI;KAAa,WAAU;KAA+B,CAAA,GAElF,kBAAC,GAAD;KAAW,QAAQ;KAAI,KAAI;KAAa,WAAU;KAAkB,CAAA,EAEtE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAO,EAAG;KACzB,cAAW;KACX,WAAU;eAEV,kBAAC,GAAD,EAAG,WAAU,eAAgB,CAAA;KACtB,CAAA,CACL;MAhBC,EAgBD,CACN;GACE,CAAA;EAER,kBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,QAAO;GACP,UAAA;GACA,WAAU;GACV,UAAU;GACV,UAAU,KAAY;GACtB,CAAA;EACF,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAS,SAAS,OAAO;GACxC,UAAU,KAAY,KAAa,EAAQ,UAAU;GACrD,WAAU;aAJZ,CAMG,IACC,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,GAE5C,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAElC,IAAY,eAAe,aACrB;;EACL,EAAA,CAAA;;AAWV,SAAgB,EAAe,EAAE,YAAS,gBAAkC;AAE1E,QADI,EAAQ,WAAW,IAAU,OAE/B,kBAAC,OAAD;EACE,WAAW,EACT,mBACA,EAAQ,WAAW,IAAI,gBAAgB,8BACvC,EACD;YAEA,EAAQ,KAAK,MACZ,kBAAC,OAAD;GAEE,WAAW,EACT,sDACA,EAAQ,WAAW,IAAI,aAAa,gBACrC;aAED,kBAAC,GAAD;IAAW,QAAQ;IAAI,KAAI;IAAkB,WAAU;IAAkB,CAAA;GACrE,EAPC,EAOD,CACN;EACE,CAAA"}

package/dist/comradecircle/components/MemberIdentity.js CHANGED Viewed

@@ -17,8 +17,10 @@ var s = ({ memberId: s, variant: c = "inline", size: l = "sm", suffix: u, showPr
 		className: t("flex items-center gap-2.5 text-left", f && "rounded-lg transition-colors hover:opacity-80", p),
 		children: [/* @__PURE__ */ i(r, {
 			name: v,
+			seed: s,
 			size: l,
-			presence: y
+			presence: y,
+			fileId: g?.avatar?.id
 		}), /* @__PURE__ */ a("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ a("div", {
@@ -26,7 +28,7 @@ var s = ({ memberId: s, variant: c = "inline", size: l = "sm", suffix: u, showPr
 				children: [/* @__PURE__ */ i("span", {
 					className: "truncate text-sm font-medium text-text-primary",
 					children: _
-				}), u && c === "inline" && /* @__PURE__ */ a("span", {
+				}), u && /* @__PURE__ */ a("span", {
 					className: "shrink-0 text-xs text-text-tertiary",
 					children: ["· ", u]
 				})]

package/dist/comradecircle/components/MemberIdentity.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MemberIdentity.js","names":[],"sources":["../../../src/comradecircle/components/MemberIdentity.tsx"],"sourcesContent":["/*\n MemberIdentity — resolve a `memberId` to a display name + avatar via the\n * product's own social-identity layer (`ComProfile`).\n * @module comradecircle/components\n \n The composed `User` entity resolves `id` only, so we never render a raw actor\n * id. Instead we look up the member's `ComProfile` (cached aggressively). The\n * calling user is labelled \"You\". If a member has not created a profile yet we\n * fall back to a neutral \"Member\" label with initials from the id.\n /\n\nimport type { FC } from 'react';\nimport { cn } from '../utils/cn';\nimport { useComProfile } from '../hooks';\nimport { useComradeCircle } from '../context';\nimport { Avatar } from './Avatar';\nimport type { ComPresence } from '../types';\n\ninterface MemberIdentityProps {\n memberId: string;\n /* Layout: 'inline' = avatar + name only; 'row' = avatar + name + headline. /\n variant?: 'inline' \| 'row';\n size?: 'xs' \| 'sm' \| 'md' \| 'lg';\n /* Suffix shown after the name (e.g. a timestamp) in inline variant. */\n suffix?: string;\n showPresence?: boolean;\n onClick?: () => void;\n className?: string;\n}\n\nfunction labelForMember(\n displayName: string \| undefined,\n isSelf: boolean\n): { name: string; presence?: ComPresence \| null } {\n if (displayName) return { name: isSelf ? `${displayName} (You)` : displayName };\n return { name: isSelf ? 'You' : 'Member' };\n}\n\nexport const MemberIdentity: FC<MemberIdentityProps> = ({\n memberId,\n variant = 'inline',\n size = 'sm',\n suffix,\n showPresence = false,\n onClick,\n className,\n}) => {\n const { currentUser } = useComradeCircle();\n const isSelf = Boolean(currentUser?.id && currentUser.id === memberId);\n const { data: profile } = useComProfile(memberId);\n\n const { name } = labelForMember(profile?.displayName ?? undefined, isSelf);\n const nameForAvatar = profile?.displayName ?? (isSelf ? (currentUser?.name ?? 'You') : memberId);\n const presence = showPresence ? (profile?.presence ?? null) : null;\n\n const Wrapper = onClick ? 'button' : 'div';\n\n return (\n <Wrapper\n type={onClick ? 'button' : undefined}\n onClick={onClick}\n className={cn(\n 'flex items-center gap-2.5 text-left',\n onClick && 'rounded-lg transition-colors hover:opacity-80',\n className\n )}\n >\n <Avatar name={nameForAvatar} size={size} presence={presence} />\n <div className=\"min-w-0\">\n <div className=\"flex items-center gap-1.5\">\n <span className=\"truncate text-sm font-medium text-text-primary\">{name}</span>\n {suffix && ~~variant === 'inline' && (\n~~ <span className=\"shrink-0 text-xs text-text-tertiary\">· {suffix}</span~~>\n )~~}\n </div>\n {variant === 'row' && profile?.headline && (\n <p className=\"truncate text-xs text-text-secondary\">{profile.headline}</p>\n )}\n </div>\n </Wrapper>\n );\n};\n"],"mappings":";;;;;;;;AA8BA,SAAS,EACP,GACA,GACiD;AAEjD,QADI,IAAoB,EAAE,MAAM,IAAS,GAAG,EAAY,UAAU,GAAa,GACxE,EAAE,MAAM,IAAS,QAAQ,UAAU;;AAG5C,IAAa,KAA2C,EACtD,aACA,aAAU,UACV,UAAO,MACP,WACA,kBAAe,IACf,YACA,mBACI;CACJ,IAAM,EAAE,mBAAgB,GAAkB,EACpC,IAAS,GAAQ,GAAa,MAAM,EAAY,OAAO,IACvD,EAAE,MAAM,MAAY,EAAc,EAAS,EAE3C,EAAE,YAAS,EAAe,GAAS,eAAe,KAAA,GAAW,EAAO,EACpE,IAAgB,GAAS,gBAAgB,IAAU,GAAa,QAAQ,QAAS,IACjF,IAAW,IAAgB,GAAS,YAAY,OAAQ;AAI9D,QACE,kBAHc,IAAU,WAAW,OAGnC;EACE,MAAM,IAAU,WAAW,KAAA;EAClB;EACT,WAAW,EACT,uCACA,KAAW,iDACX,EACD;YAPH,CASE,kBAAC,GAAD;~~GAAQ~~,MAAM;~~GAAqB~~;~~GAAgB~~;~~GAAY~~,CAAA,~~EAC/D~~,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAkD;KAAY,CAAA,EAC7E,KAAU,~~MAAY,YACrB,~~kBAAC,QAAD;KAAM,WAAU;eAAhB,CAAsD,MAAG,EAAc;~~OAErE~~;OACL,MAAY,SAAS,GAAS,YAC7B,kBAAC,KAAD;IAAG,WAAU;cAAwC,EAAQ;IAAa,CAAA,CAExE;KACE"}
1	+ {"version":3,"file":"MemberIdentity.js","names":[],"sources":["../../../src/comradecircle/components/MemberIdentity.tsx"],"sourcesContent":["/*\n MemberIdentity — resolve a `memberId` to a display name + avatar via the\n * product's own social-identity layer (`ComProfile`).\n * @module comradecircle/components\n \n The composed `User` entity resolves `id` only, so we never render a raw actor\n * id. Instead we look up the member's `ComProfile` (cached aggressively). The\n * calling user is labelled \"You\". If a member has not created a profile yet we\n * fall back to a neutral \"Member\" label with initials from the id.\n /\n\nimport type { FC } from 'react';\nimport { cn } from '../utils/cn';\nimport { useComProfile } from '../hooks';\nimport { useComradeCircle } from '../context';\nimport { Avatar } from './Avatar';\nimport type { ComPresence } from '../types';\n\ninterface MemberIdentityProps {\n memberId: string;\n /* Layout: 'inline' = avatar + name only; 'row' = avatar + name + headline. /\n variant?: 'inline' \| 'row';\n size?: 'xs' \| 'sm' \| 'md' \| 'lg';\n /* Suffix shown after the name (e.g. a timestamp) in inline variant. */\n suffix?: string;\n showPresence?: boolean;\n onClick?: () => void;\n className?: string;\n}\n\nfunction labelForMember(\n displayName: string \| undefined,\n isSelf: boolean\n): { name: string; presence?: ComPresence \| null } {\n if (displayName) return { name: isSelf ? `${displayName} (You)` : displayName };\n return { name: isSelf ? 'You' : 'Member' };\n}\n\nexport const MemberIdentity: FC<MemberIdentityProps> = ({\n memberId,\n variant = 'inline',\n size = 'sm',\n suffix,\n showPresence = false,\n onClick,\n className,\n}) => {\n const { currentUser } = useComradeCircle();\n const isSelf = Boolean(currentUser?.id && currentUser.id === memberId);\n const { data: profile } = useComProfile(memberId);\n\n const { name } = labelForMember(profile?.displayName ?? undefined, isSelf);\n const nameForAvatar = profile?.displayName ?? (isSelf ? (currentUser?.name ?? 'You') : memberId);\n const presence = showPresence ? (profile?.presence ?? null) : null;\n\n const Wrapper = onClick ? 'button' : 'div';\n\n return (\n <Wrapper\n type={onClick ? 'button' : undefined}\n onClick={onClick}\n className={cn(\n 'flex items-center gap-2.5 text-left',\n onClick && 'rounded-lg transition-colors hover:opacity-80',\n className\n )}\n >\n <Avatar\n name={nameForAvatar}\n seed={memberId}\n size={size}\n presence={presence}\n fileId={profile?.avatar?.id}\n />\n <div className=\"min-w-0\">\n <div className=\"flex items-center gap-1.5\">\n <span className=\"truncate text-sm font-medium text-text-primary\">{name}</span>\n {suffix && <span className=\"shrink-0 text-xs text-text-tertiary\">· {suffix}</span>}\n </div>\n {variant === 'row' && profile?.headline && (\n <p className=\"truncate text-xs text-text-secondary\">{profile.headline}</p>\n )}\n </div>\n </Wrapper>\n );\n};\n"],"mappings":";;;;;;;;AA8BA,SAAS,EACP,GACA,GACiD;AAEjD,QADI,IAAoB,EAAE,MAAM,IAAS,GAAG,EAAY,UAAU,GAAa,GACxE,EAAE,MAAM,IAAS,QAAQ,UAAU;;AAG5C,IAAa,KAA2C,EACtD,aACA,aAAU,UACV,UAAO,MACP,WACA,kBAAe,IACf,YACA,mBACI;CACJ,IAAM,EAAE,mBAAgB,GAAkB,EACpC,IAAS,GAAQ,GAAa,MAAM,EAAY,OAAO,IACvD,EAAE,MAAM,MAAY,EAAc,EAAS,EAE3C,EAAE,YAAS,EAAe,GAAS,eAAe,KAAA,GAAW,EAAO,EACpE,IAAgB,GAAS,gBAAgB,IAAU,GAAa,QAAQ,QAAS,IACjF,IAAW,IAAgB,GAAS,YAAY,OAAQ;AAI9D,QACE,kBAHc,IAAU,WAAW,OAGnC;EACE,MAAM,IAAU,WAAW,KAAA;EAClB;EACT,WAAW,EACT,uCACA,KAAW,iDACX,EACD;YAPH,CASE,kBAAC,GAAD;GACE,MAAM;GACN,MAAM;GACA;GACI;GACV,QAAQ,GAAS,QAAQ;GACzB,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAkD;KAAY,CAAA,EAC7E,KAAU,kBAAC,QAAD;KAAM,WAAU;eAAhB,CAAsD,MAAG,EAAc;OAC9E;OACL,MAAY,SAAS,GAAS,YAC7B,kBAAC,KAAD;IAAG,WAAU;cAAwC,EAAQ;IAAa,CAAA,CAExE;KACE"}

package/dist/comradecircle/components/PollCard.js CHANGED Viewed

@@ -5,54 +5,69 @@ import { describeError as r, notify as i } from "../lib/toast.js";
 import { formatNumber as a, formatRelativeTime as o } from "../utils/formatters.js";
 import { StatusBadge as s } from "./StatusBadge.js";
 import { MiniBar as c } from "./MiniBar.js";
-import { CheckCircle2 as l, Lock as u } from "lucide-react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Button as p, GlassCard as m } from "@burdenoff/fe-libs/ui";
+import { useMemo as l, useState as u } from "react";
+import { CheckCircle2 as d, Crown as f, Lock as p } from "lucide-react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Button as g, GlassCard as _ } from "@burdenoff/fe-libs/ui";
 //#region src/comradecircle/components/PollCard.tsx
-function h({ poll: h, canManage: g = !1 }) {
-	let _ = n(), v = t(), y = h.options.reduce((e, t) => e + t.voteCount, 0), b = h.status === "CLOSED", x = async (e) => {
-		if (!b) try {
-			await _.mutateAsync({
-				pollId: h.id,
+function v({ poll: v, canManage: y = !1 }) {
+	let b = n(), x = t(), [S, C] = u(/* @__PURE__ */ new Set()), w = v.options.reduce((e, t) => e + t.voteCount, 0), T = v.status === "CLOSED", E = l(() => v.options.reduce((e, t) => Math.max(e, t.voteCount), 0), [v.options]), D = S.size > 0, O = async (e) => {
+		if (!T) try {
+			await b.mutateAsync({
+				pollId: v.id,
 				optionId: e,
-				circleId: h.circleId
-			}), i.success("Vote recorded");
+				circleId: v.circleId
+			}), C((t) => new Set(t).add(e)), i.success("Vote recorded");
 		} catch (e) {
 			i.error("Could not vote", r(e));
 		}
-	}, S = async () => {
+	}, k = async () => {
 		try {
-			await v.mutateAsync(h.id), i.success("Poll closed");
+			await x.mutateAsync(v.id), i.success("Poll closed");
 		} catch (e) {
 			i.error("Could not close poll", r(e));
 		}
 	};
-	return /* @__PURE__ */ f(m, {
+	return /* @__PURE__ */ h(_, {
 		treatment: "plain",
 		className: "p-5",
 		children: [
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ h("div", {
 				className: "flex items-start justify-between gap-3",
-				children: [/* @__PURE__ */ d("h3", {
+				children: [/* @__PURE__ */ m("h3", {
 					className: "text-base font-semibold text-text-primary",
-					children: h.question
-				}), /* @__PURE__ */ d(s, { status: h.status })]
+					children: v.question
+				}), /* @__PURE__ */ m(s, { status: v.status })]
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ m("div", {
 				className: "mt-4 flex flex-col gap-2.5",
-				children: [...h.options].sort((e, t) => e.position - t.position).map((t) => {
-					let n = y > 0 ? t.voteCount / y * 100 : 0;
-					return /* @__PURE__ */ f("button", {
+				children: [...v.options].sort((e, t) => e.position - t.position).map((t) => {
+					let n = w > 0 ? t.voteCount / w * 100 : 0, r = w > 0 && t.voteCount === E, i = S.has(t.id);
+					return /* @__PURE__ */ h("button", {
 						type: "button",
-						onClick: () => x(t.id),
-						disabled: b || _.isPending,
-						className: e("group w-full rounded-xl border border-border-seam px-3 py-2.5 text-left transition-colors", !b && "hover:border-accent hover:bg-bg-sunken/60", b && "cursor-default"),
-						children: [/* @__PURE__ */ f("div", {
+						onClick: () => O(t.id),
+						disabled: T || b.isPending,
+						"aria-pressed": i,
+						className: e("group w-full rounded-xl border px-3 py-2.5 text-left transition-all duration-200", i ? "border-accent bg-[var(--color-accent-soft)]/40" : "border-border-seam", !T && !i && "hover:-translate-y-px hover:border-accent hover:bg-bg-sunken/60", T && "cursor-default"),
+						children: [/* @__PURE__ */ h("div", {
 							className: "flex items-center justify-between gap-2",
-							children: [/* @__PURE__ */ d("span", {
-								className: "text-sm font-medium text-text-primary",
-								children: t.label
-							}), /* @__PURE__ */ f("span", {
+							children: [/* @__PURE__ */ h("span", {
+								className: "flex min-w-0 items-center gap-1.5",
+								children: [
+									i && /* @__PURE__ */ m(d, {
+										className: "h-4 w-4 shrink-0 text-accent",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ m("span", {
+										className: e("truncate text-sm", r ? "font-semibold text-text-primary" : "font-medium text-text-secondary"),
+										children: t.label
+									}),
+									r && w > 1 && /* @__PURE__ */ m(f, {
+										className: "h-3.5 w-3.5 shrink-0 text-status-warning-text",
+										"aria-label": "Leading"
+									})
+								]
+							}), /* @__PURE__ */ h("span", {
 								className: "shrink-0 text-xs tabular-nums text-text-secondary",
 								children: [
 									a(t.voteCount),
@@ -61,37 +76,43 @@ function h({ poll: h, canManage: g = !1 }) {
 									"%"
 								]
 							})]
-						}), /* @__PURE__ */ d(c, {
+						}), /* @__PURE__ */ m(c, {
 							value: n,
-							className: "mt-2"
+							className: "mt-2",
+							barClassName: r ? "bg-gradient-to-r from-accent to-[var(--color-accent-soft)]" : "bg-accent/40"
 						})]
 					}, t.id);
 				})
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ h("div", {
 				className: "mt-4 flex items-center justify-between gap-3 border-t border-border-seam pt-3 text-xs text-text-tertiary",
-				children: [/* @__PURE__ */ f("span", {
-					className: "inline-flex items-center gap-1.5",
+				children: [/* @__PURE__ */ h("span", {
+					className: "inline-flex flex-wrap items-center gap-1.5",
 					children: [
-						h.allowMultiple ? /* @__PURE__ */ d(l, { className: "h-3.5 w-3.5" }) : null,
-						a(y),
+						v.allowMultiple ? /* @__PURE__ */ m(d, { className: "h-3.5 w-3.5" }) : null,
+						a(w),
 						" vote",
-						y === 1 ? "" : "s",
-						h.isAnonymous ? " · anonymous" : "",
-						h.closesAt ? ` · closes ${o(h.closesAt)}` : ""
+						w === 1 ? "" : "s",
+						v.allowMultiple ? " · multiple choice" : "",
+						v.isAnonymous ? " · anonymous" : "",
+						v.closesAt ? ` · closes ${o(v.closesAt)}` : "",
+						D && /* @__PURE__ */ m("span", {
+							className: "font-medium text-accent",
+							children: "· You voted"
+						})
 					]
-				}), g && !b && /* @__PURE__ */ f(p, {
+				}), y && !T && /* @__PURE__ */ h(g, {
 					size: "sm",
 					variant: "outline",
-					onClick: S,
-					disabled: v.isPending,
-					children: [/* @__PURE__ */ d(u, { className: "mr-1.5 h-3.5 w-3.5" }), " Close"]
+					onClick: k,
+					disabled: x.isPending,
+					children: [/* @__PURE__ */ m(p, { className: "mr-1.5 h-3.5 w-3.5" }), " Close"]
 				})]
 			})
 		]
 	});
 }
 //#endregion
-export { h as PollCard };
+export { v as PollCard };
 //# sourceMappingURL=PollCard.js.map

package/dist/comradecircle/components/PollCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PollCard.js","names":[],"sources":["../../../src/comradecircle/components/PollCard.tsx"],"sourcesContent":["/*\n PollCard — a circle poll with vote + live results.\n * @module comradecircle/components\n \n Writes `comVotePoll(pollId, optionId)` and `comClosePoll`. Options render as\n * clickable result bars; a closed poll (or one past its close time) is read-only.\n * ~~The~~ ~~creator~~ ~~can~~ ~~close~~ an ~~open poll.\n /\n\~~nimport { CheckCircle2, Lock } from 'lucide-react';\nimport { GlassCard, Button } from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/cn';\nimport { MiniBar } from './MiniBar';\nimport { StatusBadge } from './StatusBadge';\nimport { useComVotePoll, useComClosePoll } from '../hooks';\nimport { formatNumber, formatRelativeTime } from '../utils/formatters';\nimport { notify, describeError } from '../lib/toast';\nimport type { ComPoll } from '../types';\n\ninterface PollCardProps {\n poll: ComPoll;\n /* Whether the caller may close the poll (creator / circle admin). /\n canManage?: boolean;\n}\n\nexport function PollCard({ poll, canManage = false }: PollCardProps) {\n const vote = useComVotePoll();\n const close = useComClosePoll();\n\n const totalVotes = poll.options.reduce((sum, o) => sum + o.voteCount, 0);\n const isClosed = poll.status === 'CLOSED';\n\n const doVote = async (optionId: string) => {\n if (isClosed) return;\n try {\n await vote.mutateAsync({ pollId: poll.id, optionId, circleId: poll.circleId });\n notify.success('Vote recorded');\n } catch (err) {\n notify.error('Could not vote', describeError(err));\n }\n };\n\n const doClose = async () => {\n try {\n await close.mutateAsync(poll.id);\n notify.success('Poll closed');\n } catch (err) {\n notify.error('Could not close poll', describeError(err));\n }\n };\n\n return (\n <GlassCard treatment=\"plain\" className=\"p-5\">\n <div className=\"flex items-start justify-between gap-3\">\n <h3 className=\"text-base font-semibold text-text-primary\">{poll.question}</h3>\n <StatusBadge status={poll.status} />\n </div>\n\n <div className=\"mt-4 flex flex-col gap-2.5\">\n {[...poll.options]\n .sort((a, b) => a.position - b.position)\n .map((opt) => {\n const pct = totalVotes > 0 ? (opt.voteCount / totalVotes) 100 : 0;\n return (\n <button\n key={opt.id}\n type=\"button\"\n onClick={() => doVote(opt.id)}\n disabled={isClosed \|\| vote.isPending}\n className={cn(\n 'group w-full rounded-xl border ~~border-border-seam~~ px-3 py-2.5 text-left transition-~~colors~~',\n !isClosed && 'hover:border-accent hover:bg-bg-sunken/60',\n isClosed && 'cursor-default'\n )}\n >\n <div className=\"flex items-center justify-between gap-2\">\n <span className=\"text-sm font-~~medium~~ text-text-primary\">{opt.label}</span>\n <span className=\"shrink-0 text-xs tabular-nums text-text-secondary\">\n {formatNumber(opt.voteCount)} · {Math.round(pct)}%\n </span>\n </div>\n <MiniBar value={pct} className=\"mt-2\" />\n </button>\n );\n })}\n </div>\n\n <div className=\"mt-4 flex items-center justify-between gap-3 border-t border-border-seam pt-3 text-xs text-text-tertiary\">\n <span className=\"inline-flex items-center gap-1.5\">\n {poll.allowMultiple ? <CheckCircle2 className=\"h-3.5 w-3.5\" /> : null}\n {formatNumber(totalVotes)} vote{totalVotes === 1 ? '' : 's'}\n {poll.isAnonymous ? ' · anonymous' : ''}\n {poll.closesAt ? ` · closes ${formatRelativeTime(poll.closesAt)}` : ''}\n </span>\n {canManage && !isClosed && (\n <Button size=\"sm\" variant=\"outline\" onClick={doClose} disabled={close.isPending}>\n <Lock className=\"mr-1.5 h-3.5 w-3.5\" /> Close\n </Button>\n )}\n </div>\n </GlassCard>\n );\n}\n"],"mappings":"~~;;;;;;;;;;;AAyBA~~,SAAgB,EAAS,EAAE,SAAM,eAAY,MAAwB;CACnE,IAAM,IAAO,GAAgB,EACvB,IAAQ,GAAiB,~~EAEzB~~,IAAa,EAAK,QAAQ,QAAQ,GAAK,MAAM,IAAM,EAAE,WAAW,EAAE,EAClE,IAAW,EAAK,WAAW,~~UAE3B~~,IAAS,OAAO,MAAqB;AACrC,SACJ,KAAI;~~AAEF~~,~~GADA~~,MAAM,EAAK,YAAY;IAAE,QAAQ,EAAK;IAAI;IAAU,UAAU,EAAK;IAAU,CAAC,EAC9E,EAAO,QAAQ,gBAAgB;WACxB,GAAK;AACZ,KAAO,MAAM,kBAAkB,EAAc,EAAI,CAAC;;IAIhD,IAAU,YAAY;AAC1B,MAAI;AAEF,GADA,MAAM,EAAM,YAAY,EAAK,GAAG,EAChC,EAAO,QAAQ,cAAc;WACtB,GAAK;AACZ,KAAO,MAAM,wBAAwB,EAAc,EAAI,CAAC;;;AAI5D,QACE,kBAAC,GAAD;EAAW,WAAU;EAAQ,WAAU;YAAvC;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAA6C,EAAK;KAAc,CAAA,EAC9E,kBAAC,GAAD,EAAa,QAAQ,EAAK,QAAU,CAAA,CAChC;;GAEN,kBAAC,OAAD;IAAK,WAAU;cACZ,CAAC,GAAG,EAAK,QAAQ,CACf,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,SAAS,CACvC,KAAK,MAAQ;KACZ,IAAM,IAAM,IAAa,IAAK,EAAI,YAAY,IAAc,MAAM;~~AAClE~~,YACE,kBAAC,UAAD;MAEE,MAAK;MACL,eAAe,EAAO,EAAI,GAAG;MAC7B,UAAU,KAAY,EAAK;MAC3B,WAAW,EACT,~~6FACA~~,CAAC,~~KAAY~~,~~6CACb~~,KAAY,iBACb;~~gBATH~~,~~CAWE~~,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;~~kBAAyC~~,EAAI;~~QAAa~~,CAAA,~~EAC1E~~,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACG,EAAa,EAAI,UAAU;SAAC;SAAI,KAAK,MAAM,EAAI;SAAC;SAC5C;UACH;UACN,kBAAC,GAAD;~~OAAS~~,OAAO;~~OAAK~~,WAAU;~~OAAS~~,CAAA,~~CACjC~~;~~QAjBF~~,EAAI,~~GAiBF~~;MAEX;IACA,CAAA;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,EAAK,gBAAgB,kBAAC,GAAD,EAAc,WAAU,eAAgB,CAAA,GAAG;MAChE,EAAa,EAAW;MAAC;MAAM,MAAe,IAAI,KAAK;MACvD,EAAK,cAAc,iBAAiB;MACpC,EAAK,WAAW,aAAa,EAAmB,EAAK,SAAS,KAAK;~~MAC/D~~;QACN,KAAa,CAAC,KACb,kBAAC,GAAD;KAAQ,MAAK;KAAK,SAAQ;KAAU,SAAS;KAAS,UAAU,EAAM;eAAtE,CACE,kBAAC,GAAD,EAAM,WAAU,sBAAuB,CAAA,EAAA,SAChC;OAEP;;GACI"}
1	+ {"version":3,"file":"PollCard.js","names":[],"sources":["../../../src/comradecircle/components/PollCard.tsx"],"sourcesContent":["/*\n PollCard — a circle poll with vote + live results.\n * @module comradecircle/components\n \n Writes `comVotePoll(pollId, optionId)` and `comClosePoll`. Options render as\n * clickable result bars; the leading option is emphasised with an accent\n * gradient fill and the caller's own voted option(s) are checkmarked (tracked\n * client-side — the poll query returns aggregate counts, not per-member votes).\n * A closed poll (or one past its close time) is read-only.\n /\n\nimport { useMemo, useState } from 'react';\nimport { CheckCircle2, Lock, Crown } from 'lucide-react';\nimport { GlassCard, Button } from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/cn';\nimport { MiniBar } from './MiniBar';\nimport { StatusBadge } from './StatusBadge';\nimport { useComVotePoll, useComClosePoll } from '../hooks';\nimport { formatNumber, formatRelativeTime } from '../utils/formatters';\nimport { notify, describeError } from '../lib/toast';\nimport type { ComPoll } from '../types';\n\ninterface PollCardProps {\n poll: ComPoll;\n /* Whether the caller may close the poll (creator / circle admin). /\n canManage?: boolean;\n}\n\nexport function PollCard({ poll, canManage = false }: PollCardProps) {\n const vote = useComVotePoll();\n const close = useComClosePoll();\n // The poll query returns aggregate voteCounts, not per-member votes, so track\n // the options this caller has voted for in this session for the \"You voted\" cue.\n const [votedIds, setVotedIds] = useState<Set<string>>(new Set());\n\n const totalVotes = poll.options.reduce((sum, o) => sum + o.voteCount, 0);\n const isClosed = poll.status === 'CLOSED';\n const leadingCount = useMemo(\n () => poll.options.reduce((max, o) => Math.max(max, o.voteCount), 0),\n [poll.options]\n );\n const hasVoted = votedIds.size > 0;\n\n const doVote = async (optionId: string) => {\n if (isClosed) return;\n try {\n await vote.mutateAsync({ pollId: poll.id, optionId, circleId: poll.circleId });\n setVotedIds((prev) => new Set(prev).add(optionId));\n notify.success('Vote recorded');\n } catch (err) {\n notify.error('Could not vote', describeError(err));\n }\n };\n\n const doClose = async () => {\n try {\n await close.mutateAsync(poll.id);\n notify.success('Poll closed');\n } catch (err) {\n notify.error('Could not close poll', describeError(err));\n }\n };\n\n return (\n <GlassCard treatment=\"plain\" className=\"p-5\">\n <div className=\"flex items-start justify-between gap-3\">\n <h3 className=\"text-base font-semibold text-text-primary\">{poll.question}</h3>\n <StatusBadge status={poll.status} />\n </div>\n\n <div className=\"mt-4 flex flex-col gap-2.5\">\n {[...poll.options]\n .sort((a, b) => a.position - b.position)\n .map((opt) => {\n const pct = totalVotes > 0 ? (opt.voteCount / totalVotes) 100 : 0;\n const isLeading = totalVotes > 0 && opt.voteCount === leadingCount;\n const isMine = votedIds.has(opt.id);\n return (\n <button\n key={opt.id}\n type=\"button\"\n onClick={() => doVote(opt.id)}\n disabled={isClosed \|\| vote.isPending}\n aria-pressed={isMine}\n className={cn(\n 'group w-full rounded-xl border px-3 py-2.5 text-left transition-all duration-200',\n isMine ? 'border-accent bg-[var(--color-accent-soft)]/40' : 'border-border-seam',\n !isClosed &&\n !isMine &&\n 'hover:-translate-y-px hover:border-accent hover:bg-bg-sunken/60',\n isClosed && 'cursor-default'\n )}\n >\n <div className=\"flex items-center justify-between gap-2\">\n <span className=\"flex min-w-0 items-center gap-1.5\">\n {isMine && (\n <CheckCircle2 className=\"h-4 w-4 shrink-0 text-accent\" aria-hidden=\"true\" />\n )}\n <span\n className={cn(\n 'truncate text-sm',\n isLeading\n ? 'font-semibold text-text-primary'\n : 'font-medium text-text-secondary'\n )}\n >\n {opt.label}\n </span>\n {isLeading && totalVotes > 1 && (\n <Crown\n className=\"h-3.5 w-3.5 shrink-0 text-status-warning-text\"\n aria-label=\"Leading\"\n />\n )}\n </span>\n <span className=\"shrink-0 text-xs tabular-nums text-text-secondary\">\n {formatNumber(opt.voteCount)} · {Math.round(pct)}%\n </span>\n </div>\n <MiniBar\n value={pct}\n className=\"mt-2\"\n barClassName={\n isLeading\n ? 'bg-gradient-to-r from-accent to-[var(--color-accent-soft)]'\n : 'bg-accent/40'\n }\n />\n </button>\n );\n })}\n </div>\n\n <div className=\"mt-4 flex items-center justify-between gap-3 border-t border-border-seam pt-3 text-xs text-text-tertiary\">\n <span className=\"inline-flex flex-wrap items-center gap-1.5\">\n {poll.allowMultiple ? <CheckCircle2 className=\"h-3.5 w-3.5\" /> : null}\n {formatNumber(totalVotes)} vote{totalVotes === 1 ? '' : 's'}\n {poll.allowMultiple ? ' · multiple choice' : ''}\n {poll.isAnonymous ? ' · anonymous' : ''}\n {poll.closesAt ? ` · closes ${formatRelativeTime(poll.closesAt)}` : ''}\n {hasVoted && <span className=\"font-medium text-accent\">· You voted</span>}\n </span>\n {canManage && !isClosed && (\n <Button size=\"sm\" variant=\"outline\" onClick={doClose} disabled={close.isPending}>\n <Lock className=\"mr-1.5 h-3.5 w-3.5\" /> Close\n </Button>\n )}\n </div>\n </GlassCard>\n );\n}\n"],"mappings":"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"}

package/dist/comradecircle/components/PostCard.js CHANGED Viewed

@@ -8,16 +8,17 @@ import { describeError as a, notify as o } from "../lib/toast.js";
 import { ReactionBar as s } from "./ReactionBar.js";
 import { formatRelativeTime as c } from "../utils/formatters.js";
 import { CommentThread as l } from "./CommentThread.js";
-import { useState as u } from "react";
-import { MessageSquare as d, MoreHorizontal as f, Paperclip as p, Pencil as m, Pin as h, Trash2 as g } from "lucide-react";
+import { AttachmentGrid as u } from "./ImageAttachments.js";
+import { useState as d } from "react";
+import { MessageSquare as f, MoreHorizontal as p, Pencil as m, Pin as h, Trash2 as g } from "lucide-react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 import { Button as y, DropdownMenu as b, DropdownMenuContent as x, DropdownMenuItem as S, DropdownMenuSeparator as C, DropdownMenuTrigger as w, GlassCard as T, Textarea as E } from "@burdenoff/fe-libs/ui";
 //#region src/comradecircle/components/PostCard.tsx
 function D({ post: D, defaultExpanded: O = !1 }) {
-	let { currentUser: k } = e(), A = r(), j = n(), [M, N] = u(O), [P, F] = u(!1), [I, L] = u(D.body), R = !!(k?.id && k.id === D.authorId);
+	let { currentUser: k } = e(), A = r(), j = n(), [M, N] = d(O), [P, F] = d(!1), [I, L] = d(D.body), R = !!(k?.id && k.id === D.authorId);
 	return /* @__PURE__ */ v(T, {
 		treatment: "plain",
-		className: t("p-4", D.isPinned && "ring-1 ring-accent/40"),
+		className: t("p-4 transition-all duration-200 motion-safe:hover:-translate-y-0.5 hover:border-[var(--color-accent-soft)]", D.isPinned && "ring-1 ring-accent/40"),
 		children: [
 			/* @__PURE__ */ v("div", {
 				className: "flex items-start justify-between gap-3",
@@ -38,7 +39,7 @@ function D({ post: D, defaultExpanded: O = !1 }) {
 							type: "button",
 							"aria-label": "Post actions",
 							className: "rounded-lg p-1.5 text-text-tertiary transition-colors hover:bg-bg-sunken hover:text-text-primary",
-							children: /* @__PURE__ */ _(f, { className: "h-4 w-4" })
+							children: /* @__PURE__ */ _(p, { className: "h-4 w-4" })
 						})
 					}), /* @__PURE__ */ v(x, {
 						align: "end",
@@ -131,15 +132,7 @@ function D({ post: D, defaultExpanded: O = !1 }) {
 					children: ["#", e]
 				}, e))
 			}),
-			D.attachmentFileIds.length > 0 && /* @__PURE__ */ v("div", {
-				className: "mt-2 inline-flex items-center gap-1.5 text-xs text-text-tertiary",
-				children: [
-					/* @__PURE__ */ _(p, { className: "h-3.5 w-3.5" }),
-					D.attachmentFileIds.length,
-					" attachment",
-					D.attachmentFileIds.length === 1 ? "" : "s"
-				]
-			}),
+			D.attachmentFileIds.length > 0 && /* @__PURE__ */ _(u, { fileIds: D.attachmentFileIds }),
 			/* @__PURE__ */ v("div", {
 				className: "mt-3 flex items-center justify-between gap-3 border-t border-border-seam pt-3",
 				children: [/* @__PURE__ */ _(s, { post: D }), /* @__PURE__ */ v("button", {
@@ -148,7 +141,7 @@ function D({ post: D, defaultExpanded: O = !1 }) {
 					"aria-expanded": M,
 					className: t("inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium transition-colors", M ? "bg-[var(--color-accent-soft)] text-text-primary" : "text-text-secondary hover:bg-bg-sunken hover:text-text-primary"),
 					children: [
-						/* @__PURE__ */ _(d, { className: "h-3.5 w-3.5" }),
+						/* @__PURE__ */ _(f, { className: "h-3.5 w-3.5" }),
 						/* @__PURE__ */ _("span", {
 							className: "tabular-nums",
 							children: D.commentCount

package/dist/comradecircle/components/PostCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PostCard.js","names":[],"sources":["../../../src/comradecircle/components/PostCard.tsx"],"sourcesContent":["/*\n PostCard — a single post with reactions and a collapsible comment thread.\n * @module comradecircle/components\n \n Reads its data from a `ComPost`; writes via `comUpdatePost` (edit / pin) and\n * `comRemovePost` (delete). Reactions + comments are delegated to\n * {@link ReactionBar} and {@link CommentThread}. Author-only actions (edit, pin,\n * delete) are gated on `authorId === currentUser.id`.\n /\n\nimport { useState } from 'react';\nimport { MessageSquare, MoreHorizontal, Pin, Pencil, Trash2, Paperclip } from 'lucide-react';\nimport {\n GlassCard,\n Button,\n Textarea,\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n} from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/cn';\nimport { MemberIdentity } from './MemberIdentity';\nimport { ReactionBar } from './ReactionBar';\nimport { CommentThread } from './CommentThread';\nimport { useComUpdatePost, useComRemovePost } from '../hooks';\nimport { useComradeCircle } from '../context';\nimport { formatRelativeTime } from '../utils/formatters';\nimport { notify, describeError } from '../lib/toast';\nimport type { ComPost } from '../types';\n\ninterface PostCardProps {\n post: ComPost;\n /* Start with the comment thread open. */\n defaultExpanded?: boolean;\n}\n\nexport function PostCard({ post, defaultExpanded = false }: PostCardProps) {\n const { currentUser } = useComradeCircle();\n const updatePost = useComUpdatePost();\n const removePost = useComRemovePost();\n const [expanded, setExpanded] = useState(defaultExpanded);\n const [editing, setEditing] = useState(false);\n const [draft, setDraft] = useState(post.body);\n\n const isAuthor = Boolean(currentUser?.id && currentUser.id === post.authorId);\n\n const saveEdit = async () => {\n const text = draft.trim();\n if (!text \|\| text === post.body) {\n setEditing(false);\n return;\n }\n try {\n await updatePost.mutateAsync({ id: post.id, input: { body: text } });\n setEditing(false);\n notify.success('Post updated');\n } catch (err) {\n notify.error('Could not update post', describeError(err));\n }\n };\n\n const togglePin = async () => {\n try {\n await updatePost.mutateAsync({ id: post.id, input: { isPinned: !post.isPinned } });\n notify.success(post.isPinned ? 'Post unpinned' : 'Post pinned');\n } catch (err) {\n notify.error('Could not update post', describeError(err));\n }\n };\n\n const remove = async () => {\n try {\n await removePost.mutateAsync({ id: post.id, channelId: post.channelId });\n notify.success('Post removed');\n } catch (err) {\n notify.error('Could not remove post', describeError(err));\n }\n };\n\n return (\n <GlassCard treatment=\"plain\" className={cn('p-4', post.isPinned && 'ring-1 ring-accent/40')}>\n <div className=\"flex items-start justify-between gap-3\">\n <MemberIdentity\n memberId={post.authorId}\n variant=\"row\"\n size=\"md\"\n suffix={formatRelativeTime(post.createdAt)}\n showPresence\n />\n <div className=\"flex items-center gap-1\">\n {post.isPinned && (\n <span className=\"inline-flex items-center gap-1 rounded-full bg-[var(--color-accent-soft)] px-2 py-0.5 text-xs font-medium text-text-primary\">\n <Pin className=\"h-3 w-3\" /> Pinned\n </span>\n )}\n {isAuthor && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <button\n type=\"button\"\n aria-label=\"Post actions\"\n className=\"rounded-lg p-1.5 text-text-tertiary transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n >\n <MoreHorizontal className=\"h-4 w-4\" />\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={() => setEditing(true)}>\n <Pencil className=\"mr-2 h-4 w-4\" /> Edit\n </DropdownMenuItem>\n <DropdownMenuItem onClick={togglePin}>\n <Pin className=\"mr-2 h-4 w-4\" /> {post.isPinned ? 'Unpin' : 'Pin'}\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem\n onClick={remove}\n className=\"text-status-error-text focus:text-status-error-text\"\n >\n <Trash2 className=\"mr-2 h-4 w-4\" /> Delete\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n </div>\n </div>\n\n {editing ? (\n <div className=\"mt-3\">\n <Textarea\n value={draft}\n onChange={(e) => setDraft(e.target.value)}\n rows={3}\n className=\"resize-none\"\n />\n <div className=\"mt-2 flex justify-end gap-2\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => {\n setDraft(post.body);\n setEditing(false);\n }}\n >\n Cancel\n </Button>\n <Button size=\"sm\" onClick={saveEdit} disabled={updatePost.isPending}>\n Save\n </Button>\n </div>\n </div>\n ) : (\n <p className=\"mt-3 whitespace-pre-wrap break-words text-sm text-text-primary\">\n {post.body}\n </p>\n )}\n\n {post.tags.length > 0 && (\n <div className=\"mt-2 flex flex-wrap gap-1.5\">\n {post.tags.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 {post.attachmentFileIds.length > 0 && (\n <div className=\"mt-2 inline-flex items-center gap-1.5 text-xs text-text-tertiary\">\n <Paperclip className=\"h-3.5 w-3.5\" />\n {post.attachmentFileIds.length} attachment\n {post.attachmentFileIds.length === 1 ? '' : 's'}\n </div>\n )}\n\n <div className=\"mt-3 flex items-center justify-between gap-3 border-t border-border-seam pt-3\">\n <ReactionBar post={post} />\n <button\n type=\"button\"\n onClick={() => setExpanded((s) => !s)}\n aria-expanded={expanded}\n className={cn(\n 'inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium transition-colors',\n expanded\n ? 'bg-[var(--color-accent-soft)] text-text-primary'\n : 'text-text-secondary hover:bg-bg-sunken hover:text-text-primary'\n )}\n >\n <MessageSquare className=\"h-3.5 w-3.5\" />\n <span className=\"tabular-nums\">{post.commentCount}</span>\n <span className=\"hidden sm:inline\">\n {post.commentCount === 1 ? 'comment' : 'comments'}\n </span>\n </button>\n </div>\n\n {expanded && <CommentThread postId={post.id} />}\n </GlassCard>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"PostCard.js","names":[],"sources":["../../../src/comradecircle/components/PostCard.tsx"],"sourcesContent":["/*\n PostCard — a single post with reactions and a collapsible comment thread.\n * @module comradecircle/components\n \n Reads its data from a `ComPost`; writes via `comUpdatePost` (edit / pin) and\n * `comRemovePost` (delete). Reactions + comments are delegated to\n * {@link ReactionBar} and {@link CommentThread}. Author-only actions (edit, pin,\n * delete) are gated on `authorId === currentUser.id`.\n /\n\nimport { useState } from 'react';\nimport { MessageSquare, MoreHorizontal, Pin, Pencil, Trash2 } from 'lucide-react';\nimport {\n GlassCard,\n Button,\n Textarea,\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n} from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/cn';\nimport { MemberIdentity } from './MemberIdentity';\nimport { ReactionBar } from './ReactionBar';\nimport { CommentThread } from './CommentThread';\nimport { AttachmentGrid } from './ImageAttachments';\nimport { useComUpdatePost, useComRemovePost } from '../hooks';\nimport { useComradeCircle } from '../context';\nimport { formatRelativeTime } from '../utils/formatters';\nimport { notify, describeError } from '../lib/toast';\nimport type { ComPost } from '../types';\n\ninterface PostCardProps {\n post: ComPost;\n /* Start with the comment thread open. */\n defaultExpanded?: boolean;\n}\n\nexport function PostCard({ post, defaultExpanded = false }: PostCardProps) {\n const { currentUser } = useComradeCircle();\n const updatePost = useComUpdatePost();\n const removePost = useComRemovePost();\n const [expanded, setExpanded] = useState(defaultExpanded);\n const [editing, setEditing] = useState(false);\n const [draft, setDraft] = useState(post.body);\n\n const isAuthor = Boolean(currentUser?.id && currentUser.id === post.authorId);\n\n const saveEdit = async () => {\n const text = draft.trim();\n if (!text \|\| text === post.body) {\n setEditing(false);\n return;\n }\n try {\n await updatePost.mutateAsync({ id: post.id, input: { body: text } });\n setEditing(false);\n notify.success('Post updated');\n } catch (err) {\n notify.error('Could not update post', describeError(err));\n }\n };\n\n const togglePin = async () => {\n try {\n await updatePost.mutateAsync({ id: post.id, input: { isPinned: !post.isPinned } });\n notify.success(post.isPinned ? 'Post unpinned' : 'Post pinned');\n } catch (err) {\n notify.error('Could not update post', describeError(err));\n }\n };\n\n const remove = async () => {\n try {\n await removePost.mutateAsync({ id: post.id, channelId: post.channelId });\n notify.success('Post removed');\n } catch (err) {\n notify.error('Could not remove post', describeError(err));\n }\n };\n\n return (\n <GlassCard\n treatment=\"plain\"\n className={cn(\n 'p-4 transition-all duration-200 motion-safe:hover:-translate-y-0.5 hover:border-[var(--color-accent-soft)]',\n post.isPinned && 'ring-1 ring-accent/40'\n )}\n >\n <div className=\"flex items-start justify-between gap-3\">\n <MemberIdentity\n memberId={post.authorId}\n variant=\"row\"\n size=\"md\"\n suffix={formatRelativeTime(post.createdAt)}\n showPresence\n />\n <div className=\"flex items-center gap-1\">\n {post.isPinned && (\n <span className=\"inline-flex items-center gap-1 rounded-full bg-[var(--color-accent-soft)] px-2 py-0.5 text-xs font-medium text-text-primary\">\n <Pin className=\"h-3 w-3\" /> Pinned\n </span>\n )}\n {isAuthor && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <button\n type=\"button\"\n aria-label=\"Post actions\"\n className=\"rounded-lg p-1.5 text-text-tertiary transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n >\n <MoreHorizontal className=\"h-4 w-4\" />\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={() => setEditing(true)}>\n <Pencil className=\"mr-2 h-4 w-4\" /> Edit\n </DropdownMenuItem>\n <DropdownMenuItem onClick={togglePin}>\n <Pin className=\"mr-2 h-4 w-4\" /> {post.isPinned ? 'Unpin' : 'Pin'}\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem\n onClick={remove}\n className=\"text-status-error-text focus:text-status-error-text\"\n >\n <Trash2 className=\"mr-2 h-4 w-4\" /> Delete\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n </div>\n </div>\n\n {editing ? (\n <div className=\"mt-3\">\n <Textarea\n value={draft}\n onChange={(e) => setDraft(e.target.value)}\n rows={3}\n className=\"resize-none\"\n />\n <div className=\"mt-2 flex justify-end gap-2\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => {\n setDraft(post.body);\n setEditing(false);\n }}\n >\n Cancel\n </Button>\n <Button size=\"sm\" onClick={saveEdit} disabled={updatePost.isPending}>\n Save\n </Button>\n </div>\n </div>\n ) : (\n <p className=\"mt-3 whitespace-pre-wrap break-words text-sm text-text-primary\">\n {post.body}\n </p>\n )}\n\n {post.tags.length > 0 && (\n <div className=\"mt-2 flex flex-wrap gap-1.5\">\n {post.tags.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 {post.attachmentFileIds.length > 0 && <AttachmentGrid fileIds={post.attachmentFileIds} />}\n\n <div className=\"mt-3 flex items-center justify-between gap-3 border-t border-border-seam pt-3\">\n <ReactionBar post={post} />\n <button\n type=\"button\"\n onClick={() => setExpanded((s) => !s)}\n aria-expanded={expanded}\n className={cn(\n 'inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium transition-colors',\n expanded\n ? 'bg-[var(--color-accent-soft)] text-text-primary'\n : 'text-text-secondary hover:bg-bg-sunken hover:text-text-primary'\n )}\n >\n <MessageSquare className=\"h-3.5 w-3.5\" />\n <span className=\"tabular-nums\">{post.commentCount}</span>\n <span className=\"hidden sm:inline\">\n {post.commentCount === 1 ? 'comment' : 'comments'}\n </span>\n </button>\n </div>\n\n {expanded && <CommentThread postId={post.id} />}\n </GlassCard>\n );\n}\n"],"mappings":"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"}

package/dist/comradecircle/components/PostComposer.js CHANGED Viewed

@@ -4,66 +4,76 @@ import { useComCreatePost as t } 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 { TagInput as a } from "./TagInput.js";
-import { useState as o } from "react";
-import { Send as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Button as u, GlassCard as d, Textarea as f } from "@burdenoff/fe-libs/ui";
+import { AttachmentPicker as a } from "./ImageAttachments.js";
+import { TagInput as o } from "./TagInput.js";
+import { useState as s } from "react";
+import { Send as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Button as d, GlassCard as f, Textarea as p } from "@burdenoff/fe-libs/ui";
 //#region src/comradecircle/components/PostComposer.tsx
-function p({ channelId: p, channelName: m, onPosted: h }) {
-	let { currentUser: g } = e(), _ = t(), [v, y] = o(""), [b, x] = o([]), [S, C] = o(!1), w = async () => {
-		let e = v.trim();
-		if (e) try {
-			await _.mutateAsync({
-				channelId: p,
+function m({ channelId: m, channelName: h, onPosted: g }) {
+	let { currentUser: _ } = e(), v = t(), [y, b] = s(""), [x, S] = s([]), [C, w] = s(!1), [T, E] = s([]), D = async () => {
+		let e = y.trim();
+		if (!(!e && T.length === 0)) try {
+			await v.mutateAsync({
+				channelId: m,
 				body: e,
-				tags: b.length ? b : null
-			}), y(""), x([]), C(!1), i.success("Posted", m ? `Shared to #${m}` : void 0), h?.();
+				tags: x.length ? x : null,
+				attachmentFileIds: T.length ? T : null
+			}), b(""), S([]), E([]), w(!1), i.success("Posted", h ? `Shared to #${h}` : void 0), g?.();
 		} catch (e) {
 			i.error("Could not publish post", r(e));
 		}
 	};
-	return /* @__PURE__ */ c(d, {
+	return /* @__PURE__ */ l(f, {
 		treatment: "plain",
 		className: "p-4",
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ u("div", {
 			className: "flex gap-3",
-			children: [/* @__PURE__ */ c(n, {
-				name: g?.name ?? g?.email ?? "You",
+			children: [/* @__PURE__ */ l(n, {
+				name: _?.name ?? _?.email ?? "You",
 				size: "md"
-			}), /* @__PURE__ */ l("div", {
+			}), /* @__PURE__ */ u("div", {
 				className: "flex-1",
 				children: [
-					/* @__PURE__ */ c(f, {
-						value: v,
-						onChange: (e) => y(e.target.value),
-						placeholder: m ? `Share something in #${m}…` : "Share something…",
+					/* @__PURE__ */ l(p, {
+						value: y,
+						onChange: (e) => b(e.target.value),
+						placeholder: h ? `Share something in #${h}…` : "Share something…",
 						rows: 2,
 						className: "resize-none border-0 bg-transparent px-0 shadow-none focus-visible:ring-0",
 						onKeyDown: (e) => {
-							e.key === "Enter" && (e.metaKey || e.ctrlKey) && (e.preventDefault(), w());
+							e.key === "Enter" && (e.metaKey || e.ctrlKey) && (e.preventDefault(), D());
 						}
 					}),
-					S && /* @__PURE__ */ c("div", {
+					C && /* @__PURE__ */ l("div", {
 						className: "mt-2",
-						children: /* @__PURE__ */ c(a, {
-							value: b,
-							onChange: x,
+						children: /* @__PURE__ */ l(o, {
+							value: x,
+							onChange: S,
 							placeholder: "Add topics…"
 						})
 					}),
 					/* @__PURE__ */ l("div", {
+						className: "mt-2",
+						children: /* @__PURE__ */ l(a, {
+							fileIds: T,
+							onChange: E,
+							disabled: v.isPending
+						})
+					}),
+					/* @__PURE__ */ u("div", {
 						className: "mt-3 flex items-center justify-between",
-						children: [/* @__PURE__ */ c("button", {
+						children: [/* @__PURE__ */ l("button", {
 							type: "button",
-							onClick: () => C((e) => !e),
+							onClick: () => w((e) => !e),
 							className: "text-xs font-medium text-text-secondary transition-colors hover:text-text-primary",
-							children: S ? "Hide topics" : "# Add topics"
-						}), /* @__PURE__ */ l(u, {
+							children: C ? "Hide topics" : "# Add topics"
+						}), /* @__PURE__ */ u(d, {
 							size: "sm",
-							onClick: w,
-							disabled: !v.trim() || _.isPending,
-							children: [/* @__PURE__ */ c(s, { className: "mr-1.5 h-4 w-4" }), " Post"]
+							onClick: D,
+							disabled: !y.trim() && T.length === 0 || v.isPending,
+							children: [/* @__PURE__ */ l(c, { className: "mr-1.5 h-4 w-4" }), " Post"]
 						})]
 					})
 				]
@@ -72,6 +82,6 @@ function p({ channelId: p, channelName: m, onPosted: h }) {
 	});
 }
 //#endregion
-export { p as PostComposer };
+export { m as PostComposer };
 //# sourceMappingURL=PostComposer.js.map