@surdeddd/wmkit 0.4.2 → 0.5.0

package/dist/{chunk-GLBVT4AQ.cjs → chunk-RXAMUBUJ.cjs}

@@ -199,6 +199,8 @@ function createWindowManager(options = {}) {
   let focusedId = null;
   let viewport = options.viewport ?? { width: 0, height: 0 };
   let workspace = normalizeWorkspace(options.workspace, 0);
+  let activeTabs = {};
+  let groupCounter = 0;
   let seq = 0;
   let idCounter = 0;
   let cascadeIndex = 0;
@@ -217,7 +219,7 @@ function createWindowManager(options = {}) {
   const layouts = /* @__PURE__ */ new Map();
   function getState() {
     if (!snapshot) {
-      snapshot = { windows, order, focusedId, viewport, workspace };
+      snapshot = { windows, order, focusedId, viewport, workspace, groups: buildGroups() };
     }
     return snapshot;
   }
@@ -269,11 +271,54 @@ function createWindowManager(options = {}) {
   function onActiveWorkspace(win) {
     return win.workspace === workspace;
   }
+  function membersOf(groupId) {
+    return order.filter((entry) => windows[entry].groupId === groupId);
+  }
+  function isVisibleTab(win) {
+    return win.groupId === null || activeTabs[win.groupId] === win.id;
+  }
+  function buildGroups() {
+    const result = {};
+    for (const [groupId, activeId] of Object.entries(activeTabs)) {
+      result[groupId] = { id: groupId, activeId, members: membersOf(groupId) };
+    }
+    return result;
+  }
+  function syncGroup(source) {
+    if (source.groupId === null) return;
+    for (const id of membersOf(source.groupId)) {
+      if (id === source.id) continue;
+      const member = windows[id];
+      if (boundsEqual(member.bounds, source.bounds) && member.stage === source.stage && member.snapZone === source.snapZone && member.layer === source.layer && member.workspace === source.workspace) {
+        continue;
+      }
+      setWindow({
+        ...member,
+        bounds: source.bounds,
+        stage: source.stage,
+        snapZone: source.snapZone,
+        restoreBounds: source.restoreBounds,
+        restoreStage: source.restoreStage,
+        layer: source.layer,
+        workspace: source.workspace
+      });
+    }
+  }
+  function dissolveIfOrphaned(groupId) {
+    const members = membersOf(groupId);
+    if (members.length >= 2) return;
+    for (const id of members) {
+      setWindow({ ...windows[id], groupId: null });
+    }
+    const { [groupId]: _dropped, ...rest } = activeTabs;
+    activeTabs = rest;
+  }
   function topModalId() {
     for (let i = order.length - 1; i >= 0; i -= 1) {
       const win = windows[order[i]];
-      if (win.layer === "modal" && win.stage !== "minimized" && onActiveWorkspace(win))
+      if (win.layer === "modal" && win.stage !== "minimized" && onActiveWorkspace(win) && isVisibleTab(win)) {
         return win.id;
+      }
     }
     return null;
   }
@@ -281,7 +326,7 @@ function createWindowManager(options = {}) {
     const modal = topModalId();
     return order.filter((id) => {
       const win = windows[id];
-      if (win.stage === "minimized" || !onActiveWorkspace(win)) return false;
+      if (win.stage === "minimized" || !onActiveWorkspace(win) || !isVisibleTab(win)) return false;
       if (modal && win.layer !== "modal") return false;
       return true;
     });
@@ -344,6 +389,7 @@ function createWindowManager(options = {}) {
       snapZone: null,
       layer: init.layer ?? "normal",
       workspace: normalizeWorkspace(init.workspace, workspace),
+      groupId: null,
       minSize,
       maxSize,
       aspectRatio,
@@ -387,6 +433,13 @@ function createWindowManager(options = {}) {
     const win = windows[id];
     if (!win) return false;
     removeWindow(id);
+    if (win.groupId !== null) {
+      const remaining = membersOf(win.groupId);
+      if (activeTabs[win.groupId] === id && remaining[0]) {
+        activeTabs = { ...activeTabs, [win.groupId]: remaining[0] };
+      }
+      dissolveIfOrphaned(win.groupId);
+    }
     queueEvent(() => emitter.emit("close", { window: win }));
     if (focusedId === id) {
       focusTop();
@@ -403,6 +456,7 @@ function createWindowManager(options = {}) {
     const win = windows[id];
     if (!win) return false;
     if (!onActiveWorkspace(win)) setWorkspace(win.workspace);
+    if (!isVisibleTab(win)) activateTab(id);
     const modal = topModalId();
     if (modal && modal !== id && win.layer !== "modal") {
       const modalWin = windows[modal];
@@ -462,6 +516,7 @@ function createWindowManager(options = {}) {
     const next = build(win);
     if (!next) return false;
     setWindow(next);
+    syncGroup(next);
     queueEvent(() => emitter.emit("stage", { window: next, previous: win.stage }));
     commit();
     return true;
@@ -571,6 +626,7 @@ function createWindowManager(options = {}) {
     if (boundsEqual(bounds, win.bounds)) return true;
     const next = { ...win, bounds };
     setWindow(next);
+    syncGroup(next);
     queueEvent(() => emitter.emit("move", { window: next }));
     commit();
     return true;
@@ -592,6 +648,7 @@ function createWindowManager(options = {}) {
     if (boundsEqual(bounds, win.bounds) && !becameNormal) return true;
     const next = becameNormal ? { ...win, stage: "normal", snapZone: null, restoreBounds: null, bounds } : { ...win, bounds };
     setWindow(next);
+    syncGroup(next);
     if (becameNormal) queueEvent(() => emitter.emit("stage", { window: next, previous: "snapped" }));
     queueEvent(() => emitter.emit("resize", { window: next }));
     commit();
@@ -619,6 +676,7 @@ function createWindowManager(options = {}) {
     const resized = size.width !== next.bounds.width || size.height !== next.bounds.height;
     const finalWin = resized ? { ...next, bounds: { ...next.bounds, ...size } } : next;
     setWindow(finalWin);
+    syncGroup(finalWin);
     if (patch.layer && patch.layer !== win.layer) {
       order = sortByLayer(order);
       queueEvent(() => emitter.emit("order", { order }));
@@ -660,6 +718,7 @@ function createWindowManager(options = {}) {
     if (target === win.workspace) return false;
     const updated = { ...win, workspace: target };
     setWindow(updated);
+    syncGroup(updated);
     if (!onActiveWorkspace(updated) && focusedId === id) {
       focusTop();
       if (focusedId) emitFocus(windows[focusedId], id);
@@ -672,6 +731,77 @@ function createWindowManager(options = {}) {
     commit();
     return true;
   }
+  function emitGroup(groupId, previous) {
+    const members = membersOf(groupId);
+    const activeId = activeTabs[groupId];
+    queueEvent(() => emitter.emit("group", { groupId, members, activeId, previous }));
+  }
+  function group(ids) {
+    const seeds = ids.filter((id, index) => windows[id] && ids.indexOf(id) === index);
+    const host = seeds[0] ? windows[seeds[0]] : null;
+    if (!host) return null;
+    const expanded = [];
+    for (const id of seeds) {
+      const win = windows[id];
+      const siblings = win.groupId === null ? [id] : membersOf(win.groupId);
+      for (const entry of siblings) if (!expanded.includes(entry)) expanded.push(entry);
+    }
+    if (expanded.length < 2) return null;
+    const groupId = `${idPrefix}-group-${++groupCounter}`;
+    const retired = /* @__PURE__ */ new Set();
+    for (const id of expanded) {
+      const win = windows[id];
+      if (win.groupId !== null) retired.add(win.groupId);
+      setWindow({
+        ...win,
+        groupId,
+        bounds: host.bounds,
+        stage: host.stage,
+        snapZone: host.snapZone,
+        restoreBounds: host.restoreBounds,
+        restoreStage: host.restoreStage,
+        layer: host.layer,
+        workspace: host.workspace
+      });
+    }
+    const next = { ...activeTabs, [groupId]: host.id };
+    for (const old of retired) delete next[old];
+    activeTabs = next;
+    raise(host.id);
+    emitGroup(groupId, null);
+    queueEvent(() => emitter.emit("order", { order }));
+    commit();
+    if (onActiveWorkspace(host) && host.stage !== "minimized") focus(host.id);
+    return groupId;
+  }
+  function ungroup(id) {
+    const win = windows[id];
+    if (!win?.groupId) return false;
+    const groupId = win.groupId;
+    const wasActive = activeTabs[groupId] === id;
+    setWindow({ ...win, groupId: null });
+    const remaining = membersOf(groupId);
+    if (wasActive) activeTabs = { ...activeTabs, [groupId]: remaining[0] };
+    dissolveIfOrphaned(groupId);
+    if (membersOf(groupId).length >= 2) emitGroup(groupId, wasActive ? id : null);
+    commit();
+    focus(id);
+    return true;
+  }
+  function activateTab(id) {
+    const win = windows[id];
+    if (!win?.groupId) return false;
+    const groupId = win.groupId;
+    const previous = activeTabs[groupId];
+    if (previous === id) return false;
+    activeTabs = { ...activeTabs, [groupId]: id };
+    emitGroup(groupId, previous);
+    commit();
+    return true;
+  }
+  function groupMembers(groupId) {
+    return membersOf(groupId).map((id) => windows[id]);
+  }
   function sendToBack(id) {
     const win = windows[id];
     if (!win) return false;
@@ -703,10 +833,10 @@ function createWindowManager(options = {}) {
     );
   }
   function minimized() {
-    return Object.values(windows).filter((win) => win.stage === "minimized" && onActiveWorkspace(win)).sort((a, b) => a.openedSeq - b.openedSeq);
+    return Object.values(windows).filter((win) => win.stage === "minimized" && onActiveWorkspace(win) && isVisibleTab(win)).sort((a, b) => a.openedSeq - b.openedSeq);
   }
   function captureEntry() {
-    return { windows, order, focusedId, workspace };
+    return { windows, order, focusedId, workspace, activeTabs };
   }
   function recordHistory() {
     if (!historyDirty) return;
@@ -768,6 +898,7 @@ function createWindowManager(options = {}) {
     windows = entry.windows;
     order = [...entry.order];
     focusedId = entry.focusedId;
+    activeTabs = entry.activeTabs;
     const previousWorkspace = workspace;
     workspace = entry.workspace;
     if (workspace !== previousWorkspace) {
@@ -898,7 +1029,8 @@ function createWindowManager(options = {}) {
       })),
       order: [...order],
       focusedId,
-      workspace
+      workspace,
+      activeTabs: { ...activeTabs }
     };
   }
   function isBounds(value) {
@@ -953,6 +1085,7 @@ function createWindowManager(options = {}) {
         snapZone: ZONES.includes(raw.snapZone) ? raw.snapZone : null,
         layer: raw.layer,
         workspace: normalizeWorkspace(raw.workspace, 0),
+        groupId: typeof raw.groupId === "string" && raw.groupId.length > 0 ? raw.groupId : null,
         minSize: isSize(raw.minSize) ? { ...raw.minSize } : { width: 160, height: 100 },
         maxSize: readMaxSize(raw.maxSize),
         aspectRatio: typeof raw.aspectRatio === "number" && Number.isFinite(raw.aspectRatio) && raw.aspectRatio > 0 ? raw.aspectRatio : null,
@@ -994,7 +1127,18 @@ function createWindowManager(options = {}) {
     if (focusedCandidate && (focusedCandidate.stage === "minimized" || !onActiveWorkspace(focusedCandidate))) {
       focusedId = null;
     }
-    if (!focusedId) focusTop();
+    const restoredTabs = {};
+    const rawTabs = data.activeTabs;
+    for (const id of order) {
+      const groupId = windows[id].groupId;
+      if (groupId === null || restoredTabs[groupId]) continue;
+      const wanted = typeof rawTabs === "object" && rawTabs !== null ? rawTabs[groupId] : void 0;
+      const members = membersOf(groupId);
+      restoredTabs[groupId] = typeof wanted === "string" && members.includes(wanted) ? wanted : members[0];
+    }
+    activeTabs = restoredTabs;
+    for (const groupId of Object.keys(restoredTabs)) dissolveIfOrphaned(groupId);
+    if (!focusedId || !isVisibleTab(windows[focusedId])) focusTop();
     const modal = topModalId();
     if (modal) {
       const focusedWin = focusedId ? windows[focusedId] : null;
@@ -1048,6 +1192,10 @@ function createWindowManager(options = {}) {
     workspace: () => workspace,
     setWorkspace: (next) => transact(() => setWorkspace(next)),
     moveToWorkspace: (id, next) => transact(() => moveToWorkspace(id, next)),
+    group: (ids) => transact(() => group(ids)),
+    ungroup: (id) => transact(() => ungroup(id)),
+    activateTab: (id) => transact(() => activateTab(id)),
+    groupMembers,
     batch: (run) => transact(run),
     serialize,
     hydrate: (data) => transact(() => hydrate(data)),
@@ -1237,6 +1385,11 @@ function createDragStarter(ctx) {
       restored: win.stage === "normal",
       moved: false,
       zone: null,
+      groupTarget: null,
+      hoverId: null,
+      hoverTimer: 0,
+      clientX: event.clientX,
+      clientY: event.clientY,
       raf: 0,
       pendingX: 0,
       pendingY: 0,
@@ -1245,6 +1398,18 @@ function createDragStarter(ctx) {
       }
     };
     const el = ctx.windowElement(id);
+    function armGroup(target2) {
+      session.groupTarget = target2;
+      ctx.markGroupTarget(target2);
+    }
+    function clearHover() {
+      if (session.hoverTimer !== 0) {
+        view.clearTimeout(session.hoverTimer);
+        session.hoverTimer = 0;
+      }
+      session.groupTarget = null;
+      ctx.markGroupTarget(null);
+    }
     function flush() {
       if (!session.hasPending || ctx.currentDrag() !== session) return;
       session.hasPending = false;
@@ -1292,6 +1457,20 @@ function createDragStarter(ctx) {
         nextY = magnet.y;
       }
       wm.move(id, nextX, nextY);
+      const candidate = ctx.groupTarget(session.clientX, session.clientY, id);
+      if (candidate !== session.hoverId) {
+        session.hoverId = candidate;
+        clearHover();
+        if (candidate) {
+          if (ctx.groupDwell <= 0) armGroup(candidate);
+          else session.hoverTimer = view.setTimeout(() => armGroup(candidate), ctx.groupDwell);
+        }
+      }
+      if (session.groupTarget) {
+        session.zone = null;
+        ctx.hidePreview();
+        return;
+      }
       if (ctx.snapEnabled && current.snappable) {
         const viewport = wm.getState().viewport;
         const rawZone = detectSnapZone(session.pendingX, session.pendingY, viewport, ctx.snapDetect);
@@ -1324,6 +1503,8 @@ function createDragStarter(ctx) {
       }
       session.pendingX = movePoint.x;
       session.pendingY = movePoint.y;
+      session.clientX = moveEvent.clientX;
+      session.clientY = moveEvent.clientY;
       session.hasPending = true;
       if (session.raf === 0) session.raf = view.requestAnimationFrame(flush);
     }
@@ -1358,6 +1539,8 @@ function createDragStarter(ctx) {
               wm.move(id, session.startBounds.x, session.startBounds.y);
             }
           }
+        } else if (session.moved && session.groupTarget) {
+          if (wm.group([session.groupTarget, id])) wm.activateTab(id);
         } else if (session.moved && session.zone) {
           if (session.zone === "maximize") wm.maximize(id);
           else wm.snap(id, session.zone);
@@ -1377,6 +1560,8 @@ function createDragStarter(ctx) {
           el.style.willChange = "";
         }
         ctx.hidePreview();
+        if (session.hoverTimer !== 0) view.clearTimeout(session.hoverTimer);
+        ctx.markGroupTarget(null);
         if (cancelled) wm.abortInteraction();
         else wm.endInteraction();
       }
@@ -1546,6 +1731,8 @@ function attachDesktop(wm, element, options = {}) {
   const doc = element.ownerDocument;
   const view = windowOf(element);
   const coarsePointer = typeof view.matchMedia === "function" && view.matchMedia("(pointer: coarse)").matches;
+  const groupingEnabled = options.grouping !== false;
+  const groupDwell = (typeof options.grouping === "object" ? options.grouping.dwell : void 0) ?? 420;
   const snapEnabled = options.snap !== false;
   const snapOptions = typeof options.snap === "object" ? options.snap : {};
   const snapPreviewEnabled = snapOptions.preview !== false;
@@ -1569,6 +1756,7 @@ function attachDesktop(wm, element, options = {}) {
   let lastOrder = null;
   let lastFocused = null;
   let drag = null;
+  let groupTargetId = null;
   let cachedRect = null;
   let rectUsers = 0;
   let announcer = null;
@@ -1640,6 +1828,29 @@ function attachDesktop(wm, element, options = {}) {
     hitEdge,
     hitCorner,
     magnetThreshold,
+    groupDwell,
+    groupTarget(clientX, clientY, selfId) {
+      if (!groupingEnabled || typeof doc.elementsFromPoint !== "function") return null;
+      for (const node of doc.elementsFromPoint(clientX, clientY)) {
+        const handle = node.closest?.("[data-wm-drag]");
+        const host = handle?.closest("[data-wm-window]");
+        const id = host?.dataset.wmWindow;
+        if (id && id !== selfId && registry.has(id)) return id;
+      }
+      return null;
+    },
+    markGroupTarget(id) {
+      if (groupTargetId === id) return;
+      if (groupTargetId) {
+        const previous = registry.get(groupTargetId);
+        if (previous) delete previous.element.dataset.wmTabTarget;
+      }
+      groupTargetId = id;
+      if (id) {
+        const next = registry.get(id);
+        if (next) next.element.dataset.wmTabTarget = "";
+      }
+    },
     currentDrag: () => drag,
     claimDrag(session) {
       drag = session;
@@ -1657,18 +1868,25 @@ function attachDesktop(wm, element, options = {}) {
     observer.observe(element);
     cleanup.push(() => observer.disconnect());
   }
-  function syncWindow(attached, win, zIndex, activeWorkspace) {
+  function syncWindow(attached, win, zIndex, activeWorkspace, activeTab) {
     const el = attached.element;
     const firstSync = attached.lastState === null;
     if (firstSync) el.style.transition = "none";
-    if (attached.lastState !== win || attached.lastWorkspace !== activeWorkspace) {
+    if (attached.lastState !== win || attached.lastWorkspace !== activeWorkspace || attached.lastTab !== activeTab) {
       el.style.transform = `translate3d(${win.bounds.x}px, ${win.bounds.y}px, 0)`;
       el.style.width = `${win.bounds.width}px`;
       el.style.height = `${win.bounds.height}px`;
       el.dataset.wmStage = win.stage;
       el.dataset.wmLayer = win.layer;
       el.dataset.wmWorkspace = String(win.workspace);
-      const hide = win.stage === "minimized" || win.workspace !== activeWorkspace;
+      if (win.groupId === null) {
+        delete el.dataset.wmGroup;
+        delete el.dataset.wmTab;
+      } else {
+        el.dataset.wmGroup = win.groupId;
+        el.dataset.wmTab = activeTab ? "active" : "inactive";
+      }
+      const hide = win.stage === "minimized" || win.workspace !== activeWorkspace || !activeTab;
       if (hide && !el.hidden && el.contains(doc.activeElement)) {
         element.focus({ preventScroll: true });
       }
@@ -1686,6 +1904,7 @@ function attachDesktop(wm, element, options = {}) {
       }
       attached.lastState = win;
       attached.lastWorkspace = activeWorkspace;
+      attached.lastTab = activeTab;
     }
     if (attached.lastZ !== zIndex) {
       el.style.zIndex = String(zIndex + 1);
@@ -1703,8 +1922,9 @@ function attachDesktop(wm, element, options = {}) {
       const attached = registry.get(id);
       const win = state.windows[id];
       if (!attached || !win) return;
-      if (orderChanged || attached.lastState !== win || attached.lastWorkspace !== state.workspace) {
-        syncWindow(attached, win, index, state.workspace);
+      const activeTab = win.groupId === null || state.groups[win.groupId]?.activeId === win.id;
+      if (orderChanged || attached.lastState !== win || attached.lastWorkspace !== state.workspace || attached.lastTab !== activeTab) {
+        syncWindow(attached, win, index, state.workspace, activeTab);
       }
     });
     if (state.focusedId !== lastFocused) {
@@ -1807,6 +2027,7 @@ function attachDesktop(wm, element, options = {}) {
       lastState: null,
       lastZ: -1,
       lastWorkspace: -1,
+      lastTab: true,
       cleanup: []
     };
     windowElement.dataset.wmWindow = id;
@@ -2046,5 +2267,5 @@ exports.flipToTarget = flipToTarget;
 exports.magnetize = magnetize;
 exports.prefersReducedMotion = prefersReducedMotion;
 exports.zoneBounds = zoneBounds;
-//# sourceMappingURL=chunk-GLBVT4AQ.cjs.map
-//# sourceMappingURL=chunk-GLBVT4AQ.cjs.map
+//# sourceMappingURL=chunk-RXAMUBUJ.cjs.map
+//# sourceMappingURL=chunk-RXAMUBUJ.cjs.map