{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Overlay focus handoff"
  ],
  "animated": false,
  "apis": [
    {
      "name": "ctx.ui.custom",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays"
    },
    {
      "name": "OverlayHandle.focus",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays"
    },
    {
      "name": "OverlayHandle.unfocus",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays"
    },
    {
      "name": "OverlayHandle.isFocused",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays"
    },
    {
      "name": "OverlayHandle.setHidden",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays"
    },
    {
      "name": "custom",
      "url": null
    },
    {
      "name": "Input",
      "url": null
    },
    {
      "name": "Focusable",
      "url": null
    },
    {
      "name": "Box",
      "url": null
    },
    {
      "name": "DynamicBorder",
      "url": null
    }
  ],
  "applicability": [
    "Use this when a secondary view and the host editor need alternating input."
  ],
  "category": "keys",
  "categoryLabel": "Keys and focus",
  "consequences": [
    "The secondary view stays visible during focus handoff.",
    "Visibility and input ownership need separate handle operations."
  ],
  "family": "behavioral",
  "familyLabel": "Behavioral",
  "id": "focus-baton",
  "implementation": [
    "Visibility does not imply keyboard ownership.",
    "Finish custom UI through done rather than permanent handle removal."
  ],
  "intent": "Move keyboard ownership without closing a persistent overlay.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/focus-baton.json",
  "kind": "screen",
  "knownUses": [
    {
      "example": "side-chat-focusable-overlay",
      "moreRefs": 0,
      "refs": [
        {
          "file": "index.ts",
          "lines": "37-76",
          "sha": "9d59cc04",
          "url": "https://github.com/nicobailon/pi-side-chat/blob/9d59cc042634111c1ed633b7bacb9f74611aebbd/index.ts#L37-L76"
        },
        {
          "file": "index.ts",
          "lines": "138-218",
          "sha": "9d59cc04",
          "url": "https://github.com/nicobailon/pi-side-chat/blob/9d59cc042634111c1ed633b7bacb9f74611aebbd/index.ts#L138-L218"
        }
      ],
      "repo": "pi-side-chat",
      "repoUrl": "https://github.com/nicobailon/pi-side-chat",
      "title": "Focus handoff for a persistent side-chat overlay"
    },
    {
      "example": "nico-overlay-focus-restoration-hardening",
      "moreRefs": 0,
      "refs": [
        {
          "file": "packages/tui/src/tui.ts",
          "lines": "1-100",
          "sha": "91a2f866",
          "url": "https://github.com/earendil-works/pi/blob/91a2f8660099f41e7c8c71dbd3ae52e2ab3e81f5/packages/tui/src/tui.ts#L1-L100"
        }
      ],
      "repo": "earendil-works/pi",
      "repoUrl": "https://github.com/earendil-works/pi",
      "title": "Harden overlay focus restoration after temporary UI changes"
    }
  ],
  "linkedFrom": [
    {
      "how": "transfers input after mounting",
      "id": "ghost-overlay",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/ghost-overlay.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/ghost-overlay.md",
      "name": "Ghost Overlay",
      "url": "https://pi-tui.ratstack.sh/patterns/ghost-overlay/"
    },
    {
      "how": "moves focus without completion",
      "id": "done-contract",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/done-contract.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/done-contract.md",
      "name": "Done Contract",
      "url": "https://pi-tui.ratstack.sh/patterns/done-contract/"
    }
  ],
  "links": {
    "agentGuide": "https://pi-tui.ratstack.sh/llms.txt",
    "index": "https://pi-tui.ratstack.sh/patterns.md",
    "skill": "https://pi-tui.ratstack.sh/skills/build-pi-tui-component.md"
  },
  "mdUrl": "https://pi-tui.ratstack.sh/patterns/focus-baton.md",
  "motivation": "Side Chat keeps a secondary overlay mounted while its shortcut changes keyboard ownership.",
  "name": "Focus Baton",
  "participants": [
    {
      "name": "ctx.ui.custom",
      "role": "Mounts one interaction and resolves through done.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays"
    },
    {
      "name": "OverlayHandle.focus",
      "role": "Gives the overlay keyboard ownership.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays"
    },
    {
      "name": "OverlayHandle.unfocus",
      "role": "Releases input to fallback or a specified target.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays"
    },
    {
      "name": "OverlayHandle.isFocused",
      "role": "Reports the overlay's current input ownership.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays"
    },
    {
      "name": "OverlayHandle.setHidden",
      "role": "Temporarily changes visibility without completion.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays"
    },
    {
      "name": "Focus target",
      "role": "Receives keyboard input while the overlay remains mounted.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "starts without taking focus",
      "id": "ghost-overlay",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/ghost-overlay.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/ghost-overlay.md",
      "name": "Ghost Overlay",
      "url": "https://pi-tui.ratstack.sh/patterns/ghost-overlay/"
    }
  ],
  "sampleCode": {
    "code": "// Focus Baton: keep a framed side view mounted while keyboard ownership changes.\nimport { Box, Input, Text, type Component, type Focusable, type OverlayHandle } from \"@earendil-works/pi-tui\";\nimport { DynamicBorder } from \"@earendil-works/pi-coding-agent\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nexport const story: PatternStory = {\n  id: \"focus-baton\",\n  title: \"Focus Baton\",\n  kind: \"screen\",\n  apis: [\"custom\", \"Input\", \"Focusable\", \"OverlayHandle.focus\", \"OverlayHandle.unfocus\",\n    \"OverlayHandle.isFocused\", \"OverlayHandle.setHidden\", \"Box\", \"DynamicBorder\"],\n  states: [\n    { id: \"overlay\", label: \"Overlay focused\", steps: [\n      { type: \"action\", name: \"open\" }, { type: \"text\", text: \"Trace the parser\" },\n    ] },\n    { id: \"editor\", label: \"Editor focused\", steps: [\n      { type: \"action\", name: \"editor-focus\" }, { type: \"text\", text: \"Review token tests\" },\n    ] },\n    { id: \"returned\", label: \"Focus restored\", steps: [\n      { type: \"action\", name: \"prompt\" }, { type: \"text\", text: \"boundary\" }, { type: \"keys\", data: \"\\r\" },\n    ] },\n    { id: \"hidden\", label: \"Hidden then restored\", steps: [\n      { type: \"action\", name: \"hide\" }, { type: \"text\", text: \" next\" },\n      { type: \"action\", name: \"restore\" },\n    ] },\n  ],\n  setup({ ui, screen, theme, action }) {\n    let handle: OverlayHandle | undefined;\n    let topic = \"Topic: parser\";\n    let restored = false;\n    ui.setHeader(() => new Text(theme.fg(\"accent\", \"Pi · Focus Baton\"), 0, 0));\n    ui.setWidget(\"host-context\", [\n      theme.fg(\"muted\", \"Main task: review the token boundary\"),\n      theme.fg(\"dim\", \"Side notes remain mounted\"),\n      theme.fg(\"dim\", \"Main draft has its own keyboard owner\"),\n    ]);\n    action(\"open\", () => { void ui.custom((_tui, panelTheme) => {\n      const draft = new Input({ prompt: \"> \" });\n      const heading = new Text(\"\", 0, 0);\n      const detail = new Text(\"\", 0, 0);\n      const panel = new Box(1, 0, line => panelTheme.bg(\"customMessageBg\", line));\n      panel.addChild(new DynamicBorder(line => panelTheme.fg(\"borderAccent\", line)));\n      panel.addChild(heading);\n      panel.addChild(detail);\n      panel.addChild(draft);\n      panel.addChild(new DynamicBorder(line => panelTheme.fg(\"borderAccent\", line)));\n      class SideNotes implements Component, Focusable {\n        get focused() { return draft.focused; }\n        set focused(value: boolean) { draft.focused = value; }\n        invalidate() { panel.invalidate(); }\n        handleInput(data: string) { draft.handleInput(data); _tui.requestRender(); }\n        render(width: number) {\n          heading.setText(panelTheme.fg(handle?.isFocused() ? \"success\" : \"muted\",\n            handle?.isFocused() ? \"Side notes · FOCUSED\" : \"Side notes · passive\"));\n          detail.setText(panelTheme.fg(\"accent\", restored ? \"Restored · same draft\" : topic));\n          return panel.render(width);\n        }\n      }\n      return new SideNotes();\n    }, {\n      overlay: true,\n      overlayOptions: { width: \"70%\", anchor: \"top-right\", row: 1, margin: 1 },\n      onHandle: value => { handle = value; },\n    }); });\n    action(\"editor-focus\", () => {\n      handle?.unfocus({ target: screen.editor });\n      ui.setStatus(\"focus\", theme.fg(\"success\", \"main editor\"));\n    });\n    action(\"prompt\", () => {\n      void ui.input(\"Choose a note topic\", \"topic\").then(answer => {\n        topic = \"Topic: \" + (answer ?? \"parser\");\n        handle?.focus();\n        ui.setStatus(\"focus\", theme.fg(\"success\", \"side notes\"));\n      });\n    });\n    action(\"hide\", () => {\n      handle?.setHidden(true);\n      ui.setStatus(\"focus\", theme.fg(\"muted\", \"hidden · draft retained\"));\n    });\n    action(\"restore\", () => {\n      restored = true;\n      handle?.setHidden(false);\n      handle?.focus();\n      ui.setStatus(\"focus\", theme.fg(\"success\", \"side notes restored\"));\n    });\n    return () => { ui.setWidget(\"host-context\", undefined); ui.setStatus(\"focus\", undefined); };\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/behavioral/focus-baton.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Focus Baton, Overlay focused state, 40 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/overlay-40-dark.2a32a3a6d9d7.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Focus Baton, Overlay focused state, 40 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/overlay-40-light.3d06723a5437.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Focus Baton, Overlay focused state, 60 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/overlay-60-dark.74b974847ce8.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Focus Baton, Overlay focused state, 60 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/overlay-60-light.15b5cae615b7.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Focus Baton, Overlay focused state, 80 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/overlay-80-dark.fe0a15b25696.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Focus Baton, Overlay focused state, 80 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/overlay-80-light.7125567dc5ce.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Focus Baton, Overlay focused state, 120 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/overlay-120-dark.db3b90c2020f.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Focus Baton, Overlay focused state, 120 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/overlay-120-light.7d19ffc36174.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show synthetic secondary content with its focus indicator.",
      "id": "overlay",
      "label": "Overlay focused",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Focus Baton, Editor focused state, 40 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/editor-40-dark.13b55983c7db.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Focus Baton, Editor focused state, 40 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/editor-40-light.1c3cbbf6c5b1.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Focus Baton, Editor focused state, 60 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/editor-60-dark.3beb3df94eda.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Focus Baton, Editor focused state, 60 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/editor-60-light.3bed1272a609.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Focus Baton, Editor focused state, 80 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/editor-80-dark.bdd0e8403ef5.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Focus Baton, Editor focused state, 80 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/editor-80-light.2d3bf242a58d.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Focus Baton, Editor focused state, 120 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/editor-120-dark.cd998e3f9c5a.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Focus Baton, Editor focused state, 120 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/editor-120-light.8f2f7b297705.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Release the overlay to the editor while keeping it visible.",
      "id": "editor",
      "label": "Editor focused",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Focus Baton, Focus restored state, 40 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/returned-40-dark.e4ac3eda2d61.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Focus Baton, Focus restored state, 40 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/returned-40-light.048604ad52f1.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Focus Baton, Focus restored state, 60 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/returned-60-dark.49465d8e2b04.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Focus Baton, Focus restored state, 60 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/returned-60-light.7aacf05c1f9d.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Focus Baton, Focus restored state, 80 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/returned-80-dark.40c8aac2d40d.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Focus Baton, Focus restored state, 80 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/returned-80-light.776e7a1dc515.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Focus Baton, Focus restored state, 120 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/returned-120-dark.f6d86f108d23.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Focus Baton, Focus restored state, 120 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/returned-120-light.34f70d56945b.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Take focus back after a temporary prompt.",
      "id": "returned",
      "label": "Focus restored",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Focus Baton, Temporarily hidden state, 40 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/hidden-40-dark.80bcde7624df.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Focus Baton, Temporarily hidden state, 40 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/hidden-40-light.80c09a0210a2.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Focus Baton, Temporarily hidden state, 60 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/hidden-60-dark.65b3edbc83fc.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Focus Baton, Temporarily hidden state, 60 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/hidden-60-light.6520b1a35722.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Focus Baton, Temporarily hidden state, 80 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/hidden-80-dark.289d7272b1ad.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Focus Baton, Temporarily hidden state, 80 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/hidden-80-light.d96e3cba047c.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Focus Baton, Temporarily hidden state, 120 columns, dark theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/hidden-120-dark.de0ef0840bea.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Focus Baton, Temporarily hidden state, 120 columns, light theme, 12 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 528,
          "rows": 12,
          "still": "https://pi-tui.ratstack.sh/frames/focus-baton/hidden-120-light.ab359ce83605.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Hide and restore through setHidden without settling the interaction.",
      "id": "hidden",
      "label": "Temporarily hidden",
      "problems": []
    }
  ],
  "structure": "visible overlay -> focus()\neditor <- unfocus(target)\ninteraction end -> done",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/focus-baton/dark.66e83a03787b.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/focus-baton/light.68a30026877a.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/focus-baton/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}