Lint Finding Row

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

export const meta: CompendiumMeta = {
  id: 321,
  slug: 'lint-finding-row',
  name: 'Lint Finding Row',
  category: 'specs-documents',
  subcategory: 'analysis-and-lint',
  pillar: 'do',
  description: 'Single row from a spec-linter report — severity pip, rule id, location, and message.',
  spec: `## Intent
The atomic unit of a lint report. One finding rendered with severity glyph, machine-readable rule id, file location, and a human-readable message — same shape a CI log streams.

## Acceptance Criteria
- [ ] Severity pip on the leading edge
- [ ] Mono rule id with location pointer
- [ ] Message wraps without overflowing the row
- [ ] Negative: does NOT render a stack trace or internal path

## Constraints
- Pure markup, no JS
- Theme-aware via tokens`,
  tags: ['list', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 92, a11y: 'aa', themed: true, animated: false },
};

const finding = {
  sev: 'BLOCKER' as const,
  rule: 'SL014',
  loc: 'specs/SPEC-038.md:42',
  msg: 'Vague term "secure" — replace with measurable property',
};
const sevToken = finding.sev === 'BLOCKER' ? 'danger' : finding.sev === 'IMPORTANT' ? 'attention' : 'do';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black overflow-hidden">
  <div class="font-mono text-[10px] uppercase tracking-widest opacity-60 px-3 pt-3">// lint finding</div>
  <div class="flex items-start gap-2 px-3 py-3 border-t-2 border-black mt-2">
    <span class={`shrink-0 inline-block w-3 h-3 mt-0.5 border-2 border-black bg-${sevToken}`} aria-label={`severity ${finding.sev}`}></span>
    <span class="shrink-0 font-mono font-black text-[10px] uppercase tracking-widest">{finding.rule}</span>
    <span class="shrink-0 font-mono text-[10px] uppercase tracking-widest opacity-60">{finding.loc}</span>
  </div>
  <p class="px-3 pb-3 text-[12px] leading-snug font-medium">{finding.msg}</p>
</div>