@prenta/admin 0.92.0

package/src/__tests__/components/offline-status.test.tsx

@@ -0,0 +1,66 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import { OfflineStatus, describeOfflineStatus } from '../../components/OfflineStatus.js'
+
+describe('describeOfflineStatus', () => {
+  it('error wins over everything', () => {
+    expect(describeOfflineStatus('connected', 'error').tone).toBe('bad')
+    expect(describeOfflineStatus('disconnected', 'error').tone).toBe('bad')
+  })
+
+  it('reports Synced when offline is unsupported but socket is connected', () => {
+    const out = describeOfflineStatus('connected', 'unsupported')
+    expect(out.tone).toBe('good')
+    expect(out.label).toBe('Synced')
+  })
+
+  it('warns when offline is unsupported and socket is disconnected', () => {
+    expect(describeOfflineStatus('disconnected', 'unsupported').tone).toBe('warn')
+  })
+
+  it('shows Connecting… when offline is unsupported and socket is connecting', () => {
+    expect(describeOfflineStatus('connecting', 'unsupported').label).toBe('Connecting…')
+  })
+
+  it('reports Restoring local copy… while IndexedDB is loading', () => {
+    expect(describeOfflineStatus('connecting', 'loading').label).toMatch(/Restoring/)
+    expect(describeOfflineStatus('connecting', 'pending').label).toMatch(/Restoring/)
+  })
+
+  it('reports Saved & synced when both ready', () => {
+    const out = describeOfflineStatus('connected', 'ready')
+    expect(out.tone).toBe('good')
+    expect(out.label).toBe('Saved & synced')
+  })
+
+  it('reports Saved locally when offline is ready but socket is disconnected', () => {
+    const out = describeOfflineStatus('disconnected', 'ready')
+    expect(out.tone).toBe('warn')
+    expect(out.label).toMatch(/Saved locally/)
+  })
+
+  it('reports Saved locally — reconnecting… while reconnecting', () => {
+    expect(describeOfflineStatus('connecting', 'ready').label).toMatch(/reconnecting/)
+  })
+})
+
+describe('<OfflineStatus />', () => {
+  it('renders the resolved label + tone', () => {
+    render(<OfflineStatus connection="connected" offline="ready" />)
+    const chip = screen.getByTestId('offline-status')
+    expect(chip.textContent).toContain('Saved & synced')
+    expect(chip.dataset.tone).toBe('good')
+  })
+
+  it('switches tone when conditions change', () => {
+    const { rerender } = render(<OfflineStatus connection="connected" offline="ready" />)
+    expect(screen.getByTestId('offline-status').dataset.tone).toBe('good')
+    rerender(<OfflineStatus connection="disconnected" offline="ready" />)
+    expect(screen.getByTestId('offline-status').dataset.tone).toBe('warn')
+    rerender(<OfflineStatus connection="connected" offline="error" />)
+    expect(screen.getByTestId('offline-status').dataset.tone).toBe('bad')
+  })
+})

package/src/__tests__/components/posts-badges.test.tsx

@@ -0,0 +1,82 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import {
+  PostStatusBadge,
+  PostTypeBadge,
+  SeoScoreIndicator,
+  seoScorePalette,
+  paletteFor,
+} from '../../components/posts/badges.js'
+
+describe('seoScorePalette', () => {
+  it('returns gray for null', () => {
+    expect(seoScorePalette(null)).toBe('gray')
+  })
+  it.each([
+    [80, 'green'],
+    [100, 'green'],
+    [79, 'orange'],
+    [60, 'orange'],
+    [59, 'red'],
+    [1, 'red'],
+    [0, 'gray'],
+  ])('score %i → %s', (input, expected) => {
+    expect(seoScorePalette(input)).toBe(expected)
+  })
+})
+
+describe('paletteFor', () => {
+  it('falls back to gray for unknown colors', () => {
+    const p = paletteFor('chartreuse')
+    expect(p.bg).toContain('tag-gray')
+  })
+  it('returns gray for null', () => {
+    const p = paletteFor(null)
+    expect(p.bg).toContain('tag-gray')
+  })
+  it('returns dedicated tag tokens for "purple" and "pink"', () => {
+    const purple = paletteFor('purple')
+    expect(purple.bg).toMatch(/tag-purple/)
+    expect(purple.border).toMatch(/tag-purple/)
+    // pink must not alias warning/orange (regression for chart-4 collision)
+    const pink = paletteFor('pink')
+    expect(pink.bg).toMatch(/tag-pink/)
+    expect(pink.text).toMatch(/tag-pink/)
+    expect(pink.bg).not.toMatch(/warn|orange|chart-4/)
+  })
+})
+
+describe('SeoScoreIndicator', () => {
+  it('renders a dash for missing score', () => {
+    render(<SeoScoreIndicator score={null} />)
+    expect(screen.getByText('—')).toBeTruthy()
+  })
+  it('renders the numeric score when present', () => {
+    render(<SeoScoreIndicator score={88} />)
+    expect(screen.getByText('88')).toBeTruthy()
+  })
+})
+
+describe('PostStatusBadge', () => {
+  it('renders the human label for each status', () => {
+    render(<PostStatusBadge status="PUBLISHED" />)
+    expect(screen.getByText('Published')).toBeTruthy()
+  })
+  it('uses an aria-label so screen readers get a clean Status: foo announcement', () => {
+    const { container } = render(<PostStatusBadge status="SCHEDULED" />)
+    expect(container.querySelector('[aria-label="Status: Scheduled"]')).toBeTruthy()
+  })
+})
+
+describe('PostTypeBadge', () => {
+  it('renders as a static span when no onClick is provided', () => {
+    const { container } = render(<PostTypeBadge label="Blog" color="purple" />)
+    expect(container.querySelector('span')?.textContent).toBe('Blog')
+    expect(container.querySelector('button')).toBeNull()
+  })
+  it('renders as a button when onClick is provided', () => {
+    render(<PostTypeBadge label="Blog" color="purple" onClick={() => {}} />)
+    expect(screen.getByRole('button', { name: 'Blog' })).toBeTruthy()
+  })
+})

package/src/__tests__/components/presence-chips-helpers.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+
+import { nameToInitials } from '../../components/PresenceChips.js'
+
+describe('nameToInitials', () => {
+  it('returns the first letter of a single name', () => {
+    expect(nameToInitials('Alice')).toBe('A')
+  })
+
+  it('returns the first letter of two name parts', () => {
+    expect(nameToInitials('Alice Cooper')).toBe('AC')
+  })
+
+  it('caps at two letters for three+ part names', () => {
+    expect(nameToInitials('Mary Jane Watson')).toBe('MJ')
+  })
+
+  it('uppercases the result', () => {
+    expect(nameToInitials('alice cooper')).toBe('AC')
+  })
+
+  it('trims surrounding whitespace before processing', () => {
+    expect(nameToInitials('  Alice  ')).toBe('A')
+  })
+
+  it('collapses multiple whitespace separators', () => {
+    expect(nameToInitials('Alice    Cooper')).toBe('AC')
+  })
+
+  it('falls back to "?" for an empty string', () => {
+    expect(nameToInitials('')).toBe('?')
+  })
+
+  it('falls back to "?" for a whitespace-only string', () => {
+    expect(nameToInitials('   ')).toBe('?')
+  })
+
+  it('handles a single emoji name without crashing', () => {
+    const result = nameToInitials('🐱 Whiskers')
+    // JS upper-case is a no-op for the cat — test just confirms we don't crash
+    // and return *something* with two character-positions.
+    expect(result.length).toBeGreaterThan(0)
+  })
+})

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/seo-char-count.test.tsx

@@ -0,0 +1,27 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { SeoCharCount } from '../../components/seo/SeoCharCount.js'
+
+describe('SeoCharCount', () => {
+  it('shows a neutral empty state', () => {
+    render(<SeoCharCount value="" min={30} max={60} />)
+    expect(screen.getByText('0/60')).toBeTruthy()
+  })
+
+  it('marks a value within the ideal range as good', () => {
+    render(<SeoCharCount value={'x'.repeat(40)} min={30} max={60} />)
+    expect(screen.getByText(/40\/60 · good/)).toBeTruthy()
+  })
+
+  it('flags a value over the max as too long (destructive)', () => {
+    const { container } = render(<SeoCharCount value={'x'.repeat(70)} min={30} max={60} />)
+    expect(screen.getByText(/70\/60 · too long/)).toBeTruthy()
+    expect(container.querySelector('.text-destructive')).toBeTruthy()
+  })
+
+  it('hints to aim for the range when below min', () => {
+    render(<SeoCharCount value={'x'.repeat(10)} min={30} max={60} />)
+    expect(screen.getByText(/aim for 30–60/)).toBeTruthy()
+  })
+})

package/src/__tests__/components/seo-editor-pane.render.test.tsx

@@ -0,0 +1,112 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+
+/**
+ * Focused SeoEditorPane behaviours:
+ *   - The header labels the two numbers unambiguously ("SEO score" vs "Content
+ *     analysis N/100") instead of the ambiguous "· Live analysis N".
+ *   - Generating an OG title/description writes into the OG field itself and
+ *     never overwrites the (search) meta title/description — a previously
+ *     destructive, undo-less action.
+ */
+
+const RECORD = {
+  id: 'seo1',
+  entityType: 'page' as const,
+  entityId: 'p1',
+  title: 'Home',
+  url: 'https://example.com/',
+  canonicalUrl: null,
+  metaTitle: 'Home — Example',
+  metaTitlePage: 'Home',
+  siteName: 'Example',
+  titleTemplate: '%page% — %site%',
+  metaDescription: 'Welcome to Example.',
+  focusKeyword: null,
+  keyTakeaway: null,
+  ogTitle: null,
+  ogDescription: null,
+  ogImageId: null,
+  ogImage: null,
+  twitterTitle: null,
+  twitterDescription: null,
+  twitterImageId: null,
+  noindex: false,
+  nofollow: false,
+  structuredDataType: 'WebPage',
+  structuredData: null,
+  llmsInclude: 'AUTO' as const,
+  llmsDescription: null,
+  llmsSection: null,
+  llmsOptional: false,
+  seoScore: 82,
+  seoGrade: 'good' as const,
+  updatedAt: '2026-06-01T00:00:00Z',
+}
+
+const fetchSeoContentRecord = vi.fn(async () => RECORD)
+const generateSeoField = vi.fn(async (_field: string, _ctx: unknown) => ({
+  text: 'Generated OG Title',
+}))
+
+vi.mock('@prenta/core/client', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@prenta/core/client')>()
+  return { ...actual }
+})
+
+vi.mock('../../lib/seo-service.js', () => ({
+  fetchSeoContentRecord: () => fetchSeoContentRecord(),
+  fetchDocumentSeoAnalysis: vi.fn(async () => ({ score: 72, checks: [] })),
+  updateSeoFields: vi.fn(async () => ({})),
+  generateSeoField: (field: string, ctx: unknown) => generateSeoField(field, ctx),
+  fetchLinkSuggestions: vi.fn(async () => ({ data: { suggestions: [] } })),
+  SEO_SCHEMA_TYPES: ['Article', 'WebPage'],
+}))
+
+vi.mock('../../lib/brand-voice-client.js', () => ({
+  fixBrandVoiceContent: vi.fn(async () => ({ ok: false })),
+  brandAlignmentTone: () => 'text-success',
+  brandAlignmentLabel: () => 'On brand',
+}))
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))
+
+const { SeoEditorPane } = await import('../../components/seo/SeoEditorPane.js')
+
+beforeEach(() => {
+  fetchSeoContentRecord.mockClear()
+  generateSeoField.mockClear()
+})
+
+describe('SeoEditorPane header', () => {
+  it('labels the analysis number as "Content analysis N/100", not "Live analysis"', async () => {
+    render(<SeoEditorPane entityType="page" entityId="p1" onClose={() => {}} />)
+    // Score header renders once the record loads.
+    expect(await screen.findByText(/SEO score:/)).toBeTruthy()
+    await waitFor(() => expect(screen.getByText(/Content analysis 72\/100/)).toBeTruthy())
+    expect(screen.queryByText(/Live analysis/)).toBeNull()
+  })
+})
+
+describe('SeoEditorPane OG generation', () => {
+  it('writes an AI OG title into the OG field and leaves the meta title intact', async () => {
+    render(<SeoEditorPane entityType="page" entityId="p1" onClose={() => {}} />)
+    // Wait for the record → the SEO (meta) title field shows the page portion.
+    expect(await screen.findByDisplayValue('Home')).toBeTruthy()
+
+    // Expand the collapsed "Social appearance" accordion to reveal OG fields.
+    fireEvent.click(screen.getByRole('button', { name: /Social appearance/ }))
+
+    // Click the AI Generate button that belongs to the "OG title" field.
+    const ogLabel = await screen.findByText('OG title')
+    const ogFieldHeader = ogLabel.closest('div') as HTMLElement
+    fireEvent.click(within(ogFieldHeader).getByRole('button', { name: /AI Generate/ }))
+
+    await waitFor(() => expect(generateSeoField).toHaveBeenCalledWith('ogTitle', expect.anything()))
+    // The suggestion lands in the OG field...
+    await waitFor(() => expect(screen.getByDisplayValue('Generated OG Title')).toBeTruthy())
+    // ...and the search meta title is untouched (was NOT overwritten/cleared).
+    expect(screen.getByDisplayValue('Home')).toBeTruthy()
+  })
+})

package/src/__tests__/components/tag-input.render.test.tsx

@@ -0,0 +1,103 @@
+// @vitest-environment happy-dom
+import { useState } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+/**
+ * TagInput — chip editor with autocomplete from the collection's in-use
+ * vocabulary (`GET /collections/:slug/field-values`). Pins the dedupe
+ * contract: adding "ai" when "AI" already exists in the collection resolves
+ * to the canonical "AI", and tags already on the post are never duplicated.
+ */
+
+let fieldValues: Array<{ value: string; count: number }> = []
+
+const cmsApi = vi.fn(async (endpoint: string, _options?: unknown) => {
+  if (endpoint.startsWith('/collections/posts/field-values')) {
+    return { data: { field: 'tags', values: fieldValues }, status: 200 }
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (e: string, o?: unknown) => cmsApi(e, o as never),
+  ensureCsrfToken: vi.fn(async () => {}),
+}))
+
+const { TagInput } = await import('../../components/TagInput.js')
+
+function Harness({ initial = [] as string[], maxTags }: { initial?: string[]; maxTags?: number }) {
+  const [tags, setTags] = useState(initial)
+  return (
+    <div>
+      <TagInput id="tags" value={tags} onChange={setTags} collection="posts" maxTags={maxTags} />
+      <output data-testid="value">{JSON.stringify(tags)}</output>
+    </div>
+  )
+}
+
+function currentValue(): string[] {
+  return JSON.parse(screen.getByTestId('value').textContent ?? '[]')
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  fieldValues = []
+})
+
+describe('TagInput', () => {
+  it('adds a tag on Enter and clears the draft', () => {
+    render(<Harness />)
+    const input = screen.getByRole('combobox')
+    fireEvent.change(input, { target: { value: 'Design' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(currentValue()).toEqual(['Design'])
+    expect((input as HTMLInputElement).value).toBe('')
+  })
+
+  it('dedupes case-insensitively against tags already on the post', () => {
+    render(<Harness initial={['AI']} />)
+    const input = screen.getByRole('combobox')
+    fireEvent.change(input, { target: { value: 'ai' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(currentValue()).toEqual(['AI'])
+  })
+
+  it('resolves new tags to the canonical casing already used in the collection', async () => {
+    fieldValues = [{ value: 'AI', count: 7 }]
+    render(<Harness />)
+    const input = screen.getByRole('combobox')
+    fireEvent.focus(input)
+    await waitFor(() => expect(cmsApi).toHaveBeenCalled())
+    fireEvent.change(input, { target: { value: 'ai' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(currentValue()).toEqual(['AI'])
+  })
+
+  it('shows suggestions on focus and adds one on click', async () => {
+    fieldValues = [
+      { value: 'Design', count: 3 },
+      { value: 'DevOps', count: 1 },
+    ]
+    render(<Harness />)
+    fireEvent.focus(screen.getByRole('combobox'))
+    const option = await screen.findByText('Design')
+    fireEvent.click(option)
+    expect(currentValue()).toEqual(['Design'])
+    // An added tag drops out of the suggestion list.
+    expect(screen.queryByRole('option', { name: 'Design' })).toBeNull()
+  })
+
+  it('removes a tag via its remove button and the last tag via Backspace', () => {
+    render(<Harness initial={['One', 'Two']} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Remove tag One' }))
+    expect(currentValue()).toEqual(['Two'])
+    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Backspace' })
+    expect(currentValue()).toEqual([])
+  })
+
+  it('disables input at the maxTags cap', () => {
+    render(<Harness initial={['a', 'b']} maxTags={2} />)
+    expect((screen.getByRole('combobox') as HTMLInputElement).disabled).toBe(true)
+  })
+})

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 '@prenta/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 `.prenta-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 = 'prenta-admin'
+  document.body.appendChild(outer)
+
+  const inner = document.createElement('div')
+  inner.className = 'prenta-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 .prenta-admin when no marked root exists', () => {
+    const root = document.createElement('div')
+    root.className = 'prenta-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__/components/toggle.test.tsx

@@ -0,0 +1,17 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { Toggle } from '../../components/ui/Toggle.js'
+
+afterEach(cleanup)
+
+describe('Toggle', () => {
+  it('positions the thumb with design-system absolute offsets', () => {
+    render(<Toggle checked={false} onCheckedChange={() => {}} aria-label="Test toggle" />)
+    const thumb = screen.getByRole('switch').querySelector('span')
+    expect(thumb?.className).toContain('absolute')
+    expect(thumb?.className).toContain('top-[2.5px]')
+    expect(thumb?.className).toContain('left-[2.5px]')
+    expect(thumb?.className).toContain('data-[state=checked]:left-[19.5px]')
+  })
+})