Renders a combined SEO metadata editor and live social media preview card, providing inline character-count validation and AI confidence indicators for SEO title, description, and keywords fields, plus OG image upload/display. ## Key Components ### `SEOEditorPreview` (default export) A client-side React component that combines three responsibilities: - **SEO field editing** — `Input`/`Textarea` fields for `seoTitle`, `seoDescription`, and `seoKeywords`, each with character-count tracking and length-limit warnings sourced from `SEO_TITLE_MAX_LENGTH` and `SEO_DESCRIPTION_MAX_LENGTH` constants. - **OG image management** — upload via `onOgImageUpload`, display with hover-to-replace/remove controls, and automatic fallback to `featuredImage` when no OG image is set. - **Live social preview** — a "Social Media Preview" card reflecting display fallbacks (`seoTitle → title`, `seoDescription → summary`, `ogImageUrl → featuredImage`). ### `SEOEditorPreviewProps` | Prop | Type | Description | |---|---|---| | `seoTitle` / `seoDescription` / `seoKeywords` / `ogImageUrl` | `string` | Controlled SEO field values | | `title` / `summary` / `featuredImage` | `string` | Auto-populate fallback sources | | `onSeo*Change` / `onOgImageUrlChange` | `(value: string) => void` | Controlled change handlers | | `onOgImageUpload` | `(file: File) => Promise` | Parent-supplied upload handler | | `aiConfidenceSeo*` | `number` (optional) | Triggers `AIGeneratedBadge` + `ConfidenceBadge` | | `domain` | `string` | Preview domain (default: `'openmsp.ai'`) | | `disabled` | `boolean` | Disables all interactive controls | ## Usage Example ```typescript import { SEOEditorPreview } from './seo-editor-preview'; function ArticleForm() { const [seoTitle, setSeoTitle] = useState(''); const [seoDescription, setSeoDescription] = useState(''); const handleUpload = async (file: File): Promise => { const formData = new FormData(); formData.append('file', file); const res = await fetch('/api/upload', { method: 'POST', body: formData }); const { url } = await res.json(); return url; }; return ( {}} onOgImageUrlChange={() => {}} onOgImageUpload={handleUpload} aiConfidenceSeoTitle={0.87} domain="flamingo.run" /> ); } ``` > **Source:** [`seo-editor-preview.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/seo-editor-preview.tsx)