@surdeddd/wmkit 0.1.1 → 0.3.0

package/dist/{chunk-TXINVEK3.cjs → chunk-B35DANTX.cjs}

@@ -99,6 +99,42 @@ function detectSnapZone(x, y, viewport, options = {}) {
   }
   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 };
@@ -122,6 +158,7 @@ function createWindowManager(options = {}) {
   const cascadeOffset = options.cascadeOffset ?? 32;
   const cascadeOrigin = options.cascadeOrigin ?? { x: 32, y: 32 };
   const idPrefix = options.idPrefix ?? "wm";
+  const historyLimit = options.historyLimit ?? 50;
   let windows = {};
   let order = [];
   let focusedId = null;
@@ -133,6 +170,13 @@ function createWindowManager(options = {}) {
   let batchDepth = 0;
   let batchDirty = false;
   const pendingEvents = [];
+  const past = [];
+  let future = [];
+  let interactionDepth = 0;
+  let interactionRecorded = false;
+  let skipNextHistory = false;
+  let pendingHistory = null;
+  const layouts = /* @__PURE__ */ new Map();
   function getState() {
     if (!snapshot) {
       snapshot = { windows, order, focusedId, viewport };
@@ -517,47 +561,164 @@ function createWindowManager(options = {}) {
   function setViewport(next) {
     if (next.width === viewport.width && next.height === viewport.height) return;
     viewport = { ...next };
-    transact(() => {
-      for (const id of order) {
-        const win = windows[id];
-        if (win.stage === "maximized") {
-          const updated = { ...win, bounds: fullBounds() };
-          setWindow(updated);
-          queueEvent(() => emitter.emit("resize", { window: updated }));
-        } else if (win.stage === "snapped" && win.snapZone) {
-          const updated = { ...win, bounds: zoneBounds(win.snapZone, viewport) };
-          setWindow(updated);
-          queueEvent(() => emitter.emit("resize", { window: updated }));
-        } else if (win.stage === "normal" && keepInViewport) {
-          const bounds = clampToViewport(win.bounds, viewport, minVisible);
-          if (!boundsEqual(bounds, win.bounds)) {
-            const updated = { ...win, bounds };
-            setWindow(updated);
-            queueEvent(() => emitter.emit("move", { window: updated }));
-          }
-        }
-      }
-      snapshot = null;
-      batchDirty = true;
-    });
+    reflowViewport();
+    snapshot = null;
+    batchDirty = true;
   }
   function minimized() {
     return Object.values(windows).filter((win) => win.stage === "minimized").sort((a, b) => a.openedSeq - b.openedSeq);
   }
+  function captureEntry() {
+    return { windows, order, focusedId };
+  }
+  function recordHistory() {
+    if (skipNextHistory) {
+      skipNextHistory = false;
+      return;
+    }
+    if (historyLimit <= 0) return;
+    if (interactionDepth > 0) {
+      if (interactionRecorded) return;
+      interactionRecorded = true;
+    }
+    past.push(pendingHistory);
+    if (past.length > historyLimit) past.shift();
+    future = [];
+  }
   function transact(run) {
+    if (batchDepth === 0) pendingHistory = captureEntry();
     batchDepth += 1;
     try {
       return run();
     } finally {
       batchDepth -= 1;
-      if (batchDepth === 0 && batchDirty) {
-        batchDirty = false;
-        snapshot = null;
-        flushEvents();
-        emitter.emit("change", { state: getState() });
+      if (batchDepth === 0) {
+        if (batchDirty) {
+          batchDirty = false;
+          recordHistory();
+          snapshot = null;
+          flushEvents();
+          emitter.emit("change", { state: getState() });
+        }
+        pendingHistory = null;
+      }
+    }
+  }
+  function reflowViewport() {
+    for (const id of order) {
+      const win = windows[id];
+      if (win.stage === "maximized") {
+        const updated = { ...win, bounds: fullBounds() };
+        setWindow(updated);
+        queueEvent(() => emitter.emit("resize", { window: updated }));
+      } else if (win.stage === "snapped" && win.snapZone) {
+        const updated = { ...win, bounds: zoneBounds(win.snapZone, viewport) };
+        setWindow(updated);
+        queueEvent(() => emitter.emit("resize", { window: updated }));
+      } else if (win.stage === "normal" && keepInViewport) {
+        const bounds = clampToViewport(win.bounds, viewport, minVisible);
+        if (!boundsEqual(bounds, win.bounds)) {
+          const updated = { ...win, bounds };
+          setWindow(updated);
+          queueEvent(() => emitter.emit("move", { window: updated }));
+        }
       }
     }
   }
+  function applyEntry(entry) {
+    windows = entry.windows;
+    order = [...entry.order];
+    focusedId = entry.focusedId;
+    reflowViewport();
+    commit();
+  }
+  function undo() {
+    const entry = past.pop();
+    if (!entry) return false;
+    future.push(captureEntry());
+    skipNextHistory = true;
+    applyEntry(entry);
+    return true;
+  }
+  function redo() {
+    const entry = future.pop();
+    if (!entry) return false;
+    past.push(captureEntry());
+    skipNextHistory = true;
+    applyEntry(entry);
+    return true;
+  }
+  function beginInteraction() {
+    interactionDepth += 1;
+    if (interactionDepth === 1) interactionRecorded = false;
+  }
+  function endInteraction() {
+    if (interactionDepth > 0) interactionDepth -= 1;
+  }
+  function clearHistory() {
+    past.length = 0;
+    future = [];
+  }
+  function saveLayout(name) {
+    const data = serialize();
+    layouts.set(name, structuredClone(data));
+    return data;
+  }
+  function loadLayout(name) {
+    const data = layouts.get(name);
+    if (!data) return false;
+    return hydrate(structuredClone(data));
+  }
+  function getLayout(name) {
+    const data = layouts.get(name);
+    return data ? structuredClone(data) : void 0;
+  }
+  function setLayout(name, data) {
+    if (!isValidSerialized(data)) return false;
+    layouts.set(name, structuredClone(data));
+    return true;
+  }
+  function deleteLayout(name) {
+    return layouts.delete(name);
+  }
+  function layoutNames() {
+    return [...layouts.keys()];
+  }
+  function arrange(mode) {
+    const ids = order.filter((id) => windows[id].stage !== "minimized");
+    if (ids.length === 0) return;
+    if (mode === "cascade") {
+      ids.forEach((id, index) => {
+        const win = windows[id];
+        const size = win.restoreBounds ?? win.bounds;
+        restoreTo(id, {
+          x: cascadeOrigin.x + index % 10 * cascadeOffset,
+          y: cascadeOrigin.y + index % 10 * cascadeOffset,
+          width: size.width,
+          height: size.height
+        });
+      });
+      return;
+    }
+    const cols = Math.ceil(Math.sqrt(ids.length));
+    const rows = Math.ceil(ids.length / cols);
+    const cellWidth = Math.floor(viewport.width / cols);
+    const cellHeight = Math.floor(viewport.height / rows);
+    ids.forEach((id, index) => {
+      restoreTo(id, {
+        x: index % cols * cellWidth,
+        y: Math.floor(index / cols) * cellHeight,
+        width: cellWidth,
+        height: cellHeight
+      });
+    });
+  }
+  function minimizeAll() {
+    for (const id of [...order]) minimize(id);
+  }
+  function restoreAll() {
+    for (const win of minimized()) restore(win.id);
+  }
   function serialize() {
     return {
       version: 1,
@@ -604,10 +765,16 @@ function createWindowManager(options = {}) {
     const win = value;
     return typeof win.id === "string" && win.id.length > 0 && isBounds(win.bounds) && STAGES.includes(win.stage) && LAYERS.includes(win.layer);
   }
-  function hydrate(data) {
+  function isValidSerialized(data) {
     if (typeof data !== "object" || data === null) return false;
     if (data.version !== 1 || !Array.isArray(data.windows)) return false;
     if (!data.windows.every(isSerializedWindow)) return false;
+    const ids = new Set(data.windows.map((win) => win.id));
+    return ids.size === data.windows.length;
+  }
+  function hydrate(data) {
+    if (!isValidSerialized(data)) return false;
+    const previousWindows = windows;
     const nextWindows = {};
     let maxSeq = 0;
     for (const raw of data.windows) {
@@ -659,6 +826,21 @@ function createWindowManager(options = {}) {
       const focusedWin = focusedId ? windows[focusedId] : null;
       if (focusedWin?.layer !== "modal") focusedId = modal;
     }
+    for (const id of Object.keys(previousWindows)) {
+      if (!windows[id]) {
+        const closed = previousWindows[id];
+        queueEvent(() => emitter.emit("close", { window: closed }));
+      }
+    }
+    for (const id of order) {
+      if (!previousWindows[id]) {
+        const opened = windows[id];
+        queueEvent(() => emitter.emit("open", { window: opened }));
+      }
+    }
+    queueEvent(() => emitter.emit("order", { order }));
+    clearHistory();
+    skipNextHistory = true;
     commit();
     return true;
   }
@@ -689,6 +871,21 @@ function createWindowManager(options = {}) {
     batch: (run) => transact(run),
     serialize,
     hydrate: (data) => transact(() => hydrate(data)),
+    undo: () => transact(undo),
+    redo: () => transact(redo),
+    canUndo: () => past.length > 0,
+    canRedo: () => future.length > 0,
+    beginInteraction,
+    endInteraction,
+    saveLayout,
+    loadLayout: (name) => transact(() => loadLayout(name)),
+    getLayout,
+    setLayout,
+    deleteLayout,
+    layoutNames,
+    arrange: (mode) => transact(() => arrange(mode)),
+    minimizeAll: () => transact(minimizeAll),
+    restoreAll: () => transact(restoreAll),
     subscribe: (listener) => emitter.on("change", ({ state }) => listener(state)),
     on: (event, listener) => emitter.on(event, listener),
     destroy
@@ -699,6 +896,34 @@ function createWindowManager(options = {}) {
 function prefersReducedMotion(win) {
   return win.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
+function flipFromTarget(source, target, options = {}) {
+  const view = source.ownerDocument.defaultView;
+  if (!view || prefersReducedMotion(view)) return;
+  if (typeof source.animate !== "function") return;
+  const from = target.getBoundingClientRect();
+  const to = source.getBoundingClientRect();
+  if (from.width === 0 || to.width === 0) return;
+  const ghost = source.ownerDocument.createElement("div");
+  const style = view.getComputedStyle(source);
+  ghost.style.cssText = `position:fixed;left:${to.left}px;top:${to.top}px;width:${to.width}px;height:${to.height}px;margin:0;pointer-events:none;z-index:2147483647;border-radius:${style.borderRadius};background:${style.backgroundColor};box-shadow:${style.boxShadow};transform-origin:top left;will-change:transform,opacity`;
+  source.ownerDocument.body.append(ghost);
+  const dx = from.left + from.width / 2 - (to.left + to.width / 2);
+  const dy = from.top + from.height / 2 - (to.top + to.height / 2);
+  const scaleX = Math.max(from.width / to.width, 0.05);
+  const scaleY = Math.max(from.height / to.height, 0.05);
+  const animation = ghost.animate(
+    [
+      { transform: `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`, opacity: 0.2 },
+      { transform: "translate(0, 0) scale(1, 1)", opacity: 0.9 }
+    ],
+    {
+      duration: options.duration ?? 260,
+      easing: options.easing ?? "cubic-bezier(0.32, 0.72, 0, 1)"
+    }
+  );
+  animation.onfinish = () => ghost.remove();
+  animation.oncancel = () => ghost.remove();
+}
 function flipToTarget(source, target, options = {}) {
   const view = source.ownerDocument.defaultView;
   if (!view || prefersReducedMotion(view)) return;
@@ -776,175 +1001,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,
@@ -966,10 +1041,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);
@@ -992,33 +1066,56 @@ function attachDesktop(wm, element, options = {}) {
         }
         return;
       }
-      wm.move(id, session.pendingX - session.grabDX, session.pendingY - session.grabDY);
-      if (snapEnabled && current.snappable) {
+      let nextX = session.pendingX - session.grabDX;
+      let nextY = session.pendingY - session.grabDY;
+      if (ctx.magnetThreshold > 0) {
+        const state = wm.getState();
+        const targets = [
+          { x: 0, y: 0, width: state.viewport.width, height: state.viewport.height }
+        ];
+        for (const otherId of state.order) {
+          if (otherId === id) continue;
+          const other = state.windows[otherId];
+          if (other && other.stage !== "minimized") targets.push(other.bounds);
+        }
+        const magnet = magnetize(
+          { x: nextX, y: nextY, width: current.bounds.width, height: current.bounds.height },
+          targets,
+          ctx.magnetThreshold
+        );
+        nextX = magnet.x;
+        nextY = magnet.y;
+      }
+      wm.move(id, nextX, nextY);
+      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;
@@ -1040,10 +1137,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);
@@ -1051,8 +1149,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") {
@@ -1065,28 +1166,49 @@ function attachDesktop(wm, element, options = {}) {
             wm.move(id, session.startBounds.x, session.startBounds.y);
           }
         }
+        wm.endInteraction();
         return;
       }
       if (session.moved && session.zone) {
         if (session.zone === "maximize") wm.maximize(id);
         else wm.snap(id, session.zone);
       }
+      wm.endInteraction();
     }
     session.finish = finish;
-    drag = session;
+    wm.beginInteraction();
+    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);
+    wm.beginInteraction();
+    const releaseRect = ctx.trackRect();
+    const startPoint = ctx.toLocal(event);
     const start = win.bounds;
     const minSize = win.minSize;
     const maxSize = win.maxSize;
@@ -1094,8 +1216,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);
     }
@@ -1123,15 +1245,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);
@@ -1139,8 +1262,9 @@ 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);
+      wm.endInteraction();
     }
     function onUp(upEvent) {
       if (upEvent.pointerId !== event.pointerId) return;
@@ -1161,6 +1285,227 @@ 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);
+  const magnetThreshold = options.magnetism === false ? 0 : (typeof options.magnetism === "object" ? options.magnetism.threshold : void 0) ?? (coarsePointer ? 12 : 8);
+  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,
+    magnetThreshold,
+    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 }) => {
+      const attached = registry.get(win.id);
+      if (!attached) return;
+      if (win.stage === "minimized" && previous !== "minimized") {
+        const target = options.minimizeTarget?.(win);
+        if (target) flipToTarget(attached.element, target);
+      } else if (previous === "minimized" && win.stage !== "minimized") {
+        const target = options.minimizeTarget?.(win);
+        if (target) flipFromTarget(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);
@@ -1171,6 +1516,7 @@ function attachDesktop(wm, element, options = {}) {
       handle: null,
       handles: [],
       lastState: null,
+      lastZ: -1,
       cleanup: []
     };
     windowElement.dataset.wmWindow = id;
@@ -1221,26 +1567,23 @@ function attachDesktop(wm, element, options = {}) {
       };
       handle.addEventListener("dblclick", onDoubleClick);
       attached.cleanup.push(() => handle.removeEventListener("dblclick", onDoubleClick));
+      if (options.onTitlebarContextMenu) {
+        const onContextMenu = (event) => {
+          const current = wm.get(id);
+          if (!current) return;
+          event.preventDefault();
+          options.onTitlebarContextMenu?.(current, event);
+        };
+        handle.addEventListener("contextmenu", onContextMenu);
+        attached.cleanup.push(() => handle.removeEventListener("contextmenu", onContextMenu));
+      }
     }
     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));
@@ -1298,16 +1641,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,
@@ -1326,6 +1678,8 @@ function attachDesktop(wm, element, options = {}) {
     }
   };
 }
+
+// src/dom/binder.ts
 function createDesktopBinder(wm, options = {}) {
   let controller = null;
   const entries = /* @__PURE__ */ new Set();
@@ -1377,7 +1731,8 @@ exports.createWindowManager = createWindowManager;
 exports.defaultMessages = defaultMessages;
 exports.detectSnapZone = detectSnapZone;
 exports.flipToTarget = flipToTarget;
+exports.magnetize = magnetize;
 exports.prefersReducedMotion = prefersReducedMotion;
 exports.zoneBounds = zoneBounds;
-//# sourceMappingURL=chunk-TXINVEK3.cjs.map
-//# sourceMappingURL=chunk-TXINVEK3.cjs.map
+//# sourceMappingURL=chunk-B35DANTX.cjs.map
+//# sourceMappingURL=chunk-B35DANTX.cjs.map