Spec Author Handle

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

export const meta: CompendiumMeta = {
  id: 283,
  slug: 'spec-author-handle',
  name: 'Spec Author Handle',
  category: 'specs-documents',
  subcategory: 'atoms',
  pillar: 'do',
  description: 'Authorship chip — handle and role — naming the human accountable for a spec without slipping into vanity.',
  spec: `## Intent
Every spec has one accountable author. This chip pairs a mono @handle with their role so reviewers know whether they are reading a platform spec or a product spec at a glance.

## Acceptance Criteria
- [ ] Renders @handle in mono, bold
- [ ] Renders role on a secondary line, smaller, opacity-reduced
- [ ] Includes a square avatar block filled with a pillar token
- [ ] Negative: does NOT include real-name fields

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

const handle = '@author';
const role = 'PLATFORM ARCHITECT';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <div class="flex items-center gap-3">
    <div class="w-12 h-12 border-4 border-black bg-do flex items-center justify-center font-black text-lg uppercase">A</div>
    <div class="min-w-0">
      <div class="font-mono text-[14px] font-black tracking-tight truncate">{handle}</div>
      <div class="font-mono text-[9px] uppercase tracking-widest opacity-60 truncate">{role}</div>
    </div>
  </div>
  <div class="mt-3 pt-2 border-t-2 border-black flex items-baseline justify-between font-mono text-[9px] uppercase tracking-widest">
    <span class="opacity-60">spec author</span>
    <span class="font-black">SPEC-014</span>
  </div>
</div>