ywana-core8 0.2.20 → 0.2.21

package/dist/index.modern.js

@@ -1666,26 +1666,43 @@ const Menu = (props) => {
   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] = 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] = useContext(MenuContext);
+  const { id, icon, label, meta, disabled = false, size, onSelect: onSelect2 } = props;
+  const context = 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();
@@ -1694,7 +1711,7 @@ const MenuItem = (props) => {
   }
   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" });
@@ -32077,6 +32094,52 @@ class WindowManager {
     });
     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
    */
@@ -32153,6 +32216,8 @@ const WindowProvider = ({ children, desktopSize }) => {
     // 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
@@ -32753,7 +32818,7 @@ const FloatingElementsRenderer = () => {
     ))
   )));
 };
-const ApplicationMenu = ({ isOpen, onClose }) => {
+const LaunchPad = ({ isOpen, onClose }) => {
   const appManager = useAppManager();
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedCategory, setSelectedCategory] = useState("all");
@@ -32822,10 +32887,10 @@ 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 ${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"
     },
@@ -32833,7 +32898,7 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
   ), /* @__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"
     },
@@ -32841,7 +32906,7 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
   ), /* @__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"
     },
@@ -32849,12 +32914,12 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
   ), /* @__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,
@@ -32862,12 +32927,12 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
       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"
     },
@@ -32877,33 +32942,33 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
     "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() {
@@ -33184,48 +33249,221 @@ const defaultDesktopConfig = {
   ]
 };
 const defaultAppManager = new AppManager();
-const AppContext = createContext();
-const useApplicationMenu = () => {
-  const context = useContext(AppContext);
+const DesktopContext = createContext();
+const useLaunchPad = () => {
+  const context = 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 = useContext(AppContext);
+  const context = 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 = useContext(DesktopContext);
+  if (!context) {
+    throw new Error("useDesktopOverlays must be used within DesktopProvider");
+  }
+  return context.overlays;
+};
+const useDesktopTheme = () => {
+  const context = 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] = useState(false);
+  const [isLaunchPadOpen, setIsLaunchPadOpen] = useState(false);
+  const [currentTheme, setCurrentTheme] = useState(initialTheme);
+  const [overlays, setOverlays] = useState([]);
+  const overlayIdCounter = useRef(0);
   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);
+  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 = useRef(null);
   const { windowManager } = useWindows();
+  const { current: theme } = useDesktopTheme();
   useEffect(() => {
     let currentSize = { width: 1200, height: 750 };
     const measureWorkspace = () => {
@@ -33282,6 +33520,67 @@ const Workspace = ({ children }) => {
     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();
@@ -33296,10 +33595,12 @@ const DesktopTaskbar = () => {
     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) {
@@ -33325,7 +33626,6 @@ const DesktopTaskbar = () => {
   };
   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",
@@ -33407,71 +33707,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 = 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,
@@ -33480,7 +33801,7 @@ const Desktop = ({
   ...props
 }) => {
   return /* @__PURE__ */ React.createElement(
-    AppProvider,
+    DesktopProvider,
     {
       desktopConfig
     },
@@ -43264,8 +43585,6 @@ export {
   ActionButton,
   ActionsCell,
   AppManager,
-  AppProvider,
-  ApplicationMenu,
   Avatar,
   Button,
   ButtonExamples,
@@ -43300,6 +43619,7 @@ export {
   DateRange,
   DateRange2,
   Desktop,
+  DesktopProvider,
   DesktopTaskbar,
   Dialog,
   DropDown,
@@ -43334,6 +43654,7 @@ export {
   LOGIN_API,
   LOGIN_CONTEXT,
   LOGIN_DICTIONARY,
+  LaunchPad,
   LinearProgress,
   List,
   ListEditor,
@@ -43428,9 +43749,11 @@ export {
   isEmpty,
   isFunction,
   useAppManager,
-  useApplicationMenu,
   useCreateWindow,
+  useDesktopOverlays,
+  useDesktopTheme,
   useHashPage,
+  useLaunchPad,
   useWindow,
   useWindowContextMenus,
   useWindowDialogs,