04 Composite Chrome

Patterns

Wrapper-level contracts, consumed from @generators-ui/wrappers, never re-implemented at route-local scope. Each documents its anatomy, layout specs, and when to reach for it.

The Three Shells

Settings Card

Hairline rule, 14px radius, gradient stripe.

Card Chrome Stable

GenerateWrapperSettingsCard

The v7 hairline-rule card with read and edit primitives (Head, Section, Fields, EditField, SaveBar). Default for every new admin, settings, and portal surface. Themable via --gws-* CSS variables.

Radius14px (0 on mobile)

Border1px #e9e7e2 hairline

Stripe4px violet → fuchsia

WhenAny read / edit surface

Focus-Shell / Wizard Stable

GenerateWrapperFocusShell

Canonical wizard shell: admin top padding, centered 1024px wrap, hairline white card, the violet to fuchsia gradient stripe, shared step strip and progress bar.

Wrap1024px centered

Top Pad20px (billing-aligned)

ProgressStep strip + bar

WhenMulti-step onboarding

Events+ New

Summer MixerLive

Founders BrunchDraft

Trail Run #12Live

Admin Lists Stable

GenerateWrapperAdminListShell · GeneratePresetDataTable

Two flavors. Flat list: list shell plus the datatable preset owns the header. Card list: loading client to authenticated sub-page to card view, tabbed via the admin tabbed-list preset.

FlatDataTable + metrics

CardTabbed list preset

HeaderOwned by preset

WhenAny index / collection