@liiift-studio/mac-os9-ui 0.2.24 → 0.2.26

package/dist/index.cjs

@@ -818,14 +818,24 @@ var styles$6 = {"window":"Window-module_window","window--active":"Window-module_
  * </Window>
  * ```
  */
-const Window = React.forwardRef(({ children, title, titleBar, active = true, width = 'auto', height = 'auto', className = '', contentClassName = '', classes, showControls = true, onClose, onMinimize, onMaximize, onMouseEnter, resizable = false, draggable = false, defaultPosition, position: controlledPosition, onPositionChange, }, ref) => {
+const Window = React.forwardRef(({ children, title, titleBar, active = true, width = 'auto', height = 'auto', className = '', contentClassName = '', classes, showControls = true, onClose, onMinimize, onMaximize, onMouseEnter, resizable = false, minWidth = 200, minHeight = 100, maxWidth, maxHeight, onResize, draggable = false, defaultPosition, position: controlledPosition, onPositionChange, }, ref) => {
     // Drag state management
     const [internalPosition, setInternalPosition] = React.useState(defaultPosition || null);
     const [isDragging, setIsDragging] = React.useState(false);
     const [hasBeenDragged, setHasBeenDragged] = React.useState(!!(defaultPosition || controlledPosition));
     const dragStartRef = React.useRef(null);
+    // Resize state management
+    const [internalSize, setInternalSize] = React.useState({
+        width,
+        height,
+    });
+    const [isResizing, setIsResizing] = React.useState(false);
+    const resizeStartRef = React.useRef(null);
     // Use controlled position if provided, otherwise use internal state
     const currentPosition = controlledPosition || internalPosition;
+    // Use internal size state for resize tracking
+    const currentWidth = isResizing ? internalSize.width : width;
+    const currentHeight = isResizing ? internalSize.height : height;
     // Handle mouse down on title bar to start dragging
     const handleTitleBarMouseDown = React.useCallback((event) => {
         if (!draggable)
@@ -839,13 +849,80 @@ const Window = React.forwardRef(({ children, title, titleBar, active = true, wid
         if (!windowElement)
             return;
         const rect = windowElement.getBoundingClientRect();
-        // Store drag start info
+        // Get the parent container to calculate position relative to it
+        const parent = windowElement.offsetParent;
+        const parentRect = parent ? parent.getBoundingClientRect() : { left: 0, top: 0 };
+        // Store drag start info - offset from mouse to window position within parent
+        // This accounts for the parent's coordinate system
         dragStartRef.current = {
-            x: event.clientX - rect.left,
-            y: event.clientY - rect.top,
+            x: event.clientX - (rect.left - parentRect.left),
+            y: event.clientY - (rect.top - parentRect.top),
         };
         setIsDragging(true);
     }, [draggable]);
+    // Handle mouse down on resize handle to start resizing
+    const handleResizeMouseDown = React.useCallback((event) => {
+        if (!resizable)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const windowElement = event.currentTarget.closest(`.${styles$6.window}`);
+        if (!windowElement)
+            return;
+        const rect = windowElement.getBoundingClientRect();
+        // Store resize start info
+        resizeStartRef.current = {
+            width: rect.width,
+            height: rect.height,
+            mouseX: event.clientX,
+            mouseY: event.clientY,
+        };
+        setIsResizing(true);
+    }, [resizable]);
+    // Handle mouse move during resize
+    React.useEffect(() => {
+        if (!isResizing || !resizeStartRef.current)
+            return;
+        const handleMouseMove = (event) => {
+            event.preventDefault();
+            if (!resizeStartRef.current)
+                return;
+            // Calculate delta
+            const deltaX = event.clientX - resizeStartRef.current.mouseX;
+            const deltaY = event.clientY - resizeStartRef.current.mouseY;
+            // Calculate new size
+            let newWidth = resizeStartRef.current.width + deltaX;
+            let newHeight = resizeStartRef.current.height + deltaY;
+            // Apply constraints
+            if (newWidth < minWidth)
+                newWidth = minWidth;
+            if (newHeight < minHeight)
+                newHeight = minHeight;
+            if (maxWidth && newWidth > maxWidth)
+                newWidth = maxWidth;
+            if (maxHeight && newHeight > maxHeight)
+                newHeight = maxHeight;
+            // Update size
+            setInternalSize({
+                width: newWidth,
+                height: newHeight,
+            });
+            // Call callback if provided
+            if (onResize) {
+                onResize({ width: newWidth, height: newHeight });
+            }
+        };
+        const handleMouseUp = () => {
+            setIsResizing(false);
+            resizeStartRef.current = null;
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isResizing, minWidth, minHeight, maxWidth, maxHeight, onResize]);
     // Handle mouse move during drag
     React.useEffect(() => {
         if (!isDragging || !dragStartRef.current)
@@ -854,9 +931,25 @@ const Window = React.forwardRef(({ children, title, titleBar, active = true, wid
             event.preventDefault();
             if (!dragStartRef.current)
                 return;
+            // Get the window element to find its parent
+            const windowElements = document.querySelectorAll(`.${styles$6.window}`);
+            let windowElement = null;
+            // Find the dragging window (the one with position absolute or the first one)
+            for (const el of Array.from(windowElements)) {
+                const htmlEl = el;
+                if (htmlEl.style.position === 'absolute' || windowElements.length === 1) {
+                    windowElement = htmlEl;
+                    break;
+                }
+            }
+            if (!windowElement)
+                return;
+            // Get parent container to calculate position relative to it
+            const parent = windowElement.offsetParent;
+            const parentRect = parent ? parent.getBoundingClientRect() : { left: 0, top: 0 };
             const newPosition = {
-                x: event.clientX - dragStartRef.current.x,
-                y: event.clientY - dragStartRef.current.y,
+                x: event.clientX - parentRect.left - dragStartRef.current.x,
+                y: event.clientY - parentRect.top - dragStartRef.current.y,
             };
             // Update position
             if (controlledPosition && onPositionChange) {
@@ -887,11 +980,13 @@ const Window = React.forwardRef(({ children, title, titleBar, active = true, wid
     const titleBarClassNames = mergeClasses(styles$6.titleBar, draggable && styles$6['titleBar--draggable'], isDragging && styles$6['titleBar--dragging'], classes?.titleBar);
     // Window style
     const windowStyle = {};
-    if (width !== 'auto') {
-        windowStyle.width = typeof width === 'number' ? `${width}px` : width;
+    // Apply width - use currentWidth during resize, otherwise use prop
+    if (currentWidth !== 'auto') {
+        windowStyle.width = typeof currentWidth === 'number' ? `${currentWidth}px` : currentWidth;
     }
-    if (height !== 'auto') {
-        windowStyle.height = typeof height === 'number' ? `${height}px` : height;
+    // Apply height - use currentHeight during resize, otherwise use prop
+    if (currentHeight !== 'auto') {
+        windowStyle.height = typeof currentHeight === 'number' ? `${currentHeight}px` : currentHeight;
     }
     // Apply position if draggable and has been dragged
     if (draggable && hasBeenDragged && currentPosition) {
@@ -909,7 +1004,7 @@ const Window = React.forwardRef(({ children, title, titleBar, active = true, wid
         }
         return null;
     };
-    return (jsxRuntime.jsxs("div", { ref: ref, className: windowClassNames, style: windowStyle, onMouseEnter: onMouseEnter, children: [renderTitleBar(), jsxRuntime.jsx("div", { className: contentClassNames, children: children }), resizable && jsxRuntime.jsx("div", { className: styles$6.resizeHandle, "aria-hidden": "true" })] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: windowClassNames, style: windowStyle, onMouseEnter: onMouseEnter, children: [renderTitleBar(), jsxRuntime.jsx("div", { className: contentClassNames, children: children }), resizable && (jsxRuntime.jsx("div", { className: styles$6.resizeHandle, onMouseDown: handleResizeMouseDown, "aria-hidden": "true" }))] }));
 });
 Window.displayName = 'Window';