@surdeddd/wmkit 0.4.0 → 0.4.1

package/README.md

@@ -2,7 +2,7 @@
 
 **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://wmkit.vercel.app) · [Mirror (Pages)](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/) · [Docs](./docs/README.md) · [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)
@@ -346,6 +346,18 @@ Skip the import entirely and the library stays headless: state attributes (`data
 
 The core never touches `window`/`document` — create managers and even `hydrate()` state on the server, then call `attachDesktop` after mount. `persist` no-ops without usable storage.
 
+## Documentation
+
+This README is the tour. The reference lives in [`docs/`](./docs/README.md):
+
+| Page | What is in it |
+| --- | --- |
+| [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 |
+| [Browser support](./docs/browser-support.md) | baselines per entry point and what degrades where |
+
 ## Comparison
 
 | | wmkit | WinBox | jsPanel4 | Dockview | Zag floating-panel |

package/README.ru.md

@@ -2,7 +2,7 @@
 
 **Headless оконный менеджер для веба.** Перетаскиваемые окна с ресайзом, снэпом, таскбаром, клавиатурной доступностью и персистом состояния — для vanilla JS и всех основных фреймворков.
 
-[English version](./README.md) · [Живое демо](https://wmkit.vercel.app) · [Зеркало (Pages)](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/) · [Документация](./docs/README.md) · [GitHub](https://github.com/Surdeddd/wmkit)
 
 [![wmkit — живой демо-десктоп](https://raw.githubusercontent.com/Surdeddd/wmkit/main/.github/assets/hero.png)](https://surdeddd.github.io/wmkit/)
 
@@ -73,7 +73,140 @@ desktop.attachWindow(win.id, el, { removeOnClose: true })
 
 ## Адаптеры
 
-Примеры для React, Vue, Svelte, Solid и Angular — в [английском README](./README.md#react) и на [лендинге](https://surdeddd.github.io/wmkit/) (табы «Фреймворки»). Принцип один: контент окна живёт в дереве вашего фреймворка, никакого innerHTML.
+Каждый адаптер — тонкая обёртка над тем же ядром и тем же DOM-контроллером, около 60 строк. Они нужны только чтобы привязаться и отвязаться в нужный момент жизненного цикла компонента. Контент окна всегда живёт в дереве вашего фреймворка: никакого innerHTML, порталов и переноса узлов.
+
+### React
+
+```tsx
+import { useWindowManager, useDesktop, useWmState, useWmWindowRef } from '@surdeddd/wmkit/react'
+
+function Desktop() {
+  const wm = useWindowManager()
+  const { ref, binder } = useDesktop(wm)
+  const state = useWmState(wm)
+
+  return (
+    <div ref={ref} style={{ position: 'relative', height: '100vh' }}>
+      <button type="button" onClick={() => wm.open({ title: 'Окно' })}>открыть</button>
+      {state.order.map((id) => (
+        <Win key={id} binder={binder} win={state.windows[id]} />
+      ))}
+    </div>
+  )
+}
+
+function Win({ binder, win }) {
+  const ref = useWmWindowRef(binder, win.id, { removeOnClose: true })
+  return (
+    <section ref={ref}>
+      <header data-wm-drag><span data-wm-title>{win.title}</span></header>
+      <div data-wm-content>ваше дерево компонентов</div>
+    </section>
+  )
+}
+```
+
+### Vue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useWindowManager, useDesktop, useWmWindowEl } from '@surdeddd/wmkit/vue'
+
+const host = ref<HTMLElement>()
+const panel = ref<HTMLElement>()
+const wm = useWindowManager()
+const binder = useDesktop(wm, host)
+useWmWindowEl(binder, 'notes', panel)
+wm.open({ id: 'notes', title: 'Заметки' })
+</script>
+
+<template>
+  <div ref="host" style="position: relative; height: 100vh">
+    <section ref="panel">
+      <header data-wm-drag><span data-wm-title>Заметки</span></header>
+      <div data-wm-content>композаблы</div>
+    </section>
+  </div>
+</template>
+```
+
+### Svelte
+
+```svelte
+<script lang="ts">
+  import { createManager, createDesktop, wmWindowStore } from '@surdeddd/wmkit/svelte'
+
+  const wm = createManager()
+  const dk = createDesktop(wm)
+  wm.open({ id: 'notes', title: 'Заметки' })
+  const notes = wmWindowStore(wm, 'notes')
+</script>
+
+<div use:dk.desktop style="position: relative; height: 100vh">
+  <section use:dk.window={{ id: 'notes' }}>
+    <header data-wm-drag><span data-wm-title>{$notes?.title}</span></header>
+    <div data-wm-content>сторы и экшены</div>
+  </section>
+</div>
+```
+
+### Solid
+
+```tsx
+import { useWindowManager, createDesktop, useWmState } from '@surdeddd/wmkit/solid'
+
+function Desktop() {
+  const wm = useWindowManager()
+  const dk = createDesktop(wm)
+  const state = useWmState(wm)
+  wm.open({ id: 'notes', title: 'Заметки' })
+
+  return (
+    <div ref={dk.desktop} style={{ position: 'relative', height: '100vh' }}>
+      <section ref={dk.window('notes')}>
+        <header data-wm-drag><span data-wm-title>Заметки</span></header>
+        <div data-wm-content>{state().order.length} окон</div>
+      </section>
+    </div>
+  )
+}
+```
+
+### Angular
+
+```ts
+import { Component, ElementRef, afterNextRender, viewChild } from '@angular/core'
+import { useWindowManager, createDesktop, useWmState } from '@surdeddd/wmkit/angular'
+
+@Component({
+  selector: 'app-desktop',
+  template: `
+    <div #host style="position: relative; height: 100vh">
+      <section #panel>
+        <header data-wm-drag><span data-wm-title>Заметки</span></header>
+        <div data-wm-content>{{ state().order.length }} окон</div>
+      </section>
+    </div>`,
+})
+export class DesktopComponent {
+  private host = viewChild.required<ElementRef>('host')
+  private panel = viewChild.required<ElementRef>('panel')
+  wm = useWindowManager()
+  state = useWmState(this.wm)
+
+  constructor() {
+    const dk = createDesktop(this.wm)
+    afterNextRender(() => {
+      dk.desktop(this.host().nativeElement)
+      this.wm.open({ id: 'notes', title: 'Заметки' })
+      dk.window('notes')(this.panel().nativeElement)
+    })
+  }
+}
+```
+
+Полные примеры с таскбаром, модалками и сигнатурами всех хуков — в [docs/adapters.md](./docs/adapters.md).
 
 ## API ядра — кратко
 

package/dist/angular.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3KZZOLHW_cjs = require('./chunk-3KZZOLHW.cjs');
+var chunkTJ6QOOJ2_cjs = require('./chunk-TJ6QOOJ2.cjs');
 var core = require('@angular/core');
 
 function onDestroy(dispose) {
@@ -13,7 +13,7 @@ function onDestroy(dispose) {
   destroyRef?.onDestroy(dispose);
 }
 function useWindowManager(options) {
-  const wm = chunk3KZZOLHW_cjs.createWindowManager(options);
+  const wm = chunkTJ6QOOJ2_cjs.createWindowManager(options);
   onDestroy(() => wm.destroy());
   return wm;
 }
@@ -28,7 +28,7 @@ function useWmWindow(wm, id) {
   return core.computed(() => state().windows[id]);
 }
 function createDesktop(wm, options) {
-  const binder = chunk3KZZOLHW_cjs.createDesktopBinder(wm, options);
+  const binder = chunkTJ6QOOJ2_cjs.createDesktopBinder(wm, options);
   onDestroy(() => binder.destroy());
   return {
     binder,

package/dist/angular.js

@@ -1,4 +1,4 @@
-import { createWindowManager, createDesktopBinder } from './chunk-FPZDAKNP.js';
+import { createWindowManager, createDesktopBinder } from './chunk-OOEDFA7K.js';
 import { signal, computed, inject, DestroyRef } from '@angular/core';
 
 function onDestroy(dispose) {

package/dist/{chunk-FPZDAKNP.js → chunk-OOEDFA7K.js}

@@ -1504,6 +1504,7 @@ var SNAP_SHORTCUTS = {
   ArrowLeft: "left",
   ArrowRight: "right"
 };
+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 attachDesktop(wm, element, options = {}) {
   const doc = element.ownerDocument;
@@ -1778,6 +1779,9 @@ function attachDesktop(wm, element, options = {}) {
     }
     const handle = typeof windowOptions.handle === "string" ? windowElement.querySelector(windowOptions.handle) : windowOptions.handle ?? windowElement.querySelector("[data-wm-drag]");
     attached.handle = handle;
+    if (handle && !handle.hasAttribute("role") && LANDMARK_TAGS.has(handle.localName)) {
+      handle.setAttribute("role", "presentation");
+    }
     const onPointerDownFocus = () => {
       wm.focus(id);
     };
@@ -1983,5 +1987,5 @@ function createDesktopBinder(wm, options = {}) {
 }
 
 export { applyAspect, attachDesktop, boundsEqual, clamp, clampSize, clampToViewport, createAnnouncer, createDesktopBinder, createEmitter, createWindowManager, defaultMessages, detectSnapZone, flipFromTarget, flipToTarget, magnetize, prefersReducedMotion, zoneBounds };
-//# sourceMappingURL=chunk-FPZDAKNP.js.map
-//# sourceMappingURL=chunk-FPZDAKNP.js.map
+//# sourceMappingURL=chunk-OOEDFA7K.js.map
+//# sourceMappingURL=chunk-OOEDFA7K.js.map