ywana-core8 0.2.6 → 0.2.8

package/package.json

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

package/src/desktop/ApplicationMenu.css

@@ -1,18 +1,19 @@
-/* ApplicationMenu - Full-screen overlay styles */
+/* ApplicationMenu - Positioned over workspace only */
 
 .application-menu-overlay {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     right: 0;
-    bottom: 0;
+    bottom: 0; /* Covers entire workspace container */
     background: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(8px);
-    z-index: 10000;
+    z-index: 10000; /* Always above all windows */
     display: flex;
     align-items: center;
     justify-content: center;
     animation: fadeIn 0.2s ease-out;
+    pointer-events: auto; /* Ensure menu is clickable */
 }
 
 @keyframes fadeIn {
@@ -29,11 +30,15 @@
     border-radius: 12px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     width: 90%;
-    max-width: 900px;
-    height: 80%;
-    max-height: 700px;
-    display: flex;
-    flex-direction: column;
+    max-width: 1000px;
+    height: 90%; /* Use most of workspace height */
+    max-height: 100%; /* Constrained by workspace container */
+    display: grid;
+    grid-template-rows: auto auto 1fr;
+    grid-template-areas:
+        "header"
+        "search"
+        "main";
     overflow: hidden;
     animation: slideIn 0.3s ease-out;
 }
@@ -51,6 +56,7 @@
 
 /* Header */
 .application-menu__header {
+    grid-area: header;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -84,6 +90,7 @@
 
 /* Search */
 .application-menu__search {
+    grid-area: search;
     padding: 16px 24px;
     border-bottom: 1px solid #e0e0e0;
 }
@@ -102,51 +109,116 @@
     border-color: #1976d2;
 }
 
+/* Main Grid Layout */
+.application-menu__main {
+    grid-area: main;
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    grid-template-areas: "sidebar content";
+    height: 100%;
+    overflow: hidden;
+}
+
+/* Sidebar */
+.application-menu__sidebar {
+    grid-area: sidebar;
+    background: #f8f9fa;
+    border-right: 1px solid #e0e0e0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
 /* Categories */
 .application-menu__categories {
-    display: flex;
-    gap: 8px;
-    padding: 16px 24px;
-    border-bottom: 1px solid #e0e0e0;
-    background: #f8f9fa;
-    overflow-x: auto;
+    flex: 1;
+    padding: 16px 0;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #ccc transparent;
+}
+
+.application-menu__categories::-webkit-scrollbar {
+    width: 6px;
+}
+
+.application-menu__categories::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.application-menu__categories::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 3px;
+}
+
+.application-menu__categories::-webkit-scrollbar-thumb:hover {
+    background: #999;
 }
 
 .application-menu__category {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    background: #ffffff;
-    border: 1px solid #e0e0e0;
-    border-radius: 20px;
+    gap: 12px;
+    padding: 12px 20px;
+    margin: 2px 8px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
     cursor: pointer;
     font-size: 14px;
-    white-space: nowrap;
+    text-align: left;
     transition: all 0.2s ease;
     color: #666;
+    width: calc(100% - 16px);
 }
 
 .application-menu__category:hover {
-    background: #f0f0f0;
-    border-color: #ccc;
+    background: #e9ecef;
+    color: #333;
 }
 
 .application-menu__category.active {
     background: #1976d2;
-    border-color: #1976d2;
     color: white;
 }
 
 .category-icon {
-    font-size: 16px;
+    font-size: 18px;
+    min-width: 18px;
+}
+
+.category-name {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 /* Content */
 .application-menu__content {
-    flex: 1;
+    grid-area: content;
     overflow-y: auto;
     padding: 24px;
+    scrollbar-width: thin;
+    scrollbar-color: #ccc transparent;
+}
+
+.application-menu__content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.application-menu__content::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+.application-menu__content::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 4px;
+}
+
+.application-menu__content::-webkit-scrollbar-thumb:hover {
+    background: #999;
 }
 
 .application-menu__search-results h3,
@@ -168,8 +240,9 @@
 /* Apps Grid */
 .application-menu__apps-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     gap: 16px;
+    max-width: 100%;
 }
 
 .application-menu__app {
@@ -228,52 +301,78 @@
 @media (max-width: 768px) {
     .application-menu {
         width: 95%;
-        height: 90%;
-        margin: 20px;
+        height: 95%;
+        max-height: 100%; /* Constrained by workspace container */
+        margin: 5px;
     }
-    
+
+    .application-menu__main {
+        grid-template-columns: 160px 1fr;
+    }
+
+    .application-menu__category {
+        padding: 10px 16px;
+        font-size: 13px;
+    }
+
+    .category-icon {
+        font-size: 16px;
+    }
+
     .application-menu__apps-grid {
-        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
         gap: 12px;
     }
-    
+
     .application-menu__app {
         padding: 12px 8px;
     }
-    
+
     .app-icon {
-        font-size: 40px;
+        font-size: 36px;
     }
-    
+
     .app-name {
         font-size: 12px;
     }
-    
-    .application-menu__categories {
-        padding: 12px 16px;
-    }
-    
+
     .application-menu__search,
     .application-menu__content {
         padding: 16px;
     }
 }
 
-/* Scrollbar styling */
-.application-menu__content::-webkit-scrollbar {
-    width: 8px;
-}
+@media (max-width: 480px) {
+    /* ApplicationMenu overlay covers entire workspace on mobile */
 
-.application-menu__content::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 4px;
-}
+    .application-menu__main {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+        grid-template-areas:
+            "sidebar"
+            "content";
+    }
 
-.application-menu__content::-webkit-scrollbar-thumb {
-    background: #c1c1c1;
-    border-radius: 4px;
-}
+    .application-menu__sidebar {
+        border-right: none;
+        border-bottom: 1px solid #e0e0e0;
+    }
 
-.application-menu__content::-webkit-scrollbar-thumb:hover {
-    background: #a8a8a8;
+    .application-menu__categories {
+        display: flex;
+        flex-direction: row;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding: 12px 16px;
+        gap: 8px;
+    }
+
+    .application-menu__category {
+        flex-shrink: 0;
+        white-space: nowrap;
+        margin: 0;
+        width: auto;
+    }
 }
+
+

package/src/desktop/ApplicationMenu.js

@@ -7,6 +7,7 @@ import './ApplicationMenu.css'
  * ApplicationMenu - Full-screen overlay menu for launching applications
  */
 export const ApplicationMenu = ({ isOpen, onClose }) => {
+    console.log('ApplicationMenu render - isOpen:', isOpen, 'onClose:', onClose)
     const appManager = useAppManager()
     const [searchTerm, setSearchTerm] = useState('')
     const [selectedCategory, setSelectedCategory] = useState('all')
@@ -112,7 +113,7 @@ export const ApplicationMenu = ({ isOpen, onClose }) => {
                 {/* Header */}
                 <div className="application-menu__header">
                     <h2>Applications</h2>
-                    <button 
+                    <button
                         className="application-menu__close"
                         onClick={onClose}
                         title="Close menu"
@@ -133,78 +134,83 @@ export const ApplicationMenu = ({ isOpen, onClose }) => {
                     />
                 </div>
 
-                {/* Categories */}
-                <div className="application-menu__categories">
-                    <button
-                        className={`application-menu__category ${selectedCategory === 'all' ? 'active' : ''}`}
-                        onClick={() => handleCategorySelect('all')}
-                    >
-                        <span className="category-icon">📱</span>
-                        All Apps
-                    </button>
-                    {categories.map(category => (
-                        <button
-                            key={category.id}
-                            className={`application-menu__category ${selectedCategory === category.id ? 'active' : ''}`}
-                            onClick={() => handleCategorySelect(category.id)}
-                        >
-                            <span className="category-icon">{category.icon}</span>
-                            {category.name}
-                        </button>
-                    ))}
-                </div>
-
-                {/* Applications Grid */}
-                <div className="application-menu__content">
-                    {searchTerm && (
-                        <div className="application-menu__search-results">
-                            <h3>Search Results ({filteredApps.length})</h3>
-                            <div className="application-menu__apps-grid">
-                                {filteredApps.map(app => (
-                                    <div
-                                        key={app.id}
-                                        className="application-menu__app"
-                                        onClick={() => handleLaunchApp(app)}
-                                        title={app.description}
-                                    >
-                                        <div className="app-icon">{app.icon}</div>
-                                        <div className="app-name">{app.name}</div>
+                {/* Main Grid Layout */}
+                <div className="application-menu__main">
+                    {/* Categories Sidebar */}
+                    <div className="application-menu__sidebar">
+                        <div className="application-menu__categories">
+                            <button
+                                className={`application-menu__category ${selectedCategory === 'all' ? 'active' : ''}`}
+                                onClick={() => handleCategorySelect('all')}
+                            >
+                                <span className="category-icon">📱</span>
+                                <span className="category-name">All Apps</span>
+                            </button>
+                            {categories.map(category => (
+                                <button
+                                    key={category.id}
+                                    className={`application-menu__category ${selectedCategory === category.id ? 'active' : ''}`}
+                                    onClick={() => handleCategorySelect(category.id)}
+                                >
+                                    <span className="category-icon">{category.icon}</span>
+                                    <span className="category-name">{category.name}</span>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Applications Content */}
+                    <div className="application-menu__content">
+                        {searchTerm && (
+                            <div className="application-menu__search-results">
+                                <h3>Search Results ({filteredApps.length})</h3>
+                                <div className="application-menu__apps-grid">
+                                    {filteredApps.map(app => (
+                                        <div
+                                            key={app.id}
+                                            className="application-menu__app"
+                                            onClick={() => handleLaunchApp(app)}
+                                            title={app.description}
+                                        >
+                                            <div className="app-icon">{app.icon}</div>
+                                            <div className="app-name">{app.name}</div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+
+                        {!searchTerm && (
+                            <div className="application-menu__categories-content">
+                                {Object.entries(groupedApps).map(([categoryName, categoryApps]) => (
+                                    <div key={categoryName} className="application-menu__category-section">
+                                        <h3 className="category-title">{categoryName}</h3>
+                                        <div className="application-menu__apps-grid">
+                                            {categoryApps.map(app => (
+                                                <div
+                                                    key={app.id}
+                                                    className="application-menu__app"
+                                                    onClick={() => handleLaunchApp(app)}
+                                                    title={app.description}
+                                                >
+                                                    <div className="app-icon">{app.icon}</div>
+                                                    <div className="app-name">{app.name}</div>
+                                                </div>
+                                            ))}
+                                        </div>
                                     </div>
                                 ))}
                             </div>
-                        </div>
-                    )}
-
-                    {!searchTerm && (
-                        <div className="application-menu__categories-content">
-                            {Object.entries(groupedApps).map(([categoryName, categoryApps]) => (
-                                <div key={categoryName} className="application-menu__category-section">
-                                    <h3 className="category-title">{categoryName}</h3>
-                                    <div className="application-menu__apps-grid">
-                                        {categoryApps.map(app => (
-                                            <div
-                                                key={app.id}
-                                                className="application-menu__app"
-                                                onClick={() => handleLaunchApp(app)}
-                                                title={app.description}
-                                            >
-                                                <div className="app-icon">{app.icon}</div>
-                                                <div className="app-name">{app.name}</div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    )}
+                        )}
 
-                    {filteredApps.length === 0 && (
-                        <div className="application-menu__no-results">
-                            <div style={{ fontSize: '48px', marginBottom: '16px' }}>🔍</div>
-                            <h3>No applications found</h3>
-                            <p>Try adjusting your search or category filter.</p>
-                        </div>
-                    )}
+                        {filteredApps.length === 0 && (
+                            <div className="application-menu__no-results">
+                                <div style={{ fontSize: '48px', marginBottom: '16px' }}>🔍</div>
+                                <h3>No applications found</h3>
+                                <p>Try adjusting your search or category filter.</p>
+                            </div>
+                        )}
+                    </div>
                 </div>
             </div>
         </div>

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,21 @@ 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>Features:</strong></p>
+          <p><strong>New Architecture:</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>✅ <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>
@@ -428,7 +431,79 @@ export const ThemeComparison = () => (
 )
 
 /**
- * Desktop with ApplicationMenu - Advanced with controls
+ * 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>
+    </Desktop>
+  </div>
+)
+
+/**
+ * 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,