ywana-core8 0.2.20 → 0.2.21

package/src/desktop/desktop.js

@@ -1,46 +1,85 @@
 import React, { useRef, useEffect, useState, createContext, useContext } from 'react'
 import { WindowProvider, useWindows } from './WindowContext'
 import { Window } from './window'
-import { ApplicationMenu } from './ApplicationMenu'
+import { LaunchPad } from './LaunchPad'
 import { AppManager, AppLoader, defaultDesktopConfig } from './AppManager'
 import { ToggleButton } from '../html/selector'
-import { Icon } from '../html/icon'
+import { MenuIcon, MenuItem, MenuSeparator } from '../html/menu'
 import './desktop.css'
 import './desktop-windows.css'
-import './desktop-linux.css'
 import './desktop-macos.css'
+import './desktop-gnome.css'
+import './desktop-windowsxp.css'
+import './desktop-windows98.css'
+import './desktop-nextstep.css'
+import './desktop-macintosh.css'
+import './desktop-msx.css'
 
 /**
- * Context for Application state
+ * Z-INDEX LAYERS DOCUMENTATION
+ * ============================
+ * Workspace:        1
+ * Windows:          100-9999
+ * Desktop Overlays: 9000-9999
+ * Taskbar:          10000
+ * Taskbar Menus:    10001
  */
-const AppContext = createContext()
 
-export const useApplicationMenu = () => {
-    const context = useContext(AppContext)
+/**
+ * Context for Desktop state
+ */
+const DesktopContext = createContext()
+
+export const useLaunchPad = () => {
+    const context = useContext(DesktopContext)
     if (!context) {
-        throw new Error('useApplicationMenu must be used within AppProvider')
+        throw new Error('useLaunchPad must be used within DesktopProvider')
     }
-    return context.applicationMenu
+    return context.launchPad
 }
 
 export const useAppManager = () => {
-    const context = useContext(AppContext)
+    const context = useContext(DesktopContext)
     if (!context) {
-        throw new Error('useAppManager must be used within AppProvider')
+        throw new Error('useAppManager must be used within DesktopProvider')
     }
     return context.appManager
 }
 
+export const useDesktopOverlays = () => {
+    const context = useContext(DesktopContext)
+    if (!context) {
+        throw new Error('useDesktopOverlays must be used within DesktopProvider')
+    }
+    return context.overlays
+}
+
+export const useDesktopTheme = () => {
+    const context = useContext(DesktopContext)
+    if (!context) {
+        throw new Error('useDesktopTheme must be used within DesktopProvider')
+    }
+    return context.theme
+}
+
 /**
- * AppProvider - Provides Application state and AppManager to React components
+ * DesktopProvider - Provides Desktop state and AppManager to React components
  */
-export const AppProvider = ({
+export const DesktopProvider = ({
     children,
-    desktopConfig = defaultDesktopConfig
+    desktopConfig = defaultDesktopConfig,
+    initialTheme = 'windows'
 }) => {
     // Create a new AppManager instance if none provided
     const appManager = new AppManager()
-    const [isApplicationMenuOpen, setIsApplicationMenuOpen] = useState(false)
+    const [isLaunchPadOpen, setIsLaunchPadOpen] = useState(false)
+
+    // Desktop Theme state
+    const [currentTheme, setCurrentTheme] = useState(initialTheme)
+
+    // Desktop Overlays state
+    const [overlays, setOverlays] = useState([])
+    const overlayIdCounter = useRef(0)
 
     // Load configuration on mount
     useEffect(() => {
@@ -50,31 +89,219 @@ export const AppProvider = ({
         }
     }, [appManager, desktopConfig])
 
+    // Overlay management functions
+    const showOverlay = (config) => {
+        const id = `overlay-${overlayIdCounter.current++}`
+        const overlay = {
+            id,
+            content: config.content,
+            onClose: config.onClose || (() => hideOverlay(id)),
+            backdrop: config.backdrop !== false,
+            backdropBlur: config.backdropBlur !== false,
+            closeOnBackdrop: config.closeOnBackdrop !== false,
+            closeOnEscape: config.closeOnEscape !== false,
+            zIndex: config.zIndex || 9500,
+            animation: config.animation || 'fade',
+            animationDuration: config.animationDuration || 300,
+            position: config.position || 'center',
+            customPosition: config.customPosition,
+            size: config.size || 'auto',
+            customSize: config.customSize,
+            padding: config.padding,
+            margin: config.margin,
+            isClosing: false
+        }
+
+        setOverlays(prev => [...prev, overlay])
+        return id
+    }
+
+    const hideOverlay = (id, animation) => {
+        // Mark as closing to trigger exit animation
+        setOverlays(prev => prev.map(o =>
+            o.id === id ? { ...o, isClosing: true, exitAnimation: animation } : o
+        ))
+
+        // Remove after animation completes
+        const overlay = overlays.find(o => o.id === id)
+        const duration = overlay?.animationDuration || 300
+        setTimeout(() => {
+            setOverlays(prev => prev.filter(o => o.id !== id))
+        }, duration)
+    }
+
+    const hideAllOverlays = () => {
+        setOverlays([])
+    }
+
+    const updateOverlay = (id, updates) => {
+        setOverlays(prev => prev.map(o =>
+            o.id === id ? { ...o, ...updates } : o
+        ))
+    }
+
     const value = {
-        // Application Menu state
-        applicationMenu: {
-            isOpen: isApplicationMenuOpen,
-            open: () => setIsApplicationMenuOpen(true),
-            close: () => setIsApplicationMenuOpen(false),
-            toggle: () => setIsApplicationMenuOpen(!isApplicationMenuOpen)
+        // LaunchPad state
+        launchPad: {
+            isOpen: isLaunchPadOpen,
+            open: () => setIsLaunchPadOpen(true),
+            close: () => setIsLaunchPadOpen(false),
+            toggle: () => setIsLaunchPadOpen(!isLaunchPadOpen)
         },
         // App Manager instance
-        appManager
+        appManager,
+        // Desktop Overlays API
+        overlays: {
+            items: overlays,
+            show: showOverlay,
+            hide: hideOverlay,
+            hideAll: hideAllOverlays,
+            update: updateOverlay
+        },
+        // Desktop Theme API
+        theme: {
+            current: currentTheme,
+            set: setCurrentTheme,
+            available: ['windows', 'macos', 'gnome', 'windowsxp', 'windows98', 'nextstep', 'macintosh', 'msx']
+        }
     }
 
     return (
-        <AppContext.Provider value={value}>
+        <DesktopContext.Provider value={value}>
             {children}
-        </AppContext.Provider>
+        </DesktopContext.Provider>
+    )
+}
+
+/**
+ * DesktopOverlay - Individual overlay container with positioning and animations
+ */
+const DesktopOverlay = ({
+    id,
+    content,
+    zIndex,
+    onClose,
+    backdrop,
+    backdropBlur,
+    closeOnBackdrop,
+    closeOnEscape,
+    animation,
+    animationDuration,
+    position,
+    customPosition,
+    size,
+    customSize,
+    padding,
+    margin,
+    isClosing,
+    exitAnimation
+}) => {
+    const { hide } = useDesktopOverlays()
+
+    // Handle backdrop click
+    const handleBackdropClick = () => {
+        if (closeOnBackdrop && onClose) {
+            onClose()
+        }
+    }
+
+    // Handle escape key
+    useEffect(() => {
+        if (!closeOnEscape) return
+
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                onClose()
+            }
+        }
+
+        document.addEventListener('keydown', handleKeyDown)
+        return () => document.removeEventListener('keydown', handleKeyDown)
+    }, [closeOnEscape, onClose])
+
+    // Build class names
+    const overlayClasses = [
+        'desktop-overlay',
+        backdrop ? 'desktop-overlay--backdrop' : '',
+        backdropBlur ? 'desktop-overlay--blur' : '',
+        `desktop-overlay--position-${position}`,
+        `desktop-overlay--size-${size}`,
+        isClosing ? `desktop-overlay--exit-${exitAnimation || animation}` : `desktop-overlay--enter-${animation}`
+    ].filter(Boolean).join(' ')
+
+    // Build inline styles
+    const overlayStyle = {
+        zIndex,
+        animationDuration: `${animationDuration}ms`,
+        ...customPosition
+    }
+
+    const contentStyle = {
+        padding,
+        margin,
+        ...customSize
+    }
+
+    return (
+        <div
+            className={overlayClasses}
+            style={overlayStyle}
+            onClick={handleBackdropClick}
+        >
+            <div
+                className="desktop-overlay__content"
+                style={contentStyle}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {content}
+            </div>
+        </div>
+    )
+}
+
+/**
+ * DesktopOverlayLayer - Renders all desktop-level overlays
+ */
+const DesktopOverlayLayer = () => {
+    const { items } = useDesktopOverlays()
+    const { isOpen, close } = useLaunchPad()
+
+    return (
+        <div className="desktop-overlay-layer">
+            {/* LaunchPad as special overlay */}
+            {isOpen && (
+                <div
+                    className="desktop-overlay desktop-overlay--backdrop desktop-overlay--blur desktop-overlay--launchpad desktop-overlay--enter-fade"
+                    style={{ zIndex: 9000 }}
+                    onClick={close}
+                >
+                    <div
+                        className="desktop-overlay__content desktop-overlay__content--launchpad"
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <LaunchPad isOpen={isOpen} onClose={close} />
+                    </div>
+                </div>
+            )}
+
+            {/* Dynamic overlays */}
+            {items.map(overlay => (
+                <DesktopOverlay
+                    key={overlay.id}
+                    {...overlay}
+                />
+            ))}
+        </div>
     )
 }
 
 /**
  * Desktop layout component - manages overall desktop structure and sizing
  */
-const DesktopLayout = ({ children, className = '', theme = 'windows', workspaceRef, ...props }) => {
+const DesktopLayout = ({ children, className = '', workspaceRef, ...props }) => {
     const desktopRef = useRef(null)
     const { windowManager } = useWindows()
+    const { current: theme } = useDesktopTheme()
 
     // Measure workspace size on mount and resize
     useEffect(() => {
@@ -165,6 +392,78 @@ export const Workspace = ({ children }) => {
     )
 }
 
+/**
+ * ThemeMenu - Theme selector menu for taskbar
+ */
+const ThemeMenu = () => {
+    const { current: currentTheme, set: setTheme, available: availableThemes } = useDesktopTheme()
+
+    const themeIcons = {
+        'windows': 'computer',
+        'macos': 'laptop_mac',
+        'gnome': 'terminal',
+        'windowsxp': 'desktop_windows',
+        'windows98': 'computer',
+        'nextstep': 'business_center',
+        'macintosh': 'desktop_mac',
+        'msx': 'videogame_asset'
+    }
+
+    const themeLabels = {
+        'windows': 'Windows 11',
+        'macos': 'macOS',
+        'gnome': 'GNOME',
+        'windowsxp': 'Windows XP',
+        'windows98': 'Windows 98',
+        'nextstep': 'NeXTSTEP',
+        'macintosh': 'Macintosh',
+        'msx': 'MSX'
+    }
+
+    // Group themes by category
+    const modernThemes = ['windows', 'macos', 'gnome']
+    const retroThemes = ['windowsxp', 'windows98', 'nextstep', 'macintosh', 'msx']
+
+    return (
+        <MenuIcon
+            icon="palette"
+            size="small"
+            position="top-right"
+            menuSize="compact"
+        >
+            {/* Modern Themes */}
+            {modernThemes.map(theme => (
+                <MenuItem
+                    key={theme}
+                    icon={themeIcons[theme] || 'desktop_windows'}
+                    label={themeLabels[theme] || theme}
+                    meta={currentTheme === theme ? '✓' : ''}
+                    onSelect={() => {
+                        console.log('Theme changed to:', theme)
+                        setTheme(theme)
+                    }}
+                />
+            ))}
+
+            <MenuSeparator />
+
+            {/* Retro Themes */}
+            {retroThemes.map(theme => (
+                <MenuItem
+                    key={theme}
+                    icon={themeIcons[theme] || 'desktop_windows'}
+                    label={themeLabels[theme] || theme}
+                    meta={currentTheme === theme ? '✓' : ''}
+                    onSelect={() => {
+                        console.log('Theme changed to:', theme)
+                        setTheme(theme)
+                    }}
+                />
+            ))}
+        </MenuIcon>
+    )
+}
+
 /**
  * DesktopTaskbar - handles window creation and management
  */
@@ -184,11 +483,13 @@ export const DesktopTaskbar = () => {
         closeWindow,
         cascadeWindows,
         tileWindows,
+        arrangeWindowsInColumns,
+        arrangeWindowsInRows,
         centerAllWindows,
         clearAllWindows
     } = windowsContext
 
-    const { isOpen, toggle } = useApplicationMenu()
+    const { isOpen, toggle } = useLaunchPad()
     console.log('DesktopTaskbar - isOpen:', isOpen, 'toggle:', toggle)
 
     const handleCreateWindow = () => {
@@ -255,7 +556,6 @@ export const DesktopTaskbar = () => {
     return (
         <div className='desktop-taskbar' style={{
             height: '50px',
-            background: 'rgba(0,0,0,0.8)',
             display: 'flex',
             alignItems: 'center',
             padding: '0 16px',
@@ -358,39 +658,66 @@ export const DesktopTaskbar = () => {
                 marginLeft: 'auto',
                 marginRight: '8px'
             }}>
+                <MenuIcon
+                    icon="window"
+                    size="small"
+                    position="top-right"
+                    menuSize="compact"
+                >
+                    <MenuItem
+                        icon="view_stream"
+                        label="Cascade"
+                        onSelect={() => {
+                            console.log('Cascade windows clicked!')
+                            cascadeWindows()
+                        }}
+                    />
+                    <MenuItem
+                        icon="view_module"
+                        label="Tile"
+                        onSelect={() => {
+                            console.log('Tile windows clicked!')
+                            tileWindows()
+                        }}
+                    />
+                    <MenuSeparator />
+                    <MenuItem
+                        icon="view_week"
+                        label="Columns"
+                        onSelect={() => {
+                            console.log('Arrange in columns clicked!')
+                            arrangeWindowsInColumns()
+                        }}
+                    />
+                    <MenuItem
+                        icon="view_agenda"
+                        label="Rows"
+                        onSelect={() => {
+                            console.log('Arrange in rows clicked!')
+                            arrangeWindowsInRows()
+                        }}
+                    />
+                    <MenuSeparator />
+                    <MenuItem
+                        icon="center_focus_strong"
+                        label="Center All"
+                        onSelect={() => {
+                            console.log('Center all windows clicked!')
+                            centerAllWindows()
+                        }}
+                    />
+                    <MenuItem
+                        icon="clear_all"
+                        label="Clear All"
+                        onSelect={() => {
+                            console.log('Clear all windows clicked!')
+                            clearAllWindows()
+                        }}
+                    />
+                </MenuIcon>
 
-                <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"
-                />
+                {/* Theme Selector Menu */}
+                <ThemeMenu />
             </div>
 
             {/* Debug info */}
@@ -401,7 +728,7 @@ export const DesktopTaskbar = () => {
                 flexShrink: 0,
                 textAlign: 'right'
             }}>
-                {desktopSize.width}×{desktopSize.height}
+                {Math.round(desktopSize.width)}×{Math.round(desktopSize.height)}
             </div>
         </div>
     )
@@ -411,7 +738,6 @@ export const DesktopTaskbar = () => {
  * Internal Desktop component that uses the contexts
  */
 const DesktopInternal = ({ desktopSize, children, ...props }) => {
-    const { isOpen, close } = useApplicationMenu()
     const workspaceRef = useRef(null)
 
     return (
@@ -423,11 +749,9 @@ const DesktopInternal = ({ desktopSize, children, ...props }) => {
                         {children}
                     </Workspace>
 
-                    {/* ApplicationMenu positioned over workspace */}
-                    <ApplicationMenu
-                        isOpen={isOpen}
-                        onClose={close}
-                    />
+                    {/* Desktop Overlay Layer - for LaunchPad and other floating content */}
+                    {/* Positioned inside workspace-container to not cover taskbar */}
+                    <DesktopOverlayLayer />
                 </div>
 
                 {/* Taskbar at bottom - separate from workspace */}
@@ -438,7 +762,7 @@ const DesktopInternal = ({ desktopSize, children, ...props }) => {
 }
 
 /**
- * Main Desktop component with AppProvider wrapper
+ * Main Desktop component with DesktopProvider wrapper
  */
 export const Desktop = ({
     desktopSize,
@@ -447,12 +771,12 @@ export const Desktop = ({
     ...props
 }) => {
     return (
-        <AppProvider
+        <DesktopProvider
             desktopConfig={desktopConfig}
         >
             <DesktopInternal desktopSize={desktopSize} {...props}>
                 {children}
             </DesktopInternal>
-        </AppProvider>
+        </DesktopProvider>
     )
 }

package/src/desktop/index.js

@@ -1,7 +1,7 @@
 // Desktop Components - Window management system for web applications
-export { Desktop, Workspace, DesktopTaskbar, AppProvider, useApplicationMenu, useAppManager } from './desktop'
+export { Desktop, Workspace, DesktopTaskbar, DesktopProvider, useLaunchPad, useAppManager, useDesktopOverlays, useDesktopTheme } from './desktop'
 export { Window } from './window'
-export { ApplicationMenu } from './ApplicationMenu'
+export { LaunchPad } from './LaunchPad'
 
 // Application Management
 export { AppManager, defaultAppManager } from './AppManager'