DND component functionality

[crcn]

Depends on #844

There should be a way for people to drag and drop components in their preview elements. This is slightly more involved work though since there isn't quite the infrastructure set up for this yet.

Features:

• user can drag and drop nodes to any element that's not part of an instance
  • this means that empty elements should have drop zones. We can use data-show-dropzone as an explicit toggle for this that's removed after being edited in the UI.
• user can drag and drop nodes onto any instance slot
  • need to ignore

Considerations:

• Identifying slots in the canvas
  • And conditional slots! e.g: {showDiv && <div /> || <span />}
    • For this, initial reaction is to conditionally show slots based on toggled variants
  • for this, I think we'll need to include metadata on the virtual nodes about slots associated with them
• need to infer type of slot. If {div}, then it it's a placeholder for children. If {showDiv && <div />}, then it's a boolean flag. If {showDiv || <div />} then it's a slot with a default child. We can create classifications for these slots and attach that metadata to virtual nodes.

The most reasonable approach to this I think is to introduce metadata into virtual nodes that includes light information about ASTs that are associated with them. This information however should be rather broad and independent from exactly what the UI needs to ensure SOC. We can also use this metadata in the layer panel as well, I think. Though, this is a bit strange for empty slots. E.g: {header}. For this, I suppose we can render a placeholder element that user sees that would include information about the AST. This will need to be a flag that's passed into the engine: engine.open("/file.pc", { renderSlotPlaceholders: true }). Engine however shouldn't include information in the placeholder - just a vanilla div with metadata that it is a placeholder. Preview engine should identify those divs and render them according to the preview context (in an editor, it would render a CTA to drop elements into it).

Possible technical run through:

• User drags component to stage
• FE scans for slots in metadata and provides droppable zones
• on drop, code is written (import added if not present, instance is added to attribute) which triggers a re-render

Architecture changes:

• Start on AST classifier & generalizer that will be used to render information in the UI. This approach will also be needed for other things such as :within, and displaying hidden information about AST in vdom.

[crcn]

Depends on #846