Pause Composition Button

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

export const meta: CompendiumMeta = {
  id: 521,
  slug: 'pause-composition-button',
  name: 'Pause Composition Button',
  category: 'governance-risk',
  subcategory: 'controls',
  pillar: 'go',
  description: 'A chunky button that suspends an in-flight composition without discarding state — pause, not abort.',
  spec: `## Intent
Pause is the soft-stop. The button freezes the current composition step, keeps partial state addressable, and surrenders the run-token back to the operator.

## Acceptance Criteria
- [ ] Pause glyph (two bars) inside a chunky button
- [ ] Caption names the target ("COMP-074")
- [ ] Secondary line confirms state is preserved
- [ ] Negative: does NOT discard partial outputs

## 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 target = 'COMP-074';
---

<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 · soft-stop</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-attention text-white font-black text-[12px] uppercase tracking-widest" style="box-shadow: 4px 4px 0 0 var(--color-ink);">
      <span class="inline-flex gap-1" aria-hidden="true">
        <span class="w-1.5 h-4" style="background-color: currentColor;"></span>
        <span class="w-1.5 h-4" style="background-color: currentColor;"></span>
      </span>
      Pause
    </button>
    <div class="min-w-0">
      <p class="font-black text-[13px] uppercase leading-none">{target}</p>
      <p class="mt-1 font-mono text-[10px] uppercase tracking-widest opacity-70">state preserved · resumable</p>
    </div>
  </div>
</div>