ywana-core8 0.2.5 → 0.2.8

package/src/desktop/Desktop.stories.jsx

@@ -7,7 +7,7 @@ import { defaultAppManager } from './AppManager.js'
  */
 export const BasicDesktop = () => (
   <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
-    <Desktop>
+    <Desktop desktopSize={{ width: 1200, height: 600 }}>
       <div style={{ 
         position: 'absolute', 
         top: '50%', 
@@ -61,7 +61,7 @@ export const CustomSizeDesktop = () => (
  */
 export const DarkDesktop = () => (
   <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
-    <Desktop className="desktop--dark">
+    <Desktop className="desktop--dark" desktopSize={{ width: 1200, height: 600 }}>
       <div style={{ 
         position: 'absolute', 
         top: '50%', 
@@ -88,7 +88,7 @@ export const DarkDesktop = () => (
  */
 export const LightDesktop = () => (
   <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
-    <Desktop className="desktop--light">
+    <Desktop className="desktop--light" desktopSize={{ width: 1200, height: 600 }}>
       <div style={{
         position: 'absolute',
         top: '50%',
@@ -238,18 +238,263 @@ export const ApplicationMenuBasic = () => (
         boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
         maxWidth: '400px'
       }}>
-        <h3 style={{ margin: '0 0 15px 0' }}>🚀 Application Menu Demo</h3>
+        <h3 style={{ margin: '0 0 15px 0' }}>🚀 New Layout: Workspace + Menu</h3>
         <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
-          Click the <strong>"Start"</strong> button in the taskbar to open the Application Menu.
-          Browse applications by category and launch them to create windows.
+          Click <strong>"Start"</strong> to open the Application Menu.
+          The new architecture has a <strong>dedicated Workspace</strong> that contains windows,
+          and the <strong>ApplicationMenu overlays only the workspace</strong> (never the taskbar).
+        </p>
+        <div style={{ fontSize: '14px', color: '#666' }}>
+          <p><strong>New Architecture:</strong></p>
+          <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
+            <li>✅ <strong>Workspace container</strong> with proper boundaries</li>
+            <li>✅ <strong>Windows constrained</strong> to workspace area</li>
+            <li>✅ <strong>ApplicationMenu over workspace</strong> only</li>
+            <li>✅ <strong>Taskbar always accessible</strong> and separate</li>
+            <li>✅ Categories sidebar with independent scrolling</li>
+            <li>✅ Responsive grid layout</li>
+          </ul>
+        </div>
+      </div>
+    </Desktop>
+  </div>
+)
+
+/**
+ * Windows Theme Desktop
+ */
+export const WindowsTheme = () => (
+  <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
+    <Desktop theme="windows" desktopSize={{ width: 1200, height: 600 }}>
+      <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' }}>🪟 Windows Theme</h3>
+        <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
+          Windows-inspired desktop theme with Segoe UI font, blue gradient background,
+          and Windows-style window controls and taskbar.
         </p>
         <div style={{ fontSize: '14px', color: '#666' }}>
           <p><strong>Features:</strong></p>
           <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
-            <li>Browse apps by category</li>
-            <li>Search functionality</li>
-            <li>Launch applications as windows</li>
-            <li>Full-screen overlay menu</li>
+            <li>Windows 11 inspired design</li>
+            <li>Segoe UI font family</li>
+            <li>Blue gradient background</li>
+            <li>Windows-style window controls</li>
+          </ul>
+        </div>
+      </div>
+    </Desktop>
+  </div>
+)
+
+/**
+ * macOS Theme Desktop
+ */
+export const MacOSTheme = () => (
+  <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
+    <Desktop theme="macos" desktopSize={{ width: 1200, height: 600 }}>
+      <div style={{
+        position: 'absolute',
+        top: '20px',
+        left: '20px',
+        background: 'rgba(255,255,255,0.9)',
+        padding: '20px',
+        borderRadius: '16px',
+        boxShadow: '0 8px 25px rgba(0,0,0,0.15)',
+        maxWidth: '400px',
+        backdropFilter: 'blur(20px)'
+      }}>
+        <h3 style={{ margin: '0 0 15px 0' }}>🍎 macOS Theme</h3>
+        <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
+          macOS-inspired desktop theme with SF Pro Display font, purple gradient background,
+          and signature traffic light window controls.
+        </p>
+        <div style={{ fontSize: '14px', color: '#666' }}>
+          <p><strong>Features:</strong></p>
+          <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
+            <li>macOS Big Sur/Monterey design</li>
+            <li>SF Pro Display font family</li>
+            <li>Purple gradient background</li>
+            <li>Traffic light window controls</li>
+          </ul>
+        </div>
+      </div>
+    </Desktop>
+  </div>
+)
+
+/**
+ * Linux Theme Desktop
+ */
+export const LinuxTheme = () => (
+  <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
+    <Desktop theme="linux" desktopSize={{ width: 1200, height: 600 }}>
+      <div style={{
+        position: 'absolute',
+        top: '20px',
+        left: '20px',
+        background: 'rgba(255,255,255,0.9)',
+        padding: '20px',
+        borderRadius: '12px',
+        boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
+        maxWidth: '400px'
+      }}>
+        <h3 style={{ margin: '0 0 15px 0' }}>🐧 Linux Theme</h3>
+        <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
+          Linux GNOME-inspired desktop theme with Ubuntu font, dark gradient background,
+          and colorful circular window controls.
+        </p>
+        <div style={{ fontSize: '14px', color: '#666' }}>
+          <p><strong>Features:</strong></p>
+          <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
+            <li>GNOME/Ubuntu inspired design</li>
+            <li>Ubuntu/Cantarell font family</li>
+            <li>Dark gradient background</li>
+            <li>Colorful circular controls</li>
+          </ul>
+        </div>
+      </div>
+    </Desktop>
+  </div>
+)
+
+/**
+ * Theme Comparison - All three themes side by side
+ */
+export const ThemeComparison = () => (
+  <div style={{
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gap: '20px',
+    padding: '20px',
+    height: '600px'
+  }}>
+    <div style={{ position: 'relative', overflow: 'hidden', border: '2px solid #ccc', borderRadius: '8px' }}>
+      <div style={{
+        position: 'absolute',
+        top: '5px',
+        left: '5px',
+        background: 'rgba(0,0,0,0.7)',
+        color: 'white',
+        padding: '4px 8px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        zIndex: 1000
+      }}>
+        Windows
+      </div>
+      <Desktop theme="windows" desktopSize={{ width: 400, height: 560 }} />
+    </div>
+
+    <div style={{ position: 'relative', overflow: 'hidden', border: '2px solid #ccc', borderRadius: '8px' }}>
+      <div style={{
+        position: 'absolute',
+        top: '5px',
+        left: '5px',
+        background: 'rgba(0,0,0,0.7)',
+        color: 'white',
+        padding: '4px 8px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        zIndex: 1000
+      }}>
+        macOS
+      </div>
+      <Desktop theme="macos" desktopSize={{ width: 400, height: 560 }} />
+    </div>
+
+    <div style={{ position: 'relative', overflow: 'hidden', border: '2px solid #ccc', borderRadius: '8px' }}>
+      <div style={{
+        position: 'absolute',
+        top: '5px',
+        left: '5px',
+        background: 'rgba(0,0,0,0.7)',
+        color: 'white',
+        padding: '4px 8px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        zIndex: 1000
+      }}>
+        Linux
+      </div>
+      <Desktop theme="linux" desktopSize={{ width: 400, height: 560 }} />
+    </div>
+  </div>
+)
+
+/**
+ * Resizable Windows Demo
+ */
+export const ResizableWindows = () => (
+  <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
+    <Desktop desktopSize={{ width: 1200, height: 600 }}>
+      <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' }}>🔄 Resizable Windows</h3>
+        <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
+          Create windows and try resizing them by dragging the edges and corners.
+          The WindowManager gets notified of size changes when you finish resizing.
+        </p>
+        <div style={{ fontSize: '14px', color: '#666' }}>
+          <p><strong>Resize Features:</strong></p>
+          <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
+            <li>Drag edges to resize horizontally/vertically</li>
+            <li>Drag corners to resize diagonally</li>
+            <li>Minimum size constraints (200x150)</li>
+            <li>WindowManager updates on resize end</li>
+            <li>Visual feedback with hover effects</li>
+          </ul>
+        </div>
+      </div>
+    </Desktop>
+  </div>
+)
+
+/**
+ * Resizable Windows with macOS Theme
+ */
+export const ResizableWindowsMacOS = () => (
+  <div style={{ height: '600px', width: '100%', position: 'relative', overflow: 'hidden' }}>
+    <Desktop theme="macos" desktopSize={{ width: 1200, height: 600 }}>
+      <div style={{
+        position: 'absolute',
+        top: '20px',
+        left: '20px',
+        background: 'rgba(255,255,255,0.9)',
+        padding: '20px',
+        borderRadius: '16px',
+        boxShadow: '0 8px 25px rgba(0,0,0,0.15)',
+        maxWidth: '400px',
+        backdropFilter: 'blur(20px)'
+      }}>
+        <h3 style={{ margin: '0 0 15px 0' }}>🍎 macOS Resizable Windows</h3>
+        <p style={{ margin: '0 0 15px 0', lineHeight: '1.5' }}>
+          Experience window resizing with the beautiful macOS theme.
+          Notice the traffic light controls and smooth animations.
+        </p>
+        <div style={{ fontSize: '14px', color: '#666' }}>
+          <p><strong>macOS Features:</strong></p>
+          <ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
+            <li>Traffic light window controls</li>
+            <li>Smooth resize animations</li>
+            <li>macOS-style blur effects</li>
+            <li>SF Pro Display typography</li>
           </ul>
         </div>
       </div>
@@ -258,7 +503,7 @@ export const ApplicationMenuBasic = () => (
 )
 
 /**
- * Desktop with ApplicationMenu - Advanced with controls
+ * Desktop with ApplicationMenu - Workspace Boundaries Demo
  */
 export const ApplicationMenuAdvanced = () => {
   // Setup custom apps

package/src/desktop/WindowContext.js

@@ -44,9 +44,12 @@ export const WindowProvider = ({ children, desktopSize }) => {
 
     // Don't render until WindowManager is initialized
     if (!state || !windowManagerRef.current) {
+        console.log('WindowProvider not ready - state:', state, 'windowManager:', windowManagerRef.current)
         return null
     }
 
+    console.log('WindowProvider ready - providing context')
+
     const value = {
         // Current state
         windows: state.windows,
@@ -63,6 +66,7 @@ export const WindowProvider = ({ children, desktopSize }) => {
         minimizeWindow: (id, minimize) => windowManagerRef.current.minimizeWindow(id, minimize),
         maximizeWindow: (id, maximize) => windowManagerRef.current.maximizeWindow(id, maximize),
         updateWindowPosition: (id, position) => windowManagerRef.current.updateWindowPosition(id, position),
+        updateWindowSize: (id, size) => windowManagerRef.current.updateWindowSize(id, size),
         
         // Window queries
         getWindow: (id) => windowManagerRef.current.getWindow(id),

package/src/desktop/WindowManager.js

@@ -6,6 +6,7 @@ export class WindowManager {
         this.windows = new Map()
         this.activeWindowId = null
         this.nextZIndex = 1000
+        this.maxZIndex = 9999 // Maximum z-index for windows (ApplicationMenu is 10000)
         this.listeners = new Set()
         this.desktopSize = desktopSize
     }
@@ -77,7 +78,7 @@ export class WindowManager {
             size: size,
             minimized: false,
             maximized: false,
-            zIndex: this.nextZIndex++,
+            zIndex: Math.min(this.nextZIndex++, this.maxZIndex),
             ...config
         }
 
@@ -101,9 +102,9 @@ export class WindowManager {
         let x = baseX + (existingWindows.length * offsetStep)
         let y = baseY + (existingWindows.length * offsetStep)
 
-        // Check if it goes out of desktop bounds
+        // Check if it goes out of workspace bounds
         const maxX = this.desktopSize.width - windowSize.width - 20
-        const maxY = this.desktopSize.height - windowSize.height - 100 // Space for taskbar
+        const maxY = this.desktopSize.height - windowSize.height - 20 // Workspace boundaries
 
         // If out of bounds, restart cascade
         if (x > maxX || y > maxY) {
@@ -152,8 +153,11 @@ export class WindowManager {
             window.minimized = false
         }
 
-        // Bring to front
-        window.zIndex = this.nextZIndex++
+        // Bring to front (but never above ApplicationMenu)
+        if (this.nextZIndex >= this.maxZIndex) {
+            this.resetZIndexes()
+        }
+        window.zIndex = Math.min(this.nextZIndex++, this.maxZIndex)
         this.activeWindowId = windowId
 
         this.notifyListeners()
@@ -210,6 +214,29 @@ export class WindowManager {
         return true
     }
 
+    /**
+     * Update window size
+     */
+    updateWindowSize(windowId, size) {
+        const window = this.windows.get(windowId)
+        if (!window) return false
+
+        // Ensure minimum size constraints
+        const minWidth = 200
+        const minHeight = 150
+        const maxWidth = this.desktopSize.width
+        const maxHeight = this.desktopSize.height // Workspace boundaries
+
+        const constrainedSize = {
+            width: Math.max(minWidth, Math.min(size.width || window.size.width, maxWidth)),
+            height: Math.max(minHeight, Math.min(size.height || window.size.height, maxHeight))
+        }
+
+        window.size = { ...window.size, ...constrainedSize }
+        this.notifyListeners()
+        return true
+    }
+
     /**
      * Get all windows
      */
@@ -241,7 +268,7 @@ export class WindowManager {
             if (window.maximized) return // Maximized windows don't need repositioning
 
             const maxX = this.desktopSize.width - window.size.width
-            const maxY = this.desktopSize.height - window.size.height - 50 // Space for taskbar
+            const maxY = this.desktopSize.height - window.size.height // Workspace boundaries
 
             // Adjust position if out of bounds
             if (window.position.x > maxX) {
@@ -283,7 +310,7 @@ export class WindowManager {
         const cols = Math.ceil(Math.sqrt(visibleWindows.length))
         const rows = Math.ceil(visibleWindows.length / cols)
         const windowWidth = Math.floor(this.desktopSize.width / cols)
-        const windowHeight = Math.floor((this.desktopSize.height - 80) / rows) // Space for taskbar
+        const windowHeight = Math.floor(this.desktopSize.height / rows) // Workspace boundaries
 
         visibleWindows.forEach((window, index) => {
             const col = index % cols
@@ -312,7 +339,7 @@ export class WindowManager {
 
         window.position = {
             x: (this.desktopSize.width - window.size.width) / 2,
-            y: (this.desktopSize.height - window.size.height - 50) / 2 // Space for taskbar
+            y: (this.desktopSize.height - window.size.height) / 2 // Workspace center
         }
 
         this.notifyListeners()
@@ -328,7 +355,7 @@ export class WindowManager {
 
         visibleWindows.forEach((window, index) => {
             const baseX = (this.desktopSize.width - window.size.width) / 2
-            const baseY = (this.desktopSize.height - window.size.height - 50) / 2
+            const baseY = (this.desktopSize.height - window.size.height) / 2
 
             window.position = {
                 x: baseX + (index * offsetStep),
@@ -352,4 +379,22 @@ export class WindowManager {
             desktopSize: this.desktopSize
         }
     }
+
+    /**
+     * Reset z-indexes when they reach the maximum
+     */
+    resetZIndexes() {
+        const windows = Array.from(this.windows.values())
+        // Sort windows by current z-index
+        windows.sort((a, b) => a.zIndex - b.zIndex)
+
+        // Reassign z-indexes starting from 1000
+        this.nextZIndex = 1000
+        windows.forEach((window, index) => {
+            window.zIndex = this.nextZIndex + index
+        })
+        this.nextZIndex = 1000 + windows.length
+
+        this.notifyListeners()
+    }
 }