{
  "type": "Stack",
  "props": {
    "direction": "vertical",
    "spacing": "none",
    "className": "w-80 border-l border-border bg-card"
  },
  "children": [
    {
      "type": "div",
      "props": {
        "className": "flex-1 overflow-hidden"
      },
      "children": [
        {
          "type": "ComponentTree",
          "bindings": {
            "components": {
              "source": "data.components"
            },
            "selectedId": {
              "source": "data.selectedId"
            },
            "hoveredId": {
              "source": "data.hoveredId"
            },
            "draggedOverId": {
              "source": "data.draggedOverId"
            },
            "dropPosition": {
              "source": "data.dropPosition"
            },
            "onSelect": {
              "source": "bindings.onSelect"
            },
            "onHover": {
              "source": "bindings.onHover"
            },
            "onHoverEnd": {
              "source": "bindings.onHoverEnd"
            },
            "onDragStart": {
              "source": "bindings.onDragStart"
            },
            "onDragOver": {
              "source": "bindings.onDragOver"
            },
            "onDragLeave": {
              "source": "bindings.onDragLeave"
            },
            "onDrop": {
              "source": "bindings.onDrop"
            }
          }
        }
      ]
    },
    {
      "type": "Separator"
    },
    {
      "type": "div",
      "props": {
        "className": "flex-1 overflow-hidden"
      },
      "children": [
        {
          "type": "PropertyEditor",
          "bindings": {
            "component": {
              "source": "data.selectedComponent"
            },
            "onUpdate": {
              "source": "bindings.onUpdate"
            },
            "onDelete": {
              "source": "bindings.onDelete"
            }
          }
        }
      ]
    }
  ]
}
