@actuate-media/cms-admin 0.42.0 → 0.42.2

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

@@ -11,7 +11,9 @@ const {
   validatePost,
   validateTemplate,
   emptyPostFromTemplate,
+  fetchPostForEditor,
   fetchTemplateForEditor,
+  missingPostFields,
   savePostDraft,
 } = await import('../../lib/post-editor-service.js')
 
@@ -89,6 +91,30 @@ describe('validatePost', () => {
     expect(r.warnings.some((w) => w.includes('SEO title'))).toBe(true)
   })
 
+  it('does not block publish on unmanaged (externally-managed) sections', () => {
+    const r = validatePost(
+      basePost({
+        seoTitle: 'T',
+        seoDescription: 'D',
+        sections: [
+          // No registered definition for `opal-hero` → validateSectionContent
+          // would report "Unknown section type"; the unmanaged flag must skip it.
+          {
+            id: 's1',
+            sectionType: 'opal-hero',
+            name: 'Opal Hero',
+            visible: true,
+            content: { heading: 'Hi' },
+            settings: {},
+            unmanaged: true,
+          },
+        ],
+      }),
+      true,
+    )
+    expect(r.errors).toEqual([])
+  })
+
   it('skips hidden sections during publish validation', () => {
     const r = validatePost(
       basePost({
@@ -240,6 +266,116 @@ describe('saveTemplate', () => {
   })
 })
 
+describe('unmanaged section round-trip (data-loss regression)', () => {
+  // The old service coerced sections with the default `'drop'` strategy, so a
+  // post containing a section type unknown to the admin bundle (e.g. a custom
+  // `opal-*` type missing from config) lost those sections on open + save.
+  const OPAL_SECTION = {
+    id: 'op1',
+    sectionType: 'opal-prose-band',
+    name: 'Prose Band',
+    visible: true,
+    content: { html: '<p>kept</p>' },
+    settings: { paddingY: 'lg' as const },
+  }
+
+  it('fetchPostForEditor preserves unknown section types as unmanaged', async () => {
+    cmsApiMock.mockResolvedValueOnce({
+      data: {
+        id: 'p1',
+        title: 'Logan',
+        slug: 'logan',
+        status: 'PUBLISHED',
+        data: {
+          sections: [
+            OPAL_SECTION,
+            { id: 'q1', sectionType: 'quote', name: 'Q', visible: true, content: {}, settings: {} },
+          ],
+        },
+      },
+    })
+    const post = await fetchPostForEditor('locations', 'p1')
+    expect(post.sections.map((s) => s.sectionType)).toEqual(['opal-prose-band', 'quote'])
+    const opal = post.sections[0]!
+    expect(opal.unmanaged).toBe(true)
+    // content/settings survive verbatim
+    expect(opal.content).toEqual({ html: '<p>kept</p>' })
+  })
+
+  it('savePostDraft round-trips unmanaged sections, stripping the derived marker', async () => {
+    cmsApiMock.mockResolvedValueOnce({
+      data: { id: 'p1', title: 'Logan', slug: 'logan', status: 'DRAFT', data: { sections: [] } },
+    })
+    await savePostDraft(
+      basePost({
+        postType: 'locations',
+        sections: [{ ...OPAL_SECTION, unmanaged: true }],
+      }),
+    )
+    const [, init] = cmsApiMock.mock.calls[0]!
+    const body = JSON.parse(init.body as string)
+    expect(body.sections).toHaveLength(1)
+    expect(body.sections[0].sectionType).toBe('opal-prose-band')
+    expect(body.sections[0].content).toEqual({ html: '<p>kept</p>' })
+    // The marker is derived from the registry on read — never persisted.
+    expect('unmanaged' in body.sections[0]).toBe(false)
+  })
+
+  it('fetchTemplateForEditor preserves unknown section types in templates', async () => {
+    cmsApiMock.mockResolvedValueOnce({
+      data: { postType: 'locations', docId: 'tmpl-1', header: {}, sections: [OPAL_SECTION] },
+    })
+    const t = await fetchTemplateForEditor('locations')
+    expect(t.sections).toHaveLength(1)
+    expect(t.sections[0]!.unmanaged).toBe(true)
+  })
+
+  it('emptyPostFromTemplate clones unmanaged template sections without throwing', async () => {
+    // `createSection` throws for unregistered types — the clone must not use it.
+    cmsApiMock.mockResolvedValueOnce({
+      data: { postType: 'locations', docId: 'tmpl-1', header: {}, sections: [OPAL_SECTION] },
+    })
+    const post = await emptyPostFromTemplate('locations')
+    expect(post.sections).toHaveLength(1)
+    expect(post.sections[0]!.sectionType).toBe('opal-prose-band')
+    expect(post.sections[0]!.id).not.toBe('op1')
+  })
+})
+
+describe('missingPostFields (schema guard)', () => {
+  const FULL_FIELDS = {
+    title: { type: 'text' },
+    slug: { type: 'slug' },
+    sections: { type: 'json' },
+    excerpt: { type: 'text' },
+    featuredImage: { type: 'media' },
+    body: { type: 'richText' },
+    category: { type: 'text' },
+    publishDate: { type: 'date' },
+    metaTitle: { type: 'text' },
+    metaDescription: { type: 'text' },
+  }
+
+  it('returns [] for a fully-declared post-type collection', () => {
+    const config = { collections: { blog: { slug: 'blog', fields: FULL_FIELDS } } }
+    expect(missingPostFields(config, 'blog')).toEqual([])
+  })
+
+  it('reports fields the editor writes that the collection does not declare', () => {
+    const config = {
+      collections: { blog: { slug: 'blog', fields: { title: { type: 'text' } } } },
+    }
+    const missing = missingPostFields(config, 'blog')
+    expect(missing).toContain('sections')
+    expect(missing).toContain('metaTitle')
+  })
+
+  it('trusts the consumer when config or the collection is absent', () => {
+    expect(missingPostFields(undefined, 'blog')).toEqual([])
+    expect(missingPostFields({ collections: {} }, 'blog')).toEqual([])
+  })
+})
+
 describe('savePostDraft', () => {
   it('PUTs the post fields + sections for an existing post', async () => {
     cmsApiMock.mockResolvedValueOnce({

package/src/__tests__/views/portal-container.test.tsx

@@ -0,0 +1,56 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { ConfirmDangerousSettingDialog } from '../../views/settings/components.js'
+import { adminPortalContainer } from '../../lib/portal-container.js'
+
+/**
+ * Regression: theme tokens only exist under `.actuate-admin` (theme.css), so
+ * Radix portals must mount INSIDE that scope. Portaling to document.body
+ * (Radix's default) produced unstyled overlays — transparent cards, colorless
+ * destructive buttons, broken dark mode.
+ */
+
+afterEach(cleanup)
+
+function renderInAdminRoot(ui: React.ReactElement) {
+  const root = document.createElement('div')
+  root.className = 'actuate-admin'
+  document.body.appendChild(root)
+  return render(ui, { container: root })
+}
+
+describe('adminPortalContainer', () => {
+  it('resolves the admin root element', () => {
+    const root = document.createElement('div')
+    root.className = 'actuate-admin'
+    document.body.appendChild(root)
+    expect(adminPortalContainer()).toBe(root)
+    root.remove()
+  })
+
+  it('returns undefined when no admin root is mounted', () => {
+    document.querySelectorAll('.actuate-admin').forEach((el) => el.remove())
+    expect(adminPortalContainer()).toBeUndefined()
+  })
+})
+
+describe('portaled overlays mount inside the admin theme scope', () => {
+  it('renders the dangerous-setting confirm dialog within .actuate-admin', async () => {
+    renderInAdminRoot(
+      <ConfirmDangerousSettingDialog
+        open
+        title="Block this production site from search engines?"
+        description="This may prevent search engines from indexing your production site."
+        confirmLabel="Enable No Index"
+        onConfirm={() => {}}
+        onCancel={() => {}}
+      />,
+    )
+
+    const title = await screen.findByText(/Block this production site/)
+    // The dialog content must live inside the token scope, otherwise
+    // bg-card / text-warning / bg-destructive resolve to nothing.
+    expect(title.closest('.actuate-admin')).not.toBeNull()
+  })
+})

package/src/__tests__/views/post-section-editor.test.tsx

@@ -0,0 +1,147 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+const fetchPostForEditor = vi.fn()
+const fetchTemplateForEditor = vi.fn()
+vi.mock('../../lib/post-editor-service.js', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../lib/post-editor-service.js')>()
+  return {
+    ...actual,
+    fetchPostForEditor: (...args: unknown[]) => fetchPostForEditor(...args),
+    fetchTemplateForEditor: (...args: unknown[]) => fetchTemplateForEditor(...args),
+  }
+})
+
+const { PostSectionEditor } = await import('../../views/post-editor/PostSectionEditor.js')
+
+const validConfig = {
+  collections: {
+    blog: {
+      slug: 'blog',
+      labels: { singular: 'Post', plural: 'Posts' },
+      fields: {
+        title: { type: 'text' },
+        slug: { type: 'slug' },
+        sections: { type: 'json' },
+        excerpt: { type: 'text' },
+        featuredImage: { type: 'media' },
+        body: { type: 'richText' },
+        category: { type: 'text' },
+        publishDate: { type: 'date' },
+        metaTitle: { type: 'text' },
+        metaDescription: { type: 'text' },
+      },
+    },
+  },
+} as any
+
+function loadedPost(
+  sections: Array<{ id: string; sectionType: string; name: string; unmanaged?: boolean }>,
+) {
+  return {
+    id: 'p1',
+    postType: 'blog',
+    title: 'Logan',
+    slug: 'logan',
+    excerpt: '',
+    featuredImage: '',
+    body: '',
+    category: '',
+    status: 'DRAFT',
+    publishDate: null,
+    sections: sections.map((s) => ({ ...s, visible: true, content: {}, settings: {} })),
+    seoTitle: '',
+    seoDescription: '',
+    publishedAt: null,
+    updatedAt: null,
+  }
+}
+
+afterEach(() => {
+  fetchPostForEditor.mockReset()
+  fetchTemplateForEditor.mockReset()
+})
+
+describe('PostSectionEditor schema guard', () => {
+  it('refuses to operate when the post-type collection is missing the sections field', async () => {
+    const badConfig = {
+      collections: { blog: { slug: 'blog', fields: { title: { type: 'text' } } } },
+    } as any
+
+    render(
+      <PostSectionEditor
+        postType="blog"
+        documentId="p1"
+        config={badConfig}
+        onNavigate={() => {}}
+        session={{}}
+      />,
+    )
+
+    expect(await screen.findByText(/missing required field/i)).toBeTruthy()
+    // The guard must short-circuit before any network read.
+    expect(fetchPostForEditor).not.toHaveBeenCalled()
+  })
+
+  it('does not block when no config is provided (embedding/test contexts)', async () => {
+    fetchTemplateForEditor.mockRejectedValue(new Error('no template'))
+    fetchPostForEditor.mockResolvedValue(
+      loadedPost([{ id: 's1', sectionType: 'quote', name: 'Quote' }]),
+    )
+    render(
+      <PostSectionEditor
+        postType="blog"
+        documentId="p1"
+        config={undefined}
+        onNavigate={() => {}}
+        session={{}}
+      />,
+    )
+    expect(await screen.findByText('Sections')).toBeTruthy()
+  })
+})
+
+describe('PostSectionEditor unmanaged sections', () => {
+  it('shows the externally-managed banner when a post has unmanaged sections', async () => {
+    fetchTemplateForEditor.mockRejectedValue(new Error('no template'))
+    fetchPostForEditor.mockResolvedValue(
+      loadedPost([
+        { id: 's1', sectionType: 'quote', name: 'Quote' },
+        { id: 's2', sectionType: 'opal-prose-band', name: 'Prose Band', unmanaged: true },
+      ]),
+    )
+    render(
+      <PostSectionEditor
+        postType="blog"
+        documentId="p1"
+        config={validConfig}
+        onNavigate={() => {}}
+        session={{}}
+      />,
+    )
+
+    await screen.findByText('Sections')
+    const banner = screen.getByText(/managed outside the editor/)
+    expect(banner.textContent).toContain('opal-prose-band')
+  })
+
+  it('shows no banner when every section type is registered', async () => {
+    fetchTemplateForEditor.mockRejectedValue(new Error('no template'))
+    fetchPostForEditor.mockResolvedValue(
+      loadedPost([{ id: 's1', sectionType: 'quote', name: 'Quote' }]),
+    )
+    render(
+      <PostSectionEditor
+        postType="blog"
+        documentId="p1"
+        config={validConfig}
+        onNavigate={() => {}}
+        session={{}}
+      />,
+    )
+
+    await screen.findByText('Sections')
+    expect(screen.queryByText(/managed outside the editor/)).toBeNull()
+  })
+})

package/src/components/LocaleSwitcher.tsx

@@ -2,6 +2,7 @@
 
 import { Globe, Check, ChevronDown } from 'lucide-react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { adminPortalContainer } from '../lib/portal-container.js'
 import { useLocale } from './LocaleProvider.js'
 
 export function LocaleSwitcher() {
@@ -26,7 +27,7 @@ export function LocaleSwitcher() {
         </button>
       </DropdownMenu.Trigger>
 
-      <DropdownMenu.Portal>
+      <DropdownMenu.Portal container={adminPortalContainer()}>
         <DropdownMenu.Content
           className="z-50 min-w-[160px] rounded-lg border border-[var(--border)] bg-[var(--popover)] p-1 text-[var(--popover-foreground)] shadow-lg"
           align="end"

package/src/components/SEOPanel.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import * as Select from '@radix-ui/react-select'
+import { adminPortalContainer } from '../lib/portal-container.js'
 import { useState, useMemo } from 'react'
 import {
   Search,
@@ -801,7 +802,7 @@ export function SEOPanel({
                     <ChevronDown className="text-muted-foreground h-4 w-4" />
                   </Select.Icon>
                 </Select.Trigger>
-                <Select.Portal>
+                <Select.Portal container={adminPortalContainer()}>
                   <Select.Content className="border-border bg-card z-50 overflow-hidden rounded-lg border shadow-md">
                     <Select.Viewport className="p-1">
                       {ROBOTS_POLICY_OPTIONS.map((option) => (

package/src/components/forms/Drawer.tsx

@@ -5,6 +5,7 @@
  * token-only styling. Shared by the Forms schema / entry-detail drawers.
  */
 import * as Dialog from '@radix-ui/react-dialog'
+import { adminPortalContainer } from '../../lib/portal-container.js'
 import { X } from 'lucide-react'
 import type { ReactNode } from 'react'
 import { btnGhostIcon } from './primitives.js'
@@ -31,7 +32,7 @@ export function Drawer({
 }) {
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="bg-foreground/40 motion-safe:animate-in motion-safe:fade-in fixed inset-0 z-50" />
         <Dialog.Content
           {...(description ? {} : { 'aria-describedby': undefined })}

package/src/components/seo/Drawer.tsx

@@ -5,6 +5,7 @@
  * token-only styling. Shared by the SEO editor / fix / copilot drawers.
  */
 import * as Dialog from '@radix-ui/react-dialog'
+import { adminPortalContainer } from '../../lib/portal-container.js'
 import { X } from 'lucide-react'
 import type { ReactNode } from 'react'
 import { btnGhostIcon } from './primitives.js'
@@ -28,7 +29,7 @@ export function Drawer({
 }) {
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="bg-foreground/40 motion-safe:animate-in motion-safe:fade-in fixed inset-0 z-50" />
         <Dialog.Content
           // Radix auto-associates `aria-describedby` with the Dialog.Description

package/src/layout/Header.tsx

@@ -3,6 +3,7 @@
 import { useState, type ReactNode } from 'react'
 import { Search, User, ChevronDown, Menu, Sun, Moon } from 'lucide-react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { adminPortalContainer } from '../lib/portal-container.js'
 import { CommandPalette } from '../components/CommandPalette.js'
 import { NotificationBell } from '../components/NotificationBell.js'
 import { useTheme } from '../components/ThemeProvider.js'
@@ -132,7 +133,7 @@ export function Header({
               </button>
             </DropdownMenu.Trigger>
 
-            <DropdownMenu.Portal>
+            <DropdownMenu.Portal container={adminPortalContainer()}>
               <DropdownMenu.Content
                 className="bg-popover text-popover-foreground border-border z-50 min-w-[200px] rounded-lg border p-1 shadow-lg"
                 align="end"

package/src/layout/Sidebar.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState, type ReactNode } from 'react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { adminPortalContainer } from '../lib/portal-container.js'
 import { useTheme } from '../components/ThemeProvider.js'
 import { fetchFormsSidebarCounts, type FormsSidebarCount } from '../lib/forms-service.js'
 import { onFormsChanged } from '../lib/forms-events.js'
@@ -664,7 +665,7 @@ function CollapsedFlyout({ item, ctx }: { item: NavItem; ctx: NavRenderContext }
         </DropdownMenu.Trigger>
       </div>
 
-      <DropdownMenu.Portal>
+      <DropdownMenu.Portal container={adminPortalContainer()}>
         <DropdownMenu.Content
           side="right"
           align="start"

package/src/lib/collection-schema.ts

@@ -0,0 +1,62 @@
+/**
+ * Collection schema guard shared by the Page and Post editors.
+ *
+ * Both editors persist content as top-level keys on a collection document
+ * (`sections`, `metaTitle`, …). The server's field-access layer only writes
+ * keys that are *declared as fields* on the collection — any undeclared key is
+ * silently dropped on save. A collection missing e.g. the `sections` field
+ * would therefore discard all section content with no error, so the editors
+ * use this check to refuse to operate (and explain why) instead.
+ *
+ * When `config` (or its collections) is not provided — some embedding/test
+ * contexts don't pass it — we can't check, so we report nothing missing and
+ * trust the consumer.
+ */
+
+interface CollectionLike {
+  slug?: string
+  fields?: unknown
+}
+
+/** Look up a collection by slug; `collections` may be a record or an array. */
+export function findCollection(config: unknown, slug: string): CollectionLike | null {
+  const collections = (config as { collections?: unknown } | null | undefined)?.collections
+  if (!collections) return null
+  if (Array.isArray(collections)) {
+    return (collections as CollectionLike[]).find((c) => c?.slug === slug) ?? null
+  }
+  if (typeof collections === 'object') {
+    return (collections as Record<string, CollectionLike>)[slug] ?? null
+  }
+  return null
+}
+
+/** Field definitions may be a record (keyed by name) or an array of `{ name }`. */
+export function declaredFieldNames(fields: unknown): Set<string> | null {
+  if (!fields) return null
+  if (Array.isArray(fields)) {
+    return new Set(
+      (fields as Array<{ name?: string }>)
+        .map((f) => f?.name)
+        .filter((n): n is string => typeof n === 'string'),
+    )
+  }
+  if (typeof fields === 'object') return new Set(Object.keys(fields as Record<string, unknown>))
+  return null
+}
+
+/**
+ * Returns the `required` field keys absent from the collection's declared
+ * fields, or `[]` when the collection / its fields can't be inspected.
+ */
+export function missingCollectionFields(
+  config: unknown,
+  slug: string,
+  required: readonly string[],
+): string[] {
+  const collection = findCollection(config, slug)
+  if (!collection) return []
+  const declared = declaredFieldNames(collection.fields)
+  if (declared === null) return []
+  return required.filter((k) => !declared.has(k))
+}

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

@@ -34,6 +34,8 @@ import {
   type PageSection,
 } from '@actuate-media/cms-core/page-sections'
 
+import { missingCollectionFields } from './collection-schema.js'
+
 export type { PageSection } from '@actuate-media/cms-core/page-sections'
 
 // Re-export the pure section helpers so existing editor imports
@@ -151,41 +153,7 @@ export function validatePage(page: EditorPage, forPublish = false): ValidationRe
 const REQUIRED_PAGE_FIELDS = ['sections', 'path', 'metaTitle', 'metaDescription'] as const
 
 export function missingPageFields(config: unknown): string[] {
-  const pages = findPagesCollection(config)
-  if (!pages) return []
-  const declared = declaredFieldNames(pages.fields)
-  if (declared === null) return []
-  return REQUIRED_PAGE_FIELDS.filter((k) => !declared.has(k))
-}
-
-function findPagesCollection(config: unknown): { fields?: unknown } | null {
-  const collections = (config as { collections?: unknown } | null | undefined)?.collections
-  if (!collections) return null
-  if (Array.isArray(collections)) {
-    return (
-      (collections as Array<{ slug?: string; fields?: unknown }>).find(
-        (c) => c?.slug === PAGES_COLLECTION,
-      ) ?? null
-    )
-  }
-  if (typeof collections === 'object') {
-    return (collections as Record<string, { fields?: unknown }>)[PAGES_COLLECTION] ?? null
-  }
-  return null
-}
-
-/** Field definitions may be a record (keyed by name) or an array of `{ name }`. */
-function declaredFieldNames(fields: unknown): Set<string> | null {
-  if (!fields) return null
-  if (Array.isArray(fields)) {
-    return new Set(
-      (fields as Array<{ name?: string }>)
-        .map((f) => f?.name)
-        .filter((n): n is string => typeof n === 'string'),
-    )
-  }
-  if (typeof fields === 'object') return new Set(Object.keys(fields as Record<string, unknown>))
-  return null
+  return missingCollectionFields(config, PAGES_COLLECTION, REQUIRED_PAGE_FIELDS)
 }
 
 // ─── API row mapping ─────────────────────────────────────────────────

package/src/lib/portal-container.ts

@@ -0,0 +1,14 @@
+/**
+ * Admin theme tokens are scoped under `.actuate-admin` (styles/theme.css),
+ * and dark mode / accent / density are applied as classes-attributes on that
+ * same root element. Radix portals default to `document.body`, which sits
+ * OUTSIDE that scope — portaled overlays would render with no theme tokens
+ * at all (transparent cards, colorless buttons) and ignore dark mode.
+ *
+ * Every Radix `*.Portal` in the admin must pass this as its `container`.
+ * Returns `undefined` during SSR (portals only materialize client-side).
+ */
+export function adminPortalContainer(): HTMLElement | undefined {
+  if (typeof document === 'undefined') return undefined
+  return document.querySelector<HTMLElement>('.actuate-admin') ?? undefined
+}