superdoc 2.20.0 → 2.20.1-next.2

package/dist/superdoc.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("./chunks/rolldown-runtime-74VwNCz7.cjs");
 const require_blank_docx = require("./chunks/blank-docx-BuFAbRjs.cjs");
-const require_create_super_doc_ui = require("./chunks/create-super-doc-ui-BQBQsjoe.cjs");
+const require_create_super_doc_ui = require("./chunks/create-super-doc-ui-DFCfYEpW.cjs");
 const require_eventemitter3 = require("./chunks/eventemitter3-C_TAnXOl.cjs");
 const require_uuid = require("./chunks/uuid-BhG0ngwk.cjs");
 const require__plugin_vue_export_helper = require("./chunks/_plugin-vue_export-helper-CYxINHh_.cjs");
@@ -316,7 +316,7 @@ var shuffleArray = (array) => {
 var DEFAULT_ENDPOINT = "https://ingest.superdoc.dev/v1/collect";
 function getSuperdocVersion() {
 	try {
-		return "2.20.0";
+		return "2.20.1-next.2";
 	} catch {
 		return "unknown";
 	}
@@ -22176,6 +22176,7 @@ var SuperDoc_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_v
 			if (!documentId) return;
 			clearV2CommandShortcutBinding(documentId);
 			if (typeof bindEditShortcuts !== "function") return;
+			getSuperDocUI();
 			const openLinkWorkflow = resolveV2LinkWorkflowOpener();
 			const unbind = bindEditShortcuts({
 				commandRoute: {
@@ -24520,7 +24521,7 @@ var SuperDoc_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_v
 			], 38);
 		};
 	}
-}, [["__scopeId", "data-v-7bbf01da"]]);
+}, [["__scopeId", "data-v-e476c448"]]);
 //#endregion
 //#region src/core/create-app.js
 var PINIA_DEVTOOLS_SETUP_EVENT = "devtools-plugin:setup";
@@ -41609,10 +41610,9 @@ var Toolbar_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vu
 		});
 		const showLeftSide = proxy.$toolbar.config?.toolbarGroups?.includes("left");
 		const showRightSide = proxy.$toolbar.config?.toolbarGroups?.includes("right");
-		const excludeButtonsList = proxy.$toolbar.config?.toolbarButtonsExclude || [];
 		const getFilteredItems = (position) => {
 			toolbarStateVersion.value;
-			return proxy.$toolbar.getToolbarItemByGroup(position).filter((item) => !excludeButtonsList.includes(item.name.value));
+			return proxy.$toolbar.getToolbarItemByGroup(position);
 		};
 		const updateCompactSideGroups = () => {
 			compactSideGroups.value = proxy.$toolbar.getAvailableWidth() <= RESPONSIVE_BREAKPOINTS.lg;
@@ -41786,7 +41786,7 @@ var Toolbar_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vu
 			], 32);
 		};
 	}
-}, [["__scopeId", "data-v-9418cc7d"]]);
+}, [["__scopeId", "data-v-0d00bc5b"]]);
 //#endregion
 //#region src/internal/toolbar/built-in/font-options.js
 /**
@@ -43548,6 +43548,35 @@ var getToolbarItemWidth = (item, controlSizes) => {
 	if (item.type === "separator") return controlSizes.get("separator");
 	return controlSizes.get(item.name.value) || controlSizes.get("default");
 };
+var collapseSeparatorRun = (items) => {
+	const result = [];
+	for (const item of items) {
+		if (item.type === "separator") {
+			const previous = result[result.length - 1];
+			if (!previous || previous.type === "separator") continue;
+		}
+		result.push(item);
+	}
+	while (result.length && result[result.length - 1].type === "separator") result.pop();
+	return result;
+};
+var normalizeSeparators = (items) => {
+	const byGroup = /* @__PURE__ */ new Map();
+	for (const item of items) {
+		const group = item.group?.value || "center";
+		if (!byGroup.has(group)) byGroup.set(group, []);
+		byGroup.get(group).push(item);
+	}
+	const kept = /* @__PURE__ */ new Set();
+	for (const groupItems of byGroup.values()) for (const item of collapseSeparatorRun(groupItems)) kept.add(item);
+	return items.filter((item) => kept.has(item));
+};
+var normalizeSeparatorsIgnoringOverflow = (items) => {
+	const overflowTrigger = items.find((item) => item.type === "overflow");
+	const withoutOverflow = items.filter((item) => item !== overflowTrigger);
+	const kept = new Set(normalizeSeparators(withoutOverflow));
+	return items.filter((item) => item === overflowTrigger || kept.has(item));
+};
 /**
 * Set or clear the link item's `href` without disturbing the rest of its
 * attributes. The static configuration (`ariaLabel`, and anything added later)
@@ -43602,7 +43631,7 @@ function hasAiModule(superToolbar) {
 function aiModuleConfig(superToolbar) {
 	return superToolbar.config?.superdoc?.config?.modules?.ai ?? superToolbar.superdoc?.config?.modules?.ai ?? {};
 }
-var makeDefaultItems = ({ superToolbar, toolbarIcons, toolbarTexts, toolbarFonts, hideButtons, availableWidth, role, isDev = false, configuredItemNames, excludedItemNames, additionalItems = [] } = {}) => {
+var makeDefaultItems = ({ superToolbar, toolbarIcons, toolbarTexts, toolbarFonts, hideButtons, availableWidth, role, isDev = false, configuredItemNames, configuredItemOrder, excludedItemNames, additionalItems = [] } = {}) => {
 	const bold = useToolbarItem({
 		type: "button",
 		name: "bold",
@@ -44712,9 +44741,15 @@ var makeDefaultItems = ({ superToolbar, toolbarIcons, toolbarTexts, toolbarFonts
 	}
 	if (configuredItemNames) toolbarItems = toolbarItems.filter((item) => item.name.value === "overflow" || item.isCustomToolbarItem || configuredItemNames.has(item.name.value));
 	if (excludedItemNames?.size) toolbarItems = toolbarItems.filter((item) => !excludedItemNames.has(item.name.value));
+	toolbarItems = normalizeSeparatorsIgnoringOverflow(toolbarItems);
 	const isStickyItem = (item) => stickyItemNames.includes(item.name.value);
 	const overflowTrigger = toolbarItems.find((item) => item.name.value === "overflow");
 	const layoutItems = toolbarItems.filter((item) => item !== overflowTrigger);
+	if (configuredItemOrder) {
+		const orderIndex = new Map(configuredItemOrder.map((name, index) => [name, index]));
+		const rank = (item) => orderIndex.get(item.name.value) ?? Number.MAX_SAFE_INTEGER;
+		layoutItems.sort((a, b) => rank(a) - rank(b));
+	}
 	const partitionItems = (reserveOverflowTrigger) => {
 		const overflowItems = [];
 		const visibleItems = [];
@@ -44756,6 +44791,7 @@ var makeDefaultItems = ({ superToolbar, toolbarIcons, toolbarTexts, toolbarFonts
 		if (insertAt === -1) visibleItems.push(overflowTrigger);
 		else visibleItems.splice(insertAt, 0, overflowTrigger);
 	}
+	visibleItems = normalizeSeparators(visibleItems);
 	return {
 		defaultItems: visibleItems,
 		overflowItems: overflowItems.filter((item) => item.type !== "separator")
@@ -44976,6 +45012,7 @@ var BuiltInToolbar = class extends require_eventemitter3.import_eventemitter3.de
 		responsiveToContainer: false,
 		mode: "docx",
 		excludeItems: [],
+		toolbarButtonsExclude: [],
 		groups: null,
 		customButtons: [],
 		showFormattingMarksButton: false,
@@ -45141,7 +45178,7 @@ var BuiltInToolbar = class extends require_eventemitter3.import_eventemitter3.de
 		const selectedCustomOptions = new Map(this.#getAllToolbarItems().filter((item) => item.isCustomToolbarItem && item.type === "dropdown").map((item) => [item.name.value, item.selectedValue.value]));
 		const hasExplicitGroupComposition = this.config.groups && !Array.isArray(this.config.groups) && Object.keys(this.config.groups).length > 0;
 		const configuredItemNames = hasExplicitGroupComposition ? new Set(Object.values(this.config.groups).flatMap((items) => items)) : null;
-		const excludedItemNames = new Set(this.config.excludeItems);
+		const excludedItemNames = /* @__PURE__ */ new Set([...this.config.excludeItems ?? [], ...this.config.toolbarButtonsExclude ?? []]);
 		const customItems = this.config.customButtons || [];
 		const takenNames = new Set(RESERVED_TOOLBAR_ITEM_NAMES);
 		const customToolbarItems = customItems.map((item, index) => {
@@ -45162,6 +45199,12 @@ var BuiltInToolbar = class extends require_eventemitter3.import_eventemitter3.de
 		}).filter(Boolean);
 		const configuredGroups = hasExplicitGroupComposition ? new Set(Object.keys(this.config.groups)) : null;
 		const layoutCustomItems = configuredGroups ? customToolbarItems.filter((item) => configuredGroups.has(item.group?.value || "center")) : customToolbarItems;
+		let allConfigItems = null;
+		if (hasExplicitGroupComposition) {
+			const groupedItems = Object.values(this.config.groups).flatMap((item) => item);
+			const groupedCustomItems = customToolbarItems.filter((item) => configuredGroups.has(item.group?.value || "center")).map((item) => item.name.value);
+			allConfigItems = [.../* @__PURE__ */ new Set([...groupedItems, ...groupedCustomItems])];
+		}
 		const { defaultItems, overflowItems } = makeDefaultItems({
 			superToolbar: this,
 			toolbarIcons: this.config.icons,
@@ -45172,18 +45215,29 @@ var BuiltInToolbar = class extends require_eventemitter3.import_eventemitter3.de
 			role: this.role,
 			isDev: this.isDev,
 			configuredItemNames,
+			configuredItemOrder: allConfigItems,
 			excludedItemNames,
 			additionalItems: layoutCustomItems
 		});
-		let allConfigItems = [...defaultItems.map((item) => item.name.value), ...overflowItems.map((item) => item.name.value)];
-		if (hasExplicitGroupComposition) {
-			const groupedItems = Object.values(this.config.groups).flatMap((item) => item);
-			const groupedCustomItems = customToolbarItems.filter((item) => configuredGroups.has(item.group?.value || "center")).map((item) => item.name.value);
-			allConfigItems = [.../* @__PURE__ */ new Set([...groupedItems, ...groupedCustomItems])];
-		}
+		if (!hasExplicitGroupComposition) allConfigItems = [...defaultItems.map((item) => item.name.value), ...overflowItems.map((item) => item.name.value)];
 		const configuredOverflowItems = overflowItems.filter((item) => allConfigItems.includes(item.name.value) && !excludedItemNames.has(item.name.value));
 		const visibleItemNames = configuredOverflowItems.length ? [...allConfigItems, "overflow"] : allConfigItems;
 		const filteredItems = defaultItems.filter((item) => visibleItemNames.includes(item.name.value)).filter((item) => !excludedItemNames.has(item.name.value));
+		if (hasExplicitGroupComposition) {
+			const orderIndex = new Map(allConfigItems.map((name, index) => [name, index]));
+			const rank = (item) => orderIndex.get(item.name.value) ?? Number.MAX_SAFE_INTEGER;
+			const overflowTrigger = filteredItems.find((item) => item.name.value === "overflow");
+			const originalIndex = new Map(filteredItems.map((item, index) => [item, index]));
+			const reordered = filteredItems.filter((item) => item !== overflowTrigger);
+			reordered.sort((a, b) => rank(a) - rank(b));
+			if (overflowTrigger) {
+				const triggerOriginalIndex = originalIndex.get(overflowTrigger);
+				const insertAt = reordered.findIndex((item) => originalIndex.get(item) > triggerOriginalIndex);
+				insertAt === -1 ? reordered.push(overflowTrigger) : reordered.splice(insertAt, 0, overflowTrigger);
+			}
+			filteredItems.splice(0, filteredItems.length, ...reordered);
+			configuredOverflowItems.sort((a, b) => rank(a) - rank(b));
+		}
 		if (hasExplicitGroupComposition) {
 			for (const [group, names] of Object.entries(this.config.groups)) for (const item of filteredItems) if (names.includes(item.name.value)) item.group.value = group;
 		}
@@ -46283,7 +46337,7 @@ var SuperDoc = class extends require_eventemitter3.import_eventemitter3.default
 		this.config.colors = shuffleArray(this.config.colors);
 		this.userColorMap = /* @__PURE__ */ new Map();
 		this.colorIndex = 0;
-		this.version = "2.20.0";
+		this.version = "2.20.1-next.2";
 		this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
 		this.superdocId = config.superdocId || require_uuid.v4();
 		this.colors = this.config.colors ?? [];

package/dist/superdoc.es.js

@@ -1,6 +1,6 @@
 import { i as __toESM$2 } from "./chunks/rolldown-runtime-0pSA04fp.es.js";
 import { t as blank_default } from "./chunks/blank-docx-DzQccOlW.es.js";
-import { c as createImageFilePicker, d as DOM_CLASS_NAMES, f as closeInteractionHistory, i as registerFirstPartyCommandMutation, l as resolveImageSrc, m as recordInteraction, n as executeFirstPartyCommandAsync, o as applyV2CommentInvalidationFromMutation, p as createInteractionHistory, r as readFirstPartyPageNumbers, s as getV2TrackedChangeMutationImpact, t as createSuperDocUI } from "./chunks/create-super-doc-ui-D5VrP4Dx.es.js";
+import { c as createImageFilePicker, d as DOM_CLASS_NAMES, f as closeInteractionHistory, i as registerFirstPartyCommandMutation, l as resolveImageSrc, m as recordInteraction, n as executeFirstPartyCommandAsync, o as applyV2CommentInvalidationFromMutation, p as createInteractionHistory, r as readFirstPartyPageNumbers, s as getV2TrackedChangeMutationImpact, t as createSuperDocUI } from "./chunks/create-super-doc-ui-B4_V1haj.es.js";
 import { t as import_eventemitter3 } from "./chunks/eventemitter3-DEIiXiH2.es.js";
 import { t as v4 } from "./chunks/uuid-H0Xcmmhy.es.js";
 import { $ as watch$1, A as onActivated, B as resolveDirective, C as isRef$1, D as normalizeClass, E as nextTick, F as openBlock, G as toRef, H as shallowRef$1, I as reactive, J as useAttrs, K as toRefs, L as ref, M as onDeactivated, N as onMounted, O as normalizeProps, P as onScopeDispose$1, Q as vModelText, R as renderList, S as isReactive$1, T as mergeProps, U as toDisplayString, V as resolveDynamicComponent, W as toRaw$2, X as vModelCheckbox, Y as useSlots, Z as vModelSelect, _ as getCurrentInstance, a as computed$1, b as hasInjectionContext, c as createCommentVNode, d as createStaticVNode, et as withCtx, f as createTextVNode, g as effectScope, h as defineComponent, i as Transition, j as onBeforeUnmount, k as normalizeStyle, l as createElementBlock, m as defineAsyncComponent, n as Fragment, nt as withKeys, o as createApp, p as createVNode, q as unref, r as Teleport, rt as withModifiers, s as createBlock, t as _plugin_vue_export_helper_default, tt as withDirectives, u as createElementVNode, v as getCurrentScope, w as markRaw, x as inject$1, y as h, z as renderSlot } from "./chunks/_plugin-vue_export-helper-DHiJKCsy.es.js";
@@ -314,7 +314,7 @@ var shuffleArray = (array) => {
 var DEFAULT_ENDPOINT = "https://ingest.superdoc.dev/v1/collect";
 function getSuperdocVersion() {
 	try {
-		return "2.20.0";
+		return "2.20.1-next.2";
 	} catch {
 		return "unknown";
 	}
@@ -22135,6 +22135,7 @@ var SuperDoc_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 			if (!documentId) return;
 			clearV2CommandShortcutBinding(documentId);
 			if (typeof bindEditShortcuts !== "function") return;
+			getSuperDocUI();
 			const openLinkWorkflow = resolveV2LinkWorkflowOpener();
 			const unbind = bindEditShortcuts({
 				commandRoute: {
@@ -24479,7 +24480,7 @@ var SuperDoc_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 			], 38);
 		};
 	}
-}, [["__scopeId", "data-v-7bbf01da"]]);
+}, [["__scopeId", "data-v-e476c448"]]);
 //#endregion
 //#region src/core/create-app.js
 var PINIA_DEVTOOLS_SETUP_EVENT = "devtools-plugin:setup";
@@ -41558,10 +41559,9 @@ var Toolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 		});
 		const showLeftSide = proxy.$toolbar.config?.toolbarGroups?.includes("left");
 		const showRightSide = proxy.$toolbar.config?.toolbarGroups?.includes("right");
-		const excludeButtonsList = proxy.$toolbar.config?.toolbarButtonsExclude || [];
 		const getFilteredItems = (position) => {
 			toolbarStateVersion.value;
-			return proxy.$toolbar.getToolbarItemByGroup(position).filter((item) => !excludeButtonsList.includes(item.name.value));
+			return proxy.$toolbar.getToolbarItemByGroup(position);
 		};
 		const updateCompactSideGroups = () => {
 			compactSideGroups.value = proxy.$toolbar.getAvailableWidth() <= RESPONSIVE_BREAKPOINTS.lg;
@@ -41735,7 +41735,7 @@ var Toolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 			], 32);
 		};
 	}
-}, [["__scopeId", "data-v-9418cc7d"]]);
+}, [["__scopeId", "data-v-0d00bc5b"]]);
 //#endregion
 //#region src/internal/toolbar/built-in/font-options.js
 /**
@@ -43477,6 +43477,35 @@ var getToolbarItemWidth = (item, controlSizes) => {
 	if (item.type === "separator") return controlSizes.get("separator");
 	return controlSizes.get(item.name.value) || controlSizes.get("default");
 };
+var collapseSeparatorRun = (items) => {
+	const result = [];
+	for (const item of items) {
+		if (item.type === "separator") {
+			const previous = result[result.length - 1];
+			if (!previous || previous.type === "separator") continue;
+		}
+		result.push(item);
+	}
+	while (result.length && result[result.length - 1].type === "separator") result.pop();
+	return result;
+};
+var normalizeSeparators = (items) => {
+	const byGroup = /* @__PURE__ */ new Map();
+	for (const item of items) {
+		const group = item.group?.value || "center";
+		if (!byGroup.has(group)) byGroup.set(group, []);
+		byGroup.get(group).push(item);
+	}
+	const kept = /* @__PURE__ */ new Set();
+	for (const groupItems of byGroup.values()) for (const item of collapseSeparatorRun(groupItems)) kept.add(item);
+	return items.filter((item) => kept.has(item));
+};
+var normalizeSeparatorsIgnoringOverflow = (items) => {
+	const overflowTrigger = items.find((item) => item.type === "overflow");
+	const withoutOverflow = items.filter((item) => item !== overflowTrigger);
+	const kept = new Set(normalizeSeparators(withoutOverflow));
+	return items.filter((item) => item === overflowTrigger || kept.has(item));
+};
 /**
 * Set or clear the link item's `href` without disturbing the rest of its
 * attributes. The static configuration (`ariaLabel`, and anything added later)
@@ -43531,7 +43560,7 @@ function hasAiModule(superToolbar) {
 function aiModuleConfig(superToolbar) {
 	return superToolbar.config?.superdoc?.config?.modules?.ai ?? superToolbar.superdoc?.config?.modules?.ai ?? {};
 }
-var makeDefaultItems = ({ superToolbar, toolbarIcons, toolbarTexts, toolbarFonts, hideButtons, availableWidth, role, isDev = false, configuredItemNames, excludedItemNames, additionalItems = [] } = {}) => {
+var makeDefaultItems = ({ superToolbar, toolbarIcons, toolbarTexts, toolbarFonts, hideButtons, availableWidth, role, isDev = false, configuredItemNames, configuredItemOrder, excludedItemNames, additionalItems = [] } = {}) => {
 	const bold = useToolbarItem({
 		type: "button",
 		name: "bold",
@@ -44641,9 +44670,15 @@ var makeDefaultItems = ({ superToolbar, toolbarIcons, toolbarTexts, toolbarFonts
 	}
 	if (configuredItemNames) toolbarItems = toolbarItems.filter((item) => item.name.value === "overflow" || item.isCustomToolbarItem || configuredItemNames.has(item.name.value));
 	if (excludedItemNames?.size) toolbarItems = toolbarItems.filter((item) => !excludedItemNames.has(item.name.value));
+	toolbarItems = normalizeSeparatorsIgnoringOverflow(toolbarItems);
 	const isStickyItem = (item) => stickyItemNames.includes(item.name.value);
 	const overflowTrigger = toolbarItems.find((item) => item.name.value === "overflow");
 	const layoutItems = toolbarItems.filter((item) => item !== overflowTrigger);
+	if (configuredItemOrder) {
+		const orderIndex = new Map(configuredItemOrder.map((name, index) => [name, index]));
+		const rank = (item) => orderIndex.get(item.name.value) ?? Number.MAX_SAFE_INTEGER;
+		layoutItems.sort((a, b) => rank(a) - rank(b));
+	}
 	const partitionItems = (reserveOverflowTrigger) => {
 		const overflowItems = [];
 		const visibleItems = [];
@@ -44685,6 +44720,7 @@ var makeDefaultItems = ({ superToolbar, toolbarIcons, toolbarTexts, toolbarFonts
 		if (insertAt === -1) visibleItems.push(overflowTrigger);
 		else visibleItems.splice(insertAt, 0, overflowTrigger);
 	}
+	visibleItems = normalizeSeparators(visibleItems);
 	return {
 		defaultItems: visibleItems,
 		overflowItems: overflowItems.filter((item) => item.type !== "separator")
@@ -44905,6 +44941,7 @@ var BuiltInToolbar = class extends import_eventemitter3.default {
 		responsiveToContainer: false,
 		mode: "docx",
 		excludeItems: [],
+		toolbarButtonsExclude: [],
 		groups: null,
 		customButtons: [],
 		showFormattingMarksButton: false,
@@ -45070,7 +45107,7 @@ var BuiltInToolbar = class extends import_eventemitter3.default {
 		const selectedCustomOptions = new Map(this.#getAllToolbarItems().filter((item) => item.isCustomToolbarItem && item.type === "dropdown").map((item) => [item.name.value, item.selectedValue.value]));
 		const hasExplicitGroupComposition = this.config.groups && !Array.isArray(this.config.groups) && Object.keys(this.config.groups).length > 0;
 		const configuredItemNames = hasExplicitGroupComposition ? new Set(Object.values(this.config.groups).flatMap((items) => items)) : null;
-		const excludedItemNames = new Set(this.config.excludeItems);
+		const excludedItemNames = /* @__PURE__ */ new Set([...this.config.excludeItems ?? [], ...this.config.toolbarButtonsExclude ?? []]);
 		const customItems = this.config.customButtons || [];
 		const takenNames = new Set(RESERVED_TOOLBAR_ITEM_NAMES);
 		const customToolbarItems = customItems.map((item, index) => {
@@ -45091,6 +45128,12 @@ var BuiltInToolbar = class extends import_eventemitter3.default {
 		}).filter(Boolean);
 		const configuredGroups = hasExplicitGroupComposition ? new Set(Object.keys(this.config.groups)) : null;
 		const layoutCustomItems = configuredGroups ? customToolbarItems.filter((item) => configuredGroups.has(item.group?.value || "center")) : customToolbarItems;
+		let allConfigItems = null;
+		if (hasExplicitGroupComposition) {
+			const groupedItems = Object.values(this.config.groups).flatMap((item) => item);
+			const groupedCustomItems = customToolbarItems.filter((item) => configuredGroups.has(item.group?.value || "center")).map((item) => item.name.value);
+			allConfigItems = [.../* @__PURE__ */ new Set([...groupedItems, ...groupedCustomItems])];
+		}
 		const { defaultItems, overflowItems } = makeDefaultItems({
 			superToolbar: this,
 			toolbarIcons: this.config.icons,
@@ -45101,18 +45144,29 @@ var BuiltInToolbar = class extends import_eventemitter3.default {
 			role: this.role,
 			isDev: this.isDev,
 			configuredItemNames,
+			configuredItemOrder: allConfigItems,
 			excludedItemNames,
 			additionalItems: layoutCustomItems
 		});
-		let allConfigItems = [...defaultItems.map((item) => item.name.value), ...overflowItems.map((item) => item.name.value)];
-		if (hasExplicitGroupComposition) {
-			const groupedItems = Object.values(this.config.groups).flatMap((item) => item);
-			const groupedCustomItems = customToolbarItems.filter((item) => configuredGroups.has(item.group?.value || "center")).map((item) => item.name.value);
-			allConfigItems = [.../* @__PURE__ */ new Set([...groupedItems, ...groupedCustomItems])];
-		}
+		if (!hasExplicitGroupComposition) allConfigItems = [...defaultItems.map((item) => item.name.value), ...overflowItems.map((item) => item.name.value)];
 		const configuredOverflowItems = overflowItems.filter((item) => allConfigItems.includes(item.name.value) && !excludedItemNames.has(item.name.value));
 		const visibleItemNames = configuredOverflowItems.length ? [...allConfigItems, "overflow"] : allConfigItems;
 		const filteredItems = defaultItems.filter((item) => visibleItemNames.includes(item.name.value)).filter((item) => !excludedItemNames.has(item.name.value));
+		if (hasExplicitGroupComposition) {
+			const orderIndex = new Map(allConfigItems.map((name, index) => [name, index]));
+			const rank = (item) => orderIndex.get(item.name.value) ?? Number.MAX_SAFE_INTEGER;
+			const overflowTrigger = filteredItems.find((item) => item.name.value === "overflow");
+			const originalIndex = new Map(filteredItems.map((item, index) => [item, index]));
+			const reordered = filteredItems.filter((item) => item !== overflowTrigger);
+			reordered.sort((a, b) => rank(a) - rank(b));
+			if (overflowTrigger) {
+				const triggerOriginalIndex = originalIndex.get(overflowTrigger);
+				const insertAt = reordered.findIndex((item) => originalIndex.get(item) > triggerOriginalIndex);
+				insertAt === -1 ? reordered.push(overflowTrigger) : reordered.splice(insertAt, 0, overflowTrigger);
+			}
+			filteredItems.splice(0, filteredItems.length, ...reordered);
+			configuredOverflowItems.sort((a, b) => rank(a) - rank(b));
+		}
 		if (hasExplicitGroupComposition) {
 			for (const [group, names] of Object.entries(this.config.groups)) for (const item of filteredItems) if (names.includes(item.name.value)) item.group.value = group;
 		}
@@ -46212,7 +46266,7 @@ var SuperDoc = class extends import_eventemitter3.default {
 		this.config.colors = shuffleArray(this.config.colors);
 		this.userColorMap = /* @__PURE__ */ new Map();
 		this.colorIndex = 0;
-		this.version = "2.20.0";
+		this.version = "2.20.1-next.2";
 		this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
 		this.superdocId = config.superdocId || v4();
 		this.colors = this.config.colors ?? [];