react-os-shell 0.1.5 → 0.1.7

package/dist/{chunk-OVUT6VRS.js → chunk-ZR2DVGZI.js}

@@ -911,6 +911,7 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
       ref: panelRef,
       "data-modal-panel": true,
       "data-modal-id": modalId,
+      "data-window-key": windowKey || void 0,
       ...allowPinOnTop ? { "data-utility": "" } : {},
       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) => {
@@ -1269,6 +1270,9 @@ function RestoredRegistryModal({ item, onClose, onMinimize }) {
     }
   );
 }
+function findPanelByWindowKey(key) {
+  return document.querySelector(`[data-modal-panel][data-window-key="${key}"]`);
+}
 function findPanelByLabel(label) {
   const panels = document.querySelectorAll("[data-modal-panel]");
   for (const p of Array.from(panels)) {
@@ -1277,32 +1281,35 @@ function findPanelByLabel(label) {
   }
   return null;
 }
-function TaskbarTabPreview({ label, anchorEl, onMouseEnter, onMouseLeave }) {
+function ThumbCard({ id, label, maxW, maxH, onClick, onClose }) {
   const previewRef = useRef(null);
-  const PREVIEW_W = 240;
-  const PREVIEW_H = 150;
+  const [size, setSize] = useState({ w: maxW, h: maxH });
   useEffect(() => {
     const inner = previewRef.current;
     if (!inner) return;
-    const target = findPanelByLabel(label);
+    const target = findPanelByWindowKey(id) ?? findPanelByLabel(label);
     if (!target) return;
-    const rect2 = target.getBoundingClientRect();
-    if (rect2.width === 0 || rect2.height === 0) return;
-    const scale = Math.min(PREVIEW_W / rect2.width, PREVIEW_H / rect2.height);
+    const rect = target.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
+    const ratio = Math.min(maxW / rect.width, maxH / rect.height);
+    const cardW = Math.max(80, Math.round(rect.width * ratio));
+    const cardH = Math.max(60, Math.round(rect.height * ratio));
+    setSize({ w: cardW, h: cardH });
     const clone = target.cloneNode(true);
     clone.style.position = "absolute";
     clone.style.top = "0";
     clone.style.left = "0";
     clone.style.right = "auto";
     clone.style.bottom = "auto";
-    clone.style.width = rect2.width + "px";
-    clone.style.height = rect2.height + "px";
-    clone.style.transform = `scale(${scale})`;
+    clone.style.width = rect.width + "px";
+    clone.style.height = rect.height + "px";
+    clone.style.transform = `scale(${ratio})`;
     clone.style.transformOrigin = "top left";
     clone.style.pointerEvents = "none";
     clone.style.animation = "none";
     clone.removeAttribute("data-modal-panel");
     clone.removeAttribute("data-modal-id");
+    clone.removeAttribute("data-window-key");
     clone.querySelectorAll('[role="dialog"], [data-portal]').forEach((el) => {
       el.style.display = "none";
     });
@@ -1311,30 +1318,66 @@ function TaskbarTabPreview({ label, anchorEl, onMouseEnter, onMouseLeave }) {
     return () => {
       inner.innerHTML = "";
     };
-  }, [label]);
+  }, [id, label, maxW, maxH]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { width: size.w, height: size.h },
+      className: "relative rounded-md overflow-hidden bg-white/95 border border-gray-300 shadow-md cursor-pointer hover:ring-2 hover:ring-blue-400 transition shrink-0",
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: previewRef, className: "absolute inset-0 overflow-hidden" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 px-2 py-1 text-[10px] font-medium text-white bg-gradient-to-t from-black/80 to-transparent truncate pointer-events-none", children: label }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onClose();
+            },
+            className: "absolute top-1 right-1 h-4 w-4 rounded-full bg-black/40 hover:bg-red-500/90 text-white flex items-center justify-center",
+            title: "Close window",
+            children: /* @__PURE__ */ jsx("svg", { className: "h-2.5 w-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function TaskbarTabPreview({ items, anchorEl, onActivate, onClose, onMouseEnter, onMouseLeave }) {
+  const MAX_W = 240;
+  const MAX_H = 160;
+  const isGroup = items.length > 1;
   const rect = anchorEl.getBoundingClientRect();
   const taskbarPos = getComputedStyle(document.documentElement).getPropertyValue("--taskbar-position")?.trim() || "bottom";
-  const left = Math.max(8, Math.min(rect.left + rect.width / 2 - PREVIEW_W / 2, window.innerWidth - PREVIEW_W - 8));
-  const top = taskbarPos === "top" ? rect.bottom + 8 : taskbarPos === "bottom" ? rect.top - PREVIEW_H - 8 : rect.top + rect.height / 2 - PREVIEW_H / 2;
-  const adjustedLeft = taskbarPos === "left" ? rect.right + 8 : taskbarPos === "right" ? rect.left - PREVIEW_W - 8 : left;
+  const top = taskbarPos === "top" ? rect.bottom + 8 : taskbarPos === "bottom" ? Math.max(8, rect.top - MAX_H - 24) : rect.top + rect.height / 2 - MAX_H / 2;
+  const left = taskbarPos === "left" || taskbarPos === "right" ? taskbarPos === "left" ? rect.right + 8 : rect.left - MAX_W - 8 : Math.max(8, rect.left + rect.width / 2 - (isGroup ? MAX_W : MAX_W / 2));
   return createPortal(
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "div",
       {
-        style: { position: "fixed", left: adjustedLeft, top, width: PREVIEW_W, height: PREVIEW_H, zIndex: 9999 },
-        className: "rounded-lg overflow-hidden bg-white/95 backdrop-blur-sm border border-gray-300 shadow-2xl",
+        style: { position: "fixed", left, top, zIndex: 9999, maxWidth: "calc(100vw - 16px)" },
+        className: isGroup ? "flex gap-2 p-2 rounded-lg bg-white/40 backdrop-blur-sm border border-white/30 shadow-2xl flex-wrap" : "",
         onMouseEnter,
         onMouseLeave,
-        children: [
-          /* @__PURE__ */ jsx("div", { ref: previewRef, className: "absolute inset-0 overflow-hidden" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 px-2 py-1 text-[11px] font-medium text-white bg-gradient-to-t from-black/80 to-transparent truncate pointer-events-none", children: label })
-        ]
+        children: items.map((it) => /* @__PURE__ */ jsx(
+          ThumbCard,
+          {
+            id: it.id,
+            label: it.label,
+            maxW: MAX_W,
+            maxH: MAX_H,
+            onClick: () => onActivate(it.id),
+            onClose: () => onClose(it.id)
+          },
+          it.id
+        ))
       }
     ),
     document.body
   );
 }
-function TaskbarWindows({ openWindows, onRemove, onCloseAll, onSplitView, onActivate }) {
+function TaskbarWindows({ openWindows, onRemove, onCloseAll, onSplitView, onActivate, onActivateById }) {
   const [target, setTarget] = useState(null);
   useEffect(() => {
     const el = document.getElementById("taskbar-windows");
@@ -1351,16 +1394,27 @@ function TaskbarWindows({ openWindows, onRemove, onCloseAll, onSplitView, onActi
     }
   }, []);
   const activeModalId = useSyncExternalStore(subscribeActive, getActiveModalId);
-  const [hoveredLabel, setHoveredLabel] = useState(null);
+  const [, forceTick] = useState(0);
+  useEffect(() => {
+    const onTitle = () => forceTick((t) => t + 1);
+    window.addEventListener("window-title-update", onTitle);
+    return () => window.removeEventListener("window-title-update", onTitle);
+  }, []);
+  const liveTitle = (label) => {
+    const panel = findPanelByLabel(label);
+    const titleEl = panel?.querySelector(".text-lg, .text-sm.font-medium");
+    return titleEl?.textContent?.trim() || label;
+  };
+  const [hoveredItems, setHoveredItems] = useState(null);
   const [hoveredAnchor, setHoveredAnchor] = useState(null);
   const hoverTimerRef = useRef(null);
-  const handleEnter = (label, el) => {
+  const handleEnter = (items, el) => {
     if (hoverTimerRef.current) {
       clearTimeout(hoverTimerRef.current);
       hoverTimerRef.current = null;
     }
     hoverTimerRef.current = setTimeout(() => {
-      setHoveredLabel(label);
+      setHoveredItems(items);
       setHoveredAnchor(el);
     }, 350);
   };
@@ -1370,7 +1424,7 @@ function TaskbarWindows({ openWindows, onRemove, onCloseAll, onSplitView, onActi
       hoverTimerRef.current = null;
     }
     hoverTimerRef.current = setTimeout(() => {
-      setHoveredLabel(null);
+      setHoveredItems(null);
       setHoveredAnchor(null);
     }, 150);
   };
@@ -1382,45 +1436,63 @@ function TaskbarWindows({ openWindows, onRemove, onCloseAll, onSplitView, onActi
   };
   const tabWindows = openWindows.filter((item) => !item.route || !WINDOW_REGISTRY[item.route]?.utility);
   if (!target || tabWindows.length === 0) return null;
+  const groups = [];
+  const idx = /* @__PURE__ */ new Map();
+  for (const item of tabWindows) {
+    const key = item.route ?? `entity:${item.id}`;
+    const i = idx.get(key);
+    if (i !== void 0) {
+      groups[i].items.push(item);
+    } else {
+      idx.set(key, groups.length);
+      const registryLabel = item.route ? WINDOW_REGISTRY[item.route]?.label : void 0;
+      groups.push({ key, route: item.route, label: registryLabel ?? item.label, items: [item] });
+    }
+  }
   return createPortal(
     /* @__PURE__ */ jsxs(Fragment, { children: [
-      tabWindows.map((item) => {
-        const icon = item.route ? navIcons[item.route] : null;
+      groups.map((group) => {
+        const icon = group.route ? navIcons[group.route] : null;
+        const primary = group.items[group.items.length - 1];
         let isActive = false;
         if (activeModalId) {
           const panel = document.querySelector(`[data-modal-id="${activeModalId}"]`);
           if (panel) {
             const titleEl = panel.querySelector(".text-lg, .text-sm.font-medium");
-            if (titleEl?.textContent?.includes(item.label)) isActive = true;
+            const titleText = titleEl?.textContent ?? "";
+            isActive = group.items.some((it) => titleText.includes(it.label));
           }
         }
+        const isGrouped = group.items.length > 1;
         return /* @__PURE__ */ jsxs(
           "button",
           {
-            onClick: () => onActivate(item.label),
-            onMouseEnter: (e) => handleEnter(item.label, e.currentTarget),
+            onClick: () => onActivateById(primary.id),
+            onMouseEnter: (e) => handleEnter(group.items, e.currentTarget),
             onMouseLeave: handleLeave,
             onDoubleClick: (e) => {
               e.stopPropagation();
-              window.dispatchEvent(new CustomEvent("modal-center", { detail: { label: item.label } }));
+              window.dispatchEvent(new CustomEvent("modal-center", { detail: { label: primary.label } }));
             },
             onContextMenu: (e) => {
               e.preventDefault();
               e.stopPropagation();
-              window.dispatchEvent(new CustomEvent("modal-context-menu", { detail: { label: item.label, x: e.clientX, y: e.clientY } }));
+              window.dispatchEvent(new CustomEvent("modal-context-menu", { detail: { label: primary.label, x: e.clientX, y: e.clientY } }));
             },
             style: { width: "var(--window-tab-width, 200px)", fontSize: "var(--window-tab-font-size, 12px)" },
-            className: `group flex items-center gap-1.5 rounded-lg px-3 py-2 font-medium transition-all min-w-0 shrink ${isActive ? "bg-blue-100/60 border border-blue-400/60 text-blue-700" : "bg-gray-50/40 border border-gray-200/40 text-gray-700 hover:bg-gray-200/40"}`,
+            "data-tab-group": group.key,
+            className: `group relative flex items-center gap-1.5 rounded-lg px-3 py-2 font-medium transition-all min-w-0 shrink ${isActive ? "bg-blue-100/60 border border-blue-400/60 text-blue-700" : "bg-gray-50/40 border border-gray-200/40 text-gray-700 hover:bg-gray-200/40"}`,
             children: [
               icon && isValidElement(icon) ? cloneElement(icon, { className: `h-3.5 w-3.5 shrink-0 ${isActive ? "text-blue-600" : "text-gray-400"}` }) : /* @__PURE__ */ jsx("svg", { className: `h-3.5 w-3.5 shrink-0 ${isActive ? "text-blue-600" : "text-gray-400"}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" }) }),
-              /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: item.label }),
-              /* @__PURE__ */ jsx("span", { role: "button", onClick: (e) => {
+              /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: isGrouped ? group.label : liveTitle(primary.label) }),
+              isGrouped && /* @__PURE__ */ jsx("span", { className: "shrink-0 px-1.5 py-0.5 rounded-full bg-blue-500/80 text-white text-[10px] font-bold leading-none", children: group.items.length }),
+              !isGrouped && /* @__PURE__ */ jsx("span", { role: "button", onClick: (e) => {
                 e.stopPropagation();
-                onRemove(item.id);
+                onRemove(primary.id);
               }, className: "ml-auto text-gray-400 hover:text-red-500 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) })
             ]
           },
-          item.id
+          group.key
         );
       }),
       /* @__PURE__ */ jsx("div", { className: "flex-1" }),
@@ -1435,11 +1507,21 @@ function TaskbarWindows({ openWindows, onRemove, onCloseAll, onSplitView, onActi
           ]
         }
       ),
-      hoveredLabel && hoveredAnchor && /* @__PURE__ */ jsx(
+      hoveredItems && hoveredAnchor && /* @__PURE__ */ jsx(
         TaskbarTabPreview,
         {
-          label: hoveredLabel,
+          items: hoveredItems,
           anchorEl: hoveredAnchor,
+          onActivate: (id) => {
+            onActivateById(id);
+            setHoveredItems(null);
+            setHoveredAnchor(null);
+          },
+          onClose: (id) => {
+            onRemove(id);
+            setHoveredItems(null);
+            setHoveredAnchor(null);
+          },
           onMouseEnter: cancelLeave,
           onMouseLeave: handleLeave
         }
@@ -1492,7 +1574,7 @@ function WindowManagerProvider({ children }) {
         setTimeout(() => {
           const panels = document.querySelectorAll("[data-modal-panel]");
           panels.forEach((p) => {
-            const titleEl = p.querySelector(".text-lg");
+            const titleEl = p.querySelector(".text-lg, .text-sm.font-medium");
             if (titleEl?.textContent?.includes(existing.label)) {
               const mid = p.getAttribute("data-modal-id");
               if (mid) activateModal(mid);
@@ -1516,6 +1598,17 @@ function WindowManagerProvider({ children }) {
     if (!WINDOW_REGISTRY[path] || !isPageEntry(WINDOW_REGISTRY[path])) return;
     const entry = WINDOW_REGISTRY[path];
     setOpenWindows((prev) => {
+      if (entry.multiInstance) {
+        const instanceCount = prev.filter((m) => m.type === "page" && m.route === path).length;
+        const nextNum = instanceCount + 1;
+        const id = `page:${path}:${Math.random().toString(36).slice(2, 8)}`;
+        return [...prev, {
+          id,
+          type: "page",
+          label: instanceCount === 0 ? entry.label : `${entry.label} ${nextNum}`,
+          route: path
+        }];
+      }
       const existing = prev.find((m) => m.type === "page" && m.route === path);
       if (existing) {
         if (entry.widget) {
@@ -1524,7 +1617,7 @@ function WindowManagerProvider({ children }) {
         setTimeout(() => {
           const panels = document.querySelectorAll("[data-modal-panel]");
           panels.forEach((p) => {
-            const titleEl = p.querySelector(".text-lg");
+            const titleEl = p.querySelector(".text-lg, .text-sm.font-medium");
             if (titleEl?.textContent?.includes(existing.label)) {
               const mid = p.getAttribute("data-modal-id");
               if (mid) activateModal(mid);
@@ -1559,12 +1652,17 @@ function WindowManagerProvider({ children }) {
         onActivate: (label) => {
           const panels = document.querySelectorAll("[data-modal-panel]");
           panels.forEach((p) => {
-            const titleEl = p.querySelector(".text-lg");
+            const titleEl = p.querySelector(".text-lg, .text-sm.font-medium");
             if (titleEl?.textContent?.includes(label)) {
               const mid = p.getAttribute("data-modal-id");
               if (mid) activateModal(mid);
             }
           });
+        },
+        onActivateById: (id) => {
+          const panel = document.querySelector(`[data-modal-panel][data-window-key="${id}"]`);
+          const mid = panel?.getAttribute("data-modal-id");
+          if (mid) activateModal(mid);
         }
       }
     ),
@@ -1582,5 +1680,5 @@ function WindowManagerProvider({ children }) {
 }
 
 export { CancelButton, CopyButton, DocFavStar, GLASS_DIVIDER, GLASS_INPUT_BG, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, client_default, glassStyle, isEntityEntry, isPageEntry, isSection, navIcons, navSections, sectionIcons, setShellApiClient, setShellNavIcons, setShellWindowRegistry, startMenuCategories, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };
-//# sourceMappingURL=chunk-OVUT6VRS.js.map
-//# sourceMappingURL=chunk-OVUT6VRS.js.map
+//# sourceMappingURL=chunk-ZR2DVGZI.js.map
+//# sourceMappingURL=chunk-ZR2DVGZI.js.map