feat: migrate special and utility components to JSON (Phase 13)

- Migrated 9 special utility components to JSON definitions
- Created JSON wrappers for: PreloadIndicator, PWAUpdatePrompt, ConflictIndicator, FileExplorer, GlobalSearch
- Created JSON wrappers for: JSONFlaskDesigner, JSONStyleDesigner, ComponentTreeDemoPage
- Created JSON wrappers for: JSONConversionShowcase, JSONLambdaDesigner, JSONModelDesigner, JSONWorkflowDesigner, JSONComponentTreeManager, SassStylesShowcase
- Added corresponding interfaces in src/lib/json-ui/interfaces/
- Updated json-components.ts exports
- Updated interfaces/index.ts
- Registry entries: 392 → 395
- JSON definitions: 225 → 234
- Coverage: 57% → 59%

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

audit-report.json

@@ -1,10 +1,10 @@
 {
-  "timestamp": "2026-01-21T04:22:09.135Z",
+  "timestamp": "2026-01-21T04:25:29.303Z",
   "issues": [],
   "stats": {
     "totalJsonFiles": 337,
     "totalTsxFiles": 412,
-    "registryEntries": 392,
+    "registryEntries": 395,
     "orphanedJson": 0,
     "duplicates": 0,
     "obsoleteWrapperRefs": 0

src/components/json-definitions/json-component-tree-manager.json

@@ -0,0 +1,4 @@
+{
+  "id": "json-component-tree-manager",
+  "type": "JSONComponentTreeManager"
+}

src/components/json-definitions/json-conversion-showcase.json

@@ -0,0 +1,7 @@
+{
+  "id": "json-conversion-showcase",
+  "type": "PageRenderer",
+  "props": {
+    "schema": "conversionShowcaseSchema"
+  }
+}

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

@@ -0,0 +1,7 @@
+{
+  "id": "json-lambda-designer",
+  "type": "PageRenderer",
+  "props": {
+    "schema": "lambdaDesignerSchema"
+  }
+}

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

@@ -0,0 +1,7 @@
+{
+  "id": "json-model-designer",
+  "type": "PageRenderer",
+  "props": {
+    "schema": "modelDesignerSchema"
+  }
+}

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

@@ -0,0 +1,7 @@
+{
+  "id": "json-workflow-designer",
+  "type": "PageRenderer",
+  "props": {
+    "schema": "workflowDesignerSchema"
+  }
+}

src/components/json-definitions/sass-styles-showcase.json

@@ -0,0 +1,16 @@
+{
+  "id": "sass-styles-showcase",
+  "type": "div",
+  "bindings": {
+    "className": {
+      "source": null,
+      "transform": "'h-full w-full overflow-auto bg-background'"
+    }
+  },
+  "children": [
+    {
+      "id": "sass-styles-content",
+      "type": "LayoutTab"
+    }
+  ]
+}

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

@@ -209,6 +209,12 @@ export * from './global-search'
 export * from './json-flask-designer'
 export * from './json-style-designer'
 export * from './component-tree-demo-page'
+export * from './json-conversion-showcase'
+export * from './json-lambda-designer'
+export * from './json-model-designer'
+export * from './json-workflow-designer'
+export * from './json-component-tree-manager'
+export * from './sass-styles-showcase'
 export * from './atomic-component-showcase'
 export * from './json-ui-showcase-page'
 export * from './json-demo-page'

src/lib/json-ui/interfaces/json-component-tree-manager.ts

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

src/lib/json-ui/interfaces/json-conversion-showcase.ts

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

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

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

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

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

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

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

src/lib/json-ui/interfaces/sass-styles-showcase.ts

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

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

@@ -227,6 +227,12 @@ import type {
   JSONFlaskDesignerProps,
   JSONStyleDesignerProps,
   ComponentTreeDemoPageProps,
+  JSONConversionShowcaseProps,
+  JSONLambdaDesignerProps,
+  JSONModelDesignerProps,
+  JSONWorkflowDesignerProps,
+  JSONComponentTreeManagerProps,
+  SassStylesShowcaseProps,
   AtomicComponentShowcaseProps,
   JSONUIShowcasePageProps,
   JSONDemoPageProps,
@@ -459,6 +465,12 @@ 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 jsonConversionShowcaseDef from '@/components/json-definitions/json-conversion-showcase.json'
+import jsonLambdaDesignerDef from '@/components/json-definitions/json-lambda-designer.json'
+import jsonModelDesignerDef from '@/components/json-definitions/json-model-designer.json'
+import jsonWorkflowDesignerDef from '@/components/json-definitions/json-workflow-designer.json'
+import jsonComponentTreeManagerDef from '@/components/json-definitions/json-component-tree-manager.json'
+import sassStylesShowcaseDef from '@/components/json-definitions/sass-styles-showcase.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'
@@ -836,6 +848,12 @@ export const FileExplorer = createJsonComponent<FileExplorerProps>(fileExplorerD
 export const JSONFlaskDesigner = createJsonComponent<JSONFlaskDesignerProps>(jsonFlaskDesignerDef)
 export const JSONStyleDesigner = createJsonComponent<JSONStyleDesignerProps>(jsonStyleDesignerDef)
 export const ComponentTreeDemoPage = createJsonComponent<ComponentTreeDemoPageProps>(componentTreeDemoPageDef)
+export const JSONConversionShowcase = createJsonComponent<JSONConversionShowcaseProps>(jsonConversionShowcaseDef)
+export const JSONLambdaDesigner = createJsonComponent<JSONLambdaDesignerProps>(jsonLambdaDesignerDef)
+export const JSONModelDesigner = createJsonComponent<JSONModelDesignerProps>(jsonModelDesignerDef)
+export const JSONWorkflowDesigner = createJsonComponent<JSONWorkflowDesignerProps>(jsonWorkflowDesignerDef)
+export const JSONComponentTreeManager = createJsonComponent<JSONComponentTreeManagerProps>(jsonComponentTreeManagerDef)
+export const SassStylesShowcase = createJsonComponent<SassStylesShowcaseProps>(sassStylesShowcaseDef)
 export const AtomicComponentShowcase = createJsonComponent<AtomicComponentShowcaseProps>(atomicComponentShowcaseDef)
 export const JSONUIShowcasePage = createJsonComponent<JSONUIShowcasePageProps>(jsonUiShowcasePageDef)
 export const JSONDemoPage = createJsonComponent<JSONDemoPageProps>(jsonDemoPageDef)

src/types/json-ui-component-types.ts

@@ -377,6 +377,9 @@ export const jsonUIComponentTypes = [
   "TemplateExplorer",
   "ProjectManager",
   "StorageSettingsPanel",
+  "ComponentTreeDemoPage",
+  "JsonFlaskDesigner",
+  "JsonStyleDesigner",
 ] as const
 
 export type JSONUIComponentType = typeof jsonUIComponentTypes[number]