@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/Dialog/Dialog.tsx

@@ -42,7 +42,7 @@
  *     <DialogBody>
  *       <section className="space-y-4">
  *         <fieldset className="grid grid-cols-4 items-center gap-4">
- *           <Label htmlFor="name" className="text-right">Name</Label>
+ *           <Label htmlFor="name">Name</Label>
  *           <Input id="name" defaultValue="John Doe" className="col-span-3" />
  *         </fieldset>
  *       </section>
@@ -89,16 +89,20 @@
 
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { X } from 'lucide-react';
 import { useLocation } from 'react-router-dom';
+import { Button, IconButton } from '../Button';
+import { X } from '../../icons';
 import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { cn } from '../../utils/core/cn';
+import { mergeRefs } from '../../utils/core/mergeRefs';
 import { renderSafeHtml } from '../../utils/validation/htmlSanitization';
 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';
 import { createLogger } from '../../utils/core/logger';
+import { useDialogPersistence } from './useDialogPersistence';
+import { useDialogDimensions } from './useDialogDimensions';
+import { useDialogLifecycle } from './useDialogLifecycle';
 
 /**
  * Dialog size variants
@@ -115,7 +119,6 @@ interface DialogContextValue {
   dialogRef: React.RefObject<HTMLDialogElement | null>;
   titleId: string;
   descriptionId: string;
-  dialogTitle?: string; // For persistence key derivation
   markClosedByUser?: () => void; // Callback to mark dialog as closed by user (for Cancel buttons, etc.)
 }
 
@@ -190,12 +193,6 @@ export interface DialogContentProps extends React.HTMLAttributes<HTMLDialogEleme
   persistOpenState?: boolean;
 }
 
-/**
- * Props for the DialogOverlay component
- * @public
- */
-export interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}
-
 /**
  * Props for the DialogPortal component
  * @public
@@ -259,16 +256,6 @@ export interface DialogDescriptionProps extends React.HTMLAttributes<HTMLParagra
   allowHtml?: boolean;
 }
 
-// Size mapping for dialog variants
-const sizeClasses = {
-  sm: 'max-w-sm',
-  md: 'max-w-md', 
-  lg: 'max-w-lg',
-  xl: 'max-w-xl',
-  full: 'max-w-full size-full',
-  auto: 'max-w-none w-auto min-w-0'
-};
-
 /**
  * Dialog root component
  * Provides context for dialog state management
@@ -283,7 +270,6 @@ const Dialog = React.memo<DialogProps>(function Dialog({
   const dialogRef = useRef<HTMLDialogElement | null>(null);
   const titleId = useId();
   const descriptionId = useId();
-  const dialogTitleRef = useRef<string | undefined>(undefined);
   const [markClosedByUser, setMarkClosedByUserState] = useState<(() => void) | undefined>(undefined);
 
   const isControlled = controlledOpen !== undefined;
@@ -302,15 +288,9 @@ const Dialog = React.memo<DialogProps>(function Dialog({
     dialogRef,
     titleId,
     descriptionId,
-    dialogTitle: dialogTitleRef.current,
     markClosedByUser, // Set by DialogContent
   }), [open, handleOpenChange, titleId, descriptionId, markClosedByUser]);
 
-  // Expose function to set dialog title (called by DialogContent)
-  const setDialogTitle = useCallback((title: string | undefined) => {
-    dialogTitleRef.current = title;
-  }, []);
-
   // Expose function to set markClosedByUser callback (called by DialogContent)
   const setMarkClosedByUser = useCallback((callback: (() => void) | undefined) => {
     setMarkClosedByUserState(callback);
@@ -318,22 +298,17 @@ const Dialog = React.memo<DialogProps>(function Dialog({
 
   return (
     <DialogContext.Provider value={contextValue}>
-      <DialogTitleContext.Provider value={setDialogTitle}>
-        <DialogMarkClosedContext.Provider value={setMarkClosedByUser}>
-          {children}
-        </DialogMarkClosedContext.Provider>
-      </DialogTitleContext.Provider>
+      <DialogMarkClosedContext.Provider value={setMarkClosedByUser}>
+        {children}
+      </DialogMarkClosedContext.Provider>
     </DialogContext.Provider>
   );
 });
 
-// Context for setting dialog title from DialogContent
-const DialogTitleContext = React.createContext<((title: string | undefined) => void) | null>(null);
-
 // Context for setting markClosedByUser callback from DialogContent
 const DialogMarkClosedContext = React.createContext<((callback: (() => void) | undefined) => void) | null>(null);
 
-// Context for marking dialog as closed by user (from DialogContent to DialogClose)
+// Context for passing markClosedByUser to DialogClose in the same render (DialogContext.markClosedByUser is set async)
 const DialogCloseContext = React.createContext<(() => void) | null>(null);
 Dialog.displayName = 'Dialog';
 
@@ -341,7 +316,7 @@ Dialog.displayName = 'Dialog';
  * DialogTrigger component
  * Opens the dialog when clicked
  */
-const DialogTrigger = React.forwardRef<HTMLElement, DialogTriggerProps>(
+const DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(
   ({ children, asChild = false, className, onClick, ...props }, ref) => {
     const { onOpenChange } = useDialogContext();
 
@@ -357,19 +332,19 @@ const DialogTrigger = React.forwardRef<HTMLElement, DialogTriggerProps>(
         onClick: handleClick,
         className: cn(className, childElement.props?.className),
         ...props,
-      } as Partial<React.HTMLAttributes<HTMLElement>>) as React.ReactElement;
+      } as React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>);
     }
 
     return (
-      <button
-        ref={ref as React.RefObject<HTMLButtonElement>}
+      <Button
+        ref={ref}
         type="button"
         onClick={handleClick}
         className={className}
         {...props}
       >
         {children}
-      </button>
+      </Button>
     );
   }
 );
@@ -393,172 +368,28 @@ const DialogPortal: React.FC<DialogPortalProps> = ({ children }) => {
 };
 DialogPortal.displayName = 'DialogPortal';
 
-/**
- * DialogOverlay component
- * Backdrop overlay for the dialog (optional, native dialog provides ::backdrop)
- * This component is kept for backward compatibility but may not be needed
- * when using native dialog element which provides ::backdrop automatically
- */
-const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlayProps>(
-  ({ 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
-    return null;
-  }
-);
-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,
-  maxWidthPercent,
-  maxHeight,
-  maxWidth,
-  minHeight,
-  minWidth,
-}: {
-  maxHeightPercent?: number;
-  maxWidthPercent?: number;
-  maxHeight?: string;
-  maxWidth?: string;
-  minHeight?: string;
-  minWidth?: string;
-}) => {
-  // 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;
-    }
-
-    // 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;
-    }
-
-    return result;
-  }, [maxHeightPercent, maxWidthPercent, maxHeight, maxWidth, minHeight, minWidth]);
-};
-
-/**
- * Global lock to ensure only one dialog is open at a time
- * Uses sessionStorage for persistence across page reloads
- */
-const DIALOG_LOCK_KEY = 'pace-core:dialog:lock';
-
-function acquireDialogLock(persistenceKey: string | null): boolean {
-  if (!persistenceKey) {
-    return true; // Non-persisted dialogs can always open
-  }
-
-  try {
-    const lock = sessionStorage.getItem(DIALOG_LOCK_KEY);
-    if (lock) {
-      const lockData = JSON.parse(lock);
-      // If lock is held by this dialog, allow it
-      if (lockData.key === persistenceKey) {
-        return true;
-      }
-      // If lock is held by another dialog, check if that dialog is still open
-      const lockDialog = document.querySelector(`dialog[data-persistence-key="${lockData.key}"]`) as HTMLDialogElement;
-      if (lockDialog && lockDialog.open) {
-        return false; // Another dialog is still open
-      }
-      // Lock is stale, clear it
-      sessionStorage.removeItem(DIALOG_LOCK_KEY);
-    }
-    // Acquire the lock
-    sessionStorage.setItem(DIALOG_LOCK_KEY, JSON.stringify({
-      key: persistenceKey,
-      timestamp: Date.now(),
-    }));
-    return true;
-  } catch {
-    // If sessionStorage fails, allow opening (graceful degradation)
-    return true;
-  }
-}
-
-function releaseDialogLock(persistenceKey: string | null): void {
-  if (!persistenceKey) {
-    return;
-  }
-
-  try {
-    const lock = sessionStorage.getItem(DIALOG_LOCK_KEY);
-    if (lock) {
-      const lockData = JSON.parse(lock);
-      if (lockData.key === persistenceKey) {
-        sessionStorage.removeItem(DIALOG_LOCK_KEY);
-      }
-    }
-  } catch {
-    // Ignore errors
-  }
-}
-
-/**
- * Check if any other dialog (besides the current one) has persisted open state
- * This helps determine if another dialog should be allowed to auto-open
- */
-function checkOtherDialogsHavePersistedState(currentPersistenceKey: string | null): boolean {
-  if (!currentPersistenceKey) {
-    return false;
-  }
-
-  try {
-    const lock = sessionStorage.getItem(DIALOG_LOCK_KEY);
-    if (lock) {
-      const lockData = JSON.parse(lock);
-      if (lockData.key !== currentPersistenceKey) {
-        // Another dialog holds the lock
-        return true;
-      }
-    }
-  } catch {
-    // Error accessing sessionStorage - assume no other dialogs
-    return false;
-  }
-
-  return false;
+export interface UseDialogContentStateReturn {
+  mergedRef: (node: HTMLDialogElement | null) => void;
+  canRender: boolean;
+  markClosedByUser: () => void;
+  sizeClass: string;
+  mergedStyle: React.CSSProperties;
+  hasHeightConstraint: boolean;
+  persistenceKey: string | null;
+  persistOpenState: boolean;
+  titleId: string;
+  descriptionId: string;
+  open: boolean;
+  title: string | undefined;
+  description: string | undefined;
 }
 
-/**
- * DialogContent component
- * The main content container using semantic HTML <dialog> element with enhanced features
- * 
- * @param props - Content configuration and styling
- * @param ref - Forwarded ref to the dialog element
- * @returns JSX.Element - The semantic dialog content with overlay and optional close button
- */
-const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
-  ({ 
-    className, 
-    children, 
+function useDialogContentState(
+  props: DialogContentProps,
+  ref: React.ForwardedRef<HTMLDialogElement>
+): UseDialogContentStateReturn {
+  const {
     size = 'md',
-    showCloseButton = true,
     preventCloseOnEscape = false,
     preventCloseOnOutsideClick = false,
     maxHeightPercent,
@@ -572,427 +403,47 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
     description,
     style,
     persistOpenState = true,
-    ...props 
-  }, ref) => {
-    // Call all hooks unconditionally at the top level
-    // Hooks must be called in the same order on every render
-    const { open, onOpenChange, dialogRef, titleId, descriptionId } = useDialogContext();
-    const setDialogTitle = React.useContext(DialogTitleContext);
-    const setMarkClosedByUser = React.useContext(DialogMarkClosedContext);
-    
-    // Component mount/unmount tracking removed for performance
-
-    // Call hooks unconditionally - if providers are missing, they will throw
-    // Errors should be handled by error boundaries at a higher level
-    const location = useLocation();
-    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) {
-        setDialogTitle(title);
-      }
-    }, [title, setDialogTitle]);
-
-    // Derive persistence key (scoped by user ID)
-    // CRITICAL: Only enable persistence if we have a valid userId to prevent data leakage
-    const persistenceKey = useMemo(() => {
-      if (!persistOpenState) {
-        return null;
-      }
-      // Don't create persistence key if userId is not available
-      // This prevents unscoped persistence that could leak between users
-      if (!userId) {
-        return null;
-      }
-      return deriveDialogKey(
-        {
-          title,
-          description,
-        },
-        location,
-        userId
-      );
-    }, [title, description, location, userId, persistOpenState]);
-
-    // Use session draft for open state persistence
-    // Only enabled when we have a valid persistenceKey (which requires userId)
-    const { state: persistedOpen, setState: setPersistedOpen, clearDraft, wasRestored } = useSessionDraft<boolean>(
-      persistenceKey ? `${persistenceKey}:open` : 'dialog:no-key:open',
-      false,
-      {
-        enabled: Boolean(persistenceKey && persistOpenState && userId),
-        debounceMs: 300,
-      }
-    );
-
-    // Track if we've attempted auto-open to prevent multiple attempts
-    const hasAutoOpenedRef = useRef(false);
-    const hasInitializedRef = useRef(false);
-    // Track if dialog was closed by user action (to clear persistence)
-    const wasClosedByUserRef = useRef(false);
-    // Track if dialog was manually opened (to prevent auto-open from interfering)
-    const wasManuallyOpenedRef = useRef(false);
-    
-    // Callback to mark dialog as closed by user (exposed via context for DialogClose and Cancel buttons)
-    const markClosedByUser = useCallback(() => {
-      if (hasInitializedRef.current) {
-        wasClosedByUserRef.current = true;
-      }
-    }, []);
-
-    // Register markClosedByUser with parent Dialog component so it's available via DialogContext
-    useEffect(() => {
-      if (setMarkClosedByUser) {
-        setMarkClosedByUser(markClosedByUser);
-      }
-      return () => {
-        // Cleanup: unregister when DialogContent unmounts
-        if (setMarkClosedByUser) {
-          setMarkClosedByUser(undefined);
-        }
-      };
-    }, [setMarkClosedByUser, markClosedByUser]);
-    // Track if we've cleaned up other dialog states (to prevent multiple cleanup runs)
-    const hasCleanedUpOtherDialogsRef = useRef(false);
-
-    // Auto-open on mount if dialog was open when tab closed
-    useEffect(() => {
-      if (!persistenceKey || !persistOpenState) {
-        hasInitializedRef.current = true;
-        return;
-      }
-
-      // Only attempt auto-open once
-      // This prevents auto-open from running after manual opens
-      if (hasAutoOpenedRef.current) {
-        return;
-      }
-
-      // CRITICAL: Don't auto-open if dialog was manually opened
-      // This prevents auto-open from interfering with manual opens
-      if (wasManuallyOpenedRef.current) {
-        logger.debug('[Dialog Persistence] ⏭️ Skipping auto-open - dialog was manually opened', {
-          persistenceKey,
-          currentOpen: open,
-        });
-        return;
-      }
-
-      // Mark as initialized after first check
-      if (!hasInitializedRef.current) {
-        hasInitializedRef.current = true;
-      }
-
-      // Auto-open check (logging removed for performance)
-      
-      // CRITICAL: Don't auto-open if dialog is already open (user-initiated)
-      if (open === true) {
-        hasAutoOpenedRef.current = true;
-        return;
-      }
-
-      // CRITICAL: Don't auto-open if userId is not available (prevents unscoped persistence from being restored)
-      if (!userId) {
-        hasAutoOpenedRef.current = true;
-        return;
-      }
-
-      // Only auto-open if conditions are met
-      if (persistedOpen === true && open === false && wasRestored && !hasAutoOpenedRef.current && !wasManuallyOpenedRef.current) {
-        const AUTO_OPEN_LOCK_KEY = 'pace-core:dialog:auto-open-lock';
-        const lockTimestamp = sessionStorage.getItem(AUTO_OPEN_LOCK_KEY);
-        const now = Date.now();
-        
-        // Check if another dialog is already auto-opening (lock exists and is recent)
-        if (lockTimestamp) {
-          const lockAge = now - parseInt(lockTimestamp, 10);
-          if (lockAge < 1000) {
-            // Lock is recent - another dialog is auto-opening
-            // Check if there's already an open dialog with this persistence key
-            const existingOpenDialog = document.querySelector(`dialog[data-persistence-key="${persistenceKey}"][open]`);
-            if (existingOpenDialog) {
-              // Another instance is already open - skip
-              hasAutoOpenedRef.current = true;
-              return;
-            }
-            // Check if other dialog has persisted state
-            const otherDialogHasPersistedState = checkOtherDialogsHavePersistedState(persistenceKey);
-            if (otherDialogHasPersistedState) {
-              // Another dialog with persisted state is auto-opening - skip this one
-              clearDraft();
-              hasAutoOpenedRef.current = true;
-              return;
-            }
-          }
-          // Clear stale locks
-          if (lockAge > 2000) {
-            sessionStorage.removeItem(AUTO_OPEN_LOCK_KEY);
-          }
-        }
-
-        // Check if dialog with same key is already open in DOM (synchronous check)
-        const existingDialog = document.querySelector(`dialog[data-persistence-key="${persistenceKey}"][open]`);
-        if (existingDialog && existingDialog !== dialogRef.current && existingDialog !== internalRef.current) {
-          hasAutoOpenedRef.current = true;
-          return;
-        }
-
-        // Set lock and mark as auto-opened BEFORE calling onOpenChange
-        sessionStorage.setItem(AUTO_OPEN_LOCK_KEY, String(now));
-        hasAutoOpenedRef.current = true;
-        wasManuallyOpenedRef.current = false;
-        
-        logger.debug('[Dialog] 🔄 AUTO-OPEN', { persistenceKey });
-        
-        // Use small delay to prevent visual flash
-        const timeoutId = setTimeout(() => {
-          // Double-check: if dialog is still closed and no other instance opened it
-          const stillClosed = !open;
-          const noOtherInstance = !document.querySelector(`dialog[data-persistence-key="${persistenceKey}"][open]`);
-          
-          if (stillClosed && noOtherInstance) {
-            sessionStorage.removeItem(AUTO_OPEN_LOCK_KEY);
-            onOpenChange(true);
-          } else {
-            sessionStorage.removeItem(AUTO_OPEN_LOCK_KEY);
-          }
-        }, 75);
-
-        return () => {
-          clearTimeout(timeoutId);
-          sessionStorage.removeItem(AUTO_OPEN_LOCK_KEY);
-        };
-      }
-    }, [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
-    useEffect(() => {
-      if (!persistenceKey || !persistOpenState || !open || !hasAutoOpenedRef.current) {
-        return;
-      }
-
-      // Only run once when dialog first auto-opens
-      if (hasCleanedUpOtherDialogsRef.current) {
-        return;
-      }
-
-      // Clear all other dialog persisted states from sessionStorage
-      // AND close any other dialogs that are currently open in the DOM
-      // This ensures only the first auto-opened dialog remains open
-      try {
-        const keysToRemove: string[] = [];
-        for (let i = 0; i < sessionStorage.length; i++) {
-          const key = sessionStorage.key(i);
-          if (key && key.startsWith('pace-core:draft:dialog:') && key.endsWith(':open')) {
-            // Don't clear this dialog's own state
-            if (key !== `pace-core:draft:${persistenceKey}:open`) {
-              keysToRemove.push(key);
-            }
-          }
-        }
-
-        if (keysToRemove.length > 0) {
-          logger.debug('[Dialog Persistence] Clearing other dialog persisted states:', keysToRemove);
-          keysToRemove.forEach(key => sessionStorage.removeItem(key));
-        }
-
-        // Also close any other dialogs that are currently open in the DOM AND have persisted state
-        // This prevents dialogs with persisted state from being hidden behind this one
-        // We only close dialogs that have persisted state, not dialogs opened by app code
-        // We identify dialogs with persistence using a data attribute
-        const timeoutId = setTimeout(() => {
-          // Guard against test environment teardown
-          if (typeof document === 'undefined' || typeof sessionStorage === 'undefined') {
-            return;
-          }
-          
-          const otherOpenDialogs = document.querySelectorAll('dialog[open][role="dialog"]');
-          const currentDialog = dialogRef.current || internalRef.current;
-          if (otherOpenDialogs.length > 0 && currentDialog) {
-            let closedCount = 0;
-            otherOpenDialogs.forEach((dialog) => {
-              // Don't close this dialog
-              const dialogElement = dialog as HTMLDialogElement;
-              if (dialogElement !== currentDialog) {
-                // Check if this dialog has a data-persistence-key attribute
-                // This indicates it was auto-opened from persistence
-                const dialogPersistenceKey = dialogElement.getAttribute('data-persistence-key');
-                if (dialogPersistenceKey && dialogPersistenceKey !== persistenceKey) {
-                  // Check if this dialog's persisted state is true
-                  let hasPersistedState = false;
-                  try {
-                    const key = `pace-core:draft:${dialogPersistenceKey}:open`;
-                    const stored = sessionStorage.getItem(key);
-                    if (stored) {
-                      const parsed = JSON.parse(stored);
-                      if (parsed && parsed.data === true) {
-                        hasPersistedState = true;
-                      }
-                    }
-                  } catch {
-                    // Invalid data - skip
-                  }
-
-                  // Only close if this dialog has persisted state (was auto-opened)
-                  if (hasPersistedState) {
-                    logger.debug('[Dialog Persistence] Closing other dialog with persisted state:', dialogPersistenceKey);
-                    dialogElement.close();
-                    closedCount++;
-                  }
-                }
-                // If dialog doesn't have data-persistence-key, it was opened by app code - don't close it
-              }
-            });
-            if (closedCount > 0) {
-              logger.debug('[Dialog Persistence] Closed', closedCount, 'other dialog(s) with persisted state');
-            }
-          }
-        }, 100);
-
-        hasCleanedUpOtherDialogsRef.current = true;
-        
-        // Also clear the auto-open lock
-        if (typeof sessionStorage !== 'undefined') {
-          sessionStorage.removeItem('pace-core:dialog:auto-open-lock');
-        }
-        
-        // Cleanup timeout on unmount or dependency change
-        return () => {
-          clearTimeout(timeoutId);
-        };
-      } catch (error) {
-        logger.warn('[Dialog Persistence] Failed to clear other dialog states:', error);
-      }
-    }, [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
-    useEffect(() => {
-      if (!persistenceKey || !persistOpenState) {
-        return;
-      }
-
-      if (!hasInitializedRef.current) {
-        return;
-      }
-
-      // If dialog is closed and user closed it, clear persisted state immediately
-      if (!open && wasClosedByUserRef.current) {
-        clearDraft();
-        wasClosedByUserRef.current = false;
-      }
-    }, [open, persistenceKey, persistOpenState, clearDraft]);
-
-    // 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 acquired = acquireDialogLock(persistenceKey);
-      setLockAcquired(acquired);
-      
-      if (!acquired) {
-        // Another dialog is open - prevent this one from opening
-        logger.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, logger]);
-
-    // Track when dialog closes via onOpenChange to mark as closed by user
-    // This handles Cancel buttons and other programmatic closes
-    const previousOpenRef = useRef(open);
-    useEffect(() => {
-      // If dialog was open and is now closed, and it wasn't auto-opened, mark as closed by user
-      if (previousOpenRef.current === true && open === false && hasInitializedRef.current) {
-        // Only mark as closed by user if it wasn't an auto-open scenario
-        // Auto-open sets hasAutoOpenedRef before calling onOpenChange, so we can detect it
-        if (!hasAutoOpenedRef.current || wasManuallyOpenedRef.current) {
-          // Dialog was manually opened and then closed - mark as closed by user
-          wasClosedByUserRef.current = true;
-        }
-      }
-      previousOpenRef.current = open;
-    }, [open]);
-
-    // Persist open state changes
-    useEffect(() => {
-      if (!persistenceKey || !persistOpenState) {
-        return;
-      }
-
-      // Only persist after initial mount check is complete
-      // This prevents overwriting the persisted state before auto-open can read it
-      if (!hasInitializedRef.current) {
-        return;
-      }
+  } = props;
+
+  const { open, onOpenChange, dialogRef, titleId, descriptionId } = useDialogContext();
+  const setMarkClosedByUser = React.useContext(DialogMarkClosedContext);
+
+  const location = useLocation();
+  const auth = useUnifiedAuth();
+  const userId = auth.user?.id || null;
+
+  const logger = createLogger('Dialog');
+
+  const persistenceKey = useMemo(() => {
+    if (!persistOpenState) return null;
+    if (!userId) return null;
+    return deriveDialogKey({ title, description }, location, userId);
+  }, [title, description, location, userId, persistOpenState]);
+
+  const internalRef = useRef<HTMLDialogElement>(null);
+
+  const { lockAcquired, markClosedByUser, clearDraft } = useDialogPersistence({
+      open,
+      onOpenChange,
+      persistenceKey,
+      persistOpenState,
+      userId,
+      dialogRef,
+      internalRef,
+      setMarkClosedByUser,
+      logger,
+    });
 
-      // Only persist when dialog is open
-      if (open) {
-        // Reset the flag when opening
-        wasClosedByUserRef.current = false;
-        // If dialog is manually opened (not via auto-open), mark it so auto-open doesn't interfere
-        // This prevents auto-open from trying to open an already-open dialog
-        // We check if hasAutoOpenedRef is false to determine if this is a manual open
-        // (auto-open sets hasAutoOpenedRef to true before calling onOpenChange)
-        if (!hasAutoOpenedRef.current) {
-          // Mark as manually opened to prevent auto-open from interfering
-          wasManuallyOpenedRef.current = true;
-          // Also mark as "opened" to prevent auto-open from trying to open it again
-          hasAutoOpenedRef.current = true;
-        }
-        setPersistedOpen(true);
-      } else {
-        // Only clear draft if user explicitly closed (not if it was never opened or auto-opened then closed)
-        if (wasClosedByUserRef.current) {
-          clearDraft();
-          wasClosedByUserRef.current = false;
-          // Reset manual open flag when dialog is closed
-          wasManuallyOpenedRef.current = false;
-        }
-      }
-    }, [open, persistenceKey, persistOpenState, setPersistedOpen, clearDraft]);
-
-    // Note: We do NOT automatically clear the draft when dialog closes
-    // The draft should only be cleared on explicit user actions (e.g., form submit success)
-    // This allows the dialog to restore its state after tab switches
-    const internalRef = useRef<HTMLDialogElement>(null);
-    
-    // Use the dialogRef from context, or fall back to internal ref or forwarded ref
-    const actualDialogRef = dialogRef.current ? dialogRef : (ref ? (ref as React.RefObject<HTMLDialogElement>) : internalRef);
-
-    // Default to 80% viewport height if no height constraint is provided
-    // This allows the dialog to grow to 80% before enabling scrolling
-    const effectiveMaxHeightPercent = maxHeightPercent ?? (maxHeight ? undefined : 80);
-    
-    // Determine if we have a height constraint that requires flex layout
-    const hasHeightConstraint = Boolean(effectiveMaxHeightPercent || maxHeight);
-
-    const smartDimensions = useSmartDimensions({ 
-      maxHeightPercent: effectiveMaxHeightPercent, 
+    const { sizeClass, mergedStyle, hasHeightConstraint } = useDialogDimensions({
+      size,
+      maxHeightPercent,
       maxWidthPercent,
-      maxHeight, 
+      maxHeight,
       maxWidth,
       minHeight,
-      minWidth
+      minWidth,
+      enableScrolling,
+      style,
     });
 
     // Focus trap
@@ -1003,255 +454,114 @@ const DialogContent = React.forwardRef<HTMLDialogElement, DialogContentProps>(
       onEscape: preventCloseOnEscape ? undefined : () => onOpenChange(false),
     });
 
-    // Merge refs
-    const mergedRef = useCallback((node: HTMLDialogElement | null) => {
-      // Set context dialog ref
-      if (dialogRef && 'current' in dialogRef) {
-        (dialogRef as React.MutableRefObject<HTMLDialogElement | null>).current = node;
-      }
-      // Set internal ref
-      if (internalRef && 'current' in internalRef) {
-        internalRef.current = node;
-      }
-      // Set focus trap container ref
-      if (containerRef && 'current' in containerRef) {
-        (containerRef as React.MutableRefObject<HTMLElement | null>).current = node;
-      }
-      // Handle forwarded ref
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref && 'current' in ref) {
-        (ref as React.MutableRefObject<HTMLDialogElement | null>).current = node;
-      }
-    }, [dialogRef, containerRef, ref]);
-
-    // Handle dialog open/close
-    useEffect(() => {
-      const dialog = dialogRef.current || internalRef.current;
-      if (!dialog) return;
-
-      if (open) {
-        // Log all dialogs in DOM before opening
-        const allDialogsBefore = document.querySelectorAll('dialog[role="dialog"]');
-        const dialogsBefore = Array.from(allDialogsBefore).map((d) => {
-          const dialogEl = d as HTMLDialogElement;
-          return {
-            persistenceKey: dialogEl.getAttribute('data-persistence-key') || 'NO-KEY',
-            open: dialogEl.open,
-            isCurrent: d === dialog,
-          };
-        });
-        logger.debug('[Dialog] 🟢 OPENING', {
-          persistenceKey,
-          dialogsInDOM: dialogsBefore,
-          totalDialogs: allDialogsBefore.length,
-        });
-        
-        // Use requestAnimationFrame to ensure DOM is ready
-        // 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) => {
-              const dialogEl = d as HTMLDialogElement;
-              if (dialogEl !== dialog && dialogEl.open) {
-                dialogEl.setAttribute('data-duplicate-cleanup', 'true');
-                dialogEl.close();
-              }
-            });
-            
-            logger.debug('[Dialog] ✅ showModal() called', { persistenceKey });
-            dialog.showModal();
-          }
-        });
-      } else {
-        // Close dialog before it's removed from DOM
-        if (dialog.open) {
-          logger.debug('[Dialog] 🔴 CLOSING', { persistenceKey });
-          dialog.close();
-          // Release the lock
-          releaseDialogLock(persistenceKey);
-          
-          // After closing, check if any other dialogs with persistence are trying to open
-          // Only close dialogs that have persistence (data-persistence-key attribute)
-          // Non-persistent dialogs should be left alone
-          setTimeout(() => {
-            const allDialogs = document.querySelectorAll('dialog[role="dialog"]');
-            allDialogs.forEach((d) => {
-              const dialogEl = d as HTMLDialogElement;
-              if (dialogEl !== dialog && dialogEl.open) {
-                const otherPersistenceKey = dialogEl.getAttribute('data-persistence-key');
-                // Only close dialogs that have persistence (they might auto-open)
-                // Non-persistent dialogs are user-controlled and shouldn't be closed
-                if (otherPersistenceKey) {
-                  logger.warn('[Dialog] 🗑️ Closing other persisted dialog after lock release:', {
-                    persistenceKey,
-                    otherPersistenceKey,
-                  });
-                  dialogEl.setAttribute('data-duplicate-cleanup', 'true');
-                  dialogEl.close();
-                }
-              }
-            });
-          }, 50);
-        }
-      }
-    }, [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)
-    useEffect(() => {
-      const dialog = dialogRef.current || internalRef.current;
-      if (!dialog) return;
-
-      const handleClose = () => {
-        // Check if this close was initiated by the user (via close button)
-        const wasUserClosed = dialog.hasAttribute('data-user-closed');
-        if (wasUserClosed) {
-          dialog.removeAttribute('data-user-closed');
-          if (hasInitializedRef.current) {
-            wasClosedByUserRef.current = true;
-          }
-        }
-
-        // Ignore duplicate cleanup closes
-        const isDuplicateCleanup = dialog.hasAttribute('data-duplicate-cleanup');
-        if (isDuplicateCleanup) {
-          dialog.removeAttribute('data-duplicate-cleanup');
-          return;
-        }
-        
-        if (!dialog.open && open) {
-          // Mark as closed by user if this wasn't an auto-open scenario
-          if (hasInitializedRef.current && !wasUserClosed) {
-            wasClosedByUserRef.current = true;
-          }
-          onOpenChange(false);
-        } else if (!dialog.open && !open && hasInitializedRef.current && wasUserClosed) {
-          wasClosedByUserRef.current = true;
-        }
-      };
-
-      dialog.addEventListener('close', handleClose);
-      return () => {
-        dialog.removeEventListener('close', handleClose);
-      };
-    }, [open, onOpenChange, dialogRef]);
-
-    // Handle cancel event (Escape or backdrop click)
-    useEffect(() => {
-      const dialog = dialogRef.current || internalRef.current;
-      if (!dialog) return;
-
-      const handleCancel = (e: Event) => {
-        if (preventCloseOnEscape || preventCloseOnOutsideClick) {
-          e.preventDefault();
-          return;
-        }
-        // Mark as closed by user and clear persisted state
-        wasClosedByUserRef.current = true;
-        if (persistenceKey && persistOpenState && clearDraft) {
-          clearDraft();
-        }
-        onOpenChange(false);
-      };
-
-      dialog.addEventListener('cancel', handleCancel);
-      return () => {
-        dialog.removeEventListener('cancel', handleCancel);
-      };
-    }, [preventCloseOnEscape, preventCloseOnOutsideClick, onOpenChange, dialogRef, persistenceKey, persistOpenState, clearDraft]);
-
-    // Merge smart dimensions with provided style
-    const mergedStyle = React.useMemo(() => {
-      if (Object.keys(smartDimensions).length === 0) {
-        return style;
-      }
+    // Merge refs (avoids type assertions; mergeRefs handles RefObject and callback refs)
+    const mergedRef = useMemo(
+      () => mergeRefs(dialogRef, internalRef, containerRef, ref),
+      [dialogRef, containerRef, ref]
+    );
 
-      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, enableScrolling, maxHeight, maxHeightPercent]);
+    useDialogLifecycle({
+      dialogRef,
+      internalRef,
+      open,
+      persistenceKey,
+      logger,
+      onOpenChange,
+      markClosedByUser,
+      preventCloseOnEscape,
+      preventCloseOnOutsideClick,
+      persistOpenState,
+      clearDraft,
+    });
 
-    // Synchronously check if we can render (must hold lock if open)
     const canRender = React.useMemo(() => {
-      if (!open) {
-        return true; // Can always render when closed
-      }
-      if (!persistenceKey) {
-        return true; // Non-persisted dialogs can always render
-      }
-      // Use the lockAcquired state which is set by the effect
+      if (!open) return true;
+      if (!persistenceKey) return true;
       return lockAcquired;
     }, [open, persistenceKey, lockAcquired]);
 
+    return {
+      mergedRef,
+      canRender,
+      markClosedByUser,
+      sizeClass,
+      mergedStyle: mergedStyle ?? {},
+      hasHeightConstraint,
+      persistenceKey,
+      persistOpenState,
+      titleId,
+      descriptionId,
+      open,
+      title,
+      description,
+    };
+  }
+
+/**
+ * DialogContent component
+ * The main content container using semantic HTML <dialog> element with enhanced features.
+ * Inline style exception (5-styling): viewport-based max/min dimensions from props are applied
+ * via the style prop; they cannot be expressed with static Tailwind and are merged with optional consumer style.
+ *
+ * @param props - Content configuration and styling
+ * @param ref - Forwarded ref to the dialog element
+ * @returns JSX.Element - The semantic dialog content with overlay and optional close button
+ */
+const DialogContent = (React.forwardRef<HTMLDialogElement, DialogContentProps>)(
+  function DialogContentInner(props, ref) {
+    const {
+      className,
+      children,
+      size = 'md',
+      showCloseButton = true,
+      maxHeightPercent,
+      maxWidthPercent,
+      enableScrolling = false,
+      maxHeight,
+      maxWidth,
+      minHeight,
+      minWidth,
+      style: _styleProp,
+      title: _titleProp,
+      description: _descriptionProp,
+      persistOpenState: _persistOpenStateProp,
+      preventCloseOnEscape: _preventCloseOnEscape,
+      preventCloseOnOutsideClick: _preventCloseOnOutsideClick,
+      ...restProps
+    } = props;
+
+    const state = useDialogContentState(props, ref);
+
     return (
       <DialogPortal>
-        {open && canRender && (
+        {state.open && state.canRender && (
           <dialog
-            ref={mergedRef}
+            ref={state.mergedRef}
             className={cn(
               'fixed left-[50%] top-[50%] z-[51] w-full translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200',
               '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 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
-              // Only apply size classes if not using smart width
-              !maxWidth && !maxWidthPercent && sizeClasses[size],
-              // Auto size gets special handling
+              !maxWidth && !maxWidthPercent && state.sizeClass,
               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 p-6' : 'grid p-6',
-              // Full screen handling
+              (enableScrolling || state.hasHeightConstraint) ? 'flex flex-col p-6' : 'grid p-6',
               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
-              (enableScrolling || hasHeightConstraint) && 'overflow-hidden',
+              (enableScrolling || state.hasHeightConstraint) && 'overflow-hidden',
               className
             )}
-            style={mergedStyle}
+            style={state.mergedStyle}
             role="dialog"
             aria-modal="true"
-            aria-labelledby={titleId}
-            aria-describedby={descriptionId}
-            title={title}
-            aria-description={description}
-            data-persistence-key={persistenceKey && persistOpenState ? persistenceKey : undefined}
-            {...props}
+            aria-labelledby={state.titleId}
+            aria-describedby={state.descriptionId}
+            title={state.title}
+            aria-description={state.description}
+            data-persistence-key={state.persistenceKey && state.persistOpenState ? state.persistenceKey : undefined}
+            {...restProps}
           >
-            <DialogCloseContext.Provider value={markClosedByUser}>
+            <DialogCloseContext.Provider value={state.markClosedByUser}>
               {children}
               {showCloseButton && (
                 <DialogClose />
@@ -1280,48 +590,38 @@ export interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonE
  */
 const DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>(
   ({ className, asChild = false, children, onClick, ...props }, ref) => {
-    // Call all hooks unconditionally at the top level
-    // Hooks must be called in the same order on every render
     const { onOpenChange, markClosedByUser: contextMarkClosedByUser } = useDialogContext();
-    // Prefer DialogContext markClosedByUser (available to all components), fallback to DialogCloseContext (for backwards compatibility)
     const dialogCloseContextValue = React.useContext(DialogCloseContext);
-    const markClosedByUser = contextMarkClosedByUser || dialogCloseContextValue;
-    
-    const handleClick = useCallback((e: React.MouseEvent<HTMLElement>) => {
-      // Mark dialog as closed by user before calling onOpenChange
-      // This ensures the persisted state is cleared when user clicks close button
+    const markClosedByUser = contextMarkClosedByUser ?? dialogCloseContextValue;
+
+    const handleClick = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
       if (markClosedByUser) {
         markClosedByUser();
       }
-      
-      onClick?.(e as React.MouseEvent<HTMLButtonElement>);
+      onClick?.(e);
       onOpenChange(false);
     }, [onOpenChange, markClosedByUser, onClick]);
 
     if (asChild && React.isValidElement(children)) {
-      const childElement = children as React.ReactElement<React.HTMLAttributes<HTMLElement>>;
+      const childElement = children as React.ReactElement<React.HTMLAttributes<HTMLButtonElement>>;
       return React.cloneElement(childElement, {
         ref,
         onClick: handleClick,
         className: cn(className, childElement.props?.className),
         ...props,
-      } as Partial<React.HTMLAttributes<HTMLElement>>) as React.ReactElement;
+      } as React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>);
     }
 
     return (
-      <button
+      <IconButton
         ref={ref}
+        icon={<X className="size-4" />}
+        aria-label="Close"
         type="button"
         onClick={handleClick}
-        className={cn(
-          'absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none',
-          className
-        )}
+        className={cn('absolute right-4 top-4 z-10', className)}
         {...props}
-      >
-        <X className="size-4" />
-        <span className="sr-only">Close</span>
-      </button>
+      />
     );
   }
 );
@@ -1337,11 +637,7 @@ const DialogHeader = ({
   ...props
 }: DialogHeaderProps) => (
   <header
-    className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left mb-4',
-      sticky && 'sticky top-0 z-10 bg-background',
-      className
-    )}
+    className={cn('dialog-header', sticky && 'sticky top-0 z-10 bg-background', className)}
     {...props}
   />
 );
@@ -1361,6 +657,7 @@ const DialogBody = ({
   children,
   ...props
 }: DialogBodyProps) => {
+  // Inline style exception (5-styling): maxHeight and style from props; no fixed token set.
   const mergedStyle = React.useMemo(() => {
     return {
       ...(maxHeight && { maxHeight }),
@@ -1428,14 +725,14 @@ const DialogBody = ({
       {...props}
     >
       {processedHtmlContent ? (
-        <p 
+        <p
           dangerouslySetInnerHTML={{ __html: processedHtmlContent }}
-          className="prose prose-sm max-w-none"
+          className="dialog-body-html-content"
         />
       ) : (
         <>
           {hasHtmlContent && !processedHtmlContent && (
-            <p className="text-acc-500 mb-2">
+            <p className="dialog-body-fallback">
               No HTML content processed. Showing children instead.
             </p>
           )}
@@ -1457,12 +754,7 @@ const DialogFooter = ({
   ...props
 }: DialogFooterProps) => (
   <footer
-    className={cn(
-      !className && 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      'mt-4',
-      sticky && 'sticky bottom-0 z-10 bg-background',
-      className
-    )}
+    className={cn('dialog-footer', sticky && 'sticky bottom-0 z-10 bg-background', className)}
     {...props}
   />
 );