settings overlay flow

sources

implementation steps

1. Use the dual card overlay as the primary container only when the user is temporarily editing contextual state.
2. Group durable settings with animated tabs; keep destructive or rare actions behind menu rows with explicit labels.
3. Compose forms with the field primitive so labels, descriptions, and error states share one contract.
4. Use session-aware tooltips for icon-only secondary actions; suppress them after click or scroll to avoid stale chrome.
5. Keep overlay proof narrow: open, inspect the first editable field, switch one tab, and close without layout shift.

# Adopt settings overlay flow

Build a settings and account overlays using the components showcase adoption recipe `settings-overlay-flow`.

## Intent
A compact settings or preferences surface with progressive disclosure, focused forms, and menu handoffs.

## Component sources
- overlay: dual card overlay (src/components/overlay)
- tabs: animated tabs (src/components/tabs)
- field: form field (src/components/field)
- menu: dropdown menu (src/components/menu)
- tooltips: session-aware tooltips (src/components/tooltips)

## Style sources
- components: components — default (@creative-int/design)
- arbor: arbor — shadcn classic (apps/arbor)

## Implementation steps
1. Use the dual card overlay as the primary container only when the user is temporarily editing contextual state.
2. Group durable settings with animated tabs; keep destructive or rare actions behind menu rows with explicit labels.
3. Compose forms with the field primitive so labels, descriptions, and error states share one contract.
4. Use session-aware tooltips for icon-only secondary actions; suppress them after click or scroll to avoid stale chrome.
5. Keep overlay proof narrow: open, inspect the first editable field, switch one tab, and close without layout shift.

## Acceptance checks
- overlay has a single clear close path and does not trap users behind nested dialog surfaces
- each editable control has a visible label, description or helper text, and deterministic error state
- tab switch preserves surrounding chrome dimensions
- menu rows show icon, label, and optional shortcut without truncating the command name
- proof covers /overlay, /tabs, and the adopting route

## Proof routes
- /adoption/settings-overlay-flow
- /overlay
- /tabs

acceptance

• overlay has a single clear close path and does not trap users behind nested dialog surfaces
• each editable control has a visible label, description or helper text, and deterministic error state
• tab switch preserves surrounding chrome dimensions
• menu rows show icon, label, and optional shortcut without truncating the command name
• proof covers /overlay, /tabs, and the adopting route

artifact