@surdeddd/wmkit 0.1.0 → 0.2.0

package/README.md

@@ -2,12 +2,16 @@
 
 **Headless window manager for the web.** Draggable, resizable, snappable windows with a taskbar model, keyboard accessibility and state persistence — for vanilla JS and every major framework.
 
-[Русская версия](./README.ru.md) · [Live demo](https://surdeddd.github.io/wmkit/) · [GitHub](https://github.com/Surdeddd/wmkit)
+[Русская версия](./README.ru.md) · [Live demo](https://wmkit.vercel.app) · [Mirror (Pages)](https://surdeddd.github.io/wmkit/) · [GitHub](https://github.com/Surdeddd/wmkit)
 
 [![CI](https://github.com/Surdeddd/wmkit/actions/workflows/ci.yml/badge.svg)](https://github.com/Surdeddd/wmkit/actions/workflows/ci.yml)
 [![npm](https://img.shields.io/npm/v/@surdeddd/wmkit)](https://www.npmjs.com/package/@surdeddd/wmkit)
 [![license](https://img.shields.io/badge/license-MIT-2dd4a8)](./LICENSE)
 
+[![wmkit — live demo desktop](https://raw.githubusercontent.com/Surdeddd/wmkit/main/.github/assets/hero.png)](https://surdeddd.github.io/wmkit/)
+
+<p align="center"><em>Every window above is real — <a href="https://surdeddd.github.io/wmkit/">open the demo</a> and drag one.</em></p>
+
 - 🪟 **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
 - ⚛️ **Official adapters** — `@surdeddd/wmkit/react`, `@surdeddd/wmkit/vue`, `@surdeddd/wmkit/svelte`, `@surdeddd/wmkit/solid`, all thin sugar over one core
@@ -50,7 +54,7 @@ el.innerHTML = `
   <div data-wm-content>Anything you want.</div>
 `
 document.querySelector('#desktop').append(el)
-desktop.attachWindow(win.id, el)
+desktop.attachWindow(win.id, el, { removeOnClose: true })
 ```
 
 The desktop element becomes the coordinate space. Your markup stays yours — wmkit wires behavior onto `data-wm-*` attributes:
@@ -62,6 +66,8 @@ The desktop element becomes the coordinate space. Your markup stays yours — wm
 | `data-wm-close` / `data-wm-minimize` / `data-wm-maximize` | control buttons, wired by delegation |
 | `data-wm-content` | scrollable content area (styled by themes) |
 
+`removeOnClose` detaches the controller and removes the element when the window closes. Touch devices get larger resize hit areas and snap thresholds automatically (`pointer: coarse`); tune via `attachDesktop(wm, el, { hitAreas: { edge, corner } })`.
+
 The controller adds resize handles (`[data-wm-resize]`), a snap preview (`[data-wm-snap-preview]`) and a visually hidden live region for screen readers.
 
 ## React
@@ -184,6 +190,12 @@ function Desktop() {
 }
 ```
 
+## Snap zones in action
+
+[![Snap zones — window tiled to the left half](https://raw.githubusercontent.com/Surdeddd/wmkit/main/.github/assets/snap.png)](https://surdeddd.github.io/wmkit/)
+
+Throw a window against an edge or corner — a live preview shows the target zone, releasing tiles it. Halves, quarters, and drag-to-top maximize.
+
 ## Core API
 
 ### `createWindowManager(options?)`

package/README.ru.md

@@ -2,7 +2,11 @@
 
 **Headless оконный менеджер для веба.** Перетаскиваемые окна с ресайзом, снэпом, таскбаром, клавиатурной доступностью и персистом состояния — для vanilla JS и всех основных фреймворков.
 
-[English version](./README.md) · [Живое демо](https://surdeddd.github.io/wmkit/) · [GitHub](https://github.com/Surdeddd/wmkit)
+[English version](./README.md) · [Живое демо](https://wmkit.vercel.app) · [Зеркало (Pages)](https://surdeddd.github.io/wmkit/) · [GitHub](https://github.com/Surdeddd/wmkit)
+
+[![wmkit — живой демо-десктоп](https://raw.githubusercontent.com/Surdeddd/wmkit/main/.github/assets/hero.png)](https://surdeddd.github.io/wmkit/)
+
+<p align="center"><em>Все окна выше настоящие — <a href="https://surdeddd.github.io/wmkit/">откройте демо</a> и потаскайте.</em></p>
 
 - 🪟 **Полный жизненный цикл окна** — открытие, закрытие, фокус, сворачивание, разворачивание, восстановление, drag, ресайз в 8 направлениях
 - 🧠 **Headless-ядро** — сериализуемая стейт-машина плюс DOM-контроллер; своя разметка или готовая стеклянная тема
@@ -46,7 +50,7 @@ el.innerHTML = `
   <div data-wm-content>Что угодно.</div>
 `
 document.querySelector('#desktop').append(el)
-desktop.attachWindow(win.id, el)
+desktop.attachWindow(win.id, el, { removeOnClose: true })
 ```
 
 Элемент рабочего стола становится системой координат. Разметка остаётся вашей — wmkit вешает поведение на `data-wm-*` атрибуты:
@@ -58,6 +62,8 @@ desktop.attachWindow(win.id, el)
 | `data-wm-close` / `data-wm-minimize` / `data-wm-maximize` | кнопки управления, работают через делегирование |
 | `data-wm-content` | скроллируемая область контента |
 
+`removeOnClose` сам отвязывает контроллер и удаляет элемент при закрытии окна. На тач-устройствах хит-зоны ресайза и порог снэпа автоматически крупнее (`pointer: coarse`); настраиваются через `attachDesktop(wm, el, { hitAreas: { edge, corner } })`.
+
 Контроллер добавляет ресайз-хендлы (`[data-wm-resize]`), превью снэпа (`[data-wm-snap-preview]`) и скрытый live-регион для скринридеров.
 
 ## Адаптеры

package/dist/{controller-D5zIriLg.d.ts → binder-BY-saDUB.d.cts}

@@ -1,4 +1,4 @@
-import { B as Bounds, c as Size, d as SnapZone, W as WindowManager, i as WindowState } from './types-CtFzL_oA.js';
+import { B as Bounds, f as Size, g as SnapZone, W as WindowManager, b as WindowState } from './types-Bkrq2djr.cjs';
 
 declare function clamp(value: number, min: number, max: number): number;
 declare function clampSize(size: Size, min: Size, max: Size | null): Size;
@@ -36,16 +36,22 @@ interface DesktopKeyboardOptions {
     moveStep?: number;
     cycle?: boolean;
 }
+interface HitAreaOptions {
+    edge?: number;
+    corner?: number;
+}
 interface DesktopOptions {
     snap?: boolean | DesktopSnapOptions;
     keyboard?: boolean | DesktopKeyboardOptions;
     announce?: boolean | Partial<AnnouncerMessages>;
     autoViewport?: boolean;
+    hitAreas?: HitAreaOptions;
     minimizeTarget?: (window: WindowState) => Element | null;
 }
 interface WindowAttachOptions {
     handle?: HTMLElement | string;
     resizeHandles?: boolean;
+    removeOnClose?: boolean;
 }
 interface DesktopController {
     element: HTMLElement;
@@ -53,7 +59,7 @@ interface DesktopController {
     attachWindow(id: string, element: HTMLElement, options?: WindowAttachOptions): () => void;
     destroy(): void;
 }
-declare function attachDesktop(wm: WindowManager, element: HTMLElement, options?: DesktopOptions): DesktopController;
+
 interface DesktopBinder {
     wm: WindowManager;
     controller(): DesktopController | null;
@@ -62,4 +68,4 @@ interface DesktopBinder {
 }
 declare function createDesktopBinder(wm: WindowManager, options?: DesktopOptions): DesktopBinder;
 
-export { type Announcer as A, type DesktopBinder as D, type SnapDetectOptions as S, type WindowAttachOptions as W, type AnnouncerMessages as a, type DesktopController as b, type DesktopKeyboardOptions as c, type DesktopOptions as d, type DesktopSnapOptions as e, attachDesktop as f, boundsEqual as g, clamp as h, clampSize as i, clampToViewport as j, createAnnouncer as k, createDesktopBinder as l, defaultMessages as m, detectSnapZone as n, zoneBounds as z };
+export { type Announcer as A, type DesktopBinder as D, type HitAreaOptions as H, type SnapDetectOptions as S, type WindowAttachOptions as W, type DesktopController as a, type DesktopOptions as b, type AnnouncerMessages as c, type DesktopKeyboardOptions as d, type DesktopSnapOptions as e, boundsEqual as f, clamp as g, clampSize as h, clampToViewport as i, createAnnouncer as j, createDesktopBinder as k, defaultMessages as l, detectSnapZone as m, zoneBounds as z };

package/dist/{controller-B0bogK9N.d.cts → binder-D9UEE1SM.d.ts}

@@ -1,4 +1,4 @@
-import { B as Bounds, c as Size, d as SnapZone, W as WindowManager, i as WindowState } from './types-CtFzL_oA.cjs';
+import { B as Bounds, f as Size, g as SnapZone, W as WindowManager, b as WindowState } from './types-Bkrq2djr.js';
 
 declare function clamp(value: number, min: number, max: number): number;
 declare function clampSize(size: Size, min: Size, max: Size | null): Size;
@@ -36,16 +36,22 @@ interface DesktopKeyboardOptions {
     moveStep?: number;
     cycle?: boolean;
 }
+interface HitAreaOptions {
+    edge?: number;
+    corner?: number;
+}
 interface DesktopOptions {
     snap?: boolean | DesktopSnapOptions;
     keyboard?: boolean | DesktopKeyboardOptions;
     announce?: boolean | Partial<AnnouncerMessages>;
     autoViewport?: boolean;
+    hitAreas?: HitAreaOptions;
     minimizeTarget?: (window: WindowState) => Element | null;
 }
 interface WindowAttachOptions {
     handle?: HTMLElement | string;
     resizeHandles?: boolean;
+    removeOnClose?: boolean;
 }
 interface DesktopController {
     element: HTMLElement;
@@ -53,7 +59,7 @@ interface DesktopController {
     attachWindow(id: string, element: HTMLElement, options?: WindowAttachOptions): () => void;
     destroy(): void;
 }
-declare function attachDesktop(wm: WindowManager, element: HTMLElement, options?: DesktopOptions): DesktopController;
+
 interface DesktopBinder {
     wm: WindowManager;
     controller(): DesktopController | null;
@@ -62,4 +68,4 @@ interface DesktopBinder {
 }
 declare function createDesktopBinder(wm: WindowManager, options?: DesktopOptions): DesktopBinder;
 
-export { type Announcer as A, type DesktopBinder as D, type SnapDetectOptions as S, type WindowAttachOptions as W, type AnnouncerMessages as a, type DesktopController as b, type DesktopKeyboardOptions as c, type DesktopOptions as d, type DesktopSnapOptions as e, attachDesktop as f, boundsEqual as g, clamp as h, clampSize as i, clampToViewport as j, createAnnouncer as k, createDesktopBinder as l, defaultMessages as m, detectSnapZone as n, zoneBounds as z };
+export { type Announcer as A, type DesktopBinder as D, type HitAreaOptions as H, type SnapDetectOptions as S, type WindowAttachOptions as W, type DesktopController as a, type DesktopOptions as b, type AnnouncerMessages as c, type DesktopKeyboardOptions as d, type DesktopSnapOptions as e, boundsEqual as f, clamp as g, clampSize as h, clampToViewport as i, createAnnouncer as j, createDesktopBinder as k, defaultMessages as l, detectSnapZone as m, zoneBounds as z };