@surdeddd/wmkit 0.9.1 → 0.9.2

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
 
@@ -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

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
 
 ## Установка
 
@@ -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
 

package/dist/themes/amber.css

@@ -8,8 +8,9 @@
   --wm-shadow-focused: 0 0 26px rgba(255, 176, 46, 0.22);
   --wm-titlebar-bg: rgba(255, 176, 46, 0.09);
   --wm-text: #ffc356;
-  --wm-text-dim: rgba(255, 195, 86, 0.55);
+  --wm-text-dim: rgba(255, 195, 86, 0.72);
   --wm-accent: #ffb02e;
+  --wm-accent-ink: #ffb02e;
   --wm-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
   --wm-title-font: var(--wm-mono);
   --wm-title-size: 12px;

package/dist/themes/aqua.css

@@ -1,6 +1,6 @@
 [data-wm-desktop] {
   --wm-radius: 10px;
-  --wm-bg: rgba(238, 241, 246, 0.86);
+  --wm-bg: rgba(238, 241, 246, 0.94);
   --wm-bg-focused: rgba(246, 248, 252, 0.96);
   --wm-border: rgba(60, 80, 110, 0.28);
   --wm-border-focused: rgba(40, 70, 120, 0.45);
@@ -8,8 +8,9 @@
   --wm-shadow-focused: 0 16px 40px rgba(20, 40, 80, 0.32);
   --wm-titlebar-bg: linear-gradient(180deg, #fdfdfe 0%, #e4eaf3 48%, #d4dced 52%, #e8edf5 100%);
   --wm-text: #1d2733;
-  --wm-text-dim: rgba(29, 39, 51, 0.62);
+  --wm-text-dim: rgba(29, 39, 51, 0.7);
   --wm-accent: #2f6fd0;
+  --wm-accent-ink: #2962b7;
   --wm-blur: 14px;
   --wm-title-size: 13px;
   --wm-title-weight: 600;

package/dist/themes/blueprint.css

@@ -8,8 +8,9 @@
   --wm-shadow-focused: 0 0 0 1px rgba(215, 235, 255, 0.45);
   --wm-titlebar-bg: rgba(190, 220, 255, 0.1);
   --wm-text: #e8f2ff;
-  --wm-text-dim: rgba(232, 242, 255, 0.6);
+  --wm-text-dim: rgba(232, 242, 255, 0.74);
   --wm-accent: #9ecbff;
+  --wm-accent-ink: #9ecbff;
   --wm-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
   --wm-title-font: var(--wm-mono);
   --wm-title-size: 12px;

package/dist/themes/brutalist.css

@@ -11,6 +11,7 @@
   --wm-text: #111111;
   --wm-text-dim: rgba(17, 17, 17, 0.6);
   --wm-accent: #ff3b00;
+  --wm-accent-ink: #cf3000;
   --wm-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
   --wm-title-font: var(--wm-mono);
   --wm-title-size: 12px;

package/dist/themes/candy.css

@@ -8,8 +8,9 @@
   --wm-shadow-focused: 0 18px 44px rgba(236, 130, 175, 0.3);
   --wm-titlebar-bg: linear-gradient(90deg, rgba(255, 214, 233, 0.9), rgba(214, 233, 255, 0.9));
   --wm-text: #5b3a52;
-  --wm-text-dim: rgba(91, 58, 82, 0.6);
+  --wm-text-dim: rgba(91, 58, 82, 0.82);
   --wm-accent: #ec82af;
+  --wm-accent-ink: #c81e66;
   --wm-title-size: 13px;
   --wm-title-weight: 700;
   --wm-titlebar-padding: 11px 16px;

package/dist/themes/carbon.css

@@ -10,6 +10,7 @@
   --wm-text: #f4f4f4;
   --wm-text-dim: #a8a8a8;
   --wm-accent: #4589ff;
+  --wm-accent-ink: #4589ff;
   --wm-title-size: 13px;
   --wm-title-weight: 500;
   --wm-title-tracking: 0;

package/dist/themes/forest.css

@@ -10,6 +10,7 @@
   --wm-text: #e6f0e2;
   --wm-text-dim: rgba(230, 240, 226, 0.58);
   --wm-accent: #9abe8c;
+  --wm-accent-ink: #9abe8c;
   --wm-serif: "Iowan Old Style", Palatino, Georgia, serif;
   --wm-title-font: var(--wm-serif);
   --wm-title-size: 14px;

package/dist/themes/frost.css

@@ -1,15 +1,16 @@
 [data-wm-desktop] {
   --wm-radius: 18px;
-  --wm-bg: rgba(255, 255, 255, 0.48);
-  --wm-bg-focused: rgba(255, 255, 255, 0.66);
+  --wm-bg: rgba(255, 255, 255, 0.82);
+  --wm-bg-focused: rgba(255, 255, 255, 0.96);
   --wm-border: rgba(255, 255, 255, 0.6);
   --wm-border-focused: rgba(255, 255, 255, 0.92);
   --wm-shadow: 0 8px 30px rgba(80, 110, 150, 0.18);
   --wm-shadow-focused: 0 20px 60px rgba(80, 110, 150, 0.3);
   --wm-titlebar-bg: rgba(255, 255, 255, 0.3);
   --wm-text: #20303f;
-  --wm-text-dim: rgba(32, 48, 63, 0.55);
+  --wm-text-dim: rgba(32, 48, 63, 0.75);
   --wm-accent: #0ea5e9;
+  --wm-accent-ink: #086087;
   --wm-blur: 28px;
   --wm-title-size: 13px;
   --wm-title-weight: 600;

package/dist/themes/glass.css

@@ -10,6 +10,7 @@
   --wm-text: rgba(240, 242, 250, 0.92);
   --wm-text-dim: rgba(240, 242, 250, 0.55);
   --wm-accent: #7c6cff;
+  --wm-accent-ink: #7c6cff;
   --wm-blur: 22px;
   --wm-transition: 240ms cubic-bezier(0.32, 0.72, 0, 1);
   position: relative;

package/dist/themes/light.css

@@ -1,15 +1,16 @@
 [data-wm-desktop] {
   --wm-radius: 12px;
-  --wm-bg: rgba(255, 255, 255, 0.78);
-  --wm-bg-focused: rgba(255, 255, 255, 0.94);
+  --wm-bg: rgba(255, 255, 255, 0.9);
+  --wm-bg-focused: rgba(255, 255, 255, 0.96);
   --wm-border: rgba(15, 23, 42, 0.1);
   --wm-border-focused: rgba(15, 23, 42, 0.22);
   --wm-shadow: 0 6px 22px rgba(15, 23, 42, 0.12);
   --wm-shadow-focused: 0 16px 44px rgba(15, 23, 42, 0.2);
   --wm-titlebar-bg: rgba(15, 23, 42, 0.03);
   --wm-text: rgba(15, 23, 42, 0.92);
-  --wm-text-dim: rgba(15, 23, 42, 0.55);
+  --wm-text-dim: rgba(15, 23, 42, 0.64);
   --wm-accent: #4f46e5;
+  --wm-accent-ink: #4f46e5;
   --wm-blur: 18px;
   --wm-transition: 240ms cubic-bezier(0.32, 0.72, 0, 1);
   position: relative;

package/dist/themes/neon.css

@@ -10,6 +10,7 @@
   --wm-text: #f3e9ff;
   --wm-text-dim: rgba(243, 233, 255, 0.55);
   --wm-accent: #ec4899;
+  --wm-accent-ink: #ec4899;
   --wm-accent-alt: #38bdf8;
   --wm-blur: 20px;
   --wm-transition: 260ms cubic-bezier(0.32, 0.72, 0, 1);

package/dist/themes/noir.css

@@ -10,6 +10,7 @@
   --wm-text: #ffffff;
   --wm-text-dim: rgba(255, 255, 255, 0.55);
   --wm-accent: #ffffff;
+  --wm-accent-ink: #ffffff;
   --wm-title-size: 11px;
   --wm-title-weight: 600;
   --wm-title-tracking: 0.24em;

package/dist/themes/paper.css

@@ -8,8 +8,9 @@
   --wm-shadow-focused: 4px 6px 0 rgba(84, 71, 51, 0.16);
   --wm-titlebar-bg: rgba(84, 71, 51, 0.05);
   --wm-text: #3f382c;
-  --wm-text-dim: rgba(63, 56, 44, 0.6);
+  --wm-text-dim: rgba(63, 56, 44, 0.73);
   --wm-accent: #a8571b;
+  --wm-accent-ink: #a8571b;
   --wm-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
   --wm-transition: 220ms cubic-bezier(0.32, 0.72, 0, 1);
   position: relative;

package/dist/themes/retro.css

@@ -4,12 +4,14 @@
   --wm-face-dark: #808080;
   --wm-face-darker: #404040;
   --wm-title-active-a: #000080;
-  --wm-title-active-b: #1084d0;
-  --wm-title-inactive: #808080;
+  --wm-title-active-b: #0f6fb0;
+  --wm-title-inactive: #8c8c8c;
   --wm-text: #000000;
   --wm-text-dim: #404040;
   --wm-accent: #000080;
+  --wm-accent-ink: #000080;
   --wm-title-text: #ffffff;
+  --wm-title-text-inactive: #1a1a1a;
   position: relative;
   overflow: hidden;
   background: #008080;
@@ -67,13 +69,17 @@
   flex: 1;
   font-size: 12px;
   font-weight: 700;
-  color: var(--wm-title-text);
+  color: var(--wm-title-text-inactive);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   letter-spacing: 0;
 }
 
+[data-wm-window][data-wm-focused] [data-wm-title] {
+  color: var(--wm-title-text);
+}
+
 [data-wm-window] [data-wm-controls] {
   display: flex;
   gap: 8px;

package/dist/themes/synth.css

@@ -10,6 +10,7 @@
   --wm-text: #ffeaf7;
   --wm-text-dim: rgba(255, 234, 247, 0.62);
   --wm-accent: #ff7ac6;
+  --wm-accent-ink: #ff7ac6;
   --wm-blur: 16px;
   --wm-title-size: 12px;
   --wm-title-weight: 700;

package/dist/themes/terminal.css

@@ -10,6 +10,7 @@
   --wm-text: #b8f5cd;
   --wm-text-dim: rgba(184, 245, 205, 0.55);
   --wm-accent: #4ade80;
+  --wm-accent-ink: #4ade80;
   --wm-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
   --wm-transition: 120ms linear;
   position: relative;