@growth-labs/cms 0.1.0

package/src/ui/api/topics/index.ts

@@ -0,0 +1,17 @@
+// src/ui/api/topics/index.ts
+// GET /admin/api/topics — list primary_topic values.
+// POST /admin/api/topics — explicit 501 until standalone topics are schema-backed.
+
+import type { APIContext } from 'astro'
+import type { RouteContext } from '../../../routes/context.js'
+import { createTopicRoutes } from '../../../routes/topics.js'
+import { buildSiteAuthz } from '../_authz.js'
+
+function toCtx(c: APIContext): RouteContext {
+	const env = (c.locals as { cmsEnv?: Record<string, unknown> }).cmsEnv ?? {}
+	return { request: c.request, params: {}, db: env.SITE_DB as RouteContext['db'], env }
+}
+
+export const GET = (c: APIContext) => createTopicRoutes({ authz: buildSiteAuthz(c) }).list(toCtx(c))
+export const POST = (c: APIContext) =>
+	createTopicRoutes({ authz: buildSiteAuthz(c) }).create(toCtx(c))

package/src/ui/api/workspace-settings.ts

@@ -0,0 +1,26 @@
+// src/ui/api/workspace-settings.ts — Astro endpoint adapter for GET+PATCH /admin/api/workspace-settings.
+// Maps the APIContext onto a RouteContext and delegates to createShellRoutes().workspaceSettings.
+
+import { config } from 'virtual:growth-labs/cms/config'
+import type { APIContext } from 'astro'
+import type { RouteContext } from '../../routes/context.js'
+import { createShellRoutes, type ShellRouteConfig } from '../../routes/shell.js'
+import { buildSiteAuthz } from './_authz.js'
+
+function toCtx(c: APIContext): RouteContext {
+	const env = (c.locals as { cmsEnv?: Record<string, unknown> }).cmsEnv ?? {}
+	return { request: c.request, params: {}, db: env.SITE_DB as RouteContext['db'], env }
+}
+
+function shellConfig(c: APIContext): ShellRouteConfig {
+	return {
+		authz: buildSiteAuthz(c),
+		workspaces: config.workspaces,
+		activeWorkspaceId: config.activeWorkspaceId,
+	}
+}
+
+const handler = (c: APIContext) => createShellRoutes(shellConfig(c)).workspaceSettings(toCtx(c))
+
+export const GET = handler
+export const PATCH = handler

package/src/ui/client/boot-state.ts

@@ -0,0 +1,42 @@
+// src/ui/client/boot-state.ts — pure SPA bootstrap decision (deep-review blocker C).
+//
+// The page-level gate (admin.astro) already redirects an UNAUTHENTICATED host
+// user to /login/ before the SPA ever mounts. So by the time the client runs,
+// the host user is logged in. The only access question left for the SPA is:
+// does this logged-in user have a Masthead workspace_membership, or not?
+//
+//   GET <base>/api/me → 200            → 'app'        (mount the full shell)
+//   GET <base>/api/me → 401/403        → 'no-access'  (honest "no access yet" screen)
+//   GET <base>/api/me → other failure  → 'app'        (transient — let screens
+//                                                       show their own errors; do
+//                                                       NOT lock the user out)
+//
+// Pure: no DOM, no fetch — unit-tested directly. mount.tsx does the fetch and
+// hands the normalized result here.
+
+export type BootState = 'app' | 'no-access'
+
+/** The normalized outcome of `GET <base>/api/me` that the decision needs. */
+export interface MeResponseSummary {
+	ok: boolean
+	status: number
+	body: unknown
+}
+
+/**
+ * Decide what the SPA should render from the `/api/me` outcome.
+ *
+ * `null` means the fetch itself threw (offline / network) — treated as transient,
+ * so we fall through to the app rather than misreport "no access".
+ */
+export function resolveBootState(me: MeResponseSummary | null): BootState {
+	if (me === null) return 'app'
+	if (me.ok) return 'app'
+	// Authenticated (page gate passed) but the membership/role check denied →
+	// logged in without Masthead access. 403 is the role-matrix denial, 401 the
+	// "no resolvable member" denial; both mean "no access yet".
+	if (me.status === 401 || me.status === 403) return 'no-access'
+	// Any other status (e.g. 500) is a transient server error, not an access
+	// decision — don't lock the user out of the shell over it.
+	return 'app'
+}

package/src/ui/client/mount.tsx

@@ -0,0 +1,41 @@
+import { config } from 'virtual:growth-labs/cms/config'
+import { createRoot } from 'react-dom/client'
+import type { CmsUser } from '../../routes/context.js'
+import { CmsApp } from '../components/CmsApp.js'
+import { cmsScreens } from '../screens/registry.js'
+import { initialWorkspaceState } from '../workspace-context.js'
+import { type MeResponseSummary, resolveBootState } from './boot-state.js'
+import '../styles/broadsheet.css'
+
+async function fetchMe(base: string): Promise<MeResponseSummary | null> {
+	try {
+		const r = await fetch(`${base}/api/me`)
+		const body = r.ok ? await r.json().catch(() => null) : null
+		return { ok: r.ok, status: r.status, body }
+	} catch {
+		// Network/offline — transient, not an access decision.
+		return null
+	}
+}
+
+export async function mount(elementId = 'masthead-root') {
+	const el = document.getElementById(elementId)
+	if (!el) return
+
+	// admin.astro already redirected unauthenticated users to login, so reaching
+	// here means the host user is signed in. Resolve whether they're a provisioned
+	// Masthead member before deciding what to render (deep-review blocker C).
+	const base = config.adminBasePath
+	const me = await fetchMe(base)
+	const boot = resolveBootState(me)
+
+	const user =
+		me?.ok && me.body && typeof me.body === 'object' && 'user' in me.body
+			? ((me.body as { user: CmsUser | null }).user ?? null)
+			: null
+
+	const initial = initialWorkspaceState(config.workspaces, config.activeWorkspaceId, user)
+	createRoot(el).render(<CmsApp initial={initial} screens={cmsScreens} boot={boot} />)
+}
+
+void mount()

package/src/ui/commands.ts

@@ -0,0 +1,62 @@
+// src/ui/commands.ts — the ⌘K command set + the pure filter. "create"/"jump"
+// are static; "doc" entries are fed in from the /admin/api/search results.
+import { ROUTES, type Route } from './hash-router.js'
+
+export type Command =
+	| {
+			kind: 'create'
+			label: string
+			icon: string
+			hint: string
+			contentType: 'article' | 'video' | 'podcast'
+	  }
+	| { kind: 'jump'; label: string; icon: string; hint: string; route: Route }
+	| { kind: 'doc'; label: string; icon: string; hint: string; id: string }
+
+const JUMP_LABELS: Record<Route, string> = {
+	dashboard: 'Dashboard',
+	content: 'Content',
+	calendar: 'Calendar',
+	media: 'Media',
+	analytics: 'Analytics',
+	authors: 'Authors & bylines',
+	topics: 'Topics & tags',
+	'content-insights': 'Content Insights',
+	subscriptions: 'Subscriptions',
+	'social-share': 'Social Share',
+	settings: 'Settings',
+}
+const JUMP_ICONS: Record<Route, string> = {
+	dashboard: 'dashboard',
+	content: 'library',
+	calendar: 'calendar',
+	media: 'media',
+	analytics: 'chart',
+	authors: 'users',
+	topics: 'tag',
+	'content-insights': 'sparkle',
+	subscriptions: 'inbox',
+	'social-share': 'share',
+	settings: 'settings',
+}
+
+export const baseCommands: Command[] = [
+	{ kind: 'create', label: 'New article', icon: 'doc', hint: 'Create', contentType: 'article' },
+	{ kind: 'create', label: 'New video', icon: 'video', hint: 'Create', contentType: 'video' },
+	{ kind: 'create', label: 'New podcast', icon: 'mic', hint: 'Create', contentType: 'podcast' },
+	...ROUTES.map(
+		(r): Command => ({
+			kind: 'jump',
+			label: `Go to ${JUMP_LABELS[r]}`,
+			icon: JUMP_ICONS[r],
+			hint: 'Jump',
+			route: r,
+		}),
+	),
+]
+
+export function filterCommands(query: string, all: Command[]): Command[] {
+	const q = query.trim().toLowerCase()
+	if (!q) return all.slice(0, 9)
+	return all.filter((c) => c.label.toLowerCase().includes(q))
+}

package/src/ui/components/CmsApp.tsx

@@ -0,0 +1,149 @@
+import { Component, type ReactNode, useEffect, useState } from 'react'
+import type { BootState } from '../client/boot-state.js'
+import type { Route } from '../hash-router.js'
+import { useHashRouter } from '../use-hash-router.js'
+import { useTweaks } from '../use-tweaks.js'
+import { WorkspaceProvider, type WorkspaceState } from '../workspace-context.js'
+import { CommandPalette } from './CommandPalette.js'
+import { NoAccessScreen } from './NoAccessScreen.js'
+import { Sidebar } from './Sidebar.js'
+import { Topbar } from './Topbar.js'
+
+export type ScreenRegistry = Partial<Record<Route, () => ReactNode>>
+
+export function CmsApp(props: {
+	initial: WorkspaceState
+	screens?: ScreenRegistry
+	/**
+	 * Bootstrap access decision from GET <base>/api/me (deep-review blocker C).
+	 * 'no-access' → render the honest no-access screen instead of the empty shell.
+	 * Defaults to 'app' so existing callers/tests are unaffected.
+	 */
+	boot?: BootState
+}) {
+	if (props.boot === 'no-access') {
+		return <NoAccessScreen />
+	}
+	return (
+		<WorkspaceProvider initial={props.initial}>
+			<Shell screens={props.screens ?? {}} />
+		</WorkspaceProvider>
+	)
+}
+
+function Shell({ screens }: { screens: ScreenRegistry }) {
+	const { route, navigate } = useHashRouter()
+	const { t, setTweak } = useTweaks()
+	const [cmd, setCmd] = useState(false)
+	const [collapsed, setCollapsed] = useState(false)
+	useEffect(() => {
+		const h = (e: KeyboardEvent) => {
+			if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+				e.preventDefault()
+				setCmd((c) => !c)
+			}
+			if (e.key === 'Escape') setCmd(false)
+		}
+		window.addEventListener('keydown', h)
+		return () => window.removeEventListener('keydown', h)
+	}, [])
+	const screen = screens[route]
+	return (
+		<div className="app" data-collapsed={collapsed}>
+			<Sidebar route={route} navigate={navigate} collapsed={collapsed} />
+			<div className="main">
+				<Topbar
+					collapsed={collapsed}
+					setCollapsed={setCollapsed}
+					onCommand={() => setCmd(true)}
+					theme={t.theme}
+					setTheme={(v) => setTweak('theme', v)}
+				/>
+				<div className="scroll">
+					<ScreenErrorBoundary key={route} route={route}>
+						<ScreenSlot render={screen} route={route} />
+					</ScreenErrorBoundary>
+				</div>
+			</div>
+			{cmd && (
+				<CommandPalette
+					onClose={() => setCmd(false)}
+					navigate={navigate}
+					openDoc={() => setCmd(false)}
+				/>
+			)}
+		</div>
+	)
+}
+
+function EmptyRoute({ route }: { route: Route }) {
+	return (
+		<div className="page" style={{ padding: 40, color: 'var(--ink-muted)' }}>
+			The &quot;{route}&quot; screen mounts here.
+		</div>
+	)
+}
+
+// Render the active screen as a real child of the error boundary. The registry
+// stores screens as `() => ReactNode`; calling that inline in Shell would run it
+// in Shell's render scope (outside any boundary), so a throw would blank the whole
+// app. Calling it inside ScreenSlot makes the screen a child the boundary can catch.
+function ScreenSlot({ render, route }: { render?: () => ReactNode; route: Route }) {
+	return <>{render ? render() : <EmptyRoute route={route} />}</>
+}
+
+// Per-screen error boundary: a crash in one screen shows a readable message
+// instead of unmounting the entire CMS (sidebar/topbar included). Keyed by route
+// in Shell so navigating away clears a caught error.
+class ScreenErrorBoundary extends Component<
+	{ route: Route; children: ReactNode },
+	{ error: Error | null }
+> {
+	state: { error: Error | null } = { error: null }
+
+	static getDerivedStateFromError(error: Error) {
+		return { error }
+	}
+
+	componentDidCatch(error: Error) {
+		// Surface to the console for triage; the platform tail consumer captures it.
+		console.error(`[masthead] screen "${this.props.route}" crashed:`, error)
+	}
+
+	render() {
+		if (this.state.error) {
+			return (
+				<div className="page" style={{ padding: 40 }}>
+					<h1 className="page-title">Something went wrong</h1>
+					<div className="page-sub" style={{ marginTop: 8 }}>
+						The “{this.props.route}” screen hit an error and couldn’t render. The rest of the CMS is
+						unaffected — use the sidebar to navigate elsewhere.
+					</div>
+					<pre
+						style={{
+							marginTop: 16,
+							padding: 12,
+							fontSize: 12,
+							color: 'var(--red)',
+							whiteSpace: 'pre-wrap',
+							wordBreak: 'break-word',
+							background: 'var(--surface-sunken, rgba(0,0,0,0.04))',
+							borderRadius: 6,
+						}}
+					>
+						{this.state.error.message}
+					</pre>
+					<button
+						type="button"
+						className="btn sm"
+						style={{ marginTop: 12 }}
+						onClick={() => this.setState({ error: null })}
+					>
+						Retry
+					</button>
+				</div>
+			)
+		}
+		return this.props.children
+	}
+}

package/src/ui/components/CommandPalette.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useRef, useState } from 'react'
+import { baseCommands, type Command, filterCommands } from '../commands.js'
+import type { Route } from '../hash-router.js'
+
+function commandKey(c: Command, i: number): string {
+	if (c.kind === 'doc') return `doc:${c.id}`
+	if (c.kind === 'jump') return `jump:${c.route}`
+	return `create:${c.contentType}:${i}`
+}
+
+export function CommandPalette(props: {
+	onClose: () => void
+	navigate: (r: Route) => void
+	openDoc: (id: string | null, type?: string) => void
+}) {
+	const [q, setQ] = useState('')
+	const [docs, setDocs] = useState<Command[]>([])
+	const inputRef = useRef<HTMLInputElement>(null)
+	useEffect(() => {
+		inputRef.current?.focus()
+	}, [])
+	useEffect(() => {
+		if (!q.trim()) {
+			setDocs([])
+			return
+		}
+		const ctrl = new AbortController()
+		fetch(`/admin/api/search?q=${encodeURIComponent(q)}`, { signal: ctrl.signal })
+			.then((r) => r.json())
+			.then((b: { data: Array<{ id: string; title: string; type: string }> }) =>
+				setDocs(
+					b.data.map((d) => ({ kind: 'doc', id: d.id, label: d.title, icon: 'doc', hint: d.type })),
+				),
+			)
+			.catch(() => {})
+		return () => ctrl.abort()
+	}, [q])
+	const all = [...baseCommands, ...docs]
+	const filtered = filterCommands(q, all)
+	function run(c: Command) {
+		if (c.kind === 'jump') props.navigate(c.route)
+		else if (c.kind === 'create') props.openDoc(null, c.contentType)
+		else props.openDoc(c.id)
+		props.onClose()
+	}
+	return (
+		<div
+			className="scrim"
+			style={{ paddingTop: '12vh' }}
+			onMouseDown={props.onClose}
+			role="dialog"
+			aria-modal="true"
+			aria-label="Command palette"
+		>
+			{/* biome-ignore lint/a11y/noStaticElementInteractions: stopPropagation on the panel; the outer dialog scrim handles click-away */}
+			<div
+				className="panel fade-in"
+				style={{
+					width: 600,
+					maxWidth: '92vw',
+					boxShadow: 'var(--shadow-lg)',
+					overflow: 'hidden',
+				}}
+				onMouseDown={(e) => e.stopPropagation()}
+			>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 11,
+						padding: '16px 18px',
+						borderBottom: '1px solid var(--border)',
+					}}
+				>
+					<input
+						ref={inputRef}
+						value={q}
+						onChange={(e) => setQ(e.target.value)}
+						placeholder="Search or run a command…"
+						aria-label="Search or run a command"
+						style={{
+							flex: 1,
+							border: 0,
+							outline: 0,
+							background: 'transparent',
+							color: 'var(--ink)',
+							fontSize: 16,
+						}}
+					/>
+					<span className="kbd">esc</span>
+				</div>
+				<div style={{ maxHeight: 380, overflowY: 'auto', padding: 8 }} role="listbox">
+					{filtered.length === 0 && (
+						<div style={{ padding: 24, textAlign: 'center', color: 'var(--ink-muted)' }}>
+							No matches
+						</div>
+					)}
+					{filtered.map((a, i) => (
+						<button
+							key={commandKey(a, i)}
+							type="button"
+							role="option"
+							aria-selected={false}
+							className="nav-item"
+							style={{ width: '100%', borderRadius: 8 }}
+							onClick={() => run(a)}
+						>
+							<span style={{ flex: 1, color: 'var(--ink)', fontWeight: 500 }}>{a.label}</span>
+							<span className="kicker" style={{ fontSize: 10 }}>
+								{a.hint}
+							</span>
+						</button>
+					))}
+				</div>
+			</div>
+		</div>
+	)
+}

package/src/ui/components/NoAccessScreen.tsx

@@ -0,0 +1,79 @@
+// src/ui/components/NoAccessScreen.tsx — honest "no Masthead access yet" screen
+// (deep-review blocker C).
+//
+// Shown when an AUTHENTICATED host user has no workspace_membership: the page-level
+// gate (admin.astro) already let them past login, but GET <base>/api/me returned
+// 401/403 because they aren't provisioned. Instead of the blank app shell (every
+// /admin/api/* panel 401ing), render this standalone screen telling them exactly
+// what's wrong and what to do. It deliberately does NOT mount the Sidebar/Topbar
+// chrome — it stands on its own.
+
+import { Icon } from '../icons.js'
+
+export function NoAccessScreen() {
+	return (
+		<div
+			style={{
+				minHeight: '100vh',
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				padding: 24,
+				background: 'var(--bg, #0c0f14)',
+			}}
+		>
+			<div
+				className="panel panel-pad fade-in"
+				style={{
+					maxWidth: 460,
+					textAlign: 'center',
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'center',
+					gap: 14,
+					padding: '36px 32px',
+				}}
+			>
+				<div
+					style={{
+						width: 52,
+						height: 52,
+						borderRadius: '50%',
+						display: 'grid',
+						placeItems: 'center',
+						background: 'color-mix(in srgb, var(--amber, #b8860b) 12%, transparent)',
+						color: 'var(--amber, #b8860b)',
+					}}
+				>
+					<Icon name="users" size={24} />
+				</div>
+
+				<h1
+					className="serif"
+					style={{ fontSize: 24, fontWeight: 600, color: 'var(--ink)', margin: 0 }}
+				>
+					You don&rsquo;t have Masthead access yet
+				</h1>
+
+				<p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--ink-muted)', margin: 0 }}>
+					Your account is signed in, but it hasn&rsquo;t been added to this publication. Ask an
+					owner to add you as a member, then refresh this page.
+				</p>
+
+				<a
+					href="mailto:"
+					className="btn"
+					style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 7 }}
+					onClick={(e) => {
+						// No mailto target baked in — the host wires the owner contact. Until
+						// then this is an honest no-op rather than a dead link to nowhere.
+						e.preventDefault()
+					}}
+				>
+					<Icon name="mail" size={15} />
+					Request access
+				</a>
+			</div>
+		</div>
+	)
+}