Add 8-directional resize system and premium Tailwind design to designer

packages/components/src/renderers/layout/card.tsx

@@ -34,6 +34,14 @@ ComponentRegistry.register('card',
       title: 'Card Title',
       description: 'Card description goes here',
       className: 'w-full'
+    },
+    isContainer: true,
+    resizable: true,
+    resizeConstraints: {
+      width: true,
+      height: true,
+      minWidth: 200,
+      minHeight: 100
     }
   }
 );

packages/components/src/renderers/layout/container.tsx

@@ -81,6 +81,14 @@ ComponentRegistry.register('container',
       children: [
         { type: 'text', content: 'Container content goes here' }
       ]
+    },
+    isContainer: true,
+    resizable: true,
+    resizeConstraints: {
+      width: true,
+      height: true,
+      minWidth: 200,
+      minHeight: 100
     }
   }
 );

packages/components/src/renderers/layout/grid.tsx

@@ -86,6 +86,14 @@ ComponentRegistry.register('grid',
         { type: 'card', title: 'Card 3', description: 'Third card' },
         { type: 'card', title: 'Card 4', description: 'Fourth card' }
       ]
+    },
+    isContainer: true,
+    resizable: true,
+    resizeConstraints: {
+      width: true,
+      height: true,
+      minWidth: 200,
+      minHeight: 100
     }
   }
 );

packages/core/src/registry/Registry.ts

@@ -22,6 +22,16 @@ export type ComponentMeta = {
   defaultProps?: Record<string, any>; // Default props when dropped
   defaultChildren?: SchemaNode[]; // Default children when dropped
   examples?: Record<string, any>; // Example configurations
+  isContainer?: boolean; // Whether the component can have children
+  resizable?: boolean; // Whether the component can be resized in the designer
+  resizeConstraints?: {
+    width?: boolean;
+    height?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+  };
 };
 
 export type ComponentConfig<T = any> = ComponentMeta & {