Generated by Spark: Error: src/components/JSONFlaskDesigner.tsx(5,28): error TS2322: Type '{ config: { id: string; name: string; layout: { type: string; }; dataSources: ({ id: string; type: string; key: string; defaultValue: { appName: string; version: string; port: number; debug: boolean; cors: boolean; blueprints: never[]; }; compute?: undefined; dependencies?: undefined; } | { ...; } | { ...; } | { ......' is not assignable to type 'IntrinsicAttributes & ComponentRendererProps'.

Property 'config' does not exist on type 'IntrinsicAttributes & ComponentRendererProps'.
Error: src/components/JSONLambdaDesigner.tsx(5,28): error TS2322: Type '{ config: { name: string; layout: { type: string; }; dataSources: ({ id: string; key: string; type: string; defaultValue?: undefined; compute?: undefined; dependencies?: undefined; } | { id: string; type: string; defaultValue: null; key?: undefined; compute?: undefined; dependencies?: undefined; } | { ...; } | { ......' is not assignable to type 'IntrinsicAttributes & ComponentRendererProps'.
  Property 'config' does not exist on type 'IntrinsicAttributes & ComponentRendererProps'.
Error: src/components/JSONStyleDesigner.tsx(5,28): error TS2322: Type '{ config: { id: string; name: string; layout: { type: string; }; dataSources: ({ id: string; type: string; key: string; defaultValue: { activeVariantId: string; variants: { id: string; name: string; colors: { ...; }; }[]; typography: { ...; }; }; compute?: undefined; dependencies?: undefined; } | { ...; } | { ...; }...' is not assignable to type 'IntrinsicAttributes & ComponentRendererProps'.
  Property 'config' does not exist on type 'IntrinsicAttributes & ComponentRendererProps'.
Error: src/components/JSONWorkflowDesigner.tsx(11,18): error TS2352: Conversion of type '{ name: string; layout: { type: string; }; dataSources: ({ id: string; key: string; type: string; defaultValue?: undefined; compute?: undefined; dependencies?: undefined; } | { id: string; type: string; defaultValue: null; key?: undefined; compute?: undefined; dependencies?: undefined; } | { ...; } | { ...; } | { .....' to type 'PageSchema' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Property 'id' is missing in type '{ name: string; layout: { type: string; }; dataSources: ({ id: string; key: string; type: string; defaultValue?: undefined; compute?: undefined; dependencies?: undefined; } | { id: string; type: string; defaultValue: null; key?: undefined; compute?: undefined; dependencies?: undefined; } | { ...; } | { ...; } | { .....' but required in type 'PageSchema'.
Error: src/components/ProjectDashboard.tsx(81,11): error TS2322: Type '{ icon: Element; title: string; value: number; description: string; color: string; }' is not assignable to type 'IntrinsicAttributes & StatCardProps'.
  Property 'title' does not exist on type 'IntrinsicAttributes & StatCardProps'.
Error: src/components/ProjectDashboard.tsx(89,11): error TS2322: Type '{ icon: Element; title: string; value: number; description: string; color: string; }' is not assignable to type 'IntrinsicAttributes & StatCardProps'.
  Property 'title' does not exist on type 'IntrinsicAttributes & StatCardProps'.
Error: src/components/ProjectDashboard.tsx(97,11): error TS2322: Type '{ icon: Element; title: string; value: number; description: string; color: string; }' is not assignable to type 'IntrinsicAttributes & StatCardProps'.
  Property 'title' does not exist on type 'IntrinsicAttributes & StatCardProps'.
Error: src/components/ProjectDashboard.tsx(105,11): error TS2322: Type '{ icon: Element; title: string; value: number; description: string; color: string; }' is not assignable to type 'IntrinsicAttributes & StatCardProps'.
  Property 'title' does not exist on type 'IntrinsicAttributes & StatCardProps'.
Error: src/components/ProjectDashboard.tsx(113,11): error TS2322: Type '{ icon: Element; title: string; value: number; description: string; color: string; }' is not assignable to type 'IntrinsicAttributes & StatCardProps'.
  Property 'title' does not exist on type 'IntrinsicAttributes & StatCardProps'.
Error: src/components/ProjectDashboard.tsx(121,11): error TS2322: Type '{ icon: Element; title: string; value: number; description: string; color: string; }' is not assignable to type 'IntrinsicAttributes & StatCardProps'.
  Property 'title' does not exist on type 'IntrinsicAttributes & StatCardProps'.
Error: src/components/index.ts(2,1): error TS2308: Module './atoms' has already exported a member named 'EmptyState'. Consider explicitly re-exporting to resolve the ambiguity.
Error: src/components/index.ts(2,1): error TS2308: Module './atoms' has already exported a member named 'LoadingState'. Consider explicitly re-exporting to resolve the ambiguity.
Error: src/components/index.ts(2,1): error TS2308: Module './atoms' has already exported a member named 'StatCard'. Consider explicitly re-exporting to resolve the ambiguity.
Error: Process completed with exit code 2.

src/components/JSONPageRenderer.tsx

@@ -32,9 +32,10 @@ export interface PageSchema {
   [key: string]: any
 }
 
-interface ComponentRendererProps {
-  schema: PageSchema
-  data: Record<string, any>
+export interface ComponentRendererProps {
+  config?: PageSchema
+  schema?: PageSchema
+  data?: Record<string, any>
   functions?: Record<string, (...args: any[]) => any>
 }
 
@@ -53,7 +54,12 @@ function getIcon(iconName: string, props?: any) {
   return <IconComponent size={24} weight="duotone" {...props} />
 }
 
-export function JSONPageRenderer({ schema, data, functions = {} }: ComponentRendererProps) {
+export function JSONPageRenderer({ config, schema, data = {}, functions = {} }: ComponentRendererProps) {
+  const pageSchema = config || schema
+  if (!pageSchema) {
+    return <div>No schema provided</div>
+  }
+
   const renderSection = (section: PageSectionConfig, index: number): ReactNode => {
     switch (section.type) {
       case 'header':
@@ -67,7 +73,7 @@ export function JSONPageRenderer({ schema, data, functions = {} }: ComponentRend
         )
 
       case 'cards':
-        const cards = schema[section.items as string] || []
+        const cards = pageSchema[section.items as string] || []
         return (
           <div key={index} className={cn('space-y-' + (section.spacing || '4'))}>
             {cards.map((card: any) => renderCard(card))}
@@ -75,7 +81,7 @@ export function JSONPageRenderer({ schema, data, functions = {} }: ComponentRend
         )
 
       case 'grid':
-        const gridItems = schema[section.items as string] || []
+        const gridItems = pageSchema[section.items as string] || []
         const { sm = 1, md = 2, lg = 3 } = section.columns || {}
         return (
           <div
@@ -199,7 +205,7 @@ export function JSONPageRenderer({ schema, data, functions = {} }: ComponentRend
 
   return (
     <div className="h-full overflow-auto p-6 space-y-6">
-      {schema.layout.sections?.map((section, index) => renderSection(section, index))}
+      {pageSchema.layout.sections?.map((section, index) => renderSection(section, index))}
     </div>
   )
 }

src/components/ProjectDashboard.tsx

@@ -10,9 +10,8 @@ import {
   FileText,
 } from '@phosphor-icons/react'
 import { ProjectFile, PrismaModel, ComponentNode, ThemeConfig, PlaywrightTest, StorybookStory, UnitTest, FlaskConfig, NextJsConfig } from '@/types/project'
-import { SeedDataStatus, DetailRow, CompletionCard, TipsCard } from '@/components/atoms'
+import { SeedDataStatus, DetailRow, CompletionCard, TipsCard, StatCard } from '@/components/atoms'
 import { GitHubBuildStatus } from '@/components/molecules/GitHubBuildStatus'
-import { StatCard } from '@/components/molecules'
 import { useDashboardMetrics } from '@/hooks/ui/use-dashboard-metrics'
 import { useDashboardTips } from '@/hooks/ui/use-dashboard-tips'
 

src/components/molecules/index.ts

@@ -4,7 +4,6 @@ export { CodeExplanationDialog } from './CodeExplanationDialog'
 export { EditorActions } from './EditorActions'
 export { EditorToolbar } from './EditorToolbar'
 export { EmptyEditorState } from './EmptyEditorState'
-export { EmptyState } from './EmptyState'
 export { FileTabs } from './FileTabs'
 export { GitHubBuildStatus } from './GitHubBuildStatus'
 export { LabelWithBadge } from './LabelWithBadge'
@@ -14,14 +13,13 @@ export { LazyLineChart } from './LazyLineChart'
 export { LazyBarChart } from './LazyBarChart'
 export { LazyD3BarChart } from './LazyD3BarChart'
 export { LoadingFallback } from './LoadingFallback'
-export { LoadingState } from './LoadingState'
 export { MonacoEditorPanel } from './MonacoEditorPanel'
 export { NavigationGroupHeader } from './NavigationGroupHeader'
 export { NavigationItem } from './NavigationItem'
 export { PageHeaderContent } from './PageHeaderContent'
 export { SaveIndicator } from './SaveIndicator'
 export { SeedDataManager } from './SeedDataManager'
-export { StatCard } from './StatCard'
+export { StatCard as MoleculeStatCard } from './StatCard'
 export { ToolbarButton } from './ToolbarButton'
 export { TreeCard } from './TreeCard'
 export { TreeFormDialog } from './TreeFormDialog'
@@ -33,4 +31,6 @@ export { DataSourceCard } from './DataSourceCard'
 export { BindingEditor } from './BindingEditor'
 export { DataSourceEditorDialog } from './DataSourceEditorDialog'
 export { ComponentBindingDialog } from './ComponentBindingDialog'
+export { EmptyState as MoleculeEmptyState } from './EmptyState'
+export { LoadingState as MoleculeLoadingState } from './LoadingState'
 

src/components/organisms/TreeListPanel.tsx

@@ -1,7 +1,7 @@
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Button } from '@/components/ui/button'
 import { TreeCard, TreeListHeader } from '@/components/molecules'
-import { EmptyState } from '@/components/molecules'
+import { EmptyState } from '@/components/atoms'
 import { ComponentTree } from '@/types/project'
 import { FolderOpen } from '@phosphor-icons/react'
 
@@ -43,11 +43,10 @@ export function TreeListPanel({
             icon={<FolderOpen size={48} weight="duotone" />}
             title="No component trees yet"
             description="Create your first tree to get started"
-            action={
-              <Button size="sm" onClick={onCreateNew}>
-                Create First Tree
-              </Button>
-            }
+            action={{
+              label: 'Create First Tree',
+              onClick: onCreateNew
+            }}
           />
         </div>
       ) : (

src/config/pages/lambda-designer.json

@@ -1,4 +1,5 @@
 {
+  "id": "lambda-designer",
   "name": "Lambda Designer",
   "layout": {
     "type": "single"

src/config/pages/workflow-designer.json

@@ -1,4 +1,5 @@
 {
+  "id": "workflow-designer",
   "name": "Workflow Designer",
   "layout": {
     "type": "single"