@univerjs/ui 1.0.0-alpha.5 → 1.0.0-alpha.7

package/lib/cjs/index.js

@@ -27,6 +27,7 @@ let _univerjs_icons = require("@univerjs/icons");
 * limitations under the License.
 */
 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;
@@ -36,6 +37,12 @@ function getEmbedBoundaryOwner(target) {
 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;
+}
 function keepInteractionInsideSameEmbedBoundary(event) {
 	const owner = getEmbedBoundaryOwner(event.currentTarget);
 	if (!owner) return;
@@ -458,12 +465,13 @@ var ZIndexManager = class {
 //#region src/common/menu-hidden-observable.ts
 function getMenuHiddenObservable(accessor, targetUniverType, matchUnitId, needHideUnitId) {
 	const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+	const getUnitType = (unitId) => _univerjs_core.SHEET_EDITOR_UNITS.includes(unitId) ? _univerjs_core.UniverInstanceType.UNIVER_SHEET : univerInstanceService.getUnitType(unitId);
 	return new rxjs.Observable((subscriber) => {
 		const subscription = univerInstanceService.focused$.subscribe((unitId) => {
 			if (unitId == null) return subscriber.next(true);
 			if (matchUnitId && matchUnitId !== unitId) return subscriber.next(true);
 			if (needHideUnitId && (Array.isArray(needHideUnitId) ? needHideUnitId.includes(unitId) : needHideUnitId === unitId)) return subscriber.next(true);
-			const univerType = univerInstanceService.getUnitType(unitId);
+			const univerType = getUnitType(unitId);
 			subscriber.next(univerType !== targetUniverType);
 		});
 		const focusedUniverInstance = univerInstanceService.getFocusedUnit();
@@ -471,7 +479,7 @@ function getMenuHiddenObservable(accessor, targetUniverType, matchUnitId, needHi
 			const currentUnit = univerInstanceService.getCurrentUnitOfType(targetUniverType);
 			subscriber.next(currentUnit == null);
 		} else {
-			const univerType = univerInstanceService.getUnitType(focusedUniverInstance.getUnitId());
+			const univerType = getUnitType(focusedUniverInstance.getUnitId());
 			subscriber.next(univerType !== targetUniverType);
 		}
 		return () => subscription.unsubscribe();
@@ -830,6 +838,25 @@ var PlatformService = class {
 	}
 };
 
+//#endregion
+//#region src/services/runtime-scope/ui-runtime-scope.service.ts
+const IUIRuntimeScopeService = (0, _univerjs_core.createIdentifier)("ui.runtime-scope.service");
+var UIRuntimeScopeService = class extends _univerjs_core.Disposable {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_scopes", /* @__PURE__ */ new Map());
+	}
+	register(scope) {
+		this._scopes.set(scope.unitId, scope);
+		return (0, _univerjs_core.toDisposable)(() => {
+			if (this._scopes.get(scope.unitId) === scope) this._scopes.delete(scope.unitId);
+		});
+	}
+	get(unitId) {
+		return unitId ? this._scopes.get(unitId) : void 0;
+	}
+};
+
 //#endregion
 //#region src/services/shortcut/shortcut.service.ts
 /**
@@ -837,11 +864,12 @@ var PlatformService = class {
 */
 const IShortcutService = (0, _univerjs_core.createIdentifier)("ui.shortcut.service");
 let ShortcutService = class ShortcutService extends _univerjs_core.Disposable {
-	constructor(_commandService, _platformService, _contextService, _layoutService) {
+	constructor(_commandService, _platformService, _contextService, _runtimeScopeService, _layoutService) {
 		super();
 		this._commandService = _commandService;
 		this._platformService = _platformService;
 		this._contextService = _contextService;
+		this._runtimeScopeService = _runtimeScopeService;
 		this._layoutService = _layoutService;
 		_defineProperty(this, "_shortCutMapping", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_commandIDMapping", /* @__PURE__ */ new Map());
@@ -911,11 +939,13 @@ let ShortcutService = class ShortcutService extends _univerjs_core.Disposable {
 	_resolveKeyboardEvent(e) {
 		const candidate = this.dispatch(e);
 		if (candidate) {
-			this._commandService.executeCommand(candidate.id, candidate.staticParameters);
+			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);
 			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);
@@ -923,12 +953,13 @@ let ShortcutService = class ShortcutService extends _univerjs_core.Disposable {
 		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, this._contextService)) !== null && _s$preconditions !== void 0 ? _s$preconditions : true;
+			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;
 		});
 	}
 	_getBindingFromItem(item) {
@@ -952,12 +983,18 @@ let ShortcutService = class ShortcutService extends _univerjs_core.Disposable {
 		if (!(target instanceof HTMLElement)) return false;
 		return (target.isContentEditable || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) && isEmbedBoundaryTarget(target);
 	}
+	_getRuntimeService(event, identifier) {
+		const childUnitId = getEmbedChildUnitId(event.target);
+		const runtimeScope = this._runtimeScopeService.get(childUnitId);
+		return (runtimeScope === null || runtimeScope === void 0 ? void 0 : runtimeScope.has(identifier)) ? runtimeScope.get(identifier) : void 0;
+	}
 };
 ShortcutService = __decorate([
 	__decorateParam(0, _univerjs_core.ICommandService),
 	__decorateParam(1, IPlatformService),
 	__decorateParam(2, _univerjs_core.IContextService),
-	__decorateParam(3, (0, _univerjs_core.Optional)(ILayoutService))
+	__decorateParam(3, IUIRuntimeScopeService),
+	__decorateParam(4, (0, _univerjs_core.Optional)(ILayoutService))
 ], ShortcutService);
 
 //#endregion
@@ -1073,6 +1110,7 @@ let RibbonStartGroup = /* @__PURE__ */ function(RibbonStartGroup) {
 	RibbonStartGroup["HISTORY"] = "ribbon.start.history";
 	RibbonStartGroup["FORMAT"] = "ribbon.start.format";
 	RibbonStartGroup["LAYOUT"] = "ribbon.start.layout";
+	RibbonStartGroup["NUMBER"] = "ribbon.start.number";
 	RibbonStartGroup["OTHERS"] = "ribbon.start.others";
 	return RibbonStartGroup;
 }({});
@@ -1151,7 +1189,8 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 					["ribbon.start.history"]: { order: 0 },
 					["ribbon.start.format"]: { order: 1 },
 					["ribbon.start.layout"]: { order: 2 },
-					["ribbon.start.others"]: { order: 3 }
+					["ribbon.start.number"]: { order: 3 },
+					["ribbon.start.others"]: { order: 4 }
 				},
 				["ribbon.insert"]: {
 					order: 1,
@@ -1299,7 +1338,8 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 				quickLayout: value.quickLayout,
 				quickColumns: value.quickColumns,
 				quickLayoutVariant: value.quickLayoutVariant,
-				tiny: value.tiny
+				tiny: value.tiny,
+				gridLayout: value.gridLayout
 			};
 			if (value.menuItemFactory) {
 				const item = this._injector.invoke(value.menuItemFactory);
@@ -1410,6 +1450,10 @@ ShortcutPanelController = __decorate([
 	__decorateParam(2, _univerjs_core.ICommandService)
 ], ShortcutPanelController);
 
+//#endregion
+//#region src/services/dialog/dialog.service.ts
+const IDialogService = (0, _univerjs_core.createIdentifier)("univer.ui.dialog-service");
+
 //#endregion
 //#region src/services/menu/menu.ts
 let MenuItemType = /* @__PURE__ */ function(MenuItemType) {
@@ -1428,7 +1472,372 @@ function isMenuButtonSelectorItem(v) {
 }
 
 //#endregion
-//#region src/controllers/menus/menus.ts
+//#region src/services/ribbon/ribbon.service.ts
+const IRibbonService = (0, _univerjs_core.createIdentifier)("univer.ribbon-service");
+function isSameHiddenMap(previous, current) {
+	return previous.length === current.length && previous.every((hidden, index) => hidden === current[index]);
+}
+let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Disposable {
+	constructor(_menuManagerService, _univerInstanceService) {
+		super();
+		this._menuManagerService = _menuManagerService;
+		this._univerInstanceService = _univerInstanceService;
+		_defineProperty(this, "_ribbon$", new rxjs.BehaviorSubject([]));
+		_defineProperty(this, "ribbon$", this._ribbon$.asObservable());
+		_defineProperty(this, "_activatedTab$", new rxjs.BehaviorSubject("ribbon.start"));
+		_defineProperty(this, "activatedTab$", this._activatedTab$.asObservable());
+		_defineProperty(this, "_collapsedIds$", new rxjs.BehaviorSubject([]));
+		_defineProperty(this, "collapsedIds$", this._collapsedIds$.asObservable());
+		_defineProperty(this, "_fakeToolbarVisible$", new rxjs.BehaviorSubject(false));
+		_defineProperty(this, "fakeToolbarVisible$", this._fakeToolbarVisible$.asObservable());
+		_defineProperty(this, "_visibleContextualTabs", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_contextualTabs", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_lastNonContextualActivatedTab", "ribbon.start");
+		_defineProperty(this, "_hiddenSubscription", null);
+		this._initRibbonSubscription();
+	}
+	setActivatedTab(tab) {
+		if (!this._isContextualTab(tab)) this._lastNonContextualActivatedTab = tab;
+		this._activatedTab$.next(tab);
+	}
+	showContextualTab(tab, options) {
+		this._visibleContextualTabs.add(tab);
+		this._updateRibbon();
+		if (options === null || options === void 0 ? void 0 : options.activate) this.setActivatedTab(tab);
+	}
+	hideContextualTab(tab) {
+		if (!this._visibleContextualTabs.delete(tab)) return;
+		this._updateRibbon();
+	}
+	hideAllContextualTabs() {
+		if (this._visibleContextualTabs.size === 0) return;
+		this._visibleContextualTabs.clear();
+		this._updateRibbon();
+	}
+	setCollapsedIds(ids) {
+		this._collapsedIds$.next(ids);
+	}
+	setFakeToolbarVisible(visible) {
+		this._fakeToolbarVisible$.next(visible);
+	}
+	_initRibbonSubscription() {
+		this.disposeWithMe((0, rxjs.combineLatest)([this._menuManagerService.menuChanged$.pipe((0, rxjs_operators.startWith)(void 0)), this._univerInstanceService.focused$.pipe((0, rxjs_operators.startWith)(void 0), (0, rxjs_operators.distinctUntilChanged)())]).subscribe(() => {
+			this._updateRibbon();
+		}));
+	}
+	_updateRibbon() {
+		var _this$_hiddenSubscrip;
+		const ribbon = this._filterContextualTabs(this._menuManagerService.getMenuByPositionKey("ribbon"));
+		const hiddenObservableMap = [];
+		const hiddenKeyMap = [];
+		for (const group of ribbon) if (group.children) {
+			for (const item of group.children) if (item.children) for (const child of item.children) {
+				var _child$item;
+				if ((_child$item = child.item) === null || _child$item === void 0 ? void 0 : _child$item.hidden$) {
+					hiddenObservableMap.push(child.item.hidden$);
+					hiddenKeyMap.push(child.key);
+				}
+			}
+		}
+		(_this$_hiddenSubscrip = this._hiddenSubscription) === null || _this$_hiddenSubscrip === void 0 || _this$_hiddenSubscrip.unsubscribe();
+		this._hiddenSubscription = null;
+		if (hiddenObservableMap.length === 0) {
+			this._setRibbon(ribbon);
+			return;
+		}
+		this._hiddenSubscription = (0, rxjs.combineLatest)(hiddenObservableMap.map((hidden$) => hidden$.pipe((0, rxjs_operators.startWith)(false)))).pipe((0, rxjs_operators.distinctUntilChanged)(isSameHiddenMap)).subscribe((hiddenMap) => {
+			const newRibbon = [];
+			const hiddenPathMap = hiddenMap.map((hidden, index) => {
+				if (hidden) return hiddenKeyMap[index];
+				return null;
+			}).filter((item) => !!item);
+			for (const group of ribbon) {
+				var _group$children, _newGroup$children2;
+				const newGroup = {
+					...group,
+					children: []
+				};
+				if ((_group$children = group.children) === null || _group$children === void 0 ? void 0 : _group$children.length) for (const item of group.children) {
+					var _item$children;
+					const newItem = {
+						...item,
+						children: []
+					};
+					let shouldAddItem = true;
+					if ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) {
+						var _newItem$children2;
+						for (const child of item.children) if (!hiddenPathMap.includes(child.key)) {
+							var _newItem$children;
+							(_newItem$children = newItem.children) === null || _newItem$children === void 0 || _newItem$children.push(child);
+						}
+						if ((_newItem$children2 = newItem.children) === null || _newItem$children2 === void 0 ? void 0 : _newItem$children2.every((child) => {
+							var _child$children;
+							return ((_child$children = child.children) === null || _child$children === void 0 ? void 0 : _child$children.length) === 0;
+						})) shouldAddItem = false;
+					}
+					if (shouldAddItem) {
+						var _newGroup$children;
+						(_newGroup$children = newGroup.children) === null || _newGroup$children === void 0 || _newGroup$children.push(newItem);
+					}
+				}
+				if (((_newGroup$children2 = newGroup.children) === null || _newGroup$children2 === void 0 ? void 0 : _newGroup$children2.length) && newGroup.children.every((item) => {
+					var _item$children2;
+					return (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length;
+				})) newRibbon.push(newGroup);
+			}
+			this._setRibbon(newRibbon);
+		});
+	}
+	_filterContextualTabs(ribbon) {
+		this._contextualTabs.clear();
+		ribbon.forEach((group) => {
+			if (group.contextual) this._contextualTabs.add(group.key);
+		});
+		return ribbon.filter((group) => !group.contextual || this._visibleContextualTabs.has(group.key));
+	}
+	_setRibbon(ribbon) {
+		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];
+			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");
+			this._activatedTab$.next(fallbackTab.key);
+			if (!fallbackTab.contextual) this._lastNonContextualActivatedTab = fallbackTab.key;
+		} else if (activeGroup && !activeGroup.contextual) this._lastNonContextualActivatedTab = activeGroup.key;
+		this._ribbon$.next(ribbon);
+	}
+	_isContextualTab(tab) {
+		return this._contextualTabs.has(tab) || this._ribbon$.getValue().some((group) => group.key === tab && group.contextual);
+	}
+	dispose() {
+		var _this$_hiddenSubscrip2;
+		(_this$_hiddenSubscrip2 = this._hiddenSubscription) === null || _this$_hiddenSubscrip2 === void 0 || _this$_hiddenSubscrip2.unsubscribe();
+		this._hiddenSubscription = null;
+		this._ribbon$.next([]);
+		this._ribbon$.complete();
+		this._activatedTab$.complete();
+		this._collapsedIds$.complete();
+		this._fakeToolbarVisible$.complete();
+		super.dispose();
+	}
+};
+DesktopRibbonService = __decorate([__decorateParam(0, IMenuManagerService), __decorateParam(1, _univerjs_core.IUniverInstanceService)], DesktopRibbonService);
+
+//#endregion
+//#region src/utils/di.ts
+function unwrap(o) {
+	if (typeof o === "function") return o();
+	return o;
+}
+function useObservableRef(observable, defaultValue) {
+	const ref = (0, react.useRef)(defaultValue);
+	(0, react.useEffect)(() => {
+		if (observable) {
+			const sub = unwrap(observable).subscribe((value) => {
+				ref.current = value;
+			});
+			return () => sub.unsubscribe();
+		}
+	}, [observable]);
+	return ref;
+}
+
+//#endregion
+//#region src/views/components/feature-search/FeatureSearch.tsx
+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 };
+}
+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 };
+}
+function deduplicate(items) {
+	return items.filter((item, index) => items.findIndex((candidate) => candidate.commandId === item.commandId && _univerjs_core.Tools.diffValue(candidate.params, item.params)) === index);
+}
+function FeatureSearch() {
+	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const commandService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ICommandService);
+	const dialogService = (0, _wendellhu_redi_react_bindings.useDependency)(IDialogService);
+	const layoutService = (0, _wendellhu_redi_react_bindings.useDependency)(ILayoutService);
+	const ribbonService = (0, _wendellhu_redi_react_bindings.useDependency)(IRibbonService);
+	const items = (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => {
+		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;
+			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 schemaPath = schemaTitle ? [...path, schemaTitle] : path;
+				const schemaKeyPath = [...keyPath, `${schema.key}:${index}`];
+				const result = [];
+				if (schema.item) result.push({
+					key: `${schemaKeyPath.join("/")}:item`,
+					item: schema.item,
+					path: schemaPath,
+					ancestors,
+					parentTitle
+				});
+				if (schema.headerActionItem) result.push({
+					key: `${schemaKeyPath.join("/")}:header`,
+					item: schema.headerActionItem,
+					path: schemaPath,
+					ancestors,
+					parentTitle
+				});
+				if (schema.children) result.push(...collectCandidates(schema.children, schemaPath, schemaKeyPath, schema.item ? [...ancestors, schema.item] : ancestors, schema.item ? getItemTitle(schema.item) : parentTitle));
+				return result;
+			});
+		}
+		function observeCandidate(candidate) {
+			var _item$hidden$$pipe, _item$hidden$, _item$disabled$$pipe, _item$disabled$, _item$value$$pipe, _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 : []);
+			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);
+				})).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);
+				})).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),
+				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 (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;
+					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}`,
+						title: localeService.t(option.label),
+						parentTitle: title,
+						description: "",
+						path,
+						commandId,
+						params: resolveOptionParams(option),
+						getParams: () => resolveOptionParams(option)
+					});
+				});
+				return result;
+			}));
+		}
+		return (0, rxjs.combineLatest)([ribbonService.ribbon$, (0, rxjs.merge)((0, rxjs.of)(void 0), menuManagerService.menuChanged$, localeService.localeChanged$)]).pipe((0, rxjs_operators.switchMap)(([ribbon]) => {
+			const candidates = [...collectCandidates(ribbon, [localeService.t("ui.featureSearch.ribbon")], ["ribbon"]), ...collectCandidates(menuManagerService.getMenuByPositionKey("contextMenu"), [localeService.t("ui.featureSearch.contextMenu")], ["contextMenu"])];
+			if (candidates.length === 0) return (0, rxjs.of)([]);
+			return (0, rxjs.combineLatest)(candidates.map(observeCandidate)).pipe((0, rxjs_operators.map)((items) => deduplicate(items.flat())));
+		}));
+	}, [
+		localeService,
+		menuManagerService,
+		ribbonService
+	]), []);
+	async function execute(item) {
+		layoutService.focus();
+		if (await commandService.executeCommand(item.commandId, item.getParams())) dialogService.close(FEATURE_SEARCH_DIALOG_ID);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Command, {
+		label: localeService.t("ui.featureSearch.title"),
+		loop: true,
+		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
+				})]
+			}, item.key);
+		}) })] })]
+	});
+}
+
+//#endregion
+//#region src/commands/operations/open-feature-search.operation.ts
+const OpenFeatureSearchOperation = {
+	id: "ui.operation.open-feature-search",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		const dialogService = accessor.get(IDialogService);
+		const localeService = accessor.get(_univerjs_core.LocaleService);
+		dialogService.open({
+			id: FEATURE_SEARCH_DIALOG_ID,
+			width: 560,
+			title: { title: localeService.t("ui.featureSearch.title") },
+			children: { label: FEATURE_SEARCH_COMPONENT },
+			onClose: () => dialogService.close(FEATURE_SEARCH_DIALOG_ID)
+		});
+		return true;
+	}
+};
+
+//#endregion
+//#region src/menu/feature-search.menu.ts
+function FeatureSearchMenuItemFactory() {
+	return {
+		id: OpenFeatureSearchOperation.id,
+		title: "ui.featureSearch.title",
+		tooltip: "ui.featureSearch.title",
+		icon: "FeatureSearchIcon",
+		type: 0
+	};
+}
+
+//#endregion
+//#region src/menu/history.menu.ts
 const undoRedoDisableFactory$ = (accessor, isUndo) => {
 	const undoRedoService = accessor.get(_univerjs_core.IUndoRedoService);
 	const contextService = accessor.get(_univerjs_core.IContextService);
@@ -1461,13 +1870,13 @@ function RedoMenuItemFactory(accessor) {
 }
 
 //#endregion
-//#region src/controllers/shortcut-display/menu.ts
+//#region src/menu/shortcut-panel.menu.ts
 function ShortcutPanelMenuItemFactory() {
 	return {
 		id: ToggleShortcutPanelOperation.id,
 		title: "ui.toggle-shortcut-panel",
 		tooltip: "ui.toggle-shortcut-panel",
-		icon: "ShortcutIcon",
+		icon: "KeyboardIcon",
 		type: 0
 	};
 }
@@ -1478,17 +1887,33 @@ const menuSchema = {
 	["ribbon.start.history"]: {
 		[_univerjs_core.UndoCommand.id]: {
 			order: 0,
+			gridLayout: {
+				row: 1,
+				column: 1,
+				iconSize: 18
+			},
 			menuItemFactory: UndoMenuItemFactory
 		},
 		[_univerjs_core.RedoCommand.id]: {
 			order: 1,
+			gridLayout: {
+				row: 2,
+				column: 1,
+				iconSize: 18
+			},
 			menuItemFactory: RedoMenuItemFactory
 		}
 	},
-	["ribbon.start.others"]: { [ToggleShortcutPanelOperation.id]: {
-		order: 1,
-		menuItemFactory: ShortcutPanelMenuItemFactory
-	} }
+	["ribbon.start.others"]: {
+		[ToggleShortcutPanelOperation.id]: {
+			order: 1,
+			menuItemFactory: ShortcutPanelMenuItemFactory
+		},
+		[OpenFeatureSearchOperation.id]: {
+			order: 2,
+			menuItemFactory: FeatureSearchMenuItemFactory
+		}
+	}
 };
 
 //#endregion
@@ -1553,25 +1978,6 @@ var UIPartsService = class extends _univerjs_core.Disposable {
 	}
 };
 
-//#endregion
-//#region src/utils/di.ts
-function unwrap(o) {
-	if (typeof o === "function") return o();
-	return o;
-}
-function useObservableRef(observable, defaultValue) {
-	const ref = (0, react.useRef)(defaultValue);
-	(0, react.useEffect)(() => {
-		if (observable) {
-			const sub = unwrap(observable).subscribe((value) => {
-				ref.current = value;
-			});
-			return () => sub.unsubscribe();
-		}
-	}, [observable]);
-	return ref;
-}
-
 //#endregion
 //#region src/services/dom/canvas-dom-layer.service.ts
 function shouldForwardFloatDomEvents(layer) {
@@ -2168,160 +2574,6 @@ var RibbonOverrideService = class extends _univerjs_core.Disposable {
 	}
 };
 
-//#endregion
-//#region src/services/ribbon/ribbon.service.ts
-const IRibbonService = (0, _univerjs_core.createIdentifier)("univer.ribbon-service");
-function isSameHiddenMap(previous, current) {
-	return previous.length === current.length && previous.every((hidden, index) => hidden === current[index]);
-}
-let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Disposable {
-	constructor(_menuManagerService, _univerInstanceService) {
-		super();
-		this._menuManagerService = _menuManagerService;
-		this._univerInstanceService = _univerInstanceService;
-		_defineProperty(this, "_ribbon$", new rxjs.BehaviorSubject([]));
-		_defineProperty(this, "ribbon$", this._ribbon$.asObservable());
-		_defineProperty(this, "_activatedTab$", new rxjs.BehaviorSubject("ribbon.start"));
-		_defineProperty(this, "activatedTab$", this._activatedTab$.asObservable());
-		_defineProperty(this, "_collapsedIds$", new rxjs.BehaviorSubject([]));
-		_defineProperty(this, "collapsedIds$", this._collapsedIds$.asObservable());
-		_defineProperty(this, "_fakeToolbarVisible$", new rxjs.BehaviorSubject(false));
-		_defineProperty(this, "fakeToolbarVisible$", this._fakeToolbarVisible$.asObservable());
-		_defineProperty(this, "_visibleContextualTabs", /* @__PURE__ */ new Set());
-		_defineProperty(this, "_contextualTabs", /* @__PURE__ */ new Set());
-		_defineProperty(this, "_lastNonContextualActivatedTab", "ribbon.start");
-		_defineProperty(this, "_hiddenSubscription", null);
-		this._initRibbonSubscription();
-	}
-	setActivatedTab(tab) {
-		if (!this._isContextualTab(tab)) this._lastNonContextualActivatedTab = tab;
-		this._activatedTab$.next(tab);
-	}
-	showContextualTab(tab, options) {
-		this._visibleContextualTabs.add(tab);
-		this._updateRibbon();
-		if (options === null || options === void 0 ? void 0 : options.activate) this.setActivatedTab(tab);
-	}
-	hideContextualTab(tab) {
-		if (!this._visibleContextualTabs.delete(tab)) return;
-		this._updateRibbon();
-	}
-	hideAllContextualTabs() {
-		if (this._visibleContextualTabs.size === 0) return;
-		this._visibleContextualTabs.clear();
-		this._updateRibbon();
-	}
-	setCollapsedIds(ids) {
-		this._collapsedIds$.next(ids);
-	}
-	setFakeToolbarVisible(visible) {
-		this._fakeToolbarVisible$.next(visible);
-	}
-	_initRibbonSubscription() {
-		this.disposeWithMe((0, rxjs.combineLatest)([this._menuManagerService.menuChanged$.pipe((0, rxjs_operators.startWith)(void 0)), this._univerInstanceService.focused$.pipe((0, rxjs_operators.startWith)(void 0), (0, rxjs_operators.distinctUntilChanged)())]).subscribe(() => {
-			this._updateRibbon();
-		}));
-	}
-	_updateRibbon() {
-		var _this$_hiddenSubscrip;
-		const ribbon = this._filterContextualTabs(this._menuManagerService.getMenuByPositionKey("ribbon"));
-		const hiddenObservableMap = [];
-		const hiddenKeyMap = [];
-		for (const group of ribbon) if (group.children) {
-			for (const item of group.children) if (item.children) for (const child of item.children) {
-				var _child$item;
-				if ((_child$item = child.item) === null || _child$item === void 0 ? void 0 : _child$item.hidden$) {
-					hiddenObservableMap.push(child.item.hidden$);
-					hiddenKeyMap.push(child.key);
-				}
-			}
-		}
-		if (hiddenObservableMap.length === 0) {
-			this._setRibbon(ribbon);
-			return;
-		}
-		(_this$_hiddenSubscrip = this._hiddenSubscription) === null || _this$_hiddenSubscrip === void 0 || _this$_hiddenSubscrip.unsubscribe();
-		this._hiddenSubscription = (0, rxjs.combineLatest)(hiddenObservableMap).pipe((0, rxjs_operators.startWith)(new Array(hiddenObservableMap.length).fill(false)), (0, rxjs_operators.distinctUntilChanged)(isSameHiddenMap)).subscribe((hiddenMap) => {
-			const newRibbon = [];
-			const hiddenPathMap = hiddenMap.map((hidden, index) => {
-				if (hidden) return hiddenKeyMap[index];
-				return null;
-			}).filter((item) => !!item);
-			for (const group of ribbon) {
-				var _group$children, _newGroup$children2;
-				const newGroup = {
-					...group,
-					children: []
-				};
-				if ((_group$children = group.children) === null || _group$children === void 0 ? void 0 : _group$children.length) for (const item of group.children) {
-					var _item$children;
-					const newItem = {
-						...item,
-						children: []
-					};
-					let shouldAddItem = true;
-					if ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) {
-						var _newItem$children2;
-						for (const child of item.children) if (!hiddenPathMap.includes(child.key)) {
-							var _newItem$children;
-							(_newItem$children = newItem.children) === null || _newItem$children === void 0 || _newItem$children.push(child);
-						}
-						if ((_newItem$children2 = newItem.children) === null || _newItem$children2 === void 0 ? void 0 : _newItem$children2.every((child) => {
-							var _child$children;
-							return ((_child$children = child.children) === null || _child$children === void 0 ? void 0 : _child$children.length) === 0;
-						})) shouldAddItem = false;
-					}
-					if (shouldAddItem) {
-						var _newGroup$children;
-						(_newGroup$children = newGroup.children) === null || _newGroup$children === void 0 || _newGroup$children.push(newItem);
-					}
-				}
-				if (((_newGroup$children2 = newGroup.children) === null || _newGroup$children2 === void 0 ? void 0 : _newGroup$children2.length) && newGroup.children.every((item) => {
-					var _item$children2;
-					return (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length;
-				})) newRibbon.push(newGroup);
-			}
-			this._setRibbon(newRibbon);
-		});
-	}
-	_filterContextualTabs(ribbon) {
-		this._contextualTabs.clear();
-		ribbon.forEach((group) => {
-			if (group.contextual) this._contextualTabs.add(group.key);
-		});
-		return ribbon.filter((group) => !group.contextual || this._visibleContextualTabs.has(group.key));
-	}
-	_setRibbon(ribbon) {
-		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];
-			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");
-			this._activatedTab$.next(fallbackTab.key);
-			if (!fallbackTab.contextual) this._lastNonContextualActivatedTab = fallbackTab.key;
-		} else if (activeGroup && !activeGroup.contextual) this._lastNonContextualActivatedTab = activeGroup.key;
-		this._ribbon$.next(ribbon);
-	}
-	_isContextualTab(tab) {
-		return this._contextualTabs.has(tab) || this._ribbon$.getValue().some((group) => group.key === tab && group.contextual);
-	}
-	dispose() {
-		var _this$_hiddenSubscrip2;
-		(_this$_hiddenSubscrip2 = this._hiddenSubscription) === null || _this$_hiddenSubscrip2 === void 0 || _this$_hiddenSubscrip2.unsubscribe();
-		this._hiddenSubscription = null;
-		this._ribbon$.next([]);
-		this._ribbon$.complete();
-		this._activatedTab$.complete();
-		this._collapsedIds$.complete();
-		this._fakeToolbarVisible$.complete();
-		super.dispose();
-	}
-};
-DesktopRibbonService = __decorate([__decorateParam(0, IMenuManagerService), __decorateParam(1, _univerjs_core.IUniverInstanceService)], DesktopRibbonService);
-
 //#endregion
 //#region src/views/components/ComponentContainer.tsx
 function ComponentContainer(props) {
@@ -2427,88 +2679,103 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 			})
 		}),
 		onOpenChange: setGroupSelectorVisible,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-			className: "univer-mr-2 univer-flex univer-h-7 univer-cursor-pointer univer-items-center univer-gap-1.5 univer-whitespace-nowrap !univer-rounded-full univer-bg-gray-700 univer-pl-3 univer-pr-2 univer-text-sm univer-text-white dark:!univer-bg-gray-200 dark:!univer-text-gray-800",
-			onClick: () => setGroupSelectorVisible(true),
-			children: [localeService.t(activatedTabTitle), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-text-gray-200 dark:!univer-text-gray-500" })]
-		})
-	});
-}
-
-//#endregion
-//#region src/views/components/ribbon/ToolbarButton.tsx
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const toolbarButtonClassName = `
-univer-box-border univer-flex univer-h-6 univer-min-w-6 univer-cursor-pointer univer-items-center
-univer-justify-center univer-rounded univer-border-none univer-bg-transparent univer-p-0
-univer-text-gray-900 univer-outline-none univer-transition-colors univer-animate-in univer-fade-in
-dark:!univer-text-white dark:hover:!univer-bg-gray-700 dark:disabled:!univer-text-gray-600
-disabled:univer-cursor-not-allowed disabled:univer-text-gray-300 disabled:hover:univer-bg-transparent
-hover:univer-bg-gray-100 whitespace-nowrap univer-w-max
-`;
-const toolbarButtonVariants = (0, _univerjs_design.cva)(toolbarButtonClassName, {
-	variants: {
-		noIcon: {
-			true: "univer-px-2",
-			false: ""
-		},
-		active: {
-			true: "!univer-bg-gray-200 dark:!univer-bg-gray-500",
-			false: ""
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+			className: "univer-mr-2 univer-flex univer-h-7 univer-cursor-pointer univer-items-center univer-gap-1.5 univer-whitespace-nowrap !univer-rounded-full univer-bg-gray-700 univer-pl-3 univer-pr-2 univer-text-sm univer-text-white dark:!univer-bg-gray-200 dark:!univer-text-gray-800",
+			onClick: () => setGroupSelectorVisible(true),
+			children: [localeService.t(activatedTabTitle), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-text-gray-200 dark:!univer-text-gray-500" })]
+		})
+	});
+}
+
+//#endregion
+//#region src/views/components/ribbon/ribbon-menu/RibbonGridMenu.tsx
+function RibbonGridMenu({ ribbon, activatedTab, onSelectTab }) {
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": "ribbon-grid-menu",
+		"data-u-comp": "ribbon-grid-menu",
+		className: "univer-flex univer-h-full univer-items-end univer-justify-start univer-overflow-x-auto univer-bg-gray-50 univer-px-2 dark:!univer-bg-gray-900",
+		role: "tablist",
+		children: ribbon.map((group) => {
+			const isActive = activatedTab === group.key;
+			const title = localeService.t(group.title || group.key);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": isActive,
+				title,
+				onClick: () => onSelectTab(group),
+				className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-h-9 univer-cursor-pointer univer-items-center univer-whitespace-nowrap univer-border-0 univer-border-b-[3px] univer-bg-transparent univer-px-3 univer-text-base univer-font-semibold univer-text-gray-700 univer-transition-colors hover:univer-text-gray-900 focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-inset focus-visible:univer-ring-primary-500 dark:!univer-text-gray-200 dark:hover:!univer-text-white", isActive ? "univer-border-primary-600 univer-text-primary-700 dark:!univer-text-primary-300" : "univer-border-transparent"),
+				children: title
+			}, group.key);
+		})
+	});
+}
+
+//#endregion
+//#region src/views/components/ribbon/ribbon-grid-layout.ts
+const RIBBON_GRID_ROWS = 2;
+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);
+			continue;
 		}
-	},
-	defaultVariants: {
-		noIcon: false,
-		active: false
-	}
-});
-/**
-* Button Component
-*/
-function ToolbarButton(props) {
-	const { children, className, style, disabled = false, active = false, noIcon, onClick, onDoubleClick, ...restProps } = props;
-	const handleClick = (e) => {
-		if (disabled) {
-			e.preventDefault();
-			return;
+		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 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);
+			continue;
 		}
-		onClick && onClick(e);
-	};
-	const handleDoubleClick = (e) => {
-		if (disabled) {
-			e.preventDefault();
-			return;
+		cells.forEach((cell) => occupied.add(cell));
+		maxExplicitColumn = Math.max(maxExplicitColumn, layout.column + columnSpan - 1);
+		placements.set(item, {
+			item,
+			row: layout.row,
+			column: layout.column,
+			rowSpan,
+			columnSpan,
+			showLabel: (_layout$showLabel = layout.showLabel) !== null && _layout$showLabel !== void 0 ? _layout$showLabel : false,
+			width: layout.width,
+			iconSize: layout.iconSize
+		});
+	}
+	let fallbackRow = 1;
+	let fallbackColumn = maxExplicitColumn + 1;
+	for (const item of fallbackItems) {
+		placements.set(item, {
+			item,
+			row: fallbackRow,
+			column: fallbackColumn,
+			rowSpan: 1,
+			columnSpan: 1,
+			showLabel: false
+		});
+		fallbackRow += 1;
+		if (fallbackRow > RIBBON_GRID_ROWS) {
+			fallbackRow = 1;
+			fallbackColumn += 1;
 		}
-		onDoubleClick && onDoubleClick(e);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
-		className: toolbarButtonVariants({
-			noIcon,
-			active,
-			className
-		}),
-		style,
-		disabled,
-		onClick: handleClick,
-		onDoubleClick: handleDoubleClick,
-		...restProps,
-		children
-	});
+	}
+	return items.map((item) => placements.get(item));
+}
+function getCells(row, column, rowSpan, columnSpan) {
+	if (![
+		row,
+		column,
+		rowSpan,
+		columnSpan
+	].every(Number.isInteger) || Math.min(row, column, rowSpan, columnSpan) < 1) return [];
+	const cells = [];
+	for (let currentRow = row; currentRow < row + rowSpan; currentRow++) for (let currentColumn = column; currentColumn < column + columnSpan; currentColumn++) cells.push(`${currentRow}:${currentColumn}`);
+	return cells;
 }
 
 //#endregion
@@ -2518,7 +2785,7 @@ function ToolbarButton(props) {
 * @param props
 */
 function CustomLabel(props) {
-	const { className, title, icon, label, value, value$ } = props;
+	const { className, iconSize, title, icon, label, value, value$ } = 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);
@@ -2538,6 +2805,10 @@ function CustomLabel(props) {
 		const Icon = iconManager.get(realIcon);
 		if (Icon) nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 			className: "univer-text-base",
+			style: iconSize ? {
+				width: iconSize,
+				height: iconSize
+			} : void 0,
 			extend: { colorChannel1: isValid ? String(realValue) : "var(--univer-primary-600)" }
 		}, index++));
 	}
@@ -2608,6 +2879,82 @@ function useToolbarShortcutDisplay({ id, commandId, shortcut }) {
 	]), null, true);
 }
 
+//#endregion
+//#region src/views/components/ribbon/ToolbarButton.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const toolbarButtonClassName = `
+univer-box-border univer-flex univer-h-6 univer-min-w-6 univer-cursor-pointer univer-items-center
+univer-justify-center univer-rounded univer-border-none univer-bg-transparent univer-p-0
+univer-text-gray-900 univer-outline-none univer-transition-colors univer-animate-in univer-fade-in
+dark:!univer-text-white dark:hover:!univer-bg-gray-700 dark:disabled:!univer-text-gray-600
+disabled:univer-cursor-not-allowed disabled:univer-text-gray-300 disabled:hover:univer-bg-transparent
+hover:univer-bg-gray-100 whitespace-nowrap univer-w-max
+`;
+const toolbarButtonVariants = (0, _univerjs_design.cva)(toolbarButtonClassName, {
+	variants: {
+		noIcon: {
+			true: "univer-px-2",
+			false: ""
+		},
+		active: {
+			true: "!univer-bg-gray-200 dark:!univer-bg-gray-500",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		noIcon: false,
+		active: false
+	}
+});
+/**
+* Button Component
+*/
+function ToolbarButton(props) {
+	const { children, className, style, disabled = false, active = false, noIcon, onClick, onDoubleClick, ...restProps } = props;
+	const handleClick = (e) => {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		onClick && onClick(e);
+	};
+	const handleDoubleClick = (e) => {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		onDoubleClick && onDoubleClick(e);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className: toolbarButtonVariants({
+			noIcon,
+			active,
+			className
+		}),
+		style,
+		disabled,
+		onClick: handleClick,
+		onDoubleClick: handleDoubleClick,
+		...restProps,
+		children
+	});
+}
+
 //#endregion
 //#region src/views/components/ribbon/TooltipButtonWrapper.tsx
 const TooltipWrapperContext = (0, react.createContext)({
@@ -2664,12 +3011,31 @@ const TooltipWrapper = (0, react.forwardRef)((props, ref) => {
 function DropdownWrapper(props) {
 	const { children, overlay, disabled, align = "start" } = props;
 	const { dropdownVisible, setDropdownVisible } = (0, react.useContext)(TooltipWrapperContext);
+	const triggerRef = (0, react.useRef)(null);
+	const overlayRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (disabled) setDropdownVisible(false);
+	}, [disabled, setDropdownVisible]);
+	(0, react.useEffect)(() => {
+		var _triggerRef$current;
+		const ownerDocument = (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.ownerDocument;
+		if (!dropdownVisible || !ownerDocument) return;
+		const handlePointerDown = (event) => {
+			var _triggerRef$current2, _overlayRef$current;
+			const target = event.target;
+			if (!target || ((_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.contains(target)) || ((_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.contains(target))) return;
+			setDropdownVisible(false);
+		};
+		ownerDocument.addEventListener("pointerdown", handlePointerDown, true);
+		return () => ownerDocument.removeEventListener("pointerdown", handlePointerDown, true);
+	}, [dropdownVisible, setDropdownVisible]);
 	function handleVisibleChange(visible) {
 		setDropdownVisible(visible);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
 		align,
 		overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: overlayRef,
 			className: "univer-grid univer-gap-2",
 			children: overlay
 		}),
@@ -2677,6 +3043,7 @@ function DropdownWrapper(props) {
 		open: dropdownVisible,
 		onOpenChange: handleVisibleChange,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: triggerRef,
 			className: "univer-h-full",
 			onClick: (e) => e.stopPropagation(),
 			children
@@ -2717,6 +3084,9 @@ function getOptionKey(option) {
 }
 function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled, onOptionSelect }) {
 	const { dropdownVisible, setDropdownVisible } = (0, react.useContext)(TooltipWrapperContext);
+	(0, react.useEffect)(() => {
+		if (disabled) setDropdownVisible(false);
+	}, [disabled, setDropdownVisible]);
 	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
 	const resolveMenuItems = () => menuId ? menuManagerService.getMenuByPositionKey(menuId) : [];
 	const menuItems = (0, _wendellhu_redi_react_bindings.useObservable)(() => menuManagerService.menuChanged$.pipe((0, rxjs.map)(resolveMenuItems), (0, rxjs.startWith)(resolveMenuItems())), resolveMenuItems(), false, [menuId, menuManagerService]);
@@ -2760,11 +3130,16 @@ 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;
 		const items = options.map((option) => {
-			var _option$label3;
+			var _option$label3, _option$label4;
 			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 }),
+				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
+				}),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuLabel, {
 					icon: option.icon,
 					value,
@@ -2803,6 +3178,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 }),
 			items,
 			disabled,
 			open: dropdownVisible,
@@ -2940,7 +3316,8 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 		layoutService.focus();
 		commandService.executeCommand(commandId, params);
 	};
-	const { tooltip, shortcut, icon, title, label, id, commandId, type, slot, params } = props;
+	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 shortcutDisplay = useToolbarShortcutDisplay({
 		id,
 		commandId,
@@ -2972,6 +3349,7 @@ const ToolbarItem = (0, react.forwardRef)((props, 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 titleToDisplay = grid ? showLabel ? gridLabel : large ? void 0 : title : title;
 		function handleSelect(option) {
 			if (disabled) return;
 			let commandId = sId;
@@ -2993,17 +3371,24 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 		if (menuType === 2) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-u-command": id,
 			"data-disabled": disabled,
-			className: toolbarButtonSelectorRootVariants({ disabled }),
+			className: (0, _univerjs_design.clsx)(toolbarButtonSelectorRootVariants({ disabled }), {
+				"univer-box-border univer-h-full univer-min-w-14 univer-flex-col !univer-pr-0": grid && large,
+				"univer-box-border univer-h-full": grid && !large
+			}),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: toolbarButtonSelectorMainVariants({
+				className: (0, _univerjs_design.clsx)(toolbarButtonSelectorMainVariants({
 					active: activated,
 					disabled
+				}), {
+					"univer-h-full univer-w-full univer-flex-col univer-justify-center univer-rounded univer-px-1 univer-pb-4 [&>svg]:univer-size-8": grid && large,
+					"[&>svg]:univer-size-4": grid && !large
 				}),
 				onClick: handleClick,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
 					icon: iconToDisplay,
-					title,
-					value,
+					iconSize,
+					title: titleToDisplay,
+					value: iconColor !== null && iconColor !== void 0 ? iconColor : value,
 					label,
 					onChange: handleSelectionsValueChange
 				})
@@ -3015,9 +3400,12 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 				disabled,
 				onOptionSelect: handleSelect,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: toolbarButtonSelectorTriggerVariants({
+					className: (0, _univerjs_design.clsx)(toolbarButtonSelectorTriggerVariants({
 						disabled,
 						active: activated
+					}), {
+						"!univer-top-auto univer-bottom-0 univer-h-4 univer-w-full univer-rounded-b univer-rounded-t-none": grid && large,
+						"univer-h-full": grid && !large
 					}),
 					"data-disabled": disabled,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})
@@ -3031,31 +3419,70 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 			options,
 			disabled,
 			onOptionSelect: handleSelect,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"data-u-command": id,
-				className: toolbarSelectorRootVariants({
+				className: (0, _univerjs_design.clsx)(toolbarSelectorRootVariants({
 					disabled,
 					active: activated
-				}),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
+				}), {
+					"univer-box-border univer-h-full univer-min-w-14 univer-flex-col univer-justify-center univer-gap-1 univer-px-1.5 univer-py-1 univer-text-xs [&>svg]:univer-size-8": grid && large,
+					"univer-box-border univer-h-full": grid && !large,
+					"univer-bg-white dark:!univer-bg-gray-800": grid && !large && !icon,
+					"[&>svg]:univer-size-4": grid && !large
+				}, grid && !large && !icon && _univerjs_design.borderClassName),
+				children: grid && large ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
+					icon: iconToDisplay,
+					iconSize
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, _univerjs_design.clsx)(toolbarSelectorTriggerVariants({ disabled }), "univer-h-4 univer-justify-center univer-gap-0.5"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
+						title: titleToDisplay,
+						value,
+						label,
+						onChange: handleSelectionsValueChange
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})]
+				})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
 					icon: iconToDisplay,
-					title,
+					iconSize,
+					title: titleToDisplay,
 					value,
 					label,
 					onChange: handleSelectionsValueChange
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: toolbarSelectorTriggerVariants({ disabled }),
+					className: (0, _univerjs_design.clsx)(toolbarSelectorTriggerVariants({ disabled }), { "univer-ml-auto rtl:univer-ml-0 rtl:univer-mr-auto": grid && !large && !icon }),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})
-				})]
+				})] })
 			})
 		});
 	}
 	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 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",
+			whiteSpace: "normal"
+		} : void 0;
+		if (isCustomComponent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"data-u-command": id,
+			className: toolbarButtonVariants({
+				noIcon: !icon,
+				active: activated,
+				className: buttonClassName
+			}),
+			style: buttonStyle,
+			"aria-disabled": disabled,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
+				className: grid && fullWidth ? "!univer-w-full" : void 0,
+				title: grid && showLabel ? gridLabel : title,
+				value,
+				label
+			})
+		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
 			"data-u-command": id,
-			className: "univer-text-sm",
+			className: buttonClassName,
+			style: buttonStyle,
 			noIcon: !icon,
 			active: activated,
 			disabled,
@@ -3065,11 +3492,11 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 				executeCommand((_props$commandId = props.commandId) !== null && _props$commandId !== void 0 ? _props$commandId : props.id, commandParams !== null && commandParams !== void 0 ? commandParams : typeof value === "undefined" ? void 0 : { value });
 			},
 			onDoubleClick: () => props.subId && executeCommand(props.subId),
-			children: isCustomComponent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
-				title,
-				value,
-				label
-			}) : icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, { icon }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, { title })
+			children: icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
+				icon,
+				iconSize,
+				title: grid && (large || showLabel) ? gridLabel : void 0
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, { title })
 		});
 	}
 	function renderItem() {
@@ -3090,6 +3517,51 @@ const ToolbarItem = (0, react.forwardRef)((props, ref) => {
 	});
 });
 
+//#endregion
+//#region src/views/components/ribbon/RibbonGrid.tsx
+function RibbonGrid({ groups, title, className, ...props }) {
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		"data-testid": "ribbon-grid-toolbar",
+		"data-u-comp": "ribbon-grid-toolbar",
+		className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-h-[88px] univer-overflow-x-auto univer-overflow-y-hidden univer-bg-gray-50 univer-px-2 univer-text-sm dark:!univer-bg-gray-900", _univerjs_design.borderBottomClassName, _univerjs_design.scrollbarClassName, className),
+		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", {
+						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}`,
+							gridColumn: `${placement.column} / span ${placement.columnSpan}`,
+							width: placement.width
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, {
+							...placement.item.item,
+							grid: true,
+							large: placement.rowSpan > 1,
+							showLabel: placement.showLabel,
+							iconSize: placement.iconSize,
+							fullWidth: placement.width !== void 0
+						})
+					}, placement.item.key))
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"data-testid": "ribbon-grid-group-divider",
+					className: (0, _univerjs_design.clsx)("univer-pointer-events-none univer-absolute univer-bottom-1.5 univer-right-0 univer-top-3.5 !univer-border-gray-300 univer-opacity-50 rtl:univer-left-0 rtl:univer-right-auto", _univerjs_design.borderRightClassName),
+					"aria-hidden": "true"
+				})]
+			}, group.key);
+		}) })
+	});
+}
+
 //#endregion
 //#region src/views/components/ribbon/Ribbon.tsx
 function Ribbon(props) {
@@ -3160,7 +3632,7 @@ function Ribbon(props) {
 		activatedTab
 	]);
 	(0, react.useEffect)(() => {
-		if (hideToolbar) {
+		if (hideToolbar || ribbonType === "grid") {
 			toolbarItemRefs.current = {};
 			ribbonService.setCollapsedIds([]);
 			ribbonService.setFakeToolbarVisible(false);
@@ -3200,7 +3672,8 @@ function Ribbon(props) {
 		hideToolbar,
 		ribbon,
 		activatedTab,
-		ribbonService
+		ribbonService,
+		ribbonType
 	]);
 	const fakeToolbar = (0, react.useMemo)(() => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3238,7 +3711,7 @@ function Ribbon(props) {
 				...embedRibbonOverrideAttributes,
 				className: (0, _univerjs_design.clsx)("univer-relative univer-select-none", headerClassName, {
 					"univer-hidden": toolbarOnly,
-					"univer-h-9": !toolbarOnly && (ribbonType === "classic" || headerMenuComponents && headerMenuComponents.size > 0)
+					"univer-h-9": !toolbarOnly && (ribbonType === "classic" || ribbonType === "grid" || headerMenuComponents && headerMenuComponents.size > 0)
 				}),
 				children: [
 					!toolbarOnly && (ribbonOverride === null || ribbonOverride === void 0 ? void 0 : ribbonOverride.placeholderTitle) && ribbon.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3253,13 +3726,23 @@ function Ribbon(props) {
 						activatedTab,
 						onSelectTab: handleSelectTab
 					}),
+					!toolbarOnly && ribbonType === "grid" && ribbon.length >= 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RibbonGridMenu, {
+						ribbon,
+						activatedTab,
+						onSelectTab: handleSelectTab
+					}),
 					headerMenu && headerMenuComponents && headerMenuComponents.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "univer-absolute univer-right-2 univer-top-0 univer-flex univer-h-full univer-flex-row univer-items-center univer-gap-2 rtl:univer-left-2 rtl:univer-right-auto [&>*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded [&>*]:univer-px-1 [&>*]:univer-transition-colors hover:[&>*]:univer-bg-gray-100",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerMenuComponents })
 					})
 				]
 			}),
-			!hideToolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			!hideToolbar && ribbonType === "grid" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RibbonGrid, {
+				...embedRibbonOverrideAttributes,
+				groups: activeGroup.allGroups,
+				title: activatedTabTitle
+			}),
+			!hideToolbar && ribbonType !== "grid" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				...embedRibbonOverrideAttributes,
 				className: (0, _univerjs_design.clsx)("univer-box-border univer-grid univer-h-10 univer-grid-flow-col univer-items-center univer-px-3 univer-text-sm", {
 					"univer-grid-cols-[1fr] univer-justify-center": ribbonType === "classic" || ribbon.length === 1,
@@ -3311,7 +3794,7 @@ function Ribbon(props) {
 					})] }, activatedTab)
 				})]
 			}),
-			fakeToolbar
+			ribbonType !== "grid" && fakeToolbar
 		] })
 	});
 }
@@ -3409,25 +3892,6 @@ var ContextMenuService = class extends _univerjs_core.Disposable {
 	}
 };
 
-//#endregion
-//#region src/services/runtime-scope/ui-runtime-scope.service.ts
-const IUIRuntimeScopeService = (0, _univerjs_core.createIdentifier)("ui.runtime-scope.service");
-var UIRuntimeScopeService = class extends _univerjs_core.Disposable {
-	constructor(..._args) {
-		super(..._args);
-		_defineProperty(this, "_scopes", /* @__PURE__ */ new Map());
-	}
-	register(scope) {
-		this._scopes.set(scope.unitId, scope);
-		return (0, _univerjs_core.toDisposable)(() => {
-			if (this._scopes.get(scope.unitId) === scope) this._scopes.delete(scope.unitId);
-		});
-	}
-	get(unitId) {
-		return unitId ? this._scopes.get(unitId) : void 0;
-	}
-};
-
 //#endregion
 //#region src/services/contextmenu/contextmenu-host.service.ts
 const IContextMenuHostService = (0, _univerjs_core.createIdentifier)("ui.contextmenu.host.service");
@@ -3435,31 +3899,37 @@ var ContextMenuHostService = class extends _univerjs_core.Disposable {
 	constructor(..._args) {
 		super(..._args);
 		_defineProperty(this, "_menuMap", /* @__PURE__ */ new Map());
-		_defineProperty(this, "_activeMenuId", null);
+		_defineProperty(this, "_activeMenuId$", new rxjs.BehaviorSubject(null));
+		_defineProperty(this, "activeMenuId$", this._activeMenuId$.asObservable());
 	}
 	get activeMenuId() {
-		return this._activeMenuId;
+		return this._activeMenuId$.value;
 	}
 	registerMenu(menuId, hide) {
 		this._menuMap.set(menuId, hide);
 		return (0, _univerjs_core.toDisposable)(() => {
 			this._menuMap.delete(menuId);
-			if (this._activeMenuId === menuId) this._activeMenuId = null;
+			if (this.activeMenuId === menuId) this._activeMenuId$.next(null);
 		});
 	}
 	activateMenu(menuId) {
 		this.hideActiveMenu(menuId);
-		this._activeMenuId = menuId;
+		this._activeMenuId$.next(menuId);
 	}
 	deactivateMenu(menuId) {
-		if (this._activeMenuId === menuId) this._activeMenuId = null;
+		if (this.activeMenuId === menuId) this._activeMenuId$.next(null);
 	}
 	hideActiveMenu(exceptMenuId) {
-		if (!this._activeMenuId || this._activeMenuId === exceptMenuId) return;
-		const hide = this._menuMap.get(this._activeMenuId);
-		this._activeMenuId = null;
+		const activeMenuId = this.activeMenuId;
+		if (!activeMenuId || activeMenuId === exceptMenuId) return;
+		const hide = this._menuMap.get(activeMenuId);
+		this._activeMenuId$.next(null);
 		hide === null || hide === void 0 || hide();
 	}
+	dispose() {
+		this._activeMenuId$.complete();
+		super.dispose();
+	}
 };
 
 //#endregion
@@ -4433,6 +4903,9 @@ function ContextMenuMenuItem(props) {
 		setInputValue(value);
 	}, [value]);
 	(0, react.useEffect)(() => () => clearSubmenuCloseTimer(), [clearSubmenuCloseTimer]);
+	(0, react.useEffect)(() => {
+		if (disabled) closeSubmenu();
+	}, [closeSubmenu, disabled]);
 	(0, react.useEffect)(() => {
 		if (!submenuVisible) {
 			setSubmenuPositionReady(false);
@@ -5016,7 +5489,7 @@ function Sidebar() {
 					children: [options === null || options === void 0 ? void 0 : options.header, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						ref: closeButtonRef,
 						type: "button",
-						className: "focus:univer-ring-primary-500/50 univer-cursor-pointer univer-appearance-none univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-text-gray-500 focus:univer-outline-none focus:univer-ring-2 dark:!univer-text-gray-300",
+						className: "focus:univer-ring-primary-500/50 univer-flex univer-size-6 univer-cursor-pointer univer-appearance-none univer-items-center univer-justify-center univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-text-gray-500 focus:univer-outline-none focus:univer-ring-2 dark:!univer-text-gray-300",
 						onClick: handleClose,
 						"aria-label": localeService.t("ui.sidebar.close"),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, {})
@@ -5024,7 +5497,6 @@ function Sidebar() {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 					className: "univer-box-border univer-cursor-default univer-px-4",
-					style: options === null || options === void 0 ? void 0 : options.bodyStyle,
 					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", {
@@ -5498,7 +5970,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.5";
+var version = "1.0.0-alpha.7";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -20500,11 +20972,12 @@ function EmojiPicker(props) {
 		};
 	}, [localStorageService, recentStorageKey]);
 	const handleSelect = (item, options) => {
-		var _extraProps$onSelect;
+		var _props$onChange, _extraProps$onSelect;
 		const nextRecents = promoteRecentEmoji(recents, item);
 		setActiveEmoji(item.emoji);
 		setRecents(nextRecents);
 		writeRecents(localStorageService, recentStorageKey, nextRecents);
+		(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, item.emoji);
 		extraProps === null || extraProps === void 0 || (_extraProps$onSelect = extraProps.onSelect) === null || _extraProps$onSelect === void 0 || _extraProps$onSelect.call(extraProps, item.emoji, options);
 	};
 	const handleRandom = () => {
@@ -20524,7 +20997,7 @@ function EmojiPicker(props) {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		"data-u-comp": EMOJI_PICKER_COMPONENT,
-		className: "univer-flex univer-h-[340px] univer-w-[420px] univer-flex-col univer-overflow-hidden univer-rounded-[10px] univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-900",
+		className: (0, _univerjs_design.clsx)("univer-flex univer-h-[340px] univer-w-[420px] univer-flex-col univer-overflow-hidden", !props.embedded && "univer-rounded-[10px] univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-900"),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "univer-flex univer-items-center univer-gap-1 univer-px-3 univer-pb-2 univer-pt-3",
@@ -20546,7 +21019,7 @@ function EmojiPicker(props) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: scrollRef,
-				className: "univer-relative univer-min-h-0 univer-flex-1 univer-overflow-y-auto univer-px-3",
+				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",
@@ -21297,8 +21770,8 @@ function ZoomInput(props) {
 		className: (0, _univerjs_design.clsx)("univer-flex univer-h-6 univer-w-[68px] univer-flex-shrink-0 univer-items-center univer-overflow-hidden univer-rounded-md univer-border univer-border-gray-200 univer-bg-white dark:!univer-border-gray-600 dark:!univer-bg-gray-800", className, { "univer-opacity-60": disabled }),
 		onClick: (e) => e.stopPropagation(),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
-			className: "univer-box-border univer-h-6 univer-w-[52px] univer-border-none univer-bg-transparent [&_input:focus]:!univer-ring-0 [&_input]:univer-h-6 [&_input]:univer-w-[52px] [&_input]:univer-border-none [&_input]:!univer-bg-transparent [&_input]:univer-px-1 [&_input]:univer-text-center [&_input]:univer-text-xs [&_input]:univer-tabular-nums",
-			inputClass: "univer-w-[52px]",
+			className: "univer-box-border univer-h-6 univer-min-w-0 univer-flex-1 univer-border-none univer-bg-transparent [&_input:focus]:!univer-ring-0 [&_input]:univer-h-6 [&_input]:univer-w-full [&_input]:univer-border-none [&_input]:!univer-bg-transparent [&_input]:univer-px-1 [&_input]:univer-text-center [&_input]:univer-text-xs [&_input]:univer-tabular-nums",
+			inputClass: "univer-w-full",
 			size: "mini",
 			value: inputValue,
 			disabled,
@@ -21516,6 +21989,234 @@ function Slider(props) {
 	});
 }
 
+//#endregion
+//#region src/views/symbol-picker/symbols.ts
+const SYMBOL_CATEGORIES = [
+	{
+		key: "mathematics",
+		titleKey: "ui.symbolPicker.mathematics",
+		symbols: [
+			"+",
+			"−",
+			"×",
+			"÷",
+			"≠",
+			"≈",
+			"<",
+			">",
+			"≤",
+			"≥",
+			"≪",
+			"≫",
+			"≡",
+			"±",
+			"%",
+			"‰",
+			"‱",
+			"½",
+			"⅓",
+			"⅔",
+			"¼",
+			"¾",
+			"¹",
+			"²",
+			"³",
+			"ⁿ",
+			"₁",
+			"₂",
+			"₃",
+			"|a|",
+			"∟",
+			"∠",
+			"⊿",
+			"△",
+			"∥",
+			"⊥",
+			"∫",
+			"∬",
+			"∭",
+			"∮",
+			"∯",
+			"∰",
+			"∝",
+			"∞",
+			"∼",
+			"≌",
+			"∈",
+			"∉",
+			"⊆",
+			"⊂",
+			"∅",
+			"∩",
+			"∪",
+			"∧",
+			"∨",
+			"⋅",
+			"⋮",
+			"⋰",
+			"⋱",
+			"⋯",
+			"∏",
+			"∑",
+			"∃",
+			"∄",
+			"∀",
+			"∂",
+			"∆",
+			"⊙",
+			"⊕",
+			"%"
+		]
+	},
+	{
+		key: "greek",
+		titleKey: "ui.symbolPicker.greek",
+		symbols: [
+			"α",
+			"β",
+			"γ",
+			"δ",
+			"ε",
+			"ζ",
+			"η",
+			"θ",
+			"ι",
+			"κ",
+			"λ",
+			"μ",
+			"ν",
+			"ξ",
+			"ο",
+			"π",
+			"ρ",
+			"σ",
+			"τ",
+			"υ",
+			"φ",
+			"χ",
+			"ψ",
+			"ω",
+			"Α",
+			"Β",
+			"Γ",
+			"Δ",
+			"Ε",
+			"Ζ",
+			"Η",
+			"Θ",
+			"Ι",
+			"Κ",
+			"Λ",
+			"Μ",
+			"Ν",
+			"Ξ",
+			"Ο",
+			"Π",
+			"Ρ",
+			"Σ",
+			"Τ",
+			"Υ",
+			"Φ",
+			"Χ",
+			"Ψ",
+			"Ω"
+		]
+	},
+	{
+		key: "common",
+		titleKey: "ui.symbolPicker.common",
+		symbols: [
+			"kg",
+			"mm",
+			"cm",
+			"m²",
+			"°C",
+			"°",
+			"§",
+			"◎",
+			"©",
+			"®",
+			"{",
+			"⌜",
+			"〚",
+			"№",
+			"$",
+			"¥",
+			"@",
+			"&",
+			"*",
+			"|",
+			"#",
+			"※",
+			"√",
+			"×",
+			"…",
+			"①",
+			"②",
+			"③",
+			"↑",
+			"↓",
+			"←",
+			"→"
+		]
+	}
+];
+
+//#endregion
+//#region src/views/symbol-picker/SymbolPicker.tsx
+const SYMBOL_PICKER_COMPONENT = "ui.symbol-picker";
+function SymbolPicker(props) {
+	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);
+	(0, _wendellhu_redi_react_bindings.useObservable)(localeService.currentLocale$, localeService.getCurrentLocale());
+	const [activeSymbol, setActiveSymbol] = (0, react.useState)(extraProps === null || extraProps === void 0 ? void 0 : extraProps.activeSymbol);
+	const handleSelect = (symbol) => {
+		var _props$onChange, _extraProps$onSelect;
+		setActiveSymbol(symbol);
+		(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, symbol);
+		extraProps === null || extraProps === void 0 || (_extraProps$onSelect = extraProps.onSelect) === null || _extraProps$onSelect === void 0 || _extraProps$onSelect.call(extraProps, symbol, { keepOpen: true });
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		"data-u-comp": SYMBOL_PICKER_COMPONENT,
+		className: (0, _univerjs_design.clsx)("univer-flex univer-h-[340px] univer-w-[420px] univer-flex-col univer-overflow-hidden", !props.embedded && "univer-rounded-[10px] univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-900", props.className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _univerjs_design.clsx)("univer-min-h-0 univer-flex-1 univer-overflow-y-auto univer-p-4", _univerjs_design.scrollbarClassName),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-flex univer-flex-col univer-gap-5",
+				children: SYMBOL_CATEGORIES.map((category) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SymbolSection, {
+					activeSymbol,
+					category,
+					onSelect: handleSelect
+				}, category.key))
+			})
+		})
+	});
+}
+function SymbolSection(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "univer-flex univer-flex-col univer-gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-gray-100",
+			children: (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService).t(props.category.titleKey)
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-grid univer-grid-cols-10 univer-gap-1",
+			children: props.category.symbols.map((symbol, index) => {
+				const active = props.activeSymbol === symbol;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-label": symbol,
+					"aria-pressed": active,
+					title: symbol,
+					className: (0, _univerjs_design.clsx)("univer-flex univer-size-8 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-lg univer-border-0 univer-bg-transparent univer-p-0 univer-text-lg univer-text-gray-900 dark:!univer-text-gray-100", active ? "univer-bg-primary-50 univer-shadow-sm dark:!univer-bg-gray-800 dark:!univer-shadow-sm" : "hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800"),
+					onClick: () => props.onSelect(symbol),
+					children: symbol
+				}, `${props.category.key}-${symbol}-${index}`);
+			})
+		})]
+	});
+}
+
 //#endregion
 //#region src/controllers/components.controller.ts
 /**
@@ -21545,9 +22246,11 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 		this.disposeWithMe(this._iconManager.register({
 			ExpandIcon: _univerjs_icons.ExpandIcon,
 			IncreaseIcon: _univerjs_icons.IncreaseIcon,
+			KeyboardIcon: _univerjs_icons.KeyboardIcon,
 			MoreDownIcon: _univerjs_icons.MoreDownIcon,
 			RedoIcon: _univerjs_icons.RedoIcon,
 			ReduceIcon: _univerjs_icons.ReduceIcon,
+			FeatureSearchIcon: _univerjs_icons.FeatureSearchIcon,
 			ShortcutIcon: _univerjs_icons.ShortcutIcon,
 			ShrinkIcon: _univerjs_icons.ShrinkIcon,
 			UndoIcon: _univerjs_icons.UndoIcon
@@ -21561,7 +22264,9 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 			[FONT_FAMILY_ITEM_COMPONENT, FontFamilyItem],
 			[FONT_SIZE_COMPONENT, FontSize],
 			[COLOR_PICKER_COMPONENT, _univerjs_design.ColorPicker],
-			[EMOJI_PICKER_COMPONENT, EmojiPicker]
+			[EMOJI_PICKER_COMPONENT, EmojiPicker],
+			[SYMBOL_PICKER_COMPONENT, SymbolPicker],
+			[FEATURE_SEARCH_COMPONENT, FeatureSearch]
 		].forEach(([key, comp]) => {
 			this.disposeWithMe(this._componentManager.register(key, comp));
 		});
@@ -21570,6 +22275,24 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 };
 ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(IconManager))], ComponentsController);
 
+//#endregion
+//#region src/controllers/feature-search/feature-search.controller.ts
+const FeatureSearchShortcut = {
+	id: OpenFeatureSearchOperation.id,
+	binding: 4096 | 1024 | 80,
+	description: "ui.featureSearch.title",
+	group: "10_global-shortcut",
+	groupTitle: "ui.global-shortcut"
+};
+let FeatureSearchController = class FeatureSearchController extends _univerjs_core.Disposable {
+	constructor(commandService, shortcutService) {
+		super();
+		this.disposeWithMe(commandService.registerCommand(OpenFeatureSearchOperation));
+		this.disposeWithMe(shortcutService.registerShortcut(FeatureSearchShortcut));
+	}
+};
+FeatureSearchController = __decorate([__decorateParam(0, _univerjs_core.ICommandService), __decorateParam(1, IShortcutService)], FeatureSearchController);
+
 //#endregion
 //#region src/views/components/ribbon/MobileRibbon.tsx
 const toolbarScrollOffset = 168;
@@ -21793,7 +22516,8 @@ function MobileMenu(props) {
 					menuManagerService,
 					menuType,
 					onExecute: onOptionSelect,
-					onOpenView: openView
+					onOpenView: openView,
+					inheritedDisabled$: currentView === null || currentView === void 0 ? void 0 : currentView.disabled$
 				})
 			}), (currentView === null || currentView === void 0 ? void 0 : currentView.kind) === "options" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-overflow-hidden univer-rounded-2xl univer-bg-white",
@@ -21802,6 +22526,7 @@ function MobileMenu(props) {
 					menuItem: currentView.menuItem,
 					options: currentView.options,
 					currentValue: currentView.currentValue,
+					inheritedDisabled$: currentView.disabled$,
 					onExecute: onOptionSelect
 				})
 			})]
@@ -21809,7 +22534,7 @@ function MobileMenu(props) {
 	});
 }
 function MobileSchemaList(props) {
-	const { schemas, menuManagerService, menuType, onExecute, onOpenView } = props;
+	const { schemas, menuManagerService, menuType, onExecute, onOpenView, inheritedDisabled$ } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const hiddenGroupStates = useContextGroupHiddenStates(schemas);
 	const visibleSchemas = (0, react.useMemo)(() => {
@@ -21827,6 +22552,7 @@ function MobileSchemaList(props) {
 			menuType,
 			onExecute,
 			onOpenView,
+			inheritedDisabled$,
 			bordered: index !== visibleSchemas.length - 1
 		}, schema.key);
 		if (!((_schema$children2 = schema.children) === null || _schema$children2 === void 0 ? void 0 : _schema$children2.length)) return null;
@@ -21841,18 +22567,20 @@ function MobileSchemaList(props) {
 				menuType,
 				onExecute,
 				onOpenView,
+				inheritedDisabled$,
 				bordered: childIndex !== schema.children.length - 1
 			}, childSchema.key))]
 		}, schema.key);
 	}) });
 }
 function MobileSchemaRow(props) {
-	const { schema, menuManagerService, menuType, onExecute, onOpenView, bordered } = props;
+	const { schema, menuManagerService, menuType, onExecute, onOpenView, inheritedDisabled$, bordered } = props;
 	const interaction = useMobileSchemaInteraction({
 		schema,
 		menuManagerService,
 		menuType,
-		onOpenView
+		onOpenView,
+		inheritedDisabled$
 	});
 	if (!interaction || interaction.hidden) return null;
 	const { menuItem, disabled, value, currentValueText, hasSubmenu, onPress } = interaction;
@@ -21880,7 +22608,8 @@ function MobileSchemaRow(props) {
 	});
 }
 function MobileSelectionOptionsView(props) {
-	const { options, menuKey, menuItem, currentValue, onExecute } = 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, {
@@ -21888,6 +22617,7 @@ function MobileSelectionOptionsView(props) {
 			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)}`);
@@ -21895,15 +22625,17 @@ function MobileSelectionOptionsView(props) {
 }
 function MobileSelectionOptionRow(props) {
 	var _option$value2;
-	const { option, menuKey, menuItem, currentValue, bordered, onExecute } = props;
+	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 selected = displayValue === currentValue;
+	const optionDisabled = disabled || Boolean(option.disabled);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-min-h-[56px] univer-w-full univer-appearance-none univer-items-center univer-gap-3 univer-border-0 univer-bg-white univer-px-4 univer-py-3 univer-text-left univer-transition-colors enabled:hover:univer-bg-gray-50 enabled:active:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-40", bordered && _univerjs_design.borderBottomClassName),
-		disabled: option.disabled,
+		disabled: optionDisabled,
 		onClick: () => {
+			if (optionDisabled) return;
 			onExecute === null || onExecute === void 0 || onExecute({
 				...option,
 				value: displayValue,
@@ -21925,11 +22657,15 @@ function MobileSelectionOptionRow(props) {
 }
 function useMobileSchemaInteraction(props) {
 	var _schema$children3;
-	const { schema, menuManagerService, menuType, onOpenView } = props;
+	const { schema, menuManagerService, menuType, onOpenView, inheritedDisabled$ } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const menuItem = schema.item;
 	const selectorItem = menuItem;
-	const disabled = (0, _wendellhu_redi_react_bindings.useObservable)(menuItem === null || menuItem === void 0 ? void 0 : menuItem.disabled$, false);
+	const disabled$ = (0, react.useMemo)(() => {
+		const sources = [inheritedDisabled$, menuItem === null || menuItem === void 0 ? void 0 : menuItem.disabled$].filter((source) => Boolean(source));
+		return sources.length ? (0, rxjs.combineLatest)(sources.map((source) => source.pipe((0, rxjs_operators.startWith)(false)))).pipe((0, rxjs.map)((states) => states.some(Boolean))) : void 0;
+	}, [inheritedDisabled$, menuItem === null || menuItem === void 0 ? void 0 : menuItem.disabled$]);
+	const disabled = (0, _wendellhu_redi_react_bindings.useObservable)(disabled$, false);
 	const hidden = (0, _wendellhu_redi_react_bindings.useObservable)(menuItem === null || menuItem === void 0 ? void 0 : menuItem.hidden$, false);
 	const value = (0, _wendellhu_redi_react_bindings.useObservable)(menuItem === null || menuItem === void 0 ? void 0 : menuItem.value$);
 	const selectionsFromObservable = (0, _wendellhu_redi_react_bindings.useObservable)(selectorItem && (0, rxjs.isObservable)(selectorItem.selections) ? selectorItem.selections : void 0);
@@ -21951,11 +22687,13 @@ function useMobileSchemaInteraction(props) {
 	const hasSubmenu = schemaChildren.length > 0 || selections.length > 0 || subMenuItems.length > 0;
 	const currentValueText = typeof value === "string" || typeof value === "number" ? String(value) : "";
 	const onPress = (onExecute) => {
+		if (disabled) return;
 		if (schemaChildren.length > 0) {
 			onOpenView({
 				kind: "schema",
 				title: getMenuSchemaTitle(schema, localeService),
-				schemas: schemaChildren
+				schemas: schemaChildren,
+				disabled$
 			});
 			return;
 		}
@@ -21966,7 +22704,8 @@ function useMobileSchemaInteraction(props) {
 				options: selections,
 				menuItem: selectorItem,
 				menuKey: schema.key,
-				currentValue: value
+				currentValue: value,
+				disabled$
 			});
 			return;
 		}
@@ -21974,7 +22713,8 @@ function useMobileSchemaInteraction(props) {
 			onOpenView({
 				kind: "schema",
 				title: getMenuSchemaTitle(schema, localeService),
-				schemas: subMenuItems
+				schemas: subMenuItems,
+				disabled$
 			});
 			return;
 		}
@@ -22529,7 +23269,7 @@ let BrowserClipboardService = class BrowserClipboardService extends _univerjs_co
 		this._notificationService = _notificationService;
 	}
 	async write(text, html, customData) {
-		if (!this.supportClipboard) return this._legacyCopyHtml(text, html);
+		if (!this.supportClipboard || typeof ClipboardItem === "undefined" || typeof navigator.clipboard.write !== "function") return this._legacyCopyHtml(text, html);
 		try {
 			return await navigator.clipboard.write([new ClipboardItem({
 				[PLAIN_TEXT_CLIPBOARD_MIME_TYPE]: new Blob([text], { type: PLAIN_TEXT_CLIPBOARD_MIME_TYPE }),
@@ -22861,10 +23601,6 @@ let DesktopConfirmService = class DesktopConfirmService extends _univerjs_core.D
 };
 DesktopConfirmService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, IUIPartsService)], DesktopConfirmService);
 
-//#endregion
-//#region src/services/dialog/dialog.service.ts
-const IDialogService = (0, _univerjs_core.createIdentifier)("univer.ui.dialog-service");
-
 //#endregion
 //#region src/views/components/dialog-part/DialogPart.tsx
 function DialogPart() {
@@ -23508,6 +24244,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends _univerjs_core.Plu
 			}],
 			[SharedController],
 			[ErrorController],
+			[FeatureSearchController],
 			[ShortcutPanelController]
 		], this._config.override));
 		(0, _univerjs_core.touchDependencies)(this._injector, [
@@ -23517,7 +24254,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends _univerjs_core.Plu
 		]);
 	}
 	onReady() {
-		(0, _univerjs_core.touchDependencies)(this._injector, [[SharedController]]);
+		(0, _univerjs_core.touchDependencies)(this._injector, [[SharedController], [FeatureSearchController]]);
 	}
 	onSteady() {
 		(0, _univerjs_core.touchDependencies)(this._injector, [[ShortcutPanelController]]);
@@ -23610,6 +24347,7 @@ let UniverUIPlugin = class UniverUIPlugin extends _univerjs_core.Plugin {
 			}],
 			[SharedController],
 			[ErrorController],
+			[FeatureSearchController],
 			[ShortcutPanelController]
 		], this._config.override));
 		(0, _univerjs_core.touchDependencies)(this._injector, [
@@ -23619,7 +24357,7 @@ let UniverUIPlugin = class UniverUIPlugin extends _univerjs_core.Plugin {
 		]);
 	}
 	onReady() {
-		(0, _univerjs_core.touchDependencies)(this._injector, [[SharedController]]);
+		(0, _univerjs_core.touchDependencies)(this._injector, [[SharedController], [FeatureSearchController]]);
 	}
 	onSteady() {
 		(0, _univerjs_core.touchDependencies)(this._injector, [[ShortcutPanelController]]);
@@ -24528,6 +25266,7 @@ Object.defineProperty(exports, 'DesktopUIController', {
     return DesktopUIController;
   }
 });
+exports.EMBED_CHILD_UNIT_ID_ATTRIBUTE = EMBED_CHILD_UNIT_ID_ATTRIBUTE;
 exports.EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE = EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE;
 exports.EMOJI_CATEGORIES = EMOJI_CATEGORIES;
 exports.EMOJI_PICKER_COMPONENT = EMOJI_PICKER_COMPONENT;
@@ -24638,6 +25377,8 @@ exports.RibbonOverrideService = RibbonOverrideService;
 exports.RibbonPosition = RibbonPosition;
 exports.RibbonStartGroup = RibbonStartGroup;
 exports.RibbonViewGroup = RibbonViewGroup;
+exports.SYMBOL_CATEGORIES = SYMBOL_CATEGORIES;
+exports.SYMBOL_PICKER_COMPONENT = SYMBOL_PICKER_COMPONENT;
 Object.defineProperty(exports, 'SharedController', {
   enumerable: true,
   get: function () {
@@ -24662,6 +25403,7 @@ exports.Sidebar = Sidebar;
 exports.SingleCanvasPopup = SingleCanvasPopup;
 exports.SingleUnitUIController = SingleUnitUIController;
 exports.Slider = Slider;
+exports.SymbolPicker = SymbolPicker;
 exports.ThemeSwitcherService = ThemeSwitcherService;
 exports.ToggleFullscreenOperation = ToggleFullscreenOperation;
 exports.ToggleShortcutPanelOperation = ToggleShortcutPanelOperation;
@@ -24708,6 +25450,7 @@ Object.defineProperty(exports, 'connectInjector', {
 exports.getAllEmojis = getAllEmojis;
 exports.getDefaultRecentEmojis = getDefaultRecentEmojis;
 exports.getEmbedBoundaryOwner = getEmbedBoundaryOwner;
+exports.getEmbedChildUnitId = getEmbedChildUnitId;
 exports.getEmojiLocaleData = getEmojiLocaleData;
 exports.getHeaderFooterMenuHiddenObservable = getHeaderFooterMenuHiddenObservable;
 exports.getLocalizedEmojiTitle = getLocalizedEmojiTitle;