@growth-labs/cms 0.1.0

package/src/ui/editor/ContentForm.tsx

@@ -0,0 +1,1462 @@
+// src/ui/editor/ContentForm.tsx — four-type content form with Tiptap RTE.
+//
+// Handles: title, dek (excerpt), type-specific body block:
+//   - article / newsletter → <Rte/> (Tiptap body)
+//   - video  → media/video block (URL input; the actual R2 multipart upload
+//               is wired through the existing /media/multipart routes; here
+//               we store a source URL or R2 key)
+//   - podcast → audio block (source URL; mirrors video)
+//
+// Footer: live word-count + read-time via engine's countWords/estimateReadTime.
+//
+// Autosave:
+//   - debounce AUTOSAVE_DEBOUNCE_MS → PATCH /content/:id
+//   - shouldSnapshot cadence → POST /content/:id?action=snapshot
+//
+// New-doc flow: when docId is null (new content), the form calls POST /content
+// on the first save and switches to update mode.
+//
+// Compile-gated: all Tiptap/React usage verified by `pnpm run build` (tsc).
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { countWords, estimateReadTime } from '../../engine/publisher.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 {
+	buildContentCreatePayload,
+	buildContentUpdatePayload,
+	type ContentDraftFields,
+	canCreateContentDraft,
+	foundryDispatchSourceForDraft,
+	slugifyTitle,
+} from './content-payload.js'
+import { uploadEditorImage } from './editor-media-upload.js'
+import { Rte } from './Rte.js'
+import { docToMarkdown } from './serialize.js'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ContentFormProps {
+	/** Existing content id (null = new unsaved doc). */
+	docId: string | null
+	/** Content type (article | video | podcast | newsletter). */
+	contentType: ContentType
+	/** Called with the live resolved id once the doc is saved for the first time. */
+	onDocCreated?: (id: string) => void
+	/** Called on every autosave with the current title (for header refresh). */
+	onTitleChange?: (title: string) => void
+	/** Called whenever the editable draft changes so the live preview stays in sync. */
+	onDraftChange?: (draft: ContentPreviewDraft) => void
+	/** Incrementing signal from the editor header to flush the current draft immediately. */
+	saveRequest?: number
+	/** Called when the loaded content status changes so editor chrome can stay in sync. */
+	onStatusChange?: (status: ContentStatus) => void
+	/** Called when save state changes so editor chrome can show a real save action. */
+	onSaveStateChange?: (state: ContentSaveState) => void
+}
+
+export interface ContentSaveState {
+	saving: boolean
+	saveError: string | null
+	lastSavedAt: number | null
+	savedId: string | null
+}
+
+export interface ContentPreviewDraft {
+	id: string
+	type: ContentType
+	status: ContentStatus
+	title: string
+	slug: string
+	excerpt: string | null
+	byline: string | null
+	authorId: string | null
+	authorName: string | null
+	authorSlug: string | null
+	publishedAt: string | null
+	body: string | null
+	premium: boolean
+	heroImageUrl: string | null
+	channel: string | null
+}
+
+interface ExistingContentItem {
+	id?: string
+	type?: ContentType
+	status?: string
+	visibility?: string
+	slug?: string
+	title?: string
+	excerpt?: string | null
+	byline?: string | null
+	author_id?: string | null
+	author_name?: string | null
+	author_slug?: string | null
+	channel?: string | null
+	published_at?: number | null
+	hero_image_id?: string | null
+	hero_image_url?: string | null
+}
+
+interface ExistingContentPayload {
+	body_markdown?: string | null
+	body_html?: string | null
+	subtitle?: string | null
+	script?: string | null
+	video_id?: string | null
+	thumbnail_image_id?: string | null
+	thumbnail_image_url?: string | null
+	processing_source_url?: string | null
+	processing_source_kind?: string | null
+	transcript?: string | null
+	audio_r2_key?: string | null
+}
+
+interface ExistingContentResponse {
+	item?: ExistingContentItem
+	content?: ExistingContentPayload | null
+}
+
+interface FormState {
+	status: ContentStatus
+	title: string
+	dek: string
+	body: string
+	slug: string
+	byline: string | null
+	authorId: string | null
+	authorName: string | null
+	authorSlug: string | null
+	publishedAt: string | null
+	premium: boolean
+	channel: string | null
+	heroImageId: string
+	heroImageUrl: string | null
+	heroUploadStatus: 'idle' | 'uploading' | 'staged'
+	heroUploadError: string | null
+	videoUrl: string
+	videoSourceKind: string | null
+	videoId: string | null
+	thumbnailImageId: string
+	thumbnailImageUrl: string | null
+	thumbnailUploadStatus: 'idle' | 'uploading' | 'staged'
+	thumbnailUploadError: string | null
+	audioUrl: string
+	audioUploadStatus: 'idle' | 'uploading' | 'staged'
+	audioUploadError: string | null
+	videoUploadStatus: 'idle' | 'uploading' | 'staged'
+	videoUploadError: string | null
+	videoPipelineStatus: 'idle' | 'queueing' | 'queued'
+	videoPipelineError: string | null
+	/** The persisted doc id (may start as null for new docs). */
+	savedId: string | null
+	/** True while an autosave PATCH is in flight. */
+	saving: boolean
+	/** Error from last save attempt. */
+	saveError: string | null
+	/** Timestamp of last successful save. */
+	lastSavedAt: number | null
+	/** Whether the AI assist panel is open. */
+	aiOpen: boolean
+}
+
+function createEmptyFormState(docId: string | null): FormState {
+	return {
+		status: 'draft',
+		title: '',
+		dek: '',
+		body: '',
+		slug: '',
+		byline: null,
+		authorId: null,
+		authorName: null,
+		authorSlug: null,
+		publishedAt: null,
+		premium: false,
+		channel: null,
+		heroImageId: '',
+		heroImageUrl: null,
+		heroUploadStatus: 'idle',
+		heroUploadError: null,
+		videoUrl: '',
+		videoSourceKind: null,
+		videoId: null,
+		thumbnailImageId: '',
+		thumbnailImageUrl: null,
+		thumbnailUploadStatus: 'idle',
+		thumbnailUploadError: null,
+		audioUrl: '',
+		audioUploadStatus: 'idle',
+		audioUploadError: null,
+		videoUploadStatus: 'idle',
+		videoUploadError: null,
+		videoPipelineStatus: 'idle',
+		videoPipelineError: null,
+		savedId: docId,
+		saving: false,
+		saveError: null,
+		lastSavedAt: null,
+		aiOpen: false,
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function ContentForm({
+	docId,
+	contentType,
+	onDocCreated,
+	onTitleChange,
+	onDraftChange,
+	saveRequest = 0,
+	onStatusChange,
+	onSaveStateChange,
+}: ContentFormProps) {
+	const [form, setForm] = useState<FormState>(() => createEmptyFormState(docId))
+
+	// Autosave state (mutable refs, not React state — no re-render needed)
+	const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+	const savesSinceSnapshot = useRef(0)
+	const lastSnapshotAt = useRef(Date.now())
+	const queuedVideoSources = useRef<Set<string>>(new Set())
+	const lastHandledSaveRequest = useRef(saveRequest)
+	const latestForm = useRef(form)
+	latestForm.current = form
+
+	const publishDraft = useCallback(
+		(next: FormState) => {
+			onTitleChange?.(next.title)
+			onDraftChange?.(formToPreviewDraft(next, contentType))
+		},
+		[contentType, onDraftChange, onTitleChange],
+	)
+
+	const loadExistingContent = useCallback(async () => {
+		if (!docId) {
+			const next = createEmptyFormState(null)
+			setForm(next)
+			publishDraft(next)
+			return
+		}
+		try {
+			const res = await fetch(`/admin/api/content/${docId}`)
+			if (!res.ok) {
+				const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
+					error?: string
+				}
+				throw new Error(err.error ?? 'Could not load content')
+			}
+			const data = (await res.json()) as ExistingContentResponse
+			const next = contentResponseToFormState(data, contentType, docId)
+			setForm((prev) => ({
+				...next,
+				aiOpen: prev.aiOpen,
+			}))
+			onStatusChange?.(next.status)
+			publishDraft(next)
+		} catch (err) {
+			setForm((prev) => ({
+				...prev,
+				savedId: docId,
+				saveError: err instanceof Error ? err.message : 'Could not load content',
+			}))
+		}
+	}, [contentType, docId, onStatusChange, publishDraft])
+
+	// -- Word-count (derived from the body markdown) -------------------------
+	const wordCount = countWords(form.body)
+	const readTime = estimateReadTime(wordCount)
+
+	useEffect(() => {
+		void loadExistingContent()
+	}, [loadExistingContent])
+
+	// -- Autosave logic -------------------------------------------------------
+
+	const queueFoundryProcessing = useCallback(
+		async (id: string, draft: ContentDraftFields) => {
+			const source = foundryDispatchSourceForDraft(contentType, draft)
+			if (!source) return
+			const queueKey = `${contentType}:${id}:${source}`
+			if (queuedVideoSources.current.has(queueKey)) return
+
+			setForm((prev) => ({
+				...prev,
+				videoPipelineStatus: 'queueing',
+				videoPipelineError: null,
+			}))
+			try {
+				const res = await fetch(`/admin/api/content/${id}?action=dispatch-to-foundry`, {
+					method: 'POST',
+				})
+				if (!res.ok) {
+					const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
+						error?: string
+					}
+					throw new Error(err.error ?? 'Foundry dispatch failed')
+				}
+				queuedVideoSources.current.add(queueKey)
+				setForm((prev) => ({
+					...prev,
+					videoPipelineStatus: 'queued',
+					videoPipelineError: null,
+				}))
+			} catch (err) {
+				setForm((prev) => ({
+					...prev,
+					videoPipelineStatus: 'idle',
+					videoPipelineError: err instanceof Error ? err.message : String(err),
+				}))
+			}
+		},
+		[contentType],
+	)
+
+	const persist = useCallback(
+		async (currentForm: FormState) => {
+			const id = currentForm.savedId
+			const draft: ContentDraftFields = currentForm
+
+			if (id === null) {
+				if (!canCreateContentDraft(contentType, draft)) {
+					setForm((prev) => ({
+						...prev,
+						saveError: 'Add the required title and content before saving.',
+					}))
+					return
+				}
+				// First save — POST /content to create
+				try {
+					setForm((prev) => ({ ...prev, saving: true, saveError: null }))
+					const res = await fetch('/admin/api/content', {
+						method: 'POST',
+						headers: { 'content-type': 'application/json' },
+						body: JSON.stringify(buildContentCreatePayload(contentType, draft)),
+					})
+					if (!res.ok) {
+						const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
+							error?: string
+						}
+						setForm((prev) => ({
+							...prev,
+							saving: false,
+							saveError: err.error ?? 'Save failed',
+						}))
+						return
+					}
+					const created = (await res.json()) as { id: string }
+					setForm((prev) => ({
+						...prev,
+						saving: false,
+						savedId: created.id,
+						lastSavedAt: Date.now(),
+						saveError: null,
+					}))
+					onDocCreated?.(created.id)
+					void queueFoundryProcessing(created.id, draft)
+				} catch (err) {
+					setForm((prev) => ({
+						...prev,
+						saving: false,
+						saveError: String(err),
+					}))
+				}
+			} else {
+				// Subsequent saves — PATCH /content/:id
+				try {
+					setForm((prev) => ({ ...prev, saving: true, saveError: null }))
+					const res = await fetch(`/admin/api/content/${id}`, {
+						method: 'PATCH',
+						headers: { 'content-type': 'application/json' },
+						body: JSON.stringify(buildContentUpdatePayload(contentType, draft)),
+					})
+					if (!res.ok) {
+						const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
+							error?: string
+						}
+						setForm((prev) => ({
+							...prev,
+							saving: false,
+							saveError: err.error ?? 'Save failed',
+						}))
+						return
+					}
+
+					// Snapshot cadence check
+					const now = Date.now()
+					savesSinceSnapshot.current += 1
+					const snap = shouldSnapshot({
+						savesSinceSnapshot: savesSinceSnapshot.current,
+						lastSnapshotAt: lastSnapshotAt.current,
+						now,
+					})
+					if (snap) {
+						savesSinceSnapshot.current = 0
+						lastSnapshotAt.current = now
+						// Fire-and-forget the snapshot action; errors are non-fatal
+						void fetch(`/admin/api/content/${id}?action=snapshot`, { method: 'POST' })
+					}
+
+					setForm((prev) => ({
+						...prev,
+						saving: false,
+						lastSavedAt: now,
+						saveError: null,
+					}))
+					void queueFoundryProcessing(id, draft)
+				} catch (err) {
+					setForm((prev) => ({
+						...prev,
+						saving: false,
+						saveError: String(err),
+					}))
+				}
+			}
+		},
+		[contentType, onDocCreated, queueFoundryProcessing],
+	)
+
+	useEffect(() => {
+		if (saveRequest === lastHandledSaveRequest.current) return
+		lastHandledSaveRequest.current = saveRequest
+		if (debounceTimer.current) {
+			clearTimeout(debounceTimer.current)
+			debounceTimer.current = null
+		}
+		void persist(latestForm.current)
+	}, [persist, saveRequest])
+
+	useEffect(() => {
+		onSaveStateChange?.({
+			saving: form.saving,
+			saveError: form.saveError,
+			lastSavedAt: form.lastSavedAt,
+			savedId: form.savedId,
+		})
+	}, [form.lastSavedAt, form.saveError, form.savedId, form.saving, onSaveStateChange])
+
+	// Debounced save — fires after AUTOSAVE_DEBOUNCE_MS of inactivity
+	// biome-ignore lint/correctness/useExhaustiveDependencies: recovered live behavior; deps intentionally stable (adding them would re-create the debounced callback and change deployed behavior)
+	const scheduleAutosave = useCallback(
+		(nextForm: FormState) => {
+			if (debounceTimer.current) clearTimeout(debounceTimer.current)
+			debounceTimer.current = setTimeout(() => {
+				void persist(nextForm)
+			}, AUTOSAVE_DEBOUNCE_MS)
+		},
+		[persist, publishDraft],
+	)
+
+	// Flush autosave on unmount
+	useEffect(() => {
+		return () => {
+			if (debounceTimer.current) {
+				clearTimeout(debounceTimer.current)
+			}
+		}
+	}, [])
+
+	// -- Field change handlers -----------------------------------------------
+
+	function handleTitleChange(value: string) {
+		const next = { ...latestForm.current, title: value }
+		setForm(next)
+		publishDraft(next)
+		scheduleAutosave(next)
+	}
+
+	function handleDekChange(value: string) {
+		const next = { ...latestForm.current, dek: value }
+		setForm(next)
+		publishDraft(next)
+		scheduleAutosave(next)
+	}
+
+	function handleBodyChange(md: string) {
+		const next = { ...latestForm.current, body: md }
+		setForm(next)
+		publishDraft(next)
+		scheduleAutosave(next)
+	}
+
+	function handleVideoUrlChange(value: string) {
+		const next = {
+			...latestForm.current,
+			videoUrl: value,
+			videoSourceKind: null,
+			videoId: null,
+			videoPipelineStatus: 'idle' as const,
+			videoPipelineError: null,
+		}
+		setForm(next)
+		publishDraft(next)
+		scheduleAutosave(next)
+	}
+
+	function handleAudioUrlChange(value: string) {
+		const next = { ...latestForm.current, audioUrl: value }
+		setForm(next)
+		publishDraft(next)
+		scheduleAutosave(next)
+	}
+
+	function handleHeroImageIdChange(value: string) {
+		const id = value.trim()
+		const next = {
+			...latestForm.current,
+			heroImageId: value,
+			heroImageUrl: id ? mediaUrlFromId(id) : null,
+		}
+		setForm(next)
+		publishDraft(next)
+		scheduleAutosave(next)
+	}
+
+	function handleThumbnailImageIdChange(value: string) {
+		const id = value.trim()
+		const next = {
+			...latestForm.current,
+			thumbnailImageId: value,
+			thumbnailImageUrl: id ? mediaUrlFromId(id) : null,
+		}
+		setForm(next)
+		publishDraft(next)
+		scheduleAutosave(next)
+	}
+
+	const handleEditorImageUpload = useCallback(
+		(file: File) => uploadEditorImage(file, latestForm.current.title || 'inline-image'),
+		[],
+	)
+
+	const handleVideoFileUpload = useCallback(
+		async (file: File) => {
+			const baseSlug = slugifyTitle(latestForm.current.title || file.name || 'video')
+			setForm((prev) => ({
+				...prev,
+				videoUploadStatus: 'uploading',
+				videoUploadError: null,
+				videoPipelineError: null,
+			}))
+			try {
+				const uploaded = await uploadMediaAsset({
+					kind: 'video',
+					file,
+					slug: baseSlug || undefined,
+				})
+				if (!uploaded.url) throw new Error('Video upload did not return a source URL')
+				const next = {
+					...latestForm.current,
+					videoUrl: uploaded.url,
+					videoSourceKind: uploaded.sourceKind ?? 'http_url',
+					videoId: uploaded.videoId ?? baseSlug,
+					videoUploadStatus: 'staged' as const,
+					videoUploadError: null,
+					videoPipelineStatus: 'idle' as const,
+					videoPipelineError: null,
+				}
+				setForm(next)
+				publishDraft(next)
+				await persist(next)
+			} catch (err) {
+				setForm((prev) => ({
+					...prev,
+					videoUploadStatus: 'idle',
+					videoUploadError: err instanceof Error ? err.message : String(err),
+				}))
+			}
+		},
+		[persist, publishDraft],
+	)
+
+	const handleHeroImageUpload = useCallback(
+		async (file: File) => {
+			const baseSlug = slugifyTitle(latestForm.current.title || file.name || 'hero-image')
+			setForm((prev) => ({
+				...prev,
+				heroUploadStatus: 'uploading',
+				heroUploadError: null,
+			}))
+			try {
+				const uploaded = await uploadMediaAsset({
+					kind: 'image',
+					file,
+					slug: baseSlug || undefined,
+				})
+				const next = {
+					...latestForm.current,
+					heroImageId: uploaded.id,
+					heroImageUrl: uploaded.url,
+					heroUploadStatus: 'staged' as const,
+					heroUploadError: null,
+				}
+				setForm(next)
+				publishDraft(next)
+				await persist(next)
+			} catch (err) {
+				setForm((prev) => ({
+					...prev,
+					heroUploadStatus: 'idle',
+					heroUploadError: err instanceof Error ? err.message : String(err),
+				}))
+			}
+		},
+		[persist, publishDraft],
+	)
+
+	const handleThumbnailImageUpload = useCallback(
+		async (file: File) => {
+			const baseSlug = slugifyTitle(latestForm.current.title || file.name || 'video-poster')
+			setForm((prev) => ({
+				...prev,
+				thumbnailUploadStatus: 'uploading',
+				thumbnailUploadError: null,
+			}))
+			try {
+				const uploaded = await uploadMediaAsset({
+					kind: 'image',
+					file,
+					slug: baseSlug || undefined,
+				})
+				const next = {
+					...latestForm.current,
+					thumbnailImageId: uploaded.id,
+					thumbnailImageUrl: uploaded.url,
+					thumbnailUploadStatus: 'staged' as const,
+					thumbnailUploadError: null,
+				}
+				setForm(next)
+				publishDraft(next)
+				await persist(next)
+			} catch (err) {
+				setForm((prev) => ({
+					...prev,
+					thumbnailUploadStatus: 'idle',
+					thumbnailUploadError: err instanceof Error ? err.message : String(err),
+				}))
+			}
+		},
+		[persist, publishDraft],
+	)
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: recovered live behavior; deps intentionally stable (adding them would re-create the callback and change deployed behavior)
+	const handleAudioFileUpload = useCallback(
+		async (file: File) => {
+			const baseSlug = slugifyTitle(latestForm.current.title || file.name || 'podcast')
+			setForm((prev) => ({
+				...prev,
+				audioUploadStatus: 'uploading',
+				audioUploadError: null,
+			}))
+			try {
+				const uploaded = await uploadMediaAsset({
+					kind: 'podcast',
+					file,
+					slug: baseSlug || undefined,
+				})
+				const next = {
+					...latestForm.current,
+					audioUrl: uploaded.id,
+					audioUploadStatus: 'staged' as const,
+					audioUploadError: null,
+				}
+				setForm(next)
+				publishDraft(next)
+				await persist(next)
+			} catch (err) {
+				setForm((prev) => ({
+					...prev,
+					audioUploadStatus: 'idle',
+					audioUploadError: err instanceof Error ? err.message : String(err),
+				}))
+			}
+		},
+		[persist],
+	)
+
+	// -- Autosaved indicator --------------------------------------------------
+
+	const autosaveLabel = form.saving
+		? 'Saving…'
+		: form.saveError
+			? `Error: ${form.saveError}`
+			: form.lastSavedAt
+				? `Saved ${timeSince(form.lastSavedAt)}`
+				: 'Unsaved'
+
+	// -------------------------------------------------------------------------
+	// Render
+	// -------------------------------------------------------------------------
+
+	function handleAiToggle() {
+		setForm((prev) => ({ ...prev, aiOpen: !prev.aiOpen }))
+	}
+
+	return (
+		<div style={formWrap}>
+			{/* Autosave indicator + AI assist toggle */}
+			<div style={saveIndicator}>
+				<span
+					className="mono"
+					style={{
+						color: form.saveError ? 'var(--red)' : 'var(--ink-faint)',
+						fontSize: 11.5,
+					}}
+				>
+					{autosaveLabel}
+				</span>
+				{/* AI assist toggle — disabled until the doc has a saved id */}
+				<button
+					type="button"
+					className="btn sm"
+					onClick={handleAiToggle}
+					disabled={form.savedId === null}
+					title={
+						form.savedId === null
+							? 'Save the document first to enable AI assist'
+							: form.aiOpen
+								? 'Close AI assist'
+								: 'Open AI assist'
+					}
+					style={{
+						borderColor: form.aiOpen ? 'var(--accent)' : 'var(--field-border)',
+						color: form.aiOpen ? 'var(--accent)' : 'var(--ink)',
+						opacity: form.savedId === null ? 0.45 : 1,
+					}}
+					aria-pressed={form.aiOpen}
+					aria-label="AI assist"
+				>
+					<Icon name="sparkle" size={15} />
+					AI assist
+				</button>
+			</div>
+
+			{/* AI assist panel — shown when toggle is on and doc is saved */}
+			{form.aiOpen && form.savedId !== null && <AiAssistPanel docId={form.savedId} />}
+
+			{/* Title */}
+			<div style={fieldGroup}>
+				<input
+					type="text"
+					placeholder="Title"
+					value={form.title}
+					onChange={(e) => handleTitleChange(e.currentTarget.value)}
+					style={titleInput}
+					aria-label="Content title"
+				/>
+			</div>
+
+			{/* Summary / subheadline */}
+			<div style={fieldGroup}>
+				<textarea
+					placeholder="Add a short summary or subheadline (optional)…"
+					value={form.dek}
+					onChange={(e) => handleDekChange(e.currentTarget.value)}
+					rows={2}
+					style={dekInput}
+					aria-label="Short summary or subheadline"
+				/>
+			</div>
+
+			{/* Signature masthead hairline between the standfirst and the body */}
+			<hr className="masthead-rule" style={{ margin: '6px 0 20px' }} />
+
+			{/* Type-specific body block */}
+			<div style={fieldGroup}>
+				{contentType === 'video' ? (
+					<div style={mediaBlockStack}>
+						<VideoBlock
+							videoUrl={form.videoUrl}
+							onVideoUrlChange={handleVideoUrlChange}
+							onVideoFileUpload={handleVideoFileUpload}
+							uploadStatus={form.videoUploadStatus}
+							uploadError={form.videoUploadError}
+							pipelineStatus={form.videoPipelineStatus}
+							pipelineError={form.videoPipelineError}
+						/>
+						<ImageAssetBlock
+							title="Video Poster Image"
+							description="Shown on the video page, video index, social previews, and locked-player preview."
+							uploadLabel="Upload Poster Image"
+							idLabel="Poster Image ID"
+							idHelp="Use this only when the poster image already exists in R2."
+							emptyText="No poster image attached"
+							successText="Poster image uploaded."
+							imageId={form.thumbnailImageId}
+							previewUrl={form.thumbnailImageUrl}
+							uploadStatus={form.thumbnailUploadStatus}
+							uploadError={form.thumbnailUploadError}
+							onImageIdChange={handleThumbnailImageIdChange}
+							onFileUpload={handleThumbnailImageUpload}
+						/>
+					</div>
+				) : contentType === 'podcast' ? (
+					<div style={mediaBlockStack}>
+						<AudioBlock
+							audioUrl={form.audioUrl}
+							onAudioUrlChange={handleAudioUrlChange}
+							onAudioFileUpload={handleAudioFileUpload}
+							uploadStatus={form.audioUploadStatus}
+							uploadError={form.audioUploadError}
+							pipelineStatus={form.videoPipelineStatus}
+							pipelineError={form.videoPipelineError}
+						/>
+						<ImageAssetBlock
+							title="Podcast Hero Image"
+							description="Upload the episode artwork or hero image here. This fills the Hero Image ID automatically."
+							uploadLabel="Upload Podcast Image"
+							idLabel="Hero Image ID"
+							idHelp="Use this only when the podcast image already exists in R2."
+							emptyText="No podcast image attached"
+							successText="Podcast image uploaded."
+							imageId={form.heroImageId}
+							previewUrl={form.heroImageUrl}
+							uploadStatus={form.heroUploadStatus}
+							uploadError={form.heroUploadError}
+							onImageIdChange={handleHeroImageIdChange}
+							onFileUpload={handleHeroImageUpload}
+						/>
+					</div>
+				) : (
+					/* article | newsletter */
+					<>
+						{contentType === 'article' && (
+							<div style={{ marginBottom: 14 }}>
+								<ImageAssetBlock
+									title="Article Hero Image"
+									description="Upload the downloaded hero image here. This fills the Hero Image ID automatically."
+									uploadLabel="Upload Hero Image"
+									idLabel="Hero Image ID"
+									idHelp="Use this only when the hero image already exists in R2."
+									emptyText="No hero image attached"
+									successText="Hero image uploaded."
+									imageId={form.heroImageId}
+									previewUrl={form.heroImageUrl}
+									uploadStatus={form.heroUploadStatus}
+									uploadError={form.heroUploadError}
+									onImageIdChange={handleHeroImageIdChange}
+									onFileUpload={handleHeroImageUpload}
+								/>
+							</div>
+						)}
+						<Rte
+							value={form.body}
+							onChange={handleBodyChange}
+							onImageUpload={handleEditorImageUpload}
+						/>
+					</>
+				)}
+			</div>
+
+			{/* Footer: word count + read time (only for article/newsletter) */}
+			{(contentType === 'article' || contentType === 'newsletter') && (
+				<div style={footer}>
+					<Icon name="edit" size={12} style={{ color: 'var(--ink-faint)' }} />
+					<span>
+						{wordCount.toLocaleString()} {wordCount === 1 ? 'word' : 'words'}
+					</span>
+					<span style={{ color: 'var(--ink-faint)' }}>·</span>
+					<span>{readTime} min read</span>
+				</div>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components — media blocks
+// ---------------------------------------------------------------------------
+
+function ImageAssetBlock({
+	title,
+	description,
+	uploadLabel,
+	idLabel,
+	idHelp,
+	emptyText,
+	successText,
+	imageId,
+	previewUrl,
+	uploadStatus,
+	uploadError,
+	onImageIdChange,
+	onFileUpload,
+}: {
+	title: string
+	description: string
+	uploadLabel: string
+	idLabel: string
+	idHelp: string
+	emptyText: string
+	successText: string
+	imageId: string
+	previewUrl: string | null
+	uploadStatus: 'idle' | 'uploading' | 'staged'
+	uploadError: string | null
+	onImageIdChange: (imageId: string) => void
+	onFileUpload: (file: File) => void | Promise<void>
+}) {
+	const inputId = `${title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}-id`
+	const statusText =
+		uploadStatus === 'uploading'
+			? 'Uploading image…'
+			: uploadStatus === 'staged'
+				? successText
+				: null
+
+	return (
+		<div style={mediaBlock}>
+			<div style={mediaBlockHeader}>
+				<Icon name="image" size={14} style={{ color: 'var(--ink-muted)' }} />
+				<span style={{ fontSize: 12, fontWeight: 500, color: 'var(--ink-soft)' }}>{title}</span>
+			</div>
+
+			<p style={assetHelp}>{description}</p>
+
+			<div style={assetPreview}>
+				{previewUrl ? (
+					<img src={previewUrl} alt={`${title} preview`} style={assetPreviewImage} />
+				) : imageId ? (
+					<span style={{ fontSize: 11, color: 'var(--ink-muted)', wordBreak: 'break-all' }}>
+						{imageId}
+					</span>
+				) : (
+					<span style={{ fontSize: 12, color: 'var(--ink-faint)', fontStyle: 'italic' }}>
+						{emptyText}
+					</span>
+				)}
+			</div>
+
+			<div style={videoActions}>
+				<label className="btn sm" style={uploadButton}>
+					<Icon name="upload" size={14} />
+					{uploadStatus === 'uploading' ? 'Uploading…' : uploadLabel}
+					<input
+						type="file"
+						accept="image/*,.jpg,.jpeg,.png,.webp"
+						disabled={uploadStatus === 'uploading'}
+						onChange={(event) => {
+							const file = event.currentTarget.files?.[0]
+							event.currentTarget.value = ''
+							if (file) void onFileUpload(file)
+						}}
+						style={hiddenFileInput}
+						aria-label={uploadLabel}
+					/>
+				</label>
+			</div>
+
+			<label htmlFor={inputId} style={assetLabel}>
+				{idLabel}
+			</label>
+			<input
+				id={inputId}
+				type="text"
+				placeholder="images/articles/example.jpg"
+				value={imageId}
+				onChange={(e) => onImageIdChange(e.currentTarget.value)}
+				style={urlInput}
+				aria-label={idLabel}
+			/>
+			<div style={assetHelp}>{idHelp}</div>
+
+			{statusText && <div style={videoStatusText}>{statusText}</div>}
+			{uploadError && <div style={videoErrorText}>{uploadError}</div>}
+		</div>
+	)
+}
+
+function VideoBlock({
+	videoUrl,
+	onVideoUrlChange,
+	onVideoFileUpload,
+	uploadStatus,
+	uploadError,
+	pipelineStatus,
+	pipelineError,
+}: {
+	videoUrl: string
+	onVideoUrlChange: (url: string) => void
+	onVideoFileUpload: (file: File) => void | Promise<void>
+	uploadStatus: 'idle' | 'uploading' | 'staged'
+	uploadError: string | null
+	pipelineStatus: 'idle' | 'queueing' | 'queued'
+	pipelineError: string | null
+}) {
+	const statusText =
+		pipelineStatus === 'queued'
+			? 'Queued. Most videos finish in 20-45 minutes; long files can take up to 90.'
+			: pipelineStatus === 'queueing'
+				? 'Queueing processing…'
+				: uploadStatus === 'uploading'
+					? 'Uploading source…'
+					: uploadStatus === 'staged'
+						? 'Source uploaded. Saving queues processing.'
+						: null
+
+	return (
+		<div style={mediaBlock}>
+			<div style={mediaBlockHeader}>
+				<Icon name="video" size={14} style={{ color: 'var(--ink-muted)' }} />
+				<span style={{ fontSize: 12, fontWeight: 500, color: 'var(--ink-soft)' }}>Video</span>
+			</div>
+
+			<div
+				style={{
+					aspectRatio: '16/9',
+					background: 'var(--hover)',
+					borderRadius: 6,
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					marginBottom: 12,
+				}}
+			>
+				{videoUrl ? (
+					<span style={{ fontSize: 11, color: 'var(--ink-muted)', wordBreak: 'break-all' }}>
+						{videoUrl}
+					</span>
+				) : (
+					<span style={{ fontSize: 12, color: 'var(--ink-faint)', fontStyle: 'italic' }}>
+						No video attached
+					</span>
+				)}
+			</div>
+
+			<input
+				type="url"
+				placeholder="Video source URL or R2 key…"
+				value={videoUrl}
+				onChange={(e) => onVideoUrlChange(e.currentTarget.value)}
+				style={urlInput}
+				aria-label="Video source URL"
+			/>
+
+			<div style={videoActions}>
+				<label className="btn sm" style={uploadButton}>
+					<Icon name="upload" size={14} />
+					{uploadStatus === 'uploading' ? 'Uploading…' : 'Upload source'}
+					<input
+						type="file"
+						accept="video/*,.mp4,.mov,.m4v,.webm"
+						disabled={uploadStatus === 'uploading'}
+						onChange={(event) => {
+							const file = event.currentTarget.files?.[0]
+							event.currentTarget.value = ''
+							if (file) void onVideoFileUpload(file)
+						}}
+						style={hiddenFileInput}
+						aria-label="Upload video source"
+					/>
+				</label>
+			</div>
+
+			{statusText && <div style={videoStatusText}>{statusText}</div>}
+			{(uploadError || pipelineError) && (
+				<div style={videoErrorText}>{uploadError || pipelineError}</div>
+			)}
+
+			<div style={{ marginTop: 6, fontSize: 11, color: 'var(--ink-faint)' }}>
+				Upload a source file or paste a public source URL; saving queues the Foundry pipeline.
+			</div>
+		</div>
+	)
+}
+
+function AudioBlock({
+	audioUrl,
+	onAudioUrlChange,
+	onAudioFileUpload,
+	uploadStatus,
+	uploadError,
+	pipelineStatus,
+	pipelineError,
+}: {
+	audioUrl: string
+	onAudioUrlChange: (url: string) => void
+	onAudioFileUpload: (file: File) => void | Promise<void>
+	uploadStatus: 'idle' | 'uploading' | 'staged'
+	uploadError: string | null
+	pipelineStatus: 'idle' | 'queueing' | 'queued'
+	pipelineError: string | null
+}) {
+	const statusText =
+		pipelineStatus === 'queued'
+			? 'Queued for transcription. Most episodes finish in 10-30 minutes; long files can take up to 60.'
+			: pipelineStatus === 'queueing'
+				? 'Queueing transcription...'
+				: uploadStatus === 'uploading'
+					? PODCAST_UPLOAD_HELP
+					: uploadStatus === 'staged'
+						? 'Audio uploaded. Save or publish to start transcription and episode prep.'
+						: null
+
+	return (
+		<div style={mediaBlock}>
+			<div style={mediaBlockHeader}>
+				<Icon name="mic" size={14} style={{ color: 'var(--ink-muted)' }} />
+				<span style={{ fontSize: 12, fontWeight: 500, color: 'var(--ink-soft)' }}>
+					Podcast Audio File
+				</span>
+			</div>
+
+			<p style={assetHelp}>
+				Upload the downloaded MP3, WAV, or M4A file. The Audio R2 Key fills automatically after
+				upload.
+			</p>
+			<p style={assetHelp}>{PODCAST_UPLOAD_HELP}</p>
+			<p style={assetHelp}>
+				{PODCAST_PIPELINE_HELP} {PODCAST_PIPELINE_ESTIMATE}
+			</p>
+
+			<div
+				style={{
+					height: 56,
+					background: 'var(--hover)',
+					borderRadius: 6,
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					marginBottom: 12,
+				}}
+			>
+				{audioUrl ? (
+					<span style={{ fontSize: 11, color: 'var(--ink-muted)', wordBreak: 'break-all' }}>
+						{audioUrl}
+					</span>
+				) : (
+					<span style={{ fontSize: 12, color: 'var(--ink-faint)', fontStyle: 'italic' }}>
+						No audio attached
+					</span>
+				)}
+			</div>
+
+			<div style={videoActions}>
+				<label className="btn sm" style={uploadButton}>
+					<Icon name="upload" size={14} />
+					{uploadStatus === 'uploading' ? 'Uploading…' : 'Upload Podcast Audio File'}
+					<input
+						type="file"
+						accept="audio/*,.mp3,.m4a,.m4b,.aac,.wav,.ogg,.oga,.opus,.flac"
+						disabled={uploadStatus === 'uploading'}
+						onChange={(event) => {
+							const file = event.currentTarget.files?.[0]
+							event.currentTarget.value = ''
+							if (file) void onAudioFileUpload(file)
+						}}
+						style={hiddenFileInput}
+						aria-label="Upload podcast audio file"
+					/>
+				</label>
+			</div>
+
+			<label htmlFor="podcast-audio-r2-key" style={assetLabel}>
+				Audio R2 Key (filled after upload)
+			</label>
+			<input
+				id="podcast-audio-r2-key"
+				type="text"
+				placeholder="audio/example-episode.mp3"
+				value={audioUrl}
+				onChange={(e) => onAudioUrlChange(e.currentTarget.value)}
+				style={urlInput}
+				aria-label="Audio R2 Key"
+			/>
+
+			<div style={assetHelp}>Only paste a key manually if the audio already exists in R2.</div>
+
+			{statusText && <div style={videoStatusText}>{statusText}</div>}
+			{(uploadError || pipelineError) && (
+				<div style={videoErrorText}>{uploadError || pipelineError}</div>
+			)}
+		</div>
+	)
+}
+
+const PODCAST_UPLOAD_HELP =
+	'Large audio files can take a few minutes to upload; keep this tab open until the Audio R2 Key appears.'
+
+const PODCAST_PIPELINE_HELP =
+	'After upload, save or publish sends the episode through the pipeline for transcription and episode prep.'
+
+const PODCAST_PIPELINE_ESTIMATE =
+	'Most episodes finish in 10-30 minutes; long files can take up to 60.'
+
+function contentResponseToFormState(
+	data: ExistingContentResponse,
+	contentType: ContentType,
+	docId: string,
+): FormState {
+	const item = data.item ?? {}
+	const content = data.content ?? {}
+	const heroImageId = toStringValue(item.hero_image_id)
+	const thumbnailImageId = toStringValue(content.thumbnail_image_id)
+	const heroImageUrl = toStringValue(item.hero_image_url)
+	const thumbnailImageUrl = toStringValue(content.thumbnail_image_url)
+	const next = createEmptyFormState(docId)
+
+	next.status = toContentStatus(item.status)
+	next.title = toStringValue(item.title)
+	next.dek = toStringValue(item.excerpt) || toStringValue(content.subtitle)
+	next.slug = toStringValue(item.slug)
+	next.byline = toNullableString(item.byline)
+	next.authorId = toNullableString(item.author_id)
+	next.authorName = toNullableString(item.author_name)
+	next.authorSlug = toNullableString(item.author_slug)
+	next.publishedAt = unixSecondsToIso(item.published_at)
+	next.premium = item.visibility === 'premium'
+	next.channel = toNullableString(item.channel)
+	next.heroImageId = heroImageId
+	next.heroImageUrl = heroImageUrl || (heroImageId ? mediaUrlFromId(heroImageId) : null)
+
+	if (contentType === 'article' || contentType === 'newsletter') {
+		next.body = toStringValue(content.body_markdown) || toStringValue(content.body_html)
+	}
+
+	if (contentType === 'video') {
+		next.body = toStringValue(content.script)
+		next.videoUrl = toStringValue(content.processing_source_url)
+		next.videoSourceKind = toNullableString(content.processing_source_kind)
+		next.videoId = toNullableString(content.video_id)
+		next.thumbnailImageId = thumbnailImageId
+		next.thumbnailImageUrl =
+			thumbnailImageUrl || (thumbnailImageId ? mediaUrlFromId(thumbnailImageId) : null)
+	}
+
+	if (contentType === 'podcast') {
+		next.body = toStringValue(content.transcript)
+		next.audioUrl = toStringValue(content.audio_r2_key)
+	}
+
+	return next
+}
+
+function formToPreviewDraft(form: FormState, contentType: ContentType): ContentPreviewDraft {
+	return {
+		id: form.savedId ?? 'draft',
+		type: contentType,
+		status: form.status,
+		title: form.title,
+		slug: form.slug,
+		excerpt: form.dek || null,
+		byline: form.byline,
+		authorId: form.authorId,
+		authorName: form.authorName,
+		authorSlug: form.authorSlug,
+		publishedAt: form.publishedAt,
+		body: form.body || null,
+		premium: form.premium,
+		heroImageUrl: form.heroImageUrl,
+		channel: form.channel,
+	}
+}
+
+function mediaUrlFromId(id: string): string {
+	return `/admin/api/media/${encodeURIComponent(id)}`
+}
+
+function toStringValue(value: string | null | undefined): string {
+	return typeof value === 'string' ? value : ''
+}
+
+function toNullableString(value: string | null | undefined): string | null {
+	const normalized = toStringValue(value).trim()
+	return normalized ? normalized : null
+}
+
+function toContentStatus(value: string | null | undefined): ContentStatus {
+	const allowed: ContentStatus[] = ['draft', 'review', 'scheduled', 'published', 'archived']
+	return allowed.includes(value as ContentStatus) ? (value as ContentStatus) : 'draft'
+}
+
+function unixSecondsToIso(value: number | null | undefined): string | null {
+	if (typeof value !== 'number' || !Number.isFinite(value)) return null
+	return new Date(value * 1000).toISOString()
+}
+
+// ---------------------------------------------------------------------------
+// Relative-time helper
+// ---------------------------------------------------------------------------
+
+function timeSince(ts: number): string {
+	const diff = Date.now() - ts
+	if (diff < 10_000) return 'just now'
+	if (diff < 60_000) return `${Math.floor(diff / 1000)}s ago`
+	if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+	return `${Math.floor(diff / 3_600_000)}h ago`
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const formWrap: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	gap: 0,
+	padding: '16px 24px',
+	flex: 1,
+	overflowY: 'auto',
+}
+
+const saveIndicator: React.CSSProperties = {
+	display: 'flex',
+	justifyContent: 'flex-end',
+	alignItems: 'center',
+	gap: 8,
+	marginBottom: 4,
+	minHeight: 16,
+}
+
+const fieldGroup: React.CSSProperties = {
+	marginBottom: 14,
+}
+
+const titleInput: React.CSSProperties = {
+	width: '100%',
+	border: 0,
+	background: 'transparent',
+	fontFamily: 'var(--serif)',
+	fontWeight: 600,
+	fontSize: 36,
+	letterSpacing: '-0.025em',
+	lineHeight: 1.08,
+	color: 'var(--ink)',
+	padding: 0,
+	outline: 'none',
+}
+
+const dekInput: React.CSSProperties = {
+	width: '100%',
+	border: 0,
+	background: 'transparent',
+	fontFamily: 'var(--serif)',
+	fontSize: 19,
+	lineHeight: 1.5,
+	color: 'var(--ink-soft)',
+	padding: 0,
+	outline: 'none',
+	resize: 'none',
+}
+
+const footer: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 16,
+	paddingTop: 12,
+	fontFamily: 'var(--mono)',
+	fontSize: 11.5,
+	color: 'var(--ink-muted)',
+	borderTop: '1px solid var(--border-soft)',
+}
+
+const mediaBlockStack: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	gap: 14,
+}
+
+const mediaBlock: React.CSSProperties = {
+	border: '1px solid var(--field-border)',
+	borderRadius: 8,
+	padding: 14,
+	background: 'var(--field)',
+}
+
+const mediaBlockHeader: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 6,
+	marginBottom: 10,
+}
+
+const assetPreview: React.CSSProperties = {
+	height: 126,
+	background: 'var(--hover)',
+	borderRadius: 6,
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	marginBottom: 12,
+	overflow: 'hidden',
+}
+
+const assetPreviewImage: React.CSSProperties = {
+	width: '100%',
+	height: '100%',
+	objectFit: 'cover',
+	display: 'block',
+}
+
+const assetLabel: React.CSSProperties = {
+	display: 'block',
+	marginTop: 12,
+	marginBottom: 6,
+	fontSize: 11,
+	fontWeight: 600,
+	color: 'var(--ink-soft)',
+}
+
+const assetHelp: React.CSSProperties = {
+	margin: '6px 0 10px',
+	fontSize: 11,
+	lineHeight: 1.45,
+	color: 'var(--ink-faint)',
+}
+
+const urlInput: React.CSSProperties = {
+	width: '100%',
+	height: 32,
+	padding: '0 10px',
+	border: '1px solid var(--field-border)',
+	borderRadius: 6,
+	background: 'var(--bg)',
+	color: 'var(--ink)',
+	fontSize: 12,
+	outline: 'none',
+}
+
+const videoActions: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 8,
+	marginTop: 10,
+}
+
+const uploadButton: React.CSSProperties = {
+	position: 'relative',
+	overflow: 'hidden',
+	cursor: 'pointer',
+}
+
+const hiddenFileInput: React.CSSProperties = {
+	position: 'absolute',
+	inset: 0,
+	opacity: 0,
+	cursor: 'pointer',
+}
+
+const videoStatusText: React.CSSProperties = {
+	marginTop: 8,
+	fontSize: 11,
+	lineHeight: 1.4,
+	color: 'var(--ink-muted)',
+}
+
+const videoErrorText: React.CSSProperties = {
+	marginTop: 8,
+	fontSize: 11,
+	lineHeight: 1.4,
+	color: 'var(--red)',
+}
+
+// Re-export for callers that need the markdown body value from the form
+// (EditorScreen uses this to feed the live-preview pane).
+export { docToMarkdown }