ywana-core8 0.2.6 → 0.2.9

package/src/desktop/desktop.js

@@ -2,7 +2,9 @@ import React, { useRef, useEffect, useState, createContext, useContext } from 'r
 import { WindowProvider, useWindows } from './WindowContext'
 import { Window } from './window'
 import { ApplicationMenu } from './ApplicationMenu'
-import { defaultAppManager } from './AppManager'
+import { AppManager, AppLoader, defaultDesktopConfig } from './AppManager'
+import { ToggleButton } from '../html/selector'
+import { Icon } from '../html/icon'
 import './desktop.css'
 import './desktop-windows.css'
 import './desktop-linux.css'
@@ -32,9 +34,22 @@ export const useAppManager = () => {
 /**
  * AppProvider - Provides Application state and AppManager to React components
  */
-export const AppProvider = ({ children, appManager = defaultAppManager }) => {
+export const AppProvider = ({
+    children,
+    desktopConfig = defaultDesktopConfig
+}) => {
+    // Create a new AppManager instance if none provided
+    const appManager = new AppManager()
     const [isApplicationMenuOpen, setIsApplicationMenuOpen] = useState(false)
 
+    // Load configuration on mount
+    useEffect(() => {
+        // Only load if the appManager is empty (no apps registered)
+        if (appManager.getAllApps().length === 0 && desktopConfig) {
+            AppLoader.load(appManager, desktopConfig)
+        }
+    }, [appManager, desktopConfig])
+
     const value = {
         // Application Menu state
         applicationMenu: {
@@ -44,7 +59,7 @@ export const AppProvider = ({ children, appManager = defaultAppManager }) => {
             toggle: () => setIsApplicationMenuOpen(!isApplicationMenuOpen)
         },
         // App Manager instance
-        appManager: appManager
+        appManager
     }
 
     return (
@@ -57,17 +72,17 @@ export const AppProvider = ({ children, appManager = defaultAppManager }) => {
 /**
  * Desktop layout component - manages overall desktop structure and sizing
  */
-const DesktopLayout = ({ children, className = '', theme = 'windows', ...props }) => {
+const DesktopLayout = ({ children, className = '', theme = 'windows', workspaceRef, ...props }) => {
     const desktopRef = useRef(null)
     const { windowManager } = useWindows()
 
-    // Measure desktop size on mount and resize
+    // Measure workspace size on mount and resize
     useEffect(() => {
-        let currentSize = { width: 1200, height: 800 }
+        let currentSize = { width: 1200, height: 750 } // Default workspace size (desktop - taskbar)
 
-        const measureDesktop = () => {
-            if (desktopRef.current) {
-                const rect = desktopRef.current.getBoundingClientRect()
+        const measureWorkspace = () => {
+            if (workspaceRef.current) {
+                const rect = workspaceRef.current.getBoundingClientRect()
                 const newSize = {
                     width: rect.width,
                     height: rect.height
@@ -82,12 +97,12 @@ const DesktopLayout = ({ children, className = '', theme = 'windows', ...props }
         }
 
         // Initial measurement
-        measureDesktop()
+        measureWorkspace()
 
         // Listen for resize
-        const resizeObserver = new ResizeObserver(measureDesktop)
-        if (desktopRef.current) {
-            resizeObserver.observe(desktopRef.current)
+        const resizeObserver = new ResizeObserver(measureWorkspace)
+        if (workspaceRef.current) {
+            resizeObserver.observe(workspaceRef.current)
         }
 
         return () => {
@@ -124,13 +139,13 @@ const DesktopLayout = ({ children, className = '', theme = 'windows', ...props }
 }
 
 /**
- * Workspace - renders windows only
+ * Workspace - container for windows with proper boundaries
  */
 export const Workspace = ({ children }) => {
     const { windows } = useWindows()
 
     return (
-        <>
+        <div className="workspace">
             {children}
 
             {/* Render windows using Window component */}
@@ -148,7 +163,7 @@ export const Workspace = ({ children }) => {
                     </div>
                 </Window>
             ))}
-        </>
+        </div>
     )
 }
 
@@ -156,6 +171,11 @@ export const Workspace = ({ children }) => {
  * DesktopTaskbar - handles window creation and management
  */
 export const DesktopTaskbar = () => {
+    console.log('DesktopTaskbar render')
+
+    const windowsContext = useWindows()
+    console.log('useWindows result:', windowsContext)
+
     const {
         createWindow,
         windows,
@@ -163,12 +183,20 @@ export const DesktopTaskbar = () => {
         activeWindowId,
         focusWindow,
         minimizeWindow,
-        closeWindow
-    } = useWindows()
+        closeWindow,
+        cascadeWindows,
+        tileWindows,
+        centerAllWindows,
+        clearAllWindows
+    } = windowsContext
 
-    const { open: openApplicationMenu } = useApplicationMenu()
+    const { isOpen, toggle } = useApplicationMenu()
+    console.log('DesktopTaskbar - isOpen:', isOpen, 'toggle:', toggle)
 
     const handleCreateWindow = () => {
+        console.log('handleCreateWindow called!')
+        console.log('createWindow function:', createWindow)
+
         const windowTypes = [
             { title: 'File Explorer', icon: '📁', size: { width: 600, height: 400 } },
             { title: 'Text Editor', icon: '📝', size: { width: 500, height: 350 } },
@@ -178,6 +206,7 @@ export const DesktopTaskbar = () => {
         ]
 
         const randomType = windowTypes[Math.floor(Math.random() * windowTypes.length)]
+        console.log('Creating window:', randomType)
 
         createWindow({
             title: randomType.title,
@@ -226,58 +255,25 @@ export const DesktopTaskbar = () => {
     }
 
     return (
-        <div style={{
-                position: 'absolute',
-                bottom: 0,
-                left: 0,
-                right: 0,
-                height: '50px',
-                background: 'rgba(0,0,0,0.8)',
-                display: 'flex',
-                alignItems: 'center',
-                padding: '0 16px',
-                gap: '8px'
-            }}>
-                {/* Start button */}
-                <button
-                    onClick={openApplicationMenu}
-                    style={{
-                        padding: '8px 16px',
-                        background: '#1976d2',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: 'pointer',
-                        fontSize: '14px',
-                        fontWeight: 'bold',
-                        flexShrink: 0,
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '6px'
-                    }}
-                    title="Open application menu"
-                >
-                    <span style={{ fontSize: '16px' }}>🚀</span>
-                    Start
-                </button>
-
-                {/* Create window button (for testing) */}
-                <button
-                    onClick={handleCreateWindow}
-                    style={{
-                        padding: '8px 12px',
-                        background: '#666',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: 'pointer',
-                        fontSize: '12px',
-                        flexShrink: 0
-                    }}
-                    title="Create random window (for testing)"
-                >
-                    +
-                </button>
+        <div className='desktop-taskbar' style={{
+            height: '50px',
+            background: 'rgba(0,0,0,0.8)',
+            display: 'flex',
+            alignItems: 'center',
+            padding: '0 16px',
+            gap: '8px'
+        }}>
+            {/* Start button */}
+            <ToggleButton
+                checked={isOpen}
+                onToggle={() => {
+                    console.log('Start button toggled, current state:', isOpen)
+                    toggle()
+                }}
+                icon="start"
+                label="Start"
+            >
+            </ToggleButton>
 
             {/* Separator */}
             <div style={{
@@ -356,6 +352,49 @@ export const DesktopTaskbar = () => {
                 ))}
             </div>
 
+            {/* Window Layout Controls */}
+            <div style={{
+                display: 'flex',
+                gap: '4px',
+                alignItems: 'center',
+                marginLeft: 'auto',
+                marginRight: '8px'
+            }}>
+
+                <Icon clickable size="small"
+                    action={() => {
+                        console.log('Cascade windows clicked!')
+                        cascadeWindows()
+                    }}
+                    icon="view_stream"
+                    label="Cascade"
+                />
+                <Icon clickable size="small"
+                    action={() => {
+                        console.log('Tile windows clicked!')
+                        tileWindows()
+                    }}
+                    icon="view_module"
+                    label="Tile"
+                />
+                <Icon clickable size="small"
+                    action={() => {
+                        console.log('Center all windows clicked!')
+                        centerAllWindows()
+                    }}
+                    icon="center_focus_strong"
+                    label="Center"
+                />
+                <Icon clickable size="small"
+                    action={() => {
+                        console.log('Clear all windows clicked!')
+                        clearAllWindows()
+                    }}
+                    icon="clear_all"
+                    label="Clear"
+                />
+            </div>
+
             {/* Debug info */}
             <div style={{
                 color: 'rgba(255,255,255,0.7)',
@@ -375,18 +414,26 @@ export const DesktopTaskbar = () => {
  */
 const DesktopInternal = ({ desktopSize, children, ...props }) => {
     const { isOpen, close } = useApplicationMenu()
+    const workspaceRef = useRef(null)
 
     return (
         <WindowProvider desktopSize={desktopSize}>
-            <DesktopLayout {...props}>
-                <Workspace>
-                    {children}
-                </Workspace>
+            <DesktopLayout workspaceRef={workspaceRef} {...props}>
+                {/* Workspace container - has its own boundaries */}
+                <div ref={workspaceRef} className="desktop__workspace-container">
+                    <Workspace>
+                        {children}
+                    </Workspace>
+
+                    {/* ApplicationMenu positioned over workspace */}
+                    <ApplicationMenu
+                        isOpen={isOpen}
+                        onClose={close}
+                    />
+                </div>
+
+                {/* Taskbar at bottom - separate from workspace */}
                 <DesktopTaskbar />
-                <ApplicationMenu
-                    isOpen={isOpen}
-                    onClose={close}
-                />
             </DesktopLayout>
         </WindowProvider>
     )
@@ -395,9 +442,16 @@ const DesktopInternal = ({ desktopSize, children, ...props }) => {
 /**
  * Main Desktop component with AppProvider wrapper
  */
-export const Desktop = ({ desktopSize, children, ...props }) => {
+export const Desktop = ({
+    desktopSize,
+    children,
+    desktopConfig,
+    ...props
+}) => {
     return (
-        <AppProvider>
+        <AppProvider
+            desktopConfig={desktopConfig}
+        >
             <DesktopInternal desktopSize={desktopSize} {...props}>
                 {children}
             </DesktopInternal>

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 (

package/src/desktop.backup/desktop.css

@@ -1,6 +0,0 @@
-.desktop {
-     height: 100vh;
-     width: 100vw;
-     background-color: rgb(113, 102, 226);
-     position: relative;
-}

package/src/desktop.backup/desktop.js

@@ -1,13 +0,0 @@
-import React from 'react'
-import './desktop.css'
-
-export const Desktop = (props) => {
-
-    const { children } = props
-
-    return (
-        <div className='desktop'>
-            { children }
-        </div>
-    )
-}