ywana-core8 0.2.6 → 0.2.9

package/dist/index.umd.js

@@ -1988,7 +1988,9 @@
       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",
@@ -31711,6 +31713,7 @@ const rows = [
       this.windows = /* @__PURE__ */ new Map();
       this.activeWindowId = null;
       this.nextZIndex = 1e3;
+      this.maxZIndex = 9999;
       this.listeners = /* @__PURE__ */ new Set();
       this.desktopSize = desktopSize;
     }
@@ -31772,7 +31775,7 @@ const rows = [
         size,
         minimized: false,
         maximized: false,
-        zIndex: this.nextZIndex++,
+        zIndex: Math.min(this.nextZIndex++, this.maxZIndex),
         ...config
       };
       this.windows.set(window2.id, window2);
@@ -31791,7 +31794,7 @@ const rows = [
       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;
@@ -31827,7 +31830,10 @@ const rows = [
       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;
@@ -31879,7 +31885,7 @@ const rows = [
       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))
@@ -31915,7 +31921,7 @@ const rows = [
       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);
         }
@@ -31950,7 +31956,7 @@ const rows = [
       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);
@@ -31975,8 +31981,8 @@ const rows = [
       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;
@@ -31989,7 +31995,7 @@ const rows = [
       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
@@ -32010,6 +32016,19 @@ const rows = [
         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 = React.createContext(null);
   const WindowProvider = ({ children, desktopSize }) => {
@@ -32034,8 +32053,10 @@ const rows = [
       }
     }, [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,
@@ -32177,6 +32198,86 @@ const rows = [
       };
       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);
+    };
     React.useEffect(() => {
       if (isDragging) {
         document.addEventListener("mousemove", handleMouseMove);
@@ -32191,6 +32292,18 @@ const rows = [
         };
       }
     }, [isDragging]);
+    React.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);
@@ -32225,6 +32338,7 @@ const rows = [
       "window",
       maximized && "window--maximized",
       isDragging && "window--dragging",
+      isResizing && "window--resizing",
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ React.createElement(
@@ -32274,15 +32388,67 @@ const rows = [
       ),
       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] = React.useState("");
     const [selectedCategory, setSelectedCategory] = React.useState("all");
     const [apps, setApps] = React.useState([]);
     const [categories, setCategories] = React.useState([]);
+    const [viewMode, setViewMode] = React.useState("list");
+    const [isCondensed, setIsCondensed] = React.useState(true);
     const searchInputRef = React.useRef(null);
     const { createWindow } = useWindows();
     React.useEffect(() => {
@@ -32344,7 +32510,31 @@ const rows = [
       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",
@@ -32352,7 +32542,7 @@ const rows = [
         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,
@@ -32362,151 +32552,52 @@ const rows = [
         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
@@ -32626,6 +32717,160 @@ const rows = [
       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 = React.createContext();
   const useApplicationMenu = () => {
@@ -32642,8 +32887,17 @@ const rows = [
     }
     return context.appManager;
   };
-  const AppProvider = ({ children, appManager = defaultAppManager }) => {
+  const AppProvider = ({
+    children,
+    desktopConfig = defaultDesktopConfig
+  }) => {
+    const appManager = new AppManager();
     const [isApplicationMenuOpen, setIsApplicationMenuOpen] = React.useState(false);
+    React.useEffect(() => {
+      if (appManager.getAllApps().length === 0 && desktopConfig) {
+        AppLoader.load(appManager, desktopConfig);
+      }
+    }, [appManager, desktopConfig]);
     const value = {
       // Application Menu state
       applicationMenu: {
@@ -32657,14 +32911,14 @@ const rows = [
     };
     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 = React.useRef(null);
     const { windowManager } = useWindows();
     React.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
@@ -32675,10 +32929,10 @@ const rows = [
           }
         }
       };
-      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();
@@ -32703,7 +32957,7 @@ const rows = [
   };
   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,
@@ -32717,6 +32971,9 @@ const rows = [
     )));
   };
   const DesktopTaskbar = () => {
+    console.log("DesktopTaskbar render");
+    const windowsContext = useWindows();
+    console.log("useWindows result:", windowsContext);
     const {
       createWindow,
       windows,
@@ -32724,26 +32981,14 @@ const rows = [
       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);
@@ -32766,11 +33011,7 @@ const rows = [
         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",
@@ -32778,44 +33019,16 @@ const rows = [
       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",
@@ -32876,6 +33089,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",
@@ -32885,16 +33152,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 = React.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, rules, onChange }) => {
     const form = content.form();