Nine ways to build a desk, and what each gives way.
This page lays out one desk nine ways: a toolbar, five tool panels (Files, Outline, Notes, Inspector, History) and a few open documents. Pick a construction and the stage lays it out live by that construction's own rules. Drag the sliders to see what gives way when width or height runs out; every box settles to its new place from wherever it is drawn.
Built with @n-uf/motion (opens in a new tab) createSettle (every box glides)Redraws the rules of @n-uf/placement/dock (opens in a new tab) the nine constructions and how they give way
Gives way: Inspector floats; drop it on a dock or its rail icon to dock it again
A's docks, and any panel can be torn off to float over the documents and dropped back on a dock or its rail icon. Docked is the default; floating is the exception you choose.
toolbarpanelrail / tabsdocumentfloats over the documentsbottom dock
Drag panels on each of the nine desk constructions in the lab, and step through the drop targets from the keyboard.
Docks, one tiling tree, a strip, drawers and palettes
A · Edge docks
Each side is a dock with a rail of icons. Panels in a dock are accordion sections; short on height, the least recently used fold to headers; short on width, a whole dock folds to its rail. Bottom dock (outlined): between the side docks. The side docks run down to the bottom edge; History is only as wide as the documents.
A2 · Full-width bottom dock
Same as A except one thing. Bottom dock (outlined): full width, under everything. The side docks and their rails stop above it; History is as wide as the whole desk (good for a log or a timeline), the side docks are shorter.
B · One tiling tree
Panels and documents are tiles of one tree, so a panel can sit beside a document. One rule for all: the newest tile that breaks a minimum floats.
C · Navigator + inspector
A fixed left and right side, one panel showing per side (tabs). The toolbar floats over the canvas. Narrow: the sides fold to icon tabs. Height never matters.
D · Scrolling strip
Panels and documents are columns of a strip wider than the screen; nothing shrinks below its minimum, the view scrolls to the focus instead. Short on height, a column splits in two.
E · Drawers
Documents take the screen; each side is a drawer with tabs. Wide: drawers dock and push. Narrow: they slide over the documents.
F1 · Palettes over
Documents take the whole desk; panels are palettes floating over them at their natural size, stuck to the top corners and draggable anywhere. The toolbar floats too (top or bottom). Short on height, the least recently used shade to their title bars; the documents never move.
F2 · Palettes, docs around
Palettes float at their natural size, but they reserve their footprint: the documents tile in the space between them. Nothing is covered; the space under a short stack stays empty.
F3 · Docks + tear-offour pick
A's docks, and any panel can be torn off to float over the documents and dropped back on a dock or its rail icon. Docked is the default; floating is the exception you choose.
Eight questions, nine answers
| Construction | Toolbar | Panels on one side | Height runs out | Width runs out | Covers documents | Things move by themselves | Drop targets while dragging | Known from |
|---|---|---|---|---|---|---|---|---|
| A · Edge docks | floating pill, top or bottom; reserved space or overlay | accordion: sections fold to headers; bottom dock between the sides | least-recent sections fold to headers; the bottom dock folds to its header | docks fold to their rails (right first) | never (bottom dock: reserved space or overlay) | rarely: sections and docks fold | dock edges, slots in a dock, rail, bottom dock | IDE tool windows (panel "centred") |
| A2 · Full-width bottom dock | as A | as A; the bottom dock runs under the side docks | as A; side docks are shorter, so they fold sooner | as A; the bottom dock keeps the full width | never (bottom dock: reserved space or overlay) | rarely | as A | IDE tool windows (panel "justified") |
| B · One tiling tree | bar across the top | tiles in the same tree as documents | newest tile floats | newest tile floats | only floated tiles | often: opening a document reshapes panels | any tile edge | tiling window managers |
| C · Navigator + inspector | floating pill, top or bottom; reserved space or overlay | tabs: one panel shows per side | nothing happens | sides fold to icon tabs | never | never | left / right tab rows | design tools |
| D · Scrolling strip | bar across the top | stacked in columns of the strip | a column splits in two | the strip scrolls | never | the view scrolls to the focus | between columns, inside a column | scrollable tiling window managers |
| E · Drawers | bar across the top | tabs: one panel per drawer | nothing happens | drawers slide over instead of pushing | narrow only | drawers switch at a width | left / right tab rows | tablet apps |
| F1 · Palettes over | floating pill, top or bottom; reserved space or overlay | palettes stacked in a corner, or anywhere | least-recent palettes shade to title bars | palettes cover more; narrow, stacks merge in one corner | always (shown under the stage) | never | anywhere (snap to corners, edges, palettes) | creative tools' floating palettes |
| F2 · Palettes, docs around | floating pill, top or bottom; reserved space or overlay | palettes stacked in a corner, or anywhere | least-recent palettes shade to title bars | documents get narrower | never; leaves empty space under short stacks | documents re-tile when a palette moves | anywhere (snap to corners, edges) | window managers' "struts" |
| F3 · Docks + tear-off | floating pill, top or bottom; reserved space or overlay | accordion in a dock; any panel can float | as A; floating panels shade | as A | only what you tear off | rarely | dock slots, rail, or anywhere to float | IDE tool windows (floating mode) |
F3 · Edge docks + tear-off
The nine are equal presets in @n-uf/placement/dock; the letters are this page's labels. Our pick, with one rule: a panel lives in a dock, and a dock folds to its rail. Short on height, sections fold to their headers; short on width, a whole dock folds to its rail. Nothing covers the documents unless you choose it: tear a panel off and it floats, drop it on a dock or its rail icon and it docks again. The toolbar is a floating pill, top or bottom. Every glide is a dock, a section or a palette opening, closing or moving, which settle already does. A is the same without floating; C is the simplest if one panel per side is enough.
Questions
How do I drag a panel from one dock to another?
Build drop targets with deskTargets from @n-uf/placement/targets and feed them to createDragIntent from @n-uf/motion/drag. When the intent names a target, deskDrop returns its label and the slot the panel lands in. Placement draws nothing, so your app draws the rects, and @n-uf/motion/layout can glide the panels there.
Which desk layouts can I build?
Nine, as presets of createDesk in @n-uf/placement/dock. They are built from side docks, a bottom dock, rails, foldable sections and floating palettes, and include edge docks with tear-off, a tabbed side, drawers that slide over the documents, a scrolling strip of columns and palettes stacked in the corners. Each is a pure layout returning rects and notes.
What gives way when a desk runs out of room?
In the edge docks, sections fold to their headers when height runs out, least recently used first, and a dock folds to its rail when width runs out. Each layout returns notes saying how it gave way, such as dock-folded. A note's code is the contract; its English text may change in any release.