@domternal/vanilla 0.7.0

package/dist/index.js

@@ -0,0 +1,2822 @@
+import { Document, Paragraph, Text, BaseKeymap, History, PluginKey, defaultIcons, Editor, ToolbarController, positionFloatingOnce, defaultBubbleContexts, createBubbleMenuPlugin, FloatingMenuController, positionFloating } from '@domternal/core';
+import { createFloatingMenuPlugin } from '@domternal/extension-block-menu';
+
+// src/shared/isBrowser.ts
+var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+function assertBrowser(className) {
+  if (!isBrowser) {
+    throw new Error(
+      `[${className}] requires a browser environment. If using Astro, wrap with <client:only="vanilla"> or instantiate inside a <script> tag. If using Nuxt/Next.js, gate construction with a typeof window check.`
+    );
+  }
+}
+function createPluginKey(prefix) {
+  const cryptoRef = globalThis.crypto;
+  const suffix = cryptoRef?.randomUUID?.().slice(0, 8) ?? Math.random().toString(36).slice(2, 8);
+  return new PluginKey(prefix + "-" + suffix);
+}
+function renderIconInto(hostEl, iconKey, icons) {
+  if (!iconKey) {
+    hostEl.innerHTML = "";
+    return;
+  }
+  const customIcon = icons?.[iconKey];
+  const defaultIcon = defaultIcons[iconKey];
+  const svg = customIcon ?? defaultIcon ?? "";
+  hostEl.innerHTML = svg;
+}
+function resolveIcon(iconKey, icons) {
+  if (!iconKey) return "";
+  return icons?.[iconKey] ?? defaultIcons[iconKey] ?? "";
+}
+
+// src/shared/eventTarget.ts
+function subscribe(target, type, listener) {
+  const wrapper = (event) => {
+    listener(event.detail);
+  };
+  target.addEventListener(type, wrapper);
+  return () => {
+    target.removeEventListener(type, wrapper);
+  };
+}
+var DEFAULT_EXTENSIONS = [
+  Document,
+  Paragraph,
+  Text,
+  BaseKeymap,
+  History
+];
+var DomternalEditor = class extends EventTarget {
+  /** The underlying ProseMirror-backed `Editor` instance. */
+  editor;
+  /** The host element provided to the constructor. */
+  host;
+  #destroyed = false;
+  #onCreate;
+  #onUpdate;
+  #onSelectionChange;
+  #onFocus;
+  #onBlur;
+  #onDestroy;
+  #transactionHandler = null;
+  #focusHandler = null;
+  #blurHandler = null;
+  constructor(host, options = {}) {
+    super();
+    assertBrowser("DomternalEditor");
+    if (!(host instanceof HTMLElement)) {
+      throw new TypeError(
+        '[DomternalEditor] host must be an HTMLElement. Pass a DOM node (e.g. document.querySelector("#editor")).'
+      );
+    }
+    this.host = host;
+    this.#onCreate = options.onCreate;
+    this.#onUpdate = options.onUpdate;
+    this.#onSelectionChange = options.onSelectionChange;
+    this.#onFocus = options.onFocus;
+    this.#onBlur = options.onBlur;
+    this.#onDestroy = options.onDestroy;
+    this.editor = new Editor({
+      element: host,
+      extensions: [...DEFAULT_EXTENSIONS, ...options.extensions ?? []],
+      content: options.content ?? "",
+      editable: options.editable ?? true,
+      autofocus: options.autofocus ?? false
+    });
+    this.#wireEditorEvents();
+    this.#onCreate?.(this.editor);
+    this.dispatchEvent(
+      new CustomEvent("create", { detail: { editor: this.editor } })
+    );
+  }
+  // === Reactive-friendly getters ===
+  get htmlContent() {
+    return this.editor.getHTML();
+  }
+  get jsonContent() {
+    return this.editor.getJSON();
+  }
+  get isEmpty() {
+    return this.editor.isEmpty;
+  }
+  get isFocused() {
+    return this.editor.isFocused;
+  }
+  get isEditable() {
+    return this.editor.isEditable;
+  }
+  // === Mutators ===
+  /**
+   * Replace editor content. Does NOT emit `update` event by default
+   * (mirrors `Editor.setContent` behavior); pass `emitUpdate=true` to fire.
+   *
+   * No-op if the wrapper has been destroyed.
+   */
+  setContent(content, emitUpdate = false) {
+    if (this.#destroyed) return;
+    this.editor.setContent(content, emitUpdate);
+  }
+  /**
+   * Toggle the editor's editable state (`true` allows input, `false` makes
+   * it read-only). No-op if the wrapper has been destroyed.
+   */
+  setEditable(editable) {
+    if (this.#destroyed) return;
+    this.editor.setEditable(editable);
+  }
+  /**
+   * Programmatically focus the editor.
+   *
+   * @param position - Focus position (`'start' | 'end' | 'all' | number | boolean`).
+   *   Defaults to current selection. No-op if the wrapper has been destroyed.
+   */
+  focus(position) {
+    if (this.#destroyed) return;
+    this.editor.commands.focus(position);
+  }
+  /**
+   * Tear down the underlying editor + remove all subscriptions.
+   *
+   * Idempotent - calling twice is a no-op. Dispatches a `destroy` CustomEvent
+   * BEFORE the editor is destroyed, so listeners can read `this.editor` state
+   * one last time.
+   */
+  destroy() {
+    if (this.#destroyed) return;
+    this.#destroyed = true;
+    this.#onDestroy?.();
+    this.dispatchEvent(new CustomEvent("destroy", { detail: null }));
+    this.#unwireEditorEvents();
+    if (!this.editor.isDestroyed) {
+      this.editor.destroy();
+    }
+  }
+  // === Internal ===
+  #wireEditorEvents() {
+    this.#transactionHandler = ({ transaction }) => {
+      if (transaction.docChanged) {
+        this.#onUpdate?.({ editor: this.editor });
+        this.dispatchEvent(
+          new CustomEvent("update", { detail: { editor: this.editor } })
+        );
+      }
+      if (!transaction.docChanged && transaction.selectionSet) {
+        this.#onSelectionChange?.({ editor: this.editor });
+        this.dispatchEvent(
+          new CustomEvent("selectionchange", { detail: { editor: this.editor } })
+        );
+      }
+    };
+    this.#focusHandler = ({ event }) => {
+      this.#onFocus?.({ editor: this.editor, event });
+      this.dispatchEvent(
+        new CustomEvent("focus", { detail: { editor: this.editor, event } })
+      );
+    };
+    this.#blurHandler = ({ event }) => {
+      this.#onBlur?.({ editor: this.editor, event });
+      this.dispatchEvent(
+        new CustomEvent("blur", { detail: { editor: this.editor, event } })
+      );
+    };
+    this.editor.on("transaction", this.#transactionHandler);
+    this.editor.on("focus", this.#focusHandler);
+    this.editor.on("blur", this.#blurHandler);
+  }
+  #unwireEditorEvents() {
+    if (this.#transactionHandler) {
+      this.editor.off("transaction", this.#transactionHandler);
+      this.#transactionHandler = null;
+    }
+    if (this.#focusHandler) {
+      this.editor.off("focus", this.#focusHandler);
+      this.#focusHandler = null;
+    }
+    if (this.#blurHandler) {
+      this.editor.off("blur", this.#blurHandler);
+      this.#blurHandler = null;
+    }
+  }
+};
+
+// src/toolbar/tooltip.ts
+var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+var MODIFIER_MAP = isMac ? { Mod: "\u2318", Shift: "\u21E7", Alt: "\u2325" } : { Mod: "Ctrl", Shift: "Shift", Alt: "Alt" };
+function getTooltip(item) {
+  if (!item.shortcut) return item.label;
+  const parts = item.shortcut.split("-").map((part) => MODIFIER_MAP[part] ?? part);
+  const shortcut = isMac ? parts.join("") : parts.join("+");
+  return `${item.label} (${shortcut})`;
+}
+var DROPDOWN_CARET = '<svg class="dm-dropdown-caret" width="10" height="10" viewBox="0 0 10 10"><path d="M2 4l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+function createIconCache(initialIcons) {
+  const cache = /* @__PURE__ */ new Map();
+  let icons = initialIcons;
+  let prevIcons = initialIcons;
+  function checkInvalidation() {
+    if (icons !== prevIcons) {
+      cache.clear();
+      prevIcons = icons;
+    }
+  }
+  function resolveSvg(name) {
+    if (icons) {
+      return icons[name] ?? "";
+    }
+    return defaultIcons[name] ?? "";
+  }
+  function getIcon(name) {
+    checkInvalidation();
+    const key = `i:${name}`;
+    let cached = cache.get(key);
+    if (cached === void 0) {
+      cached = resolveSvg(name);
+      cache.set(key, cached);
+    }
+    return cached;
+  }
+  function getTriggerLabel(label, isIcon) {
+    checkInvalidation();
+    const key = `tl:${label}:${isIcon ? "1" : "0"}`;
+    let cached = cache.get(key);
+    if (cached === void 0) {
+      const content = isIcon ? resolveSvg(label) : label;
+      cached = `<span class="dm-toolbar-trigger-label">${content}</span>${DROPDOWN_CARET}`;
+      cache.set(key, cached);
+    }
+    return cached;
+  }
+  function getTriggerIcon(iconName) {
+    checkInvalidation();
+    const key = `t:${iconName}`;
+    let cached = cache.get(key);
+    if (cached === void 0) {
+      cached = resolveSvg(iconName) + DROPDOWN_CARET;
+      cache.set(key, cached);
+    }
+    return cached;
+  }
+  function getItemContent(iconName, label, displayMode) {
+    const mode = displayMode ?? "icon-text";
+    checkInvalidation();
+    const key = `dc:${iconName}:${label}:${mode}`;
+    let cached = cache.get(key);
+    if (cached === void 0) {
+      if (mode === "text") {
+        cached = label;
+      } else if (mode === "icon") {
+        cached = resolveSvg(iconName);
+      } else {
+        cached = resolveSvg(iconName) + " " + label;
+      }
+      cache.set(key, cached);
+    }
+    return cached;
+  }
+  function getDropdownTriggerHtml(dropdown, activeItem) {
+    checkInvalidation();
+    if (dropdown.layout === "grid") {
+      const color = activeItem?.color ?? dropdown.defaultIndicatorColor ?? null;
+      const key = `tr:${dropdown.icon}:${color ?? ""}`;
+      let cached = cache.get(key);
+      if (cached === void 0) {
+        cached = resolveSvg(dropdown.icon) + DROPDOWN_CARET;
+        if (color) {
+          cached += `<span class="dm-toolbar-color-indicator" style="background-color: ${color}"></span>`;
+        }
+        cache.set(key, cached);
+      }
+      return cached;
+    }
+    if (dropdown.dynamicLabel) {
+      if (activeItem) return getTriggerLabel(activeItem.label);
+      if (dropdown.dynamicLabelFallback) return getTriggerLabel(dropdown.dynamicLabelFallback);
+      return getTriggerLabel(dropdown.icon, true);
+    }
+    const icon = dropdown.dynamicIcon && activeItem ? activeItem.icon : dropdown.icon;
+    return getTriggerIcon(icon);
+  }
+  function setIcons(newIcons) {
+    icons = newIcons;
+  }
+  return {
+    resolveSvg,
+    getIcon,
+    getTriggerLabel,
+    getTriggerIcon,
+    getItemContent,
+    getDropdownTriggerHtml,
+    setIcons
+  };
+}
+
+// src/toolbar/computedStyle.ts
+function resolveElementAtCursor(editor) {
+  const { from } = editor.state.selection;
+  const { node } = editor.view.domAtPos(from);
+  return node instanceof HTMLElement ? node : node.parentElement;
+}
+function getComputedStyleAtCursor(editor, prop) {
+  try {
+    const node = resolveElementAtCursor(editor);
+    if (!node) return null;
+    const inline = node.style.getPropertyValue(prop);
+    if (inline) return inline;
+    return window.getComputedStyle(node).getPropertyValue(prop) || null;
+  } catch {
+    return null;
+  }
+}
+function getInlineStyleAtCursor(editor, prop) {
+  try {
+    const node = resolveElementAtCursor(editor);
+    if (!node) return null;
+    return node.style.getPropertyValue(prop) || null;
+  } catch {
+    return null;
+  }
+}
+
+// src/toolbar/DomternalToolbar.ts
+var DomternalToolbar = class extends EventTarget {
+  host;
+  /** The editor instance this toolbar is bound to. */
+  get editor() {
+    return this.#editor;
+  }
+  /** Underlying controller. Exposed for power-user introspection. */
+  get controller() {
+    return this.#controller;
+  }
+  #controller;
+  #editor;
+  #layout;
+  #iconCache;
+  #abortCtl = new AbortController();
+  #destroyed = false;
+  /** Tracks the groups array reference to detect "structure changed" vs "state changed". */
+  #lastGroupsRef = null;
+  /** Maps top-level button/dropdown name -> rendered trigger element. */
+  #buttonEls = /* @__PURE__ */ new Map();
+  /** Rendered dropdown panel elements (created lazily when opened). */
+  #dropdownPanelEl = null;
+  #cleanupFloating = null;
+  #renderPending = false;
+  #renderRaf = 0;
+  #editorEl = null;
+  constructor(host, options) {
+    super();
+    assertBrowser("DomternalToolbar");
+    if (!(host instanceof HTMLElement)) {
+      throw new TypeError(
+        '[DomternalToolbar] host must be an HTMLElement. Pass a DOM node (e.g. document.querySelector("#toolbar")).'
+      );
+    }
+    if (!options.editor) {
+      throw new TypeError("[DomternalToolbar] options.editor is required.");
+    }
+    this.host = host;
+    this.#editor = options.editor;
+    this.#layout = options.layout;
+    this.#iconCache = createIconCache(options.icons);
+    this.host.classList.add("dm-toolbar");
+    this.host.setAttribute("role", "toolbar");
+    this.host.setAttribute("aria-label", "Editor formatting");
+    this.host.setAttribute("data-dm-editor-ui", "");
+    this.#controller = new ToolbarController(
+      this.#editor,
+      () => {
+        this.#scheduleRender();
+      },
+      this.#layout
+    );
+    this.#controller.subscribe();
+    this.#attachListeners();
+    this.#render();
+  }
+  // === Getters ===
+  get openDropdown() {
+    return this.#controller.openDropdown;
+  }
+  // === Setters ===
+  setLayout(layout) {
+    if (this.#destroyed) return;
+    this.#layout = layout;
+    this.#controller.destroy();
+    this.#controller = new ToolbarController(
+      this.#editor,
+      () => {
+        this.#scheduleRender();
+      },
+      this.#layout
+    );
+    this.#controller.subscribe();
+    this.#lastGroupsRef = null;
+    this.#scheduleRender();
+  }
+  setIcons(icons) {
+    if (this.#destroyed) return;
+    this.#iconCache.setIcons(icons);
+    this.#lastGroupsRef = null;
+    this.#scheduleRender();
+  }
+  closeDropdown() {
+    if (this.#destroyed) return;
+    this.#controller.closeDropdown();
+  }
+  destroy() {
+    if (this.#destroyed) return;
+    this.#destroyed = true;
+    cancelAnimationFrame(this.#renderRaf);
+    this.#abortCtl.abort();
+    this.#cleanupFloating?.();
+    this.#cleanupFloating = null;
+    this.#controller.destroy();
+    this.#dropdownPanelEl?.remove();
+    this.#dropdownPanelEl = null;
+    this.host.replaceChildren();
+    this.#buttonEls.clear();
+  }
+  // === Lifecycle helpers ===
+  #attachListeners() {
+    const { signal } = this.#abortCtl;
+    document.addEventListener(
+      "mousedown",
+      (e) => {
+        if (!this.#controller.openDropdown) return;
+        const target = e.target;
+        if (this.host.contains(target)) return;
+        if (this.#dropdownPanelEl?.contains(target)) return;
+        this.closeDropdown();
+      },
+      { signal }
+    );
+    this.host.addEventListener(
+      "keydown",
+      (e) => {
+        this.#onKeyDown(e);
+      },
+      { signal }
+    );
+    this.#editorEl = this.#editor.view.dom.closest(".dm-editor");
+    this.#editorEl?.addEventListener(
+      "dm:dismiss-overlays",
+      () => {
+        if (this.#controller.openDropdown) {
+          this.closeDropdown();
+        }
+      },
+      { signal }
+    );
+  }
+  // === Render ===
+  #scheduleRender() {
+    if (this.#renderPending) return;
+    this.#renderPending = true;
+    this.#renderRaf = requestAnimationFrame(() => {
+      this.#renderPending = false;
+      if (this.#destroyed) return;
+      this.#render();
+    });
+  }
+  #render() {
+    const groups = this.#controller.groups;
+    const groupsChanged = groups !== this.#lastGroupsRef;
+    if (groupsChanged) {
+      this.#renderGroupsStructure(groups);
+      this.#lastGroupsRef = groups;
+    }
+    this.#updateButtonStates();
+    this.#renderDropdown();
+  }
+  #renderGroupsStructure(groups) {
+    this.#cleanupFloating?.();
+    this.#cleanupFloating = null;
+    this.#dropdownPanelEl = null;
+    this.host.replaceChildren();
+    this.#buttonEls.clear();
+    groups.forEach((group, gi) => {
+      if (gi > 0) {
+        const sep = document.createElement("div");
+        sep.className = "dm-toolbar-separator";
+        sep.setAttribute("role", "separator");
+        this.host.appendChild(sep);
+      }
+      const groupEl = document.createElement("div");
+      groupEl.className = "dm-toolbar-group";
+      groupEl.setAttribute("role", "group");
+      groupEl.setAttribute("aria-label", group.name || "Tools");
+      for (const item of group.items) {
+        if (item.type === "button") {
+          const btnEl = this.#createButton(item);
+          groupEl.appendChild(btnEl);
+          this.#buttonEls.set(item.name, btnEl);
+        } else if (item.type === "dropdown") {
+          const wrapper = this.#createDropdownTrigger(item);
+          groupEl.appendChild(wrapper);
+        }
+      }
+      this.host.appendChild(groupEl);
+    });
+  }
+  #createButton(item) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "dm-toolbar-button";
+    btn.innerHTML = this.#iconCache.getIcon(item.icon);
+    btn.setAttribute("aria-label", item.label);
+    btn.title = getTooltip(item);
+    if (item.style) btn.setAttribute("style", item.style);
+    btn.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+    });
+    btn.addEventListener("click", (e) => {
+      this.#onButtonClick(item, e);
+    });
+    btn.addEventListener("focus", () => {
+      this.#onButtonFocus(item.name);
+    });
+    return btn;
+  }
+  #createDropdownTrigger(dd) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "dm-toolbar-dropdown-wrapper";
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "dm-toolbar-button dm-toolbar-dropdown-trigger";
+    btn.setAttribute("aria-haspopup", "true");
+    btn.setAttribute("aria-label", dd.label);
+    btn.title = dd.label;
+    btn.setAttribute("data-dropdown", dd.name);
+    btn.innerHTML = this.#resolveDropdownTriggerHtml(dd);
+    btn.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+    });
+    btn.addEventListener("click", () => {
+      this.#onDropdownToggle(dd);
+    });
+    btn.addEventListener("focus", () => {
+      this.#onButtonFocus(dd.name);
+    });
+    wrapper.appendChild(btn);
+    this.#buttonEls.set(dd.name, btn);
+    return wrapper;
+  }
+  #resolveDropdownTriggerHtml(dd) {
+    const activeItem = dd.items.find((sub) => this.#controller.activeMap.get(sub.name));
+    if (dd.dynamicLabel && !activeItem && dd.computedStyleProperty) {
+      let computed;
+      if (dd.computedStyleProperty === "font-family") {
+        computed = getInlineStyleAtCursor(this.#editor, dd.computedStyleProperty);
+        if (computed) {
+          const first = computed.split(",")[0]?.replace(/['"]+/g, "").trim();
+          computed = first ?? null;
+        }
+      } else {
+        computed = getComputedStyleAtCursor(this.#editor, dd.computedStyleProperty);
+      }
+      if (computed) {
+        return `<span class="dm-toolbar-trigger-label">${computed}</span>${DROPDOWN_CARET}`;
+      }
+    }
+    return this.#iconCache.getDropdownTriggerHtml(dd, activeItem);
+  }
+  #updateButtonStates() {
+    const groups = this.#controller.groups;
+    const focusedIndex = this.#controller.focusedIndex;
+    for (const group of groups) {
+      for (const item of group.items) {
+        if (item.type === "button") {
+          this.#updateButton(item, focusedIndex);
+        } else if (item.type === "dropdown") {
+          this.#updateDropdownTrigger(item, focusedIndex);
+        }
+      }
+    }
+  }
+  #updateButton(item, focusedIndex) {
+    const btn = this.#buttonEls.get(item.name);
+    if (!btn) return;
+    const isActive = this.#controller.activeMap.get(item.name) ?? false;
+    const isDisabled = this.#controller.disabledMap.get(item.name) ?? false;
+    const flat = this.#controller.getFlatIndex(item.name);
+    btn.classList.toggle("dm-toolbar-button--active", isActive);
+    btn.disabled = isDisabled;
+    btn.setAttribute("aria-pressed", String(isActive));
+    btn.tabIndex = flat === focusedIndex ? 0 : -1;
+    if (item.emitEvent) {
+      const expanded = this.#controller.expandedMap.get(item.name) === true;
+      if (expanded) {
+        btn.setAttribute("aria-expanded", "true");
+      } else {
+        btn.removeAttribute("aria-expanded");
+      }
+    }
+  }
+  #updateDropdownTrigger(dd, focusedIndex) {
+    const btn = this.#buttonEls.get(dd.name);
+    if (!btn) return;
+    const isDisabled = this.#controller.disabledMap.get(dd.name) ?? false;
+    const isOpen = this.#controller.openDropdown === dd.name;
+    const flat = this.#controller.getFlatIndex(dd.name);
+    const isDropdownActive = dd.layout !== "grid" && !dd.dynamicLabel && dd.items.some((sub) => this.#controller.activeMap.get(sub.name) ?? false);
+    btn.classList.toggle("dm-toolbar-button--active", isDropdownActive);
+    btn.disabled = isDisabled;
+    btn.setAttribute("aria-expanded", String(isOpen));
+    btn.tabIndex = flat === focusedIndex ? 0 : -1;
+    const newHtml = this.#resolveDropdownTriggerHtml(dd);
+    if (btn.innerHTML !== newHtml) {
+      btn.innerHTML = newHtml;
+    }
+  }
+  #renderDropdown() {
+    const openName = this.#controller.openDropdown;
+    const currentPanel = this.#dropdownPanelEl;
+    if (openName === null && currentPanel === null) return;
+    if (openName === null) {
+      this.#cleanupFloating?.();
+      this.#cleanupFloating = null;
+      currentPanel?.remove();
+      this.#dropdownPanelEl = null;
+      return;
+    }
+    const dd = this.#findDropdown(openName);
+    if (!dd) return;
+    if (currentPanel?.dataset["dropdownPanel"] === openName) return;
+    this.#cleanupFloating?.();
+    this.#cleanupFloating = null;
+    currentPanel?.remove();
+    const panel = this.#createDropdownPanel(dd);
+    const trigger = this.#buttonEls.get(dd.name);
+    if (!trigger) return;
+    trigger.parentElement?.appendChild(panel);
+    this.#dropdownPanelEl = panel;
+    requestAnimationFrame(() => {
+      if (this.#destroyed || !panel.isConnected) return;
+      const placement = dd.layout === "grid" ? "bottom" : "bottom-start";
+      this.#cleanupFloating = positionFloatingOnce(trigger, panel, {
+        placement,
+        offsetValue: 4
+      });
+    });
+    this.dispatchEvent(new CustomEvent("dropdownopen", { detail: { name: openName } }));
+  }
+  #createDropdownPanel(dd) {
+    const panel = document.createElement("div");
+    panel.dataset["dropdownPanel"] = dd.name;
+    panel.setAttribute("role", "menu");
+    if (dd.layout === "grid") {
+      panel.className = "dm-toolbar-dropdown-panel dm-color-palette";
+      panel.style.setProperty("--dm-palette-columns", String(dd.gridColumns ?? 10));
+      for (const sub of dd.items) {
+        if (sub.color) {
+          const btn = document.createElement("button");
+          btn.type = "button";
+          btn.className = "dm-color-swatch";
+          if (this.#controller.activeMap.get(sub.name)) {
+            btn.classList.add("dm-color-swatch--active");
+          }
+          btn.setAttribute("role", "menuitem");
+          btn.tabIndex = -1;
+          btn.setAttribute("aria-label", sub.label);
+          btn.title = sub.label;
+          btn.style.backgroundColor = sub.color;
+          btn.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+          });
+          btn.addEventListener("click", (e) => {
+            this.#onDropdownItemClick(sub, e);
+          });
+          panel.appendChild(btn);
+        } else {
+          const btn = document.createElement("button");
+          btn.type = "button";
+          btn.className = "dm-color-palette-reset";
+          btn.setAttribute("role", "menuitem");
+          btn.tabIndex = -1;
+          btn.setAttribute("aria-label", sub.label);
+          btn.innerHTML = this.#iconCache.getItemContent(sub.icon, sub.label);
+          btn.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+          });
+          btn.addEventListener("click", (e) => {
+            this.#onDropdownItemClick(sub, e);
+          });
+          panel.appendChild(btn);
+        }
+      }
+      return panel;
+    }
+    panel.className = "dm-toolbar-dropdown-panel";
+    if (dd.displayMode) panel.setAttribute("data-display-mode", dd.displayMode);
+    for (const sub of dd.items) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "dm-toolbar-dropdown-item";
+      if (this.#controller.activeMap.get(sub.name)) {
+        btn.classList.add("dm-toolbar-dropdown-item--active");
+      }
+      btn.setAttribute("role", "menuitem");
+      btn.tabIndex = -1;
+      btn.setAttribute("aria-label", sub.label);
+      btn.title = sub.label;
+      btn.innerHTML = this.#iconCache.getItemContent(sub.icon, sub.label, dd.displayMode);
+      if (sub.style) btn.setAttribute("style", sub.style);
+      btn.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+      });
+      btn.addEventListener("click", (e) => {
+        this.#onDropdownItemClick(sub, e);
+      });
+      panel.appendChild(btn);
+    }
+    return panel;
+  }
+  #findDropdown(name) {
+    for (const group of this.#controller.groups) {
+      for (const item of group.items) {
+        if (item.type === "dropdown" && item.name === name) {
+          return item;
+        }
+      }
+    }
+    return null;
+  }
+  // === Event handlers ===
+  #onButtonClick(item, event) {
+    if (this.#controller.openDropdown) {
+      this.closeDropdown();
+    }
+    if (item.emitEvent) {
+      const target = event.target;
+      const anchor = target?.closest(".dm-toolbar-button") ?? target ?? void 0;
+      this.#editor.emit(
+        item.emitEvent,
+        { anchorElement: anchor }
+      );
+      return;
+    }
+    this.#controller.executeCommand(item);
+    requestAnimationFrame(() => {
+      this.#editor.view.focus();
+    });
+  }
+  #onDropdownToggle(dd) {
+    const wasOpen = this.#controller.openDropdown === dd.name;
+    if (wasOpen) {
+      this.closeDropdown();
+      this.dispatchEvent(new CustomEvent("dropdownclose", { detail: { name: dd.name } }));
+      return;
+    }
+    if (this.#controller.openDropdown) {
+      const prev = this.#controller.openDropdown;
+      this.dispatchEvent(new CustomEvent("dropdownclose", { detail: { name: prev } }));
+    }
+    this.#cleanupFloating?.();
+    this.#cleanupFloating = null;
+    this.#controller.toggleDropdown(dd.name);
+  }
+  #onDropdownItemClick(item, event) {
+    let anchor;
+    if (item.emitEvent) {
+      const wrapper = event.target.closest(".dm-toolbar-dropdown-wrapper");
+      anchor = wrapper?.querySelector(".dm-toolbar-dropdown-trigger") ?? void 0;
+    }
+    this.closeDropdown();
+    if (item.emitEvent) {
+      this.#editor.emit(
+        item.emitEvent,
+        { anchorElement: anchor }
+      );
+    } else {
+      this.#controller.executeCommand(item);
+    }
+    requestAnimationFrame(() => {
+      this.#editor.view.focus();
+    });
+  }
+  #onButtonFocus(name) {
+    const index = this.#controller.getFlatIndex(name);
+    if (index >= 0) {
+      this.#controller.setFocusedIndex(index);
+    }
+  }
+  // === Keyboard navigation ===
+  #onKeyDown(event) {
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault();
+        this.#controller.navigateNext();
+        this.#focusCurrentButton();
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        this.#controller.navigatePrev();
+        this.#focusCurrentButton();
+        break;
+      case "ArrowDown": {
+        event.preventDefault();
+        if (this.#controller.openDropdown) {
+          this.#focusDropdownItem(1);
+        } else {
+          const btn = document.activeElement;
+          if (btn instanceof HTMLElement && btn.getAttribute("aria-haspopup") && this.host.contains(btn)) {
+            btn.click();
+            requestAnimationFrame(() => {
+              this.#focusDropdownItem(0, true);
+            });
+          }
+        }
+        break;
+      }
+      case "ArrowUp":
+        event.preventDefault();
+        if (this.#controller.openDropdown) {
+          this.#focusDropdownItem(-1);
+        }
+        break;
+      case "Home":
+        event.preventDefault();
+        this.#controller.navigateFirst();
+        this.#focusCurrentButton();
+        break;
+      case "End":
+        event.preventDefault();
+        this.#controller.navigateLast();
+        this.#focusCurrentButton();
+        break;
+      case "Escape":
+        if (this.#controller.openDropdown) {
+          event.preventDefault();
+          this.closeDropdown();
+          this.#focusCurrentButton();
+        }
+        break;
+    }
+  }
+  #focusCurrentButton() {
+    const buttons = this.host.querySelectorAll(".dm-toolbar-button");
+    const btn = buttons.item(this.#controller.focusedIndex);
+    btn.focus();
+  }
+  #focusDropdownItem(direction, first) {
+    const panel = this.#dropdownPanelEl;
+    if (!panel) return;
+    const items = Array.from(panel.querySelectorAll('[role="menuitem"]'));
+    if (!items.length) return;
+    if (first) {
+      items[0]?.focus();
+      return;
+    }
+    const current = document.activeElement;
+    const idx = current instanceof HTMLElement ? items.indexOf(current) : -1;
+    const next = idx === -1 ? direction > 0 ? 0 : items.length - 1 : (idx + direction + items.length) % items.length;
+    items[next]?.focus();
+  }
+};
+
+// src/bubble-menu/itemResolver.ts
+function buildItemMaps(editor) {
+  const itemMap = /* @__PURE__ */ new Map();
+  const dropdownMap = /* @__PURE__ */ new Map();
+  for (const item of editor.toolbarItems) {
+    if (item.type === "button") {
+      itemMap.set(item.name, item);
+    } else if (item.type === "dropdown") {
+      dropdownMap.set(item.name, item);
+      for (const sub of item.items) {
+        itemMap.set(sub.name, sub);
+      }
+    }
+  }
+  return {
+    itemMap,
+    dropdownMap,
+    bubbleDefaults: buildBubbleDefaults(editor)
+  };
+}
+function buildBubbleDefaults(editor) {
+  const byCtx = /* @__PURE__ */ new Map();
+  const addItem = (btn) => {
+    const ctx = btn["bubbleMenu"];
+    if (!ctx) return;
+    let arr = byCtx.get(ctx);
+    if (!arr) {
+      arr = [];
+      byCtx.set(ctx, arr);
+    }
+    arr.push(btn);
+  };
+  for (const item of editor.toolbarItems) {
+    if (item.type === "button") addItem(item);
+    else if (item.type === "dropdown") {
+      for (const sub of item.items) addItem(sub);
+    }
+  }
+  const result = /* @__PURE__ */ new Map();
+  for (const [ctx, ctxItems] of byCtx) {
+    ctxItems.sort((a, b) => (b.priority ?? 100) - (a.priority ?? 100));
+    const list = [];
+    let lastGroup;
+    let sepIdx = 0;
+    for (const item of ctxItems) {
+      if (lastGroup !== void 0 && item.group !== lastGroup) {
+        list.push({ type: "separator", name: `bsep-${String(sepIdx++)}` });
+      }
+      list.push(item);
+      lastGroup = item.group;
+    }
+    result.set(ctx, list);
+  }
+  return result;
+}
+function resolveNames(names, itemMap, dropdownMap) {
+  const result = [];
+  let sepIdx = 0;
+  for (const name of names) {
+    if (name === "|") {
+      result.push({ type: "separator", name: `sep-${String(sepIdx++)}` });
+      continue;
+    }
+    const dropdown = dropdownMap.get(name);
+    if (dropdown) {
+      result.push(dropdown);
+      continue;
+    }
+    const item = itemMap.get(name);
+    if (item) result.push(item);
+  }
+  return result;
+}
+function getFormatItems(itemMap) {
+  return Array.from(itemMap.values()).filter((item) => item.group === "format").sort((a, b) => (b.priority ?? 100) - (a.priority ?? 100));
+}
+function detectContext(selection, ctxs) {
+  if ("$anchorCell" in selection) return null;
+  if (selection.node) return selection.node.type.name;
+  if (selection.empty) return null;
+  const fromCell = findCellNode(selection.$from);
+  if (fromCell) {
+    const toCell = findCellNode(selection.$to);
+    if (toCell && fromCell !== toCell) return null;
+    return "table";
+  }
+  const fromName = selection.$from.parent.type.name;
+  if (fromName in ctxs) return fromName;
+  if ("text" in ctxs && selection.$from.parent.type.spec.marks !== "") return "text";
+  const toName = selection.$to.parent.type.name;
+  if (toName in ctxs) return toName;
+  if ("text" in ctxs && selection.$to.parent.type.spec.marks !== "") return "text";
+  return null;
+}
+function filterBySchema(editor, contextName, schemaItems) {
+  if (contextName === "text" || contextName === "table") return schemaItems;
+  const schema = editor.state.schema;
+  if (!schema) return schemaItems;
+  const nodeType = schema.nodes[contextName];
+  if (!nodeType) return schemaItems;
+  return schemaItems.filter((item) => {
+    const markName = typeof item.isActive === "string" ? item.isActive : null;
+    if (!markName) return true;
+    const markType = schema.marks[markName];
+    if (!markType) return true;
+    return nodeType.allowsMarkType(markType);
+  });
+}
+function isInsideTableCell($pos) {
+  for (let d = $pos.depth; d > 0; d--) {
+    const name = $pos.node(d).type.name;
+    if (name === "tableCell" || name === "tableHeader") return true;
+  }
+  return false;
+}
+function findCellNode(pos) {
+  for (let d = pos.depth; d > 0; d--) {
+    const node = pos.node(d);
+    if (node.type.name === "tableCell" || node.type.name === "tableHeader") return node;
+  }
+  return null;
+}
+
+// src/bubble-menu/trailingState.ts
+var INITIAL_TRAILING_STATE = {
+  isNodeSelection: false,
+  showColorPickerButton: false,
+  showBlockMenuButton: false,
+  blockMenuButtonDisabled: false,
+  currentTextColorVar: null,
+  currentBgColorVar: null,
+  hasAnyColor: false
+};
+function computeTrailingState(editor, opts) {
+  const sel = editor.state.selection;
+  const isNode = !!sel.node;
+  let blockMenuDisabled = false;
+  if (opts.hasBlockContextMenu) {
+    const { $from, $to } = editor.state.selection;
+    if ($from.depth < 1 || $to.depth < 1) {
+      blockMenuDisabled = true;
+    } else {
+      blockMenuDisabled = $from.before(1) !== $to.before(1);
+    }
+  }
+  let textVar = null;
+  let bgVar = null;
+  let hasAny = false;
+  if (opts.hasNotionColorPicker) {
+    const mark = editor.state.selection.$from.marks().find((m) => m.type.name === "textStyle");
+    const attrs = mark?.attrs ?? {};
+    const tToken = attrs.colorToken ?? null;
+    const bToken = attrs.backgroundColorToken ?? null;
+    textVar = tToken ? `var(--dm-block-text-${tToken})` : null;
+    bgVar = bToken ? `var(--dm-block-bg-${bToken})` : null;
+    hasAny = tToken !== null || bToken !== null;
+  }
+  return {
+    isNodeSelection: isNode,
+    showColorPickerButton: opts.hasNotionColorPicker,
+    showBlockMenuButton: opts.hasBlockContextMenu,
+    blockMenuButtonDisabled: blockMenuDisabled,
+    currentTextColorVar: textVar,
+    currentBgColorVar: bgVar,
+    hasAnyColor: hasAny
+  };
+}
+
+// src/bubble-menu/DomternalBubbleMenu.ts
+var DROPDOWN_CARET2 = '<svg class="dm-dropdown-caret" width="10" height="10" viewBox="0 0 10 10"><path d="M2 4l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+var DomternalBubbleMenu = class extends EventTarget {
+  host;
+  get editor() {
+    return this.#editor;
+  }
+  /** Current trailing-button state snapshot. */
+  get trailing() {
+    return this.#trailing;
+  }
+  /** Currently open dropdown name (e.g. text-align), or `null`. */
+  get openDropdown() {
+    return this.#openDropdown;
+  }
+  #editor;
+  #pluginKey;
+  #destroyed = false;
+  /** Optional consumer-provided DOM appended after default items + trailing. */
+  #customContent;
+  // Configuration cached from constructor
+  #shouldShowOpt;
+  #placement;
+  #offset;
+  #updateDelay;
+  #explicitItems;
+  #explicitContexts;
+  #icons;
+  // Editor-derived caches (set once in #init)
+  #maps = null;
+  #hasNotionColorPicker = false;
+  #hasBlockContextMenu = false;
+  #effectiveContexts;
+  #defaultItemList = [];
+  #transactionHandler = null;
+  // Live state
+  #resolvedItems = [];
+  #activeMap = /* @__PURE__ */ new Map();
+  #disabledMap = /* @__PURE__ */ new Map();
+  #trailing = { ...INITIAL_TRAILING_STATE };
+  // Dropdown state (text-align dropdown inside bubble menu)
+  #openDropdown = null;
+  #dropdownPanelEl = null;
+  #cleanupDropdownFloating = null;
+  #dropdownAbortCtl = null;
+  #renderPending = false;
+  #renderRaf = 0;
+  constructor(host, options) {
+    super();
+    assertBrowser("DomternalBubbleMenu");
+    if (!(host instanceof HTMLElement)) {
+      throw new TypeError(
+        '[DomternalBubbleMenu] host must be an HTMLElement. Pass a DOM node (e.g. document.querySelector("#bubble")).'
+      );
+    }
+    if (!options.editor) {
+      throw new TypeError("[DomternalBubbleMenu] options.editor is required.");
+    }
+    this.host = host;
+    this.#editor = options.editor;
+    this.#shouldShowOpt = options.shouldShow;
+    this.#placement = options.placement ?? "top";
+    this.#offset = options.offset ?? 8;
+    this.#updateDelay = options.updateDelay ?? 0;
+    this.#explicitItems = options.items;
+    this.#explicitContexts = options.contexts;
+    this.#icons = options.icons;
+    this.#customContent = options.customContent;
+    this.#pluginKey = createPluginKey("vanillaBubbleMenu");
+    this.host.classList.add("dm-bubble-menu");
+    this.host.setAttribute("role", "toolbar");
+    this.host.setAttribute("aria-label", "Text formatting");
+    this.#init();
+  }
+  // === Public API ===
+  /**
+   * Emit `notionColorOpen` with the given anchor element. Listened to by
+   * `DomternalNotionColorPicker` (Phase 4) which positions its panel against
+   * the anchor. Typically called by the wrapper's internal "A" trigger but
+   * exposed publicly for power users with custom UIs.
+   */
+  openColorPicker(anchor) {
+    if (this.#destroyed) return;
+    this.#editor.emit(
+      "notionColorOpen",
+      { anchorElement: anchor }
+    );
+  }
+  /**
+   * Open the block context menu against the cursor's containing block.
+   * Dispatches `dm:block-context-menu-open` on `.dm-editor`. The
+   * `BlockContextMenu` extension listens and positions itself against the
+   * provided anchor.
+   *
+   * Walks one level up when the cursor's textblock is not a direct doc
+   * child (e.g. cursor in `listItem > paragraph` targets the `listItem`),
+   * so "Delete" / "Turn into" operate on the visual block.
+   */
+  openBlockContextMenu(anchor) {
+    if (this.#destroyed) return;
+    const $from = this.#editor.state.selection.$from;
+    if ($from.depth < 1) return;
+    const depth = $from.depth > 1 && $from.node($from.depth - 1).type.name !== "doc" ? $from.depth - 1 : $from.depth;
+    const blockPos = $from.before(depth);
+    const editorEl = this.#editor.view.dom.closest(".dm-editor");
+    editorEl?.dispatchEvent(
+      new CustomEvent("dm:block-context-menu-open", {
+        bubbles: false,
+        detail: { blockPos, anchorElement: anchor }
+      })
+    );
+  }
+  /**
+   * Replace the explicit item list. When `undefined`, falls back to
+   * context-aware resolution (per `contexts` or `defaultBubbleContexts`).
+   * Re-renders on next transaction; call manually if needed:
+   * `editor.dispatch(editor.state.tr)` to force an immediate re-resolve.
+   */
+  setItems(items) {
+    if (this.#destroyed) return;
+    this.#explicitItems = items;
+    if (this.#maps) {
+      this.#defaultItemList = items ? resolveNames(items, this.#maps.itemMap, this.#maps.dropdownMap) : resolveNames(["bold", "italic", "underline"], this.#maps.itemMap, this.#maps.dropdownMap);
+    }
+    this.#updateResolvedItems();
+    this.#updateStates();
+    this.#scheduleRender();
+  }
+  /**
+   * Replace context map. When `undefined`, defaults to
+   * `defaultBubbleContexts(editor)`. Note: `shouldShow` is baked into the
+   * plugin at construction; this only changes WHICH items render once the
+   * menu is visible.
+   */
+  setContexts(contexts) {
+    if (this.#destroyed) return;
+    this.#explicitContexts = contexts;
+    this.#effectiveContexts = contexts ?? (this.#explicitItems ? void 0 : defaultBubbleContexts(this.#editor));
+    this.#updateResolvedItems();
+    this.#updateStates();
+    this.#scheduleRender();
+  }
+  /** Replace the icon set. `undefined` restores default Phosphor icons. */
+  setIcons(icons) {
+    if (this.#destroyed) return;
+    this.#icons = icons;
+    this.#scheduleRender();
+  }
+  /** Close any open dropdown (text-align). No-op if nothing is open. */
+  closeDropdown() {
+    if (this.#openDropdown === null) return;
+    const prev = this.#openDropdown;
+    this.#openDropdown = null;
+    this.#detachDropdown();
+    this.dispatchEvent(new CustomEvent("dropdownclose", { detail: { name: prev } }));
+    this.#scheduleRender();
+  }
+  destroy() {
+    if (this.#destroyed) return;
+    this.#destroyed = true;
+    cancelAnimationFrame(this.#renderRaf);
+    this.#detachDropdown();
+    if (this.#transactionHandler) {
+      this.#editor.off("transaction", this.#transactionHandler);
+      this.#transactionHandler = null;
+    }
+    if (!this.#editor.isDestroyed) {
+      this.#editor.unregisterPlugin(this.#pluginKey);
+    }
+    this.host.replaceChildren();
+  }
+  // === Init ===
+  #init() {
+    const ed = this.#editor;
+    if (ed.isDestroyed) return;
+    const exts = ed.extensionManager.extensions;
+    this.#hasNotionColorPicker = exts.some((e) => e.name === "notionColorPicker");
+    this.#hasBlockContextMenu = exts.some((e) => e.name === "blockContextMenu");
+    this.#maps = buildItemMaps(ed);
+    this.#effectiveContexts = this.#explicitContexts ?? (this.#explicitItems ? void 0 : defaultBubbleContexts(ed));
+    this.#defaultItemList = this.#explicitItems ? resolveNames(this.#explicitItems, this.#maps.itemMap, this.#maps.dropdownMap) : resolveNames(["bold", "italic", "underline"], this.#maps.itemMap, this.#maps.dropdownMap);
+    const shouldShow = this.#shouldShowOpt ?? this.#buildDefaultShouldShow();
+    const plugin = createBubbleMenuPlugin({
+      pluginKey: this.#pluginKey,
+      editor: ed,
+      element: this.host,
+      shouldShow,
+      placement: this.#placement,
+      offset: this.#offset,
+      updateDelay: this.#updateDelay
+    });
+    ed.registerPlugin(plugin);
+    this.#updateResolvedItems();
+    this.#updateStates();
+    this.#trailing = computeTrailingState(ed, {
+      hasNotionColorPicker: this.#hasNotionColorPicker,
+      hasBlockContextMenu: this.#hasBlockContextMenu
+    });
+    this.#transactionHandler = () => {
+      if (this.#destroyed) return;
+      this.#updateResolvedItems();
+      this.#updateStates();
+      this.#trailing = computeTrailingState(ed, {
+        hasNotionColorPicker: this.#hasNotionColorPicker,
+        hasBlockContextMenu: this.#hasBlockContextMenu
+      });
+      this.#scheduleRender();
+    };
+    ed.on("transaction", this.#transactionHandler);
+    this.#render();
+  }
+  #buildDefaultShouldShow() {
+    const contexts = this.#effectiveContexts;
+    const defaults = this.#maps?.bubbleDefaults;
+    if (contexts) {
+      return ({ state }) => {
+        const ctx = detectContext(
+          state.selection,
+          contexts
+        );
+        if (!ctx) return false;
+        if (ctx in contexts) {
+          const val = contexts[ctx];
+          if (val === null) return false;
+          return val === true || Array.isArray(val) && val.length > 0;
+        }
+        return defaults?.has(ctx) ?? false;
+      };
+    }
+    return ({ state }) => {
+      const sel = state.selection;
+      if (sel.empty) return false;
+      if (sel.node) return defaults?.has(sel.node.type.name) ?? false;
+      if (isInsideTableCell(sel.$from)) return false;
+      return sel.$from.parent.type.spec.marks !== "" || sel.$to.parent.type.spec.marks !== "";
+    };
+  }
+  // === State updates (called per transaction) ===
+  #updateResolvedItems() {
+    if (!this.#maps) return;
+    const ed = this.#editor;
+    const contexts = this.#effectiveContexts;
+    if (contexts) {
+      const ctx = detectContext(
+        ed.state.selection,
+        contexts
+      );
+      if (!ctx) {
+        this.#resolvedItems = [];
+        return;
+      }
+      if (ctx in contexts) {
+        const val = contexts[ctx];
+        if (val === null || Array.isArray(val) && val.length === 0) {
+          this.#resolvedItems = [];
+          return;
+        }
+        if (val === true) {
+          this.#resolvedItems = filterBySchema(ed, ctx, getFormatItems(this.#maps.itemMap));
+          return;
+        }
+        if (Array.isArray(val)) {
+          const resolved = resolveNames(val, this.#maps.itemMap, this.#maps.dropdownMap);
+          const buttons = resolved.filter(
+            (i) => i.type !== "separator"
+          );
+          const allowed = new Set(filterBySchema(ed, ctx, buttons).map((b) => b.name));
+          this.#resolvedItems = resolved.filter(
+            (i) => i.type === "separator" || allowed.has(i.name)
+          );
+          return;
+        }
+      }
+      this.#resolvedItems = this.#maps.bubbleDefaults.get(ctx) ?? [];
+      return;
+    }
+    const sel = ed.state.selection;
+    if (sel.node && this.#maps.bubbleDefaults.has(sel.node.type.name)) {
+      this.#resolvedItems = this.#maps.bubbleDefaults.get(sel.node.type.name) ?? [];
+    } else {
+      this.#resolvedItems = this.#defaultItemList;
+    }
+  }
+  #updateStates() {
+    const ed = this.#editor;
+    let canProxy = null;
+    try {
+      canProxy = ed.can();
+    } catch {
+      canProxy = null;
+    }
+    const trackButton = (btn) => {
+      this.#activeMap.set(btn.name, ToolbarController.resolveActive(ed, btn));
+      try {
+        const canCmd = typeof btn.command === "string" ? canProxy?.[btn.command] : void 0;
+        this.#disabledMap.set(
+          btn.name,
+          canCmd ? !(btn.commandArgs?.length ? canCmd(...btn.commandArgs) : canCmd()) : false
+        );
+      } catch {
+        this.#disabledMap.set(btn.name, false);
+      }
+    };
+    for (const item of this.#resolvedItems) {
+      if (item.type === "separator") continue;
+      if (item.type === "dropdown") {
+        for (const sub of item.items) trackButton(sub);
+        continue;
+      }
+      trackButton(item);
+    }
+  }
+  // === Render ===
+  #scheduleRender() {
+    if (this.#renderPending) return;
+    this.#renderPending = true;
+    this.#renderRaf = requestAnimationFrame(() => {
+      this.#renderPending = false;
+      if (this.#destroyed) return;
+      this.#render();
+    });
+  }
+  #render() {
+    this.host.replaceChildren();
+    this.#cleanupDropdownFloating?.();
+    this.#cleanupDropdownFloating = null;
+    this.#dropdownAbortCtl?.abort();
+    this.#dropdownAbortCtl = null;
+    this.#dropdownPanelEl = null;
+    if (this.#openDropdown !== null) {
+      const stillExists = this.#resolvedItems.some(
+        (item) => item.type === "dropdown" && item.name === this.#openDropdown
+      );
+      if (!stillExists) this.#openDropdown = null;
+    }
+    for (const item of this.#resolvedItems) {
+      if (item.type === "separator") {
+        this.host.appendChild(this.#createSeparator(item.name));
+      } else if (item.type === "dropdown") {
+        this.host.appendChild(this.#createDropdownTrigger(item));
+      } else {
+        this.host.appendChild(this.#createButton(item));
+      }
+    }
+    const t = this.#trailing;
+    if (t.showColorPickerButton && !t.isNodeSelection) {
+      this.host.appendChild(this.#createSeparator("trailing-sep-color"));
+      this.host.appendChild(this.#createColorTrigger());
+    }
+    if (t.showBlockMenuButton && !t.isNodeSelection) {
+      this.host.appendChild(this.#createSeparator("trailing-sep-block"));
+      this.host.appendChild(this.#createBlockMenuTrigger());
+    }
+    if (this.#customContent) {
+      this.host.appendChild(this.#customContent);
+    }
+  }
+  #createSeparator(name) {
+    const sep = document.createElement("span");
+    sep.className = "dm-toolbar-separator";
+    sep.setAttribute("role", "separator");
+    sep.dataset["name"] = name;
+    return sep;
+  }
+  #createButton(item) {
+    const isActive = this.#activeMap.get(item.name) ?? false;
+    const isDisabled = this.#disabledMap.get(item.name) ?? false;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "dm-toolbar-button";
+    if (isActive) btn.classList.add("dm-toolbar-button--active");
+    btn.disabled = isDisabled;
+    btn.setAttribute("aria-label", item.label);
+    btn.setAttribute("aria-pressed", String(isActive));
+    btn.title = item.label;
+    btn.innerHTML = resolveIcon(item.icon, this.#icons);
+    btn.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+    });
+    btn.addEventListener("click", (e) => {
+      this.#onButtonClick(item, e);
+    });
+    return btn;
+  }
+  #createDropdownTrigger(dd) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "dm-toolbar-dropdown-wrapper";
+    wrapper.dataset["dropdownWrapper"] = dd.name;
+    const dropdownActive = dd.items.some((sub) => this.#activeMap.get(sub.name) ?? false);
+    const activeChild = dd.dynamicIcon ? dd.items.find((sub) => this.#activeMap.get(sub.name) ?? false) : void 0;
+    const triggerIcon = activeChild?.icon ?? dd.icon;
+    const triggerHtml = resolveIcon(triggerIcon, this.#icons) + DROPDOWN_CARET2;
+    const trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = "dm-toolbar-button dm-toolbar-dropdown-trigger";
+    if (dropdownActive) trigger.classList.add("dm-toolbar-button--active");
+    trigger.setAttribute("aria-haspopup", "true");
+    trigger.setAttribute("aria-expanded", String(this.#openDropdown === dd.name));
+    trigger.setAttribute("aria-label", dd.label);
+    trigger.title = dd.label;
+    trigger.dataset["dropdown"] = dd.name;
+    trigger.innerHTML = triggerHtml;
+    trigger.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+    });
+    trigger.addEventListener("click", () => {
+      this.#onDropdownToggle(dd);
+    });
+    wrapper.appendChild(trigger);
+    if (this.#openDropdown === dd.name) {
+      const panel = this.#createDropdownPanel(dd);
+      wrapper.appendChild(panel);
+      this.#dropdownPanelEl = panel;
+      this.#attachDropdownListeners(trigger, panel);
+    }
+    return wrapper;
+  }
+  #createDropdownPanel(dd) {
+    const panel = document.createElement("div");
+    panel.className = "dm-toolbar-dropdown-panel";
+    panel.setAttribute("role", "menu");
+    panel.setAttribute("data-dm-editor-ui", "");
+    panel.dataset["dropdownPanel"] = dd.name;
+    for (const sub of dd.items) {
+      const subActive = this.#activeMap.get(sub.name) ?? false;
+      const subHtml = `${resolveIcon(sub.icon, this.#icons)} ${sub.label}`;
+      const subBtn = document.createElement("button");
+      subBtn.type = "button";
+      subBtn.className = "dm-toolbar-dropdown-item";
+      if (subActive) subBtn.classList.add("dm-toolbar-dropdown-item--active");
+      subBtn.setAttribute("role", "menuitem");
+      subBtn.setAttribute("aria-label", sub.label);
+      subBtn.innerHTML = subHtml;
+      subBtn.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+      });
+      subBtn.addEventListener("click", () => {
+        this.#onDropdownItemClick(sub);
+      });
+      panel.appendChild(subBtn);
+    }
+    return panel;
+  }
+  #createColorTrigger() {
+    const t = this.#trailing;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "dm-toolbar-button dm-ncp-trigger";
+    if (t.hasAnyColor) btn.classList.add("dm-toolbar-button--active");
+    btn.title = "Text and background color";
+    btn.setAttribute("aria-label", "Text and background color");
+    btn.setAttribute("aria-haspopup", "dialog");
+    const glyph = document.createElement("span");
+    glyph.className = "dm-ncp-trigger-glyph";
+    glyph.textContent = "A";
+    if (t.currentTextColorVar) glyph.style.color = t.currentTextColorVar;
+    btn.appendChild(glyph);
+    const underline = document.createElement("span");
+    underline.className = "dm-ncp-trigger-underline";
+    if (t.currentBgColorVar) underline.style.backgroundColor = t.currentBgColorVar;
+    btn.appendChild(underline);
+    btn.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+    });
+    btn.addEventListener("click", () => {
+      this.openColorPicker(btn);
+    });
+    return btn;
+  }
+  #createBlockMenuTrigger() {
+    const t = this.#trailing;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "dm-toolbar-button";
+    btn.disabled = t.blockMenuButtonDisabled;
+    btn.title = t.blockMenuButtonDisabled ? "Block actions (select within a single block)" : "More options";
+    btn.setAttribute("aria-label", "More options");
+    btn.setAttribute("aria-haspopup", "menu");
+    btn.innerHTML = resolveIcon("dotsThree", this.#icons);
+    btn.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+    });
+    btn.addEventListener("click", () => {
+      this.openBlockContextMenu(btn);
+    });
+    return btn;
+  }
+  // === Event handlers ===
+  #onButtonClick(item, event) {
+    if (this.#openDropdown) this.closeDropdown();
+    if (item.emitEvent) {
+      const anchor = event.currentTarget ?? event.target;
+      this.#editor.emit(
+        item.emitEvent,
+        { anchorElement: anchor }
+      );
+      return;
+    }
+    ToolbarController.executeItem(this.#editor, item);
+  }
+  #onDropdownToggle(dd) {
+    if (this.#openDropdown === dd.name) {
+      this.closeDropdown();
+      return;
+    }
+    if (this.#openDropdown !== null) {
+      const prev = this.#openDropdown;
+      this.#detachDropdown();
+      this.dispatchEvent(new CustomEvent("dropdownclose", { detail: { name: prev } }));
+    }
+    this.#openDropdown = dd.name;
+    this.dispatchEvent(new CustomEvent("dropdownopen", { detail: { name: dd.name } }));
+    this.#render();
+  }
+  #onDropdownItemClick(sub) {
+    this.closeDropdown();
+    ToolbarController.executeItem(this.#editor, sub);
+    requestAnimationFrame(() => {
+      this.#editor.view.focus();
+    });
+  }
+  // === Dropdown lifecycle ===
+  #attachDropdownListeners(trigger, panel) {
+    this.#cleanupDropdownFloating?.();
+    this.#cleanupDropdownFloating = positionFloatingOnce(trigger, panel, {
+      placement: "bottom-start",
+      offsetValue: 4
+    });
+    this.#dropdownAbortCtl?.abort();
+    this.#dropdownAbortCtl = new AbortController();
+    const { signal } = this.#dropdownAbortCtl;
+    document.addEventListener(
+      "mousedown",
+      (e) => {
+        const target = e.target;
+        if (!target) return;
+        if (panel.contains(target)) return;
+        if (trigger.contains(target)) return;
+        this.closeDropdown();
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          this.closeDropdown();
+        }
+      },
+      { signal }
+    );
+    const editorEl = this.#editor.view.dom.closest(".dm-editor");
+    editorEl?.addEventListener(
+      "dm:dismiss-overlays",
+      () => {
+        this.closeDropdown();
+      },
+      { signal }
+    );
+  }
+  #detachDropdown() {
+    this.#cleanupDropdownFloating?.();
+    this.#cleanupDropdownFloating = null;
+    this.#dropdownAbortCtl?.abort();
+    this.#dropdownAbortCtl = null;
+    this.#dropdownPanelEl?.remove();
+    this.#dropdownPanelEl = null;
+  }
+};
+var DomternalFloatingMenu = class extends EventTarget {
+  host;
+  get editor() {
+    return this.#editor;
+  }
+  /**
+   * Underlying controller. Exposed for power-user introspection.
+   *
+   * `null` when `customContent` is provided (consumer owns rendering, and
+   * therefore the item-state machine). Use the `editor.floatingMenuItems`
+   * direct API in that case.
+   */
+  get controller() {
+    return this.#controller;
+  }
+  #editor;
+  #pluginKey;
+  #controller = null;
+  #icons;
+  #abortCtl = new AbortController();
+  #destroyed = false;
+  /** When `customContent` is provided, we skip controller + default render. */
+  #hasCustomContent = false;
+  #renderPending = false;
+  #renderRaf = 0;
+  constructor(host, options) {
+    super();
+    assertBrowser("DomternalFloatingMenu");
+    if (!(host instanceof HTMLElement)) {
+      throw new TypeError(
+        '[DomternalFloatingMenu] host must be an HTMLElement. Pass a DOM node (e.g. document.querySelector("#floating")).'
+      );
+    }
+    if (!options.editor) {
+      throw new TypeError("[DomternalFloatingMenu] options.editor is required.");
+    }
+    this.host = host;
+    this.#editor = options.editor;
+    this.#icons = options.icons;
+    this.#pluginKey = createPluginKey("vanillaFloatingMenu");
+    this.host.classList.add("dm-floating-menu");
+    this.host.setAttribute("role", "menu");
+    this.host.setAttribute("aria-label", "Insert block");
+    this.host.setAttribute("data-dm-editor-ui", "");
+    const plugin = createFloatingMenuPlugin({
+      pluginKey: this.#pluginKey,
+      editor: this.#editor,
+      element: this.host,
+      ...options.shouldShow !== void 0 && { shouldShow: options.shouldShow },
+      offset: options.offset ?? 0,
+      ...options.keymap !== void 0 && { keymap: options.keymap },
+      ...options.requireExplicitTrigger !== void 0 && {
+        requireExplicitTrigger: options.requireExplicitTrigger
+      }
+    });
+    this.#editor.registerPlugin(plugin);
+    if (options.customContent) {
+      this.#hasCustomContent = true;
+      this.host.appendChild(options.customContent);
+      return;
+    }
+    this.#controller = new FloatingMenuController(
+      this.#editor,
+      () => {
+        this.#scheduleRender();
+      },
+      options.items
+    );
+    this.#controller.subscribe();
+    this.host.addEventListener(
+      "keydown",
+      (e) => {
+        this.#onKeyDown(e);
+      },
+      { signal: this.#abortCtl.signal }
+    );
+    this.#render();
+  }
+  /**
+   * Swap the icon set. Re-renders to refresh button SVGs. No-op when
+   * `customContent` is in use (consumer renders their own icons).
+   */
+  setIcons(icons) {
+    if (this.#destroyed) return;
+    this.#icons = icons;
+    if (!this.#hasCustomContent) this.#scheduleRender();
+  }
+  destroy() {
+    if (this.#destroyed) return;
+    this.#destroyed = true;
+    cancelAnimationFrame(this.#renderRaf);
+    this.#abortCtl.abort();
+    this.#controller?.destroy();
+    if (!this.#editor.isDestroyed) {
+      this.#editor.unregisterPlugin(this.#pluginKey);
+    }
+    this.host.replaceChildren();
+  }
+  // === Render ===
+  #scheduleRender() {
+    if (this.#renderPending || this.#hasCustomContent) return;
+    this.#renderPending = true;
+    this.#renderRaf = requestAnimationFrame(() => {
+      this.#renderPending = false;
+      if (this.#destroyed || !this.#controller) return;
+      this.#render();
+      const focusedIdx = this.#controller.focusedIndex;
+      if (focusedIdx >= 0) {
+        queueMicrotask(() => {
+          const target = this.host.querySelector(
+            `[data-floating-menu-index="${String(focusedIdx)}"]`
+          );
+          target?.focus();
+        });
+      }
+    });
+  }
+  #render() {
+    if (!this.#controller) return;
+    this.host.replaceChildren();
+    const groups = this.#controller.groups;
+    const focusedIdx = this.#controller.focusedIndex;
+    let flatIndex = 0;
+    groups.forEach((group, gi) => {
+      if (group.name) {
+        const label = document.createElement("div");
+        label.className = "dm-floating-menu-group-label";
+        label.id = `dm-fm-g${String(gi)}`;
+        label.textContent = group.name;
+        this.host.appendChild(label);
+      }
+      const groupEl = document.createElement("div");
+      groupEl.className = "dm-floating-menu-group";
+      groupEl.setAttribute("role", "group");
+      if (group.name) groupEl.setAttribute("aria-labelledby", `dm-fm-g${String(gi)}`);
+      for (const item of group.items) {
+        const currentFlat = flatIndex;
+        flatIndex += 1;
+        const btn = this.#createItem(item, currentFlat, focusedIdx);
+        groupEl.appendChild(btn);
+      }
+      this.host.appendChild(groupEl);
+    });
+  }
+  #createItem(item, flatIndex, focusedIndex) {
+    const disabled = this.#controller?.isDisabled(item) ?? false;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "dm-floating-menu-item";
+    btn.setAttribute("role", "menuitem");
+    btn.dataset["floatingMenuItem"] = item.name;
+    btn.dataset["floatingMenuIndex"] = String(flatIndex);
+    btn.tabIndex = this.#tabIndexFor(flatIndex, focusedIndex);
+    if (disabled) btn.setAttribute("aria-disabled", "true");
+    if (item.shortcut) btn.setAttribute("aria-keyshortcuts", item.shortcut);
+    btn.disabled = disabled;
+    if (item.icon) {
+      const iconHtml = resolveIcon(item.icon, this.#icons);
+      if (iconHtml) {
+        const iconSpan = document.createElement("span");
+        iconSpan.className = "dm-floating-menu-item-icon";
+        iconSpan.setAttribute("aria-hidden", "true");
+        iconSpan.innerHTML = iconHtml;
+        btn.appendChild(iconSpan);
+      }
+    }
+    const labelSpan = document.createElement("span");
+    labelSpan.className = "dm-floating-menu-item-label";
+    labelSpan.textContent = item.label;
+    btn.appendChild(labelSpan);
+    if (item.shortcut) {
+      const shortcutSpan = document.createElement("span");
+      shortcutSpan.className = "dm-floating-menu-item-shortcut";
+      shortcutSpan.setAttribute("aria-hidden", "true");
+      shortcutSpan.textContent = item.shortcut;
+      btn.appendChild(shortcutSpan);
+    }
+    btn.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+    });
+    btn.addEventListener("click", () => {
+      this.#onItemClick(item);
+    });
+    return btn;
+  }
+  /**
+   * Roving tabindex: focused item gets 0; when no item focused, first item
+   * gets 0 (so tab traversal from outside lands naturally on the menu).
+   */
+  #tabIndexFor(flat, focused) {
+    if (flat === focused) return 0;
+    if (focused < 0 && flat === 0) return 0;
+    return -1;
+  }
+  // === Event handlers ===
+  #onItemClick(item) {
+    if (this.#destroyed || !this.#controller) return;
+    this.#controller.execute(item);
+    requestAnimationFrame(() => {
+      this.#editor.view.focus();
+    });
+  }
+  #onKeyDown(event) {
+    if (!this.#controller) return;
+    const focused = this.#controller.focusedItem();
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.#controller.next();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.#controller.prev();
+        break;
+      case "Home":
+        event.preventDefault();
+        this.#controller.first();
+        break;
+      case "End":
+        event.preventDefault();
+        this.#controller.last();
+        break;
+      case "Escape":
+        event.preventDefault();
+        event.stopPropagation();
+        this.#controller.leaveMenu();
+        this.#editor.view.focus();
+        break;
+      case "Enter":
+      case " ":
+        if (focused) {
+          event.preventDefault();
+          this.#onItemClick(focused);
+        }
+        break;
+    }
+  }
+};
+var TOKEN_LABELS = {
+  gray: "Gray",
+  brown: "Brown",
+  orange: "Orange",
+  yellow: "Yellow",
+  green: "Green",
+  blue: "Blue",
+  purple: "Purple",
+  pink: "Pink",
+  red: "Red"
+};
+var DomternalNotionColorPicker = class extends EventTarget {
+  /** The picker's panel element (created on first open, persistent for reuse). */
+  get panel() {
+    return this.#panel;
+  }
+  /**
+   * The `.dm-editor` host into which the panel mounts. Auto-resolved from
+   * `editor.view.dom.closest('.dm-editor')`. Returns `null` when the editor
+   * view is not inside a `.dm-editor` ancestor (in which case the picker
+   * silently no-ops on `open()`).
+   */
+  get host() {
+    return this.#host;
+  }
+  get editor() {
+    return this.#editor;
+  }
+  get isOpen() {
+    return this.#isOpen;
+  }
+  get currentTextToken() {
+    return this.#currentTextToken;
+  }
+  get currentBgToken() {
+    return this.#currentBgToken;
+  }
+  get palette() {
+    return this.#palette;
+  }
+  #editor;
+  #destroyed = false;
+  #isOpen = false;
+  #anchor = null;
+  /**
+   * Bubble menu container captured when the picker was opened against an
+   * anchor inside the bubble menu. Used by the virtual reference to re-resolve
+   * `.dm-ncp-trigger` when the bubble menu rebuilds its DOM on transactions
+   * and the original anchor element becomes disconnected. Null when the
+   * picker was opened from a custom UI outside the bubble menu.
+   */
+  #anchorBubbleMenu = null;
+  /** Last computed anchor rect; used as a fallback when no live anchor can be resolved. */
+  #lastAnchorRect = null;
+  #host = null;
+  #panel = null;
+  #currentTextToken = null;
+  #currentBgToken = null;
+  #palette = [];
+  #onOpen = null;
+  #onSelectionUpdate = null;
+  /** Global listeners (mousedown + keydown + selectionUpdate) bound while open. */
+  #openAbortCtl = null;
+  #cleanupFloating = null;
+  #rafIds = [];
+  constructor(options) {
+    super();
+    assertBrowser("DomternalNotionColorPicker");
+    if (!options.editor) {
+      throw new TypeError("[DomternalNotionColorPicker] options.editor is required.");
+    }
+    this.#editor = options.editor;
+    this.#host = this.#editor.view.dom.closest(".dm-editor");
+    const ext = this.#editor.extensionManager.extensions.find(
+      (e) => e.name === "notionColorPicker"
+    );
+    const extOpts = ext?.options ?? null;
+    this.#palette = extOpts?.palette ? [...extOpts.palette] : [];
+    this.#onOpen = (...args) => {
+      const detail = args[0];
+      const incoming = detail?.anchorElement;
+      if (!incoming) return;
+      this.open(incoming);
+    };
+    this.#onSelectionUpdate = () => {
+      if (!this.#isOpen) return;
+      if (!this.#anchor?.isConnected) {
+        this.close();
+        return;
+      }
+      if (this.#editor.state.selection.empty) {
+        this.close();
+      } else {
+        this.#syncFromSelection();
+        this.#updateActiveClasses();
+      }
+    };
+    this.#editor.on("notionColorOpen", this.#onOpen);
+    this.#editor.on("selectionUpdate", this.#onSelectionUpdate);
+  }
+  // === Public API ===
+  /**
+   * Open the picker against the given anchor element. Typically called
+   * implicitly via the `notionColorOpen` editor event, but exposed publicly
+   * for power users who emit the open from custom UI.
+   *
+   * Toggle semantics: calling `open(anchor)` with the SAME anchor while the
+   * picker is already open closes the picker (with refocus). Calling with a
+   * different anchor re-anchors against the new element.
+   */
+  open(anchor) {
+    if (this.#destroyed) return;
+    if (this.#isOpen && this.#isSameTrigger(anchor)) {
+      this.close({ refocus: true });
+      return;
+    }
+    this.#host ??= this.#editor.view.dom.closest(".dm-editor");
+    this.#anchor = anchor;
+    this.#anchorBubbleMenu = anchor.closest(".dm-bubble-menu");
+    this.#lastAnchorRect = anchor.getBoundingClientRect();
+    this.#syncFromSelection();
+    this.#isOpen = true;
+    this.#setStorageOpen(true);
+    this.#renderOrUpdatePanel();
+    this.#positionAndFocus();
+    this.#attachGlobalListeners();
+    this.dispatchEvent(new CustomEvent("openchange", { detail: { isOpen: true } }));
+  }
+  /**
+   * Close the picker. When `refocus` is `true`, returns focus to the editor
+   * view (NOT the anchor button - the anchor is on the bubble menu which
+   * vanishes on focus return).
+   */
+  close(opts = {}) {
+    if (!this.#isOpen) return;
+    this.#isOpen = false;
+    this.#setStorageOpen(false);
+    this.#detachGlobalListeners();
+    this.#cleanupFloating?.();
+    this.#cleanupFloating = null;
+    this.#cancelPendingRafs();
+    if (this.#panel) {
+      this.#panel.remove();
+    }
+    this.#anchor = null;
+    this.#anchorBubbleMenu = null;
+    this.#lastAnchorRect = null;
+    if (opts.refocus && !this.#editor.isDestroyed) {
+      this.#editor.view.focus();
+    }
+    this.dispatchEvent(new CustomEvent("openchange", { detail: { isOpen: false } }));
+  }
+  /** Apply a text color token to the current selection. Picker stays open. */
+  applyText(token) {
+    if (this.#destroyed) return;
+    this.#editor.commands.setTextColorToken(token);
+    this.#syncFromSelection();
+    this.#updateActiveClasses();
+    this.dispatchEvent(
+      new CustomEvent("apply", { detail: { kind: "text", token } })
+    );
+  }
+  /** Apply a background color token to the current selection. Picker stays open. */
+  applyBg(token) {
+    if (this.#destroyed) return;
+    this.#editor.commands.setBackgroundColorToken(token);
+    this.#syncFromSelection();
+    this.#updateActiveClasses();
+    this.dispatchEvent(
+      new CustomEvent("apply", { detail: { kind: "bg", token } })
+    );
+  }
+  /** Display label for a palette token (title-case fallback). */
+  tokenLabel(token) {
+    return TOKEN_LABELS[token] ?? token.charAt(0).toUpperCase() + token.slice(1);
+  }
+  destroy() {
+    if (this.#destroyed) return;
+    this.#destroyed = true;
+    this.#detachGlobalListeners();
+    this.#cleanupFloating?.();
+    this.#cleanupFloating = null;
+    this.#cancelPendingRafs();
+    if (this.#onOpen) {
+      this.#editor.off("notionColorOpen", this.#onOpen);
+      this.#onOpen = null;
+    }
+    if (this.#onSelectionUpdate) {
+      this.#editor.off("selectionUpdate", this.#onSelectionUpdate);
+      this.#onSelectionUpdate = null;
+    }
+    if (this.#isOpen) this.#setStorageOpen(false);
+    this.#panel?.remove();
+    this.#panel = null;
+    this.#isOpen = false;
+    this.#anchor = null;
+    this.#anchorBubbleMenu = null;
+    this.#lastAnchorRect = null;
+  }
+  // === Internal ===
+  /**
+   * Test whether the incoming anchor is functionally the same trigger as
+   * the currently stored anchor.
+   *
+   * - Exact DOM identity is preferred (cheap + unambiguous).
+   * - Fallback: both anchors are `.dm-ncp-trigger` buttons inside the SAME
+   *   `.dm-bubble-menu` host. The bubble menu rebuilds its trigger button
+   *   on every transaction (new DOM node, same logical trigger), so the
+   *   ancestor check lets toggle-on-second-click work across rebuilds
+   *   without conflating with custom triggers in other host elements.
+   */
+  #isSameTrigger(incoming) {
+    if (this.#anchor === incoming) return true;
+    if (!incoming.classList.contains("dm-ncp-trigger")) return false;
+    if (!(this.#anchor?.classList.contains("dm-ncp-trigger") ?? false)) return false;
+    const currentBubble = this.#anchor?.closest(".dm-bubble-menu") ?? null;
+    const incomingBubble = incoming.closest(".dm-bubble-menu");
+    return currentBubble !== null && currentBubble === incomingBubble;
+  }
+  /**
+   * Inspect the current selection and update the active text/bg tokens.
+   * Empty selection: read stored marks. Non-empty: walk text nodes (because
+   * `$from.nodeAfter` can land on a block at boundary positions).
+   */
+  #syncFromSelection() {
+    const { selection } = this.#editor.state;
+    let mark = null;
+    if (selection.empty) {
+      mark = selection.$from.marks().find((m) => m.type.name === "textStyle") ?? null;
+    } else {
+      this.#editor.state.doc.nodesBetween(selection.from, selection.to, (node) => {
+        if (mark) return false;
+        if (node.isText) {
+          const found = node.marks.find((m) => m.type.name === "textStyle");
+          if (found) mark = found;
+        }
+        return true;
+      });
+    }
+    const attrs = mark?.attrs ?? {};
+    this.#currentTextToken = attrs.colorToken ?? null;
+    this.#currentBgToken = attrs.backgroundColorToken ?? null;
+  }
+  #setStorageOpen(open) {
+    const slot = this.#editor.storage["notionColorPicker"];
+    if (slot && typeof slot === "object") {
+      slot.isOpen = open;
+    }
+  }
+  #renderOrUpdatePanel() {
+    if (!this.#host) return;
+    if (!this.#panel) {
+      this.#panel = this.#createPanel();
+    } else {
+      this.#panel.replaceChildren(...this.#renderSections());
+    }
+    this.#host.appendChild(this.#panel);
+  }
+  #createPanel() {
+    const panel = document.createElement("div");
+    panel.className = "dm-notion-color-picker";
+    panel.setAttribute("data-show", "");
+    panel.setAttribute("data-dm-editor-ui", "");
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-label", "Text and background color");
+    panel.setAttribute("aria-modal", "false");
+    panel.addEventListener("keydown", (e) => {
+      this.#onPanelKeydown(e);
+    });
+    panel.append(...this.#renderSections());
+    return panel;
+  }
+  #renderSections() {
+    return [
+      this.#createSection({
+        label: "Text color",
+        variant: "text",
+        activeToken: this.#currentTextToken,
+        onApply: (t) => {
+          this.applyText(t);
+        }
+      }),
+      this.#createSection({
+        label: "Background color",
+        variant: "bg",
+        activeToken: this.#currentBgToken,
+        onApply: (t) => {
+          this.applyBg(t);
+        }
+      })
+    ];
+  }
+  #createSection(opts) {
+    const section = document.createElement("div");
+    section.className = "dm-ncp-section";
+    const heading = document.createElement("div");
+    heading.className = "dm-ncp-label";
+    heading.textContent = opts.label;
+    section.appendChild(heading);
+    const grid = document.createElement("div");
+    grid.className = "dm-ncp-grid";
+    grid.appendChild(
+      this.#createSwatch({
+        token: null,
+        variant: opts.variant,
+        label: opts.variant === "text" ? "Default text color" : "Default background",
+        activeToken: opts.activeToken,
+        onApply: opts.onApply
+      })
+    );
+    for (const t of this.#palette) {
+      const label = opts.variant === "text" ? `${this.tokenLabel(t)} text` : `${this.tokenLabel(t)} background`;
+      grid.appendChild(
+        this.#createSwatch({
+          token: t,
+          variant: opts.variant,
+          label,
+          activeToken: opts.activeToken,
+          onApply: opts.onApply
+        })
+      );
+    }
+    section.appendChild(grid);
+    return section;
+  }
+  #createSwatch(opts) {
+    const swatch = document.createElement("button");
+    swatch.type = "button";
+    swatch.className = `dm-ncp-swatch dm-ncp-swatch--${opts.variant}`;
+    if (opts.activeToken === opts.token) swatch.classList.add("dm-ncp-active");
+    swatch.setAttribute("aria-pressed", String(opts.activeToken === opts.token));
+    swatch.dataset["color"] = opts.token ?? "null";
+    swatch.title = opts.token === null ? opts.variant === "text" ? "Default text color" : "Default background" : this.tokenLabel(opts.token);
+    swatch.setAttribute("aria-label", opts.label);
+    swatch.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+    });
+    swatch.addEventListener("click", () => {
+      opts.onApply(opts.token);
+    });
+    return swatch;
+  }
+  /** Update only active-class state without rebuilding DOM. */
+  #updateActiveClasses() {
+    if (!this.#panel) return;
+    const textSwatches = Array.from(
+      this.#panel.querySelectorAll(".dm-ncp-swatch--text")
+    );
+    const bgSwatches = Array.from(
+      this.#panel.querySelectorAll(".dm-ncp-swatch--bg")
+    );
+    for (const sw of textSwatches) {
+      const token = sw.dataset["color"] === "null" ? null : sw.dataset["color"] ?? null;
+      const isActive = token === this.#currentTextToken;
+      sw.classList.toggle("dm-ncp-active", isActive);
+      sw.setAttribute("aria-pressed", String(isActive));
+    }
+    for (const sw of bgSwatches) {
+      const token = sw.dataset["color"] === "null" ? null : sw.dataset["color"] ?? null;
+      const isActive = token === this.#currentBgToken;
+      sw.classList.toggle("dm-ncp-active", isActive);
+      sw.setAttribute("aria-pressed", String(isActive));
+    }
+  }
+  /**
+   * Position + two-rAF focus chain. Floating-UI positions immediately; second
+   * rAF waits for paint so focus doesn't race the bubble-menu blur. Focuses
+   * the active swatch or falls back to the first default text swatch.
+   */
+  #positionAndFocus() {
+    if (!this.#anchor || !this.#panel) return;
+    this.#cleanupFloating?.();
+    const virtualRef = {
+      getBoundingClientRect: () => {
+        if (this.#anchor?.isConnected) {
+          const rect = this.#anchor.getBoundingClientRect();
+          this.#lastAnchorRect = rect;
+          return rect;
+        }
+        if (this.#anchorBubbleMenu?.isConnected) {
+          const fresh = this.#anchorBubbleMenu.querySelector(
+            ".dm-ncp-trigger"
+          );
+          if (fresh) {
+            this.#anchor = fresh;
+            const rect = fresh.getBoundingClientRect();
+            this.#lastAnchorRect = rect;
+            return rect;
+          }
+        }
+        return this.#lastAnchorRect ?? new DOMRect(0, 0, 0, 0);
+      }
+    };
+    this.#cleanupFloating = positionFloating(virtualRef, this.#panel, {
+      placement: "bottom-start",
+      offsetValue: 4
+    });
+    const id1 = requestAnimationFrame(() => {
+      const id2 = requestAnimationFrame(() => {
+        if (!this.#panel?.isConnected) return;
+        const active = this.#panel.querySelector(".dm-ncp-swatch.dm-ncp-active");
+        const fallback = this.#panel.querySelector(
+          '.dm-ncp-swatch--text[data-color="null"]'
+        );
+        (active ?? fallback)?.focus({ preventScroll: true });
+      });
+      this.#rafIds.push(id2);
+    });
+    this.#rafIds.push(id1);
+  }
+  #cancelPendingRafs() {
+    for (const id of this.#rafIds) cancelAnimationFrame(id);
+    this.#rafIds = [];
+  }
+  #attachGlobalListeners() {
+    this.#openAbortCtl?.abort();
+    this.#openAbortCtl = new AbortController();
+    const { signal } = this.#openAbortCtl;
+    document.addEventListener(
+      "mousedown",
+      (e) => {
+        const target = e.target;
+        if (!target) return;
+        if (this.#panel?.contains(target)) return;
+        if (this.#anchor?.contains(target)) return;
+        this.close();
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (e.key === "Escape" && this.#isOpen) {
+          e.preventDefault();
+          this.close({ refocus: true });
+        }
+      },
+      { signal }
+    );
+  }
+  #detachGlobalListeners() {
+    this.#openAbortCtl?.abort();
+    this.#openAbortCtl = null;
+  }
+  /**
+   * Arrow / Home / End nav across the 5-column swatch grid. Sequential focus
+   * walks both Text and Background sections so keyboard users can reach any
+   * swatch without re-grabbing Tab.
+   */
+  #onPanelKeydown(event) {
+    const cols = 5;
+    if (!this.#panel) return;
+    const swatches = Array.from(
+      this.#panel.querySelectorAll(".dm-ncp-swatch")
+    );
+    if (!swatches.length) return;
+    const active = document.activeElement;
+    if (!(active instanceof HTMLElement)) return;
+    const idx = swatches.indexOf(active);
+    if (idx === -1) return;
+    let next = idx;
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault();
+        next = Math.min(idx + 1, swatches.length - 1);
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        next = Math.max(idx - 1, 0);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        next = Math.min(idx + cols, swatches.length - 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        next = Math.max(idx - cols, 0);
+        break;
+      case "Home":
+        event.preventDefault();
+        next = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        next = swatches.length - 1;
+        break;
+      default:
+        return;
+    }
+    swatches[next]?.focus();
+  }
+};
+var CATEGORY_ICONS = {
+  "Smileys & Emotion": "\u{1F600}",
+  "People & Body": "\u{1F44B}",
+  "Animals & Nature": "\u{1F431}",
+  "Food & Drink": "\u{1F355}",
+  "Travel & Places": "\u{1F697}",
+  Activities: "\u26BD",
+  Objects: "\u{1F4A1}",
+  Symbols: "\u{1F523}",
+  Flags: "\u{1F3C1}"
+};
+var SCROLL_SETTLE_MS = 50;
+var DomternalEmojiPicker = class extends EventTarget {
+  host;
+  get editor() {
+    return this.#editor;
+  }
+  get isOpen() {
+    return this.#isOpen;
+  }
+  get searchQuery() {
+    return this.#searchQuery;
+  }
+  get activeCategory() {
+    return this.#activeCategory;
+  }
+  #editor;
+  #emojis;
+  #categories;
+  #categoryNames;
+  #destroyed = false;
+  #isOpen = false;
+  #searchQuery = "";
+  #activeCategory = "";
+  #anchor = null;
+  #panel = null;
+  #cleanupFloating = null;
+  #openAbortCtl = null;
+  #eventHandler = null;
+  constructor(host, options) {
+    super();
+    assertBrowser("DomternalEmojiPicker");
+    if (!(host instanceof HTMLElement)) {
+      throw new TypeError(
+        '[DomternalEmojiPicker] host must be an HTMLElement. Pass a DOM node (e.g. document.querySelector("#emoji-host")).'
+      );
+    }
+    if (!options.editor) {
+      throw new TypeError("[DomternalEmojiPicker] options.editor is required.");
+    }
+    if (!options.emojis) {
+      throw new TypeError("[DomternalEmojiPicker] options.emojis is required.");
+    }
+    this.host = host;
+    this.#editor = options.editor;
+    this.#emojis = options.emojis;
+    this.#categories = /* @__PURE__ */ new Map();
+    for (const item of this.#emojis) {
+      let list = this.#categories.get(item.group);
+      if (!list) {
+        list = [];
+        this.#categories.set(item.group, list);
+      }
+      list.push(item);
+    }
+    this.#categoryNames = [...this.#categories.keys()];
+    this.host.classList.add("dm-emoji-picker-host");
+    this.#eventHandler = (...args) => {
+      const data = args[0];
+      if (this.#isOpen) {
+        this.close();
+        return;
+      }
+      this.open(data?.anchorElement ?? null);
+    };
+    this.#editor.on(
+      "insertEmoji",
+      this.#eventHandler
+    );
+  }
+  // === Public API ===
+  /**
+   * Open the picker. If `anchor` is provided, panel positions against it;
+   * otherwise the panel renders un-positioned inside the host (consumer's CSS
+   * responsibility).
+   */
+  open(anchor) {
+    if (this.#destroyed || this.#isOpen) return;
+    this.#anchor = anchor;
+    this.#isOpen = true;
+    this.#searchQuery = "";
+    if (this.#categoryNames[0]) {
+      this.#activeCategory = this.#categoryNames[0];
+    }
+    this.#setStorageOpen(true);
+    this.#renderPanel();
+    this.#attachGlobalListeners();
+    this.#positionAndFocus();
+    this.dispatchEvent(new CustomEvent("openchange", { detail: { isOpen: true } }));
+  }
+  /**
+   * Close the picker. Returns focus to the editor view (so the caret stays
+   * visible). Idempotent.
+   */
+  close() {
+    if (!this.#isOpen) return;
+    this.#cleanupFloating?.();
+    this.#cleanupFloating = null;
+    this.#isOpen = false;
+    this.#setStorageOpen(false);
+    this.#searchQuery = "";
+    this.#anchor = null;
+    this.#detachGlobalListeners();
+    this.#panel?.remove();
+    this.#panel = null;
+    if (!this.#editor.isDestroyed) {
+      this.#editor.view.focus();
+    }
+    this.dispatchEvent(new CustomEvent("openchange", { detail: { isOpen: false } }));
+  }
+  destroy() {
+    if (this.#destroyed) return;
+    this.#destroyed = true;
+    this.#detachGlobalListeners();
+    this.#cleanupFloating?.();
+    this.#cleanupFloating = null;
+    if (this.#eventHandler) {
+      this.#editor.off(
+        "insertEmoji",
+        this.#eventHandler
+      );
+      this.#eventHandler = null;
+    }
+    if (this.#isOpen) this.#setStorageOpen(false);
+    this.#panel?.remove();
+    this.#panel = null;
+    this.#isOpen = false;
+  }
+  // === Internal ===
+  /** Title-cased emoji name for tooltip/aria-label (replaces underscores). */
+  #formatName(name) {
+    return name.replace(/_/g, " ");
+  }
+  /** Display glyph for a category tab. Falls back to first character. */
+  #categoryIcon(cat) {
+    return CATEGORY_ICONS[cat] ?? cat.charAt(0);
+  }
+  #getEmojiStorage() {
+    const storage = this.#editor.storage;
+    return storage["emoji"] ?? null;
+  }
+  #setStorageOpen(open) {
+    const storage = this.#getEmojiStorage();
+    if (storage) storage["isOpen"] = open;
+    if (!this.#editor.isDestroyed) {
+      this.#editor.view.dispatch(this.#editor.view.state.tr);
+    }
+  }
+  #getFilteredEmojis() {
+    const query = this.#searchQuery.toLowerCase();
+    if (!query) return [];
+    const storage = this.#getEmojiStorage();
+    const searchFn = storage?.["searchEmoji"];
+    if (searchFn) return searchFn(query);
+    return this.#emojis.filter(
+      (item) => item.name.includes(query) || item.group.toLowerCase().includes(query)
+    );
+  }
+  #getFrequentlyUsed() {
+    const storage = this.#getEmojiStorage();
+    if (!storage) return [];
+    const getFreq = storage["getFrequentlyUsed"];
+    if (!getFreq) return [];
+    const names = getFreq();
+    if (!names.length) return [];
+    const nameMap = storage["_nameMap"];
+    if (!nameMap) return [];
+    return names.slice(0, 16).map((n) => nameMap.get(n)).filter((v) => Boolean(v));
+  }
+  /** Render or refresh the picker panel inside `host`. */
+  #renderPanel() {
+    if (!this.#panel) {
+      this.#panel = this.#createPanel();
+      this.host.appendChild(this.#panel);
+    } else {
+      this.#panel.replaceChildren(...this.#renderPanelChildren());
+    }
+  }
+  #createPanel() {
+    const panel = document.createElement("div");
+    panel.className = "dm-emoji-picker";
+    panel.append(...this.#renderPanelChildren());
+    return panel;
+  }
+  #renderPanelChildren() {
+    return [
+      this.#renderSearch(),
+      this.#renderTabs(),
+      this.#renderGrid()
+    ];
+  }
+  #renderSearch() {
+    const wrapper = document.createElement("div");
+    wrapper.className = "dm-emoji-picker-search";
+    const input = document.createElement("input");
+    input.type = "text";
+    input.placeholder = "Search emoji...";
+    input.value = this.#searchQuery;
+    input.setAttribute("aria-label", "Search emoji");
+    input.addEventListener("input", (e) => {
+      this.#searchQuery = e.target.value;
+      this.#refreshGrid();
+    });
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") this.close();
+    });
+    wrapper.appendChild(input);
+    return wrapper;
+  }
+  #renderTabs() {
+    const tabs = document.createElement("div");
+    tabs.className = "dm-emoji-picker-tabs";
+    tabs.setAttribute("role", "tablist");
+    for (const cat of this.#categoryNames) {
+      const tab = document.createElement("button");
+      tab.type = "button";
+      tab.className = "dm-emoji-picker-tab";
+      if (this.#activeCategory === cat) {
+        tab.classList.add("dm-emoji-picker-tab--active");
+      }
+      tab.setAttribute("role", "tab");
+      tab.setAttribute("aria-selected", String(this.#activeCategory === cat));
+      tab.title = cat;
+      tab.setAttribute("aria-label", cat);
+      tab.textContent = this.#categoryIcon(cat);
+      tab.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+      });
+      tab.addEventListener("click", () => {
+        this.#scrollToCategory(cat);
+      });
+      tabs.appendChild(tab);
+    }
+    return tabs;
+  }
+  #renderGrid() {
+    const grid = document.createElement("div");
+    grid.className = "dm-emoji-picker-grid";
+    grid.addEventListener("scroll", () => {
+      this.#onGridScroll();
+    });
+    grid.addEventListener("keydown", (e) => {
+      this.#onGridKeydown(e);
+    });
+    if (this.#searchQuery) {
+      const filtered = this.#getFilteredEmojis();
+      if (filtered.length === 0) {
+        const empty = document.createElement("div");
+        empty.className = "dm-emoji-picker-empty";
+        empty.textContent = "No emoji found";
+        grid.appendChild(empty);
+      } else {
+        for (const item of filtered) {
+          grid.appendChild(this.#createSwatch(item));
+        }
+      }
+      return grid;
+    }
+    const freq = this.#getFrequentlyUsed();
+    if (freq.length) {
+      const freqLabel = document.createElement("div");
+      freqLabel.className = "dm-emoji-picker-category-label";
+      freqLabel.textContent = "Frequently Used";
+      grid.appendChild(freqLabel);
+      for (const item of freq) {
+        grid.appendChild(this.#createSwatch(item));
+      }
+    }
+    for (const cat of this.#categoryNames) {
+      const label = document.createElement("div");
+      label.className = "dm-emoji-picker-category-label";
+      label.dataset["category"] = cat;
+      label.textContent = cat;
+      grid.appendChild(label);
+      const items = this.#categories.get(cat) ?? [];
+      for (const item of items) {
+        grid.appendChild(this.#createSwatch(item));
+      }
+    }
+    return grid;
+  }
+  #createSwatch(item) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "dm-emoji-swatch";
+    btn.tabIndex = -1;
+    btn.title = this.#formatName(item.name);
+    btn.setAttribute("aria-label", this.#formatName(item.name));
+    btn.textContent = item.emoji;
+    btn.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+    });
+    btn.addEventListener("click", () => {
+      this.#selectEmoji(item);
+    });
+    return btn;
+  }
+  /**
+   * Update `searchQuery` field AND sync the DOM input value. Centralised
+   * so all callers see a consistent state - field is the source of truth
+   * but the input element doesn't track it automatically.
+   */
+  #setSearchQuery(value) {
+    this.#searchQuery = value;
+    const input = this.#panel?.querySelector(
+      ".dm-emoji-picker-search input"
+    );
+    if (input && input.value !== value) input.value = value;
+  }
+  /** Replace grid contents only (used when searchQuery changes). */
+  #refreshGrid() {
+    if (!this.#panel) return;
+    const oldGrid = this.#panel.querySelector(".dm-emoji-picker-grid");
+    const newGrid = this.#renderGrid();
+    oldGrid?.replaceWith(newGrid);
+  }
+  #refreshTabs() {
+    if (!this.#panel) return;
+    const oldTabs = this.#panel.querySelector(".dm-emoji-picker-tabs");
+    const newTabs = this.#renderTabs();
+    oldTabs?.replaceWith(newTabs);
+  }
+  #selectEmoji(item) {
+    const cmd = this.#editor.commands;
+    cmd["insertEmoji"]?.(item.name);
+    this.dispatchEvent(
+      new CustomEvent("select", { detail: { name: item.name, emoji: item.emoji } })
+    );
+    this.close();
+  }
+  #scrollToCategory(cat) {
+    if (cat !== this.#activeCategory) this.#setSearchQuery("");
+    this.#activeCategory = cat;
+    this.#refreshTabs();
+    this.#refreshGrid();
+    requestAnimationFrame(() => {
+      const grid = this.#panel?.querySelector(".dm-emoji-picker-grid");
+      if (!grid) return;
+      const label = grid.querySelector(`[data-category="${cat}"]`);
+      if (!label) return;
+      grid.scrollTo({ top: label.offsetTop - grid.offsetTop });
+      setTimeout(() => {
+        const first = label.nextElementSibling;
+        if (first instanceof HTMLElement && first.classList.contains("dm-emoji-swatch")) {
+          first.focus();
+        }
+      }, SCROLL_SETTLE_MS);
+    });
+  }
+  #onGridScroll() {
+    if (this.#searchQuery) return;
+    const grid = this.#panel?.querySelector(".dm-emoji-picker-grid");
+    if (!grid) return;
+    const labels = Array.from(
+      grid.querySelectorAll(".dm-emoji-picker-category-label[data-category]")
+    );
+    let currentCat = "";
+    for (const label of labels) {
+      if (label.offsetTop - grid.offsetTop <= grid.scrollTop + 20) {
+        currentCat = label.getAttribute("data-category") ?? "";
+      }
+    }
+    if (currentCat && currentCat !== this.#activeCategory) {
+      this.#activeCategory = currentCat;
+      this.#refreshTabs();
+    }
+  }
+  #onGridKeydown(event) {
+    const grid = this.#panel?.querySelector(".dm-emoji-picker-grid");
+    if (!grid) return;
+    const swatches = Array.from(
+      grid.querySelectorAll(".dm-emoji-swatch")
+    );
+    if (!swatches.length) return;
+    const active = document.activeElement;
+    const idx = active instanceof HTMLElement ? swatches.indexOf(active) : -1;
+    if (idx === -1) {
+      if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) {
+        event.preventDefault();
+        swatches[0]?.focus();
+      }
+      return;
+    }
+    const cols = 8;
+    let next = idx;
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault();
+        next = Math.min(idx + 1, swatches.length - 1);
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        next = Math.max(idx - 1, 0);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        next = Math.min(idx + cols, swatches.length - 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        next = Math.max(idx - cols, 0);
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        swatches[idx]?.click();
+        return;
+      default:
+        return;
+    }
+    swatches[next]?.focus();
+  }
+  #positionAndFocus() {
+    requestAnimationFrame(() => {
+      if (!this.#panel || this.#destroyed) return;
+      if (this.#anchor) {
+        this.#cleanupFloating?.();
+        this.#cleanupFloating = positionFloatingOnce(this.#anchor, this.#panel, {
+          placement: "bottom",
+          offsetValue: 4
+        });
+      }
+      const input = this.#panel.querySelector(
+        ".dm-emoji-picker-search input"
+      );
+      input?.focus({ preventScroll: true });
+    });
+  }
+  #attachGlobalListeners() {
+    this.#openAbortCtl?.abort();
+    this.#openAbortCtl = new AbortController();
+    const { signal } = this.#openAbortCtl;
+    document.addEventListener(
+      "mousedown",
+      (e) => {
+        const target = e.target;
+        if (!target || !this.#isOpen) return;
+        if (this.#panel?.contains(target)) return;
+        if (target === this.#anchor) return;
+        if (this.#anchor?.contains(target)) return;
+        requestAnimationFrame(() => {
+          this.close();
+        });
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (e.key === "Escape" && this.#isOpen) {
+          e.preventDefault();
+          this.close();
+        }
+      },
+      { signal }
+    );
+  }
+  #detachGlobalListeners() {
+    this.#openAbortCtl?.abort();
+    this.#openAbortCtl = null;
+  }
+};
+
+export { DEFAULT_EXTENSIONS, DROPDOWN_CARET, DomternalBubbleMenu, DomternalEditor, DomternalEmojiPicker, DomternalFloatingMenu, DomternalNotionColorPicker, DomternalToolbar, INITIAL_TRAILING_STATE, assertBrowser, buildItemMaps, computeTrailingState, createIconCache, createPluginKey, detectContext, filterBySchema, getComputedStyleAtCursor, getFormatItems, getInlineStyleAtCursor, getTooltip, isBrowser, isInsideTableCell, renderIconInto, resolveIcon, resolveNames, subscribe };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map