Add comments

src/primitives/Dialog.tsx

@@ -45,7 +45,7 @@ export function Dialog({
         componentTheme,
         'fixed inset-0 z-50 flex items-center justify-center',
         'bg-black/50 transition-opacity duration-200',
-        'animate-in fade-in duration-200'
+        'animate-in fade-in duration-200',
       )}
     >
       <FocusTrap active={isOpen}>

src/primitives/DismissableLayer.tsx

@@ -16,6 +16,7 @@ export function DismissableLayer({
   onDismiss,
 }: DismissableLayerProps) {
   const layerRef = useRef<HTMLDivElement>(null);
+  // Tracks whether the pointer event originated inside the React component tree
   const isPointerInsideReactTreeRef = useRef(false);
 
   useEffect(() => {
@@ -33,15 +34,19 @@ export function DismissableLayer({
       return layerRef.current && !layerRef.current.contains(target);
     };
 
+    // Handle clicks outside the layer
     const handlePointerDown = (event: PointerEvent) => {
+      // Skip if outside clicks are disabled or if the click started inside the component
       if (disableOutsideClick || isPointerInsideReactTreeRef.current) {
         isPointerInsideReactTreeRef.current = false;
         return;
       }
 
+      // Dismiss if click is outside the layer
       if (shouldDismiss(event.target as Node)) {
         onDismiss?.();
       }
+      // Reset the flag after handling the event
       isPointerInsideReactTreeRef.current = false;
     };
 
@@ -57,6 +62,8 @@ export function DismissableLayer({
   return (
     <div
       data-testid="ockDismissableLayer"
+      // Set flag when pointer event starts inside the component
+      // This prevents dismissal when dragging from inside to outside
       onPointerDownCapture={() => {
         isPointerInsideReactTreeRef.current = true;
       }}