SCREENS / GROUP
The rail, the strip above it, and what both do when the window narrows or the section changes.
01 / shell-001
The reference chassis: a dark rail of destinations, pinned reports and spaces that collapses to icons, beside a sticky strip for the trail and a title block with one primary action.
src/app/(screens)/_components/shells/grouped-rail-shell.tsxdesktop default02 / shell-002
Two levels of navigation on two surfaces — destinations as icons on the ink, the current library as a filterable folder tree on the page — folding in order as the window narrows.
src/app/(screens)/_components/shells/explorer-shell.tsxdesktop default03 / shell-003
No rail: the ink runs across the top and hands the full width to the page, with the strip's edges landing on the content column's own lines.
src/app/(screens)/_components/shells/topbar-shell.tsxdesktop default04 / shell-004
The rail lifted off the edge as a rounded chip on the canvas, beside the page as a second surface — carrying the workspace switcher and a metered allowance with its unit and limit.
src/app/(screens)/_components/shells/inset-rail-shell.tsxdesktop default05 / shell-005
One record's header: trail, serif name, state in words and colour, who and when, then its sections as line tabs on the header's own rule — beside a rail that nests in place.
src/app/(screens)/_components/shells/tabbed-header-shell.tsxdesktop default06 / shell-006
A queue worked one item at a time: a collapsed rail, the list, and the open item, each its own scroller under one shared 56px line.
src/app/(screens)/_components/shells/three-pane-shell.tsxdesktop default07 / shell-007
For arriving with a question: a wide query field, its filters as removable chips, one Run action — and a narrow rail of destinations and saved queries.
src/app/(screens)/_components/shells/command-header-shell.tsxdesktop default08 / shell-008
A long report read at a book measure: one thin ink strip, the outline in the left margin, key figures in the right, and a Contents sheet when the margins fold.
src/app/(screens)/_components/shells/reader-shell.tsxdesktop default09 / shell-009
Navigation that changes form with the width: a four-tab bar with More on a phone, an 80px labelled rail headed by New from tablet up.
src/app/(screens)/_components/shells/adaptive-shell.tsxmobile default10 / shell-010
A focus chassis for making a report: the ink strip as a toolbar with name, save state, undo and Publish; blocks left, the page on a canvas, settings right.
src/app/(screens)/_components/shells/builder-shell.tsxdesktop default11 / shell-011
A conversation with the data: chats on the rail with New chat heading it, a reading-width thread over a docked composer, and a context panel naming exactly what the assistant may read.
src/app/(screens)/_components/shells/assistant-shell.tsxdesktop default