PriceForge/bible-local/bible/architecture/ui-pattern-catalog.md

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.