@jackuait/blok 0.4.1-beta.11 → 0.4.1-beta.13

package/dist/chunks/{i18next-loader-BdNRw4n4.mjs → i18next-loader-BMO6Rg_l.mjs}

@@ -1,4 +1,4 @@
-import { e as i } from "./blok-oNSQ3HA6.mjs";
+import { e as i } from "./blok-Xfgk2kCJ.mjs";
 const l = async (e, r) => {
   const n = (await import("./i18next-CugVlwWp.mjs")).default.createInstance(), s = {
     lng: e,

package/dist/chunks/{index-DHgXmfki.mjs → index-DyPp5v5e.mjs}

@@ -1,4 +1,4 @@
-import { t as f, q as i } from "./inline-tool-convert-CRqgjRim.mjs";
+import { t as f, q as i } from "./inline-tool-convert-DhHW7EYl.mjs";
 const a = {
   wrapper: i(
     "fixed z-[2] bottom-5 left-5",

package/dist/chunks/{inline-tool-convert-CRqgjRim.mjs → inline-tool-convert-DhHW7EYl.mjs}

@@ -18,7 +18,7 @@ let nt = (o = 21) => {
   return t;
 };
 var ot = /* @__PURE__ */ ((o) => (o.VERBOSE = "VERBOSE", o.INFO = "INFO", o.WARN = "WARN", o.ERROR = "ERROR", o))(ot || {});
-const rt = () => "0.4.1-beta.11", Ct = {
+const rt = () => "0.4.1-beta.13", Ct = {
   BACKSPACE: 8,
   TAB: 9,
   ENTER: 13,
@@ -1895,6 +1895,7 @@ const te = `
       },
       children: {
         items: s,
+        width: "auto",
         onOpen: () => {
           c && (this.selectionAPI.setFakeBackground(), this.selectionAPI.save());
         },

package/dist/full.mjs

@@ -10,10 +10,10 @@ var e = (a, l, o) => l in a ? n(a, l, { enumerable: !0, configurable: !0, writab
       d.call(l, o) && e(a, o, l[o]);
   return a;
 }, r = (a, l) => t(a, c(l));
-import { B as v, v as A } from "./chunks/blok-oNSQ3HA6.mjs";
+import { B as v, v as A } from "./chunks/blok-Xfgk2kCJ.mjs";
 import { List as p, Header as f, Paragraph as I, Link as k, Italic as u, Bold as B } from "./tools.mjs";
 import { defaultBlockTools as H, defaultInlineTools as P } from "./tools.mjs";
-import { D as _ } from "./chunks/inline-tool-convert-CRqgjRim.mjs";
+import { D as _ } from "./chunks/inline-tool-convert-DhHW7EYl.mjs";
 const m = {
   paragraph: {
     class: I,

package/dist/tools.mjs

@@ -2,7 +2,7 @@ var nt = Object.defineProperty, rt = Object.defineProperties;
 var st = Object.getOwnPropertyDescriptors;
 var K = Object.getOwnPropertySymbols;
 var ot = Object.prototype.hasOwnProperty, it = Object.prototype.propertyIsEnumerable;
-var U = (f, t, e) => t in f ? nt(f, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : f[t] = e, w = (f, t) => {
+var U = (f, t, e) => t in f ? nt(f, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : f[t] = e, O = (f, t) => {
   for (var e in t || (t = {}))
     ot.call(t, e) && U(f, e, t[e]);
   if (K)
@@ -10,8 +10,8 @@ var U = (f, t, e) => t in f ? nt(f, t, { enumerable: !0, configurable: !0, writa
       it.call(t, e) && U(f, e, t[e]);
   return f;
 }, P = (f, t) => rt(f, st(t));
-import { t as x, D as m, a9 as et, aa as at, ab as lt, A as ct, ac as dt, ad as ut, ae as ht, af as ft, ag as pt, ah as mt, ai as G, aj as j, ak as $, f as A, al as gt, am as Et, S as H, P as Tt, an as Ct, l as At, J as yt } from "./chunks/inline-tool-convert-CRqgjRim.mjs";
-import { a0 as Dt } from "./chunks/inline-tool-convert-CRqgjRim.mjs";
+import { t as x, D as m, a9 as et, aa as at, ab as lt, A as ct, ac as dt, ad as ut, ae as ht, af as ft, ag as pt, ah as mt, ai as G, aj as j, ak as $, f as A, al as gt, am as Et, S as H, P as Tt, an as Ct, l as At, J as yt } from "./chunks/inline-tool-convert-DhHW7EYl.mjs";
+import { a0 as Dt } from "./chunks/inline-tool-convert-DhHW7EYl.mjs";
 const W = [
   "empty:before:pointer-events-none",
   "empty:before:text-gray-text",
@@ -531,7 +531,8 @@ const L = class L {
       titleKey: t.nameKey,
       name: `header-${t.number}`,
       data: { level: t.number },
-      searchTerms: [`h${t.number}`, "title", "header", "heading"]
+      searchTerms: [`h${t.number}`, "title", "header", "heading"],
+      shortcut: "#".repeat(t.number)
     }));
   }
 };
@@ -554,15 +555,32 @@ const u = class u {
       })));
     }, this.api = n, this.readOnly = r, this._settings = e || {}, this._data = this.normalizeData(t), s && (this.blockId = s.id), this._data.style === "ordered" && this.api.events.on("block changed", this.handleBlockChanged);
   }
+  /**
+   * Legacy list item structure for backward compatibility
+   */
+  static isLegacyFormat(t) {
+    return typeof t == "object" && t !== null && "items" in t && Array.isArray(t.items);
+  }
   normalizeData(t) {
     var n;
     const e = this._settings.defaultStyle || "unordered";
-    return !t || typeof t != "object" ? {
-      text: "",
-      style: e,
-      checked: !1,
-      depth: 0
-    } : w({
+    if (!t || typeof t != "object")
+      return {
+        text: "",
+        style: e,
+        checked: !1,
+        depth: 0
+      };
+    if (u.isLegacyFormat(t)) {
+      const r = t.items[0], s = (r == null ? void 0 : r.content) || "", o = (r == null ? void 0 : r.checked) || !1;
+      return O({
+        text: s,
+        style: t.style || e,
+        checked: !!o,
+        depth: 0
+      }, t.start !== void 0 && t.start !== 1 ? { start: t.start } : {});
+    }
+    return O({
       text: t.text || "",
       style: t.style || e,
       checked: !!t.checked,
@@ -1154,7 +1172,7 @@ const u = class u {
           charCount: r.charCount,
           node: s,
           offset: e - r.charCount
-        } : P(w({}, r), {
+        } : P(O({}, r), {
           charCount: r.charCount + o
         });
       },
@@ -1201,7 +1219,7 @@ const u = class u {
     this.syncContentFromDOM();
     const s = n + 1;
     this._data.depth = s;
-    const o = await this.api.blocks.update(this.blockId || "", P(w({}, this._data), {
+    const o = await this.api.blocks.update(this.blockId || "", P(O({}, this._data), {
       depth: s
     }));
     this.setCaretToBlockContent(o);
@@ -1212,7 +1230,7 @@ const u = class u {
     this.syncContentFromDOM();
     const e = t - 1;
     this._data.depth = e;
-    const n = await this.api.blocks.update(this.blockId || "", P(w({}, this._data), {
+    const n = await this.api.blocks.update(this.blockId || "", P(O({}, this._data), {
       depth: e
     }));
     this.setCaretToBlockContent(n);
@@ -1342,7 +1360,11 @@ const u = class u {
     return {
       text: {
         br: !0,
-        a: !0,
+        a: {
+          href: !0,
+          target: "_blank",
+          rel: "nofollow"
+        },
         b: !0,
         i: !0,
         mark: !0
@@ -1421,7 +1443,8 @@ const u = class u {
         titleKey: "bulletedList",
         data: { style: "unordered" },
         name: "bulleted-list",
-        searchTerms: ["ul", "bullet", "unordered", "list"]
+        searchTerms: ["ul", "bullet", "unordered", "list"],
+        shortcut: "-"
       },
       {
         icon: j,
@@ -1429,7 +1452,8 @@ const u = class u {
         titleKey: "numberedList",
         data: { style: "ordered" },
         name: "numbered-list",
-        searchTerms: ["ol", "ordered", "number", "list"]
+        searchTerms: ["ol", "ordered", "number", "list"],
+        shortcut: "1."
       },
       {
         icon: $,
@@ -1437,7 +1461,8 @@ const u = class u {
         titleKey: "todoList",
         data: { style: "checklist" },
         name: "check-list",
-        searchTerms: ["checkbox", "task", "todo", "check", "list"]
+        searchTerms: ["checkbox", "task", "todo", "check", "list"],
+        shortcut: "[]"
       }
     ];
   }
@@ -2082,7 +2107,7 @@ const i = class i {
       return;
     const s = `strong[${i.DATA_ATTR_COLLAPSED_ACTIVE}="true"]`;
     r.querySelectorAll(s).forEach((l) => {
-      var k, I, F, z, q;
+      var k, I, _, z, q;
       const d = l.getAttribute(i.DATA_ATTR_PREV_LENGTH), c = l.previousSibling;
       if (!d || !c || c.nodeType !== Node.TEXT_NODE)
         return;
@@ -2097,13 +2122,13 @@ const i = class i {
       const C = E.match(/^[\u00A0\s]+/);
       if (C && !l.hasAttribute(i.DATA_ATTR_LEADING_WHITESPACE) && l.setAttribute(i.DATA_ATTR_LEADING_WHITESPACE, C[0]), E.length === 0)
         return;
-      const T = (I = l.textContent) != null ? I : "", N = T + E, B = (F = l.getAttribute(i.DATA_ATTR_LEADING_WHITESPACE)) != null ? F : "", R = B.length > 0 && T.length === 0 && !N.startsWith(B) ? B + N : N, b = document.createTextNode(R);
+      const T = (I = l.textContent) != null ? I : "", N = T + E, B = (_ = l.getAttribute(i.DATA_ATTR_LEADING_WHITESPACE)) != null ? _ : "", R = B.length > 0 && T.length === 0 && !N.startsWith(B) ? B + N : N, b = document.createTextNode(R);
       for (; l.firstChild; )
         l.removeChild(l.firstChild);
       if (l.appendChild(b), !(t != null && t.isCollapsed) || !i.isNodeWithin(t.focusNode, p))
         return;
-      const S = document.createRange(), _ = (q = (z = b.textContent) == null ? void 0 : z.length) != null ? q : 0;
-      S.setStart(b, _), S.collapse(!0), t.removeAllRanges(), t.addRange(S);
+      const S = document.createRange(), F = (q = (z = b.textContent) == null ? void 0 : z.length) != null ? q : 0;
+      S.setStart(b, F), S.collapse(!0), t.removeAllRanges(), t.addRange(S);
     });
   }
   /**
@@ -2312,7 +2337,7 @@ const i = class i {
     if (!r)
       return;
     r.querySelectorAll(`strong[${i.DATA_ATTR_COLLAPSED_LENGTH}]`).forEach((a) => {
-      var v, R, b, S, _;
+      var v, R, b, S, F;
       const l = a, d = l.getAttribute(i.DATA_ATTR_COLLAPSED_LENGTH);
       if (!d)
         return;
@@ -2323,11 +2348,11 @@ const i = class i {
       if (B && T) {
         const k = N.slice(0, E), I = N.slice(E);
         T.textContent = k;
-        const F = document.createTextNode(I);
-        (b = l.parentNode) == null || b.insertBefore(F, l.nextSibling);
+        const _ = document.createTextNode(I);
+        (b = l.parentNode) == null || b.insertBefore(_, l.nextSibling);
       }
       if (B && l.removeAttribute(i.DATA_ATTR_PREV_LENGTH), t != null && t.isCollapsed && g && i.isNodeWithin(t.focusNode, l)) {
-        const k = document.createRange(), I = (_ = (S = g.textContent) == null ? void 0 : S.length) != null ? _ : 0;
+        const k = document.createRange(), I = (F = (S = g.textContent) == null ? void 0 : S.length) != null ? F : 0;
         k.setStart(g, I), k.collapse(!0), t.removeAllRanges(), t.addRange(k);
       }
       p && l.removeAttribute(i.DATA_ATTR_COLLAPSED_LENGTH);
@@ -2594,7 +2619,7 @@ const i = class i {
 };
 i.isInline = !0, i.title = "Bold", i.titleKey = "bold", i.shortcutListenerRegistered = !1, i.selectionListenerRegistered = !1, i.inputListenerRegistered = !1, i.beforeInputListenerRegistered = !1, i.globalListenersInitialized = i.initializeGlobalListeners(), i.collapsedExitRecords = /* @__PURE__ */ new Set(), i.markerSequence = 0, i.isProcessingMutation = !1, i.DATA_ATTR_COLLAPSED_LENGTH = "data-blok-bold-collapsed-length", i.DATA_ATTR_COLLAPSED_ACTIVE = "data-blok-bold-collapsed-active", i.DATA_ATTR_PREV_LENGTH = "data-blok-bold-prev-length", i.DATA_ATTR_LEADING_WHITESPACE = "data-blok-bold-leading-ws", i.instances = /* @__PURE__ */ new Set(), i.pendingBoundaryCaretAdjustments = /* @__PURE__ */ new WeakSet(), i.shortcut = "CMD+B";
 let Z = i;
-const O = class O {
+const D = class D {
   /**
    * Sanitizer Rule
    * Leave <i> and <em> tags
@@ -2865,9 +2890,9 @@ const O = class O {
     n.insertBefore(a, e.nextSibling), n.insertBefore(t, a);
   }
 };
-O.isInline = !0, O.title = "Italic", O.titleKey = "italic", O.shortcut = "CMD+I";
-let Q = O;
-const D = class D {
+D.isInline = !0, D.title = "Italic", D.titleKey = "italic", D.shortcut = "CMD+I";
+let Q = D;
+const w = class w {
   /**
    * @param api - Blok API
    */
@@ -2907,6 +2932,7 @@ const D = class D {
       isActive: () => !!this.selection.findParentTag("A"),
       children: {
         hideChevron: !0,
+        width: "200px",
         items: [
           {
             type: Tt.Html,
@@ -3093,8 +3119,8 @@ const D = class D {
     t && t.setAttribute(e, n ? "true" : "false");
   }
 };
-D.isInline = !0, D.title = "Link", D.titleKey = "link", D.shortcut = "CMD+K";
-let tt = D;
+w.isInline = !0, w.title = "Link", w.titleKey = "link", w.shortcut = "CMD+K";
+let tt = w;
 const vt = {
   paragraph: { preserveBlank: !0 },
   header: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.4.1-beta.11",
+  "version": "0.4.1-beta.13",
   "description": "Blok — headless, highly extensible rich text editor built for developers who need to implement a block-based editing experience (similar to Notion) without building it from scratch",
   "module": "dist/blok.mjs",
   "types": "./types/index.d.ts",
@@ -96,14 +96,12 @@
     "verify:package:local": "npm pack && node scripts/verify-published-package.mjs --local",
     "verify:version": "node scripts/verify-version.mjs",
     "unpublish": "node scripts/unpublish-package.mjs",
-    "bundle:track": "node scripts/track-bundle-size.mjs --verbose",
-    "bundle:variants": "node scripts/build-bundle-variants.mjs --verbose",
-    "bundle:trends": "node scripts/view-bundle-trends.mjs --trends",
-    "bundle:history": "node scripts/view-bundle-trends.mjs",
     "perf:analyze": "node scripts/analyze-performance.mjs",
     "perf:compare": "node scripts/analyze-performance.mjs --baseline",
     "perf:dashboard": "node scripts/generate-performance-dashboard.mjs",
-    "e2e:validate-categories": "node scripts/validate-test-categories.mjs"
+    "e2e:validate-categories": "node scripts/validate-test-categories.mjs",
+    "size": "size-limit",
+    "size:why": "size-limit --why"
   },
   "author": "JackUait",
   "contributors": [
@@ -123,6 +121,8 @@
     "@playwright/test": "1.57.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@size-limit/esbuild-why": "^12.0.0",
+    "@size-limit/preset-small-lib": "^12.0.0",
     "@storybook/addon-a11y": "10.1.1",
     "@storybook/addon-vitest": "10.1.1",
     "@storybook/global": "5.0.0",
@@ -150,6 +150,7 @@
     "postcss": "8.5.6",
     "rollup-plugin-license": "3.6.0",
     "semantic-release": "^25.0.2",
+    "size-limit": "^12.0.0",
     "storybook": "10.1.1",
     "tailwindcss": "3",
     "tslint": "6.1.3",
@@ -163,5 +164,22 @@
   "dependencies": {
     "i18next": "^25.7.3",
     "nanoid": "^5.1.6"
-  }
+  },
+  "size-limit": [
+    {
+      "name": "Minimum (core only)",
+      "path": "src/variants/blok-minimum.ts",
+      "limit": "300 KB"
+    },
+    {
+      "name": "Normal (with tools)",
+      "path": "src/blok.ts",
+      "limit": "300 KB"
+    },
+    {
+      "name": "Maximum (all locales)",
+      "path": "src/variants/blok-maximum.ts",
+      "limit": "300 KB"
+    }
+  ]
 }

package/src/components/inline-tools/inline-tool-convert.ts

@@ -123,6 +123,7 @@ export class ConvertInlineTool implements InlineTool {
       },
       children: {
         items: convertToItems,
+        width: 'auto',
         onOpen: () => {
           if (isDesktop) {
             this.selectionAPI.setFakeBackground();

package/src/components/inline-tools/inline-tool-link.ts

@@ -133,6 +133,7 @@ export class LinkInlineTool implements InlineTool {
       isActive: () => !!this.selection.findParentTag('A'),
       children: {
         hideChevron: true,
+        width: '200px',
         items: [
           {
             type: PopoverItemType.Html,

package/src/components/modules/toolbar/blockSettings.ts

@@ -164,10 +164,11 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
 
     const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
     const popoverParams: PopoverParams & { flipper?: Flipper } = {
-      searchable: true,
+      searchable: false,
       trigger: trigger || this.nodes.wrapper,
       items: await this.getTunesItems(block, commonTunes, toolTunes),
       scopeElement: this.Blok.API.methods.ui.nodes.redactor,
+      width: 'auto',
       messages: {
         nothingFound: this.Blok.I18n.t('popover.nothingFound'),
         search: this.Blok.I18n.t('popover.search'),

package/src/components/modules/toolbar/index.ts

@@ -109,18 +109,6 @@ export class Toolbar extends Module<ToolbarNodes> {
    */
   private toolboxInstance: Toolbox | null = null;
 
-  /**
-   * Mouse position when mousedown occurred on settings toggler
-   * Used to distinguish between click and drag
-   */
-  private settingsTogglerMouseDownPosition: { x: number; y: number } | null = null;
-
-  /**
-   * Mouse position when mousedown occurred on plus button
-   * Used to distinguish between click and drag
-   */
-  private plusButtonMouseDownPosition: { x: number; y: number } | null = null;
-
   /**
    * Last calculated toolbar Y position
    * Used to avoid unnecessary repositioning when the position hasn't changed
@@ -133,6 +121,12 @@ export class Toolbar extends Module<ToolbarNodes> {
    */
   private ignoreNextSettingsMouseUp = false;
 
+  /**
+   * Set of pending document-level mouseup listeners that need cleanup on destroy.
+   * Each listener is added on mousedown and removed after mouseup fires.
+   */
+  private pendingMouseUpListeners: Set<(e: MouseEvent) => void> = new Set();
+
   /**
    * @class
    * @param moduleConfiguration - Module Configuration
@@ -218,7 +212,6 @@ export class Toolbar extends Module<ToolbarNodes> {
         'not-mobile:w-6'
       ),
       settingsTogglerHidden: 'hidden',
-      settingsTogglerOpened: '',
     };
   }
 
@@ -660,60 +653,25 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     /**
      * Plus button mousedown handler
-     * Stores the initial mouse position and sets up a document-level mouseup listener.
-     * Using document-level mouseup ensures we catch the event even if the mouse
-     * moves slightly off the button element during the click.
+     * Uses click-vs-drag detection to distinguish clicks from drags.
      */
     this.readOnlyMutableListeners.on(plusButton, 'mousedown', (e) => {
       hide();
 
-      const mouseEvent = e as MouseEvent;
-
-      /**
-       * Store the mouse position when mousedown occurs
-       * This will be used to determine if the user dragged or clicked
-       */
-      this.plusButtonMouseDownPosition = {
-        x: mouseEvent.clientX,
-        y: mouseEvent.clientY,
-      };
-
-      /**
-       * Add document-level mouseup listener to catch the event even if mouse
-       * moves slightly off the button. This is removed after firing once.
-       */
-      const onMouseUp = (mouseUpEvent: MouseEvent): void => {
-        document.removeEventListener('mouseup', onMouseUp, true);
-
-        const mouseDownPos = this.plusButtonMouseDownPosition;
-
-        this.plusButtonMouseDownPosition = null;
-
-        if (mouseDownPos === null) {
-          return;
-        }
-
-        const wasDragged = (
-          Math.abs(mouseUpEvent.clientX - mouseDownPos.x) > DRAG_THRESHOLD ||
-          Math.abs(mouseUpEvent.clientY - mouseDownPos.y) > DRAG_THRESHOLD
-        );
+      this.setupClickVsDrag(
+        e as MouseEvent,
+        (mouseUpEvent) => {
+          /**
+           * Check for modifier key to determine insert direction:
+           * - Option/Alt on Mac, Ctrl on Windows → insert above
+           * - No modifier → insert below (default)
+           */
+          const userOS = getUserOS();
+          const insertAbove = userOS.win ? mouseUpEvent.ctrlKey : mouseUpEvent.altKey;
 
-        if (wasDragged) {
-          return;
+          this.plusButtonClicked(insertAbove);
         }
-
-        /**
-         * Check for modifier key to determine insert direction:
-         * - Option/Alt on Mac, Ctrl on Windows → insert above
-         * - No modifier → insert below (default)
-         */
-        const userOS = getUserOS();
-        const insertAbove = userOS.win ? mouseUpEvent.ctrlKey : mouseUpEvent.altKey;
-
-        this.plusButtonClicked(insertAbove);
-      };
-
-      document.addEventListener('mouseup', onMouseUp, true);
+      );
     }, true);
 
     /**
@@ -931,66 +889,35 @@ export class Toolbar extends Module<ToolbarNodes> {
     if (settingsToggler) {
       /**
        * Settings toggler mousedown handler
-       * Stores the initial mouse position and sets up a document-level mouseup listener.
-       * Using document-level mouseup ensures we catch the event even if the mouse
-       * moves slightly off the toggler element during the click.
+       * Uses click-vs-drag detection to distinguish clicks from drags.
        */
       this.readOnlyMutableListeners.on(settingsToggler, 'mousedown', (e) => {
         hide();
 
-        const mouseEvent = e as MouseEvent;
-
-        /**
-         * Store the mouse position when mousedown occurs
-         * This will be used to determine if the user dragged or clicked
-         */
-        this.settingsTogglerMouseDownPosition = {
-          x: mouseEvent.clientX,
-          y: mouseEvent.clientY,
-        };
-
-        /**
-         * Add document-level mouseup listener to catch the event even if mouse
-         * moves slightly off the toggler. This is removed after firing once.
-         */
-        const onMouseUp = (mouseUpEvent: MouseEvent): void => {
-          document.removeEventListener('mouseup', onMouseUp, true);
-
-          /**
-           * Ignore mouseup after a block drop to prevent settings menu from opening
-           */
-          if (this.ignoreNextSettingsMouseUp) {
-            this.ignoreNextSettingsMouseUp = false;
-            this.settingsTogglerMouseDownPosition = null;
-
-            return;
-          }
-
-          const mouseDownPos = this.settingsTogglerMouseDownPosition;
-
-          this.settingsTogglerMouseDownPosition = null;
-
-          if (mouseDownPos === null) {
-            return;
-          }
-
-          const wasDragged = (
-            Math.abs(mouseUpEvent.clientX - mouseDownPos.x) > DRAG_THRESHOLD ||
-            Math.abs(mouseUpEvent.clientY - mouseDownPos.y) > DRAG_THRESHOLD
-          );
-
-          if (wasDragged) {
-            return;
-          }
-
-          this.settingsTogglerClicked();
-
-          if (this.toolboxInstance?.opened) {
-            this.toolboxInstance.close();
+        this.setupClickVsDrag(
+          e as MouseEvent,
+          () => {
+            this.settingsTogglerClicked();
+
+            if (this.toolboxInstance?.opened) {
+              this.toolboxInstance.close();
+            }
+          },
+          {
+            /**
+             * Check if we should ignore this mouseup (e.g., after a block drop)
+             */
+            beforeCallback: () => {
+              if (this.ignoreNextSettingsMouseUp) {
+                this.ignoreNextSettingsMouseUp = false;
+
+                return false;
+              }
+
+              return true;
+            },
           }
-        };
-
-        document.addEventListener('mouseup', onMouseUp, true);
+        );
       }, true);
     }
 
@@ -1302,6 +1229,50 @@ export class Toolbar extends Module<ToolbarNodes> {
     return container;
   }
 
+  /**
+   * Sets up a click-vs-drag detection pattern on an element.
+   * Tracks mousedown position and fires callback only if mouse didn't move beyond threshold.
+   * Uses document-level mouseup to catch events even if mouse moves off element.
+   * @param element - Element to attach mousedown listener to
+   * @param mouseEvent - The mousedown event
+   * @param onClickCallback - Callback to fire if it was a click (not a drag)
+   * @param options - Optional configuration
+   * @param options.beforeCallback - Function called before click callback, return false to abort
+   */
+  private setupClickVsDrag(
+    mouseEvent: MouseEvent,
+    onClickCallback: (mouseUpEvent: MouseEvent) => void,
+    options?: { beforeCallback?: () => boolean }
+  ): void {
+    const startPosition = {
+      x: mouseEvent.clientX,
+      y: mouseEvent.clientY,
+    };
+
+    const onMouseUp = (mouseUpEvent: MouseEvent): void => {
+      document.removeEventListener('mouseup', onMouseUp, true);
+      this.pendingMouseUpListeners.delete(onMouseUp);
+
+      if (options?.beforeCallback && !options.beforeCallback()) {
+        return;
+      }
+
+      const wasDragged = (
+        Math.abs(mouseUpEvent.clientX - startPosition.x) > DRAG_THRESHOLD ||
+        Math.abs(mouseUpEvent.clientY - startPosition.y) > DRAG_THRESHOLD
+      );
+
+      if (wasDragged) {
+        return;
+      }
+
+      onClickCallback(mouseUpEvent);
+    };
+
+    this.pendingMouseUpListeners.add(onMouseUp);
+    document.addEventListener('mouseup', onMouseUp, true);
+  }
+
   /**
    * Removes all created and saved HTMLElements
    * It is used in Read-Only mode
@@ -1311,5 +1282,15 @@ export class Toolbar extends Module<ToolbarNodes> {
     if (this.toolboxInstance) {
       this.toolboxInstance.destroy();
     }
+
+    /**
+     * Clean up any pending document-level mouseup listeners.
+     * These are added on mousedown and normally removed on mouseup,
+     * but if the component is destroyed mid-click, they need manual cleanup.
+     */
+    for (const listener of this.pendingMouseUpListeners) {
+      document.removeEventListener('mouseup', listener, true);
+    }
+    this.pendingMouseUpListeners.clear();
   }
 }