@growth-labs/cms 0.1.0

package/src/ui/inspector/inspector-data.ts

@@ -0,0 +1,232 @@
+// src/ui/inspector/inspector-data.ts — pure fetch helpers for the Inspector.
+//
+// These are thin client-side utilities: shapers that produce the exact request
+// bodies the backend routes expect (P0 route contract). UI components call these
+// before dispatching a fetch; the shapers are unit-testable without a DOM.
+//
+// Pure helpers (no imports from route layer):
+//   publishActionPayload(status) → { action, body } for ?action=<...>
+//   buildScheduleBody(localDateTime, tz) → body for ?action=schedule
+//
+// Fetch layer (browser-side, non-testable in vitest):
+//   getContent(id)     → GET /admin/api/content/:id
+//   patchContent(id, patch) → PATCH /admin/api/content/:id
+//   runAction(id, action, body?) → POST /admin/api/content/:id?action=<action>
+
+import type { ContentStatus } from '../../schema/types.js'
+
+// ---------------------------------------------------------------------------
+// Pure shapers
+// ---------------------------------------------------------------------------
+
+export interface PublishActionPayload {
+	/** The ?action= query param value to use. */
+	action: string
+	/** The JSON body to send (null for bodyless actions). */
+	body: Record<string, unknown> | null
+}
+
+/**
+ * Map a target ContentStatus to the action + body expected by the content
+ * route action handler.
+ *
+ * - draft / review → `?action=set-status` with `{ status }`
+ * - published      → `?action=publish` (no body)
+ * - archived       → `?action=archive` (no body)
+ * - scheduled      → use buildScheduleBody + `?action=schedule` separately
+ *   (scheduled requires a date/time and is handled by the PublishTab directly)
+ */
+export function publishActionPayload(status: ContentStatus): PublishActionPayload {
+	switch (status) {
+		case 'draft':
+		case 'review':
+			return { action: 'set-status', body: { status } }
+		case 'published':
+			return { action: 'publish', body: null }
+		case 'archived':
+			return { action: 'archive', body: null }
+		default:
+			// scheduled — callers use buildScheduleBody + action=schedule instead.
+			return { action: 'schedule', body: null }
+	}
+}
+
+export interface ScheduleBody {
+	publishAtLocal: string
+	timezone: string
+}
+
+/**
+ * Build the JSON body for `?action=schedule`.
+ * The route accepts `publishAtLocal` (an ISO local-datetime string `YYYY-MM-DDTHH:MM`)
+ * plus a `timezone` identifier. Trims the input string.
+ */
+export function buildScheduleBody(localDateTime: string, tz: string): ScheduleBody {
+	return {
+		publishAtLocal: localDateTime.trim(),
+		timezone: tz,
+	}
+}
+
+export function shouldShowScheduleControls(
+	currentStatus: ContentStatus,
+	selectedStatus: ContentStatus | null | undefined,
+): boolean {
+	return (selectedStatus ?? currentStatus) === 'scheduled'
+}
+
+// ---------------------------------------------------------------------------
+// Fetch layer (browser-side; not unit-tested — used by React components only)
+// ---------------------------------------------------------------------------
+
+/** Fetch a full content item payload from the API. */
+export async function getContent(id: string): Promise<unknown> {
+	const res = await fetch(`/admin/api/content/${id}`)
+	if (!res.ok) throw new Error(`GET /admin/api/content/${id} → ${res.status}`)
+	return res.json()
+}
+
+/** PATCH a content item with a partial update payload. */
+export async function patchContent(id: string, patch: Record<string, unknown>): Promise<unknown> {
+	const res = await fetch(`/admin/api/content/${id}`, {
+		method: 'PATCH',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify(patch),
+	})
+	if (!res.ok) throw new Error(`PATCH /admin/api/content/${id} → ${res.status}`)
+	return res.json()
+}
+
+export class CmsActionError extends Error {
+	readonly status: number
+	readonly payload: Record<string, unknown>
+
+	constructor(message: string, status: number, payload: Record<string, unknown>) {
+		super(message)
+		this.name = 'CmsActionError'
+		this.status = status
+		this.payload = payload
+	}
+}
+
+async function readActionResponse(res: Response): Promise<Record<string, unknown>> {
+	return (await res.json().catch(() => ({}))) as Record<string, unknown>
+}
+
+function actionErrorMessage(url: string, status: number, payload: Record<string, unknown>): string {
+	if (typeof payload.message === 'string' && payload.message.trim()) {
+		return payload.message.trim()
+	}
+	if (typeof payload.error === 'string' && payload.error.trim()) {
+		const eta =
+			typeof payload.etaLabel === 'string' && payload.etaLabel.trim()
+				? ` ${payload.etaLabel.trim()}`
+				: ''
+		return `${payload.error.trim()}${eta}`
+	}
+	return `POST ${url} → ${status}`
+}
+
+/** Fire a lifecycle action on a content item (POST ?action=...). */
+export async function runAction(
+	id: string,
+	action: string,
+	body?: Record<string, unknown> | null,
+): Promise<unknown> {
+	const url = `/admin/api/content/${id}?action=${encodeURIComponent(action)}`
+	const res = await fetch(url, {
+		method: 'POST',
+		...(body != null
+			? {
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify(body),
+				}
+			: {}),
+	})
+	const payload = await readActionResponse(res)
+	if (!res.ok) {
+		throw new CmsActionError(actionErrorMessage(url, res.status, payload), res.status, payload)
+	}
+	return payload
+}
+
+// ---------------------------------------------------------------------------
+// AI action helpers (Task 9)
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a URL for an AI action endpoint.
+ * e.g. buildAiPostUrl('doc-123', 'og-image') → '/admin/api/content/doc-123/ai/og-image'
+ */
+export function buildAiPostUrl(id: string, action: 'og-image' | 'takeaways'): string {
+	return `/admin/api/content/${id}/ai/${action}`
+}
+
+/**
+ * Determine the OG generate button affordance state.
+ *
+ * - 'generated': the AI just wrote an OG image id (written === true)
+ * - 'locked':    the field is locked by a manual override (locked === true)
+ * - 'idle':      neither — button is ready to trigger
+ */
+export function ogButtonState(
+	written: boolean,
+	locked: boolean | undefined,
+): 'generated' | 'locked' | 'idle' {
+	if (written) return 'generated'
+	if (locked) return 'locked'
+	return 'idle'
+}
+
+export interface OgImageResult {
+	ogImageId: string
+	url: string
+	written: boolean
+	locked?: boolean
+}
+
+export interface TakeawaysResult {
+	takeaways: string[]
+	written: boolean
+	locked?: boolean
+}
+
+/** POST /admin/api/content/:id/ai/og-image — generate and persist a social-card OG image. */
+export async function generateOgImage(id: string): Promise<OgImageResult> {
+	const url = buildAiPostUrl(id, 'og-image')
+	const res = await fetch(url, { method: 'POST' })
+	if (!res.ok) throw new Error(`POST ${url} → ${res.status}`)
+	return res.json() as Promise<OgImageResult>
+}
+
+/** POST /admin/api/content/:id/ai/takeaways — generate and persist key takeaways. */
+export async function regenerateTakeaways(id: string): Promise<TakeawaysResult> {
+	const url = buildAiPostUrl(id, 'takeaways')
+	const res = await fetch(url, { method: 'POST' })
+	if (!res.ok) throw new Error(`POST ${url} → ${res.status}`)
+	return res.json() as Promise<TakeawaysResult>
+}
+
+/**
+ * POST /admin/api/content/:id/seo-score with optional override fields.
+ * Returns { score, checks } from the real-time SEO scorer (Task 1 route).
+ */
+export async function scoreSeo(
+	id: string,
+	overrides?: {
+		title?: string
+		seoTitle?: string
+		description?: string
+		focusKeyword?: string
+		bodyMarkdown?: string
+	},
+): Promise<unknown> {
+	const url = `/admin/api/content/${id}/seo-score`
+	const res = await fetch(url, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify(overrides ?? {}),
+	})
+	if (!res.ok) throw new Error(`POST ${url} → ${res.status}`)
+	return res.json()
+}

package/src/ui/inspector/organize-data.ts

@@ -0,0 +1,51 @@
+// src/ui/inspector/organize-data.ts — pure shapers for the Organize tab.
+//
+// tagsToPatchBody(tags)          → the { tags } body for PATCH /content/:id
+// contributorsToPutBody(rows)   → the { contributors } body for PUT /content/:id/contributors
+//
+// These are pure, vitest-testable helpers with no DOM or React dependencies.
+
+// ---------------------------------------------------------------------------
+// Tags patch body
+// ---------------------------------------------------------------------------
+
+export interface TagsPatchBody {
+	tags: string[]
+}
+
+/**
+ * Shape a list of tag slugs into the PATCH body expected by the update route
+ * (content.ts UpdateSchema accepts `tags: z.array(z.string())`).
+ */
+export function tagsToPatchBody(tags: string[]): TagsPatchBody {
+	return { tags }
+}
+
+// ---------------------------------------------------------------------------
+// Contributors PUT body
+// ---------------------------------------------------------------------------
+
+export interface ContributorItem {
+	authorId: string
+	role: string | null
+	position: number
+}
+
+export interface ContributorsPutBody {
+	contributors: ContributorItem[]
+}
+
+/**
+ * Shape a list of contributor rows into the PUT body expected by the
+ * contributorsReplace route (ContributorsReplaceSchema:
+ * `{ contributors: [{ authorId, role?, position }] }`).
+ */
+export function contributorsToPutBody(rows: ContributorItem[]): ContributorsPutBody {
+	return {
+		contributors: rows.map((r) => ({
+			authorId: r.authorId,
+			role: r.role,
+			position: r.position,
+		})),
+	}
+}

package/src/ui/inspector/revision-diff.ts

@@ -0,0 +1,213 @@
+// src/ui/inspector/revision-diff.ts — pure helpers for the History tab.
+//
+// diffBodies(prevMarkdown, nextMarkdown) → { added: string[], removed: string[] }
+//   Computes a word-level diff between two markdown strings. Used by the History
+//   tab "Compare" view. Per spec §4: "Diffs are computed at the app layer from
+//   two snapshots."
+//
+// revisionTimeline(rows) → TimelineEntry[]
+//   Maps the route's RevisionSummary rows to the shape the HistoryTab renders.
+//
+// Pure — no DOM, no React, fully vitest-testable.
+
+// ---------------------------------------------------------------------------
+// diffBodies
+// ---------------------------------------------------------------------------
+
+export interface BodyDiff {
+	/** Word tokens (or short segments) that are in next but not in prev. */
+	added: string[]
+	/** Word tokens (or short segments) that are in prev but not in next. */
+	removed: string[]
+}
+
+/**
+ * Word-level diff between two markdown bodies.
+ *
+ * Algorithm: split into word tokens, compute the longest-common-subsequence
+ * (LCS) to determine additions and removals. Returns arrays of tokens so the
+ * Compare view can highlight them inline.
+ *
+ * NOTE: This is a simple word-bag LCS; it is NOT a character-level unified
+ * diff. It is intentionally lightweight — the History tab shows word counts
+ * (from the route's wordsAdded/wordsRemoved) as the primary metric; the
+ * inline diff view here is supplementary.
+ */
+export function diffBodies(prevMarkdown: string, nextMarkdown: string): BodyDiff {
+	const prevTokens = tokenize(prevMarkdown)
+	const nextTokens = tokenize(nextMarkdown)
+
+	if (prevTokens.length === 0 && nextTokens.length === 0) {
+		return { added: [], removed: [] }
+	}
+	if (prevTokens.length === 0) {
+		return { added: nextTokens, removed: [] }
+	}
+	if (nextTokens.length === 0) {
+		return { added: [], removed: prevTokens }
+	}
+
+	// LCS via DP (bounded to avoid O(n²) blow-up on very large docs).
+	const MAX = 800
+	const pSlice = prevTokens.slice(0, MAX)
+	const nSlice = nextTokens.slice(0, MAX)
+
+	const lcs = computeLCS(pSlice, nSlice)
+
+	// Collect removed (in prev but not in LCS result), added (in next but not in LCS).
+	// We walk both lists tracking the LCS subsequence order.
+	const added: string[] = []
+	const removed: string[] = []
+
+	let li = 0 // pointer into lcs
+	for (const tok of pSlice) {
+		if (li < lcs.length && tok === lcs[li]) {
+			li++
+		} else {
+			removed.push(tok)
+		}
+	}
+
+	li = 0
+	for (const tok of nSlice) {
+		if (li < lcs.length && tok === lcs[li]) {
+			li++
+		} else {
+			added.push(tok)
+		}
+	}
+
+	// Handle overflow tokens (beyond MAX) as bulk added/removed.
+	if (prevTokens.length > MAX) {
+		removed.push(...prevTokens.slice(MAX))
+	}
+	if (nextTokens.length > MAX) {
+		added.push(...nextTokens.slice(MAX))
+	}
+
+	return { added, removed }
+}
+
+/** Split markdown into word tokens, stripping markdown syntax characters. */
+function tokenize(md: string): string[] {
+	if (!md) return []
+	// Replace markdown heading markers, bold/italic markers, etc. with spaces,
+	// then split on whitespace, filtering empty strings.
+	return md
+		.replace(/[#*_`~[\]()>|-]+/g, ' ')
+		.split(/\s+/)
+		.filter((t) => t.length > 0)
+}
+
+/**
+ * Compute the Longest Common Subsequence of two token arrays.
+ * Returns the LCS as an ordered array of tokens.
+ * Uses space-optimised DP (two rows at a time).
+ */
+function computeLCS(a: string[], b: string[]): string[] {
+	const m = a.length
+	const n = b.length
+	// dp[i][j] = LCS length for a[0..i-1], b[0..j-1]
+	const dp: number[][] = Array.from({ length: m + 1 }, () => new Array<number>(n + 1).fill(0))
+
+	for (let i = 1; i <= m; i++) {
+		for (let j = 1; j <= n; j++) {
+			if (a[i - 1] === b[j - 1]) {
+				dp[i][j] = dp[i - 1][j - 1] + 1
+			} else {
+				dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1])
+			}
+		}
+	}
+
+	// Backtrack to find the LCS tokens.
+	const result: string[] = []
+	let i = m
+	let j = n
+	while (i > 0 && j > 0) {
+		if (a[i - 1] === b[j - 1]) {
+			result.unshift(a[i - 1])
+			i--
+			j--
+		} else if (dp[i - 1][j] > dp[i][j - 1]) {
+			i--
+		} else {
+			j--
+		}
+	}
+	return result
+}
+
+// ---------------------------------------------------------------------------
+// revisionTimeline
+// ---------------------------------------------------------------------------
+
+export interface RevisionRow {
+	id: string
+	contentId: string
+	createdAt: number
+	createdBy: string | null
+	wordsAdded: number | null
+	wordsRemoved: number | null
+	tag: string | null
+}
+
+export interface TimelineEntry {
+	id: string
+	/** Human-readable label: tag name or formatted date. */
+	label: string
+	/** ISO date string for display. */
+	when: string
+	added: number
+	removed: number
+	tag: string | null
+	/**
+	 * True for autosaves (tag === 'autosave' or tag is null — routine saves with
+	 * no special annotation). False for named events like 'restore'/'publish'.
+	 */
+	isAutosave: boolean
+}
+
+/**
+ * Map route RevisionSummary rows to the TimelineEntry shape the HistoryTab renders.
+ * Rows are expected newest-first (the route returns them that way).
+ */
+export function revisionTimeline(rows: RevisionRow[]): TimelineEntry[] {
+	return rows.map((row) => {
+		const isAutosave = row.tag === null || row.tag === 'autosave'
+		const label = tagLabel(row.tag, row.createdAt)
+		const when = new Date(row.createdAt * 1000).toISOString()
+		return {
+			id: row.id,
+			label,
+			when,
+			added: row.wordsAdded ?? 0,
+			removed: row.wordsRemoved ?? 0,
+			tag: row.tag,
+			isAutosave,
+		}
+	})
+}
+
+function tagLabel(tag: string | null, createdAt: number): string {
+	if (tag === 'restore') return 'Restored version'
+	if (tag === 'publish') return 'Published'
+	if (tag === 'scheduled-publish') return 'Scheduled publish'
+	if (tag === 'autosave' || tag === null) {
+		// Format as a concise local timestamp.
+		return formatTimestamp(createdAt)
+	}
+	return tag
+}
+
+function formatTimestamp(unixSeconds: number): string {
+	const d = new Date(unixSeconds * 1000)
+	// Use a fixed format that works in any locale without Intl for simplicity.
+	const pad = (n: number): string => String(n).padStart(2, '0')
+	const year = d.getFullYear()
+	const month = pad(d.getMonth() + 1)
+	const day = pad(d.getDate())
+	const h = pad(d.getHours())
+	const m = pad(d.getMinutes())
+	return `${year}-${month}-${day} ${h}:${m}`
+}

package/src/ui/inspector/seo-helpers.ts

@@ -0,0 +1,71 @@
+// src/ui/inspector/seo-helpers.ts — pure SEO UI helpers.
+//
+// scoreRingGeometry(score, size) → SVG ring geometry for the ScoreRing component.
+// seoSummary(checks) → { passing, total, verdict } shaper for the checklist.
+//
+// Both are pure functions (no DOM, no React) and are vitest-testable.
+
+import type { SeoCheck } from '../../engine/seo.js'
+
+// ---------------------------------------------------------------------------
+// ScoreRing geometry
+// ---------------------------------------------------------------------------
+
+export interface ScoreRingGeometry {
+	/** SVG circle radius in px. */
+	radius: number
+	/** The full circumference of the ring (2πr). */
+	circumference: number
+	/**
+	 * The stroke-dashoffset value: circumference × (1 − score/100).
+	 * At score=100, dashOffset=0 (full ring). At score=0, dashOffset=circumference (empty ring).
+	 */
+	dashOffset: number
+	/** Semantic color bucket: 'green' ≥80 / 'amber' ≥55 / 'red' below. */
+	color: 'green' | 'amber' | 'red'
+}
+
+/** Stroke width used by the ring component (matches the SeoTab render). */
+const RING_STROKE = 8
+
+/**
+ * Compute the SVG geometry for a score ring.
+ *
+ * @param score - 0–100 integer score from the SEO scorer.
+ * @param size  - The outer diameter of the SVG element in px (default 80).
+ */
+export function scoreRingGeometry(score: number, size: number): ScoreRingGeometry {
+	const radius = (size - RING_STROKE) / 2
+	const circumference = 2 * Math.PI * radius
+	const dashOffset = circumference * (1 - score / 100)
+	const color: ScoreRingGeometry['color'] = score >= 80 ? 'green' : score >= 55 ? 'amber' : 'red'
+	return { radius, circumference, dashOffset, color }
+}
+
+// ---------------------------------------------------------------------------
+// SEO checks summary
+// ---------------------------------------------------------------------------
+
+export type SeoVerdict = 'Strong' | 'Needs work' | 'Poor'
+
+export interface SeoSummary {
+	passing: number
+	total: number
+	verdict: SeoVerdict
+}
+
+/**
+ * Summarise a checks array (from the `/seo-score` route) into display labels.
+ *
+ * Thresholds (each check = 20 pts so 5 checks → 0–100):
+ *   - score ≥80 → 'Strong'
+ *   - score ≥55 → 'Needs work'
+ *   - below    → 'Poor'
+ */
+export function seoSummary(checks: SeoCheck[]): SeoSummary {
+	const passing = checks.filter((c) => c.pass).length
+	const total = checks.length
+	const score = total > 0 ? (passing / total) * 100 : 0
+	const verdict: SeoVerdict = score >= 80 ? 'Strong' : score >= 55 ? 'Needs work' : 'Poor'
+	return { passing, total, verdict }
+}

package/src/ui/inspector/tab-visibility.ts

@@ -0,0 +1,37 @@
+// src/ui/inspector/tab-visibility.ts — pure tab-visibility logic.
+//
+// visibleTabs(contentType) returns the ordered tab definitions for the Inspector.
+// The 'foundry' tab is only shown for video and podcast content types (per spec §8
+// and the design's `hasFoundry` predicate). All other tabs are always shown.
+
+import type { ContentType } from '../../schema/types.js'
+
+export interface TabDef {
+	id: string
+	icon: string
+	label: string
+}
+
+/** The standard 4-tab order for non-media content types. */
+const BASE_TABS: TabDef[] = [
+	{ id: 'publish', icon: 'upload', label: 'Publish' },
+	{ id: 'seo', icon: 'seo', label: 'SEO' },
+	{ id: 'organize', icon: 'tag', label: 'Organize' },
+	{ id: 'history', icon: 'history', label: 'History' },
+]
+
+/** The Foundry tab, inserted between Organize and History for media types. */
+const FOUNDRY_TAB: TabDef = { id: 'foundry', icon: 'bolt', label: 'Foundry' }
+
+/**
+ * Returns the ordered tab list for the given content type.
+ *
+ * - article / newsletter: publish → seo → organize → history (4 tabs)
+ * - video / podcast:      publish → seo → organize → foundry → history (5 tabs)
+ */
+export function visibleTabs(contentType: ContentType): TabDef[] {
+	const hasFoundry = contentType === 'video' || contentType === 'podcast'
+	if (!hasFoundry) return BASE_TABS
+	// Insert the Foundry tab between Organize (index 2) and History (index 3).
+	return [BASE_TABS[0], BASE_TABS[1], BASE_TABS[2], FOUNDRY_TAB, BASE_TABS[3]]
+}

package/src/ui/nav.ts

@@ -0,0 +1,48 @@
+// src/ui/nav.ts — the Masthead sidebar nav model. Two groups, 11 items
+// (spec §6: Social Share added between Subscriptions and Settings).
+
+import type { Route } from './hash-router.js'
+import type { IconName } from './icons.js'
+
+export interface NavItem {
+	id: Route
+	label: string
+	icon: IconName
+	count?: number
+}
+export interface NavGroup {
+	group: string
+	items: NavItem[]
+}
+
+export const NAV_MODEL: NavGroup[] = [
+	{
+		group: 'Workspace',
+		items: [
+			{ id: 'dashboard', label: 'Dashboard', icon: 'dashboard' },
+			{ id: 'content', label: 'Content', icon: 'library' },
+			{ id: 'calendar', label: 'Calendar', icon: 'calendar' },
+			{ id: 'media', label: 'Media', icon: 'media' },
+			{ id: 'analytics', label: 'Analytics', icon: 'chart' },
+		],
+	},
+	{
+		group: 'Manage',
+		items: [
+			{ id: 'authors', label: 'Authors & bylines', icon: 'users' },
+			{ id: 'topics', label: 'Topics & tags', icon: 'tag' },
+			{ id: 'content-insights', label: 'Content Insights', icon: 'sparkle' },
+			{ id: 'subscriptions', label: 'Subscriptions', icon: 'inbox' },
+			{ id: 'social-share', label: 'Social Share', icon: 'share' },
+			{ id: 'settings', label: 'Settings', icon: 'settings' },
+		],
+	},
+]
+
+/** Build the nav with live counts merged onto matching item ids. */
+export function navItems(counts: Partial<Record<Route, number>> = {}): NavGroup[] {
+	return NAV_MODEL.map((g) => ({
+		group: g.group,
+		items: g.items.map((i) => (counts[i.id] != null ? { ...i, count: counts[i.id] } : { ...i })),
+	}))
+}

package/src/ui/pages/admin.astro

@@ -0,0 +1,32 @@
+---
+export const prerender = false
+import { config } from 'virtual:growth-labs/cms/config'
+
+// Edge auth: the host's middleware populates Astro.locals.user. No user → bounce
+// to the host login. (The host injects this integration only behind its auth.)
+const user = (Astro.locals as { user?: { email?: string } }).user
+if (!user) {
+	const url = new URL('/login/', Astro.url.origin)
+	url.searchParams.set('redirect', Astro.url.pathname)
+	return Astro.redirect(url.toString())
+}
+const initial = { workspaces: config.workspaces, activeWorkspaceId: config.activeWorkspaceId }
+---
+<!doctype html>
+<html lang="en" data-theme={config.theme.mode} data-density={config.theme.density}>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Masthead</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			rel="stylesheet"
+			href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap"
+		/>
+	</head>
+	<body>
+		<div id="masthead-root" data-initial={JSON.stringify(initial)} style="height:100vh"></div>
+		<script>import '@growth-labs/cms/ui/client'</script>
+	</body>
+</html>