@surdeddd/wmkit 0.7.2 → 0.9.0

package/dist/{chunk-NJAI5R4J.cjs → chunk-TUGQX3CX.js}

@@ -1,4 +1,4 @@
-'use strict';
+import { clampToViewport, boundsEqual, clampSize, applyAspect, clamp, zoneBounds, magnetize, detectSnapZone } from './chunk-5XVIC5LH.js';
 
 // src/core/emitter.ts
 function createEmitter() {
@@ -28,143 +28,6 @@ function createEmitter() {
   };
 }
 
-// src/core/geometry.ts
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-function clampSize(size, min, max) {
-  return {
-    width: clamp(size.width, min.width, max ? max.width : Number.POSITIVE_INFINITY),
-    height: clamp(size.height, min.height, max ? max.height : Number.POSITIVE_INFINITY)
-  };
-}
-function clampToViewport(bounds, viewport, minVisible) {
-  if (viewport.width <= 0 || viewport.height <= 0) return bounds;
-  const visibleX = Math.min(minVisible, bounds.width);
-  const visibleY = Math.min(minVisible, bounds.height);
-  const x = clamp(bounds.x, visibleX - bounds.width, Math.max(0, viewport.width - visibleX));
-  const y = clamp(bounds.y, 0, Math.max(0, viewport.height - visibleY));
-  return x === bounds.x && y === bounds.y ? bounds : { ...bounds, x, y };
-}
-function boundsEqual(a, b) {
-  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
-}
-function applyAspect(size, ratio, min, max, drive) {
-  if (!Number.isFinite(ratio) || ratio <= 0) return clampSize(size, min, max);
-  const maxWidth = max ? max.width : Number.POSITIVE_INFINITY;
-  const maxHeight = max ? max.height : Number.POSITIVE_INFINITY;
-  if (drive === "height") {
-    const height = clamp(
-      size.height,
-      Math.max(min.height, min.width / ratio),
-      Math.min(maxHeight, maxWidth / ratio)
-    );
-    return { width: height * ratio, height };
-  }
-  const width = clamp(
-    size.width,
-    Math.max(min.width, min.height * ratio),
-    Math.min(maxWidth, maxHeight * ratio)
-  );
-  return { width, height: width / ratio };
-}
-function zoneBounds(zone, viewport) {
-  const w = viewport.width;
-  const h = viewport.height;
-  const halfW = Math.round(w / 2);
-  const halfH = Math.round(h / 2);
-  const oneThird = Math.round(w / 3);
-  const twoThirds = Math.round(w * 2 / 3);
-  switch (zone) {
-    case "left-third":
-      return { x: 0, y: 0, width: oneThird, height: h };
-    case "center-third":
-      return { x: oneThird, y: 0, width: twoThirds - oneThird, height: h };
-    case "right-third":
-      return { x: twoThirds, y: 0, width: w - twoThirds, height: h };
-    case "left":
-      return { x: 0, y: 0, width: halfW, height: h };
-    case "right":
-      return { x: halfW, y: 0, width: w - halfW, height: h };
-    case "top":
-      return { x: 0, y: 0, width: w, height: halfH };
-    case "bottom":
-      return { x: 0, y: halfH, width: w, height: h - halfH };
-    case "top-left":
-      return { x: 0, y: 0, width: halfW, height: halfH };
-    case "top-right":
-      return { x: halfW, y: 0, width: w - halfW, height: halfH };
-    case "bottom-left":
-      return { x: 0, y: halfH, width: halfW, height: h - halfH };
-    case "bottom-right":
-      return { x: halfW, y: halfH, width: w - halfW, height: h - halfH };
-  }
-}
-function detectSnapZone(x, y, viewport, options = {}) {
-  const threshold = options.threshold ?? 12;
-  const cornerSize = options.cornerSize ?? 64;
-  const w = viewport.width;
-  const h = viewport.height;
-  if (w <= 0 || h <= 0) return null;
-  const nearLeft = x <= threshold;
-  const nearRight = x >= w - threshold;
-  const nearTop = y <= threshold;
-  const nearBottom = y >= h - threshold;
-  if (nearLeft || nearRight) {
-    const side = nearLeft ? "left" : "right";
-    if (y <= cornerSize) return `top-${side}`;
-    if (y >= h - cornerSize) return `bottom-${side}`;
-    return side;
-  }
-  if (nearTop) {
-    if (x <= cornerSize) return "top-left";
-    if (x >= w - cornerSize) return "top-right";
-    return "top";
-  }
-  if (nearBottom) {
-    if (x <= cornerSize) return "bottom-left";
-    if (x >= w - cornerSize) return "bottom-right";
-    return "bottom";
-  }
-  return null;
-}
-function nearestEdge(low, high, targetLow, targetHigh) {
-  return [targetLow - low, targetHigh - low, targetLow - high, targetHigh - high];
-}
-function magnetize(bounds, targets, threshold) {
-  const result = { x: bounds.x, y: bounds.y, snappedX: false, snappedY: false };
-  if (threshold <= 0 || targets.length === 0) return result;
-  let bestX = threshold + 1;
-  let bestY = threshold + 1;
-  for (const target of targets) {
-    for (const delta of nearestEdge(
-      bounds.x,
-      bounds.x + bounds.width,
-      target.x,
-      target.x + target.width
-    )) {
-      if (Math.abs(delta) <= threshold && Math.abs(delta) < Math.abs(bestX)) bestX = delta;
-    }
-    for (const delta of nearestEdge(
-      bounds.y,
-      bounds.y + bounds.height,
-      target.y,
-      target.y + target.height
-    )) {
-      if (Math.abs(delta) <= threshold && Math.abs(delta) < Math.abs(bestY)) bestY = delta;
-    }
-  }
-  if (Math.abs(bestX) <= threshold) {
-    result.x = bounds.x + bestX;
-    result.snappedX = true;
-  }
-  if (Math.abs(bestY) <= threshold) {
-    result.y = bounds.y + bestY;
-    result.snappedY = true;
-  }
-  return result;
-}
-
 // src/core/manager.ts
 var LAYER_RANK = { normal: 0, floating: 1, modal: 2 };
 var STAGES = ["normal", "minimized", "maximized", "snapped"];
@@ -1504,6 +1367,22 @@ function createAnnouncer(wm, container, messages = {}) {
   };
 }
 
+// src/dom/actions.ts
+function createActions(wm, id) {
+  return {
+    focus: () => wm.focus(id),
+    close: () => wm.close(id),
+    minimize: () => wm.minimize(id),
+    maximize: () => wm.maximize(id),
+    toggleMaximize: () => wm.toggleMaximize(id),
+    restore: () => wm.restore(id),
+    center: () => wm.center(id),
+    sendToBack: () => wm.sendToBack(id),
+    snap: (zone) => wm.snap(id, zone),
+    moveToWorkspace: (workspace) => wm.moveToWorkspace(id, workspace)
+  };
+}
+
 // src/dom/drag.ts
 function createDragStarter(ctx) {
   const { wm, doc, view } = ctx;
@@ -1538,8 +1417,7 @@ function createDragStarter(ctx) {
       pendingX: 0,
       pendingY: 0,
       hasPending: false,
-      finish: () => {
-      }
+      finish: (cancelled) => finish(cancelled)
     };
     const el = ctx.windowElement(id);
     function armGroup(target2) {
@@ -1712,7 +1590,6 @@ function createDragStarter(ctx) {
         else wm.endInteraction();
       }
     }
-    session.finish = finish;
     wm.beginInteraction();
     ctx.claimDrag(session);
     handle.setPointerCapture(event.pointerId);
@@ -1867,7 +1744,7 @@ function createResizeHandles(doc, edge, corner) {
 }
 
 // src/dom/shared.ts
-var INTERACTIVE_SELECTOR = "button, input, select, textarea, a[href], [contenteditable], [data-wm-close], [data-wm-minimize], [data-wm-maximize]";
+var INTERACTIVE_SELECTOR = "button, input, select, textarea, a[href], [contenteditable], [data-wm-close], [data-wm-minimize], [data-wm-maximize], [data-wm-snap], [data-wm-restore], [data-wm-center], [data-wm-send-back], [data-wm-to-workspace]";
 function windowOf(element) {
   const view = element.ownerDocument.defaultView;
   if (!view) throw new Error("wmkit: desktop element is not attached to a document");
@@ -1964,8 +1841,53 @@ var SNAP_SHORTCUTS = {
   ArrowLeft: "left",
   ArrowRight: "right"
 };
+var SNAP_ZONES = /* @__PURE__ */ new Set([
+  "left",
+  "right",
+  "top",
+  "bottom",
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right",
+  "left-third",
+  "center-third",
+  "right-third"
+]);
 var LANDMARK_TAGS = /* @__PURE__ */ new Set(["header", "footer", "aside", "nav"]);
 var FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function focusablesOf(el) {
+  const root = el.shadowRoot;
+  if (!root) return [...el.querySelectorAll(FOCUSABLE_SELECTOR)];
+  const found = [];
+  for (const node of root.querySelectorAll(`${FOCUSABLE_SELECTOR}, slot`)) {
+    if (!(node instanceof HTMLSlotElement)) {
+      found.push(node);
+      continue;
+    }
+    for (const assigned of node.assignedElements()) {
+      if (assigned.matches(FOCUSABLE_SELECTOR)) found.push(assigned);
+      found.push(...assigned.querySelectorAll(FOCUSABLE_SELECTOR));
+    }
+  }
+  return found;
+}
+function dragHandleAt(node, clientX, clientY) {
+  const handle = node.closest?.("[data-wm-drag]");
+  if (handle) return handle;
+  const inner = node.shadowRoot?.elementFromPoint?.(clientX, clientY) ?? null;
+  return inner === null || inner === node ? null : dragHandleAt(inner, clientX, clientY);
+}
+function windowElementOf(node) {
+  const found = node.closest("[data-wm-window]");
+  if (found) return found;
+  const host = node.getRootNode().host;
+  return host ? windowElementOf(host) : null;
+}
+function defaultVariant(win) {
+  const variant = win.meta.variant;
+  return typeof variant === "string" && variant !== "" ? variant : null;
+}
 function attachDesktop(wm, element, options = {}) {
   const doc = element.ownerDocument;
   const view = windowOf(element);
@@ -1990,6 +1912,7 @@ function attachDesktop(wm, element, options = {}) {
   const interactiveSelector = options.interactiveSelector ?? INTERACTIVE_SELECTOR;
   const animationEnabled = options.animation !== false;
   const animationOptions = typeof options.animation === "object" ? options.animation : {};
+  const windowVariant = options.windowVariant ?? defaultVariant;
   element.dataset.wmDesktop = "";
   element.tabIndex = -1;
   if (view.getComputedStyle(element).position === "static") {
@@ -2079,8 +2002,8 @@ function attachDesktop(wm, element, options = {}) {
     groupTarget(clientX, clientY, selfId) {
       if (!groupingEnabled || typeof doc.elementsFromPoint !== "function") return null;
       for (const node of doc.elementsFromPoint(clientX, clientY)) {
-        const handle = node.closest?.("[data-wm-drag]");
-        const host = handle?.closest("[data-wm-window]");
+        const handle = dragHandleAt(node, clientX, clientY);
+        const host = handle && windowElementOf(handle);
         const id = host?.dataset.wmWindow;
         if (id && id !== selfId && registry.get(id)?.element === host) return id;
       }
@@ -2103,6 +2026,21 @@ function attachDesktop(wm, element, options = {}) {
   };
   const startDrag = createDragStarter(ctx);
   const startResize = createResizeStarter(ctx);
+  if (options.gestures) {
+    const gestureContext = {
+      wm,
+      doc,
+      view,
+      desktop: element,
+      toLocal: (event) => ctx.toLocal(event),
+      trackRect: () => ctx.trackRect(),
+      windowElement: (id) => ctx.windowElement(id),
+      busy: () => drag !== null,
+      claim: (gesture) => ctx.claimDrag(gesture),
+      release: (gesture) => ctx.releaseDrag(gesture)
+    };
+    for (const gesture of options.gestures) cleanup.push(gesture(gestureContext));
+  }
   if (options.autoViewport !== false) {
     const applyViewport = () => wm.setViewport({ width: element.clientWidth, height: element.clientHeight });
     applyViewport();
@@ -2121,6 +2059,9 @@ function attachDesktop(wm, element, options = {}) {
       el.dataset.wmStage = win.stage;
       el.dataset.wmLayer = win.layer;
       el.dataset.wmWorkspace = String(win.workspace);
+      const variant = windowVariant(win);
+      if (variant === null) delete el.dataset.wmVariant;
+      else el.dataset.wmVariant = variant;
       if (win.groupId === null) {
         delete el.dataset.wmGroup;
         delete el.dataset.wmTab;
@@ -2139,6 +2080,9 @@ function attachDesktop(wm, element, options = {}) {
       }
       el.hidden = hide;
       el.setAttribute("aria-label", win.title);
+      if (attached.title && attached.title.textContent !== win.title) {
+        attached.title.textContent = win.title;
+      }
       if (win.layer === "modal") el.setAttribute("aria-modal", "true");
       else el.removeAttribute("aria-modal");
       for (const handle of attached.handles) {
@@ -2176,15 +2120,30 @@ function attachDesktop(wm, element, options = {}) {
   function syncAll() {
     const state = wm.getState();
     const orderChanged = state.order !== lastOrder;
+    let restyle = null;
     for (const id of state.order) {
       const attached = registry.get(id);
       const win = state.windows[id];
       if (!attached || !win) continue;
+      const wanted2 = typeof win.meta.skin === "string" ? win.meta.skin : null;
+      if (attached.skin !== null && wanted2 !== null && wanted2 !== attached.skin) {
+        restyle = restyle ?? [];
+        restyle.push([id, wanted2]);
+        continue;
+      }
       const activeTab = win.groupId === null || state.groups[win.groupId]?.activeId === win.id;
       if (attached.lastState !== win || attached.lastWorkspace !== state.workspace || attached.lastTab !== activeTab) {
         syncWindow(attached, win, state.workspace, activeTab);
       }
     }
+    if (restyle !== null) {
+      for (const [id, wanted2] of restyle) {
+        const attached = registry.get(id);
+        if (attached && attached.skin !== wanted2) buildSkin(id, wanted2, attached.mountOptions);
+      }
+      syncAll();
+      return;
+    }
     if (orderChanged) applyStacking(state.order);
     const wanted = state.focusedId ? registry.get(state.focusedId)?.element ?? null : null;
     if (wanted !== focusedEl) {
@@ -2282,6 +2241,11 @@ function attachDesktop(wm, element, options = {}) {
     const attached = {
       element: windowElement,
       handle: null,
+      title: null,
+      skin: null,
+      mount: null,
+      mountOptions: windowOptions,
+      release: null,
       handles: [],
       lastState: null,
       lastZ: UNASSIGNED,
@@ -2295,10 +2259,11 @@ function attachDesktop(wm, element, options = {}) {
     windowElement.style.position = "absolute";
     windowElement.style.left = "0";
     windowElement.style.top = "0";
-    const titleEl = windowElement.querySelector("[data-wm-title]");
-    if (titleEl) {
-      if (!titleEl.id) titleEl.id = `wmkit-title-${id}`;
-      windowElement.setAttribute("aria-labelledby", titleEl.id);
+    const lightTitle = windowElement.querySelector("[data-wm-title]");
+    attached.title = lightTitle ?? windowElement.shadowRoot?.querySelector("[data-wm-title]") ?? null;
+    if (lightTitle) {
+      if (!lightTitle.id) lightTitle.id = `wmkit-title-${id}`;
+      windowElement.setAttribute("aria-labelledby", lightTitle.id);
     }
     const handle = typeof windowOptions.handle === "string" ? windowElement.querySelector(windowOptions.handle) : windowOptions.handle ?? windowElement.querySelector("[data-wm-drag]");
     attached.handle = handle;
@@ -2319,10 +2284,38 @@ function attachDesktop(wm, element, options = {}) {
       if (!current) return;
       if (target.closest("[data-wm-close]")) {
         if (current.closable && options.beforeClose?.(current) !== false) wm.close(id);
-      } else if (target.closest("[data-wm-minimize]")) {
+        return;
+      }
+      if (target.closest("[data-wm-minimize]")) {
         if (current.minimizable) wm.minimize(id);
-      } else if (target.closest("[data-wm-maximize]")) {
+        return;
+      }
+      if (target.closest("[data-wm-maximize]")) {
         if (current.maximizable) wm.toggleMaximize(id);
+        return;
+      }
+      const act = createActions(wm, id);
+      const snapTarget = target.closest("[data-wm-snap]");
+      if (snapTarget) {
+        const zone = snapTarget.dataset.wmSnap ?? "";
+        if (current.snappable && SNAP_ZONES.has(zone)) act.snap(zone);
+        return;
+      }
+      if (target.closest("[data-wm-restore]")) {
+        act.restore();
+        return;
+      }
+      if (target.closest("[data-wm-center]")) {
+        act.center();
+        return;
+      }
+      if (target.closest("[data-wm-send-back]")) {
+        act.sendToBack();
+        return;
+      }
+      const workspaceTarget = target.closest("[data-wm-to-workspace]");
+      if (workspaceTarget) {
+        act.moveToWorkspace(Number.parseInt(workspaceTarget.dataset.wmToWorkspace ?? "", 10));
       }
     };
     windowElement.addEventListener("click", onClick);
@@ -2360,7 +2353,7 @@ function attachDesktop(wm, element, options = {}) {
         const onResizeDown = (event) => startResize(id, direction, event);
         resizeHandle.addEventListener("pointerdown", onResizeDown);
         attached.cleanup.push(() => resizeHandle.removeEventListener("pointerdown", onResizeDown));
-        windowElement.append(resizeHandle);
+        (windowElement.shadowRoot ?? windowElement).append(resizeHandle);
         attached.handles.push(resizeHandle);
       }
     }
@@ -2398,9 +2391,10 @@ function attachDesktop(wm, element, options = {}) {
       if (event.key !== "Tab") return;
       const current = wm.get(id);
       if (current?.layer !== "modal") return;
-      const focusables = [
-        ...windowElement.querySelectorAll(FOCUSABLE_SELECTOR)
-      ].filter((node) => node.offsetParent !== null || node === doc.activeElement);
+      const active = windowElement.shadowRoot?.activeElement ?? doc.activeElement;
+      const focusables = focusablesOf(windowElement).filter(
+        (node) => node.offsetParent !== null || node === active
+      );
       if (focusables.length === 0) return;
       const first = focusables[0];
       const last = focusables[focusables.length - 1];
@@ -2410,10 +2404,10 @@ function attachDesktop(wm, element, options = {}) {
         (event.shiftKey ? last : first).focus();
         return;
       }
-      if (event.shiftKey && doc.activeElement === first) {
+      if (event.shiftKey && active === first) {
         event.preventDefault();
         last.focus();
-      } else if (!event.shiftKey && doc.activeElement === last) {
+      } else if (!event.shiftKey && active === last) {
         event.preventDefault();
         first.focus();
       }
@@ -2451,10 +2445,62 @@ function attachDesktop(wm, element, options = {}) {
     }
     return detach;
   }
+  function resolveSkin(skin) {
+    if (typeof skin !== "string") return skin;
+    const found = options.skins?.[skin];
+    if (!found) throw new Error(`wmkit: unknown skin "${skin}"`);
+    return found;
+  }
+  function buildSkin(id, skin, windowOptions) {
+    const win = wm.get(id);
+    if (!win) throw new Error(`wmkit: cannot mount unknown window "${id}"`);
+    const standing = registry.get(id);
+    const previous = standing?.mount ?? null;
+    const carried = previous === null ? [] : [...previous.content.childNodes];
+    if (previous !== null) {
+      registry.delete(id);
+      standing?.release?.();
+      previous.element.remove();
+    }
+    const mount = resolveSkin(skin)({ doc, id, window: win, actions: createActions(wm, id) });
+    element.append(mount.element);
+    const release = attachWindow(id, mount.element, windowOptions);
+    const attached = registry.get(id);
+    attached.skin = typeof skin === "string" ? skin : null;
+    attached.mount = mount;
+    attached.mountOptions = windowOptions;
+    attached.release = release;
+    mount.content.append(...carried);
+    previous?.destroy?.();
+    return mount;
+  }
+  function mountWindow(id, skin, windowOptions = {}) {
+    let last = buildSkin(id, skin, windowOptions);
+    const live = () => {
+      last = registry.get(id)?.mount ?? last;
+      return last;
+    };
+    return {
+      get element() {
+        return live().element;
+      },
+      get content() {
+        return live().content;
+      },
+      detach() {
+        const mount = live();
+        registry.get(id)?.release?.();
+        mount.element.remove();
+        mount.destroy?.();
+      }
+    };
+  }
   return {
     element,
     wm,
     attachWindow,
+    mountWindow,
+    actions: (id) => createActions(wm, id),
     destroy() {
       endDrag(true);
       for (const [, attached] of registry) {
@@ -2524,22 +2570,6 @@ function createDesktopBinder(wm, options = {}) {
   };
 }
 
-exports.applyAspect = applyAspect;
-exports.attachDesktop = attachDesktop;
-exports.boundsEqual = boundsEqual;
-exports.clamp = clamp;
-exports.clampSize = clampSize;
-exports.clampToViewport = clampToViewport;
-exports.createAnnouncer = createAnnouncer;
-exports.createDesktopBinder = createDesktopBinder;
-exports.createEmitter = createEmitter;
-exports.createWindowManager = createWindowManager;
-exports.defaultMessages = defaultMessages;
-exports.detectSnapZone = detectSnapZone;
-exports.flipFromTarget = flipFromTarget;
-exports.flipToTarget = flipToTarget;
-exports.magnetize = magnetize;
-exports.prefersReducedMotion = prefersReducedMotion;
-exports.zoneBounds = zoneBounds;
-//# sourceMappingURL=chunk-NJAI5R4J.cjs.map
-//# sourceMappingURL=chunk-NJAI5R4J.cjs.map
+export { attachDesktop, createAnnouncer, createDesktopBinder, createEmitter, createWindowManager, defaultMessages, flipFromTarget, flipToTarget, prefersReducedMotion };
+//# sourceMappingURL=chunk-TUGQX3CX.js.map
+//# sourceMappingURL=chunk-TUGQX3CX.js.map