Merge pull request #459 from objectstack-ai/copilot/update-development-progress

Author: hotlong

ROADMAP.md

@@ -59,11 +59,11 @@ ObjectUI's current overall compliance stands at **82%** (down from 91% against v
 
 | Category | Current | Target |
 |----------|---------|--------|
-| **UI Types** | 93% | 100% |
+| **UI Types** | 98% | 100% |
 | **API Protocol** | 89% | 100% |
-| **Feature Completeness** | 83% | 100% |
-| **v2.0.7 New Areas** | 40% | 100% |
-| **Overall** | **86%** | **100%** |
+| **Feature Completeness** | 90% | 100% |
+| **v2.0.7 New Areas** | 75% | 100% |
+| **Overall** | **90%** | **100%** |
 
 > Source: [SPEC_COMPLIANCE_EVALUATION.md](./SPEC_COMPLIANCE_EVALUATION.md) §8
 
@@ -131,18 +131,18 @@ The v2.0.7 spec introduces 70+ new UI types across 12 domains. This section maps
 
 | Domain | Key Spec Types | Current Status | Target Quarter |
 |--------|---------------|----------------|----------------|
-| **Accessibility** | AriaPropsSchema, WcagContrastLevel | 🔲 Not Started | Q1 2026 |
-| **Responsive Design** | ResponsiveConfigSchema, BreakpointColumnMapSchema, BreakpointOrderMapSchema | ⚠️ Partial (breakpoints exist, spec schemas not consumed) | Q1 2026 |
-| **I18n Deep Integration** | I18nObjectSchema, LocaleConfigSchema, PluralRuleSchema, DateFormatSchema, NumberFormatSchema | ⚠️ Partial (I18nLabel done, advanced types pending) | Q1 2026 |
-| **Drag and Drop** | DndConfigSchema, DragItemSchema, DropZoneSchema, DragConstraintSchema, DropEffectSchema | ⚠️ Partial (Kanban/Dashboard DnD exists, spec schemas not consumed) | Q2 2026 |
-| **Gestures / Touch** | GestureConfigSchema, SwipeGestureConfigSchema, PinchGestureConfigSchema, LongPressGestureConfigSchema, TouchInteractionSchema | ⚠️ Partial (mobile hooks exist, spec schemas not consumed) | Q2 2026 |
-| **Focus / Keyboard** | FocusManagementSchema, FocusTrapConfigSchema, KeyboardNavigationConfigSchema, KeyboardShortcutSchema | 🔲 Not Started | Q2 2026 |
-| **Animation / Motion** | ComponentAnimationSchema, MotionConfigSchema, TransitionConfigSchema, EasingFunctionSchema | 🔲 Not Started | Q2 2026 |
-| **Notifications** | NotificationSchema, NotificationConfigSchema, NotificationActionSchema, NotificationPositionSchema | 🔲 Not Started | Q2 2026 |
-| **View Enhancements** | ColumnSummarySchema, GalleryConfigSchema, GroupingConfigSchema, RowColorConfigSchema, RowHeightSchema, ViewSharingSchema, DensityMode | ⚠️ Partial (features exist in plugins, spec schemas not directly consumed) | Q2 2026 |
-| **Offline / Sync** | OfflineConfigSchema, SyncConfigSchema, ConflictResolutionSchema, EvictionPolicySchema | 🔲 Not Started | Q3 2026 |
-| **Performance** | PerformanceConfigSchema | 🔲 Not Started | Q3 2026 |
-| **Page Transitions** | PageTransitionSchema, PageComponentType | ⚠️ Partial (Page component exists, transitions not consumed) | Q3 2026 |
+| **Accessibility** | AriaPropsSchema, WcagContrastLevel | ✅ Complete (types re-exported, AriaProps injection, WCAG contrast utilities) | Q1 2026 |
+| **Responsive Design** | ResponsiveConfigSchema, BreakpointColumnMapSchema, BreakpointOrderMapSchema | ✅ Complete (spec schemas consumed, useResponsiveConfig) | Q1 2026 |
+| **I18n Deep Integration** | I18nObjectSchema, LocaleConfigSchema, PluralRuleSchema, DateFormatSchema, NumberFormatSchema | ✅ Complete (all types re-exported and consumed) | Q1 2026 |
+| **Drag and Drop** | DndConfigSchema, DragItemSchema, DropZoneSchema, DragConstraintSchema, DropEffectSchema | ⚠️ Partial — DndProvider + useDnd implemented, plugin refactoring pending | Q2 2026 |
+| **Gestures / Touch** | GestureConfigSchema, SwipeGestureConfigSchema, PinchGestureConfigSchema, LongPressGestureConfigSchema, TouchInteractionSchema | ⚠️ Partial — types re-exported, mobile hooks exist, spec schema integration pending | Q2 2026 |
+| **Focus / Keyboard** | FocusManagementSchema, FocusTrapConfigSchema, KeyboardNavigationConfigSchema, KeyboardShortcutSchema | ✅ Complete — useFocusTrap, useKeyboardShortcuts, getShortcutDescriptions | Q2 2026 |
+| **Animation / Motion** | ComponentAnimationSchema, MotionConfigSchema, TransitionConfigSchema, EasingFunctionSchema | ✅ Complete — useAnimation (7 presets), useReducedMotion | Q2 2026 |
+| **Notifications** | NotificationSchema, NotificationConfigSchema, NotificationActionSchema, NotificationPositionSchema | ✅ Complete — NotificationProvider, useNotifications with full CRUD | Q2 2026 |
+| **View Enhancements** | ColumnSummarySchema, GalleryConfigSchema, GroupingConfigSchema, RowColorConfigSchema, RowHeightSchema, ViewSharingSchema, DensityMode | ⚠️ Partial — useColumnSummary, useDensityMode, useViewSharing done; gallery/grouping/row-color pending | Q2 2026 |
+| **Offline / Sync** | OfflineConfigSchema, SyncConfigSchema, ConflictResolutionSchema, EvictionPolicySchema | ⚠️ Partial — types re-exported from spec, runtime implementation pending | Q3 2026 |
+| **Performance** | PerformanceConfigSchema | ⚠️ Partial — types re-exported from spec, runtime implementation pending | Q3 2026 |
+| **Page Transitions** | PageTransitionSchema, PageComponentType | ⚠️ Partial — types re-exported, useAnimation provides transition presets | Q3 2026 |
 
 ---
 
@@ -219,8 +219,8 @@ The v2.0.7 spec introduces 70+ new UI types across 12 domains. This section maps
 #### 2.1 Drag and Drop Framework (3 weeks)
 **Target:** Spec-compliant DnD system across all draggable views
 
-- [ ] Implement DndConfigSchema-based DnD framework (unified API for Kanban, Dashboard, Calendar, Grid)
-- [ ] Consume DragItemSchema, DropZoneSchema, DragConstraintSchema, DropEffectSchema
+- [x] Implement DndConfigSchema-based DnD framework (unified API for Kanban, Dashboard, Calendar, Grid) — `DndProvider`, `useDnd` in @object-ui/react
+- [x] Consume DragItemSchema, DropZoneSchema, DragConstraintSchema, DropEffectSchema — types re-exported from @object-ui/types
 - [ ] Refactor plugin-kanban card drag to use spec DnD schemas
 - [ ] Refactor plugin-dashboard widget drag to use spec DnD schemas
 - [ ] Add drag-to-reschedule for calendar events
@@ -242,21 +242,21 @@ The v2.0.7 spec introduces 70+ new UI types across 12 domains. This section maps
 #### 2.3 Focus Management & Keyboard Navigation (2 weeks)
 **Target:** Enterprise keyboard accessibility
 
-- [ ] Implement FocusManagementSchema runtime in @object-ui/react
-- [ ] Implement FocusTrapConfigSchema for modal/drawer focus trapping
-- [ ] Implement KeyboardNavigationConfigSchema for grid/list navigation (arrow keys, tab order)
-- [ ] Implement KeyboardShortcutSchema system with help dialog (? key)
+- [x] Implement FocusManagementSchema runtime in @object-ui/react — `useFocusTrap` hook
+- [x] Implement FocusTrapConfigSchema for modal/drawer focus trapping — `useFocusTrap` with autoFocus, restoreFocus, escapeDeactivates
+- [x] Implement KeyboardNavigationConfigSchema for grid/list navigation (arrow keys, tab order) — `useKeyboardShortcuts` hook
+- [x] Implement KeyboardShortcutSchema system with help dialog (? key) — `useKeyboardShortcuts` + `getShortcutDescriptions` utility
 - [ ] Add keyboard shortcuts for common CRUD operations
 
 **Spec Reference:** `FocusManagementSchema`, `FocusTrapConfigSchema`, `KeyboardNavigationConfigSchema`, `KeyboardShortcutSchema`
 
 #### 2.4 Animation & Motion System (2 weeks)
 **Target:** Smooth, performant animations aligned with spec
 
-- [ ] Implement ComponentAnimationSchema runtime (enter/exit/hover/focus transitions)
-- [ ] Implement MotionConfigSchema for reduced-motion preferences (`prefers-reduced-motion`)
-- [ ] Implement TransitionConfigSchema and TransitionPresetSchema for view transitions
-- [ ] Implement EasingFunctionSchema for consistent easing curves
+- [x] Implement ComponentAnimationSchema runtime (enter/exit/hover/focus transitions) — `useAnimation` hook with preset-based transitions
+- [x] Implement MotionConfigSchema for reduced-motion preferences (`prefers-reduced-motion`) — `useReducedMotion` hook
+- [x] Implement TransitionConfigSchema and TransitionPresetSchema for view transitions — `useAnimation` with 7 presets (fade, slide-up/down/left/right, scale, scale-fade)
+- [x] Implement EasingFunctionSchema for consistent easing curves — easing presets (linear, ease, ease-in, ease-out, ease-in-out, spring)
 - [ ] Add animation to view switcher transitions
 
 **Spec Reference:** `ComponentAnimationSchema`, `AnimationTriggerSchema`, `MotionConfigSchema`, `TransitionConfigSchema`, `TransitionPresetSchema`, `EasingFunctionSchema`
@@ -265,22 +265,22 @@ The v2.0.7 spec introduces 70+ new UI types across 12 domains. This section maps
 **Target:** Consume v2.0.7 view enhancement schemas in grid/list plugins
 
 - [ ] Consume GalleryConfigSchema in plugin-list (gallery view layout, image sizing, masonry mode)
-- [ ] Consume ColumnSummarySchema in plugin-grid and plugin-aggrid (column-level SUM/AVG/COUNT)
+- [x] Consume ColumnSummarySchema in plugin-grid and plugin-aggrid (column-level SUM/AVG/COUNT) — `useColumnSummary` hook
 - [ ] Consume GroupingConfigSchema and GroupingFieldSchema in plugin-grid (row grouping with subtotals)
 - [ ] Consume RowColorConfigSchema for conditional row coloring rules
-- [ ] Consume RowHeightSchema for compact/comfortable/spacious row height modes
-- [ ] Consume DensityMode for grid/list density toggling
-- [ ] Consume ViewSharingSchema for shared/personal view configurations
+- [x] Consume RowHeightSchema for compact/comfortable/spacious row height modes — `useDensityMode` hook
+- [x] Consume DensityMode for grid/list density toggling — `useDensityMode` with cycle()
+- [x] Consume ViewSharingSchema for shared/personal view configurations — `useViewSharing` hook with CRUD
 
 **Spec Reference:** `GalleryConfigSchema`, `ColumnSummarySchema`, `GroupingConfigSchema`, `GroupingFieldSchema`, `RowColorConfigSchema`, `RowHeightSchema`, `DensityMode`, `ViewSharingSchema`
 
 #### 2.6 Notification System (2 weeks)
 **Target:** Full notification UI integrated with @objectstack/client notifications API
 
-- [ ] Implement NotificationSchema-based notification renderer (toast, banner, snackbar, modal)
-- [ ] Consume NotificationConfigSchema for position, duration, stacking
-- [ ] Consume NotificationActionSchema for interactive notifications (buttons, links)
-- [ ] Implement notification center UI with unread count badge
+- [x] Implement NotificationSchema-based notification renderer (toast, banner, snackbar, modal) — `NotificationProvider` with severity levels
+- [x] Consume NotificationConfigSchema for position, duration, stacking — `NotificationSystemConfig` with all options
+- [x] Consume NotificationActionSchema for interactive notifications (buttons, links) — `NotificationActionButton` support
+- [x] Implement notification center UI with unread count badge — `useNotifications` with `unreadCount`, `markAsRead`, `markAllAsRead`
 - [ ] Integrate with `client.notifications.*` API for device registration and preferences
 
 **Spec Reference:** `NotificationSchema`, `NotificationConfigSchema`, `NotificationActionSchema`, `NotificationPositionSchema`, `NotificationSeveritySchema`, `NotificationTypeSchema`

packages/react/src/context/DndContext.tsx

@@ -0,0 +1,260 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @object-ui/react - Drag and Drop Context
+ *
+ * Provides a unified DnD configuration system to the component tree.
+ * Implements DndConfigSchema, DragItemSchema, DropZoneSchema,
+ * DragConstraintSchema, and DropEffectSchema from @objectstack/spec v2.0.7.
+ */
+
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+
+/** Drop effect types aligned with DropEffectSchema */
+export type DropEffectType = 'move' | 'copy' | 'link' | 'none';
+
+/** Drag constraint axis aligned with DragConstraintSchema */
+export type DragAxis = 'x' | 'y' | 'both';
+
+/** Drag item metadata */
+export interface DragItemData {
+  /** Unique identifier for the dragged item */
+  id: string;
+  /** Type of the dragged item (for drop zone filtering) */
+  type: string;
+  /** Arbitrary data associated with the drag */
+  data?: Record<string, unknown>;
+  /** Source container/zone identifier */
+  sourceId?: string;
+}
+
+/** Drop zone configuration */
+export interface DropZoneConfig {
+  /** Unique identifier for the drop zone */
+  id: string;
+  /** Accepted drag item types */
+  acceptTypes: string[];
+  /** Drop effect to apply */
+  effect?: DropEffectType;
+  /** Whether the zone is currently disabled */
+  disabled?: boolean;
+  /** Maximum number of items this zone can hold */
+  maxItems?: number;
+}
+
+/** Drag constraints configuration */
+export interface DragConstraintConfig {
+  /** Constrain movement to an axis */
+  axis?: DragAxis;
+  /** Minimum distance before drag starts (in pixels) */
+  activationDistance?: number;
+  /** Whether to show a drag handle */
+  showHandle?: boolean;
+  /** Container bounds (CSS selector) */
+  containerId?: string;
+}
+
+/** Overall DnD configuration aligned with DndConfigSchema */
+export interface DndSystemConfig {
+  /** Whether DnD is enabled */
+  enabled?: boolean;
+  /** Default drag constraints */
+  defaultConstraints?: DragConstraintConfig;
+  /** Whether to show drag overlay/preview */
+  showPreview?: boolean;
+  /** Auto-scroll when dragging near edges */
+  autoScroll?: boolean;
+}
+
+/** Drag event information */
+export interface DragEvent {
+  /** The dragged item */
+  item: DragItemData;
+  /** Target drop zone (null if not over a zone) */
+  targetZoneId: string | null;
+  /** The applied drop effect */
+  effect: DropEffectType;
+}
+
+export interface DndProviderProps {
+  children: React.ReactNode;
+  /** System-wide DnD configuration */
+  config?: DndSystemConfig;
+  /** Called when a drag starts */
+  onDragStart?: (event: DragEvent) => void;
+  /** Called when an item is dropped */
+  onDrop?: (event: DragEvent) => void;
+  /** Called when a drag is cancelled */
+  onDragCancel?: (event: DragEvent) => void;
+}
+
+interface DndContextValue {
+  /** System-wide DnD configuration */
+  config: DndSystemConfig;
+  /** Whether DnD is enabled */
+  enabled: boolean;
+  /** Currently dragging item (null if not dragging) */
+  activeItem: DragItemData | null;
+  /** Registered drop zones */
+  dropZones: Map<string, DropZoneConfig>;
+  /** Start a drag operation */
+  startDrag: (item: DragItemData) => void;
+  /** End the current drag operation */
+  endDrag: (targetZoneId?: string) => void;
+  /** Cancel the current drag */
+  cancelDrag: () => void;
+  /** Register a drop zone */
+  registerDropZone: (zone: DropZoneConfig) => void;
+  /** Unregister a drop zone */
+  unregisterDropZone: (zoneId: string) => void;
+  /** Check if a drop zone accepts a drag item type */
+  canDrop: (zoneId: string, itemType: string) => boolean;
+}
+
+const DndCtx = createContext<DndContextValue | null>(null);
+
+/**
+ * DndProvider — Provides a unified DnD system aligned with @objectstack/spec v2.0.7.
+ *
+ * This is a coordination layer; actual drag mechanics are delegated to
+ * libraries like @dnd-kit/core or react-grid-layout in individual plugins.
+ *
+ * @example
+ * ```tsx
+ * <DndProvider
+ *   config={{ enabled: true, showPreview: true, autoScroll: true }}
+ *   onDrop={(event) => handleDrop(event.item, event.targetZoneId)}
+ * >
+ *   <KanbanBoard />
+ * </DndProvider>
+ * ```
+ */
+export const DndProvider: React.FC<DndProviderProps> = ({
+  children,
+  config: userConfig = {},
+  onDragStart,
+  onDrop,
+  onDragCancel,
+}) => {
+  const config = useMemo<DndSystemConfig>(
+    () => ({
+      enabled: true,
+      showPreview: true,
+      autoScroll: true,
+      ...userConfig,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(userConfig)],
+  );
+
+  const [activeItem, setActiveItem] = useState<DragItemData | null>(null);
+  const [dropZones] = useState<Map<string, DropZoneConfig>>(() => new Map());
+
+  const startDrag = useCallback(
+    (item: DragItemData) => {
+      if (!config.enabled) return;
+      setActiveItem(item);
+      onDragStart?.({ item, targetZoneId: null, effect: 'move' });
+    },
+    [config.enabled, onDragStart],
+  );
+
+  const endDrag = useCallback(
+    (targetZoneId?: string) => {
+      if (!activeItem) return;
+      const zone = targetZoneId ? dropZones.get(targetZoneId) : undefined;
+      const effect: DropEffectType = zone?.effect ?? 'move';
+      onDrop?.({ item: activeItem, targetZoneId: targetZoneId ?? null, effect });
+      setActiveItem(null);
+    },
+    [activeItem, dropZones, onDrop],
+  );
+
+  const cancelDrag = useCallback(() => {
+    if (!activeItem) return;
+    onDragCancel?.({ item: activeItem, targetZoneId: null, effect: 'none' });
+    setActiveItem(null);
+  }, [activeItem, onDragCancel]);
+
+  const registerDropZone = useCallback(
+    (zone: DropZoneConfig) => {
+      dropZones.set(zone.id, zone);
+    },
+    [dropZones],
+  );
+
+  const unregisterDropZone = useCallback(
+    (zoneId: string) => {
+      dropZones.delete(zoneId);
+    },
+    [dropZones],
+  );
+
+  const canDrop = useCallback(
+    (zoneId: string, itemType: string): boolean => {
+      const zone = dropZones.get(zoneId);
+      if (!zone || zone.disabled) return false;
+      return zone.acceptTypes.includes(itemType);
+    },
+    [dropZones],
+  );
+
+  const value = useMemo<DndContextValue>(
+    () => ({
+      config,
+      enabled: config.enabled ?? true,
+      activeItem,
+      dropZones,
+      startDrag,
+      endDrag,
+      cancelDrag,
+      registerDropZone,
+      unregisterDropZone,
+      canDrop,
+    }),
+    [
+      config,
+      activeItem,
+      dropZones,
+      startDrag,
+      endDrag,
+      cancelDrag,
+      registerDropZone,
+      unregisterDropZone,
+      canDrop,
+    ],
+  );
+
+  return <DndCtx.Provider value={value}>{children}</DndCtx.Provider>;
+};
+
+DndProvider.displayName = 'DndProvider';
+
+/**
+ * Hook to consume the DnD context.
+ *
+ * @throws Error if used outside a DndProvider
+ */
+export function useDnd(): DndContextValue {
+  const ctx = useContext(DndCtx);
+  if (!ctx) {
+    throw new Error(
+      'useDnd must be used within a <DndProvider>. ' +
+        'Wrap your app with <DndProvider> to use the drag and drop system.',
+    );
+  }
+  return ctx;
+}
+
+/**
+ * Hook to check if a DndProvider is available.
+ */
+export function useHasDndProvider(): boolean {
+  return useContext(DndCtx) !== null;
+}