@jmruthers/pace-core 0.6.9 → 0.6.10

package/src/components/Dialog/Dialog.tsx

@@ -98,35 +98,7 @@ import { useState, useEffect, useRef, useCallback, useId, useMemo } from 'react'
 import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { useSessionDraft } from '../../hooks/useSessionDraft';
 import { deriveDialogKey } from '../../utils/persistence/keyDerivation';
-
-/**
- * Simple debounce function that matches lodash debounce API
- * Returns a debounced function with a cancel method
- */
-function debounce<T extends (...args: any[]) => void>(
-  func: T,
-  wait: number
-): T & { cancel: () => void } {
-  let timeoutId: ReturnType<typeof setTimeout> | null = null;
-
-  const debounced = ((...args: Parameters<T>) => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      func(...args);
-    }, wait);
-  }) as T & { cancel: () => void };
-
-  debounced.cancel = () => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-      timeoutId = null;
-    }
-  };
-
-  return debounced;
-}
+import { createLogger } from '../../utils/core/logger';
 
 /**
  * Dialog size variants
@@ -232,12 +204,6 @@ export interface DialogPortalProps {
   children: React.ReactNode;
 }
 
-/**
- * Props for the DialogClose component
- * @public
- */
-export interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
-
 /**
  * Props for the DialogHeader component (semantic header element)
  * @public
@@ -267,8 +233,6 @@ export interface DialogBodyProps extends React.HTMLAttributes<HTMLElement> {
   htmlContent?: string;
   /** Whether to allow HTML content rendering (default: true) */
   allowHtml?: boolean;
-  /** Whether to use strict HTML sanitization (default: true) */
-  strictSanitization?: boolean;
   /** Whether to log HTML sanitization warnings to console (default: false) */
   logWarnings?: boolean;
 }
@@ -387,12 +351,13 @@ const DialogTrigger = React.forwardRef<HTMLElement, DialogTriggerProps>(
     }, [onOpenChange, onClick]);
 
     if (asChild && React.isValidElement(children)) {
-      return React.cloneElement(children as React.ReactElement<any>, {
+      const childElement = children as React.ReactElement<React.HTMLAttributes<HTMLElement>>;
+      return React.cloneElement(childElement, {
         ref,
         onClick: handleClick,
-        className: cn(className, (children as any).props?.className),
+        className: cn(className, childElement.props?.className),
         ...props,
-      });
+      } as Partial<React.HTMLAttributes<HTMLElement>>) as React.ReactElement;
     }
 
     return (
@@ -435,7 +400,7 @@ DialogPortal.displayName = 'DialogPortal';
  * when using native dialog element which provides ::backdrop automatically
  */
 const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlayProps>(
-  ({ className, ...props }, ref) => {
+  ({ className: _className, ..._props }, _ref) => {
     // Note: Native dialog element provides ::backdrop automatically
     // This component is kept for API compatibility but may not render
     // The native dialog's ::backdrop is styled via CSS
@@ -447,6 +412,7 @@ DialogOverlay.displayName = 'DialogOverlay';
 /**
  * Custom hook for managing smart dialog dimensions
  * Handles responsive sizing and viewport-based constraints
+ * Dimensions are calculated synchronously based on props - no resize listener needed
  */
 const useSmartDimensions = ({
   maxHeightPercent,
@@ -455,7 +421,6 @@ const useSmartDimensions = ({
   maxWidth,
   minHeight,
   minWidth,
-  enableScrolling = false,
 }: {
   maxHeightPercent?: number;
   maxWidthPercent?: number;
@@ -463,88 +428,38 @@ const useSmartDimensions = ({
   maxWidth?: string;
   minHeight?: string;
   minWidth?: string;
-  enableScrolling?: boolean;
 }) => {
-  const [dimensions, setDimensions] = useState<React.CSSProperties>({});
-
-  useEffect(() => {
-    if (!maxHeightPercent && !maxWidthPercent && !maxHeight && !maxWidth && !minHeight && !minWidth) {
-      return;
+  // Calculate dimensions synchronously - no need for resize listener
+  // CSS viewport units (vh/vw) handle responsiveness automatically
+  return React.useMemo<React.CSSProperties>(() => {
+    const result: React.CSSProperties = {};
+
+    // Handle height constraints
+    if (maxHeightPercent && typeof maxHeightPercent === 'number') {
+      const constrainedHeight = Math.min(maxHeightPercent, 95);
+      result.maxHeight = `${constrainedHeight}vh`;
+    } else if (maxHeight) {
+      result.maxHeight = maxHeight;
     }
 
-    const updateDimensions = () => {
-      const result: React.CSSProperties = {};
-
-      // Handle height constraints
-      if (maxHeightPercent && typeof maxHeightPercent === 'number') {
-        const constrainedHeight = Math.min(maxHeightPercent, 95);
-        result.maxHeight = `${constrainedHeight}vh`;
-      } else if (maxHeight) {
-        result.maxHeight = maxHeight;
-      }
-
-      // Handle width constraints  
-      if (maxWidthPercent && typeof maxWidthPercent === 'number') {
-        const constrainedWidth = Math.min(maxWidthPercent, 95);
-        result.maxWidth = `${constrainedWidth}vw`;
-      } else if (maxWidth) {
-        result.maxWidth = maxWidth;
-      }
-
-      // Include minHeight/minWidth if provided
-      if (minHeight) {
-        result.minHeight = minHeight;
-      }
-      if (minWidth) {
-        result.minWidth = minWidth;
-      }
-
-      setDimensions(result);
-    };
-
-    // Debounced resize handler
-    const debouncedUpdate = debounce(updateDimensions, 100);
-    
-    // Initial calculation
-    updateDimensions();
-    
-    // Listen for resize events
-    window.addEventListener('resize', debouncedUpdate);
-    
-    return () => {
-      window.removeEventListener('resize', debouncedUpdate);
-      debouncedUpdate.cancel();
-    };
-  }, [maxHeightPercent, maxWidthPercent, maxHeight, maxWidth, minHeight, minWidth, enableScrolling]);
-
-  // Return dimensions
-  const result: React.CSSProperties = {};
-
-  // Handle height constraints
-  if (maxHeightPercent && typeof maxHeightPercent === 'number') {
-    const constrainedHeight = Math.min(maxHeightPercent, 95);
-    result.maxHeight = `${constrainedHeight}vh`;
-  } else if (maxHeight) {
-    result.maxHeight = maxHeight;
-  }
-
-  // Handle width constraints
-  if (maxWidthPercent && typeof maxWidthPercent === 'number') {
-    const constrainedWidth = Math.min(maxWidthPercent, 95);
-    result.maxWidth = `${constrainedWidth}vw`;
-  } else if (maxWidth) {
-    result.maxWidth = maxWidth;
-  }
+    // Handle width constraints
+    if (maxWidthPercent && typeof maxWidthPercent === 'number') {
+      const constrainedWidth = Math.min(maxWidthPercent, 95);
+      result.maxWidth = `${constrainedWidth}vw`;
+    } else if (maxWidth) {
+      result.maxWidth = maxWidth;
+    }
 
-  // Include minHeight/minWidth if provided
-  if (minHeight) {
-    result.minHeight = minHeight;
-  }
-  if (minWidth) {
-    result.minWidth = minWidth;
-  }
+    // Include minHeight/minWidth if provided
+    if (minHeight) {
+      result.minHeight = minHeight;
+    }
+    if (minWidth) {
+      result.minWidth = minWidth;
+    }
 
-  return result;
+    return result;
+  }, [maxHeightPercent, maxWidthPercent, maxHeight, maxWidth, minHeight, minWidth]);
 };
 
 /**
@@ -673,6 +588,9 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
     const auth = useUnifiedAuth();
     const userId = auth.user?.id || null;
 
+    // Create logger after all hooks are called (must be before any useEffects that use it)
+    const logger = createLogger('Dialog');
+
     // Set dialog title in context for persistence
     useEffect(() => {
       if (setDialogTitle) {
@@ -758,7 +676,7 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
       // CRITICAL: Don't auto-open if dialog was manually opened
       // This prevents auto-open from interfering with manual opens
       if (wasManuallyOpenedRef.current) {
-        console.log('[Dialog Persistence] ⏭️ Skipping auto-open - dialog was manually opened', {
+        logger.debug('[Dialog Persistence] ⏭️ Skipping auto-open - dialog was manually opened', {
           persistenceKey,
           currentOpen: open,
         });
@@ -829,7 +747,7 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
         hasAutoOpenedRef.current = true;
         wasManuallyOpenedRef.current = false;
         
-        console.log('[Dialog] 🔄 AUTO-OPEN', { persistenceKey });
+        logger.debug('[Dialog] 🔄 AUTO-OPEN', { persistenceKey });
         
         // Use small delay to prevent visual flash
         const timeoutId = setTimeout(() => {
@@ -850,7 +768,7 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
           sessionStorage.removeItem(AUTO_OPEN_LOCK_KEY);
         };
       }
-    }, [persistenceKey, persistOpenState, persistedOpen, open, onOpenChange, wasRestored, clearDraft]);
+    }, [persistenceKey, persistOpenState, persistedOpen, open, onOpenChange, wasRestored, clearDraft, dialogRef, userId, logger]);
 
     // When this dialog auto-opens, clear persisted state of all other dialogs
     // This prevents multiple dialogs from being restored simultaneously
@@ -880,7 +798,7 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
         }
 
         if (keysToRemove.length > 0) {
-          console.log('[Dialog Persistence] Clearing other dialog persisted states:', keysToRemove);
+          logger.debug('[Dialog Persistence] Clearing other dialog persisted states:', keysToRemove);
           keysToRemove.forEach(key => sessionStorage.removeItem(key));
         }
 
@@ -923,7 +841,7 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
 
                   // Only close if this dialog has persisted state (was auto-opened)
                   if (hasPersistedState) {
-                    console.log('[Dialog Persistence] Closing other dialog with persisted state:', dialogPersistenceKey);
+                    logger.debug('[Dialog Persistence] Closing other dialog with persisted state:', dialogPersistenceKey);
                     dialogElement.close();
                     closedCount++;
                   }
@@ -932,7 +850,7 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
               }
             });
             if (closedCount > 0) {
-              console.log('[Dialog Persistence] Closed', closedCount, 'other dialog(s) with persisted state');
+              logger.debug('[Dialog Persistence] Closed', closedCount, 'other dialog(s) with persisted state');
             }
           }
         }, 100);
@@ -949,9 +867,9 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
           clearTimeout(timeoutId);
         };
       } catch (error) {
-        console.warn('[Dialog Persistence] Failed to clear other dialog states:', error);
+        logger.warn('[Dialog Persistence] Failed to clear other dialog states:', error);
       }
-    }, [open, persistenceKey, persistOpenState]);
+    }, [open, persistenceKey, persistOpenState, dialogRef, logger]);
 
     // When dialog closes (user action), immediately clear persisted state
     // This prevents the dialog from auto-opening again after user explicitly closed it
@@ -973,16 +891,22 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
 
     // Check lock BEFORE allowing dialog to open (synchronous check)
     // This prevents React from even trying to open if another dialog is open
+    // Track lock acquisition state for rendering decision
+    const [lockAcquired, setLockAcquired] = React.useState(false);
+    
     useEffect(() => {
       if (!open) {
+        setLockAcquired(false);
         return;
       }
 
       // Synchronously check if we can acquire the lock
-      const lockAcquired = acquireDialogLock(persistenceKey);
-      if (!lockAcquired) {
+      const acquired = acquireDialogLock(persistenceKey);
+      setLockAcquired(acquired);
+      
+      if (!acquired) {
         // Another dialog is open - prevent this one from opening
-        console.warn('[Dialog] ⚠️ Cannot open - another dialog holds the lock', {
+        logger.warn('[Dialog] ⚠️ Cannot open - another dialog holds the lock', {
           persistenceKey,
         });
         // Immediately close this dialog's React state
@@ -991,7 +915,7 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
       }
       
       // Lock acquired successfully - dialog can proceed to open
-    }, [open, persistenceKey, onOpenChange]);
+    }, [open, persistenceKey, onOpenChange, logger]);
 
     // Track when dialog closes via onOpenChange to mark as closed by user
     // This handles Cancel buttons and other programmatic closes
@@ -1021,10 +945,6 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
         return;
       }
 
-      // Persisting open state (logging removed for performance)
-
-      let logTimeoutId: ReturnType<typeof setTimeout> | null = null;
-
       // Only persist when dialog is open
       if (open) {
         // Reset the flag when opening
@@ -1049,13 +969,6 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
           wasManuallyOpenedRef.current = false;
         }
       }
-      
-      // Cleanup timeout on unmount or dependency change
-      return () => {
-        if (logTimeoutId) {
-          clearTimeout(logTimeoutId);
-        }
-      };
     }, [open, persistenceKey, persistOpenState, setPersistedOpen, clearDraft]);
 
     // Note: We do NOT automatically clear the draft when dialog closes
@@ -1079,8 +992,7 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
       maxHeight, 
       maxWidth,
       minHeight,
-      minWidth,
-      enableScrolling 
+      minWidth
     });
 
     // Focus trap
@@ -1129,7 +1041,7 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
             isCurrent: d === dialog,
           };
         });
-        console.log('[Dialog] 🟢 OPENING', {
+        logger.debug('[Dialog] 🟢 OPENING', {
           persistenceKey,
           dialogsInDOM: dialogsBefore,
           totalDialogs: allDialogsBefore.length,
@@ -1139,6 +1051,19 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
         // Lock was already checked in the earlier useEffect, so we can proceed
         requestAnimationFrame(() => {
           if (dialog && open) {
+            // Check if dialog is connected to DOM before attempting to open
+            if (!dialog.isConnected) {
+              logger.warn('[Dialog] ⚠️ Dialog not connected to DOM, skipping showModal()', { persistenceKey });
+              return;
+            }
+            
+            // Check if dialog is already open - if so, skip showModal() call
+            // This prevents "Cannot call showModal() on an open non-modal dialog" error
+            if (dialog.open) {
+              logger.debug('[Dialog] ⏭️ Dialog already open, skipping showModal()', { persistenceKey });
+              return;
+            }
+            
             // Before opening, close any other open dialogs (safety check)
             const allDialogs = document.querySelectorAll('dialog[role="dialog"]');
             allDialogs.forEach((d) => {
@@ -1149,14 +1074,14 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
               }
             });
             
-            console.log('[Dialog] ✅ showModal() called', { persistenceKey });
+            logger.debug('[Dialog] ✅ showModal() called', { persistenceKey });
             dialog.showModal();
           }
         });
       } else {
         // Close dialog before it's removed from DOM
         if (dialog.open) {
-          console.log('[Dialog] 🔴 CLOSING', { persistenceKey });
+          logger.debug('[Dialog] 🔴 CLOSING', { persistenceKey });
           dialog.close();
           // Release the lock
           releaseDialogLock(persistenceKey);
@@ -1173,7 +1098,7 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
                 // Only close dialogs that have persistence (they might auto-open)
                 // Non-persistent dialogs are user-controlled and shouldn't be closed
                 if (otherPersistenceKey) {
-                  console.warn('[Dialog] 🗑️ Closing other persisted dialog after lock release:', {
+                  logger.warn('[Dialog] 🗑️ Closing other persisted dialog after lock release:', {
                     persistenceKey,
                     otherPersistenceKey,
                   });
@@ -1185,7 +1110,7 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
           }, 50);
         }
       }
-    }, [open, persistenceKey, dialogRef]);
+    }, [open, persistenceKey, dialogRef, logger]);
 
     // Handle close event - sync state when dialog is closed externally
     // Also track when dialog is closed by user action (for persistence clearing)
@@ -1259,41 +1184,20 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
 
       const finalStyle: React.CSSProperties = { ...smartDimensions, ...style };
       
+      // When maxHeightPercent is set and enableScrolling is true, set height to match
+      // so the dialog always uses that space (not just as a max constraint)
+      if (enableScrolling && maxHeightPercent && typeof maxHeightPercent === 'number' && !maxHeight) {
+        const constrainedHeight = Math.min(maxHeightPercent, 95);
+        finalStyle.height = `${constrainedHeight}vh`;
+      }
+      
       if (!maxWidth && !maxWidthPercent) {
         const { maxWidth: _, ...styleWithoutMaxWidth } = finalStyle;
         return styleWithoutMaxWidth;
       }
       
       return finalStyle;
-    }, [smartDimensions, style, maxWidth, maxWidthPercent]);
-
-    // Track if lock has been acquired (set by useEffect when open becomes true)
-    const [lockAcquired, setLockAcquired] = React.useState(false);
-    
-    // Check lock BEFORE allowing dialog to open (synchronous check)
-    // This prevents React from even trying to open if another dialog is open
-    useEffect(() => {
-      if (!open) {
-        setLockAcquired(false);
-        return;
-      }
-
-      // Synchronously check if we can acquire the lock
-      const acquired = acquireDialogLock(persistenceKey);
-      setLockAcquired(acquired);
-      
-      if (!acquired) {
-        // Another dialog is open - prevent this one from opening
-        console.warn('[Dialog] ⚠️ Cannot open - another dialog holds the lock', {
-          persistenceKey,
-        });
-        // Immediately close this dialog's React state
-        onOpenChange?.(false);
-        return;
-      }
-      
-      // Lock acquired successfully - dialog can proceed to open
-    }, [open, persistenceKey, onOpenChange]);
+    }, [smartDimensions, style, maxWidth, maxWidthPercent, enableScrolling, maxHeight, maxHeightPercent]);
 
     // Synchronously check if we can render (must hold lock if open)
     const canRender = React.useMemo(() => {
@@ -1317,7 +1221,10 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
               'animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-[48%]',
               'sm:rounded-lg',
               // Reset native dialog styles
-              'm-0 p-0 max-w-none max-h-none w-auto h-auto border-0 bg-transparent outline-none',
+              'm-0 p-0 max-w-none max-h-none border-0 bg-transparent outline-none',
+              // When maxWidthPercent is set, use w-full to expand to the constraint (not w-auto)
+              // When maxWidthPercent is not set, use w-auto to size to content
+              (maxWidth || maxWidthPercent) ? 'w-full' : 'w-auto h-auto',
               // Apply our custom styling
               'border bg-background shadow-lg',
               // Backdrop styling is handled via core.css only
@@ -1327,7 +1234,7 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
               size === 'auto' && 'w-fit max-w-[90vw] sm:max-w-[80vw]',
               // Layout classes: use flex when we have height constraints or enableScrolling is true
               // Flex layout is needed for proper scrolling when height is constrained
-              (enableScrolling || hasHeightConstraint) ? 'flex flex-col px-6' : 'grid gap-4 p-6',
+              (enableScrolling || hasHeightConstraint) ? 'flex flex-col p-6' : 'grid p-6',
               // Full screen handling
               size === 'full' && 'sm:left-[50%] sm:top-[50%] sm:translate-x-[-50%] sm:translate-y-[-50%] left-0 top-0 translate-x-0 translate-y-0 h-full rounded-none sm:h-auto sm:rounded-lg',
               // Overflow handling for scrolling mode or when height is constrained
@@ -1392,12 +1299,13 @@ const DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>(
     }, [onOpenChange, markClosedByUser, onClick]);
 
     if (asChild && React.isValidElement(children)) {
-      return React.cloneElement(children as React.ReactElement<any>, {
+      const childElement = children as React.ReactElement<React.HTMLAttributes<HTMLElement>>;
+      return React.cloneElement(childElement, {
         ref,
         onClick: handleClick,
-        className: cn(className, (children as any).props?.className),
+        className: cn(className, childElement.props?.className),
         ...props,
-      });
+      } as Partial<React.HTMLAttributes<HTMLElement>>) as React.ReactElement;
     }
 
     return (
@@ -1430,8 +1338,8 @@ const DialogHeader = ({
 }: DialogHeaderProps) => (
   <header
     className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
-      sticky ? 'sticky top-0 z-10 bg-background pt-6 pb-4 border-b' : 'py-2',
+      'flex flex-col space-y-1.5 text-center sm:text-left mb-4',
+      sticky && 'sticky top-0 z-10 bg-background',
       className
     )}
     {...props}
@@ -1449,7 +1357,6 @@ const DialogBody = ({
   style,
   htmlContent,
   allowHtml = true,
-  strictSanitization = true,
   logWarnings = false,
   children,
   ...props
@@ -1467,12 +1374,11 @@ const DialogBody = ({
     }
 
     const result = renderSafeHtml(htmlContent, {
-      strict: strictSanitization,
       logWarnings
     });
 
     return result.html;
-  }, [htmlContent, allowHtml, strictSanitization, logWarnings]);
+  }, [htmlContent, allowHtml, logWarnings]);
 
   const hasHtmlContent = Boolean(htmlContent && allowHtml);
 
@@ -1510,7 +1416,7 @@ const DialogBody = ({
   return (
     <main
       className={cn(
-        'overflow-y-auto py-2',
+        'overflow-y-auto',
         // When in a flex container with height constraint, use flex properties
         // so DialogBody takes up available space and only scrolls when content exceeds it
         isInFlexContainer && 'flex-1 min-h-0',
@@ -1553,7 +1459,8 @@ const DialogFooter = ({
   <footer
     className={cn(
       !className && 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      !className && (sticky ? 'sticky bottom-0 z-10 bg-background pt-4 pb-6 border-t' : 'py-2'),
+      'mt-4',
+      sticky && 'sticky bottom-0 z-10 bg-background',
       className
     )}
     {...props}
@@ -1575,7 +1482,6 @@ const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
       }
 
       const result = renderSafeHtml(htmlContent, {
-        strict: true,
         logWarnings: false
       });
 
@@ -1614,7 +1520,6 @@ const DialogDescription = React.forwardRef<HTMLParagraphElement, DialogDescripti
       }
 
       const result = renderSafeHtml(htmlContent, {
-        strict: true,
         logWarnings: false
       });
 

package/src/components/ErrorBoundary/ErrorBoundary.test.tsx

@@ -27,8 +27,9 @@ const ThrowingComponent = ({ shouldThrow = true, errorMessage = 'Test error' }:
   return <div>No error</div>;
 };
 
+// DelayedErrorComponent removed - not used in tests
 // Component that throws an error after a delay
-const DelayedErrorComponent = ({ delay = 100 }: { delay?: number }) => {
+const _DelayedErrorComponent = ({ delay = 100 }: { delay?: number }) => {
   const [shouldThrow, setShouldThrow] = React.useState(false);
   
   React.useEffect(() => {
@@ -46,36 +47,6 @@ const DelayedErrorComponent = ({ delay = 100 }: { delay?: number }) => {
   return <div>Loading...</div>;
 };
 
-// Component that recovers after retry
-const RecoverableComponent = ({ shouldThrow = true }: { shouldThrow?: boolean }) => {
-  const [hasThrown, setHasThrown] = React.useState(false);
-  const [retryCount, setRetryCount] = React.useState(0);
-  
-  React.useEffect(() => {
-    if (shouldThrow && !hasThrown && retryCount === 0) {
-      setHasThrown(true);
-      throw new Error('Recoverable error');
-    }
-  }, [shouldThrow, hasThrown, retryCount]);
-  
-  // Reset when retry count changes (simulating retry)
-  React.useEffect(() => {
-    if (retryCount > 0) {
-      setHasThrown(false);
-    }
-  }, [retryCount]);
-  
-  // Simulate retry by incrementing retry count
-  React.useEffect(() => {
-    const timer = setTimeout(() => {
-      setRetryCount(prev => prev + 1);
-    }, 100);
-    return () => clearTimeout(timer);
-  }, []);
-  
-  return <div>Recovered successfully</div>;
-};
-
 describe('ErrorBoundary Component', () => {
   let originalMode: string | undefined;
 
@@ -687,37 +658,7 @@ describe('ErrorBoundary Component', () => {
       consoleSpy.mockRestore();
     });
 
-    it('handles errors with no component name', async () => {
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      
-      renderWithProviders(
-        <ErrorBoundary>
-          <ThrowingComponent />
-        </ErrorBoundary>
-      );
-      
-      await waitFor(() => {
-        expect(screen.getByText('Error in Component')).toBeInTheDocument();
-      }, { interval: 10 });
-      
-      consoleSpy.mockRestore();
-    });
 
-    it('handles errors with empty error message', async () => {
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      
-      renderWithProviders(
-        <ErrorBoundary>
-          <ThrowingComponent errorMessage="" />
-        </ErrorBoundary>
-      );
-      
-      await waitFor(() => {
-        expect(screen.getByText('An unexpected error occurred.')).toBeInTheDocument();
-      }, { interval: 10 });
-      
-      consoleSpy.mockRestore();
-    });
   });
 
   describe('Performance and Cleanup', () => {
@@ -932,7 +873,6 @@ describe('ErrorBoundary Component', () => {
     it('passes correct error information to global handler', async () => {
       const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
       const globalErrorHandler = vi.fn();
-      const testError = new Error('Custom test error');
       
       renderWithProviders(
         <ErrorBoundaryProvider defaultErrorHandler={globalErrorHandler}>

package/src/components/ErrorBoundary/ErrorBoundaryContext.context.ts

@@ -0,0 +1,17 @@
+/**
+ * @file Error Boundary Context Definition
+ * @package @jmruthers/pace-core
+ * @module Components/ErrorBoundary
+ * @since 0.6.2
+ *
+ * Context definition for ErrorBoundary.
+ */
+
+import { createContext } from 'react';
+import type { ErrorBoundaryContextType } from './ErrorBoundaryContext.types';
+
+/**
+ * Context for ErrorBoundary global configuration
+ * @internal
+ */
+export const ErrorBoundaryContext = createContext<ErrorBoundaryContextType | undefined>(undefined);