Rollback Button

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

export const meta: CompendiumMeta = {
  id: 523,
  slug: 'rollback-button',
  name: 'Rollback Button',
  category: 'governance-risk',
  subcategory: 'controls',
  pillar: 'go',
  description: 'A reverse-arrow button that reverts the active composition to a named prior revision.',
  spec: `## Intent
Rollback names the revision it returns to, so the operator commits to a destination, not just a direction. This atom makes the target version inescapably visible.

## Acceptance Criteria
- [ ] Reverse-arrow glyph on the button
- [ ] Target revision id rendered alongside
- [ ] Danger-toned button — destructive forward intent
- [ ] Negative: does NOT prompt for a custom revision

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

const rev = 'rev-217';
---

<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 · revert</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-danger text-white font-black text-[12px] uppercase tracking-widest" style="box-shadow: 4px 4px 0 0 var(--color-ink);">
      <span aria-hidden="true" class="font-black text-base leading-none">↶</span>
      Rollback
    </button>
    <div class="min-w-0">
      <p class="font-black text-[13px] uppercase leading-none">to {rev}</p>
      <p class="mt-1 font-mono text-[10px] uppercase tracking-widest opacity-70">last-known-good · 7m ago</p>
    </div>
  </div>
</div>