{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Staged draft"
  ],
  "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": "ctx.ui.setEditorComponent",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#interact-with-the-user"
    },
    {
      "name": "CustomEditor",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#handle-keyboard-input-and-focus"
    },
    {
      "name": "setWidget",
      "url": null
    },
    {
      "name": "setEditorComponent",
      "url": null
    },
    {
      "name": "matchesKey",
      "url": null
    }
  ],
  "applicability": [
    "Use this when a timeline includes editable work that has not been committed."
  ],
  "category": "editors",
  "categoryLabel": "Editors and drafts",
  "consequences": [
    "Uncommitted edits do not impersonate persisted queue values.",
    "Draft state and queue state require separate commit and cleanup paths."
  ],
  "family": "behavioral",
  "familyLabel": "Behavioral",
  "id": "draft-fence",
  "implementation": [
    "Do not render an unsaved draft as persisted queue state.",
    "Clear the queue widget when its queue becomes empty."
  ],
  "intent": "Keep inline draft edits separate from the committed queue snapshot.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/draft-fence.json",
  "kind": "screen",
  "knownUses": [
    {
      "example": "queue-steer-editor-widget-composition",
      "moreRefs": 0,
      "refs": [
        {
          "file": "extensions/pi-queue-steer/index.ts",
          "lines": "268-304",
          "sha": "17cce138",
          "url": "https://github.com/nicobailon/dot314/blob/17cce138f3f687211d0485d204408a9650953c61/extensions/pi-queue-steer/index.ts#L268-L304"
        },
        {
          "file": "extensions/pi-queue-steer/index.ts",
          "lines": "525-545",
          "sha": "17cce138",
          "url": "https://github.com/nicobailon/dot314/blob/17cce138f3f687211d0485d204408a9650953c61/extensions/pi-queue-steer/index.ts#L525-L545"
        }
      ],
      "repo": "dot314",
      "repoUrl": "https://github.com/nicobailon/dot314",
      "title": "Compose queue drafts and timeline widgets"
    }
  ],
  "linkedFrom": [
    {
      "how": "separates draft from committed state",
      "id": "draft-return",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/draft-return.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/draft-return.md",
      "name": "Draft Return",
      "url": "https://pi-tui.ratstack.sh/patterns/draft-return/"
    }
  ],
  "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/draft-fence.md",
  "motivation": "Dot314's queue-steer timeline must show committed queue data while inline edits remain drafts.",
  "name": "Draft Fence",
  "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": "ctx.ui.setEditorComponent",
      "role": "Installs the single custom editor factory.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/extensions.md#interact-with-the-user"
    },
    {
      "name": "CustomEditor",
      "role": "Preserves application controls for editor replacements.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#handle-keyboard-input-and-focus"
    },
    {
      "name": "Queue snapshot",
      "role": "Remains committed state while local drafts are edited.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "keeps unsubmitted text local",
      "id": "retry-buffer",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/retry-buffer.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/retry-buffer.md",
      "name": "Retry Buffer",
      "url": "https://pi-tui.ratstack.sh/patterns/retry-buffer/"
    }
  ],
  "sampleCode": {
    "code": "// Draft Fence: only an explicit commit moves editor text into the queue snapshot.\nimport { Text, matchesKey } from \"@earendil-works/pi-tui\";\nimport { CustomEditor } from \"@earendil-works/pi-coding-agent\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nexport const story: PatternStory = {\n  id: \"draft-fence\",\n  title: \"Draft Fence\",\n  kind: \"screen\",\n  apis: [\"setWidget\", \"setEditorComponent\", \"CustomEditor\", \"matchesKey\"],\n  states: [\n    { id: \"committed\", label: \"Queue snapshot\" },\n    { id: \"draft\", label: \"Uncommitted edit\", steps: [\n      { type: \"keys\", data: \"\\x15\" }, { type: \"text\", text: \"Review parser edge cases\" },\n    ] },\n    { id: \"committed-edit\", label: \"Edit committed\", steps: [{ type: \"keys\", data: \"\\r\" }] },\n  ],\n  setup({ ui, theme }) {\n    let queueSnapshot = \"Review parser tests\";\n    ui.setHeader(() => new Text(theme.fg(\"accent\", \"Pi · Draft Fence\"), 0, 0));\n    function publishSnapshot() {\n      ui.setWidget(\"queue\", queueSnapshot ? [\n        theme.fg(\"accent\", \"Queue · COMMITTED\"),\n        theme.fg(\"text\", \"1 → \" + queueSnapshot),\n      ] : undefined);\n    }\n    publishSnapshot();\n    ui.setEditorComponent((tui, editorTheme, keys) => {\n      class StagedEditor extends CustomEditor {\n        handleInput(data: string) {\n          if (matchesKey(data, \"escape\")) {\n            this.setText(queueSnapshot);\n            ui.setStatus(\"draft\", theme.fg(\"muted\", \"edit discarded\"));\n          } else super.handleInput(data); // Keep Pi's normal app controls.\n          tui.requestRender();\n        }\n      }\n      const editor = new StagedEditor(tui, editorTheme, keys);\n      editor.onChange = draft => ui.setStatus(\"draft\",\n        theme.fg(draft === queueSnapshot ? \"success\" : \"warning\", draft === queueSnapshot ? \"matches queue\" : \"not committed\"));\n      editor.onSubmit = draft => {\n        queueSnapshot = draft;\n        publishSnapshot();\n        editor.setText(queueSnapshot);\n        ui.setStatus(\"draft\", theme.fg(\"success\", \"committed\"));\n      };\n      return editor;\n    });\n    ui.setEditorText(queueSnapshot);\n    ui.setWidget(\"draft-hint\", [\n      theme.fg(\"muted\", \"Editor = local draft · queue = saved\"),\n      theme.fg(\"dim\", \"Enter commit · Esc discard edit\"),\n    ], { placement: \"belowEditor\" });\n    return () => {\n      ui.setStatus(\"draft\", undefined);\n      ui.setWidget(\"queue\", undefined);\n      ui.setWidget(\"draft-hint\", undefined);\n      ui.setEditorComponent(undefined);\n    };\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/behavioral/draft-fence.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Draft Fence, Queue snapshot 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/draft-fence/committed-40-dark.521625eb4835.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Draft Fence, Queue snapshot 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/draft-fence/committed-40-light.afca8b5d9e2d.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Draft Fence, Queue snapshot 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/draft-fence/committed-60-dark.0dc60c3f880c.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Draft Fence, Queue snapshot 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/draft-fence/committed-60-light.608ea73dc861.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Draft Fence, Queue snapshot 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/draft-fence/committed-80-dark.7c712de14158.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Draft Fence, Queue snapshot 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/draft-fence/committed-80-light.f6d55049a6e5.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Draft Fence, Queue snapshot 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/draft-fence/committed-120-dark.a242f6429692.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Draft Fence, Queue snapshot 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/draft-fence/committed-120-light.ded7cb8c6c87.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show a synthetic queued item in the timeline.",
      "id": "committed",
      "label": "Queue snapshot",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Draft Fence, Uncommitted edit 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/draft-fence/draft-40-dark.3d1d84693e6e.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Draft Fence, Uncommitted edit 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/draft-fence/draft-40-light.d3f24d84a61c.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Draft Fence, Uncommitted edit 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/draft-fence/draft-60-dark.9b3939ebbe66.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Draft Fence, Uncommitted edit 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/draft-fence/draft-60-light.46ca702eb7bc.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Draft Fence, Uncommitted edit 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/draft-fence/draft-80-dark.d6f5fe7f7f8e.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Draft Fence, Uncommitted edit 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/draft-fence/draft-80-light.a7dd5e5bfd7b.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Draft Fence, Uncommitted edit 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/draft-fence/draft-120-dark.a3f03a789751.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Draft Fence, Uncommitted edit 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/draft-fence/draft-120-light.e3e61736d34c.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Edit its draft while the timeline still shows the committed value.",
      "id": "draft",
      "label": "Uncommitted edit",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Draft Fence, Edit committed 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/draft-fence/committed-edit-40-dark.e2f1be786883.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Draft Fence, Edit committed 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/draft-fence/committed-edit-40-light.88e06e9ccfb3.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Draft Fence, Edit committed 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/draft-fence/committed-edit-60-dark.b8c0c467aab3.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Draft Fence, Edit committed 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/draft-fence/committed-edit-60-light.7bee798a68b7.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Draft Fence, Edit committed 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/draft-fence/committed-edit-80-dark.8aee8ad8091c.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Draft Fence, Edit committed 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/draft-fence/committed-edit-80-light.1dab85b9503d.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Draft Fence, Edit committed 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/draft-fence/committed-edit-120-dark.67303d2d6b29.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Draft Fence, Edit committed 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/draft-fence/committed-edit-120-light.ae7f17bceb3f.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Apply the draft and update the timeline snapshot.",
      "id": "committed-edit",
      "label": "Edit committed",
      "problems": []
    }
  ],
  "structure": "queue snapshot -> timeline\ndraft -> editor\ncommit -> new snapshot",
  "thumbnails": {
    "dark": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/draft-fence/dark.e69e7ec5abc4.webp"
    },
    "light": {
      "animation": null,
      "src": "https://pi-tui.ratstack.sh/thumbs/draft-fence/light.ed34f70b114b.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/draft-fence/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}