@surdeddd/wmkit 0.8.0 → 0.9.0

package/README.md

@@ -68,7 +68,7 @@ The desktop element becomes the coordinate space. Your markup stays yours — wm
 | Attribute | Meaning |
 | --- | --- |
 | `data-wm-drag` | drag handle (usually the titlebar); double-click toggles maximize |
-| `data-wm-title` | window title node, linked via `aria-labelledby` |
+| `data-wm-title` | window title node; its text follows the state, and it is linked via `aria-labelledby` when it shares a root with the window |
 | `data-wm-close` / `data-wm-minimize` / `data-wm-maximize` | control buttons, wired by delegation |
 | `data-wm-content` | scrollable content area (styled by themes) |
 
@@ -339,6 +339,28 @@ attachDesktop(wm, root, { gestures: [touchGestures({ swipe: { workspaces: 4 } })
 
 A gesture is just a function that takes a `GestureContext` and returns its teardown, so your own gestures cooperate with the built-in drag and resize through the same `claim`/`busy` pair — see [docs/api.md](docs/api.md).
 
+### `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.
+
+```js
+import { attachDesktop } from '@surdeddd/wmkit'
+import { skin } from '@surdeddd/wmkit/chrome'
+
+const mine = skin({
+  name: 'mine',
+  template:
+    '<section><header data-wm-drag><span data-wm-title>{{title}}</span>' +
+    '<button data-wm-close aria-label="Close {{title}}"></button></header>' +
+    '<div data-wm-content></div></section>',
+})
+
+const desktop = attachDesktop(wm, root, { skins: { mine } })
+desktop.mountWindow('notes', 'mine').content.append(myApp)
+```
+
+`data-wm-close`, `data-wm-minimize`, `data-wm-maximize`, `data-wm-restore`, `data-wm-center`, `data-wm-send-back`, `data-wm-snap="left"` and `data-wm-to-workspace="2"` are read straight off your markup. Every `{{placeholder}}` is HTML-escaped. `shadow: true` seals the chrome inside an open shadow root without losing grouping, focus trapping or the accessible name — see [docs/recipes.md](docs/recipes.md).
+
 ### `createDevtools(wm, options?)` — `@surdeddd/wmkit/devtools`
 
 An opt-in panel that shows the live window table, an event log and the manager controls, so you can see what the state machine is doing without a debugger. It follows the manager, never the DOM, so it works with any adapter or none.

package/README.ru.md

@@ -64,7 +64,7 @@ desktop.attachWindow(win.id, el, { removeOnClose: true })
 | Атрибут | Смысл |
 | --- | --- |
 | `data-wm-drag` | ручка перетаскивания (обычно тайтлбар); двойной клик — toggle maximize |
-| `data-wm-title` | узел заголовка, связывается через `aria-labelledby` |
+| `data-wm-title` | узел заголовка: его текст следует за состоянием, а связь через `aria-labelledby` ставится, когда узел лежит в том же корне, что и окно |
 | `data-wm-close` / `data-wm-minimize` / `data-wm-maximize` | кнопки управления, работают через делегирование |
 | `data-wm-content` | скроллируемая область контента |
 
@@ -275,6 +275,28 @@ attachDesktop(wm, root, { gestures: [touchGestures({ swipe: { workspaces: 4 } })
 
 Жест — это просто функция: принимает `GestureContext`, возвращает свою отписку. Свои жесты уживаются со встроенными драгом и ресайзом через ту же пару `claim`/`busy` — подробности в [docs/api.md](docs/api.md).
 
+### `skin(spec)`, `defaultSkin`, `barebones` — `@surdeddd/wmkit/chrome`
+
+Собирает само окно из строки разметки: можно принести свою обвязку и свои кнопки, не написав ни одного обработчика. 802 Б в brotli.
+
+```js
+import { attachDesktop } from '@surdeddd/wmkit'
+import { skin } from '@surdeddd/wmkit/chrome'
+
+const mine = skin({
+  name: 'mine',
+  template:
+    '<section><header data-wm-drag><span data-wm-title>{{title}}</span>' +
+    '<button data-wm-close aria-label="Закрыть {{title}}"></button></header>' +
+    '<div data-wm-content></div></section>',
+})
+
+const desktop = attachDesktop(wm, root, { skins: { mine } })
+desktop.mountWindow('notes', 'mine').content.append(myApp)
+```
+
+`data-wm-close`, `data-wm-minimize`, `data-wm-maximize`, `data-wm-restore`, `data-wm-center`, `data-wm-send-back`, `data-wm-snap="left"` и `data-wm-to-workspace="2"` читаются прямо из вашей разметки. Каждая подстановка `{{...}}` экранируется. `shadow: true` запечатывает обвязку в открытом теневом корне, не теряя ни группировку, ни ловушку фокуса, ни доступное имя — подробности в [docs/recipes.md](docs/recipes.md).
+
 ### `createDevtools(wm, options?)` — `@surdeddd/wmkit/devtools`
 
 Панель, которую подключают по желанию: живая таблица окон, журнал событий и управление менеджером — чтобы видеть, что делает машина состояний, без отладчика. Она следит за менеджером, а не за DOM, поэтому работает с любым адаптером и без него.

package/dist/angular.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkDINVOL6Z_cjs = require('./chunk-DINVOL6Z.cjs');
+var chunkZWUVWRUS_cjs = require('./chunk-ZWUVWRUS.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 = chunkDINVOL6Z_cjs.createWindowManager(options);
+  const wm = chunkZWUVWRUS_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 = chunkDINVOL6Z_cjs.createDesktopBinder(wm, options);
+  const binder = chunkZWUVWRUS_cjs.createDesktopBinder(wm, options);
   onDestroy(() => binder.destroy());
   return {
     binder,

package/dist/angular.d.cts

@@ -1,7 +1,7 @@
 import { Signal } from '@angular/core';
 import { W as WindowManager, M as ManagerOptions, a as ManagerState, b as WindowState } from './types-jG2lHGcA.cjs';
-import { D as DesktopBinder } from './binder-B625OrjD.cjs';
-import { W as WindowAttachOptions, D as DesktopOptions } from './shared-DU_87nY9.cjs';
+import { D as DesktopBinder } from './binder-DGoj0xG1.cjs';
+import { W as WindowAttachOptions, D as DesktopOptions } from './shared-DdGFz3oy.cjs';
 
 declare function useWindowManager(options?: ManagerOptions): WindowManager;
 declare function useWmState(wm: WindowManager): Signal<ManagerState>;

package/dist/angular.d.ts

@@ -1,7 +1,7 @@
 import { Signal } from '@angular/core';
 import { W as WindowManager, M as ManagerOptions, a as ManagerState, b as WindowState } from './types-jG2lHGcA.js';
-import { D as DesktopBinder } from './binder-CpGY8Wye.js';
-import { W as WindowAttachOptions, D as DesktopOptions } from './shared-BBXgEeIa.js';
+import { D as DesktopBinder } from './binder-Lo13iTVB.js';
+import { W as WindowAttachOptions, D as DesktopOptions } from './shared-BoHXlPCu.js';
 
 declare function useWindowManager(options?: ManagerOptions): WindowManager;
 declare function useWmState(wm: WindowManager): Signal<ManagerState>;

package/dist/angular.js

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

package/dist/{binder-B625OrjD.d.cts → binder-DGoj0xG1.d.cts}

@@ -1,5 +1,5 @@
 import { W as WindowManager } from './types-jG2lHGcA.cjs';
-import { a as DesktopController, W as WindowAttachOptions, D as DesktopOptions } from './shared-DU_87nY9.cjs';
+import { a as DesktopController, W as WindowAttachOptions, D as DesktopOptions } from './shared-DdGFz3oy.cjs';
 
 interface DesktopBinder {
     wm: WindowManager;

package/dist/{binder-CpGY8Wye.d.ts → binder-Lo13iTVB.d.ts}

@@ -1,5 +1,5 @@
 import { W as WindowManager } from './types-jG2lHGcA.js';
-import { a as DesktopController, W as WindowAttachOptions, D as DesktopOptions } from './shared-BBXgEeIa.js';
+import { a as DesktopController, W as WindowAttachOptions, D as DesktopOptions } from './shared-BoHXlPCu.js';
 
 interface DesktopBinder {
     wm: WindowManager;

package/dist/chrome.cjs

@@ -0,0 +1,122 @@
+'use strict';
+
+// src/plugins/chrome/messages.ts
+var chromeMessages = {
+  minimize: "Minimize",
+  maximize: "Maximize",
+  close: "Close"
+};
+var chromeMessagesRu = {
+  minimize: "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C",
+  maximize: "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C",
+  close: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C"
+};
+
+// src/plugins/chrome/template.ts
+var ESCAPES = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function escapeHtml(value) {
+  return value.replace(/[&<>"']/g, (char) => ESCAPES[char]);
+}
+function compileTemplate(template) {
+  const parts = template.split(/\{\{\s*([a-z]+)\s*\}\}/i);
+  return (values) => parts.map((part, index) => index % 2 === 0 ? part : escapeHtml(values[part] ?? "")).join("");
+}
+
+// src/plugins/chrome/index.ts
+var SLOT = "[data-wm-content]";
+var SLOT_PATTERN = /data-wm-content\b/g;
+var BAD_SLOT_COUNT = "wmkit: a skin template needs exactly one [data-wm-content]";
+var BAD_STRUCTURE = "wmkit: a skin template needs a single root element that holds its [data-wm-content]";
+var UNSCOPED_STYLES = "wmkit: a skin with styles needs a name to scope them to";
+function valuesOf(win) {
+  const variant = win.meta.variant;
+  return {
+    id: win.id,
+    title: win.title,
+    stage: win.stage,
+    layer: win.layer,
+    workspace: String(win.workspace),
+    variant: typeof variant === "string" ? variant : ""
+  };
+}
+function injectStyles(doc, name, styles) {
+  if (doc.head.querySelector(`style[data-wm-skin-styles="${name}"]`)) return;
+  const tag = doc.createElement("style");
+  tag.dataset.wmSkinStyles = name;
+  tag.textContent = styles;
+  doc.head.append(tag);
+}
+function skin(spec) {
+  if ((spec.template.match(SLOT_PATTERN) ?? []).length !== 1) throw new Error(BAD_SLOT_COUNT);
+  if (spec.styles !== void 0 && spec.name === void 0) throw new Error(UNSCOPED_STYLES);
+  const render = compileTemplate(spec.template);
+  const sheets = /* @__PURE__ */ new WeakMap();
+  function adopt(root, doc, css) {
+    if (typeof CSSStyleSheet.prototype.replaceSync !== "function") {
+      const tag = doc.createElement("style");
+      tag.textContent = css;
+      root.prepend(tag);
+      return;
+    }
+    let sheet = sheets.get(doc);
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      sheet.replaceSync(css);
+      sheets.set(doc, sheet);
+    }
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+  }
+  return ({ doc, window: win }) => {
+    const holder = doc.createElement("template");
+    holder.innerHTML = render(valuesOf(win));
+    const built = holder.content.firstElementChild;
+    const slot = built === null ? null : built.matches(SLOT) ? built : built.querySelector(SLOT);
+    if (built === null || slot === null) throw new Error(BAD_STRUCTURE);
+    if (spec.shadow !== true) {
+      if (spec.name !== void 0) built.dataset.wmSkin = spec.name;
+      if (spec.styles !== void 0) injectStyles(doc, spec.name, spec.styles);
+      return { element: built, content: slot };
+    }
+    const element = doc.createElement("div");
+    if (spec.name !== void 0) element.dataset.wmSkin = spec.name;
+    const root = element.attachShadow({ mode: "open" });
+    const projection = doc.createElement("slot");
+    if (slot === built) root.append(projection);
+    else {
+      slot.replaceWith(projection);
+      root.append(...built.childNodes);
+    }
+    if (spec.styles !== void 0) adopt(root, doc, spec.styles);
+    const content = doc.createElement("div");
+    content.dataset.wmContent = "";
+    element.append(content);
+    return { element, content };
+  };
+}
+function windowChrome(messages = chromeMessages) {
+  return skin({
+    name: "wmkit",
+    template: `<section><header data-wm-drag><span data-wm-title>{{title}}</span><span data-wm-controls><button type="button" data-wm-minimize aria-label="${messages.minimize}"></button><button type="button" data-wm-maximize aria-label="${messages.maximize}"></button><button type="button" data-wm-close aria-label="${messages.close}"></button></span></header><div data-wm-content></div></section>`
+  });
+}
+var defaultSkin = windowChrome();
+var barebones = skin({
+  name: "barebones",
+  template: "<section><header data-wm-drag><span data-wm-title>{{title}}</span></header><div data-wm-content></div></section>"
+});
+
+exports.barebones = barebones;
+exports.chromeMessages = chromeMessages;
+exports.chromeMessagesRu = chromeMessagesRu;
+exports.compileTemplate = compileTemplate;
+exports.defaultSkin = defaultSkin;
+exports.skin = skin;
+exports.windowChrome = windowChrome;
+//# sourceMappingURL=chrome.cjs.map
+//# sourceMappingURL=chrome.cjs.map

package/dist/chrome.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugins/chrome/messages.ts","../src/plugins/chrome/template.ts","../src/plugins/chrome/index.ts"],"names":[],"mappings":"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","file":"chrome.cjs","sourcesContent":["export interface ChromeMessages {\n  minimize: string\n  maximize: string\n  close: string\n}\n\nexport const chromeMessages: ChromeMessages = {\n  minimize: 'Minimize',\n  maximize: 'Maximize',\n  close: 'Close',\n}\n\nexport const chromeMessagesRu: ChromeMessages = {\n  minimize: 'Свернуть',\n  maximize: 'Развернуть',\n  close: 'Закрыть',\n}\n","const ESCAPES: Record<string, string> = {\n  '&': '&amp;',\n  '<': '&lt;',\n  '>': '&gt;',\n  '\"': '&quot;',\n  \"'\": '&#39;',\n}\n\nfunction escapeHtml(value: string): string {\n  return value.replace(/[&<>\"']/g, (char) => ESCAPES[char] as string)\n}\n\nexport function compileTemplate(template: string): (values: Record<string, string>) => string {\n  const parts = template.split(/\\{\\{\\s*([a-z]+)\\s*\\}\\}/i)\n  return (values) =>\n    parts.map((part, index) => (index % 2 === 0 ? part : escapeHtml(values[part] ?? ''))).join('')\n}\n","import type { WindowState } from '../../core/types'\nimport type { SkinMount, WindowSkin } from '../../dom/shared'\nimport { type ChromeMessages, chromeMessages } from './messages'\nimport { compileTemplate } from './template'\n\nexport type { ChromeMessages } from './messages'\nexport { chromeMessages, chromeMessagesRu } from './messages'\nexport { compileTemplate } from './template'\n\nexport interface SkinSpec {\n  template: string\n  styles?: string\n  shadow?: boolean\n  name?: string\n}\n\nconst SLOT = '[data-wm-content]'\nconst SLOT_PATTERN = /data-wm-content\\b/g\n\nconst BAD_SLOT_COUNT = 'wmkit: a skin template needs exactly one [data-wm-content]'\nconst BAD_STRUCTURE =\n  'wmkit: a skin template needs a single root element that holds its [data-wm-content]'\nconst UNSCOPED_STYLES = 'wmkit: a skin with styles needs a name to scope them to'\n\nfunction valuesOf(win: WindowState): Record<string, string> {\n  const variant = win.meta.variant\n  return {\n    id: win.id,\n    title: win.title,\n    stage: win.stage,\n    layer: win.layer,\n    workspace: String(win.workspace),\n    variant: typeof variant === 'string' ? variant : '',\n  }\n}\n\nfunction injectStyles(doc: Document, name: string, styles: string): void {\n  if (doc.head.querySelector(`style[data-wm-skin-styles=\"${name}\"]`)) return\n  const tag = doc.createElement('style')\n  tag.dataset.wmSkinStyles = name\n  tag.textContent = styles\n  doc.head.append(tag)\n}\n\nexport function skin(spec: SkinSpec): WindowSkin {\n  if ((spec.template.match(SLOT_PATTERN) ?? []).length !== 1) throw new Error(BAD_SLOT_COUNT)\n  if (spec.styles !== undefined && spec.name === undefined) throw new Error(UNSCOPED_STYLES)\n  const render = compileTemplate(spec.template)\n  const sheets = new WeakMap<Document, CSSStyleSheet>()\n\n  function adopt(root: ShadowRoot, doc: Document, css: string): void {\n    if (typeof CSSStyleSheet.prototype.replaceSync !== 'function') {\n      const tag = doc.createElement('style')\n      tag.textContent = css\n      root.prepend(tag)\n      return\n    }\n    let sheet = sheets.get(doc)\n    if (!sheet) {\n      sheet = new CSSStyleSheet()\n      sheet.replaceSync(css)\n      sheets.set(doc, sheet)\n    }\n    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet]\n  }\n\n  return ({ doc, window: win }): SkinMount => {\n    const holder = doc.createElement('template')\n    holder.innerHTML = render(valuesOf(win))\n    const built = holder.content.firstElementChild as HTMLElement | null\n    const slot =\n      built === null ? null : built.matches(SLOT) ? built : built.querySelector<HTMLElement>(SLOT)\n    if (built === null || slot === null) throw new Error(BAD_STRUCTURE)\n\n    if (spec.shadow !== true) {\n      if (spec.name !== undefined) built.dataset.wmSkin = spec.name\n      if (spec.styles !== undefined) injectStyles(doc, spec.name as string, spec.styles)\n      return { element: built, content: slot }\n    }\n\n    const element = doc.createElement('div')\n    if (spec.name !== undefined) element.dataset.wmSkin = spec.name\n    const root = element.attachShadow({ mode: 'open' })\n    const projection = doc.createElement('slot')\n    if (slot === built) root.append(projection)\n    else {\n      slot.replaceWith(projection)\n      root.append(...built.childNodes)\n    }\n    if (spec.styles !== undefined) adopt(root, doc, spec.styles)\n    const content = doc.createElement('div')\n    content.dataset.wmContent = ''\n    element.append(content)\n    return { element, content }\n  }\n}\n\nexport function windowChrome(messages: ChromeMessages = chromeMessages): WindowSkin {\n  return skin({\n    name: 'wmkit',\n    template:\n      '<section>' +\n      '<header data-wm-drag>' +\n      '<span data-wm-title>{{title}}</span>' +\n      '<span data-wm-controls>' +\n      `<button type=\"button\" data-wm-minimize aria-label=\"${messages.minimize}\"></button>` +\n      `<button type=\"button\" data-wm-maximize aria-label=\"${messages.maximize}\"></button>` +\n      `<button type=\"button\" data-wm-close aria-label=\"${messages.close}\"></button>` +\n      '</span>' +\n      '</header>' +\n      '<div data-wm-content></div>' +\n      '</section>',\n  })\n}\n\nexport const defaultSkin: WindowSkin = windowChrome()\n\nexport const barebones: WindowSkin = skin({\n  name: 'barebones',\n  template:\n    '<section>' +\n    '<header data-wm-drag><span data-wm-title>{{title}}</span></header>' +\n    '<div data-wm-content></div>' +\n    '</section>',\n})\n"]}

package/dist/chrome.d.cts

@@ -0,0 +1,25 @@
+import { l as WindowSkin } from './shared-DdGFz3oy.cjs';
+import './types-jG2lHGcA.cjs';
+
+interface ChromeMessages {
+    minimize: string;
+    maximize: string;
+    close: string;
+}
+declare const chromeMessages: ChromeMessages;
+declare const chromeMessagesRu: ChromeMessages;
+
+declare function compileTemplate(template: string): (values: Record<string, string>) => string;
+
+interface SkinSpec {
+    template: string;
+    styles?: string;
+    shadow?: boolean;
+    name?: string;
+}
+declare function skin(spec: SkinSpec): WindowSkin;
+declare function windowChrome(messages?: ChromeMessages): WindowSkin;
+declare const defaultSkin: WindowSkin;
+declare const barebones: WindowSkin;
+
+export { type ChromeMessages, type SkinSpec, barebones, chromeMessages, chromeMessagesRu, compileTemplate, defaultSkin, skin, windowChrome };

package/dist/chrome.d.ts

@@ -0,0 +1,25 @@
+import { l as WindowSkin } from './shared-BoHXlPCu.js';
+import './types-jG2lHGcA.js';
+
+interface ChromeMessages {
+    minimize: string;
+    maximize: string;
+    close: string;
+}
+declare const chromeMessages: ChromeMessages;
+declare const chromeMessagesRu: ChromeMessages;
+
+declare function compileTemplate(template: string): (values: Record<string, string>) => string;
+
+interface SkinSpec {
+    template: string;
+    styles?: string;
+    shadow?: boolean;
+    name?: string;
+}
+declare function skin(spec: SkinSpec): WindowSkin;
+declare function windowChrome(messages?: ChromeMessages): WindowSkin;
+declare const defaultSkin: WindowSkin;
+declare const barebones: WindowSkin;
+
+export { type ChromeMessages, type SkinSpec, barebones, chromeMessages, chromeMessagesRu, compileTemplate, defaultSkin, skin, windowChrome };

package/dist/chrome.js

@@ -0,0 +1,114 @@
+// src/plugins/chrome/messages.ts
+var chromeMessages = {
+  minimize: "Minimize",
+  maximize: "Maximize",
+  close: "Close"
+};
+var chromeMessagesRu = {
+  minimize: "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C",
+  maximize: "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C",
+  close: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C"
+};
+
+// src/plugins/chrome/template.ts
+var ESCAPES = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function escapeHtml(value) {
+  return value.replace(/[&<>"']/g, (char) => ESCAPES[char]);
+}
+function compileTemplate(template) {
+  const parts = template.split(/\{\{\s*([a-z]+)\s*\}\}/i);
+  return (values) => parts.map((part, index) => index % 2 === 0 ? part : escapeHtml(values[part] ?? "")).join("");
+}
+
+// src/plugins/chrome/index.ts
+var SLOT = "[data-wm-content]";
+var SLOT_PATTERN = /data-wm-content\b/g;
+var BAD_SLOT_COUNT = "wmkit: a skin template needs exactly one [data-wm-content]";
+var BAD_STRUCTURE = "wmkit: a skin template needs a single root element that holds its [data-wm-content]";
+var UNSCOPED_STYLES = "wmkit: a skin with styles needs a name to scope them to";
+function valuesOf(win) {
+  const variant = win.meta.variant;
+  return {
+    id: win.id,
+    title: win.title,
+    stage: win.stage,
+    layer: win.layer,
+    workspace: String(win.workspace),
+    variant: typeof variant === "string" ? variant : ""
+  };
+}
+function injectStyles(doc, name, styles) {
+  if (doc.head.querySelector(`style[data-wm-skin-styles="${name}"]`)) return;
+  const tag = doc.createElement("style");
+  tag.dataset.wmSkinStyles = name;
+  tag.textContent = styles;
+  doc.head.append(tag);
+}
+function skin(spec) {
+  if ((spec.template.match(SLOT_PATTERN) ?? []).length !== 1) throw new Error(BAD_SLOT_COUNT);
+  if (spec.styles !== void 0 && spec.name === void 0) throw new Error(UNSCOPED_STYLES);
+  const render = compileTemplate(spec.template);
+  const sheets = /* @__PURE__ */ new WeakMap();
+  function adopt(root, doc, css) {
+    if (typeof CSSStyleSheet.prototype.replaceSync !== "function") {
+      const tag = doc.createElement("style");
+      tag.textContent = css;
+      root.prepend(tag);
+      return;
+    }
+    let sheet = sheets.get(doc);
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      sheet.replaceSync(css);
+      sheets.set(doc, sheet);
+    }
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+  }
+  return ({ doc, window: win }) => {
+    const holder = doc.createElement("template");
+    holder.innerHTML = render(valuesOf(win));
+    const built = holder.content.firstElementChild;
+    const slot = built === null ? null : built.matches(SLOT) ? built : built.querySelector(SLOT);
+    if (built === null || slot === null) throw new Error(BAD_STRUCTURE);
+    if (spec.shadow !== true) {
+      if (spec.name !== void 0) built.dataset.wmSkin = spec.name;
+      if (spec.styles !== void 0) injectStyles(doc, spec.name, spec.styles);
+      return { element: built, content: slot };
+    }
+    const element = doc.createElement("div");
+    if (spec.name !== void 0) element.dataset.wmSkin = spec.name;
+    const root = element.attachShadow({ mode: "open" });
+    const projection = doc.createElement("slot");
+    if (slot === built) root.append(projection);
+    else {
+      slot.replaceWith(projection);
+      root.append(...built.childNodes);
+    }
+    if (spec.styles !== void 0) adopt(root, doc, spec.styles);
+    const content = doc.createElement("div");
+    content.dataset.wmContent = "";
+    element.append(content);
+    return { element, content };
+  };
+}
+function windowChrome(messages = chromeMessages) {
+  return skin({
+    name: "wmkit",
+    template: `<section><header data-wm-drag><span data-wm-title>{{title}}</span><span data-wm-controls><button type="button" data-wm-minimize aria-label="${messages.minimize}"></button><button type="button" data-wm-maximize aria-label="${messages.maximize}"></button><button type="button" data-wm-close aria-label="${messages.close}"></button></span></header><div data-wm-content></div></section>`
+  });
+}
+var defaultSkin = windowChrome();
+var barebones = skin({
+  name: "barebones",
+  template: "<section><header data-wm-drag><span data-wm-title>{{title}}</span></header><div data-wm-content></div></section>"
+});
+
+export { barebones, chromeMessages, chromeMessagesRu, compileTemplate, defaultSkin, skin, windowChrome };
+//# sourceMappingURL=chrome.js.map
+//# sourceMappingURL=chrome.js.map

package/dist/chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugins/chrome/messages.ts","../src/plugins/chrome/template.ts","../src/plugins/chrome/index.ts"],"names":[],"mappings":"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","file":"chrome.js","sourcesContent":["export interface ChromeMessages {\n  minimize: string\n  maximize: string\n  close: string\n}\n\nexport const chromeMessages: ChromeMessages = {\n  minimize: 'Minimize',\n  maximize: 'Maximize',\n  close: 'Close',\n}\n\nexport const chromeMessagesRu: ChromeMessages = {\n  minimize: 'Свернуть',\n  maximize: 'Развернуть',\n  close: 'Закрыть',\n}\n","const ESCAPES: Record<string, string> = {\n  '&': '&amp;',\n  '<': '&lt;',\n  '>': '&gt;',\n  '\"': '&quot;',\n  \"'\": '&#39;',\n}\n\nfunction escapeHtml(value: string): string {\n  return value.replace(/[&<>\"']/g, (char) => ESCAPES[char] as string)\n}\n\nexport function compileTemplate(template: string): (values: Record<string, string>) => string {\n  const parts = template.split(/\\{\\{\\s*([a-z]+)\\s*\\}\\}/i)\n  return (values) =>\n    parts.map((part, index) => (index % 2 === 0 ? part : escapeHtml(values[part] ?? ''))).join('')\n}\n","import type { WindowState } from '../../core/types'\nimport type { SkinMount, WindowSkin } from '../../dom/shared'\nimport { type ChromeMessages, chromeMessages } from './messages'\nimport { compileTemplate } from './template'\n\nexport type { ChromeMessages } from './messages'\nexport { chromeMessages, chromeMessagesRu } from './messages'\nexport { compileTemplate } from './template'\n\nexport interface SkinSpec {\n  template: string\n  styles?: string\n  shadow?: boolean\n  name?: string\n}\n\nconst SLOT = '[data-wm-content]'\nconst SLOT_PATTERN = /data-wm-content\\b/g\n\nconst BAD_SLOT_COUNT = 'wmkit: a skin template needs exactly one [data-wm-content]'\nconst BAD_STRUCTURE =\n  'wmkit: a skin template needs a single root element that holds its [data-wm-content]'\nconst UNSCOPED_STYLES = 'wmkit: a skin with styles needs a name to scope them to'\n\nfunction valuesOf(win: WindowState): Record<string, string> {\n  const variant = win.meta.variant\n  return {\n    id: win.id,\n    title: win.title,\n    stage: win.stage,\n    layer: win.layer,\n    workspace: String(win.workspace),\n    variant: typeof variant === 'string' ? variant : '',\n  }\n}\n\nfunction injectStyles(doc: Document, name: string, styles: string): void {\n  if (doc.head.querySelector(`style[data-wm-skin-styles=\"${name}\"]`)) return\n  const tag = doc.createElement('style')\n  tag.dataset.wmSkinStyles = name\n  tag.textContent = styles\n  doc.head.append(tag)\n}\n\nexport function skin(spec: SkinSpec): WindowSkin {\n  if ((spec.template.match(SLOT_PATTERN) ?? []).length !== 1) throw new Error(BAD_SLOT_COUNT)\n  if (spec.styles !== undefined && spec.name === undefined) throw new Error(UNSCOPED_STYLES)\n  const render = compileTemplate(spec.template)\n  const sheets = new WeakMap<Document, CSSStyleSheet>()\n\n  function adopt(root: ShadowRoot, doc: Document, css: string): void {\n    if (typeof CSSStyleSheet.prototype.replaceSync !== 'function') {\n      const tag = doc.createElement('style')\n      tag.textContent = css\n      root.prepend(tag)\n      return\n    }\n    let sheet = sheets.get(doc)\n    if (!sheet) {\n      sheet = new CSSStyleSheet()\n      sheet.replaceSync(css)\n      sheets.set(doc, sheet)\n    }\n    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet]\n  }\n\n  return ({ doc, window: win }): SkinMount => {\n    const holder = doc.createElement('template')\n    holder.innerHTML = render(valuesOf(win))\n    const built = holder.content.firstElementChild as HTMLElement | null\n    const slot =\n      built === null ? null : built.matches(SLOT) ? built : built.querySelector<HTMLElement>(SLOT)\n    if (built === null || slot === null) throw new Error(BAD_STRUCTURE)\n\n    if (spec.shadow !== true) {\n      if (spec.name !== undefined) built.dataset.wmSkin = spec.name\n      if (spec.styles !== undefined) injectStyles(doc, spec.name as string, spec.styles)\n      return { element: built, content: slot }\n    }\n\n    const element = doc.createElement('div')\n    if (spec.name !== undefined) element.dataset.wmSkin = spec.name\n    const root = element.attachShadow({ mode: 'open' })\n    const projection = doc.createElement('slot')\n    if (slot === built) root.append(projection)\n    else {\n      slot.replaceWith(projection)\n      root.append(...built.childNodes)\n    }\n    if (spec.styles !== undefined) adopt(root, doc, spec.styles)\n    const content = doc.createElement('div')\n    content.dataset.wmContent = ''\n    element.append(content)\n    return { element, content }\n  }\n}\n\nexport function windowChrome(messages: ChromeMessages = chromeMessages): WindowSkin {\n  return skin({\n    name: 'wmkit',\n    template:\n      '<section>' +\n      '<header data-wm-drag>' +\n      '<span data-wm-title>{{title}}</span>' +\n      '<span data-wm-controls>' +\n      `<button type=\"button\" data-wm-minimize aria-label=\"${messages.minimize}\"></button>` +\n      `<button type=\"button\" data-wm-maximize aria-label=\"${messages.maximize}\"></button>` +\n      `<button type=\"button\" data-wm-close aria-label=\"${messages.close}\"></button>` +\n      '</span>' +\n      '</header>' +\n      '<div data-wm-content></div>' +\n      '</section>',\n  })\n}\n\nexport const defaultSkin: WindowSkin = windowChrome()\n\nexport const barebones: WindowSkin = skin({\n  name: 'barebones',\n  template:\n    '<section>' +\n    '<header data-wm-drag><span data-wm-title>{{title}}</span></header>' +\n    '<div data-wm-content></div>' +\n    '</section>',\n})\n"]}