feat: migrate Phase 12 components with registry updates (Phase 11 continuation)

Added 3 additional JSON component definitions and interfaces:
- ComponentTreeDemoPage: Demo page for component tree visualization
- JsonFlaskDesigner: Designer for Flask app config using JSON
- JsonStyleDesigner: Designer for styling config using JSON

Changes:
- Created 2 JSON definitions in src/components/json-definitions/
- Created 3 TypeScript interfaces in src/lib/json-ui/interfaces/
- Updated interfaces/index.ts to export all new interfaces
- Updated json-components.ts exports for all 3 new components
- Updated json-components-registry.json with 3 new entries
- Updated registry statistics: 373 → 376 total, 223 → 226 JSON-compatible

Build status: PASS ✓
All components verified and building successfully.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

audit-report.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-01-21T04:20:39.255Z",
+  "timestamp": "2026-01-21T04:22:09.135Z",
   "issues": [],
   "stats": {
     "totalJsonFiles": 337,

json-components-registry.json

@@ -4761,11 +4761,41 @@
       "status": "supported",
       "source": "components",
       "jsonCompatible": true
+    },
+    {
+      "type": "ComponentTreeDemoPage",
+      "name": "Component Tree Demo Page",
+      "category": "page",
+      "canHaveChildren": true,
+      "description": "Demo page for component tree visualization",
+      "status": "supported",
+      "source": "components",
+      "jsonCompatible": true
+    },
+    {
+      "type": "JsonFlaskDesigner",
+      "name": "JSON Flask Designer",
+      "category": "page",
+      "canHaveChildren": true,
+      "description": "Designer for Flask application configuration using JSON",
+      "status": "supported",
+      "source": "components",
+      "jsonCompatible": true
+    },
+    {
+      "type": "JsonStyleDesigner",
+      "name": "JSON Style Designer",
+      "category": "page",
+      "canHaveChildren": true,
+      "description": "Designer for styling configuration using JSON",
+      "status": "supported",
+      "source": "components",
+      "jsonCompatible": true
     }
   ],
   "statistics": {
-    "total": 373,
-    "jsonCompatible": 223,
+    "total": 376,
+    "jsonCompatible": 226,
     "coverage": "60%"
   }
 }

src/components/json-definitions/component-tree-demo-page.json

@@ -0,0 +1,16 @@
+{
+  "id": "component-tree-demo-page",
+  "type": "div",
+  "bindings": {
+    "className": {
+      "source": null,
+      "transform": "'h-full'"
+    }
+  },
+  "children": [
+    {
+      "id": "component-tree-viewer",
+      "type": "ComponentTreeViewer"
+    }
+  ]
+}

src/components/json-definitions/json-style-designer.json

@@ -0,0 +1,7 @@
+{
+  "id": "json-style-designer",
+  "type": "JSONPageRenderer",
+  "props": {
+    "schema": "styleDesignerConfig"
+  }
+}

src/lib/json-ui/interfaces/component-tree-demo-page.ts

@@ -0,0 +1 @@
+export interface ComponentTreeDemoPageProps {}

src/lib/json-ui/interfaces/index.ts

@@ -206,6 +206,9 @@ export * from './error-panel'
 export * from './preview-dialog'
 export * from './not-found-page'
 export * from './global-search'
+export * from './json-flask-designer'
+export * from './json-style-designer'
+export * from './component-tree-demo-page'
 export * from './atomic-component-showcase'
 export * from './json-ui-showcase-page'
 export * from './json-demo-page'

src/lib/json-ui/interfaces/json-flask-designer.ts

@@ -0,0 +1,3 @@
+export interface JSONFlaskDesignerProps {
+  schema?: any
+}

src/lib/json-ui/interfaces/json-style-designer.ts

@@ -0,0 +1,3 @@
+export interface JSONStyleDesignerProps {
+  schema?: any
+}

src/lib/json-ui/json-components.ts

@@ -224,6 +224,9 @@ import type {
   NotFoundPageProps,
   GlobalSearchProps,
   FileExplorerProps,
+  JSONFlaskDesignerProps,
+  JSONStyleDesignerProps,
+  ComponentTreeDemoPageProps,
   AtomicComponentShowcaseProps,
   JSONUIShowcasePageProps,
   JSONDemoPageProps,
@@ -453,6 +456,9 @@ import previewDialogDef from '@/components/json-definitions/preview-dialog.json'
 import notFoundPageDef from '@/components/json-definitions/not-found-page.json'
 import globalSearchDef from '@/components/json-definitions/global-search.json'
 import fileExplorerDef from '@/components/json-definitions/file-explorer.json'
+import jsonFlaskDesignerDef from '@/components/json-definitions/json-flask-designer.json'
+import jsonStyleDesignerDef from '@/components/json-definitions/json-style-designer.json'
+import componentTreeDemoPageDef from '@/components/json-definitions/component-tree-demo-page.json'
 import atomicComponentShowcaseDef from '@/components/json-definitions/atomic-component-showcase.json'
 import jsonUiShowcasePageDef from '@/components/json-definitions/json-ui-showcase-page.json'
 import jsonDemoPageDef from '@/components/json-definitions/json-demo-page.json'
@@ -827,6 +833,9 @@ export const PreviewDialog = createJsonComponent<PreviewDialogProps>(previewDial
 export const NotFoundPage = createJsonComponent<NotFoundPageProps>(notFoundPageDef)
 export const GlobalSearch = createJsonComponent<GlobalSearchProps>(globalSearchDef)
 export const FileExplorer = createJsonComponent<FileExplorerProps>(fileExplorerDef)
+export const JSONFlaskDesigner = createJsonComponent<JSONFlaskDesignerProps>(jsonFlaskDesignerDef)
+export const JSONStyleDesigner = createJsonComponent<JSONStyleDesignerProps>(jsonStyleDesignerDef)
+export const ComponentTreeDemoPage = createJsonComponent<ComponentTreeDemoPageProps>(componentTreeDemoPageDef)
 export const AtomicComponentShowcase = createJsonComponent<AtomicComponentShowcaseProps>(atomicComponentShowcaseDef)
 export const JSONUIShowcasePage = createJsonComponent<JSONUIShowcasePageProps>(jsonUiShowcasePageDef)
 export const JSONDemoPage = createJsonComponent<JSONDemoPageProps>(jsonDemoPageDef)