@univerjs/ui 1.0.0-alpha.7 → 1.0.0-beta.0

package/lib/cjs/index.js

@@ -29,19 +29,17 @@ let _univerjs_icons = require("@univerjs/icons");
 const EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE = "data-embed-interaction-boundary-owner";
 const EMBED_CHILD_UNIT_ID_ATTRIBUTE = "data-embed-child-unit-id";
 function getEmbedBoundaryOwner(target) {
-	var _ref, _getAttributeValue;
 	if (!hasClosest(target)) return;
 	const ownerElement = target.closest(`[${EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE}]`);
-	return (_ref = (_getAttributeValue = getAttributeValue(target, "data-embed-interaction-boundary-owner")) !== null && _getAttributeValue !== void 0 ? _getAttributeValue : getAttributeValue(ownerElement, "data-embed-interaction-boundary-owner")) !== null && _ref !== void 0 ? _ref : void 0;
+	return getAttributeValue(target, "data-embed-interaction-boundary-owner") ?? getAttributeValue(ownerElement, "data-embed-interaction-boundary-owner") ?? void 0;
 }
 function isEmbedBoundaryTarget(target) {
 	return hasClosest(target) && target.closest(`[${"data-embed-interaction-boundary-owner"}]`) != null;
 }
 function getEmbedChildUnitId(target) {
-	var _ref2, _getAttributeValue2;
 	if (!hasClosest(target)) return;
 	const childRuntime = target.closest(`[${EMBED_CHILD_UNIT_ID_ATTRIBUTE}]`);
-	return (_ref2 = (_getAttributeValue2 = getAttributeValue(target, "data-embed-child-unit-id")) !== null && _getAttributeValue2 !== void 0 ? _getAttributeValue2 : getAttributeValue(childRuntime, "data-embed-child-unit-id")) !== null && _ref2 !== void 0 ? _ref2 : void 0;
+	return getAttributeValue(target, "data-embed-child-unit-id") ?? getAttributeValue(childRuntime, "data-embed-child-unit-id") ?? void 0;
 }
 function keepInteractionInsideSameEmbedBoundary(event) {
 	const owner = getEmbedBoundaryOwner(event.currentTarget);
@@ -52,13 +50,12 @@ function hasClosest(target) {
 	return !!target && typeof target.closest === "function";
 }
 function getAttributeValue(target, name) {
-	var _getAttribute$call;
 	const getAttribute = target === null || target === void 0 ? void 0 : target.getAttribute;
-	return typeof getAttribute === "function" ? (_getAttribute$call = getAttribute.call(target, name)) !== null && _getAttribute$call !== void 0 ? _getAttribute$call : void 0 : void 0;
+	return typeof getAttribute === "function" ? getAttribute.call(target, name) ?? void 0 : void 0;
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -69,7 +66,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -82,14 +79,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.140.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.137.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -100,7 +97,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -108,7 +105,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.140.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);
@@ -860,6 +857,15 @@ var UIRuntimeScopeService = class extends _univerjs_core.Disposable {
 //#endregion
 //#region src/services/shortcut/shortcut.service.ts
 /**
+* Defines whether a Univer shortcut should yield to the browser's native behavior
+* when the keyboard event originates from an editable text element.
+*/
+let NativeTextEditorShortcutBehavior = /* @__PURE__ */ function(NativeTextEditorShortcutBehavior) {
+	NativeTextEditorShortcutBehavior[NativeTextEditorShortcutBehavior["ALLOW_NATIVE"] = 0] = "ALLOW_NATIVE";
+	NativeTextEditorShortcutBehavior[NativeTextEditorShortcutBehavior["OVERRIDE_NATIVE"] = 1] = "OVERRIDE_NATIVE";
+	return NativeTextEditorShortcutBehavior;
+}({});
+/**
 * The dependency injection identifier of the {@link IShortcutService}.
 */
 const IShortcutService = (0, _univerjs_core.createIdentifier)("ui.shortcut.service");
@@ -912,14 +918,13 @@ let ShortcutService = class ShortcutService extends _univerjs_core.Disposable {
 		return null;
 	}
 	getShortcutDisplay(shortcut) {
-		var _KeyCodeToChar;
 		const binding = this._getBindingFromItem(shortcut);
 		if (!binding) return null;
 		const ctrlKey = binding & 4096;
 		const shiftKey = binding & 1024;
 		const altKey = binding & 2048;
 		const macCtrl = binding & 8192;
-		const body = (_KeyCodeToChar = KeyCodeToChar[binding & 255]) !== null && _KeyCodeToChar !== void 0 ? _KeyCodeToChar : "<->";
+		const body = KeyCodeToChar[binding & 255] ?? "<->";
 		if (this._platformService.isMac) return `${ctrlKey ? "⌘+" : ""}${shiftKey ? "⇧+" : ""}${altKey ? "⌥+" : ""}${macCtrl ? "⌃+" : ""}${body}`;
 		return `${ctrlKey ? "Ctrl+" : ""}${shiftKey ? "Shift+" : ""}${altKey ? "Alt+" : ""}${body}`;
 	}
@@ -939,28 +944,25 @@ let ShortcutService = class ShortcutService extends _univerjs_core.Disposable {
 	_resolveKeyboardEvent(e) {
 		const candidate = this.dispatch(e);
 		if (candidate) {
-			var _this$_getRuntimeServ, _this$_getRuntimeServ2;
-			(_this$_getRuntimeServ = (_this$_getRuntimeServ2 = this._getRuntimeService(e, _univerjs_core.ICommandService)) === null || _this$_getRuntimeServ2 === void 0 ? void 0 : _this$_getRuntimeServ2.executeCommand(candidate.id, candidate.staticParameters)) !== null && _this$_getRuntimeServ !== void 0 || this._commandService.executeCommand(candidate.id, candidate.staticParameters);
+			var _this$_getRuntimeServ;
+			((_this$_getRuntimeServ = this._getRuntimeService(e, _univerjs_core.ICommandService)) === null || _this$_getRuntimeServ === void 0 ? void 0 : _this$_getRuntimeServ.executeCommand(candidate.id, candidate.staticParameters)) ?? this._commandService.executeCommand(candidate.id, candidate.staticParameters);
 			e.preventDefault();
 		}
 	}
 	dispatch(e) {
-		var _this$_getRuntimeServ3;
 		if (this._forceEscaped || this._forceDisabled) return;
 		if (this._layoutService && !this._layoutService.checkElementInCurrentContainers(e.target)) return;
 		const binding = this._deriveBindingFromEvent(e);
 		if (binding === null) return;
-		if (this._shouldLetEmbedTextEditorHandleNativeShortcut(e, binding)) return;
 		const shortcuts = this._shortCutMapping.get(binding);
 		if (shortcuts === void 0) return;
-		const contextService = (_this$_getRuntimeServ3 = this._getRuntimeService(e, _univerjs_core.IContextService)) !== null && _this$_getRuntimeServ3 !== void 0 ? _this$_getRuntimeServ3 : this._contextService;
-		return Array.from(shortcuts).sort((s1, s2) => {
-			var _s2$priority, _s1$priority;
-			return ((_s2$priority = s2.priority) !== null && _s2$priority !== void 0 ? _s2$priority : 0) - ((_s1$priority = s1.priority) !== null && _s1$priority !== void 0 ? _s1$priority : 0);
-		}).find((s) => {
-			var _s$preconditions, _s$preconditions2;
-			return (_s$preconditions = (_s$preconditions2 = s.preconditions) === null || _s$preconditions2 === void 0 ? void 0 : _s$preconditions2.call(s, contextService)) !== null && _s$preconditions !== void 0 ? _s$preconditions : true;
+		const contextService = this._getRuntimeService(e, _univerjs_core.IContextService) ?? this._contextService;
+		const candidateShortcut = Array.from(shortcuts).sort((s1, s2) => (s2.priority ?? 0) - (s1.priority ?? 0)).find((s) => {
+			var _s$eventPreconditions, _s$preconditions;
+			return (((_s$eventPreconditions = s.eventPreconditions) === null || _s$eventPreconditions === void 0 ? void 0 : _s$eventPreconditions.call(s, e)) ?? true) && (((_s$preconditions = s.preconditions) === null || _s$preconditions === void 0 ? void 0 : _s$preconditions.call(s, contextService)) ?? true);
 		});
+		if (this._shouldLetEmbedTextEditorHandleNativeShortcut(e, binding) && (candidateShortcut === null || candidateShortcut === void 0 ? void 0 : candidateShortcut.nativeTextEditorBehavior) !== 1) return;
+		return candidateShortcut;
 	}
 	_getBindingFromItem(item) {
 		if (this._platformService.isMac && item.mac) return item.mac;
@@ -1299,7 +1301,7 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 	* @param target default is root menu
 	*/
 	mergeMenu(source, target) {
-		const _target = target !== null && target !== void 0 ? target : this._menu;
+		const _target = target ?? this._menu;
 		for (const [key, value] of Object.entries(_target)) if (key in source) {
 			const targetRecord = _target;
 			const sourceRecord = source;
@@ -1366,7 +1368,6 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 	* @returns Menu schema array or empty array if not found
 	*/
 	getMenuByPositionKey(key) {
-		var _findKey;
 		const findKey = (obj) => {
 			if (key in obj) return this._buildMenuSchema(obj[key]);
 			for (const k in obj) {
@@ -1377,7 +1378,7 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 				}
 			}
 		};
-		return (_findKey = findKey(this._menu)) !== null && _findKey !== void 0 ? _findKey : [];
+		return findKey(this._menu) ?? [];
 	}
 	/**
 	* Get flat menu schema by position key
@@ -1401,7 +1402,7 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 };
 MenuManagerService = _MenuManagerService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, _univerjs_core.IConfigService)], MenuManagerService);
 function normalizeMenuOrder(order) {
-	return order !== null && order !== void 0 ? order : 0;
+	return order ?? 0;
 }
 function isMenuSchemaRecord(value) {
 	return value != null && typeof value === "object" && !Array.isArray(value);
@@ -1599,8 +1600,7 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 		const activatedTab = this._activatedTab$.getValue();
 		const activeGroup = ribbon.find((group) => group.key === activatedTab);
 		if (!activeGroup && this._contextualTabs.has(activatedTab)) {
-			var _ref, _ribbon$find;
-			const fallbackTab = (_ref = (_ribbon$find = ribbon.find((group) => group.key === this._lastNonContextualActivatedTab && !group.contextual)) !== null && _ribbon$find !== void 0 ? _ribbon$find : ribbon.find((group) => group.key === "ribbon.start")) !== null && _ref !== void 0 ? _ref : ribbon[0];
+			const fallbackTab = ribbon.find((group) => group.key === this._lastNonContextualActivatedTab && !group.contextual) ?? ribbon.find((group) => group.key === "ribbon.start") ?? ribbon[0];
 			if (fallbackTab) this._activatedTab$.next(fallbackTab.key);
 		} else if (!activeGroup && ribbon.some((group) => group.key === "ribbon.start")) {
 			const fallbackTab = ribbon.find((group) => group.key === "ribbon.start");
@@ -1650,12 +1650,10 @@ function useObservableRef(observable, defaultValue) {
 const FEATURE_SEARCH_COMPONENT = "FeatureSearch";
 const FEATURE_SEARCH_DIALOG_ID = "FEATURE_SEARCH_DIALOG";
 function resolveParams(item, value) {
-	const params = typeof item.params === "function" ? item.params() : item.params;
-	return params !== null && params !== void 0 ? params : value === void 0 ? void 0 : { value };
+	return (typeof item.params === "function" ? item.params() : item.params) ?? (value === void 0 ? void 0 : { value });
 }
 function resolveOptionParams(option) {
-	const params = typeof option.params === "function" ? option.params(option.value) : option.params;
-	return params !== null && params !== void 0 ? params : option.value === void 0 ? void 0 : { value: option.value };
+	return (typeof option.params === "function" ? option.params(option.value) : option.params) ?? (option.value === void 0 ? void 0 : { value: option.value });
 }
 function deduplicate(items) {
 	return items.filter((item, index) => items.findIndex((candidate) => candidate.commandId === item.commandId && _univerjs_core.Tools.diffValue(candidate.params, item.params)) === index);
@@ -1669,14 +1667,12 @@ function FeatureSearch() {
 	const ribbonService = (0, _wendellhu_redi_react_bindings.useDependency)(IRibbonService);
 	const items = (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
 		function getItemTitle(item) {
-			var _ref, _item$title;
-			const titleKey = (_ref = (_item$title = item.title) !== null && _item$title !== void 0 ? _item$title : item.tooltip) !== null && _ref !== void 0 ? _ref : item.description;
+			const titleKey = item.title ?? item.tooltip ?? item.description;
 			return titleKey ? localeService.t(titleKey) : "";
 		}
 		function collectCandidates(schemas, path, keyPath, ancestors = [], parentTitle) {
 			return schemas.flatMap((schema, index) => {
-				var _schema$title;
-				const schemaTitle = localeService.t((_schema$title = schema.title) !== null && _schema$title !== void 0 ? _schema$title : "");
+				const schemaTitle = localeService.t(schema.title ?? "");
 				const schemaPath = schemaTitle ? [...path, schemaTitle] : path;
 				const schemaKeyPath = [...keyPath, `${schema.key}:${index}`];
 				const result = [];
@@ -1699,48 +1695,44 @@ function FeatureSearch() {
 			});
 		}
 		function observeCandidate(candidate) {
-			var _item$hidden$$pipe, _item$hidden$, _item$disabled$$pipe, _item$disabled$, _item$value$$pipe, _item$value$;
+			var _item$hidden$, _item$disabled$, _item$value$;
 			const { item } = candidate;
 			const hasOptions = item.type === 1 || item.type === 2;
 			const selections = hasOptions ? item.selections : void 0;
-			const selections$ = (0, rxjs.isObservable)(selections) ? selections.pipe((0, rxjs_operators.startWith)([])) : (0, rxjs.of)(selections !== null && selections !== void 0 ? selections : []);
+			const selections$ = (0, rxjs.isObservable)(selections) ? selections.pipe((0, rxjs_operators.startWith)([])) : (0, rxjs.of)(selections ?? []);
 			return (0, rxjs.combineLatest)([
 				candidate.ancestors.length ? (0, rxjs.combineLatest)(candidate.ancestors.map((ancestor) => {
-					var _ancestor$hidden$$pip, _ancestor$hidden$;
-					return (_ancestor$hidden$$pip = (_ancestor$hidden$ = ancestor.hidden$) === null || _ancestor$hidden$ === void 0 ? void 0 : _ancestor$hidden$.pipe((0, rxjs_operators.startWith)(true))) !== null && _ancestor$hidden$$pip !== void 0 ? _ancestor$hidden$$pip : (0, rxjs.of)(false);
+					var _ancestor$hidden$;
+					return ((_ancestor$hidden$ = ancestor.hidden$) === null || _ancestor$hidden$ === void 0 ? void 0 : _ancestor$hidden$.pipe((0, rxjs_operators.startWith)(true))) ?? (0, rxjs.of)(false);
 				})).pipe((0, rxjs_operators.map)((states) => states.some(Boolean))) : (0, rxjs.of)(false),
 				candidate.ancestors.length ? (0, rxjs.combineLatest)(candidate.ancestors.map((ancestor) => {
-					var _ancestor$disabled$$p, _ancestor$disabled$;
-					return (_ancestor$disabled$$p = (_ancestor$disabled$ = ancestor.disabled$) === null || _ancestor$disabled$ === void 0 ? void 0 : _ancestor$disabled$.pipe((0, rxjs_operators.startWith)(true))) !== null && _ancestor$disabled$$p !== void 0 ? _ancestor$disabled$$p : (0, rxjs.of)(false);
+					var _ancestor$disabled$;
+					return ((_ancestor$disabled$ = ancestor.disabled$) === null || _ancestor$disabled$ === void 0 ? void 0 : _ancestor$disabled$.pipe((0, rxjs_operators.startWith)(true))) ?? (0, rxjs.of)(false);
 				})).pipe((0, rxjs_operators.map)((states) => states.some(Boolean))) : (0, rxjs.of)(false),
-				(_item$hidden$$pipe = (_item$hidden$ = item.hidden$) === null || _item$hidden$ === void 0 ? void 0 : _item$hidden$.pipe((0, rxjs_operators.startWith)(true))) !== null && _item$hidden$$pipe !== void 0 ? _item$hidden$$pipe : (0, rxjs.of)(false),
-				(_item$disabled$$pipe = (_item$disabled$ = item.disabled$) === null || _item$disabled$ === void 0 ? void 0 : _item$disabled$.pipe((0, rxjs_operators.startWith)(true))) !== null && _item$disabled$$pipe !== void 0 ? _item$disabled$$pipe : (0, rxjs.of)(false),
-				(_item$value$$pipe = (_item$value$ = item.value$) === null || _item$value$ === void 0 ? void 0 : _item$value$.pipe((0, rxjs_operators.startWith)(void 0))) !== null && _item$value$$pipe !== void 0 ? _item$value$$pipe : (0, rxjs.of)(void 0),
+				((_item$hidden$ = item.hidden$) === null || _item$hidden$ === void 0 ? void 0 : _item$hidden$.pipe((0, rxjs_operators.startWith)(true))) ?? (0, rxjs.of)(false),
+				((_item$disabled$ = item.disabled$) === null || _item$disabled$ === void 0 ? void 0 : _item$disabled$.pipe((0, rxjs_operators.startWith)(true))) ?? (0, rxjs.of)(false),
+				((_item$value$ = item.value$) === null || _item$value$ === void 0 ? void 0 : _item$value$.pipe((0, rxjs_operators.startWith)(void 0))) ?? (0, rxjs.of)(void 0),
 				selections$
 			]).pipe((0, rxjs_operators.map)(([ancestorHidden, ancestorDisabled, hidden, disabled, value, options]) => {
 				if (ancestorHidden || ancestorDisabled || hidden || disabled) return [];
 				const title = getItemTitle(item);
 				const path = candidate.path.join(" / ");
 				const result = [];
-				if (title && item.type !== 1 && item.type !== 3) {
-					var _item$description, _item$commandId;
-					result.push({
-						key: candidate.key,
-						title,
-						parentTitle: candidate.parentTitle,
-						description: localeService.t((_item$description = item.description) !== null && _item$description !== void 0 ? _item$description : ""),
-						path,
-						commandId: (_item$commandId = item.commandId) !== null && _item$commandId !== void 0 ? _item$commandId : item.id,
-						params: resolveParams(item, value),
-						getParams: () => resolveParams(item, value)
-					});
-				}
+				if (title && item.type !== 1 && item.type !== 3) result.push({
+					key: candidate.key,
+					title,
+					parentTitle: candidate.parentTitle,
+					description: localeService.t(item.description ?? ""),
+					path,
+					commandId: item.commandId ?? item.id,
+					params: resolveParams(item, value),
+					getParams: () => resolveParams(item, value)
+				});
 				if (hasOptions) options.forEach((option, index) => {
-					var _ref2, _ref3, _ref4, _option$commandId, _ref5, _ref6, _option$id;
 					if (option.disabled || typeof option.label !== "string") return;
-					const commandId = (_ref2 = (_ref3 = (_ref4 = (_option$commandId = option.commandId) !== null && _option$commandId !== void 0 ? _option$commandId : option.id) !== null && _ref4 !== void 0 ? _ref4 : item.selectionsCommandId) !== null && _ref3 !== void 0 ? _ref3 : item.commandId) !== null && _ref2 !== void 0 ? _ref2 : item.id;
+					const commandId = option.commandId ?? option.id ?? item.selectionsCommandId ?? item.commandId ?? item.id;
 					result.push({
-						key: `${candidate.key}:option:${(_ref5 = (_ref6 = (_option$id = option.id) !== null && _option$id !== void 0 ? _option$id : option.commandId) !== null && _ref6 !== void 0 ? _ref6 : option.value) !== null && _ref5 !== void 0 ? _ref5 : index}`,
+						key: `${candidate.key}:option:${option.id ?? option.commandId ?? option.value ?? index}`,
 						title: localeService.t(option.label),
 						parentTitle: title,
 						description: "",
@@ -1773,35 +1765,32 @@ function FeatureSearch() {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.CommandInput, {
 			autoFocus: true,
 			placeholder: localeService.t("ui.featureSearch.placeholder")
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.CommandList, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.CommandEmpty, { children: localeService.t("ui.featureSearch.empty") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.CommandGroup, { children: items.map((item) => {
-			var _item$parentTitle;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.CommandItem, {
-				value: item.key,
-				keywords: [
-					(_item$parentTitle = item.parentTitle) !== null && _item$parentTitle !== void 0 ? _item$parentTitle : "",
-					item.title,
-					item.description,
-					item.path
-				],
-				onSelect: () => execute(item),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "univer-flex univer-min-w-0 univer-flex-1 univer-items-center univer-gap-1",
-					children: [item.parentTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "univer-shrink-0",
-						children: item.parentTitle
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "univer-text-gray-400",
-						children: "/"
-					})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "univer-truncate",
-						children: item.title
-					})]
-				}), item.path && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "univer-max-w-1/2 univer-truncate univer-text-xs univer-text-gray-400",
-					children: item.path
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.CommandList, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.CommandEmpty, { children: localeService.t("ui.featureSearch.empty") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.CommandGroup, { children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.CommandItem, {
+			value: item.key,
+			keywords: [
+				item.parentTitle ?? "",
+				item.title,
+				item.description,
+				item.path
+			],
+			onSelect: () => execute(item),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "univer-flex univer-min-w-0 univer-flex-1 univer-items-center univer-gap-1",
+				children: [item.parentTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-shrink-0",
+					children: item.parentTitle
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-text-gray-400",
+					children: "/"
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-truncate",
+					children: item.title
 				})]
-			}, item.key);
-		}) })] })]
+			}), item.path && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "univer-max-w-1/2 univer-truncate univer-text-xs univer-text-gray-400",
+				children: item.path
+			})]
+		}, item.key)) })] })]
 	});
 }
 
@@ -1939,6 +1928,7 @@ var UIPartsService = class extends _univerjs_core.Disposable {
 	constructor(..._args) {
 		super(..._args);
 		_defineProperty(this, "_componentsByPart", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_disabledUIParts", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_componentRegistered$", new rxjs.Subject());
 		_defineProperty(this, "componentRegistered$", this._componentRegistered$.asObservable());
 		_defineProperty(this, "_uiVisible", /* @__PURE__ */ new Map());
@@ -1948,20 +1938,54 @@ var UIPartsService = class extends _univerjs_core.Disposable {
 	dispose() {
 		super.dispose();
 		this._componentsByPart.clear();
+		this._disabledUIParts.clear();
 		this._uiVisible.clear();
 		this._componentRegistered$.complete();
 		this._uiVisibleChange$.complete();
 	}
 	setUIVisible(part, visible) {
+		const wasVisible = this.isUIVisible(part);
 		this._uiVisible.set(part, visible);
-		this._uiVisibleChange$.next({
+		const isVisible = this.isUIVisible(part);
+		if (wasVisible !== isVisible) this._uiVisibleChange$.next({
 			ui: part,
-			visible
+			visible: isVisible
 		});
 	}
 	isUIVisible(part) {
-		var _this$_uiVisible$get;
-		return (_this$_uiVisible$get = this._uiVisible.get(part)) !== null && _this$_uiVisible$get !== void 0 ? _this$_uiVisible$get : true;
+		var _this$_disabledUIPart;
+		return (this._uiVisible.get(part) ?? true) && !((_this$_disabledUIPart = this._disabledUIParts.get(part)) === null || _this$_disabledUIPart === void 0 ? void 0 : _this$_disabledUIPart.size);
+	}
+	registerDisabledUIParts(parts, disabled$) {
+		const uniqueParts = [...new Set(parts)];
+		const registration = Symbol("disabled-ui-parts");
+		let disabled = false;
+		const update = (nextDisabled) => {
+			if (disabled === nextDisabled) return;
+			disabled = nextDisabled;
+			uniqueParts.forEach((part) => {
+				const wasVisible = this.isUIVisible(part);
+				const registrations = this._disabledUIParts.get(part) ?? /* @__PURE__ */ new Set();
+				if (disabled) {
+					registrations.add(registration);
+					this._disabledUIParts.set(part, registrations);
+				} else {
+					registrations.delete(registration);
+					if (registrations.size === 0) this._disabledUIParts.delete(part);
+				}
+				const isVisible = this.isUIVisible(part);
+				if (wasVisible !== isVisible) this._uiVisibleChange$.next({
+					ui: part,
+					visible: isVisible
+				});
+			});
+		};
+		const subscription = disabled$.subscribe(update);
+		const disposable = (0, _univerjs_core.toDisposable)(() => {
+			subscription.unsubscribe();
+			update(false);
+		});
+		return this.disposeWithMe(disposable);
 	}
 	registerComponent(part, componentFactory) {
 		const componentType = componentFactory();
@@ -1990,6 +2014,7 @@ var CanvasFloatDomService = class extends _univerjs_core.Disposable {
 	constructor(..._args) {
 		super(..._args);
 		_defineProperty(this, "_domLayerMap", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_scopedRenderRootCount", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_domLayers$", new rxjs.BehaviorSubject([]));
 		_defineProperty(this, "domLayers$", this._domLayers$.asObservable());
 	}
@@ -2012,6 +2037,20 @@ var CanvasFloatDomService = class extends _univerjs_core.Disposable {
 		this._domLayerMap.set(item.id, item);
 		this._notice();
 	}
+	hasScopedRenderRoot(unitId) {
+		return this._scopedRenderRootCount.has(unitId);
+	}
+	registerScopedRenderRoot(unitId) {
+		this._scopedRenderRootCount.set(unitId, (this._scopedRenderRootCount.get(unitId) ?? 0) + 1);
+		this._notice();
+		return (0, _univerjs_core.toDisposable)(() => {
+			const count = this._scopedRenderRootCount.get(unitId);
+			if (count == null) return;
+			if (count === 1) this._scopedRenderRootCount.delete(unitId);
+			else this._scopedRenderRootCount.set(unitId, count - 1);
+			this._notice();
+		});
+	}
 	removeFloatDom(id) {
 		if (this._domLayerMap.delete(id)) this._notice();
 	}
@@ -2021,6 +2060,7 @@ var CanvasFloatDomService = class extends _univerjs_core.Disposable {
 	}
 	dispose() {
 		this._domLayerMap.clear();
+		this._scopedRenderRootCount.clear();
 		this._domLayers$.next([]);
 		this._domLayers$.complete();
 		super.dispose();
@@ -2067,9 +2107,8 @@ var CanvasFloatDomPreviewService = class extends _univerjs_core.Disposable {
 const LEGACY_WRAPPER_INSET = 2;
 const LEGACY_CONTENT_INSET = 4;
 function resolveFloatDomLayout(position, contentBox) {
-	var _contentBox$wrapperIn, _contentBox$contentIn, _position$opacity;
-	const wrapperInset = (_contentBox$wrapperIn = contentBox === null || contentBox === void 0 ? void 0 : contentBox.wrapperInset) !== null && _contentBox$wrapperIn !== void 0 ? _contentBox$wrapperIn : LEGACY_WRAPPER_INSET;
-	const contentInset = (_contentBox$contentIn = contentBox === null || contentBox === void 0 ? void 0 : contentBox.contentInset) !== null && _contentBox$contentIn !== void 0 ? _contentBox$contentIn : LEGACY_CONTENT_INSET;
+	const wrapperInset = (contentBox === null || contentBox === void 0 ? void 0 : contentBox.wrapperInset) ?? LEGACY_WRAPPER_INSET;
+	const contentInset = (contentBox === null || contentBox === void 0 ? void 0 : contentBox.contentInset) ?? LEGACY_CONTENT_INSET;
 	return {
 		wrapper: {
 			top: position.startY,
@@ -2077,7 +2116,7 @@ function resolveFloatDomLayout(position, contentBox) {
 			width: Math.max(position.endX - position.startX - wrapperInset, 0),
 			height: Math.max(position.endY - position.startY - wrapperInset, 0),
 			transform: `rotate(${position.rotate}deg)`,
-			opacity: (_position$opacity = position.opacity) !== null && _position$opacity !== void 0 ? _position$opacity : 1
+			opacity: position.opacity ?? 1
 		},
 		inner: {
 			width: position.width - contentInset,
@@ -2206,17 +2245,20 @@ function FloatDomSingleContent(props) {
 	});
 }
 const FloatDom = ({ unitId }) => {
-	var _layers$filter;
 	const instanceService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IUniverInstanceService);
-	const layers = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(CanvasFloatDomService).domLayers$);
+	const domLayerService = (0, _wendellhu_redi_react_bindings.useDependency)(CanvasFloatDomService);
+	const layers = (0, _wendellhu_redi_react_bindings.useObservable)(domLayerService.domLayers$);
 	const currentUnitId = resolveFloatDomCurrentUnitId(unitId, (0, _wendellhu_redi_react_bindings.useObservable)(instanceService.focused$));
-	return layers === null || layers === void 0 || (_layers$filter = layers.filter((layer) => shouldRenderFloatDomLayer(layer[1], currentUnitId))) === null || _layers$filter === void 0 ? void 0 : _layers$filter.map((layer) => {
-		var _layer$1$domId;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatDomSingle, {
-			id: (_layer$1$domId = layer[1].domId) !== null && _layer$1$domId !== void 0 ? _layer$1$domId : layer[0],
-			layer: layer[1]
-		}, layer[0]);
-	});
+	(0, react.useEffect)(() => {
+		if (typeof unitId !== "string") return;
+		const disposable = domLayerService.registerScopedRenderRoot(unitId);
+		return () => disposable.dispose();
+	}, [domLayerService, unitId]);
+	const visibleLayers = typeof unitId === "string" ? layers === null || layers === void 0 ? void 0 : layers.filter((layer) => layer[1].unitId === unitId) : layers === null || layers === void 0 ? void 0 : layers.filter((layer) => !domLayerService.hasScopedRenderRoot(layer[1].unitId) && shouldRenderFloatDomLayer(layer[1], currentUnitId));
+	return visibleLayers === null || visibleLayers === void 0 ? void 0 : visibleLayers.map((layer) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatDomSingle, {
+		id: layer[1].domId ?? layer[0],
+		layer: layer[1]
+	}, layer[0]));
 };
 function resolveFloatDomCurrentUnitId(unitId, focusedUnit) {
 	if (typeof unitId === "string") return unitId;
@@ -2228,9 +2270,8 @@ function resolveFloatDomCurrentUnitId(unitId, focusedUnit) {
 	return null;
 }
 function resolveFloatDomOverflow(props) {
-	var _viewport$bleedWidth;
 	const viewport = props.customBlockRenderViewport;
-	if (!(Number.isFinite(viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth) && ((_viewport$bleedWidth = viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth) !== null && _viewport$bleedWidth !== void 0 ? _viewport$bleedWidth : 0) > 0)) return {
+	if (!(Number.isFinite(viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth) && ((viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth) ?? 0) > 0)) return {
 		outerOverflow: "hidden",
 		innerOverflow: "hidden"
 	};
@@ -2354,11 +2395,10 @@ function calcPopupPosition(layout) {
 	};
 }
 function RectPopup(props) {
-	var _uiConfig$popupRootId;
 	const { mask, portal, children, anchorRect$, direction = "vertical", onClickOutside, excludeOutside, excludeRects, onPointerEnter, onPointerLeave, onClick, hidden, onContextMenu, zIndex = 1020, maskZIndex = 100, onMaskClick, noPushMinimumGap, autoRelayout = true } = props;
 	const nodeRef = (0, react.useRef)(null);
-	const clickOtherFn = useEvent(onClickOutside !== null && onClickOutside !== void 0 ? onClickOutside : (() => {}));
-	const contextMenuFn = useEvent(onContextMenu !== null && onContextMenu !== void 0 ? onContextMenu : (() => {}));
+	const clickOtherFn = useEvent(onClickOutside ?? (() => {}));
+	const contextMenuFn = useEvent(onContextMenu ?? (() => {}));
 	const positionRef = (0, react.useRef)({
 		top: -9999,
 		left: -9999
@@ -2367,7 +2407,7 @@ function RectPopup(props) {
 	const configService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IConfigService);
 	const anchorRectRef = (0, react.useRef)(void 0);
 	const uiConfig = configService.getConfig(UI_PLUGIN_CONFIG_KEY);
-	const popupRootId = (_uiConfig$popupRootId = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.popupRootId) !== null && _uiConfig$popupRootId !== void 0 ? _uiConfig$popupRootId : "univer-popup-portal";
+	const popupRootId = (uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.popupRootId) ?? "univer-popup-portal";
 	const updatePosition = useEvent((position) => {
 		requestAnimationFrame(() => {
 			if (!nodeRef.current) return;
@@ -2410,11 +2450,10 @@ function RectPopup(props) {
 	}, [anchorRect$, direction]);
 	(0, react.useEffect)(() => {
 		const handleClickOther = (e) => {
-			var _excludeRectsRef$curr;
 			if (excludeOutside && (excludeOutside.indexOf(e.target) > -1 || excludeOutside.some((item) => item.contains(e.target)))) return;
 			const x = e.clientX;
 			const y = e.clientY;
-			const rects = [...(_excludeRectsRef$curr = excludeRectsRef === null || excludeRectsRef === void 0 ? void 0 : excludeRectsRef.current) !== null && _excludeRectsRef$curr !== void 0 ? _excludeRectsRef$curr : []];
+			const rects = [...(excludeRectsRef === null || excludeRectsRef === void 0 ? void 0 : excludeRectsRef.current) ?? []];
 			if (anchorRectRef.current) rects.push(anchorRectRef.current);
 			for (const rect of rects) if (x <= rect.right && x >= rect.left && y <= rect.bottom && y >= rect.top) return;
 			clickOtherFn(e);
@@ -2474,9 +2513,8 @@ RectPopup.useContext = () => (0, react.useContext)(RectPopupContext);
 //#region src/views/components/popup/CanvasPopup.tsx
 const SingleCanvasPopup = ({ popup, children }) => {
 	const anchorRect$ = (0, react.useMemo)(() => popup.anchorRect$.pipe((0, rxjs.throttleTime)(0, rxjs.animationFrameScheduler), (0, rxjs.map)((anchorRect) => {
-		var _popup$offset;
 		const { bottom, left, right, top } = anchorRect;
-		const [x = 0, y = 0] = (_popup$offset = popup.offset) !== null && _popup$offset !== void 0 ? _popup$offset : [];
+		const [x = 0, y = 0] = popup.offset ?? [];
 		return {
 			left: left - x,
 			right: right + x,
@@ -2485,8 +2523,8 @@ const SingleCanvasPopup = ({ popup, children }) => {
 		};
 	})), [popup.anchorRect$, popup.offset]);
 	const hiddenRects$ = (0, react.useMemo)(() => {
-		var _popup$hiddenRects$$p, _popup$hiddenRects$;
-		return (_popup$hiddenRects$$p = (_popup$hiddenRects$ = popup.hiddenRects$) === null || _popup$hiddenRects$ === void 0 ? void 0 : _popup$hiddenRects$.pipe((0, rxjs.throttleTime)(0, rxjs.animationFrameScheduler))) !== null && _popup$hiddenRects$$p !== void 0 ? _popup$hiddenRects$$p : (0, rxjs.of)([]);
+		var _popup$hiddenRects$;
+		return ((_popup$hiddenRects$ = popup.hiddenRects$) === null || _popup$hiddenRects$ === void 0 ? void 0 : _popup$hiddenRects$.pipe((0, rxjs.throttleTime)(0, rxjs.animationFrameScheduler))) ?? (0, rxjs.of)([]);
 	}, [popup.hiddenRects$]);
 	const excludeRectsRef = useObservableRef((0, react.useMemo)(() => {
 		var _popup$excludeRects$;
@@ -2578,11 +2616,10 @@ var RibbonOverrideService = class extends _univerjs_core.Disposable {
 //#region src/views/components/ComponentContainer.tsx
 function ComponentContainer(props) {
 	const { components, fallback, sharedProps } = props;
-	if (!components || components.size === 0) return fallback !== null && fallback !== void 0 ? fallback : null;
+	if (!components || components.size === 0) return fallback ?? null;
 	return Array.from(components.values()).map((component, index) => {
-		var _component$displayNam;
 		return (0, react.createElement)(component, {
-			key: `${(_component$displayNam = component.displayName) !== null && _component$displayNam !== void 0 ? _component$displayNam : index}`,
+			key: `${component.displayName ?? index}`,
 			...sharedProps
 		});
 	});
@@ -2595,9 +2632,8 @@ function ComponentContainer(props) {
 * component.
 */
 function useComponentsOfPart(part, injector) {
-	var _injector$get;
 	const injectedUIPartsService = (0, _wendellhu_redi_react_bindings.useDependency)(IUIPartsService);
-	const uiPartsService = (_injector$get = injector === null || injector === void 0 ? void 0 : injector.get(IUIPartsService)) !== null && _injector$get !== void 0 ? _injector$get : injectedUIPartsService;
+	const uiPartsService = (injector === null || injector === void 0 ? void 0 : injector.get(IUIPartsService)) ?? injectedUIPartsService;
 	const changeInfo = (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => uiPartsService.uiVisibleChange$.pipe((0, rxjs.filter)((ui) => ui.ui === part)), [part, uiPartsService]));
 	const updateCounterRef = (0, react.useRef)(0);
 	return (0, react.useMemo)(() => uiPartsService.isUIVisible(part) ? uiPartsService.getComponents(part) : /* @__PURE__ */ new Set(), [(0, _wendellhu_redi_react_bindings.useObservable)(() => uiPartsService.componentRegistered$.pipe((0, rxjs.filter)((key) => key === part), (0, rxjs.debounceTime)(200), (0, rxjs.map)(() => updateCounterRef.current += 1), (0, rxjs.startWith)(updateCounterRef.current += 1)), void 0, void 0, [
@@ -2655,8 +2691,7 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 		overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-grid univer-gap-1 univer-px-2 univer-py-1",
 			children: ribbon.map((group) => {
-				var _iconMap;
-				const Icon = (_iconMap = iconMap[group.key]) !== null && _iconMap !== void 0 ? _iconMap : _univerjs_icons.MoreVerticalIcon;
+				const Icon = iconMap[group.key] ?? _univerjs_icons.MoreVerticalIcon;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 					"data-u-comp": "ribbon-group-btn",
 					className: "univer-box-border univer-flex univer-cursor-pointer univer-items-center univer-gap-2.5 univer-rounded-lg univer-px-2 univer-py-1.5 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
@@ -2719,53 +2754,70 @@ function placeRibbonGridItems(items) {
 	const occupied = /* @__PURE__ */ new Set();
 	const placements = /* @__PURE__ */ new Map();
 	const fallbackItems = [];
-	let maxExplicitColumn = 0;
 	for (const item of items) {
-		var _layout$rowSpan, _layout$columnSpan, _layout$showLabel;
 		const layout = item.gridLayout;
 		if (!layout) {
-			fallbackItems.push(item);
+			fallbackItems.push({ item });
 			continue;
 		}
-		const rowSpan = (_layout$rowSpan = layout.rowSpan) !== null && _layout$rowSpan !== void 0 ? _layout$rowSpan : 1;
-		const columnSpan = (_layout$columnSpan = layout.columnSpan) !== null && _layout$columnSpan !== void 0 ? _layout$columnSpan : 1;
+		const rowSpan = layout.rowSpan ?? 1;
+		const columnSpan = layout.columnSpan ?? 1;
 		const cells = getCells(layout.row, layout.column, rowSpan, columnSpan);
-		if (!(cells.length > 0 && layout.row + rowSpan - 1 <= RIBBON_GRID_ROWS && (layout.width === void 0 || Number.isFinite(layout.width) && layout.width > 0) && (layout.iconSize === void 0 || Number.isFinite(layout.iconSize) && layout.iconSize > 0) && cells.every((cell) => !occupied.has(cell)))) {
-			fallbackItems.push(item);
+		if (!isValidGridGeometry(layout, rowSpan, cells)) {
+			fallbackItems.push({ item });
 			continue;
 		}
-		cells.forEach((cell) => occupied.add(cell));
-		maxExplicitColumn = Math.max(maxExplicitColumn, layout.column + columnSpan - 1);
-		placements.set(item, {
+		const placement = {
 			item,
 			row: layout.row,
 			column: layout.column,
 			rowSpan,
 			columnSpan,
-			showLabel: (_layout$showLabel = layout.showLabel) !== null && _layout$showLabel !== void 0 ? _layout$showLabel : false,
+			showLabel: layout.showLabel ?? false,
 			width: layout.width,
 			iconSize: layout.iconSize
-		});
+		};
+		if (cells.some((cell) => occupied.has(cell))) {
+			fallbackItems.push({
+				item,
+				layout: placement
+			});
+			continue;
+		}
+		cells.forEach((cell) => occupied.add(cell));
+		placements.set(item, placement);
 	}
-	let fallbackRow = 1;
-	let fallbackColumn = maxExplicitColumn + 1;
-	for (const item of fallbackItems) {
+	for (const { item, layout } of fallbackItems) {
+		const rowSpan = (layout === null || layout === void 0 ? void 0 : layout.rowSpan) ?? 1;
+		const columnSpan = (layout === null || layout === void 0 ? void 0 : layout.columnSpan) ?? 1;
+		const { row, column, cells } = findFirstAvailableCells(occupied, rowSpan, columnSpan);
+		cells.forEach((cell) => occupied.add(cell));
 		placements.set(item, {
 			item,
-			row: fallbackRow,
-			column: fallbackColumn,
-			rowSpan: 1,
-			columnSpan: 1,
-			showLabel: false
+			row,
+			column,
+			rowSpan,
+			columnSpan,
+			showLabel: (layout === null || layout === void 0 ? void 0 : layout.showLabel) ?? false,
+			width: layout === null || layout === void 0 ? void 0 : layout.width,
+			iconSize: layout === null || layout === void 0 ? void 0 : layout.iconSize
 		});
-		fallbackRow += 1;
-		if (fallbackRow > RIBBON_GRID_ROWS) {
-			fallbackRow = 1;
-			fallbackColumn += 1;
-		}
 	}
 	return items.map((item) => placements.get(item));
 }
+function isValidGridGeometry(layout, rowSpan, cells) {
+	return cells.length > 0 && layout.row + rowSpan - 1 <= RIBBON_GRID_ROWS && (layout.width === void 0 || Number.isFinite(layout.width) && layout.width > 0) && (layout.iconSize === void 0 || Number.isFinite(layout.iconSize) && layout.iconSize > 0);
+}
+function findFirstAvailableCells(occupied, rowSpan, columnSpan) {
+	for (let column = 1;; column++) for (let row = 1; row + rowSpan - 1 <= RIBBON_GRID_ROWS; row++) {
+		const cells = getCells(row, column, rowSpan, columnSpan);
+		if (cells.every((cell) => !occupied.has(cell))) return {
+			row,
+			column,
+			cells
+		};
+	}
+}
 function getCells(row, column, rowSpan, columnSpan) {
 	if (![
 		row,
@@ -2789,13 +2841,13 @@ function CustomLabel(props) {
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const componentManager = (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager);
 	const iconManager = (0, _wendellhu_redi_react_bindings.useDependency)(IconManager);
-	const subscribedValue = (0, _wendellhu_redi_react_bindings.useObservable)(value$ !== null && value$ !== void 0 ? value$ : null, value);
+	const subscribedValue = (0, _wendellhu_redi_react_bindings.useObservable)(value$ ?? null, value);
 	const subscribedIcon = (0, _wendellhu_redi_react_bindings.useObservable)((0, rxjs.isObservable)(icon) ? icon : null, "");
-	const realIcon = (0, rxjs.isObservable)(icon) ? subscribedIcon : icon !== null && icon !== void 0 ? icon : "";
+	const realIcon = (0, rxjs.isObservable)(icon) ? subscribedIcon : icon ?? "";
 	const nodes = [];
 	let index = 0;
 	const realValue = (0, react.useMemo)(() => {
-		return value !== null && value !== void 0 ? value : subscribedValue;
+		return value ?? subscribedValue;
 	}, [subscribedValue, value]);
 	const isValid = (0, react.useMemo)(() => {
 		if (realValue && typeof realValue === "string") return new _univerjs_core.ColorKit(realValue).isValid;
@@ -2845,7 +2897,6 @@ function CustomLabel(props) {
 * @returns The menu item's status
 */
 function useToolbarItemStatus(menuItem) {
-	var _selectionsValue$2;
 	const { disabled$, hidden$, activated$, value$ } = menuItem;
 	let selectionsValue$;
 	if (isMenuButtonSelectorItem(menuItem)) {
@@ -2855,23 +2906,20 @@ function useToolbarItemStatus(menuItem) {
 			selectionsValue$ = selections === null || selections === void 0 || (_selections$ = selections[0]) === null || _selections$ === void 0 ? void 0 : _selections$.value$;
 		}
 	}
-	const disabled = (0, _wendellhu_redi_react_bindings.useObservable)(disabled$ !== null && disabled$ !== void 0 ? disabled$ : null, false);
-	const activated = (0, _wendellhu_redi_react_bindings.useObservable)(activated$ !== null && activated$ !== void 0 ? activated$ : null, false);
-	const hidden = (0, _wendellhu_redi_react_bindings.useObservable)(hidden$ !== null && hidden$ !== void 0 ? hidden$ : null, false);
+	const disabled = (0, _wendellhu_redi_react_bindings.useObservable)(disabled$ ?? null, false);
+	const activated = (0, _wendellhu_redi_react_bindings.useObservable)(activated$ ?? null, false);
+	const hidden = (0, _wendellhu_redi_react_bindings.useObservable)(hidden$ ?? null, false);
 	return {
 		disabled,
-		value: (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
-			var _selectionsValue$;
-			return (0, rxjs.merge)(value$ !== null && value$ !== void 0 ? value$ : rxjs.EMPTY, (_selectionsValue$ = selectionsValue$) !== null && _selectionsValue$ !== void 0 ? _selectionsValue$ : rxjs.EMPTY);
-		}, [selectionsValue$, value$])),
+		value: (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => (0, rxjs.merge)(value$ ?? rxjs.EMPTY, selectionsValue$ ?? rxjs.EMPTY), [selectionsValue$, value$])),
 		activated,
 		hidden,
-		selectionsValue: (0, _wendellhu_redi_react_bindings.useObservable)((_selectionsValue$2 = selectionsValue$) !== null && _selectionsValue$2 !== void 0 ? _selectionsValue$2 : null)
+		selectionsValue: (0, _wendellhu_redi_react_bindings.useObservable)(selectionsValue$ ?? null)
 	};
 }
 function useToolbarShortcutDisplay({ id, commandId, shortcut }) {
 	const shortcutService = (0, _wendellhu_redi_react_bindings.useDependency)(IShortcutService);
-	const shortcutCommandId = commandId !== null && commandId !== void 0 ? commandId : id;
+	const shortcutCommandId = commandId ?? id;
 	return (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => shortcut ? (0, rxjs.of)(shortcut) : shortcutService.shortcutChanged$.pipe((0, rxjs.map)(() => shortcutService.getShortcutDisplayOfCommand(shortcutCommandId)), (0, rxjs.startWith)(shortcutService.getShortcutDisplayOfCommand(shortcutCommandId))), [
 		shortcut,
 		shortcutService,
@@ -3079,8 +3127,8 @@ function DropdownMenuLabel({ icon, value, option, onOptionSelect }) {
 	});
 }
 function getOptionKey(option) {
-	var _ref, _ref2, _option$id, _option$label2;
-	return String((_ref = (_ref2 = (_option$id = option.id) !== null && _option$id !== void 0 ? _option$id : option.commandId) !== null && _ref2 !== void 0 ? _ref2 : option.value) !== null && _ref !== void 0 ? _ref : typeof option.label === "string" ? option.label : (_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.name);
+	var _option$label2;
+	return String(option.id ?? option.commandId ?? option.value ?? (typeof option.label === "string" ? option.label : (_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.name));
 }
 function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled, onOptionSelect }) {
 	const { dropdownVisible, setDropdownVisible } = (0, react.useContext)(TooltipWrapperContext);
@@ -3092,11 +3140,11 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	const menuItems = (0, _wendellhu_redi_react_bindings.useObservable)(() => menuManagerService.menuChanged$.pipe((0, rxjs.map)(resolveMenuItems), (0, rxjs.startWith)(resolveMenuItems())), resolveMenuItems(), false, [menuId, menuManagerService]);
 	const hiddenStates = (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
 		const itemStates = menuItems.map((item) => {
-			var _item$item$hidden$, _item$item;
+			var _item$item;
 			return (item.children ? (0, rxjs.combineLatest)(item.children.map((subItem) => {
-				var _subItem$item$hidden$, _subItem$item;
-				return (_subItem$item$hidden$ = (_subItem$item = subItem.item) === null || _subItem$item === void 0 ? void 0 : _subItem$item.hidden$) !== null && _subItem$item$hidden$ !== void 0 ? _subItem$item$hidden$ : (0, rxjs.of)(false);
-			})).pipe((0, rxjs.map)((hiddenValues) => hiddenValues.every(Boolean))) : (_item$item$hidden$ = (_item$item = item.item) === null || _item$item === void 0 ? void 0 : _item$item.hidden$) !== null && _item$item$hidden$ !== void 0 ? _item$item$hidden$ : (0, rxjs.of)(false)).pipe((0, rxjs.map)((hidden) => [String(item.key), hidden]));
+				var _subItem$item;
+				return ((_subItem$item = subItem.item) === null || _subItem$item === void 0 ? void 0 : _subItem$item.hidden$) ?? (0, rxjs.of)(false);
+			})).pipe((0, rxjs.map)((hiddenValues) => hiddenValues.every(Boolean))) : ((_item$item = item.item) === null || _item$item === void 0 ? void 0 : _item$item.hidden$) ?? (0, rxjs.of)(false)).pipe((0, rxjs.map)((hidden) => [String(item.key), hidden]));
 		});
 		return itemStates.length ? (0, rxjs.merge)(...itemStates).pipe((0, rxjs.scan)((states, [key, hidden]) => ({
 			...states,
@@ -3107,7 +3155,8 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 		return menuItems.filter((item) => {
 			var _item$key;
 			if (!item.children) return !hiddenStates[item.key];
-			return !hiddenStates[((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.toString()) || ""];
+			const itemKey = ((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.toString()) || "";
+			return !hiddenStates[itemKey];
 		});
 	}, [menuItems, hiddenStates]);
 	function handleVisibleChange(visible) {
@@ -3130,15 +3179,15 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 		children
 	});
 	if (options === null || options === void 0 ? void 0 : options.length) {
-		var _options$0$label;
-		const isSingleCustomPanel = options.length === 1 && typeof options[0].label === "object" && ((_options$0$label = options[0].label) === null || _options$0$label === void 0 ? void 0 : _options$0$label.hoverable) === false;
+		var _options$0$label, _options$0$label$prop;
+		const isSingleEmbeddedCustomPanel = filteredMenuItems.length === 0 && options.length === 1 && typeof options[0].label === "object" && ((_options$0$label = options[0].label) === null || _options$0$label === void 0 ? void 0 : _options$0$label.hoverable) === false && ((_options$0$label$prop = options[0].label.props) === null || _options$0$label$prop === void 0 ? void 0 : _options$0$label$prop.embedded) === true;
 		const items = options.map((option) => {
-			var _option$label3, _option$label4;
+			var _option$label3;
 			return {
 				type: "item",
 				className: (0, _univerjs_design.clsx)({
 					"focus:univer-bg-white": typeof option.label !== "string" && ((_option$label3 = option.label) === null || _option$label3 === void 0 ? void 0 : _option$label3.hoverable) === false,
-					"!univer-p-0": typeof option.label !== "string" && ((_option$label4 = option.label) === null || _option$label4 === void 0 ? void 0 : _option$label4.hoverable) === false
+					"!univer-p-0": isSingleEmbeddedCustomPanel
 				}),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuLabel, {
 					icon: option.icon,
@@ -3178,7 +3227,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 		}
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
 			align: "start",
-			className: (0, _univerjs_design.clsx)({ "!univer-p-0": isSingleCustomPanel }),
+			className: (0, _univerjs_design.clsx)({ "!univer-p-0": isSingleEmbeddedCustomPanel }),
 			items,
 			disabled,
 			open: dropdownVisible,
@@ -3317,7 +3366,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 		commandService.executeCommand(commandId, params);
 	};
 	const { tooltip, shortcut, icon, title, label, id, commandId, type, slot, params, grid, large, showLabel, iconSize, iconColor, fullWidth } = props;
-	const gridLabel = title !== null && title !== void 0 ? title : tooltip;
+	const gridLabel = title ?? tooltip;
 	const shortcutDisplay = useToolbarShortcutDisplay({
 		id,
 		commandId,
@@ -3335,8 +3384,8 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 	const iconToDisplay = (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
 		if ((0, rxjs.isObservable)(icon)) return icon;
 		else return new rxjs.Observable((subscribe) => {
-			var _options$find$icon, _options$find;
-			const v = (_options$find$icon = options === null || options === void 0 || (_options$find = options.find((o) => o.value === value)) === null || _options$find === void 0 ? void 0 : _options$find.icon) !== null && _options$find$icon !== void 0 ? _options$find$icon : icon;
+			var _options$find;
+			const v = (options === null || options === void 0 || (_options$find = options.find((o) => o.value === value)) === null || _options$find === void 0 ? void 0 : _options$find.icon) ?? icon;
 			subscribe.next(v);
 		});
 	}, [
@@ -3345,17 +3394,16 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 		value
 	]), void 0, true);
 	function renderSelectorType(menuType) {
-		var _ref;
 		const selectionsCommandId = props.selectionsCommandId;
-		const bId = commandId !== null && commandId !== void 0 ? commandId : id;
-		const sId = (_ref = selectionsCommandId !== null && selectionsCommandId !== void 0 ? selectionsCommandId : commandId) !== null && _ref !== void 0 ? _ref : id;
+		const bId = commandId ?? id;
+		const sId = selectionsCommandId ?? commandId ?? id;
 		const titleToDisplay = grid ? showLabel ? gridLabel : large ? void 0 : title : title;
 		function handleSelect(option) {
 			if (disabled) return;
 			let commandId = sId;
 			if (option.id) commandId = option.id;
 			const commandParams = typeof option.params === "function" ? option.params(option.value) : option.params;
-			executeCommand(commandId, commandParams !== null && commandParams !== void 0 ? commandParams : { value: option.value });
+			executeCommand(commandId, commandParams ?? { value: option.value });
 		}
 		function handleSelectionsValueChange(value) {
 			if (disabled) return;
@@ -3365,7 +3413,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 			if (disabled) return;
 			if (menuType === 2) {
 				const commandParams = typeof params === "function" ? params() : params;
-				executeCommand(bId, commandParams !== null && commandParams !== void 0 ? commandParams : { value });
+				executeCommand(bId, commandParams ?? { value });
 			}
 		}
 		if (menuType === 2) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3388,7 +3436,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 					icon: iconToDisplay,
 					iconSize,
 					title: titleToDisplay,
-					value: iconColor !== null && iconColor !== void 0 ? iconColor : value,
+					value: iconColor ?? value,
 					label,
 					onChange: handleSelectionsValueChange
 				})
@@ -3456,8 +3504,7 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 		});
 	}
 	function renderButtonType() {
-		var _label$name;
-		const isCustomComponent = componentManager.get(typeof label === "string" ? label : (_label$name = label === null || label === void 0 ? void 0 : label.name) !== null && _label$name !== void 0 ? _label$name : "");
+		const isCustomComponent = componentManager.get(typeof label === "string" ? label : (label === null || label === void 0 ? void 0 : label.name) ?? "");
 		const buttonClassName = (0, _univerjs_design.clsx)(grid && !large && "univer-h-full univer-min-w-8 [&>svg]:univer-size-4", grid && large ? "univer-h-full univer-min-w-14 univer-flex-col univer-gap-1 univer-px-1.5 univer-py-1 univer-text-xs [&>svg]:univer-size-8" : showLabel ? "univer-gap-1 univer-px-1.5 univer-text-sm" : "univer-text-sm", grid && fullWidth && isCustomComponent && "!univer-px-0");
 		const buttonStyle = grid && large ? {
 			textAlign: "center",
@@ -3487,9 +3534,8 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 			active: activated,
 			disabled,
 			onClick: () => {
-				var _props$commandId;
 				const commandParams = typeof params === "function" ? params() : params;
-				executeCommand((_props$commandId = props.commandId) !== null && _props$commandId !== void 0 ? _props$commandId : props.id, commandParams !== null && commandParams !== void 0 ? commandParams : typeof value === "undefined" ? void 0 : { value });
+				executeCommand(props.commandId ?? props.id, commandParams ?? (typeof value === "undefined" ? void 0 : { value }));
 			},
 			onDoubleClick: () => props.subId && executeCommand(props.subId),
 			children: icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
@@ -3529,14 +3575,13 @@ function RibbonGrid({ groups, title, className, ...props }) {
 		role: "toolbar",
 		"aria-label": localeService.t(title),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDropdownProvider, { children: groups.map((group) => {
-			var _group$children;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				"data-u-comp": "ribbon-grid-group",
 				className: "univer-relative univer-box-border univer-flex univer-min-w-16 univer-shrink-0 univer-flex-col univer-px-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"data-testid": "ribbon-grid-group-grid",
 					className: "univer-grid univer-min-h-0 univer-flex-1 univer-grid-flow-col univer-grid-rows-2 univer-content-center univer-gap-x-1 univer-gap-y-2 univer-py-2 [&>div>span>span]:univer-h-full",
-					children: placeRibbonGridItems((_group$children = group.children) !== null && _group$children !== void 0 ? _group$children : []).map((placement) => placement.item.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					children: placeRibbonGridItems(group.children ?? []).map((placement) => placement.item.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: (0, _univerjs_design.clsx)("univer-flex univer-items-stretch [&>span>button]:univer-h-full [&>span]:univer-h-full", placement.width && "[&>span>span]:univer-w-full [&>span]:univer-w-full [&_[data-u-command]]:univer-w-full"),
 						style: {
 							gridRow: `${placement.row} / span ${placement.rowSpan}`,
@@ -3565,13 +3610,12 @@ function RibbonGrid({ groups, title, className, ...props }) {
 //#endregion
 //#region src/views/components/ribbon/Ribbon.tsx
 function Ribbon(props) {
-	var _ribbonOverride$ribbo;
 	const { ribbonType, headerMenuComponents, headerMenu = true, toolbarOnly = false, headerClassName } = props;
 	const defaultRibbonService = (0, _wendellhu_redi_react_bindings.useDependency)(IRibbonService);
 	const ribbonOverrideService = (0, _wendellhu_redi_react_bindings.useDependency)(IRibbonOverrideService);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const ribbonOverride = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonOverrideService.override$, ribbonOverrideService.getOverride());
-	const ribbonService = (_ribbonOverride$ribbo = ribbonOverride === null || ribbonOverride === void 0 ? void 0 : ribbonOverride.ribbonService) !== null && _ribbonOverride$ribbo !== void 0 ? _ribbonOverride$ribbo : defaultRibbonService;
+	const ribbonService = (ribbonOverride === null || ribbonOverride === void 0 ? void 0 : ribbonOverride.ribbonService) ?? defaultRibbonService;
 	const containerRef = (0, react.useRef)(null);
 	const toolbarItemRefs = (0, react.useRef)({});
 	const ribbonData = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.ribbon$, []);
@@ -3606,8 +3650,8 @@ function Ribbon(props) {
 		ribbonService.setActivatedTab(group.key);
 	}, [ribbonService]);
 	const activeGroup = (0, react.useMemo)(() => {
-		var _ribbon$find$children, _ribbon$find2;
-		const allGroups = (_ribbon$find$children = (_ribbon$find2 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find2 === void 0 ? void 0 : _ribbon$find2.children) !== null && _ribbon$find$children !== void 0 ? _ribbon$find$children : [];
+		var _ribbon$find2;
+		const allGroups = ((_ribbon$find2 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find2 === void 0 ? void 0 : _ribbon$find2.children) ?? [];
 		const visibleGroups = [];
 		const hiddenGroups = [];
 		for (const item of allGroups) if (item.children) {
@@ -3644,14 +3688,14 @@ function Ribbon(props) {
 			for (const entry of entries) {
 				ribbonService.setFakeToolbarVisible(true);
 				timer = requestAnimationFrame(() => {
-					var _ribbon$find$children2, _ribbon$find3;
+					var _ribbon$find3;
 					const { width: avaliableWidth } = entry.contentRect;
 					const sortedToolbarItems = Object.values(toolbarItemRefs.current).sort((a, b) => {
 						return a.order - b.order || a.groupOrder - b.groupOrder || a.itemOrder - b.itemOrder;
 					});
 					const newCollapsedIds = [];
 					let totalWidth = 32;
-					const gapWidth = (((_ribbon$find$children2 = (_ribbon$find3 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find3 === void 0 ? void 0 : _ribbon$find3.children) !== null && _ribbon$find$children2 !== void 0 ? _ribbon$find$children2 : []).length - 1) * 8;
+					const gapWidth = ((((_ribbon$find3 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find3 === void 0 ? void 0 : _ribbon$find3.children) ?? []).length - 1) * 8;
 					totalWidth += gapWidth;
 					for (const { el, key } of sortedToolbarItems) {
 						const { width } = el.getBoundingClientRect();
@@ -3799,7 +3843,6 @@ function Ribbon(props) {
 	});
 }
 function RibbonOverrideRuntimeProvider(props) {
-	var _override$portalConta;
 	const { override, children } = props;
 	const config = (0, react.useContext)(_univerjs_design.ConfigContext);
 	const injector = override === null || override === void 0 ? void 0 : override.injector;
@@ -3808,7 +3851,7 @@ function RibbonOverrideRuntimeProvider(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConnectedRibbonOverrideConfigProvider, {
 		locale: config.locale,
 		direction: config.direction,
-		mountContainer: (_override$portalConta = override.portalContainer) !== null && _override$portalConta !== void 0 ? _override$portalConta : config.mountContainer,
+		mountContainer: override.portalContainer ?? config.mountContainer,
 		children
 	});
 }
@@ -3856,6 +3899,33 @@ var ThemeSwitcherService = class extends _univerjs_core.Disposable {
 	}
 };
 
+//#endregion
+//#region src/services/workbench/workbench.service.ts
+const IWorkbenchService = (0, _univerjs_core.createIdentifier)("univer.ui.workbench.service");
+var WorkbenchService = class extends _univerjs_core.Disposable {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_tokens", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_skeletonVisible$", new rxjs.BehaviorSubject(false));
+		_defineProperty(this, "skeletonVisible$", this._skeletonVisible$.asObservable());
+	}
+	acquireSkeleton() {
+		const token = Symbol("workbench-skeleton");
+		this._tokens.add(token);
+		if (this._tokens.size === 1) this._skeletonVisible$.next(true);
+		const disposable = (0, _univerjs_core.toDisposable)(() => {
+			if (!this._tokens.delete(token) || this._tokens.size > 0) return;
+			this._skeletonVisible$.next(false);
+		});
+		return this.disposeWithMe(disposable);
+	}
+	dispose() {
+		super.dispose();
+		this._tokens.clear();
+		this._skeletonVisible$.complete();
+	}
+};
+
 //#endregion
 //#region src/services/contextmenu/contextmenu.service.ts
 const IContextMenuService = (0, _univerjs_core.createIdentifier)("ui.contextmenu.service");
@@ -3866,8 +3936,8 @@ var ContextMenuService = class extends _univerjs_core.Disposable {
 		_defineProperty(this, "disabled", false);
 	}
 	get visible() {
-		var _this$_currentHandler, _this$_currentHandler2;
-		return (_this$_currentHandler = (_this$_currentHandler2 = this._currentHandler) === null || _this$_currentHandler2 === void 0 ? void 0 : _this$_currentHandler2.visible) !== null && _this$_currentHandler !== void 0 ? _this$_currentHandler : false;
+		var _this$_currentHandler;
+		return ((_this$_currentHandler = this._currentHandler) === null || _this$_currentHandler === void 0 ? void 0 : _this$_currentHandler.visible) ?? false;
 	}
 	disable() {
 		this.disabled = true;
@@ -3876,14 +3946,14 @@ var ContextMenuService = class extends _univerjs_core.Disposable {
 		this.disabled = false;
 	}
 	triggerContextMenu(event, menuType, context) {
-		var _this$_currentHandler3;
+		var _this$_currentHandler2;
 		event.stopPropagation();
 		if (this.disabled) return;
-		(_this$_currentHandler3 = this._currentHandler) === null || _this$_currentHandler3 === void 0 || _this$_currentHandler3.handleContextMenu(event, menuType, context);
+		(_this$_currentHandler2 = this._currentHandler) === null || _this$_currentHandler2 === void 0 || _this$_currentHandler2.handleContextMenu(event, menuType, context);
 	}
 	hideContextMenu() {
-		var _this$_currentHandler4;
-		(_this$_currentHandler4 = this._currentHandler) === null || _this$_currentHandler4 === void 0 || _this$_currentHandler4.hideContextMenu();
+		var _this$_currentHandler3;
+		(_this$_currentHandler3 = this._currentHandler) === null || _this$_currentHandler3 === void 0 || _this$_currentHandler3.hideContextMenu();
 	}
 	registerContextMenuHandler(handler) {
 		if (this._currentHandler) throw new Error("There is already a context menu handler!");
@@ -3966,10 +4036,10 @@ function useScrollYOverContainer(element, container) {
 	(0, react.useEffect)(() => {
 		if (!(0, _univerjs_design.isBrowser)() || !element || !container) return;
 		updater();
-		const resizeObserver = (0, _univerjs_design.resizeObserverCtor)(updater);
+		const resizeObserver = new ResizeObserver(updater);
 		resizeObserver.observe(element);
 		return () => {
-			resizeObserver.unobserve(element);
+			resizeObserver.disconnect();
 		};
 	}, [element, container]);
 }
@@ -4077,11 +4147,10 @@ function DesignTinyMenuGroup({ items, columns, sizeVariant = "default", layoutVa
 		}),
 		style: gridTemplateColumns ? { gridTemplateColumns } : void 0,
 		children: items.map((item) => {
-			var _item$tooltip;
 			const showTooltip = !isParagraphTVariant && item.tooltip;
 			const ele = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
-				"aria-label": (_item$tooltip = item.tooltip) !== null && _item$tooltip !== void 0 ? _item$tooltip : item.key,
+				"aria-label": item.tooltip ?? item.key,
 				title: showTooltip ? item.tooltip : void 0,
 				className: tinyMenuButtonVariants({
 					variant,
@@ -4131,8 +4200,8 @@ function resolveMenuItemActiveState(itemId, observableActive, activeItemIds) {
 	return observableActive;
 }
 function getTinyMenuChildStateKey(child) {
-	var _child$item$id, _child$item;
-	return (_child$item$id = (_child$item = child.item) === null || _child$item === void 0 ? void 0 : _child$item.id) !== null && _child$item$id !== void 0 ? _child$item$id : child.key;
+	var _child$item;
+	return ((_child$item = child.item) === null || _child$item === void 0 ? void 0 : _child$item.id) ?? child.key;
 }
 function getVisibleTinyMenuChildren(children, hiddenItemKeys) {
 	const hiddenSet = new Set(hiddenItemKeys);
@@ -4148,18 +4217,18 @@ function QuickTileMenuItem(props) {
 	const activated = (0, _wendellhu_redi_react_bindings.useObservable)(menuItem === null || menuItem === void 0 ? void 0 : menuItem.activated$, false);
 	if (!menuItem || hidden) return null;
 	const Icon = menuItem.icon ? iconManager.get(menuItem.icon) : null;
+	const active = resolveMenuItemActiveState(menuItem.id, activated, activeItemIds);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		className: quickTileMenuButtonVariants({
 			disabled,
-			active: resolveMenuItemActiveState(menuItem.id, activated, activeItemIds)
+			active
 		}),
 		disabled,
 		onClick: () => {
-			var _menuItem$id;
 			if (disabled) return;
 			onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
-				label: (_menuItem$id = menuItem.id) !== null && _menuItem$id !== void 0 ? _menuItem$id : menuSchema.key,
+				label: menuItem.id ?? menuSchema.key,
 				commandId: menuItem.commandId,
 				id: menuItem.id,
 				params: menuItem.params,
@@ -4177,25 +4246,21 @@ function QuickTileMenuItem(props) {
 	});
 }
 function UITinyMenuGroup(props) {
-	var _item$children;
 	const { item, activeItemIds, hiddenItemIds = EMPTY_HIDDEN_ITEM_IDS, hoverSuppressed, columns, sizeVariant = "default", layoutVariant = "default", onOptionSelect } = props;
 	const iconManager = (0, _wendellhu_redi_react_bindings.useDependency)(IconManager);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
-	const children = (_item$children = item.children) !== null && _item$children !== void 0 ? _item$children : EMPTY_TINY_MENU_CHILDREN;
+	const children = item.children ?? EMPTY_TINY_MENU_CHILDREN;
 	const activeItems$ = (0, react.useMemo)(() => children.length ? (0, rxjs.combineLatest)(children.map((child) => {
-		var _child$item$activated, _child$item2;
-		return ((_child$item$activated = (_child$item2 = child.item) === null || _child$item2 === void 0 ? void 0 : _child$item2.activated$) !== null && _child$item$activated !== void 0 ? _child$item$activated : (0, rxjs.of)(false)).pipe((0, rxjs.startWith)(false));
+		var _child$item2;
+		return (((_child$item2 = child.item) === null || _child$item2 === void 0 ? void 0 : _child$item2.activated$) ?? (0, rxjs.of)(false)).pipe((0, rxjs.startWith)(false));
 	})).pipe((0, rxjs.map)((states) => children.flatMap((child, index) => states[index] ? [getTinyMenuChildStateKey(child)] : []))) : (0, rxjs.of)([]), [children]);
 	const hiddenItems$ = (0, react.useMemo)(() => children.length ? (0, rxjs.combineLatest)(children.map((child) => {
-		var _child$item$hidden$, _child$item3;
-		return ((_child$item$hidden$ = (_child$item3 = child.item) === null || _child$item3 === void 0 ? void 0 : _child$item3.hidden$) !== null && _child$item$hidden$ !== void 0 ? _child$item$hidden$ : (0, rxjs.of)(false)).pipe((0, rxjs.startWith)(false));
+		var _child$item3;
+		return (((_child$item3 = child.item) === null || _child$item3 === void 0 ? void 0 : _child$item3.hidden$) ?? (0, rxjs.of)(false)).pipe((0, rxjs.startWith)(false));
 	})).pipe((0, rxjs.map)((states) => children.flatMap((child, index) => states[index] ? [getTinyMenuChildStateKey(child)] : []))) : (0, rxjs.of)([]), [children]);
 	const activeItems = (0, _wendellhu_redi_react_bindings.useObservable)(activeItems$, []);
 	const hiddenItems = (0, _wendellhu_redi_react_bindings.useObservable)(hiddenItems$, []);
-	const visibleChildren = (0, react.useMemo)(() => {
-		var _item$children2;
-		return getVisibleTinyMenuChildren((_item$children2 = item.children) !== null && _item$children2 !== void 0 ? _item$children2 : [], [...hiddenItems, ...hiddenItemIds]);
-	}, [
+	const visibleChildren = (0, react.useMemo)(() => getVisibleTinyMenuChildren(item.children ?? [], [...hiddenItems, ...hiddenItemIds]), [
 		hiddenItemIds,
 		hiddenItems,
 		item.children
@@ -4207,15 +4272,15 @@ function UITinyMenuGroup(props) {
 		layoutVariant,
 		hoverSuppressed,
 		items: visibleChildren.map((child) => {
-			var _child$item4, _child$item12, _child$item13, _child$item$id3, _child$item14, _child$item15;
+			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$item$id2, _child$item5, _child$item6, _child$item7, _child$item8, _child$item9, _child$item10, _child$item11;
+					var _child$item5, _child$item6, _child$item7, _child$item8, _child$item9, _child$item10, _child$item11;
 					onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
-						label: (_child$item$id2 = (_child$item5 = child.item) === null || _child$item5 === void 0 ? void 0 : _child$item5.id) !== null && _child$item$id2 !== void 0 ? _child$item$id2 : child.key,
+						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,
@@ -4226,16 +4291,16 @@ function UITinyMenuGroup(props) {
 				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$item$id3 = (_child$item14 = child.item) === null || _child$item14 === void 0 ? void 0 : _child$item14.id) !== null && _child$item$id3 !== void 0 ? _child$item$id3 : ""), activeItemIds),
+				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)
 	});
 }
 function UIQuickTileMenuGroup(props) {
-	var _item$children3;
+	var _item$children;
 	const { item, activeItemIds, hiddenItemIds = EMPTY_HIDDEN_ITEM_IDS, onOptionSelect } = props;
-	if (!((_item$children3 = item.children) === null || _item$children3 === void 0 ? void 0 : _item$children3.length)) return null;
+	if (!((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length)) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-item-center univer-grid univer-grid-cols-3 univer-gap-1.5 univer-py-1",
 		children: getVisibleTinyMenuChildren(item.children, hiddenItemIds).map((menuSchema) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickTileMenuItem, {
@@ -4451,11 +4516,11 @@ function getContextMenuPanelClassName(sizeVariant) {
 function getContextMenuGroupClassName(sizeVariant) {
 	return contextMenuGroupVariants({ sizeVariant });
 }
-function isParagraphTHeaderQuickGroup(menuSchema, sizeVariant) {
-	return sizeVariant === "paragraph-t" && menuSchema.quickLayout === "icon" && CONTEXT_MENU_HEADER_QUICK_GROUP_KEYS.has(menuSchema.key);
+function isHeaderQuickGroup(menuSchema) {
+	return menuSchema.quickLayout === "icon" && CONTEXT_MENU_HEADER_QUICK_GROUP_KEYS.has(menuSchema.key);
 }
-function shouldClusterParagraphTHeaderQuickGroups(currentSchema, nextSchema, sizeVariant) {
-	return isParagraphTHeaderQuickGroup(currentSchema, sizeVariant) && !!nextSchema && isParagraphTHeaderQuickGroup(nextSchema, sizeVariant);
+function shouldClusterHeaderQuickGroups(currentSchema, nextSchema) {
+	return isHeaderQuickGroup(currentSchema) && !!nextSchema && isHeaderQuickGroup(nextSchema);
 }
 function getContextMenuQuickGroupClassName(menuSchema, visibleSchemas, index, sizeVariant) {
 	if (sizeVariant !== "paragraph-t" || !CONTEXT_MENU_HEADER_QUICK_GROUP_KEYS.has(menuSchema.key)) return getContextMenuGroupClassName(sizeVariant);
@@ -4508,7 +4573,7 @@ function getFirstMenuButtonByVisualOrder(buttons) {
 	})[0];
 }
 function getNextMenuButtonByDirection(buttons, activeIndex, key) {
-	var _scoredCandidates$0$b, _scoredCandidates$;
+	var _scoredCandidates$;
 	const direction = key === "ArrowDown" || key === "ArrowRight" ? 1 : -1;
 	const fallbackButton = buttons[activeIndex < 0 ? direction > 0 ? 0 : buttons.length - 1 : (activeIndex + direction + buttons.length) % buttons.length];
 	const activeButton = activeIndex >= 0 ? buttons[activeIndex] : null;
@@ -4516,20 +4581,16 @@ function getNextMenuButtonByDirection(buttons, activeIndex, key) {
 	const rows = getMenuButtonRows(buttons);
 	const activeRowIndex = rows.findIndex((row) => row.includes(activeButton));
 	const activeRow = rows[activeRowIndex];
-	if (activeRow && (key === "ArrowRight" || key === "ArrowLeft")) {
-		const nextRowButton = activeRow[activeRow.indexOf(activeButton) + (key === "ArrowRight" ? 1 : -1)];
-		return nextRowButton !== null && nextRowButton !== void 0 ? nextRowButton : fallbackButton;
-	}
+	if (activeRow && (key === "ArrowRight" || key === "ArrowLeft")) return activeRow[activeRow.indexOf(activeButton) + (key === "ArrowRight" ? 1 : -1)] ?? fallbackButton;
 	if (activeRow && (key === "ArrowDown" || key === "ArrowUp")) {
 		const nextRow = rows[activeRowIndex + (key === "ArrowDown" ? 1 : -1)];
 		if (nextRow) {
-			var _sort$;
 			const activeCenter = getMenuButtonCenter(activeButton);
-			return (_sort$ = [...nextRow].sort((left, right) => Math.abs(getMenuButtonCenter(left).x - activeCenter.x) - Math.abs(getMenuButtonCenter(right).x - activeCenter.x))[0]) !== null && _sort$ !== void 0 ? _sort$ : fallbackButton;
+			return [...nextRow].sort((left, right) => Math.abs(getMenuButtonCenter(left).x - activeCenter.x) - Math.abs(getMenuButtonCenter(right).x - activeCenter.x))[0] ?? fallbackButton;
 		}
 	}
 	const activeCenter = getMenuButtonCenter(activeButton);
-	return (_scoredCandidates$0$b = (_scoredCandidates$ = buttons.filter((button) => button !== activeButton).map((button) => {
+	return ((_scoredCandidates$ = buttons.filter((button) => button !== activeButton).map((button) => {
 		const center = getMenuButtonCenter(button);
 		const deltaX = center.x - activeCenter.x;
 		const deltaY = center.y - activeCenter.y;
@@ -4540,14 +4601,14 @@ function getNextMenuButtonByDirection(buttons, activeIndex, key) {
 			button,
 			score: primaryDistance * 1e3 + secondaryDistance
 		};
-	}).filter((candidate) => candidate != null).sort((left, right) => left.score - right.score)[0]) === null || _scoredCandidates$ === void 0 ? void 0 : _scoredCandidates$.button) !== null && _scoredCandidates$0$b !== void 0 ? _scoredCandidates$0$b : fallbackButton;
+	}).filter((candidate) => candidate != null).sort((left, right) => left.score - right.score)[0]) === null || _scoredCandidates$ === void 0 ? void 0 : _scoredCandidates$.button) ?? fallbackButton;
 }
-function getContextMenuSchemaRenderGroups(visibleSchemas, sizeVariant) {
+function getContextMenuSchemaRenderGroups(visibleSchemas, flowQuickGroups = false) {
 	const renderGroups = [];
 	for (let index = 0; index < visibleSchemas.length; index++) {
 		const menuSchema = visibleSchemas[index];
 		const nextSchema = visibleSchemas[index + 1];
-		if (shouldClusterParagraphTHeaderQuickGroups(menuSchema, nextSchema, sizeVariant)) {
+		if (flowQuickGroups && shouldClusterHeaderQuickGroups(menuSchema, nextSchema)) {
 			renderGroups.push({
 				startIndex: index,
 				endIndex: index + 1,
@@ -4564,6 +4625,15 @@ function getContextMenuSchemaRenderGroups(visibleSchemas, sizeVariant) {
 	}
 	return renderGroups;
 }
+function mergeContextMenuQuickGroupSchemas(menuSchemas) {
+	const firstSchema = menuSchemas[0];
+	return {
+		...firstSchema,
+		key: menuSchemas.map((schema) => schema.key).join("-"),
+		quickColumns: getContextMenuQuickGroupColumns(firstSchema),
+		children: menuSchemas.flatMap((schema) => schema.children ?? [])
+	};
+}
 function getContextMenuHeaderClassName(sizeVariant) {
 	return contextMenuHeaderVariants({ sizeVariant });
 }
@@ -4574,12 +4644,12 @@ function getContextMenuSubmenuPanelClassName(sizeVariant) {
 	return contextMenuSubmenuPanelVariants({ sizeVariant });
 }
 function ContextMenuPanel(props) {
-	var _layoutService$rootCo, _layoutService$rootCo2;
-	const { menuType, menuManagerService: providedMenuManagerService, layoutService: providedLayoutService, menuSessionVersion = 0, className, activeItemIds, hiddenItemIds, sizeVariant = "default", autoFocus, autoFocusTarget = "first-item", suppressHoverUntilPointerMove = false, onCancel, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect } = props;
+	var _layoutService$rootCo;
+	const { menuType, menuManagerService: providedMenuManagerService, layoutService: providedLayoutService, menuSessionVersion = 0, className, activeItemIds, hiddenItemIds, flowQuickGroups, sizeVariant = "default", autoFocus, autoFocusTarget = "first-item", suppressHoverUntilPointerMove = false, onCancel, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect } = props;
 	const rootMenuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
 	const rootLayoutService = (0, _wendellhu_redi_react_bindings.useDependency)(ILayoutService);
-	const menuManagerService = providedMenuManagerService !== null && providedMenuManagerService !== void 0 ? providedMenuManagerService : rootMenuManagerService;
-	const layoutService = providedLayoutService !== null && providedLayoutService !== void 0 ? providedLayoutService : rootLayoutService;
+	const menuManagerService = providedMenuManagerService ?? rootMenuManagerService;
+	const layoutService = providedLayoutService ?? rootLayoutService;
 	const [menuElement, setMenuElement] = (0, react.useState)(null);
 	const [maxMenuHeight, setMaxMenuHeight] = (0, react.useState)(() => {
 		if (typeof window === "undefined") return 240;
@@ -4592,23 +4662,21 @@ function ContextMenuPanel(props) {
 		(0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => menuManagerService.menuChanged$.pipe((0, rxjs.startWith)(void 0), (0, rxjs.scan)((version) => version + 1, 0)), [menuManagerService]), 0),
 		menuSessionVersion
 	]);
-	const submenuPortalContainer = (_layoutService$rootCo = (_layoutService$rootCo2 = layoutService.rootContainerElement) === null || _layoutService$rootCo2 === void 0 || (_layoutService$rootCo2 = _layoutService$rootCo2.ownerDocument) === null || _layoutService$rootCo2 === void 0 ? void 0 : _layoutService$rootCo2.body) !== null && _layoutService$rootCo !== void 0 ? _layoutService$rootCo : typeof document !== "undefined" ? document.body : null;
+	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);
 	useScrollYOverContainer(menuElement, layoutService.rootContainerElement);
 	const getFocusableMenuButtons = (0, react.useCallback)(() => {
 		if (!menuElement) return [];
 		return Array.from(menuElement.querySelectorAll("button:not(:disabled)"));
 	}, [menuElement]);
 	(0, react.useEffect)(() => {
-		var _menuElement$ownerDoc;
 		if (!autoFocus || !menuElement) return;
-		const view = (_menuElement$ownerDoc = menuElement.ownerDocument.defaultView) !== null && _menuElement$ownerDoc !== void 0 ? _menuElement$ownerDoc : window;
+		const view = menuElement.ownerDocument.defaultView ?? window;
 		const frameId = view.requestAnimationFrame(() => {
 			if (autoFocusTarget === "container") {
 				menuElement.focus();
 				return;
 			}
-			const firstButton = getFirstMenuButtonByVisualOrder(getFocusableMenuButtons());
-			(firstButton !== null && firstButton !== void 0 ? firstButton : menuElement).focus();
+			(getFirstMenuButtonByVisualOrder(getFocusableMenuButtons()) ?? menuElement).focus();
 		});
 		return () => view.cancelAnimationFrame(frameId);
 	}, [
@@ -4652,8 +4720,8 @@ function ContextMenuPanel(props) {
 		onCancel
 	]);
 	(0, react.useEffect)(() => {
-		var _layoutService$rootCo3, _layoutService$rootCo4;
-		const defaultView = (_layoutService$rootCo3 = (_layoutService$rootCo4 = layoutService.rootContainerElement) === null || _layoutService$rootCo4 === void 0 || (_layoutService$rootCo4 = _layoutService$rootCo4.ownerDocument) === null || _layoutService$rootCo4 === void 0 ? void 0 : _layoutService$rootCo4.defaultView) !== null && _layoutService$rootCo3 !== void 0 ? _layoutService$rootCo3 : typeof window !== "undefined" ? window : null;
+		var _layoutService$rootCo2;
+		const defaultView = ((_layoutService$rootCo2 = layoutService.rootContainerElement) === null || _layoutService$rootCo2 === void 0 || (_layoutService$rootCo2 = _layoutService$rootCo2.ownerDocument) === null || _layoutService$rootCo2 === void 0 ? void 0 : _layoutService$rootCo2.defaultView) ?? (typeof window !== "undefined" ? window : null);
 		if (!defaultView) return;
 		let frameId = 0;
 		const updateMaxHeight = () => {
@@ -4688,6 +4756,7 @@ function ContextMenuPanel(props) {
 			rootMenuElement: menuElement,
 			activeItemIds,
 			hiddenItemIds,
+			flowQuickGroups,
 			hoverSuppressed,
 			sizeVariant,
 			onMenuPointerEnter,
@@ -4698,7 +4767,7 @@ function ContextMenuPanel(props) {
 	});
 }
 function ContextMenuMenu(props) {
-	const { menuSchemas, menuManagerService, menuSessionVersion, submenuPortalContainer, rootMenuElement, activeItemIds, hiddenItemIds, hoverSuppressed, sizeVariant, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect, maxMenuHeight } = props;
+	const { menuSchemas, menuManagerService, menuSessionVersion, submenuPortalContainer, rootMenuElement, activeItemIds, hiddenItemIds, flowQuickGroups, hoverSuppressed, sizeVariant, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect, maxMenuHeight } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const hiddenGroupStates = useContextGroupHiddenStates$1(menuSchemas);
 	const [activeSubmenuKey, setActiveSubmenuKey] = (0, react.useState)(null);
@@ -4709,7 +4778,7 @@ function ContextMenuMenu(props) {
 			return !hiddenGroupStates[item.key];
 		});
 	}, [hiddenGroupStates, menuSchemas]);
-	const renderGroups = (0, react.useMemo)(() => getContextMenuSchemaRenderGroups(visibleSchemas, sizeVariant), [sizeVariant, visibleSchemas]);
+	const renderGroups = (0, react.useMemo)(() => getContextMenuSchemaRenderGroups(visibleSchemas, flowQuickGroups), [flowQuickGroups, visibleSchemas]);
 	const renderQuickLayoutGroup = (menuSchema, index, renderAsClusterChild = false, hasSeparator = false) => {
 		const titleNode = renderMenuSchemaHeader(menuSchema);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4737,10 +4806,13 @@ function ContextMenuMenu(props) {
 		const menuSchema = groupedSchemas[0];
 		const hasSeparator = shouldShowContextMenuGroupSeparator(visibleSchemas, endIndex);
 		const titleNode = renderMenuSchemaHeader(menuSchema);
-		if (groupedSchemas.length > 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, _univerjs_design.clsx)(getContextMenuQuickGroupClusterClassName(sizeVariant), hasSeparator && _univerjs_design.borderBottomClassName),
-			children: groupedSchemas.map((groupedMenuSchema, groupedIndex) => renderQuickLayoutGroup(groupedMenuSchema, startIndex + groupedIndex, true))
-		}, groupedSchemas.map((schema) => schema.key).join("-"));
+		if (groupedSchemas.length > 1) {
+			const mergedMenuSchema = mergeContextMenuQuickGroupSchemas(groupedSchemas);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, _univerjs_design.clsx)(getContextMenuQuickGroupClusterClassName(sizeVariant), hasSeparator && _univerjs_design.borderBottomClassName),
+				children: renderQuickLayoutGroup(mergedMenuSchema, startIndex, true)
+			}, groupedSchemas.map((schema) => schema.key).join("-"));
+		}
 		if (menuSchema.item) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenuItem, {
 			menuKey: menuSchema.key,
 			menuItem: menuSchema.item,
@@ -4925,9 +4997,10 @@ function ContextMenuMenuItem(props) {
 			const left = useLeft ? leftLeft : rightLeft;
 			setSubmenuPlacement(useLeft ? "left" : "right");
 			const maxTop = window.innerHeight - menuViewportPadding - submenuRect.height;
+			const top = maxTop < menuViewportPadding ? menuViewportPadding : Math.min(Math.max(menuItemRect.top, menuViewportPadding), maxTop);
 			setSubmenuPosition({
 				left,
-				top: maxTop < menuViewportPadding ? menuViewportPadding : Math.min(Math.max(menuItemRect.top, menuViewportPadding), maxTop)
+				top
 			});
 			setSubmenuPositionReady(true);
 		};
@@ -4948,7 +5021,8 @@ function ContextMenuMenuItem(props) {
 	const hiddenById = menuItem.id != null && hiddenItemIds.includes(menuItem.id) || hiddenItemIds.includes(menuKey);
 	if (hidden || hiddenById) return null;
 	const onChange = (v) => {
-		setInputValue((0, _univerjs_core.isRealNum)(v) && typeof v === "string" ? Number.parseInt(v) : v);
+		const newValue = (0, _univerjs_core.isRealNum)(v) && typeof v === "string" ? Number.parseInt(v) : v;
+		setInputValue(newValue);
 	};
 	const onSubmenuOptionSelect = (option) => {
 		onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect(option);
@@ -5088,8 +5162,7 @@ function ContextMenuMenuItem(props) {
 				children: [hasSelectionSubmenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: sizeVariant === "paragraph-t" ? "univer-grid univer-gap-2" : "univer-grid univer-gap-1",
 					children: selections.map((option, index) => {
-						var _option$label;
-						const optionKey = `${menuItem.id}-${(_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.id}-${index}`;
+						const optionKey = `${menuItem.id}-${option.label ?? option.id}-${index}`;
 						const optionSelected = typeof inputValue !== "undefined" && String(inputValue) === String(option.value);
 						const optionSelectable = !isNonSelectableLabel(option.label);
 						const optionHoverable = !isNonHoverableLabel(option.label);
@@ -5102,13 +5175,12 @@ function ContextMenuMenuItem(props) {
 								label: option.label,
 								icon: option.icon,
 								onChange: (optionValue) => {
-									var _option$commandId;
 									onSubmenuOptionSelect === null || onSubmenuOptionSelect === void 0 || onSubmenuOptionSelect({
 										...option,
 										value: optionValue,
 										id: menuItem.id,
 										label: menuKey,
-										commandId: (_option$commandId = option.commandId) !== null && _option$commandId !== void 0 ? _option$commandId : selectionsCommandId
+										commandId: option.commandId ?? selectionsCommandId
 									});
 								}
 							})
@@ -5118,12 +5190,11 @@ function ContextMenuMenuItem(props) {
 							className: optionClassName,
 							disabled: option.disabled,
 							onClick: () => {
-								var _option$commandId2;
 								onSubmenuOptionSelect === null || onSubmenuOptionSelect === void 0 || onSubmenuOptionSelect({
 									...option,
 									id: menuItem.id,
 									label: menuKey,
-									commandId: (_option$commandId2 = option.commandId) !== null && _option$commandId2 !== void 0 ? _option$commandId2 : selectionsCommandId
+									commandId: option.commandId ?? selectionsCommandId
 								});
 							},
 							children: optionContentNode
@@ -5155,11 +5226,11 @@ function ContextMenuMenuItem(props) {
 function useContextGroupHiddenStates$1(menuSchemas) {
 	return (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
 		const groupStates = menuSchemas.flatMap((menuSchema) => {
-			var _menuSchema$children$, _menuSchema$children3;
-			const hiddenObservables = (_menuSchema$children$ = (_menuSchema$children3 = menuSchema.children) === null || _menuSchema$children3 === void 0 ? void 0 : _menuSchema$children3.map((childSchema) => {
-				var _childSchema$item$hid, _childSchema$item;
-				return (_childSchema$item$hid = (_childSchema$item = childSchema.item) === null || _childSchema$item === void 0 ? void 0 : _childSchema$item.hidden$) !== null && _childSchema$item$hid !== void 0 ? _childSchema$item$hid : (0, rxjs.of)(false);
-			})) !== null && _menuSchema$children$ !== void 0 ? _menuSchema$children$ : [];
+			var _menuSchema$children3;
+			const hiddenObservables = ((_menuSchema$children3 = menuSchema.children) === null || _menuSchema$children3 === void 0 ? void 0 : _menuSchema$children3.map((childSchema) => {
+				var _childSchema$item;
+				return ((_childSchema$item = childSchema.item) === null || _childSchema$item === void 0 ? void 0 : _childSchema$item.hidden$) ?? (0, rxjs.of)(false);
+			})) ?? [];
 			return hiddenObservables.length ? [(0, rxjs.combineLatest)(hiddenObservables).pipe((0, rxjs.map)((values) => [menuSchema.key, values.every(Boolean)]))] : [];
 		});
 		return groupStates.length ? (0, rxjs.merge)(...groupStates).pipe((0, rxjs.scan)((states, [key, hidden]) => ({
@@ -5332,7 +5403,7 @@ function DesktopContextMenu() {
 			const { label: id, commandId, value } = params;
 			const rawParams = typeof params.params === "function" ? params.params() : params.params;
 			const commandParams = typeof rawParams === "undefined" ? { value } : rawParams;
-			if (activeCommandService) activeCommandService.executeCommand(commandId !== null && commandId !== void 0 ? commandId : id, commandParams);
+			if (activeCommandService) activeCommandService.executeCommand(commandId ?? id, commandParams);
 			activeLayoutService.focus();
 			handleClose();
 		}
@@ -5496,7 +5567,7 @@ function Sidebar() {
 					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-					className: "univer-box-border univer-cursor-default univer-px-4",
+					className: "univer-box-border univer-min-w-0 univer-cursor-default univer-px-4",
 					children: options === null || options === void 0 ? void 0 : options.children
 				}),
 				(options === null || options === void 0 ? void 0 : options.footer) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
@@ -5508,6 +5579,95 @@ function Sidebar() {
 	});
 }
 
+//#endregion
+//#region src/views/components/workbench-skeleton/WorkbenchSkeleton.tsx
+function WorkbenchSkeleton({ darkMode, direction, overlay = false }) {
+	const shimmerClassName = `
+      univer-animate-pulse univer-bg-gray-100 motion-reduce:univer-animate-none
+      dark:!univer-bg-gray-700
+    `;
+	const shimmerStyle = { animationDuration: "1.2s" };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"aria-busy": "true",
+		className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-overflow-hidden univer-bg-gray-50 dark:!univer-bg-gray-900", {
+			"univer-absolute univer-inset-0 univer-z-50": overlay,
+			"univer-dark": darkMode
+		}),
+		dir: direction,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				"data-u-comp": "workbench-skeleton-toolbar",
+				className: "univer-flex univer-h-11 univer-shrink-0 univer-items-center univer-gap-2 univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-bg-white univer-px-4 dark:!univer-border-gray-700 dark:!univer-bg-gray-800",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-h-4 univer-w-24 univer-rounded"),
+						style: shimmerStyle
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-ml-2 univer-size-6 univer-rounded"),
+						style: shimmerStyle
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-size-6 univer-rounded"),
+						style: shimmerStyle
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
+				"data-u-comp": "workbench-skeleton-content",
+				className: "univer-flex univer-min-h-0 univer-min-w-0 univer-flex-1 univer-flex-col univer-gap-4 univer-p-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-u-comp": "workbench-skeleton-shimmer",
+					className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-h-4 univer-w-1/3 univer-rounded"),
+					style: shimmerStyle
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-u-comp": "workbench-skeleton-shimmer",
+					className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-flex-1 univer-rounded-md"),
+					style: shimmerStyle
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+				"data-u-comp": "workbench-skeleton-footer",
+				className: "univer-flex univer-h-10 univer-shrink-0 univer-items-center univer-justify-between univer-border-0 univer-border-t univer-border-solid univer-border-gray-200 univer-bg-white univer-px-4 dark:!univer-border-gray-700 dark:!univer-bg-gray-800",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-flex univer-items-center univer-gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-size-5 univer-rounded"),
+						style: shimmerStyle
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-h-5 univer-w-14 univer-rounded"),
+						style: shimmerStyle
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-flex univer-items-center univer-gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-u-comp": "workbench-skeleton-shimmer",
+							className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-size-5 univer-rounded"),
+							style: shimmerStyle
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-u-comp": "workbench-skeleton-shimmer",
+							className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-h-2 univer-w-24 univer-rounded-full"),
+							style: shimmerStyle
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-u-comp": "workbench-skeleton-shimmer",
+							className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-size-5 univer-rounded"),
+							style: shimmerStyle
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/views/hooks/update-effect.ts
 /**
@@ -5711,9 +5871,10 @@ function mountDesktopWorkbench(injector, options, mountContainer, onRendered) {
 	}), mountContainer);
 }
 function DesktopWorkbenchContent(props) {
-	var _uiConfig$popupRootId;
 	const { header = true, toolbar = true, footer = true, headerMenu = true, contextMenu = true, ribbonType = "classic", mountContainer, onRendered } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const lifecycleService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LifecycleService);
+	const workbenchService = (0, _wendellhu_redi_react_bindings.useDependency)(IWorkbenchService);
 	const themeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService);
 	const themeSwitcherService = (0, _wendellhu_redi_react_bindings.useDependency)(ThemeSwitcherService);
 	const contentRef = (0, react.useRef)(null);
@@ -5726,7 +5887,10 @@ function DesktopWorkbenchContent(props) {
 	const leftSidebarComponents = useComponentsOfPart("left-sidebar");
 	const globalComponents = useComponentsOfPart("global");
 	const toolbarComponents = useComponentsOfPart("toolbar");
-	const popupRootId = (_uiConfig$popupRootId = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.popupRootId) !== null && _uiConfig$popupRootId !== void 0 ? _uiConfig$popupRootId : "univer-popup-portal";
+	const lifecycleStage = (0, _wendellhu_redi_react_bindings.useObservable)(lifecycleService.lifecycle$, lifecycleService.stage);
+	const externalSkeletonVisible = (0, _wendellhu_redi_react_bindings.useObservable)(workbenchService.skeletonVisible$, void 0, true);
+	const ready = lifecycleStage >= _univerjs_core.LifecycleStages.Ready;
+	const popupRootId = (uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.popupRootId) ?? "univer-popup-portal";
 	(0, react.useLayoutEffect)(() => {
 		const sub = themeService.currentTheme$.subscribe((theme) => {
 			themeSwitcherService.injectThemeToHead(theme);
@@ -5741,8 +5905,8 @@ function DesktopWorkbenchContent(props) {
 		else document.documentElement.classList.remove("univer-dark");
 	}, [darkMode]);
 	(0, react.useEffect)(() => {
-		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
-	}, [onRendered]);
+		if (ready && contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
+	}, [ready, onRendered]);
 	const locale = (0, _wendellhu_redi_react_bindings.useObservable)(() => localeService.localeChanged$.pipe((0, rxjs.map)(() => localeService.getLocales())), localeService.getLocales(), false, [localeService]);
 	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$, localeService.getDirection());
 	const portalContainer = (0, react.useMemo)(() => document.createElement("div"), []);
@@ -5760,61 +5924,68 @@ function DesktopWorkbenchContent(props) {
 		direction,
 		mountContainer: portalContainer,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-u-comp": "workbench-layout",
-			className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
-			tabIndex: -1,
-			onBlur: (e) => e.stopPropagation(),
-			onContextMenu: (e) => e.preventDefault(),
-			dir: direction,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-relative univer-flex univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: customHeaderComponents }, "custom-header")
-				}),
-				header && toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-					"data-u-comp": "headerbar",
-					className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
-						components: toolbarComponents,
-						sharedProps: {
-							ribbonType,
-							headerMenuComponents,
-							headerMenu
-						}
-					}, "toolbar")
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-					className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-								"data-u-comp": "left-sidebar",
-								className: "univer-h-full",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-								className: (0, _univerjs_design.clsx)("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", { children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-									className: "univer-relative univer-overflow-hidden dark:!univer-bg-gray-900",
-									ref: contentRef,
-									"data-range-selector": true,
-									onContextMenu: (e) => e.preventDefault(),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-								"data-u-comp": "right-sidebar",
-								className: "univer-z-[100] univer-h-full",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {})
-							})
-						]
-					}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
-						components: footerComponents,
-						sharedProps: { contextMenu }
-					}, "footer") })]
-				})
-			]
+			className: "univer-relative univer-h-full univer-min-h-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-u-comp": "workbench-layout",
+				className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
+				tabIndex: -1,
+				onBlur: (e) => e.stopPropagation(),
+				onContextMenu: (e) => e.preventDefault(),
+				dir: direction,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-relative univer-flex univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: customHeaderComponents }, "custom-header")
+					}),
+					header && toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+						"data-u-comp": "headerbar",
+						className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
+							components: toolbarComponents,
+							sharedProps: {
+								ribbonType,
+								headerMenuComponents,
+								headerMenu
+							}
+						}, "toolbar")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+									"data-u-comp": "left-sidebar",
+									className: "univer-h-full",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+									className: (0, _univerjs_design.clsx)("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", { children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+										className: "univer-relative univer-overflow-hidden dark:!univer-bg-gray-900",
+										ref: contentRef,
+										"data-range-selector": true,
+										onContextMenu: (e) => e.preventDefault(),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+									"data-u-comp": "right-sidebar",
+									className: "univer-z-[100] univer-h-full",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {})
+								})
+							]
+						}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
+							components: footerComponents,
+							sharedProps: { contextMenu }
+						}, "footer") })]
+					})
+				]
+			}), (!ready || externalSkeletonVisible) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkbenchSkeleton, {
+				darkMode,
+				direction,
+				overlay: true
+			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			dir: direction,
 			children: [
@@ -5859,6 +6030,9 @@ var SingleUnitUIController = class extends _univerjs_core.Disposable {
 		delete this._renderManagerService;
 	}
 	_bootstrapWorkbench() {
+		var _this$_injector$get;
+		const initialSkeleton = (_this$_injector$get = this._injector.get(IWorkbenchService, _univerjs_core.Quantity.OPTIONAL)) === null || _this$_injector$get === void 0 ? void 0 : _this$_injector$get.acquireSkeleton();
+		if (initialSkeleton) this.disposeWithMe(initialSkeleton);
 		this.disposeWithMe(this.bootstrap(async (contentElement, containerElement) => {
 			if (this._layoutService) {
 				this.disposeWithMe(this._layoutService.registerRootContainerElement(containerElement));
@@ -5869,6 +6043,7 @@ var SingleUnitUIController = class extends _univerjs_core.Disposable {
 				this._renderTimeout = window.setTimeout(() => {
 					const allRenders = this._renderManagerService.getRenderAll();
 					for (const [key] of allRenders) if (this._changeRenderUnit(key, contentElement)) break;
+					requestAnimationFrame(() => requestAnimationFrame(() => initialSkeleton === null || initialSkeleton === void 0 ? void 0 : initialSkeleton.dispose()));
 					this.disposeWithMe(this._instanceService.focused$.subscribe((unit) => {
 						if (unit) this._changeRenderUnit(unit, contentElement);
 					}));
@@ -5896,9 +6071,9 @@ var SingleUnitUIController = class extends _univerjs_core.Disposable {
 		var _this$_instanceServic2;
 		if (this._currentRenderId === rendererId) return false;
 		if ((_this$_instanceServic2 = this._instanceService.getUnitCreateOptions(rendererId)) === null || _this$_instanceServic2 === void 0 ? void 0 : _this$_instanceServic2.embeddedRender) return false;
-		const renderer = this._renderManagerService.getRenderById(rendererId);
+		const renderer = this._renderManagerService.getRenderUnitById(rendererId);
 		if (!renderer || !renderer.unitId || (0, _univerjs_core.isInternalEditorID)(renderer.unitId)) return false;
-		const currentRenderer = this._currentRenderId ? this._renderManagerService.getRenderById(this._currentRenderId) : null;
+		const currentRenderer = this._currentRenderId ? this._renderManagerService.getRenderUnitById(this._currentRenderId) : null;
 		currentRenderer === null || currentRenderer === void 0 || currentRenderer.deactivate();
 		currentRenderer === null || currentRenderer === void 0 || currentRenderer.engine.unmount();
 		renderer.engine.mount(contentElement);
@@ -5970,7 +6145,7 @@ const IUIController = (0, _univerjs_core.createIdentifier)("univer.ui.ui-control
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.0.0-alpha.7";
+var version = "1.0.0-beta.0";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -6014,9 +6189,9 @@ const CommonLabel = (props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-truncate univer-text-sm",
 		children: (0, react.useMemo)(() => {
-			var _selections$find$labe, _selections$find;
+			var _selections$find;
 			if (value == null) return "";
-			return localeService.t((_selections$find$labe = (_selections$find = selections.find((item) => item.value === value)) === null || _selections$find === void 0 ? void 0 : _selections$find.label) !== null && _selections$find$labe !== void 0 ? _selections$find$labe : "");
+			return localeService.t(((_selections$find = selections.find((item) => item.value === value)) === null || _selections$find === void 0 ? void 0 : _selections$find.label) ?? "");
 		}, [value, selections])
 	});
 };
@@ -6052,10 +6227,9 @@ function ShortcutPanel() {
 		const shortcuts = shortcutService.getAllShortcuts().filter((item) => !!item.group);
 		const groupTitles = /* @__PURE__ */ new Map();
 		for (const shortcut of shortcuts) {
-			var _shortcut$description;
 			const group = shortcut.group;
 			const shortcutItem = {
-				title: localeService.t((_shortcut$description = shortcut.description) !== null && _shortcut$description !== void 0 ? _shortcut$description : shortcut.id),
+				title: localeService.t(shortcut.description ?? shortcut.id),
 				shortcut: shortcutService.getShortcutDisplay(shortcut)
 			};
 			if (!/^\d+_/.test(group)) throw new Error(`[ShortcutPanel]: Invalid shortcut group: ${group}!`);
@@ -6064,7 +6238,7 @@ function ShortcutPanel() {
 			if (!shortcutGroups.has(group)) shortcutGroups.set(group, []);
 			shortcutGroups.get(group).push(shortcutItem);
 		}
-		setShortcutItems(Array.from(shortcutGroups.entries()).map(([name, items]) => {
+		const toRender = Array.from(shortcutGroups.entries()).map(([name, items]) => {
 			const groupSequence = name.split("_")[0];
 			const localeKey = groupTitles.get(name);
 			return {
@@ -6072,7 +6246,8 @@ function ShortcutPanel() {
 				name: localeService.t(localeKey),
 				items: (0, _univerjs_core.dedupeBy)(items, (item) => item.title + item.shortcut)
 			};
-		}).sort((a, b) => a.sequence - b.sequence));
+		}).sort((a, b) => a.sequence - b.sequence);
+		setShortcutItems(toRender);
 	}, [
 		shortcutService,
 		localeService,
@@ -20902,13 +21077,11 @@ function parseStoredRecentEmojis(value) {
 	}
 }
 function getRandomEmoji(random = Math.random) {
-	var _allEmojis$Math$floor;
 	const allEmojis = getAllEmojis();
-	return (_allEmojis$Math$floor = allEmojis[Math.floor(random() * allEmojis.length)]) !== null && _allEmojis$Math$floor !== void 0 ? _allEmojis$Math$floor : getDefaultRecentEmojis()[0];
+	return allEmojis[Math.floor(random() * allEmojis.length)] ?? getDefaultRecentEmojis()[0];
 }
 function getLocalizedEmojiTitle(item, emojiTitles) {
-	var _emojiTitles$item$emo;
-	return (_emojiTitles$item$emo = emojiTitles === null || emojiTitles === void 0 ? void 0 : emojiTitles[item.emoji]) !== null && _emojiTitles$item$emo !== void 0 ? _emojiTitles$item$emo : item.title;
+	return (emojiTitles === null || emojiTitles === void 0 ? void 0 : emojiTitles[item.emoji]) ?? item.title;
 }
 function getEmojiLocaleData(localeService) {
 	const localePack = localeService.getLocales();
@@ -20931,37 +21104,54 @@ function normalizeStoredRecentEmojis(value) {
 const EMOJI_PICKER_COMPONENT = "ui.emoji-picker";
 const RECENTS_STORAGE_KEY = "univer.ui.recent-emojis";
 const ACTIVE_SECTION_SCROLL_OFFSET = 28;
+const EMOJI_COLUMN_COUNT = 10;
+const EMOJI_ROW_HEIGHT = 32;
+const EMOJI_SECTION_HEADER_HEIGHT = 24;
+const EMOJI_VIRTUAL_OVERSCAN = 3;
 function EmojiPicker(props) {
-	var _props$popup, _extraProps$recentSto;
+	var _props$popup;
 	const extraProps = (_props$popup = props.popup) === null || _props$popup === void 0 ? void 0 : _props$popup.extraProps;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const localStorageService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ILocalStorageService);
 	const currentLocale = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.currentLocale$, localeService.getCurrentLocale());
-	const scrollRef = (0, react.useRef)(null);
-	const sectionRefs = (0, react.useRef)({});
+	const scrollRef = (0, react.useRef)(void 0);
+	const pendingSectionRef = (0, react.useRef)(null);
 	const [query, setQuery] = (0, react.useState)("");
 	const [activeEmoji, setActiveEmoji] = (0, react.useState)(extraProps === null || extraProps === void 0 ? void 0 : extraProps.activeEmoji);
 	const [activeTab, setActiveTab] = (0, react.useState)("recent");
 	const [recents, setRecents] = (0, react.useState)(() => getDefaultRecentEmojis());
 	const deferredQuery = (0, react.useDeferredValue)(query);
-	const emojiLocaleData = (0, react.useMemo)(() => getEmojiLocaleData(localeService), [currentLocale, localeService]);
+	const emojiLocaleData = getEmojiLocaleData(localeService);
 	const searchResults = (0, react.useMemo)(() => searchEmojis(deferredQuery, emojiLocaleData.emojiSearchIndex), [deferredQuery, emojiLocaleData]);
-	const recentStorageKey = (_extraProps$recentSto = extraProps === null || extraProps === void 0 ? void 0 : extraProps.recentStorageKey) !== null && _extraProps$recentSto !== void 0 ? _extraProps$recentSto : RECENTS_STORAGE_KEY;
+	const recentStorageKey = (extraProps === null || extraProps === void 0 ? void 0 : extraProps.recentStorageKey) ?? RECENTS_STORAGE_KEY;
 	const isSearching = deferredQuery.trim().length > 0;
-	const normalSections = [{
-		key: "recent",
-		title: localeService.t("ui.emojiPicker.recents"),
-		emojis: recents
-	}, ...EMOJI_CATEGORIES.map((category) => ({
-		key: category.key,
-		title: localeService.t(category.titleKey),
-		emojis: emojis[category.key]
-	}))];
-	const renderedSections = (isSearching ? [{
-		key: "people",
-		title: localeService.t("ui.emojiPicker.searchResults"),
-		emojis: searchResults
-	}] : normalSections).filter((section) => section.emojis.length);
+	const { rows, sectionPositions } = (0, react.useMemo)(() => {
+		const normalSections = [{
+			key: "recent",
+			title: localeService.t("ui.emojiPicker.recents"),
+			emojis: recents
+		}, ...EMOJI_CATEGORIES.map((category) => ({
+			key: category.key,
+			title: localeService.t(category.titleKey),
+			emojis: emojis[category.key]
+		}))];
+		return createEmojiVirtualRows(isSearching ? [{
+			key: "people",
+			title: localeService.t("ui.emojiPicker.searchResults"),
+			emojis: searchResults
+		}] : normalSections, currentLocale);
+	}, [
+		currentLocale,
+		isSearching,
+		localeService,
+		recents,
+		searchResults
+	]);
+	const [virtualRows, { containerProps, scrollTo, wrapperStyle }] = useVirtualList(rows, {
+		containerTarget: scrollRef,
+		itemHeight: getEmojiVirtualRowHeight,
+		overscan: EMOJI_VIRTUAL_OVERSCAN
+	});
 	(0, react.useEffect)(() => {
 		let disposed = false;
 		localStorageService.getItem(recentStorageKey).then((storedRecents) => {
@@ -20971,6 +21161,17 @@ function EmojiPicker(props) {
 			disposed = true;
 		};
 	}, [localStorageService, recentStorageKey]);
+	(0, react.useEffect)(() => {
+		const pendingSection = pendingSectionRef.current;
+		if (isSearching || !pendingSection) return;
+		const position = sectionPositions.find((item) => item.key === pendingSection);
+		if (position) scrollTo(position.rowIndex);
+		pendingSectionRef.current = null;
+	}, [
+		isSearching,
+		scrollTo,
+		sectionPositions
+	]);
 	const handleSelect = (item, options) => {
 		var _props$onChange, _extraProps$onSelect;
 		const nextRecents = promoteRecentEmoji(recents, item);
@@ -20984,16 +21185,19 @@ function EmojiPicker(props) {
 		handleSelect(getRandomEmoji(), { keepOpen: true });
 	};
 	const handleScroll = (event) => {
+		containerProps.onScroll(event);
 		if (isSearching) return;
-		setActiveTab(getActiveSectionByScrollTop(normalSections, sectionRefs.current, event.currentTarget.scrollTop));
+		setActiveTab(getActiveSectionByScrollTop(sectionPositions, event.currentTarget.scrollTop));
 	};
 	const scrollToSection = (section) => {
 		setQuery("");
 		setActiveTab(section);
-		requestAnimationFrame(() => {
-			const sectionElement = sectionRefs.current[section];
-			if (scrollRef.current && sectionElement) scrollRef.current.scrollTop = sectionElement.offsetTop;
-		});
+		const position = sectionPositions.find((item) => item.key === section);
+		if (!isSearching && position) {
+			scrollTo(position.rowIndex);
+			return;
+		}
+		pendingSectionRef.current = section;
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		"data-u-comp": EMOJI_PICKER_COMPONENT,
@@ -21021,17 +21225,19 @@ function EmojiPicker(props) {
 				ref: scrollRef,
 				className: (0, _univerjs_design.clsx)("univer-relative univer-min-h-0 univer-flex-1 univer-overflow-y-auto univer-px-3", _univerjs_design.scrollbarClassName),
 				onScroll: handleScroll,
-				children: renderedSections.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-flex univer-flex-col univer-gap-1.5 univer-pb-2",
-					children: renderedSections.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmojiSectionView, {
+				children: rows.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: wrapperStyle,
+					children: virtualRows.map(({ data: row }) => row.type === "header" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: { height: EMOJI_SECTION_HEADER_HEIGHT },
+						className: "univer-flex univer-items-center univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
+						children: row.title
+					}, row.key) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmojiGrid, {
 						activeEmoji,
 						emojiTitles: emojiLocaleData.emojiTitles,
-						section,
-						onSelect: handleSelect,
-						refElement: (element) => {
-							sectionRefs.current[section.key] = element;
-						}
-					}, section.key))
+						items: row.items,
+						keyPrefix: row.key,
+						onSelect: handleSelect
+					}, row.key))
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "univer-py-7 univer-text-center univer-text-sm univer-text-gray-400 dark:!univer-text-gray-500",
 					children: localeService.t("ui.emojiPicker.noResults")
@@ -21041,12 +21247,12 @@ function EmojiPicker(props) {
 				className: (0, _univerjs_design.clsx)("univer-flex univer-h-10 univer-shrink-0 univer-items-center univer-border-gray-200 univer-px-2.5 dark:!univer-border-gray-600 [&_svg]:univer-size-5", _univerjs_design.borderTopClassName),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategoryButton, {
 					selected: !isSearching && activeTab === "recent",
-					titleKey: "ui.emojiPicker.recents",
+					title: localeService.t("ui.emojiPicker.recents"),
 					onClick: () => scrollToSection("recent"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.RecentIcon, {})
 				}), EMOJI_CATEGORIES.map((category) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategoryButton, {
 					selected: !isSearching && activeTab === category.key,
-					titleKey: category.titleKey,
+					title: localeService.t(category.titleKey),
 					onClick: () => scrollToSection(category.key),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategoryIcon, { category: category.key })
 				}, category.key))]
@@ -21054,25 +21260,10 @@ function EmojiPicker(props) {
 		]
 	});
 }
-function EmojiSectionView(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		ref: props.refElement,
-		className: "univer-flex univer-flex-col univer-gap-1",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
-			children: props.section.title
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmojiGrid, {
-			activeEmoji: props.activeEmoji,
-			emojiTitles: props.emojiTitles,
-			items: props.section.emojis,
-			keyPrefix: props.section.key,
-			onSelect: props.onSelect
-		})]
-	});
-}
 function EmojiGrid(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-grid univer-grid-cols-10 univer-justify-between univer-gap-1",
+		style: { height: EMOJI_ROW_HEIGHT },
 		children: props.items.map((item) => {
 			const title = getLocalizedEmojiTitle(item, props.emojiTitles);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -21087,12 +21278,11 @@ function EmojiGrid(props) {
 	});
 }
 function CategoryButton(props) {
-	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
-		"aria-label": localeService.t(props.titleKey),
+		"aria-label": props.title,
 		"aria-selected": props.selected,
-		title: localeService.t(props.titleKey),
+		title: props.title,
 		className: (0, _univerjs_design.clsx)("univer-flex univer-h-[30px] univer-flex-1 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-lg univer-border-0 univer-bg-transparent univer-p-0 univer-text-gray-500 dark:!univer-text-gray-400", props.selected ? "univer-bg-primary-50 univer-text-primary-500 dark:!univer-bg-gray-800 dark:!univer-text-primary-400" : "hover:univer-bg-gray-50 hover:univer-text-gray-700 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-300"),
 		onClick: props.onClick,
 		children: props.children
@@ -21101,11 +21291,44 @@ function CategoryButton(props) {
 function writeRecents(localStorageService, storageKey, recents) {
 	localStorageService.setItem(storageKey, recents).catch(() => void 0);
 }
-function getActiveSectionByScrollTop(sections, sectionElements, scrollTop) {
-	let active = "recent";
+function createEmojiVirtualRows(sections, locale) {
+	const rows = [];
+	const sectionPositions = [];
+	let top = 0;
 	sections.forEach((section) => {
-		const element = sectionElements[section.key];
-		if (element && element.offsetTop <= scrollTop + ACTIVE_SECTION_SCROLL_OFFSET) active = section.key;
+		if (!section.emojis.length) return;
+		sectionPositions.push({
+			key: section.key,
+			rowIndex: rows.length,
+			top
+		});
+		rows.push({
+			key: `${locale}-${section.key}-header`,
+			title: section.title,
+			type: "header"
+		});
+		top += EMOJI_SECTION_HEADER_HEIGHT;
+		for (let start = 0; start < section.emojis.length; start += EMOJI_COLUMN_COUNT) {
+			rows.push({
+				items: section.emojis.slice(start, start + EMOJI_COLUMN_COUNT),
+				key: `${locale}-${section.key}-${start / EMOJI_COLUMN_COUNT}`,
+				type: "emojis"
+			});
+			top += EMOJI_ROW_HEIGHT;
+		}
+	});
+	return {
+		rows,
+		sectionPositions
+	};
+}
+function getEmojiVirtualRowHeight(_index, row) {
+	return row.type === "header" ? EMOJI_SECTION_HEADER_HEIGHT : EMOJI_ROW_HEIGHT;
+}
+function getActiveSectionByScrollTop(sectionPositions, scrollTop) {
+	let active = "recent";
+	sectionPositions.forEach((position) => {
+		if (position.top <= scrollTop + ACTIVE_SECTION_SCROLL_OFFSET) active = position.key;
 	});
 	return active;
 }
@@ -21330,8 +21553,7 @@ let FontService = class FontService {
 	constructor(_configService) {
 		this._configService = _configService;
 		_defineProperty(this, "fonts$", new rxjs.BehaviorSubject([]));
-		const config = this._configService.getConfig(UI_PLUGIN_CONFIG_KEY);
-		const { customFontFamily } = config !== null && config !== void 0 ? config : {};
+		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];
@@ -21435,7 +21657,7 @@ const FontFamily = ({ className, disabled: disabledProp, value, disabled$, onCha
 		fonts,
 		localeService
 	]);
-	const inputValue = draftValue !== null && draftValue !== void 0 ? draftValue : viewValue;
+	const inputValue = draftValue ?? viewValue;
 	function resetValue() {
 		setDraftValue(null);
 	}
@@ -21563,8 +21785,8 @@ function FontFamilyDropdown(props) {
 const FontSize = (props) => {
 	const { value, min, max, onChange, disabled$ } = props;
 	const disabled = (0, _wendellhu_redi_react_bindings.useObservable)(disabled$);
-	const [realValue, setRealValue] = (0, react.useState)(Number(value !== null && value !== void 0 ? value : 0));
-	const _value = (0, react.useMemo)(() => Number(value !== null && value !== void 0 ? value : realValue), [value]);
+	const [realValue, setRealValue] = (0, react.useState)(Number(value ?? 0));
+	const _value = (0, react.useMemo)(() => Number(value ?? realValue), [value]);
 	function handleChange(value) {
 		if (value === null) return;
 		setRealValue(value);
@@ -21691,7 +21913,7 @@ const FONT_SIZE_COMPONENT = "UI_FONT_SIZE_COMPONENT";
 //#endregion
 //#region src/views/HeadingItem.tsx
 const HeadingItem = (props) => {
-	var _style$cl$rgb, _style$cl;
+	var _style$cl;
 	const { value, text } = props;
 	const style = _univerjs_core.NAMED_STYLE_MAP[value];
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
@@ -21699,7 +21921,7 @@ const HeadingItem = (props) => {
 		className: (0, _univerjs_design.clsx)("univer-text-sm", { "univer-font-bold": style === null || style === void 0 ? void 0 : style.bl }),
 		style: {
 			fontSize: style === null || style === void 0 ? void 0 : style.fs,
-			color: (_style$cl$rgb = style === null || style === void 0 || (_style$cl = style.cl) === null || _style$cl === void 0 ? void 0 : _style$cl.rgb) !== null && _style$cl$rgb !== void 0 ? _style$cl$rgb : void 0
+			color: (style === null || style === void 0 || (_style$cl = style.cl) === null || _style$cl === void 0 ? void 0 : _style$cl.rgb) ?? void 0
 		},
 		children: localeService.t(text)
 	});
@@ -21805,7 +22027,6 @@ const DRAG_COMMIT_INTERVAL = 50;
 * Slider Component
 */
 function Slider(props) {
-	var _getSliderOffset;
 	const iconManager = (0, _wendellhu_redi_react_bindings.useDependency)(IconManager);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const { value, min = 0, max = 400, disabled = false, resetPoint = 100, shortcuts, onChange } = props;
@@ -21916,7 +22137,7 @@ function Slider(props) {
 		window.addEventListener("pointerout", onPointerOut);
 	}
 	const visualValue = isDragging ? dragValue : value;
-	const sliderOffset = Math.min(Math.max((_getSliderOffset = getSliderOffset(visualValue)) !== null && _getSliderOffset !== void 0 ? _getSliderOffset : 0, 0), 100);
+	const sliderOffset = Math.min(Math.max(getSliderOffset(visualValue) ?? 0, 0), 100);
 	const handleOffset = isRtl ? 100 - sliderOffset : sliderOffset;
 	const ReduceIcon = iconManager.get("ReduceIcon");
 	const IncreaseIcon = iconManager.get("IncreaseIcon");
@@ -22297,7 +22518,6 @@ FeatureSearchController = __decorate([__decorateParam(0, _univerjs_core.ICommand
 //#region src/views/components/ribbon/MobileRibbon.tsx
 const toolbarScrollOffset = 168;
 function MobileRibbon(props) {
-	var _activeGroup$children;
 	const { headerMenuComponents, headerMenu = true } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const ribbonService = (0, _wendellhu_redi_react_bindings.useDependency)(IRibbonService);
@@ -22308,7 +22528,7 @@ function MobileRibbon(props) {
 		return index === -1 ? 0 : index;
 	}, [activatedTab, ribbon]);
 	const activeGroup = ribbon[activeIndex];
-	const activeGroups = (_activeGroup$children = activeGroup === null || activeGroup === void 0 ? void 0 : activeGroup.children) !== null && _activeGroup$children !== void 0 ? _activeGroup$children : [];
+	const activeGroups = (activeGroup === null || activeGroup === void 0 ? void 0 : activeGroup.children) ?? [];
 	const hasHeaderMenu = !!(headerMenu && headerMenuComponents && headerMenuComponents.size > 0);
 	const toolbarScrollRef = (0, react.useRef)(null);
 	const [canScrollLeft, setCanScrollLeft] = (0, react.useState)(false);
@@ -22429,8 +22649,8 @@ function MobileRibbon(props) {
 					"data-u-comp": "mobile-ribbon-toolbar",
 					className: "univer-flex univer-min-w-0 univer-items-center univer-gap-1.5 univer-overflow-x-auto univer-scroll-smooth univer-px-0.5 [&::-webkit-scrollbar]:univer-hidden",
 					children: activeGroups.map((groupItem, groupIndex) => {
-						var _groupItem$children$f, _groupItem$children;
-						const groupItems = (_groupItem$children$f = (_groupItem$children = groupItem.children) === null || _groupItem$children === void 0 ? void 0 : _groupItem$children.filter((child) => !!child.item)) !== null && _groupItem$children$f !== void 0 ? _groupItem$children$f : [];
+						var _groupItem$children;
+						const groupItems = ((_groupItem$children = groupItem.children) === null || _groupItem$children === void 0 ? void 0 : _groupItem$children.filter((child) => !!child.item)) ?? [];
 						if (!groupItems.length) return null;
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: (0, _univerjs_design.clsx)("univer-flex univer-shrink-0 univer-items-center univer-gap-0.5 univer-pr-1.5 rtl:univer-pl-1.5 rtl:univer-pr-0", { [_univerjs_design.borderRightClassName]: groupIndex !== activeGroups.length - 1 }),
@@ -22461,11 +22681,10 @@ function MobileRibbon(props) {
 //#endregion
 //#region src/views/menu/mobile/MobileMenu.tsx
 function MobileMenu(props) {
-	var _viewStack;
 	const { menuType, onOptionSelect, schemas: providedSchemas, menuManagerService: providedMenuManagerService } = props;
 	const rootMenuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
-	const menuManagerService = providedMenuManagerService !== null && providedMenuManagerService !== void 0 ? providedMenuManagerService : rootMenuManagerService;
+	const menuManagerService = providedMenuManagerService ?? rootMenuManagerService;
 	const [viewStack, setViewStack] = (0, react.useState)([]);
 	const menuSchemas = (0, react.useMemo)(() => {
 		if (providedSchemas) return providedSchemas;
@@ -22482,7 +22701,7 @@ function MobileMenu(props) {
 	(0, react.useEffect)(() => {
 		setViewStack([]);
 	}, [menuType, providedSchemas]);
-	const currentView = (_viewStack = viewStack[viewStack.length - 1]) !== null && _viewStack !== void 0 ? _viewStack : null;
+	const currentView = viewStack[viewStack.length - 1] ?? null;
 	if (!menuType && !providedSchemas) return null;
 	const openView = (view) => setViewStack((stack) => [...stack, view]);
 	const closeView = () => setViewStack((stack) => stack.slice(0, -1));
@@ -22610,24 +22829,20 @@ function MobileSchemaRow(props) {
 function MobileSelectionOptionsView(props) {
 	const { options, menuKey, menuItem, currentValue, inheritedDisabled$, onExecute } = props;
 	const inheritedDisabled = (0, _wendellhu_redi_react_bindings.useObservable)(inheritedDisabled$, false);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: options.map((option, index) => {
-		var _option$value;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSelectionOptionRow, {
-			option,
-			menuKey,
-			menuItem,
-			currentValue,
-			disabled: inheritedDisabled,
-			bordered: index !== options.length - 1,
-			onExecute
-		}, `${menuKey}-${String((_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : index)}`);
-	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: options.map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSelectionOptionRow, {
+		option,
+		menuKey,
+		menuItem,
+		currentValue,
+		disabled: inheritedDisabled,
+		bordered: index !== options.length - 1,
+		onExecute
+	}, `${menuKey}-${String(option.value ?? index)}`)) });
 }
 function MobileSelectionOptionRow(props) {
-	var _option$value2;
 	const { option, menuKey, menuItem, currentValue, disabled, bordered, onExecute } = props;
 	const optionValue = (0, _wendellhu_redi_react_bindings.useObservable)(option.value$);
-	const displayValue = (_option$value2 = option.value) !== null && _option$value2 !== void 0 ? _option$value2 : optionValue;
+	const displayValue = option.value ?? optionValue;
 	const selected = displayValue === currentValue;
 	const optionDisabled = disabled || Boolean(option.disabled);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -22656,7 +22871,6 @@ function MobileSelectionOptionRow(props) {
 	});
 }
 function useMobileSchemaInteraction(props) {
-	var _schema$children3;
 	const { schema, menuManagerService, menuType, onOpenView, inheritedDisabled$ } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const menuItem = schema.item;
@@ -22683,7 +22897,7 @@ function useMobileSchemaInteraction(props) {
 		return menuManagerService.getMenuByPositionKey(menuItem.id);
 	}, [menuItem, menuManagerService]);
 	if (!menuItem) return null;
-	const schemaChildren = (_schema$children3 = schema.children) !== null && _schema$children3 !== void 0 ? _schema$children3 : [];
+	const schemaChildren = schema.children ?? [];
 	const hasSubmenu = schemaChildren.length > 0 || selections.length > 0 || subMenuItems.length > 0;
 	const currentValueText = typeof value === "string" || typeof value === "number" ? String(value) : "";
 	const onPress = (onExecute) => {
@@ -22750,8 +22964,8 @@ function useContextGroupHiddenStates(menuSchemas) {
 		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$hid, _childSchema$item;
-				return (_childSchema$item$hid = (_childSchema$item = childSchema.item) === null || _childSchema$item === void 0 ? void 0 : _childSchema$item.hidden$) !== null && _childSchema$item$hid !== void 0 ? _childSchema$item$hid : (0, rxjs.of)(false);
+				var _childSchema$item;
+				return ((_childSchema$item = childSchema.item) === null || _childSchema$item === void 0 ? void 0 : _childSchema$item.hidden$) ?? (0, rxjs.of)(false);
 			}) : [];
 			return hiddenObservables.length ? [(0, rxjs.combineLatest)(hiddenObservables).pipe((0, rxjs.map)((values) => [menuSchema.key, values.every(Boolean)]))] : [];
 		});
@@ -22763,8 +22977,8 @@ function useContextGroupHiddenStates(menuSchemas) {
 }
 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)];
+		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;
 	}, []);
@@ -22832,8 +23046,7 @@ function MobileContextMenu() {
 		menuType,
 		menuManagerService: (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(IMenuManagerService)) ? activeScope.get(IMenuManagerService) : menuManagerService,
 		onOptionSelect: (params) => {
-			var _ref, _params$commandId;
-			const commandId = (_ref = (_params$commandId = params.commandId) !== null && _params$commandId !== void 0 ? _params$commandId : params.id) !== null && _ref !== void 0 ? _ref : params.label;
+			const commandId = params.commandId ?? params.id ?? params.label;
 			const fallbackParams = typeof params.params === "function" ? params.params() : params.params;
 			const commandParams = typeof params.value === "undefined" ? fallbackParams : { value: params.value };
 			if (!commandId) return;
@@ -22892,6 +23105,8 @@ function mountMobileWorkbench(injector, options, mountContainer, onRendered) {
 function MobileWorkbench(props) {
 	const { header = true, toolbar = true, footer = true, headerMenu = true, ribbonType = "classic", contextMenu = true, mountContainer, onRendered } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const lifecycleService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LifecycleService);
+	const workbenchService = (0, _wendellhu_redi_react_bindings.useDependency)(IWorkbenchService);
 	const themeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService);
 	const themeSwitcherService = (0, _wendellhu_redi_react_bindings.useDependency)(ThemeSwitcherService);
 	const contentRef = (0, react.useRef)(null);
@@ -22903,9 +23118,12 @@ function MobileWorkbench(props) {
 	const globalComponents = useComponentsOfPart("global");
 	const toolbarComponents = useComponentsOfPart("toolbar");
 	const darkMode = (0, _wendellhu_redi_react_bindings.useObservable)(themeService.darkMode$, themeService.darkMode);
+	const lifecycleStage = (0, _wendellhu_redi_react_bindings.useObservable)(lifecycleService.lifecycle$, lifecycleService.stage);
+	const externalSkeletonVisible = (0, _wendellhu_redi_react_bindings.useObservable)(workbenchService.skeletonVisible$, void 0, true);
+	const ready = lifecycleStage >= _univerjs_core.LifecycleStages.Ready;
 	(0, react.useEffect)(() => {
-		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
-	}, [onRendered]);
+		if (ready && contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
+	}, [ready, onRendered]);
 	const locale = (0, _wendellhu_redi_react_bindings.useObservable)(() => localeService.localeChanged$.pipe((0, rxjs.map)(() => localeService.getLocales())), localeService.getLocales(), false, [localeService]);
 	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$, localeService.getDirection());
 	const portalContainer = (0, react.useMemo)(() => document.createElement("div"), []);
@@ -22931,51 +23149,58 @@ function MobileWorkbench(props) {
 		direction,
 		mountContainer: portalContainer,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-u-comp": "app-layout",
-			className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
-			tabIndex: -1,
-			onBlur: (e) => e.stopPropagation(),
-			onContextMenu: (e) => e.preventDefault(),
-			dir: direction,
-			children: [header && toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-				"data-u-comp": "headerbar",
-				className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
-					components: toolbarComponents,
-					sharedProps: {
-						ribbonType,
-						headerMenuComponents,
-						headerMenu
-					}
-				}, "toolbar")
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-							className: "univer-h-full",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: (0, _univerjs_design.clsx)("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-								className: "univer-w-screen",
-								children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header")
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-								ref: contentRef,
-								className: "univer-relative univer-overflow-hidden",
-								"data-range-selector": true,
-								onContextMenu: (e) => e.preventDefault(),
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-							className: "univer-h-full",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {})
-						})
-					]
-				}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: footerComponents }, "footer") })]
+			className: "univer-relative univer-h-full univer-min-h-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-u-comp": "app-layout",
+				className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
+				tabIndex: -1,
+				onBlur: (e) => e.stopPropagation(),
+				onContextMenu: (e) => e.preventDefault(),
+				dir: direction,
+				children: [header && toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+					"data-u-comp": "headerbar",
+					className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
+						components: toolbarComponents,
+						sharedProps: {
+							ribbonType,
+							headerMenuComponents,
+							headerMenu
+						}
+					}, "toolbar")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+								className: "univer-h-full",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+								className: (0, _univerjs_design.clsx)("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+									className: "univer-w-screen",
+									children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+									ref: contentRef,
+									className: "univer-relative univer-overflow-hidden",
+									"data-range-selector": true,
+									onContextMenu: (e) => e.preventDefault(),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+								className: "univer-h-full",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {})
+							})
+						]
+					}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: footerComponents }, "footer") })]
+				})]
+			}), (!ready || externalSkeletonVisible) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkbenchSkeleton, {
+				darkMode,
+				direction,
+				overlay: true
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			dir: direction,
@@ -23274,7 +23499,7 @@ let BrowserClipboardService = class BrowserClipboardService extends _univerjs_co
 			return await navigator.clipboard.write([new ClipboardItem({
 				[PLAIN_TEXT_CLIPBOARD_MIME_TYPE]: new Blob([text], { type: PLAIN_TEXT_CLIPBOARD_MIME_TYPE }),
 				[HTML_CLIPBOARD_MIME_TYPE]: new Blob([html], { type: HTML_CLIPBOARD_MIME_TYPE }),
-				...Object.fromEntries(Object.entries(customData !== null && customData !== void 0 ? customData : {}).map(([type, value]) => [type, new Blob([value], { type })]))
+				...Object.fromEntries(Object.entries(customData ?? {}).map(([type, value]) => [type, new Blob([value], { type })]))
 			})]);
 		} catch (error) {
 			if (customData && Object.keys(customData).length) try {
@@ -23411,10 +23636,7 @@ function serializeSanitizedHtmlForClipboard(html) {
 	return container.innerHTML;
 }
 function sanitizeHtmlNode(node) {
-	if (node.nodeType === Node.TEXT_NODE) {
-		var _node$textContent;
-		return document.createTextNode((_node$textContent = node.textContent) !== null && _node$textContent !== void 0 ? _node$textContent : "");
-	}
+	if (node.nodeType === Node.TEXT_NODE) return document.createTextNode(node.textContent ?? "");
 	if (node.nodeType !== Node.ELEMENT_NODE) return null;
 	const sourceElement = node;
 	const tagName = sourceElement.tagName.toLowerCase();
@@ -23743,11 +23965,10 @@ DesktopGalleryService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject
 var DesktopLocalFileService = class extends _univerjs_core.Disposable {
 	openFile(options) {
 		return new Promise((resolve) => {
-			var _options$accept, _options$multiple;
 			const inputElement = document.createElement("input");
 			inputElement.type = "file";
-			inputElement.accept = (_options$accept = options === null || options === void 0 ? void 0 : options.accept) !== null && _options$accept !== void 0 ? _options$accept : "";
-			inputElement.multiple = (_options$multiple = options === null || options === void 0 ? void 0 : options.multiple) !== null && _options$multiple !== void 0 ? _options$multiple : false;
+			inputElement.accept = (options === null || options === void 0 ? void 0 : options.accept) ?? "";
+			inputElement.multiple = (options === null || options === void 0 ? void 0 : options.multiple) ?? false;
 			inputElement.onchange = (event) => {
 				const fileList = event.target.files;
 				if (fileList) resolve(Array.from(fileList));
@@ -23829,10 +24050,7 @@ var IndexedDBDriver = class {
 		const store = await this._store("readonly");
 		return new Promise((resolve, reject) => {
 			const req = store.get(key);
-			req.onsuccess = () => {
-				var _req$result;
-				return resolve((_req$result = req.result) !== null && _req$result !== void 0 ? _req$result : null);
-			};
+			req.onsuccess = () => resolve(req.result ?? null);
 			req.onerror = () => reject(req.error);
 		});
 	}
@@ -23940,8 +24158,7 @@ var LocalStorageDriver = class {
 		toRemove.forEach((k) => localStorage.removeItem(k));
 	}
 	async key(index) {
-		var _keys$index;
-		return (_keys$index = this._keys()[index]) !== null && _keys$index !== void 0 ? _keys$index : null;
+		return this._keys()[index] ?? null;
 	}
 	async keys() {
 		return this._keys();
@@ -24042,8 +24259,7 @@ let DesktopMessageService = class DesktopMessageService extends _univerjs_core.D
 		(0, _univerjs_design.removeMessage)();
 	}
 	show(options) {
-		var _options$id;
-		const id = (_options$id = options.id) !== null && _options$id !== void 0 ? _options$id : `message-${Date.now()}-${messageId}`;
+		const id = options.id ?? `message-${Date.now()}-${messageId}`;
 		messageId += 1;
 		(0, _univerjs_design.message)(Object.assign({}, options, { id }));
 		return (0, _univerjs_core.toDisposable)(() => (0, _univerjs_design.removeMessage)(id));
@@ -24189,6 +24405,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends _univerjs_core.Plu
 			[IconManager],
 			[ComponentsController],
 			[ThemeSwitcherService],
+			[IWorkbenchService, { useClass: WorkbenchService }],
 			[ZIndexManager],
 			[ShortcutPanelService],
 			[IUIPartsService, { useClass: UIPartsService }],
@@ -24294,6 +24511,7 @@ let UniverUIPlugin = class UniverUIPlugin extends _univerjs_core.Plugin {
 			[ZIndexManager],
 			[ShortcutPanelService],
 			[IUIPartsService, { useClass: UIPartsService }],
+			[IWorkbenchService, { useClass: WorkbenchService }],
 			[ILayoutService, { useClass: DesktopLayoutService }],
 			[IRibbonService, { useClass: DesktopRibbonService }],
 			[IRibbonOverrideService, { useClass: RibbonOverrideService }],
@@ -24469,8 +24687,7 @@ function handleDomToJson($dom) {
 		let span = nodeList[`${i}`];
 		let str;
 		if (span.nodeName === "#text") {
-			var _span$textContent;
-			str = (_span$textContent = span.textContent) !== null && _span$textContent !== void 0 ? _span$textContent : "";
+			str = span.textContent ?? "";
 			span = span.parentElement;
 		} else str = span.innerText;
 		const textStyle = handleStringToStyle(span);
@@ -24502,8 +24719,8 @@ function handleDomToJson($dom) {
 * @returns
 */
 function handleStringToStyle($dom, cssStyle = "") {
-	var _$dom$style$cssText, _$dom$style;
-	let cssText = (_$dom$style$cssText = $dom === null || $dom === void 0 || (_$dom$style = $dom.style) === null || _$dom$style === void 0 ? void 0 : _$dom$style.cssText) !== null && _$dom$style$cssText !== void 0 ? _$dom$style$cssText : "";
+	var _$dom$style;
+	let cssText = ($dom === null || $dom === void 0 || (_$dom$style = $dom.style) === null || _$dom$style === void 0 ? void 0 : _$dom$style.cssText) ?? "";
 	cssText += cssStyle;
 	cssText = cssText.replace(/[\r\n]+/g, "");
 	if (cssText.length === 0) return {};
@@ -24523,8 +24740,10 @@ function handleStringToStyle($dom, cssStyle = "") {
 		else styleList.bl = 0;
 		else if (key === "font-style") if (value === "italic") styleList.it = 1;
 		else styleList.it = 0;
-		else if (key === "font-family") styleList.ff = extractFontFamily(textTrim(originStr));
-		else if (key === "font-size") {
+		else if (key === "font-family") {
+			const fontFamily = extractFontFamily(textTrim(originStr));
+			styleList.ff = fontFamily;
+		} else if (key === "font-size") {
 			let fs = Number.parseInt(value);
 			if (cssText.indexOf("vertical-align") > -1 && (cssText.indexOf("sub") > -1 || cssText.indexOf("sup") > -1)) fs *= 2;
 			if (value.indexOf("px") !== -1) fs = getPtFontSizeByPx(Number.parseInt(value, 10));
@@ -24851,10 +25070,9 @@ function handelTableToJson(table) {
 			while (c < colLen && data[r][c] != null) c++;
 			if (c === colLen) return;
 			if (data[r][c] == null) {
-				var _Number, _Number2;
 				data[r][c] = cell;
-				const rowSpan = (_Number = Number(td.getAttribute("rowSpan"))) !== null && _Number !== void 0 ? _Number : 1;
-				const colSpan = (_Number2 = Number(td.getAttribute("colSpan"))) !== null && _Number2 !== void 0 ? _Number2 : 1;
+				const rowSpan = Number(td.getAttribute("rowSpan")) ?? 1;
+				const colSpan = Number(td.getAttribute("colSpan")) ?? 1;
 				if (rowSpan > 1 || colSpan > 1) {
 					const first = {
 						rs: +rowSpan - 1,
@@ -24961,10 +25179,9 @@ function handelExcelToJson(html) {
 			while (c < colLen && data[r][c] != null) c++;
 			if (c === colLen) return;
 			if (data[r][c] == null) {
-				var _Number3, _Number4;
 				data[r][c] = cell;
-				const rowSpan = (_Number3 = Number(td.getAttribute("rowSpan"))) !== null && _Number3 !== void 0 ? _Number3 : 1;
-				const colSpan = (_Number4 = Number(td.getAttribute("colSpan"))) !== null && _Number4 !== void 0 ? _Number4 : 1;
+				const rowSpan = Number(td.getAttribute("rowSpan")) ?? 1;
+				const colSpan = Number(td.getAttribute("colSpan")) ?? 1;
 				if (rowSpan > 1 || colSpan > 1) {
 					const first = {
 						rs: +rowSpan - 1,
@@ -25028,14 +25245,13 @@ function RegisteredPrintFloatDomSingle(props) {
 	});
 }
 function PrintFloatDomSingleContent(props) {
-	var _position$startY, _position$startX;
 	const { layer, id, position, Component } = props;
 	const univerInstanceService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IUniverInstanceService);
 	const domRef = (0, react.useRef)(null);
 	const innerDomRef = (0, react.useRef)(null);
 	const transformRef = (0, react.useRef)(`transform: rotate(${position === null || position === void 0 ? void 0 : position.rotate}deg) translate(${position === null || position === void 0 ? void 0 : position.startX}px, ${position === null || position === void 0 ? void 0 : position.startY}px)`);
-	const topRef = (0, react.useRef)((_position$startY = position === null || position === void 0 ? void 0 : position.startY) !== null && _position$startY !== void 0 ? _position$startY : 0);
-	const leftRef = (0, react.useRef)((_position$startX = position === null || position === void 0 ? void 0 : position.startX) !== null && _position$startX !== void 0 ? _position$startX : 0);
+	const topRef = (0, react.useRef)((position === null || position === void 0 ? void 0 : position.startY) ?? 0);
+	const leftRef = (0, react.useRef)((position === null || position === void 0 ? void 0 : position.startX) ?? 0);
 	const layerProps = (0, react.useMemo)(() => ({
 		data: layer.data,
 		...layer.props
@@ -25325,6 +25541,7 @@ exports.ISidebarService = ISidebarService;
 exports.IUIController = IUIController;
 exports.IUIPartsService = IUIPartsService;
 exports.IUIRuntimeScopeService = IUIRuntimeScopeService;
+exports.IWorkbenchService = IWorkbenchService;
 Object.defineProperty(exports, 'IconManager', {
   enumerable: true,
   get: function () {
@@ -25343,6 +25560,7 @@ Object.defineProperty(exports, 'MenuManagerService', {
 exports.MetaKeys = MetaKeys;
 exports.MobileContextMenu = MobileContextMenu;
 exports.MockMessageService = MockMessageService;
+exports.NativeTextEditorShortcutBehavior = NativeTextEditorShortcutBehavior;
 exports.PLAIN_TEXT_CLIPBOARD_MIME_TYPE = PLAIN_TEXT_CLIPBOARD_MIME_TYPE;
 exports.PasteCommand = PasteCommand;
 exports.PlatformService = PlatformService;
@@ -25433,6 +25651,7 @@ Object.defineProperty(exports, 'WithDependency', {
     return _wendellhu_redi_react_bindings.WithDependency;
   }
 });
+exports.WorkbenchService = WorkbenchService;
 exports.ZIndexManager = ZIndexManager;
 exports.ZoomInput = ZoomInput;
 Object.defineProperty(exports, 'connectDependencies', {