# `Dala.Preview.Canvas`
[🔗](https://github.com/manhvu/dala/blob/main/dev_tools/dala/preview/canvas.ex#L1)

Interactive drag-and-drop UI design canvas for Dala.

A Phoenix LiveView that provides a visual design tool with:
- Component palette (left sidebar) with icons and search
- Design canvas with live phone-frame preview (center)
- Property editor with grouped controls (right sidebar)
- Code preview panel (bottom, collapsible)
- Collapsible tree view with drag-to-reorder

Uses the Dala UI tree map format internally with unique IDs for tracking.
IDs are stripped during code generation.

# `code_panel`

## Attributes

* `tree` (`:map`) (required)
* `code_style` (`:atom`) (required)
* `module_name` (`:string`) (required)
* `copied` (`:boolean`) - Defaults to `false`.

# `design_canvas`

## Attributes

* `tree` (`:map`) (required)
* `selected_id` (`:any`) - Defaults to `nil`.
* `collapsed` (`:any`) - Defaults to `nil`.

# `header_bar`

## Attributes

* `show_code` (`:boolean`) (required)
* `module_name` (`:string`) (required)

# `live_preview`

## Attributes

* `tree` (`:map`) (required)

# `palette`

## Attributes

* `search` (`:string`) - Defaults to `""`.

# `prop_editor`

## Attributes

* `node` (`:map`) (required)

# `prop_field`

## Attributes

* `node` (`:map`) (required)
* `prop_name` (`:atom`) (required)
* `prop_type` (`:atom`) (required)
* `default` (`:any`) - Defaults to `nil`.

# `property_editor`

## Attributes

* `tree` (`:map`) (required)
* `selected_id` (`:any`) - Defaults to `nil`.

# `tree_node`

## Attributes

* `node` (`:map`) (required)
* `selected_id` (`:any`) - Defaults to `nil`.
* `depth` (`:integer`) - Defaults to `0`.
* `collapsed` (`:any`) - Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*