feat: update component migration orchestrator and add deletion manifest script- Simplify COMPONENT_DIRS to process all TSX components under src/components, excluding specific files.- Introduce EXCLUDED_FILENAMES to filter out non-relevant TSX files.- Enhance documentation for component registry entry format and JSON return structure.- Add a new script to generate a deletion manifest for legacy TSX components with JSON equivalents.

feat: Add JSON definitions for menu, password input, and popover comp…

.claude/settings.local.json

@@ -0,0 +1,54 @@
+{
+  "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:*)",
+      "Bash(npm run build:*)",
+      "Bash(npm install)",
+      "Bash(for file in ComponentBindingDialog.tsx DataSourceEditorDialog.tsx GitHubBuildStatus.tsx SaveIndicator.tsx ComponentTree.tsx SeedDataManager.tsx LazyD3BarChart.tsx StorageSettings.tsx)",
+      "Bash(do if [ -f \"$file\" ])",
+      "Bash(then echo \"EXISTS: $file\")",
+      "Bash(fi)",
+      "Bash(npm install:*)",
+      "Bash(for file in AppBranding BindingEditor Breadcrumb CanvasRenderer CodeExplanationDialog ComponentPalette)",
+      "Bash(do echo -n \"$file: \")",
+      "Bash(tsx scripts/audit-json-components.ts:*)",
+      "Bash(npm run audit:json:*)",
+      "Bash(bash:*)",
+      "Bash(git restore:*)",
+      "Bash(tree:*)",
+      "Bash(powershell:*)",
+      "Bash(git checkout:*)",
+      "Bash(git revert:*)",
+      "Bash(for comp in GitHubBuildStatus LazyD3BarChart StorageSettings LoadingFallback NavigationItem PageHeaderContent SaveIndicator SeedDataManager TreeCard)",
+      "Bash(do grep -r \"from ''@/components/molecules/$comp''\" src/ --files-with-matches)"
+    ]
+  },
+  "mcpServers": {
+    "codeql": {
+      "command": "node",
+      "args": ["scripts/mcp/codeql-mcp.cjs"]
+    }
+  }
+}

AGENTS.md

@@ -0,0 +1,32 @@
+# Project Agent Guide
+
+This repo is migrating legacy TSX components to JSON-driven components with hooks.
+Use this file as the quick, local guide for automation and review.
+
+## Conversion Workflow (TSX -> JSON)
+1) Identify component under `src/components/atoms|molecules|organisms`.
+2) Read TSX and decide if stateful.
+3) If stateful, extract logic to `src/hooks/use-<component>.ts`.
+4) Create JSON definition in `src/components/json-definitions/<component>.json`.
+5) Add interface in `src/lib/json-ui/interfaces/<component>.ts`.
+6) Export hook (if any) in `src/hooks/index.ts` and `src/lib/json-ui/hooks-registry.ts`.
+7) Export interface in `src/lib/json-ui/interfaces/index.ts`.
+8) Export JSON component in `src/lib/json-ui/json-components.ts`.
+9) Update imports to `@/lib/json-ui/json-components` and delete TSX.
+10) Verify with `npm run build` and `npm run audit:json`.
+
+## CodeQL Helpers
+Custom query pack: `codeql/custom-queries/`
+Optimized DB (source-root `src/`): `codeql-db-optimized/`
+Latest SARIF: `codeql-db-optimized/diagnostic/migration-queries.sarif`
+
+Key queries:
+- Legacy component imports and barrels
+- Hooks usage in components (guides hook extraction)
+- JSX presence in components
+- Imports from json-definitions (should be zero)
+- Migration target folder inventory
+
+## Related Docs
+- `CLAUDE.md` for migration status and CodeQL results
+- `docs/reference/AGENTS.md` for agent architecture background

CLAUDE.md

@@ -0,0 +1,362 @@
+# Claude Code Documentation
+
+## Architecture Overview
+
+This is a low-code React application builder that is migrating from TypeScript/TSX components to a JSON-driven architecture.
+
+### Current State (Jan 2026)
+
+- **~420 TSX files** in `src/components/` (legacy - being phased out)
+- **338 JSON definitions** in `src/config/pages/` (target architecture)
+- **342 entries** in `json-components-registry.json`
+- **19 complete JSON implementations** in `src/components/json-definitions/`
+- **141 duplicate TSX files deleted** (had JSON equivalents)
+- **5 atoms remaining** to convert: Accordion, FileUpload, Image, Menu, Popover
+- **1 molecule remaining**: BindingEditor
+- **3 organisms remaining**: DataSourceManager, NavigationMenu, TreeListPanel
+
+## Migration Strategy
+
+### Core Principle
+
+**ALL components can be converted to JSON except the application entrypoint**, because custom hooks can handle any stateful/complex logic.
+
+### Directory Structure
+
+```
+src/
+├── components/              # 🔴 LEGACY - Phase out
+│   ├── atoms/              # Basic UI components (6 TSX remaining)
+│   │   ├── json-ui/        # JSON-specific atoms
+│   │   ├── Accordion.tsx
+│   │   ├── FileUpload.tsx
+│   │   ├── Image.tsx
+│   │   ├── Menu.tsx
+│   │   └── Popover.tsx
+│   ├── molecules/          # Composite components (1 TSX remaining)
+│   │   └── BindingEditor.tsx
+│   ├── organisms/          # Complex feature components (3 TSX remaining)
+│   │   ├── DataSourceManager.tsx
+│   │   ├── NavigationMenu.tsx
+│   │   └── TreeListPanel.tsx
+│   └── json-definitions/   # ✅ JSON implementations (19 files)
+│       ├── loading-fallback.json
+│       ├── navigation-item.json
+│       ├── page-header-content.json
+│       ├── component-binding-dialog.json
+│       ├── data-source-editor-dialog.json
+│       ├── github-build-status.json
+│       ├── save-indicator.json
+│       ├── component-tree.json
+│       ├── seed-data-manager.json
+│       ├── lazy-d3-bar-chart.json
+│       ├── storage-settings.json
+│       ├── tree-card.json
+│       ├── filter-input.json
+│       ├── copy-button.json
+│       ├── input.json
+│       └── password-input.json
+│
+├── config/
+│   ├── pages/              # ✅ TARGET - JSON definitions (338 files)
+│   │   ├── atoms/          # JSON schema for atoms
+│   │   ├── molecules/      # JSON schema for molecules
+│   │   ├── organisms/      # JSON schema for organisms
+│   │   ├── templates/      # Page templates
+│   │   └── *.json          # Page definitions
+│   └── pages.json          # Central routing manifest
+│
+├── hooks/                  # ✅ Custom hooks for JSON components
+│   ├── use-save-indicator.ts
+│   ├── use-component-tree.ts
+│   ├── use-storage-backend-info.ts
+│   ├── use-d3-bar-chart.ts
+│   ├── use-focus-state.ts      # NEW: For FilterInput
+│   ├── use-copy-state.ts       # NEW: For CopyButton
+│   ├── use-password-visibility.ts  # NEW: For PasswordInput
+│   └── index.ts
+│
+├── lib/
+│   └── json-ui/
+│       ├── component-registry.ts         # Component resolver
+│       ├── component-renderer.tsx        # JSON → React renderer
+│       ├── json-components.ts            # JSON component exports (27 components)
+│       ├── create-json-component.tsx     # Pure JSON component factory
+│       ├── create-json-component-with-hooks.tsx  # JSON + hooks factory
+│       ├── hooks.ts                      # Data source/action hooks
+│       ├── hooks-registry.ts             # Hook registration (12 hooks registered)
+│       ├── constants/                    # Shared constants for JSON transforms
+│       │   ├── sizes.ts                  # Button sizes, icon sizes, dimensions
+│       │   ├── placements.ts             # Popover/tooltip positioning
+│       │   ├── styles.ts                 # Common CSS classes (transitions, animations, etc.)
+│       │   ├── object-fit.ts             # Image object-fit classes
+│       │   └── index.ts
+│       └── interfaces/                   # TypeScript interfaces (1 per file)
+│           ├── loading-fallback.ts
+│           ├── navigation-item.ts
+│           ├── page-header-content.ts
+│           ├── save-indicator.ts
+│           ├── lazy-bar-chart.ts
+│           ├── lazy-line-chart.ts
+│           ├── lazy-d3-bar-chart.ts
+│           ├── seed-data-manager.ts
+│           ├── storage-settings.ts
+│           ├── github-build-status.ts
+│           ├── component-binding-dialog.ts
+│           ├── data-source-editor-dialog.ts
+│           ├── component-tree.ts
+│           ├── tree-card.ts
+│           ├── filter-input.ts
+│           ├── copy-button.ts
+│           ├── input.ts
+│           ├── password-input.ts
+│           ├── image.ts
+│           ├── popover.ts
+│           ├── menu.ts
+│           ├── file-upload.ts
+│           ├── accordion.ts
+│           └── index.ts
+│
+├── scripts/                # Migration and audit tools
+│   ├── audit-json-components.ts
+│   ├── analyze-duplicates.ts
+│   ├── cleanup-registry.ts
+│   └── fix-index-files.ts
+│
+└── json-components-registry.json   # Master component registry
+```
+
+## How It Works
+
+### 1. Routing Flow
+
+```
+pages.json → json-components-registry.json → Component Implementation
+```
+
+**Example:**
+```json
+// pages.json
+{
+  "id": "dashboard",
+  "component": "ProjectDashboard"
+}
+
+// json-components-registry.json
+{
+  "type": "ProjectDashboard",
+  "source": "organisms",
+  "load": {
+    "path": "@/components/ProjectDashboard",
+    "export": "ProjectDashboard"
+  }
+}
+```
+
+### 2. Component Types
+
+#### Pure JSON Components (No Hooks)
+Simple stateless components defined entirely in JSON:
+
+```json
+// src/components/json-definitions/tree-card.json
+{
+  "id": "tree-card-container",
+  "type": "Card",
+  "bindings": {
+    "className": {
+      "source": "isSelected",
+      "transform": "data ? 'ring-2 ring-primary' : 'hover:bg-accent/50'"
+    }
+  },
+  "children": [...]
+}
+```
+
+Exported from `src/lib/json-ui/json-components.ts`:
+```typescript
+import treeCardDef from '@/components/json-definitions/tree-card.json'
+export const TreeCard = createJsonComponent<TreeCardProps>(treeCardDef)
+```
+
+#### JSON Components with Hooks
+Stateful components using custom hooks (**NO WRAPPER FILES NEEDED**):
+
+```typescript
+// src/lib/json-ui/json-components.ts
+export const ComponentTree = createJsonComponentWithHooks<ComponentTreeProps>(
+  componentTreeDef,
+  {
+    hooks: {
+      treeData: {
+        hookName: 'useComponentTree',
+        args: (props) => [props.components || [], props.selectedId || null]
+      }
+    }
+  }
+)
+```
+
+The custom hook is defined in `src/hooks/use-component-tree.ts` (or other hook files) and registered in `src/lib/json-ui/hooks-registry.ts`.
+
+#### TSX Components (Legacy)
+Currently imported directly - these need migration:
+
+```typescript
+// ❌ OLD: Direct TSX import
+import { AppBranding } from '@/components/molecules/AppBranding'
+
+// ✅ NEW: JSON-based import
+import { AppBranding } from '@/lib/json-ui/json-components'
+```
+
+### 3. Registry System
+
+The `json-components-registry.json` defines how components are loaded:
+
+```json
+{
+  "type": "SaveIndicator",
+  "source": "molecules",
+  "jsonCompatible": true
+}
+```
+
+- **jsonCompatible**: Whether component can be expressed as JSON
+- **load.path**: Explicit path to component file (for TSX legacy components)
+- **source**: Where the component comes from (atoms, molecules, organisms, ui)
+
+**Note:** `wrapperRequired` and `wrapperComponent` fields in the registry are **obsolete** and should be removed. All stateful logic is handled via `createJsonComponentWithHooks`.
+
+## Current Issues (Jan 2026)
+
+### Audit Results
+
+Run `npm run audit:json` to see current status:
+
+- ❌ **Errors**
+  - 6 orphaned JSON files (no registry entry)
+  - 7 broken load paths
+
+- ⚠️ **153 warnings**
+  - 153 duplicate implementations (TSX + JSON)
+
+### Critical Tasks
+
+1. **Phase Out `src/components/`**
+   - 153 components have both TSX and JSON definitions
+   - TSX versions should be deleted and routed through JSON
+
+2. **Clean Up Registry**
+   - Remove `wrapperRequired` and `wrapperComponent` fields (obsolete)
+   - All stateful logic is handled via `createJsonComponentWithHooks`
+   - Custom hooks defined in `src/lib/json-ui/hooks.ts`
+
+3. **Fix Registry Issues**
+   - Add missing registry entries for orphaned JSON
+   - Fix broken load paths
+   - Verify all source mappings
+
+## Migration Checklist
+
+For each component:
+
+- [ ] Create JSON definition in `src/components/json-definitions/`
+- [ ] Add TypeScript interface in `src/lib/json-ui/interfaces/` (one file per interface)
+- [ ] If stateful: Define custom hook in `src/hooks/use-[component-name].ts`
+- [ ] If stateful: Register hook in `src/lib/json-ui/hooks-registry.ts`
+- [ ] If stateful: Export hook from `src/hooks/index.ts`
+- [ ] Export from `src/lib/json-ui/json-components.ts`:
+  - Use `createJsonComponent` for pure/stateless
+  - Use `createJsonComponentWithHooks` for stateful
+- [ ] Update registry in `json-components-registry.json`
+- [ ] Update all imports to use `@/lib/json-ui/json-components`
+- [ ] Delete legacy TSX file from `src/components/`
+- [ ] Run tests and build to verify
+
+## Useful Commands
+
+```bash
+# Run audit to check migration status
+npm run audit:json
+
+# Generate component types
+npm run components:generate-types
+
+# Build (will fail if components missing)
+npm run build
+```
+
+## CodeQL Migration Helpers (Jan 2026)
+
+Custom query pack lives in `codeql/custom-queries/` with SARIF output at:
+`codeql-db-optimized/diagnostic/migration-queries.sarif`
+
+Latest optimized DB results (source-root `src/`):
+- custom/component-files-with-jsx: 400
+- custom/component-hooks-usage: 98
+- custom/component-custom-hook-usage: 191
+- custom/legacy-component-barrel-imports: 470
+- custom/components-in-migration-target-folders: 21
+- custom/legacy-imports-in-migration-targets: 0
+- custom/imports-json-definitions: 0
+- custom/imports-converted-json-components: 0
+
+## Key Files
+
+- `json-components-registry.json` - Master registry of all components
+- `src/config/pages.json` - Page routing configuration
+- `src/lib/json-ui/component-registry.ts` - Component resolver logic
+- `src/lib/json-ui/json-components.ts` - JSON component exports
+- `src/lib/json-ui/hooks.ts` - Custom hooks for stateful components
+- `src/lib/json-ui/hooks-registry.ts` - Hook registration
+- `scripts/audit-json-components.ts` - Audit tool
+
+## Notes
+
+- **Never create new TSX components** - use JSON instead
+- **All components can be JSON** except the app entrypoint
+- **Use custom hooks** for stateful logic (via `createJsonComponentWithHooks`)
+- **NO wrapper files needed** - hooks are defined in `hooks.ts` and registered in `hooks-registry.ts`
+- **One interface per file** in `src/lib/json-ui/interfaces/`
+- **Meta JSON files** in `src/config/pages/` are routing schemas
+- **Full JSON definitions** live in `src/components/json-definitions/`
+
+## Recent Changes (Jan 2026)
+
+### Phase 1: Setup & Cleanup
+- ✅ Fixed e2e build failures (TreeCard, TreeListHeader routing)
+- ✅ Removed 8 initial duplicate TSX files with JSON equivalents
+- ✅ Split wrapper-interfaces.ts into individual interface files
+- ✅ Created audit script to track migration progress
+- ✅ Updated imports to use `@/lib/json-ui/json-components`
+- ✅ Clarified: NO wrapper system - use JSON + custom hooks
+
+### Phase 2: Mass Cleanup
+- ✅ Cleaned registry - removed 107 obsolete `wrapperRequired`/`wrapperComponent` fields
+- ✅ Analyzed 153 duplicates, categorized safe deletions
+- ✅ Deleted 141 duplicate TSX files (had complete JSON implementations)
+- ✅ Created fix-index-files.ts script to auto-update exports
+
+### Phase 3: Active Conversions (In Progress)
+- ✅ Converted FilterInput to JSON with useFocusState hook
+- ✅ Converted CopyButton to JSON with useCopyState hook
+- ✅ Converted Input to JSON (pure component with forwardRef support)
+- ✅ Converted PasswordInput to JSON with usePasswordVisibility hook
+- ✅ Moved custom hooks from `lib/json-ui/hooks.ts` to `src/hooks/` directory
+- ✅ Created use-focus-state.ts, use-copy-state.ts, and use-password-visibility.ts
+- ✅ Updated hooks-registry.ts to include 7 registered hooks
+
+### Remaining Work
+- 🔄 5 atoms left: Accordion, FileUpload, Image, Menu, Popover
+- 🔄 1 molecule left: BindingEditor
+- 🔄 3 organisms left: DataSourceManager, NavigationMenu, TreeListPanel
+- ✅ 20 JSON components complete (up from 12)
+
+## Next Steps
+
+1. Clean up registry - remove `wrapperRequired` and `wrapperComponent` fields
+2. Convert the 153 duplicate TSX components to JSON-only
+3. Fix 6 orphaned JSON files (add registry entries)
+4. Fix 7 broken load paths in registry
+5. Complete full migration of `src/components/` to JSON

CLAUDE_UPDATE.md

@@ -0,0 +1,59 @@
+# Update for Current State section (lines 8-15)
+
+- **~400 TSX files** in `src/components/` (legacy - being phased out)
+- **338 JSON definitions** in `src/config/pages/` (target architecture)
+- **342 entries** in `json-components-registry.json`
+- **27 complete JSON implementations** in `src/components/json-definitions/`
+- **141 duplicate TSX files deleted** (had JSON equivalents)
+- **✅ ALL ATOMS CONVERTED!** (0 remaining)
+- **1 molecule remaining**: BindingEditor
+- **3 organisms remaining**: DataSourceManager, NavigationMenu, TreeListPanel
+
+# Update for atoms section (lines 28-34)
+
+│   ├── atoms/              # ✅ ALL CONVERTED! (0 TSX remaining)
+│   │   └── json-ui/        # JSON-specific atoms
+
+# Update for json-definitions (lines 41-57)
+
+│   └── json-definitions/   # ✅ JSON implementations (27 files)
+│       ├── loading-fallback.json
+│       ├── navigation-item.json
+│       ├── page-header-content.json
+│       ├── component-binding-dialog.json
+│       ├── data-source-editor-dialog.json
+│       ├── github-build-status.json
+│       ├── save-indicator.json
+│       ├── component-tree.json
+│       ├── seed-data-manager.json
+│       ├── lazy-d3-bar-chart.json
+│       ├── storage-settings.json
+│       ├── tree-card.json
+│       ├── filter-input.json
+│       ├── copy-button.json
+│       ├── input.json
+│       ├── password-input.json
+│       ├── image.json
+│       ├── popover.json
+│       ├── menu.json
+│       ├── file-upload.json
+│       └── accordion.json
+
+# Update for hooks (lines 73-76)
+
+│   ├── use-focus-state.ts      # For FilterInput
+│   ├── use-copy-state.ts       # For CopyButton
+│   ├── use-password-visibility.ts  # For PasswordInput
+│   ├── use-image-state.ts      # For Image
+│   ├── use-popover-state.ts    # For Popover
+│   ├── use-menu-state.ts       # For Menu
+│   ├── use-file-upload.ts      # For FileUpload
+│   ├── use-accordion.ts        # For Accordion
+
+# Update for json-components count (line 82)
+
+│       ├── json-components.ts            # JSON component exports (27 components)
+
+# Update for hooks-registry count (line 86)
+
+│       ├── hooks-registry.ts             # Hook registration (12 hooks registered)

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,210 +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
-
-### JSON Compatibility Checklist
-
-Before migrating a component, confirm all required conditions are met:
-
-- [ ] **Hooks/state are registry-safe**: hooks and internal state are acceptable when the component registry can control or expose them through JSON bindings.
-- [ ] **Bindings are defined**: any required actions, event handlers, or state bindings are already supported by the JSON UI binding system.
-- [ ] **Refactoring covered by PR**: JSON compatibility gaps should be resolved via refactoring as part of the same pull request.
-
-### Step-by-Step Migration Path
-
-Use this repeatable migration flow for planned components:
-
-1. **Update the type union** in `src/types/json-ui.ts` to include the new component type name.
-2. **Register the component** in `src/lib/json-ui/component-registry.tsx` so JSON schemas can resolve it at runtime.
-3. **Define component metadata** in `src/lib/component-definitions.ts` (defaults, prop schema, and any JSON-driven constraints).
-4. **Validate JSON schema usage** by rendering a sample schema that uses the new type.
-5. **Update registry metadata** in `json-components-registry.json` so the CLI/listing reflects the new status.
-
-## 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.”

ROOT_CAUSE_ANALYSIS.md

@@ -0,0 +1,195 @@
+# Root Cause Analysis: JSON-Based React Component System
+
+## Executive Summary
+
+The repository is attempting to transition from a traditional TypeScript React component architecture to a JSON-based declarative UI system. The build is currently failing because the transition is incomplete - some TypeScript components were deleted but their imports remain, and the JSON component system cannot yet fully replace them.
+
+## Current State: Hybrid System Failure
+
+### What Was Attempted
+1. **123 TypeScript components were deleted** (commit aa51074) and marked as "json-compatible" in the registry
+2. **JSON component registry created** with 375+ component definitions
+3. **JSON UI rendering system built** with component-renderer.tsx, expression evaluator, data binding, etc.
+4. **Wrapper components created** for complex molecules that need special handling
+
+### What's Broken
+The build fails with these errors:
+```
+✘ [ERROR] No matching export in "src/components/molecules/index.ts" for import "NavigationItem"
+✘ [ERROR] No matching export in "src/components/molecules/index.ts" for import "PageHeaderContent"
+✘ [ERROR] No matching export in "src/components/molecules/index.ts" for import "TreeCard"
+✘ [ERROR] No matching export in "src/components/molecules/index.ts" for import "TreeListHeader"
+✘ [ERROR] No matching export in "src/components/molecules/index.ts" for import "preloadMonacoEditor"
+✘ [ERROR] No matching export in "src/components/molecules/index.ts" for import "LoadingFallback"
+```
+
+## Root Causes
+
+### 1. **Incomplete Conversion Strategy**
+Components were marked as JSON-compatible and deleted, but:
+- The **consuming code still imports them as TypeScript modules**
+- No migration was done to convert consumers to use the JSON renderer
+- The JSON system exists but isn't wired into the main application flow
+
+### 2. **Misunderstanding of JSON Component Architecture**
+The JSON system is designed for **declarative page configurations**, not as a drop-in replacement for React components. Example:
+
+**Traditional React:**
+```tsx
+import { TreeCard } from '@/components/molecules'
+<TreeCard tree={data} onSelect={handleSelect} />
+```
+
+**JSON System:**
+```json
+{
+  "type": "TreeCard",
+  "bindings": {
+    "tree": { "source": "currentTree" }
+  },
+  "events": {
+    "onSelect": { "action": "selectTree" }
+  }
+}
+```
+
+The JSON system requires:
+- JSON configuration files
+- JSONSchemaPageLoader or PageRenderer wrapper
+- Data sources defined in JSON
+- Event handlers defined in JSON
+- Cannot be imported like a normal React component
+
+### 3. **Deleted Components Still Referenced**
+Components deleted but still imported:
+- **TreeCard** - Used in TreeListPanel.tsx
+- **TreeListHeader** - Used in TreeListPanel.tsx  
+- **LoadingFallback** - Used in JSONSchemaPageLoader.tsx and routes.tsx
+- **NavigationItem** - File exists but not exported from index.ts
+- **PageHeaderContent** - File exists but not exported from index.ts
+- **preloadMonacoEditor** - Function exists but not exported from index.ts
+
+### 4. **Module System vs Component Registry Mismatch**
+The component-registry.ts uses `import.meta.glob` to load ALL .tsx files:
+```ts
+const moleculeModules = import.meta.glob('@/components/molecules/*.tsx', { eager: true })
+```
+
+This means:
+- It CAN dynamically load TreeCard, TreeListHeader, etc. IF they exist as .tsx files
+- But they were DELETED, so they can't be found
+- The registry says they're "json-compatible" but provides no fallback
+- The JSON renderer can use them IF loaded via JSON config, but direct imports fail
+
+## The Fundamental Problem: No Working JSON System Examples
+
+**Key Issue:** While the JSON UI infrastructure exists, there are NO working examples of pages that successfully:
+1. Define a complex page entirely in JSON
+2. Handle state management in JSON
+3. Wire up all events in JSON
+4. Replace an existing TypeScript page
+
+The infrastructure exists but hasn't been proven to work end-to-end.
+
+## Architecture Deep Dive
+
+### JSON UI System Components
+```
+src/lib/json-ui/
+├── component-renderer.tsx    # Renders individual components from JSON
+├── page-renderer.tsx          # Renders full pages from JSON
+├── component-registry.ts      # Maps component names to React components
+├── expression-evaluator.ts    # Evaluates data binding expressions
+├── hooks.ts                   # Data source hooks
+├── schema.ts                  # TypeScript types
+└── wrappers/                  # Special wrappers for complex components
+```
+
+### How It Should Work (Theory)
+1. Create JSON page definition in `src/config/ui-examples/my-page.json`
+2. Load it with `<JSONSchemaPageLoader schemaPath="/config/ui-examples/my-page.json" />`
+3. JSON renderer looks up components in registry
+4. Registry loads them via import.meta.glob
+5. Components render with data bindings and events
+
+### Why It Doesn't Work (Reality)
+1. **Deleted components can't be loaded** - glob can't find non-existent files
+2. **Existing TypeScript pages import components directly** - they don't use JSON loader
+3. **No migration path** - can't gradually convert pages
+4. **Registry assumes all components exist as .tsx files** - no JSON-only components
+
+## Two Possible Solutions
+
+### Option A: Restore Components (Backward Compatibility)
+**Goal:** Make the build work by restoring deleted components
+
+Steps:
+1. Restore TreeCard, TreeListHeader, LoadingFallback as .tsx files
+2. Export NavigationItem, PageHeaderContent, preloadMonacoEditor
+3. Keep JSON system for future use
+4. Gradual migration when JSON system proven
+
+**Pros:** Quick fix, maintains compatibility, low risk
+**Cons:** Delays JSON transition, maintains technical debt
+
+### Option B: Full JSON Transition (Forward-Looking)
+**Goal:** Convert consuming pages to use JSON system
+
+Steps:
+1. Convert TreeListPanel.tsx to use JSON renderer
+2. Convert routes.tsx to load JSON configs
+3. Create JSON definitions for missing components
+4. Delete rigid TypeScript components
+5. Prove JSON system works end-to-end
+
+**Pros:** Achieves goal of JSON system, modern architecture
+**Cons:** High risk, requires extensive testing, may reveal more issues
+
+## Recommendation
+
+**Start with Option A**, then gradually move toward Option B:
+
+1. **Immediate Fix** (Option A):
+   - Restore the 3 deleted components (TreeCard, TreeListHeader, LoadingFallback)
+   - Fix exports for existing components (NavigationItem, PageHeaderContent, preloadMonacoEditor)
+   - Get the build working
+
+2. **Validation Phase**:
+   - Create 1-2 complete working examples of JSON pages
+   - Test all JSON system features (data binding, events, conditionals, loops)
+   - Document the conversion process
+   - Identify limitations
+
+3. **Gradual Migration** (Option B):
+   - Convert simple pages first
+   - Build tooling to help convert TypeScript to JSON
+   - Only delete TypeScript after JSON proven working
+   - Keep wrappers for complex components
+
+## Files Requiring Immediate Attention
+
+1. `src/components/molecules/TreeCard.tsx` - RESTORE from aa51074~1
+2. `src/components/molecules/TreeListHeader.tsx` - RESTORE from aa51074~1
+3. `src/components/molecules/LoadingFallback.tsx` - RESTORE from aa51074~1
+4. `src/components/molecules/index.ts` - ADD exports for NavigationItem, PageHeaderContent
+5. `src/components/molecules/LazyMonacoEditor.tsx` - Already exports preloadMonacoEditor, just needs index.ts export
+
+## Testing Plan
+
+After fixes:
+1. Run `npm run dev` - should start without errors
+2. Run `npm run build` - should complete successfully
+3. Run `npm run test:e2e` - should pass
+4. Manually test pages that use restored components
+5. Test JSON UI showcase page to verify JSON system still works
+
+## Long-Term Vision Questions
+
+1. Can complex state management work in JSON?
+2. How do we handle TypeScript types and intellisense for JSON configs?
+3. What about component composition and reusability?
+4. Performance implications of JSON parsing and dynamic loading?
+5. How do non-developers edit JSON configs safely?
+6. Can we generate JSON from existing TypeScript components?
+7. What's the migration path for 250+ existing pages?
+

codeql-db-optimized/codeql-database.yml

@@ -0,0 +1,13 @@
+---
+sourceLocationPrefix: /Users/rmac/.claude-worktrees/low-code-react-app-b/distracted-hawking/src
+baselineLinesOfCode: 43449
+unicodeNewlines: true
+columnKind: utf16
+primaryLanguage: javascript
+creationMetadata:
+  cliVersion: 2.23.9
+  creationTime: 2026-01-19T09:16:15.632234Z
+buildMode: none
+finalised: true
+overlayBaseDatabase: false
+overlayDatabase: false