Role Handle Chip

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

export const meta: CompendiumMeta = {
  id: 405,
  slug: 'role-handle-chip',
  name: 'Role Handle Chip',
  category: 'pillars-roles',
  subcategory: 'role-identity',
  pillar: 'co',
  description: 'A @-handle chip with a small pillar dot — names a participant and the hat they wear in one inline mark.',
  spec: `## Intent
Inline identity primitive: handle + role-pip. Used in attribution rows, comment heads, sign-offs.

## Acceptance Criteria
- [ ] Renders @handle in mono caps
- [ ] Small pillar-coloured pip indicates which hat
- [ ] Hat label below in micro caps
- [ ] Negative: does NOT reveal real names or PII

## Constraints
- Theme-aware via tokens
- No hex literals in brand-colour slots`,
  tags: ['badge', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 86, a11y: 'aa', themed: true, animated: false },
};

const chips = [
  { handle: '@author',    hat: 'Intent Architect',  pillar: 'do' },
  { handle: '@composer',  hat: 'Composition Lead',  pillar: 'co' },
  { handle: '@steward',   hat: 'Flow Steward',      pillar: 'de' },
  { handle: '@governor',  hat: 'Governor',          pillar: 'go' },
];
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-3 overflow-hidden">
  <div class="font-mono text-[9px] uppercase tracking-widest opacity-60 mb-2">Participants</div>
  <ul class="space-y-1.5">
    {chips.map((c) => (
      <li class="flex items-center gap-2 border-2 border-black px-2 py-1 bg-paper">
        <span class:list={['w-2.5 h-2.5 border-2 border-black shrink-0', `bg-${c.pillar}`]}></span>
        <span class="font-mono text-[11px] uppercase tracking-widest font-black truncate">{c.handle}</span>
        <span class="font-mono text-[9px] uppercase tracking-widest opacity-60 ms-auto truncate">{c.hat}</span>
      </li>
    ))}
  </ul>
</div>