Components Workspace shell

Workspace shell

The four-pane application layout: a thin nav rail, an explorer (search + recently viewed), the main record content, and a page-configured context pane. Explorer and context collapse via a single edge pull-tab. Shown here in a fixed-height frame; in the app it fills the viewport.

This page documents a layout pattern, not a single tag helper. The shell is a layout plus the nav-rail and explorer partials, hosting a page-configured context pane.

Canonical

Alex Hawthorne

New

Sale and purchase

Sale

Legal fee£600.00

Office copies£12.00

Purchase

Legal fee£650.00

Search pack£245.00

Total£1,475.00

Sale

14 Maple Court, SW18 4RT

Price: £420,000
Building: House
Ownership: Freehold

Purchase

12 Lavender Hill, SW11 5RW

Price: £485,000
Building: Flat
Ownership: Leasehold

Client and referrer detail.

Notes thread.

Collapse the explorer or context with the edge pull-tabs; expand the rail from its Settings-row toggle. Each pane scrolls independently.

Variants

4 panes

Nav rail surface-container-low

Top-level areas plus the New-quote CTA. Icon-only by default; expands to a labelled rail. Active item is primary-container.

Explorer surface-container-low

Search, space scope, and recently-viewed records across spaces. Collapsible. The surface ⌘K opens.

Main surface

The record content. koala-cards sit on the page surface.

Context surface-container

Page-configured tabs of supporting detail. Content sits on the surface as list sections, not sub-cards. Collapsible.

Props

contract

Concern	Rule
Independent scroll	A `min-h-0` chain from the grid to each pane's `overflow-y-auto` body keeps panes scrolling independently.
Collapse pull-tab	One rounded tab per pane seam, `surface-container` fill on `shadow-raised`, lifting to `shadow-floating` on hover. Never a header button.
Context tabs	Page-configured (key, label, icon, optional count). No generic "Details" tab; split by concern.
Context content	Eyebrow section labels and `<dt>/<dd>` rows on the pane surface, separated by `outline-variant` hairlines.
Navigation	Record links swap `#main` via `x-target.push`; rail and explorer persist outside the swap.

Do & don't

Referrer

Partner: Hamptons Estates
Branch: Clapham

Do Give each concern its own tab (Property, Parties, Notes), and lay the detail out as on-surface list sections.

Details

About

Property

Clients

Don't Don't dump everything into one "Details" tab, and don't box each group in a recessed sub-card.