react-os-shell 0.1.4 → 0.1.6

package/dist/{chunk-WYHVAKJ5.js → chunk-2EBFERVD.js}

@@ -1269,6 +1269,107 @@ function RestoredRegistryModal({ item, onClose, onMinimize }) {
     }
   );
 }
+function findPanelByLabel(label) {
+  const panels = document.querySelectorAll("[data-modal-panel]");
+  for (const p of Array.from(panels)) {
+    const t = p.querySelector(".text-lg, .text-sm.font-medium");
+    if (t?.textContent?.includes(label)) return p;
+  }
+  return null;
+}
+function ThumbCard({ label, width, height, onClick, onClose }) {
+  const previewRef = useRef(null);
+  useEffect(() => {
+    const inner = previewRef.current;
+    if (!inner) return;
+    const target = findPanelByLabel(label);
+    if (!target) return;
+    const rect = target.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
+    const scale = Math.min(width / rect.width, height / rect.height);
+    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 = rect.width + "px";
+    clone.style.height = rect.height + "px";
+    clone.style.transform = `scale(${scale})`;
+    clone.style.transformOrigin = "top left";
+    clone.style.pointerEvents = "none";
+    clone.style.animation = "none";
+    clone.removeAttribute("data-modal-panel");
+    clone.removeAttribute("data-modal-id");
+    clone.querySelectorAll('[role="dialog"], [data-portal]').forEach((el) => {
+      el.style.display = "none";
+    });
+    inner.innerHTML = "";
+    inner.appendChild(clone);
+    return () => {
+      inner.innerHTML = "";
+    };
+  }, [label, width, height]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { width, height },
+      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",
+      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 PREVIEW_W = 240;
+  const PREVIEW_H = 150;
+  const isGroup = items.length > 1;
+  const totalWidth = isGroup ? Math.min(items.length * (PREVIEW_W + 8) + 8, window.innerWidth - 16) : PREVIEW_W;
+  const totalHeight = isGroup ? PREVIEW_H + 16 : PREVIEW_H;
+  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 - totalWidth / 2, window.innerWidth - totalWidth - 8));
+  const top = taskbarPos === "top" ? rect.bottom + 8 : taskbarPos === "bottom" ? rect.top - totalHeight - 8 : rect.top + rect.height / 2 - totalHeight / 2;
+  const adjustedLeft = taskbarPos === "left" ? rect.right + 8 : taskbarPos === "right" ? rect.left - totalWidth - 8 : left;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { position: "fixed", left: adjustedLeft, top, zIndex: 9999 },
+        className: isGroup ? "flex gap-2 p-2 rounded-lg bg-white/40 backdrop-blur-sm border border-white/30 shadow-2xl" : "",
+        onMouseEnter,
+        onMouseLeave,
+        children: items.map((it) => /* @__PURE__ */ jsx(
+          ThumbCard,
+          {
+            label: it.label,
+            width: PREVIEW_W,
+            height: PREVIEW_H,
+            onClick: () => onActivate(it.label),
+            onClose: () => onClose(it.id)
+          },
+          it.id
+        ))
+      }
+    ),
+    document.body
+  );
+}
 function TaskbarWindows({ openWindows, onRemove, onCloseAll, onSplitView, onActivate }) {
   const [target, setTarget] = useState(null);
   useEffect(() => {
@@ -1286,45 +1387,105 @@ function TaskbarWindows({ openWindows, onRemove, onCloseAll, onSplitView, onActi
     }
   }, []);
   const activeModalId = useSyncExternalStore(subscribeActive, getActiveModalId);
+  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 = (items, el) => {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+    hoverTimerRef.current = setTimeout(() => {
+      setHoveredItems(items);
+      setHoveredAnchor(el);
+    }, 350);
+  };
+  const handleLeave = () => {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+    hoverTimerRef.current = setTimeout(() => {
+      setHoveredItems(null);
+      setHoveredAnchor(null);
+    }, 150);
+  };
+  const cancelLeave = () => {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+  };
   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),
+            onClick: () => onActivate(primary.label),
+            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" }),
@@ -1338,6 +1499,25 @@ function TaskbarWindows({ openWindows, onRemove, onCloseAll, onSplitView, onActi
             "Split"
           ]
         }
+      ),
+      hoveredItems && hoveredAnchor && /* @__PURE__ */ jsx(
+        TaskbarTabPreview,
+        {
+          items: hoveredItems,
+          anchorEl: hoveredAnchor,
+          onActivate: (label) => {
+            onActivate(label);
+            setHoveredItems(null);
+            setHoveredAnchor(null);
+          },
+          onClose: (id) => {
+            onRemove(id);
+            setHoveredItems(null);
+            setHoveredAnchor(null);
+          },
+          onMouseEnter: cancelLeave,
+          onMouseLeave: handleLeave
+        }
       )
     ] }),
     target
@@ -1387,7 +1567,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);
@@ -1411,6 +1591,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) {
@@ -1419,7 +1610,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);
@@ -1454,7 +1645,7 @@ 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);
@@ -1477,5 +1668,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-WYHVAKJ5.js.map
-//# sourceMappingURL=chunk-WYHVAKJ5.js.map
+//# sourceMappingURL=chunk-2EBFERVD.js.map
+//# sourceMappingURL=chunk-2EBFERVD.js.map