Handoff Arrow (Flow)

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

export const meta: CompendiumMeta = {
  id: 505,
  slug: 'handoff-arrow-flow',
  name: 'Handoff Arrow (Flow)',
  category: 'maturity-process',
  subcategory: 'flow',
  pillar: 'de',
  description: 'Labelled arrow showing a flow handoff between two stations — emission contract spelled out on the line.',
  spec: `## Intent
Where one flow station ends, another begins. The arrow names the emitted artefact so handoff is not gesture but contract.

## Acceptance Criteria
- [ ] SVG arrow with label on the line
- [ ] Source and target stations labelled and toned
- [ ] Arrow stroke uses pillar token
- [ ] Negative: does NOT animate by default

## Constraints
- Pure SVG
- Theme-aware via tokens`,
  tags: ['svg', 'navigation', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 89, a11y: 'aa', themed: true, animated: false },
};

const hop = { from: 'COMPOSE', to: 'VALIDATE', emits: 'artefact' };
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <svg viewBox="0 0 320 80" class="w-full block" aria-label={`Handoff from ${hop.from} to ${hop.to}`}>
    <rect x="6" y="22" width="92" height="36" fill="var(--color-co)" stroke="var(--color-ink)" stroke-width="3" />
    <text x="52" y="46" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="10" font-weight="900" fill="var(--color-ink)">{hop.from}</text>
    <line x1="102" y1="40" x2="218" y2="40" stroke="var(--color-de)" stroke-width="4" />
    <polygon points="218,32 232,40 218,48" fill="var(--color-de)" stroke="var(--color-ink)" stroke-width="2" />
    <rect x="108" y="10" width="80" height="16" fill="var(--color-paper)" stroke="var(--color-ink)" stroke-width="2" />
    <text x="148" y="22" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" font-weight="700" fill="var(--color-ink)" letter-spacing="1">emits: {hop.emits}</text>
    <rect x="238" y="22" width="76" height="36" fill="var(--color-de)" stroke="var(--color-ink)" stroke-width="3" />
    <text x="276" y="46" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="11" font-weight="900" fill="var(--color-ink)">{hop.to}</text>
  </svg>
  <div class="mt-2 font-mono text-[10px] uppercase tracking-widest opacity-60 text-center">handoff contract &middot; named emission</div>
</div>