@actuate-media/cms-admin 0.69.1 → 0.71.0

package/src/__tests__/lib/pages-tree.test.ts

@@ -1,6 +1,8 @@
 import { describe, expect, it } from 'vitest'
 import {
   buildPageTree,
+  checkReparent,
+  collectDescendantIds,
   defaultExpandedIds,
   flattenPageTree,
   type PageTreeNode,
@@ -195,3 +197,50 @@ describe('defaultExpandedIds', () => {
     expect([...defaultExpandedIds(roots)]).toEqual(['about'])
   })
 })
+
+describe('collectDescendantIds', () => {
+  it('returns every id in the subtree, excluding the page itself', () => {
+    const roots = buildPageTree([
+      page({ id: 'about', title: 'About Us', path: '/about' }),
+      page({ id: 'team', title: 'Our Team', path: '/about/team' }),
+      page({ id: 'deep', title: 'Deep', path: '/about/team/deep' }),
+      page({ id: 'blog', title: 'Blog', path: '/blog' }),
+    ])
+    expect([...collectDescendantIds(roots, 'about')].sort()).toEqual(['deep', 'team'])
+    expect([...collectDescendantIds(roots, 'blog')]).toEqual([])
+    expect([...collectDescendantIds(roots, 'missing')]).toEqual([])
+  })
+})
+
+describe('checkReparent', () => {
+  const roots = () =>
+    buildPageTree([
+      page({ id: 'about', title: 'About Us', path: '/about' }),
+      page({ id: 'team', title: 'Our Team', path: '/about/team' }),
+      page({ id: 'deep', title: 'Deep', path: '/about/team/deep' }),
+      page({ id: 'blog', title: 'Blog', path: '/blog' }),
+    ])
+
+  it('allows moving a page under an unrelated page', () => {
+    expect(checkReparent(roots(), 'blog', 'team')).toEqual({ ok: true })
+  })
+
+  it('allows moving a subtree up to an ancestor that is not its parent', () => {
+    // deep currently sits under team; moving it directly under about is legal.
+    expect(checkReparent(roots(), 'deep', 'about')).toEqual({ ok: true })
+  })
+
+  it('rejects self-drops', () => {
+    expect(checkReparent(roots(), 'about', 'about').ok).toBe(false)
+  })
+
+  it('rejects drops into the page own subtree (cycle)', () => {
+    expect(checkReparent(roots(), 'about', 'team').ok).toBe(false)
+    expect(checkReparent(roots(), 'about', 'deep').ok).toBe(false)
+  })
+
+  it('rejects no-op moves onto the current parent', () => {
+    expect(checkReparent(roots(), 'team', 'about').ok).toBe(false)
+    expect(checkReparent(roots(), 'deep', 'team').ok).toBe(false)
+  })
+})

package/src/__tests__/views/page-builder-template-seed.render.test.tsx

@@ -0,0 +1,59 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi, afterEach } from 'vitest'
+import { cleanup, 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() },
+  Toaster: () => null,
+}))
+
+const { PageBuilder } = await import('../../views/page-builder/PageBuilder.js')
+
+const TEMPLATE_TREE = {
+  id: 'tpl-page',
+  type: 'page',
+  children: [
+    {
+      id: 'sec1',
+      type: 'section',
+      settings: { label: 'Hero From Template' },
+      children: [],
+    },
+  ],
+}
+
+beforeEach(() => {
+  cmsApi.mockReset()
+  cmsApi.mockImplementation(async (endpoint: string) => {
+    if (endpoint === '/page-templates/tpl-1') {
+      return { data: { id: 'tpl-1', name: 'Landing', tree: TEMPLATE_TREE }, status: 200 }
+    }
+    return { data: {}, status: 200 }
+  })
+})
+
+afterEach(cleanup)
+
+describe('PageBuilder template seeding (/page-builder/new?template=)', () => {
+  it('fetches the template and seeds the canvas tree for a new page', async () => {
+    render(
+      <PageBuilder templateId="tpl-1" collectionSlug="pages" config={{}} onNavigate={() => {}} />,
+    )
+
+    await waitFor(() => expect(cmsApi).toHaveBeenCalledWith('/page-templates/tpl-1'))
+    // replaceTree marks the builder dirty — the unsaved-changes dot is the
+    // observable proof the template tree was seeded into the canvas state.
+    expect(await screen.findByTitle('Unsaved changes')).toBeTruthy()
+  })
+
+  it('starts from a blank, clean tree when no template id is given', async () => {
+    render(<PageBuilder collectionSlug="pages" config={{}} onNavigate={() => {}} />)
+
+    await waitFor(() =>
+      expect(cmsApi).not.toHaveBeenCalledWith(expect.stringContaining('/page-templates/')),
+    )
+    expect(screen.queryByTitle('Unsaved changes')).toBeNull()
+  })
+})

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

@@ -119,6 +119,46 @@ describe('PageTemplates card grid', () => {
     })
   })
 
+  it('routes "Use template" into the builder with the template id', async () => {
+    const onNavigate = vi.fn()
+    render(<PageTemplates onNavigate={onNavigate} />)
+    await screen.findByText('Landing Page')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Create page from Landing Page' }))
+
+    expect(onNavigate).toHaveBeenCalledWith('/page-builder/new?template=builtin-landing')
+  })
+
+  it('duplicates a template (built-ins included) via POST with a "(copy)" name', async () => {
+    render(<PageTemplates onNavigate={() => {}} />)
+    await screen.findByText('Landing Page')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Duplicate Landing Page' }))
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/page-templates',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+    const postCall = cmsApi.mock.calls.find(
+      (c) => (c[1] as RequestInit | undefined)?.method === 'POST',
+    )!
+    expect(JSON.parse((postCall[1] as RequestInit).body as string)).toMatchObject({
+      name: 'Landing Page (copy)',
+      category: 'landing',
+      tree: TEMPLATES[0]!.tree,
+    })
+    // The grid refetches so the copy appears.
+    await waitFor(() =>
+      expect(
+        cmsApi.mock.calls.filter(
+          (c) => c[0] === '/page-templates' && !(c[1] as RequestInit | undefined)?.method,
+        ).length,
+      ).toBeGreaterThanOrEqual(2),
+    )
+  })
+
   it('filters cards by search text', async () => {
     render(<PageTemplates onNavigate={() => {}} />)
     await screen.findByText('Team Member')

package/src/__tests__/views/script-tags.render.test.tsx

@@ -0,0 +1,178 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// Drive the Script Tags list through a mocked cmsApi so the test owns the
+// data and can assert the design-parity surface: stat pills, search,
+// location/consent filter pills, badges, and row actions.
+function makeTag(over: Record<string, unknown> = {}) {
+  return {
+    id: 't1',
+    name: 'Google Analytics 4',
+    code: '<script>/* ga */</script>',
+    placement: 'head',
+    scope: 'site',
+    targetPaths: [],
+    priority: 1,
+    enabled: true,
+    loadAsync: true,
+    disableInPreview: true,
+    consentCategory: 'analytics',
+    createdAt: '2026-05-20T10:00:00.000Z',
+    updatedAt: '2026-05-20T10:00:00.000Z',
+    ...over,
+  }
+}
+
+const TAGS = [
+  makeTag(),
+  makeTag({
+    id: 't2',
+    name: 'Live Chat Widget',
+    placement: 'body_close',
+    priority: 5,
+    consentCategory: 'functional',
+  }),
+  makeTag({
+    id: 't3',
+    name: 'Org Schema',
+    placement: 'head',
+    priority: 3,
+    enabled: false,
+    consentCategory: 'none',
+  }),
+]
+
+const cmsApi = vi.fn(async (endpoint: string, init?: RequestInit) => {
+  if (!init?.method) return { data: TAGS }
+  if (init.method === 'POST') return { data: makeTag({ id: 'new-copy' }) }
+  return { data: {} }
+})
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (endpoint: string, init?: RequestInit) => cmsApi(endpoint, init),
+}))
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))
+
+const { ScriptTags } = await import('../../views/ScriptTags.js')
+
+beforeEach(() => {
+  cmsApi.mockClear()
+})
+
+describe('ScriptTags list', () => {
+  it('renders rows, stat pills (incl. consent-gated), and colored badges', async () => {
+    render(<ScriptTags />)
+
+    expect(await screen.findByText('Google Analytics 4')).toBeTruthy()
+    expect(screen.getByText('Live Chat Widget')).toBeTruthy()
+
+    // Stat pills: 3 total, 2 active, 1 inactive, 2 consent-gated.
+    expect(screen.getByText('Consent-gated')).toBeTruthy()
+    expect(screen.getByText('Consent-gated').closest('span')?.textContent).toContain('2')
+
+    // Location badges use the design palette (head=accent, body_close=info).
+    // Note: "Body end" also matches the filter pill, so pick the badge chip.
+    const headBadge = screen.getAllByText('Head').find((el) => el.className.includes('--acc-l'))
+    expect(headBadge).toBeTruthy()
+    const bodyEndBadge = screen
+      .getAllByText('Body end')
+      .find((el) => el.className.includes('--info-l'))
+    expect(bodyEndBadge).toBeTruthy()
+
+    // Consent badges are per-category colored chips.
+    const analyticsBadge = screen
+      .getAllByText('Analytics')
+      .find((el) => el.className.includes('--acc-l'))
+    expect(analyticsBadge).toBeTruthy()
+    const functionalBadge = screen
+      .getAllByText('Functional')
+      .find((el) => el.className.includes('--suc-l'))
+    expect(functionalBadge).toBeTruthy()
+  })
+
+  it('filters by location pill and shows the filtered count', async () => {
+    render(<ScriptTags />)
+    await screen.findByText('Google Analytics 4')
+
+    expect(screen.getByText('3 scripts')).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: 'Body end', pressed: false }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Live Chat Widget')).toBeTruthy()
+      expect(screen.queryByText('Google Analytics 4')).toBeNull()
+      expect(screen.getByText('1 script')).toBeTruthy()
+    })
+  })
+
+  it('filters by consent pill', async () => {
+    render(<ScriptTags />)
+    await screen.findByText('Google Analytics 4')
+
+    fireEvent.click(screen.getByRole('button', { name: 'No consent', pressed: false }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Org Schema')).toBeTruthy()
+      expect(screen.queryByText('Google Analytics 4')).toBeNull()
+    })
+  })
+
+  it('searches by name and offers clear-filters from the empty state', async () => {
+    render(<ScriptTags />)
+    await screen.findByText('Google Analytics 4')
+
+    fireEvent.change(screen.getByPlaceholderText('Search scripts…'), {
+      target: { value: 'zzz-no-match' },
+    })
+
+    expect(await screen.findByText('No scripts match your filters')).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: 'Clear filters' }))
+    expect(await screen.findByText('Google Analytics 4')).toBeTruthy()
+  })
+
+  it('select-all checks visible rows and shows selected count with clear', async () => {
+    render(<ScriptTags />)
+    await screen.findByText('Google Analytics 4')
+
+    fireEvent.click(screen.getByLabelText('Select all scripts'))
+    expect(await screen.findByText(/3 selected/)).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Clear' }))
+    await waitFor(() => expect(screen.queryByText(/selected/)).toBeNull())
+  })
+
+  it('row duplicate posts a disabled copy and refetches', async () => {
+    render(<ScriptTags />)
+    await screen.findByText('Google Analytics 4')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Duplicate Google Analytics 4' }))
+
+    await waitFor(() => {
+      const post = cmsApi.mock.calls.find(
+        (c) => (c[1] as RequestInit | undefined)?.method === 'POST',
+      )
+      expect(post).toBeTruthy()
+      const body = JSON.parse(String((post![1] as RequestInit).body))
+      expect(body.name).toBe('Google Analytics 4 (Copy)')
+      expect(body.enabled).toBe(false)
+    })
+  })
+
+  it('row delete asks for confirmation, then issues DELETE', async () => {
+    render(<ScriptTags />)
+    await screen.findByText('Org Schema')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Delete Org Schema' }))
+    expect(await screen.findByText('Delete script?')).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
+
+    await waitFor(() => {
+      const del = cmsApi.mock.calls.find(
+        (c) => (c[1] as RequestInit | undefined)?.method === 'DELETE',
+      )
+      expect(del).toBeTruthy()
+      expect(del![0]).toBe('/script-tags/t3')
+    })
+  })
+})

package/src/components/TipTapEditor.tsx

@@ -155,13 +155,13 @@ const editorStyles = `
 }
 .ProseMirror th,
 .ProseMirror td {
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--bdr);
   padding: 0.5rem;
   text-align: left;
   min-width: 80px;
 }
 .ProseMirror th {
-  background-color: #f3f4f6;
+  background-color: var(--surface-muted);
   font-weight: 600;
 }
 .ProseMirror img {
@@ -170,11 +170,13 @@ const editorStyles = `
   border-radius: 0.375rem;
 }
 .ProseMirror blockquote {
-  border-left: 3px solid #3b82f6;
+  border-left: 3px solid var(--acc);
   padding-left: 1rem;
   margin: 1rem 0;
-  color: #4b5563;
+  color: var(--sub);
 }
+/* Code blocks use a fixed dark slate theme in both light and dark modes
+   (standard "dark editor chrome" convention; no theme token maps to it). */
 .ProseMirror pre {
   background: #1e293b;
   color: #e2e8f0;
@@ -184,7 +186,7 @@ const editorStyles = `
   margin: 0.75rem 0;
 }
 .ProseMirror code {
-  background: #f1f5f9;
+  background: var(--surface-muted);
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
   font-size: 0.875em;
@@ -197,18 +199,18 @@ const editorStyles = `
 }
 .ProseMirror hr {
   border: none;
-  border-top: 2px solid #e5e7eb;
+  border-top: 2px solid var(--bdr);
   margin: 1.5rem 0;
 }
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
-  color: #9ca3af;
+  color: var(--muted);
   pointer-events: none;
   height: 0;
 }
 .ProseMirror .selectedCell {
-  background-color: #dbeafe;
+  background-color: var(--acc-l);
 }
 `
 
@@ -659,7 +661,7 @@ export function TipTapEditor({
       className={`border-border bg-card flex-1 overflow-hidden rounded-lg border ${className ?? ''}`}
     >
       {collaboration && awareness && (
-        <div className="bg-card flex items-center justify-between gap-2 border-b border-gray-100 px-2 py-1.5">
+        <div className="bg-card border-border flex items-center justify-between gap-2 border-b px-2 py-1.5">
           <PresenceChips awareness={awareness} status={collabStatus} />
           <OfflineStatus connection={collabStatus} offline={offlineStatus} />
         </div>

package/src/components/script-tags/ScriptTagEditorPane.tsx

@@ -43,6 +43,33 @@ export const CONSENT_LABELS: Record<string, string> = {
   preferences: 'Preferences',
 }
 
+/** Design-system location badges (`.loc-head` / `.loc-bs` / `.loc-be`). */
+export const PLACEMENT_COLORS: Record<string, string> = {
+  head: 'bg-[var(--acc-l)] text-[var(--acc)]',
+  body_open: 'bg-[var(--suc-l)] text-[var(--suc)]',
+  body_close: 'bg-[var(--info-l)] text-[var(--info)]',
+}
+
+export interface ConsentBadgeColors {
+  badge: string
+  dot: string
+}
+
+/** Neutral "No consent" chip — also the fallback for unknown categories. */
+export const NO_CONSENT_COLORS: ConsentBadgeColors = {
+  badge: 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--muted)]',
+  dot: 'bg-[var(--muted)]',
+}
+
+/** Design-system consent badges (`.cb-*`): tinted chip + colored dot per category. */
+export const CONSENT_COLORS: Record<string, ConsentBadgeColors> = {
+  none: NO_CONSENT_COLORS,
+  analytics: { badge: 'bg-[var(--acc-l)] text-[var(--acc)]', dot: 'bg-[var(--acc)]' },
+  marketing: { badge: 'bg-[var(--err-l)] text-[var(--err)]', dot: 'bg-[var(--err)]' },
+  functional: { badge: 'bg-[var(--suc-l)] text-[var(--suc)]', dot: 'bg-[var(--suc)]' },
+  preferences: { badge: 'bg-[var(--warn-l)] text-[var(--warn)]', dot: 'bg-[var(--warn)]' },
+}
+
 const PLACEMENT_OPTIONS = [
   { value: 'head', label: 'Head', hint: '<head>' },
   { value: 'body_open', label: 'Body start', hint: '<body>' },
@@ -248,10 +275,18 @@ export function ScriptTagEditorPane({ tag, onClose, onChanged }: ScriptTagEditor
           />
         </div>
         <div className="mt-1.5 flex flex-wrap items-center gap-1.5 px-1.5">
-          <span className="rounded-[5px] border border-[var(--bdr)] bg-[var(--bg)] px-1.5 py-0.5 text-[10.5px] text-[var(--sub)]">
+          <span
+            className={`rounded-[5px] px-1.5 py-0.5 text-[10.5px] font-medium ${PLACEMENT_COLORS[placement] ?? 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--sub)]'}`}
+          >
             {PLACEMENT_LABELS[placement] ?? placement}
           </span>
-          <span className="rounded-[5px] border border-[var(--bdr)] bg-[var(--bg)] px-1.5 py-0.5 text-[10.5px] text-[var(--sub)]">
+          <span
+            className={`inline-flex items-center gap-[3px] rounded-[5px] px-1.5 py-0.5 text-[10.5px] font-medium ${(CONSENT_COLORS[consentCategory] ?? NO_CONSENT_COLORS).badge}`}
+          >
+            <span
+              className={`inline-block h-[5px] w-[5px] rounded-full ${(CONSENT_COLORS[consentCategory] ?? NO_CONSENT_COLORS).dot}`}
+              aria-hidden
+            />
             {CONSENT_LABELS[consentCategory] ?? consentCategory}
           </span>
         </div>
@@ -407,8 +442,9 @@ export function ScriptTagEditorPane({ tag, onClose, onChanged }: ScriptTagEditor
           </div>
           {consentCategory !== 'none' && (
             <p className="mt-2 text-[11px] text-[var(--muted)]">
-              The script is injected only after the visitor accepts cookies (Actuate Consent
-              &ldquo;Accept all&rdquo;).
+              The script is injected only after the visitor grants the{' '}
+              {CONSENT_LABELS[consentCategory] ?? consentCategory} consent category (Actuate Consent
+              banner).
             </p>
           )}
         </InspectorPaneSection>

package/src/index.ts

@@ -50,13 +50,16 @@ export type {
 } from './layout/primitives/index.js'
 
 export { Dashboard } from './views/Dashboard.js'
+/** @deprecated Superseded by `PagesListView` routing in `AdminRoot`; will be removed in the next major. */
 export { Pages } from './views/Pages.js'
+/** @deprecated Superseded by the visual page builder (`PageBuilder`); will be removed in the next major. */
 export { PageEditor } from './views/PageEditor.js'
 export { MediaBrowser } from './views/MediaBrowser.js'
 export { Forms } from './views/Forms.js'
 export { FormEditor } from './views/FormEditor.js'
 export type { FormEditorProps } from './views/FormEditor.js'
 export { FormSubmissions } from './views/FormSubmissions.js'
+/** @deprecated Superseded by the Redirects tab inside the `SEO` view; will be removed in the next major. */
 export { Redirects } from './views/Redirects.js'
 export { Users } from './views/Users.js'
 export { Settings } from './views/Settings.js'

package/src/lib/pages-service.ts

@@ -520,6 +520,21 @@ export async function duplicatePage(id: string): Promise<{ id?: string; error?:
   return { id: res.data?.id }
 }
 
+/**
+ * Reparent a page in the tree. `parentPageId: null` makes it top-level.
+ * Document updates merge `data`, so only the parent link changes.
+ */
+export async function movePage(
+  id: string,
+  parentPageId: string | null,
+): Promise<{ error?: string }> {
+  const res = await cmsApi(`/collections/${PAGES_COLLECTION}/${encodeURIComponent(id)}`, {
+    method: 'PUT',
+    body: JSON.stringify({ data: { parentPageId } }),
+  })
+  return res.error ? { error: res.error } : {}
+}
+
 /** Soft-delete a single page. */
 export async function deletePage(id: string): Promise<{ error?: string }> {
   const res = await cmsApi(`/collections/${PAGES_COLLECTION}/${encodeURIComponent(id)}`, {

package/src/lib/pages-tree.ts

@@ -143,3 +143,57 @@ export function flattenPageTree(nodes: PageTreeNode[], expanded: Set<string>): P
 export function defaultExpandedIds(roots: PageTreeNode[]): Set<string> {
   return new Set(roots.filter((n) => n.children.length > 0).map((n) => n.page.id))
 }
+
+/** Ids of every page in `id`'s subtree (excluding `id` itself). */
+export function collectDescendantIds(roots: PageTreeNode[], id: string): Set<string> {
+  const out = new Set<string>()
+  const collect = (node: PageTreeNode) => {
+    for (const child of node.children) {
+      out.add(child.page.id)
+      collect(child)
+    }
+  }
+  const find = (nodes: PageTreeNode[]): PageTreeNode | undefined => {
+    for (const n of nodes) {
+      if (n.page.id === id) return n
+      const hit = find(n.children)
+      if (hit) return hit
+    }
+    return undefined
+  }
+  const node = find(roots)
+  if (node) collect(node)
+  return out
+}
+
+export type ReparentCheck = { ok: true } | { ok: false; reason: string }
+
+/**
+ * Validate a drag-reparent: `sourceId` becomes a child of `targetId`
+ * (or a root when `targetId` is null). Rejects self-drops, drops into the
+ * page's own subtree (would create a cycle), and no-op moves.
+ */
+export function checkReparent(
+  roots: PageTreeNode[],
+  sourceId: string,
+  targetId: string | null,
+): ReparentCheck {
+  if (targetId === sourceId) {
+    return { ok: false, reason: 'A page cannot be its own parent' }
+  }
+  if (targetId !== null && collectDescendantIds(roots, sourceId).has(targetId)) {
+    return { ok: false, reason: 'Cannot move a page into its own sub-pages' }
+  }
+  const parentOf = (nodes: PageTreeNode[], parent: string | null): string | null | undefined => {
+    for (const n of nodes) {
+      if (n.page.id === sourceId) return parent
+      const hit = parentOf(n.children, n.page.id)
+      if (hit !== undefined) return hit
+    }
+    return undefined
+  }
+  if ((parentOf(roots, null) ?? null) === targetId) {
+    return { ok: false, reason: 'Page is already there' }
+  }
+  return { ok: true }
+}

package/src/views/FormEditor.tsx

@@ -351,11 +351,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
               </label>
               <div className="flex gap-3">
                 <label
-                  className="hover:bg-muted flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors"
-                  style={{
-                    borderColor: confirmation.type === 'message' ? '#2563eb' : '#d1d5db',
-                    backgroundColor: confirmation.type === 'message' ? '#eff6ff' : 'transparent',
-                  }}
+                  className={`flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
+                    confirmation.type === 'message'
+                      ? 'border-primary bg-accent'
+                      : 'border-border hover:bg-muted bg-transparent'
+                  }`}
                 >
                   <input
                     type="radio"
@@ -369,11 +369,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                   <span className="text-sm">Show Message</span>
                 </label>
                 <label
-                  className="hover:bg-muted flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors"
-                  style={{
-                    borderColor: confirmation.type === 'redirect' ? '#2563eb' : '#d1d5db',
-                    backgroundColor: confirmation.type === 'redirect' ? '#eff6ff' : 'transparent',
-                  }}
+                  className={`flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
+                    confirmation.type === 'redirect'
+                      ? 'border-primary bg-accent'
+                      : 'border-border hover:bg-muted bg-transparent'
+                  }`}
                 >
                   <input
                     type="radio"

package/src/views/HiddenLoginNotFound.tsx

@@ -5,6 +5,12 @@
  * (`config.admin.loginPath` set). Mimics the framework's default 404 page so
  * hitting `/admin` reveals nothing — no login form, no admin branding, and no
  * redirect that would leak the real login location.
+ *
+ * INTENTIONAL raw colors: although this mounts inside `.actuate-admin` (so the
+ * theme CSS vars are technically available), it must NOT use them. Painting
+ * this screen with the admin palette (or its dark-mode variant) would make it
+ * visibly differ from the framework's stock 404 and fingerprint the hidden
+ * admin to anyone probing `/admin`. Plain #fff/#000 matches the default 404.
  */
 export function HiddenLoginNotFound() {
   return (

package/src/views/MediaBrowser.tsx

@@ -31,6 +31,7 @@ import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { FolderTree, type FolderSelection } from '../components/FolderTree.js'
+import { Button } from '../components/ui/Button.js'
 import { StatusBadge } from '../components/ui/StatusBadge.js'
 import { StatPill } from '../components/ui/StatPill.js'
 import { MediaSeoAudit, type MediaSeoAuditItem } from './MediaSeoAudit.js'
@@ -508,18 +509,16 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
             className="hidden"
             onChange={(e) => handleUploadFiles(e.target.files)}
           />
-          <button
+          <Button
+            type="button"
+            variant="primary"
+            size="md"
             onClick={() => fileInputRef.current?.click()}
-            disabled={uploading}
-            className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm transition-colors disabled:opacity-50"
+            loading={uploading}
+            leftIcon={<Upload size={16} aria-hidden />}
           >
-            {uploading ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <Upload className="h-4 w-4" />
-            )}
             {uploading ? 'Uploading...' : 'Upload Files'}
-          </button>
+          </Button>
         </div>
       </div>