pattern-ui

UI Polish Phase

Only do this AFTER all logic is verified and tests pass.

Read First

• docs/​common/​components/​COMPONENTS.md - Full component reference
• docs/​common/​patterns/​style.md - Styling patterns
• docs/​common/​patterns/​two-way-binding.md - $value, $checked bindings

Available Components

Layout: ct-screen, ct-vstack, ct-hstack, ct-box Input: ct-input, ct-textarea, ct-checkbox, ct-select Action: ct-button Display: ct-text, ct-status-pill

Key Patterns

Two-way binding:

<ct-input $value={field} />
<ct-checkbox $checked={done} />

Layout structure:

<ct-screen title="My Pattern">
  <ct-vstack gap="md">
    <ct-hstack gap="sm">
      {/​* horizontal items */​}
    </​ct-hstack>
  </​ct-vstack>
</​ct-screen>

Reference Existing Patterns

Search packages/​patterns/ for UI layout examples ONLY (not data/​action patterns).

Done When

• UI renders correctly
• Bindings work (typing updates state)
• No regression in data behavior