@prenta/admin 2.6.0 → 2.7.0

package/src/__tests__/styles/tailwind-preset.test.ts

@@ -0,0 +1,154 @@
+import { createRequire } from 'node:module'
+import { describe, expect, it } from 'vitest'
+
+/**
+ * `design-system/tokens.tailwind.cjs` is published for consumers' Tailwind v3
+ * configs and lands in `theme.extend`. A key that matches a stock Tailwind key
+ * replaces it for the whole consumer app (`text-sm`, `rounded-sm`, and a
+ * `colors.orange` that would swap the entire orange palette for one value).
+ * New keys must not collide; the few collisions below predate 2.1 and are
+ * intentional.
+ */
+
+const require = createRequire(import.meta.url)
+const preset = require('../../../design-system/tokens.tailwind.cjs') as {
+  theme: { extend: Record<string, Record<string, unknown>> }
+}
+
+/** Tailwind v3 default theme keys for every scale the preset extends. */
+const STOCK: Record<string, string[]> = {
+  colors: [
+    'inherit',
+    'current',
+    'transparent',
+    'black',
+    'white',
+    'slate',
+    'gray',
+    'zinc',
+    'neutral',
+    'stone',
+    'red',
+    'orange',
+    'amber',
+    'yellow',
+    'lime',
+    'green',
+    'emerald',
+    'teal',
+    'cyan',
+    'sky',
+    'blue',
+    'indigo',
+    'violet',
+    'purple',
+    'fuchsia',
+    'pink',
+    'rose',
+  ],
+  fontSize: [
+    'xs',
+    'sm',
+    'base',
+    'lg',
+    'xl',
+    '2xl',
+    '3xl',
+    '4xl',
+    '5xl',
+    '6xl',
+    '7xl',
+    '8xl',
+    '9xl',
+  ],
+  borderRadius: ['none', 'sm', 'DEFAULT', 'md', 'lg', 'xl', '2xl', '3xl', 'full'],
+  spacing: [
+    'px',
+    '0',
+    '0.5',
+    '1',
+    '1.5',
+    '2',
+    '2.5',
+    '3',
+    '3.5',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '14',
+    '16',
+    '20',
+    '24',
+    '28',
+    '32',
+    '36',
+    '40',
+    '44',
+    '48',
+    '52',
+    '56',
+    '60',
+    '64',
+    '72',
+    '80',
+    '96',
+  ],
+  height: ['auto', 'full', 'screen', 'svh', 'lvh', 'dvh', 'min', 'max', 'fit'],
+  borderWidth: ['DEFAULT', '0', '2', '4', '8'],
+  boxShadow: ['sm', 'DEFAULT', 'md', 'lg', 'xl', '2xl', 'inner', 'none'],
+  zIndex: ['0', '10', '20', '30', '40', '50', 'auto'],
+  fontFamily: ['sans', 'serif', 'mono'],
+  fontWeight: [
+    'thin',
+    'extralight',
+    'light',
+    'normal',
+    'medium',
+    'semibold',
+    'bold',
+    'extrabold',
+    'black',
+  ],
+  transitionDuration: ['0', '75', '100', '150', '200', '300', '500', '700', '1000', 'DEFAULT'],
+  transitionTimingFunction: ['DEFAULT', 'linear', 'in', 'out', 'in-out'],
+}
+
+/** Collisions that shipped before 2.1, each on purpose. */
+const KNOWN: Record<string, string[]> = {
+  // The px-named spacing scale (`p-12` is 12px in the admin's own build).
+  spacing: ['2', '4', '6', '8', '10', '12', '14', '16', '20', '24', '28', '32', '40'],
+  // DM Sans / DM Mono are the design's faces.
+  fontFamily: ['sans', 'mono'],
+  // Same 700 as stock.
+  fontWeight: ['bold'],
+  // The 6px chip radius, unchanged since 2.0 and matching theme.css.
+  borderRadius: ['sm'],
+}
+
+describe('Tailwind v3 preset', () => {
+  it('never redefines a stock Tailwind key beyond the known, intentional ones', () => {
+    const collisions: string[] = []
+    for (const [scale, keys] of Object.entries(preset.theme.extend)) {
+      const stock = STOCK[scale] ?? []
+      for (const key of Object.keys(keys)) {
+        if (stock.includes(key) && !(KNOWN[scale] ?? []).includes(key)) {
+          collisions.push(`${scale}.${key}`)
+        }
+      }
+    }
+    expect(collisions).toEqual([])
+  })
+
+  it('names the kit sizes the way the kit preset does', () => {
+    const { fontSize, borderRadius } = preset.theme.extend
+    expect(fontSize!.sm2).toBe('var(--fs-sm)')
+    expect(borderRadius!['5']).toBe('var(--r-sm)')
+    expect(borderRadius!.sm).toBe('var(--r-6)')
+  })
+})

package/src/__tests__/styles/theme-token-scope.test.ts

@@ -33,10 +33,11 @@ function shellTokenBlock(): string {
 describe('admin token scope (#773)', () => {
   it('declares the shared radius tokens on .prenta-admin, mirroring @theme', () => {
     const block = shellTokenBlock()
-    expect(block).toContain('--radius-sm: var(--r-sm)')
+    // Tailwind's rounded-sm/md/lg/xl stay 6/8/10/12px; --r (cards) is 12.
+    expect(block).toContain('--radius-sm: var(--r-6)')
     expect(block).toContain('--radius-md: var(--r-control)')
-    expect(block).toContain('--radius-lg: var(--r)')
-    expect(block).toContain('--radius-xl: calc(var(--r) + 2px)')
+    expect(block).toContain('--radius-lg: var(--r-10)')
+    expect(block).toContain('--radius-xl: var(--r-12)')
   })
 
   it('declares the shared accent token on .prenta-admin', () => {
@@ -47,6 +48,12 @@ describe('admin token scope (#773)', () => {
     expect(themeCss).not.toMatch(/(^|[^\w-]):root\b/)
     expect(tokensCss).not.toMatch(/(^|[^\w-]):root\b/)
   })
+
+  it('never declares a token as itself (a cycle leaves it unset)', () => {
+    // `--info: var(--info)` on `.prenta-admin` blanked the kit's --info in light mode.
+    const cycles = [...themeCss.matchAll(/(--[\w-]+)\s*:\s*var\(\s*\1\s*[,)]/g)].map((m) => m[0])
+    expect(cycles).toEqual([])
+  })
 })
 
 describe('canvas scroll-gate neutralization (#774)', () => {

package/src/__tests__/styles/tiers.test.ts

@@ -0,0 +1,136 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { compile } from 'tailwindcss'
+import { describe, expect, it } from 'vitest'
+import { TIER_MEDIA } from '../../lib/tiers.js'
+
+/**
+ * The layout tiers (SHELL.md §8) are written twice: as `@custom-variant`s in
+ * theme.css (`mobile:`, `tablet:` …) and as `TIER_MEDIA` for matchMedia. The
+ * two must say the same thing, cover every width exactly once (fractional
+ * widths at a zoom level included), and compile after Tailwind's own
+ * breakpoints so a tier class wins over `md:`/`lg:` on the same element.
+ */
+
+const require = createRequire(import.meta.url)
+const twTheme = require.resolve('tailwindcss/theme.css')
+const SRC = fileURLToPath(new URL('../../', import.meta.url))
+const theme = readFileSync(join(SRC, 'styles/theme.css'), 'utf8')
+
+const declared = [...theme.matchAll(/^@custom-variant ([\w-]+) \(@media (\([^;]*\))\);$/gm)].map(
+  ([, name, query]) => ({ name: name!, query: query! }),
+)
+const TIERS = ['mobile', 'tablet', 'laptop', 'wide', '4k'] as const
+
+/** Evaluates the range queries the tiers use, at a given width. */
+function matchesWidth(query: string, width: number): boolean {
+  const compare = (a: number, op: string, b: number) =>
+    op === '<' ? a < b : op === '<=' ? a <= b : op === '>' ? a > b : a >= b
+  const range = /^\((?:(\d+)px (<=?) )?width(?: (<=?|>=?) (\d+)px)?\)$/.exec(query)
+  if (!range) throw new Error(`can't read ${query}`)
+  const [, lo, loOp, hiOp, hi] = range
+  return (
+    (lo === undefined || compare(Number(lo), loOp!, width)) &&
+    (hi === undefined || compare(width, hiOp!, Number(hi)))
+  )
+}
+
+async function build(candidates: string[]): Promise<string> {
+  const compiler = await compile(
+    [
+      "@import 'tailwindcss/theme.css';",
+      ...declared.map(({ name, query }) => `@custom-variant ${name} (@media ${query});`),
+      '@tailwind utilities;',
+    ].join('\n'),
+    {
+      base: dirname(twTheme),
+      loadStylesheet: async () => ({
+        path: twTheme,
+        base: dirname(twTheme),
+        content: readFileSync(twTheme, 'utf8'),
+      }),
+    },
+  )
+  return compiler.build(candidates)
+}
+
+describe('layout tiers', () => {
+  it('declares the same queries in theme.css and TIER_MEDIA', () => {
+    expect(Object.fromEntries(declared.map(({ name, query }) => [name, query]))).toEqual(TIER_MEDIA)
+  })
+
+  it('puts every width, fractional ones included, in exactly one tier', () => {
+    const widths = [
+      320, 390, 768, 768.5, 769, 924, 1024, 1024.5, 1025, 1280, 1440, 1440.5, 1441, 1920, 2199,
+      2199.5, 2200, 2560,
+    ]
+    for (const width of widths) {
+      const hits = TIERS.filter((tier) => matchesWidth(TIER_MEDIA[tier], width))
+      expect(hits, `${width}px`).toHaveLength(1)
+      expect(matchesWidth(TIER_MEDIA.narrow, width), `${width}px narrow`).toBe(
+        hits[0] === 'mobile' || hits[0] === 'tablet',
+      )
+    }
+    // The SHELL.md §8 boundaries.
+    expect(matchesWidth(TIER_MEDIA.mobile, 768)).toBe(true)
+    expect(matchesWidth(TIER_MEDIA.tablet, 1024)).toBe(true)
+    expect(matchesWidth(TIER_MEDIA.laptop, 1440)).toBe(true)
+    expect(matchesWidth(TIER_MEDIA.wide, 2199)).toBe(true)
+    expect(matchesWidth(TIER_MEDIA['4k'], 2200)).toBe(true)
+  })
+
+  it('emits tier variants after the stock breakpoints, narrow before the tiers', async () => {
+    const css = await build([
+      'md:p-1',
+      'lg:p-2',
+      '2xl:p-3',
+      'narrow:p-4',
+      'mobile:p-5',
+      'tablet:p-6',
+      'laptop:p-7',
+      'wide:p-8',
+      '4k:p-9',
+    ])
+    const at = (selector: string) => {
+      const index = css.indexOf(selector)
+      expect(index, selector).toBeGreaterThan(-1)
+      return index
+    }
+    const stockLast = Math.max(at('.md\\:p-1'), at('.lg\\:p-2'), at('.\\32 xl\\:p-3'))
+    // So `lg:px-6 tablet:px-4` gives 4 at tablet width, and
+    // `narrow:px-5 mobile:px-4` gives 4 on mobile.
+    expect(at('.narrow\\:p-4')).toBeGreaterThan(stockLast)
+    for (const tier of ['mobile', 'tablet', 'laptop', 'wide']) {
+      expect(at(`.${tier}\\:`), tier).toBeGreaterThan(at('.narrow\\:p-4'))
+    }
+    expect(at('.\\34 k\\:p-9')).toBeGreaterThan(at('.narrow\\:p-4'))
+    expect(css).toContain('@media (769px <= width < 1025px)')
+  })
+
+  it('compiles not-mobile: and not-narrow: to the complements', async () => {
+    const css = await build(['not-mobile:flex', 'not-narrow:block'])
+    expect(css).toContain('@media not (width < 769px)')
+    expect(css).toContain('@media not (width < 1025px)')
+  })
+
+  it('leaves no hand-written tier ranges in components', () => {
+    // Components write `mobile:` / `tablet:` …, not `[@media(width<769px)]:`,
+    // so a tier boundary lives in one place.
+    const offenders: string[] = []
+    const walk = (dir: string) => {
+      for (const entry of readdirSync(dir)) {
+        const path = join(dir, entry)
+        if (statSync(path).isDirectory()) {
+          if (entry !== '__tests__') walk(path)
+        } else if (/\.tsx?$/.test(entry)) {
+          const source = readFileSync(path, 'utf8')
+          if (/\[@media\([^\]]*\b(769|1025|1441|2200)px/.test(source)) offenders.push(path)
+        }
+      }
+    }
+    walk(SRC)
+    expect(offenders).toEqual([])
+  })
+})

package/src/__tests__/styles/tokens-drift.test.ts

@@ -107,12 +107,71 @@ describe('design token generation', () => {
         `dark ${fg} on ${bg}`,
       ).toBeGreaterThanOrEqual(4.5)
     }
-    // Tailwind /10 mixes as measured by axe on dashboard chips (not the raw tint).
-    expect(contrast(token(light!, '--warn'), '#f8eee6')).toBeGreaterThanOrEqual(4.5)
+    // Tailwind /10 mix as measured by axe on dashboard chips (not the raw tint).
+    // Warning chips pair --warn with --warn-l instead: the kit's #B45309 is
+    // 4.39:1 on bg-warning/10, so the admin no longer uses that mix.
     expect(contrast(token(light!, '--suc'), '#e6f2ee')).toBeGreaterThanOrEqual(4.5)
-    // Accent text on the token tint — not on bg-primary/15, which axe measured
-    // as #d9c8f7 (3.67:1) on the Posts type-tab count chips.
-    expect(contrast(token(light!, '--acc'), token(light!, '--acc-l'))).toBeGreaterThanOrEqual(4.5)
+  })
+
+  it('derives the accent from the pick and its tuned variants, as the kit does', () => {
+    // The numbers (every preset clears 4.5:1 on its tint) are checked in
+    // @prenta/core's appearance tests, which compute the same oklch mixes.
+    const css = read(OUTPUTS.runtimeCss)
+    const [light, dark] = css.split('.prenta-admin[data-theme=')
+    const l = declarationMap(light!)
+    const d = declarationMap(dark!)
+    expect(l.get('--acc-base')).toBe('#2f5bea')
+    expect(l.get('--acc')).toBe('var(--acc-lt, var(--acc-base))')
+    expect(l.get('--acc-l')).toBe('color-mix(in oklch, var(--acc) 11%, var(--card))')
+    expect(l.get('--acc-m')).toBe('color-mix(in oklch, var(--acc) 38%, var(--card))')
+    expect(l.get('--on-acc')).toBe('#ffffff')
+    expect(d.get('--acc')).toBe('var(--acc-dk, color-mix(in oklch, var(--acc-base) 70%, #ffffff))')
+    expect(d.get('--acc-l')).toBe('color-mix(in oklch, var(--acc-base) 20%, var(--card))')
+    expect(d.get('--acc-m')).toBe('color-mix(in oklch, var(--acc-base) 50%, var(--card))')
+    expect(d.get('--on-acc')).toBe('#0e0f11')
+  })
+
+  it("keeps the SERP preview link Google's blue, not the accent", () => {
+    const css = read(OUTPUTS.runtimeCss)
+    const [light, dark] = css.split('.prenta-admin[data-theme=')
+    expect(declarationMap(light!).get('--serp-link')).toBe('#1a0dab')
+    expect(declarationMap(dark!).get('--serp-link')).toBe('#8ab4f8')
+  })
+
+  it('keeps every avatar fill at 4.5:1 behind white initials', () => {
+    const runtime = declarationMap(read(OUTPUTS.runtimeCss))
+    for (let i = 1; i <= 8; i++) {
+      const fill = runtime.get(`--avatar-${i}`)!
+      expect(contrast(fill, '#ffffff'), `--avatar-${i} ${fill}`).toBeGreaterThanOrEqual(4.5)
+    }
+  })
+
+  it('ships Linen as a light base that Graphite always overrides', () => {
+    const css = read(OUTPUTS.runtimeCss).replace(/\/\*[\s\S]*?\*\//g, '')
+    const linen = css.match(/\.prenta-admin:where\(\[data-light='linen'\]([^{]*)\{([^}]*)\}/)
+    expect(linen, 'Linen block').not.toBeNull()
+    // Conditions sit inside :where(), so the block weighs the same as
+    // .prenta-admin and the later prefers-contrast rule still wins.
+    expect(linen![1]!.trim().endsWith(')')).toBe(true)
+    // Excluded under every dark hook: the class, the attribute, a dark ancestor.
+    expect(linen![1]).toContain(':not(.dark)')
+    expect(linen![1]).toContain(":not([data-theme='dark'])")
+    expect(linen![1]).toContain(':not(.dark *)')
+    const block = declarationMap(`x{${linen![2]}}`)
+    expect(block.get('--bg')).toBe('#f5f2ec')
+    for (const name of ['--txt', '--sub', '--muted']) {
+      expect(
+        contrast(block.get(name)!, block.get('--bg')!),
+        `${name} on Linen bg`,
+      ).toBeGreaterThanOrEqual(4.5)
+    }
+  })
+
+  it('emits a preview block per base for the Admin appearance picker', () => {
+    const css = read(OUTPUTS.runtimeCss)
+    for (const base of ['porcelain', 'linen', 'graphite']) {
+      expect(css).toContain(`.prenta-admin .prenta-base-preview[data-base='${base}'] {`)
+    }
   })
 
   it('keeps editorial tag pills above the WCAG AA threshold for small text', () => {
@@ -137,7 +196,9 @@ describe('design token generation', () => {
     const mutedOf = (block: string) => declarationMap(block).get('--muted')
 
     expect(contrast(mutedOf(light!)!, '#ffffff')).toBeGreaterThanOrEqual(4.5)
-    expect(contrast(mutedOf(dark!)!, '#1c1a2e')).toBeGreaterThanOrEqual(4.5)
+    expect(contrast(mutedOf(dark!)!, declarationMap(dark!).get('--card')!)).toBeGreaterThanOrEqual(
+      4.5,
+    )
   })
 })
 

package/src/__tests__/views/admin-lazy-route.render.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, render, screen } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 
 vi.mock('../../lib/api.js', () => ({
   cmsApi: vi.fn(async () => ({ data: { docs: [] }, status: 200 })),
@@ -36,4 +36,44 @@ describe('AdminRoot lazy routes', () => {
     )
     expect(await screen.findByText('Trash is empty')).toBeTruthy()
   })
+
+  it('opens Pages › Trash, not the page editor with id "trash"', async () => {
+    window.history.replaceState({}, '', '/admin/pages/trash')
+    render(
+      <AdminRoot
+        config={{}}
+        session={{ user: { id: 'u1', email: 'admin@example.com', role: 'ADMIN' } }}
+        initialPath="/pages/trash"
+      />,
+    )
+    expect(await screen.findByText('Trash is empty', {}, { timeout: 5000 })).toBeTruthy()
+    const crumbs = screen.getByRole('navigation', { name: 'Breadcrumb' })
+    expect(crumbs.textContent).toContain('Pages')
+  })
+
+  it('wires collection documents back to their list (Cancel, breadcrumb links)', async () => {
+    window.history.replaceState({}, '', '/admin/faqs/new')
+    render(
+      <AdminRoot
+        config={{
+          collections: {
+            faqs: {
+              slug: 'faqs',
+              labels: { singular: 'FAQ', plural: 'FAQs' },
+              fields: [{ name: 'title', type: 'text', label: 'Title' }],
+            },
+          },
+        }}
+        session={{ user: { id: 'u1', email: 'admin@example.com', role: 'ADMIN' } }}
+        initialPath="/faqs/new"
+      />,
+    )
+    // Breadcrumb ancestors are real links built with the admin base path.
+    // The lazy document view's first load takes about 4s alone and longer under
+    // full-suite load; wait well past that, inside the 20s test timeout.
+    const faqs = await screen.findByRole('link', { name: 'FAQs' }, { timeout: 15_000 })
+    expect(faqs.getAttribute('href')).toBe('/admin/faqs')
+    fireEvent.click(await screen.findByRole('button', { name: 'Cancel' }))
+    await waitFor(() => expect(window.location.pathname).toBe('/admin/faqs'))
+  })
 })

package/src/__tests__/views/ai-settings.render.test.tsx

@@ -197,7 +197,7 @@ describe('AISettingsTab', () => {
     await screen.findByText('AI Features')
     fireEvent.click(screen.getByRole('switch', { name: 'Content writing suggestions' }))
 
-    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    const save = screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement
     expect(save.disabled).toBe(false)
     fireEvent.click(save)
 
@@ -226,7 +226,7 @@ describe('AISettingsTab', () => {
 
     fireEvent.change(select, { target: { value: 'anthropic:claude-haiku' } })
 
-    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    const save = screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement
     expect(save.disabled).toBe(false)
     fireEvent.click(save)
 
@@ -256,7 +256,7 @@ describe('AISettingsTab', () => {
     fireEvent.click(approval)
     fireEvent.change(capInput, { target: { value: '15' } })
 
-    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    const save = screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement
     expect(save.disabled).toBe(false)
     fireEvent.click(save)
 
@@ -306,7 +306,7 @@ describe('AISettingsTab', () => {
       target: { value: 'confident, warm' },
     })
 
-    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    const save = screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement
     expect(save.disabled).toBe(false)
     fireEvent.click(save)
 

package/src/__tests__/views/appearance-menus-route.render.test.tsx

@@ -0,0 +1,58 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import { navigationCollections } from '@prenta/plugin-navigation'
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: vi.fn(async () => ({ data: { docs: [] }, status: 200 })),
+  ensureCsrfToken: vi.fn(async () => undefined),
+  setApiBase: vi.fn(),
+  getApiBase: () => '',
+}))
+
+const storage = new Map<string, string>()
+vi.stubGlobal('localStorage', {
+  getItem: (key: string) => storage.get(key) ?? null,
+  setItem: (key: string, value: string) => void storage.set(key, String(value)),
+  removeItem: (key: string) => void storage.delete(key),
+  clear: () => storage.clear(),
+})
+
+const { AdminRoot } = await import('../../AdminRoot.js')
+
+afterEach(() => {
+  cleanup()
+  window.history.replaceState({}, '', '/')
+})
+
+const session = { user: { id: 'u1', email: 'admin@example.com', role: 'ADMIN' } }
+const pages = { slug: 'pages', labels: { singular: 'Page', plural: 'Pages' }, type: 'page' }
+
+function renderAt(config: object) {
+  window.history.replaceState({}, '', '/admin/appearance/menus')
+  render(<AdminRoot config={config} session={session} initialPath="/appearance/menus" />)
+}
+
+/**
+ * `/appearance/menus` used to render a placeholder with hard-coded `main` and
+ * `legal` menus that loaded and saved nothing. It now forwards to the working
+ * navigations editor, or 404s when there are no menus to edit.
+ */
+describe('/appearance/menus', () => {
+  it('opens the navigations collection when plugin-navigation is installed', async () => {
+    renderAt({ collections: { pages, ...navigationCollections } })
+
+    expect(await screen.findByRole('heading', { name: 'Navigations' })).toBeTruthy()
+    await waitFor(() => expect(window.location.pathname).toBe('/admin/navigations'))
+    expect(screen.queryByText('legal')).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Show in header' })).toBeNull()
+  })
+
+  it('does not render demo menus when plugin-navigation is not installed', async () => {
+    renderAt({ collections: { pages } })
+
+    expect(await screen.findByText('The page you are looking for does not exist.')).toBeTruthy()
+    expect(screen.queryByText('legal')).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Show in header' })).toBeNull()
+  })
+})

package/src/__tests__/views/appearance-settings.render.test.tsx

@@ -73,17 +73,15 @@ describe('AppearanceTab', () => {
     expect(screen.getByText('Admin theme')).toBeTruthy()
     expect(screen.getByText('Typography & motion')).toBeTruthy()
     expect(screen.getByText('Brand preview')).toBeTruthy()
-    expect(
-      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
-    ).toBe(true)
+    expect(screen.queryByRole('button', { name: 'Save changes' })).toBeNull()
   })
 
   it('enables Save when the accent changes and persists appearance to the settings global', async () => {
     render(<AppearanceTab role="ADMIN" />)
     await screen.findByText('Branding')
 
-    fireEvent.click(screen.getByRole('radio', { name: 'Blue' }))
-    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    fireEvent.click(screen.getByRole('radio', { name: 'Teal' }))
+    const save = screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement
     expect(save.disabled).toBe(false)
 
     fireEvent.click(save)
@@ -93,7 +91,7 @@ describe('AppearanceTab', () => {
         '/globals/settings',
         expect.objectContaining({
           method: 'PUT',
-          body: expect.stringContaining('"adminAccentColor":"blue"'),
+          body: expect.stringContaining('"adminAccentColor":"teal"'),
         }),
       ),
     )
@@ -105,6 +103,10 @@ describe('AppearanceTab', () => {
     expect(String((saveCall?.[1] as { body?: string } | undefined)?.body)).toContain(
       '"publicTheme"',
     )
+    // Saved means clean: the dirty-only bar goes away.
+    await waitFor(() =>
+      expect(screen.queryByRole('region', { name: 'Unsaved changes' })).toBeNull(),
+    )
   })
 
   it('warns when dark mode is the default but no dark-mode logo is set', async () => {
@@ -142,7 +144,7 @@ describe('AppearanceTab', () => {
     )
     await waitFor(() =>
       expect(
-        (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+        (screen.getByRole('button', { name: 'Save changes' }) as HTMLButtonElement).disabled,
       ).toBe(false),
     )
   })
@@ -159,7 +161,7 @@ describe('AppearanceTab', () => {
     // No upload should be issued — we reference the existing asset by id.
     expect(cmsApi.mock.calls.some(([endpoint]) => endpoint === '/media/upload')).toBe(false)
 
-    const save = await screen.findByRole('button', { name: 'Save Changes' })
+    const save = await screen.findByRole('button', { name: 'Save changes' })
     await waitFor(() => expect((save as HTMLButtonElement).disabled).toBe(false))
     fireEvent.click(save)