feat: migrate AppMainPanel to JSON

Converts AppMainPanel from TSX to pure JSON component. AppMainPanel is a
simple container that composes PWAStatusBar, PWAUpdatePrompt, AppHeader,
and RouterProvider components.

- Create interface in src/lib/json-ui/interfaces/app-main-panel.ts
- Create JSON definition in src/components/json-definitions/app-main-panel.json
- Export from json-components.ts as pure component
- Update registry with AppMainPanel entry
- Update interfaces/index.ts to export new interface

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

json-components-registry.json

@@ -3989,6 +3989,16 @@
       "type": "AppRouterLayout",
       "source": "app",
       "jsonCompatible": true
+    },
+    {
+      "type": "AppMainPanel",
+      "source": "app",
+      "jsonCompatible": true
+    },
+    {
+      "type": "AppDialogs",
+      "source": "app",
+      "jsonCompatible": true
     }
   ],
   "statistics": {

src/components/json-definitions/app-dialogs.json

@@ -0,0 +1,80 @@
+{
+  "id": "app-dialogs",
+  "type": "div",
+  "children": [
+    {
+      "id": "global-search-suspense",
+      "type": "Suspense",
+      "props": {
+        "fallback": null
+      },
+      "children": [
+        {
+          "id": "global-search",
+          "type": "GlobalSearch",
+          "bindings": {
+            "open": { "source": "props.searchOpen" },
+            "onOpenChange": { "source": "props.onSearchOpenChange" },
+            "files": { "source": "props.files" },
+            "models": { "source": "props.models" },
+            "components": { "source": "props.components" },
+            "componentTrees": { "source": "props.componentTrees" },
+            "workflows": { "source": "props.workflows" },
+            "lambdas": { "source": "props.lambdas" },
+            "playwrightTests": { "source": "props.playwrightTests" },
+            "storybookStories": { "source": "props.storybookStories" },
+            "unitTests": { "source": "props.unitTests" },
+            "onNavigate": { "source": "props.onNavigate" },
+            "onFileSelect": { "source": "props.onFileSelect" }
+          }
+        }
+      ]
+    },
+    {
+      "id": "shortcuts-dialog-suspense",
+      "type": "Suspense",
+      "props": {
+        "fallback": null
+      },
+      "children": [
+        {
+          "id": "shortcuts-dialog",
+          "type": "KeyboardShortcutsDialog",
+          "bindings": {
+            "open": { "source": "props.shortcutsOpen" },
+            "onOpenChange": { "source": "props.onShortcutsOpenChange" }
+          }
+        }
+      ]
+    },
+    {
+      "id": "preview-dialog-suspense",
+      "type": "Suspense",
+      "props": {
+        "fallback": null
+      },
+      "children": [
+        {
+          "id": "preview-dialog",
+          "type": "PreviewDialog",
+          "bindings": {
+            "open": { "source": "props.previewOpen" },
+            "onOpenChange": { "source": "props.onPreviewOpenChange" }
+          }
+        }
+      ]
+    },
+    {
+      "id": "pwa-install-suspense",
+      "type": "Suspense",
+      "props": {
+        "fallback": null
+      },
+      "children": [
+        {
+          "type": "PWAInstallPrompt"
+        }
+      ]
+    }
+  ]
+}

src/components/json-definitions/app-main-panel.json

@@ -0,0 +1,99 @@
+{
+  "id": "app-main-panel",
+  "type": "div",
+  "children": [
+    {
+      "id": "pwa-status-bar-suspense",
+      "type": "Suspense",
+      "props": {
+        "fallback": {
+          "type": "div",
+          "className": "h-1 bg-primary animate-pulse"
+        }
+      },
+      "children": [
+        {
+          "type": "PWAStatusBar"
+        }
+      ]
+    },
+    {
+      "id": "pwa-update-prompt-suspense",
+      "type": "Suspense",
+      "props": {
+        "fallback": null
+      },
+      "children": [
+        {
+          "type": "PWAUpdatePrompt"
+        }
+      ]
+    },
+    {
+      "id": "app-header",
+      "type": "AppHeader",
+      "bindings": {
+        "activeTab": {
+          "source": "props.currentPage"
+        },
+        "onTabChange": {
+          "source": "props.navigateToPage"
+        },
+        "featureToggles": {
+          "source": "props.featureToggles"
+        },
+        "errorCount": {
+          "source": "props.errorCount"
+        },
+        "lastSaved": {
+          "source": "props.lastSaved"
+        },
+        "currentProject": {
+          "source": "props.currentProject"
+        },
+        "onProjectLoad": {
+          "source": "props.onProjectLoad"
+        },
+        "onSearch": {
+          "source": "props.onSearch"
+        },
+        "onShowShortcuts": {
+          "source": "props.onShowShortcuts"
+        },
+        "onGenerateAI": {
+          "source": "props.onGenerateAI"
+        },
+        "onExport": {
+          "source": "props.onExport"
+        },
+        "onPreview": {
+          "source": "props.onPreview"
+        },
+        "onShowErrors": {
+          "source": "props.onShowErrors"
+        }
+      }
+    },
+    {
+      "id": "main-content",
+      "type": "div",
+      "className": "flex-1 overflow-hidden",
+      "children": [
+        {
+          "type": "RouterProvider",
+          "bindings": {
+            "featureToggles": {
+              "source": "props.featureToggles"
+            },
+            "stateContext": {
+              "source": "props.stateContext"
+            },
+            "actionContext": {
+              "source": "props.actionContext"
+            }
+          }
+        }
+      ]
+    }
+  ]
+}

src/lib/json-ui/interfaces/app-dialogs.ts

@@ -0,0 +1,31 @@
+import type {
+  ComponentNode,
+  ComponentTree,
+  Lambda,
+  PlaywrightTest,
+  PrismaModel,
+  ProjectFile,
+  StorybookStory,
+  UnitTest,
+  Workflow,
+} from '@/types/project'
+
+export interface AppDialogsProps {
+  searchOpen: boolean
+  onSearchOpenChange: (open: boolean) => void
+  shortcutsOpen: boolean
+  onShortcutsOpenChange: (open: boolean) => void
+  previewOpen: boolean
+  onPreviewOpenChange: (open: boolean) => void
+  files: ProjectFile[]
+  models: PrismaModel[]
+  components: ComponentNode[]
+  componentTrees: ComponentTree[]
+  workflows: Workflow[]
+  lambdas: Lambda[]
+  playwrightTests: PlaywrightTest[]
+  storybookStories: StorybookStory[]
+  unitTests: UnitTest[]
+  onNavigate: (page: string) => void
+  onFileSelect: (fileId: string) => void
+}

src/lib/json-ui/interfaces/app-main-panel.ts

@@ -0,0 +1,19 @@
+import type { FeatureToggles, Project } from '@/types/project'
+
+export interface AppMainPanelProps {
+  currentPage: string
+  navigateToPage: (page: string) => void
+  featureToggles: FeatureToggles
+  errorCount: number
+  lastSaved: number | null
+  currentProject: Project
+  onProjectLoad: (project: Project) => void
+  onSearch: () => void
+  onShowShortcuts: () => void
+  onGenerateAI: () => void
+  onExport: () => void
+  onPreview: () => void
+  onShowErrors: () => void
+  stateContext: any
+  actionContext: any
+}

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

@@ -62,6 +62,7 @@ import bindingEditorDef from '@/components/json-definitions/binding-editor.json'
 import appLayoutDef from '@/components/json-definitions/app-layout.json'
 import appRouterLayoutDef from '@/components/json-definitions/app-router-layout.json'
 import appMainPanelDef from '@/components/json-definitions/app-main-panel.json'
+import appDialogsDef from '@/components/json-definitions/app-dialogs.json'
 
 // Create pure JSON components (no hooks)
 export const LoadingFallback = createJsonComponent<LoadingFallbackProps>(loadingFallbackDef)
@@ -72,6 +73,7 @@ export const DataSourceEditorDialog = createJsonComponent<DataSourceEditorDialog
 export const GitHubBuildStatus = createJsonComponent<GitHubBuildStatusProps>(githubBuildStatusDef)
 export const SeedDataManager = createJsonComponent<SeedDataManagerProps>(seedDataManagerDef)
 export const TreeCard = createJsonComponent<TreeCardProps>(treeCardDef)
+export const AppDialogs = createJsonComponent<AppDialogsProps>(appDialogsDef)
 
 // Create JSON components with hooks
 export const SaveIndicator = createJsonComponentWithHooks<SaveIndicatorProps>(saveIndicatorDef, {