@actuate-media/cms-admin 0.67.0 → 0.69.0

package/src/__tests__/router/query-string.test.ts

@@ -0,0 +1,54 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { act, renderHook } from '@testing-library/react'
+
+import { parseRouteQuery, useAdminRouter } from '../../router/index.js'
+
+// The admin router must carry the query string in `currentPath` so deep links
+// like `/pages/new?parent=<id>` survive hard reloads and back/forward — not
+// just in-app `navigate()` calls (which always carried it).
+describe('useAdminRouter query strings', () => {
+  it('includes the query string when syncing from the browser URL on mount', () => {
+    window.history.pushState({}, '', '/admin/pages/new?parent=abc')
+
+    const { result } = renderHook(() => useAdminRouter('/admin', '/pages/new'))
+
+    expect(result.current.currentPath).toBe('/pages/new?parent=abc')
+    expect(result.current.search).toBe('?parent=abc')
+    // matchRoute strips the query, so route patterns still match.
+    expect(result.current.matchRoute('/pages/new')).toEqual({})
+    expect(parseRouteQuery(result.current.currentPath).get('parent')).toBe('abc')
+  })
+
+  it('carries the query string through popstate (back/forward)', () => {
+    window.history.pushState({}, '', '/admin/settings?tab=users')
+    const { result } = renderHook(() => useAdminRouter('/admin', '/'))
+
+    act(() => {
+      window.history.pushState({}, '', '/admin/seo?tab=audit&issueId=i1')
+      window.dispatchEvent(new PopStateEvent('popstate'))
+    })
+
+    expect(result.current.currentPath).toBe('/seo?tab=audit&issueId=i1')
+    expect(result.current.search).toBe('?tab=audit&issueId=i1')
+    expect(result.current.matchRoute('/seo')).toEqual({})
+    expect(result.current.matchRoute('/seo/:id')).toBeNull()
+  })
+
+  it('handles a query on the admin root path', () => {
+    window.history.pushState({}, '', '/admin?foo=1')
+
+    const { result } = renderHook(() => useAdminRouter('/admin', '/'))
+
+    expect(result.current.currentPath).toBe('/?foo=1')
+    expect(result.current.matchRoute('/')).toEqual({})
+  })
+
+  it('parseRouteQuery accepts full paths, raw search strings, and hashes', () => {
+    expect(parseRouteQuery('/pages/new?parent=abc').get('parent')).toBe('abc')
+    expect(parseRouteQuery('?tab=users&selected=u1').get('selected')).toBe('u1')
+    expect(parseRouteQuery('/pages').get('parent')).toBeNull()
+    expect(parseRouteQuery('').get('parent')).toBeNull()
+    expect(parseRouteQuery('/seo?tab=audit#section').get('tab')).toBe('audit')
+  })
+})

package/src/__tests__/views/collection-list-nav.render.test.tsx

@@ -3,9 +3,14 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, screen, within } from '@testing-library/react'
 
 /**
- * Regression for the post-list navigation bug: CollectionList must open
- * post-type rows in the section editor (`/posts/:type/:id/edit`), not the
- * generic `/:collection/:id` route — which 404s when the slug is `posts`.
+ * CollectionList row interactions with the inline entry detail pane
+ * (design Entries split-pane):
+ *  - row / title click toggles the 400px detail pane (no navigation)
+ *  - "Open full editor" and row double-click open the correct editor route
+ *
+ * Regression (post-list navigation bug): post-type rows must open the section
+ * editor (`/posts/:type/:id/edit`), never the generic `/:collection/:id`
+ * route — which 404s when the slug is `posts`.
  */
 
 vi.mock('../../lib/api.js', () => ({
@@ -40,17 +45,58 @@ beforeEach(() => {
   listDocs = []
 })
 
-describe('CollectionList navigation (post collection)', () => {
-  it('opens a post row in the section editor, not the generic route', () => {
+describe('CollectionList entry detail pane + navigation (post collection)', () => {
+  it('row click opens the detail pane instead of navigating', () => {
+    listDocs = [
+      {
+        id: '1',
+        title: 'Hello',
+        status: 'PUBLISHED',
+        updatedAt: '2026-06-01T00:00:00Z',
+        data: { title: 'Hello' },
+      },
+    ]
+    const onNavigate = vi.fn()
+    render(<CollectionList collectionSlug="posts" config={POST_CONFIG} onNavigate={onNavigate} />)
+
+    const titleButton = within(screen.getByRole('table')).getByRole('button', { name: 'Hello' })
+    expect(titleButton.getAttribute('aria-expanded')).toBe('false')
+    fireEvent.click(titleButton)
+
+    expect(onNavigate).not.toHaveBeenCalled()
+    expect(titleButton.getAttribute('aria-expanded')).toBe('true')
+    expect(screen.getByRole('region', { name: 'Post details' })).toBeTruthy()
+
+    // Clicking again toggles the pane closed.
+    fireEvent.click(titleButton)
+    expect(screen.queryByRole('region', { name: 'Post details' })).toBeNull()
+  })
+
+  it('"Open full editor" opens the section editor, not the generic route', () => {
     listDocs = [{ id: '1', title: 'Hello', status: 'PUBLISHED', updatedAt: '2026-06-01T00:00:00Z' }]
     const onNavigate = vi.fn()
     render(<CollectionList collectionSlug="posts" config={POST_CONFIG} onNavigate={onNavigate} />)
 
     fireEvent.click(within(screen.getByRole('table')).getByRole('button', { name: 'Hello' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Open full editor' }))
+
     expect(onNavigate).toHaveBeenCalledWith('/posts/posts/1/edit')
     expect(onNavigate).not.toHaveBeenCalledWith('/posts/1')
   })
 
+  it('row double-click opens the section editor directly', () => {
+    listDocs = [{ id: '1', title: 'Hello', status: 'PUBLISHED', updatedAt: '2026-06-01T00:00:00Z' }]
+    const onNavigate = vi.fn()
+    render(<CollectionList collectionSlug="posts" config={POST_CONFIG} onNavigate={onNavigate} />)
+
+    const row = within(screen.getByRole('table'))
+      .getByRole('button', { name: 'Hello' })
+      .closest('tr')!
+    fireEvent.doubleClick(row)
+
+    expect(onNavigate).toHaveBeenCalledWith('/posts/posts/1/edit')
+  })
+
   it('starts a new post in the section editor', () => {
     const onNavigate = vi.fn()
     render(<CollectionList collectionSlug="posts" config={POST_CONFIG} onNavigate={onNavigate} />)

package/src/__tests__/views/forms-list.render.test.tsx

@@ -3,8 +3,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 
 // Drive the Forms list through a mocked forms-service so the test owns the
-// data and can assert filtering, search, the notify toggle, and the schema
-// drawer without a real backend.
+// data and can assert filtering, search, the notify toggle, and the inline
+// schema pane without a real backend.
 function makeForm(over: Record<string, unknown> = {}) {
   return {
     id: 'f1',
@@ -56,6 +56,7 @@ const fetchFormSchema = vi.fn(async () => ({
   activeVersionId: null,
   versions: [],
 }))
+const saveFormSchema = vi.fn(async (_id: string, _fields: unknown[]) => ({ data: {} }))
 const fetchEmbedSettings = vi.fn(async () => ({}))
 const fetchNotificationSettings = vi.fn(async () => ({ enabled: true, recipients: [] }))
 
@@ -64,7 +65,7 @@ vi.mock('../../lib/forms-service.js', () => ({
   fetchFormStats: () => fetchFormStats(),
   setNotifyEnabled: (id: string, v: boolean) => setNotifyEnabled(id, v),
   fetchFormSchema: () => fetchFormSchema(),
-  saveFormSchema: vi.fn(async () => ({ data: {} })),
+  saveFormSchema: (id: string, fields: unknown[]) => saveFormSchema(id, fields),
   fetchEmbedSettings: () => fetchEmbedSettings(),
   updateEmbedSettings: vi.fn(async () => ({ data: {} })),
   fetchNotificationSettings: () => fetchNotificationSettings(),
@@ -79,6 +80,8 @@ beforeEach(() => {
   fetchForms.mockClear()
   fetchFormStats.mockClear()
   setNotifyEnabled.mockClear()
+  fetchFormSchema.mockClear()
+  saveFormSchema.mockClear()
 })
 
 describe('Forms list', () => {
@@ -128,14 +131,39 @@ describe('Forms list', () => {
     await waitFor(() => expect(setNotifyEnabled).toHaveBeenCalledWith('f1', false))
   })
 
-  it('opens the schema drawer from the Schema action', async () => {
+  it('opens the inline schema pane from the Schema action and saves through the service', async () => {
     render(<Forms onNavigate={() => {}} />)
     await screen.findByText('Contact Us')
 
-    fireEvent.click(screen.getAllByRole('button', { name: 'Schema' })[0]!)
+    const schemaButton = screen.getAllByRole('button', { name: 'Schema' })[0]!
+    expect(schemaButton.getAttribute('aria-expanded')).toBe('false')
+    fireEvent.click(schemaButton)
 
     await waitFor(() => expect(fetchFormSchema).toHaveBeenCalled())
-    // Drawer tabs are present.
+    // Pane renders as a labelled inline region (not an overlay dialog).
+    expect(screen.getByRole('region', { name: 'Form schema' })).toBeTruthy()
+    expect(schemaButton.getAttribute('aria-expanded')).toBe('true')
     expect(await screen.findByRole('tab', { name: 'Fields' })).toBeTruthy()
+
+    // Saving flows through the same saveFormSchema service call.
+    fireEvent.click(await screen.findByRole('button', { name: 'Save Schema' }))
+    await waitFor(() =>
+      expect(saveFormSchema).toHaveBeenCalledWith(
+        'f1',
+        expect.arrayContaining([expect.objectContaining({ key: 'name' })]),
+      ),
+    )
+  })
+
+  it('clicking Schema again toggles the pane closed', async () => {
+    render(<Forms onNavigate={() => {}} />)
+    await screen.findByText('Contact Us')
+
+    const schemaButton = screen.getAllByRole('button', { name: 'Schema' })[0]!
+    fireEvent.click(schemaButton)
+    await waitFor(() => expect(screen.getByRole('region', { name: 'Form schema' })).toBeTruthy())
+
+    fireEvent.click(schemaButton)
+    await waitFor(() => expect(screen.queryByRole('region', { name: 'Form schema' })).toBeNull())
   })
 })

package/src/__tests__/views/page-builder-sections-panel.render.test.tsx

@@ -0,0 +1,138 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { PageNode } from '@actuate-media/cms-core'
+
+const { BuilderSectionsPanel } = await import('../../views/page-builder/BuilderSectionsPanel.js')
+
+/** Minimal builder tree: a hero section plus an empty, hidden section. */
+function makeTree(): PageNode {
+  return {
+    id: 'page1',
+    type: 'page',
+    children: [
+      {
+        id: 'sec1',
+        type: 'section',
+        settings: {},
+        children: [
+          {
+            id: 'cont1',
+            type: 'container',
+            settings: {},
+            children: [
+              {
+                id: 'row1',
+                type: 'row',
+                settings: {},
+                children: [
+                  {
+                    id: 'col1',
+                    type: 'column',
+                    settings: { width: 12 },
+                    children: [
+                      {
+                        id: 'blk1',
+                        type: 'block',
+                        settings: { blockType: 'hero', variant: 'centered' },
+                        data: {},
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      { id: 'sec2', type: 'section', settings: { visibility: 'hidden' }, children: [] },
+    ],
+  }
+}
+
+function renderPanel(over: Partial<Parameters<typeof BuilderSectionsPanel>[0]> = {}) {
+  const props = {
+    tree: makeTree(),
+    selectedNodeId: null,
+    collapsed: false,
+    onToggleCollapsed: vi.fn(),
+    onSelect: vi.fn(),
+    onReorder: vi.fn(),
+    onAddSection: vi.fn(),
+    ...over,
+  }
+  render(<BuilderSectionsPanel {...props} />)
+  return props
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('BuilderSectionsPanel', () => {
+  it('lists the page sections in order with derived names and block counts', () => {
+    renderPanel()
+
+    // First section is named after its first block's catalog label.
+    expect(screen.getByText('Hero')).toBeTruthy()
+    expect(screen.getByText('1 block')).toBeTruthy()
+    // Empty section falls back to a positional name.
+    expect(screen.getByText('Section 2')).toBeTruthy()
+    expect(screen.getByText('Empty section')).toBeTruthy()
+    // Count chip in the header.
+    expect(screen.getByText('2')).toBeTruthy()
+    // Panel is an accessible nav landmark.
+    expect(screen.getByRole('navigation', { name: 'Page sections' })).toBeTruthy()
+  })
+
+  it('fires the selection callback when a section row is clicked', () => {
+    const props = renderPanel()
+
+    // `/^Hero/` excludes the drag handle ("Drag to reorder Hero").
+    fireEvent.click(screen.getByRole('button', { name: /^Hero/ }))
+    expect(props.onSelect).toHaveBeenCalledWith('sec1')
+  })
+
+  it('marks the selected section with aria-current', () => {
+    renderPanel({ selectedNodeId: 'sec1' })
+
+    const row = screen.getByRole('button', { name: /^Hero/ })
+    expect(row.getAttribute('aria-current')).toBe('true')
+  })
+
+  it('exposes keyboard-accessible drag handles per section', () => {
+    renderPanel()
+    expect(screen.getByRole('button', { name: 'Drag to reorder Hero' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Drag to reorder Section 2' })).toBeTruthy()
+  })
+
+  it('fires the add-section callback from the bottom affordance', () => {
+    const props = renderPanel()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add Section' }))
+    expect(props.onAddSection).toHaveBeenCalledTimes(1)
+  })
+
+  it('collapses to a rail with an expand toggle', () => {
+    const props = renderPanel({ collapsed: true })
+
+    // Section rows are gone; only the expand affordance remains.
+    expect(screen.queryByText('Hero')).toBeNull()
+    const toggle = screen.getByRole('button', { name: 'Expand sections panel' })
+    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+
+    fireEvent.click(toggle)
+    expect(props.onToggleCollapsed).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows a collapse toggle with aria-expanded when open', () => {
+    renderPanel()
+    const toggle = screen.getByRole('button', { name: 'Collapse sections panel' })
+    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+  })
+
+  it('shows an empty message when the page has no sections', () => {
+    renderPanel({ tree: { id: 'page1', type: 'page', children: [] } })
+    expect(screen.getByText(/No sections yet/)).toBeTruthy()
+  })
+})

package/src/__tests__/views/page-templates.render.test.tsx

@@ -0,0 +1,142 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+const cmsApi = vi.fn()
+vi.mock('../../lib/api.js', () => ({ cmsApi: (...args: unknown[]) => cmsApi(...args) }))
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))
+
+const { PageTemplates } = await import('../../views/page-builder/PageTemplates.js')
+
+function section(id: string) {
+  return { id, type: 'section', settings: {}, children: [] }
+}
+
+const TEMPLATES = [
+  {
+    id: 'builtin-landing',
+    name: 'Landing Page',
+    description: 'Hero, features cards, CTA, testimonials, and final CTA',
+    category: 'landing',
+    builtIn: true,
+    updatedAt: '2026-05-29T00:00:00.000Z',
+    thumbnail: null,
+    tree: { id: 'p1', type: 'page', children: [section('a'), section('b'), section('c')] },
+  },
+  {
+    id: 'custom-1',
+    name: 'Team Member',
+    description: 'Avatar hero, full bio, and contact links',
+    category: 'content',
+    builtIn: false,
+    updatedAt: '2026-06-10T00:00:00.000Z',
+    thumbnail: null,
+    tree: { id: 'p2', type: 'page', children: [section('a')] },
+  },
+]
+
+beforeEach(() => {
+  cmsApi.mockReset()
+  cmsApi.mockImplementation(async (endpoint: string, options?: RequestInit) => {
+    if (endpoint === '/page-templates' && !options?.method) {
+      return { data: TEMPLATES, status: 200 }
+    }
+    return { data: {}, status: 200 }
+  })
+})
+
+describe('PageTemplates card grid', () => {
+  it('renders a card per template with name, category, and section-count meta', async () => {
+    render(<PageTemplates onNavigate={() => {}} />)
+
+    expect(await screen.findByText('Landing Page')).toBeTruthy()
+    expect(screen.getByText('Team Member')).toBeTruthy()
+    // Section counts derived from each template's tree.
+    expect(screen.getByText(/3 sections/)).toBeTruthy()
+    expect(screen.getByText(/1 section ·/)).toBeTruthy()
+    // Category labels from the design's palette.
+    expect(screen.getByText('Landing Page')).toBeTruthy()
+    expect(screen.getByText('Built-in')).toBeTruthy()
+  })
+
+  it('hides edit/delete actions on built-in templates (server rejects them)', async () => {
+    render(<PageTemplates onNavigate={() => {}} />)
+    await screen.findByText('Landing Page')
+
+    expect(screen.queryByRole('button', { name: 'Edit Landing Page' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Delete Landing Page' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Edit Team Member' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Delete Team Member' })).toBeTruthy()
+  })
+
+  it('deletes a custom template only after the confirm dialog is accepted', async () => {
+    render(<PageTemplates onNavigate={() => {}} />)
+    await screen.findByText('Team Member')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Delete Team Member' }))
+
+    // Confirm dialog is up; nothing deleted yet.
+    expect(await screen.findByText('Delete template?')).toBeTruthy()
+    expect(cmsApi).not.toHaveBeenCalledWith(
+      '/page-templates/custom-1',
+      expect.objectContaining({ method: 'DELETE' }),
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/page-templates/custom-1',
+        expect.objectContaining({ method: 'DELETE' }),
+      ),
+    )
+  })
+
+  it('opens the edit modal seeded with the template and saves via PUT', async () => {
+    render(<PageTemplates onNavigate={() => {}} />)
+    await screen.findByText('Team Member')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Edit Team Member' }))
+
+    const nameInput = (await screen.findByPlaceholderText('Template name')) as HTMLInputElement
+    expect(nameInput.value).toBe('Team Member')
+
+    fireEvent.change(nameInput, { target: { value: 'Team Bio' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }))
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/page-templates/custom-1',
+        expect.objectContaining({ method: 'PUT' }),
+      ),
+    )
+    const putCall = cmsApi.mock.calls.find(
+      (c) => (c[1] as RequestInit | undefined)?.method === 'PUT',
+    )!
+    expect(JSON.parse((putCall[1] as RequestInit).body as string)).toMatchObject({
+      name: 'Team Bio',
+      category: 'content',
+    })
+  })
+
+  it('filters cards by search text', async () => {
+    render(<PageTemplates onNavigate={() => {}} />)
+    await screen.findByText('Team Member')
+
+    fireEvent.change(screen.getByPlaceholderText('Search templates…'), {
+      target: { value: 'landing' },
+    })
+
+    await waitFor(() => {
+      expect(screen.queryByText('Team Member')).toBeNull()
+      expect(screen.getByText('Landing Page')).toBeTruthy()
+    })
+  })
+
+  it('shows the empty state when no templates exist', async () => {
+    cmsApi.mockResolvedValue({ data: [], status: 200 })
+    render(<PageTemplates onNavigate={() => {}} />)
+
+    expect(await screen.findByText('No page templates yet')).toBeTruthy()
+  })
+})

package/src/__tests__/views/post-type-editor.render.test.tsx

@@ -0,0 +1,116 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+const cmsApiMock = vi.fn()
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (...args: unknown[]) => cmsApiMock(...args),
+}))
+
+const { PostTypeEditor } = await import('../../views/Posts/PostTypeEditor.js')
+
+const COLLECTIONS = [
+  {
+    slug: 'blog',
+    labels: { singular: 'Blog Post', plural: 'Blog' },
+    type: 'post',
+    urlPrefix: 'blog',
+    description: 'Long-form articles',
+    icon: 'file-text',
+    color: 'purple',
+    group: 'Posts',
+    hidden: false,
+    fieldCount: 3,
+    fields: [
+      { name: 'title', type: 'text', required: true },
+      { name: 'body', type: 'richText', required: false },
+      { name: 'featuredImage', type: 'media', required: false },
+    ],
+  },
+]
+
+const POSTS = {
+  posts: [],
+  total: 7,
+  page: 1,
+  pageSize: 1,
+  types: [
+    {
+      slug: 'blog',
+      singular: 'Blog Post',
+      plural: 'Blog',
+      description: 'Long-form articles',
+      urlPrefix: 'blog',
+      color: 'purple',
+      icon: 'file-text',
+      fieldCount: 3,
+      count: 7,
+    },
+  ],
+  authors: [],
+}
+
+function installMocks() {
+  cmsApiMock.mockImplementation((url: string) => {
+    if (url === '/collections') return { data: COLLECTIONS }
+    if (url.startsWith('/posts')) return { data: POSTS }
+    return { error: `unexpected url: ${url}` }
+  })
+}
+
+describe('PostTypeEditor', () => {
+  beforeEach(() => {
+    cmsApiMock.mockReset()
+    installMocks()
+  })
+
+  it('renders identity, post-count badge, and the live field list', async () => {
+    render(<PostTypeEditor slug="blog" onNavigate={vi.fn()} />)
+
+    await waitFor(() => expect(screen.getByText('Field Builder')).toBeTruthy())
+
+    // Toolbar: breadcrumb + count badge.
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' }).textContent).toContain('Blog')
+    expect(screen.getByText('7 posts')).toBeTruthy()
+
+    // Identity panel values.
+    expect(screen.getByText('Long-form articles')).toBeTruthy()
+    expect(screen.getByText('/api/cms/collections/blog/{id}')).toBeTruthy()
+
+    // Field rows with humanized labels, keys, and type badges.
+    expect(screen.getByText('Featured Image')).toBeTruthy()
+    expect(screen.getByText('featuredImage')).toBeTruthy()
+    expect(screen.getByText('Rich Text')).toBeTruthy()
+    expect(screen.getByText('Required')).toBeTruthy()
+    expect(screen.getAllByText('Optional')).toHaveLength(2)
+  })
+
+  it('generates a copyable field snippet and flags duplicate keys', async () => {
+    render(<PostTypeEditor slug="blog" onNavigate={vi.fn()} />)
+    await waitFor(() => expect(screen.getByText('Field Builder')).toBeTruthy())
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add Field' }))
+    fireEvent.click(screen.getByRole('radio', { name: /Short Text/ }))
+
+    const nameInput = screen.getByLabelText('Field Name')
+    fireEvent.change(nameInput, { target: { value: 'Client Name' } })
+
+    // Auto-derived key + snippet preview.
+    expect((screen.getByLabelText('Field Key') as HTMLInputElement).value).toBe('clientName')
+    expect(screen.getByText(/clientName: \{ type: 'text', label: 'Client Name' \},/)).toBeTruthy()
+
+    // A name colliding with an existing field key blocks the snippet.
+    fireEvent.change(nameInput, { target: { value: 'Featured Image' } })
+    expect(screen.getByText(/already exists on this type/)).toBeTruthy()
+    expect(screen.queryByText('Copy snippet')).toBeNull()
+  })
+
+  it('shows a not-found notice for unknown slugs', async () => {
+    const onNavigate = vi.fn()
+    render(<PostTypeEditor slug="ghost" onNavigate={onNavigate} />)
+
+    await waitFor(() => expect(screen.getByText('No post type named "ghost"')).toBeTruthy())
+    fireEvent.click(screen.getByRole('button', { name: 'Back to Post Types' }))
+    expect(onNavigate).toHaveBeenCalledWith('/posts/types')
+  })
+})