@prenta/admin 2.6.1 → 2.8.0

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

@@ -1,9 +1,9 @@
 // @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 { act, cleanup, render, waitFor } from '@testing-library/react'
+import { accentPickCssVars, generateAdminThemeTokens, tuneAccent } from '@prenta/core/appearance'
 
-import { ThemeProvider } from '../../components/ThemeProvider.js'
+import { ThemeProvider, useTheme } from '../../components/ThemeProvider.js'
 import { ADMIN_ROOT_ATTR, getAdminRootElement } from '../../lib/admin-root-element.js'
 
 /**
@@ -71,14 +71,89 @@ describe('ThemeProvider accent application', () => {
       { container: inner },
     )
 
-    const expected = accentTokensToCssVars(
-      generateAdminThemeTokens({ adminAccentColor: 'purple' }, 'light'),
+    const expected = accentPickCssVars(
+      generateAdminThemeTokens({ adminAccentColor: 'cobalt' }, 'light'),
     )
 
     await waitFor(() => {
-      expect(inner.style.getPropertyValue('--acc')).toBe(expected['--acc']!)
+      expect(inner.style.getPropertyValue('--acc-base')).toBe(expected['--acc-base']!)
     })
-    expect(inner.style.getPropertyValue('--primary')).toBe(expected['--primary']!)
-    expect(outer.style.getPropertyValue('--acc')).toBe('')
+    expect(inner.style.getPropertyValue('--acc-lt')).toBe(expected['--acc-lt']!)
+    expect(inner.style.getPropertyValue('--acc-dk')).toBe(expected['--acc-dk']!)
+    expect(outer.style.getPropertyValue('--acc-base')).toBe('')
+  })
+
+  it('applies the stored light base as data-light on the admin root', async () => {
+    const { inner } = mountNestedAdminShell()
+    storage.set('prenta-light', 'linen')
+
+    render(
+      <ThemeProvider>
+        <span>child</span>
+      </ThemeProvider>,
+      { container: inner },
+    )
+
+    await waitFor(() => expect(inner.getAttribute('data-light')).toBe('linen'))
+  })
+
+  it('tunes a low-contrast custom accent instead of dropping it', async () => {
+    const { inner } = mountNestedAdminShell()
+    storage.set('prenta-accent', '#ffd400')
+
+    render(
+      <ThemeProvider>
+        <span>child</span>
+      </ThemeProvider>,
+      { container: inner },
+    )
+
+    await waitFor(() => expect(inner.style.getPropertyValue('--acc-base')).toBe('#ffd400'))
+    // Nudged toward black for light bases; the raw yellow would be ~1.4:1.
+    expect(inner.style.getPropertyValue('--acc-lt')).not.toBe('#ffd400')
+  })
+
+  it('tunes a config accent (branding.primaryColor) and keeps it over saved picks', async () => {
+    const { inner } = mountNestedAdminShell()
+    storage.set('prenta-accent', 'teal')
+    let applyAppearance: ReturnType<typeof useTheme>['applyAppearance'] = () => {}
+    function Grab() {
+      applyAppearance = useTheme().applyAppearance
+      return null
+    }
+
+    render(
+      <ThemeProvider accentOverride="#4F46E5">
+        <Grab />
+      </ThemeProvider>,
+      { container: inner },
+    )
+
+    const tuned = tuneAccent('#4F46E5')!
+    await waitFor(() => expect(inner.style.getPropertyValue('--acc-base')).toBe(tuned.base))
+    expect(inner.style.getPropertyValue('--acc-lt')).toBe(tuned.lt)
+    expect(inner.style.getPropertyValue('--acc-dk')).toBe(tuned.dk)
+    // Graphite gets the tuned value, not the raw #4F46E5 (3.05:1 on buttons there).
+    expect(tuned.dk).not.toBe('#4f46e5')
+    // Nothing writes a raw, untuned --primary any more.
+    expect(inner.style.getPropertyValue('--primary')).toBe('')
+    expect(inner.style.getPropertyValue('--sidebar-primary')).toBe('')
+
+    // The DB accent arriving later doesn't displace it.
+    act(() => applyAppearance({ accent: 'teal', theme: 'dark' }))
+    expect(inner.style.getPropertyValue('--acc-base')).toBe(tuned.base)
+  })
+
+  it('ignores a config accent that is not a color', async () => {
+    const { inner } = mountNestedAdminShell()
+
+    render(
+      <ThemeProvider accentOverride="not-a-color">
+        <span>child</span>
+      </ThemeProvider>,
+      { container: inner },
+    )
+
+    await waitFor(() => expect(inner.style.getPropertyValue('--acc-base')).toBe('#2f5bea'))
   })
 })

package/src/__tests__/components/toggle.test.tsx

@@ -10,8 +10,16 @@ describe('Toggle', () => {
     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]')
+    // Kit switch (SHELL.md §7): 15px knob at 2px, 17px when on, on a 34×19 track.
+    expect(thumb?.className).toContain('top-0.5')
+    expect(thumb?.className).toContain('left-0.5')
+    expect(thumb?.className).toContain('h-[15px] w-[15px]')
+    expect(thumb?.className).toContain('data-[state=checked]:left-[17px]')
+    expect(screen.getByRole('switch').className).toContain('h-[19px] w-[34px]')
+  })
+
+  it('is also exported under the kit name Switch', async () => {
+    const { Switch } = await import('../../components/ui/Toggle.js')
+    expect(Switch).toBe(Toggle)
   })
 })

package/src/__tests__/components/ui-primitives.test.tsx

@@ -3,7 +3,6 @@ import { describe, expect, it, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { StatusBadge } from '../../components/ui/StatusBadge.js'
 import { FilterPill } from '../../components/ui/FilterPill.js'
-import { StatPill } from '../../components/ui/StatPill.js'
 
 describe('StatusBadge', () => {
   it('renders the label with a leading dot by default', () => {
@@ -47,12 +46,10 @@ describe('FilterPill', () => {
     expect(screen.getByText('12')).toBeTruthy()
     expect(screen.getByRole('button', { name: /Admin/ }).getAttribute('aria-pressed')).toBe('false')
   })
-})
-
-describe('StatPill', () => {
-  it('renders value and label', () => {
-    render(<StatPill value={8} label="Active" />)
-    expect(screen.getByText('8')).toBeTruthy()
-    expect(screen.getByText('Active')).toBeTruthy()
+  it('keeps its label on one line', () => {
+    render(<FilterPill>Body start</FilterPill>)
+    expect(screen.getByRole('button', { name: 'Body start' }).className).toContain(
+      'whitespace-nowrap',
+    )
   })
 })

package/src/__tests__/layout/build-nav-items.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { buildNavItems } from '../../layout/Sidebar.js'
+import { buildNavItems } from '../../layout/nav-config.js'
 
 /**
  * Mirrors a standard scaffold that enables formsPlugin + seoPlugin +