quilt-vanilla 0.1.0

package/src/menu.ts

@@ -0,0 +1,432 @@
+import { actionIcon } from './action-icons.js';
+import type { ActionIcon } from './action-icons.js';
+import { fillTabPicker } from './picker.js';
+import { findNode, findParent, groups, paneIds } from 'quilt-core';
+import type { Group, Pane } from 'quilt-core';
+import type { LayoutOptions } from './types.js';
+import type { Windows } from './windows.js';
+import { el, Scope } from './lifetime.js';
+export function createPaneMenu(
+  root: HTMLElement,
+  options: LayoutOptions,
+  windows: Pick<Windows, 'pending' | 'open'>,
+  refresh: () => void,
+  report: (e: unknown) => void,
+) {
+  const doc = root.ownerDocument,
+    win = doc.defaultView!;
+  let current: Scope | undefined;
+  const persistentPickers = new Map<string, Scope>();
+  const act = (fn: () => void) => {
+    try {
+      fn();
+    } catch (error) {
+      report(error);
+    }
+  };
+  function button(text: string, title: string, action: () => void) {
+    const b = el(doc, 'button', 'layouts-button', text);
+    b.type = 'button';
+    b.title = title;
+    b.setAttribute('aria-label', title);
+    b.onclick = () => act(action);
+    return b;
+  }
+  function open(
+    anchor: HTMLElement,
+    pane: Pane | undefined,
+    group: Group,
+    direction?: 'left' | 'right' | 'top' | 'bottom',
+    ratio = 0.5,
+    groupActions = false,
+    addTab = false,
+  ) {
+    current?.dispose();
+    const latestGroup = findNode(options.store.getSnapshot().root, group.id);
+    if (latestGroup?.kind !== 'group') return;
+    group = latestGroup;
+    const local = new Scope();
+    current = local;
+    const dialog = el(doc, 'dialog', 'layouts-menu');
+    dialog.tabIndex = -1;
+    dialog.autofocus = true;
+    dialog.setAttribute(
+      'aria-label',
+      pane && !groupActions ? `${pane.title} actions` : 'Empty pane actions',
+    );
+    local.add(() => dialog.remove());
+    const add = (icon: ActionIcon, label: string, enabled: boolean, fn: () => void) => {
+      const b = button(label, label, () => {
+        local.dispose();
+        act(fn);
+      });
+      const glyph = el(doc, 'span', 'layouts-tab-icon');
+      glyph.setAttribute('aria-hidden', 'true');
+      act(() => glyph.append(actionIcon(doc, icon, options)));
+      b.replaceChildren(glyph, el(doc, 'span', '', label.replace(/^\+ /, '')));
+      b.disabled = !enabled;
+      dialog.append(b);
+      return b;
+    };
+    const allowed = (cap: 'split' | 'join' | 'move') =>
+      group.panes.every((id) => options.store.can(id, cap));
+    const available = Boolean(options.tabs?.list().length);
+    const create = (axis?: 'horizontal' | 'vertical', before = false) => {
+      if (!axis && !pane && !options.tabs) return;
+      let destination = group;
+      if (axis && (options.tabs || !pane)) {
+        const id = options.store.split(group.id, axis, null, { source: 'user', before, ratio });
+        destination = findNode(options.store.getSnapshot().root, id) as Group;
+        refresh();
+        if (!options.tabs) return;
+      }
+      const commit = (fresh: Pane) => options.store.add(fresh, destination.id, { source: 'user' });
+      if (options.tabs) {
+        if ((axis || !group.panes.length) && options.store.getAutoCollapse() === 'disabled') {
+          if (persistentPickers.has(destination.id)) {
+            const region = Array.from(root.querySelectorAll<HTMLElement>('[data-node-id]')).find(
+              (element) => element.dataset.nodeId === destination.id,
+            );
+            region?.querySelector<HTMLInputElement>('.layouts-picker-search')?.focus();
+            return;
+          }
+          const region = Array.from(root.querySelectorAll<HTMLElement>('[data-node-id]')).find(
+            (element) => element.dataset.nodeId === destination.id,
+          );
+          if (!region) return;
+          const pickerScope = new Scope();
+          persistentPickers.set(destination.id, pickerScope);
+          const picker = el(doc, 'div', 'layouts-menu layouts-picker layouts-picker-persistent');
+          picker.setAttribute('role', 'dialog');
+          region.append(picker);
+          pickerScope.listen(
+            doc,
+            'pointerdown',
+            (event) => {
+              if (!event.composedPath().includes(region)) pickerScope.dispose();
+            },
+            { capture: true },
+          );
+          pickerScope.add(() => {
+            picker.remove();
+            persistentPickers.delete(destination.id);
+          });
+          pickerScope.add(
+            options.store.subscribe(() => {
+              const group = findNode(options.store.getSnapshot().root, destination.id);
+              if (group?.kind !== 'group' || group.panes.length) pickerScope.dispose();
+            }),
+          );
+          fillTabPicker(picker, pickerScope, options, pane, destination, commit, report, true);
+          return;
+        }
+        const pickerScope = new Scope();
+        current = pickerScope;
+        const picker = el(doc, 'dialog', 'layouts-menu layouts-picker');
+        if (axis)
+          pickerScope.add(() => {
+            if (options.store.getAutoCollapse() !== 'disabled')
+              options.store.removeEmptyGroup(destination.id);
+          });
+        pickerScope.add(() => picker.remove());
+        pickerScope.listen(picker, 'close', () => pickerScope.dispose());
+        root.append(picker);
+        pickerScope.listen(picker, 'click', (event) => {
+          const e = event as MouseEvent;
+          const bounds = picker.getBoundingClientRect();
+          if (
+            e.target === picker &&
+            (e.clientX < bounds.left ||
+              e.clientX > bounds.right ||
+              e.clientY < bounds.top ||
+              e.clientY > bounds.bottom)
+          )
+            pickerScope.dispose();
+        });
+        picker.showModal();
+        fillTabPicker(picker, pickerScope, options, pane, destination, commit, report);
+        const region = Array.from(root.querySelectorAll<HTMLElement>('[data-node-id]')).find(
+          (element) => element.dataset.nodeId === destination.id,
+        );
+        if (region) {
+          const position = () => {
+            const bounds = region.getBoundingClientRect();
+            picker.style.width = `${Math.max(0, Math.min(340, bounds.width - 16))}px`;
+            picker.style.maxHeight = `${Math.max(0, bounds.height - 16)}px`;
+            picker.style.left = `${bounds.left + (bounds.width - picker.offsetWidth) / 2}px`;
+            picker.style.top = `${bounds.top + (bounds.height - picker.offsetHeight) / 2}px`;
+          };
+          position();
+          const observer = new ResizeObserver(position);
+          observer.observe(region);
+          observer.observe(picker);
+          pickerScope.add(() => observer.disconnect());
+          pickerScope.listen(win, 'resize', position);
+          pickerScope.add(
+            options.store.subscribe(() => {
+              if (!findNode(options.store.getSnapshot().root, destination.id))
+                pickerScope.dispose();
+            }),
+          );
+        }
+      }
+    };
+    if (addTab || (!direction && !group.panes.length && !groupActions)) {
+      local.dispose();
+      create();
+      return;
+    }
+    if (direction) {
+      local.dispose();
+      create(
+        direction === 'left' || direction === 'right' ? 'horizontal' : 'vertical',
+        direction === 'left' || direction === 'top',
+      );
+      return;
+    }
+    add('add-tab', '+ Add tab', available && allowed('move'), () => create());
+    const canCreate = !group.panes.length || available;
+    function submenu(label: string, icon: ActionIcon, enabled = true) {
+      const container = el(doc, 'div', 'layouts-submenu');
+      const trigger = button(`${label} ▸`, label, () => setOpen(true));
+      const glyph = el(doc, 'span', 'layouts-tab-icon');
+      glyph.setAttribute('aria-hidden', 'true');
+      glyph.append(actionIcon(doc, icon, options));
+      trigger.prepend(glyph);
+      trigger.disabled = !enabled;
+      trigger.setAttribute('aria-haspopup', 'menu');
+      trigger.setAttribute('aria-expanded', 'false');
+      const flyout = el(doc, 'div', 'layouts-submenu-content');
+      flyout.hidden = true;
+      flyout.setAttribute('role', 'menu');
+      flyout.setAttribute('aria-label', label);
+      const setOpen = (open: boolean) => {
+        flyout.hidden = !open;
+        trigger.setAttribute('aria-expanded', String(open));
+      };
+      local.listen(container, 'pointerenter', () => {
+        if (!trigger.disabled) setOpen(true);
+      });
+      local.listen(container, 'pointerleave', () => setOpen(false));
+      local.listen(trigger, 'keydown', (event) => {
+        if ((event as KeyboardEvent).key === 'ArrowRight') {
+          event.preventDefault();
+          setOpen(true);
+          (flyout.firstElementChild as HTMLElement)?.focus();
+        }
+      });
+      local.listen(flyout, 'keydown', (event) => {
+        if ((event as KeyboardEvent).key === 'ArrowLeft') {
+          event.preventDefault();
+          setOpen(false);
+          trigger.focus();
+        }
+      });
+      container.dataset.side =
+        anchor.getBoundingClientRect().right + 220 > win.innerWidth ? 'left' : 'right';
+      container.append(trigger, flyout);
+      dialog.append(container);
+      return flyout;
+    }
+    const flyout = submenu('Split', 'split-right', canCreate && allowed('split'));
+    for (const [label, axis, before] of [
+      ['Split left', 'horizontal', true],
+      ['Split right', 'horizontal', false],
+      ['Split up', 'vertical', true],
+      ['Split down', 'vertical', false],
+    ] as const) {
+      const option = button(label, label, () => {
+        local.dispose();
+        create(axis, before);
+      });
+      const icon = el(doc, 'span', 'layouts-tab-icon');
+      icon.setAttribute('aria-hidden', 'true');
+      icon.append(actionIcon(doc, axis === 'horizontal' ? 'split-right' : 'split-below', options));
+      option.prepend(icon);
+      option.setAttribute('role', 'menuitem');
+      flyout.append(option);
+    }
+    const joinParent = findParent(options.store.getSnapshot().root, group.id);
+    const join = add(
+      'join',
+      'Join sibling region',
+      Boolean(joinParent) && paneIds(joinParent!).every((id) => options.store.can(id, 'join')),
+      () => options.store.join(group.id, { source: 'user' }),
+    );
+    let preview: Scope | undefined;
+    const clearPreview = () => {
+      preview?.dispose();
+      preview = undefined;
+    };
+    local.add(clearPreview);
+    const showPreview = () => {
+      clearPreview();
+      const layout = options.store.getSnapshot();
+      const parent = findParent(layout.root, group.id);
+      if (join.disabled || !parent) return;
+      const scope = new Scope();
+      preview = scope;
+      const overlay = el(doc, 'div', 'layouts-corner-overlay');
+      overlay.setAttribute('aria-hidden', 'true');
+      root.append(overlay);
+      scope.add(() => overlay.remove());
+      const targetTitle = layout.panes[group.active ?? '']?.title ?? 'This region';
+      const regions = groups(parent).map((region) => ({
+        region,
+        element: Array.from(root.querySelectorAll<HTMLElement>('[data-node-id]')).find(
+          (element) => element.dataset.nodeId === region.id && element.closest('.layouts') === root,
+        ),
+      }));
+      const position = () => {
+        overlay.replaceChildren();
+        for (const { region, element } of regions) {
+          if (!element || !element.getClientRects().length) continue;
+          const rect = element.getBoundingClientRect();
+          const box = el(doc, 'div', 'layouts-corner-preview');
+          box.dataset.cornerPreview = region.id === group.id ? 'join-target' : 'join-source';
+          Object.assign(box.style, {
+            left: `${rect.left}px`,
+            top: `${rect.top}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`,
+          });
+          box.append(
+            el(
+              doc,
+              'span',
+              'layouts-corner-label',
+              region.id === group.id ? `${targetTitle} keeps all tabs` : `Joins ${targetTitle}`,
+            ),
+          );
+          overlay.append(box);
+        }
+      };
+      position();
+      const observer = new win.ResizeObserver(position);
+      for (const { element } of regions) if (element) observer.observe(element);
+      scope.add(() => observer.disconnect());
+      scope.listen(win, 'resize', position);
+      scope.listen(doc, 'scroll', position, { capture: true });
+      scope.add(options.store.subscribe(clearPreview));
+    };
+    local.listen(join, 'pointerenter', showPreview);
+    local.listen(join, 'pointerleave', clearPreview);
+    local.listen(join, 'focus', showPreview);
+    local.listen(join, 'blur', clearPreview);
+    add(
+      options.store.getSnapshot().maximized === group.id ? 'restore' : 'maximize',
+      options.store.getSnapshot().maximized === group.id ? 'Restore region' : 'Maximize region',
+      true,
+      () =>
+        options.store.maximize(
+          options.store.getSnapshot().maximized === group.id ? null : group.id,
+        ),
+    );
+    if (group.panes.length && pane) {
+      add(
+        'popout',
+        windows.pending.has(pane.id) ? 'Reopen window' : 'Open in window',
+        options.store.can(pane.id, 'popout'),
+        () => {
+          windows.open(pane.id, windows.pending.get(pane.id));
+          refresh();
+        },
+      );
+    }
+    const orientation = submenu('Tab orientation', 'tab-orientation');
+    for (const [value, label] of [
+      [undefined, 'Workspace default'],
+      ['top', 'Horizontal'],
+      ['left', 'Vertical'],
+    ] as const) {
+      const selected = group.tabPlacement === value;
+      const option = button(label, label, () => {
+        options.store.setTabPlacement(group.id, value);
+        local.dispose();
+      });
+      option.setAttribute('role', 'menuitemradio');
+      option.setAttribute('aria-checked', String(selected));
+      const mark = el(doc, 'span', 'layouts-tab-icon', selected ? '✓' : '');
+      mark.setAttribute('aria-hidden', 'true');
+      option.prepend(mark);
+      orientation.append(option);
+    }
+    const display = submenu('Tab display', 'tab-orientation');
+    for (const [value, label] of [
+      [undefined, 'Workspace default'],
+      ['automatic', 'Automatic'],
+      ['compact', 'Compact'],
+    ] as const) {
+      const selected = group.tabDisplay === value;
+      const option = button(label, label, () => {
+        options.store.setTabDisplay(group.id, value);
+        local.dispose();
+      });
+      option.setAttribute('role', 'menuitemradio');
+      option.setAttribute('aria-checked', String(selected));
+      const mark = el(doc, 'span', 'layouts-tab-icon', selected ? '✓' : '');
+      mark.setAttribute('aria-hidden', 'true');
+      option.prepend(mark);
+      display.append(option);
+    }
+    if (group.panes.length && pane) {
+      add('close', 'Close active tab', options.store.can(pane.id, 'close'), () =>
+        options.store.close(pane.id, { source: 'user' }),
+      );
+      add(
+        'close',
+        'Close pane',
+        group.panes.every((id) => options.store.can(id, 'close')),
+        () => options.store.closeGroup(group.id, { source: 'user' }),
+      );
+    } else {
+      add('close', 'Close empty pane', options.store.getSnapshot().root.id !== group.id, () =>
+        options.store.removeEmptyGroup(group.id),
+      );
+    }
+    add('restore', 'Restore closed tab', options.store.canRestoreClosedTab(), () =>
+      options.store.restoreClosedTab(),
+    );
+    add('cancel', 'Cancel', true, () => {});
+    root.append(dialog);
+    const rect = anchor.getBoundingClientRect();
+    dialog.style.left = `${Math.max(8, Math.min(rect.right - 230, win!.innerWidth - 250))}px`;
+    dialog.style.top = `${Math.min(rect.bottom + 4, win!.innerHeight - 180)}px`;
+    local.listen(dialog, 'close', () => local.dispose());
+    local.listen(dialog, 'click', (event) => {
+      if (event.target === dialog) {
+        const r = dialog.getBoundingClientRect();
+        const e = event as MouseEvent;
+        if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom)
+          local.dispose();
+      }
+    });
+    dialog.showModal();
+    dialog.focus({ preventScroll: true });
+  }
+  return {
+    open,
+    addTab(anchor: HTMLElement, group: Group) {
+      const layout = options.store.getSnapshot();
+      open(
+        anchor,
+        group.active ? layout.panes[group.active] : undefined,
+        group,
+        undefined,
+        0.5,
+        false,
+        true,
+      );
+    },
+    openEmpty(anchor: HTMLElement, group: Group) {
+      const source = Object.values(options.store.getSnapshot().panes).find(
+        (pane) => pane.header !== false,
+      );
+      open(anchor, source, group, undefined, 0.5, true);
+    },
+    dispose() {
+      current?.dispose();
+      for (const picker of persistentPickers.values()) picker.dispose();
+    },
+  };
+}

package/src/panes.ts

@@ -0,0 +1,76 @@
+import type { Pane } from 'quilt-core';
+import type { LayoutOptions, PaneView, PaneRenderer } from './types.js';
+import { el } from './lifetime.js';
+export interface MountedPane {
+  element: HTMLElement;
+  view: PaneView;
+  pane: Pane;
+  signature: string;
+  renderer: PaneRenderer | undefined;
+  failed?: boolean;
+  dispose(): void;
+}
+export function mountPane(
+  doc: Document,
+  pane: Pane,
+  location: 'main' | 'popout',
+  options: LayoutOptions,
+): MountedPane {
+  const win = doc.defaultView;
+  if (!win) throw new Error('Pane needs a live document');
+  const element = el(doc, 'div', 'layouts-pane');
+  element.dataset.paneId = pane.id;
+  const renderer = Object.hasOwn(options.renderers, pane.type)
+    ? options.renderers[pane.type]
+    : undefined;
+  let view: PaneView;
+  if (renderer)
+    view = renderer({
+      element,
+      document: doc,
+      window: win,
+      pane,
+      state: options.getPaneState?.(pane.id),
+      location,
+    });
+  else {
+    element.append(
+      el(
+        doc,
+        'div',
+        'layouts-placeholder',
+        `Unknown pane type: ${pane.type}. Register a renderer and reload the layout.`,
+      ),
+    );
+    view = { dispose() {} };
+  }
+  const observer = new ResizeObserver((entries) => {
+    const rect = entries[0]?.contentRect;
+    if (rect) {
+      try {
+        view.resize?.(rect.width, rect.height);
+      } catch (error) {
+        options.onError?.(error);
+      }
+    }
+  });
+  observer.observe(element);
+  let disposed = false;
+  return {
+    element,
+    view,
+    pane,
+    signature: JSON.stringify(pane),
+    renderer,
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      observer.disconnect();
+      try {
+        view.dispose();
+      } finally {
+        element.remove();
+      }
+    },
+  };
+}

package/src/picker.ts

@@ -0,0 +1,114 @@
+import type { Group, Pane } from 'quilt-core';
+import type { LayoutOptions } from './types.js';
+import type { TabRegistration } from './registry.js';
+import { el, Scope } from './lifetime.js';
+let sequence = 0;
+/** Search remains focused while aria-activedescendant tracks keyboard selection. */
+export function fillTabPicker(
+  dialog: HTMLElement,
+  scope: Scope,
+  options: LayoutOptions,
+  source: Pane | undefined,
+  group: Group,
+  choose: (pane: Pane) => void,
+  report: (error: unknown) => void,
+  persistent = false,
+) {
+  const doc = dialog.ownerDocument;
+  const input = el(doc, 'input', 'layouts-picker-search');
+  input.type = 'search';
+  input.placeholder = 'Search tabs…';
+  input.setAttribute('role', 'combobox');
+  input.setAttribute('aria-label', 'Search tabs');
+  input.setAttribute('aria-expanded', 'true');
+  input.setAttribute('aria-autocomplete', 'list');
+  const list = el(doc, 'div', 'layouts-picker-list');
+  list.id = `layouts-picker-${++sequence}`;
+  list.setAttribute('role', 'listbox');
+  list.setAttribute('aria-label', 'Available tabs');
+  input.setAttribute('aria-controls', list.id);
+  const status = el(doc, 'div', 'layouts-picker-status');
+  status.setAttribute('role', 'status');
+  let matches: readonly TabRegistration[] = [],
+    selected = 0;
+  function select(entry: TabRegistration) {
+    try {
+      const pane = entry.create({ source, groupId: group.id });
+      if (pane) {
+        choose(pane);
+        scope.dispose();
+      }
+    } catch (error) {
+      status.textContent = error instanceof Error ? error.message : String(error);
+      report(error);
+    }
+  }
+  function paint() {
+    list.replaceChildren();
+    matches.forEach((entry, index) => {
+      const option = el(doc, 'div', 'layouts-picker-option');
+      option.id = `${list.id}-${index}`;
+      option.setAttribute('role', 'option');
+      option.setAttribute('aria-selected', String(index === selected));
+      option.setAttribute('aria-label', entry.title);
+      if (entry.icon) {
+        const icon = el(doc, 'span', 'layouts-tab-icon');
+        icon.setAttribute('aria-hidden', 'true');
+        try {
+          const node = options.renderIcon?.(entry.icon, doc);
+          if (node) icon.append(node);
+        } catch (error) {
+          report(error);
+        }
+        option.append(icon);
+      }
+      const text = el(doc, 'span', '');
+      text.append(el(doc, 'strong', '', entry.title));
+      if (entry.description) text.append(el(doc, 'small', '', entry.description));
+      option.append(text);
+      option.onmousedown = (e) => e.preventDefault();
+      option.onclick = () => select(entry);
+      list.append(option);
+    });
+    if (matches[selected]) {
+      input.setAttribute('aria-activedescendant', `${list.id}-${selected}`);
+      list.children[selected]?.scrollIntoView({ block: 'nearest' });
+    } else input.removeAttribute('aria-activedescendant');
+    status.textContent = matches.length ? `${matches.length} tab types` : 'No matching tabs';
+  }
+  function search() {
+    const terms = input.value.toLocaleLowerCase().trim().split(/\s+/);
+    matches = (options.tabs?.list() ?? []).filter((entry) => {
+      const text = [entry.title, entry.description ?? '', ...(entry.keywords ?? [])]
+        .join(' ')
+        .toLocaleLowerCase();
+      return terms.every((term) => text.includes(term));
+    });
+    selected = 0;
+    paint();
+  }
+  input.oninput = search;
+  input.onkeydown = (e) => {
+    if (persistent && e.key === 'Escape') {
+      e.preventDefault();
+      input.blur();
+    } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (matches.length)
+        selected = (selected + (e.key === 'ArrowDown' ? 1 : matches.length - 1)) % matches.length;
+      paint();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const entry = matches[selected];
+      if (entry) select(entry);
+    }
+  };
+  const cancel = el(doc, 'button', 'layouts-button', 'Cancel');
+  cancel.type = 'button';
+  cancel.onclick = () => scope.dispose();
+  dialog.replaceChildren(input, list, status, ...(persistent ? [] : [cancel]));
+  dialog.setAttribute('aria-label', 'Choose a tab');
+  if (options.tabs) scope.add(options.tabs.subscribe(search));
+  search();
+  input.focus();
+}

package/src/registry.ts

@@ -0,0 +1,46 @@
+import type { Pane } from 'quilt-core';
+export interface TabRegistration {
+  id: string;
+  title: string;
+  description?: string;
+  icon?: string;
+  keywords?: readonly string[];
+  /** Source is undefined when creating content in a completely empty workspace.
+   * Return a fresh pane with a unique id; undefined cancels creation. */
+  create: (context: { source: Pane | undefined; groupId: string }) => Pane | undefined;
+}
+/** Available content types, independent of open pane instances and layout JSON. */
+export class TabRegistry {
+  private entries = new Map<string, TabRegistration>();
+  private listeners = new Set<() => void>();
+  constructor(entries: readonly TabRegistration[] = []) {
+    for (const entry of entries) this.register(entry);
+  }
+  list(): readonly TabRegistration[] {
+    return [...this.entries.values()];
+  }
+  register(entry: TabRegistration): () => void {
+    if (!entry.id || this.entries.has(entry.id))
+      throw new Error(`Duplicate or empty tab registration: ${entry.id}`);
+    const stored = Object.freeze({
+      ...entry,
+      ...(entry.keywords ? { keywords: Object.freeze([...entry.keywords]) } : {}),
+    });
+    this.entries.set(entry.id, stored);
+    this.emit();
+    return () => {
+      if (this.entries.get(entry.id) !== stored) return;
+      this.entries.delete(entry.id);
+      this.emit();
+    };
+  }
+  subscribe(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  private emit() {
+    for (const listener of this.listeners) listener();
+  }
+}