react-os-shell 0.1.55 → 0.2.1

package/dist/{chunk-53CE7OVT.js → chunk-7P6DO3NC.js}

@@ -1,6 +1,6 @@
 import { confirm } from './chunk-PLGHQ7QW.js';
 import 'axios';
-import { createContext, useRef, useEffect, useContext, useState, useSyncExternalStore, isValidElement, cloneElement, useCallback, Suspense, useLayoutEffect, useMemo } from 'react';
+import { createContext, useRef, useEffect, useSyncExternalStore, useContext, useState, useCallback, isValidElement, cloneElement, useLayoutEffect, Suspense, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { createPortal } from 'react-dom';
 import { useQueryClient, useQuery } from '@tanstack/react-query';
@@ -238,6 +238,46 @@ function PopupMenuLabel({ children }) {
     }
   );
 }
+var QUERY = "(max-width: 767px), (pointer: coarse)";
+function getSnapshot() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia(QUERY).matches;
+}
+function getServerSnapshot() {
+  return false;
+}
+function subscribe(cb) {
+  if (typeof window === "undefined" || !window.matchMedia) return () => {
+  };
+  const mql = window.matchMedia(QUERY);
+  if (mql.addEventListener) {
+    mql.addEventListener("change", cb);
+    return () => mql.removeEventListener("change", cb);
+  }
+  mql.addListener(cb);
+  return () => mql.removeListener(cb);
+}
+function useIsMobile() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/shell/mobileShellStore.ts
+var _mode = "home";
+var listeners = /* @__PURE__ */ new Set();
+function getMobileMode() {
+  return _mode;
+}
+function setMobileMode(mode) {
+  if (_mode === mode) return;
+  _mode = mode;
+  listeners.forEach((fn) => fn());
+}
+function subscribeMobileMode(cb) {
+  listeners.add(cb);
+  return () => {
+    listeners.delete(cb);
+  };
+}
 var ModalIdContext = createContext("");
 function useWidgetSettings(handler) {
   const id = useContext(ModalIdContext);
@@ -507,7 +547,59 @@ function useIsActiveModal(modalId) {
 function triggerSplitView() {
   window.dispatchEvent(new CustomEvent("modal-split-view"));
 }
-function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = false, onNext, onPrev, footer, bodyScroll, onMinimize, initialBox, actions, actionsLeft, allowPinOnTop, initialPosition, widget, compact, autoHeight, widgetMenu, dimensions, windowKey, children }) {
+function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = false, onNext, onPrev, footer, bodyScroll, onMinimize, initialBox, actions, actionsLeft, allowPinOnTop, initialPosition, widget, compact, appStyle, autoHeight, autoMinHeight, widgetMenu, dimensions, windowKey, children }) {
+  const isMobile = useIsMobile();
+  const [swipeX, setSwipeX] = useState(0);
+  const [swipeDragging, setSwipeDragging] = useState(false);
+  const swipeStartRef = useRef(null);
+  const swipeXRef = useRef(0);
+  useEffect(() => {
+    swipeXRef.current = swipeX;
+  }, [swipeX]);
+  const handleEdgePointerDown = useCallback((e) => {
+    if (!isMobile) return;
+    swipeStartRef.current = { startX: e.clientX, startY: e.clientY, pointerId: e.pointerId };
+    setSwipeDragging(true);
+  }, [isMobile]);
+  useEffect(() => {
+    if (!swipeDragging) return;
+    const onMove = (ev) => {
+      if (!swipeStartRef.current) return;
+      const dx = ev.clientX - swipeStartRef.current.startX;
+      const dy = Math.abs(ev.clientY - swipeStartRef.current.startY);
+      if (dy > Math.abs(dx) + 12) {
+        swipeStartRef.current = null;
+        setSwipeDragging(false);
+        setSwipeX(0);
+        return;
+      }
+      setSwipeX(Math.max(0, dx));
+    };
+    const onUp = () => {
+      if (!swipeStartRef.current) return;
+      const threshold = window.innerWidth * 0.3;
+      const past = swipeXRef.current > threshold;
+      swipeStartRef.current = null;
+      setSwipeDragging(false);
+      if (past) {
+        setSwipeX(window.innerWidth);
+        setTimeout(() => {
+          setMobileMode("home");
+          setSwipeX(0);
+        }, 180);
+      } else {
+        setSwipeX(0);
+      }
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+  }, [swipeDragging]);
   const [displayTitle, setDisplayTitle] = useState(title);
   useEffect(() => {
     setDisplayTitle(title);
@@ -647,13 +739,13 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
       setZIndex(getZForModal(modalId));
     };
     const onSplitView = () => {
-      if (allowPinOnTop) return;
+      if (allowPinOnTop || widget) return;
       const allPanels = document.querySelectorAll("[data-modal-panel]");
       let nonUtilityCount = 0;
       let myNonUtilIdx = -1;
       activationOrder.forEach((id, _i) => {
         const panel = Array.from(allPanels).find((p) => p.getAttribute("data-modal-id") === id);
-        if (panel && !panel.hasAttribute("data-utility")) {
+        if (panel && !panel.hasAttribute("data-utility") && !panel.hasAttribute("data-widget")) {
           if (id === modalId) myNonUtilIdx = nonUtilityCount;
           nonUtilityCount++;
         }
@@ -662,13 +754,12 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
       if (count < 2) return;
       const myIdx = myNonUtilIdx;
       if (myIdx < 0) return;
-      const padding2 = 20;
-      const taskbarH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--taskbar-height")) || 56;
-      const availW = window.innerWidth - padding2 * 2;
-      const availH = window.innerHeight - taskbarH - padding2 * 2;
-      const colW = Math.floor((availW - padding2 * (count - 1)) / count);
-      const x = padding2 + myIdx * (colW + padding2);
-      setBox({ x, y: padding2, w: colW, h: availH });
+      const a = workArea();
+      const baseW = Math.floor(a.w / count);
+      const remainder = a.w - baseW * count;
+      const colW = baseW + (myIdx < remainder ? 1 : 0);
+      const xOffset = myIdx * baseW + Math.min(myIdx, remainder);
+      setBox({ x: a.x + xOffset, y: a.y, w: colW, h: a.h });
       setMaximized(false);
     };
     const onCenter = (e) => {
@@ -1029,6 +1120,7 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
       "data-modal-id": modalId,
       "data-window-key": windowKey || void 0,
       ...allowPinOnTop ? { "data-utility": "" } : {},
+      ...widget ? { "data-widget": "" } : {},
       className: `fixed rounded-lg flex flex-col overflow-hidden group ${widget ? isActive ? "shadow-2xl" : "shadow-lg" : `border ${isActive ? "shadow-2xl border-gray-200" : "shadow-lg border-gray-300"}`}`,
       onMouseDown: (e) => {
         setWindowMenu(null);
@@ -1038,19 +1130,46 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
           activateModal(modalId);
         }
       },
-      style: {
+      style: isMobile ? {
+        // Mobile fullscreen: ignore stored box, fill viewport down to bottom
+        // nav. Widgets stay hidden on mobile.
+        zIndex: zIndex + 1,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: "var(--mobile-bottom-nav, 56px)",
+        width: "auto",
+        height: "auto",
+        transform: `translateX(${swipeX}px)`,
+        transition: swipeDragging ? "none" : "transform 180ms ease-out",
+        ...widget ? { display: "none" } : {},
+        ...zIndex < 0 ? { display: "none" } : {}
+      } : {
         zIndex: pinnedOnTop ? 999 : zIndex + 1,
         width: box.w,
         height: autoHeight ? "auto" : box.h,
         top: box.y,
+        ...autoHeight ? {
+          minHeight: `${autoMinHeight ?? 240}px`,
+          maxHeight: `calc(100vh - var(--taskbar-height, 0px) - 24px)`
+        } : {},
         ...widget && widgetAnchor === "right" ? { right: window.innerWidth - box.x - box.w } : { left: box.x },
         ...zIndex < 0 && !pinnedOnTop ? { display: "none" } : {}
       },
       children: [
+        isMobile && !widget && /* @__PURE__ */ jsx(
+          "div",
+          {
+            onPointerDown: handleEdgePointerDown,
+            className: "absolute top-0 bottom-0 left-0 w-[22px] z-[5]",
+            style: { touchAction: "pan-y" },
+            "aria-hidden": "true"
+          }
+        ),
         widget ? (
           /* Widget: no title bar — drag via body, close via right-click context menu */
           null
-        ) : compact ? (
+        ) : isMobile ? null : compact ? (
           /* Compact: smaller title bar with title + close only */
           /* @__PURE__ */ jsxs(
             "div",
@@ -1078,6 +1197,48 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
               ]
             }
           )
+        ) : appStyle ? (
+          /* App style: small title bar like compact, but keeps minimize/maximize for full window control. */
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onPointerDown: startDrag,
+              className: `flex items-center justify-between px-3 py-1.5 border-b border-gray-200 shrink-0 cursor-move select-none rounded-t-lg ${isActive ? "backdrop-blur-sm" : ""}`,
+              style: { touchAction: "none", backgroundColor: isActive ? `rgb(var(--window-header-rgb) / var(--active-header-opacity, 0.8))` : `rgb(var(--window-header-rgb) / var(--inactive-header-opacity, 0.7))` },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium min-w-0 flex-1 truncate flex items-center gap-1.5", style: { color: isActive ? "rgb(17 24 39)" : "rgb(156 163 175)" }, children: [
+                  renderIconButton(),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: displayTitle })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 shrink-0 ml-2", children: [
+                  allowPinOnTop && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setPinnedOnTop((p) => !p),
+                      title: pinnedOnTop ? "Unpin from top" : "Pin on top",
+                      className: `p-0.5 rounded hover:bg-gray-200 ${pinnedOnTop ? "text-blue-600" : "text-gray-400 hover:text-gray-600"}`,
+                      children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: pinnedOnTop ? "currentColor" : "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("button", { onClick: () => {
+                    const idx = activationOrder.indexOf(modalId);
+                    if (idx !== -1) activationOrder.splice(idx, 1);
+                    activeListeners.forEach((fn) => fn());
+                    window.dispatchEvent(new CustomEvent("modal-reorder"));
+                  }, title: "Minimize", className: "text-gray-400 hover:text-gray-600 px-1 py-0.5 rounded hover:bg-gray-200 text-xs leading-none", children: "\u2500" }),
+                  /* @__PURE__ */ jsx("button", { onClick: () => {
+                    if (maximized) {
+                      setMaximized(false);
+                      setBox(calcWindowed());
+                    } else {
+                      reset();
+                    }
+                  }, title: maximized ? "Windowed" : "Maximize", className: "text-gray-400 hover:text-gray-600 px-1 py-0.5 rounded hover:bg-gray-200 text-xs leading-none", children: maximized ? "\u2750" : "\u2922" }),
+                  /* @__PURE__ */ jsx("button", { type: "button", onClick: guardedClose, className: "rounded p-0.5 text-gray-400 hover:text-gray-600 hover:bg-gray-200", children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" }) })
+                ] })
+              ]
+            }
+          )
         ) : /* @__PURE__ */ jsxs(
           "div",
           {
@@ -1132,7 +1293,7 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
               e.preventDefault();
               setCtxMenu({ x: e.clientX, y: e.clientY });
             } } : {},
-            className: `flex-1 min-h-0 flex flex-col ${widget ? "p-0 cursor-move" : compact ? "p-2" : "p-4"} ${widget ? "" : "backdrop-blur-sm"} ${bodyScroll === false ? "overflow-hidden" : "overflow-y-auto"} ${widget ? "rounded-lg select-none" : ""}`,
+            className: `flex-1 min-h-0 flex flex-col ${widget ? "p-0 cursor-move" : appStyle ? "p-0" : compact ? "p-2" : "p-4"} ${widget ? "" : "backdrop-blur-sm"} ${bodyScroll === false || appStyle ? "overflow-hidden" : "overflow-y-auto"} ${widget ? "rounded-lg select-none" : ""}`,
             style: { ...widget ? { touchAction: "none" } : {}, backgroundColor: widget ? "transparent" : isActive ? `rgb(var(--window-content-rgb) / var(--active-content-opacity, 0.9))` : `rgb(var(--window-content-rgb) / var(--inactive-content-opacity, 0.8))` },
             children
           }
@@ -1164,7 +1325,7 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
           "div",
           {
             onPointerDown: startDrag,
-            className: `px-4 py-2 border-t border-gray-200 shrink-0 flex items-center justify-between text-xs select-none cursor-move${isActive ? " backdrop-blur-sm" : ""}${widget || compact || !footer && !hasActions && !actions && !actionsLeft ? " hidden" : ""}`,
+            className: `px-4 py-2 border-t border-gray-200 shrink-0 flex items-center justify-between text-xs select-none cursor-move${isActive ? " backdrop-blur-sm" : ""}${widget || compact || appStyle || isMobile || !footer && !hasActions && !actions && !actionsLeft ? " hidden" : ""}`,
             style: { touchAction: "none", backgroundColor: isActive ? `rgb(var(--window-footer-rgb) / var(--active-header-opacity, 0.8))` : `rgb(var(--window-footer-rgb) / var(--inactive-header-opacity, 0.7))` },
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
@@ -1179,7 +1340,7 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
             ]
           }
         ),
-        !widget && isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+        !widget && !isMobile && isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "se"), className: "absolute bottom-0 right-0 w-3 h-3 cursor-nwse-resize z-10" }),
           /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "sw"), className: "absolute bottom-0 left-0 w-3 h-3 cursor-nesw-resize z-10" }),
           /* @__PURE__ */ jsx("div", { onPointerDown: (e) => startResizeCorner(e, "ne"), className: "absolute top-0 right-0 w-3 h-3 cursor-nesw-resize z-10" }),
@@ -1293,7 +1454,7 @@ function PageWindow({ item, onClose }) {
   if (!raw || !isPageEntry(raw)) return null;
   const entry = raw;
   const Component = entry.component;
-  return /* @__PURE__ */ jsxs(Modal, { open: true, onClose, icon: navIcons[item.route], title: entry.label, size: entry.size || "2xl", allowPinOnTop: entry.allowPinOnTop, initialPosition: entry.initialPosition, widget: entry.widget, compact: entry.compact, autoHeight: entry.autoHeight, dimensions: entry.dimensions, windowKey: item.id, children: [
+  return /* @__PURE__ */ jsxs(Modal, { open: true, onClose, icon: navIcons[item.route], title: entry.label, size: entry.size || "2xl", allowPinOnTop: entry.allowPinOnTop, initialPosition: entry.initialPosition, widget: entry.widget, compact: entry.compact, appStyle: entry.appStyle, autoHeight: entry.autoHeight, autoMinHeight: entry.autoMinHeight, dimensions: entry.dimensions, windowKey: item.id, children: [
     /* @__PURE__ */ jsx(DesktopShortcutMenuItem, { item }),
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(LoadingSpinner, {}) }), children: /* @__PURE__ */ jsx(Component, {}) })
   ] });
@@ -1379,6 +1540,9 @@ function RestoredRegistryModal({ item, onClose, onMinimize }) {
       copyText: item.id,
       windowKey: item.id,
       size: entry.size || "2xl",
+      autoHeight: entry.autoHeight,
+      autoMinHeight: entry.autoMinHeight,
+      appStyle: entry.appStyle,
       children: [
         /* @__PURE__ */ jsx(DesktopShortcutMenuItem, { item }),
         /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingSpinner, {}), children: entry.selfFetching ? entry.render(null, handleClose, item.entityId, editing, setEditing) : isLoading && !entity ? /* @__PURE__ */ jsx(LoadingSpinner, {}) : entity ? entry.render(entity, handleClose, item.entityId, editing, setEditing) : /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 py-8 text-center", children: "Not found." }) })
@@ -1845,6 +2009,6 @@ function WindowManagerProvider({ children }) {
   ] });
 }
 
-export { CancelButton, CopyButton, DocFavStar, GLASS_DIVIDER, GLASS_INPUT_BG, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, client_default, getActiveModalId, glassStyle, isEntityEntry, isPageEntry, isSection, navIcons, navSections, sectionIcons, setShellApiClient, setShellNavIcons, setShellWindowRegistry, startMenuCategories, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };
-//# sourceMappingURL=chunk-53CE7OVT.js.map
-//# sourceMappingURL=chunk-53CE7OVT.js.map
+export { CancelButton, CopyButton, DocFavStar, GLASS_DIVIDER, GLASS_INPUT_BG, LoadingSpinner, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, ThumbCard, WINDOW_REGISTRY, WindowManagerProvider, WindowTitle, activateModal, client_default, getActiveModalId, getMobileMode, glassStyle, isEntityEntry, isPageEntry, isSection, navIcons, navSections, sectionIcons, setMobileMode, setShellApiClient, setShellNavIcons, setShellWindowRegistry, startMenuCategories, subscribeMobileMode, useIsMobile, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };
+//# sourceMappingURL=chunk-7P6DO3NC.js.map
+//# sourceMappingURL=chunk-7P6DO3NC.js.map