-
+
+
+
+
+
+
Start Building Your UI
+
Drag components from the left panel to begin designing.
+
+
+ →
+ Drag & Drop: Add components from the palette
+
+
+ →
+ Click to Select: Edit properties in the right panel
+
+
+ →
+ Keyboard Shortcuts: Ctrl+Z/Y for undo/redo
+
-
Start Building
-
Drag components from the left sidebar to start creating your UI.
)}
diff --git a/packages/designer/src/components/ComponentPalette.tsx b/packages/designer/src/components/ComponentPalette.tsx
index 2f2f9c80c..533432e34 100644
--- a/packages/designer/src/components/ComponentPalette.tsx
+++ b/packages/designer/src/components/ComponentPalette.tsx
@@ -14,7 +14,21 @@ import {
MousePointer2,
Box,
Grid,
- AlignJustify
+ AlignJustify,
+ PanelLeft,
+ FileText,
+ Circle,
+ User,
+ MessageSquare,
+ Bell,
+ Zap,
+ BarChart3,
+ Menu,
+ ChevronRight,
+ Layers,
+ Columns3,
+ Minus,
+ X
} from 'lucide-react';
import { cn } from '@object-ui/components';
import { ScrollArea } from '@object-ui/components';
@@ -26,20 +40,50 @@ interface ComponentPaletteProps {
// Map component types to Lucide icons
const getIconForType = (type: string) => {
switch (type) {
+ // Layout
case 'div':
case 'container': return Box;
case 'card': return CreditCard;
- case 'text':
- case 'span': return Type;
- case 'image': return Image;
+ case 'grid': return Grid;
+ case 'stack': return AlignJustify;
+ case 'separator': return Minus;
+
+ // Form
case 'button': return MousePointer2;
case 'input': return Type;
+ case 'textarea': return FileText;
case 'checkbox': return CheckSquare;
case 'switch': return ToggleLeft;
case 'select': return List;
+ case 'label': return Type;
+
+ // Data Display
+ case 'text':
+ case 'span': return Type;
+ case 'image': return Image;
+ case 'badge': return Circle;
+ case 'avatar': return User;
case 'table': return Table;
- case 'grid': return Grid;
- case 'stack': return AlignJustify;
+
+ // Feedback
+ case 'alert': return Bell;
+ case 'progress': return BarChart3;
+ case 'skeleton': return Layers;
+ case 'toast': return MessageSquare;
+
+ // Overlay
+ case 'dialog':
+ case 'drawer':
+ case 'popover':
+ case 'tooltip':
+ case 'sheet': return PanelLeft;
+
+ // Navigation
+ case 'tabs': return Columns3;
+ case 'breadcrumb': return ChevronRight;
+ case 'pagination': return Menu;
+ case 'menubar': return Menu;
+
default: return Square;
}
};
@@ -57,6 +101,7 @@ const CATEGORIES = {
export const ComponentPalette: React.FC
= ({ className }) => {
const { setDraggingType } = useDesigner();
const allConfigs = ComponentRegistry.getAllConfigs();
+ const [searchQuery, setSearchQuery] = React.useState('');
const handleDragStart = (e: React.DragEvent, type: string) => {
e.dataTransfer.setData('componentType', type);
@@ -103,6 +148,18 @@ export const ComponentPalette: React.FC = ({ className })
);
};
+ // Filter components by search query
+ const filterBySearch = (types: string[]) => {
+ if (!searchQuery.trim()) return types;
+
+ const query = searchQuery.toLowerCase();
+ return types.filter(type => {
+ const config = ComponentRegistry.getConfig(type);
+ return type.toLowerCase().includes(query) ||
+ config?.label?.toLowerCase().includes(query);
+ });
+ };
+
// Filter available components based on category
const getComponentscategory = (categoryComponents: string[]) => {
return categoryComponents.filter(type => ComponentRegistry.getConfig(type));
@@ -110,15 +167,35 @@ export const ComponentPalette: React.FC = ({ className })
return (
-
-
Components
-
Drag to add to canvas
+
+
+
Components
+
Drag to add to canvas
+
+
+ setSearchQuery(e.target.value)}
+ className="w-full h-8 px-3 text-xs border rounded-md bg-gray-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+ />
+ {searchQuery && (
+
+ )}
+
{Object.entries(CATEGORIES).map(([category, types]) => {
- const availableTypes = getComponentscategory(types);
+ const availableTypes = filterBySearch(getComponentscategory(types));
if (availableTypes.length === 0) return null;
return (
@@ -134,7 +211,7 @@ export const ComponentPalette: React.FC
= ({ className })
{/* Fallback for uncategorized */}
{(() => {
const categorized = new Set(Object.values(CATEGORIES).flat());
- const uncategorized = Object.keys(allConfigs).filter(t => !categorized.has(t));
+ const uncategorized = filterBySearch(Object.keys(allConfigs).filter(t => !categorized.has(t)));
if (uncategorized.length === 0) return null;
diff --git a/packages/designer/src/components/Designer.tsx b/packages/designer/src/components/Designer.tsx
index 384d5ec11..e8dbf55b8 100644
--- a/packages/designer/src/components/Designer.tsx
+++ b/packages/designer/src/components/Designer.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import { DesignerProvider } from '../context/DesignerContext';
import { ComponentPalette } from './ComponentPalette';
import { Canvas } from './Canvas';
import { PropertyPanel } from './PropertyPanel';
import { Toolbar } from './Toolbar';
+import { useDesigner } from '../context/DesignerContext';
import type { SchemaNode } from '@object-ui/core';
interface DesignerProps {
@@ -11,29 +12,81 @@ interface DesignerProps {
onSchemaChange?: (schema: SchemaNode) => void;
}
-export const Designer: React.FC = ({ initialSchema, onSchemaChange }) => {
+const DesignerContent: React.FC = () => {
+ const { undo, redo, copyNode, pasteNode, removeNode, selectedNodeId, canUndo, canRedo } = useDesigner();
+
+ // Keyboard shortcuts
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ // Check if we're in an editable element
+ const target = e.target as HTMLElement;
+ const isEditing =
+ target.tagName === 'INPUT' ||
+ target.tagName === 'TEXTAREA' ||
+ target.tagName === 'SELECT' ||
+ target.isContentEditable;
+
+ // Undo: Ctrl+Z / Cmd+Z
+ if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey && canUndo) {
+ e.preventDefault();
+ undo();
+ }
+ // Redo: Ctrl+Y / Cmd+Shift+Z
+ else if (((e.ctrlKey || e.metaKey) && e.key === 'y') || ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z')) {
+ if (canRedo) {
+ e.preventDefault();
+ redo();
+ }
+ }
+ // Copy: Ctrl+C / Cmd+C (only when not editing)
+ else if ((e.ctrlKey || e.metaKey) && e.key === 'c' && !isEditing && selectedNodeId) {
+ e.preventDefault();
+ copyNode(selectedNodeId);
+ }
+ // Paste: Ctrl+V / Cmd+V (only when not editing)
+ else if ((e.ctrlKey || e.metaKey) && e.key === 'v' && !isEditing) {
+ e.preventDefault();
+ pasteNode(selectedNodeId);
+ }
+ // Delete: Delete / Backspace (only when not editing)
+ else if ((e.key === 'Delete' || e.key === 'Backspace') && !isEditing && selectedNodeId) {
+ e.preventDefault();
+ removeNode(selectedNodeId);
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [undo, redo, copyNode, pasteNode, removeNode, selectedNodeId, canUndo, canRedo]);
+
return (
-
-
-
+
+
+
+
+ {/* Left Sidebar */}
+
+
+
-
- {/* Left Sidebar */}
-
-
-
-
- {/* Main Canvas Area */}
-
-
-
-
- {/* Right Sidebar */}
-
+ {/* Main Canvas Area */}
+
+
+
+
+ {/* Right Sidebar */}
+
+
+ );
+};
+
+export const Designer: React.FC
= ({ initialSchema, onSchemaChange }) => {
+ return (
+
+
);
};
diff --git a/packages/designer/src/components/PropertyPanel.tsx b/packages/designer/src/components/PropertyPanel.tsx
index 4ee707a80..9f62bf237 100644
--- a/packages/designer/src/components/PropertyPanel.tsx
+++ b/packages/designer/src/components/PropertyPanel.tsx
@@ -14,7 +14,7 @@ import {
} from "@object-ui/components"
import { Textarea } from '@object-ui/components';
import { ScrollArea } from '@object-ui/components';
-import { Settings2, Trash2, Layers, Type } from 'lucide-react';
+import { Settings2, Trash2, Layers, Copy, ClipboardPaste } from 'lucide-react';
import { cn } from '@object-ui/components';
import type { ComponentInput } from '@object-ui/core';
@@ -23,7 +23,7 @@ interface PropertyPanelProps {
}
export const PropertyPanel: React.FC = ({ className }) => {
- const { schema, selectedNodeId, updateNode, removeNode } = useDesigner();
+ const { schema, selectedNodeId, updateNode, removeNode, copyNode, pasteNode, canPaste } = useDesigner();
// Recursive finder
const findNode = (node: any, id: string): any => {
@@ -155,22 +155,43 @@ export const PropertyPanel: React.FC = ({ className }) => {
return (
-
+
{config?.label || selectedNode.type}
{selectedNode.type}
ID: {selectedNode.id}
-
+
+
+
+
+
-
-
- O
+
+
+
+
+ O
+
+
Object UI Designer
+
Beta
-
Object UI
-
Beta
-
-
-
-
+ {/* Center Controls */}
+
+ {/* Viewport Toggle */}
+
+
+
+
+
+ Desktop View (1024px)
+
+
+
+
+
+ Tablet View (768px)
+
+
+
+
+
+ Mobile View (375px)
+
+
+ {/* Right Actions */}
-
-