@surdeddd/wmkit 0.4.2 → 0.5.0

package/README.md

@@ -15,6 +15,7 @@
 - 🪟 **Full window lifecycle** — open, close, focus, minimize, maximize, restore, drag, 8-direction resize
 - 🧠 **Headless core** — a serializable state machine plus a DOM controller; bring your own markup or use the glass theme
 - ⚛️ **Official adapters** — `@surdeddd/wmkit/react`, `/vue`, `/svelte`, `/solid`, `/angular`, all thin sugar over one core
+- 🗃️ **Tab groups** — drop one titlebar onto another and the windows share a frame, dockview style
 - ⊞ **Snap zones** — halves, quarters, thirds and drag-to-top maximize with a live preview
 - 🧲 **Magnetism** — window edges align to neighbours and the viewport while dragging
 - ↩️ **Undo/redo** — every mutation is one step; a whole drag collapses into a single history entry

package/README.ru.md

@@ -11,6 +11,7 @@
 - 🪟 **Полный жизненный цикл окна** — открытие, закрытие, фокус, сворачивание, разворачивание, восстановление, drag, ресайз в 8 направлениях
 - 🧠 **Headless-ядро** — сериализуемая стейт-машина плюс DOM-контроллер; своя разметка или готовая стеклянная тема
 - ⚛️ **Родные адаптеры** — `@surdeddd/wmkit/react`, `/vue`, `/svelte`, `/solid`, `/angular`, тонкий сахар над одним ядром
+- 🗃️ **Вкладочные группы** — бросьте заголовок на заголовок, и окна начнут делить одну рамку
 - ⊞ **Snap-зоны** — половины, четверти, трети и максимизация от верхнего края с живым превью
 - 🧲 **Магнетизм** — края окна прилипают к соседям и вьюпорту при перетаскивании
 - ↩️ **Undo/redo** — каждая мутация = один шаг; целый drag схлопывается в одну запись истории

package/dist/angular.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkGLBVT4AQ_cjs = require('./chunk-GLBVT4AQ.cjs');
+var chunkRXAMUBUJ_cjs = require('./chunk-RXAMUBUJ.cjs');
 var core = require('@angular/core');
 
 function onDestroy(dispose) {
@@ -13,7 +13,7 @@ function onDestroy(dispose) {
   destroyRef?.onDestroy(dispose);
 }
 function useWindowManager(options) {
-  const wm = chunkGLBVT4AQ_cjs.createWindowManager(options);
+  const wm = chunkRXAMUBUJ_cjs.createWindowManager(options);
   onDestroy(() => wm.destroy());
   return wm;
 }
@@ -28,7 +28,7 @@ function useWmWindow(wm, id) {
   return core.computed(() => state().windows[id]);
 }
 function createDesktop(wm, options) {
-  const binder = chunkGLBVT4AQ_cjs.createDesktopBinder(wm, options);
+  const binder = chunkRXAMUBUJ_cjs.createDesktopBinder(wm, options);
   onDestroy(() => binder.destroy());
   return {
     binder,

package/dist/angular.d.cts

@@ -1,6 +1,6 @@
 import { Signal } from '@angular/core';
-import { W as WindowManager, M as ManagerOptions, a as ManagerState, b as WindowState } from './types-t6pyVYKN.cjs';
-import { D as DesktopBinder, W as WindowAttachOptions, a as DesktopOptions } from './binder-Dl07SXIM.cjs';
+import { W as WindowManager, M as ManagerOptions, a as ManagerState, b as WindowState } from './types-LP7Inhxx.cjs';
+import { D as DesktopBinder, W as WindowAttachOptions, a as DesktopOptions } from './binder-EBroZTRw.cjs';
 
 declare function useWindowManager(options?: ManagerOptions): WindowManager;
 declare function useWmState(wm: WindowManager): Signal<ManagerState>;

package/dist/angular.d.ts

@@ -1,6 +1,6 @@
 import { Signal } from '@angular/core';
-import { W as WindowManager, M as ManagerOptions, a as ManagerState, b as WindowState } from './types-t6pyVYKN.js';
-import { D as DesktopBinder, W as WindowAttachOptions, a as DesktopOptions } from './binder-B2A2IZGh.js';
+import { W as WindowManager, M as ManagerOptions, a as ManagerState, b as WindowState } from './types-LP7Inhxx.js';
+import { D as DesktopBinder, W as WindowAttachOptions, a as DesktopOptions } from './binder-Ca3GOfZX.js';
 
 declare function useWindowManager(options?: ManagerOptions): WindowManager;
 declare function useWmState(wm: WindowManager): Signal<ManagerState>;

package/dist/angular.js

@@ -1,4 +1,4 @@
-import { createWindowManager, createDesktopBinder } from './chunk-GGDF2EWV.js';
+import { createWindowManager, createDesktopBinder } from './chunk-L43XBN44.js';
 import { signal, computed, inject, DestroyRef } from '@angular/core';
 
 function onDestroy(dispose) {

package/dist/{binder-B2A2IZGh.d.ts → binder-Ca3GOfZX.d.ts}

@@ -1,4 +1,4 @@
-import { f as Size, B as Bounds, g as SnapZone, W as WindowManager, b as WindowState } from './types-t6pyVYKN.js';
+import { f as Size, B as Bounds, g as SnapZone, W as WindowManager, b as WindowState } from './types-LP7Inhxx.js';
 
 declare function clamp(value: number, min: number, max: number): number;
 declare function clampSize(size: Size, min: Size, max: Size | null): Size;
@@ -54,7 +54,11 @@ interface HitAreaOptions {
 interface MagnetismOptions {
     threshold?: number;
 }
+interface GroupingOptions {
+    dwell?: number;
+}
 interface DesktopOptions {
+    grouping?: boolean | GroupingOptions;
     snap?: boolean | DesktopSnapOptions;
     keyboard?: boolean | DesktopKeyboardOptions;
     announce?: boolean | Partial<AnnouncerMessages>;

package/dist/{binder-Dl07SXIM.d.cts → binder-EBroZTRw.d.cts}

@@ -1,4 +1,4 @@
-import { f as Size, B as Bounds, g as SnapZone, W as WindowManager, b as WindowState } from './types-t6pyVYKN.cjs';
+import { f as Size, B as Bounds, g as SnapZone, W as WindowManager, b as WindowState } from './types-LP7Inhxx.cjs';
 
 declare function clamp(value: number, min: number, max: number): number;
 declare function clampSize(size: Size, min: Size, max: Size | null): Size;
@@ -54,7 +54,11 @@ interface HitAreaOptions {
 interface MagnetismOptions {
     threshold?: number;
 }
+interface GroupingOptions {
+    dwell?: number;
+}
 interface DesktopOptions {
+    grouping?: boolean | GroupingOptions;
     snap?: boolean | DesktopSnapOptions;
     keyboard?: boolean | DesktopKeyboardOptions;
     announce?: boolean | Partial<AnnouncerMessages>;

package/dist/{chunk-GGDF2EWV.js → chunk-L43XBN44.js}

@@ -197,6 +197,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;
@@ -215,7 +217,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;
   }
@@ -267,11 +269,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;
   }
@@ -279,7 +324,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;
     });
@@ -342,6 +387,7 @@ function createWindowManager(options = {}) {
       snapZone: null,
       layer: init.layer ?? "normal",
       workspace: normalizeWorkspace(init.workspace, workspace),
+      groupId: null,
       minSize,
       maxSize,
       aspectRatio,
@@ -385,6 +431,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();
@@ -401,6 +454,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];
@@ -460,6 +514,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;
@@ -569,6 +624,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;
@@ -590,6 +646,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();
@@ -617,6 +674,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 }));
@@ -658,6 +716,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);
@@ -670,6 +729,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;
@@ -701,10 +831,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;
@@ -766,6 +896,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) {
@@ -896,7 +1027,8 @@ function createWindowManager(options = {}) {
       })),
       order: [...order],
       focusedId,
-      workspace
+      workspace,
+      activeTabs: { ...activeTabs }
     };
   }
   function isBounds(value) {
@@ -951,6 +1083,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,
@@ -992,7 +1125,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;
@@ -1046,6 +1190,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)),
@@ -1235,6 +1383,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,
@@ -1243,6 +1396,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;
@@ -1290,6 +1455,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);
@@ -1322,6 +1501,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);
     }
@@ -1356,6 +1537,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);
@@ -1375,6 +1558,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();
       }
@@ -1544,6 +1729,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;
@@ -1567,6 +1754,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;
@@ -1638,6 +1826,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;
@@ -1655,18 +1866,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 });
       }
@@ -1684,6 +1902,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);
@@ -1701,8 +1920,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) {
@@ -1805,6 +2025,7 @@ function attachDesktop(wm, element, options = {}) {
       lastState: null,
       lastZ: -1,
       lastWorkspace: -1,
+      lastTab: true,
       cleanup: []
     };
     windowElement.dataset.wmWindow = id;
@@ -2028,5 +2249,5 @@ function createDesktopBinder(wm, options = {}) {
 }
 
 export { applyAspect, attachDesktop, boundsEqual, clamp, clampSize, clampToViewport, createAnnouncer, createDesktopBinder, createEmitter, createWindowManager, defaultMessages, detectSnapZone, flipFromTarget, flipToTarget, magnetize, prefersReducedMotion, zoneBounds };
-//# sourceMappingURL=chunk-GGDF2EWV.js.map
-//# sourceMappingURL=chunk-GGDF2EWV.js.map
+//# sourceMappingURL=chunk-L43XBN44.js.map
+//# sourceMappingURL=chunk-L43XBN44.js.map