Unified Settings

The schema-driven property registry that powers every settings panel. One source of truth — every property defined as structured data; the renderer dispatches to one of 9 input types.

The toolbar tree is static: tabs/sections/accordions render once and never unmount. Switching nodes changes the content INSIDE sections via useNode, not the tree itself.

Key files

• packages/sdk/src/chrome/toolbar/inspector/RegistrySettings.tsx — main shell (registers itself with InspectorRegistry at module load — side-effect import in index.ts)
• registry/propertyDefs.ts — PropertyDef, PropertyInput, SectionDef, ShorthandMode
• registry/propertyRegistry.ts — public API: registerProperties, overrideProperty, unregisterProperty, registerSectionDef, getSectionDefs, getProperties, searchProperties
• PropertyRenderer.tsx — renders a single property from its def (9 input types)
• PropertySection.tsx — renders a section accordion
• AccordionAddMenu.tsx — + picker for non-pinned properties
• README.md — full architecture doc (read this for the complete property list)

Properties (where things are defined)

inspector/registry/properties/ (one file per domain):

• sectionDefs.ts — sections (id, title, tab, icon, sortOrder)
• typography.ts — Font, size, weight, color, alignment + advanced
• background.ts — Color, image, pattern, gradient + clip/blend
• appearance.ts — Styles section: opacity, shadow, radius + Border / Ring / Outline / Divide bundles
• effects.ts — Filter + Backdrop bundles, transition timing, Transforms (scale, rotate, translate, skew, origin, GPU/will-change)
• layout.ts — Size (width, height, min/max, aspect)
• display.ts — Position, inset, order + visibility/overflow/cursor/z-index/pointer-events/user-select
• aria.ts — ARIA labels, roles, focus, live regions
• alignment.ts — Layout direction, gap, align/justify, padding, margin
• interactions.ts — Action (custom) + hover styles

Per-component MainTab

Components that need bespoke settings beyond the universal property set ship a MainTab component:

inspector/mainTabs/<Name>MainTab.tsx

Example: DropdownMainTab.tsx, TabsMainTab.tsx. Each defineComponent references its settings (and optional advancedSettings) — the toolbar shell renders these when that node type is selected, alongside the universal sections.

When adding a new component, always pair it with a MainTab unless the universal properties cover everything (rare — see registration).

Search

searchProperties() powers the search bar — fuzzy matches property labels and section titles. Cmd/Ctrl+F opens.

Property pinning

Pinned properties stay always-visible at the top of their section. Non-pinned ones are accessible via AccordionAddMenu (the + button at the section bottom). State held in inspector/inspectorPin/.

Related

• toolbar
• schema-driven-unified-settings-sidebar.md
• sidebar-property-registry.md
• sidebar-items-and-inputs.md
• sidebar-pin-and-search.md
• registration — adding a new component (mandatory MainTab)