ywana-core8 0.2.9 → 0.2.10

package/dist/index.css

@@ -16172,8 +16172,8 @@ li.selected,
     left: 0;
     right: 0;
     bottom: 0; /* Covers entire workspace container */
-    background: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(8px);
+    background: rgba(0, 0, 0, 0.16);
+    backdrop-filter: blur(1px);
     z-index: 10000; /* Always above all windows */
     display: flex;
     align-items: flex-end;
@@ -16198,7 +16198,8 @@ li.selected,
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
     width: 30rem;
     max-width: 1000px;
-    height: 80vh; /* Altura fija relativa al viewport */
+    height: 55vh;
+    min-height: 30rem;
     max-height: calc(100% - 80px); /* Espacio para taskbar */
     display: grid;
     grid-template-rows: auto auto 1fr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/desktop/ApplicationMenu.css

@@ -6,8 +6,8 @@
     left: 0;
     right: 0;
     bottom: 0; /* Covers entire workspace container */
-    background: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(8px);
+    background: rgba(0, 0, 0, 0.16);
+    backdrop-filter: blur(1px);
     z-index: 10000; /* Always above all windows */
     display: flex;
     align-items: flex-end;
@@ -32,7 +32,8 @@
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
     width: 30rem;
     max-width: 1000px;
-    height: 80vh; /* Altura fija relativa al viewport */
+    height: 55vh;
+    min-height: 30rem;
     max-height: calc(100% - 80px); /* Espacio para taskbar */
     display: grid;
     grid-template-rows: auto auto 1fr;

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