npm - @burdenoff/microfe-theculturepost - Versions diffs - 2026.704.2 → 2026.705.2 - Mend

@burdenoff/microfe-theculturepost 2026.704.2 → 2026.705.2

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 (91) hide show

package/dist/theculturepost/pages/governance/GovernancePage.js ADDED Viewed

@@ -0,0 +1,293 @@
+import { useTheCulturePost as e } from "../../context/TheCulturePostContext.js";
+import "../../context/index.js";
+import { PageHero as t } from "../../components/PageHero.js";
+import { ErrorView as n, LoadingView as r, Section as i } from "../../components/StateViews.js";
+import { formatRelativeTime as a } from "../../utils/formatters.js";
+import { StatusBadge as o } from "../../components/StatusBadge.js";
+import { EmptyState as s } from "../../components/EmptyState.js";
+import { useTcpArchiveItems as c, useTcpCollections as l, useTcpDiscussions as u, useTcpStories as d } from "../../hooks/useTcpApi.js";
+import "../../hooks/index.js";
+import { StatTile as f } from "../../components/viz/StatTile.js";
+import { BarChart as p } from "../../components/viz/BarChart.js";
+import { Donut as m } from "../../components/viz/Donut.js";
+import "../../components/index.js";
+import { useMemo as h } from "react";
+import { Activity as g, ArrowRight as _, BookOpen as v, Clock as y, Library as b, Lightbulb as x, MessagesSquare as S, PencilLine as C, ShieldCheck as w } from "lucide-react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { GlassCard as O } from "@burdenoff/fe-libs/ui";
+//#region src/theculturepost/pages/governance/GovernancePage.tsx
+var k = 100, A = {
+	story: v,
+	discussion: S
+};
+function j() {
+	let { navigateTo: j } = e(), M = d({
+		status: "IDEA",
+		pagination: { limit: k }
+	}), N = d({
+		status: "DRAFT",
+		pagination: { limit: k }
+	}), P = d({
+		status: "IN_REVIEW",
+		pagination: { limit: k }
+	}), F = d({
+		status: "PUBLISHED",
+		pagination: { limit: k }
+	}), I = u({ pagination: { limit: k } }), L = l({ limit: k }), R = c({ pagination: { limit: k } }), z = [
+		...[
+			M,
+			N,
+			P,
+			F
+		],
+		I,
+		L,
+		R
+	], B = h(() => M.data?.items ?? [], [M.data]), V = h(() => N.data?.items ?? [], [N.data]), H = h(() => P.data?.items ?? [], [P.data]), U = h(() => F.data?.items ?? [], [F.data]), W = h(() => I.data?.items ?? [], [I.data]), G = B.length, K = V.length, q = H.length, J = U.length, Y = W.length, X = W.filter((e) => e.status === "APPROVED").length, Z = Y - X, Q = L.data?.length ?? 0, ee = R.data?.items.length ?? 0, te = [
+		{
+			label: "Idea",
+			value: G
+		},
+		{
+			label: "Draft",
+			value: K
+		},
+		{
+			label: "In Review",
+			value: q
+		},
+		{
+			label: "Published",
+			value: J
+		}
+	], $ = h(() => {
+		let e = [
+			...B,
+			...V,
+			...H,
+			...U
+		].map((e) => ({
+			id: `story:${e.id}`,
+			kind: "story",
+			title: e.title,
+			status: e.status,
+			createdAt: e.createdAt,
+			onOpen: () => j(`stories/${e.id}`)
+		})), t = W.map((e) => ({
+			id: `discussion:${e.id}`,
+			kind: "discussion",
+			title: e.title,
+			status: e.status,
+			createdAt: e.createdAt,
+			onOpen: () => j(`discussions/${e.id}`)
+		}));
+		return [...e, ...t].sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime()).slice(0, 8);
+	}, [
+		B,
+		V,
+		H,
+		U,
+		W,
+		j
+	]), ne = z.some((e) => e.isLoading), re = z.some((e) => e.isError);
+	return /* @__PURE__ */ E("div", {
+		className: "h-full overflow-auto",
+		children: /* @__PURE__ */ D("div", {
+			className: "mx-auto flex max-w-6xl flex-col gap-6 p-4 sm:p-6",
+			children: [/* @__PURE__ */ E(t, {
+				eyebrow: "Editorial",
+				title: "Governance & Editorial",
+				description: "Oversee content quality, discussions and community participation — at a glance."
+			}), ne ? /* @__PURE__ */ E(r, { label: "Computing editorial metrics…" }) : re ? /* @__PURE__ */ E(n, {
+				title: "Couldn't load the overview",
+				message: "We couldn't compute the editorial metrics for this workspace.",
+				onRetry: () => {
+					z.forEach((e) => {
+						e.refetch();
+					});
+				}
+			}) : /* @__PURE__ */ D(T, { children: [
+				/* @__PURE__ */ E("p", {
+					className: "-mt-2 text-xs text-text-tertiary",
+					children: "Counts are computed live from the current workspace."
+				}),
+				/* @__PURE__ */ D("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+					children: [
+						/* @__PURE__ */ E(f, {
+							icon: /* @__PURE__ */ E(v, { className: "h-5 w-5" }),
+							label: "Published",
+							value: J,
+							caption: "stories live"
+						}),
+						/* @__PURE__ */ E(f, {
+							icon: /* @__PURE__ */ E(y, { className: "h-5 w-5" }),
+							label: "In Review",
+							value: q,
+							caption: "awaiting editorial sign-off"
+						}),
+						/* @__PURE__ */ E(f, {
+							icon: /* @__PURE__ */ E(C, { className: "h-5 w-5" }),
+							label: "Draft",
+							value: K,
+							caption: "in progress"
+						}),
+						/* @__PURE__ */ E(f, {
+							icon: /* @__PURE__ */ E(x, { className: "h-5 w-5" }),
+							label: "Idea",
+							value: G,
+							caption: "pitched, not yet drafted"
+						}),
+						/* @__PURE__ */ E(f, {
+							icon: /* @__PURE__ */ E(S, { className: "h-5 w-5" }),
+							label: "Discussions",
+							value: Y,
+							caption: "community conversations"
+						}),
+						/* @__PURE__ */ E(f, {
+							icon: /* @__PURE__ */ E(b, { className: "h-5 w-5" }),
+							label: "Archive",
+							value: ee,
+							caption: `artifacts in ${Q} collection${Q === 1 ? "" : "s"}`
+						})
+					]
+				}),
+				/* @__PURE__ */ D("div", {
+					className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
+					children: [/* @__PURE__ */ D(O, {
+						treatment: "plain",
+						className: "flex flex-col gap-4 p-5 sm:p-6",
+						children: [/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("h2", {
+							className: "font-display text-lg font-semibold text-text-primary",
+							children: "Content pipeline"
+						}), /* @__PURE__ */ E("p", {
+							className: "mt-0.5 text-sm text-text-secondary",
+							children: "Stories across the editorial lifecycle."
+						})] }), J + q + K + G === 0 ? /* @__PURE__ */ E(s, {
+							icon: /* @__PURE__ */ E(v, { className: "h-9 w-9" }),
+							title: "No stories yet",
+							description: "Draft the first story to populate the pipeline."
+						}) : /* @__PURE__ */ E(p, {
+							ariaLabel: "Stories by lifecycle stage",
+							data: te,
+							height: 180
+						})]
+					}), /* @__PURE__ */ D(O, {
+						treatment: "plain",
+						className: "flex flex-col gap-4 p-5 sm:p-6",
+						children: [/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("h2", {
+							className: "font-display text-lg font-semibold text-text-primary",
+							children: "Discussion health"
+						}), /* @__PURE__ */ E("p", {
+							className: "mt-0.5 text-sm text-text-secondary",
+							children: "Share of community discussions that are approved."
+						})] }), Y === 0 ? /* @__PURE__ */ E(s, {
+							icon: /* @__PURE__ */ E(S, { className: "h-9 w-9" }),
+							title: "No discussions yet",
+							description: "Open a discussion to start tracking conversation quality."
+						}) : /* @__PURE__ */ D("div", {
+							className: "flex flex-col items-center gap-5 sm:flex-row sm:items-center sm:gap-6",
+							children: [/* @__PURE__ */ E(m, {
+								value: X,
+								total: Y,
+								caption: "approved",
+								size: 140,
+								ariaLabel: `${X} of ${Y} discussions approved`
+							}), /* @__PURE__ */ D("dl", {
+								className: "flex w-full flex-col gap-3",
+								children: [
+									/* @__PURE__ */ D("div", {
+										className: "flex items-center justify-between gap-3",
+										children: [/* @__PURE__ */ D("dt", {
+											className: "flex items-center gap-2 text-sm text-text-secondary",
+											children: [/* @__PURE__ */ E("span", {
+												className: "h-2.5 w-2.5 rounded-full bg-accent",
+												"aria-hidden": "true"
+											}), "Approved"]
+										}), /* @__PURE__ */ E("dd", {
+											className: "font-display text-sm font-semibold tabular-nums text-text-primary",
+											children: X
+										})]
+									}),
+									/* @__PURE__ */ D("div", {
+										className: "flex items-center justify-between gap-3",
+										children: [/* @__PURE__ */ D("dt", {
+											className: "flex items-center gap-2 text-sm text-text-secondary",
+											children: [/* @__PURE__ */ E("span", {
+												className: "h-2.5 w-2.5 rounded-full bg-bg-sunken",
+												"aria-hidden": "true"
+											}), "Needs attention"]
+										}), /* @__PURE__ */ E("dd", {
+											className: "font-display text-sm font-semibold tabular-nums text-text-primary",
+											children: Z
+										})]
+									}),
+									/* @__PURE__ */ D("div", {
+										className: "mt-1 flex items-start gap-2 rounded-lg bg-bg-sunken/60 p-3 text-xs text-text-secondary",
+										children: [/* @__PURE__ */ E(w, {
+											className: "mt-0.5 h-4 w-4 shrink-0 text-accent",
+											"aria-hidden": "true"
+										}), /* @__PURE__ */ E("span", { children: "Approved replies are published; pending, flagged and removed discussions need a moderator’s attention." })]
+									})
+								]
+							})]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ E(i, {
+					title: "Recent activity",
+					description: "The latest stories and discussions across the workspace.",
+					children: $.length === 0 ? /* @__PURE__ */ E(s, {
+						icon: /* @__PURE__ */ E(g, { className: "h-9 w-9" }),
+						title: "Nothing yet",
+						description: "Draft a story or open a discussion — it will show up here."
+					}) : /* @__PURE__ */ E(O, {
+						treatment: "plain",
+						className: "divide-y divide-border-seam",
+						children: $.map((e) => {
+							let t = A[e.kind];
+							return /* @__PURE__ */ D("button", {
+								type: "button",
+								onClick: e.onOpen,
+								className: "flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-bg-sunken/60 focus-visible:bg-bg-sunken/60 focus-visible:outline-none",
+								children: [
+									/* @__PURE__ */ E("span", {
+										className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
+										"aria-hidden": "true",
+										children: /* @__PURE__ */ E(t, { className: "h-4 w-4" })
+									}),
+									/* @__PURE__ */ D("div", {
+										className: "min-w-0 flex-1",
+										children: [/* @__PURE__ */ E("p", {
+											className: "truncate text-sm font-medium text-text-primary",
+											children: e.title
+										}), /* @__PURE__ */ D("p", {
+											className: "mt-0.5 text-xs capitalize text-text-tertiary",
+											children: [
+												e.kind,
+												" · ",
+												a(e.createdAt)
+											]
+										})]
+									}),
+									/* @__PURE__ */ E(o, {
+										status: e.status,
+										className: "hidden shrink-0 sm:inline-flex"
+									}),
+									/* @__PURE__ */ E(_, {
+										className: "h-4 w-4 shrink-0 text-text-tertiary",
+										"aria-hidden": "true"
+									})
+								]
+							}, e.id);
+						})
+					})
+				})
+			] })]
+		})
+	});
+}
+//#endregion
+export { j as GovernancePage };
+//# sourceMappingURL=GovernancePage.js.map

package/dist/theculturepost/pages/governance/GovernancePage.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GovernancePage.js","names":[],"sources":["../../../../src/theculturepost/pages/governance/GovernancePage.tsx"],"sourcesContent":["/**\n * GovernancePage — the editorial / governance overview for TheCulturePost.\n * @module theculturepost/pages/governance\n *\n * A data-honest dashboard computed entirely from real counts in the current\n * workspace. There is NO historical series in the contract, so this surface\n * carries NO trend deltas and NO time-series line chart (unlike the concept\n * mockup). It also DROPS the \"Contributors & Roles\" table — actors are id-only\n * federation stubs and roles are platform RBAC, neither of which this subgraph\n * exposes.\n *\n * What it renders, all from live `tcp*` reads:\n * - Status StatTiles: Published / In Review / Draft / Idea stories, plus a\n * Discussions total and an Archive (artifacts) count.\n * - \"Content pipeline\" {@link BarChart} across the lifecycle stages.\n * - \"Discussion health\" {@link Donut} = share of discussions that are Approved.\n * - \"Recent activity\" — the latest stories + discussions, newest first.\n */\n\nimport { useMemo } from 'react';\nimport {\n BookOpen,\n Clock,\n PencilLine,\n Lightbulb,\n MessagesSquare,\n Library,\n Activity,\n ShieldCheck,\n ArrowRight,\n} from 'lucide-react';\nimport type { LucideIcon } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport {\n PageHero,\n Section,\n LoadingView,\n ErrorView,\n EmptyState,\n StatTile,\n BarChart,\n Donut,\n StatusBadge,\n type BarDatum,\n} from '../../components';\nimport {\n useTcpStories,\n useTcpDiscussions,\n useTcpCollections,\n useTcpArchiveItems,\n} from '../../hooks';\nimport { useTheCulturePost } from '../../context';\nimport { formatRelativeTime } from '../../utils/formatters';\n\nconst COUNT_LIMIT = 100;\n\ntype ActivityKind = 'story' | 'discussion';\n\ninterface ActivityRow {\n id: string;\n kind: ActivityKind;\n title: string;\n status: string;\n createdAt: string;\n onOpen: () => void;\n}\n\nconst ACTIVITY_ICON: Record<ActivityKind, LucideIcon> = {\n story: BookOpen,\n discussion: MessagesSquare,\n};\n\nexport function GovernancePage() {\n const { navigateTo } = useTheCulturePost();\n\n // One query per lifecycle stage — each returns that stage's stories, so the\n // count is `items.length` (up to COUNT_LIMIT). No cross-stage query needed.\n const ideaQuery = useTcpStories({ status: 'IDEA', pagination: { limit: COUNT_LIMIT } });\n const draftQuery = useTcpStories({ status: 'DRAFT', pagination: { limit: COUNT_LIMIT } });\n const reviewQuery = useTcpStories({ status: 'IN_REVIEW', pagination: { limit: COUNT_LIMIT } });\n const publishedQuery = useTcpStories({\n status: 'PUBLISHED',\n pagination: { limit: COUNT_LIMIT },\n });\n const discussionsQuery = useTcpDiscussions({ pagination: { limit: COUNT_LIMIT } });\n const collectionsQuery = useTcpCollections({ limit: COUNT_LIMIT });\n const artifactsQuery = useTcpArchiveItems({ pagination: { limit: COUNT_LIMIT } });\n\n const storyQueries = [ideaQuery, draftQuery, reviewQuery, publishedQuery];\n const allQueries = [...storyQueries, discussionsQuery, collectionsQuery, artifactsQuery];\n\n const ideaStories = useMemo(() => ideaQuery.data?.items ?? [], [ideaQuery.data]);\n const draftStories = useMemo(() => draftQuery.data?.items ?? [], [draftQuery.data]);\n const reviewStories = useMemo(() => reviewQuery.data?.items ?? [], [reviewQuery.data]);\n const publishedStories = useMemo(() => publishedQuery.data?.items ?? [], [publishedQuery.data]);\n const discussions = useMemo(() => discussionsQuery.data?.items ?? [], [discussionsQuery.data]);\n\n const ideaCount = ideaStories.length;\n const draftCount = draftStories.length;\n const reviewCount = reviewStories.length;\n const publishedCount = publishedStories.length;\n const discussionTotal = discussions.length;\n const approvedCount = discussions.filter((d) => d.status === 'APPROVED').length;\n const needsAttentionCount = discussionTotal - approvedCount;\n const collectionsCount = collectionsQuery.data?.length ?? 0;\n const artifactsCount = artifactsQuery.data?.items.length ?? 0;\n\n const pipelineData: BarDatum[] = [\n { label: 'Idea', value: ideaCount },\n { label: 'Draft', value: draftCount },\n { label: 'In Review', value: reviewCount },\n { label: 'Published', value: publishedCount },\n ];\n\n const recentActivity = useMemo<ActivityRow[]>(() => {\n const storyRows: ActivityRow[] = [\n ...ideaStories,\n ...draftStories,\n ...reviewStories,\n ...publishedStories,\n ].map((story) => ({\n id: `story:${story.id}`,\n kind: 'story' as const,\n title: story.title,\n status: story.status,\n createdAt: story.createdAt,\n onOpen: () => navigateTo(`stories/${story.id}`),\n }));\n\n const discussionRows: ActivityRow[] = discussions.map((discussion) => ({\n id: `discussion:${discussion.id}`,\n kind: 'discussion' as const,\n title: discussion.title,\n status: discussion.status,\n createdAt: discussion.createdAt,\n onOpen: () => navigateTo(`discussions/${discussion.id}`),\n }));\n\n return [...storyRows, ...discussionRows]\n .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())\n .slice(0, 8);\n }, [ideaStories, draftStories, reviewStories, publishedStories, discussions, navigateTo]);\n\n const isLoading = allQueries.some((q) => q.isLoading);\n const isError = allQueries.some((q) => q.isError);\n\n const retryAll = () => {\n allQueries.forEach((q) => {\n void q.refetch();\n });\n };\n\n return (\n <div className=\"h-full overflow-auto\">\n <div className=\"mx-auto flex max-w-6xl flex-col gap-6 p-4 sm:p-6\">\n <PageHero\n eyebrow=\"Editorial\"\n title=\"Governance & Editorial\"\n description=\"Oversee content quality, discussions and community participation — at a glance.\"\n />\n\n {isLoading ? (\n <LoadingView label=\"Computing editorial metrics…\" />\n ) : isError ? (\n <ErrorView\n title=\"Couldn't load the overview\"\n message=\"We couldn't compute the editorial metrics for this workspace.\"\n onRetry={retryAll}\n />\n ) : (\n <>\n <p className=\"-mt-2 text-xs text-text-tertiary\">\n Counts are computed live from the current workspace.\n </p>\n\n {/* Status metrics */}\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n <StatTile\n icon={<BookOpen className=\"h-5 w-5\" />}\n label=\"Published\"\n value={publishedCount}\n caption=\"stories live\"\n />\n <StatTile\n icon={<Clock className=\"h-5 w-5\" />}\n label=\"In Review\"\n value={reviewCount}\n caption=\"awaiting editorial sign-off\"\n />\n <StatTile\n icon={<PencilLine className=\"h-5 w-5\" />}\n label=\"Draft\"\n value={draftCount}\n caption=\"in progress\"\n />\n <StatTile\n icon={<Lightbulb className=\"h-5 w-5\" />}\n label=\"Idea\"\n value={ideaCount}\n caption=\"pitched, not yet drafted\"\n />\n <StatTile\n icon={<MessagesSquare className=\"h-5 w-5\" />}\n label=\"Discussions\"\n value={discussionTotal}\n caption=\"community conversations\"\n />\n <StatTile\n icon={<Library className=\"h-5 w-5\" />}\n label=\"Archive\"\n value={artifactsCount}\n caption={`artifacts in ${collectionsCount} collection${\n collectionsCount === 1 ? '' : 's'\n }`}\n />\n </div>\n\n {/* Pipeline + discussion health */}\n <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n <GlassCard treatment=\"plain\" className=\"flex flex-col gap-4 p-5 sm:p-6\">\n <div>\n <h2 className=\"font-display text-lg font-semibold text-text-primary\">\n Content pipeline\n </h2>\n <p className=\"mt-0.5 text-sm text-text-secondary\">\n Stories across the editorial lifecycle.\n </p>\n </div>\n {publishedCount + reviewCount + draftCount + ideaCount === 0 ? (\n <EmptyState\n icon={<BookOpen className=\"h-9 w-9\" />}\n title=\"No stories yet\"\n description=\"Draft the first story to populate the pipeline.\"\n />\n ) : (\n <BarChart\n ariaLabel=\"Stories by lifecycle stage\"\n data={pipelineData}\n height={180}\n />\n )}\n </GlassCard>\n\n <GlassCard treatment=\"plain\" className=\"flex flex-col gap-4 p-5 sm:p-6\">\n <div>\n <h2 className=\"font-display text-lg font-semibold text-text-primary\">\n Discussion health\n </h2>\n <p className=\"mt-0.5 text-sm text-text-secondary\">\n Share of community discussions that are approved.\n </p>\n </div>\n {discussionTotal === 0 ? (\n <EmptyState\n icon={<MessagesSquare className=\"h-9 w-9\" />}\n title=\"No discussions yet\"\n description=\"Open a discussion to start tracking conversation quality.\"\n />\n ) : (\n <div className=\"flex flex-col items-center gap-5 sm:flex-row sm:items-center sm:gap-6\">\n <Donut\n value={approvedCount}\n total={discussionTotal}\n caption=\"approved\"\n size={140}\n ariaLabel={`${approvedCount} of ${discussionTotal} discussions approved`}\n />\n <dl className=\"flex w-full flex-col gap-3\">\n <div className=\"flex items-center justify-between gap-3\">\n <dt className=\"flex items-center gap-2 text-sm text-text-secondary\">\n <span className=\"h-2.5 w-2.5 rounded-full bg-accent\" aria-hidden=\"true\" />\n Approved\n </dt>\n <dd className=\"font-display text-sm font-semibold tabular-nums text-text-primary\">\n {approvedCount}\n </dd>\n </div>\n <div className=\"flex items-center justify-between gap-3\">\n <dt className=\"flex items-center gap-2 text-sm text-text-secondary\">\n <span\n className=\"h-2.5 w-2.5 rounded-full bg-bg-sunken\"\n aria-hidden=\"true\"\n />\n Needs attention\n </dt>\n <dd className=\"font-display text-sm font-semibold tabular-nums text-text-primary\">\n {needsAttentionCount}\n </dd>\n </div>\n <div className=\"mt-1 flex items-start gap-2 rounded-lg bg-bg-sunken/60 p-3 text-xs text-text-secondary\">\n <ShieldCheck\n className=\"mt-0.5 h-4 w-4 shrink-0 text-accent\"\n aria-hidden=\"true\"\n />\n <span>\n Approved replies are published; pending, flagged and removed discussions\n need a moderator’s attention.\n </span>\n </div>\n </dl>\n </div>\n )}\n </GlassCard>\n </div>\n\n {/* Recent activity */}\n <Section\n title=\"Recent activity\"\n description=\"The latest stories and discussions across the workspace.\"\n >\n {recentActivity.length === 0 ? (\n <EmptyState\n icon={<Activity className=\"h-9 w-9\" />}\n title=\"Nothing yet\"\n description=\"Draft a story or open a discussion — it will show up here.\"\n />\n ) : (\n <GlassCard treatment=\"plain\" className=\"divide-y divide-border-seam\">\n {recentActivity.map((row) => {\n const Icon = ACTIVITY_ICON[row.kind];\n return (\n <button\n key={row.id}\n type=\"button\"\n onClick={row.onOpen}\n className=\"flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-bg-sunken/60 focus-visible:bg-bg-sunken/60 focus-visible:outline-none\"\n >\n <span\n className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\"\n aria-hidden=\"true\"\n >\n <Icon className=\"h-4 w-4\" />\n </span>\n <div className=\"min-w-0 flex-1\">\n <p className=\"truncate text-sm font-medium text-text-primary\">\n {row.title}\n </p>\n <p className=\"mt-0.5 text-xs capitalize text-text-tertiary\">\n {row.kind} · {formatRelativeTime(row.createdAt)}\n </p>\n </div>\n <StatusBadge\n status={row.status}\n className=\"hidden shrink-0 sm:inline-flex\"\n />\n <ArrowRight\n className=\"h-4 w-4 shrink-0 text-text-tertiary\"\n aria-hidden=\"true\"\n />\n </button>\n );\n })}\n </GlassCard>\n )}\n </Section>\n </>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/theculturepost/pages/stories/StoriesPage.js CHANGED Viewed

@@ -1,14 +1,14 @@
 import { useTheCulturePost as e } from "../../context/TheCulturePostContext.js";
-import { PageLayout as t } from "../../components/PageLayout.js";
-import { ErrorView as n, LoadingView as r } from "../../components/StateViews.js";
 import "../../context/index.js";
-import { StoryCard as i } from "../../components/StoryCard.js";
-import { EmptyState as a } from "../../components/EmptyState.js";
-import { useTcpStories as o, useTcpTopics as s } from "../../hooks/useTcpApi.js";
-import { useCursorPager as c } from "../../hooks/useCursorPager.js";
+import { ErrorView as t, LoadingView as n } from "../../components/StateViews.js";
+import { StoryCard as r } from "../../components/StoryCard.js";
+import { EmptyState as i } from "../../components/EmptyState.js";
+import { useTcpStories as a, useTcpTopics as o } from "../../hooks/useTcpApi.js";
+import { useCursorPager as s } from "../../hooks/useCursorPager.js";
 import "../../hooks/index.js";
-import { FilterTabs as l } from "../../components/FilterTabs.js";
-import { Pagination as u } from "../../components/Pagination.js";
+import { Pagination as c } from "../../components/Pagination.js";
+import { PageLayout as l } from "../../components/PageLayout.js";
+import { FilterTabs as u } from "../../components/FilterTabs.js";
 import { CreateStoryDialog as d } from "../../components/CreateStoryDialog.js";
 import { useState as f } from "react";
 import { BookOpen as p, Plus as m } from "lucide-react";
@@ -42,7 +42,7 @@ var w = 12, T = [
 	}
 ];
 function E() {
-	let { navigateTo: E } = e(), D = c(), [O, k] = f("ALL"), [A, j] = f("ALL"), [M, N] = f(!1), P = s({ pagination: { limit: 100 } }), { data: F, isLoading: I, isError: L, refetch: R } = o({
+	let { navigateTo: E } = e(), D = s(), [O, k] = f("ALL"), [A, j] = f("ALL"), [M, N] = f(!1), P = o({ pagination: { limit: 100 } }), { data: F, isLoading: I, isError: L, refetch: R } = a({
 		status: O === "ALL" ? void 0 : O,
 		topicId: A === "ALL" ? void 0 : A,
 		pagination: {
@@ -50,7 +50,7 @@ function E() {
 			cursor: D.cursor
 		}
 	}), z = F?.items ?? [];
-	return /* @__PURE__ */ _(t, {
+	return /* @__PURE__ */ _(l, {
 		title: "Stories",
 		description: "Articles, essays, explainers, photo stories and timelines — across the full editorial lifecycle.",
 		actions: /* @__PURE__ */ _(v, {
@@ -59,8 +59,8 @@ function E() {
 		}),
 		children: [
 			/* @__PURE__ */ _("div", {
-				className: "mb-5 flex flex-wrap items-center gap-3",
-				children: [/* @__PURE__ */ g(l, {
+				className: "mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ g(u, {
 					options: T,
 					value: O,
 					onChange: (e) => {
@@ -72,7 +72,7 @@ function E() {
 						j(e), D.reset();
 					},
 					children: [/* @__PURE__ */ g(S, {
-						className: "w-[12rem]",
+						className: "w-full sm:w-[13rem]",
 						"aria-label": "Filter by topic",
 						children: /* @__PURE__ */ g(C, { placeholder: "All topics" })
 					}), /* @__PURE__ */ _(b, { children: [/* @__PURE__ */ g(x, {
@@ -84,10 +84,10 @@ function E() {
 					}, e.id))] })]
 				})]
 			}),
-			I ? /* @__PURE__ */ g(r, { label: "Loading stories…" }) : L ? /* @__PURE__ */ g(n, {
+			I ? /* @__PURE__ */ g(n, { label: "Loading stories…" }) : L ? /* @__PURE__ */ g(t, {
 				message: "We couldn't load stories.",
 				onRetry: () => R()
-			}) : z.length === 0 && D.page === 0 ? /* @__PURE__ */ g(a, {
+			}) : z.length === 0 && D.page === 0 ? /* @__PURE__ */ g(i, {
 				illustration: "empty-data",
 				icon: /* @__PURE__ */ g(p, { className: "h-10 w-10" }),
 				title: O === "ALL" && A === "ALL" ? "No stories yet" : "No stories match these filters",
@@ -97,12 +97,12 @@ function E() {
 					children: [/* @__PURE__ */ g(m, { className: "mr-1.5 h-4 w-4" }), " New story"]
 				})
 			}) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("div", {
-				className: "grid gap-5 sm:grid-cols-2 xl:grid-cols-3",
-				children: z.map((e) => /* @__PURE__ */ g(i, {
+				className: "grid gap-5 sm:grid-cols-2 lg:grid-cols-3",
+				children: z.map((e) => /* @__PURE__ */ g(r, {
 					story: e,
 					onOpen: () => E(`stories/${e.id}`)
 				}, e.id))
-			}), /* @__PURE__ */ g(u, {
+			}), /* @__PURE__ */ g(c, {
 				page: D.page,
 				pageSize: w,
 				itemCount: z.length,

package/dist/theculturepost/pages/stories/StoriesPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StoriesPage.js","names":[],"sources":["../../../../src/theculturepost/pages/stories/StoriesPage.tsx"],"sourcesContent":["/*\n StoriesPage — browse the newsroom.\n * @module theculturepost/pages/stories\n \n Reads `tcpListStories` (filtered by status + optional topic). \"New Story\"\n * opens {@link CreateStoryDialog}. Cursor-paginated.\n */\n\nimport { useState } from 'react';\nimport { BookOpen, Plus } from 'lucide-react';\nimport {\n Button,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { FilterTabs, type FilterOption } from '../../components/FilterTabs';\nimport { StoryCard } from '../../components/StoryCard';\nimport { CreateStoryDialog } from '../../components/CreateStoryDialog';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Pagination } from '../../components/Pagination';\nimport { useTcpStories, useTcpTopics, useCursorPager } from '../../hooks';\nimport { useTheCulturePost } from '../../context';\nimport type { TcpStoryStatus } from '../../types';\n\nconst PAGE_SIZE = 12;\n\ntype StatusFilter = 'ALL' \| TcpStoryStatus;\n\nconst STATUS_FILTERS: FilterOption<StatusFilter>[] = [\n { value: 'ALL', label: 'All' },\n { value: 'PUBLISHED', label: 'Published' },\n { value: 'IN_REVIEW', label: 'In Review' },\n { value: 'DRAFT', label: 'Draft' },\n { value: 'IDEA', label: 'Idea' },\n { value: 'ARCHIVED', label: 'Archived' },\n];\n\nexport function StoriesPage() {\n const { navigateTo } = useTheCulturePost();\n const pager = useCursorPager();\n const [status, setStatus] = useState<StatusFilter>('ALL');\n const [topicId, setTopicId] = useState<string>('ALL');\n const [createOpen, setCreateOpen] = useState(false);\n\n const topicsQuery = useTcpTopics({ pagination: { limit: 100 } });\n const { data, isLoading, isError, refetch } = useTcpStories({\n status: status === 'ALL' ? undefined : status,\n topicId: topicId === 'ALL' ? undefined : topicId,\n pagination: { limit: PAGE_SIZE, cursor: pager.cursor },\n });\n\n const stories = data?.items ?? [];\n\n const changeStatus = (next: StatusFilter) => {\n setStatus(next);\n pager.reset();\n };\n\n const changeTopic = (next: string) => {\n setTopicId(next);\n pager.reset();\n };\n\n return (\n <PageLayout\n title=\"Stories\"\n description=\"Articles, essays, explainers, photo stories and timelines — across the full editorial lifecycle.\"\n actions={\n <Button onClick={() => setCreateOpen(true)}>\n <Plus className=\"mr-1.5 h-4 w-4\" /> New story\n </Button>\n }\n >\n <div className=\"mb-5 flex flex-~~wrap~~ items-center ~~gap~~-3\">\n <FilterTabs options={STATUS_FILTERS} value={status} onChange={changeStatus} />\n <Select value={topicId} onValueChange={changeTopic}>\n <SelectTrigger className=\"w-[~~12rem~~]\" aria-label=\"Filter by topic\">\n <SelectValue placeholder=\"All topics\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"ALL\">All topics</SelectItem>\n {(topicsQuery.data?.items ?? []).map((topic) => (\n <SelectItem key={topic.id} value={topic.id}>\n {topic.name}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n\n {isLoading ? (\n <LoadingView label=\"Loading stories…\" />\n ) : isError ? (\n <ErrorView message=\"We couldn't load stories.\" onRetry={() => refetch()} />\n ) : stories.length === 0 && pager.page === 0 ? (\n <EmptyState\n illustration=\"empty-data\"\n icon={<BookOpen className=\"h-10 w-10\" />}\n title={\n status === 'ALL' && topicId === 'ALL'\n ? 'No stories yet'\n : 'No stories match these filters'\n }\n description={\n status === 'ALL' && topicId === 'ALL'\n ? 'Draft the first story — it enters the editorial lifecycle you can publish from.'\n : 'Try widening the filters, or draft a new story.'\n }\n action={\n <Button onClick={() => setCreateOpen(true)}>\n <Plus className=\"mr-1.5 h-4 w-4\" /> New story\n </Button>\n }\n />\n ) : (\n <>\n <div className=\"grid gap-5 sm:grid-cols-2 xl:grid-cols-3\">\n {stories.map((story) => (\n <StoryCard\n key={story.id}\n story={story}\n onOpen={() => navigateTo(`stories/${story.id}`)}\n />\n ))}\n </div>\n <Pagination\n page={pager.page}\n pageSize={PAGE_SIZE}\n itemCount={stories.length}\n hasMore={data?.pageInfo.hasMore ?? false}\n onPageChange={(target) => pager.onPageChange(target, data?.pageInfo.cursor)}\n />\n </>\n )}\n\n <CreateStoryDialog\n open={createOpen}\n onOpenChange={setCreateOpen}\n topicId={topicId === 'ALL' ? undefined : topicId}\n onCreated={(story) => navigateTo(`stories/${story.id}`)}\n />\n </PageLayout>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,IAAM,IAAY,IAIZ,IAA+C;CACnD;EAAE,OAAO;EAAO,OAAO;EAAO;CAC9B;EAAE,OAAO;EAAa,OAAO;EAAa;CAC1C;EAAE,OAAO;EAAa,OAAO;EAAa;CAC1C;EAAE,OAAO;EAAS,OAAO;EAAS;CAClC;EAAE,OAAO;EAAQ,OAAO;EAAQ;CAChC;EAAE,OAAO;EAAY,OAAO;EAAY;CACzC;AAED,SAAgB,IAAc;CAC5B,IAAM,EAAE,kBAAe,GAAmB,EACpC,IAAQ,GAAgB,EACxB,CAAC,GAAQ,KAAa,EAAuB,MAAM,EACnD,CAAC,GAAS,KAAc,EAAiB,MAAM,EAC/C,CAAC,GAAY,KAAiB,EAAS,GAAM,EAE7C,IAAc,EAAa,EAAE,YAAY,EAAE,OAAO,KAAK,EAAE,CAAC,EAC1D,EAAE,SAAM,cAAW,YAAS,eAAY,EAAc;EAC1D,QAAQ,MAAW,QAAQ,KAAA,IAAY;EACvC,SAAS,MAAY,QAAQ,KAAA,IAAY;EACzC,YAAY;GAAE,OAAO;GAAW,QAAQ,EAAM;GAAQ;EACvD,CAAC,EAEI,IAAU,GAAM,SAAS,EAAE;AAYjC,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,GAAD;GAAQ,eAAe,EAAc,GAAK;aAA1C,CACE,kBAAC,GAAD,EAAM,WAAU,kBAAmB,CAAA,EAAA,aAC5B;;YANb;GASE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAY,SAAS;KAAgB,OAAO;KAAQ,WArBpC,MAAuB;AAE3C,MADA,EAAU,EAAK,EACf,EAAM,OAAO;;KAmBqE,CAAA,EAC9E,kBAAC,GAAD;KAAQ,OAAO;KAAS,gBAjBT,MAAiB;AAEpC,MADA,EAAW,EAAK,EAChB,EAAM,OAAO;;eAeT,CACE,kBAAC,GAAD;MAAe,WAAU;~~MAAY~~,cAAW;~~gBAC9C~~,kBAAC,GAAD,EAAa,aAAY,cAAe,CAAA;MAC1B,CAAA,EAChB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;MAAY,OAAM;gBAAM;MAAuB,CAAA,GAC7C,EAAY,MAAM,SAAS,EAAE,EAAE,KAAK,MACpC,kBAAC,GAAD;MAA2B,OAAO,EAAM;gBACrC,EAAM;MACI,EAFI,EAAM,GAEV,CACb,CACY,EAAA,CAAA,CACT;OACL;;GAEL,IACC,kBAAC,GAAD,EAAa,OAAM,oBAAqB,CAAA,GACtC,IACF,kBAAC,GAAD;IAAW,SAAQ;IAA4B,eAAe,GAAS;IAAI,CAAA,GACzE,EAAQ,WAAW,KAAK,EAAM,SAAS,IACzC,kBAAC,GAAD;IACE,cAAa;IACb,MAAM,kBAAC,GAAD,EAAU,WAAU,aAAc,CAAA;IACxC,OACE,MAAW,SAAS,MAAY,QAC5B,mBACA;IAEN,aACE,MAAW,SAAS,MAAY,QAC5B,oFACA;IAEN,QACE,kBAAC,GAAD;KAAQ,eAAe,EAAc,GAAK;eAA1C,CACE,kBAAC,GAAD,EAAM,WAAU,kBAAmB,CAAA,EAAA,aAC5B;;IAEX,CAAA,GAEF,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAQ,KAAK,MACZ,kBAAC,GAAD;KAES;KACP,cAAc,EAAW,WAAW,EAAM,KAAK;KAC/C,EAHK,EAAM,GAGX,CACF;IACE,CAAA,EACN,kBAAC,GAAD;IACE,MAAM,EAAM;IACZ,UAAU;IACV,WAAW,EAAQ;IACnB,SAAS,GAAM,SAAS,WAAW;IACnC,eAAe,MAAW,EAAM,aAAa,GAAQ,GAAM,SAAS,OAAO;IAC3E,CAAA,CACD,EAAA,CAAA;GAGL,kBAAC,GAAD;IACE,MAAM;IACN,cAAc;IACd,SAAS,MAAY,QAAQ,KAAA,IAAY;IACzC,YAAY,MAAU,EAAW,WAAW,EAAM,KAAK;IACvD,CAAA;GACS"}
1	+ {"version":3,"file":"StoriesPage.js","names":[],"sources":["../../../../src/theculturepost/pages/stories/StoriesPage.tsx"],"sourcesContent":["/*\n StoriesPage — browse the newsroom.\n * @module theculturepost/pages/stories\n \n Reads `tcpListStories` (filtered by status + optional topic). \"New Story\"\n * opens {@link CreateStoryDialog}. Cursor-paginated.\n */\n\nimport { useState } from 'react';\nimport { BookOpen, Plus } from 'lucide-react';\nimport {\n Button,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { FilterTabs, type FilterOption } from '../../components/FilterTabs';\nimport { StoryCard } from '../../components/StoryCard';\nimport { CreateStoryDialog } from '../../components/CreateStoryDialog';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Pagination } from '../../components/Pagination';\nimport { useTcpStories, useTcpTopics, useCursorPager } from '../../hooks';\nimport { useTheCulturePost } from '../../context';\nimport type { TcpStoryStatus } from '../../types';\n\nconst PAGE_SIZE = 12;\n\ntype StatusFilter = 'ALL' \| TcpStoryStatus;\n\nconst STATUS_FILTERS: FilterOption<StatusFilter>[] = [\n { value: 'ALL', label: 'All' },\n { value: 'PUBLISHED', label: 'Published' },\n { value: 'IN_REVIEW', label: 'In Review' },\n { value: 'DRAFT', label: 'Draft' },\n { value: 'IDEA', label: 'Idea' },\n { value: 'ARCHIVED', label: 'Archived' },\n];\n\nexport function StoriesPage() {\n const { navigateTo } = useTheCulturePost();\n const pager = useCursorPager();\n const [status, setStatus] = useState<StatusFilter>('ALL');\n const [topicId, setTopicId] = useState<string>('ALL');\n const [createOpen, setCreateOpen] = useState(false);\n\n const topicsQuery = useTcpTopics({ pagination: { limit: 100 } });\n const { data, isLoading, isError, refetch } = useTcpStories({\n status: status === 'ALL' ? undefined : status,\n topicId: topicId === 'ALL' ? undefined : topicId,\n pagination: { limit: PAGE_SIZE, cursor: pager.cursor },\n });\n\n const stories = data?.items ?? [];\n\n const changeStatus = (next: StatusFilter) => {\n setStatus(next);\n pager.reset();\n };\n\n const changeTopic = (next: string) => {\n setTopicId(next);\n pager.reset();\n };\n\n return (\n <PageLayout\n title=\"Stories\"\n description=\"Articles, essays, explainers, photo stories and timelines — across the full editorial lifecycle.\"\n actions={\n <Button onClick={() => setCreateOpen(true)}>\n <Plus className=\"mr-1.5 h-4 w-4\" /> New story\n </Button>\n }\n >\n <div className=\"mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n <FilterTabs options={STATUS_FILTERS} value={status} onChange={changeStatus} />\n <Select value={topicId} onValueChange={changeTopic}>\n <SelectTrigger className=\"w-full sm:w-[13rem]\" aria-label=\"Filter by topic\">\n <SelectValue placeholder=\"All topics\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"ALL\">All topics</SelectItem>\n {(topicsQuery.data?.items ?? []).map((topic) => (\n <SelectItem key={topic.id} value={topic.id}>\n {topic.name}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n\n {isLoading ? (\n <LoadingView label=\"Loading stories…\" />\n ) : isError ? (\n <ErrorView message=\"We couldn't load stories.\" onRetry={() => refetch()} />\n ) : stories.length === 0 && pager.page === 0 ? (\n <EmptyState\n illustration=\"empty-data\"\n icon={<BookOpen className=\"h-10 w-10\" />}\n title={\n status === 'ALL' && topicId === 'ALL'\n ? 'No stories yet'\n : 'No stories match these filters'\n }\n description={\n status === 'ALL' && topicId === 'ALL'\n ? 'Draft the first story — it enters the editorial lifecycle you can publish from.'\n : 'Try widening the filters, or draft a new story.'\n }\n action={\n <Button onClick={() => setCreateOpen(true)}>\n <Plus className=\"mr-1.5 h-4 w-4\" /> New story\n </Button>\n }\n />\n ) : (\n <>\n <div className=\"grid gap-5 sm:grid-cols-2 lg:grid-cols-3\">\n {stories.map((story) => (\n <StoryCard\n key={story.id}\n story={story}\n onOpen={() => navigateTo(`stories/${story.id}`)}\n />\n ))}\n </div>\n <Pagination\n page={pager.page}\n pageSize={PAGE_SIZE}\n itemCount={stories.length}\n hasMore={data?.pageInfo.hasMore ?? false}\n onPageChange={(target) => pager.onPageChange(target, data?.pageInfo.cursor)}\n />\n </>\n )}\n\n <CreateStoryDialog\n open={createOpen}\n onOpenChange={setCreateOpen}\n topicId={topicId === 'ALL' ? undefined : topicId}\n onCreated={(story) => navigateTo(`stories/${story.id}`)}\n />\n </PageLayout>\n );\n}\n"],"mappings":"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"}