@actuate-media/cms-admin 0.72.3 → 0.74.0

package/src/AdminRoot.tsx

@@ -5,6 +5,7 @@ import * as Dialog from '@radix-ui/react-dialog'
 import { toast } from 'sonner'
 import { Layout } from './layout/Layout.js'
 import { adminPortalContainer } from './lib/portal-container.js'
+import { ADMIN_ROOT_ATTR, getAdminRootElement } from './lib/admin-root-element.js'
 import { useAdminRouter, parseRouteQuery } from './router/index.js'
 import { cmsApi, ensureCsrfToken } from './lib/api.js'
 import { setDocumentFavicon, BRAND_UPDATED_EVENT } from './lib/favicon.js'
@@ -856,7 +857,7 @@ function useBranding(config: any) {
     }
 
     // --- Primary color ---
-    const adminEl = document.querySelector<HTMLElement>('.actuate-admin')
+    const adminEl = getAdminRootElement()
     if (branding?.primaryColor && adminEl) {
       adminEl.style.setProperty('--primary', branding.primaryColor)
       adminEl.style.setProperty('--sidebar-primary', branding.primaryColor)
@@ -938,7 +939,7 @@ export function AdminRoot(props: AdminRootProps) {
   }, [props.sentryDsn])
 
   return (
-    <div style={ISOLATION_STYLE} className="actuate-admin">
+    <div style={ISOLATION_STYLE} className="actuate-admin" {...{ [ADMIN_ROOT_ATTR]: '' }}>
       <ThemeProvider defaultDarkMode={defaultDarkMode}>
         <LocaleProvider config={props.config}>
           <AdminSectionRenderersProvider value={props.sectionRenderers ?? EMPTY_RENDERERS}>

package/src/LoginRoot.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react'
 import { useAdminRouter } from './router/index.js'
 import { ThemeProvider } from './components/ThemeProvider.js'
 import { ISOLATION_STYLE, useRobotsNoIndex } from './lib/root-chrome.js'
+import { ADMIN_ROOT_ATTR } from './lib/admin-root-element.js'
 import { Login, type CaptchaConfig } from './views/Login.js'
 import { SetupWizard } from './views/SetupWizard.js'
 import { ForgotPassword } from './views/ForgotPassword.js'
@@ -79,7 +80,7 @@ export function LoginRoot({
   useRobotsNoIndex()
 
   return (
-    <div style={ISOLATION_STYLE} className="actuate-admin">
+    <div style={ISOLATION_STYLE} className="actuate-admin" {...{ [ADMIN_ROOT_ATTR]: '' }}>
       <ThemeProvider defaultDarkMode={defaultDarkMode}>
         <LoginShell
           config={config}

package/src/__tests__/components/resizable-aside.test.tsx

@@ -0,0 +1,130 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  InspectorExpandButton,
+  ResizableAside,
+  SECTION_INSPECTOR_DEFAULT_WIDTH,
+  SECTION_INSPECTOR_MIN_WIDTH,
+  SECTION_INSPECTOR_WIDTH_KEY,
+  computeInspectorMaxWidth,
+  computeInspectorOverlayWidth,
+  readSectionInspectorWidth,
+} from '../../components/ui/ResizableAside.js'
+
+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(),
+})
+
+vi.stubGlobal(
+  'ResizeObserver',
+  class {
+    constructor(private callback: ResizeObserverCallback) {}
+    observe(target: Element) {
+      const width =
+        target instanceof HTMLElement
+          ? Number.parseFloat(target.style.width) || target.clientWidth || 900
+          : 900
+      this.callback([{ contentRect: { width, height: 600 } } as ResizeObserverEntry], this)
+    }
+    unobserve() {}
+    disconnect() {}
+  },
+)
+
+afterEach(() => {
+  storage.clear()
+})
+
+describe('inspector width helpers', () => {
+  it('caps inline max width to the container minus a canvas peek', () => {
+    expect(computeInspectorMaxWidth(1200)).toBe(640)
+    expect(computeInspectorMaxWidth(500)).toBe(404)
+    expect(computeInspectorMaxWidth(200)).toBe(SECTION_INSPECTOR_MIN_WIDTH)
+  })
+
+  it('computes overlay width for narrow editor rows', () => {
+    expect(computeInspectorOverlayWidth(375)).toBe(343)
+    expect(computeInspectorOverlayWidth(768)).toBe(480)
+  })
+})
+
+describe('ResizableAside', () => {
+  it('renders a vertical resize separator with keyboard support', () => {
+    render(
+      <div style={{ width: 900 }}>
+        <ResizableAside aria-label="Section editor">
+          <p>Inspector content</p>
+        </ResizableAside>
+      </div>,
+    )
+
+    expect(screen.getByText('Inspector content')).toBeTruthy()
+    const separator = screen.getByRole('separator', { name: 'Resize inspector panel' })
+    expect(separator.getAttribute('aria-orientation')).toBe('vertical')
+    expect(separator.getAttribute('aria-valuemin')).toBe(String(SECTION_INSPECTOR_MIN_WIDTH))
+  })
+
+  it('widens when dragging the separator left', () => {
+    render(
+      <div style={{ width: 900 }}>
+        <ResizableAside aria-label="Section editor">
+          <p>Inspector content</p>
+        </ResizableAside>
+      </div>,
+    )
+
+    const aside = screen.getByLabelText('Section editor')
+    const separator = screen.getByRole('separator', { name: 'Resize inspector panel' })
+
+    expect(aside.style.width).toBe(`${SECTION_INSPECTOR_DEFAULT_WIDTH}px`)
+
+    fireEvent.pointerDown(separator, { clientX: 900, button: 0, pointerId: 1 })
+    fireEvent.pointerMove(separator, { clientX: 860, pointerId: 1 })
+    expect(aside.style.width).toBe(`${SECTION_INSPECTOR_DEFAULT_WIDTH + 40}px`)
+
+    fireEvent.pointerUp(separator, { pointerId: 1 })
+    expect(localStorage.getItem(SECTION_INSPECTOR_WIDTH_KEY)).toBe(
+      String(SECTION_INSPECTOR_DEFAULT_WIDTH + 40),
+    )
+  })
+
+  it('nudges width with arrow keys and persists', () => {
+    render(
+      <div style={{ width: 900 }}>
+        <ResizableAside aria-label="Section editor">
+          <p>Inspector content</p>
+        </ResizableAside>
+      </div>,
+    )
+
+    const aside = screen.getByLabelText('Section editor')
+    const separator = screen.getByRole('separator', { name: 'Resize inspector panel' })
+
+    separator.focus()
+    fireEvent.keyDown(separator, { key: 'ArrowLeft' })
+    expect(aside.style.width).toBe(`${SECTION_INSPECTOR_DEFAULT_WIDTH + 16}px`)
+    expect(readSectionInspectorWidth()).toBe(SECTION_INSPECTOR_DEFAULT_WIDTH + 16)
+  })
+
+  it('expands to overlay width on narrow containers', () => {
+    render(
+      <div style={{ width: 375 }}>
+        <ResizableAside aria-label="Section editor">
+          <InspectorExpandButton />
+          <p>Inspector content</p>
+        </ResizableAside>
+      </div>,
+    )
+
+    const aside = screen.getByLabelText('Section editor')
+    fireEvent.click(screen.getByRole('button', { name: 'Expand inspector panel' }))
+
+    expect(aside.getAttribute('data-overlay')).toBe('')
+    expect(aside.style.width).toBe(`${computeInspectorOverlayWidth(375)}px`)
+  })
+})

package/src/__tests__/components/theme-provider-accent.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, waitFor } from '@testing-library/react'
+import { accentTokensToCssVars, generateAdminThemeTokens } from '@actuate-media/cms-core/appearance'
+
+import { ThemeProvider } from '../../components/ThemeProvider.js'
+import { ADMIN_ROOT_ATTR, getAdminRootElement } from '../../lib/admin-root-element.js'
+
+/**
+ * Regression: accent overrides must land on the inner AdminRoot shell, not a
+ * consumer wrapper `.actuate-admin` that also defines static --acc tokens.
+ */
+afterEach(cleanup)
+
+const storage = new Map<string, string>()
+
+beforeEach(() => {
+  storage.clear()
+  vi.stubGlobal('localStorage', {
+    getItem: (key: string) => storage.get(key) ?? null,
+    setItem: (key: string, value: string) => storage.set(key, value),
+    removeItem: (key: string) => storage.delete(key),
+    clear: () => storage.clear(),
+  })
+})
+
+function mountNestedAdminShell() {
+  const outer = document.createElement('div')
+  outer.className = 'actuate-admin'
+  document.body.appendChild(outer)
+
+  const inner = document.createElement('div')
+  inner.className = 'actuate-admin'
+  inner.setAttribute(ADMIN_ROOT_ATTR, '')
+  outer.appendChild(inner)
+
+  return { outer, inner }
+}
+
+describe('getAdminRootElement', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('prefers the marked admin shell over an outer wrapper', () => {
+    const { outer, inner } = mountNestedAdminShell()
+    expect(getAdminRootElement()).toBe(inner)
+    expect(getAdminRootElement()).not.toBe(outer)
+  })
+
+  it('falls back to .actuate-admin when no marked root exists', () => {
+    const root = document.createElement('div')
+    root.className = 'actuate-admin'
+    document.body.appendChild(root)
+    expect(getAdminRootElement()).toBe(root)
+  })
+})
+
+describe('ThemeProvider accent application', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('applies accent tokens to the marked inner admin root when nested', async () => {
+    const { outer, inner } = mountNestedAdminShell()
+
+    render(
+      <ThemeProvider>
+        <span>child</span>
+      </ThemeProvider>,
+      { container: inner },
+    )
+
+    const expected = accentTokensToCssVars(
+      generateAdminThemeTokens({ adminAccentColor: 'purple' }, 'light'),
+    )
+
+    await waitFor(() => {
+      expect(inner.style.getPropertyValue('--acc')).toBe(expected['--acc']!)
+    })
+    expect(inner.style.getPropertyValue('--primary')).toBe(expected['--primary']!)
+    expect(outer.style.getPropertyValue('--acc')).toBe('')
+  })
+})

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

@@ -3,6 +3,7 @@ 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'
+import { ADMIN_ROOT_ATTR } from '../../lib/admin-root-element.js'
 
 /**
  * Regression: theme tokens only exist under `.actuate-admin` (theme.css), so
@@ -24,11 +25,24 @@ describe('adminPortalContainer', () => {
   it('resolves the admin root element', () => {
     const root = document.createElement('div')
     root.className = 'actuate-admin'
+    root.setAttribute(ADMIN_ROOT_ATTR, '')
     document.body.appendChild(root)
     expect(adminPortalContainer()).toBe(root)
     root.remove()
   })
 
+  it('prefers the marked shell when nested inside another .actuate-admin', () => {
+    const outer = document.createElement('div')
+    outer.className = 'actuate-admin'
+    const inner = document.createElement('div')
+    inner.className = 'actuate-admin'
+    inner.setAttribute(ADMIN_ROOT_ATTR, '')
+    outer.appendChild(inner)
+    document.body.appendChild(outer)
+    expect(adminPortalContainer()).toBe(inner)
+    outer.remove()
+  })
+
   it('returns undefined when no admin root is mounted', () => {
     document.querySelectorAll('.actuate-admin').forEach((el) => el.remove())
     expect(adminPortalContainer()).toBeUndefined()

package/src/__tests__/views/redirects-pane.render.test.tsx

@@ -55,6 +55,12 @@ vi.mock('../../lib/seo-service.js', () => ({
   dismissRedirectSuggestion: vi.fn(async () => ({})),
   exportRedirectsCsv: vi.fn(async () => ({ csv: '' })),
   importRedirectsCsv: vi.fn(async () => ({ imported: 0 })),
+  fetchRedirectRecoverySettings: vi.fn(async () => ({
+    aiRerank: false,
+    autoApply: false,
+    autoApplyMinConfidence: 0.85,
+  })),
+  saveRedirectRecoverySettings: vi.fn(async () => ({})),
 }))
 
 vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))

package/src/__tests__/views/seo-content-pane.render.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 
 /**
  * Content SEO tab with the inline editor pane (design split-pane pattern —
@@ -18,6 +18,9 @@ function makeRecord(over: Record<string, unknown> = {}) {
     url: 'https://example.com/',
     canonicalUrl: null,
     metaTitle: 'Home — Example',
+    metaTitlePage: 'Home',
+    siteName: 'Example',
+    titleTemplate: '%page% — %site%',
     metaDescription: 'Welcome to Example.',
     focusKeyword: null,
     keyTakeaway: null,
@@ -54,6 +57,11 @@ const fetchSeoContentRecord = vi.fn(async (entityType: string, entityId: string)
 })
 const updateSeoFields = vi.fn(async (_t: string, _i: string, _p: unknown) => ({}))
 
+vi.mock('@actuate-media/cms-core/client', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@actuate-media/cms-core/client')>()
+  return { ...actual }
+})
+
 vi.mock('../../lib/seo-service.js', () => ({
   fetchSeoContentRecords: () => fetchSeoContentRecords(),
   fetchSeoContentRecord: (t: string, i: string) => fetchSeoContentRecord(t, i),
@@ -99,8 +107,10 @@ describe('Content SEO inline editor pane', () => {
     expect(screen.getByRole('region', { name: 'SEO editor' })).toBeTruthy()
     expect(rowButton.getAttribute('aria-expanded')).toBe('true')
     await waitFor(() => expect(fetchSeoContentRecord).toHaveBeenCalledWith('page', 'p1'))
-    // Loaded field values populate the form.
-    expect(await screen.findByDisplayValue('Home — Example')).toBeTruthy()
+    // Form loads the stored page portion; preview applies the site title template.
+    expect(await screen.findByDisplayValue('Home')).toBeTruthy()
+    const editor = screen.getByRole('region', { name: 'SEO editor' })
+    expect(within(editor).getAllByText('Home — Example').length).toBeGreaterThan(0)
   })
 
   it('toggles the pane closed when the same row is clicked again', async () => {
@@ -118,7 +128,7 @@ describe('Content SEO inline editor pane', () => {
     render(<ContentTab />)
     fireEvent.click(await screen.findByRole('button', { name: /Home/ }))
 
-    const titleInput = await screen.findByDisplayValue('Home — Example')
+    const titleInput = await screen.findByDisplayValue('Home')
     fireEvent.change(titleInput, { target: { value: 'New Meta Title' } })
     fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
 

package/src/components/CoauthorResultPopover.tsx

@@ -120,7 +120,7 @@ export function CoauthorResultPopover({
         onClick={(e) => e.stopPropagation()}
         className="bg-card w-full max-w-2xl rounded-lg shadow-2xl outline-none"
       >
-        <div className="border-border flex items-center justify-between border-b px-4 py-3">
+        <div className="border-border flex items-center justify-between border-b px-6 py-4">
           <div className="text-foreground flex items-center gap-2 text-sm font-medium">
             <Sparkles className="text-primary h-4 w-4" aria-hidden />
             <span>AI {coauthorActionLabel(action)}</span>

package/src/components/EditorSeoAside.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Search, X } from 'lucide-react'
+import { SeoCharCount } from './seo/SeoCharCount.js'
+import { SeoEditorPane } from './seo/SeoEditorPane.js'
+import { InspectorExpandButton, ResizableAside } from './ui/ResizableAside.js'
+
+const SEO_TITLE_MIN = 30
+const SEO_TITLE_MAX = 60
+const SEO_DESC_MIN = 120
+const SEO_DESC_MAX = 160
+
+const INSPECTOR_SHELL = 'bg-card border-border flex h-full flex-col border-l'
+const LABEL = 'text-foreground mb-1 block text-xs font-medium'
+const INPUT =
+  'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+export interface EditorSeoAsideProps {
+  entityType: 'page' | 'post'
+  /** Saved document id — when absent, shows a draft-only meta form. */
+  entityId: string | null
+  title: string
+  seoTitle: string
+  seoDescription: string
+  canEdit: boolean
+  onClose: () => void
+  /** Sync basic meta fields on the in-memory editor model (draft flow). */
+  onDraftChange?: (patch: { seoTitle?: string; seoDescription?: string }) => void
+  /** Refetch the editor document after SEO API save (saved flow). */
+  onSaved?: () => void
+}
+
+function DraftSeoForm({
+  title,
+  seoTitle,
+  seoDescription,
+  canEdit,
+  onDraftChange,
+}: Pick<
+  EditorSeoAsideProps,
+  'title' | 'seoTitle' | 'seoDescription' | 'canEdit' | 'onDraftChange'
+>) {
+  return (
+    <div className="flex-1 space-y-4 overflow-y-auto p-4">
+      <p className="border-border bg-muted text-muted-foreground rounded-md border p-4 text-sm">
+        Save a draft first to unlock the full SEO editor — focus keyword, social previews, schema,
+        robots, and AI assists. You can still set a basic title and description below; they are
+        saved with the document.
+      </p>
+      <div>
+        <div className="mb-1 flex items-center justify-between">
+          <label className={`${LABEL} mb-0`} htmlFor="editor-seo-title">
+            SEO title
+          </label>
+          <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
+        </div>
+        <input
+          id="editor-seo-title"
+          className={INPUT}
+          value={seoTitle}
+          disabled={!canEdit}
+          placeholder={title || 'Defaults to the page title'}
+          onChange={(e) => onDraftChange?.({ seoTitle: e.target.value })}
+        />
+      </div>
+      <div>
+        <div className="mb-1 flex items-center justify-between">
+          <label className={`${LABEL} mb-0`} htmlFor="editor-seo-desc">
+            SEO description
+          </label>
+          <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
+        </div>
+        <textarea
+          id="editor-seo-desc"
+          className={`${INPUT} min-h-[96px] resize-y`}
+          value={seoDescription}
+          disabled={!canEdit}
+          placeholder="Summarize this content for search results (120–160 characters)"
+          onChange={(e) => onDraftChange?.({ seoDescription: e.target.value })}
+        />
+      </div>
+    </div>
+  )
+}
+
+/** Right-side SEO panel for the Page / Post section editors. */
+export function EditorSeoAside({
+  entityType,
+  entityId,
+  title,
+  seoTitle,
+  seoDescription,
+  canEdit,
+  onClose,
+  onDraftChange,
+  onSaved,
+}: EditorSeoAsideProps) {
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return (
+    <ResizableAside role="dialog" aria-label="SEO settings" className={INSPECTOR_SHELL}>
+      {entityId ? (
+        <SeoEditorPane
+          entityType={entityType}
+          entityId={entityId}
+          onClose={onClose}
+          onSaved={onSaved}
+        />
+      ) : (
+        <>
+          <div className="border-border flex items-center justify-between border-b px-6 py-4">
+            <div className="flex min-w-0 items-center gap-2">
+              <Search className="text-muted-foreground h-4 w-4 shrink-0" aria-hidden />
+              <div className="min-w-0">
+                <h2 className="text-foreground truncate text-sm font-medium">SEO</h2>
+                <p className="text-muted-foreground truncate text-xs">{title || 'Untitled'}</p>
+              </div>
+            </div>
+            <div className="flex shrink-0 items-center gap-0.5">
+              <InspectorExpandButton />
+              <button
+                type="button"
+                onClick={onClose}
+                aria-label="Close SEO panel"
+                className="text-muted-foreground hover:text-foreground hover:bg-accent flex h-9 w-9 items-center justify-center rounded-md md:h-7 md:w-7"
+              >
+                <X className="h-4 w-4" aria-hidden />
+              </button>
+            </div>
+          </div>
+          <DraftSeoForm
+            title={title}
+            seoTitle={seoTitle}
+            seoDescription={seoDescription}
+            canEdit={canEdit}
+            onDraftChange={onDraftChange}
+          />
+        </>
+      )}
+    </ResizableAside>
+  )
+}

package/src/components/MediaPickerModal.tsx

@@ -138,7 +138,7 @@ export function MediaPickerModal({
           aria-describedby={undefined}
           className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-70 mx-4 flex max-h-[80vh] w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border shadow-2xl focus:outline-none"
         >
-          <div className="border-border flex items-center justify-between border-b px-4 py-3">
+          <div className="border-border flex items-center justify-between border-b px-6 py-4">
             <Dialog.Title className="text-foreground text-lg font-medium">
               Insert Image
             </Dialog.Title>

package/src/components/SEOConfigPanel.tsx

@@ -242,7 +242,7 @@ export function SEOConfigPanel() {
 
       {/* Site-wide section */}
       <section className="border-border bg-card rounded-lg border">
-        <header className="border-border flex items-center gap-2 border-b px-4 py-3">
+        <header className="border-border flex items-center gap-2 border-b px-6 py-4">
           <Globe className="text-primary h-4 w-4" />
           <h3 className="text-foreground text-sm font-medium">Site-wide defaults</h3>
         </header>
@@ -333,7 +333,7 @@ export function SEOConfigPanel() {
 
       {/* Per-collection section */}
       <section className="border-border bg-card rounded-lg border">
-        <header className="border-border flex items-center gap-2 border-b px-4 py-3">
+        <header className="border-border flex items-center gap-2 border-b px-6 py-4">
           <FileText className="text-primary h-4 w-4" />
           <h3 className="text-foreground text-sm font-medium">Per-collection defaults</h3>
           <span className="text-muted-foreground text-xs">

package/src/components/SchedulePublishDialog.tsx

@@ -142,7 +142,7 @@ export function SchedulePublishDialog({
       <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40" />
         <Dialog.Content className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none">
-          <div className="border-border flex items-center justify-between border-b px-4 py-3">
+          <div className="border-border flex items-center justify-between border-b px-6 py-4">
             <div className="flex items-center gap-2">
               <Calendar className="text-muted-foreground h-5 w-5" aria-hidden />
               <Dialog.Title className="text-foreground text-lg font-medium">

package/src/components/SharePreviewLinkDialog.tsx

@@ -129,7 +129,7 @@ export function SharePreviewLinkDialog({
       <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40" />
         <Dialog.Content className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none">
-          <div className="border-border flex items-center justify-between border-b px-4 py-3">
+          <div className="border-border flex items-center justify-between border-b px-6 py-4">
             <div className="flex items-center gap-2">
               <Share2 className="text-muted-foreground h-5 w-5" aria-hidden />
               <Dialog.Title className="text-foreground text-lg font-medium">

package/src/components/ThemeProvider.tsx

@@ -8,6 +8,8 @@ import {
 } from '@actuate-media/cms-core/appearance'
 import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react'
 
+import { getAdminRootElement } from '../lib/admin-root-element.js'
+
 /**
  * Admin appearance engine.
  *
@@ -119,7 +121,7 @@ const KEY_MOTION = 'actuate-reduce-motion'
 const KEY_BRAND = 'actuate-admin-brand'
 
 function adminRootEl(): HTMLElement | null {
-  return document.querySelector('.actuate-admin')
+  return getAdminRootElement()
 }
 
 function applyColorMode(resolved: 'light' | 'dark') {

package/src/components/VersionHistory.tsx

@@ -98,7 +98,7 @@ export function VersionHistory({
           aria-describedby={undefined}
           className="bg-card text-card-foreground border-border animate-in slide-in-from-right fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col border-l shadow-xl focus:outline-none"
         >
-          <div className="border-border flex items-center justify-between border-b px-4 py-3">
+          <div className="border-border flex items-center justify-between border-b px-6 py-4">
             <div className="flex items-center gap-2">
               <Clock className="text-muted-foreground h-5 w-5" aria-hidden />
               <Dialog.Title className="text-foreground text-lg font-medium">