@surdeddd/wmkit 0.7.2 → 0.9.0

package/dist/{chunk-FOWW4LXS.js → chunk-ZWUVWRUS.cjs}

@@ -1,3 +1,7 @@
+'use strict';
+
+var chunkBDHFXEJN_cjs = require('./chunk-BDHFXEJN.cjs');
+
 // src/core/emitter.ts
 function createEmitter() {
   const listeners = /* @__PURE__ */ new Map();
@@ -26,143 +30,6 @@ function createEmitter() {
   };
 }
 
-// src/core/geometry.ts
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-function clampSize(size, min, max) {
-  return {
-    width: clamp(size.width, min.width, max ? max.width : Number.POSITIVE_INFINITY),
-    height: clamp(size.height, min.height, max ? max.height : Number.POSITIVE_INFINITY)
-  };
-}
-function clampToViewport(bounds, viewport, minVisible) {
-  if (viewport.width <= 0 || viewport.height <= 0) return bounds;
-  const visibleX = Math.min(minVisible, bounds.width);
-  const visibleY = Math.min(minVisible, bounds.height);
-  const x = clamp(bounds.x, visibleX - bounds.width, Math.max(0, viewport.width - visibleX));
-  const y = clamp(bounds.y, 0, Math.max(0, viewport.height - visibleY));
-  return x === bounds.x && y === bounds.y ? bounds : { ...bounds, x, y };
-}
-function boundsEqual(a, b) {
-  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
-}
-function applyAspect(size, ratio, min, max, drive) {
-  if (!Number.isFinite(ratio) || ratio <= 0) return clampSize(size, min, max);
-  const maxWidth = max ? max.width : Number.POSITIVE_INFINITY;
-  const maxHeight = max ? max.height : Number.POSITIVE_INFINITY;
-  if (drive === "height") {
-    const height = clamp(
-      size.height,
-      Math.max(min.height, min.width / ratio),
-      Math.min(maxHeight, maxWidth / ratio)
-    );
-    return { width: height * ratio, height };
-  }
-  const width = clamp(
-    size.width,
-    Math.max(min.width, min.height * ratio),
-    Math.min(maxWidth, maxHeight * ratio)
-  );
-  return { width, height: width / ratio };
-}
-function zoneBounds(zone, viewport) {
-  const w = viewport.width;
-  const h = viewport.height;
-  const halfW = Math.round(w / 2);
-  const halfH = Math.round(h / 2);
-  const oneThird = Math.round(w / 3);
-  const twoThirds = Math.round(w * 2 / 3);
-  switch (zone) {
-    case "left-third":
-      return { x: 0, y: 0, width: oneThird, height: h };
-    case "center-third":
-      return { x: oneThird, y: 0, width: twoThirds - oneThird, height: h };
-    case "right-third":
-      return { x: twoThirds, y: 0, width: w - twoThirds, height: h };
-    case "left":
-      return { x: 0, y: 0, width: halfW, height: h };
-    case "right":
-      return { x: halfW, y: 0, width: w - halfW, height: h };
-    case "top":
-      return { x: 0, y: 0, width: w, height: halfH };
-    case "bottom":
-      return { x: 0, y: halfH, width: w, height: h - halfH };
-    case "top-left":
-      return { x: 0, y: 0, width: halfW, height: halfH };
-    case "top-right":
-      return { x: halfW, y: 0, width: w - halfW, height: halfH };
-    case "bottom-left":
-      return { x: 0, y: halfH, width: halfW, height: h - halfH };
-    case "bottom-right":
-      return { x: halfW, y: halfH, width: w - halfW, height: h - halfH };
-  }
-}
-function detectSnapZone(x, y, viewport, options = {}) {
-  const threshold = options.threshold ?? 12;
-  const cornerSize = options.cornerSize ?? 64;
-  const w = viewport.width;
-  const h = viewport.height;
-  if (w <= 0 || h <= 0) return null;
-  const nearLeft = x <= threshold;
-  const nearRight = x >= w - threshold;
-  const nearTop = y <= threshold;
-  const nearBottom = y >= h - threshold;
-  if (nearLeft || nearRight) {
-    const side = nearLeft ? "left" : "right";
-    if (y <= cornerSize) return `top-${side}`;
-    if (y >= h - cornerSize) return `bottom-${side}`;
-    return side;
-  }
-  if (nearTop) {
-    if (x <= cornerSize) return "top-left";
-    if (x >= w - cornerSize) return "top-right";
-    return "top";
-  }
-  if (nearBottom) {
-    if (x <= cornerSize) return "bottom-left";
-    if (x >= w - cornerSize) return "bottom-right";
-    return "bottom";
-  }
-  return null;
-}
-function nearestEdge(low, high, targetLow, targetHigh) {
-  return [targetLow - low, targetHigh - low, targetLow - high, targetHigh - high];
-}
-function magnetize(bounds, targets, threshold) {
-  const result = { x: bounds.x, y: bounds.y, snappedX: false, snappedY: false };
-  if (threshold <= 0 || targets.length === 0) return result;
-  let bestX = threshold + 1;
-  let bestY = threshold + 1;
-  for (const target of targets) {
-    for (const delta of nearestEdge(
-      bounds.x,
-      bounds.x + bounds.width,
-      target.x,
-      target.x + target.width
-    )) {
-      if (Math.abs(delta) <= threshold && Math.abs(delta) < Math.abs(bestX)) bestX = delta;
-    }
-    for (const delta of nearestEdge(
-      bounds.y,
-      bounds.y + bounds.height,
-      target.y,
-      target.y + target.height
-    )) {
-      if (Math.abs(delta) <= threshold && Math.abs(delta) < Math.abs(bestY)) bestY = delta;
-    }
-  }
-  if (Math.abs(bestX) <= threshold) {
-    result.x = bounds.x + bestX;
-    result.snappedX = true;
-  }
-  if (Math.abs(bestY) <= threshold) {
-    result.y = bounds.y + bestY;
-    result.snappedY = true;
-  }
-  return result;
-}
-
 // src/core/manager.ts
 var LAYER_RANK = { normal: 0, floating: 1, modal: 2 };
 var STAGES = ["normal", "minimized", "maximized", "snapped"];
@@ -346,7 +213,7 @@ function createWindowManager(options = {}) {
     for (const id of members) {
       if (id === effective.id) continue;
       const member = windows[id];
-      if (boundsEqual(member.bounds, effective.bounds) && member.stage === effective.stage && member.snapZone === effective.snapZone && member.layer === effective.layer && member.workspace === effective.workspace) {
+      if (chunkBDHFXEJN_cjs.boundsEqual(member.bounds, effective.bounds) && member.stage === effective.stage && member.snapZone === effective.snapZone && member.layer === effective.layer && member.workspace === effective.workspace) {
         continue;
       }
       setWindow({
@@ -411,8 +278,8 @@ function createWindowManager(options = {}) {
     queueEvent(() => emitter.emit("focus", { window: win, previous }));
   }
   function normalizeSize(size, win, drive = "width") {
-    if (win.aspectRatio === null) return clampSize(size, win.minSize, win.maxSize);
-    return applyAspect(size, win.aspectRatio, win.minSize, win.maxSize, drive);
+    if (win.aspectRatio === null) return chunkBDHFXEJN_cjs.clampSize(size, win.minSize, win.maxSize);
+    return chunkBDHFXEJN_cjs.applyAspect(size, win.aspectRatio, win.minSize, win.maxSize, drive);
   }
   function positionForOpen(init) {
     if (init.x !== void 0 && init.y !== void 0) return { x: init.x, y: init.y };
@@ -439,7 +306,7 @@ function createWindowManager(options = {}) {
       width: init.width ?? defaultSize.width,
       height: init.height ?? defaultSize.height
     };
-    const size = aspectRatio === null ? clampSize(requested, minSize, maxSize) : applyAspect(
+    const size = aspectRatio === null ? chunkBDHFXEJN_cjs.clampSize(requested, minSize, maxSize) : chunkBDHFXEJN_cjs.applyAspect(
       requested,
       aspectRatio,
       minSize,
@@ -448,7 +315,7 @@ function createWindowManager(options = {}) {
     );
     const position = positionForOpen(init);
     let bounds = { ...position, ...size };
-    if (keepInViewport) bounds = clampToViewport(bounds, viewport, minVisible);
+    if (keepInViewport) bounds = chunkBDHFXEJN_cjs.clampToViewport(bounds, viewport, minVisible);
     const requestedStage = init.stage ?? "normal";
     const stage = requestedStage === "snapped" ? "normal" : requestedStage;
     let win = {
@@ -569,7 +436,7 @@ function createWindowManager(options = {}) {
     return { x: 0, y: 0, width: viewport.width, height: viewport.height };
   }
   function snapBounds(win, zone) {
-    const rect = zoneBounds(zone, viewport);
+    const rect = chunkBDHFXEJN_cjs.zoneBounds(zone, viewport);
     const byWidth = normalizeSize(rect, win);
     const size = byWidth.height > rect.height ? normalizeSize(rect, win, "height") : byWidth;
     return {
@@ -654,7 +521,7 @@ function createWindowManager(options = {}) {
         snapZone: null,
         restoreBounds: null,
         restoreStage: null,
-        bounds: keepInViewport ? clampToViewport(bounds, viewport, minVisible) : bounds
+        bounds: keepInViewport ? chunkBDHFXEJN_cjs.clampToViewport(bounds, viewport, minVisible) : bounds
       };
     });
     if (result) focusUnlessBlocked(id);
@@ -670,7 +537,7 @@ function createWindowManager(options = {}) {
         snapZone: null,
         restoreBounds: null,
         restoreStage: null,
-        bounds: keepInViewport ? clampToViewport(next, viewport, minVisible) : next
+        bounds: keepInViewport ? chunkBDHFXEJN_cjs.clampToViewport(next, viewport, minVisible) : next
       };
     });
     if (result) focusUnlessBlocked(id);
@@ -695,8 +562,8 @@ function createWindowManager(options = {}) {
     const win = windows[id];
     if (win?.stage !== "normal") return false;
     let bounds = { ...win.bounds, x, y };
-    if (keepInViewport) bounds = clampToViewport(bounds, viewport, minVisible);
-    if (boundsEqual(bounds, win.bounds)) return true;
+    if (keepInViewport) bounds = chunkBDHFXEJN_cjs.clampToViewport(bounds, viewport, minVisible);
+    if (chunkBDHFXEJN_cjs.boundsEqual(bounds, win.bounds)) return true;
     const next = { ...win, bounds };
     setWindow(next);
     syncGroup(next);
@@ -716,9 +583,9 @@ function createWindowManager(options = {}) {
     const drive = Math.abs(merged.height - win.bounds.height) > Math.abs(merged.width - win.bounds.width) ? "height" : "width";
     const size = normalizeSize(merged, win, drive);
     let bounds = { x: merged.x, y: merged.y, ...size };
-    if (keepInViewport) bounds = clampToViewport(bounds, viewport, minVisible);
+    if (keepInViewport) bounds = chunkBDHFXEJN_cjs.clampToViewport(bounds, viewport, minVisible);
     const becameNormal = win.stage === "snapped";
-    if (boundsEqual(bounds, win.bounds) && !becameNormal) return true;
+    if (chunkBDHFXEJN_cjs.boundsEqual(bounds, win.bounds) && !becameNormal) return true;
     const next = becameNormal ? { ...win, stage: "normal", snapZone: null, restoreBounds: null, bounds } : { ...win, bounds };
     setWindow(next);
     const synced = syncGroup(next);
@@ -1014,8 +881,8 @@ function createWindowManager(options = {}) {
         const synced = syncGroup(updated);
         queueEvent(() => emitter.emit("resize", { window: synced }));
       } else if (win.stage === "normal" && keepInViewport) {
-        const bounds = clampToViewport(win.bounds, viewport, minVisible);
-        if (!boundsEqual(bounds, win.bounds)) {
+        const bounds = chunkBDHFXEJN_cjs.clampToViewport(win.bounds, viewport, minVisible);
+        if (!chunkBDHFXEJN_cjs.boundsEqual(bounds, win.bounds)) {
           const updated = { ...win, bounds };
           setWindow(updated);
           syncGroup(updated);
@@ -1502,6 +1369,22 @@ function createAnnouncer(wm, container, messages = {}) {
   };
 }
 
+// src/dom/actions.ts
+function createActions(wm, id) {
+  return {
+    focus: () => wm.focus(id),
+    close: () => wm.close(id),
+    minimize: () => wm.minimize(id),
+    maximize: () => wm.maximize(id),
+    toggleMaximize: () => wm.toggleMaximize(id),
+    restore: () => wm.restore(id),
+    center: () => wm.center(id),
+    sendToBack: () => wm.sendToBack(id),
+    snap: (zone) => wm.snap(id, zone),
+    moveToWorkspace: (workspace) => wm.moveToWorkspace(id, workspace)
+  };
+}
+
 // src/dom/drag.ts
 function createDragStarter(ctx) {
   const { wm, doc, view } = ctx;
@@ -1519,7 +1402,7 @@ function createDragStarter(ctx) {
       pointerId: event.pointerId,
       grabDX: point.x - startBounds.x,
       grabDY: point.y - startBounds.y,
-      grabRatio: clamp((point.x - startBounds.x) / startBounds.width, 0.05, 0.95),
+      grabRatio: chunkBDHFXEJN_cjs.clamp((point.x - startBounds.x) / startBounds.width, 0.05, 0.95),
       startBounds,
       startStage: win.stage,
       startZone: win.snapZone,
@@ -1536,8 +1419,7 @@ function createDragStarter(ctx) {
       pendingX: 0,
       pendingY: 0,
       hasPending: false,
-      finish: () => {
-      }
+      finish: (cancelled) => finish(cancelled)
     };
     const el = ctx.windowElement(id);
     function armGroup(target2) {
@@ -1592,7 +1474,7 @@ function createDragStarter(ctx) {
           if (other.groupId !== null && state.groups[other.groupId]?.activeId !== otherId) continue;
           targets.push(other.bounds);
         }
-        const magnet = magnetize(
+        const magnet = chunkBDHFXEJN_cjs.magnetize(
           { x: nextX, y: nextY, width: current.bounds.width, height: current.bounds.height },
           targets,
           ctx.magnetThreshold
@@ -1617,7 +1499,7 @@ function createDragStarter(ctx) {
       }
       if (ctx.snapEnabled && current.snappable) {
         const viewport = wm.getState().viewport;
-        const rawZone = detectSnapZone(session.pendingX, session.pendingY, viewport, ctx.snapDetect);
+        const rawZone = chunkBDHFXEJN_cjs.detectSnapZone(session.pendingX, session.pendingY, viewport, ctx.snapDetect);
         let zone = rawZone;
         if (rawZone === "top") {
           if (ctx.topEdge === "maximize") zone = current.maximizable ? "maximize" : null;
@@ -1626,7 +1508,7 @@ function createDragStarter(ctx) {
         session.zone = zone;
         if (zone) {
           ctx.showPreview(
-            zone === "maximize" ? { x: 0, y: 0, width: viewport.width, height: viewport.height } : zoneBounds(zone, viewport)
+            zone === "maximize" ? { x: 0, y: 0, width: viewport.width, height: viewport.height } : chunkBDHFXEJN_cjs.zoneBounds(zone, viewport)
           );
         } else {
           ctx.hidePreview();
@@ -1710,7 +1592,6 @@ function createDragStarter(ctx) {
         else wm.endInteraction();
       }
     }
-    session.finish = finish;
     wm.beginInteraction();
     ctx.claimDrag(session);
     handle.setPointerCapture(event.pointerId);
@@ -1773,10 +1654,10 @@ function createResizeStarter(ctx) {
         width: direction.includes("e") ? start.width + dx : direction.includes("w") ? start.width - dx : start.width,
         height: direction.includes("s") ? start.height + dy : direction.includes("n") ? start.y + start.height - top : start.height
       };
-      let size = aspect === null ? clampSize(raw, minSize, maxSize) : applyAspect(raw, aspect, minSize, maxSize, drive);
+      let size = aspect === null ? chunkBDHFXEJN_cjs.clampSize(raw, minSize, maxSize) : chunkBDHFXEJN_cjs.applyAspect(raw, aspect, minSize, maxSize, drive);
       const available = start.y + start.height - floor;
       if (direction.includes("n") && size.height > available) {
-        size = applyAspect({ ...size, height: available }, aspect ?? 0, minSize, maxSize, "height");
+        size = chunkBDHFXEJN_cjs.applyAspect({ ...size, height: available }, aspect ?? 0, minSize, maxSize, "height");
       }
       const next = {
         x: direction.includes("w") ? start.x + start.width - size.width : start.x,
@@ -1865,7 +1746,7 @@ function createResizeHandles(doc, edge, corner) {
 }
 
 // src/dom/shared.ts
-var INTERACTIVE_SELECTOR = "button, input, select, textarea, a[href], [contenteditable], [data-wm-close], [data-wm-minimize], [data-wm-maximize]";
+var INTERACTIVE_SELECTOR = "button, input, select, textarea, a[href], [contenteditable], [data-wm-close], [data-wm-minimize], [data-wm-maximize], [data-wm-snap], [data-wm-restore], [data-wm-center], [data-wm-send-back], [data-wm-to-workspace]";
 function windowOf(element) {
   const view = element.ownerDocument.defaultView;
   if (!view) throw new Error("wmkit: desktop element is not attached to a document");
@@ -1962,8 +1843,53 @@ var SNAP_SHORTCUTS = {
   ArrowLeft: "left",
   ArrowRight: "right"
 };
+var SNAP_ZONES = /* @__PURE__ */ new Set([
+  "left",
+  "right",
+  "top",
+  "bottom",
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right",
+  "left-third",
+  "center-third",
+  "right-third"
+]);
 var LANDMARK_TAGS = /* @__PURE__ */ new Set(["header", "footer", "aside", "nav"]);
 var FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function focusablesOf(el) {
+  const root = el.shadowRoot;
+  if (!root) return [...el.querySelectorAll(FOCUSABLE_SELECTOR)];
+  const found = [];
+  for (const node of root.querySelectorAll(`${FOCUSABLE_SELECTOR}, slot`)) {
+    if (!(node instanceof HTMLSlotElement)) {
+      found.push(node);
+      continue;
+    }
+    for (const assigned of node.assignedElements()) {
+      if (assigned.matches(FOCUSABLE_SELECTOR)) found.push(assigned);
+      found.push(...assigned.querySelectorAll(FOCUSABLE_SELECTOR));
+    }
+  }
+  return found;
+}
+function dragHandleAt(node, clientX, clientY) {
+  const handle = node.closest?.("[data-wm-drag]");
+  if (handle) return handle;
+  const inner = node.shadowRoot?.elementFromPoint?.(clientX, clientY) ?? null;
+  return inner === null || inner === node ? null : dragHandleAt(inner, clientX, clientY);
+}
+function windowElementOf(node) {
+  const found = node.closest("[data-wm-window]");
+  if (found) return found;
+  const host = node.getRootNode().host;
+  return host ? windowElementOf(host) : null;
+}
+function defaultVariant(win) {
+  const variant = win.meta.variant;
+  return typeof variant === "string" && variant !== "" ? variant : null;
+}
 function attachDesktop(wm, element, options = {}) {
   const doc = element.ownerDocument;
   const view = windowOf(element);
@@ -1988,6 +1914,7 @@ function attachDesktop(wm, element, options = {}) {
   const interactiveSelector = options.interactiveSelector ?? INTERACTIVE_SELECTOR;
   const animationEnabled = options.animation !== false;
   const animationOptions = typeof options.animation === "object" ? options.animation : {};
+  const windowVariant = options.windowVariant ?? defaultVariant;
   element.dataset.wmDesktop = "";
   element.tabIndex = -1;
   if (view.getComputedStyle(element).position === "static") {
@@ -2077,8 +2004,8 @@ function attachDesktop(wm, element, options = {}) {
     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 handle = dragHandleAt(node, clientX, clientY);
+        const host = handle && windowElementOf(handle);
         const id = host?.dataset.wmWindow;
         if (id && id !== selfId && registry.get(id)?.element === host) return id;
       }
@@ -2101,6 +2028,21 @@ function attachDesktop(wm, element, options = {}) {
   };
   const startDrag = createDragStarter(ctx);
   const startResize = createResizeStarter(ctx);
+  if (options.gestures) {
+    const gestureContext = {
+      wm,
+      doc,
+      view,
+      desktop: element,
+      toLocal: (event) => ctx.toLocal(event),
+      trackRect: () => ctx.trackRect(),
+      windowElement: (id) => ctx.windowElement(id),
+      busy: () => drag !== null,
+      claim: (gesture) => ctx.claimDrag(gesture),
+      release: (gesture) => ctx.releaseDrag(gesture)
+    };
+    for (const gesture of options.gestures) cleanup.push(gesture(gestureContext));
+  }
   if (options.autoViewport !== false) {
     const applyViewport = () => wm.setViewport({ width: element.clientWidth, height: element.clientHeight });
     applyViewport();
@@ -2119,6 +2061,9 @@ function attachDesktop(wm, element, options = {}) {
       el.dataset.wmStage = win.stage;
       el.dataset.wmLayer = win.layer;
       el.dataset.wmWorkspace = String(win.workspace);
+      const variant = windowVariant(win);
+      if (variant === null) delete el.dataset.wmVariant;
+      else el.dataset.wmVariant = variant;
       if (win.groupId === null) {
         delete el.dataset.wmGroup;
         delete el.dataset.wmTab;
@@ -2137,6 +2082,9 @@ function attachDesktop(wm, element, options = {}) {
       }
       el.hidden = hide;
       el.setAttribute("aria-label", win.title);
+      if (attached.title && attached.title.textContent !== win.title) {
+        attached.title.textContent = win.title;
+      }
       if (win.layer === "modal") el.setAttribute("aria-modal", "true");
       else el.removeAttribute("aria-modal");
       for (const handle of attached.handles) {
@@ -2174,15 +2122,30 @@ function attachDesktop(wm, element, options = {}) {
   function syncAll() {
     const state = wm.getState();
     const orderChanged = state.order !== lastOrder;
+    let restyle = null;
     for (const id of state.order) {
       const attached = registry.get(id);
       const win = state.windows[id];
       if (!attached || !win) continue;
+      const wanted2 = typeof win.meta.skin === "string" ? win.meta.skin : null;
+      if (attached.skin !== null && wanted2 !== null && wanted2 !== attached.skin) {
+        restyle = restyle ?? [];
+        restyle.push([id, wanted2]);
+        continue;
+      }
       const activeTab = win.groupId === null || state.groups[win.groupId]?.activeId === win.id;
       if (attached.lastState !== win || attached.lastWorkspace !== state.workspace || attached.lastTab !== activeTab) {
         syncWindow(attached, win, state.workspace, activeTab);
       }
     }
+    if (restyle !== null) {
+      for (const [id, wanted2] of restyle) {
+        const attached = registry.get(id);
+        if (attached && attached.skin !== wanted2) buildSkin(id, wanted2, attached.mountOptions);
+      }
+      syncAll();
+      return;
+    }
     if (orderChanged) applyStacking(state.order);
     const wanted = state.focusedId ? registry.get(state.focusedId)?.element ?? null : null;
     if (wanted !== focusedEl) {
@@ -2280,6 +2243,11 @@ function attachDesktop(wm, element, options = {}) {
     const attached = {
       element: windowElement,
       handle: null,
+      title: null,
+      skin: null,
+      mount: null,
+      mountOptions: windowOptions,
+      release: null,
       handles: [],
       lastState: null,
       lastZ: UNASSIGNED,
@@ -2293,10 +2261,11 @@ function attachDesktop(wm, element, options = {}) {
     windowElement.style.position = "absolute";
     windowElement.style.left = "0";
     windowElement.style.top = "0";
-    const titleEl = windowElement.querySelector("[data-wm-title]");
-    if (titleEl) {
-      if (!titleEl.id) titleEl.id = `wmkit-title-${id}`;
-      windowElement.setAttribute("aria-labelledby", titleEl.id);
+    const lightTitle = windowElement.querySelector("[data-wm-title]");
+    attached.title = lightTitle ?? windowElement.shadowRoot?.querySelector("[data-wm-title]") ?? null;
+    if (lightTitle) {
+      if (!lightTitle.id) lightTitle.id = `wmkit-title-${id}`;
+      windowElement.setAttribute("aria-labelledby", lightTitle.id);
     }
     const handle = typeof windowOptions.handle === "string" ? windowElement.querySelector(windowOptions.handle) : windowOptions.handle ?? windowElement.querySelector("[data-wm-drag]");
     attached.handle = handle;
@@ -2317,10 +2286,38 @@ function attachDesktop(wm, element, options = {}) {
       if (!current) return;
       if (target.closest("[data-wm-close]")) {
         if (current.closable && options.beforeClose?.(current) !== false) wm.close(id);
-      } else if (target.closest("[data-wm-minimize]")) {
+        return;
+      }
+      if (target.closest("[data-wm-minimize]")) {
         if (current.minimizable) wm.minimize(id);
-      } else if (target.closest("[data-wm-maximize]")) {
+        return;
+      }
+      if (target.closest("[data-wm-maximize]")) {
         if (current.maximizable) wm.toggleMaximize(id);
+        return;
+      }
+      const act = createActions(wm, id);
+      const snapTarget = target.closest("[data-wm-snap]");
+      if (snapTarget) {
+        const zone = snapTarget.dataset.wmSnap ?? "";
+        if (current.snappable && SNAP_ZONES.has(zone)) act.snap(zone);
+        return;
+      }
+      if (target.closest("[data-wm-restore]")) {
+        act.restore();
+        return;
+      }
+      if (target.closest("[data-wm-center]")) {
+        act.center();
+        return;
+      }
+      if (target.closest("[data-wm-send-back]")) {
+        act.sendToBack();
+        return;
+      }
+      const workspaceTarget = target.closest("[data-wm-to-workspace]");
+      if (workspaceTarget) {
+        act.moveToWorkspace(Number.parseInt(workspaceTarget.dataset.wmToWorkspace ?? "", 10));
       }
     };
     windowElement.addEventListener("click", onClick);
@@ -2358,7 +2355,7 @@ function attachDesktop(wm, element, options = {}) {
         const onResizeDown = (event) => startResize(id, direction, event);
         resizeHandle.addEventListener("pointerdown", onResizeDown);
         attached.cleanup.push(() => resizeHandle.removeEventListener("pointerdown", onResizeDown));
-        windowElement.append(resizeHandle);
+        (windowElement.shadowRoot ?? windowElement).append(resizeHandle);
         attached.handles.push(resizeHandle);
       }
     }
@@ -2396,9 +2393,10 @@ function attachDesktop(wm, element, options = {}) {
       if (event.key !== "Tab") return;
       const current = wm.get(id);
       if (current?.layer !== "modal") return;
-      const focusables = [
-        ...windowElement.querySelectorAll(FOCUSABLE_SELECTOR)
-      ].filter((node) => node.offsetParent !== null || node === doc.activeElement);
+      const active = windowElement.shadowRoot?.activeElement ?? doc.activeElement;
+      const focusables = focusablesOf(windowElement).filter(
+        (node) => node.offsetParent !== null || node === active
+      );
       if (focusables.length === 0) return;
       const first = focusables[0];
       const last = focusables[focusables.length - 1];
@@ -2408,10 +2406,10 @@ function attachDesktop(wm, element, options = {}) {
         (event.shiftKey ? last : first).focus();
         return;
       }
-      if (event.shiftKey && doc.activeElement === first) {
+      if (event.shiftKey && active === first) {
         event.preventDefault();
         last.focus();
-      } else if (!event.shiftKey && doc.activeElement === last) {
+      } else if (!event.shiftKey && active === last) {
         event.preventDefault();
         first.focus();
       }
@@ -2449,10 +2447,62 @@ function attachDesktop(wm, element, options = {}) {
     }
     return detach;
   }
+  function resolveSkin(skin) {
+    if (typeof skin !== "string") return skin;
+    const found = options.skins?.[skin];
+    if (!found) throw new Error(`wmkit: unknown skin "${skin}"`);
+    return found;
+  }
+  function buildSkin(id, skin, windowOptions) {
+    const win = wm.get(id);
+    if (!win) throw new Error(`wmkit: cannot mount unknown window "${id}"`);
+    const standing = registry.get(id);
+    const previous = standing?.mount ?? null;
+    const carried = previous === null ? [] : [...previous.content.childNodes];
+    if (previous !== null) {
+      registry.delete(id);
+      standing?.release?.();
+      previous.element.remove();
+    }
+    const mount = resolveSkin(skin)({ doc, id, window: win, actions: createActions(wm, id) });
+    element.append(mount.element);
+    const release = attachWindow(id, mount.element, windowOptions);
+    const attached = registry.get(id);
+    attached.skin = typeof skin === "string" ? skin : null;
+    attached.mount = mount;
+    attached.mountOptions = windowOptions;
+    attached.release = release;
+    mount.content.append(...carried);
+    previous?.destroy?.();
+    return mount;
+  }
+  function mountWindow(id, skin, windowOptions = {}) {
+    let last = buildSkin(id, skin, windowOptions);
+    const live = () => {
+      last = registry.get(id)?.mount ?? last;
+      return last;
+    };
+    return {
+      get element() {
+        return live().element;
+      },
+      get content() {
+        return live().content;
+      },
+      detach() {
+        const mount = live();
+        registry.get(id)?.release?.();
+        mount.element.remove();
+        mount.destroy?.();
+      }
+    };
+  }
   return {
     element,
     wm,
     attachWindow,
+    mountWindow,
+    actions: (id) => createActions(wm, id),
     destroy() {
       endDrag(true);
       for (const [, attached] of registry) {
@@ -2522,6 +2572,14 @@ function createDesktopBinder(wm, options = {}) {
   };
 }
 
-export { applyAspect, attachDesktop, boundsEqual, clamp, clampSize, clampToViewport, createAnnouncer, createDesktopBinder, createEmitter, createWindowManager, defaultMessages, detectSnapZone, flipFromTarget, flipToTarget, magnetize, prefersReducedMotion, zoneBounds };
-//# sourceMappingURL=chunk-FOWW4LXS.js.map
-//# sourceMappingURL=chunk-FOWW4LXS.js.map
+exports.attachDesktop = attachDesktop;
+exports.createAnnouncer = createAnnouncer;
+exports.createDesktopBinder = createDesktopBinder;
+exports.createEmitter = createEmitter;
+exports.createWindowManager = createWindowManager;
+exports.defaultMessages = defaultMessages;
+exports.flipFromTarget = flipFromTarget;
+exports.flipToTarget = flipToTarget;
+exports.prefersReducedMotion = prefersReducedMotion;
+//# sourceMappingURL=chunk-ZWUVWRUS.cjs.map
+//# sourceMappingURL=chunk-ZWUVWRUS.cjs.map