Add Interfaces

[ClickerMonkey]

Describe the solution you'd like Interfaces let you design a UI through dragging and dropping components. There is a component picker which is organized by Collection -> Category -> Component. Components are defined using the following structure:

interface Component {
  collection: string;
  category: string | string[];
  state: Type;
  template: ComponentTemplate,
  watch: Record<string, ComponentWatcher>,
  slots: Record<string, ComponentSlot>
}
type ComponentValue = { expectedType: Type, value: string }
type ComponentTemplate = [Expression | string, Record<string, ComponentValue>, Array<Expression | string | ComponentTemplate>]
type ComponentWatcher = { type: Type, immediate: boolean, update: (value: any, e: Element, c: ComponentInstance) }
type ComponentSlot = { input: Type, 

interface ComponentInstance {
  values: Record<string, Expression>
  watch: Record<string, Expression>
}
// TODO

Requirements

• Every component can have slots for other components to go into.
• Every component can have properties that are defined with Expressions. When the value of the expression changes the component is updated.
• Every component can generate events, which runs an Expression.
• Every component belongs to one or more categories for organization.
• Every component belongs to a collection which can define any dependencies for the components.
• Every component can define watchable Expressions, when they change the component can be updated.
• Every component can have it's own state defined by the component developer. That state is accessible in expressions.
• Every component can have a reference name so (depending on context) other components can change the state of another?

[ClickerMonkey]

A library defines:

• Dependent JS/CSS
• Globally configurable properties

Features for designer:

• On hover, the component has a border and the type is placed in the top left.
• The viewport is clearly defined
• The viewport width can be controlled (easily toggle between full width, tablet, and mobile?)
• A palette exists where you can drag components from onto the UI
• On drag, if the component has specific targets - any targets of that type in the UI are highlighted.
• If a component has specific targets - but none exists in the UI, disable the component drag.
• A component tree exists
• If you have a component selected and all of its slots have only specified, only those draggers are enabled/visible
• If you have a component selected and some of its slots have only specified, highlight those draggers. Or prioritize them to the top.
• Component copying
• Palette has filter/search
• Component tree has filter/search
• Inline text editing
• Property overrider in editor (inputs only, not expressions), so you can toggle when modals are visible, accordions open, etc.
• Highlight the component you're editing
• The designer has a top bar which has
  • Width/device selector
  • Toggle palette (either hover mode or attached to side)
  • Dropdown with scrollable component tree
  • Toggle editor (either hover mode or attached to side)
  • Dropdown/button with global settings defined by collections imported
  • Toggle preview/designer