Update scripts/refactor-to-dynamic-imports.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

.claude/settings.local.json

@@ -0,0 +1,29 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(ls:*)",
+      "Bash(find:*)",
+      "Bash(grep:*)",
+      "Bash(wc:*)",
+      "Bash(for file in accordion alert aspect-ratio avatar badge button card checkbox collapsible dialog hover-card input label popover progress radio-group resizable scroll-area separator skeleton sheet switch tabs textarea toggle tooltip)",
+      "Bash(do)",
+      "Bash([ -f \"src/config/pages/ui/$file.json\" ])",
+      "Bash(echo:*)",
+      "Bash(done)",
+      "Bash(for file in data-source-card editor-toolbar empty-editor-state monaco-editor-panel search-bar)",
+      "Bash([ -f \"src/config/pages/molecules/$file.json\" ])",
+      "Bash(for file in empty-canvas-state page-header schema-editor-canvas schema-editor-properties-panel schema-editor-sidebar schema-editor-status-bar schema-editor-toolbar toolbar-actions)",
+      "Bash([ -f \"src/config/pages/organisms/$file.json\" ])",
+      "Bash([ -f \"src/config/pages/atoms/input.json\" ])",
+      "Bash(npm run tsx:*)",
+      "Bash(npx tsx:*)",
+      "Bash(npm run test:e2e:*)",
+      "Bash(npx playwright:*)",
+      "Bash(timeout 15 npm run dev:*)",
+      "Bash(netstat:*)",
+      "Bash(findstr:*)",
+      "Bash(taskkill:*)",
+      "Bash(xargs:*)"
+    ]
+  }
+}

JSON_COMPATIBILITY_IMPLEMENTATION.md

@@ -1,164 +0,0 @@
-# JSON Compatibility Implementation Summary
-
-## Overview
-This document summarizes the low-hanging fruit implemented from the JSON_COMPATIBILITY_ANALYSIS.md document.
-
-## ✅ Completed Work
-
-### 1. Added 6 Molecular Components to JSON Registry
-
-The following components have been successfully integrated into the JSON UI system:
-
-#### Components Added:
-1. **AppBranding** - Application branding with logo, title, and subtitle
-2. **LabelWithBadge** - Label with optional badge indicator (supports variant customization)
-3. **EmptyEditorState** - Empty state display for editor contexts
-4. **LoadingFallback** - Loading message display with spinner
-5. **LoadingState** - Configurable loading state indicator (supports size variants)
-6. **NavigationGroupHeader** - Navigation group header with expand/collapse indicator
-
-### 2. Updated Type Definitions
-
-**File: `src/types/json-ui.ts`**
-- Added all 6 new component types to the `ComponentType` union type
-- Ensures full TypeScript support for the new components in JSON schemas
-
-### 3. Updated Component Registry
-
-**File: `src/lib/json-ui/component-registry.tsx`**
-- Added imports for all 6 new molecular components
-- Registered components in `componentRegistry` object
-- Added components to `customComponents` export for enhanced discoverability
-
-### 4. Created Showcase Schema
-
-**File: `src/schemas/page-schemas.ts`**
-- Created `newMoleculesShowcaseSchema` - A comprehensive demonstration page
-- Showcases each new component with realistic use cases
-- Includes data bindings and multiple variants
-- Demonstrates integration within Card layouts
-
-### 5. Enhanced JSON UI Showcase Page
-
-**File: `src/components/JSONUIShowcasePage.tsx`**
-- Added new "New Molecules" tab to the showcase
-- Integrated the new showcase schema with PageRenderer
-- Provides instant visual verification of the new components
-
-## 📊 Impact
-
-### Before:
-- JSON-compatible molecules: 3 (DataCard, SearchInput, ActionBar)
-- Total JSON components: ~60 (mostly atoms and UI primitives)
-
-### After:
-- JSON-compatible molecules: 9 (+6 new)
-- Total JSON components: ~66 (+10% increase)
-- Enhanced showcase with dedicated demonstration page
-
-## 🎯 Components Analysis Results
-
-From the original 13 "fully compatible" molecules identified:
-
-| Component | Status | Reason |
-|-----------|--------|--------|
-| AppBranding | ✅ Added | Simple props, no state |
-| LabelWithBadge | ✅ Added | Simple props, no state |
-| EmptyEditorState | ✅ Added | No props, pure display |
-| LoadingFallback | ✅ Added | Simple props, no state |
-| LoadingState | ✅ Added | Simple props, no state |
-| NavigationGroupHeader | ✅ Added | Simple props, display-only |
-| Breadcrumb | ❌ Skipped | Uses hooks (useNavigationHistory) |
-| SaveIndicator | ❌ Skipped | Internal state + useEffect |
-| LazyBarChart | ❌ Skipped | Uses async hooks (useRecharts) |
-| LazyD3BarChart | ❌ Skipped | Uses async hooks |
-| LazyLineChart | ❌ Skipped | Uses async hooks |
-| SeedDataManager | ❌ Skipped | Complex hooks + event handlers |
-| StorageSettings | ❌ Skipped | Complex state + side effects |
-
-**Success Rate: 6/13 (46%)** - Realistic assessment based on actual complexity
-
-## 📝 Usage Example
-
-Here's how to use the new components in JSON schemas:
-
-```json
-{
-  "id": "my-component",
-  "type": "AppBranding",
-  "props": {
-    "title": "My Application",
-    "subtitle": "Powered by JSON"
-  }
-}
-```
-
-```json
-{
-  "id": "label-with-count",
-  "type": "LabelWithBadge",
-  "props": {
-    "label": "Active Users",
-    "badgeVariant": "default"
-  },
-  "bindings": {
-    "badge": { "source": "userCount" }
-  }
-}
-```
-
-```json
-{
-  "id": "empty-state",
-  "type": "EmptyEditorState",
-  "props": {}
-}
-```
-
-```json
-{
-  "id": "loading",
-  "type": "LoadingState",
-  "props": {
-    "message": "Loading your data...",
-    "size": "md"
-  }
-}
-```
-
-## 🔄 Next Steps
-
-### Immediate Opportunities:
-1. **Chart Components** - Create simplified wrapper components for charts that don't require hooks
-2. **Event Binding System** - Implement the event binding system described in the analysis
-3. **State Binding System** - Implement the state binding system for interactive components
-4. **Component Wrappers** - Create JSON-friendly wrappers for complex existing components
-
-### Medium-term Goals:
-1. Add the 27 "maybe compatible" molecules with event binding support
-2. Implement computed prop transformations for dynamic component behavior
-3. Create JSON-friendly versions of the 14 organisms
-4. Build a visual component palette showing all JSON-compatible components
-
-## 📚 Documentation
-
-- Main analysis: `JSON_COMPATIBILITY_ANALYSIS.md`
-- Implementation summary: `JSON_COMPATIBILITY_IMPLEMENTATION.md` (this file)
-- Component registry: `src/lib/json-ui/component-registry.tsx`
-- Type definitions: `src/types/json-ui.ts`
-- Showcase schema: `src/schemas/page-schemas.ts`
-- Live demo: Navigate to JSON UI Showcase → "New Molecules" tab
-
-## ✨ Key Achievements
-
-1. ✅ Successfully identified and added truly simple JSON-compatible components
-2. ✅ Maintained type safety throughout the implementation
-3. ✅ Created comprehensive demonstration with real-world examples
-4. ✅ Updated all relevant documentation
-5. ✅ Provided clear path forward for future additions
-
-## 🎉 Conclusion
-
-We successfully implemented the low-hanging fruit from the JSON compatibility analysis, adding 6 new molecular components to the JSON UI registry. These components are now fully usable in JSON schemas and have been demonstrated in the enhanced showcase page.
-
-The implementation prioritized truly simple components without complex dependencies, hooks, or state management, ensuring reliable JSON-driven rendering. The remaining "fully compatible" components were correctly identified as requiring additional infrastructure (hooks, state management) that makes them unsuitable for pure JSON configuration without wrapper components.

JSON_COMPONENTS.md

@@ -1,192 +0,0 @@
-# JSON UI Components Registry
-
-This document describes the JSON UI component system and lists all components that can be rendered from JSON schemas.
-
-## Overview
-
-The JSON UI system allows you to define user interfaces using JSON schemas instead of writing React code. This is useful for:
-- Dynamic UI generation
-- No-code/low-code interfaces
-- Configuration-driven UIs
-- Rapid prototyping
-
-## Quick Start
-
-### List All JSON-Compatible Components
-
-```bash
-# List all components with details
-npm run components:list
-
-# List only supported components
-npm run components:list -- --status=supported
-
-# List only planned components
-npm run components:list -- --status=planned
-
-# Output as JSON
-npm run components:list -- --format=json
-```
-
-### Using JSON UI Components
-
-Components are defined in the `ComponentType` union in `src/types/json-ui.ts` and registered in `src/lib/json-ui/component-registry.tsx`.
-
-Example JSON schema:
-
-```json
-{
-  "id": "example-page",
-  "type": "Card",
-  "props": {
-    "className": "p-6"
-  },
-  "children": [
-    {
-      "id": "heading",
-      "type": "Heading",
-      "props": {
-        "level": 2,
-        "children": "Welcome"
-      }
-    },
-    {
-      "id": "description",
-      "type": "Text",
-      "props": {
-        "children": "This is a dynamically rendered component"
-      }
-    },
-    {
-      "id": "cta",
-      "type": "Button",
-      "props": {
-        "variant": "default",
-        "children": "Get Started"
-      }
-    }
-  ]
-}
-```
-
-## Component Categories
-
-### Layout Components (12)
-Container elements for organizing content:
-- `div`, `section`, `article`, `header`, `footer`, `main` - HTML semantic elements
-- `Card` - Container with optional header, content, and footer
-- `Grid` - Responsive grid layout
-- `Stack` - Vertical or horizontal stack layout
-- `Flex` - Flexible box layout
-- `Container` - Centered container with max-width
-- `Dialog` - Modal dialog overlay
-
-### Input Components (11)
-Form inputs and interactive controls:
-- `Button` - Interactive button
-- `Input` - Text input field
-- `TextArea` - Multi-line text input
-- `Select` - Dropdown select
-- `Checkbox` - Checkbox toggle
-- `Radio` - Radio button
-- `Switch` - Toggle switch
-- `Slider` - Numeric range slider
-- `NumberInput` - Numeric input with increment/decrement
-- `DatePicker` - Date selection (planned)
-- `FileUpload` - File upload control (planned)
-
-### Display Components (16)
-Presentation and visual elements:
-- `Heading` - Heading text (h1-h6)
-- `Text` - Text content with typography
-- `Label` - Form label
-- `Badge` - Status or count indicator
-- `Tag` - Removable tag/chip
-- `Code` - Inline or block code
-- `Image` - Image with loading states
-- `Avatar` - User avatar image
-- `Icon` - Icon from library (planned)
-- `Progress` - Progress bar
-- `Spinner` - Loading spinner
-- `Skeleton` - Loading placeholder
-- `Separator` - Visual divider
-- `CircularProgress` - Circular indicator (planned)
-- `ProgressBar` - Linear progress (planned)
-- `Divider` - Section divider (planned)
-
-### Navigation Components (3)
-Navigation and routing:
-- `Link` - Hyperlink element
-- `Breadcrumb` - Navigation trail (planned)
-- `Tabs` - Tabbed interface
-
-### Feedback Components (7)
-Alerts, notifications, and status:
-- `Alert` - Alert notification message
-- `InfoBox` - Information box with icon
-- `EmptyState` - Empty state placeholder
-- `StatusBadge` - Status indicator
-- `StatusIcon` - Status icon (planned)
-- `ErrorBadge` - Error state (planned)
-- `Notification` - Toast notification (planned)
-
-### Data Components (8)
-Data display and visualization:
-- `List` - Generic list renderer
-- `Table` - Data table
-- `KeyValue` - Key-value pair display
-- `StatCard` - Statistic card
-- `DataList` - Styled data list (planned)
-- `DataTable` - Advanced table with sorting/filtering (planned)
-- `Timeline` - Timeline visualization (planned)
-- `MetricCard` - Metric display (planned)
-
-### Custom Components (3)
-Domain-specific components:
-- `DataCard` - Custom data display card
-- `SearchInput` - Search input with icon
-- `ActionBar` - Action button toolbar
-
-## Current Status
-
-- **Total Components**: 60
-- **Supported**: 46 (77%)
-- **Planned**: 14 (23%)
-
-## Files
-
-- `json-components-registry.json` - Complete registry with metadata
-- `src/types/json-ui.ts` - TypeScript types and ComponentType union
-- `src/lib/json-ui/component-registry.tsx` - Component registry mapping
-- `src/lib/component-definitions.ts` - Component definitions with defaults
-- `scripts/list-json-components.cjs` - CLI tool to list components
-
-## Adding New Components
-
-To add a new component to the JSON UI system:
-
-1. Add the component type to `ComponentType` union in `src/types/json-ui.ts`
-2. Import and register it in `src/lib/json-ui/component-registry.tsx`
-3. Add component definition in `src/lib/component-definitions.ts`
-4. Update `json-components-registry.json` with metadata
-5. Test the component in a JSON schema
-
-## Migration Strategy
-
-Components marked as "planned" are:
-- Available in the codebase as React components
-- Not yet integrated into the JSON UI system
-- Can be migrated following the steps above
-
-Priority for migration:
-1. High-usage components
-2. Components with simple props
-3. Components with good atomic design
-4. Components without complex state management
-
-## Related Documentation
-
-- [PRD.md](./PRD.md) - Product requirements document
-- [REDUX_DOCUMENTATION.md](./REDUX_DOCUMENTATION.md) - Redux integration
-- [src/types/json-ui.ts](./src/types/json-ui.ts) - Type definitions
-- [src/lib/component-definitions.ts](./src/lib/component-definitions.ts) - Component metadata

JSON_EXPRESSION_SYSTEM.md

@@ -1,110 +1,36 @@
 # JSON Expression System
 
-This document describes the JSON-friendly expression system for handling events without requiring external TypeScript functions.
+This document describes the supported JSON expression patterns used across JSON UI schemas.
+Legacy compute functions have been removed in favor of expression strings and value templates.
 
-## Overview
+## Core Concepts
 
-The JSON Expression System allows you to define dynamic behaviors entirely within JSON schemas, eliminating the need for external compute functions. This makes schemas more portable and easier to edit.
+### Expressions
 
-## Expression Types
-
-### 1. Simple Expressions
-
-Use the `expression` field to evaluate dynamic values:
+Expressions are string values that resolve against a data + event context:
 
 ```json
 {
-  "type": "set-value",
-  "target": "username",
   "expression": "event.target.value"
 }
 ```
 
-**Supported Expression Patterns:**
+Supported expression patterns:
 
-- **Data Access**: `"data.fieldName"`, `"data.user.name"`, `"data.items.0.id"`
-  - Access any field in the data context
-  - Supports nested objects using dot notation
+- `data` or `event`
+- Dot access: `data.user.name`, `event.target.value`
+- Literals: numbers, booleans, `null`, `undefined`, quoted strings
+- Time: `Date.now()`
+- Array filtering:
+  - `data.todos.filter(completed === true)`
+  - `data.users.filter(status === 'active').length`
 
-- **Event Access**: `"event.target.value"`, `"event.key"`, `"event.type"`
-  - Access event properties
-  - Commonly used for form inputs
+### Value Templates
 
-- **Date Operations**: `"Date.now()"`
-  - Get current timestamp
-  - Useful for creating unique IDs
-
-- **Literals**: `42`, `"hello"`, `true`, `false`, `null`
-  - Direct values
-
-### 2. Value Templates
-
-Use the `valueTemplate` field to create objects with dynamic values:
+Value templates are JSON objects whose string values are evaluated as expressions:
 
 ```json
 {
-  "type": "create",
-  "target": "todos",
-  "valueTemplate": {
-    "id": "Date.now()",
-    "text": "data.newTodo",
-    "completed": false,
-    "createdBy": "data.currentUser"
-  }
-}
-```
-
-**Template Behavior:**
-- String values starting with `"data."` or `"event."` are evaluated as expressions
-- Other values are used as-is
-- Perfect for creating new objects with dynamic fields
-
-### 3. Static Values
-
-Use the `value` field for static values:
-
-```json
-{
-  "type": "set-value",
-  "target": "isLoading",
-  "value": false
-}
-```
-
-## Action Types with Expression Support
-
-### set-value
-Update a data source with a new value.
-
-**With Expression:**
-```json
-{
-  "id": "update-filter",
-  "type": "set-value",
-  "target": "searchQuery",
-  "expression": "event.target.value"
-}
-```
-
-**With Static Value:**
-```json
-{
-  "id": "reset-filter",
-  "type": "set-value",
-  "target": "searchQuery",
-  "value": ""
-}
-```
-
-### create
-Add a new item to an array data source.
-
-**With Value Template:**
-```json
-{
-  "id": "add-todo",
-  "type": "create",
-  "target": "todos",
   "valueTemplate": {
     "id": "Date.now()",
     "text": "data.newTodo",
@@ -113,210 +39,24 @@ Add a new item to an array data source.
 }
 ```
 
-### update
-Update an existing value (similar to set-value).
+### Conditions
+
+Conditions use expression strings that are evaluated against the data context:
 
 ```json
 {
-  "id": "update-count",
-  "type": "update",
-  "target": "viewCount",
-  "expression": "data.viewCount + 1"
+  "condition": "data.newTodo.length > 0"
 }
 ```
 
-**Note:** Arithmetic expressions are not yet supported. Use `increment` action type instead.
+Supported condition patterns:
 
-### delete
-Remove an item from an array.
+- `data.field > 0`
+- `data.field.length > 0`
+- `data.field === 'value'`
+- `data.field != null`
 
-```json
-{
-  "id": "remove-todo",
-  "type": "delete",
-  "target": "todos",
-  "path": "id",
-  "expression": "data.selectedId"
-}
-```
+## Legacy Compute Functions (Removed)
 
-## Common Patterns
-
-### 1. Input Field Updates
-
-```json
-{
-  "id": "name-input",
-  "type": "Input",
-  "bindings": {
-    "value": { "source": "userName" }
-  },
-  "events": [
-    {
-      "event": "change",
-      "actions": [
-        {
-          "type": "set-value",
-          "target": "userName",
-          "expression": "event.target.value"
-        }
-      ]
-    }
-  ]
-}
-```
-
-### 2. Creating Objects with IDs
-
-```json
-{
-  "type": "create",
-  "target": "items",
-  "valueTemplate": {
-    "id": "Date.now()",
-    "name": "data.newItemName",
-    "status": "pending",
-    "createdAt": "Date.now()"
-  }
-}
-```
-
-### 3. Resetting Forms
-
-```json
-{
-  "event": "click",
-  "actions": [
-    {
-      "type": "set-value",
-      "target": "formField1",
-      "value": ""
-    },
-    {
-      "type": "set-value",
-      "target": "formField2",
-      "value": ""
-    }
-  ]
-}
-```
-
-### 4. Success Notifications
-
-```json
-{
-  "type": "show-toast",
-  "message": "Item saved successfully!",
-  "variant": "success"
-}
-```
-
-## Backward Compatibility
-
-The system maintains backward compatibility with the legacy `compute` function approach:
-
-**Legacy (still supported):**
-```json
-{
-  "type": "set-value",
-  "target": "userName",
-  "compute": "updateUserName"
-}
-```
-
-**New (preferred):**
-```json
-{
-  "type": "set-value",
-  "target": "userName",
-  "expression": "event.target.value"
-}
-```
-
-The schema loader will automatically hydrate legacy `compute` references while new schemas can use pure JSON expressions.
-
-## Limitations
-
-Current limitations (may be addressed in future updates):
-
-1. **No Arithmetic**: Cannot do `"data.count + 1"` - use `increment` action type instead
-2. **No String Concatenation**: Cannot do `"Hello " + data.name` - use template strings in future
-3. **No Complex Logic**: Cannot do nested conditionals or loops
-4. **No Custom Functions**: Cannot call user-defined functions
-
-For complex logic, you can still use the legacy `compute` functions or create custom action types.
-
-## Migration Guide
-
-### From Compute Functions to Expressions
-
-**Before:**
-```typescript
-// In compute-functions.ts
-export const updateNewTodo = (data: any, event: any) => event.target.value
-
-// In schema
-{
-  "type": "set-value",
-  "target": "newTodo",
-  "compute": "updateNewTodo"
-}
-```
-
-**After:**
-```json
-{
-  "type": "set-value",
-  "target": "newTodo",
-  "expression": "event.target.value"
-}
-```
-
-**Before:**
-```typescript
-// In compute-functions.ts
-export const computeAddTodo = (data: any) => ({
-  id: Date.now(),
-  text: data.newTodo,
-  completed: false,
-})
-
-// In schema
-{
-  "type": "create",
-  "target": "todos",
-  "compute": "computeAddTodo"
-}
-```
-
-**After:**
-```json
-{
-  "type": "create",
-  "target": "todos",
-  "valueTemplate": {
-    "id": "Date.now()",
-    "text": "data.newTodo",
-    "completed": false
-  }
-}
-```
-
-## Examples
-
-See the example schemas:
-- `/src/schemas/todo-list-json.json` - Pure JSON event system example
-- `/src/schemas/todo-list.json` - Legacy compute function approach
-
-## Future Enhancements
-
-Planned features for future versions:
-
-1. **Arithmetic Expressions**: `"data.count + 1"`
-2. **String Templates**: `"Hello ${data.userName}"`
-3. **Comparison Operators**: `"data.age > 18"`
-4. **Logical Operators**: `"data.isActive && data.isVerified"`
-5. **Array Operations**: `"data.items.filter(...)"`, `"data.items.map(...)"`
-6. **String Methods**: `"data.text.trim()"`, `"data.email.toLowerCase()"`
-
-For now, use the legacy `compute` functions for these complex scenarios.
+Schemas should no longer reference function names in `compute`, `transform`, or string-based
+condition fields. Use `expression` and `valueTemplate` instead.

Jenkinsfile

@@ -68,6 +68,15 @@ pipeline {
                         }
                     }
                 }
+                stage('Component Registry Check') {
+                    steps {
+                        script {
+                            nodejs(nodeJSInstallationName: "Node ${NODE_VERSION}") {
+                                sh 'npm run components:validate'
+                            }
+                        }
+                    }
+                }
             }
         }
 

MAYBE_JSON_BINDING_REVIEW.md

@@ -0,0 +1,277 @@
+# Review: maybe-json-compatible components and binding gaps
+
+## Scope
+Components still marked `maybe-json-compatible` were reviewed for missing event/state bindings that would need to be exposed to the JSON UI system. This list mirrors the registry entries that currently sit in that status. Each component below is annotated with the missing bindings that should be mapped to JSON events (`events`) or data bindings (`bindings`/`dataBinding`).
+
+## Component-by-component binding gaps
+
+### Dialogs and editor flows
+- **CodeExplanationDialog**: needs JSON bindings for `open` and `onOpenChange`, plus data bindings for `fileName`, `explanation`, and `isLoading` so schemas can control dialog visibility and content. These are currently prop-only. 
+- **ComponentBindingDialog**: needs JSON bindings for `open`, `component`, and `dataSources`, plus event bindings for `onOpenChange` and `onSave`. This dialog also pipes `onChange` updates through `BindingEditor`, which should map to JSON actions when used from schemas.
+- **DataSourceEditorDialog**: needs JSON bindings for `open`, `dataSource`, `allDataSources`, plus event bindings for `onOpenChange` and `onSave`. Internally, field updates (e.g., `updateField`, dependency add/remove) are not yet exposed as JSON actions.
+- **TreeFormDialog**: needs JSON bindings for `open`, `name`, `treeDescription`, plus event bindings for `onNameChange`, `onDescriptionChange`, `onOpenChange`, and `onSubmit`.
+
+### Selection and list management
+- **FileTabs**: needs JSON bindings for `files` and `activeFileId`, plus event bindings for `onFileSelect` and `onFileClose`.
+- **NavigationItem**: needs JSON binding for `isActive`/`badge` and event binding for `onClick`.
+- **NavigationMenu**: relies on internal `expandedGroups` state and a set of callbacks (`onTabChange`, `onToggleGroup`, `onItemHover`, `onItemLeave`). These should be exposed as JSON data bindings and events to support JSON-driven navigation and hover-driven actions (e.g., preloading routes).
+- **TreeCard**: needs event bindings for `onSelect`, `onEdit`, `onDuplicate`, and `onDelete` plus data bindings for `isSelected`/`disableDelete` to allow schema-driven selection state.
+- **TreeListHeader**: needs event bindings for `onCreateNew`, `onImportJson`, and `onExportJson`, with `hasSelectedTree` coming from data bindings.
+- **TreeListPanel**: orchestrates tree selection and CRUD; bindings are needed for `trees`, `selectedTreeId`, and event callbacks (`onTreeSelect`, `onTreeEdit`, `onTreeDuplicate`, `onTreeDelete`, `onCreateNew`, `onImportJson`, `onExportJson`).
+
+### Data source management
+- **DataSourceCard**: requires event bindings for `onEdit` and `onDelete`, plus data bindings for `dataSource` and `dependents`.
+- **DataSourceManager**: uses local state for `editingSource` and dialog visibility while exposing `onChange` externally. Needs JSON bindings for `dataSources` and events for `onAdd`, `onEdit`, `onDelete`, `onSave` (mapped to create/update/delete actions) plus ability to toggle dialog state from JSON.
+
+### Editor UI and property panels
+- **BindingEditor**: should expose `bindings`, `dataSources`, and `availableProps` through data bindings plus event bindings for `onChange` when bindings are added/removed.
+- **CanvasRenderer**: needs JSON events for `onSelect`, `onHover`, `onHoverEnd`, `onDragOver`, `onDragLeave`, and `onDrop`, and data bindings for `selectedId`, `hoveredId`, `draggedOverId`, and `dropPosition` so drag/hover state can live in JSON data.
+- **ComponentPalette**: should expose `onDragStart` via JSON events, and optionally a binding for the active tab/category if schemas should control which tab is open.
+- **ComponentTree**: relies on internal expansion state (`expandedIds`) and emits `onSelect`, `onHover`, `onDragStart`, `onDrop`, etc. Those should be JSON event bindings plus data bindings for expansion and selection state.
+- **PropertyEditor**: needs event bindings for `onUpdate` and `onDelete`, with the selected `component` coming from JSON data.
+- **SchemaEditorCanvas**: mirrors `CanvasRenderer`; bindings needed for all selection/hover/drag data and events.
+- **SchemaEditorLayout**: orchestrates `onImport`, `onExport`, `onCopy`, `onPreview`, `onClear`, plus component drag events and selection state. These should map to JSON action handlers.
+- **SchemaEditorPropertiesPanel**: inherits `ComponentTree` and `PropertyEditor` events; all selection/drag/update/delete events should be exposed in JSON.
+- **SchemaEditorSidebar**: needs JSON event binding for `onDragStart` from the component palette.
+- **SchemaEditorToolbar**: needs JSON event bindings for `onImport`, `onExport`, `onCopy`, `onPreview`, and `onClear`.
+
+### Search and toolbar interactions
+- **ActionBar**: actions array needs JSON event bindings for each `onClick` with optional `disabled`/`variant` driven by bindings.
+- **EditorActions**: needs JSON event bindings for `onExplain` and `onImprove`.
+- **EditorToolbar**: needs bindings for `openFiles` and `activeFileId`, plus events for file select/close and explain/improve actions.
+- **SearchBar**: needs binding for `value` plus event binding for `onChange`/clear.
+- **SearchInput**: needs binding for `value` plus event bindings for `onChange` and `onClear`.
+- **ToolbarButton** and **ToolbarActions**: need JSON event bindings for their `onClick` handlers.
+
+### Monaco editor integrations
+- **LazyInlineMonacoEditor**: needs data binding for `value` and event binding for `onChange`.
+- **LazyMonacoEditor**/**MonacoEditorPanel**: same binding as above (value/content and change events).
+
+### Mostly presentational components (no missing event/state bindings beyond data)
+These components are largely render-only and should work with basic `props`/`bindings` without extra event wiring: **SchemaCodeViewer**, **EmptyCanvasState**, **EmptyState**, **SchemaEditorStatusBar**, **StatCard**, **DataCard**, **PageHeaderContent**, **AppHeader** (except for the actions passed into the toolbar components), **JSONUIShowcase** (internal demo state).
+
+## Mapping missing bindings to the JSON action + expression systems
+
+The JSON UI system already supports `events` for action execution and `bindings`/`dataBinding` for state. The following mappings show how each missing binding should be wired.
+
+### 1) Dialog open/close control
+**Bindings:** `open` state stored in a data source.
+
+```json
+{
+  "id": "code-explain-dialog",
+  "type": "CodeExplanationDialog",
+  "bindings": {
+    "open": { "source": "uiState", "path": "dialogs.codeExplainOpen" },
+    "fileName": { "source": "editor", "path": "activeFile.name" },
+    "explanation": { "source": "ai", "path": "explanation" },
+    "isLoading": { "source": "ai", "path": "loading" }
+  },
+  "events": {
+    "onOpenChange": {
+      "actions": [
+        {
+          "id": "toggle-code-explain",
+          "type": "set-value",
+          "target": "uiState.dialogs.codeExplainOpen",
+          "expression": "event"
+        }
+      ]
+    }
+  }
+}
+```
+
+**Why:** `onOpenChange` provides a boolean; the JSON action `set-value` with an expression is a direct mapping for controlled dialog visibility.
+
+### 2) Input value + change events (SearchBar/SearchInput/TreeFormDialog)
+**Bindings:** `value` and `onChange` mapped to `set-value` with `event.target.value`.
+
+```json
+{
+  "id": "search-input",
+  "type": "SearchInput",
+  "bindings": {
+    "value": { "source": "filters", "path": "query" }
+  },
+  "events": {
+    "onChange": {
+      "actions": [
+        {
+          "id": "update-search-query",
+          "type": "set-value",
+          "target": "filters.query",
+          "expression": "event.target.value"
+        }
+      ]
+    },
+    "onClear": {
+      "actions": [
+        {
+          "id": "clear-search-query",
+          "type": "set-value",
+          "target": "filters.query",
+          "value": ""
+        }
+      ]
+    }
+  }
+}
+```
+
+**Why:** `event.target.value` is supported by the JSON expression system, allowing direct mapping from inputs.
+
+### 3) List selection (FileTabs, NavigationMenu, TreeListPanel)
+**Bindings:** selection ID stored in state, `onClick` mapped to `set-value` with a static or computed value.
+
+```json
+{
+  "id": "file-tabs",
+  "type": "FileTabs",
+  "bindings": {
+    "files": { "source": "editor", "path": "openFiles" },
+    "activeFileId": { "source": "editor", "path": "activeFileId" }
+  },
+  "events": {
+    "onFileSelect": {
+      "actions": [
+        {
+          "id": "select-file",
+          "type": "set-value",
+          "target": "editor.activeFileId",
+          "expression": "event"
+        }
+      ]
+    },
+    "onFileClose": {
+      "actions": [
+        {
+          "id": "close-file",
+          "type": "custom",
+          "params": { "fileId": "event" }
+        }
+      ]
+    }
+  }
+}
+```
+
+**Why:** selection changes are simple state updates. More complex close behavior can map to a `custom` action if it needs side effects.
+
+### 4) Toolbar and button actions (ActionBar, ToolbarActions, EditorActions)
+**Bindings:** each `onClick` maps to a JSON action list.
+
+```json
+{
+  "id": "schema-toolbar",
+  "type": "SchemaEditorToolbar",
+  "events": {
+    "onImport": { "actions": [{ "id": "import-json", "type": "custom" }] },
+    "onExport": { "actions": [{ "id": "export-json", "type": "custom" }] },
+    "onCopy": { "actions": [{ "id": "copy-json", "type": "custom" }] },
+    "onPreview": { "actions": [{ "id": "open-preview", "type": "open-dialog", "target": "uiState", "path": "preview" }] },
+    "onClear": { "actions": [{ "id": "clear-schema", "type": "set-value", "target": "schema.components", "value": [] }] }
+  }
+}
+```
+
+**Why:** these are pure event triggers; `custom` actions cover app-specific flows that aren’t part of the built-in action types.
+
+**Dialog storage convention:** `open-dialog`/`close-dialog` actions store booleans in `uiState.dialogs.<dialogId>`. Use `target` for the data source (typically `uiState`) and `path` for the dialog id.
+
+### 5) Drag-and-drop/hover state (CanvasRenderer, ComponentTree)
+**Bindings:** IDs and `dropPosition` stored in data; events mapped to custom actions for editor logic.
+
+```json
+{
+  "id": "canvas",
+  "type": "CanvasRenderer",
+  "bindings": {
+    "selectedId": { "source": "editor", "path": "selectedId" },
+    "hoveredId": { "source": "editor", "path": "hoveredId" },
+    "draggedOverId": { "source": "editor", "path": "draggedOverId" },
+    "dropPosition": { "source": "editor", "path": "dropPosition" }
+  },
+  "events": {
+    "onSelect": { "actions": [{ "id": "select-node", "type": "set-value", "target": "editor.selectedId", "expression": "event" }] },
+    "onHover": { "actions": [{ "id": "hover-node", "type": "set-value", "target": "editor.hoveredId", "expression": "event" }] },
+    "onHoverEnd": { "actions": [{ "id": "clear-hover", "type": "set-value", "target": "editor.hoveredId", "value": null }] },
+    "onDragOver": { "actions": [{ "id": "drag-over", "type": "custom", "params": { "targetId": "event" } }] },
+    "onDrop": { "actions": [{ "id": "drop-node", "type": "custom", "params": { "targetId": "event" } }] }
+  }
+}
+```
+
+**Why:** drag/drop handlers need richer logic, so `custom` actions are the safest mapping until more JSON-native drag actions exist.
+
+### 6) Data source CRUD (DataSourceManager/DataSourceCard)
+**Bindings:** data sources array stored in JSON data; CRUD mapped to `create`/`update`/`delete` actions where possible.
+
+```json
+{
+  "id": "data-sources",
+  "type": "DataSourceManager",
+  "bindings": {
+    "dataSources": { "source": "schema", "path": "dataSources" }
+  },
+  "events": {
+    "onAdd": {
+      "actions": [
+        {
+          "id": "add-source",
+          "type": "create",
+          "target": "schema.dataSources",
+          "valueTemplate": {
+            "id": "Date.now()",
+            "type": "event.type",
+            "value": ""
+          }
+        }
+      ]
+    },
+    "onEdit": {
+      "actions": [
+        { "id": "open-source-editor", "type": "open-dialog", "target": "uiState", "path": "dataSourceEditor" }
+      ]
+    },
+    "onDelete": {
+      "actions": [
+        { "id": "delete-source", "type": "delete", "target": "schema.dataSources", "path": "id", "expression": "event" }
+      ]
+    },
+    "onSave": {
+      "actions": [
+        { "id": "update-source", "type": "update", "target": "schema.dataSources", "expression": "event" }
+      ]
+    }
+  }
+}
+```
+
+**Why:** CRUD aligns with the action schema (`create`, `update`, `delete`) and can use expressions/value templates to shape payloads.
+
+## Prioritized binding additions (with example schemas)
+
+1) **Dialog visibility + save/cancel actions** (CodeExplanationDialog, ComponentBindingDialog, DataSourceEditorDialog, TreeFormDialog)
+   - **Why priority:** unlocks core UI flows (open/close/save) and ties dialogs to JSON actions.
+   - **Example schema:** see “Dialog open/close control” above.
+
+2) **Input value + change events** (SearchBar, SearchInput, TreeFormDialog)
+   - **Why priority:** essential for text filtering, search, and form editing in JSON-driven flows.
+   - **Example schema:** see “Input value + change events.”
+
+3) **Selection and navigation events** (FileTabs, NavigationItem/Menu, TreeListPanel, TreeCard)
+   - **Why priority:** these are the primary navigation and selection surfaces in the editor UI.
+   - **Example schema:** see “List selection.”
+
+4) **Toolbar/button action wiring** (SchemaEditorToolbar, ToolbarActions, EditorActions, ActionBar)
+   - **Why priority:** these buttons trigger important workflows (import/export, AI tools, preview).
+   - **Example schema:** see “Toolbar and button actions.”
+
+5) **Drag-and-drop/hover orchestration** (CanvasRenderer, ComponentTree, ComponentPalette)
+   - **Why priority:** required for schema editing UI; may need `custom` actions for editor logic.
+   - **Example schema:** see “Drag-and-drop/hover state.”
+
+6) **Data source CRUD flows** (DataSourceManager, DataSourceCard)
+   - **Why priority:** CRUD should map to built-in JSON actions to avoid bespoke handlers.
+   - **Example schema:** see “Data source CRUD.”

component-registry.json

@@ -236,6 +236,15 @@
       "category": "showcase",
       "description": "JSON UI system demonstration"
     },
+    {
+      "name": "JSONConversionShowcase",
+      "path": "@/components/JSONConversionShowcase",
+      "export": "JSONConversionShowcase",
+      "type": "feature",
+      "preload": false,
+      "category": "showcase",
+      "description": "JSON conversion showcase overview"
+    },
     {
       "name": "SchemaEditor",
       "path": "@/components/SchemaEditorPage",

docs/BUILD_FIX_COMPLETE.md

@@ -46,7 +46,7 @@ Replaced all imports of `@github/spark/hooks` with the local `@/hooks/use-kv` im
 
 ### Config Files
 - `src/config/orchestration/data-source-manager.ts`
-- `src/lib/json-ui/hooks.ts`
+- `src/lib/json-ui/hooks.ts` (re-exported via `@/lib/json-ui`)
 
 ## Change Pattern
 All instances of:

docs/COMPONENT_CONVERSION_ANALYSIS.md

@@ -0,0 +1,262 @@
+# Component Conversion Analysis
+
+## Analysis of 68 React Components
+
+After analyzing all 68 organism and molecule components, here's what can be converted to JSON:
+
+### Categories
+
+#### ✅ Fully Convertible to JSON (48 components)
+
+These are presentational components with props, conditional rendering, and simple event handlers:
+
+**Molecules (35):**
+1. `LabelWithBadge` - ✅ Converted
+2. `LoadingState` - ✅ Converted
+3. `SaveIndicator` - ✅ Converted (computed sources replace hook)
+4. `SearchInput` - ✅ Converted
+5. `AppBranding` - Props + conditionals
+6. `ActionBar` - Layout + buttons
+7. `Breadcrumb` - ✅ Already converted
+8. `DataCard` - ✅ Already converted
+9. `EmptyState` - ✅ Already converted
+10. `EmptyEditorState` - ✅ Already converted
+11. `FileTabs` - ✅ Already converted
+12. `NavigationGroupHeader` - Collapse trigger + state
+13. `NavigationItem` - Button with active state
+14. `PageHeaderContent` - Layout composition
+15. `ToolbarButton` - Tooltip + IconButton
+16. `TreeListHeader` - Buttons with events
+17. `ComponentTreeEmptyState` - Config + icon lookup
+18. `ComponentTreeHeader` - Counts + expand/collapse
+19. `PropertyEditorEmptyState` - Config + icon lookup
+20. `PropertyEditorHeader` - Title + count
+21. `PropertyEditorSection` - Collapsible section
+22. `DataSourceIdField` - Input with validation display
+23. `KvSourceFields` - Form fields
+24. `StaticSourceFields` - Form fields
+25. `ComputedSourceFields` - Form fields
+26. `GitHubBuildStatus` - Status display + polling
+27. `LoadingFallback` - Spinner + message
+28. `MonacoEditorPanel` - Layout wrapper (not editor itself)
+29. `SearchBar` - SearchInput wrapper
+30. `SeedDataManager` - Form + buttons (logic in parent)
+31. `StorageSettings` - Form fields
+32. `TreeCard` - Card + tree display
+33. `TreeFormDialog` - Dialog with form (validation in parent)
+34. `EditorActions` - Button group
+35. `EditorToolbar` - Toolbar layout
+
+**Organisms (13):**
+1. `AppHeader` - ✅ Already converted
+2. `EmptyCanvasState` - ✅ Already converted
+3. `NavigationMenu` - ✅ Already converted
+4. `PageHeader` - ✅ Already converted
+5. `SchemaEditorLayout` - ✅ Already converted
+6. `SchemaEditorSidebar` - ✅ Already converted
+7. `SchemaEditorCanvas` - ✅ Already converted
+8. `SchemaEditorPropertiesPanel` - ✅ Already converted
+9. `SchemaEditorStatusBar` - Status display
+10. `SchemaEditorToolbar` - Toolbar with actions
+11. `ToolbarActions` - Action buttons
+12. `SchemaCodeViewer` - Tabs + code display
+13. `TreeListPanel` - List display
+
+#### ⚠️ Needs Wrapper (Complex Hooks) (12 components)
+
+These use hooks but the hook logic can be extracted to data sources or remain in a thin wrapper:
+
+**Molecules (10):**
+1. `BindingEditor` - Form with `useForm` hook → Extract to form state
+2. `ComponentBindingDialog` - Dialog with `useForm` → Extract to form state
+3. `DataSourceEditorDialog` - Complex form + validation → Wrapper + JSON form
+4. `PropertyEditor` - Dynamic form generation → Computed source for fields
+5. `ComponentPalette` - Search + filter → Computed source
+6. `CanvasRenderer` - Recursive rendering → Could be JSON with loop support
+7. `ComponentTree` - Tree state + drag/drop → State machine in JSON
+8. `ComponentTreeNodes` - Recursive nodes → Loop construct
+9. `CodeExplanationDialog` - Dialog + API call → Dialog JSON + API action
+10. `DataSourceCard` - Card with actions + state → Separate state, JSON layout
+
+**Organisms (2):**
+1. `DataSourceManager` - Complex CRUD + hook → Extract `useDataSourceManager` logic
+2. `JSONUIShowcase` - Examples display → Convert examples to JSON schema
+
+#### ❌ Must Stay React (8 components)
+
+These have imperative APIs, complex recursion, or third-party integration:
+
+**Molecules (6):**
+1. `LazyMonacoEditor` - Monaco integration (refs, imperative API)
+2. `LazyInlineMonacoEditor` - Monaco integration
+3. `MonacoEditorPanel` - Monaco wrapper
+4. `LazyBarChart` - Recharts integration
+5. `LazyLineChart` - Recharts integration
+6. `LazyD3BarChart` - D3.js integration (imperative DOM manipulation)
+
+**Organisms (2):**
+1. `SchemaEditor` - Complex editor with drag-drop, undo/redo state machine
+2. `DataBindingDesigner` - Visual flow editor with canvas manipulation
+
+## Conversion Statistics
+
+| Category | Count | Percentage |
+|----------|-------|------------|
+| ✅ Fully Convertible | 48 | 71% |
+| ⚠️ Needs Wrapper | 12 | 18% |
+| ❌ Must Stay React | 8 | 11% |
+| **Total** | **68** | **100%** |
+
+## Key Insights
+
+### 1. Most Components Are Presentational
+71% of components are pure presentation + simple logic that JSON can handle with:
+- Data binding
+- Computed sources
+- Conditional rendering
+- Event actions
+- Loops (for lists)
+
+### 2. Hooks Aren't a Blocker
+Even components with hooks like `useSaveIndicator` can be converted:
+- Time-based logic → Computed sources with polling
+- Form state → Form data sources
+- Local UI state → Page-level state
+
+### 3. True Blockers
+Only 8 components (11%) genuinely need React:
+- Third-party library integrations (Monaco, D3, Recharts)
+- Complex state machines (drag-drop, undo/redo)
+- Imperative DOM manipulation
+- Recursive algorithms (though loops might handle some)
+
+### 4. Wrapper Pattern
+The 12 "needs wrapper" components can have thin React wrappers that:
+- Extract hooks to data source utilities
+- Convert to JSON-configurable components
+- Keep complex logic centralized
+
+Example:
+```tsx
+// Thin wrapper
+export function FormDialogWrapper({ schema, onSubmit }) {
+  const form = useForm()
+  return <JSONDialog schema={schema} formState={form} onSubmit={onSubmit} />
+}
+```
+
+```json
+// JSON configures it
+{
+  "type": "FormDialogWrapper",
+  "props": {
+    "schema": { "$ref": "./schemas/user-form.json" }
+  }
+}
+```
+
+## Recommended Conversion Priority
+
+### Phase 1: Low-Hanging Fruit (35 molecules)
+Convert all presentational molecules that are just composition:
+- AppBranding, ActionBar, ToolbarButton, etc.
+- **Impact**: Eliminate 51% of React components
+
+### Phase 2: Organisms (13)
+Convert layout organisms:
+- TreeListPanel, SchemaCodeViewer, etc.
+- **Impact**: Eliminate 70% of React components
+
+### Phase 3: Extract Hooks (10 molecules)
+Create data source utilities and convert:
+- BindingEditor, ComponentPalette, etc.
+- **Impact**: Eliminate 85% of React components
+
+### Phase 4: Wrappers (2 organisms)
+Create thin wrappers for complex components:
+- DataSourceManager, JSONUIShowcase
+- **Impact**: 89% conversion
+
+### Final State
+- **8 React components** (third-party integrations + complex editors)
+- **60 JSON components** (89% of current React code)
+- **100% JSON page definitions** (already achieved)
+
+## Implementation Patterns
+
+### Pattern 1: Simple Conversion
+```tsx
+// React
+export function LabelWithBadge({ label, badge }) {
+  return (
+    <Flex>
+      <Text>{label}</Text>
+      {badge && <Badge>{badge}</Badge>}
+    </Flex>
+  )
+}
+```
+
+```json
+// JSON
+{
+  "type": "div",
+  "className": "flex gap-2",
+  "children": [
+    { "type": "Text", "dataBinding": { "children": { "source": "label" } } },
+    {
+      "type": "Badge",
+      "conditional": { "source": "badge", "operator": "truthy" },
+      "dataBinding": { "children": { "source": "badge" } }
+    }
+  ]
+}
+```
+
+### Pattern 2: Hook Extraction
+```tsx
+// React (before)
+export function SaveIndicator({ lastSaved }) {
+  const { timeAgo, isRecent } = useSaveIndicator(lastSaved)
+  return <div>{isRecent ? 'Saved' : timeAgo}</div>
+}
+```
+
+```json
+// JSON (after) - hook logic → computed source
+{
+  "dataSources": [
+    {
+      "id": "isRecent",
+      "type": "computed",
+      "compute": "(data) => Date.now() - data.lastSaved < 3000"
+    }
+  ],
+  "type": "div",
+  "dataBinding": {
+    "children": {
+      "source": "isRecent",
+      "transform": "(isRecent, data) => isRecent ? 'Saved' : data.timeAgo"
+    }
+  }
+}
+```
+
+### Pattern 3: Wrapper for Complex Logic
+```tsx
+// Thin React wrapper
+export function DataSourceManagerWrapper(props) {
+  const manager = useDataSourceManager(props.dataSources)
+  return <JSONComponent schema={schema} data={manager} />
+}
+```
+
+## Next Steps
+
+1. ✅ Convert 35 simple molecules to JSON
+2. ✅ Convert 13 layout organisms to JSON
+3. ⚠️ Extract hooks to utilities for 10 components
+4. ⚠️ Create wrappers for 2 complex organisms
+5. ❌ Keep 8 third-party integrations as React
+
+**Target: 60/68 components in JSON (89% conversion)**

docs/HYBRID_ARCHITECTURE.md

@@ -0,0 +1,471 @@
+# Hybrid Architecture: JSON + React
+
+## The Power of Both Worlds
+
+This platform uses a **hybrid architecture** where JSON handles declarative UI composition while React provides the imperative implementation layer. This gives you the best of both worlds:
+
+- **JSON** for structure, composition, and configuration
+- **React** for complex logic, hooks, events, and interactivity
+
+## What JSON Can't (and Shouldn't) Replace
+
+### 1. Hooks
+React hooks manage complex stateful logic that can't be represented declaratively:
+
+```tsx
+// ❌ Cannot be JSON
+function useDataSourceManager(dataSources: DataSource[]) {
+  const [localSources, setLocalSources] = useState(dataSources)
+  const [editingSource, setEditingSource] = useState<DataSource | null>(null)
+
+  useEffect(() => {
+    // Sync with external API
+    syncDataSources(localSources)
+  }, [localSources])
+
+  const getDependents = useCallback((id: string) => {
+    return localSources.filter(ds => ds.dependencies?.includes(id))
+  }, [localSources])
+
+  return { localSources, editingSource, getDependents, ... }
+}
+```
+
+**Why React?** Hooks encapsulate complex imperative logic: side effects, memoization, refs, context. JSON is declarative and can't express these patterns.
+
+### 2. Event Handlers with Complex Logic
+Simple actions work in JSON, but complex event handling needs code:
+
+```tsx
+// ✅ Simple actions in JSON
+{
+  "events": [{
+    "event": "onClick",
+    "actions": [
+      { "type": "setState", "target": "count", "value": 1 },
+      { "type": "toast", "title": "Clicked!" }
+    ]
+  }]
+}
+
+// ❌ Complex logic needs React
+function handleFileUpload(event: React.ChangeEvent<HTMLInputElement>) {
+  const file = event.target.files?.[0]
+  if (!file) return
+
+  // Validate file type
+  const validTypes = ['image/png', 'image/jpeg', 'image/svg+xml']
+  if (!validTypes.includes(file.type)) {
+    toast.error('Invalid file type')
+    return
+  }
+
+  // Check file size
+  const maxSize = 5 * 1024 * 1024 // 5MB
+  if (file.size > maxSize) {
+    toast.error('File too large')
+    return
+  }
+
+  // Convert to base64, compress, upload
+  compressImage(file).then(compressed => {
+    uploadToServer(compressed).then(url => {
+      updateState({ faviconUrl: url })
+      toast.success('Uploaded!')
+    })
+  })
+}
+```
+
+**Why React?** Branching logic, async operations, error handling, file processing. JSON actions are linear and synchronous.
+
+### 3. Classes and Interfaces
+Type systems and OOP patterns require TypeScript:
+
+```tsx
+// ❌ Cannot be JSON
+export interface DataSource {
+  id: string
+  type: DataSourceType
+  dependencies?: string[]
+  compute?: string
+}
+
+export class ThemeManager {
+  private themes: Map<string, Theme>
+  private listeners: Set<ThemeListener>
+
+  constructor(initialThemes: Theme[]) {
+    this.themes = new Map(initialThemes.map(t => [t.id, t]))
+    this.listeners = new Set()
+  }
+
+  applyTheme(themeId: string): void {
+    const theme = this.themes.get(themeId)
+    if (!theme) throw new Error(`Theme ${themeId} not found`)
+
+    // Apply CSS variables
+    Object.entries(theme.colors).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(`--${key}`, value)
+    })
+
+    // Notify listeners
+    this.listeners.forEach(listener => listener.onThemeChange(theme))
+  }
+}
+```
+
+**Why React/TS?** Type safety, encapsulation, methods, private state. JSON is just data.
+
+### 4. Complex Rendering Logic
+Conditional rendering with complex business rules:
+
+```tsx
+// ❌ Cannot be JSON
+function ComponentTree({ components }: ComponentTreeProps) {
+  const renderNode = (component: Component, depth: number): ReactNode => {
+    const hasChildren = component.children && component.children.length > 0
+    const isExpanded = expandedNodes.has(component.id)
+    const isDragging = draggedNode === component.id
+    const isDropTarget = dropTarget === component.id
+
+    // Determine visual state
+    const className = cn(
+      'tree-node',
+      { 'tree-node--expanded': isExpanded },
+      { 'tree-node--dragging': isDragging },
+      { 'tree-node--drop-target': isDropTarget && canDrop(component) }
+    )
+
+    return (
+      <div
+        className={className}
+        style={{ paddingLeft: `${depth * 20}px` }}
+        onDragStart={() => handleDragStart(component)}
+        onDragOver={(e) => handleDragOver(e, component)}
+        onDrop={() => handleDrop(component)}
+      >
+        {/* Recursive rendering */}
+        {hasChildren && isExpanded && (
+          <div className="tree-children">
+            {component.children.map(child =>
+              renderNode(child, depth + 1)
+            )}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return <div className="tree-root">{components.map(c => renderNode(c, 0))}</div>
+}
+```
+
+**Why React?** Recursion, dynamic styling, drag-and-drop state, event coordination. JSON can't express recursive algorithms.
+
+### 5. Third-Party Integrations
+Libraries with imperative APIs need wrapper components:
+
+```tsx
+// ❌ Cannot be JSON
+import MonacoEditor from '@monaco-editor/react'
+
+export function LazyMonacoEditor({ value, onChange, language }: EditorProps) {
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>()
+  const [isValid, setIsValid] = useState(true)
+
+  useEffect(() => {
+    // Configure Monaco
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.ES2020,
+      allowNonTsExtensions: true,
+      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    })
+
+    // Add custom validation
+    monaco.editor.onDidChangeMarkers(([uri]) => {
+      const markers = monaco.editor.getModelMarkers({ resource: uri })
+      setIsValid(markers.filter(m => m.severity === 8).length === 0)
+    })
+  }, [])
+
+  return (
+    <MonacoEditor
+      value={value}
+      onChange={onChange}
+      language={language}
+      onMount={(editor) => {
+        editorRef.current = editor
+        editor.addAction({
+          id: 'format-document',
+          label: 'Format Document',
+          keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+          run: () => editor.getAction('editor.action.formatDocument')?.run()
+        })
+      }}
+    />
+  )
+}
+```
+
+**Why React?** Third-party libraries expect imperative APIs (refs, lifecycle methods). JSON can reference the wrapper, but can't create it.
+
+## The Hybrid Pattern
+
+### JSON References React Components
+
+JSON schemas can reference any React component via the component registry:
+
+```json
+{
+  "id": "code-editor-section",
+  "type": "div",
+  "children": [
+    {
+      "id": "monaco-editor",
+      "type": "LazyMonacoEditor",
+      "props": {
+        "language": "typescript",
+        "theme": "vs-dark"
+      }
+    }
+  ]
+}
+```
+
+The `LazyMonacoEditor` is a React component with hooks, refs, and complex logic. JSON just *configures* it.
+
+### Component Registry: The Bridge
+
+```tsx
+// src/lib/json-ui/component-registry.ts
+export const componentRegistry: ComponentRegistry = {
+  // Simple components (could be JSON, but registered for convenience)
+  'Button': Button,
+  'Card': Card,
+  'Input': Input,
+
+  // Complex components (MUST be React)
+  'LazyMonacoEditor': LazyMonacoEditor,
+  'DataSourceManager': DataSourceManager,
+  'ComponentTree': ComponentTree,
+  'SchemaEditor': SchemaEditor,
+
+  // Hook-based components
+  'ProjectDashboard': ProjectDashboard,  // uses multiple hooks
+  'CodeEditor': CodeEditor,              // uses useEffect, useRef
+  'JSONModelDesigner': JSONModelDesigner, // uses custom hooks
+}
+```
+
+### The 68 React Components
+
+These aren't legacy cruft - they're **essential implementation**:
+
+| Component Type | Count | Why React? |
+|----------------|-------|------------|
+| Hook-based managers | 15 | useState, useEffect, useCallback |
+| Event-heavy UIs | 12 | Complex event handlers, drag-and-drop |
+| Third-party wrappers | 8 | Monaco, Chart.js, D3 integrations |
+| Recursive renderers | 6 | Tree views, nested structures |
+| Complex forms | 10 | Validation, multi-step flows |
+| Dialog/Modal managers | 8 | Portal rendering, focus management |
+| Real-time features | 5 | WebSocket, polling, live updates |
+| Lazy loaders | 4 | Code splitting, dynamic imports |
+
+## When to Use What
+
+### Use JSON When:
+✅ Composing existing components
+✅ Configuring layouts and styling
+✅ Defining data sources and bindings
+✅ Simple linear action chains
+✅ Static page structure
+✅ Theming and branding
+✅ Feature flags and toggles
+
+### Use React When:
+✅ Complex state management (hooks)
+✅ Imperative APIs (refs, third-party libs)
+✅ Advanced event handling (validation, async)
+✅ Recursive algorithms
+✅ Performance optimization (memo, virtualization)
+✅ Type-safe business logic (classes, interfaces)
+✅ Side effects and lifecycle management
+
+## Real-World Example: Data Source Manager
+
+### What's in JSON
+```json
+{
+  "id": "data-source-section",
+  "type": "Card",
+  "children": [
+    {
+      "type": "CardHeader",
+      "children": [
+        { "type": "CardTitle", "children": "Data Sources" }
+      ]
+    },
+    {
+      "type": "CardContent",
+      "children": [
+        {
+          "id": "ds-manager",
+          "type": "DataSourceManager",
+          "dataBinding": {
+            "dataSources": { "source": "pageSources" }
+          },
+          "events": [{
+            "event": "onChange",
+            "actions": [
+              { "type": "setState", "target": "pageSources", "valueFrom": "event" }
+            ]
+          }]
+        }
+      ]
+    }
+  ]
+}
+```
+
+**JSON handles:** Layout, composition, data binding, simple state updates
+
+### What's in React
+```tsx
+// src/components/organisms/DataSourceManager.tsx
+export function DataSourceManager({ dataSources, onChange }: Props) {
+  // ✅ Hook for complex state management
+  const {
+    dataSources: localSources,
+    addDataSource,
+    updateDataSource,
+    deleteDataSource,
+    getDependents,  // ← Complex computed logic
+  } = useDataSourceManager(dataSources)
+
+  // ✅ Local UI state
+  const [editingSource, setEditingSource] = useState<DataSource | null>(null)
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  // ✅ Complex event handler with validation
+  const handleDeleteSource = (id: string) => {
+    const dependents = getDependents(id)
+    if (dependents.length > 0) {
+      toast.error(`Cannot delete: ${dependents.length} sources depend on it`)
+      return
+    }
+    deleteDataSource(id)
+    onChange(localSources.filter(ds => ds.id !== id))
+    toast.success('Data source deleted')
+  }
+
+  // ✅ Conditional rendering based on complex state
+  const groupedSources = useMemo(() => ({
+    kv: localSources.filter(ds => ds.type === 'kv'),
+    computed: localSources.filter(ds => ds.type === 'computed'),
+    static: localSources.filter(ds => ds.type === 'static'),
+  }), [localSources])
+
+  return (
+    <div>
+      {localSources.length === 0 ? (
+        <EmptyState />
+      ) : (
+        <Stack>
+          <DataSourceGroup sources={groupedSources.kv} />
+          <DataSourceGroup sources={groupedSources.static} />
+          <DataSourceGroup sources={groupedSources.computed} />
+        </Stack>
+      )}
+      <DataSourceEditorDialog
+        open={dialogOpen}
+        dataSource={editingSource}
+        onSave={handleSaveSource}
+      />
+    </div>
+  )
+}
+```
+
+**React handles:** Hooks, validation, dependency checking, grouping logic, dialog state
+
+## The Power of Hybrid
+
+### Flexibility
+- **JSON**: Quick changes, visual editing, non-developer friendly
+- **React**: Full programming power when needed
+
+### Composition
+- **JSON**: Compose pages from molecules and organisms
+- **React**: Implement the organisms with complex logic
+
+### Evolution
+- **Start Simple**: Build in JSON, reference simple React components
+- **Add Complexity**: When logic grows, extract to custom React component
+- **Stay Declarative**: JSON schema stays clean, complexity hidden in components
+
+### Example Evolution
+
+**Day 1 - Pure JSON:**
+```json
+{
+  "type": "Button",
+  "events": [{ "event": "onClick", "actions": [{ "type": "toast" }] }]
+}
+```
+
+**Day 30 - Need validation:**
+```json
+{
+  "type": "ValidatedButton",  // ← Custom React component
+  "props": { "validationRules": ["required", "email"] }
+}
+```
+
+```tsx
+// Custom component when JSON isn't enough
+function ValidatedButton({ validationRules, onClick, ...props }) {
+  const validate = useValidation(validationRules)
+
+  const handleClick = () => {
+    if (!validate()) {
+      toast.error('Validation failed')
+      return
+    }
+    onClick?.()
+  }
+
+  return <Button onClick={handleClick} {...props} />
+}
+```
+
+**Day 90 - Complex workflow:**
+```json
+{
+  "type": "WorkflowButton",  // ← Even more complex component
+  "props": { "workflowId": "user-onboarding" }
+}
+```
+
+The JSON stays simple. The complexity lives in well-tested React components.
+
+## Conclusion
+
+The **68 React components aren't cruft** - they're the **essential implementation layer** that makes the JSON system powerful:
+
+- **Hooks** manage complex state
+- **Events** handle imperative interactions
+- **Interfaces** provide type safety
+- **Classes** encapsulate business logic
+- **Third-party integrations** extend capabilities
+
+JSON provides the **declarative structure**. React provides the **imperative power**.
+
+Together, they create a system that's:
+- **Easy** for simple cases (JSON)
+- **Powerful** for complex cases (React)
+- **Scalable** (add React components as needed)
+- **Maintainable** (JSON is readable, React is testable)
+
+This is the architecture of modern low-code platforms - not "no code," but **"right tool for the right job."**

docs/JSON-UI-IMPLEMENTATION.md

@@ -27,7 +27,7 @@ Successfully implemented a comprehensive JSON-driven UI system that allows build
   - Array looping for lists
   - Form rendering with validation
 
-- **hooks.ts**: React hooks for data management
+- **hooks.ts**: React hooks for data management (import from `@/lib/json-ui`)
   - `useJSONDataSource`: Single data source management (KV, API, static, computed)
   - `useJSONDataSources`: Multiple data sources orchestration
   - `useJSONActions`: Action registration and execution

docs/JSON-UI-SYSTEM.md

@@ -4,6 +4,8 @@
 
 The JSON UI System is a declarative framework for building React user interfaces from JSON configurations. Instead of writing React components, you define your UI structure, data sources, and event handlers in JSON files, which are then rendered dynamically.
 
+This document now serves as the consolidated reference for the JSON UI system. Legacy notes like `JSON_COMPONENTS.md`, `JSON_EXPRESSION_SYSTEM.md`, `JSON_COMPATIBILITY_IMPLEMENTATION.md`, the component usage report, and the old `json-components-list.json` artifact have been retired in favor of keeping the guidance in one place.
+
 ## Key Features
 
 - **Fully Declarative**: Define complete UIs without writing React code
@@ -275,6 +277,12 @@ registerComponent('MyCustom', MyCustomComponent)
 
 ### Add Custom Data Source Types
 
+Use the public entrypoint when consuming JSON UI hooks:
+
+```typescript
+import { useJSONDataSource, useJSONDataSources, useJSONActions } from '@/lib/json-ui'
+```
+
 Edit `/src/lib/json-ui/hooks.ts` to add new data source handlers.
 
 ### Add Custom Actions
@@ -296,7 +304,7 @@ const handleAction = (handler: EventHandler, event?: any) => {
 - **Schema Definitions**: `/src/lib/json-ui/schema.ts`
 - **Component Registry**: `/src/lib/json-ui/component-registry.ts`
 - **Renderer**: `/src/lib/json-ui/renderer.tsx`
-- **Hooks**: `/src/lib/json-ui/hooks.ts`
+- **Hooks**: Import from `@/lib/json-ui` (source: `/src/lib/json-ui/hooks.ts`)
 - **Utils**: `/src/lib/json-ui/utils.ts`
 - **Examples**: `/src/config/ui-examples/`
 - **Demo Page**: `/src/components/JSONUIShowcase.tsx`

docs/JSON_ARCHITECTURE.md

@@ -0,0 +1,388 @@
+# JSON-First Architecture
+
+## Overview
+
+This low-code platform uses a **JSON-first architecture** where the entire application is defined declaratively in JSON, eliminating React boilerplate and enabling visual editing, version control, and runtime customization.
+
+## Core Principles
+
+### 1. Everything is JSON
+- **Pages**: All 35 application pages defined in JSON schemas
+- **Components**: Atomic design library (atoms, molecules, organisms) in JSON
+- **Themes**: Complete theming system configurable via JSON
+- **Data**: State, bindings, and data sources declared in JSON
+- **Actions**: Event handlers and side effects defined in JSON
+
+### 2. Composition via $ref
+JSON files reference each other using JSON Schema `$ref`:
+```json
+{
+  "id": "dashboard",
+  "components": [
+    { "$ref": "./molecules/dashboard-header.json" },
+    { "$ref": "./molecules/stats-grid.json" }
+  ]
+}
+```
+
+### 3. One Definition Per File
+Following single-responsibility principle:
+- 1 function per TypeScript file
+- 1 type per TypeScript file
+- 1 component definition per JSON file
+- Compose larger structures via $ref
+
+## Architecture Layers
+
+```
+┌─────────────────────────────────────┐
+│      pages.json (35 pages)          │  ← Router configuration
+└──────────────┬──────────────────────┘
+               │ references
+┌──────────────▼──────────────────────┐
+│   Page Schemas (55 .json files)    │  ← Page definitions
+└──────────────┬──────────────────────┘
+               │ compose via $ref
+┌──────────────▼──────────────────────┐
+│   Organisms (8 .json files)         │  ← Complex layouts
+└──────────────┬──────────────────────┘
+               │ compose via $ref
+┌──────────────▼──────────────────────┐
+│   Molecules (23 .json files)        │  ← Composed components
+└──────────────┬──────────────────────┘
+               │ compose via $ref
+┌──────────────▼──────────────────────┐
+│     Atoms (23 .json files)          │  ← Base components
+└──────────────┬──────────────────────┘
+               │ reference
+┌──────────────▼──────────────────────┐
+│  React Components (68 .tsx)         │  ← Implementation
+│  Component Registry (100+ mapped)   │
+└─────────────────────────────────────┘
+```
+
+## File Structure
+
+```
+src/config/pages/
+├── atoms/              # 23 base components
+│   ├── button-primary.json
+│   ├── heading-1.json
+│   ├── text-muted.json
+│   └── ...
+├── molecules/          # 23 composed components
+│   ├── dashboard-header.json
+│   ├── stats-grid.json
+│   ├── stat-card-base.json
+│   └── ...
+├── organisms/          # 8 complex layouts
+│   ├── app-header.json
+│   ├── navigation-menu.json
+│   └── ...
+├── layouts/           # Layout templates
+│   └── single-column.json
+├── data-sources/      # Data source templates
+│   └── kv-storage.json
+└── *.json             # 55 page schemas
+    ├── dashboard-simple.json
+    ├── settings-page.json
+    └── ...
+```
+
+## JSON Schema Features
+
+### Page Schema
+```json
+{
+  "$schema": "./schema/page-schema.json",
+  "id": "dashboard-simple",
+  "name": "Project Dashboard",
+  "description": "Overview of your project",
+  "icon": "ChartBar",
+  "layout": {
+    "$ref": "./layouts/single-column.json"
+  },
+  "dataSources": [
+    {
+      "id": "projectStats",
+      "$ref": "./data-sources/kv-storage.json",
+      "key": "project-stats",
+      "defaultValue": { "files": 0, "models": 0 }
+    }
+  ],
+  "components": [
+    { "$ref": "./molecules/dashboard-header.json" },
+    { "$ref": "./molecules/stats-grid.json" }
+  ]
+}
+```
+
+### Data Binding
+```json
+{
+  "id": "files-value",
+  "type": "div",
+  "props": {
+    "className": "text-2xl font-bold",
+    "children": "0"
+  },
+  "dataBinding": {
+    "source": "projectStats",
+    "path": "files"
+  }
+}
+```
+
+### Actions
+```json
+{
+  "type": "Button",
+  "events": [
+    {
+      "event": "onClick",
+      "actions": [
+        {
+          "type": "setState",
+          "target": "selectedTab",
+          "value": "colors"
+        },
+        {
+          "type": "toast",
+          "title": "Tab changed",
+          "variant": "success"
+        }
+      ]
+    }
+  ]
+}
+```
+
+### Conditionals
+```json
+{
+  "type": "div",
+  "conditional": {
+    "source": "customColorCount",
+    "operator": "eq",
+    "value": 0
+  },
+  "children": [
+    { "type": "p", "children": "No custom colors" }
+  ]
+}
+```
+
+## Theming System
+
+### JSON Theme Definition
+The entire theming system is JSON-based (theme.json):
+
+```json
+{
+  "sidebar": {
+    "width": "16rem",
+    "backgroundColor": "oklch(0.19 0.02 265)",
+    "foregroundColor": "oklch(0.95 0.01 265)"
+  },
+  "colors": {
+    "primary": "oklch(0.58 0.24 265)",
+    "accent": "oklch(0.75 0.20 145)",
+    "background": "oklch(0.15 0.02 265)"
+  },
+  "typography": {
+    "fontFamily": {
+      "body": "'IBM Plex Sans', sans-serif",
+      "heading": "'JetBrains Mono', monospace"
+    }
+  },
+  "spacing": {
+    "radius": "0.5rem"
+  }
+}
+```
+
+### Runtime Theme Editing
+Users can create theme variants and customize colors/fonts via JSON:
+
+```json
+{
+  "activeVariantId": "dark",
+  "variants": [
+    {
+      "id": "dark",
+      "name": "Dark Mode",
+      "colors": {
+        "primary": "#7c3aed",
+        "secondary": "#38bdf8",
+        "customColors": {
+          "success": "#10b981",
+          "warning": "#f59e0b"
+        }
+      }
+    }
+  ]
+}
+```
+
+## Data Sources
+
+### KV Storage
+```json
+{
+  "id": "userData",
+  "type": "kv",
+  "key": "user-settings",
+  "defaultValue": { "theme": "dark" }
+}
+```
+
+### Computed Sources
+```json
+{
+  "id": "totalFiles",
+  "type": "computed",
+  "compute": "(data) => data.files.length",
+  "dependencies": ["files"]
+}
+```
+
+### Static Sources
+```json
+{
+  "id": "tabs",
+  "type": "static",
+  "defaultValue": ["colors", "typography", "preview"]
+}
+```
+
+## Benefits Over Traditional React
+
+### Traditional React Component (~50 lines)
+```tsx
+import { useState } from 'react'
+import { Card } from '@/components/ui/card'
+
+interface DashboardProps {
+  initialData?: { files: number }
+}
+
+export function Dashboard({ initialData }: DashboardProps) {
+  const [stats, setStats] = useState(initialData || { files: 0 })
+
+  return (
+    <div className="p-6">
+      <div className="border-b pb-4">
+        <h1 className="text-2xl font-bold">Dashboard</h1>
+      </div>
+      <Card className="p-6">
+        <div className="text-2xl font-bold">{stats.files}</div>
+        <div className="text-sm text-muted">Files</div>
+      </Card>
+    </div>
+  )
+}
+```
+
+### JSON Equivalent (~15 lines)
+```json
+{
+  "id": "dashboard",
+  "dataSources": [
+    { "id": "stats", "type": "kv", "key": "stats" }
+  ],
+  "components": [
+    { "$ref": "./molecules/dashboard-header.json" },
+    {
+      "$ref": "./molecules/stat-card.json",
+      "dataBinding": { "source": "stats", "path": "files" }
+    }
+  ]
+}
+```
+
+## Eliminated Boilerplate
+
+✅ **No imports** - Components referenced by type string
+✅ **No TypeScript interfaces** - Types inferred from registry
+✅ **No useState/useEffect** - State declared in dataSources
+✅ **No event handlers** - Actions declared in events array
+✅ **No prop drilling** - Data binding handles it
+✅ **No component exports** - Automatic via registry
+✅ **No JSX nesting** - Flat JSON structure with $ref
+
+## Coverage Statistics
+
+- **35/35 pages** use JSON schemas (100%)
+- **0/35 pages** use React component references
+- **109 JSON component files** created
+  - 23 atoms
+  - 23 molecules
+  - 8 organisms
+  - 55 page schemas
+- **68 React components** remain as implementation layer
+
+## Potential Cleanup Targets
+
+### Deprecated Files (Safe to Remove)
+- `src/config/default-pages.json` - Replaced by pages.json
+- `src/config/json-demo.json` - Old demo file
+- `src/config/template-ui.json` - Replaced by JSON schemas
+
+### Keep (Still Used)
+- `src/config/pages.json` - Active router configuration
+- `theme.json` - Active theming system
+- `src/config/feature-toggle-settings.json` - Feature flags
+- All JSON schemas in `src/config/pages/`
+
+## Best Practices
+
+### 1. Atomic Granularity
+Break components into smallest reusable units:
+```
+❌ dashboard.json (monolithic)
+✅ dashboard-header.json + stats-grid.json + stat-card.json
+```
+
+### 2. $ref Composition
+Always compose via references, never inline:
+```json
+❌ { "type": "div", "children": [ ... 50 lines ... ] }
+✅ { "$ref": "./molecules/complex-section.json" }
+```
+
+### 3. Single Responsibility
+One purpose per JSON file:
+```
+✅ stat-card-base.json (template)
+✅ stat-card-files.json (specific instance)
+✅ stat-card-models.json (specific instance)
+```
+
+### 4. Descriptive IDs
+Use semantic IDs that describe purpose:
+```json
+{ "id": "dashboard-header" }      // ✅ Good
+{ "id": "div-1" }                 // ❌ Bad
+```
+
+## Future Enhancements
+
+- [ ] Visual JSON editor for drag-and-drop page building
+- [ ] Theme marketplace with sharable JSON themes
+- [ ] Component library with searchable JSON snippets
+- [ ] JSON validation and IntelliSense in VSCode
+- [ ] Hot-reload JSON changes without app restart
+- [ ] A/B testing via JSON variant switching
+- [ ] Multi-tenant customization via tenant-specific JSONs
+
+## Conclusion
+
+This JSON-first architecture transforms React development from code-heavy to configuration-driven, enabling:
+- **Visual editing** without touching code
+- **Version control** friendly (JSON diffs)
+- **Runtime customization** (load different JSONs)
+- **Non-developer accessibility** (JSON is readable)
+- **Rapid prototyping** (compose existing pieces)
+- **Consistent patterns** (enforced by schema)
+
+All without sacrificing the power of React when you need it - complex interactive components can still be written in React and referenced from JSON.

docs/JSON_COMPONENT_CONVERSION_TASKS.md

@@ -0,0 +1,102 @@
+# JSON Component Conversion Tasks
+
+This task list captures the next steps for expanding JSON UI coverage, split between **component migrations** and **framework enablers**.
+
+## Implementation Notes
+
+- Component trees can live as JSON definitions.
+- Custom behavior should be organized into hooks where appropriate.
+- Types belong in `types` files; interfaces belong in dedicated `interfaces` files.
+- Capture relevant conversion logs during work.
+
+## Component Migration Tasks (Planned → Supported)
+
+### Input Components
+- [ ] **DatePicker**
+  - Add `DatePicker` to `ComponentType` in `src/types/json-ui.ts`.
+  - Register `DatePicker` in `src/lib/json-ui/component-registry.tsx`.
+  - Add metadata/defaults to `src/lib/component-definitions.ts`.
+  - Flip status to `supported` in `json-components-registry.json`.
+- [ ] **FileUpload**
+  - Add `FileUpload` to `ComponentType` in `src/types/json-ui.ts`.
+  - Register `FileUpload` in `src/lib/json-ui/component-registry.tsx`.
+  - Add metadata/defaults to `src/lib/component-definitions.ts`.
+  - Flip status to `supported` in `json-components-registry.json`.
+
+### Display Components
+- [ ] **CircularProgress**
+  - Add `CircularProgress` to `ComponentType` in `src/types/json-ui.ts`.
+  - Register `CircularProgress` in `src/lib/json-ui/component-registry.tsx`.
+  - Add metadata/defaults to `src/lib/component-definitions.ts`.
+  - Flip status to `supported` in `json-components-registry.json`.
+- [ ] **Divider**
+  - Add `Divider` to `ComponentType` in `src/types/json-ui.ts`.
+  - Register `Divider` in `src/lib/json-ui/component-registry.tsx`.
+  - Add metadata/defaults to `src/lib/component-definitions.ts`.
+  - Flip status to `supported` in `json-components-registry.json`.
+- [ ] **ProgressBar**
+  - Add `ProgressBar` to `ComponentType` in `src/types/json-ui.ts`.
+  - Register `ProgressBar` in `src/lib/json-ui/component-registry.tsx`.
+  - Add metadata/defaults to `src/lib/component-definitions.ts`.
+  - Flip status to `supported` in `json-components-registry.json`.
+
+### Navigation Components
+- [ ] **Breadcrumb**
+  - Decide whether JSON should map to `BreadcrumbNav` (atoms) or `Breadcrumb` (molecules).
+  - Align props and bindings to a single JSON-friendly surface.
+  - Register a single `Breadcrumb` entry and set status to `supported` in `json-components-registry.json`.
+
+### Feedback Components
+- [ ] **ErrorBadge**
+  - Add `ErrorBadge` to `ComponentType` in `src/types/json-ui.ts`.
+  - Register `ErrorBadge` in `src/lib/json-ui/component-registry.tsx`.
+  - Add metadata/defaults to `src/lib/component-definitions.ts`.
+  - Flip status to `supported` in `json-components-registry.json`.
+- [ ] **Notification**
+  - Add `Notification` to `ComponentType` in `src/types/json-ui.ts`.
+  - Register `Notification` in `src/lib/json-ui/component-registry.tsx`.
+  - Add metadata/defaults to `src/lib/component-definitions.ts`.
+  - Flip status to `supported` in `json-components-registry.json`.
+- [ ] **StatusIcon**
+  - Add `StatusIcon` to `ComponentType` in `src/types/json-ui.ts`.
+  - Register `StatusIcon` in `src/lib/json-ui/component-registry.tsx`.
+  - Add metadata/defaults to `src/lib/component-definitions.ts`.
+  - Flip status to `supported` in `json-components-registry.json`.
+
+### Data Components
+- [ ] **DataList**
+  - Add `DataList` to `ComponentType` in `src/types/json-ui.ts`.
+  - Register `DataList` in `src/lib/json-ui/component-registry.tsx`.
+  - Add metadata/defaults to `src/lib/component-definitions.ts`.
+  - Flip status to `supported` in `json-components-registry.json`.
+- [ ] **DataTable**
+  - Add `DataTable` to `ComponentType` in `src/types/json-ui.ts`.
+  - Register `DataTable` in `src/lib/json-ui/component-registry.tsx`.
+  - Add metadata/defaults to `src/lib/component-definitions.ts`.
+  - Flip status to `supported` in `json-components-registry.json`.
+- [ ] **MetricCard**
+  - Add `MetricCard` to `ComponentType` in `src/types/json-ui.ts`.
+  - Register `MetricCard` in `src/lib/json-ui/component-registry.tsx`.
+  - Add metadata/defaults to `src/lib/component-definitions.ts`.
+  - Flip status to `supported` in `json-components-registry.json`.
+- [ ] **Timeline**
+  - Add `Timeline` to `ComponentType` in `src/types/json-ui.ts`.
+  - Register `Timeline` in `src/lib/json-ui/component-registry.tsx`.
+  - Add metadata/defaults to `src/lib/component-definitions.ts`.
+  - Flip status to `supported` in `json-components-registry.json`.
+
+## Framework Enablers
+
+- [ ] **Event binding extensions**
+  - Expand event/action coverage to support richer interactions via JSON expressions.
+  - Confirm compatibility with existing `expression` and `valueTemplate` handling.
+- [ ] **State binding system**
+  - Add support for stateful bindings needed by interactive components.
+  - Document and enforce which components require state binding.
+- [ ] **JSON-friendly wrappers**
+  - Create wrapper components for hook-heavy/side-effect components.
+  - Register wrappers in the JSON registry instead of direct usage.
+- [ ] **Registry normalization**
+  - Resolve duplicate component entries (e.g., multiple `Breadcrumb` variants) in `json-components-registry.json`.
+- [ ] **Showcase schema coverage**
+  - Add JSON schema examples for each newly supported component to keep demos current.

docs/JSON_CONVERSION.md

@@ -106,7 +106,12 @@ Converted three complex pages (Models, Component Trees, and Workflows) from trad
           "type": "Component",
           "bindings": { "prop": { "source": "...", "path": "..." } },
           "events": [
-            { "event": "click", "actions": [...] }
+            {
+              "event": "click",
+              "actions": [
+                { "type": "set-value", "target": "selectedId", "expression": "event" }
+              ]
+            }
           ]
         }
       ]
@@ -115,6 +120,18 @@ Converted three complex pages (Models, Component Trees, and Workflows) from trad
 }
 ```
 
+### Action & Conditional Syntax
+- Use supported JSON UI action types (for example, `set-value`, `toggle-value`, `show-toast`) with `target`, `path`, `value`, or `expression` fields instead of legacy `setState` actions.
+- Replace legacy conditional objects (`{ "source": "...", "operator": "eq|gt|truthy|falsy", "value": ... }`) with `conditional.if` expressions:
+
+```json
+{
+  "conditional": {
+    "if": "modelCount === 0"
+  }
+}
+```
+
 ### Component Registry Integration
 All JSON page wrappers are registered in `component-registry.ts`:
 - `JSONModelDesigner`

docs/JSON_UI_GUIDE.md

@@ -326,6 +326,241 @@ With transformations:
 }
 ```
 
+## Component Pattern Templates
+
+Use these patterns as starting points when authoring JSON schemas. Each example includes
+recommended prop shapes and binding strategies for predictable rendering and data flow.
+
+### Form Pattern (Create/Edit)
+
+**Recommended prop shape**
+- `name`: field identifier used in data mappings.
+- `label`: user-facing label.
+- `placeholder`: optional hint text.
+- `type`: input type (`text`, `email`, `number`, `date`, etc.).
+- `required`: boolean for validation UI.
+
+**Schema example**
+```typescript
+{
+  id: 'profile-form',
+  type: 'form',
+  props: {
+    className: 'space-y-4'
+  },
+  children: [
+    {
+      id: 'first-name',
+      type: 'Input',
+      props: {
+        name: 'firstName',
+        label: 'First name',
+        placeholder: 'Ada',
+        required: true
+      },
+      bindings: {
+        value: { source: 'formState', path: 'firstName' }
+      },
+      events: [
+        {
+          event: 'change',
+          actions: [
+            {
+              type: 'set-value',
+              target: 'formState',
+              path: 'firstName',
+              compute: (data, event) => event.target.value
+            }
+          ]
+        }
+      ]
+    },
+    {
+      id: 'email',
+      type: 'Input',
+      props: {
+        name: 'email',
+        label: 'Email',
+        placeholder: 'ada@lovelace.dev',
+        type: 'email'
+      },
+      bindings: {
+        value: { source: 'formState', path: 'email' }
+      },
+      events: [
+        {
+          event: 'change',
+          actions: [
+            {
+              type: 'set-value',
+              target: 'formState',
+              path: 'email',
+              compute: (data, event) => event.target.value
+            }
+          ]
+        }
+      ]
+    },
+    {
+      id: 'save-profile',
+      type: 'Button',
+      props: { children: 'Save profile' },
+      events: [
+        {
+          event: 'click',
+          actions: [
+            {
+              type: 'create',
+              target: 'profiles',
+              compute: (data) => ({
+                id: Date.now(),
+                ...data.formState
+              })
+            },
+            {
+              type: 'set-value',
+              target: 'formState',
+              value: { firstName: '', email: '' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+```
+
+**Recommended bindings**
+- Use `bindings.value` for inputs and update a single `formState` data source.
+- Use `set-value` with `path` to update individual fields and avoid cloning the whole object.
+
+### Card Pattern (Summary/Stat)
+
+**Recommended prop shape**
+- `title`: primary label.
+- `description`: supporting copy.
+- `badge`: optional status tag.
+- `icon`: optional leading icon name or component id.
+
+**Schema example**
+```typescript
+{
+  id: 'stats-card',
+  type: 'Card',
+  props: { className: 'p-4' },
+  children: [
+    {
+      id: 'card-header',
+      type: 'div',
+      props: { className: 'flex items-center justify-between' },
+      children: [
+        {
+          id: 'card-title',
+          type: 'h3',
+          bindings: {
+            children: { source: 'stats', path: 'title' }
+          },
+          props: { className: 'text-lg font-semibold' }
+        },
+        {
+          id: 'card-badge',
+          type: 'Badge',
+          bindings: {
+            children: { source: 'stats', path: 'status' },
+            variant: {
+              source: 'stats',
+              path: 'status',
+              transform: (value) => (value === 'Active' ? 'success' : 'secondary')
+            }
+          }
+        }
+      ]
+    },
+    {
+      id: 'card-description',
+      type: 'p',
+      props: { className: 'text-sm text-muted-foreground' },
+      bindings: {
+        children: { source: 'stats', path: 'description' }
+      }
+    }
+  ]
+}
+```
+
+**Recommended bindings**
+- Bind the card text fields directly to a `stats` data source.
+- Use `transform` for simple presentation mappings (status to badge variant).
+
+### List Pattern (Collection + Row Actions)
+
+**Recommended prop shape**
+- `items`: array data source bound at the list container.
+- `keyField`: unique field for list keys.
+- `primary`: main text content (usually `name` or `title`).
+- `secondary`: supporting text (optional).
+- `actions`: array of action configs for row-level events.
+
+**Schema example**
+```typescript
+{
+  id: 'task-list',
+  type: 'div',
+  bindings: {
+    children: {
+      source: 'tasks',
+      transform: (items) =>
+        items.map((item) => ({
+          id: `task-${item.id}`,
+          type: 'div',
+          props: { className: 'flex items-center justify-between py-2' },
+          children: [
+            {
+              id: `task-name-${item.id}`,
+              type: 'span',
+              bindings: {
+                children: { source: 'item', path: 'name' }
+              }
+            },
+            {
+              id: `task-toggle-${item.id}`,
+              type: 'Button',
+              props: { size: 'sm', variant: 'outline' },
+              bindings: {
+                children: {
+                  source: 'item',
+                  path: 'completed',
+                  transform: (value) => (value ? 'Undo' : 'Complete')
+                }
+              },
+              events: [
+                {
+                  event: 'click',
+                  actions: [
+                    {
+                      type: 'update',
+                      target: 'tasks',
+                      id: item.id,
+                      compute: (data) => ({
+                        ...item,
+                        completed: !item.completed
+                      })
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }))
+    }
+  }
+}
+```
+
+**Recommended bindings**
+- Use a `transform` to map collection items into child component schemas.
+- Use `{ source: 'item', path: 'field' }` when binding inside the item loop for clarity and efficiency.
+
 ## Event Handling
 
 ### Simple Event

docs/ROADMAP.md

@@ -645,6 +645,19 @@ CodeForge is a comprehensive low-code development platform for building producti
 - [ ] Migration guides
 - [ ] Best practices guide
 
+#### Molecule/Organism Refactors
+- [ ] Identify 3-5 molecule components that can be expressed as JSON schemas with hooks, types, and actions (target: ComponentTree, PropertyEditor, DataSourceCard, SchemaEditorCanvas, NavigationMenu).
+- [ ] Create JSON schemas for selected molecules and wire them through `JSONUIRenderer` while keeping existing props contracts stable.
+- [ ] Convert at least one organism (e.g., DataSourceManager) into JSON-driven layout with nested molecule schemas.
+- [ ] Document the JSON schema patterns for molecule/organism composition (bindings, events, actions) with real examples.
+
+#### JSON UI Framework Improvements
+- [ ] Fix conditional rendering to honor `conditional.then` when conditions pass.
+- [ ] Fix loop rendering to avoid self-recursion and render loop children templates.
+- [ ] Add data binding support for dot-path string bindings and loop context variables.
+- [ ] Apply data binding transforms consistently (support `transform` in JSON schemas).
+- [ ] Align JSON UI event/action typings across `src/lib/json-ui` and `src/types/json-ui.ts`.
+
 #### Security
 - [ ] Regular dependency updates
 - [ ] Security audit with npm audit

docs/json-components-tracker.md

@@ -0,0 +1,9 @@
+# JSON Components Tracker
+
+| Component | Current Status | Blockers | Assignee |
+| --- | --- | --- | --- |
+| ActionCard | Supported | None | Unassigned |
+| Breadcrumb | Planned | Needs JSON registry entry and schema examples | Unassigned |
+| Notification | Planned | Requires JSON event bindings for dismiss/action | Unassigned |
+| StatusIcon | Planned | Needs icon mapping strategy in JSON UI | Unassigned |
+| CodeExplanationDialog | Maybe | Depends on JSON-safe dialog state handling | Unassigned |

e2e/codeforge.spec.ts

@@ -8,7 +8,10 @@ test.describe('CodeForge - Core Functionality', () => {
   })
 
   test('should load the application successfully', async ({ page }) => {
-    await expect(page.locator('body')).toBeVisible()
+    // Check root has children (content rendered)
+    await page.waitForSelector('#root > *', { timeout: 10000 })
+    const root = page.locator('#root')
+    await expect(root).toHaveCount(1)
   })
 
   test('should display main navigation', async ({ page }) => {
@@ -50,8 +53,8 @@ test.describe('CodeForge - Responsive Design', () => {
     await page.setViewportSize({ width: 375, height: 667 })
     await page.goto('/', { waitUntil: 'domcontentloaded', timeout: 10000 })
     await page.waitForLoadState('networkidle', { timeout: 5000 })
-    
-    await expect(page.locator('body')).toBeVisible()
+
+    await page.waitForSelector('#root > *', { timeout: 10000 })
   })
 
   test('should work on tablet viewport', async ({ page }) => {
@@ -59,7 +62,7 @@ test.describe('CodeForge - Responsive Design', () => {
     await page.setViewportSize({ width: 768, height: 1024 })
     await page.goto('/', { waitUntil: 'domcontentloaded', timeout: 10000 })
     await page.waitForLoadState('networkidle', { timeout: 5000 })
-    
-    await expect(page.locator('body')).toBeVisible()
+
+    await page.waitForSelector('#root > *', { timeout: 10000 })
   })
 })

e2e/debug.spec.ts

@@ -0,0 +1,41 @@
+import { test } from '@playwright/test'
+
+test('debug page load', async ({ page }) => {
+  const errors: string[] = []
+  const pageErrors: Error[] = []
+
+  page.on('console', (msg) => {
+    if (msg.type() === 'error') {
+      errors.push(msg.text())
+    }
+  })
+
+  page.on('pageerror', (error) => {
+    pageErrors.push(error)
+  })
+
+  await page.goto('/', { waitUntil: 'networkidle', timeout: 15000 })
+
+  // Wait a bit
+  await page.waitForTimeout(2000)
+
+  // Get page content
+  const rootHTML = await page.locator('#root').innerHTML().catch(() => 'ERROR GETTING ROOT')
+
+  console.log('=== PAGE ERRORS ===')
+  pageErrors.forEach(err => console.log(err.message))
+
+  console.log('\n=== CONSOLE ERRORS ===')
+  errors.forEach(err => console.log(err))
+
+  console.log('\n=== ROOT CONTENT ===')
+  console.log(rootHTML.substring(0, 500))
+
+  console.log('\n=== ROOT VISIBLE ===')
+  const rootVisible = await page.locator('#root').isVisible().catch(() => false)
+  console.log('Root visible:', rootVisible)
+
+  console.log('\n=== ROOT HAS CHILDREN ===')
+  const childCount = await page.locator('#root > *').count()
+  console.log('Child count:', childCount)
+})

e2e/smoke.spec.ts

@@ -4,8 +4,12 @@ test.describe('CodeForge - Smoke Tests', () => {
   test('app loads successfully', async ({ page }) => {
     test.setTimeout(20000)
     await page.goto('/', { waitUntil: 'networkidle', timeout: 15000 })
-    
-    await expect(page.locator('body')).toBeVisible({ timeout: 5000 })
+
+    // Check that the app has rendered content (more reliable than checking visibility)
+    const root = page.locator('#root')
+    await expect(root).toHaveCount(1, { timeout: 5000 })
+    // Wait for any content to be rendered
+    await page.waitForSelector('#root > *', { timeout: 10000 })
   })
 
   test('can navigate to dashboard tab', async ({ page }) => {

e2e/visual-regression.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('visual regression', () => {
+  test('json conversion showcase', async ({ page }) => {
+    await page.goto('/json-conversion-showcase')
+    await page.waitForLoadState('networkidle')
+    await page.waitForFunction(() => {
+      const root = document.querySelector('#root')
+      return root && root.textContent && root.textContent.length > 0
+    })
+    await page.addStyleTag({
+      content: '* { transition: none !important; animation: none !important; }',
+    })
+    await expect(page).toHaveScreenshot('json-conversion-showcase.png', { fullPage: true })
+  })
+})

fixtures/dev-qa/README.md

@@ -0,0 +1,13 @@
+# Dev/QA Smoke Fixture Schemas
+
+These JSON schemas provide lightweight smoke-test coverage for each JSON UI component category.
+Each file is a standalone page schema that can be loaded in dev or QA to verify rendering.
+
+## Categories
+- `layout.json`
+- `input.json`
+- `display.json`
+- `navigation.json`
+- `feedback.json`
+- `data.json`
+- `custom.json`

fixtures/dev-qa/custom.json

@@ -0,0 +1,40 @@
+{
+  "id": "smoke-custom",
+  "name": "Smoke Custom",
+  "layout": {
+    "type": "single"
+  },
+  "dataSources": [],
+  "components": [
+    {
+      "id": "custom-section",
+      "type": "section",
+      "children": [
+        {
+          "id": "custom-heading",
+          "type": "Heading",
+          "props": {
+            "level": 3,
+            "children": "Custom Component Smoke Check"
+          }
+        },
+        {
+          "id": "custom-data-card",
+          "type": "DataCard",
+          "props": {
+            "title": "QA Metric",
+            "value": "99%",
+            "icon": "TrendUp"
+          }
+        },
+        {
+          "id": "custom-search",
+          "type": "SearchInput",
+          "props": {
+            "placeholder": "Search QA fixtures..."
+          }
+        }
+      ]
+    }
+  ]
+}

fixtures/dev-qa/data.json

@@ -0,0 +1,46 @@
+{
+  "id": "smoke-data",
+  "name": "Smoke Data",
+  "layout": {
+    "type": "single"
+  },
+  "dataSources": [],
+  "components": [
+    {
+      "id": "data-section",
+      "type": "section",
+      "children": [
+        {
+          "id": "data-heading",
+          "type": "Heading",
+          "props": {
+            "level": 3,
+            "children": "Data Smoke Check"
+          }
+        },
+        {
+          "id": "data-list",
+          "type": "List",
+          "props": {
+            "items": ["QA record A", "QA record B", "QA record C"],
+            "emptyMessage": "No QA records"
+          }
+        },
+        {
+          "id": "data-table",
+          "type": "Table",
+          "props": {
+            "columns": [
+              { "key": "name", "header": "Name" },
+              { "key": "status", "header": "Status" }
+            ],
+            "data": [
+              { "name": "Smoke Run", "status": "Pass" },
+              { "name": "Regression", "status": "Pending" }
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}

fixtures/dev-qa/display.json

@@ -0,0 +1,42 @@
+{
+  "id": "smoke-display",
+  "name": "Smoke Display",
+  "layout": {
+    "type": "single"
+  },
+  "dataSources": [],
+  "components": [
+    {
+      "id": "display-section",
+      "type": "section",
+      "children": [
+        {
+          "id": "display-heading",
+          "type": "Heading",
+          "props": {
+            "level": 3,
+            "children": "Display Smoke Check"
+          }
+        },
+        {
+          "id": "display-text",
+          "type": "Text",
+          "props": {
+            "children": "Checks text, badges, and separators for QA verification."
+          }
+        },
+        {
+          "id": "display-badge",
+          "type": "Badge",
+          "props": {
+            "children": "QA"
+          }
+        },
+        {
+          "id": "display-divider",
+          "type": "Divider"
+        }
+      ]
+    }
+  ]
+}

fixtures/dev-qa/feedback.json

@@ -0,0 +1,40 @@
+{
+  "id": "smoke-feedback",
+  "name": "Smoke Feedback",
+  "layout": {
+    "type": "single"
+  },
+  "dataSources": [],
+  "components": [
+    {
+      "id": "feedback-section",
+      "type": "section",
+      "children": [
+        {
+          "id": "feedback-heading",
+          "type": "Heading",
+          "props": {
+            "level": 3,
+            "children": "Feedback Smoke Check"
+          }
+        },
+        {
+          "id": "feedback-alert",
+          "type": "Alert",
+          "props": {
+            "variant": "info",
+            "children": "QA info alert rendered."
+          }
+        },
+        {
+          "id": "feedback-status",
+          "type": "StatusBadge",
+          "props": {
+            "status": "active",
+            "children": "Active"
+          }
+        }
+      ]
+    }
+  ]
+}

fixtures/dev-qa/input.json

@@ -0,0 +1,45 @@
+{
+  "id": "smoke-input",
+  "name": "Smoke Input",
+  "layout": {
+    "type": "single"
+  },
+  "dataSources": [],
+  "components": [
+    {
+      "id": "input-section",
+      "type": "section",
+      "children": [
+        {
+          "id": "input-heading",
+          "type": "Heading",
+          "props": {
+            "level": 2,
+            "children": "Input Smoke Check"
+          }
+        },
+        {
+          "id": "input-control",
+          "type": "Input",
+          "props": {
+            "placeholder": "Enter QA value..."
+          }
+        },
+        {
+          "id": "input-toggle",
+          "type": "Switch",
+          "props": {
+            "checked": true
+          }
+        },
+        {
+          "id": "input-button",
+          "type": "Button",
+          "props": {
+            "children": "Submit"
+          }
+        }
+      ]
+    }
+  ]
+}

fixtures/dev-qa/layout.json

@@ -0,0 +1,67 @@
+{
+  "id": "smoke-layout",
+  "name": "Smoke Layout",
+  "layout": {
+    "type": "single"
+  },
+  "dataSources": [],
+  "components": [
+    {
+      "id": "layout-container",
+      "type": "Container",
+      "props": {
+        "className": "py-6"
+      },
+      "children": [
+        {
+          "id": "layout-stack",
+          "type": "Stack",
+          "props": {
+            "gap": 4
+          },
+          "children": [
+            {
+              "id": "layout-card",
+              "type": "Card",
+              "children": [
+                {
+                  "id": "layout-card-header",
+                  "type": "CardHeader",
+                  "children": [
+                    {
+                      "id": "layout-card-title",
+                      "type": "CardTitle",
+                      "props": {
+                        "children": "Layout Smoke Check"
+                      }
+                    },
+                    {
+                      "id": "layout-card-description",
+                      "type": "CardDescription",
+                      "props": {
+                        "children": "Ensures layout primitives render in QA."
+                      }
+                    }
+                  ]
+                },
+                {
+                  "id": "layout-card-content",
+                  "type": "CardContent",
+                  "children": [
+                    {
+                      "id": "layout-card-text",
+                      "type": "Text",
+                      "props": {
+                        "children": "This card is wrapped in Container and Stack components."
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

fixtures/dev-qa/navigation.json

@@ -0,0 +1,42 @@
+{
+  "id": "smoke-navigation",
+  "name": "Smoke Navigation",
+  "layout": {
+    "type": "single"
+  },
+  "dataSources": [],
+  "components": [
+    {
+      "id": "navigation-section",
+      "type": "section",
+      "children": [
+        {
+          "id": "navigation-heading",
+          "type": "Heading",
+          "props": {
+            "level": 3,
+            "children": "Navigation Smoke Check"
+          }
+        },
+        {
+          "id": "navigation-link",
+          "type": "Link",
+          "props": {
+            "href": "/qa",
+            "children": "Go to QA overview"
+          }
+        },
+        {
+          "id": "navigation-breadcrumb",
+          "type": "Breadcrumb",
+          "props": {
+            "items": [
+              { "label": "Home", "href": "/" },
+              { "label": "QA" }
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}

json-components-list.json

@@ -1,494 +0,0 @@
-[
-  {
-    "type": "div",
-    "name": "Container (div)",
-    "category": "layout",
-    "canHaveChildren": true,
-    "description": "Generic container element",
-    "status": "supported"
-  },
-  {
-    "type": "section",
-    "name": "Section",
-    "category": "layout",
-    "canHaveChildren": true,
-    "description": "Semantic section element",
-    "status": "supported"
-  },
-  {
-    "type": "article",
-    "name": "Article",
-    "category": "layout",
-    "canHaveChildren": true,
-    "description": "Semantic article element",
-    "status": "supported"
-  },
-  {
-    "type": "header",
-    "name": "Header",
-    "category": "layout",
-    "canHaveChildren": true,
-    "description": "Semantic header element",
-    "status": "supported"
-  },
-  {
-    "type": "footer",
-    "name": "Footer",
-    "category": "layout",
-    "canHaveChildren": true,
-    "description": "Semantic footer element",
-    "status": "supported"
-  },
-  {
-    "type": "main",
-    "name": "Main",
-    "category": "layout",
-    "canHaveChildren": true,
-    "description": "Semantic main content element",
-    "status": "supported"
-  },
-  {
-    "type": "Card",
-    "name": "Card",
-    "category": "layout",
-    "canHaveChildren": true,
-    "description": "Container card with optional header, content, and footer",
-    "status": "supported",
-    "subComponents": [
-      "CardHeader",
-      "CardTitle",
-      "CardDescription",
-      "CardContent",
-      "CardFooter"
-    ]
-  },
-  {
-    "type": "Grid",
-    "name": "Grid",
-    "category": "layout",
-    "canHaveChildren": true,
-    "description": "Responsive grid layout",
-    "status": "supported"
-  },
-  {
-    "type": "Flex",
-    "name": "Flex",
-    "category": "layout",
-    "canHaveChildren": true,
-    "description": "Flexible box layout container",
-    "status": "supported"
-  },
-  {
-    "type": "Stack",
-    "name": "Stack",
-    "category": "layout",
-    "canHaveChildren": true,
-    "description": "Vertical or horizontal stack layout",
-    "status": "supported"
-  },
-  {
-    "type": "Container",
-    "name": "Container",
-    "category": "layout",
-    "canHaveChildren": true,
-    "description": "Centered container with max-width",
-    "status": "supported"
-  },
-  {
-    "type": "Button",
-    "name": "Button",
-    "category": "input",
-    "canHaveChildren": true,
-    "description": "Interactive button element",
-    "status": "supported"
-  },
-  {
-    "type": "Input",
-    "name": "Input",
-    "category": "input",
-    "canHaveChildren": false,
-    "description": "Text input field",
-    "status": "supported"
-  },
-  {
-    "type": "TextArea",
-    "name": "TextArea",
-    "category": "input",
-    "canHaveChildren": false,
-    "description": "Multi-line text input",
-    "status": "supported"
-  },
-  {
-    "type": "Select",
-    "name": "Select",
-    "category": "input",
-    "canHaveChildren": false,
-    "description": "Dropdown select control",
-    "status": "supported"
-  },
-  {
-    "type": "Checkbox",
-    "name": "Checkbox",
-    "category": "input",
-    "canHaveChildren": false,
-    "description": "Checkbox toggle control",
-    "status": "supported"
-  },
-  {
-    "type": "Radio",
-    "name": "Radio",
-    "category": "input",
-    "canHaveChildren": false,
-    "description": "Radio button selection",
-    "status": "supported"
-  },
-  {
-    "type": "Switch",
-    "name": "Switch",
-    "category": "input",
-    "canHaveChildren": false,
-    "description": "Toggle switch control",
-    "status": "supported"
-  },
-  {
-    "type": "Slider",
-    "name": "Slider",
-    "category": "input",
-    "canHaveChildren": false,
-    "description": "Numeric range slider",
-    "status": "supported"
-  },
-  {
-    "type": "NumberInput",
-    "name": "NumberInput",
-    "category": "input",
-    "canHaveChildren": false,
-    "description": "Numeric input with increment/decrement",
-    "status": "supported"
-  },
-  {
-    "type": "DatePicker",
-    "name": "DatePicker",
-    "category": "input",
-    "canHaveChildren": false,
-    "description": "Date selection input",
-    "status": "planned"
-  },
-  {
-    "type": "FileUpload",
-    "name": "FileUpload",
-    "category": "input",
-    "canHaveChildren": false,
-    "description": "File upload control",
-    "status": "planned"
-  },
-  {
-    "type": "Text",
-    "name": "Text",
-    "category": "display",
-    "canHaveChildren": true,
-    "description": "Text content with typography variants",
-    "status": "supported"
-  },
-  {
-    "type": "Heading",
-    "name": "Heading",
-    "category": "display",
-    "canHaveChildren": true,
-    "description": "Heading text with level (h1-h6)",
-    "status": "supported"
-  },
-  {
-    "type": "Label",
-    "name": "Label",
-    "category": "display",
-    "canHaveChildren": true,
-    "description": "Form label element",
-    "status": "supported"
-  },
-  {
-    "type": "Badge",
-    "name": "Badge",
-    "category": "display",
-    "canHaveChildren": true,
-    "description": "Small status or count indicator",
-    "status": "supported"
-  },
-  {
-    "type": "Tag",
-    "name": "Tag",
-    "category": "display",
-    "canHaveChildren": true,
-    "description": "Removable tag or chip",
-    "status": "supported"
-  },
-  {
-    "type": "Code",
-    "name": "Code",
-    "category": "display",
-    "canHaveChildren": true,
-    "description": "Inline or block code display",
-    "status": "supported"
-  },
-  {
-    "type": "Image",
-    "name": "Image",
-    "category": "display",
-    "canHaveChildren": false,
-    "description": "Image element with loading states",
-    "status": "supported"
-  },
-  {
-    "type": "Avatar",
-    "name": "Avatar",
-    "category": "display",
-    "canHaveChildren": false,
-    "description": "User avatar image",
-    "status": "supported"
-  },
-  {
-    "type": "Icon",
-    "name": "Icon",
-    "category": "display",
-    "canHaveChildren": false,
-    "description": "Icon from icon library",
-    "status": "planned"
-  },
-  {
-    "type": "Separator",
-    "name": "Separator",
-    "category": "display",
-    "canHaveChildren": false,
-    "description": "Visual divider line",
-    "status": "supported"
-  },
-  {
-    "type": "Divider",
-    "name": "Divider",
-    "category": "display",
-    "canHaveChildren": false,
-    "description": "Visual section divider",
-    "status": "planned"
-  },
-  {
-    "type": "Progress",
-    "name": "Progress",
-    "category": "display",
-    "canHaveChildren": false,
-    "description": "Progress bar indicator",
-    "status": "supported"
-  },
-  {
-    "type": "ProgressBar",
-    "name": "ProgressBar",
-    "category": "display",
-    "canHaveChildren": false,
-    "description": "Linear progress bar",
-    "status": "planned"
-  },
-  {
-    "type": "CircularProgress",
-    "name": "CircularProgress",
-    "category": "display",
-    "canHaveChildren": false,
-    "description": "Circular progress indicator",
-    "status": "planned"
-  },
-  {
-    "type": "Spinner",
-    "name": "Spinner",
-    "category": "display",
-    "canHaveChildren": false,
-    "description": "Loading spinner",
-    "status": "supported"
-  },
-  {
-    "type": "Skeleton",
-    "name": "Skeleton",
-    "category": "display",
-    "canHaveChildren": false,
-    "description": "Loading skeleton placeholder",
-    "status": "supported"
-  },
-  {
-    "type": "Link",
-    "name": "Link",
-    "category": "navigation",
-    "canHaveChildren": true,
-    "description": "Hyperlink element",
-    "status": "supported"
-  },
-  {
-    "type": "Breadcrumb",
-    "name": "Breadcrumb",
-    "category": "navigation",
-    "canHaveChildren": false,
-    "description": "Navigation breadcrumb trail",
-    "status": "planned"
-  },
-  {
-    "type": "Tabs",
-    "name": "Tabs",
-    "category": "navigation",
-    "canHaveChildren": true,
-    "description": "Tabbed interface container",
-    "status": "supported",
-    "subComponents": [
-      "TabsList",
-      "TabsTrigger",
-      "TabsContent"
-    ]
-  },
-  {
-    "type": "Alert",
-    "name": "Alert",
-    "category": "feedback",
-    "canHaveChildren": true,
-    "description": "Alert notification message",
-    "status": "supported"
-  },
-  {
-    "type": "InfoBox",
-    "name": "InfoBox",
-    "category": "feedback",
-    "canHaveChildren": true,
-    "description": "Information box with icon",
-    "status": "supported"
-  },
-  {
-    "type": "Notification",
-    "name": "Notification",
-    "category": "feedback",
-    "canHaveChildren": true,
-    "description": "Toast notification",
-    "status": "planned"
-  },
-  {
-    "type": "StatusBadge",
-    "name": "StatusBadge",
-    "category": "feedback",
-    "canHaveChildren": false,
-    "description": "Status indicator badge",
-    "status": "supported"
-  },
-  {
-    "type": "StatusIcon",
-    "name": "StatusIcon",
-    "category": "feedback",
-    "canHaveChildren": false,
-    "description": "Status indicator icon",
-    "status": "planned"
-  },
-  {
-    "type": "EmptyState",
-    "name": "EmptyState",
-    "category": "feedback",
-    "canHaveChildren": true,
-    "description": "Empty state placeholder",
-    "status": "supported"
-  },
-  {
-    "type": "ErrorBadge",
-    "name": "ErrorBadge",
-    "category": "feedback",
-    "canHaveChildren": false,
-    "description": "Error state badge",
-    "status": "planned"
-  },
-  {
-    "type": "List",
-    "name": "List",
-    "category": "data",
-    "canHaveChildren": false,
-    "description": "Generic list renderer with custom items",
-    "status": "supported"
-  },
-  {
-    "type": "DataList",
-    "name": "DataList",
-    "category": "data",
-    "canHaveChildren": false,
-    "description": "Styled data list",
-    "status": "planned"
-  },
-  {
-    "type": "Table",
-    "name": "Table",
-    "category": "data",
-    "canHaveChildren": false,
-    "description": "Data table",
-    "status": "supported"
-  },
-  {
-    "type": "DataTable",
-    "name": "DataTable",
-    "category": "data",
-    "canHaveChildren": false,
-    "description": "Advanced data table with sorting and filtering",
-    "status": "planned"
-  },
-  {
-    "type": "KeyValue",
-    "name": "KeyValue",
-    "category": "data",
-    "canHaveChildren": false,
-    "description": "Key-value pair display",
-    "status": "supported"
-  },
-  {
-    "type": "Timeline",
-    "name": "Timeline",
-    "category": "data",
-    "canHaveChildren": false,
-    "description": "Timeline visualization",
-    "status": "planned"
-  },
-  {
-    "type": "StatCard",
-    "name": "StatCard",
-    "category": "data",
-    "canHaveChildren": false,
-    "description": "Statistic card display",
-    "status": "supported"
-  },
-  {
-    "type": "MetricCard",
-    "name": "MetricCard",
-    "category": "data",
-    "canHaveChildren": false,
-    "description": "Metric display card",
-    "status": "planned"
-  },
-  {
-    "type": "DataCard",
-    "name": "DataCard",
-    "category": "custom",
-    "canHaveChildren": false,
-    "description": "Custom data display card",
-    "status": "supported"
-  },
-  {
-    "type": "SearchInput",
-    "name": "SearchInput",
-    "category": "custom",
-    "canHaveChildren": false,
-    "description": "Search input with icon",
-    "status": "supported"
-  },
-  {
-    "type": "ActionBar",
-    "name": "ActionBar",
-    "category": "custom",
-    "canHaveChildren": false,
-    "description": "Action button toolbar",
-    "status": "supported"
-  },
-  {
-    "type": "Dialog",
-    "name": "Dialog",
-    "category": "layout",
-    "canHaveChildren": true,
-    "description": "Modal dialog overlay",
-    "status": "supported"
-  }
-]

package-lock.json

@@ -89,6 +89,7 @@
                 "eslint-plugin-react-refresh": "^0.4.19",
                 "globals": "^17.0.0",
                 "tailwindcss": "^4.1.11",
+                "tsx": "^4.21.0",
                 "typescript": "~5.7.2",
                 "typescript-eslint": "^8.38.0",
                 "vite": "^7.3.1"
@@ -821,16 +822,6 @@
                 "node": ">=6.0.0"
             }
         },
-        "node_modules/@jridgewell/source-map": {
-            "version": "0.3.11",
-            "license": "MIT",
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "@jridgewell/gen-mapping": "^0.3.5",
-                "@jridgewell/trace-mapping": "^0.3.25"
-            }
-        },
         "node_modules/@jridgewell/sourcemap-codec": {
             "version": "1.5.5",
             "license": "MIT"
@@ -4765,12 +4756,6 @@
                 "concat-map": "0.0.1"
             }
         },
-        "node_modules/buffer-from": {
-            "version": "1.1.2",
-            "license": "MIT",
-            "optional": true,
-            "peer": true
-        },
         "node_modules/callsites": {
             "version": "3.1.0",
             "dev": true,
@@ -5700,6 +5685,19 @@
                 "node": ">=6"
             }
         },
+        "node_modules/get-tsconfig": {
+            "version": "4.13.0",
+            "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
+            "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
+            "devOptional": true,
+            "license": "MIT",
+            "dependencies": {
+                "resolve-pkg-maps": "^1.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+            }
+        },
         "node_modules/glob-parent": {
             "version": "6.0.2",
             "dev": true,
@@ -6842,6 +6840,16 @@
                 "node": ">=4"
             }
         },
+        "node_modules/resolve-pkg-maps": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+            "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+            "devOptional": true,
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+            }
+        },
         "node_modules/robust-predicates": {
             "version": "3.0.2",
             "license": "Unlicense"
@@ -6963,15 +6971,6 @@
                 "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
             }
         },
-        "node_modules/source-map": {
-            "version": "0.6.1",
-            "license": "BSD-3-Clause",
-            "optional": true,
-            "peer": true,
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/source-map-js": {
             "version": "1.2.1",
             "license": "BSD-3-Clause",
@@ -6979,16 +6978,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/source-map-support": {
-            "version": "0.5.21",
-            "license": "MIT",
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "buffer-from": "^1.0.0",
-                "source-map": "^0.6.0"
-            }
-        },
         "node_modules/state-local": {
             "version": "1.0.7",
             "license": "MIT"
@@ -7049,30 +7038,6 @@
                 "url": "https://opencollective.com/webpack"
             }
         },
-        "node_modules/terser": {
-            "version": "5.46.0",
-            "license": "BSD-2-Clause",
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "@jridgewell/source-map": "^0.3.3",
-                "acorn": "^8.15.0",
-                "commander": "^2.20.0",
-                "source-map-support": "~0.5.20"
-            },
-            "bin": {
-                "terser": "bin/terser"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/terser/node_modules/commander": {
-            "version": "2.20.3",
-            "license": "MIT",
-            "optional": true,
-            "peer": true
-        },
         "node_modules/three": {
             "version": "0.175.0",
             "license": "MIT"
@@ -7117,6 +7082,40 @@
             "version": "2.8.1",
             "license": "0BSD"
         },
+        "node_modules/tsx": {
+            "version": "4.21.0",
+            "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
+            "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
+            "devOptional": true,
+            "license": "MIT",
+            "dependencies": {
+                "esbuild": "~0.27.0",
+                "get-tsconfig": "^4.7.5"
+            },
+            "bin": {
+                "tsx": "dist/cli.mjs"
+            },
+            "engines": {
+                "node": ">=18.0.0"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.3"
+            }
+        },
+        "node_modules/tsx/node_modules/fsevents": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
         "node_modules/tw-animate-css": {
             "version": "1.4.0",
             "license": "MIT",

package.json

@@ -6,10 +6,12 @@
     "scripts": {
         "dev": "vite",
         "kill": "fuser -k 5000/tcp",
-        "prebuild": "mkdir -p /tmp/dist || true",
+        "predev": "npm run components:generate-types",
+        "prebuild": "npm run components:generate-types && mkdir -p /tmp/dist || true",
         "build": "tsc -b --noCheck && vite build",
-        "lint": "eslint . --fix",
-        "lint:check": "eslint .",
+        "lint": "eslint . --fix && npm run lint:schemas",
+        "lint:check": "eslint . && npm run lint:schemas",
+        "lint:schemas": "node scripts/lint-json-ui-schemas.cjs",
         "optimize": "vite optimize",
         "preview": "vite preview --host 0.0.0.0 --port ${PORT:-80}",
         "test:e2e": "playwright test",
@@ -21,8 +23,11 @@
         "pages:list": "node scripts/list-pages.js",
         "pages:validate": "tsx src/config/validate-config.ts",
         "pages:generate": "node scripts/generate-page.js",
+        "schemas:validate": "tsx scripts/validate-json-schemas.ts",
         "components:list": "node scripts/list-json-components.cjs",
-        "components:scan": "node scripts/scan-and-update-registry.cjs"
+        "components:generate-types": "tsx scripts/generate-json-ui-component-types.ts",
+        "components:scan": "node scripts/scan-and-update-registry.cjs",
+        "components:validate": "node scripts/validate-supported-components.cjs && tsx scripts/validate-json-registry.ts"
     },
     "dependencies": {
         "@heroicons/react": "^2.2.0",
@@ -106,6 +111,7 @@
         "eslint-plugin-react-refresh": "^0.4.19",
         "globals": "^17.0.0",
         "tailwindcss": "^4.1.11",
+        "tsx": "^4.21.0",
         "typescript": "~5.7.2",
         "typescript-eslint": "^8.38.0",
         "vite": "^7.3.1"

public/schemas/analytics-dashboard.json

@@ -39,9 +39,13 @@
     },
     {
       "id": "trends",
-      "type": "computed",
-      "compute": "(data) => ({ filesGrowth: 12, modelsGrowth: -3, componentsGrowth: 8, testsGrowth: 15 })",
-      "dependencies": ["metrics"]
+      "type": "static",
+      "defaultValue": {
+        "filesGrowth": 12,
+        "modelsGrowth": -3,
+        "componentsGrowth": 8,
+        "testsGrowth": 15
+      }
     }
   ],
   "components": [

public/schemas/file-manager.json

@@ -25,9 +25,12 @@
     },
     {
       "id": "filteredFiles",
-      "type": "computed",
-      "compute": "(data) => {\n  if (!data.searchQuery) return data.files;\n  return data.files.filter(f => f.name.toLowerCase().includes(data.searchQuery.toLowerCase()));\n}",
-      "dependencies": ["files", "searchQuery"]
+      "type": "static",
+      "expression": "data.files",
+      "dependencies": [
+        "files",
+        "searchQuery"
+      ]
     }
   ],
   "components": [

schemas/json-components-registry-schema.json

@@ -0,0 +1,124 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "JSON Components Registry",
+  "type": "object",
+  "required": ["version", "description", "components"],
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "version": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
+    "lastUpdated": {
+      "type": "string"
+    },
+    "categories": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "sourceRoots": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "array",
+        "items": {
+          "type": "string"
+        }
+      }
+    },
+    "components": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "required": [
+          "type",
+          "name",
+          "category",
+          "canHaveChildren",
+          "description",
+          "status",
+          "source"
+        ],
+        "properties": {
+          "type": {
+            "type": "string"
+          },
+          "name": {
+            "type": "string"
+          },
+          "export": {
+            "type": "string"
+          },
+          "category": {
+            "type": "string"
+          },
+          "canHaveChildren": {
+            "type": "boolean"
+          },
+          "description": {
+            "type": "string"
+          },
+          "status": {
+            "type": "string"
+          },
+          "source": {
+            "type": "string",
+            "enum": ["atoms", "molecules", "organisms", "ui", "wrappers", "icons"]
+          },
+          "jsonCompatible": {
+            "type": "boolean"
+          },
+          "wrapperRequired": {
+            "type": "boolean"
+          },
+          "wrapperComponent": {
+            "type": "string"
+          },
+          "wrapperFor": {
+            "type": "string"
+          },
+          "load": {
+            "type": "object",
+            "properties": {
+              "path": {
+                "type": "string"
+              },
+              "export": {
+                "type": "string"
+              }
+            },
+            "required": ["export"],
+            "additionalProperties": false
+          },
+          "deprecated": {
+            "type": "object",
+            "properties": {
+              "replacedBy": {
+                "type": "string"
+              },
+              "message": {
+                "type": "string"
+              }
+            },
+            "additionalProperties": false
+          },
+          "metadata": {
+            "type": "object",
+            "additionalProperties": true
+          }
+        },
+        "additionalProperties": true
+      }
+    },
+    "statistics": {
+      "type": "object",
+      "additionalProperties": true
+    }
+  },
+  "additionalProperties": true
+}

scripts/analyze-pure-json-candidates.ts

@@ -0,0 +1,75 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+const componentsToAnalyze = {
+  molecules: ['DataSourceCard', 'EditorToolbar', 'EmptyEditorState', 'MonacoEditorPanel', 'SearchBar'],
+  organisms: ['EmptyCanvasState', 'PageHeader', 'SchemaEditorCanvas', 'SchemaEditorPropertiesPanel',
+              'SchemaEditorSidebar', 'SchemaEditorStatusBar', 'SchemaEditorToolbar', 'ToolbarActions'],
+}
+
+async function analyzeComponent(category: string, component: string): Promise<void> {
+  const tsFile = path.join(rootDir, `src/components/${category}/${component}.tsx`)
+  const content = await fs.readFile(tsFile, 'utf-8')
+
+  // Check if it's pure composition (only uses UI primitives)
+  const hasBusinessLogic = /useState|useEffect|useCallback|useMemo|useReducer|useRef/.test(content)
+  const hasComplexLogic = /if\s*\(.*\{|switch\s*\(|for\s*\(|while\s*\(/.test(content)
+
+  // Extract what it imports
+  const imports = content.match(/import\s+\{[^}]+\}\s+from\s+['"][^'"]+['"]/g) || []
+  const importedComponents = imports.flatMap(imp => {
+    const match = imp.match(/\{([^}]+)\}/)
+    return match ? match[1].split(',').map(s => s.trim()) : []
+  })
+
+  // Check if it only imports from ui/atoms (pure composition)
+  const onlyUIPrimitives = imports.every(imp =>
+    imp.includes('@/components/ui/') ||
+    imp.includes('@/components/atoms/') ||
+    imp.includes('@/lib/utils') ||
+    imp.includes('lucide-react') ||
+    imp.includes('@phosphor-icons')
+  )
+
+  const lineCount = content.split('\n').length
+
+  console.log(`\n📄 ${component}`)
+  console.log(`   Lines: ${lineCount}`)
+  console.log(`   Has hooks: ${hasBusinessLogic ? '❌' : '✅'}`)
+  console.log(`   Has complex logic: ${hasComplexLogic ? '❌' : '✅'}`)
+  console.log(`   Only UI primitives: ${onlyUIPrimitives ? '✅' : '❌'}`)
+  console.log(`   Imports: ${importedComponents.slice(0, 5).join(', ')}${importedComponents.length > 5 ? '...' : ''}`)
+
+  if (!hasBusinessLogic && onlyUIPrimitives && lineCount < 100) {
+    console.log(`   🎯 CANDIDATE FOR PURE JSON`)
+  }
+}
+
+async function main() {
+  console.log('🔍 Analyzing components for pure JSON conversion...\n')
+  console.log('Looking for components that:')
+  console.log('  - No hooks (useState, useEffect, etc.)')
+  console.log('  - No complex logic')
+  console.log('  - Only import UI primitives')
+  console.log('  - Are simple compositions\n')
+
+  for (const [category, components] of Object.entries(componentsToAnalyze)) {
+    console.log(`\n═══ ${category.toUpperCase()} ═══`)
+    for (const component of components) {
+      try {
+        await analyzeComponent(category, component)
+      } catch (e) {
+        console.log(`\n📄 ${component}`)
+        console.log(`   ⚠️  Could not analyze: ${e}`)
+      }
+    }
+  }
+
+  console.log('\n\n✨ Analysis complete!')
+}
+
+main().catch(console.error)

scripts/cleanup-simple-components.ts

@@ -0,0 +1,115 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+/**
+ * List of simple presentational components that can be safely deleted
+ * These were identified by the conversion script as having no hooks or complex logic
+ */
+const SIMPLE_COMPONENTS = {
+  atoms: [
+    'ActionIcon', 'Alert', 'AppLogo', 'Avatar', 'Breadcrumb', 'ButtonGroup',
+    'Chip', 'Code', 'ColorSwatch', 'Container', 'DataList', 'Divider', 'Dot',
+    'EmptyStateIcon', 'FileIcon', 'Flex', 'Grid', 'Heading', 'HelperText',
+    'IconText', 'IconWrapper', 'InfoBox', 'InfoPanel', 'Input', 'Kbd',
+    'KeyValue', 'Label', 'Link', 'List', 'ListItem', 'LiveIndicator',
+    'LoadingSpinner', 'LoadingState', 'MetricDisplay', 'PageHeader', 'Pulse',
+    'ResponsiveGrid', 'ScrollArea', 'SearchInput', 'Section', 'Skeleton',
+    'Spacer', 'Sparkle', 'Spinner', 'StatusIcon', 'TabIcon', 'Tag', 'Text',
+    'TextArea', 'TextGradient', 'TextHighlight', 'Timestamp', 'TreeIcon',
+    // Additional simple ones
+    'AvatarGroup', 'Checkbox', 'Drawer', 'Modal', 'Notification', 'ProgressBar',
+    'Radio', 'Rating', 'Select', 'Slider', 'Stack', 'StepIndicator', 'Stepper',
+    'Table', 'Tabs', 'Timeline', 'Toggle',
+  ],
+  molecules: [
+    'ActionBar', 'AppBranding', 'DataCard', 'DataSourceCard', 'EditorActions',
+    'EditorToolbar', 'EmptyEditorState', 'EmptyState', 'FileTabs', 'LabelWithBadge',
+    'LazyInlineMonacoEditor', 'LazyMonacoEditor', 'LoadingFallback', 'LoadingState',
+    'MonacoEditorPanel', 'NavigationItem', 'PageHeaderContent', 'SearchBar',
+    'StatCard', 'TreeCard', 'TreeListHeader',
+  ],
+  organisms: [
+    'EmptyCanvasState', 'PageHeader', 'SchemaEditorCanvas', 'SchemaEditorPropertiesPanel',
+    'SchemaEditorSidebar', 'SchemaEditorStatusBar', 'SchemaEditorToolbar', 'ToolbarActions',
+  ],
+  ui: [
+    'aspect-ratio', 'avatar', 'badge', 'checkbox', 'collapsible', 'hover-card',
+    'input', 'label', 'popover', 'progress', 'radio-group', 'resizable',
+    'scroll-area', 'separator', 'skeleton', 'switch', 'textarea', 'toggle',
+    // Additional ones
+    'accordion', 'alert', 'button', 'card', 'tabs', 'tooltip',
+  ],
+}
+
+interface DeletionResult {
+  deleted: string[]
+  kept: string[]
+  failed: string[]
+}
+
+/**
+ * Delete simple TypeScript components
+ */
+async function deleteSimpleComponents(): Promise<void> {
+  console.log('🧹 Cleaning up simple TypeScript components...\n')
+
+  const results: DeletionResult = {
+    deleted: [],
+    kept: [],
+    failed: [],
+  }
+
+  // Process each category
+  for (const [category, components] of Object.entries(SIMPLE_COMPONENTS)) {
+    console.log(`📂 Processing ${category}...`)
+
+    const baseDir = path.join(rootDir, `src/components/${category}`)
+
+    for (const component of components) {
+      const fileName = component.endsWith('.tsx') ? component : `${component}.tsx`
+      const filePath = path.join(baseDir, fileName)
+
+      try {
+        await fs.access(filePath)
+        await fs.unlink(filePath)
+        results.deleted.push(`${category}/${fileName}`)
+        console.log(`   ✅ Deleted: ${fileName}`)
+      } catch (error: unknown) {
+        // File doesn't exist or couldn't be deleted
+        if (error instanceof Error && 'code' in error && error.code === 'ENOENT') {
+          results.kept.push(`${category}/${fileName}`)
+          console.log(`   ⏭️  Skipped: ${fileName} (not found)`)
+        } else {
+          results.failed.push(`${category}/${fileName}`)
+          console.log(`   ❌ Failed: ${fileName}`)
+        }
+      }
+    }
+
+    console.log()
+  }
+
+  // Summary
+  console.log('📊 Summary:')
+  console.log(`   Deleted: ${results.deleted.length} files`)
+  console.log(`   Skipped: ${results.kept.length} files`)
+  console.log(`   Failed:  ${results.failed.length} files`)
+
+  if (results.failed.length > 0) {
+    console.log('\n❌ Failed deletions:')
+    results.failed.forEach(f => console.log(`   - ${f}`))
+  }
+
+  console.log('\n✨ Cleanup complete!')
+  console.log('\n📝 Next steps:')
+  console.log('   1. Update index.ts files to remove deleted exports')
+  console.log('   2. Search for direct imports of deleted components')
+  console.log('   3. Run build to check for errors')
+  console.log('   4. Run tests to verify functionality')
+}
+
+deleteSimpleComponents().catch(console.error)

scripts/convert-tsx-to-json.ts

@@ -0,0 +1,262 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+interface ConversionConfig {
+  sourceDir: string
+  targetDir: string
+  category: 'atoms' | 'molecules' | 'organisms' | 'ui'
+}
+
+interface ComponentAnalysis {
+  name: string
+  hasHooks: boolean
+  hasComplexLogic: boolean
+  wrapsUIComponent: boolean
+  uiComponentName?: string
+  defaultProps: Record<string, unknown>
+  isSimplePresentational: boolean
+}
+
+/**
+ * Analyze a TypeScript component file to determine conversion strategy
+ */
+async function analyzeComponent(filePath: string): Promise<ComponentAnalysis> {
+  const content = await fs.readFile(filePath, 'utf-8')
+  const fileName = path.basename(filePath, '.tsx')
+
+  // Check for hooks
+  const hasHooks = /use[A-Z]\w+\(/.test(content) ||
+                  /useState|useEffect|useCallback|useMemo|useRef|useReducer/.test(content)
+
+  // Check for complex logic
+  const hasComplexLogic = hasHooks ||
+                         /switch\s*\(/.test(content) ||
+                         /for\s*\(/.test(content) ||
+                         /while\s*\(/.test(content) ||
+                         content.split('\n').length > 100
+
+  // Check if it wraps a shadcn/ui component
+  const uiImportMatch = content.match(/import\s+\{([^}]+)\}\s+from\s+['"]@\/components\/ui\//)
+  const wrapsUIComponent = !!uiImportMatch
+  const uiComponentName = wrapsUIComponent ? uiImportMatch?.[1].trim() : undefined
+
+  // Extract default props from interface
+  const defaultProps: Record<string, unknown> = {}
+  const propDefaults = content.matchAll(/(\w+)\s*[?]?\s*:\s*([^=\n]+)\s*=\s*['"]?([^'";\n,}]+)['"]?/g)
+  for (const match of propDefaults) {
+    const [, propName, , defaultValue] = match
+    if (propName && defaultValue) {
+      defaultProps[propName] = defaultValue.replace(/['"]/g, '')
+    }
+  }
+
+  // Determine if it's simple presentational
+  const isSimplePresentational = !hasComplexLogic &&
+                                !hasHooks &&
+                                content.split('\n').length < 60
+
+  return {
+    name: fileName,
+    hasHooks,
+    hasComplexLogic,
+    wrapsUIComponent,
+    uiComponentName,
+    defaultProps,
+    isSimplePresentational,
+  }
+}
+
+/**
+ * Generate JSON definition for a component based on analysis
+ */
+function generateJSON(analysis: ComponentAnalysis, category: string): object {
+  // If it wraps a UI component, reference that
+  if (analysis.wrapsUIComponent && analysis.uiComponentName) {
+    return {
+      type: analysis.uiComponentName,
+      props: analysis.defaultProps,
+    }
+  }
+
+  // If it's simple presentational, create a basic structure
+  if (analysis.isSimplePresentational) {
+    return {
+      type: analysis.name,
+      props: analysis.defaultProps,
+    }
+  }
+
+  // If it has hooks or complex logic, mark as needing wrapper
+  if (analysis.hasHooks || analysis.hasComplexLogic) {
+    return {
+      type: analysis.name,
+      jsonCompatible: false,
+      wrapperRequired: true,
+      load: {
+        path: `@/components/${category}/${analysis.name}`,
+        export: analysis.name,
+      },
+      props: analysis.defaultProps,
+      metadata: {
+        notes: analysis.hasHooks ? 'Contains hooks - needs wrapper' : 'Complex logic - needs wrapper',
+      },
+    }
+  }
+
+  // Default case
+  return {
+    type: analysis.name,
+    props: analysis.defaultProps,
+  }
+}
+
+/**
+ * Convert a single TypeScript file to JSON
+ */
+async function convertFile(
+  sourceFile: string,
+  targetDir: string,
+  category: string
+): Promise<{ success: boolean; analysis: ComponentAnalysis }> {
+  try {
+    const analysis = await analyzeComponent(sourceFile)
+    const json = generateJSON(analysis, category)
+
+    // Generate kebab-case filename
+    const jsonFileName = analysis.name
+      .replace(/([A-Z])/g, '-$1')
+      .toLowerCase()
+      .replace(/^-/, '') + '.json'
+
+    const targetFile = path.join(targetDir, jsonFileName)
+
+    await fs.writeFile(targetFile, JSON.stringify(json, null, 2) + '\n')
+
+    return { success: true, analysis }
+  } catch (error) {
+    console.error(`Error converting ${sourceFile}:`, error)
+    return {
+      success: false,
+      analysis: {
+        name: path.basename(sourceFile, '.tsx'),
+        hasHooks: false,
+        hasComplexLogic: false,
+        wrapsUIComponent: false,
+        defaultProps: {},
+        isSimplePresentational: false,
+      }
+    }
+  }
+}
+
+/**
+ * Convert all components in a directory
+ */
+async function convertDirectory(config: ConversionConfig): Promise<void> {
+  const sourceDir = path.join(rootDir, config.sourceDir)
+  const targetDir = path.join(rootDir, config.targetDir)
+
+  console.log(`\n📂 Converting ${config.category} components...`)
+  console.log(`   Source: ${sourceDir}`)
+  console.log(`   Target: ${targetDir}`)
+
+  // Ensure target directory exists
+  await fs.mkdir(targetDir, { recursive: true })
+
+  // Get all TypeScript files
+  const files = await fs.readdir(sourceDir)
+  const tsxFiles = files.filter(f => f.endsWith('.tsx') && !f.includes('.test.') && !f.includes('.stories.'))
+
+  console.log(`   Found ${tsxFiles.length} TypeScript files\n`)
+
+  const results = {
+    total: 0,
+    simple: 0,
+    needsWrapper: 0,
+    wrapsUI: 0,
+    failed: 0,
+  }
+
+  // Convert each file
+  for (const file of tsxFiles) {
+    const sourceFile = path.join(sourceDir, file)
+    const { success, analysis } = await convertFile(sourceFile, targetDir, config.category)
+
+    results.total++
+
+    if (!success) {
+      results.failed++
+      console.log(`   ❌ ${file}`)
+      continue
+    }
+
+    if (analysis.wrapsUIComponent) {
+      results.wrapsUI++
+      console.log(`   🎨 ${file} → ${analysis.name} (wraps UI)`)
+    } else if (analysis.isSimplePresentational) {
+      results.simple++
+      console.log(`   ✅ ${file} → ${analysis.name} (simple)`)
+    } else if (analysis.hasHooks || analysis.hasComplexLogic) {
+      results.needsWrapper++
+      console.log(`   ⚙️  ${file} → ${analysis.name} (needs wrapper)`)
+    } else {
+      results.simple++
+      console.log(`   ✅ ${file} → ${analysis.name}`)
+    }
+  }
+
+  console.log(`\n📊 Results for ${config.category}:`)
+  console.log(`   Total:         ${results.total}`)
+  console.log(`   Simple:        ${results.simple}`)
+  console.log(`   Wraps UI:      ${results.wrapsUI}`)
+  console.log(`   Needs Wrapper: ${results.needsWrapper}`)
+  console.log(`   Failed:        ${results.failed}`)
+}
+
+/**
+ * Main conversion process
+ */
+async function main() {
+  console.log('🚀 Starting TypeScript to JSON conversion...\n')
+
+  const configs: ConversionConfig[] = [
+    {
+      sourceDir: 'src/components/atoms',
+      targetDir: 'src/config/pages/atoms',
+      category: 'atoms',
+    },
+    {
+      sourceDir: 'src/components/molecules',
+      targetDir: 'src/config/pages/molecules',
+      category: 'molecules',
+    },
+    {
+      sourceDir: 'src/components/organisms',
+      targetDir: 'src/config/pages/organisms',
+      category: 'organisms',
+    },
+    {
+      sourceDir: 'src/components/ui',
+      targetDir: 'src/config/pages/ui',
+      category: 'ui',
+    },
+  ]
+
+  for (const config of configs) {
+    await convertDirectory(config)
+  }
+
+  console.log('\n✨ Conversion complete!')
+  console.log('\n📝 Next steps:')
+  console.log('   1. Review generated JSON files')
+  console.log('   2. Manually fix complex components')
+  console.log('   3. Update json-components-registry.json')
+  console.log('   4. Test components render correctly')
+  console.log('   5. Delete old TypeScript files')
+}
+
+main().catch(console.error)

scripts/create-missing-component-jsons.ts

@@ -0,0 +1,91 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+const missingComponents = [
+  'AtomicLibraryShowcase',
+  'CodeEditor',
+  'ComponentTreeBuilder',
+  'ComponentTreeManager',
+  'ConflictResolutionPage',
+  'DockerBuildDebugger',
+  'DocumentationView',
+  'ErrorPanel',
+  'FaviconDesigner',
+  'FeatureIdeaCloud',
+  'FeatureToggleSettings',
+  'JSONComponentTreeManager',
+  'JSONLambdaDesigner',
+  'JSONModelDesigner',
+  'PersistenceDashboard',
+  'PersistenceExample',
+  'ProjectDashboard',
+  'PWASettings',
+  'SassStylesShowcase',
+  'StyleDesigner',
+]
+
+async function createComponentJSON(componentName: string) {
+  // Convert to kebab-case for filename
+  const fileName = componentName
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase()
+    .replace(/^-/, '') + '.json'
+
+  const filePath = path.join(rootDir, 'src/config/pages/components', fileName)
+
+  // Check if component file exists
+  const possiblePaths = [
+    path.join(rootDir, `src/components/${componentName}.tsx`),
+    path.join(rootDir, `src/components/${componentName}/index.tsx`),
+  ]
+
+  let componentPath = ''
+  for (const p of possiblePaths) {
+    try {
+      await fs.access(p)
+      componentPath = `@/components/${componentName}`
+      break
+    } catch {
+      // Continue searching
+    }
+  }
+
+  if (!componentPath) {
+    console.log(`   ⚠️  ${componentName} - Component file not found, creating placeholder`)
+    componentPath = `@/components/${componentName}`
+  }
+
+  const json = {
+    type: componentName,
+    jsonCompatible: false,
+    wrapperRequired: true,
+    load: {
+      path: componentPath,
+      export: componentName,
+    },
+    props: {},
+  }
+
+  await fs.writeFile(filePath, JSON.stringify(json, null, 2) + '\n')
+  console.log(`   ✅ Created: ${fileName}`)
+}
+
+async function main() {
+  console.log('📝 Creating JSON definitions for missing custom components...\n')
+
+  // Ensure directory exists
+  const targetDir = path.join(rootDir, 'src/config/pages/components')
+  await fs.mkdir(targetDir, { recursive: true })
+
+  for (const component of missingComponents) {
+    await createComponentJSON(component)
+  }
+
+  console.log(`\n✨ Created ${missingComponents.length} component JSON files!`)
+}
+
+main().catch(console.error)

scripts/find-component-imports.ts

@@ -0,0 +1,141 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+// Components we want to remove (restored dependencies)
+const targetComponents = {
+  ui: ['accordion', 'alert', 'aspect-ratio', 'avatar', 'badge', 'button', 'card',
+       'checkbox', 'collapsible', 'dialog', 'hover-card', 'input', 'label',
+       'popover', 'progress', 'radio-group', 'resizable', 'scroll-area',
+       'separator', 'skeleton', 'sheet', 'switch', 'tabs', 'textarea', 'toggle', 'tooltip'],
+  molecules: ['DataSourceCard', 'EditorToolbar', 'EmptyEditorState', 'MonacoEditorPanel', 'SearchBar'],
+  organisms: ['EmptyCanvasState', 'PageHeader', 'SchemaEditorCanvas', 'SchemaEditorPropertiesPanel',
+              'SchemaEditorSidebar', 'SchemaEditorStatusBar', 'SchemaEditorToolbar', 'ToolbarActions'],
+  atoms: ['Input']
+}
+
+interface ImportInfo {
+  file: string
+  line: number
+  importStatement: string
+  importedComponents: string[]
+  fromPath: string
+}
+
+async function findAllImports(): Promise<ImportInfo[]> {
+  const imports: ImportInfo[] = []
+
+  const searchDirs = [
+    'src/components',
+    'src/pages',
+    'src/lib',
+    'src'
+  ]
+
+  for (const dir of searchDirs) {
+    const dirPath = path.join(rootDir, dir)
+    try {
+      await processDirectory(dirPath, imports)
+    } catch (e) {
+      // Directory might not exist, skip
+    }
+  }
+
+  return imports
+}
+
+async function processDirectory(dir: string, imports: ImportInfo[]): Promise<void> {
+  const entries = await fs.readdir(dir, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name)
+
+    if (entry.isDirectory() && !entry.name.includes('node_modules')) {
+      await processDirectory(fullPath, imports)
+    } else if (entry.isFile() && (entry.name.endsWith('.tsx') || entry.name.endsWith('.ts'))) {
+      await processFile(fullPath, imports)
+    }
+  }
+}
+
+async function processFile(filePath: string, imports: ImportInfo[]): Promise<void> {
+  const content = await fs.readFile(filePath, 'utf-8')
+  const lines = content.split('\n')
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+
+    // Check for imports from our target components
+    for (const [category, components] of Object.entries(targetComponents)) {
+      for (const component of components) {
+        const patterns = [
+          `from ['"]@/components/${category}/${component}['"]`,
+          `from ['"]./${component}['"]`,
+          `from ['"]../${component}['"]`,
+        ]
+
+        for (const pattern of patterns) {
+          if (new RegExp(pattern).test(line)) {
+            // Extract imported components
+            const importMatch = line.match(/import\s+(?:\{([^}]+)\}|(\w+))\s+from/)
+            const importedComponents = importMatch
+              ? (importMatch[1] || importMatch[2]).split(',').map(s => s.trim())
+              : []
+
+            imports.push({
+              file: filePath.replace(rootDir, '').replace(/\\/g, '/'),
+              line: i + 1,
+              importStatement: line.trim(),
+              importedComponents,
+              fromPath: component
+            })
+          }
+        }
+      }
+    }
+  }
+}
+
+async function main() {
+  console.log('🔍 Finding all imports of target components...\n')
+
+  const imports = await findAllImports()
+
+  if (imports.length === 0) {
+    console.log('✅ No imports found! Components can be safely deleted.')
+    return
+  }
+
+  console.log(`❌ Found ${imports.length} imports that need refactoring:\n`)
+
+  const byFile: Record<string, ImportInfo[]> = {}
+  for (const imp of imports) {
+    if (!byFile[imp.file]) byFile[imp.file] = []
+    byFile[imp.file].push(imp)
+  }
+
+  for (const [file, fileImports] of Object.entries(byFile)) {
+    console.log(`📄 ${file}`)
+    for (const imp of fileImports) {
+      console.log(`   Line ${imp.line}: ${imp.importStatement}`)
+      console.log(`      → Imports: ${imp.importedComponents.join(', ')}`)
+    }
+    console.log()
+  }
+
+  console.log('\n📊 Summary by category:')
+  const byCategory: Record<string, number> = {}
+  for (const imp of imports) {
+    const key = imp.fromPath
+    byCategory[key] = (byCategory[key] || 0) + 1
+  }
+
+  for (const [component, count] of Object.entries(byCategory).sort((a, b) => b[1] - a[1])) {
+    console.log(`   ${component}: ${count} imports`)
+  }
+}
+
+main().catch(console.error)

scripts/generate-json-ui-component-types.ts

@@ -0,0 +1,50 @@
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+interface RegistryComponent {
+  type?: string
+  name?: string
+  export?: string
+}
+
+interface RegistryData {
+  components?: RegistryComponent[]
+}
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+const registryPath = path.join(rootDir, 'json-components-registry.json')
+const outputPath = path.join(rootDir, 'src/types/json-ui-component-types.ts')
+
+const registryData = JSON.parse(fs.readFileSync(registryPath, 'utf8')) as RegistryData
+const components = registryData.components ?? []
+
+const seen = new Set<string>()
+const componentTypes = components.flatMap((component) => {
+  const typeName = component.type ?? component.name ?? component.export
+  if (!typeName || typeof typeName !== 'string') {
+    throw new Error('Registry component is missing a valid type/name/export entry.')
+  }
+  if (seen.has(typeName)) {
+    return []
+  }
+  seen.add(typeName)
+  return [typeName]
+})
+
+const lines = [
+  '// This file is auto-generated by scripts/generate-json-ui-component-types.ts.',
+  '// Do not edit this file directly.',
+  '',
+  'export const jsonUIComponentTypes = [',
+  ...componentTypes.map((typeName) => `  ${JSON.stringify(typeName)},`),
+  '] as const',
+  '',
+  'export type JSONUIComponentType = typeof jsonUIComponentTypes[number]',
+  '',
+]
+
+fs.writeFileSync(outputPath, `${lines.join('\n')}`)
+
+console.log(`✅ Wrote ${componentTypes.length} component types to ${outputPath}`)

scripts/identify-pure-json-components.ts

@@ -0,0 +1,127 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+// Components we restored (the ones we want to potentially convert to JSON)
+const restoredComponents = {
+  ui: ['accordion', 'alert', 'aspect-ratio', 'avatar', 'badge', 'button', 'card',
+       'checkbox', 'collapsible', 'dialog', 'hover-card', 'input', 'label',
+       'popover', 'progress', 'radio-group', 'resizable', 'scroll-area',
+       'separator', 'skeleton', 'sheet', 'switch', 'tabs', 'textarea', 'toggle', 'tooltip'],
+  molecules: ['DataSourceCard', 'EditorToolbar', 'EmptyEditorState', 'MonacoEditorPanel', 'SearchBar'],
+  organisms: ['EmptyCanvasState', 'PageHeader', 'SchemaEditorCanvas', 'SchemaEditorPropertiesPanel',
+              'SchemaEditorSidebar', 'SchemaEditorStatusBar', 'SchemaEditorToolbar', 'ToolbarActions'],
+  atoms: ['Input'],
+}
+
+interface ComponentAnalysis {
+  name: string
+  category: string
+  pureJSONEligible: boolean
+  reasons: string[]
+  complexity: 'simple' | 'medium' | 'complex'
+  hasHooks: boolean
+  hasConditionalLogic: boolean
+  hasHelperFunctions: boolean
+  hasComplexProps: boolean
+  importsCustomComponents: boolean
+  onlyImportsUIorAtoms: boolean
+}
+
+async function analyzeComponent(category: string, component: string): Promise<ComponentAnalysis> {
+  const tsFile = path.join(rootDir, `src/components/${category}/${component}.tsx`)
+  const content = await fs.readFile(tsFile, 'utf-8')
+
+  const hasHooks = /useState|useEffect|useCallback|useMemo|useReducer|useRef|useContext/.test(content)
+  const hasConditionalLogic = /\?|if\s*\(|switch\s*\(/.test(content)
+  const hasHelperFunctions = /(?:const|function)\s+\w+\s*=\s*\([^)]*\)\s*=>/.test(content) && /return\s+\(/.test(content.split('return (')[0] || '')
+  const hasComplexProps = /\.\w+\s*\?/.test(content) || /Object\./.test(content) || /Array\./.test(content)
+
+  // Check imports
+  const importLines = content.match(/import\s+.*?\s+from\s+['"](.*?)['"]/g) || []
+  const importsCustomComponents = importLines.some(line =>
+    /@\/components\/(molecules|organisms)/.test(line)
+  )
+  const onlyImportsUIorAtoms = importLines.every(line => {
+    if (!line.includes('@/components/')) return true
+    return /@\/components\/(ui|atoms)/.test(line)
+  })
+
+  const reasons: string[] = []
+  if (hasHooks) reasons.push('Has React hooks')
+  if (hasHelperFunctions) reasons.push('Has helper functions')
+  if (hasComplexProps) reasons.push('Has complex prop access')
+  if (importsCustomComponents) reasons.push('Imports molecules/organisms')
+  if (!onlyImportsUIorAtoms && !importsCustomComponents) reasons.push('Imports non-UI components')
+
+  // Determine if eligible for pure JSON
+  const pureJSONEligible = !hasHooks && !hasHelperFunctions && !hasComplexProps && onlyImportsUIorAtoms
+
+  // Complexity scoring
+  let complexity: 'simple' | 'medium' | 'complex' = 'simple'
+  if (hasHooks || hasHelperFunctions || hasComplexProps) {
+    complexity = 'complex'
+  } else if (hasConditionalLogic || importsCustomComponents) {
+    complexity = 'medium'
+  }
+
+  return {
+    name: component,
+    category,
+    pureJSONEligible,
+    reasons,
+    complexity,
+    hasHooks,
+    hasConditionalLogic,
+    hasHelperFunctions,
+    hasComplexProps,
+    importsCustomComponents,
+    onlyImportsUIorAtoms,
+  }
+}
+
+async function main() {
+  console.log('🔍 Analyzing restored components for pure JSON eligibility...\\n')
+
+  const eligible: ComponentAnalysis[] = []
+  const ineligible: ComponentAnalysis[] = []
+
+  for (const [category, components] of Object.entries(restoredComponents)) {
+    for (const component of components) {
+      try {
+        const analysis = await analyzeComponent(category, component)
+        if (analysis.pureJSONEligible) {
+          eligible.push(analysis)
+        } else {
+          ineligible.push(analysis)
+        }
+      } catch (e) {
+        console.log(`⚠️  ${component} - Could not analyze: ${e}`)
+      }
+    }
+  }
+
+  console.log(`\\n✅ ELIGIBLE FOR PURE JSON (${eligible.length} components)\\n`)
+  for (const comp of eligible) {
+    console.log(`   ${comp.name} (${comp.category})`)
+    console.log(`      Complexity: ${comp.complexity}`)
+    console.log(`      Conditional: ${comp.hasConditionalLogic ? 'Yes' : 'No'}`)
+  }
+
+  console.log(`\\n❌ MUST STAY TYPESCRIPT (${ineligible.length} components)\\n`)
+  for (const comp of ineligible) {
+    console.log(`   ${comp.name} (${comp.category})`)
+    console.log(`      Complexity: ${comp.complexity}`)
+    console.log(`      Reasons: ${comp.reasons.join(', ')}`)
+  }
+
+  console.log(`\\n📊 Summary:`)
+  console.log(`   Eligible for JSON: ${eligible.length}`)
+  console.log(`   Must stay TypeScript: ${ineligible.length}`)
+  console.log(`   Conversion rate: ${Math.round(eligible.length / (eligible.length + ineligible.length) * 100)}%`)
+}
+
+main().catch(console.error)

scripts/lint-json-ui-schemas.cjs

@@ -0,0 +1,252 @@
+const fs = require('fs')
+const path = require('path')
+
+const rootDir = path.resolve(__dirname, '..')
+const definitionsPath = path.join(rootDir, 'src', 'lib', 'component-definitions.json')
+const schemaDirs = [
+  path.join(rootDir, 'src', 'schemas'),
+  path.join(rootDir, 'public', 'schemas'),
+]
+
+const commonProps = new Set(['className', 'style', 'children'])
+const bindingSourceTypes = new Set(['data', 'bindings', 'state'])
+
+const readJson = (filePath) => JSON.parse(fs.readFileSync(filePath, 'utf8'))
+const fileExists = (filePath) => fs.existsSync(filePath)
+
+const componentDefinitions = readJson(definitionsPath)
+const definitionsByType = new Map(
+  componentDefinitions
+    .filter((definition) => definition.type)
+    .map((definition) => [definition.type, definition])
+)
+
+const errors = []
+
+const reportError = (file, pathLabel, message) => {
+  errors.push({ file, path: pathLabel, message })
+}
+
+const collectSchemaFiles = (dirs) => {
+  const files = []
+  dirs.forEach((dir) => {
+    if (!fileExists(dir)) return
+    fs.readdirSync(dir).forEach((entry) => {
+      if (!entry.endsWith('.json')) return
+      files.push(path.join(dir, entry))
+    })
+  })
+  return files
+}
+
+const isPageSchema = (schema) =>
+  schema
+  && typeof schema === 'object'
+  && schema.layout
+  && Array.isArray(schema.components)
+
+const extractSchemas = (data, filePath) => {
+  if (isPageSchema(data)) {
+    return [{ name: filePath, schema: data }]
+  }
+
+  if (data && typeof data === 'object') {
+    const schemas = Object.entries(data)
+      .filter(([, value]) => isPageSchema(value))
+      .map(([key, value]) => ({ name: `${filePath}:${key}`, schema: value }))
+    if (schemas.length > 0) {
+      return schemas
+    }
+  }
+
+  return []
+}
+
+const validateBindings = (bindings, fileLabel, pathLabel, contextVars, dataSourceIds, definition) => {
+  if (!bindings) return
+
+  const propDefinitions = definition?.props
+    ? new Map(definition.props.map((prop) => [prop.name, prop]))
+    : null
+
+  Object.entries(bindings).forEach(([propName, binding]) => {
+    if (propDefinitions) {
+      if (!propDefinitions.has(propName) && !commonProps.has(propName)) {
+        reportError(fileLabel, `${pathLabel}.bindings.${propName}`, `Invalid binding for unknown prop "${propName}"`)
+        return
+      }
+
+      const propDefinition = propDefinitions.get(propName)
+      if (propDefinition && propDefinition.supportsBinding !== true) {
+        reportError(fileLabel, `${pathLabel}.bindings.${propName}`, `Binding not supported for prop "${propName}"`)
+      }
+    }
+
+    if (binding && typeof binding === 'object') {
+      const sourceType = binding.sourceType ?? 'data'
+      if (!bindingSourceTypes.has(sourceType)) {
+        reportError(
+          fileLabel,
+          `${pathLabel}.bindings.${propName}.sourceType`,
+          `Unsupported binding sourceType "${sourceType}"`
+        )
+      }
+
+      const source = binding.source
+      if (source && sourceType !== 'state') {
+        const isKnownSource = dataSourceIds.has(source) || contextVars.has(source)
+        if (!isKnownSource) {
+          reportError(
+            fileLabel,
+            `${pathLabel}.bindings.${propName}.source`,
+            `Binding source "${source}" is not defined in dataSources or loop context`
+          )
+        }
+      }
+    }
+  })
+}
+
+const validateDataBinding = (dataBinding, fileLabel, pathLabel, contextVars, dataSourceIds) => {
+  if (!dataBinding || typeof dataBinding !== 'object') return
+
+  const sourceType = dataBinding.sourceType ?? 'data'
+  if (!bindingSourceTypes.has(sourceType)) {
+    reportError(
+      fileLabel,
+      `${pathLabel}.dataBinding.sourceType`,
+      `Unsupported dataBinding sourceType "${sourceType}"`
+    )
+  }
+
+  if (dataBinding.source && sourceType !== 'state') {
+    const isKnownSource = dataSourceIds.has(dataBinding.source) || contextVars.has(dataBinding.source)
+    if (!isKnownSource) {
+      reportError(
+        fileLabel,
+        `${pathLabel}.dataBinding.source`,
+        `Data binding source "${dataBinding.source}" is not defined in dataSources or loop context`
+      )
+    }
+  }
+}
+
+const validateRequiredProps = (component, fileLabel, pathLabel, definition, bindings) => {
+  if (!definition?.props) return
+
+  definition.props.forEach((prop) => {
+    if (!prop.required) return
+
+    const hasProp = component.props && Object.prototype.hasOwnProperty.call(component.props, prop.name)
+    const hasBinding = bindings && Object.prototype.hasOwnProperty.call(bindings, prop.name)
+
+    if (!hasProp && (!prop.supportsBinding || !hasBinding)) {
+      reportError(
+        fileLabel,
+        `${pathLabel}.props.${prop.name}`,
+        `Missing required prop "${prop.name}" for component type "${component.type}"`
+      )
+    }
+  })
+}
+
+const validateProps = (component, fileLabel, pathLabel, definition) => {
+  if (!component.props || !definition?.props) return
+
+  const allowedProps = new Set(definition.props.map((prop) => prop.name))
+  commonProps.forEach((prop) => allowedProps.add(prop))
+
+  Object.keys(component.props).forEach((propName) => {
+    if (!allowedProps.has(propName)) {
+      reportError(
+        fileLabel,
+        `${pathLabel}.props.${propName}`,
+        `Invalid prop "${propName}" for component type "${component.type}"`
+      )
+    }
+  })
+}
+
+const lintComponent = (component, fileLabel, pathLabel, contextVars, dataSourceIds) => {
+  if (!component || typeof component !== 'object') return
+
+  if (!component.id) {
+    reportError(fileLabel, pathLabel, 'Missing required component id')
+  }
+
+  if (!component.type) {
+    reportError(fileLabel, pathLabel, 'Missing required component type')
+    return
+  }
+
+  const definition = definitionsByType.get(component.type)
+
+  validateProps(component, fileLabel, pathLabel, definition)
+  validateRequiredProps(component, fileLabel, pathLabel, definition, component.bindings)
+  validateBindings(component.bindings, fileLabel, pathLabel, contextVars, dataSourceIds, definition)
+  validateDataBinding(component.dataBinding, fileLabel, pathLabel, contextVars, dataSourceIds)
+
+  const nextContextVars = new Set(contextVars)
+  const repeatConfig = component.loop ?? component.repeat
+  if (repeatConfig) {
+    if (repeatConfig.itemVar) {
+      nextContextVars.add(repeatConfig.itemVar)
+    }
+    if (repeatConfig.indexVar) {
+      nextContextVars.add(repeatConfig.indexVar)
+    }
+  }
+
+  if (Array.isArray(component.children)) {
+    component.children.forEach((child, index) => {
+      if (typeof child === 'string') return
+      lintComponent(child, fileLabel, `${pathLabel}.children[${index}]`, nextContextVars, dataSourceIds)
+    })
+  }
+
+  if (component.conditional) {
+    const branches = [component.conditional.then, component.conditional.else]
+    branches.forEach((branch, branchIndex) => {
+      if (!branch) return
+      if (typeof branch === 'string') return
+      if (Array.isArray(branch)) {
+        branch.forEach((child, index) => {
+          if (typeof child === 'string') return
+          lintComponent(child, fileLabel, `${pathLabel}.conditional.${branchIndex}[${index}]`, nextContextVars, dataSourceIds)
+        })
+      } else {
+        lintComponent(branch, fileLabel, `${pathLabel}.conditional.${branchIndex}`, nextContextVars, dataSourceIds)
+      }
+    })
+  }
+}
+
+const lintSchema = (schema, fileLabel) => {
+  const dataSourceIds = new Set(
+    Array.isArray(schema.dataSources)
+      ? schema.dataSources.map((source) => source.id).filter(Boolean)
+      : []
+  )
+
+  schema.components.forEach((component, index) => {
+    lintComponent(component, fileLabel, `components[${index}]`, new Set(), dataSourceIds)
+  })
+}
+
+const schemaFiles = collectSchemaFiles(schemaDirs)
+
+schemaFiles.forEach((filePath) => {
+  const data = readJson(filePath)
+  const schemas = extractSchemas(data, filePath)
+  schemas.forEach(({ name, schema }) => lintSchema(schema, name))
+})
+
+if (errors.length > 0) {
+  console.error('JSON UI lint errors found:')
+  errors.forEach((error) => {
+    console.error(`- ${error.file} :: ${error.path} :: ${error.message}`)
+  })
+  process.exit(1)
+}
+
+console.log('JSON UI lint passed.')

scripts/refactor-to-dynamic-imports.ts

@@ -0,0 +1,157 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+/**
+ * Strategy: Replace static imports with dynamic component loading
+ *
+ * Before:
+ *   import { Button } from '@/components/ui/button'
+ *   <Button variant="primary">Click</Button>
+ *
+ * After:
+ *   import { getComponent } from '@/lib/component-loader'
+ *   const Button = getComponent('Button')
+ *   <Button variant="primary">Click</Button>
+ */
+
+interface RefactorTask {
+  file: string
+  replacements: Array<{
+    oldImport: string
+    newImport: string
+    components: string[]
+  }>
+}
+
+const targetComponents = {
+  ui: ['button', 'card', 'badge', 'label', 'input', 'separator', 'scroll-area',
+       'tabs', 'dialog', 'textarea', 'tooltip', 'switch', 'alert', 'skeleton',
+       'progress', 'collapsible', 'resizable', 'popover', 'hover-card', 'checkbox',
+       'accordion', 'aspect-ratio', 'avatar', 'radio-group', 'sheet', 'toggle'],
+  molecules: ['DataSourceCard', 'EditorToolbar', 'EmptyEditorState', 'MonacoEditorPanel', 'SearchBar'],
+  organisms: ['EmptyCanvasState', 'PageHeader', 'SchemaEditorCanvas', 'SchemaEditorPropertiesPanel',
+              'SchemaEditorSidebar', 'SchemaEditorStatusBar', 'SchemaEditorToolbar', 'ToolbarActions'],
+  atoms: ['Input']
+}
+
+export async function refactorFile(filePath: string): Promise<boolean> {
+  let content = await fs.readFile(filePath, 'utf-8')
+  let modified = false
+
+  // Find all imports to replace
+  const componentsToLoad = new Set<string>()
+
+  for (const [category, components] of Object.entries(targetComponents)) {
+    for (const component of components) {
+      const patterns = [
+        new RegExp(`import\\s+\\{([^}]+)\\}\\s+from\\s+['"]@/components/${category}/${component}['"]`, 'g'),
+        new RegExp(`import\\s+(\\w+)\\s+from\\s+['"]@/components/${category}/${component}['"]`, 'g'),
+      ]
+
+      for (const pattern of patterns) {
+        const matches = content.matchAll(pattern)
+        for (const match of matches) {
+          const importedItems = match[1].split(',').map(s => s.trim().split(' as ')[0].trim())
+          importedItems.forEach(item => componentsToLoad.add(item))
+
+          // Remove the import line
+          content = content.replace(match[0], '')
+          modified = true
+        }
+      }
+    }
+  }
+
+  if (!modified) return false
+
+  // Add dynamic component loader import at top
+  const loaderImport = `import { loadComponent } from '@/lib/component-loader'\n`
+
+  // Add component loading statements
+  const componentLoads = Array.from(componentsToLoad)
+    .map(comp => `const ${comp} = loadComponent('${comp}')`)
+    .join('\n')
+
+  // Find first import statement location
+  const firstImportMatch = content.match(/^import\s/m)
+  if (firstImportMatch && firstImportMatch.index !== undefined) {
+    content = content.slice(0, firstImportMatch.index) +
+              loaderImport + '\n' +
+              componentLoads + '\n\n' +
+              content.slice(firstImportMatch.index)
+  }
+
+  await fs.writeFile(filePath, content)
+  return true
+}
+
+async function createComponentLoader() {
+  const loaderPath = path.join(rootDir, 'src/lib/component-loader.ts')
+
+  const loaderContent = `/**
+ * Dynamic Component Loader
+ * Loads components from the registry at runtime instead of static imports
+ */
+
+import { ComponentType, lazy } from 'react'
+
+const componentCache = new Map<string, ComponentType<any>>()
+
+export function loadComponent(componentName: string): ComponentType<any> {
+  if (componentCache.has(componentName)) {
+    return componentCache.get(componentName)!
+  }
+
+  // Try to load from different sources
+  const loaders = [
+    () => import(\`@/components/ui/\${componentName.toLowerCase()}\`),
+    () => import(\`@/components/atoms/\${componentName}\`),
+    () => import(\`@/components/molecules/\${componentName}\`),
+    () => import(\`@/components/organisms/\${componentName}\`),
+  ]
+
+  // Create lazy component
+  const LazyComponent = lazy(async () => {
+    for (const loader of loaders) {
+      try {
+        const module = await loader()
+        return { default: module[componentName] || module.default }
+      } catch (e) {
+        continue
+      }
+    }
+    throw new Error(\`Component \${componentName} not found\`)
+  })
+
+  componentCache.set(componentName, LazyComponent)
+  return LazyComponent
+}
+
+export function getComponent(componentName: string): ComponentType<any> {
+  return loadComponent(componentName)
+}
+`
+
+  await fs.writeFile(loaderPath, loaderContent)
+  console.log('✅ Created component-loader.ts')
+}
+
+async function main() {
+  console.log('🚀 Starting AGGRESSIVE refactoring to eliminate static imports...\n')
+  console.log('⚠️  WARNING: This is a MAJOR refactoring affecting 975+ import statements!\n')
+  console.log('Press Ctrl+C now if you want to reconsider...\n')
+
+  await new Promise(resolve => setTimeout(resolve, 3000))
+
+  console.log('🔧 Creating dynamic component loader...')
+  await createComponentLoader()
+
+  console.log('\n📝 This approach requires significant testing and may break things.')
+  console.log('   Recommendation: Manual refactoring of high-value components instead.\n')
+}
+
+main().catch(console.error)

scripts/update-index-exports.ts

@@ -0,0 +1,76 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+/**
+ * Update index.ts files to remove exports for deleted components
+ */
+async function updateIndexFiles(): Promise<void> {
+  console.log('📝 Updating index.ts files...\n')
+
+  const directories = [
+    'src/components/atoms',
+    'src/components/molecules',
+    'src/components/organisms',
+    'src/components/ui',
+  ]
+
+  for (const dir of directories) {
+    const indexPath = path.join(rootDir, dir, 'index.ts')
+    const dirPath = path.join(rootDir, dir)
+
+    console.log(`📂 Processing ${dir}/index.ts...`)
+
+    try {
+      // Read current index.ts
+      const indexContent = await fs.readFile(indexPath, 'utf-8')
+      const lines = indexContent.split('\n')
+
+      // Get list of existing .tsx files
+      const files = await fs.readdir(dirPath)
+      const existingComponents = new Set(
+        files
+          .filter(f => f.endsWith('.tsx') && f !== 'index.tsx')
+          .map(f => f.replace('.tsx', ''))
+      )
+
+      // Filter out exports for deleted components
+      const updatedLines = lines.filter(line => {
+        // Skip empty lines and comments
+        if (!line.trim() || line.trim().startsWith('//')) {
+          return true
+        }
+
+        // Check if it's an export line
+        const exportMatch = line.match(/export\s+(?:\{([^}]+)\}|.+)\s+from\s+['"]\.\/([^'"]+)['"]/)
+        if (!exportMatch) {
+          return true // Keep non-export lines
+        }
+
+        const componentName = exportMatch[2]
+        const exists = existingComponents.has(componentName)
+
+        if (!exists) {
+          console.log(`   ❌ Removing export: ${componentName}`)
+          return false
+        }
+
+        return true
+      })
+
+      // Write updated index.ts
+      await fs.writeFile(indexPath, updatedLines.join('\n'))
+
+      console.log(`   ✅ Updated ${dir}/index.ts\n`)
+    } catch (error) {
+      console.error(`   ❌ Error processing ${dir}/index.ts:`, error)
+    }
+  }
+
+  console.log('✨ Index files updated!')
+}
+
+updateIndexFiles().catch(console.error)

scripts/update-registry-from-json.ts

@@ -0,0 +1,262 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+interface JSONComponent {
+  type: string
+  jsonCompatible?: boolean
+  wrapperRequired?: boolean
+  load?: {
+    path: string
+    export: string
+    lazy?: boolean
+  }
+  props?: Record<string, unknown>
+  metadata?: {
+    notes?: string
+  }
+}
+
+interface RegistryEntry {
+  type: string
+  name: string
+  category: string
+  canHaveChildren: boolean
+  description: string
+  status: 'supported' | 'deprecated'
+  source: 'atoms' | 'molecules' | 'organisms' | 'ui' | 'wrappers' | 'custom'
+  jsonCompatible: boolean
+  wrapperRequired?: boolean
+  load?: {
+    path: string
+    export: string
+    lazy?: boolean
+  }
+  metadata?: {
+    conversionDate?: string
+    autoGenerated?: boolean
+    notes?: string
+  }
+}
+
+interface Registry {
+  version: string
+  categories: Record<string, string>
+  sourceRoots: Record<string, string[]>
+  components: RegistryEntry[]
+  statistics: {
+    total: number
+    supported: number
+    jsonCompatible: number
+    byCategory: Record<string, number>
+    bySource: Record<string, number>
+  }
+}
+
+/**
+ * Determine component category based on name and source
+ */
+function determineCategory(componentName: string, source: string): string {
+  const name = componentName.toLowerCase()
+
+  // Layout components
+  if (/container|section|stack|flex|grid|layout|panel|sidebar|header|footer/.test(name)) {
+    return 'layout'
+  }
+
+  // Input components
+  if (/input|select|checkbox|radio|slider|switch|form|textarea|date|file|number|password|search/.test(name)) {
+    return 'input'
+  }
+
+  // Navigation components
+  if (/nav|menu|breadcrumb|tab|link|pagination/.test(name)) {
+    return 'navigation'
+  }
+
+  // Feedback components
+  if (/alert|toast|notification|spinner|loading|progress|skeleton|badge|indicator/.test(name)) {
+    return 'feedback'
+  }
+
+  // Data display components
+  if (/table|list|card|chart|graph|tree|timeline|avatar|image/.test(name)) {
+    return 'data'
+  }
+
+  // Display components
+  if (/text|heading|label|code|icon|divider|separator|spacer/.test(name)) {
+    return 'display'
+  }
+
+  // Default to custom for organisms and complex components
+  if (source === 'organisms' || source === 'molecules') {
+    return 'custom'
+  }
+
+  return 'display'
+}
+
+/**
+ * Determine if component can have children
+ */
+function canHaveChildren(componentName: string): boolean {
+  const name = componentName.toLowerCase()
+
+  // These typically don't have children
+  const noChildren = /input|select|checkbox|radio|slider|switch|image|icon|divider|separator|spacer|spinner|progress|badge|dot/
+
+  return !noChildren.test(name)
+}
+
+/**
+ * Generate description for component
+ */
+function generateDescription(componentName: string, category: string): string {
+  const descriptions: Record<string, string> = {
+    layout: 'Layout container component',
+    input: 'Form input component',
+    navigation: 'Navigation component',
+    feedback: 'Feedback and status component',
+    data: 'Data display component',
+    display: 'Display component',
+    custom: 'Custom component',
+  }
+
+  return descriptions[category] || 'Component'
+}
+
+/**
+ * Read all JSON files from a directory and create registry entries
+ */
+async function processDirectory(
+  dir: string,
+  source: 'atoms' | 'molecules' | 'organisms' | 'ui' | 'custom'
+): Promise<RegistryEntry[]> {
+  const entries: RegistryEntry[] = []
+
+  try {
+    const files = await fs.readdir(dir)
+    const jsonFiles = files.filter(f => f.endsWith('.json'))
+
+    for (const file of jsonFiles) {
+      const filePath = path.join(dir, file)
+      const content = await fs.readFile(filePath, 'utf-8')
+      const jsonComponent: JSONComponent = JSON.parse(content)
+
+      const componentName = jsonComponent.type
+      if (!componentName) continue
+
+      const category = determineCategory(componentName, source)
+
+      const entry: RegistryEntry = {
+        type: componentName,
+        name: componentName,
+        category,
+        canHaveChildren: canHaveChildren(componentName),
+        description: generateDescription(componentName, category),
+        status: 'supported',
+        source,
+        jsonCompatible: jsonComponent.jsonCompatible !== false,
+        wrapperRequired: jsonComponent.wrapperRequired || false,
+        metadata: {
+          conversionDate: new Date().toISOString().split('T')[0],
+          autoGenerated: true,
+          notes: jsonComponent.metadata?.notes,
+        },
+      }
+
+      if (jsonComponent.load) {
+        entry.load = jsonComponent.load
+      }
+
+      entries.push(entry)
+    }
+  } catch (error) {
+    console.error(`Error processing ${dir}:`, error)
+  }
+
+  return entries
+}
+
+/**
+ * Update the registry with new components
+ */
+async function updateRegistry() {
+  console.log('📝 Updating json-components-registry.json...\n')
+
+  const registryPath = path.join(rootDir, 'json-components-registry.json')
+
+  // Read existing registry
+  const registryContent = await fs.readFile(registryPath, 'utf-8')
+  const registry: Registry = JSON.parse(registryContent)
+
+  console.log(`   Current components: ${registry.components.length}`)
+
+  // Process each directory
+  const newEntries: RegistryEntry[] = []
+
+  const directories = [
+    { dir: path.join(rootDir, 'src/config/pages/atoms'), source: 'atoms' as const },
+    { dir: path.join(rootDir, 'src/config/pages/molecules'), source: 'molecules' as const },
+    { dir: path.join(rootDir, 'src/config/pages/organisms'), source: 'organisms' as const },
+    { dir: path.join(rootDir, 'src/config/pages/ui'), source: 'ui' as const },
+    { dir: path.join(rootDir, 'src/config/pages/components'), source: 'custom' as const },
+  ]
+
+  for (const { dir, source } of directories) {
+    const entries = await processDirectory(dir, source)
+    newEntries.push(...entries)
+    console.log(`   Processed ${source}: ${entries.length} components`)
+  }
+
+  // Merge with existing components (remove duplicates)
+  const existingTypes = new Set(registry.components.map(c => c.type))
+  const uniqueNewEntries = newEntries.filter(e => !existingTypes.has(e.type))
+
+  console.log(`\n   New unique components: ${uniqueNewEntries.length}`)
+  console.log(`   Skipped duplicates: ${newEntries.length - uniqueNewEntries.length}`)
+
+  // Add new components
+  registry.components.push(...uniqueNewEntries)
+
+  // Update statistics
+  const byCategory: Record<string, number> = {}
+  const bySource: Record<string, number> = {}
+
+  for (const component of registry.components) {
+    byCategory[component.category] = (byCategory[component.category] || 0) + 1
+    bySource[component.source] = (bySource[component.source] || 0) + 1
+  }
+
+  registry.statistics = {
+    total: registry.components.length,
+    supported: registry.components.filter(c => c.status === 'supported').length,
+    jsonCompatible: registry.components.filter(c => c.jsonCompatible).length,
+    byCategory,
+    bySource,
+  }
+
+  // Sort components by type
+  registry.components.sort((a, b) => a.type.localeCompare(b.type))
+
+  // Write updated registry
+  await fs.writeFile(registryPath, JSON.stringify(registry, null, 2) + '\n')
+
+  console.log(`\n✅ Registry updated successfully!`)
+  console.log(`   Total components: ${registry.statistics.total}`)
+  console.log(`   JSON compatible: ${registry.statistics.jsonCompatible}`)
+  console.log(`\n📊 By source:`)
+  for (const [source, count] of Object.entries(bySource)) {
+    console.log(`   ${source.padEnd(12)}: ${count}`)
+  }
+  console.log(`\n📊 By category:`)
+  for (const [category, count] of Object.entries(byCategory)) {
+    console.log(`   ${category.padEnd(12)}: ${count}`)
+  }
+}
+
+updateRegistry().catch(console.error)

scripts/validate-json-registry.ts

@@ -0,0 +1,235 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+import * as PhosphorIcons from '@phosphor-icons/react'
+import { JSONUIShowcase } from '../src/components/JSONUIShowcase'
+
+type ComponentType = unknown
+
+interface JsonRegistryEntry {
+  name?: string
+  type?: string
+  export?: string
+  source?: string
+  status?: string
+  wrapperRequired?: boolean
+  wrapperComponent?: string
+  wrapperFor?: string
+  load?: {
+    export?: string
+  }
+  deprecated?: unknown
+}
+
+interface JsonComponentRegistry {
+  components?: JsonRegistryEntry[]
+}
+
+const sourceAliases: Record<string, Record<string, string>> = {
+  atoms: {
+    PageHeader: 'BasicPageHeader',
+    SearchInput: 'BasicSearchInput',
+  },
+  molecules: {},
+  organisms: {},
+  ui: {
+    Chart: 'ChartContainer',
+    Resizable: 'ResizablePanelGroup',
+  },
+  wrappers: {},
+}
+
+const explicitComponentAllowlist: Record<string, ComponentType> = {
+  JSONUIShowcase,
+}
+
+const getRegistryEntryKey = (entry: JsonRegistryEntry): string | undefined =>
+  entry.name ?? entry.type
+
+const getRegistryEntryExportName = (entry: JsonRegistryEntry): string | undefined =>
+  entry.load?.export ?? entry.export ?? getRegistryEntryKey(entry)
+
+const buildComponentMapFromExports = (
+  exports: Record<string, unknown>
+): Record<string, ComponentType> => {
+  return Object.entries(exports).reduce<Record<string, ComponentType>>((acc, [key, value]) => {
+    if (value && (typeof value === 'function' || typeof value === 'object')) {
+      acc[key] = value as ComponentType
+    }
+    return acc
+  }, {})
+}
+
+const buildComponentMapFromModules = (
+  modules: Record<string, unknown>
+): Record<string, ComponentType> => {
+  return Object.values(modules).reduce<Record<string, ComponentType>>((acc, moduleExports) => {
+    if (!moduleExports || typeof moduleExports !== 'object') {
+      return acc
+    }
+    Object.entries(buildComponentMapFromExports(moduleExports as Record<string, unknown>)).forEach(
+      ([key, component]) => {
+        acc[key] = component
+      }
+    )
+    return acc
+  }, {})
+}
+
+const listFiles = async (options: {
+  directory: string
+  extensions: string[]
+  recursive: boolean
+}): Promise<string[]> => {
+  const { directory, extensions, recursive } = options
+  const entries = await fs.readdir(directory, { withFileTypes: true })
+  const files: string[] = []
+
+  await Promise.all(
+    entries.map(async (entry) => {
+      const fullPath = path.join(directory, entry.name)
+      if (entry.isDirectory()) {
+        if (recursive) {
+          const nested = await listFiles({ directory: fullPath, extensions, recursive })
+          files.push(...nested)
+        }
+        return
+      }
+      if (extensions.includes(path.extname(entry.name))) {
+        files.push(fullPath)
+      }
+    })
+  )
+
+  return files
+}
+
+const importModules = async (files: string[]): Promise<Record<string, unknown>> => {
+  const modules: Record<string, unknown> = {}
+  await Promise.all(
+    files.map(async (file) => {
+      const moduleExports = await import(pathToFileURL(file).href)
+      modules[file] = moduleExports
+    })
+  )
+  return modules
+}
+
+const validateRegistry = async () => {
+  const scriptDir = path.dirname(fileURLToPath(import.meta.url))
+  const rootDir = path.resolve(scriptDir, '..')
+  const registryPath = path.join(rootDir, 'json-components-registry.json')
+
+  const registryRaw = await fs.readFile(registryPath, 'utf8')
+  const registry = JSON.parse(registryRaw) as JsonComponentRegistry
+  const registryEntries = registry.components ?? []
+  const registryEntryByType = new Map(
+    registryEntries
+      .map((entry) => {
+        const entryKey = getRegistryEntryKey(entry)
+        return entryKey ? [entryKey, entry] : null
+      })
+      .filter((entry): entry is [string, JsonRegistryEntry] => Boolean(entry))
+  )
+
+  const sourceConfigs = [
+    {
+      source: 'atoms',
+      directory: path.join(rootDir, 'src/components/atoms'),
+      extensions: ['.tsx'],
+      recursive: false,
+    },
+    {
+      source: 'molecules',
+      directory: path.join(rootDir, 'src/components/molecules'),
+      extensions: ['.tsx'],
+      recursive: false,
+    },
+    {
+      source: 'organisms',
+      directory: path.join(rootDir, 'src/components/organisms'),
+      extensions: ['.tsx'],
+      recursive: false,
+    },
+    {
+      source: 'ui',
+      directory: path.join(rootDir, 'src/components/ui'),
+      extensions: ['.ts', '.tsx'],
+      recursive: true,
+    },
+    {
+      source: 'wrappers',
+      directory: path.join(rootDir, 'src/lib/json-ui/wrappers'),
+      extensions: ['.tsx'],
+      recursive: false,
+    },
+  ]
+
+  const componentMaps: Record<string, Record<string, ComponentType>> = {}
+  await Promise.all(
+    sourceConfigs.map(async (config) => {
+      const files = await listFiles({
+        directory: config.directory,
+        extensions: config.extensions,
+        recursive: config.recursive,
+      })
+      const modules = await importModules(files)
+      componentMaps[config.source] = buildComponentMapFromModules(modules)
+    })
+  )
+
+  componentMaps.icons = buildComponentMapFromExports(PhosphorIcons)
+
+  const errors: string[] = []
+
+  registryEntries.forEach((entry) => {
+    const entryKey = getRegistryEntryKey(entry)
+    const entryExportName = getRegistryEntryExportName(entry)
+
+    if (!entryKey || !entryExportName) {
+      errors.push(`Entry missing name/type/export: ${JSON.stringify(entry)}`)
+      return
+    }
+
+    const source = entry.source
+    if (!source || !componentMaps[source]) {
+      errors.push(`${entryKey}: unknown source "${source ?? 'missing'}"`)
+      return
+    }
+
+    const aliasName = sourceAliases[source]?.[entryKey]
+    const component =
+      componentMaps[source][entryExportName] ??
+      (aliasName ? componentMaps[source][aliasName] : undefined) ??
+      explicitComponentAllowlist[entryKey]
+
+    if (!component) {
+      const aliasNote = aliasName ? ` (alias: ${aliasName})` : ''
+      errors.push(
+        `${entryKey} (${source}) did not resolve export "${entryExportName}"${aliasNote}`
+      )
+    }
+
+    if (entry.wrapperRequired) {
+      if (!entry.wrapperComponent) {
+        errors.push(`${entryKey} (${source}) requires a wrapperComponent but none is defined`)
+        return
+      }
+      if (!registryEntryByType.has(entry.wrapperComponent)) {
+        errors.push(
+          `${entryKey} (${source}) references missing wrapperComponent ${entry.wrapperComponent}`
+        )
+      }
+    }
+  })
+
+  if (errors.length > 0) {
+    console.error('❌ JSON component registry export validation failed:')
+    errors.forEach((error) => console.error(`- ${error}`))
+    process.exit(1)
+  }
+
+  console.log('✅ JSON component registry exports are valid.')
+}
+
+await validateRegistry()

scripts/validate-json-schemas.ts

@@ -0,0 +1,297 @@
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { UIComponentSchema } from '../src/lib/json-ui/schema'
+
+interface ComponentDefinitionProp {
+  name: string
+  type: 'string' | 'number' | 'boolean'
+  options?: Array<string | number | boolean>
+}
+
+interface ComponentDefinition {
+  type: string
+  props?: ComponentDefinitionProp[]
+}
+
+interface ComponentNode {
+  component: Record<string, unknown>
+  path: string
+}
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+const componentDefinitionsPath = path.join(rootDir, 'src/lib/component-definitions.json')
+const componentRegistryPath = path.join(rootDir, 'src/lib/json-ui/component-registry.ts')
+const jsonRegistryPath = path.join(rootDir, 'json-components-registry.json')
+
+const readJson = (filePath: string) => JSON.parse(fs.readFileSync(filePath, 'utf8'))
+const readText = (filePath: string) => fs.readFileSync(filePath, 'utf8')
+
+const componentDefinitions = readJson(componentDefinitionsPath) as ComponentDefinition[]
+const componentDefinitionMap = new Map(componentDefinitions.map((def) => [def.type, def]))
+
+const jsonRegistry = readJson(jsonRegistryPath) as {
+  components?: Array<{ type?: string; name?: string; export?: string }>
+}
+
+const extractObjectLiteral = (content: string, marker: string) => {
+  const markerIndex = content.indexOf(marker)
+  if (markerIndex === -1) {
+    throw new Error(`Unable to locate ${marker} in component registry file`)
+  }
+  const braceStart = content.indexOf('{', markerIndex)
+  if (braceStart === -1) {
+    throw new Error(`Unable to locate opening brace for ${marker}`)
+  }
+  let depth = 0
+  for (let i = braceStart; i < content.length; i += 1) {
+    const char = content[i]
+    if (char === '{') depth += 1
+    if (char === '}') depth -= 1
+    if (depth === 0) {
+      return content.slice(braceStart, i + 1)
+    }
+  }
+  throw new Error(`Unable to locate closing brace for ${marker}`)
+}
+
+const extractKeysFromObjectLiteral = (literal: string) => {
+  const body = literal.trim().replace(/^\{/, '').replace(/\}$/, '')
+  const entries = body
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+  const keys = new Set<string>()
+
+  entries.forEach((entry) => {
+    if (entry.startsWith('...')) {
+      return
+    }
+    const [keyPart] = entry.split(':')
+    const key = keyPart.trim()
+    if (key) {
+      keys.add(key)
+    }
+  })
+
+  return keys
+}
+
+const componentRegistryContent = readText(componentRegistryPath)
+const primitiveKeys = extractKeysFromObjectLiteral(
+  extractObjectLiteral(componentRegistryContent, 'export const primitiveComponents')
+)
+const shadcnKeys = extractKeysFromObjectLiteral(
+  extractObjectLiteral(componentRegistryContent, 'export const shadcnComponents')
+)
+const wrapperKeys = extractKeysFromObjectLiteral(
+  extractObjectLiteral(componentRegistryContent, 'export const jsonWrapperComponents')
+)
+const iconKeys = extractKeysFromObjectLiteral(
+  extractObjectLiteral(componentRegistryContent, 'export const iconComponents')
+)
+
+const registryTypes = new Set<string>(
+  (jsonRegistry.components ?? [])
+    .map((entry) => entry.type ?? entry.name ?? entry.export)
+    .filter((value): value is string => Boolean(value))
+)
+
+const validComponentTypes = new Set<string>([
+  ...primitiveKeys,
+  ...shadcnKeys,
+  ...wrapperKeys,
+  ...iconKeys,
+  ...componentDefinitions.map((def) => def.type),
+  ...registryTypes,
+])
+
+const schemaRoots = [
+  path.join(rootDir, 'src/config'),
+  path.join(rootDir, 'src/data'),
+]
+
+const collectJsonFiles = (dir: string, files: string[] = []) => {
+  if (!fs.existsSync(dir)) {
+    return files
+  }
+  const entries = fs.readdirSync(dir, { withFileTypes: true })
+  entries.forEach((entry) => {
+    const fullPath = path.join(dir, entry.name)
+    if (entry.isDirectory()) {
+      collectJsonFiles(fullPath, files)
+      return
+    }
+    if (entry.isFile() && entry.name.endsWith('.json')) {
+      files.push(fullPath)
+    }
+  })
+  return files
+}
+
+const isComponentNode = (value: unknown): value is Record<string, unknown> => {
+  if (!value || typeof value !== 'object') {
+    return false
+  }
+  const candidate = value as Record<string, unknown>
+  if (typeof candidate.id !== 'string' || typeof candidate.type !== 'string') {
+    return false
+  }
+  return (
+    'props' in candidate ||
+    'children' in candidate ||
+    'className' in candidate ||
+    'bindings' in candidate ||
+    'events' in candidate ||
+    'dataBinding' in candidate ||
+    'style' in candidate
+  )
+}
+
+const findComponents = (value: unknown, currentPath: string): ComponentNode[] => {
+  const components: ComponentNode[] = []
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => {
+      components.push(...findComponents(item, `${currentPath}[${index}]`))
+    })
+    return components
+  }
+  if (!value || typeof value !== 'object') {
+    return components
+  }
+
+  const candidate = value as Record<string, unknown>
+  if (isComponentNode(candidate)) {
+    components.push({ component: candidate, path: currentPath })
+  }
+
+  Object.entries(candidate).forEach(([key, child]) => {
+    const nextPath = currentPath ? `${currentPath}.${key}` : key
+    components.push(...findComponents(child, nextPath))
+  })
+
+  return components
+}
+
+const isTemplateBinding = (value: unknown) =>
+  typeof value === 'string' && value.includes('{{') && value.includes('}}')
+
+const validateProps = (
+  component: Record<string, unknown>,
+  filePath: string,
+  componentPath: string,
+  errors: string[]
+) => {
+  const definition = componentDefinitionMap.get(component.type as string)
+  const props = component.props
+
+  if (!definition || !definition.props || !props || typeof props !== 'object') {
+    return
+  }
+
+  const propDefinitions = new Map(definition.props.map((prop) => [prop.name, prop]))
+
+  Object.entries(props as Record<string, unknown>).forEach(([propName, propValue]) => {
+    const propDefinition = propDefinitions.get(propName)
+    if (!propDefinition) {
+      errors.push(
+        `${filePath} -> ${componentPath}: Unknown prop "${propName}" for component type "${component.type}"`
+      )
+      return
+    }
+
+    const expectedType = propDefinition.type
+    const actualType = Array.isArray(propValue) ? 'array' : typeof propValue
+
+    if (
+      expectedType === 'string' &&
+      actualType !== 'string' &&
+      propValue !== undefined
+    ) {
+      errors.push(
+        `${filePath} -> ${componentPath}: Prop "${propName}" expected string but got ${actualType}`
+      )
+      return
+    }
+
+    if (
+      expectedType === 'number' &&
+      actualType !== 'number' &&
+      !isTemplateBinding(propValue)
+    ) {
+      errors.push(
+        `${filePath} -> ${componentPath}: Prop "${propName}" expected number but got ${actualType}`
+      )
+      return
+    }
+
+    if (
+      expectedType === 'boolean' &&
+      actualType !== 'boolean' &&
+      !isTemplateBinding(propValue)
+    ) {
+      errors.push(
+        `${filePath} -> ${componentPath}: Prop "${propName}" expected boolean but got ${actualType}`
+      )
+      return
+    }
+
+    if (propDefinition.options && propValue !== undefined) {
+      if (!propDefinition.options.includes(propValue as string | number | boolean)) {
+        errors.push(
+          `${filePath} -> ${componentPath}: Prop "${propName}" value must be one of ${propDefinition.options.join(', ')}`
+        )
+      }
+    }
+  })
+}
+
+const validateComponentsInFile = (filePath: string, errors: string[]) => {
+  let parsed: unknown
+  try {
+    parsed = readJson(filePath)
+  } catch (error) {
+    errors.push(`${filePath}: Unable to parse JSON - ${(error as Error).message}`)
+    return
+  }
+
+  const components = findComponents(parsed, 'root')
+  if (components.length === 0) {
+    return
+  }
+
+  components.forEach(({ component, path: componentPath }) => {
+    const parseResult = UIComponentSchema.safeParse(component)
+    if (!parseResult.success) {
+      const issueMessages = parseResult.error.issues
+        .map((issue) => `  - ${issue.path.join('.')}: ${issue.message}`)
+        .join('\n')
+      errors.push(
+        `${filePath} -> ${componentPath}: Schema validation failed\n${issueMessages}`
+      )
+    }
+
+    if (!validComponentTypes.has(component.type as string)) {
+      errors.push(
+        `${filePath} -> ${componentPath}: Unknown component type "${component.type}"`
+      )
+    }
+
+    validateProps(component, filePath, componentPath, errors)
+  })
+}
+
+const jsonFiles = schemaRoots.flatMap((dir) => collectJsonFiles(dir))
+const errors: string[] = []
+
+jsonFiles.forEach((filePath) => validateComponentsInFile(filePath, errors))
+
+if (errors.length > 0) {
+  console.error('JSON schema validation failed:')
+  errors.forEach((error) => console.error(`- ${error}`))
+  process.exit(1)
+}
+
+console.log('JSON schema validation passed.')

scripts/validate-json-ui-registry.cjs

@@ -0,0 +1,82 @@
+#!/usr/bin/env node
+
+const fs = require('fs')
+const path = require('path')
+
+const registryPath = path.join(process.cwd(), 'json-components-registry.json')
+const schemaPath = path.join(process.cwd(), 'src', 'schemas', 'registry-validation.json')
+
+if (!fs.existsSync(registryPath)) {
+  console.error('❌ Could not find json-components-registry.json')
+  process.exit(1)
+}
+
+if (!fs.existsSync(schemaPath)) {
+  console.error('❌ Could not find src/schemas/registry-validation.json')
+  process.exit(1)
+}
+
+const registry = JSON.parse(fs.readFileSync(registryPath, 'utf8'))
+const schema = JSON.parse(fs.readFileSync(schemaPath, 'utf8'))
+
+const primitiveTypes = new Set([
+  'div',
+  'span',
+  'p',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'section',
+  'article',
+  'header',
+  'footer',
+  'main',
+  'aside',
+  'nav',
+])
+
+const registryTypes = new Set()
+
+for (const entry of registry.components || []) {
+  if (entry.source === 'atoms' || entry.source === 'molecules') {
+    const name = entry.export || entry.name || entry.type
+    if (name) {
+      registryTypes.add(name)
+    }
+  }
+}
+
+const schemaTypes = new Set()
+
+const collectTypes = (components) => {
+  if (!components) return
+  if (Array.isArray(components)) {
+    components.forEach(collectTypes)
+    return
+  }
+  if (components.type) {
+    schemaTypes.add(components.type)
+  }
+  if (components.children) {
+    collectTypes(components.children)
+  }
+}
+
+collectTypes(schema.components || [])
+
+const missing = []
+for (const type of schemaTypes) {
+  if (!primitiveTypes.has(type) && !registryTypes.has(type)) {
+    missing.push(type)
+  }
+}
+
+if (missing.length) {
+  console.error(`❌ Missing registry entries for: ${missing.join(', ')}`)
+  process.exit(1)
+}
+
+console.log('✅ JSON UI registry validation passed for primitives and atom/molecule components.')

scripts/validate-supported-components.cjs

@@ -0,0 +1,176 @@
+const fs = require('fs')
+const path = require('path')
+
+const rootDir = path.resolve(__dirname, '..')
+const registryPath = path.join(rootDir, 'json-components-registry.json')
+const definitionsPath = path.join(rootDir, 'src/lib/component-definitions.json')
+const componentTypesPath = path.join(rootDir, 'src/types/json-ui-component-types.ts')
+const uiRegistryPath = path.join(rootDir, 'src/lib/json-ui/component-registry.ts')
+const atomIndexPath = path.join(rootDir, 'src/components/atoms/index.ts')
+const moleculeIndexPath = path.join(rootDir, 'src/components/molecules/index.ts')
+
+const readJson = (filePath) => JSON.parse(fs.readFileSync(filePath, 'utf8'))
+const readText = (filePath) => fs.readFileSync(filePath, 'utf8')
+
+const registryData = readJson(registryPath)
+const supportedComponents = (registryData.components ?? []).filter(
+  (component) => component.status === 'supported'
+)
+
+const componentDefinitions = readJson(definitionsPath)
+const definitionTypes = new Set(componentDefinitions.map((def) => def.type))
+
+const componentTypesContent = readText(componentTypesPath)
+const componentTypeSet = new Set()
+const componentTypeRegex = /"([^"]+)"/g
+let match
+while ((match = componentTypeRegex.exec(componentTypesContent)) !== null) {
+  componentTypeSet.add(match[1])
+}
+
+const extractObjectLiteral = (content, marker) => {
+  const markerIndex = content.indexOf(marker)
+  if (markerIndex === -1) {
+    throw new Error(`Unable to locate ${marker} in component registry file`)
+  }
+  const braceStart = content.indexOf('{', markerIndex)
+  if (braceStart === -1) {
+    throw new Error(`Unable to locate opening brace for ${marker}`)
+  }
+  let depth = 0
+  for (let i = braceStart; i < content.length; i += 1) {
+    const char = content[i]
+    if (char === '{') depth += 1
+    if (char === '}') depth -= 1
+    if (depth === 0) {
+      return content.slice(braceStart, i + 1)
+    }
+  }
+  throw new Error(`Unable to locate closing brace for ${marker}`)
+}
+
+const extractKeysFromObjectLiteral = (literal) => {
+  const body = literal.trim().replace(/^\{/, '').replace(/\}$/, '')
+  const entries = body
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+  const keys = new Set()
+
+  entries.forEach((entry) => {
+    if (entry.startsWith('...')) {
+      return
+    }
+    const [keyPart] = entry.split(':')
+    const key = keyPart.trim()
+    if (key) {
+      keys.add(key)
+    }
+  })
+
+  return keys
+}
+
+const uiRegistryContent = readText(uiRegistryPath)
+const primitiveKeys = extractKeysFromObjectLiteral(
+  extractObjectLiteral(uiRegistryContent, 'export const primitiveComponents')
+)
+const shadcnKeys = extractKeysFromObjectLiteral(
+  extractObjectLiteral(uiRegistryContent, 'export const shadcnComponents')
+)
+const wrapperKeys = extractKeysFromObjectLiteral(
+  extractObjectLiteral(uiRegistryContent, 'export const jsonWrapperComponents')
+)
+const iconKeys = extractKeysFromObjectLiteral(
+  extractObjectLiteral(uiRegistryContent, 'export const iconComponents')
+)
+
+const extractExports = (content) => {
+  const exportsSet = new Set()
+  const exportRegex = /export\s+\{([^}]+)\}\s+from/g
+  let exportMatch
+  while ((exportMatch = exportRegex.exec(content)) !== null) {
+    const names = exportMatch[1]
+      .split(',')
+      .map((name) => name.trim())
+      .filter(Boolean)
+    names.forEach((name) => {
+      const [exportName] = name.split(/\s+as\s+/)
+      if (exportName) {
+        exportsSet.add(exportName.trim())
+      }
+    })
+  }
+  return exportsSet
+}
+
+const atomExports = extractExports(readText(atomIndexPath))
+const moleculeExports = extractExports(readText(moleculeIndexPath))
+
+const uiRegistryKeys = new Set([
+  ...primitiveKeys,
+  ...shadcnKeys,
+  ...wrapperKeys,
+  ...iconKeys,
+  ...atomExports,
+  ...moleculeExports,
+])
+
+const missingInTypes = []
+const missingInDefinitions = []
+const missingInRegistry = []
+
+supportedComponents.forEach((component) => {
+  const typeName = component.type ?? component.name ?? component.export
+  const registryName = component.export ?? component.name ?? component.type
+
+  if (!typeName) {
+    return
+  }
+
+  if (!componentTypeSet.has(typeName)) {
+    missingInTypes.push(typeName)
+  }
+
+  if (!definitionTypes.has(typeName)) {
+    missingInDefinitions.push(typeName)
+  }
+
+  const source = component.source ?? 'unknown'
+  let registryHasComponent = uiRegistryKeys.has(registryName)
+
+  if (source === 'atoms') {
+    registryHasComponent = atomExports.has(registryName)
+  }
+  if (source === 'molecules') {
+    registryHasComponent = moleculeExports.has(registryName)
+  }
+  if (source === 'ui') {
+    registryHasComponent = shadcnKeys.has(registryName)
+  }
+
+  if (!registryHasComponent) {
+    missingInRegistry.push(`${registryName} (${source})`)
+  }
+})
+
+const unique = (list) => Array.from(new Set(list)).sort()
+
+const errors = []
+if (missingInTypes.length > 0) {
+  errors.push(`Missing in ComponentType union: ${unique(missingInTypes).join(', ')}`)
+}
+if (missingInDefinitions.length > 0) {
+  errors.push(`Missing in component definitions: ${unique(missingInDefinitions).join(', ')}`)
+}
+if (missingInRegistry.length > 0) {
+  errors.push(`Missing in UI registry mapping: ${unique(missingInRegistry).join(', ')}`)
+}
+
+if (errors.length > 0) {
+  console.error('Supported component validation failed:')
+  errors.forEach((error) => console.error(`- ${error}`))
+  process.exit(1)
+}
+
+console.log('Supported component validation passed.')

src/components/DataBindingDesigner.tsx

@@ -7,30 +7,9 @@ import { ComponentBindingsCard } from '@/components/data-binding-designer/Compon
 import { HowItWorksCard } from '@/components/data-binding-designer/HowItWorksCard'
 import dataBindingCopy from '@/data/data-binding-designer.json'
 
-interface SeedDataSource extends Omit<DataSource, 'compute'> {
-  computeId?: string
-}
-
-const computeRegistry: Record<string, (data: Record<string, any>) => any> = {
-  displayName: (data) => `Welcome, ${data.userProfile?.name || 'Guest'}!`,
-}
-
-const buildSeedDataSources = (sources: SeedDataSource[]): DataSource[] => {
-  return sources.map((source) => {
-    if (source.type === 'computed' && source.computeId) {
-      return {
-        ...source,
-        compute: computeRegistry[source.computeId],
-      }
-    }
-
-    return source
-  })
-}
-
 export function DataBindingDesigner() {
   const [dataSources, setDataSources] = useState<DataSource[]>(
-    buildSeedDataSources(dataBindingCopy.seed.dataSources as SeedDataSource[]),
+    dataBindingCopy.seed.dataSources as DataSource[],
   )
 
   const [mockComponents] = useState<UIComponent[]>(dataBindingCopy.seed.components)

src/components/JSONConversionShowcase.tsx

@@ -0,0 +1,9 @@
+import { PageRenderer } from '@/lib/json-ui/page-renderer'
+import conversionShowcaseSchema from '@/config/pages/json-conversion-showcase.json'
+import { PageSchema } from '@/types/json-ui'
+
+export function JSONConversionShowcase() {
+  const schema = conversionShowcaseSchema as PageSchema
+
+  return <PageRenderer schema={schema} />
+}

src/components/JSONDemoPage.tsx

@@ -3,45 +3,50 @@ import { toast } from 'sonner'
 import { useKV } from '@/hooks/use-kv'
 import { useState } from 'react'
 import { buildDemoPageSchema, demoCopy, demoInitialTodos } from '@/components/json-demo/schema'
+import { Action } from '@/lib/json-ui/schema'
 
 export function JSONDemoPage() {
   const [todos, setTodos] = useKV('json-demo-todos', demoInitialTodos)
   const [newTodo, setNewTodo] = useState('')
 
-  const handleAction = (handler: any, event?: any) => {
-    switch (handler.action) {
-      case 'add-todo':
-        if (newTodo.trim()) {
-          setTodos((current: any) => [
-            ...current,
-            { id: Date.now(), text: newTodo, completed: false },
-          ])
-          setNewTodo('')
-          toast.success(demoCopy.toastAdded)
-        }
-        break
+  const handleAction = (actions: Action[], event?: any) => {
+    actions.forEach((action) => {
+      const actionKey = action.type === 'custom' ? action.id : action.type
 
-      case 'toggle-todo':
-        setTodos((current: any) =>
-          current.map((todo: any) =>
-            todo.id === handler.params?.id
-              ? { ...todo, completed: !todo.completed }
-              : todo
+      switch (actionKey) {
+        case 'add-todo':
+          if (newTodo.trim()) {
+            setTodos((current: any) => [
+              ...current,
+              { id: Date.now(), text: newTodo, completed: false },
+            ])
+            setNewTodo('')
+            toast.success(demoCopy.toastAdded)
+          }
+          break
+
+        case 'toggle-todo':
+          setTodos((current: any) =>
+            current.map((todo: any) =>
+              todo.id === action.params?.id
+                ? { ...todo, completed: !todo.completed }
+                : todo
+            )
           )
-        )
-        break
+          break
 
-      case 'delete-todo':
-        setTodos((current: any) =>
-          current.filter((todo: any) => todo.id !== handler.params?.id)
-        )
-        toast.success(demoCopy.toastDeleted)
-        break
+        case 'delete-todo':
+          setTodos((current: any) =>
+            current.filter((todo: any) => todo.id !== action.params?.id)
+          )
+          toast.success(demoCopy.toastDeleted)
+          break
 
-      case 'update-input':
-        setNewTodo(event.target.value)
-        break
-    }
+        case 'update-input':
+          setNewTodo(event.target.value)
+          break
+      }
+    })
   }
 
   const pageSchema = buildDemoPageSchema(todos, newTodo)

src/components/JSONLambdaDesigner.tsx

@@ -1,16 +1,9 @@
-import { PageRenderer } from '@/lib/schema-renderer'
+import { PageRenderer } from '@/lib/json-ui/page-renderer'
 import lambdaDesignerSchema from '@/config/pages/lambda-designer.json'
-import { useKV } from '@/hooks/use-kv'
-import { Component as ComponentSchema } from '@/schemas/ui-schema'
+import { PageSchema } from '@/types/json-ui'
 
 export function JSONLambdaDesigner() {
-  const [lambdas] = useKV('app-lambdas', [])
-  
   return (
-    <PageRenderer 
-      schema={lambdaDesignerSchema as ComponentSchema} 
-      data={{ lambdas }}
-      functions={{}}
-    />
+    <PageRenderer schema={lambdaDesignerSchema as PageSchema} />
   )
 }

src/components/JSONSchemaPageLoader.tsx

@@ -0,0 +1,27 @@
+import { PageRenderer } from '@/lib/json-ui/page-renderer'
+import { LoadingFallback } from '@/components/molecules'
+import { useSchemaLoader } from '@/hooks/use-schema-loader'
+
+interface JSONSchemaPageLoaderProps {
+  schemaPath: string
+  data?: Record<string, any>
+  functions?: Record<string, any>
+}
+
+export function JSONSchemaPageLoader({ schemaPath, data, functions }: JSONSchemaPageLoaderProps) {
+  const { schema, loading, error } = useSchemaLoader(schemaPath)
+
+  if (loading) {
+    return <LoadingFallback message={`Loading ${schemaPath}...`} />
+  }
+
+  if (error || !schema) {
+    return (
+      <div className="p-8 text-center">
+        <p className="text-destructive">{error || 'Schema not found'}</p>
+      </div>
+    )
+  }
+
+  return <PageRenderer schema={schema} data={data} functions={functions} />
+}

src/components/JSONUIPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { JSONUIRenderer } from '@/lib/json-ui/renderer'
-import { UIComponent, EventHandler, Layout } from '@/lib/json-ui/schema'
+import { Action, UIComponent, Layout } from '@/lib/json-ui/schema'
 import { toast } from 'sonner'
 
 interface JSONUIPageProps {
@@ -34,88 +34,101 @@ export function JSONUIPage({ jsonConfig }: JSONUIPageProps) {
     }))
   }
 
-  const handleAction = (handler: EventHandler, event?: any) => {
-    console.log('Action triggered:', handler.action, handler.params, event)
-    
-    switch (handler.action) {
-      case 'refresh-data':
-        toast.success('Data refreshed')
-        break
-      case 'create-project':
-        toast.info('Create project clicked')
-        break
-      case 'deploy':
-        toast.info('Deploy clicked')
-        break
-      case 'view-logs':
-        toast.info('View logs clicked')
-        break
-      case 'settings':
-        toast.info('Settings clicked')
-        break
-      case 'add-project':
-        toast.info('Add project clicked')
-        break
-      case 'view-project':
-        toast.info(`View project: ${handler.params?.projectId}`)
-        break
-      case 'edit-project':
-        toast.info(`Edit project: ${handler.params?.projectId}`)
-        break
-      case 'delete-project':
-        toast.error(`Delete project: ${handler.params?.projectId}`)
-        break
-      case 'update-field':
-        if (event?.target) {
-          const { name, value } = event.target
-          updateDataField('formData', name, value)
-        }
-        break
-      case 'update-checkbox':
-        if (handler.params?.field) {
-          updateDataField('formData', handler.params.field, event)
-        }
-        break
-      case 'submit-form':
-        toast.success('Form submitted!')
-        console.log('Form data:', dataMap.formData)
-        break
-      case 'cancel-form':
-        toast.info('Form cancelled')
-        break
-      case 'toggle-dark-mode':
-        updateDataField('settings', 'darkMode', event)
-        toast.success(`Dark mode ${event ? 'enabled' : 'disabled'}`)
-        break
-      case 'toggle-auto-save':
-        updateDataField('settings', 'autoSave', event)
-        toast.success(`Auto-save ${event ? 'enabled' : 'disabled'}`)
-        break
-      case 'toggle-email-notifications':
-        updateDataField('notifications', 'email', event)
-        toast.success(`Email notifications ${event ? 'enabled' : 'disabled'}`)
-        break
-      case 'toggle-push-notifications':
-        updateDataField('notifications', 'push', event)
-        toast.success(`Push notifications ${event ? 'enabled' : 'disabled'}`)
-        break
-      case 'toggle-2fa':
-        updateDataField('security', 'twoFactor', event)
-        toast.success(`Two-factor auth ${event ? 'enabled' : 'disabled'}`)
-        break
-      case 'logout-all-sessions':
-        toast.success('All other sessions logged out')
-        break
-      case 'save-settings':
-        toast.success('Settings saved successfully')
-        console.log('Settings:', dataMap)
-        break
-      case 'reset-settings':
-        toast.info('Settings reset to defaults')
-        break
-      default:
-        console.log('Unhandled action:', handler.action)
-    }
+  const handleAction = (actions: Action[], event?: any) => {
+    actions.forEach((action) => {
+      const actionKey = action.type === 'custom' ? action.id : action.type
+      console.log('Action triggered:', actionKey, action.params, event)
+
+      switch (actionKey) {
+        case 'refresh-data':
+          toast.success('Data refreshed')
+          break
+        case 'create-project':
+          toast.info('Create project clicked')
+          break
+        case 'deploy':
+          toast.info('Deploy clicked')
+          break
+        case 'view-logs':
+          toast.info('View logs clicked')
+          break
+        case 'settings':
+          toast.info('Settings clicked')
+          break
+        case 'add-project':
+          toast.info('Add project clicked')
+          break
+        case 'view-project':
+          toast.info(`View project: ${action.params?.projectId}`)
+          break
+        case 'edit-project':
+          toast.info(`Edit project: ${action.params?.projectId}`)
+          break
+        case 'delete-project':
+          toast.error(`Delete project: ${action.params?.projectId}`)
+          break
+        case 'update-field':
+          if (event?.target) {
+            const { name, value } = event.target
+            updateDataField('formData', name, value)
+          }
+          break
+        case 'update-checkbox':
+          if (action.params?.field) {
+            updateDataField('formData', action.params.field, event)
+          }
+          break
+        case 'update-date':
+          if (action.params?.field) {
+            updateDataField('formData', action.params.field, event)
+          }
+          break
+        case 'update-files':
+          if (action.params?.field) {
+            updateDataField('formData', action.params.field, event)
+          }
+          break
+        case 'submit-form':
+          toast.success('Form submitted!')
+          console.log('Form data:', dataMap.formData)
+          break
+        case 'cancel-form':
+          toast.info('Form cancelled')
+          break
+        case 'toggle-dark-mode':
+          updateDataField('settings', 'darkMode', event)
+          toast.success(`Dark mode ${event ? 'enabled' : 'disabled'}`)
+          break
+        case 'toggle-auto-save':
+          updateDataField('settings', 'autoSave', event)
+          toast.success(`Auto-save ${event ? 'enabled' : 'disabled'}`)
+          break
+        case 'toggle-email-notifications':
+          updateDataField('notifications', 'email', event)
+          toast.success(`Email notifications ${event ? 'enabled' : 'disabled'}`)
+          break
+        case 'toggle-push-notifications':
+          updateDataField('notifications', 'push', event)
+          toast.success(`Push notifications ${event ? 'enabled' : 'disabled'}`)
+          break
+        case 'toggle-2fa':
+          updateDataField('security', 'twoFactor', event)
+          toast.success(`Two-factor auth ${event ? 'enabled' : 'disabled'}`)
+          break
+        case 'logout-all-sessions':
+          toast.success('All other sessions logged out')
+          break
+        case 'save-settings':
+          toast.success('Settings saved successfully')
+          console.log('Settings:', dataMap)
+          break
+        case 'reset-settings':
+          toast.info('Settings reset to defaults')
+          break
+        default:
+          console.log('Unhandled action:', actionKey)
+      }
+    })
   }
 
   if (!jsonConfig.layout) {

src/components/JSONUIShowcase.tsx

@@ -1,37 +1,35 @@
 import { useMemo, useState } from 'react'
 import showcaseCopy from '@/config/ui-examples/showcase.json'
-import dashboardExample from '@/config/ui-examples/dashboard.json'
-import formExample from '@/config/ui-examples/form.json'
-import tableExample from '@/config/ui-examples/table.json'
-import settingsExample from '@/config/ui-examples/settings.json'
-import { FileCode, ChartBar, ListBullets, Table, Gear } from '@phosphor-icons/react'
+import { FileCode, ChartBar, ListBullets, Table, Gear, Clock } from '@phosphor-icons/react'
 import { ShowcaseHeader } from '@/components/json-ui-showcase/ShowcaseHeader'
 import { ShowcaseTabs } from '@/components/json-ui-showcase/ShowcaseTabs'
 import { ShowcaseFooter } from '@/components/json-ui-showcase/ShowcaseFooter'
 import { ShowcaseExample } from '@/components/json-ui-showcase/types'
 
-const exampleConfigs = {
-  dashboard: dashboardExample,
-  form: formExample,
-  table: tableExample,
-  settings: settingsExample,
-}
-
 const exampleIcons = {
   ChartBar,
   ListBullets,
   Table,
+  Clock,
   Gear,
 }
 
+const configModules = import.meta.glob('/src/config/ui-examples/*.json', { eager: true })
+
+const resolveExampleConfig = (configPath: string) => {
+  const moduleEntry = configModules[configPath] as { default: ShowcaseExample['config'] } | undefined
+
+  return moduleEntry?.default ?? {}
+}
+
 export function JSONUIShowcase() {
   const [selectedExample, setSelectedExample] = useState(showcaseCopy.defaultExampleKey)
   const [showJSON, setShowJSON] = useState(false)
 
   const examples = useMemo<ShowcaseExample[]>(() => {
     return showcaseCopy.examples.map((example) => {
-      const icon = exampleIcons[example.icon as keyof typeof exampleIcons] || FileCode
-      const config = exampleConfigs[example.configKey as keyof typeof exampleConfigs]
+      const icon = exampleIcons[example.iconId as keyof typeof exampleIcons] || FileCode
+      const config = resolveExampleConfig(example.configPath)
 
       return {
         key: example.key,

src/components/JSONUIShowcasePage.tsx

@@ -3,11 +3,13 @@ import { AtomicComponentDemo } from '@/components/AtomicComponentDemo'
 import { DashboardDemoPage } from '@/components/DashboardDemoPage'
 import { PageRenderer } from '@/lib/json-ui/page-renderer'
 import { hydrateSchema } from '@/schemas/schema-loader'
+import pageSchemasJson from '@/schemas/page-schemas.json'
 import todoListJson from '@/schemas/todo-list.json'
 import newMoleculesShowcaseJson from '@/schemas/new-molecules-showcase.json'
 
 const todoListSchema = hydrateSchema(todoListJson)
 const newMoleculesShowcaseSchema = hydrateSchema(newMoleculesShowcaseJson)
+const dataComponentsDemoSchema = hydrateSchema(pageSchemasJson.dataComponentsDemoSchema)
 
 export function JSONUIShowcasePage() {
   return (
@@ -24,7 +26,9 @@ export function JSONUIShowcasePage() {
           </div>
           <TabsList className="w-full justify-start">
             <TabsTrigger value="atomic">Atomic Components</TabsTrigger>
+            <TabsTrigger value="feedback">Feedback Atoms</TabsTrigger>
             <TabsTrigger value="molecules">New Molecules</TabsTrigger>
+            <TabsTrigger value="data-components">Data Components</TabsTrigger>
             <TabsTrigger value="dashboard">JSON Dashboard</TabsTrigger>
             <TabsTrigger value="todos">JSON Todo List</TabsTrigger>
           </TabsList>
@@ -34,10 +38,18 @@ export function JSONUIShowcasePage() {
           <TabsContent value="atomic" className="h-full m-0 data-[state=active]:block">
             <AtomicComponentDemo />
           </TabsContent>
+
+          <TabsContent value="feedback" className="h-full m-0 data-[state=active]:block">
+            <PageRenderer schema={feedbackAtomsDemoSchema} />
+          </TabsContent>
           
           <TabsContent value="molecules" className="h-full m-0 data-[state=active]:block">
             <PageRenderer schema={newMoleculesShowcaseSchema} />
           </TabsContent>
+
+          <TabsContent value="data-components" className="h-full m-0 data-[state=active]:block">
+            <PageRenderer schema={dataComponentsDemoSchema} />
+          </TabsContent>
           
           <TabsContent value="dashboard" className="h-full m-0 data-[state=active]:block">
             <DashboardDemoPage />

src/components/ProjectDashboard.tsx

@@ -45,11 +45,12 @@ function getCompletionMessage(score: number): string {
 }
 
 export function ProjectDashboard(props: ProjectDashboardProps) {
+  const completionMetrics = calculateCompletionScore(props)
+
   return (
     <JSONPageRenderer
       schema={dashboardSchema as any}
-      data={props}
-      functions={{ calculateCompletionScore }}
+      data={{ ...props, ...completionMetrics }}
     />
   )
 }

src/components/TemplateExplorer.tsx

@@ -8,8 +8,8 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import { Badge } from '@/components/ui/badge'
 import { useSeedTemplates } from '@/hooks/data/use-seed-templates'
 import { Copy, Download } from '@phosphor-icons/react'
-import { toast } from 'sonner'
 import templateUi from '@/config/template-ui.json'
+import { useTemplateExplorerActions } from '@/hooks/use-template-explorer-actions'
 
 const ui = templateUi.explorer
 
@@ -185,49 +185,11 @@ export function TemplateExplorer() {
 
   const currentTemplate = templates.find(t => t.id === selectedTemplate)
 
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text)
-    toast.success(ui.toasts.copySuccess)
-  }
-
-  const downloadJSON = () => {
-    if (!currentTemplate) return
-
-    const dataStr = JSON.stringify(currentTemplate.data, null, 2)
-    const blob = new Blob([dataStr], { type: 'application/json' })
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement('a')
-    link.href = url
-    link.download = `${currentTemplate.id}-template.json`
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    URL.revokeObjectURL(url)
-
-    toast.success(ui.toasts.downloadSuccess)
-  }
-
-  const exportCurrentData = async () => {
-    const keys = await window.spark.kv.keys()
-    const data: Record<string, any> = {}
-
-    for (const key of keys) {
-      data[key] = await window.spark.kv.get(key)
-    }
-
-    const dataStr = JSON.stringify(data, null, 2)
-    const blob = new Blob([dataStr], { type: 'application/json' })
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement('a')
-    link.href = url
-    link.download = 'current-project-data.json'
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    URL.revokeObjectURL(url)
-
-    toast.success(ui.toasts.exportSuccess)
-  }
+  const {
+    copyToClipboard,
+    downloadJSON,
+    exportCurrentData
+  } = useTemplateExplorerActions(currentTemplate)
 
   if (!currentTemplate) return null
 

src/components/atoms/Breadcrumb.tsx

@@ -8,28 +8,28 @@ interface BreadcrumbItem {
 }
 
 interface BreadcrumbNavProps {
-  items: BreadcrumbItem[]
+  items?: BreadcrumbItem[]
   className?: string
 }
 
-export function BreadcrumbNav({ items, className }: BreadcrumbNavProps) {
+export function BreadcrumbNav({ items = [], className }: BreadcrumbNavProps) {
   return (
     <nav aria-label="Breadcrumb" className={cn('flex items-center gap-2', className)}>
       {items.map((item, index) => {
         const isLast = index === items.length - 1
+        const linkClassName = cn(
+          'text-sm transition-colors',
+          isLast ? 'text-foreground font-medium' : 'text-muted-foreground hover:text-foreground'
+        )
 
         return (
           <div key={index} className="flex items-center gap-2">
-            {item.href || item.onClick ? (
-              <button
-                onClick={item.onClick}
-                className={cn(
-                  'text-sm transition-colors',
-                  isLast
-                    ? 'text-foreground font-medium'
-                    : 'text-muted-foreground hover:text-foreground'
-                )}
-              >
+            {item.href ? (
+              <a href={item.href} onClick={item.onClick} className={linkClassName}>
+                {item.label}
+              </a>
+            ) : item.onClick ? (
+              <button onClick={item.onClick} className={linkClassName}>
                 {item.label}
               </button>
             ) : (
@@ -49,3 +49,5 @@ export function BreadcrumbNav({ items, className }: BreadcrumbNavProps) {
     </nav>
   )
 }
+
+export const Breadcrumb = BreadcrumbNav

src/components/atoms/ComponentPaletteItem.tsx

@@ -1,4 +1,4 @@
-import { ComponentDefinition } from '@/lib/component-definitions'
+import { ComponentDefinition } from '@/lib/component-definition-types'
 import { Card } from '@/components/ui/card'
 import * as Icons from '@phosphor-icons/react'
 import { cn } from '@/lib/utils'

src/components/atoms/ComponentTreeNode.tsx

@@ -1,5 +1,5 @@
 import { UIComponent } from '@/types/json-ui'
-import { getComponentDef } from '@/lib/component-definitions'
+import { getComponentDef } from '@/lib/component-definition-utils'
 import { cn } from '@/lib/utils'
 import * as Icons from '@phosphor-icons/react'
 

src/components/atoms/DataList.tsx

@@ -3,10 +3,11 @@ import { cn } from '@/lib/utils'
 
 export interface DataListProps {
   items: any[]
-  renderItem: (item: any, index: number) => ReactNode
+  renderItem?: (item: any, index: number) => ReactNode
   emptyMessage?: string
   className?: string
   itemClassName?: string
+  itemKey?: string
 }
 
 export function DataList({
@@ -15,6 +16,7 @@ export function DataList({
   emptyMessage = 'No items',
   className,
   itemClassName,
+  itemKey,
 }: DataListProps) {
   if (items.length === 0) {
     return (
@@ -24,11 +26,28 @@ export function DataList({
     )
   }
 
+  const renderFallbackItem = (item: any) => {
+    if (itemKey && item && typeof item === 'object') {
+      const value = item[itemKey]
+      if (value !== undefined && value !== null) {
+        return typeof value === 'string' || typeof value === 'number'
+          ? value
+          : JSON.stringify(value)
+      }
+    }
+
+    if (typeof item === 'string' || typeof item === 'number') {
+      return item
+    }
+
+    return JSON.stringify(item)
+  }
+
   return (
     <div className={cn('space-y-2', className)}>
       {items.map((item, index) => (
         <div key={index} className={cn('transition-colors', itemClassName)}>
-          {renderItem(item, index)}
+          {renderItem ? renderItem(item, index) : renderFallbackItem(item)}
         </div>
       ))}
     </div>

src/components/atoms/DataSourceBadge.tsx

@@ -1,6 +1,6 @@
 import { Badge } from '@/components/ui/badge'
 import { DataSourceType } from '@/types/json-ui'
-import { Database, Function, File } from '@phosphor-icons/react'
+import { Database, File } from '@phosphor-icons/react'
 
 interface DataSourceBadgeProps {
   type: DataSourceType
@@ -13,11 +13,6 @@ const dataSourceConfig = {
     label: 'KV Storage',
     className: 'bg-accent/20 text-accent border-accent/30'
   },
-  computed: {
-    icon: Function,
-    label: 'Computed',
-    className: 'bg-primary/20 text-primary border-primary/30'
-  },
   static: {
     icon: File,
     label: 'Static',

src/components/atoms/index.ts

@@ -1,121 +1,116 @@
-export { AppLogo } from './AppLogo'
-export { TabIcon } from './TabIcon'
-export { StatusIcon } from './StatusIcon'
-export { ErrorBadge } from './ErrorBadge'
-export { IconWrapper } from './IconWrapper'
-export { LoadingSpinner } from './LoadingSpinner'
-export { EmptyStateIcon } from './EmptyStateIcon'
-export { TreeIcon } from './TreeIcon'
-export { FileIcon } from './FileIcon'
-export { ActionIcon } from './ActionIcon'
-export { SeedDataStatus } from './SeedDataStatus'
+// Auto-generated exports - DO NOT EDIT MANUALLY
 export { ActionButton } from './ActionButton'
-export { IconButton } from './IconButton'
-export { DataList } from './DataList'
-export { StatusBadge } from './StatusBadge'
-export { Text } from './Text'
-export { Heading } from './Heading'
-export { List } from './List'
-export { Grid } from './Grid'
-export { DataSourceBadge } from './DataSourceBadge'
-export { BindingIndicator } from './BindingIndicator'
-export { StatCard } from './StatCard'
-export { LoadingState } from './LoadingState'
-export { EmptyState } from './EmptyState'
-export { DetailRow } from './DetailRow'
-export { CompletionCard } from './CompletionCard'
-export { TipsCard } from './TipsCard'
-export { CountBadge } from './CountBadge'
-export { ConfirmButton } from './ConfirmButton'
-export { FilterInput } from './FilterInput'
-export { BasicPageHeader } from './PageHeader'
-export { MetricCard } from './MetricCard'
-
-export { Link } from './Link'
-export { Divider } from './Divider'
-export { Avatar } from './Avatar'
-export { Chip } from './Chip'
-export { Code } from './Code'
-export { Kbd } from './Kbd'
-export { ProgressBar } from './ProgressBar'
-export { Skeleton } from './Skeleton'
-export { Tooltip } from './Tooltip'
+export { ActionCard } from './ActionCard'
+export { ActionIcon } from './ActionIcon'
 export { Alert } from './Alert'
-export { Spinner } from './Spinner'
-export { Dot } from './Dot'
-export { Image } from './Image'
-export { Label } from './Label'
-export { HelperText } from './HelperText'
-export { Container } from './Container'
-export { Section } from './Section'
-export { Stack } from './Stack'
-export { Spacer } from './Spacer'
-export { Timestamp } from './Timestamp'
-export { ScrollArea } from './ScrollArea'
-
-export { Tag } from './Tag'
-export { BreadcrumbNav } from './Breadcrumb'
-export { IconText } from './IconText'
-export { TextArea } from './TextArea'
-export { Input } from './Input'
-export { Toggle } from './Toggle'
-export { RadioGroup } from './Radio'
-export { Checkbox } from './Checkbox'
-export { Slider } from './Slider'
-export { ColorSwatch } from './ColorSwatch'
-export { Stepper } from './Stepper'
-export { Rating } from './Rating'
-export { Timeline } from './Timeline'
-export { FileUpload } from './FileUpload'
-export { Popover } from './Popover'
-export { Tabs } from './Tabs'
-export { Menu } from './Menu'
-export { Accordion } from './Accordion'
-export { Card } from './Card'
-export { Notification } from './Notification'
-export { CopyButton } from './CopyButton'
-export { PasswordInput } from './PasswordInput'
-export { BasicSearchInput } from './SearchInput'
-export { Select } from './Select'
-export { Modal } from './Modal'
-export { Drawer } from './Drawer'
-export { Table } from './Table'
-
-export { Button } from './Button'
+export { AppLogo } from './AppLogo'
+export { Avatar } from './Avatar'
+export { AvatarGroup } from './AvatarGroup'
 export { Badge } from './Badge'
-export { Switch } from './Switch'
-export { Separator } from './Separator'
-export { HoverCard } from './HoverCard'
-export { Calendar } from './Calendar'
+export { BindingIndicator } from './BindingIndicator'
+export { BreadcrumbNav as Breadcrumb, BreadcrumbNav } from './Breadcrumb'
+export { Button } from './Button'
 export { ButtonGroup } from './ButtonGroup'
+export { Calendar } from './Calendar'
+export { Card } from './Card'
+export { Checkbox } from './Checkbox'
+export { Chip } from './Chip'
+export { CircularProgress } from './CircularProgress'
+export { Code } from './Code'
+export { ColorSwatch } from './ColorSwatch'
 export { CommandPalette } from './CommandPalette'
+export { CompletionCard } from './CompletionCard'
+export { ConfirmButton } from './ConfirmButton'
+export { Container } from './Container'
 export { ContextMenu } from './ContextMenu'
 export type { ContextMenuItemType } from './ContextMenu'
+export { CopyButton } from './CopyButton'
+export { CountBadge } from './CountBadge'
+export { DataList } from './DataList'
+export { DataSourceBadge } from './DataSourceBadge'
 export { DataTable } from './DataTable'
 export type { Column } from './DataTable'
-export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './Form'
 export { DatePicker } from './DatePicker'
-export { RangeSlider } from './RangeSlider'
-export { InfoPanel } from './InfoPanel'
-export { ResponsiveGrid } from './ResponsiveGrid'
+export { DetailRow } from './DetailRow'
+export { Divider } from './Divider'
+export { Dot } from './Dot'
+export { Drawer } from './Drawer'
+export { EmptyMessage } from './EmptyMessage'
+export { EmptyState } from './EmptyState'
+export { EmptyStateIcon } from './EmptyStateIcon'
+export { ErrorBadge } from './ErrorBadge'
+export { FileIcon } from './FileIcon'
+export { FileUpload } from './FileUpload'
+export { FilterInput } from './FilterInput'
 export { Flex } from './Flex'
-export { CircularProgress } from './CircularProgress'
-export { AvatarGroup } from './AvatarGroup'
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './Form'
+export { GlowCard } from './GlowCard'
+export { Grid } from './Grid'
+export { Heading } from './Heading'
+export { HelperText } from './HelperText'
+export { HoverCard } from './HoverCard'
+export { IconButton } from './IconButton'
+export { IconText } from './IconText'
+export { IconWrapper } from './IconWrapper'
+export { Image } from './Image'
+export { InfoBox } from './InfoBox'
+export { InfoPanel } from './InfoPanel'
+export { Input } from './Input'
+export { Kbd } from './Kbd'
+export { KeyValue } from './KeyValue'
+export { Label } from './Label'
+export { Link } from './Link'
+export { List } from './List'
+export { ListItem } from './ListItem'
+export { LiveIndicator } from './LiveIndicator'
+export { LoadingSpinner } from './LoadingSpinner'
+export { LoadingState } from './LoadingState'
+export { Menu } from './Menu'
+export { MetricCard } from './MetricCard'
+export { MetricDisplay } from './MetricDisplay'
+export { Modal } from './Modal'
+export { Notification } from './Notification'
 export { NumberInput } from './NumberInput'
-export { TextGradient } from './TextGradient'
+export { BasicPageHeader as PageHeader } from './PageHeader'
+export { PanelHeader } from './PanelHeader'
+export { PasswordInput } from './PasswordInput'
+export { Popover } from './Popover'
+export { ProgressBar } from './ProgressBar'
 export { Pulse } from './Pulse'
 export { QuickActionButton } from './QuickActionButton'
-export { PanelHeader } from './PanelHeader'
-export { LiveIndicator } from './LiveIndicator'
+export { RadioGroup as Radio, RadioGroup } from './Radio'
+export { RangeSlider } from './RangeSlider'
+export { Rating } from './Rating'
+export { ResponsiveGrid } from './ResponsiveGrid'
+export { ScrollArea } from './ScrollArea'
+export { BasicSearchInput as SearchInput, BasicSearchInput } from './SearchInput'
+export { Section } from './Section'
+export { SeedDataStatus } from './SeedDataStatus'
+export { Select } from './Select'
+export { Separator } from './Separator'
+export { Skeleton } from './Skeleton'
+export { Slider } from './Slider'
+export { Spacer } from './Spacer'
 export { Sparkle } from './Sparkle'
-export { GlowCard } from './GlowCard'
-
-export { TextHighlight } from './TextHighlight'
-export { ActionCard } from './ActionCard'
-export { InfoBox } from './InfoBox'
-export { ListItem } from './ListItem'
-export { MetricDisplay } from './MetricDisplay'
-export { KeyValue } from './KeyValue'
-export { EmptyMessage } from './EmptyMessage'
+export { Spinner } from './Spinner'
+export { Stack } from './Stack'
+export { StatCard } from './StatCard'
+export { StatusBadge } from './StatusBadge'
+export { StatusIcon } from './StatusIcon'
 export { StepIndicator } from './StepIndicator'
-
+export { Stepper } from './Stepper'
+export { Switch } from './Switch'
+export { TabIcon } from './TabIcon'
+export { Table } from './Table'
+export { Tabs } from './Tabs'
+export { Tag } from './Tag'
+export { Text } from './Text'
+export { TextArea } from './TextArea'
+export { TextGradient } from './TextGradient'
+export { TextHighlight } from './TextHighlight'
+export { Timeline } from './Timeline'
+export { Timestamp } from './Timestamp'
+export { TipsCard } from './TipsCard'
+export { Toggle } from './Toggle'
+export { Tooltip } from './Tooltip'
+export { TreeIcon } from './TreeIcon'

src/components/atoms/index.ts.backup

@@ -0,0 +1,120 @@
+export { AppLogo } from './AppLogo'
+export { TabIcon } from './TabIcon'
+export { StatusIcon } from './StatusIcon'
+export { ErrorBadge } from './ErrorBadge'
+export { IconWrapper } from './IconWrapper'
+export { LoadingSpinner } from './LoadingSpinner'
+export { EmptyStateIcon } from './EmptyStateIcon'
+export { TreeIcon } from './TreeIcon'
+export { FileIcon } from './FileIcon'
+export { ActionIcon } from './ActionIcon'
+export { SeedDataStatus } from './SeedDataStatus'
+export { ActionButton } from './ActionButton'
+export { IconButton } from './IconButton'
+export { DataList } from './DataList'
+export { StatusBadge } from './StatusBadge'
+export { Text } from './Text'
+export { Heading } from './Heading'
+export { List } from './List'
+export { Grid } from './Grid'
+export { DataSourceBadge } from './DataSourceBadge'
+export { BindingIndicator } from './BindingIndicator'
+export { StatCard } from './StatCard'
+export { LoadingState } from './LoadingState'
+export { EmptyState } from './EmptyState'
+export { DetailRow } from './DetailRow'
+export { CompletionCard } from './CompletionCard'
+export { TipsCard } from './TipsCard'
+export { CountBadge } from './CountBadge'
+export { ConfirmButton } from './ConfirmButton'
+export { FilterInput } from './FilterInput'
+export { BasicPageHeader } from './PageHeader'
+export { MetricCard } from './MetricCard'
+
+export { Link } from './Link'
+export { Divider } from './Divider'
+export { Avatar } from './Avatar'
+export { Chip } from './Chip'
+export { Code } from './Code'
+export { Kbd } from './Kbd'
+export { ProgressBar } from './ProgressBar'
+export { Skeleton } from './Skeleton'
+export { Tooltip } from './Tooltip'
+export { Alert } from './Alert'
+export { Spinner } from './Spinner'
+export { Dot } from './Dot'
+export { Image } from './Image'
+export { Label } from './Label'
+export { HelperText } from './HelperText'
+export { Container } from './Container'
+export { Section } from './Section'
+export { Stack } from './Stack'
+export { Spacer } from './Spacer'
+export { Timestamp } from './Timestamp'
+export { ScrollArea } from './ScrollArea'
+
+export { Tag } from './Tag'
+export { Breadcrumb, BreadcrumbNav } from './Breadcrumb'
+export { IconText } from './IconText'
+export { TextArea } from './TextArea'
+export { Input } from './Input'
+export { Toggle } from './Toggle'
+export { RadioGroup } from './Radio'
+export { Checkbox } from './Checkbox'
+export { Slider } from './Slider'
+export { ColorSwatch } from './ColorSwatch'
+export { Stepper } from './Stepper'
+export { Rating } from './Rating'
+export { Timeline } from './Timeline'
+export { FileUpload } from './FileUpload'
+export { Popover } from './Popover'
+export { Tabs } from './Tabs'
+export { Menu } from './Menu'
+export { Accordion } from './Accordion'
+export { Card } from './Card'
+export { Notification } from './Notification'
+export { CopyButton } from './CopyButton'
+export { PasswordInput } from './PasswordInput'
+export { BasicSearchInput } from './SearchInput'
+export { Select } from './Select'
+export { Modal } from './Modal'
+export { Drawer } from './Drawer'
+export { Table } from './Table'
+
+export { Button } from './Button'
+export { Badge } from './Badge'
+export { Switch } from './Switch'
+export { Separator } from './Separator'
+export { HoverCard } from './HoverCard'
+export { Calendar } from './Calendar'
+export { ButtonGroup } from './ButtonGroup'
+export { CommandPalette } from './CommandPalette'
+export { ContextMenu } from './ContextMenu'
+export type { ContextMenuItemType } from './ContextMenu'
+export { DataTable } from './DataTable'
+export type { Column } from './DataTable'
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './Form'
+export { DatePicker } from './DatePicker'
+export { RangeSlider } from './RangeSlider'
+export { InfoPanel } from './InfoPanel'
+export { ResponsiveGrid } from './ResponsiveGrid'
+export { Flex } from './Flex'
+export { CircularProgress } from './CircularProgress'
+export { AvatarGroup } from './AvatarGroup'
+export { NumberInput } from './NumberInput'
+export { TextGradient } from './TextGradient'
+export { Pulse } from './Pulse'
+export { QuickActionButton } from './QuickActionButton'
+export { PanelHeader } from './PanelHeader'
+export { LiveIndicator } from './LiveIndicator'
+export { Sparkle } from './Sparkle'
+export { GlowCard } from './GlowCard'
+
+export { TextHighlight } from './TextHighlight'
+export { ActionCard } from './ActionCard'
+export { InfoBox } from './InfoBox'
+export { ListItem } from './ListItem'
+export { MetricDisplay } from './MetricDisplay'
+export { KeyValue } from './KeyValue'
+export { EmptyMessage } from './EmptyMessage'
+export { StepIndicator } from './StepIndicator'

src/components/global-search/RecentSearches.tsx

@@ -2,25 +2,7 @@ import { ClockCounterClockwise, X } from '@phosphor-icons/react'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { CommandGroup, CommandItem, CommandSeparator } from '@/components/ui/command'
-
-interface SearchHistoryItem {
-  id: string
-  query: string
-  timestamp: number
-  resultId?: string
-  resultTitle?: string
-  resultCategory?: string
-}
-
-interface SearchResult {
-  id: string
-  title: string
-  subtitle?: string
-  category: string
-  icon: React.ReactNode
-  action: () => void
-  tags?: string[]
-}
+import type { SearchHistoryItem, SearchResult } from './types'
 
 interface RecentSearchesProps {
   recentSearches: Array<{ historyItem: SearchHistoryItem; result?: SearchResult }>

src/components/global-search/SearchResults.tsx

@@ -1,15 +1,6 @@
 import { Badge } from '@/components/ui/badge'
 import { CommandGroup, CommandItem, CommandSeparator } from '@/components/ui/command'
-
-interface SearchResult {
-  id: string
-  title: string
-  subtitle?: string
-  category: string
-  icon: React.ReactNode
-  action: () => void
-  tags?: string[]
-}
+import type { SearchResult } from './types'
 
 interface SearchResultsProps {
   groupedResults: Record<string, SearchResult[]>

src/components/global-search/types.ts

@@ -0,0 +1,18 @@
+export interface SearchResult {
+  id: string
+  title: string
+  subtitle?: string
+  category: string
+  icon: React.ReactNode
+  action: () => void
+  tags?: string[]
+}
+
+export interface SearchHistoryItem {
+  id: string
+  query: string
+  timestamp: number
+  resultId?: string
+  resultTitle?: string
+  resultCategory?: string
+}

src/components/global-search/useGlobalSearchData.tsx

@@ -33,25 +33,7 @@ import {
   Workflow,
 } from '@/types/project'
 import navigationData from '@/data/global-search.json'
-
-export interface SearchResult {
-  id: string
-  title: string
-  subtitle?: string
-  category: string
-  icon: React.ReactNode
-  action: () => void
-  tags?: string[]
-}
-
-export interface SearchHistoryItem {
-  id: string
-  query: string
-  timestamp: number
-  resultId?: string
-  resultTitle?: string
-  resultCategory?: string
-}
+import type { SearchHistoryItem, SearchResult } from './types'
 
 const navigationIconMap = {
   BookOpen,

src/components/json-demo/schema.ts

@@ -49,12 +49,18 @@ const buildTodoItem = (todo: TodoItem, copy: DemoCopy): UIComponent => ({
       props: {
         checked: todo.completed,
       },
-      events: {
-        onCheckedChange: {
-          action: 'toggle-todo',
-          params: { id: todo.id },
+      events: [
+        {
+          event: 'checkedChange',
+          actions: [
+            {
+              id: 'toggle-todo',
+              type: 'custom',
+              params: { id: todo.id },
+            },
+          ],
         },
-      },
+      ],
     },
     {
       id: `text-${todo.id}`,
@@ -72,12 +78,18 @@ const buildTodoItem = (todo: TodoItem, copy: DemoCopy): UIComponent => ({
         size: 'sm',
         children: copy.deleteButtonLabel,
       },
-      events: {
-        onClick: {
-          action: 'delete-todo',
-          params: { id: todo.id },
+      events: [
+        {
+          event: 'click',
+          actions: [
+            {
+              id: 'delete-todo',
+              type: 'custom',
+              params: { id: todo.id },
+            },
+          ],
         },
-      },
+      ],
     },
   ],
 })

src/components/json-page-renderer/SectionRenderer.tsx

@@ -108,7 +108,7 @@ function PageCard({ card, data, functions }: PageCardProps) {
 
   if (card.type === 'gradient-card') {
     const computeFn = functions[card.dataSource?.compute]
-    const computedData = computeFn ? computeFn(data) : {}
+    const computedData = computeFn ? computeFn(data) : data
 
     return (
       <Card className={cn('bg-gradient-to-br border-primary/20', card.gradient)}>

src/components/json-page-renderer/utils.tsx

@@ -1,12 +1,11 @@
 import * as Icons from '@phosphor-icons/react'
+import { evaluateBindingExpression } from '@/lib/json-ui/expression-helpers'
 
 export function resolveBinding(binding: string, data: Record<string, any>): any {
-  try {
-    const func = new Function(...Object.keys(data), `return ${binding}`)
-    return func(...Object.values(data))
-  } catch {
-    return binding
-  }
+  return evaluateBindingExpression(binding, data, {
+    fallback: binding,
+    label: 'json-page-renderer binding',
+  })
 }
 
 export function getIcon(iconName: string, props?: any) {

src/components/molecules/ActionBar.tsx

@@ -1,44 +0,0 @@
-import { ReactNode } from 'react'
-import { Button, Flex, Heading } from '@/components/atoms'
-
-interface ActionBarProps {
-  title?: string
-  actions?: {
-    label: string
-    icon?: ReactNode
-    onClick: () => void
-    variant?: 'default' | 'outline' | 'ghost' | 'destructive'
-    disabled?: boolean
-  }[]
-  children?: ReactNode
-  className?: string
-}
-
-export function ActionBar({ title, actions = [], children, className = '' }: ActionBarProps) {
-  return (
-    <Flex justify="between" align="center" gap="md" className={className}>
-      {title && (
-        <Heading level={2} className="text-xl font-semibold">
-          {title}
-        </Heading>
-      )}
-      {children}
-      {actions.length > 0 && (
-        <Flex gap="sm">
-          {actions.map((action, index) => (
-            <Button
-              key={index}
-              variant={action.variant || 'default'}
-              onClick={action.onClick}
-              disabled={action.disabled}
-              size="sm"
-              leftIcon={action.icon}
-            >
-              {action.label}
-            </Button>
-          ))}
-        </Flex>
-      )}
-    </Flex>
-  )
-}

src/components/molecules/AppBranding.tsx

@@ -1,23 +0,0 @@
-import { AppLogo, Stack, Heading, Text } from '@/components/atoms'
-
-interface AppBrandingProps {
-  title?: string
-  subtitle?: string
-}
-
-export function AppBranding({ 
-  title = 'CodeForge', 
-  subtitle = 'Low-Code Next.js App Builder' 
-}: AppBrandingProps) {
-  return (
-    <Stack direction="horizontal" align="center" spacing="sm" className="flex-1 min-w-0">
-      <AppLogo />
-      <Stack direction="vertical" spacing="none" className="min-w-[100px]">
-        <Heading level={1} className="text-base sm:text-xl font-bold whitespace-nowrap">{title}</Heading>
-        <Text variant="caption" className="hidden sm:block whitespace-nowrap">
-          {subtitle}
-        </Text>
-      </Stack>
-    </Stack>
-  )
-}

src/components/molecules/CanvasRenderer.tsx

@@ -1,6 +1,6 @@
 import { UIComponent } from '@/types/json-ui'
 import { getUIComponent } from '@/lib/json-ui/component-registry'
-import { getComponentDef } from '@/lib/component-definitions'
+import { getComponentDef } from '@/lib/component-definition-utils'
 import { cn } from '@/lib/utils'
 import { createElement, ReactNode } from 'react'
 

src/components/molecules/ComponentBindingDialog.tsx

@@ -1,10 +1,10 @@
-import { useState } from 'react'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { BindingEditor } from '@/components/molecules/BindingEditor'
 import { DataSource, UIComponent } from '@/types/json-ui'
 import { Link } from '@phosphor-icons/react'
+import { useComponentBindingDialog } from '@/hooks/use-component-binding-dialog'
 
 interface ComponentBindingDialogProps {
   open: boolean
@@ -21,18 +21,12 @@ export function ComponentBindingDialog({
   onOpenChange,
   onSave,
 }: ComponentBindingDialogProps) {
-  const [editingComponent, setEditingComponent] = useState<UIComponent | null>(component)
-
-  const handleSave = () => {
-    if (!editingComponent) return
-    onSave(editingComponent)
-    onOpenChange(false)
-  }
-
-  const updateBindings = (bindings: Record<string, any>) => {
-    if (!editingComponent) return
-    setEditingComponent({ ...editingComponent, bindings })
-  }
+  const { editingComponent, handleSave, updateBindings } = useComponentBindingDialog({
+    component,
+    open,
+    onOpenChange,
+    onSave,
+  })
 
   if (!editingComponent) return null
 

src/components/molecules/ComponentPalette.tsx

@@ -1,4 +1,5 @@
-import { ComponentDefinition, getCategoryComponents } from '@/lib/component-definitions'
+import { ComponentDefinition } from '@/lib/component-definition-types'
+import { getCategoryComponents } from '@/lib/component-definition-utils'
 import { ComponentPaletteItem } from '@/components/atoms/ComponentPaletteItem'
 import { PanelHeader, Stack } from '@/components/atoms'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

src/components/molecules/ComponentTree.tsx

@@ -1,9 +1,9 @@
-import { useState, useCallback } from 'react'
 import { UIComponent } from '@/types/json-ui'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { ComponentTreeHeader } from '@/components/molecules/component-tree/ComponentTreeHeader'
 import { ComponentTreeEmptyState } from '@/components/molecules/component-tree/ComponentTreeEmptyState'
 import { ComponentTreeNodes } from '@/components/molecules/component-tree/ComponentTreeNodes'
+import { useComponentTreeExpansion } from '@/hooks/use-component-tree-expansion'
 
 interface ComponentTreeProps {
   components: UIComponent[]
@@ -34,42 +34,8 @@ export function ComponentTree({
   onDragLeave,
   onDrop,
 }: ComponentTreeProps) {
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
-
-  const getAllComponentIds = useCallback((comps: UIComponent[]): string[] => {
-    const ids: string[] = []
-    const traverse = (nodes: UIComponent[]) => {
-      nodes.forEach((comp) => {
-        if (Array.isArray(comp.children) && comp.children.length > 0) {
-          ids.push(comp.id)
-          traverse(comp.children)
-        }
-      })
-    }
-    traverse(comps)
-    return ids
-  }, [])
-
-  const handleExpandAll = useCallback(() => {
-    const allIds = getAllComponentIds(components)
-    setExpandedIds(new Set(allIds))
-  }, [components, getAllComponentIds])
-
-  const handleCollapseAll = useCallback(() => {
-    setExpandedIds(new Set())
-  }, [])
-
-  const toggleExpand = useCallback((id: string) => {
-    setExpandedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) {
-        next.delete(id)
-      } else {
-        next.add(id)
-      }
-      return next
-    })
-  }, [])
+  const { expandedIds, handleExpandAll, handleCollapseAll, toggleExpand } =
+    useComponentTreeExpansion(components)
 
   return (
     <div className="h-full flex flex-col">

src/components/molecules/DataCard.tsx

@@ -1,74 +0,0 @@
-import { Card, Stack, Text, Heading, Skeleton, Flex, IconWrapper } from '@/components/atoms'
-
-interface DataCardProps {
-  title?: string
-  value: string | number
-  description?: string
-  icon?: React.ReactNode
-  trend?: {
-    value: number
-    label: string
-    positive?: boolean
-  }
-  isLoading?: boolean
-  className?: string
-}
-
-export function DataCard({ 
-  title, 
-  value, 
-  description, 
-  icon, 
-  trend,
-  isLoading = false,
-  className = '' 
-}: DataCardProps) {
-  if (isLoading) {
-    return (
-      <Card className={className}>
-        <div className="pt-6 px-6 pb-6">
-          <Stack spacing="sm">
-            <Skeleton className="h-4 w-20" />
-            <Skeleton className="h-8 w-16" />
-            <Skeleton className="h-3 w-24" />
-          </Stack>
-        </div>
-      </Card>
-    )
-  }
-
-  return (
-    <Card className={className}>
-      <div className="pt-6 px-6 pb-6">
-        <Flex justify="between" align="start" gap="md">
-          <Stack spacing="xs" className="flex-1">
-            {title && (
-              <Text variant="muted" className="font-medium">
-                {title}
-              </Text>
-            )}
-            <Heading level={1} className="text-3xl font-bold">
-              {value}
-            </Heading>
-            {description && (
-              <Text variant="caption">
-                {description}
-              </Text>
-            )}
-            {trend && (
-              <Text 
-                variant="small" 
-                className={trend.positive ? 'text-green-500' : 'text-red-500'}
-              >
-                {trend.positive ? '↑' : '↓'} {trend.value} {trend.label}
-              </Text>
-            )}
-          </Stack>
-          {icon && (
-            <IconWrapper icon={icon} size="lg" variant="muted" />
-          )}
-        </Flex>
-      </div>
-    </Card>
-  )
-}

src/components/molecules/DataSourceCard.tsx

@@ -1,7 +1,7 @@
-import { Card, Badge, IconButton, Stack, Flex, Text } from '@/components/atoms'
+import { Card, IconButton, Stack, Flex, Text } from '@/components/atoms'
 import { DataSourceBadge } from '@/components/atoms/DataSourceBadge'
 import { DataSource } from '@/types/json-ui'
-import { Pencil, Trash, ArrowsDownUp } from '@phosphor-icons/react'
+import { Pencil, Trash } from '@phosphor-icons/react'
 
 interface DataSourceCardProps {
   dataSource: DataSource
@@ -11,13 +11,6 @@ interface DataSourceCardProps {
 }
 
 export function DataSourceCard({ dataSource, dependents = [], onEdit, onDelete }: DataSourceCardProps) {
-  const getDependencyCount = () => {
-    if (dataSource.type === 'computed') {
-      return dataSource.dependencies?.length || 0
-    }
-    return 0
-  }
-
   const renderTypeSpecificInfo = () => {
     if (dataSource.type === 'kv') {
       return (
@@ -27,18 +20,6 @@ export function DataSourceCard({ dataSource, dependents = [], onEdit, onDelete }
       )
     }
     
-    if (dataSource.type === 'computed') {
-      const depCount = getDependencyCount()
-      return (
-        <Flex align="center" gap="sm">
-          <Badge variant="outline" className="text-xs">
-            <ArrowsDownUp className="w-3 h-3 mr-1" />
-            {depCount} {depCount === 1 ? 'dependency' : 'dependencies'}
-          </Badge>
-        </Flex>
-      )
-    }
-    
     return null
   }
 
@@ -59,7 +40,7 @@ export function DataSourceCard({ dataSource, dependents = [], onEdit, onDelete }
             {dependents.length > 0 && (
               <div className="pt-2 border-t border-border/50">
                 <Text variant="caption">
-                  Used by {dependents.length} computed {dependents.length === 1 ? 'source' : 'sources'}
+                  Used by {dependents.length} dependent {dependents.length === 1 ? 'source' : 'sources'}
                 </Text>
               </div>
             )}

src/components/molecules/DataSourceEditorDialog.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { DataSource } from '@/types/json-ui'
@@ -6,13 +5,12 @@ import { DataSourceBadge } from '@/components/atoms/DataSourceBadge'
 import { DataSourceIdField } from '@/components/molecules/data-source-editor/DataSourceIdField'
 import { KvSourceFields } from '@/components/molecules/data-source-editor/KvSourceFields'
 import { StaticSourceFields } from '@/components/molecules/data-source-editor/StaticSourceFields'
-import { ComputedSourceFields } from '@/components/molecules/data-source-editor/ComputedSourceFields'
 import dataSourceEditorCopy from '@/data/data-source-editor-dialog.json'
+import { useDataSourceEditor } from '@/hooks/data/use-data-source-editor'
 
 interface DataSourceEditorDialogProps {
   open: boolean
   dataSource: DataSource | null
-  allDataSources: DataSource[]
   onOpenChange: (open: boolean) => void
   onSave: (dataSource: DataSource) => void
 }
@@ -20,15 +18,13 @@ interface DataSourceEditorDialogProps {
 export function DataSourceEditorDialog({
   open,
   dataSource,
-  allDataSources,
   onOpenChange,
   onSave,
 }: DataSourceEditorDialogProps) {
-  const [editingSource, setEditingSource] = useState<DataSource | null>(dataSource)
-
-  useEffect(() => {
-    setEditingSource(dataSource)
-  }, [dataSource])
+  const {
+    editingSource,
+    updateField,
+  } = useDataSourceEditor(dataSource)
 
   const handleSave = () => {
     if (!editingSource) return
@@ -36,34 +32,8 @@ export function DataSourceEditorDialog({
     onOpenChange(false)
   }
 
-  const updateField = <K extends keyof DataSource>(field: K, value: DataSource[K]) => {
-    if (!editingSource) return
-    setEditingSource({ ...editingSource, [field]: value })
-  }
-
-  const addDependency = (depId: string) => {
-    if (!editingSource || editingSource.type !== 'computed') return
-    const deps = editingSource.dependencies || []
-    if (!deps.includes(depId)) {
-      updateField('dependencies', [...deps, depId])
-    }
-  }
-
-  const removeDependency = (depId: string) => {
-    if (!editingSource || editingSource.type !== 'computed') return
-    const deps = editingSource.dependencies || []
-    updateField('dependencies', deps.filter(d => d !== depId))
-  }
-
   if (!editingSource) return null
 
-  const availableDeps = allDataSources.filter(
-    ds => ds.id !== editingSource.id && ds.type !== 'computed',
-  )
-
-  const selectedDeps = editingSource.dependencies || []
-  const unselectedDeps = availableDeps.filter(ds => !selectedDeps.includes(ds.id))
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
@@ -102,18 +72,6 @@ export function DataSourceEditorDialog({
             />
           )}
 
-          {editingSource.type === 'computed' && (
-            <ComputedSourceFields
-              editingSource={editingSource}
-              availableDeps={availableDeps}
-              selectedDeps={selectedDeps}
-              unselectedDeps={unselectedDeps}
-              copy={dataSourceEditorCopy.computed}
-              onUpdateField={updateField}
-              onAddDependency={addDependency}
-              onRemoveDependency={removeDependency}
-            />
-          )}
         </div>
 
         <DialogFooter>

src/components/molecules/EmptyState.tsx

@@ -1,29 +0,0 @@
-import { EmptyStateIcon, Stack, Heading, Text } from '@/components/atoms'
-
-interface EmptyStateProps {
-  icon: React.ReactNode
-  title: string
-  description?: string
-  action?: React.ReactNode
-}
-
-export function EmptyState({ icon, title, description, action }: EmptyStateProps) {
-  return (
-    <Stack 
-      direction="vertical" 
-      align="center" 
-      justify="center" 
-      spacing="md" 
-      className="py-12 px-4 text-center"
-    >
-      <EmptyStateIcon icon={icon} />
-      <Stack direction="vertical" spacing="sm">
-        <Heading level={3} className="text-lg">{title}</Heading>
-        {description && (
-          <Text variant="muted" className="max-w-md">{description}</Text>
-        )}
-      </Stack>
-      {action && <div className="mt-2">{action}</div>}
-    </Stack>
-  )
-}

src/components/molecules/LabelWithBadge.tsx

@@ -1,24 +0,0 @@
-import { Badge, Flex, Text } from '@/components/atoms'
-
-interface LabelWithBadgeProps {
-  label: string
-  badge?: number | string
-  badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline'
-}
-
-export function LabelWithBadge({ 
-  label, 
-  badge, 
-  badgeVariant = 'secondary' 
-}: LabelWithBadgeProps) {
-  return (
-    <Flex align="center" gap="sm">
-      <Text variant="small" className="font-medium">{label}</Text>
-      {badge !== undefined && (
-        <Badge variant={badgeVariant} className="text-xs">
-          {badge}
-        </Badge>
-      )}
-    </Flex>
-  )
-}

src/components/molecules/LoadingFallback.tsx

@@ -1,16 +0,0 @@
-import { LoadingSpinner } from '@/components/atoms'
-
-interface LoadingFallbackProps {
-  message?: string
-}
-
-export function LoadingFallback({ message = 'Loading...' }: LoadingFallbackProps) {
-  return (
-    <div className="flex items-center justify-center h-full w-full">
-      <div className="flex flex-col items-center gap-3">
-        <LoadingSpinner />
-        <p className="text-sm text-muted-foreground">{message}</p>
-      </div>
-    </div>
-  )
-}

src/components/molecules/LoadingState.tsx

@@ -1,15 +0,0 @@
-import { LoadingSpinner } from '@/components/atoms'
-
-interface LoadingStateProps {
-  message?: string
-  size?: 'sm' | 'md' | 'lg'
-}
-
-export function LoadingState({ message = 'Loading...', size = 'md' }: LoadingStateProps) {
-  return (
-    <div className="flex flex-col items-center justify-center gap-3 py-12">
-      <LoadingSpinner size={size} />
-      <p className="text-sm text-muted-foreground">{message}</p>
-    </div>
-  )
-}

src/components/molecules/PropertyEditor.tsx

@@ -1,7 +1,7 @@
 import { UIComponent } from '@/types/json-ui'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
-import { getComponentDef } from '@/lib/component-definitions'
+import { getComponentDef } from '@/lib/component-definition-utils'
 import { PropertyEditorEmptyState } from '@/components/molecules/property-editor/PropertyEditorEmptyState'
 import { propertyEditorConfig } from '@/components/molecules/property-editor/propertyEditorConfig'
 import { PropertyEditorHeader } from '@/components/molecules/property-editor/PropertyEditorHeader'

src/components/molecules/StatCard.tsx

@@ -1,32 +0,0 @@
-import { Card, IconWrapper, Stack, Text } from '@/components/atoms'
-
-interface StatCardProps {
-  icon: React.ReactNode
-  label: string
-  value: string | number
-  variant?: 'default' | 'primary' | 'destructive'
-}
-
-export function StatCard({ icon, label, value, variant = 'default' }: StatCardProps) {
-  const variantClasses = {
-    default: 'border-border',
-    primary: 'border-primary/50 bg-primary/5',
-    destructive: 'border-destructive/50 bg-destructive/5',
-  }
-
-  return (
-    <Card className={`p-4 ${variantClasses[variant]}`}>
-      <Stack direction="horizontal" align="center" spacing="md">
-        <IconWrapper 
-          icon={icon} 
-          size="lg" 
-          variant={variant === 'default' ? 'muted' : variant}
-        />
-        <Stack direction="vertical" spacing="xs" className="flex-1">
-          <Text variant="caption">{label}</Text>
-          <Text className="text-2xl font-bold">{value}</Text>
-        </Stack>
-      </Stack>
-    </Card>
-  )
-}

src/components/molecules/TreeCard.tsx

@@ -1,75 +0,0 @@
-import { Card, Badge, ActionIcon, IconButton, Stack, Flex, Text, Heading } from '@/components/atoms'
-import { ComponentTree } from '@/types/project'
-
-interface TreeCardProps {
-  tree: ComponentTree
-  isSelected: boolean
-  onSelect: () => void
-  onEdit: () => void
-  onDuplicate: () => void
-  onDelete: () => void
-  disableDelete?: boolean
-}
-
-export function TreeCard({
-  tree,
-  isSelected,
-  onSelect,
-  onEdit,
-  onDuplicate,
-  onDelete,
-  disableDelete = false,
-}: TreeCardProps) {
-  return (
-    <Card
-      className={`cursor-pointer transition-all p-4 ${
-        isSelected ? 'ring-2 ring-primary bg-accent' : 'hover:bg-accent/50'
-      }`}
-      onClick={onSelect}
-    >
-      <Stack spacing="sm">
-        <Flex justify="between" align="start" gap="sm">
-          <Stack spacing="xs" className="flex-1 min-w-0">
-            <Heading level={4} className="text-sm truncate">{tree.name}</Heading>
-            {tree.description && (
-              <Text variant="caption" className="line-clamp-2">
-                {tree.description}
-              </Text>
-            )}
-            <div>
-              <Badge variant="outline" className="text-xs">
-                {tree.rootNodes.length} components
-              </Badge>
-            </div>
-          </Stack>
-        </Flex>
-        <div onClick={(e) => e.stopPropagation()}>
-          <Flex gap="xs" className="mt-1">
-            <IconButton
-              icon={<ActionIcon action="edit" size={14} />}
-              variant="ghost"
-              size="sm"
-              onClick={onEdit}
-              title="Edit tree"
-            />
-            <IconButton
-              icon={<ActionIcon action="copy" size={14} />}
-              variant="ghost"
-              size="sm"
-              onClick={onDuplicate}
-              title="Duplicate tree"
-            />
-            <IconButton
-              icon={<ActionIcon action="delete" size={14} />}
-              variant="ghost"
-              size="sm"
-              onClick={onDelete}
-              disabled={disableDelete}
-              title="Delete tree"
-            />
-          </Flex>
-        </div>
-      </Stack>
-    </Card>
-  )
-}

src/components/molecules/TreeListHeader.tsx

@@ -1,53 +0,0 @@
-import { Button, TreeIcon, ActionIcon, Flex, Heading, Stack, IconButton } from '@/components/atoms'
-
-interface TreeListHeaderProps {
-  onCreateNew: () => void
-  onImportJson: () => void
-  onExportJson: () => void
-  hasSelectedTree?: boolean
-}
-
-export function TreeListHeader({
-  onCreateNew,
-  onImportJson,
-  onExportJson,
-  hasSelectedTree = false,
-}: TreeListHeaderProps) {
-  return (
-    <Stack spacing="sm">
-      <Flex justify="between" align="center">
-        <Flex align="center" gap="sm">
-          <TreeIcon size={20} />
-          <Heading level={2} className="text-lg font-semibold">Component Trees</Heading>
-        </Flex>
-        <IconButton 
-          icon={<ActionIcon action="add" size={16} />}
-          size="sm" 
-          onClick={onCreateNew}
-        />
-      </Flex>
-      
-      <Flex gap="sm">
-        <Button
-          size="sm"
-          variant="outline"
-          onClick={onImportJson}
-          className="flex-1 text-xs"
-          leftIcon={<ActionIcon action="upload" size={14} />}
-        >
-          Import JSON
-        </Button>
-        <Button
-          size="sm"
-          variant="outline"
-          onClick={onExportJson}
-          disabled={!hasSelectedTree}
-          className="flex-1 text-xs"
-          leftIcon={<ActionIcon action="download" size={14} />}
-        >
-          Export JSON
-        </Button>
-      </Flex>
-    </Stack>
-  )
-}

src/components/molecules/data-source-editor/ComputedSourceFields.tsx

@@ -1,110 +0,0 @@
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
-import { Badge } from '@/components/ui/badge'
-import { DataSource } from '@/types/json-ui'
-import { X } from '@phosphor-icons/react'
-
-interface ComputedSourceFieldsCopy {
-  computeLabel: string
-  computePlaceholder: string
-  computeHelp: string
-  dependenciesLabel: string
-  availableSourcesLabel: string
-  emptyDependencies: string
-}
-
-interface ComputedSourceFieldsProps {
-  editingSource: DataSource
-  availableDeps: DataSource[]
-  selectedDeps: string[]
-  unselectedDeps: DataSource[]
-  copy: ComputedSourceFieldsCopy
-  onUpdateField: <K extends keyof DataSource>(field: K, value: DataSource[K]) => void
-  onAddDependency: (depId: string) => void
-  onRemoveDependency: (depId: string) => void
-}
-
-export function ComputedSourceFields({
-  editingSource,
-  availableDeps,
-  selectedDeps,
-  unselectedDeps,
-  copy,
-  onUpdateField,
-  onAddDependency,
-  onRemoveDependency,
-}: ComputedSourceFieldsProps) {
-  return (
-    <>
-      <div className="space-y-2">
-        <Label>{copy.computeLabel}</Label>
-        <Textarea
-          value={editingSource.compute?.toString() || ''}
-          onChange={(e) => {
-            try {
-              const fn = new Function('data', `return (${e.target.value})`)()
-              onUpdateField('compute', fn)
-            } catch (err) {
-              // Invalid function
-            }
-          }}
-          placeholder={copy.computePlaceholder}
-          className="font-mono text-sm h-24"
-        />
-        <p className="text-xs text-muted-foreground">
-          {copy.computeHelp}
-        </p>
-      </div>
-
-      <div className="space-y-2">
-        <Label>{copy.dependenciesLabel}</Label>
-
-        {selectedDeps.length > 0 && (
-          <div className="flex flex-wrap gap-2 p-3 bg-muted/30 rounded border border-border">
-            {selectedDeps.map(depId => (
-              <Badge
-                key={depId}
-                variant="secondary"
-                className="flex items-center gap-1"
-              >
-                {depId}
-                <button
-                  onClick={() => onRemoveDependency(depId)}
-                  className="ml-1 hover:text-destructive"
-                >
-                  <X className="w-3 h-3" />
-                </button>
-              </Badge>
-            ))}
-          </div>
-        )}
-
-        {unselectedDeps.length > 0 && (
-          <div className="space-y-1">
-            <Label className="text-xs text-muted-foreground">{copy.availableSourcesLabel}</Label>
-            <div className="flex flex-wrap gap-2">
-              {unselectedDeps.map(ds => (
-                <Button
-                  key={ds.id}
-                  variant="outline"
-                  size="sm"
-                  onClick={() => onAddDependency(ds.id)}
-                  className="h-7 text-xs"
-                >
-                  + {ds.id}
-                </Button>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {availableDeps.length === 0 && selectedDeps.length === 0 && (
-          <p className="text-sm text-muted-foreground">
-            {copy.emptyDependencies}
-          </p>
-        )}
-      </div>
-    </>
-  )
-}

src/components/molecules/index.ts

@@ -1,34 +1,20 @@
-export { AppBranding } from './AppBranding'
 export { Breadcrumb } from './Breadcrumb'
+export { CanvasRenderer } from './CanvasRenderer'
 export { CodeExplanationDialog } from './CodeExplanationDialog'
-export { EditorActions } from './EditorActions'
-export { EditorToolbar } from './EditorToolbar'
-export { EmptyEditorState } from './EmptyEditorState'
-export { FileTabs } from './FileTabs'
+export { ComponentPalette } from './ComponentPalette'
+export { ComponentTree } from './ComponentTree'
 export { GitHubBuildStatus } from './GitHubBuildStatus'
-export { LabelWithBadge } from './LabelWithBadge'
-export { LazyInlineMonacoEditor } from './LazyInlineMonacoEditor'
-export { LazyMonacoEditor, preloadMonacoEditor } from './LazyMonacoEditor'
 export { LazyLineChart } from './LazyLineChart'
 export { LazyBarChart } from './LazyBarChart'
 export { LazyD3BarChart } from './LazyD3BarChart'
 export { StorageSettings } from './StorageSettings'
-export { LoadingFallback } from './LoadingFallback'
-export { MonacoEditorPanel } from './MonacoEditorPanel'
 export { NavigationGroupHeader } from './NavigationGroupHeader'
-export { NavigationItem } from './NavigationItem'
-export { PageHeaderContent } from './PageHeaderContent'
+export { PropertyEditor } from './PropertyEditor'
 export { SaveIndicator } from './SaveIndicator'
 export { SeedDataManager } from './SeedDataManager'
 export { ToolbarButton } from './ToolbarButton'
-export { TreeCard } from './TreeCard'
 export { TreeFormDialog } from './TreeFormDialog'
-export { TreeListHeader } from './TreeListHeader'
-export { DataCard } from './DataCard'
 export { SearchInput } from './SearchInput'
-export { ActionBar } from './ActionBar'
-export { DataSourceCard } from './DataSourceCard'
 export { BindingEditor } from './BindingEditor'
 export { DataSourceEditorDialog } from './DataSourceEditorDialog'
 export { ComponentBindingDialog } from './ComponentBindingDialog'
-

src/components/orchestration/ComponentRenderer.tsx

@@ -1,24 +1,7 @@
 import { ReactNode } from 'react'
 import { ComponentSchema as ComponentSchemaType } from '@/types/page-schema'
-import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { Badge } from '@/components/ui/badge'
-import { Textarea } from '@/components/ui/textarea'
-
-const COMPONENT_MAP: Record<string, any> = {
-  Button,
-  Card,
-  Input,
-  Badge,
-  Textarea,
-  div: 'div',
-  span: 'span',
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  p: 'p',
-}
+import { getUIComponent } from '@/lib/json-ui/component-registry'
+import { evaluateConditionExpression, evaluateTransformExpression } from '@/lib/json-ui/expression-helpers'
 
 interface ComponentRendererProps {
   schema: ComponentSchemaType
@@ -27,7 +10,7 @@ interface ComponentRendererProps {
 }
 
 export function ComponentRenderer({ schema, context, onEvent }: ComponentRendererProps) {
-  const Component = COMPONENT_MAP[schema.type]
+  const Component = getUIComponent(schema.type)
   
   if (!Component) {
     console.warn(`Component type "${schema.type}" not found`)
@@ -35,13 +18,10 @@ export function ComponentRenderer({ schema, context, onEvent }: ComponentRendere
   }
   
   if (schema.condition) {
-    try {
-      const conditionFn = new Function('context', `return ${schema.condition}`)
-      if (!conditionFn(context)) {
-        return null
-      }
-    } catch (error) {
-      console.error(`Condition evaluation failed for ${schema.id}:`, error)
+    const conditionMet = evaluateConditionExpression(schema.condition, context, {
+      label: `component condition (${schema.id})`,
+    })
+    if (!conditionMet) {
       return null
     }
   }
@@ -52,13 +32,10 @@ export function ComponentRenderer({ schema, context, onEvent }: ComponentRendere
     schema.bindings.forEach(binding => {
       const value = getNestedValue(context, binding.source)
       if (binding.transform) {
-        try {
-          const transformFn = new Function('value', 'context', `return ${binding.transform}`)
-          props[binding.target] = transformFn(value, context)
-        } catch (error) {
-          console.error(`Transform failed for ${binding.target}:`, error)
-          props[binding.target] = value
-        }
+        props[binding.target] = evaluateTransformExpression(binding.transform, value, context, {
+          fallback: value,
+          label: `binding transform (${binding.target})`,
+        })
       } else {
         props[binding.target] = value
       }

src/components/organisms/DataSourceManager.tsx

@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { DataSourceEditorDialog } from '@/components/molecules/DataSourceEditorDialog'
 import { useDataSourceManager } from '@/hooks/data/use-data-source-manager'
 import { DataSource, DataSourceType } from '@/types/json-ui'
-import { Database, Function, FileText } from '@phosphor-icons/react'
+import { Database, FileText } from '@phosphor-icons/react'
 import { toast } from 'sonner'
 import { EmptyState, Stack } from '@/components/atoms'
 import { DataSourceManagerHeader } from '@/components/organisms/data-source-manager/DataSourceManagerHeader'
@@ -66,7 +66,6 @@ export function DataSourceManager({ dataSources, onChange }: DataSourceManagerPr
 
   const groupedSources = {
     kv: localSources.filter(ds => ds.type === 'kv'),
-    computed: localSources.filter(ds => ds.type === 'computed'),
     static: localSources.filter(ds => ds.type === 'static'),
   }
 
@@ -110,15 +109,6 @@ export function DataSourceManager({ dataSources, onChange }: DataSourceManagerPr
                 onEdit={handleEditSource}
                 onDelete={handleDeleteSource}
               />
-
-              <DataSourceGroupSection
-                icon={<Function size={16} />}
-                label={dataSourceManagerCopy.groups.computed}
-                dataSources={groupedSources.computed}
-                getDependents={getDependents}
-                onEdit={handleEditSource}
-                onDelete={handleDeleteSource}
-              />
             </Stack>
           )}
         </CardContent>
@@ -127,7 +117,6 @@ export function DataSourceManager({ dataSources, onChange }: DataSourceManagerPr
       <DataSourceEditorDialog
         open={dialogOpen}
         dataSource={editingSource}
-        allDataSources={localSources}
         onOpenChange={setDialogOpen}
         onSave={handleSaveSource}
       />

src/components/organisms/JSONUIShowcase.tsx

@@ -1,172 +0,0 @@
-import { useState, useEffect } from 'react'
-import { PageRenderer } from '@/lib/schema-renderer'
-import { useSchemaLoader } from '@/hooks/ui'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Button } from '@/components/ui/button'
-import { Code, FileText, Database } from '@phosphor-icons/react'
-import dashboardSchema from '@/config/schemas/json-ui-dashboard.json'
-
-interface JSONUIShowcaseProps {
-  files?: any[]
-  models?: any[]
-  components?: any[]
-}
-
-export function JSONUIShowcase({ 
-  files = [], 
-  models = [], 
-  components = [] 
-}: JSONUIShowcaseProps) {
-  const [showJSON, setShowJSON] = useState(false)
-  const {schema: loadedSchema, loading, error} = useSchemaLoader({ 
-    schema: dashboardSchema as any
-  })
-
-  const data = {
-    files: files.length > 0 ? files : [
-      { name: 'App.tsx', type: 'TypeScript' },
-      { name: 'index.css', type: 'CSS' },
-      { name: 'schema-renderer.tsx', type: 'TypeScript' },
-      { name: 'use-data-binding.ts', type: 'Hook' },
-      { name: 'dashboard.json', type: 'JSON' },
-    ],
-    models: models.length > 0 ? models : [
-      { name: 'User', fields: 5 },
-      { name: 'Post', fields: 8 },
-      { name: 'Comment', fields: 4 },
-    ],
-    components: components.length > 0 ? components : [
-      { name: 'Button', type: 'atom' },
-      { name: 'Card', type: 'molecule' },
-      { name: 'Dashboard', type: 'organism' },
-    ],
-  }
-
-  const functions = {
-    handleClick: () => {
-      console.log('Button clicked from JSON!')
-    },
-  }
-
-  if (loading) {
-    return (
-      <div className="h-full flex items-center justify-center">
-        <div className="flex flex-col items-center gap-4">
-          <div className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin" />
-          <p className="text-sm text-muted-foreground">Loading schema...</p>
-        </div>
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="h-full p-6">
-        <Alert variant="destructive">
-          <AlertDescription>
-            Failed to load schema: {error.message}
-          </AlertDescription>
-        </Alert>
-      </div>
-    )
-  }
-
-  if (!loadedSchema) {
-    return (
-      <div className="h-full p-6">
-        <Alert>
-          <AlertDescription>No schema loaded</AlertDescription>
-        </Alert>
-      </div>
-    )
-  }
-
-  return (
-    <div className="h-full overflow-auto">
-      <div className="p-6 space-y-6">
-        <Card className="bg-gradient-to-br from-primary/10 to-accent/10 border-primary/20">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Code size={24} weight="duotone" className="text-primary" />
-              JSON-Driven UI System
-            </CardTitle>
-            <CardDescription>
-              Complete UI rendering from declarative JSON schemas with data bindings and event handlers
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex gap-2">
-              <Button 
-                onClick={() => setShowJSON(!showJSON)}
-                variant="outline"
-                size="sm"
-              >
-                <FileText size={16} weight="duotone" className="mr-2" />
-                {showJSON ? 'Hide' : 'Show'} JSON Schema
-              </Button>
-            </div>
-            {showJSON && (
-              <pre className="bg-secondary/50 p-4 rounded-md overflow-auto text-xs font-mono max-h-96">
-                {JSON.stringify(loadedSchema, null, 2)}
-              </pre>
-            )}
-          </CardContent>
-        </Card>
-
-        <div className="grid gap-4 md:grid-cols-3">
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg flex items-center gap-2">
-                <Database size={20} weight="duotone" className="text-blue-500" />
-                Schema-Driven
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                UI structure defined in JSON, making it easy to modify without code changes
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg flex items-center gap-2">
-                <Code size={20} weight="duotone" className="text-green-500" />
-                Data Bindings
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Dynamic expressions in JSON connect UI to application state seamlessly
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg flex items-center gap-2">
-                <FileText size={20} weight="duotone" className="text-purple-500" />
-                Atomic Design
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Modular components composed from atoms to organisms following best practices
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-
-        <div className="border-t border-border pt-6">
-          <h2 className="text-2xl font-bold mb-4">Rendered from JSON</h2>
-          <p className="text-muted-foreground mb-6">
-            The content below is entirely generated from the JSON schema above, demonstrating data bindings, 
-            loops, and component composition.
-          </p>
-          <PageRenderer schema={loadedSchema} data={data} functions={functions} />
-        </div>
-      </div>
-    </div>
-  )
-}

src/components/organisms/SchemaEditorLayout.tsx

@@ -1,5 +1,5 @@
 import { UIComponent, PageSchema } from '@/types/json-ui'
-import { ComponentDefinition } from '@/lib/component-definitions'
+import { ComponentDefinition } from '@/lib/component-definition-types'
 import { SchemaEditorToolbar } from './SchemaEditorToolbar'
 import { SchemaEditorSidebar } from './SchemaEditorSidebar'
 import { SchemaEditorCanvas } from './SchemaEditorCanvas'

src/components/organisms/SchemaEditorSidebar.tsx

@@ -1,5 +1,5 @@
 import { ComponentPalette } from '@/components/molecules/ComponentPalette'
-import { ComponentDefinition } from '@/lib/component-definitions'
+import { ComponentDefinition } from '@/lib/component-definition-types'
 
 interface SchemaEditorSidebarProps {
   onDragStart: (component: ComponentDefinition, e: React.DragEvent) => void