ywana-core8 0.2.6 → 0.2.9

package/dist/index.modern.js

@@ -1985,7 +1985,9 @@ const Button = (props) => {
     icon: loading ? "hourglass_empty" : icon,
     size: size === "small" ? "small" : size === "large" ? "normal" : "small",
     disabled: disabled || loading,
-    className: loading ? "loading-icon" : ""
+    className: loading ? "loading-icon" : "",
+    eventPropagation: true
+    // Allow click events to bubble up to button
   };
   return /* @__PURE__ */ React.createElement(
     "button",
@@ -31708,6 +31710,7 @@ class WindowManager {
     this.windows = /* @__PURE__ */ new Map();
     this.activeWindowId = null;
     this.nextZIndex = 1e3;
+    this.maxZIndex = 9999;
     this.listeners = /* @__PURE__ */ new Set();
     this.desktopSize = desktopSize;
   }
@@ -31769,7 +31772,7 @@ class WindowManager {
       size,
       minimized: false,
       maximized: false,
-      zIndex: this.nextZIndex++,
+      zIndex: Math.min(this.nextZIndex++, this.maxZIndex),
       ...config
     };
     this.windows.set(window2.id, window2);
@@ -31788,7 +31791,7 @@ class WindowManager {
     let x = baseX + existingWindows.length * offsetStep;
     let y = baseY + existingWindows.length * offsetStep;
     const maxX = this.desktopSize.width - windowSize.width - 20;
-    const maxY = this.desktopSize.height - windowSize.height - 100;
+    const maxY = this.desktopSize.height - windowSize.height - 20;
     if (x > maxX || y > maxY) {
       const cascadeIndex = existingWindows.length % 8;
       x = baseX + cascadeIndex * 30;
@@ -31824,7 +31827,10 @@ class WindowManager {
     if (window2.minimized) {
       window2.minimized = false;
     }
-    window2.zIndex = this.nextZIndex++;
+    if (this.nextZIndex >= this.maxZIndex) {
+      this.resetZIndexes();
+    }
+    window2.zIndex = Math.min(this.nextZIndex++, this.maxZIndex);
     this.activeWindowId = windowId;
     this.notifyListeners();
     return true;
@@ -31876,7 +31882,7 @@ class WindowManager {
     const minWidth = 200;
     const minHeight = 150;
     const maxWidth = this.desktopSize.width;
-    const maxHeight = this.desktopSize.height - 50;
+    const maxHeight = this.desktopSize.height;
     const constrainedSize = {
       width: Math.max(minWidth, Math.min(size.width || window2.size.width, maxWidth)),
       height: Math.max(minHeight, Math.min(size.height || window2.size.height, maxHeight))
@@ -31912,7 +31918,7 @@ class WindowManager {
     this.windows.forEach((window2) => {
       if (window2.maximized) return;
       const maxX = this.desktopSize.width - window2.size.width;
-      const maxY = this.desktopSize.height - window2.size.height - 50;
+      const maxY = this.desktopSize.height - window2.size.height;
       if (window2.position.x > maxX) {
         window2.position.x = Math.max(0, maxX);
       }
@@ -31947,7 +31953,7 @@ 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);
+    const windowHeight = Math.floor(this.desktopSize.height / rows);
     visibleWindows.forEach((window2, index) => {
       const col = index % cols;
       const row = Math.floor(index / cols);
@@ -31972,8 +31978,8 @@ class WindowManager {
     if (!window2 || window2.maximized) return false;
     window2.position = {
       x: (this.desktopSize.width - window2.size.width) / 2,
-      y: (this.desktopSize.height - window2.size.height - 50) / 2
-      // Space for taskbar
+      y: (this.desktopSize.height - window2.size.height) / 2
+      // Workspace center
     };
     this.notifyListeners();
     return true;
@@ -31986,7 +31992,7 @@ class WindowManager {
     const offsetStep = 20;
     visibleWindows.forEach((window2, index) => {
       const baseX = (this.desktopSize.width - window2.size.width) / 2;
-      const baseY = (this.desktopSize.height - window2.size.height - 50) / 2;
+      const baseY = (this.desktopSize.height - window2.size.height) / 2;
       window2.position = {
         x: baseX + index * offsetStep,
         y: baseY + index * offsetStep
@@ -32007,6 +32013,19 @@ class WindowManager {
       desktopSize: this.desktopSize
     };
   }
+  /**
+   * Reset z-indexes when they reach the maximum
+   */
+  resetZIndexes() {
+    const windows = Array.from(this.windows.values());
+    windows.sort((a, b) => a.zIndex - b.zIndex);
+    this.nextZIndex = 1e3;
+    windows.forEach((window2, index) => {
+      window2.zIndex = this.nextZIndex + index;
+    });
+    this.nextZIndex = 1e3 + windows.length;
+    this.notifyListeners();
+  }
 }
 const WindowContext = createContext(null);
 const WindowProvider = ({ children, desktopSize }) => {
@@ -32031,8 +32050,10 @@ const WindowProvider = ({ children, desktopSize }) => {
     }
   }, [desktopSize]);
   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,
@@ -32174,6 +32195,86 @@ const Window = ({
     };
     updateWindowPosition(id, finalPosition);
   };
+  const handleResizeStart = (e, direction) => {
+    if (!resizable || maximized) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+    setResizeDirection(direction);
+    setResizeStartSize(size);
+    setResizeStartPosition(position);
+    setResizeStartMouse({ x: e.clientX, y: e.clientY });
+    focusWindow(id);
+  };
+  const handleResizeMove = (e) => {
+    if (!isResizing) return;
+    e.preventDefault();
+    const deltaX = e.clientX - resizeStartMouse.x;
+    const deltaY = e.clientY - resizeStartMouse.y;
+    let newSize = { ...resizeStartSize };
+    let newPosition = { ...resizeStartPosition };
+    switch (resizeDirection) {
+      case "n":
+        newSize.height = Math.max(150, resizeStartSize.height - deltaY);
+        newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height);
+        break;
+      case "s":
+        newSize.height = Math.max(150, resizeStartSize.height + deltaY);
+        break;
+      case "e":
+        newSize.width = Math.max(200, resizeStartSize.width + deltaX);
+        break;
+      case "w":
+        newSize.width = Math.max(200, resizeStartSize.width - deltaX);
+        newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width);
+        break;
+      case "ne":
+        newSize.width = Math.max(200, resizeStartSize.width + deltaX);
+        newSize.height = Math.max(150, resizeStartSize.height - deltaY);
+        newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height);
+        break;
+      case "nw":
+        newSize.width = Math.max(200, resizeStartSize.width - deltaX);
+        newSize.height = Math.max(150, resizeStartSize.height - deltaY);
+        newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width);
+        newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height);
+        break;
+      case "se":
+        newSize.width = Math.max(200, resizeStartSize.width + deltaX);
+        newSize.height = Math.max(150, resizeStartSize.height + deltaY);
+        break;
+      case "sw":
+        newSize.width = Math.max(200, resizeStartSize.width - deltaX);
+        newSize.height = Math.max(150, resizeStartSize.height + deltaY);
+        newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width);
+        break;
+    }
+    if (windowRef.current) {
+      windowRef.current.style.width = `${newSize.width}px`;
+      windowRef.current.style.height = `${newSize.height}px`;
+      windowRef.current.style.left = `${newPosition.x}px`;
+      windowRef.current.style.top = `${newPosition.y}px`;
+    }
+  };
+  const handleResizeEnd = () => {
+    if (!isResizing) return;
+    setIsResizing(false);
+    setResizeDirection("");
+    const desktopContainer = windowRef.current?.parentElement;
+    if (!desktopContainer) return;
+    const windowRect = windowRef.current.getBoundingClientRect();
+    const desktopRect = desktopContainer.getBoundingClientRect();
+    const finalSize = {
+      width: windowRect.width,
+      height: windowRect.height
+    };
+    const finalPosition = {
+      x: windowRect.left - desktopRect.left,
+      y: windowRect.top - desktopRect.top
+    };
+    updateWindowSize(id, finalSize);
+    updateWindowPosition(id, finalPosition);
+  };
   useEffect(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
@@ -32188,6 +32289,18 @@ const Window = ({
       };
     }
   }, [isDragging]);
+  useEffect(() => {
+    if (isResizing) {
+      document.addEventListener("mousemove", handleResizeMove);
+      document.addEventListener("mouseup", handleResizeEnd);
+      document.body.style.userSelect = "none";
+      return () => {
+        document.removeEventListener("mousemove", handleResizeMove);
+        document.removeEventListener("mouseup", handleResizeEnd);
+        document.body.style.userSelect = "";
+      };
+    }
+  }, [isResizing]);
   const handleMinimize = (e) => {
     e.stopPropagation();
     minimizeWindow(id, !minimized);
@@ -32222,6 +32335,7 @@ const Window = ({
     "window",
     maximized && "window--maximized",
     isDragging && "window--dragging",
+    isResizing && "window--resizing",
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ React.createElement(
@@ -32271,15 +32385,67 @@ const Window = ({
     ),
     toolbar && /* @__PURE__ */ React.createElement("div", { className: "window__toolbar" }, toolbar),
     /* @__PURE__ */ React.createElement("div", { className: "window__content" }, content || children),
-    statusBar && /* @__PURE__ */ React.createElement("div", { className: "window__status-bar" }, statusBar)
+    statusBar && /* @__PURE__ */ React.createElement("div", { className: "window__status-bar" }, statusBar),
+    resizable && !maximized && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--n",
+        onMouseDown: (e) => handleResizeStart(e, "n")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--s",
+        onMouseDown: (e) => handleResizeStart(e, "s")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--e",
+        onMouseDown: (e) => handleResizeStart(e, "e")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--w",
+        onMouseDown: (e) => handleResizeStart(e, "w")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--ne",
+        onMouseDown: (e) => handleResizeStart(e, "ne")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--nw",
+        onMouseDown: (e) => handleResizeStart(e, "nw")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--se",
+        onMouseDown: (e) => handleResizeStart(e, "se")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--sw",
+        onMouseDown: (e) => handleResizeStart(e, "sw")
+      }
+    ))
   );
 };
 const ApplicationMenu = ({ isOpen, onClose }) => {
+  console.log("ApplicationMenu render - isOpen:", isOpen, "onClose:", onClose);
   const appManager = useAppManager();
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedCategory, setSelectedCategory] = useState("all");
   const [apps, setApps] = useState([]);
   const [categories, setCategories] = useState([]);
+  const [viewMode, setViewMode] = useState("list");
+  const [isCondensed, setIsCondensed] = useState(true);
   const searchInputRef = useRef(null);
   const { createWindow } = useWindows();
   useEffect(() => {
@@ -32341,7 +32507,31 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
     setSearchTerm("");
   };
   if (!isOpen) return null;
-  return /* @__PURE__ */ React.createElement("div", { className: "application-menu-overlay", onClick: onClose }, /* @__PURE__ */ React.createElement("div", { className: "application-menu", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement("div", { className: "application-menu__header" }, /* @__PURE__ */ React.createElement("h2", null, "Applications"), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "application-menu-overlay", onClick: onClose }, /* @__PURE__ */ React.createElement("div", { className: `application-menu ${isCondensed ? "application-menu--condensed" : ""}`, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement("div", { className: "application-menu__header" }, /* @__PURE__ */ React.createElement("div", { className: "application-menu__header-controls" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: `application-menu__view-toggle ${isCondensed ? "active" : ""}`,
+      onClick: () => setIsCondensed(!isCondensed),
+      title: isCondensed ? "Normal view" : "Condensed view"
+    },
+    "⚏"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: `application-menu__view-toggle ${viewMode === "grid" ? "active" : ""}`,
+      onClick: () => setViewMode("grid"),
+      title: "Grid view"
+    },
+    "⊞"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: `application-menu__view-toggle ${viewMode === "list" ? "active" : ""}`,
+      onClick: () => setViewMode("list"),
+      title: "List view"
+    },
+    "☰"
+  ), /* @__PURE__ */ React.createElement(
     "button",
     {
       className: "application-menu__close",
@@ -32349,7 +32539,7 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
       title: "Close menu"
     },
     "×"
-  )), /* @__PURE__ */ React.createElement("div", { className: "application-menu__search" }, /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement("div", { className: "application-menu__search" }, /* @__PURE__ */ React.createElement(
     "input",
     {
       ref: searchInputRef,
@@ -32359,151 +32549,52 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
       onChange: (e) => setSearchTerm(e.target.value),
       className: "application-menu__search-input"
     }
-  )), /* @__PURE__ */ React.createElement("div", { className: "application-menu__categories" }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("div", { className: "application-menu__main" }, /* @__PURE__ */ React.createElement("div", { className: "application-menu__sidebar" }, /* @__PURE__ */ React.createElement("div", { className: "application-menu__categories" }, /* @__PURE__ */ React.createElement(
     "button",
     {
       className: `application-menu__category ${selectedCategory === "all" ? "active" : ""}`,
-      onClick: () => handleCategorySelect("all")
+      onClick: () => handleCategorySelect("all"),
+      title: "All Apps"
     },
     /* @__PURE__ */ React.createElement("span", { className: "category-icon" }, "📱"),
-    "All Apps"
+    /* @__PURE__ */ React.createElement("span", { className: "category-name" }, "All Apps")
   ), categories.map((category) => /* @__PURE__ */ React.createElement(
     "button",
     {
       key: category.id,
       className: `application-menu__category ${selectedCategory === category.id ? "active" : ""}`,
-      onClick: () => handleCategorySelect(category.id)
+      onClick: () => handleCategorySelect(category.id),
+      title: category.name
     },
     /* @__PURE__ */ React.createElement("span", { className: "category-icon" }, category.icon),
-    category.name
-  ))), /* @__PURE__ */ React.createElement("div", { className: "application-menu__content" }, searchTerm && /* @__PURE__ */ React.createElement("div", { className: "application-menu__search-results" }, /* @__PURE__ */ React.createElement("h3", null, "Search Results (", filteredApps.length, ")"), /* @__PURE__ */ React.createElement("div", { className: "application-menu__apps-grid" }, filteredApps.map((app) => /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("span", { className: "category-name" }, category.name)
+  )))), /* @__PURE__ */ React.createElement("div", { className: "application-menu__content" }, searchTerm && /* @__PURE__ */ React.createElement("div", { className: "application-menu__search-results" }, /* @__PURE__ */ React.createElement("h3", null, "Search Results (", filteredApps.length, ")"), /* @__PURE__ */ React.createElement("div", { className: `application-menu__apps-${viewMode}` }, filteredApps.map((app) => /* @__PURE__ */ React.createElement(
     "div",
     {
       key: app.id,
-      className: "application-menu__app",
+      className: `application-menu__app--${viewMode}`,
       onClick: () => handleLaunchApp(app),
       title: app.description
     },
     /* @__PURE__ */ React.createElement("div", { className: "app-icon" }, app.icon),
-    /* @__PURE__ */ React.createElement("div", { className: "app-name" }, app.name)
-  )))), !searchTerm && /* @__PURE__ */ React.createElement("div", { className: "application-menu__categories-content" }, Object.entries(groupedApps).map(([categoryName, categoryApps]) => /* @__PURE__ */ React.createElement("div", { key: categoryName, className: "application-menu__category-section" }, /* @__PURE__ */ React.createElement("h3", { className: "category-title" }, categoryName), /* @__PURE__ */ React.createElement("div", { className: "application-menu__apps-grid" }, categoryApps.map((app) => /* @__PURE__ */ React.createElement(
+    viewMode === "list" ? /* @__PURE__ */ React.createElement("div", { className: "app-info" }, /* @__PURE__ */ React.createElement("div", { className: "app-name" }, app.name), /* @__PURE__ */ React.createElement("div", { className: "app-description" }, app.description)) : /* @__PURE__ */ React.createElement("div", { className: "app-name" }, app.name)
+  )))), !searchTerm && /* @__PURE__ */ React.createElement("div", { className: "application-menu__categories-content" }, Object.entries(groupedApps).map(([categoryName, categoryApps]) => /* @__PURE__ */ React.createElement("div", { key: categoryName, className: "application-menu__category-section" }, /* @__PURE__ */ React.createElement("h3", { className: "category-title" }, categoryName), /* @__PURE__ */ React.createElement("div", { className: `application-menu__apps-${viewMode}` }, categoryApps.map((app) => /* @__PURE__ */ React.createElement(
     "div",
     {
       key: app.id,
-      className: "application-menu__app",
+      className: `application-menu__app--${viewMode}`,
       onClick: () => handleLaunchApp(app),
       title: app.description
     },
     /* @__PURE__ */ React.createElement("div", { className: "app-icon" }, app.icon),
-    /* @__PURE__ */ React.createElement("div", { className: "app-name" }, app.name)
-  )))))), filteredApps.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "application-menu__no-results" }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: "48px", marginBottom: "16px" } }, "🔍"), /* @__PURE__ */ React.createElement("h3", null, "No applications found"), /* @__PURE__ */ React.createElement("p", null, "Try adjusting your search or category filter.")))));
+    viewMode === "list" ? /* @__PURE__ */ React.createElement("div", { className: "app-info" }, /* @__PURE__ */ React.createElement("div", { className: "app-name" }, app.name), /* @__PURE__ */ React.createElement("div", { className: "app-description" }, app.description)) : /* @__PURE__ */ React.createElement("div", { className: "app-name" }, app.name)
+  )))))), filteredApps.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "application-menu__no-results" }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: "48px", marginBottom: "16px" } }, "🔍"), /* @__PURE__ */ React.createElement("h3", null, "No applications found"), /* @__PURE__ */ React.createElement("p", null, "Try adjusting your search or category filter."))))));
 };
 class AppManager {
   constructor() {
     this.applications = /* @__PURE__ */ new Map();
     this.categories = /* @__PURE__ */ new Map();
     this.listeners = /* @__PURE__ */ new Set();
-    this.initializeDefaultApps();
-  }
-  /**
-   * Initialize default applications
-   */
-  initializeDefaultApps() {
-    this.registerApp({
-      id: "file-explorer",
-      name: "File Explorer",
-      description: "Browse and manage files",
-      icon: "📁",
-      category: "System",
-      component: null,
-      // Will be set when registering actual components
-      size: { width: 600, height: 400 },
-      toolbar: null,
-      statusBar: null
-    });
-    this.registerApp({
-      id: "text-editor",
-      name: "Text Editor",
-      description: "Edit text files",
-      icon: "📝",
-      category: "Productivity",
-      component: null,
-      size: { width: 500, height: 350 },
-      toolbar: null,
-      statusBar: null
-    });
-    this.registerApp({
-      id: "calculator",
-      name: "Calculator",
-      description: "Perform calculations",
-      icon: "🧮",
-      category: "Utilities",
-      component: null,
-      size: { width: 300, height: 400 }
-    });
-    this.registerApp({
-      id: "settings",
-      name: "Settings",
-      description: "System configuration",
-      icon: "⚙️",
-      category: "System",
-      component: null,
-      size: { width: 450, height: 300 }
-    });
-    this.registerApp({
-      id: "browser",
-      name: "Web Browser",
-      description: "Browse the internet",
-      icon: "🌐",
-      category: "Internet",
-      component: null,
-      size: { width: 800, height: 500 }
-    });
-    this.registerApp({
-      id: "terminal",
-      name: "Terminal",
-      description: "Command line interface",
-      icon: "💻",
-      category: "Development",
-      component: null,
-      size: { width: 700, height: 400 }
-    });
-    this.registerApp({
-      id: "image-viewer",
-      name: "Image Viewer",
-      description: "View and edit images",
-      icon: "🖼️",
-      category: "Media",
-      component: null,
-      size: { width: 600, height: 500 }
-    });
-    this.registerApp({
-      id: "music-player",
-      name: "Music Player",
-      description: "Play audio files",
-      icon: "🎵",
-      category: "Media",
-      component: null,
-      size: { width: 400, height: 300 }
-    });
-    this.initializeCategories();
-  }
-  /**
-   * Initialize application categories
-   */
-  initializeCategories() {
-    const categoryData = [
-      { id: "system", name: "System", icon: "⚙️", color: "#607d8b" },
-      { id: "productivity", name: "Productivity", icon: "📊", color: "#2196f3" },
-      { id: "utilities", name: "Utilities", icon: "🔧", color: "#ff9800" },
-      { id: "internet", name: "Internet", icon: "🌐", color: "#4caf50" },
-      { id: "development", name: "Development", icon: "💻", color: "#9c27b0" },
-      { id: "media", name: "Media", icon: "🎬", color: "#e91e63" },
-      { id: "games", name: "Games", icon: "🎮", color: "#f44336" }
-    ];
-    categoryData.forEach((category) => {
-      this.categories.set(category.id, category);
-    });
   }
   /**
    * Register a new application
@@ -32623,6 +32714,160 @@ class AppManager {
     return grouped;
   }
 }
+class AppLoader {
+  /**
+   * Load configuration into AppManager
+   * @param {AppManager} appManager - The AppManager instance
+   * @param {Object} config - JSON configuration object
+   * @param {Array} config.categories - Array of category definitions
+   * @param {Array} config.applications - Array of application definitions
+   */
+  static load(appManager, config) {
+    if (!config) {
+      console.warn("AppLoader: No configuration provided");
+      return;
+    }
+    if (config.categories && Array.isArray(config.categories)) {
+      this.loadCategories(appManager, config.categories);
+    }
+    if (config.applications && Array.isArray(config.applications)) {
+      this.loadApplications(appManager, config.applications);
+    }
+  }
+  /**
+   * Load categories from configuration
+   * @param {AppManager} appManager - The AppManager instance
+   * @param {Array} categories - Array of category definitions
+   */
+  static loadCategories(appManager, categories) {
+    categories.forEach((category) => {
+      if (this.validateCategory(category)) {
+        appManager.categories.set(category.id, category);
+      } else {
+        console.warn("AppLoader: Invalid category configuration:", category);
+      }
+    });
+  }
+  /**
+   * Load applications from configuration
+   * @param {AppManager} appManager - The AppManager instance
+   * @param {Array} applications - Array of application definitions
+   */
+  static loadApplications(appManager, applications) {
+    applications.forEach((app) => {
+      if (this.validateApplication(app)) {
+        appManager.registerApp(app);
+      } else {
+        console.warn("AppLoader: Invalid application configuration:", app);
+      }
+    });
+  }
+  /**
+   * Validate category configuration
+   * @param {Object} category - Category definition
+   * @returns {boolean} - True if valid
+   */
+  static validateCategory(category) {
+    return category && typeof category.id === "string" && typeof category.name === "string" && category.id.length > 0 && category.name.length > 0;
+  }
+  /**
+   * Validate application configuration
+   * @param {Object} app - Application definition
+   * @returns {boolean} - True if valid
+   */
+  static validateApplication(app) {
+    return app && typeof app.id === "string" && typeof app.name === "string" && app.id.length > 0 && app.name.length > 0;
+  }
+}
+const defaultDesktopConfig = {
+  categories: [
+    { id: "system", name: "System", icon: "⚙️", color: "#607d8b" },
+    { id: "productivity", name: "Productivity", icon: "📊", color: "#2196f3" },
+    { id: "utilities", name: "Utilities", icon: "🔧", color: "#ff9800" },
+    { id: "internet", name: "Internet", icon: "🌐", color: "#4caf50" },
+    { id: "development", name: "Development", icon: "💻", color: "#9c27b0" },
+    { id: "media", name: "Media", icon: "🎬", color: "#e91e63" },
+    { id: "games", name: "Games", icon: "🎮", color: "#f44336" }
+  ],
+  applications: [
+    {
+      id: "file-explorer",
+      name: "File Explorer",
+      description: "Browse and manage files",
+      icon: "📁",
+      category: "System",
+      component: null,
+      size: { width: 600, height: 400 },
+      toolbar: null,
+      statusBar: null
+    },
+    {
+      id: "text-editor",
+      name: "Text Editor",
+      description: "Edit text files",
+      icon: "📝",
+      category: "Productivity",
+      component: null,
+      size: { width: 500, height: 350 },
+      toolbar: null,
+      statusBar: null
+    },
+    {
+      id: "calculator",
+      name: "Calculator",
+      description: "Perform calculations",
+      icon: "🧮",
+      category: "Utilities",
+      component: null,
+      size: { width: 300, height: 400 }
+    },
+    {
+      id: "settings",
+      name: "Settings",
+      description: "System configuration",
+      icon: "⚙️",
+      category: "System",
+      component: null,
+      size: { width: 450, height: 300 }
+    },
+    {
+      id: "browser",
+      name: "Web Browser",
+      description: "Browse the internet",
+      icon: "🌐",
+      category: "Internet",
+      component: null,
+      size: { width: 800, height: 500 }
+    },
+    {
+      id: "terminal",
+      name: "Terminal",
+      description: "Command line interface",
+      icon: "💻",
+      category: "Development",
+      component: null,
+      size: { width: 700, height: 400 }
+    },
+    {
+      id: "image-viewer",
+      name: "Image Viewer",
+      description: "View and edit images",
+      icon: "🖼️",
+      category: "Media",
+      component: null,
+      size: { width: 600, height: 500 }
+    },
+    {
+      id: "music-player",
+      name: "Music Player",
+      description: "Play audio files",
+      icon: "🎵",
+      category: "Media",
+      component: null,
+      size: { width: 400, height: 300 }
+    }
+  ]
+};
 const defaultAppManager = new AppManager();
 const AppContext = createContext();
 const useApplicationMenu = () => {
@@ -32639,8 +32884,17 @@ const useAppManager = () => {
   }
   return context.appManager;
 };
-const AppProvider = ({ children, appManager = defaultAppManager }) => {
+const AppProvider = ({
+  children,
+  desktopConfig = defaultDesktopConfig
+}) => {
+  const appManager = new AppManager();
   const [isApplicationMenuOpen, setIsApplicationMenuOpen] = useState(false);
+  useEffect(() => {
+    if (appManager.getAllApps().length === 0 && desktopConfig) {
+      AppLoader.load(appManager, desktopConfig);
+    }
+  }, [appManager, desktopConfig]);
   const value = {
     // Application Menu state
     applicationMenu: {
@@ -32654,14 +32908,14 @@ const AppProvider = ({ children, appManager = defaultAppManager }) => {
   };
   return /* @__PURE__ */ React.createElement(AppContext.Provider, { value }, children);
 };
-const DesktopLayout = ({ children, className = "", theme = "windows", ...props }) => {
+const DesktopLayout = ({ children, className = "", theme = "windows", workspaceRef, ...props }) => {
   const desktopRef = useRef(null);
   const { windowManager } = useWindows();
   useEffect(() => {
-    let currentSize = { width: 1200, height: 800 };
-    const measureDesktop = () => {
-      if (desktopRef.current) {
-        const rect = desktopRef.current.getBoundingClientRect();
+    let currentSize = { width: 1200, height: 750 };
+    const measureWorkspace = () => {
+      if (workspaceRef.current) {
+        const rect = workspaceRef.current.getBoundingClientRect();
         const newSize = {
           width: rect.width,
           height: rect.height
@@ -32672,10 +32926,10 @@ const DesktopLayout = ({ children, className = "", theme = "windows", ...props }
         }
       }
     };
-    measureDesktop();
-    const resizeObserver = new ResizeObserver(measureDesktop);
-    if (desktopRef.current) {
-      resizeObserver.observe(desktopRef.current);
+    measureWorkspace();
+    const resizeObserver = new ResizeObserver(measureWorkspace);
+    if (workspaceRef.current) {
+      resizeObserver.observe(workspaceRef.current);
     }
     return () => {
       resizeObserver.disconnect();
@@ -32700,7 +32954,7 @@ const DesktopLayout = ({ children, className = "", theme = "windows", ...props }
 };
 const Workspace = ({ children }) => {
   const { windows } = useWindows();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children, windows.map((window2) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "workspace" }, children, windows.map((window2) => /* @__PURE__ */ React.createElement(
     Window,
     {
       key: window2.id,
@@ -32714,6 +32968,9 @@ const Workspace = ({ children }) => {
   )));
 };
 const DesktopTaskbar = () => {
+  console.log("DesktopTaskbar render");
+  const windowsContext = useWindows();
+  console.log("useWindows result:", windowsContext);
   const {
     createWindow,
     windows,
@@ -32721,26 +32978,14 @@ const DesktopTaskbar = () => {
     activeWindowId,
     focusWindow,
     minimizeWindow,
-    closeWindow
-  } = useWindows();
-  const { open: openApplicationMenu } = useApplicationMenu();
-  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" ? /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ React.createElement("button", { style: { padding: "4px 8px", fontSize: "12px" } }, "File"), /* @__PURE__ */ React.createElement("button", { style: { padding: "4px 8px", fontSize: "12px" } }, "Edit"), /* @__PURE__ */ React.createElement("button", { style: { padding: "4px 8px", fontSize: "12px" } }, "View")) : null,
-      statusBar: randomType.title === "Text Editor" ? /* @__PURE__ */ React.createElement("span", null, "Ready | Line 1, Column 1") : null
-    });
-  };
+    closeWindow,
+    cascadeWindows,
+    tileWindows,
+    centerAllWindows,
+    clearAllWindows
+  } = windowsContext;
+  const { isOpen, toggle } = useApplicationMenu();
+  console.log("DesktopTaskbar - isOpen:", isOpen, "toggle:", toggle);
   const handleWindowClick = (window2) => {
     if (window2.minimized) {
       minimizeWindow(window2.id, false);
@@ -32763,11 +33008,7 @@ const DesktopTaskbar = () => {
       closeWindow(window2.id);
     }
   };
-  return /* @__PURE__ */ React.createElement("div", { style: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
+  return /* @__PURE__ */ React.createElement("div", { className: "desktop-taskbar", style: {
     height: "50px",
     background: "rgba(0,0,0,0.8)",
     display: "flex",
@@ -32775,44 +33016,16 @@ const DesktopTaskbar = () => {
     padding: "0 16px",
     gap: "8px"
   } }, /* @__PURE__ */ React.createElement(
-    "button",
+    ToggleButton,
     {
-      onClick: openApplicationMenu,
-      style: {
-        padding: "8px 16px",
-        background: "#1976d2",
-        color: "white",
-        border: "none",
-        borderRadius: "4px",
-        cursor: "pointer",
-        fontSize: "14px",
-        fontWeight: "bold",
-        flexShrink: 0,
-        display: "flex",
-        alignItems: "center",
-        gap: "6px"
+      checked: isOpen,
+      onToggle: () => {
+        console.log("Start button toggled, current state:", isOpen);
+        toggle();
       },
-      title: "Open application menu"
-    },
-    /* @__PURE__ */ React.createElement("span", { style: { fontSize: "16px" } }, "🚀"),
-    "Start"
-  ), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      onClick: handleCreateWindow,
-      style: {
-        padding: "8px 12px",
-        background: "#666",
-        color: "white",
-        border: "none",
-        borderRadius: "4px",
-        cursor: "pointer",
-        fontSize: "12px",
-        flexShrink: 0
-      },
-      title: "Create random window (for testing)"
-    },
-    "+"
+      icon: "start",
+      label: "Start"
+    }
   ), /* @__PURE__ */ React.createElement("div", { style: {
     width: "1px",
     height: "30px",
@@ -32873,6 +33086,60 @@ Middle click: Close`
       borderRadius: "1px"
     } })
   ))), /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    gap: "4px",
+    alignItems: "center",
+    marginLeft: "auto",
+    marginRight: "8px"
+  } }, /* @__PURE__ */ React.createElement(
+    Icon,
+    {
+      clickable: true,
+      size: "small",
+      action: () => {
+        console.log("Cascade windows clicked!");
+        cascadeWindows();
+      },
+      icon: "view_stream",
+      label: "Cascade"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Icon,
+    {
+      clickable: true,
+      size: "small",
+      action: () => {
+        console.log("Tile windows clicked!");
+        tileWindows();
+      },
+      icon: "view_module",
+      label: "Tile"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Icon,
+    {
+      clickable: true,
+      size: "small",
+      action: () => {
+        console.log("Center all windows clicked!");
+        centerAllWindows();
+      },
+      icon: "center_focus_strong",
+      label: "Center"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Icon,
+    {
+      clickable: true,
+      size: "small",
+      action: () => {
+        console.log("Clear all windows clicked!");
+        clearAllWindows();
+      },
+      icon: "clear_all",
+      label: "Clear"
+    }
+  )), /* @__PURE__ */ React.createElement("div", { style: {
     color: "rgba(255,255,255,0.7)",
     fontSize: "11px",
     fontFamily: "monospace",
@@ -32882,16 +33149,28 @@ Middle click: Close`
 };
 const DesktopInternal = ({ desktopSize, children, ...props }) => {
   const { isOpen, close } = useApplicationMenu();
-  return /* @__PURE__ */ React.createElement(WindowProvider, { desktopSize }, /* @__PURE__ */ React.createElement(DesktopLayout, { ...props }, /* @__PURE__ */ React.createElement(Workspace, null, children), /* @__PURE__ */ React.createElement(DesktopTaskbar, null), /* @__PURE__ */ React.createElement(
+  const workspaceRef = useRef(null);
+  return /* @__PURE__ */ React.createElement(WindowProvider, { desktopSize }, /* @__PURE__ */ React.createElement(DesktopLayout, { workspaceRef, ...props }, /* @__PURE__ */ React.createElement("div", { ref: workspaceRef, className: "desktop__workspace-container" }, /* @__PURE__ */ React.createElement(Workspace, null, children), /* @__PURE__ */ React.createElement(
     ApplicationMenu,
     {
       isOpen,
       onClose: close
     }
-  )));
+  )), /* @__PURE__ */ React.createElement(DesktopTaskbar, null)));
 };
-const Desktop = ({ desktopSize, children, ...props }) => {
-  return /* @__PURE__ */ React.createElement(AppProvider, null, /* @__PURE__ */ React.createElement(DesktopInternal, { desktopSize, ...props }, children));
+const Desktop = ({
+  desktopSize,
+  children,
+  desktopConfig,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    AppProvider,
+    {
+      desktopConfig
+    },
+    /* @__PURE__ */ React.createElement(DesktopInternal, { desktopSize, ...props }, children)
+  );
 };
 const ContentForm = ({ content, columns = 1, filter: filter2, rules, onChange }) => {
   const form = content.form();