Spec ID Stamp

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

export const meta: CompendiumMeta = {
  id: 281,
  slug: 'spec-id-stamp',
  name: 'Spec ID Stamp',
  category: 'specs-documents',
  subcategory: 'atoms',
  pillar: 'do',
  description: 'The atomic identifier chip — SPEC-NNN locked next to a semver pin, the way every spec announces itself.',
  spec: `## Intent
Render the canonical "SPEC-NNN vX.Y.Z" pairing as a single typographic unit. Identifier first, version second, divider between — so an AI agent reading the page can lock onto provenance in one fixation.

## Acceptance Criteria
- [ ] Renders SPEC-NNN in mono, bold, uppercase
- [ ] Renders semver pin with reduced weight
- [ ] Includes a hard divider rule between id and version
- [ ] Negative: does NOT include author, status or any other metadata

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

const id = 'SPEC-014';
const version = 'v1.3.0';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 flex items-center justify-center overflow-hidden">
  <div class="inline-flex items-stretch border-4 border-black">
    <div class="px-3 py-2 bg-do text-black font-mono text-[13px] font-black uppercase tracking-widest">{id}</div>
    <div class="px-3 py-2 bg-paper text-black font-mono text-[11px] uppercase tracking-widest border-s-4 border-black flex items-center">{version}</div>
  </div>
</div>