refactor(rack-planner): lift port config modal state to root level to avoid rendering issues within transformed modules

client/src/components/rack/ModuleBlock.tsx

@@ -15,11 +15,9 @@ interface ModuleBlockProps {
 }
 
 export function ModuleBlock({ module }: ModuleBlockProps) {
-  const { racks, updateModuleLocal } = useRackStore();
+  const { racks, updateModuleLocal, setActiveConfigPortId } = useRackStore();
   const [hovered, setHovered] = useState(false);
   const [editOpen, setEditOpen] = useState(false);
-  const [portModalOpen, setPortModalOpen] = useState(false);
-  const [selectedPortId, setSelectedPortId] = useState<string | null>(null);
 
   // Resize state
   const [previewUSize, setPreviewUSize] = useState<number | null>(null);
@@ -105,8 +103,7 @@ export function ModuleBlock({ module }: ModuleBlockProps) {
   }
 
   function openPort(portId: string) {
-    setSelectedPortId(portId);
-    setPortModalOpen(true);
+    setActiveConfigPortId(portId);
   }
 
   const { cablingFromPortId, setCablingFromPortId, createConnection } = useRackStore();
@@ -236,17 +233,6 @@ export function ModuleBlock({ module }: ModuleBlockProps) {
       </div>
 
       <ModuleEditPanel module={module} open={editOpen} onClose={() => setEditOpen(false)} />
-
-      {selectedPortId && (
-        <PortConfigModal
-          portId={selectedPortId}
-          open={portModalOpen}
-          onClose={() => {
-            setPortModalOpen(false);
-            setSelectedPortId(null);
-          }}
-        />
-      )}
     </>
   );
 }

client/src/components/rack/RackPlanner.tsx

@@ -18,6 +18,7 @@ import { RackColumn } from './RackColumn';
 import { DevicePalette } from './DevicePalette';
 import { ConnectionLayer } from './ConnectionLayer';
 import { AddModuleModal } from '../modals/AddModuleModal';
+import { PortConfigModal } from '../modals/PortConfigModal';
 import { RackSkeleton } from '../ui/Skeleton';
 import type { ModuleType } from '../../types';
 import { MODULE_TYPE_COLORS, MODULE_TYPE_LABELS } from '../../lib/constants';
@@ -85,7 +86,7 @@ const POINTER_SENSOR_OPTIONS = {
 };
 
 export function RackPlanner() {
-  const { racks, loading, fetchRacks, moveModule } = useRackStore();
+  const { racks, loading, fetchRacks, moveModule, activeConfigPortId, setActiveConfigPortId } = useRackStore();
   const canvasRef = useRef<HTMLDivElement>(null);
 
   // Drag state
@@ -295,6 +296,14 @@ export function RackPlanner() {
           initialType={pendingDrop.type}
         />
       )}
+
+      {activeConfigPortId && (
+        <PortConfigModal
+          open={!!activeConfigPortId}
+          portId={activeConfigPortId}
+          onClose={() => setActiveConfigPortId(null)}
+        />
+      )}
     </DndContext>
   );
 }

client/src/store/useRackStore.ts

@@ -24,6 +24,9 @@ interface RackState {
   setCablingFromPortId: (id: string | null) => void;
   createConnection: (fromPortId: string, toPortId: string) => Promise<void>;
   deleteConnection: (id: string) => Promise<void>;
+  // Port Config Global Modal
+  activeConfigPortId: string | null;
+  setActiveConfigPortId: (id: string | null) => void;
 }
 
 export const useRackStore = create<RackState>((set, get) => ({
@@ -128,4 +131,7 @@ export const useRackStore = create<RackState>((set, get) => ({
     const racks = await apiClient.racks.list();
     set({ racks });
   },
+
+  activeConfigPortId: null,
+  setActiveConfigPortId: (id) => set({ activeConfigPortId: id }),
 }));