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