# `PhiaUiDesign.Canvas.Node`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phiaui_design/canvas/node.ex#L1)

Represents a single node in the design canvas scene graph.

Each node is either a PhiaUI component, a generic HTML element,
a text node, or a frame (grouping container).

# `family_role`

```elixir
@type family_role() :: :root | :child | nil
```

# `layout_direction`

```elixir
@type layout_direction() :: :vertical | :horizontal | nil
```

# `node_type`

```elixir
@type node_type() :: :phia_component | :html_element | :text | :frame
```

# `size_value`

```elixir
@type size_value() :: :fill | :hug | integer() | String.t() | nil
```

# `t`

```elixir
@type t() :: %PhiaUiDesign.Canvas.Node{
  align_items: atom() | nil,
  attrs: map(),
  children: [String.t()],
  classes: String.t() | nil,
  component: atom() | nil,
  gap: integer() | String.t() | nil,
  height: size_value(),
  id: String.t(),
  justify_content: atom() | nil,
  layout: layout_direction(),
  locked: boolean(),
  module: module() | nil,
  name: String.t(),
  padding: integer() | [integer()] | String.t() | nil,
  parent_id: String.t() | nil,
  slots: map(),
  tag: String.t() | nil,
  text_content: String.t() | nil,
  type: node_type(),
  visible: boolean(),
  width: size_value(),
  wrap: boolean()
}
```

# `new_component`

Create a new PhiaUI component node

# `new_element`

Create a new HTML element node

# `new_frame`

Create a frame (grouping container)

# `new_text`

Create a new text node

---

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