Layout wireframe

document-editor

A centred writing surface with a collapsible document tree on the left and a contextual inspector on the right. The measure is fixed at max-w-[46rem] — extra window width goes to the margins or to a panel, never to longer lines. See LAYOUT.md.

Desktop · ≥ xl (1280px+) · all panels open

<share>

header · h-12 sticky top-0 · spans all three columns — controls apply to the document regardless of panel state

main · flex-1 min-w-0 overflow-y-auto — THE scroll region

max-w-[46rem] mx-auto px-8 — the measure, fixed

<document body> full prose scale — h2/h3, paragraphs, lists, blockquote, code

<code block / table / image> — may break the measure up to max-w-[60rem]. Text never does.

scroll — the toolbar and both panels stay put

extra window width goes here, to the margins — never to a longer line

Panel states

Both panels collapse independently, at every breakpoint, and the state persists across sessions. Collapsing both is focus mode — a first-class state of this layout, and the reason the panels collapse to nothing rather than merely narrowing.

Both open

w-60 + flex-1 + w-80

Tree collapsed

Measure stays 46rem — the document does not widen

Inspector collapsed

Default below xl

Focus mode — both collapsed

Toolbar + document only. Margins absorb all width.

Breakpoint behaviour

< lg · under 1024px

Both panels hidden. Tree opens as an overlay sheet from the left, inspector from the right, each with a scrim. Document gutter drops to px-4 and the measure fills the viewport.

title

document body, full width

Overlays are modal: focus trap, Escape closes, focus returns to trigger.

lg – xl · 1024–1280px

Tree visible at w-60. Inspector hidden but available as an overlay. Measure is at its full 46rem.

tree

document

w-60 + flex-1

≥ xl · 1280px+

All three regions visible. Any width beyond this widens the document pane's margins, not the measure.

tree

document

inspector

w-60 + flex-1 + w-80

Scroll model

Region	Declaration	Behaviour
html, body	h-screen overflow-hidden	Never scroll.
Row wrapper	flex min-h-0 flex-1	min-h-0 is load-bearing — without it the children refuse to shrink and the inner scroll panes never engage.
Toolbar	h-12 shrink-0 sticky top-0	May hide on scroll-down; always returns on scroll-up. Never permanently dismissible.
Tree	w-60 shrink-0 overflow-y-auto	Independent scroll.
Document pane	flex-1 min-w-0 overflow-y-auto	Primary scroll region. Anchors and scroll restoration target this, not window.
Inspector	w-80 shrink-0 overflow-y-auto	Independent scroll.