Review State Pip

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

export const meta: CompendiumMeta = {
  id: 342,
  slug: 'review-state-pip',
  name: 'Review State Pip',
  category: 'specs-documents',
  subcategory: 'lifecycle',
  pillar: 'do',
  description: 'The REVIEW lifecycle pip — spec is frozen for reading, awaiting verdict before promotion.',
  spec: `## Intent
Review is the gate between exploration and commitment. The pip surfaces the freeze: edits paused, reviewers assigned, clock running. Pillar accent + attention strip mark it as governance-active.

## Acceptance Criteria
- [ ] Renders a square pip labelled REVIEW
- [ ] Shows reviewer count and elapsed days
- [ ] Uses attention-token strip for the gate marker
- [ ] Negative: does NOT show any reviewer identity

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

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <p class="font-mono text-[9px] uppercase tracking-widest opacity-60 mb-2">// lifecycle pip</p>
  <div class="flex items-stretch gap-3">
    <div class="w-16 h-16 border-4 border-black bg-attention text-white flex flex-col items-center justify-center shrink-0">
      <span class="font-black text-[10px] uppercase tracking-widest">REVIEW</span>
      <span class="font-mono text-[8px] uppercase tracking-widest opacity-80 mt-0.5">GATE</span>
    </div>
    <div class="min-w-0 flex-1 flex flex-col justify-center">
      <div class="font-mono text-[11px] font-black uppercase tracking-widest truncate">SPEC-342</div>
      <div class="font-mono text-[9px] uppercase tracking-widest opacity-60 mt-1">4 REVIEWERS · DAY 2/5</div>
      <div class="text-[11px] leading-snug mt-1 font-medium">Frozen for reading</div>
    </div>
  </div>
</div>