@growth-labs/cms 0.1.0

package/dist/ui/editor/ContentForm.js

@@ -0,0 +1,821 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// 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 { 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, canCreateContentDraft, foundryDispatchSourceForDraft, slugifyTitle, } from './content-payload.js';
+import { uploadEditorImage } from './editor-media-upload.js';
+import { Rte } from './Rte.js';
+import { docToMarkdown } from './serialize.js';
+function createEmptyFormState(docId) {
+    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, }) {
+    const [form, setForm] = useState(() => createEmptyFormState(docId));
+    // Autosave state (mutable refs, not React state — no re-render needed)
+    const debounceTimer = useRef(null);
+    const savesSinceSnapshot = useRef(0);
+    const lastSnapshotAt = useRef(Date.now());
+    const queuedVideoSources = useRef(new Set());
+    const lastHandledSaveRequest = useRef(saveRequest);
+    const latestForm = useRef(form);
+    latestForm.current = form;
+    const publishDraft = useCallback((next) => {
+        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 })));
+                throw new Error(err.error ?? 'Could not load content');
+            }
+            const data = (await res.json());
+            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, draft) => {
+        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 })));
+                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) => {
+        const id = currentForm.savedId;
+        const draft = 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 })));
+                    setForm((prev) => ({
+                        ...prev,
+                        saving: false,
+                        saveError: err.error ?? 'Save failed',
+                    }));
+                    return;
+                }
+                const created = (await res.json());
+                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 })));
+                    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) => {
+        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) {
+        const next = { ...latestForm.current, title: value };
+        setForm(next);
+        publishDraft(next);
+        scheduleAutosave(next);
+    }
+    function handleDekChange(value) {
+        const next = { ...latestForm.current, dek: value };
+        setForm(next);
+        publishDraft(next);
+        scheduleAutosave(next);
+    }
+    function handleBodyChange(md) {
+        const next = { ...latestForm.current, body: md };
+        setForm(next);
+        publishDraft(next);
+        scheduleAutosave(next);
+    }
+    function handleVideoUrlChange(value) {
+        const next = {
+            ...latestForm.current,
+            videoUrl: value,
+            videoSourceKind: null,
+            videoId: null,
+            videoPipelineStatus: 'idle',
+            videoPipelineError: null,
+        };
+        setForm(next);
+        publishDraft(next);
+        scheduleAutosave(next);
+    }
+    function handleAudioUrlChange(value) {
+        const next = { ...latestForm.current, audioUrl: value };
+        setForm(next);
+        publishDraft(next);
+        scheduleAutosave(next);
+    }
+    function handleHeroImageIdChange(value) {
+        const id = value.trim();
+        const next = {
+            ...latestForm.current,
+            heroImageId: value,
+            heroImageUrl: id ? mediaUrlFromId(id) : null,
+        };
+        setForm(next);
+        publishDraft(next);
+        scheduleAutosave(next);
+    }
+    function handleThumbnailImageIdChange(value) {
+        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) => uploadEditorImage(file, latestForm.current.title || 'inline-image'), []);
+    const handleVideoFileUpload = useCallback(async (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',
+                videoUploadError: null,
+                videoPipelineStatus: 'idle',
+                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) => {
+        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',
+                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) => {
+        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',
+                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) => {
+        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',
+                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 (_jsxs("div", { style: formWrap, children: [_jsxs("div", { style: saveIndicator, children: [_jsx("span", { className: "mono", style: {
+                            color: form.saveError ? 'var(--red)' : 'var(--ink-faint)',
+                            fontSize: 11.5,
+                        }, children: autosaveLabel }), _jsxs("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", children: [_jsx(Icon, { name: "sparkle", size: 15 }), "AI assist"] })] }), form.aiOpen && form.savedId !== null && _jsx(AiAssistPanel, { docId: form.savedId }), _jsx("div", { style: fieldGroup, children: _jsx("input", { type: "text", placeholder: "Title", value: form.title, onChange: (e) => handleTitleChange(e.currentTarget.value), style: titleInput, "aria-label": "Content title" }) }), _jsx("div", { style: fieldGroup, children: _jsx("textarea", { placeholder: "Add a short summary or subheadline (optional)\u2026", value: form.dek, onChange: (e) => handleDekChange(e.currentTarget.value), rows: 2, style: dekInput, "aria-label": "Short summary or subheadline" }) }), _jsx("hr", { className: "masthead-rule", style: { margin: '6px 0 20px' } }), _jsx("div", { style: fieldGroup, children: contentType === 'video' ? (_jsxs("div", { style: mediaBlockStack, children: [_jsx(VideoBlock, { videoUrl: form.videoUrl, onVideoUrlChange: handleVideoUrlChange, onVideoFileUpload: handleVideoFileUpload, uploadStatus: form.videoUploadStatus, uploadError: form.videoUploadError, pipelineStatus: form.videoPipelineStatus, pipelineError: form.videoPipelineError }), _jsx(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 })] })) : contentType === 'podcast' ? (_jsxs("div", { style: mediaBlockStack, children: [_jsx(AudioBlock, { audioUrl: form.audioUrl, onAudioUrlChange: handleAudioUrlChange, onAudioFileUpload: handleAudioFileUpload, uploadStatus: form.audioUploadStatus, uploadError: form.audioUploadError, pipelineStatus: form.videoPipelineStatus, pipelineError: form.videoPipelineError }), _jsx(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 })] })) : (
+                /* article | newsletter */
+                _jsxs(_Fragment, { children: [contentType === 'article' && (_jsx("div", { style: { marginBottom: 14 }, children: _jsx(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 }) })), _jsx(Rte, { value: form.body, onChange: handleBodyChange, onImageUpload: handleEditorImageUpload })] })) }), (contentType === 'article' || contentType === 'newsletter') && (_jsxs("div", { style: footer, children: [_jsx(Icon, { name: "edit", size: 12, style: { color: 'var(--ink-faint)' } }), _jsxs("span", { children: [wordCount.toLocaleString(), " ", wordCount === 1 ? 'word' : 'words'] }), _jsx("span", { style: { color: 'var(--ink-faint)' }, children: "\u00B7" }), _jsxs("span", { children: [readTime, " min read"] })] }))] }));
+}
+// ---------------------------------------------------------------------------
+// Sub-components — media blocks
+// ---------------------------------------------------------------------------
+function ImageAssetBlock({ title, description, uploadLabel, idLabel, idHelp, emptyText, successText, imageId, previewUrl, uploadStatus, uploadError, onImageIdChange, onFileUpload, }) {
+    const inputId = `${title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}-id`;
+    const statusText = uploadStatus === 'uploading'
+        ? 'Uploading image…'
+        : uploadStatus === 'staged'
+            ? successText
+            : null;
+    return (_jsxs("div", { style: mediaBlock, children: [_jsxs("div", { style: mediaBlockHeader, children: [_jsx(Icon, { name: "image", size: 14, style: { color: 'var(--ink-muted)' } }), _jsx("span", { style: { fontSize: 12, fontWeight: 500, color: 'var(--ink-soft)' }, children: title })] }), _jsx("p", { style: assetHelp, children: description }), _jsx("div", { style: assetPreview, children: previewUrl ? (_jsx("img", { src: previewUrl, alt: `${title} preview`, style: assetPreviewImage })) : imageId ? (_jsx("span", { style: { fontSize: 11, color: 'var(--ink-muted)', wordBreak: 'break-all' }, children: imageId })) : (_jsx("span", { style: { fontSize: 12, color: 'var(--ink-faint)', fontStyle: 'italic' }, children: emptyText })) }), _jsx("div", { style: videoActions, children: _jsxs("label", { className: "btn sm", style: uploadButton, children: [_jsx(Icon, { name: "upload", size: 14 }), uploadStatus === 'uploading' ? 'Uploading…' : uploadLabel, _jsx("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 })] }) }), _jsx("label", { htmlFor: inputId, style: assetLabel, children: idLabel }), _jsx("input", { id: inputId, type: "text", placeholder: "images/articles/example.jpg", value: imageId, onChange: (e) => onImageIdChange(e.currentTarget.value), style: urlInput, "aria-label": idLabel }), _jsx("div", { style: assetHelp, children: idHelp }), statusText && _jsx("div", { style: videoStatusText, children: statusText }), uploadError && _jsx("div", { style: videoErrorText, children: uploadError })] }));
+}
+function VideoBlock({ videoUrl, onVideoUrlChange, onVideoFileUpload, uploadStatus, uploadError, pipelineStatus, pipelineError, }) {
+    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 (_jsxs("div", { style: mediaBlock, children: [_jsxs("div", { style: mediaBlockHeader, children: [_jsx(Icon, { name: "video", size: 14, style: { color: 'var(--ink-muted)' } }), _jsx("span", { style: { fontSize: 12, fontWeight: 500, color: 'var(--ink-soft)' }, children: "Video" })] }), _jsx("div", { style: {
+                    aspectRatio: '16/9',
+                    background: 'var(--hover)',
+                    borderRadius: 6,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 12,
+                }, children: videoUrl ? (_jsx("span", { style: { fontSize: 11, color: 'var(--ink-muted)', wordBreak: 'break-all' }, children: videoUrl })) : (_jsx("span", { style: { fontSize: 12, color: 'var(--ink-faint)', fontStyle: 'italic' }, children: "No video attached" })) }), _jsx("input", { type: "url", placeholder: "Video source URL or R2 key\u2026", value: videoUrl, onChange: (e) => onVideoUrlChange(e.currentTarget.value), style: urlInput, "aria-label": "Video source URL" }), _jsx("div", { style: videoActions, children: _jsxs("label", { className: "btn sm", style: uploadButton, children: [_jsx(Icon, { name: "upload", size: 14 }), uploadStatus === 'uploading' ? 'Uploading…' : 'Upload source', _jsx("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" })] }) }), statusText && _jsx("div", { style: videoStatusText, children: statusText }), (uploadError || pipelineError) && (_jsx("div", { style: videoErrorText, children: uploadError || pipelineError })), _jsx("div", { style: { marginTop: 6, fontSize: 11, color: 'var(--ink-faint)' }, children: "Upload a source file or paste a public source URL; saving queues the Foundry pipeline." })] }));
+}
+function AudioBlock({ audioUrl, onAudioUrlChange, onAudioFileUpload, uploadStatus, uploadError, pipelineStatus, pipelineError, }) {
+    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 (_jsxs("div", { style: mediaBlock, children: [_jsxs("div", { style: mediaBlockHeader, children: [_jsx(Icon, { name: "mic", size: 14, style: { color: 'var(--ink-muted)' } }), _jsx("span", { style: { fontSize: 12, fontWeight: 500, color: 'var(--ink-soft)' }, children: "Podcast Audio File" })] }), _jsx("p", { style: assetHelp, children: "Upload the downloaded MP3, WAV, or M4A file. The Audio R2 Key fills automatically after upload." }), _jsx("p", { style: assetHelp, children: PODCAST_UPLOAD_HELP }), _jsxs("p", { style: assetHelp, children: [PODCAST_PIPELINE_HELP, " ", PODCAST_PIPELINE_ESTIMATE] }), _jsx("div", { style: {
+                    height: 56,
+                    background: 'var(--hover)',
+                    borderRadius: 6,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 12,
+                }, children: audioUrl ? (_jsx("span", { style: { fontSize: 11, color: 'var(--ink-muted)', wordBreak: 'break-all' }, children: audioUrl })) : (_jsx("span", { style: { fontSize: 12, color: 'var(--ink-faint)', fontStyle: 'italic' }, children: "No audio attached" })) }), _jsx("div", { style: videoActions, children: _jsxs("label", { className: "btn sm", style: uploadButton, children: [_jsx(Icon, { name: "upload", size: 14 }), uploadStatus === 'uploading' ? 'Uploading…' : 'Upload Podcast Audio File', _jsx("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" })] }) }), _jsx("label", { htmlFor: "podcast-audio-r2-key", style: assetLabel, children: "Audio R2 Key (filled after upload)" }), _jsx("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" }), _jsx("div", { style: assetHelp, children: "Only paste a key manually if the audio already exists in R2." }), statusText && _jsx("div", { style: videoStatusText, children: statusText }), (uploadError || pipelineError) && (_jsx("div", { style: videoErrorText, children: uploadError || pipelineError }))] }));
+}
+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, contentType, docId) {
+    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, contentType) {
+    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) {
+    return `/admin/api/media/${encodeURIComponent(id)}`;
+}
+function toStringValue(value) {
+    return typeof value === 'string' ? value : '';
+}
+function toNullableString(value) {
+    const normalized = toStringValue(value).trim();
+    return normalized ? normalized : null;
+}
+function toContentStatus(value) {
+    const allowed = ['draft', 'review', 'scheduled', 'published', 'archived'];
+    return allowed.includes(value) ? value : 'draft';
+}
+function unixSecondsToIso(value) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return null;
+    return new Date(value * 1000).toISOString();
+}
+// ---------------------------------------------------------------------------
+// Relative-time helper
+// ---------------------------------------------------------------------------
+function timeSince(ts) {
+    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 = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 0,
+    padding: '16px 24px',
+    flex: 1,
+    overflowY: 'auto',
+};
+const saveIndicator = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: 8,
+    marginBottom: 4,
+    minHeight: 16,
+};
+const fieldGroup = {
+    marginBottom: 14,
+};
+const titleInput = {
+    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 = {
+    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 = {
+    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 = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 14,
+};
+const mediaBlock = {
+    border: '1px solid var(--field-border)',
+    borderRadius: 8,
+    padding: 14,
+    background: 'var(--field)',
+};
+const mediaBlockHeader = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    marginBottom: 10,
+};
+const assetPreview = {
+    height: 126,
+    background: 'var(--hover)',
+    borderRadius: 6,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 12,
+    overflow: 'hidden',
+};
+const assetPreviewImage = {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+    display: 'block',
+};
+const assetLabel = {
+    display: 'block',
+    marginTop: 12,
+    marginBottom: 6,
+    fontSize: 11,
+    fontWeight: 600,
+    color: 'var(--ink-soft)',
+};
+const assetHelp = {
+    margin: '6px 0 10px',
+    fontSize: 11,
+    lineHeight: 1.45,
+    color: 'var(--ink-faint)',
+};
+const urlInput = {
+    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 = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 10,
+};
+const uploadButton = {
+    position: 'relative',
+    overflow: 'hidden',
+    cursor: 'pointer',
+};
+const hiddenFileInput = {
+    position: 'absolute',
+    inset: 0,
+    opacity: 0,
+    cursor: 'pointer',
+};
+const videoStatusText = {
+    marginTop: 8,
+    fontSize: 11,
+    lineHeight: 1.4,
+    color: 'var(--ink-muted)',
+};
+const videoErrorText = {
+    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 };
+//# sourceMappingURL=ContentForm.js.map