ywana-core8 0.2.6 → 0.2.8

package/src/desktop/window.css

@@ -10,6 +10,7 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     overflow: hidden;
     user-select: none;
+    pointer-events: auto; /* Ensure windows are clickable */
 }
 
 .window:focus-within {
@@ -249,3 +250,100 @@
 .window--dragging * {
     user-select: none !important;
 }
+
+/* Window Resize Handles */
+.window__resize-handle {
+    position: absolute;
+    background: transparent;
+    z-index: 10;
+}
+
+/* Edge handles */
+.window__resize-handle--n {
+    top: -3px;
+    left: 8px;
+    right: 8px;
+    height: 6px;
+    cursor: n-resize;
+}
+
+.window__resize-handle--s {
+    bottom: -3px;
+    left: 8px;
+    right: 8px;
+    height: 6px;
+    cursor: s-resize;
+}
+
+.window__resize-handle--e {
+    top: 8px;
+    bottom: 8px;
+    right: -3px;
+    width: 6px;
+    cursor: e-resize;
+}
+
+.window__resize-handle--w {
+    top: 8px;
+    bottom: 8px;
+    left: -3px;
+    width: 6px;
+    cursor: w-resize;
+}
+
+/* Corner handles */
+.window__resize-handle--ne {
+    top: -3px;
+    right: -3px;
+    width: 12px;
+    height: 12px;
+    cursor: ne-resize;
+}
+
+.window__resize-handle--nw {
+    top: -3px;
+    left: -3px;
+    width: 12px;
+    height: 12px;
+    cursor: nw-resize;
+}
+
+.window__resize-handle--se {
+    bottom: -3px;
+    right: -3px;
+    width: 12px;
+    height: 12px;
+    cursor: se-resize;
+}
+
+.window__resize-handle--sw {
+    bottom: -3px;
+    left: -3px;
+    width: 12px;
+    height: 12px;
+    cursor: sw-resize;
+}
+
+/* Resize handle hover effects */
+.window__resize-handle:hover {
+    background: rgba(25, 118, 210, 0.2);
+}
+
+/* Window resizing state */
+.window--resizing {
+    pointer-events: none;
+}
+
+.window--resizing * {
+    pointer-events: none !important;
+}
+
+/* Allow resize handles to work during resize */
+.window--resizing .window__resize-handle {
+    pointer-events: auto !important;
+}
+
+/* Disable text selection during resize */
+.window--resizing * {
+    user-select: none !important;
+}

package/src/desktop/window.js

@@ -130,14 +130,119 @@ export const Window = ({
         updateWindowPosition(id, finalPosition)
     }
 
-    // Setup drag event listeners
+    // Handle resize start
+    const handleResizeStart = (e, direction) => {
+        if (!resizable || maximized) return
+
+        e.preventDefault()
+        e.stopPropagation()
+
+        setIsResizing(true)
+        setResizeDirection(direction)
+        setResizeStartSize(size)
+        setResizeStartPosition(position)
+        setResizeStartMouse({ x: e.clientX, y: e.clientY })
+
+        // Focus window
+        focusWindow(id)
+    }
+
+    // Handle resize move
+    const handleResizeMove = (e) => {
+        if (!isResizing) return
+
+        e.preventDefault()
+
+        const deltaX = e.clientX - resizeStartMouse.x
+        const deltaY = e.clientY - resizeStartMouse.y
+
+        let newSize = { ...resizeStartSize }
+        let newPosition = { ...resizeStartPosition }
+
+        // Calculate new size and position based on resize direction
+        switch (resizeDirection) {
+            case 'n': // North
+                newSize.height = Math.max(150, resizeStartSize.height - deltaY)
+                newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height)
+                break
+            case 's': // South
+                newSize.height = Math.max(150, resizeStartSize.height + deltaY)
+                break
+            case 'e': // East
+                newSize.width = Math.max(200, resizeStartSize.width + deltaX)
+                break
+            case 'w': // West
+                newSize.width = Math.max(200, resizeStartSize.width - deltaX)
+                newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width)
+                break
+            case 'ne': // Northeast
+                newSize.width = Math.max(200, resizeStartSize.width + deltaX)
+                newSize.height = Math.max(150, resizeStartSize.height - deltaY)
+                newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height)
+                break
+            case 'nw': // Northwest
+                newSize.width = Math.max(200, resizeStartSize.width - deltaX)
+                newSize.height = Math.max(150, resizeStartSize.height - deltaY)
+                newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width)
+                newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height)
+                break
+            case 'se': // Southeast
+                newSize.width = Math.max(200, resizeStartSize.width + deltaX)
+                newSize.height = Math.max(150, resizeStartSize.height + deltaY)
+                break
+            case 'sw': // Southwest
+                newSize.width = Math.max(200, resizeStartSize.width - deltaX)
+                newSize.height = Math.max(150, resizeStartSize.height + deltaY)
+                newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width)
+                break
+        }
+
+        // Apply changes visually
+        if (windowRef.current) {
+            windowRef.current.style.width = `${newSize.width}px`
+            windowRef.current.style.height = `${newSize.height}px`
+            windowRef.current.style.left = `${newPosition.x}px`
+            windowRef.current.style.top = `${newPosition.y}px`
+        }
+    }
+
+    // Handle resize end
+    const handleResizeEnd = () => {
+        if (!isResizing) return
+
+        setIsResizing(false)
+        setResizeDirection('')
+
+        // Get final size and position
+        const desktopContainer = windowRef.current?.parentElement
+        if (!desktopContainer) return
+
+        const windowRect = windowRef.current.getBoundingClientRect()
+        const desktopRect = desktopContainer.getBoundingClientRect()
+
+        const finalSize = {
+            width: windowRect.width,
+            height: windowRect.height
+        }
+
+        const finalPosition = {
+            x: windowRect.left - desktopRect.left,
+            y: windowRect.top - desktopRect.top
+        }
+
+        // Update WindowManager
+        updateWindowSize(id, finalSize)
+        updateWindowPosition(id, finalPosition)
+    }
+
+    // Setup drag and resize event listeners
     useEffect(() => {
         if (isDragging) {
             document.addEventListener('mousemove', handleMouseMove)
             document.addEventListener('mouseup', handleMouseUp)
             document.body.style.userSelect = 'none'
             document.body.style.cursor = 'move'
-            
+
             return () => {
                 document.removeEventListener('mousemove', handleMouseMove)
                 document.removeEventListener('mouseup', handleMouseUp)
@@ -147,6 +252,20 @@ export const Window = ({
         }
     }, [isDragging])
 
+    useEffect(() => {
+        if (isResizing) {
+            document.addEventListener('mousemove', handleResizeMove)
+            document.addEventListener('mouseup', handleResizeEnd)
+            document.body.style.userSelect = 'none'
+
+            return () => {
+                document.removeEventListener('mousemove', handleResizeMove)
+                document.removeEventListener('mouseup', handleResizeEnd)
+                document.body.style.userSelect = ''
+            }
+        }
+    }, [isResizing])
+
     // Window control handlers
     const handleMinimize = (e) => {
         e.stopPropagation()
@@ -189,6 +308,7 @@ export const Window = ({
         'window',
         maximized && 'window--maximized',
         isDragging && 'window--dragging',
+        isResizing && 'window--resizing',
         className
     ].filter(Boolean).join(' ')
 
@@ -264,6 +384,47 @@ export const Window = ({
                     {statusBar}
                 </div>
             )}
+
+            {/* Resize Handles */}
+            {resizable && !maximized && (
+                <>
+                    {/* Edge handles */}
+                    <div
+                        className="window__resize-handle window__resize-handle--n"
+                        onMouseDown={(e) => handleResizeStart(e, 'n')}
+                    />
+                    <div
+                        className="window__resize-handle window__resize-handle--s"
+                        onMouseDown={(e) => handleResizeStart(e, 's')}
+                    />
+                    <div
+                        className="window__resize-handle window__resize-handle--e"
+                        onMouseDown={(e) => handleResizeStart(e, 'e')}
+                    />
+                    <div
+                        className="window__resize-handle window__resize-handle--w"
+                        onMouseDown={(e) => handleResizeStart(e, 'w')}
+                    />
+
+                    {/* Corner handles */}
+                    <div
+                        className="window__resize-handle window__resize-handle--ne"
+                        onMouseDown={(e) => handleResizeStart(e, 'ne')}
+                    />
+                    <div
+                        className="window__resize-handle window__resize-handle--nw"
+                        onMouseDown={(e) => handleResizeStart(e, 'nw')}
+                    />
+                    <div
+                        className="window__resize-handle window__resize-handle--se"
+                        onMouseDown={(e) => handleResizeStart(e, 'se')}
+                    />
+                    <div
+                        className="window__resize-handle window__resize-handle--sw"
+                        onMouseDown={(e) => handleResizeStart(e, 'sw')}
+                    />
+                </>
+            )}
         </div>
     )
 }

package/src/html/button.css

@@ -20,6 +20,11 @@
   white-space: nowrap;
 }
 
+/* Ensure icons inside buttons don't block clicks */
+.btn .icon {
+  pointer-events: none;
+}
+
 .btn.outlined {
   color: var(--primary-color);
   border: solid 1px var(--primary-color);

package/src/html/button.js

@@ -111,7 +111,8 @@ export const Button = (props) => {
         icon: loading ? 'hourglass_empty' : icon,
         size: size === 'small' ? 'small' : size === 'large' ? 'normal' : 'small',
         disabled: disabled || loading,
-        className: loading ? 'loading-icon' : ''
+        className: loading ? 'loading-icon' : '',
+        eventPropagation: true, // Allow click events to bubble up to button
     }
 
     return (