diff --git a/examples/designer-modes/src/App.tsx b/examples/designer-modes/src/App.tsx
index e1dae7e80..9f40800d6 100644
--- a/examples/designer-modes/src/App.tsx
+++ b/examples/designer-modes/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Designer, type DesignerMode } from '@object-ui/designer';
 import type { SchemaNode } from '@object-ui/core';
 
diff --git a/examples/designer-modes/src/main.tsx b/examples/designer-modes/src/main.tsx
index 9aa52ffd1..dfacde090 100644
--- a/examples/designer-modes/src/main.tsx
+++ b/examples/designer-modes/src/main.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import './index.css';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
     <App />
-  </React.StrictMode>,
+  </StrictMode>,
 );
diff --git a/examples/designer-modes/tsconfig.json b/examples/designer-modes/tsconfig.json
index df2545fa1..4723c2da6 100644
--- a/examples/designer-modes/tsconfig.json
+++ b/examples/designer-modes/tsconfig.json
@@ -4,6 +4,7 @@
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
+    "types": ["vite/client"],
     "skipLibCheck": true,
 
     /* Bundler mode */
diff --git a/package.json b/package.json
index 55d368102..fcc106faf 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   "scripts": {
     "dev": "pnpm --filter prototype dev",
     "start": "pnpm --filter prototype dev",
-    "build": "pnpm -r build",
+    "build": "pnpm --filter './packages/*' -r build && pnpm --filter './examples/*' -r build",
     "pretest": "pnpm --filter @object-ui/types build && pnpm --filter @object-ui/core build && pnpm --filter @object-ui/react build && pnpm --filter @object-ui/components build",
     "test": "vitest run",
     "docs:dev": "pnpm --filter object-ui-docs dev",
diff --git a/packages/components/package.json b/packages/components/package.json
index 64319ac1d..621ff237d 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -3,14 +3,14 @@
   "version": "0.2.0",
   "type": "module",
   "license": "MIT",
-  "main": "dist/index.umd.js",
-  "module": "dist/index.mjs",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.umd.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
     },
     "./dist/style.css": "./dist/style.css"
   },
diff --git a/packages/designer/src/components/CanvasDesigner.tsx b/packages/designer/src/components/CanvasDesigner.tsx
index b1796e037..ba22a6a86 100644
--- a/packages/designer/src/components/CanvasDesigner.tsx
+++ b/packages/designer/src/components/CanvasDesigner.tsx
@@ -18,7 +18,7 @@ import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
 import type { SchemaNode } from '@object-ui/core';
 import type { CanvasDesignerConfig } from '../types/designer-modes';
 import { SchemaRenderer } from '@object-ui/react';
-import { ResizeHandles } from './ResizeHandle';
+import { ResizeHandles, type ResizeDirection } from './ResizeHandle';
 import { ComponentRegistry } from '@object-ui/core';
 import { cn } from '@object-ui/components';
 
@@ -158,7 +158,22 @@ const FreeFormCanvas: React.FC<{ showGrid?: boolean; gridSize?: number }> = ({
 
     return nodes.map((node) => {
       const isSelected = node.id === selectedNodeId;
-      const isResizable = ComponentRegistry.getConfig(node.type)?.resizable || false;
+      const config = ComponentRegistry.getConfig(node.type);
+      const isResizable = config?.resizable || false;
+
+      // Determine which directions to show based on constraints
+      const constraints = config?.resizeConstraints || {};
+      const directions: ResizeDirection[] = [];
+      
+      if (constraints.width !== false) {
+        directions.push('e', 'w');
+      }
+      if (constraints.height !== false) {
+        directions.push('n', 's');
+      }
+      if (constraints.width !== false && constraints.height !== false) {
+        directions.push('ne', 'nw', 'se', 'sw');
+      }
 
       return (
         <div
@@ -186,8 +201,8 @@ const FreeFormCanvas: React.FC<{ showGrid?: boolean; gridSize?: number }> = ({
           {/* Resize handles for selected node */}
           {isSelected && isResizable && (
             <ResizeHandles
-              nodeId={node.id || ''}
-              onResizeStart={(direction) => {
+              directions={directions}
+              onResizeStart={(direction, e) => {
                 const element = document.querySelector(`[data-obj-id="${node.id}"]`) as HTMLElement;
                 if (element) {
                   setResizingNode({