ywana-core8 0.2.6 → 0.2.8

package/dist/index.umd.js

@@ -1988,7 +1988,9 @@
       icon: loading ? "hourglass_empty" : icon,
       size: size === "small" ? "small" : size === "large" ? "normal" : "small",
       disabled: disabled || loading,
-      className: loading ? "loading-icon" : ""
+      className: loading ? "loading-icon" : "",
+      eventPropagation: true
+      // Allow click events to bubble up to button
     };
     return /* @__PURE__ */ React.createElement(
       "button",
@@ -31711,6 +31713,7 @@ const rows = [
       this.windows = /* @__PURE__ */ new Map();
       this.activeWindowId = null;
       this.nextZIndex = 1e3;
+      this.maxZIndex = 9999;
       this.listeners = /* @__PURE__ */ new Set();
       this.desktopSize = desktopSize;
     }
@@ -31772,7 +31775,7 @@ const rows = [
         size,
         minimized: false,
         maximized: false,
-        zIndex: this.nextZIndex++,
+        zIndex: Math.min(this.nextZIndex++, this.maxZIndex),
         ...config
       };
       this.windows.set(window2.id, window2);
@@ -31791,7 +31794,7 @@ const rows = [
       let x = baseX + existingWindows.length * offsetStep;
       let y = baseY + existingWindows.length * offsetStep;
       const maxX = this.desktopSize.width - windowSize.width - 20;
-      const maxY = this.desktopSize.height - windowSize.height - 100;
+      const maxY = this.desktopSize.height - windowSize.height - 20;
       if (x > maxX || y > maxY) {
         const cascadeIndex = existingWindows.length % 8;
         x = baseX + cascadeIndex * 30;
@@ -31827,7 +31830,10 @@ const rows = [
       if (window2.minimized) {
         window2.minimized = false;
       }
-      window2.zIndex = this.nextZIndex++;
+      if (this.nextZIndex >= this.maxZIndex) {
+        this.resetZIndexes();
+      }
+      window2.zIndex = Math.min(this.nextZIndex++, this.maxZIndex);
       this.activeWindowId = windowId;
       this.notifyListeners();
       return true;
@@ -31879,7 +31885,7 @@ const rows = [
       const minWidth = 200;
       const minHeight = 150;
       const maxWidth = this.desktopSize.width;
-      const maxHeight = this.desktopSize.height - 50;
+      const maxHeight = this.desktopSize.height;
       const constrainedSize = {
         width: Math.max(minWidth, Math.min(size.width || window2.size.width, maxWidth)),
         height: Math.max(minHeight, Math.min(size.height || window2.size.height, maxHeight))
@@ -31915,7 +31921,7 @@ const rows = [
       this.windows.forEach((window2) => {
         if (window2.maximized) return;
         const maxX = this.desktopSize.width - window2.size.width;
-        const maxY = this.desktopSize.height - window2.size.height - 50;
+        const maxY = this.desktopSize.height - window2.size.height;
         if (window2.position.x > maxX) {
           window2.position.x = Math.max(0, maxX);
         }
@@ -31950,7 +31956,7 @@ const rows = [
       const cols = Math.ceil(Math.sqrt(visibleWindows.length));
       const rows = Math.ceil(visibleWindows.length / cols);
       const windowWidth = Math.floor(this.desktopSize.width / cols);
-      const windowHeight = Math.floor((this.desktopSize.height - 80) / rows);
+      const windowHeight = Math.floor(this.desktopSize.height / rows);
       visibleWindows.forEach((window2, index) => {
         const col = index % cols;
         const row = Math.floor(index / cols);
@@ -31975,8 +31981,8 @@ const rows = [
       if (!window2 || window2.maximized) return false;
       window2.position = {
         x: (this.desktopSize.width - window2.size.width) / 2,
-        y: (this.desktopSize.height - window2.size.height - 50) / 2
-        // Space for taskbar
+        y: (this.desktopSize.height - window2.size.height) / 2
+        // Workspace center
       };
       this.notifyListeners();
       return true;
@@ -31989,7 +31995,7 @@ const rows = [
       const offsetStep = 20;
       visibleWindows.forEach((window2, index) => {
         const baseX = (this.desktopSize.width - window2.size.width) / 2;
-        const baseY = (this.desktopSize.height - window2.size.height - 50) / 2;
+        const baseY = (this.desktopSize.height - window2.size.height) / 2;
         window2.position = {
           x: baseX + index * offsetStep,
           y: baseY + index * offsetStep
@@ -32010,6 +32016,19 @@ const rows = [
         desktopSize: this.desktopSize
       };
     }
+    /**
+     * Reset z-indexes when they reach the maximum
+     */
+    resetZIndexes() {
+      const windows = Array.from(this.windows.values());
+      windows.sort((a, b) => a.zIndex - b.zIndex);
+      this.nextZIndex = 1e3;
+      windows.forEach((window2, index) => {
+        window2.zIndex = this.nextZIndex + index;
+      });
+      this.nextZIndex = 1e3 + windows.length;
+      this.notifyListeners();
+    }
   }
   const WindowContext = React.createContext(null);
   const WindowProvider = ({ children, desktopSize }) => {
@@ -32034,8 +32053,10 @@ const rows = [
       }
     }, [desktopSize]);
     if (!state || !windowManagerRef.current) {
+      console.log("WindowProvider not ready - state:", state, "windowManager:", windowManagerRef.current);
       return null;
     }
+    console.log("WindowProvider ready - providing context");
     const value = {
       // Current state
       windows: state.windows,
@@ -32177,6 +32198,86 @@ const rows = [
       };
       updateWindowPosition(id, finalPosition);
     };
+    const handleResizeStart = (e, direction) => {
+      if (!resizable || maximized) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsResizing(true);
+      setResizeDirection(direction);
+      setResizeStartSize(size);
+      setResizeStartPosition(position);
+      setResizeStartMouse({ x: e.clientX, y: e.clientY });
+      focusWindow(id);
+    };
+    const handleResizeMove = (e) => {
+      if (!isResizing) return;
+      e.preventDefault();
+      const deltaX = e.clientX - resizeStartMouse.x;
+      const deltaY = e.clientY - resizeStartMouse.y;
+      let newSize = { ...resizeStartSize };
+      let newPosition = { ...resizeStartPosition };
+      switch (resizeDirection) {
+        case "n":
+          newSize.height = Math.max(150, resizeStartSize.height - deltaY);
+          newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height);
+          break;
+        case "s":
+          newSize.height = Math.max(150, resizeStartSize.height + deltaY);
+          break;
+        case "e":
+          newSize.width = Math.max(200, resizeStartSize.width + deltaX);
+          break;
+        case "w":
+          newSize.width = Math.max(200, resizeStartSize.width - deltaX);
+          newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width);
+          break;
+        case "ne":
+          newSize.width = Math.max(200, resizeStartSize.width + deltaX);
+          newSize.height = Math.max(150, resizeStartSize.height - deltaY);
+          newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height);
+          break;
+        case "nw":
+          newSize.width = Math.max(200, resizeStartSize.width - deltaX);
+          newSize.height = Math.max(150, resizeStartSize.height - deltaY);
+          newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width);
+          newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height);
+          break;
+        case "se":
+          newSize.width = Math.max(200, resizeStartSize.width + deltaX);
+          newSize.height = Math.max(150, resizeStartSize.height + deltaY);
+          break;
+        case "sw":
+          newSize.width = Math.max(200, resizeStartSize.width - deltaX);
+          newSize.height = Math.max(150, resizeStartSize.height + deltaY);
+          newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width);
+          break;
+      }
+      if (windowRef.current) {
+        windowRef.current.style.width = `${newSize.width}px`;
+        windowRef.current.style.height = `${newSize.height}px`;
+        windowRef.current.style.left = `${newPosition.x}px`;
+        windowRef.current.style.top = `${newPosition.y}px`;
+      }
+    };
+    const handleResizeEnd = () => {
+      if (!isResizing) return;
+      setIsResizing(false);
+      setResizeDirection("");
+      const desktopContainer = windowRef.current?.parentElement;
+      if (!desktopContainer) return;
+      const windowRect = windowRef.current.getBoundingClientRect();
+      const desktopRect = desktopContainer.getBoundingClientRect();
+      const finalSize = {
+        width: windowRect.width,
+        height: windowRect.height
+      };
+      const finalPosition = {
+        x: windowRect.left - desktopRect.left,
+        y: windowRect.top - desktopRect.top
+      };
+      updateWindowSize(id, finalSize);
+      updateWindowPosition(id, finalPosition);
+    };
     React.useEffect(() => {
       if (isDragging) {
         document.addEventListener("mousemove", handleMouseMove);
@@ -32191,6 +32292,18 @@ const rows = [
         };
       }
     }, [isDragging]);
+    React.useEffect(() => {
+      if (isResizing) {
+        document.addEventListener("mousemove", handleResizeMove);
+        document.addEventListener("mouseup", handleResizeEnd);
+        document.body.style.userSelect = "none";
+        return () => {
+          document.removeEventListener("mousemove", handleResizeMove);
+          document.removeEventListener("mouseup", handleResizeEnd);
+          document.body.style.userSelect = "";
+        };
+      }
+    }, [isResizing]);
     const handleMinimize = (e) => {
       e.stopPropagation();
       minimizeWindow(id, !minimized);
@@ -32225,6 +32338,7 @@ const rows = [
       "window",
       maximized && "window--maximized",
       isDragging && "window--dragging",
+      isResizing && "window--resizing",
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ React.createElement(
@@ -32274,10 +32388,60 @@ const rows = [
       ),
       toolbar && /* @__PURE__ */ React.createElement("div", { className: "window__toolbar" }, toolbar),
       /* @__PURE__ */ React.createElement("div", { className: "window__content" }, content || children),
-      statusBar && /* @__PURE__ */ React.createElement("div", { className: "window__status-bar" }, statusBar)
+      statusBar && /* @__PURE__ */ React.createElement("div", { className: "window__status-bar" }, statusBar),
+      resizable && !maximized && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "window__resize-handle window__resize-handle--n",
+          onMouseDown: (e) => handleResizeStart(e, "n")
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "window__resize-handle window__resize-handle--s",
+          onMouseDown: (e) => handleResizeStart(e, "s")
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "window__resize-handle window__resize-handle--e",
+          onMouseDown: (e) => handleResizeStart(e, "e")
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "window__resize-handle window__resize-handle--w",
+          onMouseDown: (e) => handleResizeStart(e, "w")
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "window__resize-handle window__resize-handle--ne",
+          onMouseDown: (e) => handleResizeStart(e, "ne")
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "window__resize-handle window__resize-handle--nw",
+          onMouseDown: (e) => handleResizeStart(e, "nw")
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "window__resize-handle window__resize-handle--se",
+          onMouseDown: (e) => handleResizeStart(e, "se")
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "window__resize-handle window__resize-handle--sw",
+          onMouseDown: (e) => handleResizeStart(e, "sw")
+        }
+      ))
     );
   };
   const ApplicationMenu = ({ isOpen, onClose }) => {
+    console.log("ApplicationMenu render - isOpen:", isOpen, "onClose:", onClose);
     const appManager = useAppManager();
     const [searchTerm, setSearchTerm] = React.useState("");
     const [selectedCategory, setSelectedCategory] = React.useState("all");
@@ -32362,14 +32526,14 @@ const rows = [
         onChange: (e) => setSearchTerm(e.target.value),
         className: "application-menu__search-input"
       }
-    )), /* @__PURE__ */ React.createElement("div", { className: "application-menu__categories" }, /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement("div", { className: "application-menu__main" }, /* @__PURE__ */ React.createElement("div", { className: "application-menu__sidebar" }, /* @__PURE__ */ React.createElement("div", { className: "application-menu__categories" }, /* @__PURE__ */ React.createElement(
       "button",
       {
         className: `application-menu__category ${selectedCategory === "all" ? "active" : ""}`,
         onClick: () => handleCategorySelect("all")
       },
       /* @__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",
       {
@@ -32378,8 +32542,8 @@ const rows = [
         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,
@@ -32399,7 +32563,7 @@ const rows = [
       },
       /* @__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() {
@@ -32657,14 +32821,14 @@ const rows = [
     };
     return /* @__PURE__ */ React.createElement(AppContext.Provider, { value }, children);
   };
-  const DesktopLayout = ({ children, className = "", theme = "windows", ...props }) => {
+  const DesktopLayout = ({ children, className = "", theme = "windows", workspaceRef, ...props }) => {
     const desktopRef = React.useRef(null);
     const { windowManager } = useWindows();
     React.useEffect(() => {
-      let currentSize = { width: 1200, height: 800 };
-      const measureDesktop = () => {
-        if (desktopRef.current) {
-          const rect = desktopRef.current.getBoundingClientRect();
+      let currentSize = { width: 1200, height: 750 };
+      const measureWorkspace = () => {
+        if (workspaceRef.current) {
+          const rect = workspaceRef.current.getBoundingClientRect();
           const newSize = {
             width: rect.width,
             height: rect.height
@@ -32675,10 +32839,10 @@ const rows = [
           }
         }
       };
-      measureDesktop();
-      const resizeObserver = new ResizeObserver(measureDesktop);
-      if (desktopRef.current) {
-        resizeObserver.observe(desktopRef.current);
+      measureWorkspace();
+      const resizeObserver = new ResizeObserver(measureWorkspace);
+      if (workspaceRef.current) {
+        resizeObserver.observe(workspaceRef.current);
       }
       return () => {
         resizeObserver.disconnect();
@@ -32703,7 +32867,7 @@ const rows = [
   };
   const Workspace = ({ children }) => {
     const { windows } = useWindows();
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, children, windows.map((window2) => /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: "workspace" }, children, windows.map((window2) => /* @__PURE__ */ React.createElement(
       Window,
       {
         key: window2.id,
@@ -32717,6 +32881,9 @@ const rows = [
     )));
   };
   const DesktopTaskbar = () => {
+    console.log("DesktopTaskbar render");
+    const windowsContext = useWindows();
+    console.log("useWindows result:", windowsContext);
     const {
       createWindow,
       windows,
@@ -32724,26 +32891,14 @@ const rows = [
       activeWindowId,
       focusWindow,
       minimizeWindow,
-      closeWindow
-    } = useWindows();
-    const { open: openApplicationMenu } = useApplicationMenu();
-    const handleCreateWindow = () => {
-      const windowTypes = [
-        { title: "File Explorer", icon: "📁", size: { width: 600, height: 400 } },
-        { title: "Text Editor", icon: "📝", size: { width: 500, height: 350 } },
-        { title: "Calculator", icon: "🧮", size: { width: 300, height: 400 } },
-        { title: "Settings", icon: "⚙️", size: { width: 450, height: 300 } },
-        { title: "Browser", icon: "🌐", size: { width: 800, height: 500 } }
-      ];
-      const randomType = windowTypes[Math.floor(Math.random() * windowTypes.length)];
-      createWindow({
-        title: randomType.title,
-        icon: randomType.icon,
-        size: randomType.size,
-        toolbar: randomType.title === "Text Editor" ? /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ React.createElement("button", { style: { padding: "4px 8px", fontSize: "12px" } }, "File"), /* @__PURE__ */ React.createElement("button", { style: { padding: "4px 8px", fontSize: "12px" } }, "Edit"), /* @__PURE__ */ React.createElement("button", { style: { padding: "4px 8px", fontSize: "12px" } }, "View")) : null,
-        statusBar: randomType.title === "Text Editor" ? /* @__PURE__ */ React.createElement("span", null, "Ready | Line 1, Column 1") : null
-      });
-    };
+      closeWindow,
+      cascadeWindows,
+      tileWindows,
+      centerAllWindows,
+      clearAllWindows
+    } = windowsContext;
+    const { isOpen, toggle } = useApplicationMenu();
+    console.log("DesktopTaskbar - isOpen:", isOpen, "toggle:", toggle);
     const handleWindowClick = (window2) => {
       if (window2.minimized) {
         minimizeWindow(window2.id, false);
@@ -32766,11 +32921,7 @@ const rows = [
         closeWindow(window2.id);
       }
     };
-    return /* @__PURE__ */ React.createElement("div", { style: {
-      position: "absolute",
-      bottom: 0,
-      left: 0,
-      right: 0,
+    return /* @__PURE__ */ React.createElement("div", { className: "desktop-taskbar", style: {
       height: "50px",
       background: "rgba(0,0,0,0.8)",
       display: "flex",
@@ -32778,44 +32929,16 @@ const rows = [
       padding: "0 16px",
       gap: "8px"
     } }, /* @__PURE__ */ React.createElement(
-      "button",
+      ToggleButton,
       {
-        onClick: openApplicationMenu,
-        style: {
-          padding: "8px 16px",
-          background: "#1976d2",
-          color: "white",
-          border: "none",
-          borderRadius: "4px",
-          cursor: "pointer",
-          fontSize: "14px",
-          fontWeight: "bold",
-          flexShrink: 0,
-          display: "flex",
-          alignItems: "center",
-          gap: "6px"
+        checked: isOpen,
+        onToggle: () => {
+          console.log("Start button toggled, current state:", isOpen);
+          toggle();
         },
-        title: "Open application menu"
-      },
-      /* @__PURE__ */ React.createElement("span", { style: { fontSize: "16px" } }, "🚀"),
-      "Start"
-    ), /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        onClick: handleCreateWindow,
-        style: {
-          padding: "8px 12px",
-          background: "#666",
-          color: "white",
-          border: "none",
-          borderRadius: "4px",
-          cursor: "pointer",
-          fontSize: "12px",
-          flexShrink: 0
-        },
-        title: "Create random window (for testing)"
-      },
-      "+"
+        icon: "start",
+        label: "Start"
+      }
     ), /* @__PURE__ */ React.createElement("div", { style: {
       width: "1px",
       height: "30px",
@@ -32876,6 +32999,60 @@ Middle click: Close`
         borderRadius: "1px"
       } })
     ))), /* @__PURE__ */ React.createElement("div", { style: {
+      display: "flex",
+      gap: "4px",
+      alignItems: "center",
+      marginLeft: "auto",
+      marginRight: "8px"
+    } }, /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        clickable: true,
+        size: "small",
+        action: () => {
+          console.log("Cascade windows clicked!");
+          cascadeWindows();
+        },
+        icon: "view_stream",
+        label: "Cascade"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        clickable: true,
+        size: "small",
+        action: () => {
+          console.log("Tile windows clicked!");
+          tileWindows();
+        },
+        icon: "view_module",
+        label: "Tile"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        clickable: true,
+        size: "small",
+        action: () => {
+          console.log("Center all windows clicked!");
+          centerAllWindows();
+        },
+        icon: "center_focus_strong",
+        label: "Center"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        clickable: true,
+        size: "small",
+        action: () => {
+          console.log("Clear all windows clicked!");
+          clearAllWindows();
+        },
+        icon: "clear_all",
+        label: "Clear"
+      }
+    )), /* @__PURE__ */ React.createElement("div", { style: {
       color: "rgba(255,255,255,0.7)",
       fontSize: "11px",
       fontFamily: "monospace",
@@ -32885,13 +33062,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));