{ "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json", "aka": [ "Modal frame" ], "animated": false, "apis": [ { "name": "ctx.ui.custom", "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays" }, { "name": "OverlayOptions", "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays" }, { "name": "Component", "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": "Text", "url": null }, { "name": "visibleWidth", "url": null } ], "applicability": [ "Use this when several custom dialogs need the same title, border and controls." ], "category": "dialogs", "categoryLabel": "Overlays and dialogs", "consequences": [ "Different dialogs share borders, titles and controls.", "The frame still needs a small content and disposal contract." ], "family": "structural", "familyLabel": "Structural", "id": "shared-shell", "implementation": [ "Keep content state outside the shared frame.", "Clip titles before inserting them between borders.", "The source snapshot does not declare Pi 1.0.3 support." ], "intent": "Wrap specialized dialog content in a shared themed frame.", "jsonUrl": "https://pi-tui.ratstack.sh/patterns/shared-shell.json", "kind": "component", "knownUses": [ { "example": "zellij-modal-composable-frame", "moreRefs": 0, "refs": [ { "file": "src/zellij-modal.ts", "lines": "240-275", "sha": "fca8c858", "url": "https://github.com/nicobailon/pi-tool-display/blob/fca8c858a0989b63eba18ab935f3d8ed78354c3a/src/zellij-modal.ts#L240-L275" }, { "file": "src/zellij-modal.ts", "lines": "720-755", "sha": "fca8c858", "url": "https://github.com/nicobailon/pi-tool-display/blob/fca8c858a0989b63eba18ab935f3d8ed78354c3a/src/zellij-modal.ts#L720-L755" } ], "repo": "pi-tool-display", "repoUrl": "https://github.com/nicobailon/pi-tool-display", "title": "Zellij modal: reusable frame and content contract" } ], "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/shared-shell.md", "motivation": "Tool Display's Zellij modal reuses framing around specialized settings content.", "name": "Shared Shell", "participants": [ { "name": "ctx.ui.custom", "role": "Mounts one interaction and resolves through done.", "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays" }, { "name": "OverlayOptions", "role": "Defines overlay dimensions, placement and focus behavior.", "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#use-custom-screens-and-overlays" }, { "name": "Component", "role": "Renders width-bounded lines and invalidates cached output.", "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": "Content contract", "role": "Supplies specialized render, input and disposal behavior.", "url": null } ], "pi": "1.0.3", "related": [ { "how": "supplies specialized settings content", "id": "settings-bench", "jsonUrl": "https://pi-tui.ratstack.sh/patterns/settings-bench.json", "mdUrl": "https://pi-tui.ratstack.sh/patterns/settings-bench.md", "name": "Settings Bench", "url": "https://pi-tui.ratstack.sh/patterns/settings-bench/" } ], "sampleCode": { "code": "// Shared Shell: keep specialized content outside a reusable themed frame.\nimport { Text, truncateToWidth, visibleWidth, type Component } from \"@earendil-works/pi-tui\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\ntype ShellContent = { title: string; view: Component & { dispose?(): void } };\n\nexport const story: PatternStory = {\n id: \"shared-shell\", title: \"Shared Shell\", kind: \"component\",\n apis: [\"Component\", \"Text\", \"truncateToWidth\", \"visibleWidth\"],\n states: [\n { id: \"first\", label: \"First content\" },\n { id: \"second\", label: \"Different content\", steps: [{ type: \"action\", name: \"inspect\" }] },\n { id: \"dont-long-title\", label: \"Don't: unbounded title\",\n steps: [{ type: \"action\", name: \"long-title\" }], expectFail: [\"width\"] },\n ],\n setup({ theme, action, tui }) {\n const settings: ShellContent = { title: \"Preview settings\",\n view: new Text(theme.fg(\"text\", \"Theme: follows Pi\\nWidth: terminal columns\\nReview: both themes\"), 0, 0) };\n const inspection: ShellContent = { title: \"Inspect preview\",\n view: new Text(theme.fg(\"text\", \"File: src/preview.ts\\nResult: 8 frames ready\\nNext: inspect narrow layout\"), 0, 0) };\n let content = settings;\n let clipTitle = true;\n const replace = (next: ShellContent) => {\n content.view.dispose?.(); content = next; tui.requestRender();\n };\n action(\"inspect\", () => replace(inspection));\n action(\"long-title\", () => {\n content = { ...inspection, title: \"Inspect preview for the synthetic task workspace: render the light and dark task-list frames, compare the narrow and wide layouts, then review the sample code before publishing\" };\n clipTitle = false; tui.requestRender();\n });\n const shell = {\n invalidate() { content.view.invalidate(); },\n handleInput(data: string) { content.view.handleInput?.(data); tui.requestRender(); },\n dispose() { content.view.dispose?.(); },\n render(width: number) {\n const inner = width - 4;\n const title = clipTitle ? truncateToWidth(content.title, width - 6, \"…\") : content.title;\n const heading = \"┌─ \" + title + \" \" + \"─\".repeat(Math.max(0, width - visibleWidth(title) - 5)) + \"┐\";\n return [\n theme.fg(\"borderAccent\", heading),\n ...content.view.render(inner).map(line => theme.fg(\"border\", \"│ \") +\n truncateToWidth(line, inner, \"…\", true) + theme.fg(\"border\", \" │\")),\n theme.fg(\"border\", \"│ \") + theme.fg(\"muted\", truncateToWidth(\"Read-only view · shared frame\", inner, \"…\", true)) +\n theme.fg(\"border\", \" │\"),\n theme.fg(\"borderAccent\", \"└\" + \"─\".repeat(width - 2) + \"┘\"),\n ];\n },\n } satisfies Component & { dispose(): void };\n return shell;\n },\n};\n", "lang": "ts", "path": "stories/patterns/structural/shared-shell.ts" }, "states": [ { "dont": false, "expectFail": [], "frames": [ { "alt": "Shared Shell, First content state, 40 columns, dark theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/first-40-dark.6b888fd4038a.webp", "theme": "dark", "w": 800, "width": 40 }, { "alt": "Shared Shell, First content state, 40 columns, light theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/first-40-light.84ac309dcd84.webp", "theme": "light", "w": 800, "width": 40 }, { "alt": "Shared Shell, First content state, 60 columns, dark theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/first-60-dark.ff643e72e74e.webp", "theme": "dark", "w": 1200, "width": 60 }, { "alt": "Shared Shell, First content state, 60 columns, light theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/first-60-light.e84990a34ac6.webp", "theme": "light", "w": 1200, "width": 60 }, { "alt": "Shared Shell, First content state, 80 columns, dark theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/first-80-dark.1574f0e124dc.webp", "theme": "dark", "w": 1600, "width": 80 }, { "alt": "Shared Shell, First content state, 80 columns, light theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/first-80-light.7310fc2da497.webp", "theme": "light", "w": 1600, "width": 80 }, { "alt": "Shared Shell, First content state, 120 columns, dark theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/first-120-dark.2aa966a12500.webp", "theme": "dark", "w": 2400, "width": 120 }, { "alt": "Shared Shell, First content state, 120 columns, light theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/first-120-light.920e12ddd3a7.webp", "theme": "light", "w": 2400, "width": 120 } ], "how": "Show a framed synthetic settings view.", "id": "first", "label": "First content", "problems": [] }, { "dont": false, "expectFail": [], "frames": [ { "alt": "Shared Shell, Different content state, 40 columns, dark theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/second-40-dark.253aa46dd737.webp", "theme": "dark", "w": 800, "width": 40 }, { "alt": "Shared Shell, Different content state, 40 columns, light theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/second-40-light.9d1c0706095c.webp", "theme": "light", "w": 800, "width": 40 }, { "alt": "Shared Shell, Different content state, 60 columns, dark theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/second-60-dark.1432a3a84617.webp", "theme": "dark", "w": 1200, "width": 60 }, { "alt": "Shared Shell, Different content state, 60 columns, light theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/second-60-light.4f006fc58f7e.webp", "theme": "light", "w": 1200, "width": 60 }, { "alt": "Shared Shell, Different content state, 80 columns, dark theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/second-80-dark.d29ecf0239e5.webp", "theme": "dark", "w": 1600, "width": 80 }, { "alt": "Shared Shell, Different content state, 80 columns, light theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/second-80-light.7731f705d360.webp", "theme": "light", "w": 1600, "width": 80 }, { "alt": "Shared Shell, Different content state, 120 columns, dark theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/second-120-dark.3796f0b0cd8c.webp", "theme": "dark", "w": 2400, "width": 120 }, { "alt": "Shared Shell, Different content state, 120 columns, light theme, 6 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": 264, "rows": 6, "still": "https://pi-tui.ratstack.sh/frames/shared-shell/second-120-light.6bf6aafd6ce8.webp", "theme": "light", "w": 2400, "width": 120 } ], "how": "Reuse the frame around an inspection view.", "id": "second", "label": "Different content", "problems": [] }, { "dont": true, "expectFail": [ "width" ], "frames": [ { "alt": "Shared Shell, Don't: unbounded title state, 40 columns, dark theme, 10 rows", "animated": false, "animation": null, "checks": [ { "evidence": [ "line 1, column 41: frame 0: visibleWidth=181, limit=40", "line 2, column 1: frame 0: headless terminal row is wrapped (physical row)", "line 3, column 1: frame 0: headless terminal row is wrapped (physical row)", "line 4, column 1: frame 0: headless terminal row is wrapped (physical row)", "line 5, 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/shared-shell/dont-long-title-40-dark.6b70dcb7e54e.webp", "theme": "dark", "w": 800, "width": 40 }, { "alt": "Shared Shell, Don't: unbounded title state, 40 columns, light theme, 10 rows", "animated": false, "animation": null, "checks": [ { "evidence": [ "line 1, column 41: frame 0: visibleWidth=181, limit=40", "line 2, column 1: frame 0: headless terminal row is wrapped (physical row)", "line 3, column 1: frame 0: headless terminal row is wrapped (physical row)", "line 4, column 1: frame 0: headless terminal row is wrapped (physical row)", "line 5, 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/shared-shell/dont-long-title-40-light.ed91578e9a42.webp", "theme": "light", "w": 800, "width": 40 }, { "alt": "Shared Shell, Don't: unbounded title state, 60 columns, dark theme, 10 rows", "animated": false, "animation": null, "checks": [ { "evidence": [ "line 1, column 61: frame 0: visibleWidth=181, limit=60", "line 2, column 1: frame 0: headless terminal row is wrapped (physical row)", "line 3, column 1: frame 0: headless terminal row is wrapped (physical row)", "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/shared-shell/dont-long-title-60-dark.d19ec61a3bd8.webp", "theme": "dark", "w": 1200, "width": 60 }, { "alt": "Shared Shell, Don't: unbounded title state, 60 columns, light theme, 10 rows", "animated": false, "animation": null, "checks": [ { "evidence": [ "line 1, column 61: frame 0: visibleWidth=181, limit=60", "line 2, column 1: frame 0: headless terminal row is wrapped (physical row)", "line 3, column 1: frame 0: headless terminal row is wrapped (physical row)", "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/shared-shell/dont-long-title-60-light.f987b68b291f.webp", "theme": "light", "w": 1200, "width": 60 }, { "alt": "Shared Shell, Don't: unbounded title state, 80 columns, dark theme, 10 rows", "animated": false, "animation": null, "checks": [ { "evidence": [ "line 1, column 81: frame 0: visibleWidth=181, limit=80", "line 2, column 1: frame 0: headless terminal row is wrapped (physical row)", "line 3, 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/shared-shell/dont-long-title-80-dark.c3066d4b9789.webp", "theme": "dark", "w": 1600, "width": 80 }, { "alt": "Shared Shell, Don't: unbounded title state, 80 columns, light theme, 10 rows", "animated": false, "animation": null, "checks": [ { "evidence": [ "line 1, column 81: frame 0: visibleWidth=181, limit=80", "line 2, column 1: frame 0: headless terminal row is wrapped (physical row)", "line 3, 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/shared-shell/dont-long-title-80-light.4b7158b2655a.webp", "theme": "light", "w": 1600, "width": 80 }, { "alt": "Shared Shell, Don't: unbounded title state, 120 columns, dark theme, 10 rows", "animated": false, "animation": null, "checks": [ { "evidence": [ "line 1, column 121: frame 0: visibleWidth=181, limit=120", "line 2, 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/shared-shell/dont-long-title-120-dark.b98e6e9dbffb.webp", "theme": "dark", "w": 2400, "width": 120 }, { "alt": "Shared Shell, Don't: unbounded title state, 120 columns, light theme, 10 rows", "animated": false, "animation": null, "checks": [ { "evidence": [ "line 1, column 121: frame 0: visibleWidth=181, limit=120", "line 2, 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/shared-shell/dont-long-title-120-light.1bdacc3fd1ee.webp", "theme": "light", "w": 2400, "width": 120 } ], "how": "Place an untruncated long title between borders so it exceeds width.", "id": "dont-long-title", "label": "Don't: unbounded title", "problems": [] } ], "structure": "frame(title, theme)\n + content(render, input, dispose)\n -> custom overlay", "thumbnails": { "dark": { "animation": null, "src": "https://pi-tui.ratstack.sh/thumbs/shared-shell/dark.8ec3b5123d6f.webp" }, "light": { "animation": null, "src": "https://pi-tui.ratstack.sh/thumbs/shared-shell/light.3ae445eecbe9.webp" } }, "url": "https://pi-tui.ratstack.sh/patterns/shared-shell/", "widths": [ 40, 60, 80, 120 ] }