@univerjs/ui 1.0.0-alpha.2 → 1.0.0-alpha.4

package/lib/cjs/index.js

@@ -10,6 +10,47 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react_dom = require("react-dom");
 let _univerjs_icons = require("@univerjs/icons");
 
+//#region src/utils/embed-boundary.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE = "data-embed-interaction-boundary-owner";
+function getEmbedBoundaryOwner(target) {
+	var _ref, _getAttributeValue;
+	if (!hasClosest(target)) return;
+	const ownerElement = target.closest(`[${EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE}]`);
+	return (_ref = (_getAttributeValue = getAttributeValue(target, "data-embed-interaction-boundary-owner")) !== null && _getAttributeValue !== void 0 ? _getAttributeValue : getAttributeValue(ownerElement, "data-embed-interaction-boundary-owner")) !== null && _ref !== void 0 ? _ref : void 0;
+}
+function isEmbedBoundaryTarget(target) {
+	return hasClosest(target) && target.closest(`[${"data-embed-interaction-boundary-owner"}]`) != null;
+}
+function keepInteractionInsideSameEmbedBoundary(event) {
+	const owner = getEmbedBoundaryOwner(event.currentTarget);
+	if (!owner) return;
+	if (getEmbedBoundaryOwner(event.target) === owner) event.preventDefault();
+}
+function hasClosest(target) {
+	return !!target && typeof target.closest === "function";
+}
+function getAttributeValue(target, name) {
+	var _getAttribute$call;
+	const getAttribute = target === null || target === void 0 ? void 0 : target.getAttribute;
+	return typeof getAttribute === "function" ? (_getAttribute$call = getAttribute.call(target, name)) !== null && _getAttribute$call !== void 0 ? _getAttribute$call : void 0 : void 0;
+}
+
+//#endregion
 //#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
@@ -51,6 +92,157 @@ function _defineProperty(e, r, t) {
 	}) : e[r] = t, e;
 }
 
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
+function __decorateParam(paramIndex, decorator) {
+	return function(target, key) {
+		decorator(target, key, paramIndex);
+	};
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+//#endregion
+//#region src/services/layout/layout.service.ts
+const FOCUSING_UNIVER = "FOCUSING_UNIVER";
+const givingBackFocusElements = [
+	"app-layout",
+	"button",
+	"sheet-bar-append-button",
+	"render-canvas",
+	"workbench-layout"
+];
+const ILayoutService = (0, _univerjs_core.createIdentifier)("ui.layout-service");
+let DesktopLayoutService = class DesktopLayoutService extends _univerjs_core.Disposable {
+	get isFocused() {
+		return this._isFocused;
+	}
+	constructor(_contextService, _univerInstanceService) {
+		super();
+		this._contextService = _contextService;
+		this._univerInstanceService = _univerInstanceService;
+		_defineProperty(this, "_rootContainerElement", null);
+		_defineProperty(this, "_isFocused", false);
+		_defineProperty(this, "_focusHandlers", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_contentElements", []);
+		_defineProperty(this, "_allContainers", []);
+		this._initUniverFocusListener();
+		this._initEditorStatus();
+	}
+	get rootContainerElement() {
+		return this._rootContainerElement;
+	}
+	focus() {
+		const currentFocused = this._univerInstanceService.getFocusedUnit();
+		if (!currentFocused) return;
+		let handler;
+		if (currentFocused instanceof _univerjs_core.Workbook) handler = this._focusHandlers.get(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
+		else if (currentFocused instanceof _univerjs_core.DocumentDataModel) handler = this._focusHandlers.get(_univerjs_core.UniverInstanceType.UNIVER_DOC);
+		else if ((currentFocused === null || currentFocused === void 0 ? void 0 : currentFocused.type) === _univerjs_core.UniverInstanceType.UNIVER_SLIDE) handler = this._focusHandlers.get(_univerjs_core.UniverInstanceType.UNIVER_SLIDE);
+		if (handler) handler(currentFocused.getUnitId());
+	}
+	registerFocusHandler(type, handler) {
+		if (this._focusHandlers.has(type)) throw new Error(`[DesktopLayoutService]: handler of type ${type} bas been registered!`);
+		this._focusHandlers.set(type, handler);
+		return (0, _univerjs_core.toDisposable)(() => this._focusHandlers.delete(type));
+	}
+	registerContentElement(container) {
+		if (this._contentElements.indexOf(container) === -1) {
+			this._contentElements.push(container);
+			return (0, _univerjs_core.toDisposable)(() => (0, _univerjs_core.remove)(this._contentElements, container));
+		}
+		throw new Error("[DesktopLayoutService]: content container already registered!");
+	}
+	getContentElement() {
+		return this._contentElements[0];
+	}
+	registerRootContainerElement(container) {
+		if (this._rootContainerElement) throw new Error("[DesktopLayoutService]: root container already registered!");
+		this._rootContainerElement = container;
+		const dis = this.registerContainerElement(container);
+		return (0, _univerjs_core.toDisposable)(() => {
+			this._rootContainerElement = null;
+			dis.dispose();
+		});
+	}
+	registerContainerElement(container) {
+		if (this._allContainers.indexOf(container) === -1) {
+			this._allContainers.push(container);
+			return (0, _univerjs_core.toDisposable)(() => (0, _univerjs_core.remove)(this._allContainers, container));
+		}
+		throw new Error("[LayoutService]: container already registered!");
+	}
+	checkElementInCurrentContainers(element) {
+		return this._allContainers.some((container) => container.contains(element));
+	}
+	checkContentIsFocused() {
+		return this._contentElements.some((contentEl) => contentEl === document.activeElement || contentEl.contains(document.activeElement));
+	}
+	_initUniverFocusListener() {
+		this.disposeWithMe((0, rxjs.fromEvent)(window, "focusin").subscribe((event) => {
+			var _this$_rootContainerE;
+			const target = event.target;
+			if (((_this$_rootContainerE = this._rootContainerElement) === null || _this$_rootContainerE === void 0 ? void 0 : _this$_rootContainerE.contains(target)) && givingBackFocusElements.some((item) => target.dataset.uComp === item) && !isEmbedBoundaryTarget(target)) {
+				queueMicrotask(() => {
+					const targetUnitId = getFocusUnitIdFromElement(target);
+					if (targetUnitId && this._univerInstanceService.getUnit(targetUnitId)) this._univerInstanceService.focusUnit(targetUnitId);
+					this.focus();
+					this._isFocused = true;
+					this._contextService.setContextValue(FOCUSING_UNIVER, this._isFocused);
+					this._contextService.setContextValue(_univerjs_core.FOCUSING_UNIVER_EDITOR, getFocusingUniverEditorStatus());
+				});
+				return;
+			}
+			if (target && this.checkElementInCurrentContainers(target)) this._isFocused = true;
+			else this._isFocused = false;
+			this._contextService.setContextValue(FOCUSING_UNIVER, this._isFocused);
+			this._contextService.setContextValue(_univerjs_core.FOCUSING_UNIVER_EDITOR, getFocusingUniverEditorStatus());
+		}));
+	}
+	_initEditorStatus() {
+		this._contextService.setContextValue(_univerjs_core.FOCUSING_UNIVER_EDITOR, getFocusingUniverEditorStatus());
+	}
+};
+DesktopLayoutService = __decorate([__decorateParam(0, _univerjs_core.IContextService), __decorateParam(1, _univerjs_core.IUniverInstanceService)], DesktopLayoutService);
+function getFocusingUniverEditorStatus() {
+	var _document$activeEleme;
+	return ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.dataset.uComp) === "editor";
+}
+function getFocusUnitIdFromElement(target) {
+	return target.dataset.uUnitId;
+}
+
+//#endregion
+//#region src/commands/operations/toggle-fullscreen.operation.ts
+const ToggleFullscreenOperation = {
+	id: "base-ui.operation.toggle-fullscreen",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		const root = accessor.get(ILayoutService).rootContainerElement;
+		if (!root) return false;
+		const document = root.ownerDocument;
+		try {
+			if (document.fullscreenElement) {
+				if (!document.exitFullscreen) return false;
+				document.exitFullscreen().catch(() => {});
+			} else {
+				if (!root.requestFullscreen) return false;
+				root.requestFullscreen().catch(() => {});
+			}
+			return true;
+		} catch {
+			return false;
+		}
+	}
+};
+
 //#endregion
 //#region src/services/shortcut/shortcut-panel.service.ts
 /**
@@ -118,23 +310,6 @@ const ToggleShortcutPanelOperation = {
 	}
 };
 
-//#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
-function __decorateParam(paramIndex, decorator) {
-	return function(target, key) {
-		decorator(target, key, paramIndex);
-	};
-}
-
-//#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
-function __decorate(decorators, target, key, desc) {
-	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-	return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
 //#endregion
 //#region src/common/component-manager.ts
 let ComponentManager = class ComponentManager extends _univerjs_core.Disposable {
@@ -625,106 +800,6 @@ function fromGlobalEvent(type, listener, options) {
 	return (0, _univerjs_core.toDisposable)(() => window.removeEventListener(type, listener, options));
 }
 
-//#endregion
-//#region src/services/layout/layout.service.ts
-const FOCUSING_UNIVER = "FOCUSING_UNIVER";
-const givingBackFocusElements = [
-	"app-layout",
-	"button",
-	"sheet-bar-append-button",
-	"render-canvas",
-	"workbench-layout"
-];
-const ILayoutService = (0, _univerjs_core.createIdentifier)("ui.layout-service");
-let DesktopLayoutService = class DesktopLayoutService extends _univerjs_core.Disposable {
-	get isFocused() {
-		return this._isFocused;
-	}
-	constructor(_contextService, _univerInstanceService) {
-		super();
-		this._contextService = _contextService;
-		this._univerInstanceService = _univerInstanceService;
-		_defineProperty(this, "_rootContainerElement", null);
-		_defineProperty(this, "_isFocused", false);
-		_defineProperty(this, "_focusHandlers", /* @__PURE__ */ new Map());
-		_defineProperty(this, "_contentElements", []);
-		_defineProperty(this, "_allContainers", []);
-		this._initUniverFocusListener();
-		this._initEditorStatus();
-	}
-	get rootContainerElement() {
-		return this._rootContainerElement;
-	}
-	focus() {
-		const currentFocused = this._univerInstanceService.getFocusedUnit();
-		if (!currentFocused) return;
-		let handler;
-		if (currentFocused instanceof _univerjs_core.Workbook) handler = this._focusHandlers.get(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
-		else if (currentFocused instanceof _univerjs_core.DocumentDataModel) handler = this._focusHandlers.get(_univerjs_core.UniverInstanceType.UNIVER_DOC);
-		else if ((currentFocused === null || currentFocused === void 0 ? void 0 : currentFocused.type) === _univerjs_core.UniverInstanceType.UNIVER_SLIDE) handler = this._focusHandlers.get(_univerjs_core.UniverInstanceType.UNIVER_SLIDE);
-		if (handler) handler(currentFocused.getUnitId());
-	}
-	registerFocusHandler(type, handler) {
-		if (this._focusHandlers.has(type)) throw new Error(`[DesktopLayoutService]: handler of type ${type} bas been registered!`);
-		this._focusHandlers.set(type, handler);
-		return (0, _univerjs_core.toDisposable)(() => this._focusHandlers.delete(type));
-	}
-	registerContentElement(container) {
-		if (this._contentElements.indexOf(container) === -1) {
-			this._contentElements.push(container);
-			return (0, _univerjs_core.toDisposable)(() => (0, _univerjs_core.remove)(this._contentElements, container));
-		}
-		throw new Error("[DesktopLayoutService]: content container already registered!");
-	}
-	getContentElement() {
-		return this._contentElements[0];
-	}
-	registerRootContainerElement(container) {
-		if (this._rootContainerElement) throw new Error("[DesktopLayoutService]: root container already registered!");
-		this._rootContainerElement = container;
-		const dis = this.registerContainerElement(container);
-		return (0, _univerjs_core.toDisposable)(() => {
-			this._rootContainerElement = null;
-			dis.dispose();
-		});
-	}
-	registerContainerElement(container) {
-		if (this._allContainers.indexOf(container) === -1) {
-			this._allContainers.push(container);
-			return (0, _univerjs_core.toDisposable)(() => (0, _univerjs_core.remove)(this._allContainers, container));
-		}
-		throw new Error("[LayoutService]: container already registered!");
-	}
-	checkElementInCurrentContainers(element) {
-		return this._allContainers.some((container) => container.contains(element));
-	}
-	checkContentIsFocused() {
-		return this._contentElements.some((contentEl) => contentEl === document.activeElement || contentEl.contains(document.activeElement));
-	}
-	_initUniverFocusListener() {
-		this.disposeWithMe((0, rxjs.fromEvent)(window, "focusin").subscribe((event) => {
-			var _this$_rootContainerE;
-			const target = event.target;
-			if (((_this$_rootContainerE = this._rootContainerElement) === null || _this$_rootContainerE === void 0 ? void 0 : _this$_rootContainerE.contains(target)) && givingBackFocusElements.some((item) => target.dataset.uComp === item)) {
-				queueMicrotask(() => this.focus());
-				return;
-			}
-			if (target && this.checkElementInCurrentContainers(target)) this._isFocused = true;
-			else this._isFocused = false;
-			this._contextService.setContextValue(FOCUSING_UNIVER, this._isFocused);
-			this._contextService.setContextValue(_univerjs_core.FOCUSING_UNIVER_EDITOR, getFocusingUniverEditorStatus());
-		}));
-	}
-	_initEditorStatus() {
-		this._contextService.setContextValue(_univerjs_core.FOCUSING_UNIVER_EDITOR, getFocusingUniverEditorStatus());
-	}
-};
-DesktopLayoutService = __decorate([__decorateParam(0, _univerjs_core.IContextService), __decorateParam(1, _univerjs_core.IUniverInstanceService)], DesktopLayoutService);
-function getFocusingUniverEditorStatus() {
-	var _document$activeEleme;
-	return ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.dataset.uComp) === "editor";
-}
-
 //#endregion
 //#region src/services/platform/platform.service.ts
 /**
@@ -845,6 +920,7 @@ let ShortcutService = class ShortcutService extends _univerjs_core.Disposable {
 		if (this._layoutService && !this._layoutService.checkElementInCurrentContainers(e.target)) return;
 		const binding = this._deriveBindingFromEvent(e);
 		if (binding === null) return;
+		if (this._shouldLetEmbedTextEditorHandleNativeShortcut(e, binding)) return;
 		const shortcuts = this._shortCutMapping.get(binding);
 		if (shortcuts === void 0) return;
 		return Array.from(shortcuts).sort((s1, s2) => {
@@ -870,6 +946,12 @@ let ShortcutService = class ShortcutService extends _univerjs_core.Disposable {
 		if (this._platformService.isMac && e.ctrlKey) binding |= 8192;
 		return binding;
 	}
+	_shouldLetEmbedTextEditorHandleNativeShortcut(e, binding) {
+		if (binding !== (65 | 4096)) return false;
+		const target = e.target;
+		if (!(target instanceof HTMLElement)) return false;
+		return (target.isContentEditable || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) && isEmbedBoundaryTarget(target);
+	}
 };
 ShortcutService = __decorate([
 	__decorateParam(0, _univerjs_core.ICommandService),
@@ -941,6 +1023,7 @@ let SharedController = class SharedController extends _univerjs_core.Disposable
 		this._registerShortcuts();
 	}
 	_registerCommands() {
+		this.disposeWithMe(this._commandService.registerCommand(ToggleFullscreenOperation));
 		[
 			CutCommand,
 			CopyCommand,
@@ -995,6 +1078,7 @@ let RibbonStartGroup = /* @__PURE__ */ function(RibbonStartGroup) {
 }({});
 let RibbonInsertGroup = /* @__PURE__ */ function(RibbonInsertGroup) {
 	RibbonInsertGroup["EDIT"] = "ribbon.insert.edit";
+	RibbonInsertGroup["CELL"] = "ribbon.insert.cell";
 	RibbonInsertGroup["MEDIA"] = "ribbon.insert.media";
 	RibbonInsertGroup["OTHERS"] = "ribbon.insert.others";
 	return RibbonInsertGroup;
@@ -1051,8 +1135,9 @@ let ContextMenuGroup = /* @__PURE__ */ function(ContextMenuGroup) {
 
 //#endregion
 //#region src/services/menu/menu-manager.service.ts
+var _MenuManagerService;
 const IMenuManagerService = (0, _univerjs_core.createIdentifier)("univer.menu-manager-service");
-let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposable {
+let MenuManagerService = _MenuManagerService = class MenuManagerService extends _univerjs_core.Disposable {
 	constructor(_injector, _configService) {
 		super();
 		this._injector = _injector;
@@ -1073,7 +1158,8 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 					title: "ui.ribbon.insert",
 					["ribbon.insert.edit"]: { order: 0 },
 					["ribbon.insert.media"]: { order: 1 },
-					["ribbon.insert.others"]: { order: 2 }
+					["ribbon.insert.cell"]: { order: 2 },
+					["ribbon.insert.others"]: { order: 3 }
 				},
 				["ribbon.formulas"]: {
 					order: 2,
@@ -1186,6 +1272,21 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 		this._menu = (0, _univerjs_core.merge)({}, this._menu, source);
 		this.menuChanged$.next();
 	}
+	createScoped(injector) {
+		const root = this;
+		const createScopedBuilder = () => {
+			const service = new _MenuManagerService(injector, root._configService);
+			service._menu = root._menu;
+			return service;
+		};
+		return {
+			menuChanged$: root.menuChanged$,
+			mergeMenu: (source, target) => root.mergeMenu(source, target),
+			appendRootMenu: (source) => root.appendRootMenu(source),
+			getMenuByPositionKey: (position) => createScopedBuilder().getMenuByPositionKey(position),
+			getFlatMenuByPositionKey: (position) => createScopedBuilder().getFlatMenuByPositionKey(position)
+		};
+	}
 	_buildMenuSchema(data) {
 		const result = [];
 		for (const [key, value] of Object.entries(data)) {
@@ -1225,6 +1326,7 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 	* @returns Menu schema array or empty array if not found
 	*/
 	getMenuByPositionKey(key) {
+		var _findKey;
 		const findKey = (obj) => {
 			if (key in obj) return this._buildMenuSchema(obj[key]);
 			for (const k in obj) {
@@ -1235,7 +1337,7 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 				}
 			}
 		};
-		return findKey(this._menu);
+		return (_findKey = findKey(this._menu)) !== null && _findKey !== void 0 ? _findKey : [];
 	}
 	/**
 	* Get flat menu schema by position key
@@ -1257,7 +1359,7 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 		return flatMenuItems(menu);
 	}
 };
-MenuManagerService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, _univerjs_core.IConfigService)], MenuManagerService);
+MenuManagerService = _MenuManagerService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, _univerjs_core.IConfigService)], MenuManagerService);
 function normalizeMenuOrder(order) {
 	return order !== null && order !== void 0 ? order : 0;
 }
@@ -1334,11 +1436,14 @@ const undoRedoDisableFactory$ = (accessor, isUndo) => {
 		return undoDisable || contextService.getContextValue(_univerjs_core.EDITOR_ACTIVATED) || contextService.getContextValue(_univerjs_core.FOCUSING_FX_BAR_EDITOR);
 	}));
 };
+const rtlIconFactory$ = (accessor, ltrIcon, rtlIcon) => {
+	return accessor.get(_univerjs_core.LocaleService).direction$.pipe((0, rxjs_operators.map)((direction) => direction === "rtl" ? rtlIcon : ltrIcon));
+};
 function UndoMenuItemFactory(accessor) {
 	return {
 		id: _univerjs_core.UndoCommand.id,
 		type: 0,
-		icon: "UndoIcon",
+		icon: rtlIconFactory$(accessor, "UndoIcon", "RedoIcon"),
 		title: "ui.shortcut.undo",
 		tooltip: "ui.shortcut.undo",
 		disabled$: undoRedoDisableFactory$(accessor, true)
@@ -1348,7 +1453,7 @@ function RedoMenuItemFactory(accessor) {
 	return {
 		id: _univerjs_core.RedoCommand.id,
 		type: 0,
-		icon: "RedoIcon",
+		icon: rtlIconFactory$(accessor, "RedoIcon", "UndoIcon"),
 		title: "ui.shortcut.redo",
 		tooltip: "ui.shortcut.redo",
 		disabled$: undoRedoDisableFactory$(accessor, false)
@@ -1469,8 +1574,15 @@ function useObservableRef(observable, defaultValue) {
 
 //#endregion
 //#region src/services/dom/canvas-dom-layer.service.ts
-var CanvasFloatDomService = class {
-	constructor() {
+function shouldForwardFloatDomEvents(layer) {
+	return layer.eventPassThrough !== false;
+}
+function shouldRenderFloatDomLayer(layer, currentUnitId) {
+	return layer.unitId === currentUnitId || layer.preserveOnFocusChange === true;
+}
+var CanvasFloatDomService = class extends _univerjs_core.Disposable {
+	constructor(..._args) {
+		super(..._args);
 		_defineProperty(this, "_domLayerMap", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_domLayers$", new rxjs.BehaviorSubject([]));
 		_defineProperty(this, "domLayers$", this._domLayers$.asObservable());
@@ -1501,68 +1613,147 @@ var CanvasFloatDomService = class {
 		this._domLayerMap.clear();
 		this._notice();
 	}
+	dispose() {
+		this._domLayerMap.clear();
+		this._domLayers$.next([]);
+		this._domLayers$.complete();
+		super.dispose();
+	}
+};
+var CanvasFloatDomPreviewService = class extends _univerjs_core.Disposable {
+	constructor(..._args2) {
+		super(..._args2);
+		_defineProperty(this, "previewUpdated$", new rxjs.Subject());
+		_defineProperty(this, "previewRequested$", new rxjs.Subject());
+		_defineProperty(this, "_previewMap", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_requestMap", /* @__PURE__ */ new Map());
+	}
+	getPreview(id) {
+		return this._previewMap.get(id);
+	}
+	getPendingRequests() {
+		return Array.from(this._requestMap.values());
+	}
+	setPreview(preview) {
+		this._previewMap.set(preview.id, preview);
+		this._requestMap.delete(preview.id);
+		this.previewUpdated$.next(preview);
+	}
+	removePreview(id) {
+		this._previewMap.delete(id);
+		this._requestMap.delete(id);
+	}
+	requestPreview(request) {
+		this._requestMap.set(request.id, request);
+		this.previewRequested$.next(request);
+	}
+	dispose() {
+		this._previewMap.clear();
+		this._requestMap.clear();
+		this.previewUpdated$.complete();
+		this.previewRequested$.complete();
+		super.dispose();
+	}
 };
 
+//#endregion
+//#region src/views/components/dom/float-dom-layout.ts
+const LEGACY_WRAPPER_INSET = 2;
+const LEGACY_CONTENT_INSET = 4;
+function resolveFloatDomLayout(position, contentBox) {
+	var _contentBox$wrapperIn, _contentBox$contentIn, _position$opacity;
+	const wrapperInset = (_contentBox$wrapperIn = contentBox === null || contentBox === void 0 ? void 0 : contentBox.wrapperInset) !== null && _contentBox$wrapperIn !== void 0 ? _contentBox$wrapperIn : LEGACY_WRAPPER_INSET;
+	const contentInset = (_contentBox$contentIn = contentBox === null || contentBox === void 0 ? void 0 : contentBox.contentInset) !== null && _contentBox$contentIn !== void 0 ? _contentBox$contentIn : LEGACY_CONTENT_INSET;
+	return {
+		wrapper: {
+			top: position.startY,
+			left: position.startX,
+			width: Math.max(position.endX - position.startX - wrapperInset, 0),
+			height: Math.max(position.endY - position.startY - wrapperInset, 0),
+			transform: `rotate(${position.rotate}deg)`,
+			opacity: (_position$opacity = position.opacity) !== null && _position$opacity !== void 0 ? _position$opacity : 1
+		},
+		inner: {
+			width: position.width - contentInset,
+			height: position.height - contentInset,
+			left: position.absolute.left ? 0 : "auto",
+			top: position.absolute.top ? 0 : "auto",
+			right: position.absolute.left ? "auto" : 0,
+			bottom: position.absolute.top ? "auto" : 0
+		}
+	};
+}
+
 //#endregion
 //#region src/views/components/dom/FloatDom.tsx
+function applyFloatDomLayout(wrapper, inner, layout) {
+	const { wrapper: wrapperLayout, inner: innerLayout } = layout;
+	const wrapperStyle = wrapper.style;
+	wrapperStyle.top = `${wrapperLayout.top}px`;
+	wrapperStyle.left = `${wrapperLayout.left}px`;
+	wrapperStyle.width = `${wrapperLayout.width}px`;
+	wrapperStyle.height = `${wrapperLayout.height}px`;
+	wrapperStyle.transform = wrapperLayout.transform;
+	wrapperStyle.opacity = `${wrapperLayout.opacity}`;
+	const innerStyle = inner.style;
+	innerStyle.width = `${innerLayout.width}px`;
+	innerStyle.height = `${innerLayout.height}px`;
+	innerStyle.left = innerLayout.left === "auto" ? "auto" : `${innerLayout.left}px`;
+	innerStyle.top = innerLayout.top === "auto" ? "auto" : `${innerLayout.top}px`;
+	innerStyle.right = innerLayout.right === "auto" ? "auto" : `${innerLayout.right}px`;
+	innerStyle.bottom = innerLayout.bottom === "auto" ? "auto" : `${innerLayout.bottom}px`;
+}
 const FloatDomSingle = (0, react.memo)((props) => {
-	var _position$startY, _position$startX;
-	const { layer, id } = props;
-	const size$ = (0, react.useMemo)(() => layer.position$.pipe((0, rxjs.distinctUntilChanged)((prev, curr) => prev.absolute.left === curr.absolute.left && prev.absolute.top === curr.absolute.top && prev.endX - prev.startX === curr.endX - curr.startX && prev.endY - prev.startY === curr.endY - curr.startY)), [layer.position$]);
+	const { layer } = props;
+	return typeof layer.componentKey === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RegisteredFloatDomSingle, {
+		...props,
+		componentKey: layer.componentKey
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatDomSingleContent, {
+		...props,
+		Component: layer.componentKey
+	});
+});
+function RegisteredFloatDomSingle(props) {
+	const componentManager = (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatDomSingleContent, {
+		...props,
+		Component: componentManager.get(props.componentKey)
+	});
+}
+function FloatDomSingleContent(props) {
+	var _layer$contentBox, _layer$contentBox2;
+	const { layer, id, Component } = props;
 	const univerInstanceService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IUniverInstanceService);
 	const position = (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => layer.position$.pipe((0, rxjs.first)()), [layer.position$]));
 	const domRef = (0, react.useRef)(null);
 	const innerDomRef = (0, react.useRef)(null);
-	const transformRef = (0, react.useRef)(`transform: rotate(${position === null || position === void 0 ? void 0 : position.rotate}deg) translate(${position === null || position === void 0 ? void 0 : position.startX}px, ${position === null || position === void 0 ? void 0 : position.startY}px)`);
-	const topRef = (0, react.useRef)((_position$startY = position === null || position === void 0 ? void 0 : position.startY) !== null && _position$startY !== void 0 ? _position$startY : 0);
-	const leftRef = (0, react.useRef)((_position$startX = position === null || position === void 0 ? void 0 : position.startX) !== null && _position$startX !== void 0 ? _position$startX : 0);
-	const innerStyle = (0, react.useRef)({});
-	const Component = typeof layer.componentKey === "string" ? (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager).get(layer.componentKey) : layer.componentKey;
 	const layerProps = (0, react.useMemo)(() => ({
 		data: layer.data,
-		...layer.props
-	}), [layer.data, layer.props]);
+		...layer.props,
+		hostFloatDomLayout$: layer.position$
+	}), [
+		layer.data,
+		layer.position$,
+		layer.props
+	]);
+	const floatDomOverflow = resolveFloatDomOverflow(layerProps);
+	const wrapperInset = (_layer$contentBox = layer.contentBox) === null || _layer$contentBox === void 0 ? void 0 : _layer$contentBox.wrapperInset;
+	const contentInset = (_layer$contentBox2 = layer.contentBox) === null || _layer$contentBox2 === void 0 ? void 0 : _layer$contentBox2.contentInset;
 	(0, react.useEffect)(() => {
 		const subscription = layer.position$.subscribe((position) => {
-			transformRef.current = `rotate(${position.rotate}deg)`;
-			topRef.current = position.startY;
-			leftRef.current = position.startX;
-			if (domRef.current) {
-				var _position$opacity;
-				domRef.current.style.transform = transformRef.current;
-				domRef.current.style.top = `${topRef.current}px`;
-				domRef.current.style.left = `${leftRef.current}px`;
-				domRef.current.style.opacity = `${(_position$opacity = position.opacity) !== null && _position$opacity !== void 0 ? _position$opacity : 1}`;
-			}
-		});
-		const sizeSubscription = size$.subscribe((size) => {
-			if (domRef.current) {
-				domRef.current.style.width = `${Math.max(size.endX - size.startX - 2, 0)}px`;
-				domRef.current.style.height = `${Math.max(size.endY - size.startY - 2, 0)}px`;
-			}
-			if (innerDomRef.current) {
-				const style = {
-					width: `${size.width - 4}px`,
-					height: `${size.height - 4}px`,
-					left: `${size.absolute.left ? 0 : "auto"}`,
-					top: `${size.absolute.top ? 0 : "auto"}`,
-					right: `${size.absolute.left ? "auto" : 0}`,
-					bottom: `${size.absolute.top ? "auto" : 0}`
-				};
-				innerDomRef.current.style.width = style.width;
-				innerDomRef.current.style.height = style.height;
-				innerDomRef.current.style.left = style.left;
-				innerDomRef.current.style.top = style.top;
-				innerDomRef.current.style.right = style.right;
-				innerDomRef.current.style.bottom = style.bottom;
-				innerStyle.current = style;
-			}
+			if (domRef.current && innerDomRef.current) applyFloatDomLayout(domRef.current, innerDomRef.current, resolveFloatDomLayout(position, {
+				wrapperInset,
+				contentInset
+			}));
 		});
 		return () => {
 			subscription.unsubscribe();
-			sizeSubscription.unsubscribe();
 		};
-	}, [layer.position$, size$]);
+	}, [
+		contentInset,
+		layer.position$,
+		wrapperInset
+	]);
 	const instance = univerInstanceService.getUnit(layer.unitId);
 	const docDisabled = instance instanceof _univerjs_core.DocumentDataModel ? instance.getDisabled() : void 0;
 	const component = (0, react.useMemo)(() => Component ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
@@ -1576,47 +1767,44 @@ const FloatDomSingle = (0, react.memo)((props) => {
 		}
 	}) : null, [Component, layerProps]);
 	if (!position) return null;
+	const layout = resolveFloatDomLayout(position, layer.contentBox);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: domRef,
-		className: "univer-z-10",
+		className: "univer-absolute univer-z-10 univer-origin-center",
 		style: {
-			position: "absolute",
-			top: topRef.current,
-			left: leftRef.current,
-			width: Math.max(position.endX - position.startX - 2, 0),
-			height: Math.max(position.endY - position.startY - 2, 0),
-			transform: transformRef.current,
-			overflow: "hidden",
-			transformOrigin: "center center"
+			...layout.wrapper,
+			overflow: floatDomOverflow.outerOverflow
 		},
 		onPointerMove: (e) => {
-			layer.onPointerMove(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onPointerMove(e.nativeEvent);
 		},
 		onPointerDown: (e) => {
-			layer.onPointerDown(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onPointerDown(e.nativeEvent);
 		},
 		onPointerUp: (e) => {
-			layer.onPointerUp(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onPointerUp(e.nativeEvent);
 		},
 		onWheel: (e) => {
-			layer.onWheel(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onWheel(e.nativeEvent);
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			id,
 			ref: innerDomRef,
 			className: "univer-absolute univer-overflow-hidden",
-			style: { ...innerStyle.current },
+			style: {
+				...layout.inner,
+				overflow: floatDomOverflow.innerOverflow
+			},
 			children: component
 		})
 	});
-});
+}
 const FloatDom = ({ unitId }) => {
 	var _layers$filter;
 	const instanceService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IUniverInstanceService);
 	const layers = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(CanvasFloatDomService).domLayers$);
-	const focusUnit = (0, _wendellhu_redi_react_bindings.useObservable)(instanceService.focused$);
-	const currentUnitId = unitId || focusUnit;
-	return layers === null || layers === void 0 || (_layers$filter = layers.filter((layer) => layer[1].unitId === currentUnitId)) === null || _layers$filter === void 0 ? void 0 : _layers$filter.map((layer) => {
+	const currentUnitId = resolveFloatDomCurrentUnitId(unitId, (0, _wendellhu_redi_react_bindings.useObservable)(instanceService.focused$));
+	return layers === null || layers === void 0 || (_layers$filter = layers.filter((layer) => shouldRenderFloatDomLayer(layer[1], currentUnitId))) === null || _layers$filter === void 0 ? void 0 : _layers$filter.map((layer) => {
 		var _layer$1$domId;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatDomSingle, {
 			id: (_layer$1$domId = layer[1].domId) !== null && _layer$1$domId !== void 0 ? _layer$1$domId : layer[0],
@@ -1624,6 +1812,27 @@ const FloatDom = ({ unitId }) => {
 		}, layer[0]);
 	});
 };
+function resolveFloatDomCurrentUnitId(unitId, focusedUnit) {
+	if (typeof unitId === "string") return unitId;
+	if (typeof focusedUnit === "string") return focusedUnit;
+	if (focusedUnit != null && typeof focusedUnit === "object" && "getUnitId" in focusedUnit && typeof focusedUnit.getUnitId === "function") {
+		const focusedUnitId = focusedUnit.getUnitId();
+		return typeof focusedUnitId === "string" ? focusedUnitId : null;
+	}
+	return null;
+}
+function resolveFloatDomOverflow(props) {
+	var _viewport$bleedWidth;
+	const viewport = props.customBlockRenderViewport;
+	if (!(Number.isFinite(viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth) && ((_viewport$bleedWidth = viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth) !== null && _viewport$bleedWidth !== void 0 ? _viewport$bleedWidth : 0) > 0)) return {
+		outerOverflow: "hidden",
+		innerOverflow: "hidden"
+	};
+	return {
+		outerOverflow: "visible",
+		innerOverflow: "visible"
+	};
+}
 
 //#endregion
 //#region src/services/popup/canvas-popup.service.ts
@@ -1858,7 +2067,6 @@ RectPopup.useContext = () => (0, react.useContext)(RectPopupContext);
 //#endregion
 //#region src/views/components/popup/CanvasPopup.tsx
 const SingleCanvasPopup = ({ popup, children }) => {
-	const [hidden, setHidden] = (0, react.useState)(false);
 	const anchorRect$ = (0, react.useMemo)(() => popup.anchorRect$.pipe((0, rxjs.throttleTime)(0, rxjs.animationFrameScheduler), (0, rxjs.map)((anchorRect) => {
 		var _popup$offset;
 		const { bottom, left, right, top } = anchorRect;
@@ -1879,26 +2087,21 @@ const SingleCanvasPopup = ({ popup, children }) => {
 		return (_popup$excludeRects$ = popup.excludeRects$) === null || _popup$excludeRects$ === void 0 ? void 0 : _popup$excludeRects$.pipe((0, rxjs.throttleTime)(0, rxjs.animationFrameScheduler));
 	}, [popup.excludeRects$]), popup.excludeRects);
 	const { canvasElement, hideOnInvisible = true, hiddenType = "destroy" } = popup;
-	(0, react.useEffect)(() => {
-		if (!hideOnInvisible) return;
-		const anchorRectSub = (0, rxjs.combineLatest)([anchorRect$, hiddenRects$]).subscribe(([rectWithOffset, hiddenRects]) => {
-			const { top, left, bottom, right } = canvasElement.getBoundingClientRect();
-			const rectHeight = rectWithOffset.bottom - rectWithOffset.top;
-			const rectWidth = rectWithOffset.right - rectWithOffset.left;
-			const isInHiddenRect = hiddenRects.some((hiddenRect) => {
-				const bufferY = Math.min(.5 * rectHeight, 10);
-				const bufferX = Math.min(.5 * rectWidth, 10);
-				return rectWithOffset.top >= hiddenRect.top - bufferY && rectWithOffset.bottom <= hiddenRect.bottom + bufferY && rectWithOffset.left >= hiddenRect.left - bufferX && rectWithOffset.right <= hiddenRect.right + bufferX;
-			});
-			if (rectWithOffset.bottom < top || rectWithOffset.top > bottom || rectWithOffset.right < left || rectWithOffset.left > right || isInHiddenRect) setHidden(true);
-			else setHidden(false);
+	const hidden = (0, _wendellhu_redi_react_bindings.useObservable)(hideOnInvisible ? () => (0, rxjs.combineLatest)([anchorRect$, hiddenRects$]).pipe((0, rxjs.map)(([rectWithOffset, hiddenRects]) => {
+		const { top, left, bottom, right } = canvasElement.getBoundingClientRect();
+		const rectHeight = rectWithOffset.bottom - rectWithOffset.top;
+		const rectWidth = rectWithOffset.right - rectWithOffset.left;
+		const isInHiddenRect = hiddenRects.some((hiddenRect) => {
+			const bufferY = Math.min(.5 * rectHeight, 10);
+			const bufferX = Math.min(.5 * rectWidth, 10);
+			return rectWithOffset.top >= hiddenRect.top - bufferY && rectWithOffset.bottom <= hiddenRect.bottom + bufferY && rectWithOffset.left >= hiddenRect.left - bufferX && rectWithOffset.right <= hiddenRect.right + bufferX;
 		});
-		return () => anchorRectSub.unsubscribe();
-	}, [
-		canvasElement,
-		hideOnInvisible,
+		return rectWithOffset.bottom < top || rectWithOffset.top > bottom || rectWithOffset.right < left || rectWithOffset.left > right || isInHiddenRect;
+	})) : null, false, false, [
 		anchorRect$,
-		hiddenRects$
+		canvasElement,
+		hiddenRects$,
+		hideOnInvisible
 	]);
 	if (hidden && hiddenType === "destroy") return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RectPopup, {
@@ -1930,13 +2133,41 @@ function CanvasPopup() {
 	return (0, _wendellhu_redi_react_bindings.useObservable)(popupService.popups$, void 0, true).map((item) => {
 		const [key, popup] = item;
 		const Component = componentManager.get(popup.componentKey);
+		const PopupComponent = Component && popup.connectorInjector ? (0, _wendellhu_redi_react_bindings.connectInjector)(Component, popup.connectorInjector) : Component;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleCanvasPopup, {
 			popup,
-			children: Component ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { popup }) : null
+			children: PopupComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopupComponent, { popup })
 		}, key);
 	});
 }
 
+//#endregion
+//#region src/services/ribbon/ribbon-override.service.ts
+const IRibbonOverrideService = (0, _univerjs_core.createIdentifier)("univer.ribbon-override-service");
+var RibbonOverrideService = class extends _univerjs_core.Disposable {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_override$", new rxjs.BehaviorSubject(null));
+		_defineProperty(this, "override$", this._override$.asObservable());
+	}
+	getOverride() {
+		return this._override$.getValue();
+	}
+	activate(override) {
+		this._override$.next(override);
+	}
+	clear(id) {
+		const current = this.getOverride();
+		if (!current) return;
+		if (!id || current.id === id) this._override$.next(null);
+	}
+	dispose() {
+		this._override$.next(null);
+		this._override$.complete();
+		super.dispose();
+	}
+};
+
 //#endregion
 //#region src/services/ribbon/ribbon.service.ts
 const IRibbonService = (0, _univerjs_core.createIdentifier)("univer.ribbon-service");
@@ -2113,7 +2344,8 @@ function ComponentContainer(props) {
 */
 function useComponentsOfPart(part, injector) {
 	var _injector$get;
-	const uiPartsService = (_injector$get = injector === null || injector === void 0 ? void 0 : injector.get(IUIPartsService)) !== null && _injector$get !== void 0 ? _injector$get : (0, _wendellhu_redi_react_bindings.useDependency)(IUIPartsService);
+	const injectedUIPartsService = (0, _wendellhu_redi_react_bindings.useDependency)(IUIPartsService);
+	const uiPartsService = (_injector$get = injector === null || injector === void 0 ? void 0 : injector.get(IUIPartsService)) !== null && _injector$get !== void 0 ? _injector$get : injectedUIPartsService;
 	const changeInfo = (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => uiPartsService.uiVisibleChange$.pipe((0, rxjs.filter)((ui) => ui.ui === part)), [part, uiPartsService]));
 	const updateCounterRef = (0, react.useRef)(0);
 	return (0, react.useMemo)(() => uiPartsService.isUIVisible(part) ? uiPartsService.getComponents(part) : /* @__PURE__ */ new Set(), [(0, _wendellhu_redi_react_bindings.useObservable)(() => uiPartsService.componentRegistered$.pipe((0, rxjs.filter)((key) => key === part), (0, rxjs.debounceTime)(200), (0, rxjs.map)(() => updateCounterRef.current += 1), (0, rxjs.startWith)(updateCounterRef.current += 1)), void 0, void 0, [
@@ -2290,33 +2522,14 @@ function CustomLabel(props) {
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const componentManager = (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager);
 	const iconManager = (0, _wendellhu_redi_react_bindings.useDependency)(IconManager);
-	const [subscribedValue, setSubscribedValue] = (0, react.useState)(value);
-	const [realIcon, setRealIcon] = (0, react.useState)("");
+	const subscribedValue = (0, _wendellhu_redi_react_bindings.useObservable)(value$ !== null && value$ !== void 0 ? value$ : null, value);
+	const subscribedIcon = (0, _wendellhu_redi_react_bindings.useObservable)((0, rxjs.isObservable)(icon) ? icon : null, "");
+	const realIcon = (0, rxjs.isObservable)(icon) ? subscribedIcon : icon !== null && icon !== void 0 ? icon : "";
 	const nodes = [];
 	let index = 0;
-	(0, react.useEffect)(() => {
-		if (value$) {
-			const subscription = value$.subscribe((v) => {
-				setSubscribedValue(v);
-			});
-			return () => {
-				subscription.unsubscribe();
-			};
-		}
-	}, [value$]);
 	const realValue = (0, react.useMemo)(() => {
 		return value !== null && value !== void 0 ? value : subscribedValue;
 	}, [subscribedValue, value]);
-	(0, react.useEffect)(() => {
-		let subscription = null;
-		if ((0, rxjs.isObservable)(icon)) subscription = icon.subscribe((v) => {
-			setRealIcon(v);
-		});
-		else setRealIcon(icon !== null && icon !== void 0 ? icon : "");
-		return () => {
-			subscription === null || subscription === void 0 || subscription.unsubscribe();
-		};
-	}, [icon]);
 	const isValid = (0, react.useMemo)(() => {
 		if (realValue && typeof realValue === "string") return new _univerjs_core.ColorKit(realValue).isValid;
 		return false;
@@ -2361,6 +2574,7 @@ function CustomLabel(props) {
 * @returns The menu item's status
 */
 function useToolbarItemStatus(menuItem) {
+	var _selectionsValue$2;
 	const { disabled$, hidden$, activated$, value$ } = menuItem;
 	let selectionsValue$;
 	if (isMenuButtonSelectorItem(menuItem)) {
@@ -2370,37 +2584,18 @@ function useToolbarItemStatus(menuItem) {
 			selectionsValue$ = selections === null || selections === void 0 || (_selections$ = selections[0]) === null || _selections$ === void 0 ? void 0 : _selections$.value$;
 		}
 	}
-	const [value, setValue] = (0, react.useState)();
-	const [disabled, setDisabled] = (0, react.useState)(false);
-	const [activated, setActivated] = (0, react.useState)(false);
-	const [hidden, setHidden] = (0, react.useState)(false);
-	const [selectionsValue, setSelectionsValue] = (0, react.useState)();
-	(0, react.useEffect)(() => {
-		const subscriptions = [];
-		disabled$ && subscriptions.push(disabled$.subscribe((disabled) => setDisabled(disabled)));
-		hidden$ && subscriptions.push(hidden$.subscribe((hidden) => setHidden(hidden)));
-		activated$ && subscriptions.push(activated$.subscribe((activated) => setActivated(activated)));
-		value$ && subscriptions.push(value$.subscribe((value) => {
-			setValue(value);
-		}));
-		selectionsValue$ && subscriptions.push(selectionsValue$.subscribe((value) => {
-			setSelectionsValue(value);
-			setValue(value);
-		}));
-		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
-	}, [
-		activated$,
-		disabled$,
-		hidden$,
-		value$,
-		selectionsValue$
-	]);
+	const disabled = (0, _wendellhu_redi_react_bindings.useObservable)(disabled$ !== null && disabled$ !== void 0 ? disabled$ : null, false);
+	const activated = (0, _wendellhu_redi_react_bindings.useObservable)(activated$ !== null && activated$ !== void 0 ? activated$ : null, false);
+	const hidden = (0, _wendellhu_redi_react_bindings.useObservable)(hidden$ !== null && hidden$ !== void 0 ? hidden$ : null, false);
 	return {
 		disabled,
-		value,
+		value: (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
+			var _selectionsValue$;
+			return (0, rxjs.merge)(value$ !== null && value$ !== void 0 ? value$ : rxjs.EMPTY, (_selectionsValue$ = selectionsValue$) !== null && _selectionsValue$ !== void 0 ? _selectionsValue$ : rxjs.EMPTY);
+		}, [selectionsValue$, value$])),
 		activated,
 		hidden,
-		selectionsValue
+		selectionsValue: (0, _wendellhu_redi_react_bindings.useObservable)((_selectionsValue$2 = selectionsValue$) !== null && _selectionsValue$2 !== void 0 ? _selectionsValue$2 : null)
 	};
 }
 function useToolbarShortcutDisplay({ id, commandId, shortcut }) {
@@ -2419,39 +2614,52 @@ const TooltipWrapperContext = (0, react.createContext)({
 	dropdownVisible: false,
 	setDropdownVisible: (_visible) => {}
 });
+const ToolbarDropdownContext = (0, react.createContext)(null);
+function ToolbarDropdownProvider(props) {
+	const [openDropdownKey, setOpenDropdownKey] = (0, react.useState)(null);
+	const contextValue = (0, react.useMemo)(() => ({
+		openDropdownKey,
+		setOpenDropdownKey
+	}), [openDropdownKey]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDropdownContext.Provider, {
+		value: contextValue,
+		children: props.children
+	});
+}
 const TooltipWrapper = (0, react.forwardRef)((props, ref) => {
-	const { children, ...tooltipProps } = props;
+	const { children, dropdownKey, ...tooltipProps } = props;
 	const spanRef = (0, react.useRef)(null);
 	const [tooltipVisible, setTooltipVisible] = (0, react.useState)(false);
-	const [dropdownVisible, setDropdownVisible] = (0, react.useState)(false);
+	const [localDropdownVisible, setLocalDropdownVisible] = (0, react.useState)(false);
+	const toolbarDropdownContext = (0, react.useContext)(ToolbarDropdownContext);
+	const dropdownVisible = dropdownKey && toolbarDropdownContext ? toolbarDropdownContext.openDropdownKey === dropdownKey : localDropdownVisible;
 	function handleChangeTooltipVisible(visible) {
 		if (dropdownVisible) setTooltipVisible(false);
 		else setTooltipVisible(visible);
 	}
-	function handleChangeDropdownVisible(visible) {
-		setDropdownVisible(visible);
+	const handleChangeDropdownVisible = (0, react.useCallback)((visible) => {
+		if (dropdownKey && toolbarDropdownContext) toolbarDropdownContext.setOpenDropdownKey(visible ? dropdownKey : null);
+		else setLocalDropdownVisible(visible);
 		setTooltipVisible(false);
-	}
+	}, [dropdownKey, toolbarDropdownContext]);
 	const contextValue = (0, react.useMemo)(() => ({
 		dropdownVisible,
 		setDropdownVisible: handleChangeDropdownVisible
-	}), [dropdownVisible]);
+	}), [dropdownVisible, handleChangeDropdownVisible]);
 	(0, react.useImperativeHandle)(ref, () => ({ el: spanRef.current }));
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		ref: spanRef,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipWrapperContext.Provider, {
+			value: contextValue,
+			children
+		})
+	});
 	return tooltipProps.title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
 		visible: tooltipVisible,
 		onVisibleChange: handleChangeTooltipVisible,
 		...tooltipProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			ref: spanRef,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipWrapperContext.Provider, {
-				value: contextValue,
-				children
-			})
-		})
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		ref: spanRef,
-		children
-	});
+		children: content
+	}) : content;
 });
 function DropdownWrapper(props) {
 	const { children, overlay, disabled, align = "start" } = props;
@@ -2479,9 +2687,8 @@ function DropdownMenuLabel({ icon, value, option, onOptionSelect }) {
 	var _option$label;
 	const onChange = (v) => {
 		onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
-			value: v,
-			label: option === null || option === void 0 ? void 0 : option.label,
-			commandId: option === null || option === void 0 ? void 0 : option.commandId
+			...option,
+			value: v
 		});
 	};
 	const hasCheckMark = typeof option.label === "string" || typeof option.label === "object" && ((_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.selectable) !== false;
@@ -2504,24 +2711,28 @@ function DropdownMenuLabel({ icon, value, option, onOptionSelect }) {
 		})]
 	});
 }
+function getOptionKey(option) {
+	var _ref, _ref2, _option$id, _option$label2;
+	return String((_ref = (_ref2 = (_option$id = option.id) !== null && _option$id !== void 0 ? _option$id : option.commandId) !== null && _ref2 !== void 0 ? _ref2 : option.value) !== null && _ref !== void 0 ? _ref : typeof option.label === "string" ? option.label : (_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.name);
+}
 function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled, onOptionSelect }) {
 	const { dropdownVisible, setDropdownVisible } = (0, react.useContext)(TooltipWrapperContext);
 	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
-	const [hiddenStates, setHiddenStates] = (0, react.useState)({});
-	const [menuVersion, setMenuVersion] = (0, react.useState)(0);
-	(0, react.useEffect)(() => {
-		const subscription = menuManagerService.menuChanged$.subscribe(() => {
-			setMenuVersion((version) => version + 1);
+	const resolveMenuItems = () => menuId ? menuManagerService.getMenuByPositionKey(menuId) : [];
+	const menuItems = (0, _wendellhu_redi_react_bindings.useObservable)(() => menuManagerService.menuChanged$.pipe((0, rxjs.map)(resolveMenuItems), (0, rxjs.startWith)(resolveMenuItems())), resolveMenuItems(), false, [menuId, menuManagerService]);
+	const hiddenStates = (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
+		const itemStates = menuItems.map((item) => {
+			var _item$item$hidden$, _item$item;
+			return (item.children ? (0, rxjs.combineLatest)(item.children.map((subItem) => {
+				var _subItem$item$hidden$, _subItem$item;
+				return (_subItem$item$hidden$ = (_subItem$item = subItem.item) === null || _subItem$item === void 0 ? void 0 : _subItem$item.hidden$) !== null && _subItem$item$hidden$ !== void 0 ? _subItem$item$hidden$ : (0, rxjs.of)(false);
+			})).pipe((0, rxjs.map)((hiddenValues) => hiddenValues.every(Boolean))) : (_item$item$hidden$ = (_item$item = item.item) === null || _item$item === void 0 ? void 0 : _item$item.hidden$) !== null && _item$item$hidden$ !== void 0 ? _item$item$hidden$ : (0, rxjs.of)(false)).pipe((0, rxjs.map)((hidden) => [String(item.key), hidden]));
 		});
-		return () => subscription.unsubscribe();
-	}, [menuManagerService]);
-	const menuItems = (0, react.useMemo)(() => {
-		return menuId ? menuManagerService.getMenuByPositionKey(menuId) : [];
-	}, [
-		menuId,
-		menuManagerService,
-		menuVersion
-	]);
+		return itemStates.length ? (0, rxjs.merge)(...itemStates).pipe((0, rxjs.scan)((states, [key, hidden]) => ({
+			...states,
+			[key]: hidden
+		}), {}), (0, rxjs.startWith)({})) : (0, rxjs.of)({});
+	}, [menuItems]), {});
 	const filteredMenuItems = (0, react.useMemo)(() => {
 		return menuItems.filter((item) => {
 			var _item$key;
@@ -2532,58 +2743,28 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	function handleVisibleChange(visible) {
 		setDropdownVisible(visible);
 	}
+	function handleEmbedBoundaryFocusOutside(event) {
+		keepInteractionInsideSameEmbedBoundary(event);
+	}
 	function handleOptionSelect(option) {
 		onOptionSelect(option);
 		setDropdownVisible(false);
 	}
-	(0, react.useEffect)(() => {
-		const subscriptions = [];
-		menuItems.forEach((item) => {
-			if (!item.children) {
-				var _item$item;
-				if ((_item$item = item.item) === null || _item$item === void 0 ? void 0 : _item$item.hidden$) {
-					const sub = item.item.hidden$.subscribe((hidden) => {
-						setHiddenStates((prev) => ({
-							...prev,
-							[item.key]: hidden
-						}));
-					});
-					subscriptions.push(sub);
-				}
-			} else {
-				const sub = (0, rxjs.combineLatest)(item.children.map((subItem) => {
-					var _subItem$item$hidden$, _subItem$item;
-					return (_subItem$item$hidden$ = (_subItem$item = subItem.item) === null || _subItem$item === void 0 ? void 0 : _subItem$item.hidden$) !== null && _subItem$item$hidden$ !== void 0 ? _subItem$item$hidden$ : (0, rxjs.of)(false);
-				})).subscribe((hiddenValues) => {
-					const isAllHidden = hiddenValues.every((hidden) => hidden === true);
-					setHiddenStates((prev) => ({
-						...prev,
-						[item.key]: isAllHidden
-					}));
-				});
-				subscriptions.push(sub);
-			}
-		});
-		return () => {
-			subscriptions.forEach((sub) => sub === null || sub === void 0 ? void 0 : sub.unsubscribe());
-			setHiddenStates({});
-		};
-	}, [menuItems]);
 	if (slot) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownWrapper, {
 		disabled,
-		overlay: options.map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuLabel, {
+		overlay: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuLabel, {
 			value,
 			option,
 			onOptionSelect: handleOptionSelect
-		}, index)),
+		}, getOptionKey(option))),
 		children
 	});
 	if (options === null || options === void 0 ? void 0 : options.length) {
 		const items = options.map((option) => {
-			var _option$label2;
+			var _option$label3;
 			return {
 				type: "item",
-				className: (0, _univerjs_design.clsx)({ "focus:univer-bg-white": typeof option.label !== "string" && ((_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.hoverable) === false }),
+				className: (0, _univerjs_design.clsx)({ "focus:univer-bg-white": typeof option.label !== "string" && ((_option$label3 = option.label) === null || _option$label3 === void 0 ? void 0 : _option$label3.hoverable) === false }),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuLabel, {
 					icon: option.icon,
 					value,
@@ -2626,6 +2807,8 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 			disabled,
 			open: dropdownVisible,
 			onOpenChange: handleVisibleChange,
+			onFocusOutside: handleEmbedBoundaryFocusOutside,
+			onInteractOutside: handleEmbedBoundaryFocusOutside,
 			children
 		});
 	} else {
@@ -2660,6 +2843,8 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 			disabled,
 			open: dropdownVisible,
 			onOpenChange: handleVisibleChange,
+			onFocusOutside: handleEmbedBoundaryFocusOutside,
+			onInteractOutside: handleEmbedBoundaryFocusOutside,
 			children
 		});
 	}
@@ -2791,7 +2976,8 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 			if (disabled) return;
 			let commandId = sId;
 			if (option.id) commandId = option.id;
-			executeCommand(commandId, { value: option.value });
+			const commandParams = typeof option.params === "function" ? option.params(option.value) : option.params;
+			executeCommand(commandId, commandParams !== null && commandParams !== void 0 ? commandParams : { value: option.value });
 		}
 		function handleSelectionsValueChange(value) {
 			if (disabled) return;
@@ -2799,7 +2985,10 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 		}
 		function handleClick() {
 			if (disabled) return;
-			if (menuType === 2) executeCommand(bId, { value });
+			if (menuType === 2) {
+				const commandParams = typeof params === "function" ? params() : params;
+				executeCommand(bId, commandParams !== null && commandParams !== void 0 ? commandParams : { value });
+			}
 		}
 		if (menuType === 2) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-u-command": id,
@@ -2864,7 +3053,6 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 	function renderButtonType() {
 		var _label$name;
 		const isCustomComponent = componentManager.get(typeof label === "string" ? label : (_label$name = label === null || label === void 0 ? void 0 : label.name) !== null && _label$name !== void 0 ? _label$name : "");
-		const commandValue = (value !== null && value !== void 0 ? value : typeof params === "function") ? params() : params;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
 			"data-u-command": id,
 			className: "univer-text-sm",
@@ -2873,7 +3061,8 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 			disabled,
 			onClick: () => {
 				var _props$commandId;
-				return executeCommand((_props$commandId = props.commandId) !== null && _props$commandId !== void 0 ? _props$commandId : props.id, commandValue);
+				const commandParams = typeof params === "function" ? params() : params;
+				executeCommand((_props$commandId = props.commandId) !== null && _props$commandId !== void 0 ? _props$commandId : props.id, commandParams !== null && commandParams !== void 0 ? commandParams : typeof value === "undefined" ? void 0 : { value });
 			},
 			onDoubleClick: () => props.subId && executeCommand(props.subId),
 			children: isCustomComponent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
@@ -2896,6 +3085,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 		ref,
 		title: tooltipTitle,
 		placement: "bottom",
+		dropdownKey: id,
 		children: renderItem()
 	});
 });
@@ -2903,15 +3093,20 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 //#endregion
 //#region src/views/components/ribbon/Ribbon.tsx
 function Ribbon(props) {
-	const { ribbonType, headerMenuComponents, headerMenu = true } = props;
-	const ribbonService = (0, _wendellhu_redi_react_bindings.useDependency)(IRibbonService);
+	var _ribbonOverride$ribbo;
+	const { ribbonType, headerMenuComponents, headerMenu = true, toolbarOnly = false, headerClassName } = props;
+	const defaultRibbonService = (0, _wendellhu_redi_react_bindings.useDependency)(IRibbonService);
+	const ribbonOverrideService = (0, _wendellhu_redi_react_bindings.useDependency)(IRibbonOverrideService);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const ribbonOverride = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonOverrideService.override$, ribbonOverrideService.getOverride());
+	const ribbonService = (_ribbonOverride$ribbo = ribbonOverride === null || ribbonOverride === void 0 ? void 0 : ribbonOverride.ribbonService) !== null && _ribbonOverride$ribbo !== void 0 ? _ribbonOverride$ribbo : defaultRibbonService;
 	const containerRef = (0, react.useRef)(null);
 	const toolbarItemRefs = (0, react.useRef)({});
 	const ribbonData = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.ribbon$, []);
 	const activatedTab = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.activatedTab$, "ribbon.start");
 	const collapsedIds = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.collapsedIds$, []);
 	const fakeToolbarVisible = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.fakeToolbarVisible$, false);
+	const hideToolbar = (ribbonOverride === null || ribbonOverride === void 0 ? void 0 : ribbonOverride.hideToolbar) === true;
 	const ribbon = (0, react.useMemo)(() => {
 		if (ribbonType === "simple") {
 			const simpleRibbon = [{
@@ -2937,7 +3132,7 @@ function Ribbon(props) {
 	const handleSelectTab = (0, react.useCallback)((group) => {
 		toolbarItemRefs.current = {};
 		ribbonService.setActivatedTab(group.key);
-	}, []);
+	}, [ribbonService]);
 	const activeGroup = (0, react.useMemo)(() => {
 		var _ribbon$find$children, _ribbon$find2;
 		const allGroups = (_ribbon$find$children = (_ribbon$find2 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find2 === void 0 ? void 0 : _ribbon$find2.children) !== null && _ribbon$find$children !== void 0 ? _ribbon$find$children : [];
@@ -2965,6 +3160,13 @@ function Ribbon(props) {
 		activatedTab
 	]);
 	(0, react.useEffect)(() => {
+		if (hideToolbar) {
+			toolbarItemRefs.current = {};
+			ribbonService.setCollapsedIds([]);
+			ribbonService.setFakeToolbarVisible(false);
+			return;
+		}
+		if (!containerRef.current) return;
 		let timer = null;
 		const observer = new ResizeObserver((0, _univerjs_core.throttle)((entries) => {
 			for (const entry of entries) {
@@ -2994,7 +3196,12 @@ function Ribbon(props) {
 			timer && cancelAnimationFrame(timer);
 			observer.disconnect();
 		};
-	}, [ribbon, activatedTab]);
+	}, [
+		hideToolbar,
+		ribbon,
+		activatedTab,
+		ribbonService
+	]);
 	const fakeToolbar = (0, react.useMemo)(() => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"aria-hidden": "true",
@@ -3018,76 +3225,118 @@ function Ribbon(props) {
 				}) }, groupItem.key);
 			})
 		});
-	}, [activeGroup.allGroups, fakeToolbarVisible]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-u-comp": "ribbon-header-menu",
-			className: (0, _univerjs_design.clsx)("univer-relative univer-select-none", { "univer-h-9": ribbonType === "classic" || headerMenuComponents && headerMenuComponents.size > 0 }),
-			children: [ribbonType === "classic" && ribbon.length >= 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassicMenu, {
-				ribbon,
-				activatedTab,
-				onSelectTab: handleSelectTab
-			}), headerMenu && headerMenuComponents && headerMenuComponents.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-absolute univer-right-2 univer-top-0 univer-flex univer-h-full univer-flex-row univer-items-center univer-gap-2 rtl:univer-left-2 rtl:univer-right-auto [&>*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded [&>*]:univer-px-1 [&>*]:univer-transition-colors hover:[&>*]:univer-bg-gray-100",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerMenuComponents })
-			})]
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, _univerjs_design.clsx)("univer-box-border univer-grid univer-h-10 univer-grid-flow-col univer-items-center univer-px-3 univer-text-sm", {
-				"univer-grid-cols-[1fr] univer-justify-center": ribbonType === "classic" || ribbon.length === 1,
-				"univer-grid-cols-[auto,1fr]": ribbon.length > 1 && ribbonType !== "classic"
-			}, _univerjs_design.borderBottomClassName),
-			children: [ribbonType === "collapsed" && ribbon.length >= 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultMenu, {
-				ribbon,
-				activatedTab,
-				onSelectTab: handleSelectTab
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-u-comp": "ribbon-toolbar",
-				ref: containerRef,
-				className: (0, _univerjs_design.clsx)("univer-flex univer-overflow-hidden rtl:univer-divide-x-reverse", _univerjs_design.divideXClassName, { "univer-justify-center": ribbonType === "classic" }),
-				role: "toolbar",
-				"aria-label": localeService.t(activatedTabTitle),
-				children: [activeGroup.visibleGroups.map((groupItem) => {
-					var _groupItem$children3, _groupItem$children4;
-					return (((_groupItem$children3 = groupItem.children) === null || _groupItem$children3 === void 0 ? void 0 : _groupItem$children3.length) || groupItem.item) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2 empty:univer-hidden",
-						children: groupItem.children && ((_groupItem$children4 = groupItem.children) === null || _groupItem$children4 === void 0 ? void 0 : _groupItem$children4.map((child) => child.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, { ...child.item }, child.key)))
-					}) }, groupItem.key);
-				}), collapsedIds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					"data-u-comp": "ribbon-toolbar-more",
-					className: "univer-pl-2 rtl:univer-pr-2",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
-						collisionPadding: {
-							right: 12,
-							left: 12
-						},
-						onOpenAutoFocus: (e) => e.preventDefault(),
-						overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "univer-box-border univer-grid univer-max-w-[--radix-popper-available-width] univer-gap-2 univer-p-2",
-							children: activeGroup.hiddenGroups.map((groupItem) => {
-								var _groupItem$children5;
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "univer-flex univer-items-center univer-gap-2",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "univer-flex univer-flex-wrap univer-gap-2",
-										children: groupItem.children ? (_groupItem$children5 = groupItem.children) === null || _groupItem$children5 === void 0 ? void 0 : _groupItem$children5.map((child) => child.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, { ...child.item }, child.key)) : groupItem.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, { ...groupItem.item }, groupItem.key)
-									})
-								}, groupItem.key);
-							})
-						}),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: toolbarButtonClassName,
-							"aria-label": localeService.t("ui.ribbon.more"),
-							"aria-haspopup": "true",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreVerticalIcon, {})
+	}, [activeGroup.allGroups, fakeToolbarVisible]);
+	const embedRibbonOverrideAttributes = ribbonOverride ? {
+		"data-embed-ribbon-override": "true",
+		"data-embed-id": ribbonOverride.id
+	} : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RibbonOverrideRuntimeProvider, {
+		override: ribbonOverride,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-u-comp": "ribbon-header-menu",
+				...embedRibbonOverrideAttributes,
+				className: (0, _univerjs_design.clsx)("univer-relative univer-select-none", headerClassName, {
+					"univer-hidden": toolbarOnly,
+					"univer-h-9": !toolbarOnly && (ribbonType === "classic" || headerMenuComponents && headerMenuComponents.size > 0)
+				}),
+				children: [
+					!toolbarOnly && (ribbonOverride === null || ribbonOverride === void 0 ? void 0 : ribbonOverride.placeholderTitle) && ribbon.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: (0, _univerjs_design.clsx)("univer-flex univer-h-9 univer-items-end univer-px-3", { "univer-justify-center": hideToolbar }),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "univer-relative univer-inline-flex univer-h-8 univer-items-center univer-justify-center univer-rounded-t univer-bg-primary-50 univer-px-3 univer-text-sm univer-font-medium univer-text-primary-600",
+							children: ribbonOverride.placeholderTitle
 						})
+					}),
+					!toolbarOnly && ribbonType === "classic" && ribbon.length >= 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassicMenu, {
+						ribbon,
+						activatedTab,
+						onSelectTab: handleSelectTab
+					}),
+					headerMenu && headerMenuComponents && headerMenuComponents.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-absolute univer-right-2 univer-top-0 univer-flex univer-h-full univer-flex-row univer-items-center univer-gap-2 rtl:univer-left-2 rtl:univer-right-auto [&>*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded [&>*]:univer-px-1 [&>*]:univer-transition-colors hover:[&>*]:univer-bg-gray-100",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerMenuComponents })
 					})
+				]
+			}),
+			!hideToolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...embedRibbonOverrideAttributes,
+				className: (0, _univerjs_design.clsx)("univer-box-border univer-grid univer-h-10 univer-grid-flow-col univer-items-center univer-px-3 univer-text-sm", {
+					"univer-grid-cols-[1fr] univer-justify-center": ribbonType === "classic" || ribbon.length === 1,
+					"univer-grid-cols-[auto,1fr]": ribbon.length > 1 && ribbonType !== "classic"
+				}, _univerjs_design.borderBottomClassName),
+				children: [ribbonType === "collapsed" && ribbon.length >= 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultMenu, {
+					ribbon,
+					activatedTab,
+					onSelectTab: handleSelectTab
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-u-comp": "ribbon-toolbar",
+					ref: containerRef,
+					className: (0, _univerjs_design.clsx)("univer-flex univer-overflow-hidden", _univerjs_design.divideXClassName, { "univer-justify-center": ribbonType === "classic" }),
+					role: "toolbar",
+					"aria-label": localeService.t(activatedTabTitle),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarDropdownProvider, { children: [activeGroup.visibleGroups.map((groupItem) => {
+						var _groupItem$children3, _groupItem$children4;
+						return (((_groupItem$children3 = groupItem.children) === null || _groupItem$children3 === void 0 ? void 0 : _groupItem$children3.length) || groupItem.item) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2 empty:univer-hidden",
+							children: groupItem.children && ((_groupItem$children4 = groupItem.children) === null || _groupItem$children4 === void 0 ? void 0 : _groupItem$children4.map((child) => child.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, { ...child.item }, child.key)))
+						}) }, groupItem.key);
+					}), collapsedIds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-pl-2 rtl:univer-pr-2",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+							collisionPadding: {
+								right: 12,
+								left: 12
+							},
+							onOpenAutoFocus: (e) => e.preventDefault(),
+							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-box-border univer-grid univer-max-w-[--radix-popper-available-width] univer-gap-2 univer-p-2",
+								children: activeGroup.hiddenGroups.map((groupItem) => {
+									var _groupItem$children5;
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "univer-flex univer-items-center univer-gap-2",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: "univer-flex univer-flex-wrap univer-gap-2",
+											children: groupItem.children ? (_groupItem$children5 = groupItem.children) === null || _groupItem$children5 === void 0 ? void 0 : _groupItem$children5.map((child) => child.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, { ...child.item }, child.key)) : groupItem.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, { ...groupItem.item }, groupItem.key)
+										})
+									}, groupItem.key);
+								})
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: toolbarButtonClassName,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreVerticalIcon, {})
+							})
+						})
+					})] }, activatedTab)
 				})]
-			})]
-		}),
-		fakeToolbar
-	] });
+			}),
+			fakeToolbar
+		] })
+	});
+}
+function RibbonOverrideRuntimeProvider(props) {
+	var _override$portalConta;
+	const { override, children } = props;
+	const config = (0, react.useContext)(_univerjs_design.ConfigContext);
+	const injector = override === null || override === void 0 ? void 0 : override.injector;
+	const ConnectedRibbonOverrideConfigProvider = (0, react.useMemo)(() => injector ? (0, _wendellhu_redi_react_bindings.connectInjector)(RibbonOverrideConfigProvider, injector) : null, [injector]);
+	if (!override || !ConnectedRibbonOverrideConfigProvider) return children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConnectedRibbonOverrideConfigProvider, {
+		locale: config.locale,
+		direction: config.direction,
+		mountContainer: (_override$portalConta = override.portalContainer) !== null && _override$portalConta !== void 0 ? _override$portalConta : config.mountContainer,
+		children
+	});
+}
+function RibbonOverrideConfigProvider(props) {
+	const { children, locale, direction, mountContainer } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ConfigProvider, {
+		locale,
+		direction,
+		mountContainer,
+		children
+	});
 }
 
 //#endregion
@@ -3143,11 +3392,11 @@ var ContextMenuService = class extends _univerjs_core.Disposable {
 	enable() {
 		this.disabled = false;
 	}
-	triggerContextMenu(event, menuType) {
+	triggerContextMenu(event, menuType, context) {
 		var _this$_currentHandler3;
 		event.stopPropagation();
 		if (this.disabled) return;
-		(_this$_currentHandler3 = this._currentHandler) === null || _this$_currentHandler3 === void 0 || _this$_currentHandler3.handleContextMenu(event, menuType);
+		(_this$_currentHandler3 = this._currentHandler) === null || _this$_currentHandler3 === void 0 || _this$_currentHandler3.handleContextMenu(event, menuType, context);
 	}
 	hideContextMenu() {
 		var _this$_currentHandler4;
@@ -3160,6 +3409,25 @@ var ContextMenuService = class extends _univerjs_core.Disposable {
 	}
 };
 
+//#endregion
+//#region src/services/runtime-scope/ui-runtime-scope.service.ts
+const IUIRuntimeScopeService = (0, _univerjs_core.createIdentifier)("ui.runtime-scope.service");
+var UIRuntimeScopeService = class extends _univerjs_core.Disposable {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_scopes", /* @__PURE__ */ new Map());
+	}
+	register(scope) {
+		this._scopes.set(scope.unitId, scope);
+		return (0, _univerjs_core.toDisposable)(() => {
+			if (this._scopes.get(scope.unitId) === scope) this._scopes.delete(scope.unitId);
+		});
+	}
+	get(unitId) {
+		return unitId ? this._scopes.get(unitId) : void 0;
+	}
+};
+
 //#endregion
 //#region src/services/contextmenu/contextmenu-host.service.ts
 const IContextMenuHostService = (0, _univerjs_core.createIdentifier)("ui.contextmenu.host.service");
@@ -3371,6 +3639,7 @@ function DesignTinyMenuGroup({ items, columns, sizeVariant = "default", layoutVa
 //#endregion
 //#region src/views/menu/desktop/TinyMenuGroup.tsx
 const EMPTY_HIDDEN_ITEM_IDS = [];
+const EMPTY_TINY_MENU_CHILDREN = [];
 const quickTileMenuButtonVariants = (0, _univerjs_design.cva)("univer-relative univer-box-border univer-flex univer-size-12 univer-w-full univer-appearance-none univer-flex-col univer-items-center univer-justify-center univer-gap-0.5 univer-rounded-lg univer-border-none univer-bg-white univer-p-0 univer-font-medium univer-text-gray-700 univer-outline-none univer-transition-all focus-visible:univer-ring-2 focus-visible:univer-ring-primary-600 focus-visible:univer-ring-offset-0 dark:!univer-bg-gray-700 dark:!univer-text-gray-100", {
 	variants: {
 		disabled: {
@@ -3438,52 +3707,24 @@ function QuickTileMenuItem(props) {
 	});
 }
 function UITinyMenuGroup(props) {
+	var _item$children;
 	const { item, activeItemIds, hiddenItemIds = EMPTY_HIDDEN_ITEM_IDS, hoverSuppressed, columns, sizeVariant = "default", layoutVariant = "default", onOptionSelect } = props;
-	const [activeItems, setActiveItems] = (0, react.useState)([]);
-	const [hiddenItems, setHiddenItems] = (0, react.useState)([]);
 	const iconManager = (0, _wendellhu_redi_react_bindings.useDependency)(IconManager);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
-	(0, react.useEffect)(() => {
-		const { children } = item;
-		if (!children) return;
-		const observables = children.map((child) => {
-			var _child$item$activated, _child$item2;
-			return (0, _univerjs_core.convertObservableToBehaviorSubject)((_child$item$activated = (_child$item2 = child.item) === null || _child$item2 === void 0 ? void 0 : _child$item2.activated$) !== null && _child$item$activated !== void 0 ? _child$item$activated : (0, rxjs.of)(false), false);
-		});
-		const subscription = (0, rxjs.combineLatest)(observables).subscribe((activedArr) => {
-			const activeItems = [];
-			for (let index = 0; index < activedArr.length; index++) if (activedArr[index]) activeItems.push(getTinyMenuChildStateKey(children[index]));
-			setActiveItems(activeItems);
-		});
-		return () => {
-			subscription.unsubscribe();
-			observables.forEach((observable) => {
-				observable.complete();
-			});
-		};
-	}, [item]);
-	(0, react.useEffect)(() => {
-		const { children } = item;
-		if (!children) return;
-		const observables = children.map((child) => {
-			var _child$item$hidden$, _child$item3;
-			return (0, _univerjs_core.convertObservableToBehaviorSubject)((_child$item$hidden$ = (_child$item3 = child.item) === null || _child$item3 === void 0 ? void 0 : _child$item3.hidden$) !== null && _child$item$hidden$ !== void 0 ? _child$item$hidden$ : (0, rxjs.of)(false), false);
-		});
-		const subscription = (0, rxjs.combineLatest)(observables).subscribe((hiddenArr) => {
-			const hiddenItems = [];
-			for (let index = 0; index < hiddenArr.length; index++) if (hiddenArr[index]) hiddenItems.push(getTinyMenuChildStateKey(children[index]));
-			setHiddenItems(hiddenItems);
-		});
-		return () => {
-			subscription.unsubscribe();
-			observables.forEach((observable) => {
-				observable.complete();
-			});
-		};
-	}, [item]);
+	const children = (_item$children = item.children) !== null && _item$children !== void 0 ? _item$children : EMPTY_TINY_MENU_CHILDREN;
+	const activeItems$ = (0, react.useMemo)(() => children.length ? (0, rxjs.combineLatest)(children.map((child) => {
+		var _child$item$activated, _child$item2;
+		return ((_child$item$activated = (_child$item2 = child.item) === null || _child$item2 === void 0 ? void 0 : _child$item2.activated$) !== null && _child$item$activated !== void 0 ? _child$item$activated : (0, rxjs.of)(false)).pipe((0, rxjs.startWith)(false));
+	})).pipe((0, rxjs.map)((states) => children.flatMap((child, index) => states[index] ? [getTinyMenuChildStateKey(child)] : []))) : (0, rxjs.of)([]), [children]);
+	const hiddenItems$ = (0, react.useMemo)(() => children.length ? (0, rxjs.combineLatest)(children.map((child) => {
+		var _child$item$hidden$, _child$item3;
+		return ((_child$item$hidden$ = (_child$item3 = child.item) === null || _child$item3 === void 0 ? void 0 : _child$item3.hidden$) !== null && _child$item$hidden$ !== void 0 ? _child$item$hidden$ : (0, rxjs.of)(false)).pipe((0, rxjs.startWith)(false));
+	})).pipe((0, rxjs.map)((states) => children.flatMap((child, index) => states[index] ? [getTinyMenuChildStateKey(child)] : []))) : (0, rxjs.of)([]), [children]);
+	const activeItems = (0, _wendellhu_redi_react_bindings.useObservable)(activeItems$, []);
+	const hiddenItems = (0, _wendellhu_redi_react_bindings.useObservable)(hiddenItems$, []);
 	const visibleChildren = (0, react.useMemo)(() => {
-		var _item$children;
-		return getVisibleTinyMenuChildren((_item$children = item.children) !== null && _item$children !== void 0 ? _item$children : [], [...hiddenItems, ...hiddenItemIds]);
+		var _item$children2;
+		return getVisibleTinyMenuChildren((_item$children2 = item.children) !== null && _item$children2 !== void 0 ? _item$children2 : [], [...hiddenItems, ...hiddenItemIds]);
 	}, [
 		hiddenItemIds,
 		hiddenItems,
@@ -3522,9 +3763,9 @@ function UITinyMenuGroup(props) {
 	});
 }
 function UIQuickTileMenuGroup(props) {
-	var _item$children2;
+	var _item$children3;
 	const { item, activeItemIds, hiddenItemIds = EMPTY_HIDDEN_ITEM_IDS, onOptionSelect } = props;
-	if (!((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length)) return null;
+	if (!((_item$children3 = item.children) === null || _item$children3 === void 0 ? void 0 : _item$children3.length)) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-item-center univer-grid univer-grid-cols-3 univer-gap-1.5 univer-py-1",
 		children: getVisibleTinyMenuChildren(item.children, hiddenItemIds).map((menuSchema) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickTileMenuItem, {
@@ -3864,9 +4105,11 @@ function getContextMenuSubmenuPanelClassName(sizeVariant) {
 }
 function ContextMenuPanel(props) {
 	var _layoutService$rootCo, _layoutService$rootCo2;
-	const { menuType, menuSessionVersion = 0, className, activeItemIds, hiddenItemIds, sizeVariant = "default", autoFocus, autoFocusTarget = "first-item", suppressHoverUntilPointerMove = false, onCancel, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect } = props;
-	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
-	const layoutService = (0, _wendellhu_redi_react_bindings.useDependency)(ILayoutService);
+	const { menuType, menuManagerService: providedMenuManagerService, layoutService: providedLayoutService, menuSessionVersion = 0, className, activeItemIds, hiddenItemIds, sizeVariant = "default", autoFocus, autoFocusTarget = "first-item", suppressHoverUntilPointerMove = false, onCancel, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect } = props;
+	const rootMenuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
+	const rootLayoutService = (0, _wendellhu_redi_react_bindings.useDependency)(ILayoutService);
+	const menuManagerService = providedMenuManagerService !== null && providedMenuManagerService !== void 0 ? providedMenuManagerService : rootMenuManagerService;
+	const layoutService = providedLayoutService !== null && providedLayoutService !== void 0 ? providedLayoutService : rootLayoutService;
 	const [menuElement, setMenuElement] = (0, react.useState)(null);
 	const [maxMenuHeight, setMaxMenuHeight] = (0, react.useState)(() => {
 		if (typeof window === "undefined") return 240;
@@ -3969,6 +4212,7 @@ function ContextMenuPanel(props) {
 		onWheel: (event) => event.stopPropagation(),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenu, {
 			menuSchemas: menuItems,
+			menuManagerService,
 			menuSessionVersion,
 			submenuPortalContainer,
 			rootMenuElement: menuElement,
@@ -3984,7 +4228,7 @@ function ContextMenuPanel(props) {
 	});
 }
 function ContextMenuMenu(props) {
-	const { menuSchemas, menuSessionVersion, submenuPortalContainer, rootMenuElement, activeItemIds, hiddenItemIds, hoverSuppressed, sizeVariant, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect, maxMenuHeight } = props;
+	const { menuSchemas, menuManagerService, menuSessionVersion, submenuPortalContainer, rootMenuElement, activeItemIds, hiddenItemIds, hoverSuppressed, sizeVariant, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect, maxMenuHeight } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const hiddenGroupStates = useContextGroupHiddenStates$1(menuSchemas);
 	const [activeSubmenuKey, setActiveSubmenuKey] = (0, react.useState)(null);
@@ -4030,6 +4274,7 @@ function ContextMenuMenu(props) {
 		if (menuSchema.item) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenuItem, {
 			menuKey: menuSchema.key,
 			menuItem: menuSchema.item,
+			menuManagerService,
 			menuSessionVersion,
 			submenuPortalContainer,
 			rootMenuElement,
@@ -4050,6 +4295,7 @@ function ContextMenuMenu(props) {
 			children: menuSchema.children.map((childSchema) => childSchema.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenuItem, {
 				menuKey: childSchema.key,
 				menuItem: childSchema.item,
+				menuManagerService,
 				menuSessionVersion,
 				submenuPortalContainer,
 				rootMenuElement,
@@ -4071,6 +4317,7 @@ function ContextMenuMenu(props) {
 			children: [titleNode, menuSchema.children.map((childSchema) => childSchema.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenuItem, {
 				menuKey: childSchema.key,
 				menuItem: childSchema.item,
+				menuManagerService,
 				menuSessionVersion,
 				submenuPortalContainer,
 				rootMenuElement,
@@ -4099,6 +4346,7 @@ function ContextMenuMenu(props) {
 			children: [titleContent, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenuItem, {
 				menuKey: `${menuSchema.key}-header-action`,
 				menuItem: menuSchema.headerActionItem,
+				menuManagerService,
 				menuSessionVersion,
 				submenuPortalContainer,
 				rootMenuElement,
@@ -4119,10 +4367,9 @@ function ContextMenuMenu(props) {
 	}
 }
 function ContextMenuMenuItem(props) {
-	const { menuKey, menuItem, menuSessionVersion, submenuPortalContainer, rootMenuElement, maxMenuHeight, activeSubmenuKey, setActiveSubmenuKey, activeItemIds, hiddenItemIds = [], hoverSuppressed = false, compact = false, headerAction = false, sizeVariant, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect } = props;
+	const { menuKey, menuItem, menuManagerService, menuSessionVersion, submenuPortalContainer, rootMenuElement, maxMenuHeight, activeSubmenuKey, setActiveSubmenuKey, activeItemIds, hiddenItemIds = [], hoverSuppressed = false, compact = false, headerAction = false, sizeVariant, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$);
-	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
 	const disabled = (0, _wendellhu_redi_react_bindings.useObservable)(menuItem.disabled$, false);
 	const activated = (0, _wendellhu_redi_react_bindings.useObservable)(menuItem.activated$, false);
 	const hidden = (0, _wendellhu_redi_react_bindings.useObservable)(menuItem.hidden$, false);
@@ -4254,6 +4501,7 @@ function ContextMenuMenuItem(props) {
 	});
 	const canExecuteItem = menuItem.type === 0 || menuItem.type === 2;
 	const renderAsContainer = isNonSelectableLabel(menuItem.label);
+	const SubmenuAffordanceIcon = direction === "rtl" ? _univerjs_icons.MoreLeftIcon : _univerjs_icons.MoreRightIcon;
 	const interactiveItemClassName = (0, _univerjs_design.clsx)(itemClassName, isNonHoverableLabel(menuItem.label) && "hover:univer-bg-transparent dark:hover:!univer-bg-transparent");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: menuItemElementRef,
@@ -4282,7 +4530,7 @@ function ContextMenuMenuItem(props) {
 		children: [renderAsContainer ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: interactiveItemClassName,
 			"aria-disabled": disabled,
-			children: [contentNode, hasSubmenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: `
+			children: [contentNode, hasSubmenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuAffordanceIcon, { className: `
                                   ${sizeVariant === "paragraph-t" ? "univer-size-4" : "univer-size-3.5"}
                                   univer-text-gray-400
                                   dark:!univer-text-gray-200
@@ -4325,7 +4573,7 @@ function ContextMenuMenuItem(props) {
 					label: menuKey
 				});
 			},
-			children: [contentNode, hasSubmenu && !compact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: `
+			children: [contentNode, hasSubmenu && !compact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuAffordanceIcon, { className: `
                                   ${sizeVariant === "paragraph-t" ? "univer-size-4" : "univer-size-3.5"}
                                   univer-text-gray-400
                                   dark:!univer-text-gray-200
@@ -4333,7 +4581,7 @@ function ContextMenuMenuItem(props) {
 		}), hasSubmenu && submenuVisible && (submenuPortalContainer ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: submenuElementRef,
 			dir: direction,
-			["data-u-context-menu-submenu"]: "true",
+			"data-u-context-menu-submenu": "true",
 			className: "univer-z-[1080] univer-w-max univer-max-w-[calc(100vw-16px)]",
 			style: {
 				position: "fixed",
@@ -4372,7 +4620,7 @@ function ContextMenuMenuItem(props) {
 						const optionSelected = typeof inputValue !== "undefined" && String(inputValue) === String(option.value);
 						const optionSelectable = !isNonSelectableLabel(option.label);
 						const optionHoverable = !isNonHoverableLabel(option.label);
-						const optionClassName = (0, _univerjs_design.clsx)(sizeVariant === "paragraph-t" ? "univer-relative univer-box-border univer-flex univer-min-h-10 univer-w-full univer-items-center univer-rounded-lg univer-border-none univer-bg-transparent univer-px-3 univer-text-left univer-text-base dark:!univer-text-white" : "univer-relative univer-box-border univer-flex univer-min-h-8 univer-w-full univer-items-center univer-rounded-md univer-border-none univer-bg-transparent univer-px-2 univer-text-left univer-text-sm dark:!univer-text-white", option.disabled ? "univer-cursor-not-allowed univer-opacity-60" : optionHoverable && "univer-cursor-pointer hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600");
+						const optionClassName = (0, _univerjs_design.clsx)(optionSelectable ? sizeVariant === "paragraph-t" ? "univer-relative univer-box-border univer-flex univer-min-h-10 univer-w-full univer-items-center univer-rounded-lg univer-border-none univer-bg-transparent univer-px-3 univer-text-left univer-text-base dark:!univer-text-white" : "univer-relative univer-box-border univer-flex univer-min-h-8 univer-w-full univer-items-center univer-rounded-md univer-border-none univer-bg-transparent univer-px-2 univer-text-left univer-text-sm dark:!univer-text-white" : "univer-relative univer-box-border univer-block univer-w-full univer-border-none univer-bg-transparent univer-p-0", option.disabled ? "univer-cursor-not-allowed univer-opacity-60" : optionHoverable && "univer-cursor-pointer hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600");
 						const optionContentNode = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [optionSelectable && optionSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: (0, _univerjs_design.clsx)("univer-absolute univer-left-0 univer-text-primary-600", sizeVariant === "paragraph-t" ? "univer-size-5" : "univer-size-4") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: (0, _univerjs_design.clsx)(getContextMenuContentClassName(sizeVariant), optionSelectable && optionSelected && "univer-pl-4"),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
@@ -4414,6 +4662,7 @@ function ContextMenuMenuItem(props) {
 					})
 				}), hasSubItemSubmenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenu, {
 					menuSchemas: subMenuItems,
+					menuManagerService,
 					menuSessionVersion,
 					submenuPortalContainer,
 					rootMenuElement,
@@ -4431,34 +4680,26 @@ function ContextMenuMenuItem(props) {
 	});
 }
 function useContextGroupHiddenStates$1(menuSchemas) {
-	const [hiddenStates, setHiddenStates] = (0, react.useState)({});
-	(0, react.useEffect)(() => {
-		const subscriptions = menuSchemas.map((menuSchema) => {
-			var _menuSchema$children3;
-			if (!((_menuSchema$children3 = menuSchema.children) === null || _menuSchema$children3 === void 0 ? void 0 : _menuSchema$children3.length)) return null;
-			return (0, rxjs.combineLatest)(menuSchema.children.map((childSchema) => {
+	return (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
+		const groupStates = menuSchemas.flatMap((menuSchema) => {
+			var _menuSchema$children$, _menuSchema$children3;
+			const hiddenObservables = (_menuSchema$children$ = (_menuSchema$children3 = menuSchema.children) === null || _menuSchema$children3 === void 0 ? void 0 : _menuSchema$children3.map((childSchema) => {
 				var _childSchema$item$hid, _childSchema$item;
 				return (_childSchema$item$hid = (_childSchema$item = childSchema.item) === null || _childSchema$item === void 0 ? void 0 : _childSchema$item.hidden$) !== null && _childSchema$item$hid !== void 0 ? _childSchema$item$hid : (0, rxjs.of)(false);
-			})).subscribe((hiddenValues) => {
-				const isAllHidden = hiddenValues.every((hidden) => hidden === true);
-				setHiddenStates((state) => ({
-					...state,
-					[menuSchema.key]: isAllHidden
-				}));
-			});
+			})) !== null && _menuSchema$children$ !== void 0 ? _menuSchema$children$ : [];
+			return hiddenObservables.length ? [(0, rxjs.combineLatest)(hiddenObservables).pipe((0, rxjs.map)((values) => [menuSchema.key, values.every(Boolean)]))] : [];
 		});
-		return () => {
-			subscriptions.forEach((subscription) => subscription === null || subscription === void 0 ? void 0 : subscription.unsubscribe());
-			setHiddenStates({});
-		};
-	}, [menuSchemas]);
-	return hiddenStates;
+		return groupStates.length ? (0, rxjs.merge)(...groupStates).pipe((0, rxjs.scan)((states, [key, hidden]) => ({
+			...states,
+			[key]: hidden
+		}), {}), (0, rxjs.startWith)({})) : (0, rxjs.of)({});
+	}, [menuSchemas]), {});
 }
 
 //#endregion
 //#region src/views/components/context-menu/AnchoredContextMenu.tsx
 function AnchoredContextMenu(props) {
-	const { hostId, visible, anchorRect, menuType, anchorVertical = "bottom", menuOffset = 0, onRequestClose, onOptionSelect } = props;
+	const { hostId, visible, anchorRect, menuType, anchorVertical = "bottom", menuOffset = 0, menuManagerService, layoutService, onRequestClose, onOptionSelect } = props;
 	const contentRef = (0, react.useRef)(null);
 	const contextMenuHostService = (0, _wendellhu_redi_react_bindings.useDependency)(IContextMenuHostService);
 	const onRequestCloseRef = (0, react.useRef)(onRequestClose);
@@ -4547,6 +4788,8 @@ function AnchoredContextMenu(props) {
 			ref: contentRef,
 			children: menuType && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuPanel, {
 				menuType,
+				menuManagerService,
+				layoutService,
 				menuSessionVersion: menuSessionVersionRef.current,
 				onOptionSelect
 			})
@@ -4561,10 +4804,13 @@ function DesktopContextMenu() {
 	const [visible, setVisible] = (0, react.useState)(false);
 	const [menuType, setMenuType] = (0, react.useState)("");
 	const [anchorRect, setAnchorRect] = (0, react.useState)(null);
+	const [menuContext, setMenuContext] = (0, react.useState)();
 	const visibleRef = (0, react.useRef)(visible);
 	const contextMenuService = (0, _wendellhu_redi_react_bindings.useDependency)(IContextMenuService);
 	const commandService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ICommandService);
-	const injector = (0, _wendellhu_redi_react_bindings.useInjector)();
+	const layoutService = (0, _wendellhu_redi_react_bindings.useDependency)(ILayoutService);
+	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
+	const runtimeScopeService = (0, _wendellhu_redi_react_bindings.useDependency)(IUIRuntimeScopeService);
 	visibleRef.current = visible;
 	(0, react.useEffect)(() => {
 		const disposables = contextMenuService.registerContextMenuHandler({
@@ -4581,10 +4827,11 @@ function DesktopContextMenu() {
 		};
 	}, [contextMenuService]);
 	/** A function to open context menu with given position and menu type. */
-	function handleContextMenu(event, menuType) {
+	function handleContextMenu(event, menuType, context) {
 		setVisible(false);
 		requestAnimationFrame(() => {
 			setMenuType(menuType);
+			setMenuContext(context);
 			setAnchorRect({
 				left: event.clientX,
 				top: event.clientY,
@@ -4596,18 +4843,24 @@ function DesktopContextMenu() {
 	function handleClose() {
 		setVisible(false);
 	}
+	const activeScope = runtimeScopeService.get(menuContext === null || menuContext === void 0 ? void 0 : menuContext.unitId);
+	const activeMenuManagerService = (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(IMenuManagerService)) ? activeScope.get(IMenuManagerService) : menuManagerService;
+	const activeCommandService = (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(_univerjs_core.ICommandService)) ? activeScope.get(_univerjs_core.ICommandService) : commandService;
+	const activeLayoutService = (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(ILayoutService)) ? activeScope.get(ILayoutService) : layoutService;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnchoredContextMenu, {
 		hostId: DESKTOP_CONTEXT_MENU_HOST_ID,
 		visible,
 		anchorRect,
 		menuType,
+		menuManagerService: activeMenuManagerService,
+		layoutService: activeLayoutService,
 		onRequestClose: handleClose,
 		onOptionSelect: (params) => {
 			const { label: id, commandId, value } = params;
 			const rawParams = typeof params.params === "function" ? params.params() : params.params;
 			const commandParams = typeof rawParams === "undefined" ? { value } : rawParams;
-			if (commandService) commandService.executeCommand(commandId !== null && commandId !== void 0 ? commandId : id, commandParams);
-			injector.get(ILayoutService).focus();
+			if (activeCommandService) activeCommandService.executeCommand(commandId !== null && commandId !== void 0 ? commandId : id, commandParams);
+			activeLayoutService.focus();
 			handleClose();
 		}
 	});
@@ -4618,6 +4871,7 @@ function DesktopContextMenu() {
 const MIN_SIDEBAR_WIDTH = 280;
 const MAX_SIDEBAR_WIDTH = 800;
 function Sidebar() {
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const sidebarService = (0, _wendellhu_redi_react_bindings.useDependency)(ISidebarService);
 	const sidebarOptions = (0, _wendellhu_redi_react_bindings.useObservable)(sidebarService.sidebarOptions$);
 	const scrollRef = (0, react.useRef)(null);
@@ -4724,7 +4978,7 @@ function Sidebar() {
 		"data-u-comp": "sidebar",
 		role: "complementary",
 		"aria-expanded": !!(options === null || options === void 0 ? void 0 : options.visible),
-		"aria-label": "Sidebar panel",
+		"aria-label": localeService.t("ui.sidebar.panel"),
 		className: (0, _univerjs_design.clsx)("univer-relative univer-h-full univer-flex-shrink-0 univer-bg-white univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-white", {
 			"univer-w-96 univer-translate-x-0": options === null || options === void 0 ? void 0 : options.visible,
 			"univer-w-0 univer-translate-x-full": !(options === null || options === void 0 ? void 0 : options.visible)
@@ -4735,7 +4989,7 @@ function Sidebar() {
 			onMouseDown: handleResizeMouseDown,
 			role: "separator",
 			"aria-orientation": "vertical",
-			"aria-label": "Resize sidebar",
+			"aria-label": localeService.t("ui.sidebar.resize"),
 			tabIndex: 0,
 			onKeyDown: (e) => {
 				if (!sidebarRef.current) return;
@@ -4764,7 +5018,7 @@ function Sidebar() {
 						type: "button",
 						className: "focus:univer-ring-primary-500/50 univer-cursor-pointer univer-appearance-none univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-text-gray-500 focus:univer-outline-none focus:univer-ring-2 dark:!univer-text-gray-300",
 						onClick: handleClose,
-						"aria-label": "Close sidebar",
+						"aria-label": localeService.t("ui.sidebar.close"),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, {})
 					})]
 				}),
@@ -5009,39 +5263,23 @@ function DesktopWorkbenchContent(props) {
 			sub.unsubscribe();
 		};
 	}, []);
-	const [darkMode, setDarkMode] = (0, react.useState)(false);
+	const darkMode = (0, _wendellhu_redi_react_bindings.useObservable)(themeService.darkMode$, themeService.darkMode);
 	(0, react.useLayoutEffect)(() => {
-		const sub = themeService.darkMode$.subscribe((darkMode) => {
-			setDarkMode(darkMode);
-			if (darkMode) document.documentElement.classList.add("univer-dark");
-			else document.documentElement.classList.remove("univer-dark");
-		});
-		return () => {
-			sub.unsubscribe();
-		};
-	}, []);
+		if (darkMode) document.documentElement.classList.add("univer-dark");
+		else document.documentElement.classList.remove("univer-dark");
+	}, [darkMode]);
 	(0, react.useEffect)(() => {
 		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
 	}, [onRendered]);
-	const [locale, setLocale] = (0, react.useState)(localeService.getLocales());
-	const [direction, setDirection] = (0, react.useState)(localeService.getDirection());
+	const locale = (0, _wendellhu_redi_react_bindings.useObservable)(() => localeService.localeChanged$.pipe((0, rxjs.map)(() => localeService.getLocales())), localeService.getLocales(), false, [localeService]);
+	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$, localeService.getDirection());
 	const portalContainer = (0, react.useMemo)(() => document.createElement("div"), []);
 	(0, react.useEffect)(() => {
 		document.body.appendChild(portalContainer);
-		const subscriptions = [localeService.localeChanged$.subscribe(() => {
-			setLocale(localeService.getLocales());
-		}), localeService.direction$.subscribe(() => {
-			setDirection(localeService.getDirection());
-		})];
 		return () => {
-			subscriptions.forEach((subscription) => subscription.unsubscribe());
 			document.body.removeChild(portalContainer);
 		};
-	}, [
-		localeService,
-		mountContainer,
-		portalContainer
-	]);
+	}, [mountContainer, portalContainer]);
 	(0, react.useEffect)(() => {
 		portalContainer.dir = direction;
 	}, [direction, portalContainer]);
@@ -5183,7 +5421,9 @@ var SingleUnitUIController = class extends _univerjs_core.Disposable {
 		}));
 	}
 	_changeRenderUnit(rendererId, contentElement) {
+		var _this$_instanceServic2;
 		if (this._currentRenderId === rendererId) return false;
+		if ((_this$_instanceServic2 = this._instanceService.getUnitCreateOptions(rendererId)) === null || _this$_instanceServic2 === void 0 ? void 0 : _this$_instanceServic2.embeddedRender) return false;
 		const renderer = this._renderManagerService.getRenderById(rendererId);
 		if (!renderer || !renderer.unitId || (0, _univerjs_core.isInternalEditorID)(renderer.unitId)) return false;
 		const currentRenderer = this._currentRenderId ? this._renderManagerService.getRenderById(this._currentRenderId) : null;
@@ -5199,17 +5439,15 @@ var SingleUnitUIController = class extends _univerjs_core.Disposable {
 //#endregion
 //#region src/controllers/ui/ui-desktop.controller.ts
 let DesktopUIController = class DesktopUIController extends SingleUnitUIController {
-	constructor(_config, injector, lifecycleService, renderManagerService, layoutService, instanceService, menuManagerService, uiPartsService, _componentManager) {
+	constructor(_config, injector, lifecycleService, renderManagerService, layoutService, instanceService, menuManagerService, uiPartsService) {
 		super(injector, instanceService, layoutService, lifecycleService, renderManagerService);
 		this._config = _config;
-		this._componentManager = _componentManager;
 		menuManagerService.mergeMenu(menuSchema);
 		this._initBuiltinComponents(uiPartsService);
 		this._bootstrapWorkbench();
 	}
 	dispose() {
 		super.dispose();
-		this._componentManager.dispose();
 	}
 	bootstrap(callback) {
 		return bootstrap$1(this._injector, this._config, callback);
@@ -5227,8 +5465,7 @@ DesktopUIController = __decorate([
 	__decorateParam(4, ILayoutService),
 	__decorateParam(5, _univerjs_core.IUniverInstanceService),
 	__decorateParam(6, IMenuManagerService),
-	__decorateParam(7, IUIPartsService),
-	__decorateParam(8, (0, _univerjs_core.Inject)(ComponentManager))
+	__decorateParam(7, IUIPartsService)
 ], DesktopUIController);
 function bootstrap$1(injector, options, callback) {
 	let mountContainer;
@@ -5261,7 +5498,7 @@ const IUIController = (0, _univerjs_core.createIdentifier)("univer.ui.ui-control
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.0.0-alpha.2";
+var version = "1.0.0-alpha.4";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -20291,15 +20528,13 @@ function EmojiPicker(props) {
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "univer-flex univer-items-center univer-gap-1 univer-px-3 univer-pb-2 univer-pt-3",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-					className: "univer-flex univer-h-8 univer-flex-1 univer-items-center univer-gap-1 univer-rounded-lg univer-border univer-border-solid univer-border-primary-500 univer-px-2 univer-text-gray-500 dark:!univer-border-primary-600 dark:!univer-text-gray-400",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SearchIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
-						"aria-label": localeService.t("ui.emojiPicker.search"),
-						placeholder: localeService.t("ui.emojiPicker.search"),
-						className: "univer-min-w-0 univer-flex-1",
-						value: query,
-						onChange: setQuery
-					})]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
+					"aria-label": localeService.t("ui.emojiPicker.search"),
+					placeholder: localeService.t("ui.emojiPicker.search"),
+					className: "univer-min-w-0 univer-flex-1",
+					value: query,
+					onChange: setQuery,
+					slot: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SearchIcon, { className: "univer-size-4 univer-text-gray-500 dark:!univer-text-gray-400" })
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					"aria-label": localeService.t("ui.emojiPicker.random"),
@@ -20333,12 +20568,12 @@ function EmojiPicker(props) {
 				className: (0, _univerjs_design.clsx)("univer-flex univer-h-10 univer-shrink-0 univer-items-center univer-border-gray-200 univer-px-2.5 dark:!univer-border-gray-600 [&_svg]:univer-size-5", _univerjs_design.borderTopClassName),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategoryButton, {
 					selected: !isSearching && activeTab === "recent",
-					title: localeService.t("ui.emojiPicker.recents"),
+					titleKey: "ui.emojiPicker.recents",
 					onClick: () => scrollToSection("recent"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.RecentIcon, {})
 				}), EMOJI_CATEGORIES.map((category) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategoryButton, {
 					selected: !isSearching && activeTab === category.key,
-					title: localeService.t(category.titleKey),
+					titleKey: category.titleKey,
 					onClick: () => scrollToSection(category.key),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategoryIcon, { category: category.key })
 				}, category.key))]
@@ -20379,11 +20614,12 @@ function EmojiGrid(props) {
 	});
 }
 function CategoryButton(props) {
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
-		"aria-label": props.title,
+		"aria-label": localeService.t(props.titleKey),
 		"aria-selected": props.selected,
-		title: props.title,
+		title: localeService.t(props.titleKey),
 		className: (0, _univerjs_design.clsx)("univer-flex univer-h-[30px] univer-flex-1 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-lg univer-border-0 univer-bg-transparent univer-p-0 univer-text-gray-500 dark:!univer-text-gray-400", props.selected ? "univer-bg-primary-50 univer-text-primary-500 dark:!univer-bg-gray-800 dark:!univer-text-primary-400" : "hover:univer-bg-gray-50 hover:univer-text-gray-700 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-300"),
 		onClick: props.onClick,
 		children: props.children
@@ -20416,72 +20652,207 @@ function CategoryIcon(props) {
 //#region src/services/font.service.ts
 const IFontService = (0, _univerjs_core.createIdentifier)("univer.font-service");
 const DEFAULT_FONT_LIST = [
-	{
-		value: "Arial",
-		label: "ui.fontFamily.arial",
-		category: "sans-serif"
-	},
-	{
-		value: "Times New Roman",
-		label: "ui.fontFamily.times-new-roman",
-		category: "serif"
-	},
-	{
-		value: "Tahoma",
-		label: "ui.fontFamily.tahoma",
-		category: "sans-serif"
-	},
-	{
-		value: "Verdana",
-		label: "ui.fontFamily.verdana",
-		category: "sans-serif"
-	},
-	{
-		value: "Microsoft YaHei",
-		label: "ui.fontFamily.microsoft-yahei",
-		category: "sans-serif"
-	},
-	{
-		value: "SimSun",
-		label: "ui.fontFamily.simsun",
-		category: "serif"
-	},
-	{
-		value: "SimHei",
-		label: "ui.fontFamily.simhei",
-		category: "sans-serif"
-	},
-	{
-		value: "Kaiti",
-		label: "ui.fontFamily.kaiti",
-		category: "serif"
-	},
-	{
-		value: "FangSong",
-		label: "ui.fontFamily.fangsong",
-		category: "serif"
-	},
-	{
-		value: "NSimSun",
-		label: "ui.fontFamily.nsimsun",
-		category: "serif"
-	},
-	{
-		value: "STXinwei",
-		label: "ui.fontFamily.stxinwei",
-		category: "serif"
-	},
-	{
-		value: "STXingkai",
-		label: "ui.fontFamily.stxingkai",
-		category: "serif"
-	},
-	{
-		value: "STLiti",
-		label: "ui.fontFamily.stliti",
-		category: "serif"
-	}
-];
+	"宋体",
+	"Arial",
+	"Baskerville",
+	"Comic Sans MS",
+	"Courier New",
+	"Helvetica",
+	"Times New Roman",
+	"Verdana",
+	"Apple LiGothic",
+	"Apple LiSung",
+	"Hei",
+	"Kai",
+	"LiHei Pro",
+	"LiSong Pro",
+	"STFangsong",
+	"STHeiti",
+	"STKaiti",
+	"STSong",
+	"报隶-繁",
+	"报隶-简",
+	"冬青黑体简体中文",
+	"黑体-繁",
+	"黑体-简",
+	"华文仿宋",
+	"华文楷体",
+	"华文宋体",
+	"楷体-繁",
+	"楷体-简",
+	"兰亭黑-繁",
+	"兰亭黑-简",
+	"隶变-繁",
+	"隶变-简",
+	"凌慧体-繁",
+	"凌慧体-简",
+	"翩翩体-繁",
+	"翩翩体-简",
+	"苹方-繁",
+	"苹方-港",
+	"苹方-简",
+	"手札体-繁",
+	"手札体-简",
+	"宋体-繁",
+	"宋体-简",
+	"娃娃体-繁",
+	"娃娃体-简",
+	"魏碑-繁",
+	"魏碑-简",
+	"行楷-繁",
+	"行楷-简",
+	"雅痞-繁",
+	"雅痞-简",
+	"圆体-繁",
+	"圆体-简",
+	"Arial Black",
+	"Big Caslon",
+	"Courier",
+	"Didot",
+	"Futura",
+	"Georgia",
+	"Helvetica Neue",
+	"Optima",
+	"Times",
+	"Tahoma",
+	"BIZ UDGothic",
+	"BIZ UDMincho",
+	"Hiragino Maru Gothic Pro",
+	"Hiragino Maru Gothic ProN",
+	"Hiragino Mincho Pro",
+	"Hiragino Mincho ProN",
+	"Hiragino Sans",
+	"Klee",
+	"Osaka",
+	"Toppan Bunkyu Gothic",
+	"Toppan Bunkyu Midashi Gothic",
+	"Toppan Bunkyu Midashi Mincho",
+	"Toppan Bunkyu Mincho",
+	"Tsukushi A Round Gothic",
+	"Tsukushi B Round Gothic",
+	"YuKyokasho",
+	"YuKyokasho Yoko",
+	"YuMincho +36p Kana",
+	"American Typewriter",
+	"Andale Mono",
+	"Apple Chancery",
+	"Apple SD Gothic Neo",
+	"Apple Symbols",
+	"AppleGothic",
+	"AppleMyungjo",
+	"Arial Unicode MS",
+	"Athelas",
+	"Avenir",
+	"Avenir Next",
+	"Avenir Next Condensed",
+	"Ayuthaya",
+	"Bangla MN",
+	"Bangla Sangam MN",
+	"Bauhaus 93",
+	"Bodoni 72",
+	"Bodoni 72 Oldstyle",
+	"Bodoni 72 Smallcaps",
+	"Bodoni Ornaments",
+	"Bookshelf Symbol 7",
+	"Bradley Hand",
+	"Chalkboard",
+	"Chalkboard SE",
+	"Chalkduster",
+	"Charter",
+	"Cochin",
+	"Copperplate",
+	"Devanagari Sangam MN",
+	"Din Alternate",
+	"Euphemia UCAS",
+	"Galvji",
+	"Geneva",
+	"Gill Sans",
+	"Gujarati Sangam MN",
+	"GungSeo",
+	"Gurmukhi MN",
+	"Gurmukhi Sangam MN",
+	"HeadLineA",
+	"Herculanum",
+	"Hiragino Kaku Gothic Pro",
+	"Hiragino Kaku Gothic ProN",
+	"Hiragino Kaku Gothic Std",
+	"Hiragino Kaku Gothic StdN",
+	"Hoefler Text",
+	"Impact",
+	"InaiMathi",
+	"Iowan Old Style",
+	"Kannada MN",
+	"Kannada Sangam MN",
+	"Kefa",
+	"Khmer MN",
+	"Khmer Sangam MN",
+	"Kohinoor Bangla",
+	"Kohinoor Devanagari",
+	"Kohinoor Telugu",
+	"Krungthep",
+	"Lao MN",
+	"Lao Sangam MN",
+	"Lucida Grande",
+	"Luminari",
+	"Malayalam MN",
+	"Malayalam Sangam MN",
+	"Marion",
+	"Marker Felt",
+	"Menlo",
+	"Microsoft Sans Serif",
+	"Modern No. 20",
+	"Monaco",
+	"Mukta Mahee",
+	"Nanum Brush Script",
+	"Nanum Gothic",
+	"Nanum Myeongjo",
+	"Nanum Pen Script",
+	"Noteworthy",
+	"Oriya MN",
+	"Oriya Sangam MN",
+	"Palatino",
+	"Papyrus",
+	"PCMyungjo",
+	"Phosphate",
+	"PilGi",
+	"Plantagenet Cherokee",
+	"PT Mono",
+	"PT Sans",
+	"PT Sans Caption",
+	"PT Serif",
+	"PT Serif Caption",
+	"Rockwell",
+	"Sathu",
+	"Savoye LET",
+	"Seravek",
+	"Shree Devanagari 714",
+	"SignPainter",
+	"Silom",
+	"Sinhala MN",
+	"Sinhala Sangam MN",
+	"Skia",
+	"Snell Roundhand",
+	"STIXGeneral",
+	"Sukhumvit Set",
+	"Superclarendon",
+	"Tamil MN",
+	"Tamil Sangam MN",
+	"Telugu MN",
+	"Telugu Sangam MN",
+	"Trattatello",
+	"Trebuchet MS",
+	"Webdings",
+	"Wingdings",
+	"Wingdings 2",
+	"Wingdings 3",
+	"YuGothic",
+	"YuGothic Light",
+	"YuGothic Medium",
+	"Zapfino"
+].map((value) => ({
+	value,
+	label: value
+}));
 let FontService = class FontService {
 	constructor(_configService) {
 		this._configService = _configService;
@@ -20564,17 +20935,8 @@ FontService = __decorate([__decorateParam(0, _univerjs_core.IConfigService)], Fo
 //#region src/views/font-family/use-font-list.ts
 function useFontList() {
 	const fontService = (0, _wendellhu_redi_react_bindings.useDependency)(IFontService);
-	const [fonts, setFonts] = (0, react.useState)(() => fontService.getFonts());
-	(0, react.useEffect)(() => {
-		const subscription = fontService.fonts$.subscribe((fonts) => {
-			setFonts(fonts);
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [fontService]);
 	return {
-		fonts,
+		fonts: (0, _wendellhu_redi_react_bindings.useObservable)(fontService.fonts$, fontService.getFonts()),
 		fontService
 	};
 }
@@ -20653,11 +21015,13 @@ const FontFamily = ({ className, disabled: disabledProp, value, disabled$, onCha
 const FONT_FAMILY_ITEM_COMPONENT = "UI_FONT_FAMILY_ITEM_COMPONENT";
 const FontFamilyItem = ({ value, onChange }) => {
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$, localeService.getDirection());
 	const { fonts, fontService } = useFontList();
 	function handleSelectFont(nextValue) {
 		onChange(nextValue);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		dir: direction,
 		className: "univer-m-0 univer-list-none univer-p-0 univer-text-sm",
 		style: { fontFamily: value },
 		children: fonts.map((font) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -20677,6 +21041,8 @@ const FontFamilyItem = ({ value, onChange }) => {
 //#region src/views/font-family/FontFamilyDropdown.tsx
 function FontFamilyDropdown(props) {
 	const { value, onChange, ariaLabel, className, disabled: disabledProp, disabled$, inputClassName, popupClassName, popupDataComponent, title, onMouseDown, onPointerDown } = props;
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$, localeService.getDirection());
 	const disabledObservableValue = (0, _wendellhu_redi_react_bindings.useObservable)(disabled$);
 	const disabled = Boolean(disabledProp || disabledObservableValue);
 	const [open, setOpen] = (0, react.useState)(false);
@@ -20690,6 +21056,7 @@ function FontFamilyDropdown(props) {
 		open,
 		onOpenChange: setOpen,
 		overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			dir: direction,
 			className: (0, _univerjs_design.clsx)("univer-max-h-72 univer-min-w-44 univer-overflow-y-auto univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-1 univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-900", popupClassName),
 			...popupDataAttributes,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FontFamilyItem, {
@@ -20701,6 +21068,7 @@ function FontFamilyDropdown(props) {
 			"aria-disabled": disabled,
 			"aria-expanded": open,
 			"aria-label": ariaLabel,
+			dir: direction,
 			className: (0, _univerjs_design.clsx)("univer-flex univer-h-6 univer-min-w-0 univer-cursor-default univer-items-center univer-justify-between univer-gap-1 univer-rounded-md univer-px-1.5 univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-cursor-not-allowed univer-opacity-60": disabled }, className),
 			role: "combobox",
 			tabIndex: disabled ? -1 : 0,
@@ -20865,6 +21233,97 @@ const HeadingItem = (props) => {
 };
 const HEADING_ITEM_COMPONENT = "UI_COMPONENT_HEADING_ITEM";
 
+//#endregion
+//#region src/views/slider/ZoomInput.tsx
+function ZoomInput(props) {
+	const iconManager = (0, _wendellhu_redi_react_bindings.useDependency)(IconManager);
+	const { value = 100, min = 0, max = 400, shortcuts, disabled = false, className, onChange } = props;
+	const isEditingRef = (0, react.useRef)(false);
+	const [listVisible, setListVisible] = (0, react.useState)(false);
+	const [inputValue, setInputValue] = (0, react.useState)(() => `${value}%`);
+	(0, react.useEffect)(() => {
+		if (!isEditingRef.current) setInputValue(`${value}%`);
+	}, [value]);
+	function clampValue(value) {
+		return Math.min(Math.max(value, min), max);
+	}
+	function handleSelect(value) {
+		if (disabled) return;
+		setListVisible(false);
+		onChange === null || onChange === void 0 || onChange(value);
+	}
+	function parseInput(rawValue) {
+		const normalizedValue = rawValue.trim().replace(/%$/, "").trim();
+		if (normalizedValue === "") return null;
+		const parsedValue = Number(normalizedValue);
+		if (!Number.isFinite(parsedValue)) return null;
+		return Math.round(clampValue(parsedValue));
+	}
+	function handleFocus() {
+		if (disabled) return;
+		isEditingRef.current = true;
+		setInputValue(String(value));
+	}
+	function commitInput() {
+		if (disabled || !isEditingRef.current) return;
+		const parsedValue = parseInput(inputValue);
+		isEditingRef.current = false;
+		if (parsedValue == null) {
+			setInputValue(`${value}%`);
+			return;
+		}
+		setInputValue(`${parsedValue}%`);
+		if (parsedValue !== value) onChange === null || onChange === void 0 || onChange(parsedValue);
+	}
+	function handleKeyDown(e) {
+		e.stopPropagation();
+		if (e.key === "Enter") {
+			e.preventDefault();
+			commitInput();
+			e.currentTarget.blur();
+		}
+	}
+	const items = [{
+		type: "radio",
+		value: value.toString(),
+		options: shortcuts.map((item) => ({
+			value: item.toString(),
+			label: `${item}%`
+		})),
+		onSelect: (value) => handleSelect(+value)
+	}];
+	const MoreDownIcon = iconManager.get("MoreDownIcon");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _univerjs_design.clsx)("univer-flex univer-h-6 univer-w-[68px] univer-flex-shrink-0 univer-items-center univer-overflow-hidden univer-rounded-md univer-border univer-border-gray-200 univer-bg-white dark:!univer-border-gray-600 dark:!univer-bg-gray-800", className, { "univer-opacity-60": disabled }),
+		onClick: (e) => e.stopPropagation(),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
+			className: "univer-box-border univer-h-6 univer-w-[52px] univer-border-none univer-bg-transparent [&_input:focus]:!univer-ring-0 [&_input]:univer-h-6 [&_input]:univer-w-[52px] [&_input]:univer-border-none [&_input]:!univer-bg-transparent [&_input]:univer-px-1 [&_input]:univer-text-center [&_input]:univer-text-xs [&_input]:univer-tabular-nums",
+			inputClass: "univer-w-[52px]",
+			size: "mini",
+			value: inputValue,
+			disabled,
+			type: "text",
+			onChange: setInputValue,
+			onFocus: handleFocus,
+			onBlur: commitInput,
+			onKeyDown: handleKeyDown
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
+			align: "end",
+			items,
+			open: listVisible,
+			disabled,
+			onOpenChange: setListVisible,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+				className: "univer-h-6 univer-w-4 univer-rounded-none univer-p-0",
+				size: "small",
+				variant: "text",
+				disabled,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoreDownIcon, { className: "univer-size-3 univer-text-gray-500 dark:!univer-text-gray-300" })
+			})
+		})]
+	});
+}
+
 //#endregion
 //#region src/views/slider/Slider.tsx
 const SLIDER_WIDTH = 116;
@@ -20879,18 +21338,12 @@ function Slider(props) {
 	const { value, min = 0, max = 400, disabled = false, resetPoint = 100, shortcuts, onChange } = props;
 	const isRtl = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$, localeService.getDirection()) === "rtl";
 	const sliderInnerRailRef = (0, react.useRef)(null);
-	const isEditingZoomRef = (0, react.useRef)(false);
 	const dragValueRef = (0, react.useRef)(value);
 	const pendingDragValueRef = (0, react.useRef)(null);
 	const lastCommittedDragValueRef = (0, react.useRef)(value);
 	const dragCommitTimerRef = (0, react.useRef)(null);
-	const [zoomListVisible, setZoomListVisible] = (0, react.useState)(false);
 	const [isDragging, setIsDragging] = (0, react.useState)(false);
 	const [dragValue, setDragValue] = (0, react.useState)(value);
-	const [zoomInputValue, setZoomInputValue] = (0, react.useState)(() => `${value}%`);
-	(0, react.useEffect)(() => {
-		if (!isEditingZoomRef.current) setZoomInputValue(`${value}%`);
-	}, [value]);
 	(0, react.useEffect)(() => () => {
 		clearDragCommitTimer();
 	}, []);
@@ -20989,61 +21442,11 @@ function Slider(props) {
 		window.addEventListener("pointerup", onPointerUp);
 		window.addEventListener("pointerout", onPointerOut);
 	}
-	function handleSelectZoomLevel(value) {
-		if (disabled) return;
-		setZoomListVisible(false);
-		onChange && onChange(value);
-	}
-	function parseExactZoomInput(rawValue) {
-		const normalizedValue = rawValue.trim().replace(/%$/, "").trim();
-		if (normalizedValue === "") return null;
-		const parsedValue = Number(normalizedValue);
-		if (!Number.isFinite(parsedValue)) return null;
-		return Math.round(clampValue(parsedValue));
-	}
-	function handleExactZoomFocus() {
-		if (disabled) return;
-		isEditingZoomRef.current = true;
-		setZoomInputValue(String(value));
-	}
-	function commitExactZoomInput() {
-		if (disabled) return;
-		if (!isEditingZoomRef.current) return;
-		const parsedValue = parseExactZoomInput(zoomInputValue);
-		isEditingZoomRef.current = false;
-		if (parsedValue == null) {
-			setZoomInputValue(`${value}%`);
-			return;
-		}
-		setZoomInputValue(`${parsedValue}%`);
-		if (parsedValue !== value) onChange && onChange(parsedValue);
-	}
-	function handleExactZoomChange(value) {
-		setZoomInputValue(value);
-	}
-	function handleInputKeyDown(e) {
-		e.stopPropagation();
-		if (e.key === "Enter") {
-			e.preventDefault();
-			commitExactZoomInput();
-			e.currentTarget.blur();
-		}
-	}
-	const items = [{
-		type: "radio",
-		value: value.toString(),
-		options: shortcuts.map((item) => ({
-			value: item.toString(),
-			label: `${item}%`
-		})),
-		onSelect: (value) => handleSelectZoomLevel(+value)
-	}];
 	const visualValue = isDragging ? dragValue : value;
 	const sliderOffset = Math.min(Math.max((_getSliderOffset = getSliderOffset(visualValue)) !== null && _getSliderOffset !== void 0 ? _getSliderOffset : 0, 0), 100);
 	const handleOffset = isRtl ? 100 - sliderOffset : sliderOffset;
 	const ReduceIcon = iconManager.get("ReduceIcon");
 	const IncreaseIcon = iconManager.get("IncreaseIcon");
-	const MoreDownIcon = iconManager.get("MoreDownIcon");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, _univerjs_design.clsx)("univer-flex univer-select-none univer-items-center univer-gap-1.5", { "univer-cursor-not-allowed": disabled }),
 		children: [
@@ -21101,33 +21504,13 @@ function Slider(props) {
 				onClick: () => handleStep(10),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IncreaseIcon, { className: "univer-text-gray-500" })
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, _univerjs_design.clsx)("univer-flex univer-h-6 univer-w-[68px] univer-flex-shrink-0 univer-items-center univer-overflow-hidden univer-rounded-md univer-border univer-border-gray-200 univer-bg-white dark:!univer-border-gray-600 dark:!univer-bg-gray-800", { "univer-opacity-60": disabled }),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
-					className: "univer-box-border univer-h-6 univer-w-[52px] univer-border-none univer-bg-transparent [&_input:focus]:!univer-ring-0 [&_input]:univer-h-6 [&_input]:univer-w-[52px] [&_input]:univer-border-none [&_input]:!univer-bg-transparent [&_input]:univer-px-1 [&_input]:univer-text-center [&_input]:univer-text-xs [&_input]:univer-tabular-nums",
-					inputClass: "univer-w-[52px]",
-					size: "mini",
-					value: zoomInputValue,
-					disabled,
-					type: "text",
-					onChange: handleExactZoomChange,
-					onFocus: handleExactZoomFocus,
-					onBlur: commitExactZoomInput,
-					onKeyDown: handleInputKeyDown
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
-					align: "end",
-					items,
-					open: zoomListVisible,
-					disabled,
-					onOpenChange: setZoomListVisible,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-						className: "univer-h-6 univer-w-4 univer-rounded-none univer-p-0",
-						size: "small",
-						variant: "text",
-						disabled,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoreDownIcon, { className: "univer-size-3 univer-text-gray-500 dark:!univer-text-gray-300" })
-					})
-				})]
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomInput, {
+				value,
+				min,
+				max,
+				shortcuts,
+				disabled,
+				onChange
 			})
 		]
 	});
@@ -21160,11 +21543,13 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 	}
 	_registerIcons() {
 		this.disposeWithMe(this._iconManager.register({
+			ExpandIcon: _univerjs_icons.ExpandIcon,
 			IncreaseIcon: _univerjs_icons.IncreaseIcon,
 			MoreDownIcon: _univerjs_icons.MoreDownIcon,
 			RedoIcon: _univerjs_icons.RedoIcon,
 			ReduceIcon: _univerjs_icons.ReduceIcon,
 			ShortcutIcon: _univerjs_icons.ShortcutIcon,
+			ShrinkIcon: _univerjs_icons.ShrinkIcon,
 			UndoIcon: _univerjs_icons.UndoIcon
 		}));
 	}
@@ -21188,14 +21573,6 @@ ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)
 //#endregion
 //#region src/views/components/ribbon/MobileRibbon.tsx
 const toolbarScrollOffset = 168;
-const nestedControlResetClassName = `
-[&_button]:!univer-m-0 [&_button]:!univer-appearance-none [&_button]:!univer-border-0
-[&_button]:!univer-bg-transparent [&_button]:!univer-p-0 [&_button]:!univer-leading-none
-[&_button]:!univer-outline-none
-[&_input]:!univer-m-0 [&_input]:!univer-appearance-none [&_input]:!univer-border-0
-[&_input]:!univer-bg-transparent [&_input]:!univer-p-0 [&_input]:!univer-leading-none
-[&_input]:!univer-outline-none
-`;
 function MobileRibbon(props) {
 	var _activeGroup$children;
 	const { headerMenuComponents, headerMenu = true } = props;
@@ -21263,7 +21640,7 @@ function MobileRibbon(props) {
 						type: "button",
 						className: (0, _univerjs_design.clsx)(_univerjs_design.resetButtonClassName, "univer-size-7 univer-rounded-md univer-text-gray-500 univer-transition-colors hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600", { "univer-opacity-40": activeIndex === 0 }),
 						disabled: activeIndex === 0,
-						"aria-label": "Previous",
+						"aria-label": localeService.t("ui.navigation.previous"),
 						onClick: () => selectTab(activeIndex - 1),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, { className: "univer-rotate-180 univer-text-sm" })
 					})
@@ -21300,7 +21677,7 @@ function MobileRibbon(props) {
                           dark:active:!univer-bg-gray-600
                         `, { "univer-opacity-40": activeIndex >= ribbon.length - 1 }),
 						disabled: activeIndex >= ribbon.length - 1,
-						"aria-label": "Next",
+						"aria-label": localeService.t("ui.navigation.next"),
 						onClick: () => selectTab(activeIndex + 1),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "univer-text-sm" })
 					}), hasHeaderMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -21320,7 +21697,7 @@ function MobileRibbon(props) {
                       dark:!univer-text-gray-300
                     `, { "univer-opacity-30": !canScrollLeft }),
 					disabled: !canScrollLeft,
-					"aria-label": "Previous",
+					"aria-label": localeService.t("ui.navigation.previous"),
 					onClick: () => scrollToolbar("left"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, { className: "univer-text-sm" })
 				}),
@@ -21335,7 +21712,7 @@ function MobileRibbon(props) {
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: (0, _univerjs_design.clsx)("univer-flex univer-shrink-0 univer-items-center univer-gap-0.5 univer-pr-1.5 rtl:univer-pl-1.5 rtl:univer-pr-0", { [_univerjs_design.borderRightClassName]: groupIndex !== activeGroups.length - 1 }),
 							children: groupItems.map((child) => child.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: (0, _univerjs_design.clsx)("[&_button]:!univer-font-inherit univer-flex univer-h-8 univer-shrink-0 univer-items-center univer-rounded-md [&_*]:univer-box-border [&_.univer-custom-label]:univer-text-sm [&_.univer-custom-label]:univer-leading-none [&_.univer-toolbar-button-selector-main]:!univer-h-8 [&_.univer-toolbar-button-selector-main]:!univer-rounded-none [&_.univer-toolbar-button-selector-main]:!univer-rounded-l-md [&_.univer-toolbar-button-selector-main]:!univer-px-1.5 [&_.univer-toolbar-button-selector-root]:!univer-h-8 [&_.univer-toolbar-button-selector-root]:univer-overflow-hidden [&_.univer-toolbar-button-selector-root]:!univer-rounded-md [&_.univer-toolbar-button-selector-root]:!univer-pr-0 [&_.univer-toolbar-button-selector-trigger]:!univer-static [&_.univer-toolbar-button-selector-trigger]:!univer-h-8 [&_.univer-toolbar-button-selector-trigger]:!univer-w-6 [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-none [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-r-md [&_.univer-toolbar-selector-root]:!univer-h-8 [&_.univer-toolbar-selector-root]:!univer-gap-1 [&_.univer-toolbar-selector-root]:!univer-rounded-md [&_.univer-toolbar-selector-root]:!univer-px-1.5 [&_.univer-toolbar-selector-trigger]:!univer-pl-0.5 [&_.univer-tooltip]:univer-inline-flex [&_.univer-tooltip]:univer-h-full [&_.univer-tooltip]:univer-items-center [&_[data-u-command]]:!univer-h-8 [&_[data-u-command]]:!univer-min-h-8 [&_[data-u-command]]:!univer-rounded-md [&_[data-u-command]]:!univer-px-1.5 [&_button]:!univer-h-8 [&_button]:!univer-min-w-8 [&_button]:!univer-rounded-md [&_button]:!univer-px-1.5", nestedControlResetClassName),
+								className: (0, _univerjs_design.clsx)("[&_button]:!univer-font-inherit univer-flex univer-h-8 univer-shrink-0 univer-items-center univer-rounded-md [&_*]:univer-box-border [&_.univer-custom-label]:univer-text-sm [&_.univer-custom-label]:univer-leading-none [&_.univer-toolbar-button-selector-main]:!univer-h-8 [&_.univer-toolbar-button-selector-main]:!univer-rounded-none [&_.univer-toolbar-button-selector-main]:!univer-rounded-l-md [&_.univer-toolbar-button-selector-main]:!univer-px-1.5 [&_.univer-toolbar-button-selector-root]:!univer-h-8 [&_.univer-toolbar-button-selector-root]:univer-overflow-hidden [&_.univer-toolbar-button-selector-root]:!univer-rounded-md [&_.univer-toolbar-button-selector-root]:!univer-pr-0 [&_.univer-toolbar-button-selector-trigger]:!univer-static [&_.univer-toolbar-button-selector-trigger]:!univer-h-8 [&_.univer-toolbar-button-selector-trigger]:!univer-w-6 [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-none [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-r-md [&_.univer-toolbar-selector-root]:!univer-h-8 [&_.univer-toolbar-selector-root]:!univer-gap-1 [&_.univer-toolbar-selector-root]:!univer-rounded-md [&_.univer-toolbar-selector-root]:!univer-px-1.5 [&_.univer-toolbar-selector-trigger]:!univer-pl-0.5 [&_.univer-tooltip]:univer-inline-flex [&_.univer-tooltip]:univer-h-full [&_.univer-tooltip]:univer-items-center [&_[data-u-command]]:!univer-h-8 [&_[data-u-command]]:!univer-min-h-8 [&_[data-u-command]]:!univer-rounded-md [&_[data-u-command]]:!univer-px-1.5 [&_button]:!univer-m-0 [&_button]:!univer-h-8 [&_button]:!univer-min-w-8 [&_button]:!univer-appearance-none [&_button]:!univer-rounded-md [&_button]:!univer-border-0 [&_button]:!univer-bg-transparent [&_button]:!univer-p-0 [&_button]:!univer-px-1.5 [&_button]:!univer-leading-none [&_button]:!univer-outline-none [&_input]:!univer-m-0 [&_input]:!univer-appearance-none [&_input]:!univer-border-0 [&_input]:!univer-bg-transparent [&_input]:!univer-p-0 [&_input]:!univer-leading-none [&_input]:!univer-outline-none"),
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, { ...child.item })
 							}, child.key))
 						}, groupItem.key);
@@ -21349,7 +21726,7 @@ function MobileRibbon(props) {
                       dark:!univer-text-gray-300
                     `, { "univer-opacity-30": !canScrollRight }),
 					disabled: !canScrollRight,
-					"aria-label": "Next",
+					"aria-label": localeService.t("ui.navigation.next"),
 					onClick: () => scrollToolbar("right"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "univer-text-sm" })
 				})
@@ -21362,8 +21739,10 @@ function MobileRibbon(props) {
 //#region src/views/menu/mobile/MobileMenu.tsx
 function MobileMenu(props) {
 	var _viewStack;
-	const { menuType, onOptionSelect, schemas: providedSchemas } = props;
-	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
+	const { menuType, onOptionSelect, schemas: providedSchemas, menuManagerService: providedMenuManagerService } = props;
+	const rootMenuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const menuManagerService = providedMenuManagerService !== null && providedMenuManagerService !== void 0 ? providedMenuManagerService : rootMenuManagerService;
 	const [viewStack, setViewStack] = (0, react.useState)([]);
 	const menuSchemas = (0, react.useMemo)(() => {
 		if (providedSchemas) return providedSchemas;
@@ -21391,7 +21770,7 @@ function MobileMenu(props) {
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
-					"aria-label": "Back",
+					"aria-label": localeService.t("ui.navigation.back"),
 					className: "univer-flex univer-size-8 univer-appearance-none univer-items-center univer-justify-center univer-rounded-full univer-border-0 univer-bg-transparent univer-p-0 univer-text-gray-700 hover:univer-bg-gray-100 active:univer-bg-gray-200",
 					onClick: closeView,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, { className: "univer-text-base" })
@@ -21411,6 +21790,7 @@ function MobileMenu(props) {
 				className: "univer-overflow-hidden univer-rounded-2xl univer-bg-white",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSchemaList, {
 					schemas: (currentView === null || currentView === void 0 ? void 0 : currentView.kind) === "schema" ? currentView.schemas : menuSchemas,
+					menuManagerService,
 					menuType,
 					onExecute: onOptionSelect,
 					onOpenView: openView
@@ -21429,7 +21809,7 @@ function MobileMenu(props) {
 	});
 }
 function MobileSchemaList(props) {
-	const { schemas, menuType, onExecute, onOpenView } = props;
+	const { schemas, menuManagerService, menuType, onExecute, onOpenView } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const hiddenGroupStates = useContextGroupHiddenStates(schemas);
 	const visibleSchemas = (0, react.useMemo)(() => {
@@ -21443,6 +21823,7 @@ function MobileSchemaList(props) {
 		var _schema$children2;
 		if (schema.item) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSchemaRow, {
 			schema,
+			menuManagerService,
 			menuType,
 			onExecute,
 			onOpenView,
@@ -21456,6 +21837,7 @@ function MobileSchemaList(props) {
 				children: localeService.t(schema.title)
 			}), schema.children.map((childSchema, childIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSchemaRow, {
 				schema: childSchema,
+				menuManagerService,
 				menuType,
 				onExecute,
 				onOpenView,
@@ -21465,9 +21847,10 @@ function MobileSchemaList(props) {
 	}) });
 }
 function MobileSchemaRow(props) {
-	const { schema, menuType, onExecute, onOpenView, bordered } = props;
+	const { schema, menuManagerService, menuType, onExecute, onOpenView, bordered } = props;
 	const interaction = useMobileSchemaInteraction({
 		schema,
+		menuManagerService,
 		menuType,
 		onOpenView
 	});
@@ -21542,8 +21925,7 @@ function MobileSelectionOptionRow(props) {
 }
 function useMobileSchemaInteraction(props) {
 	var _schema$children3;
-	const { schema, menuType, onOpenView } = props;
-	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
+	const { schema, menuManagerService, menuType, onOpenView } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const menuItem = schema.item;
 	const selectorItem = menuItem;
@@ -21624,30 +22006,20 @@ function getMenuSchemaTitle(schema, localeService) {
 	return schema.key;
 }
 function useContextGroupHiddenStates(menuSchemas) {
-	const [hiddenStates, setHiddenStates] = (0, react.useState)({});
-	(0, react.useEffect)(() => {
-		const subscriptions = menuSchemas.map((menuSchema) => {
+	return (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
+		const groupStates = menuSchemas.flatMap((menuSchema) => {
 			var _menuSchema$children;
-			if (!((_menuSchema$children = menuSchema.children) === null || _menuSchema$children === void 0 ? void 0 : _menuSchema$children.length)) return null;
-			const hiddenObservables = getLeafItemSchemas(menuSchema.children).map((childSchema) => {
+			const hiddenObservables = ((_menuSchema$children = menuSchema.children) === null || _menuSchema$children === void 0 ? void 0 : _menuSchema$children.length) ? getLeafItemSchemas(menuSchema.children).map((childSchema) => {
 				var _childSchema$item$hid, _childSchema$item;
 				return (_childSchema$item$hid = (_childSchema$item = childSchema.item) === null || _childSchema$item === void 0 ? void 0 : _childSchema$item.hidden$) !== null && _childSchema$item$hid !== void 0 ? _childSchema$item$hid : (0, rxjs.of)(false);
-			});
-			if (!hiddenObservables.length) return null;
-			return (0, rxjs.combineLatest)(hiddenObservables).subscribe((hiddenValues) => {
-				const isAllHidden = hiddenValues.every((hidden) => hidden === true);
-				setHiddenStates((state) => ({
-					...state,
-					[menuSchema.key]: isAllHidden
-				}));
-			});
+			}) : [];
+			return hiddenObservables.length ? [(0, rxjs.combineLatest)(hiddenObservables).pipe((0, rxjs.map)((values) => [menuSchema.key, values.every(Boolean)]))] : [];
 		});
-		return () => {
-			subscriptions.forEach((subscription) => subscription === null || subscription === void 0 ? void 0 : subscription.unsubscribe());
-			setHiddenStates({});
-		};
-	}, [menuSchemas]);
-	return hiddenStates;
+		return groupStates.length ? (0, rxjs.merge)(...groupStates).pipe((0, rxjs_operators.scan)((states, [key, hidden]) => ({
+			...states,
+			[key]: hidden
+		}), {}), (0, rxjs_operators.startWith)({})) : (0, rxjs.of)({});
+	}, [menuSchemas]), {});
 }
 function getLeafItemSchemas(schemas) {
 	return schemas.reduce((acc, schema) => {
@@ -21664,11 +22036,14 @@ const MOBILE_CONTEXT_MENU_HOST_ID = "mobile-context-menu";
 function MobileContextMenu() {
 	const [visible, setVisible] = (0, react.useState)(false);
 	const [menuType, setMenuType] = (0, react.useState)("");
+	const [menuContext, setMenuContext] = (0, react.useState)();
 	const visibleRef = (0, react.useRef)(visible);
 	const contextMenuHostService = (0, _wendellhu_redi_react_bindings.useDependency)(IContextMenuHostService);
 	const contextMenuService = (0, _wendellhu_redi_react_bindings.useDependency)(IContextMenuService);
 	const commandService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ICommandService);
 	const layoutService = (0, _wendellhu_redi_react_bindings.useDependency)(ILayoutService);
+	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
+	const runtimeScopeService = (0, _wendellhu_redi_react_bindings.useDependency)(IUIRuntimeScopeService);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$);
 	const { mountContainer } = (0, react.useContext)(_univerjs_design.ConfigContext);
@@ -21692,9 +22067,10 @@ function MobileContextMenu() {
 			contextMenuHostService.deactivateMenu(MOBILE_CONTEXT_MENU_HOST_ID);
 		};
 	}, [contextMenuHostService, contextMenuService]);
-	function handleContextMenu(_event, nextMenuType) {
+	function handleContextMenu(_event, nextMenuType, context) {
 		contextMenuHostService.activateMenu(MOBILE_CONTEXT_MENU_HOST_ID);
 		setMenuType(nextMenuType);
+		setMenuContext(context);
 		setVisible(true);
 	}
 	function handleClose() {
@@ -21709,6 +22085,23 @@ function MobileContextMenu() {
 		}
 	}, [localeService, menuType]);
 	if (!mountContainer || !visible) return null;
+	const activeScope = runtimeScopeService.get(menuContext === null || menuContext === void 0 ? void 0 : menuContext.unitId);
+	const activeCommandService = (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(_univerjs_core.ICommandService)) ? activeScope.get(_univerjs_core.ICommandService) : commandService;
+	const activeLayoutService = (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(ILayoutService)) ? activeScope.get(ILayoutService) : layoutService;
+	const menu = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileMenu, {
+		menuType,
+		menuManagerService: (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(IMenuManagerService)) ? activeScope.get(IMenuManagerService) : menuManagerService,
+		onOptionSelect: (params) => {
+			var _ref, _params$commandId;
+			const commandId = (_ref = (_params$commandId = params.commandId) !== null && _params$commandId !== void 0 ? _params$commandId : params.id) !== null && _ref !== void 0 ? _ref : params.label;
+			const fallbackParams = typeof params.params === "function" ? params.params() : params.params;
+			const commandParams = typeof params.value === "undefined" ? fallbackParams : { value: params.value };
+			if (!commandId) return;
+			activeLayoutService.focus();
+			activeCommandService.executeCommand(commandId, commandParams);
+			handleClose();
+		}
+	});
 	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		dir: direction,
 		className: "univer-fixed univer-inset-0 univer-z-[1080] univer-flex univer-items-end",
@@ -21742,19 +22135,7 @@ function MobileContextMenu() {
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, { className: "univer-size-4 univer-text-current" })
 					})]
 				})]
-			}), menuType && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileMenu, {
-				menuType,
-				onOptionSelect: (params) => {
-					var _ref, _params$commandId;
-					const commandId = (_ref = (_params$commandId = params.commandId) !== null && _params$commandId !== void 0 ? _params$commandId : params.id) !== null && _ref !== void 0 ? _ref : params.label;
-					const fallbackParams = typeof params.params === "function" ? params.params() : params.params;
-					const commandParams = typeof params.value === "undefined" ? fallbackParams : { value: params.value };
-					if (!commandId) return;
-					layoutService.focus();
-					commandService.executeCommand(commandId, commandParams);
-					handleClose();
-				}
-			})]
+			}), menuType && menu]
 		})]
 	}), mountContainer);
 }
@@ -21781,20 +22162,12 @@ function MobileWorkbench(props) {
 	const leftSidebarComponents = useComponentsOfPart("left-sidebar");
 	const globalComponents = useComponentsOfPart("global");
 	const toolbarComponents = useComponentsOfPart("toolbar");
-	const [darkMode, setDarkMode] = (0, react.useState)(false);
-	(0, react.useEffect)(() => {
-		const sub = themeService.darkMode$.subscribe((darkMode) => {
-			setDarkMode(darkMode);
-		});
-		return () => {
-			sub.unsubscribe();
-		};
-	}, []);
+	const darkMode = (0, _wendellhu_redi_react_bindings.useObservable)(themeService.darkMode$, themeService.darkMode);
 	(0, react.useEffect)(() => {
 		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
 	}, [onRendered]);
-	const [locale, setLocale] = (0, react.useState)(localeService.getLocales());
-	const [direction, setDirection] = (0, react.useState)(localeService.getDirection());
+	const locale = (0, _wendellhu_redi_react_bindings.useObservable)(() => localeService.localeChanged$.pipe((0, rxjs.map)(() => localeService.getLocales())), localeService.getLocales(), false, [localeService]);
+	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$, localeService.getDirection());
 	const portalContainer = (0, react.useMemo)(() => document.createElement("div"), []);
 	(0, react.useLayoutEffect)(() => {
 		const sub = themeService.currentTheme$.subscribe((theme) => {
@@ -21806,20 +22179,10 @@ function MobileWorkbench(props) {
 	}, []);
 	(0, react.useEffect)(() => {
 		document.body.appendChild(portalContainer);
-		const subscriptions = [localeService.localeChanged$.subscribe(() => {
-			setLocale(localeService.getLocales());
-		}), localeService.direction$.subscribe(() => {
-			setDirection(localeService.getDirection());
-		})];
 		return () => {
-			subscriptions.forEach((subscription) => subscription.unsubscribe());
 			document.body.removeChild(portalContainer);
 		};
-	}, [
-		localeService,
-		mountContainer,
-		portalContainer
-	]);
+	}, [mountContainer, portalContainer]);
 	(0, react.useEffect)(() => {
 		portalContainer.dir = direction;
 	}, [direction, portalContainer]);
@@ -21884,17 +22247,15 @@ function MobileWorkbench(props) {
 //#endregion
 //#region src/controllers/ui/ui-mobile.controller.ts
 let MobileUIController = class MobileUIController extends SingleUnitUIController {
-	constructor(_config, injector, lifecycleService, renderManagerService, layoutService, instanceService, menuManagerService, uiPartsService, _componentManager) {
+	constructor(_config, injector, lifecycleService, renderManagerService, layoutService, instanceService, menuManagerService, uiPartsService) {
 		super(injector, instanceService, layoutService, lifecycleService, renderManagerService);
 		this._config = _config;
-		this._componentManager = _componentManager;
 		menuManagerService.mergeMenu(menuSchema);
 		this._initBuiltinComponents(uiPartsService);
 		this._bootstrapWorkbench();
 	}
 	dispose() {
 		super.dispose();
-		this._componentManager.dispose();
 	}
 	bootstrap(callback) {
 		return bootstrap(this._injector, this._config, callback);
@@ -21912,8 +22273,7 @@ MobileUIController = __decorate([
 	__decorateParam(4, ILayoutService),
 	__decorateParam(5, _univerjs_core.IUniverInstanceService),
 	__decorateParam(6, IMenuManagerService),
-	__decorateParam(7, IUIPartsService),
-	__decorateParam(8, (0, _univerjs_core.Inject)(ComponentManager))
+	__decorateParam(7, IUIPartsService)
 ], MobileUIController);
 function bootstrap(injector, options, callback) {
 	let mountContainer;
@@ -21947,9 +22307,10 @@ const INotificationService = (0, _univerjs_core.createIdentifier)("ui.notificati
 //#region src/services/before-close/before-close.service.ts
 const IBeforeCloseService = (0, _univerjs_core.createIdentifier)("univer.ui.before-close-service");
 let DesktopBeforeCloseService = class DesktopBeforeCloseService extends _univerjs_core.Disposable {
-	constructor(_notificationService) {
+	constructor(_notificationService, _localeService) {
 		super();
 		this._notificationService = _notificationService;
+		this._localeService = _localeService;
 		_defineProperty(this, "_beforeUnloadCallbacks", []);
 		_defineProperty(this, "_onCloseCallbacks", []);
 		_defineProperty(this, "_beforeUnloadHandler", void 0);
@@ -21960,7 +22321,7 @@ let DesktopBeforeCloseService = class DesktopBeforeCloseService extends _univerj
 			if (message) {
 				this._notificationService.show({
 					type: "error",
-					title: "Some changes are not saved",
+					title: this._localeService.t("ui.beforeClose.title"),
 					content: message
 				});
 				if (typeof event === "undefined") event = window.event;
@@ -21997,7 +22358,7 @@ let DesktopBeforeCloseService = class DesktopBeforeCloseService extends _univerj
 		window.addEventListener("unload", this._unloadHandler);
 	}
 };
-DesktopBeforeCloseService = __decorate([__decorateParam(0, INotificationService)], DesktopBeforeCloseService);
+DesktopBeforeCloseService = __decorate([__decorateParam(0, INotificationService), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService))], DesktopBeforeCloseService);
 
 //#endregion
 //#region src/utils/html.ts
@@ -22430,17 +22791,7 @@ const ContextConfirm = (props) => {
 	});
 };
 function ConfirmPart() {
-	const confirmService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IConfirmService);
-	const [confirmOptions, setConfirmOptions] = (0, react.useState)([]);
-	(0, react.useEffect)(() => {
-		const subscription = confirmService.confirmOptions$.subscribe((options) => {
-			setConfirmOptions(options);
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, []);
-	const props = confirmOptions.map((options) => {
+	const props = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IConfirmService).confirmOptions$, []).map((options) => {
 		const { children, title, ...restProps } = options;
 		const confirmProps = restProps;
 		for (const key of ["children", "title"]) {
@@ -22517,14 +22868,7 @@ const IDialogService = (0, _univerjs_core.createIdentifier)("univer.ui.dialog-se
 //#endregion
 //#region src/views/components/dialog-part/DialogPart.tsx
 function DialogPart() {
-	const dialogService = (0, _wendellhu_redi_react_bindings.useDependency)(IDialogService);
-	const [dialogOptions, setDialogOptions] = (0, react.useState)([]);
-	(0, react.useEffect)(() => {
-		const subscription = dialogService.getDialogs$().subscribe((options) => {
-			setDialogOptions(options);
-		});
-		return () => subscription.unsubscribe();
-	}, []);
+	const dialogOptions = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(IDialogService).getDialogs$(), []);
 	const attrs = (0, react.useMemo)(() => dialogOptions.map((options) => {
 		const { children, title, footer, ...restProps } = options;
 		const dialogProps = restProps;
@@ -23119,6 +23463,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends _univerjs_core.Plu
 			[IMenuManagerService, { useClass: MenuManagerService }],
 			[IContextMenuHostService, { useClass: ContextMenuHostService }],
 			[IContextMenuService, { useClass: ContextMenuService }],
+			[IUIRuntimeScopeService, { useClass: UIRuntimeScopeService }],
 			[IClipboardInterfaceService, {
 				useClass: BrowserClipboardService,
 				lazy: true
@@ -23156,6 +23501,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends _univerjs_core.Plu
 			[ICanvasPopupService, { useClass: CanvasPopupService }],
 			[IFontService, { useClass: FontService }],
 			[CanvasFloatDomService],
+			[CanvasFloatDomPreviewService],
 			[IUIController, {
 				useFactory: (injector) => injector.createInstance(MobileUIController, this._config),
 				deps: [_univerjs_core.Injector]
@@ -23213,11 +23559,13 @@ let UniverUIPlugin = class UniverUIPlugin extends _univerjs_core.Plugin {
 			[IUIPartsService, { useClass: UIPartsService }],
 			[ILayoutService, { useClass: DesktopLayoutService }],
 			[IRibbonService, { useClass: DesktopRibbonService }],
+			[IRibbonOverrideService, { useClass: RibbonOverrideService }],
 			[IShortcutService, { useClass: ShortcutService }],
 			[IPlatformService, { useClass: PlatformService }],
 			[IMenuManagerService, { useClass: MenuManagerService }],
 			[IContextMenuHostService, { useClass: ContextMenuHostService }],
 			[IContextMenuService, { useClass: ContextMenuService }],
+			[IUIRuntimeScopeService, { useClass: UIRuntimeScopeService }],
 			[IClipboardInterfaceService, {
 				useClass: BrowserClipboardService,
 				lazy: true
@@ -23255,6 +23603,7 @@ let UniverUIPlugin = class UniverUIPlugin extends _univerjs_core.Plugin {
 			[ICanvasPopupService, { useClass: CanvasPopupService }],
 			[IFontService, { useClass: FontService }],
 			[CanvasFloatDomService],
+			[CanvasFloatDomPreviewService],
 			[IUIController, {
 				useFactory: (injector) => injector.createInstance(DesktopUIController, this._config),
 				deps: [_univerjs_core.Injector]
@@ -23924,15 +24273,31 @@ function extractFontFamily(styleStr) {
 //#endregion
 //#region src/views/components/dom/Print.tsx
 const PrintFloatDomSingle = (0, react.memo)((props) => {
+	const { layer } = props;
+	return typeof layer.componentKey === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RegisteredPrintFloatDomSingle, {
+		...props,
+		componentKey: layer.componentKey
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrintFloatDomSingleContent, {
+		...props,
+		Component: layer.componentKey
+	});
+});
+function RegisteredPrintFloatDomSingle(props) {
+	const componentManager = (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrintFloatDomSingleContent, {
+		...props,
+		Component: componentManager.get(props.componentKey)
+	});
+}
+function PrintFloatDomSingleContent(props) {
 	var _position$startY, _position$startX;
-	const { layer, id, position } = props;
+	const { layer, id, position, Component } = props;
 	const univerInstanceService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IUniverInstanceService);
 	const domRef = (0, react.useRef)(null);
 	const innerDomRef = (0, react.useRef)(null);
 	const transformRef = (0, react.useRef)(`transform: rotate(${position === null || position === void 0 ? void 0 : position.rotate}deg) translate(${position === null || position === void 0 ? void 0 : position.startX}px, ${position === null || position === void 0 ? void 0 : position.startY}px)`);
 	const topRef = (0, react.useRef)((_position$startY = position === null || position === void 0 ? void 0 : position.startY) !== null && _position$startY !== void 0 ? _position$startY : 0);
 	const leftRef = (0, react.useRef)((_position$startX = position === null || position === void 0 ? void 0 : position.startX) !== null && _position$startX !== void 0 ? _position$startX : 0);
-	const Component = typeof layer.componentKey === "string" ? (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager).get(layer.componentKey) : layer.componentKey;
 	const layerProps = (0, react.useMemo)(() => ({
 		data: layer.data,
 		...layer.props
@@ -23968,16 +24333,16 @@ const PrintFloatDomSingle = (0, react.memo)((props) => {
 			transform: transformRef.current
 		},
 		onPointerMove: (e) => {
-			layer.onPointerMove(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onPointerMove(e.nativeEvent);
 		},
 		onPointerDown: (e) => {
-			layer.onPointerDown(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onPointerDown(e.nativeEvent);
 		},
 		onPointerUp: (e) => {
-			layer.onPointerUp(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onPointerUp(e.nativeEvent);
 		},
 		onWheel: (e) => {
-			layer.onWheel(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onWheel(e.nativeEvent);
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: innerDomRef,
@@ -23987,7 +24352,7 @@ const PrintFloatDomSingle = (0, react.memo)((props) => {
 			children: component
 		})
 	});
-});
+}
 
 //#endregion
 //#region src/views/progress-bar/ProgressBar.tsx
@@ -24082,6 +24447,7 @@ Object.defineProperty(exports, 'BrowserClipboardService', {
 exports.BuiltInUIPart = BuiltInUIPart;
 exports.COLOR_PICKER_COMPONENT = COLOR_PICKER_COMPONENT;
 exports.COMMON_LABEL_COMPONENT = COMMON_LABEL_COMPONENT;
+exports.CanvasFloatDomPreviewService = CanvasFloatDomPreviewService;
 exports.CanvasFloatDomService = CanvasFloatDomService;
 exports.CanvasPopup = CanvasPopup;
 exports.CanvasPopupService = CanvasPopupService;
@@ -24162,6 +24528,7 @@ Object.defineProperty(exports, 'DesktopUIController', {
     return DesktopUIController;
   }
 });
+exports.EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE = EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE;
 exports.EMOJI_CATEGORIES = EMOJI_CATEGORIES;
 exports.EMOJI_PICKER_COMPONENT = EMOJI_PICKER_COMPONENT;
 exports.EMOJI_RECENT_LIMIT = EMOJI_RECENT_LIMIT;
@@ -24212,11 +24579,13 @@ exports.IMenuManagerService = IMenuManagerService;
 exports.IMessageService = IMessageService;
 exports.INotificationService = INotificationService;
 exports.IPlatformService = IPlatformService;
+exports.IRibbonOverrideService = IRibbonOverrideService;
 exports.IRibbonService = IRibbonService;
 exports.IShortcutService = IShortcutService;
 exports.ISidebarService = ISidebarService;
 exports.IUIController = IUIController;
 exports.IUIPartsService = IUIPartsService;
+exports.IUIRuntimeScopeService = IUIRuntimeScopeService;
 Object.defineProperty(exports, 'IconManager', {
   enumerable: true,
   get: function () {
@@ -24265,6 +24634,7 @@ exports.RibbonDataGroup = RibbonDataGroup;
 exports.RibbonFormulasGroup = RibbonFormulasGroup;
 exports.RibbonInsertGroup = RibbonInsertGroup;
 exports.RibbonOthersGroup = RibbonOthersGroup;
+exports.RibbonOverrideService = RibbonOverrideService;
 exports.RibbonPosition = RibbonPosition;
 exports.RibbonStartGroup = RibbonStartGroup;
 exports.RibbonViewGroup = RibbonViewGroup;
@@ -24293,11 +24663,13 @@ exports.SingleCanvasPopup = SingleCanvasPopup;
 exports.SingleUnitUIController = SingleUnitUIController;
 exports.Slider = Slider;
 exports.ThemeSwitcherService = ThemeSwitcherService;
+exports.ToggleFullscreenOperation = ToggleFullscreenOperation;
 exports.ToggleShortcutPanelOperation = ToggleShortcutPanelOperation;
 exports.ToolbarButton = ToolbarButton;
 exports.ToolbarItem = ToolbarItem;
 exports.UIMenuSchema = menuSchema;
 exports.UIPartsService = UIPartsService;
+exports.UIRuntimeScopeService = UIRuntimeScopeService;
 exports.UI_PLUGIN_CONFIG_KEY = UI_PLUGIN_CONFIG_KEY;
 exports.UNI_DISABLE_CHANGING_FOCUS_KEY = UNI_DISABLE_CHANGING_FOCUS_KEY;
 exports.UndoShortcutItem = UndoShortcutItem;
@@ -24320,6 +24692,7 @@ Object.defineProperty(exports, 'WithDependency', {
   }
 });
 exports.ZIndexManager = ZIndexManager;
+exports.ZoomInput = ZoomInput;
 Object.defineProperty(exports, 'connectDependencies', {
   enumerable: true,
   get: function () {
@@ -24334,6 +24707,7 @@ Object.defineProperty(exports, 'connectInjector', {
 });
 exports.getAllEmojis = getAllEmojis;
 exports.getDefaultRecentEmojis = getDefaultRecentEmojis;
+exports.getEmbedBoundaryOwner = getEmbedBoundaryOwner;
 exports.getEmojiLocaleData = getEmojiLocaleData;
 exports.getHeaderFooterMenuHiddenObservable = getHeaderFooterMenuHiddenObservable;
 exports.getLocalizedEmojiTitle = getLocalizedEmojiTitle;
@@ -24348,6 +24722,8 @@ exports.handleTableColgroup = handleTableColgroup;
 exports.handleTableMergeData = handleTableMergeData;
 exports.handleTableRowGroup = handleTableRowGroup;
 exports.imageMimeTypeSet = imageMimeTypeSet;
+exports.isEmbedBoundaryTarget = isEmbedBoundaryTarget;
+exports.keepInteractionInsideSameEmbedBoundary = keepInteractionInsideSameEmbedBoundary;
 exports.mergeMenuConfigs = mergeMenuConfigs;
 exports.parseHtmlDocument = parseHtmlDocument;
 exports.parseHtmlFragment = parseHtmlFragment;