@univerjs/ui 0.2.10 → 0.2.12

package/lib/es/index.js

@@ -6,16 +6,16 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-import { toDisposable, IUniverInstanceService, DocumentFlavor, useDependency, LocaleService, ColorKit, CommandType, DEFAULT_STYLES, Disposable, EDITOR_ACTIVATED, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, FOCUSING_EDITOR_INPUT_FORMULA, UniverInstanceType, DEFAULT_EMPTY_DOCUMENT_VALUE, VerticalAlign, HorizontalAlign, Inject, createIdentifier, IContextService, Workbook, DocumentDataModel, SlideDataModel, remove, FOCUSING_UNIVER_EDITOR, OnLifecycle, LifecycleStages, Optional, ICommandService, IUndoRedoService, UndoCommand, RedoCommand, Injector, runOnLifecycle, Tools, isRealNum, useInjector, ThemeService, connectInjector, LifecycleService, IConfigService, isInternalEditorID, ILogService, ErrorService, Plugin, mergeOverrideWithDependencies, ILocalStorageService, DependentOn, makeArray, useObservable as useObservable$2, BaselineOffset, getBorderStyleType, BorderStyleTypes, debounce } from "@univerjs/core";
-import { Observable, isObservable, Subject, fromEvent, switchMap, BehaviorSubject, throttleTime, animationFrameScheduler, filter, debounceTime, map as map$1, startWith, combineLatest, distinctUntilChanged } from "rxjs";
+import { toDisposable, IUniverInstanceService, DocumentFlavor, useDependency, LocaleService, ColorKit, CommandType, DEFAULT_STYLES, Disposable, EDITOR_ACTIVATED, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, FOCUSING_EDITOR_INPUT_FORMULA, UniverInstanceType, DEFAULT_EMPTY_DOCUMENT_VALUE, VerticalAlign, HorizontalAlign, Inject, createIdentifier, IContextService, Workbook, DocumentDataModel, SlideDataModel, remove, FOCUSING_UNIVER_EDITOR, OnLifecycle, LifecycleStages, Optional, ICommandService, UndoCommand, RedoCommand, runOnLifecycle, Tools, Injector, IConfigService, isRealNum, useInjector, ILogService, ThemeService, IUndoRedoService, connectInjector, LifecycleService, isInternalEditorID, ErrorService, Plugin, mergeOverrideWithDependencies, ILocalStorageService, DependentOn, useObservable as useObservable$2, BaselineOffset, getBorderStyleType, BorderStyleTypes, debounce } from "@univerjs/core";
+import { Observable, isObservable, Subject, fromEvent, BehaviorSubject, throttleTime, animationFrameScheduler, filter, debounceTime, map, startWith, switchMap, combineLatest, distinctUntilChanged } from "rxjs";
 import * as React from "react";
-import React__default, { forwardRef, useRef, createElement, cloneElement, useEffect, useMemo, useState, useCallback, memo, useContext, version as version$1, isValidElement, useLayoutEffect } from "react";
+import React__default, { forwardRef, useRef, createElement, cloneElement, useEffect, useMemo, useState, useCallback, memo, createContext, useContext, version as version$1, isValidElement, useLayoutEffect } from "react";
 import { IRenderManagerService, ITextSelectionRenderManager, UniverRenderEnginePlugin, ptToPx } from "@univerjs/engine-render";
 import { operatorToken, isReferenceStrings, LexerTreeBuilder, serializeRange, serializeRangeWithSheet, serializeRangeWithSpreadsheet, isReferenceStringWithEffectiveColumn, getRangeWithRefsString } from "@univerjs/engine-formula";
-import { map } from "rxjs/operators";
 import ReactDOM$1, { createPortal } from "react-dom";
 import { InputNumber, resizeObserverCtor, RectPopup, Menu as Menu$1, MenuItemGroup, MenuItem as MenuItem$1, SubMenu, Popup, Tooltip, Dropdown, defaultTheme, themeInstance, ConfigProvider, ConfigContext, Confirm, Dialog, Message, MessageType, Button, Input } from "@univerjs/design";
 import clsx$1, { clsx as clsx$2 } from "clsx";
+import { map as map$1 } from "rxjs/operators";
 import { useObservable as useObservable$1 } from "@univerjs/ui";
 var __assign = function() {
   return __assign = Object.assign || function(t2) {
@@ -46,15 +46,15 @@ function replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend) {
   var attrs = __assign({}, node.attrs);
   extend != null && extend.colorChannel1 && attrs.fill === "colorChannel1" && (attrs.fill = extend.colorChannel1);
   var defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a18) {
-    var key = _a18[0], value = _a18[1];
+  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a19) {
+    var key = _a19[0], value = _a19[1];
     typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
   })), attrs;
 }
 __name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
 function replaceRuntimeIdsInDefs(node, runtimeProps) {
-  var _a18, defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a18 = node.children) === null || _a18 === void 0) && _a18.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
+  var _a19, defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a19 = node.children) === null || _a19 === void 0) && _a19.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
     return typeof child.attrs.id == "string" && defIds && defIds.indexOf(child.attrs.id) > -1 ? __assign(__assign({}, child), { attrs: __assign(__assign({}, child.attrs), { id: child.attrs.id + runtimeProps.idSuffix }) }) : child;
   }) }) : node;
 }
@@ -1261,9 +1261,9 @@ const uiPluginSheetsFontFamily = "univer-ui-plugin-sheets-font-family", uiPlugin
   }, [value]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$g.uiPluginSheetsFontFamily, style: { fontFamily: value }, children: viewValue });
 }, "FontFamily"), FontFamilyItem = /* @__PURE__ */ __name((props) => {
-  var _a18;
+  var _a19;
   const { value } = props, localeService = useDependency(LocaleService);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$g.uiPluginSheetsFontFamilyItem, style: { fontFamily: value }, children: localeService.t(`fontFamily.${((_a18 = `${value}`) != null ? _a18 : "").replace(/\s/g, "")}`) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$g.uiPluginSheetsFontFamilyItem, style: { fontFamily: value }, children: localeService.t(`fontFamily.${((_a19 = `${value}`) != null ? _a19 : "").replace(/\s/g, "")}`) });
 }, "FontFamilyItem"), FONT_FAMILY_LIST = [
   {
     value: "Arial"
@@ -1555,15 +1555,82 @@ const useVirtualList = /* @__PURE__ */ __name((list, options) => {
   preconditions: /* @__PURE__ */ __name(() => !1, "preconditions"),
   handler: /* @__PURE__ */ __name(async () => !0, "handler")
 };
+var KeyCode$1 = /* @__PURE__ */ ((KeyCode2) => (KeyCode2[KeyCode2.UNKNOWN = 0] = "UNKNOWN", KeyCode2[KeyCode2.BACKSPACE = 8] = "BACKSPACE", KeyCode2[KeyCode2.TAB = 9] = "TAB", KeyCode2[KeyCode2.ENTER = 13] = "ENTER", KeyCode2[KeyCode2.SHIFT = 16] = "SHIFT", KeyCode2[KeyCode2.CTRL = 17] = "CTRL", KeyCode2[KeyCode2.ESC = 27] = "ESC", KeyCode2[KeyCode2.SPACE = 32] = "SPACE", KeyCode2[KeyCode2.ARROW_LEFT = 37] = "ARROW_LEFT", KeyCode2[KeyCode2.ARROW_UP = 38] = "ARROW_UP", KeyCode2[KeyCode2.ARROW_RIGHT = 39] = "ARROW_RIGHT", KeyCode2[KeyCode2.ARROW_DOWN = 40] = "ARROW_DOWN", KeyCode2[KeyCode2.INSERT = 45] = "INSERT", KeyCode2[KeyCode2.DELETE = 46] = "DELETE", KeyCode2[KeyCode2.Digit0 = 48] = "Digit0", KeyCode2[KeyCode2.Digit1 = 49] = "Digit1", KeyCode2[KeyCode2.Digit2 = 50] = "Digit2", KeyCode2[KeyCode2.Digit3 = 51] = "Digit3", KeyCode2[KeyCode2.Digit4 = 52] = "Digit4", KeyCode2[KeyCode2.Digit5 = 53] = "Digit5", KeyCode2[KeyCode2.Digit6 = 54] = "Digit6", KeyCode2[KeyCode2.Digit7 = 55] = "Digit7", KeyCode2[KeyCode2.Digit8 = 56] = "Digit8", KeyCode2[KeyCode2.Digit9 = 57] = "Digit9", KeyCode2[KeyCode2.A = 65] = "A", KeyCode2[KeyCode2.B = 66] = "B", KeyCode2[KeyCode2.C = 67] = "C", KeyCode2[KeyCode2.D = 68] = "D", KeyCode2[KeyCode2.E = 69] = "E", KeyCode2[KeyCode2.F = 70] = "F", KeyCode2[KeyCode2.G = 71] = "G", KeyCode2[KeyCode2.H = 72] = "H", KeyCode2[KeyCode2.I = 73] = "I", KeyCode2[KeyCode2.J = 74] = "J", KeyCode2[KeyCode2.K = 75] = "K", KeyCode2[KeyCode2.L = 76] = "L", KeyCode2[KeyCode2.M = 77] = "M", KeyCode2[KeyCode2.N = 78] = "N", KeyCode2[KeyCode2.O = 79] = "O", KeyCode2[KeyCode2.P = 80] = "P", KeyCode2[KeyCode2.Q = 81] = "Q", KeyCode2[KeyCode2.R = 82] = "R", KeyCode2[KeyCode2.S = 83] = "S", KeyCode2[KeyCode2.T = 84] = "T", KeyCode2[KeyCode2.U = 85] = "U", KeyCode2[KeyCode2.V = 86] = "V", KeyCode2[KeyCode2.W = 87] = "W", KeyCode2[KeyCode2.X = 88] = "X", KeyCode2[KeyCode2.Y = 89] = "Y", KeyCode2[KeyCode2.Z = 90] = "Z", KeyCode2[KeyCode2.F1 = 112] = "F1", KeyCode2[KeyCode2.F2 = 113] = "F2", KeyCode2[KeyCode2.F3 = 114] = "F3", KeyCode2[KeyCode2.F4 = 115] = "F4", KeyCode2[KeyCode2.F5 = 116] = "F5", KeyCode2[KeyCode2.F6 = 117] = "F6", KeyCode2[KeyCode2.F7 = 118] = "F7", KeyCode2[KeyCode2.F8 = 119] = "F8", KeyCode2[KeyCode2.F9 = 120] = "F9", KeyCode2[KeyCode2.F10 = 121] = "F10", KeyCode2[KeyCode2.F11 = 122] = "F11", KeyCode2[KeyCode2.F12 = 123] = "F12", KeyCode2[KeyCode2.NUM_LOCK = 144] = "NUM_LOCK", KeyCode2[KeyCode2.SCROLL_LOCK = 145] = "SCROLL_LOCK", KeyCode2[KeyCode2.EQUAL = 187] = "EQUAL", KeyCode2[KeyCode2.COMMA = 188] = "COMMA", KeyCode2[KeyCode2.MINUS = 189] = "MINUS", KeyCode2[KeyCode2.PERIOD = 190] = "PERIOD", KeyCode2[KeyCode2.BACK_SLASH = 220] = "BACK_SLASH", KeyCode2))(KeyCode$1 || {});
+const KeyCodeToChar = {
+  8: "Backspace",
+  9: "Tab",
+  13: "Enter",
+  46: "Del",
+  27: "Esc",
+  32: "Space",
+  37: "←",
+  39: "→",
+  38: "↑",
+  40: "↓",
+  48: "0",
+  49: "1",
+  50: "2",
+  51: "3",
+  52: "4",
+  53: "5",
+  54: "6",
+  55: "7",
+  56: "8",
+  57: "9",
+  65: "A",
+  66: "B",
+  67: "C",
+  68: "D",
+  69: "E",
+  70: "F",
+  71: "G",
+  72: "H",
+  73: "I",
+  74: "J",
+  75: "K",
+  76: "L",
+  77: "M",
+  78: "N",
+  79: "O",
+  80: "P",
+  81: "Q",
+  82: "R",
+  83: "S",
+  84: "T",
+  85: "U",
+  86: "V",
+  87: "W",
+  88: "X",
+  89: "Y",
+  90: "Z",
+  112: "F1",
+  113: "F2",
+  114: "F3",
+  115: "F4",
+  116: "F5",
+  117: "F6",
+  118: "F7",
+  119: "F8",
+  120: "F9",
+  121: "F10",
+  122: "F11",
+  123: "F12",
+  189: "-",
+  187: "=",
+  190: ".",
+  188: ",",
+  220: "\\"
+};
+var MetaKeys = /* @__PURE__ */ ((MetaKeys2) => (MetaKeys2[MetaKeys2.SHIFT = 1024] = "SHIFT", MetaKeys2[MetaKeys2.ALT = 2048] = "ALT", MetaKeys2[MetaKeys2.CTRL_COMMAND = 4096] = "CTRL_COMMAND", MetaKeys2[MetaKeys2.MAC_CTRL = 8192] = "MAC_CTRL", MetaKeys2))(MetaKeys || {});
 function fromGlobalEvent(type, listener, options) {
   return window.addEventListener(type, listener, options), toDisposable(() => window.removeEventListener(type, listener, options));
 }
 __name(fromGlobalEvent, "fromGlobalEvent");
-var __defProp$h = Object.defineProperty, __getOwnPropDesc$h = Object.getOwnPropertyDescriptor, __decorateClass$h = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$i = Object.defineProperty, __getOwnPropDesc$i = Object.getOwnPropertyDescriptor, __decorateClass$i = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$h(target, key, result), result;
-}, "__decorateClass$h"), __decorateParam$h = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$h");
+  return kind && result && __defProp$i(target, key, result), result;
+}, "__decorateClass$i"), __decorateParam$i = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$i");
 const _Editor = class _Editor {
   constructor(_param) {
     __publicField(this, "_focus", !1);
@@ -1640,8 +1707,8 @@ const _Editor = class _Editor {
     return this._param.isFormulaEditor === !0;
   }
   getValue() {
-    var _a18;
-    return (((_a18 = this._param.documentDataModel.getBody()) == null ? void 0 : _a18.dataStream) || "").replace(/\r\n/g, "").replace(/\n/g, "").replace(/\n/g, "");
+    var _a19;
+    return (((_a19 = this._param.documentDataModel.getBody()) == null ? void 0 : _a19.dataStream) || "").replace(/\r\n/g, "").replace(/\n/g, "").replace(/\n/g, "");
   }
   getBody() {
     return this._param.documentDataModel.getBody();
@@ -1653,8 +1720,8 @@ const _Editor = class _Editor {
     };
   }
   verticalAlign() {
-    var _a18, _b2;
-    const documentDataModel = (_a18 = this._param) == null ? void 0 : _a18.documentDataModel;
+    var _a19, _b2;
+    const documentDataModel = (_a19 = this._param) == null ? void 0 : _a19.documentDataModel;
     if (documentDataModel == null)
       return;
     const { width, height } = this._param.editorDom.getBoundingClientRect();
@@ -1672,12 +1739,12 @@ const _Editor = class _Editor {
     }), documentDataModel.updateDocumentDataPageSize(void 0, void 0);
   }
   updateCanvasStyle() {
-    var _a18;
+    var _a19;
     const documentDataModel = this._param.documentDataModel;
     if (documentDataModel == null)
       return;
     const documentStyle = {};
-    (_a18 = this._param.canvasStyle) != null && _a18.fontSize && (documentStyle.textStyle == null && (documentStyle.textStyle = {}), documentStyle.textStyle.fs = this._param.canvasStyle.fontSize), documentDataModel.updateDocumentStyle(documentStyle);
+    (_a19 = this._param.canvasStyle) != null && _a19.fontSize && (documentStyle.textStyle == null && (documentStyle.textStyle = {}), documentStyle.textStyle.fs = this._param.canvasStyle.fontSize), documentDataModel.updateDocumentStyle(documentStyle);
   }
 };
 __name(_Editor, "Editor");
@@ -1764,7 +1831,7 @@ let EditorService = (_b = class extends Disposable {
       editor.setFocus(!1);
     }), this._focusStyle$.next(), this._blur$.next(null);
   }
-  focus(editorUnitId = ((_a18) => (_a18 = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : _a18.getUnitId())()) {
+  focus(editorUnitId = ((_a19) => (_a19 = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : _a19.getUnitId())()) {
     if (editorUnitId == null)
       return;
     const editor = this.getEditor(editorUnitId);
@@ -1821,8 +1888,8 @@ let EditorService = (_b = class extends Disposable {
     editor != null && (editor.verticalAlign(), this._resize$.next(unitId));
   }
   isVisible(id) {
-    var _a18;
-    return (_a18 = this.getEditor(id)) == null ? void 0 : _a18.isVisible();
+    var _a19;
+    return (_a19 = this.getEditor(id)) == null ? void 0 : _a19.isVisible();
   }
   setOperationSheetUnitId(unitId) {
     this._currentSheetUnitId = unitId;
@@ -1837,8 +1904,8 @@ let EditorService = (_b = class extends Disposable {
     return this._currentSheetSubUnitId;
   }
   register(config, container) {
-    var _a18, _b2, _c, _d, _e;
-    const { initialSnapshot, editorUnitId, canvasStyle = {} } = config, documentDataModel = (_a18 = this._univerInstanceService.getUnit(editorUnitId, UniverInstanceType.UNIVER_DOC)) != null ? _a18 : this._univerInstanceService.createUnit(
+    var _a19, _b2, _c, _d, _e;
+    const { initialSnapshot, editorUnitId, canvasStyle = {} } = config, documentDataModel = (_a19 = this._univerInstanceService.getUnit(editorUnitId, UniverInstanceType.UNIVER_DOC)) != null ? _a19 : this._univerInstanceService.createUnit(
       UniverInstanceType.UNIVER_DOC,
       initialSnapshot || this._getBlank(editorUnitId),
       { makeCurrent: !1 }
@@ -1915,18 +1982,18 @@ let EditorService = (_b = class extends Disposable {
     };
   }
 }, __name(_b, "EditorService"), _b);
-EditorService = __decorateClass$h([
-  __decorateParam$h(0, IUniverInstanceService),
-  __decorateParam$h(1, IRenderManagerService),
-  __decorateParam$h(2, Inject(LexerTreeBuilder)),
-  __decorateParam$h(3, IContextService)
+EditorService = __decorateClass$i([
+  __decorateParam$i(0, IUniverInstanceService),
+  __decorateParam$i(1, IRenderManagerService),
+  __decorateParam$i(2, Inject(LexerTreeBuilder)),
+  __decorateParam$i(3, IContextService)
 ], EditorService);
 const IEditorService = createIdentifier("univer.editor.service");
-var __defProp$g = Object.defineProperty, __getOwnPropDesc$g = Object.getOwnPropertyDescriptor, __decorateClass$g = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$h = Object.defineProperty, __getOwnPropDesc$h = Object.getOwnPropertyDescriptor, __decorateClass$h = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$g(target, key, result), result;
-}, "__decorateClass$g"), __decorateParam$g = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$g");
+  return kind && result && __defProp$h(target, key, result), result;
+}, "__decorateClass$h"), __decorateParam$h = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$h");
 const FOCUSING_UNIVER = "FOCUSING_UNIVER", givingBackFocusElements = [
   "univer-app-layout",
   "univer-toolbar-btn",
@@ -2022,15 +2089,15 @@ let DesktopLayoutService = (_a = class extends Disposable {
     focusEditor && focusEditor.isSheetEditor() !== !0 && this._editorService.blur();
   }
 }, __name(_a, "DesktopLayoutService"), _a);
-DesktopLayoutService = __decorateClass$g([
+DesktopLayoutService = __decorateClass$h([
   OnLifecycle(LifecycleStages.Ready, ILayoutService),
-  __decorateParam$g(0, IContextService),
-  __decorateParam$g(1, IUniverInstanceService),
-  __decorateParam$g(2, IEditorService)
+  __decorateParam$h(0, IContextService),
+  __decorateParam$h(1, IUniverInstanceService),
+  __decorateParam$h(2, IEditorService)
 ], DesktopLayoutService);
 function getFocusingUniverEditorStatus() {
-  var _a18;
-  return !!((_a18 = document.activeElement) != null && _a18.classList.contains("univer-editor"));
+  var _a19;
+  return !!((_a19 = document.activeElement) != null && _a19.classList.contains("univer-editor"));
 }
 __name(getFocusingUniverEditorStatus, "getFocusingUniverEditorStatus");
 const IPlatformService = createIdentifier("ui.platform.service"), _PlatformService = class _PlatformService {
@@ -2046,77 +2113,11 @@ const IPlatformService = createIdentifier("ui.platform.service"), _PlatformServi
 };
 __name(_PlatformService, "PlatformService");
 let PlatformService = _PlatformService;
-var KeyCode$1 = /* @__PURE__ */ ((KeyCode2) => (KeyCode2[KeyCode2.UNKNOWN = 0] = "UNKNOWN", KeyCode2[KeyCode2.BACKSPACE = 8] = "BACKSPACE", KeyCode2[KeyCode2.TAB = 9] = "TAB", KeyCode2[KeyCode2.ENTER = 13] = "ENTER", KeyCode2[KeyCode2.SHIFT = 16] = "SHIFT", KeyCode2[KeyCode2.CTRL = 17] = "CTRL", KeyCode2[KeyCode2.ESC = 27] = "ESC", KeyCode2[KeyCode2.SPACE = 32] = "SPACE", KeyCode2[KeyCode2.ARROW_LEFT = 37] = "ARROW_LEFT", KeyCode2[KeyCode2.ARROW_UP = 38] = "ARROW_UP", KeyCode2[KeyCode2.ARROW_RIGHT = 39] = "ARROW_RIGHT", KeyCode2[KeyCode2.ARROW_DOWN = 40] = "ARROW_DOWN", KeyCode2[KeyCode2.INSERT = 45] = "INSERT", KeyCode2[KeyCode2.DELETE = 46] = "DELETE", KeyCode2[KeyCode2.Digit0 = 48] = "Digit0", KeyCode2[KeyCode2.Digit1 = 49] = "Digit1", KeyCode2[KeyCode2.Digit2 = 50] = "Digit2", KeyCode2[KeyCode2.Digit3 = 51] = "Digit3", KeyCode2[KeyCode2.Digit4 = 52] = "Digit4", KeyCode2[KeyCode2.Digit5 = 53] = "Digit5", KeyCode2[KeyCode2.Digit6 = 54] = "Digit6", KeyCode2[KeyCode2.Digit7 = 55] = "Digit7", KeyCode2[KeyCode2.Digit8 = 56] = "Digit8", KeyCode2[KeyCode2.Digit9 = 57] = "Digit9", KeyCode2[KeyCode2.A = 65] = "A", KeyCode2[KeyCode2.B = 66] = "B", KeyCode2[KeyCode2.C = 67] = "C", KeyCode2[KeyCode2.D = 68] = "D", KeyCode2[KeyCode2.E = 69] = "E", KeyCode2[KeyCode2.F = 70] = "F", KeyCode2[KeyCode2.G = 71] = "G", KeyCode2[KeyCode2.H = 72] = "H", KeyCode2[KeyCode2.I = 73] = "I", KeyCode2[KeyCode2.J = 74] = "J", KeyCode2[KeyCode2.K = 75] = "K", KeyCode2[KeyCode2.L = 76] = "L", KeyCode2[KeyCode2.M = 77] = "M", KeyCode2[KeyCode2.N = 78] = "N", KeyCode2[KeyCode2.O = 79] = "O", KeyCode2[KeyCode2.P = 80] = "P", KeyCode2[KeyCode2.Q = 81] = "Q", KeyCode2[KeyCode2.R = 82] = "R", KeyCode2[KeyCode2.S = 83] = "S", KeyCode2[KeyCode2.T = 84] = "T", KeyCode2[KeyCode2.U = 85] = "U", KeyCode2[KeyCode2.V = 86] = "V", KeyCode2[KeyCode2.W = 87] = "W", KeyCode2[KeyCode2.X = 88] = "X", KeyCode2[KeyCode2.Y = 89] = "Y", KeyCode2[KeyCode2.Z = 90] = "Z", KeyCode2[KeyCode2.F1 = 112] = "F1", KeyCode2[KeyCode2.F2 = 113] = "F2", KeyCode2[KeyCode2.F3 = 114] = "F3", KeyCode2[KeyCode2.F4 = 115] = "F4", KeyCode2[KeyCode2.F5 = 116] = "F5", KeyCode2[KeyCode2.F6 = 117] = "F6", KeyCode2[KeyCode2.F7 = 118] = "F7", KeyCode2[KeyCode2.F8 = 119] = "F8", KeyCode2[KeyCode2.F9 = 120] = "F9", KeyCode2[KeyCode2.F10 = 121] = "F10", KeyCode2[KeyCode2.F11 = 122] = "F11", KeyCode2[KeyCode2.F12 = 123] = "F12", KeyCode2[KeyCode2.NUM_LOCK = 144] = "NUM_LOCK", KeyCode2[KeyCode2.SCROLL_LOCK = 145] = "SCROLL_LOCK", KeyCode2[KeyCode2.EQUAL = 187] = "EQUAL", KeyCode2[KeyCode2.COMMA = 188] = "COMMA", KeyCode2[KeyCode2.MINUS = 189] = "MINUS", KeyCode2[KeyCode2.PERIOD = 190] = "PERIOD", KeyCode2[KeyCode2.BACK_SLASH = 220] = "BACK_SLASH", KeyCode2))(KeyCode$1 || {});
-const KeyCodeToChar = {
-  8: "Backspace",
-  9: "Tab",
-  13: "Enter",
-  46: "Del",
-  27: "Esc",
-  32: "Space",
-  37: "←",
-  39: "→",
-  38: "↑",
-  40: "↓",
-  48: "0",
-  49: "1",
-  50: "2",
-  51: "3",
-  52: "4",
-  53: "5",
-  54: "6",
-  55: "7",
-  56: "8",
-  57: "9",
-  65: "A",
-  66: "B",
-  67: "C",
-  68: "D",
-  69: "E",
-  70: "F",
-  71: "G",
-  72: "H",
-  73: "I",
-  74: "J",
-  75: "K",
-  76: "L",
-  77: "M",
-  78: "N",
-  79: "O",
-  80: "P",
-  81: "Q",
-  82: "R",
-  83: "S",
-  84: "T",
-  85: "U",
-  86: "V",
-  87: "W",
-  88: "X",
-  89: "Y",
-  90: "Z",
-  112: "F1",
-  113: "F2",
-  114: "F3",
-  115: "F4",
-  116: "F5",
-  117: "F6",
-  118: "F7",
-  119: "F8",
-  120: "F9",
-  121: "F10",
-  122: "F11",
-  123: "F12",
-  189: "-",
-  187: "=",
-  190: ".",
-  188: ",",
-  220: "\\"
-};
-var MetaKeys = /* @__PURE__ */ ((MetaKeys2) => (MetaKeys2[MetaKeys2.SHIFT = 1024] = "SHIFT", MetaKeys2[MetaKeys2.ALT = 2048] = "ALT", MetaKeys2[MetaKeys2.CTRL_COMMAND = 4096] = "CTRL_COMMAND", MetaKeys2[MetaKeys2.MAC_CTRL = 8192] = "MAC_CTRL", MetaKeys2))(MetaKeys || {}), __defProp$f = Object.defineProperty, __getOwnPropDesc$f = Object.getOwnPropertyDescriptor, __decorateClass$f = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$g = Object.defineProperty, __getOwnPropDesc$g = Object.getOwnPropertyDescriptor, __decorateClass$g = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$f(target, key, result), result;
-}, "__decorateClass$f"), __decorateParam$f = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$f");
+  return kind && result && __defProp$g(target, key, result), result;
+}, "__decorateClass$g"), __decorateParam$g = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$g");
 const IShortcutService = createIdentifier("ui.shortcut.service");
 var _a2;
 let ShortcutService = (_a2 = class extends Disposable {
@@ -2143,8 +2144,8 @@ let ShortcutService = (_a2 = class extends Disposable {
     bindingSet ? bindingSet.add(shortcut) : this._shortCutMapping.set(binding, /* @__PURE__ */ new Set([shortcut]));
     const commandID = shortcut.id, commandIDSet = this._commandIDMapping.get(commandID);
     return commandIDSet ? commandIDSet.add(shortcut) : this._commandIDMapping.set(commandID, /* @__PURE__ */ new Set([shortcut])), this._emitShortcutChanged(), toDisposable(() => {
-      var _a18, _b2, _c, _d;
-      (_a18 = this._shortCutMapping.get(binding)) == null || _a18.delete(shortcut), ((_b2 = this._shortCutMapping.get(binding)) == null ? void 0 : _b2.size) === 0 && this._shortCutMapping.delete(binding), (_c = this._commandIDMapping.get(commandID)) == null || _c.delete(shortcut), ((_d = this._commandIDMapping.get(commandID)) == null ? void 0 : _d.size) === 0 && this._commandIDMapping.delete(commandID), this._emitShortcutChanged();
+      var _a19, _b2, _c, _d;
+      (_a19 = this._shortCutMapping.get(binding)) == null || _a19.delete(shortcut), ((_b2 = this._shortCutMapping.get(binding)) == null ? void 0 : _b2.size) === 0 && this._shortCutMapping.delete(binding), (_c = this._commandIDMapping.get(commandID)) == null || _c.delete(shortcut), ((_d = this._commandIDMapping.get(commandID)) == null ? void 0 : _d.size) === 0 && this._commandIDMapping.delete(commandID), this._emitShortcutChanged();
     });
   }
   getShortcutDisplayOfCommand(id) {
@@ -2152,8 +2153,8 @@ let ShortcutService = (_a2 = class extends Disposable {
     return set ? this.getShortcutDisplay(set.values().next().value) : null;
   }
   getShortcutDisplay(shortcut) {
-    var _a18;
-    const binding = this._getBindingFromItem(shortcut), ctrlKey = binding & MetaKeys.CTRL_COMMAND, shiftKey = binding & MetaKeys.SHIFT, altKey = binding & MetaKeys.ALT, macCtrl = binding & MetaKeys.MAC_CTRL, body = (_a18 = KeyCodeToChar[binding & 255]) != null ? _a18 : "<->";
+    var _a19;
+    const binding = this._getBindingFromItem(shortcut), ctrlKey = binding & MetaKeys.CTRL_COMMAND, shiftKey = binding & MetaKeys.SHIFT, altKey = binding & MetaKeys.ALT, macCtrl = binding & MetaKeys.MAC_CTRL, body = (_a19 = KeyCodeToChar[binding & 255]) != null ? _a19 : "<->";
     return this._platformService.isMac ? `${ctrlKey ? "⌘" : ""}${shiftKey ? "⇧" : ""}${altKey ? "⌥" : ""}${macCtrl ? "⌃" : ""}${body}` : `${ctrlKey ? "Ctrl+" : ""}${shiftKey ? "Shift+" : ""}${altKey ? "Alt+" : ""}${body}`;
   }
   _emitShortcutChanged() {
@@ -2175,11 +2176,11 @@ let ShortcutService = (_a2 = class extends Disposable {
     if (shortcuts === void 0)
       return !1;
     const shouldTrigger = Array.from(shortcuts).sort((s1, s2) => {
-      var _a18, _b2;
-      return ((_a18 = s2.priority) != null ? _a18 : 0) - ((_b2 = s1.priority) != null ? _b2 : 0);
+      var _a19, _b2;
+      return ((_a19 = s2.priority) != null ? _a19 : 0) - ((_b2 = s1.priority) != null ? _b2 : 0);
     }).find((s) => {
-      var _a18, _b2;
-      return (_b2 = (_a18 = s.preconditions) == null ? void 0 : _a18.call(s, this._contextService)) != null ? _b2 : !0;
+      var _a19, _b2;
+      return (_b2 = (_a19 = s.preconditions) == null ? void 0 : _a19.call(s, this._contextService)) != null ? _b2 : !0;
     });
     return shouldTrigger ? (this._commandService.executeCommand(shouldTrigger.id, shouldTrigger.staticParameters), !0) : !1;
   }
@@ -2187,171 +2188,27 @@ let ShortcutService = (_a2 = class extends Disposable {
     return this._platformService.isMac && item.mac ? item.mac : this._platformService.isWindows && item.win ? item.win : this._platformService.isLinux && item.linux ? item.linux : item.binding;
   }
   _deriveBindingFromEvent(e2) {
-    const { shiftKey, metaKey, altKey, keyCode } = e2;
-    let binding = keyCode;
-    return shiftKey && (binding |= MetaKeys.SHIFT), altKey && (binding |= MetaKeys.ALT), (this._platformService.isMac ? metaKey : e2.ctrlKey) && (binding |= MetaKeys.CTRL_COMMAND), this._platformService.isMac && e2.ctrlKey && (binding |= MetaKeys.MAC_CTRL), binding;
-  }
-}, __name(_a2, "ShortcutService"), _a2);
-ShortcutService = __decorateClass$f([
-  __decorateParam$f(0, ICommandService),
-  __decorateParam$f(1, IPlatformService),
-  __decorateParam$f(2, IContextService),
-  __decorateParam$f(3, Optional(ILayoutService))
-], ShortcutService);
-function mergeMenuConfigs(baseConfig, additionalConfig) {
-  return !additionalConfig || !baseConfig || (["group", "type", "icon", "title", "tooltip", "positions"].forEach((prop) => {
-    additionalConfig[prop] !== void 0 && (baseConfig[prop] = additionalConfig[prop]);
-  }), ["hidden", "disabled", "activated"].forEach((prop) => {
-    updateReactiveProperty(baseConfig, `${prop}$`, additionalConfig[prop]);
-  })), baseConfig;
-}
-__name(mergeMenuConfigs, "mergeMenuConfigs");
-function updateReactiveProperty(baseConfig, key, value) {
-  if (value !== void 0 && baseConfig[key]) {
-    const subject$ = baseConfig[key].pipe(
-      switchMap(() => new BehaviorSubject(value))
-    );
-    baseConfig[key] = subject$;
-  }
-}
-__name(updateReactiveProperty, "updateReactiveProperty");
-var __defProp$e = Object.defineProperty, __getOwnPropDesc$e = Object.getOwnPropertyDescriptor, __decorateClass$e = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
-    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$e(target, key, result), result;
-}, "__decorateClass$e"), __decorateParam$e = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$e");
-const IMenuService = createIdentifier("univer.menu-service");
-var _a3;
-let MenuService = (_a3 = class extends Disposable {
-  constructor(_shortcutService) {
-    super();
-    /** @deprecated */
-    __publicField(this, "_menuItemMap", /* @__PURE__ */ new Map());
-    /** @deprecated */
-    __publicField(this, "_menuByPositions", /* @__PURE__ */ new Map());
-    /** @deprecated */
-    __publicField(this, "_menuConfigs", /* @__PURE__ */ new Map());
-    __publicField(this, "_menuChanged$", new BehaviorSubject(void 0));
-    __publicField(this, "menuChanged$", this._menuChanged$.asObservable());
-    this._shortcutService = _shortcutService;
-  }
-  dispose() {
-    this._menuItemMap.clear(), this._menuChanged$.complete();
-  }
-  /** @deprecated */
-  addMenuItem(item, config) {
-    if (this._menuItemMap.has(item.id))
-      throw new Error(`Menu item with the same id ${item.id} has already been added!`);
-    const menuItemConfig = config == null ? void 0 : config[item.id];
-    return this._menuItemMap.set(item.id, mergeMenuConfigs(item, menuItemConfig)), Array.isArray(item.positions) ? item.positions.forEach((menu) => this._appendMenuToPosition(item, menu)) : this._appendMenuToPosition(item, item.positions), this._menuChanged$.next(), toDisposable(() => {
-      if (this._menuItemMap.delete(item.id), Array.isArray(item.positions))
-        item.positions.forEach((menu) => {
-          const menus = this._menuByPositions.get(menu);
-          if (!menus)
-            return;
-          const index = menus.findIndex((m2) => m2[0] === item.id);
-          index > -1 && menus.splice(index, 1);
-        });
-      else {
-        const menus = this._menuByPositions.get(item.positions);
-        if (!menus)
-          return;
-        const index = menus.findIndex((m2) => m2[0] === item.id);
-        index > -1 && menus.splice(index, 1);
-      }
-      this._menuChanged$.next();
-    });
-  }
-  /** @deprecated */
-  getMenuItems(positions) {
-    if (this._menuByPositions.has(positions)) {
-      const menuItems = this._menuByPositions.get(positions);
-      if (menuItems)
-        return [...menuItems.values()].map((menu) => this._getDisplayMenuItems(menu[1]));
-    }
-    return [];
-  }
-  /** @deprecated */
-  setMenuItem(item) {
-    this._menuItemMap.set(item.id, item), Array.isArray(item.positions) ? item.positions.forEach((menu) => this._updateMenuItems(item, menu)) : this._updateMenuItems(item, item.positions), this._menuChanged$.next();
-  }
-  /** @deprecated */
-  getMenuItem(id) {
-    return this._menuItemMap.has(id) ? this._menuItemMap.get(id) : null;
-  }
-  /** @deprecated */
-  setMenuConfigs(id, config) {
-    this._menuConfigs.set(id, config);
-  }
-  /** @deprecated */
-  getMenuConfig(id) {
-    return this._menuConfigs.has(id) ? this._menuConfigs.get(id) : null;
-  }
-  /** @deprecated */
-  _getDisplayMenuItems(menuItem) {
-    const shortcut = this._shortcutService.getShortcutDisplayOfCommand(menuItem.id);
-    return shortcut ? {
-      ...menuItem,
-      shortcut
-    } : menuItem;
-  }
-  /** @deprecated */
-  _appendMenuToPosition(menu, position) {
-    this._menuByPositions.has(position) || this._menuByPositions.set(position, []);
-    const menuList = this._menuByPositions.get(position);
-    if (menuList.findIndex((m2) => m2[0] === menu.id) > -1)
-      throw new Error(`Menu item with the same id ${menu.id} has already been added!`);
-    menuList.push([menu.id, menu]);
-  }
-  /** @deprecated */
-  _updateMenuItems(menu, position) {
-    this._menuByPositions.has(position) || this._menuByPositions.set(position, []);
-    const menuList = this._menuByPositions.get(position), index = menuList.findIndex((m2) => m2[0] === menu.id);
-    index > -1 ? menuList[index] = [menu.id, menu] : menuList.push([menu.id, menu]);
-  }
-}, __name(_a3, "MenuService"), _a3);
-MenuService = __decorateClass$e([
-  __decorateParam$e(0, IShortcutService)
-], MenuService);
-const SetEditorResizeOperation = {
-  id: "sheet.operation.set-editor-resize",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor, params) => !0, "handler")
-};
-var MenuPosition = /* @__PURE__ */ ((MenuPosition2) => (MenuPosition2.VOID = "void", MenuPosition2.TOOLBAR_START = "uiToolbar.start", MenuPosition2.TOOLBAR_INSERT = "uiToolbar.insert", MenuPosition2.TOOLBAR_FORMULAS = "uiToolbar.formulas", MenuPosition2.TOOLBAR_DATA = "uiToolbar.data", MenuPosition2.TOOLBAR_VIEW = "uiToolbar.view", MenuPosition2.TOOLBAR_OTHERS = "uiToolbar.others", MenuPosition2.CONTEXT_MENU = "contextMenu", MenuPosition2.FOOTER = "footer", MenuPosition2))(MenuPosition || {}), MenuGroup = /* @__PURE__ */ ((MenuGroup2) => (MenuGroup2[MenuGroup2.TOOLBAR_HISTORY = 0] = "TOOLBAR_HISTORY", MenuGroup2[MenuGroup2.TOOLBAR_FORMAT = 1] = "TOOLBAR_FORMAT", MenuGroup2[MenuGroup2.TOOLBAR_LAYOUT = 2] = "TOOLBAR_LAYOUT", MenuGroup2[MenuGroup2.TOOLBAR_FORMULAS_INSERT = 3] = "TOOLBAR_FORMULAS_INSERT", MenuGroup2[MenuGroup2.TOOLBAR_FORMULAS_VIEW = 4] = "TOOLBAR_FORMULAS_VIEW", MenuGroup2[MenuGroup2.TOOLBAR_FILE = 5] = "TOOLBAR_FILE", MenuGroup2[MenuGroup2.TOOLBAR_OTHERS = 6] = "TOOLBAR_OTHERS", MenuGroup2[MenuGroup2.CONTEXT_MENU_FORMAT = 7] = "CONTEXT_MENU_FORMAT", MenuGroup2[MenuGroup2.CONTEXT_MENU_LAYOUT = 8] = "CONTEXT_MENU_LAYOUT", MenuGroup2[MenuGroup2.CONTEXT_MENU_DATA = 9] = "CONTEXT_MENU_DATA", MenuGroup2[MenuGroup2.CONTEXT_MENU_OTHERS = 10] = "CONTEXT_MENU_OTHERS", MenuGroup2))(MenuGroup || {}), MenuItemType = /* @__PURE__ */ ((MenuItemType2) => (MenuItemType2[MenuItemType2.BUTTON = 0] = "BUTTON", MenuItemType2[MenuItemType2.SELECTOR = 1] = "SELECTOR", MenuItemType2[MenuItemType2.BUTTON_SELECTOR = 2] = "BUTTON_SELECTOR", MenuItemType2[MenuItemType2.SUBITEMS = 3] = "SUBITEMS", MenuItemType2))(MenuItemType || {});
-function UndoMenuItemFactory(accessor) {
-  const undoRedoService = accessor.get(IUndoRedoService);
-  return {
-    id: UndoCommand.id,
-    group: MenuGroup.TOOLBAR_HISTORY,
-    type: MenuItemType.BUTTON,
-    icon: "UndoSingle",
-    title: "Undo",
-    tooltip: "toolbar.undo",
-    positions: [MenuPosition.TOOLBAR_START],
-    disabled$: undoRedoService.undoRedoStatus$.pipe(map((v2) => v2.undos <= 0))
-  };
-}
-__name(UndoMenuItemFactory, "UndoMenuItemFactory");
-function RedoMenuItemFactory(accessor) {
-  const undoRedoService = accessor.get(IUndoRedoService);
-  return {
-    id: RedoCommand.id,
-    group: MenuGroup.TOOLBAR_HISTORY,
-    type: MenuItemType.BUTTON,
-    icon: "RedoSingle",
-    title: "Redo",
-    tooltip: "toolbar.redo",
-    positions: [MenuPosition.TOOLBAR_START],
-    disabled$: undoRedoService.undoRedoStatus$.pipe(map((v2) => v2.redos <= 0))
-  };
-}
-__name(RedoMenuItemFactory, "RedoMenuItemFactory");
-var __defProp$d = Object.defineProperty, __getOwnPropDesc$d = Object.getOwnPropertyDescriptor, __decorateClass$d = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    const { shiftKey, metaKey, altKey, keyCode } = e2;
+    let binding = keyCode;
+    return shiftKey && (binding |= MetaKeys.SHIFT), altKey && (binding |= MetaKeys.ALT), (this._platformService.isMac ? metaKey : e2.ctrlKey) && (binding |= MetaKeys.CTRL_COMMAND), this._platformService.isMac && e2.ctrlKey && (binding |= MetaKeys.MAC_CTRL), binding;
+  }
+}, __name(_a2, "ShortcutService"), _a2);
+ShortcutService = __decorateClass$g([
+  __decorateParam$g(0, ICommandService),
+  __decorateParam$g(1, IPlatformService),
+  __decorateParam$g(2, IContextService),
+  __decorateParam$g(3, Optional(ILayoutService))
+], ShortcutService);
+const SetEditorResizeOperation = {
+  id: "sheet.operation.set-editor-resize",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => !0, "handler")
+};
+var __defProp$f = Object.defineProperty, __getOwnPropDesc$f = Object.getOwnPropertyDescriptor, __decorateClass$f = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$d(target, key, result), result;
-}, "__decorateClass$d"), __decorateParam$d = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$d");
+  return kind && result && __defProp$f(target, key, result), result;
+}, "__decorateClass$f"), __decorateParam$f = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$f");
 function whenEditorFocused(contextService) {
   return contextService.getContextValue(FOCUSING_UNIVER_EDITOR);
 }
@@ -2387,20 +2244,13 @@ const CopyShortcutItem = {
   binding: KeyCode$1.Y | MetaKeys.CTRL_COMMAND,
   preconditions: whenEditorFocused
 };
-var _a4;
-let SharedController = (_a4 = class extends Disposable {
-  constructor(_config, _injector, _menuService, _shortcutService, _commandService) {
-    super(), this._config = _config, this._injector = _injector, this._menuService = _menuService, this._shortcutService = _shortcutService, this._commandService = _commandService, this.initialize();
+var _a3;
+let SharedController = (_a3 = class extends Disposable {
+  constructor(_shortcutService, _commandService) {
+    super(), this._shortcutService = _shortcutService, this._commandService = _commandService, this.initialize();
   }
   initialize() {
-    this._registerCommands(), this._registerShortcuts(), this._registerMenus();
-  }
-  _registerMenus() {
-    var _a18, _b2;
-    const menu = (_b2 = (_a18 = this._config) == null ? void 0 : _a18.menu) != null ? _b2 : {};
-    [UndoMenuItemFactory, RedoMenuItemFactory].forEach((factory) => {
-      this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(factory), menu));
-    });
+    this._registerCommands(), this._registerShortcuts();
   }
   _registerCommands() {
     [CutCommand, CopyCommand, PasteCommand, SetEditorResizeOperation].forEach(
@@ -2411,17 +2261,14 @@ let SharedController = (_a4 = class extends Disposable {
     const shortcutItems = [UndoShortcutItem, RedoShortcutItem];
     shortcutItems.push(CutShortcutItem, CopyShortcutItem, OnlyDisplayPasteShortcutItem), shortcutItems.forEach((shortcut) => this.disposeWithMe(this._shortcutService.registerShortcut(shortcut)));
   }
-}, __name(_a4, "SharedController"), _a4);
-SharedController = __decorateClass$d([
+}, __name(_a3, "SharedController"), _a3);
+SharedController = __decorateClass$f([
   OnLifecycle(LifecycleStages.Ready, SharedController),
-  __decorateParam$d(1, Inject(Injector)),
-  __decorateParam$d(2, IMenuService),
-  __decorateParam$d(3, IShortcutService),
-  __decorateParam$d(4, ICommandService)
+  __decorateParam$f(0, IShortcutService),
+  __decorateParam$f(1, ICommandService)
 ], SharedController);
 const IUIController = createIdentifier("univer.ui.ui-controller");
 runOnLifecycle(LifecycleStages.Ready, IUIController);
-const UI_CONFIG_KEY = "UNIVER_UI_CONFIG_KEY";
 var render$1 = {}, interopRequireWildcard = { exports: {} }, _typeof$1 = { exports: {} };
 (function(module) {
   function _typeof3(o) {
@@ -3013,8 +2860,8 @@ __name(_CanvasPopupService, "CanvasPopupService");
 let CanvasPopupService = _CanvasPopupService;
 const SingleCanvasPopup = /* @__PURE__ */ __name(({ popup, children }) => {
   const [hidden, setHidden] = useState(!1), anchorRect$ = useMemo(() => popup.anchorRect$.pipe(throttleTime(0, animationFrameScheduler)), [popup.anchorRect$]), excludeRects$ = useMemo(() => {
-    var _a18;
-    return (_a18 = popup.excludeRects$) == null ? void 0 : _a18.pipe(throttleTime(0, animationFrameScheduler));
+    var _a19;
+    return (_a19 = popup.excludeRects$) == null ? void 0 : _a19.pipe(throttleTime(0, animationFrameScheduler));
   }, [popup.excludeRects$]), anchorRect = useObservable(anchorRect$, popup.anchorRect), excludeRects = useObservable(excludeRects$, popup.excludeRects), { offset, canvasElement, hideOnInvisible = !0 } = popup, rectWithOffset = useMemo(() => {
     if (!anchorRect)
       return null;
@@ -3134,8 +2981,8 @@ const floatDomWrapper = "univer-float-dom-wrapper", floatDom = "univer-float-dom
     }
   ) : null;
 }), FloatDom = /* @__PURE__ */ __name(({ unitId }) => {
-  var _a18, _b2;
-  const instanceService = useDependency(IUniverInstanceService), domLayerService = useDependency(CanvasFloatDomService), layers = useObservable(domLayerService.domLayers$), currentUnitId = unitId || ((_a18 = instanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a18.getUnitId());
+  var _a19, _b2;
+  const instanceService = useDependency(IUniverInstanceService), domLayerService = useDependency(CanvasFloatDomService), layers = useObservable(domLayerService.domLayers$), currentUnitId = unitId || ((_a19 = instanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a19.getUnitId());
   return (_b2 = layers == null ? void 0 : layers.filter((layer) => layer[1].unitId === currentUnitId)) == null ? void 0 : _b2.map((layer) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     FloatDomSingle,
     {
@@ -3148,18 +2995,18 @@ const floatDomWrapper = "univer-float-dom-wrapper", floatDom = "univer-float-dom
 function ComponentContainer(props) {
   const { components, fallback, sharedProps } = props;
   return !components || components.size === 0 ? fallback != null ? fallback : null : Array.from(components.values()).map((component, index) => {
-    var _a18;
-    return React__default.createElement(component, { key: `${(_a18 = component.displayName) != null ? _a18 : index}`, ...sharedProps });
+    var _a19;
+    return React__default.createElement(component, { key: `${(_a19 = component.displayName) != null ? _a19 : index}`, ...sharedProps });
   });
 }
 __name(ComponentContainer, "ComponentContainer");
 function useComponentsOfPart(part, injector) {
-  var _a18;
-  const uiPartsService = (_a18 = injector == null ? void 0 : injector.get(IUIPartsService)) != null ? _a18 : useDependency(IUIPartsService), updateCounterRef = useRef(0), componentPartUpdateCount = useObservable(
+  var _a19;
+  const uiPartsService = (_a19 = injector == null ? void 0 : injector.get(IUIPartsService)) != null ? _a19 : useDependency(IUIPartsService), updateCounterRef = useRef(0), componentPartUpdateCount = useObservable(
     () => uiPartsService.componentRegistered$.pipe(
       filter((key) => key === part),
       debounceTime(200),
-      map$1(() => updateCounterRef.current += 1),
+      map(() => updateCounterRef.current += 1),
       startWith(updateCounterRef.current += 1)
       // trigger update when subscribe
     ),
@@ -3170,6 +3017,236 @@ function useComponentsOfPart(part, injector) {
   return useMemo(() => uiPartsService.getComponents(part), [componentPartUpdateCount]);
 }
 __name(useComponentsOfPart, "useComponentsOfPart");
+var MenuManagerPosition = /* @__PURE__ */ ((MenuManagerPosition2) => (MenuManagerPosition2.RIBBON = "ribbon", MenuManagerPosition2.CONTEXT_MENU = "contextMenu", MenuManagerPosition2))(MenuManagerPosition || {}), RibbonPosition = /* @__PURE__ */ ((RibbonPosition2) => (RibbonPosition2.START = "ribbon.start", RibbonPosition2.INSERT = "ribbon.insert", RibbonPosition2.FORMULAS = "ribbon.formulas", RibbonPosition2.DATA = "ribbon.data", RibbonPosition2.VIEW = "ribbon.view", RibbonPosition2.OTHERS = "ribbon.others", RibbonPosition2))(RibbonPosition || {}), RibbonStartGroup = /* @__PURE__ */ ((RibbonStartGroup2) => (RibbonStartGroup2.HISTORY = "ribbon.start.history", RibbonStartGroup2.FORMAT = "ribbon.start.format", RibbonStartGroup2.LAYOUT = "ribbon.start.layout", RibbonStartGroup2.FORMULAS_INSERT = "ribbon.start.insert", RibbonStartGroup2.FORMULAS_VIEW = "ribbon.start.view", RibbonStartGroup2.FILE = "ribbon.start.file", RibbonStartGroup2.OTHERS = "ribbon.start.others", RibbonStartGroup2))(RibbonStartGroup || {}), RibbonInsertGroup = /* @__PURE__ */ ((RibbonInsertGroup2) => (RibbonInsertGroup2.OTHERS = "ribbon.insert.others", RibbonInsertGroup2))(RibbonInsertGroup || {}), RibbonFormulasGroup = /* @__PURE__ */ ((RibbonFormulasGroup2) => (RibbonFormulasGroup2.OTHERS = "ribbon.formulas.others", RibbonFormulasGroup2))(RibbonFormulasGroup || {}), RibbonDataGroup = /* @__PURE__ */ ((RibbonDataGroup2) => (RibbonDataGroup2.OTHERS = "ribbon.data.others", RibbonDataGroup2))(RibbonDataGroup || {}), RibbonViewGroup = /* @__PURE__ */ ((RibbonViewGroup2) => (RibbonViewGroup2.OTHERS = "ribbon.view.others", RibbonViewGroup2))(RibbonViewGroup || {}), RibbonOthersGroup = /* @__PURE__ */ ((RibbonOthersGroup2) => (RibbonOthersGroup2.OTHERS = "ribbon.others.others", RibbonOthersGroup2))(RibbonOthersGroup || {}), ContextMenuPosition = /* @__PURE__ */ ((ContextMenuPosition2) => (ContextMenuPosition2.MAIN_AREA = "contextMenu.mainArea", ContextMenuPosition2.COL_HEADER = "contextMenu.colHeader", ContextMenuPosition2.ROW_HEADER = "contextMenu.rowHeader", ContextMenuPosition2.FOOTER_TABS = "contextMenu.footerTabs", ContextMenuPosition2.FOOTER_MENU = "contextMenu.footerMenu", ContextMenuPosition2))(ContextMenuPosition || {}), ContextMenuGroup = /* @__PURE__ */ ((ContextMenuGroup2) => (ContextMenuGroup2.FORMAT = "contextMenu.format", ContextMenuGroup2.LAYOUT = "contextMenu.layout", ContextMenuGroup2.DATA = "contextMenu.data", ContextMenuGroup2.OTHERS = "contextMenu.others", ContextMenuGroup2))(ContextMenuGroup || {}), MenuPosition = ((MenuPosition2) => (MenuPosition2.VOID = "void", MenuPosition2[MenuPosition2.TOOLBAR_START = RibbonPosition.START] = "TOOLBAR_START", MenuPosition2[MenuPosition2.TOOLBAR_INSERT = RibbonPosition.INSERT] = "TOOLBAR_INSERT", MenuPosition2[MenuPosition2.TOOLBAR_FORMULAS = RibbonPosition.FORMULAS] = "TOOLBAR_FORMULAS", MenuPosition2[MenuPosition2.TOOLBAR_DATA = RibbonPosition.DATA] = "TOOLBAR_DATA", MenuPosition2[MenuPosition2.TOOLBAR_VIEW = RibbonPosition.VIEW] = "TOOLBAR_VIEW", MenuPosition2[MenuPosition2.TOOLBAR_OTHERS = RibbonPosition.OTHERS] = "TOOLBAR_OTHERS", MenuPosition2[MenuPosition2.CONTEXT_MENU = ContextMenuPosition.MAIN_AREA] = "CONTEXT_MENU", MenuPosition2.FOOTER = "footer", MenuPosition2))(MenuPosition || {}), MenuGroup = /* @__PURE__ */ ((MenuGroup2) => (MenuGroup2[MenuGroup2.TOOLBAR_HISTORY = 0] = "TOOLBAR_HISTORY", MenuGroup2[MenuGroup2.TOOLBAR_FORMAT = 1] = "TOOLBAR_FORMAT", MenuGroup2[MenuGroup2.TOOLBAR_LAYOUT = 2] = "TOOLBAR_LAYOUT", MenuGroup2[MenuGroup2.TOOLBAR_FORMULAS_INSERT = 3] = "TOOLBAR_FORMULAS_INSERT", MenuGroup2[MenuGroup2.TOOLBAR_FORMULAS_VIEW = 4] = "TOOLBAR_FORMULAS_VIEW", MenuGroup2[MenuGroup2.TOOLBAR_FILE = 5] = "TOOLBAR_FILE", MenuGroup2[MenuGroup2.TOOLBAR_OTHERS = 6] = "TOOLBAR_OTHERS", MenuGroup2[MenuGroup2.CONTEXT_MENU_FORMAT = 7] = "CONTEXT_MENU_FORMAT", MenuGroup2[MenuGroup2.CONTEXT_MENU_LAYOUT = 8] = "CONTEXT_MENU_LAYOUT", MenuGroup2[MenuGroup2.CONTEXT_MENU_DATA = 9] = "CONTEXT_MENU_DATA", MenuGroup2[MenuGroup2.CONTEXT_MENU_OTHERS = 10] = "CONTEXT_MENU_OTHERS", MenuGroup2))(MenuGroup || {}), MenuItemType = /* @__PURE__ */ ((MenuItemType2) => (MenuItemType2[MenuItemType2.BUTTON = 0] = "BUTTON", MenuItemType2[MenuItemType2.SELECTOR = 1] = "SELECTOR", MenuItemType2[MenuItemType2.BUTTON_SELECTOR = 2] = "BUTTON_SELECTOR", MenuItemType2[MenuItemType2.SUBITEMS = 3] = "SUBITEMS", MenuItemType2))(MenuItemType || {});
+function mergeMenuConfigs(baseConfig, additionalConfig) {
+  return !additionalConfig || !baseConfig || (["group", "type", "icon", "title", "tooltip", "positions"].forEach((prop) => {
+    additionalConfig[prop] !== void 0 && (baseConfig[prop] = additionalConfig[prop]);
+  }), ["hidden", "disabled", "activated"].forEach((prop) => {
+    updateReactiveProperty(baseConfig, `${prop}$`, additionalConfig[prop]);
+  })), baseConfig;
+}
+__name(mergeMenuConfigs, "mergeMenuConfigs");
+function updateReactiveProperty(baseConfig, key, value) {
+  if (value !== void 0)
+    if (baseConfig[key]) {
+      const subject$ = baseConfig[key].pipe(
+        switchMap(() => new BehaviorSubject(value))
+      );
+      baseConfig[key] = subject$;
+    } else
+      baseConfig[key] = new Observable((subscriber) => {
+        subscriber.next(value);
+      });
+}
+__name(updateReactiveProperty, "updateReactiveProperty");
+var __defProp$e = Object.defineProperty, __getOwnPropDesc$e = Object.getOwnPropertyDescriptor, __decorateClass$e = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$e(target, key, result), result;
+}, "__decorateClass$e"), __decorateParam$e = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$e");
+const IMenuManagerService = createIdentifier("univer.menu-manager-service");
+var _a4;
+let MenuManagerService = (_a4 = class extends Disposable {
+  constructor(_injector, _configService) {
+    super();
+    __publicField(this, "menuChanged$", new Subject());
+    __publicField(this, "_menu", {
+      [MenuManagerPosition.RIBBON]: {
+        [RibbonPosition.START]: {
+          order: 0,
+          [RibbonStartGroup.HISTORY]: {
+            order: 0
+          },
+          [RibbonStartGroup.FORMAT]: {
+            order: 1
+          },
+          [RibbonStartGroup.LAYOUT]: {
+            order: 2
+          },
+          [RibbonStartGroup.FORMULAS_INSERT]: {
+            order: 3
+          },
+          [RibbonStartGroup.FORMULAS_VIEW]: {
+            order: 4
+          },
+          [RibbonStartGroup.FILE]: {
+            order: 5
+          },
+          [RibbonStartGroup.OTHERS]: {
+            order: 6
+          }
+        },
+        [RibbonPosition.INSERT]: {
+          order: 1,
+          [RibbonInsertGroup.OTHERS]: {
+            order: 0
+          }
+        },
+        [RibbonPosition.FORMULAS]: {
+          order: 2,
+          [RibbonFormulasGroup.OTHERS]: {
+            order: 0
+          }
+        },
+        [RibbonPosition.DATA]: {
+          order: 3,
+          [RibbonDataGroup.OTHERS]: {
+            order: 0
+          }
+        },
+        [RibbonPosition.VIEW]: {
+          order: 4,
+          [RibbonViewGroup.OTHERS]: {
+            order: 0
+          }
+        },
+        [RibbonPosition.OTHERS]: {
+          order: 5,
+          [RibbonOthersGroup.OTHERS]: {
+            order: 0
+          }
+        }
+      },
+      [MenuManagerPosition.CONTEXT_MENU]: {
+        [ContextMenuPosition.MAIN_AREA]: {
+          order: 0,
+          [ContextMenuGroup.FORMAT]: {
+            order: 0
+          },
+          [ContextMenuGroup.LAYOUT]: {
+            order: 1
+          },
+          [ContextMenuGroup.DATA]: {
+            order: 2
+          },
+          [ContextMenuGroup.OTHERS]: {
+            order: 3
+          }
+        },
+        [ContextMenuPosition.COL_HEADER]: {
+          order: 1,
+          [ContextMenuGroup.FORMAT]: {
+            order: 0
+          },
+          [ContextMenuGroup.LAYOUT]: {
+            order: 1
+          },
+          [ContextMenuGroup.DATA]: {
+            order: 2
+          },
+          [ContextMenuGroup.OTHERS]: {
+            order: 3
+          }
+        },
+        [ContextMenuPosition.ROW_HEADER]: {
+          order: 2,
+          [ContextMenuGroup.FORMAT]: {
+            order: 0
+          },
+          [ContextMenuGroup.LAYOUT]: {
+            order: 1
+          },
+          [ContextMenuGroup.DATA]: {
+            order: 2
+          },
+          [ContextMenuGroup.OTHERS]: {
+            order: 3
+          }
+        },
+        [ContextMenuPosition.FOOTER_TABS]: {
+          order: 3,
+          [ContextMenuGroup.FORMAT]: {
+            order: 0
+          },
+          [ContextMenuGroup.LAYOUT]: {
+            order: 1
+          },
+          [ContextMenuGroup.DATA]: {
+            order: 2
+          },
+          [ContextMenuGroup.OTHERS]: {
+            order: 3
+          }
+        },
+        [ContextMenuPosition.FOOTER_MENU]: {
+          order: 4,
+          [ContextMenuGroup.OTHERS]: {
+            order: 3
+          }
+        }
+      }
+    });
+    this._injector = _injector, this._configService = _configService;
+  }
+  dispose() {
+    this.menuChanged$.complete();
+  }
+  /**
+   * Merge source menu to target menu recursively
+   * @param source
+   * @param target default is root menu
+   */
+  mergeMenu(source, target) {
+    const _target = target != null ? target : this._menu;
+    for (const [key, value] of Object.entries(_target))
+      if (key in source) {
+        const _key = key;
+        Tools.deepMerge(_target[_key], source[_key]), this.menuChanged$.next();
+      } else
+        this.mergeMenu(source, value);
+  }
+  appendRootMenu(source) {
+    Tools.deepMerge(this._menu, source), this.menuChanged$.next();
+  }
+  _buildMenuSchema(data) {
+    const result = [];
+    for (const [key, value] of Object.entries(data)) {
+      const menuItem = {
+        key,
+        order: value.order
+      };
+      if (value.menuItemFactory) {
+        const item = this._injector.invoke(value.menuItemFactory);
+        if (item) {
+          const menuItemConfig = this._configService.getConfig("menu");
+          if (menuItemConfig && item.id in menuItemConfig) {
+            const _key = item.id;
+            menuItem.item = mergeMenuConfigs(item, menuItemConfig[_key]);
+          } else
+            menuItem.item = item;
+        }
+      }
+      const children = this._buildMenuSchema(value);
+      children.length > 0 && (menuItem.children = children.sort((a, b2) => a.order - b2.order)), (menuItem.item || menuItem.children) && result.push(menuItem);
+    }
+    return result;
+  }
+  /**
+   * Get menu schema by position key
+   * @param key
+   * @returns Menu schema array or empty array if not found
+   */
+  getMenuByPositionKey(key) {
+    const findKey = /* @__PURE__ */ __name((obj) => {
+      if (key in obj)
+        return this._buildMenuSchema(obj[key]);
+      for (const k2 in obj) {
+        if (k2 === key)
+          return this._buildMenuSchema(obj[k2]);
+        if (typeof obj[k2] == "object") {
+          const result = findKey(obj[k2]);
+          if (result)
+            return result;
+        }
+      }
+    }, "findKey");
+    return findKey(this._menu);
+  }
+}, __name(_a4, "MenuManagerService"), _a4);
+MenuManagerService = __decorateClass$e([
+  __decorateParam$e(0, Inject(Injector)),
+  __decorateParam$e(1, IConfigService)
+], MenuManagerService);
 const menuItemNoHover = "univer-menu-item-no-hover", menuItemActive = "univer-menu-item-active", menuItemActivated = "univer-menu-item-activated", menuItemContent = "univer-menu-item-content", menuItemSelectable = "univer-menu-item-selectable", menuItemSelectableIcon = "univer-menu-item-selectable-icon", menuItemMoreIcon = "univer-menu-item-more-icon", styles$d = {
   menuItemNoHover,
   menuItemActive,
@@ -3180,66 +3257,40 @@ const menuItemNoHover = "univer-menu-item-no-hover", menuItemActive = "univer-me
   menuItemMoreIcon
 };
 function MenuWrapper(props) {
-  const { menuType, onOptionSelect } = props, menuService = useDependency(IMenuService);
+  const { menuType, onOptionSelect } = props, menuManagerService = useDependency(IMenuManagerService);
   if (!menuType)
     return null;
-  if (Array.isArray(menuType)) {
-    let filterData = /* @__PURE__ */ __name(function(data) {
-      return data.map((group2) => {
-        const filteredGroup2 = {};
-        return Object.entries(group2).forEach(([key, items]) => {
-          const hiddenObservables = items.map((item) => {
-            var _a18;
-            return (_a18 = item.hidden$) != null ? _a18 : new Observable((subscriber) => subscriber.next(!1));
-          });
-          combineLatest(hiddenObservables).pipe(
-            map$1((hiddenValues) => hiddenValues.every((hidden) => hidden === !0))
-          ).subscribe((allHidden) => {
-            allHidden || (filteredGroup2[key] = items);
-          }).unsubscribe();
-        }), filteredGroup2;
-      }).filter((group2) => Object.keys(group2).length > 0);
-    }, "filterData");
-    const group = menuType.map((type) => menuService.getMenuItems(type)).map(
-      (menuItems2) => menuItems2.reduce(
-        (acc, item) => {
-          var _a18, _b2;
-          return item.group ? (acc[item.group] = (_a18 = acc[item.group]) != null ? _a18 : [], acc[item.group].push(item)) : (acc[MenuGroup.CONTEXT_MENU_OTHERS] = (_b2 = acc[MenuGroup.CONTEXT_MENU_OTHERS]) != null ? _b2 : [], acc[MenuGroup.CONTEXT_MENU_OTHERS].push(item)), acc;
-        },
-        {}
-      )
-    ), filteredGroup = useMemo(() => filterData(group), [group]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: filteredGroup.map(
-      (groupItem) => Object.keys(groupItem).map((groupKey) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemGroup, { eventKey: groupKey, children: groupItem[groupKey].map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        MenuItem,
-        {
-          menuItem: item,
-          onClick: /* @__PURE__ */ __name((object) => {
-            onOptionSelect == null || onOptionSelect({ value: "", label: item.id, ...object });
-          }, "onClick")
-        },
-        item.id
-      )) }, groupKey))
-    ) });
-  }
-  return menuService.getMenuItems(menuType).map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    MenuItem,
-    {
-      menuItem: item,
-      onClick: /* @__PURE__ */ __name((object) => {
-        onOptionSelect == null || onOptionSelect({ value: "", label: item.id, ...object });
-      }, "onClick")
-    },
-    item.id
-  ));
+  const menuItems = menuManagerService.getMenuByPositionKey(menuType);
+  return menuItems && menuItems.map((item) => {
+    var _a19;
+    return item.item ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MenuItem,
+      {
+        menuItem: item.item,
+        onClick: /* @__PURE__ */ __name((object) => {
+          onOptionSelect == null || onOptionSelect({ value: "", label: item.key, ...object });
+        }, "onClick")
+      },
+      item.key
+    ) : (_a19 = item.children) != null && _a19.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemGroup, { eventKey: item.key, children: item.children.map((child) => child.item && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MenuItem,
+      {
+        menuItem: child.item,
+        onClick: /* @__PURE__ */ __name((object) => {
+          onOptionSelect == null || onOptionSelect({ value: "", label: child.key, ...object });
+        }, "onClick")
+      },
+      child.key
+    )) }, item.key) : null;
+  });
 }
 __name(MenuWrapper, "MenuWrapper");
 function MenuOptionsWrapper(props) {
-  var _a18;
+  var _a19;
   const { options, value, onOptionSelect, parentKey } = props;
-  return (_a18 = options == null ? void 0 : options.map((option, index) => {
-    var _a19, _b2, _c;
-    const key = `${parentKey}-${(_a19 = option.label) != null ? _a19 : option.id}-${index}`, onChange = /* @__PURE__ */ __name((v2) => {
+  return (_a19 = options == null ? void 0 : options.map((option, index) => {
+    var _a20, _b2, _c;
+    const key = `${parentKey}-${(_a20 = option.label) != null ? _a20 : option.id}-${index}`, onChange = /* @__PURE__ */ __name((v2) => {
       onOptionSelect == null || onOptionSelect({ value: v2, label: option == null ? void 0 : option.label, commandId: option == null ? void 0 : option.commandId });
     }, "onChange"), handleClick = /* @__PURE__ */ __name(() => {
       typeof option.value > "u" || onOptionSelect == null || onOptionSelect({
@@ -3269,7 +3320,7 @@ function MenuOptionsWrapper(props) {
         ]
       }
     ) }, key);
-  })) != null ? _a18 : null;
+  })) != null ? _a19 : null;
 }
 __name(MenuOptionsWrapper, "MenuOptionsWrapper");
 const Menu = /* @__PURE__ */ __name((props) => {
@@ -3287,7 +3338,7 @@ const Menu = /* @__PURE__ */ __name((props) => {
   );
 }, "Menu");
 function MenuItem({ menuItem, onClick }) {
-  const menuService = useDependency(IMenuService), disabled = useObservable(menuItem.disabled$, !1), activated = useObservable(menuItem.activated$, !1), hidden = useObservable(menuItem.hidden$, !1), value = useObservable(menuItem.value$), item = menuItem, selectionsFromObservable = useObservable(isObservable(item.selections) ? item.selections : void 0), [inputValue, setInputValue] = useState(value);
+  const menuManagerService = useDependency(IMenuManagerService), disabled = useObservable(menuItem.disabled$, !1), activated = useObservable(menuItem.activated$, !1), hidden = useObservable(menuItem.hidden$, !1), value = useObservable(menuItem.value$), item = menuItem, selectionsFromObservable = useObservable(isObservable(item.selections) ? item.selections : void 0), [inputValue, setInputValue] = useState(value);
   if (hidden)
     return null;
   const onChange = /* @__PURE__ */ __name((v2) => {
@@ -3311,8 +3362,8 @@ function MenuItem({ menuItem, onClick }) {
       item2.id
     );
   }, "renderButtonType"), renderSelectorType = /* @__PURE__ */ __name(() => {
-    var _a18;
-    const selections = (_a18 = selectionsFromObservable != null ? selectionsFromObservable : item.selections) != null ? _a18 : [];
+    var _a19;
+    const selections = (_a19 = selectionsFromObservable != null ? selectionsFromObservable : item.selections) != null ? _a19 : [];
     return selections.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       SubMenu,
       {
@@ -3358,7 +3409,7 @@ function MenuItem({ menuItem, onClick }) {
       ),
       item.shortcut && ` (${item.shortcut})`
     ] }) }, item.id);
-  }, "renderSelectorType"), subMenuItems = menuItem.id ? menuService.getMenuItems(menuItem.id) : [], renderSubItemsType = /* @__PURE__ */ __name(() => {
+  }, "renderSelectorType"), subMenuItems = menuItem.id ? menuManagerService.getMenuByPositionKey(menuItem.id) : [], renderSubItemsType = /* @__PURE__ */ __name(() => {
     const item2 = menuItem;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       SubMenu,
@@ -3386,8 +3437,8 @@ const IContextMenuService = createIdentifier("ui.contextmenu.service"), _Context
     __publicField(this, "disabled", !1);
   }
   get visible() {
-    var _a18, _b2;
-    return (_b2 = (_a18 = this._currentHandler) == null ? void 0 : _a18.visible) != null ? _b2 : !1;
+    var _a19, _b2;
+    return (_b2 = (_a19 = this._currentHandler) == null ? void 0 : _a19.visible) != null ? _b2 : !1;
   }
   disable() {
     this.disabled = !0;
@@ -3396,12 +3447,12 @@ const IContextMenuService = createIdentifier("ui.contextmenu.service"), _Context
     this.disabled = !1;
   }
   triggerContextMenu(event, menuType) {
-    var _a18;
-    event.stopPropagation(), !this.disabled && ((_a18 = this._currentHandler) == null || _a18.handleContextMenu(event, menuType));
+    var _a19;
+    event.stopPropagation(), !this.disabled && ((_a19 = this._currentHandler) == null || _a19.handleContextMenu(event, menuType));
   }
   hideContextMenu() {
-    var _a18;
-    (_a18 = this._currentHandler) == null || _a18.hideContextMenu();
+    var _a19;
+    (_a19 = this._currentHandler) == null || _a19.hideContextMenu();
   }
   registerContextMenuHandler(handler) {
     if (this._currentHandler)
@@ -3440,7 +3491,7 @@ function DesktopContextMenu() {
   return __name(handleClose, "handleClose"), /* @__PURE__ */ jsxRuntimeExports.jsx(Popup, { visible, offset, children: /* @__PURE__ */ jsxRuntimeExports.jsx("section", { ref: contentRef, children: menuType && /* @__PURE__ */ jsxRuntimeExports.jsx(
     Menu,
     {
-      menuType: [menuType],
+      menuType,
       onOptionSelect: /* @__PURE__ */ __name((params) => {
         const { label: id, commandId, value } = params;
         commandService && commandService.executeCommand(commandId != null ? commandId : id, { value }), injector.get(ITextSelectionRenderManager).focus(), setVisible(!1);
@@ -3496,29 +3547,139 @@ function ToolbarButton(props) {
   );
 }
 __name(ToolbarButton, "ToolbarButton");
-const headerbar = "univer-headerbar", headerMenu = "univer-header-menu", menubar = "univer-menubar", menubarItem = "univer-menubar-item", menubarItemActive = "univer-menubar-item-active", toolbar = "univer-toolbar", toolbarContainer = "univer-toolbar-container", toolbarMore = "univer-toolbar-more", toolbarMoreContainer = "univer-toolbar-more-container", toolbarGroup = "univer-toolbar-group", toolbarItemSelectButton = "univer-toolbar-item-select-button", toolbarItemSelectButtonDisabled = "univer-toolbar-item-select-button-disabled", toolbarItemSelectButtonActivated = "univer-toolbar-item-select-button-activated", toolbarItemSelectButtonLabel = "univer-toolbar-item-select-button-label", toolbarItemSelectButtonArrow = "univer-toolbar-item-select-button-arrow", toolbarItemSelect = "univer-toolbar-item-select", toolbarItemSelectDisabled = "univer-toolbar-item-select-disabled", toolbarItemSelectActivated = "univer-toolbar-item-select-activated", toolbarItemSelectArrow = "univer-toolbar-item-select-arrow", toolbarItemSelectArrowDisabled = "univer-toolbar-item-select-arrow-disabled", toolbarItemSelectArrowActivated = "univer-toolbar-item-select-arrow-activated", styles$b = {
-  headerbar,
-  headerMenu,
-  menubar,
-  menubarItem,
-  menubarItemActive,
-  toolbar,
-  toolbarContainer,
-  toolbarMore,
-  toolbarMoreContainer,
-  toolbarGroup,
-  toolbarItemSelectButton,
-  toolbarItemSelectButtonDisabled,
-  toolbarItemSelectButtonActivated,
-  toolbarItemSelectButtonLabel,
-  toolbarItemSelectButtonArrow,
-  toolbarItemSelect,
-  toolbarItemSelectDisabled,
-  toolbarItemSelectActivated,
-  toolbarItemSelectArrow,
-  toolbarItemSelectArrowDisabled,
-  toolbarItemSelectArrowActivated
-};
+var __defProp$d = Object.defineProperty, __getOwnPropDesc$d = Object.getOwnPropertyDescriptor, __decorateClass$d = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$d(target, key, result), result;
+}, "__decorateClass$d"), __decorateParam$d = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$d");
+const IMenuService = createIdentifier("univer.menu-service");
+var _a5;
+let MenuService = (_a5 = class extends Disposable {
+  constructor(_shortcutService, _menuManagerService, _logService) {
+    super();
+    /** @deprecated */
+    __publicField(this, "_menuItemMap", /* @__PURE__ */ new Map());
+    /** @deprecated */
+    __publicField(this, "_menuByPositions", /* @__PURE__ */ new Map());
+    /** @deprecated */
+    __publicField(this, "_menuConfigs", /* @__PURE__ */ new Map());
+    __publicField(this, "_menuChanged$", new BehaviorSubject(void 0));
+    __publicField(this, "menuChanged$", this._menuChanged$.asObservable());
+    this._shortcutService = _shortcutService, this._menuManagerService = _menuManagerService, this._logService = _logService;
+  }
+  dispose() {
+    this._menuItemMap.clear(), this._menuChanged$.complete();
+  }
+  /** @deprecated */
+  addMenuItem(item, config) {
+    if (this._logService.warn("[MenuService]: MenuService is deprecated, please use MenuManagerService instead."), this._menuItemMap.has(item.id))
+      throw new Error(`Menu item with the same id ${item.id} has already been added!`);
+    const menuItemConfig = config == null ? void 0 : config[item.id];
+    return this._menuItemMap.set(item.id, mergeMenuConfigs(item, menuItemConfig)), Array.isArray(item.positions) ? item.positions.forEach((menu) => this._appendMenuToPosition(item, menu)) : item.positions && this._appendMenuToPosition(item, item.positions), [
+      MenuPosition.TOOLBAR_START,
+      MenuPosition.TOOLBAR_INSERT,
+      MenuPosition.TOOLBAR_FORMULAS,
+      MenuPosition.TOOLBAR_DATA,
+      MenuPosition.TOOLBAR_VIEW,
+      MenuPosition.TOOLBAR_OTHERS,
+      MenuPosition.CONTEXT_MENU
+    ].forEach((position) => {
+      position !== MenuPosition.CONTEXT_MENU ? this.getMenuItems(position).forEach((menu) => {
+        var _a19;
+        this._menuManagerService.mergeMenu({
+          [position]: {
+            [(_a19 = menu.group) != null ? _a19 : RibbonOthersGroup.OTHERS]: {
+              [menu.id]: {
+                menuItemFactory: /* @__PURE__ */ __name(() => menu, "menuItemFactory")
+              }
+            }
+          }
+        });
+      }) : this.getMenuItems(position).forEach((menu) => {
+        var _a19;
+        this._menuManagerService.mergeMenu({
+          [position]: {
+            [(_a19 = menu.group) != null ? _a19 : ContextMenuGroup.OTHERS]: {
+              [menu.id]: {
+                menuItemFactory: /* @__PURE__ */ __name(() => menu, "menuItemFactory")
+              }
+            }
+          }
+        });
+      });
+    }), this._menuChanged$.next(), toDisposable(() => {
+      if (this._menuItemMap.delete(item.id), Array.isArray(item.positions))
+        item.positions.forEach((menu) => {
+          const menus = this._menuByPositions.get(menu);
+          if (!menus)
+            return;
+          const index = menus.findIndex((m2) => m2[0] === item.id);
+          index > -1 && menus.splice(index, 1);
+        });
+      else if (item.positions) {
+        const menus = this._menuByPositions.get(item.positions);
+        if (!menus)
+          return;
+        const index = menus.findIndex((m2) => m2[0] === item.id);
+        index > -1 && menus.splice(index, 1);
+      }
+      this._menuChanged$.next();
+    });
+  }
+  /** @deprecated */
+  getMenuItems(positions) {
+    if (this._logService.warn("[MenuService]: MenuService is deprecated, please use MenuManagerService instead."), this._menuByPositions.has(positions)) {
+      const menuItems = this._menuByPositions.get(positions);
+      if (menuItems)
+        return [...menuItems.values()].map((menu) => this._getDisplayMenuItems(menu[1]));
+    }
+    return [];
+  }
+  /** @deprecated */
+  setMenuItem(item) {
+    this._logService.warn("[MenuService]: MenuService is deprecated, please use MenuManagerService instead."), this._menuItemMap.set(item.id, item), Array.isArray(item.positions) ? item.positions.forEach((menu) => this._updateMenuItems(item, menu)) : item.positions && this._updateMenuItems(item, item.positions), this._menuChanged$.next();
+  }
+  /** @deprecated */
+  getMenuItem(id) {
+    return this._logService.warn("[MenuService]: MenuService is deprecated, please use MenuManagerService instead."), this._menuItemMap.has(id) ? this._menuItemMap.get(id) : null;
+  }
+  /** @deprecated */
+  setMenuConfigs(id, config) {
+    this._logService.warn("[MenuService]: MenuService is deprecated, please use MenuManagerService instead."), this._menuConfigs.set(id, config);
+  }
+  /** @deprecated */
+  getMenuConfig(id) {
+    return this._logService.warn("[MenuService]: MenuService is deprecated, please use MenuManagerService instead."), this._menuConfigs.has(id) ? this._menuConfigs.get(id) : null;
+  }
+  /** @deprecated */
+  _getDisplayMenuItems(menuItem) {
+    this._logService.warn("[MenuService]: MenuService is deprecated, please use MenuManagerService instead.");
+    const shortcut = this._shortcutService.getShortcutDisplayOfCommand(menuItem.id);
+    return shortcut ? {
+      ...menuItem,
+      shortcut
+    } : menuItem;
+  }
+  /** @deprecated */
+  _appendMenuToPosition(menu, position) {
+    this._logService.warn("[MenuService]: MenuService is deprecated, please use MenuManagerService instead."), this._menuByPositions.has(position) || this._menuByPositions.set(position, []);
+    const menuList = this._menuByPositions.get(position);
+    if (menuList.findIndex((m2) => m2[0] === menu.id) > -1)
+      throw new Error(`Menu item with the same id ${menu.id} has already been added!`);
+    menuList.push([menu.id, menu]);
+  }
+  /** @deprecated */
+  _updateMenuItems(menu, position) {
+    this._logService.warn("[MenuService]: MenuService is deprecated, please use MenuManagerService instead."), this._menuByPositions.has(position) || this._menuByPositions.set(position, []);
+    const menuList = this._menuByPositions.get(position), index = menuList.findIndex((m2) => m2[0] === menu.id);
+    index > -1 ? menuList[index] = [menu.id, menu] : menuList.push([menu.id, menu]);
+  }
+}, __name(_a5, "MenuService"), _a5);
+MenuService = __decorateClass$d([
+  __decorateParam$d(0, IShortcutService),
+  __decorateParam$d(1, IMenuManagerService),
+  __decorateParam$d(2, ILogService)
+], MenuService);
 function useSimpleToolbarGroups(category) {
   const menuService = useDependency(IMenuService), [visibleItems, setVisibleItems] = useState([]);
   return useEffect(() => {
@@ -3533,13 +3694,13 @@ __name(useSimpleToolbarGroups, "useSimpleToolbarGroups");
 function useToolbarGroups(categories, initCategory) {
   const menuService = useDependency(IMenuService), [category, setCategory] = useState(initCategory != null ? initCategory : MenuPosition.TOOLBAR_START), [groups, setGroups] = useState([]), [visibleItems, setVisibleItems] = useState([]);
   useEffect(() => {
-    var _a18, _b2;
-    const activeItems = (_b2 = (_a18 = groups.find((g2) => g2.name === category)) == null ? void 0 : _a18.menuItems) != null ? _b2 : [], s = combineLatest(
+    var _a19, _b2;
+    const activeItems = (_b2 = (_a19 = groups.find((g2) => g2.name === category)) == null ? void 0 : _a19.menuItems) != null ? _b2 : [], s = combineLatest(
       activeItems.map((item) => {
-        var _a19;
-        return (_a19 = item.hidden$) != null ? _a19 : new Observable((observer) => observer.next(!1));
+        var _a20;
+        return (_a20 = item.hidden$) != null ? _a20 : new Observable((observer) => observer.next(!1));
       })
-    ).pipe(map$1((hiddenValues) => activeItems.filter((_, index) => !hiddenValues[index]))).subscribe((items) => setVisibleItems(items));
+    ).pipe(map((hiddenValues) => activeItems.filter((_, index) => !hiddenValues[index]))).subscribe((items) => setVisibleItems(items));
     return () => s.unsubscribe();
   }, [groups, category]), useEffect(() => {
     const s = menuService.menuChanged$.subscribe(() => {
@@ -3553,11 +3714,11 @@ function useToolbarGroups(categories, initCategory) {
     return () => s.unsubscribe();
   }, [menuService, category, categories]);
   const groupsByKey = useMemo(() => {
-    var _a18, _b2;
-    return (_b2 = (_a18 = groups.find((g2) => g2.name === category)) == null ? void 0 : _a18.menuItems.reduce(
+    var _a19, _b2;
+    return (_b2 = (_a19 = groups.find((g2) => g2.name === category)) == null ? void 0 : _a19.menuItems.reduce(
       (acc, item) => {
-        var _a19;
-        const key = (_a19 = item.group) != null ? _a19 : MenuGroup.TOOLBAR_OTHERS;
+        var _a20;
+        const key = (_a20 = item.group) != null ? _a20 : MenuGroup.TOOLBAR_OTHERS;
         return acc[key] || (acc[key] = []), acc[key].push(item), acc;
       },
       {}
@@ -3574,69 +3735,91 @@ function useToolbarGroups(categories, initCategory) {
 __name(useToolbarGroups, "useToolbarGroups");
 function useToolbarItemStatus(menuItem) {
   const { disabled$, hidden$, activated$, value$ } = menuItem, [value, setValue] = useState(), [disabled, setDisabled] = useState(!1), [activated, setActivated] = useState(!1), [hidden, setHidden] = useState(!1);
-  return useEffect(() => {
-    const subscriptions = [];
-    return disabled$ && subscriptions.push(disabled$.subscribe((disabled2) => setDisabled(disabled2))), hidden$ && subscriptions.push(hidden$.subscribe((hidden2) => setHidden(hidden2))), activated$ && subscriptions.push(activated$.subscribe((activated2) => setActivated(activated2))), value$ && subscriptions.push(value$.subscribe((value2) => setValue(value2))), () => subscriptions.forEach((subscription) => subscription.unsubscribe());
-  }, [activated$, disabled$, hidden$, value$]), { disabled, value, activated, hidden };
-}
-__name(useToolbarItemStatus, "useToolbarItemStatus");
-function useToolbarCollapseObserver(visibleItems) {
-  const toolbarItemRefs = useRef({}), toolbarRef = useRef(null), [collapsedId, setCollapsedId] = useState([]);
-  return useEffect(() => {
-    function resize() {
-      var _a18, _b2;
-      const wrapperWidth = (_b2 = (_a18 = toolbarRef.current) == null ? void 0 : _a18.clientWidth) != null ? _b2 : 0;
-      let GAP = 0;
-      if (toolbarRef.current) {
-        const gapValue = Number.parseInt(getComputedStyle(toolbarRef.current.firstElementChild).gap, 10);
-        GAP = Number.isNaN(gapValue) ? 0 : gapValue;
-      }
-      const itemWidths = Object.entries(toolbarItemRefs.current).filter(([_, ref]) => ref.el && ref.key && visibleItems.find((item) => item.id === ref.key)).map(([_, ref]) => {
-        var _a19;
-        return {
-          key: ref.key,
-          width: ((_a19 = ref.el) == null ? void 0 : _a19.clientWidth) + GAP
-        };
-      }), collapsedId2 = [];
-      let currentWidth = 182;
-      for (const item of itemWidths)
-        currentWidth += item.width, currentWidth > wrapperWidth && collapsedId2.push(item.key);
-      setCollapsedId(collapsedId2);
-    }
-    __name(resize, "resize"), resize();
-    const observer = new ResizeObserver(() => resize()), toolbarDom = toolbarRef.current;
-    return toolbarDom && observer.observe(toolbarDom), () => {
-      toolbarDom && observer.unobserve(toolbarDom);
-    };
-  }, [visibleItems]), {
-    toolbarRef,
-    toolbarItemRefs,
-    collapsedId
-  };
+  return useEffect(() => {
+    const subscriptions = [];
+    return disabled$ && subscriptions.push(disabled$.subscribe((disabled2) => setDisabled(disabled2))), hidden$ && subscriptions.push(hidden$.subscribe((hidden2) => setHidden(hidden2))), activated$ && subscriptions.push(activated$.subscribe((activated2) => setActivated(activated2))), value$ && subscriptions.push(value$.subscribe((value2) => setValue(value2))), () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }, [activated$, disabled$, hidden$, value$]), { disabled, value, activated, hidden };
 }
-__name(useToolbarCollapseObserver, "useToolbarCollapseObserver");
-const ToolbarItem = forwardRef((props, ref) => {
-  const localeService = useDependency(LocaleService), commandService = useDependency(ICommandService), layoutService = useDependency(ILayoutService), componentManager = useDependency(ComponentManager), [tooltipVisible, setTooltipVisible] = useState(!1), [dropdownVisible, setDropdownVisible] = useState(!1), { value, hidden, disabled, activated } = useToolbarItemStatus(props), executeCommand = /* @__PURE__ */ __name((commandId2, params) => {
-    layoutService.focus(), commandService.executeCommand(commandId2, params);
-  }, "executeCommand");
+__name(useToolbarItemStatus, "useToolbarItemStatus");
+const TooltipWrapperContext = createContext({
+  dropdownVisible: !1,
+  setDropdownVisible: /* @__PURE__ */ __name((_visible) => {
+  }, "setDropdownVisible")
+}), TooltipWrapper = forwardRef((props, ref) => {
+  const { children, ...tooltipProps } = props, [tooltipVisible, setTooltipVisible] = useState(!1), [dropdownVisible, setDropdownVisible] = useState(!1);
+  function handleChangeTooltipVisible(visible) {
+    setTooltipVisible(dropdownVisible ? !1 : visible);
+  }
+  __name(handleChangeTooltipVisible, "handleChangeTooltipVisible");
+  function handleChangeDropdownVisible(visible) {
+    setDropdownVisible(visible), setTooltipVisible(!1);
+  }
+  __name(handleChangeDropdownVisible, "handleChangeDropdownVisible");
+  const contextValue = useMemo(() => ({
+    dropdownVisible,
+    setDropdownVisible: handleChangeDropdownVisible
+  }), [dropdownVisible]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Tooltip,
+    {
+      ref,
+      ...tooltipProps,
+      visible: tooltipVisible,
+      onVisibleChange: handleChangeTooltipVisible,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipWrapperContext.Provider, { value: contextValue, children }) })
+    }
+  );
+});
+function DropdownWrapper(props) {
+  const { children, ...dropdownProps } = props, { setDropdownVisible } = useContext(TooltipWrapperContext);
   function handleVisibleChange(visible) {
-    setTooltipVisible(visible);
-  }
-  __name(handleVisibleChange, "handleVisibleChange");
-  function handleDropdownVisibleChange(visible) {
-    setDropdownVisible(visible), visible || setTooltipVisible(!1);
+    setDropdownVisible(visible);
   }
-  __name(handleDropdownVisibleChange, "handleDropdownVisibleChange");
-  const { tooltip, shortcut, icon, title, label, id, commandId } = props, tooltipTitle = localeService.t(tooltip != null ? tooltip : "") + (shortcut ? ` (${shortcut})` : ""), { selections } = props, selections$ = useMemo(() => isObservable(selections) ? selections : new Observable((subscribe) => {
+  return __name(handleVisibleChange, "handleVisibleChange"), /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Dropdown,
+    {
+      onVisibleChange: handleVisibleChange,
+      ...dropdownProps,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: /* @__PURE__ */ __name((e2) => e2.stopPropagation(), "onClick"), children })
+    }
+  );
+}
+__name(DropdownWrapper, "DropdownWrapper");
+const headerbar = "univer-headerbar", headerMenu = "univer-header-menu", menubar = "univer-menubar", menubarItem = "univer-menubar-item", menubarItemActive = "univer-menubar-item-active", toolbar = "univer-toolbar", toolbarContainer = "univer-toolbar-container", toolbarMore = "univer-toolbar-more", toolbarMoreContainer = "univer-toolbar-more-container", toolbarGroup = "univer-toolbar-group", toolbarItemSelectButton = "univer-toolbar-item-select-button", toolbarItemSelectButtonDisabled = "univer-toolbar-item-select-button-disabled", toolbarItemSelectButtonActivated = "univer-toolbar-item-select-button-activated", toolbarItemSelectButtonLabel = "univer-toolbar-item-select-button-label", toolbarItemSelectButtonArrow = "univer-toolbar-item-select-button-arrow", toolbarItemSelect = "univer-toolbar-item-select", toolbarItemSelectDisabled = "univer-toolbar-item-select-disabled", toolbarItemSelectActivated = "univer-toolbar-item-select-activated", toolbarItemSelectArrow = "univer-toolbar-item-select-arrow", toolbarItemSelectArrowDisabled = "univer-toolbar-item-select-arrow-disabled", toolbarItemSelectArrowActivated = "univer-toolbar-item-select-arrow-activated", styles$b = {
+  headerbar,
+  headerMenu,
+  menubar,
+  menubarItem,
+  menubarItemActive,
+  toolbar,
+  toolbarContainer,
+  toolbarMore,
+  toolbarMoreContainer,
+  toolbarGroup,
+  toolbarItemSelectButton,
+  toolbarItemSelectButtonDisabled,
+  toolbarItemSelectButtonActivated,
+  toolbarItemSelectButtonLabel,
+  toolbarItemSelectButtonArrow,
+  toolbarItemSelect,
+  toolbarItemSelectDisabled,
+  toolbarItemSelectActivated,
+  toolbarItemSelectArrow,
+  toolbarItemSelectArrowDisabled,
+  toolbarItemSelectArrowActivated
+}, ToolbarItem = forwardRef((props, ref) => {
+  const { align } = props, localeService = useDependency(LocaleService), commandService = useDependency(ICommandService), layoutService = useDependency(ILayoutService), componentManager = useDependency(ComponentManager), { value, hidden, disabled, activated } = useToolbarItemStatus(props), executeCommand = /* @__PURE__ */ __name((commandId2, params) => {
+    layoutService.focus(), commandService.executeCommand(commandId2, params);
+  }, "executeCommand"), { tooltip, shortcut, icon, title, label, id, commandId } = props, tooltipTitle = localeService.t(tooltip != null ? tooltip : "") + (shortcut ? ` (${shortcut})` : ""), { selections } = props, selections$ = useMemo(() => isObservable(selections) ? selections : new Observable((subscribe) => {
     subscribe.next(selections);
   }), [selections]), options = useObservable(selections$), icon$ = useMemo(() => isObservable(icon) ? icon : new Observable((subscribe) => {
-    var _a18, _b2;
-    const v2 = (_b2 = (_a18 = options == null ? void 0 : options.find((o) => o.value === value)) == null ? void 0 : _a18.icon) != null ? _b2 : icon;
+    var _a19, _b2;
+    const v2 = (_b2 = (_a19 = options == null ? void 0 : options.find((o) => o.value === value)) == null ? void 0 : _a19.icon) != null ? _b2 : icon;
     subscribe.next(v2);
   }), [icon, options, value]), iconToDisplay = useObservable(icon$, void 0, !0);
   function renderSelectorType(menuType) {
-    var _a18;
-    const selectionsCommandId = props.selectionsCommandId, bId = commandId != null ? commandId : id, sId = (_a18 = selectionsCommandId != null ? selectionsCommandId : commandId) != null ? _a18 : id;
+    var _a19;
+    const selectionsCommandId = props.selectionsCommandId, bId = commandId != null ? commandId : id, sId = (_a19 = selectionsCommandId != null ? selectionsCommandId : commandId) != null ? _a19 : id;
     function handleSelect(option) {
       if (disabled) return;
       let commandId2 = sId;
@@ -3650,111 +3833,120 @@ const ToolbarItem = forwardRef((props, ref) => {
     function handleClick() {
       disabled || menuType === MenuItemType.BUTTON_SELECTOR && executeCommand(bId, { value });
     }
-    return __name(handleClick, "handleClick"), menuType === MenuItemType.BUTTON_SELECTOR ? (
-      // Button Selector
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: clsx$1(styles$b.toolbarItemSelectButton, {
-            [styles$b.toolbarItemSelectButtonDisabled]: disabled,
-            [styles$b.toolbarItemSelectButtonActivated]: activated
-          }),
-          "data-disabled": disabled,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.toolbarItemSelectButtonLabel, onClick: handleClick, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              CustomLabel,
-              {
-                icon: iconToDisplay,
-                title,
-                value,
-                label,
-                onChange: handleSelectionsValueChange
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Dropdown,
-              {
-                overlay: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu, { overViewport: "scroll", menuType: id, options, onOptionSelect: handleSelect, value }),
-                onVisibleChange: handleDropdownVisibleChange,
-                disabled,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: clsx$1(styles$b.toolbarItemSelectButtonArrow, {
-                      [styles$b.toolbarItemSelectButtonArrowDisabled]: disabled,
-                      [styles$b.toolbarItemSelectButtonArrowActivated]: activated
-                    }),
-                    "data-disabled": disabled,
-                    onClick: /* @__PURE__ */ __name((e2) => e2.stopPropagation(), "onClick"),
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreDownSingle, {})
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    ) : (
-      // Selector
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Dropdown,
-        {
-          overlay: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu, { overViewport: "scroll", menuType: id, options, onOptionSelect: handleSelect, value }),
-          onVisibleChange: handleDropdownVisibleChange,
-          disabled,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
+    return __name(handleClick, "handleClick"), menuType === MenuItemType.BUTTON_SELECTOR ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: clsx$1(styles$b.toolbarItemSelectButton, {
+          [styles$b.toolbarItemSelectButtonDisabled]: disabled,
+          [styles$b.toolbarItemSelectButtonActivated]: activated
+        }),
+        "data-disabled": disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.toolbarItemSelectButtonLabel, onClick: handleClick, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CustomLabel,
             {
-              className: clsx$1(styles$b.toolbarItemSelect, {
-                [styles$b.toolbarItemSelectDisabled]: disabled,
-                [styles$b.toolbarItemSelectActivated]: activated
-              }),
-              onClick: /* @__PURE__ */ __name((e2) => e2.stopPropagation(), "onClick"),
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  CustomLabel,
-                  {
-                    icon: iconToDisplay,
-                    title,
-                    value,
-                    label,
-                    onChange: handleSelectionsValueChange
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: clsx$1(styles$b.toolbarItemSelectArrow, {
-                      [styles$b.toolbarItemSelectArrowDisabled]: disabled
-                    }),
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreDownSingle, {})
-                  }
-                )
-              ]
+              icon: iconToDisplay,
+              title,
+              value,
+              label,
+              onChange: handleSelectionsValueChange
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DropdownWrapper,
+            {
+              align: align != null ? align : {
+                targetOffset: [32, -12]
+              },
+              overlay: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Menu,
+                {
+                  overViewport: "scroll",
+                  menuType: id,
+                  options,
+                  onOptionSelect: handleSelect,
+                  value
+                }
+              ),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: clsx$1(styles$b.toolbarItemSelectButtonArrow, {
+                    [styles$b.toolbarItemSelectButtonArrowDisabled]: disabled,
+                    [styles$b.toolbarItemSelectButtonArrowActivated]: activated
+                  }),
+                  "data-disabled": disabled,
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreDownSingle, { style: { height: "100%" } })
+                }
+              )
             }
           )
-        }
-      )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      DropdownWrapper,
+      {
+        overlay: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Menu,
+          {
+            overViewport: "scroll",
+            menuType: id,
+            options,
+            onOptionSelect: handleSelect,
+            value
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: clsx$1(styles$b.toolbarItemSelect, {
+              [styles$b.toolbarItemSelectDisabled]: disabled,
+              [styles$b.toolbarItemSelectActivated]: activated
+            }),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                CustomLabel,
+                {
+                  icon: iconToDisplay,
+                  title,
+                  value,
+                  label,
+                  onChange: handleSelectionsValueChange
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: clsx$1(styles$b.toolbarItemSelectArrow, {
+                    [styles$b.toolbarItemSelectArrowDisabled]: disabled
+                  }),
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreDownSingle, {})
+                }
+              )
+            ]
+          }
+        )
+      }
     );
   }
   __name(renderSelectorType, "renderSelectorType");
   function renderButtonType() {
-    var _a18;
-    const isCustomComponent = componentManager.get(typeof label == "string" ? label : (_a18 = label == null ? void 0 : label.name) != null ? _a18 : "");
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    var _a19;
+    const isCustomComponent = componentManager.get(typeof label == "string" ? label : (_a19 = label == null ? void 0 : label.name) != null ? _a19 : "");
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       ToolbarButton,
       {
         className: styles$b.toolbarItemTextButton,
         active: activated,
         disabled,
         onClick: /* @__PURE__ */ __name(() => {
-          var _a19;
-          return executeCommand((_a19 = props.commandId) != null ? _a19 : props.id);
+          var _a20;
+          return executeCommand((_a20 = props.commandId) != null ? _a20 : props.id);
         }, "onClick"),
         onDoubleClick: /* @__PURE__ */ __name(() => props.subId && executeCommand(props.subId), "onDoubleClick"),
         children: isCustomComponent ? /* @__PURE__ */ jsxRuntimeExports.jsx(CustomLabel, { title, value, label }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CustomLabel, { icon })
       }
-    );
+    ) });
   }
   __name(renderButtonType, "renderButtonType");
   function renderItem() {
@@ -3768,91 +3960,115 @@ const ToolbarItem = forwardRef((props, ref) => {
         return renderButtonType();
     }
   }
-  return __name(renderItem, "renderItem"), hidden ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Tooltip,
-    {
-      ref,
-      visible: dropdownVisible ? !1 : tooltipVisible,
-      title: tooltipTitle,
-      placement: "bottom",
-      onVisibleChange: handleVisibleChange,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: renderItem() })
+  return __name(renderItem, "renderItem"), !hidden && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipWrapper, { ref, title: tooltipTitle, placement: "bottom", children: renderItem() });
+});
+function Ribbon(props) {
+  const { headerMenuComponents } = props, menuManagerService = useDependency(IMenuManagerService), localeService = useDependency(LocaleService), toolbarRef = useRef(null), toolbarItemRefs = useRef({}), [ribbon, setRibbon] = useState([]), [category, setCategory] = useState(RibbonPosition.START), [collapsedIds, setCollapsedIds] = useState([]);
+  useEffect(() => {
+    function getRibbon() {
+      const ribbon2 = menuManagerService.getMenuByPositionKey(MenuManagerPosition.RIBBON);
+      setRibbon(ribbon2);
     }
-  );
-}), MENU_POSITIONS = [
-  MenuPosition.TOOLBAR_START,
-  MenuPosition.TOOLBAR_INSERT,
-  MenuPosition.TOOLBAR_FORMULAS,
-  MenuPosition.TOOLBAR_DATA,
-  MenuPosition.TOOLBAR_VIEW,
-  MenuPosition.TOOLBAR_OTHERS
-];
-function Toolbar(props) {
-  const { headerMenuComponents } = props, localeService = useDependency(LocaleService), { setCategory, visibleItems, groups, category, groupsByKey } = useToolbarGroups(MENU_POSITIONS), { toolbarItemRefs, toolbarRef, collapsedId } = useToolbarCollapseObserver(visibleItems), hasHeaderMenu = useMemo(() => headerMenuComponents && headerMenuComponents.size > 0 || groups.length > 1, [headerMenuComponents, groups]);
+    __name(getRibbon, "getRibbon"), getRibbon();
+    const subscription = menuManagerService.menuChanged$.subscribe(getRibbon);
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [menuManagerService]), useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      const toolbarWidth = entries[0].target.clientWidth, toolbarItems = Object.values(toolbarItemRefs.current), collapsedIds2 = [];
+      let totalWidth = 90;
+      for (const { el, key } of toolbarItems)
+        el && (totalWidth += el.clientWidth + 8, totalWidth > toolbarWidth && collapsedIds2.push(key));
+      setCollapsedIds(collapsedIds2);
+    });
+    return toolbarRef.current && observer.observe(toolbarRef.current), () => {
+      observer.disconnect();
+    };
+  }, [ribbon]);
+  const hasHeaderMenu = useMemo(() => headerMenuComponents && headerMenuComponents.size > 0 || ribbon.length > 1, [headerMenuComponents, ribbon]), activeGroup = useMemo(() => {
+    var _a19, _b2;
+    const allGroups = (_b2 = (_a19 = ribbon.find((group) => group.key === category)) == null ? void 0 : _a19.children) != null ? _b2 : [], visibleGroups = [], hiddenGroups = [];
+    for (const item of allGroups)
+      if (item.children) {
+        const visibleChildren = item.children.filter((child) => !collapsedIds.includes(child.key));
+        visibleGroups.push({ ...item, children: visibleChildren }), visibleChildren.length < item.children.length && hiddenGroups.push({ ...item, children: item.children.filter((child) => collapsedIds.includes(child.key)) });
+      }
+    return {
+      allGroups,
+      visibleGroups,
+      hiddenGroups
+    };
+  }, [ribbon, category, collapsedIds]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    hasHeaderMenu ? /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: styles$b.headerbar, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.menubar, children: groups.length > 1 && groups.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    hasHeaderMenu && /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: styles$b.headerbar, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.menubar, children: ribbon.length > 1 && ribbon.map((group) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         "a",
         {
           className: clsx$1(styles$b.menubarItem, {
-            [styles$b.menubarItemActive]: item.name === category
+            [styles$b.menubarItemActive]: group.key === category
           }),
           onClick: /* @__PURE__ */ __name(() => {
-            setCategory(item.name);
+            setCategory(group.key);
           }, "onClick"),
-          children: localeService.t(item.name)
+          children: localeService.t(group.key)
         },
-        index
+        group.key
       )) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.headerMenu, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ComponentContainer, { components: headerMenuComponents }) })
-    ] }) : null,
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: toolbarRef, className: styles$b.toolbar, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b.toolbarContainer, children: [
-      Object.entries(groupsByKey).filter(([_, item]) => item.filter((subItem) => !collapsedId.includes(subItem.id)).length).map(([key, item]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.toolbarGroup, children: item.map(
-        (subItem) => !collapsedId.includes(subItem.id) && /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarItem, { ...subItem }, subItem.id)
-      ) }, key)),
-      collapsedId.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: localeService.t("more"), placement: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Dropdown,
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("section", { role: "ribbon", className: styles$b.toolbar, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b.toolbarContainer, children: [
+      activeGroup.visibleGroups.map((groupItem) => {
+        var _a19, _b2;
+        return (((_a19 = groupItem.children) == null ? void 0 : _a19.length) || groupItem.item) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.toolbarGroup, children: groupItem.children ? (_b2 = groupItem.children) == null ? void 0 : _b2.map((child) => child.item && /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarItem, { ...child.item }, child.key)) : groupItem.item && /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarItem, { ...groupItem.item }, groupItem.key) }, groupItem.key);
+      }),
+      collapsedIds.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipWrapper, { title: localeService.t("ribbon.more"), placement: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DropdownWrapper,
         {
           forceRender: !0,
-          className: styles$b.toolbarMore,
-          overlay: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.toolbarMoreContainer, children: Object.entries(groupsByKey).map(([key, item]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.toolbarGroup, children: item.map(
-            (subItem) => collapsedId.includes(subItem.id) && /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarItem, { ...subItem }, subItem.id)
-          ) }, key)) }),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { className: styles$b.toolbarItemTextButton, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreFunctionSingle, {}) }) })
+          overlay: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.toolbarMoreContainer, children: activeGroup.hiddenGroups.map((groupItem) => {
+            var _a19;
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.toolbarGroup, children: groupItem.children ? (_a19 = groupItem.children) == null ? void 0 : _a19.map((child) => child.item && /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarItem, { ...child.item }, child.key)) : groupItem.item && /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarItem, { ...groupItem.item }, groupItem.key) }, groupItem.key);
+          }) }),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { className: styles$b.toolbarItemTextButton, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreFunctionSingle, {}) })
         }
-      ) }) })
+      ) })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
+        ref: toolbarRef,
         className: styles$b.toolbarContainer,
         style: {
           position: "absolute",
           top: -9999,
           left: -9999,
           opacity: 0
+          // top: 0,
+          // left: 0,
+          // opacity: 1,
         },
-        children: Object.entries(groupsByKey).map(([key, item]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.toolbarGroup, children: item.map((subItem) => (
-          // TODO@jikkai: use fake ToolbarItem (no business logic) to improve performance.
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
+        children: activeGroup.allGroups.map((groupItem) => {
+          var _a19;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.toolbarGroup, children: (_a19 = groupItem.children) == null ? void 0 : _a19.map((child) => child.item && /* @__PURE__ */ jsxRuntimeExports.jsx(
             ToolbarItem,
             {
               ref: /* @__PURE__ */ __name((ref) => {
-                toolbarItemRefs.current[subItem.id] = {
+                toolbarItemRefs.current[child.key] = {
                   el: ref == null ? void 0 : ref.nativeElement,
-                  key: subItem.id
+                  key: child.key
                 };
               }, "ref"),
-              ...subItem
+              ...child.item
             },
-            subItem.id
-          )
-        )) }, key))
+            child.key
+          )) }, groupItem.key);
+        })
       }
     )
   ] });
 }
-__name(Toolbar, "Toolbar");
+__name(Ribbon, "Ribbon");
 const ILeftSidebarService = createIdentifier("ui.left-sidebar.service"), ISidebarService = createIdentifier("ui.sidebar.service"), sidebar = "univer-sidebar", sidebarOpen = "univer-sidebar-open", sidebarContainer = "univer-sidebar-container", sidebarHeader = "univer-sidebar-header", sidebarHeaderClose = "univer-sidebar-header-close", sidebarBody = "univer-sidebar-body", sidebarFooter = "univer-sidebar-footer", styles$a = {
   sidebar,
   sidebarOpen,
@@ -3888,12 +4104,12 @@ function Sidebar() {
     [styles$a.sidebarOpen]: options == null ? void 0 : options.visible
   }), width = useMemo(() => options != null && options.visible ? typeof options.width == "number" ? `${options.width}px` : options.width : 0, [options]);
   function handleClose() {
-    var _a18;
+    var _a19;
     const options2 = {
       ...sidebarOptions,
       visible: !1
     };
-    sidebarService.sidebarOptions$.next(options2), (_a18 = options2 == null ? void 0 : options2.onClose) == null || _a18.call(options2);
+    sidebarService.sidebarOptions$.next(options2), (_a19 = options2 == null ? void 0 : options2.onClose) == null || _a19.call(options2);
   }
   return __name(handleClose, "handleClose"), /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: _className, style: { width }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: styles$a.sidebarContainer, ref: scrollRef, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: styles$a.sidebarHeader, children: [
@@ -3996,7 +4212,7 @@ function DesktopWorkbench(props) {
     };
   }, [localeService, messageService, mountContainer, portalContainer, themeService.currentTheme$]), /* @__PURE__ */ jsxRuntimeExports.jsxs(ConfigProvider, { locale: locale == null ? void 0 : locale.design, mountContainer: portalContainer, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$7.workbenchLayout, tabIndex: -1, onBlur: /* @__PURE__ */ __name((e2) => e2.stopPropagation(), "onBlur"), children: [
-      header && toolbar2 && /* @__PURE__ */ jsxRuntimeExports.jsx("header", { className: styles$7.workbenchContainerHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Toolbar, { headerMenuComponents }) }),
+      header && toolbar2 && /* @__PURE__ */ jsxRuntimeExports.jsx("header", { className: styles$7.workbenchContainerHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Ribbon, { headerMenuComponents }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: styles$7.workbenchContainer, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$7.workbenchContainerWrapper, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: styles$7.workbenchContainerLeftSidebar, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar") }),
@@ -4031,22 +4247,112 @@ function FloatingContainer() {
   return createPortal(/* @__PURE__ */ jsxRuntimeExports.jsx(ComponentContainer, { components: floatingComponents }, "floating"), mountContainer);
 }
 __name(FloatingContainer, "FloatingContainer");
+const _ShortcutPanelService = class _ShortcutPanelService extends Disposable {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "_open$", new BehaviorSubject(!1));
+    __publicField(this, "open$", this._open$.pipe(distinctUntilChanged()));
+  }
+  get isOpen() {
+    return this._open$.getValue();
+  }
+  dispose() {
+    super.dispose(), this._open$.next(!1), this._open$.complete();
+  }
+  open() {
+    this._open$.next(!0);
+  }
+  close() {
+    this._open$.next(!1);
+  }
+};
+__name(_ShortcutPanelService, "ShortcutPanelService");
+let ShortcutPanelService = _ShortcutPanelService;
+const ShortcutPanelComponentName = "ShortcutPanel", ToggleShortcutPanelOperation = {
+  id: "base-ui.operation.toggle-shortcut-panel",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor) => {
+    const shortcutPanelService = accessor.get(ShortcutPanelService), sidebarService = accessor.get(ISidebarService);
+    return shortcutPanelService.isOpen ? (shortcutPanelService.close(), sidebarService.close()) : (shortcutPanelService.open(), sidebarService.open({
+      header: { title: "shortcut-panel.title" },
+      children: { label: ShortcutPanelComponentName }
+    })), !0;
+  }, "handler")
+};
+function ShortcutPanelMenuItemFactory(accessor) {
+  return {
+    id: ToggleShortcutPanelOperation.id,
+    title: "toggle-shortcut-panel",
+    tooltip: "toggle-shortcut-panel",
+    icon: "KeyboardSingle",
+    type: MenuItemType.BUTTON,
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET)
+    // disabled$: getCurrentSheetDisabled$(accessor),
+  };
+}
+__name(ShortcutPanelMenuItemFactory, "ShortcutPanelMenuItemFactory");
+function UndoMenuItemFactory(accessor) {
+  const undoRedoService = accessor.get(IUndoRedoService);
+  return {
+    id: UndoCommand.id,
+    type: MenuItemType.BUTTON,
+    icon: "UndoSingle",
+    title: "Undo",
+    tooltip: "toolbar.undo",
+    disabled$: undoRedoService.undoRedoStatus$.pipe(map$1((v2) => v2.undos <= 0))
+  };
+}
+__name(UndoMenuItemFactory, "UndoMenuItemFactory");
+function RedoMenuItemFactory(accessor) {
+  const undoRedoService = accessor.get(IUndoRedoService);
+  return {
+    id: RedoCommand.id,
+    type: MenuItemType.BUTTON,
+    icon: "RedoSingle",
+    title: "Redo",
+    tooltip: "toolbar.redo",
+    disabled$: undoRedoService.undoRedoStatus$.pipe(map$1((v2) => v2.redos <= 0))
+  };
+}
+__name(RedoMenuItemFactory, "RedoMenuItemFactory");
+const menuSchema = {
+  [RibbonStartGroup.HISTORY]: {
+    [UndoCommand.id]: {
+      order: 0,
+      menuItemFactory: UndoMenuItemFactory
+    },
+    [RedoCommand.id]: {
+      order: 1,
+      menuItemFactory: RedoMenuItemFactory
+    }
+  },
+  [RibbonStartGroup.OTHERS]: {
+    [ToggleShortcutPanelOperation.id]: {
+      order: 99,
+      menuItemFactory: ShortcutPanelMenuItemFactory
+    }
+  }
+};
 var __defProp$c = Object.defineProperty, __getOwnPropDesc$c = Object.getOwnPropertyDescriptor, __decorateClass$c = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$c(target, key, result), result;
 }, "__decorateClass$c"), __decorateParam$c = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$c");
 const STEADY_TIMEOUT$1 = 3e3;
-var _a5;
-let DesktopUIController = (_a5 = class extends Disposable {
-  constructor(_config, _renderManagerService, _instanceSrv, _injector, _lifecycleService, _uiPartsService, _configService, _layoutService) {
+var _a6;
+let DesktopUIController = (_a6 = class extends Disposable {
+  constructor(_config, _renderManagerService, _instanceSrv, _injector, _lifecycleService, _uiPartsService, _menuManagerService, _layoutService) {
     super();
     __publicField(this, "_steadyTimeout");
-    this._config = _config, this._renderManagerService = _renderManagerService, this._instanceSrv = _instanceSrv, this._injector = _injector, this._lifecycleService = _lifecycleService, this._uiPartsService = _uiPartsService, this._configService = _configService, this._layoutService = _layoutService, this._configService.setConfig(UI_CONFIG_KEY, this._config), this._initBuiltinComponents(), Promise.resolve().then(() => this._bootstrapWorkbench());
+    __publicField(this, "_renderTimeout");
+    this._config = _config, this._renderManagerService = _renderManagerService, this._instanceSrv = _instanceSrv, this._injector = _injector, this._lifecycleService = _lifecycleService, this._uiPartsService = _uiPartsService, this._menuManagerService = _menuManagerService, this._layoutService = _layoutService, this._initBuiltinComponents(), this._initMenus(), Promise.resolve().then(() => this._bootstrapWorkbench());
+  }
+  _initMenus() {
+    this._menuManagerService.mergeMenu(menuSchema);
   }
   _bootstrapWorkbench() {
-    this.disposeWithMe(this._instanceSrv.unitDisposed$.subscribe(() => {
-      clearTimeout(this._steadyTimeout);
+    this.disposeWithMe(this._instanceSrv.unitDisposed$.subscribe((_unit) => {
+      clearTimeout(this._renderTimeout), clearTimeout(this._steadyTimeout);
     })), this.disposeWithMe(
       bootstrap$1(this._injector, this._config, (contentElement, containerElement) => {
         this._layoutService && (this.disposeWithMe(this._layoutService.registerRootContainerElement(containerElement)), this.disposeWithMe(this._layoutService.registerContentElement(contentElement))), this._renderManagerService.currentRender$.subscribe((renderId) => {
@@ -4055,11 +4361,13 @@ let DesktopUIController = (_a5 = class extends Disposable {
             if (!render2.unitId || isInternalEditorID(render2.unitId)) return;
             render2.engine.setContainer(contentElement);
           }
-        }), setTimeout(() => {
+        }), this._renderTimeout = setTimeout(() => {
           const allRenders = this._renderManagerService.getRenderAll();
           for (const [key, render2] of allRenders)
             isInternalEditorID(key) || !render2.isRenderUnit || render2.engine.setContainer(contentElement);
-          this._lifecycleService.stage = LifecycleStages.Rendered, this._steadyTimeout = setTimeout(() => this._lifecycleService.stage = LifecycleStages.Steady, STEADY_TIMEOUT$1);
+          this._lifecycleService.stage = LifecycleStages.Rendered, this._steadyTimeout = setTimeout(() => {
+            this._lifecycleService.stage = LifecycleStages.Steady;
+          }, STEADY_TIMEOUT$1);
         }, 300);
       })
     );
@@ -4067,7 +4375,7 @@ let DesktopUIController = (_a5 = class extends Disposable {
   _initBuiltinComponents() {
     this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.FLOATING, () => connectInjector(CanvasPopup, this._injector))), this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(FloatDom, this._injector)));
   }
-}, __name(_a5, "DesktopUIController"), _a5);
+}, __name(_a6, "DesktopUIController"), _a6);
 DesktopUIController = __decorateClass$c([
   OnLifecycle(LifecycleStages.Ready, DesktopUIController),
   __decorateParam$c(1, IRenderManagerService),
@@ -4075,7 +4383,7 @@ DesktopUIController = __decorateClass$c([
   __decorateParam$c(3, Inject(Injector)),
   __decorateParam$c(4, Inject(LifecycleService)),
   __decorateParam$c(5, IUIPartsService),
-  __decorateParam$c(6, IConfigService),
+  __decorateParam$c(6, IMenuManagerService),
   __decorateParam$c(7, Optional(ILayoutService))
 ], DesktopUIController);
 function bootstrap$1(injector, options, callback) {
@@ -4116,8 +4424,8 @@ var __defProp$b = Object.defineProperty, __getOwnPropDesc$b = Object.getOwnPrope
   return kind && result && __defProp$b(target, key, result), result;
 }, "__decorateClass$b"), __decorateParam$b = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$b");
 const IBeforeCloseService = createIdentifier("univer.ui.before-close-service");
-var _a6;
-let DesktopBeforeCloseService = (_a6 = class {
+var _a7;
+let DesktopBeforeCloseService = (_a7 = class {
   constructor(_notificationService) {
     __publicField(this, "_beforeUnloadCallbacks", []);
     __publicField(this, "_onCloseCallbacks", []);
@@ -4152,7 +4460,7 @@ let DesktopBeforeCloseService = (_a6 = class {
       this._onCloseCallbacks.forEach((callback) => callback());
     });
   }
-}, __name(_a6, "DesktopBeforeCloseService"), _a6);
+}, __name(_a7, "DesktopBeforeCloseService"), _a7);
 DesktopBeforeCloseService = __decorateClass$b([
   __decorateParam$b(0, INotificationService)
 ], DesktopBeforeCloseService);
@@ -4168,8 +4476,8 @@ var __defProp$a = Object.defineProperty, __getOwnPropDesc$a = Object.getOwnPrope
 const PLAIN_TEXT_CLIPBOARD_MIME_TYPE = "text/plain", HTML_CLIPBOARD_MIME_TYPE = "text/html", IClipboardInterfaceService = createIdentifier(
   "univer.clipboard-interface-service"
 );
-var _a7;
-let BrowserClipboardService = (_a7 = class extends Disposable {
+var _a8;
+let BrowserClipboardService = (_a8 = class extends Disposable {
   constructor(_localeService, _logService, _notificationService) {
     super(), this._localeService = _localeService, this._logService = _logService, this._notificationService = _notificationService;
   }
@@ -4236,14 +4544,14 @@ let BrowserClipboardService = (_a7 = class extends Disposable {
     }
   }
   _showClipboardAuthenticationNotification() {
-    var _a18;
-    (_a18 = this._notificationService) == null || _a18.show({
+    var _a19;
+    (_a19 = this._notificationService) == null || _a19.show({
       type: "warning",
       title: this._localeService.t("clipboard.authentication.title"),
       content: this._localeService.t("clipboard.authentication.content")
     });
   }
-}, __name(_a7, "BrowserClipboardService"), _a7);
+}, __name(_a8, "BrowserClipboardService"), _a8);
 BrowserClipboardService = __decorateClass$a([
   __decorateParam$a(0, Inject(LocaleService)),
   __decorateParam$a(1, ILogService),
@@ -4300,8 +4608,8 @@ var __defProp$9 = Object.defineProperty, __getOwnPropDesc$9 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$9(target, key, result), result;
-}, "__decorateClass$9"), __decorateParam$9 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$9"), _a8;
-let DesktopConfirmService = (_a8 = class extends Disposable {
+}, "__decorateClass$9"), __decorateParam$9 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$9"), _a9;
+let DesktopConfirmService = (_a9 = class extends Disposable {
   constructor(_injector, _uiPartsService) {
     super();
     __publicField(this, "_confirmOptions", []);
@@ -4343,7 +4651,7 @@ let DesktopConfirmService = (_a8 = class extends Disposable {
       this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => connectInjector(ConfirmPart, this._injector))
     );
   }
-}, __name(_a8, "DesktopConfirmService"), _a8);
+}, __name(_a9, "DesktopConfirmService"), _a9);
 DesktopConfirmService = __decorateClass$9([
   __decorateParam$9(0, Inject(Injector)),
   __decorateParam$9(1, IUIPartsService)
@@ -4372,8 +4680,8 @@ var __defProp$8 = Object.defineProperty, __getOwnPropDesc$8 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$8(target, key, result), result;
-}, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$8"), _a9;
-let DesktopDialogService = (_a9 = class extends Disposable {
+}, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$8"), _a10;
+let DesktopDialogService = (_a10 = class extends Disposable {
   constructor(_injector, _uiPartsService) {
     super();
     __publicField(this, "_dialogOptions", []);
@@ -4415,7 +4723,7 @@ let DesktopDialogService = (_a9 = class extends Disposable {
       this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => connectInjector(DialogPart, this._injector))
     );
   }
-}, __name(_a9, "DesktopDialogService"), _a9);
+}, __name(_a10, "DesktopDialogService"), _a10);
 DesktopDialogService = __decorateClass$8([
   __decorateParam$8(0, Inject(Injector)),
   __decorateParam$8(1, IUIPartsService)
@@ -4427,8 +4735,8 @@ const _DesktopMessageService = class _DesktopMessageService {
     __publicField(this, "_message");
   }
   dispose() {
-    var _a18;
-    (_a18 = this._message) == null || _a18.dispose();
+    var _a19;
+    (_a19 = this._message) == null || _a19.dispose();
   }
   setContainer(container) {
     this._message || (this._portalContainer = container, this._message = new Message(container));
@@ -6225,7 +6533,7 @@ function Notification() {
   }), observerRef = useRef(notificationObserver);
   return useEffect(() => {
     const subscription = observerRef.current.subscribe((options) => {
-      var _a18, _b2, _c;
+      var _a19, _b2, _c;
       api.open({
         content: /* @__PURE__ */ jsxRuntimeExports.jsx(
           PureContent,
@@ -6237,7 +6545,7 @@ function Notification() {
           }
         ),
         key: options.key,
-        placement: (_a18 = options.placement) != null ? _a18 : "topRight",
+        placement: (_a19 = options.placement) != null ? _a19 : "topRight",
         duration: (_b2 = options.duration) != null ? _b2 : 4.5,
         closable: (_c = options.closable) != null ? _c : !0
       });
@@ -6257,8 +6565,8 @@ var __defProp$7 = Object.defineProperty, __getOwnPropDesc$7 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$7(target, key, result), result;
-}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7"), _a10;
-let DesktopNotificationService = (_a10 = class extends Disposable {
+}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7"), _a11;
+let DesktopNotificationService = (_a11 = class extends Disposable {
   constructor(_injector, _uiPartsService) {
     super(), this._injector = _injector, this._uiPartsService = _uiPartsService, this._initUIPart();
   }
@@ -6269,7 +6577,7 @@ let DesktopNotificationService = (_a10 = class extends Disposable {
   _initUIPart() {
     this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => connectInjector(Notification, this._injector)));
   }
-}, __name(_a10, "DesktopNotificationService"), _a10);
+}, __name(_a11, "DesktopNotificationService"), _a11);
 DesktopNotificationService = __decorateClass$7([
   __decorateParam$7(0, Inject(Injector)),
   __decorateParam$7(1, IUIPartsService)
@@ -6278,8 +6586,8 @@ var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$6(target, key, result), result;
-}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6"), _a11;
-let DesktopGlobalZoneService = (_a11 = class {
+}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6"), _a12;
+let DesktopGlobalZoneService = (_a12 = class {
   constructor(_componentManager) {
     __publicField(this, "visible$", new Subject());
     __publicField(this, "componentKey$", new Subject());
@@ -6300,7 +6608,7 @@ let DesktopGlobalZoneService = (_a11 = class {
   close() {
     this.visible$.next(!1);
   }
-}, __name(_a11, "DesktopGlobalZoneService"), _a11);
+}, __name(_a12, "DesktopGlobalZoneService"), _a12);
 DesktopGlobalZoneService = __decorateClass$6([
   __decorateParam$6(0, Inject(ComponentManager))
 ], DesktopGlobalZoneService);
@@ -6338,8 +6646,8 @@ var __defProp$5 = Object.defineProperty, __getOwnPropDesc$5 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$5(target, key, result), result;
-}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5"), _a12;
-let ErrorController = (_a12 = class extends Disposable {
+}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5"), _a13;
+let ErrorController = (_a13 = class extends Disposable {
   constructor(_errorService, _messageService) {
     super(), this._errorService = _errorService, this._messageService = _messageService, this.disposeWithMe(
       toDisposable(
@@ -6352,44 +6660,13 @@ let ErrorController = (_a12 = class extends Disposable {
       )
     );
   }
-}, __name(_a12, "ErrorController"), _a12);
+}, __name(_a13, "ErrorController"), _a13);
 ErrorController = __decorateClass$5([
   OnLifecycle(LifecycleStages.Starting, ErrorController),
   __decorateParam$5(0, Inject(ErrorService)),
   __decorateParam$5(1, IMessageService)
 ], ErrorController);
-const _ShortcutPanelService = class _ShortcutPanelService extends Disposable {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "_open$", new BehaviorSubject(!1));
-    __publicField(this, "open$", this._open$.pipe(distinctUntilChanged()));
-  }
-  get isOpen() {
-    return this._open$.getValue();
-  }
-  dispose() {
-    super.dispose(), this._open$.next(!1), this._open$.complete();
-  }
-  open() {
-    this._open$.next(!0);
-  }
-  close() {
-    this._open$.next(!1);
-  }
-};
-__name(_ShortcutPanelService, "ShortcutPanelService");
-let ShortcutPanelService = _ShortcutPanelService;
-const ShortcutPanelComponentName = "ShortcutPanel", ToggleShortcutPanelOperation = {
-  id: "base-ui.operation.toggle-shortcut-panel",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor) => {
-    const shortcutPanelService = accessor.get(ShortcutPanelService), sidebarService = accessor.get(ISidebarService);
-    return shortcutPanelService.isOpen ? (shortcutPanelService.close(), sidebarService.close()) : (shortcutPanelService.open(), sidebarService.open({
-      header: { title: "shortcut-panel.title" },
-      children: { label: ShortcutPanelComponentName }
-    })), !0;
-  }, "handler")
-}, shortcutPanelGroupTitle = "univer-shortcut-panel-group-title", shortcutPanelItem = "univer-shortcut-panel-item", shortcutPanelItemTitle = "univer-shortcut-panel-item-title", shortcutPanelItemShortcut = "univer-shortcut-panel-item-shortcut", styles$5 = {
+const shortcutPanelGroupTitle = "univer-shortcut-panel-group-title", shortcutPanelItem = "univer-shortcut-panel-item", shortcutPanelItemTitle = "univer-shortcut-panel-item-title", shortcutPanelItemShortcut = "univer-shortcut-panel-item-shortcut", styles$5 = {
   shortcutPanelGroupTitle,
   shortcutPanelItem,
   shortcutPanelItemTitle,
@@ -6397,11 +6674,11 @@ const ShortcutPanelComponentName = "ShortcutPanel", ToggleShortcutPanelOperation
 };
 function ShortcutPanel() {
   const shortcutService = useDependency(IShortcutService), localeService = useDependency(LocaleService), currentLocale = useObservable$1(localeService.currentLocale$), [shortcutItems, setShortcutItems] = React__default.useState([]), updateShortcuts = useCallback(() => {
-    var _a18;
+    var _a19;
     const shortcutGroups = /* @__PURE__ */ new Map(), shortcuts = shortcutService.getAllShortcuts().filter((item) => !!item.group);
     for (const shortcut of shortcuts) {
       const group = shortcut.group, shortcutItem = {
-        title: localeService.t((_a18 = shortcut.description) != null ? _a18 : shortcut.id),
+        title: localeService.t((_a19 = shortcut.description) != null ? _a19 : shortcut.id),
         shortcut: shortcutService.getShortcutDisplay(shortcut)
       };
       if (!/\d+_[a-zA-Z0-9]/.test(group))
@@ -6431,19 +6708,6 @@ function ShortcutPanel() {
   ] }, group.name)) });
 }
 __name(ShortcutPanel, "ShortcutPanel");
-function ShortcutPanelMenuItemFactory(accessor) {
-  return {
-    id: ToggleShortcutPanelOperation.id,
-    title: "toggle-shortcut-panel",
-    tooltip: "toggle-shortcut-panel",
-    icon: "KeyboardSingle",
-    type: MenuItemType.BUTTON,
-    positions: [MenuPosition.TOOLBAR_START],
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET)
-    // disabled$: getCurrentSheetDisabled$(accessor),
-  };
-}
-__name(ShortcutPanelMenuItemFactory, "ShortcutPanelMenuItemFactory");
 var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
@@ -6455,21 +6719,19 @@ const ToggleShortcutPanelShortcut = {
   description: "shortcut.shortcut-panel",
   group: "10_global-shortcut"
 };
-var _a13;
-let ShortcutPanelController = (_a13 = class extends Disposable {
-  constructor(_config, injector, componentManager, shortcutService, menuService, commandService) {
-    super(), this._config = _config;
-    const { menu = {} } = this._config;
-    this.disposeWithMe(menuService.addMenuItem(injector.invoke(ShortcutPanelMenuItemFactory), menu)), this.disposeWithMe(componentManager.register(ShortcutPanelComponentName, ShortcutPanel)), this.disposeWithMe(commandService.registerCommand(ToggleShortcutPanelOperation)), this.disposeWithMe(shortcutService.registerShortcut(ToggleShortcutPanelShortcut));
-  }
-}, __name(_a13, "ShortcutPanelController"), _a13);
+var _a14;
+let ShortcutPanelController = (_a14 = class extends Disposable {
+  constructor(injector, componentManager, shortcutService, _menuManagerService, commandService) {
+    super(), this._menuManagerService = _menuManagerService, this.disposeWithMe(componentManager.register(ShortcutPanelComponentName, ShortcutPanel)), this.disposeWithMe(commandService.registerCommand(ToggleShortcutPanelOperation)), this.disposeWithMe(shortcutService.registerShortcut(ToggleShortcutPanelShortcut));
+  }
+}, __name(_a14, "ShortcutPanelController"), _a14);
 ShortcutPanelController = __decorateClass$4([
   OnLifecycle(LifecycleStages.Steady, ShortcutPanelController),
-  __decorateParam$4(1, Inject(Injector)),
-  __decorateParam$4(2, Inject(ComponentManager)),
-  __decorateParam$4(3, IShortcutService),
-  __decorateParam$4(4, IMenuService),
-  __decorateParam$4(5, ICommandService)
+  __decorateParam$4(0, Inject(Injector)),
+  __decorateParam$4(1, Inject(ComponentManager)),
+  __decorateParam$4(2, IShortcutService),
+  __decorateParam$4(3, IMenuManagerService),
+  __decorateParam$4(4, ICommandService)
 ], ShortcutPanelController);
 function commonjsRequire(path) {
   throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
@@ -8031,8 +8293,8 @@ var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$3(target, key, result), result;
-}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a14;
-let DesktopZenZoneService = (_a14 = class {
+}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a15;
+let DesktopZenZoneService = (_a15 = class {
   constructor(_componentManager) {
     __publicField(this, "visible$", new Subject());
     __publicField(this, "componentKey$", new Subject());
@@ -8053,7 +8315,7 @@ let DesktopZenZoneService = (_a14 = class {
   close() {
     this._visible = !1, this.visible$.next(!1);
   }
-}, __name(_a14, "DesktopZenZoneService"), _a14);
+}, __name(_a15, "DesktopZenZoneService"), _a15);
 DesktopZenZoneService = __decorateClass$3([
   __decorateParam$3(0, Inject(ComponentManager))
 ], DesktopZenZoneService);
@@ -8131,17 +8393,19 @@ __name(_ProgressService, "ProgressService");
 let ProgressService = _ProgressService;
 const IProgressService = createIdentifier(
   "univer.progress.service"
-);
+), PLUGIN_CONFIG_KEY = "ui.config", defaultPluginConfig = {};
 var __defProp$2 = Object.defineProperty, __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor, __defNormalProp$1 = /* @__PURE__ */ __name((obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, "__defNormalProp$1"), __decorateClass$2 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$2(target, key, result), result;
 }, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$2"), __publicField$1 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp$1(obj, key + "", value), "__publicField$1");
 const UNIVER_UI_PLUGIN_NAME = "UNIVER_UI_PLUGIN", DISABLE_AUTO_FOCUS_KEY = "DISABLE_AUTO_FOCUS";
-var _a15;
-let UniverUIPlugin = (_a15 = class extends Plugin {
-  constructor(_config = {}, _contextService, _injector) {
-    super(), this._config = _config, this._contextService = _contextService, this._injector = _injector, this._config = Tools.deepMerge({}, this._config), this._config.disableAutoFocus && this._contextService.setContextValue(DISABLE_AUTO_FOCUS_KEY, !0);
+var _a16;
+let UniverUIPlugin = (_a16 = class extends Plugin {
+  constructor(_config = defaultPluginConfig, _contextService, _injector, _configService) {
+    super(), this._config = _config, this._contextService = _contextService, this._injector = _injector, this._configService = _configService;
+    const { menu, ...rest } = this._config;
+    rest.disableAutoFocus && this._contextService.setContextValue(DISABLE_AUTO_FOCUS_KEY, !0), menu && this._configService.setConfig("menu", menu, { merge: !0 }), this._configService.setConfig(PLUGIN_CONFIG_KEY, rest);
   }
   onStarting() {
     mergeOverrideWithDependencies([
@@ -8153,6 +8417,7 @@ let UniverUIPlugin = (_a15 = class extends Plugin {
       [IShortcutService, { useClass: ShortcutService }],
       [IPlatformService, { useClass: PlatformService }],
       [IMenuService, { useClass: MenuService }],
+      [IMenuManagerService, { useClass: MenuManagerService }],
       [IContextMenuService, { useClass: ContextMenuService }],
       [IClipboardInterfaceService, { useClass: BrowserClipboardService, lazy: !0 }],
       [INotificationService, { useClass: DesktopNotificationService, lazy: !0 }],
@@ -8176,21 +8441,18 @@ let UniverUIPlugin = (_a15 = class extends Plugin {
           deps: [Injector]
         }
       ],
-      [SharedController, {
-        useFactory: /* @__PURE__ */ __name(() => this._injector.createInstance(SharedController, this._config), "useFactory")
-      }],
+      [SharedController],
       [ErrorController],
-      [ShortcutPanelController, {
-        useFactory: /* @__PURE__ */ __name(() => this._injector.createInstance(ShortcutPanelController, this._config), "useFactory")
-      }]
+      [ShortcutPanelController]
     ], this._config.override).forEach((dependency) => this._injector.add(dependency));
   }
-}, __name(_a15, "UniverUIPlugin"), _a15);
+}, __name(_a16, "UniverUIPlugin"), _a16);
 __publicField$1(UniverUIPlugin, "pluginName", UNIVER_UI_PLUGIN_NAME);
 UniverUIPlugin = __decorateClass$2([
   DependentOn(UniverRenderEnginePlugin),
   __decorateParam$2(1, IContextService),
-  __decorateParam$2(2, Inject(Injector))
+  __decorateParam$2(2, Inject(Injector)),
+  __decorateParam$2(3, IConfigService)
 ], UniverUIPlugin);
 const appLayout = "univer-app-layout", appHeader = "univer-app-header", appContainer = "univer-app-container", appContainerHeader = "univer-app-container-header", appContainerWrapper = "univer-app-container-wrapper", appContainerContent = "univer-app-container-content", appContainerCanvas = "univer-app-container-canvas", appContainerLeftSidebar = "univer-app-container-left-sidebar", appContainerSidebar = "univer-app-container-sidebar", styles$4 = {
   appLayout,
@@ -8207,10 +8469,16 @@ const appLayout = "univer-app-layout", appHeader = "univer-app-header", appConta
   mobileMenuItem
 };
 function MobileMenu(props) {
-  const { menuType, onOptionSelect } = props, menuService = useDependency(IMenuService);
+  const { menuType, onOptionSelect } = props, menuManagerService = useDependency(IMenuManagerService);
   if (!menuType)
     return null;
-  const flattedMenuItems = makeArray(menuType).map(menuService.getMenuItems.bind(menuService)).flat();
+  const flattedMenuItems = useMemo(() => {
+    const menuItems = menuManagerService.getMenuByPositionKey(menuType);
+    function flatMenuItems(items) {
+      return items.reduce((acc, item) => item.children ? [...acc, ...flatMenuItems(item.children)] : [...acc, item], []);
+    }
+    return __name(flatMenuItems, "flatMenuItems"), flatMenuItems(menuItems);
+  }, [menuType]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
@@ -8218,13 +8486,13 @@ function MobileMenu(props) {
       style: {
         gridTemplateColumns: `repeat(${Math.min(2, flattedMenuItems.length)}, 48px)`
       },
-      children: flattedMenuItems.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: flattedMenuItems.map((item) => item.item && /* @__PURE__ */ jsxRuntimeExports.jsx(
         MobileMenuItem,
         {
-          menuItem: item,
-          onClick: /* @__PURE__ */ __name((object) => onOptionSelect == null ? void 0 : onOptionSelect({ value: "", label: item.id, ...object }), "onClick")
+          menuItem: item.item,
+          onClick: /* @__PURE__ */ __name((object) => onOptionSelect == null ? void 0 : onOptionSelect({ value: "", label: item.key, ...object }), "onClick")
         },
-        item.id
+        item.key
       ))
     }
   );
@@ -8278,7 +8546,7 @@ function MobileContextMenu() {
   /* @__PURE__ */ jsxRuntimeExports.jsx(
     MobileMenu,
     {
-      menuType: [menuType],
+      menuType,
       onOptionSelect: /* @__PURE__ */ __name((params) => {
         const { label: id, value, commandId } = params;
         commandService && commandService.executeCommand(commandId != null ? commandId : id, { value }), setVisible(!1);
@@ -8353,10 +8621,13 @@ var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPrope
   return kind && result && __defProp$1(target, key, result), result;
 }, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1");
 const STEADY_TIMEOUT = 3e3;
-var _a16;
-let MobileUIController = (_a16 = class extends Disposable {
-  constructor(_config, _instanceService, _renderManagerService, _injector, _lifecycleService, _uiPartsService, _layoutService) {
-    super(), this._config = _config, this._instanceService = _instanceService, this._renderManagerService = _renderManagerService, this._injector = _injector, this._lifecycleService = _lifecycleService, this._uiPartsService = _uiPartsService, this._layoutService = _layoutService, this._initBuiltinComponents(), Promise.resolve().then(() => this._bootstrapWorkbench());
+var _a17;
+let MobileUIController = (_a17 = class extends Disposable {
+  constructor(_config, _instanceService, _renderManagerService, _injector, _lifecycleService, _uiPartsService, _menuManagerService, _layoutService) {
+    super(), this._config = _config, this._instanceService = _instanceService, this._renderManagerService = _renderManagerService, this._injector = _injector, this._lifecycleService = _lifecycleService, this._uiPartsService = _uiPartsService, this._menuManagerService = _menuManagerService, this._layoutService = _layoutService, this._initBuiltinComponents(), Promise.resolve().then(() => this._bootstrapWorkbench());
+  }
+  _initMenus() {
+    this._menuManagerService.mergeMenu(menuSchema);
   }
   _bootstrapWorkbench() {
     this.disposeWithMe(
@@ -8368,8 +8639,8 @@ let MobileUIController = (_a16 = class extends Disposable {
             render2.engine.setContainer(canvasElement);
           }
         }), setTimeout(() => {
-          var _a18;
-          const engine = (_a18 = this._renderManagerService.getFirst()) == null ? void 0 : _a18.engine;
+          var _a19;
+          const engine = (_a19 = this._renderManagerService.getFirst()) == null ? void 0 : _a19.engine;
           engine == null || engine.setContainer(canvasElement), this._lifecycleService.stage = LifecycleStages.Rendered, setTimeout(() => this._lifecycleService.stage = LifecycleStages.Steady, STEADY_TIMEOUT);
         }, 300);
       })
@@ -8378,14 +8649,15 @@ let MobileUIController = (_a16 = class extends Disposable {
   _initBuiltinComponents() {
     this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(CanvasPopup, this._injector))), this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(FloatDom, this._injector)));
   }
-}, __name(_a16, "MobileUIController"), _a16);
+}, __name(_a17, "MobileUIController"), _a17);
 MobileUIController = __decorateClass$1([
   __decorateParam$1(1, IUniverInstanceService),
   __decorateParam$1(2, IRenderManagerService),
   __decorateParam$1(3, Inject(Injector)),
   __decorateParam$1(4, Inject(LifecycleService)),
   __decorateParam$1(5, IUIPartsService),
-  __decorateParam$1(6, Optional(ILayoutService))
+  __decorateParam$1(6, IMenuManagerService),
+  __decorateParam$1(7, Optional(ILayoutService))
 ], MobileUIController);
 function bootstrap(injector, options, callback) {
   let mountContainer;
@@ -8424,8 +8696,8 @@ var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnProperty
   return kind && result && __defProp2(target, key, result), result;
 }, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam"), __publicField2 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp2(obj, key + "", value), "__publicField");
 const UNIVER_MOBILE_UI_PLUGIN_NAME = "UNIVER_MOBILE_UI_PLUGIN";
-var _a17;
-let UniverMobileUIPlugin = (_a17 = class extends Plugin {
+var _a18;
+let UniverMobileUIPlugin = (_a18 = class extends Plugin {
   constructor(_config, _injector) {
     super(), this._config = _config, this._injector = _injector;
   }
@@ -8440,6 +8712,7 @@ let UniverMobileUIPlugin = (_a17 = class extends Plugin {
       [IShortcutService, { useClass: ShortcutService }],
       [IPlatformService, { useClass: PlatformService }],
       [IMenuService, { useClass: MenuService }],
+      [IMenuManagerService, { useClass: MenuManagerService }],
       [IContextMenuService, { useClass: ContextMenuService }],
       [IClipboardInterfaceService, { useClass: BrowserClipboardService, lazy: !0 }],
       [INotificationService, { useClass: DesktopNotificationService, lazy: !0 }],
@@ -8464,16 +8737,11 @@ let UniverMobileUIPlugin = (_a17 = class extends Plugin {
           deps: [Injector]
         }
       ],
-      [
-        SharedController,
-        {
-          useFactory: /* @__PURE__ */ __name(() => this._injector.createInstance(SharedController, this._config), "useFactory")
-        }
-      ],
+      [SharedController],
       [ErrorController]
     ], this._config.override).forEach((dependency) => this._injector.add(dependency));
   }
-}, __name(_a17, "UniverMobileUIPlugin"), _a17);
+}, __name(_a18, "UniverMobileUIPlugin"), _a18);
 __publicField2(UniverMobileUIPlugin, "pluginName", UNIVER_MOBILE_UI_PLUGIN_NAME);
 UniverMobileUIPlugin = __decorateClass([
   DependentOn(UniverRenderEnginePlugin),
@@ -8494,7 +8762,7 @@ function isElementVisible(element2) {
 __name(isElementVisible, "isElementVisible");
 const PX_TO_PT_RATIO = 0.75, MAX_FONT_SIZE = 78, MIN_FONT_SIZE = 9, DEFAULT_BACKGROUND_COLOR_RGBA = "rgba(0,0,0,0)", DEFAULT_BACKGROUND_COLOR_RGB = "rgb(0,0,0)";
 function handleDomToJson($dom) {
-  var _a18;
+  var _a19;
   let nodeList = $dom.childNodes;
   if (nodeList.length === 0)
     return $dom.textContent;
@@ -8506,7 +8774,7 @@ function handleDomToJson($dom) {
 `;
   for (let i = 0; i < nodeList.length; i++) {
     let span = nodeList[`${i}`], str;
-    span.nodeName === "#text" ? (str = (_a18 = span.textContent) != null ? _a18 : "", span = span.parentElement) : str = span.innerText;
+    span.nodeName === "#text" ? (str = (_a19 = span.textContent) != null ? _a19 : "", span = span.parentElement) : str = span.innerText;
     const textStyle = handleStringToStyle(span);
     splitSpanText(str).forEach((item) => {
       const length = item.length;
@@ -8531,8 +8799,8 @@ function handleDomToJson($dom) {
 }
 __name(handleDomToJson, "handleDomToJson");
 function handleStringToStyle($dom, cssStyle = "") {
-  var _a18, _b2;
-  let cssText = (_b2 = (_a18 = $dom == null ? void 0 : $dom.style) == null ? void 0 : _a18.cssText) != null ? _b2 : "";
+  var _a19, _b2;
+  let cssText = (_b2 = (_a19 = $dom == null ? void 0 : $dom.style) == null ? void 0 : _a19.cssText) != null ? _b2 : "";
   if (cssText += cssStyle, cssText = cssText.replace(/[\r\n]+/g, ""), cssText.length === 0)
     return {};
   const cssTextArray = cssText.split(";"), styleList = {}, borderInfo = {
@@ -8542,7 +8810,7 @@ function handleStringToStyle($dom, cssStyle = "") {
     l: ""
   };
   return cssTextArray.forEach((originStr) => {
-    var _a19;
+    var _a20;
     const s = originStr.toLowerCase(), key = textTrim(s.substr(0, s.indexOf(":"))), value = textTrim(s.substr(s.indexOf(":") + 1));
     if (key === "font-weight")
       value === "bold" || value === "700" ? styleList.bl = 1 : styleList.bl = 0;
@@ -8580,7 +8848,7 @@ function handleStringToStyle($dom, cssStyle = "") {
     else if (key === "text-decoration-style")
       styleList.hasOwnProperty("ul") && (styleList.ul || (styleList.ul = { s: 1, t: Number(value) }), styleList.ul.t = Number(value)), styleList.hasOwnProperty("st") && (styleList.st || (styleList.st = { s: 1, t: Number(value) }), styleList.st.t = Number(value)), styleList.hasOwnProperty("ol") && (styleList.ol || (styleList.ol = { s: 1, t: Number(value) }), styleList.ol.t = Number(value));
     else if (key === "text-decoration" || key === "univer-strike") {
-      const lineValue = (_a19 = value.split(" ")) == null ? void 0 : _a19[0];
+      const lineValue = (_a20 = value.split(" ")) == null ? void 0 : _a20[0];
       lineValue === "underline" ? (styleList.ul || (styleList.ul = { s: 1 }), styleList.ul.s = 1) : lineValue === "line-through" ? (styleList.st || (styleList.st = { s: 1 }), styleList.st.s = 1) : lineValue === "overline" && (styleList.ol || (styleList.ol = { s: 1 }), styleList.ol.s = 1);
     }
     if (key === "univer-underline" && (styleList.ul = {
@@ -8788,7 +9056,7 @@ function handelTableToJson(table) {
   return trs.forEach((item) => {
     let c2 = 0;
     item.querySelectorAll("td").forEach((td) => {
-      var _a18, _b2;
+      var _a19, _b2;
       const cell = {};
       if (td.querySelectorAll("span").length || td.querySelectorAll("font").length) {
         const spanStyle = handleDomToJson(td);
@@ -8802,7 +9070,7 @@ function handelTableToJson(table) {
       if (c2 !== colLen) {
         if (data[r][c2] == null) {
           data[r][c2] = cell;
-          const rowSpan = (_a18 = Number(td.getAttribute("rowSpan"))) != null ? _a18 : 1, colSpan = (_b2 = Number(td.getAttribute("colSpan"))) != null ? _b2 : 1;
+          const rowSpan = (_a19 = Number(td.getAttribute("rowSpan"))) != null ? _a19 : 1, colSpan = (_b2 = Number(td.getAttribute("colSpan"))) != null ? _b2 : 1;
           if (rowSpan > 1 || colSpan > 1) {
             const first = { rs: +rowSpan - 1, cs: +colSpan - 1, r, c: c2 };
             data[r][c2].mc = first;
@@ -8853,11 +9121,11 @@ function handleTableMergeData(data, selection) {
 }
 __name(handleTableMergeData, "handleTableMergeData");
 function handelExcelToJson(html) {
-  var _a18;
+  var _a19;
   let data = [];
   const content = document.createElement("html");
   content.innerHTML = html;
-  const styleText = (_a18 = content.querySelector("style")) == null ? void 0 : _a18.innerText;
+  const styleText = (_a19 = content.querySelector("style")) == null ? void 0 : _a19.innerText;
   if (!styleText) return;
   const excelStyle = getStyles(styleText);
   if (data = new Array(content.querySelectorAll("table tr").length), !data.length) return [];
@@ -8874,7 +9142,7 @@ function handelExcelToJson(html) {
   return trs.forEach((item) => {
     let c2 = 0;
     item.querySelectorAll("td").forEach((td) => {
-      var _a19, _b2;
+      var _a20, _b2;
       const cell = {};
       if (td.querySelectorAll("span").length || td.querySelectorAll("font").length) {
         const spanStyle = handleDomToJson(td);
@@ -8891,7 +9159,7 @@ function handelExcelToJson(html) {
       if (c2 !== colLen) {
         if (data[r][c2] == null) {
           data[r][c2] = cell;
-          const rowSpan = (_a19 = Number(td.getAttribute("rowSpan"))) != null ? _a19 : 1, colSpan = (_b2 = Number(td.getAttribute("colSpan"))) != null ? _b2 : 1;
+          const rowSpan = (_a20 = Number(td.getAttribute("rowSpan"))) != null ? _a20 : 1, colSpan = (_b2 = Number(td.getAttribute("colSpan"))) != null ? _b2 : 1;
           if (rowSpan > 1 || colSpan > 1) {
             const first = { rs: +rowSpan - 1, cs: +colSpan - 1, r, c: c2 };
             data[r][c2].mc = first;
@@ -9171,8 +9439,8 @@ function RangeSelector(props) {
   }
   __name(handleAddRange, "handleAddRange");
   function getSheetIdByName(name) {
-    var _a18, _b2;
-    return ((_b2 = (_a18 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a18.getSheetBySheetName(name)) == null ? void 0 : _b2.getSheetId()) || "";
+    var _a19, _b2;
+    return ((_b2 = (_a19 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a19.getSheetBySheetName(name)) == null ? void 0 : _b2.getSheetId()) || "";
   }
   __name(getSheetIdByName, "getSheetIdByName");
   function handleTextValueChange(value2) {
@@ -9283,6 +9551,8 @@ export {
   ComponentContainer,
   ComponentManager,
   DesktopContextMenu as ContextMenu,
+  ContextMenuGroup,
+  ContextMenuPosition,
   ContextMenuService,
   CopyCommand,
   CopyShortcutItem,
@@ -9324,6 +9594,7 @@ export {
   IGlobalZoneService,
   ILayoutService,
   ILeftSidebarService,
+  IMenuManagerService,
   IMenuService,
   IMessageService,
   INotificationService,
@@ -9339,6 +9610,8 @@ export {
   Menu,
   MenuGroup,
   MenuItemType,
+  MenuManagerPosition,
+  MenuManagerService,
   MenuPosition,
   MenuService,
   MetaKeys,
@@ -9351,6 +9624,14 @@ export {
   RangeSelector,
   RangeSelectorService,
   RedoShortcutItem,
+  Ribbon,
+  RibbonDataGroup,
+  RibbonFormulasGroup,
+  RibbonInsertGroup,
+  RibbonOthersGroup,
+  RibbonPosition,
+  RibbonStartGroup,
+  RibbonViewGroup,
   SetEditorResizeOperation,
   SharedController,
   ShortcutPanelController,
@@ -9359,11 +9640,9 @@ export {
   Sidebar,
   TextEditor,
   ToggleShortcutPanelOperation,
-  Toolbar,
   ToolbarButton,
   ToolbarItem,
   UIPartsService,
-  UI_CONFIG_KEY,
   UNIVER_UI_PLUGIN_NAME,
   UNI_DISABLE_CHANGING_FOCUS_KEY,
   UndoShortcutItem,
@@ -9384,6 +9663,7 @@ export {
   handleTableMergeData,
   handleTableRowGroup,
   isElementVisible,
+  menuSchema,
   mergeMenuConfigs,
   splitSpanText,
   t$1 as t,
@@ -9393,7 +9673,6 @@ export {
   useObservable,
   useScrollYOverContainer,
   useSimpleToolbarGroups,
-  useToolbarCollapseObserver,
   useToolbarGroups,
   useToolbarItemStatus,
   useVirtualList