@actuate-media/cms-admin 0.17.0 → 0.19.0

package/src/views/Pages/PagesListView.tsx

@@ -13,16 +13,19 @@ import {
   X,
 } from 'lucide-react'
 import { toast } from 'sonner'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {
+  applyPagesQuery,
   bulkChangePageTags,
   bulkDeletePages,
   bulkUpdatePages,
-  fetchPages,
+  fetchPagesDataset,
   groupPages,
+  type BulkResult,
   type Page,
   type PageGroupBy,
+  type PagesDataset,
   type PageStatus,
-  type PagesResult,
   type PageTag,
 } from '../../lib/pages-service.js'
 import { PostStatusBadge, SeoScoreIndicator } from '../../components/posts/badges.js'
@@ -61,7 +64,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
   const [page, setPage] = useState(1)
   const [selected, setSelected] = useState<Set<string>>(new Set())
 
-  const [data, setData] = useState<PagesResult | null>(null)
+  const [dataset, setDataset] = useState<PagesDataset | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [refreshToken, setRefreshToken] = useState(0)
@@ -81,23 +84,17 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
 
   const tagIds = useMemo(() => [...selectedTags], [selectedTags])
 
+  // Single network read. Search / sort / group / paging are applied in
+  // memory below, so changing any of those never re-fetches. The dataset
+  // refreshes only on mount and after a mutation (refreshToken bump).
   useEffect(() => {
     let cancelled = false
     setLoading(true)
     setError(null)
-    fetchPages({
-      status,
-      tagIds,
-      search: debouncedSearch,
-      groupBy,
-      sortBy,
-      sortDirection: dir,
-      page,
-      pageSize: PAGE_SIZE,
-    })
+    fetchPagesDataset()
       .then((res) => {
         if (cancelled) return
-        setData(res)
+        setDataset(res)
         setLoading(false)
       })
       .catch((err: unknown) => {
@@ -108,21 +105,40 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     return () => {
       cancelled = true
     }
-  }, [status, tagIds, debouncedSearch, groupBy, sortBy, dir, page, refreshToken])
+  }, [refreshToken])
 
-  // Reset paging/selection when the result set changes shape.
+  // Reset paging/selection when the active filters change shape.
   useEffect(() => {
     setPage(1)
     setSelected(new Set())
   }, [debouncedSearch, status, tagIds, groupBy])
 
-  const pages = data?.pages ?? []
-  const tags = data?.tags ?? []
-  const total = data?.total ?? 0
-  const totalAll = useMemo(() => tags.reduce((sum, t) => sum + t.pageCount, 0), [tags])
-  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+  const allPages = useMemo(() => dataset?.pages ?? [], [dataset])
+  const tags = useMemo(() => dataset?.tags ?? [], [dataset])
+  const grandTotal = allPages.length
   const grouped = groupBy !== 'none'
 
+  const filtered = useMemo(
+    () =>
+      applyPagesQuery(allPages, {
+        status,
+        tagIds,
+        search: debouncedSearch,
+        sortBy,
+        sortDirection: dir,
+      }),
+    [allPages, status, tagIds, debouncedSearch, sortBy, dir],
+  )
+  const total = filtered.length
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+
+  // Pagination only applies to the flat view; grouped views render every
+  // match so the buckets stay complete.
+  const pages = useMemo(
+    () => (grouped ? filtered : filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)),
+    [filtered, grouped, page],
+  )
+
   const tagBySlug = useMemo(() => {
     const m = new Map<string, PageTag>()
     for (const t of tags) m.set(t.slug, t)
@@ -143,6 +159,11 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     [sortBy],
   )
 
+  // `aria-sort` belongs on the column header cell (`<th>`), not the button
+  // inside it — assistive tech reads sort state from the header.
+  const ariaSortFor = (field: SortBy): 'ascending' | 'descending' | 'none' =>
+    sortBy === field ? (dir === 'asc' ? 'ascending' : 'descending') : 'none'
+
   const filtersAreActive = debouncedSearch !== '' || status !== 'all' || selectedTags.size > 0
 
   const clearFilters = () => {
@@ -190,17 +211,31 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     setRefreshToken((t) => t + 1)
   }
 
+  // Bulk service calls always resolve a { ok, failed } tally (they never
+  // reject), so we promote a *total* failure to a rejection — that's what
+  // makes `toast.promise`'s `error` branch reachable. The `await` is
+  // wrapped so a rejection can't escape as an unhandled promise, and
+  // `afterBulk` always runs to refresh the (possibly partially-changed) set.
+  const allFailed = (r: BulkResult) => r.ok === 0 && r.failed > 0
+
   const runBulkStatus = async (target: PageStatus) => {
     const ids = selectedPages.map((p) => p.id)
     if (ids.length === 0) return
     const verb = target === 'PUBLISHED' ? 'Publishing' : 'Updating'
-    const promise = bulkUpdatePages(ids, { status: target })
+    const promise = bulkUpdatePages(ids, { status: target }).then((r) => {
+      if (allFailed(r)) throw new Error('Bulk update failed')
+      return r
+    })
     toast.promise(promise, {
       loading: `${verb} ${ids.length} page${ids.length === 1 ? '' : 's'}…`,
       success: (r) => `${r.ok} updated${r.failed ? `, ${r.failed} failed` : ''}`,
       error: 'Bulk update failed',
     })
-    await promise
+    try {
+      await promise
+    } catch {
+      /* surfaced via toast.promise */
+    }
     afterBulk()
   }
 
@@ -209,7 +244,10 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     const promise = bulkChangePageTags(
       selectedPages.map((p) => ({ id: p.id, tags: p.tags, primaryTagId: p.primaryTagId })),
       mode === 'add' ? { add: [slug] } : { remove: [slug] },
-    )
+    ).then((r) => {
+      if (allFailed(r)) throw new Error('Bulk tag change failed')
+      return r
+    })
     const tagName = tagBySlug.get(slug)?.name ?? slug
     toast.promise(promise, {
       loading: `${mode === 'add' ? 'Adding' : 'Removing'} "${tagName}"…`,
@@ -217,20 +255,31 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
         `${r.ok} page${r.ok === 1 ? '' : 's'} updated${r.failed ? `, ${r.failed} failed` : ''}`,
       error: 'Bulk tag change failed',
     })
-    await promise
+    try {
+      await promise
+    } catch {
+      /* surfaced via toast.promise */
+    }
     afterBulk()
   }
 
   const runBulkDelete = async () => {
     const ids = deletablePages.map((p) => p.id)
     if (ids.length === 0) return
-    const promise = bulkDeletePages(ids)
+    const promise = bulkDeletePages(ids).then((r) => {
+      if (allFailed(r)) throw new Error('Bulk delete failed')
+      return r
+    })
     toast.promise(promise, {
       loading: `Deleting ${ids.length} page${ids.length === 1 ? '' : 's'}…`,
       success: (r) => `${r.ok} deleted${r.failed ? `, ${r.failed} failed` : ''}`,
       error: 'Bulk delete failed',
     })
-    await promise
+    try {
+      await promise
+    } catch {
+      /* surfaced via toast.promise */
+    }
     afterBulk()
   }
 
@@ -242,7 +291,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
       <div className="flex flex-col gap-1">
         <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">Pages</h1>
         <p className="text-muted-foreground text-sm">
-          {totalAll} page{totalAll === 1 ? '' : 's'} · organized by tags
+          {grandTotal} page{grandTotal === 1 ? '' : 's'} · organized by tags
         </p>
       </div>
 
@@ -291,7 +340,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
         />
 
         <span className="text-muted-foreground ml-auto text-sm tabular-nums">
-          {total} of {totalAll}
+          {total} of {grandTotal}
         </span>
       </div>
 
@@ -369,7 +418,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   className="border-border accent-primary rounded"
                 />
               </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
+              <th scope="col" aria-sort={ariaSortFor('title')} className="px-3 py-2.5 text-left">
                 <SortHeader
                   label="Title"
                   field="title"
@@ -381,7 +430,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
               <th scope="col" className="px-3 py-2.5 text-left">
                 <span className="text-xs font-medium tracking-wider uppercase">Tags</span>
               </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
+              <th scope="col" aria-sort={ariaSortFor('author')} className="px-3 py-2.5 text-left">
                 <SortHeader
                   label="Author"
                   field="author"
@@ -390,7 +439,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   onSort={handleSort}
                 />
               </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
+              <th scope="col" aria-sort={ariaSortFor('status')} className="px-3 py-2.5 text-left">
                 <SortHeader
                   label="Status"
                   field="status"
@@ -399,7 +448,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   onSort={handleSort}
                 />
               </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
+              <th scope="col" aria-sort={ariaSortFor('modified')} className="px-3 py-2.5 text-left">
                 <SortHeader
                   label="Last Modified"
                   field="modified"
@@ -408,7 +457,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   onSort={handleSort}
                 />
               </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
+              <th scope="col" aria-sort={ariaSortFor('seo')} className="px-3 py-2.5 text-left">
                 <SortHeader
                   label="SEO"
                   field="seo"
@@ -513,12 +562,10 @@ function SortHeader({
   onSort: (f: SortBy) => void
 }) {
   const active = current === field
-  const ariaSort = active ? (dir === 'asc' ? 'ascending' : 'descending') : 'none'
   return (
     <button
       type="button"
       onClick={() => onSort(field)}
-      aria-sort={ariaSort}
       className={`hover:text-foreground inline-flex items-center gap-1 text-xs font-medium tracking-wider uppercase transition-colors ${
         active ? 'text-foreground' : 'text-muted-foreground'
       }`}
@@ -680,56 +727,40 @@ function TagMenu({
   tags: PageTag[]
   onPick: (slug: string) => void
 }) {
-  const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!open) return
-    const onDoc = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
-    }
-    document.addEventListener('mousedown', onDoc)
-    return () => document.removeEventListener('mousedown', onDoc)
-  }, [open])
-
   return (
-    <div className="relative" ref={ref}>
-      <button
-        type="button"
-        onClick={() => setOpen((o) => !o)}
-        aria-haspopup="menu"
-        aria-expanded={open}
-        className="text-foreground hover:bg-accent inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors"
-      >
-        {label}
-        <ChevronDown className="h-3 w-3" aria-hidden />
-      </button>
-      {open && (
-        <div
-          role="menu"
-          className="border-border bg-popover absolute z-20 mt-1 max-h-64 w-44 overflow-auto rounded-lg border p-1 shadow-lg"
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button
+          type="button"
+          className="text-foreground hover:bg-accent inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors"
         >
-          {tags.length === 0 && (
+          {label}
+          <ChevronDown className="h-3 w-3" aria-hidden />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          align="start"
+          sideOffset={4}
+          className="border-border bg-popover z-50 max-h-64 w-44 overflow-auto rounded-lg border p-1 shadow-md"
+        >
+          {tags.length === 0 ? (
             <div className="text-muted-foreground px-2 py-1.5 text-xs">No tags yet</div>
+          ) : (
+            tags.map((t) => (
+              <DropdownMenu.Item
+                key={t.slug}
+                onSelect={() => onPick(t.slug)}
+                className="text-foreground focus:bg-accent flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none"
+              >
+                <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(t.color ?? 'gray')}`} />
+                {t.name}
+              </DropdownMenu.Item>
+            ))
           )}
-          {tags.map((t) => (
-            <button
-              key={t.slug}
-              type="button"
-              role="menuitem"
-              onClick={() => {
-                onPick(t.slug)
-                setOpen(false)
-              }}
-              className="text-foreground hover:bg-accent flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm"
-            >
-              <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(t.color ?? 'gray')}`} />
-              {t.name}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
   )
 }
 

package/src/views/Posts/NewPostPicker.tsx

@@ -9,10 +9,11 @@ import { resolvePostTypeIcon } from '../../components/posts/icons.js'
 /**
  * Type-picker landing page for "+ New Post".
  *
- * When zero or one post type is configured we'd ordinarily auto-route
- * to the per-collection editor, but the spec calls out always showing
- * a chooser when "+ New Post" is clicked. We keep that behavior so
- * the experience is consistent regardless of how many types exist.
+ * Behavior by number of configured post types:
+ *   - exactly one  → skip the picker and forward straight to that type's
+ *     new-post editor (a one-card chooser adds nothing but a flash)
+ *   - two or more  → show the chooser cards
+ *   - zero         → show a "no post types configured" setup hint
  *
  * Picking a card navigates to the section-based Post editor's new-post
  * route (`/posts/<slug>/new`), which seeds the post from that type's

package/src/views/Posts/PostTypesView.tsx

@@ -14,10 +14,11 @@ import { resolvePostTypeIcon } from '../../components/posts/icons.js'
  *   - title + description
  *   - footer row: post count · field count · URL base
  *
- * Cards open the per-collection settings (`/collections/:slug/settings`
- * in the existing admin) when clicked. The dashed "+ New Post Type"
- * card routes to /posts/types/new where users get instructions for
- * adding a new collection to the config file.
+ * Clicking a card opens that type's settings (`/posts/types/:slug/edit`);
+ * each card also has an "Edit Template" action (`/posts/types/:slug/template`)
+ * for the type's default layout. The dashed "+ New Post Type" card routes to
+ * `/posts/types/new`, where users get instructions for adding a new collection
+ * to the config file.
  *
  * Why no in-app create/edit flow yet:
  *   Collections are file-defined (actuate.config.ts). Writing to that

package/src/views/Posts/PostsListView.tsx

@@ -118,6 +118,15 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
     setSelected(new Set())
   }, [activeType, debouncedSearch, status, author])
 
+  // Selection is scoped to the rows visible on the current page: bulk
+  // actions only ever touch `selectedPosts` (the current page's selected
+  // rows), so clear the selection whenever the page changes. Without this
+  // the bulk bar count keeps counting rows from earlier pages while the
+  // publish/delete handlers silently operate on nothing.
+  useEffect(() => {
+    setSelected(new Set())
+  }, [page])
+
   const total = data?.total ?? 0
   const totalAll = useMemo(
     () => (data?.types ?? []).reduce((sum, t) => sum + t.postCount, 0),

package/src/views/page-editor/PagePreview.tsx

@@ -62,7 +62,14 @@ export function PagePreview({ documentId, onNavigate }: PagePreviewProps) {
       <div className="bg-card border-border flex h-12 shrink-0 items-center justify-between border-b px-4">
         <button
           type="button"
-          onClick={() => window.close()}
+          onClick={() => {
+            // Opened via the editor's "Preview" (script-opened tab) → close
+            // it. Opened by navigating to the URL directly (no opener, so
+            // `window.close()` is a no-op) → fall back to the editor so the
+            // button is never dead.
+            if (window.opener) window.close()
+            else onNavigate(`/pages/${documentId}/edit`)
+          }}
           className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm"
           aria-label="Close preview tab"
         >
@@ -82,6 +89,8 @@ export function PagePreview({ documentId, onNavigate }: PagePreviewProps) {
         </button>
       </div>
 
+      {/* The canvas is intentionally white regardless of the admin theme:
+          it emulates the public page surface, not admin chrome. */}
       <div className="flex-1 overflow-auto bg-white">
         {visible.length === 0 ? (
           <div className="text-muted-foreground flex h-full items-center justify-center text-sm">

package/src/views/page-editor/PageSectionEditor.tsx

@@ -11,6 +11,7 @@ import {
   duplicateSection,
   emptyPage,
   fetchPageForEditor,
+  missingPageFields,
   moveSection,
   publishPage,
   removeSection,
@@ -88,12 +89,35 @@ export function PageSectionEditor({
 
   const { canEdit, canPublish } = useMemo(() => deriveCan(session), [session])
 
+  // A misconfigured `pages` collection (missing the fields the editor
+  // writes) would silently drop content on save — detect it up front.
+  // Memoized to a string/null so the load effect can depend on it without
+  // re-running when `config`'s object identity changes between renders.
+  const schemaError = useMemo(() => {
+    const missing = missingPageFields(config)
+    if (missing.length === 0) return null
+    const plural = missing.length > 1
+    return (
+      `The "pages" collection is missing required field${plural ? 's' : ''}: ` +
+      `${missing.join(', ')}. Declare ${plural ? 'them' : 'it'} in your CMS config ` +
+      `so the page editor can save without losing content.`
+    )
+  }, [config])
+
   // ─── Load ──────────────────────────────────────────────────────────
   useEffect(() => {
     let cancelled = false
     setLoading(true)
     setLoadError(null)
 
+    // Fail loud on a misconfigured `pages` collection rather than letting
+    // the user build a page whose content would be silently dropped on save.
+    if (schemaError) {
+      setLoadError(schemaError)
+      setLoading(false)
+      return
+    }
+
     if (!documentId) {
       setPage(emptyPage())
       setLoading(false)
@@ -119,7 +143,7 @@ export function PageSectionEditor({
     return () => {
       cancelled = true
     }
-  }, [documentId])
+  }, [documentId, schemaError])
 
   // ─── Unsaved-changes guard (browser unload) ──────────────────────────
   useEffect(() => {

package/src/views/page-editor/sections/ArticleBodySection.tsx

@@ -4,8 +4,12 @@ import { bool, str, type PostRenderContext } from './parts.js'
 /**
  * Renders the post's main body. When `source === 'field'` it shows the
  * post's own Body field (passed via context); otherwise it renders the
- * section's own `body` copy. Body text is treated as plain paragraphs split
- * on blank lines — the renderer never injects raw HTML.
+ * section's own `body` copy.
+ *
+ * The Body field is a `richText` field (sanitized HTML on write), so this
+ * canvas preview renders it as HTML — exactly like the public site's
+ * article-body renderer — to stay WYSIWYG. It previews the author's own
+ * in-progress draft; the server sanitizes (sanitize-html) on save.
  */
 export function ArticleBodySection({
   section,
@@ -16,15 +20,10 @@ export function ArticleBodySection({
 }) {
   const c = section.content
   const source = str(c, 'source', 'field')
-  const raw = source === 'field' ? (context?.body ?? '') : str(c, 'body')
+  const html = source === 'field' ? (context?.body ?? '') : str(c, 'body')
   const wide = str(c, 'width', 'normal') === 'wide'
   const showToc = bool(c, 'showToc')
 
-  const paragraphs = raw
-    .split(/\n{2,}/)
-    .map((p) => p.trim())
-    .filter(Boolean)
-
   return (
     <div className={`mx-auto px-6 ${wide ? 'max-w-4xl' : 'max-w-2xl'}`}>
       {showToc && (
@@ -37,14 +36,11 @@ export function ArticleBodySection({
           </p>
         </div>
       )}
-      {paragraphs.length > 0 ? (
-        <div className="space-y-4">
-          {paragraphs.map((p, i) => (
-            <p key={i} className="text-base leading-relaxed text-zinc-700">
-              {p}
-            </p>
-          ))}
-        </div>
+      {html.trim() ? (
+        <div
+          className="prose prose-zinc max-w-none text-base leading-relaxed text-zinc-700"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
       ) : (
         <p className="text-base leading-relaxed text-zinc-400 italic">
           {source === 'field'

package/src/views/post-editor/PostEditorCanvas.tsx

@@ -102,6 +102,12 @@ export function PostEditorCanvas({
 }
 
 function EmptyBody({ onAddSection }: { onAddSection: () => void }) {
+  // This block sits inside the fixed-white preview surface, so the neutral
+  // greys intentionally match the website-preview palette used by PostHeader
+  // and the section renderers (not the admin theme tokens, which flip in dark
+  // mode and would lose contrast on the always-white surface). The CTA is the
+  // one true admin affordance here, so it uses the brand `primary` token,
+  // which carries a guaranteed-contrast foreground in both modes.
   return (
     <div className="flex flex-col items-center justify-center gap-3 border-t border-zinc-100 px-6 py-16 text-center">
       <span className="flex h-12 w-12 items-center justify-center rounded-full bg-zinc-100">
@@ -113,7 +119,7 @@ function EmptyBody({ onAddSection }: { onAddSection: () => void }) {
       <button
         type="button"
         onClick={onAddSection}
-        className="inline-flex items-center gap-2 rounded-lg bg-violet-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-violet-700"
+        className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
       >
         <Plus className="h-4 w-4" aria-hidden />
         Add Section

package/src/views/post-editor/PostFieldsModal.tsx

@@ -3,6 +3,8 @@
 import { useEffect, useState } from 'react'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
+import { MediaPickerModal } from '../../components/MediaPickerModal.js'
+import { RichTextField } from '../../fields/RichTextField.js'
 import type { EditorPost } from '../../lib/post-editor-service.js'
 
 interface PostFieldsModalProps {
@@ -36,6 +38,7 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
   const [seoTitle, setSeoTitle] = useState(post.seoTitle)
   const [seoDescription, setSeoDescription] = useState(post.seoDescription)
   const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
+  const [mediaOpen, setMediaOpen] = useState(false)
 
   useEffect(() => {
     if (!open) return
@@ -134,16 +137,26 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
         </div>
         <div>
           <label className={LABEL} htmlFor="pf-image">
-            Featured image URL
+            Featured image
           </label>
-          <input
-            id="pf-image"
-            className={INPUT}
-            value={featuredImage}
-            disabled={!canEdit}
-            placeholder="https://…"
-            onChange={(e) => setFeaturedImage(e.target.value)}
-          />
+          <div className="flex gap-2">
+            <input
+              id="pf-image"
+              className={`${INPUT} flex-1`}
+              value={featuredImage}
+              disabled={!canEdit}
+              placeholder="https://… or pick from the media library"
+              onChange={(e) => setFeaturedImage(e.target.value)}
+            />
+            <button
+              type="button"
+              disabled={!canEdit}
+              onClick={() => setMediaOpen(true)}
+              className="bg-accent text-foreground border-border hover:bg-accent/80 shrink-0 rounded-md border px-3 py-1.5 text-xs font-medium disabled:opacity-50"
+            >
+              Browse
+            </button>
+          </div>
           {featuredImage && (
             <div className="border-border bg-muted mt-2 overflow-hidden rounded-md border">
               <img src={featuredImage} alt="" className="h-28 w-full object-cover" />
@@ -151,20 +164,12 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
           )}
         </div>
         <div>
-          <label className={LABEL} htmlFor="pf-body">
-            Body
-          </label>
-          <textarea
-            id="pf-body"
-            className={`${INPUT} min-h-[120px] resize-y`}
+          <RichTextField
+            label="Body"
             value={body}
-            disabled={!canEdit}
-            placeholder="The main post content. Shown by the Article Body section."
-            onChange={(e) => setBody(e.target.value)}
+            onChange={canEdit ? setBody : () => {}}
+            helpText="Rendered by the Article Body section when its source is set to the post Body field."
           />
-          <p className="text-muted-foreground mt-1 text-xs">
-            Rendered by the Article Body section when its source is set to the post Body field.
-          </p>
         </div>
         <div>
           <label className={LABEL} htmlFor="pf-seo-title">
@@ -191,6 +196,16 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
           />
         </div>
       </div>
+
+      <MediaPickerModal
+        open={mediaOpen}
+        onClose={() => setMediaOpen(false)}
+        onSelect={(url) => {
+          setFeaturedImage(url)
+          setMediaOpen(false)
+        }}
+        accept="image/*"
+      />
     </Modal>
   )
 }