@prenta/admin 2.6.1 → 2.7.0

package/src/__tests__/styles/ai-gradient-contrast.test.ts

@@ -0,0 +1,135 @@
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { ACCENT_PRESET_LIST, contrastRatio, tuneAccent } from '@prenta/core/appearance'
+
+const tokens = JSON.parse(
+  readFileSync(
+    resolve(dirname(fileURLToPath(import.meta.url)), '../../../design-system/tokens.json'),
+    'utf8',
+  ),
+)
+
+/** `oklch(from var(--acc) calc(l ± d) c calc(h - r))` → the lightness and hue shifts. */
+function ai2Shift(value: string): { dl: number; dh: number } {
+  const m = /calc\(l ([+-]) ([\d.]+)\) c calc\(h - ([\d.]+)\)/.exec(value)
+  if (!m) throw new Error(`unexpected --ai2: ${value}`)
+  return { dl: (m[1] === '-' ? -1 : 1) * Number(m[2]), dh: -Number(m[3]) }
+}
+
+const toLinear = (c: number) => {
+  const v = c / 255
+  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
+}
+const toGamma = (v: number) => {
+  const c = Math.min(1, Math.max(0, v))
+  return c <= 0.0031308 ? c * 12.92 : 1.055 * c ** (1 / 2.4) - 0.055
+}
+
+/** `#rrggbb` → OKLCH (Björn Ottosson's OKLab). */
+function hexToOklch(hex: string) {
+  const n = parseInt(hex.slice(1), 16)
+  const r = toLinear((n >> 16) & 255)
+  const g = toLinear((n >> 8) & 255)
+  const b = toLinear(n & 255)
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  return { L, C: Math.hypot(A, B), H: ((Math.atan2(B, A) * 180) / Math.PI + 360) % 360 }
+}
+
+/** OKLCH → `#rrggbb`, channels clipped to sRGB as the browser paints them. */
+function oklchToHex({ L, C, H }: { L: number; C: number; H: number }) {
+  const a = C * Math.cos((H * Math.PI) / 180)
+  const b = C * Math.sin((H * Math.PI) / 180)
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3
+  const rgb = [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+  ]
+  return `#${rgb
+    .map((v) =>
+      Math.round(toGamma(v) * 255)
+        .toString(16)
+        .padStart(2, '0'),
+    )
+    .join('')}`
+}
+
+/** The second gradient stop for an accent, as the token computes it. */
+function ai2(accent: string, shift: { dl: number; dh: number }) {
+  const o = hexToOklch(accent)
+  return oklchToHex({
+    L: Math.min(1, Math.max(0, o.L + shift.dl)),
+    C: o.C,
+    H: (o.H + shift.dh + 360) % 360,
+  })
+}
+
+/** Hover is `filter: brightness(1.07)`, which scales the encoded channels. */
+function hover(hex: string) {
+  return `#${[1, 3, 5]
+    .map((i) =>
+      Math.min(255, Math.round(parseInt(hex.slice(i, i + 2), 16) * 1.07))
+        .toString(16)
+        .padStart(2, '0'),
+    )
+    .join('')}`
+}
+
+const light = ai2Shift(tokens.color.light.ai.ai2.value)
+const dark = ai2Shift(tokens.color.dark.ai.ai2.value)
+
+/** Every 17th step per channel: 4,096 custom picks. */
+function* grid() {
+  for (let r = 0; r < 256; r += 17)
+    for (let g = 0; g < 256; g += 17)
+      for (let b = 0; b < 256; b += 17)
+        yield `#${[r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('')}`
+}
+
+/**
+ * The AI button keeps its label on the gradient, so white (Porcelain, Linen)
+ * or near-black (Graphite) text must clear 4.5:1 at both ends, at rest and on
+ * hover. The kit's lighter second stop fails on light bases (Cobalt 2.85:1),
+ * and hover's brightness(1.07) costs custom blues about 0.4; CONFLICTS.md §2.
+ */
+describe('AI gradient contrast', () => {
+  it('keeps white text at 4.5:1 at both stops for every preset on light bases', () => {
+    for (const preset of ACCENT_PRESET_LIST) {
+      const stops = [preset.light.accentLt, ai2(preset.light.accentLt, light)]
+      for (const stop of stops) {
+        expect(contrastRatio('#ffffff', stop), `${preset.name} ${stop}`).toBeGreaterThanOrEqual(4.5)
+        expect(
+          contrastRatio('#ffffff', hover(stop)),
+          `${preset.name} ${stop} hover`,
+        ).toBeGreaterThanOrEqual(4.5)
+      }
+    }
+  })
+
+  it('keeps white text at 4.5:1 for custom accents on light bases, on hover too', () => {
+    for (const pick of grid()) {
+      const tuned = tuneAccent(pick)!
+      for (const stop of [tuned.lt, ai2(tuned.lt, light)]) {
+        expect(contrastRatio('#ffffff', hover(stop)), `${pick} ${stop}`).toBeGreaterThanOrEqual(4.5)
+      }
+    }
+  })
+
+  it('keeps dark text at 4.5:1 on the second stop in Graphite', () => {
+    for (const preset of ACCENT_PRESET_LIST) {
+      expect(
+        contrastRatio('#0e0f11', ai2(preset.dark.accentDk, dark)),
+        preset.name,
+      ).toBeGreaterThanOrEqual(4.5)
+    }
+  })
+})

package/src/__tests__/styles/breakpoint-order.test.ts

@@ -0,0 +1,68 @@
+import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { compile } from 'tailwindcss'
+import { describe, expect, it } from 'vitest'
+
+/**
+ * Any `--breakpoint-*` theme.css adds must sort in width order against
+ * Tailwind's own. Tailwind 4.2 compares breakpoints with parseInt() on the
+ * value, so px sorts before every rem tier, and a fractional rem tier ties with
+ * the stock one that shares its integer part (64.0625rem vs lg's 64rem) and
+ * falls back to name order. Either way `laptop:p-4` can lose to `lg:p-2`
+ * without any error. This compiles the real declarations and checks the order.
+ */
+
+const require = createRequire(import.meta.url)
+const twTheme = require.resolve('tailwindcss/theme.css')
+const theme = readFileSync(
+  fileURLToPath(new URL('../../styles/theme.css', import.meta.url)),
+  'utf8',
+)
+
+const declared = [...theme.matchAll(/^\s*--breakpoint-([\w-]+):\s*([^;]+);/gm)].map(
+  ([, name, value]) => ({ name: name!, value: value!.trim() }),
+)
+
+const STOCK = ['sm', 'md', 'lg', 'xl', '2xl']
+
+/** Emitted `@media (width >= …)` thresholds, in output order, as rem. */
+async function emittedOrder(): Promise<number[]> {
+  const compiler = await compile(
+    [
+      "@import 'tailwindcss/theme.css';",
+      `@theme inline {\n${declared.map((b) => `--breakpoint-${b.name}: ${b.value};`).join('\n')}\n}`,
+      '@tailwind utilities;',
+    ].join('\n'),
+    {
+      base: dirname(twTheme),
+      loadStylesheet: async () => ({
+        path: twTheme,
+        base: dirname(twTheme),
+        content: readFileSync(twTheme, 'utf8'),
+      }),
+    },
+  )
+  const names = [...new Set([...STOCK, ...declared.map((b) => b.name)])]
+  const css = compiler.build(names.map((n, i) => `${n}:p-${i + 1}`))
+  return [...css.matchAll(/@media \(width >= ([\d.]+)(rem|px)\)/g)].map(([, n, unit]) =>
+    unit === 'px' ? Number(n) / 16 : Number(n),
+  )
+}
+
+describe('breakpoint variants', () => {
+  it('emit narrowest first, stock and custom together', async () => {
+    const widths = await emittedOrder()
+    expect(widths.length).toBe(new Set([...STOCK, ...declared.map((b) => b.name)]).size)
+    expect(widths).toEqual([...widths].sort((a, b) => a - b))
+  })
+
+  it('never share an integer rem part with a stock breakpoint (Tailwind ties those)', () => {
+    const stockInts = [40, 48, 64, 80, 96]
+    for (const { name, value } of declared.filter((b) => !STOCK.includes(b.name))) {
+      const rem = value.endsWith('px') ? parseFloat(value) / 16 : parseFloat(value)
+      expect(stockInts, `--breakpoint-${name}: ${value}`).not.toContain(Math.trunc(rem))
+    }
+  })
+})

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) {