Add touch drag support and responsive design for tablets

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Author: Copilot

packages/designer/src/components/ComponentPalette.tsx

@@ -32,6 +32,7 @@ import {
 } from 'lucide-react';
 import { cn } from '@object-ui/components';
 import { ScrollArea } from '@object-ui/components';
+import { enableTouchDrag, isTouchDevice } from '../utils/touchDragPolyfill';
 
 interface ComponentPaletteProps {
   className?: string;
@@ -98,6 +99,77 @@ const CATEGORIES = {
     'Navigation': ['tabs', 'breadcrumb', 'pagination', 'menubar']
 };
 
+// Component item with touch support
+interface ComponentItemProps {
+  type: string;
+  config: any;
+  Icon: any;
+  isResizable: boolean;
+  onDragStart: (e: React.DragEvent, type: string) => void;
+  onDragEnd: () => void;
+}
+
+const ComponentItem: React.FC<ComponentItemProps> = React.memo(({ 
+  type, 
+  config, 
+  Icon, 
+  isResizable, 
+  onDragStart, 
+  onDragEnd 
+}) => {
+  const itemRef = React.useRef<HTMLDivElement>(null);
+  const { setDraggingType } = useDesigner();
+
+  // Setup touch drag support
+  React.useEffect(() => {
+    if (!itemRef.current || !isTouchDevice()) return;
+
+    const cleanup = enableTouchDrag(itemRef.current, {
+      dragData: { componentType: type },
+      onDragStart: () => {
+        setDraggingType(type);
+      },
+      onDragEnd: () => {
+        setDraggingType(null);
+      }
+    });
+
+    return cleanup;
+  }, [type, setDraggingType]);
+
+  return (
+    <div
+      ref={itemRef}
+      draggable
+      onDragStart={(e) => onDragStart(e, type)}
+      onDragEnd={onDragEnd}
+      className={cn(
+        "group flex flex-col items-center justify-center gap-1.5 md:gap-2 p-2.5 md:p-3 rounded-xl border-2 border-transparent hover:border-indigo-200 hover:bg-gradient-to-br hover:from-indigo-50 hover:to-purple-50 hover:shadow-lg cursor-grab active:cursor-grabbing transition-all duration-200 bg-white relative overflow-hidden",
+        "h-20 md:h-24 hover:scale-105 active:scale-95 touch-none"
+      )}
+      aria-label={`${config.label || type}${isResizable ? ' (resizable)' : ''}`}
+    >
+      {/* Resizable badge indicator */}
+      {isResizable && (
+        <div 
+          className="absolute top-1 right-1 w-1.5 h-1.5 md:w-2 md:h-2 bg-gradient-to-br from-emerald-400 to-green-500 rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-sm ring-2 ring-white" 
+          title="Resizable"
+          aria-hidden="true"
+        ></div>
+      )}
+      
+      <div className="w-8 h-8 md:w-9 md:h-9 rounded-lg bg-gradient-to-br from-gray-50 to-gray-100 group-hover:from-indigo-100 group-hover:to-purple-100 flex items-center justify-center text-gray-600 group-hover:text-indigo-700 transition-all border border-gray-200 group-hover:border-indigo-300 group-hover:shadow-md">
+        <Icon size={16} strokeWidth={2} className="md:w-[18px] md:h-[18px]" />
+      </div>
+      <span className="text-[10px] md:text-xs font-semibold text-gray-700 group-hover:text-indigo-800 text-center w-full truncate px-1 transition-colors leading-tight">
+        {config.label || type}
+      </span>
+    </div>
+  );
+});
+
+ComponentItem.displayName = 'ComponentItem';
+
 export const ComponentPalette: React.FC<ComponentPaletteProps> = React.memo(({ className }) => {
   const { setDraggingType } = useDesigner();
   const allConfigs = ComponentRegistry.getAllConfigs();
@@ -129,33 +201,15 @@ export const ComponentPalette: React.FC<ComponentPaletteProps> = React.memo(({ c
       const isResizable = config.resizable || false;
 
       return (
-          <div
+          <ComponentItem
             key={type}
-            draggable
-            onDragStart={(e) => handleDragStart(e, type)}
+            type={type}
+            config={config}
+            Icon={Icon}
+            isResizable={isResizable}
+            onDragStart={handleDragStart}
             onDragEnd={handleDragEnd}
-            className={cn(
-                "group flex flex-col items-center justify-center gap-2 p-3 rounded-xl border-2 border-transparent hover:border-indigo-200 hover:bg-gradient-to-br hover:from-indigo-50 hover:to-purple-50 hover:shadow-lg cursor-grab active:cursor-grabbing transition-all duration-200 bg-white relative overflow-hidden",
-                "h-24 hover:scale-105 active:scale-95"
-            )}
-            aria-label={`${config.label || type}${isResizable ? ' (resizable)' : ''}`}
-          >
-            {/* Resizable badge indicator */}
-            {isResizable && (
-                <div 
-                    className="absolute top-1 right-1 w-2 h-2 bg-gradient-to-br from-emerald-400 to-green-500 rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-sm ring-2 ring-white" 
-                    title="Resizable"
-                    aria-hidden="true"
-                ></div>
-            )}
-            
-            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-gray-50 to-gray-100 group-hover:from-indigo-100 group-hover:to-purple-100 flex items-center justify-center text-gray-600 group-hover:text-indigo-700 transition-all border border-gray-200 group-hover:border-indigo-300 group-hover:shadow-md">
-                <Icon size={18} strokeWidth={2} />
-            </div>
-            <span className="text-xs font-semibold text-gray-700 group-hover:text-indigo-800 text-center w-full truncate px-1 transition-colors">
-                {config.label || type}
-            </span>
-          </div>
+          />
       );
   }, [handleDragStart, handleDragEnd]);
 
@@ -177,15 +231,15 @@ export const ComponentPalette: React.FC<ComponentPaletteProps> = React.memo(({ c
   }, []);
 
   return (
-    <div className={cn("flex flex-col h-full bg-gradient-to-b from-gray-50 to-white w-72 overflow-hidden", className)}>
-        <div className="px-4 py-4 border-b border-gray-200/80 bg-white/80 backdrop-blur-sm shrink-0 space-y-3">
+    <div className={cn("flex flex-col h-full bg-gradient-to-b from-gray-50 to-white w-full overflow-hidden", className)}>
+        <div className="px-3 md:px-4 py-3 md:py-4 border-b border-gray-200/80 bg-white/80 backdrop-blur-sm shrink-0 space-y-3">
             <div className="relative">
                 <input
                     type="text"
-                    placeholder="Search components..."
+                    placeholder="Search..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="w-full h-10 px-4 text-sm border-2 border-gray-200 rounded-xl bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-400 transition-all placeholder:text-gray-400 font-medium shadow-sm hover:shadow-md"
+                    className="w-full h-9 md:h-10 px-3 md:px-4 text-sm border-2 border-gray-200 rounded-xl bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-400 transition-all placeholder:text-gray-400 font-medium shadow-sm hover:shadow-md"
                 />
                 {searchQuery && (
                     <button
@@ -200,18 +254,18 @@ export const ComponentPalette: React.FC<ComponentPaletteProps> = React.memo(({ c
         </div>
 
         <ScrollArea className="flex-1 w-full">
-            <div className="p-4 space-y-6 pb-20">
+            <div className="p-3 md:p-4 space-y-4 md:space-y-6 pb-20">
                 {Object.entries(CATEGORIES).map(([category, types]) => {
                     const availableTypes = filterBySearch(getComponentscategory(types));
                     if (availableTypes.length === 0) return null;
 
                     return (
                         <div key={category}>
-                            <h3 className="text-xs font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 uppercase tracking-widest mb-3 px-1 flex items-center gap-2">
-                                <span className="w-1 h-4 bg-gradient-to-b from-indigo-500 to-purple-500 rounded-full"></span>
-                                {category}
+                            <h3 className="text-xs font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 uppercase tracking-widest mb-2 md:mb-3 px-1 flex items-center gap-2">
+                                <span className="w-1 h-3 md:h-4 bg-gradient-to-b from-indigo-500 to-purple-500 rounded-full"></span>
+                                <span className="truncate">{category}</span>
                             </h3>
-                            <div className="grid grid-cols-2 gap-2.5">
+                            <div className="grid grid-cols-2 gap-2 md:gap-2.5">
                                 {availableTypes.map(renderComponentItem)}
                             </div>
                         </div>

packages/designer/src/components/Designer.tsx

@@ -74,17 +74,19 @@ export const DesignerContent: React.FC = () => {
 
       <div className="flex-1 flex overflow-hidden">
         {/* Left Sidebar - Combined Component Palette and Tree */}
-        <div className="w-72 flex-shrink-0 z-10 shadow-[1px_0_5px_rgba(0,0,0,0.03)] h-full">
+        {/* Responsive: w-72 on desktop, w-64 on tablet (md:), hidden on mobile with toggle option */}
+        <div className="w-64 md:w-72 flex-shrink-0 z-10 shadow-[1px_0_5px_rgba(0,0,0,0.03)] h-full">
            <LeftSidebar className="h-full border-r-0" />
         </div>
 
         {/* Main Canvas Area */}
-        <div className="flex-1 relative bg-gray-100 z-0">
+        <div className="flex-1 relative bg-gray-100 z-0 min-w-0">
            <Canvas className="h-full w-full" />
         </div>
 
         {/* Right Sidebar - Property Panel */}
-        <div className="w-80 flex-shrink-0 z-10 shadow-[-1px_0_5px_rgba(0,0,0,0.03)] h-full">
+        {/* Responsive: w-80 on desktop, w-72 on tablet (md:), can be toggled on small tablets */}
+        <div className="w-72 md:w-80 flex-shrink-0 z-10 shadow-[-1px_0_5px_rgba(0,0,0,0.03)] h-full">
            <PropertyPanel className="h-full border-l-0 shadow-none border-l custom-scrollbar" />
         </div>
       </div>

packages/designer/src/components/LeftSidebar.tsx

@@ -14,32 +14,32 @@ export const LeftSidebar: React.FC<LeftSidebarProps> = React.memo(({ className }
   const [activeTab, setActiveTab] = useState<TabType>('palette');
 
   return (
-    <div className={cn("flex flex-col h-full bg-white w-72", className)}>
+    <div className={cn("flex flex-col h-full bg-white w-full", className)}>
       {/* Tab Headers */}
       <div className="flex border-b bg-gray-50/50 shrink-0">
         <button
           onClick={() => setActiveTab('palette')}
           className={cn(
-            "flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-all relative",
+            "flex-1 flex items-center justify-center gap-2 px-3 md:px-4 py-3 text-sm font-medium transition-all relative",
             activeTab === 'palette'
               ? "text-blue-600 bg-white border-b-2 border-blue-600"
               : "text-gray-600 hover:text-gray-900 hover:bg-gray-100/50"
           )}
         >
           <Box size={16} />
-          <span>Components</span>
+          <span className="hidden sm:inline">Components</span>
         </button>
         <button
           onClick={() => setActiveTab('tree')}
           className={cn(
-            "flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-all relative",
+            "flex-1 flex items-center justify-center gap-2 px-3 md:px-4 py-3 text-sm font-medium transition-all relative",
             activeTab === 'tree'
               ? "text-blue-600 bg-white border-b-2 border-blue-600"
               : "text-gray-600 hover:text-gray-900 hover:bg-gray-100/50"
           )}
         >
           <Layers size={16} />
-          <span>Tree</span>
+          <span className="hidden sm:inline">Tree</span>
         </button>
       </div>