{
  "id": "schema-editor-properties-panel",
  "type": "div",
  "props": {
    "className": "w-80 border-l border-border bg-card overflow-y-auto"
  },
  "children": [
    {
      "id": "properties-content",
      "type": "div",
      "props": {
        "className": "p-4 space-y-4"
      },
      "conditional": { "if": "selectedComponent" },
      "children": [
        {
          "id": "component-id-display",
          "type": "div",
          "props": { "className": "space-y-2" },
          "children": [
            {
              "type": "span",
              "props": { "className": "text-sm font-medium" },
              "bindings": { "children": "'Component ID'" }
            },
            {
              "type": "div",
              "props": { "className": "px-2 py-1 bg-muted rounded text-sm font-mono" },
              "bindings": { "children": "selectedComponent?.id" }
            }
          ]
        },
        {
          "id": "component-type-display",
          "type": "div",
          "props": { "className": "space-y-2" },
          "children": [
            {
              "type": "span",
              "props": { "className": "text-sm font-medium" },
              "bindings": { "children": "'Type'" }
            },
            {
              "type": "div",
              "props": { "className": "px-2 py-1 bg-muted rounded text-sm font-mono" },
              "bindings": { "children": "selectedComponent?.type" }
            }
          ]
        }
      ]
    },
    {
      "id": "no-selection-message",
      "type": "div",
      "props": { "className": "p-4 text-sm text-muted-foreground" },
      "conditional": { "if": "!selectedComponent" },
      "bindings": { "children": "'Select a component to edit its properties'" }
    }
  ]
}
