Property editing surface inventory

Audited by tracing imports and rendered JSX from src/App.tsx, CanvasSection.tsx, FloatingSidebar.tsx, and AppModalsHost.tsx. “Legacy” means the component remains exported but no rendered consumer is present in the current application graph; these components are retained for compatibility.

Active entry points

Entry point	Panels and responsibility	Shared system
`App → FloatingSidebar → FloatingStylesDrawer`	Global design, background, typography, layers, advanced editor preferences; palettes and corner radius	`ModifierPanel`; property tabs and shared panel content
`FloatingStylesDrawer → BackgroundTab`	Solid/pattern/image backgrounds, image import and ordering	Inherits shared panel scope; design controls
`FloatingStylesDrawer → TypographyTab`	Global text styles and fonts	Inherits shared panel scope; design controls
`FloatingStylesDrawer → LayersTab → ArrangementControls`	Breakpoint layout, layer arrangement and canvas preferences	Inherits shared panel scope; design controls
`FloatingStylesDrawer → AdvancedTab`	Editor settings, publication preferences	Inherits shared panel scope; design controls
`FloatingStylesDrawer → LegacyStylesDrawer`	Supported no-project-session fallback: palette, fonts, corner radius	`ModifierPanel`
`App → FloatingSidebar → FloatingSettingsDrawer`	Site settings, metadata/SEO, backups, site actions and MCP access	`ModifierPanel`; flat property section/action classes. Site, backup, export and MCP handlers retained
`App → FloatingSidebar → LanguageDrawer`	Site document language	`ModifierPanel`, `PropertyRow`
`App → DeferredPanel → AppModalsHost`	Routes element-specific editors and modifier modes without changing selection	Shared `ModifierScope`; individual panels below
`AppModalsHost → BasicModifier`	Text, headings, badge, button, card, separator	Shared modifier panel and controls
`AppModalsHost → StyleModifier / LinkModifier`	Appearance, shadow, spacing and link modes	Shared modifier panel and controls
`AppModalsHost → SocialModifier / FaqModifier / MenuModifier / FormModifier`	Social links, accordion entries, navigation, form fields and submission settings	Shared modifier panel and controls
`AppModalsHost → NativeMediaProperties`	Native media content and presentation	Shared property shell and controls
`AppModalsHost → UiversePropertiesModal`	Imported component HTML/CSS and parsed controls	Shared property shell and controls
`AppModalsHost → ContentPropertiesPanel`	Content-type-specific fallback editing	Shared property shell and controls
`AppModalsHost → PropertyModals/{Text,Button,Image,Video,Shape}PropertiesModal`	Type-specific fallback paths retained after modifier precedence	Shared property shell and controls
`CanvasViewport → CanvasSection → SectionPropertiesModal`	Section backgrounds, layout and style	Shared property shell and controls

Retained legacy surfaces

Component	Role	Shared system
`RightInspector/RightInspector`	Legacy tabbed element inspector	Shared shell; child content/style/advanced tabs
`RightInspector/FloatingInspectorCard`	Legacy compact floating inspector	`ModifierPanel`
`RightInspector/{ContentTab,StyleTab,AdvancedTab}`	Legacy inspector contents	Shared panel scope
`RightInspector/ShadowControls`	Reusable active shadow editor also imported by modifiers and property dialogs	Shared control scope
`sidebar/LeftSidebar/StylesDrawer`	Legacy global palette/font/radius/container-width editor	`property-panel`, heading and scroll primitives
`sidebar/LeftSidebar/SettingsDrawer`	Legacy brand/domain/page SEO editor	`property-panel`, heading and scroll primitives
`floating/FloatingDrawer/FloatingDrawer` styles/settings branches	Legacy all-in-one toolbar drawer	Property scope on styles/settings branches only

Deliberately separate workflows

AuxiliaryPanel is used only by the trends and help flyouts; neither edits properties. Page administration, template/catalog browsers, element insertion, account/profile, store/ecommerce management, export dialogs and MCP connection administration are workflows rather than property editors. Their data flows are preserved and are not recast as inspector controls. The settings panel continues to link to these workflows.

Preservation boundaries

The shell migration preserves callbacks, controlled values, conditions, keyboard tab navigation, dynamic options, validation, backup confirmation, loading state and project-session operations. Shared shell ownership consolidates positioning, dragging, focus return, scrolling and close actions. Legacy exports remain available; this audit does not remove code based solely on its current reachability.

Design decisions and extension contract

White surfaces and neutral text keep authored content visually separate from editor controls. Blue is reserved for selection/focus; red identifies destructive actions.
A 12px control scale, 13px headings, 12px field gaps, 4–6px radii and 1px dividers provide a compact hierarchy without nested cards. Inter uses a local/system fallback; no new font request is required.
ModifierPanel owns dragging, focus return/trapping when modal, title, persistent close control and scrolling. PropertyRow, PropertyItem, Group, IconAction, AddAction, Range, Color, and Select are the reusable controls. New property editors must use this shell and these primitives rather than local card styles.
Repeated items use independent disclosure controls and accessible icon actions; only the first item opens initially. Keyboard and touch users can access the same actions without hover.
Panel and canvas movement share dragTranslation.ts: direct DOM translation during movement, with a state commit after release. Positioning remains viewport-clamped, and manual positioning persists while open. Alt+arrows supports keyboard positioning.
Background/pattern/color and shadow previews intentionally retain visual treatments because they demonstrate the actual edited property.
No persisted document schema, property callback, publication behavior or history model is changed by this redesign.

Verification

Unit coverage includes property scoping, native media/content, form/social/FAQ actions, global settings/backgrounds, imported components, preservation of callback results, independent item actions and zero field rerenders during pointer movement. Browser coverage checks adjacent placement, retained manual drag, live text changes, 101-element canvas movement, desktop/mobile containment, scrolling and global design/settings/language panels. Existing editor, publishing and project regression suites remain release gates.