Fix code review issues: type safety, cursor logic, accessibility, and docs

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

Author: Copilot

packages/designer/DRAG_AND_RESIZE_GUIDE.md

@@ -344,7 +344,6 @@ Planned features for future releases:
 - [ ] **Keyboard resize** (Arrow keys with Shift)
 - [ ] **Percentage-based constraints** 
 - [ ] **Resize preview overlay** showing dimensions
-- [ ] **Undo/redo for resize operations** (currently works)
 - [ ] **Multi-select resize** (resize multiple components)
 - [ ] **Resize from center** (Alt+Drag)
 

packages/designer/src/components/Canvas.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { SchemaRenderer } from '@object-ui/react';
-import { ComponentRegistry } from '@object-ui/core';
+import { ComponentRegistry, type SchemaNode } from '@object-ui/core';
 import { useDesigner } from '../context/DesignerContext';
 import { ContextMenu } from './ContextMenu';
 import { ResizeHandles, ResizeDirection } from './ResizeHandle';
@@ -206,7 +206,8 @@ export const Canvas: React.FC<CanvasProps> = React.memo(({ className }) => {
             }
 
             // Apply constraints from component config
-            const config = ComponentRegistry.getConfig(schema.type);
+            const currentNode = findNodeInSchema(schema, resizingNode.nodeId);
+            const config = currentNode ? ComponentRegistry.getConfig(currentNode.type) : null;
             if (config?.resizeConstraints) {
                 const constraints = config.resizeConstraints;
                 if (constraints.minWidth) newWidth = Math.max(constraints.minWidth, newWidth);
@@ -232,25 +233,13 @@ export const Canvas: React.FC<CanvasProps> = React.memo(({ className }) => {
                 const width = element.style.width;
                 const height = element.style.height;
 
-                // Update node with new dimensions in className
-                // We'll add custom width/height to the existing className
-                const currentNode = findNodeInSchema(schema, resizingNode.nodeId);
-                if (currentNode) {
-                    const existingClasses = currentNode.className || '';
-                    // Remove any existing width/height classes
-                    let newClassName = existingClasses
-                        .split(' ')
-                        .filter(c => !c.startsWith('w-') && !c.startsWith('h-') && !c.includes('width') && !c.includes('height'))
-                        .join(' ');
-                    
-                    // Add inline style instead via data attribute for persistent sizing
-                    updateNode(resizingNode.nodeId, {
-                        style: {
-                            width,
-                            height
-                        }
-                    });
-                }
+                // Persist new dimensions via style on the node schema
+                updateNode(resizingNode.nodeId, {
+                    style: {
+                        width,
+                        height
+                    }
+                });
 
                 // Clear inline style after update
                 element.style.width = '';
@@ -270,16 +259,18 @@ export const Canvas: React.FC<CanvasProps> = React.memo(({ className }) => {
     }, [resizingNode, setResizingNode, updateNode, schema]);
 
     // Helper to find node in schema
-    const findNodeInSchema = (node: any, targetId: string): any => {
+    const findNodeInSchema = (node: SchemaNode, targetId: string): SchemaNode | null => {
         if (node.id === targetId) return node;
 
         if (Array.isArray(node.body)) {
             for (const child of node.body) {
-                const found = findNodeInSchema(child, targetId);
-                if (found) return found;
+                if (typeof child === 'object' && child !== null) {
+                    const found = findNodeInSchema(child as SchemaNode, targetId);
+                    if (found) return found;
+                }
             }
         } else if (node.body && typeof node.body === 'object') {
-            return findNodeInSchema(node.body, targetId);
+            return findNodeInSchema(node.body as SchemaNode, targetId);
         }
 
         return null;
@@ -480,7 +471,12 @@ export const Canvas: React.FC<CanvasProps> = React.memo(({ className }) => {
         /* Resizing state cursor override */
         ${resizingNode ? `
             * {
-                cursor: ${resizingNode.direction.includes('e') || resizingNode.direction.includes('w') ? 'ew-resize' : 'ns-resize'} !important;
+                cursor: ${
+                    resizingNode.direction === 'ne' || resizingNode.direction === 'sw' ? 'nesw-resize' :
+                    resizingNode.direction === 'nw' || resizingNode.direction === 'se' ? 'nwse-resize' :
+                    resizingNode.direction.includes('e') || resizingNode.direction.includes('w') ? 'ew-resize' : 
+                    'ns-resize'
+                } !important;
             }
             
             [data-obj-id="${resizingNode.nodeId}"] {

packages/designer/src/components/ComponentPalette.tsx

@@ -138,10 +138,15 @@ export const ComponentPalette: React.FC<ComponentPaletteProps> = React.memo(({ c
                 "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"></div>
+                <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">