@notectl/core 1.0.6 → 1.0.9

package/dist/chunks/ToolbarPlugin-DFkl1uYO.mjs

@@ -0,0 +1,818 @@
+import { S as t, r as e } from "./resolvePluginLocale-B4w1OkPy.mjs";
+import { f as o, n, a as r, b as i, c as s, d as l } from "./ToolbarKeyboardNav-B32OMv8r.mjs";
+const a = { formattingOptionsAria: "Formatting options", moreToolsAria: "More tools" }, c = { en: a, de: { formattingOptionsAria: "Formatierungsoptionen", moreToolsAria: "Weitere Werkzeuge" }, es: { formattingOptionsAria: "Opciones de formato", moreToolsAria: "Más herramientas" }, fr: { formattingOptionsAria: "Options de mise en forme", moreToolsAria: "Plus d'outils" }, zh: { formattingOptionsAria: "格式选项", moreToolsAria: "更多工具" }, ru: { formattingOptionsAria: "Параметры форматирования", moreToolsAria: "Другие инструменты" }, ar: { formattingOptionsAria: "خيارات التنسيق", moreToolsAria: "أدوات إضافية" }, hi: { formattingOptionsAria: "फ़ॉर्मेटिंग विकल्प", moreToolsAria: "और उपकरण" } }, d = { BurgerMenu: "burger-menu", Flow: "flow", None: "none" }, p = "notectl-toolbar-btn--overflow-hidden", h = "notectl-toolbar-separator--overflow-hidden";
+class u {
+  toolbar;
+  context;
+  onOverflowChange;
+  onItemActivated;
+  getActiveElement;
+  ariaLabel;
+  entries = [];
+  overflowButton = null;
+  overflowDropdown = null;
+  overflowEntries = [];
+  resizeObserver = null;
+  closeHandler = null;
+  constructor(t2) {
+    this.toolbar = t2.toolbar, this.ariaLabel = t2.ariaLabel, this.context = t2.context, this.onOverflowChange = t2.onOverflowChange, this.onItemActivated = t2.onItemActivated, this.getActiveElement = t2.getActiveElement, this.resizeObserver = new ResizeObserver(() => this.recalculate()), this.resizeObserver.observe(this.toolbar);
+  }
+  update(t2) {
+    this.entries = t2.map((t3) => ({ element: t3.element, item: t3.item })), this.recalculate();
+  }
+  recalculate() {
+    if (0 === this.entries.length) return;
+    this.closeDropdown(), this.resetVisibility(), this.ensureOverflowButton(), this.setOverflowButtonVisible(false);
+    const t2 = this.measureAvailableWidth() - 34 - 2;
+    let e2 = 0, o2 = false;
+    const n2 = [], r2 = Array.from(this.toolbar.children);
+    for (const i2 of r2) {
+      if (i2 === this.overflowButton) continue;
+      if (i2.classList.contains("notectl-toolbar-separator")) {
+        if (o2) {
+          i2.classList.add(h);
+          continue;
+        }
+        const n3 = i2.offsetWidth + 2;
+        e2 + n3 > t2 ? (o2 = true, i2.classList.add(h)) : e2 += n3;
+        continue;
+      }
+      const r3 = this.entries.find((t3) => t3.element === i2);
+      if (!r3) continue;
+      if (o2) {
+        r3.element.classList.add(p), n2.push(r3);
+        continue;
+      }
+      const s2 = r3.element.offsetWidth + 2;
+      e2 + s2 > t2 ? (o2 = true, r3.element.classList.add(p), n2.push(r3)) : e2 += s2;
+    }
+    this.overflowEntries = n2, this.hideTrailingSeparators(), this.setOverflowButtonVisible(n2.length > 0), this.notifyChange();
+  }
+  updateItemStates(t2) {
+    if (!this.overflowDropdown) return;
+    const e2 = Array.from(this.overflowDropdown.querySelectorAll(".notectl-dropdown__item"));
+    for (const o2 of e2) {
+      const e3 = o2.getAttribute("data-toolbar-item"), n2 = this.overflowEntries.find((t3) => t3.item.id === e3);
+      if (!n2) continue;
+      const r2 = n2.item.isActive?.(t2) ?? false, i2 = n2.item.isEnabled?.(t2) ?? true;
+      o2.classList.toggle("notectl-dropdown__item--active", r2), o2.disabled = !i2;
+    }
+  }
+  destroy() {
+    this.resizeObserver?.disconnect(), this.resizeObserver = null, this.closeDropdown(), this.overflowButton?.remove(), this.overflowButton = null, this.entries = [], this.overflowEntries = [];
+  }
+  measureAvailableWidth() {
+    const t2 = getComputedStyle(this.toolbar), e2 = Number.parseFloat(t2.paddingLeft) || 0, o2 = Number.parseFloat(t2.paddingRight) || 0;
+    return this.toolbar.clientWidth - e2 - o2;
+  }
+  resetVisibility() {
+    for (const t3 of this.entries) t3.element.classList.remove(p);
+    const t2 = Array.from(this.toolbar.querySelectorAll(".notectl-toolbar-separator"));
+    for (const e2 of t2) e2.classList.remove(h);
+  }
+  setOverflowButtonVisible(t2) {
+    this.overflowButton && (this.overflowButton.classList.toggle("notectl-toolbar-overflow-btn--hidden", !t2), t2 || this.overflowButton.removeAttribute("tabindex"));
+  }
+  ensureOverflowButton() {
+    if (this.overflowButton) return;
+    const t2 = document.createElement("button");
+    t2.type = "button", t2.className = "notectl-toolbar-overflow-btn", t2.setAttribute("aria-label", this.ariaLabel), t2.setAttribute("aria-haspopup", "true"), t2.setAttribute("aria-expanded", "false"), t2.innerHTML = '<svg viewBox="0 0 16 16" width="16" height="16"><circle cx="3" cy="8" r="1.5" fill="currentColor"/><circle cx="8" cy="8" r="1.5" fill="currentColor"/><circle cx="13" cy="8" r="1.5" fill="currentColor"/></svg>', t2.addEventListener("mousedown", (t3) => {
+      t3.preventDefault(), this.toggleDropdown();
+    }), this.toolbar.appendChild(t2), this.overflowButton = t2;
+  }
+  toggleDropdown() {
+    this.overflowDropdown ? this.closeDropdown() : this.openDropdown();
+  }
+  openDropdown() {
+    if (!this.overflowButton || 0 === this.overflowEntries.length) return;
+    const t2 = document.createElement("div");
+    t2.className = "notectl-toolbar-popup notectl-dropdown", t2.setAttribute("role", "menu"), this.renderDropdownItems(t2), this.positionDropdown(t2), this.appendToRoot(t2), this.overflowDropdown = t2, this.overflowButton.setAttribute("aria-expanded", "true"), requestAnimationFrame(() => {
+      const e2 = t2.querySelector('[role="menuitem"]');
+      e2?.focus();
+    }), t2.addEventListener("keydown", (t3) => this.handleDropdownKeydown(t3)), this.registerCloseHandler();
+  }
+  renderDropdownItems(t2) {
+    let e2 = null;
+    for (const o2 of this.overflowEntries) {
+      if (null !== e2 && o2.item.group !== e2) {
+        const e3 = document.createElement("div");
+        e3.className = "notectl-dropdown__separator", e3.setAttribute("role", "separator"), t2.appendChild(e3);
+      }
+      e2 = o2.item.group;
+      const n2 = document.createElement("button");
+      n2.type = "button", n2.className = "notectl-dropdown__item", n2.setAttribute("role", "menuitem"), n2.setAttribute("tabindex", "-1"), n2.setAttribute("data-toolbar-item", o2.item.id);
+      const r2 = document.createElement("span");
+      r2.className = "notectl-dropdown__item-icon", r2.innerHTML = o2.item.icon, n2.appendChild(r2);
+      const i2 = document.createElement("span");
+      i2.className = "notectl-dropdown__item-label", i2.textContent = o2.item.tooltip ?? o2.item.label, n2.appendChild(i2), n2.addEventListener("mousedown", (t3) => {
+        t3.preventDefault(), t3.stopPropagation(), this.activateOverflowItem(o2);
+      }), t2.appendChild(n2);
+    }
+  }
+  positionDropdown(t2) {
+    if (!this.overflowButton) return;
+    const e2 = this.overflowButton.getBoundingClientRect(), o2 = window.innerWidth - e2.right;
+    t2.style.position = "fixed", t2.style.top = `${e2.bottom + 2}px`, t2.style.right = `${o2}px`, t2.style.left = "auto", t2.style.zIndex = "10000";
+  }
+  appendToRoot(t2) {
+    if (!this.overflowButton) return;
+    const e2 = this.overflowButton.getRootNode();
+    e2 instanceof ShadowRoot ? e2.appendChild(t2) : document.body.appendChild(t2);
+  }
+  registerCloseHandler() {
+    this.closeHandler = (t2) => {
+      const e2 = t2.composedPath();
+      this.overflowDropdown && !e2.includes(this.overflowDropdown) && this.overflowButton && !e2.includes(this.overflowButton) && this.closeDropdown();
+    }, setTimeout(() => {
+      this.closeHandler && document.addEventListener("mousedown", this.closeHandler);
+    }, 0);
+  }
+  closeDropdown() {
+    this.overflowDropdown && (this.overflowDropdown.remove(), this.overflowDropdown = null), this.overflowButton && this.overflowButton.setAttribute("aria-expanded", "false"), this.closeHandler && (document.removeEventListener("mousedown", this.closeHandler), this.closeHandler = null);
+  }
+  activateOverflowItem(t2) {
+    this.closeDropdown(), t2.item.popupType && this.overflowButton ? this.onItemActivated(this.overflowButton, t2.item) : this.context.executeCommand(t2.item.command);
+  }
+  handleDropdownKeydown(t2) {
+    if (!this.overflowDropdown) return;
+    if ("Escape" === t2.key || "Tab" === t2.key) return t2.preventDefault(), t2.stopPropagation(), this.closeDropdown(), void this.overflowButton?.focus();
+    const e2 = Array.from(this.overflowDropdown.querySelectorAll('[role="menuitem"]')), n2 = e2.indexOf(this.getActiveElement());
+    switch (t2.key) {
+      case "ArrowDown": {
+        t2.preventDefault();
+        const r2 = o(e2, n2, 1);
+        e2[r2]?.focus();
+        break;
+      }
+      case "ArrowUp": {
+        t2.preventDefault();
+        const r2 = o(e2, n2, -1);
+        e2[r2]?.focus();
+        break;
+      }
+      case "Enter":
+      case " ": {
+        t2.preventDefault();
+        const o2 = e2[n2];
+        if (!o2) break;
+        const r2 = o2.getAttribute("data-toolbar-item"), i2 = this.overflowEntries.find((t3) => t3.item.id === r2);
+        i2 && this.activateOverflowItem(i2);
+        break;
+      }
+    }
+  }
+  hideTrailingSeparators() {
+    const t2 = Array.from(this.toolbar.children);
+    for (let e2 = t2.length - 1; e2 >= 0; e2--) {
+      const o2 = t2[e2];
+      if (o2 && o2 !== this.overflowButton) {
+        if (o2.classList.contains("notectl-toolbar-separator")) o2.classList.contains(h) || o2.classList.add(h);
+        else if (!o2.classList.contains(p)) break;
+      }
+    }
+  }
+  notifyChange() {
+    const t2 = this.entries.filter((t3) => !t3.element.classList.contains(p)).map((t3) => t3.element);
+    this.onOverflowChange(t2, this.overflowEntries.length > 0 ? this.overflowButton : null);
+  }
+}
+function m(t2, e2, o2) {
+  const n2 = t2.querySelectorAll(".notectl-grid-picker__cell");
+  for (const t3 of n2) {
+    const n3 = Number(t3.getAttribute("data-row")), r2 = Number(t3.getAttribute("data-col"));
+    t3.classList.toggle("notectl-grid-picker__cell--highlighted", n3 <= e2 && r2 <= o2);
+  }
+}
+function b() {
+  const t2 = document.createElement("span");
+  return t2.className = "notectl-toolbar-separator", t2.setAttribute("role", "separator"), t2;
+}
+class f {
+  activePopup = null;
+  activePopupButton = null;
+  closePopupHandler = null;
+  getActiveElement;
+  constructor(t2) {
+    this.getActiveElement = t2;
+  }
+  isOpen() {
+    return null !== this.activePopup;
+  }
+  toggle(t2, e2, o2) {
+    if (this.activePopup) return void this.close();
+    const n2 = document.createElement("div");
+    switch (n2.className = "notectl-toolbar-popup", e2.popupType) {
+      case "gridPicker":
+        !(function(t3, e3, o3) {
+          t3.className += " notectl-grid-picker";
+          const n3 = document.createElement("div");
+          n3.className = "notectl-grid-picker__grid", n3.setAttribute("role", "grid"), n3.style.display = "grid", n3.style.gridTemplateColumns = `repeat(${e3.maxCols}, 1fr)`, n3.style.gap = "2px", n3.style.padding = "8px";
+          const r2 = document.createElement("div");
+          r2.className = "notectl-grid-picker__label", r2.textContent = "1 x 1", r2.style.textAlign = "center", r2.style.padding = "4px", r2.style.fontSize = "12px", r2.setAttribute("aria-live", "polite");
+          for (let t4 = 1; t4 <= e3.maxRows; t4++) for (let i2 = 1; i2 <= e3.maxCols; i2++) {
+            const s2 = document.createElement("div");
+            s2.className = "notectl-grid-picker__cell", s2.setAttribute("role", "gridcell"), s2.setAttribute("tabindex", "-1"), s2.setAttribute("aria-label", `${t4} x ${i2}`), s2.style.width = "20px", s2.style.height = "20px", s2.style.border = "1px solid #ccc", s2.style.cursor = "pointer", s2.setAttribute("data-row", String(t4)), s2.setAttribute("data-col", String(i2)), s2.addEventListener("mouseenter", () => {
+              m(n3, t4, i2), r2.textContent = `${t4} x ${i2}`;
+            }), s2.addEventListener("mousedown", (n4) => {
+              n4.preventDefault(), n4.stopPropagation(), e3.onSelect(t4, i2), o3();
+            }), s2.addEventListener("click", () => {
+              e3.onSelect(t4, i2), o3();
+            }), n3.appendChild(s2);
+          }
+          t3.appendChild(n3), t3.appendChild(r2);
+        })(n2, e2.popupConfig, () => this.close());
+        break;
+      case "dropdown":
+        !(function(t3, e3, o3, n3) {
+          t3.classList.add("notectl-dropdown"), t3.setAttribute("role", "menu");
+          for (const r2 of e3.items) {
+            const e4 = document.createElement("button");
+            if (e4.type = "button", e4.className = "notectl-dropdown__item", e4.setAttribute("role", "menuitem"), e4.setAttribute("tabindex", "-1"), r2.icon) {
+              const t4 = document.createElement("span");
+              t4.className = "notectl-dropdown__item-icon", t4.innerHTML = r2.icon, e4.appendChild(t4);
+            }
+            const i2 = document.createElement("span");
+            i2.className = "notectl-dropdown__item-label", i2.textContent = r2.label, e4.appendChild(i2), e4.addEventListener("mousedown", (t4) => {
+              t4.preventDefault(), t4.stopPropagation(), o3(r2.command), n3();
+            }), e4.addEventListener("click", () => {
+              o3(r2.command), n3();
+            }), t3.appendChild(e4);
+          }
+        })(n2, e2.popupConfig, (t3) => o2.executeCommand(t3), () => this.close());
+        break;
+      case "custom":
+        e2.renderPopup(n2, o2, () => this.close());
+    }
+    this.positionAndAppend(n2, t2), this.activePopup = n2, this.activePopupButton = t2, t2.classList.add("notectl-toolbar-btn--popup-open"), t2.setAttribute("aria-expanded", "true"), this.focusFirstItem(n2), n2.addEventListener("keydown", (t3) => this.handlePopupKeydown(t3)), this.closePopupHandler = (e3) => {
+      const o3 = e3.composedPath();
+      o3.includes(n2) || o3.includes(t2) || this.close();
+    }, setTimeout(() => {
+      this.closePopupHandler && document.addEventListener("mousedown", this.closePopupHandler);
+    }, 0);
+  }
+  close() {
+    this.activePopupButton && (this.activePopupButton.classList.remove("notectl-toolbar-btn--popup-open"), this.activePopupButton.setAttribute("aria-expanded", "false"), this.activePopupButton = null), this.activePopup && (this.activePopup.remove(), this.activePopup = null), this.closePopupHandler && (document.removeEventListener("mousedown", this.closePopupHandler), this.closePopupHandler = null);
+  }
+  closeAndRestoreFocus() {
+    const t2 = this.activePopupButton;
+    this.close(), t2?.focus();
+  }
+  destroy() {
+    this.close();
+  }
+  positionAndAppend(t2, e2) {
+    const o2 = e2.getBoundingClientRect();
+    t2.style.position = "fixed", t2.style.top = `${o2.bottom + 2}px`, t2.style.left = `${o2.left}px`, t2.style.zIndex = "10000";
+    const n2 = e2.getRootNode();
+    n2 instanceof ShadowRoot ? n2.appendChild(t2) : document.body.appendChild(t2);
+  }
+  focusFirstItem(t2) {
+    requestAnimationFrame(() => {
+      const e2 = t2.querySelector('[role="menuitem"]') ?? t2.querySelector(".notectl-grid-picker__cell") ?? t2.querySelector("button");
+      e2?.focus();
+    });
+  }
+  handlePopupKeydown(t2) {
+    if (!this.activePopup) return;
+    if ("Escape" === t2.key) return t2.preventDefault(), t2.stopPropagation(), void this.closeAndRestoreFocus();
+    if ("Tab" === t2.key) return t2.preventDefault(), void this.closeAndRestoreFocus();
+    const e2 = this.activePopup.querySelectorAll('[role="menuitem"]');
+    e2.length > 0 ? this.handleDropdownKeydown(t2, e2) : null !== this.activePopup.querySelector(".notectl-grid-picker__cell") ? this.handleGridKeydown(t2) : this.handleCustomPopupKeydown(t2);
+  }
+  handleDropdownKeydown(t2, e2) {
+    const n2 = Array.from(e2), r2 = n2.indexOf(this.getActiveElement());
+    switch (t2.key) {
+      case "ArrowDown": {
+        t2.preventDefault();
+        const e3 = o(n2, r2, 1);
+        n2[e3]?.focus();
+        break;
+      }
+      case "ArrowUp": {
+        t2.preventDefault();
+        const e3 = o(n2, r2, -1);
+        n2[e3]?.focus();
+        break;
+      }
+      case "Enter":
+      case " ": {
+        t2.preventDefault();
+        const e3 = n2[r2];
+        e3 && e3.click();
+        break;
+      }
+    }
+  }
+  handleGridKeydown(t2) {
+    const e2 = this.getActiveElement(), o2 = Number(e2?.getAttribute("data-row") ?? 1), r2 = Number(e2?.getAttribute("data-col") ?? 1), i2 = this.activePopup?.querySelector(".notectl-grid-picker__grid") ?? null;
+    if (!i2) return;
+    const s2 = i2.querySelector(".notectl-grid-picker__cell:last-child"), l2 = Number(s2?.getAttribute("data-col") ?? 1), a2 = Number(s2?.getAttribute("data-row") ?? 1);
+    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t2.key)) {
+      t2.preventDefault();
+      const [e3, s3] = n(o2, r2, a2, l2, t2.key), c2 = i2.querySelector(`.notectl-grid-picker__cell[data-row="${e3}"][data-col="${s3}"]`);
+      c2?.focus(), m(i2, e3, s3);
+      const d2 = this.activePopup?.querySelector(".notectl-grid-picker__label") ?? null;
+      d2 && (d2.textContent = `${e3} x ${s3}`);
+    }
+    "Enter" !== t2.key && " " !== t2.key || (t2.preventDefault(), e2?.click());
+  }
+  handleCustomPopupKeydown(t2) {
+    if (!this.activePopup) return;
+    const e2 = Array.from(this.activePopup.querySelectorAll("button"));
+    if (0 === e2.length) return;
+    const n2 = this.getActiveElement(), r2 = e2.indexOf(n2);
+    switch (t2.key) {
+      case "ArrowDown": {
+        t2.preventDefault();
+        const n3 = o(e2, r2, 1);
+        e2[n3]?.focus();
+        break;
+      }
+      case "ArrowUp": {
+        t2.preventDefault();
+        const n3 = o(e2, r2, -1);
+        e2[n3]?.focus();
+        break;
+      }
+      case "Enter":
+      case " ":
+        t2.preventDefault(), n2 && n2.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
+    }
+  }
+}
+class v {
+  element;
+  timer = null;
+  target = null;
+  isPopupActive;
+  static TOOLTIP_ID = "notectl-toolbar-tooltip";
+  constructor(t2) {
+    this.isPopupActive = t2, this.element = document.createElement("div"), this.element.className = "notectl-toolbar-tooltip", this.element.id = v.TOOLTIP_ID, this.element.setAttribute("role", "tooltip"), this.element.style.display = "none";
+  }
+  show(t2) {
+    if (this.hide(), this.isPopupActive() || t2.disabled) return;
+    const e2 = t2.getAttribute("data-tooltip");
+    e2 && (this.target = t2, this.timer = setTimeout(() => {
+      if (this.isPopupActive()) return;
+      this.element.textContent = e2, this.element.style.display = "";
+      const o2 = t2.getRootNode();
+      o2 instanceof ShadowRoot && !this.element.parentNode ? o2.appendChild(this.element) : o2 instanceof ShadowRoot || this.element.parentNode || document.body.appendChild(this.element), t2.setAttribute("aria-describedby", v.TOOLTIP_ID);
+      const n2 = t2.getBoundingClientRect();
+      this.element.style.position = "fixed", this.element.style.top = `${n2.bottom + 6}px`, this.element.style.left = `${n2.left + n2.width / 2}px`, this.element.style.transform = "translateX(-50%)";
+    }, 500));
+  }
+  hide() {
+    this.timer && (clearTimeout(this.timer), this.timer = null), this.target && (this.target.removeAttribute("aria-describedby"), this.target = null), this.element.style.display = "none";
+  }
+  destroy() {
+    this.hide(), this.element.remove();
+  }
+}
+const w = new t("toolbar");
+class g {
+  id = "toolbar";
+  name = "Toolbar";
+  priority = 10;
+  context = null;
+  toolbarElement = null;
+  buttons = [];
+  hiddenItems = /* @__PURE__ */ new Set();
+  layoutConfig;
+  overflowBehavior;
+  focusedIndex = 0;
+  tooltip = null;
+  popupController = null;
+  overflowController = null;
+  visibleElements = [];
+  locale;
+  constructor(t2) {
+    this.layoutConfig = t2 ?? null, this.overflowBehavior = t2?.overflow ?? d.BurgerMenu;
+  }
+  init(t2) {
+    this.locale = e(c, t2), t2.registerStyleSheet(`
+/* Toolbar */
+.notectl-plugin-container--top {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	border-bottom: 1px solid var(--notectl-border);
+	background: var(--notectl-toolbar-bg, var(--notectl-surface-raised));
+	min-height: 40px;
+}
+
+.notectl-toolbar {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	overflow: hidden;
+	flex: 1;
+	min-width: 0;
+	gap: 2px;
+	padding: 4px 8px;
+}
+
+.notectl-toolbar[hidden] {
+	display: none;
+}
+
+.notectl-toolbar-btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border: 1px solid transparent;
+	border-radius: 4px;
+	background: transparent;
+	cursor: pointer;
+	color: var(--notectl-fg);
+	font-size: 14px;
+	line-height: 1;
+	padding: 0;
+	flex-shrink: 0;
+	transition: background 0.1s, border-color 0.1s;
+}
+
+.notectl-toolbar-btn:hover {
+	background: var(--notectl-hover-bg);
+	border-color: var(--notectl-border);
+}
+
+.notectl-toolbar-btn--active {
+	background: var(--notectl-active-bg);
+	border-color: var(--notectl-primary-muted);
+	color: var(--notectl-primary-fg);
+}
+
+.notectl-toolbar-btn:focus-visible {
+	box-shadow: 0 0 0 2px var(--notectl-focus-ring);
+	outline: none;
+}
+
+.notectl-toolbar-btn:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.notectl-toolbar-btn:disabled:hover {
+	background: transparent;
+	border-color: transparent;
+}
+
+.notectl-toolbar-btn__icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+}
+
+.notectl-toolbar-btn__icon svg {
+	display: block;
+	width: 18px;
+	height: 18px;
+	fill: currentColor;
+}
+
+/* Tooltip (rendered as fixed-position element in shadow root) */
+.notectl-toolbar-tooltip {
+	position: fixed;
+	padding: 4px 8px;
+	border-radius: 4px;
+	background: var(--notectl-tooltip-bg);
+	color: var(--notectl-tooltip-fg);
+	font-size: 11px;
+	font-weight: 500;
+	white-space: nowrap;
+	pointer-events: none;
+	z-index: 10001;
+	line-height: 1.4;
+	letter-spacing: 0.01em;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.notectl-toolbar-separator {
+	display: inline-block;
+	width: 1px;
+	height: 20px;
+	background: var(--notectl-border);
+	margin: 0 4px;
+	vertical-align: middle;
+}
+
+/* Toolbar Popups */
+.notectl-toolbar-popup {
+	background: var(--notectl-surface-overlay);
+	border: 1px solid var(--notectl-border);
+	border-radius: 6px;
+	box-shadow: 0 4px 12px var(--notectl-shadow);
+	overflow: hidden;
+}
+
+/* Grid Picker */
+.notectl-grid-picker__cell:focus-visible {
+	outline: 2px solid var(--notectl-focus-ring);
+	outline-offset: -1px;
+}
+
+.notectl-grid-picker__cell--highlighted {
+	background: var(--notectl-primary-muted);
+	border-color: var(--notectl-primary);
+}
+
+/* Dropdown */
+.notectl-dropdown {
+	min-width: 160px;
+	padding: 4px 0;
+}
+
+.notectl-dropdown__item {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	padding: 8px 12px;
+	text-align: left;
+	border: none;
+	background: none;
+	cursor: pointer;
+	font-size: 14px;
+	color: var(--notectl-fg);
+	line-height: 1.4;
+	font-family: inherit;
+	white-space: nowrap;
+}
+
+.notectl-dropdown__item:hover,
+.notectl-dropdown__item:focus-visible {
+	background: var(--notectl-hover-bg);
+}
+
+.notectl-dropdown__item:focus-visible {
+	outline: none;
+}
+
+.notectl-dropdown__item-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	font-weight: 600;
+	color: var(--notectl-fg-muted);
+	flex-shrink: 0;
+}
+
+.notectl-dropdown__item-label {
+	flex: 1;
+}
+
+/* Overflow behavior: flow mode — toolbar wraps to additional rows */
+.notectl-toolbar[data-overflow="flow"] {
+	flex-wrap: wrap;
+	overflow: visible;
+}
+
+/* Overflow behavior: none — toolbar clips without any responsive behavior */
+.notectl-toolbar[data-overflow="none"] {
+	flex-wrap: nowrap;
+	overflow: hidden;
+}
+
+/* Overflow: hidden items (burger-menu mode) */
+.notectl-toolbar-btn--overflow-hidden,
+.notectl-toolbar-separator--overflow-hidden {
+	display: none;
+}
+
+/* Overflow "more" button */
+.notectl-toolbar-overflow-btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border: 1px solid transparent;
+	border-radius: 4px;
+	background: transparent;
+	cursor: pointer;
+	color: var(--notectl-fg);
+	font-size: 16px;
+	line-height: 1;
+	padding: 0;
+	flex-shrink: 0;
+	margin-left: auto;
+	transition: background 0.1s, border-color 0.1s;
+}
+
+.notectl-toolbar-overflow-btn:hover {
+	background: var(--notectl-hover-bg);
+	border-color: var(--notectl-border);
+}
+
+.notectl-toolbar-overflow-btn--hidden {
+	display: none;
+}
+
+.notectl-toolbar-overflow-btn:focus-visible {
+	box-shadow: 0 0 0 2px var(--notectl-focus-ring);
+	outline: none;
+}
+
+/* Dropdown item states shared by all dropdown menus (including overflow) */
+.notectl-dropdown__item:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.notectl-dropdown__item:disabled:hover {
+	background: none;
+}
+
+.notectl-dropdown__item--active {
+	color: var(--notectl-primary-fg);
+}
+
+.notectl-dropdown__item-icon svg {
+	display: block;
+	width: 16px;
+	height: 16px;
+	fill: currentColor;
+}
+
+.notectl-dropdown__separator {
+	height: 1px;
+	background: var(--notectl-border);
+	margin: 4px 0;
+}
+`), this.context = t2, this.popupController = new f(() => this.getActiveElement()), this.tooltip = new v(() => this.popupController?.isOpen() ?? false), t2.registerService(w, { refresh: () => this.updateButtonStates(t2.getState()), closePopup: () => this.popupController?.close() }), this.createToolbarElement();
+  }
+  getOverflowBehavior() {
+    return this.overflowBehavior;
+  }
+  setOverflowBehavior(t2) {
+    t2 !== this.overflowBehavior && (this.overflowBehavior = t2, this.applyOverflowBehavior(), this.renderItems());
+  }
+  onReady() {
+    this.renderItems();
+  }
+  destroy() {
+    this.overflowController?.destroy(), this.overflowController = null, this.popupController?.destroy(), this.popupController = null, this.tooltip?.destroy(), this.tooltip = null, this.toolbarElement && (this.toolbarElement.remove(), this.toolbarElement = null), this.buttons = [], this.visibleElements = [], this.context = null;
+  }
+  onStateChange(t2, e2, o2) {
+    this.updateButtonStates(e2);
+  }
+  onReadOnlyChange(t2) {
+    this.toolbarElement && (this.toolbarElement.hidden = t2);
+  }
+  onConfigure(t2) {
+    for (const [e2, o2] of Object.entries(t2)) false === o2 ? this.hiddenItems.add(e2) : this.hiddenItems.delete(e2);
+    this.renderItems();
+  }
+  createToolbarElement() {
+    if (!this.context) return;
+    this.toolbarElement && this.toolbarElement.remove(), this.buttons = [];
+    const t2 = this.context.getPluginContainer("top");
+    this.toolbarElement = document.createElement("div"), this.toolbarElement.setAttribute("role", "toolbar"), this.toolbarElement.setAttribute("aria-label", this.locale.formattingOptionsAria), this.toolbarElement.setAttribute("data-notectl-no-print", ""), this.toolbarElement.className = "notectl-toolbar", this.toolbarElement.addEventListener("keydown", (t3) => this.handleToolbarKeydown(t3)), this.applyOverflowBehavior(), t2.appendChild(this.toolbarElement);
+  }
+  applyOverflowBehavior() {
+    this.toolbarElement && this.context && (this.overflowController?.destroy(), this.overflowController = null, this.toolbarElement.setAttribute("data-overflow", this.overflowBehavior), this.overflowBehavior === d.BurgerMenu ? this.overflowController = new u({ toolbar: this.toolbarElement, ariaLabel: this.locale.moreToolsAria, context: this.context, onOverflowChange: (t2, e2) => {
+      this.visibleElements = e2 ? [...t2, e2] : [...t2], this.initRovingTabindex();
+    }, onItemActivated: (t2, e2) => {
+      this.activateButton(t2, e2);
+    }, getActiveElement: () => this.getActiveElement() }) : this.visibleElements = []);
+  }
+  renderItems() {
+    if (this.context && this.toolbarElement) {
+      for (const t2 of this.buttons) t2.element.remove();
+      this.buttons = [];
+      for (const t2 of this.toolbarElement.querySelectorAll(".notectl-toolbar-separator")) t2.remove();
+      this.layoutConfig ? this.renderItemsByLayout() : this.renderItemsByPriority(), this.buttons.length > 0 && !this.toolbarElement.parentElement && this.context.getPluginContainer("top").appendChild(this.toolbarElement), this.overflowController?.update(this.buttons), this.initRovingTabindex(), this.updateButtonStates(this.context.getState());
+    }
+  }
+  getTabElements() {
+    return this.visibleElements.length > 0 ? this.visibleElements : this.buttons.map((t2) => t2.element);
+  }
+  initRovingTabindex() {
+    const t2 = this.getTabElements(), e2 = r(t2);
+    this.focusedIndex = e2 >= 0 ? e2 : 0, i(t2, this.focusedIndex);
+  }
+  setRovingFocus(t2) {
+    const e2 = this.getTabElements();
+    t2 < 0 || t2 >= e2.length || (this.focusedIndex = t2, i(e2, t2), e2[t2]?.focus());
+  }
+  getActiveElement() {
+    const t2 = this.toolbarElement?.getRootNode();
+    return t2 instanceof ShadowRoot ? t2.activeElement : document.activeElement;
+  }
+  syncFocusedIndex() {
+    const t2 = this.getActiveElement(), e2 = this.getTabElements().findIndex((e3) => e3 === t2);
+    e2 >= 0 && (this.focusedIndex = e2);
+  }
+  handleToolbarKeydown(t2) {
+    const e2 = this.getTabElements();
+    if (0 !== e2.length) switch (this.syncFocusedIndex(), t2.key) {
+      case "ArrowRight": {
+        t2.preventDefault();
+        const o2 = l(e2, this.focusedIndex, 1);
+        this.setRovingFocus(o2);
+        break;
+      }
+      case "ArrowLeft": {
+        t2.preventDefault();
+        const o2 = l(e2, this.focusedIndex, -1);
+        this.setRovingFocus(o2);
+        break;
+      }
+      case "Home": {
+        t2.preventDefault();
+        const o2 = r(e2);
+        o2 >= 0 && this.setRovingFocus(o2);
+        break;
+      }
+      case "End": {
+        t2.preventDefault();
+        const o2 = s(e2);
+        o2 >= 0 && this.setRovingFocus(o2);
+        break;
+      }
+      case "Enter":
+      case " ": {
+        t2.preventDefault();
+        const o2 = e2[this.focusedIndex], n2 = this.buttons.find((t3) => t3.element === o2);
+        n2 && this.activateButton(n2.element, n2.item);
+        break;
+      }
+    }
+  }
+  activateButton(t2, e2) {
+    this.tooltip?.hide(), e2.popupType && this.context ? this.popupController?.toggle(t2, e2, this.context) : this.context?.executeCommand(e2.command);
+  }
+  renderItemsByLayout() {
+    if (!this.context || !this.toolbarElement || !this.layoutConfig) return;
+    const t2 = this.context.getSchemaRegistry();
+    let e2 = true;
+    for (const o2 of this.layoutConfig.groups) {
+      const n2 = [];
+      for (const e3 of o2) {
+        const o3 = t2.getToolbarItemsByPlugin(e3).filter((t3) => !this.hiddenItems.has(t3.id));
+        o3.sort((t3, e4) => (t3.priority ?? 100) - (e4.priority ?? 100)), n2.push(...o3);
+      }
+      if (0 !== n2.length) {
+        e2 || this.toolbarElement.appendChild(b()), e2 = false;
+        for (const t3 of n2) {
+          const e3 = this.createButton(t3);
+          this.toolbarElement.appendChild(e3.element), this.buttons.push(e3);
+        }
+      }
+    }
+    0 === this.buttons.length && this.toolbarElement.remove();
+  }
+  renderItemsByPriority() {
+    if (!this.context || !this.toolbarElement) return;
+    const t2 = this.context.getSchemaRegistry().getToolbarItems().filter((t3) => !this.hiddenItems.has(t3.id));
+    if (0 === t2.length) return void this.toolbarElement.remove();
+    const e2 = [...t2].sort((t3, e3) => (t3.priority ?? 100) - (e3.priority ?? 100));
+    if (e2.some((t3) => t3.separatorAfter)) for (let t3 = 0; t3 < e2.length; t3++) {
+      const o2 = e2[t3];
+      if (!o2) continue;
+      const n2 = this.createButton(o2);
+      this.toolbarElement.appendChild(n2.element), this.buttons.push(n2), o2.separatorAfter && t3 < e2.length - 1 && this.toolbarElement.appendChild(b());
+    }
+    else {
+      const t3 = /* @__PURE__ */ new Map();
+      for (const o3 of e2) {
+        const e3 = t3.get(o3.group) ?? [];
+        e3.push(o3), t3.set(o3.group, e3);
+      }
+      let o2 = true;
+      for (const [, e3] of t3) {
+        o2 || this.toolbarElement.appendChild(b()), o2 = false;
+        for (const t4 of e3) {
+          const e4 = this.createButton(t4);
+          this.toolbarElement.appendChild(e4.element), this.buttons.push(e4);
+        }
+      }
+    }
+  }
+  createButton(t2) {
+    const e2 = document.createElement("button");
+    e2.type = "button", e2.className = `notectl-toolbar-btn notectl-toolbar-btn--${t2.id}`, e2.setAttribute("aria-pressed", "false"), e2.setAttribute("aria-label", t2.label), e2.setAttribute("data-toolbar-item", t2.id), e2.setAttribute("data-tooltip", t2.tooltip ?? t2.label), t2.popupType && (e2.setAttribute("aria-haspopup", "true"), e2.setAttribute("aria-expanded", "false"));
+    const o2 = document.createElement("span");
+    return o2.className = "notectl-toolbar-btn__icon", o2.innerHTML = t2.icon, e2.appendChild(o2), e2.addEventListener("mousedown", (o3) => {
+      o3.preventDefault(), this.activateButton(e2, t2);
+    }), e2.addEventListener("mouseenter", () => this.tooltip?.show(e2)), e2.addEventListener("mouseleave", () => this.tooltip?.hide()), e2.addEventListener("focus", () => this.tooltip?.show(e2)), e2.addEventListener("blur", () => this.tooltip?.hide()), { element: e2, item: t2 };
+  }
+  updateButtonStates(t2) {
+    for (const e2 of this.buttons) {
+      const o2 = e2.item.isActive?.(t2) ?? false, n2 = e2.item.isEnabled?.(t2) ?? true;
+      e2.element.setAttribute("aria-pressed", String(o2)), e2.element.classList.toggle("notectl-toolbar-btn--active", o2), e2.element.disabled = !n2, n2 ? e2.element.removeAttribute("aria-disabled") : e2.element.setAttribute("aria-disabled", "true");
+    }
+    this.overflowController?.updateItemStates(t2);
+  }
+}
+export {
+  g as T,
+  w as a,
+  c as b,
+  a as c,
+  d
+};
+//# sourceMappingURL=ToolbarPlugin-DFkl1uYO.mjs.map