@weft-js/cli 0.1.1 → 0.1.2

package/src/deploy/needs.mjs

@@ -6,18 +6,23 @@ import { join, relative } from 'node:path'
 
 const SKIP = new Set(['node_modules', '.weft', '.output', 'dist', '.netlify', '.vercel'])
 /** npm packages with a compiled addon: one built on a Mac doesn't load on a Linux function. */
-const ADDONS = /^(better-sqlite3|sqlite3|sharp|bcrypt|argon2|canvas|@node-rs\/.+|@napi-rs\/canvas|bufferutil|utf-8-validate)$/
+const ADDONS =
+  /^(better-sqlite3|sqlite3|sharp|bcrypt|argon2|canvas|@node-rs\/.+|@napi-rs\/canvas|bufferutil|utf-8-validate)$/
 /** A bus that reaches every instance. The memory bus is what's left when none is named. */
-const BUSES = /\b(postgresBus|redisBus|natsBus|durableObjectBus)\s*\(|@weft-js\/realtime-(redis|nats|durable-object)/
+const BUSES =
+  /\b(postgresBus|redisBus|natsBus|durableObjectBus)\s*\(|@weft-js\/realtime-(redis|nats|durable-object)/
 
-const posix = p => p.replaceAll('\\', '/')
+const posix = (p) => p.replaceAll('\\', '/')
 
 function sources(root) {
   const out = []
-  const walk = dir => {
+  const walk = (dir) => {
     for (const d of readdirSync(dir, { withFileTypes: true })) {
       const f = join(dir, d.name)
-      if (d.isDirectory()) { if (!SKIP.has(d.name)) walk(f) } else if (/\.[cm]?[jt]sx?$/.test(d.name) && !/\.(test|spec)\.|\.d\.ts$/.test(d.name)) out.push(f)
+      if (d.isDirectory()) {
+        if (!SKIP.has(d.name)) walk(f)
+      } else if (/\.[cm]?[jt]sx?$/.test(d.name) && !/\.(test|spec)\.|\.d\.ts$/.test(d.name))
+        out.push(f)
     }
   }
   if (existsSync(join(root, 'src'))) walk(join(root, 'src'))
@@ -29,11 +34,19 @@ function freshContract(root, files) {
   const file = join(root, '.weft', 'contract.json')
   if (!existsSync(file)) return
   const at = statSync(file).mtimeMs
-  if (files.some(f => statSync(f).mtimeMs > at)) return
-  try { return JSON.parse(readFileSync(file, 'utf8')) } catch {}
+  if (files.some((f) => statSync(f).mtimeMs > at)) return
+  try {
+    return JSON.parse(readFileSync(file, 'utf8'))
+  } catch {}
 }
 
-const read = file => { try { return readFileSync(file, 'utf8') } catch { return '' } }
+const read = (file) => {
+  try {
+    return readFileSync(file, 'utf8')
+  } catch {
+    return ''
+  }
+}
 
 /**
  * @param {string} root
@@ -43,19 +56,71 @@ const read = file => { try { return readFileSync(file, 'utf8') } catch { return
  */
 export function needsOf(root, config = {}) {
   const files = sources(root)
-  const rel = f => posix(relative(root, f))
+  const rel = (f) => posix(relative(root, f))
   const needs = { runtime: config.runtime ?? 'node' }
   const contract = freshContract(root, files)
   const realtimeFile = join(root, 'src/realtime.server.ts')
   const realtime = read(realtimeFile)
   let streams = false
   if (contract) {
-    const live = contract.functions?.find(f => f.kind === 'channel' || f.kind === 'shared')
-    if (live) needs.sockets = { file: '.weft/contract.json', what: `\`${live.name}\` is a ${live.kind === 'shared' ? '`sharedState`' : '`channel`'}` }
-    streams = contract.functions?.some(f => ['stream', 'channel', 'shared'].includes(f.kind))
+    const live = contract.functions?.find((f) => f.kind === 'channel' || f.kind === 'shared')
+    if (live)
+      needs.sockets = {
+        file: '.weft/contract.json',
+        what: `\`${live.name}\` is a ${live.kind === 'shared' ? '`sharedState`' : '`channel`'}`,
+      }
+    streams = contract.functions?.some((f) => ['stream', 'channel', 'shared'].includes(f.kind))
     const native = Object.entries(contract.services ?? {}).find(([, s]) => s.kind === 'native')
     if (native) needs.native = { file: '.weft/contract.json', what: `\`native('${native[0]}')\`` }
   }
+  streams = scanNeeds({ files, rel, contract, needs, config, realtime, streams })
+  if (!needs.sockets && /\bshare\s*[:,}]/.test(realtime))
+    needs.sockets = { file: 'src/realtime.server.ts', what: '`realtime({ share })`' }
+  if (/\bchanges\s*[:,}]/.test(realtime) && !/listener:\s*['"]external['"]/.test(realtime))
+    needs.feed = { file: 'src/realtime.server.ts', what: '`changes`' }
+  const plugins = (config.plugins ?? [])
+    .map((p) => p?.name ?? p)
+    .filter((n) => typeof n === 'string')
+  const configText = ['weft.config.ts', 'weft.config.mts', 'weft.config.js', 'weft.config.mjs']
+    .map((n) => read(join(root, n)))
+    .join('\n')
+  if (
+    (streams || needs.sockets) &&
+    !BUSES.test(realtime) &&
+    !plugins.some((n) => /realtime-(redis|nats|durable-object)/.test(n)) &&
+    !BUSES.test(configText)
+  )
+    needs.memoryBus = {
+      file: existsSync(realtimeFile) ? 'src/realtime.server.ts' : 'src',
+      what: 'the memory bus',
+    }
+  if (!needs.uploads && /encoder:\s*['"]server['"]/.test(configText))
+    needs.uploads = { file: 'weft.config.ts', what: "`media({ encoder: 'server' })`" }
+  if (
+    needs.uploads &&
+    !plugins.some((n) => n.includes('plugin-media')) &&
+    !configText.includes('plugin-media')
+  )
+    delete needs.uploads // M017 says that one
+  const db = read(join(root, 'src/db/index.server.ts'))
+  const drizzle = read(join(root, 'drizzle.config.ts'))
+  if (
+    /\/db\/sqlite['"]/.test(db) ||
+    (/dialect:\s*['"](sqlite|turso)['"]/.test(drizzle) && !/libsql:|turso/.test(drizzle + db))
+  )
+    needs.sqlite = {
+      file: db ? 'src/db/index.server.ts' : 'drizzle.config.ts',
+      what: 'a SQLite file',
+    }
+  try {
+    const pkg = JSON.parse(read(join(root, 'package.json')) || '{}')
+    const addon = Object.keys(pkg.dependencies ?? {}).find((n) => ADDONS.test(n))
+    if (addon) needs.addons = { file: 'package.json', what: `\`${addon}\`` }
+  } catch {}
+  return needs
+}
+
+function scanNeeds({ files, rel, contract, needs, config, realtime, streams }) {
   for (const f of files) {
     const text = read(f)
     const server = /^src\/server\/|\.server\.[cm]?[jt]sx?$/.test(rel(f))
@@ -66,27 +131,19 @@ export function needsOf(root, config = {}) {
     }
     if (/\.live\(/.test(text)) streams = true
     if (/['"]@weft-js\/start\/rust['"]/.test(text)) {
-      for (const m of text.matchAll(/\bremote\(\s*['"`]rust:\/\/([\w-]+)/g)) if (!config.rust?.services?.[m[1]]?.external) needs.sidecar ??= { file: rel(f), what: `\`remote('rust://${m[1]}')\`` }
+      for (const m of text.matchAll(/\bremote\(\s*['"`]rust:\/\/([\w-]+)/g))
+        if (!config.rust?.services?.[m[1]]?.external)
+          needs.sidecar ??= { file: rel(f), what: `\`remote('rust://${m[1]}')\`` }
       const n = /\bnative\(\s*['"`]([\w-]+)/.exec(text)
       if (n) needs.native ??= { file: rel(f), what: `\`native('${n[1]}')\`` }
     }
-    if (!/listener:\s*['"]external['"]/.test(realtime) && /\.live\(([^;\n]*?)\brequired:\s*true|\blive:\s*\{[^}]*required:\s*true/.test(text)) needs.required ??= { file: rel(f), what: 'a live query marked `required`' }
-    if (/\bctx\.media\b|\bz\.media\b/.test(text)) needs.uploads ??= { file: rel(f), what: 'media uploads' }
+    if (
+      !/listener:\s*['"]external['"]/.test(realtime) &&
+      /\.live\(([^;\n]*?)\brequired:\s*true|\blive:\s*\{[^}]*required:\s*true/.test(text)
+    )
+      needs.required ??= { file: rel(f), what: 'a live query marked `required`' }
+    if (/\bctx\.media\b|\bz\.media\b/.test(text))
+      needs.uploads ??= { file: rel(f), what: 'media uploads' }
   }
-  if (!needs.sockets && /\bshare\s*[:,}]/.test(realtime)) needs.sockets = { file: 'src/realtime.server.ts', what: '`realtime({ share })`' }
-  if (/\bchanges\s*[:,}]/.test(realtime) && !/listener:\s*['"]external['"]/.test(realtime)) needs.feed = { file: 'src/realtime.server.ts', what: '`changes`' }
-  const plugins = (config.plugins ?? []).map(p => p?.name ?? p).filter(n => typeof n === 'string')
-  const configText = ['weft.config.ts', 'weft.config.mts', 'weft.config.js', 'weft.config.mjs'].map(n => read(join(root, n))).join('\n')
-  if ((streams || needs.sockets) && !BUSES.test(realtime) && !plugins.some(n => /realtime-(redis|nats|durable-object)/.test(n)) && !BUSES.test(configText)) needs.memoryBus = { file: existsSync(realtimeFile) ? 'src/realtime.server.ts' : 'src', what: 'the memory bus' }
-  if (!needs.uploads && /encoder:\s*['"]server['"]/.test(configText)) needs.uploads = { file: 'weft.config.ts', what: "`media({ encoder: 'server' })`" }
-  if (needs.uploads && !plugins.some(n => n.includes('plugin-media')) && !configText.includes('plugin-media')) delete needs.uploads // M017 says that one
-  const db = read(join(root, 'src/db/index.server.ts'))
-  const drizzle = read(join(root, 'drizzle.config.ts'))
-  if (/\/db\/sqlite['"]/.test(db) || (/dialect:\s*['"](sqlite|turso)['"]/.test(drizzle) && !/libsql:|turso/.test(drizzle + db))) needs.sqlite = { file: db ? 'src/db/index.server.ts' : 'drizzle.config.ts', what: 'a SQLite file' }
-  try {
-    const pkg = JSON.parse(read(join(root, 'package.json')) || '{}')
-    const addon = Object.keys(pkg.dependencies ?? {}).find(n => ADDONS.test(n))
-    if (addon) needs.addons = { file: 'package.json', what: `\`${addon}\`` }
-  } catch {}
-  return needs
+  return streams
 }

package/src/design-checks/accessible-names.mjs

@@ -0,0 +1,62 @@
+import { named, hasName, GENERIC, UNNAMED } from './rules.mjs'
+
+export function checkAccessibleNames({ el, report, labelled }) {
+  // -- accessible names --
+  if (['input', 'select', 'textarea'].includes(el.name)) {
+    const type = el.attr('type')?.value
+    const skip = ['hidden', 'submit', 'button', 'reset', 'image'].includes(type)
+    const id = el.attr('id')
+    // A computed id can pair with a label anywhere, a component around the field can render its label, and an
+    // aria-hidden field (a honeypot) has no name to give. `for` counts on a component too: a `<Field for>` passes it on.
+    const unseen =
+      id?.kind === 'expr' ||
+      el.attr('aria-hidden')?.value === 'true' ||
+      el.ancestors.some((a) => /^[A-Z]/.test(a))
+    if (
+      !skip &&
+      !unseen &&
+      !named(el) &&
+      !(id?.value && labelled.has(id.value)) &&
+      !el.ancestors.includes('label')
+    )
+      report(
+        'D030',
+        el.start,
+        el.tagEnd,
+        `<${el.name}> has no label: a screen reader announces only "edit" (WCAG 1.3.1, 4.1.2).${el.attr('placeholder') ? ' A placeholder is not a label.' : ''}`,
+      )
+  }
+  if (
+    ['button', 'a', 'Button', 'Link'].includes(el.name) &&
+    !el.attr('label') &&
+    !named(el) &&
+    !(el.name === 'a' && !el.attr('href')) &&
+    !hasName(el.children)
+  )
+    report(
+      'D031',
+      el.start,
+      el.tagEnd,
+      `<${el.name}> has no name a screen reader can read: only an icon, or nothing (WCAG 4.1.2).`,
+    )
+  const label = el.attr('aria-label') ?? el.attr('aria-labelledby')
+  const role = el.attr('role')
+  if (
+    label &&
+    GENERIC.has(el.name) &&
+    (!role || (role.kind === 'string' && UNNAMED.has(role.value)))
+  )
+    report(
+      'D041',
+      label.start,
+      label.end,
+      `\`${label.name}\` on a <${el.name}>${role ? ` with role "${role.value}"` : ''}: ARIA forbids naming it, so screen readers skip the name (axe aria-prohibited-attr, Lighthouse).`,
+    )
+  if (el.name === 'img' && !el.attr('alt') && !el.attrs.some((a) => a.kind === 'spread'))
+    report(
+      'D032',
+      el.start,
+      el.tagEnd,
+      '<img> has no `alt`: a screen reader reads out the file name (WCAG 1.1.1).',
+    )
+}

package/src/design-checks/contrast.mjs

@@ -0,0 +1,43 @@
+import { styleDecls } from './values.mjs'
+import { literalColor, ratio } from './rules.mjs'
+
+export function checkContrast({ el, report }) {
+  // -- contrast of a literal pair --
+  const style = el.attr('style')
+  if (style) {
+    const decls = styleDecls(style)
+    const fg = decls.find((d) => d.prop === 'color')
+    const bg = decls.find((d) => d.prop === 'background' || d.prop === 'background-color')
+    const [a, b] = [fg && literalColor(fg.value), bg && literalColor(bg.value)]
+    if (a && b && ratio(a, b) < 4.5)
+      report(
+        'D011',
+        style.start,
+        style.end,
+        `\`${fg.value}\` on \`${bg.value}\` is ${ratio(a, b).toFixed(2)}:1; body text needs 4.5:1 (WCAG 1.4.3).`,
+      )
+    const none = decls.find(
+      (d) =>
+        (d.prop === 'outline' || d.prop === 'outline-width') && /^(none|0(px)?)$/.test(d.value),
+    )
+    if (none)
+      report(
+        'D036',
+        none.start,
+        none.end,
+        'This removes the focus ring with nothing in its place: keyboard users lose their place (WCAG 2.4.7).',
+      )
+  }
+  const cls = el.attr('class') ?? el.attr('className')
+  if (
+    cls?.kind === 'string' &&
+    /(^|\s)(focus:)?outline-none(\s|$)/.test(cls.value) &&
+    !/focus(-visible)?:(ring|outline(?!-none))/.test(cls.value)
+  )
+    report(
+      'D036',
+      cls.start,
+      cls.end,
+      '`outline-none` with no `focus-visible:` style in its place: keyboard users lose their place (WCAG 2.4.7).',
+    )
+}

package/src/design-checks/csp.mjs

@@ -0,0 +1,60 @@
+import { existsSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { HOST_HEADERS, cspDirectives, inlineAllowed, scriptsRun } from './rules.mjs'
+
+export function checkCsp(root, files, reporter) {
+  // -- a CSP against the inlined sheets --
+  const config = ['ts', 'mts', 'js', 'mjs', 'json', 'yaml', 'yml']
+    .map((x) => join(root, `weft.config.${x}`))
+    .find(existsSync)
+  const configText = config ? readFileSync(config, 'utf8') : ''
+  if (!/inlineCss['"]?\s*:\s*false/.test(configText)) {
+    const hosting = HOST_HEADERS.filter(
+      (rel) => existsSync(join(root, rel)) && !files.some((f) => f.rel === rel),
+    ).map((rel) => ({ rel, text: readFileSync(join(root, rel), 'utf8') }))
+    for (const f of [
+      ...files,
+      ...hosting,
+      ...(config
+        ? [
+            {
+              rel: config
+                .slice(root.length + 1)
+                .split('\\')
+                .join('/'),
+              text: configText,
+            },
+          ]
+        : []),
+    ]) {
+      const m = /content-security-policy(?!-report-only)/i.exec(f.text)
+      if (!m) continue
+      const policy = cspDirectives(f.text)
+      const report = reporter(f)
+      if (!inlineAllowed(policy, 'style-src-elem', 'style-src', 'default-src'))
+        report(
+          'D012',
+          m.index,
+          m.index + m[0].length,
+          "This Content-Security-Policy blocks inline styles, and a build inlines the first paint's CSS: the page shows unstyled until its sheets load.",
+          { description: 'Set site: { inlineCss: false }', safe: false, text: m[0] },
+        )
+      else if (!scriptsRun(policy))
+        report(
+          'D012',
+          m.index,
+          m.index + m[0].length,
+          "This Content-Security-Policy refuses inline scripts and the client entry, so a page's deferred sheets never switch on: hover, focus and every rule its first paint left out stay missing.",
+          { description: 'Set site: { inlineCss: false }', safe: false, text: m[0] },
+        )
+      else if (!inlineAllowed(policy, 'script-src-elem', 'script-src', 'default-src'))
+        report.warning(
+          'D012',
+          m.index,
+          m.index + m[0].length,
+          "This Content-Security-Policy refuses inline scripts, so a page's deferred sheets switch on only once the client entry has run: rules its first paint left out wait for it.",
+          { description: 'Set site: { inlineCss: false }', safe: false, text: m[0] },
+        )
+    }
+  }
+}

package/src/design-checks/files.mjs

@@ -0,0 +1,59 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { discover } from '../files.mjs'
+import { declaration } from './values.mjs'
+
+export function checkFiles(root, exclude, tokens, reporter) {
+  // -- CSS files --
+  for (const rel of discover(root, { include: ['**/*.css'], exclude })) {
+    const text = readFileSync(join(root, rel), 'utf8')
+    const css = text.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' '))
+    const file = { rel, text }
+    const report = reporter(file)
+    for (const m of css.matchAll(/(?<=[{;\s])(-?-?[\w-]+)\s*:\s*([^;{}]+)/g)) {
+      const prop = m[1].toLowerCase()
+      if (prop.startsWith('--')) continue
+      const start = m.index + m[0].indexOf(m[2], m[1].length + 1)
+      // Restyling warp's parts and the app's theme file are the supported ways past tokens: worth a look, not a stop.
+      const opening = css.lastIndexOf('{', m.index)
+      const selector = css.slice(
+        Math.max(css.lastIndexOf('}', opening), css.lastIndexOf(';', opening)) + 1,
+        opening,
+      )
+      const theming = rel === 'src/theme.css' || /\[data-(?:scope|part)\b/.test(selector)
+      if (tokens)
+        declaration(
+          { prop, value: m[2].trim(), start, end: start + m[2].trimEnd().length },
+          theming ? report.warning : report,
+        )
+      if ((prop === 'outline' || prop === 'outline-width') && /^(none|0(px)?)\s*$/.test(m[2])) {
+        const rule = css.lastIndexOf('}', m.index)
+        const focused = css.slice(rule + 1, css.indexOf('{', rule + 1))
+        if (
+          /:focus(?!-within)/.test(focused) &&
+          !/box-shadow|border/.test(css.slice(m.index, css.indexOf('}', m.index)))
+        )
+          report(
+            'D036',
+            start,
+            start + m[2].trimEnd().length,
+            `\`${focused.trim()}\` removes the focus ring with nothing in its place: keyboard users lose their place (WCAG 2.4.7).`,
+          )
+      }
+    }
+  }
+
+  // -- the page --
+  for (const rel of discover(root, { include: ['**/*.html'], exclude })) {
+    const text = readFileSync(join(root, rel), 'utf8')
+    const m = /<html\b[^>]*>/i.exec(text)
+    if (m && !/\blang\s*=/.test(m[0]))
+      reporter({ rel, text })(
+        'D039',
+        m.index,
+        m.index + m[0].length,
+        '<html> has no `lang`: a screen reader guesses the language to speak (WCAG 3.1.1).',
+        { description: 'Set lang="en"', safe: false, text: `${m[0].slice(0, -1)} lang="en">` },
+      )
+  }
+}

package/src/design-checks/heading-links.mjs

@@ -0,0 +1,61 @@
+import { WARP } from './values.mjs'
+import { positions } from '../diag.mjs'
+import { allowed, addImport, headingSite } from './rules.mjs'
+
+export function checkHeadingLinks({ el, f, report, warpName, looks, localComponents, scan }) {
+  const bare = /^h[1-6]$/.test(el.name)
+  if (bare || (el.name === 'Heading' && warpName('Heading'))) {
+    const site = headingSite(el, bare)
+    if (site && !allowed(f.text).has(`D006:${positions(f.text).lineCol(el.start)[0]}`))
+      looks.set(site.level, [
+        ...(looks.get(site.level) ?? []),
+        { ...site, el, text: f.text, report },
+      ])
+  }
+  if (
+    el.attr('data-weft')?.value === 'styled' &&
+    (/^(?:main|h1|article)$/.test(el.name) ||
+      el.attr('role')?.value === 'main' ||
+      el.attr('data-vt')?.value === 'main')
+  ) {
+    report(
+      'D040',
+      el.start,
+      el.tagEnd,
+      `The style gate on <${el.name}>: this is the page's main content, and the first paint would leave it hidden until the stylesheet lands.`,
+      'Mark a secondary part, or remove `data-weft="styled"`',
+    )
+  }
+  if (
+    el.name === 'a' &&
+    el.attr('href') &&
+    !el.attr('class') &&
+    !el.attr('className') &&
+    !el.attr('style') &&
+    !el.attr('data-scope') &&
+    !el.attr('data-part') &&
+    !el.attrs.some((a) => a.kind === 'spread')
+  ) {
+    const taken =
+      localComponents.has('Link') ||
+      scan.imports.some((i) => i.local === 'Link' && i.source !== WARP)
+    const close = f.text.lastIndexOf('</', el.end - 1)
+    report(
+      'D007',
+      el.start,
+      el.tagEnd,
+      "A bare <a> in a warp app: it gets warp's link colour but no underline sweep or touch target, and nav links read as prose. Use <Link>, or `Shell`'s `nav` for navigation.",
+      !taken && f.text.slice(el.start, el.end).includes('</a')
+        ? {
+            description: 'Use <Link>',
+            safe: false,
+            edits: [
+              { start: el.start + 1, end: el.tagEnd, text: 'Link' },
+              { start: close + 2, end: el.end - 1, text: 'Link' },
+              ...addImport(f.text, ['Link']),
+            ].sort((a, b) => b.start - a.start),
+          }
+        : undefined,
+    )
+  }
+}

package/src/design-checks/interaction.mjs

@@ -0,0 +1,65 @@
+import { STATIC, INTERACTIVE } from './rules.mjs'
+
+export function checkInteraction({ el, f, report }) {
+  // -- behaviour on the wrong element --
+  if (
+    STATIC.has(el.name) &&
+    el.attr('onClick') &&
+    !el.attr('role') &&
+    !el.attr('tabindex') &&
+    !el.attr('tabIndex')
+  ) {
+    const swap =
+      (el.name === 'div' || el.name === 'span') &&
+      f.text.slice(el.start, el.end).includes(`</${el.name}`)
+    report(
+      'D033',
+      el.start,
+      el.tagEnd,
+      `onClick on <${el.name}>: no keyboard, no focus, no role, so it only works with a mouse (WCAG 2.1.1).`,
+      swap
+        ? {
+            description: 'Use a real button',
+            safe: false,
+            edits: [
+              { start: el.start + 1, end: el.tagEnd, text: 'button type="button"' },
+              {
+                start: f.text.lastIndexOf('</', el.end - 1) + 2,
+                end: el.end - 1,
+                text: 'button',
+              },
+            ].sort((a, b) => b.start - a.start),
+          }
+        : undefined,
+    )
+  }
+  if (INTERACTIVE.has(el.name) && el.ancestors.some((a) => INTERACTIVE.has(a) && a !== 'label')) {
+    const parent = [...el.ancestors].reverse().find((a) => INTERACTIVE.has(a))
+    report(
+      'D034',
+      el.start,
+      el.tagEnd,
+      `<${el.name}> inside <${parent}>: nested controls don't reach the keyboard and screen readers merge them.`,
+    )
+  }
+  const tabindex = el.attr('tabindex') ?? el.attr('tabIndex')
+  const tab =
+    tabindex?.kind === 'string'
+      ? Number(tabindex.value)
+      : tabindex?.kind === 'expr'
+        ? Number(tabindex.expr)
+        : 0
+  if (tab > 0)
+    report(
+      'D037',
+      tabindex.start,
+      tabindex.end,
+      `\`tabindex="${tab}"\` jumps the page's tab order (WCAG 2.4.3).`,
+      {
+        description: 'Use tabindex 0',
+        safe: true,
+        text: tabindex.kind === 'string' ? '"0"' : '0',
+        at: [tabindex.valueStart, tabindex.valueEnd],
+      },
+    )
+}

package/src/design-checks/jsx.mjs

@@ -0,0 +1,67 @@
+import { scanJsx } from '../jsx-scan.mjs'
+import { WARP } from './values.mjs'
+import { checkLayoutValues } from './layout-values.mjs'
+import { checkHeadingLinks } from './heading-links.mjs'
+import { checkNativeControls } from './native-controls.mjs'
+import { checkContrast } from './contrast.mjs'
+import { checkAccessibleNames } from './accessible-names.mjs'
+import { checkInteraction } from './interaction.mjs'
+import { checkOutline } from './outline.mjs'
+
+export function checkJsx({ files, reporter, tokens, looks }) {
+  for (const f of files) {
+    if (!/\.[jt]sx$/.test(f.rel)) continue
+    let scan
+    try {
+      scan = scanJsx(f.text, f.rel)
+    } catch {
+      continue // syntax errors are W000's
+    }
+    const report = reporter(f)
+    const localComponents = new Set(scan.functions.keys())
+    const warpName = (n) => scan.imports.some((i) => i.source === WARP && i.local === n)
+    const labelled = new Set(
+      scan.elements.map((e) => e.attr('for')?.value ?? e.attr('htmlFor')?.value).filter(Boolean),
+    )
+    const headings = []
+    const solids = new Map()
+
+    for (const el of scan.elements) {
+      if (tokens) {
+        checkLayoutValues({ el, f, report })
+        checkHeadingLinks({ el, f, report, warpName, looks, localComponents, scan })
+        checkNativeControls({ el, f, report, localComponents })
+      }
+      checkContrast({ el, report })
+      checkAccessibleNames({ el, report, labelled })
+      checkInteraction({ el, f, report })
+      checkOutline({ el, warpName, headings, solids, scan })
+    }
+
+    for (let i = 1; i < headings.length; i++) {
+      const { level, el } = headings[i]
+      if (level > headings[i - 1].level + 1)
+        report.warning(
+          'D035',
+          el.start,
+          el.tagEnd,
+          `The outline jumps from h${headings[i - 1].level} to h${level}: screen-reader users navigate by headings (WCAG 1.3.1).`,
+        )
+    }
+    for (const group of solids.values()) {
+      for (const el of group.slice(1))
+        report(
+          'D038',
+          el.start,
+          el.tagEnd,
+          `${group.length} solid Buttons side by side: one primary action per region.`,
+          {
+            description: 'Make this one soft',
+            safe: false,
+            text: ' emphasis="soft"',
+            at: [el.tagEnd, el.tagEnd],
+          },
+        )
+    }
+  }
+}

package/src/design-checks/layout-values.mjs

@@ -0,0 +1,68 @@
+import { addImport } from './rules.mjs'
+import { styleDecls, declaration, utility, layoutOf } from './values.mjs'
+
+export function checkLayoutValues({ el, f, report }) {
+  const style = el.attr('style')
+  if (style) for (const d of styleDecls(style)) declaration(d, report)
+  const cls = el.attr('class') ?? el.attr('className')
+  if (cls?.kind === 'string') {
+    let at = cls.valueStart + 1
+    for (const c of cls.value.split(/(\s+)/)) {
+      const hit = c.trim() && utility(c)
+      if (hit)
+        report(
+          hit[0],
+          at,
+          at + c.length,
+          hit[1],
+          hit[2] ? { description: `Use ${hit[2]}`, safe: true, text: hit[2] } : undefined,
+        )
+      at += c.length
+    }
+  }
+  const layout =
+    /^[a-z]/.test(el.name) &&
+    [
+      'div',
+      'section',
+      'ul',
+      'ol',
+      'nav',
+      'header',
+      'footer',
+      'main',
+      'aside',
+      'article',
+      'form',
+    ].includes(el.name) &&
+    layoutOf(el)
+  if (layout) {
+    const close = f.text.lastIndexOf('</', el.end - 1)
+    const selfClosed = !f.text.slice(el.start, el.end).includes(`</${el.name}`)
+    const as = el.name === 'div' ? '' : ` as="${el.name}"`
+    const gap = layout.gap ? ` gap="${layout.gap}"` : ''
+    const sole = el.attrs.length === 1
+    const fix = layout.exact &&
+      sole &&
+      !selfClosed && {
+        description: `Use <${layout.primitive}>`,
+        safe: false,
+        edits: [
+          {
+            start: el.start + 1,
+            end: el.attrs[0].end,
+            text: `${layout.primitive}${as}${gap}`,
+          },
+          { start: close + 2, end: el.end - 1, text: layout.primitive },
+          ...addImport(f.text, [layout.primitive]),
+        ].sort((a, b) => b.start - a.start),
+      }
+    report(
+      'D004',
+      el.start,
+      el.tagEnd,
+      `Hand-rolled layout on <${el.name}>: <${layout.primitive}> says what this is and keeps the gap on the scale.`,
+      fix || undefined,
+    )
+  }
+}