Resume Composition Button

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

export const meta: CompendiumMeta = {
  id: 522,
  slug: 'resume-composition-button',
  name: 'Resume Composition Button',
  category: 'governance-risk',
  subcategory: 'controls',
  pillar: 'go',
  description: 'The matched return-to-run primitive — picks up a paused composition from its last checkpoint.',
  spec: `## Intent
Resume is the explicit antonym of pause. Operators see the checkpoint they will jump back into, so resuming is never a leap of faith.

## Acceptance Criteria
- [ ] Play glyph (right triangle) inside a chunky button
- [ ] Shows the checkpoint id being resumed
- [ ] Success-toned button reads "GO" without saying so literally
- [ ] Negative: does NOT replay completed steps

## Constraints
- Pure CSS, no JS
- Tokens only, theme-aware`,
  tags: ['card', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 91, a11y: 'aa', themed: true, animated: false },
};

const ckpt = 'CKPT-038';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">GO · return-to-run</p>
  <div class="mt-2 flex items-center gap-3">
    <button type="button" class="shrink-0 inline-flex items-center gap-2 px-3 py-2 border-4 border-black bg-success text-black font-black text-[12px] uppercase tracking-widest" style="box-shadow: 4px 4px 0 0 var(--color-ink);">
      <span aria-hidden="true" class="w-0 h-0" style="border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid currentColor;"></span>
      Resume
    </button>
    <div class="min-w-0">
      <p class="font-black text-[13px] uppercase leading-none">{ckpt}</p>
      <p class="mt-1 font-mono text-[10px] uppercase tracking-widest opacity-70">last checkpoint · 09:14</p>
    </div>
  </div>
</div>