@surdeddd/wmkit 0.9.1 → 0.10.0

package/README.md

@@ -14,6 +14,7 @@
 
 - 🪟 **Full window lifecycle** — open, close, focus, minimize, maximize, restore, drag, 8-direction resize
 - 🧠 **Headless core** — a serializable state machine plus a DOM controller; bring your own markup or use the glass theme
+- 🧱 **Your window, your markup** — build the whole frame from a template string, wire its buttons by attribute, and swap the skin on a live window without losing what it was showing
 - ⚛️ **Official adapters** — `@surdeddd/wmkit/react`, `/vue`, `/svelte`, `/solid`, `/angular`, all thin sugar over one core
 - 🗃️ **Tab groups** — drop one titlebar onto another and the windows share a frame, dockview style; the tab order is yours to reorder
 - ⊞ **Snap zones** — halves, quarters, thirds and drag-to-top maximize with a live preview
@@ -26,7 +27,7 @@
 - 💾 **Persistence** — one call to serialize the desktop, one call to restore it, with versioned migrations
 - 🎨 **Sixteen themes** — glass, light, retro, terminal, paper, neon, aqua, frost, candy, carbon, brutalist, blueprint, amber, noir, forest, synth — or bring your own CSS
 - 🖼️ **Popout** *(experimental)* — send a window into Document Picture-in-Picture
-- 📦 **Zero dependencies**, strict TypeScript, ESM + CJS, ~10.7 kB brotli core
+- 📦 **Zero dependencies**, strict TypeScript, ESM + CJS, under 15 kB brotli core
 
 ## Install
 
@@ -328,7 +329,7 @@ Moves a window's content into a [Document Picture-in-Picture](https://developer.
 
 ### `pinch(options?)`, `swipe(options?)`, `touchGestures(options?)` — `@surdeddd/wmkit/gestures`
 
-Two-finger gestures, opt-in so the core never pays for them: pinch a window to resize it around the point between your fingers, swipe two fingers sideways to change workspace. 1.46 kB brotlied.
+Two-finger gestures, opt-in so the core never pays for them: pinch a window to resize it around the point between your fingers, swipe two fingers sideways to change workspace. 1.47 kB brotlied.
 
 ```js
 import { attachDesktop } from '@surdeddd/wmkit'
@@ -341,7 +342,7 @@ A gesture is just a function that takes a `GestureContext` and returns its teard
 
 ### `skin(spec)`, `defaultSkin`, `barebones` — `@surdeddd/wmkit/chrome`
 
-Builds the window itself from a markup string, so a consumer can ship their own chrome and their own buttons without writing a single listener. 802 B brotlied.
+Builds the window itself from a markup string, so a consumer can ship their own chrome and their own buttons without writing a single listener. 1.02 kB brotlied.
 
 ```js
 import { attachDesktop } from '@surdeddd/wmkit'
@@ -394,9 +395,17 @@ Rows are patched in place rather than re-rendered, so keyboard focus inside the
 }
 ```
 
-Fifteen more ready-made themes ship alongside — `light`, `retro`, `terminal`, `paper`, `neon`, `aqua`, `frost`, `candy`, `carbon`, `brutalist`, `blueprint`, `amber`, `noir`, `forest` and `synth`. They all style the same `data-wm-*` attributes, so switching is a one-line import swap, and every one of them ships 24px pointer targets plus `prefers-reduced-motion` and `forced-colors` blocks.
+Fifteen more ready-made themes ship alongside — `light`, `retro`, `terminal`, `paper`, `neon`, `aqua`, `frost`, `candy`, `carbon`, `brutalist`, `blueprint`, `amber`, `noir`, `forest` and `synth`. They all style the same `data-wm-*` attributes, so switching is a one-line import swap, and every one of them ships 24px pointer targets plus `prefers-reduced-motion` and `forced-colors` blocks. Every one is also held to WCAG AA contrast by a browser test that measures the rendered pixels of the demo under all sixteen.
 
-A theme dresses every window; a variant dresses one. Set `meta.variant` on a window and the desktop mirrors it to `data-wm-variant` for your CSS to pick up — see [docs/theming.md](docs/theming.md).
+Three layers, from the widest to the narrowest:
+
+| layer | reaches | changes |
+| --- | --- | --- |
+| theme | every window | the tokens |
+| variant | one window | the tokens, through `data-wm-variant` |
+| skin | one window | the markup itself |
+
+A theme and a variant repaint what is there; a skin replaces it. Set `meta.variant` for the first two and `meta.skin` for the third — see [docs/theming.md](docs/theming.md).
 
 Skip the import entirely and the library stays headless: state attributes (`data-wm-stage`, `data-wm-focused`, `data-wm-dragging`, `data-wm-flash`, `[hidden]`) are yours to style.
 
@@ -413,7 +422,7 @@ This README is the tour. The reference lives in [`docs/`](./docs/README.md):
 | [API reference](./docs/api.md) | every export, option, method, event and type |
 | [Adapters](./docs/adapters.md) | complete React, Vue, Svelte, Solid and Angular integrations |
 | [Theming](./docs/theming.md) | `data-wm-*` contract, CSS variables, writing a theme from scratch |
-| [Recipes](./docs/recipes.md) | taskbar, modals, persistence, workspaces, SSR, testing, performance |
+| [Recipes](./docs/recipes.md) | building a window from scratch, taskbar, modals, persistence, workspaces, SSR, testing, performance |
 | [Browser support](./docs/browser-support.md) | baselines per entry point and what degrades where |
 
 ## Comparison
@@ -434,8 +443,8 @@ This README is the tour. The reference lives in [`docs/`](./docs/README.md):
 
 ## Quality
 
-- 250 unit tests: **100%** line/branch/function/statement coverage on the core state machine and persistence, with enforced floors on the DOM layer and the adapters
-- 190+ Playwright scenarios on Chromium, WebKit and mobile emulation: drag, 8-way resize, snap, magnetism, workspaces, undo after drag, keyboard, touch, persistence across reloads, 50-window stress, modal traps, axe accessibility scans, visual regression screenshots
+- 565 unit tests: **100%** line/branch/function/statement coverage on the core state machine, the chrome plugin and persistence, with enforced floors on the DOM layer and the adapters
+- 550+ Playwright scenarios on Chromium, Firefox, WebKit and mobile emulation: drag, 8-way resize, snap, magnetism, workspaces, undo after drag, keyboard, touch, persistence across reloads, 50-window stress, modal traps, axe accessibility scans, visual regression screenshots
 - performance benchmarks run in CI on every push (`vitest bench`): 1 000 windows open in ~150 ms, a move among 50 windows costs ~1.2 µs, a full 100-step undo/redo sweep ~52 µs
 - `publint` + `@arethetypeswrong/cli` validate the published package, `size-limit` guards bundle budgets
 

package/README.ru.md

@@ -10,6 +10,7 @@
 
 - 🪟 **Полный жизненный цикл окна** — открытие, закрытие, фокус, сворачивание, разворачивание, восстановление, drag, ресайз в 8 направлениях
 - 🧠 **Headless-ядро** — сериализуемая стейт-машина плюс DOM-контроллер; своя разметка или готовая стеклянная тема
+- 🧱 **Своё окно, своя разметка** — соберите весь корпус из строки-шаблона, повесьте кнопки атрибутами и меняйте скин на живом окне, не теряя того, что оно показывало
 - ⚛️ **Родные адаптеры** — `@surdeddd/wmkit/react`, `/vue`, `/svelte`, `/solid`, `/angular`, тонкий сахар над одним ядром
 - 🗃️ **Вкладочные группы** — бросьте заголовок на заголовок, и окна начнут делить одну рамку; порядок вкладок можно менять
 - ⊞ **Snap-зоны** — половины, четверти, трети и максимизация от верхнего края с живым превью
@@ -22,7 +23,7 @@
 - 💾 **Персист** — один вызов сериализует рабочий стол, один — восстанавливает, с версионированием и миграциями
 - 🎨 **Шестнадцать тем** — glass, light, retro, terminal, paper, neon, aqua, frost, candy, carbon, brutalist, blueprint, amber, noir, forest, synth — либо полностью свой CSS
 - 🖼️ **Popout** *(experimental)* — вынос окна в Document Picture-in-Picture
-- 📦 **Ноль зависимостей**, строгий TypeScript, ESM + CJS, ~10.7 kB brotli
+- 📦 **Ноль зависимостей**, строгий TypeScript, ESM + CJS, ядро меньше 15 кБ в brotli
 
 ## Установка
 
@@ -277,7 +278,7 @@ attachDesktop(wm, root, { gestures: [touchGestures({ swipe: { workspaces: 4 } })
 
 ### `skin(spec)`, `defaultSkin`, `barebones` — `@surdeddd/wmkit/chrome`
 
-Собирает само окно из строки разметки: можно принести свою обвязку и свои кнопки, не написав ни одного обработчика. 802 Б в brotli.
+Собирает само окно из строки разметки: можно принести свою обвязку и свои кнопки, не написав ни одного обработчика. 1.02 кБ в brotli.
 
 ```js
 import { attachDesktop } from '@surdeddd/wmkit'
@@ -323,7 +324,17 @@ panel.destroy()
 
 Ещё пятнадцать готовых тем: `light`, `retro`, `terminal`, `paper`, `neon`, `aqua`, `frost`, `candy`, `carbon`, `brutalist`, `blueprint`, `amber`, `noir`, `forest`, `synth`. Все стилизуют одни и те же `data-wm-*` атрибуты — переключение = замена одного импорта, и у каждой есть 24px тач-цели плюс блоки `prefers-reduced-motion` и `forced-colors`.
 
-Тема одевает все окна, вариант — одно. Задайте `meta.variant` у окна, и десктоп отзеркалит его в `data-wm-variant` для вашего CSS — подробности в [docs/theming.md](docs/theming.md).
+Каждая тема к тому же держит контраст WCAG AA: браузерный тест меряет отрендеренные пиксели демо под всеми шестнадцатью и падает ниже 4.5:1.
+
+Три слоя, от самого широкого к самому узкому:
+
+| слой | достаёт до | меняет |
+| --- | --- | --- |
+| тема | всех окон | токены |
+| вариант | одного окна | токены, через `data-wm-variant` |
+| скин | одного окна | саму разметку |
+
+Тема и вариант перекрашивают то, что есть; скин это заменяет. Для первых двух — `meta.variant`, для третьего — `meta.skin`, подробности в [docs/theming.md](docs/theming.md).
 
 ## SSR
 
@@ -331,8 +342,8 @@ panel.destroy()
 
 ## Качество
 
-- 250 юнит-тестов: **100%** покрытие стейт-машины и persist по строкам/веткам/функциям, плюс обязательные пороги на DOM-слой и адаптеры
-- 190+ Playwright-сценариев на Chromium, WebKit и мобильной эмуляции: drag, ресайз во все стороны, снэп, магнетизм, рабочие столы, undo после drag, клавиатура, touch, персист через перезагрузку, стресс на 50 окон, модальные ловушки, axe-аудиты доступности, визуальная регрессия по скриншотам
+- 565 юнит-тестов: **100%** покрытие стейт-машины, chrome-плагина и persist по строкам/веткам/функциям, плюс обязательные пороги на DOM-слой и адаптеры
+- 550+ Playwright-сценариев на Chromium, Firefox, WebKit и мобильной эмуляции: drag, ресайз во все стороны, снэп, магнетизм, рабочие столы, undo после drag, клавиатура, touch, персист через перезагрузку, стресс на 50 окон, модальные ловушки, axe-аудиты доступности, визуальная регрессия по скриншотам
 - перф-бенчмарки в CI на каждый push (`vitest bench`): 1 000 окон открываются за ~150 мс, move среди 50 окон ~1.2 мкс, полный undo/redo-проход на 100 шагов ~52 мкс
 - `publint` + `@arethetypeswrong/cli` проверяют валидность пакета, `size-limit` следит за бюджетами
 

package/dist/angular.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkZWUVWRUS_cjs = require('./chunk-ZWUVWRUS.cjs');
+var chunkVHS2YX3A_cjs = require('./chunk-VHS2YX3A.cjs');
 require('./chunk-BDHFXEJN.cjs');
 var core = require('@angular/core');
 
@@ -14,7 +14,7 @@ function onDestroy(dispose) {
   destroyRef?.onDestroy(dispose);
 }
 function useWindowManager(options) {
-  const wm = chunkZWUVWRUS_cjs.createWindowManager(options);
+  const wm = chunkVHS2YX3A_cjs.createWindowManager(options);
   onDestroy(() => wm.destroy());
   return wm;
 }
@@ -29,7 +29,7 @@ function useWmWindow(wm, id) {
   return core.computed(() => state().windows[id]);
 }
 function createDesktop(wm, options) {
-  const binder = chunkZWUVWRUS_cjs.createDesktopBinder(wm, options);
+  const binder = chunkVHS2YX3A_cjs.createDesktopBinder(wm, options);
   onDestroy(() => binder.destroy());
   return {
     binder,

package/dist/angular.js

@@ -1,4 +1,4 @@
-import { createWindowManager, createDesktopBinder } from './chunk-TUGQX3CX.js';
+import { createWindowManager, createDesktopBinder } from './chunk-V7OTLDVK.js';
 import './chunk-5XVIC5LH.js';
 import { signal, computed, inject, DestroyRef } from '@angular/core';
 

package/dist/{chunk-TUGQX3CX.js → chunk-V7OTLDVK.js}

@@ -1856,6 +1856,14 @@ var SNAP_ZONES = /* @__PURE__ */ new Set([
 ]);
 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 firedOn(event) {
+  const path = event.composedPath();
+  const first = path.length > 0 ? path[0] : event.target;
+  return first instanceof Element ? first : null;
+}
+function findInWindow(el, selector) {
+  return el.querySelector(selector) ?? el.shadowRoot?.querySelector(selector) ?? null;
+}
 function focusablesOf(el) {
   const root = el.shadowRoot;
   if (!root) return [...el.querySelectorAll(FOCUSABLE_SELECTOR)];
@@ -1875,8 +1883,15 @@ function focusablesOf(el) {
 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);
+  const root = node.shadowRoot;
+  if (!root) return null;
+  for (const candidate of root.querySelectorAll("[data-wm-drag]")) {
+    const box = candidate.getBoundingClientRect();
+    if (clientX >= box.left && clientX <= box.right && clientY >= box.top && clientY <= box.bottom) {
+      return candidate;
+    }
+  }
+  return null;
 }
 function windowElementOf(node) {
   const found = node.closest("[data-wm-window]");
@@ -2117,7 +2132,24 @@ function attachDesktop(wm, element, options = {}) {
     restack(stackTarget, { base: zIndexBase, gap: zIndexGap });
     stackRows.length = length;
   }
+  let syncing = false;
+  let syncAgain = false;
   function syncAll() {
+    if (syncing) {
+      syncAgain = true;
+      return;
+    }
+    syncing = true;
+    try {
+      do {
+        syncAgain = false;
+        syncPass();
+      } while (syncAgain);
+    } finally {
+      syncing = false;
+    }
+  }
+  function syncPass() {
     const state = wm.getState();
     const orderChanged = state.order !== lastOrder;
     let restyle = null;
@@ -2141,7 +2173,7 @@ function attachDesktop(wm, element, options = {}) {
         const attached = registry.get(id);
         if (attached && attached.skin !== wanted2) buildSkin(id, wanted2, attached.mountOptions);
       }
-      syncAll();
+      syncAgain = true;
       return;
     }
     if (orderChanged) applyStacking(state.order);
@@ -2200,7 +2232,7 @@ function attachDesktop(wm, element, options = {}) {
       }
       if (!event.ctrlKey && !event.metaKey) return;
       if (drag) return;
-      const target = event.target;
+      const target = firedOn(event);
       if (target?.closest(interactiveSelector)) return;
       if (historyShortcuts && (event.key === "z" || event.key === "Z")) {
         event.preventDefault();
@@ -2231,6 +2263,7 @@ function attachDesktop(wm, element, options = {}) {
     element.addEventListener("keydown", onDesktopKeydown);
     cleanup.push(() => element.removeEventListener("keydown", onDesktopKeydown));
   }
+  let rebuilding = false;
   function endDrag(cancelled) {
     if (drag) drag.finish(cancelled);
   }
@@ -2260,12 +2293,12 @@ function attachDesktop(wm, element, options = {}) {
     windowElement.style.left = "0";
     windowElement.style.top = "0";
     const lightTitle = windowElement.querySelector("[data-wm-title]");
-    attached.title = lightTitle ?? windowElement.shadowRoot?.querySelector("[data-wm-title]") ?? null;
+    attached.title = lightTitle ?? findInWindow(windowElement, "[data-wm-title]");
     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]");
+    const handle = typeof windowOptions.handle === "string" ? findInWindow(windowElement, windowOptions.handle) : windowOptions.handle ?? findInWindow(windowElement, "[data-wm-drag]");
     attached.handle = handle;
     if (handle && !handle.hasAttribute("role") && LANDMARK_TAGS.has(handle.localName)) {
       handle.setAttribute("role", "presentation");
@@ -2278,7 +2311,7 @@ function attachDesktop(wm, element, options = {}) {
       () => windowElement.removeEventListener("pointerdown", onPointerDownFocus, true)
     );
     const onClick = (event) => {
-      const target = event.target;
+      const target = firedOn(event);
       if (!target) return;
       const current = wm.get(id);
       if (!current) return;
@@ -2326,7 +2359,7 @@ function attachDesktop(wm, element, options = {}) {
       handle.addEventListener("pointerdown", onHandleDown);
       attached.cleanup.push(() => handle.removeEventListener("pointerdown", onHandleDown));
       const onDoubleClick = (event) => {
-        const target = event.target;
+        const target = firedOn(event);
         if (target?.closest(interactiveSelector)) return;
         const current = wm.get(id);
         if (current?.maximizable) wm.toggleMaximize(id);
@@ -2358,7 +2391,7 @@ function attachDesktop(wm, element, options = {}) {
       }
     }
     const onWindowKeydown = (event) => {
-      const target = event.target;
+      const target = firedOn(event);
       if (target?.closest(interactiveSelector)) return;
       const current = wm.get(id);
       if (!current) return;
@@ -2418,7 +2451,7 @@ function attachDesktop(wm, element, options = {}) {
     const detach = () => {
       if (detached) return;
       detached = true;
-      if (drag?.id === id) endDrag(true);
+      if (drag?.id === id) endDrag(!rebuilding);
       for (const dispose of attached.cleanup) dispose();
       for (const resizeHandle of attached.handles) resizeHandle.remove();
       registry.delete(id);
@@ -2454,15 +2487,21 @@ function attachDesktop(wm, element, options = {}) {
   function buildSkin(id, skin, windowOptions) {
     const win = wm.get(id);
     if (!win) throw new Error(`wmkit: cannot mount unknown window "${id}"`);
+    const build = resolveSkin(skin);
     const standing = registry.get(id);
     const previous = standing?.mount ?? null;
-    const carried = previous === null ? [] : [...previous.content.childNodes];
+    const carried = previous === null || previous.content.ownerDocument !== doc ? [] : [...previous.content.childNodes];
     if (previous !== null) {
       registry.delete(id);
-      standing?.release?.();
+      rebuilding = true;
+      try {
+        standing?.release?.();
+      } finally {
+        rebuilding = false;
+      }
       previous.element.remove();
     }
-    const mount = resolveSkin(skin)({ doc, id, window: win, actions: createActions(wm, id) });
+    const mount = build({ doc, id, window: win, actions: createActions(wm, id) });
     element.append(mount.element);
     const release = attachWindow(id, mount.element, windowOptions);
     const attached = registry.get(id);
@@ -2474,10 +2513,14 @@ function attachDesktop(wm, element, options = {}) {
     previous?.destroy?.();
     return mount;
   }
-  function mountWindow(id, skin, windowOptions = {}) {
+  function mountWindow(id, skin, options2 = {}) {
+    const windowOptions = { removeOnClose: true, ...options2 };
     let last = buildSkin(id, skin, windowOptions);
+    let spent = false;
     const live = () => {
-      last = registry.get(id)?.mount ?? last;
+      if (spent) return last;
+      const now = registry.get(id)?.mount;
+      if (now) last = now;
       return last;
     };
     return {
@@ -2488,8 +2531,10 @@ function attachDesktop(wm, element, options = {}) {
         return live().content;
       },
       detach() {
+        if (spent) return;
         const mount = live();
-        registry.get(id)?.release?.();
+        spent = true;
+        if (registry.get(id)?.mount === mount) registry.get(id)?.release?.();
         mount.element.remove();
         mount.destroy?.();
       }
@@ -2506,6 +2551,10 @@ function attachDesktop(wm, element, options = {}) {
       for (const [, attached] of registry) {
         for (const dispose of attached.cleanup) dispose();
         for (const resizeHandle of attached.handles) resizeHandle.remove();
+        if (attached.mount) {
+          attached.mount.element.remove();
+          attached.mount.destroy?.();
+        }
       }
       registry.clear();
       for (const dispose of cleanup) dispose();
@@ -2571,5 +2620,5 @@ function createDesktopBinder(wm, options = {}) {
 }
 
 export { attachDesktop, createAnnouncer, createDesktopBinder, createEmitter, createWindowManager, defaultMessages, flipFromTarget, flipToTarget, prefersReducedMotion };
-//# sourceMappingURL=chunk-TUGQX3CX.js.map
-//# sourceMappingURL=chunk-TUGQX3CX.js.map
+//# sourceMappingURL=chunk-V7OTLDVK.js.map
+//# sourceMappingURL=chunk-V7OTLDVK.js.map