ywana-core8 0.2.9 → 0.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.2.9",
+  "version": "0.2.13",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",
@@ -32,6 +32,10 @@
     "svgo": "^3.0.0",
     "webpack-dev-server": "^4.15.1"
   },
+  "overrides": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
   "peerDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
@@ -45,21 +49,16 @@
     "jsdom": "^26.1.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "vite": "^7.1.4"
+    "vite": "^7.1.5"
   },
   "dependencies": {
     "axios": "^1.3.4",
-    "crypto-js": "^4.1.1",
     "deep-equal": "^2.0.5",
     "material-design-icons-iconfont": "^6.7.0",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "react-datepicker": "^4.6.0",
     "react-error-overlay": "^6.0.10",
-    "react-image-pan-zoom-rotate": "^1.6.0",
     "react-notifications-component": "^4.0.1",
-    "react-switch": "^6.0.0",
-    "react-syntax-highlighter": "^15.6.6",
     "resumablejs": "^1.1.0"
   }
 }

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/desktop/window.css

@@ -24,6 +24,11 @@
     box-shadow: none;
 }
 
+.window--minimized {
+    visibility: hidden;
+    pointer-events: none;
+}
+
 .window--dragging {
     pointer-events: none;
 }
@@ -143,7 +148,6 @@
 /* Content */
 .window__content {
     flex: 1;
-    overflow: auto;
     background: white;
 }
 

package/src/desktop/window.js

@@ -301,12 +301,14 @@ export const Window = ({
         width: maximized ? 'calc(100% - 0px)' : size.width,
         height: maximized ? 'calc(100% - 50px)' : size.height, // Leave space for taskbar
         zIndex: zIndex,
-        display: minimized ? 'none' : 'block'
+        // Removed display property - let CSS handle it
+        ...(minimized && { visibility: 'hidden' }) // Use visibility instead of display
     }
 
     const windowClasses = [
         'window',
         maximized && 'window--maximized',
+        minimized && 'window--minimized',
         isDragging && 'window--dragging',
         isResizing && 'window--resizing',
         className

package/src/html/switch.example.js

@@ -207,7 +207,7 @@ export const SwitchExamples = () => {
 
             {/* Switch básicos */}
             <section style={{ marginBottom: '2rem' }}>
-                <h3>Switch Básicos (react-switch)</h3>
+                <h3>Switch Básicos</h3>
                 <div style={{
                     background: '#fff',
                     padding: '1.5rem',

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

package/src/html/switch-debug.js

@@ -1,197 +0,0 @@
-import React, { useState } from 'react'
-import RSwitch from 'react-switch'
-import { Switch, Switch2 } from './switch'
-
-/**
- * Componente de debug para verificar que los switches se ven correctamente
- */
-export const SwitchDebug = () => {
-    const [checked, setChecked] = useState(false)
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '600px' }}>
-            <h1>🔍 Debug de Switches</h1>
-            
-            {/* React Switch directo */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>React Switch Directo (sin wrapper)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
-                        <span>Estado: {checked ? 'ON' : 'OFF'}</span>
-                        <RSwitch
-                            checked={checked}
-                            onChange={setChecked}
-                            onColor="#2693e6"
-                            offColor="#ccc"
-                            onHandleColor="#ffffff"
-                            offHandleColor="#ffffff"
-                            handleDiameter={18}
-                            uncheckedIcon={false}
-                            checkedIcon={false}
-                            boxShadow="0px 2px 4px rgba(0, 0, 0, 0.2)"
-                            activeBoxShadow="0px 0px 0px 3px rgba(38, 147, 230, 0.2)"
-                            height={20}
-                            width={48}
-                        />
-                    </div>
-                    <p style={{ fontSize: '0.9rem', color: '#666' }}>
-                        Este es react-switch sin ningún wrapper. Si no se ve bien, el problema es con la librería o CSS global.
-                    </p>
-                </div>
-            </section>
-
-            {/* Nuestro Switch wrapper */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Nuestro Switch (wrapper)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <Switch 
-                        id="debug-switch"
-                        label="Switch con wrapper"
-                        checked={checked}
-                        onChange={(id, value) => setChecked(value)}
-                    />
-                    <p style={{ fontSize: '0.9rem', color: '#666', marginTop: '1rem' }}>
-                        Este usa nuestro wrapper. Debería verse igual que el de arriba.
-                    </p>
-                </div>
-            </section>
-
-            {/* Switch2 para comparación */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Switch2 (Material Icons)</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <Switch2 
-                        id="debug-switch2"
-                        label="Switch2 con iconos"
-                        checked={checked}
-                        onChange={(id, value) => setChecked(value)}
-                    />
-                    <p style={{ fontSize: '0.9rem', color: '#666', marginTop: '1rem' }}>
-                        Este usa iconos Material. Debería mostrar toggle_on/toggle_off.
-                    </p>
-                </div>
-            </section>
-
-            {/* Diferentes estados */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>Diferentes Estados</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    padding: '1.5rem', 
-                    borderRadius: '8px',
-                    border: '1px solid #ddd'
-                }}>
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }}>
-                        <div>
-                            <h4>Normal OFF</h4>
-                            <RSwitch
-                                checked={false}
-                                onChange={() => {}}
-                                onColor="#2693e6"
-                                offColor="#ccc"
-                                height={20}
-                                width={48}
-                                handleDiameter={18}
-                                uncheckedIcon={false}
-                                checkedIcon={false}
-                            />
-                        </div>
-                        <div>
-                            <h4>Normal ON</h4>
-                            <RSwitch
-                                checked={true}
-                                onChange={() => {}}
-                                onColor="#2693e6"
-                                offColor="#ccc"
-                                height={20}
-                                width={48}
-                                handleDiameter={18}
-                                uncheckedIcon={false}
-                                checkedIcon={false}
-                            />
-                        </div>
-                        <div>
-                            <h4>Disabled OFF</h4>
-                            <RSwitch
-                                checked={false}
-                                onChange={() => {}}
-                                disabled={true}
-                                onColor="#2693e6"
-                                offColor="#ccc"
-                                height={20}
-                                width={48}
-                                handleDiameter={18}
-                                uncheckedIcon={false}
-                                checkedIcon={false}
-                            />
-                        </div>
-                        <div>
-                            <h4>Disabled ON</h4>
-                            <RSwitch
-                                checked={true}
-                                onChange={() => {}}
-                                disabled={true}
-                                onColor="#2693e6"
-                                offColor="#ccc"
-                                height={20}
-                                width={48}
-                                handleDiameter={18}
-                                uncheckedIcon={false}
-                                checkedIcon={false}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            {/* Información de debug */}
-            <section>
-                <h3>Información de Debug</h3>
-                <div style={{ 
-                    background: '#f8f9fa', 
-                    padding: '1rem', 
-                    borderRadius: '4px',
-                    border: '1px solid #dee2e6'
-                }}>
-                    <h4>¿Qué deberías ver?</h4>
-                    <ul>
-                        <li><strong>Switch OFF:</strong> Fondo gris (#ccc), handle blanco a la izquierda</li>
-                        <li><strong>Switch ON:</strong> Fondo azul (#2693e6), handle blanco a la derecha</li>
-                        <li><strong>Handle:</strong> Círculo blanco con sombra sutil</li>
-                        <li><strong>Transición:</strong> Animación suave al cambiar estado</li>
-                    </ul>
-                    
-                    <h4>Si solo ves un círculo gris:</h4>
-                    <ul>
-                        <li>Verifica que react-switch esté instalado: <code>npm list react-switch</code></li>
-                        <li>Revisa la consola del navegador por errores</li>
-                        <li>Verifica que no hay CSS conflictivo</li>
-                        <li>Asegúrate de que las props de color se están aplicando</li>
-                    </ul>
-
-                    <h4>Estado actual:</h4>
-                    <pre style={{ background: '#fff', padding: '0.5rem', borderRadius: '4px' }}>
-                        {JSON.stringify({ checked }, null, 2)}
-                    </pre>
-                </div>
-            </section>
-        </div>
-    )
-}
-
-export default SwitchDebug