@surdeddd/wmkit 0.8.0 → 0.9.0

package/dist/{chunk-DINVOL6Z.cjs → chunk-ZWUVWRUS.cjs}

@@ -1369,6 +1369,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;
@@ -1730,7 +1746,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");
@@ -1827,8 +1843,49 @@ 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;
@@ -1947,8 +2004,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;
       }
@@ -2025,6 +2082,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) {
@@ -2062,15 +2122,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) {
@@ -2168,6 +2243,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,
@@ -2181,10 +2261,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;
@@ -2205,10 +2286,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);
@@ -2246,7 +2355,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);
       }
     }
@@ -2284,9 +2393,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];
@@ -2296,10 +2406,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();
       }
@@ -2337,10 +2447,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) {
@@ -2419,5 +2581,5 @@ exports.defaultMessages = defaultMessages;
 exports.flipFromTarget = flipFromTarget;
 exports.flipToTarget = flipToTarget;
 exports.prefersReducedMotion = prefersReducedMotion;
-//# sourceMappingURL=chunk-DINVOL6Z.cjs.map
-//# sourceMappingURL=chunk-DINVOL6Z.cjs.map
+//# sourceMappingURL=chunk-ZWUVWRUS.cjs.map
+//# sourceMappingURL=chunk-ZWUVWRUS.cjs.map