@evolve.labs/devflow 0.8.0

package/web/components/ui/ContextMenu.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import * as React from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { cn } from '@/lib/utils';
+
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+      'focus:bg-white/10 focus:text-white data-[state=open]:bg-white/10',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-lg border border-white/10 bg-[#1a1a24] p-1 shadow-xl',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+      className
+    )}
+    {...props}
+  />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        'z-50 min-w-[160px] overflow-hidden rounded-lg border border-white/10 bg-[#1a1a24] p-1 shadow-xl',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm text-gray-300 outline-none transition-colors',
+      'focus:bg-white/10 focus:text-white',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+      'focus:bg-white/10 focus:text-white',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fillRule="evenodd"
+            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-white/10', className)}
+    {...props}
+  />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest text-gray-500', className)}
+      {...props}
+    />
+  );
+};
+ContextMenuShortcut.displayName = 'ContextMenuShortcut';
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

package/web/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { Loader2 } from 'lucide-react';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8',
+};
+
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  return (
+    <Loader2
+      className={cn(
+        'animate-spin text-purple-400',
+        sizeClasses[size],
+        className
+      )}
+    />
+  );
+}
+
+interface LoadingOverlayProps {
+  message?: string;
+  className?: string;
+}
+
+export function LoadingOverlay({ message, className }: LoadingOverlayProps) {
+  return (
+    <div className={cn(
+      'absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50',
+      className
+    )}>
+      <div className="flex flex-col items-center gap-3">
+        <LoadingSpinner size="lg" />
+        {message && (
+          <span className="text-sm text-gray-300">{message}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface LoadingDotsProps {
+  className?: string;
+}
+
+export function LoadingDots({ className }: LoadingDotsProps) {
+  return (
+    <span className={cn('inline-flex gap-1', className)}>
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          className="w-1.5 h-1.5 rounded-full bg-purple-400 animate-bounce"
+          style={{ animationDelay: `${i * 150}ms` }}
+        />
+      ))}
+    </span>
+  );
+}

package/web/components/ui/ResizeHandle.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+type ResizeDirection = 'horizontal' | 'vertical';
+type ResizeSide = 'left' | 'right' | 'top' | 'bottom';
+
+interface ResizeHandleProps {
+  direction: ResizeDirection;
+  side: ResizeSide;
+  onResize: (delta: number) => void;
+  onResizeEnd?: () => void;
+  minSize?: number;
+  maxSize?: number;
+  className?: string;
+}
+
+export function ResizeHandle({
+  direction,
+  side,
+  onResize,
+  onResizeEnd,
+  className,
+}: ResizeHandleProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const startPosRef = useRef(0);
+  const handleRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+    startPosRef.current = direction === 'horizontal' ? e.clientX : e.clientY;
+  }, [direction]);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isDragging) return;
+
+    const currentPos = direction === 'horizontal' ? e.clientX : e.clientY;
+    let delta = currentPos - startPosRef.current;
+
+    // Invert delta for left/top sides
+    if (side === 'left' || side === 'top') {
+      delta = -delta;
+    }
+
+    onResize(delta);
+    startPosRef.current = currentPos;
+  }, [isDragging, direction, side, onResize]);
+
+  const handleMouseUp = useCallback(() => {
+    if (isDragging) {
+      setIsDragging(false);
+      onResizeEnd?.();
+    }
+  }, [isDragging, onResizeEnd]);
+
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
+      document.body.style.userSelect = 'none';
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp, direction]);
+
+  const isHorizontal = direction === 'horizontal';
+
+  return (
+    <div
+      ref={handleRef}
+      onMouseDown={handleMouseDown}
+      className={cn(
+        'group flex-shrink-0 transition-colors',
+        isHorizontal
+          ? 'w-1 cursor-col-resize hover:w-1'
+          : 'h-1 cursor-row-resize hover:h-1',
+        'relative',
+        className
+      )}
+    >
+      {/* Visual indicator */}
+      <div
+        className={cn(
+          'absolute transition-all duration-150',
+          isHorizontal
+            ? 'inset-y-0 left-0 w-1 group-hover:w-1 group-hover:bg-purple-500/50'
+            : 'inset-x-0 top-0 h-1 group-hover:h-1 group-hover:bg-purple-500/50',
+          isDragging && 'bg-purple-500'
+        )}
+      />
+      {/* Extended hit area */}
+      <div
+        className={cn(
+          'absolute',
+          isHorizontal
+            ? 'inset-y-0 -left-1 -right-1 w-3'
+            : 'inset-x-0 -top-1 -bottom-1 h-3'
+        )}
+      />
+    </div>
+  );
+}

package/web/components/ui/Skeleton.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { CSSProperties } from 'react';
+import { cn } from '@/lib/utils';
+
+interface SkeletonProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function Skeleton({ className, style }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        'animate-pulse rounded-md bg-white/5',
+        className
+      )}
+      style={style}
+    />
+  );
+}
+
+interface SkeletonTextProps {
+  lines?: number;
+  className?: string;
+}
+
+export function SkeletonText({ lines = 3, className }: SkeletonTextProps) {
+  return (
+    <div className={cn('space-y-2', className)}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton
+          key={i}
+          className={cn(
+            'h-4',
+            i === lines - 1 ? 'w-3/4' : 'w-full'
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface SkeletonCardProps {
+  className?: string;
+}
+
+export function SkeletonCard({ className }: SkeletonCardProps) {
+  return (
+    <div className={cn('p-4 rounded-lg border border-white/10 bg-white/5', className)}>
+      <div className="flex items-center gap-3 mb-3">
+        <Skeleton className="w-8 h-8 rounded-full" />
+        <div className="flex-1">
+          <Skeleton className="h-4 w-1/3 mb-1" />
+          <Skeleton className="h-3 w-1/2" />
+        </div>
+      </div>
+      <SkeletonText lines={2} />
+    </div>
+  );
+}
+
+interface SkeletonListProps {
+  items?: number;
+  className?: string;
+}
+
+export function SkeletonList({ items = 5, className }: SkeletonListProps) {
+  return (
+    <div className={cn('space-y-2', className)}>
+      {Array.from({ length: items }).map((_, i) => (
+        <div key={i} className="flex items-center gap-2 p-2">
+          <Skeleton className="w-4 h-4" />
+          <Skeleton className="h-4 flex-1" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface SkeletonTreeProps {
+  depth?: number;
+  items?: number;
+  className?: string;
+}
+
+export function SkeletonTree({ depth = 2, items = 5, className }: SkeletonTreeProps) {
+  const renderItems = (level: number, count: number) => {
+    return Array.from({ length: count }).map((_, i) => (
+      <div key={`${level}-${i}`}>
+        <div
+          className="flex items-center gap-2 py-1"
+          style={{ paddingLeft: level * 16 }}
+        >
+          <Skeleton className="w-4 h-4" />
+          <Skeleton className={cn('h-4', i % 3 === 0 ? 'w-24' : i % 2 === 0 ? 'w-32' : 'w-20')} />
+        </div>
+        {level < depth && i % 2 === 0 && renderItems(level + 1, 2)}
+      </div>
+    ));
+  };
+
+  return (
+    <div className={cn('space-y-1', className)}>
+      {renderItems(0, items)}
+    </div>
+  );
+}

package/web/components/ui/SkipLinks.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+/**
+ * Skip Links component for keyboard accessibility.
+ * Provides quick navigation to main content areas for screen reader users.
+ * Links are visually hidden but appear on focus.
+ */
+
+interface SkipLink {
+  href: string;
+  label: string;
+}
+
+const skipLinks: SkipLink[] = [
+  { href: '#main-editor', label: 'Skip to editor' },
+  { href: '#main-sidebar', label: 'Skip to sidebar' },
+  { href: '#main-chat', label: 'Skip to chat' },
+];
+
+export function SkipLinks() {
+  return (
+    <nav aria-label="Skip navigation" className="sr-only focus-within:not-sr-only">
+      <ul className="fixed top-0 left-0 z-[100] flex gap-2 p-2 bg-[#12121a] border-b border-white/10">
+        {skipLinks.map((link) => (
+          <li key={link.href}>
+            <a
+              href={link.href}
+              className="sr-only focus:not-sr-only focus:inline-block px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-md hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-[#0a0a0f]"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/web/components/ui/Toaster.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { Toaster as SonnerToaster } from 'sonner';
+
+export function Toaster() {
+  return (
+    <SonnerToaster
+      position="bottom-right"
+      toastOptions={{
+        style: {
+          background: '#12121a',
+          border: '1px solid rgba(255, 255, 255, 0.1)',
+          color: '#fff',
+        },
+        classNames: {
+          toast: 'group',
+          title: 'text-sm font-medium',
+          description: 'text-xs text-gray-400',
+          success: 'border-green-500/30 bg-green-500/10',
+          error: 'border-red-500/30 bg-red-500/10',
+          warning: 'border-yellow-500/30 bg-yellow-500/10',
+          info: 'border-purple-500/30 bg-purple-500/10',
+        },
+      }}
+      icons={{
+        success: (
+          <div className="w-5 h-5 rounded-full bg-green-500/20 flex items-center justify-center">
+            <svg className="w-3 h-3 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+        ),
+        error: (
+          <div className="w-5 h-5 rounded-full bg-red-500/20 flex items-center justify-center">
+            <svg className="w-3 h-3 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </div>
+        ),
+        warning: (
+          <div className="w-5 h-5 rounded-full bg-yellow-500/20 flex items-center justify-center">
+            <svg className="w-3 h-3 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </div>
+        ),
+        info: (
+          <div className="w-5 h-5 rounded-full bg-purple-500/20 flex items-center justify-center">
+            <svg className="w-3 h-3 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+        ),
+      }}
+    />
+  );
+}

package/web/hooks/useFocusTrap.ts

@@ -0,0 +1,141 @@
+'use client';
+
+import { useEffect, useRef, RefObject } from 'react';
+
+/**
+ * Custom hook for trapping focus within a container element.
+ * Implements accessible modal focus management per WAI-ARIA guidelines.
+ *
+ * Features:
+ * - Traps Tab/Shift+Tab navigation within container
+ * - Auto-focuses first focusable element on activation
+ * - Restores focus to previous element on deactivation
+ * - Handles ESC key for closing (optional)
+ *
+ * @param containerRef - Reference to the container element
+ * @param isActive - Whether the focus trap is currently active
+ * @param options - Configuration options
+ */
+interface UseFocusTrapOptions {
+  /** Called when Escape is pressed */
+  onEscape?: () => void;
+  /** Auto-focus first element when activated (default: true) */
+  autoFocus?: boolean;
+  /** Restore focus when deactivated (default: true) */
+  restoreFocus?: boolean;
+}
+
+const FOCUSABLE_SELECTORS = [
+  'button:not([disabled])',
+  'a[href]',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]',
+].join(', ');
+
+export function useFocusTrap(
+  containerRef: RefObject<HTMLElement | null>,
+  isActive: boolean,
+  options: UseFocusTrapOptions = {}
+) {
+  const { onEscape, autoFocus = true, restoreFocus = true } = options;
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!isActive || !containerRef.current) return;
+
+    const container = containerRef.current;
+
+    // Store currently focused element
+    if (restoreFocus) {
+      previousActiveElement.current = document.activeElement as HTMLElement;
+    }
+
+    // Get all focusable elements
+    const getFocusableElements = (): HTMLElement[] => {
+      return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS))
+        .filter((el) => {
+          // Filter out hidden elements
+          const style = window.getComputedStyle(el);
+          return style.display !== 'none' && style.visibility !== 'hidden';
+        });
+    };
+
+    // Auto-focus first element
+    if (autoFocus) {
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length > 0) {
+        // Small delay to ensure DOM is ready
+        requestAnimationFrame(() => {
+          focusableElements[0]?.focus();
+        });
+      }
+    }
+
+    // Handle keydown for tab trapping and escape
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && onEscape) {
+        event.preventDefault();
+        onEscape();
+        return;
+      }
+
+      if (event.key !== 'Tab') return;
+
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length === 0) return;
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      const activeElement = document.activeElement;
+
+      // Shift+Tab on first element → focus last
+      if (event.shiftKey && activeElement === firstElement) {
+        event.preventDefault();
+        lastElement?.focus();
+        return;
+      }
+
+      // Tab on last element → focus first
+      if (!event.shiftKey && activeElement === lastElement) {
+        event.preventDefault();
+        firstElement?.focus();
+        return;
+      }
+
+      // If focus is outside container, bring it back
+      if (!container.contains(activeElement)) {
+        event.preventDefault();
+        firstElement?.focus();
+      }
+    };
+
+    // Prevent focus from leaving container via mouse click
+    const handleFocusIn = (event: FocusEvent) => {
+      if (!container.contains(event.target as Node)) {
+        const focusableElements = getFocusableElements();
+        if (focusableElements.length > 0) {
+          focusableElements[0]?.focus();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('focusin', handleFocusIn);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('focusin', handleFocusIn);
+
+      // Restore focus to previous element
+      if (restoreFocus && previousActiveElement.current) {
+        // Small delay to prevent focus issues
+        requestAnimationFrame(() => {
+          previousActiveElement.current?.focus();
+        });
+      }
+    };
+  }, [isActive, containerRef, onEscape, autoFocus, restoreFocus]);
+}