Version Pin

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

export const meta: CompendiumMeta = {
  id: 8,
  slug: 'version-pin',
  name: 'Version Pin',
  category: 'specs-documents',
  subcategory: 'lifecycle',
  pillar: 'do',
  description: 'A semver version pin with lifecycle status — DRAFT, REVIEW, APPROVED, or RETIRED — like a passport stamp.',
  spec: `## Intent
Display the version + lifecycle status of a spec as a compact pin. Status drives colour: DRAFT (paper), REVIEW (do/yellow), APPROVED (success/green), RETIRED (attention/pink). Semver is rendered in mono large enough to read at a glance.

## Acceptance Criteria
- [ ] Shows MAJOR.MINOR.PATCH in big mono
- [ ] Shows status text bottom strip
- [ ] Border/colour communicates status
- [ ] Shows previous version (small, muted)
- [ ] Does not require runtime computation

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

const status = 'APPROVED';
const statusColor =
  status === 'APPROVED' ? 'bg-success text-black' :
  status === 'REVIEW'   ? 'bg-do text-black' :
  status === 'RETIRED'  ? 'bg-attention text-white' :
                          'bg-paper text-black';
---

<div class="w-full flex justify-center py-2">
  <div class="bg-paper text-black border-4 border-black shadow-nb-sm w-[80%] max-w-[220px]">
    <header class="px-3 py-1.5 border-b-2 border-black flex items-baseline justify-between">
      <span class="font-mono text-[9px] uppercase tracking-widest opacity-60">SPEC-014</span>
      <span class="font-mono text-[9px] uppercase tracking-widest opacity-50 line-through">v1.2.0</span>
    </header>

    <div class="px-3 py-4 flex items-baseline justify-center gap-1">
      <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">v</span>
      <span class="font-mono text-4xl font-black leading-none tabular-nums">1.3.0</span>
    </div>

    <div class:list={['px-3 py-1.5 border-t-2 border-black font-mono text-[10px] uppercase tracking-widest font-black text-center', statusColor]}>{status}</div>
  </div>
</div>