Sidebar / Layers Panel

The layer-tree sidebar attached to the bottom-left of the editor. Renders the node hierarchy and lets users select, reorder, hide, lock, and rename nodes.

Key files

• packages/sdk/src/chrome/toolbar/SidebarLayersPanel.tsx — collapsible bottom panel that hosts Layers
• packages/sdk/src/chrome/toolbar/dialogs/Layers/ — the layer tree
  • Layers.tsx — entry component
  • LayerNode.tsx — single row (icon, name, drag handle, visibility/lock toggles)
  • LayerHeader.tsx — header (search, expand-all, collapse-all)
  • LayerManager.tsx — drag-drop coordination across the tree
  • siblingMoveOps.ts — sibling reorder math
  • hooks/ — selection sync, expand state, drag state
• packages/sdk/src/chrome/toolbar/dialogs/LayersDialog.tsx — pop-out modal version (atom-driven)

State

• SidebarLayersPanelAtom — open/closed (persisted via phStorage)
• LayersDialogOpenAtom — pop-out modal
• phStorage["sidebar-layers-height"] — resized height (drag-resizable, 120–60vh)

Behavior

• Drag-resize: the panel exposes a top edge for vertical drag-resize. Min 120px, max 60% viewport.
• Reorder: drag a row onto another to reparent / reorder. LayerManager coordinates with the canvas drag engine for cross-target drops.
• Selection sync: clicking a row dispatches CraftJS actions.selectNode(id); clicking on the canvas highlights the matching row.
• Visibility / lock: per-node toggles (stored in CraftJS node.data.hidden / custom).

Related

• sidebar-readme.md
• sidebar-framer.md — Framer-style outline animation
• sidebar-main-tabs.md
• drag-drop