{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Windowed list"
  ],
  "animated": false,
  "apis": [
    {
      "name": "SelectList",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#compose-built-in-components"
    },
    {
      "name": "truncateToWidth",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "visibleWidth",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "matchesKey",
      "url": null
    }
  ],
  "applicability": [
    "Use this when a picker has more rows than its terminal view can show."
  ],
  "category": "lists",
  "categoryLabel": "Lists and pickers",
  "consequences": [
    "The selection stays visible without drawing the entire list.",
    "Physical rows, descriptions and hints share a limited budget."
  ],
  "family": "structural",
  "familyLabel": "Structural",
  "id": "row-window",
  "implementation": [
    "Budget physical rows rather than counting multi-line items.",
    "Keep clipping and position hints inside the width budget."
  ],
  "intent": "Keep the selected item inside a bounded moving list window.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/row-window.json",
  "kind": "component",
  "knownUses": [
    {
      "example": "session-list-window",
      "moreRefs": 0,
      "refs": [
        {
          "file": "ui/session-list.ts",
          "lines": "6-29",
          "sha": "a5fad4df",
          "url": "https://github.com/nicobailon/pi-intercom/blob/a5fad4df2a9fe4909bf4d9b06263c8316976b57d/ui/session-list.ts#L6-L29"
        },
        {
          "file": "ui/session-list.ts",
          "lines": "112-179",
          "sha": "a5fad4df",
          "url": "https://github.com/nicobailon/pi-intercom/blob/a5fad4df2a9fe4909bf4d9b06263c8316976b57d/ui/session-list.ts#L112-L179"
        }
      ],
      "repo": "pi-intercom",
      "repoUrl": "https://github.com/nicobailon/pi-intercom",
      "title": "Window session rows and truncate paths by visible width"
    },
    {
      "example": "skill-palette-incremental-filter",
      "moreRefs": 0,
      "refs": [
        {
          "file": "index.ts",
          "lines": "622-741",
          "sha": "a5c4429b",
          "url": "https://github.com/nicobailon/pi-skill-palette/blob/a5c4429b8c2e33ab903d07856497014f3d5ad34e/index.ts#L622-L741"
        }
      ],
      "repo": "pi-skill-palette",
      "repoUrl": "https://github.com/nicobailon/pi-skill-palette",
      "title": "Narrow palette results as the query grows"
    },
    {
      "example": "fuzzy-list-filtering",
      "moreRefs": 0,
      "refs": [
        {
          "file": "src/tui/render-helpers.ts",
          "lines": "1-29",
          "sha": "6826b054",
          "url": "https://github.com/nicobailon/pi-subagents/blob/6826b0545216077195ae8ffe468a6434715814b7/src/tui/render-helpers.ts#L1-L29"
        },
        {
          "file": "src/slash/selector.ts",
          "lines": "85-117",
          "sha": "6826b054",
          "url": "https://github.com/nicobailon/pi-subagents/blob/6826b0545216077195ae8ffe468a6434715814b7/src/slash/selector.ts#L85-L117"
        }
      ],
      "repo": "pi-subagents",
      "repoUrl": "https://github.com/nicobailon/pi-subagents",
      "title": "Rank selector choices by best matching field"
    }
  ],
  "linkedFrom": [],
  "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/row-window.md",
  "motivation": "Intercom's session picker shows multi-line entries inside a bounded selection window.",
  "name": "Row Window",
  "participants": [
    {
      "name": "SelectList",
      "role": "Owns a bounded selection list and selection callbacks.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#compose-built-in-components"
    },
    {
      "name": "truncateToWidth",
      "role": "Clips text to its allotted columns and can pad the result.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "visibleWidth",
      "role": "Measures rendered terminal columns rather than string length.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "Selection window",
      "role": "Keeps the highlight inside its physical-row budget.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "preserves identity when items change",
      "id": "identity-anchor",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/identity-anchor.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/identity-anchor.md",
      "name": "Identity Anchor",
      "url": "https://pi-tui.ratstack.sh/patterns/identity-anchor/"
    }
  ],
  "sampleCode": {
    "code": "import { matchesKey, truncateToWidth, visibleWidth, type Component } from \"@earendil-works/pi-tui\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\n// Original example: each entry consumes a title row and a detail row.\nexport const story: PatternStory = {\n  id: \"row-window\",\n  title: \"Row Window\",\n  kind: \"component\",\n  apis: [\"matchesKey\", \"truncateToWidth\", \"visibleWidth\"],\n  rows: 8,\n  states: [\n    { id: \"start\", label: \"First window\" },\n    { id: \"middle\", label: \"Moving window\", steps: [\n      { type: \"keys\", data: \"\\x1b[B\" }, { type: \"keys\", data: \"\\x1b[B\" }, { type: \"keys\", data: \"\\x1b[B\" },\n    ] },\n    { id: \"multiline\", label: \"Multi-line items\", steps: [{ type: \"action\", name: \"long-details\" }] },\n    { id: \"dont-count-items\", label: \"Don't: count entries as rows\", steps: [{ type: \"action\", name: \"count-items\" }], expectFail: [\"height\"] },\n  ],\n  setup(ctx) {\n    const entries = [\n      [\"🐀 Explore\", \"Read the synthetic brief and map the available pieces.\"],\n      [\"界 Sketch\", \"A CJK title still reserves two terminal columns.\"],\n      [\"Build\", \"Use a deliberately long description to prove truncation.\"],\n      [\"Test\", \"Move selection without growing the terminal window.\"],\n      [\"Review\", \"Keep the selected entry visible near the bottom.\"],\n      [\"Ship\", \"Six items do not mean six physical rows.\"],\n    ];\n    let selected = 0, countItems = false;\n    ctx.action(\"long-details\", () => { entries.forEach(entry => { entry[1] = \"Detailed task notes share the same physical-row budget and visible-width clipping.\"; }); });\n    ctx.action(\"count-items\", () => { countItems = true; });\n    const component: Component = {\n      invalidate() {},\n      handleInput(data) {\n        if (matchesKey(data, \"down\")) selected = Math.min(entries.length - 1, selected + 1);\n        if (matchesKey(data, \"up\")) selected = Math.max(0, selected - 1);\n        ctx.tui.requestRender();\n      },\n      render(width) {\n        const available = ctx.tui.terminal.rows - 2;\n        const count = countItems ? available : Math.max(1, Math.floor(available / 2));\n        const start = Math.max(0, Math.min(selected - count + 1, entries.length - count));\n        const lines = [ctx.theme.fg(\"accent\", \"Tasks · \" + (selected + 1) + \"/\" + entries.length)];\n        entries.slice(start, start + count).forEach(([title, detail], i) => {\n          const marker = start + i === selected ? \"> \" : \"  \";\n          const row = truncateToWidth(marker + title!, width);\n          if (visibleWidth(row) > width) throw new Error(\"Truncation invariant failed\");\n          lines.push(ctx.theme.fg(start + i === selected ? \"accent\" : \"text\", row));\n          lines.push(ctx.theme.fg(\"muted\", truncateToWidth(\"  \" + detail!, width)));\n        });\n        lines.push(ctx.theme.fg(countItems ? \"warning\" : \"dim\", truncateToWidth(\n          countItems ? \"Don't: six entries consume twelve rows\" : \"↑↓ select · two rows per entry\", width)));\n        return lines;\n      },\n    };\n    return component;\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/structural/row-window.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Row Window, First window 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/row-window/start-40-dark.656ab7cdfd4b.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Row Window, First window 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/row-window/start-40-light.ea5d38feb9a9.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Row Window, First window 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/row-window/start-60-dark.fac680469116.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Row Window, First window 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/row-window/start-60-light.903102e6e5c7.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Row Window, First window 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/row-window/start-80-dark.caca5b30c57f.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Row Window, First window 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/row-window/start-80-light.616d4e732000.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Row Window, First window 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/row-window/start-120-dark.789d957e4b74.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Row Window, First window 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/row-window/start-120-light.38f9abfbfa99.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show the first selected item and a clipped-list position hint.",
      "id": "start",
      "label": "First window",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Row Window, Moving window 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/row-window/middle-40-dark.28c9cc34e74f.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Row Window, Moving window 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/row-window/middle-40-light.d31664223567.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Row Window, Moving window 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/row-window/middle-60-dark.e8512692a390.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Row Window, Moving window 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/row-window/middle-60-light.4ce0673484ae.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Row Window, Moving window 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/row-window/middle-80-dark.278beee11332.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Row Window, Moving window 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/row-window/middle-80-light.26d61469393d.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Row Window, Moving window 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/row-window/middle-120-dark.b331457d78b3.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Row Window, Moving window 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/row-window/middle-120-light.3a95435bc029.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Move selection into the middle of a longer list.",
      "id": "middle",
      "label": "Moving window",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Row Window, Multi-line items 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/row-window/multiline-40-dark.43d787bae3da.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Row Window, Multi-line items 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/row-window/multiline-40-light.1c74ab8d1366.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Row Window, Multi-line items 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/row-window/multiline-60-dark.aa6815c9f0b0.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Row Window, Multi-line items 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/row-window/multiline-60-light.07dceb78a378.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Row Window, Multi-line items 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/row-window/multiline-80-dark.c54514d660c3.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Row Window, Multi-line items 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/row-window/multiline-80-light.07705985ba56.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Row Window, Multi-line items 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/row-window/multiline-120-dark.52ef65136c41.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Row Window, Multi-line items 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/row-window/multiline-120-light.6e62b3bbe93a.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Fit descriptions and hints into a fixed row budget.",
      "id": "multiline",
      "label": "Multi-line items",
      "problems": []
    },
    {
      "dont": true,
      "expectFail": [
        "height"
      ],
      "frames": [
        {
          "alt": "Row Window, Don't: count entries as rows state, 40 columns, dark theme, 14 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": [
                "line 9, column 1: frame 0: rendered rows=14, limit=8"
              ],
              "name": "height",
              "status": "fail",
              "verdict": "expected-fail"
            }
          ],
          "h": 616,
          "rows": 14,
          "still": "https://pi-tui.ratstack.sh/frames/row-window/dont-count-items-40-dark.51216f6c4492.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Row Window, Don't: count entries as rows state, 40 columns, light theme, 14 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": [
                "line 9, column 1: frame 0: rendered rows=14, limit=8"
              ],
              "name": "height",
              "status": "fail",
              "verdict": "expected-fail"
            }
          ],
          "h": 616,
          "rows": 14,
          "still": "https://pi-tui.ratstack.sh/frames/row-window/dont-count-items-40-light.48daf4185fcb.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Row Window, Don't: count entries as rows state, 60 columns, dark theme, 14 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": [
                "line 9, column 1: frame 0: rendered rows=14, limit=8"
              ],
              "name": "height",
              "status": "fail",
              "verdict": "expected-fail"
            }
          ],
          "h": 616,
          "rows": 14,
          "still": "https://pi-tui.ratstack.sh/frames/row-window/dont-count-items-60-dark.36196fa90d28.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Row Window, Don't: count entries as rows state, 60 columns, light theme, 14 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": [
                "line 9, column 1: frame 0: rendered rows=14, limit=8"
              ],
              "name": "height",
              "status": "fail",
              "verdict": "expected-fail"
            }
          ],
          "h": 616,
          "rows": 14,
          "still": "https://pi-tui.ratstack.sh/frames/row-window/dont-count-items-60-light.9d10234995e7.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Row Window, Don't: count entries as rows state, 80 columns, dark theme, 14 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": [
                "line 9, column 1: frame 0: rendered rows=14, limit=8"
              ],
              "name": "height",
              "status": "fail",
              "verdict": "expected-fail"
            }
          ],
          "h": 616,
          "rows": 14,
          "still": "https://pi-tui.ratstack.sh/frames/row-window/dont-count-items-80-dark.b82a05431d2a.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Row Window, Don't: count entries as rows state, 80 columns, light theme, 14 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": [
                "line 9, column 1: frame 0: rendered rows=14, limit=8"
              ],
              "name": "height",
              "status": "fail",
              "verdict": "expected-fail"
            }
          ],
          "h": 616,
          "rows": 14,
          "still": "https://pi-tui.ratstack.sh/frames/row-window/dont-count-items-80-light.8a6974f9672d.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Row Window, Don't: count entries as rows state, 120 columns, dark theme, 14 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": [
                "line 9, column 1: frame 0: rendered rows=14, limit=8"
              ],
              "name": "height",
              "status": "fail",
              "verdict": "expected-fail"
            }
          ],
          "h": 616,
          "rows": 14,
          "still": "https://pi-tui.ratstack.sh/frames/row-window/dont-count-items-120-dark.8d258d703ead.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Row Window, Don't: count entries as rows state, 120 columns, light theme, 14 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": [
                "line 9, column 1: frame 0: rendered rows=14, limit=8"
              ],
              "name": "height",
              "status": "fail",
              "verdict": "expected-fail"
            }
          ],
          "h": 616,
          "rows": 14,
          "still": "https://pi-tui.ratstack.sh/frames/row-window/dont-count-items-120-light.e65969bbd68b.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "",
      "id": "dont-count-items",
      "label": "Don't: count entries as rows",
      "problems": []
    }
  ],
  "structure": "items + selection -> window\nwindow -> fitted rows + hint",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/row-window/dark.c2740279bdd2.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/row-window/light.987578272fdf.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/row-window/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}