From c7a5d2d542b7f9edf1d9f05801a940c314f141bd Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Wed, 11 Mar 2026 14:09:22 +1300
Subject: [PATCH] fix(24-01): fix presets popup dismiss and modal overlay
 click-through

- Add presetsPopupRef to EaseCurve click-outside handler so clicking
  preset buttons no longer dismisses the popup
- ProjectSetupModal overlay only closes when clicking the overlay itself
  (e.target === e.currentTarget), preventing portal child clicks from
  triggering close

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/ProjectSetupModal.tsx  | 5 +++--
 src/components/nodes/ControlPanel.tsx | 3 +++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ProjectSetupModal.tsx b/src/components/ProjectSetupModal.tsx
index a8f6ba4d..2aa64262 100644
--- a/src/components/ProjectSetupModal.tsx
+++ b/src/components/ProjectSetupModal.tsx
@@ -383,12 +383,13 @@ export function ProjectSetupModal({
   return (
     <div
       className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm"
-      onClick={onClose}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
       onWheelCapture={(e) => e.stopPropagation()}
     >
       <div
         className="bg-neutral-800 rounded-xl w-[520px] border border-neutral-700 shadow-2xl overflow-clip flex flex-col max-h-[80vh]"
-        onClick={(e) => e.stopPropagation()}
         onKeyDown={handleKeyDown}
       >
         <div className="px-8 pt-8 pb-0 shrink-0">
diff --git a/src/components/nodes/ControlPanel.tsx b/src/components/nodes/ControlPanel.tsx
index 888b155d..aa526284 100644
--- a/src/components/nodes/ControlPanel.tsx
+++ b/src/components/nodes/ControlPanel.tsx
@@ -884,6 +884,7 @@ function EaseCurveControls({ node }: { node: Node }) {
   const removeEdge = useWorkflowStore((state) => state.removeEdge);
   const [showPresets, setShowPresets] = useState(false);
   const presetsButtonRef = useRef<HTMLButtonElement>(null);
+  const presetsPopupRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!showPresets) return;
@@ -893,6 +894,7 @@ function EaseCurveControls({ node }: { node: Node }) {
     };
     const handleClickOutside = (e: MouseEvent) => {
       if (presetsButtonRef.current?.contains(e.target as HTMLElement)) return;
+      if (presetsPopupRef.current?.contains(e.target as HTMLElement)) return;
       setShowPresets(false);
     };
 
@@ -1022,6 +1024,7 @@ function EaseCurveControls({ node }: { node: Node }) {
 
       {showPresets && typeof document !== 'undefined' && createPortal(
         <div
+          ref={presetsPopupRef}
           className="fixed z-[100] bg-neutral-800 border border-neutral-600 rounded-lg shadow-xl p-2 max-h-[60vh] overflow-y-auto nowheel"
           style={{
             top: presetsButtonRef.current?.getBoundingClientRect().bottom || 0,