All docs

Right Toolbar (Component Settings Sidebar)

The right-side panel that shows when a node is selected on the canvas. Sometimes called "the sidebar," "the inspector," "the settings panel," or "the toolbar." This folder spells out how it's wired so we don't have to re-trace it every t…

The right-side panel that shows when a node is selected on the canvas. Sometimes called "the sidebar," "the inspector," "the settings panel," or "the toolbar." This folder spells out how it's wired so we don't have to re-trace it every time.

docs/ is gitignored — these notes are local-only.

What you see in the UI

┌─────────────────────────────────────────┐
│  [Cmp] [Lay] [Des] [Int] [Adv]   ←  FIXED tab strip (always 5 tabs)
├─────────────────────────────────────────┤
│  📄 CONTENT                              │ ← stack[0] body — component-specific
│    [Columns] [Rows]                      │   (swaps per selected node)
│    ...inputs...                          │
│                                          │
│  📐 LAYOUT                               │ ← stack[1]
│  🎨 DESIGN                               │ ← stack[2]
│  🖱️  INTERACTIONS                        │ ← stack[3]
│  ⚙️  ADVANCED                            │ ← stack[4]
├─────────────────────────────────────────┤
│  📌 PINNED                               │ ← InspectorPinDock (when pinned)
│    ...portaled section bodies...         │
└─────────────────────────────────────────┘
  • Tab strip at top — fixed/sticky, always 5 tabs.
  • Tab #1 is component-dedicated: title, icon, and body all swap based on the selected node's displayName + craft.toolbar.settings.
  • Tabs 2–5 are universal: Layout, Design, Interactions, Advanced.
  • Body is one scroll container with all 5 stack panels stacked vertically.
  • Click a tab → scrolls to that stack. Scroll the body → active tab indicator updates via IntersectionObserver.
  • Bottom InspectorPinDock holds pinned section bodies (portaled in).

Read these in order

  1. tab-strip.md — the fixed 5-tab strip, tab[0] swap, scroll ↔ tab pill sync.
  2. main-tabs.md — per-component MainTab system that fills tab[0] (Content/Type/Marker slots).
  3. property-registry.md — how universal sections (Layout, Design, etc.) and their properties get registered.
  4. items-and-inputs.md — how an individual input control works inside a section (ToolbarItem, PropertyRenderer, propType vs type, view-aware values).
  5. pin-and-search.md — the pin/dock system and the global search behavior.

Source map (one-line index)

ConcernFile
Sidebar shell — fixed head, stacks, search wiringpackages/sdk/src/chrome/toolbar/inspector/RegistrySettings.tsx
Tab strip + scroll body + IntersectionObserverpackages/sdk/src/chrome/toolbar/InspectorTab.tsx
Per-section accordion chrome (header + body)packages/sdk/src/chrome/toolbar/ToolbarSection.tsx
Single property section (driven by registry)packages/sdk/src/chrome/toolbar/inspector/PropertySection.tsx
Property/section registry APIpackages/sdk/src/chrome/toolbar/inspector/registry/propertyRegistry.ts
Built-in section defs (which tab they live on)packages/sdk/src/chrome/toolbar/inspector/registry/sectionDefs.ts
Built-in property defspackages/sdk/src/chrome/toolbar/inspector/registry/properties/
Per-component MainTab (the "Component" tab body)packages/sdk/src/chrome/toolbar/inspector/mainTabs/
Slot helpers used inside MainTabspackages/sdk/src/chrome/toolbar/inspector/helpers.tsx
Item / input primitive (renders one control)packages/sdk/src/chrome/toolbar/ToolbarItem.tsx
Property def → input dispatchpackages/sdk/src/chrome/toolbar/inspector/PropertyRenderer.tsx
Pin context / dock / buttonpackages/sdk/src/chrome/toolbar/inspector/inspectorPin/
Sidebar tree on the left (layers panel)packages/sdk/src/chrome/toolbar/SidebarLayersPanel.tsx

Related external docs