ui-doclisted

# Interactive UI documentation pages (ui-doc) Produce one interactive HTML page per WinForms screen: a 1:1 mockup of the dialog, numbered badges + arrows, click-to-explain controls, and an operation-sequence walkthrough wired both ways. Output is a single self-contained HTML file (icons/images embedded as base64) that works from any browser, file share, or static host. Page-visible text follows the project language (the demo uses Traditional Chinese, zh-TW). **Start from `references/template.html`** — it contains the full CSS token system and the JS wiring skeleton (INFO/HL/STEP_OF, select/markStep/activateStep, steps bar, sticky info card). Copy it and fill the placeholders. Details live in `references/coordinate-notes.md`. > Adapt the project-specific parts on install: the folders where Views/Controllers live, the > meta-strip labels, and the output folder for finished pages. ## Workflow 1. Investigate code → 2. Rebuild 1:1 from Designer → 3. Annotate → 4. Wire interactivity + operation sequence → 5. Run `scripts/check_wiring.py` → 6. Deliver. --- ## 1. Investigate the code first (never guess from a screenshot) Find the Form by grepping window titles, control text, or localization keys. Read three files: | File | What it provides | |---|---| | `<Form>.Designer.cs` | **The single source of truth for geometry & settings**: ClientSize, each control's type, Location/Size, BackColor, Font, Visible, events, DataGridView columns | | `<Form>.cs` (code-behind) | Behavior: h