# 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`.