ywana-core8 0.1.103 → 0.2.1

package/src/desktop/desktop.js

@@ -1,13 +1,319 @@
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
+import { WindowProvider, useWindows } from './WindowContext'
+import { Window } from './window'
 import './desktop.css'
 
-export const Desktop = (props) => {
+/**
+ * Desktop layout component - manages overall desktop structure and sizing
+ */
+const DesktopLayout = ({ children, className = '', ...props }) => {
+    const desktopRef = useRef(null)
+    const { windowManager } = useWindows()
 
-    const { children } = props
+    // Measure desktop size on mount and resize
+    useEffect(() => {
+        let currentSize = { width: 1200, height: 800 }
+
+        const measureDesktop = () => {
+            if (desktopRef.current) {
+                const rect = desktopRef.current.getBoundingClientRect()
+                const newSize = {
+                    width: rect.width,
+                    height: rect.height
+                }
+
+                // Only update if size actually changed
+                if (newSize.width !== currentSize.width || newSize.height !== currentSize.height) {
+                    currentSize = newSize
+                    windowManager.setDesktopSize(newSize)
+                }
+            }
+        }
+
+        // Initial measurement
+        measureDesktop()
+
+        // Listen for resize
+        const resizeObserver = new ResizeObserver(measureDesktop)
+        if (desktopRef.current) {
+            resizeObserver.observe(desktopRef.current)
+        }
+
+        return () => {
+            resizeObserver.disconnect()
+        }
+    }, [windowManager])
+
+    // Handle right-click context menu
+    const handleContextMenu = (e) => {
+        e.preventDefault()
+        // TODO: Show context menu
+        console.log('Desktop context menu at:', e.clientX, e.clientY)
+    }
+
+    return (
+        <div
+            ref={desktopRef}
+            className={`desktop ${className}`}
+            onContextMenu={handleContextMenu}
+            {...props}
+        >
+            {/* Desktop background */}
+            <div className="desktop__background" />
+
+            {/* Desktop content area */}
+            <div className="desktop__content">
+                {children}
+            </div>
+        </div>
+    )
+}
+
+/**
+ * Workspace - renders windows only
+ */
+export const Workspace = ({ children }) => {
+    const { windows } = useWindows()
+
+    return (
+        <>
+            {children}
+
+            {/* Render windows using Window component */}
+            {windows.map(window => (
+                <Window
+                    key={window.id}
+                    id={window.id}
+                    title={window.title}
+                    icon={window.icon}
+                    toolbar={window.toolbar}
+                    statusBar={window.statusBar}
+                >
+                    <div style={{ padding: '16px' }}>
+                        <h3>Window: {window.title}</h3>
+                        <p><strong>ID:</strong> {window.id}</p>
+                        <p><strong>Position:</strong> {window.position.x}, {window.position.y}</p>
+                        <p><strong>Size:</strong> {window.size.width} × {window.size.height}</p>
+                        <p><strong>Z-Index:</strong> {window.zIndex}</p>
+                        <p><strong>Status:</strong> {window.minimized ? 'Minimized' : window.maximized ? 'Maximized' : 'Normal'}</p>
+
+                        <div style={{ marginTop: '16px', padding: '12px', background: '#f8f9fa', borderRadius: '4px' }}>
+                            <p><strong>Window Content Area</strong></p>
+                            <p>This is where your application content would go.</p>
+                            <p>The window is fully draggable and has working minimize, maximize, and close buttons.</p>
+                        </div>
+                    </div>
+                </Window>
+            ))}
+        </>
+    )
+}
+
+/**
+ * DesktopTaskbar - handles window creation and management
+ */
+export const DesktopTaskbar = () => {
+    const {
+        createWindow,
+        windows,
+        desktopSize,
+        activeWindowId,
+        focusWindow,
+        minimizeWindow,
+        closeWindow
+    } = useWindows()
+
+    const handleCreateWindow = () => {
+        const windowTypes = [
+            { title: 'File Explorer', icon: '📁', size: { width: 600, height: 400 } },
+            { title: 'Text Editor', icon: '📝', size: { width: 500, height: 350 } },
+            { title: 'Calculator', icon: '🧮', size: { width: 300, height: 400 } },
+            { title: 'Settings', icon: '⚙️', size: { width: 450, height: 300 } },
+            { title: 'Browser', icon: '🌐', size: { width: 800, height: 500 } }
+        ]
+
+        const randomType = windowTypes[Math.floor(Math.random() * windowTypes.length)]
+
+        createWindow({
+            title: randomType.title,
+            icon: randomType.icon,
+            size: randomType.size,
+            toolbar: randomType.title === 'Text Editor' ? (
+                <div style={{ display: 'flex', gap: '8px' }}>
+                    <button style={{ padding: '4px 8px', fontSize: '12px' }}>File</button>
+                    <button style={{ padding: '4px 8px', fontSize: '12px' }}>Edit</button>
+                    <button style={{ padding: '4px 8px', fontSize: '12px' }}>View</button>
+                </div>
+            ) : null,
+            statusBar: randomType.title === 'Text Editor' ? (
+                <span>Ready | Line 1, Column 1</span>
+            ) : null
+        })
+    }
+
+    const handleWindowClick = (window) => {
+        if (window.minimized) {
+            // If minimized, restore it
+            minimizeWindow(window.id, false)
+        } else if (window.id === activeWindowId) {
+            // If already active, minimize it
+            minimizeWindow(window.id, true)
+        } else {
+            // If not active, focus it
+            focusWindow(window.id)
+        }
+    }
+
+    const handleWindowRightClick = (e, window) => {
+        e.preventDefault()
+        // Simple context menu simulation
+        const action = window.minimized ? 'Restore' : 'Minimize'
+        if (confirm(`${action} "${window.title}"?`)) {
+            minimizeWindow(window.id, !window.minimized)
+        }
+    }
+
+    const handleWindowMiddleClick = (e, window) => {
+        e.preventDefault()
+        if (confirm(`Close "${window.title}"?`)) {
+            closeWindow(window.id)
+        }
+    }
 
     return (
-        <div className='desktop'>
-            { children }
+        <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'
+        }}>
+            {/* Create window button */}
+            <button
+                onClick={handleCreateWindow}
+                style={{
+                    padding: '8px 12px',
+                    background: '#1976d2',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    fontSize: '12px',
+                    flexShrink: 0
+                }}
+                title="Create new window"
+            >
+                +
+            </button>
+
+            {/* Separator */}
+            <div style={{
+                width: '1px',
+                height: '30px',
+                background: 'rgba(255,255,255,0.3)',
+                flexShrink: 0
+            }} />
+
+            {/* Window icons */}
+            <div style={{
+                display: 'flex',
+                gap: '4px',
+                flex: 1,
+                overflow: 'hidden'
+            }}>
+                {windows.map(window => (
+                    <button
+                        key={window.id}
+                        onClick={() => handleWindowClick(window)}
+                        onContextMenu={(e) => handleWindowRightClick(e, window)}
+                        onMouseDown={(e) => {
+                            if (e.button === 1) { // Middle click
+                                handleWindowMiddleClick(e, window)
+                            }
+                        }}
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '6px',
+                            padding: '6px 12px',
+                            background: window.id === activeWindowId
+                                ? 'rgba(255,255,255,0.2)'
+                                : window.minimized
+                                    ? 'rgba(255,255,255,0.05)'
+                                    : 'rgba(255,255,255,0.1)',
+                            border: window.id === activeWindowId
+                                ? '1px solid rgba(255,255,255,0.3)'
+                                : '1px solid transparent',
+                            borderRadius: '4px',
+                            color: window.minimized ? 'rgba(255,255,255,0.6)' : 'white',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                            maxWidth: '150px',
+                            minWidth: '40px',
+                            transition: 'all 0.15s ease',
+                            position: 'relative'
+                        }}
+                        title={`${window.title}${window.minimized ? ' (Minimized)' : ''}\nLeft click: ${window.minimized ? 'Restore' : window.id === activeWindowId ? 'Minimize' : 'Focus'}\nRight click: Context menu\nMiddle click: Close`}
+                    >
+                        <span style={{ fontSize: '14px', flexShrink: 0 }}>
+                            {window.icon || '🪟'}
+                        </span>
+                        <span style={{
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            fontWeight: window.id === activeWindowId ? 'bold' : 'normal'
+                        }}>
+                            {window.title}
+                        </span>
+                        {/* Active indicator */}
+                        {window.id === activeWindowId && !window.minimized && (
+                            <div style={{
+                                position: 'absolute',
+                                bottom: '-1px',
+                                left: '50%',
+                                transform: 'translateX(-50%)',
+                                width: '20px',
+                                height: '2px',
+                                background: '#1976d2',
+                                borderRadius: '1px'
+                            }} />
+                        )}
+                    </button>
+                ))}
+            </div>
+
+            {/* Debug info */}
+            <div style={{
+                color: 'rgba(255,255,255,0.7)',
+                fontSize: '11px',
+                fontFamily: 'monospace',
+                flexShrink: 0,
+                textAlign: 'right'
+            }}>
+                {desktopSize.width}×{desktopSize.height}
+            </div>
         </div>
     )
-}
+}
+
+/**
+ * Main Desktop component with WindowProvider
+ */
+export const Desktop = ({ desktopSize, children, ...props }) => {
+    return (
+        <WindowProvider desktopSize={desktopSize}>
+            <DesktopLayout {...props}>
+                <Workspace>
+                    {children}
+                </Workspace>
+                <DesktopTaskbar />
+            </DesktopLayout>
+        </WindowProvider>
+    )
+}

package/src/desktop/index.js

@@ -0,0 +1,7 @@
+// Desktop Components - Window management system for web applications
+export { Desktop, Workspace, DesktopTaskbar } from './desktop'
+export { Window } from './window'
+
+// Window Management
+export { WindowManager } from './WindowManager'
+export { WindowProvider, useWindows, useWindow, useCreateWindow, useWindowStats } from './WindowContext'

package/src/desktop/window.css

@@ -1,58 +1,251 @@
+/* Window Component Styles */
+
 .window {
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
-    min-width: 20rem;
-    min-height: 15rem;
-    resize: both;
-    background-color: rgb(227, 227, 227);
-    display: grid;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     overflow: hidden;
-    resize: both;
+    user-select: none;
 }
 
-.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:focus-within {
+    border-color: #1976d2;
+    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3);
 }
 
-.window>header {
-    grid-area: header;
-    padding: .3rem .3rem 0 0;
+/* Window states */
+.window--maximized {
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.window--dragging {
+    pointer-events: none;
+}
+
+.window--dragging * {
+    pointer-events: none !important;
+}
+
+/* Allow clicks on window controls even during drag */
+.window--dragging .window__control {
+    pointer-events: auto !important;
+}
+
+/* Window Header */
+.window__header {
+    background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
+    border-bottom: 1px solid #dee2e6;
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    min-height: 32px;
+}
+
+.window__header:hover {
+    background: linear-gradient(to bottom, #f1f3f4, #e8eaed);
+}
+
+.window__header:active {
+    background: linear-gradient(to bottom, #e8eaed, #dadce0);
+}
+
+/* Title Bar */
+.window__title-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+}
+
+.window__icon {
+    font-size: 16px;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.window__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    white-space: nowrap;
     overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Window Controls */
+.window__controls {
+    display: flex;
+    gap: 4px;
+    flex-shrink: 0;
+}
+
+.window__control {
+    width: 24px;
+    height: 24px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: #666;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+}
+
+.window__control:hover {
+    background: rgba(0, 0, 0, 0.1);
+    color: #333;
 }
 
-.window>header>label {
+.window__control:active {
+    background: rgba(0, 0, 0, 0.2);
+    transform: scale(0.95);
+}
+
+.window__control--minimize:hover {
+    background: #ffc107;
+    color: white;
+}
+
+.window__control--maximize:hover {
+    background: #28a745;
+    color: white;
+}
+
+.window__control--close:hover {
+    background: #dc3545;
+    color: white;
+}
+
+/* Toolbar */
+.window__toolbar {
+    background: #f8f9fa;
+    border-bottom: 1px solid #dee2e6;
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 40px;
+}
+
+/* Content */
+.window__content {
     flex: 1;
+    overflow: auto;
+    background: white;
+}
+
+/* Status Bar */
+.window__status-bar {
+    background: #f8f9fa;
+    border-top: 1px solid #dee2e6;
+    padding: 4px 12px;
+    font-size: 12px;
+    color: #666;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 24px;
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+    .window {
+        background: #2d3748;
+        border-color: #4a5568;
+        color: #e2e8f0;
+    }
+
+    .window__header {
+        background: linear-gradient(to bottom, #4a5568, #2d3748);
+        border-bottom-color: #4a5568;
+    }
+
+    .window__title {
+        color: #e2e8f0;
+    }
+
+    .window__control {
+        color: #a0aec0;
+    }
+
+    .window__control:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #e2e8f0;
+    }
+
+    .window__toolbar,
+    .window__status-bar {
+        background: #4a5568;
+        border-color: #2d3748;
+        color: #e2e8f0;
+    }
+
+    .window__content {
+        background: #2d3748;
+    }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .window__header {
+        padding: 6px 8px;
+        min-height: 28px;
+    }
+
+    .window__title {
+        font-size: 13px;
+    }
+
+    .window__control {
+        width: 20px;
+        height: 20px;
+        font-size: 12px;
+    }
+
+    .window__toolbar {
+        padding: 6px 8px;
+        min-height: 36px;
+    }
+
+    .window__status-bar {
+        padding: 3px 8px;
+        font-size: 11px;
+        min-height: 20px;
+    }
 }
 
-.window>nav {
-    grid-area: nav;
+/* Animation for window operations */
+.window {
+    transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
-.window>menu {
-    grid-area: menu;
-    padding: 0;
+.window--maximized {
+    transition: all 0.3s ease;
 }
 
-.window>main {
-    grid-area: main;
-    padding: .5rem;
-    overflow: hidden;
-    border: solid 1px var(--divider-color);
+.window--dragging {
+    transition: none !important;
 }
 
-.window>aside {
-    grid-area: aside;
+/* Focus ring for accessibility */
+.window__control:focus {
+    outline: 2px solid #1976d2;
+    outline-offset: 2px;
 }
 
-.window>footer {
-    grid-area: footer;
-}
+/* Disable text selection during drag */
+.window--dragging * {
+    user-select: none !important;
+}