diff --git a/audit-report.json b/audit-report.json
index eb5c7f4..a4673aa 100644
--- a/audit-report.json
+++ b/audit-report.json
@@ -1,5 +1,5 @@
{
- "timestamp": "2026-01-21T03:02:07.273Z",
+ "timestamp": "2026-01-21T03:13:44.395Z",
"issues": [
{
"severity": "warning",
diff --git a/src/components/json-definitions/schema-editor-canvas.json b/src/components/json-definitions/schema-editor-canvas.json
new file mode 100644
index 0000000..cfadcca
--- /dev/null
+++ b/src/components/json-definitions/schema-editor-canvas.json
@@ -0,0 +1,26 @@
+{
+ "id": "schema-editor-canvas",
+ "type": "div",
+ "props": {
+ "className": "flex-1 flex flex-col"
+ },
+ "children": [
+ {
+ "id": "canvas-renderer-container",
+ "type": "CanvasRenderer",
+ "bindings": {
+ "components": { "source": "components" },
+ "selectedId": { "source": "selectedId" },
+ "hoveredId": { "source": "hoveredId" },
+ "draggedOverId": { "source": "draggedOverId" },
+ "dropPosition": { "source": "dropPosition" },
+ "onSelect": { "source": "onSelect" },
+ "onHover": { "source": "onHover" },
+ "onHoverEnd": { "source": "onHoverEnd" },
+ "onDragOver": { "source": "onDragOver" },
+ "onDragLeave": { "source": "onDragLeave" },
+ "onDrop": { "source": "onDrop" }
+ }
+ }
+ ]
+}
diff --git a/src/components/json-definitions/schema-editor-layout.json b/src/components/json-definitions/schema-editor-layout.json
new file mode 100644
index 0000000..2c47454
--- /dev/null
+++ b/src/components/json-definitions/schema-editor-layout.json
@@ -0,0 +1,74 @@
+{
+ "id": "schema-editor-layout",
+ "type": "div",
+ "props": {
+ "className": "h-full flex flex-col bg-background"
+ },
+ "children": [
+ {
+ "id": "toolbar-section",
+ "type": "SchemaEditorToolbar",
+ "bindings": {
+ "onImport": { "source": "onImport" },
+ "onExport": { "source": "onExport" },
+ "onCopy": { "source": "onCopy" },
+ "onPreview": { "source": "onPreview" },
+ "onClear": { "source": "onClear" }
+ }
+ },
+ {
+ "id": "main-content",
+ "type": "div",
+ "props": {
+ "className": "flex-1 flex overflow-hidden"
+ },
+ "children": [
+ {
+ "id": "sidebar-section",
+ "type": "SchemaEditorSidebar",
+ "bindings": {
+ "onDragStart": { "source": "onComponentDragStart" }
+ }
+ },
+ {
+ "id": "canvas-section",
+ "type": "SchemaEditorCanvas",
+ "bindings": {
+ "components": { "source": "components" },
+ "selectedId": { "source": "selectedId" },
+ "hoveredId": { "source": "hoveredId" },
+ "draggedOverId": { "source": "draggedOverId" },
+ "dropPosition": { "source": "dropPosition" },
+ "onSelect": { "source": "onSelect" },
+ "onHover": { "source": "onHover" },
+ "onHoverEnd": { "source": "onHoverEnd" },
+ "onDragOver": { "source": "onDragOver" },
+ "onDragLeave": { "source": "onDragLeave" },
+ "onDrop": { "source": "onDrop" }
+ }
+ },
+ {
+ "id": "properties-section",
+ "type": "SchemaEditorPropertiesPanel",
+ "bindings": {
+ "components": { "source": "components" },
+ "selectedId": { "source": "selectedId" },
+ "hoveredId": { "source": "hoveredId" },
+ "draggedOverId": { "source": "draggedOverId" },
+ "dropPosition": { "source": "dropPosition" },
+ "selectedComponent": { "source": "selectedComponent" },
+ "onSelect": { "source": "onSelect" },
+ "onHover": { "source": "onHover" },
+ "onHoverEnd": { "source": "onHoverEnd" },
+ "onDragStart": { "source": "onTreeDragStart" },
+ "onDragOver": { "source": "onDragOver" },
+ "onDragLeave": { "source": "onDragLeave" },
+ "onDrop": { "source": "onDrop" },
+ "onUpdate": { "source": "onUpdate" },
+ "onDelete": { "source": "onDelete" }
+ }
+ }
+ ]
+ }
+ ]
+}
diff --git a/src/components/json-definitions/schema-editor-properties-panel.json b/src/components/json-definitions/schema-editor-properties-panel.json
new file mode 100644
index 0000000..672770c
--- /dev/null
+++ b/src/components/json-definitions/schema-editor-properties-panel.json
@@ -0,0 +1,60 @@
+{
+ "id": "schema-editor-properties-panel",
+ "type": "div",
+ "props": {
+ "className": "w-80 border-l border-border bg-card overflow-y-auto"
+ },
+ "children": [
+ {
+ "id": "properties-content",
+ "type": "div",
+ "props": {
+ "className": "p-4 space-y-4"
+ },
+ "conditional": { "if": "selectedComponent" },
+ "children": [
+ {
+ "id": "component-id-display",
+ "type": "div",
+ "props": { "className": "space-y-2" },
+ "children": [
+ {
+ "type": "span",
+ "props": { "className": "text-sm font-medium" },
+ "bindings": { "children": "'Component ID'" }
+ },
+ {
+ "type": "div",
+ "props": { "className": "px-2 py-1 bg-muted rounded text-sm font-mono" },
+ "bindings": { "children": "selectedComponent?.id" }
+ }
+ ]
+ },
+ {
+ "id": "component-type-display",
+ "type": "div",
+ "props": { "className": "space-y-2" },
+ "children": [
+ {
+ "type": "span",
+ "props": { "className": "text-sm font-medium" },
+ "bindings": { "children": "'Type'" }
+ },
+ {
+ "type": "div",
+ "props": { "className": "px-2 py-1 bg-muted rounded text-sm font-mono" },
+ "bindings": { "children": "selectedComponent?.type" }
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "id": "no-selection-message",
+ "type": "div",
+ "props": { "className": "p-4 text-sm text-muted-foreground" },
+ "conditional": { "if": "!selectedComponent" },
+ "bindings": { "children": "'Select a component to edit its properties'" }
+ }
+ ]
+}
diff --git a/src/components/json-definitions/schema-editor-sidebar.json b/src/components/json-definitions/schema-editor-sidebar.json
new file mode 100644
index 0000000..d008a7d
--- /dev/null
+++ b/src/components/json-definitions/schema-editor-sidebar.json
@@ -0,0 +1,16 @@
+{
+ "id": "schema-editor-sidebar",
+ "type": "div",
+ "props": {
+ "className": "w-64 border-r border-border bg-card"
+ },
+ "children": [
+ {
+ "id": "component-palette-container",
+ "type": "ComponentPalette",
+ "bindings": {
+ "onDragStart": { "source": "onDragStart" }
+ }
+ }
+ ]
+}
diff --git a/src/components/json-definitions/schema-editor-status-bar.json b/src/components/json-definitions/schema-editor-status-bar.json
new file mode 100644
index 0000000..86e6b6e
--- /dev/null
+++ b/src/components/json-definitions/schema-editor-status-bar.json
@@ -0,0 +1,62 @@
+{
+ "id": "schema-editor-status-bar",
+ "type": "div",
+ "props": {
+ "className": "border-t border-border px-4 py-2 bg-card flex items-center justify-between"
+ },
+ "bindings": {
+ "className": {
+ "source": "className",
+ "transform": "className ? `border-t border-border px-4 py-2 bg-card flex items-center justify-between ${className}` : 'border-t border-border px-4 py-2 bg-card flex items-center justify-between'"
+ }
+ },
+ "children": [
+ {
+ "id": "status-info",
+ "type": "div",
+ "props": { "className": "flex items-center gap-4 text-sm" },
+ "children": [
+ {
+ "id": "component-count",
+ "type": "span",
+ "props": { "className": "text-muted-foreground" },
+ "children": [
+ {
+ "type": "span",
+ "props": { "className": "font-medium text-foreground" },
+ "bindings": { "children": "componentCount" }
+ },
+ {
+ "type": "span",
+ "bindings": {
+ "children": {
+ "source": "componentCount",
+ "transform": "componentCount !== 1 ? ' components' : ' component'"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "id": "selected-type",
+ "type": "span",
+ "props": { "className": "text-muted-foreground" },
+ "conditional": { "if": "selectedComponentType" },
+ "bindings": {
+ "children": {
+ "source": "selectedComponentType",
+ "transform": "`Type: ${selectedComponentType}`"
+ }
+ }
+ },
+ {
+ "id": "unsaved-indicator",
+ "type": "span",
+ "props": { "className": "text-amber-600 font-medium" },
+ "conditional": { "if": "hasUnsavedChanges" },
+ "bindings": { "children": "'Unsaved changes'" }
+ }
+ ]
+ }
+ ]
+}
diff --git a/src/components/json-definitions/schema-editor-toolbar.json b/src/components/json-definitions/schema-editor-toolbar.json
new file mode 100644
index 0000000..e6a3e9c
--- /dev/null
+++ b/src/components/json-definitions/schema-editor-toolbar.json
@@ -0,0 +1,98 @@
+{
+ "id": "schema-editor-toolbar",
+ "type": "div",
+ "props": {
+ "className": "border-b border-border px-6 py-3 bg-card"
+ },
+ "children": [
+ {
+ "id": "toolbar-content",
+ "type": "div",
+ "props": { "className": "flex justify-between items-center" },
+ "children": [
+ {
+ "id": "toolbar-left",
+ "type": "div",
+ "props": { "className": "flex flex-col gap-1" },
+ "children": [
+ {
+ "id": "toolbar-title",
+ "type": "span",
+ "props": {
+ "className": "text-lg font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent"
+ },
+ "bindings": { "children": "'Schema Editor'" }
+ }
+ ]
+ },
+ {
+ "id": "toolbar-actions",
+ "type": "div",
+ "props": { "className": "flex gap-2" },
+ "children": [
+ {
+ "id": "import-button",
+ "type": "Button",
+ "props": {
+ "variant": "outline",
+ "size": "sm"
+ },
+ "bindings": {
+ "onClick": { "source": "onImport" },
+ "children": "'Import'"
+ }
+ },
+ {
+ "id": "export-button",
+ "type": "Button",
+ "props": {
+ "variant": "outline",
+ "size": "sm"
+ },
+ "bindings": {
+ "onClick": { "source": "onExport" },
+ "children": "'Export'"
+ }
+ },
+ {
+ "id": "copy-button",
+ "type": "Button",
+ "props": {
+ "variant": "outline",
+ "size": "sm"
+ },
+ "bindings": {
+ "onClick": { "source": "onCopy" },
+ "children": "'Copy'"
+ }
+ },
+ {
+ "id": "preview-button",
+ "type": "Button",
+ "props": {
+ "variant": "outline",
+ "size": "sm"
+ },
+ "bindings": {
+ "onClick": { "source": "onPreview" },
+ "children": "'Preview'"
+ }
+ },
+ {
+ "id": "clear-button",
+ "type": "Button",
+ "props": {
+ "variant": "destructive",
+ "size": "sm"
+ },
+ "bindings": {
+ "onClick": { "source": "onClear" },
+ "children": "'Clear'"
+ }
+ }
+ ]
+ }
+ ]
+ }
+ ]
+}
diff --git a/src/components/organisms/SchemaEditorCanvas.tsx b/src/components/organisms/SchemaEditorCanvas.tsx
deleted file mode 100644
index 4f5f855..0000000
--- a/src/components/organisms/SchemaEditorCanvas.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { CanvasRenderer } from '@/components/molecules/CanvasRenderer'
-import { UIComponent } from '@/types/json-ui'
-
-interface SchemaEditorCanvasProps {
- components: UIComponent[]
- selectedId: string | null
- hoveredId: string | null
- draggedOverId: string | null
- dropPosition: 'before' | 'after' | 'inside' | null
- onSelect: (id: string | null) => void
- onHover: (id: string | null) => void
- onHoverEnd: () => void
- onDragOver: (id: string, e: React.DragEvent) => void
- onDragLeave: (e: React.DragEvent) => void
- onDrop: (targetId: string, e: React.DragEvent) => void
-}
-
-export function SchemaEditorCanvas({
- components,
- selectedId,
- hoveredId,
- draggedOverId,
- dropPosition,
- onSelect,
- onHover,
- onHoverEnd,
- onDragOver,
- onDragLeave,
- onDrop,
-}: SchemaEditorCanvasProps) {
- return (
-
-
-
- )
-}
diff --git a/src/components/organisms/SchemaEditorLayout.tsx b/src/components/organisms/SchemaEditorLayout.tsx
deleted file mode 100644
index aea9be3..0000000
--- a/src/components/organisms/SchemaEditorLayout.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { UIComponent, PageSchema } from '@/types/json-ui'
-import { ComponentDefinition } from '@/lib/component-definition-types'
-import { SchemaEditorToolbar } from './SchemaEditorToolbar'
-import { SchemaEditorSidebar } from './SchemaEditorSidebar'
-import { SchemaEditorCanvas } from './SchemaEditorCanvas'
-import { SchemaEditorPropertiesPanel } from './SchemaEditorPropertiesPanel'
-
-interface SchemaEditorLayoutProps {
- components: UIComponent[]
- selectedId: string | null
- hoveredId: string | null
- draggedOverId: string | null
- dropPosition: 'before' | 'after' | 'inside' | null
- selectedComponent: UIComponent | null
- onSelect: (id: string | null) => void
- onHover: (id: string | null) => void
- onHoverEnd: () => void
- onComponentDragStart: (component: ComponentDefinition, e: React.DragEvent) => void
- onTreeDragStart: (id: string, e: React.DragEvent) => void
- onDragOver: (id: string, e: React.DragEvent) => void
- onDragLeave: (e: React.DragEvent) => void
- onDrop: (targetId: string, e: React.DragEvent) => void
- onUpdate: (updates: Partial) => void
- onDelete: () => void
- onImport: () => void
- onExport: () => void
- onCopy: () => void
- onPreview: () => void
- onClear: () => void
-}
-
-export function SchemaEditorLayout({
- components,
- selectedId,
- hoveredId,
- draggedOverId,
- dropPosition,
- selectedComponent,
- onSelect,
- onHover,
- onHoverEnd,
- onComponentDragStart,
- onTreeDragStart,
- onDragOver,
- onDragLeave,
- onDrop,
- onUpdate,
- onDelete,
- onImport,
- onExport,
- onCopy,
- onPreview,
- onClear,
-}: SchemaEditorLayoutProps) {
- return (
-
- )
-}
diff --git a/src/components/organisms/SchemaEditorPropertiesPanel.tsx b/src/components/organisms/SchemaEditorPropertiesPanel.tsx
deleted file mode 100644
index 76dde73..0000000
--- a/src/components/organisms/SchemaEditorPropertiesPanel.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { ComponentTree } from '@/components/molecules/ComponentTree'
-import { PropertyEditor } from '@/components/molecules/PropertyEditor'
-import { Separator, Stack } from '@/components/atoms'
-import { UIComponent } from '@/types/json-ui'
-
-interface SchemaEditorPropertiesPanelProps {
- components: UIComponent[]
- selectedId: string | null
- hoveredId: string | null
- draggedOverId: string | null
- dropPosition: 'before' | 'after' | 'inside' | null
- selectedComponent: UIComponent | null
- onSelect: (id: string | null) => void
- onHover: (id: string | null) => void
- onHoverEnd: () => void
- onDragStart: (id: string, e: React.DragEvent) => void
- onDragOver: (id: string, e: React.DragEvent) => void
- onDragLeave: (e: React.DragEvent) => void
- onDrop: (targetId: string, e: React.DragEvent) => void
- onUpdate: (updates: Partial) => void
- onDelete: () => void
-}
-
-export function SchemaEditorPropertiesPanel({
- components,
- selectedId,
- hoveredId,
- draggedOverId,
- dropPosition,
- selectedComponent,
- onSelect,
- onHover,
- onHoverEnd,
- onDragStart,
- onDragOver,
- onDragLeave,
- onDrop,
- onUpdate,
- onDelete,
-}: SchemaEditorPropertiesPanelProps) {
- return (
-
-
-
-
-
-
-
-
-
- )
-}
diff --git a/src/components/organisms/SchemaEditorSidebar.tsx b/src/components/organisms/SchemaEditorSidebar.tsx
deleted file mode 100644
index dfba600..0000000
--- a/src/components/organisms/SchemaEditorSidebar.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ComponentPalette } from '@/components/molecules/ComponentPalette'
-import { ComponentDefinition } from '@/lib/component-definition-types'
-
-interface SchemaEditorSidebarProps {
- onDragStart: (component: ComponentDefinition, e: React.DragEvent) => void
-}
-
-export function SchemaEditorSidebar({ onDragStart }: SchemaEditorSidebarProps) {
- return (
-
-
-
- )
-}
diff --git a/src/components/organisms/SchemaEditorStatusBar.tsx b/src/components/organisms/SchemaEditorStatusBar.tsx
deleted file mode 100644
index 989b7d8..0000000
--- a/src/components/organisms/SchemaEditorStatusBar.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { cn } from '@/lib/utils'
-import { Badge, Chip, Text, Flex } from '@/components/atoms'
-
-interface SchemaEditorStatusBarProps {
- componentCount: number
- selectedComponentType?: string
- hasUnsavedChanges?: boolean
- className?: string
-}
-
-export function SchemaEditorStatusBar({
- componentCount,
- selectedComponentType,
- hasUnsavedChanges = false,
- className
-}: SchemaEditorStatusBarProps) {
- return (
-
-
-
- {componentCount} component{componentCount !== 1 ? 's' : ''}
-
-
- {selectedComponentType && (
-
- Selected:
-
- {selectedComponentType}
-
-
- )}
-
-
-
- {hasUnsavedChanges && (
-
- Unsaved changes
-
- )}
-
-
- )
-}
diff --git a/src/components/organisms/SchemaEditorToolbar.tsx b/src/components/organisms/SchemaEditorToolbar.tsx
deleted file mode 100644
index 0dcb236..0000000
--- a/src/components/organisms/SchemaEditorToolbar.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {
- Download,
- Upload,
- Play,
- Trash,
- Copy,
-} from '@phosphor-icons/react'
-import {
- Heading,
- TextGradient,
- Text,
- Separator,
- Stack,
- ActionButton,
- Flex
-} from '@/components/atoms'
-
-interface SchemaEditorToolbarProps {
- onImport: () => void
- onExport: () => void
- onCopy: () => void
- onPreview: () => void
- onClear: () => void
-}
-
-export function SchemaEditorToolbar({
- onImport,
- onExport,
- onCopy,
- onPreview,
- onClear,
-}: SchemaEditorToolbarProps) {
- return (
-
-
-
-
- Schema Editor
-
-
- Build JSON UI schemas with drag-and-drop
-
-
-
-
- }
- label="Import"
- onClick={onImport}
- variant="outline"
- size="sm"
- />
- }
- label="Copy JSON"
- onClick={onCopy}
- variant="outline"
- size="sm"
- />
- }
- label="Export"
- onClick={onExport}
- variant="outline"
- size="sm"
- />
-
- }
- label="Preview"
- onClick={onPreview}
- variant="outline"
- size="sm"
- />
- }
- label="Clear"
- onClick={onClear}
- variant="destructive"
- size="sm"
- />
-
-
-
- )
-}
diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts
index c0115e5..60701c3 100644
--- a/src/components/organisms/index.ts
+++ b/src/components/organisms/index.ts
@@ -1,7 +1,2 @@
-export { SchemaEditorLayout } from './SchemaEditorLayout'
-export { SchemaEditorCanvas } from './SchemaEditorCanvas'
-export { SchemaEditorPropertiesPanel } from './SchemaEditorPropertiesPanel'
-export { SchemaEditorSidebar } from './SchemaEditorSidebar'
-export { SchemaEditorStatusBar } from './SchemaEditorStatusBar'
-export { SchemaEditorToolbar } from './SchemaEditorToolbar'
+export { SchemaEditorLayout, SchemaEditorCanvas, SchemaEditorPropertiesPanel, SchemaEditorSidebar, SchemaEditorStatusBar, SchemaEditorToolbar } from '@/lib/json-ui/json-components'
export { JSONUIShowcase } from '../JSONUIShowcase'
diff --git a/src/lib/json-ui/interfaces/index.ts b/src/lib/json-ui/interfaces/index.ts
index 1bb9469..b12a7c1 100644
--- a/src/lib/json-ui/interfaces/index.ts
+++ b/src/lib/json-ui/interfaces/index.ts
@@ -128,3 +128,9 @@ export * from './toolbar-actions'
export * from './app-header'
export * from './loading-screen'
export * from './sparkle'
+export * from './schema-editor-canvas'
+export * from './schema-editor-layout'
+export * from './schema-editor-properties-panel'
+export * from './schema-editor-sidebar'
+export * from './schema-editor-status-bar'
+export * from './schema-editor-toolbar'
diff --git a/src/lib/json-ui/interfaces/schema-editor-canvas.ts b/src/lib/json-ui/interfaces/schema-editor-canvas.ts
new file mode 100644
index 0000000..dfb0ee8
--- /dev/null
+++ b/src/lib/json-ui/interfaces/schema-editor-canvas.ts
@@ -0,0 +1,15 @@
+import { UIComponent } from '@/types/json-ui'
+
+export interface SchemaEditorCanvasProps {
+ components: UIComponent[]
+ selectedId: string | null
+ hoveredId: string | null
+ draggedOverId: string | null
+ dropPosition: 'before' | 'after' | 'inside' | null
+ onSelect: (id: string | null) => void
+ onHover: (id: string | null) => void
+ onHoverEnd: () => void
+ onDragOver: (id: string, e: React.DragEvent) => void
+ onDragLeave: (e: React.DragEvent) => void
+ onDrop: (targetId: string, e: React.DragEvent) => void
+}
diff --git a/src/lib/json-ui/interfaces/schema-editor-layout.ts b/src/lib/json-ui/interfaces/schema-editor-layout.ts
new file mode 100644
index 0000000..a40db3f
--- /dev/null
+++ b/src/lib/json-ui/interfaces/schema-editor-layout.ts
@@ -0,0 +1,26 @@
+import { UIComponent } from '@/types/json-ui'
+import { ComponentDefinition } from '@/lib/component-definition-types'
+
+export interface SchemaEditorLayoutProps {
+ components: UIComponent[]
+ selectedId: string | null
+ hoveredId: string | null
+ draggedOverId: string | null
+ dropPosition: 'before' | 'after' | 'inside' | null
+ selectedComponent: UIComponent | null
+ onSelect: (id: string | null) => void
+ onHover: (id: string | null) => void
+ onHoverEnd: () => void
+ onComponentDragStart: (component: ComponentDefinition, e: React.DragEvent) => void
+ onTreeDragStart: (id: string, e: React.DragEvent) => void
+ onDragOver: (id: string, e: React.DragEvent) => void
+ onDragLeave: (e: React.DragEvent) => void
+ onDrop: (targetId: string, e: React.DragEvent) => void
+ onUpdate: (updates: Partial) => void
+ onDelete: () => void
+ onImport: () => void
+ onExport: () => void
+ onCopy: () => void
+ onPreview: () => void
+ onClear: () => void
+}
diff --git a/src/lib/json-ui/interfaces/schema-editor-properties-panel.ts b/src/lib/json-ui/interfaces/schema-editor-properties-panel.ts
new file mode 100644
index 0000000..d7016c2
--- /dev/null
+++ b/src/lib/json-ui/interfaces/schema-editor-properties-panel.ts
@@ -0,0 +1,19 @@
+import { UIComponent } from '@/types/json-ui'
+
+export interface SchemaEditorPropertiesPanelProps {
+ components: UIComponent[]
+ selectedId: string | null
+ hoveredId: string | null
+ draggedOverId: string | null
+ dropPosition: 'before' | 'after' | 'inside' | null
+ selectedComponent: UIComponent | null
+ onSelect: (id: string | null) => void
+ onHover: (id: string | null) => void
+ onHoverEnd: () => void
+ onDragStart: (id: string, e: React.DragEvent) => void
+ onDragOver: (id: string, e: React.DragEvent) => void
+ onDragLeave: (e: React.DragEvent) => void
+ onDrop: (targetId: string, e: React.DragEvent) => void
+ onUpdate: (updates: Partial) => void
+ onDelete: () => void
+}
diff --git a/src/lib/json-ui/interfaces/schema-editor-sidebar.ts b/src/lib/json-ui/interfaces/schema-editor-sidebar.ts
new file mode 100644
index 0000000..85c1d66
--- /dev/null
+++ b/src/lib/json-ui/interfaces/schema-editor-sidebar.ts
@@ -0,0 +1,5 @@
+import { ComponentDefinition } from '@/lib/component-definition-types'
+
+export interface SchemaEditorSidebarProps {
+ onDragStart: (component: ComponentDefinition, e: React.DragEvent) => void
+}
diff --git a/src/lib/json-ui/interfaces/schema-editor-status-bar.ts b/src/lib/json-ui/interfaces/schema-editor-status-bar.ts
new file mode 100644
index 0000000..197fbd8
--- /dev/null
+++ b/src/lib/json-ui/interfaces/schema-editor-status-bar.ts
@@ -0,0 +1,6 @@
+export interface SchemaEditorStatusBarProps {
+ componentCount: number
+ selectedComponentType?: string
+ hasUnsavedChanges?: boolean
+ className?: string
+}
diff --git a/src/lib/json-ui/interfaces/schema-editor-toolbar.ts b/src/lib/json-ui/interfaces/schema-editor-toolbar.ts
new file mode 100644
index 0000000..bb21964
--- /dev/null
+++ b/src/lib/json-ui/interfaces/schema-editor-toolbar.ts
@@ -0,0 +1,7 @@
+export interface SchemaEditorToolbarProps {
+ onImport: () => void
+ onExport: () => void
+ onCopy: () => void
+ onPreview: () => void
+ onClear: () => void
+}
diff --git a/src/lib/json-ui/json-components.ts b/src/lib/json-ui/json-components.ts
index 21ecf63..63c3015 100644
--- a/src/lib/json-ui/json-components.ts
+++ b/src/lib/json-ui/json-components.ts
@@ -49,6 +49,12 @@ import type {
DataSourceManagerProps,
NavigationMenuProps,
TreeListPanelProps,
+ SchemaEditorCanvasProps,
+ SchemaEditorLayoutProps,
+ SchemaEditorPropertiesPanelProps,
+ SchemaEditorSidebarProps,
+ SchemaEditorStatusBarProps,
+ SchemaEditorToolbarProps,
ActionButtonProps,
ActionCardProps,
ActionIconProps,
@@ -265,6 +271,12 @@ import emptyCanvasStateDef from '@/components/json-definitions/empty-canvas-stat
import schemaCodeViewerDef from '@/components/json-definitions/schema-code-viewer.json'
import toolbarActionsDef from '@/components/json-definitions/toolbar-actions.json'
import appHeaderDef from '@/components/json-definitions/app-header.json'
+import schemaEditorCanvasDef from '@/components/json-definitions/schema-editor-canvas.json'
+import schemaEditorLayoutDef from '@/components/json-definitions/schema-editor-layout.json'
+import schemaEditorPropertiesPanelDef from '@/components/json-definitions/schema-editor-properties-panel.json'
+import schemaEditorSidebarDef from '@/components/json-definitions/schema-editor-sidebar.json'
+import schemaEditorStatusBarDef from '@/components/json-definitions/schema-editor-status-bar.json'
+import schemaEditorToolbarDef from '@/components/json-definitions/schema-editor-toolbar.json'
// Create pure JSON components (no hooks)
export const BindingIndicator = createJsonComponent(bindingIndicatorDef)
@@ -374,6 +386,12 @@ export const EmptyCanvasState = createJsonComponent(empty
export const SchemaCodeViewer = createJsonComponent(schemaCodeViewerDef)
export const ToolbarActions = createJsonComponent(toolbarActionsDef)
export const AppHeader = createJsonComponent(appHeaderDef)
+export const SchemaEditorCanvas = createJsonComponent(schemaEditorCanvasDef)
+export const SchemaEditorLayout = createJsonComponent(schemaEditorLayoutDef)
+export const SchemaEditorPropertiesPanel = createJsonComponent(schemaEditorPropertiesPanelDef)
+export const SchemaEditorSidebar = createJsonComponent(schemaEditorSidebarDef)
+export const SchemaEditorStatusBar = createJsonComponent(schemaEditorStatusBarDef)
+export const SchemaEditorToolbar = createJsonComponent(schemaEditorToolbarDef)
// Create JSON components with hooks
export const SaveIndicator = createJsonComponentWithHooks(saveIndicatorDef, {