ywana-core8 0.2.8 → 0.2.10

package/src/desktop/desktop-windows.css

@@ -185,15 +185,12 @@
 
 .desktop--windows .application-menu__category {
     background: #ffffff;
-    border: 1px solid #e0e0e0;
-    border-radius: 16px;
     font-family: 'Segoe UI', sans-serif;
     font-size: 13px;
 }
 
 .desktop--windows .application-menu__category:hover {
     background: #f5f5f5;
-    border-color: #d0d0d0;
 }
 
 .desktop--windows .application-menu__category.active {

package/src/desktop/desktop.js

@@ -2,7 +2,7 @@ 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'
@@ -34,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: {
@@ -46,7 +59,7 @@ export const AppProvider = ({ children, appManager = defaultAppManager }) => {
             toggle: () => setIsApplicationMenuOpen(!isApplicationMenuOpen)
         },
         // App Manager instance
-        appManager: appManager
+        appManager
     }
 
     return (
@@ -243,24 +256,24 @@ 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',
-                gap: '8px'
-            }}>
-                {/* Start button */}
-                <ToggleButton
-                    checked={isOpen}
-                    onToggle={() => {
-                        console.log('Start button toggled, current state:', isOpen)
-                        toggle()
-                    }}
-                    icon="start"
-                    label="Start"
-                >
-                </ToggleButton>
+            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={{
@@ -429,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.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>
-    )
-}

package/src/desktop.backup/window.css

@@ -1,58 +0,0 @@
-.window {
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
-    min-width: 20rem;
-    min-height: 15rem;
-    resize: both;
-    background-color: rgb(227, 227, 227);
-    display: grid;
-    overflow: hidden;
-    resize: both;
-}
-
-.window.normal {
-    grid-template-areas: 
-        "header header header"
-        "nav nav nav"
-        "menu main aside"
-        "footer footer footer";
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: 2rem auto 1fr auto;
-}
-
-.window>header {
-    grid-area: header;
-    padding: .3rem .3rem 0 0;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-}
-
-.window>header>label {
-    flex: 1;
-}
-
-.window>nav {
-    grid-area: nav;
-}
-
-.window>menu {
-    grid-area: menu;
-    padding: 0;
-}
-
-.window>main {
-    grid-area: main;
-    padding: .5rem;
-    overflow: hidden;
-    border: solid 1px var(--divider-color);
-}
-
-.window>aside {
-    grid-area: aside;
-}
-
-.window>footer {
-    grid-area: footer;
-}

package/src/desktop.backup/window.js

@@ -1,27 +0,0 @@
-import React from 'react'
-import { Button, Icon } from '../html'
-import './window.css'
-
-export const Window = (props) => {
-
-    const { id, icon, title, children } = props
-
-    return (
-        <div className="window normal" draggable>
-            <header>
-                <Icon icon={icon} size="small" />
-                <label>{title}</label>
-                <Icon icon="close" clickable size="small" />
-            </header>
-            <nav>
-
-            </nav>
-            <menu></menu>
-            <main>
-                {children}x
-            </main>
-            <aside></aside>
-            <footer>x</footer>
-        </div>
-    )
-} 

package/src/examples/ApplicationMenuExample.js

@@ -1,361 +0,0 @@
-import React from 'react'
-import { Desktop, AppProvider, AppManager, defaultAppManager, useApplicationMenu, useAppManager } from '../desktop'
-
-// Example custom components for applications
-const TextEditorComponent = () => (
-    <div style={{ padding: '20px', height: '100%', display: 'flex', flexDirection: 'column' }}>
-        <div style={{ marginBottom: '10px', display: 'flex', gap: '10px' }}>
-            <button style={{ padding: '5px 10px', fontSize: '12px' }}>New</button>
-            <button style={{ padding: '5px 10px', fontSize: '12px' }}>Open</button>
-            <button style={{ padding: '5px 10px', fontSize: '12px' }}>Save</button>
-        </div>
-        <textarea 
-            style={{ 
-                flex: 1, 
-                border: '1px solid #ccc', 
-                padding: '10px',
-                fontFamily: 'monospace',
-                fontSize: '14px',
-                resize: 'none'
-            }}
-            placeholder="Start typing your text here..."
-            defaultValue="Welcome to the Text Editor!\n\nThis is a simple text editor application launched from the Application Menu."
-        />
-    </div>
-)
-
-const CalculatorComponent = () => {
-    const [display, setDisplay] = React.useState('0')
-    const [previousValue, setPreviousValue] = React.useState(null)
-    const [operation, setOperation] = React.useState(null)
-    const [waitingForOperand, setWaitingForOperand] = React.useState(false)
-
-    const inputNumber = (num) => {
-        if (waitingForOperand) {
-            setDisplay(String(num))
-            setWaitingForOperand(false)
-        } else {
-            setDisplay(display === '0' ? String(num) : display + num)
-        }
-    }
-
-    const inputOperation = (nextOperation) => {
-        const inputValue = parseFloat(display)
-
-        if (previousValue === null) {
-            setPreviousValue(inputValue)
-        } else if (operation) {
-            const currentValue = previousValue || 0
-            const newValue = calculate(currentValue, inputValue, operation)
-
-            setDisplay(String(newValue))
-            setPreviousValue(newValue)
-        }
-
-        setWaitingForOperand(true)
-        setOperation(nextOperation)
-    }
-
-    const calculate = (firstValue, secondValue, operation) => {
-        switch (operation) {
-            case '+': return firstValue + secondValue
-            case '-': return firstValue - secondValue
-            case '×': return firstValue * secondValue
-            case '÷': return firstValue / secondValue
-            case '=': return secondValue
-            default: return secondValue
-        }
-    }
-
-    const performCalculation = () => {
-        const inputValue = parseFloat(display)
-
-        if (previousValue !== null && operation) {
-            const newValue = calculate(previousValue, inputValue, operation)
-            setDisplay(String(newValue))
-            setPreviousValue(null)
-            setOperation(null)
-            setWaitingForOperand(true)
-        }
-    }
-
-    const clear = () => {
-        setDisplay('0')
-        setPreviousValue(null)
-        setOperation(null)
-        setWaitingForOperand(false)
-    }
-
-    const buttonStyle = {
-        padding: '15px',
-        margin: '2px',
-        border: 'none',
-        borderRadius: '4px',
-        cursor: 'pointer',
-        fontSize: '16px',
-        fontWeight: 'bold'
-    }
-
-    return (
-        <div style={{ padding: '20px', maxWidth: '250px' }}>
-            <div style={{ 
-                background: '#000', 
-                color: '#fff', 
-                padding: '15px', 
-                textAlign: 'right', 
-                fontSize: '24px',
-                marginBottom: '10px',
-                borderRadius: '4px',
-                minHeight: '40px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-end'
-            }}>
-                {display}
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '2px' }}>
-                <button style={{...buttonStyle, background: '#f0f0f0'}} onClick={clear}>C</button>
-                <button style={{...buttonStyle, background: '#f0f0f0'}} onClick={() => {}}>±</button>
-                <button style={{...buttonStyle, background: '#f0f0f0'}} onClick={() => {}}>%</button>
-                <button style={{...buttonStyle, background: '#ff9500', color: 'white'}} onClick={() => inputOperation('÷')}>÷</button>
-                
-                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(7)}>7</button>
-                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(8)}>8</button>
-                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(9)}>9</button>
-                <button style={{...buttonStyle, background: '#ff9500', color: 'white'}} onClick={() => inputOperation('×')}>×</button>
-                
-                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(4)}>4</button>
-                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(5)}>5</button>
-                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(6)}>6</button>
-                <button style={{...buttonStyle, background: '#ff9500', color: 'white'}} onClick={() => inputOperation('-')}>-</button>
-                
-                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(1)}>1</button>
-                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(2)}>2</button>
-                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => inputNumber(3)}>3</button>
-                <button style={{...buttonStyle, background: '#ff9500', color: 'white'}} onClick={() => inputOperation('+')}>+</button>
-                
-                <button style={{...buttonStyle, background: '#333', color: 'white', gridColumn: 'span 2'}} onClick={() => inputNumber(0)}>0</button>
-                <button style={{...buttonStyle, background: '#333', color: 'white'}} onClick={() => {}}>.</button>
-                <button style={{...buttonStyle, background: '#ff9500', color: 'white'}} onClick={performCalculation}>=</button>
-            </div>
-        </div>
-    )
-}
-
-// Register custom applications with components
-const setupCustomApps = () => {
-    // Register Text Editor with actual component
-    defaultAppManager.registerApp({
-        id: 'text-editor-custom',
-        name: 'Advanced Text Editor',
-        description: 'Full-featured text editor with toolbar',
-        icon: '📝',
-        category: 'Productivity',
-        component: <TextEditorComponent />,
-        size: { width: 600, height: 400 }
-    })
-
-    // Register Calculator with actual component
-    defaultAppManager.registerApp({
-        id: 'calculator-custom',
-        name: 'Calculator Pro',
-        description: 'Advanced calculator with full functionality',
-        icon: '🧮',
-        category: 'Utilities',
-        component: <CalculatorComponent />,
-        size: { width: 300, height: 450 }
-    })
-
-    // Register a custom dashboard app
-    defaultAppManager.registerApp({
-        id: 'dashboard',
-        name: 'Dashboard',
-        description: 'System monitoring dashboard',
-        icon: '📊',
-        category: 'System',
-        component: (
-            <div style={{ padding: '20px' }}>
-                <h2>System Dashboard</h2>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginTop: '20px' }}>
-                    <div style={{ padding: '15px', background: '#e3f2fd', borderRadius: '8px' }}>
-                        <h4>CPU Usage</h4>
-                        <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1976d2' }}>45%</div>
-                    </div>
-                    <div style={{ padding: '15px', background: '#e8f5e8', borderRadius: '8px' }}>
-                        <h4>Memory</h4>
-                        <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#388e3c' }}>2.1GB</div>
-                    </div>
-                    <div style={{ padding: '15px', background: '#fff3e0', borderRadius: '8px' }}>
-                        <h4>Disk Space</h4>
-                        <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#f57c00' }}>78%</div>
-                    </div>
-                    <div style={{ padding: '15px', background: '#fce4ec', borderRadius: '8px' }}>
-                        <h4>Network</h4>
-                        <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#c2185b' }}>125 MB/s</div>
-                    </div>
-                </div>
-            </div>
-        ),
-        size: { width: 500, height: 400 }
-    })
-}
-
-// Component that demonstrates using both AppProvider hooks
-const DemoControls = () => {
-    const { isOpen, open, close, toggle } = useApplicationMenu()
-    const appManager = useAppManager()
-    const [appCount, setAppCount] = React.useState(0)
-
-    React.useEffect(() => {
-        const updateCount = () => setAppCount(appManager.getAllApps().length)
-        updateCount()
-        appManager.addListener(updateCount)
-        return () => appManager.removeListener(updateCount)
-    }, [appManager])
-
-    const addCustomApp = () => {
-        const randomId = `custom-app-${Date.now()}`
-        appManager.registerApp({
-            id: randomId,
-            name: `Custom App ${Math.floor(Math.random() * 100)}`,
-            description: 'Dynamically added application',
-            icon: ['🎨', '🎯', '🎪', '🎭', '🎨'][Math.floor(Math.random() * 5)],
-            category: 'Custom',
-            component: (
-                <div style={{ padding: '20px', textAlign: 'center' }}>
-                    <h2>Dynamic App</h2>
-                    <p>This app was added dynamically using AppManager!</p>
-                    <p>ID: {randomId}</p>
-                </div>
-            ),
-            size: { width: 400, height: 300 }
-        })
-    }
-
-    return (
-        <div style={{
-            position: 'absolute',
-            top: '20px',
-            right: '20px',
-            background: 'rgba(255,255,255,0.9)',
-            padding: '20px',
-            borderRadius: '8px',
-            boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
-            maxWidth: '300px'
-        }}>
-            <h4 style={{ margin: '0 0 15px 0' }}>🎮 App Controls</h4>
-            <p style={{ margin: '0 0 10px 0', fontSize: '14px', color: '#666' }}>
-                Menu: <strong>{isOpen ? 'Open' : 'Closed'}</strong><br/>
-                Apps: <strong>{appCount}</strong>
-            </p>
-
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                <button
-                    onClick={open}
-                    style={{
-                        padding: '8px 12px',
-                        background: '#4caf50',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: 'pointer',
-                        fontSize: '12px'
-                    }}
-                >
-                    Open Menu
-                </button>
-                <button
-                    onClick={close}
-                    style={{
-                        padding: '8px 12px',
-                        background: '#f44336',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: 'pointer',
-                        fontSize: '12px'
-                    }}
-                >
-                    Close Menu
-                </button>
-                <button
-                    onClick={toggle}
-                    style={{
-                        padding: '8px 12px',
-                        background: '#2196f3',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: 'pointer',
-                        fontSize: '12px'
-                    }}
-                >
-                    Toggle Menu
-                </button>
-                <hr style={{ margin: '10px 0', border: 'none', borderTop: '1px solid #eee' }} />
-                <button
-                    onClick={addCustomApp}
-                    style={{
-                        padding: '8px 12px',
-                        background: '#ff9800',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: 'pointer',
-                        fontSize: '12px'
-                    }}
-                >
-                    Add Custom App
-                </button>
-            </div>
-        </div>
-    )
-}
-
-/**
- * Example component demonstrating the ApplicationMenu system
- */
-export const ApplicationMenuExample = () => {
-    React.useEffect(() => {
-        setupCustomApps()
-    }, [])
-
-    return (
-        <div style={{ height: '100vh', position: 'relative', backgroundColor: '#f0f0f0' }}>
-            <Desktop desktopSize={{ width: 1200, height: 800 }}>
-                {/* Desktop background content */}
-                <div style={{
-                    position: 'absolute',
-                    top: '20px',
-                    left: '20px',
-                    background: 'rgba(255,255,255,0.9)',
-                    padding: '20px',
-                    borderRadius: '8px',
-                    boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
-                    maxWidth: '400px'
-                }}>
-                    <h3 style={{ margin: '0 0 15px 0' }}>🚀 AppProvider + AppManager Demo</h3>
-                    <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
-                        AppProvider and AppManager now collaborate seamlessly. The ApplicationMenu gets apps
-                        from AppManager through the context. Try adding custom apps dynamically!
-                    </p>
-                    <div style={{ fontSize: '14px', color: '#666' }}>
-                        <p><strong>Collaboration Features:</strong></p>
-                        <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
-                            <li>AppProvider provides AppManager via context</li>
-                            <li>ApplicationMenu uses useAppManager() hook</li>
-                            <li>Dynamic app registration and updates</li>
-                            <li>Real-time app count updates</li>
-                            <li>Clean separation of concerns</li>
-                        </ul>
-                    </div>
-                </div>
-
-                {/* Demo controls using the hook */}
-                <DemoControls />
-            </Desktop>
-        </div>
-    )
-}
-
-export default ApplicationMenuExample