Process Receipt

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

export const meta: CompendiumMeta = {
  id: 35,
  slug: 'process-receipt',
  name: 'Process Receipt',
  category: 'maturity-process',
  subcategory: 'reviews-and-logs',
  pillar: 'de',
  description: 'Receipt-printer style log of cycle actions — timestamps, codes, perforated edge.',
  spec: `## Intent
A thermal-receipt rendering of the cycle's action log. Each line is one event: timestamp, code, actor, artifact. The perforated edge signals provenance and finality — this is what shipped, on paper.

## Acceptance Criteria
- [ ] Monospace font, tabular alignment
- [ ] Perforated bottom edge (zig-zag)
- [ ] Header with cycle/store metadata, footer total
- [ ] At least 5 timestamped entries

## Constraints
- No JS
- Theme-aware`,
  tags: ['list', 'real-content', 'dark-mode-tested', 'timeline'],
  status: 'stable',
  health: { ics: 87, a11y: 'aa', themed: true, animated: false },
};

const entries = [
  { t: '08:02', code: 'SPEC', who: '@author',     msg: 'SPEC-014 opened' },
  { t: '09:17', code: 'COMP', who: '@claude',    msg: 'compose pr#218' },
  { t: '10:41', code: 'VAL+', who: '@platform',  msg: 'AC 7/7 green' },
  { t: '11:03', code: 'GOV',  who: '@gatekeep',  msg: 'gate approved' },
  { t: '11:08', code: 'SHIP', who: '@cd',        msg: 'v0.4.0 deployed' },
  { t: '11:09', code: 'AAR',  who: '@team',      msg: 'cycle logged' },
];
---

<div class="w-full flex justify-center bg-paper">
  <div class="bg-paper text-ink border-x-4 border-t-4 border-ink shadow-[5px_5px_0_0_var(--color-ink)] w-full max-w-[280px] font-mono">
    <div class="px-3 py-2 border-b-2 border-dashed border-ink text-center">
      <div class="font-black uppercase tracking-widest text-xs">DOCODEGO</div>
      <div class="text-[10px] uppercase tracking-widest opacity-70">cycle-042 // 2026-05-19</div>
    </div>
    <ul class="px-3 py-2 text-[10px] leading-tight">
      {entries.map((e) => (
        <li class="flex gap-1.5 py-0.5 tabular-nums">
          <span class="opacity-60 shrink-0">{e.t}</span>
          <span class="font-black w-10 shrink-0">{e.code}</span>
          <span class="opacity-80 w-14 shrink-0 truncate">{e.who}</span>
          <span class="flex-1 min-w-0 truncate">{e.msg}</span>
        </li>
      ))}
    </ul>
    <div class="px-3 py-2 border-t-2 border-dashed border-ink flex items-baseline justify-between text-[10px] uppercase tracking-widest">
      <span class="opacity-70">TOTAL EVENTS</span>
      <span class="font-black tabular-nums">{entries.length}</span>
    </div>
    <div class="px-3 pb-2 text-center text-[10px] uppercase tracking-widest opacity-70">// thank you for converging</div>
    <svg viewBox="0 0 280 10" preserveAspectRatio="none" class="block w-full h-2.5" aria-hidden="true">
      <polygon
        points="0,0 10,10 20,0 30,10 40,0 50,10 60,0 70,10 80,0 90,10 100,0 110,10 120,0 130,10 140,0 150,10 160,0 170,10 180,0 190,10 200,0 210,10 220,0 230,10 240,0 250,10 260,0 270,10 280,0 280,0 0,0"
        fill="var(--color-paper)"
        stroke="var(--color-ink)"
        stroke-width="2"
      />
    </svg>
  </div>
</div>