feat: add automated Ink demo capture

.github/copilot-instructions.md

@@ -12,6 +12,7 @@
 - Test bundles are built via `build/build-test.js`.
 - Dependency security overrides live in `package.json` under `overrides` (immutable pinned to 5.1.5+).
 - GitHub workflows should stay triggerable for PRs and use job-level docs-only gating rather than workflow-level path filters so required checks do not remain pending.
+- GitLab merge request validation now lives in `.gitlab-ci.yml`; keep the workflow limited to `merge_request_event`, preserve the same docs-only short-circuit used by GitHub PR checks, and keep Cypress screenshot artifacts on failure.
 - Release automation is handled by `release-please`; keep `release-please-config.json` and `.release-please-manifest.json` aligned with the latest published tag, keep root tags in the existing plain `v*` format, and prefer Conventional Commit subjects (`fix:`, `feat:`, `deps:`) so release PRs are generated correctly.
 - Merged release PRs are finalized by `.github/workflows/release.yml`: the workflow detects `chore(main): release ink x.y.z` merges, creates the canonical `v*` tag plus a compatibility `ink-v*` tag, publishes the GitHub release from `v*`, and clears stale `autorelease:*` labels so the next release PR is not blocked.
 - Protected-branch repos should prefer a `RELEASE_PLEASE_TOKEN` PAT for the release workflow so bot-created release PRs trigger the normal PR checks.
@@ -31,3 +32,4 @@
 - Document Linter panel behavior now includes a `Rerun on change` toggle plus clickable section line links back into the editor. Preserve `handleEditorChanged()` in `src/app/document-linter/document-linter.ts` and keep the panel's line-jump buttons wired to the textarea selection logic when changing the panel UI.
 - Cogito and the Document Linter are mutually exclusive panels. Opening one should close the other so the editor split layout stays stable and never tries to render both sidebars together.
 - Editor view mode lives in `src/app/editor-preview.ts` and is wired through the main editor header in `ink.template.html`. Keep the Source/Split/Preview toggle in sync with `editorSplit`, `editorPane`, and `previewPane`, and preserve the `ink-editor-view-mode` localStorage key when changing that flow.
+- Demo capture is recorded by `build/record-demo.js` using headless Chrome DevTools so Cypress UI is never present; use `npm run demo:record` for a slow, full-viewport app-only `assets/demo/ink-demo.webm` plus MP4 when conversion is available, and `npm run demo:gif` for the optional ffmpeg GIF.

README.md

@@ -11,6 +11,10 @@ Ink is a functional and minimalistic webapp to write documents in markdown and e
 ![GitHub Pages](https://img.shields.io/badge/Deployed%20on-GitHub%20Pages-222222?logo=github&logoColor=white)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
+## Quick Demo
+
+![](assets/demo/ink-demo.gif)
+
 ## Repo Structure
 
 The structure of the repo is as follows:
@@ -32,6 +36,8 @@ build/
   assemble-single-file.js
   compile-and-assemble.js
   build-test.js
+  record-demo.js
+  export-demo-assets.js
   generate-favicons.js
   watch.js
   inject.js  (Compatibility alias)
@@ -40,6 +46,10 @@ assets/
   branding/
     logo.svg
     favicon.svg
+  demo/
+    ink-demo.webm
+    ink-demo.mp4
+    ink-demo.gif
 tests/
   qunit/
 cypress/
@@ -69,6 +79,24 @@ Canonical build entrypoint: `build/compile-and-assemble.js` (used by `npm run bu
 
 `npm run build` also regenerates favicon assets before assembling `ink-app.html`.
 
+## Demo Capture
+
+The project can record the first-use Ink flow as a reusable video asset:
+
+```bash
+npm run demo:record
+```
+
+The command starts the local test server, launches headless Chrome against the full Ink viewport, and writes a clean app-only recording to `assets/demo/ink-demo.webm`. When macOS `avconvert` can convert the browser recording, it also writes `assets/demo/ink-demo.mp4`. The demo shows opening a workspace, creating `getting-started.md`, writing markdown slowly, saving, and switching to the rendered preview.
+
+To generate a GIF from the recorded video, install `ffmpeg` and run:
+
+```bash
+npm run demo:gif
+```
+
+GIF output is written to `assets/demo/ink-demo.gif`. Keep the MP4 as the canonical demo asset because it is smaller and clearer than a full-app GIF.
+
 ## Workflow Cheat Sheet
 
 Use this sequence when working on the app:

package.json

@@ -20,6 +20,8 @@
     "watch": "node build/watch.js",
     "build:favicon": "node build/generate-favicons.js",
     "build:test": "node build/build-test.js",
+    "demo:record": "start-server-and-test \"npm run serve:test\" http://127.0.0.1:4173/ink-app.html \"node build/record-demo.js\"",
+    "demo:gif": "node build/export-demo-assets.js --gif",
     "test:qunit": "npm run build:test && qunit \"tests/qunit/**/*.test.js\"",
     "serve:test": "http-server . -p 4173 -s",
     "test:cypress": "start-server-and-test \"npm run serve:test\" http://127.0.0.1:4173/ink-app.html \"unset ELECTRON_RUN_AS_NODE; cypress run\"",