@gustavolmo/react-window-manager 0.1.0

package/dist/index.js

@@ -0,0 +1,674 @@
+// src/window-manager/window-store-factory.tsx
+import { create } from "zustand";
+var windowRegistry = {};
+var createWindowStore = (windowId, bottomOffsetPx) => {
+  if (windowRegistry[windowId])
+    console.error("This store ID is already in use: " + windowId);
+  const zIndexAtLaunch = Object.keys(windowRegistry).length + 1;
+  const storeInstance = create((set, get) => ({
+    windowId,
+    isActive: false,
+    setIsActive: (isActive) => set({ isActive }),
+    resetFlag: false,
+    reset: () => set({ resetFlag: !get().resetFlag, isWinMinimized: true }),
+    zIndex: zIndexAtLaunch,
+    setZIndex: (newIndex) => set({ zIndex: newIndex }),
+    self: void 0,
+    setSelf: (ref) => set({ self: ref }),
+    winVisualState: "demaximized",
+    setWinVisualState: (newState) => set({ winVisualState: newState }),
+    isWinMinimized: true,
+    setIsWinMinimized: (isMini) => set({ isWinMinimized: isMini }),
+    dragClickOffset: { pointX: 0, pointY: 0 },
+    setDragClickOffset: (newCoord) => set({ dragClickOffset: { pointX: newCoord.pointX, pointY: newCoord.pointY } }),
+    isDragging: false,
+    setIsDragging: (updatedIsDragging) => set({ isDragging: updatedIsDragging }),
+    winCoord: { pointX: 40, pointY: 40 },
+    setWinCoord: (newWinCoord) => set({ winCoord: { pointX: newWinCoord.pointX, pointY: newWinCoord.pointY } }),
+    isResizing: false,
+    setIsResizing: (updatedIsResizing) => set({ isResizing: updatedIsResizing }),
+    winWidth: window.innerWidth * 0.95,
+    setWinWidth: (newWinWidth) => set({ winWidth: newWinWidth }),
+    winHeight: window.innerHeight * 0.75,
+    setWinHeight: (newWinHeight) => set({ winHeight: newWinHeight }),
+    stopDragAndResize: () => set({ isDragging: false, isResizing: false }),
+    maximizeWindow: () => {
+      set({
+        winCoord: { pointX: 0, pointY: 0 },
+        winHeight: window.innerHeight - bottomOffsetPx,
+        winWidth: window.innerWidth,
+        winVisualState: "maximized"
+      });
+    },
+    demaximizeWindow: () => {
+      set({
+        winCoord: { pointX: 40, pointY: 40 },
+        winWidth: window.innerWidth * 0.95,
+        winHeight: window.innerHeight * 0.75,
+        winVisualState: "demaximized"
+      });
+    },
+    minimizeWindow: () => set({ isWinMinimized: true }),
+    openWindow: () => {
+      const winRef = get().self;
+      if (get().isWinMinimized && winRef?.current) {
+        set({ isWinMinimized: false });
+        winRef.current.style.transform = "translate(0, 0) scale(1)";
+      }
+    },
+    dockWindowRight: () => {
+      set({
+        winCoord: { pointX: window.innerWidth / 2, pointY: 0 },
+        winWidth: window.innerWidth / 2,
+        winHeight: window.innerHeight - bottomOffsetPx,
+        winVisualState: "demaximized"
+      });
+    },
+    dockWindowLeft: () => {
+      set({
+        winCoord: { pointX: 0, pointY: 0 },
+        winWidth: window.innerWidth / 2,
+        winHeight: window.innerHeight - bottomOffsetPx,
+        winVisualState: "demaximized"
+      });
+    },
+    dockWindowBottomRight: () => set({
+      winCoord: {
+        pointX: window.innerWidth / 2,
+        pointY: window.innerHeight / 2 - bottomOffsetPx / 2
+      },
+      winWidth: window.innerWidth / 2,
+      winHeight: window.innerHeight / 2 - bottomOffsetPx / 2,
+      winVisualState: "demaximized"
+    }),
+    dockWindowTopRight: () => set({
+      winCoord: { pointX: window.innerWidth / 2, pointY: 0 },
+      winWidth: window.innerWidth / 2,
+      winHeight: window.innerHeight / 2 - bottomOffsetPx / 2,
+      winVisualState: "demaximized"
+    }),
+    dockWindowBottomLeft: () => set({
+      winCoord: { pointX: 0, pointY: window.innerHeight / 2 - bottomOffsetPx / 2 },
+      winWidth: window.innerWidth / 2,
+      winHeight: window.innerHeight / 2 - bottomOffsetPx / 2,
+      winVisualState: "demaximized"
+    }),
+    dockWindowTopLeft: () => set({
+      winCoord: { pointX: 0, pointY: 0 },
+      winWidth: window.innerWidth / 2,
+      winHeight: window.innerHeight / 2 - bottomOffsetPx / 2,
+      winVisualState: "demaximized"
+    }),
+    WIN_MIN_WIDTH: 360,
+    WIN_MIN_HEIGHT: 240,
+    setWIN_MIN_WIDTH: (w) => set({ WIN_MIN_WIDTH: w }),
+    setWIN_MIN_HEIGHT: (h) => set({ WIN_MIN_HEIGHT: h })
+  }));
+  windowRegistry[windowId] = storeInstance;
+  return storeInstance;
+};
+
+// src/window-manager/window-global-actions.ts
+var stopAllDragAndResize = () => {
+  for (const key of Object.keys(windowRegistry)) {
+    windowRegistry[key].getState().stopDragAndResize();
+  }
+};
+var resetAllWindows = () => {
+  for (const key of Object.keys(windowRegistry)) {
+    windowRegistry[key].getState().reset();
+  }
+};
+var bringTargetWindowToFront = (targetId) => {
+  const targetWindow = windowRegistry[targetId].getState();
+  for (const key of Object.keys(windowRegistry)) {
+    const window2 = windowRegistry[key].getState();
+    if (window2.windowId === targetWindow.windowId) {
+      continue;
+    }
+    window2.setIsActive(false);
+    if (window2.zIndex >= targetWindow.zIndex) {
+      window2.setZIndex(window2.zIndex - 1);
+    }
+  }
+  targetWindow.setZIndex(Object.keys(windowRegistry).length);
+  targetWindow.setIsActive(true);
+};
+
+// src/window-manager/window-button.tsx
+import { jsx } from "react/jsx-runtime";
+function WindowButton({
+  children,
+  useWindowStore,
+  styles,
+  closedStyle = "brightness-[85%]",
+  openStyle = "brightness-150"
+}) {
+  const { openWindow, minimizeWindow, isWinMinimized, windowId, isActive } = useWindowStore();
+  const handleOpenCloseWin = () => {
+    if (isWinMinimized) {
+      bringTargetWindowToFront(windowId);
+      openWindow();
+      return;
+    }
+    if (isActive) {
+      minimizeWindow();
+    }
+    bringTargetWindowToFront(windowId);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      id: `${windowId}_button`,
+      onClick: handleOpenCloseWin,
+      className: `
+        ${styles} 
+        ${isWinMinimized ? closedStyle : openStyle}`,
+      children
+    }
+  );
+}
+
+// src/screen-manager/screen-state.ts
+import { create as create2 } from "zustand";
+var useScreenState = create2((set) => ({
+  x: 10,
+  y: 10,
+  setX: (newX) => set({ x: newX }),
+  setY: (newY) => set({ y: newY })
+}));
+
+// src/screen-manager/screen-listeners.tsx
+import { useEffect } from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ScreenListeners() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(CursorCoordinates, {}),
+    /* @__PURE__ */ jsx2(WindowResizeReset, {})
+  ] });
+}
+function WindowResizeReset() {
+  useEffect(() => {
+    const handleWindowResize = () => {
+      resetAllWindows();
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => document.removeEventListener("pointermove", handleWindowResize);
+  }, []);
+  return /* @__PURE__ */ jsx2(Fragment, {});
+}
+function CursorCoordinates() {
+  const { setX, setY } = useScreenState();
+  useEffect(() => {
+    const handleWindowPosition = (e) => {
+      e.preventDefault();
+      setX(e.clientX);
+      setY(e.clientY);
+    };
+    document.addEventListener("pointermove", handleWindowPosition);
+    return () => document.removeEventListener("pointermove", handleWindowPosition);
+  }, [setX, setY]);
+  return /* @__PURE__ */ jsx2(Fragment, {});
+}
+
+// src/window-manager/workspace-layout.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function WorkspaceLayout({ children }) {
+  return /* @__PURE__ */ jsxs2(
+    "main",
+    {
+      onMouseLeave: stopAllDragAndResize,
+      onMouseUp: stopAllDragAndResize,
+      className: "absolute overflow-hidden h-full w-full touch-none",
+      children: [
+        /* @__PURE__ */ jsx3(ScreenListeners, {}),
+        children
+      ]
+    }
+  );
+}
+
+// src/window-manager/window-layout.tsx
+import { useEffect as useEffect2, useRef } from "react";
+
+// src/window-assets/svg-win-icons.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function iconWinMaximize() {
+  return /* @__PURE__ */ jsx4(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      width: 24,
+      height: 24,
+      strokeWidth: 1.5,
+      stroke: "white",
+      color: "white",
+      className: "size-6",
+      children: /* @__PURE__ */ jsx4(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M5.25 7.5A2.25 2.25 0 0 1 7.5 5.25h9a2.25 2.25 0 0 1 2.25 2.25v9a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-9Z"
+        }
+      )
+    }
+  );
+}
+function iconWinDemaximize() {
+  return /* @__PURE__ */ jsx4(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      width: 24,
+      height: 24,
+      strokeWidth: 1.5,
+      stroke: "white",
+      color: "white",
+      className: "size-6",
+      children: /* @__PURE__ */ jsx4(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"
+        }
+      )
+    }
+  );
+}
+function iconWinMinimize() {
+  return /* @__PURE__ */ jsx4(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      width: 24,
+      height: 24,
+      strokeWidth: 1.5,
+      stroke: "white",
+      color: "white",
+      className: "size-6",
+      children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18 18 6M6 6l12 12" })
+    }
+  );
+}
+
+// src/window-manager/window-layout.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var responsiveBreakInPx = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  never: 0
+};
+function WindowLayout({
+  responsiveBreak = "lg",
+  children,
+  windowName,
+  navbarChildren,
+  useWindowStore,
+  defaultDock
+}) {
+  const { x, y } = useScreenState();
+  const windowRef = useRef(null);
+  const {
+    windowId,
+    zIndex,
+    isActive,
+    setSelf,
+    resetFlag,
+    winVisualState,
+    setWinVisualState,
+    isWinMinimized,
+    dragClickOffset,
+    setDragClickOffset,
+    isDragging,
+    setIsDragging,
+    winCoord,
+    setWinCoord,
+    isResizing,
+    setIsResizing,
+    winWidth,
+    setWinWidth,
+    winHeight,
+    setWinHeight,
+    minimizeWindow,
+    maximizeWindow,
+    demaximizeWindow,
+    dockWindowRight,
+    dockWindowLeft,
+    dockWindowTopLeft,
+    dockWindowBottomLeft,
+    dockWindowTopRight,
+    dockWindowBottomRight,
+    WIN_MIN_WIDTH,
+    WIN_MIN_HEIGHT
+  } = useWindowStore();
+  useEffect2(() => {
+    setSelf(windowRef);
+    if (isMobile())
+      maximizeWindow();
+    else if (defaultDock === "left")
+      dockWindowLeft();
+    else if (defaultDock === "right")
+      dockWindowRight();
+    else if (defaultDock === "full")
+      maximizeWindow();
+    else
+      demaximizeWindow();
+  }, [setSelf, windowRef, resetFlag]);
+  useEffect2(() => {
+    if (isMobile())
+      return;
+    if (!isDragging)
+      return;
+    if (winVisualState === "maximized")
+      demaximizeWindow();
+    let adjustedX = x - dragClickOffset.pointX;
+    if (x > window.innerWidth || x < 0)
+      adjustedX = winCoord.pointX;
+    let adjustedY = y - dragClickOffset.pointY;
+    if (y > window.innerHeight || y < 0)
+      adjustedY = winCoord.pointY;
+    setWinCoord({ pointX: adjustedX, pointY: adjustedY });
+  }, [isDragging, x, y]);
+  useEffect2(() => {
+    if (!isResizing)
+      return;
+    setWinVisualState("demaximized");
+    if (isResizing === "bottom-height")
+      resizeBottomWinHeight();
+    if (isResizing === "top-height")
+      resizeTopWinHeight();
+    if (isResizing === "right-width")
+      resizeRightWinWidth();
+    if (isResizing === "left-width")
+      resizeLeftWinWidth();
+    if (isResizing === "bottom-right-all")
+      resizeRightBottomWidthAndHeight();
+    if (isResizing === "bottom-left-all")
+      resizeLeftBottomWidthAndHeight();
+  }, [isResizing, x, y]);
+  const handleNavbarClick = (isDragging2) => {
+    setDragClickOffset({ pointX: x - winCoord.pointX, pointY: y - winCoord.pointY });
+    setIsDragging(isDragging2);
+  };
+  const isMobile = () => {
+    return window.innerWidth < responsiveBreakInPx[responsiveBreak];
+  };
+  const resizeRightWinWidth = () => {
+    const winBox = windowRef.current?.getBoundingClientRect();
+    if (!winBox)
+      return;
+    const minWinWidth = x - winBox.left < WIN_MIN_WIDTH;
+    if (minWinWidth)
+      return;
+    const cursorOutOfBounds = x > window.innerWidth || x < 0;
+    if (cursorOutOfBounds)
+      return;
+    const sizeDiff = x - winBox.right;
+    setWinWidth(winWidth + sizeDiff);
+  };
+  const resizeLeftWinWidth = () => {
+    const winBox = windowRef.current?.getBoundingClientRect();
+    if (!winBox)
+      return;
+    const minWinWidth = winBox.right - x < WIN_MIN_WIDTH;
+    if (minWinWidth)
+      return;
+    const cursorOutOfBounds = x > window.innerWidth || x < 0;
+    if (cursorOutOfBounds)
+      return;
+    const sizeDiff = winBox.left - x;
+    setWinWidth(winWidth + sizeDiff);
+    setWinCoord({ pointX: x, pointY: winCoord.pointY });
+  };
+  const resizeBottomWinHeight = () => {
+    const winBox = windowRef.current?.getBoundingClientRect();
+    if (!winBox)
+      return;
+    const minWinHeight = y - winBox.top < WIN_MIN_HEIGHT;
+    if (minWinHeight)
+      return;
+    const cursorOutOfBounds = y > window.innerHeight || y < 0;
+    if (cursorOutOfBounds)
+      return;
+    const sizeDiff = y - winBox.bottom;
+    setWinHeight(winHeight + sizeDiff);
+  };
+  const resizeTopWinHeight = () => {
+    const winBox = windowRef.current?.getBoundingClientRect();
+    if (!winBox)
+      return;
+    const minWinHeight = winBox.bottom - y < WIN_MIN_HEIGHT;
+    if (minWinHeight)
+      return;
+    const cursorOutOfBounds = y > window.innerHeight || y < 0;
+    if (cursorOutOfBounds)
+      return;
+    const sizeDiff = winBox.top - y;
+    setWinHeight(winHeight + sizeDiff);
+    setWinCoord({ pointX: winCoord.pointX, pointY: y });
+  };
+  const resizeRightBottomWidthAndHeight = () => {
+    resizeRightWinWidth();
+    resizeBottomWinHeight();
+  };
+  const resizeLeftBottomWidthAndHeight = () => {
+    resizeLeftWinWidth();
+    resizeBottomWinHeight();
+  };
+  const handleResizeClick = (isResizing2) => {
+    setIsResizing(isResizing2);
+  };
+  const cornerDockControl = /* @__PURE__ */ jsxs3("div", { className: `flex xl:p-0 px-2 shrink-0 gap-1`, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col justify-center gap-1", children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "hover:bg-gray-100 hover:bg-opacity-20  border w-4 h-[10px] rounded-sm",
+          onClick: dockWindowTopLeft
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "hover:bg-gray-100 hover:bg-opacity-20  border w-4 h-[10px] rounded-sm",
+          onClick: dockWindowBottomLeft
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col justify-center gap-1", children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "hover:bg-gray-100 hover:bg-opacity-20  border w-4 h-[10px] rounded-sm",
+          onClick: dockWindowTopRight
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "hover:bg-gray-100 hover:bg-opacity-20  border w-4 h-[10px] rounded-sm",
+          onClick: dockWindowBottomRight
+        }
+      )
+    ] })
+  ] });
+  const sideDideControl = /* @__PURE__ */ jsxs3("div", { className: `flex px-2 shrink-0 items-center gap-1`, children: [
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        className: "hover:bg-gray-100 hover:bg-opacity-20 px-[1px] border w-4 h-6 rounded-sm",
+        onClick: dockWindowLeft
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        className: "hover:bg-gray-100 hover:bg-opacity-20 px-[1px] border w-4 h-6 rounded-sm",
+        onClick: dockWindowRight
+      }
+    )
+  ] });
+  const maximizeControl = winVisualState === "maximized" ? /* @__PURE__ */ jsx5(
+    "button",
+    {
+      className: `block hover:bg-gray-100 hover:bg-opacity-20 px-5 h-full`,
+      onClick: demaximizeWindow,
+      children: iconWinDemaximize()
+    }
+  ) : /* @__PURE__ */ jsx5(
+    "button",
+    {
+      className: `block hover:bg-gray-100 hover:bg-opacity-20 px-5 h-full`,
+      onClick: maximizeWindow,
+      children: iconWinMaximize()
+    }
+  );
+  const minimizeControl = /* @__PURE__ */ jsx5("button", { className: "hover:bg-red-500 hover:bg-opacity-20 px-5 h-full", onClick: minimizeWindow, children: iconWinMinimize() });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      onMouseDown: () => bringTargetWindowToFront(windowId),
+      id: windowId,
+      ref: windowRef,
+      style: {
+        top: `${winCoord.pointY}px`,
+        left: `${winCoord.pointX}px`,
+        width: `${winWidth}px`,
+        height: `${winHeight}px`,
+        zIndex: `${zIndex}`,
+        /* MINIMIZE LOGIC */
+        transition: "transform 0.2s ease-in-out, opacity 0.3s ease-in-out",
+        opacity: isWinMinimized ? 0 : 1,
+        transform: isWinMinimized ? `translate(${window.innerWidth / 2 - winCoord.pointX - winWidth / 2}px,
+              ${window.innerHeight - winCoord.pointY - winHeight / 2}px) scale(0.02)` : ""
+      },
+      onMouseUp: () => {
+        handleNavbarClick(false);
+        handleResizeClick(false);
+      },
+      className: `fixed bg-white shadow-lg border border-zinc-600`,
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "nav",
+          {
+            className: `h-[32px] w-full bg-neutral-800 flex items-center
+        ${isActive ? "brightness-100 opacity-100" : "brightness-75 opacity-90"}`,
+            children: [
+              /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  onMouseDown: () => handleNavbarClick(true),
+                  onDoubleClick: maximizeWindow,
+                  className: "w-full h-8 px-2 text-white flex items-center text-sm truncate",
+                  children: [
+                    windowName,
+                    navbarChildren
+                  ]
+                }
+              ),
+              !isMobile() && cornerDockControl,
+              !isMobile() && sideDideControl,
+              !isMobile() && maximizeControl,
+              minimizeControl
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            onMouseDown: () => handleResizeClick("right-width"),
+            id: "win-resize-width",
+            className: "fixed w-2 opacity-60 cursor-w-resize z-10",
+            style: {
+              top: `${winCoord.pointY}px`,
+              left: `${winCoord.pointX + winWidth - 4}px`,
+              height: `${winHeight}px`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            onMouseDown: () => handleResizeClick("left-width"),
+            id: "win-resize-width",
+            className: "fixed w-2 opacity-60 cursor-w-resize z-10",
+            style: {
+              top: `${winCoord.pointY}px`,
+              left: `${winCoord.pointX - 4}px`,
+              height: `${winHeight}px`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            onMouseDown: () => handleResizeClick("bottom-height"),
+            id: "win-resize-height",
+            className: "fixed h-2 opacity-60 cursor-s-resize z-10",
+            style: {
+              top: `${winCoord.pointY + winHeight - 6}px`,
+              left: `${winCoord.pointX}px`,
+              width: `${winWidth}px`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            onMouseDown: () => handleResizeClick("top-height"),
+            id: "win-resize-height",
+            className: "fixed h-2 opacity-60 cursor-s-resize z-10",
+            style: {
+              top: `${winCoord.pointY - 6}px`,
+              left: `${winCoord.pointX}px`,
+              width: `${winWidth}px`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            onMouseDown: () => handleResizeClick("bottom-right-all"),
+            id: "win-resize-all",
+            className: "fixed h-3 w-3 opacity-60 cursor-se-resize z-20",
+            style: {
+              top: `${winCoord.pointY + winHeight - 8}px`,
+              left: `${winCoord.pointX + winWidth - 8}px`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            onMouseDown: () => handleResizeClick("bottom-left-all"),
+            id: "win-resize-all",
+            className: "fixed h-3 w-3 opacity-60 cursor-sw-resize z-20",
+            style: {
+              top: `${winCoord.pointY + winHeight - 8}px`,
+              left: `${winCoord.pointX - 8}px`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx5("div", { className: `w-full h-[calc(100%-32px)] overflow-auto`, children })
+      ]
+    }
+  );
+}
+export {
+  WindowButton,
+  WindowLayout,
+  WorkspaceLayout,
+  createWindowStore,
+  windowRegistry
+};
+//# sourceMappingURL=index.js.map