@growth-labs/cms 0.5.26 → 0.5.29

package/src/ui/editor/ContentForm.tsx

@@ -18,8 +18,10 @@
 //
 // Compile-gated: all Tiptap/React usage verified by `pnpm run build` (tsc).
 
-import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
+import { type ContentMetadata, parseContentMetadata } from '../../engine/content-metadata.js'
 import { countWords, estimateReadTime } from '../../engine/publisher.js'
+import type { ContentMetadataSelectField } from '../../integration/options.js'
 import type { ContentStatus, ContentType } from '../../schema/types.js'
 import { Icon } from '../icons.js'
 import { uploadMediaAsset } from '../screens/media-upload.js'
@@ -31,8 +33,10 @@ import {
 	type ContentDraftFields,
 	canCreateContentDraft,
 	foundryDispatchSourceForDraft,
+	initialContentMetadata,
 	normalizeMediaDurationSeconds,
 	slugifyTitle,
+	updateContentMetadataSelection,
 } from './content-payload.js'
 import { measureEditorMediaDurationSeconds } from './editor-media-duration.js'
 import { uploadEditorImage } from './editor-media-upload.js'
@@ -63,6 +67,7 @@ export interface ContentFormProps {
 	/** Called when save state changes so editor chrome can show a real save action. */
 	onSaveStateChange?: (state: ContentSaveState) => void
 	primaryCategories?: Array<{ slug: string; label: string }>
+	contentMetadataSelects?: ContentMetadataSelectField[]
 }
 
 export interface ContentSaveState {
@@ -106,6 +111,7 @@ interface ExistingContentItem {
 	published_at?: number | null
 	hero_image_id?: string | null
 	hero_image_url?: string | null
+	metadata_json?: string
 }
 
 interface ExistingContentPayload {
@@ -149,6 +155,7 @@ interface FormState {
 	publishedAt: string | null
 	premium: boolean
 	channel: string | null
+	metadata: ContentMetadata
 	heroImageId: string
 	heroImageUrl: string | null
 	heroUploadStatus: 'idle' | 'uploading' | 'staged'
@@ -180,7 +187,9 @@ interface FormState {
 	aiOpen: boolean
 }
 
-function createEmptyFormState(docId: string | null): FormState {
+const EMPTY_CONTENT_METADATA_SELECTS: ContentMetadataSelectField[] = []
+
+function createEmptyFormState(docId: string | null, metadata: ContentMetadata = {}): FormState {
 	return {
 		status: 'draft',
 		title: '',
@@ -197,6 +206,7 @@ function createEmptyFormState(docId: string | null): FormState {
 		publishedAt: null,
 		premium: false,
 		channel: null,
+		metadata,
 		heroImageId: '',
 		heroImageUrl: null,
 		heroUploadStatus: 'idle',
@@ -238,8 +248,15 @@ export function ContentForm({
 	onStatusChange,
 	onSaveStateChange,
 	primaryCategories = [],
+	contentMetadataSelects = EMPTY_CONTENT_METADATA_SELECTS,
 }: ContentFormProps) {
-	const [form, setForm] = useState<FormState>(() => createEmptyFormState(docId))
+	const metadataFields = useMemo(
+		() => contentMetadataSelects.filter((field) => field.contentTypes.includes(contentType)),
+		[contentMetadataSelects, contentType],
+	)
+	const [form, setForm] = useState<FormState>(() =>
+		createEmptyFormState(docId, initialContentMetadata(metadataFields, contentType)),
+	)
 
 	// Autosave state (mutable refs, not React state — no re-render needed)
 	const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -260,7 +277,7 @@ export function ContentForm({
 
 	const loadExistingContent = useCallback(async () => {
 		if (!docId) {
-			const next = createEmptyFormState(null)
+			const next = createEmptyFormState(null, initialContentMetadata(metadataFields, contentType))
 			setForm(next)
 			publishDraft(next)
 			return
@@ -288,7 +305,7 @@ export function ContentForm({
 				saveError: err instanceof Error ? err.message : 'Could not load content',
 			}))
 		}
-	}, [contentType, docId, onStatusChange, publishDraft])
+	}, [contentType, docId, metadataFields, onStatusChange, publishDraft])
 
 	// -- Word-count (derived from the body markdown) -------------------------
 	const wordCount = countWords(form.body)
@@ -521,6 +538,16 @@ export function ContentForm({
 		scheduleAutosave(next)
 	}
 
+	function handleMetadataSelectChange(field: ContentMetadataSelectField, value: string) {
+		const next = {
+			...latestForm.current,
+			metadata: updateContentMetadataSelection(latestForm.current.metadata, field, value),
+		}
+		setForm(next)
+		publishDraft(next)
+		scheduleAutosave(next)
+	}
+
 	function handleBodyChange(md: string, portableText: string) {
 		const next = { ...latestForm.current, body: md, bodyPortableText: portableText }
 		setForm(next)
@@ -807,7 +834,7 @@ export function ContentForm({
 	}
 
 	return (
-		<div style={formWrap}>
+		<div className="editor-document" style={formWrap}>
 			{/* Autosave indicator + AI assist toggle */}
 			<div style={saveIndicator}>
 				<span
@@ -895,6 +922,39 @@ export function ContentForm({
 				</div>
 			)}
 
+			{metadataFields.map((field) => {
+				const storedValue = form.metadata[field.key]
+				const value = typeof storedValue === 'string' ? storedValue : ''
+				const inferred =
+					field.inferenceMarkerKey !== undefined && form.metadata[field.inferenceMarkerKey] === true
+				return (
+					<div key={field.key} style={fieldGroup}>
+						<label style={{ display: 'grid', gap: 6, fontSize: 12, color: 'var(--ink-muted)' }}>
+							{field.label}
+							<select
+								value={value}
+								onChange={(event) => handleMetadataSelectChange(field, event.currentTarget.value)}
+								aria-label={field.label}
+								style={urlInput}
+							>
+								<option value="">Select…</option>
+								{field.options.map((option) => (
+									<option key={option.value} value={option.value}>
+										{option.label}
+									</option>
+								))}
+							</select>
+						</label>
+						{(field.helpText || inferred) && (
+							<div style={assetHelp}>
+								{inferred ? 'Inferred value — review and choose the best fit. ' : ''}
+								{field.helpText}
+							</div>
+						)}
+					</div>
+				)
+			})}
+
 			{/* Signature masthead hairline between the standfirst and the body */}
 			<hr className="masthead-rule" style={{ margin: '6px 0 20px' }} />
 
@@ -1457,6 +1517,7 @@ function contentResponseToFormState(
 	next.publishedAt = unixSecondsToIso(item.published_at)
 	next.premium = item.visibility === 'premium'
 	next.channel = toNullableString(item.channel)
+	next.metadata = storedContentMetadata(item.metadata_json)
 	next.heroImageId = heroImageId
 	next.heroImageUrl = heroImageUrl || (heroImageId ? mediaUrlFromId(heroImageId) : null)
 
@@ -1491,6 +1552,14 @@ function contentResponseToFormState(
 	return next
 }
 
+function storedContentMetadata(raw: string | null | undefined): ContentMetadata {
+	try {
+		return parseContentMetadata(raw ?? '{}')
+	} catch {
+		return {}
+	}
+}
+
 function formToPreviewDraft(form: FormState, contentType: ContentType): ContentPreviewDraft {
 	return {
 		id: form.savedId ?? 'draft',
@@ -1567,7 +1636,6 @@ const formWrap: React.CSSProperties = {
 	display: 'flex',
 	flexDirection: 'column',
 	gap: 0,
-	padding: '16px 24px',
 	flex: 1,
 	overflowY: 'auto',
 }
@@ -1589,11 +1657,11 @@ const titleInput: React.CSSProperties = {
 	width: '100%',
 	border: 0,
 	background: 'transparent',
-	fontFamily: 'var(--serif)',
+	fontFamily: 'var(--font-display)',
 	fontWeight: 600,
-	fontSize: 36,
-	letterSpacing: '-0.025em',
-	lineHeight: 1.08,
+	fontSize: 34,
+	letterSpacing: '-0.02em',
+	lineHeight: 1.15,
 	color: 'var(--ink)',
 	padding: 0,
 	outline: 'none',
@@ -1603,8 +1671,8 @@ const dekInput: React.CSSProperties = {
 	width: '100%',
 	border: 0,
 	background: 'transparent',
-	fontFamily: 'var(--serif)',
-	fontSize: 19,
+	fontFamily: 'var(--font-body)',
+	fontSize: 17,
 	lineHeight: 1.5,
 	color: 'var(--ink-soft)',
 	padding: 0,

package/src/ui/editor/Rte.tsx

@@ -493,8 +493,8 @@ const contentWrap: React.CSSProperties = {
 	flex: 1,
 	padding: '20px 22px',
 	overflowY: 'auto',
-	fontFamily: 'var(--serif)',
-	fontSize: 17,
-	lineHeight: 1.75,
+	fontFamily: 'var(--font-body)',
+	fontSize: 15.5,
+	lineHeight: 1.65,
 	color: 'var(--ink)',
 }

package/src/ui/editor/content-payload.ts

@@ -1,4 +1,6 @@
+import type { ContentMetadata } from '../../engine/content-metadata.js'
 import { countWords, estimateReadTime } from '../../engine/publisher.js'
+import type { ContentMetadataSelectField } from '../../integration/options.js'
 import type { ContentType } from '../../schema/types.js'
 
 export interface ContentDraftFields {
@@ -17,6 +19,42 @@ export interface ContentDraftFields {
 	audioUrl: string
 	durationSeconds: number | null
 	channel?: string | null
+	metadata?: ContentMetadata
+}
+
+type MetadataSelectFieldContract = Pick<
+	ContentMetadataSelectField,
+	'key' | 'defaultValue' | 'inferenceMarkerKey'
+> & {
+	contentTypes: readonly ContentType[]
+	options: ReadonlyArray<{ value: string }>
+}
+
+export function initialContentMetadata(
+	fields: readonly MetadataSelectFieldContract[],
+	contentType: ContentType,
+): ContentMetadata {
+	const metadata: ContentMetadata = {}
+	for (const field of fields) {
+		if (!field.contentTypes.includes(contentType) || !field.defaultValue) continue
+		metadata[field.key] = field.defaultValue
+	}
+	return metadata
+}
+
+export function updateContentMetadataSelection(
+	metadata: Readonly<ContentMetadata>,
+	field: MetadataSelectFieldContract,
+	value: string,
+): ContentMetadata {
+	if (value && !field.options.some((option) => option.value === value)) {
+		throw new RangeError(`Unknown option for metadata field ${field.key}`)
+	}
+	const next: ContentMetadata = { ...metadata }
+	if (value) next[field.key] = value
+	else delete next[field.key]
+	if (field.inferenceMarkerKey) delete next[field.inferenceMarkerKey]
+	return next
 }
 
 export function normalizeMediaDurationSeconds(value: unknown): number | null {
@@ -97,6 +135,7 @@ export function buildContentUpdatePayload(
 		title: draft.title,
 		excerpt: draft.dek || null,
 	}
+	if (draft.metadata !== undefined) payload.metadata = draft.metadata
 	const channel = draft.channel?.trim()
 	payload.primaryCategory = channel || null
 	const heroImageId = draft.heroImageId?.trim()

package/src/ui/inspector/FoundryTab.tsx

@@ -499,7 +499,7 @@ const progressTrack: React.CSSProperties = {
 const progressFill: React.CSSProperties = {
 	width: '100%',
 	height: '100%',
-	background: 'var(--gold)',
+	background: 'var(--accent-primary)',
 }
 
 const errorText: React.CSSProperties = {

package/src/ui/pages/admin.astro

@@ -22,7 +22,7 @@ const initial = { workspaces: config.workspaces, activeWorkspaceId: config.activ
 		<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"
+			href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"
 		/>
 	</head>
 	<body>

package/src/ui/screens/AuthorsScreen.tsx

@@ -520,7 +520,7 @@ function initialsFor(name: string): string {
 	return (name.trim().slice(0, 2) || '—').toUpperCase()
 }
 
-const AVATAR_COLORS = ['#0c4a6e', '#1f6b4a', '#5b4bc4', '#8c6d14', '#075985', '#475569']
+const AVATAR_COLORS = ['#2F6FBD', '#1FA3A8', '#8075ED', '#F7A34B', '#2CA8E0', '#4D4D4D']
 
 function avatarColor(seed: string): string {
 	let h = 0

package/src/ui/screens/ContentInsightsScreen.tsx

@@ -171,7 +171,7 @@ export function ContentInsightsScreen() {
 							style={{
 								overflow: 'hidden',
 								marginBottom: 'var(--gap)',
-								borderLeft: `3px solid ${group.lane == null ? 'var(--hairline)' : 'var(--gold)'}`,
+								borderLeft: `3px solid ${group.lane == null ? 'var(--hairline)' : 'var(--accent-primary)'}`,
 							}}
 						>
 							<header

package/src/ui/screens/ContentRoute.tsx

@@ -8,6 +8,7 @@
 // This file creates thin stubs so the registry can compile now (Task 10).
 
 import { useReducer } from 'react'
+import type { ContentMetadataSelectField } from '../../integration/options.js'
 import { type ContentType, contentViewReducer, initialContentView } from './content-view.js'
 import { EditorScreen } from './EditorScreen.js'
 import { LibraryScreen } from './LibraryScreen.js'
@@ -15,9 +16,11 @@ import { LibraryScreen } from './LibraryScreen.js'
 export function ContentRoute({
 	allowInlineAuthorCreation = true,
 	primaryCategories = [],
+	contentMetadataSelects = [],
 }: {
 	allowInlineAuthorCreation?: boolean
 	primaryCategories?: Array<{ slug: string; label: string }>
+	contentMetadataSelects?: ContentMetadataSelectField[]
 }) {
 	const [view, dispatch] = useReducer(contentViewReducer, initialContentView)
 
@@ -49,6 +52,7 @@ export function ContentRoute({
 			onClose={handleClose}
 			allowInlineAuthorCreation={allowInlineAuthorCreation}
 			primaryCategories={primaryCategories}
+			contentMetadataSelects={contentMetadataSelects}
 		/>
 	)
 }

package/src/ui/screens/EditorScreen.tsx

@@ -17,6 +17,7 @@
 // is Playwright-smoked only.
 
 import { useCallback, useState } from 'react'
+import type { ContentMetadataSelectField } from '../../integration/options.js'
 import type { ContentStatus, ContentType } from '../../schema/types.js'
 import { buildSharePrefill, ShareModal } from '../components/ShareModal.js'
 import {
@@ -40,6 +41,7 @@ export interface EditorScreenProps {
 	onClose: () => void
 	allowInlineAuthorCreation?: boolean
 	primaryCategories?: Array<{ slug: string; label: string }>
+	contentMetadataSelects?: ContentMetadataSelectField[]
 }
 
 // ---------------------------------------------------------------------------
@@ -58,12 +60,20 @@ const CONTENT_TYPE_LABELS: Record<ContentType, string> = {
 
 const STATUS_PILL_COLORS: Record<ContentStatus, string> = {
 	draft: 'var(--ink-faint)',
-	review: '#a78bfa',
-	scheduled: '#60a5fa',
-	published: '#34d399',
+	review: 'var(--amber)',
+	scheduled: 'var(--accent)',
+	published: 'var(--green)',
 	archived: 'var(--ink-faint)',
 }
 
+export function editorStatusColor(status: ContentStatus): string {
+	return STATUS_PILL_COLORS[status]
+}
+
+export function editorStatusBackground(status: ContentStatus): string {
+	return `color-mix(in srgb, ${editorStatusColor(status)} 14%, transparent)`
+}
+
 // ---------------------------------------------------------------------------
 // EditorScreen
 // ---------------------------------------------------------------------------
@@ -73,6 +83,7 @@ export function EditorScreen({
 	onClose,
 	allowInlineAuthorCreation = true,
 	primaryCategories = [],
+	contentMetadataSelects = [],
 }: EditorScreenProps) {
 	const contentType: ContentType = (docRef.contentType as ContentType | undefined) ?? 'article'
 	const siteBase = typeof window !== 'undefined' ? window.location.origin : undefined
@@ -369,6 +380,7 @@ export function EditorScreen({
 								onStatusChange={setStatus}
 								onSaveStateChange={handleSaveStateChange}
 								primaryCategories={primaryCategories}
+								contentMetadataSelects={contentMetadataSelects}
 							/>
 						</div>
 
@@ -503,8 +515,8 @@ function statusPill(status: ContentStatus): React.CSSProperties {
 		fontWeight: 600,
 		letterSpacing: '0.06em',
 		textTransform: 'uppercase',
-		background: `${STATUS_PILL_COLORS[status]}22`,
-		color: STATUS_PILL_COLORS[status],
+		background: editorStatusBackground(status),
+		color: editorStatusColor(status),
 		flexShrink: 0,
 	}
 }
@@ -526,10 +538,10 @@ const headerBar: React.CSSProperties = {
 	display: 'flex',
 	alignItems: 'center',
 	justifyContent: 'space-between',
-	height: 48,
-	padding: '0 16px',
+	height: 58,
+	padding: '0 20px',
 	borderBottom: '1px solid var(--border)',
-	background: 'var(--panel)',
+	background: 'var(--surface-raised-nav)',
 	flexShrink: 0,
 	gap: 12,
 }
@@ -661,7 +673,7 @@ const formArea: React.CSSProperties = {
 }
 
 const inspectorSlot: React.CSSProperties = {
-	flex: '0 0 340px',
+	flex: '0 0 296px',
 	borderLeft: '1px solid var(--border)',
 	display: 'flex',
 	flexDirection: 'column',

package/src/ui/screens/LibraryScreen.tsx

@@ -753,7 +753,10 @@ function ListRow({
 						>
 							{row.title || '(Untitled)'}
 							{row.featured && (
-								<span title="Premium" style={{ color: 'var(--gold)', flex: 'none' }}>
+								<span
+									title="Premium"
+									style={{ color: 'var(--accent-primary-strong)', flex: 'none' }}
+								>
 									<Icon name="star" size={13} />
 								</span>
 							)}
@@ -1064,7 +1067,7 @@ function BoardCard({
 					{row.updatedAt ? formatDate(row.updatedAt) : (row.authorName ?? '—')}
 				</span>
 				{row.featured && (
-					<span style={{ marginLeft: 'auto', color: 'var(--gold)' }}>
+					<span style={{ marginLeft: 'auto', color: 'var(--accent-primary-strong)' }}>
 						<Icon name="star" size={12} />
 					</span>
 				)}

package/src/ui/screens/SettingsScreen.tsx

@@ -375,7 +375,7 @@ function GeneralSettings({
 // Branding settings
 // ---------------------------------------------------------------------------
 
-const ACCENT_PRESETS = ['#0c4a6e', '#b23a2e', '#1f6b4a', '#5b4bc4', '#374151']
+const ACCENT_PRESETS = ['#2F6FBD', '#1FA3A8', '#2CA8E0', '#8075ED', '#F56A61']
 const TYPEFACE_OPTIONS = ['serif', 'Source Serif 4', 'Spectral', 'Newsreader', 'Inter']
 
 function BrandingSettings({

package/src/ui/screens/SubscriptionsScreen.tsx

@@ -1310,7 +1310,7 @@ function KpiCard({
 // PlanMixChart — stacked bar + legend rows (aside panel)
 // ---------------------------------------------------------------------------
 
-const PLAN_DOT_COLORS = ['#1f6b4a', '#0c4a6e', '#5b4bc4', '#8c6d14', '#475569']
+const PLAN_DOT_COLORS = ['#1FA3A8', '#2F6FBD', '#8075ED', '#F7A34B', '#4D4D4D']
 
 function PlanMixChart({
 	planMix,
@@ -1746,7 +1746,7 @@ function initialsFor(email: string): string {
 	return local.slice(0, 2).toUpperCase()
 }
 
-const AVATAR_COLORS = ['#0c4a6e', '#1f6b4a', '#5b4bc4', '#8c6d14', '#075985', '#475569']
+const AVATAR_COLORS = ['#2F6FBD', '#1FA3A8', '#8075ED', '#F7A34B', '#2CA8E0', '#4D4D4D']
 
 function avatarColor(seed: string): string {
 	let h = 0

package/src/ui/screens/registry.tsx

@@ -11,6 +11,7 @@
 // internal router state (which is not exported). The ContentRoute itself owns
 // the full open-doc reducer (which doc is open, new vs existing).
 
+import type { ContentMetadataSelectField } from '../../integration/options.js'
 import type { ScreenRegistry } from '../components/CmsApp.js'
 import { useHashRouter } from '../use-hash-router.js'
 import { AnalyticsScreen } from './AnalyticsScreen.js'
@@ -42,10 +43,12 @@ function CalendarRoute() {
 export function createCmsScreens({
 	allowInlineAuthorCreation = true,
 	primaryCategories = [],
+	contentMetadataSelects = [],
 	surveyId,
 }: {
 	allowInlineAuthorCreation?: boolean
 	primaryCategories?: Array<{ slug: string; label: string }>
+	contentMetadataSelects?: ContentMetadataSelectField[]
 	surveyId?: string
 } = {}): ScreenRegistry {
 	return {
@@ -53,6 +56,7 @@ export function createCmsScreens({
 			<ContentRoute
 				allowInlineAuthorCreation={allowInlineAuthorCreation}
 				primaryCategories={primaryCategories}
+				contentMetadataSelects={contentMetadataSelects}
 			/>
 		),
 		'content-insights': () => <ContentInsightsScreen />,