{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Keyed widget"
  ],
  "animated": false,
  "apis": [
    {
      "name": "ctx.ui.setWidget",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#interact-with-the-user"
    },
    {
      "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
    }
  ],
  "applicability": [
    "Use this when persistent content belongs above or below the editor."
  ],
  "category": "status",
  "categoryLabel": "Status and widgets",
  "consequences": [
    "Content can be replaced under one stable near-editor key.",
    "The key and local component reference must be cleared together."
  ],
  "family": "structural",
  "familyLabel": "Structural",
  "id": "widget-dock",
  "implementation": [
    "Clear the widget and its local component reference together.",
    "Fit rendered rows to current terminal dimensions."
  ],
  "intent": "Mount and replace auxiliary content under a stable widget key.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/widget-dock.json",
  "kind": "screen",
  "knownUses": [
    {
      "example": "keyed-widget-lifecycle",
      "moreRefs": 0,
      "refs": [
        {
          "file": "extensions/command-center/index.ts",
          "lines": "410-458",
          "sha": "17cce138",
          "url": "https://github.com/nicobailon/dot314/blob/17cce138f3f687211d0485d204408a9650953c61/extensions/command-center/index.ts#L410-L458"
        }
      ],
      "repo": "dot314",
      "repoUrl": "https://github.com/nicobailon/dot314",
      "title": "Mount, update and remove keyed widgets"
    },
    {
      "example": "keyed-widget-lifecycle",
      "moreRefs": 0,
      "refs": [
        {
          "file": "index.ts",
          "lines": "3120-3185",
          "sha": "859dee67",
          "url": "https://github.com/nicobailon/pi-powerline-footer/blob/859dee671b633fb533b07ceba3e6c1ab1c43360a/index.ts#L3120-L3185"
        }
      ],
      "repo": "pi-powerline-footer",
      "repoUrl": "https://github.com/nicobailon/pi-powerline-footer",
      "title": "Mount, update and remove keyed widgets"
    },
    {
      "example": "keyed-widget-lifecycle",
      "moreRefs": 0,
      "refs": [
        {
          "file": "index.ts",
          "lines": "641-641",
          "sha": "9a077997",
          "url": "https://github.com/nicobailon/pi-web-access/blob/9a0779976ba47350be18f8cfacaffbe2a407113e/index.ts#L641-L641"
        },
        {
          "file": "index.ts",
          "lines": "1278-1304",
          "sha": "9a077997",
          "url": "https://github.com/nicobailon/pi-web-access/blob/9a0779976ba47350be18f8cfacaffbe2a407113e/index.ts#L1278-L1304"
        }
      ],
      "repo": "pi-web-access",
      "repoUrl": "https://github.com/nicobailon/pi-web-access",
      "title": "Mount, update and remove keyed widgets"
    },
    {
      "example": "background-session-widget",
      "moreRefs": 0,
      "refs": [
        {
          "file": "background-widget.ts",
          "lines": "24-106",
          "sha": "77df9a81",
          "url": "https://github.com/nicobailon/pi-interactive-shell/blob/77df9a8142a2f731635a4c5a01d68feecb5cced4/background-widget.ts#L24-L106"
        }
      ],
      "repo": "pi-interactive-shell",
      "repoUrl": "https://github.com/nicobailon/pi-interactive-shell",
      "title": "Show bounded background-session status below the editor"
    }
  ],
  "linkedFrom": [
    {
      "how": "provides the detail surface",
      "id": "signal-pair",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/signal-pair.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/signal-pair.md",
      "name": "Signal Pair",
      "url": "https://pi-tui.ratstack.sh/patterns/signal-pair/"
    }
  ],
  "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/widget-dock.md",
  "motivation": "Web Access and Powerline Footer install auxiliary content that must disappear when disabled.",
  "name": "Widget Dock",
  "participants": [
    {
      "name": "ctx.ui.setWidget",
      "role": "Mounts, replaces or clears one near-editor widget.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#interact-with-the-user"
    },
    {
      "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": "Widget owner",
      "role": "Keeps the keyed content and component reference in sync.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "replaces pending content with a result",
      "id": "result-relay",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/result-relay.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/result-relay.md",
      "name": "Result Relay",
      "url": "https://pi-tui.ratstack.sh/patterns/result-relay/"
    }
  ],
  "sampleCode": {
    "code": "// Widget Dock: replace keyed auxiliary content and clear its local reference together.\nimport { Text, truncateToWidth, type Component } from \"@earendil-works/pi-tui\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nexport const story: PatternStory = {\n  id: \"widget-dock\", title: \"Widget Dock\", kind: \"screen\",\n  apis: [\"ctx.ui.setWidget\", \"Text\", \"truncateToWidth\"],\n  states: [\n    { id: \"above\", label: \"Above editor\" },\n    { id: \"below\", label: \"Below editor\", steps: [{ type: \"action\", name: \"move-below\" }] },\n    { id: \"removed\", label: \"Removed\", steps: [{ type: \"action\", name: \"remove\" }] },\n  ],\n  setup({ ui, theme, action }) {\n    const widgetKey = \"preview\";\n    let mounted: Component | undefined;\n    const install = (placement: \"aboveEditor\" | \"belowEditor\") => {\n      ui.setWidget(widgetKey, (_tui, widgetTheme) => {\n        const text = new Text([\n          widgetTheme.fg(\"accent\", \"Task preview · 2/3\"),\n          widgetTheme.fg(\"success\", \"✓ Measure columns · ✓ Dark frame\"),\n          widgetTheme.fg(\"warning\", \"> Light frame queued\"),\n        ].join(\"\\n\"), 0, 0);\n        mounted = {\n          invalidate() { text.invalidate(); },\n          render(width) {\n            return text.render(width).slice(0, 3).map(line => truncateToWidth(line, width));\n          },\n        };\n        return mounted;\n      }, { placement });\n    };\n    const remove = () => {\n      ui.setWidget(widgetKey, undefined);\n      mounted = undefined; // Never retain a component after its key is removed.\n    };\n\n    ui.setEditorText(\"Review src/preview.ts\");\n    ui.setWidget(\"draft-hint\", [theme.fg(\"muted\", \"Review the draft before submitting.\")]);\n    install(\"aboveEditor\");\n    action(\"move-below\", () => {\n      mounted?.invalidate();\n      install(\"belowEditor\"); // Replacement uses the same owned key.\n    });\n    action(\"remove\", remove);\n    return () => { remove(); ui.setWidget(\"draft-hint\", undefined); };\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/structural/widget-dock.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Widget Dock, Above editor state, 40 columns, dark theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/above-40-dark.f451a630cdff.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Widget Dock, Above editor state, 40 columns, light theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/above-40-light.50addd361c78.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Widget Dock, Above editor state, 60 columns, dark theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/above-60-dark.5b3b929ee017.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Widget Dock, Above editor state, 60 columns, light theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/above-60-light.22684e147d41.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Widget Dock, Above editor state, 80 columns, dark theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/above-80-dark.689bb9c02990.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Widget Dock, Above editor state, 80 columns, light theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/above-80-light.6a7795bd566b.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Widget Dock, Above editor state, 120 columns, dark theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/above-120-dark.49d4ddd25e90.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Widget Dock, Above editor state, 120 columns, light theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/above-120-light.54f153fa0fe3.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Mount a compact synthetic progress widget above the editor.",
      "id": "above",
      "label": "Above editor",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Widget Dock, Below editor state, 40 columns, dark theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/below-40-dark.54fb0b099212.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Widget Dock, Below editor state, 40 columns, light theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/below-40-light.6aac73120cb1.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Widget Dock, Below editor state, 60 columns, dark theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/below-60-dark.f11785dffe83.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Widget Dock, Below editor state, 60 columns, light theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/below-60-light.c81cae5fa347.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Widget Dock, Below editor state, 80 columns, dark theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/below-80-dark.0c76300c2cc9.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Widget Dock, Below editor state, 80 columns, light theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/below-80-light.cc27a5904b66.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Widget Dock, Below editor state, 120 columns, dark theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/below-120-dark.78e05ea089a8.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Widget Dock, Below editor state, 120 columns, light theme, 13 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": 572,
          "rows": 13,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/below-120-light.5335148c065d.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show the same auxiliary content below the editor.",
      "id": "below",
      "label": "Below editor",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Widget Dock, Removed state, 40 columns, dark theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/removed-40-dark.c7314dd47abf.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Widget Dock, Removed state, 40 columns, light theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/removed-40-light.08857abb1e04.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Widget Dock, Removed state, 60 columns, dark theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/removed-60-dark.454ec9da805f.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Widget Dock, Removed state, 60 columns, light theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/removed-60-light.721c3b912e68.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Widget Dock, Removed state, 80 columns, dark theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/removed-80-dark.ceea56c5a9a2.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Widget Dock, Removed state, 80 columns, light theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/removed-80-light.6ad2d832553f.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Widget Dock, Removed state, 120 columns, dark theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/removed-120-dark.04984a0c6de8.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Widget Dock, Removed state, 120 columns, light theme, 10 rows",
          "animated": false,
          "animation": null,
          "checks": [
            {
              "evidence": [],
              "name": "width",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "style-leak",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "hard-coded-colour",
              "status": "pass",
              "verdict": "pass"
            },
            {
              "evidence": [],
              "name": "height",
              "status": "pass",
              "verdict": "pass"
            }
          ],
          "h": 440,
          "rows": 10,
          "still": "https://pi-tui.ratstack.sh/frames/widget-dock/removed-120-light.f053df9c91d7.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Clear its owned key without changing another widget.",
      "id": "removed",
      "label": "Removed",
      "problems": []
    }
  ],
  "structure": "owner -> widget key -> content\nupdate -> replace content\nend -> clear key",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/widget-dock/dark.e9720cbac0b4.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/widget-dock/light.d3330805ac30.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/widget-dock/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}