@growth-labs/cms 0.5.27 → 0.5.30

package/src/ui/editor/ContentForm.tsx

@@ -18,21 +18,26 @@
 //
 // 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'
 import { AiAssistPanel } from './AiAssistPanel.js'
 import { AUTOSAVE_DEBOUNCE_MS, shouldSnapshot } from './autosave.js'
+import { type BodyWarning, describeBodyWarnings, sortBodyWarnings } from './body-warnings.js'
 import {
 	buildContentCreatePayload,
 	buildContentUpdatePayload,
 	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 +68,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 +112,7 @@ interface ExistingContentItem {
 	published_at?: number | null
 	hero_image_id?: string | null
 	hero_image_url?: string | null
+	metadata_json?: string
 }
 
 interface ExistingContentPayload {
@@ -149,6 +156,7 @@ interface FormState {
 	publishedAt: string | null
 	premium: boolean
 	channel: string | null
+	metadata: ContentMetadata
 	heroImageId: string
 	heroImageUrl: string | null
 	heroUploadStatus: 'idle' | 'uploading' | 'staged'
@@ -178,9 +186,17 @@ interface FormState {
 	lastSavedAt: number | null
 	/** Whether the AI assist panel is open. */
 	aiOpen: boolean
+	/**
+	 * Warn-severity body lint from the last save (#329). Previously the 200
+	 * payload was discarded, which is how a malformed Sources section reached a
+	 * published page — the server reported it and nothing showed the editor.
+	 */
+	bodyWarnings: BodyWarning[]
 }
 
-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 +213,7 @@ function createEmptyFormState(docId: string | null): FormState {
 		publishedAt: null,
 		premium: false,
 		channel: null,
+		metadata,
 		heroImageId: '',
 		heroImageUrl: null,
 		heroUploadStatus: 'idle',
@@ -219,6 +236,7 @@ function createEmptyFormState(docId: string | null): FormState {
 		savedId: docId,
 		saving: false,
 		saveError: null,
+		bodyWarnings: [],
 		lastSavedAt: null,
 		aiOpen: false,
 	}
@@ -238,8 +256,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 +285,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 +313,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)
@@ -424,6 +449,17 @@ export function ContentForm({
 						return
 					}
 
+					// Carry warn-severity body lint into the editor. The server has
+					// reported these since #453; dropping the 200 payload here is what
+					// left them invisible.
+					const saved = (await res.json().catch(() => ({}))) as {
+						bodyWarnings?: BodyWarning[]
+					}
+					setForm((prev) => ({
+						...prev,
+						bodyWarnings: Array.isArray(saved.bodyWarnings) ? saved.bodyWarnings : [],
+					}))
+
 					// Snapshot cadence check
 					const now = Date.now()
 					savesSinceSnapshot.current += 1
@@ -521,6 +557,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)
@@ -895,6 +941,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' }} />
 
@@ -1044,6 +1123,33 @@ export function ContentForm({
 				)}
 			</div>
 
+			{/* Body lint (#329). Shown beside the body editor so the correction is
+			    next to the text it applies to, rather than in a toast that is gone
+			    before the editor can act on it. */}
+			{form.bodyWarnings.length > 0 && (
+				<div style={bodyWarningPanel} role="status" aria-label="Body formatting warnings">
+					<div style={bodyWarningTitle}>
+						<Icon name="edit" size={12} style={{ color: 'var(--ink-faint)' }} />
+						<span>
+							{form.bodyWarnings.length}{' '}
+							{form.bodyWarnings.length === 1 ? 'formatting issue' : 'formatting issues'} — saved,
+							but these will block publishing
+						</span>
+					</div>
+					<ul style={bodyWarningList}>
+						{sortBodyWarnings(describeBodyWarnings(form.body, form.bodyWarnings)).map((warning) => (
+							<li key={`${warning.code}:${warning.line ?? 'x'}`} style={bodyWarningItem}>
+								<span style={bodyWarningLine}>
+									{warning.line === null ? 'Sources' : `Line ${warning.line}`}
+								</span>
+								<span>{warning.message}</span>
+								{warning.excerpt ? <code style={bodyWarningCode}>{warning.excerpt}</code> : null}
+							</li>
+						))}
+					</ul>
+				</div>
+			)}
+
 			{/* Footer: word count + read time (only for prose content) */}
 			{(contentType === 'article' || contentType === 'newsletter' || contentType === 'page') && (
 				<div style={footer}>
@@ -1457,6 +1563,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 +1598,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',
@@ -1611,6 +1726,53 @@ const dekInput: React.CSSProperties = {
 	resize: 'none',
 }
 
+const bodyWarningPanel: React.CSSProperties = {
+	marginTop: 16,
+	padding: '12px 14px',
+	borderRadius: 6,
+	border: '1px solid var(--border-soft)',
+	borderLeft: '3px solid var(--warn, #b8860b)',
+	background: 'var(--surface-sunken, rgba(0,0,0,0.02))',
+}
+
+const bodyWarningTitle: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 8,
+	fontFamily: 'var(--mono)',
+	fontSize: 11.5,
+	color: 'var(--ink-muted)',
+	marginBottom: 8,
+}
+
+const bodyWarningList: React.CSSProperties = {
+	display: 'grid',
+	gap: 8,
+	margin: 0,
+	padding: 0,
+	listStyle: 'none',
+}
+
+const bodyWarningItem: React.CSSProperties = {
+	display: 'grid',
+	gap: 3,
+	fontSize: 13,
+	lineHeight: 1.45,
+}
+
+const bodyWarningLine: React.CSSProperties = {
+	fontFamily: 'var(--mono)',
+	fontSize: 11,
+	color: 'var(--ink-faint)',
+}
+
+const bodyWarningCode: React.CSSProperties = {
+	fontFamily: 'var(--mono)',
+	fontSize: 11.5,
+	color: 'var(--ink-muted)',
+	overflowWrap: 'anywhere',
+}
+
 const footer: React.CSSProperties = {
 	display: 'flex',
 	alignItems: 'center',

package/src/ui/editor/body-warnings.ts

@@ -0,0 +1,78 @@
+// Turn validator output into something an editor can act on (#329).
+//
+// The API returns `bodyWarnings` with character spans. An editor cannot use a
+// character offset — the design asks for "the affected line and a plain-language
+// correction" — so this maps each span onto a 1-based line number and the text
+// of that line.
+//
+// Pure on purpose: the mapping is the part worth testing, and keeping it out of
+// the component means it can be tested without rendering anything.
+
+export interface BodyWarning {
+	code: string
+	message: string
+	span?: { start: number; end: number }
+}
+
+export interface DescribedBodyWarning {
+	code: string
+	message: string
+	/** 1-based line number, or null when the warning carries no span. */
+	line: number | null
+	/** The offending line, trimmed. Null when there is no span to locate. */
+	excerpt: string | null
+}
+
+/** Longest excerpt shown inline before truncation. */
+const MAX_EXCERPT = 120
+
+function lineAt(markdown: string, offset: number): { line: number; text: string } | null {
+	if (offset < 0 || offset > markdown.length) return null
+	const before = markdown.slice(0, offset)
+	const line = before.split('\n').length
+	const lineStart = before.lastIndexOf('\n') + 1
+	const nextBreak = markdown.indexOf('\n', lineStart)
+	const text = markdown.slice(lineStart, nextBreak === -1 ? markdown.length : nextBreak)
+	return { line, text }
+}
+
+function truncate(value: string): string {
+	return value.length > MAX_EXCERPT ? `${value.slice(0, MAX_EXCERPT - 1)}…` : value
+}
+
+/**
+ * Attach a line number and excerpt to each warning.
+ *
+ * Warnings without a span keep `line: null` rather than being dropped or given
+ * a fabricated line 1 — a wrong line number sends an editor to the wrong place,
+ * which is worse than admitting the position is unknown.
+ */
+export function describeBodyWarnings(
+	markdown: string | null | undefined,
+	warnings: readonly BodyWarning[] | null | undefined,
+): DescribedBodyWarning[] {
+	if (!warnings || warnings.length === 0) return []
+	const source = markdown ?? ''
+
+	return warnings.map((warning) => {
+		const located = warning.span ? lineAt(source, warning.span.start) : null
+		return {
+			code: warning.code,
+			message: warning.message,
+			line: located ? located.line : null,
+			excerpt: located ? truncate(located.text.trim()) : null,
+		}
+	})
+}
+
+/** Stable ordering for display: by line, then by code. Unlocated ones last. */
+export function sortBodyWarnings(
+	warnings: readonly DescribedBodyWarning[],
+): DescribedBodyWarning[] {
+	return [...warnings].sort((a, b) => {
+		if (a.line === b.line) return a.code.localeCompare(b.code)
+		if (a.line === null) return 1
+		if (b.line === null) return -1
+		return a.line - b.line
+	})
+}

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/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[]
 }
 
 // ---------------------------------------------------------------------------
@@ -81,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
@@ -377,6 +380,7 @@ export function EditorScreen({
 								onStatusChange={setStatus}
 								onSaveStateChange={handleSaveStateChange}
 								primaryCategories={primaryCategories}
+								contentMetadataSelects={contentMetadataSelects}
 							/>
 						</div>