Remove computed data sources

.claude/settings.local.json

@@ -3,52 +3,7 @@
     "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)"
+      "Bash(grep:*)"
     ]
-  },
-  "mcpServers": {
-    "codeql": {
-      "command": "node",
-      "args": ["scripts/mcp/codeql-mcp.cjs"]
-    }
   }
 }

AGENTS.md

@@ -1,32 +0,0 @@
-# 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

@@ -1,362 +0,0 @@
-# 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

@@ -1,59 +0,0 @@
-# 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_EXPRESSION_SYSTEM.md

@@ -1,62 +0,0 @@
-# JSON Expression System
-
-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.
-
-## Core Concepts
-
-### Expressions
-
-Expressions are string values that resolve against a data + event context:
-
-```json
-{
-  "expression": "event.target.value"
-}
-```
-
-Supported expression patterns:
-
-- `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`
-
-### Value Templates
-
-Value templates are JSON objects whose string values are evaluated as expressions:
-
-```json
-{
-  "valueTemplate": {
-    "id": "Date.now()",
-    "text": "data.newTodo",
-    "completed": false
-  }
-}
-```
-
-### Conditions
-
-Conditions use expression strings that are evaluated against the data context:
-
-```json
-{
-  "condition": "data.newTodo.length > 0"
-}
-```
-
-Supported condition patterns:
-
-- `data.field > 0`
-- `data.field.length > 0`
-- `data.field === 'value'`
-- `data.field != null`
-
-## Legacy Compute Functions (Removed)
-
-Schemas should no longer reference function names in `compute`, `transform`, or string-based
-condition fields. Use `expression` and `valueTemplate` instead.

ROOT_CAUSE_ANALYSIS.md

@@ -1,195 +0,0 @@
-# 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

@@ -1,13 +0,0 @@
----
-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