{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Inline image fallback"
  ],
  "animated": false,
  "apis": [
    {
      "name": "Image",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/tui/README.md#image"
    },
    {
      "name": "detectCapabilities",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/tui/README.md#image"
    },
    {
      "name": "setCapabilities",
      "url": null
    },
    {
      "name": "TuiAltScreen",
      "url": null
    }
  ],
  "applicability": [
    "Use this when custom output or staged previews contain images."
  ],
  "category": "tools",
  "categoryLabel": "Tool and message output",
  "consequences": [
    "Supported terminals show images while other paths remain readable as text.",
    "Fallback paths cannot provide the same visual image detail."
  ],
  "family": "presentation",
  "familyLabel": "Presentation",
  "id": "image-parachute",
  "implementation": [
    "Capabilities depend on terminal protocol and renderer mode.",
    "Fullscreen iTerm2 uses placeholders rather than repainting inline image placements.",
    "Do not infer unchanged Ghostty heuristics from declarations alone."
  ],
  "intent": "Render terminal images where supported and text placeholders otherwise.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/image-parachute.json",
  "kind": "component",
  "knownUses": [
    {
      "example": "nico-inline-images",
      "moreRefs": 0,
      "refs": [
        {
          "file": "packages/tui/src/components/image.ts",
          "lines": "1-78",
          "sha": "9e9d5c94",
          "url": "https://github.com/earendil-works/pi/blob/9e9d5c94ed4aad92876a15fab64e78573133695a/packages/tui/src/components/image.ts#L1-L78"
        },
        {
          "file": "packages/tui/src/terminal-image.ts",
          "lines": "1-90",
          "sha": "9e9d5c94",
          "url": "https://github.com/earendil-works/pi/blob/9e9d5c94ed4aad92876a15fab64e78573133695a/packages/tui/src/terminal-image.ts#L1-L90"
        }
      ],
      "repo": "earendil-works/pi",
      "repoUrl": "https://github.com/earendil-works/pi",
      "title": "Render inline terminal images"
    },
    {
      "example": "nico-ghostty-tmux-detection",
      "moreRefs": 0,
      "refs": [
        {
          "file": "packages/tui/src/terminal-image.ts",
          "lines": "36-57",
          "sha": "e904b11e",
          "url": "https://github.com/earendil-works/pi/blob/e904b11e7b4fb97105712a951ffb72b2572df69f/packages/tui/src/terminal-image.ts#L36-L57"
        }
      ],
      "repo": "earendil-works/pi",
      "repoUrl": "https://github.com/earendil-works/pi",
      "title": "Detect Ghostty through tmux for inline images"
    },
    {
      "example": "screenshot-multi-image-picker",
      "moreRefs": 0,
      "refs": [
        {
          "file": "extensions/screenshots-picker/index.ts",
          "lines": "800-830",
          "sha": "17cce138",
          "url": "https://github.com/nicobailon/dot314/blob/17cce138f3f687211d0485d204408a9650953c61/extensions/screenshots-picker/index.ts#L800-L830"
        }
      ],
      "repo": "dot314",
      "repoUrl": "https://github.com/nicobailon/dot314",
      "title": "Select and preview multiple screenshots in a custom picker"
    }
  ],
  "linkedFrom": [
    {
      "how": "handles preview capability limits",
      "id": "preview-basket",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/preview-basket.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/preview-basket.md",
      "name": "Preview Basket",
      "url": "https://pi-tui.ratstack.sh/patterns/preview-basket/"
    }
  ],
  "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/image-parachute.md",
  "motivation": "Nico's inline-image component encounters terminals and modes with different graphics support.",
  "name": "Image Parachute",
  "participants": [
    {
      "name": "Image",
      "role": "Renders an inline image or unsupported-terminal placeholder.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/tui/README.md#image"
    },
    {
      "name": "detectCapabilities",
      "role": "Reports detected terminal graphics capabilities.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/tui/README.md#image"
    },
    {
      "name": "Renderer mode",
      "role": "Restricts image presentation where protocol repainting is unsupported.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "uses image-backed staged inspection",
      "id": "preview-basket",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/preview-basket.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/preview-basket.md",
      "name": "Preview Basket",
      "url": "https://pi-tui.ratstack.sh/patterns/preview-basket/"
    }
  ],
  "sampleCode": {
    "code": "// Image Parachute: Pi chooses either readable fallback or a real PNG placement.\nimport { Image, Text, getCapabilities, detectCapabilities, setCapabilities } from \"@earendil-works/pi-tui\";\nimport { syntheticPreview } from \"../../fixtures/synthetic-images.ts\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nexport const story: PatternStory = {\n  id: \"image-parachute\", title: \"Image Parachute\", kind: \"component\",\n  apis: [\"Image\", \"detectCapabilities\", \"setCapabilities\", \"TuiAltScreen\"], rows: 10,\n  states: [\n    { id: \"unsupported\", label: \"Text fallback\" },\n    { id: \"supported\", label: \"Kitty PNG\", steps: [{ type: \"action\", name: \"supported\" }] },\n    { id: \"iterm\", label: \"iTerm2 PNG\", steps: [{ type: \"action\", name: \"iterm\" }] },\n    { id: \"iterm-fullscreen\", label: \"iTerm2 fullscreen fallback\", capture: \"fullscreen\", steps: [{ type: \"action\", name: \"iterm\" }] },\n  ],\n  setup({ theme, tui, action }) {\n    const previous = getCapabilities(), detected = detectCapabilities(() => false);\n    let protocol: \"kitty\" | \"iterm2\" | null = null;\n    const image = new Image(syntheticPreview(\"tasks\"), \"image/png\", {\n      fallbackColor: text => theme.fg(\"muted\", text),\n    }, { filename: \"sample.png\", maxWidthCells: 30, maxHeightCells: 4 });\n    function use(next: typeof protocol) {\n      protocol = next;\n      setCapabilities({ ...detected, trueColor: true, hyperlinks: true, images: next });\n      image.invalidate(); tui.requestRender();\n    }\n    use(null); action(\"supported\", () => use(\"kitty\")); action(\"iterm\", () => use(\"iterm2\"));\n    return {\n      invalidate() { image.invalidate(); },\n      render(width) {\n        return [\n          ...new Text(theme.fg(\"accent\", \"Staged attachment · sample.png\"), 0, 0).render(width),\n          \"\", ...image.render(width), \"\",\n          ...new Text(theme.fg(\"dim\", getCapabilities().images === null\n            ? protocol === \"iterm2\" ? \"Fullscreen · iTerm2 text fallback\" : \"No graphics support · text retained\"\n            : \"PNG preview · \" + protocol), 0, 0).render(width),\n        ];\n      },\n      dispose() { setCapabilities(previous); },\n    };\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/presentation/image-parachute.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Image Parachute, Kitty PNG state, 40 columns, dark theme, 8 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": 352,
          "rows": 8,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/supported-40-dark.32014cbe6f5e.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Image Parachute, Kitty PNG state, 40 columns, light theme, 8 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": 352,
          "rows": 8,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/supported-40-light.c241a9a2c1f8.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Image Parachute, Kitty PNG state, 60 columns, dark theme, 8 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": 352,
          "rows": 8,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/supported-60-dark.3d1f69521699.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Image Parachute, Kitty PNG state, 60 columns, light theme, 8 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": 352,
          "rows": 8,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/supported-60-light.52ab315e6b80.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Image Parachute, Kitty PNG state, 80 columns, dark theme, 8 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": 352,
          "rows": 8,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/supported-80-dark.9a344bf059f2.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Image Parachute, Kitty PNG state, 80 columns, light theme, 8 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": 352,
          "rows": 8,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/supported-80-light.b79535a365df.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Image Parachute, Kitty PNG state, 120 columns, dark theme, 8 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": 352,
          "rows": 8,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/supported-120-dark.0a042b82782e.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Image Parachute, Kitty PNG state, 120 columns, light theme, 8 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": 352,
          "rows": 8,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/supported-120-light.65294bb37e2a.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show a generated synthetic thumbnail under supported Kitty capabilities.",
      "id": "supported",
      "label": "Kitty PNG",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Image Parachute, iTerm2 PNG state, 40 columns, dark theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-40-dark.8c384674eea9.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Image Parachute, iTerm2 PNG state, 40 columns, light theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-40-light.5c7e4d381459.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Image Parachute, iTerm2 PNG state, 60 columns, dark theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-60-dark.bc5a53667aa1.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Image Parachute, iTerm2 PNG state, 60 columns, light theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-60-light.2234b24fd519.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Image Parachute, iTerm2 PNG state, 80 columns, dark theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-80-dark.248424235682.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Image Parachute, iTerm2 PNG state, 80 columns, light theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-80-light.2177a0451d88.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Image Parachute, iTerm2 PNG state, 120 columns, dark theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-120-dark.e944e6416f05.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Image Parachute, iTerm2 PNG state, 120 columns, light theme, 9 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": 396,
          "rows": 9,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-120-light.98aeeaaa6ef4.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show the same thumbnail through the inline iTerm2 image protocol.",
      "id": "iterm",
      "label": "iTerm2 PNG",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Image Parachute, Text fallback state, 40 columns, dark theme, 5 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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/unsupported-40-dark.6d17bad0156b.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Image Parachute, Text fallback state, 40 columns, light theme, 5 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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/unsupported-40-light.e7da1fe303a4.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Image Parachute, Text fallback state, 60 columns, dark theme, 5 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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/unsupported-60-dark.b708ee45ce40.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Image Parachute, Text fallback state, 60 columns, light theme, 5 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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/unsupported-60-light.9aa8fc440573.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Image Parachute, Text fallback state, 80 columns, dark theme, 5 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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/unsupported-80-dark.4b73d2a5b9e2.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Image Parachute, Text fallback state, 80 columns, light theme, 5 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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/unsupported-80-light.1e63124bbabe.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Image Parachute, Text fallback state, 120 columns, dark theme, 5 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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/unsupported-120-dark.921830fd4f5d.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Image Parachute, Text fallback state, 120 columns, light theme, 5 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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/unsupported-120-light.42214972a426.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show a meaningful placeholder when image support is absent.",
      "id": "unsupported",
      "label": "Text fallback",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Image Parachute, Fullscreen iTerm2 state, 40 columns, dark theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-fullscreen-40-dark.078300825ee0.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Image Parachute, Fullscreen iTerm2 state, 40 columns, light theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-fullscreen-40-light.e4300c8bf73a.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Image Parachute, Fullscreen iTerm2 state, 60 columns, dark theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-fullscreen-60-dark.ab207580ae90.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Image Parachute, Fullscreen iTerm2 state, 60 columns, light theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-fullscreen-60-light.ae1c4b538252.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Image Parachute, Fullscreen iTerm2 state, 80 columns, dark theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-fullscreen-80-dark.8a4c7ce92d0e.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Image Parachute, Fullscreen iTerm2 state, 80 columns, light theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-fullscreen-80-light.bb201d735e37.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Image Parachute, Fullscreen iTerm2 state, 120 columns, dark theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-fullscreen-120-dark.bf5f69f6b0ba.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Image Parachute, Fullscreen iTerm2 state, 120 columns, light theme, 10 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": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/image-parachute/iterm-fullscreen-120-light.a6b122b083df.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "In fullscreen, Pi switches iTerm2 images to the text fallback and restores them when fullscreen ends.",
      "id": "iterm-fullscreen",
      "label": "Fullscreen iTerm2",
      "problems": []
    }
  ],
  "structure": "image + capabilities + mode\n  supported -> image\n  otherwise -> placeholder",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/image-parachute/dark.40bdb0db7a9d.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/image-parachute/light.a6a12109cd8b.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/image-parachute/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}