ywana-core8 0.2.17 → 0.2.18

package/src/desktop/window.css

@@ -11,6 +11,7 @@
     overflow: hidden;
     user-select: none;
     pointer-events: auto; /* Ensure windows are clickable */
+    position: relative; /* For floating elements positioning */
 }
 
 .window:focus-within {
@@ -256,6 +257,236 @@
     user-select: none !important;
 }
 
+/* Window Instance Context - Floating Elements */
+.window-floating-elements {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 1000;
+}
+
+/* Dialog Styles */
+.window-dialog {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: auto;
+    z-index: 1002;
+}
+
+.window-dialog__content {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    min-width: 300px;
+    max-width: 80%;
+    max-height: 80%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.window-dialog__header {
+    padding: 16px 20px;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #f8f9fa;
+}
+
+.window-dialog__title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+}
+
+.window-dialog__close {
+    background: none;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    color: #666;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+}
+
+.window-dialog__close:hover {
+    background: rgba(0, 0, 0, 0.1);
+    color: #333;
+}
+
+.window-dialog__body {
+    padding: 20px;
+    flex: 1;
+    overflow: auto;
+}
+
+.window-dialog__footer {
+    padding: 16px 20px;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    background: #f8f9fa;
+}
+
+/* Notification Styles */
+.window-notification {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 12px 16px;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    max-width: 300px;
+    pointer-events: auto;
+    z-index: 1003;
+    border-left: 4px solid #007bff;
+    animation: slideInRight 0.3s ease-out;
+}
+
+.window-notification--success { border-left-color: #28a745; }
+.window-notification--warning { border-left-color: #ffc107; }
+.window-notification--error { border-left-color: #dc3545; }
+.window-notification--info { border-left-color: #17a2b8; }
+
+.window-notification__content {
+    flex: 1;
+    min-width: 0;
+}
+
+.window-notification__title {
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 4px;
+    color: #333;
+}
+
+.window-notification__message {
+    font-size: 13px;
+    color: #666;
+    line-height: 1.4;
+}
+
+.window-notification__close {
+    background: none;
+    border: none;
+    font-size: 16px;
+    cursor: pointer;
+    color: #999;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    flex-shrink: 0;
+}
+
+.window-notification__close:hover {
+    background: rgba(0, 0, 0, 0.1);
+    color: #666;
+}
+
+/* Tooltip Styles */
+.window-tooltip {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-size: 12px;
+    max-width: 200px;
+    pointer-events: auto;
+    z-index: 1005;
+    animation: fadeIn 0.15s ease-out;
+}
+
+/* Context Menu Styles */
+.window-context-menu {
+    position: absolute;
+    background: white;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    border: 1px solid #e0e0e0;
+    padding: 4px 0;
+    min-width: 150px;
+    pointer-events: auto;
+    z-index: 1004;
+    animation: fadeIn 0.1s ease-out;
+}
+
+.window-context-menu__item {
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 13px;
+    color: #333;
+    transition: background-color 0.15s ease;
+}
+
+.window-context-menu__item:hover {
+    background: #f8f9fa;
+}
+
+/* Overlay Styles */
+.window-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: auto;
+    z-index: 1001;
+    animation: fadeIn 0.2s ease-out;
+}
+
+.window-overlay__content {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    max-width: 90%;
+    max-height: 90%;
+    overflow: auto;
+    position: relative;
+}
+
+/* Animations */
+@keyframes slideInRight {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
 /* Window Resize Handles */
 .window__resize-handle {
     position: absolute;

package/src/desktop/window.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react'
+import React, { useState, useRef, useEffect, createContext, useContext, useCallback } from 'react'
 import { useWindows } from './WindowContext'
 import './window.css'
 
@@ -315,13 +315,14 @@ export const Window = ({
     ].filter(Boolean).join(' ')
 
     return (
-        <div
-            ref={windowRef}
-            className={windowClasses}
-            style={windowStyle}
-            onClick={handleFocus}
-            {...props}
-        >
+        <WindowInstanceProvider windowId={id}>
+            <div
+                ref={windowRef}
+                className={windowClasses}
+                style={windowStyle}
+                onClick={handleFocus}
+                {...props}
+            >
             {/* Window Header */}
             <div
                 ref={headerRef}
@@ -427,6 +428,338 @@ export const Window = ({
                     />
                 </>
             )}
+
+            {/* Floating Elements Container */}
+            <FloatingElementsRenderer />
+            </div>
+        </WindowInstanceProvider>
+    )
+}
+
+/**
+ * Window Instance Context - for managing floating elements within a window
+ */
+const WindowInstanceContext = createContext(null)
+
+/**
+ * WindowInstanceProvider - provides context for floating elements within a window
+ */
+export const WindowInstanceProvider = ({ windowId, children }) => {
+    const [dialogs, setDialogs] = useState([])
+    const [notifications, setNotifications] = useState([])
+    const [tooltips, setTooltips] = useState([])
+    const [contextMenus, setContextMenus] = useState([])
+    const [overlays, setOverlays] = useState([])
+
+    const idCounterRef = useRef(0)
+
+    const generateId = useCallback(() => {
+        return `${windowId}-element-${++idCounterRef.current}`
+    }, [windowId])
+
+    // Dialog methods
+    const showDialog = useCallback((config) => {
+        const id = generateId()
+        const dialog = {
+            id,
+            type: 'dialog',
+            ...config,
+            createdAt: Date.now(),
+            onClose: () => hideDialog(id)
+        }
+        setDialogs(prev => [...prev, dialog])
+        return id
+    }, [generateId])
+
+    const hideDialog = useCallback((id) => {
+        setDialogs(prev => prev.filter(dialog => dialog.id !== id))
+    }, [])
+
+    const hideAllDialogs = useCallback(() => {
+        setDialogs([])
+    }, [])
+
+    // Notification methods
+    const showNotification = useCallback((config) => {
+        const id = generateId()
+        const notification = {
+            id,
+            type: 'notification',
+            duration: 5000,
+            ...config,
+            createdAt: Date.now(),
+            onClose: () => hideNotification(id)
+        }
+        setNotifications(prev => [...prev, notification])
+
+        if (notification.duration > 0) {
+            setTimeout(() => hideNotification(id), notification.duration)
+        }
+
+        return id
+    }, [generateId])
+
+    const hideNotification = useCallback((id) => {
+        setNotifications(prev => prev.filter(notification => notification.id !== id))
+    }, [])
+
+    const hideAllNotifications = useCallback(() => {
+        setNotifications([])
+    }, [])
+
+    // Tooltip methods
+    const showTooltip = useCallback((config) => {
+        const id = generateId()
+        const tooltip = { id, type: 'tooltip', ...config, createdAt: Date.now() }
+        setTooltips(prev => [...prev, tooltip])
+        return id
+    }, [generateId])
+
+    const hideTooltip = useCallback((id) => {
+        setTooltips(prev => prev.filter(tooltip => tooltip.id !== id))
+    }, [])
+
+    const hideAllTooltips = useCallback(() => {
+        setTooltips([])
+    }, [])
+
+    // Context menu methods
+    const showContextMenu = useCallback((config) => {
+        setContextMenus([]) // Only one at a time
+        const id = generateId()
+        const contextMenu = {
+            id,
+            type: 'contextMenu',
+            ...config,
+            createdAt: Date.now(),
+            onClose: () => hideContextMenu(id)
+        }
+        setContextMenus([contextMenu])
+        return id
+    }, [generateId])
+
+    const hideContextMenu = useCallback((id) => {
+        setContextMenus(prev => prev.filter(menu => menu.id !== id))
+    }, [])
+
+    const hideAllContextMenus = useCallback(() => {
+        setContextMenus([])
+    }, [])
+
+    // Overlay methods
+    const showOverlay = useCallback((config) => {
+        const id = generateId()
+        const overlay = {
+            id,
+            type: 'overlay',
+            ...config,
+            createdAt: Date.now(),
+            onClose: () => hideOverlay(id)
+        }
+        setOverlays(prev => [...prev, overlay])
+        return id
+    }, [generateId])
+
+    const hideOverlay = useCallback((id) => {
+        setOverlays(prev => prev.filter(overlay => overlay.id !== id))
+    }, [])
+
+    const hideAllOverlays = useCallback(() => {
+        setOverlays([])
+    }, [])
+
+    const clearAll = useCallback(() => {
+        setDialogs([])
+        setNotifications([])
+        setTooltips([])
+        setContextMenus([])
+        setOverlays([])
+    }, [])
+
+    const value = {
+        windowId,
+        dialogs, notifications, tooltips, contextMenus, overlays,
+        showDialog, hideDialog, hideAllDialogs,
+        showNotification, hideNotification, hideAllNotifications,
+        showTooltip, hideTooltip, hideAllTooltips,
+        showContextMenu, hideContextMenu, hideAllContextMenus,
+        showOverlay, hideOverlay, hideAllOverlays,
+        clearAll, generateId
+    }
+
+    return (
+        <WindowInstanceContext.Provider value={value}>
+            {children}
+        </WindowInstanceContext.Provider>
+    )
+}
+
+/**
+ * Hook to use the window instance context
+ */
+export const useWindowInstance = () => {
+    const context = useContext(WindowInstanceContext)
+    if (!context) {
+        throw new Error('useWindowInstance must be used within a WindowInstanceProvider')
+    }
+    return context
+}
+
+/**
+ * Specialized hooks for different types of floating elements
+ */
+export const useWindowDialogs = () => {
+    const { dialogs, showDialog, hideDialog, hideAllDialogs } = useWindowInstance()
+    return { dialogs, showDialog, hideDialog, hideAllDialogs }
+}
+
+export const useWindowNotifications = () => {
+    const { notifications, showNotification, hideNotification, hideAllNotifications } = useWindowInstance()
+    return { notifications, showNotification, hideNotification, hideAllNotifications }
+}
+
+export const useWindowTooltips = () => {
+    const { tooltips, showTooltip, hideTooltip, hideAllTooltips } = useWindowInstance()
+    return { tooltips, showTooltip, hideTooltip, hideAllTooltips }
+}
+
+export const useWindowContextMenus = () => {
+    const { contextMenus, showContextMenu, hideContextMenu, hideAllContextMenus } = useWindowInstance()
+    return { contextMenus, showContextMenu, hideContextMenu, hideAllContextMenus }
+}
+
+export const useWindowOverlays = () => {
+    const { overlays, showOverlay, hideOverlay, hideAllOverlays } = useWindowInstance()
+    return { overlays, showOverlay, hideOverlay, hideAllOverlays }
+}
+
+/**
+ * FloatingElementsRenderer - Renders all floating elements for a window
+ */
+const FloatingElementsRenderer = () => {
+    const { dialogs, notifications, tooltips, contextMenus, overlays } = useWindowInstance()
+
+    return (
+        <div className="window-floating-elements">
+            {/* Render Overlays */}
+            {overlays.map(overlay => (
+                <div key={overlay.id} className="window-overlay">
+                    <div className="window-overlay__content">
+                        {overlay.content}
+                        {overlay.showCloseButton !== false && (
+                            <button
+                                className="window-dialog__close"
+                                onClick={() => overlay.onClose && overlay.onClose()}
+                                style={{ position: 'absolute', top: '8px', right: '8px' }}
+                            >
+                                ×
+                            </button>
+                        )}
+                    </div>
+                </div>
+            ))}
+
+            {/* Render Dialogs */}
+            {dialogs.map(dialog => (
+                <div key={dialog.id} className="window-dialog">
+                    <div className="window-dialog__content">
+                        {dialog.title && (
+                            <div className="window-dialog__header">
+                                <h3 className="window-dialog__title">{dialog.title}</h3>
+                                <button
+                                    className="window-dialog__close"
+                                    onClick={() => dialog.onClose && dialog.onClose()}
+                                >
+                                    ×
+                                </button>
+                            </div>
+                        )}
+                        <div className="window-dialog__body">
+                            {dialog.content}
+                        </div>
+                        {dialog.actions && (
+                            <div className="window-dialog__footer">
+                                {dialog.actions}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            ))}
+
+            {/* Render Notifications */}
+            {notifications.map(notification => (
+                <div
+                    key={notification.id}
+                    className={`window-notification window-notification--${notification.type || 'info'}`}
+                    style={{
+                        top: `${16 + notifications.indexOf(notification) * 80}px`
+                    }}
+                >
+                    {notification.icon && (
+                        <div style={{ fontSize: '18px', flexShrink: 0 }}>
+                            {notification.icon}
+                        </div>
+                    )}
+                    <div className="window-notification__content">
+                        {notification.title && (
+                            <div className="window-notification__title">{notification.title}</div>
+                        )}
+                        <div className="window-notification__message">{notification.message}</div>
+                    </div>
+                    <button
+                        className="window-notification__close"
+                        onClick={() => notification.onClose && notification.onClose()}
+                    >
+                        ×
+                    </button>
+                </div>
+            ))}
+
+            {/* Render Tooltips */}
+            {tooltips.map(tooltip => (
+                <div
+                    key={tooltip.id}
+                    className="window-tooltip"
+                    style={{
+                        left: tooltip.x,
+                        top: tooltip.y,
+                        transform: tooltip.position === 'top' ? 'translateX(-50%) translateY(-100%)' : 'translateX(-50%)'
+                    }}
+                >
+                    {tooltip.text}
+                </div>
+            ))}
+
+            {/* Render Context Menus */}
+            {contextMenus.map(menu => (
+                <div
+                    key={menu.id}
+                    className="window-context-menu"
+                    style={{
+                        left: menu.x,
+                        top: menu.y
+                    }}
+                >
+                    {menu.items && menu.items.map((item, index) => (
+                        <div
+                            key={index}
+                            className="window-context-menu__item"
+                            onClick={() => {
+                                item.onClick && item.onClick()
+                                menu.onClose && menu.onClose()
+                            }}
+                        >
+                            {item.icon && <span>{item.icon}</span>}
+                            <span>{item.label}</span>
+                            {item.shortcut && (
+                                <span style={{ marginLeft: 'auto', fontSize: '11px', color: '#999' }}>
+                                    {item.shortcut}
+                                </span>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            ))}
         </div>
     )
 }