diff --git a/json-components-registry.json b/json-components-registry.json
index 1df205f..7e39f8e 100644
--- a/json-components-registry.json
+++ b/json-components-registry.json
@@ -31,20 +31,6 @@
     "icons": []
   },
   "components": [
-    {
-      "type": "accordion",
-      "name": "accordion",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Accordion",
       "name": "Accordion",
@@ -95,20 +81,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "alert",
-      "name": "alert",
-      "category": "feedback",
-      "canHaveChildren": true,
-      "description": "Feedback and status component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Alert",
       "name": "Alert",
@@ -192,29 +164,6 @@
         "export": "ArrowRight"
       }
     },
-    {
-      "type": "article",
-      "name": "article",
-      "category": "layout",
-      "canHaveChildren": true,
-      "description": "Semantic article container",
-      "status": "supported",
-      "source": "primitive"
-    },
-    {
-      "type": "aspect-ratio",
-      "name": "aspect-ratio",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "AspectRatio",
       "name": "AspectRatio",
@@ -242,20 +191,6 @@
         "export": "AtomicLibraryShowcase"
       }
     },
-    {
-      "type": "avatar",
-      "name": "avatar",
-      "category": "data",
-      "canHaveChildren": true,
-      "description": "Data display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Avatar",
       "name": "Avatar",
@@ -274,20 +209,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "badge",
-      "name": "badge",
-      "category": "feedback",
-      "canHaveChildren": false,
-      "description": "Feedback and status component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Badge",
       "name": "Badge",
@@ -342,25 +263,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "breadcrumb",
-      "name": "breadcrumb",
-      "category": "navigation",
-      "canHaveChildren": true,
-      "description": "Navigation component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": false,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true,
-        "notes": "Complex logic - needs wrapper"
-      },
-      "load": {
-        "path": "@/components/ui/breadcrumb",
-        "export": "breadcrumb"
-      }
-    },
     {
       "type": "Breadcrumb",
       "name": "Breadcrumb",
@@ -371,20 +273,6 @@
       "source": "atoms",
       "jsonCompatible": true
     },
-    {
-      "type": "button",
-      "name": "button",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Button",
       "name": "Button",
@@ -445,20 +333,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "buttonVariants",
-      "name": "buttonVariants",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Calendar",
       "name": "Calendar",
@@ -504,20 +378,6 @@
       "source": "molecules",
       "jsonCompatible": true
     },
-    {
-      "type": "card",
-      "name": "card",
-      "category": "data",
-      "canHaveChildren": true,
-      "description": "Data display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Card",
       "name": "Card",
@@ -793,20 +653,6 @@
         "export": "Check"
       }
     },
-    {
-      "type": "checkbox",
-      "name": "checkbox",
-      "category": "input",
-      "canHaveChildren": false,
-      "description": "Form input component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Checkbox",
       "name": "Checkbox",
@@ -931,20 +777,6 @@
       "source": "molecules",
       "jsonCompatible": true
     },
-    {
-      "type": "collapsible",
-      "name": "collapsible",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Collapsible",
       "name": "Collapsible",
@@ -1089,6 +921,26 @@
         "export": "ComponentTreeBuilder"
       }
     },
+    {
+      "type": "ComponentTreeEmptyState",
+      "name": "ComponentTreeEmptyState",
+      "category": "data",
+      "canHaveChildren": true,
+      "description": "Component Tree Empty State component",
+      "status": "supported",
+      "source": "molecules",
+      "jsonCompatible": true
+    },
+    {
+      "type": "ComponentTreeHeader",
+      "name": "ComponentTreeHeader",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Component Tree Header component",
+      "status": "supported",
+      "source": "molecules",
+      "jsonCompatible": true
+    },
     {
       "type": "ComponentTreeManager",
       "name": "ComponentTreeManager",
@@ -1112,6 +964,16 @@
       "status": "supported",
       "source": "atoms"
     },
+    {
+      "type": "ComponentTreeNodes",
+      "name": "ComponentTreeNodes",
+      "category": "data",
+      "canHaveChildren": true,
+      "description": "Component Tree Nodes component",
+      "status": "supported",
+      "source": "molecules",
+      "jsonCompatible": true
+    },
     {
       "type": "ComponentTreeWrapper",
       "name": "ComponentTreeWrapper",
@@ -1126,6 +988,16 @@
         "export": "ComponentTreeWrapper"
       }
     },
+    {
+      "type": "ConditionalWrapper",
+      "name": "ConditionalWrapper",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Conditional Wrapper component",
+      "status": "supported",
+      "source": "atoms",
+      "jsonCompatible": true
+    },
     {
       "type": "ConfirmButton",
       "name": "ConfirmButton",
@@ -1281,6 +1153,26 @@
         "export": "DataSourceEditorDialogWrapper"
       }
     },
+    {
+      "type": "DataSourceGroupSection",
+      "name": "DataSourceGroupSection",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Data Source Group Section component",
+      "status": "supported",
+      "source": "organisms",
+      "jsonCompatible": true
+    },
+    {
+      "type": "DataSourceIdField",
+      "name": "DataSourceIdField",
+      "category": "custom",
+      "canHaveChildren": true,
+      "description": "Data Source Id Field component",
+      "status": "supported",
+      "source": "molecules",
+      "jsonCompatible": true
+    },
     {
       "type": "DataSourceManager",
       "name": "DataSourceManager",
@@ -1291,6 +1183,16 @@
       "source": "organisms",
       "jsonCompatible": true
     },
+    {
+      "type": "DataSourceManagerHeader",
+      "name": "DataSourceManagerHeader",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Data Source Manager Header component",
+      "status": "supported",
+      "source": "organisms",
+      "jsonCompatible": true
+    },
     {
       "type": "DataTable",
       "name": "DataTable",
@@ -1318,25 +1220,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "dialog",
-      "name": "dialog",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": false,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true,
-        "notes": "Complex logic - needs wrapper"
-      },
-      "load": {
-        "path": "@/components/ui/dialog",
-        "export": "dialog"
-      }
-    },
     {
       "type": "Dialog",
       "name": "Dialog",
@@ -1388,15 +1271,6 @@
         "autoGenerated": true
       }
     },
-    {
-      "type": "div",
-      "name": "div",
-      "category": "layout",
-      "canHaveChildren": true,
-      "description": "Generic block container",
-      "status": "supported",
-      "source": "primitive"
-    },
     {
       "type": "Divider",
       "name": "Divider",
@@ -1463,25 +1337,6 @@
         "export": "Download"
       }
     },
-    {
-      "type": "drawer",
-      "name": "drawer",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": false,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true,
-        "notes": "Complex logic - needs wrapper"
-      },
-      "load": {
-        "path": "@/components/ui/drawer",
-        "export": "drawer"
-      }
-    },
     {
       "type": "Drawer",
       "name": "Drawer",
@@ -1500,6 +1355,16 @@
       "status": "supported",
       "source": "ui"
     },
+    {
+      "type": "DynamicText",
+      "name": "DynamicText",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Dynamic Text component",
+      "status": "supported",
+      "source": "atoms",
+      "jsonCompatible": true
+    },
     {
       "type": "Edit",
       "name": "Edit",
@@ -1743,13 +1608,14 @@
       "source": "atoms"
     },
     {
-      "type": "footer",
-      "name": "footer",
+      "type": "FlexLayout",
+      "name": "FlexLayout",
       "category": "layout",
       "canHaveChildren": true,
-      "description": "Semantic footer container",
+      "description": "Flex Layout component",
       "status": "supported",
-      "source": "primitive"
+      "source": "atoms",
+      "jsonCompatible": true
     },
     {
       "type": "Form",
@@ -1817,13 +1683,14 @@
       "source": "atoms"
     },
     {
-      "type": "header",
-      "name": "header",
+      "type": "GridLayout",
+      "name": "GridLayout",
       "category": "layout",
       "canHaveChildren": true,
-      "description": "Semantic header container",
+      "description": "Grid Layout component",
       "status": "supported",
-      "source": "primitive"
+      "source": "atoms",
+      "jsonCompatible": true
     },
     {
       "type": "Heading",
@@ -1879,20 +1746,6 @@
         "export": "House"
       }
     },
-    {
-      "type": "hover-card",
-      "name": "hover-card",
-      "category": "data",
-      "canHaveChildren": true,
-      "description": "Data display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "HoverCard",
       "name": "HoverCard",
@@ -1939,6 +1792,16 @@
       "status": "supported",
       "source": "atoms"
     },
+    {
+      "type": "IconRenderer",
+      "name": "IconRenderer",
+      "category": "display",
+      "canHaveChildren": false,
+      "description": "Icon Renderer component",
+      "status": "supported",
+      "source": "atoms",
+      "jsonCompatible": true
+    },
     {
       "type": "IconText",
       "name": "IconText",
@@ -1996,20 +1859,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "input",
-      "name": "input",
-      "category": "input",
-      "canHaveChildren": false,
-      "description": "Form input component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Input",
       "name": "Input",
@@ -2019,25 +1868,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "input-otp",
-      "name": "input-otp",
-      "category": "input",
-      "canHaveChildren": false,
-      "description": "Form input component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": false,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true,
-        "notes": "Contains hooks - needs wrapper"
-      },
-      "load": {
-        "path": "@/components/ui/input-otp",
-        "export": "input-otp"
-      }
-    },
     {
       "type": "InputOtp",
       "name": "InputOtp",
@@ -2134,18 +1964,14 @@
       "source": "atoms"
     },
     {
-      "type": "label",
-      "name": "label",
-      "category": "display",
+      "type": "KvSourceFields",
+      "name": "KvSourceFields",
+      "category": "custom",
       "canHaveChildren": true,
-      "description": "Display component",
+      "description": "Kv Source Fields component",
       "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
+      "source": "molecules",
+      "jsonCompatible": true
     },
     {
       "type": "Label",
@@ -2346,15 +2172,6 @@
         "export": "Envelope"
       }
     },
-    {
-      "type": "main",
-      "name": "main",
-      "category": "layout",
-      "canHaveChildren": true,
-      "description": "Semantic main container",
-      "status": "supported",
-      "source": "primitive"
-    },
     {
       "type": "Menu",
       "name": "Menu",
@@ -2506,6 +2323,24 @@
       "status": "supported",
       "source": "atoms"
     },
+    {
+      "type": "PWASettings",
+      "name": "PWASettings",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "custom",
+      "jsonCompatible": false,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      },
+      "load": {
+        "path": "@/components/PWASettings",
+        "export": "PWASettings"
+      }
+    },
     {
       "type": "PageHeader",
       "name": "PageHeader",
@@ -2535,6 +2370,16 @@
       "status": "supported",
       "source": "ui"
     },
+    {
+      "type": "Panel",
+      "name": "Panel",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Panel component",
+      "status": "supported",
+      "source": "atoms",
+      "jsonCompatible": true
+    },
     {
       "type": "PanelHeader",
       "name": "PanelHeader",
@@ -2601,20 +2446,6 @@
         "export": "Plus"
       }
     },
-    {
-      "type": "popover",
-      "name": "popover",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Popover",
       "name": "Popover",
@@ -2638,20 +2469,6 @@
         "autoGenerated": true
       }
     },
-    {
-      "type": "progress",
-      "name": "progress",
-      "category": "feedback",
-      "canHaveChildren": false,
-      "description": "Feedback and status component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Progress",
       "name": "Progress",
@@ -2698,6 +2515,16 @@
       "source": "molecules",
       "jsonCompatible": true
     },
+    {
+      "type": "PropertyEditorEmptyState",
+      "name": "PropertyEditorEmptyState",
+      "category": "custom",
+      "canHaveChildren": true,
+      "description": "Property Editor Empty State component",
+      "status": "supported",
+      "source": "molecules",
+      "jsonCompatible": true
+    },
     {
       "type": "PropertyEditorField",
       "name": "PropertyEditorField",
@@ -2707,6 +2534,26 @@
       "status": "supported",
       "source": "atoms"
     },
+    {
+      "type": "PropertyEditorHeader",
+      "name": "PropertyEditorHeader",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Property Editor Header component",
+      "status": "supported",
+      "source": "molecules",
+      "jsonCompatible": true
+    },
+    {
+      "type": "PropertyEditorSection",
+      "name": "PropertyEditorSection",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Property Editor Section component",
+      "status": "supported",
+      "source": "molecules",
+      "jsonCompatible": true
+    },
     {
       "type": "Pulse",
       "name": "Pulse",
@@ -2716,24 +2563,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "PWASettings",
-      "name": "PWASettings",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "custom",
-      "jsonCompatible": false,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      },
-      "load": {
-        "path": "@/components/PWASettings",
-        "export": "PWASettings"
-      }
-    },
     {
       "type": "QuickActionButton",
       "name": "QuickActionButton",
@@ -2752,20 +2581,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "radio-group",
-      "name": "radio-group",
-      "category": "input",
-      "canHaveChildren": false,
-      "description": "Form input component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "RadioGroup",
       "name": "RadioGroup",
@@ -2806,18 +2621,14 @@
       }
     },
     {
-      "type": "resizable",
-      "name": "resizable",
+      "type": "RepeatWrapper",
+      "name": "RepeatWrapper",
       "category": "display",
       "canHaveChildren": true,
-      "description": "Display component",
+      "description": "Repeat Wrapper component",
       "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
+      "source": "atoms",
+      "jsonCompatible": true
     },
     {
       "type": "Resizable",
@@ -2965,20 +2776,6 @@
       "source": "organisms",
       "jsonCompatible": true
     },
-    {
-      "type": "scroll-area",
-      "name": "scroll-area",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "ScrollArea",
       "name": "ScrollArea",
@@ -3020,15 +2817,6 @@
       "source": "atoms",
       "jsonCompatible": true
     },
-    {
-      "type": "section",
-      "name": "section",
-      "category": "layout",
-      "canHaveChildren": true,
-      "description": "Semantic section container",
-      "status": "supported",
-      "source": "primitive"
-    },
     {
       "type": "Section",
       "name": "Section",
@@ -3080,20 +2868,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "separator",
-      "name": "separator",
-      "category": "display",
-      "canHaveChildren": false,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Separator",
       "name": "Separator",
@@ -3141,25 +2915,6 @@
         "export": "ShareNetwork"
       }
     },
-    {
-      "type": "sheet",
-      "name": "sheet",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": false,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true,
-        "notes": "Complex logic - needs wrapper"
-      },
-      "load": {
-        "path": "@/components/ui/sheet",
-        "export": "sheet"
-      }
-    },
     {
       "type": "Sheet",
       "name": "Sheet",
@@ -3192,20 +2947,6 @@
         "autoGenerated": true
       }
     },
-    {
-      "type": "skeleton",
-      "name": "skeleton",
-      "category": "feedback",
-      "canHaveChildren": true,
-      "description": "Feedback and status component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Skeleton",
       "name": "Skeleton",
@@ -3215,25 +2956,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "slider",
-      "name": "slider",
-      "category": "input",
-      "canHaveChildren": false,
-      "description": "Form input component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": false,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true,
-        "notes": "Contains hooks - needs wrapper"
-      },
-      "load": {
-        "path": "@/components/ui/slider",
-        "export": "slider"
-      }
-    },
     {
       "type": "Slider",
       "name": "Slider",
@@ -3243,25 +2965,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "sonner",
-      "name": "sonner",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": false,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true,
-        "notes": "Contains hooks - needs wrapper"
-      },
-      "load": {
-        "path": "@/components/ui/sonner",
-        "export": "sonner"
-      }
-    },
     {
       "type": "Sonner",
       "name": "Sonner",
@@ -3328,6 +3031,16 @@
       "status": "supported",
       "source": "atoms"
     },
+    {
+      "type": "StaticSourceFields",
+      "name": "StaticSourceFields",
+      "category": "custom",
+      "canHaveChildren": true,
+      "description": "Static Source Fields component",
+      "status": "supported",
+      "source": "molecules",
+      "jsonCompatible": true
+    },
     {
       "type": "StatusBadge",
       "name": "StatusBadge",
@@ -3402,20 +3115,6 @@
         "autoGenerated": true
       }
     },
-    {
-      "type": "switch",
-      "name": "switch",
-      "category": "input",
-      "canHaveChildren": false,
-      "description": "Form input component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Switch",
       "name": "Switch",
@@ -3448,25 +3147,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "table",
-      "name": "table",
-      "category": "navigation",
-      "canHaveChildren": true,
-      "description": "Navigation component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": false,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true,
-        "notes": "Complex logic - needs wrapper"
-      },
-      "load": {
-        "path": "@/components/ui/table",
-        "export": "table"
-      }
-    },
     {
       "type": "Table",
       "name": "Table",
@@ -3535,20 +3215,6 @@
       "status": "supported",
       "source": "ui"
     },
-    {
-      "type": "tabs",
-      "name": "tabs",
-      "category": "navigation",
-      "canHaveChildren": true,
-      "description": "Navigation component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Tabs",
       "name": "Tabs",
@@ -3658,29 +3324,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "textarea",
-      "name": "textarea",
-      "category": "input",
-      "canHaveChildren": true,
-      "description": "Form input component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
-    {
-      "type": "Textarea",
-      "name": "Textarea",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Textarea component",
-      "status": "supported",
-      "source": "ui"
-    },
     {
       "type": "TextArea",
       "name": "TextArea",
@@ -3712,6 +3355,15 @@
       "status": "supported",
       "source": "atoms"
     },
+    {
+      "type": "Textarea",
+      "name": "Textarea",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Textarea component",
+      "status": "supported",
+      "source": "ui"
+    },
     {
       "type": "Timeline",
       "name": "Timeline",
@@ -3739,20 +3391,6 @@
       "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "toggle",
-      "name": "toggle",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Toggle",
       "name": "Toggle",
@@ -3771,20 +3409,6 @@
       "status": "supported",
       "source": "ui"
     },
-    {
-      "type": "toggleVariants",
-      "name": "toggleVariants",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "ToolbarActions",
       "name": "ToolbarActions",
@@ -3805,20 +3429,6 @@
       "source": "molecules",
       "jsonCompatible": true
     },
-    {
-      "type": "tooltip",
-      "name": "tooltip",
-      "category": "display",
-      "canHaveChildren": true,
-      "description": "Display component",
-      "status": "supported",
-      "source": "ui",
-      "jsonCompatible": true,
-      "metadata": {
-        "conversionDate": "2026-01-18",
-        "autoGenerated": true
-      }
-    },
     {
       "type": "Tooltip",
       "name": "Tooltip",
@@ -3968,24 +3578,172 @@
       }
     },
     {
-      "type": "single",
-      "name": "SingleColumnLayout",
-      "category": "layout",
+      "type": "accordion",
+      "name": "accordion",
+      "category": "display",
       "canHaveChildren": true,
-      "description": "Single column layout",
+      "description": "Display component",
       "status": "supported",
-      "source": "layouts",
-      "jsonCompatible": true
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
     },
     {
-      "type": "kv",
-      "name": "KVStorage",
-      "category": "data",
-      "canHaveChildren": false,
-      "description": "Key-value storage data source",
+      "type": "alert",
+      "name": "alert",
+      "category": "feedback",
+      "canHaveChildren": true,
+      "description": "Feedback and status component",
       "status": "supported",
-      "source": "data-sources",
-      "jsonCompatible": true
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "article",
+      "name": "article",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Semantic article container",
+      "status": "supported",
+      "source": "primitive"
+    },
+    {
+      "type": "aspect-ratio",
+      "name": "aspect-ratio",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "avatar",
+      "name": "avatar",
+      "category": "data",
+      "canHaveChildren": true,
+      "description": "Data display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "badge",
+      "name": "badge",
+      "category": "feedback",
+      "canHaveChildren": false,
+      "description": "Feedback and status component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "breadcrumb",
+      "name": "breadcrumb",
+      "category": "navigation",
+      "canHaveChildren": true,
+      "description": "Navigation component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": false,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true,
+        "notes": "Complex logic - needs wrapper"
+      },
+      "load": {
+        "path": "@/components/ui/breadcrumb",
+        "export": "breadcrumb"
+      }
+    },
+    {
+      "type": "button",
+      "name": "button",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "buttonVariants",
+      "name": "buttonVariants",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "card",
+      "name": "card",
+      "category": "data",
+      "canHaveChildren": true,
+      "description": "Data display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "checkbox",
+      "name": "checkbox",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Form input component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "collapsible",
+      "name": "collapsible",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
     },
     {
       "type": "create",
@@ -4007,6 +3765,151 @@
       "source": "actions",
       "jsonCompatible": true
     },
+    {
+      "type": "dialog",
+      "name": "dialog",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": false,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true,
+        "notes": "Complex logic - needs wrapper"
+      },
+      "load": {
+        "path": "@/components/ui/dialog",
+        "export": "dialog"
+      }
+    },
+    {
+      "type": "div",
+      "name": "div",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Generic block container",
+      "status": "supported",
+      "source": "primitive"
+    },
+    {
+      "type": "drawer",
+      "name": "drawer",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": false,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true,
+        "notes": "Complex logic - needs wrapper"
+      },
+      "load": {
+        "path": "@/components/ui/drawer",
+        "export": "drawer"
+      }
+    },
+    {
+      "type": "footer",
+      "name": "footer",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Semantic footer container",
+      "status": "supported",
+      "source": "primitive"
+    },
+    {
+      "type": "header",
+      "name": "header",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Semantic header container",
+      "status": "supported",
+      "source": "primitive"
+    },
+    {
+      "type": "hover-card",
+      "name": "hover-card",
+      "category": "data",
+      "canHaveChildren": true,
+      "description": "Data display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "input",
+      "name": "input",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Form input component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "input-otp",
+      "name": "input-otp",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Form input component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": false,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true,
+        "notes": "Contains hooks - needs wrapper"
+      },
+      "load": {
+        "path": "@/components/ui/input-otp",
+        "export": "input-otp"
+      }
+    },
+    {
+      "type": "kv",
+      "name": "KVStorage",
+      "category": "data",
+      "canHaveChildren": false,
+      "description": "Key-value storage data source",
+      "status": "supported",
+      "source": "data-sources",
+      "jsonCompatible": true
+    },
+    {
+      "type": "label",
+      "name": "label",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "main",
+      "name": "main",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Semantic main container",
+      "status": "supported",
+      "source": "primitive"
+    },
     {
       "type": "navigate",
       "name": "NavigateAction",
@@ -4017,6 +3920,283 @@
       "source": "actions",
       "jsonCompatible": true
     },
+    {
+      "type": "popover",
+      "name": "popover",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "progress",
+      "name": "progress",
+      "category": "feedback",
+      "canHaveChildren": false,
+      "description": "Feedback and status component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "radio-group",
+      "name": "radio-group",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Form input component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "resizable",
+      "name": "resizable",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "scroll-area",
+      "name": "scroll-area",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "section",
+      "name": "section",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Semantic section container",
+      "status": "supported",
+      "source": "primitive"
+    },
+    {
+      "type": "separator",
+      "name": "separator",
+      "category": "display",
+      "canHaveChildren": false,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "sheet",
+      "name": "sheet",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": false,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true,
+        "notes": "Complex logic - needs wrapper"
+      },
+      "load": {
+        "path": "@/components/ui/sheet",
+        "export": "sheet"
+      }
+    },
+    {
+      "type": "single",
+      "name": "SingleColumnLayout",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Single column layout",
+      "status": "supported",
+      "source": "layouts",
+      "jsonCompatible": true
+    },
+    {
+      "type": "skeleton",
+      "name": "skeleton",
+      "category": "feedback",
+      "canHaveChildren": true,
+      "description": "Feedback and status component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "slider",
+      "name": "slider",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Form input component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": false,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true,
+        "notes": "Contains hooks - needs wrapper"
+      },
+      "load": {
+        "path": "@/components/ui/slider",
+        "export": "slider"
+      }
+    },
+    {
+      "type": "sonner",
+      "name": "sonner",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": false,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true,
+        "notes": "Contains hooks - needs wrapper"
+      },
+      "load": {
+        "path": "@/components/ui/sonner",
+        "export": "sonner"
+      }
+    },
+    {
+      "type": "switch",
+      "name": "switch",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Form input component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "table",
+      "name": "table",
+      "category": "navigation",
+      "canHaveChildren": true,
+      "description": "Navigation component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": false,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true,
+        "notes": "Complex logic - needs wrapper"
+      },
+      "load": {
+        "path": "@/components/ui/table",
+        "export": "table"
+      }
+    },
+    {
+      "type": "tabs",
+      "name": "tabs",
+      "category": "navigation",
+      "canHaveChildren": true,
+      "description": "Navigation component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "textarea",
+      "name": "textarea",
+      "category": "input",
+      "canHaveChildren": true,
+      "description": "Form input component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "toggle",
+      "name": "toggle",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "toggleVariants",
+      "name": "toggleVariants",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
+    {
+      "type": "tooltip",
+      "name": "tooltip",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Display component",
+      "status": "supported",
+      "source": "ui",
+      "jsonCompatible": true,
+      "metadata": {
+        "conversionDate": "2026-01-18",
+        "autoGenerated": true
+      }
+    },
     {
       "type": "update",
       "name": "UpdateAction",
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index 71fdb41..b536629 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -1,2 +1,10 @@
 // Auto-generated - only exports existing TSX files
 
+export { FlexLayout } from '@/lib/json-ui/json-components'
+export { IconRenderer } from '@/lib/json-ui/json-components'
+export { ConditionalWrapper } from '@/lib/json-ui/json-components'
+export { DataCard } from '@/lib/json-ui/json-components'
+export { Panel } from '@/lib/json-ui/json-components'
+export { DynamicText } from '@/lib/json-ui/json-components'
+export { GridLayout } from '@/lib/json-ui/json-components'
+export { RepeatWrapper } from '@/lib/json-ui/json-components'
diff --git a/src/components/json-definitions/component-tree-empty-state.json b/src/components/json-definitions/component-tree-empty-state.json
new file mode 100644
index 0000000..3fb5271
--- /dev/null
+++ b/src/components/json-definitions/component-tree-empty-state.json
@@ -0,0 +1,29 @@
+{
+  "id": "component-tree-empty-state",
+  "props": {
+    "children": [
+      {
+        "props": {
+          "className": "w-12 h-12 mx-auto mb-4 opacity-50"
+        },
+        "type": "Icon"
+      },
+      {
+        "props": {
+          "className": "text-sm",
+          "text": "{componentTreeConfig.emptyState.title}"
+        },
+        "type": "Text"
+      },
+      {
+        "props": {
+          "className": "text-xs mt-1",
+          "text": "{componentTreeConfig.emptyState.description}"
+        },
+        "type": "Text"
+      }
+    ],
+    "className": "p-8 text-center text-muted-foreground"
+  },
+  "type": "ComponentTreeEmptyState"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/component-tree-header.json b/src/components/json-definitions/component-tree-header.json
new file mode 100644
index 0000000..c4b0e7f
--- /dev/null
+++ b/src/components/json-definitions/component-tree-header.json
@@ -0,0 +1,126 @@
+{
+  "children": [
+    {
+      "children": [
+        {
+          "props": {
+            "icon": {
+              "source": "data.icon"
+            },
+            "subtitle": {
+              "source": "data.count > 1 ? data.config.subtitle.plural : data.config.subtitle.singular"
+            },
+            "title": {
+              "source": "data.config.title"
+            }
+          },
+          "type": "PanelHeader"
+        },
+        {
+          "else": null,
+          "if": "data.count > 0",
+          "then": {
+            "children": [
+              {
+                "children": [
+                  {
+                    "children": [
+                      {
+                        "children": [
+                          {
+                            "props": {
+                              "size": 16
+                            },
+                            "type": "CaretDown"
+                          }
+                        ],
+                        "props": {
+                          "className": "h-7 w-7 p-0",
+                          "onClick": {
+                            "source": "data.onExpandAll"
+                          },
+                          "size": "sm",
+                          "variant": "ghost"
+                        },
+                        "type": "Button"
+                      }
+                    ],
+                    "type": "TooltipTrigger"
+                  },
+                  {
+                    "children": [
+                      {
+                        "source": "data.config.tooltips.expandAll"
+                      }
+                    ],
+                    "type": "TooltipContent"
+                  }
+                ],
+                "type": "Tooltip"
+              },
+              {
+                "children": [
+                  {
+                    "children": [
+                      {
+                        "children": [
+                          {
+                            "props": {
+                              "size": 16
+                            },
+                            "type": "CaretRight"
+                          }
+                        ],
+                        "props": {
+                          "className": "h-7 w-7 p-0",
+                          "onClick": {
+                            "source": "data.onCollapseAll"
+                          },
+                          "size": "sm",
+                          "variant": "ghost"
+                        },
+                        "type": "Button"
+                      }
+                    ],
+                    "type": "TooltipTrigger"
+                  },
+                  {
+                    "children": [
+                      {
+                        "source": "data.config.tooltips.collapseAll"
+                      }
+                    ],
+                    "type": "TooltipContent"
+                  }
+                ],
+                "type": "Tooltip"
+              }
+            ],
+            "props": {
+              "className": "flex gap-1"
+            },
+            "type": "div"
+          }
+        }
+      ],
+      "props": {
+        "className": "flex items-center justify-between mb-2"
+      },
+      "type": "div"
+    }
+  ],
+  "className": "p-4",
+  "id": "component-tree-header",
+  "props": {
+    "componentsCount": {
+      "source": "data.count"
+    },
+    "onCollapseAll": {
+      "source": "data.onCollapseAll"
+    },
+    "onExpandAll": {
+      "source": "data.onExpandAll"
+    }
+  },
+  "type": "ComponentTreeHeader"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/component-tree-nodes.json b/src/components/json-definitions/component-tree-nodes.json
new file mode 100644
index 0000000..b4ee87f
--- /dev/null
+++ b/src/components/json-definitions/component-tree-nodes.json
@@ -0,0 +1,104 @@
+{
+  "children": [
+    {
+      "props": {
+        "component": {
+          "source": "data.component"
+        },
+        "depth": {
+          "source": "data.depth"
+        },
+        "dropPosition": {
+          "source": "data.dropPosition"
+        },
+        "hasChildren": {
+          "source": "data.hasChildren"
+        },
+        "isDraggedOver": {
+          "source": "data.isDraggedOver"
+        },
+        "isExpanded": {
+          "source": "data.isExpanded"
+        },
+        "isHovered": {
+          "source": "data.isHovered"
+        },
+        "isSelected": {
+          "source": "data.isSelected"
+        },
+        "onDragLeave": {
+          "source": "data.onDragLeave"
+        },
+        "onDragOver": {
+          "source": "data.onDragOver"
+        },
+        "onDragStart": {
+          "source": "data.onDragStart"
+        },
+        "onDrop": {
+          "source": "data.onDrop"
+        },
+        "onHover": {
+          "source": "data.onHover"
+        },
+        "onHoverEnd": {
+          "source": "data.onHoverEnd"
+        },
+        "onSelect": {
+          "source": "data.onSelect"
+        },
+        "onToggleExpand": {
+          "source": "data.onToggleExpand"
+        }
+      },
+      "type": "ComponentTreeNode"
+    }
+  ],
+  "className": "component-tree-nodes",
+  "id": "component-tree-nodes",
+  "props": {
+    "components": {
+      "source": "data.components"
+    },
+    "draggedOverId": {
+      "source": "data.draggedOverId"
+    },
+    "dropPosition": {
+      "source": "data.dropPosition"
+    },
+    "expandedIds": {
+      "source": "data.expandedIds"
+    },
+    "hoveredId": {
+      "source": "data.hoveredId"
+    },
+    "onDragLeave": {
+      "source": "data.onDragLeave"
+    },
+    "onDragOver": {
+      "source": "data.onDragOver"
+    },
+    "onDragStart": {
+      "source": "data.onDragStart"
+    },
+    "onDrop": {
+      "source": "data.onDrop"
+    },
+    "onHover": {
+      "source": "data.onHover"
+    },
+    "onHoverEnd": {
+      "source": "data.onHoverEnd"
+    },
+    "onSelect": {
+      "source": "data.onSelect"
+    },
+    "onToggleExpand": {
+      "source": "data.onToggleExpand"
+    },
+    "selectedId": {
+      "source": "data.selectedId"
+    }
+  },
+  "type": "ComponentTreeNodes"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/conditional-wrapper.json b/src/components/json-definitions/conditional-wrapper.json
new file mode 100644
index 0000000..0d66337
--- /dev/null
+++ b/src/components/json-definitions/conditional-wrapper.json
@@ -0,0 +1,51 @@
+{
+  "bindings": {},
+  "children": [
+    {
+      "props": {
+        "text": "Conditional content"
+      },
+      "type": "Text"
+    }
+  ],
+  "className": "optional-classes",
+  "conditional": {
+    "else": "renderFallback",
+    "if": "data.condition",
+    "then": "renderChildren"
+  },
+  "dataBinding": "data.somePath",
+  "events": [
+    {
+      "actions": [
+        {
+          "id": "yourActionId",
+          "type": "custom"
+        }
+      ],
+      "event": "click"
+    }
+  ],
+  "id": "conditional-wrapper",
+  "loop": {
+    "indexVar": "index",
+    "itemVar": "item",
+    "source": "data.childrenList"
+  },
+  "props": {
+    "children": {
+      "source": "data.children"
+    },
+    "className": {
+      "source": "data.className"
+    },
+    "condition": {
+      "source": "data.condition"
+    },
+    "fallback": {
+      "source": "data.fallback"
+    }
+  },
+  "style": {},
+  "type": "ConditionalWrapper"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/data-card.json b/src/components/json-definitions/data-card.json
new file mode 100644
index 0000000..9aea1ae
--- /dev/null
+++ b/src/components/json-definitions/data-card.json
@@ -0,0 +1,20 @@
+{
+  "bindings": {},
+  "children": [],
+  "className": "",
+  "conditional": null,
+  "dataBinding": null,
+  "events": [],
+  "id": "data-card",
+  "loop": null,
+  "props": {
+    "children": "",
+    "className": "",
+    "description": "",
+    "gradient": "",
+    "icon": "",
+    "title": ""
+  },
+  "style": {},
+  "type": "DataCard"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/data-source-group-section.json b/src/components/json-definitions/data-source-group-section.json
new file mode 100644
index 0000000..8c015b8
--- /dev/null
+++ b/src/components/json-definitions/data-source-group-section.json
@@ -0,0 +1,44 @@
+{
+  "children": [
+    {
+      "children": [
+        {
+          "children": "Label",
+          "props": {},
+          "type": "text"
+        },
+        {
+          "children": " (0)",
+          "props": {},
+          "type": "text"
+        }
+      ],
+      "props": {
+        "className": "text-sm font-semibold mb-3",
+        "icon": {}
+      },
+      "type": "IconText"
+    },
+    {
+      "children": [],
+      "props": {
+        "direction": "vertical",
+        "spacing": "sm"
+      },
+      "type": "Stack"
+    }
+  ],
+  "className": "",
+  "dataBinding": "data.path",
+  "id": "data-source-group-section",
+  "props": {
+    "dataSources": [],
+    "getDependents": {},
+    "icon": {},
+    "label": "",
+    "onDelete": {},
+    "onEdit": {}
+  },
+  "style": {},
+  "type": "DataSourceGroupSection"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/data-source-id-field.json b/src/components/json-definitions/data-source-id-field.json
new file mode 100644
index 0000000..1fdb122
--- /dev/null
+++ b/src/components/json-definitions/data-source-id-field.json
@@ -0,0 +1,45 @@
+{
+  "children": [
+    {
+      "props": {
+        "children": {
+          "source": "data.label"
+        }
+      },
+      "type": "Label"
+    },
+    {
+      "props": {
+        "className": "font-mono",
+        "onChange": {
+          "source": "data.onChange",
+          "transform": "(e) => onChange(e.target.value)"
+        },
+        "placeholder": {
+          "source": "data.placeholder"
+        },
+        "value": {
+          "source": "data.editingSource.id"
+        }
+      },
+      "type": "Input"
+    }
+  ],
+  "className": "space-y-2",
+  "id": "data-source-id-field",
+  "props": {
+    "editingSource": {
+      "source": "data.editingSource"
+    },
+    "label": {
+      "source": "data.label"
+    },
+    "onChange": {
+      "source": "data.onChange"
+    },
+    "placeholder": {
+      "source": "data.placeholder"
+    }
+  },
+  "type": "DataSourceIdField"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/data-source-manager-header.json b/src/components/json-definitions/data-source-manager-header.json
new file mode 100644
index 0000000..da9edfb
--- /dev/null
+++ b/src/components/json-definitions/data-source-manager-header.json
@@ -0,0 +1,29 @@
+{
+  "className": "optional classes",
+  "events": [
+    {
+      "actions": [
+        {
+          "id": "addDataSource",
+          "type": "custom"
+        }
+      ],
+      "event": "click"
+    }
+  ],
+  "id": "data-source-manager-header",
+  "props": {
+    "copy": {
+      "addLabel": "string",
+      "description": "string",
+      "menu": {
+        "kv": "string",
+        "static": "string"
+      },
+      "title": "string"
+    },
+    "onAdd": "(type: DataSourceType) => void"
+  },
+  "style": {},
+  "type": "DataSourceManagerHeader"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/data-source-manager.json b/src/components/json-definitions/data-source-manager.json
new file mode 100644
index 0000000..503c130
--- /dev/null
+++ b/src/components/json-definitions/data-source-manager.json
@@ -0,0 +1,149 @@
+{
+  "children": [
+    {
+      "children": [
+        {
+          "children": [
+            {
+              "props": {
+                "copy": {
+                  "addLabel": {
+                    "source": "data.source.actions.add"
+                  },
+                  "description": {
+                    "source": "data.source.header.description"
+                  },
+                  "menu": {
+                    "source": "data.source.menu"
+                  },
+                  "title": {
+                    "source": "data.source.header.title"
+                  }
+                },
+                "onAdd": [
+                  {
+                    "actions": [
+                      {
+                        "id": "handleAddDataSource",
+                        "type": "custom"
+                      }
+                    ],
+                    "event": "click"
+                  }
+                ]
+              },
+              "type": "DataSourceManagerHeader"
+            }
+          ],
+          "type": "CardHeader"
+        },
+        {
+          "children": [
+            {
+              "conditional": {
+                "else": {
+                  "children": [
+                    {
+                      "props": {
+                        "dataSources": {
+                          "source": "groupedSources.kv"
+                        },
+                        "getDependents": {
+                          "source": "data.getDependents"
+                        },
+                        "icon": {
+                          "source": "data.icon.Database"
+                        },
+                        "label": {
+                          "source": "data.source.groups.kv"
+                        },
+                        "onDelete": {
+                          "source": "data.handleDeleteSource"
+                        },
+                        "onEdit": {
+                          "source": "data.handleEditSource"
+                        }
+                      },
+                      "type": "DataSourceGroupSection"
+                    },
+                    {
+                      "props": {
+                        "dataSources": {
+                          "source": "groupedSources.static"
+                        },
+                        "getDependents": {
+                          "source": "data.getDependents"
+                        },
+                        "icon": {
+                          "source": "data.icon.FileText"
+                        },
+                        "label": {
+                          "source": "data.source.groups.static"
+                        },
+                        "onDelete": {
+                          "source": "data.handleDeleteSource"
+                        },
+                        "onEdit": {
+                          "source": "data.handleEditSource"
+                        }
+                      },
+                      "type": "DataSourceGroupSection"
+                    }
+                  ],
+                  "props": {
+                    "direction": "vertical",
+                    "spacing": "xl"
+                  },
+                  "type": "Stack"
+                },
+                "if": "localSources.length === 0",
+                "then": {
+                  "description": {
+                    "source": "data.source.emptyState.description"
+                  },
+                  "icon": {
+                    "source": "data.icon.Database"
+                  },
+                  "title": {
+                    "source": "data.source.emptyState.title"
+                  }
+                }
+              },
+              "type": "EmptyState"
+            }
+          ],
+          "type": "CardContent"
+        }
+      ],
+      "type": "Card"
+    },
+    {
+      "props": {
+        "dataSource": {
+          "source": "editingSource"
+        },
+        "onOpenChange": {
+          "source": "setDialogOpen"
+        },
+        "onSave": {
+          "source": "handleSaveSource"
+        },
+        "open": {
+          "source": "dialogOpen"
+        }
+      },
+      "type": "DataSourceEditorDialog"
+    }
+  ],
+  "className": "space-y-6",
+  "id": "data-source-manager",
+  "props": {
+    "dataSources": {
+      "source": "data.path"
+    },
+    "onChange": {
+      "source": "data.onChange"
+    }
+  },
+  "type": "DataSourceManager"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/dynamic-text.json b/src/components/json-definitions/dynamic-text.json
new file mode 100644
index 0000000..6cd55ac
--- /dev/null
+++ b/src/components/json-definitions/dynamic-text.json
@@ -0,0 +1,30 @@
+{
+  "bindings": {
+    "value": {
+      "path": "data.value",
+      "source": "data.value",
+      "transform": "optional js expression"
+    }
+  },
+  "className": "dynamic-text-class",
+  "events": [
+    {
+      "actions": [
+        {
+          "id": "exampleActionId",
+          "type": "custom"
+        }
+      ],
+      "event": "click"
+    }
+  ],
+  "id": "dynamic-text",
+  "props": {
+    "className": "optional-class",
+    "currency": "USD",
+    "format": "text",
+    "locale": "en-US",
+    "value": "data.value"
+  },
+  "type": "DynamicText"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/flex-layout.json b/src/components/json-definitions/flex-layout.json
new file mode 100644
index 0000000..09c911f
--- /dev/null
+++ b/src/components/json-definitions/flex-layout.json
@@ -0,0 +1,20 @@
+{
+  "bindings": {},
+  "children": "...",
+  "className": "optional classes",
+  "conditional": {},
+  "dataBinding": "data.path",
+  "events": [],
+  "id": "flex-layout",
+  "loop": {},
+  "props": {
+    "align": "start",
+    "className": "",
+    "direction": "row",
+    "gap": "md",
+    "justify": "start",
+    "wrap": false
+  },
+  "style": {},
+  "type": "FlexLayout"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/grid-layout.json b/src/components/json-definitions/grid-layout.json
new file mode 100644
index 0000000..ad6ec9f
--- /dev/null
+++ b/src/components/json-definitions/grid-layout.json
@@ -0,0 +1,18 @@
+{
+  "children": "...",
+  "className": "",
+  "id": "grid-layout",
+  "props": {
+    "className": "",
+    "cols": {
+      "base": 1,
+      "lg": 1,
+      "md": 1,
+      "sm": 1,
+      "xl": 1
+    },
+    "gap": "md"
+  },
+  "style": {},
+  "type": "GridLayout"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/icon-renderer.json b/src/components/json-definitions/icon-renderer.json
new file mode 100644
index 0000000..91e9424
--- /dev/null
+++ b/src/components/json-definitions/icon-renderer.json
@@ -0,0 +1,32 @@
+{
+  "bindings": {
+    "name": {
+      "path": "optional.iconPath",
+      "source": "data.iconName",
+      "transform": "optional js expression"
+    }
+  },
+  "children": "text",
+  "className": "optional classes",
+  "dataBinding": "data.iconName",
+  "events": [
+    {
+      "actions": [
+        {
+          "id": "iconClickAction",
+          "type": "custom"
+        }
+      ],
+      "event": "click"
+    }
+  ],
+  "id": "icon-renderer",
+  "props": {
+    "className": "string",
+    "name": "string",
+    "size": "number",
+    "weight": "'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'"
+  },
+  "style": {},
+  "type": "IconRenderer"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/kv-source-fields.json b/src/components/json-definitions/kv-source-fields.json
new file mode 100644
index 0000000..03bf937
--- /dev/null
+++ b/src/components/json-definitions/kv-source-fields.json
@@ -0,0 +1,33 @@
+{
+  "children": [],
+  "className": "kv-source-fields",
+  "events": [],
+  "id": "kv-source-fields",
+  "props": {
+    "copy": {
+      "defaultLabel": {
+        "source": "data.copy.defaultLabel"
+      },
+      "defaultPlaceholder": {
+        "source": "data.copy.defaultPlaceholder"
+      },
+      "keyHelp": {
+        "source": "data.copy.keyHelp"
+      },
+      "keyLabel": {
+        "source": "data.copy.keyLabel"
+      },
+      "keyPlaceholder": {
+        "source": "data.copy.keyPlaceholder"
+      }
+    },
+    "editingSource": {
+      "source": "data.editingSource"
+    },
+    "onUpdateField": {
+      "source": "actions.onUpdateField"
+    }
+  },
+  "style": {},
+  "type": "KvSourceFields"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/panel.json b/src/components/json-definitions/panel.json
new file mode 100644
index 0000000..4267b1d
--- /dev/null
+++ b/src/components/json-definitions/panel.json
@@ -0,0 +1,109 @@
+{
+  "bindings": {},
+  "children": [
+    {
+      "children": [
+        {
+          "else": null,
+          "if": "title || description || actions",
+          "then": {
+            "children": [
+              {
+                "children": [
+                  {
+                    "else": null,
+                    "if": "title",
+                    "then": {
+                      "children": "title",
+                      "props": {
+                        "className": "font-semibold text-lg"
+                      },
+                      "type": "h3"
+                    }
+                  },
+                  {
+                    "else": null,
+                    "if": "description",
+                    "then": {
+                      "children": "description",
+                      "props": {
+                        "className": "text-sm text-muted-foreground"
+                      },
+                      "type": "p"
+                    }
+                  }
+                ],
+                "props": {
+                  "className": "space-y-1"
+                },
+                "type": "div"
+              },
+              {
+                "else": null,
+                "if": "actions",
+                "then": {
+                  "children": "actions",
+                  "type": "div"
+                }
+              }
+            ],
+            "props": {
+              "className": "flex items-start justify-between p-4 border-b"
+            },
+            "type": "div"
+          }
+        },
+        {
+          "children": "children",
+          "props": {
+            "className": "p-4"
+          },
+          "type": "CardContent"
+        }
+      ],
+      "props": {
+        "className": "border-border"
+      },
+      "type": "Card"
+    }
+  ],
+  "className": "",
+  "conditional": {},
+  "dataBinding": "data.panel",
+  "events": {},
+  "id": "panel",
+  "loop": {},
+  "props": {
+    "actions": {
+      "optional": true,
+      "type": "ReactNode"
+    },
+    "children": {
+      "optional": false,
+      "type": "ReactNode"
+    },
+    "className": {
+      "optional": true,
+      "type": "string"
+    },
+    "description": {
+      "optional": true,
+      "type": "string"
+    },
+    "title": {
+      "optional": true,
+      "type": "string"
+    },
+    "variant": {
+      "enum": [
+        "default",
+        "bordered",
+        "elevated"
+      ],
+      "optional": true,
+      "type": "string"
+    }
+  },
+  "style": {},
+  "type": "Panel"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/property-editor-empty-state.json b/src/components/json-definitions/property-editor-empty-state.json
new file mode 100644
index 0000000..2a8bfcd
--- /dev/null
+++ b/src/components/json-definitions/property-editor-empty-state.json
@@ -0,0 +1,53 @@
+{
+  "children": [
+    {
+      "children": [
+        {
+          "props": {
+            "icon": {
+              "props": {
+                "className": "w-12 h-12"
+              },
+              "type": "Icon"
+            }
+          },
+          "type": "EmptyStateIcon"
+        },
+        {
+          "children": [
+            {
+              "props": {
+                "children": "{propertyEditorConfig.emptyState.title}",
+                "variant": "small"
+              },
+              "type": "Text"
+            },
+            {
+              "props": {
+                "children": "{propertyEditorConfig.emptyState.description}",
+                "variant": "caption"
+              },
+              "type": "Text"
+            }
+          ],
+          "props": {
+            "align": "center",
+            "direction": "vertical",
+            "spacing": "xs"
+          },
+          "type": "Stack"
+        }
+      ],
+      "props": {
+        "align": "center",
+        "direction": "vertical",
+        "spacing": "md"
+      },
+      "type": "Stack"
+    }
+  ],
+  "className": "h-full flex flex-col items-center justify-center p-8",
+  "id": "property-editor-empty-state",
+  "props": {},
+  "type": "PropertyEditorEmptyState"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/property-editor-header.json b/src/components/json-definitions/property-editor-header.json
new file mode 100644
index 0000000..692446e
--- /dev/null
+++ b/src/components/json-definitions/property-editor-header.json
@@ -0,0 +1,27 @@
+{
+  "bindings": {},
+  "children": [],
+  "className": "optional classes",
+  "conditional": {},
+  "dataBinding": "data.path",
+  "events": [
+    {
+      "actions": [
+        {
+          "id": "deleteAction",
+          "type": "custom"
+        }
+      ],
+      "event": "click"
+    }
+  ],
+  "id": "property-editor-header",
+  "loop": {},
+  "props": {
+    "componentId": "string",
+    "componentLabel": "string",
+    "onDelete": "function"
+  },
+  "style": {},
+  "type": "PropertyEditorHeader"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/property-editor-section.json b/src/components/json-definitions/property-editor-section.json
new file mode 100644
index 0000000..c4a5ce4
--- /dev/null
+++ b/src/components/json-definitions/property-editor-section.json
@@ -0,0 +1,49 @@
+{
+  "children": [
+    {
+      "children": "{title}",
+      "props": {
+        "variant": "caption"
+      },
+      "type": "Text"
+    },
+    {
+      "children": {
+        "props": {
+          "label": "{field.label}",
+          "name": "{field.name}",
+          "onChange": "{onChange}",
+          "options": "{field.options}",
+          "type": "{field.type}",
+          "value": "{component.props?.[field.name]}"
+        },
+        "type": "PropertyEditorField"
+      },
+      "loop": {
+        "indexVar": "index",
+        "itemVar": "field",
+        "source": "fields"
+      }
+    }
+  ],
+  "className": "optional classes",
+  "dataBinding": "data.propertyEditor",
+  "events": [
+    {
+      "actions": [
+        {
+          "id": "onChangeHandler",
+          "type": "custom"
+        }
+      ],
+      "event": "change"
+    }
+  ],
+  "id": "property-editor-section",
+  "props": {
+    "fields": [],
+    "title": ""
+  },
+  "style": {},
+  "type": "PropertyEditorSection"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/repeat-wrapper.json b/src/components/json-definitions/repeat-wrapper.json
new file mode 100644
index 0000000..fa8487b
--- /dev/null
+++ b/src/components/json-definitions/repeat-wrapper.json
@@ -0,0 +1,37 @@
+{
+  "children": [
+    {
+      "children": "emptyMessage",
+      "props": {
+        "className": "text-center text-muted-foreground text-sm p-4"
+      },
+      "type": "div"
+    },
+    {
+      "children": [
+        {
+          "children": "render(item, index)",
+          "props": {
+            "key": "index"
+          },
+          "type": "div"
+        }
+      ],
+      "props": {
+        "className": "flex flex-col gapClasses[gap]"
+      },
+      "type": "div"
+    }
+  ],
+  "className": "optional classes",
+  "id": "repeat-wrapper",
+  "props": {
+    "className": "",
+    "emptyMessage": "",
+    "gap": "md",
+    "items": [],
+    "render": "function(item, index) { return item; }"
+  },
+  "style": {},
+  "type": "RepeatWrapper"
+}
\ No newline at end of file
diff --git a/src/components/json-definitions/static-source-fields.json b/src/components/json-definitions/static-source-fields.json
new file mode 100644
index 0000000..9a89f42
--- /dev/null
+++ b/src/components/json-definitions/static-source-fields.json
@@ -0,0 +1,28 @@
+{
+  "children": [
+    {
+      "props": {
+        "children": "{label}"
+      },
+      "type": "Label"
+    },
+    {
+      "props": {
+        "className": "font-mono text-sm h-24",
+        "onChange": "handleChange",
+        "placeholder": "{placeholder}",
+        "value": "JSON.stringify(editingSource.defaultValue, null, 2)"
+      },
+      "type": "Textarea"
+    }
+  ],
+  "className": "space-y-2",
+  "id": "static-source-fields",
+  "props": {
+    "editingSource": {},
+    "label": "",
+    "onUpdateField": null,
+    "placeholder": ""
+  },
+  "type": "StaticSourceFields"
+}
\ No newline at end of file
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index 71fdb41..0cbd3ea 100644
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -1,2 +1,11 @@
 // Auto-generated - only exports existing TSX files
 
+export { PropertyEditorHeader } from '@/lib/json-ui/json-components'
+export { PropertyEditorEmptyState } from '@/lib/json-ui/json-components'
+export { PropertyEditorSection } from '@/lib/json-ui/json-components'
+export { KvSourceFields } from '@/lib/json-ui/json-components'
+export { ComponentTreeEmptyState } from '@/lib/json-ui/json-components'
+export { ComponentTreeNodes } from '@/lib/json-ui/json-components'
+export { ComponentTreeHeader } from '@/lib/json-ui/json-components'
+export { DataSourceIdField } from '@/lib/json-ui/json-components'
+export { StaticSourceFields } from '@/lib/json-ui/json-components'
diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts
index 71fdb41..b85e316 100644
--- a/src/components/organisms/index.ts
+++ b/src/components/organisms/index.ts
@@ -1,2 +1,5 @@
 // Auto-generated - only exports existing TSX files
 
+export { DataSourceGroupSection } from '@/lib/json-ui/json-components'
+export { DataSourceManager } from '@/lib/json-ui/json-components'
+export { DataSourceManagerHeader } from '@/lib/json-ui/json-components'
diff --git a/src/config/pages/atoms/conditional-wrapper.json b/src/config/pages/atoms/conditional-wrapper.json
new file mode 100644
index 0000000..1eb214a
--- /dev/null
+++ b/src/config/pages/atoms/conditional-wrapper.json
@@ -0,0 +1,17 @@
+{
+  "type": "ConditionalWrapper",
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/atoms/ConditionalWrapper",
+    "export": "ConditionalWrapper"
+  },
+  "props": {
+    "condition": true,
+    "children": "Child content here",
+    "fallback": "Fallback content here",
+    "className": ""
+  },
+  "metadata": {
+    "notes": "Contains conditional logic - needs wrapper"
+  }
+}
\ No newline at end of file
diff --git a/src/config/pages/atoms/data-card.json b/src/config/pages/atoms/data-card.json
new file mode 100644
index 0000000..6168501
--- /dev/null
+++ b/src/config/pages/atoms/data-card.json
@@ -0,0 +1,14 @@
+{
+  "type": "DataCard",
+  "jsonCompatible": true,
+  "wrapperRequired": false,
+  "props": {
+    "title": "",
+    "description": "",
+    "icon": "",
+    "gradient": "",
+    "children": "",
+    "className": ""
+  },
+  "metadata": {}
+}
diff --git a/src/config/pages/atoms/dynamic-text.json b/src/config/pages/atoms/dynamic-text.json
new file mode 100644
index 0000000..d836de2
--- /dev/null
+++ b/src/config/pages/atoms/dynamic-text.json
@@ -0,0 +1,18 @@
+{
+  "type": "DynamicText",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/atoms/DynamicText",
+    "export": "DynamicText"
+  },
+  "props": {
+    "value": "data.value",
+    "format": "text",
+    "currency": "USD",
+    "locale": "en-US"
+  },
+  "metadata": {
+    "notes": "Contains hooks - needs wrapper"
+  }
+}
\ No newline at end of file
diff --git a/src/config/pages/atoms/flex-layout.json b/src/config/pages/atoms/flex-layout.json
new file mode 100644
index 0000000..b148b93
--- /dev/null
+++ b/src/config/pages/atoms/flex-layout.json
@@ -0,0 +1,5 @@
+{
+  "type": "FlexLayout",
+  "props": {},
+  "jsonCompatible": true
+}
\ No newline at end of file
diff --git a/src/config/pages/atoms/grid-layout.json b/src/config/pages/atoms/grid-layout.json
new file mode 100644
index 0000000..d213f1c
--- /dev/null
+++ b/src/config/pages/atoms/grid-layout.json
@@ -0,0 +1,16 @@
+{
+  "type": "GridLayout",
+  "jsonCompatible": true,
+  "wrapperRequired": false,
+  "props": {
+    "cols": {
+      "base": 1,
+      "sm": 1,
+      "md": 1,
+      "lg": 1,
+      "xl": 1
+    },
+    "gap": "md",
+    "className": ""
+  }
+}
diff --git a/src/config/pages/atoms/icon-renderer.json b/src/config/pages/atoms/icon-renderer.json
new file mode 100644
index 0000000..d4ac77d
--- /dev/null
+++ b/src/config/pages/atoms/icon-renderer.json
@@ -0,0 +1,11 @@
+{
+  "type": "IconRenderer",
+  "jsonCompatible": true,
+  "wrapperRequired": false,
+  "props": {
+    "name": "default-icon-name",
+    "size": 24,
+    "weight": "duotone",
+    "className": "optional-class"
+  }
+}
\ No newline at end of file
diff --git a/src/config/pages/atoms/panel.json b/src/config/pages/atoms/panel.json
new file mode 100644
index 0000000..2a500c2
--- /dev/null
+++ b/src/config/pages/atoms/panel.json
@@ -0,0 +1,13 @@
+{
+  "type": "Panel",
+  "jsonCompatible": true,
+  "wrapperRequired": false,
+  "props": {
+    "title": "",
+    "description": "",
+    "actions": null,
+    "children": "Content goes here",
+    "className": "",
+    "variant": "default"
+  }
+}
\ No newline at end of file
diff --git a/src/config/pages/atoms/repeat-wrapper.json b/src/config/pages/atoms/repeat-wrapper.json
new file mode 100644
index 0000000..b53368e
--- /dev/null
+++ b/src/config/pages/atoms/repeat-wrapper.json
@@ -0,0 +1,4 @@
+{
+  "type": "RepeatWrapper",
+  "props": {}
+}
\ No newline at end of file
diff --git a/src/config/pages/molecules/component-tree-empty-state.json b/src/config/pages/molecules/component-tree-empty-state.json
new file mode 100644
index 0000000..bae46d5
--- /dev/null
+++ b/src/config/pages/molecules/component-tree-empty-state.json
@@ -0,0 +1,4 @@
+{
+  "type": "ComponentTreeEmptyState",
+  "props": {}
+}
\ No newline at end of file
diff --git a/src/config/pages/molecules/component-tree-header.json b/src/config/pages/molecules/component-tree-header.json
new file mode 100644
index 0000000..a09298d
--- /dev/null
+++ b/src/config/pages/molecules/component-tree-header.json
@@ -0,0 +1,23 @@
+{
+  "type": "ComponentTreeHeader",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/molecules/ComponentTreeHeader",
+    "export": "ComponentTreeHeader"
+  },
+  "props": {
+    "componentsCount": {
+      "source": "data.count"
+    },
+    "onExpandAll": {
+      "source": "data.onExpandAll"
+    },
+    "onCollapseAll": {
+      "source": "data.onCollapseAll"
+    }
+  },
+  "metadata": {
+    "notes": "Contains hooks - needs wrapper"
+  }
+}
diff --git a/src/config/pages/molecules/component-tree-nodes.json b/src/config/pages/molecules/component-tree-nodes.json
new file mode 100644
index 0000000..8e5b570
--- /dev/null
+++ b/src/config/pages/molecules/component-tree-nodes.json
@@ -0,0 +1,56 @@
+{
+  "type": "ComponentTreeNodes",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/molecules/ComponentTreeNodes",
+    "export": "ComponentTreeNodes"
+  },
+  "props": {
+    "components": {
+      "source": "data.components"
+    },
+    "expandedIds": {
+      "source": "data.expandedIds"
+    },
+    "selectedId": {
+      "source": "data.selectedId"
+    },
+    "hoveredId": {
+      "source": "data.hoveredId"
+    },
+    "draggedOverId": {
+      "source": "data.draggedOverId"
+    },
+    "dropPosition": {
+      "source": "data.dropPosition"
+    },
+    "onSelect": {
+      "source": "data.onSelect"
+    },
+    "onHover": {
+      "source": "data.onHover"
+    },
+    "onHoverEnd": {
+      "source": "data.onHoverEnd"
+    },
+    "onDragStart": {
+      "source": "data.onDragStart"
+    },
+    "onDragOver": {
+      "source": "data.onDragOver"
+    },
+    "onDragLeave": {
+      "source": "data.onDragLeave"
+    },
+    "onDrop": {
+      "source": "data.onDrop"
+    },
+    "onToggleExpand": {
+      "source": "data.onToggleExpand"
+    }
+  },
+  "metadata": {
+    "notes": "Contains hooks - needs wrapper"
+  }
+}
\ No newline at end of file
diff --git a/src/config/pages/molecules/data-source-id-field.json b/src/config/pages/molecules/data-source-id-field.json
new file mode 100644
index 0000000..135fd0c
--- /dev/null
+++ b/src/config/pages/molecules/data-source-id-field.json
@@ -0,0 +1,26 @@
+{
+  "type": "DataSourceIdField",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/molecules/DataSourceIdField",
+    "export": "DataSourceIdField"
+  },
+  "props": {
+    "label": {
+      "source": "data.label"
+    },
+    "placeholder": {
+      "source": "data.placeholder"
+    },
+    "editingSource": {
+      "source": "data.editingSource"
+    },
+    "onChange": {
+      "source": "data.onChange"
+    }
+  },
+  "metadata": {
+    "notes": "Contains hooks - needs wrapper"
+  }
+}
diff --git a/src/config/pages/molecules/kv-source-fields.json b/src/config/pages/molecules/kv-source-fields.json
new file mode 100644
index 0000000..467166c
--- /dev/null
+++ b/src/config/pages/molecules/kv-source-fields.json
@@ -0,0 +1,37 @@
+{
+  "type": "KvSourceFields",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/molecules/KvSourceFields",
+    "export": "KvSourceFields"
+  },
+  "props": {
+    "editingSource": {
+      "source": "data.editingSource"
+    },
+    "copy": {
+      "keyLabel": {
+        "source": "data.copy.keyLabel"
+      },
+      "keyPlaceholder": {
+        "source": "data.copy.keyPlaceholder"
+      },
+      "keyHelp": {
+        "source": "data.copy.keyHelp"
+      },
+      "defaultLabel": {
+        "source": "data.copy.defaultLabel"
+      },
+      "defaultPlaceholder": {
+        "source": "data.copy.defaultPlaceholder"
+      }
+    },
+    "onUpdateField": {
+      "source": "actions.onUpdateField"
+    }
+  },
+  "metadata": {
+    "notes": "Contains hooks - needs wrapper"
+  }
+}
diff --git a/src/config/pages/molecules/property-editor-empty-state.json b/src/config/pages/molecules/property-editor-empty-state.json
new file mode 100644
index 0000000..1776263
--- /dev/null
+++ b/src/config/pages/molecules/property-editor-empty-state.json
@@ -0,0 +1,4 @@
+{
+  "type": "PropertyEditorEmptyState",
+  "props": {}
+}
\ No newline at end of file
diff --git a/src/config/pages/molecules/property-editor-header.json b/src/config/pages/molecules/property-editor-header.json
new file mode 100644
index 0000000..0cb67f1
--- /dev/null
+++ b/src/config/pages/molecules/property-editor-header.json
@@ -0,0 +1 @@
+{ "type": "PropertyEditorHeader", "props": { "componentId": "", "componentLabel": "", "onDelete": null } }
\ No newline at end of file
diff --git a/src/config/pages/molecules/property-editor-section.json b/src/config/pages/molecules/property-editor-section.json
new file mode 100644
index 0000000..1da32bf
--- /dev/null
+++ b/src/config/pages/molecules/property-editor-section.json
@@ -0,0 +1,57 @@
+{
+  "type": "PropertyEditorSection",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/molecules/PropertyEditorSection",
+    "export": "PropertyEditorSection"
+  },
+  "props": {
+    "title": "",
+    "fields": []
+  },
+  "className": "optional classes",
+  "style": {},
+  "dataBinding": "data.propertyEditor",
+  "events": [
+    {
+      "event": "change",
+      "actions": [
+        {
+          "id": "onChangeHandler",
+          "type": "custom"
+        }
+      ]
+    }
+  ],
+  "children": [
+    {
+      "type": "Text",
+      "props": {
+        "variant": "caption"
+      },
+      "children": "{title}"
+    },
+    {
+      "loop": {
+        "source": "fields",
+        "itemVar": "field",
+        "indexVar": "index"
+      },
+      "children": {
+        "type": "PropertyEditorField",
+        "props": {
+          "label": "{field.label}",
+          "name": "{field.name}",
+          "value": "{component.props?.[field.name]}",
+          "type": "{field.type}",
+          "options": "{field.options}",
+          "onChange": "{onChange}"
+        }
+      }
+    }
+  ],
+  "metadata": {
+    "notes": "Contains hooks - needs wrapper"
+  }
+}
diff --git a/src/config/pages/molecules/static-source-fields.json b/src/config/pages/molecules/static-source-fields.json
new file mode 100644
index 0000000..773a0f7
--- /dev/null
+++ b/src/config/pages/molecules/static-source-fields.json
@@ -0,0 +1,18 @@
+{
+  "type": "StaticSourceFields",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/molecules/StaticSourceFields",
+    "export": "StaticSourceFields"
+  },
+  "props": {
+    "editingSource": {},
+    "label": "",
+    "placeholder": "",
+    "onUpdateField": null
+  },
+  "metadata": {
+    "notes": "Contains hooks - needs wrapper"
+  }
+}
diff --git a/src/config/pages/organisms/data-source-group-section.json b/src/config/pages/organisms/data-source-group-section.json
new file mode 100644
index 0000000..a47d0f3
--- /dev/null
+++ b/src/config/pages/organisms/data-source-group-section.json
@@ -0,0 +1,4 @@
+{
+  "type": "DataSourceGroupSection",
+  "props": {}
+}
\ No newline at end of file
diff --git a/src/config/pages/organisms/data-source-manager-header.json b/src/config/pages/organisms/data-source-manager-header.json
new file mode 100644
index 0000000..a208827
--- /dev/null
+++ b/src/config/pages/organisms/data-source-manager-header.json
@@ -0,0 +1,15 @@
+{
+  "type": "DataSourceManagerHeader",
+  "props": {
+    "copy": {
+      "title": "Header Title",
+      "description": "Header Description",
+      "addLabel": "Add Data Source",
+      "menu": {
+        "kv": "KV Data Source",
+        "static": "Static Data Source"
+      }
+    },
+    "onAdd": "function reference"
+  }
+}
\ No newline at end of file
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index e1f7ded..d612106 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -38,3 +38,51 @@ export * from './use-file-upload'
 export * from './use-accordion'
 export * from './use-binding-editor'
 export * from './use-navigation-menu'
+export * from './use-app-navigation'
+export * from './use-project-export'
+export * from './use-dynamic-text'
+export * from './use-project-state'
+export * from './use-save-indicator'
+export * from './use-conflict-resolution-page'
+export * from './use-redux-component-trees'
+export * from './use-persistence-dashboard'
+export * from './use-active-selection'
+export * from './use-dialog-state'
+export * from './use-app-shortcuts'
+export * from './use-component-tree-builder'
+export * from './use-app-project'
+export * from './use-pwa'
+export * from './use-file-operations'
+export * from './use-project-manager'
+export * from './use-schema-loader'
+export * from './use-mobile'
+export * from './use-app-bootstrap'
+export * from './use-unified-storage'
+export * from './use-d3-bar-chart'
+export * from './use-redux-files'
+export * from './use-static-source-fields'
+export * from './use-keyboard-shortcuts'
+export * from './use-component-binding-dialog'
+export * from './use-project-manager-dialogs'
+export * from './use-conflict-resolution'
+export * from './use-last-saved'
+export * from './use-component-tree-expansion'
+export * from './use-tab-navigation'
+export * from './use-template-explorer-actions'
+export * from './use-redux-sync'
+export * from './use-storage-backend-info'
+export * from './use-component-tree-loader'
+export * from './use-ai-operations'
+export * from './use-github-build-status'
+export * from './use-data-source-editor'
+export * from './use-file-filters'
+export * from './use-indexed-db'
+export * from './use-project-loader'
+export * from './use-router-navigation'
+export * from './use-storage'
+export * from './use-component-tree-nodes'
+export * from './use-auto-repair'
+export * from './use-code-explanation'
+export * from './use-component-tree'
+export * from './use-data-source-manager'
+export * from './use-persistence'
diff --git a/src/hooks/use-component-tree-nodes.ts b/src/hooks/use-component-tree-nodes.ts
new file mode 100644
index 0000000..d7ae3a8
--- /dev/null
+++ b/src/hooks/use-component-tree-nodes.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+export const useComponentTreeNodes = (initialExpandedIds: Set<string>) => {
+  const [expandedIds, setExpandedIds] = useState(initialExpandedIds);
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds((prev) => {
+      const newIds = new Set(prev);
+      if (newIds.has(id)) {
+        newIds.delete(id);
+      } else {
+        newIds.add(id);
+      }
+      return newIds;
+    });
+  };
+
+  return { expandedIds, toggleExpand };
+};
\ No newline at end of file
diff --git a/src/hooks/use-data-source-manager.ts b/src/hooks/use-data-source-manager.ts
new file mode 100644
index 0000000..f2970eb
--- /dev/null
+++ b/src/hooks/use-data-source-manager.ts
@@ -0,0 +1 @@
+import { useState } from 'react'; import { DataSource } from '@/types/json-ui'; export function useDataSourceManager(initialDataSources: DataSource[]) { /* logic */ }
\ No newline at end of file
diff --git a/src/hooks/use-dynamic-text.ts b/src/hooks/use-dynamic-text.ts
new file mode 100644
index 0000000..be7fa99
--- /dev/null
+++ b/src/hooks/use-dynamic-text.ts
@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+
+export const useDynamicText = (value: any, format: string, currency: string, locale: string) => {
+  const [formattedValue, setFormattedValue] = useState('');
+
+  useEffect(() => {
+    const formatValue = () => {
+      if (value === null || value === undefined) return '';
+      switch (format) {
+        case 'number':
+          return typeof value === 'number' ? value.toLocaleString(locale) : value;
+        case 'currency':
+          return typeof value === 'number' ? new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value) : value;
+        case 'date':
+          try {
+            return new Date(value).toLocaleDateString(locale);
+          } catch {
+            return value;
+          }
+        case 'time':
+          try {
+            return new Date(value).toLocaleTimeString(locale);
+          } catch {
+            return value;
+          }
+        case 'datetime':
+          try {
+            return new Date(value).toLocaleString(locale);
+          } catch {
+            return value;
+          }
+        case 'boolean':
+          return value ? 'Yes' : 'No';
+        default:
+          return String(value);
+      }
+    };
+    setFormattedValue(formatValue());
+  }, [value, format, currency, locale]);
+
+  return formattedValue;
+};
\ No newline at end of file
diff --git a/src/hooks/use-static-source-fields.ts b/src/hooks/use-static-source-fields.ts
new file mode 100644
index 0000000..c83421c
--- /dev/null
+++ b/src/hooks/use-static-source-fields.ts
@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+
+export const useStaticSourceFields = (onUpdateField) => {
+  const handleChange = useCallback((e) => {
+    try {
+      const parsed = JSON.parse(e.target.value);
+      onUpdateField('defaultValue', parsed);
+    } catch (err) {
+      // Invalid JSON, don't update
+    }
+  }, [onUpdateField]);
+
+  return { handleChange };
+};
\ No newline at end of file
diff --git a/src/lib/json-ui/hooks-registry.ts b/src/lib/json-ui/hooks-registry.ts
index 9ec15d2..84d09f3 100644
--- a/src/lib/json-ui/hooks-registry.ts
+++ b/src/lib/json-ui/hooks-registry.ts
@@ -2,6 +2,51 @@
  * Hook Registry for JSON Components
  * Allows JSON components to use custom React hooks
  */
+import { useProjectExport } from '@/hooks/use-project-export'
+import { useRoutePreload } from '@/hooks/use-route-preload'
+import { useDynamicText } from '@/hooks/use-dynamic-text'
+import { useProjectState } from '@/hooks/use-project-state'
+import { useConflictResolutionPage } from '@/hooks/use-conflict-resolution-page'
+import { useReduxComponentTrees } from '@/hooks/use-redux-component-trees'
+import { usePersistenceDashboard } from '@/hooks/use-persistence-dashboard'
+import { useActiveSelection } from '@/hooks/use-active-selection'
+import { useDialogState } from '@/hooks/use-dialog-state'
+import { useComponentTreeBuilder } from '@/hooks/use-component-tree-builder'
+import { usePWA } from '@/hooks/use-pwa'
+import { useFileOperations } from '@/hooks/use-file-operations'
+import { useProjectManager } from '@/hooks/use-project-manager'
+import { useSchemaLoader } from '@/hooks/use-schema-loader'
+import { useIsMobile } from '@/hooks/use-mobile'
+import { useAppBootstrap } from '@/hooks/use-app-bootstrap'
+import { useUnifiedStorage } from '@/hooks/use-unified-storage'
+import { useKV } from '@/hooks/use-kv'
+import { useReduxFiles } from '@/hooks/use-redux-files'
+import { useStaticSourceFields } from '@/hooks/use-static-source-fields'
+import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts'
+import { useComponentBindingDialog } from '@/hooks/use-component-binding-dialog'
+import { useProjectManagerDialogs } from '@/hooks/use-project-manager-dialogs'
+import { useThemeConfig } from '@/hooks/use-theme-config'
+import { useConflictResolution } from '@/hooks/use-conflict-resolution'
+import { useLastSaved } from '@/hooks/use-last-saved'
+import { useComponentTreeExpansion } from '@/hooks/use-component-tree-expansion'
+import { useTabNavigation } from '@/hooks/use-tab-navigation'
+import { useTemplateExplorerActions } from '@/hooks/use-template-explorer-actions'
+import { useReduxSync } from '@/hooks/use-redux-sync'
+import { useNavigationHistory } from '@/hooks/use-navigation-history'
+import { useComponentTreeLoader } from '@/hooks/use-component-tree-loader'
+import { useAIOperations } from '@/hooks/use-ai-operations'
+import { useGithubBuildStatus } from '@/hooks/use-github-build-status'
+import { useDataSourceEditor } from '@/hooks/use-data-source-editor'
+import { useFileFilters } from '@/hooks/use-file-filters'
+import { useIndexedDB } from '@/hooks/use-indexed-db'
+import { useProjectLoader } from '@/hooks/use-project-loader'
+import { useRouterNavigation } from '@/hooks/use-router-navigation'
+import { useStorage } from '@/hooks/use-storage'
+import { useComponentTreeNodes } from '@/hooks/use-component-tree-nodes'
+import { useAutoRepair } from '@/hooks/use-auto-repair'
+import { useCodeExplanation } from '@/hooks/use-code-explanation'
+import { useDataSourceManager } from '@/hooks/use-data-source-manager'
+import { usePersistence } from '@/hooks/use-persistence'
 import { useSaveIndicator } from '@/hooks/use-save-indicator'
 import { useComponentTree } from '@/hooks/use-component-tree'
 import { useStorageBackendInfo } from '@/hooks/use-storage-backend-info'
@@ -39,6 +84,51 @@ export const hooksRegistry: HookRegistry = {
   useAccordion,
   useBindingEditor,
   useNavigationMenu,
+  useProjectExport,
+  useRoutePreload,
+  useDynamicText,
+  useProjectState,
+  useConflictResolutionPage,
+  useReduxComponentTrees,
+  usePersistenceDashboard,
+  useActiveSelection,
+  useDialogState,
+  useComponentTreeBuilder,
+  usePWA,
+  useFileOperations,
+  useProjectManager,
+  useSchemaLoader,
+  useIsMobile,
+  useAppBootstrap,
+  useUnifiedStorage,
+  useKV,
+  useReduxFiles,
+  useStaticSourceFields,
+  useKeyboardShortcuts,
+  useComponentBindingDialog,
+  useProjectManagerDialogs,
+  useThemeConfig,
+  useConflictResolution,
+  useLastSaved,
+  useComponentTreeExpansion,
+  useTabNavigation,
+  useTemplateExplorerActions,
+  useReduxSync,
+  useNavigationHistory,
+  useComponentTreeLoader,
+  useAIOperations,
+  useGithubBuildStatus,
+  useDataSourceEditor,
+  useFileFilters,
+  useIndexedDB,
+  useProjectLoader,
+  useRouterNavigation,
+  useStorage,
+  useComponentTreeNodes,
+  useAutoRepair,
+  useCodeExplanation,
+  useDataSourceManager,
+  usePersistence,
   // Add more hooks here as needed
 }
 
diff --git a/src/lib/json-ui/interfaces/component-tree-empty-state.ts b/src/lib/json-ui/interfaces/component-tree-empty-state.ts
new file mode 100644
index 0000000..0fe47a5
--- /dev/null
+++ b/src/lib/json-ui/interfaces/component-tree-empty-state.ts
@@ -0,0 +1 @@
+export interface ComponentTreeEmptyStateProps { }
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/component-tree-header.ts b/src/lib/json-ui/interfaces/component-tree-header.ts
new file mode 100644
index 0000000..da4cc70
--- /dev/null
+++ b/src/lib/json-ui/interfaces/component-tree-header.ts
@@ -0,0 +1,5 @@
+export interface ComponentTreeHeaderProps {
+  componentsCount: number;
+  onExpandAll: () => void;
+  onCollapseAll: () => void;
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/component-tree-nodes.ts b/src/lib/json-ui/interfaces/component-tree-nodes.ts
new file mode 100644
index 0000000..3055fd8
--- /dev/null
+++ b/src/lib/json-ui/interfaces/component-tree-nodes.ts
@@ -0,0 +1,17 @@
+export interface ComponentTreeNodesProps {
+  components: UIComponent[];
+  depth?: number;
+  expandedIds: Set<string>;
+  selectedId: string | null;
+  hoveredId: string | null;
+  draggedOverId: string | null;
+  dropPosition: 'before' | 'after' | 'inside' | null;
+  onSelect: (id: string) => void;
+  onHover: (id: string) => void;
+  onHoverEnd: () => void;
+  onDragStart: (id: string, e: React.DragEvent) => void;
+  onDragOver: (id: string, e: React.DragEvent) => void;
+  onDragLeave: (e: React.DragEvent) => void;
+  onDrop: (id: string, e: React.DragEvent) => void;
+  onToggleExpand: (id: string) => void;
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/conditional-wrapper.ts b/src/lib/json-ui/interfaces/conditional-wrapper.ts
new file mode 100644
index 0000000..9c6af49
--- /dev/null
+++ b/src/lib/json-ui/interfaces/conditional-wrapper.ts
@@ -0,0 +1,6 @@
+export interface ConditionalWrapperProps {
+  condition: boolean;
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+  className?: string;
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/data-card.ts b/src/lib/json-ui/interfaces/data-card.ts
new file mode 100644
index 0000000..36c5c07
--- /dev/null
+++ b/src/lib/json-ui/interfaces/data-card.ts
@@ -0,0 +1,8 @@
+export interface DataCardProps {
+  title: string;
+  description?: string;
+  icon?: string;
+  gradient?: string;
+  children: ReactNode;
+  className?: string;
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/data-source-group-section.ts b/src/lib/json-ui/interfaces/data-source-group-section.ts
new file mode 100644
index 0000000..54d4097
--- /dev/null
+++ b/src/lib/json-ui/interfaces/data-source-group-section.ts
@@ -0,0 +1,8 @@
+export interface DataSourceGroupSectionProps {
+  icon: ReactNode;
+  label: string;
+  dataSources: DataSource[];
+  getDependents: (id: string) => string[];
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/data-source-id-field.ts b/src/lib/json-ui/interfaces/data-source-id-field.ts
new file mode 100644
index 0000000..cee20cb
--- /dev/null
+++ b/src/lib/json-ui/interfaces/data-source-id-field.ts
@@ -0,0 +1,6 @@
+export interface DataSourceIdFieldProps {
+  editingSource: DataSource;
+  label: string;
+  placeholder: string;
+  onChange: (value: string) => void;
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/data-source-manager-header.ts b/src/lib/json-ui/interfaces/data-source-manager-header.ts
new file mode 100644
index 0000000..8bfdc8e
--- /dev/null
+++ b/src/lib/json-ui/interfaces/data-source-manager-header.ts
@@ -0,0 +1,14 @@
+interface DataSourceManagerHeaderCopy {
+  title: string;
+  description: string;
+  addLabel: string;
+  menu: {
+    kv: string;
+    static: string;
+  };
+}
+
+interface DataSourceManagerHeaderProps {
+  copy: DataSourceManagerHeaderCopy;
+  onAdd: (type: DataSourceType) => void;
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/data-source-manager.ts b/src/lib/json-ui/interfaces/data-source-manager.ts
new file mode 100644
index 0000000..6f3b9dd
--- /dev/null
+++ b/src/lib/json-ui/interfaces/data-source-manager.ts
@@ -0,0 +1 @@
+export interface DataSourceManagerProps { dataSources: DataSource[]; onChange: (dataSources: DataSource[]) => void; }
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/dynamic-text.ts b/src/lib/json-ui/interfaces/dynamic-text.ts
new file mode 100644
index 0000000..3083f25
--- /dev/null
+++ b/src/lib/json-ui/interfaces/dynamic-text.ts
@@ -0,0 +1,7 @@
+export interface DynamicTextProps {
+  value: any;
+  format?: 'text' | 'number' | 'currency' | 'date' | 'time' | 'datetime' | 'boolean';
+  currency?: string;
+  locale?: string;
+  className?: string;
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/flex-layout.ts b/src/lib/json-ui/interfaces/flex-layout.ts
new file mode 100644
index 0000000..01e8286
--- /dev/null
+++ b/src/lib/json-ui/interfaces/flex-layout.ts
@@ -0,0 +1,9 @@
+export interface FlexLayoutProps {
+  children: React.ReactNode;
+  direction?: 'row' | 'column';
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  wrap?: boolean;
+  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/grid-layout.ts b/src/lib/json-ui/interfaces/grid-layout.ts
new file mode 100644
index 0000000..835b652
--- /dev/null
+++ b/src/lib/json-ui/interfaces/grid-layout.ts
@@ -0,0 +1,12 @@
+export interface GridLayoutProps {
+  children: React.ReactNode;
+  cols?: {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+  };
+  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/icon-renderer.ts b/src/lib/json-ui/interfaces/icon-renderer.ts
new file mode 100644
index 0000000..a66e710
--- /dev/null
+++ b/src/lib/json-ui/interfaces/icon-renderer.ts
@@ -0,0 +1 @@
+export interface IconRendererProps { name: string; size?: number; weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'; className?: string; }
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/index.ts b/src/lib/json-ui/interfaces/index.ts
index 93949c9..b1472cc 100644
--- a/src/lib/json-ui/interfaces/index.ts
+++ b/src/lib/json-ui/interfaces/index.ts
@@ -59,3 +59,84 @@ export * from './detail-row'
 export * from './key-value'
 export * from './status-icon'
 export * from './progress-bar'
+export * from './loading-fallback'
+export * from './navigation-item'
+export * from './page-header-content'
+export * from './save-indicator'
+export * from './lazy-bar-chart'
+export * from './lazy-line-chart'
+export * from './lazy-d3-bar-chart'
+export * from './seed-data-manager'
+export * from './storage-settings'
+export * from './github-build-status'
+export * from './component-binding-dialog'
+export * from './data-source-editor-dialog'
+export * from './component-tree'
+export * from './tree-card'
+export * from './filter-input'
+export * from './copy-button'
+export * from './input'
+export * from './password-input'
+export * from './image'
+export * from './popover'
+export * from './menu'
+export * from './file-upload'
+export * from './accordion'
+export * from './binding-editor'
+export * from './navigation-menu'
+export * from './text-gradient'
+export * from './error-badge'
+export * from './app-logo'
+export * from './dot'
+export * from './spacer'
+export * from './live-indicator'
+export * from './action-icon'
+export * from './divider'
+export * from './kbd'
+export * from './helper-text'
+export * from './code'
+export * from './info-box'
+export * from './alert'
+export * from './badge'
+export * from './pulse'
+export * from './metric-display'
+export * from './separator'
+export * from './text'
+export * from './heading'
+export * from './container'
+export * from './stack'
+export * from './label'
+export * from './link'
+export * from './chip'
+export * from './tag'
+export * from './spinner'
+export * from './icon-wrapper'
+export * from './icon-text'
+export * from './empty-message'
+export * from './skeleton'
+export * from './loading-spinner'
+export * from './count-badge'
+export * from './detail-row'
+export * from './key-value'
+export * from './status-icon'
+export * from './progress-bar'
+export * from './property-editor-header'
+export * from './property-editor-empty-state'
+export * from './property-editor-section'
+export * from './kv-source-fields'
+export * from './component-tree-empty-state'
+export * from './component-tree-nodes'
+export * from './component-tree-header'
+export * from './data-source-id-field'
+export * from './static-source-fields'
+export * from './flex-layout'
+export * from './icon-renderer'
+export * from './conditional-wrapper'
+export * from './data-card'
+export * from './panel'
+export * from './dynamic-text'
+export * from './grid-layout'
+export * from './repeat-wrapper'
+export * from './data-source-group-section'
+export * from './data-source-manager'
+export * from './data-source-manager-header'
diff --git a/src/lib/json-ui/interfaces/kv-source-fields.ts b/src/lib/json-ui/interfaces/kv-source-fields.ts
new file mode 100644
index 0000000..2869819
--- /dev/null
+++ b/src/lib/json-ui/interfaces/kv-source-fields.ts
@@ -0,0 +1,5 @@
+export interface KvSourceFieldsProps {
+  editingSource: DataSource;
+  copy: KvSourceFieldsCopy;
+  onUpdateField: <K extends keyof DataSource>(field: K, value: DataSource[K]) => void;
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/panel.ts b/src/lib/json-ui/interfaces/panel.ts
new file mode 100644
index 0000000..56f48cf
--- /dev/null
+++ b/src/lib/json-ui/interfaces/panel.ts
@@ -0,0 +1,8 @@
+export interface PanelProps {
+  title?: string;
+  description?: string;
+  actions?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  variant?: 'default' | 'bordered' | 'elevated';
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/property-editor-empty-state.ts b/src/lib/json-ui/interfaces/property-editor-empty-state.ts
new file mode 100644
index 0000000..d99ad47
--- /dev/null
+++ b/src/lib/json-ui/interfaces/property-editor-empty-state.ts
@@ -0,0 +1 @@
+export interface PropertyEditorEmptyStateProps {}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/property-editor-header.ts b/src/lib/json-ui/interfaces/property-editor-header.ts
new file mode 100644
index 0000000..b2b1da0
--- /dev/null
+++ b/src/lib/json-ui/interfaces/property-editor-header.ts
@@ -0,0 +1 @@
+export interface PropertyEditorHeaderProps { componentId: string; componentLabel: string; onDelete: () => void; }
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/property-editor-section.ts b/src/lib/json-ui/interfaces/property-editor-section.ts
new file mode 100644
index 0000000..ad65105
--- /dev/null
+++ b/src/lib/json-ui/interfaces/property-editor-section.ts
@@ -0,0 +1,6 @@
+export interface PropertyEditorSectionProps {
+  title: string;
+  fields: PropertyEditorFieldDefinition[];
+  component: UIComponent;
+  onChange: (key: string, value: unknown) => void;
+}
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/repeat-wrapper.ts b/src/lib/json-ui/interfaces/repeat-wrapper.ts
new file mode 100644
index 0000000..919d61c
--- /dev/null
+++ b/src/lib/json-ui/interfaces/repeat-wrapper.ts
@@ -0,0 +1 @@
+export interface RepeatWrapperProps { items: any[]; render: (item: any, index: number) => React.ReactNode; emptyMessage?: string; className?: string; gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; }
\ No newline at end of file
diff --git a/src/lib/json-ui/interfaces/static-source-fields.ts b/src/lib/json-ui/interfaces/static-source-fields.ts
new file mode 100644
index 0000000..54a7dc7
--- /dev/null
+++ b/src/lib/json-ui/interfaces/static-source-fields.ts
@@ -0,0 +1,6 @@
+export interface StaticSourceFieldsProps {
+  editingSource: DataSource;
+  label: string;
+  placeholder: string;
+  onUpdateField: <K extends keyof DataSource>(field: K, value: DataSource[K]) => void;
+};
\ No newline at end of file
diff --git a/src/lib/json-ui/json-components.ts b/src/lib/json-ui/json-components.ts
index 3bc831a..eda7c5f 100644
--- a/src/lib/json-ui/json-components.ts
+++ b/src/lib/json-ui/json-components.ts
@@ -6,6 +6,7 @@
 import { createJsonComponent } from './create-json-component'
 import { createJsonComponentWithHooks } from './create-json-component-with-hooks'
 import type {
+
   LoadingFallbackProps,
   NavigationItemProps,
   PageHeaderContentProps,
@@ -67,6 +68,26 @@ import type {
   KeyValueProps,
   StatusIconProps,
   ProgressBarProps,
+  PropertyEditorHeaderProps,
+  PropertyEditorEmptyStateProps,
+  PropertyEditorSectionProps,
+  KvSourceFieldsProps,
+  ComponentTreeEmptyStateProps,
+  ComponentTreeNodesProps,
+  ComponentTreeHeaderProps,
+  DataSourceIdFieldProps,
+  StaticSourceFieldsProps,
+  FlexLayoutProps,
+  IconRendererProps,
+  ConditionalWrapperProps,
+  DataCardProps,
+  PanelProps,
+  DynamicTextProps,
+  GridLayoutProps,
+  RepeatWrapperProps,
+  DataSourceGroupSectionProps,
+  DataSourceManagerProps,
+  DataSourceManagerHeaderProps,
 } from './interfaces'
 
 // Import JSON definitions
@@ -129,6 +150,26 @@ import detailRowDef from '@/components/json-definitions/detail-row.json'
 import keyValueDef from '@/components/json-definitions/key-value.json'
 import statusIconDef from '@/components/json-definitions/status-icon.json'
 import progressBarDef from '@/components/json-definitions/progress-bar.json'
+import propertyEditorHeaderDef from '@/components/json-definitions/property-editor-header.json'
+import propertyEditorEmptyStateDef from '@/components/json-definitions/property-editor-empty-state.json'
+import propertyEditorSectionDef from '@/components/json-definitions/property-editor-section.json'
+import kvSourceFieldsDef from '@/components/json-definitions/kv-source-fields.json'
+import componentTreeEmptyStateDef from '@/components/json-definitions/component-tree-empty-state.json'
+import componentTreeNodesDef from '@/components/json-definitions/component-tree-nodes.json'
+import componentTreeHeaderDef from '@/components/json-definitions/component-tree-header.json'
+import dataSourceIdFieldDef from '@/components/json-definitions/data-source-id-field.json'
+import staticSourceFieldsDef from '@/components/json-definitions/static-source-fields.json'
+import flexLayoutDef from '@/components/json-definitions/flex-layout.json'
+import iconRendererDef from '@/components/json-definitions/icon-renderer.json'
+import conditionalWrapperDef from '@/components/json-definitions/conditional-wrapper.json'
+import dataCardDef from '@/components/json-definitions/data-card.json'
+import panelDef from '@/components/json-definitions/panel.json'
+import dynamicTextDef from '@/components/json-definitions/dynamic-text.json'
+import gridLayoutDef from '@/components/json-definitions/grid-layout.json'
+import repeatWrapperDef from '@/components/json-definitions/repeat-wrapper.json'
+import dataSourceGroupSectionDef from '@/components/json-definitions/data-source-group-section.json'
+import dataSourceManagerDef from '@/components/json-definitions/data-source-manager.json'
+import dataSourceManagerHeaderDef from '@/components/json-definitions/data-source-manager-header.json'
 
 // Create pure JSON components (no hooks)
 export const LoadingFallback = createJsonComponent<LoadingFallbackProps>(loadingFallbackDef)
@@ -312,3 +353,44 @@ export const StatusIcon = createJsonComponent<StatusIconProps>(statusIconDef)
 export const ProgressBar = createJsonComponent<ProgressBarProps>(progressBarDef)
 
 // All components converted to pure JSON! 🎉
+export const PropertyEditorHeader = createJsonComponent<PropertyEditorHeaderProps>(propertyEditorHeaderDef)
+export const PropertyEditorEmptyState = createJsonComponent<PropertyEditorEmptyStateProps>(propertyEditorEmptyStateDef)
+export const PropertyEditorSection = createJsonComponent<PropertyEditorSectionProps>(propertyEditorSectionDef)
+export const KvSourceFields = createJsonComponent<KvSourceFieldsProps>(kvSourceFieldsDef)
+export const ComponentTreeEmptyState = createJsonComponent<ComponentTreeEmptyStateProps>(componentTreeEmptyStateDef)
+export const ComponentTreeNodes = createJsonComponentWithHooks<ComponentTreeNodesProps>(componentTreeNodesDef, {
+  hooks: {
+    data: {
+      hookName: "useComponentTreeNodes",
+      args: (props) => [props.expandedIds]
+    }
+  }
+})
+export const ComponentTreeHeader = createJsonComponent<ComponentTreeHeaderProps>(componentTreeHeaderDef)
+export const DataSourceIdField = createJsonComponent<DataSourceIdFieldProps>(dataSourceIdFieldDef)
+export const StaticSourceFields = createJsonComponentWithHooks<StaticSourceFieldsProps>(staticSourceFieldsDef, {
+  hooks: {
+    handleChange: {
+      hookName: 'useStaticSourceFields',
+      args: (props) => [props.onUpdateField]
+    }
+  }
+});
+export const FlexLayout = createJsonComponent<FlexLayoutProps>(flexLayoutDef)
+export const IconRenderer = createJsonComponent<IconRendererProps>(iconRendererDef)
+export const ConditionalWrapper = createJsonComponent<ConditionalWrapperProps>(conditionalWrapperDef);
+export const DataCard = createJsonComponent<DataCardProps>(dataCardDef)
+export const Panel = createJsonComponent<PanelProps>(panelDef)
+export const DynamicText = createJsonComponentWithHooks<DynamicTextProps>(dynamicTextDef, {
+  hooks: {
+    data: {
+      hookName: 'useDynamicText',
+      args: (props) => [props.value, props.format, props.currency, props.locale]
+    }
+  }
+});
+export const GridLayout = createJsonComponent<GridLayoutProps>(gridLayoutDef);
+export const RepeatWrapper = createJsonComponent<RepeatWrapperProps>(repeatWrapperDef)
+export const DataSourceGroupSection = createJsonComponent<DataSourceGroupSectionProps>(dataSourceGroupSectionDef)
+export const DataSourceManager = createJsonComponentWithHooks<DataSourceManagerProps>(dataSourceManagerDef, { hooks: { hookData: { hookName: 'useDataSourceManager', args: (props) => [props.dataSources] } } })
+export const DataSourceManagerHeader = createJsonComponent<DataSourceManagerHeaderProps>(dataSourceManagerHeaderDef)