@prenta/admin 2.6.1 → 2.8.0

package/src/__tests__/styles/responsive-layer.test.ts

@@ -44,18 +44,47 @@ describe('responsive + accessibility layer', () => {
   it('scopes every rule to the admin root', () => {
     // The admin renders inside consumer applications. A bare `:focus-visible`
     // or `@media print` rule here would restyle the host's own pages.
-    const selectors = responsive
-      .replace(/\/\*[\s\S]*?\*\//g, '')
-      .split('\n')
-      .map((line) => line.trim())
-      .filter((line) => line.endsWith('{') && !line.startsWith('@'))
+    // Selectors can span lines (Prettier breaks long ones), so each one is
+    // the whole prelude between the previous brace and its own `{`; every
+    // comma-separated part of it must be scoped.
+    const preludes = [...responsive.replace(/\/\*[\s\S]*?\*\//g, '').matchAll(/([^{};]+)\{/g)]
+      .map(([, prelude]) => prelude!.replace(/\s+/g, ' ').trim())
+      .filter((prelude) => !prelude.startsWith('@'))
+    // Split on top-level commas only, not those inside :is() / :not().
+    const topLevel = (prelude: string) => {
+      const parts = ['']
+      let depth = 0
+      for (const char of prelude) {
+        if (char === '(') depth++
+        if (char === ')') depth--
+        if (char === ',' && depth === 0) parts.push('')
+        else parts[parts.length - 1] += char
+      }
+      return parts.map((part) => part.trim())
+    }
+    const selectors = preludes.flatMap(topLevel)
 
     expect(selectors.length).toBeGreaterThan(10)
     for (const selector of selectors) {
-      expect(selector, `unscoped selector: ${selector}`).toMatch(/\.prenta-admin/)
+      expect(selector, `unscoped selector: ${selector}`).toMatch(/\.prenta-admin\b/)
     }
   })
 
+  it("keeps each control's own shape on focus and rings inverted surfaces in --bg", () => {
+    const rule = (selector: string) => {
+      const start = responsive.indexOf(`${selector} {`)
+      expect(start, selector).toBeGreaterThan(-1)
+      return responsive.slice(start, responsive.indexOf('}', start))
+    }
+    // A border-radius here beat the rounded-* utilities (this file is unlayered),
+    // so switches, chips and buttons changed shape when focused.
+    expect(rule('.prenta-admin :focus-visible')).not.toContain('border-radius')
+    // An --acc ring on the dark unsaved bar and toasts fell to ~2:1 (WCAG 1.4.11).
+    expect(rule('.prenta-admin .prenta-inverse :focus-visible')).toContain(
+      'outline-color: var(--bg)',
+    )
+  })
+
   it('raises contrast rather than lowering it, in both themes', () => {
     // The shipped --muted is already an AA correction over the handoff's own
     // value (see prenta-tokens.css). A "more contrast" preference that moved
@@ -89,18 +118,68 @@ describe('responsive + accessibility layer', () => {
     }
   })
 
-  it('grows touch targets only under a coarse pointer', () => {
+  it("uses the kit's high-contrast values (cms-responsive.css)", () => {
+    const kit = readFileSync(
+      PKG + '../../docs/design/prenta/prototype/design-system/cms-responsive.css',
+      'utf8',
+    )
+    const values = (css: string) =>
+      [
+        ...css
+          .slice(css.indexOf('@media (prefers-contrast: more)'))
+          .matchAll(/(--muted|--sub|--bdr):\s*(#[0-9a-f]{6})/gi),
+      ]
+        .slice(0, 6)
+        .map(([, name, hex]) => `${name}: ${hex!.toLowerCase()}`)
+    expect(values(responsive)).toHaveLength(6)
+    expect(values(responsive)).toEqual(values(kit))
+  })
+
+  it('reaches Linen: the Linen block weighs no more than the contrast rule', () => {
+    // The contrast rule is `.prenta-admin` (0,1,0) and comes later. A Linen
+    // selector with its conditions outside :where() would outweigh it, and
+    // Linen users would never get the raised values.
+    const linenSelector = /^(\.prenta-admin[^{\n]*data-light='linen'[^{\n]*)\{/m.exec(tokens)![1]!
+    expect(linenSelector.trim()).toMatch(/^\.prenta-admin:where\(.*\)$/)
+
+    const luminance = (hex: string) => {
+      const n = parseInt(hex.slice(1), 16)
+      return ((n >> 16) & 255) * 0.299 + ((n >> 8) & 255) * 0.587 + (n & 255) * 0.114
+    }
+    const linenBlock = tokens.slice(tokens.indexOf(linenSelector))
+    const contrastBlock = responsive.slice(responsive.indexOf('@media (prefers-contrast: more)'))
+    for (const name of ['--muted', '--sub', '--bdr']) {
+      const pattern = new RegExp(`${name}:\\s*(#[0-9a-f]{6})`, 'i')
+      const linen = pattern.exec(linenBlock)![1]!
+      const raised = pattern.exec(contrastBlock)![1]!
+      expect(luminance(raised), `Linen ${name}`).toBeLessThan(luminance(linen))
+    }
+  })
+
+  it('grows touch targets only under a coarse pointer or in the mobile tier', () => {
     const coarse = responsive.slice(
       responsive.indexOf('@media (pointer: coarse)'),
       responsive.indexOf('@media (min-width: 2000px)'),
     )
     expect(coarse).toContain('min-height: 44px')
     expect(coarse).toContain('min-width: 44px')
-    // A 26px button is right with a mouse. No control floor is imposed outside
-    // this block — the 44px that appears in the stacked-layout rules is the
-    // collapsed strip's own height, not a minimum applied to a control.
-    const elsewhere = responsive.replace(coarse, '').replace(/\/\*[\s\S]*?\*\//g, '')
-    expect(elsewhere).not.toMatch(/min-(height|width):\s*44px/)
+    // A 26px button is right with a mouse on a laptop. Outside the coarse
+    // block, a 44px floor belongs only to the mobile tier (SHELL.md §8: "All
+    // actions become 44px icons"), never to tablet or wider. The 44px in the
+    // stacked-layout rules is the collapsed strip's own height, not a floor.
+    const blocks = [
+      ...responsive.replace(/\/\*[\s\S]*?\*\//g, '').matchAll(/@media ([^{]+)\{([\s\S]*?)\n\}/g),
+    ]
+    const floors = blocks.filter(([, , body]) => /min-(height|width):\s*44px/.test(body!))
+    expect(floors.length).toBeGreaterThan(1)
+    for (const [, query] of floors) {
+      expect(['(pointer: coarse)', '(width < 769px)']).toContain(query!.trim())
+    }
+    const outside = blocks.reduce(
+      (css, [block]) => css.replace(block!, ''),
+      responsive.replace(/\/\*[\s\S]*?\*\//g, ''),
+    )
+    expect(outside).not.toMatch(/min-(height|width):\s*44px/)
   })
 
   it('grows the switch by its hit area, never by its box', () => {
@@ -112,6 +191,57 @@ describe('responsive + accessibility layer', () => {
     expect(hit.slice(0, hit.indexOf('}'))).not.toContain('min-height')
   })
 
+  it('leaves position to the control, so a positioned chevron stays in its row', () => {
+    // The layer is unlayered: a `position: relative` here would beat the
+    // sidebar's layered `absolute` chevron and drop it out of the row on touch.
+    const coarse = responsive.slice(
+      responsive.indexOf('@media (pointer: coarse)'),
+      responsive.indexOf('@media (min-width: 2000px)'),
+    )
+    const rules = coarse
+      .replace(/\/\*[\s\S]*?\*\//g, '')
+      .replace(/\.prenta-touch-hit::after\s*\{[^}]*\}/, '')
+    expect(rules).not.toMatch(/\.prenta-touch-hit[^{]*\{[^}]*position/)
+    const after = /\.prenta-touch-hit::after\s*\{([^}]*)\}/.exec(coarse)![1]!
+    expect(after).toContain('inset-block: var(--touch-hit-block, -13px)')
+    expect(after).toContain('inset-inline: var(--touch-hit-inline, -6px)')
+
+    // So every control using the hook positions itself.
+    const files = [
+      'src/components/ui/Toggle.tsx',
+      'src/components/page-tab/DirectiveSwitch.tsx',
+      'src/layout/Sidebar.tsx',
+    ]
+    for (const file of files) {
+      const uses = read(file)
+        .split('\n')
+        .filter((line) => line.includes('prenta-touch-hit') && !/^\s*(\/\/|\*|\{\/\*)/.test(line))
+      expect(uses.length, file).toBeGreaterThan(0)
+      for (const line of uses) expect(line, file).toMatch(/\b(relative|absolute)\b/)
+    }
+  })
+
+  it('keeps the sidebar chevrons’ touch areas inside their rows', () => {
+    // 24px chevrons: the parent row is 36px (h-9), a per-form row 30px. Each
+    // area is 44px wide and exactly its row tall.
+    const chevrons = read('src/layout/Sidebar.tsx')
+      .split('\n')
+      .filter((line) => line.includes('prenta-touch-hit') && line.includes('h-6 w-6'))
+    const classes = (line: string) => line.split(/[\s"`]+/)
+    const parent = chevrons.find((line) => classes(line).includes('relative'))!
+    const nested = chevrons.find((line) => classes(line).includes('absolute'))!
+    for (const [line, block] of [
+      [parent, '-6px'],
+      [nested, '-3px'],
+    ] as const) {
+      expect(classes(line)).toContain(`[--touch-hit-block:${block}]`)
+      expect(classes(line)).toContain('[--touch-hit-inline:-10px]')
+    }
+    expect(24 + 2 * 6).toBe(36)
+    expect(24 + 2 * 3).toBe(30)
+    expect(24 + 2 * 10).toBe(44)
+  })
+
   it('overrides the rail width with !important, because it is set inline', () => {
     // The rail is drag-resizable and its width is an inline style, which no
     // class can beat. Without this the stacked layout silently keeps a
@@ -119,6 +249,222 @@ describe('responsive + accessibility layer', () => {
     const stacked = responsive.slice(responsive.indexOf('@media (max-width: 900px)'))
     expect(stacked).toMatch(/\.prenta-editor-rail\s*\{[^}]*width:\s*100%\s*!important/)
   })
+
+  it('grows the topbar to 64px at the kit 4K tier (SHELL.md §8)', () => {
+    // The topbar and the sidebar logo row are both h-[var(--tbh)].
+    const block = /@media \(width >= 2200px\) \{([\s\S]*?)\n\}/.exec(responsive)?.[1] ?? ''
+    expect(block).toMatch(/\.prenta-admin \{\s*--tbh: 64px;/)
+    expect(read('src/layout/Header.tsx')).toContain('h-[var(--tbh)]')
+    expect(read('src/layout/Sidebar.tsx')).toContain('h-[var(--tbh)]')
+  })
+})
+
+/** P-05: the layout tiers (SHELL.md §8, the kit's cms-layouts.css). */
+describe('layout tier rules', () => {
+  const css = responsive.replace(/\/\*[\s\S]*?\*\//g, '')
+  const BLOCK = /@media ([^{]+)\{([\s\S]*?)\n\}/g
+  const flat = (text: string) => text.replace(/\s+/g, ' ')
+  /** Every `@media <query>` block's body, joined, whitespace collapsed. */
+  const tier = (query: string) =>
+    flat(
+      [...css.matchAll(BLOCK)]
+        .filter(([, q]) => q!.trim() === query)
+        .map(([, , body]) => body!)
+        .join('\n'),
+    )
+  /** The stylesheet without its `@media <query>` blocks. */
+  const without = (query: string) =>
+    flat(css.replace(BLOCK, (block, q: string) => (q.trim() === query ? '' : block)))
+  const MOBILE = '(width < 769px)'
+  const TABLET = '(769px <= width < 1025px)'
+  /** The declarations of the first rule whose selector contains `needle`. */
+  const ruleIn = (block: string, needle: string) => {
+    const at = block.indexOf(needle)
+    expect(at, needle).toBeGreaterThan(-1)
+    return block.slice(block.indexOf('{', at), block.indexOf('}', at))
+  }
+
+  it('sets the gutter and drawer width per tier, laptop being the token baseline', () => {
+    expect(tokens).toMatch(/--gut: 28px;/)
+    expect(tokens).toMatch(/--drawer-w: 440px;/)
+    const gut = (query: string) => /--gut: (\d+)px;/.exec(tier(query))?.[1]
+    expect(gut('(width >= 2200px)')).toBe('44')
+    expect(gut('(1441px <= width < 2200px)')).toBe('36')
+    expect(gut(TABLET)).toBe('20')
+    expect(gut(MOBILE)).toBe('16')
+    expect(tier('(width >= 2200px)')).toContain('--drawer-w: 600px')
+    expect(tier('(1441px <= width < 2200px)')).toContain('--drawer-w: 500px')
+    expect(tier(TABLET)).toContain('--drawer-w: min(440px, 72vw)')
+  })
+
+  it('collapses secondary header actions to 40px icons at tablet, never AI or primary', () => {
+    const block = tier(TABLET).replace(/\s+/g, ' ')
+    const selector =
+      /\.prenta-admin \[data-header-actions\] (:is\([^{]*\)):has\(svg\):not\( ?\[data-keep-label\] ?\) \{/.exec(
+        block,
+      )
+    expect(selector, 'tablet collapse rule').not.toBeNull()
+    const variants = selector![1]!
+    for (const kept of ['secondary', 'outline', 'ghost']) expect(variants).toContain(`'${kept}'`)
+    for (const labelled of ['primary', 'ai']) expect(variants).not.toContain(`'${labelled}'`)
+    const box = ruleIn(block, selector![0]!)
+    expect(box).toContain('width: 40px')
+    expect(box).toContain('height: 40px')
+    expect(box).toContain('font-size: 0')
+  })
+
+  it('collapses every mobile header action to a 44px icon except the FAB', () => {
+    const block = tier(MOBILE).replace(/\s+/g, ' ')
+    const selector =
+      /\.prenta-admin \[data-header-actions\] :is\(([^)]*)\):has\(svg\):not\(\[data-fab\]\) \{/.exec(
+        block,
+      )
+    expect(selector, 'mobile collapse rule').not.toBeNull()
+    for (const variant of ['primary', 'secondary', 'ghost', 'ai']) {
+      expect(selector![1]).toContain(`'${variant}'`)
+    }
+    const box = ruleIn(block, selector![0]!)
+    expect(box).toContain('width: 44px')
+    expect(box).toContain('height: 44px')
+  })
+
+  it('keeps a collapsed label as the accessible name (clipped, never display: none)', () => {
+    // display: none would drop the label from the accessibility tree and
+    // leave an unnamed icon button.
+    for (const block of [tier(TABLET), tier(MOBILE)]) {
+      const labels = [
+        ...block.replace(/\s+/g, ' ').matchAll(/> :not\(svg\):not\(:has\(svg\)\) \{([^}]*)\}/g),
+      ]
+      expect(labels.length).toBeGreaterThan(0)
+      for (const [, declarations] of labels) {
+        expect(declarations).toContain('clip-path: inset(50%)')
+        expect(declarations).toContain('position: absolute')
+        expect(declarations).not.toContain('display: none')
+      }
+    }
+  })
+
+  it('floats the FAB above the tab bar, under every overlay, and clears room for it', () => {
+    const block = tier(MOBILE)
+    const fab = ruleIn(block, '.prenta-admin [data-fab] {')
+    expect(fab).toContain('position: fixed')
+    expect(fab).toContain('bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px))')
+    expect(fab).toContain('z-index: var(--z-tabbar)')
+    expect(fab).toContain('width: 56px')
+    expect(fab).toContain('height: 56px')
+    expect(fab).toContain('border-radius: 18px')
+    // On the admin root, so both the content column and the toasts read it,
+    // and not while an open side pane hides the FAB.
+    expect(
+      ruleIn(
+        block,
+        '.prenta-admin:has(#prenta-main [data-fab]):not(:has([data-inspector-open])) {',
+      ),
+    ).toContain('--fab-clear: 88px')
+    expect(read('src/layout/primitives/AdminShell.tsx')).toContain('var(--fab-clear, 0px)')
+    // Floating only on mobile; elsewhere just a forced-colors edge.
+    const FORCED = '(forced-colors: active)'
+    expect(ruleIn(tier(FORCED), '.prenta-admin [data-fab] {')).toContain(
+      'border: 1px solid ButtonText',
+    )
+    const others = flat(
+      css.replace(BLOCK, (rules, q: string) => ([MOBILE, FORCED].includes(q.trim()) ? '' : rules)),
+    )
+    expect(others).not.toContain('[data-fab] {')
+  })
+
+  it('lifts phone toasts above the FAB (review: a 358px error toast covered it)', () => {
+    // sonner's mobile layout (≤600px) makes a toast as wide as the screen; its
+    // offset adds the FAB's room. Wider, a centred toast misses the FAB.
+    const toaster = read('src/components/ui/Toaster.tsx')
+    const mobileOffset = toaster.slice(toaster.indexOf('mobileOffset='))
+    expect(mobileOffset.slice(0, mobileOffset.indexOf('duration='))).toContain(
+      'var(--fab-clear, 0px)',
+    )
+    const offset = toaster.slice(toaster.indexOf(' offset='), toaster.indexOf('mobileOffset='))
+    expect(offset).not.toContain('--fab-clear')
+  })
+
+  it('draws list tables as cards on mobile only, header kept for screen readers', () => {
+    const block = tier(MOBILE)
+    expect(ruleIn(block, 'table[data-cards] {')).toContain('display: block')
+    const head = ruleIn(block, 'table[data-cards] thead {')
+    expect(head).toContain('clip-path: inset(50%)')
+    expect(head).not.toContain('display: none')
+    // Review: its sort buttons and select-all stayed in the tab order,
+    // invisibly. CardListControls brings them back for phones.
+    expect(
+      ruleIn(
+        block,
+        'table[data-cards] thead :is(a, button, input, select, textarea, [tabindex]) {',
+      ),
+    ).toContain('visibility: hidden')
+    expect(ruleIn(block, 'table[data-cards] tbody tr {')).toContain('display: grid')
+    expect(ruleIn(block, 'td[data-label]:not([data-role])::before')).toContain(
+      'content: attr(data-label)',
+    )
+    expect(ruleIn(block, "td[data-role='title'] {")).toContain('grid-row: 1')
+    expect(ruleIn(block, "td[data-role='check'] {")).toContain('grid-column: 2')
+    // Review: a 13px checkbox. The kit's 24px box inside a 44px hit area.
+    const hit = ruleIn(block, "td[data-role='check'] label {")
+    expect(hit).toContain('min-width: 44px')
+    expect(hit).toContain('min-height: 44px')
+    expect(ruleIn(block, "td[data-role='check'] input {")).toContain('min-width: 24px')
+    // Review: long values were cut off with no ellipsis. They wrap.
+    const value = ruleIn(block, 'td[data-label]:not([data-role]) * {')
+    expect(value).toContain('white-space: normal')
+    expect(value).toContain('overflow-wrap: anywhere')
+    expect(ruleIn(block, 'td[data-label]:not([data-role]) > * {')).toContain('min-width: 0')
+    expect(ruleIn(block, "td[data-role='media'] {")).toContain('display: none')
+    const actions = ruleIn(block, "td[data-role='actions'] :is(button, a)")
+    expect(actions).toContain('min-width: 44px')
+    expect(actions).toContain('min-height: 44px')
+    // Analytic tables scroll in their own box instead.
+    expect(ruleIn(block, ':has(> table:not([data-cards]))')).toContain('overflow-x: auto')
+    // Review: not tables drawn for a narrow pane or dialog.
+    expect(
+      ruleIn(
+        block,
+        "table:not([data-cards]):not(:where([data-inspector-open], [role='dialog']) table) {",
+      ),
+    ).toContain('min-width: 640px')
+    expect(without(MOBILE)).not.toContain('table[data-cards]')
+  })
+
+  it('turns an open side pane into a sheet over the content column on mobile', () => {
+    // Everything off the pane's path hides (the list, the page header and
+    // filters), rather than sitting behind it where focus could still reach.
+    const rule = ruleIn(
+      tier(MOBILE),
+      '#prenta-main :has([data-inspector-open]) > :not([data-inspector-open], :has([data-inspector-open]))',
+    )
+    expect(rule).toContain('display: none')
+    // Review: inline widths and 100vh-minus layouts left it short of the
+    // column. Fixed between the topbar and the tab bar instead.
+    const sheet = ruleIn(tier(MOBILE), '.prenta-admin #prenta-main [data-inspector-open] {')
+    expect(sheet).toContain('position: fixed')
+    expect(sheet).toContain('top: var(--tbh)')
+    expect(sheet).toContain('bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px))')
+    expect(sheet).toContain('left: 0')
+    expect(sheet).toContain('right: 0')
+    expect(sheet).toContain('width: auto !important')
+  })
+
+  it('anchors a table’s absolute content (sr-only headers) to its own scroll box', () => {
+    // Without it the "Actions" header's static position widened #prenta-main
+    // by 199px on Posts at 924px. Layered, so a box's own `sticky` /
+    // `absolute` utility still wins over this default.
+    const layer = /@layer components \{([\s\S]*?)\n\}/.exec(css)?.[1] ?? ''
+    expect(flat(layer)).toContain(
+      '.prenta-admin #prenta-main :has(> table) { position: relative; }',
+    )
+  })
+
+  it('keeps the content scroller from scrolling sideways', () => {
+    expect(read('src/layout/primitives/AdminShell.tsx')).toMatch(
+      /id="prenta-main"\s+className="[^"]*\boverflow-x-hidden\b/,
+    )
+  })
 })
 
 describe('class hooks the layer targets', () => {
@@ -135,6 +481,15 @@ describe('class hooks the layer targets', () => {
     ['prenta-canvas-fit', 'src/views/page-editor/CanvasSurface.tsx'],
     ['prenta-touch-target', 'src/components/EditorRail.tsx'],
     ['prenta-touch-hit', 'src/components/page-tab/DirectiveSwitch.tsx'],
+    ['data-header-actions', 'src/components/ui/PageHeader.tsx'],
+    ['data-variant', 'src/components/ui/Button.tsx'],
+    ['data-keep-label', 'src/components/ui/Button.tsx'],
+    ['data-fab', 'src/views/Pages/PagesListView.tsx'],
+    ['data-cards', 'src/components/ui/card-table.ts'],
+    ['data-role', 'src/components/ui/card-table.ts'],
+    ['data-label', 'src/components/ui/card-table.ts'],
+    ['data-inspector-open', 'src/components/ui/InspectorPane.tsx'],
+    ['data-inspector-open', 'src/views/MediaBrowser.tsx'],
   ]
 
   for (const [hook, file] of hooks) {

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)', () => {