animated example

examples/VulkanUI/README.md

@@ -0,0 +1,52 @@
+# VulkanUI
+
+A walking tour of the V1 widget set. UI-only (no 3D pass), so the entire
+visible image comes from one compute dispatch per frame.
+
+## What it shows
+
+- **Layout**: nested `VStack` / `HStack` / `Spacer` / `TabView`, fluent
+  builder API, `Length::Px` / `Pct` / `Frac` / `Auto` units, DPI scaling
+  (your `Window::scale` flows through automatically).
+- **Theming**: `themes::default_dark()` with `theme.primary` / `secondary`
+  / `danger` / `input` styles applied per-widget via `.style(...)`.
+- **Text**: per-run colour styling via `TextRun`, an em-dash in the
+  header to confirm UTF-8 decoding works end-to-end.
+- **Buttons**: rounded background (SDF in the shader), centred SDF
+  glyphs, `onClick` callbacks. Quit calls `_Exit(0)` so a working click
+  visibly closes the window.
+- **Progress bar**: a `ProgressBar` at 42 %.
+- **TabView**: three tabs (Graphics / Input / Audio); clicking the
+  tab bar swaps content.
+- **InputField**: focusable text edits with caret blink, UTF-8 typing,
+  Backspace / Delete / arrow keys / Home / End, key repeat, horizontal
+  scrolling that keeps the caret visible, clipping that prevents
+  overflow from drawing past the field's bounds.
+
+## Run
+
+```bash
+cd examples/VulkanUI
+crafter-build -r
+```
+
+## Interactions to try
+
+| Action | Expected |
+|---|---|
+| Click `Play` / `Options` | Prints `[click] ...` to stderr |
+| Click `Quit` | App exits |
+| Click a tab label (Graphics / Input / Audio) | Tab body swaps |
+| Click an `InputField` | Border turns blue, caret appears and blinks |
+| Type | Characters appear at the caret, including multi-byte UTF-8 |
+| Hold a letter | After ~500 ms the character starts repeating at ~25 Hz |
+| Backspace / Delete | Removes one full UTF-8 codepoint |
+| ← / → / Home / End | Moves the caret |
+| Type past the right edge | Text scrolls left, caret stays visible |
+| Click outside any input | Caret disappears (focus cleared) |
+
+## Notes
+
+The shader (`shaders/ui.comp.glsl` in the library) is compiled to
+`ui.comp.spv` next to the binary by the build system.
+The font (`Inter.ttf`) is bundled via `cfg.files.push_back`.