@surdeddd/wmkit 0.1.1 → 0.2.0

package/dist/{chunk-N5KNWRKU.js → chunk-2TVOEDRG.js}

@@ -774,175 +774,25 @@ function createAnnouncer(wm, container, messages = {}) {
   };
 }
 
-// src/dom/controller.ts
-var RESIZE_DIRECTIONS = ["n", "e", "s", "w", "ne", "nw", "se", "sw"];
-var RESIZE_CURSORS = {
-  n: "ns-resize",
-  s: "ns-resize",
-  e: "ew-resize",
-  w: "ew-resize",
-  ne: "nesw-resize",
-  sw: "nesw-resize",
-  nw: "nwse-resize",
-  se: "nwse-resize"
-};
+// src/dom/shared.ts
 var INTERACTIVE_SELECTOR = "button, input, select, textarea, a[href], [contenteditable], [data-wm-close], [data-wm-minimize], [data-wm-maximize]";
 function windowOf(element) {
   const view = element.ownerDocument.defaultView;
   if (!view) throw new Error("wmkit: desktop element is not attached to a document");
   return view;
 }
-function attachDesktop(wm, element, options = {}) {
-  const doc = element.ownerDocument;
-  const view = windowOf(element);
-  const snapEnabled = options.snap !== false;
-  const snapOptions = typeof options.snap === "object" ? options.snap : {};
-  const snapPreviewEnabled = snapOptions.preview !== false;
-  const topEdge = snapOptions.topEdge ?? "maximize";
-  const keyboardEnabled = options.keyboard !== false;
-  const keyboardOptions = typeof options.keyboard === "object" ? options.keyboard : {};
-  const moveStep = keyboardOptions.moveStep ?? 16;
-  const cycleEnabled = keyboardOptions.cycle !== false;
-  element.dataset.wmDesktop = "";
-  if (view.getComputedStyle(element).position === "static") {
-    element.style.position = "relative";
-  }
-  const registry = /* @__PURE__ */ new Map();
-  const cleanup = [];
-  let lastOrder = null;
-  let lastFocused = null;
-  let drag = null;
-  let announcer = null;
-  if (options.announce !== false) {
-    announcer = createAnnouncer(
-      wm,
-      element,
-      typeof options.announce === "object" ? options.announce : {}
-    );
-    cleanup.push(() => announcer?.destroy());
-  }
-  let preview = null;
-  function showPreview(bounds) {
-    if (!snapPreviewEnabled) return;
-    if (!preview) {
-      preview = doc.createElement("div");
-      preview.dataset.wmSnapPreview = "";
-      preview.style.cssText = "position:absolute;left:0;top:0;pointer-events:none;display:none;z-index:2147483646";
-      element.append(preview);
-    }
-    preview.style.display = "block";
-    preview.style.transform = `translate3d(${bounds.x}px, ${bounds.y}px, 0)`;
-    preview.style.width = `${bounds.width}px`;
-    preview.style.height = `${bounds.height}px`;
-  }
-  function hidePreview() {
-    if (preview) preview.style.display = "none";
-  }
-  if (options.autoViewport !== false) {
-    const applyViewport = () => wm.setViewport({ width: element.clientWidth, height: element.clientHeight });
-    applyViewport();
-    const observer = new ResizeObserver(applyViewport);
-    observer.observe(element);
-    cleanup.push(() => observer.disconnect());
-  }
-  function syncWindow(attached, win, zIndex) {
-    const el = attached.element;
-    const firstSync = attached.lastState === null;
-    if (firstSync) el.style.transition = "none";
-    if (attached.lastState !== win) {
-      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.hidden = win.stage === "minimized";
-      el.setAttribute("aria-label", win.title);
-      if (win.layer === "modal") el.setAttribute("aria-modal", "true");
-      else el.removeAttribute("aria-modal");
-      for (const handle of attached.handles) {
-        handle.style.display = win.resizable && win.stage === "normal" ? "" : "none";
-      }
-      attached.lastState = win;
-    }
-    el.style.zIndex = String(zIndex + 1);
-    if (firstSync) {
-      void el.offsetWidth;
-      el.style.transition = "";
-    }
-  }
-  function syncAll() {
-    const state = wm.getState();
-    const orderChanged = state.order !== lastOrder;
-    state.order.forEach((id, index) => {
-      const attached = registry.get(id);
-      const win = state.windows[id];
-      if (!attached || !win) return;
-      if (orderChanged || attached.lastState !== win) syncWindow(attached, win, index);
-    });
-    if (state.focusedId !== lastFocused) {
-      if (lastFocused) {
-        const prev = registry.get(lastFocused);
-        if (prev) delete prev.element.dataset.wmFocused;
-      }
-      if (state.focusedId) {
-        const next = registry.get(state.focusedId);
-        if (next) next.element.dataset.wmFocused = "";
-      }
-      lastFocused = state.focusedId;
-    }
-    lastOrder = state.order;
-  }
-  cleanup.push(wm.subscribe(syncAll));
-  cleanup.push(
-    wm.on("focus", ({ window: win }) => {
-      const attached = registry.get(win.id);
-      if (!attached) return;
-      if (!attached.element.contains(doc.activeElement)) {
-        attached.element.focus({ preventScroll: true });
-      }
-    })
-  );
-  cleanup.push(
-    wm.on("modalblocked", ({ window: win }) => {
-      const attached = registry.get(win.id);
-      if (!attached) return;
-      delete attached.element.dataset.wmFlash;
-      void attached.element.offsetWidth;
-      attached.element.dataset.wmFlash = "";
-    })
-  );
-  cleanup.push(
-    wm.on("stage", ({ window: win, previous }) => {
-      if (win.stage !== "minimized" || previous === "minimized") return;
-      const attached = registry.get(win.id);
-      const target = options.minimizeTarget?.(win);
-      if (attached && target) flipToTarget(attached.element, target);
-    })
-  );
-  if (keyboardEnabled && cycleEnabled) {
-    const onDesktopKeydown = (event) => {
-      if (event.key === "F6") {
-        event.preventDefault();
-        wm.cycleFocus(event.shiftKey ? -1 : 1);
-      }
-    };
-    element.addEventListener("keydown", onDesktopKeydown);
-    cleanup.push(() => element.removeEventListener("keydown", onDesktopKeydown));
-  }
-  function desktopPoint(event) {
-    const rect = element.getBoundingClientRect();
-    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
-  }
-  function endDrag(cancelled) {
-    if (drag) drag.finish(cancelled);
-  }
-  function startDrag(id, handle, event) {
+
+// src/dom/drag.ts
+function createDragStarter(ctx) {
+  const { wm, doc, view } = ctx;
+  return function startDrag(id, handle, event) {
     const win = wm.get(id);
-    if (!win?.draggable || event.button !== 0 || drag) return;
+    if (!win?.draggable || event.button !== 0 || ctx.currentDrag()) return;
     const target = event.target;
     if (target?.closest(INTERACTIVE_SELECTOR)) return;
     event.preventDefault();
-    const point = desktopPoint(event);
+    const releaseRect = ctx.trackRect();
+    const point = ctx.toLocal(event);
     const startBounds = win.bounds;
     const session = {
       id,
@@ -964,10 +814,9 @@ function attachDesktop(wm, element, options = {}) {
       finish: () => {
       }
     };
-    const attached = registry.get(id);
-    const el = attached?.element;
+    const el = ctx.windowElement(id);
     function flush() {
-      if (!session.hasPending || drag !== session) return;
+      if (!session.hasPending || ctx.currentDrag() !== session) return;
       session.hasPending = false;
       session.raf = 0;
       const current = wm.get(id);
@@ -991,32 +840,35 @@ function attachDesktop(wm, element, options = {}) {
         return;
       }
       wm.move(id, session.pendingX - session.grabDX, session.pendingY - session.grabDY);
-      if (snapEnabled && current.snappable) {
+      if (ctx.snapEnabled && current.snappable) {
         const viewport = wm.getState().viewport;
-        const rawZone = detectSnapZone(session.pendingX, session.pendingY, viewport, snapOptions);
+        const rawZone = detectSnapZone(session.pendingX, session.pendingY, viewport, ctx.snapDetect);
         let zone = rawZone;
         if (rawZone === "top") {
-          if (topEdge === "maximize") zone = current.maximizable ? "maximize" : null;
-          else if (topEdge === "none") zone = null;
+          if (ctx.topEdge === "maximize") zone = current.maximizable ? "maximize" : null;
+          else if (ctx.topEdge === "none") zone = null;
         }
         session.zone = zone;
         if (zone) {
-          showPreview(
+          ctx.showPreview(
             zone === "maximize" ? { x: 0, y: 0, width: viewport.width, height: viewport.height } : zoneBounds(zone, viewport)
           );
         } else {
-          hidePreview();
+          ctx.hidePreview();
         }
       }
     }
     function onMove(moveEvent) {
       if (moveEvent.pointerId !== session.pointerId) return;
-      const movePoint = desktopPoint(moveEvent);
+      const movePoint = ctx.toLocal(moveEvent);
       if (!session.moved) {
         const travelled = Math.abs(movePoint.x - (session.startBounds.x + session.grabDX)) + Math.abs(movePoint.y - (session.startBounds.y + session.grabDY));
         if (travelled < 3 && session.restored) return;
         session.moved = true;
-        if (el) el.dataset.wmDragging = "";
+        if (el) {
+          el.dataset.wmDragging = "";
+          el.style.willChange = "transform";
+        }
       }
       session.pendingX = movePoint.x;
       session.pendingY = movePoint.y;
@@ -1038,10 +890,11 @@ function attachDesktop(wm, element, options = {}) {
       }
     }
     function finish(cancelled) {
-      if (drag !== session) return;
-      if (session.raf !== 0) view?.cancelAnimationFrame(session.raf);
+      if (ctx.currentDrag() !== session) return;
+      if (session.raf !== 0) view.cancelAnimationFrame(session.raf);
       if (session.hasPending && !cancelled) flush();
-      drag = null;
+      ctx.releaseDrag(session);
+      releaseRect();
       handle.removeEventListener("pointermove", onMove);
       handle.removeEventListener("pointerup", onUp);
       handle.removeEventListener("pointercancel", onCancel);
@@ -1049,8 +902,11 @@ function attachDesktop(wm, element, options = {}) {
       if (handle.hasPointerCapture(session.pointerId)) {
         handle.releasePointerCapture(session.pointerId);
       }
-      if (el) delete el.dataset.wmDragging;
-      hidePreview();
+      if (el) {
+        delete el.dataset.wmDragging;
+        el.style.willChange = "";
+      }
+      ctx.hidePreview();
       if (cancelled) {
         if (session.moved && session.restored) {
           if (session.startStage === "maximized") {
@@ -1071,20 +927,37 @@ function attachDesktop(wm, element, options = {}) {
       }
     }
     session.finish = finish;
-    drag = session;
+    ctx.claimDrag(session);
     handle.setPointerCapture(event.pointerId);
     handle.addEventListener("pointermove", onMove);
     handle.addEventListener("pointerup", onUp);
     handle.addEventListener("pointercancel", onCancel);
     doc.addEventListener("keydown", onKeydown, true);
-  }
-  function startResize(id, direction, event) {
+  };
+}
+
+// src/dom/resize.ts
+var RESIZE_DIRECTIONS = ["n", "e", "s", "w", "ne", "nw", "se", "sw"];
+var RESIZE_CURSORS = {
+  n: "ns-resize",
+  s: "ns-resize",
+  e: "ew-resize",
+  w: "ew-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize",
+  nw: "nwse-resize",
+  se: "nwse-resize"
+};
+function createResizeStarter(ctx) {
+  const { wm, doc, view } = ctx;
+  return function startResize(id, direction, event) {
     const win = wm.get(id);
-    if (!win?.resizable || event.button !== 0 || drag) return;
+    if (!win?.resizable || event.button !== 0 || ctx.currentDrag()) return;
     event.preventDefault();
     event.stopPropagation();
     const handleEl = event.currentTarget;
-    const startPoint = desktopPoint(event);
+    const releaseRect = ctx.trackRect();
+    const startPoint = ctx.toLocal(event);
     const start = win.bounds;
     const minSize = win.minSize;
     const maxSize = win.maxSize;
@@ -1092,8 +965,8 @@ function attachDesktop(wm, element, options = {}) {
     let pendingX = 0;
     let pendingY = 0;
     let hasPending = false;
-    const attached = registry.get(id);
-    if (attached) attached.element.dataset.wmResizing = direction;
+    const el = ctx.windowElement(id);
+    if (el) el.dataset.wmResizing = direction;
     function clampWidth(width) {
       return clamp(width, minSize.width, maxSize ? maxSize.width : Number.POSITIVE_INFINITY);
     }
@@ -1121,15 +994,16 @@ function attachDesktop(wm, element, options = {}) {
     }
     function onMove(moveEvent) {
       if (moveEvent.pointerId !== event.pointerId) return;
-      const movePoint = desktopPoint(moveEvent);
+      const movePoint = ctx.toLocal(moveEvent);
       pendingX = movePoint.x;
       pendingY = movePoint.y;
       hasPending = true;
-      if (raf === 0) raf = view?.requestAnimationFrame(flush) ?? 0;
+      if (raf === 0) raf = view.requestAnimationFrame(flush);
     }
     function finish(cancelled) {
-      if (raf !== 0) view?.cancelAnimationFrame(raf);
+      if (raf !== 0) view.cancelAnimationFrame(raf);
       if (hasPending && !cancelled) flush();
+      releaseRect();
       handleEl.removeEventListener("pointermove", onMove);
       handleEl.removeEventListener("pointerup", onUp);
       handleEl.removeEventListener("pointercancel", onCancelPointer);
@@ -1137,7 +1011,7 @@ function attachDesktop(wm, element, options = {}) {
       if (handleEl.hasPointerCapture(event.pointerId)) {
         handleEl.releasePointerCapture(event.pointerId);
       }
-      if (attached) delete attached.element.dataset.wmResizing;
+      if (el) delete el.dataset.wmResizing;
       if (cancelled) wm.resize(id, start);
     }
     function onUp(upEvent) {
@@ -1159,6 +1033,220 @@ function attachDesktop(wm, element, options = {}) {
     handleEl.addEventListener("pointerup", onUp);
     handleEl.addEventListener("pointercancel", onCancelPointer);
     doc.addEventListener("keydown", onKeydown, true);
+  };
+}
+function createResizeHandles(doc, edge, corner) {
+  const base = "position:absolute;touch-action:none;user-select:none;-webkit-user-select:none;";
+  const styles = {
+    n: `top:${-edge / 2}px;left:${corner}px;right:${corner}px;height:${edge}px`,
+    s: `bottom:${-edge / 2}px;left:${corner}px;right:${corner}px;height:${edge}px`,
+    e: `right:${-edge / 2}px;top:${corner}px;bottom:${corner}px;width:${edge}px`,
+    w: `left:${-edge / 2}px;top:${corner}px;bottom:${corner}px;width:${edge}px`,
+    ne: `top:${-edge / 2}px;right:${-edge / 2}px;width:${corner}px;height:${corner}px`,
+    nw: `top:${-edge / 2}px;left:${-edge / 2}px;width:${corner}px;height:${corner}px`,
+    se: `bottom:${-edge / 2}px;right:${-edge / 2}px;width:${corner}px;height:${corner}px`,
+    sw: `bottom:${-edge / 2}px;left:${-edge / 2}px;width:${corner}px;height:${corner}px`
+  };
+  return RESIZE_DIRECTIONS.map((direction) => {
+    const element = doc.createElement("div");
+    element.dataset.wmResize = direction;
+    element.setAttribute("aria-hidden", "true");
+    element.style.cssText = `${base}${styles[direction]};cursor:${RESIZE_CURSORS[direction]}`;
+    return { element, direction };
+  });
+}
+
+// src/dom/controller.ts
+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 snapEnabled = options.snap !== false;
+  const snapOptions = typeof options.snap === "object" ? options.snap : {};
+  const snapPreviewEnabled = snapOptions.preview !== false;
+  const topEdge = snapOptions.topEdge ?? "maximize";
+  const keyboardEnabled = options.keyboard !== false;
+  const keyboardOptions = typeof options.keyboard === "object" ? options.keyboard : {};
+  const moveStep = keyboardOptions.moveStep ?? 16;
+  const cycleEnabled = keyboardOptions.cycle !== false;
+  const hitEdge = options.hitAreas?.edge ?? (coarsePointer ? 16 : 8);
+  const hitCorner = options.hitAreas?.corner ?? (coarsePointer ? 24 : 12);
+  element.dataset.wmDesktop = "";
+  if (view.getComputedStyle(element).position === "static") {
+    element.style.position = "relative";
+  }
+  const registry = /* @__PURE__ */ new Map();
+  const cleanup = [];
+  let lastOrder = null;
+  let lastFocused = null;
+  let drag = null;
+  let cachedRect = null;
+  let rectUsers = 0;
+  let announcer = null;
+  if (options.announce !== false) {
+    announcer = createAnnouncer(
+      wm,
+      element,
+      typeof options.announce === "object" ? options.announce : {}
+    );
+    cleanup.push(() => announcer?.destroy());
+  }
+  let preview = null;
+  function showPreview(bounds) {
+    if (!snapPreviewEnabled) return;
+    if (!preview) {
+      preview = doc.createElement("div");
+      preview.dataset.wmSnapPreview = "";
+      preview.style.cssText = "position:absolute;left:0;top:0;pointer-events:none;display:none;z-index:2147483646";
+      element.append(preview);
+    }
+    preview.style.display = "block";
+    preview.style.transform = `translate3d(${bounds.x}px, ${bounds.y}px, 0)`;
+    preview.style.width = `${bounds.width}px`;
+    preview.style.height = `${bounds.height}px`;
+  }
+  function hidePreview() {
+    if (preview) preview.style.display = "none";
+  }
+  const ctx = {
+    wm,
+    doc,
+    view,
+    toLocal(event) {
+      const rect = cachedRect ?? element.getBoundingClientRect();
+      return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    },
+    trackRect() {
+      if (rectUsers === 0) {
+        const rect = element.getBoundingClientRect();
+        cachedRect = { left: rect.left, top: rect.top };
+      }
+      rectUsers += 1;
+      let released = false;
+      return () => {
+        if (released) return;
+        released = true;
+        rectUsers -= 1;
+        if (rectUsers === 0) cachedRect = null;
+      };
+    },
+    windowElement: (id) => registry.get(id)?.element,
+    showPreview,
+    hidePreview,
+    snapEnabled,
+    snapDetect: {
+      threshold: snapOptions.threshold ?? (coarsePointer ? 20 : 12),
+      cornerSize: snapOptions.cornerSize ?? (coarsePointer ? 96 : 64)
+    },
+    topEdge,
+    hitEdge,
+    hitCorner,
+    currentDrag: () => drag,
+    claimDrag(session) {
+      drag = session;
+    },
+    releaseDrag(session) {
+      if (drag === session) drag = null;
+    }
+  };
+  const startDrag = createDragStarter(ctx);
+  const startResize = createResizeStarter(ctx);
+  if (options.autoViewport !== false) {
+    const applyViewport = () => wm.setViewport({ width: element.clientWidth, height: element.clientHeight });
+    applyViewport();
+    const observer = new ResizeObserver(applyViewport);
+    observer.observe(element);
+    cleanup.push(() => observer.disconnect());
+  }
+  function syncWindow(attached, win, zIndex) {
+    const el = attached.element;
+    const firstSync = attached.lastState === null;
+    if (firstSync) el.style.transition = "none";
+    if (attached.lastState !== win) {
+      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.hidden = win.stage === "minimized";
+      el.setAttribute("aria-label", win.title);
+      if (win.layer === "modal") el.setAttribute("aria-modal", "true");
+      else el.removeAttribute("aria-modal");
+      for (const handle of attached.handles) {
+        handle.style.display = win.resizable && win.stage === "normal" ? "" : "none";
+      }
+      attached.lastState = win;
+    }
+    if (attached.lastZ !== zIndex) {
+      el.style.zIndex = String(zIndex + 1);
+      attached.lastZ = zIndex;
+    }
+    if (firstSync) {
+      void el.offsetWidth;
+      el.style.transition = "";
+    }
+  }
+  function syncAll() {
+    const state = wm.getState();
+    const orderChanged = state.order !== lastOrder;
+    state.order.forEach((id, index) => {
+      const attached = registry.get(id);
+      const win = state.windows[id];
+      if (!attached || !win) return;
+      if (orderChanged || attached.lastState !== win) syncWindow(attached, win, index);
+    });
+    if (state.focusedId !== lastFocused) {
+      if (lastFocused) {
+        const prev = registry.get(lastFocused);
+        if (prev) delete prev.element.dataset.wmFocused;
+      }
+      if (state.focusedId) {
+        const next = registry.get(state.focusedId);
+        if (next) next.element.dataset.wmFocused = "";
+      }
+      lastFocused = state.focusedId;
+    }
+    lastOrder = state.order;
+  }
+  cleanup.push(wm.subscribe(syncAll));
+  cleanup.push(
+    wm.on("focus", ({ window: win }) => {
+      const attached = registry.get(win.id);
+      if (!attached) return;
+      if (!attached.element.contains(doc.activeElement)) {
+        attached.element.focus({ preventScroll: true });
+      }
+    })
+  );
+  cleanup.push(
+    wm.on("modalblocked", ({ window: win }) => {
+      const attached = registry.get(win.id);
+      if (!attached) return;
+      delete attached.element.dataset.wmFlash;
+      void attached.element.offsetWidth;
+      attached.element.dataset.wmFlash = "";
+    })
+  );
+  cleanup.push(
+    wm.on("stage", ({ window: win, previous }) => {
+      if (win.stage !== "minimized" || previous === "minimized") return;
+      const attached = registry.get(win.id);
+      const target = options.minimizeTarget?.(win);
+      if (attached && target) flipToTarget(attached.element, target);
+    })
+  );
+  if (keyboardEnabled && cycleEnabled) {
+    const onDesktopKeydown = (event) => {
+      if (event.key === "F6") {
+        event.preventDefault();
+        wm.cycleFocus(event.shiftKey ? -1 : 1);
+      }
+    };
+    element.addEventListener("keydown", onDesktopKeydown);
+    cleanup.push(() => element.removeEventListener("keydown", onDesktopKeydown));
+  }
+  function endDrag(cancelled) {
+    if (drag) drag.finish(cancelled);
   }
   function attachWindow(id, windowElement, windowOptions = {}) {
     const win = wm.get(id);
@@ -1169,6 +1257,7 @@ function attachDesktop(wm, element, options = {}) {
       handle: null,
       handles: [],
       lastState: null,
+      lastZ: -1,
       cleanup: []
     };
     windowElement.dataset.wmWindow = id;
@@ -1221,24 +1310,11 @@ function attachDesktop(wm, element, options = {}) {
       attached.cleanup.push(() => handle.removeEventListener("dblclick", onDoubleClick));
     }
     if (windowOptions.resizeHandles !== false) {
-      for (const direction of RESIZE_DIRECTIONS) {
-        const resizeHandle = doc.createElement("div");
-        resizeHandle.dataset.wmResize = direction;
-        resizeHandle.setAttribute("aria-hidden", "true");
-        const base = "position:absolute;touch-action:none;user-select:none;-webkit-user-select:none;";
-        const size = 8;
-        const corner = 12;
-        const styles = {
-          n: `top:${-size / 2}px;left:${corner}px;right:${corner}px;height:${size}px`,
-          s: `bottom:${-size / 2}px;left:${corner}px;right:${corner}px;height:${size}px`,
-          e: `right:${-size / 2}px;top:${corner}px;bottom:${corner}px;width:${size}px`,
-          w: `left:${-size / 2}px;top:${corner}px;bottom:${corner}px;width:${size}px`,
-          ne: `top:${-size / 2}px;right:${-size / 2}px;width:${corner}px;height:${corner}px`,
-          nw: `top:${-size / 2}px;left:${-size / 2}px;width:${corner}px;height:${corner}px`,
-          se: `bottom:${-size / 2}px;right:${-size / 2}px;width:${corner}px;height:${corner}px`,
-          sw: `bottom:${-size / 2}px;left:${-size / 2}px;width:${corner}px;height:${corner}px`
-        };
-        resizeHandle.style.cssText = `${base}${styles[direction]};cursor:${RESIZE_CURSORS[direction]}`;
+      for (const { element: resizeHandle, direction } of createResizeHandles(
+        doc,
+        hitEdge,
+        hitCorner
+      )) {
         const onResizeDown = (event) => startResize(id, direction, event);
         resizeHandle.addEventListener("pointerdown", onResizeDown);
         attached.cleanup.push(() => resizeHandle.removeEventListener("pointerdown", onResizeDown));
@@ -1296,16 +1372,25 @@ function attachDesktop(wm, element, options = {}) {
     };
     windowElement.addEventListener("keydown", onModalTrap);
     attached.cleanup.push(() => windowElement.removeEventListener("keydown", onModalTrap));
-    registry.set(id, attached);
-    lastOrder = null;
-    lastFocused = null;
-    syncAll();
-    return () => {
+    const detach = () => {
       if (drag?.id === id) endDrag(true);
       for (const dispose of attached.cleanup) dispose();
       for (const resizeHandle of attached.handles) resizeHandle.remove();
       registry.delete(id);
     };
+    if (windowOptions.removeOnClose) {
+      const stopOnClose = wm.on("close", ({ window: closed }) => {
+        if (closed.id !== id) return;
+        detach();
+        windowElement.remove();
+      });
+      attached.cleanup.push(stopOnClose);
+    }
+    registry.set(id, attached);
+    lastOrder = null;
+    lastFocused = null;
+    syncAll();
+    return detach;
   }
   return {
     element,
@@ -1324,6 +1409,8 @@ function attachDesktop(wm, element, options = {}) {
     }
   };
 }
+
+// src/dom/binder.ts
 function createDesktopBinder(wm, options = {}) {
   let controller = null;
   const entries = /* @__PURE__ */ new Set();
@@ -1364,5 +1451,5 @@ function createDesktopBinder(wm, options = {}) {
 }
 
 export { attachDesktop, boundsEqual, clamp, clampSize, clampToViewport, createAnnouncer, createDesktopBinder, createEmitter, createWindowManager, defaultMessages, detectSnapZone, flipToTarget, prefersReducedMotion, zoneBounds };
-//# sourceMappingURL=chunk-N5KNWRKU.js.map
-//# sourceMappingURL=chunk-N5KNWRKU.js.map
+//# sourceMappingURL=chunk-2TVOEDRG.js.map
+//# sourceMappingURL=chunk-2TVOEDRG.js.map