@asup/context-menu 1.5.1 → 2.0.0

package/dist/main.js

@@ -3,7 +3,7 @@ import {_ as $duWW8$_} from "@swc/helpers/_/_object_spread";
 import {_ as $duWW8$_1} from "@swc/helpers/_/_object_spread_props";
 import {_ as $duWW8$_2} from "@swc/helpers/_/_object_without_properties";
 import {jsx as $duWW8$jsx, jsxs as $duWW8$jsxs, Fragment as $duWW8$Fragment} from "react/jsx-runtime";
-import {useRef as $duWW8$useRef, useState as $duWW8$useState, useMemo as $duWW8$useMemo, useCallback as $duWW8$useCallback, useEffect as $duWW8$useEffect, useLayoutEffect as $duWW8$useLayoutEffect, forwardRef as $duWW8$forwardRef, createContext as $duWW8$createContext, useContext as $duWW8$useContext} from "react";
+import {useRef as $duWW8$useRef, useState as $duWW8$useState, useMemo as $duWW8$useMemo, useCallback as $duWW8$useCallback, useEffect as $duWW8$useEffect, useTransition as $duWW8$useTransition, forwardRef as $duWW8$forwardRef, useLayoutEffect as $duWW8$useLayoutEffect, createContext as $duWW8$createContext, useContext as $duWW8$useContext} from "react";
 import {createPortal as $duWW8$createPortal} from "react-dom";
 
 
@@ -23,7 +23,6 @@ $parcel$export($b65191f6d0a0a991$exports, "ClickForMenu", function () { return $
 $parcel$export($b65191f6d0a0a991$exports, "ContextMenu", function () { return $567ed433af94513f$export$8dc6765e8be191c7; });
 $parcel$export($b65191f6d0a0a991$exports, "ContextMenuHandler", function () { return $1e1c1e9e0b943830$export$ed4f9641643dc7e4; });
 $parcel$export($b65191f6d0a0a991$exports, "ContextWindow", function () { return $b5e8657823def5be$export$1af8984c69ba1b24; });
-$parcel$export($b65191f6d0a0a991$exports, "ContextWindowStack", function () { return $17c46b9e6a2eb66e$export$9f37482ccd50dad2; });
 
 
 
@@ -81,11 +80,16 @@ function $62873e7e5aeec7f1$export$77bf000da9303d1(_param) {
         setTargetHeight
     ]);
     // Trigger height change on children update
-    (0, $duWW8$useLayoutEffect)(()=>{
-        setTargetHeight();
+    const [, startTransition] = (0, $duWW8$useTransition)();
+    (0, $duWW8$useEffect)(()=>{
+        // Mark this update as non-urgent to avoid cascading render warnings
+        startTransition(()=>{
+            setTargetHeight();
+        });
     }, [
         setTargetHeight,
-        children
+        children,
+        startTransition
     ]);
     return /*#__PURE__*/ (0, $duWW8$jsx)("div", (0, $duWW8$_1)((0, $duWW8$_)({}, rest), {
         className: (0, (/*@__PURE__*/$parcel$interopDefault($181673e3e0e596f3$exports))).autoHeightWrapper,
@@ -152,9 +156,13 @@ $47067f35ca62d4a5$export$664c6d24e3175067 = `aiw-ContextMenu-module-WinFxq-visib
 
 
 
-const $6ca59110355c8bf1$export$7e4e6110f96afd7e = ({ entries: entries, toClose: toClose, visible: visible })=>{
+
+const $6ca59110355c8bf1$export$7e4e6110f96afd7e = ({ entries: entries, toClose: toClose })=>{
+    const [visible, setVisible] = (0, $duWW8$useState)(false);
     return /*#__PURE__*/ (0, $duWW8$jsxs)("span", {
         className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).caretHolder,
+        onMouseEnter: ()=>setVisible(true),
+        onMouseLeave: ()=>setVisible(false),
         children: [
             /*#__PURE__*/ (0, $duWW8$jsx)("svg", {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -166,10 +174,10 @@ const $6ca59110355c8bf1$export$7e4e6110f96afd7e = ({ entries: entries, toClose:
                     d: "m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"
                 })
             }),
-            /*#__PURE__*/ (0, $duWW8$jsx)("div", {
+            visible && /*#__PURE__*/ (0, $duWW8$jsx)("div", {
                 className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).subMenu,
                 children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $567ed433af94513f$export$8dc6765e8be191c7), {
-                    visible: visible,
+                    visible: true,
                     entries: entries,
                     xPos: 14,
                     yPos: -21,
@@ -184,21 +192,14 @@ $6ca59110355c8bf1$export$7e4e6110f96afd7e.displayName = "ContextSubMenu";
 
 const $813754bb7a4251f1$export$c868ef28d2ba36f1 = ({ entry: entry, toClose: toClose })=>{
     const [target, setTarget] = (0, $duWW8$useState)(null);
-    const [subMenuVisible, setSubMenuVisible] = (0, $duWW8$useState)(false);
     return /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
         className: [
             (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).contextMenuItem,
             entry.disabled ? (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).disabled : ""
         ].filter((c)=>c !== "").join(" "),
-        onMouseEnter: ()=>{
-            setSubMenuVisible(true);
-        },
-        onMouseLeave: ()=>{
-            setSubMenuVisible(false);
-        },
         children: [
             typeof entry.label === "string" ? /*#__PURE__*/ (0, $duWW8$jsx)("span", {
-                "aria-label": typeof entry.label === "string" ? entry.label : undefined,
+                "aria-label": entry.label,
                 "aria-disabled": entry.disabled,
                 className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).contextMenuItemLabel,
                 onMouseEnter: ()=>{
@@ -221,24 +222,39 @@ const $813754bb7a4251f1$export$c868ef28d2ba36f1 = ({ entry: entry, toClose: toCl
             }) : entry.label,
             entry.group && /*#__PURE__*/ (0, $duWW8$jsx)((0, $6ca59110355c8bf1$export$7e4e6110f96afd7e), {
                 toClose: toClose,
-                entries: entry.group,
-                visible: subMenuVisible
+                entries: entry.group
             })
         ]
     });
 };
 
 
+// Constants for menu size estimation when ref is not yet available
+const $567ed433af94513f$var$ESTIMATED_MENU_ITEM_HEIGHT = 34;
+const $567ed433af94513f$var$ESTIMATED_MENU_PADDING = 4;
+const $567ed433af94513f$var$ESTIMATED_MENU_WIDTH = 200;
 const $567ed433af94513f$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, $duWW8$forwardRef)(({ visible: visible, entries: entries, xPos: xPos, yPos: yPos, toClose: toClose }, ref)=>{
-    // Check that menu can fit inside the window
-    let menuHeight = entries.length * 34 + 4;
-    let menuWidth = 200;
-    if (ref && typeof ref !== "function" && ref.current instanceof HTMLDivElement) {
-        menuHeight = ref.current.offsetHeight;
-        menuWidth = ref.current.offsetWidth;
-    }
-    if (yPos + menuHeight > window.innerHeight) yPos = Math.max(window.innerHeight - menuHeight - 4, 0);
-    if (xPos + menuWidth > window.innerWidth) xPos = Math.max(window.innerWidth - menuWidth - 4, 0);
+    // Measure menu size after mount/render to avoid accessing refs during render
+    const [menuHeight, setMenuHeight] = (0, $duWW8$useState)(entries.length * $567ed433af94513f$var$ESTIMATED_MENU_ITEM_HEIGHT + $567ed433af94513f$var$ESTIMATED_MENU_PADDING);
+    const [menuWidth, setMenuWidth] = (0, $duWW8$useState)($567ed433af94513f$var$ESTIMATED_MENU_WIDTH);
+    (0, $duWW8$useLayoutEffect)(()=>{
+        // Only measure when visible; ref access inside effect is allowed
+        if (visible && ref && typeof ref !== "function" && ref.current instanceof HTMLDivElement) {
+            setMenuHeight(ref.current.offsetHeight);
+            setMenuWidth(ref.current.offsetWidth);
+        }
+        // When not visible, fall back to estimates
+        if (!visible) {
+            setMenuHeight(entries.length * $567ed433af94513f$var$ESTIMATED_MENU_ITEM_HEIGHT + $567ed433af94513f$var$ESTIMATED_MENU_PADDING);
+            setMenuWidth($567ed433af94513f$var$ESTIMATED_MENU_WIDTH);
+        }
+    }, [
+        visible,
+        entries,
+        ref
+    ]);
+    const adjustedYPos = yPos + menuHeight > window.innerHeight ? Math.max(window.innerHeight - menuHeight - $567ed433af94513f$var$ESTIMATED_MENU_PADDING, 0) : yPos;
+    const adjustedXPos = xPos + menuWidth > window.innerWidth ? Math.max(window.innerWidth - menuWidth - $567ed433af94513f$var$ESTIMATED_MENU_PADDING, 0) : xPos;
     return /*#__PURE__*/ (0, $duWW8$jsx)("div", {
         ref: ref,
         className: [
@@ -246,8 +262,8 @@ const $567ed433af94513f$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, $duWW8$forwa
             visible ? (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).visible : (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).hidden
         ].filter((c)=>c !== "").join(" "),
         style: {
-            top: `${yPos}px`,
-            left: `${xPos}px`
+            top: `${adjustedYPos}px`,
+            left: `${adjustedXPos}px`
         },
         onContextMenu: (e)=>{
             e.preventDefault();
@@ -278,18 +294,29 @@ const $c3e82278b501f10c$export$d4ebdd58e04c6ace = (_param)=>{
     const menuRef = (0, $duWW8$useRef)(null);
     // Handle click off the menu
     const handleClick = (0, $duWW8$useCallback)((e)=>{
-        var _menuRef_current;
-        if (menuRef.current && (e.target instanceof Element && !((_menuRef_current = menuRef.current) === null || _menuRef_current === void 0 ? void 0 : _menuRef_current.contains(e.target)) || !(e.target instanceof Element))) setMenuInDom(false);
+        if (menuRef.current && (e.target instanceof Element && !menuRef.current.contains(e.target) || !(e.target instanceof Element))) setMenuInDom(false);
     }, []);
-    const removeController = (0, $duWW8$useRef)(new AbortController());
+    const removeController = (0, $duWW8$useRef)(null);
+    const removeTimeoutRef = (0, $duWW8$useRef)(null);
     (0, $duWW8$useEffect)(()=>{
-        if (!menuVisible) {
-            removeController.current.abort();
+        if (!menuVisible && removeTimeoutRef.current === null) {
+            // Only create a new controller when scheduling a new timeout
+            if (removeController.current) removeController.current.abort();
             removeController.current = new AbortController();
-            setTimeout(()=>{
-                if (!removeController.current.signal.aborted) setMenuInDom(false);
+            const controller = removeController.current;
+            // Set up the timeout with a reference to the current controller
+            removeTimeoutRef.current = setTimeout(()=>{
+                if (!controller.signal.aborted) setMenuInDom(false);
+                removeTimeoutRef.current = null;
             }, 300);
         }
+        return ()=>{
+            // Clean up on unmount or when menuVisible changes
+            if (removeTimeoutRef.current) {
+                clearTimeout(removeTimeoutRef.current);
+                removeTimeoutRef.current = null;
+            }
+        };
     }, [
         menuVisible
     ]);
@@ -298,7 +325,7 @@ const $c3e82278b501f10c$export$d4ebdd58e04c6ace = (_param)=>{
         if (menuInDom) document.addEventListener("mousedown", handleClick);
         return ()=>{
             document.removeEventListener("mousedown", handleClick);
-            removeController.current.abort();
+            if (removeController.current) removeController.current.abort();
         };
     }, [
         handleClick,
@@ -315,7 +342,7 @@ const $c3e82278b501f10c$export$d4ebdd58e04c6ace = (_param)=>{
                         e.preventDefault();
                         e.stopPropagation();
                         setTimeout(()=>{
-                            removeController.current.abort();
+                            if (removeController.current) removeController.current.abort();
                             setMenuVisible(true);
                             setMenuXPos(e.pageX);
                             setMenuYPos(e.pageY);
@@ -468,7 +495,7 @@ $556d6f9158abfc99$export$aafc28aea571c4bc.displayName = "LowMenuButton";
 
 const $914758b0c9d59759$export$49e8edc8ebca5f25 = ({ entries: entries, visible: visible, xPos: xPos, yPos: yPos, maxWidth: maxWidth })=>{
     // Only show the low menu if it is on the screen
-    if (xPos > window.innerWidth || yPos > window.innerHeight) return /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$Fragment), {});
+    if (xPos >= window.innerWidth || yPos >= window.innerHeight) return /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$Fragment), {});
     // Show the menu
     return /*#__PURE__*/ (0, $duWW8$jsx)("div", {
         className: [
@@ -503,7 +530,6 @@ const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = (_param)=>{
         "menuItems",
         "showLowMenu"
     ]);
-    var _divHandlderRef_current;
     // Check for higher content menu
     const higherContext = (0, $duWW8$useContext)($1e1c1e9e0b943830$export$fc58dc71afe92de2);
     const thisMenuItems = (0, $duWW8$useMemo)(()=>[
@@ -536,8 +562,34 @@ const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = (_param)=>{
     const [menuInDom, setMenuInDom] = (0, $duWW8$useState)(false);
     const [mouseOverHandlerDiv, setMouseOverHandlerDiv] = (0, $duWW8$useState)(false);
     const [mouseOverMenu, setMouseOverMenu] = (0, $duWW8$useState)(false);
-    // Get holder position
-    const divHandlerPos = divHandlderRef ? (_divHandlderRef_current = divHandlderRef.current) === null || _divHandlderRef_current === void 0 ? void 0 : _divHandlderRef_current.getBoundingClientRect() : null;
+    // Holder position - measured in an effect to avoid reading refs during render
+    const [divHandlerPos, setDivHandlerPos] = (0, $duWW8$useState)(null);
+    (0, $duWW8$useLayoutEffect)(()=>{
+        function updatePos() {
+            if (divHandlderRef.current) setDivHandlerPos(divHandlderRef.current.getBoundingClientRect());
+        }
+        // When the handler is hovered or the menu is mounted, ensure we have a fresh position
+        if (mouseOverHandlerDiv || menuInDom) updatePos();
+        // Attach listeners while the menu/low-menu may be visible so the position stays correct
+        if (mouseOverHandlerDiv || menuInDom) {
+            window.addEventListener("resize", updatePos);
+            // listen on capture to catch scrolls from ancestor elements as well
+            window.addEventListener("scroll", updatePos, true);
+            let ro = null;
+            if (typeof ResizeObserver !== "undefined" && divHandlderRef.current) {
+                ro = new ResizeObserver(()=>updatePos());
+                ro.observe(divHandlderRef.current);
+            }
+            return ()=>{
+                window.removeEventListener("resize", updatePos);
+                window.removeEventListener("scroll", updatePos, true);
+                if (ro) ro.disconnect();
+            };
+        }
+    }, [
+        mouseOverHandlerDiv,
+        menuInDom
+    ]);
     // Handle click off the menu
     const handleClick = (0, $duWW8$useCallback)((e)=>{
         var _menuRef_current;
@@ -703,62 +755,41 @@ $ddf7153c7c69b209$export$cebbac70b4d99c48 = `aiw-ContextWindow-module-RIIF9a-con
 $ddf7153c7c69b209$export$d03a2f3acc60252b = `aiw-ContextWindow-module-RIIF9a-moving`;
 
 
-
-
-const $17c46b9e6a2eb66e$export$aff5d0593e3727b0 = /*#__PURE__*/ (0, $duWW8$createContext)(null);
-const $17c46b9e6a2eb66e$var$pushToTop = (windowId, minZIndex, windowList, setWindowList)=>{
-    const otherWindows = windowList.filter((w)=>w.windowId !== windowId).map((w, i)=>({
-            windowId: w.windowId,
-            zIndex: minZIndex + i
-        }));
-    setWindowList([
-        ...otherWindows,
-        {
-            windowId: windowId,
-            zIndex: minZIndex + otherWindows.length
+const $b5e8657823def5be$export$4f9fb66ac71c7da5 = 3000;
+const $b5e8657823def5be$var$CONTEXT_WINDOW_DATA_ATTR = "data-context-window";
+// Helper function to get the highest zIndex from all context windows in the DOM
+const $b5e8657823def5be$var$getMaxZIndex = (componentMinZIndex)=>{
+    const windows = document.body.querySelectorAll(`[${$b5e8657823def5be$var$CONTEXT_WINDOW_DATA_ATTR}]`);
+    let maxZIndex = componentMinZIndex - 1;
+    windows.forEach((win)=>{
+        const zIndexStr = win.style.zIndex;
+        if (zIndexStr) {
+            const zIndex = parseInt(zIndexStr, 10);
+            if (!isNaN(zIndex) && zIndex > maxZIndex) maxZIndex = zIndex;
         }
-    ]);
-};
-const $17c46b9e6a2eb66e$export$9f37482ccd50dad2 = ({ minZIndex: minZIndex = 1000, children: children })=>{
-    const [currentWindows, setCurrentWindows] = (0, $duWW8$useState)([]);
-    return /*#__PURE__*/ (0, $duWW8$jsx)($17c46b9e6a2eb66e$export$aff5d0593e3727b0.Provider, {
-        value: {
-            currentWindows: currentWindows.map((w)=>({
-                    windowId: w.windowId,
-                    zIndex: minZIndex + w.zIndex
-                })),
-            pushToTop: (ret)=>$17c46b9e6a2eb66e$var$pushToTop(ret, minZIndex, currentWindows, setCurrentWindows)
-        },
-        children: children
     });
+    return maxZIndex;
 };
-$17c46b9e6a2eb66e$export$9f37482ccd50dad2.displayName = "ContextWindowStack";
-
-
 const $b5e8657823def5be$export$1af8984c69ba1b24 = (_param)=>{
-    var { id: id, visible: visible, title: title, titleElement: titleElement, children: children, onOpen: onOpen, onClose: onClose } = _param, rest = (0, $duWW8$_2)(_param, [
+    var { id: id, visible: visible, title: title, titleElement: titleElement, children: children, onOpen: onOpen, onClose: onClose, minZIndex: minZIndex = $b5e8657823def5be$export$4f9fb66ac71c7da5 } = _param, rest = (0, $duWW8$_2)(_param, [
         "id",
         "visible",
         "title",
         "titleElement",
         "children",
         "onOpen",
-        "onClose"
+        "onClose",
+        "minZIndex"
     ]);
     var _rest_style, _rest_style1, _rest_style2, _rest_style3;
-    const windowStack = (0, $duWW8$useContext)((0, $17c46b9e6a2eb66e$export$aff5d0593e3727b0));
-    const windowId = (0, $duWW8$useRef)(null);
     const divRef = (0, $duWW8$useRef)(null);
     const windowRef = (0, $duWW8$useRef)(null);
+    const [zIndex, setZIndex] = (0, $duWW8$useState)(minZIndex);
+    const resizeListenerRef = (0, $duWW8$useRef)(null);
+    // Track internal state: whether window is in DOM and whether it's been positioned
     const [windowInDOM, setWindowInDOM] = (0, $duWW8$useState)(false);
     const [windowVisible, setWindowVisible] = (0, $duWW8$useState)(false);
-    const zIndex = (0, $duWW8$useMemo)(()=>{
-        var _windowStack_currentWindows_find;
-        var _windowStack_currentWindows_find_zIndex;
-        return (_windowStack_currentWindows_find_zIndex = windowStack === null || windowStack === void 0 ? void 0 : (_windowStack_currentWindows_find = windowStack.currentWindows.find((w)=>w.windowId === windowId.current)) === null || _windowStack_currentWindows_find === void 0 ? void 0 : _windowStack_currentWindows_find.zIndex) !== null && _windowStack_currentWindows_find_zIndex !== void 0 ? _windowStack_currentWindows_find_zIndex : 1;
-    }, [
-        windowStack === null || windowStack === void 0 ? void 0 : windowStack.currentWindows
-    ]);
+    const [, startTransition] = (0, $duWW8$useTransition)();
     // Position
     const windowPos = (0, $duWW8$useRef)({
         x: 0,
@@ -787,145 +818,175 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = (_param)=>{
     }, [
         move
     ]);
+    // Store stable references to mouseMove and mouseUp for cleanup
+    const mouseMoveRef = (0, $duWW8$useRef)(mouseMove);
+    const mouseUpRef = (0, $duWW8$useRef)(()=>{});
     const mouseUp = (0, $duWW8$useCallback)((e)=>{
         e.preventDefault();
         e.stopPropagation();
         setMoving(false);
         checkPosition();
-        document.removeEventListener("mousemove", mouseMove);
-        document.removeEventListener("mouseup", mouseUp);
-        window.removeEventListener("resize", checkPosition);
+        document.removeEventListener("mousemove", mouseMoveRef.current);
+        document.removeEventListener("mouseup", mouseUpRef.current);
+        if (resizeListenerRef.current) {
+            window.removeEventListener("resize", resizeListenerRef.current);
+            resizeListenerRef.current = null;
+        }
         if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "auto";
     }, [
-        checkPosition,
-        mouseMove
+        checkPosition
+    ]);
+    // Update refs when callbacks change
+    (0, $duWW8$useEffect)(()=>{
+        mouseMoveRef.current = mouseMove;
+        mouseUpRef.current = mouseUp;
+    }, [
+        mouseMove,
+        mouseUp
     ]);
-    // Update visibility
+    // Helper function to push this window to the top
+    const pushToTop = (0, $duWW8$useCallback)(()=>{
+        const maxZIndex = $b5e8657823def5be$var$getMaxZIndex(minZIndex);
+        setZIndex(maxZIndex + 1);
+    }, [
+        minZIndex
+    ]);
+    // Sync windowInDOM with visible prop using a layout effect to avoid ESLint warnings
+    // This effect derives state from props, which is acceptable when there's no synchronous setState
     (0, $duWW8$useEffect)(()=>{
-        if (windowStack) {
-            // Visible set, but not in DOM
-            if (visible && !windowInDOM) setWindowInDOM(true);
-            else if (visible && windowInDOM && !windowVisible) {
-                if (!windowId.current) {
-                    const maxWindowId = Math.max(0, ...windowStack.currentWindows.map((w)=>w.windowId));
-                    windowId.current = maxWindowId + 1;
-                }
-                windowStack.pushToTop(windowId.current);
-                setWindowVisible(visible);
-                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-                // Get starting position
-                if (divRef.current && windowRef.current) {
-                    const parentPos = divRef.current.getBoundingClientRect();
-                    const pos = windowRef.current.getBoundingClientRect();
-                    const windowHeight = pos.bottom - pos.top;
-                    windowRef.current.style.left = `${parentPos.left}px`;
-                    windowRef.current.style.top = `${parentPos.bottom + windowHeight < window.innerHeight ? parentPos.bottom : Math.max(0, parentPos.top - windowHeight)}px`;
-                    windowRef.current.style.transform = "";
-                    windowPos.current = {
-                        x: 0,
-                        y: 0
-                    };
-                }
-                checkPosition();
-            } else if (windowId.current && !visible && windowVisible) setWindowVisible(false);
-            else if (windowId.current && !visible && windowInDOM) setWindowInDOM(false);
+        if (visible && !windowInDOM) // Window should be in DOM when visible becomes true
+        startTransition(()=>{
+            setWindowInDOM(true);
+        });
+        else if (!visible && windowInDOM) // Window should leave DOM when visible becomes false
+        startTransition(()=>{
+            setWindowInDOM(false);
+            setWindowVisible(false);
+        });
+    }, [
+        visible,
+        windowInDOM,
+        startTransition
+    ]);
+    // Position and show window after it's added to DOM
+    (0, $duWW8$useEffect)(()=>{
+        if (windowInDOM && !windowVisible && visible && divRef.current && windowRef.current) {
+            // Position the window
+            const parentPos = divRef.current.getBoundingClientRect();
+            const pos = windowRef.current.getBoundingClientRect();
+            const windowHeight = pos.bottom - pos.top;
+            windowRef.current.style.left = `${parentPos.left}px`;
+            windowRef.current.style.top = `${parentPos.bottom + windowHeight < window.innerHeight ? parentPos.bottom : Math.max(0, parentPos.top - windowHeight)}px`;
+            windowRef.current.style.transform = "";
+            windowPos.current = {
+                x: 0,
+                y: 0
+            };
+            checkPosition();
+            // Update z-index and make visible - use startTransition
+            const maxZ = $b5e8657823def5be$var$getMaxZIndex(minZIndex);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+            startTransition(()=>{
+                setZIndex(maxZ + 1);
+                setWindowVisible(true);
+            });
         }
     }, [
+        windowInDOM,
+        windowVisible,
+        visible,
         checkPosition,
+        minZIndex,
         onOpen,
-        visible,
-        windowInDOM,
-        windowStack,
-        windowVisible
+        startTransition
     ]);
+    // Cleanup effect to remove event listeners on unmount
+    (0, $duWW8$useEffect)(()=>{
+        return ()=>{
+            // Clean up event listeners if component unmounts while dragging
+            document.removeEventListener("mousemove", mouseMoveRef.current);
+            document.removeEventListener("mouseup", mouseUpRef.current);
+            if (resizeListenerRef.current) {
+                window.removeEventListener("resize", resizeListenerRef.current);
+                resizeListenerRef.current = null;
+            }
+        };
+    }, []);
     var _rest_style_minHeight, _rest_style_minWidth, _rest_style_maxHeight, _rest_style_maxWidth;
-    return /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
+    return /*#__PURE__*/ (0, $duWW8$jsx)("div", {
         className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowAnchor,
         ref: divRef,
-        children: [
-            !windowStack && /*#__PURE__*/ (0, $duWW8$jsxs)("div", (0, $duWW8$_1)((0, $duWW8$_)({}, rest), {
-                children: [
-                    process.env.NODE_ENV !== "production" && /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                        style: {
-                            backgroundColor: "red",
-                            color: "white",
-                            padding: "8px",
-                            fontSize: "48px"
-                        },
-                        children: "WARNING: No ContextWindowStack found"
-                    }),
-                    children
-                ]
-            })),
-            windowStack && windowInDOM && /*#__PURE__*/ (0, $duWW8$createPortal)(/*#__PURE__*/ (0, $duWW8$jsxs)("div", (0, $duWW8$_1)((0, $duWW8$_)({}, rest), {
-                ref: windowRef,
-                id: id,
-                className: [
-                    (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindow,
-                    rest.className
-                ].filter((c)=>c).join(" "),
-                style: (0, $duWW8$_1)((0, $duWW8$_)({}, rest.style), {
-                    opacity: moving ? 0.8 : windowVisible ? 1 : 0,
-                    visibility: windowVisible ? "visible" : "hidden",
-                    zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : 1,
-                    minHeight: (_rest_style_minHeight = (_rest_style = rest.style) === null || _rest_style === void 0 ? void 0 : _rest_style.minHeight) !== null && _rest_style_minHeight !== void 0 ? _rest_style_minHeight : "150px",
-                    minWidth: (_rest_style_minWidth = (_rest_style1 = rest.style) === null || _rest_style1 === void 0 ? void 0 : _rest_style1.minWidth) !== null && _rest_style_minWidth !== void 0 ? _rest_style_minWidth : "200px",
-                    maxHeight: (_rest_style_maxHeight = (_rest_style2 = rest.style) === null || _rest_style2 === void 0 ? void 0 : _rest_style2.maxHeight) !== null && _rest_style_maxHeight !== void 0 ? _rest_style_maxHeight : "1000px",
-                    maxWidth: (_rest_style_maxWidth = (_rest_style3 = rest.style) === null || _rest_style3 === void 0 ? void 0 : _rest_style3.maxWidth) !== null && _rest_style_maxWidth !== void 0 ? _rest_style_maxWidth : "1000px"
-                }),
-                onClickCapture: (e)=>{
-                    var _rest_onClickCapture;
-                    if (windowId.current) windowStack.pushToTop(windowId.current);
-                    (_rest_onClickCapture = rest.onClickCapture) === null || _rest_onClickCapture === void 0 ? void 0 : _rest_onClickCapture.call(rest, e);
-                },
-                children: [
-                    /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
-                        className: [
-                            (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitle,
-                            moving ? (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).moving : ""
-                        ].filter((c)=>c !== "").join(" "),
-                        onMouseDown: (e)=>{
-                            if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "none";
-                            setMoving(true);
-                            if (windowId.current) windowStack.pushToTop(windowId.current);
-                            document.addEventListener("mouseup", mouseUp);
-                            document.addEventListener("mousemove", mouseMove);
-                            window.addEventListener("resize", ()=>checkPosition());
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                                className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitleText,
-                                title: title,
-                                children: titleElement ? titleElement : title
-                            }),
-                            /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                                className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitleClose,
-                                role: "button",
-                                "aria-label": "Close",
-                                onClick: onClose,
-                                title: `Close ${title && title.trim() !== "" ? title : "window"}`,
-                                children: /*#__PURE__*/ (0, $duWW8$jsx)("svg", {
-                                    xmlns: "http://www.w3.org/2000/svg",
-                                    width: "16",
-                                    height: "16",
-                                    fill: "currentColor",
-                                    viewBox: "0 0 16 16",
-                                    children: /*#__PURE__*/ (0, $duWW8$jsx)("path", {
-                                        d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
-                                    })
+        children: windowInDOM && /*#__PURE__*/ (0, $duWW8$createPortal)(/*#__PURE__*/ (0, $duWW8$jsxs)("div", (0, $duWW8$_1)((0, $duWW8$_)({}, rest), {
+            ref: windowRef,
+            id: id,
+            [$b5e8657823def5be$var$CONTEXT_WINDOW_DATA_ATTR]: "true",
+            className: [
+                (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindow,
+                rest.className
+            ].filter((c)=>c).join(" "),
+            style: (0, $duWW8$_1)((0, $duWW8$_)({}, rest.style), {
+                opacity: moving ? 0.8 : windowVisible ? 1 : 0,
+                visibility: windowVisible ? "visible" : "hidden",
+                zIndex: zIndex,
+                minHeight: (_rest_style_minHeight = (_rest_style = rest.style) === null || _rest_style === void 0 ? void 0 : _rest_style.minHeight) !== null && _rest_style_minHeight !== void 0 ? _rest_style_minHeight : "150px",
+                minWidth: (_rest_style_minWidth = (_rest_style1 = rest.style) === null || _rest_style1 === void 0 ? void 0 : _rest_style1.minWidth) !== null && _rest_style_minWidth !== void 0 ? _rest_style_minWidth : "200px",
+                maxHeight: (_rest_style_maxHeight = (_rest_style2 = rest.style) === null || _rest_style2 === void 0 ? void 0 : _rest_style2.maxHeight) !== null && _rest_style_maxHeight !== void 0 ? _rest_style_maxHeight : "1000px",
+                maxWidth: (_rest_style_maxWidth = (_rest_style3 = rest.style) === null || _rest_style3 === void 0 ? void 0 : _rest_style3.maxWidth) !== null && _rest_style_maxWidth !== void 0 ? _rest_style_maxWidth : "1000px"
+            }),
+            onClickCapture: (e)=>{
+                var _rest_onClickCapture;
+                pushToTop();
+                (_rest_onClickCapture = rest.onClickCapture) === null || _rest_onClickCapture === void 0 ? void 0 : _rest_onClickCapture.call(rest, e);
+            },
+            children: [
+                /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
+                    className: [
+                        (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitle,
+                        moving ? (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).moving : ""
+                    ].filter((c)=>c !== "").join(" "),
+                    onMouseDown: (e)=>{
+                        if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "none";
+                        setMoving(true);
+                        pushToTop();
+                        document.addEventListener("mouseup", mouseUpRef.current);
+                        document.addEventListener("mousemove", mouseMoveRef.current);
+                        const resizeListener = ()=>checkPosition();
+                        resizeListenerRef.current = resizeListener;
+                        window.addEventListener("resize", resizeListener);
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, $duWW8$jsx)("div", {
+                            className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitleText,
+                            title: title,
+                            children: titleElement ? titleElement : title
+                        }),
+                        /*#__PURE__*/ (0, $duWW8$jsx)("div", {
+                            className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitleClose,
+                            role: "button",
+                            "aria-label": "Close",
+                            onClick: onClose,
+                            title: `Close ${title && title.trim() !== "" ? title : "window"}`,
+                            children: /*#__PURE__*/ (0, $duWW8$jsx)("svg", {
+                                xmlns: "http://www.w3.org/2000/svg",
+                                width: "16",
+                                height: "16",
+                                fill: "currentColor",
+                                viewBox: "0 0 16 16",
+                                children: /*#__PURE__*/ (0, $duWW8$jsx)("path", {
+                                    d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
                                 })
                             })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                        className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowBody,
-                        children: /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                            children: children
                         })
+                    ]
+                }),
+                /*#__PURE__*/ (0, $duWW8$jsx)("div", {
+                    className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowBody,
+                    children: /*#__PURE__*/ (0, $duWW8$jsx)("div", {
+                        children: children
                     })
-                ]
-            })), document.body)
-        ]
+                })
+            ]
+        })), document.body)
     });
 };
 $b5e8657823def5be$export$1af8984c69ba1b24.displayName = "ContextWindow";
@@ -935,6 +996,5 @@ $b5e8657823def5be$export$1af8984c69ba1b24.displayName = "ContextWindow";
 
 
 
-
-export {$62873e7e5aeec7f1$export$77bf000da9303d1 as AutoHeight, $c3e82278b501f10c$export$d4ebdd58e04c6ace as ClickForMenu, $567ed433af94513f$export$8dc6765e8be191c7 as ContextMenu, $1e1c1e9e0b943830$export$ed4f9641643dc7e4 as ContextMenuHandler, $b5e8657823def5be$export$1af8984c69ba1b24 as ContextWindow, $17c46b9e6a2eb66e$export$9f37482ccd50dad2 as ContextWindowStack};
+export {$62873e7e5aeec7f1$export$77bf000da9303d1 as AutoHeight, $c3e82278b501f10c$export$d4ebdd58e04c6ace as ClickForMenu, $567ed433af94513f$export$8dc6765e8be191c7 as ContextMenu, $1e1c1e9e0b943830$export$ed4f9641643dc7e4 as ContextMenuHandler, $b5e8657823def5be$export$1af8984c69ba1b24 as ContextWindow};
 //# sourceMappingURL=main.js.map