basalt-ui 1.26.0 → 1.28.0

package/src/cli/check-theme.test.ts

@@ -1,837 +0,0 @@
-/**
- * Tests for the `basalt check-theme` guard — specifically the `raw-surface` check that flags
- * ad-hoc inline surface styling (border / borderRadius / boxShadow) in consumer code.
- *
- * `checkTheme(cwd)` scans the configured `roots` (from the consumer package.json `"basalt"` key)
- * and returns 0 (clean) / 1 (violations), printing findings to stderr. Each case writes a tiny
- * fixture repo into a temp dir, runs the guard against it, and asserts on the exit code plus the
- * captured `raw-surface` lines.
- */
-import { afterEach, beforeEach, describe, expect, it } from 'bun:test'
-import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs'
-import { tmpdir } from 'node:os'
-import { resolve } from 'node:path'
-
-import { checkTheme } from './index.ts'
-
-let dir: string
-
-/** Write a consumer fixture: a package.json pointing `roots` at `src`, plus one component file. */
-function fixture(source: string, basalt: Record<string, unknown> = { roots: ['src'] }): void {
-  writeFileSync(resolve(dir, 'package.json'), JSON.stringify({ name: 'fixture', basalt }))
-  mkdirSync(resolve(dir, 'src'), { recursive: true })
-  writeFileSync(resolve(dir, 'src', 'Card.tsx'), source)
-}
-
-/**
- * Write a consumer fixture at an arbitrary path under the scanned root (e.g. a `charts/` subdir),
- * so the path-gated `raw-visx-axis` guard can be exercised. `relPath` is relative to `src`.
- */
-function fixtureAt(
-  relPath: string,
-  source: string,
-  basalt: Record<string, unknown> = { roots: ['src'] },
-): void {
-  writeFileSync(resolve(dir, 'package.json'), JSON.stringify({ name: 'fixture', basalt }))
-  const abs = resolve(dir, 'src', relPath)
-  mkdirSync(resolve(abs, '..'), { recursive: true })
-  writeFileSync(abs, source)
-}
-
-/** Run the guard against the fixture, capturing stderr so we can assert on the emitted kinds. */
-function run(): { code: number; err: string } {
-  const original = console.error
-  let err = ''
-  console.error = (...args: unknown[]) => {
-    err += `${args.join(' ')}\n`
-  }
-  try {
-    return { code: checkTheme(dir), err }
-  } finally {
-    console.error = original
-  }
-}
-
-beforeEach(() => {
-  dir = mkdtempSync(resolve(tmpdir(), 'basalt-check-theme-'))
-})
-
-afterEach(() => {
-  rmSync(dir, { recursive: true, force: true })
-})
-
-describe('check-theme raw-surface', () => {
-  it('flags a raw inline border literal', () => {
-    fixture(`export const C = () => <div style={{ border: '1px solid #ccc' }} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-surface')
-  })
-
-  it('flags a numeric borderRadius literal', () => {
-    fixture(`export const C = () => <div style={{ borderRadius: 8 }} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-surface')
-  })
-
-  it('flags a boxShadow literal', () => {
-    fixture(`export const C = () => <div style={{ boxShadow: '0 1px 3px rgba(0,0,0,.2)' }} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-surface')
-  })
-
-  it('does NOT flag a line carrying a theme-allow comment', () => {
-    fixture(
-      `export const C = () => <div style={{ borderRadius: 8 }} /> // theme-allow raw-surface — legacy widget\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-surface')
-  })
-
-  it('does NOT flag a var(--…) radius token', () => {
-    fixture(`export const C = () => <div style={{ borderRadius: 'var(--vx-radius-card)' }} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-surface')
-  })
-
-  it('does NOT flag a var(--…) border token (regression: var() not adjacent to the quote)', () => {
-    // Use a Mantine component (not a raw <div>) so this isolates raw-surface's var() lookahead
-    // without also tripping the raw-html-layout guard (border is a layout/surface prop).
-    fixture(
-      `export const C = () => <Box style={{ border: '1px solid var(--vx-surface-border)' }} />\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-surface')
-  })
-
-  it('does NOT flag a var(--…) boxShadow token (regression)', () => {
-    fixture(`export const C = () => <div style={{ boxShadow: 'var(--vx-shadow-card)' }} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-surface')
-    expect(err).not.toContain('surface-shadow-override')
-  })
-
-  it('does NOT flag a Mantine radius="md" prop (not inline surface styling)', () => {
-    fixture(`export const C = () => <Card radius="md" />\n`)
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-surface')
-  })
-
-  it('does NOT flag an unrelated inline style (display: flex)', () => {
-    // A Mantine component with an inline flex/padding is not raw-surface. (display/spacing on a raw
-    // <div> is covered by the dedicated inline-display / raw-html-layout / inline-spacing checks.)
-    fixture(`export const C = () => <Box style={{ display: 'flex', padding: 8 }} />\n`, {
-      roots: ['src'],
-      inlineDisplay: false,
-      inlineSpacing: false,
-    })
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-surface')
-  })
-
-  it('respects the rawSurface:false config knob', () => {
-    fixture(`export const C = () => <div style={{ borderRadius: 8 }} />\n`, {
-      roots: ['src'],
-      rawSurface: false,
-    })
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-surface')
-  })
-})
-
-describe('check-theme card-with-border', () => {
-  it('fails the build on withBorder on a Card', () => {
-    fixture(`export const C = () => <Card padding="md" withBorder />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('card-with-border')
-  })
-
-  it('does NOT flag a Card that takes its depth from the theme', () => {
-    fixture(`export const C = () => <Card padding="md" />\n`)
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('card-with-border')
-  })
-
-  it('respects the cardWithBorder:false config knob', () => {
-    fixture(`export const C = () => <Card withBorder />\n`, {
-      roots: ['src'],
-      cardWithBorder: false,
-    })
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('card-with-border')
-  })
-})
-
-describe('check-theme off-system-surface-var', () => {
-  it('flags a raw Mantine gray ramp step used for surface color', () => {
-    fixture(
-      `export const C = () => <Box style={{ borderColor: 'var(--mantine-color-gray-3)' }} />\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('off-system-surface-var')
-  })
-
-  it('flags a raw Mantine dark ramp step', () => {
-    fixture(`export const C = () => <Box bg="var(--mantine-color-dark-6)" />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('off-system-surface-var')
-  })
-
-  it('does NOT flag a --vx-surface-* token', () => {
-    fixture(`export const C = () => <Box bg="var(--vx-surface-panel)" />\n`)
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('off-system-surface-var')
-  })
-
-  it('does NOT flag a named Mantine surface var (default-border)', () => {
-    fixture(`export const C = () => <Box bg="var(--mantine-color-default-border)" />\n`)
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('off-system-surface-var')
-  })
-
-  it('respects the offSystemSurfaceVar:false config knob', () => {
-    fixture(`export const C = () => <Box bg="var(--mantine-color-gray-3)" />\n`, {
-      roots: ['src'],
-      offSystemSurfaceVar: false,
-    })
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('off-system-surface-var')
-  })
-
-  it('does NOT flag a line carrying a theme-allow comment', () => {
-    fixture(
-      `export const C = () => <Box bg="var(--mantine-color-gray-3)" /> // theme-allow off-system-surface-var — legacy\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('off-system-surface-var')
-  })
-})
-
-describe('check-theme raw-html-layout', () => {
-  it('flags a raw <div> with inline layout styling', () => {
-    fixture(`export const C = () => <div style={{ display: 'flex', gap: 8 }} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-html-layout')
-  })
-
-  it('flags a raw <section> with inline padding', () => {
-    fixture(`export const C = () => <section style={{ padding: 16 }}>x</section>\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-html-layout')
-  })
-
-  it('does NOT flag a bare <div ref={...}> with no style', () => {
-    fixture(`export const C = (r) => <div ref={r} className="x" />\n`)
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-html-layout')
-  })
-
-  it('does NOT flag an <img> (not a layout element)', () => {
-    fixture(`export const C = () => <img style={{ width: 40, height: 40 }} src="a.png" />\n`)
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-html-layout')
-  })
-
-  it('respects the rawHtmlLayout:false config knob', () => {
-    fixture(`export const C = () => <div style={{ display: 'flex' }} />\n`, {
-      roots: ['src'],
-      rawHtmlLayout: false,
-      // disable the overlapping checks so we isolate raw-html-layout
-      inlineDisplay: false,
-    })
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-html-layout')
-  })
-
-  it('does NOT flag a line carrying a theme-allow comment', () => {
-    fixture(
-      `export const C = () => <div style={{ display: 'flex' }} /> // theme-allow raw-html-layout inline-display — legacy\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-html-layout')
-  })
-})
-
-describe('check-theme inline-spacing', () => {
-  it('flags an inline padding literal', () => {
-    fixture(`export const C = () => <Box style={{ padding: 16 }} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('inline-spacing')
-  })
-
-  it('flags an inline marginTop string literal', () => {
-    fixture(`export const C = () => <Box style={{ marginTop: '12px' }} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('inline-spacing')
-  })
-
-  it('does NOT flag a zero value', () => {
-    fixture(`export const C = () => <Box style={{ padding: 0, color: 'red' }} />\n`)
-    const { err } = run()
-    expect(err).not.toContain('inline-spacing')
-  })
-
-  it('does NOT flag a var(--…) gap token', () => {
-    fixture(`export const C = () => <Box style={{ gap: 'var(--mantine-spacing-md)' }} />\n`)
-    const { err } = run()
-    expect(err).not.toContain('inline-spacing')
-  })
-
-  it('respects the inlineSpacing:false config knob', () => {
-    fixture(`export const C = () => <Box style={{ padding: 16 }} />\n`, {
-      roots: ['src'],
-      inlineSpacing: false,
-    })
-    const { err } = run()
-    expect(err).not.toContain('inline-spacing')
-  })
-
-  it('does NOT flag a line carrying a theme-allow comment', () => {
-    fixture(`export const C = () => <Box style={{ padding: 16 }} /> // theme-allow\n`)
-    const { err } = run()
-    expect(err).not.toContain('inline-spacing')
-  })
-})
-
-describe('check-theme inline-display', () => {
-  it('flags an inline display:flex', () => {
-    fixture(`export const C = () => <Box style={{ display: 'flex' }} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('inline-display')
-  })
-
-  it('flags an inline display:grid', () => {
-    fixture(`export const C = () => <Box style={{ display: "grid" }} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('inline-display')
-  })
-
-  it('does NOT flag display:block', () => {
-    fixture(`export const C = () => <Box style={{ display: 'block' }} />\n`)
-    const { err } = run()
-    expect(err).not.toContain('inline-display')
-  })
-
-  it('respects the inlineDisplay:false config knob', () => {
-    fixture(`export const C = () => <Box style={{ display: 'flex' }} />\n`, {
-      roots: ['src'],
-      inlineDisplay: false,
-    })
-    const { err } = run()
-    expect(err).not.toContain('inline-display')
-  })
-
-  it('does NOT flag a line carrying a theme-allow comment', () => {
-    fixture(`export const C = () => <Box style={{ display: 'flex' }} /> // theme-allow\n`)
-    const { err } = run()
-    expect(err).not.toContain('inline-display')
-  })
-})
-
-describe('check-theme raw-visx-axis', () => {
-  it('flags a raw <AxisLeft> in a chart file', () => {
-    fixtureAt(
-      'charts/kinds/Foo.tsx',
-      `export const Foo = () => <AxisLeft scale={s} numTicks={4} />\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-visx-axis')
-  })
-
-  it('flags a raw <AxisBottom> and <AxisRight> in a chart file', () => {
-    fixtureAt(
-      'charts/kinds/Foo.tsx',
-      `export const Foo = () => (\n  <>\n    <AxisBottom scale={x} />\n    <AxisRight scale={y} />\n  </>\n)\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-visx-axis')
-  })
-
-  it('does NOT flag a chart-path <AxisLeft> carrying a theme-allow comment', () => {
-    fixtureAt(
-      'charts/kinds/Foo.tsx',
-      `export const Foo = () => <AxisLeft scale={s} /> // theme-allow raw-visx-axis — bespoke dual-panel\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-visx-axis')
-  })
-
-  it('does NOT flag a raw <AxisLeft> in a NON-chart path', () => {
-    fixtureAt('widgets/Foo.tsx', `export const Foo = () => <AxisLeft scale={s} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-visx-axis')
-  })
-
-  it('does NOT flag AxisLeftNumeric usage in a chart file', () => {
-    fixtureAt(
-      'charts/kinds/Foo.tsx',
-      `export const Foo = () => <AxisLeftNumeric scale={s} numTicks={4} />\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-visx-axis')
-  })
-
-  it('does NOT flag raw <AxisLeft> in the Axes.tsx wrapper primitive', () => {
-    fixtureAt(
-      'charts/primitives/Axes.tsx',
-      `export const AxisLeftNumeric = (p) => <AxisLeft {...p} />\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-visx-axis')
-  })
-
-  it('respects the rawVisxAxis:false config knob', () => {
-    fixtureAt('charts/kinds/Foo.tsx', `export const Foo = () => <AxisLeft scale={s} />\n`, {
-      roots: ['src'],
-      rawVisxAxis: false,
-    })
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-visx-axis')
-  })
-})
-
-describe('check-theme unframed-chart', () => {
-  it('flags a hand-rolled <ChartLegend items={[...]}> array literal', () => {
-    fixtureAt(
-      'charts/kinds/Foo.tsx',
-      `export const Foo = () => <ChartLegend items={[{ key: 'a', label: 'A', color: '#fff' }]} />\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('unframed-chart')
-  })
-
-  it('flags a hand-rolled legend array literal formatted across multiple lines', () => {
-    fixtureAt(
-      'charts/kinds/Foo.tsx',
-      [
-        'export const Foo = () => (',
-        '  <ChartLegend',
-        "    items={[{ key: 'a', label: 'A', color: VX.line }]}",
-        '    placement="bottom"',
-        '  />',
-        ')',
-        '',
-      ].join('\n'),
-    )
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('unframed-chart')
-  })
-
-  it('does NOT flag a derived legend (items={deriveLegend(series)})', () => {
-    fixtureAt(
-      'charts/primitives/ChartFrame.tsx',
-      [
-        'export const Foo = () => (',
-        '  <ChartLegend',
-        '    items={deriveLegend(series)}',
-        '    placement={placement}',
-        '  />',
-        ')',
-        '',
-      ].join('\n'),
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('unframed-chart')
-  })
-
-  it('does NOT flag an unrelated items={[...]} prop on a non-ChartLegend component', () => {
-    fixtureAt('widgets/Menu.tsx', `export const Foo = () => <Menu items={[{ label: 'a' }]} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('unframed-chart')
-  })
-
-  it('respects the unframedChart:false config knob', () => {
-    fixtureAt(
-      'charts/kinds/Foo.tsx',
-      `export const Foo = () => <ChartLegend items={[{ key: 'a', label: 'A' }]} />\n`,
-      { roots: ['src'], unframedChart: false },
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('unframed-chart')
-  })
-
-  it('does NOT flag a line carrying a theme-allow comment', () => {
-    fixtureAt(
-      'charts/kinds/Foo.tsx',
-      `export const Foo = () => <ChartLegend items={[{ key: 'a', label: 'A' }]} /> // theme-allow unframed-chart — bespoke legend\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('unframed-chart')
-  })
-})
-
-describe('check-theme raw-form-control', () => {
-  it('fails the build on a raw <input>', () => {
-    fixture(`export const C = () => <input type="text" value={v} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-form-control')
-  })
-
-  it('fails the build on a raw <select>', () => {
-    fixture(`export const C = () => <select value={v}><option>A</option></select>\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-form-control')
-  })
-
-  it('fails the build on a raw <textarea>', () => {
-    fixture(`export const C = () => <textarea value={v} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-form-control')
-  })
-
-  it('does NOT flag a Mantine TextInput', () => {
-    fixture(`export const C = () => <TextInput value={v} onChange={onChange} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-form-control')
-  })
-
-  it('respects the rawFormControl:false config knob', () => {
-    fixture(`export const C = () => <input type="text" />\n`, {
-      roots: ['src'],
-      rawFormControl: false,
-    })
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-form-control')
-  })
-
-  it('does NOT flag a line carrying a theme-allow comment', () => {
-    fixture(
-      `export const C = () => <input type="text" /> // theme-allow raw-form-control — legacy widget\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-form-control')
-  })
-})
-
-describe('check-theme sub-16-input-font', () => {
-  it('fails the build on a sub-16 inline fontSize on a raw <input>', () => {
-    fixture(`export const C = () => <input style={{ fontSize: 13, border: 'none' }} />\n`, {
-      roots: ['src'],
-      rawFormControl: false,
-    })
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('sub-16-input-font')
-  })
-
-  it('fails the build on a Mantine styles={{ input: { fontSize } }} override', () => {
-    fixture(`export const C = () => <TextInput styles={{ input: { fontSize: 12 } }} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('sub-16-input-font')
-  })
-
-  it('does NOT flag sub-16-input-font on a <Text> (not a form control)', () => {
-    // The literal itself is still a raw font-size, so `inline-font-size` (an independent kind,
-    // no `sub16InputFont` gate) reports it — only `sub-16-input-font`'s form-control scoping is
-    // under test here.
-    fixture(`export const C = () => <Text style={{ fontSize: 12 }}>caption</Text>\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).not.toContain('sub-16-input-font')
-    expect(err).toContain('inline-font-size')
-  })
-
-  it('does NOT flag sub-16-input-font on a <span> (not a form control)', () => {
-    // Same as the <Text> case above: `inline-font-size` fires independently of the form-control
-    // scoping this test verifies for `sub-16-input-font`.
-    fixture(`export const C = () => <span style={{ fontSize: 11 }}>micro</span>\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).not.toContain('sub-16-input-font')
-    expect(err).toContain('inline-font-size')
-  })
-
-  it('respects the sub16InputFont:false config knob', () => {
-    // `inline-font-size` has no config knob and fires on any raw literal regardless — only
-    // `sub-16-input-font` itself is under test here.
-    fixture(`export const C = () => <input style={{ fontSize: 12 }} />\n`, {
-      roots: ['src'],
-      rawFormControl: false,
-      sub16InputFont: false,
-    })
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).not.toContain('sub-16-input-font')
-    expect(err).toContain('inline-font-size')
-  })
-
-  it('does NOT flag a line carrying a theme-allow comment', () => {
-    // Names both kinds the literal can trip: sub-16-input-font (scoped by rawFormControl above)
-    // and inline-font-size (ungated, fires on the literal regardless of element).
-    fixture(
-      `export const C = () => <input style={{ fontSize: 12 }} /> // theme-allow sub-16-input-font inline-font-size — legacy widget\n`,
-      { roots: ['src'], rawFormControl: false },
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('sub-16-input-font')
-  })
-})
-
-describe('check-theme roots fail-loud', () => {
-  it('exits non-zero when the built-in default roots match zero files', () => {
-    // No "basalt.roots" in package.json — falls back to the built-in default (`src`), which
-    // doesn't exist under this fixture at all (the fixture dir has no src/ of its own here).
-    writeFileSync(resolve(dir, 'package.json'), JSON.stringify({ name: 'fixture' }))
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('basalt.roots')
-  })
-
-  it('exits non-zero when explicitly configured roots match zero files', () => {
-    writeFileSync(
-      resolve(dir, 'package.json'),
-      JSON.stringify({ name: 'fixture', basalt: { roots: ['nonexistent-dir'] } }),
-    )
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('nonexistent-dir')
-  })
-
-  it('stays green when the configured roots match at least one file', () => {
-    fixture(`export const C = () => <Box p="md" />\n`)
-    const { code } = run()
-    expect(code).toBe(0)
-  })
-
-  it('scans a plain src/ layout by default with no "basalt.roots" configured', () => {
-    // The built-in default root is `src` (a generic single-app layout), not an argo-shaped path
-    // like `apps/dashboard/src` — a bare consumer with a normal src/ tree scans out of the box.
-    writeFileSync(resolve(dir, 'package.json'), JSON.stringify({ name: 'fixture' }))
-    mkdirSync(resolve(dir, 'src'), { recursive: true })
-    writeFileSync(resolve(dir, 'src', 'Card.tsx'), `export const C = () => <Box p="md" />\n`)
-    const { code } = run()
-    expect(code).toBe(0)
-  })
-})
-
-describe('check-theme scans .css', () => {
-  it('flags a raw hex in a CSS module the walker collects', () => {
-    fixtureAt('theme/controls.module.css', '.input {\n  color: #ff0000;\n}\n')
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-hex')
-    expect(err).toContain('controls.module.css')
-  })
-
-  it('does NOT false-positive a JSX-shaped rule on genuine CSS', () => {
-    // `border-radius: 8px` is a genuine, unrelated `css-raw-surface` violation (a raw literal
-    // with no `--vx-radius-*` token) — the point of this test is that the JSX-shaped rules
-    // (`inline-display`, `raw-html-layout`) do not also fire on plain CSS syntax.
-    fixtureAt(
-      'theme/controls.module.css',
-      '.foo {\n  display: flex;\n  border-radius: var(--vx-radius-card);\n}\n',
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('inline-display')
-    expect(err).not.toContain('raw-html-layout')
-    expect(err).not.toContain('css-raw-surface')
-  })
-})
-
-// Round 9, rollhook: `SCANNABLE_EXT` stopped at `tsx?|css|html?|webmanifest`, so the marketing
-// site's two `.astro` templates — its ENTIRE markup layer — were never opened, and check-theme
-// reported a clean 4-file scan. `.jsx` and `.vue` were missing from the same regex, so a plain-JS
-// or Vue consumer was unguarded end to end.
-describe('check-theme scans the component extensions it was skipping', () => {
-  it('flags a raw hex in an .astro template', () => {
-    fixtureAt('pages/index.astro', '<style>\n  .hero { color: #ff0000; }\n</style>\n')
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-hex')
-    expect(err).toContain('index.astro')
-  })
-
-  it('flags a raw hex in a .vue single-file component', () => {
-    fixtureAt('components/Hero.vue', '<style>\n  .hero { color: #ff0000; }\n</style>\n')
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('Hero.vue')
-  })
-
-  it('flags a raw inline border in a .jsx component', () => {
-    fixtureAt('Card.jsx', `export const C = () => <div style={{ border: '1px solid #ccc' }} />\n`)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-surface')
-    expect(err).toContain('Card.jsx')
-  })
-
-  it('stays quiet on a clean .astro file — the extension is scanned, not condemned', () => {
-    fixtureAt('pages/index.astro', '<style>\n  .hero { color: var(--vx-ink); }\n</style>\n')
-    expect(run().code).toBe(0)
-  })
-})
-
-describe('check-theme comment skipping', () => {
-  it('does NOT flag a banned element mentioned in a pure line comment', () => {
-    fixtureAt(
-      'charts/kinds/Foo.tsx',
-      `// never render a raw <AxisLeft> — use AxisLeftNumeric\nexport const Foo = () => <AxisLeftNumeric scale={s} />\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('raw-visx-axis')
-  })
-
-  it('does NOT flag a banned token mentioned in a JSDoc body line', () => {
-    fixture(
-      `/**\n * Avoid var(--mantine-color-gray-3); use the surface token.\n */\nexport const C = 1\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).not.toContain('off-system-surface-var')
-  })
-
-  it('still flags the real violation on a code line even when a comment mentions it too', () => {
-    fixtureAt(
-      'charts/kinds/Foo.tsx',
-      `// raw <AxisLeft> is banned\nexport const Foo = () => <AxisLeft scale={s} />\n`,
-    )
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('raw-visx-axis')
-  })
-})
-
-describe('severity — warnings report, errors fail', () => {
-  const RAW_HEX = `export const C = () => <div style={{ color: '#ff0000' }} />`
-
-  it('exits 1 on an error kind (the default)', () => {
-    fixture(RAW_HEX)
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('✖ Theme guard')
-    expect(err).toContain('raw-hex')
-  })
-
-  it('exits 0 when the only findings are warnings, and still prints them', () => {
-    // The whole point of the grace minor: the consumer takes the upgrade on a green build and
-    // schedules the fix, rather than the release scheduling it for them. This case is the OTHER
-    // origin of a warning — a consumer override — so the heading must not promise promotion.
-    fixture(RAW_HEX, { roots: ['src'], severity: { 'raw-hex': 'warn' } })
-    const { code, err } = run()
-    expect(code).toBe(0)
-    expect(err).toContain('⚠ Theme guard')
-    expect(err).toContain('reported, not fatal')
-    expect(err).toContain('raw-hex')
-    expect(err).not.toContain('✖ Theme guard')
-  })
-
-  it('still fails when errors accompany warnings, and reports both blocks', () => {
-    fixture(`export const C = () => <div style={{ color: '#ff0000' }} p={18} />`, {
-      roots: ['src'],
-      spacingSteps: [18],
-      severity: { 'raw-hex': 'warn' },
-    })
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('⚠ Theme guard')
-    expect(err).toContain('✖ Theme guard')
-    // Warnings first — "what will break later" is the less urgent read.
-    expect(err.indexOf('⚠ Theme guard')).toBeLessThan(err.indexOf('✖ Theme guard'))
-  })
-
-  it('ignores an unrecognized severity value instead of silently unguarding the kind', () => {
-    // The one config typo that would REMOVE enforcement: 'warning' matches neither bucket, so the
-    // finding would vanish and the command would exit 0 on a tree that is not clean.
-    fixture(RAW_HEX, { roots: ['src'], severity: { 'raw-hex': 'warning' } })
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain("not 'warn' or 'error'")
-    expect(err).toContain('✖ Theme guard')
-    expect(err).toContain('raw-hex')
-  })
-
-  it('ignores a severity block that is not an object', () => {
-    fixture(RAW_HEX, { roots: ['src'], severity: 'warn' })
-    const { code, err } = run()
-    expect(code).toBe(1)
-    expect(err).toContain('basalt.severity is not an object')
-    expect(err).toContain('✖ Theme guard')
-  })
-})
-
-// ── the manifest waiver hint, gated on the profile ────────────────────────────────────────────
-//
-// rollhook. The hint leads with `basaltAppPlugin`, which is right for a Mantine app — a hex in a
-// manifest can never be right, and the plugin removes the hand-copy entirely. A `tokens-only`
-// consumer has definitionally opted out of that layer: rollhook's Astro site has no index.html to
-// transform, imports no basalt JavaScript at all, and owns maskable icons the plugin does not emit.
-// Leading with it there is advice the consumer cannot take.
-
-describe('check-theme — the manifest waiver hint follows the profile', () => {
-  function manifestFixture(basalt: Record<string, unknown>): void {
-    writeFileSync(resolve(dir, 'package.json'), JSON.stringify({ name: 'fixture', basalt }))
-    mkdirSync(resolve(dir, 'src'), { recursive: true })
-    writeFileSync(resolve(dir, 'src', 'app.tsx'), 'export const App = () => null\n')
-    mkdirSync(resolve(dir, 'public'), { recursive: true })
-    writeFileSync(
-      resolve(dir, 'public', 'site.webmanifest'),
-      JSON.stringify({ name: 'x', theme_color: '#18181b' }, null, 2),
-    )
-  }
-
-  it('offers basaltAppPlugin first to a framework consumer', () => {
-    manifestFixture({ roots: ['src'] })
-    const { err } = run()
-    expect(err).toContain('let basaltAppPlugin emit it')
-  })
-
-  it('leads with the member for a tokens-only consumer, and says which remedy it withheld', () => {
-    manifestFixture({ roots: ['src'], profile: 'tokens-only' })
-    const { err } = run()
-    expect(err).toContain('JSON has no comments — declare a deliberate exception')
-    expect(err).not.toContain('let basaltAppPlugin emit it')
-    expect(err).toContain('a tokens-only consumer has opted out of')
-  })
-})