@univerjs/ui 1.0.0-rc.0 → 1.0.0

package/lib/cjs/index.js

@@ -56,7 +56,7 @@ function getAttributeValue(target, name) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -67,7 +67,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -80,14 +80,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -98,7 +98,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -106,7 +106,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.149.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);
@@ -524,10 +524,12 @@ function mergeMenuConfigs(baseConfig, additionalConfig) {
 	return baseConfig;
 }
 function updateReactiveProperty(baseConfig, key, value) {
-	if (value !== void 0) if (baseConfig[key]) baseConfig[key] = baseConfig[key].pipe((0, rxjs.switchMap)(() => new rxjs.BehaviorSubject(value)));
-	else baseConfig[key] = new rxjs.Observable((subscriber) => {
-		subscriber.next(value);
-	});
+	if (value !== void 0) {
+		if (baseConfig[key]) baseConfig[key] = baseConfig[key].pipe((0, rxjs.switchMap)(() => new rxjs.BehaviorSubject(value)));
+		else baseConfig[key] = new rxjs.Observable((subscriber) => {
+			subscriber.next(value);
+		});
+	}
 }
 
 //#endregion
@@ -673,21 +675,6 @@ const IMessageService = (0, _univerjs_core.createIdentifier)("ui.message.service
 
 //#endregion
 //#region src/controllers/error/error.controller.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 PERMISSION_MESSAGE_ID = "ui.permission-denied";
 const PERMISSION_MESSAGE_DURATION = 3e3;
 let ErrorController = class ErrorController extends _univerjs_core.Disposable {
@@ -1104,7 +1091,7 @@ let ShortcutService = class ShortcutService extends _univerjs_core.Disposable {
 	}
 	dispatch(e) {
 		if (e.isComposing) return;
-		if ((e.keyCode === 8 || e.keyCode === 46) && e.target instanceof HTMLInputElement && e.target.closest("[data-u-command]")) return;
+		if (e.target instanceof HTMLInputElement && e.target.closest("[data-u-command]")) return;
 		if (!e.ctrlKey && !e.metaKey && !e.altKey && MENU_NAVIGATION_KEYS.has(e.keyCode) && e.target instanceof HTMLElement && (e.target.matches("button[data-u-command], [data-u-command][role=\"button\"], [data-embed-floating-menu=\"true\"] button, [data-u-command] input") || e.target.closest("[role=\"menu\"]"))) return;
 		if (this._forceEscapeCount > 0 || this._forceDisabled) return;
 		if (this._layoutService && !this._layoutService.checkElementInCurrentContainers(e.target)) return;
@@ -1478,6 +1465,7 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 	}
 	dispose() {
 		this.menuChanged$.complete();
+		super.dispose();
 	}
 	/**
 	* Merge source menu to target menu recursively
@@ -1497,46 +1485,48 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 		this._menu = (0, _univerjs_core.merge)({}, this._menu, source);
 		this.menuChanged$.next();
 	}
+	updateMenuConfig(config) {
+		this._configService.setConfig("menu", config, { merge: true });
+		this.menuChanged$.next();
+	}
 	createScoped(injector) {
-		const root = this;
 		const createScopedBuilder = () => {
-			const service = new _MenuManagerService(injector, root._configService);
-			service._menu = root._menu;
+			const service = new _MenuManagerService(injector, this._configService);
+			service._menu = this._menu;
 			return service;
 		};
 		return {
-			menuChanged$: root.menuChanged$,
-			mergeMenu: (source, target) => root.mergeMenu(source, target),
-			appendRootMenu: (source) => root.appendRootMenu(source),
+			menuChanged$: this.menuChanged$,
+			mergeMenu: (source, target) => this.mergeMenu(source, target),
+			appendRootMenu: (source) => this.appendRootMenu(source),
+			updateMenuConfig: (config) => this.updateMenuConfig(config),
 			getMenuByPositionKey: (position) => createScopedBuilder().getMenuByPositionKey(position),
 			getFlatMenuByPositionKey: (position) => createScopedBuilder().getFlatMenuByPositionKey(position)
 		};
 	}
 	_buildMenuSchema(data) {
 		const result = [];
+		const menuConfig = this._configService.getConfig("menu");
 		for (const [key, value] of Object.entries(data)) {
 			if (key === "replace") continue;
+			const item = value.menuItemFactory ? this._injector.invoke(value.menuItemFactory) : void 0;
+			const config = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig[(item === null || item === void 0 ? void 0 : item.id) ?? key];
 			const menuItem = {
 				key,
-				order: value.order,
+				order: (config === null || config === void 0 ? void 0 : config.order) ?? value.order,
 				title: value.title,
 				contextual: value.contextual,
 				quickLayout: value.quickLayout,
 				quickColumns: value.quickColumns,
 				quickLayoutVariant: value.quickLayoutVariant,
+				mobileLayout: value.mobileLayout,
 				tiny: value.tiny,
-				gridLayout: value.gridLayout
+				gridLayout: (config === null || config === void 0 ? void 0 : config.gridLayout) ? {
+					...value.gridLayout,
+					...config.gridLayout
+				} : value.gridLayout
 			};
-			if (value.menuItemFactory) {
-				const item = this._injector.invoke(value.menuItemFactory);
-				if (item) {
-					const menuItemConfig = this._configService.getConfig("menu");
-					if (menuItemConfig && item.id in menuItemConfig) {
-						const _key = item.id;
-						menuItem.item = mergeMenuConfigs(item, menuItemConfig[_key]);
-					} else menuItem.item = item;
-				}
-			}
+			if (item) menuItem.item = config ? mergeMenuConfigs(item, config) : item;
 			if (value.headerActionMenuItemFactory) menuItem.headerActionItem = this._injector.invoke(value.headerActionMenuItemFactory);
 			if (typeof value === "object") {
 				const children = this._buildMenuSchema(value);
@@ -1832,7 +1822,7 @@ function FeatureSearch() {
 	const dialogService = (0, _wendellhu_redi_react_bindings.useDependency)(IDialogService);
 	const layoutService = (0, _wendellhu_redi_react_bindings.useDependency)(ILayoutService);
 	const ribbonService = (0, _wendellhu_redi_react_bindings.useDependency)(IRibbonService);
-	const items = (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
+	const items$ = (0, react.useMemo)(() => {
 		function getItemTitle(item) {
 			const titleKey = item.title ?? item.tooltip ?? item.description;
 			return titleKey ? localeService.t(titleKey) : "";
@@ -1867,15 +1857,17 @@ function FeatureSearch() {
 			const hasOptions = item.type === 1 || item.type === 2;
 			const selections = hasOptions ? item.selections : void 0;
 			const selections$ = (0, rxjs.isObservable)(selections) ? selections.pipe((0, rxjs_operators.startWith)([])) : (0, rxjs.of)(selections ?? []);
+			const ancestorHidden$ = candidate.ancestors.length ? (0, rxjs.combineLatest)(candidate.ancestors.map((ancestor) => {
+				var _ancestor$hidden$;
+				return ((_ancestor$hidden$ = ancestor.hidden$) === null || _ancestor$hidden$ === void 0 ? void 0 : _ancestor$hidden$.pipe((0, rxjs_operators.startWith)(true))) ?? (0, rxjs.of)(false);
+			})).pipe((0, rxjs_operators.map)((states) => states.some(Boolean))) : (0, rxjs.of)(false);
+			const ancestorDisabled$ = candidate.ancestors.length ? (0, rxjs.combineLatest)(candidate.ancestors.map((ancestor) => {
+				var _ancestor$disabled$;
+				return ((_ancestor$disabled$ = ancestor.disabled$) === null || _ancestor$disabled$ === void 0 ? void 0 : _ancestor$disabled$.pipe((0, rxjs_operators.startWith)(true))) ?? (0, rxjs.of)(false);
+			})).pipe((0, rxjs_operators.map)((states) => states.some(Boolean))) : (0, rxjs.of)(false);
 			return (0, rxjs.combineLatest)([
-				candidate.ancestors.length ? (0, rxjs.combineLatest)(candidate.ancestors.map((ancestor) => {
-					var _ancestor$hidden$;
-					return ((_ancestor$hidden$ = ancestor.hidden$) === null || _ancestor$hidden$ === void 0 ? void 0 : _ancestor$hidden$.pipe((0, rxjs_operators.startWith)(true))) ?? (0, rxjs.of)(false);
-				})).pipe((0, rxjs_operators.map)((states) => states.some(Boolean))) : (0, rxjs.of)(false),
-				candidate.ancestors.length ? (0, rxjs.combineLatest)(candidate.ancestors.map((ancestor) => {
-					var _ancestor$disabled$;
-					return ((_ancestor$disabled$ = ancestor.disabled$) === null || _ancestor$disabled$ === void 0 ? void 0 : _ancestor$disabled$.pipe((0, rxjs_operators.startWith)(true))) ?? (0, rxjs.of)(false);
-				})).pipe((0, rxjs_operators.map)((states) => states.some(Boolean))) : (0, rxjs.of)(false),
+				ancestorHidden$,
+				ancestorDisabled$,
 				((_item$hidden$ = item.hidden$) === null || _item$hidden$ === void 0 ? void 0 : _item$hidden$.pipe((0, rxjs_operators.startWith)(true))) ?? (0, rxjs.of)(false),
 				((_item$disabled$ = item.disabled$) === null || _item$disabled$ === void 0 ? void 0 : _item$disabled$.pipe((0, rxjs_operators.startWith)(true))) ?? (0, rxjs.of)(false),
 				((_item$value$ = item.value$) === null || _item$value$ === void 0 ? void 0 : _item$value$.pipe((0, rxjs_operators.startWith)(void 0))) ?? (0, rxjs.of)(void 0),
@@ -1921,7 +1913,8 @@ function FeatureSearch() {
 		localeService,
 		menuManagerService,
 		ribbonService
-	]), []);
+	]);
+	const items = (0, _wendellhu_redi_react_bindings.useObservable)(items$, []);
 	async function execute(item) {
 		layoutService.focus();
 		if (await commandService.executeCommand(item.commandId, item.getParams())) dialogService.close(FEATURE_SEARCH_DIALOG_ID);
@@ -1980,6 +1973,260 @@ const OpenFeatureSearchOperation = {
 	}
 };
 
+//#endregion
+//#region src/services/format-painter/format-painter-canvas.ts
+const FORMAT_PAINTER_CURSOR_CSS = `
+/* Keep the brush visible while the render engine updates its usual object/text cursors. */
+canvas[data-format-painter="available"] {
+    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M2 1v18l4-4 3 7 3-2-3-6h6z' fill='white' stroke='black'/%3E%3Cpath d='m17 13 8-10 2 2-8 10z' fill='white' stroke='black'/%3E%3Cpath d='M17 14c-4 0-2 5-6 6 5 2 10-1 8-5z' fill='black' stroke='white'/%3E%3C/svg%3E") 2 1, crosshair !important;
+}
+canvas[data-format-painter="unavailable"] {
+    cursor: not-allowed !important;
+}
+`;
+function bindFormatPainterCanvas(canvas, session, options) {
+	let pressed = false;
+	let applyTask;
+	const active = () => {
+		var _options$getUnitId;
+		return session.isActive(options.adapterId) && session.unitId === (((_options$getUnitId = options.getUnitId) === null || _options$getUnitId === void 0 ? void 0 : _options$getUnitId.call(options)) ?? options.unitId);
+	};
+	const updateCursor = (event) => {
+		if (active()) canvas.dataset.formatPainter = event && !options.getTarget(event) ? "unavailable" : "available";
+	};
+	const subscription = session.state$.subscribe(() => {
+		if (active()) updateCursor();
+		else if (session.mode === "off") {
+			delete canvas.dataset.formatPainter;
+			pressed = false;
+			clearTimeout(applyTask);
+		}
+	});
+	const down = (event) => {
+		if (!active() || event.button !== 0) return;
+		pressed = !!options.getTarget(event);
+		if (options.intercept || !pressed) {
+			canvas.focus();
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}
+	};
+	const up = (event) => {
+		if (!active() || !pressed || event.button !== 0) return;
+		pressed = false;
+		if (options.intercept) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}
+		clearTimeout(applyTask);
+		applyTask = setTimeout(() => {
+			const target = active() ? options.getTarget(event) : null;
+			if (target) session.apply(options.adapterId, target).catch((error) => console.error("[FormatPainter]", error));
+		}, 0);
+	};
+	const cancel = () => {
+		pressed = false;
+	};
+	const doubleClick = (event) => {
+		if (active() && options.intercept) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}
+	};
+	canvas.addEventListener("pointerdown", down, true);
+	canvas.addEventListener("pointerup", up, true);
+	canvas.addEventListener("pointermove", updateCursor, true);
+	canvas.addEventListener("pointercancel", cancel, true);
+	canvas.addEventListener("pointerleave", cancel, true);
+	canvas.addEventListener("dblclick", doubleClick, true);
+	return { dispose: () => {
+		clearTimeout(applyTask);
+		subscription.unsubscribe();
+		canvas.removeEventListener("pointerdown", down, true);
+		canvas.removeEventListener("pointerup", up, true);
+		canvas.removeEventListener("pointermove", updateCursor, true);
+		canvas.removeEventListener("pointercancel", cancel, true);
+		canvas.removeEventListener("pointerleave", cancel, true);
+		canvas.removeEventListener("dblclick", doubleClick, true);
+		delete canvas.dataset.formatPainter;
+	} };
+}
+
+//#endregion
+//#region src/services/format-painter/format-painter-session.service.ts
+/** One local interaction session; domain commands retain ownership of persisted formatting. */
+var FormatPainterSessionService = class extends _univerjs_core.Disposable {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_adapters", []);
+		_defineProperty(this, "_state$", new rxjs.BehaviorSubject("off"));
+		_defineProperty(this, "state$", this._state$.asObservable());
+		_defineProperty(this, "_session", null);
+		_defineProperty(this, "_applying", false);
+	}
+	get mode() {
+		return this._state$.value;
+	}
+	get unitId() {
+		var _this$_session;
+		return (_this$_session = this._session) === null || _this$_session === void 0 ? void 0 : _this$_session.source.unitId;
+	}
+	register(adapter) {
+		this._adapters.push(adapter);
+		this._adapters.sort((a, b) => b.priority - a.priority);
+		const subscription = adapter.changes$.subscribe(() => this.refresh());
+		this.refresh();
+		return this.disposeWithMe(() => {
+			subscription.unsubscribe();
+			const index = this._adapters.indexOf(adapter);
+			if (index >= 0) this._adapters.splice(index, 1);
+			if (this.isActive(adapter.id)) this.cancel();
+			this.refresh();
+		});
+	}
+	refresh() {
+		this._state$.next(this.mode);
+	}
+	canStart() {
+		var _this$_adapters$find;
+		return ((_this$_adapters$find = this._adapters.find((adapter) => adapter.isActive())) === null || _this$_adapters$find === void 0 ? void 0 : _this$_adapters$find.canStart()) ?? false;
+	}
+	isActive(adapterId) {
+		var _this$_session2;
+		return ((_this$_session2 = this._session) === null || _this$_session2 === void 0 ? void 0 : _this$_session2.adapterId) === adapterId;
+	}
+	canClear() {
+		const adapter = this._adapters.find((candidate) => candidate.isActive());
+		return !!(adapter === null || adapter === void 0 ? void 0 : adapter.clear) && adapter.canStart();
+	}
+	async clearFormatting() {
+		const adapter = this._adapters.find((candidate) => candidate.isActive());
+		if (!(adapter === null || adapter === void 0 ? void 0 : adapter.clear) || !adapter.canStart() || this._applying) return false;
+		this.cancel();
+		this._applying = true;
+		try {
+			return await adapter.clear();
+		} finally {
+			this._applying = false;
+			this.refresh();
+		}
+	}
+	activate(continuous = false) {
+		if (this._session) {
+			if (continuous) this._setMode("continuous");
+			else this.cancel();
+			return true;
+		}
+		const adapter = this._adapters.find((candidate) => candidate.isActive());
+		if (!(adapter === null || adapter === void 0 ? void 0 : adapter.canStart())) return false;
+		const source = adapter.capture();
+		if (!source) return false;
+		this._session = {
+			adapterId: adapter.id,
+			source
+		};
+		this._setMode(continuous ? "continuous" : "once");
+		return true;
+	}
+	async apply(adapterId, target) {
+		const session = this._session;
+		if (!session || session.adapterId !== adapterId || target.unitId !== session.source.unitId || this._applying) return false;
+		this._applying = true;
+		try {
+			const applied = await session.source.apply(target);
+			if (applied && this._session === session && this.mode === "once") this.cancel();
+			return applied;
+		} finally {
+			this._applying = false;
+		}
+	}
+	cancel() {
+		var _session$source, _session$source$onMod;
+		const session = this._session;
+		this._session = null;
+		session === null || session === void 0 || (_session$source$onMod = (_session$source = session.source).onModeChange) === null || _session$source$onMod === void 0 || _session$source$onMod.call(_session$source, "off");
+		this._state$.next("off");
+	}
+	_setMode(mode) {
+		var _this$_session3, _this$_session3$sourc, _this$_session3$sourc2;
+		(_this$_session3 = this._session) === null || _this$_session3 === void 0 || (_this$_session3$sourc2 = (_this$_session3$sourc = _this$_session3.source).onModeChange) === null || _this$_session3$sourc2 === void 0 || _this$_session3$sourc2.call(_this$_session3$sourc, mode);
+		this._state$.next(mode);
+	}
+	dispose() {
+		this.cancel();
+		this._adapters.length = 0;
+		this._state$.complete();
+		super.dispose();
+	}
+};
+
+//#endregion
+//#region src/controllers/format-painter.controller.ts
+const ActivateFormatPainterOperation = {
+	id: "ui.operation.activate-format-painter",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => accessor.get(FormatPainterSessionService).activate()
+};
+const ContinuousFormatPainterOperation = {
+	id: "ui.operation.continuous-format-painter",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => accessor.get(FormatPainterSessionService).activate(true)
+};
+const ClearFormattingCommand = {
+	id: "ui.command.clear-formatting",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor) => accessor.get(FormatPainterSessionService).clearFormatting()
+};
+const CancelFormatPainterOperation = {
+	id: "ui.operation.cancel-format-painter",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		accessor.get(FormatPainterSessionService).cancel();
+		return true;
+	}
+};
+let FormatPainterController = class FormatPainterController extends _univerjs_core.Disposable {
+	constructor(session, commandService, shortcutService, instanceService) {
+		super();
+		const cursorStyle = document.createElement("style");
+		cursorStyle.textContent = FORMAT_PAINTER_CURSOR_CSS;
+		document.head.appendChild(cursorStyle);
+		this.disposeWithMe({ dispose: () => cursorStyle.remove() });
+		for (const command of [
+			ActivateFormatPainterOperation,
+			ContinuousFormatPainterOperation,
+			CancelFormatPainterOperation,
+			ClearFormattingCommand
+		]) this.disposeWithMe(commandService.registerCommand(command));
+		this.disposeWithMe(shortcutService.registerShortcut({
+			id: CancelFormatPainterOperation.id,
+			binding: 27,
+			priority: 1e3,
+			preconditions: () => session.mode !== "off"
+		}));
+		this.disposeWithMe(fromGlobalEvent("keydown", (event) => {
+			if (event.key === "Escape" && session.mode !== "off" && event.target instanceof HTMLElement && event.target.closest(`[data-u-command="${ActivateFormatPainterOperation.id}"]`)) {
+				commandService.syncExecuteCommand(CancelFormatPainterOperation.id);
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		}, { capture: true }));
+		this.disposeWithMe(instanceService.unitDisposed$.subscribe((unit) => {
+			if (unit.getUnitId() === session.unitId) session.cancel();
+		}));
+		this.disposeWithMe(instanceService.focused$.subscribe((unitId) => {
+			if (unitId && session.unitId && unitId !== session.unitId) session.cancel();
+			session.refresh();
+		}));
+	}
+};
+FormatPainterController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(FormatPainterSessionService)),
+	__decorateParam(1, _univerjs_core.ICommandService),
+	__decorateParam(2, IShortcutService),
+	__decorateParam(3, _univerjs_core.IUniverInstanceService)
+], FormatPainterController);
+
 //#endregion
 //#region src/menu/feature-search.menu.ts
 function FeatureSearchMenuItemFactory() {
@@ -1992,6 +2239,33 @@ function FeatureSearchMenuItemFactory() {
 	};
 }
 
+//#endregion
+//#region src/menu/format-painter.menu.ts
+function FormatPainterMenuItemFactory(accessor) {
+	const session = accessor.get(FormatPainterSessionService);
+	return {
+		id: ActivateFormatPainterOperation.id,
+		subId: ContinuousFormatPainterOperation.id,
+		type: 0,
+		icon: "BrushIcon",
+		title: "ui.formatPainter",
+		tooltip: "ui.formatPainter",
+		activated$: session.state$.pipe((0, rxjs.map)((mode) => mode !== "off")),
+		disabled$: session.state$.pipe((0, rxjs.map)((mode) => mode === "off" && !session.canStart()))
+	};
+}
+function ClearFormattingMenuItemFactory(accessor) {
+	const session = accessor.get(FormatPainterSessionService);
+	return {
+		id: ClearFormattingCommand.id,
+		type: 0,
+		icon: "ClearFormatDoubleIcon",
+		title: "ui.clearFormatting",
+		tooltip: "ui.clearFormatting",
+		disabled$: session.state$.pipe((0, rxjs.map)(() => !session.canClear()))
+	};
+}
+
 //#endregion
 //#region src/menu/history.menu.ts
 const undoRedoDisableFactory$ = (accessor, isUndo) => {
@@ -2041,6 +2315,24 @@ function ShortcutPanelMenuItemFactory() {
 //#region src/menu/schema.ts
 const menuSchema = {
 	["ribbon.start.history"]: {
+		[ActivateFormatPainterOperation.id]: {
+			order: 2,
+			gridLayout: {
+				row: 1,
+				column: 2,
+				showLabel: false
+			},
+			menuItemFactory: FormatPainterMenuItemFactory
+		},
+		[ClearFormattingCommand.id]: {
+			order: 3,
+			gridLayout: {
+				row: 2,
+				column: 2,
+				showLabel: false
+			},
+			menuItemFactory: ClearFormattingMenuItemFactory
+		},
 		[_univerjs_core.UndoCommand.id]: {
 			order: 0,
 			gridLayout: {
@@ -2637,7 +2929,7 @@ function RectPopup(props) {
 			const containerBottom = Math.min((boundaryRect === null || boundaryRect === void 0 ? void 0 : boundaryRect.bottom) ?? window.innerHeight, window.innerHeight);
 			const containerWidth = Math.max(containerRight - containerLeft, 0);
 			const containerHeight = Math.max(containerBottom - containerTop, 0);
-			const minimumGap = noPushMinimumGap ? 0 : PUSHING_MINIMUM_GAP * 2;
+			const minimumGap = noPushMinimumGap ? 0 : 16;
 			const cannotFitBoundary = boundaryElement != null && (containerWidth <= 0 || containerHeight <= 0 || containerWidth < clientWidth + minimumGap || containerHeight < clientHeight + minimumGap);
 			nodeRef.current.style.visibility = cannotFitBoundary ? "hidden" : "";
 			if (cannotFitBoundary) return;
@@ -2713,7 +3005,8 @@ function RectPopup(props) {
 			window.removeEventListener("contextmenu", handleContextMenu);
 		};
 	}, [contextMenuFn]);
-	const dir = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService).direction$);
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const dir = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$);
 	const ele = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [mask && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-u-comp": "rect-popup-mask",
 		className: "univer-fixed univer-inset-0 univer-z-[100]",
@@ -2766,10 +3059,11 @@ const SingleCanvasPopup = ({ popup, children }) => {
 		var _popup$hiddenRects$;
 		return ((_popup$hiddenRects$ = popup.hiddenRects$) === null || _popup$hiddenRects$ === void 0 ? void 0 : _popup$hiddenRects$.pipe((0, rxjs.throttleTime)(0, rxjs.animationFrameScheduler))) ?? (0, rxjs.of)([]);
 	}, [popup.hiddenRects$]);
-	const excludeRectsRef = useObservableRef((0, react.useMemo)(() => {
+	const excludeRects$ = (0, react.useMemo)(() => {
 		var _popup$excludeRects$;
 		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);
+	}, [popup.excludeRects$]);
+	const excludeRectsRef = useObservableRef(excludeRects$, popup.excludeRects);
 	const { boundaryInsets, canvasElement, constrainToCanvas = false, hideOnInvisible = true, hiddenType = "destroy" } = popup;
 	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();
@@ -2818,16 +3112,20 @@ const SingleCanvasPopup = ({ popup, children }) => {
 };
 function CanvasPopup() {
 	const popupService = (0, _wendellhu_redi_react_bindings.useDependency)(ICanvasPopupService);
-	const componentManager = (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager);
-	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: PopupComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopupComponent, { popup })
-		}, key);
-	});
+	return (0, _wendellhu_redi_react_bindings.useObservable)(popupService.popups$, void 0, true).map(([key, popup]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleCanvasPopup, {
+		popup,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CanvasPopupContent, { popup })
+	}, key));
+}
+function CanvasPopupContent({ popup }) {
+	const Component = (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager).get(popup.componentKey);
+	const connectorContext = (0, react.useMemo)(() => ({ injector: popup.connectorInjector ?? null }), [popup.connectorInjector]);
+	if (!Component) return null;
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { popup });
+	return popup.connectorInjector ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wendellhu_redi_react_bindings.RediContext.Provider, {
+		value: connectorContext,
+		children: content
+	}) : content;
 }
 
 //#endregion
@@ -2879,13 +3177,15 @@ function ComponentContainer(props) {
 function useComponentsOfPart(part, injector) {
 	const injectedUIPartsService = (0, _wendellhu_redi_react_bindings.useDependency)(IUIPartsService);
 	const uiPartsService = (injector === null || injector === void 0 ? void 0 : injector.get(IUIPartsService)) ?? 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 uiVisibleChange$ = (0, react.useMemo)(() => uiPartsService.uiVisibleChange$.pipe((0, rxjs.filter)((ui) => ui.ui === part)), [part, uiPartsService]);
+	const changeInfo = (0, _wendellhu_redi_react_bindings.useObservable)(uiVisibleChange$);
 	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, [
+	const componentPartUpdateCount = (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, [
 		uiPartsService,
 		part,
 		changeInfo
-	])]);
+	]);
+	return (0, react.useMemo)(() => uiPartsService.isUIVisible(part) ? uiPartsService.getComponents(part) : /* @__PURE__ */ new Set(), [componentPartUpdateCount]);
 }
 
 //#endregion
@@ -2991,7 +3291,7 @@ function RibbonGridMenu({ ribbon, activatedTab, onSelectTab }) {
 				"aria-selected": isActive,
 				title,
 				onClick: () => onSelectTab(group),
-				className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-h-9 univer-cursor-pointer univer-items-center univer-whitespace-nowrap univer-border-0 univer-border-b-[3px] univer-bg-transparent univer-px-3 univer-text-base univer-font-semibold univer-text-gray-700 univer-transition-colors hover:univer-text-gray-900 focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 dark:!univer-text-gray-200 dark:hover:!univer-text-gray-0", isActive ? "univer-border-primary-600 univer-text-primary-700 dark:!univer-text-primary-300" : "univer-border-transparent"),
+				className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-h-8 univer-cursor-pointer univer-items-center univer-whitespace-nowrap univer-border-0 univer-border-b-[3px] univer-bg-transparent univer-px-3 univer-text-sm univer-font-semibold univer-text-gray-700 univer-transition-colors hover:univer-text-gray-900 focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 dark:!univer-text-gray-200 dark:hover:!univer-text-gray-0", isActive ? "univer-border-primary-600 univer-text-primary-700 dark:!univer-text-primary-300" : "univer-border-transparent"),
 				children: title
 			}, group.key);
 		})
@@ -3093,7 +3393,8 @@ function CustomLabel(props) {
 	const componentManager = (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager);
 	const iconManager = (0, _wendellhu_redi_react_bindings.useDependency)(IconManager);
 	const subscribedValue = (0, _wendellhu_redi_react_bindings.useObservable)(value$ ?? null, value);
-	const subscribedIcon = (0, _wendellhu_redi_react_bindings.useObservable)((0, rxjs.isObservable)(icon) ? icon : null, "");
+	const observableIcon = (0, rxjs.isObservable)(icon) ? icon : null;
+	const subscribedIcon = (0, _wendellhu_redi_react_bindings.useObservable)(observableIcon, "");
 	const realIcon = (0, rxjs.isObservable)(icon) ? subscribedIcon : icon ?? "";
 	const nodes = [];
 	let index = 0;
@@ -3161,9 +3462,10 @@ function useToolbarItemStatus(menuItem) {
 	const disabled = (0, _wendellhu_redi_react_bindings.useObservable)(disabled$ ?? null, false);
 	const activated = (0, _wendellhu_redi_react_bindings.useObservable)(activated$ ?? null, false);
 	const hidden = (0, _wendellhu_redi_react_bindings.useObservable)(hidden$ ?? null, false);
+	const valueObservable = (0, react.useMemo)(() => (0, rxjs.merge)(value$ ?? rxjs.EMPTY, selectionsValue$ ?? rxjs.EMPTY), [selectionsValue$, value$]);
 	return {
 		disabled,
-		value: (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => (0, rxjs.merge)(value$ ?? rxjs.EMPTY, selectionsValue$ ?? rxjs.EMPTY), [selectionsValue$, value$])),
+		value: (0, _wendellhu_redi_react_bindings.useObservable)(valueObservable),
 		activated,
 		hidden,
 		selectionsValue: (0, _wendellhu_redi_react_bindings.useObservable)(selectionsValue$ ?? null)
@@ -3172,11 +3474,12 @@ function useToolbarItemStatus(menuItem) {
 function useToolbarShortcutDisplay({ id, commandId, shortcut }) {
 	const shortcutService = (0, _wendellhu_redi_react_bindings.useDependency)(IShortcutService);
 	const shortcutCommandId = commandId ?? id;
-	return (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => shortcut ? (0, rxjs.of)(shortcut) : shortcutService.shortcutChanged$.pipe((0, rxjs.map)(() => shortcutService.getShortcutDisplayOfCommand(shortcutCommandId)), (0, rxjs.startWith)(shortcutService.getShortcutDisplayOfCommand(shortcutCommandId))), [
+	const shortcut$ = (0, react.useMemo)(() => shortcut ? (0, rxjs.of)(shortcut) : shortcutService.shortcutChanged$.pipe((0, rxjs.map)(() => shortcutService.getShortcutDisplayOfCommand(shortcutCommandId)), (0, rxjs.startWith)(shortcutService.getShortcutDisplayOfCommand(shortcutCommandId))), [
 		shortcut,
 		shortcutService,
 		shortcutCommandId
-	]), null, true);
+	]);
+	return (0, _wendellhu_redi_react_bindings.useObservable)(shortcut$, null, true);
 }
 
 //#endregion
@@ -3203,6 +3506,7 @@ univer-text-gray-900 univer-outline-none univer-transition-colors univer-animate
 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-700 dark:disabled:!univer-text-gray-600
 disabled:univer-cursor-not-allowed disabled:univer-text-gray-300 disabled:hover:univer-bg-transparent
 hover:univer-bg-gray-100 whitespace-nowrap univer-w-max
+[&_svg]:univer-shrink-0
 `;
 const toolbarButtonVariants = (0, _univerjs_design.cva)(toolbarButtonClassName, {
 	variants: {
@@ -3241,11 +3545,11 @@ function ToolbarButton(props) {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
-		className: toolbarButtonVariants({
+		className: (0, _univerjs_design.clsx)(toolbarButtonVariants({
 			noIcon,
 			active,
 			className
-		}),
+		})),
 		style,
 		disabled,
 		onClick: handleClick,
@@ -3454,7 +3758,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
 	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 hiddenStates$ = (0, react.useMemo)(() => {
 		const itemStates = menuItems.map((item) => {
 			var _item$item;
 			return (item.children ? (0, rxjs.combineLatest)(item.children.map((subItem) => {
@@ -3466,7 +3770,8 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 			...states,
 			[key]: hidden
 		}), {}), (0, rxjs.startWith)({})) : (0, rxjs.of)({});
-	}, [menuItems]), {});
+	}, [menuItems]);
+	const hiddenStates = (0, _wendellhu_redi_react_bindings.useObservable)(hiddenStates$, {});
 	const filteredMenuItems = (0, react.useMemo)(() => {
 		return menuItems.filter((item) => {
 			var _item$key;
@@ -3768,13 +4073,14 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 	let tooltipTitle = tooltip ? localeService.t(tooltip) : "";
 	if (shortcutDisplay) tooltipTitle += ` (${shortcutDisplay})`;
 	const { selections } = props;
-	const options = (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
+	const selections$ = (0, react.useMemo)(() => {
 		if ((0, rxjs.isObservable)(selections)) return selections;
 		else return new rxjs.Observable((subscribe) => {
 			subscribe.next(selections);
 		});
-	}, [selections]));
-	const iconToDisplay = (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
+	}, [selections]);
+	const options = (0, _wendellhu_redi_react_bindings.useObservable)(selections$);
+	const icon$ = (0, react.useMemo)(() => {
 		if ((0, rxjs.isObservable)(icon)) return icon;
 		else return new rxjs.Observable((subscribe) => {
 			var _options$find;
@@ -3785,7 +4091,8 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 		icon,
 		options,
 		value
-	]), void 0, true);
+	]);
+	const iconToDisplay = (0, _wendellhu_redi_react_bindings.useObservable)(icon$, void 0, true);
 	function renderSelectorType(menuType) {
 		const selectionsCommandId = props.selectionsCommandId;
 		const bId = commandId ?? id;
@@ -3815,6 +4122,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 		if (menuType === 2) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-u-command": id,
 			"data-disabled": disabled,
+			"aria-disabled": disabled,
 			className: (0, _univerjs_design.clsx)(toolbarButtonSelectorRootVariants({ disabled }), {
 				"univer-box-border univer-h-full univer-min-w-14 univer-flex-col !univer-pr-0": grid && large,
 				"univer-box-border univer-h-full": grid && !large
@@ -3824,7 +4132,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 					active: activated,
 					disabled
 				}), {
-					"univer-h-full univer-w-full univer-flex-col univer-justify-center univer-rounded univer-px-1 univer-pb-4 [&>svg]:univer-size-8": grid && large,
+					"univer-h-full univer-w-full univer-flex-col univer-justify-center univer-rounded univer-px-1 univer-pb-4 [&>svg]:univer-size-6": grid && large,
 					"[&>svg]:univer-size-4": grid && !large
 				}),
 				onClick: handleClick,
@@ -3880,7 +4188,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 					disabled,
 					active: activated
 				}), {
-					"univer-box-border univer-h-full univer-min-w-14 univer-flex-col univer-justify-center univer-gap-1 univer-px-1.5 univer-py-1 univer-text-xs [&>svg]:univer-size-8": grid && large,
+					"univer-box-border univer-h-full univer-min-w-14 univer-flex-col univer-justify-center univer-gap-1 univer-px-1.5 univer-py-1 univer-text-xs [&>svg]:univer-size-6": grid && large,
 					"univer-box-border univer-h-full": grid && !large,
 					"univer-bg-gray-0 dark:!univer-bg-gray-800": grid && !large && !icon,
 					"[&>svg]:univer-size-4": grid && !large
@@ -3915,7 +4223,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 	function renderButtonType() {
 		const isCustomComponent = componentManager.get(typeof label === "string" ? label : (label === null || label === void 0 ? void 0 : label.name) ?? "");
 		const buttonAriaLabel = tooltip ? localeService.t(tooltip) : typeof title === "string" ? localeService.t(title) : void 0;
-		const buttonClassName = (0, _univerjs_design.clsx)(grid && !large && "univer-h-full univer-min-w-8 [&>svg]:univer-size-4", grid && large ? "univer-h-full univer-min-w-14 univer-flex-col univer-gap-1 univer-px-1.5 univer-py-1 univer-text-xs [&>svg]:univer-size-8" : showLabel ? "univer-gap-1 univer-px-1.5 univer-text-sm" : "univer-text-sm", grid && fullWidth && isCustomComponent && "!univer-px-0");
+		const buttonClassName = (0, _univerjs_design.clsx)(grid && !large && "[&>svg]:univer-size-4", grid && large ? "univer-h-full univer-min-w-14 univer-flex-col univer-gap-1 univer-px-1.5 univer-py-1 univer-text-xs [&>svg]:univer-size-6" : showLabel ? "univer-gap-1 univer-px-1.5 univer-text-sm" : "univer-text-sm", grid && fullWidth && isCustomComponent && "!univer-px-0");
 		const buttonStyle = grid && large ? {
 			textAlign: "center",
 			whiteSpace: "normal"
@@ -3924,11 +4232,11 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 			const hoverable = typeof label === "string" || (label === null || label === void 0 ? void 0 : label.hoverable) !== false;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"data-u-command": id,
-				className: toolbarButtonVariants({
+				className: (0, _univerjs_design.clsx)(toolbarButtonVariants({
 					noIcon: !icon,
 					active: activated,
 					className: (0, _univerjs_design.clsx)(buttonClassName, !hoverable && "univer-cursor-default !univer-bg-transparent hover:!univer-bg-transparent dark:hover:!univer-bg-transparent")
-				}),
+				})),
 				style: buttonStyle,
 				"aria-disabled": disabled,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
@@ -3946,8 +4254,10 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 			style: buttonStyle,
 			noIcon: !icon,
 			active: activated,
+			"aria-pressed": props.activated$ ? activated : void 0,
 			disabled,
-			onClick: () => {
+			onClick: (event) => {
+				if (props.subId && event.detail > 1) return;
 				const commandParams = typeof params === "function" ? params() : params;
 				executeCommand(props.commandId ?? props.id, commandParams ?? (typeof value === "undefined" ? void 0 : { value }));
 			},
@@ -3986,17 +4296,18 @@ function RibbonGrid({ groups, title, className, ...props }) {
 		...props,
 		"data-testid": "ribbon-grid-toolbar",
 		"data-u-comp": "ribbon-grid-toolbar",
-		className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-h-[88px] univer-overflow-x-auto univer-overflow-y-hidden univer-bg-gray-50 univer-px-2 univer-text-sm dark:!univer-bg-gray-900", _univerjs_design.borderBottomClassName, _univerjs_design.scrollbarClassName, className),
+		className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-overflow-x-auto univer-overflow-y-hidden univer-bg-gray-50 univer-px-2 univer-text-sm dark:!univer-bg-gray-900", _univerjs_design.borderBottomClassName, _univerjs_design.scrollbarClassName, className),
 		role: "toolbar",
 		"aria-label": localeService.t(title),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDropdownProvider, { children: groups.map((group) => {
+			const placements = placeRibbonGridItems(group.children ?? []);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				"data-u-comp": "ribbon-grid-group",
 				className: "univer-relative univer-box-border univer-flex univer-min-w-16 univer-shrink-0 univer-flex-col univer-px-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"data-testid": "ribbon-grid-group-grid",
-					className: "univer-grid univer-min-h-0 univer-flex-1 univer-grid-flow-col univer-grid-rows-2 univer-content-center univer-gap-x-1 univer-gap-y-2 univer-py-2 [&>div>span>span]:univer-h-full",
-					children: placeRibbonGridItems(group.children ?? []).map((placement) => placement.item.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-grid univer-min-h-0 univer-flex-1 univer-grid-flow-col univer-grid-rows-[repeat(2,1.5rem)] univer-content-center univer-gap-2 univer-py-2 [&>div>span>span]:univer-h-full",
+					children: placements.map((placement) => placement.item.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: (0, _univerjs_design.clsx)("univer-flex univer-items-stretch [&>span>button]:univer-h-full [&>span]:univer-h-full", placement.width && "[&>span>span]:univer-w-full [&>span]:univer-w-full [&_[data-u-command]]:univer-w-full"),
 						style: {
 							gridRow: `${placement.row} / span ${placement.rowSpan}`,
@@ -4172,108 +4483,110 @@ function Ribbon(props) {
 		"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" || ribbonType === "grid" || 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
-					}),
-					!toolbarOnly && ribbonType === "grid" && ribbon.length >= 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RibbonGridMenu, {
-						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 && ribbonType === "grid" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RibbonGrid, {
-				...embedRibbonOverrideAttributes,
-				groups: activeGroup.allGroups,
-				title: activatedTabTitle
+	const content = /* @__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-8": !toolbarOnly && ribbonType === "grid",
+				"univer-h-9": !toolbarOnly && ribbonType !== "grid" && (ribbonType === "classic" || headerMenuComponents && headerMenuComponents.size > 0)
 			}),
-			!hideToolbar && ribbonType !== "grid" && /* @__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, {
+			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
-				}), /* @__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,
-								preserveStrokeWidth: true
-							}, 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,
-												preserveStrokeWidth: true
-											}, child.key)) : groupItem.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, {
-												...groupItem.item,
-												preserveStrokeWidth: true
-											}, 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, { preserveStrokeWidth: true })
+				}),
+				!toolbarOnly && ribbonType === "grid" && ribbon.length >= 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RibbonGridMenu, {
+					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 && ribbonType === "grid" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RibbonGrid, {
+			...embedRibbonOverrideAttributes,
+			groups: activeGroup.allGroups,
+			title: activatedTabTitle
+		}),
+		!hideToolbar && ribbonType !== "grid" && /* @__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,
+							preserveStrokeWidth: true
+						}, 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,
+											preserveStrokeWidth: true
+										}, child.key)) : groupItem.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, {
+											...groupItem.item,
+											preserveStrokeWidth: true
+										}, 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, { preserveStrokeWidth: true })
 						})
-					})] }, effectiveActivatedTab)
-				})]
-			}),
-			ribbonType !== "grid" && fakeToolbar
-		] })
+					})
+				})] }, effectiveActivatedTab)
+			})]
+		}),
+		ribbonType !== "grid" && fakeToolbar
+	] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RibbonOverrideRuntimeProvider, {
+		override: ribbonOverride,
+		children: content
 	});
 }
 function RibbonOverrideRuntimeProvider(props) {
@@ -4720,35 +5033,36 @@ function UITinyMenuGroup(props) {
 		item.children
 	]);
 	if (!item.children) return null;
+	const items = visibleChildren.map((child) => {
+		var _child$item4, _child$item12, _child$item13, _child$item14, _child$item15;
+		const Icon = ((_child$item4 = child.item) === null || _child$item4 === void 0 ? void 0 : _child$item4.icon) ? iconManager.get(child.item.icon) : void 0;
+		if (!Icon) return null;
+		return {
+			key: child.key,
+			onClick: () => {
+				var _child$item5, _child$item6, _child$item7, _child$item8, _child$item9, _child$item10, _child$item11;
+				onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
+					label: ((_child$item5 = child.item) === null || _child$item5 === void 0 ? void 0 : _child$item5.id) ?? child.key,
+					commandId: (_child$item6 = child.item) === null || _child$item6 === void 0 ? void 0 : _child$item6.commandId,
+					id: (_child$item7 = child.item) === null || _child$item7 === void 0 ? void 0 : _child$item7.id,
+					params: (_child$item8 = child.item) === null || _child$item8 === void 0 ? void 0 : _child$item8.params,
+					value: (_child$item9 = child.item) === null || _child$item9 === void 0 ? void 0 : _child$item9.value,
+					tooltip: ((_child$item10 = child.item) === null || _child$item10 === void 0 ? void 0 : _child$item10.tooltip) && localeService.t((_child$item11 = child.item) === null || _child$item11 === void 0 ? void 0 : _child$item11.tooltip)
+				});
+			},
+			className: "",
+			iconClassName: ((_child$item12 = child.item) === null || _child$item12 === void 0 ? void 0 : _child$item12.icon) === "TextTypeIcon" ? sizeVariant === "paragraph-t" ? "!univer-size-4" : "!univer-size-3.5" : void 0,
+			Icon,
+			active: resolveMenuItemActiveState((_child$item13 = child.item) === null || _child$item13 === void 0 ? void 0 : _child$item13.id, activeItems.includes(((_child$item14 = child.item) === null || _child$item14 === void 0 ? void 0 : _child$item14.id) ?? ""), activeItemIds),
+			tooltip: ((_child$item15 = child.item) === null || _child$item15 === void 0 ? void 0 : _child$item15.tooltip) ? localeService.t(child.item.tooltip) : void 0
+		};
+	}).filter((child) => child != null);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignTinyMenuGroup, {
 		columns,
 		sizeVariant,
 		layoutVariant,
 		hoverSuppressed,
-		items: visibleChildren.map((child) => {
-			var _child$item4, _child$item12, _child$item13, _child$item14, _child$item15;
-			const Icon = ((_child$item4 = child.item) === null || _child$item4 === void 0 ? void 0 : _child$item4.icon) ? iconManager.get(child.item.icon) : void 0;
-			if (!Icon) return null;
-			return {
-				key: child.key,
-				onClick: () => {
-					var _child$item5, _child$item6, _child$item7, _child$item8, _child$item9, _child$item10, _child$item11;
-					onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
-						label: ((_child$item5 = child.item) === null || _child$item5 === void 0 ? void 0 : _child$item5.id) ?? child.key,
-						commandId: (_child$item6 = child.item) === null || _child$item6 === void 0 ? void 0 : _child$item6.commandId,
-						id: (_child$item7 = child.item) === null || _child$item7 === void 0 ? void 0 : _child$item7.id,
-						params: (_child$item8 = child.item) === null || _child$item8 === void 0 ? void 0 : _child$item8.params,
-						value: (_child$item9 = child.item) === null || _child$item9 === void 0 ? void 0 : _child$item9.value,
-						tooltip: ((_child$item10 = child.item) === null || _child$item10 === void 0 ? void 0 : _child$item10.tooltip) && localeService.t((_child$item11 = child.item) === null || _child$item11 === void 0 ? void 0 : _child$item11.tooltip)
-					});
-				},
-				className: "",
-				iconClassName: ((_child$item12 = child.item) === null || _child$item12 === void 0 ? void 0 : _child$item12.icon) === "TextTypeIcon" ? sizeVariant === "paragraph-t" ? "!univer-size-4" : "!univer-size-3.5" : void 0,
-				Icon,
-				active: resolveMenuItemActiveState((_child$item13 = child.item) === null || _child$item13 === void 0 ? void 0 : _child$item13.id, activeItems.includes(((_child$item14 = child.item) === null || _child$item14 === void 0 ? void 0 : _child$item14.id) ?? ""), activeItemIds),
-				tooltip: ((_child$item15 = child.item) === null || _child$item15 === void 0 ? void 0 : _child$item15.tooltip) ? localeService.t(child.item.tooltip) : void 0
-			};
-		}).filter((child) => child != null)
+		items
 	});
 }
 function UIQuickTileMenuGroup(props) {
@@ -5107,13 +5421,15 @@ function ContextMenuPanel(props) {
 	const [menuElement, setMenuElement] = (0, react.useState)(null);
 	const [maxMenuHeight, setMaxMenuHeight] = (0, react.useState)(() => {
 		if (typeof window === "undefined") return 240;
-		return Math.max(120, window.innerHeight - menuViewportPadding * 2);
+		return Math.max(120, window.innerHeight - 16);
 	});
 	const [hoverSuppressed, setHoverSuppressed] = (0, react.useState)(suppressHoverUntilPointerMove);
+	const menuSchemaVersion$ = (0, react.useMemo)(() => menuManagerService.menuChanged$.pipe((0, rxjs.startWith)(void 0), (0, rxjs.scan)((version) => version + 1, 0)), [menuManagerService]);
+	const menuSchemaVersion = (0, _wendellhu_redi_react_bindings.useObservable)(menuSchemaVersion$, 0);
 	const menuItems = (0, react.useMemo)(() => menuType ? menuManagerService.getMenuByPositionKey(menuType) : [], [
 		menuManagerService,
 		menuType,
-		(0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => menuManagerService.menuChanged$.pipe((0, rxjs.startWith)(void 0), (0, rxjs.scan)((version) => version + 1, 0)), [menuManagerService]), 0),
+		menuSchemaVersion,
 		menuSessionVersion
 	]);
 	const submenuPortalContainer = ((_layoutService$rootCo = layoutService.rootContainerElement) === null || _layoutService$rootCo === void 0 || (_layoutService$rootCo = _layoutService$rootCo.ownerDocument) === null || _layoutService$rootCo === void 0 ? void 0 : _layoutService$rootCo.body) ?? (typeof document !== "undefined" ? document.body : null);
@@ -5187,7 +5503,7 @@ function ContextMenuPanel(props) {
 		const updateMaxHeight = () => {
 			if (frameId) defaultView.cancelAnimationFrame(frameId);
 			frameId = defaultView.requestAnimationFrame(() => {
-				setMaxMenuHeight(Math.max(120, defaultView.innerHeight - menuViewportPadding * 2));
+				setMaxMenuHeight(Math.max(120, defaultView.innerHeight - 16));
 			});
 		};
 		updateMaxHeight();
@@ -5729,7 +6045,7 @@ function ContextMenuMenuItem(props) {
 	});
 }
 function useContextGroupHiddenStates$1(menuSchemas) {
-	return (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
+	const hiddenStates$ = (0, react.useMemo)(() => {
 		const groupStates = menuSchemas.flatMap((menuSchema) => {
 			var _menuSchema$children3;
 			const hiddenObservables = ((_menuSchema$children3 = menuSchema.children) === null || _menuSchema$children3 === void 0 ? void 0 : _menuSchema$children3.map((childSchema) => {
@@ -5742,7 +6058,8 @@ function useContextGroupHiddenStates$1(menuSchemas) {
 			...states,
 			[key]: hidden
 		}), {}), (0, rxjs.startWith)({})) : (0, rxjs.of)({});
-	}, [menuSchemas]), {});
+	}, [menuSchemas]);
+	return (0, _wendellhu_redi_react_bindings.useObservable)(hiddenStates$, {});
 }
 
 //#endregion
@@ -6404,7 +6721,8 @@ function DesktopWorkbench(props) {
 	});
 }
 function mountDesktopWorkbench(injector, options, mountContainer, onRendered) {
-	(0, _univerjs_design.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)((0, _wendellhu_redi_react_bindings.connectInjector)(DesktopWorkbench, injector), {
+	const ConnectedApp = (0, _wendellhu_redi_react_bindings.connectInjector)(DesktopWorkbench, injector);
+	(0, _univerjs_design.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConnectedApp, {
 		...options,
 		mountContainer,
 		onRendered
@@ -6539,7 +6857,8 @@ function DesktopWorkbenchContent(props) {
 }
 function FloatingContainer() {
 	const { mountContainer } = (0, react.useContext)(_univerjs_design.ConfigContext);
-	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: useComponentsOfPart("floating") }, "floating"), mountContainer);
+	const floatingComponents = useComponentsOfPart("floating");
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: floatingComponents }, "floating"), mountContainer);
 }
 
 //#endregion
@@ -6687,7 +7006,7 @@ const IUIController = (0, _univerjs_core.createIdentifier)("univer.ui.ui-control
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.0.0-rc.0";
+var version = "1.0.0";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -6728,13 +7047,14 @@ const COLOR_PICKER_COMPONENT = "UI_COLOR_PICKER_COMPONENT";
 const CommonLabel = (props) => {
 	const { value, selections } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const viewValue = (0, react.useMemo)(() => {
+		var _selections$find;
+		if (value == null) return "";
+		return localeService.t(((_selections$find = selections.find((item) => item.value === value)) === null || _selections$find === void 0 ? void 0 : _selections$find.label) ?? "");
+	}, [value, selections]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-truncate univer-text-sm",
-		children: (0, react.useMemo)(() => {
-			var _selections$find;
-			if (value == null) return "";
-			return localeService.t(((_selections$find = selections.find((item) => item.value === value)) === null || _selections$find === void 0 ? void 0 : _selections$find.label) ?? "");
-		}, [value, selections])
+		children: viewValue
 	});
 };
 const COMMON_LABEL_COMPONENT = "UI_PLUGIN_COMMON_LABEL_COMPONENT";
@@ -22938,10 +23258,11 @@ let FontService = class FontService {
 		_defineProperty(this, "fonts$", new rxjs.BehaviorSubject([]));
 		const { customFontFamily } = this._configService.getConfig("ui.config") ?? {};
 		let fonts = [];
-		if (customFontFamily) if (Array.isArray(customFontFamily)) fonts = [...DEFAULT_FONT_LIST, ...customFontFamily];
-		else if (customFontFamily.override) fonts = [...customFontFamily.list];
-		else fonts = [...DEFAULT_FONT_LIST, ...customFontFamily.list];
-		else fonts = [...DEFAULT_FONT_LIST];
+		if (customFontFamily) {
+			if (Array.isArray(customFontFamily)) fonts = [...DEFAULT_FONT_LIST, ...customFontFamily];
+			else if (customFontFamily.override) fonts = [...customFontFamily.list];
+			else fonts = [...DEFAULT_FONT_LIST, ...customFontFamily.list];
+		} else fonts = [...DEFAULT_FONT_LIST];
 		this.fonts$.next(fonts);
 	}
 	dispose() {
@@ -23487,11 +23808,12 @@ function SymbolPicker(props) {
 	});
 }
 function SymbolSection(props) {
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		className: "univer-flex univer-flex-col univer-gap-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-gray-100",
-			children: (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService).t(props.category.titleKey)
+			children: localeService.t(props.category.titleKey)
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-grid univer-grid-cols-10 univer-gap-1",
 			children: props.category.symbols.map((symbol, index) => {
@@ -23608,7 +23930,8 @@ function MobileRibbon(props) {
 	const workbenchService = (0, _wendellhu_redi_react_bindings.useDependency)(IWorkbenchService);
 	const ribbon = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.ribbon$, []);
 	const activatedTab = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.activatedTab$, "ribbon.start");
-	if ((0, _wendellhu_redi_react_bindings.useObservable)(workbenchService.rootUnitType$, null, true) === _univerjs_core.UniverInstanceType.UNIVER_SHEET) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSheetTopBar, {
+	const rootUnitType = (0, _wendellhu_redi_react_bindings.useObservable)(workbenchService.rootUnitType$, null, true);
+	if (rootUnitType === _univerjs_core.UniverInstanceType.UNIVER_SHEET || rootUnitType === _univerjs_core.UniverInstanceType.UNIVER_DOC) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileCompactTopBar, {
 		ribbon,
 		headerMenu,
 		headerMenuComponents
@@ -23649,11 +23972,12 @@ function MobileRibbonToolbar(props) {
 			setCanScrollLeft(scrollLeft > 4);
 			setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 4);
 		};
-		updateScrollState();
+		const animationFrame = requestAnimationFrame(updateScrollState);
 		const resizeObserver = new ResizeObserver(updateScrollState);
 		resizeObserver.observe(container);
 		container.addEventListener("scroll", updateScrollState, { passive: true });
 		return () => {
+			cancelAnimationFrame(animationFrame);
 			resizeObserver.disconnect();
 			container.removeEventListener("scroll", updateScrollState);
 		};
@@ -23793,7 +24117,7 @@ function MobileRibbonToolbar(props) {
 		})]
 	});
 }
-function MobileSheetTopBar(props) {
+function MobileCompactTopBar(props) {
 	var _startGroup$children, _startGroup$children2, _moreTriggerRef$curre, _moreTriggerRef$curre2;
 	const { headerMenuComponents, headerMenu = true, ribbon } = props;
 	const [moreOpen, setMoreOpen] = (0, react.useState)(false);
@@ -23818,7 +24142,7 @@ function MobileSheetTopBar(props) {
 		className: (0, _univerjs_design.clsx)(_univerjs_design.resetButtonClassName, "univer-fixed univer-inset-0 univer-z-[1390] !univer-rounded-none !univer-bg-transparent"),
 		onClick: () => setMoreOpen(false)
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-u-comp": "mobile-sheet-more-menu",
+		"data-u-comp": "mobile-more-menu",
 		className: (0, _univerjs_design.clsx)("univer-fixed univer-z-[1400] univer-flex univer-w-60 univer-max-w-[calc(100vw-24px)] univer-flex-col univer-gap-1 univer-rounded-2xl univer-bg-gray-0 univer-p-2 univer-shadow-lg dark:!univer-bg-gray-800", _univerjs_design.borderClassName),
 		style: {
 			top: ((triggerRect === null || triggerRect === void 0 ? void 0 : triggerRect.bottom) ?? 48) + 8,
@@ -23836,21 +24160,17 @@ function MobileSheetTopBar(props) {
 		}, schema.key))
 	})] }), mountContainer);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-u-comp": "mobile-sheet-top-bar",
+		"data-u-comp": "mobile-compact-top-bar",
 		className: (0, _univerjs_design.clsx)("univer-flex univer-h-12 univer-items-center univer-justify-end univer-gap-1 univer-bg-gray-0 univer-px-3 dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-flex univer-items-center univer-gap-1 [&_button]:!univer-min-h-10 [&_button]:!univer-min-w-10 [&_button]:!univer-rounded-lg [&_button_svg]:!univer-size-5",
 				children: items.map((schema) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileToolbarItem, { ...schema.item }, schema.key))
 			}),
-			hasHeaderMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-flex univer-items-center univer-gap-1 [&>*]:univer-m-0 [&>*]:univer-inline-flex [&>*]:univer-min-h-10 [&>*]:univer-min-w-10 [&>*]:univer-items-center [&>*]:univer-justify-center [&>*]:univer-rounded-lg",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerMenuComponents })
-			}),
 			moreItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				ref: moreTriggerRef,
 				type: "button",
-				"data-u-comp": "mobile-sheet-more-trigger",
+				"data-u-comp": "mobile-more-trigger",
 				"aria-label": localeService.t("ui.ribbon.more"),
 				"aria-expanded": moreOpen,
 				className: (0, _univerjs_design.clsx)(_univerjs_design.resetButtonClassName, "univer-flex univer-size-10 univer-items-center univer-justify-center univer-rounded-lg univer-text-gray-700 univer-transition-colors active:univer-bg-gray-100 dark:!univer-text-gray-200 dark:active:!univer-bg-gray-700"),
@@ -23859,230 +24179,33 @@ function MobileSheetTopBar(props) {
 					className: "univer-size-5",
 					preserveStrokeWidth: true
 				})
+			}),
+			hasHeaderMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-flex univer-items-center univer-gap-1 [&>*]:univer-m-0 [&>*]:univer-inline-flex [&>*]:univer-min-h-10 [&>*]:univer-min-w-10 [&>*]:univer-items-center [&>*]:univer-justify-center [&>*]:univer-rounded-lg",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerMenuComponents })
 			})
 		]
 	}), moreMenu] });
 }
 
 //#endregion
-//#region src/views/components/mobile-drawer/MobileDrawerCoordinator.tsx
-const MobileDrawerCoordinatorContext = (0, react.createContext)(null);
-function MobileDrawerCoordinatorProvider(props) {
-	const entriesRef = (0, react.useRef)([]);
-	const [activeDrawerId, setActiveDrawerId] = (0, react.useState)(null);
-	const setEntries = (0, react.useCallback)((entries) => {
-		entriesRef.current = entries;
-		setActiveDrawerId(entries.length ? entries[entries.length - 1].id : null);
-	}, []);
-	const unregister = (0, react.useCallback)((id) => {
-		setEntries(entriesRef.current.filter((entry) => entry.id !== id));
-	}, [setEntries]);
-	const close = (0, react.useCallback)((id) => {
-		const entry = entriesRef.current.find((item) => item.id === id);
-		if (!entry) return;
-		unregister(id);
-		entry.onClose();
-	}, [unregister]);
-	const register = (0, react.useCallback)((id, mode, onClose) => {
-		const entry = {
-			id,
-			onClose
-		};
-		if (mode === "push") {
-			setEntries([...entriesRef.current, entry]);
-			return;
-		}
-		const previousEntries = entriesRef.current;
-		setEntries([entry]);
-		for (let i = previousEntries.length - 1; i >= 0; i--) previousEntries[i].onClose();
-	}, [setEntries]);
-	const value = (0, react.useMemo)(() => ({
-		activeDrawerId,
-		close,
-		register,
-		unregister
-	}), [
-		activeDrawerId,
-		close,
-		register,
-		unregister
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileDrawerCoordinatorContext.Provider, {
-		value,
-		children: props.children
-	});
+//#region src/views/menu/mobile/MobileMenu.tsx
+function MobileMenu(props) {
+	var _props$schemas;
+	const schemaKey = ((_props$schemas = props.schemas) === null || _props$schemas === void 0 ? void 0 : _props$schemas.map((schema) => schema.key).join("|")) ?? "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileMenuContent, { ...props }, `${props.menuType ?? ""}:${schemaKey}`);
 }
-
-//#endregion
-//#region src/views/components/mobile-drawer/MobileDrawer.tsx
-const MOBILE_DRAWER_COMPACT_PERCENT = 40;
-const MOBILE_DRAWER_EXPANDED_PERCENT = 80;
-function resolveMobileDrawerRelease(params) {
-	const { snap, deltaY, durationMs, percent } = params;
-	const velocity = deltaY / Math.max(durationMs, 1);
-	if (deltaY > 48 && velocity > .55 || percent < 20) return "closed";
-	if (snap === "expanded" && deltaY > 24) return "compact";
-	if (snap === "compact" && deltaY < -24) return "expanded";
-	return percent >= 60 ? "expanded" : "compact";
-}
-function MobileDrawer(props) {
-	var _globalThis$CSS;
-	const { snap, expandLabel, collapseLabel, onSnapChange, onClose, children, header, floatingActions, componentName = "mobile-drawer", panelRef, contentRef, layerRef, openMode = "replace", panelClassName, contentClassName, footer, role, ariaLabel } = props;
-	const coordinator = (0, react.useContext)(MobileDrawerCoordinatorContext);
-	const registerDrawer = coordinator === null || coordinator === void 0 ? void 0 : coordinator.register;
-	const unregisterDrawer = coordinator === null || coordinator === void 0 ? void 0 : coordinator.unregister;
-	const panelElementRef = (0, react.useRef)(null);
-	const drawerIdRef = (0, react.useRef)(null);
-	const onCloseRef = (0, react.useRef)(onClose);
-	onCloseRef.current = onClose;
-	if (!drawerIdRef.current) drawerIdRef.current = Symbol(componentName);
-	const drawerId = drawerIdRef.current;
-	const active = !coordinator || coordinator.activeDrawerId === drawerId;
-	const [dragPercent, setDragPercent] = (0, react.useState)(null);
-	const suppressHandleClickRef = (0, react.useRef)(false);
-	const dragRef = (0, react.useRef)(null);
-	const drawerPercent = dragPercent ?? (snap === "compact" ? MOBILE_DRAWER_COMPACT_PERCENT : MOBILE_DRAWER_EXPANDED_PERCENT);
-	const viewportHeightUnit = ((_globalThis$CSS = globalThis.CSS) === null || _globalThis$CSS === void 0 ? void 0 : _globalThis$CSS.supports("height", "1dvh")) ? "dvh" : "vh";
-	(0, react.useImperativeHandle)(panelRef, () => panelElementRef.current);
-	(0, react.useLayoutEffect)(() => {
-		if (!registerDrawer || !unregisterDrawer) return;
-		registerDrawer(drawerId, openMode, () => onCloseRef.current());
-		return () => unregisterDrawer(drawerId);
-	}, [
-		drawerId,
-		openMode,
-		registerDrawer,
-		unregisterDrawer
-	]);
-	(0, react.useLayoutEffect)(() => {
-		var _panelElementRef$curr;
-		const layer = (layerRef === null || layerRef === void 0 ? void 0 : layerRef.current) ?? (layerRef ? (_panelElementRef$curr = panelElementRef.current) === null || _panelElementRef$curr === void 0 ? void 0 : _panelElementRef$curr.parentElement : null);
-		if (!layer) return;
-		layer.toggleAttribute("hidden", !active);
-	}, [active, layerRef]);
-	function beginDrag(clientY) {
-		dragRef.current = {
-			startY: clientY,
-			startTime: performance.now(),
-			startPercent: drawerPercent,
-			currentPercent: drawerPercent,
-			moved: false
-		};
-	}
-	function moveDrag(clientY) {
-		const drag = dragRef.current;
-		if (!drag) return;
-		const deltaY = clientY - drag.startY;
-		const nextPercent = Math.max(0, Math.min(MOBILE_DRAWER_EXPANDED_PERCENT, drag.startPercent - deltaY / Math.max(window.innerHeight, 1) * 100));
-		drag.currentPercent = nextPercent;
-		drag.moved ||= Math.abs(deltaY) > 6;
-		setDragPercent(nextPercent);
-	}
-	function endDrag(clientY) {
-		const drag = dragRef.current;
-		if (!drag) return;
-		const result = resolveMobileDrawerRelease({
-			snap,
-			deltaY: clientY - drag.startY,
-			durationMs: performance.now() - drag.startTime,
-			percent: drag.currentPercent
-		});
-		suppressHandleClickRef.current = drag.moved;
-		dragRef.current = null;
-		setDragPercent(null);
-		if (result === "closed") if (coordinator) coordinator.close(drawerId);
-		else onClose();
-		else onSnapChange(result);
-	}
-	function handlePointerDown(event) {
-		try {
-			event.currentTarget.setPointerCapture(event.pointerId);
-		} catch {}
-		beginDrag(event.clientY);
-	}
-	function handlePointerMove(event) {
-		moveDrag(event.clientY);
-	}
-	function handlePointerUp(event) {
-		endDrag(event.clientY);
-	}
-	function handlePointerCancel() {
-		dragRef.current = null;
-		setDragPercent(null);
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [floatingActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-pointer-events-none univer-absolute univer-right-4 univer-z-30",
-		style: { bottom: `calc(${drawerPercent}${viewportHeightUnit} + 12px)` },
-		children: floatingActions
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		ref: panelElementRef,
-		hidden: !active,
-		role,
-		"aria-modal": role === "dialog" || void 0,
-		"aria-label": ariaLabel,
-		"data-u-comp": componentName,
-		"data-snap": snap,
-		className: (0, _univerjs_design.clsx)("univer-absolute univer-inset-x-0 univer-bottom-0 univer-z-20 univer-flex univer-flex-col univer-overflow-hidden univer-rounded-t-[24px] univer-bg-gray-50 univer-shadow-2xl univer-transition-[height] univer-duration-200 dark:!univer-bg-gray-900", dragPercent != null && "!univer-transition-none", panelClassName),
-		style: {
-			height: `${drawerPercent}${viewportHeightUnit}`,
-			paddingBottom: "env(safe-area-inset-bottom, 0px)"
-		},
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-relative univer-flex univer-h-14 univer-shrink-0 univer-items-end univer-bg-gray-0 dark:!univer-bg-gray-800",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					"aria-label": snap === "compact" ? expandLabel : collapseLabel,
-					className: (0, _univerjs_design.clsx)(_univerjs_design.resetButtonClassName, "univer-absolute univer-left-1/2 univer-top-0 univer-z-10 univer-flex univer-h-6 univer-w-16 -univer-translate-x-1/2 univer-touch-none univer-items-center univer-justify-center"),
-					style: { touchAction: "none" },
-					onPointerDown: handlePointerDown,
-					onPointerMove: handlePointerMove,
-					onPointerUp: handlePointerUp,
-					onPointerCancel: handlePointerCancel,
-					onClick: () => {
-						if (suppressHandleClickRef.current) {
-							suppressHandleClickRef.current = false;
-							return;
-						}
-						onSnapChange(snap === "compact" ? "expanded" : "compact");
-					},
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "univer-h-1 univer-w-10 univer-rounded-full univer-bg-gray-300 dark:!univer-bg-gray-600" })
-				}), header]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				ref: contentRef,
-				className: (0, _univerjs_design.clsx)("univer-flex-1 univer-overflow-y-auto univer-overflow-x-hidden univer-p-3", _univerjs_design.scrollbarClassName, contentClassName),
-				children
-			}),
-			footer
-		]
-	})] });
-}
-
-//#endregion
-//#region src/views/menu/mobile/MobileMenu.tsx
-function MobileMenu(props) {
+function MobileMenuContent(props) {
 	const { menuType, onOptionSelect, schemas: providedSchemas, menuManagerService: providedMenuManagerService, showHeader = true, presentation = "drawer", onNavigationChange } = props;
 	const rootMenuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const menuManagerService = providedMenuManagerService ?? rootMenuManagerService;
 	const [viewStack, setViewStack] = (0, react.useState)([]);
-	const providedSchemaKey = providedSchemas === null || providedSchemas === void 0 ? void 0 : providedSchemas.map((schema) => schema.key).join("|");
-	const menuSchemas = (0, react.useMemo)(() => {
-		if (providedSchemas) return providedSchemas;
-		if (!menuType) return [];
-		return menuManagerService.getMenuByPositionKey(menuType);
-	}, [
-		providedSchemas,
-		menuManagerService,
-		(0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
-			return menuManagerService.menuChanged$.pipe((0, rxjs_operators.scan)((version) => version + 1, 0), (0, rxjs_operators.startWith)(0));
-		}, [menuManagerService]), 0),
-		menuType
-	]);
-	(0, react.useEffect)(() => {
-		setViewStack([]);
-	}, [menuType, providedSchemaKey]);
+	const menuSchemaVersion$ = (0, react.useMemo)(() => {
+		return menuManagerService.menuChanged$.pipe((0, rxjs_operators.scan)((version) => version + 1, 0), (0, rxjs_operators.startWith)(0));
+	}, [menuManagerService]);
+	(0, _wendellhu_redi_react_bindings.useObservable)(menuSchemaVersion$, 0);
+	const menuSchemas = providedSchemas ?? (menuType ? menuManagerService.getMenuByPositionKey(menuType) : []);
 	const currentView = viewStack[viewStack.length - 1] ?? null;
 	const closeView = (0, react.useCallback)(() => setViewStack((stack) => stack.slice(0, -1)), []);
 	(0, react.useEffect)(() => {
@@ -24113,7 +24236,7 @@ function MobileMenu(props) {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					"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 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600",
+					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 active:univer-bg-gray-200 dark:!univer-text-gray-300 dark:active:!univer-bg-gray-600",
 					onClick: closeView,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, { className: "univer-text-base" })
 				}),
@@ -24185,15 +24308,17 @@ function MobileContextMenuBar(props) {
 			behavior: "smooth"
 		});
 	};
+	const showLeft = Boolean(currentView) || scrollState.left;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: "menu",
 		"data-u-comp": "mobile-context-menu-bar",
-		className: "univer-flex univer-h-12 univer-max-w-full univer-items-stretch univer-overflow-hidden univer-rounded-lg univer-bg-gray-0 univer-text-sm univer-text-gray-900 univer-shadow-lg dark:!univer-bg-gray-700 dark:!univer-text-gray-0",
+		style: { maxWidth: "min(100%, calc(100vw - 16px))" },
+		className: "univer-flex univer-h-10 univer-max-w-full univer-items-stretch univer-overflow-hidden univer-rounded-lg univer-bg-gray-0 univer-text-xs univer-text-gray-900 univer-shadow-lg dark:!univer-bg-gray-700 dark:!univer-text-gray-0",
 		children: [
-			(Boolean(currentView) || scrollState.left) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			showLeft && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				"aria-label": localeService.t("ui.navigation.back"),
-				className: "univer-flex univer-w-11 univer-shrink-0 univer-items-center univer-justify-center univer-border-0 univer-border-r univer-border-solid univer-border-gray-200 univer-bg-transparent univer-text-base univer-text-gray-700 univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 active:univer-bg-gray-100 dark:!univer-border-gray-600 dark:!univer-text-gray-200 dark:active:!univer-bg-gray-600",
+				className: "univer-flex univer-w-9 univer-shrink-0 univer-items-center univer-justify-center univer-border-0 univer-border-r univer-border-solid univer-border-gray-200 univer-bg-transparent univer-text-base univer-text-gray-700 univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 active:univer-bg-gray-100 dark:!univer-border-gray-600 dark:!univer-text-gray-200 dark:active:!univer-bg-gray-600",
 				onClick: () => scrollState.left ? scroll(-1) : onBack(),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, {})
 			}),
@@ -24220,7 +24345,7 @@ function MobileContextMenuBar(props) {
 			scrollState.right && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				"aria-label": localeService.t("ui.navigation.next"),
-				className: "univer-flex univer-w-11 univer-shrink-0 univer-items-center univer-justify-center univer-border-0 univer-border-l univer-border-solid univer-border-gray-200 univer-bg-transparent univer-text-base univer-text-gray-700 univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 active:univer-bg-gray-100 dark:!univer-border-gray-600 dark:!univer-text-gray-200 dark:active:!univer-bg-gray-600",
+				className: "univer-flex univer-w-9 univer-shrink-0 univer-items-center univer-justify-center univer-border-0 univer-border-l univer-border-solid univer-border-gray-200 univer-bg-transparent univer-text-base univer-text-gray-700 univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 active:univer-bg-gray-100 dark:!univer-border-gray-600 dark:!univer-text-gray-200 dark:active:!univer-bg-gray-600",
 				onClick: () => scroll(1),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {})
 			})
@@ -24241,7 +24366,7 @@ function MobileContextMenuItem(props) {
 		type: "button",
 		role: "menuitem",
 		disabled: interaction.disabled,
-		className: "univer-flex univer-min-w-[72px] univer-shrink-0 univer-snap-start univer-items-center univer-justify-center univer-border-0 univer-border-r univer-border-solid univer-border-gray-200 univer-bg-transparent univer-px-4 univer-text-sm univer-text-gray-900 univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 enabled:active:univer-bg-gray-100 disabled:univer-opacity-40 dark:!univer-border-gray-600 dark:!univer-text-gray-0 dark:enabled:active:!univer-bg-gray-600",
+		className: "univer-flex univer-min-w-[60px] univer-shrink-0 univer-snap-start univer-items-center univer-justify-center univer-border-0 univer-border-r univer-border-solid univer-border-gray-200 univer-bg-transparent univer-px-3 univer-text-xs univer-text-gray-900 univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 enabled:active:univer-bg-gray-100 disabled:univer-opacity-40 dark:!univer-border-gray-600 dark:!univer-text-gray-0 dark:enabled:active:!univer-bg-gray-600",
 		onClick: () => interaction.onPress(onExecute),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "univer-whitespace-nowrap",
@@ -24260,13 +24385,13 @@ function MobileContextMenuOption(props) {
 		role: "menuitem",
 		"aria-pressed": displayValue === currentValue,
 		disabled,
-		className: "univer-flex univer-min-w-[72px] univer-shrink-0 univer-snap-start univer-items-center univer-justify-center univer-border-0 univer-border-r univer-border-solid univer-border-gray-200 univer-bg-transparent univer-px-4 univer-text-sm univer-text-gray-900 univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 enabled:active:univer-bg-gray-100 disabled:univer-opacity-40 dark:!univer-border-gray-600 dark:!univer-text-gray-0 dark:enabled:active:!univer-bg-gray-600",
+		className: "univer-flex univer-min-w-[60px] univer-shrink-0 univer-snap-start univer-items-center univer-justify-center univer-border-0 univer-border-r univer-border-solid univer-border-gray-200 univer-bg-transparent univer-px-3 univer-text-xs univer-text-gray-900 univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 enabled:active:univer-bg-gray-100 disabled:univer-opacity-40 dark:!univer-border-gray-600 dark:!univer-text-gray-0 dark:enabled:active:!univer-bg-gray-600",
 		onClick: () => onExecute === null || onExecute === void 0 ? void 0 : onExecute({
 			...option,
 			value: displayValue,
 			id: menuItem.id,
 			label: menuKey,
-			commandId: option.commandId
+			commandId: option.commandId ?? menuItem.selectionsCommandId
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
 			value$: option.value$,
@@ -24301,6 +24426,14 @@ function MobileSchemaList(props) {
 			bordered: index !== visibleSchemas.length - 1
 		}, schema.key);
 		if (!((_schema$children2 = schema.children) === null || _schema$children2 === void 0 ? void 0 : _schema$children2.length)) return null;
+		if (schema.mobileLayout === "grid" || schema.mobileLayout === void 0 && Boolean(schema.quickLayout)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileQuickSchemaGroup, {
+			schema,
+			menuManagerService,
+			onExecute,
+			onOpenView,
+			inheritedDisabled$,
+			bordered: index !== visibleSchemas.length - 1
+		}, schema.key);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 			className: (0, _univerjs_design.clsx)("univer-grid", index !== visibleSchemas.length - 1 && _univerjs_design.borderBottomClassName),
 			children: [schema.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -24317,6 +24450,54 @@ function MobileSchemaList(props) {
 		}, schema.key);
 	}) });
 }
+function MobileQuickSchemaGroup(props) {
+	var _schema$children3;
+	const { schema, menuManagerService, onExecute, onOpenView, inheritedDisabled$, bordered } = props;
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const columns = Math.max(2, Math.min(schema.quickColumns ?? 4, 5));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: (0, _univerjs_design.clsx)("univer-p-3", bordered && _univerjs_design.borderBottomClassName),
+		children: [schema.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-px-1 univer-pb-2 univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-gray-100",
+			children: localeService.t(schema.title)
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-grid univer-gap-2",
+			style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+			children: (_schema$children3 = schema.children) === null || _schema$children3 === void 0 ? void 0 : _schema$children3.map((childSchema) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileQuickSchemaItem, {
+				schema: childSchema,
+				menuManagerService,
+				onExecute,
+				onOpenView,
+				inheritedDisabled$,
+				compact: schema.quickLayoutVariant === "compact"
+			}, childSchema.key))
+		})]
+	});
+}
+function MobileQuickSchemaItem(props) {
+	const { schema, menuManagerService, onExecute, onOpenView, inheritedDisabled$, compact } = props;
+	const interaction = useMobileSchemaInteraction({
+		schema,
+		menuManagerService,
+		onOpenView,
+		inheritedDisabled$
+	});
+	if (!interaction || interaction.hidden) return null;
+	const { menuItem, activated, disabled, value, onPress } = interaction;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		disabled,
+		"aria-pressed": menuItem.type === 2 ? activated : void 0,
+		className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-w-full univer-appearance-none univer-flex-col univer-items-center univer-justify-center univer-gap-1 univer-rounded-xl univer-border-0 univer-bg-gray-50 univer-p-2 univer-text-center univer-text-gray-900 univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 enabled:active:univer-scale-[0.98] enabled:active:univer-bg-gray-100 disabled:univer-opacity-40 dark:!univer-bg-gray-700 dark:!univer-text-gray-100 dark:enabled:active:!univer-bg-gray-600 [&>span]:univer-line-clamp-2 [&>span]:univer-text-xs [&>span]:univer-font-medium [&>svg]:univer-size-6 [&>svg]:univer-shrink-0", compact ? "univer-min-h-12" : "univer-min-h-20", activated && "univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-primary-900 dark:!univer-text-primary-300"),
+		onClick: () => onPress(onExecute),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
+			value,
+			title: menuItem.title ?? menuItem.tooltip,
+			label: menuItem.label,
+			icon: menuItem.icon
+		}), activated && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-absolute univer-right-1.5 univer-top-1.5 univer-size-3.5" })]
+	});
+}
 function MobileSchemaRow(props) {
 	const { schema, menuManagerService, onExecute, onOpenView, inheritedDisabled$, bordered } = props;
 	const interaction = useMobileSchemaInteraction({
@@ -24354,7 +24535,7 @@ function MobileSchemaRow(props) {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
-		className: (0, _univerjs_design.clsx)("univer-flex univer-min-h-12 univer-w-full univer-appearance-none univer-items-center univer-gap-3 univer-border-0 univer-bg-gray-0 univer-px-4 univer-py-2 univer-text-left univer-outline-none univer-transition-colors focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 enabled:hover:univer-bg-gray-50 enabled:active:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-40 dark:!univer-bg-gray-800 dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600", bordered && _univerjs_design.borderBottomClassName),
+		className: (0, _univerjs_design.clsx)("univer-flex univer-min-h-12 univer-w-full univer-appearance-none univer-items-center univer-gap-3 univer-border-0 univer-bg-gray-0 univer-px-4 univer-py-2 univer-text-left univer-outline-none univer-transition-colors focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 enabled:active:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-40 dark:!univer-bg-gray-800 dark:active:!univer-bg-gray-600", bordered && _univerjs_design.borderBottomClassName),
 		"data-u-command": menuItem.id,
 		disabled,
 		"aria-pressed": menuItem.type === 2 ? activated : void 0,
@@ -24414,7 +24595,7 @@ function MobileSelectionOptionRow(props) {
 					value: nextValue,
 					id: menuItem.id,
 					label: menuKey,
-					commandId: option.commandId
+					commandId: option.commandId ?? menuItem.selectionsCommandId
 				});
 			}
 		})
@@ -24422,7 +24603,7 @@ function MobileSelectionOptionRow(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		"aria-pressed": selected,
-		className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-min-h-12 univer-w-full univer-appearance-none univer-items-center univer-gap-3 univer-border-0 univer-bg-gray-0 univer-px-4 univer-py-2 univer-text-left univer-outline-none univer-transition-colors focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 enabled:hover:univer-bg-gray-50 enabled:active:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-40 dark:!univer-bg-gray-800 dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600", bordered && _univerjs_design.borderBottomClassName),
+		className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-min-h-12 univer-w-full univer-appearance-none univer-items-center univer-gap-3 univer-border-0 univer-bg-gray-0 univer-px-4 univer-py-2 univer-text-left univer-outline-none univer-transition-colors focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 enabled:active:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-40 dark:!univer-bg-gray-800 dark:active:!univer-bg-gray-600", bordered && _univerjs_design.borderBottomClassName),
 		disabled: optionDisabled,
 		onClick: () => {
 			if (optionDisabled) return;
@@ -24431,7 +24612,7 @@ function MobileSelectionOptionRow(props) {
 				value: displayValue,
 				id: menuItem.id,
 				label: menuKey,
-				commandId: option.commandId
+				commandId: option.commandId ?? menuItem.selectionsCommandId
 			});
 		},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -24460,7 +24641,8 @@ function useMobileSchemaInteraction(props) {
 	const value = (0, _wendellhu_redi_react_bindings.useObservable)(menuItem === null || menuItem === void 0 ? void 0 : menuItem.value$);
 	const selectionsFromObservable = (0, _wendellhu_redi_react_bindings.useObservable)(selectorItem && (0, rxjs.isObservable)(selectorItem.selections) ? selectorItem.selections : void 0);
 	const schemaChildren = (0, react.useMemo)(() => schema.children ?? [], [schema.children]);
-	const visibleSchemaChildren = (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => getVisibleSchemaCount$(schemaChildren), [schemaChildren]), schemaChildren.length);
+	const visibleSchemaChildren$ = (0, react.useMemo)(() => getVisibleSchemaCount$(schemaChildren), [schemaChildren]);
+	const visibleSchemaChildren = (0, _wendellhu_redi_react_bindings.useObservable)(visibleSchemaChildren$, schemaChildren.length);
 	const selections = (0, react.useMemo)(() => {
 		if (!selectorItem || (menuItem === null || menuItem === void 0 ? void 0 : menuItem.type) !== 1 && (menuItem === null || menuItem === void 0 ? void 0 : menuItem.type) !== 2) return [];
 		if (selectionsFromObservable) return selectionsFromObservable;
@@ -24477,11 +24659,14 @@ function useMobileSchemaInteraction(props) {
 	if (!menuItem) return null;
 	const hasSubmenu = visibleSchemaChildren > 0 || selections.length > 0 || subMenuItems.length > 0;
 	const effectivelyDisabled = disabled || menuItem.type === 3 && !hasSubmenu;
-	const currentValueText = typeof value === "string" || typeof value === "number" ? String(value) : "";
+	const selectedOption = selections.find((option) => option.value === value);
+	let currentValueText = "";
+	if (typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) === "string") currentValueText = localeService.t(selectedOption.label);
+	else if (selections.length === 0 && (typeof value === "string" || typeof value === "number")) currentValueText = String(value);
 	const onPress = (onExecute) => {
 		if (effectivelyDisabled) return;
 		if (schemaChildren.length > 0) {
-			const schemas = menuItem.type === 2 && selections.length === 0 ? [{
+			const schemas = menuItem.type === 2 ? [{
 				...schema,
 				children: void 0
 			}, ...schemaChildren] : schemaChildren;
@@ -24514,65 +24699,500 @@ function useMobileSchemaInteraction(props) {
 			});
 			return;
 		}
-		if (menuItem.type !== 0 && menuItem.type !== 2) return;
-		onExecute === null || onExecute === void 0 || onExecute({
-			commandId: menuItem.commandId,
-			value,
-			id: menuItem.id,
-			label: schema.key,
-			params: menuItem.params
-		});
-	};
-	return {
-		menuItem,
-		activated,
-		disabled: effectivelyDisabled,
-		hidden,
-		value,
-		currentValueText,
-		hasSubmenu,
-		onPress
-	};
-}
-function getVisibleSchemaCount$(schemas) {
-	const leafSchemas = getLeafItemSchemas(schemas);
-	if (leafSchemas.length === 0) return (0, rxjs.of)(0);
-	return (0, rxjs.combineLatest)(leafSchemas.map((schema) => {
-		var _schema$item;
-		return (((_schema$item = schema.item) === null || _schema$item === void 0 ? void 0 : _schema$item.hidden$) ?? (0, rxjs.of)(false)).pipe((0, rxjs_operators.startWith)(false));
-	})).pipe((0, rxjs.map)((hiddenStates) => hiddenStates.filter((hidden) => !hidden).length));
-}
-function getMenuSchemaTitle(schema, localeService) {
-	const menuItem = schema.item;
-	if (typeof (menuItem === null || menuItem === void 0 ? void 0 : menuItem.title) === "string") return localeService.t(menuItem.title);
-	if (typeof (menuItem === null || menuItem === void 0 ? void 0 : menuItem.label) === "string") return localeService.t(menuItem.label);
-	if (typeof (menuItem === null || menuItem === void 0 ? void 0 : menuItem.tooltip) === "string") return localeService.t(menuItem.tooltip);
-	if (typeof schema.title === "string") return localeService.t(schema.title);
-	return schema.key;
-}
-function useContextGroupHiddenStates(menuSchemas) {
-	return (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
-		const groupStates = menuSchemas.flatMap((menuSchema) => {
-			var _menuSchema$children;
-			const hiddenObservables = ((_menuSchema$children = menuSchema.children) === null || _menuSchema$children === void 0 ? void 0 : _menuSchema$children.length) ? getLeafItemSchemas(menuSchema.children).map((childSchema) => {
-				var _childSchema$item;
-				return ((_childSchema$item = childSchema.item) === null || _childSchema$item === void 0 ? void 0 : _childSchema$item.hidden$) ?? (0, rxjs.of)(false);
-			}) : [];
-			return hiddenObservables.length ? [(0, rxjs.combineLatest)(hiddenObservables).pipe((0, rxjs.map)((values) => [menuSchema.key, values.every(Boolean)]))] : [];
-		});
-		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) => {
-		var _schema$children3;
-		if ((_schema$children3 = schema.children) === null || _schema$children3 === void 0 ? void 0 : _schema$children3.length) return [...acc, ...getLeafItemSchemas(schema.children)];
-		if (schema.item) return [...acc, schema];
-		return acc;
-	}, []);
+		if (menuItem.type !== 0 && menuItem.type !== 2) return;
+		onExecute === null || onExecute === void 0 || onExecute({
+			commandId: menuItem.commandId,
+			value,
+			id: menuItem.id,
+			label: schema.key,
+			params: menuItem.params
+		});
+	};
+	return {
+		menuItem,
+		activated,
+		disabled: effectivelyDisabled,
+		hidden,
+		value,
+		currentValueText,
+		hasSubmenu,
+		onPress
+	};
+}
+function getVisibleSchemaCount$(schemas) {
+	const leafSchemas = getLeafItemSchemas(schemas);
+	if (leafSchemas.length === 0) return (0, rxjs.of)(0);
+	return (0, rxjs.combineLatest)(leafSchemas.map((schema) => {
+		var _schema$item;
+		return (((_schema$item = schema.item) === null || _schema$item === void 0 ? void 0 : _schema$item.hidden$) ?? (0, rxjs.of)(false)).pipe((0, rxjs_operators.startWith)(false));
+	})).pipe((0, rxjs.map)((hiddenStates) => hiddenStates.filter((hidden) => !hidden).length));
+}
+function getMenuSchemaTitle(schema, localeService) {
+	const menuItem = schema.item;
+	if (typeof (menuItem === null || menuItem === void 0 ? void 0 : menuItem.title) === "string") return localeService.t(menuItem.title);
+	if (typeof (menuItem === null || menuItem === void 0 ? void 0 : menuItem.label) === "string") return localeService.t(menuItem.label);
+	if (typeof (menuItem === null || menuItem === void 0 ? void 0 : menuItem.tooltip) === "string") return localeService.t(menuItem.tooltip);
+	if (typeof schema.title === "string") return localeService.t(schema.title);
+	return schema.key;
+}
+function useContextGroupHiddenStates(menuSchemas) {
+	const hiddenStates$ = (0, react.useMemo)(() => {
+		const groupStates = menuSchemas.flatMap((menuSchema) => {
+			var _menuSchema$children;
+			const hiddenObservables = ((_menuSchema$children = menuSchema.children) === null || _menuSchema$children === void 0 ? void 0 : _menuSchema$children.length) ? getLeafItemSchemas(menuSchema.children).map((childSchema) => {
+				var _childSchema$item;
+				return ((_childSchema$item = childSchema.item) === null || _childSchema$item === void 0 ? void 0 : _childSchema$item.hidden$) ?? (0, rxjs.of)(false);
+			}) : [];
+			return hiddenObservables.length ? [(0, rxjs.combineLatest)(hiddenObservables).pipe((0, rxjs.map)((values) => [menuSchema.key, values.every(Boolean)]))] : [];
+		});
+		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]);
+	return (0, _wendellhu_redi_react_bindings.useObservable)(hiddenStates$, {});
+}
+function getLeafItemSchemas(schemas) {
+	return schemas.reduce((acc, schema) => {
+		var _schema$children4;
+		if ((_schema$children4 = schema.children) === null || _schema$children4 === void 0 ? void 0 : _schema$children4.length) return [...acc, ...getLeafItemSchemas(schema.children)];
+		if (schema.item) return [...acc, schema];
+		return acc;
+	}, []);
+}
+
+//#endregion
+//#region src/views/mobile-workbench/MobileCanvasLayout.tsx
+const MobileCanvasLayoutContext = (0, react.createContext)(null);
+function MobileCanvasLayoutProvider({ children }) {
+	const [panels, setPanels] = (0, react.useState)([]);
+	const register = (0, react.useCallback)((panel) => {
+		setPanels((current) => [...current, panel]);
+		return () => setPanels((current) => current.filter((item) => item !== panel));
+	}, []);
+	const value = (0, react.useMemo)(() => ({
+		panels,
+		register
+	}), [panels, register]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileCanvasLayoutContext.Provider, {
+		value,
+		children
+	});
+}
+/** Register the actual surface, not its full-screen portal container. */
+function useMobileCanvasPanel(ref, layout, dragging = false) {
+	var _useContext;
+	const register = (_useContext = (0, react.useContext)(MobileCanvasLayoutContext)) === null || _useContext === void 0 ? void 0 : _useContext.register;
+	(0, react.useLayoutEffect)(() => {
+		if (ref.current && register) return register({
+			ref,
+			layout,
+			dragging
+		});
+	}, [
+		ref,
+		register,
+		layout,
+		dragging
+	]);
+}
+/** Connect design-layer overlay surfaces to the current workbench layout. */
+function useMobileOverlayRegistration(layout) {
+	var _useContext2;
+	const register = (_useContext2 = (0, react.useContext)(MobileCanvasLayoutContext)) === null || _useContext2 === void 0 ? void 0 : _useContext2.register;
+	return (0, react.useCallback)((element) => register === null || register === void 0 ? void 0 : register({
+		ref: { current: element },
+		layout,
+		dragging: false
+	}), [register, layout]);
+}
+/** Minimal viewport translation in CSS pixels. Large objects keep their leading edge visible. */
+function getMobileCanvasPanDelta(target, viewport) {
+	const reveal = (start, size, available) => {
+		const margin = Math.min(16, available / 4);
+		const end = start + Math.min(size, available - margin * 2);
+		if (start < margin) return margin - start;
+		return end > available - margin ? available - margin - end : 0;
+	};
+	return {
+		x: reveal(target.left, target.width, viewport.width),
+		y: reveal(target.top, target.height, viewport.height)
+	};
+}
+/**
+* Opt-in canvas host. Panels remain outside the resizable inner element so their
+* measurement cannot feed back into their own containing block. No focus or zoom
+* changes are performed here; each renderer owns its viewport translation.
+*/
+function useMobileCanvasViewport(options) {
+	const { containerRef, canvasRef, enabled = true, panelsOnly = false, onReveal } = options;
+	const context = (0, react.useContext)(MobileCanvasLayoutContext);
+	const revealRef = (0, react.useRef)(onReveal);
+	(0, react.useLayoutEffect)(() => {
+		revealRef.current = onReveal;
+	}, [onReveal]);
+	const previousHeightRef = (0, react.useRef)(null);
+	const needsRevealRef = (0, react.useRef)(false);
+	(0, react.useLayoutEffect)(() => {
+		const container = containerRef.current;
+		const canvas = canvasRef.current;
+		if (!context || !enabled || !container || !canvas) return;
+		const panels = context.panels.flatMap(({ ref, layout, dragging }) => ref.current ? [{
+			element: ref.current,
+			layout,
+			dragging
+		}] : []);
+		if (panelsOnly && !panels.some((panel) => panel.layout === "canvas")) {
+			previousHeightRef.current = null;
+			needsRevealRef.current = false;
+			return;
+		}
+		const viewport = window.visualViewport;
+		let frame = 0;
+		let settleFrame = 0;
+		const originalHeight = canvas.style.height;
+		const originalBottom = canvas.style.bottom;
+		const originalTop = canvas.style.top;
+		const panelStyles = panels.map(({ element }) => ({
+			element,
+			bottom: element.style.bottom,
+			maxHeight: element.style.maxHeight
+		}));
+		const settle = () => {
+			cancelAnimationFrame(settleFrame);
+			settleFrame = requestAnimationFrame(() => {
+				settleFrame = requestAnimationFrame(() => {
+					if (needsRevealRef.current && !panels.some((panel) => panel.dragging)) {
+						needsRevealRef.current = false;
+						revealRef.current();
+					}
+				});
+			});
+		};
+		const measure = () => {
+			const bounds = container.getBoundingClientRect();
+			const modal = panels.some((panel) => panel.layout === "modal");
+			const visibleBottom = viewport ? viewport.offsetTop + viewport.height : window.innerHeight;
+			const top = modal ? bounds.top : Math.max(bounds.top, (viewport === null || viewport === void 0 ? void 0 : viewport.offsetTop) ?? 0);
+			let bottom = modal ? bounds.bottom : Math.min(bounds.bottom, visibleBottom);
+			const panelMaxHeight = Math.max(0, bottom - top) * .6;
+			if (!modal) for (const { element, layout } of panels) {
+				if (layout !== "canvas") continue;
+				const containingBlock = element.offsetParent;
+				const parentBottom = getComputedStyle(element).position === "fixed" || !containingBlock ? window.innerHeight : containingBlock.getBoundingClientRect().bottom;
+				element.style.bottom = `${Math.max(0, parentBottom - visibleBottom)}px`;
+				element.style.maxHeight = `${panelMaxHeight}px`;
+				const rect = element.getBoundingClientRect();
+				if (rect.right > bounds.left && rect.left < bounds.right && rect.bottom > bounds.top) bottom = Math.min(bottom, rect.top);
+			}
+			const height = Math.max(0, bottom - top);
+			const oldHeight = previousHeightRef.current ?? bounds.height;
+			if (modal || height > oldHeight + 1) needsRevealRef.current = false;
+			needsRevealRef.current ||= !modal && height < oldHeight - 1;
+			previousHeightRef.current = height;
+			canvas.style.bottom = "auto";
+			canvas.style.top = `${top - bounds.top}px`;
+			canvas.style.height = `${height}px`;
+			settle();
+		};
+		const schedule = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		};
+		const observer = new ResizeObserver(schedule);
+		const cancelReveal = () => {
+			needsRevealRef.current = false;
+		};
+		canvas.addEventListener("pointerdown", cancelReveal);
+		observer.observe(container);
+		panels.forEach(({ element }) => observer.observe(element));
+		viewport === null || viewport === void 0 || viewport.addEventListener("resize", schedule);
+		viewport === null || viewport === void 0 || viewport.addEventListener("scroll", schedule);
+		window.addEventListener("resize", schedule);
+		measure();
+		return () => {
+			observer.disconnect();
+			canvas.removeEventListener("pointerdown", cancelReveal);
+			cancelAnimationFrame(frame);
+			cancelAnimationFrame(settleFrame);
+			viewport === null || viewport === void 0 || viewport.removeEventListener("resize", schedule);
+			viewport === null || viewport === void 0 || viewport.removeEventListener("scroll", schedule);
+			window.removeEventListener("resize", schedule);
+			canvas.style.height = originalHeight;
+			canvas.style.bottom = originalBottom;
+			canvas.style.top = originalTop;
+			panelStyles.forEach(({ element, bottom, maxHeight }) => {
+				element.style.bottom = bottom;
+				element.style.maxHeight = maxHeight;
+			});
+		};
+	}, [
+		context,
+		enabled,
+		panelsOnly,
+		containerRef,
+		canvasRef
+	]);
+}
+
+//#endregion
+//#region src/views/components/mobile-drawer/MobileDrawerCoordinator.tsx
+const MobileDrawerCoordinatorContext = (0, react.createContext)(null);
+function MobileDrawerCoordinatorProvider(props) {
+	const entriesRef = (0, react.useRef)([]);
+	const [activeDrawerId, setActiveDrawerId] = (0, react.useState)(null);
+	const setEntries = (0, react.useCallback)((entries) => {
+		entriesRef.current = entries;
+		setActiveDrawerId(entries.length ? entries[entries.length - 1].id : null);
+	}, []);
+	const unregister = (0, react.useCallback)((id) => {
+		setEntries(entriesRef.current.filter((entry) => entry.id !== id));
+	}, [setEntries]);
+	const close = (0, react.useCallback)((id) => {
+		const entry = entriesRef.current.find((item) => item.id === id);
+		if (!entry) return;
+		unregister(id);
+		entry.onClose();
+	}, [unregister]);
+	const register = (0, react.useCallback)((id, mode, onClose) => {
+		const entry = {
+			id,
+			onClose
+		};
+		if (mode === "push") {
+			setEntries([...entriesRef.current, entry]);
+			return;
+		}
+		const previousEntries = entriesRef.current;
+		setEntries([entry]);
+		for (let i = previousEntries.length - 1; i >= 0; i--) previousEntries[i].onClose();
+	}, [setEntries]);
+	const value = (0, react.useMemo)(() => ({
+		activeDrawerId,
+		close,
+		register,
+		unregister
+	}), [
+		activeDrawerId,
+		close,
+		register,
+		unregister
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileDrawerCoordinatorContext.Provider, {
+		value,
+		children: props.children
+	});
+}
+
+//#endregion
+//#region src/views/components/mobile-drawer/MobileDrawer.tsx
+function assignDrawerRef(ref, element) {
+	if (typeof ref === "function") ref(element);
+	else if (ref) ref.current = element;
+}
+const MOBILE_DRAWER_COMPACT_PERCENT = 40;
+const MOBILE_DRAWER_EXPANDED_PERCENT = 80;
+const MobileDrawerLayoutContext = (0, react.createContext)("modal");
+function resolveMobileDrawerRelease(params) {
+	const { snap, deltaY, durationMs, percent } = params;
+	const velocity = deltaY / Math.max(durationMs, 1);
+	if (deltaY > 48 && (snap === "compact" || velocity > .55) || percent < 20) return "closed";
+	if (snap === "expanded" && deltaY > 24) return "compact";
+	if (snap === "compact" && deltaY < -24) return "expanded";
+	return percent >= 60 ? "expanded" : "compact";
+}
+function MobileDrawer(props) {
+	var _globalThis$CSS;
+	const { snap, expandLabel, collapseLabel, onSnapChange, onClose, children, header, floatingActions, componentName = "mobile-drawer", panelRef, contentRef, layerRef, openMode = "replace", panelClassName, contentClassName, footer, role, ariaLabel, layout: requestedLayout } = props;
+	const coordinator = (0, react.useContext)(MobileDrawerCoordinatorContext);
+	const registerDrawer = coordinator === null || coordinator === void 0 ? void 0 : coordinator.register;
+	const unregisterDrawer = coordinator === null || coordinator === void 0 ? void 0 : coordinator.unregister;
+	const panelElementRef = (0, react.useRef)(null);
+	const drawerIdRef = (0, react.useRef)(null);
+	const onCloseRef = (0, react.useRef)(onClose);
+	onCloseRef.current = onClose;
+	if (!drawerIdRef.current) drawerIdRef.current = Symbol(componentName);
+	const drawerId = drawerIdRef.current;
+	const active = !coordinator || coordinator.activeDrawerId === drawerId;
+	const inheritedLayout = (0, react.useContext)(MobileDrawerLayoutContext);
+	const layout = requestedLayout ?? inheritedLayout;
+	const registerOverlay = useMobileOverlayRegistration(layout);
+	const viewportHeightUnit = ((_globalThis$CSS = globalThis.CSS) === null || _globalThis$CSS === void 0 ? void 0 : _globalThis$CSS.supports("height", "1dvh")) ? "dvh" : "vh";
+	const overlay = (0, react.useMemo)(() => ({
+		modal: layout === "modal",
+		contentProps: {
+			style: layout === "canvas" ? {
+				height: `${MOBILE_DRAWER_COMPACT_PERCENT}${viewportHeightUnit}`,
+				maxHeight: `${MOBILE_DRAWER_COMPACT_PERCENT}${viewportHeightUnit}`
+			} : void 0,
+			onOpenAutoFocus: layout === "canvas" ? (event) => event.preventDefault() : void 0,
+			onCloseAutoFocus: layout === "canvas" ? (event) => event.preventDefault() : void 0
+		},
+		onMount: registerOverlay
+	}), [
+		layout,
+		registerOverlay,
+		viewportHeightUnit
+	]);
+	const [dragPercent, setDragPercent] = (0, react.useState)(null);
+	const surfaceRef = (0, react.useRef)(null);
+	const setPanelRef = (0, react.useCallback)((element) => {
+		surfaceRef.current = element;
+		panelElementRef.current = element;
+		assignDrawerRef(panelRef, element);
+	}, [panelRef]);
+	useMobileCanvasPanel(surfaceRef, layout, dragPercent !== null);
+	const suppressHandleClickRef = (0, react.useRef)(false);
+	const dragRef = (0, react.useRef)(null);
+	const drawerPercent = dragPercent ?? (snap === "compact" ? MOBILE_DRAWER_COMPACT_PERCENT : MOBILE_DRAWER_EXPANDED_PERCENT);
+	const keyboardLayout = (0, _univerjs_design.useMobileKeyboardViewportLayout)(panelElementRef);
+	(0, react.useLayoutEffect)(() => {
+		if (!registerDrawer || !unregisterDrawer) return;
+		registerDrawer(drawerId, openMode, () => onCloseRef.current());
+		return () => unregisterDrawer(drawerId);
+	}, [
+		drawerId,
+		openMode,
+		registerDrawer,
+		unregisterDrawer
+	]);
+	(0, react.useLayoutEffect)(() => {
+		var _panelElementRef$curr;
+		const layer = (layerRef === null || layerRef === void 0 ? void 0 : layerRef.current) ?? (layerRef ? (_panelElementRef$curr = panelElementRef.current) === null || _panelElementRef$curr === void 0 ? void 0 : _panelElementRef$curr.parentElement : null);
+		if (!layer) return;
+		layer.toggleAttribute("hidden", !active);
+	}, [active, layerRef]);
+	function beginDrag(clientY) {
+		dragRef.current = {
+			startY: clientY,
+			startTime: performance.now(),
+			startPercent: drawerPercent,
+			currentPercent: drawerPercent,
+			currentY: clientY,
+			moved: false
+		};
+	}
+	function moveDrag(clientY) {
+		const drag = dragRef.current;
+		if (!drag) return;
+		const deltaY = clientY - drag.startY;
+		const nextPercent = Math.max(0, Math.min(MOBILE_DRAWER_EXPANDED_PERCENT, drag.startPercent - deltaY / Math.max(window.innerHeight, 1) * 100));
+		drag.currentPercent = nextPercent;
+		drag.currentY = clientY;
+		drag.moved ||= Math.abs(deltaY) > 6;
+		setDragPercent(nextPercent);
+	}
+	function endDrag(clientY) {
+		const drag = dragRef.current;
+		if (!drag) return;
+		const result = resolveMobileDrawerRelease({
+			snap,
+			deltaY: clientY - drag.startY,
+			durationMs: performance.now() - drag.startTime,
+			percent: drag.currentPercent
+		});
+		suppressHandleClickRef.current = drag.moved;
+		dragRef.current = null;
+		setDragPercent(null);
+		if (result === "closed") {
+			if (coordinator) coordinator.close(drawerId);
+			else onClose();
+		} else onSnapChange(result);
+	}
+	function handlePointerDown(event) {
+		try {
+			event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+		beginDrag(event.clientY);
+	}
+	function handlePointerMove(event) {
+		moveDrag(event.clientY);
+	}
+	function handlePointerUp(event) {
+		endDrag(event.clientY);
+	}
+	function handlePointerCancel() {
+		const drag = dragRef.current;
+		if (!(drag === null || drag === void 0 ? void 0 : drag.moved)) {
+			dragRef.current = null;
+			setDragPercent(null);
+			return;
+		}
+		endDrag(drag.currentY);
+	}
+	function handleTouchStart(event) {
+		const touch = event.touches[0];
+		if (touch) beginDrag(touch.clientY);
+	}
+	function handleTouchMove(event) {
+		const touch = event.touches[0];
+		if (touch) moveDrag(touch.clientY);
+	}
+	function handleTouchEnd() {
+		const drag = dragRef.current;
+		if (drag) endDrag(drag.currentY);
+	}
+	function handleTouchCancel() {
+		handlePointerCancel();
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileDrawerLayoutContext.Provider, {
+		value: layout,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.MobileOverlayContext.Provider, {
+			value: overlay,
+			children: [floatingActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-pointer-events-none univer-absolute univer-right-4 univer-z-30",
+				style: { bottom: `calc(${drawerPercent}${viewportHeightUnit} + 12px)` },
+				children: floatingActions
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				ref: setPanelRef,
+				hidden: !active,
+				role,
+				"aria-modal": layout === "modal" && role === "dialog" || void 0,
+				"aria-label": ariaLabel,
+				"data-u-comp": componentName,
+				"data-snap": snap,
+				className: (0, _univerjs_design.clsx)("univer-absolute univer-inset-x-0 univer-bottom-0 univer-z-20 univer-flex univer-flex-col univer-overflow-hidden univer-rounded-t-[24px] univer-bg-gray-50 univer-shadow-2xl univer-transition-[height] univer-duration-200 dark:!univer-bg-gray-900 [&_input]:!univer-text-base [&_select]:!univer-text-base [&_textarea]:!univer-text-base", "univer-pointer-events-auto", dragPercent != null && "!univer-transition-none", panelClassName),
+				style: {
+					height: `${drawerPercent}${viewportHeightUnit}`,
+					paddingBottom: "env(safe-area-inset-bottom, 0px)"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-relative univer-flex univer-h-14 univer-shrink-0 univer-items-end univer-bg-gray-0 dark:!univer-bg-gray-800",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": snap === "compact" ? expandLabel : collapseLabel,
+							className: (0, _univerjs_design.clsx)(_univerjs_design.resetButtonClassName, "univer-absolute univer-left-1/2 univer-top-0 univer-z-10 univer-flex univer-h-6 univer-w-16 -univer-translate-x-1/2 univer-touch-none univer-items-center univer-justify-center"),
+							style: { touchAction: "none" },
+							onPointerDown: handlePointerDown,
+							onPointerMove: handlePointerMove,
+							onPointerUp: handlePointerUp,
+							onPointerCancel: handlePointerCancel,
+							onTouchStart: handleTouchStart,
+							onTouchMove: handleTouchMove,
+							onTouchEnd: handleTouchEnd,
+							onTouchCancel: handleTouchCancel,
+							onClick: () => {
+								if (suppressHandleClickRef.current) {
+									suppressHandleClickRef.current = false;
+									return;
+								}
+								onSnapChange(snap === "compact" ? "expanded" : "compact");
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "univer-h-1 univer-w-10 univer-rounded-full univer-bg-gray-300 dark:!univer-bg-gray-600" })
+						}), header]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: contentRef,
+						className: (0, _univerjs_design.clsx)("univer-flex-1 univer-overflow-y-auto univer-overflow-x-hidden univer-p-3", _univerjs_design.scrollbarClassName, contentClassName),
+						style: { paddingBottom: keyboardLayout ? `calc(0.75rem + ${keyboardLayout.bottom}px)` : void 0 },
+						children
+					}),
+					footer
+				]
+			})]
+		})
+	});
 }
 
 //#endregion
@@ -24652,9 +25272,27 @@ function MobileMenuDrawerContent(props) {
 //#endregion
 //#region src/views/components/context-menu/MobileContextMenu.tsx
 const MOBILE_CONTEXT_MENU_HOST_ID = "mobile-context-menu";
+const MOBILE_CONTEXT_MENU_POINTER_SIZE = 8;
+const MOBILE_CONTEXT_MENU_POINTER_EDGE_GAP = 12;
+function resolveMobileCaretMenuPlacement(anchorX, containerLeft, containerWidth, menuWidth) {
+	const relativeAnchorX = anchorX - containerLeft;
+	const menuLeft = Math.min(Math.max(relativeAnchorX - menuWidth / 2, 0), Math.max(containerWidth - menuWidth, 0));
+	return {
+		menuLeft,
+		pointerLeft: Math.min(Math.max(relativeAnchorX - menuLeft - MOBILE_CONTEXT_MENU_POINTER_SIZE / 2, MOBILE_CONTEXT_MENU_POINTER_EDGE_GAP), Math.max(menuWidth - MOBILE_CONTEXT_MENU_POINTER_EDGE_GAP - MOBILE_CONTEXT_MENU_POINTER_SIZE, MOBILE_CONTEXT_MENU_POINTER_EDGE_GAP))
+	};
+}
+function shouldUseFloatingMobileContextMenu(_menuType, context) {
+	return (context === null || context === void 0 ? void 0 : context.caretAnchor) === true;
+}
 function MobileContextMenu() {
 	const [visible, setVisible] = (0, react.useState)(false);
 	const [menuType, setMenuType] = (0, react.useState)("");
+	const [anchor, setAnchor] = (0, react.useState)({
+		x: 0,
+		y: 0
+	});
+	const floatingMenuRef = (0, react.useRef)(null);
 	const [menuContext, setMenuContext] = (0, react.useState)();
 	const visibleRef = (0, react.useRef)(visible);
 	const contextMenuHostService = (0, _wendellhu_redi_react_bindings.useDependency)(IContextMenuHostService);
@@ -24665,11 +25303,17 @@ function MobileContextMenu() {
 	const runtimeScopeService = (0, _wendellhu_redi_react_bindings.useDependency)(IUIRuntimeScopeService);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const { mountContainer } = (0, react.useContext)(_univerjs_design.ConfigContext);
+	const isCaretAnchor = (menuContext === null || menuContext === void 0 ? void 0 : menuContext.caretAnchor) === true;
+	const isFloatingContextMenu = shouldUseFloatingMobileContextMenu(menuType, menuContext);
 	visibleRef.current = visible;
-	const handleContextMenu = (0, react.useCallback)((_event, nextMenuType, context) => {
+	const handleContextMenu = (0, react.useCallback)((event, nextMenuType, context) => {
 		contextMenuHostService.activateMenu(MOBILE_CONTEXT_MENU_HOST_ID);
 		setMenuType(nextMenuType);
 		setMenuContext(context);
+		setAnchor({
+			x: event.clientX,
+			y: event.clientY
+		});
 		setVisible(true);
 	}, [contextMenuHostService]);
 	const handleClose = (0, react.useCallback)(() => {
@@ -24700,6 +25344,50 @@ function MobileContextMenu() {
 		handleClose,
 		handleContextMenu
 	]);
+	(0, react.useEffect)(() => {
+		if (!visible || !isFloatingContextMenu || !mountContainer) return;
+		const ownerDocument = mountContainer.ownerDocument;
+		const handleOutsidePointerDown = (event) => {
+			var _floatingMenuRef$curr;
+			if (!(event.target instanceof Node) || !((_floatingMenuRef$curr = floatingMenuRef.current) === null || _floatingMenuRef$curr === void 0 ? void 0 : _floatingMenuRef$curr.contains(event.target))) {
+				setVisible(false);
+				contextMenuHostService.deactivateMenu(MOBILE_CONTEXT_MENU_HOST_ID);
+			}
+		};
+		ownerDocument.addEventListener("pointerdown", handleOutsidePointerDown, true);
+		return () => ownerDocument.removeEventListener("pointerdown", handleOutsidePointerDown, true);
+	}, [
+		contextMenuHostService,
+		isFloatingContextMenu,
+		mountContainer,
+		visible
+	]);
+	(0, react.useLayoutEffect)(() => {
+		if (!visible || !isCaretAnchor) return;
+		const menu = floatingMenuRef.current;
+		const container = menu === null || menu === void 0 ? void 0 : menu.parentElement;
+		if (!menu || !container) return;
+		const updatePlacement = () => {
+			const containerRect = container.getBoundingClientRect();
+			const menuWidth = menu.getBoundingClientRect().width;
+			const { menuLeft, pointerLeft } = resolveMobileCaretMenuPlacement(anchor.x, containerRect.left, containerRect.width, menuWidth);
+			menu.style.left = `${menuLeft}px`;
+			menu.style.setProperty("--univer-mobile-context-menu-pointer-left", `${pointerLeft}px`);
+		};
+		updatePlacement();
+		const resizeObserver = new ResizeObserver(updatePlacement);
+		resizeObserver.observe(container);
+		resizeObserver.observe(menu);
+		return () => {
+			resizeObserver.disconnect();
+			menu.style.removeProperty("left");
+			menu.style.removeProperty("--univer-mobile-context-menu-pointer-left");
+		};
+	}, [
+		anchor.x,
+		isCaretAnchor,
+		visible
+	]);
 	const sheetTitle = (0, react.useMemo)(() => {
 		switch (menuType) {
 			case "contextMenu.rowHeader": return localeService.t("ui.row");
@@ -24725,6 +25413,40 @@ function MobileContextMenu() {
 		activeCommandService.executeCommand(commandId, commandParams);
 		handleClose();
 	};
+	if (isFloatingContextMenu) {
+		var _mountContainer$owner;
+		const viewportHeight = ((_mountContainer$owner = mountContainer.ownerDocument.defaultView) === null || _mountContainer$owner === void 0 ? void 0 : _mountContainer$owner.innerHeight) ?? 0;
+		const placeBelow = anchor.y < 72;
+		const top = placeBelow ? anchor.y + 12 : Math.min(anchor.y - 56, Math.max(8, viewportHeight - 56));
+		const pointerLeft = `clamp(20px, ${anchor.x - 8}px, calc(100% - 20px))`;
+		return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-pointer-events-none univer-fixed univer-inset-x-3 univer-z-[1080] univer-flex univer-justify-center",
+			style: { top },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: floatingMenuRef,
+				className: `
+                      univer-pointer-events-auto univer-min-w-0 univer-max-w-[560px]
+                      ${isCaretAnchor ? "univer-absolute univer-left-0 univer-top-0 univer-w-fit" : "univer-relative univer-flex-1"}
+                    `,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileMenu, {
+					menuType,
+					menuManagerService: activeMenuManagerService,
+					presentation: "context-bar",
+					onOptionSelect: handleOptionSelect
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"aria-hidden": "true",
+					className: placeBelow ? `
+                              univer-absolute -univer-top-1 univer-size-2 univer-rotate-45 univer-bg-gray-0
+                              dark:!univer-bg-gray-700
+                            ` : `
+                              univer-absolute -univer-bottom-1 univer-size-2 univer-rotate-45 univer-bg-gray-0
+                              dark:!univer-bg-gray-700
+                            `,
+					style: { left: isCaretAnchor ? "var(--univer-mobile-context-menu-pointer-left, calc(50% - 4px))" : pointerLeft }
+				})]
+			})
+		}), mountContainer);
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileMenuDrawer, {
 		visible: true,
 		title: sheetTitle,
@@ -24744,14 +25466,18 @@ function MobileSidebar() {
 	const layerRef = (0, react.useRef)(null);
 	const scrollRef = (0, react.useRef)(null);
 	const closeButtonRef = (0, react.useRef)(null);
-	const [drawerSnap, setDrawerSnap] = (0, react.useState)("expanded");
+	const [snapOverride, setSnapOverride] = (0, react.useState)(null);
 	const options = (0, react.useMemo)(() => renderSidebarOptions(sidebarOptions), [sidebarOptions]);
 	(0, react.useEffect)(() => {
-		if (options === null || options === void 0 ? void 0 : options.visible) {
+		if ((options === null || options === void 0 ? void 0 : options.visible) && options.layout !== "canvas") {
 			var _closeButtonRef$curre;
 			(_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 || _closeButtonRef$curre.focus();
 		}
-	}, [options === null || options === void 0 ? void 0 : options.visible]);
+	}, [
+		options === null || options === void 0 ? void 0 : options.visible,
+		options === null || options === void 0 ? void 0 : options.layout,
+		options === null || options === void 0 ? void 0 : options.id
+	]);
 	(0, react.useEffect)(() => {
 		const scrollElement = scrollRef.current;
 		sidebarService.setContainer(scrollElement ?? void 0);
@@ -24763,23 +25489,28 @@ function MobileSidebar() {
 		};
 	}, [options === null || options === void 0 ? void 0 : options.visible, sidebarService]);
 	if (!(options === null || options === void 0 ? void 0 : options.visible)) return null;
+	const defaultSnap = options.layout === "canvas" ? "compact" : "expanded";
 	const close = () => sidebarService.close(sidebarOptions === null || sidebarOptions === void 0 ? void 0 : sidebarOptions.id);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: layerRef,
-		className: "univer-fixed univer-inset-0 univer-z-[1100]",
+		className: "univer-pointer-events-none univer-fixed univer-inset-0 univer-z-[1100]",
 		"data-u-comp": "mobile-sidebar",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		children: [options.layout !== "canvas" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			"aria-label": localeService.t("ui.sidebar.close"),
-			className: "univer-absolute univer-inset-0 univer-m-0 univer-appearance-none univer-rounded-none univer-border-0 univer-bg-black/35 univer-p-0",
+			className: "univer-pointer-events-auto univer-absolute univer-inset-0 univer-m-0 univer-appearance-none univer-rounded-none univer-border-0 univer-bg-black/35 univer-p-0",
 			onClick: close
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileDrawer, {
 			layerRef,
+			layout: options.layout,
 			componentName: "mobile-sidebar-drawer",
-			snap: drawerSnap,
+			snap: snapOverride && snapOverride.id === options.id ? snapOverride.snap : defaultSnap,
 			expandLabel: localeService.t("ui.ribbon.more"),
 			collapseLabel: localeService.t("ui.ribbon.more"),
-			onSnapChange: setDrawerSnap,
+			onSnapChange: (snap) => setSnapOverride({
+				id: options.id,
+				snap
+			}),
 			onClose: close,
 			role: "dialog",
 			ariaLabel: localeService.t("ui.sidebar.panel"),
@@ -24830,8 +25561,17 @@ const MobileKeyboardInsetContext = (0, react.createContext)(0);
 
 //#endregion
 //#region src/views/mobile-workbench/MobileWorkbench.tsx
+const MOBILE_KEYBOARD_THRESHOLD = 80;
+function resolveMobileKeyboardInset(stableHeight, visibleBottom, baselineInset) {
+	const keyboardInset = Math.max(0, Math.round(stableHeight - visibleBottom) - baselineInset);
+	return keyboardInset >= MOBILE_KEYBOARD_THRESHOLD ? keyboardInset : 0;
+}
+function shouldUpdateMobileStableHeight(stableHeight, nextHeight, stableWidth, nextWidth, editing, keyboardVisible) {
+	return nextWidth !== stableWidth || !editing && !keyboardVisible && stableHeight - nextHeight < MOBILE_KEYBOARD_THRESHOLD;
+}
 function mountMobileWorkbench(injector, options, mountContainer, onRendered) {
-	(0, _univerjs_design.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)((0, _wendellhu_redi_react_bindings.connectInjector)(MobileWorkbench, injector), {
+	const ConnectedApp = (0, _wendellhu_redi_react_bindings.connectInjector)(MobileWorkbench, injector);
+	(0, _univerjs_design.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConnectedApp, {
 		...options,
 		mountContainer,
 		onRendered
@@ -24845,8 +25585,10 @@ function MobileWorkbench(props) {
 	const themeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService);
 	const themeSwitcherService = (0, _wendellhu_redi_react_bindings.useDependency)(ThemeSwitcherService);
 	const contentRef = (0, react.useRef)(null);
+	const canvasContainerRef = (0, react.useRef)(null);
 	const viewportRef = (0, react.useRef)(null);
 	const [keyboardInset, setKeyboardInset] = (0, react.useState)(0);
+	const [keyboardViewport, setKeyboardViewport] = (0, react.useState)(null);
 	const footerComponents = useComponentsOfPart("footer");
 	const headerComponents = useComponentsOfPart("header");
 	const headerMenuComponents = useComponentsOfPart("header-menu");
@@ -24890,36 +25632,97 @@ function MobileWorkbench(props) {
 		if (!viewportElement) return;
 		let stableHeight = Math.round(mountContainer.getBoundingClientRect().height || window.innerHeight);
 		let stableWidth = Math.round(mountContainer.getBoundingClientRect().width || window.innerWidth);
-		const updateKeyboardInset = () => {
-			const visibleBottom = visualViewport ? visualViewport.offsetTop + visualViewport.height : window.innerHeight;
-			setKeyboardInset(Math.max(0, Math.round(stableHeight - visibleBottom)));
+		let baselineInset = Math.max(0, stableHeight - Math.round(visualViewport ? visualViewport.offsetTop + visualViewport.height : window.innerHeight));
+		let keyboardVisible = false;
+		let initialViewportFrame = null;
+		let revealFrame = null;
+		let revealInnerFrame = null;
+		const isEditing = () => {
+			const activeElement = document.activeElement;
+			return activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement || (activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute("contenteditable")) === "true";
+		};
+		const cancelReveal = () => {
+			if (revealFrame != null) {
+				cancelAnimationFrame(revealFrame);
+				revealFrame = null;
+			}
+			if (revealInnerFrame != null) {
+				cancelAnimationFrame(revealInnerFrame);
+				revealInnerFrame = null;
+			}
+		};
+		const scheduleReveal = (viewport) => {
+			cancelReveal();
+			if (!viewport) return;
+			revealFrame = requestAnimationFrame(() => {
+				revealFrame = null;
+				revealInnerFrame = requestAnimationFrame(() => {
+					revealInnerFrame = null;
+					(0, _univerjs_design.revealFocusedElementInMobileViewport)(document.body, viewport);
+				});
+			});
+		};
+		const updateKeyboardViewport = () => {
+			const visibleTop = (visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.offsetTop) ?? 0;
+			const visibleHeight = (visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.height) ?? window.innerHeight;
+			const visibleBottom = visualViewport ? visibleTop + visibleHeight : window.innerHeight;
+			const viewportInset = Math.max(0, Math.round(stableHeight - visibleBottom));
+			const keyboardInset = resolveMobileKeyboardInset(stableHeight, visibleBottom, baselineInset);
+			if (!isEditing()) {
+				keyboardVisible = false;
+				if (keyboardInset === 0) baselineInset = viewportInset;
+			} else if (keyboardInset > 0) keyboardVisible = true;
+			else if (keyboardVisible && keyboardInset === 0) {
+				keyboardVisible = false;
+				baselineInset = viewportInset;
+			}
+			viewportElement.style.setProperty("--univer-mobile-keyboard-inset", `${keyboardVisible ? keyboardInset : 0}px`);
+			const nextKeyboardInset = keyboardVisible ? keyboardInset : 0;
+			const nextKeyboardViewport = keyboardVisible ? {
+				top: Math.round(visibleTop),
+				bottom: Math.round(visibleBottom),
+				height: Math.round(visibleHeight),
+				stableHeight
+			} : null;
+			setKeyboardInset(nextKeyboardInset);
+			setKeyboardViewport(nextKeyboardViewport);
+			scheduleReveal(nextKeyboardViewport);
 		};
 		const updateStableViewport = () => {
+			const height = Math.round(mountContainer.getBoundingClientRect().height || window.innerHeight);
 			const width = Math.round(mountContainer.getBoundingClientRect().width || window.innerWidth);
-			const activeElement = document.activeElement;
-			if (!(activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement || (activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute("contenteditable")) === "true") || width !== stableWidth) {
-				stableHeight = Math.round(mountContainer.getBoundingClientRect().height || window.innerHeight);
+			const editing = isEditing();
+			if (shouldUpdateMobileStableHeight(stableHeight, height, stableWidth, width, editing, keyboardVisible)) {
+				stableHeight = height;
 				stableWidth = width;
 				viewportElement.style.height = `${stableHeight}px`;
 			}
-			updateKeyboardInset();
+			updateKeyboardViewport();
 		};
 		viewportElement.style.height = `${stableHeight}px`;
-		updateKeyboardInset();
+		initialViewportFrame = requestAnimationFrame(() => {
+			initialViewportFrame = null;
+			updateKeyboardViewport();
+		});
 		window.addEventListener("resize", updateStableViewport);
-		visualViewport === null || visualViewport === void 0 || visualViewport.addEventListener("resize", updateKeyboardInset);
-		visualViewport === null || visualViewport === void 0 || visualViewport.addEventListener("scroll", updateKeyboardInset);
+		visualViewport === null || visualViewport === void 0 || visualViewport.addEventListener("resize", updateKeyboardViewport);
+		visualViewport === null || visualViewport === void 0 || visualViewport.addEventListener("scroll", updateKeyboardViewport);
+		document.addEventListener("focusin", updateKeyboardViewport);
 		return () => {
+			if (initialViewportFrame != null) cancelAnimationFrame(initialViewportFrame);
+			cancelReveal();
 			window.removeEventListener("resize", updateStableViewport);
-			visualViewport === null || visualViewport === void 0 || visualViewport.removeEventListener("resize", updateKeyboardInset);
-			visualViewport === null || visualViewport === void 0 || visualViewport.removeEventListener("scroll", updateKeyboardInset);
+			visualViewport === null || visualViewport === void 0 || visualViewport.removeEventListener("resize", updateKeyboardViewport);
+			visualViewport === null || visualViewport === void 0 || visualViewport.removeEventListener("scroll", updateKeyboardViewport);
+			document.removeEventListener("focusin", updateKeyboardViewport);
 		};
 	}, [mountContainer]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ConfigProvider, {
 		locale: locale === null || locale === void 0 ? void 0 : locale.design,
 		direction,
 		mountContainer: portalContainer,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileKeyboardInsetContext.Provider, {
+		mobileKeyboardViewport: keyboardViewport,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileCanvasLayoutProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileKeyboardInsetContext.Provider, {
 			value: keyboardInset,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MobileDrawerCoordinatorProvider, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: viewportRef,
@@ -24945,7 +25748,7 @@ function MobileWorkbench(props) {
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+							className: "univer-grid univer-min-h-0 univer-flex-1 univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
 									className: "univer-h-full",
@@ -24957,16 +25760,29 @@ function MobileWorkbench(props) {
 										className: "univer-w-screen",
 										children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header")
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-										ref: contentRef,
-										className: "univer-relative univer-overflow-hidden",
-										"data-range-selector": true,
-										onContextMenu: (e) => e.preventDefault(),
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
+										ref: canvasContainerRef,
+										className: "univer-relative univer-min-h-0 univer-overflow-hidden",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											ref: contentRef,
+											className: "univer-absolute univer-inset-0 univer-overflow-hidden",
+											"data-range-selector": true,
+											onContextMenu: (e) => e.preventDefault(),
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
+												components: contentComponents,
+												sharedProps: {
+													containerRef: canvasContainerRef,
+													canvasRef: contentRef
+												}
+											}, "content")
+										})
 									})]
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", { className: "univer-h-full" })
 							]
-						}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: footerComponents }, "footer") })]
+						}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+							className: "univer-shrink-0",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: footerComponents }, "footer")
+						})]
 					})]
 				}), (!ready || externalSkeletonVisible) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkbenchSkeleton, {
 					darkMode,
@@ -24982,7 +25798,7 @@ function MobileWorkbench(props) {
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSidebar, {})
 				]
 			})] })
-		})
+		}) })
 	});
 }
 
@@ -25532,7 +26348,8 @@ function MobileContextConfirm(props) {
 	});
 }
 function MobileConfirmPart() {
-	return (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IConfirmService).confirmOptions$, []).map((options) => {
+	const confirmService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IConfirmService);
+	return (0, _wendellhu_redi_react_bindings.useObservable)(confirmService.confirmOptions$, []).map((options) => {
 		const { children, title, ...restProps } = options;
 		const confirmProps = restProps;
 		for (const key of ["children", "title"]) {
@@ -25616,16 +26433,26 @@ function toMobileDialogOptions(options) {
 function MobileDialogPart() {
 	const dialogService = (0, _wendellhu_redi_react_bindings.useDependency)(IDialogService);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const { locale } = (0, react.useContext)(_univerjs_design.ConfigContext);
 	const dialogOptions = (0, _wendellhu_redi_react_bindings.useObservable)(dialogService.getDialogs$(), []);
 	const options = (0, react.useMemo)(() => {
 		const activeDialogs = dialogOptions.filter((item) => item.open !== false);
 		const active = activeDialogs[activeDialogs.length - 1];
 		return active ? toMobileDialogOptions(active) : null;
 	}, [dialogOptions]);
-	const [drawerSnap, setDrawerSnap] = (0, react.useState)("expanded");
+	const [snapOverride, setSnapOverride] = (0, react.useState)(null);
 	const layerRef = (0, react.useRef)(null);
 	const backdropPointerIdRef = (0, react.useRef)(null);
 	if (!options) return null;
+	const defaultSnap = options.layout === "canvas" ? "compact" : "expanded";
+	const footer = options.footer ?? (options.showOk || options.showCancel ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [options.showCancel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+		onClick: options.onCancel,
+		children: locale === null || locale === void 0 ? void 0 : locale.Confirm.cancel
+	}), options.showOk && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+		variant: "primary",
+		onClick: options.onOk,
+		children: locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm
+	})] }) : null);
 	const close = () => {
 		var _options$onClose, _options$onOpenChange;
 		dialogService.close(options.id);
@@ -25634,12 +26461,12 @@ function MobileDialogPart() {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: layerRef,
-		className: "univer-fixed univer-inset-0 univer-z-[1200]",
+		className: "univer-pointer-events-none univer-fixed univer-inset-0 univer-z-[1200]",
 		"data-u-comp": "mobile-dialog",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		children: [options.layout !== "canvas" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			"aria-label": localeService.t("ui.sidebar.close"),
-			className: "univer-absolute univer-inset-0 univer-m-0 univer-appearance-none univer-rounded-none univer-border-0 univer-bg-black/35 univer-p-0",
+			className: "univer-pointer-events-auto univer-absolute univer-inset-0 univer-m-0 univer-appearance-none univer-rounded-none univer-border-0 univer-bg-black/35 univer-p-0",
 			onPointerDown: options.maskClosable === false ? void 0 : (event) => {
 				backdropPointerIdRef.current = event.pointerId;
 			},
@@ -25653,11 +26480,15 @@ function MobileDialogPart() {
 			}
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileDrawer, {
 			layerRef,
+			layout: options.layout,
 			componentName: "mobile-dialog-drawer",
-			snap: drawerSnap,
+			snap: (snapOverride === null || snapOverride === void 0 ? void 0 : snapOverride.id) === options.id ? snapOverride.snap : defaultSnap,
 			expandLabel: localeService.t("ui.sidebar.resize"),
 			collapseLabel: localeService.t("ui.sidebar.resize"),
-			onSnapChange: setDrawerSnap,
+			onSnapChange: (snap) => setSnapOverride({
+				id: options.id,
+				snap
+			}),
 			onClose: close,
 			role: "dialog",
 			panelClassName: "\n                      univer-bg-gray-0 univer-text-gray-900\n                      dark:!univer-bg-gray-900 dark:!univer-text-gray-0\n                    ",
@@ -25675,9 +26506,9 @@ function MobileDialogPart() {
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, {})
 				})]
 			}),
-			footer: options.footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+			footer: footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
 				className: "univer-shrink-0 univer-border-0 univer-border-t univer-border-solid univer-border-gray-200 univer-p-4 dark:!univer-border-gray-700",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileActionRowGroup, { children: options.footer })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileActionRowGroup, { children: footer })
 			}) : void 0,
 			children: options.children
 		})]
@@ -25729,7 +26560,8 @@ function DialogItem(props) {
 	});
 }
 function DialogPart() {
-	const dialogOptions = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(IDialogService).getDialogs$(), []);
+	const dialogService = (0, _wendellhu_redi_react_bindings.useDependency)(IDialogService);
+	const dialogOptions = (0, _wendellhu_redi_react_bindings.useObservable)(dialogService.getDialogs$(), []);
 	const attrs = (0, react.useMemo)(() => dialogOptions.map((options) => {
 		const { children, title, footer, ...restProps } = options;
 		const dialogProps = restProps;
@@ -25859,7 +26691,8 @@ const IGalleryService = (0, _univerjs_core.createIdentifier)("univer.ui.gallery-
 * limitations under the License.
 */
 function GalleryPart() {
-	const gallery = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(IGalleryService).gallery$);
+	const galleryService = (0, _wendellhu_redi_react_bindings.useDependency)(IGalleryService);
+	const gallery = (0, _wendellhu_redi_react_bindings.useObservable)(galleryService.gallery$);
 	if (!gallery) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Gallery, { ...gallery });
 }
@@ -26208,7 +27041,8 @@ var DesktopLocalStorageService = class {
 */
 function MessageContainer() {
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
-	const darkMode = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService).darkMode$);
+	const themeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService);
+	const darkMode = (0, _wendellhu_redi_react_bindings.useObservable)(themeService.darkMode$);
 	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Messager, {
 		theme: darkMode ? "dark" : "light",
@@ -26236,7 +27070,8 @@ let DesktopMessageService = class DesktopMessageService extends _univerjs_core.D
 	show(options) {
 		const id = options.id ?? `message-${Date.now()}-${messageId}`;
 		messageId += 1;
-		(0, _univerjs_design.message)(Object.assign({}, options, { id }));
+		const op = Object.assign({}, options, { id });
+		(0, _univerjs_design.message)(op);
 		return (0, _univerjs_core.toDisposable)(() => (0, _univerjs_design.removeMessage)(id));
 	}
 	remove(id) {
@@ -26252,22 +27087,28 @@ DesktopMessageService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject
 //#region src/views/notification/Notification.tsx
 function Notification() {
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
-	const darkMode = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService).darkMode$);
+	const themeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService);
+	const darkMode = (0, _wendellhu_redi_react_bindings.useObservable)(themeService.darkMode$);
 	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Toaster, {
 		theme: darkMode ? "dark" : "light",
 		dir: direction
 	});
 }
-const notification = { show: (options) => {
-	const { type = "message", title, content, duration, closable = true, position = "top-right" } = options;
-	_univerjs_design.toast[type](title, {
-		position,
-		description: content,
-		duration,
-		closeButton: closable
-	});
-} };
+const notification = {
+	show: (options) => {
+		const { type = "message", title, content, duration, closable = true, dismissible = true, position = "top-right", action } = options;
+		return _univerjs_design.toast[type](title, {
+			position,
+			description: content,
+			duration,
+			closeButton: closable,
+			dismissible,
+			action
+		});
+	},
+	dismiss: (id) => _univerjs_design.toast.dismiss(id)
+};
 
 //#endregion
 //#region src/services/notification/desktop-notification.service.ts
@@ -26279,8 +27120,8 @@ let DesktopNotificationService = class DesktopNotificationService extends _unive
 		this._initUIPart();
 	}
 	show(params) {
-		notification.show(params);
-		return (0, _univerjs_core.toDisposable)(() => {});
+		const notificationID = notification.show(params);
+		return (0, _univerjs_core.toDisposable)(() => notification.dismiss(notificationID));
 	}
 	_initUIPart() {
 		this.disposeWithMe(this._uiPartsService.registerComponent("global", () => (0, _wendellhu_redi_react_bindings.connectInjector)(Notification, this._injector)));
@@ -26513,10 +27354,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends _univerjs_core.Plu
 				useClass: DesktopSidebarService,
 				lazy: true
 			}],
-			[IMessageService, {
-				useClass: DesktopMessageService,
-				lazy: true
-			}],
+			[IMessageService, { useClass: DesktopMessageService }],
 			[_univerjs_core.ILocalStorageService, {
 				useClass: DesktopLocalStorageService,
 				lazy: true
@@ -26531,6 +27369,8 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends _univerjs_core.Plu
 				useFactory: (injector) => injector.createInstance(MobileUIController, this._config),
 				deps: [_univerjs_core.Injector]
 			}],
+			[FormatPainterSessionService],
+			[FormatPainterController],
 			[SharedController],
 			[ErrorController]
 		], this._config.override));
@@ -26541,7 +27381,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends _univerjs_core.Plu
 		]);
 	}
 	onReady() {
-		(0, _univerjs_core.touchDependencies)(this._injector, [[SharedController]]);
+		(0, _univerjs_core.touchDependencies)(this._injector, [[SharedController], [FormatPainterController]]);
 	}
 };
 _defineProperty(UniverMobileUIPlugin, "pluginName", "UNIVER_MOBILE_UI_PLUGIN");
@@ -27274,8 +28114,10 @@ function ObjectPermissionDialog({ target, name, commandId, actions = DEFAULT_ACT
 	(0, react.useEffect)(() => {
 		const subscription = permissions.unitChanges$.subscribe((changedUnitId) => {
 			if (changedUnitId !== unitId) return;
-			if (!saving) if (dirty) setConflict(true);
-			else setAttempt((value) => value + 1);
+			if (!saving) {
+				if (dirty) setConflict(true);
+				else setAttempt((value) => value + 1);
+			}
 		});
 		return () => subscription.unsubscribe();
 	}, [
@@ -27598,6 +28440,8 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 	}
 	_registerIcons() {
 		this.disposeWithMe(this._iconManager.register({
+			BrushIcon: _univerjs_icons.BrushIcon,
+			ClearFormatDoubleIcon: _univerjs_icons.ClearFormatDoubleIcon,
 			ExpandIcon: _univerjs_icons.ExpandIcon,
 			IncreaseIcon: _univerjs_icons.IncreaseIcon,
 			KeyboardIcon: _univerjs_icons.KeyboardIcon,
@@ -27682,7 +28526,8 @@ const ContextConfirm = (props) => {
 	});
 };
 function ConfirmPart() {
-	const props = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IConfirmService).confirmOptions$, []).map((options) => {
+	const confirmService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IConfirmService);
+	const props = (0, _wendellhu_redi_react_bindings.useObservable)(confirmService.confirmOptions$, []).map((options) => {
 		const { children, title, ...restProps } = options;
 		const confirmProps = restProps;
 		for (const key of ["children", "title"]) {
@@ -27812,10 +28657,7 @@ let UniverUIPlugin = class UniverUIPlugin extends _univerjs_core.Plugin {
 				useClass: DesktopSidebarService,
 				lazy: true
 			}],
-			[IMessageService, {
-				useClass: DesktopMessageService,
-				lazy: true
-			}],
+			[IMessageService, { useClass: DesktopMessageService }],
 			[_univerjs_core.ILocalStorageService, {
 				useClass: DesktopLocalStorageService,
 				lazy: true
@@ -27830,6 +28672,8 @@ let UniverUIPlugin = class UniverUIPlugin extends _univerjs_core.Plugin {
 				useFactory: (injector) => injector.createInstance(DesktopUIController, this._config),
 				deps: [_univerjs_core.Injector]
 			}],
+			[FormatPainterSessionService],
+			[FormatPainterController],
 			[SharedController],
 			[ErrorController],
 			[FeatureSearchController],
@@ -27842,7 +28686,11 @@ let UniverUIPlugin = class UniverUIPlugin extends _univerjs_core.Plugin {
 		]);
 	}
 	onReady() {
-		(0, _univerjs_core.touchDependencies)(this._injector, [[SharedController], [FeatureSearchController]]);
+		(0, _univerjs_core.touchDependencies)(this._injector, [
+			[SharedController],
+			[FormatPainterController],
+			[FeatureSearchController]
+		]);
 	}
 	onSteady() {
 		(0, _univerjs_core.touchDependencies)(this._injector, [[ShortcutPanelController]]);
@@ -28003,11 +28851,13 @@ function handleStringToStyle($dom, cssStyle = "") {
 		const s = originStr.toLowerCase();
 		const key = textTrim(s.substr(0, s.indexOf(":")));
 		const value = textTrim(s.substr(s.indexOf(":") + 1));
-		if (key === "font-weight") if (value === "bold" || value === "700") styleList.bl = 1;
-		else styleList.bl = 0;
-		else if (key === "font-style") if (value === "italic") styleList.it = 1;
-		else styleList.it = 0;
-		else if (key === "font-family") {
+		if (key === "font-weight") {
+			if (value === "bold" || value === "700") styleList.bl = 1;
+			else styleList.bl = 0;
+		} else if (key === "font-style") {
+			if (value === "italic") styleList.it = 1;
+			else styleList.it = 0;
+		} else if (key === "font-family") {
 			const fontFamily = extractFontFamily(textTrim(originStr));
 			styleList.ff = fontFamily;
 		} else if (key === "font-size") {
@@ -28091,12 +28941,14 @@ function handleStringToStyle($dom, cssStyle = "") {
 			}
 		}
 		if (key === "univer-underline") styleList.ul = { s: 1 };
-		if (key === "vertical-align") if (value === "sub") styleList.va = _univerjs_core.BaselineOffset.SUBSCRIPT;
-		else if (value === "super") styleList.va = _univerjs_core.BaselineOffset.SUPERSCRIPT;
-		else if (value === "top") styleList.vt = 1;
-		else if (value === "middle") styleList.vt = 2;
-		else if (value === "bottom") styleList.vt = 3;
-		else styleList.va = _univerjs_core.BaselineOffset.NORMAL;
+		if (key === "vertical-align") {
+			if (value === "sub") styleList.va = _univerjs_core.BaselineOffset.SUBSCRIPT;
+			else if (value === "super") styleList.va = _univerjs_core.BaselineOffset.SUPERSCRIPT;
+			else if (value === "top") styleList.vt = 1;
+			else if (value === "middle") styleList.vt = 2;
+			else if (value === "bottom") styleList.vt = 3;
+			else styleList.va = _univerjs_core.BaselineOffset.NORMAL;
+		}
 		if (key === "transform") {
 			const values = value.split(")");
 			const index = values.findIndex((item) => item.includes("rotate"));
@@ -28112,11 +28964,13 @@ function handleStringToStyle($dom, cssStyle = "") {
 				};
 			}
 		}
-		if (key === "text-align") if (value === "left") styleList.ht = 1;
-		else if (value === "center") styleList.ht = 2;
-		else if (value === "right") styleList.ht = 3;
-		else if (value === "justify") styleList.ht = 4;
-		else styleList.ht = 0;
+		if (key === "text-align") {
+			if (value === "left") styleList.ht = 1;
+			else if (value === "center") styleList.ht = 2;
+			else if (value === "right") styleList.ht = 3;
+			else if (value === "justify") styleList.ht = 4;
+			else styleList.ht = 0;
+		}
 		if (styleList.tb !== 1) {
 			if (key === "overflow-wrap" || key === "word-wrap") {
 				if (value === "break-word") styleList.tb = 3;
@@ -28389,20 +29243,22 @@ function handleTableMergeData(data, selection) {
 		minC + copyC - 1;
 	}
 	const mergeData = [];
-	for (let i = 0; i < data.length; i++) for (let j = 0; j < data[i].length; j++) if (data[i][j] && typeof data[i][j] === "object" && "mc" in data[i][j]) if (data[i][j].mc) {
-		const mc = data[i][j].mc;
-		const startRow = mc.r + minH;
-		const endRow = startRow + mc.rs;
-		const startColumn = mc.c + minC;
-		const endColumn = startColumn + mc.cs;
-		mergeData.push({
-			startRow,
-			endRow,
-			startColumn,
-			endColumn
-		});
-		delete data[i][j].mc;
-	} else data[i][j] = null;
+	for (let i = 0; i < data.length; i++) for (let j = 0; j < data[i].length; j++) if (data[i][j] && typeof data[i][j] === "object" && "mc" in data[i][j]) {
+		if (data[i][j].mc) {
+			const mc = data[i][j].mc;
+			const startRow = mc.r + minH;
+			const endRow = startRow + mc.rs;
+			const startColumn = mc.c + minC;
+			const endColumn = startColumn + mc.cs;
+			mergeData.push({
+				startRow,
+				endRow,
+				startColumn,
+				endColumn
+			});
+			delete data[i][j].mc;
+		} else data[i][j] = null;
+	}
 	return {
 		data,
 		mergeData
@@ -28477,7 +29333,8 @@ function getStyles(styleText) {
 		if (!style[i]) continue;
 		let attr = style[i].split("{")[0].trim();
 		if (attr.includes(".")) attr = attr.slice(1);
-		output[attr] = style[i].split("{")[1].trim();
+		const value = style[i].split("{")[1].trim();
+		output[attr] = value;
 	}
 	return output;
 }
@@ -28492,6 +29349,221 @@ function extractFontFamily(styleStr) {
 	return matches ? (matches[1] || matches[2] || matches[3]).trim() : null;
 }
 
+//#endregion
+//#region src/utils/mobile-canvas-gesture.ts
+/** Routes touch browsing separately from the canvas's existing object manipulation. */
+var MobileCanvasGesture = class extends _univerjs_core.Disposable {
+	constructor(_canvas, _options) {
+		super();
+		this._canvas = _canvas;
+		this._options = _options;
+		_defineProperty(this, "_points", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_objectPointerId", null);
+		_defineProperty(this, "_cancellingObject", false);
+		_defineProperty(this, "_startPoint", null);
+		_defineProperty(this, "_moved", false);
+		_defineProperty(this, "_pinching", false);
+		_defineProperty(this, "_suppressClick", false);
+		_defineProperty(this, "_lastMoveTime", 0);
+		_defineProperty(this, "_velocity", {
+			x: 0,
+			y: 0
+		});
+		_defineProperty(this, "_frame", null);
+		const touchAction = _canvas.style.touchAction;
+		_canvas.style.touchAction = "none";
+		const down = (event) => this._onDown(event);
+		const move = (event) => this._onMove(event);
+		const up = (event) => this._onEnd(event);
+		const blur = () => this._reset();
+		const click = (event) => {
+			if (event.target === _canvas && this._suppressClick) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		};
+		window.addEventListener("pointerdown", down, true);
+		window.addEventListener("pointermove", move, true);
+		window.addEventListener("pointerup", up, true);
+		window.addEventListener("pointercancel", up, true);
+		window.addEventListener("click", click, true);
+		window.addEventListener("blur", blur);
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(() => {
+			this._reset();
+			_canvas.style.touchAction = touchAction;
+			window.removeEventListener("pointerdown", down, true);
+			window.removeEventListener("pointermove", move, true);
+			window.removeEventListener("pointerup", up, true);
+			window.removeEventListener("pointercancel", up, true);
+			window.removeEventListener("click", click, true);
+			window.removeEventListener("blur", blur);
+		}));
+	}
+	_point(event) {
+		const rect = this._canvas.getBoundingClientRect();
+		return {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+	}
+	_consume(event) {
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	}
+	_onDown(event) {
+		this._stopInertia();
+		if (event.target !== this._canvas || event.pointerType !== "touch") {
+			this._suppressClick = false;
+			return;
+		}
+		const point = this._point(event);
+		if (this._points.size === 0) {
+			this._suppressClick = false;
+			const action = this._options.start(point);
+			if (action === "ignore") return;
+			this._startPoint = point;
+			this._moved = false;
+			this._lastMoveTime = event.timeStamp;
+			this._points.set(event.pointerId, point);
+			if (action === "object") {
+				this._objectPointerId = event.pointerId;
+				return;
+			}
+		} else {
+			this._points.set(event.pointerId, point);
+			if (!this._pinching) {
+				this._options.finishObjectTransform();
+				this._cancelObjectPointer();
+				this._pinching = true;
+				this._moved = true;
+			}
+		}
+		this._suppressClick = true;
+		this._consume(event);
+	}
+	_onMove(event) {
+		const previous = this._points.get(event.pointerId);
+		if (!previous) return;
+		const point = this._point(event);
+		const previousPoints = Array.from(this._points.values());
+		this._points.set(event.pointerId, point);
+		if (this._pinching) {
+			const points = Array.from(this._points.values());
+			if (points.length >= 2) {
+				const [a, b] = previousPoints;
+				const [c, d] = points;
+				const distance = Math.hypot(a.x - b.x, a.y - b.y);
+				if (distance > 0) this._options.pinch(Math.hypot(c.x - d.x, c.y - d.y) / distance, {
+					x: (a.x + b.x) / 2,
+					y: (a.y + b.y) / 2
+				}, {
+					x: (c.x + d.x) / 2,
+					y: (c.y + d.y) / 2
+				});
+			}
+			this._consume(event);
+			return;
+		}
+		if (this._objectPointerId !== null) return;
+		if (!this._moved && this._startPoint && Math.hypot(point.x - this._startPoint.x, point.y - this._startPoint.y) >= 8) {
+			this._moved = true;
+			this._options.pan({
+				x: point.x - this._startPoint.x,
+				y: point.y - this._startPoint.y
+			});
+		} else if (this._moved) this._options.pan({
+			x: point.x - previous.x,
+			y: point.y - previous.y
+		});
+		const elapsed = Math.max(1, event.timeStamp - this._lastMoveTime);
+		this._velocity = {
+			x: (point.x - previous.x) / elapsed,
+			y: (point.y - previous.y) / elapsed
+		};
+		this._lastMoveTime = event.timeStamp;
+		this._consume(event);
+	}
+	_onEnd(event) {
+		if (this._cancellingObject) return;
+		if (!this._points.has(event.pointerId)) return;
+		this._points.delete(event.pointerId);
+		const objectPointer = this._objectPointerId === event.pointerId;
+		if (objectPointer) this._objectPointerId = null;
+		else this._consume(event);
+		if (this._points.size !== 0) return;
+		if (this._pinching) this._options.endPinch();
+		else if (!objectPointer && event.type !== "pointercancel") {
+			if (!this._moved) this._options.tap(this._point(event));
+			else if (event.timeStamp - this._lastMoveTime < 80) this._startInertia();
+		}
+		this._pinching = false;
+		this._startPoint = null;
+	}
+	_startInertia() {
+		let velocity = {
+			x: Math.max(-3, Math.min(3, this._velocity.x)),
+			y: Math.max(-3, Math.min(3, this._velocity.y))
+		};
+		let previousTime = performance.now();
+		const frame = (time) => {
+			const elapsed = Math.min(32, time - previousTime);
+			previousTime = time;
+			const decay = Math.exp(-.005 * elapsed);
+			this._options.pan({
+				x: velocity.x * (1 - decay) / .005,
+				y: velocity.y * (1 - decay) / .005
+			});
+			velocity = {
+				x: velocity.x * decay,
+				y: velocity.y * decay
+			};
+			this._frame = Math.hypot(velocity.x, velocity.y) > .02 ? requestAnimationFrame(frame) : null;
+		};
+		if (Math.hypot(velocity.x, velocity.y) > .04) this._frame = requestAnimationFrame(frame);
+	}
+	_stopInertia() {
+		if (this._frame !== null) {
+			cancelAnimationFrame(this._frame);
+			this._frame = null;
+		}
+		this._velocity = {
+			x: 0,
+			y: 0
+		};
+	}
+	_reset() {
+		this._stopInertia();
+		if (this._objectPointerId !== null) {
+			this._options.finishObjectTransform();
+			this._cancelObjectPointer();
+		}
+		if (this._pinching) this._options.endPinch();
+		this._points.clear();
+		this._objectPointerId = null;
+		this._pinching = false;
+		this._startPoint = null;
+	}
+	_cancelObjectPointer() {
+		const pointerId = this._objectPointerId;
+		const point = pointerId === null ? null : this._points.get(pointerId);
+		if (pointerId === null || !point) return;
+		const rect = this._canvas.getBoundingClientRect();
+		this._objectPointerId = null;
+		this._cancellingObject = true;
+		try {
+			this._canvas.dispatchEvent(new PointerEvent("pointercancel", {
+				bubbles: true,
+				pointerId,
+				pointerType: "touch",
+				clientX: rect.left + point.x,
+				clientY: rect.top + point.y
+			}));
+		} finally {
+			this._cancellingObject = false;
+		}
+	}
+};
+
 //#endregion
 //#region src/views/components/dom/Print.tsx
 const PrintFloatDomSingle = (0, react.memo)((props) => {
@@ -28595,6 +29667,104 @@ function HoverTrack(props) {
 	});
 }
 
+//#endregion
+//#region src/views/components/mobile-zoom-indicator/mobile-zoom-indicator.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.
+*/
+var MobileZoomIndicator = class extends _univerjs_core.Disposable {
+	constructor(_canvasElement) {
+		super();
+		this._canvasElement = _canvasElement;
+		_defineProperty(this, "_element", void 0);
+		_defineProperty(this, "_hideTimer", null);
+		const element = document.createElement("div");
+		element.className = [
+			"univer-absolute",
+			"univer-left-1/2",
+			"univer-top-1/2",
+			"-univer-translate-x-1/2",
+			"-univer-translate-y-1/2",
+			"univer-select-none",
+			"univer-rounded-lg",
+			"univer-bg-gray-900",
+			"univer-px-6",
+			"univer-py-3",
+			"univer-text-2xl",
+			"univer-font-bold",
+			"univer-text-gray-0",
+			"univer-shadow-lg"
+		].join(" ");
+		element.style.opacity = "0";
+		element.style.pointerEvents = "none";
+		element.style.transition = "opacity 150ms ease-in-out";
+		element.style.zIndex = "10000";
+		this._element = element;
+		this._mount();
+	}
+	show(percentage) {
+		this._mount();
+		if (this._hideTimer != null) {
+			window.clearTimeout(this._hideTimer);
+			this._hideTimer = null;
+		}
+		this._element.textContent = `${percentage}%`;
+		this._element.style.opacity = "1";
+	}
+	hide() {
+		if (this._hideTimer != null) window.clearTimeout(this._hideTimer);
+		this._hideTimer = window.setTimeout(() => {
+			this._hideTimer = null;
+			this._element.style.opacity = "0";
+		}, 300);
+	}
+	dispose() {
+		if (this._hideTimer != null) {
+			window.clearTimeout(this._hideTimer);
+			this._hideTimer = null;
+		}
+		this._element.remove();
+		super.dispose();
+	}
+	_mount() {
+		const container = this._canvasElement.parentElement;
+		if (container == null || this._element.parentElement === container) return;
+		if (window.getComputedStyle(container).position === "static") container.style.position = "relative";
+		container.appendChild(this._element);
+	}
+};
+
+//#endregion
+//#region src/views/font-family/MobileFontFamilyDropdown.tsx
+function MobileFontFamilyDropdown(props) {
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const disabled = (0, _wendellhu_redi_react_bindings.useObservable)(props.disabled$);
+	const { fonts } = useFontList();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileSelect, {
+		"aria-label": props.ariaLabel,
+		className: (0, _univerjs_design.clsx)("univer-h-12 univer-w-full univer-min-w-0 univer-text-base", props.className),
+		value: props.value,
+		disabled: !!(props.disabled || disabled),
+		options: fonts.map((font) => ({
+			value: font.value,
+			label: localeService.t(font.label)
+		})),
+		onChange: props.onChange
+	});
+}
+
 //#endregion
 //#region src/views/progress-bar/ProgressBar.tsx
 /**
@@ -28616,19 +29786,20 @@ function ProgressBar(props) {
 	const { barColor, progress, onTerminate, onClearProgress } = props;
 	const { count, done, label = "" } = progress;
 	const progressBarInnerRef = (0, react.useRef)(null);
-	const [visible, setVisible] = (0, react.useState)(false);
+	const [completedProgress, setCompletedProgress] = (0, react.useState)();
+	const visible = count > 0 && completedProgress !== progress;
 	(0, react.useEffect)(() => {
 		const progressBarInner = progressBarInnerRef.current;
+		let animationFrame;
 		if (count === 0 && done === 0) {
-			setVisible(false);
 			progressBarInner.style.width = "0%";
 			return;
-		} else if (count > 0) {
-			setVisible(true);
+		}
+		if (count > 0) {
 			const width = Math.floor(done / count * 100);
-			if (done === count) requestAnimationFrame(() => {
+			if (done === count) animationFrame = requestAnimationFrame(() => {
 				progressBarInner.style.width = `${width - 1}%`;
-				requestAnimationFrame(() => {
+				animationFrame = requestAnimationFrame(() => {
 					progressBarInner.style.width = `${width}%`;
 				});
 			});
@@ -28636,15 +29807,21 @@ function ProgressBar(props) {
 		}
 		const handleTransitionEnd = () => {
 			if (done === count) {
-				setVisible(false);
+				setCompletedProgress(progress);
 				onClearProgress && onClearProgress();
 			}
 		};
 		progressBarInner.addEventListener("transitionend", handleTransitionEnd);
 		return () => {
+			if (animationFrame !== void 0) cancelAnimationFrame(animationFrame);
 			progressBarInner.removeEventListener("transitionend", handleTransitionEnd);
 		};
-	}, [count, done]);
+	}, [
+		count,
+		done,
+		progress,
+		onClearProgress
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, _univerjs_design.clsx)("univer-mx-2 univer-flex univer-items-center univer-gap-2", {
 			"univer-flex": visible,
@@ -28803,6 +29980,7 @@ Object.defineProperty(exports, 'FontService', {
   }
 });
 exports.FontSize = FontSize;
+exports.FormatPainterSessionService = FormatPainterSessionService;
 exports.HEADING_ITEM_COMPONENT = HEADING_ITEM_COMPONENT;
 exports.HEADING_LIST = HEADING_LIST;
 exports.HOVER_TRACK_HOST_CLASS_NAME = HOVER_TRACK_HOST_CLASS_NAME;
@@ -28850,6 +30028,7 @@ Object.defineProperty(exports, 'MenuManagerService', {
   }
 });
 exports.MetaKeys = MetaKeys;
+exports.MobileCanvasGesture = MobileCanvasGesture;
 exports.MobileContextMenu = MobileContextMenu;
 Object.defineProperty(exports, 'MobileDialogService', {
   enumerable: true,
@@ -28858,8 +30037,10 @@ Object.defineProperty(exports, 'MobileDialogService', {
   }
 });
 exports.MobileDrawer = MobileDrawer;
+exports.MobileFontFamilyDropdown = MobileFontFamilyDropdown;
 exports.MobileKeyboardInsetContext = MobileKeyboardInsetContext;
 exports.MobileMenu = MobileMenu;
+exports.MobileZoomIndicator = MobileZoomIndicator;
 exports.MockMessageService = MockMessageService;
 exports.NativeTextEditorShortcutBehavior = NativeTextEditorShortcutBehavior;
 exports.ObjectPermissionButton = ObjectPermissionButton;
@@ -28969,6 +30150,7 @@ Object.defineProperty(exports, 'WorkbenchService', {
 });
 exports.ZIndexManager = ZIndexManager;
 exports.ZoomInput = ZoomInput;
+exports.bindFormatPainterCanvas = bindFormatPainterCanvas;
 Object.defineProperty(exports, 'connectDependencies', {
   enumerable: true,
   get: function () {
@@ -28989,6 +30171,7 @@ exports.getEmojiLocaleData = getEmojiLocaleData;
 exports.getHeaderFooterMenuHiddenObservable = getHeaderFooterMenuHiddenObservable;
 exports.getLocalizedEmojiTitle = getLocalizedEmojiTitle;
 exports.getMenuHiddenObservable = getMenuHiddenObservable;
+exports.getMobileCanvasPanDelta = getMobileCanvasPanDelta;
 exports.getRandomEmoji = getRandomEmoji;
 exports.handelExcelToJson = handelExcelToJson;
 exports.handelTableToJson = handelTableToJson;
@@ -29032,6 +30215,8 @@ Object.defineProperty(exports, 'useInjector', {
     return _wendellhu_redi_react_bindings.useInjector;
   }
 });
+exports.useMobileCanvasPanel = useMobileCanvasPanel;
+exports.useMobileCanvasViewport = useMobileCanvasViewport;
 Object.defineProperty(exports, 'useObservable', {
   enumerable: true,
   get: function () {