Merge pull request #467 from objectstack-ai/copilot/analyze-code-optimization

Author: hotlong

DESIGNER_UX_ANALYSIS.md

@@ -293,6 +293,45 @@ The v2.0.7 spec introduces 70+ new UI types across 12 domains. This section maps
 - [x] Global search results page (beyond command palette)
 - [x] Recent items / favorites in sidebar
 
+#### 2.8 Designer UX Enhancement (Feb 2026)
+**Target:** Enterprise-quality designer experience across all 5 designers
+
+> 📄 See [DESIGNER_UX_ANALYSIS.md](./DESIGNER_UX_ANALYSIS.md) for full analysis
+
+**Phase 1: Accessibility & Polish ✅ Complete**
+- [x] Add ARIA attributes (aria-label, role=toolbar/region/tablist/tab, aria-selected) across all 5 designers
+- [x] Add keyboard shortcuts (Delete to remove selected, Escape to deselect) to PageDesigner, DataModelDesigner, ProcessDesigner, ReportDesigner
+- [x] Improve empty states with guidance text across all designers
+- [x] Add zoom controls (−/+/fit) to PageDesigner canvas
+- [x] Improve property panels (PageDesigner label editing, ReportDesigner element details)
+- [x] Add ConnectionStatusIndicator component to CollaborationProvider
+- [x] Expand user color palette from 8 to 16 colors
+- [x] Add tab accessibility (role=tablist, role=tab, aria-selected) to ViewDesigner
+- [x] Replace emoji indicators (🔑) with text indicators (PK) in DataModelDesigner
+
+**Phase 2: Interaction Layer (Next Sprint)**
+- [ ] Implement drag-and-drop for component/entity/node positioning using @dnd-kit
+- [ ] Implement undo/redo using command pattern with state history
+- [ ] Add confirmation dialogs for destructive delete actions
+- [ ] Implement edge creation UI in ProcessDesigner (click-to-connect nodes)
+- [ ] Add inline entity field editing in DataModelDesigner
+
+**Phase 3: Advanced Features (Q2 2026)**
+- [ ] Full property editors with live preview for all designers
+- [ ] i18n integration for all hardcoded UI strings via resolveI18nLabel
+- [ ] Canvas pan/zoom with minimap for DataModelDesigner and ProcessDesigner
+- [ ] Auto-layout algorithms for entity and node positioning
+- [ ] Copy/paste support (Ctrl+C/V) across all designers
+- [ ] Multi-select and bulk operations
+- [ ] Responsive/collapsible panel layout
+
+**Phase 4: Collaboration Integration (Q3 2026)**
+- [ ] Wire CollaborationProvider into each designer for real-time co-editing
+- [ ] Live cursor positions on shared canvases
+- [ ] Operation-based undo/redo synchronized across collaborators
+- [ ] Conflict resolution UI for concurrent edits
+- [ ] Version history browser with visual diff
+
 **Q2 Milestone:**
 - **v1.0.0 Release (June 2026):** Full interactive experience — DnD, gestures, focus, animation, notifications, view enhancements
 - **Spec compliance: 86% → 96%**

ROADMAP.md

@@ -8,6 +8,12 @@
 
 import React, { createContext, useContext, useCallback, useMemo, useEffect, useRef, useState } from 'react';
 import type { CollaborationConfig, CollaborationPresence, CollaborationOperation } from '@object-ui/types';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: (string | undefined | false)[]) {
+  return twMerge(clsx(inputs));
+}
 
 export interface CollaborationContextValue {
   /** Active users in the session */
@@ -200,13 +206,43 @@ export function useCollaboration(): CollaborationContextValue | null {
   return useContext(CollabCtx);
 }
 
+/**
+ * Connection status indicator component.
+ * Shows the current collaboration connection state with a colored dot and label.
+ */
+export function ConnectionStatusIndicator({ className }: { className?: string }) {
+  const ctx = useContext(CollabCtx);
+  if (!ctx) return null;
+
+  const { connectionState, users } = ctx;
+  const stateConfig: Record<string, { color: string; label: string }> = {
+    connected: { color: 'bg-green-500', label: 'Connected' },
+    connecting: { color: 'bg-yellow-500 animate-pulse', label: 'Connecting…' },
+    disconnected: { color: 'bg-gray-400', label: 'Disconnected' },
+    error: { color: 'bg-red-500', label: 'Connection error' },
+  };
+  const { color, label } = stateConfig[connectionState] ?? stateConfig.disconnected;
+
+  return (
+    <div className={cn('flex items-center gap-2 text-xs', className)} role="status" aria-live="polite" aria-label={`Collaboration: ${label}`}>
+      <span className={`inline-block h-2 w-2 rounded-full ${color}`} />
+      <span>{label}</span>
+      {connectionState === 'connected' && users.length > 1 && (
+        <span className="text-muted-foreground">({users.length} users)</span>
+      )}
+    </div>
+  );
+}
+
 /**
  * Generate a consistent color for a user ID.
  */
 function generateColor(userId: string): string {
   const colors = [
     '#3b82f6', '#ef4444', '#22c55e', '#f59e0b',
     '#8b5cf6', '#ec4899', '#06b6d4', '#f97316',
+    '#14b8a6', '#f43f5e', '#a855f7', '#84cc16',
+    '#0ea5e9', '#e879f9', '#fb923c', '#facc15',
   ];
   let hash = 0;
   for (let i = 0; i < userId.length; i++) {

packages/plugin-designer/src/CollaborationProvider.tsx

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import type { DataModelEntity, DataModelField, DataModelRelationship, DesignerCanvasConfig } from '@object-ui/types';
 import { Database, Plus, Trash2, Link2 } from 'lucide-react';
 import { clsx } from 'clsx';
@@ -51,6 +51,7 @@ export function DataModelDesigner({
   onRelationshipsChange,
   className,
 }: DataModelDesignerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
   const [entities, setEntities] = useState<DataModelEntity[]>(initialEntities);
   const [relationships, setRelationships] = useState<DataModelRelationship[]>(initialRelationships);
   const [selectedEntityId, setSelectedEntityId] = useState<string | null>(null);
@@ -90,23 +91,43 @@ export function DataModelDesigner({
     [entities, relationships, selectedEntityId, readOnly, onEntitiesChange, onRelationshipsChange],
   );
 
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement).tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+      if ((e.key === 'Delete' || e.key === 'Backspace') && selectedEntityId) {
+        e.preventDefault();
+        handleDeleteEntity(selectedEntityId);
+      } else if (e.key === 'Escape') {
+        setSelectedEntityId(null);
+      }
+    };
+    el.addEventListener('keydown', handleKeyDown);
+    return () => el.removeEventListener('keydown', handleKeyDown);
+  }, [selectedEntityId, handleDeleteEntity]);
+
   return (
-    <div className={cn('flex h-full w-full border rounded-lg overflow-hidden bg-background', className)}>
+    <div ref={containerRef} tabIndex={0} className={cn('flex h-full w-full border rounded-lg overflow-hidden bg-background', className)}>
       {/* Toolbar */}
       <div className="flex flex-col w-full">
-        <div className="flex items-center gap-2 p-2 border-b bg-muted/20">
+        <div role="toolbar" className="flex items-center gap-2 p-2 border-b bg-muted/20">
           <Database className="h-4 w-4" />
           <span className="font-medium text-sm">Data Model Designer</span>
           <div className="flex-1" />
           {!readOnly && (
             <>
               <button
                 onClick={handleAddEntity}
+                aria-label="Add Entity"
                 className="flex items-center gap-1 px-2 py-1 text-xs rounded bg-primary text-primary-foreground hover:bg-primary/90"
               >
                 <Plus className="h-3 w-3" /> Add Entity
               </button>
               <button
+                aria-label="Add Relationship"
+                title="Add Relationship (coming soon)"
                 className="flex items-center gap-1 px-2 py-1 text-xs rounded bg-secondary text-secondary-foreground hover:bg-secondary/80"
               >
                 <Link2 className="h-3 w-3" /> Add Relationship
@@ -116,7 +137,7 @@ export function DataModelDesigner({
         </div>
 
         {/* Canvas */}
-        <div className="flex-1 overflow-auto bg-muted/10 p-4">
+        <div role="region" aria-label="Canvas" className="flex-1 overflow-auto bg-muted/10 p-4">
           <div
             className="relative"
             style={{
@@ -166,9 +187,16 @@ export function DataModelDesigner({
             </svg>
 
             {/* Entity cards */}
+            {entities.length === 0 && (
+              <div className="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm">
+                No entities in the model. Click &apos;Add Entity&apos; to create your first entity.
+              </div>
+            )}
             {entities.map((entity) => (
               <div
                 key={entity.id}
+                role="group"
+                aria-label={entity.label}
                 className={cn(
                   'absolute rounded-lg border-2 bg-background shadow-sm w-60 select-none',
                   selectedEntityId === entity.id
@@ -194,6 +222,7 @@ export function DataModelDesigner({
                         e.stopPropagation();
                         handleDeleteEntity(entity.id);
                       }}
+                      aria-label={`Delete ${entity.label}`}
                       className="ml-auto p-0.5 rounded hover:bg-destructive/20"
                     >
                       <Trash2 className="h-3 w-3 text-destructive" />
@@ -208,7 +237,7 @@ export function DataModelDesigner({
                       className="flex items-center gap-2 py-1 text-xs"
                     >
                       <span className={cn('font-mono', field.primaryKey && 'font-bold text-primary')}>
-                        {field.primaryKey ? '🔑 ' : ''}{field.name}
+                        {field.primaryKey && <span className="text-[0.65rem] font-semibold text-primary mr-0.5">PK</span>}{field.name}
                       </span>
                       <span className="text-muted-foreground ml-auto">{field.type}</span>
                       {field.required && <span className="text-destructive">*</span>}

packages/plugin-designer/src/DataModelDesigner.tsx

@@ -6,14 +6,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import type {
   DesignerComponent,
   DesignerCanvasConfig,
   DesignerPaletteCategory,
   DesignerPaletteItem,
 } from '@object-ui/types';
-import { GripVertical, Undo2, Redo2, Eye, Layers, Plus, Trash2 } from 'lucide-react';
+import { GripVertical, Undo2, Redo2, Eye, Layers, Plus, Minus, Maximize2, Trash2 } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
@@ -42,6 +42,10 @@ export interface PageDesignerProps {
   className?: string;
 }
 
+const ZOOM_MIN = 0.25;
+const ZOOM_MAX = 3;
+const ZOOM_STEP = 0.1;
+
 /**
  * Drag-and-drop page designer component.
  * Allows visual composition of UI components on a canvas.
@@ -58,7 +62,8 @@ export function PageDesigner({
 }: PageDesignerProps) {
   const [components, setComponents] = useState<DesignerComponent[]>(initialComponents);
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [zoom, _setZoom] = useState(canvas.zoom ?? 1);
+  const [zoom, setZoom] = useState(canvas.zoom ?? 1);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const selectedComponent = useMemo(
     () => components.find((c) => c.id === selectedId),
@@ -94,11 +99,38 @@ export function PageDesigner({
     [components, selectedId, readOnly, onChange],
   );
 
+  const handleUpdateLabel = useCallback(
+    (id: string, label: string) => {
+      if (readOnly) return;
+      const updated = components.map((c) => (c.id === id ? { ...c, label } : c));
+      setComponents(updated);
+      onChange?.(updated);
+    },
+    [components, readOnly, onChange],
+  );
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.key === 'Delete' || e.key === 'Backspace') && selectedId) {
+        if (['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement).tagName)) return;
+        e.preventDefault();
+        handleDeleteComponent(selectedId);
+      }
+      if (e.key === 'Escape') {
+        setSelectedId(null);
+      }
+    };
+    el.addEventListener('keydown', handleKeyDown);
+    return () => el.removeEventListener('keydown', handleKeyDown);
+  }, [selectedId, handleDeleteComponent]);
+
   return (
-    <div className={cn('flex h-full w-full border rounded-lg overflow-hidden bg-background', className)}>
+    <div ref={containerRef} tabIndex={0} className={cn('flex h-full w-full border rounded-lg overflow-hidden bg-background', className)}>
       {/* Left Panel - Component Palette */}
       {!readOnly && (
-        <div className="w-60 border-r bg-muted/30 flex flex-col">
+        <div className="w-60 border-r bg-muted/30 flex flex-col" role="region" aria-label="Component palette">
           <div className="p-3 border-b font-medium text-sm">Components</div>
           <div className="flex-1 overflow-y-auto p-2">
             {palette.map((category) => (
@@ -125,29 +157,52 @@ export function PageDesigner({
       {/* Center - Canvas */}
       <div className="flex-1 flex flex-col">
         {/* Toolbar */}
-        <div className="flex items-center gap-2 p-2 border-b bg-muted/20">
+        <div className="flex items-center gap-2 p-2 border-b bg-muted/20" role="toolbar" aria-label="Designer toolbar">
           {undoRedo && !readOnly && (
             <>
-              <button className="p-1.5 rounded hover:bg-accent" title="Undo">
+              <button className="p-1.5 rounded hover:bg-accent" title="Undo" aria-label="Undo">
                 <Undo2 className="h-4 w-4" />
               </button>
-              <button className="p-1.5 rounded hover:bg-accent" title="Redo">
+              <button className="p-1.5 rounded hover:bg-accent" title="Redo" aria-label="Redo">
                 <Redo2 className="h-4 w-4" />
               </button>
               <div className="w-px h-5 bg-border mx-1" />
             </>
           )}
-          <button className="p-1.5 rounded hover:bg-accent" title="Preview">
+          <button className="p-1.5 rounded hover:bg-accent" title="Preview" aria-label="Preview">
             <Eye className="h-4 w-4" />
           </button>
           <div className="flex-1" />
-          <span className="text-xs text-muted-foreground">
-            {Math.round(zoom * 100)}%
-          </span>
+          <div className="flex items-center gap-1">
+            <button
+              className="p-1 rounded hover:bg-accent text-xs"
+              aria-label="Zoom out"
+              onClick={() => setZoom((z) => Math.max(ZOOM_MIN, +(z - ZOOM_STEP).toFixed(2)))}
+            >
+              <Minus className="h-3 w-3" />
+            </button>
+            <span className="text-xs text-muted-foreground w-10 text-center">
+              {Math.round(zoom * 100)}%
+            </span>
+            <button
+              className="p-1 rounded hover:bg-accent text-xs"
+              aria-label="Zoom in"
+              onClick={() => setZoom((z) => Math.min(ZOOM_MAX, +(z + ZOOM_STEP).toFixed(2)))}
+            >
+              <Plus className="h-3 w-3" />
+            </button>
+            <button
+              className="p-1 rounded hover:bg-accent text-xs"
+              aria-label="Reset zoom"
+              onClick={() => setZoom(1)}
+            >
+              <Maximize2 className="h-3 w-3" />
+            </button>
+          </div>
         </div>
 
         {/* Canvas Area */}
-        <div className="flex-1 overflow-auto bg-muted/10 p-4">
+        <div className="flex-1 overflow-auto bg-muted/10 p-4" role="region" aria-label="Design canvas">
           <div
             className="relative bg-background border rounded shadow-sm mx-auto"
             style={{
@@ -188,6 +243,7 @@ export function PageDesigner({
                         handleDeleteComponent(comp.id);
                       }}
                       className="ml-auto p-0.5 rounded hover:bg-destructive/10"
+                      aria-label={`Delete ${comp.label ?? comp.type}`}
                     >
                       <Trash2 className="h-3 w-3 text-destructive" />
                     </button>
@@ -204,15 +260,15 @@ export function PageDesigner({
 
       {/* Right Panel - Component Tree / Properties */}
       {showComponentTree && (
-        <div className="w-60 border-l bg-muted/30 flex flex-col">
+        <div className="w-60 border-l bg-muted/30 flex flex-col" role="region" aria-label="Component tree">
           <div className="p-3 border-b font-medium text-sm flex items-center gap-2">
             <Layers className="h-4 w-4" />
             Component Tree
           </div>
           <div className="flex-1 overflow-y-auto p-2">
             {components.length === 0 ? (
               <div className="text-xs text-muted-foreground text-center py-4">
-                No components added yet
+                No components added yet. Click a component in the palette to add it to the canvas.
               </div>
             ) : (
               components.map((comp) => (
@@ -235,6 +291,15 @@ export function PageDesigner({
               <div className="text-xs text-muted-foreground space-y-1">
                 <div>Type: {selectedComponent.type}</div>
                 <div>ID: {selectedComponent.id}</div>
+                <label className="flex items-center gap-1">
+                  Label:
+                  <input
+                    type="text"
+                    value={selectedComponent.label ?? ''}
+                    onChange={(e) => handleUpdateLabel(selectedComponent.id, e.target.value)}
+                    className="flex-1 px-1 py-0.5 border rounded text-xs bg-background"
+                  />
+                </label>
                 <div>
                   Position: {selectedComponent.position.x}, {selectedComponent.position.y}
                 </div>