{ "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json", "aka": [ "Passive overlay" ], "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": "OverlayOptions", "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": "custom", "url": null }, { "name": "setStatus", "url": null }, { "name": "setWidget", "url": null }, { "name": "Box", "url": null }, { "name": "DynamicBorder", "url": null }, { "name": "OverlayOptions.nonCapturing", "url": null }, { "name": "CustomEditor", "url": null } ], "applicability": [ "Use this when auxiliary content should not interrupt the underlying editor." ], "category": "keys", "categoryLabel": "Keys and focus", "consequences": [ "A passive view does not interrupt editor input.", "Interaction requires an explicit later focus transfer." ], "family": "behavioral", "familyLabel": "Behavioral", "id": "ghost-overlay", "implementation": [ "Use nonCapturing explicitly.", "Request focus only when the auxiliary view needs interaction." ], "intent": "Keep an overlay visible without automatically taking keyboard focus.", "jsonUrl": "https://pi-tui.ratstack.sh/patterns/ghost-overlay.json", "kind": "screen", "knownUses": [ { "example": "nico-overlay-noncapturing-focus", "moreRefs": 0, "refs": [ { "file": "packages/tui/src/tui.ts", "lines": "114-170", "sha": "841c95ac", "url": "https://github.com/earendil-works/pi/blob/841c95ac9c7372b8f578c86d053d3b03b9ce2f20/packages/tui/src/tui.ts#L114-L170" }, { "file": "packages/tui/src/tui.ts", "lines": "186-228", "sha": "735ccbd0", "url": "https://github.com/earendil-works/pi/blob/735ccbd00ff6ce091dd6505f2d07c265b78a9092/packages/tui/src/tui.ts#L186-L228" } ], "repo": "earendil-works/pi", "repoUrl": "https://github.com/earendil-works/pi", "title": "Non-capturing overlays with explicit focus control" }, { "example": "nico-overlay-noncapturing-focus", "moreRefs": 0, "refs": [], "repo": "pi-interactive-shell", "repoUrl": "https://github.com/nicobailon/pi-interactive-shell", "title": "Non-capturing overlays with explicit focus control" }, { "example": "nico-overlay-noncapturing-focus", "moreRefs": 0, "refs": [], "repo": "pi-side-chat", "repoUrl": "https://github.com/nicobailon/pi-side-chat", "title": "Non-capturing overlays with explicit focus control" } ], "linkedFrom": [ { "how": "starts without taking focus", "id": "focus-baton", "jsonUrl": "https://pi-tui.ratstack.sh/patterns/focus-baton.json", "mdUrl": "https://pi-tui.ratstack.sh/patterns/focus-baton.md", "name": "Focus Baton", "url": "https://pi-tui.ratstack.sh/patterns/focus-baton/" } ], "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/ghost-overlay.md", "motivation": "Nico's upstream non-capturing overlay work lets visible auxiliary content leave keyboard input with its underlying component.", "name": "Ghost Overlay", "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": "OverlayOptions", "role": "Defines overlay dimensions, placement and focus behavior.", "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": "Underlying editor", "role": "Keeps input until the overlay explicitly takes focus.", "url": null } ], "pi": "1.0.3", "related": [ { "how": "transfers input after mounting", "id": "focus-baton", "jsonUrl": "https://pi-tui.ratstack.sh/patterns/focus-baton.json", "mdUrl": "https://pi-tui.ratstack.sh/patterns/focus-baton.md", "name": "Focus Baton", "url": "https://pi-tui.ratstack.sh/patterns/focus-baton/" } ], "sampleCode": { "code": "import { Box, Text, type OverlayHandle } from \"@earendil-works/pi-tui\";\nimport { DynamicBorder } from \"@earendil-works/pi-coding-agent\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\n// Original example on Pi 1.0.3. No extension source is executed.\nexport const story: PatternStory = {\n id: \"ghost-overlay\",\n title: \"Ghost Overlay\",\n kind: \"screen\",\n apis: [\"custom\", \"setStatus\", \"setWidget\", \"Box\", \"DynamicBorder\", \"OverlayOptions.nonCapturing\", \"OverlayHandle.focus\", \"OverlayHandle.unfocus\", \"CustomEditor\"],\n states: [\n { id: \"passive\", label: \"Editor keeps focus\", steps: [{ type: \"text\", text: \"Draft a small task list\" }] },\n { id: \"active\", label: \"Explicit focus\", steps: [{ type: \"action\", name: \"focus\" }, { type: \"keys\", data: \"x\" }] },\n { id: \"released\", label: \"Focus released\", steps: [{ type: \"action\", name: \"release\" }, { type: \"text\", text: \" next\" }] },\n ],\n setup({ ui, action, theme, screen }) {\n let handle: OverlayHandle | undefined;\n let active = false, interactions = 0;\n const label = new Text(\"\", 0, 0);\n const update = () => {\n const mode = active ? \"active\" : \"passive\";\n label.setText(theme.fg(\"accent\", \"🐀 Task preview · \" + mode) + \"\\n\" +\n theme.fg(\"text\", \"3 tasks · \" + interactions + \" panel input\" + (interactions === 1 ? \"\" : \"s\")));\n ui.setStatus(\"preview\", theme.fg(active ? \"accent\" : \"success\", mode));\n };\n ui.setWidget(\"hint\", [theme.fg(\"muted\", \"Task preview leaves the draft alone.\")], { placement: \"aboveEditor\" });\n ui.setWidget(\"below\", [theme.fg(\"dim\", \"↑↓ history · enter submit\")], { placement: \"belowEditor\" });\n ui.setEditorText(\"\");\n // A theme-backed Box separates the panel from the host. Pi borders frame\n // it in both themes; padding belongs to the panel, not the base screen.\n const panel = new Box(1, 0, line => theme.bg(\"customMessageBg\", line));\n panel.addChild(new DynamicBorder(line => theme.fg(\"borderAccent\", line)));\n panel.addChild(label);\n panel.addChild(new DynamicBorder(line => theme.fg(\"borderAccent\", line)));\n const view = {\n render: (width: number) => panel.render(width),\n invalidate: () => panel.invalidate(),\n handleInput: () => { interactions++; update(); },\n };\n update();\n void ui.custom(() => view, {\n overlay: true,\n overlayOptions: { nonCapturing: true, width: \"75%\", anchor: \"top-right\", row: 1, margin: 1 },\n onHandle: value => { handle = value; },\n });\n action(\"focus\", () => { if (!handle) throw new Error(\"Preview not mounted\"); handle.focus(); active = true; update(); });\n action(\"release\", () => {\n if (!handle) throw new Error(\"Preview not mounted\");\n handle.unfocus({ target: screen.editor }); active = false; update();\n });\n },\n};\n", "lang": "ts", "path": "stories/patterns/behavioral/ghost-overlay.ts" }, "states": [ { "dont": false, "expectFail": [], "frames": [ { "alt": "Ghost Overlay, Editor keeps focus state, 40 columns, dark theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/passive-40-dark.8e850a91972c.webp", "theme": "dark", "w": 800, "width": 40 }, { "alt": "Ghost Overlay, Editor keeps focus state, 40 columns, light theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/passive-40-light.cc39d9cc8bbb.webp", "theme": "light", "w": 800, "width": 40 }, { "alt": "Ghost Overlay, Editor keeps focus state, 60 columns, dark theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/passive-60-dark.4155e8706c87.webp", "theme": "dark", "w": 1200, "width": 60 }, { "alt": "Ghost Overlay, Editor keeps focus state, 60 columns, light theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/passive-60-light.77ada60b0d08.webp", "theme": "light", "w": 1200, "width": 60 }, { "alt": "Ghost Overlay, Editor keeps focus state, 80 columns, dark theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/passive-80-dark.94bc555890d7.webp", "theme": "dark", "w": 1600, "width": 80 }, { "alt": "Ghost Overlay, Editor keeps focus state, 80 columns, light theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/passive-80-light.9a225aef2adc.webp", "theme": "light", "w": 1600, "width": 80 }, { "alt": "Ghost Overlay, Editor keeps focus state, 120 columns, dark theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/passive-120-dark.54826059fda5.webp", "theme": "dark", "w": 2400, "width": 120 }, { "alt": "Ghost Overlay, Editor keeps focus state, 120 columns, light theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/passive-120-light.c1666f515181.webp", "theme": "light", "w": 2400, "width": 120 } ], "how": "Show a passive synthetic panel while typing in the host editor.", "id": "passive", "label": "Editor keeps focus", "problems": [] }, { "dont": false, "expectFail": [], "frames": [ { "alt": "Ghost Overlay, Explicit focus state, 40 columns, dark theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/active-40-dark.8930c2fa229d.webp", "theme": "dark", "w": 800, "width": 40 }, { "alt": "Ghost Overlay, Explicit focus state, 40 columns, light theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/active-40-light.7b43a0ed981b.webp", "theme": "light", "w": 800, "width": 40 }, { "alt": "Ghost Overlay, Explicit focus state, 60 columns, dark theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/active-60-dark.357a520467d6.webp", "theme": "dark", "w": 1200, "width": 60 }, { "alt": "Ghost Overlay, Explicit focus state, 60 columns, light theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/active-60-light.307e0fad1cad.webp", "theme": "light", "w": 1200, "width": 60 }, { "alt": "Ghost Overlay, Explicit focus state, 80 columns, dark theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/active-80-dark.c7984a18c1e9.webp", "theme": "dark", "w": 1600, "width": 80 }, { "alt": "Ghost Overlay, Explicit focus state, 80 columns, light theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/active-80-light.d43fc5c3764c.webp", "theme": "light", "w": 1600, "width": 80 }, { "alt": "Ghost Overlay, Explicit focus state, 120 columns, dark theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/active-120-dark.3e38812b0b35.webp", "theme": "dark", "w": 2400, "width": 120 }, { "alt": "Ghost Overlay, Explicit focus state, 120 columns, light theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/active-120-light.3d47f7de5520.webp", "theme": "light", "w": 2400, "width": 120 } ], "how": "Focus the same panel for one interaction.", "id": "active", "label": "Explicit focus", "problems": [] }, { "dont": false, "expectFail": [], "frames": [ { "alt": "Ghost Overlay, Focus released state, 40 columns, dark theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/released-40-dark.b1cc0094a7ba.webp", "theme": "dark", "w": 800, "width": 40 }, { "alt": "Ghost Overlay, Focus released state, 40 columns, light theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/released-40-light.2485d8dc804c.webp", "theme": "light", "w": 800, "width": 40 }, { "alt": "Ghost Overlay, Focus released state, 60 columns, dark theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/released-60-dark.8fb8128f921c.webp", "theme": "dark", "w": 1200, "width": 60 }, { "alt": "Ghost Overlay, Focus released state, 60 columns, light theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/released-60-light.53256be6744a.webp", "theme": "light", "w": 1200, "width": 60 }, { "alt": "Ghost Overlay, Focus released state, 80 columns, dark theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/released-80-dark.d6953923d123.webp", "theme": "dark", "w": 1600, "width": 80 }, { "alt": "Ghost Overlay, Focus released state, 80 columns, light theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/released-80-light.6e84cca9de51.webp", "theme": "light", "w": 1600, "width": 80 }, { "alt": "Ghost Overlay, Focus released state, 120 columns, dark theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/released-120-dark.f9ab1c6f4033.webp", "theme": "dark", "w": 2400, "width": 120 }, { "alt": "Ghost Overlay, Focus released state, 120 columns, light theme, 11 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": 484, "rows": 11, "still": "https://pi-tui.ratstack.sh/frames/ghost-overlay/released-120-light.e4b853f31fc0.webp", "theme": "light", "w": 2400, "width": 120 } ], "how": "Release input ownership while leaving the panel visible.", "id": "released", "label": "Focus released", "problems": [] } ], "structure": "nonCapturing overlay -> visible\nkeyboard -> base component\nfocus() -> overlay", "thumbnails": { "dark": { "animation": null, "src": "https://pi-tui.ratstack.sh/thumbs/ghost-overlay/dark.7e95abee6dc8.webp" }, "light": { "animation": null, "src": "https://pi-tui.ratstack.sh/thumbs/ghost-overlay/light.8dcf27c2c787.webp" } }, "url": "https://pi-tui.ratstack.sh/patterns/ghost-overlay/", "widths": [ 40, 60, 80, 120 ] }