@univerjs/ui 1.0.0-alpha.3 → 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 {
@@ -612,168 +787,17 @@ let MetaKeys = /* @__PURE__ */ function(MetaKeys) {
 	/** Option key on MacOS. Alt key on other systems. */
 	MetaKeys[MetaKeys["ALT"] = 2048] = "ALT";
 	/** Command key on MacOS. Ctrl key on other systems. */
-	MetaKeys[MetaKeys["CTRL_COMMAND"] = 4096] = "CTRL_COMMAND";
-	/** Ctrl key for MacOS. Not valid on other systems. */
-	MetaKeys[MetaKeys["MAC_CTRL"] = 8192] = "MAC_CTRL";
-	return MetaKeys;
-}({});
-
-//#endregion
-//#region src/common/lifecycle.ts
-function fromGlobalEvent(type, listener, options) {
-	window.addEventListener(type, listener, options);
-	return (0, _univerjs_core.toDisposable)(() => window.removeEventListener(type, listener, options));
-}
-
-//#endregion
-//#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 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;
+	MetaKeys[MetaKeys["CTRL_COMMAND"] = 4096] = "CTRL_COMMAND";
+	/** Ctrl key for MacOS. Not valid on other systems. */
+	MetaKeys[MetaKeys["MAC_CTRL"] = 8192] = "MAC_CTRL";
+	return MetaKeys;
+}({});
+
+//#endregion
+//#region src/common/lifecycle.ts
+function fromGlobalEvent(type, listener, options) {
+	window.addEventListener(type, listener, options);
+	return (0, _univerjs_core.toDisposable)(() => window.removeEventListener(type, listener, options));
 }
 
 //#endregion
@@ -999,6 +1023,7 @@ let SharedController = class SharedController extends _univerjs_core.Disposable
 		this._registerShortcuts();
 	}
 	_registerCommands() {
+		this.disposeWithMe(this._commandService.registerCommand(ToggleFullscreenOperation));
 		[
 			CutCommand,
 			CopyCommand,
@@ -1053,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;
@@ -1132,7 +1158,8 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 					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,
@@ -1677,13 +1704,29 @@ function applyFloatDomLayout(wrapper, inner, layout) {
 	innerStyle.bottom = innerLayout.bottom === "auto" ? "auto" : `${innerLayout.bottom}px`;
 }
 const FloatDomSingle = (0, react.memo)((props) => {
+	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 } = props;
+	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 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,
@@ -1755,7 +1798,7 @@ const FloatDomSingle = (0, react.memo)((props) => {
 			children: component
 		})
 	});
-});
+}
 const FloatDom = ({ unitId }) => {
 	var _layers$filter;
 	const instanceService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IUniverInstanceService);
@@ -2024,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;
@@ -2045,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, {
@@ -2307,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, [
@@ -2484,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;
@@ -2555,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)) {
@@ -2564,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 }) {
@@ -2686,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;
@@ -2718,21 +2718,21 @@ function getOptionKey(option) {
 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;
@@ -2750,39 +2750,6 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 		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) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuLabel, {
@@ -3009,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;
@@ -3017,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,
@@ -3082,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",
@@ -3091,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, {
@@ -3668,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: {
@@ -3735,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,
@@ -3819,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, {
@@ -4637,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",
@@ -4736,28 +4680,20 @@ 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
@@ -4935,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);
@@ -5041,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)
@@ -5052,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;
@@ -5081,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, {})
 					})]
 				}),
@@ -5326,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]);
@@ -5518,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);
@@ -5546,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;
@@ -5580,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.3";
+var version = "1.0.0-alpha.4";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -20734,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;
@@ -20882,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
 	};
 }
@@ -21189,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;
@@ -21203,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();
 	}, []);
@@ -21313,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: [
@@ -21425,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
 			})
 		]
 	});
@@ -21484,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
 		}));
 	}
@@ -21579,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" })
 					})
@@ -21616,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", {
@@ -21636,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" })
 				}),
@@ -21665,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" })
 				})
@@ -21680,6 +21741,7 @@ function MobileMenu(props) {
 	var _viewStack;
 	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)(() => {
@@ -21708,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" })
@@ -21944,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) => {
@@ -22110,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) => {
@@ -22135,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]);
@@ -22213,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);
@@ -22241,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;
@@ -22276,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);
@@ -22289,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;
@@ -22326,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
@@ -22759,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"]) {
@@ -22846,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;
@@ -24258,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
@@ -24321,7 +24352,7 @@ const PrintFloatDomSingle = (0, react.memo)((props) => {
 			children: component
 		})
 	});
-});
+}
 
 //#endregion
 //#region src/views/progress-bar/ProgressBar.tsx
@@ -24632,6 +24663,7 @@ exports.SingleCanvasPopup = SingleCanvasPopup;
 exports.SingleUnitUIController = SingleUnitUIController;
 exports.Slider = Slider;
 exports.ThemeSwitcherService = ThemeSwitcherService;
+exports.ToggleFullscreenOperation = ToggleFullscreenOperation;
 exports.ToggleShortcutPanelOperation = ToggleShortcutPanelOperation;
 exports.ToolbarButton = ToolbarButton;
 exports.ToolbarItem = ToolbarItem;
@@ -24660,6 +24692,7 @@ Object.defineProperty(exports, 'WithDependency', {
   }
 });
 exports.ZIndexManager = ZIndexManager;
+exports.ZoomInput = ZoomInput;
 Object.defineProperty(exports, 'connectDependencies', {
   enumerable: true,
   get: function () {