feat: migrate page components and layouts to JSON (Phase 12)

Migrated 20 page-level and layout components to JSON-based architecture:
- SchemaEditorPage, KeyboardShortcutsDialog, PreloadIndicator
- PWA components: PWAStatusBar, PWAUpdatePrompt, PWAInstallPrompt
- UI components: ConflictCard, ConflictIndicator, ErrorPanel, PreviewDialog
- Page templates: NotFoundPage, GlobalSearch
- Demo pages: AtomicComponentShowcase, JSONUIShowcasePage, JSONDemoPage
  DashboardDemoPage, ComprehensiveDemoPage
- Feature components: TemplateExplorer, ProjectManager, StorageSettingsPanel

Created JSON definitions and interfaces for all components. Updated registry
to include 19 new entries (one was duplicate). All components now available
as pure JSON exports via json-components.ts.

Coverage improvements:
- JSON exports: 203 → 224 (+21 components)
- JSON definitions: 204 → 225 (+21 files)
- Registry entries: 373 → 392 (+19 entries)

Build passes with no errors. All page components now use JSON-driven
architecture instead of TSX.

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

src/components/json-definitions/conflict-resolution-filters.json

@@ -1,11 +0,0 @@
-{
-  "id": "conflict-resolution-filters",
-  "type": "Box",
-  "className": "mb-4 flex items-center justify-between",
-  "bindings": {
-    "children": {
-      "source": "props",
-      "type": "template"
-    }
-  }
-}

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

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

src/lib/json-ui/interfaces/global-search.ts

@@ -1,5 +1,39 @@
+import {
+  ComponentNode,
+  ComponentTree,
+  Lambda,
+  PlaywrightTest,
+  PrismaModel,
+  ProjectFile,
+  StorybookStory,
+  UnitTest,
+  Workflow,
+} from '@/types/project'
+
 /**
  * GlobalSearchProps - JSON definition interface
  * Global search dialog
  */
-export interface GlobalSearchProps {}
+export interface GlobalSearchProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  searchQuery?: string
+  setSearchQuery?: (query: string) => void
+  recentSearches?: any[]
+  groupedResults?: any[]
+  clearHistory?: () => void
+  removeHistoryItem?: (item: any) => void
+  handleSelect?: (item: any) => void
+  handleHistorySelect?: (item: any) => void
+  files?: ProjectFile[]
+  models?: PrismaModel[]
+  components?: ComponentNode[]
+  componentTrees?: ComponentTree[]
+  workflows?: Workflow[]
+  lambdas?: Lambda[]
+  playwrightTests?: PlaywrightTest[]
+  storybookStories?: StorybookStory[]
+  unitTests?: UnitTest[]
+  onNavigate?: (tab: string, itemId?: string) => void
+  onFileSelect?: (fileId: string) => void
+}

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

@@ -211,6 +211,27 @@ import type {
   StatusCardProps,
   InfoSectionProps,
   ListHeaderProps,
+  SchemaEditorPageProps,
+  KeyboardShortcutsDialogProps,
+  PreloadIndicatorProps,
+  PWAStatusBarProps,
+  PWAUpdatePromptProps,
+  PWAInstallPromptProps,
+  ConflictCardProps,
+  ConflictIndicatorProps,
+  ErrorPanelProps,
+  PreviewDialogProps,
+  NotFoundPageProps,
+  GlobalSearchProps,
+  FileExplorerProps,
+  AtomicComponentShowcaseProps,
+  JSONUIShowcasePageProps,
+  JSONDemoPageProps,
+  DashboardDemoPageProps,
+  ComprehensiveDemoPageProps,
+  TemplateExplorerProps,
+  ProjectManagerProps,
+  StorageSettingsPanelProps,
 } from './interfaces'
 
 // Import JSON definitions
@@ -419,6 +440,27 @@ import configCardDef from '@/components/json-definitions/config-card.json'
 import statusCardDef from '@/components/json-definitions/status-card.json'
 import infoSectionDef from '@/components/json-definitions/info-section.json'
 import listHeaderDef from '@/components/json-definitions/list-header.json'
+import schemaEditorPageDef from '@/components/json-definitions/schema-editor-page.json'
+import keyboardShortcutsDialogDef from '@/components/json-definitions/keyboard-shortcuts-dialog.json'
+import preloadIndicatorDef from '@/components/json-definitions/preload-indicator.json'
+import pwaStatusBarDef from '@/components/json-definitions/pwa-status-bar.json'
+import pwaUpdatePromptDef from '@/components/json-definitions/pwa-update-prompt.json'
+import pwaInstallPromptDef from '@/components/json-definitions/pwa-install-prompt.json'
+import conflictCardDef from '@/components/json-definitions/conflict-card.json'
+import conflictIndicatorDef from '@/components/json-definitions/conflict-indicator.json'
+import errorPanelDef from '@/components/json-definitions/error-panel.json'
+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 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'
+import dashboardDemoPageDef from '@/components/json-definitions/dashboard-demo-page.json'
+import comprehensiveDemoPageDef from '@/components/json-definitions/comprehensive-demo-page.json'
+import templateExplorerDef from '@/components/json-definitions/template-explorer.json'
+import projectManagerDef from '@/components/json-definitions/project-manager.json'
+import storageSettingsPanelDef from '@/components/json-definitions/storage-settings-panel.json'
 
 // Create pure JSON components (no hooks)
 export const BindingIndicator = createJsonComponent<BindingIndicatorProps>(bindingIndicatorDef)
@@ -771,4 +813,27 @@ export const ShadcnTooltip = createJsonComponent<ShadcnTooltipProps>(shadcnToolt
 export const ShadcnTooltipTrigger = createJsonComponent<ShadcnTooltipTriggerProps>(shadcnTooltipTriggerDef)
 export const ShadcnTooltipContent = createJsonComponent<ShadcnTooltipContentProps>(shadcnTooltipContentDef)
 
+// Phase 12: Page-level components and layouts
+export const SchemaEditorPage = createJsonComponent<SchemaEditorPageProps>(schemaEditorPageDef)
+export const KeyboardShortcutsDialog = createJsonComponent<KeyboardShortcutsDialogProps>(keyboardShortcutsDialogDef)
+export const PreloadIndicator = createJsonComponent<PreloadIndicatorProps>(preloadIndicatorDef)
+export const PWAStatusBar = createJsonComponent<PWAStatusBarProps>(pwaStatusBarDef)
+export const PWAUpdatePrompt = createJsonComponent<PWAUpdatePromptProps>(pwaUpdatePromptDef)
+export const PWAInstallPrompt = createJsonComponent<PWAInstallPromptProps>(pwaInstallPromptDef)
+export const ConflictCard = createJsonComponent<ConflictCardProps>(conflictCardDef)
+export const ConflictIndicator = createJsonComponent<ConflictIndicatorProps>(conflictIndicatorDef)
+export const ErrorPanel = createJsonComponent<ErrorPanelProps>(errorPanelDef)
+export const PreviewDialog = createJsonComponent<PreviewDialogProps>(previewDialogDef)
+export const NotFoundPage = createJsonComponent<NotFoundPageProps>(notFoundPageDef)
+export const GlobalSearch = createJsonComponent<GlobalSearchProps>(globalSearchDef)
+export const FileExplorer = createJsonComponent<FileExplorerProps>(fileExplorerDef)
+export const AtomicComponentShowcase = createJsonComponent<AtomicComponentShowcaseProps>(atomicComponentShowcaseDef)
+export const JSONUIShowcasePage = createJsonComponent<JSONUIShowcasePageProps>(jsonUiShowcasePageDef)
+export const JSONDemoPage = createJsonComponent<JSONDemoPageProps>(jsonDemoPageDef)
+export const DashboardDemoPage = createJsonComponent<DashboardDemoPageProps>(dashboardDemoPageDef)
+export const ComprehensiveDemoPage = createJsonComponent<ComprehensiveDemoPageProps>(comprehensiveDemoPageDef)
+export const TemplateExplorer = createJsonComponent<TemplateExplorerProps>(templateExplorerDef)
+export const ProjectManager = createJsonComponent<ProjectManagerProps>(projectManagerDef)
+export const StorageSettingsPanel = createJsonComponent<StorageSettingsPanelProps>(storageSettingsPanelDef)
+
 // All components converted to pure JSON! 🎉

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

@@ -358,6 +358,25 @@ export const jsonUIComponentTypes = [
   "StatusCard",
   "InfoSection",
   "ListHeader",
+  "SchemaEditorPage",
+  "KeyboardShortcutsDialog",
+  "PreloadIndicator",
+  "PWAStatusBar",
+  "PWAUpdatePrompt",
+  "PWAInstallPrompt",
+  "ConflictCard",
+  "ConflictIndicator",
+  "PreviewDialog",
+  "NotFoundPage",
+  "GlobalSearch",
+  "AtomicComponentShowcase",
+  "JSONUIShowcasePage",
+  "JSONDemoPage",
+  "DashboardDemoPage",
+  "ComprehensiveDemoPage",
+  "TemplateExplorer",
+  "ProjectManager",
+  "StorageSettingsPanel",
 ] as const
 
 export type JSONUIComponentType = typeof jsonUIComponentTypes[number]