Architecture
PHASE 1: VISUAL FOUNDATION — DATA FLOW
FastPatchService
CSS injection → iframe
applyPatch · clearPatch · flush
CanvasEngine
executeBatchStyles · moveASTElement
swapASTElements · fastPatch
ASTMoveOperation
ASTSwapOperation
ASTApiService
move · swap
useElementDrag
drag reorder · swap · .map()
computeDropPosition
useElementResize
4px snap · inline feedback
snapToGrid · computeResizeDelta
useStyleSync
fastPatch feedback · batch
verification · multi-select
mergeStyleData
style intersection · MIXED
multi-select inspector
overlay-renderer
resize handles · computeResizeHandleSpecs
renderResizeHandles · corner/edge
spacing-guides
calculateSpacingGuides
renderSpacingGuides · pink lines
hasExplicitSize
WIDTH_PATTERN · HEIGHT_PATTERN
w- · h- · size- · min/max
/api/move-element
moveElementInAST
ancestor guard · index validation
/api/swap-elements
swapElementsInAST
isAncestor · self-swap guard
lib/ast/operations
moveElementInAST (shared)
swapElementsInAST (shared)
AstBridge (VS Code)
_handleMoveElement · _handleSwapElements
undo tracking · message routing
PlatformMessage
ast:moveElement
ast:swapElements
AstService (ext)
moveElement · swapElements
file parse → mutate → write
CLIENT ENGINE
HOOKS
SHARED
SERVER
VS CODE