Viewport

The canvas — where the user sees and edits the page. Lives in packages/sdk/src/chrome/viewport/.

Key files

• ComponentCanvasViewport.tsx — canvas surface
• ComponentCanvasItem/ — wrapper around each rendered node (drag handle, hover, selection chrome). Split into shell + useCanvasItemDrag / useCanvasItemResize / useStateCardPin / useLiveDomPin hooks.
• ComponentSelector.tsx — the click-to-select / drag-to-move overlay
• ComponentSettings.tsx — inline settings dropdown attached to selected node
• NodeBreadcrumb.tsx — breadcrumb of ancestor nodes at the top of the canvas
• DeviceSelector.tsx, deviceFrames.ts — preview device switcher
• CanvasZoom.tsx — zoom controls
• PageSelector.tsx — page switcher
• Viewport/ — outer chrome (shell + useViewportSetupEffects / useUnsavedChangesWarning / useCanvasEdgeResize etc. hooks + render parts)
• ViewportTopBar/ — top bar (renamed from Header.tsx; split into BreakpointSwitcher / SideBySideRow + hooks)
• ToolboxContextual/, toolbox/ — drag-from-toolbox sources
• atoms.ts — Zedux atoms (TabAtom, DeviceAtom, ViewAtom, IsolateAtom)
• editorCanvasLayout.ts — canvas vs preview vs sidebar layout math

ComponentCanvasItem

Wraps every rendered node. Renders:

• Drag handle (TbGripVertical) on hover
• Selection outline + handles
• Tooltip via react-tooltip (PAGEHUB_RTT_GLOBAL_ID)
• Pinning math for component-canvas mode (slot-positioned masters/state cards)

Tooltip rule: never title="" — always data-tooltip-id={PAGEHUB_RTT_GLOBAL_ID}. See .claude/rules/tooltips.md.

NodeBreadcrumb

Top of canvas. Walks the selected node's ancestor chain to ROOT, displays as clickable trail. Click an ancestor to select it. Each item shows:

• An icon (page / role-derived)
• The node name (custom.displayName or props.type)

removeParentPrefixes strips redundant prefixes when names cascade (e.g. "Header > Header Container" → "Header > Container").

Page isolation

IsolateAtom (Zedux) holds the currently isolated page id. Header/footer share across pages; only the body of the isolated page renders. hasPageIsolation() is the read.

Related

• drag-drop — drag engine reference
• canvas-chrome.md — full canvas chrome doc
• viewport-readme.md, viewport-zoom.md
• component-editor-canvas-mode.md