PhiaUiDesign.Web.EditorLive (phia_ui v0.1.17)

Copy Markdown View Source

Main LiveView for the PhiaUI Design visual editor.

Orchestrates the entire editor UI:

  • Toolbar — undo/redo, theme selector, responsive preview, templates, save/load, export
  • Left panel — component catalog (searchable, grouped by tier) and layer tree
  • Canvas — real component rendering with selection overlays
  • Right panel — property inspector for the selected node and real-time code generation

Architecture

State is held in:

  • Scene — ETS-backed scene graph (nodes, parent-child relations)
  • Selection — plain struct tracking selected / hovered node IDs
  • History — Agent-backed undo/redo command stack

Every user action (insert, delete, update) mutates the Scene ETS table, pushes a command to History, and recomputes the derived assigns (:tree, :selected_node, :generated_code).