@univerjs/ui 1.0.0-rc.0 → 1.0.1

package/lib/es/index.js

@@ -1,13 +1,13 @@
 import { BaselineOffset, BorderStyleTypes, ColorKit, CommandType, DependentOn, Disposable, DocumentDataModel, DocumentFlavor, EDITOR_ACTIVATED, ErrorService, FOCUSING_FX_BAR_EDITOR, FOCUSING_SHEET, FOCUSING_UNIVER_EDITOR, IAuthzIoService, ICommandService, IConfigService, IConfirmService, IContextService, ILocalStorageService, ILogService, IPermissionService, IUndoRedoService, IUniverInstanceService, Inject, Injector, LifecycleService, LifecycleStages, LifecycleUnreachableError, LocaleService, NAMED_STYLE_MAP, NamedStyleType, ObjectPermissionService, Optional, Plugin, Quantity, RedoCommand, SHEET_EDITOR_UNITS, ThemeService, Tools, UndoCommand, UniverInstanceType, UserManagerService, Workbook, createIdentifier, dedupeBy, generateRandomId, getBorderStyleType, isInternalEditorID, isRealNum, merge, mergeOverrideWithDependencies, registerDependencies, remove, throttle, toDisposable, touchDependencies } from "@univerjs/core";
 import { BehaviorSubject, EMPTY, Observable, ReplaySubject, Subject, Subscription, animationFrameScheduler, combineLatest, debounceTime, distinctUntilChanged, filter, first, fromEvent, isObservable, map, merge as merge$1, of, scan, startWith, switchMap, throttleTime } from "rxjs";
 import { Fragment, cloneElement, createContext, createElement, forwardRef, memo, useCallback, useContext, useDeferredValue, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Avatar, Button, Checkbox, ColorPicker, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, ConfigContext, ConfigProvider, Confirm, Dialog, Dropdown, DropdownMenu, FormLayout, Gallery, HoverCard, Input, InputNumber, KBD, MessageType, Messager, MobileActionRowGroup, MobileColorPicker, MobileConfirm, MobileDropdown, MobileDropdownMenu, Popup, Radio, RadioGroup, StateIconButton, Toaster, Tooltip, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderRightClassName, borderTopClassName, clsx, cva, divideXClassName, divideYClassName, isBrowser, message, removeMessage, render, resetButtonClassName, scrollbarClassName, toast, unmount } from "@univerjs/design";
+import { Avatar, Button, Checkbox, ColorPicker, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, ConfigContext, ConfigProvider, Confirm, Dialog, Dropdown, DropdownMenu, FormLayout, Gallery, HoverCard, Input, InputNumber, KBD, MessageType, Messager, MobileActionRowGroup, MobileColorPicker, MobileConfirm, MobileDropdown, MobileDropdownMenu, MobileOverlayContext, MobileSelect, Popup, Radio, RadioGroup, StateIconButton, Toaster, Tooltip, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderRightClassName, borderTopClassName, clsx, cva, divideXClassName, divideYClassName, isBrowser, message, removeMessage, render, resetButtonClassName, revealFocusedElementInMobileViewport, scrollbarClassName, toast, unmount, useMobileKeyboardViewportLayout } from "@univerjs/design";
 import { IRenderManagerService, UniverRenderEnginePlugin, ptToPx } from "@univerjs/engine-render";
 import { distinctUntilChanged as distinctUntilChanged$1, map as map$1, scan as scan$1, startWith as startWith$1, switchMap as switchMap$1 } from "rxjs/operators";
 import { RediConsumer, RediContext, RediProvider, WithDependency, connectDependencies, connectInjector, connectInjector as connectInjector$1, useDependency, useDependency as useDependency$1, useInjector, useObservable, useObservable as useObservable$1, useUpdateBinder } from "@wendellhu/redi/react-bindings";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
-import { ActivityIcon, CheckMarkIcon, CloseIcon, DatabaseIcon, ExpandIcon, EyeIcon, FeatureSearchIcon, FoodsIcon, FunctionIcon, HomeIcon, IncreaseIcon, InfoIcon, InsertIcon, KeyboardIcon, MoreDownIcon, MoreHorizontalIcon, MoreLeftIcon, MoreRightIcon, MoreVerticalIcon, NatureIcon, ObjectsIcon, PeopleIcon, PlacesIcon, ProtectIcon, RandomIcon, RecentIcon, RedoIcon, ReduceIcon, SearchIcon, ShortcutIcon, ShrinkIcon, SymbolsIcon, UndoIcon } from "@univerjs/icons";
+import { ActivityIcon, BrushIcon, CheckMarkIcon, ClearFormatDoubleIcon, CloseIcon, DatabaseIcon, ExpandIcon, EyeIcon, FeatureSearchIcon, FoodsIcon, FunctionIcon, HomeIcon, IncreaseIcon, InfoIcon, InsertIcon, KeyboardIcon, MoreDownIcon, MoreHorizontalIcon, MoreLeftIcon, MoreRightIcon, MoreVerticalIcon, NatureIcon, ObjectsIcon, PeopleIcon, PlacesIcon, ProtectIcon, RandomIcon, RecentIcon, RedoIcon, ReduceIcon, SearchIcon, ShortcutIcon, ShrinkIcon, SymbolsIcon, UndoIcon } from "@univerjs/icons";
 import { UnitAction, UnitObject, UnitRole } from "@univerjs/protocol";
 
 //#region src/utils/embed-boundary.ts
@@ -55,7 +55,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) {
@@ -66,7 +66,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];
@@ -79,14 +79,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,
@@ -97,7 +97,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);
@@ -105,7 +105,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);
@@ -523,10 +523,12 @@ function mergeMenuConfigs(baseConfig, additionalConfig) {
 	return baseConfig;
 }
 function updateReactiveProperty(baseConfig, key, value) {
-	if (value !== void 0) if (baseConfig[key]) baseConfig[key] = baseConfig[key].pipe(switchMap(() => new BehaviorSubject(value)));
-	else baseConfig[key] = new Observable((subscriber) => {
-		subscriber.next(value);
-	});
+	if (value !== void 0) {
+		if (baseConfig[key]) baseConfig[key] = baseConfig[key].pipe(switchMap(() => new BehaviorSubject(value)));
+		else baseConfig[key] = new Observable((subscriber) => {
+			subscriber.next(value);
+		});
+	}
 }
 
 //#endregion
@@ -672,21 +674,6 @@ const IMessageService = 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 Disposable {
@@ -1103,7 +1090,7 @@ let ShortcutService = class ShortcutService extends 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;
@@ -1477,6 +1464,7 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 	}
 	dispose() {
 		this.menuChanged$.complete();
+		super.dispose();
 	}
 	/**
 	* Merge source menu to target menu recursively
@@ -1496,46 +1484,48 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 		this._menu = 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);
@@ -1831,7 +1821,7 @@ function FeatureSearch() {
 	const dialogService = useDependency(IDialogService);
 	const layoutService = useDependency(ILayoutService);
 	const ribbonService = useDependency(IRibbonService);
-	const items = useObservable(useMemo(() => {
+	const items$ = useMemo(() => {
 		function getItemTitle(item) {
 			const titleKey = item.title ?? item.tooltip ?? item.description;
 			return titleKey ? localeService.t(titleKey) : "";
@@ -1866,15 +1856,17 @@ function FeatureSearch() {
 			const hasOptions = item.type === 1 || item.type === 2;
 			const selections = hasOptions ? item.selections : void 0;
 			const selections$ = isObservable(selections) ? selections.pipe(startWith$1([])) : of(selections ?? []);
+			const ancestorHidden$ = candidate.ancestors.length ? combineLatest(candidate.ancestors.map((ancestor) => {
+				var _ancestor$hidden$;
+				return ((_ancestor$hidden$ = ancestor.hidden$) === null || _ancestor$hidden$ === void 0 ? void 0 : _ancestor$hidden$.pipe(startWith$1(true))) ?? of(false);
+			})).pipe(map$1((states) => states.some(Boolean))) : of(false);
+			const ancestorDisabled$ = candidate.ancestors.length ? combineLatest(candidate.ancestors.map((ancestor) => {
+				var _ancestor$disabled$;
+				return ((_ancestor$disabled$ = ancestor.disabled$) === null || _ancestor$disabled$ === void 0 ? void 0 : _ancestor$disabled$.pipe(startWith$1(true))) ?? of(false);
+			})).pipe(map$1((states) => states.some(Boolean))) : of(false);
 			return combineLatest([
-				candidate.ancestors.length ? combineLatest(candidate.ancestors.map((ancestor) => {
-					var _ancestor$hidden$;
-					return ((_ancestor$hidden$ = ancestor.hidden$) === null || _ancestor$hidden$ === void 0 ? void 0 : _ancestor$hidden$.pipe(startWith$1(true))) ?? of(false);
-				})).pipe(map$1((states) => states.some(Boolean))) : of(false),
-				candidate.ancestors.length ? combineLatest(candidate.ancestors.map((ancestor) => {
-					var _ancestor$disabled$;
-					return ((_ancestor$disabled$ = ancestor.disabled$) === null || _ancestor$disabled$ === void 0 ? void 0 : _ancestor$disabled$.pipe(startWith$1(true))) ?? of(false);
-				})).pipe(map$1((states) => states.some(Boolean))) : of(false),
+				ancestorHidden$,
+				ancestorDisabled$,
 				((_item$hidden$ = item.hidden$) === null || _item$hidden$ === void 0 ? void 0 : _item$hidden$.pipe(startWith$1(true))) ?? of(false),
 				((_item$disabled$ = item.disabled$) === null || _item$disabled$ === void 0 ? void 0 : _item$disabled$.pipe(startWith$1(true))) ?? of(false),
 				((_item$value$ = item.value$) === null || _item$value$ === void 0 ? void 0 : _item$value$.pipe(startWith$1(void 0))) ?? of(void 0),
@@ -1920,7 +1912,8 @@ function FeatureSearch() {
 		localeService,
 		menuManagerService,
 		ribbonService
-	]), []);
+	]);
+	const items = useObservable(items$, []);
 	async function execute(item) {
 		layoutService.focus();
 		if (await commandService.executeCommand(item.commandId, item.getParams())) dialogService.close(FEATURE_SEARCH_DIALOG_ID);
@@ -1979,6 +1972,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 Disposable {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_adapters", []);
+		_defineProperty(this, "_state$", new 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: CommandType.OPERATION,
+	handler: (accessor) => accessor.get(FormatPainterSessionService).activate()
+};
+const ContinuousFormatPainterOperation = {
+	id: "ui.operation.continuous-format-painter",
+	type: CommandType.OPERATION,
+	handler: (accessor) => accessor.get(FormatPainterSessionService).activate(true)
+};
+const ClearFormattingCommand = {
+	id: "ui.command.clear-formatting",
+	type: CommandType.COMMAND,
+	handler: (accessor) => accessor.get(FormatPainterSessionService).clearFormatting()
+};
+const CancelFormatPainterOperation = {
+	id: "ui.operation.cancel-format-painter",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		accessor.get(FormatPainterSessionService).cancel();
+		return true;
+	}
+};
+let FormatPainterController = class FormatPainterController extends 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, Inject(FormatPainterSessionService)),
+	__decorateParam(1, ICommandService),
+	__decorateParam(2, IShortcutService),
+	__decorateParam(3, IUniverInstanceService)
+], FormatPainterController);
+
 //#endregion
 //#region src/menu/feature-search.menu.ts
 function FeatureSearchMenuItemFactory() {
@@ -1991,6 +2238,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(map((mode) => mode !== "off")),
+		disabled$: session.state$.pipe(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(map(() => !session.canClear()))
+	};
+}
+
 //#endregion
 //#region src/menu/history.menu.ts
 const undoRedoDisableFactory$ = (accessor, isUndo) => {
@@ -2040,6 +2314,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
+		},
 		[UndoCommand.id]: {
 			order: 0,
 			gridLayout: {
@@ -2636,7 +2928,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;
@@ -2712,7 +3004,8 @@ function RectPopup(props) {
 			window.removeEventListener("contextmenu", handleContextMenu);
 		};
 	}, [contextMenuFn]);
-	const dir = useObservable(useDependency(LocaleService).direction$);
+	const localeService = useDependency(LocaleService);
+	const dir = useObservable(localeService.direction$);
 	const ele = /* @__PURE__ */ jsxs(Fragment$1, { children: [mask && /* @__PURE__ */ jsx("div", {
 		"data-u-comp": "rect-popup-mask",
 		className: "univer-fixed univer-inset-0 univer-z-[100]",
@@ -2765,10 +3058,11 @@ const SingleCanvasPopup = ({ popup, children }) => {
 		var _popup$hiddenRects$;
 		return ((_popup$hiddenRects$ = popup.hiddenRects$) === null || _popup$hiddenRects$ === void 0 ? void 0 : _popup$hiddenRects$.pipe(throttleTime(0, animationFrameScheduler))) ?? of([]);
 	}, [popup.hiddenRects$]);
-	const excludeRectsRef = useObservableRef(useMemo(() => {
+	const excludeRects$ = useMemo(() => {
 		var _popup$excludeRects$;
 		return (_popup$excludeRects$ = popup.excludeRects$) === null || _popup$excludeRects$ === void 0 ? void 0 : _popup$excludeRects$.pipe(throttleTime(0, 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 = useObservable(hideOnInvisible ? () => combineLatest([anchorRect$, hiddenRects$]).pipe(map(([rectWithOffset, hiddenRects]) => {
 		const { top, left, bottom, right } = canvasElement.getBoundingClientRect();
@@ -2817,16 +3111,20 @@ const SingleCanvasPopup = ({ popup, children }) => {
 };
 function CanvasPopup() {
 	const popupService = useDependency(ICanvasPopupService);
-	const componentManager = useDependency(ComponentManager);
-	return useObservable(popupService.popups$, void 0, true).map((item) => {
-		const [key, popup] = item;
-		const Component = componentManager.get(popup.componentKey);
-		const PopupComponent = Component && popup.connectorInjector ? connectInjector(Component, popup.connectorInjector) : Component;
-		return /* @__PURE__ */ jsx(SingleCanvasPopup, {
-			popup,
-			children: PopupComponent && /* @__PURE__ */ jsx(PopupComponent, { popup })
-		}, key);
-	});
+	return useObservable(popupService.popups$, void 0, true).map(([key, popup]) => /* @__PURE__ */ jsx(SingleCanvasPopup, {
+		popup,
+		children: /* @__PURE__ */ jsx(CanvasPopupContent, { popup })
+	}, key));
+}
+function CanvasPopupContent({ popup }) {
+	const Component = useDependency(ComponentManager).get(popup.componentKey);
+	const connectorContext = useMemo(() => ({ injector: popup.connectorInjector ?? null }), [popup.connectorInjector]);
+	if (!Component) return null;
+	const content = /* @__PURE__ */ jsx(Component, { popup });
+	return popup.connectorInjector ? /* @__PURE__ */ jsx(RediContext.Provider, {
+		value: connectorContext,
+		children: content
+	}) : content;
 }
 
 //#endregion
@@ -2878,13 +3176,15 @@ function ComponentContainer(props) {
 function useComponentsOfPart(part, injector) {
 	const injectedUIPartsService = useDependency(IUIPartsService);
 	const uiPartsService = (injector === null || injector === void 0 ? void 0 : injector.get(IUIPartsService)) ?? injectedUIPartsService;
-	const changeInfo = useObservable(useMemo(() => uiPartsService.uiVisibleChange$.pipe(filter((ui) => ui.ui === part)), [part, uiPartsService]));
+	const uiVisibleChange$ = useMemo(() => uiPartsService.uiVisibleChange$.pipe(filter((ui) => ui.ui === part)), [part, uiPartsService]);
+	const changeInfo = useObservable(uiVisibleChange$);
 	const updateCounterRef = useRef(0);
-	return useMemo(() => uiPartsService.isUIVisible(part) ? uiPartsService.getComponents(part) : /* @__PURE__ */ new Set(), [useObservable(() => uiPartsService.componentRegistered$.pipe(filter((key) => key === part), debounceTime(200), map(() => updateCounterRef.current += 1), startWith(updateCounterRef.current += 1)), void 0, void 0, [
+	const componentPartUpdateCount = useObservable(() => uiPartsService.componentRegistered$.pipe(filter((key) => key === part), debounceTime(200), map(() => updateCounterRef.current += 1), startWith(updateCounterRef.current += 1)), void 0, void 0, [
 		uiPartsService,
 		part,
 		changeInfo
-	])]);
+	]);
+	return useMemo(() => uiPartsService.isUIVisible(part) ? uiPartsService.getComponents(part) : /* @__PURE__ */ new Set(), [componentPartUpdateCount]);
 }
 
 //#endregion
@@ -2990,7 +3290,7 @@ function RibbonGridMenu({ ribbon, activatedTab, onSelectTab }) {
 				"aria-selected": isActive,
 				title,
 				onClick: () => onSelectTab(group),
-				className: 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: 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);
 		})
@@ -3092,7 +3392,8 @@ function CustomLabel(props) {
 	const componentManager = useDependency(ComponentManager);
 	const iconManager = useDependency(IconManager);
 	const subscribedValue = useObservable(value$ ?? null, value);
-	const subscribedIcon = useObservable(isObservable(icon) ? icon : null, "");
+	const observableIcon = isObservable(icon) ? icon : null;
+	const subscribedIcon = useObservable(observableIcon, "");
 	const realIcon = isObservable(icon) ? subscribedIcon : icon ?? "";
 	const nodes = [];
 	let index = 0;
@@ -3160,9 +3461,10 @@ function useToolbarItemStatus(menuItem) {
 	const disabled = useObservable(disabled$ ?? null, false);
 	const activated = useObservable(activated$ ?? null, false);
 	const hidden = useObservable(hidden$ ?? null, false);
+	const valueObservable = useMemo(() => merge$1(value$ ?? EMPTY, selectionsValue$ ?? EMPTY), [selectionsValue$, value$]);
 	return {
 		disabled,
-		value: useObservable(useMemo(() => merge$1(value$ ?? EMPTY, selectionsValue$ ?? EMPTY), [selectionsValue$, value$])),
+		value: useObservable(valueObservable),
 		activated,
 		hidden,
 		selectionsValue: useObservable(selectionsValue$ ?? null)
@@ -3171,11 +3473,12 @@ function useToolbarItemStatus(menuItem) {
 function useToolbarShortcutDisplay({ id, commandId, shortcut }) {
 	const shortcutService = useDependency(IShortcutService);
 	const shortcutCommandId = commandId ?? id;
-	return useObservable(useMemo(() => shortcut ? of(shortcut) : shortcutService.shortcutChanged$.pipe(map(() => shortcutService.getShortcutDisplayOfCommand(shortcutCommandId)), startWith(shortcutService.getShortcutDisplayOfCommand(shortcutCommandId))), [
+	const shortcut$ = useMemo(() => shortcut ? of(shortcut) : shortcutService.shortcutChanged$.pipe(map(() => shortcutService.getShortcutDisplayOfCommand(shortcutCommandId)), startWith(shortcutService.getShortcutDisplayOfCommand(shortcutCommandId))), [
 		shortcut,
 		shortcutService,
 		shortcutCommandId
-	]), null, true);
+	]);
+	return useObservable(shortcut$, null, true);
 }
 
 //#endregion
@@ -3202,6 +3505,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 = cva(toolbarButtonClassName, {
 	variants: {
@@ -3240,11 +3544,11 @@ function ToolbarButton(props) {
 	};
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: toolbarButtonVariants({
+		className: clsx(toolbarButtonVariants({
 			noIcon,
 			active,
 			className
-		}),
+		})),
 		style,
 		disabled,
 		onClick: handleClick,
@@ -3453,7 +3757,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	const menuManagerService = useDependency(IMenuManagerService);
 	const resolveMenuItems = () => menuId ? menuManagerService.getMenuByPositionKey(menuId) : [];
 	const menuItems = useObservable(() => menuManagerService.menuChanged$.pipe(map(resolveMenuItems), startWith(resolveMenuItems())), resolveMenuItems(), false, [menuId, menuManagerService]);
-	const hiddenStates = useObservable(useMemo(() => {
+	const hiddenStates$ = useMemo(() => {
 		const itemStates = menuItems.map((item) => {
 			var _item$item;
 			return (item.children ? combineLatest(item.children.map((subItem) => {
@@ -3465,7 +3769,8 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 			...states,
 			[key]: hidden
 		}), {}), startWith({})) : of({});
-	}, [menuItems]), {});
+	}, [menuItems]);
+	const hiddenStates = useObservable(hiddenStates$, {});
 	const filteredMenuItems = useMemo(() => {
 		return menuItems.filter((item) => {
 			var _item$key;
@@ -3767,13 +4072,14 @@ const ToolbarItem = forwardRef((props, ref) => {
 	let tooltipTitle = tooltip ? localeService.t(tooltip) : "";
 	if (shortcutDisplay) tooltipTitle += ` (${shortcutDisplay})`;
 	const { selections } = props;
-	const options = useObservable(useMemo(() => {
+	const selections$ = useMemo(() => {
 		if (isObservable(selections)) return selections;
 		else return new Observable((subscribe) => {
 			subscribe.next(selections);
 		});
-	}, [selections]));
-	const iconToDisplay = useObservable(useMemo(() => {
+	}, [selections]);
+	const options = useObservable(selections$);
+	const icon$ = useMemo(() => {
 		if (isObservable(icon)) return icon;
 		else return new Observable((subscribe) => {
 			var _options$find;
@@ -3784,7 +4090,8 @@ const ToolbarItem = forwardRef((props, ref) => {
 		icon,
 		options,
 		value
-	]), void 0, true);
+	]);
+	const iconToDisplay = useObservable(icon$, void 0, true);
 	function renderSelectorType(menuType) {
 		const selectionsCommandId = props.selectionsCommandId;
 		const bId = commandId ?? id;
@@ -3814,6 +4121,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 		if (menuType === 2) return /* @__PURE__ */ jsxs("div", {
 			"data-u-command": id,
 			"data-disabled": disabled,
+			"aria-disabled": disabled,
 			className: 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
@@ -3823,7 +4131,7 @@ const ToolbarItem = 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,
@@ -3879,7 +4187,7 @@ const ToolbarItem = 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
@@ -3914,7 +4222,7 @@ const ToolbarItem = 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 = 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 = 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"
@@ -3923,11 +4231,11 @@ const ToolbarItem = forwardRef((props, ref) => {
 			const hoverable = typeof label === "string" || (label === null || label === void 0 ? void 0 : label.hoverable) !== false;
 			return /* @__PURE__ */ jsx("span", {
 				"data-u-command": id,
-				className: toolbarButtonVariants({
+				className: clsx(toolbarButtonVariants({
 					noIcon: !icon,
 					active: activated,
 					className: 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__ */ jsx(CustomLabel, {
@@ -3945,8 +4253,10 @@ const ToolbarItem = 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 }));
 			},
@@ -3985,17 +4295,18 @@ function RibbonGrid({ groups, title, className, ...props }) {
 		...props,
 		"data-testid": "ribbon-grid-toolbar",
 		"data-u-comp": "ribbon-grid-toolbar",
-		className: 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", borderBottomClassName, scrollbarClassName, className),
+		className: 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", borderBottomClassName, scrollbarClassName, className),
 		role: "toolbar",
 		"aria-label": localeService.t(title),
 		children: /* @__PURE__ */ jsx(ToolbarDropdownProvider, { children: groups.map((group) => {
+			const placements = placeRibbonGridItems(group.children ?? []);
 			return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", {
 						className: 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}`,
@@ -4171,108 +4482,110 @@ function Ribbon(props) {
 		"data-embed-ribbon-override": "true",
 		"data-embed-id": ribbonOverride.id
 	} : {};
-	return /* @__PURE__ */ jsx(RibbonOverrideRuntimeProvider, {
-		override: ribbonOverride,
-		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsxs("div", {
-				"data-u-comp": "ribbon-header-menu",
-				...embedRibbonOverrideAttributes,
-				className: 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__ */ jsx("div", {
-						className: clsx("univer-flex univer-h-9 univer-items-end univer-px-3", { "univer-justify-center": hideToolbar }),
-						children: /* @__PURE__ */ 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__ */ jsx(ClassicMenu, {
-						ribbon,
-						activatedTab,
-						onSelectTab: handleSelectTab
-					}),
-					!toolbarOnly && ribbonType === "grid" && ribbon.length >= 1 && /* @__PURE__ */ jsx(RibbonGridMenu, {
-						ribbon,
-						activatedTab,
-						onSelectTab: handleSelectTab
-					}),
-					headerMenu && headerMenuComponents && headerMenuComponents.size > 0 && /* @__PURE__ */ 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__ */ jsx(ComponentContainer, { components: headerMenuComponents })
-					})
-				]
-			}),
-			!hideToolbar && ribbonType === "grid" && /* @__PURE__ */ jsx(RibbonGrid, {
-				...embedRibbonOverrideAttributes,
-				groups: activeGroup.allGroups,
-				title: activatedTabTitle
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			"data-u-comp": "ribbon-header-menu",
+			...embedRibbonOverrideAttributes,
+			className: 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__ */ jsxs("div", {
-				...embedRibbonOverrideAttributes,
-				className: 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"
-				}, borderBottomClassName),
-				children: [ribbonType === "collapsed" && ribbon.length >= 1 && /* @__PURE__ */ jsx(DefaultMenu, {
+			children: [
+				!toolbarOnly && (ribbonOverride === null || ribbonOverride === void 0 ? void 0 : ribbonOverride.placeholderTitle) && ribbon.length === 0 && /* @__PURE__ */ jsx("div", {
+					className: clsx("univer-flex univer-h-9 univer-items-end univer-px-3", { "univer-justify-center": hideToolbar }),
+					children: /* @__PURE__ */ 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__ */ jsx(ClassicMenu, {
 					ribbon,
 					activatedTab,
 					onSelectTab: handleSelectTab
-				}), /* @__PURE__ */ jsx("div", {
-					"data-u-comp": "ribbon-toolbar",
-					ref: containerRef,
-					className: clsx("univer-flex univer-overflow-hidden", divideXClassName, { "univer-justify-center": ribbonType === "classic" }),
-					role: "toolbar",
-					"aria-label": localeService.t(activatedTabTitle),
-					children: /* @__PURE__ */ 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__ */ jsx(Fragment, { children: /* @__PURE__ */ 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__ */ jsx(ToolbarItem, {
-								...child.item,
-								preserveStrokeWidth: true
-							}, child.key)))
-						}) }, groupItem.key);
-					}), collapsedIds.length > 0 && /* @__PURE__ */ jsx("div", {
-						className: "univer-pl-2 rtl:univer-pr-2",
-						children: /* @__PURE__ */ jsx(Dropdown, {
-							collisionPadding: {
-								right: 12,
-								left: 12
-							},
-							onOpenAutoFocus: (e) => e.preventDefault(),
-							overlay: /* @__PURE__ */ 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__ */ jsx("div", {
-										className: "univer-flex univer-items-center univer-gap-2",
-										children: /* @__PURE__ */ 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__ */ jsx(ToolbarItem, {
-												...child.item,
-												preserveStrokeWidth: true
-											}, child.key)) : groupItem.item && /* @__PURE__ */ jsx(ToolbarItem, {
-												...groupItem.item,
-												preserveStrokeWidth: true
-											}, groupItem.key)
-										})
-									}, groupItem.key);
-								})
-							}),
-							children: /* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: toolbarButtonClassName,
-								children: /* @__PURE__ */ jsx(MoreVerticalIcon, { preserveStrokeWidth: true })
+				}),
+				!toolbarOnly && ribbonType === "grid" && ribbon.length >= 1 && /* @__PURE__ */ jsx(RibbonGridMenu, {
+					ribbon,
+					activatedTab,
+					onSelectTab: handleSelectTab
+				}),
+				headerMenu && headerMenuComponents && headerMenuComponents.size > 0 && /* @__PURE__ */ 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__ */ jsx(ComponentContainer, { components: headerMenuComponents })
+				})
+			]
+		}),
+		!hideToolbar && ribbonType === "grid" && /* @__PURE__ */ jsx(RibbonGrid, {
+			...embedRibbonOverrideAttributes,
+			groups: activeGroup.allGroups,
+			title: activatedTabTitle
+		}),
+		!hideToolbar && ribbonType !== "grid" && /* @__PURE__ */ jsxs("div", {
+			...embedRibbonOverrideAttributes,
+			className: 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"
+			}, borderBottomClassName),
+			children: [ribbonType === "collapsed" && ribbon.length >= 1 && /* @__PURE__ */ jsx(DefaultMenu, {
+				ribbon,
+				activatedTab,
+				onSelectTab: handleSelectTab
+			}), /* @__PURE__ */ jsx("div", {
+				"data-u-comp": "ribbon-toolbar",
+				ref: containerRef,
+				className: clsx("univer-flex univer-overflow-hidden", divideXClassName, { "univer-justify-center": ribbonType === "classic" }),
+				role: "toolbar",
+				"aria-label": localeService.t(activatedTabTitle),
+				children: /* @__PURE__ */ 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__ */ jsx(Fragment, { children: /* @__PURE__ */ 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__ */ jsx(ToolbarItem, {
+							...child.item,
+							preserveStrokeWidth: true
+						}, child.key)))
+					}) }, groupItem.key);
+				}), collapsedIds.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "univer-pl-2 rtl:univer-pr-2",
+					children: /* @__PURE__ */ jsx(Dropdown, {
+						collisionPadding: {
+							right: 12,
+							left: 12
+						},
+						onOpenAutoFocus: (e) => e.preventDefault(),
+						overlay: /* @__PURE__ */ 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__ */ jsx("div", {
+									className: "univer-flex univer-items-center univer-gap-2",
+									children: /* @__PURE__ */ 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__ */ jsx(ToolbarItem, {
+											...child.item,
+											preserveStrokeWidth: true
+										}, child.key)) : groupItem.item && /* @__PURE__ */ jsx(ToolbarItem, {
+											...groupItem.item,
+											preserveStrokeWidth: true
+										}, groupItem.key)
+									})
+								}, groupItem.key);
 							})
+						}),
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: toolbarButtonClassName,
+							children: /* @__PURE__ */ jsx(MoreVerticalIcon, { preserveStrokeWidth: true })
 						})
-					})] }, effectiveActivatedTab)
-				})]
-			}),
-			ribbonType !== "grid" && fakeToolbar
-		] })
+					})
+				})] }, effectiveActivatedTab)
+			})]
+		}),
+		ribbonType !== "grid" && fakeToolbar
+	] });
+	return /* @__PURE__ */ jsx(RibbonOverrideRuntimeProvider, {
+		override: ribbonOverride,
+		children: content
 	});
 }
 function RibbonOverrideRuntimeProvider(props) {
@@ -4719,35 +5032,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__ */ 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) {
@@ -5106,13 +5420,15 @@ function ContextMenuPanel(props) {
 	const [menuElement, setMenuElement] = useState(null);
 	const [maxMenuHeight, setMaxMenuHeight] = 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] = useState(suppressHoverUntilPointerMove);
+	const menuSchemaVersion$ = useMemo(() => menuManagerService.menuChanged$.pipe(startWith(void 0), scan((version) => version + 1, 0)), [menuManagerService]);
+	const menuSchemaVersion = useObservable(menuSchemaVersion$, 0);
 	const menuItems = useMemo(() => menuType ? menuManagerService.getMenuByPositionKey(menuType) : [], [
 		menuManagerService,
 		menuType,
-		useObservable(useMemo(() => menuManagerService.menuChanged$.pipe(startWith(void 0), 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);
@@ -5186,7 +5502,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();
@@ -5728,7 +6044,7 @@ function ContextMenuMenuItem(props) {
 	});
 }
 function useContextGroupHiddenStates$1(menuSchemas) {
-	return useObservable(useMemo(() => {
+	const hiddenStates$ = 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) => {
@@ -5741,7 +6057,8 @@ function useContextGroupHiddenStates$1(menuSchemas) {
 			...states,
 			[key]: hidden
 		}), {}), startWith({})) : of({});
-	}, [menuSchemas]), {});
+	}, [menuSchemas]);
+	return useObservable(hiddenStates$, {});
 }
 
 //#endregion
@@ -6403,7 +6720,8 @@ function DesktopWorkbench(props) {
 	});
 }
 function mountDesktopWorkbench(injector, options, mountContainer, onRendered) {
-	render(/* @__PURE__ */ jsx(connectInjector(DesktopWorkbench, injector), {
+	const ConnectedApp = connectInjector(DesktopWorkbench, injector);
+	render(/* @__PURE__ */ jsx(ConnectedApp, {
 		...options,
 		mountContainer,
 		onRendered
@@ -6538,7 +6856,8 @@ function DesktopWorkbenchContent(props) {
 }
 function FloatingContainer() {
 	const { mountContainer } = useContext(ConfigContext);
-	return createPortal(/* @__PURE__ */ jsx(ComponentContainer, { components: useComponentsOfPart("floating") }, "floating"), mountContainer);
+	const floatingComponents = useComponentsOfPart("floating");
+	return createPortal(/* @__PURE__ */ jsx(ComponentContainer, { components: floatingComponents }, "floating"), mountContainer);
 }
 
 //#endregion
@@ -6686,7 +7005,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.0.0-rc.0";
+var version = "1.0.1";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -6727,13 +7046,14 @@ const COLOR_PICKER_COMPONENT = "UI_COLOR_PICKER_COMPONENT";
 const CommonLabel = (props) => {
 	const { value, selections } = props;
 	const localeService = useDependency(LocaleService);
+	const viewValue = 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__ */ jsx("div", {
 		className: "univer-truncate univer-text-sm",
-		children: 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";
@@ -22937,10 +23257,11 @@ let FontService = class FontService {
 		_defineProperty(this, "fonts$", new 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() {
@@ -23486,11 +23807,12 @@ function SymbolPicker(props) {
 	});
 }
 function SymbolSection(props) {
+	const localeService = useDependency(LocaleService);
 	return /* @__PURE__ */ jsxs("section", {
 		className: "univer-flex univer-flex-col univer-gap-2",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-gray-100",
-			children: useDependency(LocaleService).t(props.category.titleKey)
+			children: localeService.t(props.category.titleKey)
 		}), /* @__PURE__ */ jsx("div", {
 			className: "univer-grid univer-grid-cols-10 univer-gap-1",
 			children: props.category.symbols.map((symbol, index) => {
@@ -23607,7 +23929,8 @@ function MobileRibbon(props) {
 	const workbenchService = useDependency(IWorkbenchService);
 	const ribbon = useObservable(ribbonService.ribbon$, []);
 	const activatedTab = useObservable(ribbonService.activatedTab$, "ribbon.start");
-	if (useObservable(workbenchService.rootUnitType$, null, true) === UniverInstanceType.UNIVER_SHEET) return /* @__PURE__ */ jsx(MobileSheetTopBar, {
+	const rootUnitType = useObservable(workbenchService.rootUnitType$, null, true);
+	if (rootUnitType === UniverInstanceType.UNIVER_SHEET || rootUnitType === UniverInstanceType.UNIVER_DOC) return /* @__PURE__ */ jsx(MobileCompactTopBar, {
 		ribbon,
 		headerMenu,
 		headerMenuComponents
@@ -23648,11 +23971,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);
 		};
@@ -23792,7 +24116,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] = useState(false);
@@ -23817,7 +24141,7 @@ function MobileSheetTopBar(props) {
 		className: clsx(resetButtonClassName, "univer-fixed univer-inset-0 univer-z-[1390] !univer-rounded-none !univer-bg-transparent"),
 		onClick: () => setMoreOpen(false)
 	}), /* @__PURE__ */ jsx("div", {
-		"data-u-comp": "mobile-sheet-more-menu",
+		"data-u-comp": "mobile-more-menu",
 		className: 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", borderClassName),
 		style: {
 			top: ((triggerRect === null || triggerRect === void 0 ? void 0 : triggerRect.bottom) ?? 48) + 8,
@@ -23835,21 +24159,17 @@ function MobileSheetTopBar(props) {
 		}, schema.key))
 	})] }), mountContainer);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
-		"data-u-comp": "mobile-sheet-top-bar",
+		"data-u-comp": "mobile-compact-top-bar",
 		className: 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", borderBottomClassName),
 		children: [
 			/* @__PURE__ */ 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__ */ jsx(MobileToolbarItem, { ...schema.item }, schema.key))
 			}),
-			hasHeaderMenu && /* @__PURE__ */ 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__ */ jsx(ComponentContainer, { components: headerMenuComponents })
-			}),
 			moreItems.length > 0 && /* @__PURE__ */ 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: clsx(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"),
@@ -23858,230 +24178,33 @@ function MobileSheetTopBar(props) {
 					className: "univer-size-5",
 					preserveStrokeWidth: true
 				})
+			}),
+			hasHeaderMenu && /* @__PURE__ */ 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__ */ jsx(ComponentContainer, { components: headerMenuComponents })
 			})
 		]
 	}), moreMenu] });
 }
 
 //#endregion
-//#region src/views/components/mobile-drawer/MobileDrawerCoordinator.tsx
-const MobileDrawerCoordinatorContext = createContext(null);
-function MobileDrawerCoordinatorProvider(props) {
-	const entriesRef = useRef([]);
-	const [activeDrawerId, setActiveDrawerId] = useState(null);
-	const setEntries = useCallback((entries) => {
-		entriesRef.current = entries;
-		setActiveDrawerId(entries.length ? entries[entries.length - 1].id : null);
-	}, []);
-	const unregister = useCallback((id) => {
-		setEntries(entriesRef.current.filter((entry) => entry.id !== id));
-	}, [setEntries]);
-	const close = useCallback((id) => {
-		const entry = entriesRef.current.find((item) => item.id === id);
-		if (!entry) return;
-		unregister(id);
-		entry.onClose();
-	}, [unregister]);
-	const register = 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 = useMemo(() => ({
-		activeDrawerId,
-		close,
-		register,
-		unregister
-	}), [
-		activeDrawerId,
-		close,
-		register,
-		unregister
-	]);
-	return /* @__PURE__ */ 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__ */ 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 = 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 = useRef(null);
-	const drawerIdRef = useRef(null);
-	const onCloseRef = 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] = useState(null);
-	const suppressHandleClickRef = useRef(false);
-	const dragRef = 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";
-	useImperativeHandle(panelRef, () => panelElementRef.current);
-	useLayoutEffect(() => {
-		if (!registerDrawer || !unregisterDrawer) return;
-		registerDrawer(drawerId, openMode, () => onCloseRef.current());
-		return () => unregisterDrawer(drawerId);
-	}, [
-		drawerId,
-		openMode,
-		registerDrawer,
-		unregisterDrawer
-	]);
-	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__ */ jsxs(Fragment$1, { children: [floatingActions && /* @__PURE__ */ jsx("div", {
-		className: "univer-pointer-events-none univer-absolute univer-right-4 univer-z-30",
-		style: { bottom: `calc(${drawerPercent}${viewportHeightUnit} + 12px)` },
-		children: floatingActions
-	}), /* @__PURE__ */ jsxs("section", {
-		ref: panelElementRef,
-		hidden: !active,
-		role,
-		"aria-modal": role === "dialog" || void 0,
-		"aria-label": ariaLabel,
-		"data-u-comp": componentName,
-		"data-snap": snap,
-		className: 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__ */ 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__ */ jsx("button", {
-					type: "button",
-					"aria-label": snap === "compact" ? expandLabel : collapseLabel,
-					className: clsx(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__ */ jsx("span", { className: "univer-h-1 univer-w-10 univer-rounded-full univer-bg-gray-300 dark:!univer-bg-gray-600" })
-				}), header]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				ref: contentRef,
-				className: clsx("univer-flex-1 univer-overflow-y-auto univer-overflow-x-hidden univer-p-3", 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 = useDependency(IMenuManagerService);
 	const localeService = useDependency(LocaleService);
 	const menuManagerService = providedMenuManagerService ?? rootMenuManagerService;
 	const [viewStack, setViewStack] = useState([]);
-	const providedSchemaKey = providedSchemas === null || providedSchemas === void 0 ? void 0 : providedSchemas.map((schema) => schema.key).join("|");
-	const menuSchemas = useMemo(() => {
-		if (providedSchemas) return providedSchemas;
-		if (!menuType) return [];
-		return menuManagerService.getMenuByPositionKey(menuType);
-	}, [
-		providedSchemas,
-		menuManagerService,
-		useObservable(useMemo(() => {
-			return menuManagerService.menuChanged$.pipe(scan$1((version) => version + 1, 0), startWith$1(0));
-		}, [menuManagerService]), 0),
-		menuType
-	]);
-	useEffect(() => {
-		setViewStack([]);
-	}, [menuType, providedSchemaKey]);
+	const menuSchemaVersion$ = useMemo(() => {
+		return menuManagerService.menuChanged$.pipe(scan$1((version) => version + 1, 0), startWith$1(0));
+	}, [menuManagerService]);
+	useObservable(menuSchemaVersion$, 0);
+	const menuSchemas = providedSchemas ?? (menuType ? menuManagerService.getMenuByPositionKey(menuType) : []);
 	const currentView = viewStack[viewStack.length - 1] ?? null;
 	const closeView = useCallback(() => setViewStack((stack) => stack.slice(0, -1)), []);
 	useEffect(() => {
@@ -24112,7 +24235,7 @@ function MobileMenu(props) {
 				/* @__PURE__ */ 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__ */ jsx(MoreLeftIcon, { className: "univer-text-base" })
 				}),
@@ -24184,15 +24307,17 @@ function MobileContextMenuBar(props) {
 			behavior: "smooth"
 		});
 	};
+	const showLeft = Boolean(currentView) || scrollState.left;
 	return /* @__PURE__ */ 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__ */ jsx("button", {
+			showLeft && /* @__PURE__ */ 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__ */ jsx(MoreLeftIcon, {})
 			}),
@@ -24219,7 +24344,7 @@ function MobileContextMenuBar(props) {
 			scrollState.right && /* @__PURE__ */ 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__ */ jsx(MoreRightIcon, {})
 			})
@@ -24240,7 +24365,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__ */ jsx("span", {
 			className: "univer-whitespace-nowrap",
@@ -24259,13 +24384,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__ */ jsx(CustomLabel, {
 			value$: option.value$,
@@ -24300,6 +24425,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__ */ jsx(MobileQuickSchemaGroup, {
+			schema,
+			menuManagerService,
+			onExecute,
+			onOpenView,
+			inheritedDisabled$,
+			bordered: index !== visibleSchemas.length - 1
+		}, schema.key);
 		return /* @__PURE__ */ jsxs("section", {
 			className: clsx("univer-grid", index !== visibleSchemas.length - 1 && borderBottomClassName),
 			children: [schema.title && /* @__PURE__ */ jsx("div", {
@@ -24316,6 +24449,54 @@ function MobileSchemaList(props) {
 		}, schema.key);
 	}) });
 }
+function MobileQuickSchemaGroup(props) {
+	var _schema$children3;
+	const { schema, menuManagerService, onExecute, onOpenView, inheritedDisabled$, bordered } = props;
+	const localeService = useDependency(LocaleService);
+	const columns = Math.max(2, Math.min(schema.quickColumns ?? 4, 5));
+	return /* @__PURE__ */ jsxs("section", {
+		className: clsx("univer-p-3", bordered && borderBottomClassName),
+		children: [schema.title && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("button", {
+		type: "button",
+		disabled,
+		"aria-pressed": menuItem.type === 2 ? activated : void 0,
+		className: 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__ */ jsx(CustomLabel, {
+			value,
+			title: menuItem.title ?? menuItem.tooltip,
+			label: menuItem.label,
+			icon: menuItem.icon
+		}), activated && /* @__PURE__ */ jsx(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({
@@ -24353,7 +24534,7 @@ function MobileSchemaRow(props) {
 	});
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
-		className: 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 && borderBottomClassName),
+		className: 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 && borderBottomClassName),
 		"data-u-command": menuItem.id,
 		disabled,
 		"aria-pressed": menuItem.type === 2 ? activated : void 0,
@@ -24413,7 +24594,7 @@ function MobileSelectionOptionRow(props) {
 					value: nextValue,
 					id: menuItem.id,
 					label: menuKey,
-					commandId: option.commandId
+					commandId: option.commandId ?? menuItem.selectionsCommandId
 				});
 			}
 		})
@@ -24421,7 +24602,7 @@ function MobileSelectionOptionRow(props) {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"aria-pressed": selected,
-		className: 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 && borderBottomClassName),
+		className: 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 && borderBottomClassName),
 		disabled: optionDisabled,
 		onClick: () => {
 			if (optionDisabled) return;
@@ -24430,7 +24611,7 @@ function MobileSelectionOptionRow(props) {
 				value: displayValue,
 				id: menuItem.id,
 				label: menuKey,
-				commandId: option.commandId
+				commandId: option.commandId ?? menuItem.selectionsCommandId
 			});
 		},
 		children: [/* @__PURE__ */ jsx("div", {
@@ -24459,7 +24640,8 @@ function useMobileSchemaInteraction(props) {
 	const value = useObservable(menuItem === null || menuItem === void 0 ? void 0 : menuItem.value$);
 	const selectionsFromObservable = useObservable(selectorItem && isObservable(selectorItem.selections) ? selectorItem.selections : void 0);
 	const schemaChildren = useMemo(() => schema.children ?? [], [schema.children]);
-	const visibleSchemaChildren = useObservable(useMemo(() => getVisibleSchemaCount$(schemaChildren), [schemaChildren]), schemaChildren.length);
+	const visibleSchemaChildren$ = useMemo(() => getVisibleSchemaCount$(schemaChildren), [schemaChildren]);
+	const visibleSchemaChildren = useObservable(visibleSchemaChildren$, schemaChildren.length);
 	const selections = 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;
@@ -24476,11 +24658,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;
@@ -24513,65 +24698,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 of(0);
-	return combineLatest(leafSchemas.map((schema) => {
-		var _schema$item;
-		return (((_schema$item = schema.item) === null || _schema$item === void 0 ? void 0 : _schema$item.hidden$) ?? of(false)).pipe(startWith$1(false));
-	})).pipe(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 useObservable(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$) ?? of(false);
-			}) : [];
-			return hiddenObservables.length ? [combineLatest(hiddenObservables).pipe(map((values) => [menuSchema.key, values.every(Boolean)]))] : [];
-		});
-		return groupStates.length ? merge$1(...groupStates).pipe(scan$1((states, [key, hidden]) => ({
-			...states,
-			[key]: hidden
-		}), {}), startWith$1({})) : 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 of(0);
+	return combineLatest(leafSchemas.map((schema) => {
+		var _schema$item;
+		return (((_schema$item = schema.item) === null || _schema$item === void 0 ? void 0 : _schema$item.hidden$) ?? of(false)).pipe(startWith$1(false));
+	})).pipe(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$ = 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$) ?? of(false);
+			}) : [];
+			return hiddenObservables.length ? [combineLatest(hiddenObservables).pipe(map((values) => [menuSchema.key, values.every(Boolean)]))] : [];
+		});
+		return groupStates.length ? merge$1(...groupStates).pipe(scan$1((states, [key, hidden]) => ({
+			...states,
+			[key]: hidden
+		}), {}), startWith$1({})) : of({});
+	}, [menuSchemas]);
+	return 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 = createContext(null);
+function MobileCanvasLayoutProvider({ children }) {
+	const [panels, setPanels] = useState([]);
+	const register = useCallback((panel) => {
+		setPanels((current) => [...current, panel]);
+		return () => setPanels((current) => current.filter((item) => item !== panel));
+	}, []);
+	const value = useMemo(() => ({
+		panels,
+		register
+	}), [panels, register]);
+	return /* @__PURE__ */ 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 = useContext(MobileCanvasLayoutContext)) === null || _useContext === void 0 ? void 0 : _useContext.register;
+	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 = useContext(MobileCanvasLayoutContext)) === null || _useContext2 === void 0 ? void 0 : _useContext2.register;
+	return 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 = useContext(MobileCanvasLayoutContext);
+	const revealRef = useRef(onReveal);
+	useLayoutEffect(() => {
+		revealRef.current = onReveal;
+	}, [onReveal]);
+	const previousHeightRef = useRef(null);
+	const needsRevealRef = useRef(false);
+	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 = createContext(null);
+function MobileDrawerCoordinatorProvider(props) {
+	const entriesRef = useRef([]);
+	const [activeDrawerId, setActiveDrawerId] = useState(null);
+	const setEntries = useCallback((entries) => {
+		entriesRef.current = entries;
+		setActiveDrawerId(entries.length ? entries[entries.length - 1].id : null);
+	}, []);
+	const unregister = useCallback((id) => {
+		setEntries(entriesRef.current.filter((entry) => entry.id !== id));
+	}, [setEntries]);
+	const close = useCallback((id) => {
+		const entry = entriesRef.current.find((item) => item.id === id);
+		if (!entry) return;
+		unregister(id);
+		entry.onClose();
+	}, [unregister]);
+	const register = 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 = useMemo(() => ({
+		activeDrawerId,
+		close,
+		register,
+		unregister
+	}), [
+		activeDrawerId,
+		close,
+		register,
+		unregister
+	]);
+	return /* @__PURE__ */ 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 = 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 = 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 = useRef(null);
+	const drawerIdRef = useRef(null);
+	const onCloseRef = useRef(onClose);
+	onCloseRef.current = onClose;
+	if (!drawerIdRef.current) drawerIdRef.current = Symbol(componentName);
+	const drawerId = drawerIdRef.current;
+	const active = !coordinator || coordinator.activeDrawerId === drawerId;
+	const inheritedLayout = 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 = 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] = useState(null);
+	const surfaceRef = useRef(null);
+	const setPanelRef = useCallback((element) => {
+		surfaceRef.current = element;
+		panelElementRef.current = element;
+		assignDrawerRef(panelRef, element);
+	}, [panelRef]);
+	useMobileCanvasPanel(surfaceRef, layout, dragPercent !== null);
+	const suppressHandleClickRef = useRef(false);
+	const dragRef = useRef(null);
+	const drawerPercent = dragPercent ?? (snap === "compact" ? MOBILE_DRAWER_COMPACT_PERCENT : MOBILE_DRAWER_EXPANDED_PERCENT);
+	const keyboardLayout = useMobileKeyboardViewportLayout(panelElementRef);
+	useLayoutEffect(() => {
+		if (!registerDrawer || !unregisterDrawer) return;
+		registerDrawer(drawerId, openMode, () => onCloseRef.current());
+		return () => unregisterDrawer(drawerId);
+	}, [
+		drawerId,
+		openMode,
+		registerDrawer,
+		unregisterDrawer
+	]);
+	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__ */ jsx(MobileDrawerLayoutContext.Provider, {
+		value: layout,
+		children: /* @__PURE__ */ jsxs(MobileOverlayContext.Provider, {
+			value: overlay,
+			children: [floatingActions && /* @__PURE__ */ jsx("div", {
+				className: "univer-pointer-events-none univer-absolute univer-right-4 univer-z-30",
+				style: { bottom: `calc(${drawerPercent}${viewportHeightUnit} + 12px)` },
+				children: floatingActions
+			}), /* @__PURE__ */ 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: 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__ */ 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__ */ jsx("button", {
+							type: "button",
+							"aria-label": snap === "compact" ? expandLabel : collapseLabel,
+							className: clsx(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__ */ jsx("span", { className: "univer-h-1 univer-w-10 univer-rounded-full univer-bg-gray-300 dark:!univer-bg-gray-600" })
+						}), header]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: contentRef,
+						className: clsx("univer-flex-1 univer-overflow-y-auto univer-overflow-x-hidden univer-p-3", scrollbarClassName, contentClassName),
+						style: { paddingBottom: keyboardLayout ? `calc(0.75rem + ${keyboardLayout.bottom}px)` : void 0 },
+						children
+					}),
+					footer
+				]
+			})]
+		})
+	});
 }
 
 //#endregion
@@ -24651,9 +25271,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] = useState(false);
 	const [menuType, setMenuType] = useState("");
+	const [anchor, setAnchor] = useState({
+		x: 0,
+		y: 0
+	});
+	const floatingMenuRef = useRef(null);
 	const [menuContext, setMenuContext] = useState();
 	const visibleRef = useRef(visible);
 	const contextMenuHostService = useDependency(IContextMenuHostService);
@@ -24664,11 +25302,17 @@ function MobileContextMenu() {
 	const runtimeScopeService = useDependency(IUIRuntimeScopeService);
 	const localeService = useDependency(LocaleService);
 	const { mountContainer } = useContext(ConfigContext);
+	const isCaretAnchor = (menuContext === null || menuContext === void 0 ? void 0 : menuContext.caretAnchor) === true;
+	const isFloatingContextMenu = shouldUseFloatingMobileContextMenu(menuType, menuContext);
 	visibleRef.current = visible;
-	const handleContextMenu = useCallback((_event, nextMenuType, context) => {
+	const handleContextMenu = 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 = useCallback(() => {
@@ -24699,6 +25343,50 @@ function MobileContextMenu() {
 		handleClose,
 		handleContextMenu
 	]);
+	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
+	]);
+	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 = useMemo(() => {
 		switch (menuType) {
 			case "contextMenu.rowHeader": return localeService.t("ui.row");
@@ -24724,6 +25412,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 createPortal(/* @__PURE__ */ 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__ */ 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__ */ jsx(MobileMenu, {
+					menuType,
+					menuManagerService: activeMenuManagerService,
+					presentation: "context-bar",
+					onOptionSelect: handleOptionSelect
+				}), /* @__PURE__ */ 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__ */ jsx(MobileMenuDrawer, {
 		visible: true,
 		title: sheetTitle,
@@ -24743,14 +25465,18 @@ function MobileSidebar() {
 	const layerRef = useRef(null);
 	const scrollRef = useRef(null);
 	const closeButtonRef = useRef(null);
-	const [drawerSnap, setDrawerSnap] = useState("expanded");
+	const [snapOverride, setSnapOverride] = useState(null);
 	const options = useMemo(() => renderSidebarOptions(sidebarOptions), [sidebarOptions]);
 	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
+	]);
 	useEffect(() => {
 		const scrollElement = scrollRef.current;
 		sidebarService.setContainer(scrollElement ?? void 0);
@@ -24762,23 +25488,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__ */ 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__ */ jsx("button", {
+		children: [options.layout !== "canvas" && /* @__PURE__ */ 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__ */ 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"),
@@ -24829,8 +25560,17 @@ const MobileKeyboardInsetContext = 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) {
-	render(/* @__PURE__ */ jsx(connectInjector$1(MobileWorkbench, injector), {
+	const ConnectedApp = connectInjector$1(MobileWorkbench, injector);
+	render(/* @__PURE__ */ jsx(ConnectedApp, {
 		...options,
 		mountContainer,
 		onRendered
@@ -24844,8 +25584,10 @@ function MobileWorkbench(props) {
 	const themeService = useDependency$1(ThemeService);
 	const themeSwitcherService = useDependency$1(ThemeSwitcherService);
 	const contentRef = useRef(null);
+	const canvasContainerRef = useRef(null);
 	const viewportRef = useRef(null);
 	const [keyboardInset, setKeyboardInset] = useState(0);
+	const [keyboardViewport, setKeyboardViewport] = useState(null);
 	const footerComponents = useComponentsOfPart("footer");
 	const headerComponents = useComponentsOfPart("header");
 	const headerMenuComponents = useComponentsOfPart("header-menu");
@@ -24889,36 +25631,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;
+					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__ */ jsx(ConfigProvider, {
 		locale: locale === null || locale === void 0 ? void 0 : locale.design,
 		direction,
 		mountContainer: portalContainer,
-		children: /* @__PURE__ */ jsx(MobileKeyboardInsetContext.Provider, {
+		mobileKeyboardViewport: keyboardViewport,
+		children: /* @__PURE__ */ jsx(MobileCanvasLayoutProvider, { children: /* @__PURE__ */ jsx(MobileKeyboardInsetContext.Provider, {
 			value: keyboardInset,
 			children: /* @__PURE__ */ jsxs(MobileDrawerCoordinatorProvider, { children: [/* @__PURE__ */ jsxs("div", {
 				ref: viewportRef,
@@ -24944,7 +25747,7 @@ function MobileWorkbench(props) {
 					}), /* @__PURE__ */ jsxs("section", {
 						className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
 						children: [/* @__PURE__ */ 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__ */ jsx("aside", {
 									className: "univer-h-full",
@@ -24956,16 +25759,29 @@ function MobileWorkbench(props) {
 										className: "univer-w-screen",
 										children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header")
 									}), /* @__PURE__ */ jsx("section", {
-										ref: contentRef,
-										className: "univer-relative univer-overflow-hidden",
-										"data-range-selector": true,
-										onContextMenu: (e) => e.preventDefault(),
-										children: /* @__PURE__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
+										ref: canvasContainerRef,
+										className: "univer-relative univer-min-h-0 univer-overflow-hidden",
+										children: /* @__PURE__ */ jsx("div", {
+											ref: contentRef,
+											className: "univer-absolute univer-inset-0 univer-overflow-hidden",
+											"data-range-selector": true,
+											onContextMenu: (e) => e.preventDefault(),
+											children: /* @__PURE__ */ jsx(ComponentContainer, {
+												components: contentComponents,
+												sharedProps: {
+													containerRef: canvasContainerRef,
+													canvasRef: contentRef
+												}
+											}, "content")
+										})
 									})]
 								}),
 								/* @__PURE__ */ jsx("aside", { className: "univer-h-full" })
 							]
-						}), footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, { components: footerComponents }, "footer") })]
+						}), footer && /* @__PURE__ */ jsx("footer", {
+							className: "univer-shrink-0",
+							children: /* @__PURE__ */ jsx(ComponentContainer, { components: footerComponents }, "footer")
+						})]
 					})]
 				}), (!ready || externalSkeletonVisible) && /* @__PURE__ */ jsx(WorkbenchSkeleton, {
 					darkMode,
@@ -24981,7 +25797,7 @@ function MobileWorkbench(props) {
 					/* @__PURE__ */ jsx(MobileSidebar, {})
 				]
 			})] })
-		})
+		}) })
 	});
 }
 
@@ -25531,7 +26347,8 @@ function MobileContextConfirm(props) {
 	});
 }
 function MobileConfirmPart() {
-	return useObservable(useDependency(IConfirmService).confirmOptions$, []).map((options) => {
+	const confirmService = useDependency(IConfirmService);
+	return useObservable(confirmService.confirmOptions$, []).map((options) => {
 		const { children, title, ...restProps } = options;
 		const confirmProps = restProps;
 		for (const key of ["children", "title"]) {
@@ -25615,16 +26432,26 @@ function toMobileDialogOptions(options) {
 function MobileDialogPart() {
 	const dialogService = useDependency(IDialogService);
 	const localeService = useDependency(LocaleService);
+	const { locale } = useContext(ConfigContext);
 	const dialogOptions = useObservable(dialogService.getDialogs$(), []);
 	const options = useMemo(() => {
 		const activeDialogs = dialogOptions.filter((item) => item.open !== false);
 		const active = activeDialogs[activeDialogs.length - 1];
 		return active ? toMobileDialogOptions(active) : null;
 	}, [dialogOptions]);
-	const [drawerSnap, setDrawerSnap] = useState("expanded");
+	const [snapOverride, setSnapOverride] = useState(null);
 	const layerRef = useRef(null);
 	const backdropPointerIdRef = useRef(null);
 	if (!options) return null;
+	const defaultSnap = options.layout === "canvas" ? "compact" : "expanded";
+	const footer = options.footer ?? (options.showOk || options.showCancel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [options.showCancel && /* @__PURE__ */ jsx(Button, {
+		onClick: options.onCancel,
+		children: locale === null || locale === void 0 ? void 0 : locale.Confirm.cancel
+	}), options.showOk && /* @__PURE__ */ jsx(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);
@@ -25633,12 +26460,12 @@ function MobileDialogPart() {
 	};
 	return /* @__PURE__ */ 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__ */ jsx("button", {
+		children: [options.layout !== "canvas" && /* @__PURE__ */ 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;
 			},
@@ -25652,11 +26479,15 @@ function MobileDialogPart() {
 			}
 		}), /* @__PURE__ */ 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                    ",
@@ -25674,9 +26505,9 @@ function MobileDialogPart() {
 					children: /* @__PURE__ */ jsx(CloseIcon, {})
 				})]
 			}),
-			footer: options.footer ? /* @__PURE__ */ jsx("footer", {
+			footer: footer ? /* @__PURE__ */ 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__ */ jsx(MobileActionRowGroup, { children: options.footer })
+				children: /* @__PURE__ */ jsx(MobileActionRowGroup, { children: footer })
 			}) : void 0,
 			children: options.children
 		})]
@@ -25728,7 +26559,8 @@ function DialogItem(props) {
 	});
 }
 function DialogPart() {
-	const dialogOptions = useObservable(useDependency(IDialogService).getDialogs$(), []);
+	const dialogService = useDependency(IDialogService);
+	const dialogOptions = useObservable(dialogService.getDialogs$(), []);
 	const attrs = useMemo(() => dialogOptions.map((options) => {
 		const { children, title, footer, ...restProps } = options;
 		const dialogProps = restProps;
@@ -25858,7 +26690,8 @@ const IGalleryService = createIdentifier("univer.ui.gallery-service");
 * limitations under the License.
 */
 function GalleryPart() {
-	const gallery = useObservable(useDependency(IGalleryService).gallery$);
+	const galleryService = useDependency(IGalleryService);
+	const gallery = useObservable(galleryService.gallery$);
 	if (!gallery) return null;
 	return /* @__PURE__ */ jsx(Gallery, { ...gallery });
 }
@@ -26207,7 +27040,8 @@ var DesktopLocalStorageService = class {
 */
 function MessageContainer() {
 	const localeService = useDependency(LocaleService);
-	const darkMode = useObservable(useDependency(ThemeService).darkMode$);
+	const themeService = useDependency(ThemeService);
+	const darkMode = useObservable(themeService.darkMode$);
 	const direction = useObservable(localeService.direction$);
 	return /* @__PURE__ */ jsx(Messager, {
 		theme: darkMode ? "dark" : "light",
@@ -26235,7 +27069,8 @@ let DesktopMessageService = class DesktopMessageService extends Disposable {
 	show(options) {
 		const id = options.id ?? `message-${Date.now()}-${messageId}`;
 		messageId += 1;
-		message(Object.assign({}, options, { id }));
+		const op = Object.assign({}, options, { id });
+		message(op);
 		return toDisposable(() => removeMessage(id));
 	}
 	remove(id) {
@@ -26251,22 +27086,28 @@ DesktopMessageService = __decorate([__decorateParam(0, Inject(Injector)), __deco
 //#region src/views/notification/Notification.tsx
 function Notification() {
 	const localeService = useDependency(LocaleService);
-	const darkMode = useObservable(useDependency(ThemeService).darkMode$);
+	const themeService = useDependency(ThemeService);
+	const darkMode = useObservable(themeService.darkMode$);
 	const direction = useObservable(localeService.direction$);
 	return /* @__PURE__ */ jsx(Toaster, {
 		theme: darkMode ? "dark" : "light",
 		dir: direction
 	});
 }
-const notification = { show: (options) => {
-	const { type = "message", title, content, duration, closable = true, position = "top-right" } = options;
-	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 toast[type](title, {
+			position,
+			description: content,
+			duration,
+			closeButton: closable,
+			dismissible,
+			action
+		});
+	},
+	dismiss: (id) => toast.dismiss(id)
+};
 
 //#endregion
 //#region src/services/notification/desktop-notification.service.ts
@@ -26278,8 +27119,8 @@ let DesktopNotificationService = class DesktopNotificationService extends Dispos
 		this._initUIPart();
 	}
 	show(params) {
-		notification.show(params);
-		return toDisposable(() => {});
+		const notificationID = notification.show(params);
+		return toDisposable(() => notification.dismiss(notificationID));
 	}
 	_initUIPart() {
 		this.disposeWithMe(this._uiPartsService.registerComponent("global", () => connectInjector(Notification, this._injector)));
@@ -26512,10 +27353,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends Plugin {
 				useClass: DesktopSidebarService,
 				lazy: true
 			}],
-			[IMessageService, {
-				useClass: DesktopMessageService,
-				lazy: true
-			}],
+			[IMessageService, { useClass: DesktopMessageService }],
 			[ILocalStorageService, {
 				useClass: DesktopLocalStorageService,
 				lazy: true
@@ -26530,6 +27368,8 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends Plugin {
 				useFactory: (injector) => injector.createInstance(MobileUIController, this._config),
 				deps: [Injector]
 			}],
+			[FormatPainterSessionService],
+			[FormatPainterController],
 			[SharedController],
 			[ErrorController]
 		], this._config.override));
@@ -26540,7 +27380,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends Plugin {
 		]);
 	}
 	onReady() {
-		touchDependencies(this._injector, [[SharedController]]);
+		touchDependencies(this._injector, [[SharedController], [FormatPainterController]]);
 	}
 };
 _defineProperty(UniverMobileUIPlugin, "pluginName", "UNIVER_MOBILE_UI_PLUGIN");
@@ -27273,8 +28113,10 @@ function ObjectPermissionDialog({ target, name, commandId, actions = DEFAULT_ACT
 	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();
 	}, [
@@ -27597,6 +28439,8 @@ let ComponentsController = class ComponentsController extends Disposable {
 	}
 	_registerIcons() {
 		this.disposeWithMe(this._iconManager.register({
+			BrushIcon,
+			ClearFormatDoubleIcon,
 			ExpandIcon,
 			IncreaseIcon,
 			KeyboardIcon,
@@ -27681,7 +28525,8 @@ const ContextConfirm = (props) => {
 	});
 };
 function ConfirmPart() {
-	const props = useObservable(useDependency(IConfirmService).confirmOptions$, []).map((options) => {
+	const confirmService = useDependency(IConfirmService);
+	const props = useObservable(confirmService.confirmOptions$, []).map((options) => {
 		const { children, title, ...restProps } = options;
 		const confirmProps = restProps;
 		for (const key of ["children", "title"]) {
@@ -27811,10 +28656,7 @@ let UniverUIPlugin = class UniverUIPlugin extends Plugin {
 				useClass: DesktopSidebarService,
 				lazy: true
 			}],
-			[IMessageService, {
-				useClass: DesktopMessageService,
-				lazy: true
-			}],
+			[IMessageService, { useClass: DesktopMessageService }],
 			[ILocalStorageService, {
 				useClass: DesktopLocalStorageService,
 				lazy: true
@@ -27829,6 +28671,8 @@ let UniverUIPlugin = class UniverUIPlugin extends Plugin {
 				useFactory: (injector) => injector.createInstance(DesktopUIController, this._config),
 				deps: [Injector]
 			}],
+			[FormatPainterSessionService],
+			[FormatPainterController],
 			[SharedController],
 			[ErrorController],
 			[FeatureSearchController],
@@ -27841,7 +28685,11 @@ let UniverUIPlugin = class UniverUIPlugin extends Plugin {
 		]);
 	}
 	onReady() {
-		touchDependencies(this._injector, [[SharedController], [FeatureSearchController]]);
+		touchDependencies(this._injector, [
+			[SharedController],
+			[FormatPainterController],
+			[FeatureSearchController]
+		]);
 	}
 	onSteady() {
 		touchDependencies(this._injector, [[ShortcutPanelController]]);
@@ -28002,11 +28850,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") {
@@ -28090,12 +28940,14 @@ function handleStringToStyle($dom, cssStyle = "") {
 			}
 		}
 		if (key === "univer-underline") styleList.ul = { s: 1 };
-		if (key === "vertical-align") if (value === "sub") styleList.va = BaselineOffset.SUBSCRIPT;
-		else if (value === "super") styleList.va = 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 = BaselineOffset.NORMAL;
+		if (key === "vertical-align") {
+			if (value === "sub") styleList.va = BaselineOffset.SUBSCRIPT;
+			else if (value === "super") styleList.va = 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 = BaselineOffset.NORMAL;
+		}
 		if (key === "transform") {
 			const values = value.split(")");
 			const index = values.findIndex((item) => item.includes("rotate"));
@@ -28111,11 +28963,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;
@@ -28388,20 +29242,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
@@ -28476,7 +29332,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;
 }
@@ -28491,6 +29348,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 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(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 = memo((props) => {
@@ -28594,6 +29666,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 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 = useDependency(LocaleService);
+	const disabled = useObservable(props.disabled$);
+	const { fonts } = useFontList();
+	return /* @__PURE__ */ jsx(MobileSelect, {
+		"aria-label": props.ariaLabel,
+		className: 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
 /**
@@ -28615,19 +29785,20 @@ function ProgressBar(props) {
 	const { barColor, progress, onTerminate, onClearProgress } = props;
 	const { count, done, label = "" } = progress;
 	const progressBarInnerRef = useRef(null);
-	const [visible, setVisible] = useState(false);
+	const [completedProgress, setCompletedProgress] = useState();
+	const visible = count > 0 && completedProgress !== progress;
 	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}%`;
 				});
 			});
@@ -28635,15 +29806,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__ */ jsxs("div", {
 		className: clsx("univer-mx-2 univer-flex univer-items-center univer-gap-2", {
 			"univer-flex": visible,
@@ -28677,4 +29854,4 @@ function ProgressBar(props) {
 }
 
 //#endregion
-export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomPreviewService, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, EMBED_CHILD_UNIT_ID_ATTRIBUTE, EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, EMOJI_CATEGORIES, EMOJI_PICKER_COMPONENT, EMOJI_RECENT_LIMIT, EmojiPicker, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FloatingObjectToolbarPosition, FontFamily, FontFamilyDropdown, FontFamilyItem, FontService, FontSize, HEADING_ITEM_COMPONENT, HEADING_LIST, HOVER_TRACK_HOST_CLASS_NAME, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, HoverTrack, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonOverrideService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IUIRuntimeScopeService, IUnitPresenceUIAdapterRegistry, IWorkbenchService, IconManager, KeyCode, MOBILE_UI_MODE, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MobileDialogService, MobileDrawer, MobileKeyboardInsetContext, MobileMenu, MockMessageService, NativeTextEditorShortcutBehavior, ObjectPermissionButton, ObjectPermissionPanelButton, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonOverrideService, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SYMBOL_CATEGORIES, SYMBOL_PICKER_COMPONENT, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, SymbolPicker, ThemeSwitcherService, ToggleFullscreenOperation, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UIRuntimeScopeService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoRedoGroupService, UndoShortcutItem, UnitPresenceUIAdapterRegistry, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, WorkbenchService, ZIndexManager, ZoomInput, connectDependencies, connectInjector, getAllEmojis, getDefaultRecentEmojis, getEmbedBoundaryOwner, getEmbedChildUnitId, getEmojiLocaleData, getHeaderFooterMenuHiddenObservable, getLocalizedEmojiTitle, getMenuHiddenObservable, getRandomEmoji, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, isEmbedBoundaryTarget, keepInteractionInsideSameEmbedBoundary, mergeMenuConfigs, objectPermissionMenuItemFactory, openObjectPermissionDialog, openObjectPermissionPanel, parseHtmlDocument, parseHtmlFragment, parseStoredRecentEmojis, preventBrowserZoomInContainers, promoteRecentEmoji, sanitizeParsedHtml, searchEmojis, splitSpanText, supportClipboardAPI, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };
+export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomPreviewService, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, EMBED_CHILD_UNIT_ID_ATTRIBUTE, EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, EMOJI_CATEGORIES, EMOJI_PICKER_COMPONENT, EMOJI_RECENT_LIMIT, EmojiPicker, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FloatingObjectToolbarPosition, FontFamily, FontFamilyDropdown, FontFamilyItem, FontService, FontSize, FormatPainterSessionService, HEADING_ITEM_COMPONENT, HEADING_LIST, HOVER_TRACK_HOST_CLASS_NAME, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, HoverTrack, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonOverrideService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IUIRuntimeScopeService, IUnitPresenceUIAdapterRegistry, IWorkbenchService, IconManager, KeyCode, MOBILE_UI_MODE, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileCanvasGesture, MobileContextMenu, MobileDialogService, MobileDrawer, MobileFontFamilyDropdown, MobileKeyboardInsetContext, MobileMenu, MobileZoomIndicator, MockMessageService, NativeTextEditorShortcutBehavior, ObjectPermissionButton, ObjectPermissionPanelButton, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonOverrideService, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SYMBOL_CATEGORIES, SYMBOL_PICKER_COMPONENT, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, SymbolPicker, ThemeSwitcherService, ToggleFullscreenOperation, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UIRuntimeScopeService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoRedoGroupService, UndoShortcutItem, UnitPresenceUIAdapterRegistry, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, WorkbenchService, ZIndexManager, ZoomInput, bindFormatPainterCanvas, connectDependencies, connectInjector, getAllEmojis, getDefaultRecentEmojis, getEmbedBoundaryOwner, getEmbedChildUnitId, getEmojiLocaleData, getHeaderFooterMenuHiddenObservable, getLocalizedEmojiTitle, getMenuHiddenObservable, getMobileCanvasPanDelta, getRandomEmoji, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, isEmbedBoundaryTarget, keepInteractionInsideSameEmbedBoundary, mergeMenuConfigs, objectPermissionMenuItemFactory, openObjectPermissionDialog, openObjectPermissionPanel, parseHtmlDocument, parseHtmlFragment, parseStoredRecentEmojis, preventBrowserZoomInContainers, promoteRecentEmoji, sanitizeParsedHtml, searchEmojis, splitSpanText, supportClipboardAPI, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useMobileCanvasPanel, useMobileCanvasViewport, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };