@burdenoff/microfe-theculturepost 2026.704.2 → 2026.705.2

package/dist/theculturepost/components/DecorativeCover.js

@@ -0,0 +1,78 @@
+import { cn as e } from "../utils/cn.js";
+import { categoryIcon as t } from "./categoryMeta.js";
+import { createElement as n, useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/theculturepost/components/DecorativeCover.tsx
+function o(e) {
+	let t = 2166136261;
+	for (let n = 0; n < e.length; n++) t ^= e.charCodeAt(n), t = Math.imul(t, 16777619);
+	return t >>> 0;
+}
+var s = [
+	"bg-gradient-to-br",
+	"bg-gradient-to-tr",
+	"bg-gradient-to-r",
+	"bg-gradient-to-bl"
+];
+function c({ seed: c, icon: l, category: u, className: d, aspect: f }) {
+	let p = l ?? t(u), { dir: m, overlayOpacity: h, ringCx: g, ringCy: _, iconOpacity: v } = r(() => {
+		let e = o(c);
+		return {
+			dir: s[e % s.length],
+			overlayOpacity: .35 + (e >>> 3) % 30 / 100,
+			iconOpacity: .14 + (e >>> 7) % 8 / 100,
+			ringCx: 20 + (e >>> 11) % 60,
+			ringCy: 20 + (e >>> 17) % 50
+		};
+	}, [c]);
+	return /* @__PURE__ */ a("div", {
+		className: e("relative isolate overflow-hidden bg-bg-sunken text-text-tertiary", f, d),
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: e("absolute inset-0", m, "from-[var(--color-accent-soft)] to-bg-sunken"),
+				style: { opacity: h }
+			}),
+			/* @__PURE__ */ i("svg", {
+				className: "absolute inset-0 h-full w-full",
+				viewBox: "0 0 100 100",
+				preserveAspectRatio: "xMidYMid slice",
+				children: /* @__PURE__ */ a("g", {
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "0.4",
+					opacity: "0.25",
+					children: [
+						/* @__PURE__ */ i("circle", {
+							cx: g,
+							cy: _,
+							r: "14"
+						}),
+						/* @__PURE__ */ i("circle", {
+							cx: g,
+							cy: _,
+							r: "24"
+						}),
+						/* @__PURE__ */ i("circle", {
+							cx: g,
+							cy: _,
+							r: "34"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "absolute inset-0 flex items-center justify-center",
+				children: n(p, {
+					className: "h-1/2 w-1/2 max-h-24 max-w-24 text-text-primary",
+					style: { opacity: v },
+					strokeWidth: 1.25
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { c as DecorativeCover };
+
+//# sourceMappingURL=DecorativeCover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DecorativeCover.js","names":[],"sources":["../../../src/theculturepost/components/DecorativeCover.tsx"],"sourcesContent":["/**\n * DecorativeCover — a deterministic, token-only cover backdrop for entities that\n * have no image (topics, discussions, missing story/collection covers).\n * @module theculturepost/components\n *\n * The schema exposes no imagery for these entities, so instead of fabricating a\n * photo we draw a warm, editorial motif: a single accent-soft → sunken gradient\n * plus a faint lucide motif icon and concentric rings. Variants are distinguished\n * ONLY by the motif icon and by subtle opacity/placement derived from a seed —\n * never by a different raw hue (the gradient tokens are constant). A given seed\n * always renders the same shape (stable across renders / SSR).\n */\n\nimport { createElement, useMemo } from 'react';\nimport type { LucideIcon } from 'lucide-react';\nimport { cn } from '../utils/cn';\nimport { categoryIcon } from './categoryMeta';\nimport type { TcpTopicCategory } from '../types';\n\ninterface DecorativeCoverProps {\n  /** Stable seed (id / slug / name) — same seed → same backdrop. */\n  seed: string;\n  /** Explicit motif icon; overrides the category icon. */\n  icon?: LucideIcon;\n  /** Category to derive the motif icon from when no explicit icon is given. */\n  category?: TcpTopicCategory | null;\n  className?: string;\n  /** Tailwind aspect-ratio utility (e.g. 'aspect-[16/9]'). Omit if the parent sizes it. */\n  aspect?: string;\n}\n\n/** Cheap deterministic hash → unsigned int from a seed string. */\nfunction hashSeed(seed: string): number {\n  let h = 2166136261;\n  for (let i = 0; i < seed.length; i++) {\n    h ^= seed.charCodeAt(i);\n    h = Math.imul(h, 16777619);\n  }\n  return h >>> 0;\n}\n\nconst GRADIENT_DIR = [\n  'bg-gradient-to-br',\n  'bg-gradient-to-tr',\n  'bg-gradient-to-r',\n  'bg-gradient-to-bl',\n] as const;\n\nexport function DecorativeCover({ seed, icon, category, className, aspect }: DecorativeCoverProps) {\n  const resolvedIcon: LucideIcon = icon ?? categoryIcon(category);\n\n  const { dir, overlayOpacity, ringCx, ringCy, iconOpacity } = useMemo(() => {\n    const h = hashSeed(seed);\n    return {\n      dir: GRADIENT_DIR[h % GRADIENT_DIR.length],\n      // subtle opacity variance only — hue is constant (token-driven)\n      overlayOpacity: 0.35 + ((h >>> 3) % 30) / 100, // 0.35–0.65\n      iconOpacity: 0.14 + ((h >>> 7) % 8) / 100, // 0.14–0.22\n      ringCx: 20 + ((h >>> 11) % 60), // 20–80 (%)\n      ringCy: 20 + ((h >>> 17) % 50), // 20–70 (%)\n    };\n  }, [seed]);\n\n  return (\n    <div\n      className={cn(\n        'relative isolate overflow-hidden bg-bg-sunken text-text-tertiary',\n        aspect,\n        className\n      )}\n      aria-hidden=\"true\"\n    >\n      {/* Constant token gradient; only opacity varies per seed */}\n      <div\n        className={cn('absolute inset-0', dir, 'from-[var(--color-accent-soft)] to-bg-sunken')}\n        style={{ opacity: overlayOpacity }}\n      />\n      {/* Faint concentric rings, placed by seed, drawn in currentColor (tertiary) */}\n      <svg\n        className=\"absolute inset-0 h-full w-full\"\n        viewBox=\"0 0 100 100\"\n        preserveAspectRatio=\"xMidYMid slice\"\n      >\n        <g fill=\"none\" stroke=\"currentColor\" strokeWidth=\"0.4\" opacity=\"0.25\">\n          <circle cx={ringCx} cy={ringCy} r=\"14\" />\n          <circle cx={ringCx} cy={ringCy} r=\"24\" />\n          <circle cx={ringCx} cy={ringCy} r=\"34\" />\n        </g>\n      </svg>\n      {/* Centred motif icon */}\n      <div className=\"absolute inset-0 flex items-center justify-center\">\n        {createElement(resolvedIcon, {\n          className: 'h-1/2 w-1/2 max-h-24 max-w-24 text-text-primary',\n          style: { opacity: iconOpacity },\n          strokeWidth: 1.25,\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAgCA,SAAS,EAAS,GAAsB;CACtC,IAAI,IAAI;AACR,MAAK,IAAI,IAAI,GAAG,IAAI,EAAK,QAAQ,IAE/B,CADA,KAAK,EAAK,WAAW,EAAE,EACvB,IAAI,KAAK,KAAK,GAAG,SAAS;AAE5B,QAAO,MAAM;;AAGf,IAAM,IAAe;CACnB;CACA;CACA;CACA;CACD;AAED,SAAgB,EAAgB,EAAE,SAAM,SAAM,aAAU,cAAW,aAAgC;CACjG,IAAM,IAA2B,KAAQ,EAAa,EAAS,EAEzD,EAAE,QAAK,mBAAgB,WAAQ,WAAQ,mBAAgB,QAAc;EACzE,IAAM,IAAI,EAAS,EAAK;AACxB,SAAO;GACL,KAAK,EAAa,IAAI,EAAa;GAEnC,gBAAgB,OAAS,MAAM,KAAK,KAAM;GAC1C,aAAa,OAAS,MAAM,KAAK,IAAK;GACtC,QAAQ,MAAO,MAAM,MAAM;GAC3B,QAAQ,MAAO,MAAM,MAAM;GAC5B;IACA,CAAC,EAAK,CAAC;AAEV,QACE,kBAAC,OAAD;EACE,WAAW,EACT,oEACA,GACA,EACD;EACD,eAAY;YANd;GASE,kBAAC,OAAD;IACE,WAAW,EAAG,oBAAoB,GAAK,+CAA+C;IACtF,OAAO,EAAE,SAAS,GAAgB;IAClC,CAAA;GAEF,kBAAC,OAAD;IACE,WAAU;IACV,SAAQ;IACR,qBAAoB;cAEpB,kBAAC,KAAD;KAAG,MAAK;KAAO,QAAO;KAAe,aAAY;KAAM,SAAQ;eAA/D;MACE,kBAAC,UAAD;OAAQ,IAAI;OAAQ,IAAI;OAAQ,GAAE;OAAO,CAAA;MACzC,kBAAC,UAAD;OAAQ,IAAI;OAAQ,IAAI;OAAQ,GAAE;OAAO,CAAA;MACzC,kBAAC,UAAD;OAAQ,IAAI;OAAQ,IAAI;OAAQ,GAAE;OAAO,CAAA;MACvC;;IACA,CAAA;GAEN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAc,GAAc;KAC3B,WAAW;KACX,OAAO,EAAE,SAAS,GAAa;KAC/B,aAAa;KACd,CAAC;IACE,CAAA;GACF"}

package/dist/theculturepost/components/DecorativeDivider.js

@@ -0,0 +1,45 @@
+import { cn as e } from "../utils/cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/theculturepost/components/DecorativeDivider.tsx
+function r({ className: r }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("flex items-center justify-center gap-3 py-6 text-text-tertiary", r),
+		role: "presentation",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ t("span", { className: "h-px w-16 max-w-[20vw] bg-gradient-to-r from-transparent to-border-seam" }),
+			/* @__PURE__ */ n("svg", {
+				width: "34",
+				height: "12",
+				viewBox: "0 0 34 12",
+				fill: "none",
+				className: "shrink-0",
+				children: [
+					/* @__PURE__ */ t("path", {
+						d: "M17 1 L21 6 L17 11 L13 6 Z",
+						stroke: "currentColor",
+						strokeWidth: "1",
+						fill: "var(--color-accent-soft)"
+					}),
+					/* @__PURE__ */ t("circle", {
+						cx: "4",
+						cy: "6",
+						r: "1.4",
+						fill: "currentColor"
+					}),
+					/* @__PURE__ */ t("circle", {
+						cx: "30",
+						cy: "6",
+						r: "1.4",
+						fill: "currentColor"
+					})
+				]
+			}),
+			/* @__PURE__ */ t("span", { className: "h-px w-16 max-w-[20vw] bg-gradient-to-l from-transparent to-border-seam" })
+		]
+	});
+}
+//#endregion
+export { r as DecorativeDivider };
+
+//# sourceMappingURL=DecorativeDivider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DecorativeDivider.js","names":[],"sources":["../../../src/theculturepost/components/DecorativeDivider.tsx"],"sourcesContent":["/**\n * DecorativeDivider — a small ornamental section break for reading views.\n * @module theculturepost/components\n *\n * A token-only SVG flourish (a centered diamond/knot between two hairlines),\n * used between passages in story/essay reading surfaces for an editorial feel.\n * Purely decorative — hidden from assistive tech.\n */\n\nimport { cn } from '../utils/cn';\n\ninterface DecorativeDividerProps {\n  className?: string;\n}\n\nexport function DecorativeDivider({ className }: DecorativeDividerProps) {\n  return (\n    <div\n      className={cn('flex items-center justify-center gap-3 py-6 text-text-tertiary', className)}\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    >\n      <span className=\"h-px w-16 max-w-[20vw] bg-gradient-to-r from-transparent to-border-seam\" />\n      <svg width=\"34\" height=\"12\" viewBox=\"0 0 34 12\" fill=\"none\" className=\"shrink-0\">\n        <path\n          d=\"M17 1 L21 6 L17 11 L13 6 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1\"\n          fill=\"var(--color-accent-soft)\"\n        />\n        <circle cx=\"4\" cy=\"6\" r=\"1.4\" fill=\"currentColor\" />\n        <circle cx=\"30\" cy=\"6\" r=\"1.4\" fill=\"currentColor\" />\n      </svg>\n      <span className=\"h-px w-16 max-w-[20vw] bg-gradient-to-l from-transparent to-border-seam\" />\n    </div>\n  );\n}\n"],"mappings":";;;AAeA,SAAgB,EAAkB,EAAE,gBAAqC;AACvE,QACE,kBAAC,OAAD;EACE,WAAW,EAAG,kEAAkE,EAAU;EAC1F,MAAK;EACL,eAAY;YAHd;GAKE,kBAAC,QAAD,EAAM,WAAU,2EAA4E,CAAA;GAC5F,kBAAC,OAAD;IAAK,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;IAAO,WAAU;cAAtE;KACE,kBAAC,QAAD;MACE,GAAE;MACF,QAAO;MACP,aAAY;MACZ,MAAK;MACL,CAAA;KACF,kBAAC,UAAD;MAAQ,IAAG;MAAI,IAAG;MAAI,GAAE;MAAM,MAAK;MAAiB,CAAA;KACpD,kBAAC,UAAD;MAAQ,IAAG;MAAK,IAAG;MAAI,GAAE;MAAM,MAAK;MAAiB,CAAA;KACjD;;GACN,kBAAC,QAAD,EAAM,WAAU,2EAA4E,CAAA;GACxF"}

package/dist/theculturepost/components/DiscussionCard.js

@@ -1,71 +1,86 @@
 import { formatNumber as e, formatRelativeTime as t } from "../utils/formatters.js";
 import { StatusBadge as n } from "./StatusBadge.js";
 import { AuthorLabel as r } from "./AuthorLabel.js";
-import { HeartHandshake as i, Lock as a, MessagesSquare as o, Tag as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { GlassCard as u } from "@burdenoff/fe-libs/ui";
+import { DecorativeCover as i } from "./DecorativeCover.js";
+import { HeartHandshake as a, Lock as o, MessagesSquare as s, Tag as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { GlassCard as d } from "@burdenoff/fe-libs/ui";
 //#region src/theculturepost/components/DiscussionCard.tsx
-function d({ discussion: d, onOpen: f }) {
-	return /* @__PURE__ */ l(u, {
+function f({ discussion: f, onOpen: p }) {
+	return /* @__PURE__ */ u(d, {
 		treatment: "plain",
-		className: "flex flex-col p-5",
-		children: [
-			/* @__PURE__ */ l("div", {
-				className: "mb-2 flex flex-wrap items-center gap-1.5",
-				children: [
-					/* @__PURE__ */ c(n, { status: d.status }),
-					d.isInterfaith && /* @__PURE__ */ l("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__ */ c(i, { className: "h-3 w-3" }), " Interfaith"]
-					}),
-					d.isLocked && /* @__PURE__ */ l("span", {
-						className: "inline-flex items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
-						children: [/* @__PURE__ */ c(a, { className: "h-3 w-3" }), " Locked"]
-					})
-				]
-			}),
-			/* @__PURE__ */ c("button", {
-				type: "button",
-				onClick: f,
-				className: "text-left text-base font-semibold leading-snug text-text-primary hover:underline",
-				children: d.title
-			}),
-			d.prompt && /* @__PURE__ */ c("p", {
-				className: "mt-1.5 line-clamp-2 text-sm text-text-secondary",
-				children: d.prompt
-			}),
-			d.tags.length > 0 && /* @__PURE__ */ l("div", {
-				className: "mt-3 flex flex-wrap items-center gap-1.5",
-				children: [/* @__PURE__ */ c(s, {
-					className: "h-3.5 w-3.5 text-text-tertiary",
-					"aria-hidden": "true"
-				}), d.tags.slice(0, 4).map((e) => /* @__PURE__ */ l("span", {
-					className: "rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
-					children: ["#", e]
-				}, e))]
-			}),
-			/* @__PURE__ */ l("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__ */ l("span", {
-					className: "inline-flex items-center gap-3",
-					children: [/* @__PURE__ */ l("span", {
-						className: "inline-flex items-center gap-1",
-						children: [
-							/* @__PURE__ */ c(o, { className: "h-3.5 w-3.5" }),
-							" ",
-							e(d.replyCount),
-							" replies"
-						]
-					}), /* @__PURE__ */ c(r, {
-						actorId: d.openedById,
-						prefix: "Opened by"
-					})]
-				}), /* @__PURE__ */ c("span", { children: t(d.updatedAt) })]
+		className: "flex gap-4 overflow-hidden p-4",
+		children: [/* @__PURE__ */ l("button", {
+			type: "button",
+			onClick: p,
+			"aria-label": `Open ${f.title}`,
+			className: "hidden shrink-0 overflow-hidden rounded-xl sm:block",
+			children: /* @__PURE__ */ l(i, {
+				seed: f.id || f.title,
+				icon: s,
+				className: "h-full w-24"
 			})
-		]
+		}), /* @__PURE__ */ u("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ u("div", {
+					className: "mb-2 flex flex-wrap items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ l(n, { status: f.status }),
+						f.isInterfaith && /* @__PURE__ */ u("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__ */ l(a, { className: "h-3 w-3" }), " Interfaith"]
+						}),
+						f.isLocked && /* @__PURE__ */ u("span", {
+							className: "inline-flex items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
+							children: [/* @__PURE__ */ l(o, { className: "h-3 w-3" }), " Locked"]
+						})
+					]
+				}),
+				/* @__PURE__ */ l("button", {
+					type: "button",
+					onClick: p,
+					className: "font-display text-left text-base font-semibold leading-snug text-text-primary hover:underline",
+					children: f.title
+				}),
+				f.prompt && /* @__PURE__ */ l("p", {
+					className: "mt-1.5 line-clamp-2 text-sm text-text-secondary",
+					children: f.prompt
+				}),
+				f.tags.length > 0 && /* @__PURE__ */ u("div", {
+					className: "mt-3 flex flex-wrap items-center gap-1.5",
+					children: [/* @__PURE__ */ l(c, {
+						className: "h-3.5 w-3.5 text-text-tertiary",
+						"aria-hidden": "true"
+					}), f.tags.slice(0, 4).map((e) => /* @__PURE__ */ u("span", {
+						className: "rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
+						children: ["#", e]
+					}, e))]
+				}),
+				/* @__PURE__ */ u("div", {
+					className: "mt-3 flex flex-wrap items-center justify-between gap-x-3 gap-y-1 border-t border-border-seam pt-3 text-xs text-text-tertiary",
+					children: [/* @__PURE__ */ u("span", {
+						className: "inline-flex flex-wrap items-center gap-x-3 gap-y-1",
+						children: [/* @__PURE__ */ u("span", {
+							className: "inline-flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ l(s, { className: "h-3.5 w-3.5" }),
+								" ",
+								e(f.replyCount),
+								" ",
+								f.replyCount === 1 ? "reply" : "replies"
+							]
+						}), /* @__PURE__ */ l(r, {
+							actorId: f.openedById,
+							prefix: "Opened by"
+						})]
+					}), /* @__PURE__ */ l("span", { children: t(f.updatedAt) })]
+				})
+			]
+		})]
 	});
 }
 //#endregion
-export { d as DiscussionCard };
+export { f as DiscussionCard };
 
 //# sourceMappingURL=DiscussionCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DiscussionCard.js","names":[],"sources":["../../../src/theculturepost/components/DiscussionCard.tsx"],"sourcesContent":["/**\n * DiscussionCard — a tile for a moderated community discussion.\n * @module theculturepost/components\n *\n * Title, prompt, interfaith marker, lock state, moderation status, reply count.\n * Links to the discussion detail page.\n */\n\nimport { MessagesSquare, Lock, HeartHandshake, Tag } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { AuthorLabel } from './AuthorLabel';\nimport { formatNumber, formatRelativeTime } from '../utils/formatters';\nimport type { TcpDiscussion } from '../types';\n\ninterface DiscussionCardProps {\n  discussion: TcpDiscussion;\n  onOpen: () => void;\n}\n\nexport function DiscussionCard({ discussion, onOpen }: DiscussionCardProps) {\n  return (\n    <GlassCard treatment=\"plain\" className=\"flex flex-col p-5\">\n      <div className=\"mb-2 flex flex-wrap items-center gap-1.5\">\n        <StatusBadge status={discussion.status} />\n        {discussion.isInterfaith && (\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            <HeartHandshake className=\"h-3 w-3\" /> Interfaith\n          </span>\n        )}\n        {discussion.isLocked && (\n          <span className=\"inline-flex items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\">\n            <Lock className=\"h-3 w-3\" /> Locked\n          </span>\n        )}\n      </div>\n\n      <button\n        type=\"button\"\n        onClick={onOpen}\n        className=\"text-left text-base font-semibold leading-snug text-text-primary hover:underline\"\n      >\n        {discussion.title}\n      </button>\n\n      {discussion.prompt && (\n        <p className=\"mt-1.5 line-clamp-2 text-sm text-text-secondary\">{discussion.prompt}</p>\n      )}\n\n      {discussion.tags.length > 0 && (\n        <div className=\"mt-3 flex flex-wrap items-center gap-1.5\">\n          <Tag className=\"h-3.5 w-3.5 text-text-tertiary\" aria-hidden=\"true\" />\n          {discussion.tags.slice(0, 4).map((tag) => (\n            <span\n              key={tag}\n              className=\"rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\"\n            >\n              #{tag}\n            </span>\n          ))}\n        </div>\n      )}\n\n      <div className=\"mt-4 flex items-center justify-between gap-3 border-t border-border-seam pt-3 text-xs text-text-tertiary\">\n        <span className=\"inline-flex items-center gap-3\">\n          <span className=\"inline-flex items-center gap-1\">\n            <MessagesSquare className=\"h-3.5 w-3.5\" /> {formatNumber(discussion.replyCount)} replies\n          </span>\n          <AuthorLabel actorId={discussion.openedById} prefix=\"Opened by\" />\n        </span>\n        <span>{formatRelativeTime(discussion.updatedAt)}</span>\n      </div>\n    </GlassCard>\n  );\n}\n"],"mappings":";;;;;;;AAoBA,SAAgB,EAAe,EAAE,eAAY,aAA+B;AAC1E,QACE,kBAAC,GAAD;EAAW,WAAU;EAAQ,WAAU;YAAvC;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD,EAAa,QAAQ,EAAW,QAAU,CAAA;KACzC,EAAW,gBACV,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD,EAAgB,WAAU,WAAY,CAAA,EAAA,cACjC;;KAER,EAAW,YACV,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,UACvB;;KAEL;;GAEN,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;cAET,EAAW;IACL,CAAA;GAER,EAAW,UACV,kBAAC,KAAD;IAAG,WAAU;cAAmD,EAAW;IAAW,CAAA;GAGvF,EAAW,KAAK,SAAS,KACxB,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAK,WAAU;KAAiC,eAAY;KAAS,CAAA,EACpE,EAAW,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK,MAChC,kBAAC,QAAD;KAEE,WAAU;eAFZ,CAGC,KACG,EACG;OAJA,EAIA,CACP,CACE;;GAGR,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAgB,WAAU,eAAgB,CAAA;;OAAE,EAAa,EAAW,WAAW;OAAC;OAC3E;SACP,kBAAC,GAAD;MAAa,SAAS,EAAW;MAAY,QAAO;MAAc,CAAA,CAC7D;QACP,kBAAC,QAAD,EAAA,UAAO,EAAmB,EAAW,UAAU,EAAQ,CAAA,CACnD;;GACI"}
+{"version":3,"file":"DiscussionCard.js","names":[],"sources":["../../../src/theculturepost/components/DiscussionCard.tsx"],"sourcesContent":["/**\n * DiscussionCard — a list row for a moderated community discussion.\n * @module theculturepost/components\n *\n * Row layout: a token-only {@link DecorativeCover} thumb (no discussion imagery\n * exists in the schema) on the left; title, prompt, interfaith / lock / status\n * badges, tag chips, reply count, opener + time-ago on the right. Links to the\n * discussion detail page. Collapses to a stacked layout at 375px.\n */\n\nimport { MessagesSquare, Lock, HeartHandshake, Tag } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { DecorativeCover } from './DecorativeCover';\nimport { AuthorLabel } from './AuthorLabel';\nimport { formatNumber, formatRelativeTime } from '../utils/formatters';\nimport type { TcpDiscussion } from '../types';\n\ninterface DiscussionCardProps {\n  discussion: TcpDiscussion;\n  onOpen: () => void;\n}\n\nexport function DiscussionCard({ discussion, onOpen }: DiscussionCardProps) {\n  return (\n    <GlassCard treatment=\"plain\" className=\"flex gap-4 overflow-hidden p-4\">\n      <button\n        type=\"button\"\n        onClick={onOpen}\n        aria-label={`Open ${discussion.title}`}\n        className=\"hidden shrink-0 overflow-hidden rounded-xl sm:block\"\n      >\n        <DecorativeCover\n          seed={discussion.id || discussion.title}\n          icon={MessagesSquare}\n          className=\"h-full w-24\"\n        />\n      </button>\n\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"mb-2 flex flex-wrap items-center gap-1.5\">\n          <StatusBadge status={discussion.status} />\n          {discussion.isInterfaith && (\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              <HeartHandshake className=\"h-3 w-3\" /> Interfaith\n            </span>\n          )}\n          {discussion.isLocked && (\n            <span className=\"inline-flex items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\">\n              <Lock className=\"h-3 w-3\" /> Locked\n            </span>\n          )}\n        </div>\n\n        <button\n          type=\"button\"\n          onClick={onOpen}\n          className=\"font-display text-left text-base font-semibold leading-snug text-text-primary hover:underline\"\n        >\n          {discussion.title}\n        </button>\n\n        {discussion.prompt && (\n          <p className=\"mt-1.5 line-clamp-2 text-sm text-text-secondary\">{discussion.prompt}</p>\n        )}\n\n        {discussion.tags.length > 0 && (\n          <div className=\"mt-3 flex flex-wrap items-center gap-1.5\">\n            <Tag className=\"h-3.5 w-3.5 text-text-tertiary\" aria-hidden=\"true\" />\n            {discussion.tags.slice(0, 4).map((tag) => (\n              <span\n                key={tag}\n                className=\"rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\"\n              >\n                #{tag}\n              </span>\n            ))}\n          </div>\n        )}\n\n        <div className=\"mt-3 flex flex-wrap items-center justify-between gap-x-3 gap-y-1 border-t border-border-seam pt-3 text-xs text-text-tertiary\">\n          <span className=\"inline-flex flex-wrap items-center gap-x-3 gap-y-1\">\n            <span className=\"inline-flex items-center gap-1\">\n              <MessagesSquare className=\"h-3.5 w-3.5\" /> {formatNumber(discussion.replyCount)}{' '}\n              {discussion.replyCount === 1 ? 'reply' : 'replies'}\n            </span>\n            <AuthorLabel actorId={discussion.openedById} prefix=\"Opened by\" />\n          </span>\n          <span>{formatRelativeTime(discussion.updatedAt)}</span>\n        </div>\n      </div>\n    </GlassCard>\n  );\n}\n"],"mappings":";;;;;;;;AAuBA,SAAgB,EAAe,EAAE,eAAY,aAA+B;AAC1E,QACE,kBAAC,GAAD;EAAW,WAAU;EAAQ,WAAU;YAAvC,CACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,cAAY,QAAQ,EAAW;GAC/B,WAAU;aAEV,kBAAC,GAAD;IACE,MAAM,EAAW,MAAM,EAAW;IAClC,MAAM;IACN,WAAU;IACV,CAAA;GACK,CAAA,EAET,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD,EAAa,QAAQ,EAAW,QAAU,CAAA;MACzC,EAAW,gBACV,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CACE,kBAAC,GAAD,EAAgB,WAAU,WAAY,CAAA,EAAA,cACjC;;MAER,EAAW,YACV,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,UACvB;;MAEL;;IAEN,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;eAET,EAAW;KACL,CAAA;IAER,EAAW,UACV,kBAAC,KAAD;KAAG,WAAU;eAAmD,EAAW;KAAW,CAAA;IAGvF,EAAW,KAAK,SAAS,KACxB,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAK,WAAU;MAAiC,eAAY;MAAS,CAAA,EACpE,EAAW,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK,MAChC,kBAAC,QAAD;MAEE,WAAU;gBAFZ,CAGC,KACG,EACG;QAJA,EAIA,CACP,CACE;;IAGR,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACE,kBAAC,GAAD,EAAgB,WAAU,eAAgB,CAAA;;QAAE,EAAa,EAAW,WAAW;QAAE;QAChF,EAAW,eAAe,IAAI,UAAU;QACpC;UACP,kBAAC,GAAD;OAAa,SAAS,EAAW;OAAY,QAAO;OAAc,CAAA,CAC7D;SACP,kBAAC,QAAD,EAAA,UAAO,EAAmB,EAAW,UAAU,EAAQ,CAAA,CACnD;;IACF;KACI"}

package/dist/theculturepost/components/HistoryTimeline.js

@@ -0,0 +1,115 @@
+import { cn as e } from "../utils/cn.js";
+import { useId as t } from "react";
+import { Milestone as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/theculturepost/components/HistoryTimeline.tsx
+function a({ entry: t, above: a }) {
+	let o = t.icon ?? n, s = !!t.onOpen;
+	return /* @__PURE__ */ i(s ? "button" : "div", {
+		...s ? {
+			type: "button",
+			onClick: t.onOpen,
+			"aria-label": `Open ${t.title}`
+		} : {},
+		className: e("flex w-full flex-col gap-1 rounded-xl border border-border-seam bg-bg-surface p-4 text-left shadow-sm", s && "transition-shadow hover:shadow-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)]", a ? "md:self-end" : "md:self-start"),
+		children: [
+			/* @__PURE__ */ r("span", {
+				className: "text-xs font-semibold uppercase tracking-wide text-accent",
+				children: t.date
+			}),
+			/* @__PURE__ */ r("span", {
+				className: "font-display text-base font-semibold leading-snug text-text-primary",
+				children: t.title
+			}),
+			t.subtitle && /* @__PURE__ */ r("span", {
+				className: "line-clamp-2 text-sm text-text-secondary",
+				children: t.subtitle
+			}),
+			t.kind && /* @__PURE__ */ i("span", {
+				className: "mt-1 inline-flex w-fit 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__ */ r(o, {
+						className: "h-3 w-3",
+						"aria-hidden": "true"
+					}),
+					" ",
+					t.kind
+				]
+			})
+		]
+	});
+}
+function o({ entries: n, className: o }) {
+	let s = t();
+	return n.length === 0 ? /* @__PURE__ */ r("p", {
+		className: e("text-sm text-text-tertiary", o),
+		children: "No timeline entries yet."
+	}) : /* @__PURE__ */ i("section", {
+		"aria-labelledby": s,
+		className: e("w-full", o),
+		children: [
+			/* @__PURE__ */ r("h2", {
+				id: s,
+				className: "sr-only",
+				children: "Timeline"
+			}),
+			/* @__PURE__ */ r("ol", {
+				className: "relative space-y-6 border-l border-border-seam pl-6 md:hidden",
+				children: n.map((e) => /* @__PURE__ */ i("li", {
+					className: "relative",
+					children: [/* @__PURE__ */ r("span", {
+						className: "absolute -left-[1.6rem] top-1.5 h-3 w-3 rounded-full border-2 border-bg-canvas bg-accent",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ r(a, {
+						entry: e,
+						above: !1
+					})]
+				}, e.id))
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "hidden overflow-x-auto pb-2 md:block",
+				children: /* @__PURE__ */ r("ol", {
+					className: "flex min-w-full items-stretch gap-6",
+					children: n.map((e, t) => {
+						let o = t % 2 == 0;
+						return /* @__PURE__ */ i("li", {
+							className: "flex w-64 shrink-0 flex-col justify-center",
+							"aria-setsize": n.length,
+							"aria-posinset": t + 1,
+							children: [
+								/* @__PURE__ */ r("div", {
+									className: "flex min-h-[9rem] items-end",
+									children: o && /* @__PURE__ */ r(a, {
+										entry: e,
+										above: !0
+									})
+								}),
+								/* @__PURE__ */ i("div", {
+									className: "relative flex items-center py-3",
+									children: [/* @__PURE__ */ r("span", {
+										className: "h-px w-full bg-border-seam",
+										"aria-hidden": "true"
+									}), /* @__PURE__ */ r("span", {
+										className: "absolute left-1/2 h-3.5 w-3.5 -translate-x-1/2 rounded-full border-2 border-bg-canvas bg-accent",
+										"aria-hidden": "true"
+									})]
+								}),
+								/* @__PURE__ */ r("div", {
+									className: "flex min-h-[9rem] items-start",
+									children: !o && /* @__PURE__ */ r(a, {
+										entry: e,
+										above: !1
+									})
+								})
+							]
+						}, e.id);
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { o as HistoryTimeline };
+
+//# sourceMappingURL=HistoryTimeline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HistoryTimeline.js","names":[],"sources":["../../../src/theculturepost/components/HistoryTimeline.tsx"],"sourcesContent":["/**\n * HistoryTimeline — a responsive, alternating-axis timeline of dated entries.\n * @module theculturepost/components\n *\n * Desktop (md+): a horizontal spine with cards alternating above / below each\n * node, scrolling horizontally when the entries overflow. Mobile: a vertical\n * spine with all cards stacked on one side. Token-only. Cards are optionally\n * clickable via `onOpen`. Dates are shown verbatim (the schema stores free-text\n * era/date strings) — never reformatted or fabricated.\n */\n\nimport { useId } from 'react';\nimport type { LucideIcon } from 'lucide-react';\nimport { Milestone } from 'lucide-react';\nimport { cn } from '../utils/cn';\n\nexport interface TimelineEntry {\n  id: string;\n  /** Verbatim date/era label (e.g. \"1054 CE\", \"c. 2000 BCE\"). */\n  date: string;\n  title: string;\n  subtitle?: string;\n  /** Small kind/category chip shown on the card. */\n  kind?: string;\n  icon?: LucideIcon;\n  onOpen?: () => void;\n}\n\ninterface HistoryTimelineProps {\n  entries: TimelineEntry[];\n  className?: string;\n}\n\nfunction EntryCard({ entry, above }: { entry: TimelineEntry; above: boolean }) {\n  const Icon = entry.icon ?? Milestone;\n  const interactive = Boolean(entry.onOpen);\n  const Wrapper = interactive ? 'button' : 'div';\n\n  return (\n    <Wrapper\n      {...(interactive\n        ? { type: 'button' as const, onClick: entry.onOpen, 'aria-label': `Open ${entry.title}` }\n        : {})}\n      className={cn(\n        'flex w-full flex-col gap-1 rounded-xl border border-border-seam bg-bg-surface p-4 text-left shadow-sm',\n        interactive &&\n          'transition-shadow hover:shadow-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)]',\n        // point the card toward the spine\n        above ? 'md:self-end' : 'md:self-start'\n      )}\n    >\n      <span className=\"text-xs font-semibold uppercase tracking-wide text-accent\">\n        {entry.date}\n      </span>\n      <span className=\"font-display text-base font-semibold leading-snug text-text-primary\">\n        {entry.title}\n      </span>\n      {entry.subtitle && (\n        <span className=\"line-clamp-2 text-sm text-text-secondary\">{entry.subtitle}</span>\n      )}\n      {entry.kind && (\n        <span className=\"mt-1 inline-flex w-fit items-center gap-1 rounded-full bg-[var(--color-accent-soft)] px-2 py-0.5 text-xs font-medium text-text-primary\">\n          <Icon className=\"h-3 w-3\" aria-hidden=\"true\" /> {entry.kind}\n        </span>\n      )}\n    </Wrapper>\n  );\n}\n\nexport function HistoryTimeline({ entries, className }: HistoryTimelineProps) {\n  const labelId = useId();\n\n  if (entries.length === 0) {\n    return <p className={cn('text-sm text-text-tertiary', className)}>No timeline entries yet.</p>;\n  }\n\n  return (\n    <section aria-labelledby={labelId} className={cn('w-full', className)}>\n      <h2 id={labelId} className=\"sr-only\">\n        Timeline\n      </h2>\n\n      {/* Mobile: vertical spine */}\n      <ol className=\"relative space-y-6 border-l border-border-seam pl-6 md:hidden\">\n        {entries.map((entry) => (\n          <li key={entry.id} className=\"relative\">\n            <span\n              className=\"absolute -left-[1.6rem] top-1.5 h-3 w-3 rounded-full border-2 border-bg-canvas bg-accent\"\n              aria-hidden=\"true\"\n            />\n            <EntryCard entry={entry} above={false} />\n          </li>\n        ))}\n      </ol>\n\n      {/* Desktop: horizontal alternating spine, scrolls on overflow */}\n      <div className=\"hidden overflow-x-auto pb-2 md:block\">\n        <ol className=\"flex min-w-full items-stretch gap-6\">\n          {entries.map((entry, i) => {\n            const above = i % 2 === 0;\n            return (\n              <li\n                key={entry.id}\n                className=\"flex w-64 shrink-0 flex-col justify-center\"\n                aria-setsize={entries.length}\n                aria-posinset={i + 1}\n              >\n                <div className=\"flex min-h-[9rem] items-end\">\n                  {above && <EntryCard entry={entry} above />}\n                </div>\n                {/* spine node */}\n                <div className=\"relative flex items-center py-3\">\n                  <span className=\"h-px w-full bg-border-seam\" aria-hidden=\"true\" />\n                  <span\n                    className=\"absolute left-1/2 h-3.5 w-3.5 -translate-x-1/2 rounded-full border-2 border-bg-canvas bg-accent\"\n                    aria-hidden=\"true\"\n                  />\n                </div>\n                <div className=\"flex min-h-[9rem] items-start\">\n                  {!above && <EntryCard entry={entry} above={false} />}\n                </div>\n              </li>\n            );\n          })}\n        </ol>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;AAiCA,SAAS,EAAU,EAAE,UAAO,YAAmD;CAC7E,IAAM,IAAO,EAAM,QAAQ,GACrB,IAAc,EAAQ,EAAM;AAGlC,QACE,kBAHc,IAAc,WAAW,OAGvC;EACE,GAAK,IACD;GAAE,MAAM;GAAmB,SAAS,EAAM;GAAQ,cAAc,QAAQ,EAAM;GAAS,GACvF,EAAE;EACN,WAAW,EACT,yGACA,KACE,8JAEF,IAAQ,gBAAgB,gBACzB;YAVH;GAYE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAM;IACF,CAAA;GACP,kBAAC,QAAD;IAAM,WAAU;cACb,EAAM;IACF,CAAA;GACN,EAAM,YACL,kBAAC,QAAD;IAAM,WAAU;cAA4C,EAAM;IAAgB,CAAA;GAEnF,EAAM,QACL,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,GAAD;MAAM,WAAU;MAAU,eAAY;MAAS,CAAA;;KAAE,EAAM;KAClD;;GAED;;;AAId,SAAgB,EAAgB,EAAE,YAAS,gBAAmC;CAC5E,IAAM,IAAU,GAAO;AAMvB,QAJI,EAAQ,WAAW,IACd,kBAAC,KAAD;EAAG,WAAW,EAAG,8BAA8B,EAAU;YAAE;EAA4B,CAAA,GAI9F,kBAAC,WAAD;EAAS,mBAAiB;EAAS,WAAW,EAAG,UAAU,EAAU;YAArE;GACE,kBAAC,MAAD;IAAI,IAAI;IAAS,WAAU;cAAU;IAEhC,CAAA;GAGL,kBAAC,MAAD;IAAI,WAAU;cACX,EAAQ,KAAK,MACZ,kBAAC,MAAD;KAAmB,WAAU;eAA7B,CACE,kBAAC,QAAD;MACE,WAAU;MACV,eAAY;MACZ,CAAA,EACF,kBAAC,GAAD;MAAkB;MAAO,OAAO;MAAS,CAAA,CACtC;OANI,EAAM,GAMV,CACL;IACC,CAAA;GAGL,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,MAAD;KAAI,WAAU;eACX,EAAQ,KAAK,GAAO,MAAM;MACzB,IAAM,IAAQ,IAAI,KAAM;AACxB,aACE,kBAAC,MAAD;OAEE,WAAU;OACV,gBAAc,EAAQ;OACtB,iBAAe,IAAI;iBAJrB;QAME,kBAAC,OAAD;SAAK,WAAU;mBACZ,KAAS,kBAAC,GAAD;UAAkB;UAAO,OAAA;UAAQ,CAAA;SACvC,CAAA;QAEN,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,QAAD;UAAM,WAAU;UAA6B,eAAY;UAAS,CAAA,EAClE,kBAAC,QAAD;UACE,WAAU;UACV,eAAY;UACZ,CAAA,CACE;;QACN,kBAAC,OAAD;SAAK,WAAU;mBACZ,CAAC,KAAS,kBAAC,GAAD;UAAkB;UAAO,OAAO;UAAS,CAAA;SAChD,CAAA;QACH;SAnBE,EAAM,GAmBR;OAEP;KACC,CAAA;IACD,CAAA;GACE"}

package/dist/theculturepost/components/LifecycleStepper.js

@@ -0,0 +1,33 @@
+import { cn as e } from "../utils/cn.js";
+import { formatEnumLabel as t } from "../utils/formatters.js";
+import { Archive as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Stepper as a } from "@burdenoff/fe-libs/ui";
+//#region src/theculturepost/components/LifecycleStepper.tsx
+var o = [
+	"IDEA",
+	"DRAFT",
+	"IN_REVIEW",
+	"PUBLISHED"
+], s = o.map((e) => ({
+	key: e,
+	label: t(e)
+}));
+function c({ status: t, className: c, onStepClick: l }) {
+	return t === "ARCHIVED" ? /* @__PURE__ */ i("div", {
+		className: e("inline-flex items-center gap-2 rounded-full border border-border-seam bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary", c),
+		children: [/* @__PURE__ */ r(n, {
+			className: "h-4 w-4",
+			"aria-hidden": "true"
+		}), "Archived"]
+	}) : /* @__PURE__ */ r(a, {
+		steps: s,
+		active: Math.max(0, o.indexOf(t)),
+		onStepClick: l,
+		className: c
+	});
+}
+//#endregion
+export { c as LifecycleStepper };
+
+//# sourceMappingURL=LifecycleStepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifecycleStepper.js","names":[],"sources":["../../../src/theculturepost/components/LifecycleStepper.tsx"],"sourcesContent":["/**\n * LifecycleStepper — maps a story's status to an ordered editorial stepper.\n * @module theculturepost/components\n *\n * Idea → Draft → In Review → Published (with Archived as a terminal off-path\n * state). Wraps the fe-libs {@link Stepper} (which fe-libs ships) so we stay on\n * the shared design system; we only translate the domain enum → step index.\n * Read-only by default (no onStepClick) since status transitions are driven by\n * dedicated mutations, not by clicking the indicator.\n */\n\nimport { Stepper, type StepperStep } from '@burdenoff/fe-libs/ui';\nimport { Archive } from 'lucide-react';\nimport { cn } from '../utils/cn';\nimport { formatEnumLabel } from '../utils/formatters';\nimport type { TcpStoryStatus } from '../types';\n\ninterface LifecycleStepperProps {\n  status: TcpStoryStatus;\n  className?: string;\n  /** Optional click handler (index into the ordered steps). Read-only if omitted. */\n  onStepClick?: (index: number) => void;\n}\n\n/** The linear editorial path. ARCHIVED is terminal / off-path (handled below). */\nconst FLOW: TcpStoryStatus[] = ['IDEA', 'DRAFT', 'IN_REVIEW', 'PUBLISHED'];\n\nconst STEPS: StepperStep[] = FLOW.map((s) => ({ key: s, label: formatEnumLabel(s) }));\n\nexport function LifecycleStepper({ status, className, onStepClick }: LifecycleStepperProps) {\n  if (status === 'ARCHIVED') {\n    return (\n      <div\n        className={cn(\n          'inline-flex items-center gap-2 rounded-full border border-border-seam bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary',\n          className\n        )}\n      >\n        <Archive className=\"h-4 w-4\" aria-hidden=\"true\" />\n        Archived\n      </div>\n    );\n  }\n\n  const active = Math.max(0, FLOW.indexOf(status));\n\n  return <Stepper steps={STEPS} active={active} onStepClick={onStepClick} className={className} />;\n}\n"],"mappings":";;;;;;AAyBA,IAAM,IAAyB;CAAC;CAAQ;CAAS;CAAa;CAAY,EAEpE,IAAuB,EAAK,KAAK,OAAO;CAAE,KAAK;CAAG,OAAO,EAAgB,EAAE;CAAE,EAAE;AAErF,SAAgB,EAAiB,EAAE,WAAQ,cAAW,kBAAsC;AAiB1F,QAhBI,MAAW,aAEX,kBAAC,OAAD;EACE,WAAW,EACT,wIACA,EACD;YAJH,CAME,kBAAC,GAAD;GAAS,WAAU;GAAU,eAAY;GAAS,CAAA,EAAA,WAE9C;MAMH,kBAAC,GAAD;EAAS,OAAO;EAAe,QAFvB,KAAK,IAAI,GAAG,EAAK,QAAQ,EAAO,CAAC;EAEW;EAAwB;EAAa,CAAA"}