@surdeddd/wmkit 0.1.0 → 0.2.0

package/dist/{chunk-KWLI7JIY.cjs → chunk-KQCVZ2W7.cjs}

@@ -141,12 +141,7 @@ function createWindowManager(options = {}) {
   }
   function commit() {
     snapshot = null;
-    if (batchDepth > 0) {
-      batchDirty = true;
-      return;
-    }
-    flushEvents();
-    emitter.emit("change", { state: getState() });
+    batchDirty = true;
   }
   function flushEvents() {
     while (pendingEvents.length > 0) {
@@ -155,7 +150,6 @@ function createWindowManager(options = {}) {
   }
   function queueEvent(emit) {
     pendingEvents.push(emit);
-    if (batchDepth === 0) flushEvents();
   }
   function setWindow(next) {
     windows = { ...windows, [next.id]: next };
@@ -219,7 +213,12 @@ function createWindowManager(options = {}) {
     return { x: init.x ?? base.x, y: init.y ?? base.y };
   }
   function open(init = {}) {
-    const id = init.id ?? `${idPrefix}-${++idCounter}`;
+    let id = init.id;
+    if (id === void 0) {
+      do {
+        id = `${idPrefix}-${++idCounter}`;
+      } while (windows[id]);
+    }
     if (windows[id]) throw new Error(`wmkit: window id "${id}" already exists`);
     const minSize = { width: init.minWidth ?? 160, height: init.minHeight ?? 100 };
     const maxSize = init.maxWidth !== void 0 || init.maxHeight !== void 0 ? {
@@ -297,9 +296,7 @@ function createWindowManager(options = {}) {
     return true;
   }
   function closeAll() {
-    batch(() => {
-      for (const id of [...order]) close(id);
-    });
+    for (const id of [...order]) close(id);
   }
   function focus(id) {
     const win = windows[id];
@@ -506,6 +503,11 @@ function createWindowManager(options = {}) {
     if (patch.layer && patch.layer !== win.layer) {
       order = sortByLayer(order);
       queueEvent(() => emitter.emit("order", { order }));
+      if (patch.layer === "modal" && topModalId() === id && focusedId !== id) {
+        const previous = focusedId;
+        focusedId = id;
+        emitFocus(finalWin, previous);
+      }
     }
     queueEvent(() => emitter.emit("update", { window: finalWin }));
     if (resized) queueEvent(() => emitter.emit("resize", { window: finalWin }));
@@ -515,7 +517,7 @@ function createWindowManager(options = {}) {
   function setViewport(next) {
     if (next.width === viewport.width && next.height === viewport.height) return;
     viewport = { ...next };
-    batch(() => {
+    transact(() => {
       for (const id of order) {
         const win = windows[id];
         if (win.stage === "maximized") {
@@ -542,10 +544,10 @@ function createWindowManager(options = {}) {
   function minimized() {
     return Object.values(windows).filter((win) => win.stage === "minimized").sort((a, b) => a.openedSeq - b.openedSeq);
   }
-  function batch(run) {
+  function transact(run) {
     batchDepth += 1;
     try {
-      run();
+      return run();
     } finally {
       batchDepth -= 1;
       if (batchDepth === 0 && batchDirty) {
@@ -564,7 +566,10 @@ function createWindowManager(options = {}) {
         bounds: { ...win.bounds },
         restoreBounds: win.restoreBounds ? { ...win.restoreBounds } : null,
         minSize: { ...win.minSize },
-        maxSize: win.maxSize ? { ...win.maxSize } : null,
+        maxSize: win.maxSize ? {
+          width: Number.isFinite(win.maxSize.width) ? win.maxSize.width : null,
+          height: Number.isFinite(win.maxSize.height) ? win.maxSize.height : null
+        } : null,
         meta: { ...win.meta }
       })),
       order: [...order],
@@ -581,6 +586,19 @@ function createWindowManager(options = {}) {
     const size = value;
     return typeof size.width === "number" && typeof size.height === "number";
   }
+  function isSizeAxis(value) {
+    return value === null || typeof value === "number";
+  }
+  function readMaxSize(value) {
+    if (typeof value !== "object" || value === null) return null;
+    const size = value;
+    if (!isSizeAxis(size.width) || !isSizeAxis(size.height)) return null;
+    if (size.width === null && size.height === null) return null;
+    return {
+      width: size.width ?? Number.POSITIVE_INFINITY,
+      height: size.height ?? Number.POSITIVE_INFINITY
+    };
+  }
   function isSerializedWindow(value) {
     if (typeof value !== "object" || value === null) return false;
     const win = value;
@@ -604,7 +622,7 @@ function createWindowManager(options = {}) {
         snapZone: ZONES.includes(raw.snapZone) ? raw.snapZone : null,
         layer: raw.layer,
         minSize: isSize(raw.minSize) ? { ...raw.minSize } : { width: 160, height: 100 },
-        maxSize: isSize(raw.maxSize) ? { ...raw.maxSize } : null,
+        maxSize: readMaxSize(raw.maxSize),
         openedSeq: typeof raw.openedSeq === "number" ? raw.openedSeq : ++maxSeq,
         draggable: raw.draggable !== false,
         resizable: raw.resizable !== false,
@@ -636,6 +654,11 @@ function createWindowManager(options = {}) {
     focusedId = data.focusedId && windows[data.focusedId] ? data.focusedId : null;
     if (focusedId && windows[focusedId]?.stage === "minimized") focusedId = null;
     if (!focusedId) focusTop();
+    const modal = topModalId();
+    if (modal) {
+      const focusedWin = focusedId ? windows[focusedId] : null;
+      if (focusedWin?.layer !== "modal") focusedId = modal;
+    }
     commit();
     return true;
   }
@@ -643,29 +666,29 @@ function createWindowManager(options = {}) {
     emitter.clear();
   }
   return {
-    open,
-    close,
-    closeAll,
-    focus,
-    blur,
-    cycleFocus,
-    minimize,
-    maximize,
-    toggleMaximize,
-    restore,
-    restoreTo,
-    snap,
-    move,
-    moveBy,
-    resize,
-    update,
+    open: (init) => transact(() => open(init)),
+    close: (id) => transact(() => close(id)),
+    closeAll: () => transact(closeAll),
+    focus: (id) => transact(() => focus(id)),
+    blur: () => transact(blur),
+    cycleFocus: (direction) => transact(() => cycleFocus(direction)),
+    minimize: (id) => transact(() => minimize(id)),
+    maximize: (id) => transact(() => maximize(id)),
+    toggleMaximize: (id) => transact(() => toggleMaximize(id)),
+    restore: (id) => transact(() => restore(id)),
+    restoreTo: (id, bounds) => transact(() => restoreTo(id, bounds)),
+    snap: (id, zone) => transact(() => snap(id, zone)),
+    move: (id, x, y) => transact(() => move(id, x, y)),
+    moveBy: (id, dx, dy) => transact(() => moveBy(id, dx, dy)),
+    resize: (id, patch) => transact(() => resize(id, patch)),
+    update: (id, patch) => transact(() => update(id, patch)),
     get: (id) => windows[id],
     getState,
     minimized,
-    setViewport,
-    batch,
+    setViewport: (next) => transact(() => setViewport(next)),
+    batch: (run) => transact(run),
     serialize,
-    hydrate,
+    hydrate: (data) => transact(() => hydrate(data)),
     subscribe: (listener) => emitter.on("change", ({ state }) => listener(state)),
     on: (event, listener) => emitter.on(event, listener),
     destroy
@@ -753,175 +776,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,
@@ -930,6 +803,9 @@ function attachDesktop(wm, element, options = {}) {
       grabDY: point.y - startBounds.y,
       grabRatio: clamp((point.x - startBounds.x) / startBounds.width, 0.05, 0.95),
       startBounds,
+      startStage: win.stage,
+      startZone: win.snapZone,
+      startRestoreBounds: win.restoreBounds,
       restored: win.stage === "normal",
       moved: false,
       zone: null,
@@ -940,10 +816,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);
@@ -967,32 +842,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;
@@ -1014,10 +892,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);
@@ -1025,11 +904,22 @@ 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) {
-          wm.move(id, session.startBounds.x, session.startBounds.y);
+          if (session.startStage === "maximized") {
+            wm.restoreTo(id, session.startRestoreBounds ?? session.startBounds);
+            wm.maximize(id);
+          } else if (session.startStage === "snapped" && session.startZone) {
+            wm.restoreTo(id, session.startRestoreBounds ?? session.startBounds);
+            wm.snap(id, session.startZone);
+          } else {
+            wm.move(id, session.startBounds.x, session.startBounds.y);
+          }
         }
         return;
       }
@@ -1039,20 +929,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;
@@ -1060,8 +967,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);
     }
@@ -1089,15 +996,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);
@@ -1105,7 +1013,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) {
@@ -1127,6 +1035,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);
@@ -1137,6 +1259,7 @@ function attachDesktop(wm, element, options = {}) {
       handle: null,
       handles: [],
       lastState: null,
+      lastZ: -1,
       cleanup: []
     };
     windowElement.dataset.wmWindow = id;
@@ -1189,24 +1312,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));
@@ -1264,16 +1374,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,
@@ -1292,6 +1411,8 @@ function attachDesktop(wm, element, options = {}) {
     }
   };
 }
+
+// src/dom/binder.ts
 function createDesktopBinder(wm, options = {}) {
   let controller = null;
   const entries = /* @__PURE__ */ new Set();
@@ -1345,5 +1466,5 @@ exports.detectSnapZone = detectSnapZone;
 exports.flipToTarget = flipToTarget;
 exports.prefersReducedMotion = prefersReducedMotion;
 exports.zoneBounds = zoneBounds;
-//# sourceMappingURL=chunk-KWLI7JIY.cjs.map
-//# sourceMappingURL=chunk-KWLI7JIY.cjs.map
+//# sourceMappingURL=chunk-KQCVZ2W7.cjs.map
+//# sourceMappingURL=chunk-KQCVZ2W7.cjs.map