Support branding and navigation molecules

json-components-registry.json

@@ -761,7 +761,7 @@
       "category": "navigation",
       "canHaveChildren": true,
       "description": "NavigationGroupHeader component",
-      "status": "json-compatible",
+      "status": "supported",
       "source": "molecules",
       "jsonCompatible": true
     },
@@ -910,7 +910,7 @@
       "category": "feedback",
       "canHaveChildren": true,
       "description": "LabelWithBadge component",
-      "status": "json-compatible",
+      "status": "supported",
       "source": "molecules",
       "jsonCompatible": true
     },
@@ -1186,7 +1186,7 @@
       "category": "custom",
       "canHaveChildren": true,
       "description": "AppBranding component",
-      "status": "json-compatible",
+      "status": "supported",
       "source": "molecules",
       "jsonCompatible": true
     },

src/lib/component-definitions.json

@@ -274,6 +274,17 @@
     "icon": "Circle",
     "defaultProps": { "status": "active", "children": "Active" }
   },
+  {
+    "type": "LabelWithBadge",
+    "label": "Label With Badge",
+    "category": "feedback",
+    "icon": "Tag",
+    "defaultProps": {
+      "label": "Total Items",
+      "badge": 24,
+      "badgeVariant": "secondary"
+    }
+  },
   {
     "type": "ErrorBadge",
     "label": "Error Badge",
@@ -727,6 +738,17 @@
       "errorCount": 0
     }
   },
+  {
+    "type": "NavigationGroupHeader",
+    "label": "Navigation Group Header",
+    "category": "navigation",
+    "icon": "CaretDown",
+    "defaultProps": {
+      "label": "Components",
+      "count": 12,
+      "isExpanded": true
+    }
+  },
   {
     "type": "EmptyCanvasState",
     "label": "Empty Canvas State",
@@ -773,6 +795,16 @@
       "selectedTreeId": null
     }
   },
+  {
+    "type": "AppBranding",
+    "label": "App Branding",
+    "category": "custom",
+    "icon": "Layout",
+    "defaultProps": {
+      "title": "CodeForge",
+      "subtitle": "Low-Code Next.js App Builder"
+    }
+  },
   {
     "type": "AppHeader",
     "label": "App Header",

src/lib/json-ui/component-registry.ts

@@ -186,10 +186,15 @@ if (breadcrumbComponent) {
   atomComponents.Breadcrumb = breadcrumbComponent as ComponentType<any>
 }
 
-export const moleculeComponents: UIComponentRegistry = buildRegistryFromNames(
-  moleculeRegistryNames,
-  MoleculeComponents as Record<string, ComponentType<any>>
-)
+export const moleculeComponents: UIComponentRegistry = {
+  ...buildRegistryFromNames(
+    moleculeRegistryNames,
+    MoleculeComponents as Record<string, ComponentType<any>>
+  ),
+  AppBranding: (MoleculeComponents as Record<string, ComponentType<any>>).AppBranding,
+  LabelWithBadge: (MoleculeComponents as Record<string, ComponentType<any>>).LabelWithBadge,
+  NavigationGroupHeader: (MoleculeComponents as Record<string, ComponentType<any>>).NavigationGroupHeader,
+}
 
 export const organismComponents: UIComponentRegistry = buildRegistryFromNames(
   organismRegistryNames,

src/schemas/new-molecules-showcase.json

@@ -76,6 +76,7 @@
                 {
                   "id": "branding-content",
                   "type": "CardContent",
+                  "props": { "className": "space-y-4" },
                   "children": [
                     {
                       "id": "branding-demo",
@@ -84,6 +85,10 @@
                         "title": "My Amazing App",
                         "subtitle": "Built with JSON-Powered Components"
                       }
+                    },
+                    {
+                      "id": "branding-demo-default",
+                      "type": "AppBranding"
                     }
                   ]
                 }
@@ -291,6 +296,7 @@
                 {
                   "id": "nav-header-content",
                   "type": "CardContent",
+                  "props": { "className": "space-y-2" },
                   "children": [
                     {
                       "id": "nav-header-demo",
@@ -300,6 +306,15 @@
                         "count": 24,
                         "isExpanded": true
                       }
+                    },
+                    {
+                      "id": "nav-header-demo-collapsed",
+                      "type": "NavigationGroupHeader",
+                      "props": {
+                        "label": "Workflows",
+                        "count": 6,
+                        "isExpanded": false
+                      }
                     }
                   ]
                 }

src/types/json-ui.ts

@@ -13,7 +13,7 @@ export type ComponentType =
   | 'DataList' | 'DataTable' | 'MetricCard' | 'Timeline'
   | 'LazyBarChart' | 'LazyLineChart' | 'LazyD3BarChart' | 'SeedDataManager'
   | 'SaveIndicator' | 'StorageSettings'
-  | 'AppBranding' | 'LabelWithBadge' | 'EmptyEditorState' | 'LoadingFallback' | 'LoadingState' | 'NavigationGroupHeader'
+  | 'AppBranding' | 'LabelWithBadge' | 'NavigationGroupHeader' | 'EmptyEditorState' | 'LoadingFallback' | 'LoadingState'
   | 'CodeExplanationDialog' | 'ComponentBindingDialog' | 'DataSourceCard' | 'DataSourceEditorDialog' | 'TreeCard' | 'TreeFormDialog'
   | 'ToolbarButton'
   | 'SchemaCodeViewer'