ywana-core8 0.2.20 → 0.2.21

package/dist/index.umd.js

@@ -1669,26 +1669,43 @@
     return /* @__PURE__ */ React.createElement(MenuContext.Provider, { value: [open, setOpen] }, /* @__PURE__ */ React.createElement("ul", null, children));
   };
   const MenuIcon = (props) => {
-    const { icon = "more_vert", children, align = "left", size = "normal" } = props;
+    const {
+      icon = "more_vert",
+      children,
+      align,
+      // Deprecated, kept for backwards compatibility
+      position = align === "right" ? "bottom-right" : "bottom-left",
+      size = "normal",
+      menuSize = "normal"
+    } = props;
     const [open, setOpen] = React.useState(false);
     function toggle() {
       setOpen(!open);
     }
-    const getAlignClass = (alignment) => {
-      switch (alignment) {
-        case "right":
-          return "alignRight";
-        case "left":
-          return "alignLeft";
-        default:
-          return "alignLeft";
-      }
+    const getPositionClass = (pos) => {
+      const validPositions = [
+        "bottom-left",
+        "bottom-right",
+        "top-left",
+        "top-right",
+        "left",
+        "right",
+        "top",
+        "bottom"
+      ];
+      return validPositions.includes(pos) ? `position-${pos}` : "position-bottom-left";
     };
-    return /* @__PURE__ */ React.createElement(MenuContext.Provider, { value: [open, setOpen] }, /* @__PURE__ */ React.createElement("div", { className: "menu-icon" }, /* @__PURE__ */ React.createElement(Icon, { icon, size, clickable: true, action: toggle }), open ? /* @__PURE__ */ React.createElement("menu", { className: getAlignClass(align) }, children) : null, open ? /* @__PURE__ */ React.createElement("div", { className: "overlay", onClick: toggle }) : null));
+    const menuClasses = [
+      getPositionClass(position),
+      menuSize === "compact" ? "menu-compact" : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ React.createElement(MenuContext.Provider, { value: [open, setOpen, menuSize] }, /* @__PURE__ */ React.createElement("div", { className: "menu-icon" }, /* @__PURE__ */ React.createElement(Icon, { icon, size, clickable: true, action: toggle }), open ? /* @__PURE__ */ React.createElement("menu", { className: menuClasses }, children) : null, open ? /* @__PURE__ */ React.createElement("div", { className: "overlay", onClick: toggle }) : null));
   };
   const MenuItem = (props) => {
-    const { id, icon, label, meta, disabled = false, size = "normal", onSelect: onSelect2 } = props;
-    const [open, setOpen] = React.useContext(MenuContext);
+    const { id, icon, label, meta, disabled = false, size, onSelect: onSelect2 } = props;
+    const context = React.useContext(MenuContext);
+    const [open, setOpen, menuSize] = Array.isArray(context) ? context : [context, null, "normal"];
+    const iconSize = size || (menuSize === "compact" ? "small" : "normal");
     function select() {
       if (!disabled) {
         if (onSelect2) onSelect2();
@@ -1697,7 +1714,7 @@
     }
     const style = disabled ? "disabled" : "";
     const labelTxt = label ? /* @__PURE__ */ React.createElement(Text, { format: TEXTFORMATS.STRING }, label) : null;
-    return /* @__PURE__ */ React.createElement("li", { className: `menu-item ${style}`, onClick: select }, icon ? /* @__PURE__ */ React.createElement(Icon, { icon, size }) : null, /* @__PURE__ */ React.createElement("label", null, labelTxt), meta ? /* @__PURE__ */ React.createElement("div", { className: "meta" }, meta) : null);
+    return /* @__PURE__ */ React.createElement("li", { className: `menu-item ${style}`, onClick: select }, icon ? /* @__PURE__ */ React.createElement(Icon, { icon, size: iconSize }) : null, /* @__PURE__ */ React.createElement("label", null, labelTxt), meta ? /* @__PURE__ */ React.createElement("div", { className: "meta" }, meta) : null);
   };
   const MenuSeparator = (props) => {
     return /* @__PURE__ */ React.createElement("li", { className: "menu-separator" });
@@ -32080,6 +32097,52 @@ const rows = [
       });
       this.notifyListeners();
     }
+    /**
+     * Arrange windows in columns
+     */
+    arrangeWindowsInColumns() {
+      const visibleWindows = this.getVisibleWindows().filter((w) => !w.maximized);
+      if (visibleWindows.length === 0) return;
+      const cols = visibleWindows.length;
+      const windowWidth = Math.floor(this.desktopSize.width / cols);
+      const windowHeight = this.desktopSize.height;
+      const padding = 5;
+      visibleWindows.forEach((window2, index) => {
+        window2.position = {
+          x: index * windowWidth + padding,
+          y: padding
+        };
+        window2.size = {
+          width: windowWidth - padding * 2,
+          height: windowHeight - padding * 2
+        };
+        window2.maximized = false;
+      });
+      this.notifyListeners();
+    }
+    /**
+     * Arrange windows in rows
+     */
+    arrangeWindowsInRows() {
+      const visibleWindows = this.getVisibleWindows().filter((w) => !w.maximized);
+      if (visibleWindows.length === 0) return;
+      const rows = visibleWindows.length;
+      const windowWidth = this.desktopSize.width;
+      const windowHeight = Math.floor(this.desktopSize.height / rows);
+      const padding = 5;
+      visibleWindows.forEach((window2, index) => {
+        window2.position = {
+          x: padding,
+          y: index * windowHeight + padding
+        };
+        window2.size = {
+          width: windowWidth - padding * 2,
+          height: windowHeight - padding * 2
+        };
+        window2.maximized = false;
+      });
+      this.notifyListeners();
+    }
     /**
      * Get statistics
      */
@@ -32156,6 +32219,8 @@ const rows = [
       // Layout functions
       cascadeWindows: () => windowManagerRef.current.cascadeWindows(),
       tileWindows: () => windowManagerRef.current.tileWindows(),
+      arrangeWindowsInColumns: () => windowManagerRef.current.arrangeWindowsInColumns(),
+      arrangeWindowsInRows: () => windowManagerRef.current.arrangeWindowsInRows(),
       centerWindow: (id) => windowManagerRef.current.centerWindow(id),
       centerAllWindows: () => windowManagerRef.current.centerAllWindows(),
       // Utility functions
@@ -32756,7 +32821,7 @@ const rows = [
       ))
     )));
   };
-  const ApplicationMenu = ({ isOpen, onClose }) => {
+  const LaunchPad = ({ isOpen, onClose }) => {
     const appManager = useAppManager();
     const [searchTerm, setSearchTerm] = React.useState("");
     const [selectedCategory, setSelectedCategory] = React.useState("all");
@@ -32825,10 +32890,10 @@ 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 ${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(
+    return /* @__PURE__ */ React.createElement("div", { className: `launchpad ${isCondensed ? "launchpad--condensed" : ""}` }, /* @__PURE__ */ React.createElement("div", { className: "launchpad__header" }, /* @__PURE__ */ React.createElement("div", { className: "launchpad__header-controls" }, /* @__PURE__ */ React.createElement(
       "button",
       {
-        className: `application-menu__view-toggle ${isCondensed ? "active" : ""}`,
+        className: `launchpad__view-toggle ${isCondensed ? "active" : ""}`,
         onClick: () => setIsCondensed(!isCondensed),
         title: isCondensed ? "Normal view" : "Condensed view"
       },
@@ -32836,7 +32901,7 @@ const rows = [
     ), /* @__PURE__ */ React.createElement(
       "button",
       {
-        className: `application-menu__view-toggle ${viewMode === "grid" ? "active" : ""}`,
+        className: `launchpad__view-toggle ${viewMode === "grid" ? "active" : ""}`,
         onClick: () => setViewMode("grid"),
         title: "Grid view"
       },
@@ -32844,7 +32909,7 @@ const rows = [
     ), /* @__PURE__ */ React.createElement(
       "button",
       {
-        className: `application-menu__view-toggle ${viewMode === "list" ? "active" : ""}`,
+        className: `launchpad__view-toggle ${viewMode === "list" ? "active" : ""}`,
         onClick: () => setViewMode("list"),
         title: "List view"
       },
@@ -32852,12 +32917,12 @@ const rows = [
     ), /* @__PURE__ */ React.createElement(
       "button",
       {
-        className: "application-menu__close",
+        className: "launchpad__close",
         onClick: onClose,
         title: "Close menu"
       },
       "×"
-    ))), /* @__PURE__ */ React.createElement("div", { className: "application-menu__search" }, /* @__PURE__ */ React.createElement(
+    ))), /* @__PURE__ */ React.createElement("div", { className: "launchpad__search" }, /* @__PURE__ */ React.createElement(
       "input",
       {
         ref: searchInputRef,
@@ -32865,12 +32930,12 @@ const rows = [
         placeholder: "Search applications...",
         value: searchTerm,
         onChange: (e) => setSearchTerm(e.target.value),
-        className: "application-menu__search-input"
+        className: "launchpad__search-input"
       }
-    )), /* @__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(
+    )), /* @__PURE__ */ React.createElement("div", { className: "launchpad__main" }, /* @__PURE__ */ React.createElement("div", { className: "launchpad__sidebar" }, /* @__PURE__ */ React.createElement("div", { className: "launchpad__categories" }, /* @__PURE__ */ React.createElement(
       "button",
       {
-        className: `application-menu__category ${selectedCategory === "all" ? "active" : ""}`,
+        className: `launchpad__category ${selectedCategory === "all" ? "active" : ""}`,
         onClick: () => handleCategorySelect("all"),
         title: "All Apps"
       },
@@ -32880,33 +32945,33 @@ const rows = [
       "button",
       {
         key: category.id,
-        className: `application-menu__category ${selectedCategory === category.id ? "active" : ""}`,
+        className: `launchpad__category ${selectedCategory === category.id ? "active" : ""}`,
         onClick: () => handleCategorySelect(category.id),
         title: category.name
       },
       /* @__PURE__ */ React.createElement("span", { className: "category-icon" }, category.icon),
       /* @__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(
+    )))), /* @__PURE__ */ React.createElement("div", { className: "launchpad__content" }, searchTerm && /* @__PURE__ */ React.createElement("div", { className: "launchpad__search-results" }, /* @__PURE__ */ React.createElement("h3", null, "Search Results (", filteredApps.length, ")"), /* @__PURE__ */ React.createElement("div", { className: `launchpad__apps-${viewMode}` }, filteredApps.map((app) => /* @__PURE__ */ React.createElement(
       "div",
       {
         key: app.id,
-        className: `application-menu__app--${viewMode}`,
+        className: `launchpad__app--${viewMode}`,
         onClick: () => handleLaunchApp(app),
         title: app.description
       },
       /* @__PURE__ */ React.createElement("div", { className: "app-icon" }, app.icon),
       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(
+    )))), !searchTerm && /* @__PURE__ */ React.createElement("div", { className: "launchpad__categories-content" }, Object.entries(groupedApps).map(([categoryName, categoryApps]) => /* @__PURE__ */ React.createElement("div", { key: categoryName, className: "launchpad__category-section" }, /* @__PURE__ */ React.createElement("h3", { className: "category-title" }, categoryName), /* @__PURE__ */ React.createElement("div", { className: `launchpad__apps-${viewMode}` }, categoryApps.map((app) => /* @__PURE__ */ React.createElement(
       "div",
       {
         key: app.id,
-        className: `application-menu__app--${viewMode}`,
+        className: `launchpad__app--${viewMode}`,
         onClick: () => handleLaunchApp(app),
         title: app.description
       },
       /* @__PURE__ */ React.createElement("div", { className: "app-icon" }, app.icon),
       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."))))));
+    )))))), filteredApps.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "launchpad__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() {
@@ -33187,48 +33252,221 @@ const rows = [
     ]
   };
   const defaultAppManager = new AppManager();
-  const AppContext = React.createContext();
-  const useApplicationMenu = () => {
-    const context = React.useContext(AppContext);
+  const DesktopContext = React.createContext();
+  const useLaunchPad = () => {
+    const context = React.useContext(DesktopContext);
     if (!context) {
-      throw new Error("useApplicationMenu must be used within AppProvider");
+      throw new Error("useLaunchPad must be used within DesktopProvider");
     }
-    return context.applicationMenu;
+    return context.launchPad;
   };
   const useAppManager = () => {
-    const context = React.useContext(AppContext);
+    const context = React.useContext(DesktopContext);
     if (!context) {
-      throw new Error("useAppManager must be used within AppProvider");
+      throw new Error("useAppManager must be used within DesktopProvider");
     }
     return context.appManager;
   };
-  const AppProvider = ({
+  const useDesktopOverlays = () => {
+    const context = React.useContext(DesktopContext);
+    if (!context) {
+      throw new Error("useDesktopOverlays must be used within DesktopProvider");
+    }
+    return context.overlays;
+  };
+  const useDesktopTheme = () => {
+    const context = React.useContext(DesktopContext);
+    if (!context) {
+      throw new Error("useDesktopTheme must be used within DesktopProvider");
+    }
+    return context.theme;
+  };
+  const DesktopProvider = ({
     children,
-    desktopConfig = defaultDesktopConfig
+    desktopConfig = defaultDesktopConfig,
+    initialTheme = "windows"
   }) => {
     const appManager = new AppManager();
-    const [isApplicationMenuOpen, setIsApplicationMenuOpen] = React.useState(false);
+    const [isLaunchPadOpen, setIsLaunchPadOpen] = React.useState(false);
+    const [currentTheme, setCurrentTheme] = React.useState(initialTheme);
+    const [overlays, setOverlays] = React.useState([]);
+    const overlayIdCounter = React.useRef(0);
     React.useEffect(() => {
       if (appManager.getAllApps().length === 0 && desktopConfig) {
         AppLoader.load(appManager, desktopConfig);
       }
     }, [appManager, desktopConfig]);
+    const showOverlay = (config) => {
+      const id = `overlay-${overlayIdCounter.current++}`;
+      const overlay = {
+        id,
+        content: config.content,
+        onClose: config.onClose || (() => hideOverlay(id)),
+        backdrop: config.backdrop !== false,
+        backdropBlur: config.backdropBlur !== false,
+        closeOnBackdrop: config.closeOnBackdrop !== false,
+        closeOnEscape: config.closeOnEscape !== false,
+        zIndex: config.zIndex || 9500,
+        animation: config.animation || "fade",
+        animationDuration: config.animationDuration || 300,
+        position: config.position || "center",
+        customPosition: config.customPosition,
+        size: config.size || "auto",
+        customSize: config.customSize,
+        padding: config.padding,
+        margin: config.margin,
+        isClosing: false
+      };
+      setOverlays((prev) => [...prev, overlay]);
+      return id;
+    };
+    const hideOverlay = (id, animation) => {
+      setOverlays((prev) => prev.map(
+        (o) => o.id === id ? { ...o, isClosing: true, exitAnimation: animation } : o
+      ));
+      const overlay = overlays.find((o) => o.id === id);
+      const duration = overlay?.animationDuration || 300;
+      setTimeout(() => {
+        setOverlays((prev) => prev.filter((o) => o.id !== id));
+      }, duration);
+    };
+    const hideAllOverlays = () => {
+      setOverlays([]);
+    };
+    const updateOverlay = (id, updates) => {
+      setOverlays((prev) => prev.map(
+        (o) => o.id === id ? { ...o, ...updates } : o
+      ));
+    };
     const value = {
-      // Application Menu state
-      applicationMenu: {
-        isOpen: isApplicationMenuOpen,
-        open: () => setIsApplicationMenuOpen(true),
-        close: () => setIsApplicationMenuOpen(false),
-        toggle: () => setIsApplicationMenuOpen(!isApplicationMenuOpen)
+      // LaunchPad state
+      launchPad: {
+        isOpen: isLaunchPadOpen,
+        open: () => setIsLaunchPadOpen(true),
+        close: () => setIsLaunchPadOpen(false),
+        toggle: () => setIsLaunchPadOpen(!isLaunchPadOpen)
       },
       // App Manager instance
-      appManager
+      appManager,
+      // Desktop Overlays API
+      overlays: {
+        items: overlays,
+        show: showOverlay,
+        hide: hideOverlay,
+        hideAll: hideAllOverlays,
+        update: updateOverlay
+      },
+      // Desktop Theme API
+      theme: {
+        current: currentTheme,
+        set: setCurrentTheme,
+        available: ["windows", "macos", "gnome", "windowsxp", "windows98", "nextstep", "macintosh", "msx"]
+      }
+    };
+    return /* @__PURE__ */ React.createElement(DesktopContext.Provider, { value }, children);
+  };
+  const DesktopOverlay = ({
+    id,
+    content,
+    zIndex,
+    onClose,
+    backdrop,
+    backdropBlur,
+    closeOnBackdrop,
+    closeOnEscape,
+    animation,
+    animationDuration,
+    position,
+    customPosition,
+    size,
+    customSize,
+    padding,
+    margin,
+    isClosing,
+    exitAnimation
+  }) => {
+    const { hide } = useDesktopOverlays();
+    const handleBackdropClick = () => {
+      if (closeOnBackdrop && onClose) {
+        onClose();
+      }
     };
-    return /* @__PURE__ */ React.createElement(AppContext.Provider, { value }, children);
+    React.useEffect(() => {
+      if (!closeOnEscape) return;
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape") {
+          onClose();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [closeOnEscape, onClose]);
+    const overlayClasses = [
+      "desktop-overlay",
+      backdrop ? "desktop-overlay--backdrop" : "",
+      backdropBlur ? "desktop-overlay--blur" : "",
+      `desktop-overlay--position-${position}`,
+      `desktop-overlay--size-${size}`,
+      isClosing ? `desktop-overlay--exit-${exitAnimation || animation}` : `desktop-overlay--enter-${animation}`
+    ].filter(Boolean).join(" ");
+    const overlayStyle = {
+      zIndex,
+      animationDuration: `${animationDuration}ms`,
+      ...customPosition
+    };
+    const contentStyle = {
+      padding,
+      margin,
+      ...customSize
+    };
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: overlayClasses,
+        style: overlayStyle,
+        onClick: handleBackdropClick
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "desktop-overlay__content",
+          style: contentStyle,
+          onClick: (e) => e.stopPropagation()
+        },
+        content
+      )
+    );
+  };
+  const DesktopOverlayLayer = () => {
+    const { items } = useDesktopOverlays();
+    const { isOpen, close } = useLaunchPad();
+    return /* @__PURE__ */ React.createElement("div", { className: "desktop-overlay-layer" }, isOpen && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "desktop-overlay desktop-overlay--backdrop desktop-overlay--blur desktop-overlay--launchpad desktop-overlay--enter-fade",
+        style: { zIndex: 9e3 },
+        onClick: close
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "desktop-overlay__content desktop-overlay__content--launchpad",
+          onClick: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ React.createElement(LaunchPad, { isOpen, onClose: close })
+      )
+    ), items.map((overlay) => /* @__PURE__ */ React.createElement(
+      DesktopOverlay,
+      {
+        key: overlay.id,
+        ...overlay
+      }
+    )));
   };
-  const DesktopLayout = ({ children, className = "", theme = "windows", workspaceRef, ...props }) => {
+  const DesktopLayout = ({ children, className = "", workspaceRef, ...props }) => {
     const desktopRef = React.useRef(null);
     const { windowManager } = useWindows();
+    const { current: theme } = useDesktopTheme();
     React.useEffect(() => {
       let currentSize = { width: 1200, height: 750 };
       const measureWorkspace = () => {
@@ -33285,6 +33523,67 @@ const rows = [
       window2.content
     )));
   };
+  const ThemeMenu = () => {
+    const { current: currentTheme, set: setTheme, available: availableThemes } = useDesktopTheme();
+    const themeIcons = {
+      "windows": "computer",
+      "macos": "laptop_mac",
+      "gnome": "terminal",
+      "windowsxp": "desktop_windows",
+      "windows98": "computer",
+      "nextstep": "business_center",
+      "macintosh": "desktop_mac",
+      "msx": "videogame_asset"
+    };
+    const themeLabels = {
+      "windows": "Windows 11",
+      "macos": "macOS",
+      "gnome": "GNOME",
+      "windowsxp": "Windows XP",
+      "windows98": "Windows 98",
+      "nextstep": "NeXTSTEP",
+      "macintosh": "Macintosh",
+      "msx": "MSX"
+    };
+    const modernThemes = ["windows", "macos", "gnome"];
+    const retroThemes = ["windowsxp", "windows98", "nextstep", "macintosh", "msx"];
+    return /* @__PURE__ */ React.createElement(
+      MenuIcon,
+      {
+        icon: "palette",
+        size: "small",
+        position: "top-right",
+        menuSize: "compact"
+      },
+      modernThemes.map((theme) => /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          key: theme,
+          icon: themeIcons[theme] || "desktop_windows",
+          label: themeLabels[theme] || theme,
+          meta: currentTheme === theme ? "✓" : "",
+          onSelect: () => {
+            console.log("Theme changed to:", theme);
+            setTheme(theme);
+          }
+        }
+      )),
+      /* @__PURE__ */ React.createElement(MenuSeparator, null),
+      retroThemes.map((theme) => /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          key: theme,
+          icon: themeIcons[theme] || "desktop_windows",
+          label: themeLabels[theme] || theme,
+          meta: currentTheme === theme ? "✓" : "",
+          onSelect: () => {
+            console.log("Theme changed to:", theme);
+            setTheme(theme);
+          }
+        }
+      ))
+    );
+  };
   const DesktopTaskbar = () => {
     console.log("DesktopTaskbar render");
     const windowsContext = useWindows();
@@ -33299,10 +33598,12 @@ const rows = [
       closeWindow,
       cascadeWindows,
       tileWindows,
+      arrangeWindowsInColumns,
+      arrangeWindowsInRows,
       centerAllWindows,
       clearAllWindows
     } = windowsContext;
-    const { isOpen, toggle } = useApplicationMenu();
+    const { isOpen, toggle } = useLaunchPad();
     console.log("DesktopTaskbar - isOpen:", isOpen, "toggle:", toggle);
     const handleWindowClick = (window2) => {
       if (window2.minimized) {
@@ -33328,7 +33629,6 @@ const rows = [
     };
     return /* @__PURE__ */ React.createElement("div", { className: "desktop-taskbar", style: {
       height: "50px",
-      background: "rgba(0,0,0,0.8)",
       display: "flex",
       alignItems: "center",
       padding: "0 16px",
@@ -33410,71 +33710,92 @@ Middle click: Close`
       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,
+      MenuIcon,
       {
-        clickable: true,
+        icon: "window",
         size: "small",
-        action: () => {
-          console.log("Clear all windows clicked!");
-          clearAllWindows();
-        },
-        icon: "clear_all",
-        label: "Clear"
-      }
-    )), /* @__PURE__ */ React.createElement("div", { style: {
+        position: "top-right",
+        menuSize: "compact"
+      },
+      /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          icon: "view_stream",
+          label: "Cascade",
+          onSelect: () => {
+            console.log("Cascade windows clicked!");
+            cascadeWindows();
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          icon: "view_module",
+          label: "Tile",
+          onSelect: () => {
+            console.log("Tile windows clicked!");
+            tileWindows();
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(MenuSeparator, null),
+      /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          icon: "view_week",
+          label: "Columns",
+          onSelect: () => {
+            console.log("Arrange in columns clicked!");
+            arrangeWindowsInColumns();
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          icon: "view_agenda",
+          label: "Rows",
+          onSelect: () => {
+            console.log("Arrange in rows clicked!");
+            arrangeWindowsInRows();
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(MenuSeparator, null),
+      /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          icon: "center_focus_strong",
+          label: "Center All",
+          onSelect: () => {
+            console.log("Center all windows clicked!");
+            centerAllWindows();
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          icon: "clear_all",
+          label: "Clear All",
+          onSelect: () => {
+            console.log("Clear all windows clicked!");
+            clearAllWindows();
+          }
+        }
+      )
+    ), /* @__PURE__ */ React.createElement(ThemeMenu, null)), /* @__PURE__ */ React.createElement("div", { style: {
       color: "rgba(255,255,255,0.7)",
       fontSize: "11px",
       fontFamily: "monospace",
       flexShrink: 0,
       textAlign: "right"
-    } }, desktopSize.width, "×", desktopSize.height));
+    } }, Math.round(desktopSize.width), "×", Math.round(desktopSize.height)));
   };
   const DesktopInternal = ({ desktopSize, children, ...props }) => {
-    const { isOpen, close } = useApplicationMenu();
     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)));
+    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(DesktopOverlayLayer, null)), /* @__PURE__ */ React.createElement(DesktopTaskbar, null)));
   };
   const Desktop = ({
     desktopSize,
@@ -33483,7 +33804,7 @@ Middle click: Close`
     ...props
   }) => {
     return /* @__PURE__ */ React.createElement(
-      AppProvider,
+      DesktopProvider,
       {
         desktopConfig
       },
@@ -43266,8 +43587,6 @@ Middle click: Close`
   exports2.ActionButton = ActionButton;
   exports2.ActionsCell = ActionsCell;
   exports2.AppManager = AppManager;
-  exports2.AppProvider = AppProvider;
-  exports2.ApplicationMenu = ApplicationMenu;
   exports2.Avatar = Avatar;
   exports2.Button = Button;
   exports2.ButtonExamples = ButtonExamples;
@@ -43302,6 +43621,7 @@ Middle click: Close`
   exports2.DateRange = DateRange;
   exports2.DateRange2 = DateRange2;
   exports2.Desktop = Desktop;
+  exports2.DesktopProvider = DesktopProvider;
   exports2.DesktopTaskbar = DesktopTaskbar;
   exports2.Dialog = Dialog;
   exports2.DropDown = DropDown;
@@ -43336,6 +43656,7 @@ Middle click: Close`
   exports2.LOGIN_API = LOGIN_API;
   exports2.LOGIN_CONTEXT = LOGIN_CONTEXT;
   exports2.LOGIN_DICTIONARY = LOGIN_DICTIONARY;
+  exports2.LaunchPad = LaunchPad;
   exports2.LinearProgress = LinearProgress;
   exports2.List = List;
   exports2.ListEditor = ListEditor;
@@ -43430,9 +43751,11 @@ Middle click: Close`
   exports2.isEmpty = isEmpty;
   exports2.isFunction = isFunction;
   exports2.useAppManager = useAppManager;
-  exports2.useApplicationMenu = useApplicationMenu;
   exports2.useCreateWindow = useCreateWindow;
+  exports2.useDesktopOverlays = useDesktopOverlays;
+  exports2.useDesktopTheme = useDesktopTheme;
   exports2.useHashPage = useHashPage;
+  exports2.useLaunchPad = useLaunchPad;
   exports2.useWindow = useWindow;
   exports2.useWindowContextMenus = useWindowContextMenus;
   exports2.useWindowDialogs = useWindowDialogs;