Spec Lint Result

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 10,
  slug: 'spec-lint-result',
  name: 'Spec Lint Result',
  category: 'specs-documents',
  subcategory: 'analysis-and-lint',
  pillar: 'do',
  description: 'Output of `spec-linter` — a pass/fail bar at the top with structured violations listed below, like a compiler error report.',
  spec: `## Intent
Render the result of running spec-linter against a markdown spec. A FAIL header bar with the violation count, then a list of structural issues with severity, rule id, and short message. Communicates that specs are compiled artefacts, not opinions.

## Acceptance Criteria
- [ ] FAIL / PASS bar with count
- [ ] At least 3 violation rows with rule id (mono) + message
- [ ] Severity glyph per row (ERROR / WARN)
- [ ] Footer with command line
- [ ] Does not show stack traces or internal paths

## Constraints
- Static
- Theme-aware`,
  tags: ['list', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 100, a11y: 'aa', themed: true, animated: false },
};

const violations = [
  { lvl: 'ERR',  rule: 'SL001', msg: 'Missing ## Acceptance Criteria section' },
  { lvl: 'ERR',  rule: 'SL014', msg: 'Vague term: "secure" — replace with measurable property' },
  { lvl: 'WARN', rule: 'SL022', msg: 'No negative criteria (does NOT…) found' },
  { lvl: 'WARN', rule: 'SL031', msg: 'Constraint lacks rationale' },
];
---

<section class="w-full bg-paper text-black border-4 border-black shadow-nb-sm">
  <header class="bg-attention text-white px-3 py-2 border-b-2 border-black flex items-baseline justify-between">
    <span class="font-mono text-[10px] uppercase tracking-widest font-black">SPEC-LINTER · FAIL</span>
    <span class="font-mono text-[10px] uppercase tracking-widest">4 ISSUES</span>
  </header>
  <ul class="divide-y-2 divide-black">
    {violations.map((v) => (
      <li class="flex items-center gap-2 px-3 py-1.5 text-[10px] leading-snug">
        <span class:list={[
          'font-mono font-black uppercase tracking-widest text-[8px] px-1 py-0.5 border-2 border-black shrink-0',
          v.lvl === 'ERR' ? 'bg-attention text-white' : 'bg-do text-black',
        ]}>{v.lvl}</span>
        <span class="font-mono opacity-60 shrink-0">{v.rule}</span>
        <span class="flex-1">{v.msg}</span>
      </li>
    ))}
  </ul>
  <footer class="px-3 py-1.5 bg-ink text-paper border-t-2 border-black font-mono text-[9px] tracking-widest">$ spec-linter specs/SPEC-014.md</footer>
</section>