Editor Chrome
Editor layout, form factor, viewport, and layer ownership.
HEAD a63778eEditorChromeProvider derives form factor from the editor container, not the
window. EditorChromeLayout places product chrome; widgets provide slot content
without viewport positioning. The resolved Host Contract combines host policy,
Canvas mode, and write authority before App composition decides which surfaces
exist.
- When the Host Contract exposes a Sidebar,
desktopandcompactkeep one right Sidebar shell over a stable Canvas. Its toggle remains in the same header slot while the shell animates between expanded and trigger widths. The shell remains anchored to the right safe edge, so the left-rail toggle moves to the upper-right position on collapse. - Only the expanded Sidebar reserves its occupied viewport edge. Sidebar state never resizes or remounts the Canvas.
- The Sidebar region owns width animation and reservation, the Sidebar container owns the host surface and elevation, and its inner layer clips content during collapse. Chrome regions do not clip surface shadows.
phonepresents the sidebar as a modal Sheet.- An omitted Sidebar has no shell, viewport reservation, phone trigger, shortcut registration, or lazy content load. Blackboard omits both Sidebar and Inspector.
- Canvas shortcuts, managed clipboard events, and Context Menus consume the same
action policy.
copyexposes text, ANSI, and PNG actions independently frommutateContent; Blackboard never exposes cut, paste, delete, or formatting. EditorPresentationProviderowns transient presentation mode. Widgets declare one role at their local render boundary:essential,host,pane, orcontextual. Zen Mode keeps essential widgets, suppresses the other roles, and preserves Sidebar, Split, Canvas, tool, and selection state without requesting browser fullscreen.- Registered chrome regions produce one
EditorViewportFrame. Regions on the same edge reserve their maximum intrusion, not their sum. Camera fit, zoom anchors, minimap sizing, and contextual controls consume that frame. - Split view is a device-local horizontal workspace layout. Each pane binds a Canvas and keeps its own camera; the active pane owns editing and shared controls while the other pane renders its session snapshot. The top-start Chrome host owns the primary selector during Split and the visible selector during single-pane rendering; the secondary selector remains pane-local. Host flow, rather than Canvas coordinates, orders the App Menu, hosted selector, status, and collaboration controls. During Split, only the active pane's selector uses the shared active-control surface; single-pane rendering has no redundant pane-focus treatment. Each pane receives a local viewport frame: shared top and bottom insets, and only the outer side inset it touches. Narrow containers suspend the second pane without clearing its binding, camera, stored split preference, or ratio.
- Viewport layers use the semantic ladder defined in
packages/ui/theme.css. Shared portal primitives own their layer; product instances do not assign raw overlay z-index values.
Editor Chrome owns presentation geometry only; domain stores remain authoritative for document and editor state.
Authority and evidence
- Contract:
apps/canvas/src/widgets/editor-chrome/public.ts,EditorPresentation.tsx,types.ts, andEditorChrome.tsx - Geometry:
editor-chrome.test.ts - Responsive Sidebar surface:
apps/canvas/e2e/sidebar-collapse.spec.ts - Zen Mode:
apps/canvas/e2e/app-menu.spec.ts