@burdenoff/microfe-theculturepost 2026.704.2 → 2026.705.2

package/dist/theculturepost/components/ReplyThread.js

@@ -1,160 +1,289 @@
-import { ErrorView as e, LoadingView as t } from "./StateViews.js";
-import { formatEnumLabel as n, formatRelativeTime as r } from "../utils/formatters.js";
-import { StatusBadge as i } from "./StatusBadge.js";
-import { AuthorLabel as a } from "./AuthorLabel.js";
-import { useTcpModerateReply as o, useTcpPostReply as s, useTcpReplies as c } from "../hooks/useTcpApi.js";
+import { useTheCulturePost as e } from "../context/TheCulturePostContext.js";
+import { cn as t } from "../utils/cn.js";
+import "../context/index.js";
+import { ErrorView as n, LoadingView as r } from "./StateViews.js";
+import { formatEnumLabel as i, formatRelativeTime as a } from "../utils/formatters.js";
+import { StatusBadge as o } from "./StatusBadge.js";
+import { AuthorLabel as s } from "./AuthorLabel.js";
+import { useTcpModerateReply as c, useTcpPostReply as l, useTcpReplies as u } from "../hooks/useTcpApi.js";
 import "../hooks/index.js";
-import { describeError as l, notify as u } from "../lib/toast.js";
-import { useState as d } from "react";
-import { MessageSquare as f, Send as p, ShieldAlert as m, Sparkle as h } from "lucide-react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Button as v, Input as y, Select as b, SelectContent as x, SelectItem as S, SelectTrigger as C, SelectValue as w, Spinner as T, Textarea as E } from "@burdenoff/fe-libs/ui";
+import { describeError as d, notify as f } from "../lib/toast.js";
+import { useMemo as p, useState as m } from "react";
+import { ArrowUpDown as h, CheckCircle2 as g, Feather as _, Flag as v, Loader2 as y, MessageSquare as b, ShieldCheck as x, Sparkle as S, Trash2 as C } from "lucide-react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { Button as E, Select as D, SelectContent as O, SelectItem as k, SelectTrigger as A, SelectValue as j, Spinner as M, Textarea as N } from "@burdenoff/fe-libs/ui";
 //#region src/theculturepost/components/ReplyThread.tsx
-var D = [
-	"APPROVED",
-	"FLAGGED",
-	"REMOVED"
+var P = "__none__", F = [
+	"Personal experience",
+	"Historical context",
+	"Scholarly reading",
+	"Community elder",
+	"Interfaith view",
+	"Philosophical reading",
+	"Regional tradition",
+	"A question"
+], I = [
+	{
+		status: "APPROVED",
+		label: "Approve",
+		icon: /* @__PURE__ */ w(g, {
+			className: "h-3.5 w-3.5",
+			"aria-hidden": "true"
+		}),
+		active: "border-status-success-text/40 bg-status-success-bg-subtle text-status-success-text"
+	},
+	{
+		status: "FLAGGED",
+		label: "Flag",
+		icon: /* @__PURE__ */ w(v, {
+			className: "h-3.5 w-3.5",
+			"aria-hidden": "true"
+		}),
+		active: "border-status-warning-text/40 bg-status-warning-bg-subtle text-status-warning-text"
+	},
+	{
+		status: "REMOVED",
+		label: "Remove",
+		icon: /* @__PURE__ */ w(C, {
+			className: "h-3.5 w-3.5",
+			"aria-hidden": "true"
+		}),
+		active: "border-status-error-text/40 bg-status-error-bg-subtle text-status-error-text"
+	}
 ];
-function O({ reply: e }) {
-	let t = o(), s = async (r) => {
-		try {
-			await t.mutateAsync({
-				id: e.id,
-				status: r
-			}), u.success("Reply moderated", n(r));
+function L({ isSelf: e, label: n }) {
+	return /* @__PURE__ */ w("span", {
+		className: t("flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full text-sm font-semibold", e ? "bg-action-primary-bg text-action-primary-text" : "bg-gradient-to-br from-[var(--color-accent-soft)] to-bg-sunken text-text-primary"),
+		"aria-hidden": "true",
+		children: n.charAt(0)
+	});
+}
+function R({ reply: n }) {
+	let { currentUser: r } = e(), l = c(), u = !!(n.authorId && r?.id && n.authorId === r.id), p = u ? "You" : "Contributor", m = n.status === "REMOVED", h = async (e) => {
+		if (e !== n.status) try {
+			await l.mutateAsync({
+				id: n.id,
+				status: e
+			}), f.success("Reply moderated", i(e));
 		} catch (e) {
-			u.error("Could not moderate reply", l(e));
+			f.error("Could not moderate reply", d(e));
 		}
-	}, c = e.status === "REMOVED";
-	return /* @__PURE__ */ _("li", {
-		className: "rounded-xl border border-border-seam bg-bg-surface p-4",
-		children: [
-			/* @__PURE__ */ _("div", {
-				className: "flex flex-wrap items-center justify-between gap-2",
-				children: [/* @__PURE__ */ _("div", {
-					className: "flex flex-wrap items-center gap-2",
-					children: [
-						/* @__PURE__ */ g(a, {
-							actorId: e.authorId,
-							className: "text-sm font-medium text-text-primary"
-						}),
-						/* @__PURE__ */ _("span", {
-							className: "text-xs text-text-tertiary",
-							children: ["· ", r(e.createdAt)]
-						}),
-						e.perspective && /* @__PURE__ */ _("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",
+	};
+	return /* @__PURE__ */ w("li", {
+		className: "rounded-2xl border border-border-seam bg-bg-surface p-4 sm:p-5",
+		children: /* @__PURE__ */ T("div", {
+			className: "flex gap-3 sm:gap-4",
+			children: [/* @__PURE__ */ w(L, {
+				isSelf: u,
+				label: p
+			}), /* @__PURE__ */ T("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ T("div", {
+						className: "flex flex-wrap items-center justify-between gap-2",
+						children: [/* @__PURE__ */ T("div", {
+							className: "flex flex-wrap items-center gap-x-2 gap-y-1",
 							children: [
-								/* @__PURE__ */ g(h, { className: "h-3 w-3" }),
-								" ",
-								e.perspective
+								/* @__PURE__ */ w(s, {
+									actorId: n.authorId,
+									className: "text-sm font-semibold text-text-primary"
+								}),
+								/* @__PURE__ */ w("span", {
+									className: "text-xs text-text-tertiary",
+									children: a(n.createdAt)
+								}),
+								n.perspective && /* @__PURE__ */ T("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",
+									children: [
+										/* @__PURE__ */ w(S, {
+											className: "h-3 w-3",
+											"aria-hidden": "true"
+										}),
+										" ",
+										n.perspective
+									]
+								})
 							]
+						}), /* @__PURE__ */ w(o, { status: n.status })]
+					}),
+					/* @__PURE__ */ w("p", {
+						className: m ? "mt-2 whitespace-pre-wrap text-sm italic text-text-tertiary" : "mt-2 whitespace-pre-wrap break-words text-sm leading-relaxed text-text-primary",
+						children: m ? "This reply has been removed by a moderator." : n.body
+					}),
+					/* @__PURE__ */ T("div", {
+						className: "mt-3 flex flex-wrap items-center gap-2 border-t border-border-seam pt-3",
+						children: [
+							/* @__PURE__ */ T("span", {
+								className: "inline-flex items-center gap-1.5 text-xs font-medium text-text-tertiary",
+								children: [/* @__PURE__ */ w(x, {
+									className: "h-4 w-4",
+									"aria-hidden": "true"
+								}), " Moderate"]
+							}),
+							I.map((e) => {
+								let r = n.status === e.status;
+								return /* @__PURE__ */ T("button", {
+									type: "button",
+									onClick: () => h(e.status),
+									disabled: l.isPending || r,
+									"aria-pressed": r,
+									"aria-label": `${e.label} reply`,
+									className: t("inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs font-medium transition-colors disabled:cursor-default", r ? e.active : "border-border-seam bg-bg-surface text-text-secondary hover:bg-bg-sunken hover:text-text-primary disabled:opacity-60"),
+									children: [e.icon, e.label]
+								}, e.status);
+							}),
+							l.isPending && /* @__PURE__ */ w(M, { size: "sm" })
+						]
+					})
+				]
+			})]
+		})
+	});
+}
+function z({ discussionId: e, isLocked: t }) {
+	let { data: i, isLoading: a, isError: o, refetch: s } = u(e), c = l(), [g, v] = m(""), [x, S] = m(P), [C, M] = m("oldest"), I = p(() => {
+		let e = i ? [...i] : [];
+		return e.sort((e, t) => {
+			let n = new Date(e.createdAt).getTime(), r = new Date(t.createdAt).getTime();
+			return C === "oldest" ? n - r : r - n;
+		}), e;
+	}, [i, C]), L = i?.length ?? 0;
+	return /* @__PURE__ */ T("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ T("div", {
+				className: "flex flex-wrap items-center justify-between gap-3",
+				children: [/* @__PURE__ */ T("h2", {
+					className: "font-display text-lg font-semibold text-text-primary",
+					children: ["Replies", i ? /* @__PURE__ */ T("span", {
+						className: "text-text-tertiary",
+						children: [
+							" (",
+							L,
+							")"
+						]
+					}) : null]
+				}), L > 1 && /* @__PURE__ */ T(D, {
+					value: C,
+					onValueChange: (e) => M(e),
+					children: [/* @__PURE__ */ w(A, {
+						className: "h-9 w-40",
+						"aria-label": "Sort replies",
+						children: /* @__PURE__ */ T("span", {
+							className: "flex items-center gap-1.5",
+							children: [/* @__PURE__ */ w(h, {
+								className: "h-3.5 w-3.5 text-text-tertiary",
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ w(j, {})]
 						})
-					]
-				}), /* @__PURE__ */ g(i, { status: e.status })]
+					}), /* @__PURE__ */ T(O, { children: [/* @__PURE__ */ w(k, {
+						value: "oldest",
+						children: "Oldest first"
+					}), /* @__PURE__ */ w(k, {
+						value: "newest",
+						children: "Newest first"
+					})] })]
+				})]
 			}),
-			/* @__PURE__ */ g("p", {
-				className: c ? "mt-2 whitespace-pre-wrap text-sm italic text-text-tertiary" : "mt-2 whitespace-pre-wrap break-words text-sm text-text-primary",
-				children: c ? "This reply has been removed by a moderator." : e.body
+			a ? /* @__PURE__ */ w(r, { label: "Loading replies…" }) : o ? /* @__PURE__ */ w(n, {
+				message: "We couldn't load replies.",
+				onRetry: () => s()
+			}) : I.length === 0 ? /* @__PURE__ */ T("div", {
+				className: "flex flex-col items-center gap-2 rounded-2xl border border-dashed border-border-seam py-10 text-center",
+				children: [/* @__PURE__ */ w(b, {
+					className: "h-8 w-8 text-text-tertiary",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ T("p", {
+					className: "text-sm text-text-secondary",
+					children: [
+						"No replies yet.",
+						" ",
+						t ? "This discussion is closed." : "Share the first perspective."
+					]
+				})]
+			}) : /* @__PURE__ */ w("ul", {
+				className: "flex flex-col gap-3",
+				children: I.map((e) => /* @__PURE__ */ w(R, { reply: e }, e.id))
 			}),
-			/* @__PURE__ */ _("div", {
-				className: "mt-3 flex items-center gap-2 border-t border-border-seam pt-3",
+			t ? /* @__PURE__ */ w("div", {
+				className: "rounded-2xl border border-border-seam bg-bg-sunken/60 px-4 py-3 text-center text-sm text-text-secondary",
+				children: "This discussion is locked. New replies are closed."
+			}) : /* @__PURE__ */ T("div", {
+				className: "flex flex-col gap-4 rounded-2xl border border-border-seam bg-bg-surface p-4 sm:p-5",
 				children: [
-					/* @__PURE__ */ g(m, {
-						className: "h-4 w-4 text-text-tertiary",
-						"aria-hidden": "true"
-					}),
-					/* @__PURE__ */ g("span", {
-						className: "text-xs text-text-secondary",
-						children: "Moderate"
+					/* @__PURE__ */ w("h3", {
+						className: "font-display text-base font-semibold text-text-primary",
+						children: "Add your reply"
 					}),
-					/* @__PURE__ */ _(b, {
-						value: e.status,
-						onValueChange: (e) => s(e),
-						children: [/* @__PURE__ */ g(C, {
-							className: "h-8 w-36",
-							"aria-label": "Moderate reply",
-							children: /* @__PURE__ */ g(w, {})
-						}), /* @__PURE__ */ g(x, { children: D.map((e) => /* @__PURE__ */ g(S, {
-							value: e,
-							children: n(e)
-						}, e)) })]
+					/* @__PURE__ */ T("div", {
+						className: "grid gap-4 md:grid-cols-[1fr_16rem]",
+						children: [/* @__PURE__ */ T("div", {
+							className: "flex flex-col gap-1.5",
+							children: [/* @__PURE__ */ w("label", {
+								htmlFor: "reply-body",
+								className: "sr-only",
+								children: "Your reply"
+							}), /* @__PURE__ */ w(N, {
+								id: "reply-body",
+								value: g,
+								onChange: (e) => v(e.target.value),
+								placeholder: "Share your perspective…",
+								rows: 4
+							})]
+						}), /* @__PURE__ */ T("div", {
+							className: "flex flex-col gap-1.5",
+							children: [/* @__PURE__ */ w("label", {
+								htmlFor: "reply-perspective",
+								className: "text-xs font-medium text-text-secondary",
+								children: "Perspective (optional)"
+							}), /* @__PURE__ */ T(D, {
+								value: x,
+								onValueChange: S,
+								children: [/* @__PURE__ */ w(A, {
+									id: "reply-perspective",
+									"aria-label": "Perspective label",
+									children: /* @__PURE__ */ w(j, { placeholder: "Select a perspective label…" })
+								}), /* @__PURE__ */ T(O, { children: [/* @__PURE__ */ w(k, {
+									value: P,
+									children: "No label"
+								}), F.map((e) => /* @__PURE__ */ w(k, {
+									value: e,
+									children: e
+								}, e))] })]
+							})]
+						})]
 					}),
-					t.isPending && /* @__PURE__ */ g(T, { size: "sm" })
+					/* @__PURE__ */ w("div", {
+						className: "flex justify-end",
+						children: /* @__PURE__ */ T(E, {
+							onClick: async () => {
+								let t = g.trim();
+								if (t) try {
+									await c.mutateAsync({
+										discussionId: e,
+										body: t,
+										perspective: x === P ? null : x
+									}), v(""), S(P), f.success("Reply posted");
+								} catch (e) {
+									f.error("Could not post reply", d(e));
+								}
+							},
+							disabled: !g.trim() || c.isPending,
+							children: [c.isPending ? /* @__PURE__ */ w(y, {
+								className: "mr-1.5 h-4 w-4 animate-spin",
+								"aria-hidden": "true"
+							}) : /* @__PURE__ */ w(_, {
+								className: "mr-1.5 h-4 w-4",
+								"aria-hidden": "true"
+							}), "Post reply"]
+						})
+					})
 				]
 			})
 		]
 	});
 }
-function k({ discussionId: n, isLocked: r }) {
-	let { data: i, isLoading: a, isError: o, refetch: m } = c(n), h = s(), [b, x] = d(""), [S, C] = d("");
-	return /* @__PURE__ */ _("div", {
-		className: "flex flex-col gap-4",
-		children: [a ? /* @__PURE__ */ g(t, { label: "Loading replies…" }) : o ? /* @__PURE__ */ g(e, {
-			message: "We couldn't load replies.",
-			onRetry: () => m()
-		}) : !i || i.length === 0 ? /* @__PURE__ */ _("div", {
-			className: "flex flex-col items-center gap-2 rounded-xl border border-dashed border-border-seam py-8 text-center",
-			children: [/* @__PURE__ */ g(f, { className: "h-8 w-8 text-text-tertiary" }), /* @__PURE__ */ _("p", {
-				className: "text-sm text-text-secondary",
-				children: [
-					"No replies yet.",
-					" ",
-					r ? "This discussion is closed." : "Share the first perspective."
-				]
-			})]
-		}) : /* @__PURE__ */ g("ul", {
-			className: "flex flex-col gap-3",
-			children: i.map((e) => /* @__PURE__ */ g(O, { reply: e }, e.id))
-		}), r ? /* @__PURE__ */ g("div", {
-			className: "rounded-xl border border-border-seam bg-bg-sunken/60 px-4 py-3 text-center text-sm text-text-secondary",
-			children: "This discussion is locked. New replies are closed."
-		}) : /* @__PURE__ */ _("div", {
-			className: "flex flex-col gap-2 rounded-xl border border-border-seam bg-bg-surface p-4",
-			children: [
-				/* @__PURE__ */ g("label", {
-					htmlFor: "reply-body",
-					className: "text-sm font-medium text-text-primary",
-					children: "Add your reply"
-				}),
-				/* @__PURE__ */ g(E, {
-					id: "reply-body",
-					value: b,
-					onChange: (e) => x(e.target.value),
-					placeholder: "Contribute a thoughtful, respectful perspective…",
-					rows: 3
-				}),
-				/* @__PURE__ */ _("div", {
-					className: "flex flex-col gap-2 sm:flex-row sm:items-center",
-					children: [/* @__PURE__ */ g(y, {
-						value: S,
-						onChange: (e) => C(e.target.value),
-						placeholder: "Perspective (optional) — e.g. Historian, Elder",
-						className: "sm:max-w-xs",
-						"aria-label": "Perspective"
-					}), /* @__PURE__ */ _(v, {
-						onClick: async () => {
-							let e = b.trim();
-							if (e) try {
-								await h.mutateAsync({
-									discussionId: n,
-									body: e,
-									perspective: S.trim() || null
-								}), x(""), C(""), u.success("Reply posted");
-							} catch (e) {
-								u.error("Could not post reply", l(e));
-							}
-						},
-						disabled: !b.trim() || h.isPending,
-						className: "sm:ml-auto",
-						children: [/* @__PURE__ */ g(p, { className: "mr-1.5 h-4 w-4" }), " Post reply"]
-					})]
-				})
-			]
-		})]
-	});
-}
 //#endregion
-export { k as ReplyThread };
+export { z as ReplyThread };
 
 //# sourceMappingURL=ReplyThread.js.map

package/dist/theculturepost/components/ReplyThread.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReplyThread.js","names":[],"sources":["../../../src/theculturepost/components/ReplyThread.tsx"],"sourcesContent":["/**\n * ReplyThread — moderated replies for a discussion.\n * @module theculturepost/components\n *\n * Reads `tcpListReplies(discussionId)`; writes `tcpPostReply` (with an optional\n * perspective label) and `tcpModerateReply` (approve / flag / remove) —\n * respectful-by-design controls. Author identity is id-only, so we render \"You\"\n * or \"Contributor\".\n */\n\nimport { useState } from 'react';\nimport { MessageSquare, Send, ShieldAlert, Sparkle } from 'lucide-react';\nimport {\n  Button,\n  Input,\n  Textarea,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Spinner,\n} from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { AuthorLabel } from './AuthorLabel';\nimport { LoadingView, ErrorView } from './StateViews';\nimport { useTcpReplies, useTcpPostReply, useTcpModerateReply } from '../hooks';\nimport { formatEnumLabel, formatRelativeTime } from '../utils/formatters';\nimport { notify, describeError } from '../lib/toast';\nimport type { TcpModerationStatus, TcpReply } from '../types';\n\nconst MODERATION_ACTIONS: TcpModerationStatus[] = ['APPROVED', 'FLAGGED', 'REMOVED'];\n\nfunction ReplyRow({ reply }: { reply: TcpReply }) {\n  const moderate = useTcpModerateReply();\n\n  const doModerate = async (status: TcpModerationStatus) => {\n    try {\n      await moderate.mutateAsync({ id: reply.id, status });\n      notify.success('Reply moderated', formatEnumLabel(status));\n    } catch (err) {\n      notify.error('Could not moderate reply', describeError(err));\n    }\n  };\n\n  const removed = reply.status === 'REMOVED';\n\n  return (\n    <li className=\"rounded-xl border border-border-seam bg-bg-surface p-4\">\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <AuthorLabel actorId={reply.authorId} className=\"text-sm font-medium text-text-primary\" />\n          <span className=\"text-xs text-text-tertiary\">\n            · {formatRelativeTime(reply.createdAt)}\n          </span>\n          {reply.perspective && (\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              <Sparkle className=\"h-3 w-3\" /> {reply.perspective}\n            </span>\n          )}\n        </div>\n        <StatusBadge status={reply.status} />\n      </div>\n\n      <p\n        className={\n          removed\n            ? 'mt-2 whitespace-pre-wrap text-sm italic text-text-tertiary'\n            : 'mt-2 whitespace-pre-wrap break-words text-sm text-text-primary'\n        }\n      >\n        {removed ? 'This reply has been removed by a moderator.' : reply.body}\n      </p>\n\n      <div className=\"mt-3 flex items-center gap-2 border-t border-border-seam pt-3\">\n        <ShieldAlert className=\"h-4 w-4 text-text-tertiary\" aria-hidden=\"true\" />\n        <span className=\"text-xs text-text-secondary\">Moderate</span>\n        <Select value={reply.status} onValueChange={(v) => doModerate(v as TcpModerationStatus)}>\n          <SelectTrigger className=\"h-8 w-36\" aria-label=\"Moderate reply\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {MODERATION_ACTIONS.map((s) => (\n              <SelectItem key={s} value={s}>\n                {formatEnumLabel(s)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        {moderate.isPending && <Spinner size=\"sm\" />}\n      </div>\n    </li>\n  );\n}\n\ninterface ReplyThreadProps {\n  discussionId: string;\n  isLocked: boolean;\n}\n\nexport function ReplyThread({ discussionId, isLocked }: ReplyThreadProps) {\n  const { data: replies, isLoading, isError, refetch } = useTcpReplies(discussionId);\n  const postReply = useTcpPostReply();\n  const [body, setBody] = useState('');\n  const [perspective, setPerspective] = useState('');\n\n  const submit = async () => {\n    const text = body.trim();\n    if (!text) return;\n    try {\n      await postReply.mutateAsync({\n        discussionId,\n        body: text,\n        perspective: perspective.trim() || null,\n      });\n      setBody('');\n      setPerspective('');\n      notify.success('Reply posted');\n    } catch (err) {\n      notify.error('Could not post reply', describeError(err));\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {isLoading ? (\n        <LoadingView label=\"Loading replies…\" />\n      ) : isError ? (\n        <ErrorView message=\"We couldn't load replies.\" onRetry={() => refetch()} />\n      ) : !replies || replies.length === 0 ? (\n        <div className=\"flex flex-col items-center gap-2 rounded-xl border border-dashed border-border-seam py-8 text-center\">\n          <MessageSquare className=\"h-8 w-8 text-text-tertiary\" />\n          <p className=\"text-sm text-text-secondary\">\n            No replies yet.{' '}\n            {isLocked ? 'This discussion is closed.' : 'Share the first perspective.'}\n          </p>\n        </div>\n      ) : (\n        <ul className=\"flex flex-col gap-3\">\n          {replies.map((reply) => (\n            <ReplyRow key={reply.id} reply={reply} />\n          ))}\n        </ul>\n      )}\n\n      {isLocked ? (\n        <div className=\"rounded-xl border border-border-seam bg-bg-sunken/60 px-4 py-3 text-center text-sm text-text-secondary\">\n          This discussion is locked. New replies are closed.\n        </div>\n      ) : (\n        <div className=\"flex flex-col gap-2 rounded-xl border border-border-seam bg-bg-surface p-4\">\n          <label htmlFor=\"reply-body\" className=\"text-sm font-medium text-text-primary\">\n            Add your reply\n          </label>\n          <Textarea\n            id=\"reply-body\"\n            value={body}\n            onChange={(e) => setBody(e.target.value)}\n            placeholder=\"Contribute a thoughtful, respectful perspective…\"\n            rows={3}\n          />\n          <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n            <Input\n              value={perspective}\n              onChange={(e) => setPerspective(e.target.value)}\n              placeholder=\"Perspective (optional) — e.g. Historian, Elder\"\n              className=\"sm:max-w-xs\"\n              aria-label=\"Perspective\"\n            />\n            <Button\n              onClick={submit}\n              disabled={!body.trim() || postReply.isPending}\n              className=\"sm:ml-auto\"\n            >\n              <Send className=\"mr-1.5 h-4 w-4\" /> Post reply\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ReplyThread.js","names":[],"sources":["../../../src/theculturepost/components/ReplyThread.tsx"],"sourcesContent":["/**\n * ReplyThread — moderated replies for a discussion.\n * @module theculturepost/components\n *\n * Reads `tcpListReplies(discussionId)`; writes `tcpPostReply` (with an optional\n * perspective label) and `tcpModerateReply` (approve / flag / remove) —\n * respectful-by-design controls rendered as INLINE moderation buttons.\n *\n * Identity is id-only in this subgraph (no names / avatars), so each reply shows\n * \"You\" for the current actor or a neutral \"Contributor\", with a role-tinted\n * initial monogram — never a fabricated name or photo. There is no reactions /\n * likes field, so none is rendered.\n */\n\nimport { useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport {\n  MessageSquare,\n  Feather,\n  ShieldCheck,\n  CheckCircle2,\n  Flag,\n  Trash2,\n  ArrowUpDown,\n  Sparkle,\n  Loader2,\n} from 'lucide-react';\nimport {\n  Button,\n  Textarea,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Spinner,\n} from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { AuthorLabel } from './AuthorLabel';\nimport { LoadingView, ErrorView } from './StateViews';\nimport { useTcpReplies, useTcpPostReply, useTcpModerateReply } from '../hooks';\nimport { useTheCulturePost } from '../context';\nimport { formatEnumLabel, formatRelativeTime } from '../utils/formatters';\nimport { notify, describeError } from '../lib/toast';\nimport { cn } from '../utils/cn';\nimport type { TcpModerationStatus, TcpReply } from '../types';\n\ntype SortOrder = 'oldest' | 'newest';\n\n/** Sentinel for \"no perspective label\" — Radix Select forbids an empty value. */\nconst NO_PERSPECTIVE = '__none__';\n\n/** Curated, tradition-neutral perspective labels (the field itself is a free String). */\nconst PERSPECTIVE_OPTIONS = [\n  'Personal experience',\n  'Historical context',\n  'Scholarly reading',\n  'Community elder',\n  'Interfaith view',\n  'Philosophical reading',\n  'Regional tradition',\n  'A question',\n] as const;\n\n// ---------------------------------------------------------------------------\n// Inline moderation control\n// ---------------------------------------------------------------------------\n\ninterface ModActionSpec {\n  status: TcpModerationStatus;\n  label: string;\n  icon: ReactNode;\n  /** Token classes when this action is the reply's current state. */\n  active: string;\n}\n\nconst MOD_ACTIONS: ModActionSpec[] = [\n  {\n    status: 'APPROVED',\n    label: 'Approve',\n    icon: <CheckCircle2 className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />,\n    active: 'border-status-success-text/40 bg-status-success-bg-subtle text-status-success-text',\n  },\n  {\n    status: 'FLAGGED',\n    label: 'Flag',\n    icon: <Flag className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />,\n    active: 'border-status-warning-text/40 bg-status-warning-bg-subtle text-status-warning-text',\n  },\n  {\n    status: 'REMOVED',\n    label: 'Remove',\n    icon: <Trash2 className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />,\n    active: 'border-status-error-text/40 bg-status-error-bg-subtle text-status-error-text',\n  },\n];\n\n/** A round monogram derived only from the honest label (\"You\" / \"Contributor\"). */\nfunction ReplyMonogram({ isSelf, label }: { isSelf: boolean; label: string }) {\n  return (\n    <span\n      className={cn(\n        'flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full text-sm font-semibold',\n        isSelf\n          ? 'bg-action-primary-bg text-action-primary-text'\n          : 'bg-gradient-to-br from-[var(--color-accent-soft)] to-bg-sunken text-text-primary'\n      )}\n      aria-hidden=\"true\"\n    >\n      {label.charAt(0)}\n    </span>\n  );\n}\n\nfunction ReplyRow({ reply }: { reply: TcpReply }) {\n  const { currentUser } = useTheCulturePost();\n  const moderate = useTcpModerateReply();\n\n  const isSelf = Boolean(reply.authorId && currentUser?.id && reply.authorId === currentUser.id);\n  const authorLabel = isSelf ? 'You' : 'Contributor';\n  const removed = reply.status === 'REMOVED';\n\n  const doModerate = async (status: TcpModerationStatus) => {\n    if (status === reply.status) return;\n    try {\n      await moderate.mutateAsync({ id: reply.id, status });\n      notify.success('Reply moderated', formatEnumLabel(status));\n    } catch (err) {\n      notify.error('Could not moderate reply', describeError(err));\n    }\n  };\n\n  return (\n    <li className=\"rounded-2xl border border-border-seam bg-bg-surface p-4 sm:p-5\">\n      <div className=\"flex gap-3 sm:gap-4\">\n        <ReplyMonogram isSelf={isSelf} label={authorLabel} />\n\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n            <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n              <AuthorLabel\n                actorId={reply.authorId}\n                className=\"text-sm font-semibold text-text-primary\"\n              />\n              <span className=\"text-xs text-text-tertiary\">\n                {formatRelativeTime(reply.createdAt)}\n              </span>\n              {reply.perspective && (\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                  <Sparkle className=\"h-3 w-3\" aria-hidden=\"true\" /> {reply.perspective}\n                </span>\n              )}\n            </div>\n            <StatusBadge status={reply.status} />\n          </div>\n\n          <p\n            className={\n              removed\n                ? 'mt-2 whitespace-pre-wrap text-sm italic text-text-tertiary'\n                : 'mt-2 whitespace-pre-wrap break-words text-sm leading-relaxed text-text-primary'\n            }\n          >\n            {removed ? 'This reply has been removed by a moderator.' : reply.body}\n          </p>\n\n          {/* Inline moderation */}\n          <div className=\"mt-3 flex flex-wrap items-center gap-2 border-t border-border-seam pt-3\">\n            <span className=\"inline-flex items-center gap-1.5 text-xs font-medium text-text-tertiary\">\n              <ShieldCheck className=\"h-4 w-4\" aria-hidden=\"true\" /> Moderate\n            </span>\n            {MOD_ACTIONS.map((action) => {\n              const isActive = reply.status === action.status;\n              return (\n                <button\n                  key={action.status}\n                  type=\"button\"\n                  onClick={() => doModerate(action.status)}\n                  disabled={moderate.isPending || isActive}\n                  aria-pressed={isActive}\n                  aria-label={`${action.label} reply`}\n                  className={cn(\n                    'inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs font-medium transition-colors disabled:cursor-default',\n                    isActive\n                      ? action.active\n                      : 'border-border-seam bg-bg-surface text-text-secondary hover:bg-bg-sunken hover:text-text-primary disabled:opacity-60'\n                  )}\n                >\n                  {action.icon}\n                  {action.label}\n                </button>\n              );\n            })}\n            {moderate.isPending && <Spinner size=\"sm\" />}\n          </div>\n        </div>\n      </div>\n    </li>\n  );\n}\n\ninterface ReplyThreadProps {\n  discussionId: string;\n  isLocked: boolean;\n}\n\nexport function ReplyThread({ discussionId, isLocked }: ReplyThreadProps) {\n  const { data: replies, isLoading, isError, refetch } = useTcpReplies(discussionId);\n  const postReply = useTcpPostReply();\n  const [body, setBody] = useState('');\n  const [perspective, setPerspective] = useState<string>(NO_PERSPECTIVE);\n  const [sort, setSort] = useState<SortOrder>('oldest');\n\n  const sorted = useMemo(() => {\n    const list = replies ? [...replies] : [];\n    list.sort((a, b) => {\n      const ta = new Date(a.createdAt).getTime();\n      const tb = new Date(b.createdAt).getTime();\n      return sort === 'oldest' ? ta - tb : tb - ta;\n    });\n    return list;\n  }, [replies, sort]);\n\n  const count = replies?.length ?? 0;\n\n  const submit = async () => {\n    const text = body.trim();\n    if (!text) return;\n    try {\n      await postReply.mutateAsync({\n        discussionId,\n        body: text,\n        perspective: perspective === NO_PERSPECTIVE ? null : perspective,\n      });\n      setBody('');\n      setPerspective(NO_PERSPECTIVE);\n      notify.success('Reply posted');\n    } catch (err) {\n      notify.error('Could not post reply', describeError(err));\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {/* Section header + client-side sort */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <h2 className=\"font-display text-lg font-semibold text-text-primary\">\n          Replies{replies ? <span className=\"text-text-tertiary\"> ({count})</span> : null}\n        </h2>\n        {count > 1 && (\n          <Select value={sort} onValueChange={(v) => setSort(v as SortOrder)}>\n            <SelectTrigger className=\"h-9 w-40\" aria-label=\"Sort replies\">\n              <span className=\"flex items-center gap-1.5\">\n                <ArrowUpDown className=\"h-3.5 w-3.5 text-text-tertiary\" aria-hidden=\"true\" />\n                <SelectValue />\n              </span>\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"oldest\">Oldest first</SelectItem>\n              <SelectItem value=\"newest\">Newest first</SelectItem>\n            </SelectContent>\n          </Select>\n        )}\n      </div>\n\n      {isLoading ? (\n        <LoadingView label=\"Loading replies…\" />\n      ) : isError ? (\n        <ErrorView message=\"We couldn't load replies.\" onRetry={() => refetch()} />\n      ) : sorted.length === 0 ? (\n        <div className=\"flex flex-col items-center gap-2 rounded-2xl border border-dashed border-border-seam py-10 text-center\">\n          <MessageSquare className=\"h-8 w-8 text-text-tertiary\" aria-hidden=\"true\" />\n          <p className=\"text-sm text-text-secondary\">\n            No replies yet.{' '}\n            {isLocked ? 'This discussion is closed.' : 'Share the first perspective.'}\n          </p>\n        </div>\n      ) : (\n        <ul className=\"flex flex-col gap-3\">\n          {sorted.map((reply) => (\n            <ReplyRow key={reply.id} reply={reply} />\n          ))}\n        </ul>\n      )}\n\n      {/* Composer */}\n      {isLocked ? (\n        <div className=\"rounded-2xl border border-border-seam bg-bg-sunken/60 px-4 py-3 text-center text-sm text-text-secondary\">\n          This discussion is locked. New replies are closed.\n        </div>\n      ) : (\n        <div className=\"flex flex-col gap-4 rounded-2xl border border-border-seam bg-bg-surface p-4 sm:p-5\">\n          <h3 className=\"font-display text-base font-semibold text-text-primary\">Add your reply</h3>\n          <div className=\"grid gap-4 md:grid-cols-[1fr_16rem]\">\n            <div className=\"flex flex-col gap-1.5\">\n              <label htmlFor=\"reply-body\" className=\"sr-only\">\n                Your reply\n              </label>\n              <Textarea\n                id=\"reply-body\"\n                value={body}\n                onChange={(e) => setBody(e.target.value)}\n                placeholder=\"Share your perspective…\"\n                rows={4}\n              />\n            </div>\n            <div className=\"flex flex-col gap-1.5\">\n              <label\n                htmlFor=\"reply-perspective\"\n                className=\"text-xs font-medium text-text-secondary\"\n              >\n                Perspective (optional)\n              </label>\n              <Select value={perspective} onValueChange={setPerspective}>\n                <SelectTrigger id=\"reply-perspective\" aria-label=\"Perspective label\">\n                  <SelectValue placeholder=\"Select a perspective label…\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value={NO_PERSPECTIVE}>No label</SelectItem>\n                  {PERSPECTIVE_OPTIONS.map((label) => (\n                    <SelectItem key={label} value={label}>\n                      {label}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n          <div className=\"flex justify-end\">\n            <Button onClick={submit} disabled={!body.trim() || postReply.isPending}>\n              {postReply.isPending ? (\n                <Loader2 className=\"mr-1.5 h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n              ) : (\n                <Feather className=\"mr-1.5 h-4 w-4\" aria-hidden=\"true\" />\n              )}\n              Post reply\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/theculturepost/components/StatusBadge.js

@@ -1,6 +1,6 @@
 import { cn as e } from "../utils/cn.js";
 import { formatEnumLabel as t } from "../utils/formatters.js";
-import { jsx as n } from "react/jsx-runtime";
+import { jsxs as n } from "react/jsx-runtime";
 //#region src/theculturepost/components/StatusBadge.tsx
 var r = {
 	success: "bg-status-success-bg-subtle text-status-success-text",
@@ -22,14 +22,14 @@ var r = {
 	PHOTO_STORY: "info",
 	TIMELINE: "info",
 	CULTURE_AND_IDENTITY: "info",
-	FESTIVALS_AND_RITUALS: "info",
-	HERITAGE_AND_ARCHIVES: "info",
-	HISTORY: "info",
+	FESTIVALS_AND_RITUALS: "warning",
+	HERITAGE_AND_ARCHIVES: "secondary",
+	HISTORY: "warning",
 	MIGRATION_AND_DIASPORA: "info",
-	ORAL_HISTORIES: "info",
+	ORAL_HISTORIES: "success",
 	PHILOSOPHY_AND_THOUGHT: "info",
-	RELIGION_AND_FAITH: "info",
-	VALUES_AND_ETHICS: "info",
+	RELIGION_AND_FAITH: "warning",
+	VALUES_AND_ETHICS: "success",
 	APPROVED: "success",
 	PENDING: "warning",
 	FLAGGED: "warning",
@@ -57,9 +57,9 @@ var r = {
 	CORROBORATED: "success",
 	DISPUTED: "destructive",
 	RETRACTED: "destructive"
-}, a = ({ status: a, className: o }) => /* @__PURE__ */ n("span", {
+}, a = ({ status: a, className: o, icon: s }) => /* @__PURE__ */ n("span", {
 	className: e("inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium", r[i[a.toUpperCase()] ?? "secondary"], o),
-	children: t(a)
+	children: [s, t(a)]
 });
 //#endregion
 export { a as StatusBadge };

package/dist/theculturepost/components/StatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","names":[],"sources":["../../../src/theculturepost/components/StatusBadge.tsx"],"sourcesContent":["/**\n * Status Badge Component\n * @module theculturepost/components\n *\n * A colored badge for TheCulturePost domain enums (story status/format, topic\n * category, moderation status, access level, archive-item kind, source type,\n * citation verification) with semantic color mapping. Accepts the raw server\n * enum value.\n */\n\nimport type { FC } from 'react';\nimport { cn } from '../utils/cn';\nimport { formatEnumLabel } from '../utils/formatters';\n\ninterface StatusBadgeProps {\n  status: string;\n  className?: string;\n}\n\ntype BadgeVariant = 'success' | 'warning' | 'destructive' | 'secondary' | 'info' | 'outline';\n\nconst variantStyles: Record<BadgeVariant, string> = {\n  success: 'bg-status-success-bg-subtle text-status-success-text',\n  warning: 'bg-status-warning-bg-subtle text-status-warning-text',\n  destructive: 'bg-status-error-bg-subtle text-status-error-text',\n  secondary: 'bg-bg-sunken text-text-secondary',\n  info: 'bg-[var(--color-accent-soft)] text-text-primary',\n  outline: 'border border-border-seam text-text-primary',\n};\n\nconst statusVariantMap: Record<string, BadgeVariant> = {\n  // Story status\n  IDEA: 'secondary',\n  DRAFT: 'secondary',\n  IN_REVIEW: 'warning',\n  PUBLISHED: 'success',\n  ARCHIVED: 'outline',\n\n  // Story format\n  ARTICLE: 'info',\n  ESSAY: 'info',\n  EXPLAINER: 'info',\n  ORAL_HISTORY: 'info',\n  PHOTO_STORY: 'info',\n  TIMELINE: 'info',\n\n  // Topic category\n  CULTURE_AND_IDENTITY: 'info',\n  FESTIVALS_AND_RITUALS: 'info',\n  HERITAGE_AND_ARCHIVES: 'info',\n  HISTORY: 'info',\n  MIGRATION_AND_DIASPORA: 'info',\n  ORAL_HISTORIES: 'info',\n  PHILOSOPHY_AND_THOUGHT: 'info',\n  RELIGION_AND_FAITH: 'info',\n  VALUES_AND_ETHICS: 'info',\n\n  // Moderation status\n  APPROVED: 'success',\n  PENDING: 'warning',\n  FLAGGED: 'warning',\n  REMOVED: 'destructive',\n\n  // Access level\n  PUBLIC: 'success',\n  COMMUNITY: 'info',\n  RESTRICTED: 'warning',\n  EMBARGOED: 'warning',\n\n  // Archive item kind\n  MANUSCRIPT: 'secondary',\n  PHOTOGRAPH: 'secondary',\n  AUDIO: 'secondary',\n  VIDEO: 'secondary',\n  MAP: 'secondary',\n  OBJECT: 'secondary',\n  DOCUMENT: 'secondary',\n\n  // Source type\n  ACADEMIC: 'info',\n  ARCHIVAL_RECORD: 'info',\n  ARTIFACT: 'info',\n  BOOK: 'info',\n  INTERVIEW: 'info',\n  PERIODICAL: 'info',\n  PRIMARY_DOCUMENT: 'info',\n  WEB: 'secondary',\n\n  // Verification status\n  UNVERIFIED: 'secondary',\n  CORROBORATED: 'success',\n  DISPUTED: 'destructive',\n  RETRACTED: 'destructive',\n};\n\nexport const StatusBadge: FC<StatusBadgeProps> = ({ status, className }) => {\n  const key = status.toUpperCase();\n  const variant = statusVariantMap[key] ?? 'secondary';\n\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',\n        variantStyles[variant],\n        className\n      )}\n    >\n      {formatEnumLabel(status)}\n    </span>\n  );\n};\n"],"mappings":";;;;AAqBA,IAAM,IAA8C;CAClD,SAAS;CACT,SAAS;CACT,aAAa;CACb,WAAW;CACX,MAAM;CACN,SAAS;CACV,EAEK,IAAiD;CAErD,MAAM;CACN,OAAO;CACP,WAAW;CACX,WAAW;CACX,UAAU;CAGV,SAAS;CACT,OAAO;CACP,WAAW;CACX,cAAc;CACd,aAAa;CACb,UAAU;CAGV,sBAAsB;CACtB,uBAAuB;CACvB,uBAAuB;CACvB,SAAS;CACT,wBAAwB;CACxB,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,mBAAmB;CAGnB,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CAGT,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,WAAW;CAGX,YAAY;CACZ,YAAY;CACZ,OAAO;CACP,OAAO;CACP,KAAK;CACL,QAAQ;CACR,UAAU;CAGV,UAAU;CACV,iBAAiB;CACjB,UAAU;CACV,MAAM;CACN,WAAW;CACX,YAAY;CACZ,kBAAkB;CAClB,KAAK;CAGL,YAAY;CACZ,cAAc;CACd,UAAU;CACV,WAAW;CACZ,EAEY,KAAqC,EAAE,WAAQ,mBAKxD,kBAAC,QAAD;CACE,WAAW,EACT,mFACA,EANU,EADJ,EAAO,aAAa,KACS,cAOnC,EACD;WAEA,EAAgB,EAAO;CACnB,CAAA"}
+{"version":3,"file":"StatusBadge.js","names":[],"sources":["../../../src/theculturepost/components/StatusBadge.tsx"],"sourcesContent":["/**\n * Status Badge Component\n * @module theculturepost/components\n *\n * A colored badge for TheCulturePost domain enums (story status/format, topic\n * category, moderation status, access level, archive-item kind, source type,\n * citation verification) with semantic color mapping. Accepts the raw server\n * enum value.\n */\n\nimport type { FC, ReactNode } from 'react';\nimport { cn } from '../utils/cn';\nimport { formatEnumLabel } from '../utils/formatters';\n\ninterface StatusBadgeProps {\n  status: string;\n  className?: string;\n  /** Optional leading icon (already sized, e.g. `<Sparkles className=\"h-3 w-3\" />`). */\n  icon?: ReactNode;\n}\n\ntype BadgeVariant = 'success' | 'warning' | 'destructive' | 'secondary' | 'info' | 'outline';\n\nconst variantStyles: Record<BadgeVariant, string> = {\n  success: 'bg-status-success-bg-subtle text-status-success-text',\n  warning: 'bg-status-warning-bg-subtle text-status-warning-text',\n  destructive: 'bg-status-error-bg-subtle text-status-error-text',\n  secondary: 'bg-bg-sunken text-text-secondary',\n  info: 'bg-[var(--color-accent-soft)] text-text-primary',\n  outline: 'border border-border-seam text-text-primary',\n};\n\nconst statusVariantMap: Record<string, BadgeVariant> = {\n  // Story status\n  IDEA: 'secondary',\n  DRAFT: 'secondary',\n  IN_REVIEW: 'warning',\n  PUBLISHED: 'success',\n  ARCHIVED: 'outline',\n\n  // Story format\n  ARTICLE: 'info',\n  ESSAY: 'info',\n  EXPLAINER: 'info',\n  ORAL_HISTORY: 'info',\n  PHOTO_STORY: 'info',\n  TIMELINE: 'info',\n\n  // Topic category — spread across semantic variants (token-only) so categories\n  // read apart. Kept in sync with CATEGORY_ACCENT in categoryMeta.\n  CULTURE_AND_IDENTITY: 'info',\n  FESTIVALS_AND_RITUALS: 'warning',\n  HERITAGE_AND_ARCHIVES: 'secondary',\n  HISTORY: 'warning',\n  MIGRATION_AND_DIASPORA: 'info',\n  ORAL_HISTORIES: 'success',\n  PHILOSOPHY_AND_THOUGHT: 'info',\n  RELIGION_AND_FAITH: 'warning',\n  VALUES_AND_ETHICS: 'success',\n\n  // Moderation status\n  APPROVED: 'success',\n  PENDING: 'warning',\n  FLAGGED: 'warning',\n  REMOVED: 'destructive',\n\n  // Access level\n  PUBLIC: 'success',\n  COMMUNITY: 'info',\n  RESTRICTED: 'warning',\n  EMBARGOED: 'warning',\n\n  // Archive item kind\n  MANUSCRIPT: 'secondary',\n  PHOTOGRAPH: 'secondary',\n  AUDIO: 'secondary',\n  VIDEO: 'secondary',\n  MAP: 'secondary',\n  OBJECT: 'secondary',\n  DOCUMENT: 'secondary',\n\n  // Source type\n  ACADEMIC: 'info',\n  ARCHIVAL_RECORD: 'info',\n  ARTIFACT: 'info',\n  BOOK: 'info',\n  INTERVIEW: 'info',\n  PERIODICAL: 'info',\n  PRIMARY_DOCUMENT: 'info',\n  WEB: 'secondary',\n\n  // Verification status\n  UNVERIFIED: 'secondary',\n  CORROBORATED: 'success',\n  DISPUTED: 'destructive',\n  RETRACTED: 'destructive',\n};\n\nexport const StatusBadge: FC<StatusBadgeProps> = ({ status, className, icon }) => {\n  const key = status.toUpperCase();\n  const variant = statusVariantMap[key] ?? 'secondary';\n\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',\n        variantStyles[variant],\n        className\n      )}\n    >\n      {icon}\n      {formatEnumLabel(status)}\n    </span>\n  );\n};\n"],"mappings":";;;;AAuBA,IAAM,IAA8C;CAClD,SAAS;CACT,SAAS;CACT,aAAa;CACb,WAAW;CACX,MAAM;CACN,SAAS;CACV,EAEK,IAAiD;CAErD,MAAM;CACN,OAAO;CACP,WAAW;CACX,WAAW;CACX,UAAU;CAGV,SAAS;CACT,OAAO;CACP,WAAW;CACX,cAAc;CACd,aAAa;CACb,UAAU;CAIV,sBAAsB;CACtB,uBAAuB;CACvB,uBAAuB;CACvB,SAAS;CACT,wBAAwB;CACxB,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,mBAAmB;CAGnB,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CAGT,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,WAAW;CAGX,YAAY;CACZ,YAAY;CACZ,OAAO;CACP,OAAO;CACP,KAAK;CACL,QAAQ;CACR,UAAU;CAGV,UAAU;CACV,iBAAiB;CACjB,UAAU;CACV,MAAM;CACN,WAAW;CACX,YAAY;CACZ,kBAAkB;CAClB,KAAK;CAGL,YAAY;CACZ,cAAc;CACd,UAAU;CACV,WAAW;CACZ,EAEY,KAAqC,EAAE,WAAQ,cAAW,cAKnE,kBAAC,QAAD;CACE,WAAW,EACT,mFACA,EANU,EADJ,EAAO,aAAa,KACS,cAOnC,EACD;WALH,CAOG,GACA,EAAgB,EAAO,CACnB"}