digi-mathchem-editor 1.0.27 → 1.0.28

package/dist/digi-mathchem-editor.es.js

@@ -1,6 +1,6 @@
 var G = Object.defineProperty;
-var Y = (o, t, e) => t in o ? G(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var U = (o, t, e) => Y(o, typeof t != "symbol" ? t + "" : t, e);
+var Y = (a, t, e) => t in a ? G(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
+var U = (a, t, e) => Y(a, typeof t != "symbol" ? t + "" : t, e);
 import { MathfieldElement as V } from "mathlive";
 const J = {
   cmeLeftRightAbove: {
@@ -206,7 +206,10 @@ const z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAA
       // Group 1 – Cancel (1 col × 1 row)
       { type: "sep", cols: 1, small: !0 },
       {
-        label: "⌿",
+        label: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <rect x="9" y="7" width="6" height="10" rx="1" stroke="#2E7D32" stroke-width="2" fill="none" />
+            <line x1="9" y1="21" x2="15" y2="3" stroke="#666" stroke-width="2" stroke-linecap="round" />
+          </svg>`,
         insert: "\\cancel{#?}",
         isWidget: !0,
         title: "Cancel strike"
@@ -267,8 +270,8 @@ const z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAA
         small: !0,
         moreItems: [
           { label: "≠", insert: "\\neq", title: "Not equal" },
-          { label: "≉", insert: "\\napprox", title: "Not almost equal to" },
-          { label: "≢", insert: "\\nequiv", title: "Not identical to" },
+          { label: "≉", insert: "\\not\\approx", title: "Not almost equal to" },
+          { label: "≢", insert: "\\not\\equiv", title: "Not identical to" },
           { label: "≁", insert: "\\nsim", title: "Not similar" }
         ]
       },
@@ -4258,7 +4261,10 @@ const z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAA
       // Group 1 – Cancel (1 col × 1 row)
       { type: "sep", cols: 1, small: !0 },
       {
-        label: "⌿",
+        label: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <rect x="9" y="7" width="6" height="10" rx="1" stroke="#2E7D32" stroke-width="2" fill="none" />
+            <line x1="9" y1="21" x2="15" y2="3" stroke="#666" stroke-width="2" stroke-linecap="round" />
+          </svg>`,
         insert: "\\cancel{#?}",
         isWidget: !0,
         title: "Cancel strike"
@@ -6072,24 +6078,32 @@ const z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAA
         label: '<svg width="26" height="26" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="3" style="display: inline-block; vertical-align: middle; color: #2E7D32"><rect x="10" y="6" width="8" height="14" rx="1" /><rect x="28" y="6" width="8" height="14" rx="1" /><rect x="46" y="6" width="8" height="14" rx="1" /><rect x="10" y="25" width="8" height="14" rx="1" /><rect x="28" y="25" width="8" height="14" rx="1" /><rect x="46" y="25" width="8" height="14" rx="1" /><rect x="10" y="44" width="8" height="14" rx="1" /><rect x="28" y="44" width="8" height="14" rx="1" /><rect x="46" y="44" width="8" height="14" rx="1" /></svg>',
         insert: "matrix",
         cls: "template",
+        action: "MATRIX_HOVER",
+        matrixType: "matrix",
         title: "3×3 Matrix"
       },
       {
         label: '<svg width="26" height="26" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="3" style="display: inline-block; vertical-align: middle; color: #2E7D32"><line x1="8" y1="4" x2="8" y2="60" stroke="#222" stroke-width="4" /><line x1="56" y1="4" x2="56" y2="60" stroke="#222" stroke-width="4" /><rect x="18" y="12" width="8" height="14" rx="1" /><rect x="38" y="12" width="8" height="14" rx="1" /><rect x="18" y="38" width="8" height="14" rx="1" /><rect x="38" y="38" width="8" height="14" rx="1" /></svg>',
         insert: "vmatrix",
         cls: "template",
+        action: "MATRIX_HOVER",
+        matrixType: "vmatrix",
         title: "2×2 Determinant"
       },
       {
         label: '<svg width="26" height="26" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="3" style="display: inline-block; vertical-align: middle; color: #2E7D32"><path d="M14 6H8V58H14" stroke="#222" stroke-width="4" fill="none" /><path d="M50 6H56V58H50" stroke="#222" stroke-width="4" fill="none" /><rect x="18" y="12" width="8" height="14" rx="1" /><rect x="38" y="12" width="8" height="14" rx="1" /><rect x="18" y="38" width="8" height="14" rx="1" /><rect x="38" y="38" width="8" height="14" rx="1" /></svg>',
         insert: "bmatrix",
         cls: "template",
+        action: "MATRIX_HOVER",
+        matrixType: "bmatrix",
         title: "2×2 Matrix"
       },
       {
         label: '<svg width="26" height="26" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="3" style="display: inline-block; vertical-align: middle; color: #2E7D32"><path d="M16 6C8 16 8 48 16 58" stroke="#222" stroke-width="4" fill="none" /><path d="M48 6C56 16 56 48 48 58" stroke="#222" stroke-width="4" fill="none" /><rect x="18" y="12" width="8" height="14" rx="1" /><rect x="38" y="12" width="8" height="14" rx="1" /><rect x="18" y="38" width="8" height="14" rx="1" /><rect x="38" y="38" width="8" height="14" rx="1" /></svg>',
         insert: "pmatrix",
         cls: "template",
+        action: "MATRIX_HOVER",
+        matrixType: "pmatrix",
         title: "2×2 Parenthesis Matrix"
       },
       // { label: '□', insert: 'matrix', cls: 'template', title: 'Matrix' },
@@ -7353,58 +7367,58 @@ const z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAA
   //   ]
   // },
 ];
-function tt(o) {
-  if (!o) return "";
+function tt(a) {
+  if (!a) return "";
   let t = "", e = 0;
-  for (; e < o.length; ) {
-    let r = o.indexOf("\\placeholder", e);
+  for (; e < a.length; ) {
+    let r = a.indexOf("\\placeholder", e);
     if (r === -1) {
-      t += o.slice(e);
+      t += a.slice(e);
       break;
     }
-    if (t += o.slice(e, r), e = r + 12, o[e] === "[") {
-      let l = 1;
-      for (e++; e < o.length && l > 0; )
-        o[e] === "[" ? l++ : o[e] === "]" && l--, e++;
+    if (t += a.slice(e, r), e = r + 12, a[e] === "[") {
+      let s = 1;
+      for (e++; e < a.length && s > 0; )
+        a[e] === "[" ? s++ : a[e] === "]" && s--, e++;
     }
-    if (o[e] === "{") {
-      let l = 1, a = e + 1;
-      for (e++; e < o.length && l > 0; )
-        o[e] === "{" ? l++ : o[e] === "}" && l--, e++;
-      let s = o.slice(a, e - 1);
-      s.trim() === "" ? t += "\\quad " : t += s;
+    if (a[e] === "{") {
+      let s = 1, o = e + 1;
+      for (e++; e < a.length && s > 0; )
+        a[e] === "{" ? s++ : a[e] === "}" && s--, e++;
+      let l = a.slice(o, e - 1);
+      l.trim() === "" ? t += "\\quad " : t += l;
     }
   }
   return t;
 }
-function et(o) {
-  if (!o) return "";
+function et(a) {
+  if (!a) return "";
   let t = "", e = 0;
   const r = "\\text{";
-  for (; e < o.length; ) {
-    const l = o.indexOf(r, e);
-    if (l === -1) {
-      t += o.slice(e);
+  for (; e < a.length; ) {
+    const s = a.indexOf(r, e);
+    if (s === -1) {
+      t += a.slice(e);
       break;
     }
-    t += o.slice(e, l);
-    let a = 1, s = l + r.length;
-    for (; s < o.length && a > 0; )
-      o[s] === "{" ? a++ : o[s] === "}" && a--, s++;
-    const n = o.slice(l + r.length, s - 1);
-    /^['"/]+$/.test(n) || n.includes("\\textquotedbl") || n.includes("\\textquotesingle") ? t += "\\text{" + n + "}" : t += n, e = s;
+    t += a.slice(e, s);
+    let o = 1, l = s + r.length;
+    for (; l < a.length && o > 0; )
+      a[l] === "{" ? o++ : a[l] === "}" && o--, l++;
+    const n = a.slice(s + r.length, l - 1);
+    /^['"/]+$/.test(n) || n.includes("\\textquotedbl") || n.includes("\\textquotesingle") ? t += "\\text{" + n + "}" : t += n, e = l;
   }
   return t;
 }
-function P(o, t) {
+function P(a, t) {
   let e = 0, r = t - 1;
-  for (; r >= 0 && o[r] === "\\"; )
+  for (; r >= 0 && a[r] === "\\"; )
     e++, r--;
   return e % 2 === 1;
 }
-function F(o) {
-  if (!o || typeof o != "string") return o || "";
-  let t = o;
+function F(a) {
+  if (!a || typeof a != "string") return a || "";
+  let t = a;
   const e = [
     "\\mathbfit{",
     "\\boldsymbol{",
@@ -7423,29 +7437,29 @@ function F(o) {
     "\\mathsf{",
     "\\mathtt{"
   ];
-  let r = !0, l = 0;
-  for (; r && l < 10; ) {
-    r = !1, l++;
-    for (const a of e) {
-      let s = 0;
-      for (; s < t.length; ) {
-        const n = t.indexOf(a, s);
+  let r = !0, s = 0;
+  for (; r && s < 10; ) {
+    r = !1, s++;
+    for (const o of e) {
+      let l = 0;
+      for (; l < t.length; ) {
+        const n = t.indexOf(o, l);
         if (n === -1) break;
-        let h = 1, c = n + a.length;
+        let h = 1, c = n + o.length;
         for (; c < t.length && h > 0; )
           t[c] === "{" && !P(t, c) ? h++ : t[c] === "}" && !P(t, c) && h--, c++;
         if (h === 0) {
-          const w = t.slice(n + a.length, c - 1);
-          t = t.slice(0, n) + w + t.slice(c), r = !0, s = n;
+          const g = t.slice(n + o.length, c - 1);
+          t = t.slice(0, n) + g + t.slice(c), r = !0, l = n;
         } else
-          s = n + a.length;
+          l = n + o.length;
       }
     }
   }
   return t;
 }
-function it(o) {
-  return !o || typeof o != "string" ? !1 : [
+function it(a) {
+  return !a || typeof a != "string" ? !1 : [
     /[\^_]/,
     /\\frac\b/,
     /\\tfrac\b/,
@@ -7483,40 +7497,40 @@ function it(o) {
     /\\alpha\b|\\beta\b|\\gamma\b|\\delta\b|\\epsilon\b|\\zeta\b|\\eta\b|\\theta\b|\\iota\b|\\kappa\b|\\lambda\b|\\mu\b|\\nu\b|\\xi\b|\\pi\b|\\rho\b|\\sigma\b|\\tau\b|\\upsilon\b|\\phi\b|\\chi\b|\\psi\b|\\omega\b/,
     /\\Gamma\b|\\Delta\b|\\Theta\b|\\Lambda\b|\\Xi\b|\\Pi\b|\\Sigma\b|\\Upsilon\b|\\Phi\b|\\Psi\b|\\Omega\b/,
     /\\pm\b|\\times\b|\\div\b|\\leq\b|\\geq\b|\\neq\b|\\approx\b|\\infty\b|\\partial\b|\\to\b|\\rightarrow\b/
-  ].some((e) => e.test(o));
+  ].some((e) => e.test(a));
 }
-function lt(o, t) {
-  return o ? it(o) ? o : (t == null ? void 0 : t.fontFamily) === "sans-serif" ? `\\mathsf{${o}}` : (t == null ? void 0 : t.fontFamily) === "monospace" ? `\\mathtt{${o}}` : (t == null ? void 0 : t.fontFamily) === "roman" ? `\\mathrm{${o}}` : o : "";
+function lt(a, t) {
+  return a ? it(a) ? a : (t == null ? void 0 : t.fontFamily) === "sans-serif" ? `\\mathsf{${a}}` : (t == null ? void 0 : t.fontFamily) === "monospace" ? `\\mathtt{${a}}` : (t == null ? void 0 : t.fontFamily) === "roman" ? `\\mathrm{${a}}` : a : "";
 }
-function q(o, t, e, r) {
-  if (!o) return "";
+function q(a, t, e, r) {
+  if (!a) return "";
   if (!t && !e)
-    return lt(o, { fontFamily: r });
-  const l = r === "sans-serif", a = r === "monospace", s = r === "roman";
-  return t && e ? l ? `\\boldsymbol{\\mathsf{${o}}}` : a ? `\\boldsymbol{\\mathtt{${o}}}` : s ? `\\mathbfit{\\mathrm{${o}}}` : `\\mathbfit{${o}}` : t ? l ? `\\boldsymbol{\\mathsf{${o}}}` : a ? `\\boldsymbol{\\mathtt{${o}}}` : s ? `\\mathbf{\\mathrm{${o}}}` : `\\mathbf{${o}}` : e ? l ? `\\mathsf{${o}}` : a ? `\\mathtt{${o}}` : s ? `\\mathit{\\mathrm{${o}}}` : `\\mathit{${o}}` : o;
+    return lt(a, { fontFamily: r });
+  const s = r === "sans-serif", o = r === "monospace", l = r === "roman";
+  return t && e ? s ? `\\boldsymbol{\\mathsf{${a}}}` : o ? `\\boldsymbol{\\mathtt{${a}}}` : l ? `\\mathbfit{\\mathrm{${a}}}` : `\\mathbfit{${a}}` : t ? s ? `\\boldsymbol{\\mathsf{${a}}}` : o ? `\\boldsymbol{\\mathtt{${a}}}` : l ? `\\mathbf{\\mathrm{${a}}}` : `\\mathbf{${a}}` : e ? s ? `\\mathsf{${a}}` : o ? `\\mathtt{${a}}` : l ? `\\mathit{\\mathrm{${a}}}` : `\\mathit{${a}}` : a;
 }
-function T(o, t, e, r) {
-  if (!o) return "";
-  let l = o.trim();
-  const a = l.match(/^\\displaylines\s*\{([\s\S]*)\}$/i);
-  if (a && (l = a[1].trim()), l.match(/^\\begin\{(array|matrix|pmatrix|bmatrix|vmatrix|Vmatrix|align|aligned|gather|cases)\}([\s\S]*)\\end\{\1\}$/i))
-    return l;
-  const n = l.match(/^\\begin\{(array|gather)\}(\{[\s\S]*?\})?([\s\S]*?)\\end\{\1\}$/i);
-  if (n && (l = n[3].trim()), /\\\\|\\cr|\\newline|\\par|\n/.test(l)) {
+function B(a, t, e, r) {
+  if (!a) return "";
+  let s = a.trim();
+  const o = s.match(/^\\displaylines\s*\{([\s\S]*)\}$/i);
+  if (o && (s = o[1].trim()), s.match(/^\\begin\{(array|matrix|pmatrix|bmatrix|vmatrix|Vmatrix|align|aligned|gather|cases)\}([\s\S]*)\\end\{\1\}$/i))
+    return s;
+  const n = s.match(/^\\begin\{(array|gather)\}(\{[\s\S]*?\})?([\s\S]*?)\\end\{\1\}$/i);
+  if (n && (s = n[3].trim()), /\\\\|\\cr|\\newline|\\par|\n/.test(s)) {
     const h = /\\\\(?:\[[^\]]*\])?|\\cr|\\newline|\\par|\n/;
-    return `\\displaylines{${l.split(h).map((x) => {
-      const k = x.trim();
-      return k ? q(k, t, e, r) : "";
+    return `\\displaylines{${s.split(h).map((x) => {
+      const u = x.trim();
+      return u ? q(u, t, e, r) : "";
     }).filter((x) => x.length > 0).join(" \\\\ ")}}`;
   }
-  return q(l, t, e, r);
+  return q(s, t, e, r);
 }
-function rt(o) {
-  return o ? o.replace(/\\enclose\{([^}]*)\}\s*\[.*?\]/g, "\\enclose{$1}") : "";
+function rt(a) {
+  return a ? a.replace(/\\enclose\{([^}]*)\}\s*\[.*?\]/g, "\\enclose{$1}") : "";
 }
-function st(o = "") {
-  if (typeof o != "string") return o;
-  let t = o.replace(/\\textasciitilde/g, "\\text{~}").replace(/\\textasciicircum/g, "\\text{^}").replace(/\\textasteriskcentered/g, "*").replace(/\\char96/g, "`");
+function st(a = "") {
+  if (typeof a != "string") return a;
+  let t = a.replace(/\\textasciitilde/g, "\\text{~}").replace(/\\textasciicircum/g, "\\text{^}").replace(/\\textasteriskcentered/g, "*").replace(/\\char96/g, "`");
   return t.includes("\\ce{") && (t = t.replace(/\\ce\{([\s\S]*?)\}/g, (e, r) => r.includes("\\{") || r.includes("\\}") || r.includes("\\lbrace") || r.includes("\\rbrace") ? r : `\\ce{${r.replace(/\\left\[/g, "[").replace(/\\right\]/g, "]").replace(/\\lbrack\b/g, "[").replace(/\\rbrack\b/g, "]").replace(/\\left\(/g, "(").replace(/\\right\)/g, ")").replace(/\\left\|/g, "|").replace(/\\right\|/g, "|").replace(/\\left\./g, "").replace(/\\right\./g, "")}}`)), t;
 }
 const Z = "data-mathfield-shadow-styles", ot = `
@@ -7821,12 +7835,12 @@ const Z = "data-mathfield-shadow-styles", ot = `
       padding-top: 0.1em;
     }
 `;
-function I(o) {
-  const t = o == null ? void 0 : o.shadowRoot;
+function L(a) {
+  const t = a == null ? void 0 : a.shadowRoot;
   if (!t) return;
-  const e = o.hasAttribute("read-only") || o.hasAttribute("readonly"), r = e ? "readonly" : "editable";
-  let l = t.querySelector(`[${Z}]`);
-  l && l.getAttribute("data-cache") === r || (l || (l = document.createElement("style"), l.setAttribute(Z, "true"), t.appendChild(l)), l.setAttribute("data-cache", r), l.textContent = `
+  const e = a.hasAttribute("read-only") || a.hasAttribute("readonly"), r = e ? "readonly" : "editable";
+  let s = t.querySelector(`[${Z}]`);
+  s && s.getAttribute("data-cache") === r || (s || (s = document.createElement("style"), s.setAttribute(Z, "true"), t.appendChild(s)), s.setAttribute("data-cache", r), s.textContent = `
     ${e ? `
       :host, :host * { cursor: pointer !important; }
       .ML__latex, .ML__content, .ML__container, .ML__virtual-keyboard-toggle { cursor: pointer !important; }
@@ -7835,21 +7849,21 @@ function I(o) {
   `);
 }
 function at() {
-  document.querySelectorAll("math-field").forEach(I);
+  document.querySelectorAll("math-field").forEach(L);
 }
 let N = null;
 function nt() {
-  N || (at(), N = new MutationObserver((o) => {
+  N || (at(), N = new MutationObserver((a) => {
     var t, e, r;
-    for (const l of o) {
-      if (l.type === "attributes" && ((t = l.target.tagName) == null ? void 0 : t.toLowerCase()) === "math-field") {
-        I(l.target);
+    for (const s of a) {
+      if (s.type === "attributes" && ((t = s.target.tagName) == null ? void 0 : t.toLowerCase()) === "math-field") {
+        L(s.target);
         continue;
       }
-      if (l.addedNodes)
-        for (const a of l.addedNodes)
-          a instanceof Element && (((e = a.tagName) == null ? void 0 : e.toLowerCase()) === "math-field" && requestAnimationFrame(() => I(a)), (r = a.querySelectorAll) == null || r.call(a, "math-field").forEach(
-            (s) => requestAnimationFrame(() => I(s))
+      if (s.addedNodes)
+        for (const o of s.addedNodes)
+          o instanceof Element && (((e = o.tagName) == null ? void 0 : e.toLowerCase()) === "math-field" && requestAnimationFrame(() => L(o)), (r = o.querySelectorAll) == null || r.call(o, "math-field").forEach(
+            (l) => requestAnimationFrame(() => L(l))
           ));
     }
   }), N.observe(document.body, {
@@ -7869,20 +7883,20 @@ const Q = [
   { id: "Phonetic", name: "Phonetic", ranges: [[592, 687], [688, 767], [7424, 7551], [7552, 7615], [43824, 43887]] },
   { id: "Other", name: "Other", ranges: [[8352, 8399], [8448, 8527], [8960, 9215], [9472, 9599], [9600, 9631], [9632, 9727], [10240, 10495], [11008, 11263]] }
 ], ht = () => {
-  const o = [];
+  const a = [];
   return Q.slice(1).forEach((t) => {
     t.ranges.forEach((e) => {
       for (let r = e[0]; r <= e[1]; r++) {
         if (r >= 127 && r <= 159) continue;
-        const l = String.fromCodePoint(r);
-        new RegExp("\\p{C}", "u").test(l) || o.push({
+        const s = String.fromCodePoint(r);
+        new RegExp("\\p{C}", "u").test(s) || a.push({
           code: r.toString(16).toUpperCase().padStart(4, "0"),
-          char: l,
+          char: s,
           category: t.id
         });
       }
     });
-  }), o;
+  }), a;
 }, ct = ht();
 class dt {
   constructor(t = {}) {
@@ -7916,61 +7930,61 @@ class dt {
     }), e;
   }
   render(t) {
-    if (this.overlay && this.overlay.parentNode && this.overlay.parentNode.removeChild(this.overlay), this.overlay = document.createElement("div"), this.overlay.className = "scm-overlay", this.overlay.addEventListener("mousedown", (s) => {
-      s.stopPropagation(), this.close();
-    }), this.modal = document.createElement("div"), this.modal.className = "scm-modal", this.modal.addEventListener("mousedown", (s) => s.stopPropagation()), t) {
-      let s = t.x - 120, n = t.y;
-      s < 10 && (s = 10), s + 230 > window.innerWidth && (s = window.innerWidth - 240), n + 200 > window.innerHeight && (n = window.innerHeight - 210), this.modal.style.top = `${n}px`, this.modal.style.left = `${s}px`, this.modal.style.transform = "none";
+    if (this.overlay && this.overlay.parentNode && this.overlay.parentNode.removeChild(this.overlay), this.overlay = document.createElement("div"), this.overlay.className = "scm-overlay", this.overlay.addEventListener("mousedown", (l) => {
+      l.stopPropagation(), this.close();
+    }), this.modal = document.createElement("div"), this.modal.className = "scm-modal", this.modal.addEventListener("mousedown", (l) => l.stopPropagation()), t) {
+      let l = t.x - 120, n = t.y;
+      l < 10 && (l = 10), l + 230 > window.innerWidth && (l = window.innerWidth - 240), n + 200 > window.innerHeight && (n = window.innerHeight - 210), this.modal.style.top = `${n}px`, this.modal.style.left = `${l}px`, this.modal.style.transform = "none";
     } else
       this.modal.style.top = "50%", this.modal.style.left = "50%", this.modal.style.transform = "translate(-50%, -50%)";
     const e = document.createElement("div");
     e.className = "scm-toolbar";
     const r = document.createElement("input");
-    r.type = "text", r.placeholder = "Code", r.className = "scm-code-input", r.value = this.searchCode, r.addEventListener("input", (s) => {
-      this.searchCode = s.target.value, this.updateGrid();
+    r.type = "text", r.placeholder = "Code", r.className = "scm-code-input", r.value = this.searchCode, r.addEventListener("input", (l) => {
+      this.searchCode = l.target.value, this.updateGrid();
     });
-    const l = document.createElement("select");
-    l.className = "scm-category-select", Q.forEach((s) => {
+    const s = document.createElement("select");
+    s.className = "scm-category-select", Q.forEach((l) => {
       const n = document.createElement("option");
-      n.value = s.id, n.textContent = s.name, l.appendChild(n);
-    }), l.value = this.selectedCategory, l.addEventListener("change", (s) => {
-      this.selectedCategory = s.target.value, this.updateGrid();
-    }), e.appendChild(r), e.appendChild(l), this.modal.appendChild(e);
-    const a = document.createElement("div");
-    a.className = "scm-body", this.bodyContainer = document.createElement("div"), this.bodyContainer.className = "scm-grid-container", a.appendChild(this.bodyContainer), this.modal.appendChild(a), this.updateGrid(), this.overlay.appendChild(this.modal), document.body.appendChild(this.overlay), setTimeout(() => r.focus(), 50);
+      n.value = l.id, n.textContent = l.name, s.appendChild(n);
+    }), s.value = this.selectedCategory, s.addEventListener("change", (l) => {
+      this.selectedCategory = l.target.value, this.updateGrid();
+    }), e.appendChild(r), e.appendChild(s), this.modal.appendChild(e);
+    const o = document.createElement("div");
+    o.className = "scm-body", this.bodyContainer = document.createElement("div"), this.bodyContainer.className = "scm-grid-container", o.appendChild(this.bodyContainer), this.modal.appendChild(o), this.updateGrid(), this.overlay.appendChild(this.modal), document.body.appendChild(this.overlay), setTimeout(() => r.focus(), 50);
   }
   updateGrid() {
     if (!this.bodyContainer) return;
     this.bodyContainer.innerHTML = "";
     const t = this.getFilteredCharacters(), e = this.getGroupedCharacters(t), r = Object.entries(e);
     if (r.length === 0 || t.length === 0) {
-      const l = document.createElement("div");
-      l.className = "scm-no-results", l.textContent = "No characters found.", this.bodyContainer.appendChild(l);
+      const s = document.createElement("div");
+      s.className = "scm-no-results", s.textContent = "No characters found.", this.bodyContainer.appendChild(s);
       return;
     }
-    r.forEach(([l, a]) => {
-      const s = document.createElement("div");
-      s.className = "scm-category-group";
+    r.forEach(([s, o]) => {
+      const l = document.createElement("div");
+      l.className = "scm-category-group";
       const n = document.createElement("div");
-      n.className = "scm-char-grid", a.forEach((h) => {
+      n.className = "scm-char-grid", o.forEach((h) => {
         const c = document.createElement("button");
-        c.type = "button", c.className = "scm-char-btn", c.title = `U+${h.code}`, c.textContent = h.char, c.addEventListener("click", (w) => {
-          w.preventDefault(), this.onInsert(h.char), this.close();
+        c.type = "button", c.className = "scm-char-btn", c.title = `U+${h.code}`, c.textContent = h.char, c.addEventListener("click", (g) => {
+          g.preventDefault(), this.onInsert(h.char), this.close();
         }), n.appendChild(c);
-      }), s.appendChild(n), this.bodyContainer.appendChild(s);
+      }), l.appendChild(n), this.bodyContainer.appendChild(l);
     });
   }
   destroy() {
     this.close();
   }
 }
-const mt = "1.0.27", S = {
+const mt = "1.0.28", E = {
   version: mt
 };
 typeof window < "u" && (window.MathfieldElement ? window.MathfieldElement.fontsDirectory = "https://cdn.jsdelivr.net/npm/mathlive/dist/fonts" : V && (V.fontsDirectory = "https://cdn.jsdelivr.net/npm/mathlive/dist/fonts"));
-const L = class L {
+const D = class D {
   constructor(t = {}) {
-    this.version = L.VERSION, this.options = t, this.onInsert = t.onInsert || (() => {
+    this.version = D.VERSION, this.options = t, this.onInsert = t.onInsert || (() => {
     }), this.onClose = t.onClose || (() => {
     }), this.mode = t.mode || "math", this.title = t.title || null, this.isOpen = !1, this.isEditing = !1, this.initialLatex = "", this.activeGroup = 0, this.explicitToggle = !1, this.activeStyles = {
       bold: !1,
@@ -7978,7 +7992,7 @@ const L = class L {
       fontFamily: "none",
       fontSize: "auto",
       color: "none"
-    }, this.isMaximized = !1, this.isMinimized = !1, this.position = { x: 0, y: 0 }, this.isDragging = !1, this.dragStart = { x: 0, y: 0 }, this.popup = null, this.mathField = null, this.tabsWrapper = null, this.itemsWrapper = null, this.activeDropdown = null, this.activeMatrixPopup = null, this.colorPickerPopup = null, this.specCharModal = null, this.boundKeyDown = this.handleGlobalKeyDown.bind(this), this.boundDocClick = this.handleDocumentClick.bind(this), this.boundMouseMove = this.handleMouseMove.bind(this), this.boundMouseUp = this.handleMouseUp.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleMouseUp.bind(this), this.boundResize = this.handleWindowResize.bind(this);
+    }, this.isMaximized = !1, this.isMinimized = !1, this.position = { x: 0, y: 0 }, this.isDragging = !1, this.dragStart = { x: 0, y: 0 }, this.popup = null, this.mathField = null, this.tabsWrapper = null, this.itemsWrapper = null, this.activeDropdown = null, this.activeDropdownBtn = null, this.activeMatrixPopup = null, this.activeMatrixBtn = null, this.colorPickerPopup = null, this.activeColorBtn = null, this.specCharModal = null, this.boundKeyDown = this.handleGlobalKeyDown.bind(this), this.boundDocClick = this.handleDocumentClick.bind(this), this.boundMouseMove = this.handleMouseMove.bind(this), this.boundMouseUp = this.handleMouseUp.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleMouseUp.bind(this), this.boundResize = this.handleWindowResize.bind(this);
   }
   getGroups() {
     return this.mode === "chem" ? $ : _;
@@ -8004,10 +8018,10 @@ const L = class L {
       fontFamily: "none",
       fontSize: "auto",
       color: "none"
-    }, this.render(), window.addEventListener("keydown", this.boundKeyDown), document.addEventListener("mousedown", this.boundDocClick), window.addEventListener("mousemove", this.boundMouseMove), window.addEventListener("mouseup", this.boundMouseUp), window.addEventListener("touchmove", this.boundTouchMove, { passive: !1 }), window.addEventListener("touchend", this.boundTouchEnd), window.addEventListener("resize", this.boundResize);
+    }, this.render(), window.addEventListener("keydown", this.boundKeyDown), document.addEventListener("mousedown", this.boundDocClick, !0), document.addEventListener("pointerdown", this.boundDocClick, !0), window.addEventListener("mousemove", this.boundMouseMove), window.addEventListener("mouseup", this.boundMouseUp), window.addEventListener("touchmove", this.boundTouchMove, { passive: !1 }), window.addEventListener("touchend", this.boundTouchEnd), window.addEventListener("resize", this.boundResize);
   }
   close() {
-    this.isOpen && (this.isOpen = !1, window.removeEventListener("keydown", this.boundKeyDown), document.removeEventListener("mousedown", this.boundDocClick), window.removeEventListener("mousemove", this.boundMouseMove), window.removeEventListener("mouseup", this.boundMouseUp), window.removeEventListener("touchmove", this.boundTouchMove), window.removeEventListener("touchend", this.boundTouchEnd), window.removeEventListener("resize", this.boundResize), this.closeAllPopups(), this.specCharModal && this.specCharModal.close(), this.popup && this.popup.parentNode && this.popup.parentNode.removeChild(this.popup), this.popup = null, this.mathField = null, this.onClose());
+    this.isOpen && (this.isOpen = !1, window.removeEventListener("keydown", this.boundKeyDown), document.removeEventListener("mousedown", this.boundDocClick, !0), document.removeEventListener("pointerdown", this.boundDocClick, !0), window.removeEventListener("mousemove", this.boundMouseMove), window.removeEventListener("mouseup", this.boundMouseUp), window.removeEventListener("touchmove", this.boundTouchMove), window.removeEventListener("touchend", this.boundTouchEnd), window.removeEventListener("resize", this.boundResize), this.closeAllPopups(), this.specCharModal && this.specCharModal.close(), this.popup && this.popup.parentNode && this.popup.parentNode.removeChild(this.popup), this.popup = null, this.mathField = null, this.onClose());
   }
   getValue() {
     if (!this.mathField) return "";
@@ -8035,17 +8049,19 @@ const L = class L {
     t.key === "Enter" && (t.ctrlKey || t.metaKey) && (t.preventDefault(), this.handleInsert());
   }
   handleDocumentClick(t) {
-    this.popup && (this.activeDropdown && !this.activeDropdown.contains(t.target) && this.closeDropdown(), this.activeMatrixPopup && !this.activeMatrixPopup.contains(t.target) && this.closeMatrixPopup(), this.colorPickerPopup && !this.colorPickerPopup.contains(t.target) && this.closeColorPicker());
+    if (!this.popup) return;
+    const e = t.composedPath ? t.composedPath() : [];
+    this.activeDropdown && (this.activeDropdown === t.target || this.activeDropdown.contains(t.target) || e.includes(this.activeDropdown) || this.activeDropdownBtn && (this.activeDropdownBtn === t.target || this.activeDropdownBtn.contains(t.target) || e.includes(this.activeDropdownBtn)) || this.closeDropdown()), this.activeMatrixPopup && (this.activeMatrixPopup === t.target || this.activeMatrixPopup.contains(t.target) || e.includes(this.activeMatrixPopup) || this.activeMatrixBtn && (this.activeMatrixBtn === t.target || this.activeMatrixBtn.contains(t.target) || e.includes(this.activeMatrixBtn)) || this.closeMatrixPopup()), this.colorPickerPopup && (this.colorPickerPopup === t.target || this.colorPickerPopup.contains(t.target) || e.includes(this.colorPickerPopup) || this.activeColorBtn && (this.activeColorBtn === t.target || this.activeColorBtn.contains(t.target) || e.includes(this.activeColorBtn)) || this.closeColorPicker());
   }
   handleInsert() {
     let t = this.getValue();
     t = tt(t), t = et(t), t = rt(t), this.mode === "chem" && (t.includes("\\displaylines") || t.includes("\\\\") || t.includes("\\class{cme-") || t.includes("\\xleftrightarrows") || t.includes("\\xleftrightharpoons") || t.includes("\\enclose") || t.includes("\\{") || t.includes("\\}") || t.includes("\\lbrace") || t.includes("\\rbrace") ? /^\\ce\{[\s\S]*\}$/i.test(t.trim()) && (t = t.trim().replace(/^\\ce\{([\s\S]*)\}$/i, "$1")) : t.trim() && !t.trim().startsWith("\\ce{") && !t.includes("\\ce{") && (t = `\\ce{${t}}`)), this.onInsert(t), this.close();
   }
   insertAtCursor(t) {
-    if (!this.mathField) return;
+    if (this.closeAllPopups(), !this.mathField) return;
     const e = this.mathField;
     if (e.smartSuperscript = !1, e.focus(), typeof t == "string") {
-      const r = T(
+      const r = B(
         t,
         this.activeStyles.bold,
         this.activeStyles.italic,
@@ -8057,7 +8073,7 @@ const L = class L {
         { selectionMode: "placeholder" }
       ]) : e.insert(r);
     } else if (t && t.insert) {
-      const r = t.action === "INSERT_CUSTOM" || t.directInsert ? T(
+      const r = t.action === "INSERT_CUSTOM" || t.directInsert ? B(
         t.insert,
         this.activeStyles.bold,
         this.activeStyles.italic,
@@ -8079,13 +8095,13 @@ const L = class L {
     try {
       const e = t.model, r = (e == null ? void 0 : e.selection) || t.selection;
       if (r) {
-        const l = r.ranges || (Array.isArray(r) ? [r] : []);
-        if (l.length > 0) {
-          let a = 1 / 0, s = -1 / 0;
-          for (const h of l)
-            Array.isArray(h) && (a = Math.min(a, h[0], h[1]), s = Math.max(s, h[0], h[1]));
+        const s = r.ranges || (Array.isArray(r) ? [r] : []);
+        if (s.length > 0) {
+          let o = 1 / 0, l = -1 / 0;
+          for (const h of s)
+            Array.isArray(h) && (o = Math.min(o, h[0], h[1]), l = Math.max(l, h[0], h[1]));
           const n = (e == null ? void 0 : e.lastOffset) || 1;
-          if (a <= 1 && s >= n)
+          if (o <= 1 && l >= n)
             return !0;
         }
       }
@@ -8129,8 +8145,8 @@ const L = class L {
     }
     try {
       if (typeof t.queryStyle == "function") {
-        const e = t.queryStyle({ variantStyle: "bold" }), r = t.queryStyle({ variantStyle: "bolditalic" }), l = t.queryStyle({ fontSeries: "b" });
-        if (e === "all" || e === "some" || r === "all" || r === "some" || l === "all" || l === "some")
+        const e = t.queryStyle({ variantStyle: "bold" }), r = t.queryStyle({ variantStyle: "bolditalic" }), s = t.queryStyle({ fontSeries: "b" });
+        if (e === "all" || e === "some" || r === "all" || r === "some" || s === "all" || s === "some")
           return !0;
       }
     } catch {
@@ -8138,10 +8154,10 @@ const L = class L {
     try {
       const e = t.model;
       if (e && !t.selectionIsCollapsed && (e.selection || t.selection)) {
-        const r = e.selection || t.selection, l = e.getAtoms(r, { includeChildren: !0 });
-        if (l && l.length > 0 && l.some((s) => {
-          if (!s || s.type === "first") return !1;
-          const n = s.style;
+        const r = e.selection || t.selection, s = e.getAtoms(r, { includeChildren: !0 });
+        if (s && s.length > 0 && s.some((l) => {
+          if (!l || l.type === "first") return !1;
+          const n = l.style;
           return n ? n.variantStyle === "bold" || n.variantStyle === "bolditalic" || n.fontSeries === "b" || n.variant === "bold" : !1;
         }))
           return !0;
@@ -8161,8 +8177,8 @@ const L = class L {
     }
     try {
       if (typeof t.queryStyle == "function") {
-        const e = t.queryStyle({ variantStyle: "italic" }), r = t.queryStyle({ variantStyle: "bolditalic" }), l = t.queryStyle({ fontShape: "it" });
-        if (e === "all" || e === "some" || r === "all" || r === "some" || l === "all" || l === "some")
+        const e = t.queryStyle({ variantStyle: "italic" }), r = t.queryStyle({ variantStyle: "bolditalic" }), s = t.queryStyle({ fontShape: "it" });
+        if (e === "all" || e === "some" || r === "all" || r === "some" || s === "all" || s === "some")
           return !0;
       }
     } catch {
@@ -8170,10 +8186,10 @@ const L = class L {
     try {
       const e = t.model;
       if (e && !t.selectionIsCollapsed && (e.selection || t.selection)) {
-        const r = e.selection || t.selection, l = e.getAtoms(r, { includeChildren: !0 });
-        if (l && l.length > 0 && l.some((s) => {
-          if (!s || s.type === "first") return !1;
-          const n = s.style;
+        const r = e.selection || t.selection, s = e.getAtoms(r, { includeChildren: !0 });
+        if (s && s.length > 0 && s.some((l) => {
+          if (!l || l.type === "first") return !1;
+          const n = l.style;
           return n ? n.variantStyle === "italic" || n.variantStyle === "bolditalic" || n.fontShape === "it" : !1;
         }))
           return !0;
@@ -8192,58 +8208,62 @@ const L = class L {
       } else {
         this.explicitToggle = !1;
         const e = this.checkSelectionBold(t), r = this.checkSelectionItalic(t);
-        let l = !1;
-        this.activeStyles.bold !== e && (this.activeStyles.bold = e, l = !0), this.activeStyles.italic !== r && (this.activeStyles.italic = r, l = !0), l && this.renderToolbarItems();
+        let s = !1;
+        this.activeStyles.bold !== e && (this.activeStyles.bold = e, s = !0), this.activeStyles.italic !== r && (this.activeStyles.italic = r, s = !0), s && this.renderToolbarItems();
       }
   }
   render() {
-    this.popup = document.createElement("div"), this.popup.className = "cme-editor-popup" + (this.isMaximized ? " maximized" : "") + (this.isMinimized ? " minimized" : ""), this.popup.addEventListener("mousedown", (i) => i.stopPropagation());
+    this.popup = document.createElement("div"), this.popup.className = "cme-editor-popup" + (this.isMaximized ? " maximized" : "") + (this.isMinimized ? " minimized" : ""), this.popup.addEventListener("mousedown", (i) => {
+      this.handleDocumentClick(i), i.stopPropagation();
+    }), this.popup.addEventListener("pointerdown", (i) => {
+      this.handleDocumentClick(i);
+    });
     const t = document.createElement("div");
     t.className = "cme-popup-topbar";
     const e = document.createElement("div");
     e.className = "cme-popup-header", e.style.cursor = "grab";
     const r = this.title || (this.isEditing ? this.mode === "chem" ? "Edit Chemistry Formula" : "Edit Math Formula" : this.mode === "chem" ? "Chemistry Editor" : "Math Editor");
     e.innerHTML = `<span>${r}</span>`;
-    const l = (i, g, p) => {
-      p && p.closest && p.closest(".cme-popup-btn") || (this.isDragging = !0, this.dragStart = {
+    const s = (i, p, b) => {
+      b && b.closest && b.closest(".cme-popup-btn") || (this.closeAllPopups(), this.specCharModal && this.specCharModal.close(), this.isDragging = !0, this.dragStart = {
         x: i - this.position.x,
-        y: g - this.position.y
+        y: p - this.position.y
       }, e.style.cursor = "grabbing");
     };
     e.addEventListener("mousedown", (i) => {
-      l(i.clientX, i.clientY, i.target);
+      s(i.clientX, i.clientY, i.target);
     }), e.addEventListener(
       "touchstart",
       (i) => {
-        i.touches && i.touches.length > 0 && l(i.touches[0].clientX, i.touches[0].clientY, i.target);
+        i.touches && i.touches.length > 0 && s(i.touches[0].clientX, i.touches[0].clientY, i.target);
       },
       { passive: !0 }
     );
-    const a = document.createElement("div");
-    a.className = "cme-popup-controls";
-    const s = document.createElement("button");
-    s.type = "button", s.className = "cme-popup-btn", s.textContent = "—", s.title = "Minimize", s.addEventListener("click", () => this.toggleMinimize());
+    const o = document.createElement("div");
+    o.className = "cme-popup-controls";
+    const l = document.createElement("button");
+    l.type = "button", l.className = "cme-popup-btn", l.textContent = "—", l.title = "Minimize", l.addEventListener("click", () => this.toggleMinimize());
     const n = document.createElement("button");
-    n.type = "button", n.className = "cme-popup-btn", n.textContent = "⤢", n.title = "Maximize", n.addEventListener("click", () => this.toggleMaximize()), this.minBtn = s, this.maxBtn = n;
+    n.type = "button", n.className = "cme-popup-btn", n.textContent = "⤢", n.title = "Maximize", n.addEventListener("click", () => this.toggleMaximize()), this.minBtn = l, this.maxBtn = n;
     const h = document.createElement("button");
-    h.type = "button", h.className = "cme-popup-btn", h.textContent = "✕", h.title = "Close", h.addEventListener("click", () => this.close()), a.appendChild(s), a.appendChild(n), a.appendChild(h), t.appendChild(e), t.appendChild(a), this.popup.appendChild(t);
+    h.type = "button", h.className = "cme-popup-btn", h.textContent = "✕", h.title = "Close", h.addEventListener("click", () => this.close()), o.appendChild(l), o.appendChild(n), o.appendChild(h), t.appendChild(e), t.appendChild(o), this.popup.appendChild(t);
     const c = document.createElement("div");
     c.className = "cme-toolbar", c.setAttribute("role", "toolbar"), c.setAttribute("aria-label", "Symbol palette"), this.tabsWrapper = document.createElement("div"), this.tabsWrapper.className = "cme-toolbar-groups", this.renderTabs(), c.appendChild(this.tabsWrapper), this.itemsWrapper = document.createElement("div"), this.itemsWrapper.className = "cme-toolbar-items", this.renderToolbarItems(), c.appendChild(this.itemsWrapper), this.popup.appendChild(c);
-    const w = document.createElement("div");
-    w.className = "cme-mathfield-container", w.addEventListener("mousedown", (i) => {
-      var g, p;
-      this.explicitToggle = !1, !(this.mathField && (i.target === this.mathField || this.mathField.contains(i.target))) && (i.preventDefault(), (p = (g = this.mathField) == null ? void 0 : g.focus) == null || p.call(g));
+    const g = document.createElement("div");
+    g.className = "cme-mathfield-container", g.addEventListener("mousedown", (i) => {
+      var p, b;
+      this.explicitToggle = !1, this.closeAllPopups(), !(this.mathField && (i.target === this.mathField || this.mathField.contains(i.target))) && (i.preventDefault(), (b = (p = this.mathField) == null ? void 0 : p.focus) == null || b.call(p));
     }), this.mathField = document.createElement("math-field"), this.mathField.className = "cme-mathfield", this.mathField.setAttribute("tabindex", "0"), this.mathField.setAttribute("math-virtual-keyboard-policy", "manual"), this.mathField.setAttribute("smart-superscript", "false"), this.mathField.smartSuperscript = !1, this.mathField.setAttribute("math-mode-space", "\\enspace"), this.mathField.mathModeSpace = "\\enspace", this.mathField.onInsertStyle = () => this.getInsertStyle(), this.mathField.addEventListener("keydown", (i) => {
       if (i.key === "Enter" && !i.ctrlKey && !i.metaKey && !i.altKey) {
         i.preventDefault(), i.stopPropagation(), i.stopImmediatePropagation(), this.activeStyles.bold || this.activeStyles.italic || this.activeStyles.fontFamily && this.activeStyles.fontFamily !== "none" ? this.explicitToggle = !0 : this.explicitToggle = !1;
-        const d = this.mathField;
-        d != null && d.executeCommand && d.executeCommand("addRowAfter");
+        const m = this.mathField;
+        m != null && m.executeCommand && m.executeCommand("addRowAfter");
         return;
       }
       if (i.key === " " || i.code === "Space") {
         i.preventDefault(), i.stopPropagation(), i.stopImmediatePropagation();
-        const d = this.mathField;
-        d.executeCommand ? d.executeCommand(["insert", "\\enspace ", { selectionMode: "after" }]) : d.insert && d.insert("\\enspace ");
+        const m = this.mathField;
+        m.executeCommand ? m.executeCommand(["insert", "\\enspace ", { selectionMode: "after" }]) : m.insert && m.insert("\\enspace ");
         return;
       }
       if (i.key === "ArrowLeft" || i.key === "ArrowRight" || i.key === "ArrowUp" || i.key === "ArrowDown" || i.key === "Home" || i.key === "End") {
@@ -8252,32 +8272,34 @@ const L = class L {
       }
       if (!this.activeStyles.bold && !this.activeStyles.italic && this.activeStyles.fontFamily === "none" || i.key.length !== 1 || i.ctrlKey || i.metaKey || i.altKey) return;
       i.preventDefault(), i.stopPropagation(), i.stopImmediatePropagation();
-      const g = T(
+      const p = B(
         i.key,
         this.activeStyles.bold,
         this.activeStyles.italic,
         this.activeStyles.fontFamily
-      ), p = this.mathField;
-      p.executeCommand ? p.executeCommand(["insert", g, { selectionMode: "after" }]) : p.insert && p.insert(g);
+      ), b = this.mathField;
+      b.executeCommand ? b.executeCommand(["insert", p, { selectionMode: "after" }]) : b.insert && b.insert(p);
     }, { capture: !0 });
     const x = () => {
       this.updateStylesFromSelection();
     };
     this.mathField.addEventListener("selection-change", x), this.mathField.addEventListener("pointerup", x), this.mathField.addEventListener("keyup", x), this.mathField.addEventListener("pointerdown", () => {
-      this.explicitToggle = !1;
-    }), w.appendChild(this.mathField), this.popup.appendChild(w);
-    const k = document.createElement("div");
-    k.className = "cme-popup-footer";
+      this.explicitToggle = !1, this.closeAllPopups();
+    }), this.mathField.addEventListener("focus", () => {
+      this.closeAllPopups();
+    }), g.appendChild(this.mathField), this.popup.appendChild(g);
+    const u = document.createElement("div");
+    u.className = "cme-popup-footer";
     const y = document.createElement("button");
     y.type = "button", y.className = "cme-insert-btn", y.textContent = this.isEditing ? "Update" : "Insert", y.addEventListener("click", () => this.handleInsert());
-    const b = document.createElement("button");
-    b.type = "button", b.className = "cme-cancel-btn", b.textContent = "Cancel", b.addEventListener("click", () => this.close()), k.appendChild(y), k.appendChild(b);
-    const u = `v${S.version}`;
-    if (u) {
+    const w = document.createElement("button");
+    w.type = "button", w.className = "cme-cancel-btn", w.textContent = "Cancel", w.addEventListener("click", () => this.close()), u.appendChild(y), u.appendChild(w);
+    const k = `v${E.version}`;
+    if (k) {
       const i = document.createElement("span");
-      i.className = "cme-popup-version", i.textContent = u, i.title = `Version ${S.version}`, k.appendChild(i);
+      i.className = "cme-popup-version", i.textContent = k, i.title = `Version ${E.version}`, u.appendChild(i);
     }
-    this.popup.appendChild(k), document.body.appendChild(this.popup), setTimeout(() => {
+    this.popup.appendChild(u), document.body.appendChild(this.popup), setTimeout(() => {
       if (this.mathField) {
         nt();
         try {
@@ -8293,7 +8315,9 @@ const L = class L {
               ...window.__cme_macros || {},
               ...J
             }
-          });
+          }), this.mathField.menuItems && Array.isArray(this.mathField.menuItems) && (this.mathField.menuItems = this.mathField.menuItems.filter(
+            (p) => p && p.id !== "insert-matrix" && p.submenuClass !== "insert-matrix-submenu"
+          ));
         } catch {
         }
         let i = this.initialLatex || "";
@@ -8303,14 +8327,15 @@ const L = class L {
   }
   clampPosition(t = this.position.x, e = this.position.y) {
     if (!this.popup) return { x: t, y: e };
-    const r = this.popup.getBoundingClientRect(), l = r.left - this.position.x, a = r.top - this.position.y, s = r.width, n = r.height, h = window.innerWidth, c = window.innerHeight;
-    let w = -l, x = h - l - s, k = t;
-    w > x ? k = w : k = Math.max(w, Math.min(t, x));
-    let y = -a, b = c - a - n, u = e;
-    return y > b ? u = y : u = Math.max(y, Math.min(e, b)), { x: k, y: u };
+    const r = this.popup.getBoundingClientRect(), s = r.left - this.position.x, o = r.top - this.position.y, l = r.width, n = r.height, h = window.innerWidth, c = window.innerHeight;
+    let g = -s, x = h - s - l, u = t;
+    g > x ? u = g : u = Math.max(g, Math.min(t, x));
+    let y = -o, w = c - o - n, k = e;
+    return y > w ? k = y : k = Math.max(y, Math.min(e, w)), { x: u, y: k };
   }
   handleMouseMove(t) {
     if (!this.isDragging || !this.popup) return;
+    this.closeAllPopups(), this.specCharModal && this.specCharModal.close();
     const e = t.clientX - this.dragStart.x, r = t.clientY - this.dragStart.y;
     this.position = this.clampPosition(e, r), this.popup.style.transform = `translate(${this.position.x}px, ${this.position.y}px)`;
   }
@@ -8342,22 +8367,22 @@ const L = class L {
   renderTabs() {
     if (!this.tabsWrapper) return;
     this.tabsWrapper.innerHTML = "", this.getGroups().forEach((e, r) => {
-      const l = this.activeGroup === r, a = document.createElement("button");
-      if (a.type = "button", a.className = "cme-group-tab" + (l ? " active" : ""), e.mathLabel) {
-        const s = document.createElement("math-field");
-        s.setAttribute("read-only", "true"), s.setAttribute("tabindex", "-1"), s.style.pointerEvents = "none", s.style.background = "transparent", s.style.border = "none", s.style.outline = "none", s.style.fontSize = e.fontSize || (e.isMatrix ? "8px" : "11px"), s.style.display = "inline-block", s.style.width = "auto", s.style.padding = "0", s.style.margin = "0", s.style.boxShadow = "none", s.style.color = l ? "#333333" : "#ffffff", s.textContent = e.mathLabel, a.appendChild(s);
-      } else typeof e.label == "string" && e.label.includes("<svg") ? a.innerHTML = e.label : a.textContent = e.label;
-      a.addEventListener("mousedown", (s) => {
-        s.preventDefault(), this.activeGroup = r, this.closeAllPopups(), this.renderTabs(), this.renderToolbarItems();
-      }), this.tabsWrapper.appendChild(a);
+      const s = this.activeGroup === r, o = document.createElement("button");
+      if (o.type = "button", o.className = "cme-group-tab" + (s ? " active" : ""), e.mathLabel) {
+        const l = document.createElement("math-field");
+        l.setAttribute("read-only", "true"), l.setAttribute("tabindex", "-1"), l.style.pointerEvents = "none", l.style.background = "transparent", l.style.border = "none", l.style.outline = "none", l.style.fontSize = e.fontSize || (e.isMatrix ? "8px" : "11px"), l.style.display = "inline-block", l.style.width = "auto", l.style.padding = "0", l.style.margin = "0", l.style.boxShadow = "none", l.style.color = s ? "#333333" : "#ffffff", l.textContent = e.mathLabel, o.appendChild(l);
+      } else typeof e.label == "string" && e.label.includes("<svg") ? o.innerHTML = e.label : o.textContent = e.label;
+      o.addEventListener("mousedown", (l) => {
+        l.preventDefault(), this.activeGroup = r, this.closeAllPopups(), this.renderTabs(), this.renderToolbarItems();
+      }), this.tabsWrapper.appendChild(o);
     });
   }
   renderToolbarItems() {
     if (!this.itemsWrapper) return;
     this.itemsWrapper.innerHTML = "";
-    const e = this.getGroups()[this.activeGroup] || { items: [] }, r = e.items || [], l = r.some((s) => s.type === "sep"), a = [];
-    if (l) {
-      let s = {
+    const e = this.getGroups()[this.activeGroup] || { items: [] }, r = e.items || [], s = r.some((l) => l.type === "sep"), o = [];
+    if (s) {
+      let l = {
         cols: 2,
         small: !1,
         cls: "",
@@ -8366,47 +8391,50 @@ const L = class L {
         moreCols: 1
       };
       for (const n of r)
-        n.type === "sep" ? (s.items.length > 0 && a.push(s), s = {
+        n.type === "sep" ? (l.items.length > 0 && o.push(l), l = {
           cols: n.cols || 2,
           small: !!n.small,
           cls: n.cls || "",
           items: [],
           moreItems: n.moreItems || null,
           moreCols: n.moreCols || 1
-        }) : s.items.push(n);
-      s.items.length > 0 && a.push(s);
+        }) : l.items.push(n);
+      l.items.length > 0 && o.push(l);
     } else
       for (let n = 0; n < r.length; n += 4)
-        a.push({
+        o.push({
           cols: 2,
           small: !1,
           cls: "",
           items: r.slice(n, n + 4)
         });
-    a.forEach((s) => {
+    o.forEach((l) => {
       const n = document.createElement("div");
-      if (n.className = "cme-symbol-subgroup" + (s.small ? " cme-symbol-subgroup--small" : "") + (s.cls ? ` ${s.cls}` : "") + (s.moreItems ? " cme-subgroup-has-more" : ""), n.style.gridTemplateColumns = `repeat(${s.cols}, auto)`, n.style.position = "relative", s.moreItems) {
+      if (n.className = "cme-symbol-subgroup" + (l.small ? " cme-symbol-subgroup--small" : "") + (l.cls ? ` ${l.cls}` : "") + (l.moreItems ? " cme-subgroup-has-more" : ""), n.style.gridTemplateColumns = `repeat(${l.cols}, auto)`, n.style.position = "relative", l.moreItems) {
         const h = document.createElement("button");
         h.type = "button", h.className = "cme-more-trigger-btn", h.title = "More", h.textContent = "▶", h.addEventListener("mousedown", (c) => c.preventDefault()), h.addEventListener("click", (c) => {
-          c.stopPropagation();
-          const w = h.getBoundingClientRect();
-          this.openDropdown(s.moreItems, w, s.moreCols || 4);
+          if (c.stopPropagation(), this.activeDropdown && this.activeDropdownBtn === h)
+            this.closeDropdown();
+          else {
+            const g = h.getBoundingClientRect();
+            this.openDropdown(l.moreItems, g, l.moreCols || 4, h);
+          }
         }), n.appendChild(h);
       }
-      s.items.forEach((h) => {
+      l.items.forEach((h) => {
         if (h.type === "dropdown") {
-          const u = h.label === "Font...", i = h.label === "Size", g = document.createElement("select");
-          g.className = "cme-select" + (u ? " cme-select-font" : "") + (i ? " cme-select-size" : "") + (u && this.activeStyles.fontFamily !== "none" || i && this.activeStyles.fontSize !== "auto" ? " active" : ""), u ? ([
+          const k = h.label === "Font...", i = h.label === "Size", p = document.createElement("select");
+          p.className = "cme-select" + (k ? " cme-select-font" : "") + (i ? " cme-select-size" : "") + (k && this.activeStyles.fontFamily !== "none" || i && this.activeStyles.fontSize !== "auto" ? " active" : ""), k ? ([
             { id: "none", label: "Font..." },
             { id: "roman", label: "Roman" },
             { id: "sans-serif", label: "Sans-Serif" },
             { id: "monospace", label: "Monospace" }
-          ].forEach((p) => {
-            const d = document.createElement("option");
-            d.value = p.id, d.textContent = p.label, g.appendChild(d);
-          }), g.value = this.activeStyles.fontFamily, g.addEventListener("change", (p) => {
-            var d;
-            this.activeStyles.fontFamily = p.target.value, (d = this.mathField) != null && d.applyStyle && this.mathField.applyStyle({
+          ].forEach((b) => {
+            const m = document.createElement("option");
+            m.value = b.id, m.textContent = b.label, p.appendChild(m);
+          }), p.value = this.activeStyles.fontFamily, p.addEventListener("change", (b) => {
+            var m;
+            this.activeStyles.fontFamily = b.target.value, (m = this.mathField) != null && m.applyStyle && this.mathField.applyStyle({
               fontFamily: this.activeStyles.fontFamily === "none" ? "none" : this.activeStyles.fontFamily
             }), this.renderToolbarItems();
           })) : i && ([
@@ -8416,48 +8444,53 @@ const L = class L {
             { id: "5", label: "Normal" },
             { id: "7", label: "Large" },
             { id: "9", label: "Huge" }
-          ].forEach((p) => {
-            const d = document.createElement("option");
-            d.value = p.id, d.textContent = p.label, g.appendChild(d);
-          }), g.value = this.activeStyles.fontSize, g.addEventListener("change", (p) => {
-            var d;
-            if (this.activeStyles.fontSize = p.target.value, (d = this.mathField) != null && d.applyStyle) {
-              const m = this.activeStyles.fontSize === "auto" ? "none" : parseInt(this.activeStyles.fontSize, 10);
-              this.mathField.applyStyle({ fontSize: m });
+          ].forEach((b) => {
+            const m = document.createElement("option");
+            m.value = b.id, m.textContent = b.label, p.appendChild(m);
+          }), p.value = this.activeStyles.fontSize, p.addEventListener("change", (b) => {
+            var m;
+            if (this.activeStyles.fontSize = b.target.value, (m = this.mathField) != null && m.applyStyle) {
+              const M = this.activeStyles.fontSize === "auto" ? "none" : parseInt(this.activeStyles.fontSize, 10);
+              this.mathField.applyStyle({ fontSize: M });
             }
             this.renderToolbarItems();
-          })), n.appendChild(g);
+          })), n.appendChild(p);
           return;
         }
-        const c = h.action === "BOLD", w = h.action === "ITALIC", x = h.action === "TEXT_COLOR", k = h.action === "SPECIAL_CHARS", y = c && this.activeStyles.bold || w && this.activeStyles.italic || x && this.activeStyles.color !== "none", b = document.createElement("button");
-        b.type = "button", b.className = "cme-btn" + (e.isTemplate ? " template" : "") + (h.cls ? ` ${h.cls}` : "") + (y ? " active" : ""), b.title = h.title || h.label || h.insert || "", typeof h.label == "string" && (h.label.includes("<svg") || h.label.includes("<img") || h.label.includes("<strong") || h.label.includes("<em")) ? b.innerHTML = h.label : typeof h.label == "string" && (b.textContent = h.label), b.addEventListener("mousedown", (u) => {
-          var g, p, d, m, C, M, f, A, B, H;
-          u.preventDefault();
+        const c = h.action === "BOLD", g = h.action === "ITALIC", x = h.action === "TEXT_COLOR", u = h.action === "SPECIAL_CHARS", y = c && this.activeStyles.bold || g && this.activeStyles.italic || x && this.activeStyles.color !== "none", w = document.createElement("button");
+        w.type = "button", w.className = "cme-btn" + (e.isTemplate ? " template" : "") + (h.cls ? ` ${h.cls}` : "") + (y ? " active" : ""), w.title = h.title || h.label || h.insert || "", typeof h.label == "string" && (h.label.includes("<svg") || h.label.includes("<img") || h.label.includes("<strong") || h.label.includes("<em")) ? w.innerHTML = h.label : typeof h.label == "string" && (w.textContent = h.label), w.addEventListener("mousedown", (k) => {
+          var p, b, m, M, d, S, C, f, T, I;
+          k.preventDefault();
           const i = this.mathField;
-          if (k) {
-            const v = b.getBoundingClientRect();
+          if (u) {
+            this.closeAllPopups();
+            const v = w.getBoundingClientRect();
             this.openSpecialCharacters(v);
-          } else if (x) {
-            const v = b.getBoundingClientRect();
-            this.openColorPicker(v);
-          } else if (c) {
-            if (this.explicitToggle = !0, this.activeStyles.bold = !this.activeStyles.bold, i) {
+          } else if (x)
+            if (this.colorPickerPopup && this.activeColorBtn === w)
+              this.closeColorPicker();
+            else {
+              const v = w.getBoundingClientRect();
+              this.openColorPicker(v, w);
+            }
+          else if (c) {
+            if (this.closeAllPopups(), this.explicitToggle = !0, this.activeStyles.bold = !this.activeStyles.bold, i) {
               if (i.selectionIsCollapsed)
                 this.activeStyles.bold || (i.styleBias = "none", i.defaultStyle && (delete i.defaultStyle.variantStyle, delete i.defaultStyle.fontSeries));
               else {
                 const v = this.getSelectionLatex(i);
                 if (v && v.trim()) {
-                  const D = F(v.trim()), E = T(
-                    D,
+                  const R = F(v.trim()), A = B(
+                    R,
                     this.activeStyles.bold,
                     this.activeStyles.italic,
                     this.activeStyles.fontFamily
                   );
-                  if (this.activeStyles.bold || (i.styleBias = "none", i.defaultStyle && (delete i.defaultStyle.variantStyle, delete i.defaultStyle.fontSeries)), this.isAllSelected(i) ? (i.setValue(E), i.executeCommand ? i.executeCommand("selectAll") : (g = i.model) != null && g.setSelection && i.model.setSelection(0, i.model.lastOffset)) : i.executeCommand ? i.executeCommand([
+                  if (this.activeStyles.bold || (i.styleBias = "none", i.defaultStyle && (delete i.defaultStyle.variantStyle, delete i.defaultStyle.fontSeries)), this.isAllSelected(i) ? (i.setValue(A), i.executeCommand ? i.executeCommand("selectAll") : (p = i.model) != null && p.setSelection && i.model.setSelection(0, i.model.lastOffset)) : i.executeCommand ? i.executeCommand([
                     "insert",
-                    E,
+                    A,
                     { selectionMode: "item" }
-                  ]) : i.insert && i.insert(E, { selectionMode: "item" }), !this.activeStyles.bold && i.applyStyle)
+                  ]) : i.insert && i.insert(A, { selectionMode: "item" }), !this.activeStyles.bold && i.applyStyle)
                     try {
                       i.applyStyle(
                         {
@@ -8473,24 +8506,24 @@ const L = class L {
               i.focus();
             }
             this.renderToolbarItems();
-          } else if (w) {
-            if (this.explicitToggle = !0, this.activeStyles.italic = !this.activeStyles.italic, i) {
+          } else if (g) {
+            if (this.closeAllPopups(), this.explicitToggle = !0, this.activeStyles.italic = !this.activeStyles.italic, i) {
               if (i.selectionIsCollapsed)
                 this.activeStyles.italic || (i.styleBias = "none", i.defaultStyle && (delete i.defaultStyle.variantStyle, delete i.defaultStyle.fontShape));
               else {
                 const v = this.getSelectionLatex(i);
                 if (v && v.trim()) {
-                  const D = F(v.trim()), E = T(
-                    D,
+                  const R = F(v.trim()), A = B(
+                    R,
                     this.activeStyles.bold,
                     this.activeStyles.italic,
                     this.activeStyles.fontFamily
                   );
-                  if (this.activeStyles.italic || (i.styleBias = "none", i.defaultStyle && (delete i.defaultStyle.variantStyle, delete i.defaultStyle.fontShape)), this.isAllSelected(i) ? (i.setValue(E), i.executeCommand ? i.executeCommand("selectAll") : (p = i.model) != null && p.setSelection && i.model.setSelection(0, i.model.lastOffset)) : i.executeCommand ? i.executeCommand([
+                  if (this.activeStyles.italic || (i.styleBias = "none", i.defaultStyle && (delete i.defaultStyle.variantStyle, delete i.defaultStyle.fontShape)), this.isAllSelected(i) ? (i.setValue(A), i.executeCommand ? i.executeCommand("selectAll") : (b = i.model) != null && b.setSelection && i.model.setSelection(0, i.model.lastOffset)) : i.executeCommand ? i.executeCommand([
                     "insert",
-                    E,
+                    A,
                     { selectionMode: "item" }
-                  ]) : i.insert && i.insert(E, { selectionMode: "item" }), !this.activeStyles.italic && i.applyStyle)
+                  ]) : i.insert && i.insert(A, { selectionMode: "item" }), !this.activeStyles.italic && i.applyStyle)
                     try {
                       i.applyStyle(
                         {
@@ -8507,122 +8540,141 @@ const L = class L {
             }
             this.renderToolbarItems();
           } else if (h.action === "UNDO")
-            (d = i == null ? void 0 : i.executeCommand) == null || d.call(i, "undo");
+            this.closeAllPopups(), (m = i == null ? void 0 : i.executeCommand) == null || m.call(i, "undo");
           else if (h.action === "REDO")
-            (m = i == null ? void 0 : i.executeCommand) == null || m.call(i, "redo");
+            this.closeAllPopups(), (M = i == null ? void 0 : i.executeCommand) == null || M.call(i, "redo");
           else if (h.action === "CUT")
-            (C = i == null ? void 0 : i.focus) == null || C.call(i), (M = i == null ? void 0 : i.executeCommand) == null || M.call(i, "cutToClipboard");
+            this.closeAllPopups(), (d = i == null ? void 0 : i.focus) == null || d.call(i), (S = i == null ? void 0 : i.executeCommand) == null || S.call(i, "cutToClipboard");
           else if (h.action === "COPY")
-            (f = i == null ? void 0 : i.focus) == null || f.call(i), (A = i == null ? void 0 : i.executeCommand) == null || A.call(i, "copyToClipboard");
+            this.closeAllPopups(), (C = i == null ? void 0 : i.focus) == null || C.call(i), (f = i == null ? void 0 : i.executeCommand) == null || f.call(i, "copyToClipboard");
           else if (h.action === "PASTE")
-            (B = i == null ? void 0 : i.focus) == null || B.call(i), (H = i == null ? void 0 : i.executeCommand) == null || H.call(i, "pasteFromClipboard");
-          else if (h.action === "MATRIX_HOVER") {
-            const v = b.getBoundingClientRect();
-            this.openMatrixGrid(h.matrixType || "matrix", v);
-          } else
+            this.closeAllPopups(), (T = i == null ? void 0 : i.focus) == null || T.call(i), (I = i == null ? void 0 : i.executeCommand) == null || I.call(i, "pasteFromClipboard");
+          else if (h.action === "MATRIX_HOVER")
+            if (this.activeMatrixPopup && this.activeMatrixBtn === w)
+              this.closeMatrixPopup();
+            else {
+              const v = w.getBoundingClientRect();
+              this.openMatrixGrid(h.matrixType || "matrix", v, w);
+            }
+          else
             this.insertAtCursor(h);
-        }), n.appendChild(b);
+        }), n.appendChild(w);
       }), this.itemsWrapper.appendChild(n);
     });
   }
-  openDropdown(t, e, r) {
-    this.closeAllPopups(), this.activeDropdown = document.createElement("div"), this.activeDropdown.className = "cme-more-popup", this.activeDropdown.style.gridTemplateColumns = `repeat(${r}, auto)`, this.activeDropdown.style.left = `${e.left + e.width / 2}px`, this.activeDropdown.style.top = `${e.bottom + 4}px`, this.activeDropdown.style.transform = "translateX(-50%)", t.forEach((l) => {
-      const a = document.createElement("button");
-      a.type = "button", a.className = "cme-more-popup-btn " + (l.cls || ""), a.title = l.title || l.label || l.insert || "", typeof l.label == "string" && (l.label.includes("<svg") || l.label.includes("<img")) ? a.innerHTML = l.label : a.textContent = l.label, a.addEventListener("mousedown", (s) => {
-        s.preventDefault(), this.insertAtCursor(l.insert || l), this.closeDropdown();
-      }), this.activeDropdown.appendChild(a);
+  openDropdown(t, e, r, s = null) {
+    this.closeAllPopups(), this.activeDropdownBtn = s, this.activeDropdown = document.createElement("div"), this.activeDropdown.className = "cme-more-popup", this.activeDropdown.style.gridTemplateColumns = `repeat(${r}, auto)`, this.activeDropdown.style.left = `${e.left + e.width / 2}px`, this.activeDropdown.style.top = `${e.bottom + 4}px`, this.activeDropdown.style.transform = "translateX(-50%)", this.activeDropdown.addEventListener(
+      "mousedown",
+      (o) => o.stopPropagation()
+    ), this.activeDropdown.addEventListener(
+      "pointerdown",
+      (o) => o.stopPropagation()
+    ), t.forEach((o) => {
+      const l = document.createElement("button");
+      l.type = "button", l.className = "cme-more-popup-btn " + (o.cls || ""), l.title = o.title || o.label || o.insert || "", typeof o.label == "string" && (o.label.includes("<svg") || o.label.includes("<img")) ? l.innerHTML = o.label : l.textContent = o.label, l.addEventListener("mousedown", (n) => {
+        n.preventDefault(), this.insertAtCursor(o.insert || o), this.closeDropdown();
+      }), this.activeDropdown.appendChild(l);
     }), document.body.appendChild(this.activeDropdown);
   }
   closeDropdown() {
-    this.activeDropdown && this.activeDropdown.parentNode && this.activeDropdown.parentNode.removeChild(this.activeDropdown), this.activeDropdown = null;
+    this.activeDropdown && this.activeDropdown.parentNode && this.activeDropdown.parentNode.removeChild(this.activeDropdown), this.activeDropdown = null, this.activeDropdownBtn = null;
   }
-  openMatrixGrid(t, e) {
-    this.closeAllPopups(), this.activeMatrixPopup = document.createElement("div"), this.activeMatrixPopup.className = "cme-matrix-hover-popover ck-only", this.activeMatrixPopup.style.left = `${e.left + e.width / 2}px`, this.activeMatrixPopup.style.top = `${e.bottom + 6}px`, this.activeMatrixPopup.style.minHeight = "auto", this.activeMatrixPopup.addEventListener(
+  openMatrixGrid(t, e, r = null) {
+    this.closeAllPopups(), this.activeMatrixBtn = r, this.activeMatrixPopup = document.createElement("div"), this.activeMatrixPopup.className = "cme-matrix-hover-popover ck-only", this.activeMatrixPopup.style.left = `${e.left + e.width / 2}px`, this.activeMatrixPopup.style.top = `${e.bottom + 6}px`, this.activeMatrixPopup.style.minHeight = "auto", this.activeMatrixPopup.addEventListener(
       "mousedown",
-      (m) => m.stopPropagation()
+      (d) => d.stopPropagation()
+    ), this.activeMatrixPopup.addEventListener(
+      "pointerdown",
+      (d) => d.stopPropagation()
     );
-    const r = document.createElement("div");
-    r.className = "cme-matrix-hover-title", r.textContent = t === "matrix" ? "MATRIX" : `${t.toUpperCase()} MATRIX`;
-    const l = document.createElement("div");
-    l.className = "cme-matrix-hover-grid", l.style.flex = "none";
-    let a = 2, s = 2;
-    const n = document.createElement("div");
-    n.className = "cme-matrix-hover-footer";
+    const s = document.createElement("div");
+    s.className = "cme-matrix-hover-title", s.textContent = t === "matrix" ? "MATRIX" : `${t.toUpperCase()} MATRIX`;
+    const o = document.createElement("div");
+    o.className = "cme-matrix-hover-grid", o.style.flex = "none";
+    let l = 2, n = 2;
     const h = document.createElement("div");
-    h.className = "cme-matrix-counter";
-    const c = document.createElement("input");
-    c.type = "number", c.className = "cme-counter-val", c.min = "1", c.max = "10", c.value = a;
-    const w = document.createElement("div");
-    w.className = "cme-counter-btns";
-    const x = document.createElement("button");
-    x.type = "button", x.textContent = "▲";
-    const k = document.createElement("button");
-    k.type = "button", k.textContent = "▼", w.appendChild(x), w.appendChild(k);
-    const y = document.createElement("span");
-    y.textContent = "×";
-    const b = document.createElement("input");
-    b.type = "number", b.className = "cme-counter-val", b.min = "1", b.max = "10", b.value = s;
-    const u = document.createElement("div");
-    u.className = "cme-counter-btns";
-    const i = document.createElement("button");
-    i.type = "button", i.textContent = "▲";
-    const g = document.createElement("button");
-    g.type = "button", g.textContent = "▼", u.appendChild(i), u.appendChild(g), h.appendChild(c), h.appendChild(w), h.appendChild(y), h.appendChild(b), h.appendChild(u);
+    h.className = "cme-matrix-hover-footer";
+    const c = document.createElement("div");
+    c.className = "cme-matrix-counter";
+    const g = document.createElement("input");
+    g.type = "number", g.className = "cme-counter-val", g.min = "1", g.max = "10", g.value = l;
+    const x = document.createElement("div");
+    x.className = "cme-counter-btns";
+    const u = document.createElement("button");
+    u.type = "button", u.textContent = "▲";
+    const y = document.createElement("button");
+    y.type = "button", y.textContent = "▼", x.appendChild(u), x.appendChild(y);
+    const w = document.createElement("span");
+    w.textContent = "×";
+    const k = document.createElement("input");
+    k.type = "number", k.className = "cme-counter-val", k.min = "1", k.max = "10", k.value = n;
+    const i = document.createElement("div");
+    i.className = "cme-counter-btns";
     const p = document.createElement("button");
-    p.type = "button", p.className = "cme-matrix-insert-btn", p.textContent = "INSERT", n.appendChild(h), n.appendChild(p);
-    const d = (m, C) => {
-      a = Math.max(1, Math.min(10, m)), s = Math.max(1, Math.min(10, C)), c.value = a, b.value = s, l.querySelectorAll(".cme-matrix-hover-cell").forEach((f) => {
-        const A = parseInt(f.dataset.row, 10), B = parseInt(f.dataset.col, 10);
-        A <= a && B <= s ? f.classList.add("selected") : f.classList.remove("selected");
+    p.type = "button", p.textContent = "▲";
+    const b = document.createElement("button");
+    b.type = "button", b.textContent = "▼", i.appendChild(p), i.appendChild(b), c.appendChild(g), c.appendChild(x), c.appendChild(w), c.appendChild(k), c.appendChild(i);
+    const m = document.createElement("button");
+    m.type = "button", m.className = "cme-matrix-insert-btn", m.textContent = "INSERT", h.appendChild(c), h.appendChild(m);
+    const M = (d, S) => {
+      l = Math.max(1, Math.min(10, d)), n = Math.max(1, Math.min(10, S)), g.value = l, k.value = n, o.querySelectorAll(".cme-matrix-hover-cell").forEach((f) => {
+        const T = parseInt(f.dataset.row, 10), I = parseInt(f.dataset.col, 10);
+        T <= l && I <= n ? f.classList.add("selected") : f.classList.remove("selected");
       });
     };
-    for (let m = 1; m <= 5; m++) {
-      const C = document.createElement("div");
-      C.className = "cme-matrix-hover-row";
-      for (let M = 1; M <= 10; M++) {
+    for (let d = 1; d <= 5; d++) {
+      const S = document.createElement("div");
+      S.className = "cme-matrix-hover-row";
+      for (let C = 1; C <= 10; C++) {
         const f = document.createElement("div");
-        f.className = "cme-matrix-hover-cell" + (m <= a && M <= s ? " selected" : ""), f.dataset.row = m, f.dataset.col = M, f.addEventListener("mouseenter", () => {
-          d(m, M);
-        }), f.addEventListener("click", (A) => {
-          A.stopPropagation(), this.insertMatrix(t, m, M), this.closeMatrixPopup();
-        }), C.appendChild(f);
+        f.className = "cme-matrix-hover-cell" + (d <= l && C <= n ? " selected" : ""), f.dataset.row = d, f.dataset.col = C, f.addEventListener("mouseenter", () => {
+          M(d, C);
+        }), f.addEventListener("click", (T) => {
+          T.stopPropagation(), this.insertMatrix(t, d, C), this.closeMatrixPopup();
+        }), S.appendChild(f);
       }
-      l.appendChild(C);
+      o.appendChild(S);
     }
-    c.addEventListener("input", () => {
-      const m = parseInt(c.value, 10) || 1;
-      d(m, s);
-    }), b.addEventListener("input", () => {
-      const m = parseInt(b.value, 10) || 1;
-      d(a, m);
-    }), x.addEventListener("click", (m) => {
-      m.preventDefault(), m.stopPropagation(), d(a + 1, s);
-    }), k.addEventListener("click", (m) => {
-      m.preventDefault(), m.stopPropagation(), d(a - 1, s);
-    }), i.addEventListener("click", (m) => {
-      m.preventDefault(), m.stopPropagation(), d(a, s + 1);
-    }), g.addEventListener("click", (m) => {
-      m.preventDefault(), m.stopPropagation(), d(a, s - 1);
-    }), p.addEventListener("click", (m) => {
-      m.stopPropagation(), this.insertMatrix(t, a, s), this.closeMatrixPopup();
-    }), this.activeMatrixPopup.appendChild(r), this.activeMatrixPopup.appendChild(l), this.activeMatrixPopup.appendChild(n), document.body.appendChild(this.activeMatrixPopup);
+    g.addEventListener("input", () => {
+      const d = parseInt(g.value, 10) || 1;
+      M(d, n);
+    }), k.addEventListener("input", () => {
+      const d = parseInt(k.value, 10) || 1;
+      M(l, d);
+    }), u.addEventListener("click", (d) => {
+      d.preventDefault(), d.stopPropagation(), M(l + 1, n);
+    }), y.addEventListener("click", (d) => {
+      d.preventDefault(), d.stopPropagation(), M(l - 1, n);
+    }), p.addEventListener("click", (d) => {
+      d.preventDefault(), d.stopPropagation(), M(l, n + 1);
+    }), b.addEventListener("click", (d) => {
+      d.preventDefault(), d.stopPropagation(), M(l, n - 1);
+    }), m.addEventListener("click", (d) => {
+      d.stopPropagation(), this.insertMatrix(t, l, n), this.closeMatrixPopup();
+    }), this.activeMatrixPopup.appendChild(s), this.activeMatrixPopup.appendChild(o), this.activeMatrixPopup.appendChild(h), document.body.appendChild(this.activeMatrixPopup);
   }
   insertMatrix(t, e, r) {
-    let l = [];
+    let s = [];
     for (let n = 0; n < e; n++) {
       let h = [];
       for (let c = 0; c < r; c++)
         h.push("{#?}");
-      l.push(h.join(" & "));
+      s.push(h.join(" & "));
     }
-    const a = t || "matrix", s = `\\begin{${a}}${l.join(" \\\\ ")}\\end{${a}}`;
-    this.insertAtCursor(s);
+    const o = t || "matrix", l = `\\begin{${o}}${s.join(" \\\\ ")}\\end{${o}}`;
+    this.insertAtCursor(l);
   }
   closeMatrixPopup() {
-    this.activeMatrixPopup && this.activeMatrixPopup.parentNode && this.activeMatrixPopup.parentNode.removeChild(this.activeMatrixPopup), this.activeMatrixPopup = null;
+    this.activeMatrixPopup && this.activeMatrixPopup.parentNode && this.activeMatrixPopup.parentNode.removeChild(this.activeMatrixPopup), this.activeMatrixPopup = null, this.activeMatrixBtn = null;
   }
-  openColorPicker(t) {
-    this.closeAllPopups(), this.colorPickerPopup = document.createElement("div"), this.colorPickerPopup.className = "cme-more-popup", this.colorPickerPopup.style.gridTemplateColumns = "repeat(4, auto)", this.colorPickerPopup.style.left = `${t.left + t.width / 2}px`, this.colorPickerPopup.style.top = `${t.bottom + 4}px`, this.colorPickerPopup.style.transform = "translateX(-50%)", [
+  openColorPicker(t, e = null) {
+    this.closeAllPopups(), this.activeColorBtn = e, this.colorPickerPopup = document.createElement("div"), this.colorPickerPopup.className = "cme-more-popup", this.colorPickerPopup.style.gridTemplateColumns = "repeat(4, auto)", this.colorPickerPopup.style.left = `${t.left + t.width / 2}px`, this.colorPickerPopup.style.top = `${t.bottom + 4}px`, this.colorPickerPopup.style.transform = "translateX(-50%)", this.colorPickerPopup.addEventListener(
+      "mousedown",
+      (s) => s.stopPropagation()
+    ), this.colorPickerPopup.addEventListener(
+      "pointerdown",
+      (s) => s.stopPropagation()
+    ), [
       "black",
       "#e53935",
       "#1e88e5",
@@ -8631,16 +8683,16 @@ const L = class L {
       "#8e24aa",
       "#3949ab",
       "#00acc1"
-    ].forEach((r) => {
-      const l = document.createElement("div");
-      l.style.width = "18px", l.style.height = "18px", l.style.borderRadius = "50%", l.style.margin = "4px", l.style.cursor = "pointer", l.style.backgroundColor = r, l.style.border = this.activeStyles.color === r ? "2px solid #222" : "1px solid #ddd", l.addEventListener("mousedown", (a) => {
-        var s;
-        a.preventDefault(), this.activeStyles.color = r, (s = this.mathField) != null && s.applyStyle && this.mathField.applyStyle({ color: r === "black" ? "none" : r }), this.closeColorPicker(), this.renderToolbarItems();
-      }), this.colorPickerPopup.appendChild(l);
+    ].forEach((s) => {
+      const o = document.createElement("div");
+      o.style.width = "18px", o.style.height = "18px", o.style.borderRadius = "50%", o.style.margin = "4px", o.style.cursor = "pointer", o.style.backgroundColor = s, o.style.border = this.activeStyles.color === s ? "2px solid #222" : "1px solid #ddd", o.addEventListener("mousedown", (l) => {
+        var n;
+        l.preventDefault(), this.activeStyles.color = s, (n = this.mathField) != null && n.applyStyle && this.mathField.applyStyle({ color: s === "black" ? "none" : s }), this.closeColorPicker(), this.renderToolbarItems();
+      }), this.colorPickerPopup.appendChild(o);
     }), document.body.appendChild(this.colorPickerPopup);
   }
   closeColorPicker() {
-    this.colorPickerPopup && this.colorPickerPopup.parentNode && this.colorPickerPopup.parentNode.removeChild(this.colorPickerPopup), this.colorPickerPopup = null;
+    this.colorPickerPopup && this.colorPickerPopup.parentNode && this.colorPickerPopup.parentNode.removeChild(this.colorPickerPopup), this.colorPickerPopup = null, this.activeColorBtn = null;
   }
   openSpecialCharacters(t) {
     this.specCharModal || (this.specCharModal = new dt({
@@ -8656,10 +8708,10 @@ const L = class L {
     this.close();
   }
 };
-U(L, "VERSION", S == null ? void 0 : S.version);
-let O = L, R = null;
+U(D, "VERSION", E == null ? void 0 : E.version);
+let H = D, O = null;
 function pt() {
-  return R || (R = new O()), R;
+  return O || (O = new H()), O;
 }
 class X {
   constructor(t = {}) {
@@ -8691,43 +8743,43 @@ class X {
     this.element && this.element.parentNode && this.element.parentNode.removeChild(this.element);
   }
 }
-function wt(o) {
-  return new X(o);
+function wt(a) {
+  return new X(a);
 }
 if (typeof customElements < "u" && !customElements.get("digi-math-widget")) {
-  class o extends HTMLElement {
+  class a extends HTMLElement {
     static get observedAttributes() {
       return ["latex", "editable", "mode"];
     }
     connectedCallback() {
-      const e = this.getAttribute("latex") || "", r = this.getAttribute("editable") !== "false", l = this.getAttribute("mode") || "math";
+      const e = this.getAttribute("latex") || "", r = this.getAttribute("editable") !== "false", s = this.getAttribute("mode") || "math";
       this.widget = new X({
         container: this,
         latex: e,
         editable: r,
-        mode: l,
-        onUpdate: (a) => {
-          this.setAttribute("latex", a), this.dispatchEvent(new CustomEvent("latexChange", { detail: { latex: a }, bubbles: !0 }));
+        mode: s,
+        onUpdate: (o) => {
+          this.setAttribute("latex", o), this.dispatchEvent(new CustomEvent("latexChange", { detail: { latex: o }, bubbles: !0 }));
         }
       });
     }
-    attributeChangedCallback(e, r, l) {
-      r !== l && e === "latex" && this.widget && this.widget.setLatex(l);
+    attributeChangedCallback(e, r, s) {
+      r !== s && e === "latex" && this.widget && this.widget.setLatex(s);
     }
     disconnectedCallback() {
       this.widget && this.widget.destroy();
     }
   }
-  customElements.define("digi-math-widget", o);
+  customElements.define("digi-math-widget", a);
 }
-const kt = S == null ? void 0 : S.version;
+const kt = E == null ? void 0 : E.version;
 export {
   ot as CME_SHADOW_DOM_CSS,
-  O as DigiMathChemEditor,
+  H as DigiMathChemEditor,
   X as DigiMathWidget,
   dt as SpecialCharacterModal,
   kt as VERSION,
   wt as createMathWidget,
-  O as default,
+  H as default,
   nt as initMathFieldCursorFix
 };