@surdeddd/wmkit 0.2.0 → 0.3.0

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

@@ -97,6 +97,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 };
@@ -120,6 +156,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;
@@ -131,6 +168,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 };
@@ -515,47 +559,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,
@@ -602,10 +763,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) {
@@ -657,6 +824,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;
   }
@@ -687,6 +869,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
@@ -697,6 +894,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;
@@ -839,7 +1064,27 @@ function createDragStarter(ctx) {
         }
         return;
       }
-      wm.move(id, session.pendingX - session.grabDX, session.pendingY - session.grabDY);
+      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, ctx.snapDetect);
@@ -919,14 +1164,17 @@ function createDragStarter(ctx) {
             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;
+    wm.beginInteraction();
     ctx.claimDrag(session);
     handle.setPointerCapture(event.pointerId);
     handle.addEventListener("pointermove", onMove);
@@ -956,6 +1204,7 @@ function createResizeStarter(ctx) {
     event.preventDefault();
     event.stopPropagation();
     const handleEl = event.currentTarget;
+    wm.beginInteraction();
     const releaseRect = ctx.trackRect();
     const startPoint = ctx.toLocal(event);
     const start = win.bounds;
@@ -1013,6 +1262,7 @@ function createResizeStarter(ctx) {
       }
       if (el) delete el.dataset.wmResizing;
       if (cancelled) wm.resize(id, start);
+      wm.endInteraction();
     }
     function onUp(upEvent) {
       if (upEvent.pointerId !== event.pointerId) return;
@@ -1071,6 +1321,7 @@ function attachDesktop(wm, element, options = {}) {
   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";
@@ -1141,6 +1392,7 @@ function attachDesktop(wm, element, options = {}) {
     topEdge,
     hitEdge,
     hitCorner,
+    magnetThreshold,
     currentDrag: () => drag,
     claimDrag(session) {
       drag = session;
@@ -1229,10 +1481,15 @@ function attachDesktop(wm, element, options = {}) {
   );
   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 (!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) {
@@ -1308,6 +1565,16 @@ 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 { element: resizeHandle, direction } of createResizeHandles(
@@ -1450,6 +1717,6 @@ function createDesktopBinder(wm, options = {}) {
   };
 }
 
-export { attachDesktop, boundsEqual, clamp, clampSize, clampToViewport, createAnnouncer, createDesktopBinder, createEmitter, createWindowManager, defaultMessages, detectSnapZone, flipToTarget, prefersReducedMotion, zoneBounds };
-//# sourceMappingURL=chunk-2TVOEDRG.js.map
-//# sourceMappingURL=chunk-2TVOEDRG.js.map
+export { attachDesktop, boundsEqual, clamp, clampSize, clampToViewport, createAnnouncer, createDesktopBinder, createEmitter, createWindowManager, defaultMessages, detectSnapZone, flipToTarget, magnetize, prefersReducedMotion, zoneBounds };
+//# sourceMappingURL=chunk-YCHJXSTC.js.map
+//# sourceMappingURL=chunk-YCHJXSTC.js.map