{
  "name": "AgentTransfer",
  "type": "pattern",
  "description": "Two labelled waveforms, agent above caller, the agent's ink changing as the call is handed to a second agent",
  "export": "@gtmi/strix-react/animations/agent-transfer",
  "path": "@gtmi/strix-react/animations/agent-transfer",
  "figma": {
    "file": "zT3vGm4QlFEI2Jp9nxyFKI",
    "fileName": "Demo components library",
    "nodes": [{ "node": "22:4297", "name": ".transfer-agent-animation", "section": "Animations" }],
    "note": "Nine frames on one `Frame` variant axis. Not nine variants: a storyboard of one handoff, which collapses to the agent row's two inks."
  },
  "props": [
    {
      "name": "transferred",
      "type": "boolean",
      "default": "false",
      "description": "Whether the call has been handed over. Inks the agent row blue-700 rather than accesible-red-dark-theme"
    },
    {
      "name": "showLabels",
      "type": "boolean",
      "default": "true",
      "description": "Whether the two speaker labels are visible. False renders them sr-only, never removed"
    },
    {
      "name": "agentLabel",
      "type": "string",
      "default": "'Agent'",
      "description": "Upper row label. Pass the second agent's name mid-transfer — that is the state's only non-chromatic carrier"
    },
    { "name": "userLabel", "type": "string", "default": "'You'", "description": "Lower row label" }
  ],
  "parts": [
    { "name": "agent-transfer", "description": "The frame, via data-slot, carrying data-transferred" },
    {
      "name": "agent-transfer-row",
      "description": "One labelled waveform, via data-slot, carrying data-speaker=\"agent\" | \"user\""
    }
  ],
  "ai_tags": ["transfer", "handoff", "escalation", "voice", "waveform", "turn-taking", "animation", "i18n", "pattern"],
  "since": "0.7.0",
  "source": "Figma zT3vGm4QlFEI2Jp9nxyFKI animation .transfer-agent-animation (22:4297), read in Dev Mode",
  "tokens_used": [
    "--color-icon-waveform-agent",
    "--color-icon-waveform-transferred",
    "--color-icon-primary",
    "--color-text-muted-figma",
    "--spacing-gap-200",
    "--radius-extra-large"
  ],
  "notes": "WHY A COMPONENT NOW, when the binding recorded `component: null` and \"compose, do not build\". Composing it correctly turned out to take four decisions no caller can be expected to re-derive, and the inline story that stood in for it got three of them wrong. THE ROWS ARE FLUSH: the earlier story put `gap-gap-400` (24px) between them and the binding recorded `spacing/medium` (32px) as \"between the two waveform rows\". Both are wrong — 32px is the variant frame's own gap, and that frame has ONE child, so it paints nothing. Dev Mode shows the two rows with NO gap on frames 01/08/Frame9 and 16px on 02-07, and the arithmetic is the proof: 24px label + 8px + 56px waveform, twice, is 176px, which is exactly the height the binding already recorded for those three frames. Adding 16px gives 192px, the recorded height for the rest. The two heights were sitting beside the wrong gap all along. THE SQUARES ARE BINARY, not ramped: every square in this atom is fully opaque or `opacity-0`, so both rows pass `peaks=\"uniform\"`, a prop `WaitingIndicator` gained for this. `isWaiting={false}` alone was not enough, because it holds each square at its own 10/20/…/100 peak and applies it as an INLINE opacity that no class can reach — the story rendered a faded ramp Figma does not draw and no test could see it, since jsdom applies no CSS. THE LABEL ROLE IS `body-m-semibold`, matched on the measured ramp: Figma's style is NAMED `Headings/h6` but measures 16px/24px/Semibold, where Strix's `h6` is 18px/26px and its `h7` is 16px/24px at weight 400. Only `body-m-semibold` is 16/24/600 at 0 tracking. The story picked `body-s` and then overrode size and line-height with `--text-size-figma-16`/`--leading-height-figma-16`; the override was the offset heading scale showing through. FIGMA'S 2px GRADIENT RULE IS NOT DRAWN, and this reverses a recorded claim. The binding says it is \"revealed during the handoff\", and the story drew it `w-full` at full opacity between the rows. Dev Mode shows the layer in ALL NINE frames at `w-px` and `opacity-0`: there is no frame in which it is visible, so \"revealed during the handoff\" was an inference about motion the frames do not contain, and drawing it was invention under rule 2. `--color-border-transfer-rule` stays minted and is now painted by nothing. `showLabels={false}` RENDERS `sr-only`, NOT NOTHING, and that is not a nicety. Figma signals the transfer by ink alone: blue-700 is 1.96:1 on the page — a rule-1 conflict logged in docs/FIGMA-EXCEPTIONS.md and shipped as drawn — and 2.34:1 against the red it replaces, so the colour change is weak evidence for a sighted viewer and none at all otherwise. With the label gone from the accessibility tree the state would be unreportable. `Frame` IS NOT A PROP. The frames also blink the agent row through `opacity-0` and open the 16px gap mid-sequence; neither is exposed, because the frames state no duration, easing or loop, so any cadence chosen here would be invented rather than ported."
}