[MTI] visual tooling

[crcn]

trafficstars

Goal for this ticket is to track functionality that gets PC closer to a visual editor where the engineer doesn't need to write source code directly.

MVP (order of importance):

• [ ] canvas

  • [ ] ability to insert elements
  • [ ] ability to insert text nodes
    • [ ] ability to change text
  • [ ] ability to create components
  • [ ] ability to create slots (and ability to wrap in slot)

• [ ] properties

  • [ ] ability to change text
  • [ ] ability to add / remove attributes
  • [ ]

• [ ] canvas tooling

  • [ ]
  • [ ] ability to create frames
  • [ ] ability to insert elements
  • [ ] need to be able to edit text (should track to original JS script AST)

• [ ] styling

  • [ ] ability to declare element styles
  • [ ] ability to declare variant styles
  • [ ] ability to focus 1+ variants
    • [ ] editing styles when a variant is on should define that variant style
  • [ ] ability
  • [ ]

Extra:

• [ ] Display box model: https://github.com/crcn/paperclip/issues/470
• [ ] visual guides: https://github.com/crcn/paperclip/issues/550
• [ ] spacer controls: https://github.com/crcn/paperclip/issues/825
• [ ] breadcrumbs: https://github.com/crcn/paperclip/issues/589
• [ ] frames - ability to change screen size from media queries: https://github.com/crcn/paperclip/issues/694
• [ ] style editing
  • [ ] show computed styles: https://github.com/crcn/paperclip/issues/691
• [ ] should display assets and allow dnd to canvas

Wrinkles:

• fragments! Maybe this information can be ignored? Typically they're