58 lines
2.3 KiB
Markdown
58 lines
2.3 KiB
Markdown
# UI Pattern Catalog
|
|
|
|
Canonical pattern taxonomy for reusable Go web UI patterns.
|
|
|
|
Visual baseline for the canonical demo and scaffold is Vapor:
|
|
|
|
- `Vapor Soft` for light mode
|
|
- `Vapor Night` for dark mode
|
|
|
|
Pattern-level interaction contracts inherit the active baseline component language rather than
|
|
redefining primitives locally. The Aqua bundle remains archive/reference only.
|
|
|
|
## Pattern Families
|
|
|
|
- Table + filters + pagination
|
|
- Modal workflows (create/edit/remove/confirm)
|
|
- Status indicators and health badges
|
|
- Timeline cards and grouped history views
|
|
- Forms with validation and server round-trips
|
|
- Operator/admin tools dashboards (queue + batch actions)
|
|
|
|
## Initial Bundle Status
|
|
|
|
| Pattern | Bundle | Status |
|
|
|---|---|---|
|
|
| Table + pagination | `ui-pattern-table` | placeholder contract + files |
|
|
| Controls + selection | `ui-pattern-controls` | contract + files |
|
|
| Forms + validation + suggestions | `ui-pattern-forms` | contract + files |
|
|
| Operator tools dashboard | `ui-pattern-operator-tools` | contract + files |
|
|
| Modal workflow | `ui-pattern-modal` | contract + files |
|
|
| Import / export | `ui-pattern-io` | contract + files |
|
|
| Status indicators | bundled inside controls/table demos | partial |
|
|
| Timeline cards | `ui-pattern-timeline` | contract + files |
|
|
|
|
## Theme Bundles
|
|
|
|
| Theme | Bundle | Status |
|
|
|---|---|---|
|
|
| Vapor (active baseline) | `ui-theme-vapor` | active |
|
|
| Aqua legacy snapshot | `ui-theme-aqua-legacy` | archive/reference |
|
|
|
|
## Synthesis Direction
|
|
|
|
Initial canonical behaviors are synthesized from multiple existing Go web applications with:
|
|
|
|
- detailed UI interaction contracts
|
|
- operational admin workflows
|
|
- lean `net/http` + template runtime structures
|
|
|
|
## Component Baseline Notes
|
|
|
|
- Buttons, segmented controls, status badges, filter inputs, and table surfaces share one baseline component language.
|
|
- Canonical demo visuals target the active Vapor baseline (`Vapor Soft` / `Vapor Night`).
|
|
- Segmented controls use joined-button geometry (shared shell, rounded outer edges only, straight internal separators).
|
|
- Context-specific active-state color is allowed (for example dark scope tabs vs blue theme preset selector) without changing segmented geometry.
|
|
- Table-management behavior and toolbar icon semantics are defined once in
|
|
`kit/patterns/table-management/contract.md`.
|