{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Display-column fitting"
  ],
  "animated": false,
  "apis": [
    {
      "name": "visibleWidth",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "truncateToWidth",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "sliceByColumn",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "wrapTextWithAnsi",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    }
  ],
  "applicability": [
    "Use this when rows contain ANSI styling, emoji or wide characters."
  ],
  "category": "layout",
  "categoryLabel": "Layout",
  "consequences": [
    "Styled and wide text aligns in display columns.",
    "Truncation or wrapping changes how much text is visible."
  ],
  "family": "structural",
  "familyLabel": "Structural",
  "id": "column-gauge",
  "implementation": [
    "String length does not measure terminal columns.",
    "Padding alone does not clip an oversized label."
  ],
  "intent": "Fit styled text to terminal columns before padding or framing it.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/column-gauge.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": "nico-truncate-padding",
      "moreRefs": 0,
      "refs": [
        {
          "file": "packages/tui/src/utils.ts",
          "lines": "1-65",
          "sha": "d29f268f",
          "url": "https://github.com/earendil-works/pi/blob/d29f268f4662fc138cc87b23b7e6c45a4e0fe57b/packages/tui/src/utils.ts#L1-L65"
        }
      ],
      "repo": "earendil-works/pi",
      "repoUrl": "https://github.com/earendil-works/pi",
      "title": "Optionally pad truncated text to exact terminal width"
    },
    {
      "example": "width-aware-lines",
      "moreRefs": 0,
      "refs": [
        {
          "file": "extensions/pi-autoresearch/index.ts",
          "lines": "645-676",
          "sha": "22bd30b1",
          "url": "https://github.com/nicobailon/pi-autoresearch/blob/22bd30b19482f2be5936031b2c6b149115779f16/extensions/pi-autoresearch/index.ts#L645-L676"
        }
      ],
      "repo": "pi-autoresearch",
      "repoUrl": "https://github.com/nicobailon/pi-autoresearch",
      "title": "Render to the available width and bound vertical output"
    },
    {
      "example": "width-aware-lines",
      "moreRefs": 0,
      "refs": [
        {
          "file": "todo-widget.ts",
          "lines": "5-8",
          "sha": "92b4c9c3",
          "url": "https://github.com/nicobailon/pi-memory-workbench/blob/92b4c9c3ad07841418d77118bf8bd02ad204f7c4/todo-widget.ts#L5-L8"
        }
      ],
      "repo": "pi-memory-workbench",
      "repoUrl": "https://github.com/nicobailon/pi-memory-workbench",
      "title": "Render to the available width and bound vertical output"
    },
    {
      "example": "width-aware-lines",
      "moreRefs": 0,
      "refs": [
        {
          "file": "index.ts",
          "lines": "1108-1150",
          "sha": "859dee67",
          "url": "https://github.com/nicobailon/pi-powerline-footer/blob/859dee671b633fb533b07ceba3e6c1ab1c43360a/index.ts#L1108-L1150"
        }
      ],
      "repo": "pi-powerline-footer",
      "repoUrl": "https://github.com/nicobailon/pi-powerline-footer",
      "title": "Render to the available width and bound vertical output"
    }
  ],
  "linkedFrom": [
    {
      "how": "fits each composed row",
      "id": "hinge-panel",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/hinge-panel.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/hinge-panel.md",
      "name": "Hinge Panel",
      "url": "https://pi-tui.ratstack.sh/patterns/hinge-panel/"
    }
  ],
  "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/column-gauge.md",
  "motivation": "Pi Intercom's session rows contain styled labels and paths that must fit fixed-width frames.",
  "name": "Column Gauge",
  "participants": [
    {
      "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": "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": "sliceByColumn",
      "role": "Slices text by terminal columns.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "wrapTextWithAnsi",
      "role": "Wraps text while preserving styling across lines.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "Row budget",
      "role": "Allocates columns before content is padded or framed.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "supplies fitted rows",
      "id": "hinge-panel",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/hinge-panel.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/hinge-panel.md",
      "name": "Hinge Panel",
      "url": "https://pi-tui.ratstack.sh/patterns/hinge-panel/"
    }
  ],
  "sampleCode": {
    "code": "// Column Gauge: fit styled text to display columns before framing or padding.\nimport { sliceByColumn, truncateToWidth, visibleWidth, wrapTextWithAnsi, type Component } from \"@earendil-works/pi-tui\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nexport const story: PatternStory = {\n  id: \"column-gauge\", title: \"Column Gauge\", kind: \"component\",\n  apis: [\"visibleWidth\", \"truncateToWidth\", \"sliceByColumn\", \"wrapTextWithAnsi\"],\n  rows: 12,\n  states: [\n    { id: \"default\", label: \"Styled row\" },\n    { id: \"padded\", label: \"Exact-width row\", steps: [{ type: \"action\", name: \"pad\" }] },\n    { id: \"dont-string-length\", label: \"Don't: count characters\",\n      steps: [{ type: \"action\", name: \"count-characters\" }], expectFail: [\"width\"] },\n  ],\n  setup({ theme, action, tui }) {\n    let mode: \"fit\" | \"pad\" | \"characters\" = \"fit\";\n    action(\"pad\", () => { mode = \"pad\"; tui.requestRender(); });\n    action(\"count-characters\", () => { mode = \"characters\"; tui.requestRender(); });\n    const path = \"src/workflows/synthetic-session/界面/preview.ts\";\n    const component: Component = {\n      invalidate() {},\n      render(width) {\n        const budget = width - 4; // Two borders and two spaces belong to the frame.\n        const styled = theme.fg(\"accent\", \"界面 🐀 \") + theme.fg(\"text\", path);\n        const fit = (text: string) => truncateToWidth(text, budget, \"…\", true);\n        // Deliberately wrong: one character can occupy two display columns.\n        const row = mode === \"characters\"\n          ? theme.fg(\"warning\", \"界\".repeat(width).slice(0, budget))\n          : mode === \"pad\" ? fit(theme.fg(\"success\", \"✓ Ready\")) : fit(styled);\n        const frame = [\n          theme.fg(\"border\", \"┌\" + \"─\".repeat(width - 2) + \"┐\"),\n          theme.fg(\"border\", \"│ \") + row + theme.fg(\"border\", \" │\"),\n          theme.fg(\"border\", \"└\" + \"─\".repeat(width - 2) + \"┘\"),\n        ];\n        return [\n          theme.fg(\"accent\", \"Column Gauge · session preview\"),\n          ...frame,\n          theme.fg(\"muted\", truncateToWidth(\n            \"Measured: \" + visibleWidth(row) + \" / \" + budget + \" columns\", width)),\n          theme.fg(\"dim\", \"Slice by columns:\"),\n          theme.fg(\"text\", sliceByColumn(styled, 0, Math.min(budget, 24), true)),\n          ...wrapTextWithAnsi(theme.fg(\"muted\",\n            mode === \"characters\" ? \"Character slicing lets wide glyphs escape the frame.\"\n              : \"Measure, clip, then pad. ANSI styles use no columns.\"), width)\n            .map(line => theme.fg(\"muted\", line)), // Close each independently composable line.\n        ];\n      },\n    };\n    return component;\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/structural/column-gauge.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Column Gauge, Styled row 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/column-gauge/default-40-dark.7b8a8189db2a.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Column Gauge, Styled row 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/column-gauge/default-40-light.6d3dea1e998c.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Column Gauge, Styled row 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/column-gauge/default-60-dark.237e2aaa0fbf.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Column Gauge, Styled row 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/column-gauge/default-60-light.26456b3fe97d.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Column Gauge, Styled row 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/column-gauge/default-80-dark.95955789bfaf.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Column Gauge, Styled row 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/column-gauge/default-80-light.b04dce78566e.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Column Gauge, Styled row 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/column-gauge/default-120-dark.7695ca6f6aa8.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Column Gauge, Styled row 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/column-gauge/default-120-light.a127cb2ea1e2.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Fit a coloured row containing wide glyphs and a long synthetic path.",
      "id": "default",
      "label": "Styled row",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Column Gauge, Exact-width row 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/column-gauge/padded-40-dark.0830dc8ea86c.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Column Gauge, Exact-width row 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/column-gauge/padded-40-light.34971dbb4fd3.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Column Gauge, Exact-width row 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/column-gauge/padded-60-dark.e898fa43865a.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Column Gauge, Exact-width row 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/column-gauge/padded-60-light.fb2840cb6253.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Column Gauge, Exact-width row 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/column-gauge/padded-80-dark.5fc515fbdfd9.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Column Gauge, Exact-width row 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/column-gauge/padded-80-light.8bcee53834cd.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Column Gauge, Exact-width row 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/column-gauge/padded-120-dark.7e6cb49e15e6.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Column Gauge, Exact-width row 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/column-gauge/padded-120-light.78d1d2820fe2.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Pad short text to the same width as a clipped row.",
      "id": "padded",
      "label": "Exact-width row",
      "problems": []
    },
    {
      "dont": true,
      "expectFail": [
        "width"
      ],
      "frames": [
        {
          "alt": "Column Gauge, Don't: count characters state, 40 columns, dark theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [
                "line 3, column 41: frame 0: visibleWidth=76, limit=40",
                "line 4, column 1: frame 0: headless terminal row is wrapped (physical row)"
              ],
              "name": "width",
              "status": "fail",
              "verdict": "expected-fail"
            },
            {
              "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/column-gauge/dont-string-length-40-dark.f9e3c8b2e3f8.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Column Gauge, Don't: count characters state, 40 columns, light theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [
                "line 3, column 41: frame 0: visibleWidth=76, limit=40",
                "line 4, column 1: frame 0: headless terminal row is wrapped (physical row)"
              ],
              "name": "width",
              "status": "fail",
              "verdict": "expected-fail"
            },
            {
              "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/column-gauge/dont-string-length-40-light.d3049ed9bd8d.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Column Gauge, Don't: count characters state, 60 columns, dark theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [
                "line 3, column 61: frame 0: visibleWidth=116, limit=60",
                "line 4, column 1: frame 0: headless terminal row is wrapped (physical row)"
              ],
              "name": "width",
              "status": "fail",
              "verdict": "expected-fail"
            },
            {
              "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/column-gauge/dont-string-length-60-dark.d7cde133c2b6.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Column Gauge, Don't: count characters state, 60 columns, light theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [
                "line 3, column 61: frame 0: visibleWidth=116, limit=60",
                "line 4, column 1: frame 0: headless terminal row is wrapped (physical row)"
              ],
              "name": "width",
              "status": "fail",
              "verdict": "expected-fail"
            },
            {
              "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/column-gauge/dont-string-length-60-light.7859a037b487.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Column Gauge, Don't: count characters state, 80 columns, dark theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [
                "line 3, column 81: frame 0: visibleWidth=156, limit=80",
                "line 4, column 1: frame 0: headless terminal row is wrapped (physical row)"
              ],
              "name": "width",
              "status": "fail",
              "verdict": "expected-fail"
            },
            {
              "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/column-gauge/dont-string-length-80-dark.97c4260d96c7.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Column Gauge, Don't: count characters state, 80 columns, light theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [
                "line 3, column 81: frame 0: visibleWidth=156, limit=80",
                "line 4, column 1: frame 0: headless terminal row is wrapped (physical row)"
              ],
              "name": "width",
              "status": "fail",
              "verdict": "expected-fail"
            },
            {
              "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/column-gauge/dont-string-length-80-light.c8cbf92392e3.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Column Gauge, Don't: count characters state, 120 columns, dark theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [
                "line 3, column 121: frame 0: visibleWidth=236, limit=120",
                "line 4, column 1: frame 0: headless terminal row is wrapped (physical row)"
              ],
              "name": "width",
              "status": "fail",
              "verdict": "expected-fail"
            },
            {
              "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/column-gauge/dont-string-length-120-dark.aa7976a53ba7.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Column Gauge, Don't: count characters state, 120 columns, light theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [
                "line 3, column 121: frame 0: visibleWidth=236, limit=120",
                "line 4, column 1: frame 0: headless terminal row is wrapped (physical row)"
              ],
              "name": "width",
              "status": "fail",
              "verdict": "expected-fail"
            },
            {
              "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/column-gauge/dont-string-length-120-light.e95cd269b216.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Fit wide glyphs with string slicing so the row exceeds its display-column budget.",
      "id": "dont-string-length",
      "label": "Don't: count characters",
      "problems": []
    }
  ],
  "structure": "text -> measure -> fit -> pad",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/column-gauge/dark.be2b8188315b.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/column-gauge/light.5d762061ba1e.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/column-gauge/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}