@cplieger/ui 0.0.0 → 1.0.0-dev.1

package/src/primitives/tooltip.ts

@@ -0,0 +1,377 @@
+/**
+ * tooltip.ts — One delegated tooltip controller on `document`. Replaces bare
+ * `title` attributes with positioned, delay-aware, accessible tooltips.
+ *
+ * BY DEFAULT `delayWarm` IS `delayCold`, so every hover waits the same time —
+ * matching native `title` behavior. A warm group (peers appearing faster once
+ * one has shown) is opt-in through an explicit smaller `delayWarm`.
+ *
+ * Scroll HIDES the tooltip rather than repositioning it, unlike popover:
+ * once the user scrolls, the pointer is no longer meaningfully over the
+ * anchor, matching native `title`; a popover is an opened surface the user is
+ * interacting with and must follow its anchor instead.
+ *
+ * A TRIGGER'S HIT BOX IS NOT ALWAYS THE INK THE TOOLTIP IS ABOUT, so the trigger
+ * may name that ink with `<attribute>-anchor` on a descendant and the tip is
+ * placed against the MARK while hover, focus and `aria-describedby` stay on the
+ * trigger. Without it a row-wide trigger anchors the tip at the centre of its own
+ * box, which is empty space: measured on a consumer, a 570px disclosure row whose
+ * only ink is a 16px leading glyph put the tip 269px to the right of that glyph,
+ * and a 546px file row whose name sits at its leading edge 243px away.
+ *
+ * @module
+ */
+
+import { el } from "../dom/el.js";
+
+import { placeAnchored, type PopoverAnchor } from "./popover.js";
+import { cancelTransition, runTransition } from "./transition.js";
+
+/** Tuning for the one delegated controller: the trigger attribute it delegates
+ *  on, and the three numbers that decide when a tip appears. The defaults
+ *  reproduce native `title` timing, with the warm group inert. */
+export interface TooltipOptions {
+  /** Trigger attribute holding the tooltip text. Default `data-uip-tooltip`.
+   *  The MARK attribute below is derived from it, so an app that renames one
+   *  renames both. */
+  attribute?: string;
+  /** Delay (ms) before the first tooltip of a cold group. Default 500, the
+   *  hover time a native `title` waits out (Firefox's `ui.tooltipDelay`
+   *  default; the Windows mouse-hover time is 400). */
+  delayCold?: number;
+  /** Delay (ms) before tooltips while the group is warm. Defaults to
+   *  `delayCold`, so every hover costs the same wait. Set it lower to opt into
+   *  a warm group, where a peer shows faster once one tooltip has. */
+  delayWarm?: number;
+  /** Warm window (ms) after a tooltip hides. Default 500. Inert while
+   *  `delayWarm` equals `delayCold`. */
+  cooldown?: number;
+}
+
+type TooltipState =
+  | { readonly kind: "idle" }
+  | {
+      readonly kind: "pending";
+      readonly anchor: HTMLElement;
+      readonly timer: ReturnType<typeof setTimeout>;
+    }
+  | { readonly kind: "visible"; readonly anchor: HTMLElement; readonly tip: HTMLElement }
+  | { readonly kind: "fading"; readonly tip: HTMLElement };
+
+let tipIdSeq = 0;
+class TooltipController {
+  private state: TooltipState = { kind: "idle" };
+  private warmUntil = 0;
+  private readonly attribute: string;
+  private readonly selector: string;
+  private readonly markSelector: string;
+  private readonly delayCold: number;
+  private readonly delayWarm: number;
+  private readonly cooldown: number;
+
+  private readonly onPointerOver = (e: Event): void => {
+    this.onEnter(e);
+  };
+  private readonly onPointerOut = (e: Event): void => {
+    this.onLeave(e);
+  };
+  private readonly onFocusIn = (e: Event): void => {
+    // :focus-visible gate: a bare focusin also fires on programmatic focus
+    // (modal open, focus-trap restore, autofocus), popping tooltips with no
+    // hover or keypress.
+    if (!isKeyboardFocus(e.target)) {
+      return;
+    }
+    this.onEnter(e);
+  };
+  private readonly onFocusOut = (e: Event): void => {
+    this.onLeave(e);
+  };
+  private readonly onKeyDown = (e: KeyboardEvent): void => {
+    if (e.key === "Escape") {
+      this.hide();
+    }
+  };
+  private readonly onScroll = (): void => {
+    this.hide();
+  };
+  private readonly onWindowBlur = (): void => {
+    this.hide();
+  };
+
+  constructor(opts: TooltipOptions) {
+    this.attribute = opts.attribute ?? "data-uip-tooltip";
+    this.selector = `[${this.attribute}]`;
+    // Derived rather than a second option: one trigger vocabulary, so an app
+    // renaming the text attribute cannot end up with a mark attribute in the
+    // library's namespace and a trigger attribute in its own.
+    this.markSelector = `[${this.attribute}-anchor]`;
+    this.delayCold = opts.delayCold ?? 500;
+    // Defaults to delayCold, not a constant, so a partial override can't
+    // produce a warm path faster than the delay the caller asked for.
+    this.delayWarm = opts.delayWarm ?? this.delayCold;
+    this.cooldown = opts.cooldown ?? 500;
+  }
+
+  init(): void {
+    document.addEventListener("pointerover", this.onPointerOver);
+    document.addEventListener("pointerout", this.onPointerOut);
+    document.addEventListener("focusin", this.onFocusIn);
+    document.addEventListener("focusout", this.onFocusOut);
+    document.addEventListener("keydown", this.onKeyDown);
+    document.addEventListener("scroll", this.onScroll, true);
+    window.addEventListener("blur", this.onWindowBlur);
+  }
+
+  dispose(): void {
+    document.removeEventListener("pointerover", this.onPointerOver);
+    document.removeEventListener("pointerout", this.onPointerOut);
+    document.removeEventListener("focusin", this.onFocusIn);
+    document.removeEventListener("focusout", this.onFocusOut);
+    document.removeEventListener("keydown", this.onKeyDown);
+    document.removeEventListener("scroll", this.onScroll, true);
+    window.removeEventListener("blur", this.onWindowBlur);
+    this.teardown();
+  }
+
+  private closestAnchor(target: EventTarget | null): HTMLElement | null {
+    if (!(target instanceof Element)) {
+      return null;
+    }
+    const anchor = target.closest(this.selector);
+    return anchor instanceof HTMLElement ? anchor : null;
+  }
+
+  private onEnter(e: Event): void {
+    const anchor = this.closestAnchor(e.target);
+    if (anchor === null) {
+      return;
+    }
+    const text = anchor.getAttribute(this.attribute) ?? "";
+    if (text === "") {
+      return;
+    }
+    if (
+      (this.state.kind === "pending" || this.state.kind === "visible") &&
+      this.state.anchor === anchor
+    ) {
+      return;
+    }
+    this.teardown();
+    const delay = Date.now() < this.warmUntil ? this.delayWarm : this.delayCold;
+    const timer = setTimeout(() => {
+      this.show(anchor, text);
+    }, delay);
+    this.state = { kind: "pending", anchor, timer };
+  }
+
+  private onLeave(e: Event): void {
+    const anchor = this.closestAnchor(e.target);
+    if (anchor === null) {
+      return;
+    }
+    if (this.state.kind === "idle" || this.state.kind === "fading") {
+      return;
+    }
+    if (this.state.anchor !== anchor) {
+      return;
+    }
+    const related = (e as { relatedTarget?: EventTarget | null }).relatedTarget ?? null;
+    if (related instanceof Node && anchor.contains(related)) {
+      return;
+    }
+    this.hide();
+  }
+
+  private show(anchor: HTMLElement, text: string): void {
+    if (!anchor.isConnected) {
+      this.state = { kind: "idle" };
+      return;
+    }
+    this.teardown();
+
+    const tipId = `uip-tip-${(++tipIdSeq).toString()}`;
+    const tip = el(
+      "div",
+      { className: "uip-tooltip", role: "tooltip", id: tipId },
+      ...renderLines(text),
+    );
+    // Shares the dialog's top-layer context; body-appended would paint behind a modal.
+    const host: Element = anchor.closest("dialog[open]") ?? document.body;
+    host.appendChild(tip);
+    addDescribedBy(anchor, tipId);
+
+    this.position(anchor, tip);
+
+    this.state = { kind: "visible", anchor, tip };
+    // Keep the group warm long enough to cover a cold-delay hover of a peer.
+    this.warmUntil = Date.now() + this.cooldown + this.delayCold;
+  }
+
+  private position(anchor: HTMLElement, tip: HTMLElement): void {
+    placeAnchored(tip, this.positionAnchor(anchor), {
+      placement: "top",
+      align: "center",
+      offset: 6,
+      margin: 4,
+    });
+  }
+
+  /** What the tip is placed against: the trigger's marked ink intersected with
+   *  the trigger's rect, so clipped ink (an ellipsised name, a mark scrolled
+   *  out of an overflow-hidden trigger) cannot drag the tip off the control.
+   *  No mark, or an empty intersection, falls back to the trigger. */
+  private positionAnchor(anchor: HTMLElement): PopoverAnchor {
+    const mark = this.markInside(anchor);
+    if (mark === null) {
+      return anchor;
+    }
+    const a = anchor.getBoundingClientRect();
+    const m = mark.getBoundingClientRect();
+    const left = Math.max(a.left, m.left);
+    const top = Math.max(a.top, m.top);
+    const width = Math.min(a.right, m.right) - left;
+    const height = Math.min(a.bottom, m.bottom) - top;
+    if (width <= 0 || height <= 0) {
+      return anchor;
+    }
+    const rect = new DOMRect(left, top, width, height);
+    return { getBoundingClientRect: (): DOMRect => rect };
+  }
+
+  /** The trigger's own marked ink: the first mark in document order that belongs
+   *  to THIS trigger and has a box. A mark inside a nested trigger is that
+   *  trigger's, and one that renders nothing (a glyph slot with no content yet, a
+   *  `display: none` mark) is not ink to point at. */
+  private markInside(anchor: HTMLElement): HTMLElement | null {
+    for (const mark of anchor.querySelectorAll<HTMLElement>(this.markSelector)) {
+      if (mark.closest(this.selector) !== anchor) {
+        continue;
+      }
+      const r = mark.getBoundingClientRect();
+      if (r.width > 0 && r.height > 0) {
+        return mark;
+      }
+    }
+    return null;
+  }
+
+  private hide(): void {
+    if (this.state.kind === "pending") {
+      clearTimeout(this.state.timer);
+      this.state = { kind: "idle" };
+      this.warmUntil = Date.now() + this.cooldown;
+      return;
+    }
+    if (this.state.kind !== "visible") {
+      return;
+    }
+    const { anchor, tip } = this.state;
+    removeDescribedBy(anchor, tip.id);
+    this.state = { kind: "fading", tip };
+    this.warmUntil = Date.now() + this.cooldown;
+
+    runTransition(tip, {
+      change: () => {
+        tip.classList.add("is-leaving");
+      },
+      settled: () => {
+        this.state = { kind: "idle" };
+        tip.remove();
+      },
+    });
+  }
+
+  private teardown(): void {
+    switch (this.state.kind) {
+      case "pending":
+        clearTimeout(this.state.timer);
+        break;
+      case "visible":
+        removeDescribedBy(this.state.anchor, this.state.tip.id);
+        this.state.tip.remove();
+        break;
+      case "fading":
+        cancelTransition(this.state.tip);
+        this.state.tip.remove();
+        break;
+      case "idle":
+        break;
+    }
+    this.state = { kind: "idle" };
+  }
+}
+
+/** Append `id` to the anchor's `aria-describedby` token list, preserving any
+ *  tokens the app already set. */
+function addDescribedBy(anchor: HTMLElement, id: string): void {
+  const current = anchor.getAttribute("aria-describedby");
+  const tokens = current === null ? [] : current.split(/\s+/).filter((t) => t !== "");
+  if (!tokens.includes(id)) {
+    tokens.push(id);
+  }
+  anchor.setAttribute("aria-describedby", tokens.join(" "));
+}
+
+/** Remove only `id` from the anchor's `aria-describedby`, restoring the rest.
+ *  Removes the attribute entirely only when nothing else remains. */
+function removeDescribedBy(anchor: HTMLElement, id: string): void {
+  const current = anchor.getAttribute("aria-describedby");
+  if (current === null) {
+    return;
+  }
+  const tokens = current.split(/\s+/).filter((t) => t !== "" && t !== id);
+  if (tokens.length > 0) {
+    anchor.setAttribute("aria-describedby", tokens.join(" "));
+  } else {
+    anchor.removeAttribute("aria-describedby");
+  }
+}
+
+/** True when the focus landing on `target` should count as keyboard-driven:
+ *  the element matches `:focus-visible`. Engines without the selector (or a
+ *  non-Element target) fall back to `true`, preserving the old show-on-focus
+ *  behavior rather than silently disabling focus tooltips. */
+function isKeyboardFocus(target: EventTarget | null): boolean {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  try {
+    return target.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
+
+/** Split tooltip text on newlines into text nodes separated by <br>. */
+function renderLines(text: string): (string | Node)[] {
+  const lines = text.split("\n");
+  const children: (string | Node)[] = [];
+  for (let i = 0; i < lines.length; i++) {
+    if (i > 0) {
+      children.push(el("br"));
+    }
+    children.push(lines[i] ?? "");
+  }
+  return children;
+}
+
+let controller: TooltipController | null = null;
+
+/** Install the delegated tooltip controller once. Idempotent — later calls
+ *  (including with different options) are no-ops until reset. */
+export function initTooltips(opts?: TooltipOptions): void {
+  if (controller !== null) {
+    return;
+  }
+  controller = new TooltipController(opts ?? {});
+  controller.init();
+}
+
+/** Test-only: remove the controller's listeners and any live tooltip. */
+export function _resetForTest(): void {
+  if (controller !== null) {
+    controller.dispose();
+    controller = null;
+  }
+}

package/src/primitives/transition.ts

@@ -0,0 +1,119 @@
+/**
+ * transition.ts — Run one CSS transition on an element and finalize it once it
+ * ends. A transition needs its start state flushed before the change, or the
+ * browser coalesces both writes into one frame and nothing animates;
+ * `runTransition` does that flush. The primitives' fades follow the same
+ * settle rule through their own private watcher.
+ * @module
+ */
+
+/**
+ * Ceiling (ms) on how long a settle waits for `transitionend` before assuming
+ * no transition ran at all. Not an estimate of any duration: every duration in
+ * this library is the app's, set through a `--uip-*` custom property, so the
+ * library cannot know the real one. A transition skinned longer than this is
+ * truncated.
+ */
+const SETTLE_FALLBACK_MS = 400;
+
+/** One state change plus what finalizes it. Handed to {@link runTransition},
+ *  which flushes the pre-change style before invoking `change` so the engine
+ *  has a start state to animate from. */
+export interface TransitionSpec {
+  /** Writes the state to animate TO. Whatever the caller wrote BEFORE calling
+   *  `runTransition` is the state it animates FROM. */
+  change: () => void;
+  /** Runs exactly once when the transition on the element ends, or after the
+   *  settle fallback ceiling (`SETTLE_FALLBACK_MS`) if none ever starts. Omit
+   *  it when there is nothing to finalize; then nothing is armed and nothing
+   *  needs cancelling. */
+  settled?: () => void;
+}
+
+/** Pending settles, keyed by element: the cancel that detaches one. A WeakMap
+ *  so a settle armed against a node that is then dropped retains nothing. */
+const inFlight = new WeakMap<HTMLElement, () => void>();
+
+/** @internal Arm one settle on `el`: the first `transitionend` whose target is
+ *  `el`, or the fallback ceiling, whichever comes first. Fires once; returns
+ *  its cancel. */
+export function watchSettle(el: HTMLElement, onSettled: () => void): () => void {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  const detach = (): void => {
+    el.removeEventListener("transitionend", onEnd);
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  // Detaching (not a latch) is what makes this fire once: one change can end
+  // several transitions, and by the second event the listener is gone.
+  const fire = (): void => {
+    detach();
+    onSettled();
+  };
+  const onEnd = (e: TransitionEvent): void => {
+    if (e.target === el) {
+      fire();
+    }
+  };
+  el.addEventListener("transitionend", onEnd);
+  timer = setTimeout(fire, SETTLE_FALLBACK_MS);
+  return detach;
+}
+
+/**
+ * Drop the settle pending on `el` WITHOUT running it. For a caller that is
+ * taking the element somewhere the pending callback must not follow: a reopen
+ * during a fade, a dispose mid-animation, a node about to be removed. A no-op
+ * when nothing is pending.
+ */
+export function cancelTransition(el: HTMLElement): void {
+  const cancel = inFlight.get(el);
+  if (cancel !== undefined) {
+    inFlight.delete(el);
+    cancel();
+  }
+}
+
+/**
+ * Run one CSS transition on `el`: `settled` runs once, on the first
+ * `transitionend` targeting `el` or after the fallback ceiling. `change` and
+ * `settled` are read once, first, and any settle pending on `el` is dropped.
+ * A `cancelTransition` or `runTransition` on `el` from inside `change` takes
+ * the element and this call arms nothing; a throw from `change` arms nothing.
+ */
+export function runTransition(el: HTMLElement, spec: TransitionSpec): void {
+  const change = spec.change;
+  const settled = spec.settled;
+  cancelTransition(el);
+
+  // Reading a layout property forces the engine to resolve the style written
+  // so far; without it the change below lands in the same frame.
+  el.getBoundingClientRect();
+
+  const reservation = (): void => undefined;
+  inFlight.set(el, reservation);
+  try {
+    change();
+  } catch (error) {
+    if (inFlight.get(el) === reservation) {
+      inFlight.delete(el);
+    }
+    throw error;
+  }
+  if (inFlight.get(el) !== reservation) {
+    return;
+  }
+  if (settled === undefined) {
+    inFlight.delete(el);
+    return;
+  }
+  const cancel = watchSettle(el, () => {
+    if (inFlight.get(el) === cancel) {
+      inFlight.delete(el);
+    }
+    settled();
+  });
+  inFlight.set(el, cancel);
+}

package/src/primitives/view-transition.ts

@@ -0,0 +1,57 @@
+/**
+ * view-transition.ts — Queued, feature-detected, rejection-safe wrapper over
+ * document.startViewTransition. Overlapping calls serialize through a
+ * module-level pending promise; the returned promise never rejects, even when
+ * the transition rejects or `fn` throws.
+ *
+ * Suspended-renderer safety: a hidden tab (and some remote/virtualized
+ * sessions that stay "visible" while the compositor is suspended) never
+ * grants startViewTransition a rendering opportunity, so `finished` never
+ * settles and every later call chains behind it forever. Two guards: a
+ * `document.hidden` fast-path that skips the transition entirely, and a
+ * watchdog that calls `skipTransition()` when `finished` hasn't settled in
+ * time (skipping still runs the update callback and settles via task queues).
+ *
+ * @module
+ */
+
+let pending: Promise<void> = Promise.resolve();
+
+/** How long a transition may stay unsettled before the watchdog skips it.
+ *  Generous next to real transition durations (a few hundred ms): only a
+ *  starved renderer ever reaches it. */
+const SKIP_WATCHDOG_MS = 1_000;
+
+/** Run `fn` inside a serialized document view transition. Resolves when the
+ *  transition (or, when the API is absent or the document is hidden, the
+ *  direct call) finishes. */
+export function viewTransition(fn: () => void | Promise<void>): Promise<void> {
+  const run = async (): Promise<void> => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- runtime feature detection
+    if (!document.startViewTransition || document.hidden) {
+      try {
+        await fn();
+      } catch {
+        // swallow — matches the API-present path, which never rejects the caller.
+      }
+      return;
+    }
+    const transition = document.startViewTransition(fn);
+    transition.ready.catch(() => undefined);
+    // Otherwise a throwing `fn` raises an unhandled rejection in the page —
+    // nothing else here observes updateCallbackDone.
+    transition.updateCallbackDone.catch(() => undefined);
+    const watchdog = setTimeout(() => {
+      transition.skipTransition();
+    }, SKIP_WATCHDOG_MS);
+    try {
+      await transition.finished.catch(() => undefined);
+    } finally {
+      clearTimeout(watchdog);
+    }
+  };
+  // Reset the shared tail to a swallowed promise so one failure can't wedge the queue.
+  const result = pending.then(run, run);
+  pending = result.catch(() => undefined);
+  return result;
+}

package/src/signal/bus.ts

@@ -0,0 +1,126 @@
+// Typed event bus for discrete events with no retained value; continuous state
+// belongs in a signal.
+//
+// Handler sets are snapshot-cached: the iteration array is rebuilt only when
+// the set is mutated, so a handler unsubscribed during an emit still fires for
+// that emit.
+
+/** Handler for a bus event. Events whose payload type is `undefined` take no
+ *  argument. */
+export type BusHandler<T> = T extends undefined ? () => void : (payload: T) => void;
+
+/** A typed event bus over an event→payload map `M`. Methods are arrow-function
+ *  properties (not method signatures) so consumers can safely destructure
+ *  `const { on, emit } = bus` without unbound-`this` warnings. */
+export interface Bus<M> {
+  /** Subscribe to an event. Returns an unsubscribe function. */
+  on: <K extends keyof M>(event: K, handler: BusHandler<M[K]>) => () => void;
+  /** Subscribe for exactly one emit, then auto-unsubscribe. Returns an
+   *  unsubscribe function (to cancel before it fires). */
+  once: <K extends keyof M>(event: K, handler: BusHandler<M[K]>) => () => void;
+  /** Remove a previously-registered handler (no-op if absent). */
+  off: <K extends keyof M>(event: K, handler: BusHandler<M[K]>) => void;
+  /** Emit an event. Events whose payload is `undefined` are emitted with no
+   *  payload argument. */
+  emit: <K extends keyof M>(
+    ...args: M[K] extends undefined ? [event: K] : [event: K, payload: M[K]]
+  ) => void;
+  /** Remove all handlers for one event, or all handlers entirely. */
+  clear: (event?: keyof M) => void;
+}
+
+type AnyHandler = (payload?: unknown) => void;
+
+interface Slot {
+  set: Set<AnyHandler>;
+  snapshot: AnyHandler[];
+  dirty: boolean;
+}
+
+/** Create a typed event bus. `onError` (default `console.error`) isolates a
+ *  throwing handler so it can't break sibling handlers or the emitter. */
+export function createBus<M>(options?: {
+  onError?: (event: keyof M, err: unknown) => void;
+}): Bus<M> {
+  const slots = new Map<keyof M, Slot>();
+  const onError =
+    options?.onError ??
+    ((event: keyof M, err: unknown): void => {
+      console.error(`[bus] handler error for "${String(event)}":`, err);
+    });
+
+  function slotFor(event: keyof M): Slot {
+    let slot = slots.get(event);
+    if (slot === undefined) {
+      slot = { set: new Set(), snapshot: [], dirty: false };
+      slots.set(event, slot);
+    }
+    return slot;
+  }
+
+  function on<K extends keyof M>(event: K, handler: BusHandler<M[K]>): () => void {
+    const slot = slotFor(event);
+    slot.set.add(handler as AnyHandler);
+    slot.dirty = true;
+    return (): void => {
+      off(event, handler);
+    };
+  }
+
+  function off<K extends keyof M>(event: K, handler: BusHandler<M[K]>): void {
+    const slot = slots.get(event);
+    if (slot === undefined) {
+      return;
+    }
+    if (slot.set.delete(handler as AnyHandler)) {
+      slot.dirty = true;
+    }
+  }
+
+  function once<K extends keyof M>(event: K, handler: BusHandler<M[K]>): () => void {
+    const wrapped = ((...callArgs: unknown[]): void => {
+      off(event, wrapped);
+      (handler as AnyHandler)(...callArgs);
+    }) as BusHandler<M[K]>;
+    return on(event, wrapped);
+  }
+
+  function emit<K extends keyof M>(
+    ...args: M[K] extends undefined ? [event: K] : [event: K, payload: M[K]]
+  ): void {
+    const [event, payload] = args as [K, unknown];
+    const slot = slots.get(event);
+    if (slot === undefined) {
+      return;
+    }
+    if (slot.dirty) {
+      slot.snapshot = Array.from(slot.set);
+      slot.dirty = false;
+    }
+    // No-payload events (`emit(event)` with no second arg) invoke handlers with
+    // zero arguments, honoring the `() => void` handler type — a `() => void`
+    // handler should never receive a stray `undefined`.
+    const hasPayload = args.length > 1;
+    for (const handler of slot.snapshot) {
+      try {
+        if (hasPayload) {
+          handler(payload);
+        } else {
+          handler();
+        }
+      } catch (err) {
+        onError(event, err);
+      }
+    }
+  }
+
+  function clear(event?: keyof M): void {
+    if (event === undefined) {
+      slots.clear();
+    } else {
+      slots.delete(event);
+    }
+  }
+
+  return { on, once, off, emit, clear };
+}