{
  "$schema": "https://pi-tui.ratstack.sh/schema/pattern.schema.json",
  "aka": [
    "Pause controls"
  ],
  "animated": true,
  "apis": [
    {
      "name": "Component",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "matchesKey",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#handle-keyboard-input-and-focus"
    },
    {
      "name": "TUI.requestRender",
      "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 a live view must stop changing while remaining interactive."
  ],
  "category": "keys",
  "categoryLabel": "Keys and focus",
  "consequences": [
    "A live view can stop changing while remaining interactive.",
    "Input remains active and the cited games do not demonstrate release events."
  ],
  "family": "behavioral",
  "familyLabel": "Behavioral",
  "id": "pause-latch",
  "implementation": [
    "Expose control hints in the rendered view.",
    "The cited games do not demonstrate key-release handling."
  ],
  "intent": "Keep pause, resume and quit controls inside the component input contract.",
  "jsonUrl": "https://pi-tui.ratstack.sh/patterns/pause-latch.json",
  "kind": "component",
  "knownUses": [
    {
      "example": "arcade-key-input-and-pause",
      "moreRefs": 0,
      "refs": [
        {
          "file": "arcade/tetris.ts",
          "lines": "395-470",
          "sha": "bca5070b",
          "url": "https://github.com/nicobailon/pi-extensions/blob/bca5070b541ffa7d273e74036dcd7d5f8b63eed3/arcade/tetris.ts#L395-L470"
        },
        {
          "file": "arcade/ping.ts",
          "lines": "349-426",
          "sha": "bca5070b",
          "url": "https://github.com/nicobailon/pi-extensions/blob/bca5070b541ffa7d273e74036dcd7d5f8b63eed3/arcade/ping.ts#L349-L426"
        },
        {
          "file": "arcade/picman.ts",
          "lines": "248-263",
          "sha": "bca5070b",
          "url": "https://github.com/nicobailon/pi-extensions/blob/bca5070b541ffa7d273e74036dcd7d5f8b63eed3/arcade/picman.ts#L248-L263"
        },
        {
          "file": "arcade/spice-invaders.ts",
          "lines": "834-910",
          "sha": "bca5070b",
          "url": "https://github.com/nicobailon/pi-extensions/blob/bca5070b541ffa7d273e74036dcd7d5f8b63eed3/arcade/spice-invaders.ts#L834-L910"
        },
        {
          "file": "arcade/badlogic-game/badlogic-game.ts",
          "lines": "172-200",
          "sha": "bca5070b",
          "url": "https://github.com/nicobailon/pi-extensions/blob/bca5070b541ffa7d273e74036dcd7d5f8b63eed3/arcade/badlogic-game/badlogic-game.ts#L172-L200"
        }
      ],
      "repo": "pi-extensions",
      "repoUrl": "https://github.com/nicobailon/pi-extensions",
      "title": "Arcade: input handling and pause state"
    }
  ],
  "linkedFrom": [
    {
      "how": "suspends change while preserving input",
      "id": "tick-heart",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/tick-heart.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/tick-heart.md",
      "name": "Tick Heart",
      "url": "https://pi-tui.ratstack.sh/patterns/tick-heart/"
    }
  ],
  "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/pause-latch.md",
  "motivation": "Nico's arcade components need to pause local activity without losing quit and resume controls.",
  "name": "Pause Latch",
  "participants": [
    {
      "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": "matchesKey",
      "role": "Recognizes explicit terminal key combinations.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#handle-keyboard-input-and-focus"
    },
    {
      "name": "TUI.requestRender",
      "role": "Requests a coalesced redraw after state changes.",
      "url": "https://github.com/earendil-works/pi/blob/v1.0.3/packages/coding-agent/docs/tui.md#understand-the-component-model"
    },
    {
      "name": "Pause state",
      "role": "Stops local change without disabling resume and quit.",
      "url": null
    }
  ],
  "pi": "1.0.3",
  "related": [
    {
      "how": "advances the live state",
      "id": "tick-heart",
      "jsonUrl": "https://pi-tui.ratstack.sh/patterns/tick-heart.json",
      "mdUrl": "https://pi-tui.ratstack.sh/patterns/tick-heart.md",
      "name": "Tick Heart",
      "url": "https://pi-tui.ratstack.sh/patterns/tick-heart/"
    }
  ],
  "sampleCode": {
    "code": "// Pause Latch: freeze local ticks without disabling resume or quit.\n// Machine: running --p--> paused --p--> running; either --q--> closed.\nimport { matchesKey, truncateToWidth, type Component } from \"@earendil-works/pi-tui\";\nimport type { PatternStory } from \"../../../src/pattern.ts\";\n\nexport const story: PatternStory = {\n  id: \"pause-latch\",\n  title: \"Pause Latch\",\n  kind: \"component\",\n  apis: [\"Component\", \"matchesKey\", \"TUI.requestRender\"],\n  rows: 7,\n  states: [\n    { id: \"running\", label: \"Running view\", animated: true, steps: [{ type: \"tick\", ms: 900 }] },\n    { id: \"paused\", label: \"Paused view\", animated: true, steps: [\n      { type: \"keys\", data: \"p\" }, { type: \"tick\", ms: 600 },\n    ] },\n    { id: \"resumed\", label: \"Resumed view\", animated: true, steps: [\n      { type: \"keys\", data: \"p\" }, { type: \"tick\", ms: 900 },\n    ] },\n  ],\n  setup({ theme, tui }) {\n    let mode: \"running\" | \"paused\" | \"closed\" = \"running\";\n    let ticks = 0;\n    const timer = setInterval(() => {\n      if (mode !== \"running\") return;\n      ticks++;\n      tui.requestRender();\n    }, 150);\n    const latch: Component & { dispose(): void } = {\n      invalidate() {},\n      dispose() { clearInterval(timer); },\n      handleInput(data) {\n        if (matchesKey(data, \"q\")) { mode = \"closed\"; clearInterval(timer); }\n        else if (matchesKey(data, \"p\") && mode !== \"closed\") mode = mode === \"running\" ? \"paused\" : \"running\";\n        tui.requestRender();\n      },\n      render(width) {\n        const position = ticks % 16;\n        const track = \"·\".repeat(position) + \"◆\" + \"·\".repeat(15 - position);\n        return [\n          theme.fg(\"accent\", \"Pause Latch · local simulation\"),\n          theme.fg(mode === \"running\" ? \"success\" : \"warning\", mode.toUpperCase() + \" · tick \" + ticks),\n          theme.fg(\"accent\", \"[\" + track + \"]\"),\n          theme.fg(\"text\", \"Parser scan · one marker per tick\"),\n          theme.fg(\"muted\", truncateToWidth(mode === \"paused\" ? \"p resume · q quit · ticks frozen\" : \"p pause · q quit\", width)),\n        ];\n      },\n    };\n    return latch;\n  },\n};\n",
    "lang": "ts",
    "path": "stories/patterns/behavioral/pause-latch.ts"
  },
  "states": [
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Pause Latch, Running view state, 40 columns, dark theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/running-40-dark.anim.00dbceff6376.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/running-40-dark.1335446eae5b.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Pause Latch, Running view state, 40 columns, light theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/running-40-light.anim.df2144e8af5d.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/running-40-light.b262621a0053.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Pause Latch, Running view state, 60 columns, dark theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/running-60-dark.anim.8890e31e5414.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/running-60-dark.b674ab662a13.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Pause Latch, Running view state, 60 columns, light theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/running-60-light.anim.9aa08adffcd1.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/running-60-light.4856dcc10388.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Pause Latch, Running view state, 80 columns, dark theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/running-80-dark.anim.a88f98926b9a.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/running-80-dark.e9f8bca8e01b.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Pause Latch, Running view state, 80 columns, light theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/running-80-light.anim.56e3cbb98901.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/running-80-light.10ebd4afd2e7.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Pause Latch, Running view state, 120 columns, dark theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/running-120-dark.anim.82e5e9521c20.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/running-120-dark.b2fde891809b.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Pause Latch, Running view state, 120 columns, light theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/running-120-light.anim.f2a839570be0.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/running-120-light.b76736d7f79d.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Show a synthetic moving progress marker with pause and quit hints.",
      "id": "running",
      "label": "Running view",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Pause Latch, Paused view state, 40 columns, dark theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-40-dark.anim.fa8fbc878d65.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-40-dark.4a811001bd9f.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Pause Latch, Paused view state, 40 columns, light theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-40-light.anim.d58537e98c20.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-40-light.98f689af1fd7.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Pause Latch, Paused view state, 60 columns, dark theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-60-dark.anim.e0ee296ce97a.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-60-dark.4fdc7f9dbe0f.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Pause Latch, Paused view state, 60 columns, light theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-60-light.anim.319a0302b1d0.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-60-light.9be4fa19f184.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Pause Latch, Paused view state, 80 columns, dark theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-80-dark.anim.3c19c32e1301.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-80-dark.ddf9d3ed2183.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Pause Latch, Paused view state, 80 columns, light theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-80-light.anim.17aa9feb440e.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-80-light.fbb0127045c9.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Pause Latch, Paused view state, 120 columns, dark theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-120-dark.anim.b77bd214d790.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-120-dark.f533baadd6bb.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Pause Latch, Paused view state, 120 columns, light theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-120-light.anim.c7ce7700e52e.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/paused-120-light.3e53df577436.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Stop its movement while still accepting resume and quit.",
      "id": "paused",
      "label": "Paused view",
      "problems": []
    },
    {
      "dont": false,
      "expectFail": [],
      "frames": [
        {
          "alt": "Pause Latch, Resumed view state, 40 columns, dark theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-40-dark.anim.62694d297e19.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-40-dark.c863f6edb2fb.webp",
          "theme": "dark",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Pause Latch, Resumed view state, 40 columns, light theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-40-light.anim.48fb049567c1.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-40-light.394a14313605.webp",
          "theme": "light",
          "w": 800,
          "width": 40
        },
        {
          "alt": "Pause Latch, Resumed view state, 60 columns, dark theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-60-dark.anim.a0aa87b36eea.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-60-dark.6ec5d5d799cd.webp",
          "theme": "dark",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Pause Latch, Resumed view state, 60 columns, light theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-60-light.anim.92d2a1c2aa09.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-60-light.64394d3f0f3f.webp",
          "theme": "light",
          "w": 1200,
          "width": 60
        },
        {
          "alt": "Pause Latch, Resumed view state, 80 columns, dark theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-80-dark.anim.5fbcaef92649.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-80-dark.8bc821f3bf12.webp",
          "theme": "dark",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Pause Latch, Resumed view state, 80 columns, light theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-80-light.anim.e1e4187a2037.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-80-light.b4b99821f783.webp",
          "theme": "light",
          "w": 1600,
          "width": 80
        },
        {
          "alt": "Pause Latch, Resumed view state, 120 columns, dark theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-120-dark.anim.d7bebfe504a9.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-120-dark.d00fc3a56657.webp",
          "theme": "dark",
          "w": 2400,
          "width": 120
        },
        {
          "alt": "Pause Latch, Resumed view state, 120 columns, light theme, 5 rows, animated",
          "animated": true,
          "animation": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-120-light.anim.ade3cbd5a932.webp",
          "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": 220,
          "rows": 5,
          "still": "https://pi-tui.ratstack.sh/frames/pause-latch/resumed-120-light.49969f02f1b2.webp",
          "theme": "light",
          "w": 2400,
          "width": 120
        }
      ],
      "how": "Resume movement without recreating the interaction.",
      "id": "resumed",
      "label": "Resumed view",
      "problems": []
    }
  ],
  "structure": "running -> pause -> paused\npaused -> resume -> running\nany state -> quit",
  "thumbnails": {
    "dark": {
      "animation": "https://pi-tui.ratstack.sh/thumbs/pause-latch/dark.anim.625f887678be.webp",
      "src": "https://pi-tui.ratstack.sh/thumbs/pause-latch/dark.957cc9eb4737.webp"
    },
    "light": {
      "animation": "https://pi-tui.ratstack.sh/thumbs/pause-latch/light.anim.0c3caf3dc1c8.webp",
      "src": "https://pi-tui.ratstack.sh/thumbs/pause-latch/light.ba0d54990072.webp"
    }
  },
  "url": "https://pi-tui.ratstack.sh/patterns/pause-latch/",
  "widths": [
    40,
    60,
    80,
    120
  ]
}