@threadlabs/looma 0.4.0 → 0.5.0

package/components/ui-editable/ui-editable.html

@@ -0,0 +1,163 @@
+<template component="ui-editable" controller="./ui-editable.js">
+  <defs>
+    <prop name="value" type="string" default="">The displayed and initial editable value.</prop>
+    <prop name="label" type="string" default="Edit value">Accessible name for the editor.</prop>
+    <prop name="edit" type="boolean" default="false">Whether edit mode is active initially or when set externally.</prop>
+    <prop name="disabled" type="boolean" default="false">Prevents entering or changing edit mode.</prop>
+    <prop name="hint" type="string" default="">Optional text shown beside the value to signal it is editable (for example "Edit").</prop>
+    <prop name="actions" type="boolean" default="false"
+    >Show explicit Save and Cancel buttons while editing. Without them, Enter or leaving the field saves and Escape cancels.</prop>
+    <state name="internalEdit" :value="false"></state>
+    <state name="internalValue" :value="''"></state>
+    <state name="draft" :value="''"></state>
+    <event name="input" type="object({ value: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="change" type="object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event
+      name="edit-change"
+      type="object({ edit: boolean, reason: activate | commit | cancel | light-dismiss | escape | programmatic, trigger: keyboard | pointer | programmatic })"
+    ></event>
+  </defs>
+  <div>
+    <div class="field">
+      <button class="preview" $ref="preview" type="button" :disabled="disabled">
+        <span class="text" $value="internalValue"></span>
+        <span $if="hint" class="hint" aria-hidden="true" $value="hint"></span>
+      </button>
+      <input class="input" $ref="input" type="text" .value="draft" :aria-label="label" :disabled="disabled or not internalEdit">
+    </div>
+    <div $if="actions" class="actions">
+      <button class="save" type="button">Save</button>
+      <button class="cancel" type="button">Cancel</button>
+    </div>
+  </div>
+  <style>
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+      color: var(--ui-text-primary);
+    }
+
+    /* The value and the input share one grid cell with identical box metrics, so switching between
+     * display and edit never changes the control's size or moves the text. */
+    .field {
+      display: inline-grid;
+      min-inline-size: 8rem;
+      max-inline-size: 100%;
+    }
+
+    .preview,
+    .input {
+      grid-area: 1 / 1;
+      box-sizing: border-box;
+      min-block-size: var(--ui-control-size-sm, 2rem);
+      margin: 0;
+      padding: var(--ui-space-1) var(--ui-space-2);
+      border: 1px solid transparent;
+      border-radius: var(--ui-radius-2);
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      color: inherit;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .preview {
+      display: inline-flex;
+      gap: var(--ui-space-2);
+      align-items: center;
+      background: transparent;
+      text-align: start;
+      cursor: pointer;
+    }
+
+    .preview:hover:not(:disabled) {
+      background: var(--ui-surface-muted);
+    }
+
+    .preview:focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    .hint {
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    /* Contained so it takes the value's width instead of its own default input width. */
+    .input {
+      contain: inline-size;
+      inline-size: 100%;
+      min-inline-size: 0;
+      visibility: hidden;
+      background: var(--ui-control-surface, var(--ui-surface-elevated));
+    }
+
+    .input:focus {
+      outline: none;
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      box-shadow:
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow);
+    }
+
+    .input::selection {
+      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+    }
+
+    :host-state([internalEdit]) .preview {
+      visibility: hidden;
+    }
+    :host-state([internalEdit]) .input {
+      visibility: visible;
+    }
+
+    .actions {
+      display: none;
+      gap: var(--ui-space-1);
+    }
+    :host-state([internalEdit]) .actions {
+      display: inline-flex;
+    }
+
+    .actions button {
+      min-block-size: var(--ui-control-size-sm, 2rem);
+      padding: 0 var(--ui-space-3);
+      border: 1px solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-2);
+      background: var(--ui-surface-elevated);
+      background-image: var(--ui-raised-highlight, none);
+      box-shadow: var(--ui-raised, none);
+      color: inherit;
+      font: inherit;
+      font-size: var(--ui-font-size-sm);
+      cursor: pointer;
+    }
+
+    .actions .save {
+      border-color: var(--ui-accent-solid);
+      background: var(--ui-accent-solid);
+      color: var(--ui-text-on-accent);
+    }
+
+    .actions button:focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    :host-state([disabled]) .preview {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-editable/ui-editable.js

@@ -0,0 +1,113 @@
+function triggerFor(event) {
+  return event.detail === 0 ? "keyboard" : "pointer";
+}
+
+/** Owns the display/edit transition so authors only provide value and label. */
+export default function controller(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const { preview, input } = host.refs;
+
+  let lastExternalEdit = Boolean(host.state.edit);
+  let lastExternalValue = String(host.state.value ?? "");
+  host.state.internalEdit = lastExternalEdit;
+  host.state.internalValue = lastExternalValue;
+  host.state.draft = lastExternalValue;
+
+  const apply = () => {
+    const externalEdit = Boolean(host.state.edit);
+    const externalValue = String(host.state.value ?? "");
+    if (externalEdit !== lastExternalEdit) {
+      lastExternalEdit = externalEdit;
+      host.state.internalEdit = externalEdit;
+      if (externalEdit) host.state.draft = host.state.internalValue;
+    }
+    if (externalValue !== lastExternalValue) {
+      lastExternalValue = externalValue;
+      host.state.internalValue = externalValue;
+      if (!host.state.internalEdit) host.state.draft = externalValue;
+    }
+    // The inactive input stays in layout (it shares the value's cell) but out of the tab order.
+    input.tabIndex = host.state.internalEdit ? 0 : -1;
+  };
+
+  const setEditing = (next, reason, trigger) => {
+    if (host.state.disabled || Boolean(host.state.internalEdit) === next) return;
+    // Measured before the input is disabled, which drops focus to the body.
+    const focusWasInside = element.contains(document.activeElement);
+    if (next) host.state.draft = host.state.internalValue;
+    host.state.internalEdit = next;
+    apply();
+    host.dispatch("edit-change", { edit: next, reason, trigger });
+    requestAnimationFrame(() => {
+      // Return focus to the display only if it was still inside the editor (Enter, Escape, Save,
+      // Cancel). After a click elsewhere, focus stays where the user clicked; pulling it back would
+      // scroll the page to this editor.
+      if (!next) {
+        if (focusWasInside) preview.focus({ preventScroll: true });
+        return;
+      }
+      input.focus({ preventScroll: true });
+      input.select();
+    });
+  };
+  const commit = (trigger) => {
+    const previousValue = String(host.state.internalValue ?? "");
+    const value = String(host.state.draft ?? "");
+    host.state.internalValue = value;
+    setEditing(false, "commit", trigger);
+    if (value !== previousValue) host.dispatch("change", { value, previousValue, trigger });
+  };
+  const cancel = (reason, trigger) => {
+    host.state.draft = host.state.internalValue;
+    setEditing(false, reason, trigger);
+  };
+  const onInput = (event) => {
+    if (event.target !== input) return;
+    host.state.draft = input.value;
+    host.dispatch("input", { value: input.value, trigger: "keyboard" });
+  };
+  const onClick = (event) => {
+    if (preview.contains(event.target)) {
+      setEditing(true, "activate", triggerFor(event));
+      return;
+    }
+    if (event.target.closest?.(".save")) commit(triggerFor(event));
+    else if (event.target.closest?.(".cancel")) cancel("cancel", triggerFor(event));
+  };
+  const onKeydown = (event) => {
+    if (!host.state.internalEdit) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      cancel("escape", "keyboard");
+    } else if (event.key === "Enter" && event.target === input) {
+      event.preventDefault();
+      commit("keyboard");
+    }
+  };
+  // Leaving the field saves, as with other in-place editors; Escape is the way to discard.
+  const onDocumentPointerdown = (event) => {
+    if (host.state.internalEdit && !event.composedPath().includes(element)) commit("pointer");
+  };
+  // Only the input's own blur counts: hiding the display button during the swap also moves focus,
+  // and must not end the edit. Tabbing to another control saves; clicks away are handled above.
+  const onInputBlur = (event) => {
+    if (host.state.internalEdit && event.relatedTarget && !element.contains(event.relatedTarget)) commit("keyboard");
+  };
+
+  element.addEventListener("input", onInput);
+  element.addEventListener("click", onClick);
+  element.addEventListener("keydown", onKeydown);
+  input.addEventListener("blur", onInputBlur);
+  document.addEventListener("pointerdown", onDocumentPointerdown, true);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    element.removeEventListener("input", onInput);
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("keydown", onKeydown);
+    input.removeEventListener("blur", onInputBlur);
+    document.removeEventListener("pointerdown", onDocumentPointerdown, true);
+  };
+}

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html

@@ -0,0 +1,97 @@
+<template component="ui-editor-insert-table-grid" controller="./ui-editor-insert-table-grid.js">
+  <defs>
+    <prop name="open" type="boolean" default="false">Whether the grid is shown.</prop>
+    <prop name="maxRows" type="integer" default="8">The most rows the grid offers (at most 10).</prop>
+    <prop name="maxCols" type="integer" default="8">The most columns the grid offers (at most 10).</prop>
+    <prop name="headerRow" type="boolean" default="false">Whether table insertion initially includes a header row.</prop>
+    <state name="cells" :value="[]"></state>
+    <state name="rows" :value="8"></state>
+    <state name="cols" :value="8"></state>
+    <state name="hint" :value="''"></state>
+    <state name="withHeaderRow" :value="false"></state>
+    <event name="insert" type="object({ rows: integer, cols: integer, withHeaderRow: boolean })"></event>
+  </defs>
+  <div :hidden="not open">
+    <p class="hint" $value="hint"></p>
+    <div class="grid" role="group" aria-label="Table dimensions" style:--ui-editor-table-grid-rows="rows" style:--ui-editor-table-grid-cols="cols">
+      <button
+        $each="cell of cells"
+        $key="cell.key"
+        type="button"
+        class="cell"
+        class:selected="cell.selected"
+        :data-row="cell.row"
+        :data-col="cell.col"
+        :aria-label="cell.label"
+        :aria-pressed="cell.selected"
+      >
+      </button>
+    </div>
+    <label class="header"><input type="checkbox" $ref="header" .checked="withHeaderRow"> Header row</label>
+    <button type="button" class="insert" $ref="insert">Insert table</button>
+  </div>
+  <style>
+    :host {
+      padding: var(--ui-space-3, 12px);
+      background: var(--ui-surface, #fff);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-md, 6px);
+      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+    }
+
+    .hint {
+      margin: 0 0 var(--ui-space-2, 8px);
+      font-size: var(--ui-text-sm, 0.875rem);
+      color: var(--ui-text-muted, #6b7280);
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
+      grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
+      gap: 2px;
+      margin-bottom: var(--ui-space-2, 8px);
+    }
+
+    .cell {
+      width: 1.25rem;
+      height: 1.25rem;
+      padding: 0;
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: 2px;
+      background: var(--ui-surface, #fff);
+      cursor: pointer;
+    }
+
+    .cell.selected {
+      background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+      border-color: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+    }
+
+    .header {
+      display: block;
+      margin-bottom: var(--ui-space-2, 8px);
+      font-size: var(--ui-text-sm, 0.875rem);
+      cursor: pointer;
+    }
+
+    :host .insert {
+      width: 100%;
+      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-sm, 4px);
+      background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+      color: var(--ui-accent-contrast, #fff);
+      font-size: var(--ui-text-sm, 0.875rem);
+      cursor: pointer;
+    }
+
+    :host .insert:hover {
+      filter: brightness(1.05);
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js

@@ -0,0 +1,71 @@
+function bounded(value, fallback) {
+  const parsed = Number.parseInt(String(value ?? fallback), 10);
+  return Math.min(10, Math.max(1, Number.isFinite(parsed) ? parsed : fallback));
+}
+
+// Lays out the grid cells, previews the size under the pointer, and inserts the chosen size.
+export default function controller(host) {
+  const element = host.element;
+  let selected = { rows: 3, cols: 3 };
+  let preview = null;
+  let committed = false;
+  let lastHeaderRow = Boolean(host.state.headerRow);
+  host.state.withHeaderRow = lastHeaderRow;
+
+  const update = () => {
+    const rows = bounded(host.state.maxRows, 8);
+    const cols = bounded(host.state.maxCols, 8);
+    const active = preview ?? selected;
+    host.state.rows = rows;
+    host.state.cols = cols;
+    host.state.hint = preview ? `${preview.rows} × ${preview.cols}` : `${selected.rows} × ${selected.cols}${committed ? " selected" : ""}`;
+    host.state.cells = Array.from({ length: rows * cols }, (_, index) => {
+      const row = Math.floor(index / cols) + 1;
+      const col = (index % cols) + 1;
+      return { key: `${row}:${col}`, row, col, label: `${row} rows by ${col} columns`, selected: row <= active.rows && col <= active.cols };
+    });
+  };
+  const stop = host.effect(() => {
+    const headerRow = Boolean(host.state.headerRow);
+    if (headerRow !== lastHeaderRow) {
+      lastHeaderRow = headerRow;
+      host.state.withHeaderRow = headerRow;
+    }
+    update();
+  });
+  const cellOf = (event) => {
+    const cell = event.target.closest?.("[data-row][data-col]");
+    return cell && { rows: Number(cell.dataset.row), cols: Number(cell.dataset.col) };
+  };
+  const onClick = (event) => {
+    const cell = cellOf(event);
+    if (cell) {
+      selected = cell;
+      preview = null;
+      committed = true;
+      update();
+    } else if (host.refs.insert.contains(event.target)) {
+      host.dispatch("insert", { ...selected, withHeaderRow: host.state.withHeaderRow });
+    }
+  };
+  const onChange = () => { host.state.withHeaderRow = host.refs.header.checked; };
+  const onMouseover = (event) => {
+    preview = cellOf(event);
+    update();
+  };
+  const onMouseleave = () => {
+    preview = null;
+    update();
+  };
+  element.addEventListener("click", onClick);
+  element.addEventListener("mouseover", onMouseover);
+  element.addEventListener("mouseleave", onMouseleave);
+  host.refs.header.addEventListener("change", onChange);
+  return () => {
+    stop();
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("mouseover", onMouseover);
+    element.removeEventListener("mouseleave", onMouseleave);
+    host.refs.header.removeEventListener("change", onChange);
+  };
+}

package/components/ui-editor-mention-menu/ui-editor-mention-menu.html

@@ -0,0 +1,157 @@
+<template component="ui-editor-mention-menu" controller="./ui-editor-mention-menu.js">
+  <defs>
+    <prop name="open" type="boolean" default="false">Whether the menu is open.</prop>
+    <prop name="query" type="string" default="">The text typed after the @.</prop>
+    <prop name="items" type="list(object({ id: string, label: string, detail?: string, initials?: string }))">The people the menu offers.</prop>
+    <prop name="selectedIndex" type="integer" default="0">The highlighted person.</prop>
+    <prop name="loading" type="boolean" default="false">Whether a search is in progress.</prop>
+    <prop
+      name="anchorRect"
+      type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number }) | null"
+    >Where the @ was typed, in viewport coordinates.</prop>
+    <state name="visible" :value="false"></state>
+    <state name="rows" :value="[]"></state>
+    <state name="searching" :value="false"></state>
+    <state name="active" :value="0"></state>
+    <state name="prefix" :value="'ui-editor-mention-menu'"></state>
+    <event name="highlight" type="object({ index: integer })"></event>
+    <event name="select" type="object({ index: integer })"></event>
+  </defs>
+  <div role="listbox" aria-label="Mention a person" :aria-busy="loading" :hidden="not visible">
+    <div class="header">
+      <span>People</span>
+      <span class="hint">Type after @ to search</span>
+    </div>
+    <div $if="searching" class="loading" role="status">Searching…</div>
+    <ul $if="not searching" class="list" role="presentation">
+      <li
+        $each="row, index of rows"
+        :id="format('%s-option-%s', prefix, index)"
+        class="item"
+        class:active="index = active"
+        role="option"
+        :aria-selected="index = active"
+        :data-index="index"
+      >
+        <span class="avatar" aria-hidden="true" $value="row.initials"></span>
+        <span class="body"><span class="label" $value="row.label"></span><span $if="row.detail" class="detail" $value="row.detail"></span></span>
+      </li>
+    </ul>
+  </div>
+  <style>
+    :host {
+      user-select: none;
+    }
+
+    :host {
+      display: flex;
+      overflow: hidden;
+      flex-direction: column;
+      background: var(--ui-surface, #fff);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-xl, 1rem);
+      box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--ui-space-3, 12px);
+      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+      color: var(--ui-text-secondary, #4b5563);
+      border-bottom: 1px solid var(--ui-border, #e5e7eb);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      font-weight: var(--ui-font-semibold, 600);
+    }
+
+    .hint {
+      overflow: hidden;
+      color: var(--ui-text-muted, #6b7280);
+      font-weight: var(--ui-font-normal, 400);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .list {
+      max-height: 280px;
+      padding: var(--ui-space-1, 4px) 0;
+      margin: 0;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      list-style: none;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      min-height: 44px;
+      padding: var(--ui-space-1-5, 6px) var(--ui-space-3, 12px);
+      gap: var(--ui-space-3, 12px);
+      cursor: pointer;
+    }
+
+    .item.active {
+      background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
+    }
+
+    .avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      flex: 0 0 auto;
+      color: var(--ui-accent-active, var(--ui-accent-solid, #2563eb));
+      background: var(--ui-accent-soft, var(--ui-accent-subtle, #eff6ff));
+      border-radius: 999px;
+      font-size: var(--ui-font-size-xs, 0.75rem);
+      font-weight: var(--ui-font-semibold, 600);
+    }
+
+    .body {
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+    }
+
+    .label,
+    .detail {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .label {
+      color: var(--ui-text-primary, #111827);
+      font-size: var(--ui-font-size-sm, 0.875rem);
+      font-weight: var(--ui-font-medium, 500);
+    }
+
+    .detail,
+    .loading {
+      color: var(--ui-text-muted, #6b7280);
+      font-size: var(--ui-font-size-xs, 0.75rem);
+    }
+
+    .loading {
+      min-height: 44px;
+      padding: var(--ui-space-3, 12px);
+    }
+
+    @media (max-width: 767px) {
+      :host {
+        border-bottom: 0;
+        border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
+      }
+
+      .list {
+        max-height: calc(60dvh - 48px);
+      }
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-editor-mention-menu/ui-editor-mention-menu.js

@@ -0,0 +1,50 @@
+import { normalizeAnchor, positionMenu } from "../shared/editor.js";
+
+// Places the menu at the @ and derives its rows; the template renders them.
+export default function controller(host) {
+  const element = host.element;
+  const place = () => {
+    if (host.state.visible) positionMenu(element, normalizeAnchor(host.state.anchorRect), 320);
+  };
+  const stop = host.effect(() => {
+    const items = (Array.isArray(host.state.items) ? host.state.items : []).slice(0, 20);
+    host.state.rows = items.map((item) => ({ ...item, initials: item.initials ?? String(item.label).slice(0, 2).toUpperCase() }));
+    host.state.searching = Boolean(host.state.loading && !items.length);
+    host.state.active = Math.min(Number(host.state.selectedIndex ?? 0), Math.max(0, items.length - 1));
+    host.state.prefix = element.id || "ui-editor-mention-menu";
+    host.state.visible = Boolean(host.state.open && (host.state.loading || items.length > 0) && normalizeAnchor(host.state.anchorRect));
+    if (items.length) element.setAttribute("aria-activedescendant", `${host.state.prefix}-option-${host.state.active}`);
+    else element.removeAttribute("aria-activedescendant");
+    place();
+  });
+  const indexOf = (event) => Number(event.target.closest?.("[data-index]")?.dataset.index);
+  const onMousedown = (event) => event.preventDefault();
+  const onClick = (event) => {
+    const index = indexOf(event);
+    if (Number.isFinite(index)) host.dispatch("select", { index });
+  };
+  const onMouseover = (event) => {
+    const index = indexOf(event);
+    if (!Number.isFinite(index) || index === host.state.active) return;
+    host.state.active = index;
+    element.setAttribute("aria-activedescendant", `${host.state.prefix}-option-${index}`);
+    host.dispatch("highlight", { index });
+  };
+  element.addEventListener("mousedown", onMousedown);
+  element.addEventListener("click", onClick);
+  element.addEventListener("mouseover", onMouseover);
+  window.addEventListener("resize", place);
+  window.addEventListener("scroll", place, true);
+  window.visualViewport?.addEventListener("resize", place);
+  window.visualViewport?.addEventListener("scroll", place);
+  return () => {
+    stop();
+    element.removeEventListener("mousedown", onMousedown);
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("mouseover", onMouseover);
+    window.removeEventListener("resize", place);
+    window.removeEventListener("scroll", place, true);
+    window.visualViewport?.removeEventListener("resize", place);
+    window.visualViewport?.removeEventListener("scroll", place);
+  };
+}