{
  "id": "new-molecules-showcase",
  "name": "New Molecules Showcase",
  "layout": {
    "type": "single"
  },
  "dataSources": [
    {
      "id": "itemCount",
      "type": "static",
      "defaultValue": 42
    },
    {
      "id": "isLoading",
      "type": "static",
      "defaultValue": false
    }
  ],
  "components": [
    {
      "id": "root",
      "type": "div",
      "props": {
        "className": "h-full overflow-auto p-8 bg-background"
      },
      "children": [
        {
          "id": "page-header",
          "type": "div",
          "props": { "className": "mb-8" },
          "children": [
            {
              "id": "page-title",
              "type": "Heading",
              "props": {
                "level": 1,
                "className": "text-4xl font-bold mb-2",
                "children": "New JSON-Compatible Molecules"
              }
            },
            {
              "id": "page-description",
              "type": "Text",
              "props": {
                "className": "text-muted-foreground text-lg",
                "children": "Showcasing the newly added molecular components"
              }
            }
          ]
        },
        {
          "id": "showcase-grid",
          "type": "Grid",
          "props": { "cols": 2, "gap": "lg", "className": "max-w-5xl" },
          "children": [
            {
              "id": "branding-card",
              "type": "Card",
              "children": [
                {
                  "id": "branding-header",
                  "type": "CardHeader",
                  "children": [
                    {
                      "id": "branding-title",
                      "type": "CardTitle",
                      "props": { "children": "AppBranding" }
                    },
                    {
                      "id": "branding-description",
                      "type": "CardDescription",
                      "props": { "children": "Application branding with logo, title, and subtitle" }
                    }
                  ]
                },
                {
                  "id": "branding-content",
                  "type": "CardContent",
                  "children": [
                    {
                      "id": "branding-demo",
                      "type": "AppBranding",
                      "props": {
                        "title": "My Amazing App",
                        "subtitle": "Built with JSON-Powered Components"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "id": "label-badge-card",
              "type": "Card",
              "children": [
                {
                  "id": "label-badge-header",
                  "type": "CardHeader",
                  "children": [
                    {
                      "id": "label-badge-title",
                      "type": "CardTitle",
                      "props": { "children": "LabelWithBadge" }
                    },
                    {
                      "id": "label-badge-description",
                      "type": "CardDescription",
                      "props": { "children": "Label with optional badge indicator" }
                    }
                  ]
                },
                {
                  "id": "label-badge-content",
                  "type": "CardContent",
                  "props": { "className": "space-y-3" },
                  "children": [
                    {
                      "id": "label-badge-demo-1",
                      "type": "LabelWithBadge",
                      "props": {
                        "label": "Total Items"
                      },
                      "bindings": {
                        "badge": { "source": "itemCount" }
                      }
                    },
                    {
                      "id": "label-badge-demo-2",
                      "type": "LabelWithBadge",
                      "props": {
                        "label": "Warning",
                        "badge": "3",
                        "badgeVariant": "destructive"
                      }
                    },
                    {
                      "id": "label-badge-demo-3",
                      "type": "LabelWithBadge",
                      "props": {
                        "label": "Success",
                        "badge": "New",
                        "badgeVariant": "default"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "id": "empty-state-card",
              "type": "Card",
              "children": [
                {
                  "id": "empty-state-header",
                  "type": "CardHeader",
                  "children": [
                    {
                      "id": "empty-state-title",
                      "type": "CardTitle",
                      "props": { "children": "EmptyEditorState" }
                    },
                    {
                      "id": "empty-state-description",
                      "type": "CardDescription",
                      "props": { "children": "Empty state display for editor contexts" }
                    }
                  ]
                },
                {
                  "id": "empty-state-content",
                  "type": "CardContent",
                  "props": { "className": "h-48" },
                  "children": [
                    {
                      "id": "empty-state-demo",
                      "type": "EmptyEditorState",
                      "props": {}
                    }
                  ]
                }
              ]
            },
            {
              "id": "loading-states-card",
              "type": "Card",
              "children": [
                {
                  "id": "loading-states-header",
                  "type": "CardHeader",
                  "children": [
                    {
                      "id": "loading-states-title",
                      "type": "CardTitle",
                      "props": { "children": "Loading States" }
                    },
                    {
                      "id": "loading-states-description",
                      "type": "CardDescription",
                      "props": { "children": "LoadingFallback and LoadingState components" }
                    }
                  ]
                },
                {
                  "id": "loading-states-content",
                  "type": "CardContent",
                  "props": { "className": "space-y-4" },
                  "children": [
                    {
                      "id": "loading-fallback-wrapper",
                      "type": "div",
                      "props": { "className": "h-24 border border-border rounded-md" },
                      "children": [
                        {
                          "id": "loading-fallback-demo",
                          "type": "LoadingFallback",
                          "props": {
                            "message": "Loading your data..."
                          }
                        }
                      ]
                    },
                    {
                      "id": "loading-state-demo",
                      "type": "LoadingState",
                      "props": {
                        "message": "Processing request...",
                        "size": "sm"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "id": "nav-header-card",
              "type": "Card",
              "props": { "className": "col-span-2" },
              "children": [
                {
                  "id": "nav-header-header",
                  "type": "CardHeader",
                  "children": [
                    {
                      "id": "nav-header-title",
                      "type": "CardTitle",
                      "props": { "children": "NavigationGroupHeader" }
                    },
                    {
                      "id": "nav-header-description",
                      "type": "CardDescription",
                      "props": { "children": "Collapsible navigation group header (Note: requires Collapsible wrapper in production)" }
                    }
                  ]
                },
                {
                  "id": "nav-header-content",
                  "type": "CardContent",
                  "children": [
                    {
                      "id": "nav-header-demo",
                      "type": "NavigationGroupHeader",
                      "props": {
                        "label": "Components",
                        "count": 24,
                        "isExpanded": true
                      }
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "id": "info-section",
          "type": "Alert",
          "props": {
            "className": "max-w-5xl mt-8"
          },
          "children": [
            {
              "id": "info-title",
              "type": "div",
              "props": {
                "className": "font-semibold mb-2",
                "children": "✅ Successfully Added to JSON Registry"
              }
            },
            {
              "id": "info-text",
              "type": "div",
              "props": {
                "className": "text-sm",
                "children": "All components shown above are now available in the JSON UI component registry and can be used in JSON schemas."
              }
            }
          ]
        }
      ]
    }
  ],
  "globalActions": []
}
