@actuate-media/cms-admin 0.42.0 → 0.42.2

package/src/lib/post-editor-service.ts

@@ -20,8 +20,10 @@
  * so the field-access layer doesn't strip them on write.
  */
 import { cmsApi } from './api.js'
+import { missingCollectionFields } from './collection-schema.js'
 import {
   getSectionType,
+  generateSectionId,
   createSection,
   addSection,
   removeSection,
@@ -93,6 +95,30 @@ export interface ValidationResult {
   warnings: string[]
 }
 
+// ─── Schema guard ────────────────────────────────────────────────────
+
+/**
+ * The Post Editor persists these as top-level keys on the post-type
+ * collection's documents. The server's field-access layer silently drops any
+ * key not declared as a field on the collection, so a post-type collection
+ * missing e.g. `sections` would discard all section content on save with no
+ * error. Mirrors the Page Editor's `missingPageFields` guard.
+ */
+const REQUIRED_POST_FIELDS = [
+  'sections',
+  'excerpt',
+  'featuredImage',
+  'body',
+  'category',
+  'publishDate',
+  'metaTitle',
+  'metaDescription',
+] as const
+
+export function missingPostFields(config: unknown, postType: string): string[] {
+  return missingCollectionFields(config, postType, REQUIRED_POST_FIELDS)
+}
+
 // ─── Validation ──────────────────────────────────────────────────────
 
 function isBlank(v: unknown): boolean {
@@ -113,7 +139,9 @@ export function validatePost(post: EditorPost, forPublish = false): ValidationRe
 
   if (forPublish) {
     const visible = post.sections.filter((s) => s.visible)
-    for (const section of visible) {
+    // Unmanaged (externally-managed) sections have no registered field schema,
+    // so they can't be content-validated here and must not block publish.
+    for (const section of visible.filter((s) => !s.unmanaged)) {
       const def = getSectionType(section.sectionType)
       const label = section.name || def?.name || 'Section'
       const result = validateSectionContent(section.sectionType, section.content, section.settings)
@@ -133,7 +161,7 @@ export function validatePost(post: EditorPost, forPublish = false): ValidationRe
 export function validateTemplate(template: EditorPostTemplate): ValidationResult {
   const errors: string[] = []
   const warnings: string[] = []
-  for (const section of template.sections.filter((s) => s.visible)) {
+  for (const section of template.sections.filter((s) => s.visible && !s.unmanaged)) {
     const def = getSectionType(section.sectionType)
     const label = section.name || def?.name || 'Section'
     const result = validateSectionContent(section.sectionType, section.content, section.settings)
@@ -175,7 +203,9 @@ function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
     category: dataStr(data, 'category'),
     status: doc.status ?? 'DRAFT',
     publishDate: (data.publishDate as string) ?? doc.scheduledAt ?? null,
-    sections: coerceSections(data.sections),
+    // Preserve unknown (externally-managed) sections so the editor can show
+    // them read-only and round-trip them on save instead of dropping them.
+    sections: coerceSections(data.sections, { onUnknown: 'preserve' }),
     seoTitle: dataStr(data, 'metaTitle'),
     seoDescription: dataStr(data, 'metaDescription'),
     publishedAt: doc.publishedAt ?? null,
@@ -216,7 +246,7 @@ export async function fetchTemplateForEditor(postType: string): Promise<EditorPo
   const r = res.data
   const docId = r.docId ?? null
   const header = coercePostHeader(r.header)
-  let sections = coerceSections(r.sections)
+  let sections = coerceSections(r.sections, { onUnknown: 'preserve' })
   // Defend against an older server (or an empty stored template): an unsaved
   // type should still seed the default sections so authors aren't faced with a
   // blank canvas.
@@ -230,7 +260,10 @@ export async function fetchTemplateForEditor(postType: string): Promise<EditorPo
 export async function saveTemplate(template: EditorPostTemplate): Promise<EditorPostTemplate> {
   const res = await cmsApi<TemplateApiResponse>(templateEndpoint(template.postType), {
     method: 'PUT',
-    body: JSON.stringify({ header: template.header, sections: template.sections }),
+    body: JSON.stringify({
+      header: template.header,
+      sections: template.sections.map(stripUnmanagedMarker),
+    }),
   })
   if (res.error || !res.data) throw new Error(res.error ?? 'Failed to save template')
   const r = res.data
@@ -238,7 +271,7 @@ export async function saveTemplate(template: EditorPostTemplate): Promise<Editor
     docId: r.docId ?? null,
     postType: template.postType,
     header: coercePostHeader(r.header),
-    sections: coerceSections(r.sections),
+    sections: coerceSections(r.sections, { onUnknown: 'preserve' }),
   }
 }
 
@@ -263,6 +296,15 @@ interface PostWritePayload {
   metaDescription: string
 }
 
+/**
+ * Strip the derived `unmanaged` marker before persisting — it is recomputed
+ * from the registry on read, so persisting it would only stale.
+ */
+function stripUnmanagedMarker(section: PageSection): Omit<PageSection, 'unmanaged'> {
+  const { unmanaged: _unmanaged, ...rest } = section
+  return rest
+}
+
 function toWriteBody(post: EditorPost, extra?: Record<string, unknown>): string {
   const payload: PostWritePayload & Record<string, unknown> = {
     title: post.title,
@@ -272,7 +314,9 @@ function toWriteBody(post: EditorPost, extra?: Record<string, unknown>): string
     body: post.body,
     category: post.category,
     publishDate: post.publishDate,
-    sections: post.sections,
+    // Unmanaged sections are part of `post.sections`, so they round-trip on
+    // every save (no data loss).
+    sections: post.sections.map(stripUnmanagedMarker),
     metaTitle: post.seoTitle,
     metaDescription: post.seoDescription,
     ...extra,
@@ -318,7 +362,9 @@ export async function emptyPostFromTemplate(postType: string): Promise<EditorPos
     const template = await fetchTemplateForEditor(postType)
     // Clone with fresh ids so the post owns its own sections, decoupled from
     // the template (editing the post never mutates the type template).
-    sections = template.sections.map((s) => ({ ...s, id: createSection(s.sectionType).id }))
+    // `generateSectionId` (not `createSection`) because preserved unmanaged
+    // template sections have no registered type and `createSection` throws.
+    sections = template.sections.map((s) => ({ ...s, id: generateSectionId() }))
   } catch {
     // No template / fetch failure → start from an empty section list.
     sections = []

package/src/views/ApiKeys.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import * as Dialog from '@radix-ui/react-dialog'
+import { adminPortalContainer } from '../lib/portal-container.js'
 import {
   Copy,
   KeyRound,
@@ -345,7 +346,7 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
 
   return (
     <Dialog.Root open={open} onOpenChange={(o) => !o && onClose()}>
-      <Dialog.Portal>
+      <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="fixed inset-0 z-40 bg-black/40" />
         <Dialog.Content className="border-border bg-card fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border p-6 shadow-xl">
           <Dialog.Title className="text-card-foreground mb-4 flex items-center gap-2 text-lg font-medium">
@@ -493,7 +494,7 @@ function RevealKeyDialog({
   const [shown, setShown] = useState(false)
   return (
     <Dialog.Root open onOpenChange={(o) => !o && onClose()}>
-      <Dialog.Portal>
+      <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="fixed inset-0 z-40 bg-black/40" />
         <Dialog.Content className="border-border bg-card fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border p-6 shadow-xl">
           <Dialog.Title className="text-card-foreground mb-2 flex items-center gap-2 text-lg font-medium">

package/src/views/Pages/PagesListView.tsx

@@ -14,6 +14,7 @@ import {
 } from 'lucide-react'
 import { toast } from 'sonner'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { adminPortalContainer } from '../../lib/portal-container.js'
 import {
   applyPagesQuery,
   bulkChangePageTags,
@@ -738,7 +739,7 @@ function TagMenu({
           <ChevronDown className="h-3 w-3" aria-hidden />
         </button>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
+      <DropdownMenu.Portal container={adminPortalContainer()}>
         <DropdownMenu.Content
           align="start"
           sideOffset={4}

package/src/views/Redirects.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import * as Dialog from '@radix-ui/react-dialog'
+import { adminPortalContainer } from '../lib/portal-container.js'
 import {
   Pencil,
   Plus,
@@ -278,7 +279,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
       )}
 
       <Dialog.Root open={showAddDialog} onOpenChange={setShowAddDialog}>
-        <Dialog.Portal>
+        <Dialog.Portal container={adminPortalContainer()}>
           <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
           <Dialog.Content className="fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg">
             <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">

package/src/views/Users.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import * as Dialog from '@radix-ui/react-dialog'
+import { adminPortalContainer } from '../lib/portal-container.js'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {
   Users as UsersIcon,
@@ -357,7 +358,7 @@ function RoleDropdown({
           <ChevronDown size={12} aria-hidden />
         </button>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
+      <DropdownMenu.Portal container={adminPortalContainer()}>
         <DropdownMenu.Content
           align="start"
           sideOffset={4}
@@ -483,7 +484,7 @@ function InviteModal({
         if (!v) reset()
       }}
     >
-      <Dialog.Portal>
+      <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm" />
         <Dialog.Content className="border-border bg-card fixed top-1/2 left-1/2 z-50 max-h-[90vh] w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border p-6 shadow-lg focus:outline-none">
           <div className="mb-4 flex items-center justify-between">
@@ -1187,7 +1188,7 @@ function RowActions({
           <MoreHorizontal size={16} aria-hidden />
         </button>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
+      <DropdownMenu.Portal container={adminPortalContainer()}>
         <DropdownMenu.Content
           align="end"
           sideOffset={4}

package/src/views/page-builder/BlockPicker.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useMemo, useRef, useEffect, useCallback } from 'react'
 import * as Dialog from '@radix-ui/react-dialog'
+import { adminPortalContainer } from '../../lib/portal-container.js'
 import {
   Star,
   Type,
@@ -126,7 +127,7 @@ export function BlockPicker({ open, onClose, onSelect }: BlockPickerProps) {
 
   return (
     <Dialog.Root open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
-      <Dialog.Portal>
+      <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="motion-safe:animate-in motion-safe:fade-in-0 fixed inset-0 z-50 bg-black/50" />
         <Dialog.Content
           className="bg-card border-border fixed top-1/2 left-1/2 z-50 flex max-h-[80vh] w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border shadow-2xl"

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

@@ -58,8 +58,11 @@ interface PageSectionEditorProps {
 
 function deriveCan(session: any): { canEdit: boolean; canPublish: boolean } {
   const role: string | undefined = session?.user?.role
-  // No session info (e.g. local dev) → allow; otherwise gate by role.
-  if (!role) return { canEdit: true, canPublish: true }
+  // Default closed: when we can't identify a role, hide the edit/publish
+  // affordances rather than exposing them. The server independently enforces
+  // access on every write, so this is a UX guard — but it should fail safe.
+  // (Matches the Post editor's behavior.)
+  if (!role) return { canEdit: false, canPublish: false }
   const editors = ['ADMIN', 'EDITOR', 'AUTHOR']
   const publishers = ['ADMIN', 'EDITOR']
   return { canEdit: editors.includes(role), canPublish: publishers.includes(role) }

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

@@ -28,6 +28,7 @@ import {
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { adminPortalContainer } from '../../lib/portal-container.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
 import { sectionIconFor } from './section-icons.js'
 
@@ -238,7 +239,7 @@ function SortableSectionItem({
                   <MoreVertical className="h-4 w-4" aria-hidden />
                 </button>
               </DropdownMenu.Trigger>
-              <DropdownMenu.Portal>
+              <DropdownMenu.Portal container={adminPortalContainer()}>
                 <DropdownMenu.Content
                   align="end"
                   sideOffset={4}

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { AlertTriangle, Loader2 } from 'lucide-react'
+import { AlertTriangle, Loader2, Lock } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
@@ -13,6 +13,7 @@ import {
   emptyPostFromTemplate,
   fetchPostForEditor,
   fetchTemplateForEditor,
+  missingPostFields,
   moveSection,
   publishPost,
   removeSection,
@@ -123,12 +124,35 @@ export function PostSectionEditor({
     return col?.labels?.singular ?? postType
   }, [config, postType])
 
+  // A misconfigured post-type 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 = missingPostFields(config, postType)
+    if (missing.length === 0) return null
+    const plural = missing.length > 1
+    return (
+      `The "${postType}" collection is missing required field${plural ? 's' : ''}: ` +
+      `${missing.join(', ')}. Declare ${plural ? 'them' : 'it'} in your CMS config ` +
+      `so the post editor can save without losing content.`
+    )
+  }, [config, postType])
+
   // ─── Load ──────────────────────────────────────────────────────────
   useEffect(() => {
     let cancelled = false
     setLoading(true)
     setLoadError(null)
 
+    // Fail loud on a misconfigured post-type collection rather than letting
+    // the user build a post whose content would be silently dropped on save.
+    if (schemaError) {
+      setLoadError(schemaError)
+      setLoading(false)
+      return
+    }
+
     // Always load the type template header (the post editor renders it but
     // never edits it — header design lives at the type level).
     fetchTemplateForEditor(postType)
@@ -160,7 +184,7 @@ export function PostSectionEditor({
     return () => {
       cancelled = true
     }
-  }, [postType, documentId])
+  }, [postType, documentId, schemaError])
 
   // ─── Unsaved-changes guard ───────────────────────────────────────────
   useEffect(() => {
@@ -424,6 +448,12 @@ export function PostSectionEditor({
 
   const selected = post.sections.find((s) => s.id === selectedId) ?? null
 
+  // Sections whose type has no registered definition (seed/code-owned, e.g.
+  // `opal-*`). They are preserved verbatim on save but can't be edited here.
+  const unmanagedTypes = Array.from(
+    new Set(post.sections.filter((s) => s.unmanaged).map((s) => s.sectionType)),
+  )
+
   // Section types the canvas renders as placeholders — no built-in body
   // component and no consumer-registered admin renderer. When present the
   // editor surfaces "structure view" messaging and promotes "View on site"
@@ -460,6 +490,23 @@ export function PostSectionEditor({
           structuralTypes={structuralTypes}
         />
 
+        {unmanagedTypes.length > 0 && (
+          <div
+            role="status"
+            className="border-border bg-muted/50 flex items-start gap-3 border-b px-4 py-2.5"
+          >
+            <Lock className="text-muted-foreground mt-0.5 shrink-0" size={16} aria-hidden />
+            <p className="text-muted-foreground flex-1 text-sm">
+              This post has{' '}
+              <span className="text-foreground font-medium">
+                {unmanagedTypes.length} section type{unmanagedTypes.length > 1 ? 's' : ''}
+              </span>{' '}
+              managed outside the editor ({unmanagedTypes.join(', ')}). They are preserved on save
+              but edited in your seed script or code, not here.
+            </p>
+          </div>
+        )}
+
         {validation && (
           <ValidationSummary
             errors={validation.errors}

package/src/views/settings/components.tsx

@@ -3,6 +3,7 @@
 import * as Dialog from '@radix-ui/react-dialog'
 import { AlertTriangle, Check, Loader2, Lock } from 'lucide-react'
 import { useId, type ReactNode } from 'react'
+import { adminPortalContainer } from '../../lib/portal-container.js'
 import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
 
 /**
@@ -290,7 +291,7 @@ export function ConfirmDangerousSettingDialog({
 }) {
   return (
     <Dialog.Root open={open} onOpenChange={(o) => !o && onCancel()}>
-      <Dialog.Portal>
+      <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
         <Dialog.Content className="bg-card text-card-foreground fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg p-6 shadow-lg">
           <div className="mb-3 flex items-center gap-2">