ywana-core8 0.2.5 → 0.2.8

package/dist/index.js

@@ -1987,7 +1987,9 @@ const Button = (props) => {
     icon: loading ? "hourglass_empty" : icon,
     size: size === "small" ? "small" : size === "large" ? "normal" : "small",
     disabled: disabled || loading,
-    className: loading ? "loading-icon" : ""
+    className: loading ? "loading-icon" : "",
+    eventPropagation: true
+    // Allow click events to bubble up to button
   };
   return /* @__PURE__ */ React.createElement(
     "button",
@@ -31710,6 +31712,7 @@ class WindowManager {
     this.windows = /* @__PURE__ */ new Map();
     this.activeWindowId = null;
     this.nextZIndex = 1e3;
+    this.maxZIndex = 9999;
     this.listeners = /* @__PURE__ */ new Set();
     this.desktopSize = desktopSize;
   }
@@ -31771,7 +31774,7 @@ class WindowManager {
       size,
       minimized: false,
       maximized: false,
-      zIndex: this.nextZIndex++,
+      zIndex: Math.min(this.nextZIndex++, this.maxZIndex),
       ...config
     };
     this.windows.set(window2.id, window2);
@@ -31790,7 +31793,7 @@ class WindowManager {
     let x = baseX + existingWindows.length * offsetStep;
     let y = baseY + existingWindows.length * offsetStep;
     const maxX = this.desktopSize.width - windowSize.width - 20;
-    const maxY = this.desktopSize.height - windowSize.height - 100;
+    const maxY = this.desktopSize.height - windowSize.height - 20;
     if (x > maxX || y > maxY) {
       const cascadeIndex = existingWindows.length % 8;
       x = baseX + cascadeIndex * 30;
@@ -31826,7 +31829,10 @@ class WindowManager {
     if (window2.minimized) {
       window2.minimized = false;
     }
-    window2.zIndex = this.nextZIndex++;
+    if (this.nextZIndex >= this.maxZIndex) {
+      this.resetZIndexes();
+    }
+    window2.zIndex = Math.min(this.nextZIndex++, this.maxZIndex);
     this.activeWindowId = windowId;
     this.notifyListeners();
     return true;
@@ -31869,6 +31875,24 @@ class WindowManager {
     this.notifyListeners();
     return true;
   }
+  /**
+   * Update window size
+   */
+  updateWindowSize(windowId, size) {
+    const window2 = this.windows.get(windowId);
+    if (!window2) return false;
+    const minWidth = 200;
+    const minHeight = 150;
+    const maxWidth = this.desktopSize.width;
+    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))
+    };
+    window2.size = { ...window2.size, ...constrainedSize };
+    this.notifyListeners();
+    return true;
+  }
   /**
    * Get all windows
    */
@@ -31896,7 +31920,7 @@ class WindowManager {
     this.windows.forEach((window2) => {
       if (window2.maximized) return;
       const maxX = this.desktopSize.width - window2.size.width;
-      const maxY = this.desktopSize.height - window2.size.height - 50;
+      const maxY = this.desktopSize.height - window2.size.height;
       if (window2.position.x > maxX) {
         window2.position.x = Math.max(0, maxX);
       }
@@ -31931,7 +31955,7 @@ class WindowManager {
     const cols = Math.ceil(Math.sqrt(visibleWindows.length));
     const rows = Math.ceil(visibleWindows.length / cols);
     const windowWidth = Math.floor(this.desktopSize.width / cols);
-    const windowHeight = Math.floor((this.desktopSize.height - 80) / rows);
+    const windowHeight = Math.floor(this.desktopSize.height / rows);
     visibleWindows.forEach((window2, index) => {
       const col = index % cols;
       const row = Math.floor(index / cols);
@@ -31956,8 +31980,8 @@ class WindowManager {
     if (!window2 || window2.maximized) return false;
     window2.position = {
       x: (this.desktopSize.width - window2.size.width) / 2,
-      y: (this.desktopSize.height - window2.size.height - 50) / 2
-      // Space for taskbar
+      y: (this.desktopSize.height - window2.size.height) / 2
+      // Workspace center
     };
     this.notifyListeners();
     return true;
@@ -31970,7 +31994,7 @@ class WindowManager {
     const offsetStep = 20;
     visibleWindows.forEach((window2, index) => {
       const baseX = (this.desktopSize.width - window2.size.width) / 2;
-      const baseY = (this.desktopSize.height - window2.size.height - 50) / 2;
+      const baseY = (this.desktopSize.height - window2.size.height) / 2;
       window2.position = {
         x: baseX + index * offsetStep,
         y: baseY + index * offsetStep
@@ -31991,6 +32015,19 @@ class WindowManager {
       desktopSize: this.desktopSize
     };
   }
+  /**
+   * Reset z-indexes when they reach the maximum
+   */
+  resetZIndexes() {
+    const windows = Array.from(this.windows.values());
+    windows.sort((a, b) => a.zIndex - b.zIndex);
+    this.nextZIndex = 1e3;
+    windows.forEach((window2, index) => {
+      window2.zIndex = this.nextZIndex + index;
+    });
+    this.nextZIndex = 1e3 + windows.length;
+    this.notifyListeners();
+  }
 }
 const WindowContext = React.createContext(null);
 const WindowProvider = ({ children, desktopSize }) => {
@@ -32015,8 +32052,10 @@ const WindowProvider = ({ children, desktopSize }) => {
     }
   }, [desktopSize]);
   if (!state || !windowManagerRef.current) {
+    console.log("WindowProvider not ready - state:", state, "windowManager:", windowManagerRef.current);
     return null;
   }
+  console.log("WindowProvider ready - providing context");
   const value = {
     // Current state
     windows: state.windows,
@@ -32031,6 +32070,7 @@ const WindowProvider = ({ children, desktopSize }) => {
     minimizeWindow: (id, minimize) => windowManagerRef.current.minimizeWindow(id, minimize),
     maximizeWindow: (id, maximize) => windowManagerRef.current.maximizeWindow(id, maximize),
     updateWindowPosition: (id, position) => windowManagerRef.current.updateWindowPosition(id, position),
+    updateWindowSize: (id, size) => windowManagerRef.current.updateWindowSize(id, size),
     // Window queries
     getWindow: (id) => windowManagerRef.current.getWindow(id),
     getAllWindows: () => windowManagerRef.current.getAllWindows(),
@@ -32093,11 +32133,16 @@ const Window = ({
 }) => {
   const windowRef = React.useRef(null);
   const headerRef = React.useRef(null);
-  const { getWindow, updateWindowPosition, closeWindow, minimizeWindow, maximizeWindow, focusWindow } = useWindows();
+  const { getWindow, updateWindowPosition, updateWindowSize, closeWindow, minimizeWindow, maximizeWindow, focusWindow } = useWindows();
   const windowData = getWindow(id);
   const [isDragging, setIsDragging] = React.useState(false);
   const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
   const [dragStartPosition, setDragStartPosition] = React.useState({ x: 0, y: 0 });
+  const [isResizing, setIsResizing] = React.useState(false);
+  const [resizeDirection, setResizeDirection] = React.useState("");
+  const [resizeStartSize, setResizeStartSize] = React.useState({ width: 0, height: 0 });
+  const [resizeStartPosition, setResizeStartPosition] = React.useState({ x: 0, y: 0 });
+  const [resizeStartMouse, setResizeStartMouse] = React.useState({ x: 0, y: 0 });
   if (!windowData) {
     return null;
   }
@@ -32152,6 +32197,86 @@ const Window = ({
     };
     updateWindowPosition(id, finalPosition);
   };
+  const handleResizeStart = (e, direction) => {
+    if (!resizable || maximized) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+    setResizeDirection(direction);
+    setResizeStartSize(size);
+    setResizeStartPosition(position);
+    setResizeStartMouse({ x: e.clientX, y: e.clientY });
+    focusWindow(id);
+  };
+  const handleResizeMove = (e) => {
+    if (!isResizing) return;
+    e.preventDefault();
+    const deltaX = e.clientX - resizeStartMouse.x;
+    const deltaY = e.clientY - resizeStartMouse.y;
+    let newSize = { ...resizeStartSize };
+    let newPosition = { ...resizeStartPosition };
+    switch (resizeDirection) {
+      case "n":
+        newSize.height = Math.max(150, resizeStartSize.height - deltaY);
+        newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height);
+        break;
+      case "s":
+        newSize.height = Math.max(150, resizeStartSize.height + deltaY);
+        break;
+      case "e":
+        newSize.width = Math.max(200, resizeStartSize.width + deltaX);
+        break;
+      case "w":
+        newSize.width = Math.max(200, resizeStartSize.width - deltaX);
+        newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width);
+        break;
+      case "ne":
+        newSize.width = Math.max(200, resizeStartSize.width + deltaX);
+        newSize.height = Math.max(150, resizeStartSize.height - deltaY);
+        newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height);
+        break;
+      case "nw":
+        newSize.width = Math.max(200, resizeStartSize.width - deltaX);
+        newSize.height = Math.max(150, resizeStartSize.height - deltaY);
+        newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width);
+        newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height);
+        break;
+      case "se":
+        newSize.width = Math.max(200, resizeStartSize.width + deltaX);
+        newSize.height = Math.max(150, resizeStartSize.height + deltaY);
+        break;
+      case "sw":
+        newSize.width = Math.max(200, resizeStartSize.width - deltaX);
+        newSize.height = Math.max(150, resizeStartSize.height + deltaY);
+        newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width);
+        break;
+    }
+    if (windowRef.current) {
+      windowRef.current.style.width = `${newSize.width}px`;
+      windowRef.current.style.height = `${newSize.height}px`;
+      windowRef.current.style.left = `${newPosition.x}px`;
+      windowRef.current.style.top = `${newPosition.y}px`;
+    }
+  };
+  const handleResizeEnd = () => {
+    if (!isResizing) return;
+    setIsResizing(false);
+    setResizeDirection("");
+    const desktopContainer = windowRef.current?.parentElement;
+    if (!desktopContainer) return;
+    const windowRect = windowRef.current.getBoundingClientRect();
+    const desktopRect = desktopContainer.getBoundingClientRect();
+    const finalSize = {
+      width: windowRect.width,
+      height: windowRect.height
+    };
+    const finalPosition = {
+      x: windowRect.left - desktopRect.left,
+      y: windowRect.top - desktopRect.top
+    };
+    updateWindowSize(id, finalSize);
+    updateWindowPosition(id, finalPosition);
+  };
   React.useEffect(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
@@ -32166,6 +32291,18 @@ const Window = ({
       };
     }
   }, [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);
@@ -32200,6 +32337,7 @@ const Window = ({
     "window",
     maximized && "window--maximized",
     isDragging && "window--dragging",
+    isResizing && "window--resizing",
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ React.createElement(
@@ -32249,10 +32387,60 @@ const Window = ({
     ),
     toolbar && /* @__PURE__ */ React.createElement("div", { className: "window__toolbar" }, toolbar),
     /* @__PURE__ */ React.createElement("div", { className: "window__content" }, content || children),
-    statusBar && /* @__PURE__ */ React.createElement("div", { className: "window__status-bar" }, statusBar)
+    statusBar && /* @__PURE__ */ React.createElement("div", { className: "window__status-bar" }, statusBar),
+    resizable && !maximized && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--n",
+        onMouseDown: (e) => handleResizeStart(e, "n")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--s",
+        onMouseDown: (e) => handleResizeStart(e, "s")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--e",
+        onMouseDown: (e) => handleResizeStart(e, "e")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--w",
+        onMouseDown: (e) => handleResizeStart(e, "w")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--ne",
+        onMouseDown: (e) => handleResizeStart(e, "ne")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--nw",
+        onMouseDown: (e) => handleResizeStart(e, "nw")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--se",
+        onMouseDown: (e) => handleResizeStart(e, "se")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "window__resize-handle window__resize-handle--sw",
+        onMouseDown: (e) => handleResizeStart(e, "sw")
+      }
+    ))
   );
 };
 const ApplicationMenu = ({ isOpen, onClose }) => {
+  console.log("ApplicationMenu render - isOpen:", isOpen, "onClose:", onClose);
   const appManager = useAppManager();
   const [searchTerm, setSearchTerm] = React.useState("");
   const [selectedCategory, setSelectedCategory] = React.useState("all");
@@ -32337,14 +32525,14 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
       onChange: (e) => setSearchTerm(e.target.value),
       className: "application-menu__search-input"
     }
-  )), /* @__PURE__ */ React.createElement("div", { className: "application-menu__categories" }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("div", { className: "application-menu__main" }, /* @__PURE__ */ React.createElement("div", { className: "application-menu__sidebar" }, /* @__PURE__ */ React.createElement("div", { className: "application-menu__categories" }, /* @__PURE__ */ React.createElement(
     "button",
     {
       className: `application-menu__category ${selectedCategory === "all" ? "active" : ""}`,
       onClick: () => handleCategorySelect("all")
     },
     /* @__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",
     {
@@ -32353,8 +32541,8 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
       onClick: () => handleCategorySelect(category.id)
     },
     /* @__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-grid" }, filteredApps.map((app) => /* @__PURE__ */ React.createElement(
     "div",
     {
       key: app.id,
@@ -32374,7 +32562,7 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
     },
     /* @__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.")))));
+  )))))), 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() {
@@ -32632,14 +32820,14 @@ const AppProvider = ({ children, appManager = defaultAppManager }) => {
   };
   return /* @__PURE__ */ React.createElement(AppContext.Provider, { value }, children);
 };
-const DesktopLayout = ({ children, className = "", ...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
@@ -32650,10 +32838,10 @@ const DesktopLayout = ({ children, className = "", ...props }) => {
         }
       }
     };
-    measureDesktop();
-    const resizeObserver = new ResizeObserver(measureDesktop);
-    if (desktopRef.current) {
-      resizeObserver.observe(desktopRef.current);
+    measureWorkspace();
+    const resizeObserver = new ResizeObserver(measureWorkspace);
+    if (workspaceRef.current) {
+      resizeObserver.observe(workspaceRef.current);
     }
     return () => {
       resizeObserver.disconnect();
@@ -32663,11 +32851,12 @@ const DesktopLayout = ({ children, className = "", ...props }) => {
     e.preventDefault();
     console.log("Desktop context menu at:", e.clientX, e.clientY);
   };
+  const themeClass = `desktop--${theme}`;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: desktopRef,
-      className: `desktop ${className}`,
+      className: `desktop ${themeClass} ${className}`,
       onContextMenu: handleContextMenu,
       ...props
     },
@@ -32677,7 +32866,7 @@ const DesktopLayout = ({ children, className = "", ...props }) => {
 };
 const Workspace = ({ children }) => {
   const { windows } = useWindows();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children, windows.map((window2) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "workspace" }, children, windows.map((window2) => /* @__PURE__ */ React.createElement(
     Window,
     {
       key: window2.id,
@@ -32691,6 +32880,9 @@ const Workspace = ({ children }) => {
   )));
 };
 const DesktopTaskbar = () => {
+  console.log("DesktopTaskbar render");
+  const windowsContext = useWindows();
+  console.log("useWindows result:", windowsContext);
   const {
     createWindow,
     windows,
@@ -32698,26 +32890,14 @@ const DesktopTaskbar = () => {
     activeWindowId,
     focusWindow,
     minimizeWindow,
-    closeWindow
-  } = useWindows();
-  const { open: openApplicationMenu } = useApplicationMenu();
-  const handleCreateWindow = () => {
-    const windowTypes = [
-      { title: "File Explorer", icon: "📁", size: { width: 600, height: 400 } },
-      { title: "Text Editor", icon: "📝", size: { width: 500, height: 350 } },
-      { title: "Calculator", icon: "🧮", size: { width: 300, height: 400 } },
-      { title: "Settings", icon: "⚙️", size: { width: 450, height: 300 } },
-      { title: "Browser", icon: "🌐", size: { width: 800, height: 500 } }
-    ];
-    const randomType = windowTypes[Math.floor(Math.random() * windowTypes.length)];
-    createWindow({
-      title: randomType.title,
-      icon: randomType.icon,
-      size: randomType.size,
-      toolbar: randomType.title === "Text Editor" ? /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ React.createElement("button", { style: { padding: "4px 8px", fontSize: "12px" } }, "File"), /* @__PURE__ */ React.createElement("button", { style: { padding: "4px 8px", fontSize: "12px" } }, "Edit"), /* @__PURE__ */ React.createElement("button", { style: { padding: "4px 8px", fontSize: "12px" } }, "View")) : null,
-      statusBar: randomType.title === "Text Editor" ? /* @__PURE__ */ React.createElement("span", null, "Ready | Line 1, Column 1") : null
-    });
-  };
+    closeWindow,
+    cascadeWindows,
+    tileWindows,
+    centerAllWindows,
+    clearAllWindows
+  } = windowsContext;
+  const { isOpen, toggle } = useApplicationMenu();
+  console.log("DesktopTaskbar - isOpen:", isOpen, "toggle:", toggle);
   const handleWindowClick = (window2) => {
     if (window2.minimized) {
       minimizeWindow(window2.id, false);
@@ -32740,11 +32920,7 @@ const DesktopTaskbar = () => {
       closeWindow(window2.id);
     }
   };
-  return /* @__PURE__ */ React.createElement("div", { style: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
+  return /* @__PURE__ */ React.createElement("div", { className: "desktop-taskbar", style: {
     height: "50px",
     background: "rgba(0,0,0,0.8)",
     display: "flex",
@@ -32752,44 +32928,16 @@ const DesktopTaskbar = () => {
     padding: "0 16px",
     gap: "8px"
   } }, /* @__PURE__ */ React.createElement(
-    "button",
+    ToggleButton,
     {
-      onClick: openApplicationMenu,
-      style: {
-        padding: "8px 16px",
-        background: "#1976d2",
-        color: "white",
-        border: "none",
-        borderRadius: "4px",
-        cursor: "pointer",
-        fontSize: "14px",
-        fontWeight: "bold",
-        flexShrink: 0,
-        display: "flex",
-        alignItems: "center",
-        gap: "6px"
-      },
-      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
+      checked: isOpen,
+      onToggle: () => {
+        console.log("Start button toggled, current state:", isOpen);
+        toggle();
       },
-      title: "Create random window (for testing)"
-    },
-    "+"
+      icon: "start",
+      label: "Start"
+    }
   ), /* @__PURE__ */ React.createElement("div", { style: {
     width: "1px",
     height: "30px",
@@ -32850,6 +32998,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",
@@ -32859,13 +33061,14 @@ 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));